From df38ec003cbe64e00d16cafb13e676dafe1c2cd7 Mon Sep 17 00:00:00 2001
From: Aaron Trowbridge <aaron@harmoniqs.co>
Date: Sun, 25 Oct 2026 10:28:48 -0400
Subject: [PATCH] =?UTF-8?q?feat(app):=20unify=20activity=20status=20colors?=
 =?UTF-8?q?=20=E2=80=94=20blue=20running,=20amber=20attention?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One activity vocabulary (--activity-{idle,running,attention,success,error}
plus -soft fills) aliasing the v2 state tokens replaces the raw-hex
--status-* tokens. Session tab status gains an attention state
(error > attention > running > unread > idle) shared by the tab strip,
sessions dropdown, home and sidebar. Run, connection, MCP, LSP, server,
vault and devtools dots map onto the same roles, carry accessible
labels, and share one reduced-motion-aware pulse. Yellow no longer
encodes any state.

Refs #378
---
 packages/app/CONTEXT.md                       |  28 +++++
 .../app/src/components/connection-banner.tsx  |  15 ++-
 .../app/src/components/dialog-new-project.tsx |   2 +-
 .../app/src/components/server/server-row.tsx  |  28 +++--
 .../session/context-warning-banner.tsx        |   4 +-
 .../settings-v2/developer-tools.tsx           |  22 ++--
 .../src/components/status-popover-body.tsx    |  22 +---
 .../status-popover-indicator.test.ts          |  45 ++++---
 .../components/status-popover-indicator.ts    |  33 +++--
 .../app/src/components/status-popover.tsx     |  53 +++++---
 packages/app/src/design-polish.css            |  91 ++++++++++----
 packages/app/src/pages/home/legacy-home.tsx   |  16 +--
 .../pages/layout/session-tab-status.test.ts   |  33 ++++-
 .../src/pages/layout/session-tab-status.tsx   |  48 +++++---
 .../app/src/pages/layout/sidebar-items.tsx    |  83 ++++++++-----
 .../src/pages/layout/sidebar-workspace.tsx    |   4 +-
 .../pages/session/v2/lineage-ledger-panel.css |   4 +-
 .../src/server/amicode/widget-frame-html.ts   |   4 +-
 .../test/server/amicode-widget-frame.test.ts  |   6 +
 .../session-review-file-preview-v2.tsx        |  16 ++-
 packages/ui/src/amicode/activity-dot.tsx      |  22 ++++
 packages/ui/src/amicode/activity.test.ts      |  57 +++++++++
 packages/ui/src/amicode/activity.ts           |  76 ++++++++++++
 packages/ui/src/amicode/amico-presence.css    |  28 +----
 .../ui/src/amicode/amico-presence.stories.tsx |   2 -
 packages/ui/src/amicode/amicode.css           | 113 +++++++++++-------
 packages/ui/src/amicode/calibration-view.tsx  |   2 +-
 packages/ui/src/amicode/connection-icon.tsx   |  28 ++---
 packages/ui/src/amicode/connections-tab.tsx   |  22 ++--
 packages/ui/src/amicode/device-view.tsx       |   4 +-
 packages/ui/src/amicode/run-view.tsx          |  14 +--
 packages/ui/src/amicode/run-window.tsx        |  25 ++--
 packages/ui/src/amicode/vaults-tab.tsx        |  17 +--
 .../ui/src/components/amicode-activity.tsx    |  12 ++
 packages/ui/src/components/card.css           |   2 +-
 packages/ui/src/components/card.tsx           |  11 +-
 36 files changed, 664 insertions(+), 328 deletions(-)
 create mode 100644 packages/ui/src/amicode/activity-dot.tsx
 create mode 100644 packages/ui/src/amicode/activity.test.ts
 create mode 100644 packages/ui/src/amicode/activity.ts
 create mode 100644 packages/ui/src/components/amicode-activity.tsx

diff --git a/packages/app/CONTEXT.md b/packages/app/CONTEXT.md
index 53a5f5e8f0..7a8bf1bde4 100644
--- a/packages/app/CONTEXT.md
+++ b/packages/app/CONTEXT.md
@@ -92,6 +92,34 @@ It persists until onboarding is complete and then disappears; it never gates the
 _Avoid_: Onboarding modal, wizard (the wizard is the conversational interview; the nudge
 only surfaces its state), setup wall
 
+### Activity vocabulary
+
+**Activity**:
+The one semantic state set every status surface speaks — session dots (tab strip,
+sessions dropdown, sidebar, home), run status (run window, run view), health dots
+(connection, MCP, LSP, server, vault), build status, and status banners. Five roles,
+each a `--activity-*` token in `src/design-polish.css` (solid dot colour plus a `-soft`
+fill) aliasing the theme's v2 state tokens so light and dark move together:
+
+| Role | Colour | Means |
+| --- | --- | --- |
+| `running` | blue | in progress — working, solving, pending, validating |
+| `attention` | amber | waiting on you — permission, question, needs auth, expired, drift, stalled |
+| `success` | green | done-unread, healthy, finished |
+| `error` | red | failed, unreachable |
+| `idle` | grey | done-seen, aborted, stopped, disabled |
+
+A session's tab status ranks **error > attention > running > done-unread > idle**. Running
+dots share one reduced-motion-aware pulse (`.amc-activity-pulse`). Colour is never the
+only signal: every status dot carries an accessible label or sits beside text that
+names the state.
+
+**Yellow never encodes a state.** Yellow is brand and selection only (the `--accent`
+family). Amico's presence — the thought-rail harmonic dot, the working lane, the
+thinking wave, the mark — is brand, not status, and keeps the accent.
+_Avoid_: yellow "running", gold/amber warning edges from the theme as an attention
+colour, the agent identity tint on a status spinner, raw hex status colours
+
 ## Relationships
 
 - The **Landing** is a **Chat**; the window never opens on anything else.
diff --git a/packages/app/src/components/connection-banner.tsx b/packages/app/src/components/connection-banner.tsx
index be54a988d9..8be6b59fe1 100644
--- a/packages/app/src/components/connection-banner.tsx
+++ b/packages/app/src/components/connection-banner.tsx
@@ -1,6 +1,7 @@
 import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useServerSDK } from "@/context/server-sdk"
+import { ActivityDot } from "@opencode-ai/ui/amicode-activity"
 
 // Amicode webview: a dead server (e.g. an opencode:build restart) used to read
 // as an endless "thinking" wave — the event loop retries silently every 250ms.
@@ -64,12 +65,18 @@ export function ConnectionBanner() {
           "border-radius": "var(--radius-full)",
           "font-size": "12px",
           "font-weight": 600,
-          border: "1px solid var(--v2-border-border-base, #3c3c3c)",
-          background: "var(--v2-background-bg-layer-01, #1e1e1e)",
-          "box-shadow": "0 8px 24px rgba(0, 0, 0, 0.35)",
-          color: down() ? "var(--v2-state-fg-warning, #d29922)" : "var(--v2-state-fg-success, #3fb950)",
+          display: "flex",
+          "align-items": "center",
+          gap: "var(--space-2)",
+          border: "1px solid var(--v2-border-border-base)",
+          background: "var(--v2-background-bg-layer-01)",
+          "box-shadow": "var(--elev-float)",
+          color: "var(--v2-text-text-base)",
         }}
       >
+        {/* activity dot: attention while the link is down, success once back.
+            The words carry the state; the dot is the at-a-glance colour. */}
+        <ActivityDot activity={down() ? "attention" : "success"} pulse={down()} />
         {down() ? language.t("app.server.connectionLost") : language.t("app.server.reconnected")}
       </div>
     </Show>
