[charleslpan]

Phase 2, S20: the small shared bits callers hand-roll, added to @luke/ui, and their hand-rolled copies moved onto them.

Added to @luke/ui

• Badge swatch: a provider's colour (a GitHub label's) as a dot before the words. Badge validates it: six hex digits, with or without #; any other value draws the dot in the subtle ink.
• AttachmentChip state (ATTACHMENT_CHIP_STATE.READY | LOADING | FAILED) and failure:
  • Loading shows the spinner in a thumbnail-sized chip; a reader hears "Reading ".
  • Failed shows the caller's glyph, plus the failure words and detail where given.
  • Neither state opens anything.
• SPINNER_SIZE.SMALL (12px). SpinnerRing takes an optional size for a decorative ring beside words that already say the wait.
• Progress: a thin bar in the working ink.
  • With label, it's a progressbar named by that label, its value clamped to 0–100.
  • Without label, it's hidden from readers because the words beside it already give the number.
• HoverCardRow (HOVER_CARD_ROW_LOOK.DETAIL | LINE) and HoverCardList:
  • A row is a button when given onPress, text otherwise. It has a glyph slot, words on one line, and a muted end.
  • The list is a named ul and counts what it leaves out (more).
• OneLine (ONE_LINE_END.ELLIPSIS | FADE, ONE_LINE_ELEMENT, hint): words held to one line.
  • The app's hint gets the line and whether it is cut short; the desktop passes its Tooltip.
  • The hover card's one-line name and note now use the same clipped line.
• Banner (BANNER_LOOK.STRIP | CARD | ROW, BANNER_TONE.NEUTRAL | ATTENTION): glyph, words, actions.
  • The banner is named by its words.
  • Below 479px of its own width, the actions drop beneath the words.
  • It takes no class; its place wraps it for width and margins.
• Each one has jsdom behaviour tests and a catalog example (new: Banners, Progress, One line; extended: Badges, Attachment chips, Spinners, Hover cards).

Callers moved

• desktop/banner.tsx is deleted. The archived-plan card, the plan-template note, the stranded-repository strip and the archived/continued composer notes now use Banner.
• settings/one-line.tsx is deleted. Account and Workspace addresses use OneLine with the desktop's new wholeWordsHint (in tooltip.tsx).
• GitHub label pills (pull-request-card-notes.tsx) are Badges with a swatch; the "+N" overflow is a plain Badge.
• Call picture chips (agent-pictures.tsx) are AttachmentChips with loading/failed states. The legacy .attached-file* and .call-picture* chip CSS is deleted.
• The Settings integration-row spinner override (settings.css) is now SpinnerRing size=SMALL. The dead .luke-spinner-ring half of .failure-note-remedy's override (desktop.css) is dropped.
• The update download bar (updates.tsx) is Progress.
• Task-card detail and list rows (task-card.tsx, plus sidebar-pinned-tab.tsx and skill-ref.tsx, which drew the same rows) are HoverCardRow/HoverCardList. CardDetail and the .task-card-detail/-label/-rows/-more/-corner CSS are gone.
• Existing tests that found these elements by deleted classes now find them by list name or region name.

Visible changes (cleanup-level)

• GitHub labels: an outlined 11px pill with a 7px dot becomes the neutral Badge (tinted capsule, 12px caption type) with an 8px dot.
• Document banners (archived plan, plan template): the card corner goes from 12px to 14px (dialog/card radius). Banner glyphs on the attention-tone card are tinted.
• Failed call pictures: the glyph goes from 14px to 16px, and the "Not kept" chip takes the shared chip's padding and gap. Its hover hint is now the shared chip's title (the picture's name), as the composer's file chips already do, rather than a pill reading "name: Not kept, size"; the chip's words still say both. A picture still being read shows the same ring, now said as "Reading ".
• Update bar: the gap above it is now the row description's own 2px instead of 4px, and its corners are fully rounded instead of 2px.
• Pinned tab card: its task and repository rows now stand 4px apart, the same as on the task card.
• The detail-row glyph rule now targets the img (a repository's owner picture, 14px) only. The GitHub provider-mark fallback draws at 16px.

Screenshots (catalog, Linux headless Chrome)

Example	Dark	Light
Banners
Badge swatches
Attachment chip states
Progress
One line

Not verified

• No Linux desktop screenshots: the --fixture smoke capture renders none of these surfaces (archived plans, stranded repositories, PR label cards, call pictures, update progress), so the evidence is the catalog.
• Nothing was checked on a Mac.
• pnpm check:affected passes.

Left for other rows

• Other hand-rolled clipped-with-hint lines (agent-published.tsx, transcript-blocks.tsx, searchable-menu.tsx, call-card.tsx, page-pane.tsx) belong to their screen migrations.
• The server card's head row (server-card.tsx) keeps the .task-card-line rule because it is an MCP row with its own layout (D79).
• .failure-note-remedy raw buttons belong to the button rows.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
luke-web	Ready	Preview	Oct 18, 2026 5:07pm UTC