AI-First Starting UX: Build with AI Path#4896
Closed
lmac-1 wants to merge 20 commits into
Closed
Conversation
When a user navigates to /w/new, show a full-screen overlay before they reach the empty canvas. The overlay presents three entry points: - Build with AI (textarea + submit, shown when AI assistant is enabled) - Browse Templates - Import from YAML The action handlers are stubs for now, wired up in follow-on issues #4857 (Build with AI), #4858 (Browse Templates), and #4859 (Import YAML). Implementation notes: - Adds showLandingScreen boolean to UIStore, initialised to true when isNewWorkflow is true, with a dismissLandingScreen() action - Hides the breadcrumb/header bar while the landing screen is visible - Guards the existing empty-canvas placeholder with !showLandingScreen so they don't render simultaneously (TODO: remove placeholder in #4856 once landing screen is fully stable) - Adds CSS design tokens for border-subtle, border-strong, surface-subtle, and semantic-success used by the landing screen UI
- Add role="region" + aria-labelledby on overlay div for landmark navigation - Auto-focus textarea on mount so keyboard users land in the right place - Add aria-describedby hint for Enter-to-submit keyboard shortcut - Add aria-hidden to decorative sparkle SVG - Fix focus-within:ring → focus-visible:ring on option card buttons - Add disabled:opacity-50 to Build it button for visual distinction - Bump card description text from gray-500 to gray-600 (WCAG AA contrast) - Remove unnecessary Fragment from LandingScreenWrapper
Moves isNewWorkflow from a LiveView prop passed down to BreadcrumbContent into a store hook (useIsNewWorkflow). The component now self-hides when isNewWorkflow is true, removing the conditional wrapper at the call site.
Replace Import YAML card with Build from Scratch card. Move YAML import to a text link at the bottom of the screen.
importYAMLCard -> importYAMLLink, add buildFromScratchCard to page object
* feat(#4871): add showYAMLImportModal state to UIStore Add showYAMLImportModal boolean to UIStore with openYAMLImportModal and closeYAMLImportModal commands. useShowYAMLImportModal hook for reading state; both commands exposed via useUICommands. closeYAMLImportModal also clears importPanel state so the modal opens clean every time. * feat(#4871): add YAML import modal and wire into landing screen YAMLImportModal is a self-contained Headless UI Dialog — focus trapping, Escape key, and aria-modal included. LandingScreenWrapper wires onImportYAML and renders the modal as a sibling to LandingScreen so it opens on top without dismissing the landing screen. BreadcrumbContent refactored to read isNewWorkflow from store directly and return null itself, removing the conditional render from the parent. Cmd/Ctrl+\ opens the modal when the landing screen is active. Old left-panel import path (handleImport, handleSaveAndClose) removed. * chore(#4871): remove YAMLImportPanel, transfer tests, polish dropzone UI YAMLImportPanel deleted — the modal owns all YAML import content now. Test coverage transferred to YAMLImportModal.test.tsx (mode toggling, debounced validation, state machine, successful import flow). LeftPanel no longer handles the import method case. Dropzone height controlled via h-80 container in the modal so both dropzone and code editor share one source of truth. Icon box styled with gray background. Error display only renders when errors are present.
…reContext directly
…ver states - Show error toast when importWorkflow/saveWorkflow throws - Show "Not connected" toast when saveWorkflow returns null (disconnected) - Suppress hover styles on disabled Create and Build it buttons
…connected save guard
…I panel, suppress legacy placeholder
…lose button, disable ⌘K
…ew workflows When YAML validation fails (syntax, ID format, schema) during handleApplyWorkflow and the workflow is new, inject the error as an assistant message into the AI chat thread instead of showing a toast. Save failures keep the existing toast behaviour.
Add tests for the six untested behaviours introduced in #4868: - auto-save called after importWorkflow when isNewWorkflow - validation errors routed to onValidationError callback, not toast - save failures show toast and do not invoke onValidationError - close button absent when onClose is undefined - empty-canvas placeholder suppressed when AI panel is open Also adds saveWorkflow to mockWorkflowActions and isNewWorkflow: false to all existing handleApplyWorkflow renderHook calls to match the updated hook interface.
…e fails When saveWorkflow rejects on a new workflow, fit-view was incorrectly dispatched after doneApplyingWorkflow, implying the workflow was successfully persisted when it wasn't. Add a saveSucceeded flag and skip fit-view when save fails. Also wires up the Retry action on the save-failure toast so the user can re-attempt the full apply+save without losing their canvas state.
Base automatically changed from
4856-ai-first-landing-screen
to
4848-ai-first-starting-ux-parent
June 26, 2026 09:56
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.
Description
This PR adds the "Build with AI path" of the #4848 AI-First Starting UX epic.
How it works:
Some other bits tidied up while I'm here:
[todo]
Closes #4868
Validation steps
Additional notes for the reviewer
AI Usage
Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):
You can read more details in our
Responsible AI Policy
Pre-submission checklist
/reviewwith Claude Code)
(e.g.,
:owner,:admin,:editor,:viewer)