Files

T

jpmschweitzerandClaude bdc46a4fdd design multitab pane widget (T-83)

Reusable widget for panes that need N runtime tab instances of the
same kind. First consumer is the Claude pane (primary + 0..N
secondaries per D-41); the generic shape lets other panes adopt it
later without reinventing tab strips.

Includes:
- Design doc with API sketch, rendering, interaction, persistence
  boundary, integration sketch for the Claude pane, and three open
  questions (keyboard scoping for nested cases, overflow, density).
- Wireframe of the Claude pane with primary (pinned) + 2 secondaries
  + add button, accent border on the active tab.
- Architecture diagram (sketch mode) showing the host / widget /
  controller / IPC boundary that keeps the widget domain-free.

Co-Authored-By: Claude <noreply@anthropic.com>

2026-05-06 12:04:42 +02:00

main

design multitab pane widget (T-83)

2026-05-06 12:04:42 +02:00

welcome

add wireframes from current implementation; supersede claude-design

2026-05-06 11:13:52 +02:00

README.md

add wireframes from current implementation; supersede claude-design

2026-05-06 11:13:52 +02:00

README.md

clide wireframes

Canonical layout reference, generated from the actual implementation via the frame0-wireframe skill. Each .json is the source of truth; the .png is rendered from it.

These supersede the hi-fi mockups under ../claude-design/, which are kept for historical context and design tokens.

Set

Welcome

welcome/welcome-screen.json / .png — first-run landing: logo + wordmark, START / RECENT columns, Tips card, status line.

Main view

main/main-view.json / .png — three-column default: tickets sidebar, Claude pane, empty context panel.
main/editor-above-claude.json / .png — D-49 editor mode: editor above Claude in the middle column, divider between, prompt Y stays fixed.
main/focus-mode.json / .png — D-52 focus mode: full-window Claude pane, sidebars hidden, Esc-to-exit hint in the title bar.
main/sidebar-collapsed.json / .png — D-51 12px spine: sidebar collapsed to a vertical strip with rotated label and activity badge.
main/ticket-detail.json / .png — context panel showing a selected ticket with metadata and description.

Updating

Edit the .json (source of truth).

Re-export with the frame0-wireframe skill:

.claude/skills/frame0-wireframe/scripts/frame0-sync.py \
  export docs/wireframes/<dir>/<name>.json \
         docs/wireframes/<dir>/<name>.png

Commit both files.

Frame0 must be running locally for export. Don't pull from Frame0 — the JSON is authoritative.