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

desktop/src/components/auth/AuthPanel.tsx

@@ -35,6 +35,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { StatusDot } from "@/components/ui/status-dot";
 import {
   Select,
   SelectContent,
@@ -78,7 +79,7 @@ const KNOWN_PROVIDER_ORDER = [
 const SUBAGENT_MODEL_FOLLOW_COMPOSER = "__subagent_follow_composer__";
 type KnownProviderId = (typeof KNOWN_PROVIDER_ORDER)[number];
 const AUTH_PANEL_SELECT_TRIGGER_CLASS_NAME =
-  "auth-settings-control theme-control-surface relative isolate h-9 w-full overflow-hidden rounded-[10px] border border-border bg-muted px-2.5 text-sm text-foreground shadow-none transition-colors hover:border-border focus-visible:border-border focus-visible:ring-0 focus-visible:ring-transparent aria-invalid:border-border aria-invalid:ring-0";
+  "auth-settings-control theme-control-surface relative isolate h-9 w-full overflow-hidden rounded-lg border border-border bg-muted px-2.5 text-sm text-foreground shadow-none transition-colors hover:border-border focus-visible:border-border focus-visible:ring-0 focus-visible:ring-transparent aria-invalid:border-border aria-invalid:ring-0";
 const LEGACY_DIRECT_PROVIDER_MODEL_ALIASES: Record<
   string,
   Record<string, string>
@@ -2044,7 +2045,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
   ];
 
   const setupLoadingPanel = (
-    <div className="theme-subtle-surface flex flex-col items-center gap-3 rounded-[20px] border border-border px-5 py-8 text-center">
+    <div className="theme-subtle-surface flex flex-col items-center gap-3 rounded-2xl border border-border px-5 py-8 text-center">
       <div className="flex size-11 items-center justify-center rounded-full border border-primary bg-primary/10 text-primary">
         <Loader2 size={18} className="animate-spin" />
       </div>
@@ -4227,8 +4228,14 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
                 variant="outline"
                 className="border-border bg-background/60 text-[11px] text-muted-foreground"
               >
-                <span
-                  className={`inline-block size-1.5 rounded-full ${runtimeBindingReady ? "bg-success" : isSignedIn ? "bg-warning" : "bg-muted-foreground"}`}
+                <StatusDot
+                  variant={
+                    runtimeBindingReady
+                      ? "success"
+                      : isSignedIn
+                        ? "warning"
+                        : "muted"
+                  }
                 />
                 <span>
                   {runtimeBindingReady
@@ -4298,14 +4305,14 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
 
   if (showsSetupLoadingState) {
     return (
-      <section className="theme-shell w-full max-w-none overflow-hidden rounded-[24px] border border-border text-sm text-foreground shadow-card">
+      <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground shadow-card">
         <div className="px-4 py-5">{setupLoadingPanel}</div>
       </section>
     );
   }
 
   return (
-    <section className="theme-shell w-full max-w-none overflow-hidden rounded-[24px] border border-border text-sm text-foreground shadow-card">
+    <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground shadow-card">
       {showAccountSection && (
         <>
           <div className="border-b border-panel-border/40 px-4 py-4">
@@ -4340,7 +4347,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
               {infoRows.map((row) => (
                 <div
                   key={row.label}
-                  className="theme-subtle-surface flex items-center justify-between gap-3 rounded-[16px] border border-panel-border/35 px-4 py-3"
+                  className="theme-subtle-surface flex items-center justify-between gap-3 rounded-2xl border border-panel-border/35 px-4 py-3"
                 >
                   <div className="text-sm text-foreground">{row.label}</div>
                   <div className="max-w-[58%] truncate text-right text-sm text-muted-foreground">
@@ -4381,7 +4388,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
 
             {(authMessage || authError) && (
               <div
-                className={`mt-3 rounded-[16px] border px-4 py-3 text-sm ${
+                className={`mt-3 rounded-2xl border px-4 py-3 text-sm ${
                   authError
                     ? "border-destructive/35 bg-destructive/8 text-destructive"
                     : "border-success/30 bg-success/10 text-success"
@@ -4399,7 +4406,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
           {runtimeProviderSettings}
           {(authMessage || authError) && (
             <div
-              className={`mt-3 rounded-[16px] border px-4 py-3 text-sm ${
+              className={`mt-3 rounded-2xl border px-4 py-3 text-sm ${
                 authError
                   ? "border-destructive/35 bg-destructive/8 text-destructive"
                   : "border-success/30 bg-success/10 text-success"

desktop/src/components/dashboard/BoardView.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { BoardViewSpec, ColorToken } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { colorClasses, formatSmartDate, hashToColor, looksLikeDateColumn } from "./format";
 import { RowDetailDialog } from "./RowDetailDialog";
 import { isStatusColumn, StatusBadge } from "./StatusBadge";
@@ -135,7 +135,7 @@ export function BoardView({
     return (
       <div className="pt-2">
         <div className="mb-2">{picker}</div>
-        <EmptyState icon={Columns3} message={emptyState ?? "Nothing here yet."} />
+        <EmptyState icon={Columns3} title={emptyState ?? "Nothing here yet."} />
       </div>
     );
   }

desktop/src/components/dashboard/ChartPanel.tsx

@@ -32,7 +32,7 @@ import type {
 } from "@/lib/dashboardSchema";
 
 import type { DataViewState } from "./DataViewPanel";
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { ErrorMessage } from "./ErrorMessage";
 import { formatValue } from "./format";
 
@@ -84,7 +84,7 @@ function useSeriesPalette(): string[] {
 export function ChartPanel({ panel, state }: ChartPanelProps) {
   return (
     <section className="overflow-hidden rounded-xl bg-card shadow-md smooth-corners">
-      <header className="border-b border-border/70 bg-fg-2 px-4 py-3">
+      <header className="border-b border-border bg-fg-2 px-4 py-3">
         <h3 className="truncate text-sm font-semibold tracking-tight text-foreground">
           {panel.title}
         </h3>
@@ -102,7 +102,7 @@ export function ChartPanel({ panel, state }: ChartPanelProps) {
         ) : state.rows.length === 0 ? (
           <EmptyState
             icon={CHART_ICON[panel.chart.kind] ?? BarChart3}
-            message={panel.empty_state ?? "Nothing here yet."}
+            title={panel.empty_state ?? "Nothing here yet."}
             minHeight={260}
           />
         ) : (

desktop/src/components/dashboard/DashboardRenderer.tsx

@@ -457,7 +457,7 @@ function PanelDispatch({
     return <ChartPanel panel={panel} state={state.state} />;
   }
   return (
-    <div className="rounded-md border border-dashed border-border/70 bg-muted/30 px-4 py-3 text-xs text-muted-foreground">
+    <div className="rounded-md border border-dashed border-border bg-muted/30 px-4 py-3 text-xs text-muted-foreground">
       Unsupported panel state.
     </div>
   );

desktop/src/components/dashboard/DataViewPanel.tsx

@@ -61,7 +61,7 @@ export function DataViewPanel({
 
   return (
     <section className="group overflow-hidden rounded-xl bg-card shadow-md smooth-corners">
-      <header className="border-b border-border/70 bg-fg-2 px-4 py-3">
+      <header className="border-b border-border bg-fg-2 px-4 py-3">
         <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
             <h3 className="truncate text-sm font-semibold tracking-tight text-foreground">
@@ -155,7 +155,7 @@ function ViewBody({
   // gallery / calendar / timeline — declared in v2 spec, renderer ships
   // in PR2. Show a clean placeholder rather than crashing.
   return (
-    <div className="my-6 rounded-md border border-dashed border-border/70 bg-fg-2 px-4 py-6 text-center text-xs text-muted-foreground">
+    <div className="my-6 rounded-md border border-dashed border-border bg-fg-2 px-4 py-6 text-center text-xs text-muted-foreground">
       The <span className="font-medium text-foreground">{view.type}</span> view
       ships in the next dashboard release. Showing an alternate view above
       should keep this panel useful in the meantime.

desktop/src/components/dashboard/ListView.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 
 import type { ListViewSpec } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { formatSmartDate, looksLikeDateColumn } from "./format";
 import { RowDetailDialog } from "./RowDetailDialog";
 
@@ -39,7 +39,7 @@ export function ListView({ view, columns, rows, emptyState }: ListViewProps) {
     );
   }
   if (rows.length === 0) {
-    return <EmptyState icon={Rows3} message={emptyState ?? "Nothing here yet."} />;
+    return <EmptyState icon={Rows3} title={emptyState ?? "Nothing here yet."} />;
   }
 
   const display = rows.slice(0, shownLimit);

desktop/src/components/dashboard/RowDetailDialog.tsx

@@ -48,7 +48,7 @@ export function RowDetailDialog({
             "outline-none",
           )}
         >
-          <header className="flex items-start gap-3 border-b border-border/70 px-5 py-4">
+          <header className="flex items-start gap-3 border-b border-border px-5 py-4">
             <div className="min-w-0 flex-1">
               <DialogPrimitive.Title className="truncate text-sm font-semibold text-foreground">
                 {title || "Details"}
@@ -124,7 +124,7 @@ function DetailValue({
       <img
         src={value}
         alt=""
-        className="size-16 rounded-md border border-border/60 object-cover"
+        className="size-16 rounded-md border border-border object-cover"
       />
     );
   }

desktop/src/components/dashboard/TableView.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { ColorToken, TableColumnSpec, TableViewSpec } from "@/lib/dashboardSchema";
 
-import { EmptyState } from "./EmptyState";
+import { EmptyState } from "@/components/ui/empty-state";
 import { RowDetailDialog } from "./RowDetailDialog";
 import { isStatusColumn, StatusBadge } from "./StatusBadge";
 import {
@@ -172,10 +172,10 @@ export function TableView({
   }, [updateEdgeFade, totalWidth]);
 
   if (visible.length === 0) {
-    return <EmptyState icon={Table2} message="No columns to display." />;
+    return <EmptyState icon={Table2} title="No columns to display." />;
   }
   if (rows.length === 0) {
-    return <EmptyState icon={Table2} message={emptyState ?? "Nothing here yet."} />;
+    return <EmptyState icon={Table2} title={emptyState ?? "Nothing here yet."} />;
   }
 
   return (
@@ -210,7 +210,7 @@ export function TableView({
                 return (
                   <th
                     key={c.name}
-                    className={`group/th relative border-b border-border/70 px-3 py-2.5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pl-1 last:pr-1 ${alignClass(c.align)}`}
+                    className={`group/th relative border-b border-border px-3 py-2.5 text-xs font-medium uppercase tracking-wide text-muted-foreground first:pl-1 last:pr-1 ${alignClass(c.align)}`}
                   >
                     <button
                       type="button"
@@ -265,7 +265,7 @@ export function TableView({
                   }
                   setSelectedRow(rowObj);
                 }}
-                className="cursor-pointer border-b border-border/40 transition-colors hover:bg-fg-4 last:border-b-0"
+                className="cursor-pointer border-b border-border transition-colors hover:bg-fg-4 last:border-b-0"
               >
                 {visible.map((c) => (
                   <Cell key={c.name} column={c} value={row[c.index]} row={rowObj} />
@@ -458,7 +458,7 @@ function Cell({
         <img
           src={value}
           alt=""
-          className="h-8 w-8 shrink-0 rounded-md border border-border/60 object-cover"
+          className="h-8 w-8 shrink-0 rounded-md border border-border object-cover"
         />
       </td>
     );

desktop/src/components/layout/AppShell.tsx

@@ -1224,7 +1224,7 @@ function WorkspaceBootstrapPane({
         <div className="relative flex h-16 w-16 items-center justify-center">
           <div
             aria-hidden="true"
-            className="absolute inset-0 rounded-[22px] blur-2xl"
+            className="absolute inset-0 rounded-2xl blur-2xl"
             style={{
               background:
                 "radial-gradient(circle, color-mix(in srgb, var(--primary) 55%, transparent), transparent 70%)",

desktop/src/components/layout/NotificationToastStack.tsx

@@ -140,7 +140,7 @@ export function NotificationToastStack({
               <div
                 key={notification.id}
                 className={cn(
-                  "overflow-hidden rounded-[24px] border border-border bg-popover/95 ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2 transition-[margin,transform,opacity,max-height] duration-200 ease-out",
+                  "overflow-hidden rounded-3xl border border-border bg-popover/95 ring-1 ring-border backdrop-blur-xl animate-in fade-in-0 slide-in-from-top-2 transition-[margin,transform,opacity,max-height] duration-200 ease-out",
                   isCollapsedBackgroundToast
                     ? "pointer-events-none shadow-lg"
                     : "shadow-2xl",

desktop/src/components/layout/OperationsDrawer.tsx

@@ -15,6 +15,7 @@ import {
 import { useDesktopAuthSession } from "@/lib/auth/authClient";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { StatusDot } from "@/components/ui/status-dot";
 import { ProactiveLifecyclePanel } from "@/components/layout/ProactiveStatusCard";
 import {
   Tooltip,
@@ -633,7 +634,12 @@ function DrawerTabButton({
       <span className="relative">
         {icon}
         {showIndicator ? (
-          <span className="absolute -right-0.5 -top-0.5 size-2.5 rounded-full border-2 border-card bg-destructive" />
+          <StatusDot
+            variant="destructive"
+            size="lg"
+            withRing
+            className="absolute -right-0.5 -top-0.5"
+          />
         ) : null}
       </span>
       <span>{label}</span>
@@ -744,7 +750,7 @@ function InboxPanel({
 
         <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
           {proposalStatusMessage ? (
-            <div className="mb-3 rounded-[18px] border border-border bg-muted px-3 py-2 text-xs leading-relaxed text-muted-foreground">
+            <div className="mb-3 rounded-2xl border border-border bg-muted px-3 py-2 text-xs leading-relaxed text-muted-foreground">
               {proposalStatusMessage}
             </div>
           ) : null}
@@ -996,7 +1002,7 @@ function ProposalDetailsDialog({
         role="dialog"
         aria-modal="true"
         aria-label="Proposal details"
-        className="pointer-events-auto relative z-10 flex max-h-[min(760px,calc(100vh-36px))] w-[min(720px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-[28px] border border-border bg-background shadow-2xl"
+        className="pointer-events-auto relative z-10 flex max-h-[min(760px,calc(100vh-36px))] w-[min(720px,calc(100vw-32px))] min-w-0 flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-2xl"
       >
         <header className="flex items-start justify-between gap-4 border-b border-border px-6 py-5">
           <div className="min-w-0">
@@ -1088,7 +1094,7 @@ function SignedOutInboxNotice({
   isAuthPending: boolean;
 }) {
   return (
-    <div className="rounded-[18px] border border-warning/20 bg-warning/10 px-3 py-2.5">
+    <div className="rounded-2xl border border-warning/20 bg-warning/10 px-3 py-2.5">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <div className="text-xs font-semibold text-foreground">