mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Live: polling rework, source locks, preflight scaffolding, Vue previews
Carved out of #371, minus progressive publication. Everything here works against real project source the way main's Live already does: the agent writes variants into the file the browser loaded, HMR fires, Accept promotes and carbonizes. Nothing is staged anywhere. Poll lanes. Events now carry an explicit priority: accept/discard/exit ahead of manual_edit_apply/steer/carbonize_cleanup ahead of generate. A long generate can no longer sit in front of the Accept the user just clicked. leaseEvent claims its lease before awaiting, so a slow prepare cannot hand the same event to two pollers. Source locks. A per-file mutex around every accept and discard path, keyed on a digest of the absolute path. Staleness is decided by owner-pid liveness rather than mtime, so a wedged lock clears when its owner dies instead of after an arbitrary timeout, and a slow-but-live accept is never stolen from. Only the owning process can release a lock. Preflight scaffolding. The server runs live-wrap (or live-insert) before the poll returns and hands the result back as event.scaffold. That walk is measured at ~7.6s on a large repo; moving it off the agent's critical path removes a deterministic tool round trip without touching the generated design. Falls back cleanly to the agent running the helper itself. Vue previews. previewMode: "vue-component" for Nuxt/Vue targets, matching the existing Svelte component path: variants compile as real SFCs from a dev-only directory so the route is never rewritten during generation, and Vite mounts them without invalidating page state. Accept is the only route write. Includes a Vue attr tokenizer that normalizes shorthand bindings (@x, :x, #x) to their canonical forms. Accept hardening. Every thrown failure now returns mode: 'error' rather than an ambiguous unhandled result, so a real failure is never classified as a deliberate manual handoff and silently dropped. The marker search skips node_modules/.git/dist/build/.impeccable. Shared CLI arg parsing extracted to scripts/lib/cli-args.mjs. Assisted-by: Claude Code
This commit is contained in:
Paul Bakaus
@@ -660,270 +660,7 @@ for (const { name, fixture } of fixtures) {
|
||||
}
|
||||
});
|
||||
|
||||
if (['vite8-react-plain', 'astro-vite7', 'nextjs-app-router', 'vite8-sveltekit', 'nuxt-vite7'].includes(name) && shouldRunScenario('progressive')) {
|
||||
it('reveals variant 1 safely while the remaining variants and params are pending', liveE2eTestOptions, async (t) => {
|
||||
if (manualOnly || process.env.IMPECCABLE_E2E_MANUAL_SCENARIO) {
|
||||
t.skip('manual scenario filter is active');
|
||||
return;
|
||||
}
|
||||
|
||||
const traceEvents = [];
|
||||
const session = await bootFixtureSession({
|
||||
name,
|
||||
fixture,
|
||||
browser,
|
||||
agent: createFakeAgent(),
|
||||
wrapTarget: wrapTargetFromPickedElement,
|
||||
progressive: true,
|
||||
progressiveDelayMs: 2500,
|
||||
trace: (eventName, data = {}) => traceEvents.push({ name: eventName, at: Date.now(), ...data }),
|
||||
log: (m) => t.diagnostic(m),
|
||||
});
|
||||
const { page, tmp, consoleErrors, teardown } = session;
|
||||
let sourceFile = null;
|
||||
|
||||
try {
|
||||
await waitForHandshake(page);
|
||||
const pickSelector = fixture.runtime.pickSelector || 'h1.hero-title';
|
||||
const originalCopy = await page.locator(pickSelector).innerText();
|
||||
await pickElement(page, pickSelector);
|
||||
await clickGo(page);
|
||||
|
||||
const partial = await waitForProgressiveReviewState(page, 3);
|
||||
assert.equal(partial.arrived, 1, 'exactly variant 1 is present during the progressive interval');
|
||||
assert.equal(partial.visible, 1, 'variant 1 is the visible review target');
|
||||
assert.equal(partial.copy, originalCopy, 'variant 1 preserves the picked copy');
|
||||
assert.notEqual(partial.acceptPointerEvents, 'none', 'Accept is available for the first reviewable variant');
|
||||
assert.notEqual(partial.discardPointerEvents, 'none', 'Discard can cancel unfinished generation');
|
||||
assert.equal(partial.hasParams, false, 'variant 1 has no eager parameter manifest');
|
||||
assert.equal(partial.tuneVisible, true, 'Tune stays visible while parameter generation is outstanding');
|
||||
assert.equal(partial.tuneDisabled, true, 'pending Tune is non-interactive until controls arrive');
|
||||
assert.match(partial.tuneTitle || '', /still being prepared/, 'pending Tune explains its loading state');
|
||||
assert.equal(partial.paramsPanelVisible, false, 'the Tune popover stays closed until parameter delivery');
|
||||
|
||||
sourceFile = await locateSessionFile(tmp);
|
||||
const isComponentPreview = sourceFile.endsWith('manifest.json');
|
||||
if (isComponentPreview) {
|
||||
const manifest = JSON.parse(readFileSync(sourceFile, 'utf-8'));
|
||||
sourceFile = join(tmp, manifest.sourceFile);
|
||||
const extension = manifest.componentExtension || 'svelte';
|
||||
assert.equal(existsSync(join(tmp, manifest.componentDir, `v1.${extension}`)), true, 'partial component preview contains variant 1');
|
||||
assert.equal(existsSync(join(tmp, manifest.componentDir, 'params.json')), false, 'partial component preview defers parameter manifests');
|
||||
} else {
|
||||
const partialSource = readFileSync(sourceFile, 'utf-8');
|
||||
assert.equal(countSourceVariants(partialSource), 1, 'partial source contains one reviewable variant');
|
||||
assert.doesNotMatch(partialSource, /data-impeccable-params=/, 'partial source defers parameter manifests');
|
||||
}
|
||||
|
||||
// Keyboard Accept must durably fence the worker before its delayed
|
||||
// second publication, then return the browser to picking without
|
||||
// waiting for variants the user no longer wants.
|
||||
const acceptClickedAt = Date.now();
|
||||
await clickAccept(page, { expectedVariant: 1 });
|
||||
await waitForBarHidden(page);
|
||||
await page.waitForFunction(
|
||||
() => window.__IMPECCABLE_LIVE_STATE__ === 'PICKING',
|
||||
{ timeout: 2_000 },
|
||||
);
|
||||
const automationAcceptToPickingMs = Date.now() - acceptClickedAt;
|
||||
const browserAcceptToPickingMs = Number(await page.evaluate(() => document.documentElement.dataset.impeccableAcceptToPickingMs));
|
||||
const acceptToPickingMs = Number.isFinite(browserAcceptToPickingMs) && browserAcceptToPickingMs > 0
|
||||
? browserAcceptToPickingMs
|
||||
: automationAcceptToPickingMs;
|
||||
t.diagnostic(`Accept dispatch → picker ready: ${acceptToPickingMs}ms (${automationAcceptToPickingMs}ms including Playwright actionability)`);
|
||||
assert.ok(acceptToPickingMs < 500, `Accept should release the picker within 500ms of dispatch; got ${acceptToPickingMs}ms`);
|
||||
const finalSource = await waitForSourceClean(sourceFile, 20_000);
|
||||
assert.match(finalSource, new RegExp(escapeRegExp(originalCopy)), 'early accepted source preserves the original copy');
|
||||
assert.doesNotMatch(finalSource, /data-impeccable-variant=/, 'early accepted source is free of preview scaffolding');
|
||||
assert.equal(countSourceVariants(finalSource), 0, 'the delayed worker cannot reinsert later variants');
|
||||
|
||||
const firstGenerateId = traceEvents.find((event) => event.name === 'agent.event.received' && event.type === 'generate')?.id;
|
||||
// Give framework HMR one paint to settle the newly committed tree;
|
||||
// this stays inside the 1.5s next-pick budget and avoids selecting a
|
||||
// node instance React is replacing in the same frame.
|
||||
if (name === 'nextjs-app-router' || name === 'vite8-sveltekit' || name === 'nuxt-vite7') await waitForHandshake(page);
|
||||
await page.waitForTimeout(250);
|
||||
await page.mouse.move(1, 1);
|
||||
const nextPickSelector = name === 'nextjs-app-router'
|
||||
? 'main.page'
|
||||
: name === 'vite8-sveltekit'
|
||||
? 'article.feature-card'
|
||||
: name === 'nuxt-vite7'
|
||||
? 'main.page'
|
||||
: '.hero-hook';
|
||||
await pickElement(page, nextPickSelector, {
|
||||
resetPickMode: name === 'nextjs-app-router' || name === 'nuxt-vite7',
|
||||
position: name === 'nuxt-vite7' ? { x: 12, y: 12 } : undefined,
|
||||
});
|
||||
const nextGoAt = Date.now();
|
||||
await clickGo(page);
|
||||
let nextGenerateTrace = null;
|
||||
const pickupDeadline = Date.now() + 1_500;
|
||||
while (Date.now() < pickupDeadline) {
|
||||
nextGenerateTrace = traceEvents.find((event) => (
|
||||
event.name === 'agent.event.received'
|
||||
&& event.type === 'generate'
|
||||
&& event.id !== firstGenerateId
|
||||
));
|
||||
if (nextGenerateTrace) break;
|
||||
await new Promise((resolve) => setTimeout(resolve, 20));
|
||||
}
|
||||
assert.ok(nextGenerateTrace, 'the poll supervisor picks up the next generation while the canceled worker unwinds');
|
||||
const nextDispatchToPickupMs = nextGenerateTrace.at - nextGenerateTrace.clientSentAt;
|
||||
assert.ok(
|
||||
nextDispatchToPickupMs < 1_500,
|
||||
`next generation pickup should stay below 1.5s from dispatch; got ${nextDispatchToPickupMs}ms`,
|
||||
);
|
||||
t.diagnostic(`Next Go dispatch → generation pickup: ${nextDispatchToPickupMs}ms (${nextGenerateTrace.at - nextGoAt}ms including Playwright actionability)`);
|
||||
if (process.env.IMPECCABLE_E2E_METRICS_FILE) {
|
||||
appendFileSync(process.env.IMPECCABLE_E2E_METRICS_FILE, JSON.stringify({
|
||||
acceptToPickingMs,
|
||||
nextGoToPickupMs: nextDispatchToPickupMs,
|
||||
automationAcceptToPickingMs,
|
||||
automationNextGoToPickupMs: nextGenerateTrace.at - nextGoAt,
|
||||
fixture: name,
|
||||
at: new Date().toISOString(),
|
||||
}) + '\n');
|
||||
}
|
||||
assert.ok(
|
||||
traceEvents.some((event) => event.name === 'agent.scaffold.reused'),
|
||||
'agent reuses the server preflight scaffold',
|
||||
);
|
||||
assert.equal(
|
||||
traceEvents.some((event) => event.name === 'agent.scaffold.start'),
|
||||
false,
|
||||
'agent does not repeat deterministic source discovery after preflight',
|
||||
);
|
||||
const generateTrace = traceEvents.find((event) => event.name === 'agent.event.received' && event.type === 'generate');
|
||||
assert.ok(generateTrace?.id, 'generate trace exposes the durable session id');
|
||||
const generationTimings = await waitForGenerationTimings(tmp, generateTrace.id, { requireAllVariants: false });
|
||||
assert.ok(generationTimings.generation_ready?.at, 'durable timing records when generation work can start');
|
||||
assert.ok(generationTimings.first_reviewable?.at, 'durable timing records the first reviewable variant');
|
||||
assert.equal(generationTimings.all_variants_ready, undefined, 'canceled work never records all variants ready');
|
||||
|
||||
const realErrors = consoleErrors.filter((error) =>
|
||||
!/(Download the React DevTools|StrictMode|Failed to load resource: the server responded with a status of 404)/i.test(error),
|
||||
);
|
||||
if (fixture.runtime.probe?.expectConsoleClean) {
|
||||
assert.deepEqual(realErrors, [], 'progressive HMR and early-action guards produce no browser errors');
|
||||
} else if (realErrors.length > 0) {
|
||||
t.diagnostic(`Known framework HMR console noise during progressive source rewrites: ${realErrors.length} error(s)`);
|
||||
for (const error of realErrors) t.diagnostic(error.split('\n')[0]);
|
||||
}
|
||||
} finally {
|
||||
await teardownAndResetBrowser(teardown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (name === 'vite8-react-plain' && shouldRunScenario('progressive')) {
|
||||
it('accepts variant 2 while variant 3 is still pending', liveE2eTestOptions, async (t) => {
|
||||
const traceEvents = [];
|
||||
const session = await bootFixtureSession({
|
||||
name,
|
||||
fixture,
|
||||
browser,
|
||||
agent: createFakeAgent(),
|
||||
wrapTarget: wrapTargetFromPickedElement,
|
||||
progressive: true,
|
||||
progressiveInitialCount: 2,
|
||||
progressiveDelayMs: 2500,
|
||||
trace: (eventName, data = {}) => traceEvents.push({ name: eventName, at: Date.now(), ...data }),
|
||||
log: (m) => t.diagnostic(m),
|
||||
});
|
||||
const { page, tmp, consoleErrors, teardown } = session;
|
||||
try {
|
||||
await waitForHandshake(page);
|
||||
const pickSelector = fixture.runtime.pickSelector || 'h1.hero-title';
|
||||
const originalCopy = await page.locator(pickSelector).innerText();
|
||||
await pickElement(page, pickSelector);
|
||||
await clickGo(page);
|
||||
|
||||
const partial = await waitForProgressiveReviewState(page, 3, { arrived: 2, visible: 1 });
|
||||
assert.equal(partial.arrived, 2, 'variants 1 and 2 arrive before variant 3');
|
||||
assert.equal(partial.visible, 1, 'variant 1 remains visible until the user advances');
|
||||
assert.notEqual(partial.acceptPointerEvents, 'none', 'arrived variants remain actionable while the tail is pending');
|
||||
assert.equal(partial.hasParams, false, 'the partial two-variant revision still defers parameter manifests');
|
||||
|
||||
await clickNext(page);
|
||||
const second = await readProgressiveReviewState(page);
|
||||
assert.equal(second.visible, 2, 'variant 2 is reviewable before variant 3 exists');
|
||||
assert.equal(second.copy, originalCopy, 'variant 2 preserves the picked copy');
|
||||
|
||||
const wrappedSource = await locateSessionFile(tmp);
|
||||
const acceptStartedAt = Date.now();
|
||||
await clickAccept(page, { expectedVariant: 2 });
|
||||
await waitForBarHidden(page);
|
||||
await page.waitForFunction(
|
||||
() => window.__IMPECCABLE_LIVE_STATE__ === 'PICKING',
|
||||
{ timeout: 2_000 },
|
||||
);
|
||||
const browserAcceptMs = Number(await page.evaluate(() => document.documentElement.dataset.impeccableAcceptToPickingMs));
|
||||
const acceptToPickingMs = Number.isFinite(browserAcceptMs) && browserAcceptMs > 0
|
||||
? browserAcceptMs
|
||||
: Date.now() - acceptStartedAt;
|
||||
assert.ok(acceptToPickingMs < 500, `variant 2 Accept should release the picker within 500ms; got ${acceptToPickingMs}ms`);
|
||||
|
||||
const cleanSource = await waitForSourceClean(wrappedSource, 20_000);
|
||||
assert.match(cleanSource, new RegExp(escapeRegExp(originalCopy)), 'accepted variant 2 preserves source copy');
|
||||
assert.doesNotMatch(cleanSource, /data-impeccable-variant=/, 'accepted variant 2 leaves no preview scaffolding');
|
||||
await page.waitForTimeout(2750);
|
||||
assert.doesNotMatch(readFileSync(wrappedSource, 'utf-8'), /data-impeccable-variant=/, 'the delayed variant 3 write stays fenced');
|
||||
|
||||
const generateId = traceEvents.find((event) => event.name === 'agent.event.received' && event.type === 'generate')?.id;
|
||||
const timings = await waitForGenerationTimings(tmp, generateId, { requireAllVariants: false });
|
||||
assert.equal(timings.all_variants_ready, undefined, 'accepting variant 2 cancels the unfinished third variant');
|
||||
const realErrors = consoleErrors.filter((error) =>
|
||||
!/(Download the React DevTools|StrictMode|Failed to load resource: the server responded with a status of 404)/i.test(error),
|
||||
);
|
||||
assert.deepEqual(realErrors, [], 'variant 2 early Accept stays console-clean');
|
||||
} finally {
|
||||
await teardownAndResetBrowser(teardown);
|
||||
}
|
||||
});
|
||||
|
||||
it('promotes pending Tune controls when the params-only revision arrives', liveE2eTestOptions, async (t) => {
|
||||
const session = await bootFixtureSession({
|
||||
name,
|
||||
fixture,
|
||||
browser,
|
||||
agent: createFakeAgent(),
|
||||
wrapTarget: wrapTargetFromPickedElement,
|
||||
progressive: true,
|
||||
progressiveDelayMs: 1500,
|
||||
log: (message) => t.diagnostic(message),
|
||||
});
|
||||
const { page, teardown } = session;
|
||||
try {
|
||||
await waitForHandshake(page);
|
||||
await pickElement(page, fixture.runtime.pickSelector || 'h1.hero-title');
|
||||
await clickGo(page);
|
||||
|
||||
const pending = await waitForProgressiveReviewState(page, 3);
|
||||
assert.equal(pending.tuneVisible, true);
|
||||
assert.equal(pending.tuneDisabled, true);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
const root = window.__IMPECCABLE_LIVE_CHROME_CORE__?.root?.()
|
||||
|| window.__IMPECCABLE_LIVE_UI_ROOT__
|
||||
|| document;
|
||||
const tune = root.querySelector('[data-iceq-tune="1"]');
|
||||
const wrapper = document.querySelector('[data-impeccable-variants]');
|
||||
return tune?.disabled === false
|
||||
&& !!wrapper?.querySelector('[data-impeccable-params]');
|
||||
}, { timeout: 10_000 });
|
||||
const ready = await readProgressiveReviewState(page);
|
||||
assert.equal(ready.arrived, 3, 'all variants remain mounted after params publication');
|
||||
assert.equal(ready.tuneVisible, true);
|
||||
assert.equal(ready.tuneDisabled, false, 'Tune becomes actionable without another variant arrival');
|
||||
|
||||
await clickDiscard(page);
|
||||
await page.waitForFunction(() => window.__IMPECCABLE_LIVE_STATE__ === 'PICKING', { timeout: 2_000 });
|
||||
} finally {
|
||||
await teardownAndResetBrowser(teardown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (shouldRunScenario('manual') && Array.isArray(fixture.runtime.manualEditScenarios) && fixture.runtime.manualEditScenarios.length > 0) {
|
||||
const manualScenarioFilter = process.env.IMPECCABLE_E2E_MANUAL_SCENARIO || '';
|
||||
@@ -1074,61 +811,6 @@ function recordGenerateEvents(agent, events) {
|
||||
};
|
||||
}
|
||||
|
||||
async function waitForProgressiveReviewState(page, expected, { arrived: targetArrived = 1, visible: targetVisible = 1 } = {}) {
|
||||
await installLiveQueryHelpers(page);
|
||||
await page.waitForFunction(({ variantCount, targetArrived, targetVisible }) => {
|
||||
const query = window.__impeccableLiveQuery || ((selector) => document.querySelector(selector));
|
||||
const wrapper = query('[data-impeccable-variants]');
|
||||
const variants = wrapper?.querySelectorAll('[data-impeccable-variant]:not([data-impeccable-variant="original"])');
|
||||
const debugState = window.__IMPECCABLE_LIVE_CHROME_CORE__?.debugState?.();
|
||||
const arrived = /^(?:svelte|vue)-component$/.test(wrapper?.dataset.impeccablePreview || '')
|
||||
? Number(debugState?.arrivedVariants || 0)
|
||||
: variants?.length;
|
||||
const root = window.__IMPECCABLE_LIVE_CHROME_CORE__?.root?.()
|
||||
|| window.__IMPECCABLE_LIVE_UI_ROOT__
|
||||
|| document;
|
||||
const bar = root.querySelector('#impeccable-live-bar');
|
||||
return arrived === targetArrived
|
||||
&& new RegExp(`${targetVisible}\\s*\\/\\s*${variantCount}`).test(bar?.textContent || '')
|
||||
&& /more arriving/.test(bar?.textContent || '');
|
||||
}, { variantCount: expected, targetArrived, targetVisible }, { timeout: 15_000 });
|
||||
return readProgressiveReviewState(page);
|
||||
}
|
||||
|
||||
async function readProgressiveReviewState(page) {
|
||||
await installLiveQueryHelpers(page);
|
||||
return page.evaluate(() => {
|
||||
const query = window.__impeccableLiveQuery || ((selector) => document.querySelector(selector));
|
||||
const wrapper = query('[data-impeccable-variants]');
|
||||
const variants = [...(wrapper?.querySelectorAll('[data-impeccable-variant]:not([data-impeccable-variant="original"])') || [])];
|
||||
const debugState = window.__IMPECCABLE_LIVE_CHROME_CORE__?.debugState?.();
|
||||
const isSveltePreview = /^(?:svelte|vue)-component$/.test(wrapper?.dataset.impeccablePreview || '');
|
||||
const visibleVariant = variants.find((variant) => getComputedStyle(variant).display !== 'none');
|
||||
const root = window.__IMPECCABLE_LIVE_CHROME_CORE__?.root?.()
|
||||
|| window.__IMPECCABLE_LIVE_UI_ROOT__
|
||||
|| document;
|
||||
const buttons = [...root.querySelectorAll('#impeccable-live-bar button')];
|
||||
const accept = buttons.find((button) => /Accept/.test(button.textContent || ''));
|
||||
const discard = buttons.find((button) => (button.textContent || '').includes('✕'));
|
||||
const paramsPanel = root.querySelector('#impeccable-live-params-panel');
|
||||
const tune = root.querySelector('[data-iceq-tune="1"]');
|
||||
return {
|
||||
arrived: isSveltePreview ? Number(debugState?.arrivedVariants || 0) : variants.length,
|
||||
visible: isSveltePreview ? Number(debugState?.visibleVariant || 0) : Number(visibleVariant?.dataset.impeccableVariant || 0),
|
||||
copy: isSveltePreview ? (wrapper?.innerText || '') : (visibleVariant?.innerText || ''),
|
||||
acceptPointerEvents: accept ? getComputedStyle(accept).pointerEvents : null,
|
||||
discardPointerEvents: discard ? getComputedStyle(discard).pointerEvents : null,
|
||||
hasParams: variants.some((variant) => variant.hasAttribute('data-impeccable-params')),
|
||||
tuneVisible: !!tune,
|
||||
tuneDisabled: tune?.disabled ?? null,
|
||||
tuneTitle: tune?.title || '',
|
||||
paramsPanelVisible: !!paramsPanel
|
||||
&& getComputedStyle(paramsPanel).pointerEvents !== 'none'
|
||||
&& getComputedStyle(paramsPanel).clipPath === 'inset(0px)',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function countSourceVariants(source) {
|
||||
return (String(source).match(/<div\s+data-impeccable-variant="(?!original")/g) || []).length;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user