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/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/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/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/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/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..d5e08b4b0
--- /dev/null
+++ b/dashboard/src/components/layout/harness/HarnessShell.tsx
@@ -0,0 +1,63 @@
+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 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);
+  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>
+      <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/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..07976d353
--- /dev/null
+++ b/dashboard/src/components/layout/harness/SecondarySidebar.tsx
@@ -0,0 +1,153 @@
+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 { useSystemHealth, 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 { data: health } = useSystemHealth();
+  const isSelfEvolvingEnabled = runtimeConfig?.selfEvolving?.enabled === true;
+  const versionLabel = health?.version != null ? `v${health.version}` : 'v…';
+  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__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"
+            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 className="harness-sidebar__group-label">{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}
+                  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>
+                  <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>
+        <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/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..5c49d69b3
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorActionsCard.tsx
@@ -0,0 +1,64 @@
+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';
+
+const EXPORT_EVENT = 'harness:export-session';
+
+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));
+  };
+
+  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={handleCompact}
+          disabled={compacting}
+        >
+          <FiZap size={14} aria-hidden="true" />
+          <span>{compacting ? 'Compacting…' : 'Compact context'}</span>
+        </button>
+        <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={handleDebugBundle}>
+          <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..51c2693ff
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorLogsTab.tsx
@@ -0,0 +1,160 @@
+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;
+
+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';
+}
+
+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 (args.level !== 'ALL' && entry.level.toUpperCase() !== args.level) {
+      return false;
+    }
+    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(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 [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>;
+  }
+  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>
+      <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">
+          {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) => (
+            <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..7fbcc3d86
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorMemoryTab.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useState } from 'react';
+import { 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';
+
+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 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 (isError) {
+    return (
+      <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>
+    );
+  }
+
+  return (
+    <div className="harness-inspector__placeholder-stack">
+      <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>
+      ) : (
+        <div className="memory-tab__list">
+          {filtered.map((item) => (
+            <MemoryArtifactCard key={item.id} item={item} now={now} />
+          ))}
+        </div>
+      )}
+    </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..d4c89dcc2
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorPlanTab.tsx
@@ -0,0 +1,65 @@
+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;
+  const featureEnabled = data?.featureEnabled !== false;
+
+  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>
+        {!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>
+      {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/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..2b125bd5e
--- /dev/null
+++ b/dashboard/src/components/layout/harness/inspector/InspectorToolsTab.tsx
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useChatSessionStore } from '../../../../store/chatSessionStore';
+import { useChatRuntimeStore } from '../../../../store/chatRuntimeStore';
+import ToolCallTimeline from '../../../agentRun/ToolCallTimeline';
+import { 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">
+          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} />
+    </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/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/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/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/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/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/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/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/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..6c140b12b
--- /dev/null
+++ b/dashboard/src/styles/harness.scss
@@ -0,0 +1,1497 @@
+/*
+ * 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-sidebar-width-collapsed: 60px;
+  --hns-sidebar-width-expanded: 280px;
+  --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;
+}
+
+/* ------------------------------------------------------------------ */
+/* Sidebar (collapsed by default, hover/focus expanded)               */
+/* ------------------------------------------------------------------ */
+
+.harness-sidebar {
+  flex: 0 0 var(--hns-sidebar-width-collapsed);
+  width: var(--hns-sidebar-width-collapsed);
+  display: flex;
+  flex-direction: column;
+  background: var(--hns-bg-elevated);
+  border-right: 1px solid var(--hns-border-subtle);
+  min-height: 0;
+  overflow: hidden;
+  transition: flex-basis 180ms ease, width 180ms ease;
+  position: relative;
+  z-index: 5;
+}
+
+.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-sidebar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--hns-space-3);
+  padding: var(--hns-space-3) 14px;
+  height: var(--hns-topbar-height);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.harness-sidebar__brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--hns-radius-md);
+  background: var(--hns-accent-soft);
+  color: var(--hns-accent-strong);
+  font-weight: 700;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.harness-sidebar__brand-text {
+  font-size: var(--hns-font-md);
+  font-weight: 600;
+  color: var(--hns-text-primary);
+  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);
+  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;
+  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 {
+  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: 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 {
+  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: 8px 12px;
+  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;
+  white-space: nowrap;
+}
+
+.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;
+  width: 20px;
+  flex-shrink: 0;
+}
+
+.harness-sidebar__link-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  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 {
+  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);
+  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 {
+  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;
+  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 {
+  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;
+  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: 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 {
+  color: var(--hns-danger);
+}
+
+.harness-sidebar__footer {
+  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;
+  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;
+}
+
+/* ------------------------------------------------------------------ */
+/* 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 — 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 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;
+  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;
+  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);
+}
+
+/* ------------------------------------------------------------------ */
+/* 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                                                          */
+/* ------------------------------------------------------------------ */
+
+.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-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);
+  }
+
+  .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);
+  }
+}
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..d0ee80c2a
--- /dev/null
+++ b/golemcore-bot-app/src/main/java/me/golemcore/bot/adapter/inbound/web/controller/MemoryController.java
@@ -0,0 +1,134 @@
+/*
+ * 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 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")
+public class MemoryController {
+
+    private static final int DEFAULT_LIMIT = 8;
+    private static final int MAX_LIMIT = 50;
+
+    private final MemoryComponent memoryComponent;
+
+    public MemoryController(MemoryComponent memoryComponent) {
+        this.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;
+    }
+}