diff --git a/apps/cockpit/src/app/[...slug]/page.spec.tsx b/apps/cockpit/src/app/[...slug]/page.spec.tsx
new file mode 100644
index 000000000..da4ab68ed
--- /dev/null
+++ b/apps/cockpit/src/app/[...slug]/page.spec.tsx
@@ -0,0 +1,72 @@
+/** @vitest-environment jsdom */
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({
+  redirect: vi.fn(() => {
+    throw new Error('redirect() should not be called for a canonical slug');
+  }),
+}));
+
+vi.mock('../../lib/content-bundle', () => ({
+  getContentBundle: vi.fn().mockResolvedValue({
+    codeFiles: {},
+    promptFiles: {},
+    runtimeUrl: null,
+    docSections: [],
+    narrativeDocs: [],
+  }),
+}));
+
+import CockpitRoutePage from './page';
+import { getCockpitPageModel } from '../../lib/cockpit-page';
+
+describe('CockpitRoutePage', () => {
+  it('keys the rendered CockpitShell on the canonical path', async () => {
+    const slug = [
+      'langgraph',
+      'core-capabilities',
+      'streaming',
+      'overview',
+      'python',
+    ];
+    const { canonicalPath } = getCockpitPageModel(slug);
+
+    const element = await CockpitRoutePage({
+      params: Promise.resolve({ slug }),
+    });
+
+    expect(element.key).toBe(canonicalPath);
+  });
+
+  it('gives two different capabilities two different keys', async () => {
+    const streamingSlug = [
+      'langgraph',
+      'core-capabilities',
+      'streaming',
+      'overview',
+      'python',
+    ];
+    const persistenceSlug = [
+      'langgraph',
+      'core-capabilities',
+      'persistence',
+      'overview',
+      'python',
+    ];
+
+    const streamingElement = await CockpitRoutePage({
+      params: Promise.resolve({ slug: streamingSlug }),
+    });
+    const persistenceElement = await CockpitRoutePage({
+      params: Promise.resolve({ slug: persistenceSlug }),
+    });
+
+    expect(streamingElement.key).not.toBe(persistenceElement.key);
+    expect(streamingElement.key).toBe(
+      getCockpitPageModel(streamingSlug).canonicalPath
+    );
+    expect(persistenceElement.key).toBe(
+      getCockpitPageModel(persistenceSlug).canonicalPath
+    );
+  });
+});
diff --git a/apps/cockpit/src/app/[...slug]/page.tsx b/apps/cockpit/src/app/[...slug]/page.tsx
index 0f2b14af6..9d67b5324 100644
--- a/apps/cockpit/src/app/[...slug]/page.tsx
+++ b/apps/cockpit/src/app/[...slug]/page.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { redirect } from 'next/navigation';
 import { CockpitShell } from '../../components/cockpit-shell';
 import { getContentBundle } from '../../lib/content-bundle';
