diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index ae57bc259..a259a9f0a 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -14,7 +14,6 @@ import * as DesktopClientSettings from "./DesktopClientSettings.ts";
 
 const clientSettings: ClientSettings = {
   appearanceContrast: 100,
-  dotMatrixMotion: "smooth",
   browserDefaultViewport: { _tag: "preset", width: 1024, height: 600, presetId: "nest-hub" },
   browserDefaultZoomFactor: 1.25,
   browserDefaultAppearance: "dark",
diff --git a/apps/mobile/generated-uniwind-default-theme-variables.json b/apps/mobile/generated-uniwind-default-theme-variables.json
index 26eef52e8..427d370ac 100644
--- a/apps/mobile/generated-uniwind-default-theme-variables.json
+++ b/apps/mobile/generated-uniwind-default-theme-variables.json
@@ -31,11 +31,6 @@
     "--color-danger": "#fef2f2",
     "--color-danger-border": "rgba(239, 68, 68, 0.12)",
     "--color-danger-foreground": "#dc2626",
-    "--color-warning": "#fe9a00",
-    "--color-warning-foreground": "#bb4d00",
-    "--color-warning-surface": "#fcf4e8",
-    "--color-status-active": "#1b4ed8",
-    "--color-status-info": "#7622bf",
     "--color-input": "#ffffff",
     "--color-input-border": "rgba(0, 0, 0, 0.1)",
     "--color-sidebar-search": "rgba(118, 118, 128, 0.12)",
@@ -103,11 +98,6 @@
     "--color-danger": "rgba(239, 68, 68, 0.14)",
     "--color-danger-border": "rgba(248, 113, 113, 0.18)",
     "--color-danger-foreground": "#fca5a5",
-    "--color-warning": "#fe9a00",
-    "--color-warning-foreground": "#ffb900",
-    "--color-warning-surface": "#312108",
-    "--color-status-active": "#477cf4",
-    "--color-status-info": "#e9d5ff",
     "--color-input": "#141414",
     "--color-input-border": "rgba(255, 255, 255, 0.08)",
     "--color-sidebar-search": "rgba(118, 118, 128, 0.24)",
diff --git a/apps/mobile/generated-uniwind-themes.css b/apps/mobile/generated-uniwind-themes.css
index ce57c6483..6c4102a4d 100644
--- a/apps/mobile/generated-uniwind-themes.css
+++ b/apps/mobile/generated-uniwind-themes.css
@@ -171,11 +171,6 @@
       --color-danger: #fde4f1;
       --color-danger-border: rgba(247, 8, 108, 0.32);
       --color-danger-foreground: #9d174d;
-      --color-warning: #f59e0b;
-      --color-warning-foreground: #a64c08;
-      --color-warning-surface: #fcf0ea;
-      --color-status-active: #0f766e;
-      --color-status-info: #7622bf;
       --color-input: #fdfafd;
       --color-input-border: #e7c1dc;
       --color-sidebar-search: #f8f8f7;
@@ -310,11 +305,6 @@
       --color-danger: #331a2b;
       --color-danger-border: rgba(157, 23, 77, 0.32);
       --color-danger-foreground: #fbd0e8;
-      --color-warning: #f59e0b;
-      --color-warning-foreground: #fbbf24;
-      --color-warning-surface: #412f20;
-      --color-status-active: #2dd4bf;
-      --color-status-info: #e9d5ff;
       --color-input: #2c2631;
       --color-input-border: #302029;
       --color-sidebar-search: #261922;
@@ -449,11 +439,6 @@
       --color-danger: #f4e7e5;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b14800;
-      --color-warning-surface: #f4f0e1;
-      --color-status-active: #1d4ed8;
-      --color-status-info: #7622bf;
       --color-input: #ecefed;
       --color-input-border: #becbc5;
       --color-sidebar-search: #d3dcd8;
@@ -588,11 +573,6 @@
       --color-danger: #3f2c28;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6668;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #3f3a1c;
-      --color-status-active: #60a5fa;
-      --color-status-info: #e9d5ff;
       --color-input: #36413c;
       --color-input-border: #4f725f;
       --color-sidebar-search: #45554d;
@@ -727,11 +707,6 @@
       --color-danger: #f5e6e9;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b14800;
-      --color-warning-surface: #f6efe4;
-      --color-status-active: #0e7490;
-      --color-status-info: #7622bf;
       --color-input: #edeff1;
       --color-input-border: #c0c9d4;
       --color-sidebar-search: #d5dbe2;
@@ -866,11 +841,6 @@
       --color-danger: #3c2630;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #3c3424;
-      --color-status-active: #22d3ee;
-      --color-status-info: #e9d5ff;
       --color-input: #333b45;
       --color-input-border: #4f677b;
       --color-sidebar-search: #424e5a;
@@ -1005,11 +975,6 @@
       --color-danger: #f9e7e6;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b24900;
-      --color-warning-surface: #f9efe2;
-      --color-status-active: #075985;
-      --color-status-info: #7622bf;
       --color-input: #f1efee;
       --color-input-border: #d4c6c1;
       --color-sidebar-search: #e2d9d6;
@@ -1144,11 +1109,6 @@
       --color-danger: #4a2321;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #4b3215;
-      --color-status-active: #7dd3fc;
-      --color-status-info: #e9d5ff;
       --color-input: #433835;
       --color-input-border: #7a5d4d;
       --color-sidebar-search: #584943;
@@ -1283,11 +1243,6 @@
       --color-danger: #f8e6ea;
       --color-danger-border: rgba(251, 44, 54, 0.32);
       --color-danger-foreground: #c10007;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #b24800;
-      --color-warning-surface: #f8efe5;
-      --color-status-active: #0369a1;
-      --color-status-info: #7622bf;
       --color-input: #f0eff2;
       --color-input-border: #ccc5d6;
       --color-sidebar-search: #ddd9e3;
@@ -1422,11 +1377,6 @@
       --color-danger: #40202e;
       --color-danger-border: rgba(251, 65, 74, 0.32);
       --color-danger-foreground: #ff6467;
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #412e23;
-      --color-status-active: #38bdf8;
-      --color-status-info: #e9d5ff;
       --color-input: #383443;
       --color-input-border: #5d527b;
       --color-sidebar-search: #494459;
diff --git a/apps/mobile/global.css b/apps/mobile/global.css
index d8b455c18..e6961eac4 100644
--- a/apps/mobile/global.css
+++ b/apps/mobile/global.css
@@ -57,13 +57,6 @@
       --color-danger-border: rgba(239, 68, 68, 0.12);
       --color-danger-foreground: #dc2626;
 
-      /* Thread status */
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #bb4d00;
-      --color-warning-surface: #fcf4e8;
-      --color-status-active: #1b4ed8;
-      --color-status-info: #7622bf;
-
       /* Inputs */
       --color-input: #ffffff;
       --color-input-border: rgba(0, 0, 0, 0.1);
@@ -163,13 +156,6 @@
       --color-danger-border: rgba(248, 113, 113, 0.18);
       --color-danger-foreground: #fca5a5;
 
-      /* Thread status */
-      --color-warning: #fe9a00;
-      --color-warning-foreground: #ffb900;
-      --color-warning-surface: #312108;
-      --color-status-active: #477cf4;
-      --color-status-info: #e9d5ff;
-
       /* Inputs */
       --color-input: #141414;
       --color-input-border: rgba(255, 255, 255, 0.08);
diff --git a/apps/mobile/src/features/threads/thread-list-items.tsx b/apps/mobile/src/features/threads/thread-list-items.tsx
index f48abdd8d..76b7a4a75 100644
--- a/apps/mobile/src/features/threads/thread-list-items.tsx
+++ b/apps/mobile/src/features/threads/thread-list-items.tsx
@@ -453,7 +453,6 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const pressedBackgroundColor = useUniwindTheme()["--color-subtle"];
   const selectedBackgroundColor = useUniwindTheme()["--color-user-bubble"];
   const selectedForegroundColor = useUniwindTheme()["--color-user-bubble-foreground"];
-  const warningForegroundColor = useUniwindTheme()["--color-warning-foreground"];
 
   const { thread, onSelectThread, onArchiveThread, onDeleteThread, onRegenerateThreadTitle } =
     props;
@@ -471,10 +470,8 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const effectivePressedBackground = selected
     ? themeColorWithAlpha(String(selectedForegroundColor), 0.16)
     : pressedBackgroundColor;
-  const usesWarningTreatment =
-    status?.kind === "pending-approval" || status?.kind === "awaiting-input";
   const effectiveStatus =
-    selected && status && !usesWarningTreatment
+    selected && status
       ? {
           ...status,
           pillClassName: "bg-user-bubble-foreground/20",
@@ -518,17 +515,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   );
 
   const statusPill = effectiveStatus ? (
-    <View
-      className={`${effectiveStatus.pillClassName} flex-row items-center gap-0.5 rounded-full px-1.5 py-0.5`}
-    >
-      {effectiveStatus.kind === "awaiting-input" ? (
-        <SymbolView
-          name="exclamationmark.triangle"
-          size={9}
-          tintColor={warningForegroundColor}
-          type="monochrome"
-        />
-      ) : null}
+    <View className={`${effectiveStatus.pillClassName} rounded-full px-1.5 py-0.5`}>
       <Text className={`text-3xs font-t3-bold ${effectiveStatus.textClassName}`}>
         {effectiveStatus.label}
       </Text>
diff --git a/apps/mobile/src/features/threads/thread-list-v2-items.tsx b/apps/mobile/src/features/threads/thread-list-v2-items.tsx
index 21f9108cf..84b0eee7b 100644
--- a/apps/mobile/src/features/threads/thread-list-v2-items.tsx
+++ b/apps/mobile/src/features/threads/thread-list-v2-items.tsx
@@ -46,15 +46,15 @@ const MONO_FONT = Platform.select({
   default: "monospace",
 });
 
-// Active work and Plan Ready follow shared theme roles. User-blocking Input
-// uses the orange warning treatment instead of operational Waiting's neutral treatment.
+// Status hues follow upstream's cross-surface convention. Plan Ready is a
+// Pylon-only semantic state and uses upstream's existing violet plan hue.
 const STATUS_LABEL_BY_STATUS: Partial<
   Record<ThreadListV2Status, { label: string; className: string }>
 > = {
-  approval: { label: "Approval", className: "text-warning-foreground" },
-  input: { label: "Input", className: "text-warning-foreground" },
-  "plan-ready": { label: "Plan Ready", className: "text-status-info" },
-  working: { label: "Working", className: "text-status-active" },
+  approval: { label: "Approval", className: "text-adaptive-amber-700-300" },
+  input: { label: "Input", className: "text-adaptive-indigo-600-300" },
+  "plan-ready": { label: "Plan Ready", className: "text-adaptive-violet-700-300" },
+  working: { label: "Working", className: "text-adaptive-sky-600-400" },
   failed: { label: "Failed", className: "text-adaptive-red-700-300" },
 };
 
@@ -423,8 +423,6 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
   const pressedBackgroundColor = useUniwindTheme()["--color-subtle"];
   const selectedBackgroundColor = useUniwindTheme()["--color-user-bubble"];
   const pinTintColor = useUniwindTheme()["--color-foreground-muted"];
-  const warningForegroundColor = useUniwindTheme()["--color-warning-foreground"];
-  const selectedForegroundColor = useUniwindTheme()["--color-user-bubble-foreground"];
   const sidebarPane = props.pane === "sidebar";
   const selected = props.selected === true;
 
@@ -703,35 +701,16 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
         {pinnedRow ? (
           <SymbolView name="pin" size={11} tintColor={pinTintColor} type="monochrome" />
         ) : null}
-        {statusLabel ? (
-          <View className="flex-row items-center gap-1">
-            {status === "input" ? (
-              <SymbolView
-                name="exclamationmark.triangle"
-                size={10}
-                tintColor={selected ? selectedForegroundColor : warningForegroundColor}
-                type="monochrome"
-              />
-            ) : null}
-            <Text
-              className={cn(
-                "text-xs tabular-nums",
-                selected ? "text-user-bubble-foreground" : statusLabel.className,
-              )}
-            >
-              {statusLabel.label}
-            </Text>
-          </View>
-        ) : (
-          <Text
-            className={cn(
-              "text-xs tabular-nums",
-              selected ? "text-user-bubble-foreground" : "text-foreground-tertiary",
-            )}
-          >
-            {timeLabel}
-          </Text>
-        )}
+        <Text
+          className={cn(
+            "text-xs tabular-nums",
+            selected
+              ? "text-user-bubble-foreground"
+              : (statusLabel?.className ?? "text-foreground-tertiary"),
+          )}
+        >
+          {statusLabel?.label ?? timeLabel}
+        </Text>
       </View>
       <Text
         className={cn(
diff --git a/apps/mobile/src/features/threads/threadPresentation.test.ts b/apps/mobile/src/features/threads/threadPresentation.test.ts
index 0d8d9eddc..6df3acf66 100644
--- a/apps/mobile/src/features/threads/threadPresentation.test.ts
+++ b/apps/mobile/src/features/threads/threadPresentation.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from "vite-plus/test";
 
 import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
 
-import { resolveThreadStatus } from "./threadPresentation";
+import { resolveThreadStatus, THREAD_STATUS_NEUTRAL_ICON } from "./threadPresentation";
 
 const baseThread = {
   interactionMode: "default",
@@ -14,15 +14,22 @@ const baseThread = {
 } as EnvironmentThreadShell;
 
 describe("resolveThreadStatus", () => {
-  it("uses the orange warning treatment for user input", () => {
+  it("restores distinct upstream approval and input hues", () => {
+    expect(resolveThreadStatus({ ...baseThread, hasPendingApprovals: true })).toMatchObject({
+      kind: "pending-approval",
+      pillClassName: "bg-adaptive-amber-500-a12-a16",
+      textClassName: "text-adaptive-amber-700-300",
+      iconColor: "#ff9f0a",
+    });
     expect(resolveThreadStatus({ ...baseThread, hasPendingUserInput: true })).toMatchObject({
       kind: "awaiting-input",
-      pillClassName: "bg-warning-surface",
-      textClassName: "text-warning-foreground",
+      pillClassName: "bg-adaptive-indigo-500-a12-a16",
+      textClassName: "text-adaptive-indigo-700-300",
+      iconColor: "#5e5ce6",
     });
   });
 
-  it("uses the purple info role for plan-ready information", () => {
+  it("uses the upstream violet plan-ready treatment", () => {
     expect(
       resolveThreadStatus({
         ...baseThread,
@@ -35,13 +42,14 @@ describe("resolveThreadStatus", () => {
       } as EnvironmentThreadShell),
     ).toMatchObject({
       kind: "plan-ready",
-      pillClassName: "bg-screen",
-      textClassName: "text-status-info",
+      pillClassName: "bg-adaptive-violet-500-a12-a16",
+      textClassName: "text-adaptive-violet-700-300",
+      iconColor: "#bf5af2",
     });
   });
 
   it.each(["running", "starting"] as const)(
-    "uses the active theme role while the session is %s",
+    "uses upstream sky while the session is %s",
     (status) => {
       expect(
         resolveThreadStatus({
@@ -49,9 +57,18 @@ describe("resolveThreadStatus", () => {
           session: { status },
         } as EnvironmentThreadShell),
       ).toMatchObject({
-        pillClassName: "bg-screen",
-        textClassName: "text-status-active",
+        pillClassName: "bg-adaptive-sky-500-a12-a16",
+        textClassName: "text-adaptive-sky-700-300",
+        iconColor: "#0a84ff",
+        pulse: true,
       });
     },
   );
+
+  it("retains upstream neutral icon metadata", () => {
+    expect(THREAD_STATUS_NEUTRAL_ICON).toEqual({
+      iconColor: "#8e8e93",
+      iconBackground: "rgba(142,142,147,0.22)",
+    });
+  });
 });
diff --git a/apps/mobile/src/features/threads/threadPresentation.ts b/apps/mobile/src/features/threads/threadPresentation.ts
index 1ddda3362..b91c7152a 100644
--- a/apps/mobile/src/features/threads/threadPresentation.ts
+++ b/apps/mobile/src/features/threads/threadPresentation.ts
@@ -17,10 +17,20 @@ export type ThreadStatusKind =
 
 export interface ThreadStatusPresentation extends StatusTone {
   readonly kind: ThreadStatusKind;
+  /** Foreground color for the leading status icon. */
+  readonly iconColor: string;
+  /** Background color for the leading status icon circle. */
+  readonly iconBackground: string;
   /** Whether the indicator represents in-flight activity. */
   readonly pulse: boolean;
 }
 
+/** Neutral icon colors for threads with no actionable status. */
+export const THREAD_STATUS_NEUTRAL_ICON = {
+  iconColor: "#8e8e93",
+  iconBackground: "rgba(142,142,147,0.22)",
+} as const;
+
 function isLatestTurnSettled(
   latestTurn: OrchestrationLatestTurn | null,
   session: OrchestrationSession | null,
@@ -43,8 +53,10 @@ export function resolveThreadStatus(
     return {
       kind: "pending-approval",
       label: "Needs Approval",
-      pillClassName: "bg-warning-surface",
-      textClassName: "text-warning-foreground",
+      pillClassName: "bg-adaptive-amber-500-a12-a16",
+      textClassName: "text-adaptive-amber-700-300",
+      iconColor: "#ff9f0a",
+      iconBackground: "rgba(255,159,10,0.22)",
       pulse: false,
     };
   }
@@ -53,8 +65,10 @@ export function resolveThreadStatus(
     return {
       kind: "awaiting-input",
       label: "Awaiting Input",
-      pillClassName: "bg-warning-surface",
-      textClassName: "text-warning-foreground",
+      pillClassName: "bg-adaptive-indigo-500-a12-a16",
+      textClassName: "text-adaptive-indigo-700-300",
+      iconColor: "#5e5ce6",
+      iconBackground: "rgba(94,92,230,0.22)",
       pulse: false,
     };
   }
@@ -63,8 +77,10 @@ export function resolveThreadStatus(
     return {
       kind: "working",
       label: "Working",
-      pillClassName: "bg-screen",
-      textClassName: "text-status-active",
+      pillClassName: "bg-adaptive-sky-500-a12-a16",
+      textClassName: "text-adaptive-sky-700-300",
+      iconColor: "#0a84ff",
+      iconBackground: "rgba(10,132,255,0.22)",
       pulse: true,
     };
   }
@@ -73,8 +89,10 @@ export function resolveThreadStatus(
     return {
       kind: "connecting",
       label: "Connecting",
-      pillClassName: "bg-screen",
-      textClassName: "text-status-active",
+      pillClassName: "bg-adaptive-sky-500-a12-a16",
+      textClassName: "text-adaptive-sky-700-300",
+      iconColor: "#0a84ff",
+      iconBackground: "rgba(10,132,255,0.22)",
       pulse: true,
     };
   }
@@ -85,6 +103,8 @@ export function resolveThreadStatus(
       label: "Error",
       pillClassName: "bg-adaptive-rose-500-a12-a16",
       textClassName: "text-adaptive-rose-700-300",
+      iconColor: "#ff453a",
+      iconBackground: "rgba(255,69,58,0.22)",
       pulse: false,
     };
   }
@@ -97,8 +117,10 @@ export function resolveThreadStatus(
     return {
       kind: "plan-ready",
       label: "Plan Ready",
-      pillClassName: "bg-screen",
-      textClassName: "text-status-info",
+      pillClassName: "bg-adaptive-violet-500-a12-a16",
+      textClassName: "text-adaptive-violet-700-300",
+      iconColor: "#bf5af2",
+      iconBackground: "rgba(191,90,242,0.22)",
       pulse: false,
     };
   }
diff --git a/apps/mobile/src/lib/mobileTheme.test.ts b/apps/mobile/src/lib/mobileTheme.test.ts
index 2ab9cb22d..9c35be022 100644
--- a/apps/mobile/src/lib/mobileTheme.test.ts
+++ b/apps/mobile/src/lib/mobileTheme.test.ts
@@ -153,7 +153,7 @@ describe("mobile themes", () => {
 
   it("maps semantic palette roles onto every mobile color variable", () => {
     const variables = createMobileThemeVariables(BUILT_IN_THEMES[0].colors, "light");
-    expect(Object.keys(variables)).toHaveLength(70);
+    expect(Object.keys(variables)).toHaveLength(65);
     expect(variables["--color-sheet-solid"]).toBe(
       themeColorToNativeColor(BUILT_IN_THEMES[0].colors.chrome),
     );
diff --git a/apps/mobile/src/lib/mobileTheme.ts b/apps/mobile/src/lib/mobileTheme.ts
index 86691f224..cd3a52a24 100644
--- a/apps/mobile/src/lib/mobileTheme.ts
+++ b/apps/mobile/src/lib/mobileTheme.ts
@@ -242,11 +242,6 @@ export function createMobileThemeVariables(
     "--color-danger": c.errorSurface,
     "--color-danger-border": withAlpha(c.error, 0.32),
     "--color-danger-foreground": c.errorForeground,
-    "--color-warning": c.warning,
-    "--color-warning-foreground": readableForeground(c.warningForeground, c.sidebar, 4.6),
-    "--color-warning-surface": c.warningSurface,
-    "--color-status-active": c.statusActive,
-    "--color-status-info": c.statusInfo,
     "--color-input": c.surfaceRaised,
     "--color-input-border": c.input,
     "--color-sidebar-search": c.sidebarControlSurface,
diff --git a/apps/mobile/src/widgets/AgentActivity.test.ts b/apps/mobile/src/widgets/AgentActivity.test.ts
index 806e64eb7..680a6ddb0 100644
--- a/apps/mobile/src/widgets/AgentActivity.test.ts
+++ b/apps/mobile/src/widgets/AgentActivity.test.ts
@@ -83,10 +83,11 @@ const lightEnvironment = {
 } as const;
 
 describe("AgentActivity widget layout", () => {
-  it("keeps warning status text readable on light and dark system materials", () => {
-    expect(contrastRatio("#bb4d00", "#ffffff")).toBeGreaterThanOrEqual(4.5);
-    expect(contrastRatio("#ffb900", "#000000")).toBeGreaterThanOrEqual(4.5);
+  it("keeps approval status text readable on light and dark system materials", () => {
+    expect(contrastRatio("#b45309", "#ffffff")).toBeGreaterThanOrEqual(4.5);
+    expect(contrastRatio("#fcd34d", "#000000")).toBeGreaterThanOrEqual(4.5);
   });
+
   it("tints each row by its own phase using the web sidebar's dark palette", () => {
     const layout = AgentActivity(
       {
@@ -101,7 +102,7 @@ describe("AgentActivity widget layout", () => {
     );
     const banner = JSON.stringify(layout.banner);
     expect(banner).toContain("#7dd3fc"); // sky-300: running
-    expect(banner).toContain("#ffb900"); // warning foreground: waiting_for_approval
+    expect(banner).toContain("#fcd34d"); // amber-300: waiting_for_approval
   });
 
   it("switches to the web sidebar's light palette when the scheme is light", () => {
@@ -120,9 +121,9 @@ describe("AgentActivity widget layout", () => {
     );
     const banner = JSON.stringify(layout.banner);
     expect(banner).toContain("#0284c7"); // sky-600: running
-    expect(banner).toContain("#bb4d00"); // warning foreground: waiting_for_approval
+    expect(banner).toContain("#b45309"); // amber-700: waiting_for_approval
     expect(banner).not.toContain("#7dd3fc");
-    expect(banner).not.toContain("#ffb900");
+    expect(banner).not.toContain("#fcd34d");
   });
 
   it("orders rows attention-first in the banner", () => {
@@ -176,10 +177,10 @@ describe("AgentActivity widget layout", () => {
       },
       environment as never,
     );
-    expect(JSON.stringify(layout.compactLeading)).toContain("#ffb900"); // warning foreground
+    expect(JSON.stringify(layout.compactLeading)).toContain("#a5b4fc"); // indigo-300
     expect(JSON.stringify(layout.compactTrailing)).toContain("Input");
-    expect(JSON.stringify(layout.minimal)).toContain("#ffb900");
-    expect(JSON.stringify(layout.minimal)).toContain("exclamationmark.circle.fill");
+    expect(JSON.stringify(layout.minimal)).toContain("#a5b4fc");
+    expect(JSON.stringify(layout.minimal)).toContain("questionmark.circle.fill");
   });
 
   it("deep links the banner to the row that needs attention", () => {
diff --git a/apps/mobile/src/widgets/AgentActivity.tsx b/apps/mobile/src/widgets/AgentActivity.tsx
index 989eecade..c244e05b4 100644
--- a/apps/mobile/src/widgets/AgentActivity.tsx
+++ b/apps/mobile/src/widgets/AgentActivity.tsx
@@ -65,11 +65,12 @@ export function AgentActivity(
   const primaryForeground = "primary";
   const secondaryForeground = "secondary";
 
-  // Status tints mirror the semantic web and mobile roles: warning foreground
-  // for user attention, sky for working, and emerald for completed. On iPhone
-  // the LA sits on a dark material, but macOS (iPhone Mirroring / Mac
-  // notification center) renders it on a light one, so each tint must remain
-  // readable on the corresponding system material.
+  // Status tints mirror the web sidebar's pills
+  // (apps/web/src/components/Sidebar.logic.ts resolveThreadStatusPill): amber
+  // for approval, indigo for input, sky for working, emerald for completed.
+  // On iPhone the LA sits on a dark material, but macOS (iPhone Mirroring /
+  // Mac notification center) renders it on a light one — so pick the web
+  // palette's light (-600) or dark (-300) variant off the color scheme.
   const isLightScheme = environment.colorScheme === "light";
   const phaseTint = (phase: AgentActivityPhase | undefined): string => {
     if (environment.isLuminanceReduced) {
@@ -77,9 +78,9 @@ export function AgentActivity(
     }
     switch (phase) {
       case "waiting_for_approval":
-        return isLightScheme ? "#bb4d00" : "#ffb900";
+        return isLightScheme ? "#b45309" : "#fcd34d"; // amber-700 / amber-300
       case "waiting_for_input":
-        return isLightScheme ? "#bb4d00" : "#ffb900";
+        return isLightScheme ? "#4f46e5" : "#a5b4fc"; // indigo-600 / indigo-300
       case "failed":
         return isLightScheme ? "#dc2626" : "#fca5a5"; // red-600 / red-300
       case "completed":
@@ -161,7 +162,7 @@ export function AgentActivity(
       case "waiting_for_approval":
         return "exclamationmark.circle.fill";
       case "waiting_for_input":
-        return "exclamationmark.circle.fill";
+        return "questionmark.circle.fill";
       case "failed":
         return "xmark.octagon.fill";
       case "completed":
diff --git a/apps/web/THIRD_PARTY_NOTICES.md b/apps/web/THIRD_PARTY_NOTICES.md
index 95d3c9238..c9a675ef4 100644
--- a/apps/web/THIRD_PARTY_NOTICES.md
+++ b/apps/web/THIRD_PARTY_NOTICES.md
@@ -9,15 +9,3 @@ Copyright (c) 2016 Roberto Huertas
 
 Licensed under the MIT License. The full license text is available in the
 upstream repository: <https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE>.
-
-## assistant-ui Dot Matrix
-
-The Dot Matrix state patterns in `src/components/ui/dot-matrix.tsx` are adapted
-from assistant-ui's [standalone Dot Matrix](https://www.assistant-ui.com/standalone/dot-matrix)
-component. Pylon adds queued, terminal, and orchestration states and offers
-smooth or stepped animation timing for status surfaces.
-
-Copyright (c) AgentbaseAI Inc.
-
-Licensed under the MIT License. The full license text is available in the
-upstream repository: <https://github.com/assistant-ui/assistant-ui/blob/main/LICENSE>.
diff --git a/apps/web/src/components/AgentsPanel.test.tsx b/apps/web/src/components/AgentsPanel.test.tsx
index ffa6284e9..29764cfd1 100644
--- a/apps/web/src/components/AgentsPanel.test.tsx
+++ b/apps/web/src/components/AgentsPanel.test.tsx
@@ -86,7 +86,7 @@ describe("AgentsPanel agent cancellation", () => {
     expect(markup).toContain("Working");
   });
 
-  it("keeps queued, running, waiting, and settled agent states distinct", () => {
+  it("keeps truthful labels while rendering upstream static status dots", () => {
     const statuses: RuntimeSubagent["status"][] = [
       "pending",
       "running",
@@ -102,17 +102,32 @@ describe("AgentsPanel agent cancellation", () => {
     };
     const markup = renderToStaticMarkup(<AgentsPanel model={statusModel} />);
 
-    expect(markup).toContain('data-state="orchestrating"');
-    expect(markup).toContain('data-state="queued"');
-    expect(markup).toContain('data-state="waiting"');
-    expect(markup).toContain('data-state="paused"');
-    expect(markup).toContain('data-state="success"');
-    expect(markup).toContain('data-state="error"');
-    expect(markup).toContain('data-state="stopped"');
+    expect(markup.match(/bg-info/g)).toHaveLength(3);
+    expect(markup).toContain("bg-muted-foreground/50");
+    expect(markup).toContain("bg-muted-foreground/60");
+    expect(markup).toContain("bg-success");
+    expect(markup).toContain("bg-destructive");
+    expect(markup).not.toContain('data-slot="dot-matrix"');
     expect(markup).toContain("Queued");
     expect(markup).toContain("Waiting");
   });
 
+  it("keeps active status labels visible when an activity detail is present", () => {
+    const statusModel = {
+      ...model,
+      directAgents: [
+        { ...agent("agent-pending", "Pending reviewer", "pending"), progress: "Waiting for slot" },
+        { ...agent("agent-running", "Running reviewer", "running"), lastToolName: "ipython" },
+        { ...agent("agent-waiting", "Waiting reviewer", "waiting"), progress: "Awaiting review" },
+      ],
+    };
+    const markup = renderToStaticMarkup(<AgentsPanel model={statusModel} />);
+
+    expect(markup).toContain("Queued · Waiting for slot");
+    expect(markup).toContain("Working · ▸ ipython");
+    expect(markup).toContain("Waiting · Awaiting review");
+  });
+
   it("keeps every agent row read-only without an advertised capability", () => {
     const markup = renderToStaticMarkup(<AgentsPanel model={model} />);
     expect(markup).not.toContain('aria-label="Stop ');
diff --git a/apps/web/src/components/AgentsPanel.tsx b/apps/web/src/components/AgentsPanel.tsx
index 92679b749..c098b0f2a 100644
--- a/apps/web/src/components/AgentsPanel.tsx
+++ b/apps/web/src/components/AgentsPanel.tsx
@@ -9,8 +9,7 @@
  *   changing data must never change their height.
  * - Workflow expansion is presentation state. A live run stays expanded when
  *   it settles; older collapsed runs can still be opened at run granularity.
- * - Status reads through the shared DotMatrix language, with DOM-write
- *   elapsed timers and plain token counters.
+ * - Static status dots, DOM-write elapsed timers, plain token counters.
  */
 import { useAtomValue } from "@effect/atom-react";
 import type {
@@ -67,28 +66,27 @@ import {
   DialogTitle,
 } from "~/components/ui/dialog";
 import { Textarea } from "~/components/ui/textarea";
-import { DotMatrix, type DotMatrixState } from "./ui/dot-matrix";
 import { AgentLiveActivity } from "./AgentLiveActivity";
 
-/**
- * Agent status is a truth-bearing visual contract: the orbit is reserved for
- * running subagents, while queued and waiting agents use their own patterns.
- * Settled outcomes stay static except for attention states such as failure.
- */
-const STATUS_VISUALS: Record<RuntimeSubagent["status"], { matrix: DotMatrixState; label: string }> =
-  {
-    pending: { matrix: "queued", label: "Queued" },
-    running: { matrix: "orchestrating", label: "Working" },
-    waiting: { matrix: "waiting", label: "Waiting" },
-    idle: { matrix: "paused", label: "Idle · resumable" },
-    completed: { matrix: "success", label: "Completed" },
-    failed: { matrix: "error", label: "Failed" },
-    cancelled: { matrix: "stopped", label: "Stopped" },
-    interrupted: { matrix: "stopped", label: "Stopped" },
-  };
+/** Status truth stays in labels; the marker follows upstream's static dot vocabulary. */
+const STATUS_VISUALS: Record<RuntimeSubagent["status"], { dotClass: string; label: string }> = {
+  pending: { dotClass: "bg-info", label: "Queued" },
+  running: { dotClass: "bg-info", label: "Working" },
+  waiting: { dotClass: "bg-info", label: "Waiting" },
+  idle: { dotClass: "bg-muted-foreground/50", label: "Idle · resumable" },
+  completed: { dotClass: "bg-success", label: "Completed" },
+  failed: { dotClass: "bg-destructive", label: "Failed" },
+  cancelled: { dotClass: "bg-muted-foreground/60", label: "Stopped" },
+  interrupted: { dotClass: "bg-muted-foreground/60", label: "Stopped" },
+};
 
 function StatusDot({ status }: { status: RuntimeSubagent["status"] }) {
-  return <DotMatrix sizeRole="compact" aria-hidden state={STATUS_VISUALS[status].matrix} />;
+  return (
+    <span
+      aria-hidden
+      className={cn("size-1.5 shrink-0 rounded-full", STATUS_VISUALS[status].dotClass)}
+    />
+  );
 }
 
 function formatElapsedSeconds(totalSeconds: number): string {
@@ -220,9 +218,7 @@ function AgentRow({
   const liveActivityAvailable = liveActivityEligible && active;
 
   return (
-    // The marker track keeps a 14px alignment frame around the standard 12px
-    // Dot Matrix so the glyph cannot bleed into the title column.
-    <div className="grid h-[3.875rem] grid-cols-[0.875rem_minmax(0,1fr)_auto_auto_1.75rem_1.75rem] grid-rows-[1.25rem_1.125rem_1rem] items-center gap-x-2 rounded-md px-1.5 py-1">
+    <div className="grid h-[3.875rem] grid-cols-[0.375rem_minmax(0,1fr)_auto_auto_1.75rem_1.75rem] grid-rows-[1.25rem_1.125rem_1rem] items-center gap-x-2 rounded-md px-1.5 py-1">
       <span className="col-start-1 row-start-1 flex items-center">
         <StatusDot status={agent.status} />
       </span>
@@ -294,12 +290,11 @@ function AgentRow({
           agent.status === "failed" ? "text-destructive-foreground" : "text-muted-foreground",
         )}
       >
-        {activity ?? visuals.label}
+        {activity ? `${visuals.label} · ${activity}` : visuals.label}
       </span>
       <span className="col-start-2 col-end-7 row-start-3 truncate font-mono text-[.7rem] tabular-nums text-muted-foreground/70">
         {metadata.join(" · ")}
       </span>
-      <span className="sr-only">{visuals.label}</span>
     </div>
   );
 }
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 350d5466b..873676739 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -428,7 +428,6 @@ import {
   AlertDialogTitle,
 } from "./ui/alert-dialog";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { DotMatrix } from "./ui/dot-matrix";
 import { ServerUpdateAction, ServerUpdateProgress } from "./ServerUpdateAction";
 import {
   buildVersionMismatchDismissalKey,
@@ -2299,7 +2298,12 @@ function ChatViewContent(props: ChatViewProps) {
           variant: "default",
           // Live connection status: calm styling, but it must front the stack.
           urgent: true,
-          icon: <DotMatrix sizeRole="inline" aria-hidden state="connecting" />,
+          icon: (
+            <span
+              className="size-1.5 animate-status-pulse rounded-full bg-foreground motion-reduce:animate-none"
+              aria-hidden="true"
+            />
+          ),
           title: `${unavailableConnection.phase === "connecting" ? "Connecting" : "Reconnecting"} to ${activeEnvironmentUnavailableState.label}`,
           description: "It may be finishing an update. One moment.",
         });
@@ -2351,12 +2355,14 @@ function ChatViewContent(props: ChatViewProps) {
         // A running update is live progress the user is waiting on; only the
         // idle "update available" offer is calm enough to stack behind.
         urgent: updateInProgress,
-        // In-flight and failed states carry their own DotMatrix marker inside
-        // ServerUpdateProgress; only the idle offer needs an icon, and it is
-        // a resting one — an available update is a notice, not a warning.
+        // In-flight and failed states carry their own status dot inside
+        // ServerUpdateProgress; only the idle offer needs an icon.
         icon:
           updateInProgress || updateFailed ? null : (
-            <DotMatrix sizeRole="inline" aria-hidden state="idle" />
+            <span
+              className="size-1.5 rounded-full border border-muted-foreground/40"
+              aria-hidden="true"
+            />
           ),
         title:
           updateInProgress || updateFailed ? (
@@ -5124,7 +5130,13 @@ function ChatViewContent(props: ChatViewProps) {
       id: `background-liveness:${activeThread.id}`,
       variant: "default",
       icon: (
-        <DotMatrix sizeRole="inline" aria-hidden state={working ? "orchestrating" : "listening"} />
+        <span
+          className={cn(
+            "size-1.5 rounded-full bg-foreground",
+            working && "animate-status-pulse motion-reduce:animate-none",
+          )}
+          aria-hidden="true"
+        />
       ),
       title: working
         ? liveCount > 0
diff --git a/apps/web/src/components/ConnectionStatusDot.test.tsx b/apps/web/src/components/ConnectionStatusDot.test.tsx
index 3e0213fb8..5372480a8 100644
--- a/apps/web/src/components/ConnectionStatusDot.test.tsx
+++ b/apps/web/src/components/ConnectionStatusDot.test.tsx
@@ -1,33 +1,48 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
-import { ConnectionStatusDot, connectionPhaseDotMatrixState } from "./ConnectionStatusDot";
+import {
+  ConnectionStatusDot,
+  connectionPhaseDotClassName,
+  connectionPhasePingClassName,
+} from "./ConnectionStatusDot";
 
 describe("ConnectionStatusDot", () => {
-  it("maps connection lifecycle facts to semantic states", () => {
-    expect(connectionPhaseDotMatrixState("connected")).toBe("success");
-    expect(connectionPhaseDotMatrixState("connecting")).toBe("connecting");
-    expect(connectionPhaseDotMatrixState("reconnecting")).toBe("connecting");
-    expect(connectionPhaseDotMatrixState("error")).toBe("error");
-    expect(connectionPhaseDotMatrixState("offline")).toBe("offline");
-    expect(connectionPhaseDotMatrixState("available")).toBe("offline");
+  it("maps connection lifecycle facts to upstream dot colors", () => {
+    expect(connectionPhaseDotClassName("connected")).toBe("bg-success");
+    expect(connectionPhaseDotClassName("connecting")).toBe("bg-warning");
+    expect(connectionPhaseDotClassName("reconnecting")).toBe("bg-warning");
+    expect(connectionPhaseDotClassName("error")).toBe("bg-destructive");
+    expect(connectionPhaseDotClassName("offline")).toBe("bg-muted-foreground/40");
   });
 
-  it("renders the connected outcome as a static success glyph", () => {
+  it("reserves the ping halo for transitional phases", () => {
+    expect(connectionPhasePingClassName("connecting")).toBe("bg-warning/60 duration-2000");
+    expect(connectionPhasePingClassName("reconnecting")).toBe("bg-warning/60 duration-2000");
+    expect(connectionPhasePingClassName("connected")).toBeNull();
+    expect(connectionPhasePingClassName("error")).toBeNull();
+  });
+
+  it("renders a static connected outcome", () => {
     const markup = renderToStaticMarkup(
-      <ConnectionStatusDot state="success" tooltipText="Connected" />,
+      <ConnectionStatusDot dotClassName="bg-success" tooltipText="Connected" />,
     );
-    expect(markup).toContain('data-state="success"');
-    expect(markup).toContain("text-success");
-    expect(markup).not.toContain("data-animated");
+    expect(markup).toContain("bg-success");
+    expect(markup).not.toContain("animate-status-ping");
   });
 
-  it("keeps a persisted pairing link static while it waits to be used", () => {
+  it("renders a reduced-motion-safe transition halo", () => {
     const markup = renderToStaticMarkup(
-      <ConnectionStatusDot state="queued" colorClassName="text-warning" />,
+      <ConnectionStatusDot dotClassName="bg-warning" pingClassName="bg-warning/60 duration-2000" />,
     );
-    expect(markup).toContain('data-state="queued"');
-    expect(markup).toContain("text-warning");
-    expect(markup).not.toContain("data-animated");
+    expect(markup).toContain("animate-status-ping");
+    expect(markup).toContain("motion-reduce:hidden");
+    expect(markup).toContain("bg-warning/60");
+  });
+
+  it("keeps a persisted pairing link static while it waits to be used", () => {
+    const markup = renderToStaticMarkup(<ConnectionStatusDot dotClassName="bg-amber-400" />);
+    expect(markup).toContain("bg-amber-400");
+    expect(markup).not.toContain("animate-status-ping");
   });
 });
diff --git a/apps/web/src/components/ConnectionStatusDot.tsx b/apps/web/src/components/ConnectionStatusDot.tsx
index 8acfc5610..15dc3cdcc 100644
--- a/apps/web/src/components/ConnectionStatusDot.tsx
+++ b/apps/web/src/components/ConnectionStatusDot.tsx
@@ -1,51 +1,56 @@
 import type { EnvironmentConnectionPhase } from "@t3tools/client-runtime/connection";
 
+import { cn } from "~/lib/utils";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
-import { DotMatrix, type DotMatrixState } from "~/components/ui/dot-matrix";
 
-/**
- * Connection phase as a DotMatrix state. The dot carries hue and motion
- * together, so callers pass a phase rather than assembling colors themselves.
- */
-export function connectionPhaseDotMatrixState(
-  phase: EnvironmentConnectionPhase,
-): ConnectionStatusDotProps["state"] {
+/** Canonical connection-phase → dot color mapping shared by every status dot. */
+export function connectionPhaseDotClassName(phase: EnvironmentConnectionPhase): string {
   switch (phase) {
     case "connected":
-      return "success";
+      return "bg-success";
     case "connecting":
     case "reconnecting":
-      return "connecting";
+      return "bg-warning";
     case "error":
-      return "error";
+      return "bg-destructive";
     default:
-      return "offline";
+      return "bg-muted-foreground/40";
   }
 }
 
+/** Ping halo for transitional phases; null renders no ping. */
+export function connectionPhasePingClassName(phase: EnvironmentConnectionPhase): string | null {
+  return phase === "connecting" || phase === "reconnecting" ? "bg-warning/60 duration-2000" : null;
+}
+
 type ConnectionStatusDotProps = {
   tooltipText?: string | null;
-  state: Extract<
-    DotMatrixState,
-    "success" | "connecting" | "waiting" | "queued" | "error" | "offline"
-  >;
-  /** Only needed when a caller wants a hue other than the state's canonical
-   * tone (see dot-matrix.tsx's TONE map). */
-  colorClassName?: string | undefined;
+  dotClassName: string;
+  pingClassName?: string | null;
 };
 
 export function ConnectionStatusDot({
   tooltipText,
-  state,
-  colorClassName,
+  dotClassName,
+  pingClassName,
 }: ConnectionStatusDotProps) {
   const dotContent = (
-    <DotMatrix sizeRole="compact" aria-hidden state={state} className={colorClassName} />
+    <>
+      {pingClassName ? (
+        <span
+          className={cn(
+            "absolute inline-flex h-full w-full animate-status-ping rounded-full motion-reduce:hidden",
+            pingClassName,
+          )}
+        />
+      ) : null}
+      <span className={cn("relative inline-flex size-2 rounded-full", dotClassName)} />
+    </>
   );
 
   if (!tooltipText) {
     return (
-      <span className="relative flex size-3.5 shrink-0 items-center justify-center">
+      <span className="relative flex size-3 shrink-0 items-center justify-center">
         {dotContent}
       </span>
     );
@@ -55,7 +60,7 @@ export function ConnectionStatusDot({
     <button
       type="button"
       aria-label={tooltipText}
-      className="relative flex size-3.5 shrink-0 cursor-help items-center justify-center rounded-full outline-hidden"
+      className="relative flex size-3 shrink-0 cursor-help items-center justify-center rounded-full outline-hidden"
     >
       {dotContent}
     </button>
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index e95ca99dd..85c70db86 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -9,6 +9,7 @@ import {
   LoaderIcon,
   SearchIcon,
   SquarePenIcon,
+  TerminalIcon,
   TriangleAlertIcon,
 } from "lucide-react";
 import {
@@ -16,7 +17,6 @@ import {
   prStatusIndicator,
   PrStatusTooltipContent,
   resolveThreadPr,
-  sidebarStatusColorClass,
   terminalStatusFromRunningIds,
   ThreadStatusLabel,
   ThreadWorktreeIndicator,
@@ -126,7 +126,6 @@ import {
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { formatRelativeTimeLabel } from "../timestampFormat";
 import { Kbd } from "./ui/kbd";
-import { DotMatrix } from "./ui/dot-matrix";
 import {
   getArm64IntelBuildWarningDescription,
   getDesktopUpdateActionError,
@@ -724,7 +723,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
               </TooltipPopup>
             </Tooltip>
           )}
-          {threadStatus && <ThreadStatusLabel status={threadStatus} surface="sidebar" />}
+          {threadStatus && <ThreadStatusLabel status={threadStatus} />}
           {renamingThreadKey === threadKey ? (
             <input
               ref={handleRenameInputRef}
@@ -787,7 +786,11 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
                   />
                 }
               >
-                <DotMatrix sizeRole="compact" aria-hidden state="terminal-active" />
+                <TerminalIcon
+                  className={`size-3 ${
+                    terminalStatus.pulse ? "animate-status-pulse motion-reduce:animate-none" : ""
+                  }`}
+                />
               </TooltipTrigger>
               <TooltipPopup side="top">{terminalStatus.label}</TooltipPopup>
             </Tooltip>
@@ -1057,9 +1060,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
             }}
           >
             <span className="flex min-w-0 flex-1 items-center gap-2">
-              {hiddenThreadStatus && (
-                <ThreadStatusLabel status={hiddenThreadStatus} compact surface="sidebar" />
-              )}
+              {hiddenThreadStatus && <ThreadStatusLabel status={hiddenThreadStatus} compact />}
               <span>Show more</span>
             </span>
           </SidebarMenuSubButton>
@@ -1302,9 +1303,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       visibleProjectThreads,
     };
   }, [projectThreads, threadLastVisitedAts, threadSortOrder]);
-  const projectStatusColorClass = projectStatus
-    ? sidebarStatusColorClass(projectStatus.colorClass)
-    : "";
   const pinnedCollapsedThread = useMemo(() => {
     const activeThreadKey = activeRouteThreadKey ?? undefined;
     if (!activeThreadKey || projectExpanded) {
@@ -2277,16 +2275,15 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                   <span
                     role="img"
                     aria-label={projectStatus.label}
-                    className={`-ml-0.5 relative inline-flex size-3.5 shrink-0 items-center justify-center ${projectStatusColorClass}`}
+                    className={`-ml-0.5 relative inline-flex size-3.5 shrink-0 items-center justify-center ${projectStatus.colorClass}`}
                   />
                 }
               >
                 <span className="absolute inset-0 flex items-center justify-center transition-opacity duration-150 group-hover/project-header:opacity-0">
-                  <DotMatrix
-                    sizeRole="compact"
-                    state={projectStatus.matrix}
-                    aria-hidden
-                    className={projectStatusColorClass}
+                  <span
+                    className={`size-[9px] rounded-full ${projectStatus.dotClass} ${
+                      projectStatus.pulse ? "animate-status-pulse motion-reduce:animate-none" : ""
+                    }`}
                   />
                 </span>
                 <ChevronRightIcon className="absolute inset-0 m-auto size-3.5 text-icon-muted opacity-0 transition-opacity duration-150 group-hover/project-header:opacity-100" />
diff --git a/apps/web/src/components/ProviderUpdateEnvironmentRows.tsx b/apps/web/src/components/ProviderUpdateEnvironmentRows.tsx
index d9417e9ac..28242b88f 100644
--- a/apps/web/src/components/ProviderUpdateEnvironmentRows.tsx
+++ b/apps/web/src/components/ProviderUpdateEnvironmentRows.tsx
@@ -1,3 +1,4 @@
+import { CheckIcon } from "lucide-react";
 import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import type { EnvironmentId, ServerProvider } from "@t3tools/contracts";
 import {
@@ -24,7 +25,6 @@ import {
   type ProviderUpdateToastView,
 } from "./ProviderUpdateLaunchNotification.logic";
 import { Button } from "./ui/button";
-import { DotMatrix } from "./ui/dot-matrix";
 import { Spinner } from "./ui/spinner";
 
 type ProviderUpdateCommandResult = AtomCommandResult<
@@ -121,7 +121,7 @@ function EnvironmentUpdateRow({
       trailing = <Spinner className="size-4 text-muted-foreground" />;
       break;
     case "success":
-      trailing = <DotMatrix sizeRole="compact" aria-hidden state="success" />;
+      trailing = <CheckIcon aria-hidden="true" className="size-4 text-success" />;
       break;
     case "failed":
     case "unchanged":
diff --git a/apps/web/src/components/ServerUpdateAction.test.tsx b/apps/web/src/components/ServerUpdateAction.test.tsx
index 6681462dc..32a457d41 100644
--- a/apps/web/src/components/ServerUpdateAction.test.tsx
+++ b/apps/web/src/components/ServerUpdateAction.test.tsx
@@ -114,15 +114,15 @@ describe("ServerUpdateProgress", () => {
     );
 
     expect(markup).toContain("Restarting…");
-    // One row, no versions and no step rail. Restarting uses the shared
-    // neutral syncing pattern; only a completed outcome may turn green.
+    // One row, no versions and no step rail. Restarting uses the upstream
+    // foreground pulse; only a completed outcome may turn green.
     expect(markup).not.toContain("0.0.30");
     expect(markup).not.toContain("Resum");
     expect(markup).not.toContain("text-success");
     expect(markup).toContain("text-foreground");
-    expect(markup).toContain('data-state="syncing"');
-    expect(markup).not.toContain('data-state="success"');
-    expect(markup).not.toContain("animate-status-pulse");
+    expect(markup).toContain("bg-foreground");
+    expect(markup).toContain("animate-status-pulse");
+    expect(markup).toContain("motion-reduce:animate-none");
     expect(markup).not.toContain("animate-spin");
   });
 
@@ -140,7 +140,8 @@ describe("ServerUpdateProgress", () => {
 
     expect(markup).toContain("Downloading…");
     expect(markup).not.toContain("Install");
-    expect(markup).toContain('data-state="downloading"');
+    expect(markup).toContain("bg-foreground");
+    expect(markup).toContain("animate-status-pulse");
   });
 
   it("keeps the failure visible with its retryable error", () => {
@@ -159,7 +160,6 @@ describe("ServerUpdateProgress", () => {
     expect(markup).toContain('role="alert"');
     expect(markup).toContain("The package could not be verified.");
     expect(markup).not.toContain("animate-status-pulse");
-    expect(markup).not.toContain('data-state="syncing"');
-    expect(markup).not.toContain('data-state="downloading"');
+    expect(markup).toContain("bg-destructive");
   });
 });
diff --git a/apps/web/src/components/ServerUpdateAction.tsx b/apps/web/src/components/ServerUpdateAction.tsx
index 4a6c987fe..eaab3d70b 100644
--- a/apps/web/src/components/ServerUpdateAction.tsx
+++ b/apps/web/src/components/ServerUpdateAction.tsx
@@ -9,7 +9,6 @@ import { serverEnvironment } from "~/state/server";
 import { useAtomCommand } from "~/state/use-atom-command";
 import { manualServerUpdateCommand } from "~/versionSkew";
 import { Button } from "./ui/button";
-import { DotMatrix } from "./ui/dot-matrix";
 import { toastManager } from "./ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 
@@ -33,9 +32,9 @@ function updateFailureMessage(error: unknown): string {
 
 /**
  * One-row status for an in-flight server update: "Downloading…" then
- * "Restarting…". The update is a wait, not a warning: a single DotMatrix
- * marker and label, no step rail, no versions. Failure turns the row red
- * with the rollback reason.
+ * "Restarting…". The update is a wait, not a warning: a single pulsing dot
+ * and label, no step rail, no versions. Failure turns the row red with the
+ * rollback reason.
  */
 export function ServerUpdateProgress({
   state,
@@ -45,7 +44,7 @@ export function ServerUpdateProgress({
   if (state.status === "failed") {
     return (
       <div className="mt-1 flex min-w-0 items-center gap-2 text-xs text-destructive" role="alert">
-        <DotMatrix sizeRole="inline" aria-hidden state="error" />
+        <span className="size-1.5 shrink-0 rounded-full bg-destructive" aria-hidden="true" />
         <Tooltip>
           <TooltipTrigger render={<span className="min-w-0 truncate">{state.message}</span>} />
           <TooltipPopup side="top" className="max-w-80">
@@ -57,10 +56,9 @@ export function ServerUpdateProgress({
   }
   return (
     <div className="mt-1 flex items-center gap-2 text-xs font-medium text-foreground">
-      <DotMatrix
-        sizeRole="inline"
-        aria-hidden
-        state={state.stage === "resuming" ? "syncing" : "downloading"}
+      <span
+        className="size-1.5 shrink-0 animate-status-pulse rounded-full bg-foreground motion-reduce:animate-none"
+        aria-hidden="true"
       />
       <span>{serverUpdateStageLabel(state.stage)}</span>
     </div>
diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 7f6e0f824..c77049abc 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -22,6 +22,7 @@ import {
   resolveProjectStatusIndicator,
   resolveSidebarStageBadgeLabel,
   resolveThreadRowClassName,
+  resolveSidebarThreadActivityVisual,
   resolveSidebarThreadStatus,
   resolveThreadStatusPill,
   resolveWorkingStartedAt,
@@ -762,6 +763,24 @@ describe("resolveSidebarThreadStatus", () => {
     ).toBe("monitoring");
   });
 
+  it("keeps root work, delegation, and monitoring visually distinct", () => {
+    expect(resolveSidebarThreadActivityVisual("working", true)).toEqual({
+      label: "Working",
+      icon: "working",
+      className: "text-sky-600 dark:text-sky-400",
+    });
+    expect(resolveSidebarThreadActivityVisual("delegating", false)).toEqual({
+      label: "Delegating",
+      icon: "delegating",
+      className: "text-sky-600 dark:text-sky-400 opacity-75",
+    });
+    expect(resolveSidebarThreadActivityVisual("monitoring", false)).toEqual({
+      label: "Monitoring",
+      icon: null,
+      className: "text-sky-600 dark:text-sky-400",
+    });
+  });
+
   it("surfaces an actionable settled plan ahead of lingering background work", () => {
     expect(
       resolveSidebarThreadStatus({
@@ -1222,84 +1241,79 @@ describe("resolveThreadStatusPill", () => {
     },
   };
 
-  it("shows pending approval before all other statuses", () => {
+  it("restores distinct upstream attention colors", () => {
     expect(
       resolveThreadStatusPill({
-        thread: {
-          ...baseThread,
-          hasPendingApprovals: true,
-          hasPendingUserInput: true,
-        },
+        thread: { ...baseThread, hasPendingApprovals: true, hasPendingUserInput: true },
       }),
-    ).toMatchObject({ label: "Pending Approval", matrix: "warning" });
-  });
-
-  it("shows awaiting input when plan mode is blocked on user answers", () => {
+    ).toMatchObject({
+      label: "Pending Approval",
+      colorClass: "text-amber-600 dark:text-amber-300/90",
+      dotClass: "bg-amber-500 dark:bg-amber-300/90",
+      pulse: false,
+    });
     expect(
-      resolveThreadStatusPill({
-        thread: {
-          ...baseThread,
-          hasPendingUserInput: true,
-        },
-      }),
+      resolveThreadStatusPill({ thread: { ...baseThread, hasPendingUserInput: true } }),
     ).toMatchObject({
       label: "Awaiting Input",
-      matrix: "warning",
-      colorClass: "text-warning",
+      colorClass: "text-indigo-600 dark:text-indigo-300/90",
+      dotClass: "bg-indigo-500 dark:bg-indigo-300/90",
+      pulse: false,
     });
   });
 
-  it("falls back to working when the thread is actively running without blockers", () => {
-    expect(
-      resolveThreadStatusPill({
-        thread: baseThread,
-      }),
-      // A root turn uses neutral loading; the ring is reserved for delegation.
-    ).toMatchObject({
+  it("uses upstream sky pulses for running and connecting", () => {
+    expect(resolveThreadStatusPill({ thread: baseThread })).toMatchObject({
       label: "Working",
-      matrix: "loading",
-      colorClass: "text-status-active",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      dotClass: "bg-sky-500 dark:bg-sky-300/80",
+      pulse: true,
     });
-  });
-
-  it("shows connecting while the session is starting", () => {
     expect(
       resolveThreadStatusPill({
         thread: { ...baseThread, session: { ...baseThread.session, status: "starting" as const } },
       }),
-    ).toMatchObject({ label: "Connecting", matrix: "connecting" });
+    ).toMatchObject({ label: "Connecting", pulse: true });
   });
 
-  it("shows plan ready when a settled plan turn has a proposed plan ready for follow-up", () => {
+  it("keeps plan-ready semantics with the upstream violet treatment", () => {
     expect(
       resolveThreadStatusPill({
         thread: {
           ...baseThread,
           hasActionableProposedPlan: true,
           latestTurn: makeLatestTurn(),
-          session: {
-            ...baseThread.session,
-            status: "ready",
-            activeTurnId: null,
-          },
+          session: { ...baseThread.session, status: "ready", activeTurnId: null },
         },
       }),
-    ).toMatchObject({ label: "Plan Ready", matrix: "info" });
+    ).toMatchObject({
+      label: "Plan Ready",
+      colorClass: "text-violet-600 dark:text-violet-300/90",
+      dotClass: "bg-violet-500 dark:bg-violet-300/90",
+      pulse: false,
+    });
   });
 
-  it("uses the orchestration ring only for settled-turn background agents", () => {
+  it("pulses active background work but leaves monitoring static", () => {
+    const backgroundThread = {
+      ...baseThread,
+      session: { ...baseThread.session, status: "ready" as const, activeTurnId: null },
+    };
+    expect(
+      resolveThreadStatusPill({ thread: { ...backgroundThread, backgroundLiveness: "working" } }),
+    ).toMatchObject({
+      label: "Working",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      pulse: true,
+    });
     expect(
       resolveThreadStatusPill({
-        thread: {
-          ...baseThread,
-          backgroundLiveness: "working",
-          session: { ...baseThread.session, status: "ready", activeTurnId: null },
-        },
+        thread: { ...backgroundThread, backgroundLiveness: "monitoring" },
       }),
     ).toMatchObject({
-      label: "Working",
-      matrix: "orchestrating",
-      colorClass: "text-status-active",
+      label: "Monitoring",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      pulse: false,
     });
   });
 
@@ -1309,17 +1323,13 @@ describe("resolveThreadStatusPill", () => {
         thread: {
           ...baseThread,
           latestTurn: makeLatestTurn(),
-          session: {
-            ...baseThread.session,
-            status: "ready",
-            activeTurnId: null,
-          },
+          session: { ...baseThread.session, status: "ready", activeTurnId: null },
         },
       }),
     ).toBeNull();
   });
 
-  it("shows completed when there is an unseen completion and no active blocker", () => {
+  it("shows unseen completion with the upstream emerald treatment", () => {
     expect(
       resolveThreadStatusPill({
         thread: {
@@ -1327,14 +1337,15 @@ describe("resolveThreadStatusPill", () => {
           interactionMode: "default",
           latestTurn: makeLatestTurn(),
           lastVisitedAt: "2026-03-09T10:04:00.000Z",
-          session: {
-            ...baseThread.session,
-            status: "ready",
-            activeTurnId: null,
-          },
+          session: { ...baseThread.session, status: "ready", activeTurnId: null },
         },
       }),
-    ).toMatchObject({ label: "Completed", matrix: "success" });
+    ).toMatchObject({
+      label: "Completed",
+      colorClass: "text-emerald-600 dark:text-emerald-300/90",
+      dotClass: "bg-emerald-500 dark:bg-emerald-300/90",
+      pulse: false,
+    });
   });
 });
 
@@ -1371,20 +1382,23 @@ describe("resolveProjectStatusIndicator", () => {
         {
           label: "Completed",
           colorClass: "text-emerald-600",
-          matrix: "success",
+          dotClass: "bg-emerald-500",
+          pulse: false,
         },
         {
           label: "Pending Approval",
           colorClass: "text-amber-600",
-          matrix: "warning",
+          dotClass: "bg-amber-500",
+          pulse: false,
         },
         {
           label: "Working",
           colorClass: "text-sky-600",
-          matrix: "loading",
+          dotClass: "bg-sky-500",
+          pulse: true,
         },
       ]),
-    ).toMatchObject({ label: "Pending Approval", matrix: "warning" });
+    ).toMatchObject({ label: "Pending Approval", pulse: false });
   });
 
   it("prefers plan-ready over completed when no stronger action is needed", () => {
@@ -1393,15 +1407,17 @@ describe("resolveProjectStatusIndicator", () => {
         {
           label: "Completed",
           colorClass: "text-emerald-600",
-          matrix: "success",
+          dotClass: "bg-emerald-500",
+          pulse: false,
         },
         {
           label: "Plan Ready",
           colorClass: "text-violet-600",
-          matrix: "info",
+          dotClass: "bg-violet-500",
+          pulse: false,
         },
       ]),
-    ).toMatchObject({ label: "Plan Ready", matrix: "info" });
+    ).toMatchObject({ label: "Plan Ready", pulse: false });
   });
 });
 
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index a19486c77..92bfdebf9 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -14,7 +14,6 @@ import type { ThreadRouteTarget } from "../threadRoutes";
 import { cn } from "../lib/utils";
 import { isLatestTurnSettled } from "../session-logic";
 import { resolveServerBackedAppStageLabel } from "../branding.logic";
-import type { DotMatrixState } from "./ui/dot-matrix";
 
 export const THREAD_SELECTION_SAFE_SELECTOR = "[data-thread-item], [data-thread-selection-safe]";
 export const THREAD_JUMP_HINT_SHOW_DELAY_MS = 200;
@@ -136,7 +135,8 @@ export interface ThreadStatusPill {
     | "Awaiting Input"
     | "Plan Ready";
   colorClass: string;
-  matrix: DotMatrixState;
+  dotClass: string;
+  pulse: boolean;
 }
 
 // Rollup order mirrors the per-thread resolver exactly: attention states,
@@ -477,6 +477,41 @@ export type SidebarThreadStatus =
   | "failed"
   | "ready";
 
+export interface SidebarThreadActivityVisual {
+  readonly label: "Working" | "Delegating" | "Monitoring";
+  readonly icon: "working" | "delegating" | null;
+  readonly className: string;
+}
+
+/** Static flat-sidebar treatment for root work, delegated work, and monitoring. */
+export function resolveSidebarThreadActivityVisual(
+  status: SidebarThreadStatus,
+  isActive: boolean,
+): SidebarThreadActivityVisual | null {
+  switch (status) {
+    case "working":
+      return {
+        label: "Working",
+        icon: "working",
+        className: cn("text-sky-600 dark:text-sky-400", !isActive && "opacity-75"),
+      };
+    case "delegating":
+      return {
+        label: "Delegating",
+        icon: "delegating",
+        className: cn("text-sky-600 dark:text-sky-400", !isActive && "opacity-75"),
+      };
+    case "monitoring":
+      return {
+        label: "Monitoring",
+        icon: null,
+        className: "text-sky-600 dark:text-sky-400",
+      };
+    default:
+      return null;
+  }
+}
+
 type SidebarThreadStatusInput = Pick<
   SidebarThreadSummary,
   | "backgroundLiveness"
@@ -711,32 +746,36 @@ export function resolveThreadStatusPill(input: {
   if (thread.hasPendingApprovals) {
     return {
       label: "Pending Approval",
-      colorClass: "text-warning",
-      matrix: "warning",
+      colorClass: "text-amber-600 dark:text-amber-300/90",
+      dotClass: "bg-amber-500 dark:bg-amber-300/90",
+      pulse: false,
     };
   }
 
   if (thread.hasPendingUserInput) {
     return {
       label: "Awaiting Input",
-      colorClass: "text-warning",
-      matrix: "warning",
+      colorClass: "text-indigo-600 dark:text-indigo-300/90",
+      dotClass: "bg-indigo-500 dark:bg-indigo-300/90",
+      pulse: false,
     };
   }
 
   if (thread.session?.status === "running") {
     return {
       label: "Working",
-      colorClass: "text-status-active",
-      matrix: "loading",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      dotClass: "bg-sky-500 dark:bg-sky-300/80",
+      pulse: true,
     };
   }
 
   if (thread.session?.status === "starting") {
     return {
       label: "Connecting",
-      colorClass: "text-status-active",
-      matrix: "connecting",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      dotClass: "bg-sky-500 dark:bg-sky-300/80",
+      pulse: true,
     };
   }
 
@@ -750,8 +789,9 @@ export function resolveThreadStatusPill(input: {
   if (hasPlanReadyPrompt) {
     return {
       label: "Plan Ready",
-      colorClass: "text-status-info",
-      matrix: "info",
+      colorClass: "text-violet-600 dark:text-violet-300/90",
+      dotClass: "bg-violet-500 dark:bg-violet-300/90",
+      pulse: false,
     };
   }
 
@@ -762,24 +802,27 @@ export function resolveThreadStatusPill(input: {
   if (thread.backgroundLiveness === "working") {
     return {
       label: "Working",
-      colorClass: "text-status-active",
-      matrix: "orchestrating",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      dotClass: "bg-sky-500 dark:bg-sky-300/80",
+      pulse: true,
     };
   }
 
   if (thread.backgroundLiveness === "monitoring") {
     return {
       label: "Monitoring",
-      colorClass: "text-status-active",
-      matrix: "listening",
+      colorClass: "text-sky-600 dark:text-sky-300/80",
+      dotClass: "bg-sky-500 dark:bg-sky-300/80",
+      pulse: false,
     };
   }
 
   if (hasUnseenCompletion(thread)) {
     return {
       label: "Completed",
-      colorClass: "text-success",
-      matrix: "success",
+      colorClass: "text-emerald-600 dark:text-emerald-300/90",
+      dotClass: "bg-emerald-500 dark:bg-emerald-300/90",
+      pulse: false,
     };
   }
 
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index be9469872..69b1a2b09 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -38,10 +38,13 @@ import {
   CheckIcon,
   ChevronDownIcon,
   CircleAlertIcon,
+  CircleCheckIcon,
+  CircleDashedIcon,
   ClockIcon,
   FolderIcon,
   FolderPlusIcon,
   GitBranchIcon,
+  GitForkIcon,
   MessageSquareIcon,
   PinIcon,
   PlusIcon,
@@ -135,6 +138,7 @@ import {
   reduceSidebarProjectScopeMenuState,
   resolveAdjacentThreadId,
   resolveSettledTimestamp,
+  resolveSidebarThreadActivityVisual,
   resolveSidebarThreadStatus,
   searchSidebarThreadsByTitle,
   shouldCreateNewThreadInCurrentProject,
@@ -177,7 +181,6 @@ import {
 import { useThreadRunningTerminalIds } from "../state/terminalSessions";
 import { stackedThreadToast, toastManager } from "./ui/toast";
 import { Button } from "./ui/button";
-import { DotMatrix } from "./ui/dot-matrix";
 import { Input } from "./ui/input";
 import {
   Combobox,
@@ -848,65 +851,49 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   const isInFlight = status === "working" || status === "delegating" || status === "monitoring";
   const shouldRecede =
     (status === "ready" || isInFlight) && !isUnread && !isWoke && !props.isActive && !isSelected;
-  // Status hues follow lifecycle semantics. Active work uses the theme accent,
-  // Plan Ready uses Info, and user-blocking Input and Approval use warning.
-  // Distinct glyphs keep root work, delegation, and monitoring truthful.
+  // Status hues follow upstream's system-wide convention (amber approval,
+  // indigo input, sky working, violet plan-ready). Pylon-only delegation keeps
+  // a distinct static icon and label after removing its orchestrating matrix.
+  const activityStatus = resolveSidebarThreadActivityVisual(status, props.isActive);
   const topStatus =
-    status === "working"
+    activityStatus ??
+    (status === "plan-ready"
       ? {
-          label: "Working",
-          icon: "working" as const,
-          className: "text-status-active-foreground-sidebar",
+          label: "Plan Ready",
+          icon: null,
+          className: "text-violet-600 dark:text-violet-300",
         }
-      : status === "delegating"
+      : status === "approval"
         ? {
-            label: "Working",
-            icon: "delegating" as const,
-            className: "text-status-active-foreground-sidebar",
+            label: "Approval",
+            icon: null,
+            className: "text-amber-700 dark:text-amber-300",
           }
-        : status === "monitoring"
+        : status === "input"
           ? {
-              label: "Monitoring",
-              icon: "monitoring" as const,
-              className: "text-status-active-foreground-sidebar",
+              label: "Input",
+              icon: null,
+              className: "text-indigo-600 dark:text-indigo-300",
             }
-          : status === "plan-ready"
+          : status === "failed"
             ? {
-                label: "Plan Ready",
-                icon: "info" as const,
-                className: "text-status-info-sidebar",
+                label: "Failed",
+                icon: null,
+                className: "text-red-700 dark:text-red-300",
               }
-            : status === "approval"
+            : isWoke
               ? {
-                  label: "Approval",
-                  icon: "approval" as const,
-                  className: "text-warning",
+                  label: "Woke",
+                  icon: "woke" as const,
+                  className: "text-amber-700 dark:text-amber-300",
                 }
-              : status === "input"
+              : isUnread
                 ? {
-                    label: "Input",
-                    icon: "input" as const,
-                    className: "text-warning",
+                    label: "Done",
+                    icon: "done" as const,
+                    className: "text-emerald-700 dark:text-emerald-300",
                   }
-                : status === "failed"
-                  ? {
-                      label: "Failed",
-                      icon: "failed" as const,
-                      className: "text-destructive",
-                    }
-                  : isWoke
-                    ? {
-                        label: "Woke",
-                        icon: "woke" as const,
-                        className: "text-warning",
-                      }
-                    : isUnread
-                      ? {
-                          label: "Done",
-                          icon: "done" as const,
-                          className: "text-success",
-                        }
-                      : null;
+                : null);
   const isWokeStatus = topStatus?.icon === "woke";
 
   const branchMismatch = resolveLocalCheckoutBranchMismatch({
@@ -1211,7 +1198,12 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
       data-testid={`sidebar-terminal-status-${thread.id}`}
       className={cn("inline-flex shrink-0 items-center justify-center", terminalStatus.colorClass)}
     >
-      <DotMatrix sizeRole="compact" aria-hidden state="terminal-active" />
+      <TerminalIcon
+        className={cn(
+          "size-3.5",
+          terminalStatus.pulse && "animate-status-pulse motion-reduce:animate-none",
+        )}
+      />
     </span>
   ) : null;
   const pinIndicator = props.isPinned ? (
@@ -1490,41 +1482,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                         )}
                       >
                         {topStatus.icon === "working" ? (
-                          <DotMatrix
-                            sizeRole="compact"
-                            aria-hidden
-                            state="loading"
-                            className="text-status-active-sidebar"
-                          />
+                          <CircleDashedIcon aria-hidden className="size-4 shrink-0" />
                         ) : topStatus.icon === "delegating" ? (
-                          <DotMatrix
-                            sizeRole="compact"
-                            aria-hidden
-                            state="orchestrating"
-                            className="text-status-active-sidebar"
-                          />
-                        ) : topStatus.icon === "monitoring" ? (
-                          <DotMatrix
-                            sizeRole="compact"
-                            aria-hidden
-                            state="listening"
-                            className="text-status-active-sidebar"
-                          />
-                        ) : topStatus.icon === "approval" ? (
-                          <DotMatrix sizeRole="compact" aria-hidden state="warning" />
-                        ) : topStatus.icon === "input" ? (
-                          <DotMatrix sizeRole="compact" aria-hidden state="warning" />
-                        ) : topStatus.icon === "info" ? (
-                          <DotMatrix
-                            sizeRole="compact"
-                            aria-hidden
-                            state="info"
-                            className="text-status-info-sidebar"
-                          />
-                        ) : topStatus.icon === "failed" ? (
-                          <DotMatrix sizeRole="compact" aria-hidden state="error" />
+                          <GitForkIcon aria-hidden className="size-4 shrink-0" />
                         ) : topStatus.icon === "done" ? (
-                          <DotMatrix sizeRole="compact" aria-hidden state="success" />
+                          <CircleCheckIcon aria-hidden className="size-4 shrink-0" />
                         ) : null}
                         {/* The label alone is the live region: a role="status"
                             wrapper around the ticking duration would make
diff --git a/apps/web/src/components/ThreadStatusIndicators.test.tsx b/apps/web/src/components/ThreadStatusIndicators.test.tsx
index f120a2ea0..53ced411b 100644
--- a/apps/web/src/components/ThreadStatusIndicators.test.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.test.tsx
@@ -3,8 +3,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vite-plus/test";
 
 import {
-  sidebarStatusColorClass,
-  statusForegroundColorClass,
+  terminalStatusFromRunningIds,
   ThreadStatusLabel,
   ThreadWorktreeIndicator,
 } from "./ThreadStatusIndicators";
@@ -44,35 +43,38 @@ describe("ThreadWorktreeIndicator", () => {
 });
 
 describe("ThreadStatusLabel", () => {
-  it("maps aggregate active and info status colors onto sidebar roles", () => {
-    expect(sidebarStatusColorClass("text-status-active")).toBe("text-status-active-sidebar");
-    expect(sidebarStatusColorClass("text-status-info")).toBe("text-status-info-sidebar");
-    expect(sidebarStatusColorClass("text-warning")).toBe("text-warning");
-    expect(statusForegroundColorClass("text-status-active")).toBe("text-status-active-foreground");
-    expect(statusForegroundColorClass("text-status-active-sidebar")).toBe(
-      "text-status-active-foreground-sidebar",
-    );
-  });
-
   const status = {
     label: "Working",
-    colorClass: "text-status-active",
-    matrix: "loading" as const,
+    colorClass: "text-sky-600 dark:text-sky-300/80",
+    dotClass: "bg-sky-500 dark:bg-sky-300/80",
+    pulse: true,
   };
 
-  it("uses separate readable label and indicator roles on the sidebar", () => {
-    const markup = renderToStaticMarkup(<ThreadStatusLabel status={status} surface="sidebar" />);
+  it("renders the upstream hue and reduced-motion-safe pulse", () => {
+    const markup = renderToStaticMarkup(<ThreadStatusLabel status={status} />);
 
-    expect(markup).toContain("text-status-active-sidebar");
-    expect(markup).toContain("text-status-active-foreground-sidebar");
-    expect(markup).not.toMatch(/(?:^|\s)text-status-active(?:\s|$)/);
+    expect(markup).toContain("text-sky-600");
+    expect(markup).toContain("bg-sky-500");
+    expect(markup).toContain("animate-status-pulse");
+    expect(markup).toContain("motion-reduce:animate-none");
+    expect(markup).not.toContain('data-slot="dot-matrix"');
   });
 
-  it("uses separate readable label and indicator roles on the canvas", () => {
-    const markup = renderToStaticMarkup(<ThreadStatusLabel status={status} />);
+  it("keeps compact static statuses static", () => {
+    const markup = renderToStaticMarkup(
+      <ThreadStatusLabel status={{ ...status, label: "Monitoring", pulse: false }} compact />,
+    );
+
+    expect(markup).toContain("size-[9px]");
+    expect(markup).not.toContain("animate-status-pulse");
+  });
 
-    expect(markup).toMatch(/(?:^|\s)text-status-active(?:\s|$)/);
-    expect(markup).toContain("text-status-active-foreground");
-    expect(markup).not.toContain("text-status-active-sidebar");
+  it("restores the upstream teal terminal signal", () => {
+    expect(terminalStatusFromRunningIds(["terminal-1"])).toEqual({
+      label: "Terminal process running",
+      colorClass: "text-teal-600 dark:text-teal-300/90",
+      pulse: true,
+    });
+    expect(terminalStatusFromRunningIds([])).toBeNull();
   });
 });
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index 792d797c2..8dde2ecf1 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -6,7 +6,7 @@ import {
 import { pullRequestDetailToVcsStatus } from "@t3tools/client-runtime/state/pull-requests";
 import type { EnvironmentId, ThreadLinkedPullRequest, VcsStatusResult } from "@t3tools/contracts";
 import { Atom } from "effect/unstable/reactivity";
-import { CloudIcon, FolderGit2Icon, GitPullRequestIcon } from "lucide-react";
+import { CloudIcon, FolderGit2Icon, GitPullRequestIcon, TerminalIcon } from "lucide-react";
 import { useMemo } from "react";
 import { appAtomRegistry } from "../rpc/atomRegistry";
 import { useEnvironment, usePrimaryEnvironmentId } from "../state/environments";
@@ -21,7 +21,6 @@ import { resolveThreadStatusPill, type ThreadStatusPill } from "./Sidebar.logic"
 import type { SidebarThreadSummary } from "../types";
 import { formatWorktreePathForDisplay } from "../worktreeCleanup";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { DotMatrix } from "./ui/dot-matrix";
 
 export interface PrStatusIndicator {
   label: string;
@@ -35,6 +34,7 @@ export interface PrStatusIndicator {
 export interface TerminalStatusIndicator {
   label: "Terminal process running";
   colorClass: string;
+  pulse: boolean;
 }
 
 export type ThreadPr = VcsStatusResult["pr"];
@@ -424,7 +424,8 @@ export function terminalStatusFromRunningIds(
   }
   return {
     label: "Terminal process running",
-    colorClass: "text-muted-foreground",
+    colorClass: "text-teal-600 dark:text-teal-300/90",
+    pulse: true,
   };
 }
 
@@ -462,42 +463,13 @@ export function ThreadWorktreeIndicator({
   );
 }
 
-export function sidebarStatusColorClass(colorClass: string): string {
-  return colorClass
-    .split(" ")
-    .map((token) => {
-      if (token === "text-status-active") return "text-status-active-sidebar";
-      if (token === "text-status-info") return "text-status-info-sidebar";
-      return token;
-    })
-    .join(" ");
-}
-
-export function statusForegroundColorClass(colorClass: string): string {
-  return colorClass
-    .split(" ")
-    .map((token) => {
-      if (token === "text-status-active") return "text-status-active-foreground";
-      if (token === "text-status-active-sidebar") {
-        return "text-status-active-foreground-sidebar";
-      }
-      return token;
-    })
-    .join(" ");
-}
-
 export function ThreadStatusLabel({
   status,
   compact = false,
-  surface = "default",
 }: {
   status: ThreadStatusPill;
   compact?: boolean;
-  surface?: "default" | "sidebar";
 }) {
-  const indicatorColorClass =
-    surface === "sidebar" ? sidebarStatusColorClass(status.colorClass) : status.colorClass;
-  const labelColorClass = statusForegroundColorClass(indicatorColorClass);
   if (compact) {
     return (
       <Tooltip>
@@ -506,15 +478,14 @@ export function ThreadStatusLabel({
             <span
               role="img"
               aria-label={status.label}
-              className={`inline-flex size-3.5 shrink-0 items-center justify-center ${indicatorColorClass}`}
+              className={`inline-flex size-3.5 shrink-0 items-center justify-center ${status.colorClass}`}
             />
           }
         >
-          <DotMatrix
-            sizeRole="compact"
-            state={status.matrix}
-            aria-hidden
-            className={indicatorColorClass}
+          <span
+            className={`size-[9px] rounded-full ${status.dotClass} ${
+              status.pulse ? "animate-status-pulse motion-reduce:animate-none" : ""
+            }`}
           />
         </TooltipTrigger>
         <TooltipPopup side="top">{status.label}</TooltipPopup>
@@ -529,17 +500,16 @@ export function ThreadStatusLabel({
           <span
             role="img"
             aria-label={status.label}
-            className="inline-flex items-center gap-1 text-[10px]"
+            className={`inline-flex items-center gap-1 text-[10px] ${status.colorClass}`}
           />
         }
       >
-        <DotMatrix
-          sizeRole="compact"
-          state={status.matrix}
-          aria-hidden
-          className={indicatorColorClass}
+        <span
+          className={`size-1.5 rounded-full ${status.dotClass} ${
+            status.pulse ? "animate-status-pulse motion-reduce:animate-none" : ""
+          }`}
         />
-        <span className={`hidden md:inline ${labelColorClass}`}>{status.label}</span>
+        <span className="hidden md:inline">{status.label}</span>
       </TooltipTrigger>
       <TooltipPopup side="top">{status.label}</TooltipPopup>
     </Tooltip>
@@ -656,7 +626,11 @@ export function ThreadRowTrailingStatus({ thread }: { thread: SidebarThreadSumma
               />
             }
           >
-            <DotMatrix sizeRole="compact" aria-hidden state="terminal-active" />
+            <TerminalIcon
+              className={`size-3 ${
+                terminalStatus.pulse ? "animate-status-pulse motion-reduce:animate-none" : ""
+              }`}
+            />
           </TooltipTrigger>
           <TooltipPopup side="top">{terminalStatus.label}</TooltipPopup>
         </Tooltip>
diff --git a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx b/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
index bbbe872f0..33af6cc7b 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
@@ -56,7 +56,7 @@ describe("ComposerTasksBadge", () => {
     expect(markup).toContain('data-task-status="inProgress"');
     expect(markup).toContain('data-task-status="pending"');
     expect(markup).toContain("bg-success");
-    expect(markup).toContain("bg-status-active");
+    expect(markup).toContain("bg-primary");
     expect(markup).toContain("bg-muted-foreground/25");
   });
 
@@ -130,13 +130,13 @@ describe("ComposerTasksBadge", () => {
     expect(markup).toContain("focus-visible:ring-inset");
     expect(markup).toContain("lucide-chevron-down");
     expect(markup).not.toContain('data-task-progress-segments="true"');
-    expect(markup).toContain('data-state="success"');
-    expect(markup).toContain('data-state="loading"');
-    expect(markup).toContain('data-state="idle"');
-    expect(markup.match(/<circle/g)).toHaveLength(75);
-    expect(markup).toContain('data-slot="dot-matrix"');
-    expect(markup).toContain('data-size-role="compact"');
-    expect(markup).toContain("size-[max(12px,0.85em)]");
+    expect(markup).toContain("✓");
+    expect(markup).toContain("●");
+    expect(markup).toContain("○");
+    expect(markup).toContain("text-success");
+    expect(markup).toContain("text-primary");
+    expect(markup).toContain("text-muted-foreground/40");
+    expect(markup).not.toContain('data-slot="dot-matrix"');
     expect(markup).toContain("Completed:");
     expect(markup).toContain("In progress:");
     expect(markup).toContain("Pending:");
@@ -199,11 +199,12 @@ describe("ComposerTasksBadge", () => {
             : "Waiting on external system";
       expect(markup).toContain(label);
       if (waitingOn === "user") {
-        expect(markup).toContain('data-state="warning"');
+        expect(markup).toContain("●");
         expect(markup).toContain("text-warning");
       } else {
-        expect(markup).toContain('data-state="waiting"');
-        expect(markup).not.toContain('data-state="warning"');
+        expect(markup).toContain("○");
+        expect(markup).toContain("text-muted-foreground/50");
+        expect(markup).not.toContain("text-warning");
       }
     },
   );
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index d0c58d1c2..810eeb15c 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -1,5 +1,9 @@
 import { CheckpointRef, EnvironmentId, MessageId, TurnId } from "@t3tools/contracts";
 import { codexFeedbackMessage } from "@t3tools/client-runtime/state/threads";
+import type {
+  AgentPanelModel,
+  RuntimeSubagent,
+} from "@t3tools/client-runtime/state/subagentRuntime";
 import { createRef, type ReactNode, type Ref } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { beforeAll, describe, expect, it, vi } from "vite-plus/test";
@@ -174,6 +178,43 @@ beforeAll(async () => {
 const ACTIVE_THREAD_ENVIRONMENT_ID = EnvironmentId.make("environment-local");
 const MESSAGE_CREATED_AT = "2026-03-17T19:12:28.000Z";
 
+function buildRuntimeSubagent(
+  id: string,
+  status: RuntimeSubagent["status"],
+  kind: RuntimeSubagent["kind"] = "subagent",
+): RuntimeSubagent {
+  return {
+    id,
+    kind,
+    title: id,
+    role: null,
+    model: null,
+    effort: null,
+    messageable: false,
+    status,
+    activationCount: 1,
+    usage: null,
+    progress: null,
+    lastToolName: null,
+    result: null,
+    error: null,
+    outputFile: null,
+    parentAgentId: null,
+    agentIndex: null,
+    phaseIndex: null,
+    phaseTitle: null,
+    attempt: null,
+    workflowName: null,
+    phases: [],
+    runHandles: null,
+    recentActivity: [],
+    firstSeenAt: MESSAGE_CREATED_AT,
+    startedAt: MESSAGE_CREATED_AT,
+    completedAt: status === "completed" ? MESSAGE_CREATED_AT : null,
+    updatedAt: MESSAGE_CREATED_AT,
+  };
+}
+
 function buildProps() {
   return {
     isWorking: false,
@@ -924,6 +965,58 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Work Log");
   });
 
+  it("reports a coordinator-only pending workflow as queued", () => {
+    const workflow = buildRuntimeSubagent("workflow-1", "pending", "workflow");
+    const completedMember = {
+      ...buildRuntimeSubagent("member-1", "completed"),
+      parentAgentId: workflow.id,
+    };
+    const agentPanelModel: AgentPanelModel = {
+      workflows: [
+        {
+          workflow,
+          phases: [],
+          unphasedMembers: [completedMember],
+        },
+      ],
+      directAgents: [],
+      runningCount: 0,
+      waitingCount: 0,
+      idleCount: 0,
+      settledCount: 1,
+      totalTokens: 0,
+      hasAgents: true,
+      liveCount: 1,
+    };
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        agentPanelModel={agentPanelModel}
+        timelineEntries={[
+          {
+            id: "workflow-spawn",
+            kind: "work",
+            createdAt: MESSAGE_CREATED_AT,
+            entry: {
+              id: "workflow-spawn",
+              createdAt: MESSAGE_CREATED_AT,
+              label: "Start workflow",
+              tone: "info",
+              agentSpawn: {
+                workflowId: workflow.id,
+                agentTaskIds: [workflow.id, completedMember.id],
+              },
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain("Kicked off 1 subagent");
+    expect(markup).toContain(">queued<");
+    expect(markup).not.toContain(">waiting<");
+  });
+
   it("summarizes changed files in one line", () => {
     const markup = renderToStaticMarkup(
       <MessagesTimeline
@@ -1027,9 +1120,8 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Ran 2 commands");
     // Neutral: the group keeps its command glyph instead of swapping to a
     // failure glyph, and neither the heading nor the icon wrapper goes red once
-    // the group ends in an ordinary command failure. Pylon renders the command
-    // summary as a DotMatrix, so assert its state rather than a lucide class.
-    expect(markup).toContain('data-state="terminal"');
+    // the group ends in an ordinary command failure.
+    expect(markup).toContain("lucide-terminal");
     expect(markup).not.toMatch(/font-medium text-destructive/);
     expect(markup).not.toMatch(/size-6 shrink-0 items-center justify-center text-destructive/);
     // The failure stays discoverable for screen readers.
@@ -1218,9 +1310,8 @@ describe("MessagesTimeline", () => {
 
     expect(markup).toContain("Running pnpm");
     expect(markup).toContain("tool call failed");
-    expect(markup).toContain('data-state="terminal"');
-    expect(markup).toContain("text-inherit");
-    expect(markup).toContain('data-state="error"');
+    expect(markup).toContain("lucide-x");
+    expect(markup).not.toContain('data-slot="dot-matrix"');
   });
 
   it("renders transcript task progress as the original solid segments", () => {
@@ -1256,7 +1347,7 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain('data-task-status="completed"');
     expect(markup).toContain('data-task-status="inProgress"');
     expect(markup).toContain('data-task-status="pending"');
-    expect(markup).toContain("bg-status-active");
+    expect(markup).toContain("bg-primary");
   });
 
   it.each([
@@ -1346,14 +1437,10 @@ describe("MessagesTimeline", () => {
     expect(assistantIndex).toBeGreaterThan(workingIndex);
     expect(markup).toContain('class="border-b border-border/60 pb-2 pt-1"');
     expect(markup).toContain(
-      'class="flex items-center gap-2 px-1 text-sm leading-relaxed text-status-active-foreground tabular-nums"',
+      'class="px-1 text-sm leading-relaxed text-muted-foreground tabular-nums"',
     );
     expect(markup).not.toContain('class="pt-0.5 pb-5 pl-1.5"');
-    const workingMatrixRoot = markup.match(/<span[^>]*data-state="loading"[^>]*>/)?.[0];
-    expect(workingMatrixRoot).toBeDefined();
-    const workingClassTokens = /class="([^"]+)"/.exec(workingMatrixRoot ?? "")?.[1]?.split(" ");
-    expect(workingClassTokens).toContain("size-[max(16px,1.1em)]");
-    expect(workingMatrixRoot).toContain('data-size-role="prominent"');
+    expect(markup).not.toContain('data-slot="dot-matrix"');
   });
 
   it("aligns the iconless Thinking row with the working timer", () => {
@@ -1368,7 +1455,7 @@ describe("MessagesTimeline", () => {
 
     expect(markup).toContain("Working for");
     expect(markup).toContain("Thinking");
-    expect(markup).toContain('data-state="loading"');
+    expect(markup).not.toContain('data-slot="dot-matrix"');
     expect(markup).toContain("gap-1.5 py-0.5 px-1");
   });
 
@@ -1482,11 +1569,9 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain('data-state="error"');
+    expect(markup).toContain("lucide-x");
     expect(markup).toContain('aria-label="Tool call failed"');
-    // Ordinary tool failures render muted, not red. Pylon's marker is a small
-    // DotMatrix status dot that is itself destructive-coloured, so assert on the
-    // row treatment rather than on the absence of the class anywhere in the tree.
+    // Ordinary tool failures keep a muted row even though the outcome glyph is red.
     expect(markup).not.toMatch(/font-medium text-destructive/);
     expect(markup).not.toMatch(/size-6 shrink-0 items-center justify-center text-destructive/);
   });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 55fdec430..429238a4a 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -50,6 +50,7 @@ import {
 import ChatMarkdown from "../ChatMarkdown";
 import {
   BotIcon,
+  CheckIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   CircleAlertIcon,
@@ -57,12 +58,15 @@ import {
   GlobeIcon,
   HammerIcon,
   MessageCircleIcon,
+  MinusIcon,
   MousePointerClickIcon,
   PaintbrushIcon,
   SearchIcon,
   SquarePenIcon,
+  TerminalIcon,
   Undo2Icon,
   WrenchIcon,
+  XIcon,
   ZapIcon,
 } from "lucide-react";
 import { Button } from "../ui/button";
@@ -111,7 +115,6 @@ import { cn } from "~/lib/utils";
 import { useUiStateStore } from "~/uiStateStore";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { formatChatTimestampTooltip, formatDayAwareTimestamp } from "../../timestampFormat";
-import { DotMatrix, type DotMatrixState } from "../ui/dot-matrix";
 import {
   TASK_PROGRESS_STATUS_LABEL,
   keyedTaskProgressSteps,
@@ -1374,20 +1377,17 @@ function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "workin
   return (
     <div>
       <div className="border-b border-border/60 pb-2 pt-1">
-        <div className="flex items-center gap-2 px-1 text-sm leading-relaxed text-status-active-foreground tabular-nums">
-          <DotMatrix sizeRole="prominent" aria-hidden state="loading" />
-          <span>
-            {row.createdAt ? (
-              <>
-                Working for <WorkingTimer createdAt={row.createdAt} />
-              </>
-            ) : (
-              "Working..."
-            )}
-            {workingStepLabel ? (
-              <span className="ml-2 text-muted-foreground/55">· {workingStepLabel}</span>
-            ) : null}
-          </span>
+        <div className="px-1 text-sm leading-relaxed text-muted-foreground tabular-nums">
+          {row.createdAt ? (
+            <>
+              Working for <WorkingTimer createdAt={row.createdAt} />
+            </>
+          ) : (
+            "Working..."
+          )}
+          {workingStepLabel ? (
+            <span className="ml-2 text-muted-foreground/55">· {workingStepLabel}</span>
+          ) : null}
         </div>
       </div>
       {row.showThinking ? (
@@ -1493,29 +1493,23 @@ function LiveActivityRow({
   failed?: boolean;
 }) {
   return (
-    <div className="flex min-w-0 max-w-full items-center gap-1.5">
-      <div className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
-        <LiveActivityContent label={label} iconName={iconName} />
-        <div
-          aria-hidden
-          className="live-activity-focus pointer-events-none absolute inset-y-0 select-none"
-        >
-          <div className="live-activity-focus-counter">
-            <div className="live-activity-focus-aligned">
-              <LiveActivityContent label={label} iconName={iconName} highlighted />
-            </div>
+    <div className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
+      <LiveActivityContent
+        label={label}
+        iconName={iconName}
+        failed={failed}
+        announceFailure={failed}
+      />
+      <div
+        aria-hidden
+        className="live-activity-focus pointer-events-none absolute inset-y-0 select-none"
+      >
+        <div className="live-activity-focus-counter">
+          <div className="live-activity-focus-aligned">
+            <LiveActivityContent label={label} iconName={iconName} failed={failed} highlighted />
           </div>
         </div>
       </div>
-      {failed ? (
-        <span
-          className="flex size-4 shrink-0 items-center justify-center"
-          role="img"
-          aria-label="Tool call failed"
-        >
-          <DotMatrix sizeRole="inline" aria-hidden state="error" />
-        </span>
-      ) : null}
     </div>
   );
 }
@@ -1527,30 +1521,38 @@ function ThinkingActivityRow() {
 function LiveActivityContent({
   label,
   iconName,
+  failed = false,
+  announceFailure = false,
   highlighted = false,
 }: {
   label: string;
   iconName: WorkEntryIconName | undefined;
+  failed?: boolean;
+  announceFailure?: boolean;
   highlighted?: boolean;
 }) {
+  const resolvedIconName = failed ? "x" : iconName;
+
   return (
     <div
       className={cn(
         "flex min-h-6 min-w-0 items-center gap-1.5 py-0.5",
-        iconName ? "px-0.5" : "px-1",
+        resolvedIconName ? "px-0.5" : "px-1",
         highlighted ? "text-foreground" : "text-secondary-label",
       )}
     >
-      {iconName ? (
+      {resolvedIconName ? (
         <span
           className={cn(
             "flex size-6 shrink-0 items-center justify-center",
             highlighted ? "text-foreground" : "text-icon-muted",
           )}
+          role={announceFailure ? "img" : undefined}
+          aria-label={announceFailure ? "Tool call failed" : undefined}
         >
           <WorkEntryIconSvg
-            name={iconName}
-            className={cn("block shrink-0 stroke-[1.8]", !highlighted && "opacity-70")}
+            name={resolvedIconName}
+            className={cn("block size-4 shrink-0 stroke-[1.8]", !highlighted && "opacity-70")}
           />
         </span>
       ) : null}
@@ -1623,19 +1625,10 @@ function WorkGroupToggleTimelineRow({
         <span className="flex size-6 shrink-0 items-center justify-center text-icon-muted">
           <WorkEntryIconSvg
             name={toolGroupSummaryIconName(row.summaryKind)}
-            className="shrink-0 stroke-[1.8] opacity-70"
+            className="size-4 shrink-0 stroke-[1.8] opacity-70"
           />
         </span>
         <span className="min-w-0 flex-1 truncate text-secondary-label">{row.summary}</span>
-        {row.hasFailure ? (
-          <span
-            className="flex size-4 shrink-0 items-center justify-center"
-            role="img"
-            aria-label="Tool call failed"
-          >
-            <DotMatrix sizeRole="inline" aria-hidden state="error" />
-          </span>
-        ) : null}
       </button>
     );
   }
@@ -2211,45 +2204,37 @@ type WorkEntryIconName =
   | "square-pen"
   | "terminal"
   | "wrench"
+  | "x"
   | "zap";
 
 function WorkEntryIconSvg({ name, className }: { name: WorkEntryIconName; className: string }) {
-  const fixedIconClassName = cn("size-4", className);
   switch (name) {
     case "bot":
-      return <BotIcon className={fixedIconClassName} aria-hidden />;
+      return <BotIcon className={className} aria-hidden />;
     case "check":
-      return <DotMatrix sizeRole="inline" aria-hidden state="success" className={className} />;
+      return <CheckIcon className={className} aria-hidden />;
     case "circle-alert":
-      return <CircleAlertIcon className={fixedIconClassName} aria-hidden />;
+      return <CircleAlertIcon className={className} aria-hidden />;
     case "eye":
-      return <EyeIcon className={fixedIconClassName} aria-hidden />;
+      return <EyeIcon className={className} aria-hidden />;
     case "globe":
-      return <GlobeIcon className={fixedIconClassName} aria-hidden />;
+      return <GlobeIcon className={className} aria-hidden />;
     case "hammer":
-      return <HammerIcon className={fixedIconClassName} aria-hidden />;
+      return <HammerIcon className={className} aria-hidden />;
     case "message-circle":
-      return <MessageCircleIcon className={fixedIconClassName} aria-hidden />;
+      return <MessageCircleIcon className={className} aria-hidden />;
     case "search":
-      return <SearchIcon className={fixedIconClassName} aria-hidden />;
+      return <SearchIcon className={className} aria-hidden />;
     case "square-pen":
-      return <SquarePenIcon className={fixedIconClassName} aria-hidden />;
+      return <SquarePenIcon className={className} aria-hidden />;
     case "terminal":
-      // Live rows duplicate this icon inside their moving foreground mask.
-      // Inherit the row tone so the matrix brightens with the label instead of
-      // remaining pinned to its standalone muted terminal color.
-      return (
-        <DotMatrix
-          sizeRole="inline"
-          aria-hidden
-          state="terminal"
-          className={cn(className, "text-inherit")}
-        />
-      );
+      return <TerminalIcon className={className} aria-hidden />;
     case "wrench":
-      return <WrenchIcon className={fixedIconClassName} aria-hidden />;
+      return <WrenchIcon className={className} aria-hidden />;
+    case "x":
+      return <XIcon className={className} aria-hidden />;
     case "zap":
-      return <ZapIcon className={fixedIconClassName} aria-hidden />;
+      return <ZapIcon className={className} aria-hidden />;
   }
 }
 
@@ -2621,16 +2606,7 @@ const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: Time
     workflowGroup?.workflow.workflowName ?? workflowGroup?.workflow.title ?? null;
 
   const coordinatorWorking = coordinatorStatus === "running";
-  const hasActiveWork = livePhase !== undefined || running > 0 || coordinatorWorking;
-  const matrix: DotMatrixState = live
-    ? hasActiveWork
-      ? "orchestrating"
-      : pending > 0 || coordinatorStatus === "pending"
-        ? "queued"
-        : "waiting"
-    : failed > 0
-      ? "error"
-      : "success";
+  const dotClass = live ? "bg-info" : failed > 0 ? "bg-destructive" : "bg-success";
   const lead = live
     ? `Kicked off ${agentCount} subagent${agentCount === 1 ? "" : "s"}`
     : `Ran ${agentCount} subagent${agentCount === 1 ? "" : "s"}`;
@@ -2641,11 +2617,13 @@ const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: Time
         ? `${running} working`
         : pending > 0
           ? `${pending} queued`
-          : waiting > 0
-            ? `${waiting} waiting`
-            : coordinatorWorking
-              ? "working"
-              : "waiting"
+          : coordinatorStatus === "pending"
+            ? "queued"
+            : waiting > 0
+              ? `${waiting} waiting`
+              : coordinatorWorking
+                ? "working"
+                : "waiting"
     : failed > 0
       ? `${failed} failed`
       : "✓ completed";
@@ -2656,7 +2634,7 @@ const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: Time
       onClick={onOpenAgents}
       className="flex w-full items-center gap-2 rounded-md border border-border/60 bg-card/50 px-2.5 py-1.5 text-left text-[13px] transition hover:bg-accent/50"
     >
-      <DotMatrix sizeRole="inline" aria-hidden state={matrix} />
+      <span aria-hidden className={cn("size-1.5 shrink-0 rounded-full", dotClass)} />
       <WorkEntryIconSvg name="bot" className="size-3.5 shrink-0 text-muted-foreground" />
       <span className="min-w-0 truncate">
         <span className="font-medium">{lead}</span>
@@ -2772,7 +2750,7 @@ const PlainWorkEntryRow = memo(function PlainWorkEntryRow(props: {
         <span className={cn(iconWrapperClass, !showEntryIcon && "invisible")} aria-hidden>
           <WorkEntryIconSvg
             name={entryIconName}
-            className="block shrink-0 stroke-[1.8] opacity-70"
+            className="block size-4 shrink-0 stroke-[1.8] opacity-70"
           />
         </span>
         <div className="flex min-w-0 flex-1 items-center gap-1.5">
@@ -2814,7 +2792,7 @@ const PlainWorkEntryRow = memo(function PlainWorkEntryRow(props: {
                       <span className="flex size-4 items-center justify-center" aria-hidden />
                     }
                   >
-                    <DotMatrix sizeRole="inline" aria-hidden state="error" />
+                    <XIcon className="block size-3 shrink-0 text-destructive" aria-hidden />
                   </TooltipTrigger>
                   <TooltipPopup>{missingResponse ? "No final response" : "Failed"}</TooltipPopup>
                 </Tooltip>
@@ -2823,7 +2801,13 @@ const PlainWorkEntryRow = memo(function PlainWorkEntryRow(props: {
                   <TooltipTrigger
                     render={<span className="flex size-4 items-center justify-center" />}
                   >
-                    <DotMatrix sizeRole="inline" aria-hidden state="success" />
+                    <span className="inline-flex size-4 items-center justify-center">
+                      <CheckIcon
+                        className="block size-3 shrink-0 stroke-current"
+                        stroke="currentColor"
+                        aria-hidden
+                      />
+                    </span>
                   </TooltipTrigger>
                   <TooltipPopup>Completed</TooltipPopup>
                 </Tooltip>
@@ -2832,7 +2816,7 @@ const PlainWorkEntryRow = memo(function PlainWorkEntryRow(props: {
                   <TooltipTrigger
                     render={<span className="flex size-4 items-center justify-center" />}
                   >
-                    <DotMatrix sizeRole="inline" aria-hidden state="idle" className="opacity-70" />
+                    <MinusIcon className="block size-3 shrink-0 opacity-70" aria-hidden />
                   </TooltipTrigger>
                   <TooltipPopup>Empty</TooltipPopup>
                 </Tooltip>
diff --git a/apps/web/src/components/chat/TaskProgressStatus.test.tsx b/apps/web/src/components/chat/TaskProgressStatus.test.tsx
index 038d01eed..cff15c313 100644
--- a/apps/web/src/components/chat/TaskProgressStatus.test.tsx
+++ b/apps/web/src/components/chat/TaskProgressStatus.test.tsx
@@ -40,22 +40,23 @@ describe("TaskProgressStatus", () => {
     expect(markup).toContain('data-task-progress-segments="true"');
     expect(markup).toContain("rounded-full");
     expect(markup).toContain("bg-success");
-    expect(markup).toContain("bg-status-active");
+    expect(markup).toContain("bg-primary");
     expect(markup).toContain("bg-muted-foreground/25");
     expect(markup).not.toContain("<circle");
   });
 
-  it("uses a 12 px Dot Matrix for expanded task rows", () => {
+  it("renders upstream task glyphs for expanded rows", () => {
     const completed = renderToStaticMarkup(<TaskStatusIndicator status="completed" />);
     const active = renderToStaticMarkup(<TaskStatusIndicator status="inProgress" />);
+    const pending = renderToStaticMarkup(<TaskStatusIndicator status="pending" />);
 
-    expect(completed).toContain('data-slot="dot-matrix"');
-    expect(completed).toContain('data-state="success"');
-    const rootClassTokens = /class="([^"]+)"/.exec(completed)?.[1]?.split(" ");
-    expect(rootClassTokens).toContain("size-[max(12px,0.85em)]");
-    expect(completed).toContain('data-size-role="compact"');
-    expect(completed.match(/<circle/g)).toHaveLength(25);
-    expect(active).toContain('data-state="loading"');
+    expect(completed).toContain("✓");
+    expect(completed).toContain("text-success");
+    expect(active).toContain("●");
+    expect(active).toContain("text-primary");
+    expect(pending).toContain("○");
+    expect(pending).toContain("text-muted-foreground/40");
+    expect(completed).not.toContain('data-slot="dot-matrix"');
   });
 
   it("distinguishes user-owned waits from passive waits", () => {
@@ -74,8 +75,10 @@ describe("TaskProgressStatus", () => {
       />,
     );
 
-    expect(userWait).toContain('data-state="warning"');
-    expect(delegateWait).toContain('data-state="waiting"');
+    expect(userWait).toContain("●");
+    expect(userWait).toContain("text-warning");
+    expect(delegateWait).toContain("○");
+    expect(delegateWait).toContain("text-muted-foreground/50");
     expect(segments).toContain("bg-warning");
     expect(segments).toContain("bg-muted-foreground/50");
   });
diff --git a/apps/web/src/components/chat/TaskProgressStatus.tsx b/apps/web/src/components/chat/TaskProgressStatus.tsx
index e3ba0ea73..d1f3a1cad 100644
--- a/apps/web/src/components/chat/TaskProgressStatus.tsx
+++ b/apps/web/src/components/chat/TaskProgressStatus.tsx
@@ -1,7 +1,6 @@
 import type { ComponentProps } from "react";
 
 import { cn } from "~/lib/utils";
-import { DotMatrix, type DotMatrixState } from "../ui/dot-matrix";
 
 export type TaskProgressStatus = "pending" | "inProgress" | "waiting" | "completed";
 export type TaskProgressWaitingOn = "user" | "delegates" | "external";
@@ -12,19 +11,21 @@ export interface TaskProgressStep {
   readonly waitingOn?: TaskProgressWaitingOn;
 }
 
-function matrixState(
+export function taskProgressStatusVisual(
   status: TaskProgressStatus,
   waitingOn?: TaskProgressWaitingOn,
-): DotMatrixState {
+): { readonly glyph: "✓" | "●" | "○"; readonly className: string } {
   switch (status) {
     case "pending":
-      return "idle";
+      return { glyph: "○", className: "text-muted-foreground/40" };
     case "inProgress":
-      return "loading";
+      return { glyph: "●", className: "text-primary" };
     case "waiting":
-      return waitingOn === "user" ? "warning" : "waiting";
+      return waitingOn === "user"
+        ? { glyph: "●", className: "text-warning" }
+        : { glyph: "○", className: "text-muted-foreground/50" };
     case "completed":
-      return "success";
+      return { glyph: "✓", className: "text-success" };
   }
 }
 
@@ -33,7 +34,7 @@ function segmentTone(status: TaskProgressStatus, waitingOn?: TaskProgressWaiting
     case "pending":
       return "bg-muted-foreground/25";
     case "inProgress":
-      return "bg-status-active";
+      return "bg-primary";
     case "waiting":
       return waitingOn === "user" ? "bg-warning" : "bg-muted-foreground/50";
     case "completed":
@@ -96,16 +97,21 @@ export function TaskStatusIndicator({
   status,
   waitingOn,
   ...props
-}: Omit<ComponentProps<typeof DotMatrix>, "state" | "sizeRole"> & {
+}: ComponentProps<"span"> & {
   readonly status: TaskProgressStatus;
   readonly waitingOn?: TaskProgressWaitingOn | undefined;
 }) {
+  const visual = taskProgressStatusVisual(status, waitingOn);
   return (
-    <DotMatrix
-      sizeRole="compact"
-      state={matrixState(status, waitingOn)}
-      className={className}
+    <span
+      className={cn(
+        "inline-block w-3 shrink-0 text-center font-mono text-[10px]",
+        visual.className,
+        className,
+      )}
       {...props}
-    />
+    >
+      {visual.glyph}
+    </span>
   );
 }
diff --git a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
index c8cbc1a68..cd9c0ccfd 100644
--- a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
+++ b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
@@ -176,23 +176,21 @@ export function CloudEnvironmentConnectRows({
     const savedConnection = savedEnvironment
       ? presentSavedCloudEnvironmentConnection(savedEnvironment.connection)
       : null;
-    // "connecting" borrows the warning tone rather than the spinner's
-    // default primary: here it means "not yet available", not "in motion".
-    const connectionDot = savedConnection
+    const dotClassName = savedConnection
       ? savedConnection.tone === "connected"
-        ? { state: "success" as const, colorClassName: undefined }
+        ? "bg-success"
         : savedConnection.tone === "connecting"
-          ? { state: "connecting" as const, colorClassName: "text-warning" }
+          ? "bg-warning"
           : savedConnection.tone === "error"
-            ? { state: "error" as const, colorClassName: undefined }
-            : { state: "offline" as const, colorClassName: "text-muted-foreground/35" }
+            ? "bg-destructive"
+            : "bg-muted-foreground/35"
       : availability === "online"
-        ? { state: "success" as const, colorClassName: undefined }
+        ? "bg-success"
         : availability === "error"
-          ? { state: "error" as const, colorClassName: undefined }
+          ? "bg-destructive"
           : availability === "checking"
-            ? { state: "connecting" as const, colorClassName: "text-warning" }
-            : { state: "offline" as const, colorClassName: "text-muted-foreground/35" };
+            ? "bg-warning"
+            : "bg-muted-foreground/35";
     const statusText = savedConnection
       ? savedConnection.statusText
       : availability === "online"
@@ -208,8 +206,13 @@ export function CloudEnvironmentConnectRows({
           <div className="min-w-0">
             <div className="flex items-center gap-2">
               <ConnectionStatusDot
-                state={connectionDot.state}
-                colorClassName={connectionDot.colorClassName}
+                dotClassName={dotClassName}
+                pingClassName={
+                  savedConnection?.tone === "connecting" ||
+                  (savedConnection === null && availability === "checking")
+                    ? "bg-warning/60 duration-2000"
+                    : null
+                }
                 tooltipText={
                   savedConnection
                     ? savedConnection.statusText
diff --git a/apps/web/src/components/preview/PreviewChromeRow.tsx b/apps/web/src/components/preview/PreviewChromeRow.tsx
index 3792ecb75..c303740a4 100644
--- a/apps/web/src/components/preview/PreviewChromeRow.tsx
+++ b/apps/web/src/components/preview/PreviewChromeRow.tsx
@@ -17,7 +17,6 @@ import {
 } from "react";
 
 import { Button } from "~/components/ui/button";
-import { DotMatrix } from "~/components/ui/dot-matrix";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { cn } from "~/lib/utils";
@@ -273,11 +272,9 @@ export function PreviewChromeRow({
             >
               <Camera className={cn(recording && "text-destructive")} />
               {recording ? (
-                <DotMatrix
-                  sizeRole="compact"
-                  aria-hidden
-                  state="recording"
-                  className="absolute -right-1 -top-1"
+                <span
+                  className="absolute right-0.5 top-0.5 size-1.5 animate-status-pulse rounded-full bg-destructive motion-reduce:animate-none"
+                  aria-hidden="true"
                 />
               ) : null}
             </TooltipTrigger>
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 6d4dc7feb..4e23f904e 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -688,8 +688,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
           <div className="flex min-h-5 items-center gap-1.5">
             <ConnectionStatusDot
               tooltipText={`Link created at ${formatAccessTimestamp(pairingLink.createdAt)}`}
-              state="queued"
-              colorClassName="text-warning"
+              dotClassName="bg-amber-400"
             />
             <h3 className="text-sm font-medium text-foreground">{primaryLabel}</h3>
           </div>
@@ -938,8 +937,8 @@ const ConnectedClientListRow = memo(function ConnectedClientListRow({
           <div className="flex min-h-5 items-center gap-1.5">
             <ConnectionStatusDot
               tooltipText={statusTooltip}
-              state={isLive ? "success" : "offline"}
-              colorClassName={isLive ? undefined : "text-muted-foreground/40"}
+              dotClassName={isLive ? "bg-success" : "bg-muted-foreground/30"}
+              pingClassName={isLive ? "bg-success/60 duration-2000" : null}
             />
             <h3 className="text-sm font-medium text-foreground">{primaryLabel}</h3>
             {clientSession.current ? (
@@ -1366,17 +1365,14 @@ function SavedBackendListRow({
   const connectionState = environment.connection.phase;
   const isConnected = connectionState === "connected";
   const isConnecting = connectionState === "connecting" || connectionState === "reconnecting";
-  const connectionDot =
+  const stateDotClassName =
     connectionState === "connected"
-      ? { state: "success" as const, colorClassName: undefined }
+      ? "bg-success"
       : connectionState === "connecting" || connectionState === "reconnecting"
-        ? // Deliberate override: connecting here means "not yet available",
-          // not "in motion", so it borrows the warning tone rather than the
-          // spinner's default primary.
-          { state: "connecting" as const, colorClassName: "text-warning" }
+        ? "bg-warning"
         : connectionState === "error"
-          ? { state: "error" as const, colorClassName: undefined }
-          : { state: "offline" as const, colorClassName: "text-muted-foreground/40" };
+          ? "bg-destructive"
+          : "bg-muted-foreground/40";
   const statusTooltip = connectionStatusText(environment.connection);
   const errorTraceId = environment.connection.traceId;
   const { copyToClipboard: copyTraceIdToClipboard } = useCopyToClipboard<{ traceId: string }>({
@@ -1432,8 +1428,12 @@ function SavedBackendListRow({
           <div className="flex min-h-5 items-center gap-1.5">
             <ConnectionStatusDot
               tooltipText={statusTooltip}
-              state={connectionDot.state}
-              colorClassName={connectionDot.colorClassName}
+              dotClassName={stateDotClassName}
+              pingClassName={
+                connectionState === "connecting" || connectionState === "reconnecting"
+                  ? "bg-warning/60 duration-2000"
+                  : null
+              }
             />
             <h3 className="text-sm font-medium text-foreground">{environment.label}</h3>
           </div>
diff --git a/apps/web/src/components/settings/DotMatrixSettings.logic.ts b/apps/web/src/components/settings/DotMatrixSettings.logic.ts
deleted file mode 100644
index a1b50a9a7..000000000
--- a/apps/web/src/components/settings/DotMatrixSettings.logic.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { DotMatrixState } from "../ui/dot-matrix";
-
-export const DOT_MATRIX_STATUS_DESCRIPTIONS: Readonly<Record<DotMatrixState, string>> = {
-  idle: "Available, but no work is active.",
-  loading: "Generic root work when no narrower fact is known.",
-  orchestrating: "Active subagent or workflow coordination.",
-  queued: "Accepted but not started.",
-  thinking: "Provider reasoning or planning is active.",
-  streaming: "Response or tool output is arriving.",
-  searching: "A known search operation is active.",
-  syncing: "State is reconciling or a service is restarting.",
-  connecting: "A connection handshake or reconnect is active.",
-  waiting: "Operational work is blocked or waiting without claiming active work.",
-  uploading: "A known outbound transfer is active.",
-  downloading: "A known inbound transfer is active.",
-  listening: "An active watch or monitor loop.",
-  speaking: "Fast output or voice playback activity.",
-  recording: "Capture is active.",
-  success: "Healthy or completed successfully.",
-  error: "Failed and needs attention.",
-  warning: "User input, approval, or another warning needs attention.",
-  info: "Actionable information, such as a plan ready for review.",
-  paused: "Paused and resumable.",
-  stopped: "Stopped or cancelled.",
-  offline: "Unavailable or disconnected.",
-  terminal: "Completed or inactive terminal identity.",
-  "terminal-active": "Active terminal identity with a synchronized breath.",
-};
-
-export const DOT_MATRIX_STATUS_GROUPS: ReadonlyArray<{
-  title: string;
-  states: ReadonlyArray<DotMatrixState>;
-}> = [
-  {
-    title: "Active work",
-    states: [
-      "loading",
-      "thinking",
-      "streaming",
-      "searching",
-      "syncing",
-      "uploading",
-      "downloading",
-    ],
-  },
-  {
-    title: "Coordination, presence, and media",
-    states: [
-      "orchestrating",
-      "queued",
-      "connecting",
-      "waiting",
-      "listening",
-      "speaking",
-      "recording",
-    ],
-  },
-  {
-    title: "Outcomes and resting states",
-    states: ["success", "error", "warning", "info", "paused", "stopped", "offline", "idle"],
-  },
-  { title: "Terminal", states: ["terminal", "terminal-active"] },
-];
-
-export const dotMatrixSettingsStates = DOT_MATRIX_STATUS_GROUPS.flatMap((group) => group.states);
diff --git a/apps/web/src/components/settings/DotMatrixSettings.test.tsx b/apps/web/src/components/settings/DotMatrixSettings.test.tsx
deleted file mode 100644
index 650669d56..000000000
--- a/apps/web/src/components/settings/DotMatrixSettings.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import { dotMatrixStates } from "../ui/dot-matrix";
-import { DotMatrixSettings } from "./DotMatrixSettings";
-import { dotMatrixSettingsStates } from "./DotMatrixSettings.logic";
-
-describe("DotMatrixSettings", () => {
-  it("shows every Dot Matrix state exactly once", () => {
-    expect([...dotMatrixSettingsStates].sort()).toEqual([...dotMatrixStates].sort());
-    expect(new Set(dotMatrixSettingsStates).size).toBe(dotMatrixStates.length);
-  });
-
-  it("does not mount the live catalog until the user opens it", () => {
-    const html = renderToStaticMarkup(<DotMatrixSettings />);
-    expect(html).toContain("View catalog");
-    expect(html).not.toContain('data-slot="dot-matrix"');
-    expect(html).not.toContain('id="dot-matrix-status-catalog"');
-  });
-});
diff --git a/apps/web/src/components/settings/DotMatrixSettings.tsx b/apps/web/src/components/settings/DotMatrixSettings.tsx
deleted file mode 100644
index 869de0e63..000000000
--- a/apps/web/src/components/settings/DotMatrixSettings.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import { DEFAULT_DOT_MATRIX_MOTION, type DotMatrixMotion } from "@t3tools/contracts/settings";
-import { useState } from "react";
-import { useClientSettings, useUpdateClientSettings } from "~/hooks/useSettings";
-import { useMediaQuery } from "~/hooks/useMediaQuery";
-import {
-  DotMatrix,
-  dotMatrixAnimatedStates,
-  type DotMatrixSizeRole,
-  type DotMatrixState,
-} from "../ui/dot-matrix";
-import { Button } from "../ui/button";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
-import {
-  DOT_MATRIX_STATUS_DESCRIPTIONS,
-  DOT_MATRIX_STATUS_GROUPS,
-} from "./DotMatrixSettings.logic";
-import { SettingResetButton, SettingsRow, SettingsSection } from "./settingsLayout";
-import { searchableSetting } from "./settingsSearch";
-
-const MOTION_LABELS: Readonly<Record<DotMatrixMotion, string>> = {
-  smooth: "Smooth",
-  efficient: "Efficient",
-};
-
-function TerminalRowContent({ highlighted = false }: { highlighted?: boolean }) {
-  return (
-    <div
-      className={
-        highlighted
-          ? "flex min-h-7 items-center gap-2 px-1 py-0.5 text-foreground"
-          : "flex min-h-7 items-center gap-2 px-1 py-0.5 text-secondary-label"
-      }
-    >
-      <DotMatrix sizeRole="inline" aria-hidden state="terminal" className="text-inherit" />
-      <span className="text-sm font-medium">IPython</span>
-    </div>
-  );
-}
-
-function StreamingTerminalRowPreview() {
-  return (
-    <div
-      role="img"
-      aria-label="Streaming terminal row"
-      className="relative w-fit max-w-full overflow-hidden rounded-md"
-    >
-      <TerminalRowContent />
-      <div
-        aria-hidden
-        className="live-activity-focus pointer-events-none absolute inset-y-0 select-none"
-      >
-        <div className="live-activity-focus-counter">
-          <div className="live-activity-focus-aligned">
-            <TerminalRowContent highlighted />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function StatusCard({ state, motionPaused }: { state: DotMatrixState; motionPaused: boolean }) {
-  const animated = dotMatrixAnimatedStates.includes(state);
-  const motionLabel = animated ? (motionPaused ? "Paused" : "Animated") : "Static";
-  return (
-    <div className="grid min-h-20 grid-cols-[2rem_minmax(0,1fr)] items-center gap-3 rounded-xl border border-border/70 bg-card/55 p-3">
-      <DotMatrix sizeRole="compact" aria-hidden state={state} />
-      <div className="min-w-0">
-        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-          <code className="text-xs font-semibold text-foreground">{state}</code>
-          <span className="text-[9px] font-medium tracking-[0.08em] text-muted-foreground uppercase">
-            {motionLabel}
-          </span>
-        </div>
-        <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
-          {DOT_MATRIX_STATUS_DESCRIPTIONS[state]}
-        </p>
-      </div>
-    </div>
-  );
-}
-
-const DOT_MATRIX_SIZE_PREVIEWS: ReadonlyArray<{
-  role: DotMatrixSizeRole;
-  label: string;
-  detail: string;
-  surfaceClassName: string;
-  toneClassName?: string;
-  labelToneClassName: string;
-}> = [
-  {
-    role: "compact",
-    label: "Compact",
-    detail: "Sidebar and list · max(12px, 0.85em)",
-    surfaceClassName: "bg-sidebar text-sm text-sidebar-foreground",
-    toneClassName: "text-status-active-sidebar",
-    labelToneClassName: "text-status-active-foreground-sidebar",
-  },
-  {
-    role: "inline",
-    label: "Inline",
-    detail: "Text rows · 1em",
-    surfaceClassName: "bg-card/55 text-sm text-foreground",
-    labelToneClassName: "text-status-active-foreground",
-  },
-  {
-    role: "prominent",
-    label: "Prominent",
-    detail: "Transcript activity · max(16px, 1.1em)",
-    surfaceClassName: "bg-background/45 text-base text-foreground",
-    labelToneClassName: "text-status-active-foreground",
-  },
-];
-
-function DotMatrixSizePreview() {
-  return (
-    <div>
-      <h4 className="mb-2 text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase">
-        Surface-aware sizing
-      </h4>
-      <div className="grid gap-2 sm:grid-cols-3">
-        {DOT_MATRIX_SIZE_PREVIEWS.map(
-          ({ role, label, detail, surfaceClassName, toneClassName, labelToneClassName }) => (
-            <div
-              key={role}
-              className={`rounded-xl border border-border/70 px-3 py-3 ${surfaceClassName}`}
-            >
-              <div className="flex items-center gap-2.5">
-                <DotMatrix aria-hidden state="loading" sizeRole={role} className={toneClassName} />
-                <span className={`font-medium ${labelToneClassName}`}>Working</span>
-              </div>
-              <p className="mt-2 text-[10px] text-muted-foreground">
-                <span className="font-semibold text-foreground">{label}</span> · {detail}
-              </p>
-            </div>
-          ),
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function DotMatrixSettings() {
-  const motion = useClientSettings((settings) => settings.dotMatrixMotion);
-  const updateSettings = useUpdateClientSettings();
-  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
-  const [catalogOpen, setCatalogOpen] = useState(false);
-
-  return (
-    <SettingsSection title="Status language">
-      <SettingsRow
-        {...searchableSetting("dot-matrix-motion")}
-        description={
-          prefersReducedMotion
-            ? "Your system Reduce Motion preference pauses status animation. This choice is saved for when motion is enabled."
-            : "Smooth uses fluid fades. Efficient uses stepped frames to reduce continuous rendering on this device."
-        }
-        resetAction={
-          motion !== DEFAULT_DOT_MATRIX_MOTION ? (
-            <SettingResetButton
-              label="status motion"
-              onClick={() => updateSettings({ dotMatrixMotion: DEFAULT_DOT_MATRIX_MOTION })}
-            />
-          ) : null
-        }
-        control={
-          <Select
-            value={motion}
-            onValueChange={(value) => {
-              if (value === "smooth" || value === "efficient") {
-                updateSettings({ dotMatrixMotion: value });
-              }
-            }}
-          >
-            <SelectTrigger className="w-full sm:w-40" aria-label="Status motion">
-              <SelectValue>{MOTION_LABELS[motion]}</SelectValue>
-            </SelectTrigger>
-            <SelectPopup align="end" alignItemWithTrigger={false}>
-              {(Object.entries(MOTION_LABELS) as ReadonlyArray<[DotMatrixMotion, string]>).map(
-                ([value, label]) => (
-                  <SelectItem hideIndicator key={value} value={value}>
-                    {label}
-                  </SelectItem>
-                ),
-              )}
-            </SelectPopup>
-          </Select>
-        }
-      />
-
-      <SettingsRow
-        {...searchableSetting("dot-matrix-catalog")}
-        description="Preview every status pattern, its meaning, and the composed streaming terminal row."
-        control={
-          <Button
-            aria-controls="dot-matrix-status-catalog"
-            aria-expanded={catalogOpen}
-            size="xs"
-            variant="outline"
-            onClick={() => setCatalogOpen((open) => !open)}
-          >
-            {catalogOpen ? "Hide catalog" : "View catalog"}
-          </Button>
-        }
-      />
-
-      {catalogOpen ? (
-        <div
-          id="dot-matrix-status-catalog"
-          className="space-y-5 border-t border-border/70 px-4 py-5"
-        >
-          <div>
-            <h3 className="text-sm font-semibold text-foreground">Live catalog</h3>
-            <p className="mt-1 max-w-3xl text-xs leading-relaxed text-muted-foreground">
-              These patterns are the status language used across threads, agents, tools,
-              connections, and updates. Motion represents a known active state; settled states stay
-              still.
-            </p>
-          </div>
-
-          <DotMatrixSizePreview />
-
-          {DOT_MATRIX_STATUS_GROUPS.map((group) => (
-            <div key={group.title}>
-              <h4 className="mb-2 text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase">
-                {group.title}
-              </h4>
-              <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
-                {group.states.map((state) => (
-                  <StatusCard key={state} state={state} motionPaused={prefersReducedMotion} />
-                ))}
-              </div>
-            </div>
-          ))}
-
-          <div>
-            <h4 className="mb-2 text-[10px] font-semibold tracking-[0.1em] text-muted-foreground uppercase">
-              Composed activity
-            </h4>
-            <div className="grid min-h-24 gap-3 rounded-xl border border-border/70 bg-card/55 p-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
-              <div>
-                <p className="text-sm font-medium text-foreground">Streaming terminal row</p>
-                <p className="mt-1 max-w-xl text-xs leading-relaxed text-muted-foreground">
-                  Live command output uses one foreground sweep across the terminal identity and its
-                  label. It does not add a second Dot Matrix animation.
-                </p>
-              </div>
-              <StreamingTerminalRowPreview />
-            </div>
-          </div>
-        </div>
-      ) : null}
-    </SettingsSection>
-  );
-}
diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
index 321d893b2..e34f5c11d 100644
--- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
@@ -51,7 +51,11 @@ import { EMPTY_SERVER_PROVIDERS, serverEnvironment } from "../../state/server";
 import { useEnvironmentSessionState } from "../../state/session";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { getRelativeTimeState } from "../../timestampFormat";
-import { ConnectionStatusDot, connectionPhaseDotMatrixState } from "../ConnectionStatusDot";
+import {
+  ConnectionStatusDot,
+  connectionPhaseDotClassName,
+  connectionPhasePingClassName,
+} from "../ConnectionStatusDot";
 import {
   canOneClickUpdateProviderCandidate,
   collectProviderUpdateCandidates,
@@ -241,9 +245,12 @@ export function ProviderSettingsPanel() {
                     >
                       <Icon className="size-3.5 shrink-0" aria-hidden />
                       <span className="max-w-40 truncate">{environment.label}</span>
-                      <ConnectionStatusDot
-                        state={connectionPhaseDotMatrixState(environment.connection.phase)}
-                      />
+                      {environment.connection.phase !== "connected" ? (
+                        <ConnectionStatusDot
+                          dotClassName={connectionPhaseDotClassName(environment.connection.phase)}
+                          pingClassName={connectionPhasePingClassName(environment.connection.phase)}
+                        />
+                      ) : null}
                       <span className="sr-only">
                         {detail}, {statusText}
                       </span>
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 3f5f81173..8af250778 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -108,7 +108,6 @@ import {
   TYPOGRAPHY_ADVANCED_STORAGE_KEY,
 } from "../../appearanceFonts";
 import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
-import { DotMatrixSettings } from "./DotMatrixSettings";
 import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
 import {
   NumberField,
@@ -1181,7 +1180,6 @@ export function AppearanceSettingsPanel() {
         ) : null}
       </SettingsSection>
 
-      <DotMatrixSettings />
       <TypographySection />
     </SettingsPageContainer>
   );
diff --git a/apps/web/src/components/settings/ThemeColorPicker.tsx b/apps/web/src/components/settings/ThemeColorPicker.tsx
index df03e799f..bed7759c9 100644
--- a/apps/web/src/components/settings/ThemeColorPicker.tsx
+++ b/apps/web/src/components/settings/ThemeColorPicker.tsx
@@ -19,8 +19,6 @@ export function getThemeRoleLabel(role: ThemeColorRole): string {
     errorSurface: "Error background",
     warningForeground: "Warning text",
     warningSurface: "Warning background",
-    statusActive: "Active work",
-    statusInfo: "Info",
     updateForeground: "Update text",
     updateSurface: "Update background",
   };
diff --git a/apps/web/src/components/settings/ThemeEditorPanel.tsx b/apps/web/src/components/settings/ThemeEditorPanel.tsx
index c522e931c..cf129ed03 100644
--- a/apps/web/src/components/settings/ThemeEditorPanel.tsx
+++ b/apps/web/src/components/settings/ThemeEditorPanel.tsx
@@ -206,18 +206,6 @@ const THEME_EDITOR_ROLE_GROUPS: ReadonlyArray<{
     id: "status",
     title: "Status",
     families: [
-      {
-        id: "status-active",
-        label: "Active work",
-        role: "statusActive",
-        roles: ["statusActive"],
-      },
-      {
-        id: "status-info",
-        label: "Info",
-        role: "statusInfo",
-        roles: ["statusInfo"],
-      },
       {
         id: "error",
         label: "Error",
diff --git a/apps/web/src/components/settings/settingsSearch.test.ts b/apps/web/src/components/settings/settingsSearch.test.ts
index 369970de7..9ed854b87 100644
--- a/apps/web/src/components/settings/settingsSearch.test.ts
+++ b/apps/web/src/components/settings/settingsSearch.test.ts
@@ -46,8 +46,6 @@ describe("searchSettings", () => {
   it("matches normalized title substrings", () => {
     expect(searchSettings("  WORD   WRAP  ", ITEMS).map((item) => item.id)).toEqual(["word-wrap"]);
     expect(searchSettings("glass").map((item) => item.id)).toEqual(["setting-glass-opacity"]);
-    expect(searchSettings("status motion").map((item) => item.id)).toEqual(["dot-matrix-motion"]);
-    expect(searchSettings("status catalog").map((item) => item.id)).toEqual(["dot-matrix-catalog"]);
     expect(searchSettings("xyzzy")).toEqual([]);
   });
 
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 4872d2321..708656f9e 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -69,16 +69,6 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Glass opacity",
     to: "/settings/appearance",
   },
-  {
-    id: "dot-matrix-motion",
-    title: "Status motion",
-    to: "/settings/appearance",
-  },
-  {
-    id: "dot-matrix-catalog",
-    title: "Status catalog",
-    to: "/settings/appearance",
-  },
   {
     id: "environment-identification",
     title: "Environment identification",
diff --git a/apps/web/src/components/settings/themeInspector.test.ts b/apps/web/src/components/settings/themeInspector.test.ts
index 1648be0db..c802ce3d5 100644
--- a/apps/web/src/components/settings/themeInspector.test.ts
+++ b/apps/web/src/components/settings/themeInspector.test.ts
@@ -35,18 +35,6 @@ describe("themeRoleFromUtilityClass", () => {
       "mutedForeground",
     );
     expect(themeRoleFromUtilityClass("bg-primary/90", "background")).toBe("messageAction");
-    expect(themeRoleFromUtilityClass("text-status-active", "foreground")).toBe("statusActive");
-    expect(themeRoleFromUtilityClass("text-status-active-sidebar", "foreground")).toBe(
-      "statusActive",
-    );
-    expect(themeRoleFromUtilityClass("text-status-active-foreground", "foreground")).toBe(
-      "statusActive",
-    );
-    expect(themeRoleFromUtilityClass("text-status-active-foreground-sidebar", "foreground")).toBe(
-      "statusActive",
-    );
-    expect(themeRoleFromUtilityClass("text-status-info", "foreground")).toBe("statusInfo");
-    expect(themeRoleFromUtilityClass("text-status-info-sidebar", "foreground")).toBe("statusInfo");
     expect(themeRoleFromUtilityClass("ring-ring", "border")).toBe("focus");
   });
 
diff --git a/apps/web/src/components/settings/themeInspector.ts b/apps/web/src/components/settings/themeInspector.ts
index f2cb4b0b2..9306226b8 100644
--- a/apps/web/src/components/settings/themeInspector.ts
+++ b/apps/web/src/components/settings/themeInspector.ts
@@ -52,12 +52,6 @@ const THEME_UTILITY_ROLES: Readonly<Partial<Record<string, ThemeColorRole>>> = {
   warning: "warning",
   "warning-foreground": "warningForeground",
   "warning-surface": "warningSurface",
-  "status-active": "statusActive",
-  "status-active-foreground": "statusActive",
-  "status-active-sidebar": "statusActive",
-  "status-active-foreground-sidebar": "statusActive",
-  "status-info": "statusInfo",
-  "status-info-sidebar": "statusInfo",
   update: "update",
   "update-foreground": "updateForeground",
   "update-surface": "updateSurface",
diff --git a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
index b08f88471..ef489d752 100644
--- a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "@tanstack/react-router";
 import { useAtomValue } from "@effect/atom-react";
 import type { ServerProvider } from "@t3tools/contracts";
-import { DownloadIcon, LoaderIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { CircleCheckIcon, DownloadIcon, LoaderIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { useCallback, useEffect, useState, type CSSProperties } from "react";
 
 import { primaryServerProvidersAtom } from "../../state/server";
@@ -9,7 +9,6 @@ import {
   getProviderUpdateSidebarPillView,
   type ProviderUpdateSidebarPillView,
 } from "../ProviderUpdateLaunchNotification.logic";
-import { DotMatrix } from "../ui/dot-matrix";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { Button } from "../ui/button";
 
@@ -176,7 +175,7 @@ export function SidebarProviderUpdatePill() {
               {displayedView.tone === "loading" ? (
                 <LoaderIcon className="size-3.5 animate-spin" />
               ) : displayedView.tone === "success" ? (
-                <DotMatrix sizeRole="compact" aria-hidden state="success" />
+                <CircleCheckIcon className="size-3.5" aria-hidden="true" />
               ) : displayedView.tone === "error" ? (
                 <TriangleAlertIcon className="size-3.5" />
               ) : (
diff --git a/apps/web/src/components/ui/dot-matrix.test.tsx b/apps/web/src/components/ui/dot-matrix.test.tsx
deleted file mode 100644
index a323604d2..000000000
--- a/apps/web/src/components/ui/dot-matrix.test.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import {
-  DotMatrix,
-  dotMatrixAnimatedStates,
-  dotMatrixSizeClass,
-  dotMatrixStates,
-  type DotMatrixState,
-} from "./dot-matrix";
-
-const countAnimated = (html: string) => (html.match(/data-animated="true"/g) ?? []).length;
-const countChase = (html: string) => (html.match(/data-animated="chase"/g) ?? []).length;
-
-const ASSISTANT_UI_STATES = [
-  "idle",
-  "loading",
-  "thinking",
-  "streaming",
-  "searching",
-  "syncing",
-  "connecting",
-  "waiting",
-  "uploading",
-  "downloading",
-  "listening",
-  "speaking",
-  "recording",
-  "success",
-  "error",
-  "warning",
-  "info",
-  "paused",
-  "stopped",
-  "offline",
-] as const;
-
-describe("DotMatrix", () => {
-  it("renders a full 5x5 grid with a status label", () => {
-    const html = renderToStaticMarkup(
-      <DotMatrix sizeRole="compact" state="loading" label="Working" />,
-    );
-    expect((html.match(/<circle/g) ?? []).length).toBe(25);
-    expect(html).toContain('role="img"');
-    expect(html).toContain('aria-label="Working"');
-    expect(html).toContain('data-slot="dot-matrix"');
-    expect(html).toContain('data-state="loading"');
-    const rootClassTokens = /class="([^"]+)"/.exec(html)?.[1]?.split(" ");
-    expect(rootClassTokens).toContain(dotMatrixSizeClass.compact);
-    expect(html).toContain('data-size-role="compact"');
-  });
-
-  it("uses explicit surface-aware size roles", () => {
-    expect(dotMatrixSizeClass).toEqual({
-      compact: "size-[max(12px,0.85em)]",
-      inline: "size-[1em]",
-      prominent: "size-[max(16px,1.1em)]",
-    });
-    for (const role of ["compact", "inline", "prominent"] as const) {
-      const html = renderToStaticMarkup(<DotMatrix sizeRole={role} state="loading" />);
-      const rootTag = html.slice(0, html.indexOf(">") + 1);
-      expect(rootTag).toContain(`data-size-role="${role}"`);
-      expect(rootTag).toContain(dotMatrixSizeClass[role]);
-    }
-  });
-
-  it("keeps the required size role authoritative over incidental size utilities", () => {
-    const html = renderToStaticMarkup(
-      <DotMatrix sizeRole="inline" state="loading" className="size-9 text-warning" />,
-    );
-    const rootTag = html.slice(0, html.indexOf(">") + 1);
-    expect(rootTag).toContain(dotMatrixSizeClass.inline);
-    expect(rootTag).not.toContain("size-9");
-    expect(rootTag).toContain("text-warning");
-  });
-
-  it("exports assistant-ui's ordered language plus Pylon's extensions", () => {
-    expect(dotMatrixStates).toEqual([
-      "idle",
-      "loading",
-      "orchestrating",
-      "queued",
-      ...ASSISTANT_UI_STATES.slice(2),
-      "terminal",
-      "terminal-active",
-    ]);
-    for (const state of dotMatrixStates) {
-      expect(renderToStaticMarkup(<DotMatrix sizeRole="compact" state={state} />)).toContain(
-        `data-state="${state}"`,
-      );
-    }
-  });
-
-  it("uses the expected state-specific animation patterns", () => {
-    expect(
-      countAnimated(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="loading" />)),
-    ).toBe(25);
-    expect(
-      countAnimated(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="waiting" />)),
-    ).toBe(3);
-    expect(
-      countAnimated(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="warning" />)),
-    ).toBe(4);
-    expect(
-      countAnimated(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="error" />)),
-    ).toBe(9);
-    expect(
-      countAnimated(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="terminal-active" />)),
-    ).toBe(8);
-    expect(
-      countChase(renderToStaticMarkup(<DotMatrix sizeRole="compact" state="orchestrating" />)),
-    ).toBe(12);
-    expect(dotMatrixAnimatedStates).toContain("terminal-active");
-  });
-
-  it("breathes the active terminal glyph in sync", () => {
-    const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state="terminal-active" />);
-    expect(html.match(/animation-duration:1.7s/g)).toHaveLength(8);
-    expect(html.match(/animation-delay:0s/g)).toHaveLength(8);
-  });
-
-  it("gives resting states no animation timeline", () => {
-    for (const state of [
-      "idle",
-      "queued",
-      "success",
-      "info",
-      "paused",
-      "stopped",
-      "offline",
-      "terminal",
-    ] as const) {
-      const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state={state} />);
-      expect(html).not.toContain("animation-duration");
-      expect(html).not.toContain("data-animated");
-    }
-  });
-
-  it("renders identical markup across renders", () => {
-    const a = renderToStaticMarkup(<DotMatrix sizeRole="compact" state="loading" />);
-    const b = renderToStaticMarkup(<DotMatrix sizeRole="compact" state="loading" />);
-    expect(a).toBe(b);
-  });
-
-  it("never emits a positive animation delay", () => {
-    for (const state of dotMatrixStates) {
-      const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state={state} />);
-      const delays = [...html.matchAll(/animation-delay:\s*([-\d.]+)s/g)].map((match) =>
-        Number(match[1]),
-      );
-      for (const delay of delays) {
-        expect(delay, `${state} emitted a positive delay`).toBeLessThanOrEqual(0);
-      }
-    }
-  });
-
-  it("uses themed active and info roles alongside neutral identity states", () => {
-    const toneByState: Record<DotMatrixState, string> = {
-      idle: "text-muted-foreground",
-      loading: "text-status-active",
-      orchestrating: "text-status-active",
-      queued: "text-muted-foreground",
-      thinking: "text-status-active",
-      streaming: "text-status-active",
-      searching: "text-status-active",
-      syncing: "text-status-active",
-      connecting: "text-status-active",
-      waiting: "text-foreground",
-      uploading: "text-status-active",
-      downloading: "text-status-active",
-      listening: "text-status-active",
-      speaking: "text-status-active",
-      recording: "text-destructive",
-      success: "text-success",
-      error: "text-destructive",
-      warning: "text-warning",
-      info: "text-status-info",
-      paused: "text-muted-foreground",
-      stopped: "text-muted-foreground",
-      offline: "text-muted-foreground",
-      terminal: "text-muted-foreground",
-      "terminal-active": "text-foreground",
-    };
-    for (const [state, tone] of Object.entries(toneByState) as [DotMatrixState, string][]) {
-      const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state={state} />);
-      const rootTag = html.slice(0, html.indexOf(">") + 1);
-      expect(rootTag, `${state} should carry ${tone}`).toContain(tone);
-    }
-  });
-
-  it("is decorative unless a caller provides a label", () => {
-    const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state="loading" />);
-    const rootTag = html.slice(0, html.indexOf(">") + 1);
-    expect(rootTag).toContain('aria-hidden="true"');
-    expect(rootTag).not.toContain('role="status"');
-  });
-
-  it("lets callers override the default tone", () => {
-    const html = renderToStaticMarkup(
-      <DotMatrix sizeRole="compact" state="loading" className="text-warning" />,
-    );
-    const rootTag = html.slice(0, html.indexOf(">") + 1);
-    expect(rootTag).toContain("text-warning");
-    expect(rootTag).not.toContain("text-status-active");
-  });
-
-  it("renders a three-dot cursor in Pylon's terminal glyph", () => {
-    const html = renderToStaticMarkup(<DotMatrix sizeRole="compact" state="terminal" />);
-    for (const cx of ["10", "14", "18"]) {
-      expect(html).toContain(`cx="${cx}" cy="18"`);
-    }
-  });
-});
diff --git a/apps/web/src/components/ui/dot-matrix.tsx b/apps/web/src/components/ui/dot-matrix.tsx
deleted file mode 100644
index 77d1f84cb..000000000
--- a/apps/web/src/components/ui/dot-matrix.tsx
+++ /dev/null
@@ -1,348 +0,0 @@
-import type { CSSProperties } from "react";
-import { cn } from "~/lib/utils";
-
-const GRID = 5;
-const CENTER = (GRID - 1) / 2;
-const DOT_INDEXES = Array.from({ length: GRID * GRID }, (_, i) => i);
-
-/* Deterministic bit-mixing hash so repeated renders produce identical markup;
-   takes a range in milliseconds and returns seconds. A plain (i * prime) % range
-   correlates indexes a grid-stride apart and renders as column-synchronized
-   waves instead of a twinkle. */
-function hash(n: number, salt: number, range: number): number {
-  let h = (Math.imul(n, 374761393) + Math.imul(salt, 668265263)) >>> 0;
-  h = Math.imul(h ^ (h >>> 13), 1274126177) >>> 0;
-  return (((h ^ (h >>> 16)) >>> 0) % range) / 1000;
-}
-
-const glyph = (dots: ReadonlyArray<readonly [number, number]>) =>
-  new Set(dots.map(([row, col]) => row * GRID + col));
-
-const CHECK = glyph([
-  [1, 4],
-  [2, 3],
-  [3, 0],
-  [3, 2],
-  [4, 1],
-]);
-const CROSS = glyph([
-  [0, 0],
-  [0, 4],
-  [1, 1],
-  [1, 3],
-  [2, 2],
-  [3, 1],
-  [3, 3],
-  [4, 0],
-  [4, 4],
-]);
-const BANG = glyph([
-  [0, 2],
-  [1, 2],
-  [2, 2],
-  [4, 2],
-]);
-const INFO = glyph([
-  [0, 2],
-  [2, 2],
-  [3, 2],
-  [4, 2],
-]);
-const PAUSE = glyph([
-  [1, 1],
-  [2, 1],
-  [3, 1],
-  [1, 3],
-  [2, 3],
-  [3, 3],
-]);
-const STOP = glyph([
-  [1, 1],
-  [1, 2],
-  [1, 3],
-  [2, 1],
-  [2, 2],
-  [2, 3],
-  [3, 1],
-  [3, 2],
-  [3, 3],
-]);
-const ELLIPSIS = glyph([
-  [2, 0],
-  [2, 2],
-  [2, 4],
-]);
-const RECORD = glyph([
-  [1, 2],
-  [2, 1],
-  [2, 2],
-  [2, 3],
-  [3, 2],
-]);
-/* Pylon extension: a full-height chevron plus a cursor underscore. */
-const PROMPT = glyph([
-  [0, 0],
-  [1, 1],
-  [2, 2],
-  [3, 1],
-  [4, 0],
-  [4, 2],
-  [4, 3],
-  [4, 4],
-]);
-/* Pylon extension: a circular fleet/orchestration indicator. */
-const RING = glyph([
-  [0, 1],
-  [0, 2],
-  [0, 3],
-  [1, 0],
-  [1, 4],
-  [2, 0],
-  [2, 4],
-  [3, 0],
-  [3, 4],
-  [4, 1],
-  [4, 2],
-  [4, 3],
-]);
-
-type Blink = { duration: number; delay: number; lo: number };
-
-type StateConfig = {
-  /** Dots that render at full opacity; all others rest at `dim`. Omit for the full grid. */
-  glyph?: Set<number>;
-  /** Resting opacity of on dots. */
-  base?: number;
-  /** Resting opacity of off dots when a glyph is set. */
-  dim?: number;
-  /** Blink parameters per on dot, keyed by index and grid position. */
-  blink?: (i: number, row: number, col: number) => Blink;
-  /** Use Pylon's fading-tail orbit instead of the shared blink keyframe. */
-  chase?: boolean;
-};
-
-/**
- * Pylon's status language follows assistant-ui's standalone Dot Matrix states.
- * Live activity tracks the theme's active color. Informational states use a
- * distinct purple role, while operational waiting and active terminal identity
- * stay neutral foreground. Thread requests for user input use the warning glyph
- * and tone at their presentation boundary. Static
- * states do not receive an animation timeline.
- */
-const STATES = {
-  idle: { base: 0.3 },
-  loading: {
-    blink: (i: number) => ({
-      duration: 0.9 + hash(i, 2, 700),
-      delay: -hash(i, 1, 1200),
-      lo: 0.15,
-    }),
-  },
-  orchestrating: {
-    glyph: RING,
-    dim: 0.06,
-    chase: true,
-    blink: (_i: number, row: number, col: number) => {
-      const turn = (Math.atan2(row - CENTER, col - CENTER) + Math.PI) / (2 * Math.PI);
-      return { duration: 1.1, delay: -(1 - turn) * 1.1, lo: 0.12 };
-    },
-  },
-  queued: { glyph: ELLIPSIS },
-  thinking: {
-    blink: (_i: number, row: number, col: number) => ({
-      duration: 1.2,
-      delay: -(row + col) * 0.09,
-      lo: 0.2,
-    }),
-  },
-  streaming: {
-    blink: (_i: number, row: number, col: number) => ({
-      duration: 0.9,
-      delay: -(row * 0.12 + hash(col, 3, 900)),
-      lo: 0.15,
-    }),
-  },
-  searching: {
-    blink: (_i: number, _row: number, col: number) => ({
-      duration: 1.1,
-      delay: -col * 0.12,
-      lo: 0.2,
-    }),
-  },
-  syncing: {
-    blink: (_i: number, row: number, col: number) => {
-      const turn = (Math.atan2(row - CENTER, col - CENTER) + Math.PI) / (2 * Math.PI);
-      return { duration: 1.3, delay: -turn * 1.3, lo: 0.2 };
-    },
-  },
-  connecting: {
-    blink: (_i: number, row: number, col: number) => ({
-      duration: 1.4,
-      delay: -Math.max(Math.abs(row - CENTER), Math.abs(col - CENTER)) * 0.18,
-      lo: 0.15,
-    }),
-  },
-  waiting: {
-    glyph: ELLIPSIS,
-    blink: (_i: number, _row: number, col: number) => ({
-      duration: 1.2,
-      delay: -col * 0.09,
-      lo: 0.2,
-    }),
-  },
-  uploading: {
-    blink: (_i: number, row: number) => ({
-      duration: 1,
-      delay: -(GRID - 1 - row) * 0.12,
-      lo: 0.2,
-    }),
-  },
-  downloading: {
-    blink: (_i: number, row: number) => ({
-      duration: 1,
-      delay: -row * 0.12,
-      lo: 0.2,
-    }),
-  },
-  listening: {
-    blink: (_i: number, _row: number, col: number) => ({
-      duration: 0.7 + hash(col, 4, 500),
-      delay: -hash(col, 5, 900),
-      lo: 0.25,
-    }),
-  },
-  speaking: {
-    blink: (_i: number, _row: number, col: number) => ({
-      duration: 0.4 + hash(col, 6, 350),
-      delay: -hash(col, 7, 700),
-      lo: 0.2,
-    }),
-  },
-  recording: {
-    glyph: RECORD,
-    dim: 0.12,
-    blink: () => ({ duration: 1.4, delay: 0, lo: 0.3 }),
-  },
-  success: { glyph: CHECK },
-  error: { glyph: CROSS, blink: () => ({ duration: 1.1, delay: 0, lo: 0.4 }) },
-  warning: { glyph: BANG, blink: () => ({ duration: 1.6, delay: 0, lo: 0.45 }) },
-  info: { glyph: INFO },
-  paused: { glyph: PAUSE },
-  stopped: { glyph: STOP },
-  offline: { base: 0.15 },
-  terminal: { glyph: PROMPT },
-  "terminal-active": {
-    glyph: PROMPT,
-    blink: () => ({ duration: 1.7, delay: 0, lo: 0.35 }),
-  },
-} satisfies Record<string, StateConfig>;
-
-export type DotMatrixState = keyof typeof STATES;
-
-export const dotMatrixStates = Object.keys(STATES) as ReadonlyArray<DotMatrixState>;
-export const dotMatrixAnimatedStates = dotMatrixStates.filter((state) => "blink" in STATES[state]);
-
-export type DotMatrixSizeRole = "compact" | "inline" | "prominent";
-
-export const dotMatrixSizeClass: Record<DotMatrixSizeRole, string> = {
-  compact: "size-[max(12px,0.85em)]",
-  inline: "size-[1em]",
-  prominent: "size-[max(16px,1.1em)]",
-};
-
-export type DotMatrixProps = Omit<React.ComponentProps<"span">, "children"> & {
-  state: DotMatrixState;
-  sizeRole: DotMatrixSizeRole;
-  label?: string;
-};
-
-const TONE: Record<DotMatrixState, string> = {
-  idle: "text-muted-foreground",
-  loading: "text-status-active",
-  orchestrating: "text-status-active",
-  queued: "text-muted-foreground",
-  thinking: "text-status-active",
-  streaming: "text-status-active",
-  searching: "text-status-active",
-  syncing: "text-status-active",
-  connecting: "text-status-active",
-  waiting: "text-foreground",
-  uploading: "text-status-active",
-  downloading: "text-status-active",
-  listening: "text-status-active",
-  speaking: "text-status-active",
-  recording: "text-destructive",
-  success: "text-success",
-  error: "text-destructive",
-  warning: "text-warning",
-  info: "text-status-info",
-  paused: "text-muted-foreground",
-  stopped: "text-muted-foreground",
-  offline: "text-muted-foreground",
-  terminal: "text-muted-foreground",
-  "terminal-active": "text-foreground",
-};
-
-/**
- * A 5×5 status indicator adapted from assistant-ui's standalone Dot Matrix.
- * Each state combines a stable pattern, motion, and semantic tone. Active
- * states follow the theme through `text-status-active`; information uses
- * `text-status-info`; waiting and active terminal identity stay neutral. The required
- * size role is authoritative, while callers may override tone with className.
- */
-function DotMatrix({ className, state, sizeRole, label, ...props }: DotMatrixProps) {
-  const config: StateConfig = STATES[state];
-  return (
-    <span
-      role={label ? "img" : undefined}
-      aria-label={label}
-      aria-hidden={label ? undefined : true}
-      data-slot="dot-matrix"
-      data-state={state}
-      data-size-role={sizeRole}
-      className={cn("inline-flex shrink-0", TONE[state], className, dotMatrixSizeClass[sizeRole])}
-      {...props}
-    >
-      <svg
-        aria-hidden
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        className="size-full"
-        style={{ color: "inherit" }}
-      >
-        {DOT_INDEXES.map((i) => {
-          const row = Math.floor(i / GRID);
-          const col = i % GRID;
-          const on = !config.glyph || config.glyph.has(i);
-          const hi = on ? (config.base ?? 1) : (config.dim ?? 0.15);
-          const blink = on ? config.blink?.(i, row, col) : undefined;
-          return (
-            <circle
-              key={i}
-              className="dot-matrix-dot"
-              cx={2 + col * 4}
-              cy={2 + row * 4}
-              r={1.3}
-              data-animated={blink ? (config.chase ? "chase" : "true") : undefined}
-              style={
-                {
-                  opacity: hi,
-                  "--dot-matrix-hi": hi,
-                  "--dot-matrix-lo": blink?.lo ?? hi,
-                  ...(blink
-                    ? {
-                        animationDuration: `${blink.duration}s`,
-                        animationDelay: `${blink.delay}s`,
-                      }
-                    : {}),
-                } as CSSProperties
-              }
-            />
-          );
-        })}
-      </svg>
-    </span>
-  );
-}
-
-export { DotMatrix };
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 3c5506937..31a210f5f 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -572,7 +572,7 @@ function UsageDeviceStrip({
         return (
           <span
             key={environment.environmentId}
-            className="animate-status-pulse text-muted-foreground"
+            className="animate-status-pulse text-muted-foreground motion-reduce:animate-none"
           >
             {environment.label}…
           </span>
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index bab9eec7f..830b2617d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -151,6 +151,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --animate-skeleton: skeleton 2s -1s infinite linear;
   /* Duty-cycled indicator animations: long holds with stepped ramps, so the
      compositor updates discrete frames instead of every vsync. */
+  --animate-status-pulse: status-pulse 2s infinite;
   --animate-ghost-pulse: ghost-pulse 2.4s infinite;
   --animate-status-ping: status-ping 2s infinite;
   --color-warning-foreground: var(--warning-foreground);
@@ -166,12 +167,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --color-success: var(--success);
   --color-info-foreground: var(--info-foreground);
   --color-info: var(--info);
-  --color-status-active: var(--status-active);
-  --color-status-active-foreground: var(--status-active-foreground);
-  --color-status-info: var(--status-info);
-  --color-status-active-sidebar: var(--status-active-sidebar);
-  --color-status-active-foreground-sidebar: var(--status-active-foreground-sidebar);
-  --color-status-info-sidebar: var(--status-info-sidebar);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-ring: var(--ring);
   --color-input: var(--contrast-input);
@@ -244,6 +239,21 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       opacity: 1;
     }
   }
+  @keyframes status-pulse {
+    0%,
+    40% {
+      opacity: 1;
+      animation-timing-function: steps(6);
+    }
+    50%,
+    90% {
+      opacity: 0.5;
+      animation-timing-function: steps(6);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   @keyframes status-ping {
     /* Burst first (immediate feedback for click ripples), then hold
        invisible for the rest of the cycle. Mirrors animate-ping's
@@ -261,78 +271,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 }
 
-/* Dot Matrix is adapted from assistant-ui's standalone state language. The
-   registered amplitude bounds cross-fade when a state changes. Only live states
-   receive an animation timeline. Smooth motion is the polished default; the
-   client-local Efficient preference switches those timelines to stepped frames. */
-@property --dot-matrix-hi {
-  syntax: "<number>";
-  inherits: false;
-  initial-value: 1;
-}
-@property --dot-matrix-lo {
-  syntax: "<number>";
-  inherits: false;
-  initial-value: 0.15;
-}
-@keyframes dot-matrix-blink {
-  0%,
-  100% {
-    opacity: var(--dot-matrix-hi, 1);
-  }
-  50% {
-    opacity: var(--dot-matrix-lo, 0.15);
-  }
-}
-/* Pylon's orchestrating state keeps the existing circular head and fading tail
-   so subagent and workflow activity has a distinct identity. */
-@keyframes dot-matrix-chase {
-  0% {
-    opacity: var(--dot-matrix-hi, 1);
-  }
-  12% {
-    opacity: 0.78;
-  }
-  24% {
-    opacity: 0.56;
-  }
-  36% {
-    opacity: 0.38;
-  }
-  48% {
-    opacity: 0.22;
-  }
-  60%,
-  100% {
-    opacity: var(--dot-matrix-lo, 0.15);
-  }
-}
-.dot-matrix-dot {
-  transition:
-    opacity 0.3s,
-    --dot-matrix-hi 0.3s,
-    --dot-matrix-lo 0.3s;
-}
-.dot-matrix-dot[data-animated="true"],
-.dot-matrix-dot[data-animated="chase"] {
-  animation: dot-matrix-blink 1s infinite ease-in-out;
-}
-.dot-matrix-dot[data-animated="chase"] {
-  animation-name: dot-matrix-chase;
-}
-html[data-dot-matrix-motion="efficient"] .dot-matrix-dot[data-animated="true"] {
-  animation-timing-function: steps(4);
-}
-html[data-dot-matrix-motion="efficient"] .dot-matrix-dot[data-animated="chase"] {
-  animation-timing-function: steps(2);
-}
-@media (prefers-reduced-motion: reduce) {
-  .dot-matrix-dot[data-animated="true"],
-  .dot-matrix-dot[data-animated="chase"] {
-    animation: none !important;
-  }
-}
-
 @utility surface-glass {
   background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
@@ -1514,13 +1452,6 @@ html[data-dot-matrix-motion="efficient"] .dot-matrix-dot[data-animated="chase"]
   --destructive-foreground: var(--error-foreground);
   --info: var(--color-blue-500);
   --info-foreground: var(--color-blue-700);
-  /* The standard status pair. Installed themes replace both roles below. */
-  --status-active: var(--primary);
-  --status-active-foreground: var(--status-active);
-  --status-info: #7622bf;
-  --status-active-sidebar: var(--status-active);
-  --status-active-foreground-sidebar: var(--status-active-sidebar);
-  --status-info-sidebar: var(--status-info);
   --success: var(--color-emerald-500);
   --success-foreground: var(--color-emerald-700);
   --warning: var(--color-amber-500);
@@ -1571,10 +1502,6 @@ html[data-dot-matrix-motion="efficient"] .dot-matrix-dot[data-animated="chase"]
     --border: --alpha(var(--color-white) / 6%);
     --input: --alpha(var(--color-white) / 8%);
     --info-foreground: var(--color-blue-400);
-    --status-active: #346bf1;
-    --status-active-foreground: #477cf4;
-    --status-active-foreground-sidebar: #477cf4;
-    --status-info: #e9d5ff;
     --success-foreground: var(--color-emerald-400);
     --warning-foreground: var(--color-amber-400);
     --warning-surface: color-mix(in srgb, var(--warning) 16%, transparent);
@@ -1689,12 +1616,6 @@ html[data-theme-id]:not([data-theme-id=""]) {
   --warning: var(--app-theme-warning);
   --warning-foreground: var(--app-theme-warning-foreground);
   --warning-surface: var(--app-theme-warning-surface);
-  --status-active: var(--app-theme-status-active);
-  --status-active-foreground: var(--app-theme-status-active);
-  --status-info: var(--app-theme-status-info);
-  --status-active-sidebar: var(--app-theme-status-active-sidebar);
-  --status-active-foreground-sidebar: var(--app-theme-status-active-sidebar);
-  --status-info-sidebar: var(--app-theme-status-info-sidebar);
   --update: var(--app-theme-update);
   --update-foreground: var(--app-theme-update-foreground);
   --update-surface: var(--app-theme-update-surface);
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 537488db3..7c715dff9 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -133,7 +133,6 @@ function RootRouteView() {
       <AnchoredToastProvider>
         <DocumentTitleSync />
         <ContrastAppearanceSync />
-        <DotMatrixMotionSync />
         <GlassAppearanceSync />
         <FontAppearanceSync />
         {primaryEnvironmentAuthenticated ? <AuthenticatedTracingBootstrap /> : null}
@@ -165,16 +164,6 @@ function ContrastAppearanceSync() {
   return null;
 }
 
-function DotMatrixMotionSync() {
-  const motion = useClientSettings((settings) => settings.dotMatrixMotion);
-
-  useEffect(() => {
-    document.documentElement.dataset.dotMatrixMotion = motion;
-  }, [motion]);
-
-  return null;
-}
-
 function GlassAppearanceSync() {
   const glassOpacity = useClientSettings((settings) => settings.glassOpacity);
 
diff --git a/apps/web/src/themePalette.test.ts b/apps/web/src/themePalette.test.ts
index 49f22df71..b15d394a1 100644
--- a/apps/web/src/themePalette.test.ts
+++ b/apps/web/src/themePalette.test.ts
@@ -36,12 +36,9 @@ import {
   createManagedThemeColors,
   createVividThemeColors,
   getDefaultThemeColors,
-  getStandardThemeColors,
-  getSidebarStatusColors,
   themeColorToHex,
   toCanonicalThemeColor,
   THEME_FILE_VERSION,
-  type ThemeColors,
 } from "./themePalette";
 
 function asHex(value: string): string {
@@ -82,26 +79,6 @@ function contrastRatio(first: string, second: string): number {
   return (lighter + 0.05) / (darker + 0.05);
 }
 
-function expectStatusColorsReadable(colors: ThemeColors, activeCanvasMinimum = 4.5): void {
-  expect(contrastRatio(colors.statusActive, colors.canvas)).toBeGreaterThanOrEqual(
-    activeCanvasMinimum,
-  );
-  expect(contrastRatio(colors.statusInfo, colors.canvas)).toBeGreaterThanOrEqual(4.5);
-
-  const sidebarStatus = getSidebarStatusColors(colors);
-  const sidebarSurfaces = [
-    colors.sidebar,
-    colors.sidebarRowHover,
-    colors.sidebarRowActive,
-    colors.sidebarRowSelected,
-  ];
-  for (const status of [sidebarStatus.statusActive, sidebarStatus.statusInfo]) {
-    for (const surface of sidebarSurfaces) {
-      expect(contrastRatio(status, surface)).toBeGreaterThanOrEqual(4.5);
-    }
-  }
-}
-
 describe("theme files", () => {
   it("keeps every built-in palette value in canonical OKLCH form", () => {
     for (const theme of BUILT_IN_THEMES) {
@@ -130,8 +107,6 @@ describe("theme files", () => {
     expect(contrastRatio(dark.textMuted, dark.canvas)).toBeCloseTo(5.082, 1);
     expect(light.secondaryLabel).toBe(light.textMuted);
     expect(dark.secondaryLabel).toBe(dark.textMuted);
-    expectStatusColorsReadable(light);
-    expectStatusColorsReadable(dark);
     expect(contrastRatio(light.accentForeground, light.accent)).toBeGreaterThanOrEqual(4.5);
     expect(contrastRatio(dark.accentForeground, dark.accent)).toBeGreaterThanOrEqual(4.5);
     // Status colors fall back to Pylon's standard red and amber rather than
@@ -194,7 +169,6 @@ describe("theme files", () => {
         4.5,
       );
       expect(contrastRatio(colors.sidebarForeground, colors.sidebar)).toBeGreaterThanOrEqual(4.5);
-      expectStatusColorsReadable(colors);
       // The companion action is a distinct voice, not the accent again.
       expect(colors.messageAction).not.toBe(colors.accent);
       // Update family follows the theme, not the default palette.
@@ -202,13 +176,6 @@ describe("theme files", () => {
     }
   });
 
-  it("keeps generated status roles readable for exact low-contrast seeds", () => {
-    expectStatusColorsReadable(createVividThemeColors("light", "#ffffff", "#ffff00"));
-
-    expectStatusColorsReadable(createVividThemeColors("light", "#777777", "#777777"));
-    expectStatusColorsReadable(createVividThemeColors("light", "#7407ef", "#29e2cc"));
-  });
-
   it("keys status colors off the canvas, not the appearance slot", () => {
     // Inverted seeds: a dark canvas in the light slot must still get the dark
     // status pair, or the alert foreground lands on a dark surface unreadable.
@@ -251,7 +218,7 @@ describe("theme files", () => {
     });
   });
 
-  it("imports version 1 themes while exporting the expanded version 2 schema", () => {
+  it("imports version 1 themes while exporting version 2", () => {
     const theme = parseThemeFile({
       version: 1,
       name: "Legacy theme",
@@ -259,11 +226,57 @@ describe("theme files", () => {
       colors: { accent: "#2563eb" },
     });
 
-    expect(theme.colors.statusActive).toBe(getDefaultThemeColors("light").statusActive);
-    expect(theme.colors.statusInfo).toBe(getDefaultThemeColors("light").statusInfo);
+    expect(theme.colors.accent).toBe(canonical("#2563eb"));
     expect(JSON.parse(serializeThemeFile(theme)).version).toBe(THEME_FILE_VERSION);
   });
 
+  it("accepts and drops retired status roles from shipped version 2 files", () => {
+    const theme = parseThemeFile({
+      version: 2,
+      name: "Retired status roles",
+      appearance: "light",
+      colors: {
+        accent: "#2563eb",
+        statusActive: "#1b4ed8",
+        statusInfo: "#7622bf",
+      },
+      variants: {
+        dark: {
+          accent: "#60a5fa",
+          statusActive: "#346bf1",
+          statusInfo: "#e9d5ff",
+        },
+      },
+    });
+
+    const serialized = JSON.parse(serializeThemeFile(theme));
+    expect(theme.colors.accent).toBe(canonical("#2563eb"));
+    expect(theme.variants?.dark?.accent).toBe(canonical("#60a5fa"));
+    expect(serialized.version).toBe(2);
+    expect(serialized.colors).not.toHaveProperty("statusActive");
+    expect(serialized.colors).not.toHaveProperty("statusInfo");
+    expect(serialized.variants.dark).not.toHaveProperty("statusActive");
+    expect(serialized.variants.dark).not.toHaveProperty("statusInfo");
+
+    const retiredOnly = parseThemeFile({
+      version: 2,
+      name: "Retired status roles only",
+      appearance: "light",
+      colors: {
+        statusActive: "#1b4ed8",
+        statusInfo: "#7622bf",
+      },
+      variants: {
+        dark: {
+          statusActive: "#346bf1",
+          statusInfo: "#e9d5ff",
+        },
+      },
+    });
+    expect(retiredOnly.colors).toEqual(getDefaultThemeColors("light"));
+    expect(retiredOnly.variants?.dark).toEqual(getDefaultThemeColors("dark"));
+  });
+
   it("decodes literal CSS color formats into OKLCH without dropping alpha", () => {
     const theme = parseThemeFile({
       version: THEME_FILE_VERSION,
@@ -398,15 +411,7 @@ describe("theme files", () => {
     });
 
     applyThemeColorPreview(T3_CHAT_THEME.colors, "light");
-    const sidebarStatus = getSidebarStatusColors(T3_CHAT_THEME.colors);
-    expect(setProperty).toHaveBeenCalledWith(
-      "--app-theme-status-active-sidebar",
-      sidebarStatus.statusActive,
-    );
-    expect(setProperty).toHaveBeenCalledWith(
-      "--app-theme-status-info-sidebar",
-      sidebarStatus.statusInfo,
-    );
+    expect(setProperty).toHaveBeenCalledWith("--app-theme-accent", T3_CHAT_THEME.colors.accent);
     expect(getThemePreviewSidebarArtwork()).toBe(false);
     expect(listener).toHaveBeenCalledTimes(1);
 
@@ -418,36 +423,6 @@ describe("theme files", () => {
     vi.unstubAllGlobals();
   });
 
-  it("preserves derived sidebar colors while a preview dependency is half-typed", () => {
-    const setProperty = vi.fn();
-    vi.stubGlobal("document", {
-      documentElement: {
-        classList: { toggle: vi.fn() },
-        dataset: {},
-        style: { setProperty },
-      },
-    });
-
-    applyThemeColorPreview(T3_CHAT_THEME.colors, "light");
-    applyThemeColorPreview({ ...T3_CHAT_THEME.colors, statusActive: "#" }, "light");
-    const activeSidebarCalls = setProperty.mock.calls.filter(
-      ([variable]) => variable === "--app-theme-status-active-sidebar",
-    );
-    expect(activeSidebarCalls).toHaveLength(1);
-
-    const derivedCallCount = setProperty.mock.calls.filter(([variable]) =>
-      ["--app-theme-status-active-sidebar", "--app-theme-status-info-sidebar"].includes(variable),
-    ).length;
-    applyThemeColorPreview({ ...T3_CHAT_THEME.colors, sidebarRowHover: "#" }, "light");
-    expect(
-      setProperty.mock.calls.filter(([variable]) =>
-        ["--app-theme-status-active-sidebar", "--app-theme-status-info-sidebar"].includes(variable),
-      ),
-    ).toHaveLength(derivedCallCount);
-
-    vi.unstubAllGlobals();
-  });
-
   it("keeps optional light and dark palettes under one theme id", () => {
     const theme = parseThemeFile({
       version: THEME_FILE_VERSION,
@@ -521,21 +496,6 @@ describe("theme files", () => {
   });
 
   it("includes the dual-mode maintainer themes", () => {
-    const expectedStatusActive: Readonly<
-      Record<string, Readonly<Record<"light" | "dark", string>>>
-    > = {
-      "t3-chat": { light: "#0f766e", dark: "#2dd4bf" },
-      grove: { light: "#1d4ed8", dark: "#60a5fa" },
-      ocean: { light: "#0e7490", dark: "#22d3ee" },
-      ember: { light: "#075985", dark: "#7dd3fc" },
-      iris: { light: "#0369a1", dark: "#38bdf8" },
-    };
-    for (const mode of ["light", "dark"] as const) {
-      const colors = getStandardThemeColors(mode);
-      expectStatusColorsReadable(colors, mode === "dark" ? 3 : 4.5);
-      expect(asHex(colors.statusActive)).toBe(mode === "dark" ? "#346bf1" : "#1b4ed8");
-    }
-
     for (const theme of [T3_CHAT_THEME, GROVE_THEME, OCEAN_THEME, EMBER_THEME, IRIS_THEME]) {
       expect(getThemeDefinition(theme.id)).toBe(theme);
       expect(getThemeModes(theme)).toEqual(["light", "dark"]);
@@ -549,10 +509,6 @@ describe("theme files", () => {
         expect(colors).not.toBeNull();
         expect(contrastRatio(colors!.text, colors!.canvas)).toBeGreaterThanOrEqual(4.5);
         expect(contrastRatio(colors!.textMuted, colors!.canvas)).toBeGreaterThanOrEqual(4.5);
-        expectStatusColorsReadable(colors!);
-        expect(asHex(colors!.statusActive)).toBe(expectedStatusActive[theme.id]?.[mode]);
-        expect(asHex(colors!.statusInfo)).toBe(mode === "dark" ? "#e9d5ff" : "#7622bf");
-        expect(colors!.statusActive).not.toBe(colors!.statusInfo);
         if (theme !== T3_CHAT_THEME) {
           expect(contrastRatio(colors!.textMuted, colors!.canvas)).toBeLessThan(5.5);
           expect(contrastRatio(colors!.textMuted, colors!.canvas)).toBeCloseTo(
diff --git a/apps/web/src/themePalette.ts b/apps/web/src/themePalette.ts
index f7c0a215e..e60d9e4d0 100644
--- a/apps/web/src/themePalette.ts
+++ b/apps/web/src/themePalette.ts
@@ -347,8 +347,6 @@ const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
   warning: "#fe9a00",
   warningForeground: "#bb4d00",
   warningSurface: "#fcf4e8",
-  statusActive: "#1b4ed8",
-  statusInfo: "#7622bf",
   update: "#1b4ed8",
   updateForeground: "#1b4ed8",
   updateSurface: "#e0e6f7",
@@ -409,8 +407,6 @@ const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
   warning: "#fe9a00",
   warningForeground: "#ffb900",
   warningSurface: "#312108",
-  statusActive: "#346bf1",
-  statusInfo: "#e9d5ff",
   update: "#346bf1",
   updateForeground: "#51a2ff",
   updateSurface: "#121b34",
@@ -904,67 +900,62 @@ export function createVividThemeColors(
 
   const actionHover: ThemeOklch = { ...action, L: action.L + (dark ? 0.06 : -0.06) };
 
-  return ensureReadableStatusColors(
-    {
-      ...defaults,
-      ...standardStatusColors(canvasRgb),
-      canvas: themeRgbToThemeColor(canvasRgb),
-      // The top bar shares the canvas so the main panel reads as one surface.
-      chrome: themeRgbToThemeColor(canvasRgb),
-      toolbar: themeRgbToThemeColor(canvasRgb),
-      toolbarForeground: themeRgbToThemeColor(textRgb),
-      toolbarBorder: themeColor(surfaceAt(dark ? 0.14 : 0.1, Math.min(0.08, accent.C * 0.4))),
-      toolbarControl: themeColor(surfaceAt(dark ? 0.09 : 0.05, tintC * 1.3)),
-      toolbarControlForeground: themeRgbToThemeColor(textRgb),
-      toolbarControlHover: themeColor(surfaceAt(dark ? 0.14 : 0.09, tintC * 1.6)),
-      surface: themeColor(surface),
-      surfaceRaised: themeColor(surfaceRaised),
-      surfaceOverlay: themeColor(surfaceOverlay),
-      text: themeRgbToThemeColor(textRgb),
-      textMuted: themeRgbToThemeColor(textMutedRgb),
-      border: themeColor(border),
-      input: themeColor(input),
-      focus: themeRgbToThemeColor(accentRgb),
-      accent: themeRgbToThemeColor(accentRgb),
-      accentForeground: themeRgbToThemeColor(accentForeground),
-      secondary: themeColor(secondary),
-      secondaryForeground: foregroundOn(secondaryRgb),
-      muted: themeColor(muted),
-      mutedForeground,
-      placeholder,
-      secondaryLabel: themeRgbToThemeColor(textMutedRgb),
-      iconMuted: themeRgbToThemeColor(textMutedRgb),
-      statusActive: themeRgbToThemeColor(accentRgb),
-      statusInfo: toCanonicalThemeColor(dark ? "#c084fc" : "#9333ea")!,
-      update: themeRgbToThemeColor(accentRgb),
-      updateForeground: foregroundOn(themeOklchToRgb(updateSurface)),
-      updateSurface: themeColor(updateSurface),
-      accentSurface: themeColor(accentSurface),
-      accentSurfaceForeground: foregroundOn(accentSurfaceRgb),
-      messageSurface: themeColor(messageSurface),
-      messageForeground: foregroundOn(messageSurfaceRgb),
-      messageAction: themeRgbToThemeColor(actionRgb),
-      messageActionForeground: themeRgbToThemeColor(actionForeground),
-      messageActionHover: themeColor(actionHover),
-      codeBackground: themeColor(codeBackground),
-      codeForeground: themeRgbToThemeColor(textRgb),
-      sidebar: themeColor(sidebar),
-      sidebarForeground: foregroundOn(sidebarRgb),
-      sidebarMutedForeground: themeRgbToThemeColor(standardMutedThemeText(sidebarRgb, textRgb)),
-      sidebarControlSurface: themeColor(surfaceAt(dark ? 0.1 : 0.07, tintC * 1.5)),
-      sidebarRowHover: themeColor(surfaceAt(dark ? 0.08 : 0.06, Math.min(0.08, accent.C * 0.45))),
-      sidebarRowActive: themeColor(surfaceAt(dark ? 0.12 : 0.09, Math.min(0.1, accent.C * 0.55))),
-      sidebarRowSelected: themeColor(surfaceAt(dark ? 0.14 : 0.1, Math.min(0.11, accent.C * 0.6))),
-      sidebarBorder: themeColor(surfaceAt(dark ? 0.17 : 0.12, Math.min(0.08, accent.C * 0.4))),
-      terminalBackground: themeRgbToThemeColor(canvasRgb),
-      terminalForeground: themeRgbToThemeColor(textRgb),
-      terminalCursor: themeRgbToThemeColor(accentRgb),
-      terminalSelection: themeColor(surfaceAt(dark ? 0.18 : 0.12, Math.min(0.12, accent.C * 0.55))),
-      terminalScrollbar: themeColor(surfaceAt(dark ? 0.22 : 0.16, tintC)),
-      terminalScrollbarHover: themeColor(surfaceAt(dark ? 0.3 : 0.22, tintC)),
-    },
-    { constrainSidebarSurfaces: true },
-  );
+  return {
+    ...defaults,
+    ...standardStatusColors(canvasRgb),
+    canvas: themeRgbToThemeColor(canvasRgb),
+    // The top bar shares the canvas so the main panel reads as one surface.
+    chrome: themeRgbToThemeColor(canvasRgb),
+    toolbar: themeRgbToThemeColor(canvasRgb),
+    toolbarForeground: themeRgbToThemeColor(textRgb),
+    toolbarBorder: themeColor(surfaceAt(dark ? 0.14 : 0.1, Math.min(0.08, accent.C * 0.4))),
+    toolbarControl: themeColor(surfaceAt(dark ? 0.09 : 0.05, tintC * 1.3)),
+    toolbarControlForeground: themeRgbToThemeColor(textRgb),
+    toolbarControlHover: themeColor(surfaceAt(dark ? 0.14 : 0.09, tintC * 1.6)),
+    surface: themeColor(surface),
+    surfaceRaised: themeColor(surfaceRaised),
+    surfaceOverlay: themeColor(surfaceOverlay),
+    text: themeRgbToThemeColor(textRgb),
+    textMuted: themeRgbToThemeColor(textMutedRgb),
+    border: themeColor(border),
+    input: themeColor(input),
+    focus: themeRgbToThemeColor(accentRgb),
+    accent: themeRgbToThemeColor(accentRgb),
+    accentForeground: themeRgbToThemeColor(accentForeground),
+    secondary: themeColor(secondary),
+    secondaryForeground: foregroundOn(secondaryRgb),
+    muted: themeColor(muted),
+    mutedForeground,
+    placeholder,
+    secondaryLabel: themeRgbToThemeColor(textMutedRgb),
+    iconMuted: themeRgbToThemeColor(textMutedRgb),
+    update: themeRgbToThemeColor(accentRgb),
+    updateForeground: foregroundOn(themeOklchToRgb(updateSurface)),
+    updateSurface: themeColor(updateSurface),
+    accentSurface: themeColor(accentSurface),
+    accentSurfaceForeground: foregroundOn(accentSurfaceRgb),
+    messageSurface: themeColor(messageSurface),
+    messageForeground: foregroundOn(messageSurfaceRgb),
+    messageAction: themeRgbToThemeColor(actionRgb),
+    messageActionForeground: themeRgbToThemeColor(actionForeground),
+    messageActionHover: themeColor(actionHover),
+    codeBackground: themeColor(codeBackground),
+    codeForeground: themeRgbToThemeColor(textRgb),
+    sidebar: themeColor(sidebar),
+    sidebarForeground: foregroundOn(sidebarRgb),
+    sidebarMutedForeground: themeRgbToThemeColor(standardMutedThemeText(sidebarRgb, textRgb)),
+    sidebarControlSurface: themeColor(surfaceAt(dark ? 0.1 : 0.07, tintC * 1.5)),
+    sidebarRowHover: themeColor(surfaceAt(dark ? 0.08 : 0.06, Math.min(0.08, accent.C * 0.45))),
+    sidebarRowActive: themeColor(surfaceAt(dark ? 0.12 : 0.09, Math.min(0.1, accent.C * 0.55))),
+    sidebarRowSelected: themeColor(surfaceAt(dark ? 0.14 : 0.1, Math.min(0.11, accent.C * 0.6))),
+    sidebarBorder: themeColor(surfaceAt(dark ? 0.17 : 0.12, Math.min(0.08, accent.C * 0.4))),
+    terminalBackground: themeRgbToThemeColor(canvasRgb),
+    terminalForeground: themeRgbToThemeColor(textRgb),
+    terminalCursor: themeRgbToThemeColor(accentRgb),
+    terminalSelection: themeColor(surfaceAt(dark ? 0.18 : 0.12, Math.min(0.12, accent.C * 0.55))),
+    terminalScrollbar: themeColor(surfaceAt(dark ? 0.22 : 0.16, tintC)),
+    terminalScrollbarHover: themeColor(surfaceAt(dark ? 0.3 : 0.22, tintC)),
+  };
 }
 
 function themeContrastRatio(first: ThemeRgbColor, second: ThemeRgbColor): number {
@@ -975,120 +966,6 @@ function themeContrastRatio(first: ThemeRgbColor, second: ThemeRgbColor): number
   return (lighter + 0.05) / (darker + 0.05);
 }
 
-/** Keep small status text readable on every row state and neutral mobile pill surface. */
-function readableStatusForeground(
-  preferred: ThemeRgbColor,
-  surfaces: readonly [ThemeRgbColor, ...ThemeRgbColor[]],
-): ThemeRgbColor {
-  const base = themeRgbToOklch(preferred);
-  const minimumContrast = (candidate: ThemeRgbColor) =>
-    Math.min(...surfaces.map((surface) => themeContrastRatio(candidate, surface)));
-  if (minimumContrast(preferred) >= 4.6) return preferred;
-
-  const darker = { ...base, L: 0 };
-  const lighter = { ...base, L: 1 };
-  const darkerContrast = minimumContrast(themeOklchToRgb(darker));
-  const lighterContrast = minimumContrast(themeOklchToRgb(lighter));
-  const direction = lighterContrast >= darkerContrast ? "lighter" : "darker";
-  const endpoint = direction === "lighter" ? lighter : darker;
-  if (Math.max(darkerContrast, lighterContrast) < 4.6) return themeOklchToRgb(endpoint);
-
-  let low = direction === "lighter" ? base.L : 0;
-  let high = direction === "lighter" ? 1 : base.L;
-  for (let index = 0; index < 18; index += 1) {
-    const lightness = (low + high) / 2;
-    const readable = minimumContrast(themeOklchToRgb({ ...base, L: lightness })) >= 4.6;
-    if (direction === "lighter") {
-      if (readable) high = lightness;
-      else low = lightness;
-    } else if (readable) {
-      low = lightness;
-    } else {
-      high = lightness;
-    }
-  }
-  return themeOklchToRgb({ ...base, L: direction === "lighter" ? high : low });
-}
-
-export function ensureReadableStatusColors(
-  colors: ThemeColors,
-  options?: { readonly constrainSidebarSurfaces?: boolean },
-): ThemeColors {
-  const canvas = parseThemeRgbColor(colors.canvas, THEME_BLACK_FOREGROUND);
-  const statusActive = readableStatusForeground(parseThemeRgbColor(colors.statusActive, canvas), [
-    canvas,
-  ]);
-  const statusInfo = readableStatusForeground(parseThemeRgbColor(colors.statusInfo, canvas), [
-    canvas,
-  ]);
-  const resolved = {
-    ...colors,
-    statusActive: themeRgbToThemeColor(statusActive),
-    statusInfo: themeRgbToThemeColor(statusInfo),
-  };
-  if (!options?.constrainSidebarSurfaces) return resolved;
-
-  const statuses = [statusActive, statusInfo] as const;
-  const clearsStatusContrast = (surface: ThemeRgbColor) =>
-    statuses.every((status) => themeContrastRatio(status, surface) >= 4.6);
-  const readableStatusSurface = (value: string): string => {
-    const surface = parseThemeRgbColor(value, canvas);
-    if (clearsStatusContrast(surface)) return value;
-    let low = 0;
-    let high = 1;
-    for (let index = 0; index < 18; index += 1) {
-      const amount = (low + high) / 2;
-      if (clearsStatusContrast(mixThemeRgbColors(surface, canvas, amount))) high = amount;
-      else low = amount;
-    }
-    return themeRgbToThemeColor(mixThemeRgbColors(surface, canvas, high));
-  };
-
-  const sidebar = readableStatusSurface(colors.sidebar);
-  const sidebarRgb = parseThemeRgbColor(sidebar, canvas);
-  const readableSidebarText = (value: string, fallback: string): string => {
-    const preferred = parseThemeRgbColor(value, canvas);
-    if (themeContrastRatio(preferred, sidebarRgb) >= 4.5) return value;
-    const fallbackRgb = parseThemeRgbColor(fallback, canvas);
-    return themeRgbToThemeColor(
-      themeContrastRatio(fallbackRgb, sidebarRgb) >= 4.5
-        ? fallbackRgb
-        : readableThemeForeground(sidebarRgb),
-    );
-  };
-
-  return {
-    ...resolved,
-    sidebar,
-    sidebarForeground: readableSidebarText(colors.sidebarForeground, colors.text),
-    sidebarMutedForeground: readableSidebarText(colors.sidebarMutedForeground, colors.textMuted),
-    sidebarRowHover: readableStatusSurface(colors.sidebarRowHover),
-    sidebarRowActive: readableStatusSurface(colors.sidebarRowActive),
-    sidebarRowSelected: readableStatusSurface(colors.sidebarRowSelected),
-  };
-}
-
-export function getSidebarStatusColors(colors: ThemeColors): {
-  readonly statusActive: string;
-  readonly statusInfo: string;
-} {
-  const fallback = parseThemeRgbColor(colors.sidebar, THEME_BLACK_FOREGROUND);
-  const surfaces = [
-    colors.sidebar,
-    colors.sidebarRowHover,
-    colors.sidebarRowActive,
-    colors.sidebarRowSelected,
-  ].map((color) => parseThemeRgbColor(color, fallback)) as [ThemeRgbColor, ...ThemeRgbColor[]];
-  return {
-    statusActive: themeRgbToThemeColor(
-      readableStatusForeground(parseThemeRgbColor(colors.statusActive, fallback), surfaces),
-    ),
-    statusInfo: themeRgbToThemeColor(
-      readableStatusForeground(parseThemeRgbColor(colors.statusInfo, fallback), surfaces),
-    ),
-  };
-}
-
 function readableThemeForeground(background: ThemeRgbColor): ThemeRgbColor {
   const lightContrast = themeContrastRatio(background, THEME_LIGHT_FOREGROUND);
   const darkContrast = themeContrastRatio(background, THEME_DARK_FOREGROUND);
@@ -1264,96 +1141,86 @@ export function createManagedThemeColors(
     appearance === "dark" ? THEME_WHITE_FOREGROUND : THEME_BLACK_FOREGROUND,
     0.35,
   );
-  const statusInfo =
-    themeRelativeLuminance(canvas) < 0.179
-      ? toCanonicalThemeColor("#c084fc")!
-      : toCanonicalThemeColor("#9333ea")!;
-
-  return ensureReadableStatusColors(
-    {
-      ...defaults,
-      ...standardStatusColors(canvas),
-      statusActive: themeRgbToThemeColor(accent),
-      statusInfo,
-      update: themeRgbToThemeColor(accent),
-      updateForeground: themeRgbToThemeColor(updateForeground),
-      updateSurface: themeRgbToThemeColor(updateSurface),
-      canvas: themeRgbToThemeColor(canvas),
-      chrome: themeRgbToThemeColor(chrome),
-      toolbar: themeRgbToThemeColor(chrome),
-      toolbarForeground: themeRgbToThemeColor(text),
-      toolbarBorder: themeRgbToThemeColor(toolbarBorder),
-      toolbarControl: themeRgbToThemeColor(toolbarControl),
-      toolbarControlForeground: themeRgbToThemeColor(text),
-      toolbarControlHover: themeRgbToThemeColor(accentSurface),
-      surface: themeRgbToThemeColor(canvas),
-      surfaceRaised: themeRgbToThemeColor(surfaceRaised),
-      surfaceOverlay: themeRgbToThemeColor(surfaceOverlay),
-      text: themeRgbToThemeColor(text),
-      textMuted: themeRgbToThemeColor(textMuted),
-      // Borders blend through the accent before lightening so control chrome
-      // carries the theme hue like the hand-tuned palettes (#5c345b, #e0d3e1)
-      // instead of flattening to grey.
-      border: themeRgbToThemeColor(
-        mixThemeRgbColors(
-          mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.22 : 0.1),
-          text,
-          0.1,
-        ),
-      ),
-      input: themeRgbToThemeColor(
-        mixThemeRgbColors(
-          mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.3 : 0.14),
-          text,
-          appearance === "dark" ? 0.14 : 0.13,
-        ),
-      ),
-      focus: themeRgbToThemeColor(accent),
-      accent: themeRgbToThemeColor(accent),
-      accentForeground: themeRgbToThemeColor(accentForeground),
-      secondary: themeRgbToThemeColor(secondary),
-      secondaryForeground: themeRgbToThemeColor(readableThemeForeground(secondary)),
-      muted: themeRgbToThemeColor(muted),
-      mutedForeground: themeRgbToThemeColor(mutedForeground),
-      placeholder: themeRgbToThemeColor(placeholder),
-      secondaryLabel: themeRgbToThemeColor(textMuted),
-      iconMuted: themeRgbToThemeColor(textMuted),
-      accentSurface: themeRgbToThemeColor(accentSurface),
-      accentSurfaceForeground: themeRgbToThemeColor(readableThemeForeground(accentSurface)),
-      messageSurface: themeRgbToThemeColor(messageSurface),
-      messageForeground: themeRgbToThemeColor(readableThemeForeground(messageSurface)),
-      messageAction: themeRgbToThemeColor(accent),
-      messageActionForeground: themeRgbToThemeColor(accentForeground),
-      messageActionHover: themeRgbToThemeColor(messageActionHover),
-      codeBackground: themeRgbToThemeColor(codeBackground),
-      codeForeground: themeRgbToThemeColor(readableThemeForeground(codeBackground)),
-      sidebar: themeRgbToThemeColor(sidebar),
-      sidebarForeground: themeRgbToThemeColor(readableThemeForeground(sidebar)),
-      sidebarMutedForeground: themeRgbToThemeColor(standardMutedThemeText(sidebar, text)),
-      sidebarControlSurface: themeRgbToThemeColor(
-        mixThemeRgbColors(sidebar, text, appearance === "dark" ? 0.16 : 0.08),
-      ),
-      sidebarRowHover: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.12)),
-      sidebarRowActive: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.2)),
-      sidebarRowSelected: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.24)),
-      sidebarBorder: themeRgbToThemeColor(
-        mixThemeRgbColors(sidebar, text, appearance === "dark" ? 0.35 : 0.12),
-      ),
-      terminalBackground: themeRgbToThemeColor(terminalBackground),
-      terminalForeground: themeRgbToThemeColor(readableThemeForeground(terminalBackground)),
-      terminalCursor: themeRgbToThemeColor(accent),
-      terminalSelection: themeRgbToThemeColor(
-        mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.35 : 0.18),
-      ),
-      terminalScrollbar: themeRgbToThemeColor(
-        mixThemeRgbColors(canvas, text, appearance === "dark" ? 0.42 : 0.22),
+  return {
+    ...defaults,
+    ...standardStatusColors(canvas),
+    update: themeRgbToThemeColor(accent),
+    updateForeground: themeRgbToThemeColor(updateForeground),
+    updateSurface: themeRgbToThemeColor(updateSurface),
+    canvas: themeRgbToThemeColor(canvas),
+    chrome: themeRgbToThemeColor(chrome),
+    toolbar: themeRgbToThemeColor(chrome),
+    toolbarForeground: themeRgbToThemeColor(text),
+    toolbarBorder: themeRgbToThemeColor(toolbarBorder),
+    toolbarControl: themeRgbToThemeColor(toolbarControl),
+    toolbarControlForeground: themeRgbToThemeColor(text),
+    toolbarControlHover: themeRgbToThemeColor(accentSurface),
+    surface: themeRgbToThemeColor(canvas),
+    surfaceRaised: themeRgbToThemeColor(surfaceRaised),
+    surfaceOverlay: themeRgbToThemeColor(surfaceOverlay),
+    text: themeRgbToThemeColor(text),
+    textMuted: themeRgbToThemeColor(textMuted),
+    // Borders blend through the accent before lightening so control chrome
+    // carries the theme hue like the hand-tuned palettes (#5c345b, #e0d3e1)
+    // instead of flattening to grey.
+    border: themeRgbToThemeColor(
+      mixThemeRgbColors(
+        mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.22 : 0.1),
+        text,
+        0.1,
       ),
-      terminalScrollbarHover: themeRgbToThemeColor(
-        mixThemeRgbColors(canvas, text, appearance === "dark" ? 0.55 : 0.32),
+    ),
+    input: themeRgbToThemeColor(
+      mixThemeRgbColors(
+        mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.3 : 0.14),
+        text,
+        appearance === "dark" ? 0.14 : 0.13,
       ),
-    },
-    { constrainSidebarSurfaces: true },
-  );
+    ),
+    focus: themeRgbToThemeColor(accent),
+    accent: themeRgbToThemeColor(accent),
+    accentForeground: themeRgbToThemeColor(accentForeground),
+    secondary: themeRgbToThemeColor(secondary),
+    secondaryForeground: themeRgbToThemeColor(readableThemeForeground(secondary)),
+    muted: themeRgbToThemeColor(muted),
+    mutedForeground: themeRgbToThemeColor(mutedForeground),
+    placeholder: themeRgbToThemeColor(placeholder),
+    secondaryLabel: themeRgbToThemeColor(textMuted),
+    iconMuted: themeRgbToThemeColor(textMuted),
+    accentSurface: themeRgbToThemeColor(accentSurface),
+    accentSurfaceForeground: themeRgbToThemeColor(readableThemeForeground(accentSurface)),
+    messageSurface: themeRgbToThemeColor(messageSurface),
+    messageForeground: themeRgbToThemeColor(readableThemeForeground(messageSurface)),
+    messageAction: themeRgbToThemeColor(accent),
+    messageActionForeground: themeRgbToThemeColor(accentForeground),
+    messageActionHover: themeRgbToThemeColor(messageActionHover),
+    codeBackground: themeRgbToThemeColor(codeBackground),
+    codeForeground: themeRgbToThemeColor(readableThemeForeground(codeBackground)),
+    sidebar: themeRgbToThemeColor(sidebar),
+    sidebarForeground: themeRgbToThemeColor(readableThemeForeground(sidebar)),
+    sidebarMutedForeground: themeRgbToThemeColor(standardMutedThemeText(sidebar, text)),
+    sidebarControlSurface: themeRgbToThemeColor(
+      mixThemeRgbColors(sidebar, text, appearance === "dark" ? 0.16 : 0.08),
+    ),
+    sidebarRowHover: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.12)),
+    sidebarRowActive: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.2)),
+    sidebarRowSelected: themeRgbToThemeColor(mixThemeRgbColors(sidebar, accent, 0.24)),
+    sidebarBorder: themeRgbToThemeColor(
+      mixThemeRgbColors(sidebar, text, appearance === "dark" ? 0.35 : 0.12),
+    ),
+    terminalBackground: themeRgbToThemeColor(terminalBackground),
+    terminalForeground: themeRgbToThemeColor(readableThemeForeground(terminalBackground)),
+    terminalCursor: themeRgbToThemeColor(accent),
+    terminalSelection: themeRgbToThemeColor(
+      mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.35 : 0.18),
+    ),
+    terminalScrollbar: themeRgbToThemeColor(
+      mixThemeRgbColors(canvas, text, appearance === "dark" ? 0.42 : 0.22),
+    ),
+    terminalScrollbarHover: themeRgbToThemeColor(
+      mixThemeRgbColors(canvas, text, appearance === "dark" ? 0.55 : 0.32),
+    ),
+  };
 }
 
 /** Theme-file defaults follow the flagship palette for the requested mode. */
@@ -1801,12 +1668,22 @@ export function removeCustomThemes(themeIds: ReadonlyArray<string>): void {
   );
 }
 
-function parseThemeColorOverrides(value: unknown): ThemeColorOverrides {
+const RETIRED_V2_THEME_COLOR_ROLES = new Set(["statusActive", "statusInfo"]);
+
+function parseThemeColorOverrides(
+  value: unknown,
+  options?: { readonly ignoreRetiredV2Roles?: boolean },
+): ThemeColorOverrides {
   if (!isRecord(value)) throw new Error("Theme colors must be objects.");
 
   const overrides: Partial<Record<ThemeColorRole, string>> = {};
+  let retiredRoleCount = 0;
   for (const [role, color] of Object.entries(value)) {
     if (!THEME_COLOR_ROLE_SET.has(role)) {
+      if (options?.ignoreRetiredV2Roles && RETIRED_V2_THEME_COLOR_ROLES.has(role)) {
+        retiredRoleCount += 1;
+        continue;
+      }
       throw new Error(`"${role}" is not a supported theme color role.`);
     }
     const normalized = toCanonicalThemeColor(color);
@@ -1817,7 +1694,7 @@ function parseThemeColorOverrides(value: unknown): ThemeColorOverrides {
     }
     overrides[role as ThemeColorRole] = normalized;
   }
-  if (Object.keys(overrides).length === 0) {
+  if (Object.keys(overrides).length === 0 && retiredRoleCount === 0) {
     throw new Error("Add at least one color role to the theme file.");
   }
   return overrides;
@@ -1850,7 +1727,8 @@ export function parseThemeFile(value: unknown): ThemeDefinition {
     throw new Error(`The theme id "${id}" is reserved.`);
   }
 
-  const overrides = parseThemeColorOverrides(rawColors);
+  const parseOptions = { ignoreRetiredV2Roles: value.version === 2 };
+  const overrides = parseThemeColorOverrides(rawColors, parseOptions);
   const collection = parseThemeCollection(value.collection);
   if (value.collection !== undefined && !collection) {
     throw new Error("Theme collections need a valid id and label.");
@@ -1870,7 +1748,7 @@ export function parseThemeFile(value: unknown): ThemeDefinition {
       const variantFallback = getDefaultThemeColors(variantAppearance);
       variants[variantAppearance] = {
         ...variantFallback,
-        ...parseThemeColorOverrides(variantColors),
+        ...parseThemeColorOverrides(variantColors, parseOptions),
       };
     }
   }
@@ -1933,8 +1811,6 @@ const APP_THEME_VARIABLES: Readonly<Record<ThemeColorRole, string>> = {
   warning: "--app-theme-warning",
   warningForeground: "--app-theme-warning-foreground",
   warningSurface: "--app-theme-warning-surface",
-  statusActive: "--app-theme-status-active",
-  statusInfo: "--app-theme-status-info",
   update: "--app-theme-update",
   updateForeground: "--app-theme-update-foreground",
   updateSurface: "--app-theme-update-surface",
@@ -1963,11 +1839,6 @@ const APP_THEME_VARIABLES: Readonly<Record<ThemeColorRole, string>> = {
   terminalScrollbarHover: "--app-theme-terminal-scrollbar-hover",
 };
 
-const APP_THEME_SIDEBAR_STATUS_VARIABLES = {
-  statusActive: "--app-theme-status-active-sidebar",
-  statusInfo: "--app-theme-status-info-sidebar",
-} as const;
-
 export function getThemeColorVariable(role: ThemeColorRole): string {
   return APP_THEME_VARIABLES[role];
 }
@@ -1994,27 +1865,6 @@ export function applyThemeColorPreview(colors: ThemeColors, appearance: ThemeApp
     // A half-typed hex keeps the last good value instead of blanking the role.
     if (isThemeColor(value)) root.style.setProperty(APP_THEME_VARIABLES[role], value);
   }
-  const sidebarSurfacesAreValid = [
-    colors.sidebar,
-    colors.sidebarRowHover,
-    colors.sidebarRowActive,
-    colors.sidebarRowSelected,
-  ].every(isThemeColor);
-  if (sidebarSurfacesAreValid) {
-    const sidebarStatus = getSidebarStatusColors(colors);
-    if (isThemeColor(colors.statusActive)) {
-      root.style.setProperty(
-        APP_THEME_SIDEBAR_STATUS_VARIABLES.statusActive,
-        sidebarStatus.statusActive,
-      );
-    }
-    if (isThemeColor(colors.statusInfo)) {
-      root.style.setProperty(
-        APP_THEME_SIDEBAR_STATUS_VARIABLES.statusInfo,
-        sidebarStatus.statusInfo,
-      );
-    }
-  }
 }
 
 export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppearance): void {
@@ -2033,20 +1883,11 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
     for (const [role, value] of Object.entries(colors) as Array<[ThemeColorRole, string]>) {
       root.style.setProperty(APP_THEME_VARIABLES[role], value);
     }
-    const sidebarStatus = getSidebarStatusColors(colors);
-    root.style.setProperty(
-      APP_THEME_SIDEBAR_STATUS_VARIABLES.statusActive,
-      sidebarStatus.statusActive,
-    );
-    root.style.setProperty(APP_THEME_SIDEBAR_STATUS_VARIABLES.statusInfo, sidebarStatus.statusInfo);
     return;
   }
 
   delete root.dataset.themeId;
-  for (const variable of [
-    ...Object.values(APP_THEME_VARIABLES),
-    ...Object.values(APP_THEME_SIDEBAR_STATUS_VARIABLES),
-  ]) {
+  for (const variable of Object.values(APP_THEME_VARIABLES)) {
     root.style.removeProperty(variable);
   }
 }
diff --git a/apps/web/src/vscodeThemeImport.ts b/apps/web/src/vscodeThemeImport.ts
index 504b73687..012f3fb03 100644
--- a/apps/web/src/vscodeThemeImport.ts
+++ b/apps/web/src/vscodeThemeImport.ts
@@ -1,6 +1,5 @@
 import {
   createVividThemeColors,
-  ensureReadableStatusColors,
   getThemeModes,
   isSupportedThemeFileVersion,
   parseThemeFile,
@@ -321,14 +320,11 @@ export function parseVsCodeThemeFile(value: unknown): ThemeDefinition {
     );
   }
 
-  // Re-solve status foregrounds after the imported row surfaces replace the
-  // generated ones, then reuse the normal theme-file validation path.
-  const resolvedColors = ensureReadableStatusColors({ ...derived, ...overrides });
   return parseThemeFile({
     version: THEME_FILE_VERSION,
     name: resolveName(value),
     appearance,
-    colors: resolvedColors,
+    colors: { ...derived, ...overrides },
   });
 }
 
diff --git a/docs/internals/dot-matrix-status-language.md b/docs/internals/dot-matrix-status-language.md
deleted file mode 100644
index de850bfde..000000000
--- a/docs/internals/dot-matrix-status-language.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Dot Matrix status language
-
-Pylon uses one 5×5 Dot Matrix primitive for compact lifecycle status on the web
-and desktop surfaces. The component is adapted from assistant-ui's standalone
-Dot Matrix and adds Pylon-specific orchestration, queue, and terminal states
-for product concepts that the reference palette does not represent.
-
-## Truth contract
-
-A pattern represents a known lifecycle fact. Motion alone does not mean
-"Working," and a label must not upgrade queued or waiting work into active work.
-
-| Product fact                                     | Dot Matrix state               | Motion                              |
-| ------------------------------------------------ | ------------------------------ | ----------------------------------- |
-| Root turn is running                             | `loading`                      | deterministic twinkle               |
-| A caller has an explicit thinking fact           | `thinking`                     | diagonal wave                       |
-| Subagent or workflow is actively running         | `orchestrating`                | circular fading-tail orbit          |
-| Work is queued but has not started               | `queued`                       | static ellipsis                     |
-| Operational work is waiting or blocked           | `waiting`                      | animated ellipsis                   |
-| Watch loop is active                             | `listening`                    | column activity                     |
-| Environment is connecting                        | `connecting`                   | outward ripple                      |
-| Connection is healthy                            | `success`                      | static check                        |
-| Server update is downloading or restarting       | `downloading` / `syncing`      | directional / rotational wave       |
-| Terminal identity is inactive or complete        | `terminal`                     | static prompt and three-dot cursor  |
-| Terminal indicator is active outside a live row  | `terminal-active`              | synchronized prompt breath          |
-| Terminal work is streaming in the transcript     | `terminal` inside the live row | one foreground sweep with its label |
-| Successful or failed outcome                     | `success` / `error`            | semantic glyph                      |
-| User input, approval, or warning needs attention | `warning`                      | orange exclamation                  |
-| Paused, stopped, or offline                      | matching state                 | static                              |
-
-The full assistant-ui palette remains available for facts such as streaming,
-searching, uploading, downloading, listening, speaking, and recording. Callers
-must not select a more specific state unless Pylon has that fact.
-
-The circular `orchestrating` state is a Pylon extension. It is reserved for
-subagent and workflow coordination. Generic root work must not use it. The
-static `queued` state distinguishes pending work from animated waiting. The
-`terminal` and `terminal-active` states are Pylon extensions. Active thread and
-sidebar terminal indicators use the synchronized breathing variant. A streaming
-transcript row keeps the terminal glyph itself static and sweeps one foreground
-highlight across both the glyph and its label, avoiding competing animation.
-
-## Color
-
-Dot Matrix color follows semantic theme roles rather than raw palette classes:
-
-- active work, connection, orchestration, and streaming:
-  `text-status-active` (`statusActive` in a theme file; blue in Pylon's
-  standard palette and a deliberate cool companion color in each named theme);
-- actionable information:
-  `text-status-info` (`statusInfo`; purple in the standard palette so it
-  remains distinct from active work);
-- operational waiting and active terminal identity: `text-foreground`;
-- healthy or successful: `text-success`;
-- failure and recording: `text-destructive`;
-- thread input, warning, or approval: `text-warning`;
-- resting, queued, stopped, and disconnected: `text-muted-foreground`.
-
-The theme editor exposes Active work and Info in its Status group. The web
-runtime derives sidebar-specific variants of those two roles when a custom or
-imported theme puts navigation rows on the opposite contrast side from the
-transcript canvas; theme files still own only the two semantic source roles.
-The standard dark palette keeps the source Active blue on graphical indicators
-and uses a lighter same-hue foreground for small status labels. Named and custom
-themes use their validated Active role directly. Thread Input intentionally uses
-the warning indicator and its readable warning foreground. Provider todo
-summaries use a compact solid segment bar, while expanded todo rows use the
-compact Dot Matrix size role.
-
-## Motion and accessibility
-
-Only live or attention states receive CSS animation timelines. Static outcomes
-and resting states do not animate. Every Dot Matrix caller declares one
-surface-aware size role: compact uses `max(12px, 0.85em)` in sidebars and dense
-lists, inline uses `1em` beside ordinary text, and prominent uses
-`max(16px, 1.1em)` for transcript activity. The role is authoritative and cannot
-be replaced by a caller's incidental fixed-size utility. Dot timing is
-deterministic so server and client markup agree. The transcript Working row
-always uses the `loading` twinkle; it no longer switches animation after content
-appears. Smooth opacity timing is the client-local default. Users
-can select Efficient stepped timing in Settings → Appearance → Status language
-for lower continuous rendering cost on their device. `prefers-reduced-motion`
-overrides either choice and disables every Dot Matrix animation while keeping
-the state pattern and tone visible.
-
-A meaningful standalone matrix with a label has `role="img"`. Without a label,
-the primitive is decorative by default. Adjacent status text owns live-region
-semantics so screen readers do not announce the same state twice.
-
-## Settings catalog
-
-Settings → Appearance → Status language exposes the full state vocabulary on
-demand through View catalog. The catalog mounts its live animations only while
-open, and also shows the composed streaming terminal row, which is not a
-separate Dot Matrix state. Keep this catalog complete whenever a state is added
-or removed.
-
-## Surfaces
-
-The web primitive is shared by the browser and Electron desktop client. Mobile
-uses a separate React Native indicator and must map the same lifecycle facts,
-but it does not share this SVG or CSS implementation.
diff --git a/docs/user/status-indicators.md b/docs/user/status-indicators.md
index 80274b093..f58d0bbd7 100644
--- a/docs/user/status-indicators.md
+++ b/docs/user/status-indicators.md
@@ -1,31 +1,24 @@
 # Status indicators
 
-Pylon uses compact Dot Matrix patterns to distinguish active work, queued work,
-waiting, orchestration, connection phases, terminal activity, and settled
-outcomes. Motion represents a known active state rather than a generic
-“Working” label. Active work uses the theme's active color (blue in the
-standard theme). Info uses purple. Operational Waiting and active terminal
-identity use the normal foreground color. A thread that needs your input uses
-an orange exclamation indicator. Collapsed task progress uses a
-compact solid segment bar; expanded task rows use the same Dot Matrix language.
+Pylon uses small dots, icons, labels, and progress marks to show what needs your
+attention. Color has a consistent meaning:
 
-## Choose the motion style
+- **Sky** means a thread is working, connecting, or running delegated work.
+- **Amber** means an approval is required.
+- **Indigo** means Pylon is waiting for your input.
+- **Violet** means a plan is ready to review.
+- **Emerald** means work completed successfully.
+- **Red** means work failed.
+- **Muted** indicators are idle, offline, or waiting without requiring action.
 
-1. Open **Settings**.
-2. Select **Appearance**.
-3. Find **Status language**.
-4. Set **Status motion** to one of these options:
-   - **Smooth** uses fluid fades and is the default.
-   - **Efficient** uses stepped frames to reduce continuous rendering on the
-     current device.
+Monitoring states remain still. Active progress can pulse, but Pylon stops that
+motion when your device has Reduce Motion enabled.
 
-Your operating system’s Reduce Motion preference pauses status animation in
-either mode.
+Connection indicators use green for connected, amber for connecting or
+reconnecting, red for an error, and muted grey while offline. Connecting or
+reconnecting environments use an amber halo. Connected client sessions use a
+green liveness halo. Reduce Motion hides both halos.
 
-## Preview the status language
-
-Under **Status catalog**, select **View catalog** to inspect every pattern and
-its meaning. The catalog begins with compact, inline, and prominent size
-previews, then shows the streaming terminal-row treatment. Select **Hide
-catalog** when you are done; its live previews are removed rather than
-continuing to animate in the background.
+Task lists use `✓` for completed steps, `●` for the current step, and `○` for
+pending or passive waiting steps. A step that is specifically waiting for you
+uses an amber `●`.
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index f6c5f1c6f..9d468c584 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -49,6 +49,17 @@ describe("ClaudeSettings auto-compaction", () => {
   });
 });
 
+describe("ClientSettings retired status motion", () => {
+  it("ignores the removed setting in existing persisted data", () => {
+    expect(decodeClientSettings({ dotMatrixMotion: "smooth" })).not.toHaveProperty(
+      "dotMatrixMotion",
+    );
+    expect(decodeClientSettingsPatch({ dotMatrixMotion: "efficient" })).not.toHaveProperty(
+      "dotMatrixMotion",
+    );
+  });
+});
+
 describe("ClientSettings word wrap", () => {
   it("defaults word wrap on", () => {
     expect(decodeClientSettings({}).wordWrap).toBe(true);
@@ -98,21 +109,6 @@ describe("ClientSettings appearance contrast", () => {
   });
 });
 
-describe("ClientSettings Dot Matrix motion", () => {
-  it("defaults to smooth motion", () => {
-    expect(decodeClientSettings({}).dotMatrixMotion).toBe("smooth");
-  });
-
-  it.each(["smooth", "efficient"] as const)("accepts %s motion", (value) => {
-    expect(decodeClientSettingsPatch({ dotMatrixMotion: value }).dotMatrixMotion).toBe(value);
-  });
-
-  it("rejects unsupported motion styles", () => {
-    expect(() => decodeClientSettings({ dotMatrixMotion: "off" })).toThrow();
-    expect(() => decodeClientSettingsPatch({ dotMatrixMotion: "off" })).toThrow();
-  });
-});
-
 describe("ClientSettings environment identification", () => {
   it("defaults to artwork and accepts each presentation mode", () => {
     expect(decodeClientSettings({}).environmentIdentificationMode).toBe("artwork");
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 3fa1c2918..d665eb912 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -84,9 +84,6 @@ export const AppearanceContrast = Schema.Int.check(
 export type AppearanceContrast = typeof AppearanceContrast.Type;
 export const DEFAULT_APPEARANCE_CONTRAST: AppearanceContrast = 100;
 
-export const DotMatrixMotion = Schema.Literals(["smooth", "efficient"]);
-export type DotMatrixMotion = typeof DotMatrixMotion.Type;
-export const DEFAULT_DOT_MATRIX_MOTION: DotMatrixMotion = "smooth";
 /**
  * Font size preferences, in CSS pixels. The ranges are deliberately narrow:
  * the interface size scales every rem-based dimension in the app, so the
@@ -148,9 +145,6 @@ export const ClientSettingsSchema = Schema.Struct({
   appearanceContrast: AppearanceContrast.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_APPEARANCE_CONTRAST)),
   ),
-  dotMatrixMotion: DotMatrixMotion.pipe(
-    Schema.withDecodingDefault(Effect.succeed(DEFAULT_DOT_MATRIX_MOTION)),
-  ),
   browserDefaultViewport: PreviewViewportSetting.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_BROWSER_VIEWPORT)),
   ),
@@ -969,7 +963,6 @@ export type ServerSettingsPatch = typeof ServerSettingsPatch.Type;
 
 export const ClientSettingsPatch = Schema.Struct({
   appearanceContrast: Schema.optionalKey(AppearanceContrast),
-  dotMatrixMotion: Schema.optionalKey(DotMatrixMotion),
   browserDefaultViewport: Schema.optionalKey(PreviewViewportSetting),
   browserDefaultZoomFactor: Schema.optionalKey(PreviewZoomFactor),
   browserDefaultAppearance: Schema.optionalKey(PreviewAppearancePreference),
diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts
index 2af13d44b..919a3bfaf 100644
--- a/packages/shared/src/themePalettes.ts
+++ b/packages/shared/src/themePalettes.ts
@@ -47,8 +47,6 @@ export const THEME_COLOR_ROLES = [
   "warning",
   "warningForeground",
   "warningSurface",
-  "statusActive",
-  "statusInfo",
   "update",
   "updateForeground",
   "updateSurface",
@@ -130,8 +128,6 @@ export const T3_CHAT_THEME: ThemeDefinition = {
     warning: "oklch(0.76859 0.164659 70.08)",
     warningForeground: "oklch(0.54612 0.143036 48.949)",
     warningSurface: "oklch(0.962901 0.015297 48.56)",
-    statusActive: "oklch(0.510938 0.086055 186.391)",
-    statusInfo: "oklch(0.47267 0.221581 302.331)",
     update: "oklch(0.591646 0.217985 0.584)",
     updateForeground: "oklch(0.494754 0.190937 354.544)",
     updateSurface: "oklch(0.930264 0.036194 341.45)",
@@ -192,8 +188,6 @@ export const T3_CHAT_THEME: ThemeDefinition = {
       warning: "oklch(0.76859 0.164659 70.08)",
       warningForeground: "oklch(0.836861 0.164422 84.429)",
       warningSurface: "oklch(0.321706 0.036256 60.806)",
-      statusActive: "oklch(0.78452 0.132529 181.912)",
-      statusInfo: "oklch(0.902359 0.060408 306.703)",
       update: "oklch(0.460685 0.185347 4.099)",
       updateForeground: "oklch(0.901233 0.057189 343.694)",
       updateSurface: "oklch(0.256077 0.063004 342.914)",
@@ -261,8 +255,6 @@ export const GROVE_THEME: ThemeDefinition = {
     warning: "oklch(0.772406 0.172798 65.367)",
     warningForeground: "oklch(0.545036 0.155019 45.359)",
     warningSurface: "oklch(0.953175 0.02009 93.379)",
-    statusActive: "oklch(0.488198 0.217165 264.376)",
-    statusInfo: "oklch(0.47267 0.221581 302.331)",
     update: "oklch(0.523295 0.112292 158.089)",
     updateForeground: "oklch(0.388012 0.080082 158.768)",
     updateSurface: "oklch(0.900411 0.02384 164.795)",
@@ -323,8 +315,6 @@ export const GROVE_THEME: ThemeDefinition = {
       warning: "oklch(0.772406 0.172798 65.367)",
       warningForeground: "oklch(0.829017 0.171221 81.038)",
       warningSurface: "oklch(0.345524 0.046882 99.736)",
-      statusActive: "oklch(0.71374 0.143381 254.624)",
-      statusInfo: "oklch(0.902359 0.060408 306.703)",
       update: "oklch(0.796228 0.133058 157.319)",
       updateForeground: "oklch(0.86276 0.089288 159.704)",
       updateSurface: "oklch(0.448116 0.062637 158.86)",
@@ -392,8 +382,6 @@ export const OCEAN_THEME: ThemeDefinition = {
     warning: "oklch(0.772406 0.172798 65.367)",
     warningForeground: "oklch(0.546927 0.155556 45.359)",
     warningSurface: "oklch(0.954846 0.016009 81.731)",
-    statusActive: "oklch(0.519759 0.093565 223.128)",
-    statusInfo: "oklch(0.47267 0.221581 302.331)",
     update: "oklch(0.536684 0.120219 247.01)",
     updateForeground: "oklch(0.397497 0.084999 246.523)",
     updateSurface: "oklch(0.904165 0.021144 241.874)",
@@ -454,8 +442,6 @@ export const OCEAN_THEME: ThemeDefinition = {
       warning: "oklch(0.772406 0.172798 65.367)",
       warningForeground: "oklch(0.829017 0.171221 81.038)",
       warningSurface: "oklch(0.329449 0.028712 84.495)",
-      statusActive: "oklch(0.797116 0.133888 211.53)",
-      statusInfo: "oklch(0.902359 0.060408 306.703)",
       update: "oklch(0.758933 0.105833 241.548)",
       updateForeground: "oklch(0.840844 0.069217 240.151)",
       updateSurface: "oklch(0.424017 0.053575 243.695)",
@@ -523,8 +509,6 @@ export const EMBER_THEME: ThemeDefinition = {
     warning: "oklch(0.772406 0.172798 65.367)",
     warningForeground: "oklch(0.549154 0.156188 45.359)",
     warningSurface: "oklch(0.957148 0.020843 76.702)",
-    statusActive: "oklch(0.443376 0.100033 240.79)",
-    statusInfo: "oklch(0.47267 0.221581 302.331)",
     update: "oklch(0.552831 0.129438 44.656)",
     updateForeground: "oklch(0.408647 0.091207 45.037)",
     updateSurface: "oklch(0.907902 0.020621 49.36)",
@@ -585,8 +569,6 @@ export const EMBER_THEME: ThemeDefinition = {
       warning: "oklch(0.772406 0.172798 65.367)",
       warningForeground: "oklch(0.829017 0.171221 81.038)",
       warningSurface: "oklch(0.339137 0.055638 66.911)",
-      statusActive: "oklch(0.827586 0.101277 230.318)",
-      statusInfo: "oklch(0.902359 0.060408 306.703)",
       update: "oklch(0.762174 0.124117 52.082)",
       updateForeground: "oklch(0.841456 0.079585 53.521)",
       updateSurface: "oklch(0.426749 0.057547 50.618)",
@@ -654,8 +636,6 @@ export const IRIS_THEME: ThemeDefinition = {
     warning: "oklch(0.772406 0.172798 65.367)",
     warningForeground: "oklch(0.549154 0.156188 45.359)",
     warningSurface: "oklch(0.957054 0.016197 69.932)",
-    statusActive: "oklch(0.499982 0.11929 242.749)",
-    statusInfo: "oklch(0.47267 0.221581 302.331)",
     update: "oklch(0.525348 0.15373 294.176)",
     updateForeground: "oklch(0.389926 0.10825 294.547)",
     updateSurface: "oklch(0.90602 0.025754 299.867)",
@@ -716,8 +696,6 @@ export const IRIS_THEME: ThemeDefinition = {
       warning: "oklch(0.772406 0.172798 65.367)",
       warningForeground: "oklch(0.829017 0.171221 81.038)",
       warningSurface: "oklch(0.318952 0.033845 51.646)",
-      statusActive: "oklch(0.753513 0.138989 232.661)",
-      statusInfo: "oklch(0.902359 0.060408 306.703)",
       update: "oklch(0.671712 0.169136 293.929)",
       updateForeground: "oklch(0.785032 0.108439 296.344)",
       updateSurface: "oklch(0.381668 0.081286 294.195)",