ui-spa

Embedded UI (external/ui)

• Rebuild go:embed assets after UI changes: make build TAGS="http ui" (runs ui-build).
• Thinking disclosure row - duration must sit next to the thinking label, not at the trailing edge of the column. Markup keeps .thinking-dur inside .thinking-left in ThinkingMessage.tsx. Styles use .thinking-left { gap: 0 5px; } in styles.css. Do not drive label vs timer spacing with justify-content: space-between on summary.thinking-summary.
• Workspace context chips (WorkspaceChips.tsx, first child of .composer-card) - folder / branch pills plus a worktree checkbox (real input[type=checkbox], composer-worktree-checkbox), backed by GET /coddy/workspace/context and POST /coddy/sessions/{id}/workspace. Keep the pure logic in chat/workspaceContext.ts and the MRU recents in chat/workspaceRecents.ts (do not inline them). The folder menu is Claude Desktop style: Recent rows (current marked ✓) + Open folder… opening the WorkspaceFolderModal.tsx filesystem browser (rows navigate, Open picks the browsed folder). The branch chip renders only when is_git_repo; the checkbox is checked+disabled when the session already runs in a linked worktree. Chosen once: with a non-empty transcript the chips lock (workspaceLocked) and the server returns 409. Menus reuse the mode-menu family: anchored portal on desktop (opens-down on hero, opens-up docked), bottom sheet on isMobileShell. Pre-session picks are pending in App.tsx (pendingWorkspaceRef) and applied on first send before POST /v1/responses. Contract: DESIGN.md (Composer workspace chips), docs/ui.md (Per-session workspace).
• Composer context ring (indicator left of Send in Composer.tsx)
  • The ring itself is only a stroked arc (relative context fill). Do not place a numeric percent label inside or on top of it. Percent usage and token counts belong in the tooltip only.
  • Idle home (contextIdle when there is no sessionId): keep the arc at zero fill. Tooltip body is exactly: first line No context usage yet, second line Max context <n> (no session usage lines, no model name line).
  • With an active session (including hero with #/s/... in the hash): show fill from tokenUsage vs maxContextTokens. Tooltip lists percent line, optional Input/Output/Total line(s) when tokenUsage is present, then Max context line. Do not add a Model … line in this tooltip (Mode exposes agent / plan; Model is the YAML backend pill next to it).
  • Tooltip presentation: reuse the rail-tip styling (same family as narrow navbar hints). Anchor it above the ring, horizontally centered on it, with a comfortable width (use composer-context-tip-host / composer-context-tip rules in styles.css; avoid a cramped single-column tooltip).
  • Prefer no extra chrome on the meter (no bordered "button tile" behind the SVG); .context-ring styling stays minimal. Stroke colors come from --coddy-context-ring-inner / --coddy-context-ring-fg (defined per theme in styles.css).
• Send/stop circle (Composer.tsx #btn-send) - composer-icon is a perfect circle (border-radius: 50%, square box). The shared composer-run-icon class is also used by scheduler run/stop buttons. Play uses ~22px ▶; stop uses .composer-stop-square (14x14px, centered). Ring + stop stay in composer-bar-actions on the right (DESIGN.md, Composer primary action).
• Model selector menu (Composer.tsx, mode-menu--llm) - backend ids are vendor/model. Keep the filter/group/threshold logic in chat/llmModelMenu.ts (do not inline it): vendor headers (mode-menu-group-label) render only when more than one vendor is present (shouldGroupLlmModels); a filter input (mode-menu-filter, data-testid="model-menu-filter", auto-focused) renders only when the backend count exceeds LLM_MENU_FILTER_THRESHOLD (5) and matches vendor / model name / full id case-insensitively (filterLlmModels); rows scroll under a ~5-row cap (mode-menu-scroll, max-height: min(175px, 50vh) in styles.css). Rows show displayLlmId (model name only) with the full id in title; Enter picks the first match, Escape closes, empty result renders model-menu-empty.
• Mobile menu sheet - on narrow shells (isMobileShell via shellBreakpoint.ts, max-width: 1199px) the Mode / Model / Reasoning portal menus render as a full-width bottom sheet (mode-menu--sheet, same family as the slash/at picker sheet) over a dimmed scrim (mode-menu-backdrop--scrim), not the anchored mode-menu--portal dropdown. Drive this from menuUseSheet = isMobileShell in Composer.tsx; the sheet overrides the desktop mode-menu--llm width cap and uses a 46vh scroll cap. Keep the anchor positioning only on the desktop portal branch.
• Tool call timer - while an unresolved permission_prompt references a tool call id, ToolCallMessage freezes the thinking-dur label (permissionWaiting via permissionPendingToolCallIds).
• Permission after reload - SSE rows persist in localStorage (permissionPromptSessionStore.ts); pending run_command / fs tools without a tool result also get a synthetic permission_prompt on GET .../messages merge (restorePermissionPrompts.ts). Stop glyph is .composer-send-glyph > .composer-stop-square (never both classes on one node).
• Composer keyboard shortcuts - Enter and Ctrl+Enter send on desktop; Shift+Enter inserts a newline (browser default, not intercepted). On mobile/narrow viewports (max-width: 1199px shell stack breakpoint, isMobileShell via useSyncExternalStore over subscribeShellStack from shellBreakpoint.ts), Enter inserts a newline and send is button-only. The picker Enter handlers (slash/at menus) take precedence and run before the send logic on all viewports.
• Multimodal model flag - GET /v1/models exposes multimodal: bool per entry from YAML models[].multimodal. App.tsx reads it into ModelInfo.multimodal, derives llmModelMultimodal (useMemo over current llmModel), and passes it through ChatScreen → Composer as llmModelMultimodal?: boolean. Only render file attachment UI (file picker button, attachment previews) when llmModelMultimodal is true; keep the prop optional so the component degrades gracefully when models are not configured. After a successful PUT /coddy/config save, Settings fires onConfigSaved → App.tsx bumps modelsEpoch → re-fetches /v1/models so the attachment button appears without a page reload.
• File attachment flow - Composer holds attachedFiles: File[] state; the hidden <input type="file"> ref (data-testid="composer-file-input") feeds setAttachedFiles. When sending, if files are present, onSend(text, files) passes them up; App.tsx reads each as a data URL (FileReader) and adds inline_files: [{name, data_url}] to the POST /v1/responses body. For agent / plan turns: the backend saves each file to ~/.coddy/sessions/<id>/assets/ with 0o444 permissions and injects a <coddy_session_assets> XML annotation into the user message content so the model can read or cp the files. The SPA strips this annotation from the display (and from copy-to-clipboard) via stripCoddyAttachmentsForUserDisplay in stripCoddyAttachments.ts and instead renders file chips (name + type icon) above the user bubble using msg-user-files / msg-user-file-chip CSS classes; parseSessionAssetFiles in the same file re-derives chip metadata from the XML on page reload so chips persist. For direct YAML model: each entry becomes an image_url content part sent inline to the provider. Multiple files in one request are supported; duplicate asset names are disambiguated with _1, _2 suffixes by SavePartsToAssets in internal/session/assets.go.
• Mobile MQ helpers (shellBreakpoint.ts) - subscribeShellStack, snapshotShellStack, serverSnapshotShellStack are exported for useSyncExternalStore use anywhere in the SPA. Do not duplicate these in component-local functions.
• Authoritative layout and tokens remain in the repo root DESIGN.md.