From 8ee70fba7c6e594009ac23b7e0ed1791d8764819 Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Wed, 29 Apr 2026 17:56:57 -0400
Subject: [PATCH 1/6] feat(dashboard): redesign harness UI as an agent run
 control center

Replaces the legacy chat dashboard chrome with a clean, dark-first agent
harness composed of an icon rail, secondary sidebar, top bar with status
pills, main agent thread and a tabbed inspector panel. Adds the agent
run primitives (TaskHeader, PlanBlock, ToolCallTimeline, IncidentCard,
StatusPill) per the redesign spec, a Cmd/Ctrl+K command palette, session
export and persisted layout preferences.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../agentRun/ApprovalRequestCard.tsx          |   36 +
 .../src/components/agentRun/ArtifactCard.tsx  |   33 +
 .../components/agentRun/IncidentCard.test.tsx |   39 +
 .../src/components/agentRun/IncidentCard.tsx  |   98 ++
 .../components/agentRun/PlanBlock.test.tsx    |   48 +
 .../src/components/agentRun/PlanBlock.tsx     |  111 ++
 .../src/components/agentRun/PlanStepRow.tsx   |   29 +
 .../components/agentRun/StatusPill.test.tsx   |   21 +
 .../src/components/agentRun/StatusPill.tsx    |   34 +
 .../components/agentRun/TaskHeader.test.tsx   |   49 +
 .../src/components/agentRun/TaskHeader.tsx    |  140 +++
 .../src/components/agentRun/ToolCallRow.tsx   |   95 ++
 .../agentRun/ToolCallTimeline.test.tsx        |   51 +
 .../components/agentRun/ToolCallTimeline.tsx  |   43 +
 .../agentRun/agentRunFormat.test.ts           |   44 +
 .../src/components/agentRun/agentRunFormat.ts |   65 +
 .../agentRun/normalizeRunEvents.test.ts       |   64 +
 .../components/agentRun/normalizeRunEvents.ts |   83 ++
 .../src/components/agentRun/sampleAgentRun.ts |   83 ++
 dashboard/src/components/agentRun/types.ts    |  177 +++
 .../commandPalette/CommandPalette.tsx         |  162 +++
 .../commandPalette/commandRegistry.ts         |  118 ++
 .../commandPalette/fuzzyMatch.test.ts         |   30 +
 .../components/commandPalette/fuzzyMatch.ts   |   43 +
 .../useCommandPaletteShortcut.ts              |   24 +
 .../commandPalette/useSessionExport.ts        |   43 +
 .../src/components/layout/DashboardLayout.tsx |   29 +-
 dashboard/src/components/layout/Sidebar.tsx   |  255 ----
 dashboard/src/components/layout/Topbar.tsx    |  161 ---
 .../layout/harness/HarnessShell.tsx           |   67 +
 .../layout/harness/HarnessTopBar.tsx          |  197 +++
 .../components/layout/harness/IconRail.tsx    |   94 ++
 .../layout/harness/InspectorPanel.tsx         |   73 ++
 .../layout/harness/SecondarySidebar.tsx       |  144 +++
 .../harness/SidebarChatSessionsList.tsx       |   81 ++
 .../inspector/InspectorActionsCard.tsx        |   42 +
 .../inspector/InspectorContextCard.tsx        |   50 +
 .../harness/inspector/InspectorLogsTab.tsx    |   96 ++
 .../harness/inspector/InspectorMemoryTab.tsx  |   55 +
 .../harness/inspector/InspectorPlanTab.tsx    |   52 +
 .../harness/inspector/InspectorSummaryTab.tsx |   75 ++
 .../harness/inspector/InspectorToolsTab.tsx   |   38 +
 .../layout/harness/inspector/contextUsage.ts  |   34 +
 .../layout/harness/sidebarNavGroups.ts        |   82 ++
 .../components/layout/harness/topbarStatus.ts |   43 +
 .../layout/harness/useRailVersionLabel.ts     |    6 +
 dashboard/src/hooks/useInspectorLogs.ts       |   23 +
 dashboard/src/main.tsx                        |    2 +
 dashboard/src/store/commandPaletteStore.ts    |   15 +
 dashboard/src/store/inspectorStore.ts         |   33 +
 dashboard/src/styles/agentRun.scss            |  447 +++++++
 dashboard/src/styles/harness.scss             | 1075 +++++++++++++++++
 52 files changed, 4589 insertions(+), 443 deletions(-)
 create mode 100644 dashboard/src/components/agentRun/ApprovalRequestCard.tsx
 create mode 100644 dashboard/src/components/agentRun/ArtifactCard.tsx
 create mode 100644 dashboard/src/components/agentRun/IncidentCard.test.tsx
 create mode 100644 dashboard/src/components/agentRun/IncidentCard.tsx
 create mode 100644 dashboard/src/components/agentRun/PlanBlock.test.tsx
 create mode 100644 dashboard/src/components/agentRun/PlanBlock.tsx
 create mode 100644 dashboard/src/components/agentRun/PlanStepRow.tsx
 create mode 100644 dashboard/src/components/agentRun/StatusPill.test.tsx
 create mode 100644 dashboard/src/components/agentRun/StatusPill.tsx
 create mode 100644 dashboard/src/components/agentRun/TaskHeader.test.tsx
 create mode 100644 dashboard/src/components/agentRun/TaskHeader.tsx
 create mode 100644 dashboard/src/components/agentRun/ToolCallRow.tsx
 create mode 100644 dashboard/src/components/agentRun/ToolCallTimeline.test.tsx
 create mode 100644 dashboard/src/components/agentRun/ToolCallTimeline.tsx
 create mode 100644 dashboard/src/components/agentRun/agentRunFormat.test.ts
 create mode 100644 dashboard/src/components/agentRun/agentRunFormat.ts
 create mode 100644 dashboard/src/components/agentRun/normalizeRunEvents.test.ts
 create mode 100644 dashboard/src/components/agentRun/normalizeRunEvents.ts
 create mode 100644 dashboard/src/components/agentRun/sampleAgentRun.ts
 create mode 100644 dashboard/src/components/agentRun/types.ts
 create mode 100644 dashboard/src/components/commandPalette/CommandPalette.tsx
 create mode 100644 dashboard/src/components/commandPalette/commandRegistry.ts
 create mode 100644 dashboard/src/components/commandPalette/fuzzyMatch.test.ts
 create mode 100644 dashboard/src/components/commandPalette/fuzzyMatch.ts
 create mode 100644 dashboard/src/components/commandPalette/useCommandPaletteShortcut.ts
 create mode 100644 dashboard/src/components/commandPalette/useSessionExport.ts
 delete mode 100644 dashboard/src/components/layout/Sidebar.tsx
 delete mode 100644 dashboard/src/components/layout/Topbar.tsx
 create mode 100644 dashboard/src/components/layout/harness/HarnessShell.tsx
 create mode 100644 dashboard/src/components/layout/harness/HarnessTopBar.tsx
 create mode 100644 dashboard/src/components/layout/harness/IconRail.tsx
 create mode 100644 dashboard/src/components/layout/harness/InspectorPanel.tsx
 create mode 100644 dashboard/src/components/layout/harness/SecondarySidebar.tsx
 create mode 100644 dashboard/src/components/layout/harness/SidebarChatSessionsList.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorContextCard.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorSummaryTab.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/contextUsage.ts
 create mode 100644 dashboard/src/components/layout/harness/sidebarNavGroups.ts
 create mode 100644 dashboard/src/components/layout/harness/topbarStatus.ts
 create mode 100644 dashboard/src/components/layout/harness/useRailVersionLabel.ts
 create mode 100644 dashboard/src/hooks/useInspectorLogs.ts
 create mode 100644 dashboard/src/store/commandPaletteStore.ts
 create mode 100644 dashboard/src/store/inspectorStore.ts
 create mode 100644 dashboard/src/styles/agentRun.scss
 create mode 100644 dashboard/src/styles/harness.scss

