Journey studio

Journey studio is a separate local wireframe canvas for designers. Its eight views map 66 screen states across sign-in, channels, messaging, knowledge, agents, connectors, and source capture, with a conversation-to-knowledge overview. The wireframes use fictional content and simplified layouts.

Run npm run design:dev from the repository root and open the local URL it prints. Use the Journey picker to choose a flow. Pan and zoom, select a frame, or use Jump to screen to read it closely. Fit canvas returns to the full flow. Both sidebars are removed; controls float over the canvas. The chosen journey stays in the URL fragment.

Each frame has a colored badge and a short note:

• Exists — green: the described behavior was found in the app source.
• Partial — amber: part works, but the note identifies an implementation gap or limitation.
• Missing — red: the scoped behavior is not wired in the reviewed code path.
• Idea — purple: a proposed design, not an implemented capability.

These are code-review observations from September 10, 2026, not production verification. For example, message Reply exists, but other message actions are visual mocks. GitHub disconnect has a handler but does not check a failed response before showing disconnected. The notes explain these distinctions rather than treating an entire feature as working or absent.

Arrows begin inside their interaction control. Diamonds split conditional outcomes; dashed paths lead to missing behavior or ideas. System-event rows are marked separately from clickable controls. The maps cover primary flows and representative failures, not every possible condition. Standalone cards may represent entry conditions or future ideas.

Select a frame and choose Notes / Ask agent to read its full evidence note and source reference. Describe a change and use Copy agent request to prepare a request for your coding agent. Saving the design files refreshes the local canvas. The canvas does not execute prompts or modify your workspace data.

Automatic app capture, embedded agent chat, and visual version comparison remain future ideas.

Status labels stay beside each screen; the canvas has no floating status legend.

Screen navigation and review controls sit at the top right, moving to a second top row on narrow windows.

Sign-in and code-verification frames follow the app’s centered card layout, including inline error states and paired secondary links. Colors remain neutral wireframe styling.

The phone wireframes reflect a visual review of the logged-in development app: a slide-out channel drawer, message bubbles and a fixed bottom composer, channel-setting overlays, document lists and page history, and grouped Settings forms. They use fictional content and neutral colors. Layout observation does not change the source-based implementation labels or verify every conditional path.

The messaging map places the agent picker above the composer and the offline notice below the channel header, matching the observed phone interactions.

Storybook-informed messaging states include the mobile long-press bottom sheet, pending sends without Reply, and replies with an unavailable original message. Storybook is a component-state reference, not proof of the remote send flow.

Resume a design session

Use the shared project skill /design-journal in Claude or $design-journal in Codex after pulling this change. It starts the canvas, opens the preview, reads the design decisions, and continues your requested iteration. The project README explains how to edit the wireframes and compare them with the real app or Storybook. The skill lives in this repository so teammates use the same workflow.