v1.8.0: web canvas interface rebuild, dark theme, responsive layout, 45 UI fixes - #71
Merged
Conversation
…45 UI fixes A UI audit of all 15 frontend components found 45 defects: 12 correctness, 11 accessibility, 6 responsive, 7 design-system, 9 content. This closes every one. No backend contract changes. Design system - styles.css holds every colour, space, radius and type step as a CSS custom property; [data-theme="dark"] re-points the same tokens - theme follows prefers-color-scheme until the user picks a side, then persists - no downloaded font, so the server's strict CSP stays intact - breakpoints at 1180/900/620px; below 900px a two-pane Chat/Workspace switch - nine workspace tabs scroll instead of clipping; 100dvh keeps the composer above the iOS URL bar Accessibility - WAI-ARIA tabs: role=tablist/tab, aria-selected, aria-controls, roving tabindex, Arrow/Home/End keys, role=tabpanel sections - one :focus-visible ring replaces four `outline: none` rules (WCAG 2.4.7) - every text token clears 4.5:1; 29 sites failed WCAG 1.4.3 before - live region announces design progress - closed node panel unmounts instead of parking inputs off-screen in the tab order - native <dialog> replaces three window.confirm calls - Cmd/Ctrl+K focuses the composer, Cmd/Ctrl+1..9 picks a tab, Escape closes overlays Correctness - a mid-stream error no longer bills a second generation: streamSucceeded became true only after the loop returned, so an error event raised after the spec arrived ran the non-streaming fallback and overwrote the first architecture - panel results survive a tab switch; panels mount on first use and stay mounted - catalog drawer starts closed instead of covering the diagram on every load - diagram export, module insert, standards check and download raise a toast instead of returning silently - YAML tab asks the server for the authoritative YAML; the local fallback serialiser now quotes anything that would change type - streaming indicator animates; the pulse keyframe was never defined - Enter checks isComposing, so an input-method candidate does not submit - fitView refits when the node set changes, and leaves a dragged layout alone - dead cloudwright_last_session localStorage write removed - legend moved off the React Flow zoom controls; diagram toolbar fits at 390px Reach - Export tab offers OpenTofu, Pulumi TypeScript and Pulumi Python; all three shipped in cloudwright.exporter.FORMATS with no button. 13 formats in 3 groups - the 90-line duplicate of the send path in the Modify tab collapses into runTurn - composer is a textarea with Shift+Enter, autogrow and a stop button Tests and artifacts - test_static_bundle.py: 8 checks read the shipped static bundle so a frontend change that never reaches the wheel fails CI - browser tests drop two inline-style selectors for data-testid; 9 new tests cover the tab pattern, theme persistence and the dialog - scripts/ui_screenshots.py shoots every tab at 3 widths in both themes - docs/screenshots and both web demo GIFs re-recorded against the new UI Co-Authored-By: Xavier Puspus
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
1 participant
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.
A UI audit of all 15 frontend components (4,965 lines) found 45 defects: 12 correctness, 11 accessibility, 6 responsive, 7 design-system, 9 content. This closes every one. No backend contract changes, so the CLI, the MCP server and every API route behave exactly as in 1.7.0.
The bug that costs money
streamSucceededonly became true after the SSE loop returned. Anerrorevent raised after the spec had already arrived left itfalse, so the non-streaming fallback fired a second design call, and that architecture replaced the first. The fallback now runs only when the stream produced no spec.What changed
Design system.
packages/web/frontend/src/styles.cssholds every colour, space, radius, shadow and type step as a CSS custom property.[data-theme="dark"]re-points the same tokens. The theme followsprefers-color-schemeuntil the user picks a side, then keeps that choice inlocalStorage. Nothing downloads a web font, so the strict CSP the server sends stays intact.Responsive. The frontend had zero media queries and a hard 420px sidebar. Breakpoints now sit at 1180px, 900px and 620px. Below 900px it is a two-pane Chat/Workspace switch. The nine tabs scroll instead of clipping.
100dvhkeeps the composer above the iOS URL bar.Accessibility. Real WAI-ARIA tabs (
role="tablist",aria-selected,aria-controls, rovingtabindex, Arrow/Home/End). One:focus-visiblering replaces fouroutline: nonerules. Every text token clears 4.5:1; 29 sites failed WCAG 1.4.3 before. A live region announces progress. The closed node panel unmounts instead of parking inputs off-screen in the tab order. A native<dialog>replaces threewindow.confirmcalls.Other correctness fixes. Panel results survive a tab switch. The catalog drawer starts closed instead of covering the diagram on load. Four silent-failure paths raise a toast. The YAML tab asks the server for authoritative YAML (the client serialiser quoted nothing, so
region: noread back asfalse). The streaming dot animates (its keyframe was never defined). Enter checksisComposing.fitViewactually fires. The deadcloudwright_last_sessionwrite is gone.Reach. OpenTofu, Pulumi TypeScript and Pulumi Python shipped in
cloudwright.exporter.FORMATSwith no button in the web UI. The Export tab now offers 13 formats in three groups. The 90-line duplicate of the send path in the Modify tab collapses into onerunTurn.Verification
pytest packages/core/testspytest packages/web/testspytest packages/cli/testspytest packages/mcp/testsruff check+ruff format --checktsc --noEmitcheck_version_sync.py 1.8.0unzip -lconfirms both new hashed assets shipWhat CI gates here is
test_static_bundle.py: 8 checks that read the shippedcloudwright_web/static/bundle, so a frontend change that is built but never copied fails the build. The 9 new tests intest_agent_browser.pysit behindskip_no_browser, which needs playwright and an LLM key, so CI skips them. Those behaviours were proven separately: 13/13 assertions passed against the mock-LLM server (tab pattern, arrow keys, theme toggle, theme persistence across reload, panel persistence, dialog cancel/confirm/escape,data-testidbubbles, Shift+Enter, Cmd+K, drawer closed on load, side panel out of the tab order).Visual QA: 40 screenshots, every tab, light and dark, at 1440px and 390px, each read back.
docs/screenshots/and both web demo GIFs were re-recorded against the new interface withscripts/ui_screenshots.py --readmeand the two Playwright recorders.Reviewed by Xavier Puspus