Repository navigation
STU-445: pipeline holding window matches the mock + split Refine/Regenerate captions - #104
Merged
sgardoll merged 4 commits intoSep 28, 2026
Conversation
…erate captions Holding window (owner: "The 3 stage holding window does not reflect the mock:"). Rendered the branch, compared it to the canonical pipeline view (custom-code-connect-hero.html .walkthrough-layout / .pipeline-view), and fixed the real deltas: - glyph: removed the legacy </> spinner circle and its orange arc; the authored STU-390 mark is now the only glyph, drawn in --muted and aligned with the copy's left edge, 24px above the title (16px stacked). - layout: the panel is the mock's two-column interior - the submitted prompt is the left sidebar (30px inset, hairline, Edit prompt closed at its bottom-left) and the stage view is a left-aligned block centred in the main column. At <=920px the workflow leads and the prompt follows beneath it. - typography: title 34px/1.2 display at weight 500; a visible supporting line carrying the mock's stage copy (16px, --muted, 44ch) replaces the duplicated "Step N of 3 - Stage" subtitle, which stays in the live region sr-only. - bar: 4px pill, --fg fill on the --track token (no indigo/blue gradient, no shimmer); meta line is mono 12px --muted. - stage nav: keeps its semantics and locators but paints in the system's ink (--fg dots, --border pending, --bad failed) instead of indigo/green. Results captions (owner: split the scope sentence so each half sits under its button): "Refine & Regenerate acts on the selected artifact" under Refine & Regenerate, "Acts on the whole bundle" under Add FlutterFlow Build Errors & Regenerate; the combined sentence is gone. Each action is a column that owns its caption, and the two action icons are pinned to the intended 14px so the buttons keep one height when Tailwind's CDN utilities are unavailable. Tests: new holding-window contract in stu377 (computed styles and geometry, fails on the old window) plus the copy-split pin in resultsLayout; stu378's action locator widened to a descendant selector because the captions wrap the buttons. Full CI green: 355 unit, 208 Playwright (207 pass + 1 load flake retried), 7 a11y shells, 9/9 deploy-guard, 30/30 proxies, leak scan clean.
sgardoll
marked this pull request as ready for review
September 28, 2026 07:44
Contributor
|
This PR does not match any of the 1 configured review trigger rule. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
At <=920px the workflow is displayed above the prompt recap, but the recap still came first in the DOM, so Tab reached Edit prompt before the active stage button. The workflow now precedes the recap in the document; desktop grid areas keep the prompt in the left column, and the stacked breakpoint drops its order overrides so DOM and displayed order agree everywhere, failure actions included.
Devin Review flagged that on desktop the workflow column received focus before the left-hand prompt recap: the DOM led with .pipeline-view while grid-template-areas painted it second, so Tab travelled right-to-left. initPipelinePanelOrder now moves the two regions to match the active breakpoint — workflow first when stacked (<=920px), recap first on desktop — and plain grid auto-placement paints them in that order, so document order, displayed order and sequential focus order agree at every width. A 1440px spec pins Edit prompt before the active stage button; the <=920px assertions are unchanged. Co-Authored-By: Stuart Gardoll <sgardoll@gmail.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Devin Review round 2: reparenting the recap blurs a focused descendant, so crossing 920px with Edit prompt focused dropped keyboard focus to the document. The focused element is captured before the move and refocused afterward; a spec drives the resize in both directions with Edit prompt focused and asserts both the new order and the retained focus. Co-Authored-By: Stuart Gardoll <sgardoll@gmail.com>
sgardoll
merged commit Sep 28, 2026
83989b7
into
milestone/stu-implement-updated-ui-ux
2 checks passed
sgardoll
pushed a commit
that referenced
this pull request
Sep 28, 2026
…u445-exact-html-fidelity Re-sync STU-445 onto base f1c819d (merges #108 -> #104 -> #103). Single conflict, in index.html, comment-only: the base adds a five-line comment above <div class="pipeline-view"> documenting #104's initPipelinePanelOrder focus-order contract. Resolved by taking the base side's comment. The base's #104 CSS changes (dropping grid-template-areas in favour of JS-driven region ordering) auto-merge and are preserved. dist/ regenerated from the merged sources: app.js differs from both parents, so the previous bundle was pre-merge. index-CD_p5Yhb.js -> index-C31N1DOp.js. CSS is byte-identical (index-BQUorxWE.css), and a second build is a no-op. npm test 388/388 green (the base contributes 3 tests over the prior 385). No test changed, skipped, or weakened by this merge.
sgardoll
pushed a commit
that referenced
this pull request
Sep 28, 2026
…ndow Both are test-setup corrections. Neither weakens, skips or removes any assertion; no application code is touched. "desktop: keyboard focus follows the prompt-then-workflow order" walked focus from `document.activeElement?.blur()`. Blur does not move Chromium's sequential-focus-navigation starting point, so the sweep resumed wherever focus last was -- landing inside the view, hitting pdot-1, and only wrapping around to the recap afterwards, so edit(7) < pdot1(1) failed. Anchor the walk on a deterministic element instead, mirroring the sibling stacked test's #progress-stage-count anchor: #topbar-avatar is the last tabbable ahead of the panel, so the sweep enters at the recap and still proves edit precedes pdot-1 in tab order (edit=3, pdot1=5 from the top of the document). "resizing across the breakpoint keeps focus inside the moved recap" called .focus() on the Edit prompt the instant the stage went active, with no wait for the composer -> pipeline morph, so the button was still 0x0 and focus never landed -- the send button blurred to BODY and focusedId came back "". This is pre-existing breakage from 83972f1 in #104, born red. Add the await expect(page.locator(".pipeline-view")).toBeVisible() that every other test in this spec already has. The poll assertions are unchanged, so focus retention across the resize is still genuinely verified in both directions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
STU-445 — two items
1. "The 3 stage holding window does not reflect the mock:"
The owner attached a screenshot of staging (25 Sept) showing the legacy window. I rendered the branch state first, then compared it against the canonical pipeline view in
/Users/home/Projects/Custom-Code-Connect-redesign/custom-code-connect-hero.html(.walkthrough-layout/.pipeline-view,stageCopy; thebefore-*variants and the numbered.pipeline-listare excluded — the list exists only as dead CSS in the canonical file, with no markup anywhere).Deltas confirmed by render + computed styles, then fixed (before → after, measured at 1440×900 unless noted):
</>spinner circle (80px lavender disc, indigo#4f46e5icon, orange arc) rendered alongside the STU-390 mark--muted, 24px above the title (16px stacked)1px --borderhairline, kicker/prompt/Edit-prompt closed at its bottom-left (mock.walkthrough-sidebar)310px minmax(0,1fr); the stage view is a left-aligned block centred in the main column (mock.pipeline-view); at ≤920px the workflow leads and the prompt follows beneath (mock's stacked order)--font-display, weight 500,-0.025em--muted-2), duplicating the meta line--muted, 44ch, per-stage copy from the mock'sstageCopy("Turning your idea into a clear FlutterFlow specification." / "Building the Dart source, widget parameters and animation." / "Checking the generated code and preparing the file review."). The precise step/stage/state line stays in thearia-liveregion assr-only, so announcements are unchanged#e2e8f0, radius 3px, indigo→blue gradient fill + shimmer animation--trackbackground,--fgfill,--t-progress/--easetransition--muted-2--font-mono--muted(the run's real elapsed time + "Step N of 3", as the app needs both ends of the mock's space-between line)#6366f1+ glow, done green#22c55e--border, active--fg+--fg 14%ring, done--fg, failed--badEvidence: before render
current-pipeline-1440.png(base) vs after render (both captured with the dev server + Playwright at 1440×900 and 390×844); the after state is additionally pinned as asserted computed styles/geometry ine2e/stu377-pipeline-progress.spec.js→ "Holding window matches the canonical pipeline view" (2-column count and 310px first track,recap.x < view.x, 1px hairline, mark.x === title.x, 34px/500 title, mock description text and 16px size, 4px/999px track,fillColor === var(--fg), DM Mono 12px meta, active dot ===--fg, stage-2 description copy, done dot ===--fg; stacked order at 390px).Stage semantics survive:
#pdot-1/2/3+data-state,aria-current,aria-pressed, keyboard reach, skipped-stage behaviour, failure states and the#pipeline-statuslive region are untouched; the full stu377 spec passes on the new contract (the stage nav is the app's accessible Architect → Generator → Review progression, which the mock's scripted demo does not carry — kept deliberately, see "not implemented" below).2. "Refine & Regenerate acts on the selected artifact · build-error fixes regenerate the whole bundle."
Split so each half sits under its button, and the combined sentence is gone:
Refine & Regenerate acts on the selected artifactActs on the whole bundleEach action is now a column (
.results-action) that owns its button and its caption (.results-action-scope); the two action icons are pinned to the intended 14px in the bar's CSS so the three buttons keep one height in environments where Tailwind's CDN utilities are unavailable (the browser suite). Renders verified at 1440×900 (three 44px buttons, captions beneath) and 390×844 (stacked).Fail → pass evidence
src/resultsLayout.test.js→ "splits the action scope sentence under its own button"index.html:not ok 341 - splits the action scope sentence under its own button→# fail 1,# pass 354# tests 355,# pass 355,# fail 0e2e/stu377-pipeline-progress.spec.js→ "Holding window matches the canonical pipeline view" (2 tests)index.html+app.js(implementation reverted, tests kept):2 failed— "element(s) not found" for.pipeline-view, and the legacy.pipeline-progress-iconstill present2 passed; repeated 4× with--retries=0→8 passede2e/stu378-results.spec.jsaction locator: widened.results-action-bar > button→.results-action-bar button(the captions wrap the two buttons). All assertions kept: count 3, order, visibility, and the equal-prominence checks pass.Full CI on the pushed head (
28428a2)CI=1 npm testCI=1 npm run buildCI=1 CCC_TEST_PORT=3117 npm run test:uistu375"200% zoom…" — navigation timeout under load, passed on retry)CI=1 npm run test:accessibilityCI=1 npm run test:deploy-guardCI=1 npm run test:proxiesCI=1 python3 scripts/scan_bundle_for_leaks.pyNotes: the reserved port 3107 was held by another worker's dev server (
gate-modalworktree), so the UI suite ran on 3117 — same command, different port. The two known CI-only failures (stu385:148, stu391:260) did not appear locally.dist/andscreenshots/were restored to HEAD; the commit contains only the five source/spec files.What I did NOT implement / judgement calls
#pdot-1/2/3+data-stateload-bearing for ~20 tests, and the brief requires stage semantics to survive. They are restyled to the redesign's inks, not removed.PIPELINE_STAGE_TITLESinapp.jsoutside the owned function ranges; stage 1's title already matches the mock and the done titles ("Prompt understood") are pinned by stu377.src/logoMotion.cssuntouched (outside ownership): the mark's colour/margin deltas are applied via a scoped override inindex.html's pipeline CSS..progress-dot.active/.progress-dot.completedrules (indigo/green) that no markup has used since STU-377.--muted; if the owner prefers the mark in--fg(as STU-390 shipped it), that is a one-line override to drop.