@@ -27,6 +28,7 @@ export default async function CockpitRoutePage({
 
   return (
     <CockpitShell
+      key={canonicalPath}
       navigationTree={navigationTree}
       presentation={presentation}
       entryTitle={entry.title}
diff --git a/apps/cockpit/src/app/cockpit.css b/apps/cockpit/src/app/cockpit.css
index 1213cd75b..5e3a2db69 100644
--- a/apps/cockpit/src/app/cockpit.css
+++ b/apps/cockpit/src/app/cockpit.css
@@ -363,6 +363,7 @@ pre.shiki {
 .cockpit-control-plane {
   --cockpit-state-error: #b42318;
   --cockpit-state-success: #1a7a40;
+  --cockpit-state-working: #9a6700;
   display: grid;
   grid-template-columns: 56px minmax(0, 272px);
   height: 100%;
@@ -373,6 +374,7 @@ pre.shiki {
 [data-theme="dark"] .cockpit-control-plane {
   --cockpit-state-error: #ff6369;
   --cockpit-state-success: #4cc38a;
+  --cockpit-state-working: #e0a02f;
 }
 .cockpit-control-plane [data-control-plane-rail] {
   min-width: 0;
@@ -387,9 +389,28 @@ pre.shiki {
   flex-direction: column;
   gap: 4px;
 }
-.cockpit-control-plane [data-control-plane-rail-group="utilities"] { margin-top: auto; }
+.cockpit-control-plane [data-control-plane-rail-group="utilities"] {
+  margin-top: auto;
+  padding-top: 8px;
+  /* --ds-border is a 1-value difference from --ds-surface-tinted (the rail
+     background) in dark mode -- rgb(45,45,45) on rgb(44,44,44), effectively
+     invisible. --ds-border-strong is the token the pane divider already
+     uses for the same reason (cockpit.css ~L460). */
+  border-top: 1px solid var(--ds-border-strong);
+}
+.cockpit-control-plane [data-control-plane-rail-group-label] {
+  display: block;
+  padding-bottom: 4px;
+  color: var(--ds-text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  text-align: center;
+}
 .cockpit-control-plane-utility-anchor { display: contents; }
 .cockpit-control-plane [data-control-plane-rail-item] {
+  --cockpit-rail-status-ring: var(--ds-surface-tinted);
   position: relative;
   min-height: 48px;
   padding: 6px 2px;
@@ -400,13 +421,14 @@ pre.shiki {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: var(--ds-text-muted);
+  color: var(--ds-text-secondary);
   background: transparent;
   text-decoration: none;
   cursor: pointer;
   transition: background 120ms ease, color 120ms ease;
 }
 .cockpit-control-plane [data-control-plane-rail-item]:hover {
+  --cockpit-rail-status-ring: var(--ds-surface);
   color: var(--ds-text-primary);
   background: var(--ds-surface);
 }
@@ -419,6 +441,24 @@ pre.shiki {
   line-height: 1;
   font-weight: 600;
 }
+.cockpit-control-plane [data-control-plane-rail-status] {
+  position: absolute;
+  top: 7px;
+  right: 11px;
+  width: 7px;
+  height: 7px;
+  border: 2px solid var(--cockpit-rail-status-ring);
+  border-radius: 999px;
+}
+.cockpit-control-plane [data-control-plane-rail-status="success"] {
+  background: var(--cockpit-state-success);
+}
+.cockpit-control-plane [data-control-plane-rail-status="working"] {
+  background: var(--cockpit-state-working);
+}
+.cockpit-control-plane [data-control-plane-rail-status="error"] {
+  background: var(--cockpit-state-error);
+}
 .cockpit-control-plane [data-control-plane-rail-icon],
 [data-cockpit-activity-icon] {
   display: inline-flex;
@@ -950,6 +990,10 @@ pre.shiki {
     color: CanvasText;
     background: Canvas;
   }
+  .cockpit-control-plane [data-control-plane-rail-status] {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
   .cockpit-control-plane [data-control-plane-overflow-menu] {
     border: 1px solid CanvasText;
     color: CanvasText;
diff --git a/apps/cockpit/src/components/cockpit-shell.spec.tsx b/apps/cockpit/src/components/cockpit-shell.spec.tsx
index 6beac1d78..b9afbc183 100644
--- a/apps/cockpit/src/components/cockpit-shell.spec.tsx
+++ b/apps/cockpit/src/components/cockpit-shell.spec.tsx
@@ -94,8 +94,7 @@ const baseContentBundle = {
   narrativeDocs: [],
 };
 
-const seedMode = (
-  activeMode: 'Run' | 'Code' | 'Docs' | 'API',
+const seedExpanded = (
   expanded: Record<string, boolean> = {
     Capability: true,
     Runtime: true,
@@ -106,7 +105,7 @@ const seedMode = (
     JSON.stringify({
       version: 1,
       docs: { expanded: { Learn: true, Environment: false } },
-      cockpit: { activeMode, expanded },
+      cockpit: { expanded },
     })
   );
 };
@@ -140,6 +139,11 @@ const renderShellFor = (
   );
 };
 
+// The Run rail item's accessible name carries the live runtime phase
+// ('Run, runtime ready'), so these mode assertions match the label prefix
+// instead of a name that depends on which phase the fixture happens to be in.
+const RUN_RAIL_ITEM = /^Run(,|$)/;
+
 const openActivity = () => {
   fireEvent.click(screen.getByRole('button', { name: /^Activity/ }));
   return screen.getByRole('heading', {
@@ -168,22 +172,34 @@ describe('CockpitShell operational composition', () => {
     vi.restoreAllMocks();
   });
 
-  it('initializes from the saved Cockpit mode after hydration', async () => {
-    seedMode('Docs');
+  it('always opens in Run, ignoring a stored activeMode from an older visit', async () => {
+    window.localStorage.setItem(
+      CONTROL_PLANE_STORAGE_KEY,
+      JSON.stringify({
+        version: 1,
+        docs: { expanded: { Learn: true, Environment: false } },
+        cockpit: {
+          activeMode: 'Code',
+          expanded: { Capability: true, Runtime: true },
+        },
+      })
+    );
     renderShell();
 
     await waitFor(() => {
       expect(
         screen
-          .getByRole('button', { name: 'Docs' })
+          .getByRole('button', { name: RUN_RAIL_ITEM })
           .getAttribute('aria-pressed')
       ).toBe('true');
     });
-    expect(screen.getByRole('region', { name: 'Docs mode' })).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: 'Code' }).getAttribute('aria-pressed')
+    ).toBe('false');
   });
 
-  it('consumes a valid mode query once and persists it over the saved mode', async () => {
-    seedMode('Docs');
+  it('consumes a valid mode query once and lands in that mode', async () => {
+    seedExpanded();
     window.history.replaceState({}, '', '/?mode=code&keep=1');
     renderShell();
 
@@ -195,28 +211,73 @@ describe('CockpitShell operational composition', () => {
       ).toBe('true');
     });
     expect(window.location.search).toBe('?keep=1');
-    expect(
-      JSON.parse(window.localStorage.getItem(CONTROL_PLANE_STORAGE_KEY) ?? '{}')
-        .cockpit.activeMode
-    ).toBe('Code');
   });
 
-  it('ignores invalid mode queries and uses the saved mode', async () => {
-    seedMode('API');
+  it('ignores invalid mode queries and falls back to Run', async () => {
+    seedExpanded();
     window.history.replaceState({}, '', '/?mode=preview');
     renderShell();
 
     await waitFor(() => {
       expect(
-        screen.getByRole('button', { name: 'API' }).getAttribute('aria-pressed')
+        screen
+          .getByRole('button', { name: RUN_RAIL_ITEM })
+          .getAttribute('aria-pressed')
       ).toBe('true');
     });
+    expect(window.location.search).toBe('');
+  });
+
+  it('lands a newly navigated-to capability on Run even after switching to Code, when the shell remounts on the route key', async () => {
+    const { rerender } = render(
+      <ThemeProvider theme="light">
+        <CockpitShell
+          key={model.canonicalPath}
+          navigationTree={model.navigationTree}
+          presentation={model.presentation}
+          entryTitle={model.entry.title}
+          contentBundle={baseContentBundle}
+        />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Code' }));
+    await waitFor(() => {
+      expect(
+        screen
+          .getByRole('button', { name: 'Code' })
+          .getAttribute('aria-pressed')
+      ).toBe('true');
+    });
+
+    rerender(
+      <ThemeProvider theme="light">
+        <CockpitShell
+          key={persistenceModel.canonicalPath}
+          navigationTree={persistenceModel.navigationTree}
+          presentation={persistenceModel.presentation}
+          entryTitle={persistenceModel.entry.title}
+          contentBundle={baseContentBundle}
+        />
+      </ThemeProvider>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen
+          .getByRole('button', { name: RUN_RAIL_ITEM })
+          .getAttribute('aria-pressed')
+      ).toBe('true');
+    });
+    expect(
+      screen.getByRole('button', { name: 'Code' }).getAttribute('aria-pressed')
+    ).toBe('false');
   });
 
   it('owns one controller and one Activity store shared by desktop and mobile adapters', async () => {
     renderShell();
     await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Run' })).toBeTruthy()
+      expect(screen.getByRole('button', { name: RUN_RAIL_ITEM })).toBeTruthy()
     );
     expect(operationalMocks.controllerInstances).toBe(1);
 
@@ -232,6 +293,75 @@ describe('CockpitShell operational composition', () => {
     expect(operationalMocks.controllerInstances).toBe(1);
   });
 
+  it('flags an unread runtime problem until Activity is opened, and survives recovery', async () => {
+    renderShell();
+    await waitFor(() =>
+      expect(operationalMocks.latestControllerOptions).not.toBeNull()
+    );
+
+    // Routine activity must not light the indicator.
+    act(() => {
+      operationalMocks.latestControllerOptions?.onActivity({
+        id: 'ready-event',
+        at: '2026-08-31T17:00:00.000Z',
+        kind: 'runtime_ready',
+        capability: 'streaming',
+      });
+    });
+    expect(screen.getByRole('button', { name: 'Activity' })).toBeTruthy();
+
+    act(() => {
+      operationalMocks.latestControllerOptions?.onActivity({
+        id: 'unresponsive-event',
+        at: '2026-08-31T17:01:00.000Z',
+        kind: 'runtime_unresponsive',
+        capability: 'streaming',
+      });
+    });
+    expect(
+      screen.getAllByRole('button', { name: 'Activity, 1 unread problem' })
+    ).not.toHaveLength(0);
+
+    // A self-recovering runtime clears the phase but not the unread problem.
+    act(() => {
+      operationalMocks.latestControllerOptions?.onActivity({
+        id: 'recovered-event',
+        at: '2026-08-31T17:02:00.000Z',
+        kind: 'runtime_recovered',
+        capability: 'streaming',
+      });
+    });
+    expect(
+      screen.getAllByRole('button', { name: 'Activity, 1 unread problem' })
+    ).not.toHaveLength(0);
+
+    openActivity();
+    expect(
+      screen.getAllByRole('button', { name: 'Activity' })
+    ).not.toHaveLength(0);
+
+    // Clearing the log must reset the marker too. If it did not, the marker
+    // would stay at N over an empty log and silently swallow the next N
+    // problems for the rest of the page visit.
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'Activity actions' })[0]
+    );
+    fireEvent.click(
+      screen.getAllByRole('menuitem', { name: 'Clear session activity' })[0]
+    );
+    act(() => {
+      operationalMocks.latestControllerOptions?.onActivity({
+        id: 'post-clear-event',
+        at: '2026-08-31T17:03:00.000Z',
+        kind: 'runtime_unresponsive',
+        capability: 'streaming',
+      });
+    });
+    expect(
+      screen.getAllByRole('button', { name: 'Activity, 1 unread problem' })
+    ).not.toHaveLength(0);
+  });
+
   it('does not reset drawer focus when shared operational state rerenders', async () => {
     renderShell();
     await waitFor(() =>
@@ -477,7 +607,7 @@ describe('CockpitShell operational composition', () => {
   it('records one fixed Activity event and one existing analytics event only for an actual mode change', async () => {
     renderShell();
     await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Run' })).toBeTruthy()
+      expect(screen.getByRole('button', { name: RUN_RAIL_ITEM })).toBeTruthy()
     );
 
     fireEvent.click(screen.getByRole('button', { name: 'Code' }));
@@ -507,7 +637,7 @@ describe('CockpitShell operational composition', () => {
   });
 
   it('reloads only the iframe while preserving shell state and session Activity', async () => {
-    seedMode('Run', { Capability: true, Runtime: true });
+    seedExpanded({ Capability: true, Runtime: true });
     renderShell('https://runtime.test/path?secret=hidden');
     const firstFrame = await screen.findByTitle(
       'LangGraph Streaming live example'
@@ -528,7 +658,9 @@ describe('CockpitShell operational composition', () => {
       )
     );
     expect(
-      screen.getByRole('button', { name: 'Run' }).getAttribute('aria-pressed')
+      screen
+        .getByRole('button', { name: 'Run, runtime starting' })
+        .getAttribute('aria-pressed')
     ).toBe('true');
     expect(window.location.pathname).toBe(routeBefore);
     expect(
@@ -553,7 +685,7 @@ describe('CockpitShell operational composition', () => {
     for (let index = 0; index < 22; index += 1) {
       fireEvent.click(
         screen.getByRole('button', {
-          name: index % 2 === 0 ? 'Code' : 'Run',
+          name: index % 2 === 0 ? 'Code' : 'Run, runtime starting',
         })
       );
     }
diff --git a/apps/cockpit/src/components/cockpit-shell.tsx b/apps/cockpit/src/components/cockpit-shell.tsx
index 5d9085834..3f3a286ca 100644
--- a/apps/cockpit/src/components/cockpit-shell.tsx
+++ b/apps/cockpit/src/components/cockpit-shell.tsx
@@ -29,6 +29,7 @@ import type {
 } from '../lib/analytics/events';
 import {
   activityReducer,
+  countUnseenProblems,
   createSessionActivityEvent,
   type ActivityMode,
   type RuntimeActivityInput,
@@ -159,9 +160,11 @@ export function CockpitShell({
   const queryHandled = useRef(false);
   const mobileTriggerRef = useRef<HTMLButtonElement>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [activeMode, setActiveMode] = useState<ControlPlaneMode>('Run');
   const [isMobileOverlayPresent, setIsMobileOverlayPresent] = useState(false);
   const [activeUtility, setActiveUtility] = useState<CockpitUtility>(null);
   const [activityOpenCycle, setActivityOpenCycle] = useState(0);
+  const [seenActivityCount, setSeenActivityCount] = useState(0);
   const [events, dispatchActivity] = useReducer(activityReducer, []);
   const isCapability = presentation.kind === 'capability';
   const codeAssetPaths = isCapability ? presentation.codeAssetPaths : [];
@@ -203,12 +206,12 @@ export function CockpitShell({
   const docsUrl = resolveDocsUrl(presentation.docsPath);
 
   useEffect(() => {
-    if (!preferences.hydrated || queryHandled.current) return;
+    if (queryHandled.current) return;
     queryHandled.current = true;
     const url = new URL(window.location.href);
     const rawMode = url.searchParams.get('mode');
     const requestedMode = parseControlPlaneMode(rawMode);
-    if (requestedMode) preferences.setActiveMode(requestedMode);
+    if (requestedMode) setActiveMode(requestedMode);
     if (rawMode !== null) {
       url.searchParams.delete('mode');
       window.history.replaceState(
@@ -217,15 +220,14 @@ export function CockpitShell({
         url.pathname + url.search + url.hash
       );
     }
-  }, [preferences]);
+  }, []);
 
-  const activeMode: ControlPlaneMode = preferences.activeMode;
   const isMobileModalActive = isSidebarOpen || isMobileOverlayPresent;
 
   const handleModeChange = useCallback(
     (mode: ControlPlaneMode) => {
       if (mode === activeMode) return;
-      preferences.setActiveMode(mode);
+      setActiveMode(mode);
       appendActivity(
         createLocalActivityInput(entry.topic, {
           kind: 'mode_changed',
@@ -238,17 +240,18 @@ export function CockpitShell({
         to_mode: MODE_ANALYTICS[mode],
       });
     },
-    [activeMode, appendActivity, entry.topic, preferences]
+    [activeMode, appendActivity, entry.topic]
   );
 
   const handleActiveUtilityChange = useCallback(
     (utility: CockpitUtility) => {
       if (utility === 'activity' && activeUtility !== 'activity') {
         setActivityOpenCycle((cycle) => cycle + 1);
+        setSeenActivityCount(events.length);
       }
       setActiveUtility(utility);
     },
-    [activeUtility]
+    [activeUtility, events.length]
   );
 
   const closeMobileNavigation = useCallback(() => {
@@ -319,6 +322,7 @@ export function CockpitShell({
 
   const handleClearActivity = useCallback(() => {
     dispatchActivity({ type: 'clear' });
+    setSeenActivityCount(0);
   }, []);
 
   const handleRecheck = useCallback(() => {
@@ -392,6 +396,7 @@ export function CockpitShell({
       activityOpenCycle,
       runtimeSnapshot: controller.snapshot,
       events,
+      unseenProblems: countUnseenProblems(events, seenActivityCount),
       expanded: preferences.expanded,
       onExpandedChange: preferences.setExpanded,
       onClearActivity: handleClearActivity,
@@ -417,6 +422,7 @@ export function CockpitShell({
       navigationTree,
       preferences.expanded,
       preferences.setExpanded,
+      seenActivityCount,
     ]
   );
 
diff --git a/apps/cockpit/src/components/control-plane/activity-panel.spec.tsx b/apps/cockpit/src/components/control-plane/activity-panel.spec.tsx
index f08df83be..0c46eb5b2 100644
--- a/apps/cockpit/src/components/control-plane/activity-panel.spec.tsx
+++ b/apps/cockpit/src/components/control-plane/activity-panel.spec.tsx
@@ -176,7 +176,7 @@ describe('ActivityPanel', () => {
       />
     );
     expect(
-      screen.getByRole('list', { name: 'Activity, attention required' })
+      screen.getByRole('list', { name: 'Activity, unread problems' })
     ).toBeTruthy();
     expect(
       document
diff --git a/apps/cockpit/src/components/control-plane/activity-panel.tsx b/apps/cockpit/src/components/control-plane/activity-panel.tsx
index 0deb6dcf9..ee06dba89 100644
--- a/apps/cockpit/src/components/control-plane/activity-panel.tsx
+++ b/apps/cockpit/src/components/control-plane/activity-panel.tsx
@@ -81,7 +81,7 @@ export function ActivityPanel({
   formatTimestamp = defaultTimestamp,
 }: ActivityPanelProps) {
   const orderedEvents = [...events].sort(byNewest);
-  const label = attention ? 'Activity, attention required' : 'Activity';
+  const label = attention ? 'Activity, unread problems' : 'Activity';
 
   return (
     <ControlPlaneUtilityPanel title="Activity" onClose={onClose}>
diff --git a/apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx b/apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx
index b8ee72649..ede89bde1 100644
--- a/apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx
+++ b/apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx
@@ -1,5 +1,8 @@
 /** @vitest-environment jsdom */
 import React, { useState } from 'react';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { cockpitManifest } from '@threadplane/cockpit-registry';
 import { ThemeProvider, type ControlPlaneMode } from '@threadplane/ui-react';
@@ -17,6 +20,11 @@ import {
   type CockpitUtility,
 } from './cockpit-control-plane';
 
+const cockpitCss = readFileSync(
+  resolve(fileURLToPath(import.meta.url), '../../../app/cockpit.css'),
+  'utf8'
+);
+
 const entry = cockpitManifest.find(
   (candidate) =>
     candidate.product === 'langgraph' &&
@@ -92,6 +100,7 @@ const renderControlPlane = (overrides: HarnessOverrides = {}) => {
           activityOpenCycle={1}
           runtimeSnapshot={runtimeSnapshot('ready')}
           events={activity}
+          unseenProblems={0}
           expanded={{ Capability: true, Runtime: true }}
           onExpandedChange={onExpandedChange}
           {...actions}
@@ -116,10 +125,15 @@ describe('CockpitControlPlane', () => {
       within(rail)
         .getAllByRole('button')
         .slice(0, 4)
-        .map((button) => button.textContent)
+        .map(
+          (button) =>
+            button.querySelector('[data-control-plane-rail-label]')?.textContent
+        )
     ).toEqual(['Docs', 'Run', 'Code', 'API']);
     expect(
-      screen.getByRole('button', { name: 'Run' }).getAttribute('aria-pressed')
+      screen
+        .getByRole('button', { name: 'Run, runtime ready' })
+        .getAttribute('aria-pressed')
     ).toBe('true');
 
     const pane = screen.getByRole('complementary', {
@@ -143,27 +157,30 @@ describe('CockpitControlPlane', () => {
     expect(within(pane).queryByText('Actions')).toBeNull();
   });
 
-  it('renders Activity above Settings with a nonnumeric attention indicator that opening does not clear', () => {
-    renderControlPlane({ runtimeSnapshot: runtimeSnapshot('unresponsive') });
+  it('flags unseen problems on Activity and clears them when the panel opens', () => {
+    renderControlPlane({ unseenProblems: 1 });
     const rail = screen.getByRole('navigation', { name: 'Cockpit modes' });
     const utilities = within(rail).getAllByRole('button').slice(4);
     expect(
       utilities.map((button) => button.getAttribute('aria-label'))
-    ).toEqual(['Activity, attention required', 'Settings']);
+    ).toEqual(['Activity, 1 unread problem', 'Settings']);
     expect(
       document.querySelector('[data-cockpit-activity-attention]')?.textContent
     ).toBe('');
+  });
 
-    fireEvent.click(
-      screen.getByRole('button', {
-        name: 'Activity, attention required',
-      })
-    );
-    expect(screen.getByRole('heading', { name: 'Activity' })).toBeTruthy();
+  it('does not flag Activity when nothing has gone wrong', () => {
+    renderControlPlane({ unseenProblems: 0 });
+    expect(screen.getByRole('button', { name: 'Activity' })).toBeTruthy();
+    expect(
+      document.querySelector('[data-cockpit-activity-attention]')
+    ).toBeNull();
+  });
+
+  it('pluralises the unseen problem count', () => {
+    renderControlPlane({ unseenProblems: 3 });
     expect(
-      screen.getByRole('button', {
-        name: 'Activity, attention required',
-      })
+      screen.getByRole('button', { name: 'Activity, 3 unread problems' })
     ).toBeTruthy();
   });
 
@@ -172,7 +189,9 @@ describe('CockpitControlPlane', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Activity' }));
     expect(screen.getByRole('heading', { name: 'Activity' })).toBeTruthy();
     expect(
-      screen.getByRole('button', { name: 'Run' }).getAttribute('aria-pressed')
+      screen
+        .getByRole('button', { name: 'Run, runtime ready' })
+        .getAttribute('aria-pressed')
     ).toBe('true');
 
     fireEvent.click(screen.getByRole('button', { name: 'Settings' }));
@@ -223,4 +242,73 @@ describe('CockpitControlPlane', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Recheck' }));
     expect(result.onRecheck).toHaveBeenCalledTimes(1);
   });
+
+  it('separates the mode group from the utilities and lifts resting contrast', () => {
+    // The utilities separator must resolve to --ds-border-strong, not
+    // --ds-border: in dark mode --ds-border (rgb(45,45,45)) sits one value
+    // away from --ds-surface-tinted, the rail background (rgb(44,44,44)),
+    // which is an invisible 1.01:1 hairline. --ds-border-strong is what the
+    // pane divider already uses for the same reason. This is a text
+    // assertion, not a rendered-contrast check -- jsdom's getComputedStyle
+    // does not resolve var(), so it can't verify the resolved colour, only
+    // that the correct token is referenced.
+    expect(cockpitCss).toMatch(
+      /\[data-control-plane-rail-group="utilities"\][^}]*border-top:\s*1px solid var\(--ds-border-strong\)/
+    );
+    expect(cockpitCss).not.toMatch(
+      /\[data-control-plane-rail-item\]\s*\{[^}]*--ds-text-muted/
+    );
+  });
+
+  it('puts the runtime phase on the Run rail item', () => {
+    renderControlPlane({ runtimeSnapshot: runtimeSnapshot('unresponsive') });
+    const run = screen.getByRole('button', { name: 'Run, runtime error' });
+    expect(
+      run
+        .querySelector('[data-control-plane-rail-status]')
+        ?.getAttribute('data-control-plane-rail-status')
+    ).toBe('error');
+  });
+
+  it('shows no dot on Run when no runtime is configured', () => {
+    renderControlPlane({
+      runtimeSnapshot: runtimeSnapshot('not_configured'),
+    });
+    const run = screen.getByRole('button', { name: 'Run' });
+    expect(run.querySelector('[data-control-plane-rail-status]')).toBeNull();
+  });
+
+  it('keeps the status dot ring on the item background and visible in forced colors', () => {
+    // jsdom does not resolve var() in getComputedStyle, so this asserts the
+    // authored rules, not a rendered colour. The ring must track the rail
+    // item's own background: --ds-surface-tinted at rest, --ds-surface on
+    // hover, which in dark is rgb(28,28,28) inside the rail's rgb(44,44,44)
+    // -- a fixed ring would read as a lighter halo whenever Run is hovered.
+    expect(cockpitCss).toMatch(
+      /\[data-control-plane-rail-status\]\s*\{[^}]*border:\s*2px solid var\(--cockpit-rail-status-ring\)/
+    );
+    expect(cockpitCss).toMatch(
+      /\[data-control-plane-rail-item\]\s*\{[^}]*--cockpit-rail-status-ring:\s*var\(--ds-surface-tinted\)/
+    );
+    expect(cockpitCss).toMatch(
+      /\[data-control-plane-rail-item\]:hover\s*\{[^}]*--cockpit-rail-status-ring:\s*var\(--ds-surface\)/
+    );
+    // Forced colors overrides background, so the dot needs an explicit
+    // treatment like the runtime pill it sits beside.
+    expect(
+      cockpitCss.slice(cockpitCss.indexOf('@media (forced-colors: active)'))
+    ).toMatch(
+      /\[data-control-plane-rail-status\]\s*\{[^}]*border:\s*1px solid CanvasText/
+    );
+  });
+
+  it('names the mode group as an ARIA group announced to screen readers', () => {
+    renderControlPlane();
+    const rail = screen.getByRole('navigation', { name: 'Cockpit modes' });
+    const group = screen.getByRole('group', { name: 'View' });
+    expect(rail.contains(group)).toBe(true);
+    const cap = group.querySelector('[data-control-plane-rail-group-label]');
+    expect(cap?.textContent).toBe('View');
+    expect(cap?.getAttribute('aria-hidden')).toBeNull();
+  });
 });
diff --git a/apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx b/apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx
index a6f94a285..35a284e3f 100644
--- a/apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx
+++ b/apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx
@@ -22,7 +22,7 @@ import type { NavigationProduct } from '../../lib/route-resolution';
 import { PRODUCT_LABELS } from '../../lib/navigation-labels';
 import type { SessionActivityEvent } from '../../lib/runtime/session-activity';
 import {
-  runtimeNeedsAttention,
+  runtimeRailStatus,
   type RuntimeSnapshot,
 } from '../../lib/runtime/runtime-state';
 import { CockpitSidebar } from '../sidebar/cockpit-sidebar';
@@ -59,6 +59,7 @@ export interface CockpitControlPlaneProps {
   activityOpenCycle: number;
   runtimeSnapshot: RuntimeSnapshot;
   events: readonly SessionActivityEvent[];
+  unseenProblems: number;
   expanded: Record<string, boolean>;
   onExpandedChange(key: string, open: boolean): void;
   onClearActivity(): void;
@@ -86,6 +87,7 @@ export function CockpitControlPlane({
   activityOpenCycle,
   runtimeSnapshot,
   events,
+  unseenProblems,
   expanded,
   onExpandedChange,
   onClearActivity,
@@ -99,8 +101,13 @@ export function CockpitControlPlane({
 }: CockpitControlPlaneProps) {
   const activityRef = useRef<HTMLSpanElement>(null);
   const settingsRef = useRef<HTMLSpanElement>(null);
-  const attention = runtimeNeedsAttention(runtimeSnapshot.phase);
-  const activityLabel = attention ? 'Activity, attention required' : 'Activity';
+  const railStatus = runtimeRailStatus(runtimeSnapshot.phase);
+  const attention = unseenProblems > 0;
+  const activityLabel = attention
+    ? `Activity, ${unseenProblems} unread problem${
+        unseenProblems === 1 ? '' : 's'
+      }`
+    : 'Activity';
   const product = PRODUCT_LABELS[entry.product] ?? entry.product;
   const language = entry.language === 'typescript' ? 'TypeScript' : 'Python';
 
@@ -197,6 +204,7 @@ export function CockpitControlPlane({
     >
       <ControlPlaneRail
         label="Cockpit modes"
+        primaryLabel="View"
         primary={MODES.map(({ label, icon: Icon }) => (
           <ControlPlaneRailItem
             key={label}
@@ -204,6 +212,7 @@ export function CockpitControlPlane({
             icon={<Icon size={18} aria-hidden="true" />}
             active={label === activeMode}
             onSelect={() => selectMode(label)}
+            status={label === 'Run' ? railStatus ?? undefined : undefined}
           />
         ))}
         utilities={
diff --git a/apps/cockpit/src/components/mobile-nav-overlay.spec.tsx b/apps/cockpit/src/components/mobile-nav-overlay.spec.tsx
index 52f2b3a3c..c4cd18923 100644
--- a/apps/cockpit/src/components/mobile-nav-overlay.spec.tsx
+++ b/apps/cockpit/src/components/mobile-nav-overlay.spec.tsx
@@ -71,6 +71,7 @@ const renderOverlay = ({
             activityOpenCycle: 0,
             runtimeSnapshot: snapshot,
             events: [],
+            unseenProblems: 0,
             expanded: { Capability: true, Runtime: true },
             onExpandedChange: vi.fn(),
             onClearActivity: vi.fn(),
@@ -194,7 +195,12 @@ describe('MobileNavOverlay', () => {
       expect(
         within(overlay).getByRole('heading', { name: utility })
       ).toBeTruthy();
-      expect(within(overlay).getByRole('button', { name: 'Run' })).toBeTruthy();
+      // This fixture's runtime is not_configured, so Run has no status suffix
+      // and the bare name matches -- but the suffix exists in other phases, so
+      // match the label prefix rather than depending on the fixture.
+      expect(
+        within(overlay).getByRole('button', { name: /^Run(,|$)/ })
+      ).toBeTruthy();
       expect(
         within(overlay).queryByRole('button', { name: 'Capability' })
       ).toBeNull();
diff --git a/apps/cockpit/src/lib/runtime/runtime-state.spec.ts b/apps/cockpit/src/lib/runtime/runtime-state.spec.ts
index 70790b3cb..fb4a34aef 100644
--- a/apps/cockpit/src/lib/runtime/runtime-state.spec.ts
+++ b/apps/cockpit/src/lib/runtime/runtime-state.spec.ts
@@ -1,8 +1,9 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, it, test } from 'vitest';
 import {
   classifyRuntimeTerminalTransition,
   createRuntimeSnapshot,
   parseRuntimeTarget,
+  runtimeRailStatus,
   runtimeReducer,
   type RuntimeSnapshot,
 } from './runtime-state';
@@ -573,3 +574,40 @@ describe('classifyRuntimeTerminalTransition', () => {
     ).toBeNull();
   });
 });
+
+describe('runtimeRailStatus', () => {
+  it('maps every phase to a rail status', () => {
+    expect(runtimeRailStatus('ready')).toEqual({
+      kind: 'success',
+      label: 'runtime ready',
+    });
+    expect(runtimeRailStatus('connecting')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('checking')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('reloading')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('unresponsive')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+    expect(runtimeRailStatus('error')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+    expect(runtimeRailStatus('invalid_configuration')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+  });
+
+  it('reports no status when there is no runtime to report on', () => {
+    expect(runtimeRailStatus('not_configured')).toBeNull();
+  });
+});
diff --git a/apps/cockpit/src/lib/runtime/runtime-state.ts b/apps/cockpit/src/lib/runtime/runtime-state.ts
index 82bbbc94d..cb761c864 100644
--- a/apps/cockpit/src/lib/runtime/runtime-state.ts
+++ b/apps/cockpit/src/lib/runtime/runtime-state.ts
@@ -1,3 +1,5 @@
+import type { ControlPlaneRailItemStatus } from '@threadplane/ui-react';
+
 export type RuntimePhase =
   | 'not_configured'
   | 'invalid_configuration'
@@ -281,10 +283,21 @@ export function classifyRuntimeTerminalTransition(
   return result;
 }
 
-export function runtimeNeedsAttention(phase: RuntimePhase): boolean {
-  return (
-    phase === 'invalid_configuration' ||
-    phase === 'unresponsive' ||
-    phase === 'error'
-  );
+export function runtimeRailStatus(
+  phase: RuntimePhase
+): ControlPlaneRailItemStatus | null {
+  switch (phase) {
+    case 'ready':
+      return { kind: 'success', label: 'runtime ready' };
+    case 'connecting':
+    case 'checking':
+    case 'reloading':
+      return { kind: 'working', label: 'runtime starting' };
+    case 'unresponsive':
+    case 'error':
+    case 'invalid_configuration':
+      return { kind: 'error', label: 'runtime error' };
+    case 'not_configured':
+      return null;
+  }
 }
diff --git a/apps/cockpit/src/lib/runtime/session-activity.spec.ts b/apps/cockpit/src/lib/runtime/session-activity.spec.ts
index fdca9e229..222437798 100644
--- a/apps/cockpit/src/lib/runtime/session-activity.spec.ts
+++ b/apps/cockpit/src/lib/runtime/session-activity.spec.ts
@@ -1,12 +1,13 @@
 import { describe, expect, expectTypeOf, test } from 'vitest';
 import {
   activityReducer,
+  countUnseenProblems,
   createSessionActivityEvent,
   type ActivityKind,
+  type ActivitySeverity,
   type RuntimeActivityInput,
   type SessionActivityEvent,
 } from './session-activity';
-import { runtimeNeedsAttention, type RuntimePhase } from './runtime-state';
 
 const common = {
   id: 'event-1',
@@ -164,20 +165,65 @@ describe('activityReducer', () => {
   });
 });
 
-describe('runtimeNeedsAttention', () => {
-  test.each([
-    ['not_configured', false],
-    ['invalid_configuration', true],
-    ['connecting', false],
-    ['checking', false],
-    ['ready', false],
-    ['unresponsive', true],
-    ['reloading', false],
-    ['error', true],
-  ] satisfies ReadonlyArray<readonly [RuntimePhase, boolean]>)(
-    'derives attention for %s solely from phase',
-    (phase, expected) => {
-      expect(runtimeNeedsAttention(phase)).toBe(expected);
-    },
-  );
+describe('countUnseenProblems', () => {
+  const event = (
+    id: string,
+    kind: ActivityKind,
+    severity: ActivitySeverity,
+  ): SessionActivityEvent => ({
+    id,
+    at: '2026-08-31T17:00:00.000Z',
+    kind,
+    severity,
+    capability: 'streaming',
+    summary: kind,
+  });
+
+  test('counts only error events beyond the seen marker', () => {
+    const events = [
+      event('a', 'runtime_ready', 'success'),
+      event('b', 'mode_changed', 'neutral'),
+      event('c', 'runtime_unresponsive', 'error'),
+    ];
+    expect(countUnseenProblems(events, 0)).toBe(1);
+  });
+
+  test('ignores routine activity entirely', () => {
+    const events = [
+      event('a', 'runtime_ready', 'success'),
+      event('b', 'mode_changed', 'neutral'),
+    ];
+    expect(countUnseenProblems(events, 0)).toBe(0);
+  });
+
+  test('ignores errors the user has already seen', () => {
+    const events = [
+      event('a', 'runtime_unresponsive', 'error'),
+      event('b', 'mode_changed', 'neutral'),
+    ];
+    expect(countUnseenProblems(events, 2)).toBe(0);
+  });
+
+  test('reads the unseen window from the newest end of the log', () => {
+    // activityReducer prepends, so index 0 is the most recent arrival and the
+    // seen prefix is the TAIL of the array.
+    const events = [
+      event('c', 'runtime_unresponsive', 'error'),
+      event('b', 'mode_changed', 'neutral'),
+      event('a', 'runtime_ready', 'success'),
+    ];
+    expect(countUnseenProblems(events, 2)).toBe(1);
+  });
+
+  test('treats a marker beyond a trimmed log as everything seen', () => {
+    // A stale marker must not make slice() count back from the tail, which
+    // would report already-seen errors as unseen.
+    const events = [
+      event('d', 'runtime_unresponsive', 'error'),
+      event('c', 'runtime_unresponsive', 'error'),
+      event('b', 'runtime_unresponsive', 'error'),
+      event('a', 'runtime_ready', 'success'),
+    ];
+    expect(countUnseenProblems(events, 5)).toBe(0);
+  });
 });
diff --git a/apps/cockpit/src/lib/runtime/session-activity.ts b/apps/cockpit/src/lib/runtime/session-activity.ts
index b7196f7f3..dce3308bd 100644
--- a/apps/cockpit/src/lib/runtime/session-activity.ts
+++ b/apps/cockpit/src/lib/runtime/session-activity.ts
@@ -116,3 +116,28 @@ export function activityReducer(
       return [];
   }
 }
+
+/**
+ * Problems the user has not looked at yet.
+ *
+ * Errors only: `mode_changed` and `runtime_ready` fire during ordinary use, so
+ * counting every unread event would light the indicator from the user's own
+ * actions.
+ *
+ * `seenCount` is a marker over the log, but `activityReducer` prepends, so the
+ * seen events are the array's TAIL and the unseen window runs from index 0.
+ *
+ * The clamp is load-bearing, not defensive: a marker past the end (possible if
+ * the log was trimmed or cleared under it) would otherwise give `slice` a
+ * negative end index, which counts back from the tail and reports already-seen
+ * errors as unseen.
+ */
+export function countUnseenProblems(
+  events: readonly SessionActivityEvent[],
+  seenCount: number,
+): number {
+  const unseen = Math.max(0, events.length - seenCount);
+  return events
+    .slice(0, unseen)
+    .filter((event) => event.severity === 'error').length;
+}
diff --git a/docs/superpowers/plans/2026-08-31-cockpit-run-discoverability.md b/docs/superpowers/plans/2026-08-31-cockpit-run-discoverability.md
new file mode 100644
index 000000000..bada72325
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-31-cockpit-run-discoverability.md
@@ -0,0 +1,1131 @@
+# Cockpit Run Discoverability Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the cockpit's mode rail read as a switch — Run always the landing view, the four modes visually grouped and legible, and Run carrying a live runtime phase dot — while re-scoping the Activity dot so the two dots make distinct claims.
+
+**Architecture:** Four independent slices over the existing control plane. `activeMode` stops being a persisted preference and becomes local shell state. Rail legibility is pure CSS over DOM hooks that already exist. `ControlPlaneRailItem` in `@threadplane/ui-react` gains a generic status-dot slot, which the cockpit wires to `runtimeSnapshot.phase` for Run and to an unseen-error count for Activity.
+
+**Tech Stack:** Next.js (App Router) + React 19, TypeScript, Nx, Vitest + Testing Library (jsdom), plain CSS with `--ds-*` design tokens.
+
+**Spec:** `docs/superpowers/specs/2026-08-31-cockpit-run-discoverability-design.md`
+
+**Test commands:**
+
+```bash
+npx nx test ui-react
+```
+
+```bash
+npx nx test cockpit
+```
+
+Both must be green before the final task is considered done. If this worktree has never installed dependencies, run `npm ci` once first (never `npm install`, never hand-copy packages).
+
+---
+
+## File Structure
+
+| File | Responsibility | Change |
+| --- | --- | --- |
+| `libs/ui-react/src/lib/control-plane/control-plane-preferences.ts` | Persisted control-plane preferences | Drop `activeMode` from the stored shape and the hook |
+| `libs/ui-react/src/lib/control-plane/control-plane.tsx` | Presentational control-plane primitives | `ControlPlaneRailItem` gains `status` + `statusLabel` |
+| `apps/cockpit/src/components/cockpit-shell.tsx` | Cockpit page shell, owns mode + activity state | Mode as local state; track the activity seen-marker |
+| `apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx` | Cockpit's rail + pane composition | Map phase → Run dot; map unseen errors → Activity dot |
+| `apps/cockpit/src/components/control-plane/activity-panel.tsx` | Activity log panel | `attention` reinterpreted as unseen errors |
+| `apps/cockpit/src/lib/runtime/runtime-state.ts` | Runtime phase model | Add `runtimeRailStatus(phase)` |
+| `apps/cockpit/src/app/cockpit.css` | Cockpit control-plane styling | Contrast, group rule, `VIEW` cap, dot variants, working token |
+
+---
+
+## Task 1: Mode stops being sticky
+
+Every capability opens in Run. `activeMode` leaves persisted preferences entirely.
+
+**Files:**
+- Modify: `libs/ui-react/src/lib/control-plane/control-plane-preferences.ts`
+- Modify: `apps/cockpit/src/components/cockpit-shell.tsx`
+- Test: `libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts`
+- Test: `apps/cockpit/src/components/cockpit-shell.spec.tsx`
+
+- [x] **Step 1: Write the failing test**
+
+Add to `libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts`:
+
+```ts
+it('ignores a stored activeMode and never writes one back', () => {
+  window.localStorage.setItem(
+    CONTROL_PLANE_STORAGE_KEY,
+    JSON.stringify({
+      version: 1,
+      docs: { expanded: {} },
+      cockpit: { activeMode: 'Code', expanded: { Capability: false } },
+    }),
+  );
+
+  const parsed = readControlPlanePreferences(window.localStorage);
+
+  expect('activeMode' in parsed.cockpit).toBe(false);
+  expect(parsed.cockpit.expanded.Capability).toBe(false);
+});
+```
+
+This spec drives `window.localStorage` directly and clears it in `beforeEach` — there is
+no fake-storage helper to reuse. `CONTROL_PLANE_STORAGE_KEY` and
+`readControlPlanePreferences` are already imported at the top of the file.
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test ui-react -- -t "ignores a stored activeMode"`
+Expected: FAIL — `expect(true).toBe(false)`, because `readControlPlanePreferences` still
+copies `activeMode` through.
+
+- [x] **Step 3: Remove `activeMode` from the persisted shape**
+
+In `control-plane-preferences.ts`:
+
+Change the interface:
+
+```ts
+export interface ControlPlanePreferencesV1 {
+  version: 1;
+  docs: {
+    expanded: Record<string, boolean>;
+  };
+  cockpit: {
+    expanded: Record<string, boolean>;
+  };
+}
+```
+
+Change the defaults:
+
+```ts
+const DEFAULT_PREFERENCES: ControlPlanePreferencesV1 = {
+  version: 1,
+  docs: { expanded: { Learn: true, Environment: false } },
+  cockpit: {
+    expanded: { Capability: true, Environment: true },
+  },
+};
+```
+
+Change `cloneDefaults`:
+
+```ts
+const cloneDefaults = (): ControlPlanePreferencesV1 => ({
+  version: 1,
+  docs: { expanded: { ...DEFAULT_PREFERENCES.docs.expanded } },
+  cockpit: { expanded: { ...DEFAULT_PREFERENCES.cockpit.expanded } },
+});
+```
+
+In `readControlPlanePreferences`, drop the `activeMode` branch from the returned object:
+
+```ts
+      cockpit: {
+        expanded: booleanRecord(cockpit.expanded, defaults.cockpit.expanded),
+      },
+```
+
+Delete the now-unused `isMode` helper. **Keep** `MODES`, `ControlPlaneMode` and
+`parseControlPlaneMode` — the shell still uses them for `?mode=` deep links.
+
+Delete the `setActiveMode` callback entirely, and change the hook's return to:
+
+```ts
+  return {
+    hydrated,
+    expanded: preferences[surface].expanded,
+    setExpanded,
+  };
+```
+
+Note `surface` is still read by `setExpanded`, so it stays a parameter.
+
+- [x] **Step 4: Run test to verify it passes**
+
+Run: `npx nx test ui-react -- -t "ignores a stored activeMode"`
+Expected: PASS
+
+- [x] **Step 5: Fix the rest of the preferences suite**
+
+Run: `npx nx test ui-react`
+Expected: several existing assertions fail — they set and read `activeMode`
+(around lines 23, 36, 46, 80, 82, 104, 112, 122, 135, 143, 164 of the spec).
+
+Delete the assertions and fixture fields that concern `activeMode` and
+`setActiveMode`. Keep every `expanded` assertion untouched. The test named for
+docs-surface mode pinning (which asserted `activeMode` is `'Docs'` on the docs surface)
+no longer has a subject — delete it.
+
+Re-run until green.
+
+- [x] **Step 6: Move mode into the shell**
+
+In `apps/cockpit/src/components/cockpit-shell.tsx`:
+
+Add to the existing `useState` block near `isSidebarOpen`:
+
+```tsx
+  const [activeMode, setActiveMode] = useState<ControlPlaneMode>('Run');
+```
+
+Delete this line further down:
+
+```tsx
+  const activeMode: ControlPlaneMode = preferences.activeMode;
+```
+
+Replace the query-param effect with one that no longer waits on hydration:
+
+```tsx
+  useEffect(() => {
+    if (queryHandled.current) return;
+    queryHandled.current = true;
+    const url = new URL(window.location.href);
+    const rawMode = url.searchParams.get('mode');
+    const requestedMode = parseControlPlaneMode(rawMode);
+    if (requestedMode) setActiveMode(requestedMode);
+    if (rawMode !== null) {
+      url.searchParams.delete('mode');
+      window.history.replaceState(
+        window.history.state,
+        '',
+        url.pathname + url.search + url.hash
+      );
+    }
+  }, []);
+```
+
+The effect runs only on the client after mount, so the server-rendered Run markup and the
+first client render agree — `?mode=code` swaps in on the second render, not during
+hydration.
+
+In `handleModeChange`, swap the setter and drop `preferences` from the dependency array:
+
+```tsx
+  const handleModeChange = useCallback(
+    (mode: ControlPlaneMode) => {
+      if (mode === activeMode) return;
+      setActiveMode(mode);
+      appendActivity(
+        createLocalActivityInput(entry.topic, {
+          kind: 'mode_changed',
+          mode,
+        })
+      );
+      track('cockpit:mode_switched', {
+        capability: entry.topic,
+        from_mode: MODE_ANALYTICS[activeMode],
+        to_mode: MODE_ANALYTICS[mode],
+      });
+    },
+    [activeMode, appendActivity, entry.topic]
+  );
+```
+
+`preferences` is still used for `expanded`, `setExpanded` and `hydrated` — leave the
+`useControlPlanePreferences('cockpit')` call in place.
+
+- [x] **Step 7: Run the cockpit suite**
+
+Run: `npx nx test cockpit`
+Expected: failures in `cockpit-shell.spec.tsx` around lines 96, 107 and 195, which seed
+and assert `cockpit.activeMode` in `localStorage`.
+
+Rewrite those so that:
+- the seeding helper no longer takes or writes an `activeMode`;
+- a test asserts that a stored `activeMode: 'Code'` does **not** change the landing view —
+  the shell still renders Run;
+- a test asserts `?mode=code` still lands in Code and strips the param from the URL.
+
+Re-run until green.
+
+- [x] **Step 8: Mutation-check the stickiness test**
+
+Temporarily re-add `activeMode` passthrough in `readControlPlanePreferences` and confirm
+the "stored `activeMode` does not change the landing view" test fails. Revert the
+mutation. This assertion is about an absence and would pass vacuously if mis-wired.
+
+- [x] **Step 9: Commit**
+
+```bash
+git add libs/ui-react/src/lib/control-plane/control-plane-preferences.ts libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts apps/cockpit/src/components/cockpit-shell.tsx apps/cockpit/src/components/cockpit-shell.spec.tsx
+git commit -m "fix(cockpit): stop persisting the active mode so every capability opens in Run"
+```
+
+---
+
+## Task 2: Rail legibility
+
+**Files:**
+- Modify: `apps/cockpit/src/app/cockpit.css`
+- Modify: `libs/ui-react/src/lib/control-plane/control-plane.tsx`
+- Test: `apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx`
+
+- [x] **Step 1: Write the failing test**
+
+Add to `cockpit-control-plane.spec.tsx`, copying the disk-read preamble that
+`activity-panel.spec.tsx:11-17` already uses (the cwd check matters — Nx runs this suite
+from `apps/cockpit`, not the workspace root):
+
+```tsx
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const workspaceRoot = process.cwd().endsWith('/apps/cockpit')
+  ? resolve(process.cwd(), '../..')
+  : process.cwd();
+const cockpitCss = readFileSync(
+  resolve(workspaceRoot, 'apps/cockpit/src/app/cockpit.css'),
+  'utf8'
+);
+```
+
+```tsx
+it('separates the mode group from the utilities and lifts resting contrast', () => {
+  expect(cockpitCss).toMatch(
+    /\[data-control-plane-rail-group="utilities"\][^}]*border-top/
+  );
+  expect(cockpitCss).not.toMatch(
+    /\[data-control-plane-rail-item\]\s*\{[^}]*--ds-text-muted/
+  );
+});
+
+it('names the mode group without adding a second landmark label', () => {
+  renderControlPlane();
+  const rail = screen.getByRole('navigation', { name: 'Cockpit modes' });
+  const cap = rail.querySelector('[data-control-plane-rail-group-label]');
+  expect(cap?.textContent).toBe('View');
+  expect(cap?.getAttribute('aria-hidden')).toBe('true');
+});
+```
+
+`renderControlPlane` is the existing render helper in this spec file.
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test cockpit -- -t "separates the mode group"`
+Expected: FAIL — no `border-top` on the utilities group, and the item rule still sets
+`--ds-text-muted`.
+
+- [x] **Step 3: Add the group label to the primitive**
+
+In `libs/ui-react/src/lib/control-plane/control-plane.tsx`, extend the rail:
+
+```tsx
+export interface ControlPlaneRailProps extends CommonProps {
+  label: string;
+  primaryLabel?: string;
+  primary: ReactNode;
+  utilities?: ReactNode;
+}
+
+export function ControlPlaneRail({
+  label,
+  primaryLabel,
+  primary,
+  utilities,
+  className,
+}: ControlPlaneRailProps) {
+  return (
+    <nav aria-label={label} className={className} data-control-plane-rail>
+      <div data-control-plane-rail-group="primary">
+        {primaryLabel ? (
+          <span data-control-plane-rail-group-label aria-hidden="true">
+            {primaryLabel}
+          </span>
+        ) : null}
+        {primary}
+      </div>
+      {utilities ? (
+        <div data-control-plane-rail-group="utilities">{utilities}</div>
+      ) : null}
+    </nav>
+  );
+}
+```
+
+It is `aria-hidden` on purpose: the `nav` already carries `aria-label="Cockpit modes"`, and
+a visible duplicate would announce the group twice.
+
+- [x] **Step 4: Pass the label from the cockpit**
+
+In `apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx`, on the
+`<ControlPlaneRail>` element add:
+
+```tsx
+        primaryLabel="View"
+```
+
+- [x] **Step 5: Update the CSS**
+
+In `apps/cockpit/src/app/cockpit.css`, change the resting colour of the rail item:
+
+```css
+.cockpit-control-plane [data-control-plane-rail-item] {
+  position: relative;
+  min-height: 48px;
+  padding: 6px 2px;
+  border: 0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(--ds-text-secondary);
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+```
+
+Then replace the utilities rule and add the cap:
+
+```css
+.cockpit-control-plane [data-control-plane-rail-group="utilities"] {
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--ds-border);
+}
+.cockpit-control-plane [data-control-plane-rail-group-label] {
+  display: block;
+  padding-bottom: 4px;
+  color: var(--ds-text-muted);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  text-align: center;
+}
+```
+
+- [x] **Step 6: Run tests to verify they pass**
+
+Run: `npx nx test cockpit -- -t "separates the mode group"`
+Run: `npx nx test cockpit -- -t "names the mode group"`
+Expected: PASS
+
+- [x] **Step 7: Run both suites**
+
+Run: `npx nx test ui-react`
+Run: `npx nx test cockpit`
+Expected: green. `control-plane.spec.tsx` may need a case for `primaryLabel` being
+omitted — if a snapshot or structural assertion breaks, update it to reflect the new
+optional wrapper.
+
+- [x] **Step 8: Commit**
+
+```bash
+git add libs/ui-react/src/lib/control-plane/control-plane.tsx apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx apps/cockpit/src/app/cockpit.css apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx
+git commit -m "feat(cockpit): make the mode rail read as a switch"
+```
+
+---
+
+## Task 3: A status-dot slot on rail items
+
+Generic primitive change. No cockpit behaviour yet.
+
+**Files:**
+- Modify: `libs/ui-react/src/lib/control-plane/control-plane.tsx`
+- Modify: `libs/ui-react/src/index.ts`
+- Test: `libs/ui-react/src/lib/control-plane/control-plane.spec.tsx`
+
+- [x] **Step 1: Write the failing test**
+
+Add to `control-plane.spec.tsx`:
+
+```tsx
+it('renders a status dot and folds its label into the accessible name', () => {
+  render(
+    <ControlPlaneRailItem
+      label="Run"
+      icon={<svg />}
+      status="error"
+      statusLabel="runtime error"
+    />,
+  );
+  const button = screen.getByRole('button', { name: 'Run, runtime error' });
+  expect(
+    button.querySelector('[data-control-plane-rail-status]')?.getAttribute(
+      'data-control-plane-rail-status',
+    ),
+  ).toBe('error');
+});
+
+it('renders no status dot when status is omitted', () => {
+  render(<ControlPlaneRailItem label="Run" icon={<svg />} />);
+  const button = screen.getByRole('button', { name: 'Run' });
+  expect(button.querySelector('[data-control-plane-rail-status]')).toBeNull();
+});
+```
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test ui-react -- -t "renders a status dot"`
+Expected: FAIL — `status` is not a valid prop and no element matches.
+
+- [x] **Step 3: Implement**
+
+In `control-plane.tsx`, replace `ControlPlaneRailItemProps` and the body of
+`ControlPlaneRailItem`:
+
+```tsx
+export type ControlPlaneRailStatus = 'success' | 'working' | 'error';
+
+export interface ControlPlaneRailItemProps extends CommonProps {
+  label: string;
+  icon: ReactNode;
+  active?: boolean;
+  href?: string;
+  onSelect?: () => void;
+  iconOnly?: boolean;
+  target?: string;
+  rel?: string;
+  status?: ControlPlaneRailStatus;
+  statusLabel?: string;
+}
+
+export function ControlPlaneRailItem({
+  label,
+  icon,
+  active = false,
+  href,
+  onSelect,
+  iconOnly = false,
+  className,
+  target,
+  rel,
+  status,
+  statusLabel,
+}: ControlPlaneRailItemProps) {
+  const tooltipId = useId();
+  const accessibleName = statusLabel ? `${label}, ${statusLabel}` : label;
+  const showTooltip = iconOnly || Boolean(statusLabel);
+  const content = (
+    <>
+      <span data-control-plane-rail-icon>{icon}</span>
+      {iconOnly ? null : <span data-control-plane-rail-label>{label}</span>}
+      {status ? (
+        <span data-control-plane-rail-status={status} aria-hidden="true" />
+      ) : null}
+      {showTooltip ? (
+        <span id={tooltipId} role="tooltip" data-control-plane-tooltip>
+          {accessibleName}
+        </span>
+      ) : null}
+    </>
+  );
+  const shared = {
+    className,
+    'data-control-plane-rail-item': true,
+    'data-control-plane-active': active || undefined,
+    'aria-label': showTooltip ? accessibleName : undefined,
+    'aria-describedby': showTooltip ? tooltipId : undefined,
+  } as const;
+
+  if (href) {
+    return (
+      <a
+        {...shared}
+        href={href}
+        target={target}
+        rel={rel}
+        aria-current={active ? 'page' : undefined}
+        onClick={onSelect}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      {...shared}
+      type="button"
+      aria-pressed={active}
+      onClick={onSelect}
+    >
+      {content}
+    </button>
+  );
+}
+```
+
+A labelled item with a status now gets a hover tooltip too, so the state has a
+non-colour, non-screen-reader home.
+
+- [x] **Step 4: Export the new type**
+
+In `libs/ui-react/src/index.ts`, add `ControlPlaneRailStatus` alongside the existing
+`ControlPlaneRailItem` / `ControlPlaneMode` exports, matching the file's existing export
+style.
+
+- [x] **Step 5: Run tests to verify they pass**
+
+Run: `npx nx test ui-react`
+Expected: PASS, whole suite green.
+
+- [x] **Step 6: Commit**
+
+```bash
+git add libs/ui-react/src/lib/control-plane/control-plane.tsx libs/ui-react/src/lib/control-plane/control-plane.spec.tsx libs/ui-react/src/index.ts
+git commit -m "feat(ui-react): add a status dot slot to control plane rail items"
+```
+
+---
+
+## Task 4: The runtime phase dot on Run
+
+**Files:**
+- Modify: `apps/cockpit/src/lib/runtime/runtime-state.ts`
+- Modify: `apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx`
+- Modify: `apps/cockpit/src/app/cockpit.css`
+- Test: `apps/cockpit/src/lib/runtime/runtime-state.spec.ts`
+- Test: `apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx`
+
+- [x] **Step 1: Write the failing test for the mapping**
+
+Add to `apps/cockpit/src/lib/runtime/runtime-state.spec.ts`:
+
+```ts
+describe('runtimeRailStatus', () => {
+  it('maps every phase to a rail status', () => {
+    expect(runtimeRailStatus('ready')).toEqual({
+      kind: 'success',
+      label: 'runtime ready',
+    });
+    expect(runtimeRailStatus('connecting')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('checking')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('reloading')).toEqual({
+      kind: 'working',
+      label: 'runtime starting',
+    });
+    expect(runtimeRailStatus('unresponsive')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+    expect(runtimeRailStatus('error')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+    expect(runtimeRailStatus('invalid_configuration')).toEqual({
+      kind: 'error',
+      label: 'runtime error',
+    });
+  });
+
+  it('reports no status when there is no runtime to report on', () => {
+    expect(runtimeRailStatus('not_configured')).toBeNull();
+  });
+});
+```
+
+Add `runtimeRailStatus` to the file's existing import from `./runtime-state`.
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test cockpit -- -t "runtimeRailStatus"`
+Expected: FAIL — `runtimeRailStatus is not a function`.
+
+- [x] **Step 3: Implement the mapping**
+
+Append to `apps/cockpit/src/lib/runtime/runtime-state.ts`:
+
+```ts
+import type { ControlPlaneRailItemStatus } from '@threadplane/ui-react';
+
+export function runtimeRailStatus(
+  phase: RuntimePhase
+): ControlPlaneRailItemStatus | null {
+  switch (phase) {
+    case 'ready':
+      return { kind: 'success', label: 'runtime ready' };
+    case 'connecting':
+    case 'checking':
+    case 'reloading':
+      return { kind: 'working', label: 'runtime starting' };
+    case 'unresponsive':
+    case 'error':
+    case 'invalid_configuration':
+      return { kind: 'error', label: 'runtime error' };
+    case 'not_configured':
+      return null;
+  }
+}
+```
+
+`ControlPlaneRailItemStatus` is `{ kind, label }`, exported from `@threadplane/ui-react`
+by Task 3. Returning that shape directly means the rail item takes one prop, and a dot
+without an accessible label is unrepresentable.
+
+The exhaustive `switch` over `RuntimePhase` with no `default` means a future phase is a
+compile error rather than a silently missing dot.
+
+- [x] **Step 4: Run test to verify it passes**
+
+Run: `npx nx test cockpit -- -t "runtimeRailStatus"`
+Expected: PASS
+
+- [x] **Step 5: Write the failing wiring test**
+
+Add to `cockpit-control-plane.spec.tsx`:
+
+```tsx
+it('puts the runtime phase on the Run rail item', () => {
+  renderControlPlane({ runtimeSnapshot: runtimeSnapshot('unresponsive') });
+  const run = screen.getByRole('button', { name: 'Run, runtime error' });
+  expect(
+    run
+      .querySelector('[data-control-plane-rail-status]')
+      ?.getAttribute('data-control-plane-rail-status')
+  ).toBe('error');
+});
+
+it('shows no dot on Run when no runtime is configured', () => {
+  renderControlPlane({
+    runtimeSnapshot: runtimeSnapshot('not_configured'),
+  });
+  const run = screen.getByRole('button', { name: 'Run' });
+  expect(run.querySelector('[data-control-plane-rail-status]')).toBeNull();
+});
+```
+
+- [x] **Step 6: Run test to verify it fails**
+
+Run: `npx nx test cockpit -- -t "puts the runtime phase"`
+Expected: FAIL — no button named `Run, runtime error`.
+
+- [x] **Step 7: Wire it**
+
+In `cockpit-control-plane.tsx`, add `runtimeRailStatus` to the existing import from
+`../../lib/runtime/runtime-state`, then compute it next to `attention`:
+
+```tsx
+  const railStatus = runtimeRailStatus(runtimeSnapshot.phase);
+```
+
+and change the `primary` mapping so only Run carries it:
+
+```tsx
+        primary={MODES.map(({ label, icon: Icon }) => (
+          <ControlPlaneRailItem
+            key={label}
+            label={label}
+            icon={<Icon size={18} aria-hidden="true" />}
+            active={label === activeMode}
+            onSelect={() => selectMode(label)}
+            status={label === 'Run' ? railStatus ?? undefined : undefined}
+          />
+        ))}
+```
+
+- [x] **Step 8: Add the dot styling**
+
+In `apps/cockpit/src/app/cockpit.css`, add the working token to both blocks:
+
+```css
+.cockpit-control-plane {
+  --cockpit-state-error: #b42318;
+  --cockpit-state-success: #1a7a40;
+  --cockpit-state-working: #9a6700;
+```
+
+```css
+[data-theme="dark"] .cockpit-control-plane {
+  --cockpit-state-error: #ff6369;
+  --cockpit-state-success: #4cc38a;
+  --cockpit-state-working: #e0a02f;
+}
+```
+
+Then add the dot itself, after the rail-label rule:
+
+```css
+.cockpit-control-plane [data-control-plane-rail-status] {
+  position: absolute;
+  top: 7px;
+  right: 11px;
+  width: 7px;
+  height: 7px;
+  border: 2px solid var(--ds-surface-tinted);
+  border-radius: 999px;
+}
+.cockpit-control-plane [data-control-plane-rail-status="success"] {
+  background: var(--cockpit-state-success);
+}
+.cockpit-control-plane [data-control-plane-rail-status="working"] {
+  background: var(--cockpit-state-working);
+}
+.cockpit-control-plane [data-control-plane-rail-status="error"] {
+  background: var(--cockpit-state-error);
+}
+```
+
+Steady fills — no `animation`, deliberately.
+
+`position: absolute` is load-bearing, not cosmetic: the dot span is an in-flow child of a
+`display:flex; flex-direction:column; gap:4px` container, so left in flow it consumes a
+4px gap and nudges the icon and label even at zero size.
+
+Also verify by eye in Task 6: a status on a non-`iconOnly` item now shows a hover tooltip
+at `left: calc(100% + 8px)` (`cockpit.css:696-700`), positioning authored for the narrow
+icon rail. On the Run item that lands over the adjacent pane. No test covers it.
+
+- [x] **Step 9: Run tests to verify they pass**
+
+Run: `npx nx test cockpit`
+Expected: PASS. Existing tests that query `screen.getByRole('button', { name: 'Run' })`
+will now fail wherever the fixture snapshot has a phase other than `not_configured`,
+because Run's accessible name has changed. Update those queries to the new name — this is
+the intended contract change, not a regression.
+
+- [x] **Step 10: Mutation-check the no-dot case**
+
+Temporarily change `runtimeRailStatus('not_configured')` to return
+`{ kind: 'success', label: 'runtime ready' }` and confirm "shows no dot on Run when no
+runtime is configured" fails. Revert. The assertion is an absence and would otherwise pass
+vacuously.
+
+- [x] **Step 11: Commit**
+
+```bash
+git add apps/cockpit/src/lib/runtime/runtime-state.ts apps/cockpit/src/lib/runtime/runtime-state.spec.ts apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx apps/cockpit/src/app/cockpit.css
+git commit -m "feat(cockpit): show runtime phase on the Run rail item"
+```
+
+---
+
+## Task 5: Re-scope the Activity dot to unseen problems
+
+Run owns "what the runtime is doing now". Activity owns "there are problems you haven't
+read".
+
+**Files:**
+- Modify: `apps/cockpit/src/lib/runtime/session-activity.ts`
+- Modify: `apps/cockpit/src/components/cockpit-shell.tsx`
+- Modify: `apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx`
+- Modify: `apps/cockpit/src/components/control-plane/activity-panel.tsx`
+- Test: `apps/cockpit/src/lib/runtime/session-activity.spec.ts`
+- Test: `apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx`
+
+- [x] **Step 1: Write the failing selector test**
+
+Add to `apps/cockpit/src/lib/runtime/session-activity.spec.ts`:
+
+```ts
+describe('countUnseenProblems', () => {
+  const event = (
+    id: string,
+    kind: ActivityKind,
+    severity: ActivitySeverity
+  ): SessionActivityEvent => ({
+    id,
+    at: '2026-08-31T17:00:00.000Z',
+    kind,
+    severity,
+    capability: 'streaming',
+    summary: kind,
+  });
+
+  it('counts only error events beyond the seen marker', () => {
+    const events = [
+      event('a', 'runtime_ready', 'success'),
+      event('b', 'mode_changed', 'neutral'),
+      event('c', 'runtime_unresponsive', 'error'),
+    ];
+    expect(countUnseenProblems(events, 0)).toBe(1);
+  });
+
+  it('ignores routine activity entirely', () => {
+    const events = [
+      event('a', 'runtime_ready', 'success'),
+      event('b', 'mode_changed', 'neutral'),
+    ];
+    expect(countUnseenProblems(events, 0)).toBe(0);
+  });
+
+  it('ignores errors the user has already seen', () => {
+    const events = [
+      event('a', 'runtime_unresponsive', 'error'),
+      event('b', 'mode_changed', 'neutral'),
+    ];
+    expect(countUnseenProblems(events, 2)).toBe(0);
+  });
+});
+```
+
+Import `countUnseenProblems`, `ActivityKind`, `ActivitySeverity` and
+`SessionActivityEvent` from `./session-activity`.
+
+- [x] **Step 2: Run test to verify it fails**
+
+Run: `npx nx test cockpit -- -t "countUnseenProblems"`
+Expected: FAIL — `countUnseenProblems is not a function`.
+
+- [x] **Step 3: Implement the selector**
+
+Append to `apps/cockpit/src/lib/runtime/session-activity.ts`:
+
+```ts
+/**
+ * Problems the user has not looked at yet.
+ *
+ * Errors only: `mode_changed` and `runtime_ready` fire during ordinary use, so
+ * counting every unread event would light the indicator from the user's own
+ * actions. `seenCount` is a prefix marker over the append-ordered log.
+ */
+export function countUnseenProblems(
+  events: readonly SessionActivityEvent[],
+  seenCount: number,
+): number {
+  const unseen = Math.max(0, events.length - Math.max(0, seenCount));
+  return events
+    .slice(0, unseen)
+    .filter((event) => event.severity === 'error').length;
+}
+```
+
+**The reducer PREPENDS** (`[action.event, ...state]`), so the log is newest-first: seen
+events are the tail, and the unseen window runs from index 0. `slice(seenCount)` is
+inverted and still passes all three tests above — add a test that pins the direction.
+
+- [x] **Step 4: Run test to verify it passes**
+
+Run: `npx nx test cockpit -- -t "countUnseenProblems"`
+Expected: PASS
+
+- [x] **Step 5: Track the seen marker in the shell**
+
+In `cockpit-shell.tsx`, add state beside `activityOpenCycle`:
+
+```tsx
+  const [seenActivityCount, setSeenActivityCount] = useState(0);
+```
+
+Mark everything seen when the Activity utility opens, inside the existing
+`handleActiveUtilityChange`:
+
+```tsx
+  const handleActiveUtilityChange = useCallback(
+    (utility: CockpitUtility) => {
+      if (utility === 'activity' && activeUtility !== 'activity') {
+        setActivityOpenCycle((cycle) => cycle + 1);
+        setSeenActivityCount(events.length);
+      }
+      setActiveUtility(utility);
+    },
+    [activeUtility, events.length]
+  );
+```
+
+Reset the marker when the log is cleared:
+
+```tsx
+  const handleClearActivity = useCallback(() => {
+    dispatchActivity({ type: 'clear' });
+    setSeenActivityCount(0);
+  }, []);
+```
+
+Compute the count and pass it through. Add `countUnseenProblems` to the existing import
+from `../lib/runtime/session-activity`, then inside `controlPlaneProps`:
+
+```tsx
+      unseenProblems: countUnseenProblems(events, seenActivityCount),
+```
+
+and add `seenActivityCount` to that `useMemo` dependency array.
+
+- [x] **Step 6: Write the failing behaviour test**
+
+In `cockpit-control-plane.spec.tsx`, **replace** the existing test named
+`'renders Activity above Settings with a nonnumeric attention indicator that opening does not clear'`
+— its "opening does not clear" premise is exactly what this task inverts:
+
+```tsx
+it('flags unseen problems on Activity and clears them when the panel opens', () => {
+  renderControlPlane({ unseenProblems: 1 });
+  const rail = screen.getByRole('navigation', { name: 'Cockpit modes' });
+  const utilities = within(rail).getAllByRole('button').slice(4);
+  expect(
+    utilities.map((button) => button.getAttribute('aria-label'))
+  ).toEqual(['Activity, 1 unread problem', 'Settings']);
+  expect(
+    document.querySelector('[data-cockpit-activity-attention]')?.textContent
+  ).toBe('');
+});
+
+it('does not flag Activity when nothing has gone wrong', () => {
+  renderControlPlane({ unseenProblems: 0 });
+  expect(screen.getByRole('button', { name: 'Activity' })).toBeTruthy();
+  expect(
+    document.querySelector('[data-cockpit-activity-attention]')
+  ).toBeNull();
+});
+```
+
+`renderControlPlane` builds props from a defaults object in this spec — add
+`unseenProblems: 0` to those defaults so every other test keeps compiling.
+
+- [x] **Step 7: Run test to verify it fails**
+
+Run: `npx nx test cockpit -- -t "flags unseen problems"`
+Expected: FAIL — `unseenProblems` is not a prop and the label is still phase-derived.
+
+- [x] **Step 8: Wire the control plane**
+
+In `cockpit-control-plane.tsx`:
+
+Add to `CockpitControlPlaneProps`:
+
+```tsx
+  unseenProblems: number;
+```
+
+Destructure `unseenProblems` in the component signature.
+
+Replace the `attention` derivation:
+
+```tsx
+  const attention = unseenProblems > 0;
+  const activityLabel = attention
+    ? `Activity, ${unseenProblems} unread problem${unseenProblems === 1 ? '' : 's'}`
+    : 'Activity';
+```
+
+Remove `runtimeNeedsAttention` from the import list — `runtimeRailStatus` now covers the
+Run dot. This removes its LAST caller repo-wide (`use-runtime-controller.ts` does not
+reference it, contrary to an earlier draft of this plan), so delete the function and its
+test table rather than leaving a tested, uncalled predicate behind.
+
+Everything downstream (`attention` passed to `ActivityPanel`, the
+`[data-cockpit-activity-attention]` marker) keeps working unchanged.
+
+- [x] **Step 9: Update the panel's wording**
+
+In `activity-panel.tsx`, the `attention` prop now means unseen problems. Update the JSDoc-free
+prop by renaming the derived label so the list's accessible name matches the new claim:
+
+```tsx
+  const label = attention ? 'Activity, unread problems' : 'Activity';
+```
+
+Update the matching assertions in `activity-panel.spec.tsx` (around lines 168–184) from
+`'Activity, attention required'` to `'Activity, unread problems'`.
+
+- [x] **Step 10: Run tests to verify they pass**
+
+Run: `npx nx test cockpit`
+Expected: PASS. Any remaining `'Activity, attention required'` string assertions must be
+updated to the new labels.
+
+- [x] **Step 11: Mutation-check the quiet case**
+
+Temporarily change `countUnseenProblems` to `events.slice(seenCount).length` (dropping the
+severity filter) and confirm "does not flag Activity when nothing has gone wrong" fails
+once a `mode_changed` event exists in the fixture. Revert. Without this check the test
+passes whether or not the filter is wired.
+
+- [x] **Step 12: Commit**
+
+```bash
+git add apps/cockpit/src/lib/runtime/session-activity.ts apps/cockpit/src/lib/runtime/session-activity.spec.ts apps/cockpit/src/components/cockpit-shell.tsx apps/cockpit/src/components/control-plane/cockpit-control-plane.tsx apps/cockpit/src/components/control-plane/cockpit-control-plane.spec.tsx apps/cockpit/src/components/control-plane/activity-panel.tsx apps/cockpit/src/components/control-plane/activity-panel.spec.tsx
+git commit -m "feat(cockpit): re-scope the Activity indicator to unseen problems"
+```
+
+---
+
+## Task 6: Verify the whole thing
+
+**Files:** none — verification only.
+
+- [x] **Step 1: Full suites**
+
+Run: `npx nx test ui-react`
+Run: `npx nx test cockpit`
+Expected: both green.
+
+- [x] **Step 2: Lint**
+
+`apps/cockpit` has **no** `lint` target — only `ui-react` does. Run:
+
+```bash
+npx nx lint ui-react 2>&1 | sed $'s/\033\\[[0-9;]*m//g' | grep -cE ' error '
+```
+
+Expected: `0`.
+
+CI tolerates warnings but fails on errors. Strip ANSI before grepping — a bare
+`grep -cE ' error '` silently returns 0 against coloured output.
+
+Note on reading test results: `npx nx test <project>` swallows the vitest reporter output
+in this worktree, so it tells you pass/fail but not counts. When you need real numbers, run
+`npx vitest run --root apps/cockpit` (or `--root libs/ui-react`) directly.
+
+- [x] **Step 3: Confirm in a real browser**
+
+Start the cockpit dev server via the Browser pane's `preview_start` (never `Bash`), open a
+capability page, and check:
+- it lands on Run even though `localStorage` still holds an old `activeMode: "Code"`;
+- the rail shows the `VIEW` cap, a rule above Activity/Settings, and legible inactive items;
+- Run carries a green dot once the runtime is ready;
+- `?mode=code` still deep-links to Code and strips the param.
+
+Check both themes — the dot tokens are defined per theme.
+
+- [x] **Step 4: Commit anything the browser pass turned up**
+
+```bash
+git add -A
+git commit -m "fix(cockpit): browser-pass corrections for the rail redesign"
+```
+
+Skip if there is nothing to commit.
+
+---
+
+## Task 6 result (2026-09-01)
+
+Verified against a fresh `nx serve cockpit` build at 1440×900, in both themes.
+
+| Check | Result |
+| --- | --- |
+| Stale `activeMode: "Code"` in localStorage | lands on **Run** (`aria-pressed="true"`), preference untouched in storage |
+| `?mode=code` deep link | lands on Code, `location.search` stripped to `""` |
+| Code → click another capability (client-side `router.push`) | lands on **Run** — the `key={canonicalPath}` fix, confirmed live |
+| Rail inactive contrast | dark `rgb(200,200,200)`, light `rgb(70,70,70)` — `--ds-text-secondary`, not the disabled token |
+| Utilities separator | dark `rgb(60,60,60)` on `rgb(44,44,44)`; light `rgb(200,200,200)` on `rgb(251,251,251)` — visible in both |
+| `VIEW` cap | present, `role="group"` + `aria-labelledby` resolving to "View" |
+| Run status dot | `position: absolute`, 7×7, dark `rgb(76,195,138)` / light `rgb(26,122,64)`, 2px ring matching the rail |
+| Run tooltip | **absent** — no `[data-control-plane-tooltip]`, no `aria-describedby`; status in a visually-hidden span |
+| Activity tooltip | still present (icon-only), no dot with a healthy runtime |
+| Console | no errors, no hydration warnings, across reload and cross-product navigation |
+
+**Not verified by eye:** the Activity dot lighting on a real runtime failure, and the
+`working`/`error` dot colours in situ — all three are covered by unit and integration
+tests, but reproducing them live needs a deliberately broken runtime.
+
+**Two false alarms worth recording**, both caused by testing procedure rather than code:
+
+1. A hydration `useId` mismatch appeared after I edited `page.tsx` under a live dev server.
+   It did not reproduce on a fresh tab against a clean build — it was an HMR artifact.
+2. The status dot briefly computed as `position: static` with a transparent background and
+   the served stylesheet contained neither the dot nor the cap rules. This followed a
+   revert/restore of source files under a running Turbopack server, which left a stale
+   stylesheet. Clearing `.next` and restarting resolved it.
+
+Lesson for future browser passes: **restart the dev server and use a fresh tab after any
+git-level file swap.** The console buffer also persists across navigations, so a stale
+error can be misattributed to the current build — check the DOM to confirm which build you
+are actually looking at.
diff --git a/docs/superpowers/specs/2026-08-31-cockpit-run-discoverability-design.md b/docs/superpowers/specs/2026-08-31-cockpit-run-discoverability-design.md
new file mode 100644
index 000000000..86c918d40
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-31-cockpit-run-discoverability-design.md
@@ -0,0 +1,183 @@
+# Cockpit: making Run discoverable from Code
+
+**Date:** 2026-08-31
+**Status:** Approved, ready for planning
+
+## Problem
+
+On a capability page in Code view, nothing tells the user they can run the example. The
+mode rail exists and works, but it does not read as a switch.
+
+Three failures, observed on the live page at 1440×900
+(`/ag-ui/core-capabilities/streaming/overview/python`):
+
+1. **The rail reads as chrome.** `Docs / Run / Code / API` sit in a 66px column at the far
+   left edge, at the same visual weight as the `Activity` and `Settings` utilities beneath
+   them. Nothing groups the four as views of one capability. Inactive items are painted
+   with `--ds-text-muted` — the token also used for disabled text — so they read as
+   unavailable rather than clickable.
+
+2. **Code view has no exit affordance.** Roughly 1250px of the viewport is file tree, tabs
+   and source. The only route back to Run is a 48px target ~1200px away, with no
+   in-context prompt.
+
+3. **Runtime controls sit below the fold.** The `Runtime` section renders after the full
+   capability nav list. Measured on the live page: the heading lands at `y=1860` inside a
+   900px viewport, in a pane with 1997px of scroll height. The one surface that says a
+   live runtime exists is unreachable without scrolling past ~30 nav links.
+
+**Amplifier.** `activeMode` is persisted in `localStorage` under a single global key
+(`libs/ui-react/src/lib/control-plane/control-plane-preferences.ts`), not scoped per
+capability. Verified live: a single Code click persisted for the rest of the session and
+across navigations. One exploratory click therefore makes Code the landing view for *every*
+capability, on *every* future visit. The `'Run'` default only ever applies to a first-time
+visitor.
+
+## Non-goals
+
+- No in-content affordance inside the Code pane (a header "run this" pill, a live peek at
+  the running app). Both were considered and deliberately deferred; see Alternatives.
+- No change to Docs, API or narrative content.
+- No change to the mobile overlay beyond what falls out of shared components.
+
+**Accepted tradeoff:** this design does not address failure 2. Nothing lands in the 1250px
+where the user's eye is while reading code. The rail becomes legible; it does not become
+close. This is a deliberate first step, to be evaluated before deciding whether the header
+pill is still needed.
+
+## Design
+
+### 1. Mode is no longer sticky
+
+Every capability opens in Run. Mode becomes per-page state, not a preference.
+
+- Remove `activeMode` / `setActiveMode` from `ControlPlanePreferencesV1['cockpit']` and
+  from `useControlPlanePreferences`. The hook retains `expanded` only.
+- `CockpitShell` holds the mode in `useState<ControlPlaneMode>('Run')`.
+- The `?mode=` deep link keeps working. It currently waits on `preferences.hydrated`;
+  with mode as local state it instead applies in a mount effect, so the server-rendered
+  Run markup and the first client render agree and hydration stays clean.
+- No storage version bump. `activeMode` in existing stored blobs is simply no longer read;
+  a stale ignored key is harmless. The `docs` surface does not use this field.
+
+Rationale: the cockpit's value is the running example; the code is supporting evidence. A
+preference that quietly demotes the demo to a code dump is the wrong thing to remember —
+and it is remembered from a single exploratory click, which is weak evidence of intent.
+
+### 2. Rail legibility
+
+In `apps/cockpit/src/app/cockpit.css`:
+
+- **Resting contrast:** inactive `[data-control-plane-rail-item]` moves from
+  `--ds-text-muted` to `--ds-text-secondary`.
+- **Group rule:** a hairline above `[data-control-plane-rail-group="utilities"]`. The DOM
+  already separates `primary` from `utilities`
+  (`libs/ui-react/src/lib/control-plane/control-plane.tsx`); only the CSS is missing.
+- **Set label:** a small `VIEW` cap above the primary group, so the switch is named rather
+  than inferred. Decorative, `aria-hidden` — the rail's `nav` already carries
+  `aria-label="Cockpit modes"`.
+
+### 3. A runtime phase dot on Run
+
+The `Run` rail item carries a dot driven by `runtimeSnapshot.phase`, already available in
+`CockpitShell` via `controller.snapshot`.
+
+| Phase | Dot |
+| --- | --- |
+| `ready` | success |
+| `connecting`, `checking`, `reloading` | working |
+| `unresponsive`, `error`, `invalid_configuration` | error |
+| `not_configured` | none |
+
+`not_configured` renders no dot: there is no runtime, so absence is the honest signal.
+
+`.cockpit-control-plane` already defines `--cockpit-state-success` and
+`--cockpit-state-error` (with dark-theme overrides). The success and error buckets use
+those; the working bucket needs one new sibling token defined the same way.
+
+Constraints:
+
+- **Colour is not the only channel.** The state goes into the Run item's accessible name
+  ("Run, runtime ready" / "Run, runtime error"), reusing the existing rail tooltip for the
+  hover affordance.
+- **Steady fills, no pulse.** A blinking dot in permanent peripheral vision costs
+  attention without carrying information.
+- Reuses the existing dot treatment established by `[data-cockpit-activity-attention]`.
+
+### 4. Activity's dot is re-scoped to unseen problems
+
+Adding a phase dot to Run collides with the Activity dot: today
+`runtimeNeedsAttention(phase)` fires on exactly `invalid_configuration`, `unresponsive`
+and `error` — the same three phases where Run now goes red. Left alone, one fault paints
+two red dots in one 66px column and neither says which to click.
+
+The two dots are re-scoped to make two distinct claims:
+
+- **Run** — what the runtime is doing *right now*.
+- **Activity** — there are problems in the log you have not read.
+
+Definition: the Activity dot shows when there is at least one event with
+`severity === 'error'` that arrived since the panel was last opened. `severity` is already
+assigned in `createSessionActivityEvent`, so this needs no new event plumbing. It covers
+`runtime_unresponsive`, `runtime_initialization_error`, `configuration_invalid` and
+`diagnostics_copy_failed`.
+
+- Seen-marker: opening the Activity utility marks all current events seen. `CockpitShell`
+  already tracks `activityOpenCycle` on open, which is the natural hook.
+- **Direction matters.** `activityReducer` *prepends* (`[action.event, ...state]`), so the
+  log is newest-first: the seen events are the array's tail and the unseen window runs from
+  index 0. A naive `slice(seenCount)` is exactly inverted and still passes the obvious
+  tests, so the selector needs a case that pins the direction.
+- Known limitation: the marker is a count, and the log is capped at `MAX_ACTIVITY_EVENTS`
+  (50). Once the cap is reached, `length - seenCount` saturates at 0 and further errors
+  would not flag. Keying the marker on the newest seen event id would be robust; the count
+  is kept because the cap is far outside ordinary use. Revisit if the cap ever drops.
+- Clearing the log clears the marker.
+- Deriving from `severity === 'error'` rather than "any unread event" matters: `mode_changed`
+  and `runtime_ready` fire during ordinary use, and counting them would light the dot
+  constantly from the user's own actions.
+
+This is strictly better than today's behaviour on one case: a runtime that failed and then
+self-recovered currently leaves no trace once the phase clears, because the dot tracks
+live phase. Under the new rule the unread error survives the recovery until someone looks.
+
+`runtimeNeedsAttention` becomes dead once the Activity dot stops calling it: the Run dot
+goes through `runtimeRailStatus`, not through it. It is deleted along with its test table
+rather than left as an exported, tested, uncalled predicate.
+
+## Components touched
+
+| Unit | Change |
+| --- | --- |
+| `control-plane-preferences.ts` | Drop `activeMode` from the persisted shape and the hook |
+| `control-plane.tsx` | Rail item gains optional status-dot + accessible-name support |
+| `cockpit-control-plane.tsx` | Pass phase to Run; switch Activity's dot to unseen-errors |
+| `cockpit-shell.tsx` | Mode as local state; `?mode=` on mount; track seen-marker |
+| `activity-panel.tsx` | `attention` prop reinterpreted as unseen-errors |
+| `cockpit.css` | Contrast, group rule, `VIEW` cap, dot variants |
+
+## Testing
+
+- **Preferences:** stored `activeMode` is ignored; a fresh capability opens in Run;
+  `?mode=code` still lands in Code without a hydration mismatch.
+- **Phase mapping:** all eight phases map to the right dot, `not_configured` renders none,
+  and the accessible name changes with phase.
+- **Activity dot:** does not fire on `mode_changed` or `runtime_ready`; fires on an error
+  event; clears on panel open; survives a fault that recovers before the panel is opened.
+- **Mutation check.** The Activity-dot rule and the `not_configured` no-dot case both fail
+  silently if wired wrong — the assertion is an absence. Each needs a deliberate mutation
+  to confirm the test actually fails, per prior experience with tests that pass vacuously.
+- Existing rail, overflow-menu and mobile-overlay suites must stay green.
+
+## Alternatives considered
+
+- **Header runtime pill** (`● Running ›› See it run` in the workspace header). Hits all
+  three failures, lands where the eye is, and covers Docs and API with one affordance.
+  Recommended, not chosen — deferred so the cheaper rail work can be evaluated first.
+- **Live peek** — the running app kept on screen beneath the code. Architecturally cheap,
+  because `RunMode` never unmounts (`invisible absolute inset-0`) and the iframe is already
+  warm. Deferred: these demos are chat UIs that want vertical room, and at laptop height it
+  risks leaving both panes unusable. Wants a real-size prototype before committing.
+- **Presence-only dot on Run** (one colour, "a runtime is live"). Avoids the Activity
+  collision entirely. Not chosen: full phase is more informative, and the collision turned
+  out to have a resolution that improves Activity independently.
diff --git a/libs/ui-react/src/index.ts b/libs/ui-react/src/index.ts
index 7afef09df..9bd2fd980 100644
--- a/libs/ui-react/src/index.ts
+++ b/libs/ui-react/src/index.ts
@@ -19,6 +19,8 @@ export {
   type ControlPlanePaneProps,
   type ControlPlaneRailItemProps,
   type ControlPlaneRailProps,
+  type ControlPlaneRailItemStatus,
+  type ControlPlaneRailStatus,
   type ControlPlaneSectionProps,
 } from './lib/control-plane/control-plane';
 export {
diff --git a/libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts b/libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts
index 4f5a9fcfa..37ee7539b 100644
--- a/libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts
+++ b/libs/ui-react/src/lib/control-plane/control-plane-preferences.spec.ts
@@ -20,12 +20,27 @@ describe('control-plane preferences', () => {
       version: 1,
       docs: { expanded: { Learn: true, Environment: false } },
       cockpit: {
-        activeMode: 'Run',
         expanded: { Capability: true, Environment: true },
       },
     });
   });
 
+  it('ignores a stored activeMode and never writes one back', () => {
+    window.localStorage.setItem(
+      CONTROL_PLANE_STORAGE_KEY,
+      JSON.stringify({
+        version: 1,
+        docs: { expanded: {} },
+        cockpit: { activeMode: 'Code', expanded: { Capability: false } },
+      }),
+    );
+
+    const parsed = readControlPlanePreferences(window.localStorage);
+
+    expect('activeMode' in parsed.cockpit).toBe(false);
+    expect(parsed.cockpit.expanded.Capability).toBe(false);
+  });
+
   it('validates persisted values and falls back only for invalid fields', () => {
     window.localStorage.setItem(
       CONTROL_PLANE_STORAGE_KEY,
@@ -33,7 +48,6 @@ describe('control-plane preferences', () => {
         version: 1,
         docs: { expanded: { Learn: false, Environment: 'yes' } },
         cockpit: {
-          activeMode: 'Preview',
           expanded: { Capability: false, Environment: true, Extra: 'no' },
         },
       }),
@@ -43,7 +57,6 @@ describe('control-plane preferences', () => {
       version: 1,
       docs: { expanded: { Learn: false, Environment: false } },
       cockpit: {
-        activeMode: 'Run',
         expanded: { Capability: false, Environment: true },
       },
     });
@@ -77,9 +90,9 @@ describe('control-plane preferences', () => {
     try {
       const { result } = renderHook(() => useControlPlanePreferences('cockpit'));
       await waitFor(() => expect(result.current.hydrated).toBe(true));
-      expect(result.current.activeMode).toBe('Run');
-      expect(() => act(() => result.current.setActiveMode('Code'))).not.toThrow();
-      expect(result.current.activeMode).toBe('Code');
+      expect(result.current.expanded.Capability).toBe(true);
+      expect(() => act(() => result.current.setExpanded('Capability', false))).not.toThrow();
+      expect(result.current.expanded.Capability).toBe(false);
     } finally {
       if (descriptor) Object.defineProperty(window, 'localStorage', descriptor);
     }
@@ -94,14 +107,13 @@ describe('control-plane preferences', () => {
     expect(parseControlPlaneMode(null)).toBeNull();
   });
 
-  it('hydrates Cockpit mode and persists mode changes without erasing Docs', async () => {
+  it('hydrates Cockpit disclosure state and persists changes without erasing Docs', async () => {
     window.localStorage.setItem(
       CONTROL_PLANE_STORAGE_KEY,
       JSON.stringify({
         version: 1,
         docs: { expanded: { Learn: false, Environment: true } },
         cockpit: {
-          activeMode: 'Code',
           expanded: { Capability: true, Environment: false },
         },
       }),
@@ -109,9 +121,9 @@ describe('control-plane preferences', () => {
 
     const { result } = renderHook(() => useControlPlanePreferences('cockpit'));
     await waitFor(() => expect(result.current.hydrated).toBe(true));
-    expect(result.current.activeMode).toBe('Code');
+    expect(result.current.expanded).toEqual({ Capability: true, Environment: false });
 
-    act(() => result.current.setActiveMode('API'));
+    act(() => result.current.setExpanded('Environment', true));
 
     const stored = window.localStorage.getItem(CONTROL_PLANE_STORAGE_KEY);
     expect(stored).not.toBeNull();
@@ -119,20 +131,17 @@ describe('control-plane preferences', () => {
       version: 1,
       docs: { expanded: { Learn: false, Environment: true } },
       cockpit: {
-        activeMode: 'API',
-        expanded: { Capability: true, Environment: false },
+        expanded: { Capability: true, Environment: true },
       },
     });
   });
 
-  it('keeps Docs active and persists only its disclosure state', async () => {
+  it('writes docs disclosure state into docs.expanded, leaving cockpit untouched', async () => {
     const { result } = renderHook(() => useControlPlanePreferences('docs'));
     await waitFor(() => expect(result.current.hydrated).toBe(true));
 
-    act(() => result.current.setActiveMode('Code'));
     act(() => result.current.setExpanded('Environment', true));
 
-    expect(result.current.activeMode).toBe('Docs');
     expect(result.current.expanded.Environment).toBe(true);
     const stored = window.localStorage.getItem(CONTROL_PLANE_STORAGE_KEY);
     expect(stored).not.toBeNull();
@@ -140,7 +149,6 @@ describe('control-plane preferences', () => {
       version: 1,
       docs: { expanded: { Learn: true, Environment: true } },
       cockpit: {
-        activeMode: 'Run',
         expanded: { Capability: true, Environment: true },
       },
     });
@@ -154,15 +162,14 @@ describe('control-plane preferences', () => {
       expect(pane.result.current.hydrated).toBe(true);
     });
 
-    act(() => shell.result.current.setActiveMode('Code'));
+    act(() => shell.result.current.setExpanded('Capability', false));
     act(() => pane.result.current.setExpanded('Environment', false));
 
     expect(JSON.parse(window.localStorage.getItem(CONTROL_PLANE_STORAGE_KEY) ?? '{}')).toEqual({
       version: 1,
       docs: { expanded: { Learn: true, Environment: false } },
       cockpit: {
-        activeMode: 'Code',
-        expanded: { Capability: true, Environment: false },
+        expanded: { Capability: false, Environment: false },
       },
     });
   });
diff --git a/libs/ui-react/src/lib/control-plane/control-plane-preferences.ts b/libs/ui-react/src/lib/control-plane/control-plane-preferences.ts
index 0293bde15..885f626a5 100644
--- a/libs/ui-react/src/lib/control-plane/control-plane-preferences.ts
+++ b/libs/ui-react/src/lib/control-plane/control-plane-preferences.ts
@@ -11,7 +11,6 @@ export interface ControlPlanePreferencesV1 {
     expanded: Record<string, boolean>;
   };
   cockpit: {
-    activeMode: ControlPlaneMode;
     expanded: Record<string, boolean>;
   };
 }
@@ -22,7 +21,6 @@ const DEFAULT_PREFERENCES: ControlPlanePreferencesV1 = {
   version: 1,
   docs: { expanded: { Learn: true, Environment: false } },
   cockpit: {
-    activeMode: 'Run',
     expanded: { Capability: true, Environment: true },
   },
 };
@@ -32,10 +30,7 @@ const MODES: readonly ControlPlaneMode[] = ['Docs', 'Run', 'Code', 'API'];
 const cloneDefaults = (): ControlPlanePreferencesV1 => ({
   version: 1,
   docs: { expanded: { ...DEFAULT_PREFERENCES.docs.expanded } },
-  cockpit: {
-    activeMode: DEFAULT_PREFERENCES.cockpit.activeMode,
-    expanded: { ...DEFAULT_PREFERENCES.cockpit.expanded },
-  },
+  cockpit: { expanded: { ...DEFAULT_PREFERENCES.cockpit.expanded } },
 });
 
 const getBrowserStorage = (): Storage | null => {
@@ -61,9 +56,6 @@ const booleanRecord = (
   return result;
 };
 
-const isMode = (value: unknown): value is ControlPlaneMode =>
-  typeof value === 'string' && MODES.includes(value as ControlPlaneMode);
-
 export const parseControlPlaneMode = (value: string | null): ControlPlaneMode | null => {
   if (!value) return null;
   const normalized = value.toLowerCase();
@@ -88,9 +80,6 @@ export const readControlPlanePreferences = (
         expanded: booleanRecord(docs.expanded, defaults.docs.expanded),
       },
       cockpit: {
-        activeMode: isMode(cockpit.activeMode)
-          ? cockpit.activeMode
-          : defaults.cockpit.activeMode,
         expanded: booleanRecord(cockpit.expanded, defaults.cockpit.expanded),
       },
     };
@@ -135,17 +124,6 @@ export function useControlPlanePreferences(surface: ControlPlaneSurface) {
     [hydrated],
   );
 
-  const setActiveMode = useCallback(
-    (activeMode: ControlPlaneMode) => {
-      if (surface === 'docs') return;
-      update((current) => ({
-        ...current,
-        cockpit: { ...current.cockpit, activeMode },
-      }));
-    },
-    [surface, update],
-  );
-
   const setExpanded = useCallback(
     (section: string, open: boolean) => {
       update((current) =>
@@ -171,9 +149,7 @@ export function useControlPlanePreferences(surface: ControlPlaneSurface) {
 
   return {
     hydrated,
-    activeMode: surface === 'docs' ? ('Docs' as const) : preferences.cockpit.activeMode,
     expanded: preferences[surface].expanded,
-    setActiveMode,
     setExpanded,
   };
 }
diff --git a/libs/ui-react/src/lib/control-plane/control-plane.spec.tsx b/libs/ui-react/src/lib/control-plane/control-plane.spec.tsx
index 2248843c6..73e43e7bb 100644
--- a/libs/ui-react/src/lib/control-plane/control-plane.spec.tsx
+++ b/libs/ui-react/src/lib/control-plane/control-plane.spec.tsx
@@ -54,6 +54,42 @@ describe('control-plane structure', () => {
     expect(screen.getByRole('button', { name: 'Run' }).getAttribute('aria-pressed')).toBe('true');
   });
 
+  it('renders a status dot and folds its label into the accessible name', () => {
+    render(
+      <ControlPlaneRailItem
+        label="Run"
+        icon={<svg />}
+        status={{ kind: 'error', label: 'runtime error' }}
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Run, runtime error' });
+    expect(
+      button.querySelector('[data-control-plane-rail-status]')?.getAttribute(
+        'data-control-plane-rail-status',
+      ),
+    ).toBe('error');
+  });
+
+  it('gives a labeled status item the accessible name without a tooltip', () => {
+    render(
+      <ControlPlaneRailItem
+        label="Run"
+        icon={<svg />}
+        status={{ kind: 'error', label: 'runtime error' }}
+      />,
+    );
+    const button = screen.getByRole('button', { name: 'Run, runtime error' });
+    expect(button.querySelector('[data-control-plane-tooltip]')).toBeNull();
+    expect(button.getAttribute('aria-describedby')).toBeNull();
+    expect(screen.queryByRole('tooltip')).toBeNull();
+  });
+
+  it('renders no status dot when status is omitted', () => {
+    render(<ControlPlaneRailItem label="Run" icon={<svg />} />);
+    const button = screen.getByRole('button', { name: 'Run' });
+    expect(button.querySelector('[data-control-plane-rail-status]')).toBeNull();
+  });
+
   it('renders a labeled contextual pane and environment facts', () => {
     render(
       <ControlPlanePane label="Docs context">
diff --git a/libs/ui-react/src/lib/control-plane/control-plane.tsx b/libs/ui-react/src/lib/control-plane/control-plane.tsx
index f3b69b44e..79a40f31c 100644
--- a/libs/ui-react/src/lib/control-plane/control-plane.tsx
+++ b/libs/ui-react/src/lib/control-plane/control-plane.tsx
@@ -32,19 +32,33 @@ const visuallyHidden: CSSProperties = {
 
 export interface ControlPlaneRailProps extends CommonProps {
   label: string;
+  primaryLabel?: string;
   primary: ReactNode;
   utilities?: ReactNode;
 }
 
 export function ControlPlaneRail({
   label,
+  primaryLabel,
   primary,
   utilities,
   className,
 }: ControlPlaneRailProps) {
+  const primaryLabelId = useId();
   return (
     <nav aria-label={label} className={className} data-control-plane-rail>
-      <div data-control-plane-rail-group="primary">{primary}</div>
+      <div
+        data-control-plane-rail-group="primary"
+        role={primaryLabel ? 'group' : undefined}
+        aria-labelledby={primaryLabel ? primaryLabelId : undefined}
+      >
+        {primaryLabel ? (
+          <span id={primaryLabelId} data-control-plane-rail-group-label>
+            {primaryLabel}
+          </span>
+        ) : null}
+        {primary}
+      </div>
       {utilities ? (
         <div data-control-plane-rail-group="utilities">{utilities}</div>
       ) : null}
@@ -52,6 +66,13 @@ export function ControlPlaneRail({
   );
 }
 
+export type ControlPlaneRailStatus = 'success' | 'working' | 'error';
+
+export interface ControlPlaneRailItemStatus {
+  kind: ControlPlaneRailStatus;
+  label: string;
+}
+
 export interface ControlPlaneRailItemProps extends CommonProps {
   label: string;
   icon: ReactNode;
@@ -61,6 +82,7 @@ export interface ControlPlaneRailItemProps extends CommonProps {
   iconOnly?: boolean;
   target?: string;
   rel?: string;
+  status?: ControlPlaneRailItemStatus;
 }
 
 export function ControlPlaneRailItem({
@@ -73,15 +95,29 @@ export function ControlPlaneRailItem({
   className,
   target,
   rel,
+  status,
 }: ControlPlaneRailItemProps) {
   const tooltipId = useId();
+  const accessibleName = status ? `${label}, ${status.label}` : label;
+  // An icon-only item needs a tooltip because it has no visible label. A
+  // status item needs its status in the accessible name, which `aria-label`
+  // already supplies -- it must not also get the rail tooltip, whose
+  // positioning is authored for the narrow icon rail.
+  const needsAccessibleName = iconOnly || Boolean(status);
+  const showTooltip = iconOnly;
   const content = (
     <>
       <span data-control-plane-rail-icon>{icon}</span>
       {iconOnly ? null : <span data-control-plane-rail-label>{label}</span>}
-      {iconOnly ? (
+      {status ? (
+        <span data-control-plane-rail-status={status.kind} aria-hidden="true" />
+      ) : null}
+      {status && !iconOnly ? (
+        <span style={visuallyHidden}>{status.label}</span>
+      ) : null}
+      {showTooltip ? (
         <span id={tooltipId} role="tooltip" data-control-plane-tooltip>
-          {label}
+          {accessibleName}
         </span>
       ) : null}
     </>
@@ -90,8 +126,8 @@ export function ControlPlaneRailItem({
     className,
     'data-control-plane-rail-item': true,
     'data-control-plane-active': active || undefined,
-    'aria-label': iconOnly ? label : undefined,
-    'aria-describedby': iconOnly ? tooltipId : undefined,
+    'aria-label': needsAccessibleName ? accessibleName : undefined,
+    'aria-describedby': showTooltip ? tooltipId : undefined,
   } as const;
 
   if (href) {