phase-10 / HS-10-03

Component gallery

Living documentation. Every component family in every documented state. New components are added here first; rebuilds (HS-10-06..09) consume what's reviewable on this page.

Button

Variants × sizes

States

Icon-only

Pill

Tones

With dot

Interactive (button-rendered)

Panel

Comfortable density

Recent activity

Body content. Records would render here.

Dense density

Connectors

Tighter padding for activity-style data lists.

ListRow

Meeting candidates

Static row (non-interactive)

Used inside meeting detail surfaces.

warn

EmptyState

Saved meetings

No meetings yet

Start a meeting from the runtime dashboard, or save a candidate from local activity to seed one.

InlineMessage

Preview shows the exact gh command this connector would run. Nothing executes until you click Run.

Imported 142 activity records from Safari history.

The Jira CLI is not installed. Install jira-cli to enable enrichment.

The last run failed: connector exited with status 4. The source data on GitHub is untouched.

Identity layer

App mark — sizes

Hold-to-talk motif

Idle (pulsing)

Used on the runtime dashboard idle state, the history empty state, and the dictation readiness empty state. Pulse flattens to static under prefers-reduced-motion.

Local-only pill

CommandPreview

Standardized monospaced read-only block for shell commands and traces (gh, jira, dictation dry-run). Always copyable, always wraps, never scrolls horizontally.

Tones — neutral plan

This will run if you click Run.

gh issue view 142 --repo anthropic/holdspeak

plan read-only

Tone — warn (would-modify)

This will modify the linked Jira issue.

jira issue update HS-142 --status "In Progress" --assignee karol

writes jira

Tone — danger (last-run-failed)

holdspeak intel --route-dry-run abc123 --profile architect --intent-overrides "ship_decision,defer"

last run failed 2.4s

Long argument wrap (≥200 chars, no horizontal scroll)

curl -sSL "https://example.internal/api/v1/projects/holdspeak/meetings/0d6f7e9c-1234-4abc-9d3e-7c4ab5bd6901/segments?include=intel,artifacts,bookmarks&limit=500&order=started_at_desc" | jq ".segments[] | select(.confidence > 0.85)"

Bare (no caption, no meta)

holdspeak doctor --json

ConfirmDialog

The destructive-action confirmation pattern. One <dialog> is mounted by AppLayout on every page; call sites trigger it via window.holdspeakConfirm({ title, body, scopeNote, confirmLabel, cancelLabel, danger }) which returns Promise<boolean>. Cancel takes default focus, Esc resolves false, the originating button is re-focused on close.

Triggers

Each demo trigger fires a representative dialog. Open one and walk the keyboard: Tab cycles inside the dialog only, Enter activates the focused (cancel) button, Esc cancels and returns focus to the trigger.