diff --git a/packages/app/src/components/dialog-new-project.tsx b/packages/app/src/components/dialog-new-project.tsx
index e75364a8a0..a7d7615443 100644
--- a/packages/app/src/components/dialog-new-project.tsx
+++ b/packages/app/src/components/dialog-new-project.tsx
@@ -76,7 +76,7 @@ export function DialogNewProject(props: {
 
         <Show when={error()}>
           <div class="flex items-center gap-2" role="alert" aria-live="polite" data-slot="new-project-error">
-            <div class="size-1.5 rounded-full shrink-0 bg-icon-critical-base" />
+            <div aria-hidden="true" class="size-1.5 rounded-full shrink-0 bg-[var(--activity-error)]" />
             <span class="text-12-regular text-text-weak">{error()}</span>
           </div>
         </Show>
diff --git a/packages/app/src/components/server/server-row.tsx b/packages/app/src/components/server/server-row.tsx
index 8060b0a708..6efd7b3c35 100644
--- a/packages/app/src/components/server/server-row.tsx
+++ b/packages/app/src/components/server/server-row.tsx
@@ -13,6 +13,7 @@ import {
 import { useLanguage } from "@/context/language"
 import { type ServerConnection, serverName } from "@/context/server"
 import type { ServerHealth } from "@/utils/server-health"
+import { ActivityDot, type Activity } from "@opencode-ai/ui/amicode-activity"
 
 interface ServerRowProps extends ParentProps {
   conn: ServerConnection.Any
@@ -114,14 +115,21 @@ export function ServerRow(props: ServerRowProps) {
 }
 
 export function ServerHealthIndicator(props: { health?: ServerHealth }) {
-  return (
-    <div
-      classList={{
-        "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
-        "bg-icon-success-base": props.health?.healthy === true,
-        "bg-icon-critical-base": props.health?.healthy === false,
-        "bg-border-weak-base": props.health === undefined,
-      }}
-    />
-  )
+  const activity = () => serverHealthActivity(props.health?.healthy)
+  return <ActivityDot activity={activity()} label={SERVER_HEALTH_LABEL[activity()]} class="size-1.5 my-[3.5px]" />
+}
+
+/** healthy → success, unreachable → error, not yet probed → running (pending). */
+export function serverHealthActivity(healthy: boolean | undefined): Activity {
+  if (healthy === true) return "success"
+  if (healthy === false) return "error"
+  return "running"
+}
+
+export const SERVER_HEALTH_LABEL: Record<Activity, string> = {
+  idle: "Server status unknown",
+  running: "Checking server",
+  attention: "Server needs attention",
+  success: "Server healthy",
+  error: "Server unreachable",
 }
diff --git a/packages/app/src/components/session/context-warning-banner.tsx b/packages/app/src/components/session/context-warning-banner.tsx
index 8535cfac2a..89cb894fad 100644
--- a/packages/app/src/components/session/context-warning-banner.tsx
+++ b/packages/app/src/components/session/context-warning-banner.tsx
@@ -32,7 +32,7 @@ export function ContextWarningBanner() {
   return (
     <>
       <Show when={warning.visibleLevel() === "warn"}>
-        <div class="flex h-7 items-center justify-between gap-3 border-b border-[var(--v2-border-border-warning)] bg-[var(--v2-background-bg-warning-subtle)] px-3 text-12-regular" role="status" aria-live="polite" data-component="context-warning-banner" data-level="warn">
+        <div class="flex h-7 items-center justify-between gap-3 border-b border-[var(--activity-attention)] bg-[var(--activity-attention-soft)] px-3 text-12-regular" role="status" aria-live="polite" data-component="context-warning-banner" data-level="warn">
           <span class="truncate">{language.t("context.warning.banner.warn", { percent: warning.usage() })}</span>
           <span class="flex shrink-0 items-center gap-1">
             <ButtonV2 size="small" variant="neutral" onClick={compact}>{language.t("command.session.compact")}</ButtonV2>
@@ -41,7 +41,7 @@ export function ContextWarningBanner() {
         </div>
       </Show>
       <Show when={warning.visibleLevel() === "critical"}>
-        <div class="flex h-7 items-center justify-between gap-3 border-b border-[var(--v2-border-border-danger)] bg-[var(--v2-background-bg-danger-subtle)] px-3 text-12-regular" role="alert" data-component="context-warning-banner" data-level="critical">
+        <div class="flex h-7 items-center justify-between gap-3 border-b border-[var(--activity-error)] bg-[var(--activity-error-soft)] px-3 text-12-regular" role="alert" data-component="context-warning-banner" data-level="critical">
           <span class="truncate">{language.t("context.warning.banner.critical", { percent: warning.usage() })}</span>
           <ButtonV2 size="small" variant="danger" onClick={compact}>{language.t("command.session.compact")}</ButtonV2>
         </div>
diff --git a/packages/app/src/components/settings-v2/developer-tools.tsx b/packages/app/src/components/settings-v2/developer-tools.tsx
index e9c67dcbf2..83c88d246b 100644
--- a/packages/app/src/components/settings-v2/developer-tools.tsx
+++ b/packages/app/src/components/settings-v2/developer-tools.tsx
@@ -17,20 +17,20 @@ const RebuildStatusBadge: Component<{ controller: DeveloperToolsController }> =
   return (
     <Switch>
       <Match when={props.controller.rebuildState() === "rebuilding"}>
-        <div class="devtools-rebuild-status devtools-rebuild-status--building">
-          <span class="devtools-status-dot devtools-status-dot--orange" />
+        <div class="devtools-rebuild-status devtools-rebuild-status--running">
+          <span class="devtools-status-dot devtools-status-dot--running amc-activity-pulse" aria-hidden="true" />
           <span>{language.t("settings.general.row.devTools.rebuilding")}</span>
         </div>
       </Match>
       <Match when={props.controller.rebuildState() === "rebuilt"}>
-        <div class="devtools-rebuild-status devtools-rebuild-status--done">
-          <span class="devtools-status-dot devtools-status-dot--green" />
+        <div class="devtools-rebuild-status devtools-rebuild-status--success">
+          <span class="devtools-status-dot devtools-status-dot--success" aria-hidden="true" />
           <span>{language.t("settings.general.row.devTools.rebuilt")}</span>
         </div>
       </Match>
       <Match when={props.controller.rebuildState() === "failed"}>
-        <div class="devtools-rebuild-status devtools-rebuild-status--failed">
-          <span class="devtools-status-dot devtools-status-dot--red" />
+        <div class="devtools-rebuild-status devtools-rebuild-status--error">
+          <span class="devtools-status-dot devtools-status-dot--error" aria-hidden="true" />
           <span>Failed</span>
         </div>
       </Match>
@@ -47,7 +47,7 @@ const RebuildErrorPanel: Component<{ controller: DeveloperToolsController }> = (
     <Show when={props.controller.rebuildState() === "failed" && err()}>
       <div class="devtools-error-panel">
         <div class="devtools-error-message">
-          <span class="devtools-status-dot devtools-status-dot--red" />
+          <span class="devtools-status-dot devtools-status-dot--error" aria-hidden="true" />
           <span>{err()!.message}</span>
         </div>
         <Show when={err()!.fix.length > 0}>
@@ -123,14 +123,14 @@ const DeveloperToolsContent: Component<{ controller: DeveloperToolsController }>
           </ButtonV2>
         </div>
         <Show when={props.controller.vsixBuildState() === "rebuilt"}>
-          <div class="devtools-rebuild-status devtools-rebuild-status--done">
-            <span class="devtools-status-dot devtools-status-dot--green" />
+          <div class="devtools-rebuild-status devtools-rebuild-status--success">
+            <span class="devtools-status-dot devtools-status-dot--success" aria-hidden="true" />
             <span>VSIX built: {props.controller.vsixPath() ?? ""}</span>
           </div>
         </Show>
         <Show when={props.controller.vsixBuildState() === "failed"}>
-          <div class="devtools-rebuild-status devtools-rebuild-status--failed">
-            <span class="devtools-status-dot devtools-status-dot--red" />
+          <div class="devtools-rebuild-status devtools-rebuild-status--error">
+            <span class="devtools-status-dot devtools-status-dot--error" aria-hidden="true" />
             <span>{props.controller.vsixBuildError()}</span>
           </div>
         </Show>
diff --git a/packages/app/src/components/status-popover-body.tsx b/packages/app/src/components/status-popover-body.tsx
index 1bc80774d5..9f93cd415c 100644
--- a/packages/app/src/components/status-popover-body.tsx
+++ b/packages/app/src/components/status-popover-body.tsx
@@ -49,6 +49,7 @@ import { authTokenFromCredentials } from "@/utils/server"
 import { GLOBAL_STATUS_DEFAULT_TAB } from "./status-popover-model"
 import { useServerProtocol } from "@/context/server-sdk"
 import { beginSolverSwitch } from "@/components/solver-switch-banner"
+import { ActivityDot, lspActivity, mcpActivity } from "@opencode-ai/ui/amicode-activity"
 
 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   const parts = value.split(file)
@@ -465,16 +466,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean>; onClose?: (
                         }}
                         disabled={toggleMcp.isPending && toggleMcp.variables === name}
                       >
-                        <div
-                          classList={{
-                            "size-1.5 rounded-full shrink-0": true,
-                            "bg-icon-success-base": status() === "connected",
-                            "bg-icon-critical-base": status() === "failed",
-                            "bg-border-weak-base": status() === "disabled",
-                            "bg-icon-warning-base":
-                              status() === "needs_auth" || status() === "needs_client_registration",
-                          }}
-                        />
+                        <ActivityDot activity={mcpActivity(status() ?? "")} label={`MCP ${status() ?? "unknown"}`} />
                         <span class="flex flex-col min-w-0 flex-1">
                           <span class="flex items-center gap-2 min-w-0">
                             <span class="text-14-regular text-text-base truncate">{name}</span>
@@ -516,13 +508,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean>; onClose?: (
                 <For each={lspItems()}>
                   {(item) => (
                     <div class="flex items-center gap-2 w-full px-2 py-1">
-                      <div
-                        classList={{
-                          "size-1.5 rounded-full shrink-0": true,
-                          "bg-icon-success-base": item.status === "connected",
-                          "bg-icon-critical-base": item.status === "error",
-                        }}
-                      />
+                      <ActivityDot activity={lspActivity(item.status)} label={`LSP ${item.status}`} />
                       <span class="text-14-regular text-text-base truncate">{item.name || item.id}</span>
                     </div>
                   )}
@@ -543,7 +529,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean>; onClose?: (
                   <For each={plugins()}>
                     {(plugin) => (
                       <div class="flex items-center gap-2 w-full px-2 py-1">
-                        <div class="size-1.5 rounded-full shrink-0 bg-icon-success-base" />
+                        <ActivityDot activity="success" label="Plugin loaded" />
                         <span class="text-14-regular text-text-base truncate">{plugin}</span>
                       </div>
                     )}
diff --git a/packages/app/src/components/status-popover-indicator.test.ts b/packages/app/src/components/status-popover-indicator.test.ts
index a5ce09f713..1a8259987b 100644
--- a/packages/app/src/components/status-popover-indicator.test.ts
+++ b/packages/app/src/components/status-popover-indicator.test.ts
@@ -2,34 +2,43 @@ import { describe, expect, test } from "bun:test"
 import {
   hasNonBlockingServiceIssue,
   hasServiceNeedingAttention,
-  serverStatusDotClass,
+  serverStatusActivity,
+  serverStatusLabel,
 } from "./status-popover-indicator"
 
-describe("serverStatusDotClass", () => {
-  test("uses the success token while the server and services are healthy", () => {
-    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false })).toBe("bg-icon-success-base")
+describe("serverStatusActivity", () => {
+  test("success while the server and services are healthy", () => {
+    expect(serverStatusActivity({ ready: true, serverHealth: true, issue: false })).toBe("success")
   })
 
-  test("uses the session attention token when a service needs attention", () => {
-    expect(serverStatusDotClass({ ready: true, serverHealth: true, attention: true, issue: true })).toBe(
-      // a bare yellow fill is 1.07:1 on the light ground, so the ink ring is what
-      // makes the highest-urgency state visible at all
-      "bg-v2-background-bg-accent ring-1 ring-[var(--accent-edge-ink)]",
-    )
+  test("attention (amber, never yellow) when a service needs the user", () => {
+    expect(serverStatusActivity({ ready: true, serverHealth: true, attention: true, issue: true })).toBe("attention")
+  })
+
+  test("attention for non-blocking service issues while the server is online", () => {
+    expect(serverStatusActivity({ ready: true, serverHealth: true, issue: true })).toBe("attention")
   })
 
-  test("uses the warning token for non-blocking issues while the server is online", () => {
-    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: true })).toBe("bg-icon-warning-base")
+  test("error only after the server connection drops", () => {
+    expect(serverStatusActivity({ ready: true, serverHealth: false, issue: false })).toBe("error")
+    expect(serverStatusActivity({ ready: true, serverHealth: false, issue: true })).toBe("error")
   })
 
-  test("uses the critical token only after the server connection drops", () => {
-    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: false })).toBe("bg-icon-critical-base")
-    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: true })).toBe("bg-icon-critical-base")
+  test("running (pending) before status is ready", () => {
+    expect(serverStatusActivity({ ready: false, serverHealth: true, issue: false })).toBe("running")
+    expect(serverStatusActivity({ ready: false, serverHealth: undefined, issue: false })).toBe("running")
   })
+})
 
-  test("stays neutral before status is ready", () => {
-    expect(serverStatusDotClass({ ready: false, serverHealth: true, issue: false })).toBe("bg-border-weak-base")
-    expect(serverStatusDotClass({ ready: false, serverHealth: undefined, issue: false })).toBe("bg-border-weak-base")
+describe("serverStatusLabel", () => {
+  test("every activity carries a distinct accessible label", () => {
+    const labels = (["idle", "running", "attention", "success", "error"] as const).map((activity) =>
+      serverStatusLabel({ activity, attention: false }),
+    )
+    expect(new Set(labels).size).toBe(labels.length)
+    expect(serverStatusLabel({ activity: "attention", attention: true })).not.toBe(
+      serverStatusLabel({ activity: "attention", attention: false }),
+    )
   })
 })
 
diff --git a/packages/app/src/components/status-popover-indicator.ts b/packages/app/src/components/status-popover-indicator.ts
index 2e1fa12b40..3c62aa8d62 100644
--- a/packages/app/src/components/status-popover-indicator.ts
+++ b/packages/app/src/components/status-popover-indicator.ts
@@ -1,5 +1,6 @@
 import type { LspStatus } from "@opencode-ai/sdk/v2/client"
 import type { McpServer } from "@opencode-ai/client/promise"
+import type { Activity } from "@opencode-ai/ui/amicode-activity"
 
 export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {
   return input.mcp.some((status) => status === "needs_auth" || status === "needs_client_registration")
@@ -15,18 +16,30 @@ export function hasNonBlockingServiceIssue(input: {
   )
 }
 
-export function serverStatusDotClass(input: {
+export function serverStatusActivity(input: {
   ready: boolean
   serverHealth: boolean | undefined
   attention?: boolean
   issue: boolean
-}) {
-  if (input.serverHealth === false) return "bg-icon-critical-base"
-  if (!input.ready || input.serverHealth === undefined) return "bg-border-weak-base"
-  // A bare yellow fill is 1.07:1 on the light ground, so the most urgent state
-  // was the only invisible one. The ink ring is what makes it readable.
-  if (input.attention) return "bg-v2-background-bg-accent ring-1 ring-[var(--accent-edge-ink)]"
-  if (input.issue) return "bg-icon-warning-base"
-  if (input.serverHealth === true) return "bg-icon-success-base"
-  return "bg-border-weak-base"
+}): Activity {
+  if (input.serverHealth === false) return "error"
+  // still checking — the pending state of the health probe
+  if (!input.ready || input.serverHealth === undefined) return "running"
+  // waiting on the user (sign-in) or a non-blocking service issue: amber.
+  // Yellow never encodes a state.
+  if (input.attention || input.issue) return "attention"
+  return "success"
+}
+
+const SERVER_STATUS_LABEL: Record<Activity, string> = {
+  idle: "Server status unknown",
+  running: "Checking server status",
+  attention: "A service has an issue",
+  success: "Server and services healthy",
+  error: "Server unreachable",
+}
+
+export function serverStatusLabel(input: { activity: Activity; attention?: boolean }) {
+  if (input.activity === "attention" && input.attention) return "A service needs you to sign in"
+  return SERVER_STATUS_LABEL[input.activity]
 }
diff --git a/packages/app/src/components/status-popover.tsx b/packages/app/src/components/status-popover.tsx
index 35ba7f9e58..0eec1fbdff 100644
--- a/packages/app/src/components/status-popover.tsx
+++ b/packages/app/src/components/status-popover.tsx
@@ -14,8 +14,10 @@ import { useGlobal } from "@/context/global"
 import {
   hasNonBlockingServiceIssue,
   hasServiceNeedingAttention,
-  serverStatusDotClass,
+  serverStatusActivity,
+  serverStatusLabel,
 } from "./status-popover-indicator"
+import { ActivityDot } from "@opencode-ai/ui/amicode-activity"
 
 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
 const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody })))
@@ -49,7 +51,14 @@ export function StatusPopover(props: { healthDot?: boolean }) {
       triggerProps={{
         variant: "ghost",
         class: "titlebar-icon w-8 h-6 p-0 box-border",
-        "aria-label": language.t("status.popover.trigger"),
+        "aria-label": (props.healthDot ?? true)
+          ? `${language.t("status.popover.trigger")} — ${statusLabel({
+              ready: ready(),
+              serverHealth: serverHealth(),
+              attention: attention(),
+              issue: issue(),
+            })}`
+          : language.t("status.popover.trigger"),
         style: { scale: 1 },
       }}
       trigger={
@@ -60,14 +69,14 @@ export function StatusPopover(props: { healthDot?: boolean }) {
           {/* amicode (#174): the dot is the only part of the trigger the
               show-status setting governs — see statusTriggerVisibility. */}
           <Show when={props.healthDot ?? true}>
-            <div
-              class={`absolute -top-px -right-px size-1.5 rounded-full ${serverStatusDotClass({
-                ready: ready(),
-                serverHealth: serverHealth(),
-                attention: attention(),
-                issue: issue(),
-              })}`}
-            />
+            <span class="absolute -top-px -right-px flex">
+              <ServerStatusDot
+                ready={ready()}
+                serverHealth={serverHealth()}
+                attention={attention()}
+                issue={issue()}
+              />
+            </span>
           </Show>
         </div>
       }
@@ -155,6 +164,22 @@ function ServerStatusPopover() {
   return <StatusPopoverView state={state()} />
 }
 
+type ServerStatusInput = {
+  ready: boolean
+  serverHealth: boolean | undefined
+  attention: boolean
+  issue: boolean
+}
+
+function statusLabel(input: ServerStatusInput) {
+  return serverStatusLabel({ activity: serverStatusActivity(input), attention: input.attention })
+}
+
+function ServerStatusDot(props: ServerStatusInput & { class?: string }) {
+  const activity = () => serverStatusActivity(props)
+  return <ActivityDot activity={activity()} label={statusLabel(props)} class={props.class} />
+}
+
 type StatusPopoverState = {
   shown: boolean
   ready: boolean
@@ -197,15 +222,15 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
         size: "large",
         class: "!w-9 shrink-0",
         state: props.state.shown ? "pressed" : undefined,
-        "aria-label": props.state.label,
+        "aria-label": props.state.dotVisible ? `${props.state.label} — ${statusLabel(props.state)}` : props.state.label,
       }}
       trigger={
         <div class="relative size-4">
           <IconV2 name={props.state.shown ? "status-active" : "status"} />
           <Show when={props.state.dotVisible}>
-            <div
-              class={`absolute -top-1 -right-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
-            />
+            <span class="absolute -top-1 -right-1 flex rounded-full border border-[var(--v2-background-bg-deep)]">
+              <ServerStatusDot {...props.state} class="size-1.5" />
+            </span>
           </Show>
         </div>
       }
diff --git a/packages/app/src/design-polish.css b/packages/app/src/design-polish.css
index 476bdcc955..5499764068 100644
--- a/packages/app/src/design-polish.css
+++ b/packages/app/src/design-polish.css
@@ -335,29 +335,75 @@ body[data-new-layout]
   inset: 0;
 }
 
-/* ── session status dots ──
-   Four states: green (done, unread), grey (done, seen), yellow (running),
-   red (error). Colour is never the only signal: each dot carries
-   role="img" + aria-label. */
+/* ── activity vocabulary ──
+   One semantic set for every status surface (session dots, run status, health
+   dots, banners). Canonical associations:
+     running   = blue   (in progress)
+     attention = amber  (waiting on you: permission, question, auth, expired,
+                         drift, stalled)
+     success   = green  (done-unread, healthy, finished)
+     error     = red    (failed)
+     idle      = grey   (done-seen, aborted, stopped)
+   YELLOW NEVER ENCODES A STATE — it is brand and selection only (see the
+   accent tokens below). Amico presence (thought-rail, lane, wave, mark) is
+   brand, not status, and keeps the accent.
+   Each role aliases the theme's v2 state tokens so light and dark move
+   together: a solid dot takes the state's BORDER shade on light and its FG
+   shade on dark (the dark border shades are too deep to read as a dot). Amber
+   has its own clean value: the theme's warning edges read as the retired gold.
+   `-soft` is the matching quiet fill for badges / banners. Colour is never the
+   only signal — every dot carries an aria-label or sits beside text. */
 :root,
 [data-color-scheme="light"] {
-  --status-idle: #a1a1aa; /* grey — done and seen */
-  --status-running: #ca8a04; /* yellow-600 — working */
-  --status-done: #16a34a; /* green-600 — done, unread */
-  --status-error: #dc2626; /* red-600 */
+  --activity-idle: var(--v2-icon-icon-muted);
+  --activity-running: var(--v2-state-border-info);
+  --activity-attention: #d97706;
+  --activity-success: var(--v2-state-border-success);
+  --activity-error: var(--v2-state-border-danger);
 }
 [data-color-scheme="dark"] {
-  --status-idle: #71717a; /* grey */
-  --status-running: #eab308; /* yellow-500 */
-  --status-done: #4ade80; /* green-400 */
-  --status-error: #ef4444; /* red-500 */
+  --activity-idle: var(--v2-icon-icon-muted);
+  --activity-running: var(--v2-state-fg-info);
+  --activity-attention: #fbbf24;
+  --activity-success: var(--v2-state-fg-success);
+  --activity-error: var(--v2-state-fg-danger);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-color-scheme="light"]) {
-    --status-idle: #71717a;
-    --status-running: #eab308;
-    --status-done: #4ade80;
-    --status-error: #ef4444;
+    --activity-idle: var(--v2-icon-icon-muted);
+    --activity-running: var(--v2-state-fg-info);
+    --activity-attention: #fbbf24;
+    --activity-success: var(--v2-state-fg-success);
+    --activity-error: var(--v2-state-fg-danger);
+  }
+}
+:root {
+  --activity-idle-soft: color-mix(in srgb, var(--activity-idle) 14%, transparent);
+  --activity-running-soft: var(--v2-state-bg-info);
+  --activity-attention-soft: color-mix(in srgb, var(--activity-attention) 14%, transparent);
+  --activity-success-soft: var(--v2-state-bg-success);
+  --activity-error-soft: var(--v2-state-bg-danger);
+}
+
+/* The one running / pending pulse. Every activity dot that is "in progress"
+   breathes with this — no per-surface keyframes. Under reduced motion it holds
+   still at full opacity (the global reset would otherwise spin an infinite
+   0.01ms loop, which flickers). */
+.amc-activity-pulse {
+  animation: amc-activity-pulse 1.2s ease-in-out infinite;
+}
+@keyframes amc-activity-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .amc-activity-pulse {
+    animation: none !important;
   }
 }
 
@@ -675,19 +721,14 @@ span[data-component="tag"][data-variant="accent"] {
   height: 6px;
   border-radius: var(--radius-full);
   background: currentColor;
-  animation: amc-solver-switch-pulse 1.2s ease-in-out infinite;
+  animation: amc-activity-pulse 1.2s ease-in-out infinite;
 }
 [data-component="amicode-solver-switch"][data-phase="ready"] > i {
   animation: none;
 }
-/* the global prefers-reduced-motion reset above collapses this duration. */
-@keyframes amc-solver-switch-pulse {
-  0%,
-  100% {
-    opacity: 0.35;
-  }
-  50% {
-    opacity: 1;
+@media (prefers-reduced-motion: reduce) {
+  [data-component="amicode-solver-switch"] > i {
+    animation: none;
   }
 }
 
diff --git a/packages/app/src/pages/home/legacy-home.tsx b/packages/app/src/pages/home/legacy-home.tsx
index 0556f7cf60..c331821c89 100644
--- a/packages/app/src/pages/home/legacy-home.tsx
+++ b/packages/app/src/pages/home/legacy-home.tsx
@@ -12,6 +12,8 @@ import { Logo } from "@opencode-ai/ui/logo"
 import { useNavigate } from "@solidjs/router"
 import { DateTime } from "luxon"
 import { createMemo, For, Match, Switch } from "solid-js"
+import { ActivityDot } from "@opencode-ai/ui/amicode-activity"
+import { SERVER_HEALTH_LABEL, serverHealthActivity } from "@/components/server/server-row"
 
 export function LegacyHome() {
   const sync = useServerSync()
@@ -30,12 +32,7 @@ export function LegacyHome() {
       .slice(0, 5)
   })
 
-  const serverDotClass = createMemo(() => {
-    const healthy = global.servers.health[server.key]?.healthy
-    if (healthy === true) return "bg-icon-success-base"
-    if (healthy === false) return "bg-icon-critical-base"
-    return "bg-border-weak-base"
-  })
+  const serverActivity = createMemo(() => serverHealthActivity(global.servers.health[server.key]?.healthy))
 
   function openProject(conn: ServerConnection.Any, directory: string) {
     const serverCtx = global.ensureServerCtx(conn)
@@ -74,12 +71,7 @@ export function LegacyHome() {
         class="mt-4 mx-auto text-14-regular text-text-weak"
         onClick={() => dialog.show(() => <DialogSelectServer />)}
       >
-        <div
-          classList={{
-            "size-2 rounded-full": true,
-            [serverDotClass()]: true,
-          }}
-        />
+        <ActivityDot activity={serverActivity()} label={SERVER_HEALTH_LABEL[serverActivity()]} class="size-2" />
         {server.name}
       </Button>
       <Switch>
diff --git a/packages/app/src/pages/layout/session-tab-status.test.ts b/packages/app/src/pages/layout/session-tab-status.test.ts
index 4e4e89ba99..28158efca6 100644
--- a/packages/app/src/pages/layout/session-tab-status.test.ts
+++ b/packages/app/src/pages/layout/session-tab-status.test.ts
@@ -1,20 +1,41 @@
 import { describe, expect, test } from "bun:test"
-import { sessionTabStatus } from "./session-tab-status"
+import { SESSION_TAB_TONE, sessionTabStatus } from "./session-tab-status"
 
 describe("sessionTabStatus precedence", () => {
-  test("error is loudest — red even when running", () => {
+  test("error is loudest — red even when running and waiting on the user", () => {
     expect(sessionTabStatus({ loading: true, needsAttention: true, unread: true, hasError: true })).toBe("error")
   })
-  test("running when no error — yellow", () => {
+  test("attention outranks running — amber when the agent waits on the user", () => {
+    expect(sessionTabStatus({ loading: true, needsAttention: true, unread: false, hasError: false })).toBe("attention")
+  })
+  test("attention outranks unread", () => {
+    expect(sessionTabStatus({ loading: false, needsAttention: true, unread: true, hasError: false })).toBe("attention")
+  })
+  test("attention when waiting on the user, not done", () => {
+    expect(sessionTabStatus({ loading: false, needsAttention: true, unread: false, hasError: false })).toBe("attention")
+  })
+  test("running when no error or attention — blue", () => {
     expect(sessionTabStatus({ loading: true, needsAttention: false, unread: false, hasError: false })).toBe("running")
   })
+  test("running outranks unread", () => {
+    expect(sessionTabStatus({ loading: true, needsAttention: false, unread: true, hasError: false })).toBe("running")
+  })
   test("done when unread — green", () => {
     expect(sessionTabStatus({ loading: false, needsAttention: false, unread: true, hasError: false })).toBe("done")
   })
-  test("done when needs attention — green", () => {
-    expect(sessionTabStatus({ loading: false, needsAttention: true, unread: false, hasError: false })).toBe("done")
-  })
   test("idle when done and seen — grey", () => {
     expect(sessionTabStatus({ loading: false, needsAttention: false, unread: false, hasError: false })).toBe("idle")
   })
 })
+
+describe("sessionTabStatus tones", () => {
+  test("every status maps to an activity token and a distinct label", () => {
+    expect(SESSION_TAB_TONE.running.color).toBe("var(--activity-running)")
+    expect(SESSION_TAB_TONE.attention.color).toBe("var(--activity-attention)")
+    expect(SESSION_TAB_TONE.done.color).toBe("var(--activity-success)")
+    expect(SESSION_TAB_TONE.error.color).toBe("var(--activity-error)")
+    expect(SESSION_TAB_TONE.idle.color).toBe("var(--activity-idle)")
+    const labels = Object.values(SESSION_TAB_TONE).map((tone) => tone.label)
+    expect(new Set(labels).size).toBe(labels.length)
+  })
+})
diff --git a/packages/app/src/pages/layout/session-tab-status.tsx b/packages/app/src/pages/layout/session-tab-status.tsx
index 8e2bc988c9..79699f669e 100644
--- a/packages/app/src/pages/layout/session-tab-status.tsx
+++ b/packages/app/src/pages/layout/session-tab-status.tsx
@@ -1,9 +1,10 @@
 // AMICODE: the per-session tab status dot.
 //
-// Four states: green (done, unread), grey (done, seen), yellow (running),
-// red (error).
+// Five states on the activity vocabulary (design-polish.css `--activity-*`):
+// red (error), amber (attention — waiting on the user), blue (running),
+// green (done, unread), grey (done, seen). Yellow never encodes a state.
 
-export type SessionTabStatus = "idle" | "running" | "done" | "error"
+export type SessionTabStatus = "idle" | "running" | "attention" | "done" | "error"
 
 export function sessionTabStatus(input: {
   loading: boolean
@@ -13,25 +14,35 @@ export function sessionTabStatus(input: {
 }): SessionTabStatus {
   // Error is loudest — red dot demands action.
   if (input.hasError) return "error"
-  // Running means the agent is working — yellow.
+  // Waiting on the user (permission / question) — amber, above running: the
+  // agent is blocked until the user answers.
+  if (input.needsAttention) return "attention"
+  // Running means the agent is working — blue.
   if (input.loading) return "running"
-  // Done + unread (or needs attention) — green.
-  if (input.needsAttention || input.unread) return "done"
+  // Done + unread — green.
+  if (input.unread) return "done"
   // Done + already seen — grey.
   return "idle"
 }
 
-const TONE: Record<SessionTabStatus, { color: string; label: string }> = {
-  idle: { color: "var(--status-idle)", label: "Done" },
-  running: { color: "var(--status-running)", label: "Working" },
-  done: { color: "var(--status-done)", label: "Done — unread" },
-  error: { color: "var(--status-error)", label: "Error" },
+export const SESSION_TAB_TONE: Record<SessionTabStatus, { color: string; label: string }> = {
+  idle: { color: "var(--activity-idle)", label: "Done" },
+  running: { color: "var(--activity-running)", label: "Working" },
+  attention: { color: "var(--activity-attention)", label: "Needs your attention" },
+  done: { color: "var(--activity-success)", label: "Done — unread" },
+  error: { color: "var(--activity-error)", label: "Error" },
 }
 
 /** The dot itself. Exported so every surface that shows session state — the tab
  *  strip, the sessions dropdown — renders the SAME mark rather than each rolling
  *  its own green. If the treatment changes, it changes in one place. */
-export function StatusDot(props: { color: string; label: string; status?: string; boxed?: boolean }) {
+export function StatusDot(props: {
+  color: string
+  label: string
+  status?: string
+  boxed?: boolean
+  pulse?: boolean
+}) {
   return (
     <span
       data-component="session-status-dot"
@@ -48,6 +59,7 @@ export function StatusDot(props: { color: string; label: string; status?: string
       <span
         aria-hidden="true"
         class="block size-1.5 rounded-full"
+        classList={{ "amc-activity-pulse": props.pulse }}
         style={{ background: props.color }}
       />
     </span>
@@ -55,7 +67,15 @@ export function StatusDot(props: { color: string; label: string; status?: string
 }
 
 export function SessionTabStatusDot(props: { status: SessionTabStatus }) {
-  const tone = () => TONE[props.status]
+  const tone = () => SESSION_TAB_TONE[props.status]
   // boxed: the tab strip reserves a 16px slot so rows stay aligned
-  return <StatusDot color={tone().color} label={tone().label} status={props.status} boxed />
+  return (
+    <StatusDot
+      color={tone().color}
+      label={tone().label}
+      status={props.status}
+      pulse={props.status === "running"}
+      boxed
+    />
+  )
 }
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 6c6f83c116..d78665ef8b 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -7,16 +7,16 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { A, useParams } from "@solidjs/router"
-import { type Accessor, createMemo, For, type JSX, Match, Show, Switch } from "solid-js"
+import { type Accessor, createMemo, For, type JSX, Show } from "solid-js"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
 import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
-import { messageAgentColor } from "@/utils/agent"
 import { sessionTitle } from "@/utils/session-title"
 import { sessionPermissionRequest } from "../session/composer/session-request-tree"
 import { childSessionOnPath, getProjectAvatarSource, hasProjectPermissions } from "./helpers"
+import { SESSION_TAB_TONE, StatusDot, sessionTabStatus } from "./session-tab-status"
 
 export const ProjectIcon = (props: {
   project: LocalProject
@@ -41,6 +41,17 @@ export const ProjectIcon = (props: {
     }),
   )
   const notify = createMemo(() => props.notify && (hasPermissions() || unseenCount() > 0))
+  const notifyTone = createMemo(
+    () =>
+      SESSION_TAB_TONE[
+        sessionTabStatus({
+          loading: false,
+          needsAttention: hasPermissions(),
+          hasError: hasError(),
+          unread: unseenCount() > 0,
+        })
+      ],
+  )
   const name = createMemo(() => props.project.name || getFilename(props.project.worktree))
 
   return (
@@ -56,16 +67,20 @@ export const ProjectIcon = (props: {
       </div>
       <Show when={notify()}>
         <div
-          classList={{
-            "absolute top-px right-px size-1.5 rounded-full z-10": true,
-            "bg-surface-warning-strong": hasPermissions(),
-            "bg-icon-critical-base": !hasPermissions() && hasError(),
-            "bg-text-interactive-base": !hasPermissions() && !hasError(),
-          }}
+          role="img"
+          aria-label={notifyTone().label}
+          title={notifyTone().label}
+          class="absolute top-px right-px size-1.5 rounded-full z-10"
+          style={{ background: notifyTone().color }}
         />
       </Show>
       <Show when={props.working}>
-        <div class="absolute bottom-px right-px size-3 rounded-full bg-background-base z-10 flex items-center justify-center">
+        <div
+          role="img"
+          aria-label={SESSION_TAB_TONE.running.label}
+          class="absolute bottom-px right-px size-3 rounded-full bg-background-base z-10 flex items-center justify-center"
+          style={{ color: "var(--activity-running)" }}
+        >
           <AmicoSpinner class="size-[9px]" />
         </div>
       </Show>
@@ -94,7 +109,6 @@ const SessionRow = (props: {
   slug: string
   mobile?: boolean
   dense?: boolean
-  tint: Accessor<string | undefined>
   isWorking: Accessor<boolean>
   hasPermissions: Accessor<boolean>
   hasError: Accessor<boolean>
@@ -105,6 +119,16 @@ const SessionRow = (props: {
   warmFocus: () => void
 }): JSX.Element => {
   const title = () => sessionTitle(props.session.title)
+  // Same derivation + precedence as the tab strip: error > attention > running > unread.
+  const status = createMemo(() =>
+    sessionTabStatus({
+      loading: props.isWorking(),
+      needsAttention: props.hasPermissions(),
+      hasError: props.hasError(),
+      unread: props.unseenCount() > 0,
+    }),
+  )
+  const tone = () => SESSION_TAB_TONE[status()]
 
   return (
     <A
@@ -117,25 +141,24 @@ const SessionRow = (props: {
         props.clearHoverProjectSoon()
       }}
     >
-      <Show when={props.isWorking() || props.hasPermissions() || props.hasError() || props.unseenCount() > 0}>
-        <div
-          class="shrink-0 size-6 flex items-center justify-center"
-          style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
-        >
-          <Switch>
-            <Match when={props.isWorking()}>
+      <Show when={status() !== "idle"}>
+        <div class="shrink-0 size-6 flex items-center justify-center">
+          <Show
+            when={status() === "running"}
+            fallback={<StatusDot color={tone().color} label={tone().label} status={status()} />}
+          >
+            {/* Status context: the working spinner takes the running colour, not
+                the agent identity tint (which includes diff red/green). */}
+            <span
+              role="img"
+              aria-label={tone().label}
+              title={tone().label}
+              class="inline-flex"
+              style={{ color: "var(--activity-running)" }}
+            >
               <AmicoSpinner class="size-[15px]" />
-            </Match>
-            <Match when={props.hasPermissions()}>
-              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-            </Match>
-            <Match when={props.hasError()}>
-              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-            </Match>
-            <Match when={props.unseenCount() > 0}>
-              <div class="size-1.5 rounded-full bg-text-interactive-base" />
-            </Match>
-          </Switch>
+            </span>
+          </Show>
         </div>
       </Show>
       <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{title()}</span>
@@ -168,9 +191,6 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     return serverSync().session.data.session_working(props.session.id)
   })
 
-  const tint = createMemo(() =>
-    messageAgentColor(serverSync().session.data.message[props.session.id], sessionStore.agent),
-  )
   const tooltip = createMemo(() => props.showTooltip ?? (props.mobile || !props.sidebarExpanded()))
   const currentChild = createMemo(() => {
     if (!props.showChild) return
@@ -203,7 +223,6 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
       slug={props.slug}
       mobile={props.mobile}
       dense={props.dense}
-      tint={tint}
       isWorking={isWorking}
       hasPermissions={hasPermissions}
       hasError={hasError}
diff --git a/packages/app/src/pages/layout/sidebar-workspace.tsx b/packages/app/src/pages/layout/sidebar-workspace.tsx
index 25cd8e5aa1..db9381acbd 100644
--- a/packages/app/src/pages/layout/sidebar-workspace.tsx
+++ b/packages/app/src/pages/layout/sidebar-workspace.tsx
@@ -101,7 +101,9 @@ const WorkspaceHeader = (props: {
   <div class="flex items-center gap-1 min-w-0 flex-1">
     <div class="flex items-center justify-center shrink-0 size-6">
       <Show when={props.busy()} fallback={<Icon name="branch" size="small" />}>
-        <AmicoSpinner class="size-[15px]" />
+        <span role="img" aria-label="Working" class="inline-flex" style={{ color: "var(--activity-running)" }}>
+          <AmicoSpinner class="size-[15px]" />
+        </span>
       </Show>
     </div>
     <span class="text-14-medium text-text-base shrink-0">
diff --git a/packages/app/src/pages/session/v2/lineage-ledger-panel.css b/packages/app/src/pages/session/v2/lineage-ledger-panel.css
index c887b1eee6..342d7595f5 100644
--- a/packages/app/src/pages/session/v2/lineage-ledger-panel.css
+++ b/packages/app/src/pages/session/v2/lineage-ledger-panel.css
@@ -20,7 +20,7 @@
 
 [data-component="lineage-ledger"] [data-slot="lineage-ledger-capability"][data-mode="legacy"],
 [data-component="lineage-ledger"] [data-slot="lineage-ledger-capability"][data-mode="partial"] {
-  border-color: var(--v2-border-border-warning);
+  border-color: var(--activity-attention);
 }
 
 [data-component="lineage-ledger"] [data-slot="lineage-ledger-filter"] {
@@ -99,7 +99,7 @@
   flex-direction: column;
   gap: var(--space-1, 4px);
   padding: var(--space-2, 8px);
-  border: 1px solid var(--v2-border-border-warning);
+  border: 1px solid var(--activity-attention);
   border-radius: var(--radius-lg, 12px);
 }
 
diff --git a/packages/opencode/src/server/amicode/widget-frame-html.ts b/packages/opencode/src/server/amicode/widget-frame-html.ts
index 927eef1a6f..d10c31f3fe 100644
--- a/packages/opencode/src/server/amicode/widget-frame-html.ts
+++ b/packages/opencode/src/server/amicode/widget-frame-html.ts
@@ -22,8 +22,8 @@ const BAKED_TOKENS: Record<string, string> = {
   "--amc-text": "#E9ECF4",
   "--amc-text-muted": "#8B94A9",
   "--amc-text-faint": "#6A7286",
-  "--amc-accent": "#FFF676",
-  "--amc-accent-fill": "#FFF676",
+  "--amc-accent": "#FFE614",
+  "--amc-accent-fill": "#FFE614",
   "--amc-accent-ink": "#111214",
   "--amc-success": "#5BC873",
   "--amc-warning": "#E5B454",
diff --git a/packages/opencode/test/server/amicode-widget-frame.test.ts b/packages/opencode/test/server/amicode-widget-frame.test.ts
index c3be19a644..1169aa2f10 100644
--- a/packages/opencode/test/server/amicode-widget-frame.test.ts
+++ b/packages/opencode/test/server/amicode-widget-frame.test.ts
@@ -28,6 +28,12 @@ describe("buildFrameHtml", () => {
     expect(doc).toContain("__amcWidgetCode")
   })
 
+  test("accent defaults to the current brand yellow, never the retired #FFF676", () => {
+    expect(doc).toContain("--amc-accent: #FFE614;")
+    expect(doc).toContain("--amc-accent-fill: #FFE614;")
+    expect(doc.toUpperCase()).not.toContain("#FFF676")
+  })
+
   test("</script> in widget code cannot break out", () => {
     const hostile = buildFrameHtml('var x = "</script><script>alert(1)"')
     expect(hostile).not.toContain('alert(1)"</script>')
diff --git a/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx b/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
index d51d78aaae..e7128a9fc4 100644
--- a/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
+++ b/packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx
@@ -644,8 +644,12 @@ export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Prop
                   "align-items": "center",
                   "justify-content": "space-between",
                   padding: "6px 12px",
-                  "background-color": "var(--amc-warning, #ffc107)",
-                  color: "var(--amc-bg, #000)",
+                  // attention (amber) — the app's activity token, falling back to
+                  // the theme's v2 warning state where design-polish isn't loaded
+                  // (share pages). --amc-* only exist inside widget iframes.
+                  "background-color": "var(--activity-attention-soft, var(--v2-state-bg-warning))",
+                  border: "1px solid var(--activity-attention, var(--v2-state-border-warning))",
+                  color: "var(--v2-text-text-base)",
                   "font-size": "12px",
                   "border-radius": "4px",
                   margin: "4px 0",
@@ -793,11 +797,11 @@ export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Prop
                   border: "none",
                   background: "none",
                   cursor: "pointer",
-                  color: "var(--amc-text-muted, var(--icon-base))",
+                  color: "var(--v2-text-text-muted)",
                   "flex-shrink": "0",
                 }}
-                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--amc-danger, #f44336)")}
-                onMouseLeave={(e) => (e.currentTarget.style.color = "var(--amc-text-muted, var(--icon-base))")}
+                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--v2-state-fg-danger)")}
+                onMouseLeave={(e) => (e.currentTarget.style.color = "var(--v2-text-text-muted)")}
               >
                 <Icon name="reset" size="small" />
               </button>
@@ -812,7 +816,7 @@ export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Prop
                 "font-size": "11px",
                 "margin-left": "8px",
                 "white-space": "nowrap",
-                color: "var(--amc-danger, #f44336)",
+                color: "var(--v2-state-fg-danger)",
               }}
             >
               Save failed
diff --git a/packages/ui/src/amicode/activity-dot.tsx b/packages/ui/src/amicode/activity-dot.tsx
new file mode 100644
index 0000000000..5532779094
--- /dev/null
+++ b/packages/ui/src/amicode/activity-dot.tsx
@@ -0,0 +1,22 @@
+import { ACTIVITY_COLOR, type Activity } from "./activity"
+
+// AMICODE: the one activity dot. Colour is never the only signal — the dot is
+// role="img" with an aria-label (and a hover title). Omit `label` only when
+// adjacent text already names the state; the dot is then aria-hidden. Running
+// dots breathe with the shared reduced-motion-aware `.amc-activity-pulse`
+// (design-polish.css).
+export function ActivityDot(props: { activity: Activity; label?: string; class?: string; pulse?: boolean }) {
+  return (
+    <span
+      data-component="activity-dot"
+      data-activity={props.activity}
+      role={props.label ? "img" : undefined}
+      aria-label={props.label}
+      aria-hidden={props.label ? undefined : "true"}
+      title={props.label}
+      class={`block shrink-0 rounded-full ${props.class ?? "size-1.5"}`}
+      classList={{ "amc-activity-pulse": props.pulse ?? props.activity === "running" }}
+      style={{ background: ACTIVITY_COLOR[props.activity] }}
+    />
+  )
+}
diff --git a/packages/ui/src/amicode/activity.test.ts b/packages/ui/src/amicode/activity.test.ts
new file mode 100644
index 0000000000..29fe830c00
--- /dev/null
+++ b/packages/ui/src/amicode/activity.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test"
+import { ACTIVITY_COLOR, ACTIVITY_SOFT, connectionActivity, lspActivity, mcpActivity, runActivity } from "./activity"
+
+describe("activity tokens", () => {
+  test("every role resolves to its --activity-* token, never a hex", () => {
+    expect(ACTIVITY_COLOR).toEqual({
+      idle: "var(--activity-idle)",
+      running: "var(--activity-running)",
+      attention: "var(--activity-attention)",
+      success: "var(--activity-success)",
+      error: "var(--activity-error)",
+    })
+    expect(ACTIVITY_SOFT.running).toBe("var(--activity-running-soft)")
+    expect(ACTIVITY_SOFT.attention).toBe("var(--activity-attention-soft)")
+  })
+})
+
+describe("runActivity", () => {
+  test("solving is running (blue)", () => expect(runActivity("solving")).toBe("running"))
+  test("stalled is attention (amber)", () => expect(runActivity("stalled")).toBe("attention"))
+  test("aborted is idle (grey) — a user-chosen stop", () => expect(runActivity("aborted")).toBe("idle"))
+  test("stopped is idle", () => expect(runActivity("stopped")).toBe("idle"))
+  test("finished is success", () => expect(runActivity("finished")).toBe("success"))
+  test("failed is error", () => expect(runActivity("failed")).toBe("error"))
+  test("recorded / unknown stays idle", () => {
+    expect(runActivity("recorded")).toBe("idle")
+    expect(runActivity("whatever")).toBe("idle")
+  })
+})
+
+describe("connectionActivity", () => {
+  test("pending → running", () => expect(connectionActivity({ tone: "pending", showDrift: false })).toBe("running"))
+  test("expired / unreachable (warning) → attention", () =>
+    expect(connectionActivity({ tone: "warning", showDrift: false })).toBe("attention"))
+  test("connected → success", () => expect(connectionActivity({ tone: "success", showDrift: false })).toBe("success"))
+  test("connected with submitter drift → attention", () =>
+    expect(connectionActivity({ tone: "success", showDrift: true })).toBe("attention"))
+  test("invalid / unentitled (critical) → error", () =>
+    expect(connectionActivity({ tone: "critical", showDrift: false })).toBe("error"))
+  test("needs-key (neutral) → idle", () =>
+    expect(connectionActivity({ tone: "neutral", showDrift: false })).toBe("idle"))
+})
+
+describe("mcpActivity / lspActivity", () => {
+  test("mcp states", () => {
+    expect(mcpActivity("pending")).toBe("running")
+    expect(mcpActivity("needs_auth")).toBe("attention")
+    expect(mcpActivity("needs_client_registration")).toBe("attention")
+    expect(mcpActivity("connected")).toBe("success")
+    expect(mcpActivity("failed")).toBe("error")
+    expect(mcpActivity("disabled")).toBe("idle")
+  })
+  test("lsp states", () => {
+    expect(lspActivity("connected")).toBe("success")
+    expect(lspActivity("error")).toBe("error")
+  })
+})
diff --git a/packages/ui/src/amicode/activity.ts b/packages/ui/src/amicode/activity.ts
new file mode 100644
index 0000000000..57d817458d
--- /dev/null
+++ b/packages/ui/src/amicode/activity.ts
@@ -0,0 +1,76 @@
+// AMICODE: the activity vocabulary — one semantic role per state, shared by
+// every status surface (run status, connection / MCP / LSP / server / vault
+// health dots). Colours live in the app's design-polish.css as `--activity-*`
+// (aliasing the theme's v2 state tokens); this module only names the role.
+//
+//   running   = blue   in progress (solving, pending, validating)
+//   attention = amber  waiting on you (needs auth, expired, drift, stalled)
+//   success   = green  done / healthy
+//   error     = red    failed
+//   idle      = grey   idle, aborted, stopped, disabled
+//
+// Yellow never encodes a state — it is brand and selection only.
+
+export type Activity = "idle" | "running" | "attention" | "success" | "error"
+
+export const ACTIVITY_COLOR: Record<Activity, string> = {
+  idle: "var(--activity-idle)",
+  running: "var(--activity-running)",
+  attention: "var(--activity-attention)",
+  success: "var(--activity-success)",
+  error: "var(--activity-error)",
+}
+
+export const ACTIVITY_SOFT: Record<Activity, string> = {
+  idle: "var(--activity-idle-soft)",
+  running: "var(--activity-running-soft)",
+  attention: "var(--activity-attention-soft)",
+  success: "var(--activity-success-soft)",
+  error: "var(--activity-error-soft)",
+}
+
+const RUN_ACTIVITY: Record<string, Activity> = {
+  solving: "running",
+  // wedged (OOM?) — must not read as live
+  stalled: "attention",
+  // a user-chosen stop: calm, not alarming, not live
+  aborted: "idle",
+  stopped: "idle",
+  finished: "success",
+  failed: "error",
+}
+
+export function runActivity(status: string): Activity {
+  return RUN_ACTIVITY[status] ?? "idle"
+}
+
+const CONNECTION_ACTIVITY: Record<"success" | "critical" | "warning" | "pending" | "neutral", Activity> = {
+  pending: "running",
+  warning: "attention",
+  success: "success",
+  critical: "error",
+  neutral: "idle",
+}
+
+export function connectionActivity(model: {
+  tone: "success" | "critical" | "warning" | "pending" | "neutral"
+  showDrift: boolean
+}): Activity {
+  // connected, but the submitter identity drifted — the user must look
+  if (model.showDrift) return "attention"
+  return CONNECTION_ACTIVITY[model.tone]
+}
+
+export function mcpActivity(status: string): Activity {
+  if (status === "pending") return "running"
+  if (status === "needs_auth" || status === "needs_client_registration") return "attention"
+  if (status === "connected") return "success"
+  if (status === "failed") return "error"
+  return "idle"
+}
+
+export function lspActivity(status: string): Activity {
+  if (status === "connected") return "success"
+  if (status === "error") return "error"
+  return "idle"
+}
diff --git a/packages/ui/src/amicode/amico-presence.css b/packages/ui/src/amicode/amico-presence.css
index f6a2ead8d9..5140ddf8d1 100644
--- a/packages/ui/src/amicode/amico-presence.css
+++ b/packages/ui/src/amicode/amico-presence.css
@@ -41,16 +41,10 @@
 /* ---- rail wake / settle -------------------------------------------------- */
 /* The rail is Amico's body; it wakes when Amico steps in and quiets on settle.
  * Visibility (dormant => absent) is owned by the rail's own show gate; these
- * classes only carry the motion + the live/quiet accent treatment. */
+ * classes only carry the motion. */
 .amc-rail.is-waking { will-change: opacity, transform; }
-.amc-rail.is-live .amc-livedot {
-  background: var(--v2-icon-icon-accent);
-}
-.amc-rail.is-quiet .amc-livedot {
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent);
-}
 
-/* entity chips: pending (—), live (●, pulsing), settled (✓, steady) */
+/* entity chips: pending (—), live, settled — text weight carries the state */
 .amc-entity {
   display: inline-flex;
   align-items: center;
@@ -60,16 +54,6 @@
 }
 .amc-entity[data-status="pending"] { color: var(--v2-text-text-faint); }
 .amc-entity[data-status="settled"] { color: var(--v2-text-text-base); }
-.amc-entity-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--v2-border-border-base);
-}
-.amc-entity[data-status="live"] .amc-entity-dot { background: var(--v2-icon-icon-accent); }
-.amc-entity[data-status="settled"] .amc-entity-dot {
-  background: color-mix(in srgb, var(--v2-icon-icon-accent) 70%, transparent);
-}
 
 /* ---- motion (gated) ------------------------------------------------------ */
 @keyframes amc-lane-in {
@@ -84,10 +68,6 @@
   from { opacity: 0; transform: translateY(-4px); }
   to   { opacity: 1; transform: none; }
 }
-@keyframes amc-livedot-pulse {
-  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent); }
-  50%      { opacity: 0.5; box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-icon-icon-accent) 10%, transparent); }
-}
 
 @media (prefers-reduced-motion: no-preference) {
   .amc-lane.is-stepping-in { animation: amc-lane-in 260ms ease-out both; }
@@ -97,8 +77,4 @@
      targeting it directly plays the wake exactly once, on entry, with no edit to
      entity-rail.tsx (keeps that hot file out of this change). */
   [data-component="amicode-entity-rail"] { animation: amc-rail-wake 260ms ease-out both; }
-  .amc-rail.is-live .amc-livedot,
-  .amc-entity[data-status="live"] .amc-entity-dot {
-    animation: amc-livedot-pulse 1.4s ease-in-out infinite;
-  }
 }
diff --git a/packages/ui/src/amicode/amico-presence.stories.tsx b/packages/ui/src/amicode/amico-presence.stories.tsx
index 174733424f..837de222a2 100644
--- a/packages/ui/src/amicode/amico-presence.stories.tsx
+++ b/packages/ui/src/amicode/amico-presence.stories.tsx
@@ -52,12 +52,10 @@ function MockRail(props: { state: PresenceState }) {
       >
         <AmicoMark running={live()} />
         <span class="amc-wordmark">AMICO</span>
-        <span class="amc-livedot" style={{ width: "6px", height: "6px", "border-radius": "50%" }} />
         <span style={{ color: "var(--v2-text-text-muted)", "font-size": "12px" }}>x-gate-transmon-warm ▾</span>
         <For each={ENTITIES(props.state)}>
           {(e) => (
             <span class="amc-entity" data-status={e.status}>
-              <span class="amc-entity-dot" />
               {e.name}{e.val ? ` ${e.val}` : " —"}
             </span>
           )}
diff --git a/packages/ui/src/amicode/amicode.css b/packages/ui/src/amicode/amicode.css
index e002332b0a..d8b055bcde 100644
--- a/packages/ui/src/amicode/amicode.css
+++ b/packages/ui/src/amicode/amicode.css
@@ -1365,29 +1365,57 @@
   background: var(--v2-background-bg-layer-02);
   color: var(--v2-text-text-muted);
 }
-/* verdict tones (shared across run status + device/calibration pills) */
-[data-component="amicode-run-view"] .amc-run-status[data-tone="ok"],
-[data-component="amicode-device-view"] .amc-vpill[data-tone="ok"],
-[data-component="amicode-calibration-view"] .amc-vpill[data-tone="ok"] {
-  background: var(--v2-state-bg-success);
-  color: var(--v2-state-fg-success);
+/* verdict activity (shared across run status + device/calibration pills) —
+   the activity vocabulary (design-polish.css --activity-*): a soft fill, a
+   leading dot in the solid role colour, and neutral ink so 10px caps keep
+   body contrast in both schemes. Running breathes with the shared pulse. */
+[data-component="amicode-run-view"] .amc-run-status[data-activity],
+[data-component="amicode-device-view"] .amc-vpill[data-activity],
+[data-component="amicode-calibration-view"] .amc-vpill[data-activity] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--v2-text-text-base);
 }
-[data-component="amicode-run-view"] .amc-run-status[data-tone="warn"],
-[data-component="amicode-device-view"] .amc-vpill[data-tone="warn"],
-[data-component="amicode-calibration-view"] .amc-vpill[data-tone="warn"] {
-  background: var(--v2-state-bg-warning);
-  color: var(--v2-state-fg-warning);
+[data-component="amicode-run-view"] .amc-run-status[data-activity]::before,
+[data-component="amicode-device-view"] .amc-vpill[data-activity]::before,
+[data-component="amicode-calibration-view"] .amc-vpill[data-activity]::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--activity-dot);
 }
-[data-component="amicode-run-view"] .amc-run-status[data-tone="critical"],
-[data-component="amicode-device-view"] .amc-vpill[data-tone="critical"] {
-  background: var(--v2-state-bg-danger);
-  color: var(--v2-state-fg-danger);
+[data-component="amicode-run-view"] .amc-run-status[data-activity="running"]::before {
+  animation: amc-activity-pulse 1.2s ease-in-out infinite;
 }
-[data-component="amicode-run-view"] .amc-run-status[data-tone="active"] {
-  /* solving/in-flight → the PR#52 accent state fill (yellow warmth + neutral
-     ink), never a yellow foreground on a light surface. */
-  background: var(--accent-fill-soft);
-  color: var(--v2-text-text-base);
+@media (prefers-reduced-motion: reduce) {
+  [data-component="amicode-run-view"] .amc-run-status[data-activity="running"]::before {
+    animation: none;
+  }
+}
+[data-activity="idle"] { --activity-dot: var(--activity-idle); }
+[data-activity="running"] { --activity-dot: var(--activity-running); }
+[data-activity="attention"] { --activity-dot: var(--activity-attention); }
+[data-activity="success"] { --activity-dot: var(--activity-success); }
+[data-activity="error"] { --activity-dot: var(--activity-error); }
+[data-component="amicode-run-view"] .amc-run-status[data-activity="running"],
+[data-component="amicode-device-view"] .amc-vpill[data-activity="running"] {
+  background: var(--activity-running-soft);
+}
+[data-component="amicode-run-view"] .amc-run-status[data-activity="attention"],
+[data-component="amicode-device-view"] .amc-vpill[data-activity="attention"],
+[data-component="amicode-calibration-view"] .amc-vpill[data-activity="attention"] {
+  background: var(--activity-attention-soft);
+}
+[data-component="amicode-run-view"] .amc-run-status[data-activity="success"],
+[data-component="amicode-device-view"] .amc-vpill[data-activity="success"],
+[data-component="amicode-calibration-view"] .amc-vpill[data-activity="success"] {
+  background: var(--activity-success-soft);
+}
+[data-component="amicode-run-view"] .amc-run-status[data-activity="error"],
+[data-component="amicode-device-view"] .amc-vpill[data-activity="error"] {
+  background: var(--activity-error-soft);
 }
 
 /* Device + Calibration shared pills / meta / key-value rows */
@@ -1488,30 +1516,27 @@
   font-weight: 500;
   font-family: var(--font-mono, monospace);
 }
-.devtools-rebuild-status--building { color: var(--text-warning-base, #ee9d2b); }
-.devtools-rebuild-status--done { color: var(--text-on-success-base, #2dba26); }
-.devtools-rebuild-status--failed { color: var(--text-danger-base, #e5484d); }
+/* activity vocabulary: running blue, success green, error red. Status text
+   takes the v2 state FG shade (text-safe in both schemes); the dot takes the
+   solid --activity-* role. Running breathes with the shared pulse. */
+.devtools-rebuild-status--running { color: var(--v2-state-fg-info); }
+.devtools-rebuild-status--success { color: var(--v2-state-fg-success); }
+.devtools-rebuild-status--error { color: var(--v2-state-fg-danger); }
 
 .devtools-status-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 }
-.devtools-status-dot--orange {
-  background: var(--surface-warning-strong, #ee9d2b);
-  animation: devtools-pulse 1.2s ease-in-out infinite;
+.devtools-status-dot--running {
+  background: var(--activity-running);
 }
-.devtools-status-dot--green {
-  background: var(--surface-success-strong, #12c905);
+.devtools-status-dot--success {
+  background: var(--activity-success);
 }
-.devtools-status-dot--red {
-  background: var(--surface-danger-strong, #e5484d);
-}
-
-@keyframes devtools-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+.devtools-status-dot--error {
+  background: var(--activity-error);
 }
 
  .devtools-rebuild-row {
@@ -1525,8 +1550,8 @@
   margin: 8px 0 4px;
   padding: 10px 12px;
   border-radius: 6px;
-  background: color-mix(in srgb, var(--surface-danger-strong, #e5484d) 8%, transparent);
-  border: 1px solid color-mix(in srgb, var(--surface-danger-strong, #e5484d) 20%, transparent);
+  background: var(--activity-error-soft);
+  border: 1px solid color-mix(in srgb, var(--activity-error) 20%, transparent);
 }
 .devtools-error-message {
   display: flex;
@@ -1534,7 +1559,7 @@
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
-  color: var(--text-danger-base, #e5484d);
+  color: var(--v2-state-fg-danger);
   line-height: 1.4;
 }
 .devtools-error-message .devtools-status-dot {
@@ -1546,7 +1571,7 @@
   padding-left: 22px;
   font-size: 12px;
   line-height: 1.6;
-  color: var(--text-secondary-base, #8b8b8b);
+  color: var(--v2-text-text-muted);
   list-style: decimal;
 }
 .devtools-error-fix-steps li {
@@ -1558,21 +1583,21 @@
   border: none;
   background: none;
   font-size: 11px;
-  color: var(--text-secondary-base, #8b8b8b);
+  color: var(--v2-text-text-muted);
   cursor: pointer;
   font-family: inherit;
 }
 .devtools-error-detail-toggle:hover {
-  color: var(--text-primary-base, #ededed);
+  color: var(--v2-text-text-base);
 }
 .devtools-error-detail {
   margin-top: 4px;
   padding: 8px;
   border-radius: 4px;
-  background: var(--surface-secondary-base, rgba(0,0,0,0.15));
+  background: var(--v2-background-bg-layer-02);
   font-size: 11px;
   line-height: 1.5;
-  color: var(--text-secondary-base, #8b8b8b);
+  color: var(--v2-text-text-muted);
   font-family: var(--font-mono, monospace);
   overflow-x: auto;
   max-height: 200px;
diff --git a/packages/ui/src/amicode/calibration-view.tsx b/packages/ui/src/amicode/calibration-view.tsx
index c75a716032..684eeaad5b 100644
--- a/packages/ui/src/amicode/calibration-view.tsx
+++ b/packages/ui/src/amicode/calibration-view.tsx
@@ -19,7 +19,7 @@ export function CalibrationView(props: { verdict: CalibrationVerdict }) {
               <span
                 class="amc-vpill"
                 data-slot="amicode-calibration-freshness"
-                data-tone={f() === "fresh" ? "ok" : "warn"}
+                data-activity={f() === "fresh" ? "success" : "attention"}
               >
                 {f()}
               </span>
diff --git a/packages/ui/src/amicode/connection-icon.tsx b/packages/ui/src/amicode/connection-icon.tsx
index b695d79501..2d8ba14423 100644
--- a/packages/ui/src/amicode/connection-icon.tsx
+++ b/packages/ui/src/amicode/connection-icon.tsx
@@ -1,26 +1,16 @@
-// AMICODE: ConnectionIcon — 18px logo + 6px state-dot badge (issue #327)
+// AMICODE: ConnectionIcon — 18px logo + 6px activity-dot badge (issue #327)
 import { Show } from "solid-js"
 import { cardModel } from "./connections"
 import type { ConnectionView } from "./connections"
+import { connectionActivity } from "./activity"
+import { ActivityDot } from "./activity-dot"
 
-export function ConnectionIcon(props: { conn: ConnectionView }) {
+export function ConnectionIcon(props: { conn: ConnectionView; label?: string }) {
   const model = () => cardModel(props.conn)
-  const tone = () => model().tone
 
-  const dotClass = () => {
-    switch (tone()) {
-      case "success":
-        return "bg-icon-success-base"
-      case "critical":
-        return "bg-icon-critical-base"
-      case "warning":
-        return "bg-icon-warning-base"
-      case "pending":
-        return "bg-icon-warning-base animate-pulse"
-      default:
-        return "bg-border-weak-base"
-    }
-  }
+  // pending → running, expired/unreachable/drift → attention, connected →
+  // success, invalid/unentitled → error, needs-key → idle
+  const activity = () => connectionActivity(model())
 
   const isSvg = () => Boolean(props.conn.icon && props.conn.icon.trim().startsWith("<svg"))
   const letter = () => {
@@ -39,7 +29,9 @@ export function ConnectionIcon(props: { conn: ConnectionView }) {
           <span class="w-[18px] h-[18px] flex items-center justify-center [&>svg]:w-[18px] [&>svg]:h-[18px] [&>svg]:rounded-sm" innerHTML={props.conn.icon ?? ""} />
         </Show>
       </div>
-      <div class={`absolute -bottom-0.5 -right-0.5 size-[6px] rounded-full border border-surface-base ${dotClass()}`} />
+      <span class="absolute -bottom-0.5 -right-0.5 flex rounded-full border border-surface-base">
+        <ActivityDot activity={activity()} label={props.label ?? model().state} class="size-[6px]" />
+      </span>
     </div>
   )
 }
diff --git a/packages/ui/src/amicode/connections-tab.tsx b/packages/ui/src/amicode/connections-tab.tsx
index 5c80e3d749..c73068444c 100644
--- a/packages/ui/src/amicode/connections-tab.tsx
+++ b/packages/ui/src/amicode/connections-tab.tsx
@@ -37,6 +37,8 @@ import {
   type StartAuthPayload,
 } from "./connections"
 import { ConnectionIcon } from "./connection-icon"
+import { ACTIVITY_COLOR } from "./activity"
+import { ActivityDot } from "./activity-dot"
 import { ConnectionPicker } from "./connection-picker"
 
 export type ConnectionsTabLabels = {
@@ -97,7 +99,7 @@ export function AmicodeConnectionsTab(props: {
             when={view().ok}
             fallback={
               <div class="flex items-center gap-2 w-full px-2 py-1">
-                <div class="size-1.5 rounded-full shrink-0 bg-icon-critical-base" />
+                <div aria-hidden="true" class="size-1.5 rounded-full shrink-0" style={{ background: ACTIVITY_COLOR.error }} />
                 <span class="text-14-regular text-text-weak flex-1 truncate">{view().error}</span>
                 <Button
                   type="button"
@@ -197,14 +199,6 @@ export function AmicodeConnectionsTab(props: {
   )
 }
 
-const TONE_DOT: Record<ReturnType<typeof cardModel>["tone"], string> = {
-  success: "bg-icon-success-base",
-  critical: "bg-icon-critical-base",
-  warning: "bg-icon-warning-base",
-  pending: "bg-icon-warning-base animate-pulse",
-  neutral: "bg-border-weak-base",
-}
-
 /** amicode#200: exported — the solver toggle's popover mounts the SAME card
  *  for Company Compute (connect / connected-manage / expired states). */
 export function ConnectionCard(props: {
@@ -282,7 +276,7 @@ export function ConnectionCard(props: {
     <div class="flex flex-col w-full px-2 py-1" data-slot="amicode-connection-card" data-state={props.conn.state}>
       <Show when={!props.hideHeader}>
         <div class="flex items-center gap-2 w-full min-w-0">
-          <ConnectionIcon conn={props.conn} />
+          <ConnectionIcon conn={props.conn} label={stateCopy(props.conn, props.labels.states)} />
           <span class="text-14-regular text-text-base truncate">{connectionDisplayName(props.conn)}</span>
           <Show when={model().showRawState}>
             <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md shrink-0">
@@ -303,7 +297,7 @@ export function ConnectionCard(props: {
         data-slot="amicode-connection-state-copy"
       >
         <Show when={props.hideHeader}>
-          <ConnectionIcon conn={props.conn} />
+          <ConnectionIcon conn={props.conn} label={stateCopy(props.conn, props.labels.states)} />
         </Show>
         {stateCopy(props.conn, props.labels.states)}
         <Show when={model().showIdentity}>
@@ -313,7 +307,7 @@ export function ConnectionCard(props: {
 
       <Show when={model().showDrift}>
         <div class="flex items-center gap-2" data-slot="amicode-connection-drift">
-          <div class="size-1 rounded-full shrink-0 bg-icon-warning-base" />
+          <div aria-hidden="true" class="size-1 rounded-full shrink-0" style={{ background: ACTIVITY_COLOR.attention }} />
           <span class="text-11-regular text-text-weak">{driftCopy(props.conn, props.labels.driftHint)}</span>
         </div>
       </Show>
@@ -336,7 +330,7 @@ export function ConnectionCard(props: {
 
       <Show when={props.actionError}>
         <div class="flex items-center gap-2" data-slot="amicode-connection-action-error">
-          <div class="size-1 rounded-full shrink-0 bg-icon-critical-base" />
+          <div aria-hidden="true" class="size-1 rounded-full shrink-0" style={{ background: ACTIVITY_COLOR.error }} />
           <span class="text-11-regular text-text-weak truncate">{props.actionError}</span>
         </div>
       </Show>
@@ -413,7 +407,7 @@ export function ConnectionCard(props: {
 
       <Show when={model().showWaiting}>
         <div class="flex items-center gap-2 pt-1" data-slot="amicode-connection-waiting">
-          <div class="size-1.5 rounded-full shrink-0 bg-icon-warning-base animate-pulse" />
+          <ActivityDot activity="running" label={stateCopy(props.conn, props.labels.states)} />
           <div class="flex-1" />
           <Button
             type="button"
diff --git a/packages/ui/src/amicode/device-view.tsx b/packages/ui/src/amicode/device-view.tsx
index 7036cf8f35..8671a45a0f 100644
--- a/packages/ui/src/amicode/device-view.tsx
+++ b/packages/ui/src/amicode/device-view.tsx
@@ -32,14 +32,14 @@ export function DeviceView(props: { verdict: DeviceVerdict }) {
               <span
                 class="amc-vpill"
                 data-slot="amicode-device-connection"
-                data-tone={c() === "online" ? "ok" : c() === "offline" ? "critical" : "warn"}
+                data-activity={c() === "online" ? "success" : c() === "offline" ? "error" : "attention"}
               >
                 {c()}
               </span>
             )}
           </Show>
           <Show when={v().ready !== null}>
-            <span class="amc-vpill" data-slot="amicode-device-ready" data-tone={v().ready ? "ok" : "warn"}>
+            <span class="amc-vpill" data-slot="amicode-device-ready" data-activity={v().ready ? "success" : "attention"}>
               {v().ready ? "ready to run" : "not ready"}
             </span>
           </Show>
diff --git a/packages/ui/src/amicode/run-view.tsx b/packages/ui/src/amicode/run-view.tsx
index c58daaac9c..51d728386f 100644
--- a/packages/ui/src/amicode/run-view.tsx
+++ b/packages/ui/src/amicode/run-view.tsx
@@ -1,5 +1,6 @@
 import { Show } from "solid-js"
 import type { RunVerdict } from "./problem"
+import { runActivity } from "./activity"
 
 // AMICODE Run hero (ring-2 verdict-first redesign): the fidelity + status
 // verdict that replaces the raw field dump. The data (fidelity/status/
@@ -18,17 +19,6 @@ const STATUS_LABEL: Record<string, string> = {
   failed: "failed",
   recorded: "recorded",
 }
-// tone → status-badge color, mapped to theme semantics in css (ok/warn/critical).
-const STATUS_TONE: Record<string, string> = {
-  finished: "ok",
-  solving: "active",
-  stalled: "warn",
-  stopped: "muted",
-  aborted: "muted",
-  failed: "critical",
-  recorded: "muted",
-}
-
 export function RunVerdictView(props: { verdict: RunVerdict }) {
   const v = () => props.verdict
   return (
@@ -40,7 +30,7 @@ export function RunVerdictView(props: { verdict: RunVerdict }) {
             <span class="amc-run-fk">F</span> = {v().fidelity}
           </span>
         </Show>
-        <span class="amc-run-status" data-slot="amicode-run-status" data-tone={STATUS_TONE[v().status] ?? "muted"}>
+        <span class="amc-run-status" data-slot="amicode-run-status" data-activity={runActivity(v().status)}>
           {STATUS_LABEL[v().status] ?? v().status}
         </span>
       </div>
diff --git a/packages/ui/src/amicode/run-window.tsx b/packages/ui/src/amicode/run-window.tsx
index b0ae61c28b..81ed2504dd 100644
--- a/packages/ui/src/amicode/run-window.tsx
+++ b/packages/ui/src/amicode/run-window.tsx
@@ -2,6 +2,8 @@ import { For, Show, createEffect, createMemo, onCleanup, onMount } from "solid-j
 import { createStore, reconcile } from "solid-js/store"
 import { fetchAmicodeRunSeries, openAmicodeEntity } from "./ui-bridge"
 import { heroPaths, objectivePath } from "./run-plot"
+import { runActivity } from "./activity"
+import { ActivityDot } from "./activity-dot"
 import {
   type RunSeries,
   type RunSeriesView,
@@ -28,14 +30,6 @@ const PLOT_H = 34
 const SPARK_W = 40
 const SPARK_H = 14
 
-function statusColor(status: string): string {
-  if (status === "finished") return "var(--v2-state-fg-success)"
-  if (status === "failed" || status === "aborted") return "var(--v2-state-fg-danger)"
-  if (status === "stalled") return "var(--v2-state-fg-warning)" // wedged (OOM?) — not blue: must not read as live
-  if (status === "stopped") return "var(--v2-text-text-muted)" // deliberate user stop — calm, not alarming, not live
-  return "var(--v2-text-text-accent)" // solving
-}
-
 function Plot(props: { d: string[] | undefined }) {
   return (
     <Show
@@ -173,7 +167,20 @@ export function RunWindow(props: { run: string; lab?: string }) {
         >
           {(r) => (
             <>
-              <span style={{ "font-weight": "600", color: statusColor(r().status), "flex-shrink": "0" }}>
+              {/* the dot carries the activity colour (blue solving, amber stalled,
+                  grey aborted/stopped); the word stays neutral ink so small
+                  status text keeps body contrast in both schemes */}
+              <span
+                style={{
+                  display: "inline-flex",
+                  "align-items": "center",
+                  gap: "4px",
+                  "font-weight": "600",
+                  color: "var(--v2-text-text-base)",
+                  "flex-shrink": "0",
+                }}
+              >
+                <ActivityDot activity={runActivity(r().status)} label={`Run ${r().status}`} />
                 {r().status}
               </span>
               <Show when={r().iteration !== null}>
diff --git a/packages/ui/src/amicode/vaults-tab.tsx b/packages/ui/src/amicode/vaults-tab.tsx
index efe8e969b1..d304126bdb 100644
--- a/packages/ui/src/amicode/vaults-tab.tsx
+++ b/packages/ui/src/amicode/vaults-tab.tsx
@@ -3,6 +3,8 @@
 // parsed VaultsView down. `view === undefined` means loading.
 import { For, Show } from "solid-js"
 import type { VaultsView } from "./vaults"
+import { ACTIVITY_COLOR } from "./activity"
+import { ActivityDot } from "./activity-dot"
 
 export const AMICODE_MANAGE_VAULTS_PROMPT = "Help me manage my vaults — check status, mount, create, or repair."
 
@@ -23,7 +25,11 @@ export function AmicodeVaultsTab(props: {
             when={view().ok}
             fallback={
               <div class="flex items-center gap-2 w-full px-2 py-1">
-                <div class="size-1.5 rounded-full shrink-0 bg-icon-critical-base" />
+                <div
+                  aria-hidden="true"
+                  class="size-1.5 rounded-full shrink-0"
+                  style={{ background: ACTIVITY_COLOR.error }}
+                />
                 <span class="text-14-regular text-text-weak flex-1 truncate">{view().error}</span>
                 <button
                   type="button"
@@ -44,12 +50,9 @@ export function AmicodeVaultsTab(props: {
                 {(mount) => (
                   <div class="flex flex-col w-full px-2 py-1" data-slot="amicode-vault-row">
                     <div class="flex items-center gap-2 w-full min-w-0">
-                      <div
-                        classList={{
-                          "size-1.5 rounded-full shrink-0": true,
-                          "bg-icon-success-base": mount.warnings.length === 0,
-                          "bg-icon-warning-base": mount.warnings.length > 0,
-                        }}
+                      <ActivityDot
+                        activity={mount.warnings.length > 0 ? "attention" : "success"}
+                        label={mount.warnings.length > 0 ? "Vault has warnings" : "Vault healthy"}
                       />
                       <span class="text-14-regular text-text-base truncate">{mount.id}</span>
                       <Show when={mount.kind}>
diff --git a/packages/ui/src/components/amicode-activity.tsx b/packages/ui/src/components/amicode-activity.tsx
new file mode 100644
index 0000000000..05f630af5f
--- /dev/null
+++ b/packages/ui/src/components/amicode-activity.tsx
@@ -0,0 +1,12 @@
+// AMICODE: re-export shim so packages/app can import the activity vocabulary
+// through the existing `"./*": "./src/components/*.tsx"` export wildcard.
+export {
+  ACTIVITY_COLOR,
+  ACTIVITY_SOFT,
+  connectionActivity,
+  lspActivity,
+  mcpActivity,
+  runActivity,
+} from "../amicode/activity"
+export type { Activity } from "../amicode/activity"
+export { ActivityDot } from "../amicode/activity-dot"
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
index 371901f4ee..e90bb73409 100644
--- a/packages/ui/src/components/card.css
+++ b/packages/ui/src/components/card.css
@@ -110,6 +110,6 @@ body:not([data-new-layout]) [data-component="card"] {
   }
 
   &[data-variant="error"] {
-    --card-accent: var(--icon-critical-base) !important;
+    --card-accent: var(--activity-error, var(--v2-state-fg-danger)) !important;
   }
 }
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index 917644348f..7b8cf68e34 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -40,10 +40,13 @@ export function Card(props: CardProps) {
   const variant = () => split.variant ?? "normal"
   const accent = () => {
     const v = variant()
-    if (v === "error") return "var(--v2-state-fg-danger)"
-    if (v === "warning") return "var(--icon-warning-active)"
-    if (v === "success") return "var(--icon-success-active)"
-    if (v === "info") return "var(--icon-info-active)"
+    // The app's activity vocabulary (design-polish.css --activity-*): warning is
+    // amber attention, info is the running blue. Falls back to the theme's v2
+    // state tokens where design-polish isn't loaded (share pages, storybook).
+    if (v === "error") return "var(--activity-error, var(--v2-state-fg-danger))"
+    if (v === "warning") return "var(--activity-attention, var(--v2-state-fg-warning))"
+    if (v === "success") return "var(--activity-success, var(--v2-state-fg-success))"
+    if (v === "info") return "var(--activity-running, var(--v2-state-fg-info))"
     return
   }
   return (