ui(desktop): design-system tightening — StatusDot + EmptyState primitives + token cleanup

[jotyy]

Summary

Two cohesive rounds of design-system work — both pure surface-level (no behavior or layout changes), both unblock the larger pane-level refactors that come next. Now spans 2 commits (#285's original + a follow-up), reviewable independently.

---

Round 1 — StatusDot primitive + design-token cleanup (commit 1)

StatusDot primitive

`desktop/src/components/ui/status-dot.tsx` — small colored dot indicating a state. Replaces ~14 hand-rolled `<span className="size-X rounded-full bg-X" />` instances.

cva-based variants matching real usage:

• `variant`: success | destructive | warning | info | primary | muted | neutral
• `size`: sm (6px, default) | md (8px) | lg (10px)
• `withRing`: card-colored ring for badge dots that sit on top of icons
• `pulse`: enables animate-pulse for "in progress" / "starting" states

Sites swapped: AppSurfacePane, IntegrationsList, ConnectIntegrationsStep, PublishScreen, SpaceBrowserDisplayPane, SpaceApplicationsExplorerPane, SpaceBrowserExplorerPane (5 sites), OperationsDrawer, ChatPane, RuntimeStatusIndicator, AuthPanel, CreatingView. RuntimeStatusIndicator's visual spec refactored from a Tailwind class string (`dotClass: "animate-pulse bg-warning"`) to typed enum fields (`dotVariant` + `dotPulse`).

Token cleanup

• `border-border/35|40|55|60|70` → `border-border` (28 occurrences across 13 files)
• `bg-foreground/6` → `bg-fg-6`; `bg-foreground/5` → `bg-fg-5`
• The dropdown-menu / select shadcn templates keep their `bg-foreground/10` (they live inside `**:data-[state=...]` variant selectors that need a literal token).

Magic radii mapped to the standard scale: `[7px]`→md, `[10px]`→lg, `[12px]`→xl, `[14-22px]`→2xl, `[24-28px]`→3xl, `[4px]`→sm, `[9999px]`→full. The 18/20/28 → 2xl/3xl mappings shrink the affected dialog/sheet shells by 2-4px on a single visual element. Two intentional pixel-level decorations stay hand-tuned: tooltip arrow (`[2px]`) and the chat streaming-cursor block (`[1px]`).

---

Round 2 — EmptyState promoted to `ui/` + migrated (commit 2)

The dashboard's `EmptyState` was a great primitive locked in the wrong folder. Five other surfaces hand-rolled the same pattern (sidebar empties, automations placeholders, publish-wizard docs empties, marketplace gallery empties).

New API

```tsx
<EmptyState
icon={Icon} // optional LucideIcon
title="No items" // primary line (was `message`)
description="Sub line" // optional secondary (was `hint`)
action={<Button…/>} // optional CTA below
size="sm" | "md" // sm = compact dashboard look (default),
// md = chip-icon + text-sm + roomier padding
minHeight={number} // forces height (chart panels)
className="" // outer wrapper extras
/>
```

`sm` keeps the original dashboard visual. `md` wraps the icon in a muted chip and uses text-sm/text-xs for title/description — the look the sidebar empty states were rolling by hand.

Migrations

• dashboard/{Board,Table,List,Chart} (4 sites): import path moved, `message` → `title`, `hint` → `description`. Visual unchanged.
• AutomationsPane: deleted local 21-line `EmptyState` + 30-line `EmptyScheduled` re-implementations. The CTA "Ask the agent" now uses the new `action` slot.
• SpaceApplicationsExplorerPane + SpaceBrowserExplorerPane: inline chip-icon empty states swapped for `<EmptyState size="md" />`.
• publish/LivePreviewPanel: deleted local 8-line `DocsEmptyState`, swapped its 2 call sites.
• marketplace/AppsGallery: "No apps available." and "No apps match the current filter." inline divs become real EmptyStates. Filter empty surfaces a Search icon + the existing Clear-filter CTA via the new `action` slot.
• marketplace/MarketplaceGallery: Search icon for filter empty, LayoutGrid for the "no templates yet" case.

Deliberately not migrated

• OperationsDrawer.EmptyNotice: 5 call sites use it for spinner + error states. Different semantic.
• InternalSurfacePane.EmptyState: framed bordered card with `tone="error"` variant for file-preview failures. Different — it's a "preview frame".
• BackgroundTasksPane + SubagentSessionsPane: dashed-border containers with single-line text. Intentionally different (placeholder zone).

---

Verification

• `npm run desktop:typecheck` — clean (both commits)
• `npm --prefix desktop run build:renderer` — clean (both commits)
• `node --test` on AppShell + SpaceApplicationsExplorerPane — same pass count as upstream/main baseline (49 pass / 1 pre-existing fail on an unrelated `updateNotification` brittle assertion)
• Manual: light + dark theme — sanity-check status pips on app surface header, sidebar app rows, integrations list, runtime status badge, ChatPane inbox unread badge, operations drawer alert badge
• Manual: confirm dialog/sheet radii at 24/28→3xl don't visibly shrink (browser profile import dialog, workspace apps dialog, operations drawer popups)
• Manual: empty states render correctly in: empty dashboard, empty workspace sidebar (apps + browsers), AutomationsPane "No schedules" with the agent CTA, marketplace galleries with no results

🤖 Generated with Claude Code