diff --git a/dashboard/src/components/agentRun/ApprovalRequestCard.tsx b/dashboard/src/components/agentRun/ApprovalRequestCard.tsx
new file mode 100644
index 000000000..686811c07
--- /dev/null
+++ b/dashboard/src/components/agentRun/ApprovalRequestCard.tsx
@@ -0,0 +1,36 @@
+import { FiCheck, FiX } from 'react-icons/fi';
+import type { ApprovalRequestViewModel } from './types';
+import { formatTimeOfDay } from './agentRunFormat';
+
+interface ApprovalRequestCardProps {
+  approval: ApprovalRequestViewModel;
+  onApprove?: () => void;
+  onReject?: () => void;
+}
+
+export default function ApprovalRequestCard({ approval, onApprove, onReject }: ApprovalRequestCardProps) {
+  return (
+    <section className="approval-card" role="alert" aria-label={`Approval request: ${approval.title}`}>
+      <header className="agent-card__header">
+        <span>{approval.title}</span>
+        <span className="incident-card__time">{formatTimeOfDay(approval.createdAt)}</span>
+      </header>
+      <p className="incident-card__body">{approval.description}</p>
+      <pre className="tool-row__details">{approval.prompt}</pre>
+      <div className="incident-card__actions">
+        {onApprove != null && (
+          <button type="button" className="agent-btn agent-btn--primary" onClick={onApprove}>
+            <FiCheck size={14} aria-hidden="true" />
+            <span>Approve</span>
+          </button>
+        )}
+        {onReject != null && (
+          <button type="button" className="agent-btn agent-btn--danger" onClick={onReject}>
+            <FiX size={14} aria-hidden="true" />
+            <span>Reject</span>
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/dashboard/src/components/agentRun/ArtifactCard.tsx b/dashboard/src/components/agentRun/ArtifactCard.tsx
new file mode 100644
index 000000000..d29e4cbd0
--- /dev/null
+++ b/dashboard/src/components/agentRun/ArtifactCard.tsx
@@ -0,0 +1,33 @@
+import { FiDownload, FiFileText } from 'react-icons/fi';
+import type { ArtifactViewModel } from './types';
+
+interface ArtifactCardProps {
+  artifact: ArtifactViewModel;
+  onOpen?: (id: string) => void;
+}
+
+export default function ArtifactCard({ artifact, onOpen }: ArtifactCardProps) {
+  return (
+    <article className="artifact-card" aria-label={`Artifact ${artifact.name}`}>
+      <span className="artifact-card__icon" aria-hidden="true"><FiFileText size={16} /></span>
+      <div className="artifact-card__body">
+        <span className="artifact-card__title">{artifact.name}</span>
+        {artifact.description != null && (
+          <span className="artifact-card__description">{artifact.description}</span>
+        )}
+      </div>
+      {artifact.href != null && (
+        <a className="agent-btn" href={artifact.href} target="_blank" rel="noreferrer">
+          <FiDownload size={14} aria-hidden="true" />
+          <span>Open</span>
+        </a>
+      )}
+      {artifact.href == null && onOpen != null && (
+        <button type="button" className="agent-btn" onClick={() => onOpen(artifact.id)}>
+          <FiDownload size={14} aria-hidden="true" />
+          <span>Open</span>
+        </button>
+      )}
+    </article>
+  );
+}
diff --git a/dashboard/src/components/agentRun/IncidentCard.test.tsx b/dashboard/src/components/agentRun/IncidentCard.test.tsx
new file mode 100644
index 000000000..dd73446eb
--- /dev/null
+++ b/dashboard/src/components/agentRun/IncidentCard.test.tsx
@@ -0,0 +1,39 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import IncidentCard from './IncidentCard';
+import type { IncidentViewModel } from './types';
+
+const incident: IncidentViewModel = {
+  id: 'inc-1',
+  runId: 'run-1',
+  severity: 'error',
+  title: 'LLM provider is temporarily unavailable',
+  message: 'Your task has been saved and will retry automatically in 5 minutes.',
+  code: 'llm.provider.circuit.open',
+  createdAt: '2026-04-29T10:43:00.000Z',
+  retryCountdownSeconds: 299,
+  taskSaved: true,
+  actions: [
+    { id: 'retry_now', label: 'Retry now', kind: 'primary' },
+    { id: 'switch_model', label: 'Switch model', kind: 'secondary' },
+    { id: 'continue_manually', label: 'Continue manually', kind: 'secondary' },
+    { id: 'open_logs', label: 'Open logs', kind: 'secondary' },
+  ],
+};
+
+describe('IncidentCard', () => {
+  it('renders the title, message and code', () => {
+    const html = renderToStaticMarkup(<IncidentCard incident={incident} />);
+    expect(html).toContain('LLM provider is temporarily unavailable');
+    expect(html).toContain('llm.provider.circuit.open');
+    expect(html).toContain('Task saved automatically');
+  });
+
+  it('renders all recovery actions', () => {
+    const html = renderToStaticMarkup(<IncidentCard incident={incident} />);
+    expect(html).toContain('Retry now');
+    expect(html).toContain('Switch model');
+    expect(html).toContain('Continue manually');
+    expect(html).toContain('Open logs');
+  });
+});
diff --git a/dashboard/src/components/agentRun/IncidentCard.tsx b/dashboard/src/components/agentRun/IncidentCard.tsx
new file mode 100644
index 000000000..56e49ebed
--- /dev/null
+++ b/dashboard/src/components/agentRun/IncidentCard.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { FiAlertTriangle, FiInfo, FiAlertOctagon } from 'react-icons/fi';
+import type { IncidentActionViewModel, IncidentSeverity, IncidentViewModel } from './types';
+import { formatCountdown, formatTimeOfDay } from './agentRunFormat';
+
+type IncidentActionHandler = (actionId: IncidentActionViewModel['id']) => void;
+
+interface IncidentCardProps {
+  incident: IncidentViewModel;
+  onAction?: IncidentActionHandler;
+}
+
+const SEVERITY_CLASS: Record<IncidentSeverity, string> = {
+  info: 'incident-card--info',
+  warning: 'incident-card--warning',
+  error: '',
+  critical: '',
+};
+
+function SeverityIcon({ severity }: { severity: IncidentSeverity }) {
+  if (severity === 'info') {
+    return <FiInfo size={16} aria-hidden="true" />;
+  }
+  if (severity === 'warning') {
+    return <FiAlertTriangle size={16} aria-hidden="true" />;
+  }
+  return <FiAlertOctagon size={16} aria-hidden="true" />;
+}
+
+function useCountdown(targetIso: string | undefined, fallbackSeconds?: number): number | null {
+  const [remaining, setRemaining] = useState<number | null>(() => {
+    if (targetIso == null && fallbackSeconds == null) {
+      return null;
+    }
+    if (targetIso != null) {
+      const diffMs = new Date(targetIso).getTime() - Date.now();
+      return Math.max(0, Math.floor(diffMs / 1000));
+    }
+    return fallbackSeconds ?? null;
+  });
+
+  // Tick every second while the countdown has time remaining; clean up on unmount.
+  useEffect(() => {
+    if (remaining == null || remaining <= 0) {
+      return undefined;
+    }
+    const id = window.setInterval(() => {
+      setRemaining((prev) => {
+        if (prev == null) {
+          return null;
+        }
+        if (targetIso != null) {
+          const diffMs = new Date(targetIso).getTime() - Date.now();
+          return Math.max(0, Math.floor(diffMs / 1000));
+        }
+        return Math.max(0, prev - 1);
+      });
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [remaining, targetIso]);
+
+  return remaining;
+}
+
+export default function IncidentCard({ incident, onAction }: IncidentCardProps) {
+  const remaining = useCountdown(incident.retryAt, incident.retryCountdownSeconds);
+  return (
+    <section
+      className={`incident-card ${SEVERITY_CLASS[incident.severity]}`.trim()}
+      aria-label={`${incident.title} incident`}
+      role="alert"
+    >
+      <div className="incident-card__header">
+        <SeverityIcon severity={incident.severity} />
+        <span className="incident-card__title">{incident.title}</span>
+        <span className="incident-card__time">{formatTimeOfDay(incident.createdAt)}</span>
+      </div>
+      <div className="incident-card__body">{incident.message}</div>
+      <div className="incident-card__meta">
+        {incident.code != null && <span>Reason: <code>{incident.code}</code></span>}
+        {incident.taskSaved && <span>Task saved automatically</span>}
+        {remaining != null && <span>Retry in: {formatCountdown(remaining)}</span>}
+      </div>
+      <div className="incident-card__actions">
+        {incident.actions.map((action) => (
+          <button
+            key={action.id}
+            type="button"
+            className={`agent-btn${action.kind === 'primary' ? ' agent-btn--primary' : ''}${action.kind === 'danger' ? ' agent-btn--danger' : ''}`}
+            onClick={() => onAction?.(action.id)}
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/dashboard/src/components/agentRun/PlanBlock.test.tsx b/dashboard/src/components/agentRun/PlanBlock.test.tsx
new file mode 100644
index 000000000..8f5f5835f
--- /dev/null
+++ b/dashboard/src/components/agentRun/PlanBlock.test.tsx
@@ -0,0 +1,48 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import PlanBlock from './PlanBlock';
+import type { PlanViewModel } from './types';
+
+const plan: PlanViewModel = {
+  id: 'plan-1',
+  runId: 'run-1',
+  version: 1,
+  updatedAt: '2026-04-29T10:31:00.000Z',
+  steps: [
+    { id: 's1', index: 1, title: 'Inspect current optimizer config', status: 'completed', relatedToolCallIds: [] },
+    { id: 's2', index: 2, title: 'Update switching logic', status: 'completed', relatedToolCallIds: [] },
+    { id: 's3', index: 3, title: 'Run optimizer backtest', status: 'running', relatedToolCallIds: [] },
+    { id: 's4', index: 4, title: 'Validate results and compare', status: 'pending', relatedToolCallIds: [] },
+    { id: 's5', index: 5, title: 'Save report and summary', status: 'pending', relatedToolCallIds: [] },
+  ],
+};
+
+describe('PlanBlock', () => {
+  it('renders all steps with their status labels', () => {
+    const html = renderToStaticMarkup(<PlanBlock plan={plan} currentStepIndex={3} />);
+    expect(html).toContain('Inspect current optimizer config');
+    expect(html).toContain('Run optimizer backtest');
+    expect(html).toContain('In progress');
+    expect(html).toContain('5 steps');
+  });
+
+  it('shows Approve action only when needsApproval', () => {
+    const without = renderToStaticMarkup(<PlanBlock plan={plan} onApprove={() => undefined} />);
+    expect(without).not.toContain('Approve');
+
+    const withApproval = renderToStaticMarkup(
+      <PlanBlock plan={plan} needsApproval onApprove={() => undefined} />,
+    );
+    expect(withApproval).toContain('Approve');
+  });
+
+  it('shows Pause only when run is active', () => {
+    const idle = renderToStaticMarkup(<PlanBlock plan={plan} onPause={() => undefined} />);
+    expect(idle).not.toContain('Pause');
+
+    const running = renderToStaticMarkup(
+      <PlanBlock plan={plan} isRunActive onPause={() => undefined} />,
+    );
+    expect(running).toContain('Pause');
+  });
+});
diff --git a/dashboard/src/components/agentRun/PlanBlock.tsx b/dashboard/src/components/agentRun/PlanBlock.tsx
new file mode 100644
index 000000000..fec8eaabc
--- /dev/null
+++ b/dashboard/src/components/agentRun/PlanBlock.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { FiChevronDown, FiChevronRight } from 'react-icons/fi';
+import type { PlanViewModel } from './types';
+import PlanStepRow from './PlanStepRow';
+
+export interface PlanBlockActions {
+  onApprove?: () => void;
+  onPause?: () => void;
+  onSkip?: () => void;
+  onEdit?: () => void;
+  onRunStepByStep?: () => void;
+  onRetryStep?: () => void;
+}
+
+interface PlanBlockProps extends PlanBlockActions {
+  plan: PlanViewModel;
+  currentStepIndex?: number;
+  initiallyOpen?: boolean;
+  needsApproval?: boolean;
+  isRunActive?: boolean;
+  hasFailedStep?: boolean;
+}
+
+interface ActionsRowProps extends PlanBlockActions {
+  needsApproval: boolean;
+  isRunActive: boolean;
+  hasFailedStep: boolean;
+}
+
+function ActionsRow({
+  needsApproval,
+  isRunActive,
+  hasFailedStep,
+  onApprove,
+  onPause,
+  onSkip,
+  onEdit,
+  onRunStepByStep,
+  onRetryStep,
+}: ActionsRowProps) {
+  return (
+    <div className="plan-block__actions">
+      {onEdit != null && (
+        <button type="button" className="agent-btn" onClick={onEdit}>Edit plan</button>
+      )}
+      {needsApproval && onApprove != null && (
+        <button type="button" className="agent-btn agent-btn--primary" onClick={onApprove}>Approve</button>
+      )}
+      {onRunStepByStep != null && (
+        <button type="button" className="agent-btn" onClick={onRunStepByStep}>Run step-by-step</button>
+      )}
+      {isRunActive && onPause != null && (
+        <button type="button" className="agent-btn" onClick={onPause}>Pause</button>
+      )}
+      {onSkip != null && (
+        <button type="button" className="agent-btn" onClick={onSkip}>Skip step</button>
+      )}
+      {hasFailedStep && onRetryStep != null && (
+        <button type="button" className="agent-btn agent-btn--danger" onClick={onRetryStep}>Retry step</button>
+      )}
+    </div>
+  );
+}
+
+export default function PlanBlock({
+  plan,
+  currentStepIndex,
+  initiallyOpen = true,
+  needsApproval = false,
+  isRunActive = false,
+  hasFailedStep = false,
+  ...actions
+}: PlanBlockProps) {
+  const [open, setOpen] = useState(initiallyOpen);
+  const stepCount = plan.steps.length;
+
+  return (
+    <section className="agent-card plan-block" aria-label="Plan">
+      <button
+        type="button"
+        className="agent-card__header"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        aria-controls={`plan-${plan.id}-steps`}
+      >
+        {open ? <FiChevronDown size={14} aria-hidden="true" /> : <FiChevronRight size={14} aria-hidden="true" />}
+        <span>Plan</span>
+        <span className="agent-card__count">{stepCount} {stepCount === 1 ? 'step' : 'steps'}</span>
+      </button>
+      {open && (
+        <div className="plan-block__steps" id={`plan-${plan.id}-steps`} role="list">
+          {plan.steps.map((step) => (
+            <PlanStepRow
+              key={step.id}
+              step={step}
+              isCurrent={step.index === currentStepIndex}
+            />
+          ))}
+        </div>
+      )}
+      {open && (
+        <ActionsRow
+          needsApproval={needsApproval}
+          isRunActive={isRunActive}
+          hasFailedStep={hasFailedStep}
+          {...actions}
+        />
+      )}
+    </section>
+  );
+}
diff --git a/dashboard/src/components/agentRun/PlanStepRow.tsx b/dashboard/src/components/agentRun/PlanStepRow.tsx
new file mode 100644
index 000000000..41c252c76
--- /dev/null
+++ b/dashboard/src/components/agentRun/PlanStepRow.tsx
@@ -0,0 +1,29 @@
+import { FiAlertCircle, FiCheckCircle, FiCircle, FiLoader, FiSkipForward, FiUserCheck } from 'react-icons/fi';
+import type { ReactNode } from 'react';
+import type { PlanStepStatus, PlanStepViewModel } from './types';
+import { PLAN_STATUS_LABELS } from './agentRunFormat';
+
+interface PlanStepRowProps {
+  step: PlanStepViewModel;
+  isCurrent: boolean;
+}
+
+const ICON_BY_STATUS: Record<PlanStepStatus, ReactNode> = {
+  pending: <FiCircle size={14} aria-hidden="true" />,
+  running: <FiLoader size={14} aria-hidden="true" className="animate-spin" />,
+  completed: <FiCheckCircle size={14} aria-hidden="true" />,
+  failed: <FiAlertCircle size={14} aria-hidden="true" />,
+  skipped: <FiSkipForward size={14} aria-hidden="true" />,
+  waiting_approval: <FiUserCheck size={14} aria-hidden="true" />,
+};
+
+export default function PlanStepRow({ step, isCurrent }: PlanStepRowProps) {
+  const className = `plan-step plan-step--${step.status}${isCurrent ? ' plan-step--current' : ''}`;
+  return (
+    <div className={className} role="listitem" aria-label={`Step ${step.index}: ${step.title} — ${PLAN_STATUS_LABELS[step.status]}`}>
+      <span className="plan-step__index" aria-hidden="true">{ICON_BY_STATUS[step.status] ?? step.index}</span>
+      <span className="plan-step__title">{step.title}</span>
+      <span className="plan-step__status">{PLAN_STATUS_LABELS[step.status]}</span>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/agentRun/StatusPill.test.tsx b/dashboard/src/components/agentRun/StatusPill.test.tsx
new file mode 100644
index 000000000..e26718977
--- /dev/null
+++ b/dashboard/src/components/agentRun/StatusPill.test.tsx
@@ -0,0 +1,21 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import StatusPill from './StatusPill';
+
+describe('StatusPill', () => {
+  it('applies the requested tone class', () => {
+    const html = renderToStaticMarkup(<StatusPill tone="success">Connected</StatusPill>);
+    expect(html).toContain('agent-pill--success');
+    expect(html).toContain('Connected');
+  });
+
+  it('renders a status dot when showDot is true', () => {
+    const html = renderToStaticMarkup(<StatusPill showDot tone="warning">Reconnecting</StatusPill>);
+    expect(html).toContain('agent-pill__dot');
+  });
+
+  it('omits the dot by default', () => {
+    const html = renderToStaticMarkup(<StatusPill>Idle</StatusPill>);
+    expect(html).not.toContain('agent-pill__dot');
+  });
+});
diff --git a/dashboard/src/components/agentRun/StatusPill.tsx b/dashboard/src/components/agentRun/StatusPill.tsx
new file mode 100644
index 000000000..f3d695bb2
--- /dev/null
+++ b/dashboard/src/components/agentRun/StatusPill.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+
+export type StatusPillTone = 'success' | 'warning' | 'danger' | 'accent' | 'neutral';
+
+interface StatusPillProps {
+  tone?: StatusPillTone;
+  showDot?: boolean;
+  icon?: ReactNode;
+  children: ReactNode;
+  ariaLabel?: string;
+  title?: string;
+}
+
+export default function StatusPill({
+  tone = 'neutral',
+  showDot = false,
+  icon,
+  children,
+  ariaLabel,
+  title,
+}: StatusPillProps) {
+  return (
+    <span
+      className={`agent-pill agent-pill--${tone}`}
+      role="status"
+      aria-label={ariaLabel}
+      title={title}
+    >
+      {showDot && <span className="agent-pill__dot" aria-hidden="true" />}
+      {icon != null && <span aria-hidden="true">{icon}</span>}
+      <span>{children}</span>
+    </span>
+  );
+}
diff --git a/dashboard/src/components/agentRun/TaskHeader.test.tsx b/dashboard/src/components/agentRun/TaskHeader.test.tsx
new file mode 100644
index 000000000..a90cb4115
--- /dev/null
+++ b/dashboard/src/components/agentRun/TaskHeader.test.tsx
@@ -0,0 +1,49 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import TaskHeader from './TaskHeader';
+
+describe('TaskHeader', () => {
+  it('renders title, status pill, started time and duration', () => {
+    const html = renderToStaticMarkup(
+      <TaskHeader
+        title="Optimizer tuning"
+        status="waiting_retry"
+        startedAt="2026-04-29T10:31:00.000Z"
+        durationMs={765_000}
+        stepCount={18}
+      />,
+    );
+    expect(html).toContain('Optimizer tuning');
+    expect(html).toContain('Waiting for retry');
+    expect(html).toContain('Started');
+    expect(html).toContain('12m 45s');
+    expect(html).toContain('18 steps');
+  });
+
+  it('hides edit button when no onTitleChange handler', () => {
+    const html = renderToStaticMarkup(
+      <TaskHeader
+        title="Run"
+        status="running"
+        startedAt="2026-04-29T10:00:00.000Z"
+        durationMs={1000}
+        stepCount={1}
+      />,
+    );
+    expect(html).not.toContain('Edit task title');
+  });
+
+  it('exposes edit button when onTitleChange provided', () => {
+    const html = renderToStaticMarkup(
+      <TaskHeader
+        title="Run"
+        status="running"
+        startedAt="2026-04-29T10:00:00.000Z"
+        durationMs={1000}
+        stepCount={1}
+        onTitleChange={() => undefined}
+      />,
+    );
+    expect(html).toContain('Edit task title');
+  });
+});
diff --git a/dashboard/src/components/agentRun/TaskHeader.tsx b/dashboard/src/components/agentRun/TaskHeader.tsx
new file mode 100644
index 000000000..64ca2a75b
--- /dev/null
+++ b/dashboard/src/components/agentRun/TaskHeader.tsx
@@ -0,0 +1,140 @@
+import { useState, type FormEvent, type ReactNode } from 'react';
+import { FiEdit2, FiMoreHorizontal, FiShare2 } from 'react-icons/fi';
+import StatusPill, { type StatusPillTone } from './StatusPill';
+import { RUN_STATUS_LABELS, formatDuration, formatTimeOfDay } from './agentRunFormat';
+import type { AgentRunStatus } from './types';
+
+interface TaskHeaderProps {
+  title: string;
+  status: AgentRunStatus;
+  startedAt: string;
+  durationMs: number;
+  stepCount: number;
+  onTitleChange?: (next: string) => void;
+  onShare?: () => void;
+  onMore?: () => void;
+  trailing?: ReactNode;
+}
+
+const STATUS_TONE: Record<AgentRunStatus, StatusPillTone> = {
+  idle: 'neutral',
+  running: 'accent',
+  waiting_approval: 'warning',
+  waiting_retry: 'warning',
+  paused: 'neutral',
+  completed: 'success',
+  failed: 'danger',
+  cancelled: 'neutral',
+};
+
+interface TitleEditorProps {
+  initial: string;
+  onSubmit: (next: string) => void;
+  onCancel: () => void;
+}
+
+function TitleEditor({ initial, onSubmit, onCancel }: TitleEditorProps) {
+  const [draft, setDraft] = useState(initial);
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const trimmed = draft.trim();
+    if (trimmed.length === 0) {
+      onCancel();
+      return;
+    }
+    onSubmit(trimmed);
+  };
+  return (
+    <form className="task-header__title-row" onSubmit={handleSubmit}>
+      <input
+        autoFocus
+        className="form-control"
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={handleSubmit}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        aria-label="Task title"
+      />
+    </form>
+  );
+}
+
+export default function TaskHeader({
+  title,
+  status,
+  startedAt,
+  durationMs,
+  stepCount,
+  onTitleChange,
+  onShare,
+  onMore,
+  trailing,
+}: TaskHeaderProps) {
+  const [editing, setEditing] = useState(false);
+  const startLabel = formatTimeOfDay(startedAt);
+  const durationLabel = formatDuration(durationMs);
+
+  return (
+    <header className="task-header" aria-label="Run summary">
+      <div>
+        {editing && onTitleChange != null ? (
+          <TitleEditor
+            initial={title}
+            onSubmit={(next) => {
+              onTitleChange(next);
+              setEditing(false);
+            }}
+            onCancel={() => setEditing(false)}
+          />
+        ) : (
+          <div className="task-header__title-row">
+            <h1 className="task-header__title">{title}</h1>
+            {onTitleChange != null && (
+              <button
+                type="button"
+                className="task-header__edit"
+                onClick={() => setEditing(true)}
+                aria-label="Edit task title"
+              >
+                <FiEdit2 size={14} aria-hidden="true" />
+              </button>
+            )}
+            <StatusPill tone={STATUS_TONE[status]} showDot>
+              {RUN_STATUS_LABELS[status]}
+            </StatusPill>
+          </div>
+        )}
+        <div className="task-header__subtitle">
+          {startLabel.length > 0 && <span>Started {startLabel}</span>}
+          <span className="task-header__subtitle-sep" aria-hidden="true">·</span>
+          <span>{durationLabel}</span>
+          <span className="task-header__subtitle-sep" aria-hidden="true">·</span>
+          <span>{stepCount} {stepCount === 1 ? 'step' : 'steps'}</span>
+        </div>
+      </div>
+      <div className="task-header__actions">
+        {trailing}
+        {onShare != null && (
+          <button type="button" className="agent-btn" onClick={onShare}>
+            <FiShare2 size={14} aria-hidden="true" />
+            <span>Share</span>
+          </button>
+        )}
+        {onMore != null && (
+          <button
+            type="button"
+            className="agent-btn"
+            onClick={onMore}
+            aria-label="More actions"
+          >
+            <FiMoreHorizontal size={16} aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/dashboard/src/components/agentRun/ToolCallRow.tsx b/dashboard/src/components/agentRun/ToolCallRow.tsx
new file mode 100644
index 000000000..529373176
--- /dev/null
+++ b/dashboard/src/components/agentRun/ToolCallRow.tsx
@@ -0,0 +1,95 @@
+import { useState, type ReactNode } from 'react';
+import {
+  FiAlertCircle,
+  FiChevronDown,
+  FiChevronRight,
+  FiCheckCircle,
+  FiCircle,
+  FiLoader,
+  FiSlash,
+  FiSkipForward,
+} from 'react-icons/fi';
+import type { ToolCallStatus, ToolCallViewModel } from './types';
+import { TOOL_STATUS_LABELS, formatDuration } from './agentRunFormat';
+
+interface ToolCallRowProps {
+  call: ToolCallViewModel;
+  onRetry?: (callId: string) => void;
+  onCancel?: (callId: string) => void;
+}
+
+const STATUS_ICON: Record<ToolCallStatus, ReactNode> = {
+  pending: <FiCircle size={14} aria-hidden="true" />,
+  running: <FiLoader size={14} aria-hidden="true" className="animate-spin" />,
+  success: <FiCheckCircle size={14} aria-hidden="true" />,
+  failed: <FiAlertCircle size={14} aria-hidden="true" />,
+  skipped: <FiSkipForward size={14} aria-hidden="true" />,
+  cancelled: <FiSlash size={14} aria-hidden="true" />,
+};
+
+const STATUS_TONE: Record<ToolCallStatus, string> = {
+  pending: 'tool-row__icon--skipped',
+  running: 'tool-row__icon--running',
+  success: 'tool-row__icon--success',
+  failed: 'tool-row__icon--failed',
+  skipped: 'tool-row__icon--skipped',
+  cancelled: 'tool-row__icon--skipped',
+};
+
+function ToolDetails({ call, onRetry, onCancel }: ToolCallRowProps) {
+  return (
+    <div className="tool-row__details" role="region" aria-label="Tool call details">
+      {call.inputPreview != null && (
+        <div className="tool-row__details-block">
+          <span>Input</span>
+          <pre>{call.inputPreview}</pre>
+        </div>
+      )}
+      {call.outputPreview != null && (
+        <div className="tool-row__details-block">
+          <span>Output</span>
+          <pre>{call.outputPreview}</pre>
+        </div>
+      )}
+      {call.errorMessage != null && (
+        <div className="tool-row__details-block">
+          <span>Error{call.errorCode != null ? ` (${call.errorCode})` : ''}</span>
+          <pre>{call.errorMessage}</pre>
+        </div>
+      )}
+      <div className="plan-block__actions">
+        {call.status === 'failed' && onRetry != null && (
+          <button type="button" className="agent-btn" onClick={() => onRetry(call.id)}>Retry</button>
+        )}
+        {call.status === 'running' && onCancel != null && (
+          <button type="button" className="agent-btn agent-btn--danger" onClick={() => onCancel(call.id)}>Cancel</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function ToolCallRow({ call, onRetry, onCancel }: ToolCallRowProps) {
+  const [open, setOpen] = useState(false);
+  const duration = call.durationMs != null ? formatDuration(call.durationMs) : '—';
+  return (
+    <>
+      <button
+        type="button"
+        className="tool-row"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+      >
+        <span className={`tool-row__icon ${STATUS_TONE[call.status]}`}>{STATUS_ICON[call.status]}</span>
+        <span className="tool-row__name">{call.toolName}</span>
+        <span className="tool-row__target">{call.displayTarget ?? ''}</span>
+        <span className="tool-row__duration">{duration}</span>
+        <span className="tool-row__status">{TOOL_STATUS_LABELS[call.status]}</span>
+        <span className="tool-row__chevron" aria-hidden="true">
+          {open ? <FiChevronDown size={14} /> : <FiChevronRight size={14} />}
+        </span>
+      </button>
+      {open && <ToolDetails call={call} onRetry={onRetry} onCancel={onCancel} />}
+    </>
+  );
+}
diff --git a/dashboard/src/components/agentRun/ToolCallTimeline.test.tsx b/dashboard/src/components/agentRun/ToolCallTimeline.test.tsx
new file mode 100644
index 000000000..9198513ac
--- /dev/null
+++ b/dashboard/src/components/agentRun/ToolCallTimeline.test.tsx
@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import ToolCallTimeline from './ToolCallTimeline';
+import type { ToolCallViewModel } from './types';
+
+const calls: ToolCallViewModel[] = [
+  {
+    id: 't1',
+    runId: 'r',
+    toolName: 'read_file',
+    displayTarget: 'optimizer_config.yaml',
+    status: 'success',
+    durationMs: 180,
+  },
+  {
+    id: 't2',
+    runId: 'r',
+    toolName: 'run_command',
+    displayTarget: 'python optimizer.py --config optimizer_config.yaml',
+    status: 'failed',
+    durationMs: 12_400,
+    errorCode: 'subprocess.failed',
+    errorMessage: 'optimizer crashed',
+  },
+  {
+    id: 't3',
+    runId: 'r',
+    toolName: 'write_file',
+    displayTarget: 'optimizer_report.md',
+    status: 'skipped',
+  },
+];
+
+describe('ToolCallTimeline', () => {
+  it('renders the call count and tool names', () => {
+    const html = renderToStaticMarkup(<ToolCallTimeline calls={calls} />);
+    expect(html).toContain('Tool calls');
+    expect(html).toContain('read_file');
+    expect(html).toContain('run_command');
+    expect(html).toContain('write_file');
+  });
+
+  it('renders durations and status labels', () => {
+    const html = renderToStaticMarkup(<ToolCallTimeline calls={calls} />);
+    expect(html).toContain('180ms');
+    expect(html).toContain('12.4s');
+    expect(html).toContain('Success');
+    expect(html).toContain('Failed');
+    expect(html).toContain('Skipped');
+  });
+});
diff --git a/dashboard/src/components/agentRun/ToolCallTimeline.tsx b/dashboard/src/components/agentRun/ToolCallTimeline.tsx
new file mode 100644
index 000000000..1b0cbeb43
--- /dev/null
+++ b/dashboard/src/components/agentRun/ToolCallTimeline.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { FiChevronDown, FiChevronRight, FiTool } from 'react-icons/fi';
+import type { ToolCallViewModel } from './types';
+import ToolCallRow from './ToolCallRow';
+
+interface ToolCallTimelineProps {
+  calls: ToolCallViewModel[];
+  initiallyOpen?: boolean;
+  onRetry?: (callId: string) => void;
+  onCancel?: (callId: string) => void;
+}
+
+export default function ToolCallTimeline({
+  calls,
+  initiallyOpen = true,
+  onRetry,
+  onCancel,
+}: ToolCallTimelineProps) {
+  const [open, setOpen] = useState(initiallyOpen);
+
+  return (
+    <section className="agent-card tool-timeline-card" aria-label="Tool calls">
+      <button
+        type="button"
+        className="agent-card__header"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+      >
+        {open ? <FiChevronDown size={14} aria-hidden="true" /> : <FiChevronRight size={14} aria-hidden="true" />}
+        <FiTool size={14} aria-hidden="true" />
+        <span>Tool calls</span>
+        <span className="agent-card__count">{calls.length}</span>
+      </button>
+      {open && (
+        <div className="tool-timeline" role="list">
+          {calls.map((call) => (
+            <ToolCallRow key={call.id} call={call} onRetry={onRetry} onCancel={onCancel} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/dashboard/src/components/agentRun/agentRunFormat.test.ts b/dashboard/src/components/agentRun/agentRunFormat.test.ts
new file mode 100644
index 000000000..95dff237e
--- /dev/null
+++ b/dashboard/src/components/agentRun/agentRunFormat.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { formatCountdown, formatDuration, formatTimeOfDay } from './agentRunFormat';
+
+describe('formatDuration', () => {
+  it('renders milliseconds for sub-second values', () => {
+    expect(formatDuration(180)).toBe('180ms');
+  });
+
+  it('renders seconds with one decimal under a minute', () => {
+    expect(formatDuration(12_400)).toBe('12.4s');
+  });
+
+  it('rounds whole seconds without trailing .0', () => {
+    expect(formatDuration(7_000)).toBe('7s');
+  });
+
+  it('renders minutes and seconds for longer durations', () => {
+    expect(formatDuration(125_000)).toBe('2m 05s');
+  });
+
+  it('treats negative durations as zero', () => {
+    expect(formatDuration(-1)).toBe('0s');
+  });
+});
+
+describe('formatCountdown', () => {
+  it('zero pads minutes and seconds', () => {
+    expect(formatCountdown(75)).toBe('01:15');
+  });
+
+  it('clamps negative values', () => {
+    expect(formatCountdown(-5)).toBe('00:00');
+  });
+});
+
+describe('formatTimeOfDay', () => {
+  it('returns empty string when iso is null', () => {
+    expect(formatTimeOfDay(null)).toBe('');
+  });
+
+  it('returns the original string when invalid', () => {
+    expect(formatTimeOfDay('not a date')).toBe('not a date');
+  });
+});
diff --git a/dashboard/src/components/agentRun/agentRunFormat.ts b/dashboard/src/components/agentRun/agentRunFormat.ts
new file mode 100644
index 000000000..df70866d2
--- /dev/null
+++ b/dashboard/src/components/agentRun/agentRunFormat.ts
@@ -0,0 +1,65 @@
+import type { AgentRunStatus, PlanStepStatus, ToolCallStatus } from './types';
+
+export function formatDuration(durationMs: number): string {
+  if (durationMs < 0) {
+    return '0s';
+  }
+  if (durationMs < 1000) {
+    return `${Math.round(durationMs)}ms`;
+  }
+  const totalSeconds = Math.floor(durationMs / 1000);
+  if (totalSeconds < 60) {
+    const seconds = (durationMs / 1000).toFixed(1).replace(/\.0$/, '');
+    return `${seconds}s`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${String(seconds).padStart(2, '0')}s`;
+}
+
+export function formatTimeOfDay(iso: string | null | undefined, locale = 'en-US'): string {
+  if (iso == null) {
+    return '';
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
+}
+
+export const PLAN_STATUS_LABELS: Record<PlanStepStatus, string> = {
+  pending: 'Pending',
+  running: 'In progress',
+  completed: 'Completed',
+  failed: 'Failed',
+  skipped: 'Skipped',
+  waiting_approval: 'Waiting approval',
+};
+
+export const TOOL_STATUS_LABELS: Record<ToolCallStatus, string> = {
+  pending: 'Pending',
+  running: 'Running',
+  success: 'Success',
+  failed: 'Failed',
+  skipped: 'Skipped',
+  cancelled: 'Cancelled',
+};
+
+export const RUN_STATUS_LABELS: Record<AgentRunStatus, string> = {
+  idle: 'Idle',
+  running: 'Running',
+  waiting_approval: 'Needs approval',
+  waiting_retry: 'Waiting for retry',
+  paused: 'Paused',
+  completed: 'Completed',
+  failed: 'Failed',
+  cancelled: 'Cancelled',
+};
+
+export function formatCountdown(totalSeconds: number): string {
+  const safe = Math.max(0, Math.floor(totalSeconds));
+  const minutes = Math.floor(safe / 60);
+  const seconds = safe % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
diff --git a/dashboard/src/components/agentRun/normalizeRunEvents.test.ts b/dashboard/src/components/agentRun/normalizeRunEvents.test.ts
new file mode 100644
index 000000000..8a02e0a4d
--- /dev/null
+++ b/dashboard/src/components/agentRun/normalizeRunEvents.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeChatMessages } from './normalizeRunEvents';
+import type { ChatMessage } from '../chat/chatRuntimeTypes';
+
+function chat(message: Partial<ChatMessage> & Pick<ChatMessage, 'id' | 'role' | 'content'>): ChatMessage {
+  return {
+    model: null,
+    tier: null,
+    skill: null,
+    reasoning: null,
+    attachments: [],
+    persisted: true,
+    ...message,
+  } as ChatMessage;
+}
+
+describe('normalizeChatMessages', () => {
+  it('emits user and assistant items in order', () => {
+    const out = normalizeChatMessages(
+      [
+        chat({ id: 'u1', role: 'user', content: 'hello' }),
+        chat({ id: 'a1', role: 'assistant', content: 'world' }),
+      ],
+      'run-1',
+    );
+    expect(out.map((item) => item.type)).toEqual(['user_message', 'assistant_message']);
+  });
+
+  it('extracts tool calls from assistant markers', () => {
+    const out = normalizeChatMessages(
+      [
+        chat({ id: 'a1', role: 'assistant', content: '[Tool: read_file optimizer.yaml][Result: ok]' }),
+      ],
+      'run-1',
+    );
+    expect(out).toHaveLength(2);
+    expect(out[1].type).toBe('tool_calls');
+    if (out[1].type === 'tool_calls') {
+      expect(out[1].calls).toHaveLength(1);
+      expect(out[1].calls[0].toolName).toBe('read_file');
+      expect(out[1].calls[0].displayTarget).toBe('optimizer.yaml');
+      expect(out[1].calls[0].status).toBe('success');
+    }
+  });
+
+  it('marks tool calls failed when result mentions error', () => {
+    const out = normalizeChatMessages(
+      [chat({ id: 'a1', role: 'assistant', content: '[Tool: run_command python][Result: exit 1 error]' })],
+      'run-1',
+    );
+    if (out[1].type === 'tool_calls') {
+      expect(out[1].calls[0].status).toBe('failed');
+    }
+  });
+
+  it('omits tool_calls item when no markers present', () => {
+    const out = normalizeChatMessages(
+      [chat({ id: 'a1', role: 'assistant', content: 'plain assistant reply' })],
+      'run-1',
+    );
+    expect(out).toHaveLength(1);
+    expect(out[0].type).toBe('assistant_message');
+  });
+});
diff --git a/dashboard/src/components/agentRun/normalizeRunEvents.ts b/dashboard/src/components/agentRun/normalizeRunEvents.ts
new file mode 100644
index 000000000..2ac1f0073
--- /dev/null
+++ b/dashboard/src/components/agentRun/normalizeRunEvents.ts
@@ -0,0 +1,83 @@
+import type { ChatMessage } from '../chat/chatRuntimeTypes';
+import type {
+  AgentThreadItem,
+  AssistantMessageViewModel,
+  ToolCallStatus,
+  ToolCallViewModel,
+  UserMessageViewModel,
+} from './types';
+
+/**
+ * Convert chat history into a thread of harness items. The current backend
+ * only emits user / assistant messages, optionally embedding `[Tool: name]`
+ * markers. This adapter shields UI components from those raw shapes.
+ */
+
+interface ParsedToolMarker {
+  name: string;
+  target: string;
+  status: ToolCallStatus;
+}
+
+const TOOL_PATTERN = /\[Tool:\s*([^\]]+)]\s*(\[Result:\s*([^\]]+)])?/g;
+
+function parseToolMarkers(content: string): ParsedToolMarker[] {
+  const out: ParsedToolMarker[] = [];
+  let match: RegExpExecArray | null = TOOL_PATTERN.exec(content);
+  while (match !== null) {
+    const fullName = match[1].trim();
+    const result = match[3]?.trim();
+    const [name, ...rest] = fullName.split(/\s+/);
+    out.push({
+      name,
+      target: rest.join(' '),
+      status: result == null ? 'pending' : result.toLowerCase().includes('error') ? 'failed' : 'success',
+    });
+    match = TOOL_PATTERN.exec(content);
+  }
+  return out;
+}
+
+function buildToolCallsFromMarkers(messageId: string, runId: string, content: string): ToolCallViewModel[] {
+  return parseToolMarkers(content).map((marker, index) => ({
+    id: `${messageId}::tool::${index}`,
+    runId,
+    toolName: marker.name,
+    displayTarget: marker.target.length > 0 ? marker.target : undefined,
+    status: marker.status,
+  }));
+}
+
+function toUserMessage(message: ChatMessage): UserMessageViewModel {
+  return {
+    id: message.id,
+    text: message.content,
+    createdAt: new Date().toISOString(),
+  };
+}
+
+function toAssistantMessage(message: ChatMessage): AssistantMessageViewModel {
+  return {
+    id: message.id,
+    text: message.content,
+    createdAt: new Date().toISOString(),
+    modelLabel: message.model ?? undefined,
+    tierLabel: message.tier ?? undefined,
+  };
+}
+
+export function normalizeChatMessages(messages: ChatMessage[], runId: string): AgentThreadItem[] {
+  const items: AgentThreadItem[] = [];
+  messages.forEach((message) => {
+    if (message.role === 'user') {
+      items.push({ type: 'user_message', message: toUserMessage(message) });
+      return;
+    }
+    items.push({ type: 'assistant_message', message: toAssistantMessage(message) });
+    const calls = buildToolCallsFromMarkers(message.id, runId, message.content);
+    if (calls.length > 0) {
+      items.push({ type: 'tool_calls', calls });
+    }
+  });
+  return items;
+}
diff --git a/dashboard/src/components/agentRun/sampleAgentRun.ts b/dashboard/src/components/agentRun/sampleAgentRun.ts
new file mode 100644
index 000000000..85d8ea8e9
--- /dev/null
+++ b/dashboard/src/components/agentRun/sampleAgentRun.ts
@@ -0,0 +1,83 @@
+/**
+ * Reference fixtures used by the harness demo surfaces and component tests.
+ * They mirror the example agent run from the redesign spec
+ * (golemcore_harness_ui_redesign_spec.md §23).
+ */
+import type { IncidentViewModel, PlanViewModel, ToolCallViewModel } from './types';
+
+export const SAMPLE_PLAN: PlanViewModel = {
+  id: 'sample-plan',
+  runId: 'sample-run',
+  version: 1,
+  updatedAt: '2026-04-29T10:31:00.000Z',
+  steps: [
+    { id: 's1', index: 1, title: 'Inspect current optimizer config', status: 'completed', relatedToolCallIds: ['t1'] },
+    { id: 's2', index: 2, title: 'Update switching logic (net uplift > 0)', status: 'completed', relatedToolCallIds: ['t2'] },
+    { id: 's3', index: 3, title: 'Run optimizer backtest (30d)', status: 'running', relatedToolCallIds: ['t3'] },
+    { id: 's4', index: 4, title: 'Validate results and compare', status: 'pending', relatedToolCallIds: [] },
+    { id: 's5', index: 5, title: 'Save report and summary', status: 'pending', relatedToolCallIds: [] },
+  ],
+};
+
+export const SAMPLE_TOOL_CALLS: ToolCallViewModel[] = [
+  {
+    id: 't1',
+    runId: 'sample-run',
+    planStepId: 's1',
+    toolName: 'read_file',
+    displayTarget: 'optimizer_config.yaml',
+    status: 'success',
+    durationMs: 180,
+    inputPreview: 'path: optimizer_config.yaml',
+    outputPreview: 'switching:\n  threshold: 0.0\n  source: legacy',
+  },
+  {
+    id: 't2',
+    runId: 'sample-run',
+    planStepId: 's2',
+    toolName: 'update_file',
+    displayTarget: 'optimizer_config.yaml',
+    status: 'success',
+    durationMs: 240,
+    inputPreview: 'apply diff: switching.threshold = 0.05',
+    outputPreview: 'updated 1 file',
+  },
+  {
+    id: 't3',
+    runId: 'sample-run',
+    planStepId: 's3',
+    toolName: 'run_command',
+    displayTarget: 'python optimizer.py --config optimizer_config.yaml',
+    status: 'failed',
+    durationMs: 12_400,
+    errorCode: 'subprocess.failed',
+    errorMessage: 'Traceback (most recent call last):\n  File "optimizer.py", line 42\n    raise RuntimeError("provider unavailable")',
+    inputPreview: 'cwd: ./optimizer\ncmd: python optimizer.py --config optimizer_config.yaml',
+  },
+  {
+    id: 't4',
+    runId: 'sample-run',
+    planStepId: 's4',
+    toolName: 'write_file',
+    displayTarget: 'optimizer_report.md',
+    status: 'skipped',
+  },
+];
+
+export const SAMPLE_INCIDENT: IncidentViewModel = {
+  id: 'inc-1',
+  runId: 'sample-run',
+  severity: 'error',
+  title: 'LLM provider is temporarily unavailable',
+  message: 'Your task has been saved and will retry automatically in 5 minutes.',
+  code: 'llm.provider.circuit.open',
+  createdAt: '2026-04-29T10:43:00.000Z',
+  retryCountdownSeconds: 299,
+  taskSaved: true,
+  actions: [
+    { id: 'retry_now', label: 'Retry now', kind: 'primary' },
+    { id: 'switch_model', label: 'Switch model', kind: 'secondary' },
+    { id: 'continue_manually', label: 'Continue manually', kind: 'secondary' },
+    { id: 'open_logs', label: 'Open logs', kind: 'secondary' },
+  ],
+};
diff --git a/dashboard/src/components/agentRun/types.ts b/dashboard/src/components/agentRun/types.ts
new file mode 100644
index 000000000..56b94d8e9
--- /dev/null
+++ b/dashboard/src/components/agentRun/types.ts
@@ -0,0 +1,177 @@
+/**
+ * Agent run view models. These types isolate UI components from raw backend
+ * payloads — adapters in this module normalize websocket events and chat
+ * history into discriminated unions consumable by the harness components.
+ *
+ * Spec: golemcore_harness_ui_redesign_spec.md §17.
+ */
+
+export type AgentRunStatus =
+  | 'idle'
+  | 'running'
+  | 'waiting_approval'
+  | 'waiting_retry'
+  | 'paused'
+  | 'completed'
+  | 'failed'
+  | 'cancelled';
+
+export type AgentRunMode = 'plan_on' | 'plan_off';
+
+export interface ContextUsageViewModel {
+  usedTokens: number;
+  maxTokens: number;
+  percentage: number;
+  state: 'normal' | 'warning' | 'critical';
+}
+
+export interface ToolStatsViewModel {
+  totalCalls: number;
+  successful: number;
+  failed: number;
+  skipped: number;
+}
+
+export interface AgentRunViewModel {
+  id: string;
+  sessionId: string;
+  title: string;
+  status: AgentRunStatus;
+  mode: AgentRunMode;
+  modelLabel: string;
+  tierLabel: string;
+  startedAt: string;
+  updatedAt: string;
+  durationMs: number;
+  stepCount: number;
+  currentStepIndex?: number;
+  nextStepTitle?: string;
+  context?: ContextUsageViewModel;
+  toolStats?: ToolStatsViewModel;
+}
+
+export type PlanStepStatus =
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed'
+  | 'skipped'
+  | 'waiting_approval';
+
+export interface PlanStepViewModel {
+  id: string;
+  index: number;
+  title: string;
+  description?: string;
+  status: PlanStepStatus;
+  startedAt?: string;
+  completedAt?: string;
+  relatedToolCallIds: string[];
+  errorCode?: string;
+}
+
+export interface PlanViewModel {
+  id: string;
+  runId: string;
+  version: number;
+  updatedAt: string;
+  steps: PlanStepViewModel[];
+}
+
+export type ToolCallStatus =
+  | 'pending'
+  | 'running'
+  | 'success'
+  | 'failed'
+  | 'skipped'
+  | 'cancelled';
+
+export interface ToolCallViewModel {
+  id: string;
+  runId: string;
+  planStepId?: string;
+  toolName: string;
+  displayTarget?: string;
+  status: ToolCallStatus;
+  startedAt?: string;
+  completedAt?: string;
+  durationMs?: number;
+  inputPreview?: string;
+  outputPreview?: string;
+  errorCode?: string;
+  errorMessage?: string;
+  retryCount?: number;
+}
+
+export type IncidentSeverity = 'info' | 'warning' | 'error' | 'critical';
+
+export type IncidentActionId =
+  | 'retry_now'
+  | 'switch_model'
+  | 'continue_manually'
+  | 'open_logs'
+  | 'cancel_retry'
+  | 'export_debug_bundle'
+  | 'pause_task'
+  | 'report_issue';
+
+export type IncidentActionKind = 'primary' | 'secondary' | 'danger';
+
+export interface IncidentActionViewModel {
+  id: IncidentActionId;
+  label: string;
+  kind: IncidentActionKind;
+}
+
+export interface IncidentViewModel {
+  id: string;
+  runId: string;
+  severity: IncidentSeverity;
+  title: string;
+  message: string;
+  code?: string;
+  createdAt: string;
+  retryAt?: string;
+  retryCountdownSeconds?: number;
+  taskSaved: boolean;
+  actions: IncidentActionViewModel[];
+}
+
+export interface UserMessageViewModel {
+  id: string;
+  text: string;
+  createdAt: string;
+}
+
+export interface AssistantMessageViewModel {
+  id: string;
+  text: string;
+  createdAt: string;
+  modelLabel?: string;
+  tierLabel?: string;
+}
+
+export interface ArtifactViewModel {
+  id: string;
+  name: string;
+  description?: string;
+  href?: string;
+  mimeType?: string;
+}
+
+export interface ApprovalRequestViewModel {
+  id: string;
+  title: string;
+  description: string;
+  prompt: string;
+  createdAt: string;
+}
+
+export type AgentThreadItem =
+  | { type: 'user_message'; message: UserMessageViewModel }
+  | { type: 'assistant_message'; message: AssistantMessageViewModel }
+  | { type: 'plan'; plan: PlanViewModel }
+  | { type: 'tool_calls'; calls: ToolCallViewModel[] }
+  | { type: 'incident'; incident: IncidentViewModel }
+  | { type: 'artifact'; artifact: ArtifactViewModel }
+  | { type: 'approval_request'; approval: ApprovalRequestViewModel };
diff --git a/dashboard/src/components/commandPalette/CommandPalette.tsx b/dashboard/src/components/commandPalette/CommandPalette.tsx
new file mode 100644
index 000000000..27cfbe5f6
--- /dev/null
+++ b/dashboard/src/components/commandPalette/CommandPalette.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FiSearch } from 'react-icons/fi';
+import { useCommandPaletteStore } from '../../store/commandPaletteStore';
+import { useChatSessionStore } from '../../store/chatSessionStore';
+import { useInspectorStore } from '../../store/inspectorStore';
+import { useCreateSession } from '../../hooks/useSessions';
+import { createUuid } from '../../utils/uuid';
+import { buildCommandRegistry, GROUP_LABELS, type CommandGroup } from './commandRegistry';
+import { filterCommands, type ScoredCommand } from './fuzzyMatch';
+
+function groupResults(results: ScoredCommand[]): Array<{ group: CommandGroup; entries: ScoredCommand[] }> {
+  const groups = new Map<CommandGroup, ScoredCommand[]>();
+  results.forEach((entry) => {
+    const list = groups.get(entry.command.group) ?? [];
+    list.push(entry);
+    groups.set(entry.command.group, list);
+  });
+  return Array.from(groups.entries()).map(([group, entries]) => ({ group, entries }));
+}
+
+export default function CommandPalette() {
+  const open = useCommandPaletteStore((s) => s.open);
+  const togglePalette = useCommandPaletteStore((s) => s.togglePalette);
+  const closePalette = useCommandPaletteStore((s) => s.closePalette);
+  const navigate = useNavigate();
+  const toggleInspector = useInspectorStore((s) => s.togglePanel);
+  const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
+  const clientInstanceId = useChatSessionStore((s) => s.clientInstanceId);
+  const createSession = useCreateSession();
+
+  const [query, setQuery] = useState('');
+  const [highlight, setHighlight] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const startNewSession = (): void => {
+    const next = createUuid();
+    setActiveSessionId(next);
+    navigate('/');
+    createSession.mutate({
+      channelType: 'web',
+      clientInstanceId,
+      conversationKey: next,
+      activate: true,
+    });
+  };
+
+  const commands = useMemo(
+    () => buildCommandRegistry({
+      navigate,
+      toggleInspector,
+      togglePalette,
+      startNewSession,
+    }),
+    // navigate, toggleInspector, togglePalette are stable; we accept the ref pattern.
+    // startNewSession captures createSession.mutate which is stable per useMutation contract.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [navigate, toggleInspector, togglePalette, clientInstanceId],
+  );
+
+  const results = useMemo(() => filterCommands(commands, query), [commands, query]);
+  const grouped = useMemo(() => groupResults(results), [results]);
+  const flatResults = useMemo(() => grouped.flatMap((g) => g.entries), [grouped]);
+
+  // Focus the search field every time the palette opens so the keyboard is ready immediately.
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setHighlight(0);
+      window.setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [open]);
+
+  // Reset the highlight whenever the result list shrinks.
+  useEffect(() => {
+    if (highlight >= flatResults.length) {
+      setHighlight(0);
+    }
+  }, [flatResults.length, highlight]);
+
+  if (!open) {
+    return null;
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closePalette();
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setHighlight((prev) => Math.min(prev + 1, Math.max(0, flatResults.length - 1)));
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setHighlight((prev) => Math.max(0, prev - 1));
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const target = flatResults[highlight];
+      if (target != null) {
+        target.command.run();
+      }
+    }
+  };
+
+  return (
+    <div className="command-palette" role="dialog" aria-modal="true" aria-label="Command palette">
+      <button
+        type="button"
+        className="command-palette__backdrop"
+        aria-label="Close command palette"
+        onClick={closePalette}
+      />
+      <div className="command-palette__sheet">
+        <div className="command-palette__search">
+          <FiSearch size={16} aria-hidden="true" />
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Type a command…"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={handleKeyDown}
+            aria-label="Command search"
+          />
+          <span className="kbd" aria-hidden="true">esc</span>
+        </div>
+        {flatResults.length === 0 ? (
+          <div className="command-palette__empty">No commands match “{query}”.</div>
+        ) : (
+          grouped.map(({ group, entries }) => (
+            <div key={group} className="command-palette__group">
+              <div className="command-palette__group-label">{GROUP_LABELS[group]}</div>
+              {entries.map((entry) => {
+                const flatIndex = flatResults.indexOf(entry);
+                const isActive = flatIndex === highlight;
+                return (
+                  <button
+                    key={entry.command.id}
+                    type="button"
+                    className={`command-palette__item${isActive ? ' command-palette__item--active' : ''}`}
+                    onClick={() => entry.command.run()}
+                    onMouseEnter={() => setHighlight(flatIndex)}
+                  >
+                    <span>{entry.command.label}</span>
+                    {entry.command.shortcut != null && (
+                      <span className="kbd" aria-hidden="true">{entry.command.shortcut}</span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/commandPalette/commandRegistry.ts b/dashboard/src/components/commandPalette/commandRegistry.ts
new file mode 100644
index 000000000..f09d4a728
--- /dev/null
+++ b/dashboard/src/components/commandPalette/commandRegistry.ts
@@ -0,0 +1,118 @@
+import type { NavigateFunction } from 'react-router-dom';
+
+export type CommandGroup = 'navigation' | 'agent' | 'view' | 'system';
+
+export interface CommandDefinition {
+  id: string;
+  label: string;
+  description?: string;
+  group: CommandGroup;
+  shortcut?: string;
+  run: () => void;
+}
+
+export interface CommandContext {
+  navigate: NavigateFunction;
+  toggleInspector: () => void;
+  togglePalette: () => void;
+  startNewSession: () => void;
+}
+
+export const GROUP_LABELS: Record<CommandGroup, string> = {
+  navigation: 'Navigation',
+  agent: 'Agent',
+  view: 'View',
+  system: 'System',
+};
+
+export function buildCommandRegistry(ctx: CommandContext): CommandDefinition[] {
+  return [
+    {
+      id: 'chat.new',
+      label: 'New chat',
+      description: 'Start a fresh chat session',
+      group: 'agent',
+      shortcut: '⌘N',
+      run: () => {
+        ctx.startNewSession();
+        ctx.togglePalette();
+      },
+    },
+    {
+      id: 'nav.chat',
+      label: 'Open chat',
+      group: 'navigation',
+      run: () => { ctx.navigate('/'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.sessions',
+      label: 'Search sessions',
+      group: 'navigation',
+      run: () => { ctx.navigate('/sessions'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.logs',
+      label: 'Open logs',
+      group: 'navigation',
+      run: () => { ctx.navigate('/logs'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.diagnostics',
+      label: 'Open diagnostics',
+      group: 'navigation',
+      run: () => { ctx.navigate('/diagnostics'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.scheduler',
+      label: 'Open scheduler',
+      group: 'navigation',
+      run: () => { ctx.navigate('/scheduler'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.skills',
+      label: 'Open skills',
+      group: 'navigation',
+      run: () => { ctx.navigate('/skills'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.prompts',
+      label: 'Open prompts',
+      group: 'navigation',
+      run: () => { ctx.navigate('/prompts'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.settings',
+      label: 'Open settings',
+      group: 'navigation',
+      run: () => { ctx.navigate('/settings'); ctx.togglePalette(); },
+    },
+    {
+      id: 'nav.workspace',
+      label: 'Open workspace',
+      group: 'navigation',
+      run: () => { ctx.navigate('/workspace'); ctx.togglePalette(); },
+    },
+    {
+      id: 'view.toggleInspector',
+      label: 'Toggle inspector panel',
+      group: 'view',
+      shortcut: '⌘I',
+      run: () => { ctx.toggleInspector(); ctx.togglePalette(); },
+    },
+    {
+      id: 'system.scheduler.create',
+      label: 'Create scheduler task',
+      group: 'system',
+      run: () => { ctx.navigate('/scheduler?create=1'); ctx.togglePalette(); },
+    },
+    {
+      id: 'system.exportSession',
+      label: 'Export session as JSON',
+      group: 'system',
+      run: () => {
+        ctx.togglePalette();
+        window.dispatchEvent(new CustomEvent('harness:export-session'));
+      },
+    },
+  ];
+}
diff --git a/dashboard/src/components/commandPalette/fuzzyMatch.test.ts b/dashboard/src/components/commandPalette/fuzzyMatch.test.ts
new file mode 100644
index 000000000..cfdcfbdce
--- /dev/null
+++ b/dashboard/src/components/commandPalette/fuzzyMatch.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { filterCommands } from './fuzzyMatch';
+import type { CommandDefinition } from './commandRegistry';
+
+const commands: CommandDefinition[] = [
+  { id: 'a', label: 'New chat', group: 'agent', run: () => undefined },
+  { id: 'b', label: 'Open logs', group: 'navigation', run: () => undefined },
+  { id: 'c', label: 'Open diagnostics', group: 'navigation', run: () => undefined },
+  { id: 'd', label: 'Open settings', group: 'navigation', run: () => undefined },
+];
+
+describe('filterCommands', () => {
+  it('returns all commands when query is empty', () => {
+    expect(filterCommands(commands, '')).toHaveLength(commands.length);
+  });
+
+  it('prefers prefix matches over subsequence matches', () => {
+    const ranked = filterCommands(commands, 'open');
+    expect(ranked.map((entry) => entry.command.id).slice(0, 3)).toEqual(['b', 'c', 'd']);
+  });
+
+  it('returns subsequence matches when no direct match', () => {
+    const ranked = filterCommands(commands, 'os');
+    expect(ranked.find((entry) => entry.command.id === 'b')).toBeDefined();
+  });
+
+  it('returns no match when characters cannot align', () => {
+    expect(filterCommands(commands, 'xyz')).toHaveLength(0);
+  });
+});
diff --git a/dashboard/src/components/commandPalette/fuzzyMatch.ts b/dashboard/src/components/commandPalette/fuzzyMatch.ts
new file mode 100644
index 000000000..1a6d68aa5
--- /dev/null
+++ b/dashboard/src/components/commandPalette/fuzzyMatch.ts
@@ -0,0 +1,43 @@
+import type { CommandDefinition } from './commandRegistry';
+
+export interface ScoredCommand {
+  command: CommandDefinition;
+  score: number;
+}
+
+function scoreLabel(label: string, query: string): number {
+  if (query.length === 0) {
+    return 1;
+  }
+  const lowerLabel = label.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  if (lowerLabel === lowerQuery) {
+    return 1000;
+  }
+  if (lowerLabel.startsWith(lowerQuery)) {
+    return 800;
+  }
+  if (lowerLabel.includes(lowerQuery)) {
+    return 600;
+  }
+  // Subsequence bonus: every query char must appear in order in the label.
+  let labelIndex = 0;
+  let matched = 0;
+  for (const ch of lowerQuery) {
+    const found = lowerLabel.indexOf(ch, labelIndex);
+    if (found === -1) {
+      return 0;
+    }
+    matched += 1;
+    labelIndex = found + 1;
+  }
+  return 100 + matched * 5;
+}
+
+export function filterCommands(commands: CommandDefinition[], query: string): ScoredCommand[] {
+  const trimmed = query.trim();
+  return commands
+    .map((command) => ({ command, score: scoreLabel(command.label, trimmed) }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => b.score - a.score);
+}
diff --git a/dashboard/src/components/commandPalette/useCommandPaletteShortcut.ts b/dashboard/src/components/commandPalette/useCommandPaletteShortcut.ts
new file mode 100644
index 000000000..3e0ea54d0
--- /dev/null
+++ b/dashboard/src/components/commandPalette/useCommandPaletteShortcut.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useCommandPaletteStore } from '../../store/commandPaletteStore';
+
+function isPaletteShortcut(event: KeyboardEvent): boolean {
+  const key = event.key.toLowerCase();
+  return (event.metaKey || event.ctrlKey) && key === 'k';
+}
+
+export function useCommandPaletteShortcut(): void {
+  const togglePalette = useCommandPaletteStore((s) => s.togglePalette);
+
+  // Bind a single window-level listener that opens/closes the palette on Cmd/Ctrl+K.
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (!isPaletteShortcut(event)) {
+        return;
+      }
+      event.preventDefault();
+      togglePalette();
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [togglePalette]);
+}
diff --git a/dashboard/src/components/commandPalette/useSessionExport.ts b/dashboard/src/components/commandPalette/useSessionExport.ts
new file mode 100644
index 000000000..41a03d040
--- /dev/null
+++ b/dashboard/src/components/commandPalette/useSessionExport.ts
@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { useChatRuntimeStore } from '../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../store/chatSessionStore';
+
+const EXPORT_EVENT = 'harness:export-session';
+
+function downloadJson(filename: string, payload: unknown): void {
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+export function useSessionExport(): void {
+  const sessionId = useChatSessionStore((s) => s.activeSessionId);
+
+  // Listen for the global export event so anywhere in the UI can request a download.
+  useEffect(() => {
+    function handle(): void {
+      const session = useChatRuntimeStore.getState().sessions[sessionId];
+      if (session == null || session.messages.length === 0) {
+        toast('No active session to export');
+        return;
+      }
+      const filename = `golemcore-session-${sessionId.slice(0, 8)}-${Date.now()}.json`;
+      downloadJson(filename, {
+        sessionId,
+        exportedAt: new Date().toISOString(),
+        turnMetadata: session.turnMetadata,
+        messages: session.messages,
+      });
+      toast.success('Session exported');
+    }
+    window.addEventListener(EXPORT_EVENT, handle);
+    return () => window.removeEventListener(EXPORT_EVENT, handle);
+  }, [sessionId]);
+}
diff --git a/dashboard/src/components/layout/DashboardLayout.tsx b/dashboard/src/components/layout/DashboardLayout.tsx
index f6b8d36ae..8212f9d67 100644
--- a/dashboard/src/components/layout/DashboardLayout.tsx
+++ b/dashboard/src/components/layout/DashboardLayout.tsx
@@ -1,34 +1,9 @@
-import { useLocation } from 'react-router-dom';
-import { ChatRuntimeController } from '../chat/ChatRuntimeController';
-import Sidebar from './Sidebar';
-import Topbar from './Topbar';
+import HarnessShell from './harness/HarnessShell';
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
 }
 
 export default function DashboardLayout({ children }: DashboardLayoutProps) {
-  const { pathname } = useLocation();
-  const isChat = pathname === '/' || pathname.startsWith('/chat');
-  const isIde = pathname.startsWith('/ide');
-  const isWorkspace = pathname.startsWith('/workspace');
-  const isShellRoute = isChat || isIde || isWorkspace;
-
-  const mainClassName = isShellRoute
-    ? 'dashboard-main-shell flex-grow-1 d-flex overflow-hidden'
-    : 'dashboard-main flex-grow-1 overflow-auto';
-
-  return (
-    <div className="d-flex app-shell overflow-hidden">
-      <a href="#main-content" className="skip-link">Skip to main content</a>
-      <Sidebar />
-      <div className="dashboard-shell-body flex-grow-1 d-flex flex-column overflow-hidden">
-        <ChatRuntimeController />
-        <Topbar />
-        <main id="main-content" className={mainClassName}>
-          {children}
-        </main>
-      </div>
-    </div>
-  );
+  return <HarnessShell>{children}</HarnessShell>;
 }
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
deleted file mode 100644
index ae3a33c17..000000000
--- a/dashboard/src/components/layout/Sidebar.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import { NavLink, useNavigate } from 'react-router-dom';
-import { Badge, Nav } from '../ui/tailwind-components';
-import {
-  FiActivity,
-  FiBarChart2,
-  FiCalendar,
-  FiCode,
-  FiFileText,
-  FiGlobe,
-  FiList,
-  FiMessageSquare,
-  FiSettings,
-  FiShuffle,
-  FiTerminal,
-  FiX,
-  FiZap,
-} from 'react-icons/fi';
-import type { SessionSummary } from '../../api/sessions';
-import { useChatSessionStore } from '../../store/chatSessionStore';
-import { useSidebarStore } from '../../store/sidebarStore';
-import { useActiveSession, useCreateSession, useRecentSessions } from '../../hooks/useSessions';
-import { useRuntimeConfig } from '../../hooks/useSettings';
-import { useSystemHealth, useSystemUpdateStatus } from '../../hooks/useSystem';
-import { isLegacyCompatibleConversationKey, normalizeConversationKey } from '../../utils/conversationKey';
-import { getSidebarUpdateBadge } from '../../utils/systemUpdateUi';
-import { createUuid } from '../../utils/uuid';
-
-const RECENT_SESSIONS_LIMIT = 5;
-
-const links = [
-  { to: '/', icon: <FiMessageSquare size={20} />, label: 'Chat' },
-  { to: '/sessions', icon: <FiList size={20} />, label: 'Sessions' },
-  { to: '/scheduler', icon: <FiCalendar size={20} />, label: 'Scheduler' },
-  { to: '/webhooks', icon: <FiGlobe size={20} />, label: 'Webhooks' },
-  { to: '/analytics', icon: <FiBarChart2 size={20} />, label: 'Analytics' },
-  { to: '/self-evolving', icon: <FiShuffle size={20} />, label: 'Self-Evolving' },
-  { to: '/prompts', icon: <FiFileText size={20} />, label: 'Prompts' },
-  { to: '/skills', icon: <FiZap size={20} />, label: 'Skills' },
-  { to: '/diagnostics', icon: <FiActivity size={20} />, label: 'Diagnostics' },
-  { to: '/workspace', icon: <FiCode size={20} />, label: 'Workspace' },
-  { to: '/logs', icon: <FiTerminal size={20} />, label: 'Logs' },
-  { to: '/settings', icon: <FiSettings size={20} />, label: 'Settings' },
-];
-
-function getSessionTitle(session: SessionSummary): string {
-  if (session.title != null && session.title.length > 0) {
-    return session.title;
-  }
-  if (session.conversationKey.length > 10) {
-    return `Session ${session.conversationKey.slice(0, 10)}`;
-  }
-  return `Session ${session.conversationKey}`;
-}
-
-interface SidebarChatSessionsProps {
-  recentSessions: SessionSummary[];
-  recentSessionsLoading: boolean;
-  recentSessionsError: boolean;
-  effectiveActiveSessionId: string;
-  isCreating: boolean;
-  onNewSession: () => void;
-  onSessionClick: (conversationKey: string) => void;
-}
-
-function SidebarChatSessions({
-  recentSessions,
-  recentSessionsLoading,
-  recentSessionsError,
-  effectiveActiveSessionId,
-  isCreating,
-  onNewSession,
-  onSessionClick,
-}: SidebarChatSessionsProps) {
-  return (
-    <div className="sidebar-chat-group">
-      <div className="sidebar-chat-group-header">
-        <span className="sidebar-chat-group-label">Chat Sessions</span>
-        <button
-          type="button"
-          className="sidebar-chat-new-btn"
-          onClick={onNewSession}
-          disabled={isCreating}
-        >
-          {isCreating ? 'Creating...' : 'New'}
-        </button>
-      </div>
-
-      <div className="sidebar-chat-list" role="list" aria-label="Recent chat sessions">
-        {recentSessionsLoading && (
-          <div className="sidebar-chat-state" role="status" aria-live="polite">
-            Loading recent sessions...
-          </div>
-        )}
-
-        {!recentSessionsLoading && recentSessionsError && (
-          <div className="sidebar-chat-state sidebar-chat-state--error" role="status" aria-live="polite">
-            Failed to load sessions
-          </div>
-        )}
-
-        {!recentSessionsLoading && !recentSessionsError && recentSessions.length === 0 && (
-          <div className="sidebar-chat-state" role="status" aria-live="polite">
-            No recent sessions
-          </div>
-        )}
-
-        {!recentSessionsLoading && !recentSessionsError && recentSessions.map((session) => {
-          const sessionKey = session.conversationKey;
-          const isActive = sessionKey === effectiveActiveSessionId;
-          return (
-            <button
-              key={session.id}
-              type="button"
-              className={`sidebar-chat-item${isActive ? ' active' : ''}`}
-              onClick={() => onSessionClick(sessionKey)}
-              title={session.preview ?? getSessionTitle(session)}
-              role="listitem"
-              aria-pressed={isActive}
-            >
-              <span className="sidebar-chat-item-title">{getSessionTitle(session)}</span>
-              {session.preview != null && session.preview.length > 0 && (
-                <span className="sidebar-chat-item-preview">{session.preview}</span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default function Sidebar() {
-  const navigate = useNavigate();
-  const mobileOpen = useSidebarStore((s) => s.mobileOpen);
-  const closeMobile = useSidebarStore((s) => s.closeMobile);
-  const clientInstanceId = useChatSessionStore((s) => s.clientInstanceId);
-  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
-  const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
-  const { data: runtimeConfig } = useRuntimeConfig();
-  const { data: health } = useSystemHealth();
-  const { data: updateStatus } = useSystemUpdateStatus();
-  const isSelfEvolvingEnabled = runtimeConfig?.selfEvolving?.enabled === true;
-  const {
-    data: recentSessionsData,
-    isLoading: recentSessionsLoading,
-    isError: recentSessionsError,
-  } = useRecentSessions('web', clientInstanceId, RECENT_SESSIONS_LIMIT);
-  const { data: activeSessionData } = useActiveSession('web', clientInstanceId);
-  const createSessionMutation = useCreateSession();
-  const version = health?.version ? `v${health.version}` : 'v...';
-  const updateState = updateStatus?.state ?? '';
-  const settingsBadge = getSidebarUpdateBadge(updateState);
-  const recentSessions = recentSessionsData ?? [];
-  const serverConversationKey = normalizeConversationKey(activeSessionData?.conversationKey);
-  const effectiveActiveSessionId = serverConversationKey ?? activeSessionId;
-
-  const handleNavClick = () => {
-    // Close sidebar on mobile when navigation item is clicked
-    closeMobile();
-  };
-
-  const handleNewSession = () => {
-    const nextConversationKey = createUuid();
-    setActiveSessionId(nextConversationKey);
-    closeMobile();
-    navigate('/');
-    createSessionMutation.mutate({
-      channelType: 'web',
-      clientInstanceId,
-      conversationKey: nextConversationKey,
-      activate: true,
-    });
-  };
-
-  const handleSessionClick = (conversationKey: string) => {
-    const normalized = normalizeConversationKey(conversationKey);
-    if (normalized == null || !isLegacyCompatibleConversationKey(normalized)) {
-      return;
-    }
-    setActiveSessionId(normalized);
-    closeMobile();
-    navigate('/');
-  };
-
-  return (
-    <>
-      {mobileOpen && (
-        <button
-          type="button"
-          className="sidebar-overlay d-md-none"
-          onClick={closeMobile}
-          aria-label="Close navigation menu"
-        />
-      )}
-      <aside
-        id="primary-navigation"
-        className={`sidebar d-flex flex-column ${mobileOpen ? 'mobile-open' : ''}`}
-        aria-label="Primary navigation"
-      >
-        <div className="sidebar-brand d-flex align-items-center justify-content-between">
-          <div className="d-flex align-items-center gap-2">
-            <span className="brand-icon">&#x1F916;</span>
-            <span className="sidebar-brand-text">GolemCore</span>
-          </div>
-          <button
-            type="button"
-            className="sidebar-close-btn d-md-none"
-            onClick={closeMobile}
-            aria-label="Close navigation"
-          >
-            <FiX size={20} />
-          </button>
-        </div>
-        <Nav className="flex-column flex-grow-1 px-2 py-2">
-          {links.filter((link) => link.to !== '/self-evolving' || isSelfEvolvingEnabled).map((link) => (
-            <Nav.Link
-              key={link.to}
-              as={NavLink}
-              to={link.to}
-              end={link.to === '/'}
-              onClick={handleNavClick}
-            >
-              {link.icon}
-              <span className="sidebar-link-text">{link.label}</span>
-              {link.to === '/settings' && settingsBadge != null && (
-                <Badge
-                  bg={settingsBadge.variant}
-                  text={settingsBadge.text}
-                  pill
-                  className="ms-auto"
-                  title={settingsBadge.title}
-                >
-                  {settingsBadge.label}
-                </Badge>
-              )}
-            </Nav.Link>
-          ))}
-
-          <SidebarChatSessions
-            recentSessions={recentSessions}
-            recentSessionsLoading={recentSessionsLoading}
-            recentSessionsError={recentSessionsError}
-            effectiveActiveSessionId={effectiveActiveSessionId}
-            isCreating={createSessionMutation.isPending}
-            onNewSession={handleNewSession}
-            onSessionClick={handleSessionClick}
-          />
-        </Nav>
-        <div className="px-4 py-3 sidebar-footer-text small text-body-secondary">
-          {version}
-        </div>
-      </aside>
-    </>
-  );
-}
diff --git a/dashboard/src/components/layout/Topbar.tsx b/dashboard/src/components/layout/Topbar.tsx
deleted file mode 100644
index cc1173c8e..000000000
--- a/dashboard/src/components/layout/Topbar.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '../../store/authStore';
-import { useChatRuntimeStore } from '../../store/chatRuntimeStore';
-import { useChatSessionStore } from '../../store/chatSessionStore';
-import { useThemeStore } from '../../store/themeStore';
-import { useSidebarStore } from '../../store/sidebarStore';
-import { useBackgroundSystemUpdateCheck } from '../../hooks/useBackgroundSystemUpdateCheck';
-import { useSystemUpdateStatus } from '../../hooks/useSystem';
-import { logout } from '../../api/auth';
-import { type TopbarUpdateNotice, getTopbarUpdateNotice } from '../../utils/systemUpdateUi';
-import { FiArrowUpCircle, FiLogOut, FiMenu, FiMoon, FiSun } from 'react-icons/fi';
-
-interface ChatStatusState {
-  trackedSessionId: string | null;
-  statusCopy: string | null;
-}
-
-function resolveRunningSessionId(sessions: ReturnType<typeof useChatRuntimeStore.getState>['sessions']): string | null {
-  for (const [sessionId, session] of Object.entries(sessions)) {
-    if (session.running || session.typing) {
-      return sessionId;
-    }
-  }
-  return null;
-}
-
-function resolveChatStatus(
-  activeSessionId: string,
-  activeSession: ReturnType<typeof useChatRuntimeStore.getState>['sessions'][string] | undefined,
-  runningSessionId: string | null,
-  connectionState: ReturnType<typeof useChatRuntimeStore.getState>['connectionState'],
-): ChatStatusState {
-  const trackedSessionId = activeSession?.running || activeSession?.typing ? activeSessionId : runningSessionId;
-  if (trackedSessionId == null) {
-    return {
-      trackedSessionId: null,
-      statusCopy: null,
-    };
-  }
-
-  if (connectionState === 'reconnecting') {
-    return {
-      trackedSessionId,
-      statusCopy: 'Reconnecting live chat',
-    };
-  }
-
-  return {
-    trackedSessionId,
-    statusCopy: activeSession?.typing || (trackedSessionId === activeSessionId && activeSession?.running)
-      ? 'Thinking'
-      : 'Chat active',
-  };
-}
-
-function TopbarUpdateShortcut({ notice, onClick }: { notice: TopbarUpdateNotice; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      className="topbar-icon-btn topbar-update-btn d-flex align-items-center justify-content-center p-0"
-      onClick={onClick}
-      title={notice.title}
-      aria-label={`${notice.title}. Open Settings updates.`}
-    >
-      <FiArrowUpCircle size={17} aria-hidden="true" />
-      <span className="topbar-update-dot" aria-hidden="true" />
-    </button>
-  );
-}
-
-export default function Topbar() {
-  const nav = useNavigate();
-  const doLogout = useAuthStore((s) => s.logout);
-  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
-  const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
-  const theme = useThemeStore((s) => s.theme);
-  const toggleTheme = useThemeStore((s) => s.toggle);
-  const toggleMobile = useSidebarStore((s) => s.toggleMobile);
-  const mobileOpen = useSidebarStore((s) => s.mobileOpen);
-  const connectionState = useChatRuntimeStore((s) => s.connectionState);
-  const activeSession = useChatRuntimeStore((s) => s.sessions[activeSessionId]);
-  const runningSessionId = useChatRuntimeStore((s) => resolveRunningSessionId(s.sessions));
-  const { data: updateStatus } = useSystemUpdateStatus();
-  const chatStatus = resolveChatStatus(activeSessionId, activeSession, runningSessionId, connectionState);
-  const updateNotice = getTopbarUpdateNotice(updateStatus);
-
-  useBackgroundSystemUpdateCheck(updateStatus);
-
-  const handleLogout = async () => {
-    try {
-      await logout();
-    } finally {
-      doLogout();
-      nav('/login');
-    }
-  };
-
-  const handleOpenChat = () => {
-    if (chatStatus.trackedSessionId != null) {
-      setActiveSessionId(chatStatus.trackedSessionId);
-    }
-    nav('/');
-  };
-
-  const handleOpenUpdates = () => {
-    nav('/settings/updates');
-  };
-
-  return (
-    <header className="topbar d-flex align-items-center justify-content-between px-3 px-md-4 py-2">
-      <button
-        type="button"
-        className="topbar-icon-btn topbar-mobile-menu-btn d-md-none d-flex align-items-center justify-content-center p-0"
-        onClick={toggleMobile}
-        aria-label={mobileOpen ? 'Close navigation' : 'Open navigation'}
-        aria-controls="primary-navigation"
-        aria-expanded={mobileOpen}
-      >
-        <FiMenu className="topbar-mobile-menu-icon" aria-hidden="true" />
-      </button>
-      <div className="topbar-center-slot">
-        {chatStatus.statusCopy != null && (
-          <button
-            type="button"
-            className="topbar-live-pill"
-            onClick={handleOpenChat}
-            title={chatStatus.trackedSessionId != null ? `Open chat session ${chatStatus.trackedSessionId.slice(0, 8)}` : 'Open chat'}
-          >
-            <span className={`topbar-live-dot ${connectionState === 'reconnecting' ? 'topbar-live-dot--reconnecting' : ''}`} />
-            <span className="topbar-live-label">{chatStatus.statusCopy}</span>
-            {chatStatus.trackedSessionId != null && (
-              <span className="topbar-live-session">{chatStatus.trackedSessionId.slice(0, 8)}</span>
-            )}
-          </button>
-        )}
-      </div>
-      <div className="d-flex align-items-center gap-2">
-        {updateNotice != null && (
-          <TopbarUpdateShortcut notice={updateNotice} onClick={handleOpenUpdates} />
-        )}
-        <button
-          type="button"
-          className="topbar-icon-btn text-decoration-none d-flex align-items-center justify-content-center p-0"
-          onClick={toggleTheme}
-          title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-          aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-        >
-          {theme === 'light' ? <FiMoon size={18} /> : <FiSun size={18} />}
-        </button>
-        <button
-          type="button"
-          className="topbar-action-btn text-decoration-none d-flex align-items-center px-3"
-          onClick={handleLogout}
-        >
-          <FiLogOut size={16} className="me-0 me-md-2" />
-          <span className="fw-medium small d-none d-md-inline">Logout</span>
-        </button>
-      </div>
-    </header>
-  );
-}
diff --git a/dashboard/src/components/layout/harness/HarnessShell.tsx b/dashboard/src/components/layout/harness/HarnessShell.tsx
new file mode 100644
index 000000000..6026e65b8
--- /dev/null
+++ b/dashboard/src/components/layout/harness/HarnessShell.tsx
@@ -0,0 +1,67 @@
+import { useEffect, type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ChatRuntimeController } from '../../chat/ChatRuntimeController';
+import { useThemeStore } from '../../../store/themeStore';
+import { useInspectorStore } from '../../../store/inspectorStore';
+import { useCommandPaletteShortcut } from '../../commandPalette/useCommandPaletteShortcut';
+import { useSessionExport } from '../../commandPalette/useSessionExport';
+import CommandPalette from '../../commandPalette/CommandPalette';
+import IconRail from './IconRail';
+import { useRailVersionLabel } from './useRailVersionLabel';
+import SecondarySidebar from './SecondarySidebar';
+import HarnessTopBar from './HarnessTopBar';
+import InspectorPanel from './InspectorPanel';
+
+interface HarnessShellProps {
+  children: ReactNode;
+}
+
+function isShellChromeRoute(pathname: string): boolean {
+  if (pathname === '/' || pathname.startsWith('/chat')) {
+    return true;
+  }
+  if (pathname.startsWith('/workspace') || pathname.startsWith('/ide')) {
+    return true;
+  }
+  return false;
+}
+
+export default function HarnessShell({ children }: HarnessShellProps) {
+  const { pathname } = useLocation();
+  const theme = useThemeStore((s) => s.theme);
+  const inspectorOpen = useInspectorStore((s) => s.panelOpen);
+  const versionLabel = useRailVersionLabel();
+  useCommandPaletteShortcut();
+  useSessionExport();
+  const showInspector = inspectorOpen && (pathname === '/' || pathname.startsWith('/chat'));
+  const mainClassName = isShellChromeRoute(pathname)
+    ? 'harness-main harness-main--flex'
+    : 'harness-main harness-main--scroll';
+
+  // Sync the harness theme attribute with the user's theme preference so
+  // the design tokens defined in harness.scss switch alongside the legacy palette.
+  useEffect(() => {
+    const target = document.documentElement;
+    target.setAttribute('data-harness', theme);
+    return () => {
+      target.removeAttribute('data-harness');
+    };
+  }, [theme]);
+
+  return (
+    <div className="harness-shell" data-harness-theme={theme}>
+      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <IconRail versionLabel={versionLabel} />
+      <SecondarySidebar />
+      <div className="harness-body">
+        <ChatRuntimeController />
+        <HarnessTopBar />
+        <main id="main-content" className={mainClassName}>
+          {children}
+        </main>
+      </div>
+      {showInspector && <InspectorPanel />}
+      <CommandPalette />
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/HarnessTopBar.tsx b/dashboard/src/components/layout/harness/HarnessTopBar.tsx
new file mode 100644
index 000000000..779dace7b
--- /dev/null
+++ b/dashboard/src/components/layout/harness/HarnessTopBar.tsx
@@ -0,0 +1,197 @@
+import { useNavigate } from 'react-router-dom';
+import {
+  FiArrowUpCircle,
+  FiChevronDown,
+  FiLogOut,
+  FiMenu,
+  FiMoon,
+  FiSearch,
+  FiSidebar,
+  FiSun,
+  FiPlus,
+  FiSettings,
+} from 'react-icons/fi';
+import { useAuthStore } from '../../../store/authStore';
+import { useChatRuntimeStore } from '../../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../../store/chatSessionStore';
+import { useThemeStore } from '../../../store/themeStore';
+import { useSidebarStore } from '../../../store/sidebarStore';
+import { useInspectorStore } from '../../../store/inspectorStore';
+import { useCommandPaletteStore } from '../../../store/commandPaletteStore';
+import { useBackgroundSystemUpdateCheck } from '../../../hooks/useBackgroundSystemUpdateCheck';
+import { useSystemUpdateStatus } from '../../../hooks/useSystem';
+import { logout } from '../../../api/auth';
+import { getTopbarUpdateNotice } from '../../../utils/systemUpdateUi';
+import { createUuid } from '../../../utils/uuid';
+import { useCreateSession } from '../../../hooks/useSessions';
+import { resolveConnectionStatus, resolveModeLabel, resolvePlanModeLabel, type ConnectionStatus } from './topbarStatus';
+
+interface ConnectionPillProps {
+  status: ConnectionStatus;
+  sessionId: string | null;
+}
+
+function ConnectionPill({ status, sessionId }: ConnectionPillProps) {
+  const labelByStatus: Record<ConnectionStatus, string> = {
+    connected: 'Connected',
+    reconnecting: 'Reconnecting',
+    disconnected: 'Disconnected',
+  };
+  return (
+    <span
+      className={`harness-topbar__pill harness-topbar__pill--${status}`}
+      role="status"
+      aria-live="polite"
+      title={sessionId != null ? `Session ${sessionId.slice(0, 8)}` : labelByStatus[status]}
+    >
+      <span className="harness-topbar__pill-dot" />
+      <span>{labelByStatus[status]}</span>
+    </span>
+  );
+}
+
+export default function HarnessTopBar() {
+  const nav = useNavigate();
+  const doLogout = useAuthStore((s) => s.logout);
+  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
+  const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
+  const clientInstanceId = useChatSessionStore((s) => s.clientInstanceId);
+  const theme = useThemeStore((s) => s.theme);
+  const toggleTheme = useThemeStore((s) => s.toggle);
+  const toggleMobile = useSidebarStore((s) => s.toggleMobile);
+  const mobileOpen = useSidebarStore((s) => s.mobileOpen);
+  const inspectorOpen = useInspectorStore((s) => s.panelOpen);
+  const togglePanel = useInspectorStore((s) => s.togglePanel);
+  const openPalette = useCommandPaletteStore((s) => s.openPalette);
+  const connectionState = useChatRuntimeStore((s) => s.connectionState);
+  const activeSession = useChatRuntimeStore((s) => s.sessions[activeSessionId]);
+  const { data: updateStatus } = useSystemUpdateStatus();
+  const createSessionMutation = useCreateSession();
+
+  const status = resolveConnectionStatus(connectionState, activeSession);
+  const modeLabel = resolveModeLabel(activeSession);
+  const planLabel = resolvePlanModeLabel(activeSession);
+  const updateNotice = getTopbarUpdateNotice(updateStatus);
+
+  useBackgroundSystemUpdateCheck(updateStatus);
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+    } finally {
+      doLogout();
+      nav('/login');
+    }
+  };
+
+  const handleNewChat = () => {
+    const nextKey = createUuid();
+    setActiveSessionId(nextKey);
+    nav('/');
+    createSessionMutation.mutate({
+      channelType: 'web',
+      clientInstanceId,
+      conversationKey: nextKey,
+      activate: true,
+    });
+  };
+
+  return (
+    <header className="harness-topbar" role="banner">
+      <div className="harness-topbar__left">
+        <button
+          type="button"
+          className="harness-topbar__icon-btn harness-topbar__mobile-toggle"
+          onClick={toggleMobile}
+          aria-label={mobileOpen ? 'Close navigation' : 'Open navigation'}
+          aria-controls="primary-navigation"
+          aria-expanded={mobileOpen}
+        >
+          <FiMenu size={16} aria-hidden="true" />
+        </button>
+        <span className="harness-topbar__brand">GolemCore</span>
+        <button type="button" className="harness-topbar__menu-btn" aria-label="Switch workspace">
+          <span>Workspace Chat</span>
+          <FiChevronDown size={14} aria-hidden="true" />
+        </button>
+      </div>
+      <div className="harness-topbar__center">
+        <ConnectionPill status={status} sessionId={activeSessionId} />
+        <span className="harness-topbar__pill harness-topbar__pill--coding" title="Active model tier">
+          <span>{modeLabel}</span>
+          <FiChevronDown size={12} aria-hidden="true" />
+        </span>
+        <span
+          className={`harness-topbar__pill harness-topbar__pill--${planLabel === 'Plan ON' ? 'plan-on' : 'plan-off'}`}
+          title={`Plan mode is ${planLabel === 'Plan ON' ? 'on' : 'off'}`}
+        >
+          {planLabel}
+        </span>
+      </div>
+      <div className="harness-topbar__right">
+        <button type="button" className="harness-topbar__btn harness-topbar__btn--primary" onClick={handleNewChat}>
+          <FiPlus size={14} aria-hidden="true" />
+          <span>New chat</span>
+        </button>
+        <button
+          type="button"
+          className="harness-topbar__btn"
+          aria-label="Open command palette"
+          title="Cmd/Ctrl + K"
+          onClick={openPalette}
+        >
+          <FiSearch size={14} aria-hidden="true" />
+          <span className="kbd">⌘K</span>
+        </button>
+        {updateNotice != null && (
+          <button
+            type="button"
+            className="harness-topbar__icon-btn"
+            onClick={() => nav('/settings/updates')}
+            aria-label={`${updateNotice.title}. Open settings updates.`}
+            title={updateNotice.title}
+          >
+            <FiArrowUpCircle size={16} aria-hidden="true" />
+          </button>
+        )}
+        <button
+          type="button"
+          className="harness-topbar__icon-btn"
+          onClick={togglePanel}
+          aria-label={inspectorOpen ? 'Hide inspector' : 'Show inspector'}
+          aria-pressed={inspectorOpen}
+          title={inspectorOpen ? 'Hide inspector' : 'Show inspector'}
+        >
+          <FiSidebar size={16} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          className="harness-topbar__icon-btn"
+          onClick={toggleTheme}
+          aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+          title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+        >
+          {theme === 'light' ? <FiMoon size={16} aria-hidden="true" /> : <FiSun size={16} aria-hidden="true" />}
+        </button>
+        <button
+          type="button"
+          className="harness-topbar__icon-btn"
+          onClick={() => nav('/settings')}
+          aria-label="Open settings"
+          title="Settings"
+        >
+          <FiSettings size={16} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          className="harness-topbar__icon-btn"
+          onClick={handleLogout}
+          aria-label="Log out"
+          title="Log out"
+        >
+          <FiLogOut size={16} aria-hidden="true" />
+        </button>
+      </div>
+    </header>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/IconRail.tsx b/dashboard/src/components/layout/harness/IconRail.tsx
new file mode 100644
index 000000000..434ea8261
--- /dev/null
+++ b/dashboard/src/components/layout/harness/IconRail.tsx
@@ -0,0 +1,94 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import {
+  FiBarChart2,
+  FiCalendar,
+  FiCode,
+  FiMessageSquare,
+  FiSearch,
+  FiSettings,
+  FiTerminal,
+  FiUser,
+  FiZap,
+} from 'react-icons/fi';
+import type { ReactNode } from 'react';
+
+interface RailItem {
+  key: string;
+  to: string;
+  matchPrefixes: string[];
+  icon: ReactNode;
+  ariaLabel: string;
+}
+
+const RAIL_ITEMS: RailItem[] = [
+  { key: 'chat', to: '/', matchPrefixes: ['/'], icon: <FiMessageSquare size={18} />, ariaLabel: 'Open chat workspace' },
+  { key: 'search', to: '/sessions', matchPrefixes: ['/sessions'], icon: <FiSearch size={18} />, ariaLabel: 'Open sessions search' },
+  { key: 'automation', to: '/scheduler', matchPrefixes: ['/scheduler', '/webhooks'], icon: <FiCalendar size={18} />, ariaLabel: 'Open automation' },
+  { key: 'workspace', to: '/workspace', matchPrefixes: ['/workspace', '/ide'], icon: <FiCode size={18} />, ariaLabel: 'Open workspace' },
+  { key: 'agent', to: '/skills', matchPrefixes: ['/skills', '/prompts'], icon: <FiZap size={18} />, ariaLabel: 'Open agent skills' },
+  { key: 'observability', to: '/analytics', matchPrefixes: ['/analytics', '/diagnostics', '/self-evolving'], icon: <FiBarChart2 size={18} />, ariaLabel: 'Open observability' },
+  { key: 'logs', to: '/logs', matchPrefixes: ['/logs'], icon: <FiTerminal size={18} />, ariaLabel: 'Open logs' },
+  { key: 'settings', to: '/settings', matchPrefixes: ['/settings'], icon: <FiSettings size={18} />, ariaLabel: 'Open settings' },
+];
+
+function isRailItemActive(item: RailItem, pathname: string): boolean {
+  if (item.matchPrefixes.includes('/')) {
+    return pathname === '/' || pathname.startsWith('/chat');
+  }
+  return item.matchPrefixes.some((prefix) => pathname.startsWith(prefix));
+}
+
+interface IconRailProps {
+  versionLabel: string;
+  onActivityClick?: () => void;
+}
+
+function IconRailItem({ item, active, onClick }: { item: RailItem; active: boolean; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      className={`harness-rail__btn${active ? ' harness-rail__btn--active' : ''}`}
+      onClick={onClick}
+      aria-label={item.ariaLabel}
+      title={item.ariaLabel}
+    >
+      {item.icon}
+    </button>
+  );
+}
+
+function IconRailContent({ versionLabel }: { versionLabel: string }) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  return (
+    <aside className="harness-rail" aria-label="Workspace shortcuts">
+      <div className="harness-rail__brand" aria-hidden="true">G</div>
+      <div className="harness-rail__items">
+        {RAIL_ITEMS.map((item) => (
+          <IconRailItem
+            key={item.key}
+            item={item}
+            active={isRailItemActive(item, pathname)}
+            onClick={() => navigate(item.to)}
+          />
+        ))}
+      </div>
+      <div className="harness-rail__footer">
+        <button
+          type="button"
+          className="harness-rail__btn"
+          aria-label="Profile and account"
+          title="Profile"
+        >
+          <FiUser size={16} />
+        </button>
+        <span className="harness-rail__version" aria-label={`Dashboard version ${versionLabel}`}>{versionLabel}</span>
+      </div>
+    </aside>
+  );
+}
+
+export default function IconRail({ versionLabel }: IconRailProps) {
+  return <IconRailContent versionLabel={versionLabel} />;
+}
diff --git a/dashboard/src/components/layout/harness/InspectorPanel.tsx b/dashboard/src/components/layout/harness/InspectorPanel.tsx
new file mode 100644
index 000000000..d1994a0a3
--- /dev/null
+++ b/dashboard/src/components/layout/harness/InspectorPanel.tsx
@@ -0,0 +1,73 @@
+import { useChatRuntimeStore } from '../../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../../store/chatSessionStore';
+import { useInspectorStore, INSPECTOR_TABS, type InspectorTab } from '../../../store/inspectorStore';
+import type { ChatRuntimeSessionState } from '../../chat/chatRuntimeTypes';
+import InspectorSummaryTab from './inspector/InspectorSummaryTab';
+import InspectorPlanTab from './inspector/InspectorPlanTab';
+import InspectorToolsTab from './inspector/InspectorToolsTab';
+import InspectorLogsTab from './inspector/InspectorLogsTab';
+import InspectorMemoryTab from './inspector/InspectorMemoryTab';
+
+const TAB_LABELS: Record<InspectorTab, string> = {
+  inspector: 'Inspector',
+  plan: 'Plan',
+  tools: 'Tools',
+  logs: 'Logs',
+  memory: 'Memory',
+};
+
+function InspectorTabBody({ tab, session }: { tab: InspectorTab; session: ChatRuntimeSessionState | undefined }) {
+  if (tab === 'inspector') {
+    return <InspectorSummaryTab session={session} />;
+  }
+  if (tab === 'plan') {
+    return <InspectorPlanTab />;
+  }
+  if (tab === 'tools') {
+    return <InspectorToolsTab />;
+  }
+  if (tab === 'logs') {
+    return <InspectorLogsTab />;
+  }
+  return <InspectorMemoryTab />;
+}
+
+export default function InspectorPanel() {
+  const activeTab = useInspectorStore((s) => s.activeTab);
+  const setActiveTab = useInspectorStore((s) => s.setActiveTab);
+  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
+  const session = useChatRuntimeStore((s) => s.sessions[activeSessionId]);
+
+  return (
+    <aside className="harness-inspector" aria-label="Inspector">
+      <div className="harness-inspector__tabs" role="tablist" aria-label="Inspector sections">
+        {INSPECTOR_TABS.map((tab) => {
+          const isActive = tab === activeTab;
+          return (
+            <button
+              key={tab}
+              type="button"
+              role="tab"
+              id={`inspector-tab-${tab}`}
+              aria-selected={isActive}
+              aria-controls={`inspector-panel-${tab}`}
+              tabIndex={isActive ? 0 : -1}
+              className={`harness-inspector__tab${isActive ? ' harness-inspector__tab--active' : ''}`}
+              onClick={() => setActiveTab(tab)}
+            >
+              {TAB_LABELS[tab]}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        className="harness-inspector__body"
+        role="tabpanel"
+        id={`inspector-panel-${activeTab}`}
+        aria-labelledby={`inspector-tab-${activeTab}`}
+      >
+        <InspectorTabBody tab={activeTab} session={session} />
+      </div>
+    </aside>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/SecondarySidebar.tsx b/dashboard/src/components/layout/harness/SecondarySidebar.tsx
new file mode 100644
index 000000000..347b470f3
--- /dev/null
+++ b/dashboard/src/components/layout/harness/SecondarySidebar.tsx
@@ -0,0 +1,144 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import { FiX } from 'react-icons/fi';
+import { useChatSessionStore } from '../../../store/chatSessionStore';
+import { useSidebarStore } from '../../../store/sidebarStore';
+import { useActiveSession, useCreateSession, useRecentSessions } from '../../../hooks/useSessions';
+import { useRuntimeConfig } from '../../../hooks/useSettings';
+import { useSystemUpdateStatus } from '../../../hooks/useSystem';
+import { isLegacyCompatibleConversationKey, normalizeConversationKey } from '../../../utils/conversationKey';
+import { getSidebarUpdateBadge } from '../../../utils/systemUpdateUi';
+import { createUuid } from '../../../utils/uuid';
+import { SIDEBAR_GROUPS, type SidebarLink } from './sidebarNavGroups';
+import SidebarChatSessionsList from './SidebarChatSessionsList';
+
+const RECENT_SESSIONS_LIMIT = 5;
+
+function shouldRenderLink(link: SidebarLink, isSelfEvolvingEnabled: boolean): boolean {
+  if (link.requiresFlag === 'selfEvolving') {
+    return isSelfEvolvingEnabled;
+  }
+  return true;
+}
+
+function SidebarBadge({ link }: { link: SidebarLink }) {
+  const { data: updateStatus } = useSystemUpdateStatus();
+  if (link.to !== '/settings') {
+    return null;
+  }
+  const badge = getSidebarUpdateBadge(updateStatus?.state ?? '');
+  if (badge == null) {
+    return null;
+  }
+  return (
+    <span className="harness-sidebar__badge" title={badge.title}>
+      {badge.label}
+    </span>
+  );
+}
+
+export default function SecondarySidebar() {
+  const navigate = useNavigate();
+  const mobileOpen = useSidebarStore((s) => s.mobileOpen);
+  const closeMobile = useSidebarStore((s) => s.closeMobile);
+  const clientInstanceId = useChatSessionStore((s) => s.clientInstanceId);
+  const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
+  const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
+  const { data: runtimeConfig } = useRuntimeConfig();
+  const isSelfEvolvingEnabled = runtimeConfig?.selfEvolving?.enabled === true;
+  const {
+    data: recentSessionsData,
+    isLoading: recentSessionsLoading,
+    isError: recentSessionsError,
+  } = useRecentSessions('web', clientInstanceId, RECENT_SESSIONS_LIMIT);
+  const { data: activeSessionData } = useActiveSession('web', clientInstanceId);
+  const createSessionMutation = useCreateSession();
+  const recentSessions = recentSessionsData ?? [];
+  const serverConversationKey = normalizeConversationKey(activeSessionData?.conversationKey);
+  const effectiveActiveSessionId = serverConversationKey ?? activeSessionId;
+
+  const handleNavClick = () => closeMobile();
+
+  const handleNewSession = () => {
+    const nextConversationKey = createUuid();
+    setActiveSessionId(nextConversationKey);
+    closeMobile();
+    navigate('/');
+    createSessionMutation.mutate({
+      channelType: 'web',
+      clientInstanceId,
+      conversationKey: nextConversationKey,
+      activate: true,
+    });
+  };
+
+  const handleSessionClick = (conversationKey: string) => {
+    const normalized = normalizeConversationKey(conversationKey);
+    if (normalized == null || !isLegacyCompatibleConversationKey(normalized)) {
+      return;
+    }
+    setActiveSessionId(normalized);
+    closeMobile();
+    navigate('/');
+  };
+
+  return (
+    <>
+      {mobileOpen && (
+        <button
+          type="button"
+          className="harness-sidebar-overlay d-md-none"
+          onClick={closeMobile}
+          aria-label="Close navigation menu"
+        />
+      )}
+      <aside
+        id="primary-navigation"
+        className={`harness-sidebar sidebar${mobileOpen ? ' mobile-open' : ''}`}
+        aria-label="Primary navigation"
+      >
+        <div className="harness-sidebar__header">
+          <h2 className="harness-sidebar__title">Workspace</h2>
+          <button
+            type="button"
+            className="harness-sidebar__close-btn d-md-none"
+            onClick={closeMobile}
+            aria-label="Close navigation"
+          >
+            <FiX size={16} />
+          </button>
+        </div>
+        <nav className="harness-sidebar__nav" aria-label="Primary sections">
+          {SIDEBAR_GROUPS.map((group) => (
+            <div key={group.id} className="harness-sidebar__group">
+              <div className="harness-sidebar__group-header">
+                <span>{group.label}</span>
+              </div>
+              {group.links.filter((link) => shouldRenderLink(link, isSelfEvolvingEnabled)).map((link) => (
+                <NavLink
+                  key={link.to}
+                  to={link.to}
+                  end={link.end === true}
+                  onClick={handleNavClick}
+                  className={({ isActive }) => `harness-sidebar__link${isActive ? ' active' : ''}`}
+                >
+                  <span className="harness-sidebar__link-icon" aria-hidden="true">{link.icon}</span>
+                  <span className="harness-sidebar__link-text">{link.label}</span>
+                  <SidebarBadge link={link} />
+                </NavLink>
+              ))}
+            </div>
+          ))}
+          <SidebarChatSessionsList
+            recentSessions={recentSessions}
+            isLoading={recentSessionsLoading}
+            isError={recentSessionsError}
+            effectiveActiveSessionId={effectiveActiveSessionId}
+            isCreating={createSessionMutation.isPending}
+            onNewSession={handleNewSession}
+            onSessionClick={handleSessionClick}
+          />
+        </nav>
+      </aside>
+    </>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/SidebarChatSessionsList.tsx b/dashboard/src/components/layout/harness/SidebarChatSessionsList.tsx
new file mode 100644
index 000000000..25b4df2a6
--- /dev/null
+++ b/dashboard/src/components/layout/harness/SidebarChatSessionsList.tsx
@@ -0,0 +1,81 @@
+import { FiPlus } from 'react-icons/fi';
+import type { SessionSummary } from '../../../api/sessions';
+
+interface SidebarChatSessionsListProps {
+  recentSessions: SessionSummary[];
+  isLoading: boolean;
+  isError: boolean;
+  effectiveActiveSessionId: string;
+  isCreating: boolean;
+  onNewSession: () => void;
+  onSessionClick: (conversationKey: string) => void;
+}
+
+function getSessionTitle(session: SessionSummary): string {
+  if (session.title != null && session.title.length > 0) {
+    return session.title;
+  }
+  if (session.conversationKey.length > 10) {
+    return `Session ${session.conversationKey.slice(0, 10)}`;
+  }
+  return `Session ${session.conversationKey}`;
+}
+
+export default function SidebarChatSessionsList({
+  recentSessions,
+  isLoading,
+  isError,
+  effectiveActiveSessionId,
+  isCreating,
+  onNewSession,
+  onSessionClick,
+}: SidebarChatSessionsListProps) {
+  return (
+    <div className="harness-sidebar__group">
+      <div className="harness-sidebar__group-header">
+        <span>Chat sessions</span>
+        <button
+          type="button"
+          className="harness-sidebar__group-action"
+          onClick={onNewSession}
+          disabled={isCreating}
+          aria-label={isCreating ? 'Creating new chat session' : 'New chat session'}
+          title="New chat session"
+        >
+          <FiPlus size={14} />
+        </button>
+      </div>
+      <div className="harness-sidebar__chat-list" role="list" aria-label="Recent chat sessions">
+        {isLoading && (
+          <div className="harness-sidebar__state" role="status" aria-live="polite">Loading recent sessions…</div>
+        )}
+        {!isLoading && isError && (
+          <div className="harness-sidebar__state harness-sidebar__state--error" role="status" aria-live="polite">Failed to load sessions</div>
+        )}
+        {!isLoading && !isError && recentSessions.length === 0 && (
+          <div className="harness-sidebar__state" role="status" aria-live="polite">No recent sessions</div>
+        )}
+        {!isLoading && !isError && recentSessions.map((session) => {
+          const sessionKey = session.conversationKey;
+          const isActive = sessionKey === effectiveActiveSessionId;
+          return (
+            <button
+              key={session.id}
+              type="button"
+              className={`harness-sidebar__chat-item${isActive ? ' active' : ''}`}
+              onClick={() => onSessionClick(sessionKey)}
+              role="listitem"
+              aria-pressed={isActive}
+              title={session.preview ?? getSessionTitle(session)}
+            >
+              <span className="harness-sidebar__chat-item-title">{getSessionTitle(session)}</span>
+              {session.preview != null && session.preview.length > 0 && (
+                <span className="harness-sidebar__chat-item-preview">{session.preview}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx b/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
new file mode 100644
index 000000000..8f5773a84
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
@@ -0,0 +1,42 @@
+import { FiArchive, FiDownload, FiZap } from 'react-icons/fi';
+import toast from 'react-hot-toast';
+
+interface InspectorActionsCardProps {
+  onCompactContext?: () => void;
+  onExportSession?: () => void;
+  onDebugBundle?: () => void;
+}
+
+function announceComingSoon(action: string): void {
+  toast(`${action} is coming in a follow-up release`);
+}
+
+export default function InspectorActionsCard({
+  onCompactContext,
+  onExportSession,
+  onDebugBundle,
+}: InspectorActionsCardProps) {
+  const compact = onCompactContext ?? (() => announceComingSoon('Context compaction'));
+  const exportSession = onExportSession ?? (() => announceComingSoon('Session export'));
+  const debugBundle = onDebugBundle ?? (() => announceComingSoon('Debug bundle export'));
+
+  return (
+    <section className="harness-inspector__card" aria-label="Run actions">
+      <h3 className="harness-inspector__card-title">Actions</h3>
+      <div className="plan-block__actions">
+        <button type="button" className="agent-btn" onClick={compact}>
+          <FiZap size={14} aria-hidden="true" />
+          <span>Compact context</span>
+        </button>
+        <button type="button" className="agent-btn" onClick={exportSession}>
+          <FiDownload size={14} aria-hidden="true" />
+          <span>Export session</span>
+        </button>
+        <button type="button" className="agent-btn" onClick={debugBundle}>
+          <FiArchive size={14} aria-hidden="true" />
+          <span>Debug bundle</span>
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorContextCard.tsx b/dashboard/src/components/layout/harness/inspector/InspectorContextCard.tsx
new file mode 100644
index 000000000..231ddab3f
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorContextCard.tsx
@@ -0,0 +1,50 @@
+import type { CSSProperties } from 'react';
+import type { TurnMetadata } from '../../../../store/contextPanelStore';
+import { deriveContextUsage, formatTokens } from './contextUsage';
+
+interface InspectorContextCardProps {
+  meta: TurnMetadata | undefined;
+}
+
+interface ProgressFillStyle extends CSSProperties {
+  '--harness-progress-pct': string;
+}
+
+export default function InspectorContextCard({ meta }: InspectorContextCardProps) {
+  const usage = meta != null ? deriveContextUsage(meta) : null;
+
+  if (usage == null) {
+    return (
+      <section className="harness-inspector__card" aria-label="Context usage">
+        <h3 className="harness-inspector__card-title">Context</h3>
+        <p className="harness-inspector__card-label">No telemetry yet</p>
+      </section>
+    );
+  }
+
+  const fillStyle: ProgressFillStyle = { '--harness-progress-pct': `${usage.percentage}%` };
+
+  return (
+    <section className="harness-inspector__card" aria-label="Context usage">
+      <h3 className="harness-inspector__card-title">Context</h3>
+      <div className={`harness-inspector__progress harness-inspector__progress--${usage.state}`}>
+        <div className="harness-inspector__card-row">
+          <span className="harness-inspector__card-value">{usage.percentage}%</span>
+          <span className="harness-inspector__card-label">
+            {formatTokens(usage.usedTokens)} / {formatTokens(usage.maxTokens)} tokens
+          </span>
+        </div>
+        <div
+          className="harness-inspector__progress-track"
+          role="progressbar"
+          aria-valuenow={usage.percentage}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label="Context usage"
+        >
+          <div className="harness-inspector__progress-fill" style={fillStyle} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
new file mode 100644
index 000000000..a25d57707
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
@@ -0,0 +1,96 @@
+import { useMemo, useState } from 'react';
+import { FiAlertCircle } from 'react-icons/fi';
+import { useInspectorLogs } from '../../../../hooks/useInspectorLogs';
+import type { LogEntryResponse } from '../../../../api/system';
+
+const LEVELS = ['ALL', 'INFO', 'WARN', 'ERROR', 'DEBUG'] as const;
+
+type LevelFilter = typeof LEVELS[number];
+
+function formatLogTime(timestamp: string): string {
+  const d = new Date(timestamp);
+  if (Number.isNaN(d.getTime())) {
+    return timestamp;
+  }
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+function levelClassName(level: string): string {
+  const upper = level.toUpperCase();
+  if (upper === 'ERROR') {
+    return 'inspector-log__level inspector-log__level--error';
+  }
+  if (upper === 'WARN' || upper === 'WARNING') {
+    return 'inspector-log__level inspector-log__level--warn';
+  }
+  return 'inspector-log__level';
+}
+
+function filterEntries(entries: LogEntryResponse[], level: LevelFilter, query: string): LogEntryResponse[] {
+  return entries.filter((entry) => {
+    if (level !== 'ALL' && entry.level.toUpperCase() !== level) {
+      return false;
+    }
+    if (query.trim().length === 0) {
+      return true;
+    }
+    const haystack = `${entry.message ?? ''} ${entry.logger ?? ''}`.toLowerCase();
+    return haystack.includes(query.trim().toLowerCase());
+  });
+}
+
+export default function InspectorLogsTab() {
+  const { data, isLoading, isError, refetch } = useInspectorLogs();
+  const [level, setLevel] = useState<LevelFilter>('ALL');
+  const [query, setQuery] = useState('');
+  const filtered = useMemo(() => filterEntries(data?.entries ?? [], level, query), [data, level, query]);
+
+  if (isLoading) {
+    return <div className="harness-inspector__placeholder"><span>Loading logs…</span></div>;
+  }
+  if (isError) {
+    return (
+      <div className="harness-inspector__placeholder">
+        <FiAlertCircle aria-hidden="true" />
+        <span>Failed to load logs</span>
+        <button type="button" className="agent-btn" onClick={() => refetch()}>Retry</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="harness-inspector__placeholder-stack">
+      <div className="inspector-log__filters">
+        <label className="inspector-log__filter">
+          <span>Level</span>
+          <select value={level} onChange={(event) => setLevel(event.target.value as LevelFilter)}>
+            {LEVELS.map((value) => <option key={value} value={value}>{value}</option>)}
+          </select>
+        </label>
+        <input
+          className="inspector-log__search"
+          placeholder="Search logs…"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          aria-label="Search logs"
+        />
+      </div>
+      {filtered.length === 0 ? (
+        <p className="harness-inspector__card-label">No logs match the current filter.</p>
+      ) : (
+        <ul className="inspector-log__list" role="list">
+          {filtered.map((entry) => (
+            <li key={entry.seq} className="inspector-log__row">
+              <span className="inspector-log__time">{formatLogTime(entry.timestamp)}</span>
+              <span className={levelClassName(entry.level)}>{entry.level}</span>
+              <span className="inspector-log__message">{entry.message ?? ''}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
new file mode 100644
index 000000000..ba29440cd
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
@@ -0,0 +1,55 @@
+import { FiBookmark } from 'react-icons/fi';
+import { useMemoryPresets } from '../../../../hooks/useSettings';
+import type { MemoryPreset } from '../../../../api/settings';
+
+function MemoryPresetCard({ preset }: { preset: MemoryPreset }) {
+  return (
+    <article className="agent-card" aria-label={`Memory preset ${preset.label}`}>
+      <header className="agent-card__header">
+        <FiBookmark size={14} aria-hidden="true" />
+        <span>{preset.label}</span>
+      </header>
+      {preset.comment.length > 0 && (
+        <p className="harness-inspector__card-label">{preset.comment}</p>
+      )}
+      <div className="harness-inspector__card-row">
+        <span className="harness-inspector__card-label">Identifier</span>
+        <span className="harness-inspector__card-value"><code>{preset.id}</code></span>
+      </div>
+    </article>
+  );
+}
+
+export default function InspectorMemoryTab() {
+  const { data, isLoading, isError, refetch } = useMemoryPresets();
+
+  if (isLoading) {
+    return <div className="harness-inspector__placeholder"><span>Loading memory…</span></div>;
+  }
+  if (isError) {
+    return (
+      <div className="harness-inspector__placeholder">
+        <span>Failed to load memory presets</span>
+        <button type="button" className="agent-btn" onClick={() => refetch()}>Retry</button>
+      </div>
+    );
+  }
+
+  const presets = data ?? [];
+
+  return (
+    <div className="harness-inspector__placeholder-stack">
+      <p className="harness-inspector__card-label">
+        Memory presets configured for the workspace. Once the runtime emits
+        relevant-memory events per turn they will appear here.
+      </p>
+      {presets.length === 0 ? (
+        <div className="harness-inspector__placeholder">
+          <span>No memory presets configured.</span>
+        </div>
+      ) : (
+        presets.map((preset) => <MemoryPresetCard key={preset.id} preset={preset} />)
+      )}
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
new file mode 100644
index 000000000..d08070819
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
@@ -0,0 +1,52 @@
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { usePlanControlState } from '../../../../hooks/usePlans';
+import PlanBlock from '../../../agentRun/PlanBlock';
+import { SAMPLE_PLAN } from '../../../agentRun/sampleAgentRun';
+import StatusPill from '../../../agentRun/StatusPill';
+
+export default function InspectorPlanTab() {
+  const sessionId = useChatSessionStore((s) => s.activeSessionId);
+  const { data, isLoading } = usePlanControlState(sessionId, sessionId.length > 0);
+  const planModeActive = data?.planModeActive === true;
+
+  return (
+    <div className="harness-inspector__placeholder-stack">
+      <section className="agent-card" aria-label="Plan mode status">
+        <div className="agent-card__header">
+          <span>Plan mode</span>
+          <StatusPill tone={planModeActive ? 'accent' : 'neutral'} showDot>
+            {planModeActive ? 'On' : 'Off'}
+          </StatusPill>
+        </div>
+        <div className="harness-inspector__card-row">
+          <span className="harness-inspector__card-label">Session</span>
+          <span className="harness-inspector__card-value">
+            {sessionId.length > 0 ? sessionId.slice(0, 8) : '—'}
+          </span>
+        </div>
+        <div className="harness-inspector__card-row">
+          <span className="harness-inspector__card-label">Active plan id</span>
+          <span className="harness-inspector__card-value">
+            {data?.activePlanId ?? '—'}
+          </span>
+        </div>
+        {isLoading && <p className="harness-inspector__card-label">Loading plan state…</p>}
+      </section>
+      <p className="harness-inspector__card-label">
+        Demo plan — the runtime does not yet emit structured plan steps; the
+        block below mirrors §23 of the redesign spec to preview the layout.
+      </p>
+      <PlanBlock
+        plan={SAMPLE_PLAN}
+        currentStepIndex={3}
+        isRunActive
+        hasFailedStep
+        onPause={() => undefined}
+        onSkip={() => undefined}
+        onEdit={() => undefined}
+        onRunStepByStep={() => undefined}
+        onRetryStep={() => undefined}
+      />
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorSummaryTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorSummaryTab.tsx
new file mode 100644
index 000000000..0505fa011
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorSummaryTab.tsx
@@ -0,0 +1,75 @@
+import type { ChatRuntimeSessionState } from '../../../chat/chatRuntimeTypes';
+import { formatTokens } from './contextUsage';
+import InspectorContextCard from './InspectorContextCard';
+import InspectorActionsCard from './InspectorActionsCard';
+
+interface InspectorSummaryTabProps {
+  session: ChatRuntimeSessionState | undefined;
+}
+
+interface SummaryRowProps {
+  label: string;
+  value: string;
+}
+
+function SummaryRow({ label, value }: SummaryRowProps) {
+  return (
+    <div className="harness-inspector__card-row">
+      <span className="harness-inspector__card-label">{label}</span>
+      <span className="harness-inspector__card-value">{value}</span>
+    </div>
+  );
+}
+
+function resolveStatusLabel(session: ChatRuntimeSessionState | undefined): string {
+  if (session == null) {
+    return 'Idle';
+  }
+  if (session.running) {
+    return 'Running';
+  }
+  if (session.typing) {
+    return 'Streaming';
+  }
+  return 'Idle';
+}
+
+function resolveModeLabel(session: ChatRuntimeSessionState | undefined): string {
+  const reasoning = session?.turnMetadata.reasoning ?? null;
+  if (reasoning != null && reasoning.length > 0) {
+    return 'Plan ON';
+  }
+  return 'Plan OFF';
+}
+
+function tokenValue(value: number | null): string {
+  return value != null ? formatTokens(value) : '—';
+}
+
+export default function InspectorSummaryTab({ session }: InspectorSummaryTabProps) {
+  const meta = session?.turnMetadata;
+
+  return (
+    <>
+      <section className="harness-inspector__card" aria-label="Run summary">
+        <h3 className="harness-inspector__card-title">Task</h3>
+        <SummaryRow label="Status" value={resolveStatusLabel(session)} />
+        <SummaryRow label="Mode" value={resolveModeLabel(session)} />
+        <SummaryRow label="Model" value={meta?.model ?? '—'} />
+        <SummaryRow label="Tier" value={meta?.tier ?? '—'} />
+      </section>
+
+      <InspectorContextCard meta={meta} />
+
+      <section className="harness-inspector__card" aria-label="Token telemetry">
+        <h3 className="harness-inspector__card-title">Tokens</h3>
+        <SummaryRow label="Input" value={tokenValue(meta?.inputTokens ?? null)} />
+        <SummaryRow label="Output" value={tokenValue(meta?.outputTokens ?? null)} />
+        <SummaryRow label="Total" value={tokenValue(meta?.totalTokens ?? null)} />
+        <SummaryRow label="Latency" value={meta?.latencyMs != null ? `${meta.latencyMs} ms` : '—'} />
+      </section>
+
+      <InspectorActionsCard />
+    </>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
new file mode 100644
index 000000000..20b220939
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
+import ToolCallTimeline from '../../../agentRun/ToolCallTimeline';
+import IncidentCard from '../../../agentRun/IncidentCard';
+import { SAMPLE_INCIDENT, SAMPLE_TOOL_CALLS } from '../../../agentRun/sampleAgentRun';
+import { normalizeChatMessages } from '../../../agentRun/normalizeRunEvents';
+import type { ToolCallViewModel } from '../../../agentRun/types';
+
+function collectToolCalls(messages: ReturnType<typeof useChatRuntimeStore.getState>['sessions'][string]['messages'] | undefined, runId: string): ToolCallViewModel[] {
+  if (messages == null || messages.length === 0) {
+    return [];
+  }
+  const items = normalizeChatMessages(messages, runId);
+  return items.flatMap((item) => (item.type === 'tool_calls' ? item.calls : []));
+}
+
+export default function InspectorToolsTab() {
+  const sessionId = useChatSessionStore((s) => s.activeSessionId);
+  const session = useChatRuntimeStore((s) => s.sessions[sessionId]);
+  const liveCalls = useMemo(() => collectToolCalls(session?.messages, sessionId), [session?.messages, sessionId]);
+  const calls = liveCalls.length > 0 ? liveCalls : SAMPLE_TOOL_CALLS;
+  const isDemo = liveCalls.length === 0;
+
+  return (
+    <div className="harness-inspector__placeholder-stack">
+      {isDemo && (
+        <p className="harness-inspector__card-label">
+          Demo tool history — replace with live data once the runtime emits
+          structured tool events. Real tool calls extracted from chat markers
+          will surface here automatically.
+        </p>
+      )}
+      <ToolCallTimeline calls={calls} />
+      {isDemo && <IncidentCard incident={SAMPLE_INCIDENT} />}
+    </div>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/contextUsage.ts b/dashboard/src/components/layout/harness/inspector/contextUsage.ts
new file mode 100644
index 000000000..33d086e29
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/contextUsage.ts
@@ -0,0 +1,34 @@
+import type { TurnMetadata } from '../../../../store/contextPanelStore';
+
+export type ContextUsageState = 'normal' | 'warning' | 'critical';
+
+export interface ContextUsage {
+  usedTokens: number;
+  maxTokens: number;
+  percentage: number;
+  state: ContextUsageState;
+}
+
+export function deriveContextUsage(meta: TurnMetadata): ContextUsage | null {
+  const max = meta.maxContextTokens;
+  const used = meta.totalTokens;
+  if (max == null || max <= 0 || used == null || used < 0) {
+    return null;
+  }
+  const ratio = used / max;
+  const percentage = Math.min(100, Math.round(ratio * 100));
+  let state: ContextUsageState = 'normal';
+  if (ratio >= 0.85) {
+    state = 'critical';
+  } else if (ratio >= 0.6) {
+    state = 'warning';
+  }
+  return { usedTokens: used, maxTokens: max, percentage, state };
+}
+
+export function formatTokens(value: number): string {
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}k`;
+  }
+  return value.toLocaleString();
+}
diff --git a/dashboard/src/components/layout/harness/sidebarNavGroups.ts b/dashboard/src/components/layout/harness/sidebarNavGroups.ts
new file mode 100644
index 000000000..6c3bf183f
--- /dev/null
+++ b/dashboard/src/components/layout/harness/sidebarNavGroups.ts
@@ -0,0 +1,82 @@
+import { createElement, type ReactNode } from 'react';
+import {
+  FiActivity,
+  FiBarChart2,
+  FiCalendar,
+  FiCode,
+  FiFileText,
+  FiGlobe,
+  FiList,
+  FiMessageSquare,
+  FiSettings,
+  FiShuffle,
+  FiTerminal,
+  FiZap,
+} from 'react-icons/fi';
+
+export interface SidebarLink {
+  to: string;
+  label: string;
+  icon: ReactNode;
+  end?: boolean;
+  requiresFlag?: 'selfEvolving';
+}
+
+export interface SidebarGroup {
+  id: string;
+  label: string;
+  links: SidebarLink[];
+  showAddSessionButton?: boolean;
+}
+
+export const SIDEBAR_GROUPS: SidebarGroup[] = [
+  {
+    id: 'sessions',
+    label: 'Sessions',
+    showAddSessionButton: true,
+    links: [
+      { to: '/', label: 'Chat', icon: createElement(FiMessageSquare, { size: 16 }), end: true },
+      { to: '/sessions', label: 'Sessions', icon: createElement(FiList, { size: 16 }) },
+    ],
+  },
+  {
+    id: 'automation',
+    label: 'Automation',
+    links: [
+      { to: '/scheduler', label: 'Scheduler', icon: createElement(FiCalendar, { size: 16 }) },
+      { to: '/webhooks', label: 'Webhooks', icon: createElement(FiGlobe, { size: 16 }) },
+    ],
+  },
+  {
+    id: 'agent',
+    label: 'Agent',
+    links: [
+      { to: '/skills', label: 'Skills', icon: createElement(FiZap, { size: 16 }) },
+      { to: '/prompts', label: 'Prompts', icon: createElement(FiFileText, { size: 16 }) },
+      { to: '/self-evolving', label: 'Self-Evolving', icon: createElement(FiShuffle, { size: 16 }), requiresFlag: 'selfEvolving' },
+    ],
+  },
+  {
+    id: 'observability',
+    label: 'Observability',
+    links: [
+      { to: '/analytics', label: 'Analytics', icon: createElement(FiBarChart2, { size: 16 }) },
+      { to: '/logs', label: 'Logs', icon: createElement(FiTerminal, { size: 16 }) },
+      { to: '/diagnostics', label: 'Diagnostics', icon: createElement(FiActivity, { size: 16 }) },
+    ],
+  },
+  {
+    id: 'workspace',
+    label: 'Workspace',
+    links: [
+      { to: '/workspace', label: 'Workspace', icon: createElement(FiCode, { size: 16 }) },
+    ],
+  },
+  {
+    id: 'system',
+    label: 'System',
+    links: [
+      { to: '/settings', label: 'Settings', icon: createElement(FiSettings, { size: 16 }) },
+    ],
+  },
+];
diff --git a/dashboard/src/components/layout/harness/topbarStatus.ts b/dashboard/src/components/layout/harness/topbarStatus.ts
new file mode 100644
index 000000000..ee9f05222
--- /dev/null
+++ b/dashboard/src/components/layout/harness/topbarStatus.ts
@@ -0,0 +1,43 @@
+import type { ChatConnectionState } from '../../../store/chatRuntimeStore';
+import type { ChatRuntimeSessionState } from '../../chat/chatRuntimeTypes';
+
+export type ConnectionStatus = 'connected' | 'reconnecting' | 'disconnected';
+
+const TIER_LABELS: Record<string, string> = {
+  fast: 'Fast',
+  balanced: 'Balanced',
+  smart: 'Smart',
+  coding: 'Coding',
+};
+
+export function resolveConnectionStatus(
+  connectionState: ChatConnectionState,
+  session: ChatRuntimeSessionState | undefined,
+): ConnectionStatus {
+  if (connectionState === 'connected' || connectionState === 'connecting') {
+    if (session?.running === true || session?.typing === true) {
+      return 'connected';
+    }
+    return 'connected';
+  }
+  if (connectionState === 'reconnecting') {
+    return 'reconnecting';
+  }
+  return 'disconnected';
+}
+
+export function resolveModeLabel(session: ChatRuntimeSessionState | undefined): string {
+  const tier = session?.turnMetadata.tier ?? null;
+  if (tier == null) {
+    return 'Coding';
+  }
+  return TIER_LABELS[tier] ?? tier.charAt(0).toUpperCase() + tier.slice(1);
+}
+
+export function resolvePlanModeLabel(session: ChatRuntimeSessionState | undefined): 'Plan ON' | 'Plan OFF' {
+  const reasoning = session?.turnMetadata.reasoning ?? null;
+  if (reasoning != null && reasoning.length > 0) {
+    return 'Plan ON';
+  }
+  return 'Plan OFF';
+}
diff --git a/dashboard/src/components/layout/harness/useRailVersionLabel.ts b/dashboard/src/components/layout/harness/useRailVersionLabel.ts
new file mode 100644
index 000000000..a280ad6ad
--- /dev/null
+++ b/dashboard/src/components/layout/harness/useRailVersionLabel.ts
@@ -0,0 +1,6 @@
+import { useSystemHealth } from '../../../hooks/useSystem';
+
+export function useRailVersionLabel(): string {
+  const { data: health } = useSystemHealth();
+  return health?.version != null ? `v${health.version}` : 'v…';
+}
diff --git a/dashboard/src/hooks/useInspectorLogs.ts b/dashboard/src/hooks/useInspectorLogs.ts
new file mode 100644
index 000000000..03bfc97d4
--- /dev/null
+++ b/dashboard/src/hooks/useInspectorLogs.ts
@@ -0,0 +1,23 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { getSystemLogs, type LogEntryResponse } from '../api/system';
+
+const INSPECTOR_LOGS_LIMIT = 30;
+const INSPECTOR_LOGS_REFRESH_MS = 15_000;
+
+interface InspectorLogsResult {
+  entries: LogEntryResponse[];
+}
+
+async function fetchInspectorLogs(): Promise<InspectorLogsResult> {
+  const page = await getSystemLogs({ limit: INSPECTOR_LOGS_LIMIT });
+  return { entries: page.items };
+}
+
+export function useInspectorLogs(): UseQueryResult<InspectorLogsResult, unknown> {
+  return useQuery({
+    queryKey: ['system', 'logs', 'inspector'],
+    queryFn: fetchInspectorLogs,
+    refetchInterval: INSPECTOR_LOGS_REFRESH_MS,
+    staleTime: 5_000,
+  });
+}
diff --git a/dashboard/src/main.tsx b/dashboard/src/main.tsx
index aef858b79..8a2cd5828 100644
--- a/dashboard/src/main.tsx
+++ b/dashboard/src/main.tsx
@@ -8,6 +8,8 @@ import './styles/tailwind.css';
 import './styles/custom.scss';
 import './styles/workspace.scss';
 import './styles/responsive.scss';
+import './styles/harness.scss';
+import './styles/agentRun.scss';
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/dashboard/src/store/commandPaletteStore.ts b/dashboard/src/store/commandPaletteStore.ts
new file mode 100644
index 000000000..ec8067f29
--- /dev/null
+++ b/dashboard/src/store/commandPaletteStore.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface CommandPaletteState {
+  open: boolean;
+  openPalette: () => void;
+  closePalette: () => void;
+  togglePalette: () => void;
+}
+
+export const useCommandPaletteStore = create<CommandPaletteState>((set) => ({
+  open: false,
+  openPalette: () => set({ open: true }),
+  closePalette: () => set({ open: false }),
+  togglePalette: () => set((state) => ({ open: !state.open })),
+}));
diff --git a/dashboard/src/store/inspectorStore.ts b/dashboard/src/store/inspectorStore.ts
new file mode 100644
index 000000000..f28f49a9b
--- /dev/null
+++ b/dashboard/src/store/inspectorStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type InspectorTab = 'inspector' | 'plan' | 'tools' | 'logs' | 'memory';
+
+export const INSPECTOR_TABS: ReadonlyArray<InspectorTab> = [
+  'inspector',
+  'plan',
+  'tools',
+  'logs',
+  'memory',
+];
+
+interface InspectorState {
+  activeTab: InspectorTab;
+  panelOpen: boolean;
+  setActiveTab: (tab: InspectorTab) => void;
+  togglePanel: () => void;
+  setPanelOpen: (open: boolean) => void;
+}
+
+export const useInspectorStore = create<InspectorState>()(
+  persist(
+    (set) => ({
+      activeTab: 'inspector',
+      panelOpen: true,
+      setActiveTab: (tab: InspectorTab) => set({ activeTab: tab }),
+      togglePanel: () => set((state) => ({ panelOpen: !state.panelOpen })),
+      setPanelOpen: (open: boolean) => set({ panelOpen: open }),
+    }),
+    { name: 'gc.harness.inspector' },
+  ),
+);
diff --git a/dashboard/src/styles/agentRun.scss b/dashboard/src/styles/agentRun.scss
new file mode 100644
index 000000000..c4c1b9d0a
--- /dev/null
+++ b/dashboard/src/styles/agentRun.scss
@@ -0,0 +1,447 @@
+/*
+ * Agent run components — task header, plan block, tool call timeline,
+ * incident card, artifacts, approval requests, status pills.
+ */
+
+.agent-run-thread {
+  width: 100%;
+  max-width: 860px;
+  margin: 0 auto;
+  padding: var(--hns-space-6) var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-4);
+}
+
+/* ---------- Status pill ------------------------------------------- */
+
+.agent-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: var(--hns-font-sm);
+  font-weight: 600;
+  border: 1px solid var(--hns-border-medium);
+  background: var(--hns-bg-card);
+  color: var(--hns-text-secondary);
+}
+
+.agent-pill__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.agent-pill--success { color: var(--hns-success); border-color: var(--hns-success-soft); background: var(--hns-success-soft); }
+.agent-pill--warning { color: var(--hns-warning); border-color: var(--hns-warning-soft); background: var(--hns-warning-soft); }
+.agent-pill--danger  { color: var(--hns-danger);  border-color: var(--hns-danger-soft);  background: var(--hns-danger-soft); }
+.agent-pill--accent  { color: var(--hns-accent-strong); border-color: var(--hns-accent-soft); background: var(--hns-accent-soft); }
+.agent-pill--neutral { color: var(--hns-text-secondary); }
+
+/* ---------- Task header ------------------------------------------- */
+
+.task-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--hns-space-3);
+  padding: 0 0 var(--hns-space-2);
+  border-bottom: 1px solid var(--hns-border-subtle);
+}
+
+.task-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-xl);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+}
+
+.task-header__title {
+  margin: 0;
+}
+
+.task-header__edit {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--hns-text-muted);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: var(--hns-radius-sm);
+}
+
+.task-header__edit:hover,
+.task-header__edit:focus-visible {
+  color: var(--hns-accent-strong);
+  background: var(--hns-accent-soft);
+  outline: none;
+}
+
+.task-header__subtitle {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.task-header__subtitle-sep {
+  color: var(--hns-text-disabled);
+}
+
+.task-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+/* ---------- Card primitives --------------------------------------- */
+
+.agent-card {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+}
+
+.agent-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+}
+
+.agent-card__count {
+  display: inline-flex;
+  height: 20px;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--hns-bg-card-hover);
+  color: var(--hns-text-secondary);
+}
+
+.agent-card__chevron {
+  margin-left: auto;
+  color: var(--hns-text-muted);
+}
+
+/* ---------- Plan block -------------------------------------------- */
+
+.plan-block__steps {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.plan-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-2);
+  border-radius: var(--hns-radius-sm);
+}
+
+.plan-step:hover {
+  background: var(--hns-bg-card-hover);
+}
+
+.plan-step--current {
+  background: var(--hns-accent-soft);
+}
+
+.plan-step__index {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--hns-text-muted);
+  background: var(--hns-bg-card-hover);
+}
+
+.plan-step--current .plan-step__index { background: var(--hns-accent); color: #fff; }
+.plan-step--completed .plan-step__index { background: var(--hns-success-soft); color: var(--hns-success); }
+.plan-step--failed .plan-step__index { background: var(--hns-danger-soft); color: var(--hns-danger); }
+
+.plan-step__title {
+  flex: 1 1 auto;
+  font-size: var(--hns-font-md);
+  color: var(--hns-text-primary);
+}
+
+.plan-step__status {
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.plan-step--completed .plan-step__title { color: var(--hns-text-secondary); }
+.plan-step--skipped .plan-step__title { color: var(--hns-text-disabled); text-decoration: line-through; }
+
+.plan-block__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hns-space-2);
+}
+
+.agent-btn {
+  appearance: none;
+  border: 1px solid var(--hns-border-medium);
+  background: var(--hns-bg-card);
+  color: var(--hns-text-primary);
+  font-size: var(--hns-font-sm);
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: var(--hns-radius-sm);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.agent-btn:hover,
+.agent-btn:focus-visible {
+  background: var(--hns-bg-card-hover);
+  border-color: var(--hns-border-strong);
+  outline: none;
+}
+
+.agent-btn--primary {
+  background: var(--hns-accent);
+  color: #fff;
+  border-color: transparent;
+}
+
+.agent-btn--primary:hover,
+.agent-btn--primary:focus-visible {
+  background: var(--hns-accent-strong);
+}
+
+.agent-btn--danger {
+  background: transparent;
+  color: var(--hns-danger);
+  border-color: rgba(255, 95, 109, 0.32);
+}
+
+.agent-btn--danger:hover,
+.agent-btn--danger:focus-visible {
+  background: var(--hns-danger-soft);
+}
+
+.agent-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ---------- Tool call timeline ------------------------------------ */
+
+.tool-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tool-row {
+  display: grid;
+  grid-template-columns: 24px 140px 1fr auto auto auto;
+  gap: var(--hns-space-3);
+  align-items: center;
+  padding: var(--hns-space-2) var(--hns-space-3);
+  border-radius: var(--hns-radius-sm);
+  font-size: var(--hns-font-md);
+  background: transparent;
+  border: 1px solid transparent;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  color: var(--hns-text-primary);
+}
+
+.tool-row:hover,
+.tool-row:focus-visible {
+  background: var(--hns-bg-card-hover);
+  border-color: var(--hns-border-subtle);
+  outline: none;
+}
+
+.tool-row__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.tool-row__icon--success { color: var(--hns-success); }
+.tool-row__icon--failed  { color: var(--hns-danger); }
+.tool-row__icon--running { color: var(--hns-accent-strong); }
+.tool-row__icon--skipped { color: var(--hns-text-muted); }
+
+.tool-row__name {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--hns-text-primary);
+}
+
+.tool-row__target {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--hns-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-row__duration {
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.tool-row__status {
+  font-size: 11px;
+  color: var(--hns-text-secondary);
+}
+
+.tool-row__chevron {
+  color: var(--hns-text-muted);
+}
+
+.tool-row__details {
+  grid-column: 1 / -1;
+  padding: var(--hns-space-3);
+  margin-top: var(--hns-space-2);
+  background: var(--hns-bg-panel);
+  border-radius: var(--hns-radius-sm);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-2);
+}
+
+.tool-row__details-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tool-row__details pre {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--hns-text-primary);
+}
+
+/* ---------- Incident card ----------------------------------------- */
+
+.incident-card {
+  background: var(--hns-danger-soft);
+  border: 1px solid rgba(255, 95, 109, 0.28);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+}
+
+.incident-card--warning { background: var(--hns-warning-soft); border-color: rgba(255, 180, 84, 0.28); }
+.incident-card--info { background: var(--hns-accent-soft); border-color: rgba(139, 124, 255, 0.28); }
+
+.incident-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.incident-card__title {
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+}
+
+.incident-card__time {
+  margin-left: auto;
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.incident-card__body {
+  font-size: var(--hns-font-md);
+  color: var(--hns-text-primary);
+  line-height: 1.5;
+}
+
+.incident-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-secondary);
+}
+
+.incident-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hns-space-2);
+}
+
+/* ---------- Artifact + approval ----------------------------------- */
+
+.artifact-card {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-3) var(--hns-space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-3);
+}
+
+.artifact-card__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--hns-radius-sm);
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.artifact-card__body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.artifact-card__title { font-size: var(--hns-font-md); color: var(--hns-text-primary); font-weight: 600; }
+.artifact-card__description { font-size: var(--hns-font-sm); color: var(--hns-text-muted); }
+
+.approval-card {
+  background: var(--hns-warning-soft);
+  border: 1px solid rgba(255, 180, 84, 0.32);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+}
diff --git a/dashboard/src/styles/harness.scss b/dashboard/src/styles/harness.scss
new file mode 100644
index 000000000..3b40d5e86
--- /dev/null
+++ b/dashboard/src/styles/harness.scss
@@ -0,0 +1,1075 @@
+/*
+ * GolemCore Harness — design tokens and shell layout.
+ * Spec: golemcore_harness_ui_redesign_spec.md
+ *
+ * Tokens are scoped under [data-harness="dark"] / [data-harness="light"]
+ * so they coexist with the legacy --gc-* palette without disturbing it.
+ * The harness shell only renders inside a .harness-shell container.
+ */
+
+:root,
+[data-harness="dark"] {
+  --hns-bg-app: #0f1117;
+  --hns-bg-elevated: #121722;
+  --hns-bg-panel: #141a25;
+  --hns-bg-card: #171d29;
+  --hns-bg-card-hover: #1d2432;
+  --hns-bg-input: #131826;
+
+  --hns-border-subtle: rgba(255, 255, 255, 0.06);
+  --hns-border-medium: rgba(255, 255, 255, 0.10);
+  --hns-border-strong: rgba(255, 255, 255, 0.16);
+
+  --hns-text-primary: #e7ebf3;
+  --hns-text-secondary: #a2acba;
+  --hns-text-muted: #6f7a89;
+  --hns-text-disabled: #4f5968;
+
+  --hns-accent: #8b7cff;
+  --hns-accent-strong: #a395ff;
+  --hns-accent-soft: rgba(139, 124, 255, 0.16);
+
+  --hns-success: #3ddc84;
+  --hns-success-soft: rgba(61, 220, 132, 0.12);
+
+  --hns-warning: #ffb454;
+  --hns-warning-soft: rgba(255, 180, 84, 0.12);
+
+  --hns-danger: #ff5f6d;
+  --hns-danger-soft: rgba(255, 95, 109, 0.12);
+
+  --hns-space-1: 4px;
+  --hns-space-2: 8px;
+  --hns-space-3: 12px;
+  --hns-space-4: 16px;
+  --hns-space-5: 20px;
+  --hns-space-6: 24px;
+  --hns-space-8: 32px;
+
+  --hns-radius-sm: 8px;
+  --hns-radius-md: 12px;
+  --hns-radius-lg: 16px;
+  --hns-radius-xl: 20px;
+
+  --hns-rail-width: 60px;
+  --hns-sidebar-width: 256px;
+  --hns-inspector-width: 360px;
+  --hns-topbar-height: 56px;
+
+  --hns-font-xs: 11px;
+  --hns-font-sm: 12px;
+  --hns-font-md: 14px;
+  --hns-font-lg: 16px;
+  --hns-font-xl: 20px;
+}
+
+[data-harness="light"] {
+  --hns-bg-app: #f6f7fb;
+  --hns-bg-elevated: #ffffff;
+  --hns-bg-panel: #f1f3f9;
+  --hns-bg-card: #ffffff;
+  --hns-bg-card-hover: #eef0f6;
+  --hns-bg-input: #ffffff;
+
+  --hns-border-subtle: rgba(15, 17, 23, 0.06);
+  --hns-border-medium: rgba(15, 17, 23, 0.10);
+  --hns-border-strong: rgba(15, 17, 23, 0.16);
+
+  --hns-text-primary: #0f1117;
+  --hns-text-secondary: #4a5364;
+  --hns-text-muted: #6f7a89;
+  --hns-text-disabled: #aab1bd;
+
+  --hns-accent: #6750e0;
+  --hns-accent-strong: #5440c8;
+  --hns-accent-soft: rgba(103, 80, 224, 0.10);
+
+  --hns-success: #1f9d55;
+  --hns-success-soft: rgba(31, 157, 85, 0.10);
+
+  --hns-warning: #d97706;
+  --hns-warning-soft: rgba(217, 119, 6, 0.10);
+
+  --hns-danger: #dc2626;
+  --hns-danger-soft: rgba(220, 38, 38, 0.10);
+}
+
+/* ------------------------------------------------------------------ */
+/* Shell layout                                                       */
+/* ------------------------------------------------------------------ */
+
+.harness-shell {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: var(--hns-bg-app);
+  color: var(--hns-text-primary);
+  font-family: var(--font-sans);
+  overflow: hidden;
+}
+
+.harness-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.harness-main {
+  flex: 1 1 auto;
+  min-height: 0;
+  background: var(--hns-bg-app);
+}
+
+.harness-main--scroll {
+  overflow: auto;
+  padding: var(--hns-space-6);
+}
+
+.harness-main--flex {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ------------------------------------------------------------------ */
+/* Icon rail                                                          */
+/* ------------------------------------------------------------------ */
+
+.harness-rail {
+  flex: 0 0 var(--hns-rail-width);
+  width: var(--hns-rail-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--hns-space-3) 0;
+  gap: var(--hns-space-2);
+  background: var(--hns-bg-elevated);
+  border-right: 1px solid var(--hns-border-subtle);
+}
+
+.harness-rail__brand {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--hns-space-2);
+  border-radius: var(--hns-radius-md);
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.harness-rail__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-1);
+  flex: 1 1 auto;
+}
+
+.harness-rail__btn {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--hns-radius-md);
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  position: relative;
+}
+
+.harness-rail__btn:hover,
+.harness-rail__btn:focus-visible {
+  color: var(--hns-text-primary);
+  background: var(--hns-bg-card-hover);
+  outline: none;
+}
+
+.harness-rail__btn--active {
+  color: var(--hns-accent-strong);
+  background: var(--hns-accent-soft);
+  border-color: var(--hns-accent-soft);
+}
+
+.harness-rail__btn--active::before {
+  content: "";
+  position: absolute;
+  left: -8px;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--hns-accent);
+}
+
+.harness-rail__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--hns-space-2);
+  margin-top: auto;
+}
+
+.harness-rail__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--hns-accent), var(--hns-accent-strong));
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.harness-rail__version {
+  font-size: 10px;
+  color: var(--hns-text-muted);
+  letter-spacing: 0.04em;
+}
+
+/* ------------------------------------------------------------------ */
+/* Secondary sidebar                                                  */
+/* ------------------------------------------------------------------ */
+
+.harness-sidebar {
+  flex: 0 0 var(--hns-sidebar-width);
+  width: var(--hns-sidebar-width);
+  display: flex;
+  flex-direction: column;
+  background: var(--hns-bg-elevated);
+  border-right: 1px solid var(--hns-border-subtle);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.harness-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--hns-space-4) var(--hns-space-4) var(--hns-space-3);
+  flex-shrink: 0;
+}
+
+.harness-sidebar__title {
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+  margin: 0;
+}
+
+.harness-sidebar__close-btn {
+  appearance: none;
+  border: 1px solid var(--hns-border-medium);
+  background: transparent;
+  border-radius: var(--hns-radius-sm);
+  width: 28px;
+  height: 28px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+}
+
+.harness-sidebar__nav {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0 var(--hns-space-3) var(--hns-space-4);
+}
+
+.harness-sidebar__group {
+  margin-top: var(--hns-space-4);
+}
+
+.harness-sidebar__group:first-child {
+  margin-top: var(--hns-space-2);
+}
+
+.harness-sidebar__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--hns-space-2) var(--hns-space-3);
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.10em;
+  color: var(--hns-text-muted);
+  font-weight: 600;
+}
+
+.harness-sidebar__group-action {
+  appearance: none;
+  border: 1px solid var(--hns-border-medium);
+  background: transparent;
+  border-radius: var(--hns-radius-sm);
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+
+.harness-sidebar__group-action:hover,
+.harness-sidebar__group-action:focus-visible {
+  color: var(--hns-accent-strong);
+  border-color: var(--hns-accent-soft);
+  background: var(--hns-accent-soft);
+  outline: none;
+}
+
+.harness-sidebar__link,
+.harness-sidebar__chat-item {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-2) var(--hns-space-3);
+  border-radius: var(--hns-radius-md);
+  color: var(--hns-text-secondary);
+  font-size: var(--hns-font-md);
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid transparent;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.harness-sidebar__link:hover,
+.harness-sidebar__link:focus-visible,
+.harness-sidebar__chat-item:hover,
+.harness-sidebar__chat-item:focus-visible {
+  background: var(--hns-bg-card-hover);
+  color: var(--hns-text-primary);
+  text-decoration: none;
+  outline: none;
+}
+
+.harness-sidebar__link.active,
+.harness-sidebar__chat-item.active {
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+  border-color: var(--hns-accent-soft);
+}
+
+.harness-sidebar__link-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.harness-sidebar__link-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.harness-sidebar__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+}
+
+.harness-sidebar__chat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.harness-sidebar__chat-item {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+}
+
+.harness-sidebar__chat-item-title {
+  font-size: var(--hns-font-md);
+  color: var(--hns-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.harness-sidebar__chat-item:not(.active) .harness-sidebar__chat-item-title {
+  color: var(--hns-text-secondary);
+}
+
+.harness-sidebar__chat-item-preview {
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.harness-sidebar__state {
+  padding: var(--hns-space-2) var(--hns-space-3);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.harness-sidebar__state--error {
+  color: var(--hns-danger);
+}
+
+.harness-sidebar__footer {
+  padding: var(--hns-space-3) var(--hns-space-4);
+  border-top: 1px solid var(--hns-border-subtle);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hns-space-2);
+}
+
+/* ------------------------------------------------------------------ */
+/* Top bar                                                            */
+/* ------------------------------------------------------------------ */
+
+.harness-topbar {
+  flex: 0 0 var(--hns-topbar-height);
+  height: var(--hns-topbar-height);
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-3);
+  padding: 0 var(--hns-space-4);
+  background: var(--hns-bg-app);
+  border-bottom: 1px solid var(--hns-border-subtle);
+}
+
+.harness-topbar__left,
+.harness-topbar__center,
+.harness-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.harness-topbar__left {
+  flex: 0 0 auto;
+}
+
+.harness-topbar__center {
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.harness-topbar__right {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.harness-topbar__brand {
+  font-size: var(--hns-font-lg);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--hns-text-primary);
+}
+
+.harness-topbar__divider {
+  height: 24px;
+  width: 1px;
+  background: var(--hns-border-medium);
+  margin: 0 var(--hns-space-2);
+}
+
+.harness-topbar__pill,
+.harness-topbar__btn,
+.harness-topbar__icon-btn,
+.harness-topbar__menu-btn {
+  appearance: none;
+  border: 1px solid var(--hns-border-medium);
+  background: var(--hns-bg-card);
+  color: var(--hns-text-primary);
+  font-size: var(--hns-font-sm);
+  font-weight: 500;
+  border-radius: var(--hns-radius-md);
+  padding: 0 var(--hns-space-3);
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.harness-topbar__pill:hover,
+.harness-topbar__btn:hover,
+.harness-topbar__icon-btn:hover,
+.harness-topbar__menu-btn:hover,
+.harness-topbar__pill:focus-visible,
+.harness-topbar__btn:focus-visible,
+.harness-topbar__icon-btn:focus-visible,
+.harness-topbar__menu-btn:focus-visible {
+  background: var(--hns-bg-card-hover);
+  border-color: var(--hns-border-strong);
+  outline: none;
+}
+
+.harness-topbar__icon-btn {
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.harness-topbar__btn--primary {
+  background: var(--hns-accent-soft);
+  border-color: transparent;
+  color: var(--hns-accent-strong);
+}
+
+.harness-topbar__btn--primary:hover,
+.harness-topbar__btn--primary:focus-visible {
+  background: var(--hns-accent);
+  color: #fff;
+}
+
+.harness-topbar__btn .kbd,
+.harness-topbar__pill .kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  border: 1px solid var(--hns-border-medium);
+  border-radius: 4px;
+  padding: 1px 4px;
+  color: var(--hns-text-muted);
+}
+
+.harness-topbar__pill-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.harness-topbar__pill--connected .harness-topbar__pill-dot {
+  background: var(--hns-success);
+  box-shadow: 0 0 0 3px var(--hns-success-soft);
+}
+
+.harness-topbar__pill--reconnecting .harness-topbar__pill-dot {
+  background: var(--hns-warning);
+  animation: harness-pulse 1.5s ease-in-out infinite;
+}
+
+.harness-topbar__pill--disconnected .harness-topbar__pill-dot {
+  background: var(--hns-danger);
+  box-shadow: 0 0 0 3px var(--hns-danger-soft);
+}
+
+.harness-topbar__pill--coding {
+  color: var(--hns-accent-strong);
+  border-color: var(--hns-accent-soft);
+}
+
+.harness-topbar__pill--plan-on {
+  color: var(--hns-accent-strong);
+  border-color: var(--hns-accent-soft);
+  background: var(--hns-accent-soft);
+}
+
+.harness-topbar__pill--plan-off {
+  color: var(--hns-text-secondary);
+}
+
+@keyframes harness-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.harness-topbar__mobile-toggle {
+  display: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Inspector                                                          */
+/* ------------------------------------------------------------------ */
+
+.harness-inspector {
+  flex: 0 0 var(--hns-inspector-width);
+  width: var(--hns-inspector-width);
+  display: flex;
+  flex-direction: column;
+  background: var(--hns-bg-elevated);
+  border-left: 1px solid var(--hns-border-subtle);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.harness-inspector__tabs {
+  display: flex;
+  gap: var(--hns-space-3);
+  padding: 0 var(--hns-space-4);
+  border-bottom: 1px solid var(--hns-border-subtle);
+  flex-shrink: 0;
+}
+
+.harness-inspector__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: var(--hns-space-3) 0;
+  font-size: var(--hns-font-md);
+  font-weight: 500;
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 120ms ease, border-color 120ms ease;
+}
+
+.harness-inspector__tab:hover,
+.harness-inspector__tab:focus-visible {
+  color: var(--hns-text-primary);
+  outline: none;
+}
+
+.harness-inspector__tab--active {
+  color: var(--hns-accent-strong);
+  border-bottom-color: var(--hns-accent);
+}
+
+.harness-inspector__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: var(--hns-space-4);
+}
+
+.harness-inspector__card {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-2);
+}
+
+.harness-inspector__card + .harness-inspector__card {
+  margin-top: var(--hns-space-3);
+}
+
+.harness-inspector__card-title {
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+  margin: 0;
+}
+
+.harness-inspector__card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-sm);
+}
+
+.harness-inspector__card-label {
+  color: var(--hns-text-muted);
+}
+
+.harness-inspector__card-value {
+  color: var(--hns-text-primary);
+  font-weight: 500;
+}
+
+.harness-inspector__progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-2);
+}
+
+.harness-inspector__progress-track {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--hns-bg-card-hover);
+  overflow: hidden;
+}
+
+.harness-inspector__progress-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--harness-progress-pct, 0%);
+  background: var(--hns-accent);
+  transition: width 200ms ease;
+}
+
+.harness-inspector__progress--warning .harness-inspector__progress-fill {
+  background: var(--hns-warning);
+}
+
+.harness-inspector__progress--critical .harness-inspector__progress-fill {
+  background: var(--hns-danger);
+}
+
+.harness-inspector__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--hns-space-8) var(--hns-space-4);
+  text-align: center;
+  color: var(--hns-text-muted);
+  gap: var(--hns-space-2);
+}
+
+.harness-inspector__placeholder-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+}
+
+.inspector-log__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.inspector-log__filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.inspector-log__filter select,
+.inspector-log__search {
+  appearance: none;
+  background: var(--hns-bg-input);
+  border: 1px solid var(--hns-border-medium);
+  color: var(--hns-text-primary);
+  border-radius: var(--hns-radius-sm);
+  padding: 4px 8px;
+  font-size: var(--hns-font-sm);
+}
+
+.inspector-log__search {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.inspector-log__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.inspector-log__row {
+  display: grid;
+  grid-template-columns: 60px 56px 1fr;
+  gap: var(--hns-space-2);
+  padding: 6px 8px;
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-sm);
+}
+
+.inspector-log__time {
+  color: var(--hns-text-muted);
+}
+
+.inspector-log__level {
+  font-weight: 600;
+  color: var(--hns-text-secondary);
+  text-align: center;
+}
+
+.inspector-log__level--warn {
+  color: var(--hns-warning);
+}
+
+.inspector-log__level--error {
+  color: var(--hns-danger);
+}
+
+.inspector-log__message {
+  color: var(--hns-text-primary);
+  word-break: break-word;
+}
+
+.harness-inspector__toggle {
+  appearance: none;
+  border: 1px solid var(--hns-border-medium);
+  background: var(--hns-bg-card);
+  color: var(--hns-text-secondary);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--hns-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.harness-inspector__toggle:hover,
+.harness-inspector__toggle:focus-visible {
+  color: var(--hns-accent-strong);
+  border-color: var(--hns-accent-soft);
+  background: var(--hns-accent-soft);
+  outline: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Command palette                                                    */
+/* ------------------------------------------------------------------ */
+
+.command-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+}
+
+.command-palette__backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.55);
+  cursor: pointer;
+}
+
+.command-palette__sheet {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  max-height: 70vh;
+  margin: 0 var(--hns-space-4);
+  background: var(--hns-bg-elevated);
+  border: 1px solid var(--hns-border-medium);
+  border-radius: var(--hns-radius-lg);
+  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.command-palette__search {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  padding: var(--hns-space-3) var(--hns-space-4);
+  border-bottom: 1px solid var(--hns-border-subtle);
+  background: var(--hns-bg-panel);
+}
+
+.command-palette__search input {
+  flex: 1 1 auto;
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--hns-text-primary);
+  font-size: var(--hns-font-md);
+  outline: none;
+}
+
+.command-palette__group {
+  display: flex;
+  flex-direction: column;
+  padding: var(--hns-space-2) 0;
+  border-bottom: 1px solid var(--hns-border-subtle);
+}
+
+.command-palette__group:last-of-type {
+  border-bottom: none;
+}
+
+.command-palette__group-label {
+  padding: 4px var(--hns-space-4);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--hns-text-muted);
+}
+
+.command-palette__item {
+  appearance: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-2) var(--hns-space-4);
+  font-size: var(--hns-font-md);
+  color: var(--hns-text-primary);
+  cursor: pointer;
+}
+
+.command-palette__item--active {
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+}
+
+.command-palette__empty {
+  padding: var(--hns-space-5);
+  text-align: center;
+  color: var(--hns-text-muted);
+  font-size: var(--hns-font-md);
+}
+
+.command-palette .kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border: 1px solid var(--hns-border-medium);
+  border-radius: 4px;
+  color: var(--hns-text-muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Skip link                                                          */
+/* ------------------------------------------------------------------ */
+
+.harness-shell .skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.harness-shell .skip-link:focus {
+  position: absolute;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: var(--hns-space-2) var(--hns-space-3);
+  clip: auto;
+  white-space: normal;
+  left: var(--hns-space-2);
+  top: var(--hns-space-2);
+  z-index: 10;
+  border-radius: var(--hns-radius-sm);
+  background: var(--hns-accent);
+  color: #fff;
+}
+
+/* ------------------------------------------------------------------ */
+/* Responsive                                                         */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 1023px) {
+  .harness-inspector {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .harness-rail {
+    display: none;
+  }
+
+  .harness-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 1040;
+    width: 280px;
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
+    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
+  }
+
+  .harness-sidebar.mobile-open {
+    transform: translateX(0);
+  }
+
+  .harness-sidebar__close-btn {
+    display: inline-flex;
+  }
+
+  .harness-sidebar-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: min(280px, 85vw);
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    padding: 0;
+    z-index: 1050;
+    cursor: pointer;
+  }
+
+  .harness-topbar {
+    padding: 0 var(--hns-space-3);
+    gap: var(--hns-space-2);
+  }
+
+  .harness-topbar__mobile-toggle {
+    display: inline-flex;
+  }
+
+  .harness-topbar__center {
+    justify-content: flex-start;
+    gap: var(--hns-space-1);
+    overflow: hidden;
+  }
+
+  .harness-topbar__brand,
+  .harness-topbar__menu-btn,
+  .harness-topbar__divider,
+  .harness-topbar__pill--coding,
+  .harness-topbar__pill--plan-on,
+  .harness-topbar__pill--plan-off {
+    display: none;
+  }
+
+  .harness-topbar__btn span:not(.kbd),
+  .harness-topbar__pill span:not(.harness-topbar__pill-dot) {
+    display: none;
+  }
+
+  .harness-topbar__btn .kbd {
+    display: none;
+  }
+
+  .harness-topbar__btn,
+  .harness-topbar__pill {
+    padding: 0 var(--hns-space-2);
+  }
+
+  .harness-main--scroll {
+    padding: var(--hns-space-4);
+  }
+}

