Custom widgets and actions, expertly crafted, fully reviewed and
+ready to deploy to your project in one click.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Understanding your prompt
+
Turning your idea into a clear FlutterFlow specification.
+
+
Step 1 of 3
+
+
+
+
+
+
+
+
+
+
+
Your gauge, ready to inspect.
+
This example combines a gradient progress arc with an animated percentage label. Width, height and progress are exposed as FlutterFlow widget parameters.
+
Artifact
Custom Widget
Parameters
width · height · progress
Manual Steps Required
Add the width, height and progress parameters in FlutterFlow.
Paste the Dart into the widget as CircularProgressGauge.
Preview it in FlutterFlow and confirm the gauge fills.
Review
Illustrative, not a live audit
+
+
+
+
+ Is the generated code correct?
+
+
+
+
+
+
+
+
+
+
Generated Dart Code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/e2e/stu445-exact-fidelity.spec.js b/e2e/stu445-exact-fidelity.spec.js
index e342bea..1fe2b0b 100644
--- a/e2e/stu445-exact-fidelity.spec.js
+++ b/e2e/stu445-exact-fidelity.spec.js
@@ -1,5 +1,6 @@
import { test, expect } from '@playwright/test';
import { applyDefaultRoutes, ENDPOINTS, oneArtifact, reviewPassed, professionalSubscription, providerError } from './fixtures/apiFixtures.js';
+import { openCanonicalReference } from './fixtures/canonicalReference.js';
const PROMPT = 'A circular progress gauge with a gradient stroke and an animated percentage label';
@@ -79,12 +80,22 @@ async function box(page, selector, expected) {
actual.forEach((value,i) => expect(Math.abs(value - expected[i]), `${selector} component ${i}: ${actual} vs ${expected}`).toBeLessThanOrEqual(1));
}
-// Coordinates transcribed from the unchanged reference, not implementation
-// selectors/styles: reference SHA 548e628f…91dc, preflight geometry JSON.
-for (const width of [1920,1440,1366,921,920,390]) {
- test(`reference stage and panel geometry at ${width}px`, async ({ page }) => {
- await page.setViewportSize({ width, height:width === 390 ? 844 : width === 1366 ? 768 : width === 1440 ? 900 : 1080 });
+async function accountRoundTrip(page) {
+ await page.locator('#topbar-avatar').click();
+ await expect(page.locator('#account-view')).toBeVisible();
+ await page.locator('a.brand').click();
+ await expect(page.locator('#home-view')).toBeVisible();
+}
+
+// Fixed structural coordinates remain independent of either render. Intrinsic
+// text geometry comes from the pinned source in this same browser/viewport,
+// not a platform-specific line-wrap measurement. Both use real frozen fonts.
+for (const width of [1920,1440,1366,921,920,390,389]) {
+ test(`reference stage and panel geometry at ${width}px`, async ({ page, context }, testInfo) => {
+ await page.setViewportSize({ width, height:width <= 390 ? 844 : width === 1366 ? 768 : width === 1440 ? 900 : 1080 });
await open(page);
+ const reference = await context.newPage();
+ await openCanonicalReference(reference, page.viewportSize());
const run = await gates(page);
await page.waitForTimeout(800); // authored first-load reveal
const scale = Math.min(1,width/1920);
@@ -98,19 +109,41 @@ for (const width of [1920,1440,1366,921,920,390]) {
await box(page, '#pipeline-input', [40,426.859375,310,94]);
await box(page, '#hero-send', [314,500.859375,44,44]);
}
- await submit(page);
+ await reference.locator('#prompt').fill(PROMPT);
+ await Promise.all([submit(page), reference.locator('.send').click()]);
await expect.poll(() => run.calls).toEqual(['architect']);
await page.waitForTimeout(2300);
+ await expect(reference.locator('#pipeline-title')).toHaveText('Understanding your prompt');
+ await expect(page.locator('#progress-title-text')).toHaveText('Understanding your prompt');
+ await expect(reference.locator('#submitted-prompt')).toHaveText(PROMPT);
+ await expect(page.locator('#pipeline-submitted-prompt')).toHaveText(PROMPT);
+ for (const [appSelector, referenceSelector] of [
+ ['#main-stage-container', '.walkthrough-layout'],
+ ['#progress-title-text', '#pipeline-title'],
+ ['#progress-description-text', '#pipeline-description'],
+ ['.progress-track', '.pipeline-track'],
+ ]) await box(page, appSelector, await rect(reference, referenceSelector));
+ for (const [render, selector] of [[page, '#progress-title-text'], [reference, '#pipeline-title']]) {
+ await expect(render.locator(selector)).toHaveCSS('letter-spacing', width <= 920 ? '-0.625px' : '-0.85px'); // -.025em
+ expect(await render.evaluate(() => document.fonts.check('500 25px Delight'))).toBe(true);
+ }
if (width > 920) {
await box(page, '#main-stage-container', [250*scale,164*scale,1420*scale,590*scale]);
await box(page, '.pipeline-prompt-recap', [252*scale,166*scale,310*scale,586*scale]);
await box(page, '.progress-track', [626*scale,553.1875*scale,978*scale,4*scale]);
- } else if (width === 390) {
- await box(page, '#main-stage-container', [20,92,350,497.1875]);
- await box(page, '.progress-track', [46,337.1875,298,4]);
} else {
- await box(page, '#main-stage-container', [20,92,880, ...(await rect(page,'#main-stage-container')).slice(3)]);
+ const panel = await rect(reference, '.walkthrough-layout');
+ const track = await rect(reference, '.pipeline-track');
+ await box(page, '#main-stage-container', [20,92,width-40,panel[3]]);
+ await box(page, '.progress-track', [46,track[1],width-92,4]);
+ await expect(page.locator('#progress-title-text')).toHaveCSS('font-size','25px');
+ await expect(page.locator('#progress-title-text')).toHaveCSS('line-height','30px');
+ }
+ if (width === 1920 || width <= 390) {
+ await page.screenshot({ path:testInfo.outputPath('app-pipeline.png'), fullPage:true });
+ await reference.screenshot({ path:testInfo.outputPath('reference-pipeline.png'), fullPage:true });
}
+ await reference.close();
const sidebar = await page.locator('.pipeline-prompt-recap').elementHandle();
run.release('architect');
await expect.poll(() => run.calls).toEqual(['architect','generator']);
@@ -132,6 +165,147 @@ for (const width of [1920,1440,1366,921,920,390]) {
});
}
+for (const reducedMotion of ['no-preference','reduce']) {
+ for (const outcome of ['held Architect','backend failure']) {
+ test(`Edit after ${outcome} preserves the composer through two navigation cycles and a successful retry (${reducedMotion})`, async ({ page }, testInfo) => {
+ await page.setViewportSize({ width:390,height:844 });
+ await open(page, { reducedMotion });
+ for (const cycle of [1,2]) {
+ const run = await gates(page);
+ await submit(page);
+ await expect.poll(() => run.calls).toEqual(['architect']);
+ if (outcome === 'backend failure') {
+ run.release('architect', providerError());
+ await expect(page.locator('#pipeline-failure')).toBeVisible();
+ await page.locator('#pipeline-failure-actions [data-action="edit"]').click();
+ } else {
+ await page.locator('#pipeline-edit-prompt').click();
+ run.release('architect');
+ }
+ await expect(page.locator('#composer')).toBeVisible();
+ await accountRoundTrip(page);
+ await page.waitForTimeout(1500); // stale response and cancelled handoff must stay retired
+ await page.screenshot({ path:testInfo.outputPath(`edited-home-${cycle}.png`), fullPage:true });
+ await expect(page.locator('#composer')).toBeVisible();
+ await expect(page.locator('#pipeline-input')).toHaveValue(PROMPT);
+ await expect(page.locator('#hero-send')).toBeEnabled();
+ await expect(page.locator('#generation-stage')).toBeHidden();
+ await expect(page.locator('#pipeline-progress')).toHaveAttribute('data-run-state','settled');
+ await expect(page.locator('#pipeline-progress')).toBeHidden();
+ await expect(page.locator('#results-view')).toBeHidden();
+ await expect(page.locator('.composer-morph')).toHaveCount(0);
+ expect(run.calls).toEqual(['architect']);
+ }
+
+ const retry = await gates(page);
+ await submit(page);
+ retry.release('architect'); retry.release('generator'); retry.release('review');
+ await expect(page.locator('#results-view')).toBeVisible();
+ const expectedCode = JSON.parse(JSON.parse(oneArtifact().body).output).artifacts[0].code;
+ for (const cycle of [1,2]) {
+ if (cycle === 2) await page.locator('#artifact-tabs [role=tab]').first().click();
+ await accountRoundTrip(page);
+ await expect(page.locator('#results-view')).toBeVisible();
+ await expect(page.locator('#composer')).toBeHidden();
+ await expect(page.locator('#pipeline-submitted-prompt')).toHaveText(PROMPT);
+ await expect(page.locator('.review-score strong')).toHaveText('96');
+ expect((await page.locator('#results-code-output .code-line').allTextContents()).join('\n')).toBe(expectedCode);
+ await expect(page.locator(cycle === 1 ? '#results-summary-tab' : '#artifact-tabs [role=tab]')).toHaveAttribute('aria-selected','true');
+ await expect(page.locator('.composer-morph')).toHaveCount(0);
+ }
+ expect(retry.calls).toEqual(['architect','generator','review']);
+ await page.screenshot({ path:testInfo.outputPath('retry-results-retained.png'), fullPage:true });
+ });
+ }
+
+ for (const returnAction of ['Edit prompt','focusPromptInput']) {
+ test(`explicit composer return via ${returnAction} is not undone by navigation after Results (${reducedMotion})`, async ({ page }, testInfo) => {
+ await page.setViewportSize({ width:390,height:844 });
+ await open(page, { reducedMotion });
+ const run = await gates(page);
+ await submit(page);
+ run.release('architect'); run.release('generator'); run.release('review');
+ await expect(page.locator('#results-view')).toBeVisible();
+ await expect(page.locator('.review-score strong')).toHaveText('96');
+ if (returnAction === 'Edit prompt') await page.locator('#pipeline-edit-prompt').click();
+ else await page.evaluate(() => window.focusPromptInput());
+ await expect(page.locator('#composer')).toBeVisible();
+ for (const cycle of [1,2]) {
+ await accountRoundTrip(page);
+ await expect(page.locator('#composer')).toBeVisible();
+ await expect(page.locator('#pipeline-input')).toHaveValue(PROMPT);
+ await expect(page.locator('#hero-send')).toBeEnabled();
+ await expect(page.locator('#generation-stage')).toBeHidden();
+ await expect(page.locator('.composer-morph')).toHaveCount(0);
+ }
+ expect(run.calls).toEqual(['architect','generator','review']);
+ await page.screenshot({ path:testInfo.outputPath('completed-result-return-home.png'), fullPage:true });
+ });
+ }
+
+ test(`abandoned Architect returns to the preserved composer on both navigation cycles (${reducedMotion})`, async ({ page }, testInfo) => {
+ await page.setViewportSize({ width:1920,height:1080 });
+ await open(page, { reducedMotion });
+ for (const cycle of [1,2]) {
+ const run = await gates(page);
+ await submit(page);
+ await expect.poll(() => run.calls).toEqual(['architect']);
+ await page.locator('#topbar-avatar').click();
+ await expect(page.locator('#account-view')).toBeVisible();
+ await page.locator('a.brand').click();
+ await expect(page.locator('#home-view')).toBeVisible();
+ run.release('architect');
+ await page.waitForTimeout(1500); // late response and all abandoned handoff timers
+ await page.screenshot({ path:testInfo.outputPath(`abandoned-home-${cycle}.png`), fullPage:true });
+ expect(run.calls).toEqual(['architect']);
+ await expect(page.locator('#pipeline-progress')).toHaveAttribute('data-run-state','settled');
+ await expect(page.locator('#pipeline-progress')).toBeHidden();
+ await expect(page.locator('#generation-stage')).toBeHidden();
+ await expect(page.locator('#composer')).toBeVisible();
+ await expect(page.locator('#pipeline-input')).toHaveValue(PROMPT);
+ await expect(page.locator('#hero-send')).toBeEnabled();
+ await expect(page.locator('.composer-morph')).toHaveCount(0);
+ await expect(page.locator('#results-view')).toBeHidden();
+ }
+ });
+
+ test(`completed Results retain fullscreen layout and raw code on both navigation cycles (${reducedMotion})`, async ({ page }, testInfo) => {
+ await page.setViewportSize({ width:1920,height:1080 });
+ await open(page, { reducedMotion });
+ const run = await gates(page);
+ await submit(page);
+ run.release('architect'); run.release('generator'); run.release('review');
+ await expect(page.locator('#results-view')).toBeVisible();
+ await page.waitForTimeout(2200);
+ await box(page, '#main-stage-container', [40,104,1840,936]);
+ const expectedCode = JSON.parse(JSON.parse(oneArtifact().body).output).artifacts[0].code;
+ for (const cycle of [1,2]) {
+ // First preserve Summary, then preserve the selected file on the second visit.
+ if (cycle === 2) await page.locator('#artifact-tabs [role=tab]').first().click();
+ await page.locator('#topbar-avatar').click();
+ await expect(page.locator('#account-view')).toBeVisible();
+ await expect(page.locator('#generation-stage')).toBeHidden();
+ await page.locator('a.brand').click();
+ await expect(page.locator('#results-view')).toBeVisible();
+ await page.waitForTimeout(300); // router visibility transition
+ await page.screenshot({ path:testInfo.outputPath(`results-home-${cycle}.png`), fullPage:true });
+ await box(page, '#main-stage-container', [40,104,1840,936]);
+ await box(page, '.results-action-bar', [400,941,1430,57]);
+ await expect(page.locator('body')).toHaveClass(/results-fullscreen/);
+ await expect(page.locator('body')).toHaveClass(/results-with-sidebar/);
+ await expect(page.locator('#main-stage-container')).toHaveCSS('visibility','visible');
+ await expect(page.locator('#pipeline-submitted-prompt')).toHaveText(PROMPT);
+ await expect(page.locator('.review-score strong')).toHaveText('96');
+ expect((await page.locator('#results-code-output .code-line').allTextContents()).join('\n')).toBe(expectedCode);
+ await expect(page.locator(cycle === 1 ? '#results-summary-tab' : '#artifact-tabs [role=tab]')).toHaveAttribute('aria-selected','true');
+ await expect(page.locator('#pipeline-progress')).toBeHidden();
+ await expect(page.locator('#composer')).toBeHidden();
+ await expect(page.locator('.composer-morph')).toHaveCount(0);
+ expect(run.calls).toEqual(['architect','generator','review']);
+ }
+ });
+}
+
test('morph keyframes, opaque ghost, hidden destination and reading-order reveal', async ({ page }) => {
await page.setViewportSize({ width:1920,height:1080 });
await open(page);
diff --git a/index.html b/index.html
index fd8e502..c4d9b70 100644
--- a/index.html
+++ b/index.html
@@ -1998,11 +1998,6 @@
}
.pipeline-view h3 {
font-size: 25px;
- /* The longest phase title ("Understanding your prompt") measures
- ~304px at this size, past the 298px content column, so it wrapped
- to two lines and pushed every later section down 30px. Tightening
- tracking keeps the phase title to the canonical single line. */
- letter-spacing: -0.045em;
}
.pipeline-progress .pipeline-glyph.logo-loop { margin-bottom: 16px; }
.pipeline-prompt-recap {