From 9e1be529a5ec25a78ab904b911c992bf8c0f30e4 Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Wed, 29 Apr 2026 18:12:55 -0400
Subject: [PATCH 2/6] feat(dashboard): wire harness chrome into the chat thread
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wraps ChatPage in HarnessChatLayout so the redesigned TaskHeader appears
above the active conversation, then collapses the legacy in-page
duplicates of the harness chrome:

- ContextPanel + ContextPanel offcanvas hidden — InspectorPanel covers
  the same telemetry/plan/tools/logs/memory surface.
- ChatSessionTabs + ChatToolbar hidden in standalone mode — recent
  sessions live in the IconRail/SecondarySidebar and connection / tier /
  Plan ON state lives in HarnessTopBar.
- chat-container, chat-window, message-bubble, chat-input-area, starter
  prompts and inline tool-call cards repainted with --hns-* tokens so the
  thread matches the dark agent-run aesthetic.

useChatRunSummary derives an AgentRunStatus + duration counter from the
runtime store and useRecentSessions title, so TaskHeader keeps a live
"Started 10:31 AM · 12m 45s · N steps" subtitle without needing new
backend fields.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/agentRun/HarnessChatLayout.tsx |  31 ++++
 .../components/agentRun/useChatRunSummary.ts  |  80 ++++++++
 dashboard/src/pages/ChatPage.tsx              |   5 +-
 dashboard/src/styles/harness.scss             | 173 ++++++++++++++++++
 4 files changed, 288 insertions(+), 1 deletion(-)
 create mode 100644 dashboard/src/components/agentRun/HarnessChatLayout.tsx
 create mode 100644 dashboard/src/components/agentRun/useChatRunSummary.ts

diff --git a/dashboard/src/components/agentRun/HarnessChatLayout.tsx b/dashboard/src/components/agentRun/HarnessChatLayout.tsx
new file mode 100644
index 000000000..024f144de
--- /dev/null
+++ b/dashboard/src/components/agentRun/HarnessChatLayout.tsx
@@ -0,0 +1,31 @@
+import { useState, type ReactNode } from 'react';
+import TaskHeader from './TaskHeader';
+import { useChatRunSummary } from './useChatRunSummary';
+
+interface HarnessChatLayoutProps {
+  children: ReactNode;
+}
+
+export default function HarnessChatLayout({ children }: HarnessChatLayoutProps) {
+  const summary = useChatRunSummary();
+  const [titleOverride, setTitleOverride] = useState<string | null>(null);
+  const title = titleOverride ?? summary.title;
+
+  return (
+    <div className="harness-chat-layout">
+      <div className="harness-chat-layout__hero">
+        <TaskHeader
+          title={title}
+          status={summary.status}
+          startedAt={summary.startedAt}
+          durationMs={summary.durationMs}
+          stepCount={summary.stepCount}
+          onTitleChange={(next) => setTitleOverride(next)}
+        />
+      </div>
+      <div className="harness-chat-layout__body">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/agentRun/useChatRunSummary.ts b/dashboard/src/components/agentRun/useChatRunSummary.ts
new file mode 100644
index 000000000..2d339e568
--- /dev/null
+++ b/dashboard/src/components/agentRun/useChatRunSummary.ts
@@ -0,0 +1,80 @@
+import { useEffect, useRef, useState } from 'react';
+import { useChatRuntimeStore } from '../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../store/chatSessionStore';
+import { useRecentSessions } from '../../hooks/useSessions';
+import type { AgentRunStatus } from './types';
+
+export interface ChatRunSummary {
+  title: string;
+  status: AgentRunStatus;
+  startedAt: string;
+  durationMs: number;
+  stepCount: number;
+}
+
+function resolveStatus(running: boolean, typing: boolean, hasMessages: boolean): AgentRunStatus {
+  if (running) {
+    return 'running';
+  }
+  if (typing) {
+    return 'running';
+  }
+  if (hasMessages) {
+    return 'idle';
+  }
+  return 'idle';
+}
+
+function resolveTitle(serverTitle: string | null | undefined, sessionId: string): string {
+  if (serverTitle != null && serverTitle.trim().length > 0) {
+    return serverTitle;
+  }
+  if (sessionId.length > 8) {
+    return `Session ${sessionId.slice(0, 8)}`;
+  }
+  return 'Workspace chat';
+}
+
+export function useChatRunSummary(): ChatRunSummary {
+  const sessionId = useChatSessionStore((s) => s.activeSessionId);
+  const clientInstanceId = useChatSessionStore((s) => s.clientInstanceId);
+  const session = useChatRuntimeStore((s) => s.sessions[sessionId]);
+  const { data: recentSessions } = useRecentSessions('web', clientInstanceId, 5);
+  const activeSummary = recentSessions?.find((entry) => entry.conversationKey === sessionId);
+
+  const running = session?.running ?? false;
+  const typing = session?.typing ?? false;
+  const messages = session?.messages ?? [];
+  const stepCount = messages.length;
+
+  const startedAtRef = useRef<string>(new Date().toISOString());
+  const [now, setNow] = useState<number>(() => Date.now());
+
+  // Reset the start anchor whenever the active session changes so the duration
+  // counter reflects the lifetime of the visible conversation.
+  useEffect(() => {
+    startedAtRef.current = new Date().toISOString();
+    setNow(Date.now());
+  }, [sessionId]);
+
+  // Tick every second while there is at least one message so the duration in the
+  // task header stays accurate without requiring server time.
+  useEffect(() => {
+    if (stepCount === 0) {
+      return undefined;
+    }
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [stepCount]);
+
+  const startedAtMs = new Date(startedAtRef.current).getTime();
+  const durationMs = stepCount === 0 ? 0 : Math.max(0, now - startedAtMs);
+
+  return {
+    title: resolveTitle(activeSummary?.title ?? null, sessionId),
+    status: resolveStatus(running, typing, stepCount > 0),
+    startedAt: startedAtRef.current,
+    durationMs,
+    stepCount,
+  };
+}
diff --git a/dashboard/src/pages/ChatPage.tsx b/dashboard/src/pages/ChatPage.tsx
index c16f0c3b6..0cfbeb23b 100644
--- a/dashboard/src/pages/ChatPage.tsx
+++ b/dashboard/src/pages/ChatPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, type ReactElement } from 'react';
 import { Button, Modal } from '../components/ui/tailwind-components';
 import { useNavigate } from 'react-router-dom';
 import ChatWindow from '../components/chat/ChatWindow';
+import HarnessChatLayout from '../components/agentRun/HarnessChatLayout';
 import { useRuntimeConfig } from '../hooks/useSettings';
 import {
   dismissStartupSetupInviteForSession,
@@ -37,7 +38,9 @@ export default function ChatPage(): ReactElement {
 
   return (
     <>
-      <ChatWindow />
+      <HarnessChatLayout>
+        <ChatWindow />
+      </HarnessChatLayout>
       <Modal show={isSetupInviteVisible} onHide={handleCloseSetupInvite} centered>
         <Modal.Header closeButton>
           <Modal.Title>Complete Startup Setup?</Modal.Title>
diff --git a/dashboard/src/styles/harness.scss b/dashboard/src/styles/harness.scss
index 3b40d5e86..5b8bac5e5 100644
--- a/dashboard/src/styles/harness.scss
+++ b/dashboard/src/styles/harness.scss
@@ -953,6 +953,179 @@
   color: var(--hns-text-muted);
 }
 
+/* ------------------------------------------------------------------ */
+/* Chat shell adapter                                                 */
+/* The legacy ChatWindow renders ChatSessionTabs / ChatToolbar /      */
+/* ContextPanel inside .chat-page-layout. The harness chrome already  */
+/* hosts equivalents (TopBar pills, IconRail, SecondarySidebar with   */
+/* recent sessions, InspectorPanel) so the legacy duplicates are      */
+/* hidden and the inner thread is restyled with harness tokens.       */
+/* ------------------------------------------------------------------ */
+
+.harness-chat-layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  background: var(--hns-bg-app);
+}
+
+.harness-chat-layout__hero {
+  width: 100%;
+  max-width: 860px;
+  margin: 0 auto;
+  padding: var(--hns-space-5) var(--hns-space-4) var(--hns-space-3);
+}
+
+.harness-chat-layout__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.harness-chat-layout__body > .chat-page-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.harness-shell .chat-page-layout {
+  background: transparent;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) > .context-panel {
+  display: none;
+}
+
+.harness-shell .context-panel-offcanvas {
+  display: none;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-session-tabs,
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-toolbar {
+  display: none;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-container {
+  flex: 1 1 auto;
+  min-height: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-workspace-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: transparent;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-window {
+  flex: 1 1 auto;
+  background: transparent;
+  padding: 0 var(--hns-space-4);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-content-shell {
+  width: 100%;
+  max-width: 860px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-3) 0 var(--hns-space-4);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .message-bubble {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-lg);
+  color: var(--hns-text-primary);
+  box-shadow: none;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .message-bubble--user {
+  background: var(--hns-bg-elevated);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .message-bubble--assistant {
+  background: var(--hns-bg-card);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .message-author,
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .message-time {
+  color: var(--hns-text-muted);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .tool-call-card {
+  background: var(--hns-bg-panel);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-md);
+  color: var(--hns-text-primary);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-input-area {
+  background: transparent;
+  border-top: 1px solid var(--hns-border-subtle);
+  padding: var(--hns-space-3) var(--hns-space-4) var(--hns-space-4);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-input-area > * {
+  width: 100%;
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-input-form {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-medium);
+  border-radius: var(--hns-radius-lg);
+  box-shadow: none;
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-input-form textarea,
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-input-form input {
+  background: transparent;
+  color: var(--hns-text-primary);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-history-state {
+  color: var(--hns-text-muted);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-empty-state {
+  color: var(--hns-text-secondary);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-empty-state h3,
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .chat-empty-state h4 {
+  color: var(--hns-text-primary);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .starter-prompt {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  color: var(--hns-text-primary);
+  border-radius: var(--hns-radius-md);
+}
+
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .starter-prompt:hover,
+.harness-shell .chat-page-layout:not(.chat-page-layout--embedded) .starter-prompt:focus-visible {
+  border-color: var(--hns-accent-soft);
+  background: var(--hns-bg-card-hover);
+}
+
 /* ------------------------------------------------------------------ */
 /* Skip link                                                          */
 /* ------------------------------------------------------------------ */

From 5b731f348634297af039f1a6b2a8fb91fb84c00a Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Wed, 29 Apr 2026 18:32:13 -0400
Subject: [PATCH 3/6] feat(dashboard): collapse harness sidebar to a
 hover-expand rail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the separate IconRail in favour of a single sidebar that defaults
to 60px (icons only) and expands to 280px on hover or focus, painted in
the harness palette. Brand and version footer are folded into the
sidebar so the left chrome no longer feels like "old + new" stacked.

Inspector polish:
- Tools tab no longer shows a demo IncidentCard; only a §23 reference
  timeline appears when there are no live tool calls.
- Plan tab swaps the demo PlanBlock for an explanatory placeholder when
  Plan mode is OFF; the sample render only appears once Plan mode is
  toggled on so users see the layout context only when relevant.
- Logs tab fetches the system feed but filters by the active
  conversationKey + sessionRecordId substring by default; a toggle
  expands the view back to runtime-wide logs when needed.
- Compact context action now calls /sessions/{id}/compact and surfaces
  the result via toast; export session reuses the existing custom event
  hook; debug bundle remains a placeholder until the runtime ships a
  snapshot endpoint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../layout/harness/HarnessShell.tsx           |   4 -
 .../components/layout/harness/IconRail.tsx    |  94 ------
 .../layout/harness/SecondarySidebar.tsx       |  17 +-
 .../inspector/InspectorActionsCard.tsx        |  62 ++--
 .../harness/inspector/InspectorLogsTab.tsx    |  76 ++++-
 .../harness/inspector/InspectorPlanTab.tsx    |  43 ++-
 .../harness/inspector/InspectorToolsTab.tsx   |  10 +-
 .../layout/harness/useRailVersionLabel.ts     |   6 -
 dashboard/src/styles/harness.scss             | 289 ++++++++++--------
 9 files changed, 327 insertions(+), 274 deletions(-)
 delete mode 100644 dashboard/src/components/layout/harness/IconRail.tsx
 delete mode 100644 dashboard/src/components/layout/harness/useRailVersionLabel.ts

diff --git a/dashboard/src/components/layout/harness/HarnessShell.tsx b/dashboard/src/components/layout/harness/HarnessShell.tsx
index 6026e65b8..d5e08b4b0 100644
--- a/dashboard/src/components/layout/harness/HarnessShell.tsx
+++ b/dashboard/src/components/layout/harness/HarnessShell.tsx
@@ -6,8 +6,6 @@ import { useInspectorStore } from '../../../store/inspectorStore';
 import { useCommandPaletteShortcut } from '../../commandPalette/useCommandPaletteShortcut';
 import { useSessionExport } from '../../commandPalette/useSessionExport';
 import CommandPalette from '../../commandPalette/CommandPalette';
-import IconRail from './IconRail';
-import { useRailVersionLabel } from './useRailVersionLabel';
 import SecondarySidebar from './SecondarySidebar';
 import HarnessTopBar from './HarnessTopBar';
 import InspectorPanel from './InspectorPanel';
@@ -30,7 +28,6 @@ export default function HarnessShell({ children }: HarnessShellProps) {
   const { pathname } = useLocation();
   const theme = useThemeStore((s) => s.theme);
   const inspectorOpen = useInspectorStore((s) => s.panelOpen);
-  const versionLabel = useRailVersionLabel();
   useCommandPaletteShortcut();
   useSessionExport();
   const showInspector = inspectorOpen && (pathname === '/' || pathname.startsWith('/chat'));
@@ -51,7 +48,6 @@ export default function HarnessShell({ children }: HarnessShellProps) {
   return (
     <div className="harness-shell" data-harness-theme={theme}>
       <a href="#main-content" className="skip-link">Skip to main content</a>
-      <IconRail versionLabel={versionLabel} />
       <SecondarySidebar />
       <div className="harness-body">
         <ChatRuntimeController />
diff --git a/dashboard/src/components/layout/harness/IconRail.tsx b/dashboard/src/components/layout/harness/IconRail.tsx
deleted file mode 100644
index 434ea8261..000000000
--- a/dashboard/src/components/layout/harness/IconRail.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useNavigate, useLocation } from 'react-router-dom';
-import {
-  FiBarChart2,
-  FiCalendar,
-  FiCode,
-  FiMessageSquare,
-  FiSearch,
-  FiSettings,
-  FiTerminal,
-  FiUser,
-  FiZap,
-} from 'react-icons/fi';
-import type { ReactNode } from 'react';
-
-interface RailItem {
-  key: string;
-  to: string;
-  matchPrefixes: string[];
-  icon: ReactNode;
-  ariaLabel: string;
-}
-
-const RAIL_ITEMS: RailItem[] = [
-  { key: 'chat', to: '/', matchPrefixes: ['/'], icon: <FiMessageSquare size={18} />, ariaLabel: 'Open chat workspace' },
-  { key: 'search', to: '/sessions', matchPrefixes: ['/sessions'], icon: <FiSearch size={18} />, ariaLabel: 'Open sessions search' },
-  { key: 'automation', to: '/scheduler', matchPrefixes: ['/scheduler', '/webhooks'], icon: <FiCalendar size={18} />, ariaLabel: 'Open automation' },
-  { key: 'workspace', to: '/workspace', matchPrefixes: ['/workspace', '/ide'], icon: <FiCode size={18} />, ariaLabel: 'Open workspace' },
-  { key: 'agent', to: '/skills', matchPrefixes: ['/skills', '/prompts'], icon: <FiZap size={18} />, ariaLabel: 'Open agent skills' },
-  { key: 'observability', to: '/analytics', matchPrefixes: ['/analytics', '/diagnostics', '/self-evolving'], icon: <FiBarChart2 size={18} />, ariaLabel: 'Open observability' },
-  { key: 'logs', to: '/logs', matchPrefixes: ['/logs'], icon: <FiTerminal size={18} />, ariaLabel: 'Open logs' },
-  { key: 'settings', to: '/settings', matchPrefixes: ['/settings'], icon: <FiSettings size={18} />, ariaLabel: 'Open settings' },
-];
-
-function isRailItemActive(item: RailItem, pathname: string): boolean {
-  if (item.matchPrefixes.includes('/')) {
-    return pathname === '/' || pathname.startsWith('/chat');
-  }
-  return item.matchPrefixes.some((prefix) => pathname.startsWith(prefix));
-}
-
-interface IconRailProps {
-  versionLabel: string;
-  onActivityClick?: () => void;
-}
-
-function IconRailItem({ item, active, onClick }: { item: RailItem; active: boolean; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      className={`harness-rail__btn${active ? ' harness-rail__btn--active' : ''}`}
-      onClick={onClick}
-      aria-label={item.ariaLabel}
-      title={item.ariaLabel}
-    >
-      {item.icon}
-    </button>
-  );
-}
-
-function IconRailContent({ versionLabel }: { versionLabel: string }) {
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  return (
-    <aside className="harness-rail" aria-label="Workspace shortcuts">
-      <div className="harness-rail__brand" aria-hidden="true">G</div>
-      <div className="harness-rail__items">
-        {RAIL_ITEMS.map((item) => (
-          <IconRailItem
-            key={item.key}
-            item={item}
-            active={isRailItemActive(item, pathname)}
-            onClick={() => navigate(item.to)}
-          />
-        ))}
-      </div>
-      <div className="harness-rail__footer">
-        <button
-          type="button"
-          className="harness-rail__btn"
-          aria-label="Profile and account"
-          title="Profile"
-        >
-          <FiUser size={16} />
-        </button>
-        <span className="harness-rail__version" aria-label={`Dashboard version ${versionLabel}`}>{versionLabel}</span>
-      </div>
-    </aside>
-  );
-}
-
-export default function IconRail({ versionLabel }: IconRailProps) {
-  return <IconRailContent versionLabel={versionLabel} />;
-}
diff --git a/dashboard/src/components/layout/harness/SecondarySidebar.tsx b/dashboard/src/components/layout/harness/SecondarySidebar.tsx
index 347b470f3..07976d353 100644
--- a/dashboard/src/components/layout/harness/SecondarySidebar.tsx
+++ b/dashboard/src/components/layout/harness/SecondarySidebar.tsx
@@ -4,7 +4,7 @@ import { useChatSessionStore } from '../../../store/chatSessionStore';
 import { useSidebarStore } from '../../../store/sidebarStore';
 import { useActiveSession, useCreateSession, useRecentSessions } from '../../../hooks/useSessions';
 import { useRuntimeConfig } from '../../../hooks/useSettings';
-import { useSystemUpdateStatus } from '../../../hooks/useSystem';
+import { useSystemHealth, useSystemUpdateStatus } from '../../../hooks/useSystem';
 import { isLegacyCompatibleConversationKey, normalizeConversationKey } from '../../../utils/conversationKey';
 import { getSidebarUpdateBadge } from '../../../utils/systemUpdateUi';
 import { createUuid } from '../../../utils/uuid';
@@ -44,7 +44,9 @@ export default function SecondarySidebar() {
   const activeSessionId = useChatSessionStore((s) => s.activeSessionId);
   const setActiveSessionId = useChatSessionStore((s) => s.setActiveSessionId);
   const { data: runtimeConfig } = useRuntimeConfig();
+  const { data: health } = useSystemHealth();
   const isSelfEvolvingEnabled = runtimeConfig?.selfEvolving?.enabled === true;
+  const versionLabel = health?.version != null ? `v${health.version}` : 'v…';
   const {
     data: recentSessionsData,
     isLoading: recentSessionsLoading,
@@ -96,8 +98,9 @@ export default function SecondarySidebar() {
         className={`harness-sidebar sidebar${mobileOpen ? ' mobile-open' : ''}`}
         aria-label="Primary navigation"
       >
-        <div className="harness-sidebar__header">
-          <h2 className="harness-sidebar__title">Workspace</h2>
+        <div className="harness-sidebar__brand">
+          <span className="harness-sidebar__brand-mark" aria-hidden="true">G</span>
+          <span className="harness-sidebar__brand-text">GolemCore</span>
           <button
             type="button"
             className="harness-sidebar__close-btn d-md-none"
@@ -111,7 +114,7 @@ export default function SecondarySidebar() {
           {SIDEBAR_GROUPS.map((group) => (
             <div key={group.id} className="harness-sidebar__group">
               <div className="harness-sidebar__group-header">
-                <span>{group.label}</span>
+                <span className="harness-sidebar__group-label">{group.label}</span>
               </div>
               {group.links.filter((link) => shouldRenderLink(link, isSelfEvolvingEnabled)).map((link) => (
                 <NavLink
@@ -119,6 +122,8 @@ export default function SecondarySidebar() {
                   to={link.to}
                   end={link.end === true}
                   onClick={handleNavClick}
+                  aria-label={link.label}
+                  title={link.label}
                   className={({ isActive }) => `harness-sidebar__link${isActive ? ' active' : ''}`}
                 >
                   <span className="harness-sidebar__link-icon" aria-hidden="true">{link.icon}</span>
@@ -138,6 +143,10 @@ export default function SecondarySidebar() {
             onSessionClick={handleSessionClick}
           />
         </nav>
+        <div className="harness-sidebar__footer" aria-label={`Dashboard version ${versionLabel}`}>
+          <span className="harness-sidebar__footer-mark" aria-hidden="true">●</span>
+          <span className="harness-sidebar__footer-text">{versionLabel}</span>
+        </div>
       </aside>
     </>
   );
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx b/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
index 8f5773a84..5c49d69b3 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
@@ -1,38 +1,60 @@
+import { useState } from 'react';
 import { FiArchive, FiDownload, FiZap } from 'react-icons/fi';
 import toast from 'react-hot-toast';
+import { compactSession } from '../../../../api/sessions';
+import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { extractErrorMessage } from '../../../../utils/extractErrorMessage';
 
-interface InspectorActionsCardProps {
-  onCompactContext?: () => void;
-  onExportSession?: () => void;
-  onDebugBundle?: () => void;
-}
+const EXPORT_EVENT = 'harness:export-session';
 
-function announceComingSoon(action: string): void {
-  toast(`${action} is coming in a follow-up release`);
-}
+export default function InspectorActionsCard() {
+  const conversationKey = useChatSessionStore((s) => s.activeSessionId);
+  const sessionRecordId = useChatRuntimeStore((s) => s.sessions[conversationKey]?.sessionRecordId ?? null);
+  const [compacting, setCompacting] = useState(false);
+
+  const handleCompact = async (): Promise<void> => {
+    if (sessionRecordId == null) {
+      toast('Compact context is available once the session has been registered with the server.');
+      return;
+    }
+    setCompacting(true);
+    try {
+      const result = await compactSession(sessionRecordId);
+      toast.success(`Compacted context — removed ${result.removed} message${result.removed === 1 ? '' : 's'}`);
+    } catch (error: unknown) {
+      toast.error(extractErrorMessage(error));
+    } finally {
+      setCompacting(false);
+    }
+  };
+
+  const handleExportSession = (): void => {
+    window.dispatchEvent(new CustomEvent(EXPORT_EVENT));
+  };
 
-export default function InspectorActionsCard({
-  onCompactContext,
-  onExportSession,
-  onDebugBundle,
-}: InspectorActionsCardProps) {
-  const compact = onCompactContext ?? (() => announceComingSoon('Context compaction'));
-  const exportSession = onExportSession ?? (() => announceComingSoon('Session export'));
-  const debugBundle = onDebugBundle ?? (() => announceComingSoon('Debug bundle export'));
+  const handleDebugBundle = (): void => {
+    toast('Debug bundle export will arrive once the runtime exposes a snapshot endpoint.');
+  };
 
   return (
     <section className="harness-inspector__card" aria-label="Run actions">
       <h3 className="harness-inspector__card-title">Actions</h3>
       <div className="plan-block__actions">
-        <button type="button" className="agent-btn" onClick={compact}>
+        <button
+          type="button"
+          className="agent-btn"
+          onClick={handleCompact}
+          disabled={compacting}
+        >
           <FiZap size={14} aria-hidden="true" />
-          <span>Compact context</span>
+          <span>{compacting ? 'Compacting…' : 'Compact context'}</span>
         </button>
-        <button type="button" className="agent-btn" onClick={exportSession}>
+        <button type="button" className="agent-btn" onClick={handleExportSession}>
           <FiDownload size={14} aria-hidden="true" />
           <span>Export session</span>
         </button>
-        <button type="button" className="agent-btn" onClick={debugBundle}>
+        <button type="button" className="agent-btn" onClick={handleDebugBundle}>
           <FiArchive size={14} aria-hidden="true" />
           <span>Debug bundle</span>
         </button>
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
index a25d57707..51c2693ff 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
@@ -1,6 +1,8 @@
 import { useMemo, useState } from 'react';
 import { FiAlertCircle } from 'react-icons/fi';
 import { useInspectorLogs } from '../../../../hooks/useInspectorLogs';
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
 import type { LogEntryResponse } from '../../../../api/system';
 
 const LEVELS = ['ALL', 'INFO', 'WARN', 'ERROR', 'DEBUG'] as const;
@@ -29,24 +31,74 @@ function levelClassName(level: string): string {
   return 'inspector-log__level';
 }
 
-function filterEntries(entries: LogEntryResponse[], level: LevelFilter, query: string): LogEntryResponse[] {
+interface SessionFilters {
+  conversationKey: string;
+  shortKey: string;
+  sessionRecordId: string | null;
+}
+
+function buildSessionFilters(conversationKey: string, sessionRecordId: string | null): SessionFilters {
+  return {
+    conversationKey: conversationKey.toLowerCase(),
+    shortKey: conversationKey.slice(0, 8).toLowerCase(),
+    sessionRecordId: sessionRecordId != null ? sessionRecordId.toLowerCase() : null,
+  };
+}
+
+function entryMatchesSession(entry: LogEntryResponse, session: SessionFilters): boolean {
+  const haystack = `${entry.message ?? ''} ${entry.logger ?? ''} ${entry.thread ?? ''}`.toLowerCase();
+  if (session.conversationKey.length > 0 && haystack.includes(session.conversationKey)) {
+    return true;
+  }
+  if (session.shortKey.length > 0 && haystack.includes(session.shortKey)) {
+    return true;
+  }
+  if (session.sessionRecordId != null && haystack.includes(session.sessionRecordId)) {
+    return true;
+  }
+  return false;
+}
+
+interface FilterArgs {
+  level: LevelFilter;
+  query: string;
+  scopeToSession: boolean;
+  session: SessionFilters;
+}
+
+function filterEntries(entries: LogEntryResponse[], args: FilterArgs): LogEntryResponse[] {
+  const trimmedQuery = args.query.trim().toLowerCase();
   return entries.filter((entry) => {
-    if (level !== 'ALL' && entry.level.toUpperCase() !== level) {
+    if (args.level !== 'ALL' && entry.level.toUpperCase() !== args.level) {
       return false;
     }
-    if (query.trim().length === 0) {
+    if (args.scopeToSession && !entryMatchesSession(entry, args.session)) {
+      return false;
+    }
+    if (trimmedQuery.length === 0) {
       return true;
     }
     const haystack = `${entry.message ?? ''} ${entry.logger ?? ''}`.toLowerCase();
-    return haystack.includes(query.trim().toLowerCase());
+    return haystack.includes(trimmedQuery);
   });
 }
 
 export default function InspectorLogsTab() {
   const { data, isLoading, isError, refetch } = useInspectorLogs();
+  const conversationKey = useChatSessionStore((s) => s.activeSessionId);
+  const sessionRecordId = useChatRuntimeStore((s) => s.sessions[conversationKey]?.sessionRecordId ?? null);
   const [level, setLevel] = useState<LevelFilter>('ALL');
   const [query, setQuery] = useState('');
-  const filtered = useMemo(() => filterEntries(data?.entries ?? [], level, query), [data, level, query]);
+  const [scopeToSession, setScopeToSession] = useState(true);
+
+  const sessionFilters = useMemo(
+    () => buildSessionFilters(conversationKey, sessionRecordId),
+    [conversationKey, sessionRecordId],
+  );
+  const filtered = useMemo(
+    () => filterEntries(data?.entries ?? [], { level, query, scopeToSession, session: sessionFilters }),
+    [data, level, query, scopeToSession, sessionFilters],
+  );
 
   if (isLoading) {
     return <div className="harness-inspector__placeholder"><span>Loading logs…</span></div>;
@@ -78,8 +130,20 @@ export default function InspectorLogsTab() {
           aria-label="Search logs"
         />
       </div>
+      <label className="inspector-log__scope">
+        <input
+          type="checkbox"
+          checked={scopeToSession}
+          onChange={(event) => setScopeToSession(event.target.checked)}
+        />
+        <span>Only this session ({conversationKey.slice(0, 8) || '—'})</span>
+      </label>
       {filtered.length === 0 ? (
-        <p className="harness-inspector__card-label">No logs match the current filter.</p>
+        <p className="harness-inspector__card-label">
+          {scopeToSession
+            ? 'No log entries reference this chat session yet. Disable the session scope to inspect runtime-wide logs.'
+            : 'No logs match the current filter.'}
+        </p>
       ) : (
         <ul className="inspector-log__list" role="list">
           {filtered.map((entry) => (
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
index d08070819..d4c89dcc2 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
@@ -8,6 +8,7 @@ export default function InspectorPlanTab() {
   const sessionId = useChatSessionStore((s) => s.activeSessionId);
   const { data, isLoading } = usePlanControlState(sessionId, sessionId.length > 0);
   const planModeActive = data?.planModeActive === true;
+  const featureEnabled = data?.featureEnabled !== false;
 
   return (
     <div className="harness-inspector__placeholder-stack">
@@ -30,23 +31,35 @@ export default function InspectorPlanTab() {
             {data?.activePlanId ?? '—'}
           </span>
         </div>
+        {!featureEnabled && (
+          <p className="harness-inspector__card-label">Plan mode is disabled for this workspace.</p>
+        )}
         {isLoading && <p className="harness-inspector__card-label">Loading plan state…</p>}
       </section>
-      <p className="harness-inspector__card-label">
-        Demo plan — the runtime does not yet emit structured plan steps; the
-        block below mirrors §23 of the redesign spec to preview the layout.
-      </p>
-      <PlanBlock
-        plan={SAMPLE_PLAN}
-        currentStepIndex={3}
-        isRunActive
-        hasFailedStep
-        onPause={() => undefined}
-        onSkip={() => undefined}
-        onEdit={() => undefined}
-        onRunStepByStep={() => undefined}
-        onRetryStep={() => undefined}
-      />
+      {planModeActive ? (
+        <>
+          <p className="harness-inspector__card-label">
+            Plan steps are not yet emitted by the runtime; the block below mirrors §23 of the
+            redesign spec to preview the layout once structured plan events ship.
+          </p>
+          <PlanBlock
+            plan={SAMPLE_PLAN}
+            currentStepIndex={3}
+            isRunActive
+            hasFailedStep
+            onPause={() => undefined}
+            onSkip={() => undefined}
+            onEdit={() => undefined}
+            onRunStepByStep={() => undefined}
+            onRetryStep={() => undefined}
+          />
+        </>
+      ) : (
+        <p className="harness-inspector__card-label">
+          Enable Plan mode in the chat composer to outline a plan for the active task — the steps
+          will appear here as the agent works through them.
+        </p>
+      )}
     </div>
   );
 }
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
index 20b220939..2b125bd5e 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
@@ -2,8 +2,7 @@ import { useMemo } from 'react';
 import { useChatSessionStore } from '../../../../store/chatSessionStore';
 import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
 import ToolCallTimeline from '../../../agentRun/ToolCallTimeline';
-import IncidentCard from '../../../agentRun/IncidentCard';
-import { SAMPLE_INCIDENT, SAMPLE_TOOL_CALLS } from '../../../agentRun/sampleAgentRun';
+import { SAMPLE_TOOL_CALLS } from '../../../agentRun/sampleAgentRun';
 import { normalizeChatMessages } from '../../../agentRun/normalizeRunEvents';
 import type { ToolCallViewModel } from '../../../agentRun/types';
 
@@ -26,13 +25,12 @@ export default function InspectorToolsTab() {
     <div className="harness-inspector__placeholder-stack">
       {isDemo && (
         <p className="harness-inspector__card-label">
-          Demo tool history — replace with live data once the runtime emits
-          structured tool events. Real tool calls extracted from chat markers
-          will surface here automatically.
+          No tool calls in this session yet — the timeline below is a §23 reference render.
+          Real tool calls extracted from chat markers will surface here automatically as the
+          assistant invokes tools.
         </p>
       )}
       <ToolCallTimeline calls={calls} />
-      {isDemo && <IncidentCard incident={SAMPLE_INCIDENT} />}
     </div>
   );
 }
diff --git a/dashboard/src/components/layout/harness/useRailVersionLabel.ts b/dashboard/src/components/layout/harness/useRailVersionLabel.ts
deleted file mode 100644
index a280ad6ad..000000000
--- a/dashboard/src/components/layout/harness/useRailVersionLabel.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useSystemHealth } from '../../../hooks/useSystem';
-
-export function useRailVersionLabel(): string {
-  const { data: health } = useSystemHealth();
-  return health?.version != null ? `v${health.version}` : 'v…';
-}
diff --git a/dashboard/src/styles/harness.scss b/dashboard/src/styles/harness.scss
index 5b8bac5e5..2193cec8b 100644
--- a/dashboard/src/styles/harness.scss
+++ b/dashboard/src/styles/harness.scss
@@ -51,8 +51,8 @@
   --hns-radius-lg: 16px;
   --hns-radius-xl: 20px;
 
-  --hns-rail-width: 60px;
-  --hns-sidebar-width: 256px;
+  --hns-sidebar-width-collapsed: 60px;
+  --hns-sidebar-width-expanded: 280px;
   --hns-inspector-width: 360px;
   --hns-topbar-height: 56px;
 
@@ -136,141 +136,76 @@
 }
 
 /* ------------------------------------------------------------------ */
-/* Icon rail                                                          */
+/* Sidebar (collapsed by default, hover/focus expanded)               */
 /* ------------------------------------------------------------------ */
 
-.harness-rail {
-  flex: 0 0 var(--hns-rail-width);
-  width: var(--hns-rail-width);
+.harness-sidebar {
+  flex: 0 0 var(--hns-sidebar-width-collapsed);
+  width: var(--hns-sidebar-width-collapsed);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: var(--hns-space-3) 0;
-  gap: var(--hns-space-2);
   background: var(--hns-bg-elevated);
   border-right: 1px solid var(--hns-border-subtle);
-}
-
-.harness-rail__brand {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--hns-space-2);
-  border-radius: var(--hns-radius-md);
-  background: var(--hns-accent-soft);
-  color: var(--hns-accent-strong);
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.harness-rail__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--hns-space-1);
-  flex: 1 1 auto;
-}
-
-.harness-rail__btn {
-  appearance: none;
-  border: 1px solid transparent;
-  background: transparent;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--hns-radius-md);
-  color: var(--hns-text-secondary);
-  cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  min-height: 0;
+  overflow: hidden;
+  transition: flex-basis 180ms ease, width 180ms ease;
   position: relative;
+  z-index: 5;
 }
 
-.harness-rail__btn:hover,
-.harness-rail__btn:focus-visible {
-  color: var(--hns-text-primary);
-  background: var(--hns-bg-card-hover);
-  outline: none;
-}
-
-.harness-rail__btn--active {
-  color: var(--hns-accent-strong);
-  background: var(--hns-accent-soft);
-  border-color: var(--hns-accent-soft);
-}
-
-.harness-rail__btn--active::before {
-  content: "";
-  position: absolute;
-  left: -8px;
-  top: 8px;
-  bottom: 8px;
-  width: 3px;
-  border-radius: 2px;
-  background: var(--hns-accent);
+.harness-sidebar:hover,
+.harness-sidebar:focus-within,
+.harness-sidebar.mobile-open {
+  flex-basis: var(--hns-sidebar-width-expanded);
+  width: var(--hns-sidebar-width-expanded);
+  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.32);
 }
 
-.harness-rail__footer {
+.harness-sidebar__brand {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: var(--hns-space-2);
-  margin-top: auto;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-3) 14px;
+  height: var(--hns-topbar-height);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
-.harness-rail__avatar {
+.harness-sidebar__brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--hns-accent), var(--hns-accent-strong));
-  color: #fff;
-  font-size: 12px;
+  border-radius: var(--hns-radius-md);
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
   font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.harness-rail__version {
-  font-size: 10px;
-  color: var(--hns-text-muted);
-  letter-spacing: 0.04em;
-}
-
-/* ------------------------------------------------------------------ */
-/* Secondary sidebar                                                  */
-/* ------------------------------------------------------------------ */
-
-.harness-sidebar {
-  flex: 0 0 var(--hns-sidebar-width);
-  width: var(--hns-sidebar-width);
-  display: flex;
-  flex-direction: column;
-  background: var(--hns-bg-elevated);
-  border-right: 1px solid var(--hns-border-subtle);
-  min-height: 0;
-  overflow: hidden;
-}
-
-.harness-sidebar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--hns-space-4) var(--hns-space-4) var(--hns-space-3);
+  font-size: 16px;
   flex-shrink: 0;
 }
 
-.harness-sidebar__title {
+.harness-sidebar__brand-text {
   font-size: var(--hns-font-md);
   font-weight: 600;
   color: var(--hns-text-primary);
-  margin: 0;
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: opacity 140ms ease 60ms, transform 140ms ease 60ms;
+  pointer-events: none;
+}
+
+.harness-sidebar:hover .harness-sidebar__brand-text,
+.harness-sidebar:focus-within .harness-sidebar__brand-text,
+.harness-sidebar.mobile-open .harness-sidebar__brand-text {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .harness-sidebar__close-btn {
   appearance: none;
+  margin-left: auto;
   border: 1px solid var(--hns-border-medium);
   background: transparent;
   border-radius: var(--hns-radius-sm);
@@ -286,7 +221,17 @@
 .harness-sidebar__nav {
   flex: 1 1 auto;
   overflow-y: auto;
-  padding: 0 var(--hns-space-3) var(--hns-space-4);
+  overflow-x: hidden;
+  padding: 0 8px var(--hns-space-3);
+}
+
+.harness-sidebar__nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.harness-sidebar__nav::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .harness-sidebar__group {
@@ -301,12 +246,25 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--hns-space-2) var(--hns-space-3);
+  padding: 6px var(--hns-space-3);
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 0.10em;
   color: var(--hns-text-muted);
   font-weight: 600;
+  height: 22px;
+  white-space: nowrap;
+}
+
+.harness-sidebar__group-label {
+  opacity: 0;
+  transition: opacity 120ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__group-label,
+.harness-sidebar:focus-within .harness-sidebar__group-label,
+.harness-sidebar.mobile-open .harness-sidebar__group-label {
+  opacity: 1;
 }
 
 .harness-sidebar__group-action {
@@ -337,7 +295,7 @@
   display: flex;
   align-items: center;
   gap: var(--hns-space-3);
-  padding: var(--hns-space-2) var(--hns-space-3);
+  padding: 8px 12px;
   border-radius: var(--hns-radius-md);
   color: var(--hns-text-secondary);
   font-size: var(--hns-font-md);
@@ -349,6 +307,7 @@
   text-align: left;
   cursor: pointer;
   transition: background 120ms ease, color 120ms ease;
+  white-space: nowrap;
 }
 
 .harness-sidebar__link:hover,
@@ -373,6 +332,8 @@
   align-items: center;
   justify-content: center;
   color: inherit;
+  width: 20px;
+  flex-shrink: 0;
 }
 
 .harness-sidebar__link-text {
@@ -381,6 +342,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 140ms ease 60ms, transform 140ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__link-text,
+.harness-sidebar:focus-within .harness-sidebar__link-text,
+.harness-sidebar.mobile-open .harness-sidebar__link-text {
+  opacity: 1;
+  transform: translateX(0);
 }
 
 .harness-sidebar__badge {
@@ -393,6 +364,25 @@
   font-weight: 600;
   background: var(--hns-accent-soft);
   color: var(--hns-accent-strong);
+  opacity: 0;
+  transition: opacity 120ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__badge,
+.harness-sidebar:focus-within .harness-sidebar__badge,
+.harness-sidebar.mobile-open .harness-sidebar__badge {
+  opacity: 1;
+}
+
+.harness-sidebar__group-action {
+  opacity: 0;
+  transition: opacity 120ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__group-action,
+.harness-sidebar:focus-within .harness-sidebar__group-action,
+.harness-sidebar.mobile-open .harness-sidebar__group-action {
+  opacity: 1;
 }
 
 .harness-sidebar__chat-list {
@@ -413,6 +403,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  opacity: 0;
+  transition: opacity 140ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__chat-item-title,
+.harness-sidebar:focus-within .harness-sidebar__chat-item-title,
+.harness-sidebar.mobile-open .harness-sidebar__chat-item-title {
+  opacity: 1;
 }
 
 .harness-sidebar__chat-item:not(.active) .harness-sidebar__chat-item-title {
@@ -425,12 +423,31 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  opacity: 0;
+  transition: opacity 140ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__chat-item-preview,
+.harness-sidebar:focus-within .harness-sidebar__chat-item-preview,
+.harness-sidebar.mobile-open .harness-sidebar__chat-item-preview {
+  opacity: 1;
 }
 
 .harness-sidebar__state {
-  padding: var(--hns-space-2) var(--hns-space-3);
+  padding: 6px 12px;
   font-size: var(--hns-font-sm);
   color: var(--hns-text-muted);
+  opacity: 0;
+  transition: opacity 140ms ease 60ms;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.harness-sidebar:hover .harness-sidebar__state,
+.harness-sidebar:focus-within .harness-sidebar__state,
+.harness-sidebar.mobile-open .harness-sidebar__state {
+  opacity: 1;
 }
 
 .harness-sidebar__state--error {
@@ -438,14 +455,31 @@
 }
 
 .harness-sidebar__footer {
-  padding: var(--hns-space-3) var(--hns-space-4);
+  padding: var(--hns-space-3) 14px;
   border-top: 1px solid var(--hns-border-subtle);
   font-size: var(--hns-font-sm);
   color: var(--hns-text-muted);
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--hns-space-2);
+  white-space: nowrap;
+}
+
+.harness-sidebar__footer-mark {
+  color: var(--hns-success);
+  font-size: 8px;
+  flex-shrink: 0;
+}
+
+.harness-sidebar__footer-text {
+  opacity: 0;
+  transition: opacity 140ms ease 60ms;
+}
+
+.harness-sidebar:hover .harness-sidebar__footer-text,
+.harness-sidebar:focus-within .harness-sidebar__footer-text,
+.harness-sidebar.mobile-open .harness-sidebar__footer-text {
+  opacity: 1;
 }
 
 /* ------------------------------------------------------------------ */
@@ -759,6 +793,19 @@
   color: var(--hns-text-muted);
 }
 
+.inspector-log__scope {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+}
+
+.inspector-log__scope input[type="checkbox"] {
+  accent-color: var(--hns-accent);
+}
+
 .inspector-log__filter select,
 .inspector-log__search {
   appearance: none;
@@ -1169,20 +1216,24 @@
 }
 
 @media (max-width: 767px) {
-  .harness-rail {
-    display: none;
-  }
-
   .harness-sidebar {
     position: fixed;
     inset: 0 auto 0 0;
     z-index: 1040;
+    flex-basis: 280px;
     width: 280px;
     transform: translateX(-100%);
     transition: transform 200ms ease;
     box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
   }
 
+  .harness-sidebar:hover,
+  .harness-sidebar:focus-within {
+    flex-basis: 280px;
+    width: 280px;
+    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
+  }
+
   .harness-sidebar.mobile-open {
     transform: translateX(0);
   }

From ce9d8a13f6392acd45ba3c196df1528d33a24c63 Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Thu, 30 Apr 2026 19:20:34 -0400
Subject: [PATCH 4/6] feat(memory): expose relevant Memory V2 records to the
 Inspector tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds /api/memory/relevant — a thin read-only endpoint that wraps
MemoryComponent.queryItems, anchored on the active conversation key so
the dashboard can surface knowledge artifacts (facts, preferences,
constraints, decisions, failures, fixes, tasks, command results)
related to the current chat instead of memory presets.

The dashboard Inspector "Memory" tab is rebuilt around this endpoint:
relevant memories with type badges (Fact / Preference / Constraint /
Failure / Task / Decision / Fix / Command), markdown-friendly content
preview, "Added X ago · In N sessions" footer, type filter, search
field and an auto-refresh toggle. The "View all memories" link routes
to /settings/memory for the full inventory.

Backend:
- RelevantMemoryResponse DTO in golemcore-bot-client
- MemoryController in golemcore-bot-app with 3 unit tests covering
  scope chain construction, limit clamping and global fallback

Frontend:
- src/api/memory.ts + src/hooks/useRelevantMemories.ts
- MemoryArtifactCard + memoryFormat helpers (with vitest coverage)
- InspectorMemoryTab rewritten to consume the new feed and infer the
  query hint from the most recent user message

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 dashboard/src/api/memory.ts                   |  55 +++++
 .../harness/inspector/InspectorMemoryTab.tsx  | 143 +++++++++---
 .../harness/inspector/MemoryArtifactCard.tsx  |  50 ++++
 .../harness/inspector/memoryFormat.test.ts    |  99 ++++++++
 .../layout/harness/inspector/memoryFormat.ts  | 104 +++++++++
 dashboard/src/hooks/useRelevantMemories.ts    |  28 +++
 dashboard/src/styles/harness.scss             | 221 ++++++++++++++++++
 .../web/controller/MemoryController.java      | 132 +++++++++++
 .../web/controller/MemoryControllerTest.java  | 121 ++++++++++
 .../client/dto/RelevantMemoryResponse.java    |  73 ++++++
 10 files changed, 991 insertions(+), 35 deletions(-)
 create mode 100644 dashboard/src/api/memory.ts
 create mode 100644 dashboard/src/components/layout/harness/inspector/MemoryArtifactCard.tsx
 create mode 100644 dashboard/src/components/layout/harness/inspector/memoryFormat.test.ts
 create mode 100644 dashboard/src/components/layout/harness/inspector/memoryFormat.ts
 create mode 100644 dashboard/src/hooks/useRelevantMemories.ts
 create mode 100644 golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
 create mode 100644 golemcore-bot-app/src/test/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryControllerTest.java
 create mode 100644 golemcore-bot-client/src/main/java/me/golemcore/bot/client/dto/RelevantMemoryResponse.java

diff --git a/dashboard/src/api/memory.ts b/dashboard/src/api/memory.ts
new file mode 100644
index 000000000..390aa8e9c
--- /dev/null
+++ b/dashboard/src/api/memory.ts
@@ -0,0 +1,55 @@
+import client from './client';
+
+export type MemoryLayer = 'WORKING' | 'EPISODIC' | 'SEMANTIC' | 'PROCEDURAL';
+
+export type MemoryType =
+  | 'DECISION'
+  | 'CONSTRAINT'
+  | 'FAILURE'
+  | 'FIX'
+  | 'PREFERENCE'
+  | 'PROJECT_FACT'
+  | 'TASK_STATE'
+  | 'COMMAND_RESULT';
+
+export interface RelevantMemoryItem {
+  id: string;
+  layer: MemoryLayer | null;
+  type: MemoryType | null;
+  title: string | null;
+  content: string | null;
+  scope: string | null;
+  tags: string[];
+  source: string | null;
+  confidence: number | null;
+  salience: number | null;
+  ttlDays: number | null;
+  createdAt: string | null;
+  updatedAt: string | null;
+  lastAccessedAt: string | null;
+  references: string[];
+  referenceCount: number;
+}
+
+export interface RelevantMemoryResponse {
+  items: RelevantMemoryItem[];
+  sessionId: string;
+  queryText: string;
+}
+
+export interface RelevantMemoryParams {
+  sessionId: string;
+  query?: string;
+  limit?: number;
+}
+
+export async function getRelevantMemories(params: RelevantMemoryParams): Promise<RelevantMemoryResponse> {
+  const { data } = await client.get<RelevantMemoryResponse>('/memory/relevant', {
+    params: {
+      sessionId: params.sessionId,
+      query: params.query,
+      limit: params.limit,
+    },
+  });
+  return data;
+}
diff --git a/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
index ba29440cd..d97be7a10 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
@@ -1,55 +1,128 @@
-import { FiBookmark } from 'react-icons/fi';
-import { useMemoryPresets } from '../../../../hooks/useSettings';
-import type { MemoryPreset } from '../../../../api/settings';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FiArrowRight, FiFilter, FiSearch } from 'react-icons/fi';
+import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { useRelevantMemories } from '../../../../hooks/useRelevantMemories';
+import MemoryArtifactCard from './MemoryArtifactCard';
+import {
+  buildTypeFilterOptions,
+  filterMemoryItems,
+  type MemoryTypeFilter,
+} from './memoryFormat';
 
-function MemoryPresetCard({ preset }: { preset: MemoryPreset }) {
-  return (
-    <article className="agent-card" aria-label={`Memory preset ${preset.label}`}>
-      <header className="agent-card__header">
-        <FiBookmark size={14} aria-hidden="true" />
-        <span>{preset.label}</span>
-      </header>
-      {preset.comment.length > 0 && (
-        <p className="harness-inspector__card-label">{preset.comment}</p>
-      )}
-      <div className="harness-inspector__card-row">
-        <span className="harness-inspector__card-label">Identifier</span>
-        <span className="harness-inspector__card-value"><code>{preset.id}</code></span>
-      </div>
-    </article>
-  );
+const TYPE_FILTERS = buildTypeFilterOptions();
+
+function deriveQueryFromMessages(messages: ReturnType<typeof useChatRuntimeStore.getState>['sessions'][string]['messages'] | undefined): string {
+  if (messages == null) {
+    return '';
+  }
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    if (message.role === 'user' && message.content.length > 0) {
+      return message.content.slice(0, 256);
+    }
+  }
+  return '';
 }
 
 export default function InspectorMemoryTab() {
-  const { data, isLoading, isError, refetch } = useMemoryPresets();
+  const navigate = useNavigate();
+  const sessionId = useChatSessionStore((s) => s.activeSessionId);
+  const session = useChatRuntimeStore((s) => s.sessions[sessionId]);
+  const queryHint = useMemo(() => deriveQueryFromMessages(session?.messages), [session?.messages]);
+  const [typeFilter, setTypeFilter] = useState<MemoryTypeFilter>('all');
+  const [search, setSearch] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [now, setNow] = useState(() => Date.now());
+
+  const { data, isLoading, isError, refetch } = useRelevantMemories({
+    sessionId,
+    query: queryHint,
+    autoRefresh,
+  });
+
+  // Tick once a minute to keep the relative timestamps ("Just now", "2 days ago") fresh.
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 60_000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const items = useMemo(() => data?.items ?? [], [data?.items]);
+  const filtered = useMemo(() => filterMemoryItems(items, typeFilter, search), [items, typeFilter, search]);
 
-  if (isLoading) {
-    return <div className="harness-inspector__placeholder"><span>Loading memory…</span></div>;
-  }
   if (isError) {
     return (
-      <div className="harness-inspector__placeholder">
-        <span>Failed to load memory presets</span>
+      <div className="harness-inspector__placeholder" role="alert">
+        <span>Failed to load relevant memories</span>
         <button type="button" className="agent-btn" onClick={() => refetch()}>Retry</button>
       </div>
     );
   }
 
-  const presets = data ?? [];
-
   return (
     <div className="harness-inspector__placeholder-stack">
-      <p className="harness-inspector__card-label">
-        Memory presets configured for the workspace. Once the runtime emits
-        relevant-memory events per turn they will appear here.
-      </p>
-      {presets.length === 0 ? (
-        <div className="harness-inspector__placeholder">
-          <span>No memory presets configured.</span>
+      <header className="memory-tab__header">
+        <div className="memory-tab__title-row">
+          <h3 className="harness-inspector__card-title">Relevant memories</h3>
+          <span className="memory-tab__count">{items.length}</span>
         </div>
+        <label className="memory-tab__toggle">
+          <span>Auto-refresh</span>
+          <input
+            type="checkbox"
+            checked={autoRefresh}
+            onChange={(event) => setAutoRefresh(event.target.checked)}
+          />
+        </label>
+      </header>
+      <div className="memory-tab__filters">
+        <label className="memory-tab__select">
+          <FiFilter size={14} aria-hidden="true" />
+          <select
+            value={typeFilter}
+            onChange={(event) => setTypeFilter(event.target.value as MemoryTypeFilter)}
+            aria-label="Filter memories by type"
+          >
+            {TYPE_FILTERS.map((option) => (
+              <option key={option.value} value={option.value}>{option.label}</option>
+            ))}
+          </select>
+        </label>
+        <label className="memory-tab__search">
+          <FiSearch size={14} aria-hidden="true" />
+          <input
+            type="text"
+            placeholder="Search memories…"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            aria-label="Search memories"
+          />
+        </label>
+      </div>
+      {isLoading ? (
+        <p className="harness-inspector__card-label">Loading memories…</p>
+      ) : filtered.length === 0 ? (
+        <p className="harness-inspector__card-label">
+          {items.length === 0
+            ? 'The runtime has not surfaced any memories for this session yet. They will appear here once Memory V2 records relate to the active conversation.'
+            : 'No memories match the current filter.'}
+        </p>
       ) : (
-        presets.map((preset) => <MemoryPresetCard key={preset.id} preset={preset} />)
+        <div className="memory-tab__list">
+          {filtered.map((item) => (
+            <MemoryArtifactCard key={item.id} item={item} now={now} />
+          ))}
+        </div>
       )}
+      <button
+        type="button"
+        className="memory-tab__view-all"
+        onClick={() => navigate('/settings/memory')}
+      >
+        <span>View all memories</span>
+        <FiArrowRight size={14} aria-hidden="true" />
+      </button>
     </div>
   );
 }
diff --git a/dashboard/src/components/layout/harness/inspector/MemoryArtifactCard.tsx b/dashboard/src/components/layout/harness/inspector/MemoryArtifactCard.tsx
new file mode 100644
index 000000000..aa00dc8b6
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/MemoryArtifactCard.tsx
@@ -0,0 +1,50 @@
+import { FiMoreHorizontal } from 'react-icons/fi';
+import type { RelevantMemoryItem } from '../../../../api/memory';
+import { describeReferences, formatRelativeTime, getTypeLabel, getTypeTone } from './memoryFormat';
+
+interface MemoryArtifactCardProps {
+  item: RelevantMemoryItem;
+  now: number;
+}
+
+function fallbackTitle(item: RelevantMemoryItem): string {
+  if (item.title != null && item.title.trim().length > 0) {
+    return item.title;
+  }
+  if (item.content != null && item.content.trim().length > 0) {
+    const firstLine = item.content.split('\n')[0] ?? '';
+    return firstLine.length > 60 ? `${firstLine.slice(0, 57)}…` : firstLine;
+  }
+  return 'Untitled memory';
+}
+
+export default function MemoryArtifactCard({ item, now }: MemoryArtifactCardProps) {
+  const tone = getTypeTone(item.type);
+  const typeLabel = getTypeLabel(item.type);
+  const updatedRelative = formatRelativeTime(item.updatedAt ?? item.createdAt, now);
+
+  return (
+    <article className={`memory-card memory-card--${tone}`} aria-label={`Memory ${fallbackTitle(item)}`}>
+      <header className="memory-card__header">
+        <span className="memory-card__title">{fallbackTitle(item)}</span>
+        <span className={`memory-card__tag memory-card__tag--${tone}`}>{typeLabel}</span>
+        <button
+          type="button"
+          className="memory-card__menu"
+          aria-label="More memory actions"
+          title="More"
+        >
+          <FiMoreHorizontal size={14} aria-hidden="true" />
+        </button>
+      </header>
+      {item.content != null && item.content.trim().length > 0 && (
+        <p className="memory-card__content">{item.content}</p>
+      )}
+      <footer className="memory-card__footer">
+        <span>Added {updatedRelative}</span>
+        <span className="memory-card__separator" aria-hidden="true">·</span>
+        <span>{describeReferences(item)}</span>
+      </footer>
+    </article>
+  );
+}
diff --git a/dashboard/src/components/layout/harness/inspector/memoryFormat.test.ts b/dashboard/src/components/layout/harness/inspector/memoryFormat.test.ts
new file mode 100644
index 000000000..497c4133a
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/memoryFormat.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { describeReferences, filterMemoryItems, formatRelativeTime, getTypeLabel, getTypeTone } from './memoryFormat';
+import type { RelevantMemoryItem } from '../../../../api/memory';
+
+function memory(overrides: Partial<RelevantMemoryItem> & Pick<RelevantMemoryItem, 'id'>): RelevantMemoryItem {
+  return {
+    layer: null,
+    type: null,
+    title: null,
+    content: null,
+    scope: null,
+    tags: [],
+    source: null,
+    confidence: null,
+    salience: null,
+    ttlDays: null,
+    createdAt: null,
+    updatedAt: null,
+    lastAccessedAt: null,
+    references: [],
+    referenceCount: 0,
+    ...overrides,
+  };
+}
+
+describe('getTypeLabel / getTypeTone', () => {
+  it('returns the human label for a known type', () => {
+    expect(getTypeLabel('PROJECT_FACT')).toBe('Fact');
+    expect(getTypeLabel('PREFERENCE')).toBe('Preference');
+  });
+
+  it('falls back to "Memory" for null', () => {
+    expect(getTypeLabel(null)).toBe('Memory');
+  });
+
+  it('maps types to tones', () => {
+    expect(getTypeTone('PROJECT_FACT')).toBe('fact');
+    expect(getTypeTone('PREFERENCE')).toBe('preference');
+    expect(getTypeTone('CONSTRAINT')).toBe('constraint');
+    expect(getTypeTone('FAILURE')).toBe('failure');
+    expect(getTypeTone(null)).toBe('neutral');
+  });
+});
+
+describe('formatRelativeTime', () => {
+  const now = Date.parse('2026-04-30T10:00:00Z');
+
+  it('returns "Just now" for the past 45 seconds', () => {
+    expect(formatRelativeTime('2026-04-30T09:59:30Z', now)).toBe('Just now');
+  });
+
+  it('renders minutes', () => {
+    expect(formatRelativeTime('2026-04-30T09:55:00Z', now)).toBe('5 mins ago');
+  });
+
+  it('renders hours', () => {
+    expect(formatRelativeTime('2026-04-30T07:00:00Z', now)).toBe('3 hours ago');
+  });
+
+  it('renders days', () => {
+    expect(formatRelativeTime('2026-04-28T10:00:00Z', now)).toBe('2 days ago');
+  });
+
+  it('handles null timestamps', () => {
+    expect(formatRelativeTime(null, now)).toBe('—');
+  });
+});
+
+describe('describeReferences', () => {
+  it('says "In session" for zero references', () => {
+    expect(describeReferences(memory({ id: 'a', referenceCount: 0 }))).toBe('In session');
+  });
+
+  it('pluralises sessions', () => {
+    expect(describeReferences(memory({ id: 'b', referenceCount: 1 }))).toBe('In 1 session');
+    expect(describeReferences(memory({ id: 'c', referenceCount: 4 }))).toBe('In 4 sessions');
+  });
+});
+
+describe('filterMemoryItems', () => {
+  const items = [
+    memory({ id: 'a', type: 'PROJECT_FACT', title: 'Optimizer config path', content: 'Path is /opt/foo' }),
+    memory({ id: 'b', type: 'PREFERENCE', title: 'Target metrics', content: 'Net uplift first', tags: ['target'] }),
+    memory({ id: 'c', type: 'CONSTRAINT', title: 'Risk limits', content: 'Max drawdown 15%' }),
+  ];
+
+  it('filters by type', () => {
+    expect(filterMemoryItems(items, 'PROJECT_FACT', '').map((item) => item.id)).toEqual(['a']);
+  });
+
+  it('filters by search across title, content and tags', () => {
+    expect(filterMemoryItems(items, 'all', 'metrics').map((item) => item.id)).toEqual(['b']);
+    expect(filterMemoryItems(items, 'all', 'target').map((item) => item.id)).toEqual(['b']);
+  });
+
+  it('returns all when neither filter is set', () => {
+    expect(filterMemoryItems(items, 'all', '')).toHaveLength(3);
+  });
+});
diff --git a/dashboard/src/components/layout/harness/inspector/memoryFormat.ts b/dashboard/src/components/layout/harness/inspector/memoryFormat.ts
new file mode 100644
index 000000000..bdf0b281d
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/memoryFormat.ts
@@ -0,0 +1,104 @@
+import type { MemoryType, RelevantMemoryItem } from '../../../../api/memory';
+
+const TYPE_LABELS: Record<MemoryType, string> = {
+  DECISION: 'Decision',
+  CONSTRAINT: 'Constraint',
+  FAILURE: 'Failure',
+  FIX: 'Fix',
+  PREFERENCE: 'Preference',
+  PROJECT_FACT: 'Fact',
+  TASK_STATE: 'Task',
+  COMMAND_RESULT: 'Command',
+};
+
+export type MemoryTypeFilter = 'all' | MemoryType;
+
+export function getTypeLabel(type: MemoryType | null): string {
+  if (type == null) {
+    return 'Memory';
+  }
+  return TYPE_LABELS[type] ?? type;
+}
+
+export function getTypeTone(type: MemoryType | null): 'fact' | 'preference' | 'constraint' | 'failure' | 'task' | 'neutral' {
+  switch (type) {
+    case 'PROJECT_FACT':
+    case 'COMMAND_RESULT':
+      return 'fact';
+    case 'PREFERENCE':
+      return 'preference';
+    case 'CONSTRAINT':
+    case 'DECISION':
+      return 'constraint';
+    case 'FAILURE':
+    case 'FIX':
+      return 'failure';
+    case 'TASK_STATE':
+      return 'task';
+    case null:
+      return 'neutral';
+  }
+}
+
+export function formatRelativeTime(iso: string | null, now: number = Date.now()): string {
+  if (iso == null) {
+    return '—';
+  }
+  const ms = new Date(iso).getTime();
+  if (Number.isNaN(ms)) {
+    return iso;
+  }
+  const deltaSeconds = Math.max(0, Math.floor((now - ms) / 1000));
+  if (deltaSeconds < 45) {
+    return 'Just now';
+  }
+  if (deltaSeconds < 60 * 60) {
+    const minutes = Math.max(1, Math.round(deltaSeconds / 60));
+    return `${minutes} min${minutes === 1 ? '' : 's'} ago`;
+  }
+  if (deltaSeconds < 60 * 60 * 24) {
+    const hours = Math.max(1, Math.round(deltaSeconds / 3600));
+    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+  }
+  const days = Math.max(1, Math.round(deltaSeconds / 86_400));
+  return `${days} day${days === 1 ? '' : 's'} ago`;
+}
+
+export function describeReferences(item: RelevantMemoryItem): string {
+  if (item.referenceCount <= 0) {
+    return 'In session';
+  }
+  return `In ${item.referenceCount} session${item.referenceCount === 1 ? '' : 's'}`;
+}
+
+export function buildTypeFilterOptions(): ReadonlyArray<{ value: MemoryTypeFilter; label: string }> {
+  return [
+    { value: 'all', label: 'All types' },
+    { value: 'PROJECT_FACT', label: 'Facts' },
+    { value: 'PREFERENCE', label: 'Preferences' },
+    { value: 'CONSTRAINT', label: 'Constraints' },
+    { value: 'DECISION', label: 'Decisions' },
+    { value: 'FAILURE', label: 'Failures' },
+    { value: 'FIX', label: 'Fixes' },
+    { value: 'TASK_STATE', label: 'Tasks' },
+    { value: 'COMMAND_RESULT', label: 'Commands' },
+  ];
+}
+
+export function filterMemoryItems(
+  items: RelevantMemoryItem[],
+  type: MemoryTypeFilter,
+  search: string,
+): RelevantMemoryItem[] {
+  const trimmed = search.trim().toLowerCase();
+  return items.filter((item) => {
+    if (type !== 'all' && item.type !== type) {
+      return false;
+    }
+    if (trimmed.length === 0) {
+      return true;
+    }
+    const haystack = `${item.title ?? ''} ${item.content ?? ''} ${item.tags.join(' ')}`.toLowerCase();
+    return haystack.includes(trimmed);
+  });
+}
diff --git a/dashboard/src/hooks/useRelevantMemories.ts b/dashboard/src/hooks/useRelevantMemories.ts
new file mode 100644
index 000000000..a62a49794
--- /dev/null
+++ b/dashboard/src/hooks/useRelevantMemories.ts
@@ -0,0 +1,28 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { getRelevantMemories, type RelevantMemoryResponse } from '../api/memory';
+
+interface UseRelevantMemoriesOptions {
+  sessionId: string;
+  query?: string;
+  limit?: number;
+  autoRefresh?: boolean;
+}
+
+const DEFAULT_LIMIT = 10;
+const REFRESH_INTERVAL_MS = 20_000;
+
+export function useRelevantMemories(
+  options: UseRelevantMemoriesOptions,
+): UseQueryResult<RelevantMemoryResponse, unknown> {
+  const sessionId = options.sessionId;
+  const query = options.query ?? '';
+  const limit = options.limit ?? DEFAULT_LIMIT;
+  const autoRefresh = options.autoRefresh ?? true;
+  return useQuery({
+    queryKey: ['memory', 'relevant', sessionId, query, limit],
+    queryFn: () => getRelevantMemories({ sessionId, query, limit }),
+    enabled: sessionId.length > 0,
+    staleTime: 5_000,
+    refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false,
+  });
+}
diff --git a/dashboard/src/styles/harness.scss b/dashboard/src/styles/harness.scss
index 2193cec8b..a8379d0de 100644
--- a/dashboard/src/styles/harness.scss
+++ b/dashboard/src/styles/harness.scss
@@ -793,6 +793,227 @@
   color: var(--hns-text-muted);
 }
 
+/* Inspector — Memory tab */
+
+.memory-tab__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hns-space-2);
+}
+
+.memory-tab__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.memory-tab__count {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--hns-text-secondary);
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+}
+
+.memory-tab__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-secondary);
+  cursor: pointer;
+}
+
+.memory-tab__toggle input[type="checkbox"] {
+  accent-color: var(--hns-accent);
+}
+
+.memory-tab__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.memory-tab__select,
+.memory-tab__search {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  background: var(--hns-bg-input);
+  border: 1px solid var(--hns-border-medium);
+  border-radius: var(--hns-radius-md);
+  padding: 4px 10px;
+  color: var(--hns-text-secondary);
+}
+
+.memory-tab__select {
+  flex: 0 0 auto;
+}
+
+.memory-tab__select select,
+.memory-tab__search input {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--hns-text-primary);
+  font-size: var(--hns-font-sm);
+  outline: none;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.memory-tab__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hns-space-3);
+}
+
+.memory-tab__view-all {
+  appearance: none;
+  border: 1px solid var(--hns-border-subtle);
+  background: transparent;
+  color: var(--hns-text-secondary);
+  border-radius: var(--hns-radius-md);
+  padding: 8px var(--hns-space-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hns-space-2);
+  cursor: pointer;
+  font-size: var(--hns-font-md);
+}
+
+.memory-tab__view-all:hover,
+.memory-tab__view-all:focus-visible {
+  background: var(--hns-bg-card-hover);
+  color: var(--hns-text-primary);
+  border-color: var(--hns-border-strong);
+  outline: none;
+}
+
+/* Memory card */
+
+.memory-card {
+  background: var(--hns-bg-card);
+  border: 1px solid var(--hns-border-subtle);
+  border-radius: var(--hns-radius-lg);
+  padding: var(--hns-space-3) var(--hns-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.memory-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+}
+
+.memory-card__title {
+  flex: 1 1 auto;
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memory-card__tag {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--hns-bg-card-hover);
+  color: var(--hns-text-secondary);
+  border: 1px solid var(--hns-border-subtle);
+  flex-shrink: 0;
+}
+
+.memory-card__tag--fact {
+  color: var(--hns-success);
+  background: var(--hns-success-soft);
+  border-color: rgba(61, 220, 132, 0.32);
+}
+
+.memory-card__tag--preference {
+  color: var(--hns-accent-strong);
+  background: var(--hns-accent-soft);
+  border-color: rgba(139, 124, 255, 0.32);
+}
+
+.memory-card__tag--constraint {
+  color: var(--hns-warning);
+  background: var(--hns-warning-soft);
+  border-color: rgba(255, 180, 84, 0.32);
+}
+
+.memory-card__tag--failure {
+  color: var(--hns-danger);
+  background: var(--hns-danger-soft);
+  border-color: rgba(255, 95, 109, 0.32);
+}
+
+.memory-card__tag--task,
+.memory-card__tag--neutral {
+  color: var(--hns-text-secondary);
+}
+
+.memory-card__menu {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--hns-text-muted);
+  width: 22px;
+  height: 22px;
+  border-radius: var(--hns-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.memory-card__menu:hover,
+.memory-card__menu:focus-visible {
+  background: var(--hns-bg-card-hover);
+  color: var(--hns-text-primary);
+  outline: none;
+}
+
+.memory-card__content {
+  margin: 0;
+  font-size: var(--hns-font-sm);
+  line-height: 1.5;
+  color: var(--hns-text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.memory-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-2);
+  font-size: var(--hns-font-sm);
+  color: var(--hns-text-muted);
+}
+
+.memory-card__separator {
+  color: var(--hns-text-disabled);
+}
+
 .inspector-log__scope {
   display: inline-flex;
   align-items: center;
diff --git a/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java b/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
new file mode 100644
index 000000000..21b59f840
--- /dev/null
+++ b/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2026 Aleksei Kuleshov
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Contact: alex@kuleshov.tech
+ */
+
+package me.golemcore.bot.adapter.inbound.web.controller;
+
+import lombok.RequiredArgsConstructor;
+import me.golemcore.bot.client.dto.RelevantMemoryResponse;
+import me.golemcore.bot.domain.component.MemoryComponent;
+import me.golemcore.bot.domain.model.MemoryItem;
+import me.golemcore.bot.domain.model.MemoryQuery;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import reactor.core.publisher.Mono;
+
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Read-only access to Memory V2 records relevant to the active conversation.
+ * Powers the Inspector "Memory" tab in the dashboard harness.
+ */
+@RestController
+@RequestMapping("/api/memory")
+@RequiredArgsConstructor
+public class MemoryController {
+
+    private static final int DEFAULT_LIMIT = 8;
+    private static final int MAX_LIMIT = 50;
+
+    private final MemoryComponent memoryComponent;
+
+    @GetMapping("/relevant")
+    public Mono<ResponseEntity<RelevantMemoryResponse>> getRelevantMemories(
+            @RequestParam(required = false) String sessionId,
+            @RequestParam(required = false) String query,
+            @RequestParam(required = false) Integer limit) {
+        int effectiveLimit = clampLimit(limit);
+        String safeQuery = query != null ? query : "";
+        String safeSessionId = sessionId != null ? sessionId : "";
+
+        MemoryQuery memoryQuery = MemoryQuery.builder()
+                .queryText(safeQuery)
+                .scope(safeSessionId.isBlank() ? "global" : safeSessionId)
+                .scopeChain(buildScopeChain(safeSessionId))
+                .workingTopK(effectiveLimit)
+                .episodicTopK(effectiveLimit)
+                .semanticTopK(effectiveLimit)
+                .proceduralTopK(effectiveLimit)
+                .build();
+
+        List<MemoryItem> items = memoryComponent.queryItems(memoryQuery);
+        List<RelevantMemoryResponse.Item> dtoItems = items.stream()
+                .limit(effectiveLimit)
+                .map(MemoryController::toDto)
+                .toList();
+
+        RelevantMemoryResponse response = RelevantMemoryResponse.builder()
+                .items(new ArrayList<>(dtoItems))
+                .sessionId(safeSessionId)
+                .queryText(safeQuery)
+                .build();
+        return Mono.just(ResponseEntity.ok(response));
+    }
+
+    private static int clampLimit(Integer limit) {
+        if (limit == null || limit <= 0) {
+            return DEFAULT_LIMIT;
+        }
+        return Math.min(limit, MAX_LIMIT);
+    }
+
+    private static List<String> buildScopeChain(String sessionId) {
+        if (sessionId == null || sessionId.isBlank()) {
+            return Collections.singletonList("global");
+        }
+        List<String> chain = new ArrayList<>(2);
+        chain.add(sessionId);
+        chain.add("global");
+        return chain;
+    }
+
+    private static RelevantMemoryResponse.Item toDto(MemoryItem item) {
+        List<String> tags = item.getTags() == null
+                ? new ArrayList<>()
+                : new ArrayList<>(item.getTags());
+        List<String> references = item.getReferences() == null
+                ? new ArrayList<>()
+                : new ArrayList<>(item.getReferences());
+        return RelevantMemoryResponse.Item.builder()
+                .id(item.getId())
+                .layer(item.getLayer() != null ? item.getLayer().name() : null)
+                .type(item.getType() != null ? item.getType().name() : null)
+                .title(item.getTitle())
+                .content(item.getContent())
+                .scope(item.getScope())
+                .tags(tags)
+                .source(item.getSource())
+                .confidence(item.getConfidence())
+                .salience(item.getSalience())
+                .ttlDays(item.getTtlDays())
+                .createdAt(formatInstant(item.getCreatedAt()))
+                .updatedAt(formatInstant(item.getUpdatedAt()))
+                .lastAccessedAt(formatInstant(item.getLastAccessedAt()))
+                .references(references)
+                .referenceCount(references.size())
+                .build();
+    }
+
+    private static String formatInstant(Instant instant) {
+        return instant != null ? instant.toString() : null;
+    }
+}
diff --git a/golemcore-bot-app/src/test/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryControllerTest.java b/golemcore-bot-app/src/test/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryControllerTest.java
new file mode 100644
index 000000000..5e9f846a4
--- /dev/null
+++ b/golemcore-bot-app/src/test/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryControllerTest.java
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2026 Aleksei Kuleshov
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Contact: alex@kuleshov.tech
+ */
+
+package me.golemcore.bot.adapter.inbound.web.controller;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+import me.golemcore.bot.client.dto.RelevantMemoryResponse;
+import me.golemcore.bot.domain.component.MemoryComponent;
+import me.golemcore.bot.domain.model.MemoryItem;
+import me.golemcore.bot.domain.model.MemoryQuery;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.mockito.ArgumentCaptor;
+import org.springframework.http.HttpStatus;
+import reactor.test.StepVerifier;
+
+import java.time.Instant;
+import java.util.List;
+
+class MemoryControllerTest {
+
+    private MemoryComponent memoryComponent;
+    private MemoryController controller;
+
+    @BeforeEach
+    void setUp() {
+        memoryComponent = mock(MemoryComponent.class);
+        controller = new MemoryController(memoryComponent);
+    }
+
+    @Test
+    void shouldReturnRelevantItemsForActiveSession() {
+        Instant now = Instant.parse("2026-04-30T10:00:00Z");
+        MemoryItem item = MemoryItem.builder()
+                .id("mem-1")
+                .layer(MemoryItem.Layer.SEMANTIC)
+                .type(MemoryItem.Type.PROJECT_FACT)
+                .title("Optimizer config path")
+                .content("Path is /opt/golemcore/configs/optimizer_config.yaml")
+                .scope("global")
+                .tags(List.of("optimizer"))
+                .createdAt(now)
+                .updatedAt(now)
+                .references(List.of("session-a", "session-b"))
+                .build();
+        when(memoryComponent.queryItems(any(MemoryQuery.class))).thenReturn(List.of(item));
+
+        StepVerifier.create(controller.getRelevantMemories("chat-123", "optimizer", 5))
+                .assertNext(resp -> {
+                    assertEquals(HttpStatus.OK, resp.getStatusCode());
+                    RelevantMemoryResponse body = resp.getBody();
+                    assertNotNull(body);
+                    assertEquals("chat-123", body.getSessionId());
+                    assertEquals("optimizer", body.getQueryText());
+                    assertEquals(1, body.getItems().size());
+                    RelevantMemoryResponse.Item dto = body.getItems().get(0);
+                    assertEquals("mem-1", dto.getId());
+                    assertEquals("SEMANTIC", dto.getLayer());
+                    assertEquals("PROJECT_FACT", dto.getType());
+                    assertEquals("Optimizer config path", dto.getTitle());
+                    assertEquals(2, dto.getReferenceCount());
+                })
+                .verifyComplete();
+    }
+
+    @Test
+    void shouldClampLimitAndIncludeSessionInScopeChain() {
+        when(memoryComponent.queryItems(any(MemoryQuery.class))).thenReturn(List.of());
+        ArgumentCaptor<MemoryQuery> captor = ArgumentCaptor.forClass(MemoryQuery.class);
+
+        StepVerifier.create(controller.getRelevantMemories("chat-1", null, 99))
+                .expectNextCount(1)
+                .verifyComplete();
+
+        verify(memoryComponent).queryItems(captor.capture());
+        MemoryQuery query = captor.getValue();
+        assertEquals(50, query.getWorkingTopK());
+        assertEquals(50, query.getEpisodicTopK());
+        assertEquals("chat-1", query.getScope());
+        assertTrue(query.getScopeChain().contains("chat-1"));
+        assertTrue(query.getScopeChain().contains("global"));
+    }
+
+    @Test
+    void shouldFallBackToGlobalScopeWhenSessionMissing() {
+        when(memoryComponent.queryItems(any(MemoryQuery.class))).thenReturn(List.of());
+        ArgumentCaptor<MemoryQuery> captor = ArgumentCaptor.forClass(MemoryQuery.class);
+
+        StepVerifier.create(controller.getRelevantMemories(null, null, null))
+                .expectNextCount(1)
+                .verifyComplete();
+
+        verify(memoryComponent).queryItems(captor.capture());
+        MemoryQuery query = captor.getValue();
+        assertEquals("global", query.getScope());
+        assertEquals(List.of("global"), query.getScopeChain());
+        assertEquals(8, query.getSemanticTopK());
+    }
+}
diff --git a/golemcore-bot-client/src/main/java/me/golemcore/bot/client/dto/RelevantMemoryResponse.java b/golemcore-bot-client/src/main/java/me/golemcore/bot/client/dto/RelevantMemoryResponse.java
new file mode 100644
index 000000000..9d03f343c
--- /dev/null
+++ b/golemcore-bot-client/src/main/java/me/golemcore/bot/client/dto/RelevantMemoryResponse.java
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026 Aleksei Kuleshov
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Contact: alex@kuleshov.tech
+ */
+
+package me.golemcore.bot.client.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Dashboard payload for the Inspector Memory tab. Each item describes a Memory
+ * V2 record that is potentially relevant to the active conversation.
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+public class RelevantMemoryResponse {
+
+    @Builder.Default
+    private List<Item> items = new ArrayList<>();
+
+    private String sessionId;
+    private String queryText;
+
+    @Data
+    @Builder
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class Item {
+        private String id;
+        private String layer;
+        private String type;
+        private String title;
+        private String content;
+        private String scope;
+
+        @Builder.Default
+        private List<String> tags = new ArrayList<>();
+
+        private String source;
+        private Double confidence;
+        private Double salience;
+        private Integer ttlDays;
+        private String createdAt;
+        private String updatedAt;
+        private String lastAccessedAt;
+
+        @Builder.Default
+        private List<String> references = new ArrayList<>();
+
+        private int referenceCount;
+    }
+}

From 3cc260ce105e51cbd9500a816f5caceaf7b78dda Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Thu, 30 Apr 2026 19:28:28 -0400
Subject: [PATCH 5/6] fix(memory): replace @RequiredArgsConstructor in
 MemoryController
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ArchUnit's MavenModuleDependencyArchitectureTest forbids Lombok's
@RequiredArgsConstructor on production beans — controllers in this
codebase use private final fields with an explicit constructor (cf.
PlansController, SessionsController). Drop the Lombok annotation and
write the constructor by hand.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../adapter/inbound/web/controller/MemoryController.java    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java b/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
index 21b59f840..d0ee80c2a 100644
--- a/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
+++ b/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
@@ -18,7 +18,6 @@
 
 package me.golemcore.bot.adapter.inbound.web.controller;
 
-import lombok.RequiredArgsConstructor;
 import me.golemcore.bot.client.dto.RelevantMemoryResponse;
 import me.golemcore.bot.domain.component.MemoryComponent;
 import me.golemcore.bot.domain.model.MemoryItem;
@@ -41,7 +40,6 @@
  */
 @RestController
 @RequestMapping("/api/memory")
-@RequiredArgsConstructor
 public class MemoryController {
 
     private static final int DEFAULT_LIMIT = 8;
@@ -49,6 +47,10 @@ public class MemoryController {
 
     private final MemoryComponent memoryComponent;
 
+    public MemoryController(MemoryComponent memoryComponent) {
+        this.memoryComponent = memoryComponent;
+    }
+
     @GetMapping("/relevant")
     public Mono<ResponseEntity<RelevantMemoryResponse>> getRelevantMemories(
             @RequestParam(required = false) String sessionId,

From 5caa4fd993bbc20f4d7ed233a432774db799d698 Mon Sep 17 00:00:00 2001
From: Alex Kuleshov <alex@kuleshov.tech>
Date: Thu, 30 Apr 2026 19:32:43 -0400
Subject: [PATCH 6/6] fix(memory): drop "View all memories" link from Inspector

The button routed to /settings/memory which opens the memory preset
editor, not a list of knowledge artifacts. Until a dedicated all-memories
page exists, removing the link is clearer than misdirecting the user.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../harness/inspector/InspectorMemoryTab.tsx  | 12 +---------
 dashboard/src/styles/harness.scss             | 23 -------------------
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
index d97be7a10..7fbcc3d86 100644
--- a/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
+++ b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { FiArrowRight, FiFilter, FiSearch } from 'react-icons/fi';
+import { FiFilter, FiSearch } from 'react-icons/fi';
 import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
 import { useChatSessionStore } from '../../../../store/chatSessionStore';
 import { useRelevantMemories } from '../../../../hooks/useRelevantMemories';
@@ -27,7 +26,6 @@ function deriveQueryFromMessages(messages: ReturnType<typeof useChatRuntimeStore
 }
 
 export default function InspectorMemoryTab() {
-  const navigate = useNavigate();
   const sessionId = useChatSessionStore((s) => s.activeSessionId);
   const session = useChatRuntimeStore((s) => s.sessions[sessionId]);
   const queryHint = useMemo(() => deriveQueryFromMessages(session?.messages), [session?.messages]);
@@ -115,14 +113,6 @@ export default function InspectorMemoryTab() {
           ))}
         </div>
       )}
-      <button
-        type="button"
-        className="memory-tab__view-all"
-        onClick={() => navigate('/settings/memory')}
-      >
-        <span>View all memories</span>
-        <FiArrowRight size={14} aria-hidden="true" />
-      </button>
     </div>
   );
 }
diff --git a/dashboard/src/styles/harness.scss b/dashboard/src/styles/harness.scss
index a8379d0de..6c140b12b 100644
--- a/dashboard/src/styles/harness.scss
+++ b/dashboard/src/styles/harness.scss
@@ -876,29 +876,6 @@
   gap: var(--hns-space-3);
 }
 
-.memory-tab__view-all {
-  appearance: none;
-  border: 1px solid var(--hns-border-subtle);
-  background: transparent;
-  color: var(--hns-text-secondary);
-  border-radius: var(--hns-radius-md);
-  padding: 8px var(--hns-space-3);
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--hns-space-2);
-  cursor: pointer;
-  font-size: var(--hns-font-md);
-}
-
-.memory-tab__view-all:hover,
-.memory-tab__view-all:focus-visible {
-  background: var(--hns-bg-card-hover);
-  color: var(--hns-text-primary);
-  border-color: var(--hns-border-strong);
-  outline: none;
-}
-
 /* Memory card */
 
 .memory-card {