diff --git a/apps/code/snapshots.yml b/apps/code/snapshots.yml
index 1a1c7bd850..31a3b4ce8a 100644
--- a/apps/code/snapshots.yml
+++ b/apps/code/snapshots.yml
@@ -40,62 +40,18 @@ snapshots:
         hash: v1.k4693efd2.58144cdaf083f0ff98b136a5bae61686a2a856a0fce7835d5d11647e106b0b4f.-G4zNrpohMozh41d_NvfZ-pD1DUHkANR7XkHBaV6CCQ
     archive-archivedtasksview--with-missing-task--light:
         hash: v1.k4693efd2.2aad97fbf529d8e0c0896105051e140af8322d9c699653b0c60d6375dd2ea4c3.mc318EfElvU4a7rtpUNV9VJbFkYNpei4y4vhOcf3GRI
-    autoresearch-configurable-full-dashboard--before-baseline--dark:
-        hash: v1.k4693efd2.34b322085d4a0cc5723c4cc8b984fd81cf89809714f11de742605666e6979db2.D9JzgYGAuE95x0QkPVy4uBUYgUIkwrCCA08KMKXkKcg
-    autoresearch-configurable-full-dashboard--before-baseline--light:
-        hash: v1.k4693efd2.b4b99cafb1e4d7694726e86243910650f8ccb9156a8e81e5497f0705ab4ac383.H1b2sQFL1TV2nIDVf2RDkTSsUoA79-JM_FYlD-DTGzE
-    autoresearch-configurable-full-dashboard--completed-run--dark:
-        hash: v1.k4693efd2.2d10fc5b66537e110c096ca6349e1b46beffc2fcc8314e20a08a2c919c392ec7.xK39m0L7j5UNMcu1hrpcg7nPSPV0zwQLIq2UFbmoeaM
-    autoresearch-configurable-full-dashboard--completed-run--light:
-        hash: v1.k4693efd2.c03f43fe95a2dd45a722daacb531779cb6ebba5808b9790a4ccabbec8e16150f.95LMNvhl0FSreegkTDvktiIn_Pu47xydgq5KqtUOsCY
-    autoresearch-configurable-full-dashboard--playground--dark:
-        hash: v1.k4693efd2.67b1deb79c2c8a600bc77090e45a1586645df4af8a862ae90566583ba74e0c8c.0ae-YcXq7CDAUW5tZWa1nCJ2bK8XzG0U-f_0onDkF_Y
-    autoresearch-configurable-full-dashboard--playground--light:
-        hash: v1.k4693efd2.3944a480bec8fc56e71d16b8c44fd6dacb36736dad00c7116b24bb2f56bc3131.V-VD__LGWRlzMVNRv8QxglnuD1i_xHRBZg2fmwfXa70
-    autoresearch-observability--active-experiment--dark:
-        hash: v1.k4693efd2.7635193c423ee44a6f8ac40f1a2c885cec49e9131e187ff164b03b051ea71143.NSfHpkBCo_0DJaaVHP71WGkWASEwHc48GBXF4o4VUhc
-    autoresearch-observability--active-experiment--light:
-        hash: v1.k4693efd2.e5c9b0dfc9d814f5022401d9b6c8271165c28a28f74b4708e155c4800e7b690a.8TP9QEzM6yKB-_gt61fVEAsj6DRry5LFAUIsHVINo_8
-    autoresearch-observability--waiting-for-plan--dark:
-        hash: v1.k4693efd2.36e182d9438abfdbda7251f25255a1f6db00192111eaf6dde5c4adf74aa5ed85.jw3FQJBnplmsYY-xEJXq8MulEs2bReiud2xK4eYNVDI
-    autoresearch-observability--waiting-for-plan--light:
-        hash: v1.k4693efd2.261edaaca1e0d8b9932ca1af0d79e35365d6e53345252869b3ef79ebb0530d61.ejvug_EfWycvKL5XL93pJFLyxr22HfuK7lV6nqIRAco
-    autoresearch-research-map--establishing-baseline--dark:
-        hash: v1.k4693efd2.5162214d6100856e8a233f364cb0035845ae943dcac07afa0267ddc4d07bc53d.sDh8juzfN9gbXqX8suNdCWAEUqhuyRlUy4jEsh2ETlQ
-    autoresearch-research-map--establishing-baseline--light:
-        hash: v1.k4693efd2.21a9c5d13c2ca2592e5c73312ffcc39f16868bf38427ede85cba1f2b476d9de5.hJ9ITN88WX-wzhjiDY40OLDd_DBCV4hCq3FPSy-1e8w
-    autoresearch-research-map--findings-by-code-area--dark:
-        hash: v1.k4693efd2.24241937b04bc1845e1c0d5d6561f84f32d3512d32628fedb7a8be571d46c4e0._rYrAun17fUqJJEmIuYJQC6svmW2qQmJsSa2zMcpoao
-    autoresearch-research-map--findings-by-code-area--light:
-        hash: v1.k4693efd2.db68afd28cd0e204ab0ca02602b66adff99ec157918303a02a8f228d5fa23aeb.0iIfBWYqdNGwka2L3P-qS37Y_T0AWGHwgEDixWQL9X8
-    autoresearch-results-and-summary--baseline-just-recorded--dark:
-        hash: v1.k4693efd2.fd89d5a250d7c9ba75656208f5fa85a1aff2d27f5e7a62d4dbe19c374668b0ed.oM02rII7mDCEH5GFyZ0oJgzizclMQWMb1S7hn0F8vZA
-    autoresearch-results-and-summary--baseline-just-recorded--light:
-        hash: v1.k4693efd2.cdb1596e320e7afa01d150626530df417351bbc5562cac2be32d9df77e3ea738.YzCAe389zQW1meP8ie4HfA2qIj65qCz7FX0oWu0daPg
-    autoresearch-results-and-summary--completed-run--dark:
-        hash: v1.k4693efd2.9aed29fb95ba712a8a8bb04cbd4c4f704879525c91b57db620cf4a91238d7017.5CT3vEkBAVI1-Ekd8x2WTHoBodZcebTUAeXMa6hdtQE
-    autoresearch-results-and-summary--completed-run--light:
-        hash: v1.k4693efd2.c37fe3b4fa73de73dabc3dc8480292bde19d4d84f4820819ec48ad3be3c5d698.ElWCwCPyshrgyzvqTDxx7WuGvtGFzZmnpvusc0LBlAI
-    autoresearch-rundashboard--maximize-completed--dark:
-        hash: v1.k4693efd2.80aa97a95ac4830be972d1366b77567b85f935dd368175bcdabe40a76d6b353c.Ne1OrLmuP1SEO4m3fiAcmatww9ivj3JLrDBMr_H5O5Y
-    autoresearch-rundashboard--maximize-completed--light:
-        hash: v1.k4693efd2.618b533f0d5e83f66f157deb8d1c4d8175f130c1b21d65a09f0bc3dab1dd0400.qTssqMO2-FgGs4NBvZPVHh7s0qgzkc-YSLCyqSqm9iA
-    autoresearch-rundashboard--minimize-in-progress--dark:
-        hash: v1.k4693efd2.d13eebe8c14696a1cd48b6b29097e0d96841b36f2ba9fecc299615d01c256d7f.qjZSf4ehb8NGy72JTAb_PhsCL9EVosZ6UZb6HwQPCNU
-    autoresearch-rundashboard--minimize-in-progress--light:
-        hash: v1.k4693efd2.eadc597c9bc11eca735f15c903ae63f09a57e4f781374ca29ea2d3213243889f.ZAeEfQLOMhLC_hwkcoDYpfRVbVIdT4MTskEQscvtJQU
-    autoresearch-rundashboard--no-iterations-yet--dark:
-        hash: v1.k4693efd2.a6940dbc2b9658b27b378a9682aa0a620aa9257264dfbd4fcb50171b67ab3bbc.L5nlctLAoM5-lzijBFcR4dZPEcvRBbtE88esDyjxjXA
-    autoresearch-rundashboard--no-iterations-yet--light:
-        hash: v1.k4693efd2.1a3a3769b49045c8ff70c895c6a840c8652cd2a34dfe52ddac26a2e27d367400.Wv7VCEDJVF8GYlXQC1j10XznFekbNVR4lXPO8lmd9XA
-    autoresearch-runtime-stats--before-usage-update--dark:
-        hash: v1.k4693efd2.f31283c7e391d88a500507127c4bf327b6ba8e47be04ca975b140c07824cf032.Z07es_PMn-0tcNOj5f11fMTbzm_juPqb0PCXjEbrSjY
-    autoresearch-runtime-stats--before-usage-update--light:
-        hash: v1.k4693efd2.cdbd6673dad805fd4f5763e2d050c8bb6db7a5b84725dccd9f530d951db920cf.m8ngO8I6Jsb1OcWI_6zltKZdjsK97tF0XcjImqpJS8k
-    autoresearch-runtime-stats--with-context-usage--dark:
-        hash: v1.k4693efd2.b76d39ed8142d4449cb5befcde538bb11a6bffcbed66e81bdc3aa8e2746b7e06.GSIfBsgE-3RYuqlLUpluZ87C6-KjBUaTj2eu_a5elZ8
-    autoresearch-runtime-stats--with-context-usage--light:
-        hash: v1.k4693efd2.18889b5eda942cd19b0f7be00a87925d632529ca4111fac180d6339f7d34d1ca.X3s9IXrx2-TdQaJEjf1td3hwvNzeIp3Xq3uQh9Gwt5A
+    autoresearch-dashboard--active-run--dark:
+        hash: v1.k4693efd2.4b0e10f2aff5473d6dda9983e889748831b6dd930d345c074dde8cff7e95f979.QMSLjN0Ey631SdSe2D-SvT62ftICU65KnsiuZR_LQPo
+    autoresearch-dashboard--active-run--light:
+        hash: v1.k4693efd2.d190408b5d3c167d64da65b15581c903ade25b43a5de0254779f337647ec93f6.hAJZFZjDp0c1LwlXDyQ-mcLVwC1xwEUVVQth-NHlGAw
+    autoresearch-dashboard--completed-run--dark:
+        hash: v1.k4693efd2.74ee05d10c67c6878ee4c19059cc66d22af2c5d18ba27ef584c04f421ab80302.OD5XadbFRLiMCl2Scp7tIS3oew-jSh02LQmiqSdO0bM
+    autoresearch-dashboard--completed-run--light:
+        hash: v1.k4693efd2.910162d6bf5ad1588b5453e4f5464e2d3c12ee77c890e58a9bc60c2ae6d936d1.SzyIVMxc-AMRfA1X3_Vi59wmQ1xIljuwAw2Hn2jKXKc
+    autoresearch-dashboard--researching-baseline--dark:
+        hash: v1.k4693efd2.8936e61d920c886326a8a252f6eb937e66caa5ae43b76daf6f8ead0e9f9a05f3.5ZC4Fj11UEOvgDP7owvjlydg61nBBF2-cMxiltr5Gk0
+    autoresearch-dashboard--researching-baseline--light:
+        hash: v1.k4693efd2.35673a495a589ea3862abaf7ef46bdb4c3bb87c0bf79a563a8bf5782e7b6e74d.gW02sNxx7mUnKRvoexWGTRnjYgglyBrSLtz37Wic5TA
     billing-usagemeter--exceeded--dark:
         hash: v1.k4693efd2.dc026c5cace4e44c4cc713b95654e278d7bf0439a4862e9ceea39a033974815d.m5Be4dAOwwmt-UlEnhbhrKiym1rlGUiGZ4oyUonUoVg
     billing-usagemeter--exceeded--light:
diff --git a/packages/core/src/autoresearch/autoresearch.test.ts b/packages/core/src/autoresearch/autoresearch.test.ts
index d071303ea9..68790cf444 100644
--- a/packages/core/src/autoresearch/autoresearch.test.ts
+++ b/packages/core/src/autoresearch/autoresearch.test.ts
@@ -270,6 +270,7 @@ function makeRun(
     researchFindings: [],
     iterations: [],
     startedAt: 1_000,
+    pauseIntervals: [],
     endedAt: null,
     endReason: null,
     interruptedReason: null,
@@ -941,6 +942,46 @@ describe("AutoresearchService", () => {
   });
 
   describe("pause and resume", () => {
+    it("records and settles paused duration", () => {
+      vi.setSystemTime(1_000);
+      const run = service.startRun(baseConfig);
+
+      vi.setSystemTime(11_000);
+      service.pauseRun(run.id);
+      expect(activeRun().pausedAt).toBe(11_000);
+      expect(activeRun().pausedDurationMs).toBe(0);
+
+      vi.setSystemTime(31_000);
+      service.resumeRun(run.id);
+      expect(activeRun().pausedAt).toBeNull();
+      expect(activeRun().pausedDurationMs).toBe(20_000);
+      expect(activeRun().pauseIntervals).toEqual([
+        { startedAt: 11_000, endedAt: 31_000 },
+      ]);
+    });
+
+    it("excludes interruption downtime and records its interval", async () => {
+      vi.setSystemTime(1_000);
+      service.startRun(baseConfig);
+      await flush();
+
+      vi.setSystemTime(11_000);
+      sessionStoreSetters.updateSession(TASK_RUN_ID, { status: "error" });
+      expect(activeRun().status).toBe("interrupted");
+      expect(activeRun().pausedAt).toBe(11_000);
+
+      vi.setSystemTime(31_000);
+      sessionStoreSetters.updateSession(TASK_RUN_ID, { status: "connected" });
+      await flush();
+
+      expect(activeRun().status).toBe("running");
+      expect(activeRun().pausedAt).toBeNull();
+      expect(activeRun().pausedDurationMs).toBe(20_000);
+      expect(activeRun().pauseIntervals).toEqual([
+        { startedAt: 11_000, endedAt: 31_000 },
+      ]);
+    });
+
     it("records iterations while paused but does not continue the loop", () => {
       const run = service.startRun(baseConfig);
       service.pauseRun(run.id);
@@ -989,13 +1030,22 @@ describe("AutoresearchService", () => {
     });
 
     it("resume waits for the agent when a turn is in flight", () => {
+      vi.setSystemTime(1_000);
       const run = service.startRun(baseConfig);
+
+      vi.setSystemTime(11_000);
       service.pauseRun(run.id);
       beginTurn();
       sentPrompts = [];
 
+      vi.setSystemTime(31_000);
       service.resumeRun(run.id);
       expect(sentPrompts).toHaveLength(0);
+      expect(activeRun().pausedAt).toBeNull();
+      expect(activeRun().pausedDurationMs).toBe(20_000);
+      expect(activeRun().pauseIntervals).toEqual([
+        { startedAt: 11_000, endedAt: 31_000 },
+      ]);
 
       completeTurn(reportText(10));
       expect(activeRun().iterations).toHaveLength(1);
diff --git a/packages/core/src/autoresearch/autoresearch.ts b/packages/core/src/autoresearch/autoresearch.ts
index 6b0f64bbab..7b399e8921 100644
--- a/packages/core/src/autoresearch/autoresearch.ts
+++ b/packages/core/src/autoresearch/autoresearch.ts
@@ -162,6 +162,9 @@ export class AutoresearchService {
       researchFindings: [],
       iterations: [],
       startedAt: Date.now(),
+      pausedAt: null,
+      pausedDurationMs: 0,
+      pauseIntervals: [],
       endedAt: null,
       endReason: null,
       interruptedReason: null,
@@ -213,6 +216,7 @@ export class AutoresearchService {
     this.clearPendingReaction(runId);
     this.clearRecoveryTimer(runId);
     this.remindersSent.delete(runId);
+    this.pauseClock(runId);
     autoresearchStoreActions.setRunStatus(runId, "paused");
     this.persist(runId);
     this.restoreOriginalStage(run);
@@ -231,6 +235,7 @@ export class AutoresearchService {
       return;
     }
 
+    this.settlePausedClock(runId);
     this.clearRecoveryTimer(runId);
     const session = getSessionForTask(
       sessionStore.getState(),
@@ -257,6 +262,7 @@ export class AutoresearchService {
       autoresearchStoreActions.setRunStatus(runId, "interrupted", {
         interruptedReason: run.interruptedReason ?? "session-error",
       });
+      this.pauseClock(runId);
       this.persist(runId);
       void this.attemptRecovery(runId);
       return;
@@ -765,6 +771,7 @@ export class AutoresearchService {
         if (run?.status === "running") {
           this.clearPendingReaction(runId);
           this.remindersSent.delete(runId);
+          this.pauseClock(runId);
           autoresearchStoreActions.setRunStatus(runId, "paused");
           this.persist(runId);
           this.restoreOriginalStage(run);
@@ -806,6 +813,7 @@ export class AutoresearchService {
     this.clearPendingReaction(runId);
     // A fresh interruption gets its own reminder budget on resume.
     this.remindersSent.delete(runId);
+    this.pauseClock(runId);
     autoresearchStoreActions.setRunStatus(runId, "interrupted", {
       interruptedReason: reason,
       lastError,
@@ -885,6 +893,7 @@ export class AutoresearchService {
       return;
     }
 
+    this.settlePausedClock(runId);
     this.clearRecoveryTimer(runId);
     const session = getSessionForTask(
       sessionStore.getState(),
@@ -915,6 +924,7 @@ export class AutoresearchService {
     status: "completed" | "stopped" | "failed",
     options: { endReason: AutoresearchEndReason; lastError?: string },
   ): void {
+    this.settlePausedClock(runId);
     const run = autoresearchStore.getState().runs[runId];
     autoresearchStoreActions.setRunStatus(runId, status, options);
     this.persist(runId);
@@ -928,6 +938,29 @@ export class AutoresearchService {
     if (run) this.restoreOriginalStage(run);
   }
 
+  private pauseClock(runId: string): void {
+    const run = autoresearchStore.getState().runs[runId];
+    if (!run || run.pausedAt != null) return;
+    autoresearchStoreActions.setPauseTiming(
+      runId,
+      Date.now(),
+      run.pausedDurationMs ?? 0,
+      run.pauseIntervals ?? [],
+    );
+  }
+
+  private settlePausedClock(runId: string): void {
+    const run = autoresearchStore.getState().runs[runId];
+    if (!run || run.pausedAt == null) return;
+    const endedAt = Date.now();
+    autoresearchStoreActions.setPauseTiming(
+      runId,
+      null,
+      (run.pausedDurationMs ?? 0) + Math.max(0, endedAt - run.pausedAt),
+      [...(run.pauseIntervals ?? []), { startedAt: run.pausedAt, endedAt }],
+    );
+  }
+
   private clearPendingReaction(runId: string): void {
     const timer = this.pendingReactions.get(runId);
     if (timer) clearTimeout(timer);
diff --git a/packages/core/src/autoresearch/autoresearchStore.ts b/packages/core/src/autoresearch/autoresearchStore.ts
index dcf82fc0d3..7a00f53a6e 100644
--- a/packages/core/src/autoresearch/autoresearchStore.ts
+++ b/packages/core/src/autoresearch/autoresearchStore.ts
@@ -3,6 +3,7 @@ import {
   type AutoresearchEndReason,
   type AutoresearchInterruptionReason,
   type AutoresearchIteration,
+  type AutoresearchPauseInterval,
   type AutoresearchPhase,
   type AutoresearchResearchFinding,
   type AutoresearchRun,
@@ -75,6 +76,20 @@ export const autoresearchStoreActions = {
     updateRun(runId, (run) => ({ ...run, phase }));
   },
 
+  setPauseTiming(
+    runId: string,
+    pausedAt: number | null,
+    pausedDurationMs: number,
+    pauseIntervals: AutoresearchPauseInterval[],
+  ): void {
+    updateRun(runId, (run) => ({
+      ...run,
+      pausedAt,
+      pausedDurationMs,
+      pauseIntervals,
+    }));
+  },
+
   setRunStatus(
     runId: string,
     status: AutoresearchRunStatus,
diff --git a/packages/core/src/autoresearch/schemas.test.ts b/packages/core/src/autoresearch/schemas.test.ts
index 6f10d4f1b7..b84b55590d 100644
--- a/packages/core/src/autoresearch/schemas.test.ts
+++ b/packages/core/src/autoresearch/schemas.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   AUTORESEARCH_MAX_ITERATIONS_LIMIT,
   autoresearchConfigSchema,
@@ -86,10 +86,13 @@ describe("parseStoredAutoresearchRun", () => {
     expect(run?.interruptedReason).toBeNull();
   });
 
-  it("restores a running run as an app-restart interruption", () => {
+  it("restores a running run as a paused app-restart interruption", () => {
+    vi.setSystemTime(20_000);
     const run = parseStoredAutoresearchRun(storedRun("running"));
     expect(run?.status).toBe("interrupted");
     expect(run?.interruptedReason).toBe("app-restart");
+    expect(run?.pausedAt).toBe(20_000);
+    expect(run?.pausedDurationMs).toBe(0);
   });
 
   it("defaults interruptedReason for blobs persisted before the field existed", () => {
diff --git a/packages/core/src/autoresearch/schemas.ts b/packages/core/src/autoresearch/schemas.ts
index 16d775ab7a..49b8f2a2cf 100644
--- a/packages/core/src/autoresearch/schemas.ts
+++ b/packages/core/src/autoresearch/schemas.ts
@@ -124,6 +124,14 @@ export function isTerminalRunStatus(status: AutoresearchRunStatus): boolean {
 export const autoresearchPhaseSchema = z.enum(["implement", "measure"]);
 export type AutoresearchPhase = z.infer<typeof autoresearchPhaseSchema>;
 
+export const autoresearchPauseIntervalSchema = z.object({
+  startedAt: z.number(),
+  endedAt: z.number(),
+});
+export type AutoresearchPauseInterval = z.infer<
+  typeof autoresearchPauseIntervalSchema
+>;
+
 export const autoresearchRunSchema = z.object({
   id: z.string().min(1),
   config: autoresearchConfigSchema,
@@ -150,6 +158,9 @@ export const autoresearchRunSchema = z.object({
   researchFindings: z.array(autoresearchResearchFindingSchema).default([]),
   iterations: z.array(autoresearchIterationSchema),
   startedAt: z.number(),
+  pausedAt: z.number().nullable().optional(),
+  pausedDurationMs: z.number().min(0).optional(),
+  pauseIntervals: z.array(autoresearchPauseIntervalSchema).optional(),
   endedAt: z.number().nullable(),
   endReason: autoresearchEndReasonSchema.nullable(),
   interruptedReason: autoresearchInterruptionReasonSchema
@@ -176,12 +187,17 @@ export function parseStoredAutoresearchRun(
   }
   const parsed = autoresearchRunSchema.safeParse(raw);
   if (!parsed.success) return null;
-  const run = parsed.data;
+  let run = parsed.data;
+  if (run.status === "paused" && run.pausedAt === undefined) {
+    run = { ...run, pausedAt: Date.now(), pausedDurationMs: 0 };
+  }
   if (run.status !== "running") return run;
   return {
     ...run,
     status: "interrupted",
     interruptedReason: "app-restart",
+    pausedAt: Date.now(),
+    pausedDurationMs: run.pausedDurationMs ?? 0,
   };
 }
 
diff --git a/packages/core/src/autoresearch/stats.test.ts b/packages/core/src/autoresearch/stats.test.ts
index 47489a6a54..9e1efd0813 100644
--- a/packages/core/src/autoresearch/stats.test.ts
+++ b/packages/core/src/autoresearch/stats.test.ts
@@ -3,6 +3,7 @@ import type { AutoresearchIteration, AutoresearchRun } from "./schemas";
 import {
   computeBest,
   evaluateContinuation,
+  getAutoresearchElapsedMs,
   isImprovement,
   meetsTarget,
   summarizeRun,
@@ -32,6 +33,11 @@ function makeRun(overrides: {
   direction?: "maximize" | "minimize";
   targetValue?: number | null;
   maxIterations?: number;
+  startedAt?: number;
+  pausedAt?: number | null;
+  pausedDurationMs?: number;
+  pauseIntervals?: AutoresearchRun["pauseIntervals"];
+  endedAt?: number | null;
 }): AutoresearchRun {
   return {
     id: "ar-1",
@@ -54,14 +60,43 @@ function makeRun(overrides: {
     originalEffort: null,
     researchFindings: [],
     iterations: overrides.iterations ?? [],
-    startedAt: 0,
-    endedAt: null,
+    startedAt: overrides.startedAt ?? 0,
+    pausedAt: overrides.pausedAt,
+    pausedDurationMs: overrides.pausedDurationMs,
+    pauseIntervals: overrides.pauseIntervals ?? [],
+    endedAt: overrides.endedAt ?? null,
     endReason: null,
     interruptedReason: null,
     lastError: null,
   };
 }
 
+describe("getAutoresearchElapsedMs", () => {
+  it("freezes while paused and excludes completed pause intervals", () => {
+    expect(
+      getAutoresearchElapsedMs(
+        makeRun({ startedAt: 1_000, pausedAt: 11_000 }),
+        31_000,
+      ),
+    ).toBe(10_000);
+    expect(
+      getAutoresearchElapsedMs(
+        makeRun({ startedAt: 1_000, pausedDurationMs: 20_000 }),
+        36_000,
+      ),
+    ).toBe(15_000);
+    expect(
+      getAutoresearchElapsedMs(
+        makeRun({
+          startedAt: 1_000,
+          pauseIntervals: [{ startedAt: 11_000, endedAt: 31_000 }],
+        }),
+        36_000,
+      ),
+    ).toBe(15_000);
+  });
+});
+
 describe("isImprovement", () => {
   it.each([
     ["maximize", 5, 3, true],
diff --git a/packages/core/src/autoresearch/stats.ts b/packages/core/src/autoresearch/stats.ts
index 5c0165d766..d9c7413aec 100644
--- a/packages/core/src/autoresearch/stats.ts
+++ b/packages/core/src/autoresearch/stats.ts
@@ -9,6 +9,26 @@ import type {
   AutoresearchRun,
 } from "./schemas";
 
+export function getAutoresearchElapsedMs(
+  run: AutoresearchRun,
+  now: number,
+): number {
+  const effectiveEnd = run.endedAt ?? run.pausedAt ?? now;
+  const trackedPausedDurationMs = (run.pauseIntervals ?? []).reduce(
+    (total, interval) => {
+      const overlapStart = Math.max(run.startedAt, interval.startedAt);
+      const overlapEnd = Math.min(effectiveEnd, interval.endedAt);
+      return total + Math.max(0, overlapEnd - overlapStart);
+    },
+    0,
+  );
+  const pausedDurationMs = Math.max(
+    trackedPausedDurationMs,
+    run.pausedDurationMs ?? 0,
+  );
+  return Math.max(0, effectiveEnd - run.startedAt - pausedDurationMs);
+}
+
 export function isImprovement(
   candidate: number,
   reference: number | null,
diff --git a/packages/ui/src/features/autoresearch/AutoresearchFullDashboard.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchFullDashboard.stories.tsx
index 54aa83c194..313ef6d205 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchFullDashboard.stories.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchFullDashboard.stories.tsx
@@ -58,7 +58,7 @@ function FullDashboardStory(props: FullDashboardStoryProps) {
     : null;
 
   return (
-    <div className="mx-auto min-h-screen max-w-[900px] bg-gray-1 p-5">
+    <div className="@container mx-auto min-h-screen max-w-[900px] bg-gray-1 p-5">
       <Flex direction="column" gap="4">
         <DashboardHeader run={run} />
         {run.iterations.length === 0 ? (
@@ -149,36 +149,11 @@ function buildRun(props: FullDashboardStoryProps): AutoresearchRun {
     phase: null,
     originalModel: null,
     originalEffort: null,
-    researchFindings: props.showResearch
-      ? [
-          {
-            index: 1,
-            area: "build",
-            summary: "Located the measurement path",
-            finding:
-              "The metric can be reproduced from production build output.",
-            nextStep: "Measure the baseline",
-            at: STARTED_AT + 60_000,
-          },
-          {
-            index: 2,
-            area: "frontend",
-            summary: "Mapped the eager dependency graph",
-            finding: "Several modal modules load before the user opens them.",
-            nextStep: "Test a lazy loading boundary",
-            at: STARTED_AT + 3 * 60_000,
-          },
-        ]
-      : [],
+    researchFindings: props.showResearch ? buildResearchFindings() : [],
     iterations: buildIterations(props),
     startedAt: STARTED_AT,
     endedAt: ended ? STORY_NOW : null,
-    endReason:
-      props.status === "completed"
-        ? "max-iterations"
-        : props.status === "stopped"
-          ? "stopped-by-user"
-          : null,
+    endReason: endReasonForStatus(props.status),
     interruptedReason: props.status === "interrupted" ? "session-error" : null,
     lastError:
       props.status === "failed"
@@ -187,6 +162,90 @@ function buildRun(props: FullDashboardStoryProps): AutoresearchRun {
   };
 }
 
+function buildResearchFindings(): AutoresearchRun["researchFindings"] {
+  return [
+    {
+      index: 1,
+      area: "build",
+      summary: "Located the production bundle measurement",
+      finding:
+        "The dashboard marginal bundle can be isolated from esbuild metadata.",
+      nextStep: "Establish the baseline bundle size",
+      at: STARTED_AT + 60_000,
+    },
+    {
+      index: 2,
+      area: "build",
+      summary: "Found the dashboard entry chunk",
+      finding:
+        "The route entry includes editor and modal code before either feature is opened.",
+      nextStep: "Compare the entry chunk with lazy boundaries enabled",
+      at: STARTED_AT + 2 * 60_000,
+    },
+    {
+      index: 3,
+      area: "frontend",
+      summary: "Mapped eager dashboard imports",
+      finding: "Dashboard modals load before users open them.",
+      nextStep: "Inspect modal boundaries",
+      at: STARTED_AT + 3 * 60_000,
+    },
+    {
+      index: 4,
+      area: "frontend",
+      summary: "Traced editor initialization",
+      finding:
+        "The rich text editor initializes with the dashboard even when no editor is visible.",
+      nextStep: "Move editor setup behind the edit action",
+      at: STARTED_AT + 4 * 60_000,
+    },
+    {
+      index: 5,
+      area: "data",
+      summary: "Identified duplicate insight requests",
+      finding:
+        "The summary and chart issue equivalent requests during the first render.",
+      nextStep: "Share the initial query result",
+      at: STARTED_AT + 5 * 60_000,
+    },
+    {
+      index: 6,
+      area: "data",
+      summary: "Measured oversized response fields",
+      finding:
+        "Dashboard cards receive metadata that is only needed in the detail view.",
+      nextStep: "Select the minimal card response shape",
+      at: STARTED_AT + 6 * 60_000,
+    },
+    {
+      index: 7,
+      area: "testing",
+      summary: "Located the bundle regression test",
+      finding:
+        "The current threshold covers the full application instead of the dashboard entry.",
+      nextStep: "Add a dashboard-specific bundle assertion",
+      at: STARTED_AT + 7 * 60_000,
+    },
+    {
+      index: 8,
+      area: "testing",
+      summary: "Confirmed a stable measurement command",
+      finding:
+        "The production build emits deterministic metadata for the dashboard chunk.",
+      nextStep: "Establish the baseline bundle size",
+      at: STARTED_AT + 8 * 60_000,
+    },
+  ];
+}
+
+function endReasonForStatus(
+  status: AutoresearchRunStatus,
+): AutoresearchRun["endReason"] {
+  if (status === "completed") return "max-iterations";
+  if (status === "stopped") return "stopped-by-user";
+  return null;
+}
+
 function buildIterations(
   props: FullDashboardStoryProps,
 ): AutoresearchIteration[] {
@@ -210,12 +269,7 @@ function buildIterations(
       value,
       bestValue: best ?? value,
       delta: previous === null ? null : value - previous,
-      summary:
-        index === 1
-          ? "Established the baseline"
-          : index % 3 === 1
-            ? "Measured a regression and changed direction"
-            : `Completed focused experiment ${index}`,
+      summary: iterationSummary(index),
       hypothesis:
         index === 1
           ? "The baseline captures the current production behavior"
@@ -232,6 +286,12 @@ function buildIterations(
   });
 }
 
+function iterationSummary(index: number): string {
+  if (index === 1) return "Established the baseline";
+  if (index % 3 === 1) return "Measured a regression and changed direction";
+  return `Completed focused experiment ${index}`;
+}
+
 function buildEvents(props: FullDashboardStoryProps): AcpMessage[] {
   if (!props.showActivity) return [];
   return [
@@ -244,22 +304,82 @@ function buildEvents(props: FullDashboardStoryProps): AcpMessage[] {
     }),
     sessionEvent(STARTED_AT + 13 * 60_000, {
       sessionUpdate: "tool_call",
-      title: "Search relevant modules",
+      toolCallId: "search",
+      title: "Find autoresearch dashboard components",
       kind: "search",
       status: "completed",
     }),
-    sessionEvent(STARTED_AT + 17 * 60_000, {
+    sessionEvent(STARTED_AT + 14 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "read",
+      title: "Read existing timeline implementation",
+      kind: "read",
+      status: "completed",
+    }),
+    sessionEvent(STARTED_AT + 15 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "server",
+      title: "Start Storybook dev server",
+      kind: "execute",
+      rawInput: { command: "pnpm --filter code storybook" },
+      status: props.status === "running" ? "in_progress" : "completed",
+    }),
+    sessionEvent(STARTED_AT + 16 * 60_000, {
       sessionUpdate: "tool_call",
-      title: "Edit the selected implementation",
+      toolCallId: "layout",
+      title: "Add responsive timeline layout",
+      kind: "edit",
+      status: "completed",
+    }),
+    sessionEvent(STARTED_AT + 18 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "typecheck",
+      title: "Typecheck UI package",
+      kind: "execute",
+      rawInput: { command: "pnpm --filter @posthog/ui typecheck" },
+      status: "completed",
+    }),
+    sessionEvent(STARTED_AT + 19 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "screenshots",
+      title: "Inspect Storybook screenshots",
+      kind: "read",
+      status: "completed",
+    }),
+    sessionEvent(STARTED_AT + 20 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "stories",
+      title: "Add dashboard story variants",
       kind: "edit",
       status: "completed",
     }),
     sessionEvent(STARTED_AT + 22 * 60_000, {
       sessionUpdate: "tool_call",
-      title: "Run the metric measurement",
+      toolCallId: "benchmark",
+      title: "Run bundle benchmark",
       kind: "execute",
+      rawInput: { command: "pnpm bench:dashboard" },
       status: props.status === "running" ? "in_progress" : "completed",
     }),
+    sessionEvent(STARTED_AT + 23 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "status",
+      title: "Check repository status",
+      kind: "execute",
+      rawInput: { command: "git status --short" },
+      status: "completed",
+    }),
+    sessionEvent(STARTED_AT + 24 * 60_000, {
+      sessionUpdate: "tool_call",
+      toolCallId: "visual-tests",
+      title: "Capture visual snapshots",
+      kind: "execute",
+      rawInput: {
+        command:
+          "pnpm exec test-storybook --browsers chromium AutoresearchFullDashboard.stories.tsx",
+      },
+      status: "completed",
+    }),
   ];
 }
 
@@ -276,7 +396,7 @@ function sessionEvent(ts: number, update: Record<string, unknown>): AcpMessage {
 }
 
 const meta = {
-  title: "Autoresearch/Configurable Full Dashboard",
+  title: "Autoresearch/Dashboard",
   component: FullDashboardStory,
   parameters: { layout: "fullscreen" },
   argTypes: {
@@ -326,12 +446,21 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const ActiveRun: Story = {
+  parameters: { testOptions: { viewport: { width: 1280, height: 2200 } } },
+};
 
-export const BeforeBaseline: Story = {
+export const ResearchingBaseline: Story = {
   args: { iterationCount: 0, showResearch: true, status: "running" },
+  parameters: {
+    testOptions: {
+      waitForLoadersToDisappear: false,
+      viewport: { width: 1280, height: 2500 },
+    },
+  },
 };
 
 export const CompletedRun: Story = {
   args: { status: "completed", iterationCount: 8 },
+  parameters: { testOptions: { viewport: { width: 1280, height: 2400 } } },
 };
diff --git a/packages/ui/src/features/autoresearch/AutoresearchObservability.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchObservability.stories.tsx
deleted file mode 100644
index 4e826d19b7..0000000000
--- a/packages/ui/src/features/autoresearch/AutoresearchObservability.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
-import type { AcpMessage } from "@posthog/shared";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AutoresearchObservability } from "./AutoresearchObservability";
-
-const STARTED_AT = Date.parse("2026-07-10T14:00:00Z");
-
-const run: AutoresearchRun = {
-  id: "run-observability",
-  config: {
-    taskId: "task-1",
-    direction: "minimize",
-    targetValue: 300,
-    maxIterations: 10,
-    implementModel: null,
-    measureModel: null,
-    implementEffort: null,
-    measureEffort: null,
-    instructions: "Reduce dashboard loading time.",
-  },
-  status: "running",
-  metricName: "dashboard bundle",
-  metricUnit: "KiB",
-  phase: null,
-  originalModel: null,
-  originalEffort: null,
-  researchFindings: [],
-  iterations: [],
-  startedAt: STARTED_AT,
-  endedAt: STARTED_AT + 10 * 60_000,
-  endReason: null,
-  interruptedReason: null,
-  lastError: null,
-};
-
-function event(ts: number, update: Record<string, unknown>): AcpMessage {
-  return {
-    type: "acp_message",
-    ts,
-    message: {
-      jsonrpc: "2.0",
-      method: "session/update",
-      params: { update },
-    },
-  } as AcpMessage;
-}
-
-const events = [
-  event(STARTED_AT + 30_000, {
-    sessionUpdate: "agent_message_chunk",
-    content: {
-      type: "text",
-      text: "```autoresearch\ntype: plan\nhypothesis: eager modal imports dominate the dashboard entry bundle\nplan: lazy load dashboard modals and rerun the bundle measurement\napproach: code splitting\n```",
-    },
-  }),
-  event(STARTED_AT + 60_000, {
-    sessionUpdate: "tool_call",
-    title: "Search dashboard imports",
-    kind: "search",
-    status: "completed",
-  }),
-  event(STARTED_AT + 3 * 60_000, {
-    sessionUpdate: "tool_call",
-    title: "Edit DashboardScene",
-    kind: "edit",
-    status: "completed",
-  }),
-  event(STARTED_AT + 7 * 60_000, {
-    sessionUpdate: "tool_call",
-    title: "Measure dashboard bundle",
-    kind: "execute",
-    status: "in_progress",
-  }),
-];
-
-const meta: Meta<typeof AutoresearchObservability> = {
-  title: "Autoresearch/Observability",
-  component: AutoresearchObservability,
-  decorators: [
-    (Story) => (
-      <div className="mx-auto max-w-[760px] p-4">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof AutoresearchObservability>;
-
-export const ActiveExperiment: Story = { args: { run, events } };
-
-export const WaitingForPlan: Story = { args: { run, events: [] } };
diff --git a/packages/ui/src/features/autoresearch/AutoresearchObservability.test.tsx b/packages/ui/src/features/autoresearch/AutoresearchObservability.test.tsx
new file mode 100644
index 0000000000..8d7dbad7b9
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/AutoresearchObservability.test.tsx
@@ -0,0 +1,311 @@
+import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
+import type { AcpMessage } from "@posthog/shared";
+import { Theme } from "@radix-ui/themes";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { AutoresearchObservability } from "./AutoresearchObservability";
+
+function updateEvent(ts: number, update: Record<string, unknown>): AcpMessage {
+  return {
+    type: "acp_message",
+    ts,
+    message: {
+      jsonrpc: "2.0",
+      method: "session/update",
+      params: { update },
+    },
+  } as AcpMessage;
+}
+
+function makeRun(overrides: Partial<AutoresearchRun> = {}): AutoresearchRun {
+  return {
+    id: "run-1",
+    config: {
+      taskId: "task-1",
+      direction: "minimize",
+      targetValue: null,
+      maxIterations: 10,
+      implementModel: null,
+      measureModel: null,
+      implementEffort: null,
+      measureEffort: null,
+      instructions: "Reduce memory usage.",
+    },
+    status: "running",
+    metricName: "memory",
+    metricUnit: "MB",
+    phase: null,
+    originalModel: null,
+    originalEffort: null,
+    researchFindings: [
+      {
+        index: 1,
+        summary: "Mapped the hot path",
+        finding: "Serialization dominates the current measurement.",
+        nextStep: "Inspect the serializer",
+        area: "workspace server",
+        at: 1_500,
+      },
+    ],
+    iterations: [],
+    startedAt: 1_000,
+    endedAt: null,
+    endReason: null,
+    interruptedReason: null,
+    lastError: null,
+    ...overrides,
+  };
+}
+
+describe("AutoresearchObservability", () => {
+  it("renders timeline-shaped skeletons before the first activity", () => {
+    render(
+      <Theme>
+        <AutoresearchObservability run={makeRun()} events={[]} />
+      </Theme>,
+    );
+
+    const loading = screen.getByRole("status", {
+      name: "Loading live timeline",
+    });
+    expect(within(loading).getAllByRole("listitem")).toHaveLength(3);
+    expect(loading.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(10);
+  });
+
+  it("renders current findings and a reconciled newest-first timeline", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "search-1",
+        title: "Search serializers",
+        kind: "search",
+        status: "in_progress",
+      }),
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call_update",
+        toolCallId: "search-1",
+        status: "completed",
+      }),
+      updateEvent(5_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "edit-1",
+        title: "Edit serializer",
+        kind: "edit",
+        status: "in_progress",
+      }),
+    ];
+
+    render(
+      <Theme>
+        <AutoresearchObservability run={makeRun()} events={events} />
+      </Theme>,
+    );
+
+    expect(screen.getByText("Current findings")).toBeVisible();
+    expect(screen.getByText("Mapped the hot path")).toBeVisible();
+    const timeline = screen.getByText("Edit serializer").closest("ol");
+    const collapsible = timeline?.closest('[data-slot="collapsible"]');
+    expect(collapsible).toHaveClass(
+      "bg-transparent",
+      "hover:bg-transparent",
+      "data-open:bg-transparent",
+    );
+    expect(screen.getByRole("button", { name: "Live timeline" })).toHaveClass(
+      "aria-expanded:bg-transparent",
+    );
+    expect(timeline?.parentElement).toHaveClass("pt-3");
+    const items = within(timeline as HTMLElement).getAllByRole("listitem");
+    expect(items[0]).toHaveTextContent("Edit serializer");
+    expect(items[0]).toHaveTextContent("Now");
+    expect(items[0].querySelector("time")).toHaveAttribute(
+      "datetime",
+      new Date(5_000).toISOString(),
+    );
+    expect(items[1]).toHaveTextContent("Search serializers");
+    expect(items[1]).not.toHaveTextContent("Now");
+  });
+
+  it("toggles the live timeline", async () => {
+    const user = userEvent.setup();
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: "Search serializers",
+        kind: "search",
+        status: "completed",
+      }),
+    ];
+
+    render(
+      <Theme>
+        <AutoresearchObservability run={makeRun()} events={events} />
+      </Theme>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Live timeline" });
+    expect(screen.getByText("Search serializers")).toBeVisible();
+
+    await user.click(trigger);
+    expect(screen.queryByText("Search serializers")).not.toBeInTheDocument();
+
+    await user.click(trigger);
+    expect(screen.getByText("Search serializers")).toBeVisible();
+  });
+
+  it("labels only the newest live command as now", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: "Start dev server",
+        kind: "execute",
+        status: "in_progress",
+      }),
+      updateEvent(4_000, {
+        sessionUpdate: "tool_call",
+        title: "Run benchmark",
+        kind: "execute",
+        status: "in_progress",
+      }),
+    ];
+
+    render(
+      <Theme>
+        <AutoresearchObservability run={makeRun()} events={events} />
+      </Theme>,
+    );
+
+    const timeline = screen.getByText("Run benchmark").closest("ol");
+    const items = within(timeline as HTMLElement).getAllByRole("listitem");
+    expect(items[0]).toHaveTextContent("Run benchmark");
+    expect(items[0]).toHaveTextContent("Now");
+    expect(items[0].querySelector("[data-timeline-details]")).toHaveTextContent(
+      "Now",
+    );
+    expect(within(items[0]).getByText("Now").parentElement).toHaveClass(
+      "ml-auto",
+    );
+    expect(items[0]).not.toHaveClass("bg-blue-2/50");
+    expect(within(items[0]).getByText("Now")).not.toHaveClass(
+      "motion-safe:animate-pulse",
+    );
+    expect(items[1]).toHaveTextContent("Start dev server");
+    expect(items[1]).toHaveTextContent("Background");
+    expect(within(items[1]).getByText("Background")).toHaveClass(
+      "text-gray-10",
+    );
+    expect(screen.getAllByText("Now")).toHaveLength(1);
+  });
+
+  it("renders commands as single-line code tooltip triggers", () => {
+    const command =
+      "/bin/zsh -lc 'pnpm bench:memory -- --label autoresearch-baseline'";
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: command,
+        kind: "execute",
+        status: "in_progress",
+      }),
+    ];
+
+    render(
+      <Theme>
+        <AutoresearchObservability run={makeRun()} events={events} />
+      </Theme>,
+    );
+
+    const trigger = screen.getByText(command);
+    expect(trigger.tagName).toBe("CODE");
+    expect(trigger.parentElement).toHaveClass(
+      "w-full",
+      "max-w-full",
+      "truncate",
+      "font-mono",
+      "bg-gray-3",
+    );
+    expect(trigger.parentElement).toHaveAttribute("type", "button");
+    expect(
+      trigger.closest("li")?.querySelector("[data-activity-icon]"),
+    ).toHaveClass("h-5", "w-3.5", "items-center", "justify-center");
+    const commandColumn = trigger
+      .closest("li")
+      ?.querySelector("[data-timeline-command-column]");
+    expect(commandColumn).toContainElement(trigger);
+    expect(commandColumn?.querySelector(".text-\\[11px\\]")).toBeTruthy();
+    const timelineItem = trigger.closest("li");
+    expect(timelineItem).toHaveClass(
+      "grid",
+      "w-full",
+      "min-w-0",
+      "grid-cols-[auto_minmax(0,1fr)]",
+    );
+    expect(timelineItem?.parentElement).not.toHaveClass("overflow-hidden");
+  });
+
+  it("sorts observed time from longest to shortest", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: "Search serializers",
+        kind: "search",
+        status: "completed",
+      }),
+      updateEvent(7_000, {
+        sessionUpdate: "tool_call",
+        title: "Edit serializer",
+        kind: "edit",
+        status: "completed",
+      }),
+    ];
+
+    render(
+      <Theme>
+        <AutoresearchObservability
+          run={makeRun({ status: "completed", endedAt: 9_000 })}
+          events={events}
+        />
+      </Theme>,
+    );
+
+    const observedTime = screen.getByText("Observed time").closest("section");
+    expect(observedTime).not.toBeNull();
+    const rows = observedTime?.querySelectorAll("[data-observed-kind]");
+    expect(
+      Array.from(rows ?? []).map((row) =>
+        row.getAttribute("data-observed-kind"),
+      ),
+    ).toEqual([
+      "research",
+      "implementation",
+      "reasoning",
+      "measurement",
+      "execution",
+    ]);
+  });
+
+  it("freezes observed time at the pause timestamp", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: "Run benchmark",
+        kind: "execute",
+        status: "in_progress",
+      }),
+    ];
+
+    const { container } = render(
+      <Theme>
+        <AutoresearchObservability
+          run={makeRun({ status: "paused", pausedAt: 11_000 })}
+          events={events}
+        />
+      </Theme>,
+    );
+
+    expect(
+      container.querySelector('[data-observed-kind="measurement"]'),
+    ).toHaveTextContent("9s");
+    expect(screen.queryByText("Now")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/features/autoresearch/AutoresearchObservability.tsx b/packages/ui/src/features/autoresearch/AutoresearchObservability.tsx
index f047768fff..68a49604cd 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchObservability.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchObservability.tsx
@@ -1,13 +1,27 @@
 import {
   Binoculars,
+  Check,
   Code,
   Compass,
   Lightbulb,
   ListChecks,
   MagnifyingGlass,
+  Terminal,
   TestTube,
 } from "@phosphor-icons/react";
 import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
+import { getAutoresearchElapsedMs } from "@posthog/core/autoresearch/stats";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Badge as QuillBadge,
+  Skeleton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@posthog/quill";
 import type { AcpMessage } from "@posthog/shared";
 import { Badge, Progress, Text } from "@radix-ui/themes";
 import { useEffect, useMemo, useState } from "react";
@@ -24,86 +38,288 @@ export function AutoresearchObservability({
   run: AutoresearchRun;
   events: AcpMessage[];
 }) {
-  const now = useLiveNow(run.endedAt === null);
+  const live = run.endedAt === null && run.status === "running";
+  const now = useLiveNow(live);
+  const observationEnd = run.endedAt ?? run.pausedAt ?? now;
   const activity = useMemo(
-    () => analyzeAutoresearchActivity(events, run.startedAt, run.endedAt, now),
-    [events, now, run.endedAt, run.startedAt],
+    () =>
+      analyzeAutoresearchActivity(
+        events,
+        run.startedAt,
+        run.endedAt,
+        observationEnd,
+        {
+          live,
+          pauseIntervals: run.pauseIntervals,
+          pausedDurationMs: run.pausedDurationMs,
+        },
+      ),
+    [
+      events,
+      live,
+      observationEnd,
+      run.endedAt,
+      run.pauseIntervals,
+      run.pausedDurationMs,
+      run.startedAt,
+    ],
   );
   const lastIteration = run.iterations.at(-1);
   const hypothesis =
     activity.currentPlan?.hypothesis ?? lastIteration?.hypothesis;
   const plan = activity.currentPlan?.plan ?? lastIteration?.plan;
   const approach = activity.currentPlan?.approach ?? lastIteration?.approach;
+  const observedTime = (
+    Object.keys(activity.timeByKind) as AutoresearchActivityKind[]
+  ).sort(
+    (left, right) => activity.timeByKind[right] - activity.timeByKind[left],
+  );
 
   return (
-    <div className="grid gap-3 lg:grid-cols-2">
-      <section className="rounded-md border border-gray-5 p-3">
-        <SectionTitle
-          icon={<Lightbulb size={15} />}
-          title="Current experiment"
-        />
-        <Detail
-          label="Hypothesis"
-          value={hypothesis ?? "Waiting for the agent to state a hypothesis."}
-        />
-        <Detail
-          label="Iteration plan"
-          value={
-            plan ?? "The next focused experiment has not been announced yet."
-          }
-        />
-        {approach && (
-          <div className="mt-3">
-            <Badge color="gray" variant="soft">
-              {approach}
-            </Badge>
-          </div>
-        )}
-      </section>
-
-      <section className="rounded-md border border-gray-5 p-3">
-        <SectionTitle icon={<Compass size={15} />} title="Observed time" />
-        <div className="mt-3 flex flex-col gap-2.5">
-          {(Object.keys(activity.timeByKind) as AutoresearchActivityKind[]).map(
-            (kind) => (
+    <div className="@container grid gap-3">
+      <div className="grid @min-[700px]:grid-cols-2 grid-cols-1 gap-3">
+        <section className="rounded-md border border-gray-5 p-3">
+          <SectionTitle
+            icon={<Lightbulb size={15} />}
+            title="Current experiment"
+          />
+          <Detail
+            label="Hypothesis"
+            value={hypothesis ?? "Waiting for the agent to state a hypothesis."}
+          />
+          <Detail
+            label="Iteration plan"
+            value={
+              plan ?? "The next focused experiment has not been announced yet."
+            }
+          />
+          {approach && (
+            <div className="mt-3">
+              <Badge color="gray" variant="soft">
+                {approach}
+              </Badge>
+            </div>
+          )}
+        </section>
+
+        <section className="rounded-md border border-gray-5 p-3">
+          <SectionTitle icon={<Compass size={15} />} title="Observed time" />
+          <div className="mt-3 flex flex-col gap-2.5">
+            {observedTime.map((kind) => (
               <TimeRow
                 key={kind}
                 kind={kind}
                 value={activity.timeByKind[kind]}
-                total={Math.max(1, (run.endedAt ?? now) - run.startedAt)}
+                total={Math.max(1, getAutoresearchElapsedMs(run, now))}
               />
-            ),
-          )}
-        </div>
-      </section>
-
-      <section className="rounded-md border border-gray-5 p-3 lg:col-span-2">
-        <SectionTitle icon={<ListChecks size={15} />} title="Live activity" />
-        {activity.items.length === 0 ? (
-          <Text as="p" size="1" color="gray" className="mt-2">
-            Waiting for the first observable tool action.
-          </Text>
-        ) : (
-          <ol className="mt-2 grid gap-2 sm:grid-cols-2">
-            {activity.items.map((item) => (
-              <li
-                key={item.id}
-                className="flex items-center gap-2 rounded-sm bg-gray-2 px-2.5 py-2"
-              >
-                <ActivityIcon kind={item.kind} />
-                <Text size="1" className="min-w-0 flex-1 truncate">
-                  {item.label}
-                </Text>
-                {item.active && <Badge color="blue">Active</Badge>}
-              </li>
             ))}
-          </ol>
-        )}
-      </section>
+          </div>
+        </section>
+      </div>
+
+      <CurrentFindings run={run} />
+
+      <TooltipProvider delay={300}>
+        <Collapsible
+          defaultOpen
+          className="min-w-0 max-w-full overflow-hidden rounded-md border border-gray-5 bg-transparent hover:bg-transparent data-open:bg-transparent"
+        >
+          <CollapsibleTrigger className="p-3 hover:bg-gray-2 aria-expanded:bg-transparent">
+            <SectionTitle
+              icon={<ListChecks size={15} />}
+              title="Live timeline"
+            />
+          </CollapsibleTrigger>
+          <CollapsibleContent className="min-w-0 max-w-full overflow-hidden px-3 pt-3 pb-3">
+            {activity.items.length === 0 ? (
+              <EmptyTimelineState
+                live={run.status === "running" || run.status === "interrupted"}
+              />
+            ) : (
+              <ol className="relative ml-1 min-w-0 max-w-full border-gray-5 border-l">
+                {activity.items.map((item) => (
+                  <li
+                    key={item.id}
+                    className="relative grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-2.5 pb-3 pl-4 last:pb-0"
+                  >
+                    <span className="-left-[7px] absolute flex size-3.5 items-center justify-center rounded-full border border-gray-5 bg-gray-1 text-gray-10">
+                      <ActivityMarker item={item} />
+                    </span>
+                    <ActivityIcon kind={item.kind} />
+                    <div
+                      className="min-w-0 flex-1 overflow-hidden"
+                      data-timeline-command-column
+                    >
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={activityLabelTrigger(item.command)}
+                        >
+                          {activityLabelContent(item.command, item.label)}
+                        </TooltipTrigger>
+                        <TooltipContent
+                          side="top"
+                          className="wrap-break-word max-w-[min(560px,calc(100vw-2rem))] whitespace-pre-wrap"
+                        >
+                          {item.label}
+                        </TooltipContent>
+                      </Tooltip>
+                      <div
+                        className="mt-0.5 flex min-w-0 items-center gap-1.5 overflow-hidden"
+                        data-timeline-details
+                      >
+                        <Text
+                          as="div"
+                          size="1"
+                          color="gray"
+                          className="min-w-0 truncate text-[11px]"
+                        >
+                          {TIME_LABEL[item.kind]} ·{" "}
+                          <time dateTime={new Date(item.at).toISOString()}>
+                            {formatCommandTime(item.at)}
+                          </time>{" "}
+                          · {formatTimelineTime(item.at - run.startedAt)}
+                        </Text>
+                        <ActivityStatusBadge item={item} />
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      </TooltipProvider>
     </div>
   );
 }
 
+const TIMELINE_SKELETON_ROWS = [
+  { id: "current", commandWidth: "w-3/5", detailWidth: "w-2/5" },
+  { id: "recent", commandWidth: "w-4/5", detailWidth: "w-1/3" },
+  { id: "earlier", commandWidth: "w-1/2", detailWidth: "w-2/5" },
+];
+
+function TimelineLoadingState() {
+  return (
+    <output aria-label="Loading live timeline">
+      <ol className="relative ml-1 border-gray-5 border-l">
+        {TIMELINE_SKELETON_ROWS.map((row, index) => (
+          <li
+            key={row.id}
+            className="relative grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2.5 pb-3 pl-4 last:pb-0"
+          >
+            <span className="-left-[7px] absolute flex size-3.5 items-center justify-center rounded-full border border-gray-5 bg-gray-1">
+              <span className="size-1.5 rounded-full bg-gray-6" />
+            </span>
+            <Skeleton className="size-3.5 rounded-sm" />
+            <div className="min-w-0 pt-px">
+              <Skeleton className={`h-3 ${row.commandWidth}`} />
+              <div className="mt-1.5 flex items-center gap-1.5">
+                <Skeleton className={`h-2.5 ${row.detailWidth}`} />
+                {index === 0 && (
+                  <Skeleton className="ml-auto h-5 w-10 rounded-full" />
+                )}
+              </div>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </output>
+  );
+}
+
+function EmptyTimelineState({ live }: { live: boolean }) {
+  if (live) return <TimelineLoadingState />;
+  return (
+    <Text as="p" size="1" color="gray">
+      No timeline activity was recorded.
+    </Text>
+  );
+}
+
+function CurrentFindings({ run }: { run: AutoresearchRun }) {
+  const findings = run.researchFindings.slice(-3).reverse();
+  return (
+    <section className="rounded-md border border-gray-5 p-3">
+      <SectionTitle
+        icon={<MagnifyingGlass size={15} />}
+        title="Current findings"
+      />
+      {findings.length === 0 ? (
+        <Text as="p" size="1" color="gray" className="mt-2">
+          Findings appear here as the agent records research checkpoints.
+        </Text>
+      ) : (
+        <ol className="mt-2 divide-y divide-gray-5">
+          {findings.map((finding) => (
+            <li key={finding.index} className="py-2 first:pt-0 last:pb-0">
+              <div className="flex items-center gap-2">
+                <Text size="1" weight="medium" className="min-w-0 flex-1">
+                  {finding.summary}
+                </Text>
+                {finding.area && <FindingAreaBadge area={finding.area} />}
+              </div>
+              <Text as="p" size="1" color="gray" className="mt-1 leading-4">
+                {finding.finding}
+              </Text>
+              {finding.nextStep && (
+                <Text as="p" size="1" className="mt-1 text-blue-11 leading-4">
+                  Next: {finding.nextStep}
+                </Text>
+              )}
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+function FindingAreaBadge({ area }: { area: string }) {
+  return (
+    <TooltipProvider delay={300}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              className="min-w-0 max-w-32 shrink-0 rounded-sm focus-visible:outline-2 focus-visible:outline-blue-8 focus-visible:outline-offset-1"
+            />
+          }
+        >
+          <Badge
+            color="gray"
+            size="1"
+            variant="soft"
+            className="block max-w-full truncate"
+          >
+            {area}
+          </Badge>
+        </TooltipTrigger>
+        <TooltipContent side="top">{area}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function activityLabelTrigger(command: boolean) {
+  const typography = command ? "font-mono text-[11px]" : "text-xs";
+  const background = command ? "bg-gray-3 px-1.5 py-0.5" : "bg-transparent";
+  return (
+    <button
+      type="button"
+      className={`block w-full min-w-0 max-w-full truncate rounded-sm text-left leading-4 ${typography} ${background} focus-visible:outline-2 focus-visible:outline-blue-8 focus-visible:outline-offset-1`}
+    />
+  );
+}
+
+function activityLabelContent(command: boolean, label: string) {
+  if (command) {
+    return <code>{label}</code>;
+  }
+  return <span>{label}</span>;
+}
+
 function SectionTitle({
   icon,
   title,
@@ -114,9 +330,7 @@ function SectionTitle({
   return (
     <div className="flex items-center gap-2 text-gray-11">
       {icon}
-      <Text size="2" weight="medium">
-        {title}
-      </Text>
+      <h3 className="font-medium text-sm">{title}</h3>
     </div>
   );
 }
@@ -137,7 +351,8 @@ function Detail({ label, value }: { label: string; value: string }) {
 const TIME_LABEL: Record<AutoresearchActivityKind, string> = {
   research: "Research",
   implementation: "Implementation",
-  measurement: "Commands and measurement",
+  measurement: "Measurement",
+  execution: "Command execution",
   reasoning: "Reasoning and coordination",
 };
 
@@ -150,25 +365,123 @@ function TimeRow({
   value: number;
   total: number;
 }) {
-  const percentage = Math.round((value / total) * 100);
+  const percentage = Math.min(
+    100,
+    Math.max(0, Math.round((value / total) * 100)),
+  );
   return (
-    <div>
+    <div data-observed-kind={kind}>
       <div className="mb-1 flex items-center justify-between gap-3">
         <Text size="1">{TIME_LABEL[kind]}</Text>
         <Text size="1" color="gray" className="tabular-nums">
           {formatDuration(value, 0)}
         </Text>
       </div>
-      <Progress value={percentage} size="1" color="gray" />
+      <Progress
+        value={percentage}
+        size="1"
+        color="gray"
+        aria-label={`${TIME_LABEL[kind]} observed time`}
+      />
     </div>
   );
 }
 
 function ActivityIcon({ kind }: { kind: AutoresearchActivityKind }) {
-  if (kind === "research") return <MagnifyingGlass size={14} />;
-  if (kind === "implementation") return <Code size={14} />;
-  if (kind === "measurement") return <TestTube size={14} />;
-  return <Binoculars size={14} />;
+  let icon = <Binoculars size={14} />;
+  if (kind === "research") icon = <MagnifyingGlass size={14} />;
+  if (kind === "implementation") icon = <Code size={14} />;
+  if (kind === "measurement") icon = <TestTube size={14} />;
+  if (kind === "execution") icon = <Terminal size={14} />;
+  return (
+    <span
+      className="flex h-5 w-3.5 shrink-0 items-center justify-center"
+      data-activity-icon
+    >
+      {icon}
+    </span>
+  );
+}
+
+function ActivityMarker({
+  item,
+}: {
+  item: { active: boolean; running: boolean };
+}) {
+  if (item.active) {
+    return (
+      <span className="relative flex size-2 items-center justify-center">
+        <span className="absolute size-2 rounded-full bg-blue-9/50 motion-safe:animate-ping" />
+        <span className="relative size-1.5 rounded-full bg-blue-9" />
+      </span>
+    );
+  }
+  if (item.running) {
+    return <span className="size-1.5 rounded-full bg-gray-8" />;
+  }
+  return <Check size={9} weight="bold" />;
+}
+
+function ActivityStatusBadge({
+  item,
+}: {
+  item: { active: boolean; running: boolean };
+}) {
+  if (item.active) {
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              className="ml-auto shrink-0 rounded-sm focus-visible:outline-2 focus-visible:outline-blue-8 focus-visible:outline-offset-1"
+            />
+          }
+        >
+          <QuillBadge variant="info">Now</QuillBadge>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          Most recently started command that has not finished
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+  if (item.running) {
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              className="ml-auto shrink-0 rounded-sm focus-visible:outline-2 focus-visible:outline-blue-8 focus-visible:outline-offset-1"
+            />
+          }
+        >
+          <QuillBadge variant="default" className="text-gray-10">
+            Background
+          </QuillBadge>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          Started earlier and is still running
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+  return null;
+}
+
+function formatTimelineTime(elapsed: number): string {
+  return `+${formatDuration(Math.max(0, elapsed), 0)}`;
+}
+
+const commandTimeFormat = new Intl.DateTimeFormat(undefined, {
+  hour: "numeric",
+  minute: "2-digit",
+  second: "2-digit",
+});
+
+function formatCommandTime(timestamp: number): string {
+  return commandTimeFormat.format(timestamp);
 }
 
 function useLiveNow(live: boolean): number {
diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx
deleted file mode 100644
index 990c525bc7..0000000000
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import type {
-  AutoresearchIteration,
-  AutoresearchRun,
-} from "@posthog/core/autoresearch/schemas";
-import { Flex } from "@radix-ui/themes";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { RunStats } from "./AutoresearchPanel";
-import { AutoresearchRuntimeStats } from "./AutoresearchRuntimeStats";
-import { IterationsTable } from "./IterationsTable";
-import { MetricChart } from "./MetricChart";
-import { PreBaselineState } from "./PreBaselineState";
-
-/**
- * The run dashboard presentational stack includes stat cards, the metric
- * chart, and the iterations table. It matches `AutoresearchPanel` without header
- * controls and dialogs (which need a live service).
- */
-function RunDashboard({ run }: { run: AutoresearchRun }) {
-  if (run.iterations.length === 0) {
-    return (
-      <Flex direction="column" gap="4">
-        <PreBaselineState
-          run={run}
-          sessionActivity={{
-            status: "connected",
-            isPromptPending: true,
-            isCompacting: false,
-          }}
-        />
-        <AutoresearchRuntimeStats run={run} usage={null} />
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex direction="column" gap="4">
-      <RunStats run={run} />
-      <MetricChart
-        iterations={run.iterations}
-        direction={run.config.direction}
-        targetValue={run.config.targetValue}
-        metricName={run.metricName ?? "the metric"}
-        unit={run.metricUnit}
-      />
-      <AutoresearchRuntimeStats
-        run={run}
-        usage={{
-          used: 42_800,
-          size: 200_000,
-          percentage: 21,
-          cost: null,
-          breakdown: null,
-        }}
-      />
-      <IterationsTable
-        iterations={run.iterations}
-        direction={run.config.direction}
-        unit={run.metricUnit}
-      />
-    </Flex>
-  );
-}
-
-const BASE_AT = Date.parse("2026-07-07T09:00:00Z");
-
-const iterationsFrom = (
-  values: number[],
-  direction: AutoresearchRun["config"]["direction"],
-  summaries: (string | null)[] = [],
-): AutoresearchIteration[] => {
-  let best: number | null = null;
-  return values.map((value, i) => {
-    best =
-      best === null || (direction === "minimize" ? value < best : value > best)
-        ? value
-        : best;
-    return {
-      index: i + 1,
-      value,
-      bestValue: best,
-      delta: i === 0 ? null : value - values[i - 1],
-      summary: summaries[i] ?? null,
-      at: BASE_AT + i * 8 * 60_000,
-    };
-  });
-};
-
-const run = (overrides: Partial<AutoresearchRun> = {}): AutoresearchRun => ({
-  id: "run-1",
-  config: {
-    taskId: "task-1",
-    direction: "minimize",
-    targetValue: 380,
-    maxIterations: 12,
-    implementModel: null,
-    measureModel: null,
-    implementEffort: null,
-    measureEffort: null,
-    instructions: "Shrink the renderer bundle without breaking tests.",
-  },
-  status: "running",
-  metricName: "bundle size",
-  metricUnit: "kB",
-  phase: null,
-  originalModel: null,
-  originalEffort: null,
-  researchFindings: [],
-  iterations: [],
-  startedAt: BASE_AT,
-  endedAt: null,
-  endReason: null,
-  interruptedReason: null,
-  lastError: null,
-  ...overrides,
-});
-
-const meta: Meta<typeof RunDashboard> = {
-  title: "Autoresearch/RunDashboard",
-  component: RunDashboard,
-  // Match the panel's column width so cards, chart, and table size realistically.
-  decorators: [
-    (Story) => (
-      <div style={{ maxWidth: 760, margin: "2rem auto", padding: "0 1rem" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof RunDashboard>;
-
-/** A minimize run in progress with noisy results, the best frontier, and a target. */
-export const MinimizeInProgress: Story = {
-  args: {
-    run: run({
-      iterations: iterationsFrom(
-        [512, 498, 505, 461, 442, 449, 407, 398],
-        "minimize",
-        [
-          "Baseline",
-          "Tree-shake icon imports",
-          "Revert: broke lazy routes",
-          "Split vendor chunk",
-          "Drop moment locales",
-          "Inline critical CSS (regression)",
-          "Lazy-load diff worker",
-          "Dedupe zod versions",
-        ],
-      ),
-    }),
-  },
-};
-
-/** A completed maximize run with no target. The loop spent its budget. */
-export const MaximizeCompleted: Story = {
-  args: {
-    run: run({
-      status: "completed",
-      endedAt: BASE_AT + 10 * 8 * 60_000,
-      endReason: "max-iterations",
-      metricName: "cache hit rate",
-      metricUnit: "%",
-      config: {
-        ...run().config,
-        direction: "maximize",
-        targetValue: null,
-        maxIterations: 10,
-      },
-      iterations: iterationsFrom(
-        [62, 71, 68, 74, 79, 77, 83, 82, 86, 85],
-        "maximize",
-        [
-          "Baseline",
-          "Warm cache on boot",
-          null,
-          "Bigger LRU",
-          null,
-          null,
-          "Precompute keys",
-          null,
-          "Batch invalidations",
-          null,
-        ],
-      ),
-    }),
-  },
-};
-
-/** Before the first metric report arrives: active baseline measurement. */
-export const NoIterationsYet: Story = {
-  args: { run: run() },
-};
diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx
index 5de566d94d..844a24548d 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.test.tsx
@@ -57,9 +57,21 @@ describe("PreBaselineState", () => {
     });
 
     expect(screen.getByText("Establishing the baseline")).toBeVisible();
+    expect(screen.getByRole("status", { name: "Loading" })).toHaveClass(
+      "motion-safe:animate-spin",
+      "motion-reduce:animate-none",
+    );
+    const metrics = screen.getByRole("status", {
+      name: "Loading autoresearch metrics",
+    });
+    expect(metrics).toBeVisible();
     expect(
-      screen.getByRole("status", { name: "Loading autoresearch metrics" }),
-    ).toBeVisible();
+      screen.getByRole("region", { name: "Autoresearch metric summary" }),
+    ).toHaveClass(
+      "grid-cols-1",
+      "@min-[360px]:grid-cols-2",
+      "@min-[700px]:grid-cols-4",
+    );
     expect(screen.getByText("0 / 10")).toBeVisible();
   });
 
@@ -105,6 +117,10 @@ describe("PreBaselineState", () => {
     renderState(makeRun({ status: "paused" }), null);
 
     expect(screen.getByText("Baseline measurement paused")).toBeVisible();
+    expect(
+      screen.getByRole("region", { name: "Autoresearch metric summary" }),
+    ).toBeVisible();
+    expect(screen.getByText("0 / 10")).toBeVisible();
     expect(
       screen.queryByRole("status", { name: "Loading autoresearch metrics" }),
     ).not.toBeInTheDocument();
diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
index 1433bfc546..78c8bc465f 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
@@ -185,7 +185,12 @@ export function AutoresearchPanel({ taskId }: AutoresearchPanelProps) {
 
   return (
     <div className="h-full overflow-y-auto">
-      <Flex direction="column" gap="4" p="4" className="mx-auto max-w-[760px]">
+      <Flex
+        direction="column"
+        gap="4"
+        p="4"
+        className="@container mx-auto max-w-[760px]"
+      >
         <RunHeader
           run={selectedRun}
           runs={runs}
@@ -294,9 +299,11 @@ function RunHeader({
           <Badge color="gray" size="1">
             {run.config.direction}
           </Badge>
-          <Badge color={badge.color} size="1">
-            {badge.label}
-          </Badge>
+          {run.status !== "paused" && (
+            <Badge color={badge.color} size="1">
+              {badge.label}
+            </Badge>
+          )}
         </Flex>
         <Flex align="center" gap="2" className="shrink-0">
           {runs.length > 1 && (
@@ -429,7 +436,7 @@ export function RunStats({ run }: { run: AutoresearchRun }) {
   const cardClassName = "rounded-md border border-(--gray-5) p-3";
 
   return (
-    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+    <div className="grid @min-[360px]:grid-cols-2 @min-[700px]:grid-cols-4 grid-cols-1 gap-2">
       <MetricCard
         title="Best"
         value={summary.best?.value ?? Number.NaN}
diff --git a/packages/ui/src/features/autoresearch/AutoresearchResults.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchResults.stories.tsx
deleted file mode 100644
index 00759d8cca..0000000000
--- a/packages/ui/src/features/autoresearch/AutoresearchResults.stories.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
-import { Flex } from "@radix-ui/themes";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { RunStats, RunSummary } from "./AutoresearchPanel";
-import { IterationsTable } from "./IterationsTable";
-
-const STARTED_AT = Date.parse("2026-07-10T14:00:00Z");
-const run: AutoresearchRun = {
-  id: "run-results",
-  config: {
-    taskId: "task-1",
-    direction: "minimize",
-    targetValue: 300,
-    maxIterations: 3,
-    implementModel: null,
-    measureModel: null,
-    implementEffort: null,
-    measureEffort: null,
-    instructions: "Reduce dashboard loading time.",
-  },
-  status: "completed",
-  metricName: "dashboard bundle",
-  metricUnit: "KiB",
-  phase: null,
-  originalModel: null,
-  originalEffort: null,
-  researchFindings: [],
-  iterations: [
-    {
-      index: 1,
-      value: 3850.7,
-      bestValue: 3850.7,
-      delta: null,
-      summary: "Established the baseline",
-      hypothesis: "The eager graph defines the current cost",
-      plan: "Measure the marginal dashboard bundle",
-      approach: "baseline",
-      at: STARTED_AT + 5 * 60_000,
-    },
-    {
-      index: 2,
-      value: 3320.4,
-      bestValue: 3320.4,
-      delta: -530.3,
-      summary: "Lazy loaded dashboard modals",
-      hypothesis: "Modal imports dominate the eager route",
-      plan: "Split modal imports and remeasure",
-      approach: "code splitting",
-      at: STARTED_AT + 15 * 60_000,
-    },
-    {
-      index: 3,
-      value: 3208.1,
-      bestValue: 3208.1,
-      delta: -112.3,
-      summary: "Deferred the insight editor",
-      hypothesis: "The editor is unused during initial dashboard render",
-      plan: "Load the editor when add insight opens",
-      approach: "lazy loading",
-      at: STARTED_AT + 25 * 60_000,
-    },
-  ],
-  startedAt: STARTED_AT,
-  endedAt: STARTED_AT + 26 * 60_000,
-  endReason: "max-iterations",
-  interruptedReason: null,
-  lastError: null,
-};
-
-function Results({ run }: { run: AutoresearchRun }) {
-  return (
-    <Flex direction="column" gap="4">
-      <RunStats run={run} />
-      <IterationsTable
-        iterations={run.iterations}
-        direction={run.config.direction}
-        unit={run.metricUnit}
-      />
-      <RunSummary run={run} />
-    </Flex>
-  );
-}
-
-const meta: Meta<typeof Results> = {
-  title: "Autoresearch/Results and Summary",
-  component: Results,
-  decorators: [
-    (Story) => (
-      <div className="mx-auto max-w-[760px] p-4">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Results>;
-
-export const CompletedRun: Story = { args: { run } };
-
-export const BaselineJustRecorded: Story = {
-  args: {
-    run: {
-      ...run,
-      status: "running",
-      endedAt: null,
-      iterations: [run.iterations[0]],
-    },
-  },
-};
diff --git a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.stories.tsx
deleted file mode 100644
index ef41f6f41d..0000000000
--- a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AutoresearchRuntimeStats } from "./AutoresearchRuntimeStats";
-
-const STARTED_AT = Date.parse("2026-07-10T14:00:00Z");
-const run: AutoresearchRun = {
-  id: "run-runtime",
-  config: {
-    taskId: "task-1",
-    direction: "minimize",
-    targetValue: null,
-    maxIterations: 10,
-    implementModel: null,
-    measureModel: null,
-    implementEffort: null,
-    measureEffort: null,
-    instructions: "Reduce dashboard loading time.",
-  },
-  status: "completed",
-  metricName: null,
-  metricUnit: null,
-  phase: null,
-  originalModel: null,
-  originalEffort: null,
-  researchFindings: [],
-  iterations: [],
-  startedAt: STARTED_AT,
-  endedAt: STARTED_AT + 26 * 60_000 + 17_000,
-  endReason: "max-iterations",
-  interruptedReason: null,
-  lastError: null,
-};
-
-const meta: Meta<typeof AutoresearchRuntimeStats> = {
-  title: "Autoresearch/Runtime Stats",
-  component: AutoresearchRuntimeStats,
-};
-
-export default meta;
-type Story = StoryObj<typeof AutoresearchRuntimeStats>;
-
-export const WithContextUsage: Story = {
-  args: {
-    run,
-    usage: {
-      used: 175_000,
-      size: 1_000_000,
-      percentage: 18,
-      cost: null,
-      breakdown: null,
-    },
-  },
-};
-
-export const BeforeUsageUpdate: Story = { args: { run, usage: null } };
diff --git a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.test.tsx b/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.test.tsx
index 6e21a313fa..71209cc028 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.test.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.test.tsx
@@ -61,8 +61,13 @@ describe("AutoresearchRuntimeStats", () => {
     });
 
     expect(screen.getByText("1m 05s")).toBeVisible();
+    expect(screen.getByText("This run's active time")).toBeVisible();
+    expect(screen.getByText("This run only · excludes pauses")).toBeVisible();
     expect(screen.getByText("43K / 200K")).toBeVisible();
     expect(screen.getByText("21% of current window")).toBeVisible();
+    expect(
+      screen.getByRole("region", { name: "Autoresearch runtime metrics" }),
+    ).toHaveClass("@min-[520px]:grid-cols-2", "grid-cols-1");
   });
 
   it("uses the end time and explains unavailable usage", () => {
@@ -70,6 +75,35 @@ describe("AutoresearchRuntimeStats", () => {
 
     expect(screen.getByText("30s")).toBeVisible();
     expect(screen.getByText("Waiting")).toBeVisible();
-    expect(screen.getByText("Total run time")).toBeVisible();
+    expect(screen.getByText("This run's active time")).toBeVisible();
+    expect(screen.getByText("Final duration for this run")).toBeVisible();
+  });
+
+  it("freezes the timer while paused", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(66_000);
+    renderStats(
+      makeRun({
+        status: "paused",
+        pausedAt: 31_000,
+      }),
+      null,
+    );
+
+    expect(screen.getByText("30s")).toBeVisible();
+    expect(screen.getByText("Paused · this run only")).toBeVisible();
+
+    vi.advanceTimersByTime(60_000);
+    expect(screen.getByText("30s")).toBeVisible();
+  });
+
+  it("freezes legacy paused runs without a pause timestamp", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(66_000);
+    renderStats(makeRun({ status: "paused" }), null);
+
+    expect(screen.getByText("1m 05s")).toBeVisible();
+    vi.advanceTimersByTime(60_000);
+    expect(screen.getByText("1m 05s")).toBeVisible();
   });
 });
diff --git a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.tsx b/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.tsx
index 1e2d040373..5417e32b91 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchRuntimeStats.tsx
@@ -1,5 +1,6 @@
 import { Clock, Gauge } from "@phosphor-icons/react";
 import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
+import { getAutoresearchElapsedMs } from "@posthog/core/autoresearch/stats";
 import type { ContextUsage } from "@posthog/core/sessions/contextUsage";
 import { Text } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
@@ -26,16 +27,14 @@ export function AutoresearchRuntimeStats({
     : "No usage update yet";
   return (
     <section
-      className="grid grid-cols-1 gap-2 sm:grid-cols-2"
+      className="grid @min-[520px]:grid-cols-2 grid-cols-1 gap-2"
       aria-label="Autoresearch runtime metrics"
     >
       <RuntimeMetric
         icon={<Clock size={15} />}
-        label="Elapsed"
+        label="This run's active time"
         value={formatDuration(elapsed, 0)}
-        detail={
-          run.endedAt === null ? "Since this run started" : "Total run time"
-        }
+        detail={runtimeDetail(run)}
       />
       <RuntimeMetric
         icon={<Gauge size={15} />}
@@ -76,7 +75,7 @@ function RuntimeMetric({
 
 function useRunElapsed(run: AutoresearchRun): number {
   const [now, setNow] = useState(() => Date.now());
-  const live = run.endedAt === null;
+  const live = run.endedAt === null && run.status === "running";
 
   useEffect(() => {
     if (!live) return;
@@ -84,5 +83,12 @@ function useRunElapsed(run: AutoresearchRun): number {
     return () => window.clearInterval(interval);
   }, [live]);
 
-  return Math.max(0, (run.endedAt ?? now) - run.startedAt);
+  return getAutoresearchElapsedMs(run, now);
+}
+
+function runtimeDetail(run: AutoresearchRun): string {
+  if (run.status === "paused") return "Paused · this run only";
+  if (run.status === "interrupted") return "Reconnecting · active time paused";
+  if (run.endedAt !== null) return "Final duration for this run";
+  return "This run only · excludes pauses";
 }
diff --git a/packages/ui/src/features/autoresearch/IterationsTable.test.tsx b/packages/ui/src/features/autoresearch/IterationsTable.test.tsx
new file mode 100644
index 0000000000..2a29b2ce25
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/IterationsTable.test.tsx
@@ -0,0 +1,46 @@
+import type { AutoresearchIteration } from "@posthog/core/autoresearch/schemas";
+import { Theme } from "@radix-ui/themes";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { IterationsTable } from "./IterationsTable";
+
+const iteration: AutoresearchIteration = {
+  index: 1,
+  value: 90,
+  bestValue: 90,
+  delta: null,
+  summary:
+    "Reworked serialization to avoid repeatedly copying the full payload during every measurement pass.",
+  hypothesis: null,
+  plan: null,
+  approach: "serialization",
+  at: 1,
+};
+
+describe("IterationsTable", () => {
+  it("expands long change summaries", async () => {
+    const user = userEvent.setup();
+    const summary = iteration.summary ?? "";
+    render(
+      <Theme>
+        <IterationsTable
+          iterations={[iteration]}
+          direction="minimize"
+          unit="MB"
+        />
+      </Theme>,
+    );
+
+    const trigger = screen.getByLabelText("Expand change details");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByText(summary, { selector: "div" }),
+    ).not.toBeInTheDocument();
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText(summary, { selector: "div" })).toBeVisible();
+  });
+});
diff --git a/packages/ui/src/features/autoresearch/IterationsTable.tsx b/packages/ui/src/features/autoresearch/IterationsTable.tsx
index 9193fd5973..1fb231ce8d 100644
--- a/packages/ui/src/features/autoresearch/IterationsTable.tsx
+++ b/packages/ui/src/features/autoresearch/IterationsTable.tsx
@@ -3,6 +3,11 @@ import type {
   AutoresearchIteration,
 } from "@posthog/core/autoresearch/schemas";
 import { computeBest } from "@posthog/core/autoresearch/stats";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@posthog/quill";
 import { Badge, Table, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import {
@@ -93,13 +98,7 @@ export function IterationsTable({
                     {iteration.approach}
                   </Badge>
                 )}
-                <Text
-                  size="1"
-                  className="block truncate"
-                  title={iteration.summary ?? undefined}
-                >
-                  {iteration.summary ?? "None"}
-                </Text>
+                <ChangeSummary summary={iteration.summary} />
               </div>
             </Table.Cell>
             <Table.Cell>
@@ -113,3 +112,20 @@ export function IterationsTable({
     </Table.Root>
   );
 }
+
+function ChangeSummary({ summary }: { summary: string | null }) {
+  if (!summary) return <Text size="1">None</Text>;
+  return (
+    <Collapsible className="min-w-0 flex-1 bg-transparent hover:bg-transparent data-open:bg-transparent">
+      <CollapsibleTrigger
+        aria-label="Expand change details"
+        className="min-h-0 w-full min-w-0 bg-transparent px-0 py-0 text-left hover:bg-transparent aria-expanded:bg-transparent"
+      >
+        <span className="min-w-0 flex-1 truncate text-xs">{summary}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pt-1 pr-5 text-gray-11 text-xs leading-4">
+        {summary}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/packages/ui/src/features/autoresearch/PreBaselineState.stories.tsx b/packages/ui/src/features/autoresearch/PreBaselineState.stories.tsx
deleted file mode 100644
index 337e3be50d..0000000000
--- a/packages/ui/src/features/autoresearch/PreBaselineState.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { PreBaselineState } from "./PreBaselineState";
-
-const run: AutoresearchRun = {
-  id: "run-research",
-  config: {
-    taskId: "task-1",
-    direction: "minimize",
-    targetValue: null,
-    maxIterations: 10,
-    implementModel: null,
-    measureModel: null,
-    implementEffort: null,
-    measureEffort: null,
-    instructions: "Reduce dashboard loading time.",
-  },
-  status: "running",
-  metricName: null,
-  metricUnit: null,
-  phase: null,
-  originalModel: null,
-  originalEffort: null,
-  researchFindings: [
-    {
-      index: 1,
-      area: "build",
-      summary: "Located the production bundle measurement",
-      finding:
-        "The dashboard marginal bundle can be isolated from esbuild metadata.",
-      nextStep: "Establish the baseline bundle size",
-      at: 1,
-    },
-    {
-      index: 2,
-      area: "frontend",
-      summary: "Mapped eager dashboard imports",
-      finding: "Dashboard modals load before users open them.",
-      nextStep: "Inspect modal boundaries",
-      at: 2,
-    },
-  ],
-  iterations: [],
-  startedAt: Date.parse("2026-07-10T14:00:00Z"),
-  endedAt: null,
-  endReason: null,
-  interruptedReason: null,
-  lastError: null,
-};
-
-const meta: Meta<typeof PreBaselineState> = {
-  title: "Autoresearch/Research Map",
-  component: PreBaselineState,
-};
-
-export default meta;
-type Story = StoryObj<typeof PreBaselineState>;
-
-export const FindingsByCodeArea: Story = {
-  args: {
-    run,
-    sessionActivity: {
-      status: "connected",
-      isPromptPending: true,
-      isCompacting: false,
-    },
-  },
-};
-
-export const EstablishingBaseline: Story = {
-  args: {
-    run: { ...run, researchFindings: [] },
-    sessionActivity: {
-      status: "connected",
-      isPromptPending: true,
-      isCompacting: false,
-    },
-  },
-};
diff --git a/packages/ui/src/features/autoresearch/PreBaselineState.tsx b/packages/ui/src/features/autoresearch/PreBaselineState.tsx
index 0b4782a5a4..3183710c8e 100644
--- a/packages/ui/src/features/autoresearch/PreBaselineState.tsx
+++ b/packages/ui/src/features/autoresearch/PreBaselineState.tsx
@@ -1,6 +1,7 @@
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import type { AutoresearchRun } from "@posthog/core/autoresearch/schemas";
-import { Badge, Skeleton, Spinner, Text } from "@radix-ui/themes";
+import { Spinner } from "@posthog/quill";
+import { Badge, Skeleton, Text } from "@radix-ui/themes";
 
 export interface SessionActivity {
   status: "connecting" | "connected" | "disconnected" | "error";
@@ -21,7 +22,11 @@ export function PreBaselineState({
   return (
     <div className="flex flex-col gap-4" aria-live="polite">
       <div className="flex items-start gap-3 rounded-md border border-blue-6 bg-blue-2 px-3 py-3">
-        {live && <Spinner size="2" className="mt-0.5 shrink-0" />}
+        {live && (
+          <span className="relative mt-0.5 size-5 shrink-0">
+            <Spinner className="size-5 motion-safe:animate-spin motion-reduce:animate-none" />
+          </span>
+        )}
         <div>
           <Text as="div" size="2" weight="medium">
             {activity.title}
@@ -32,8 +37,13 @@ export function PreBaselineState({
         </div>
       </div>
 
+      <BaselineStatCards
+        maxIterations={run.config.maxIterations}
+        loading={live}
+      />
+
       {live ? (
-        <BaselineDashboardSkeleton maxIterations={run.config.maxIterations} />
+        <BaselineDashboardSkeleton />
       ) : (
         <div className="rounded-md border border-gray-5 bg-gray-2 px-3 py-4 text-center">
           <Text size="1" color="gray">
@@ -166,38 +176,12 @@ function ResearchFindings({ run }: { run: AutoresearchRun }) {
   );
 }
 
-function BaselineDashboardSkeleton({
-  maxIterations,
-}: {
-  maxIterations: number;
-}) {
+function BaselineDashboardSkeleton() {
   return (
     <output
       className="flex flex-col gap-4"
       aria-label="Loading autoresearch metrics"
     >
-      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-        {[
-          ["Best", "w-16"],
-          ["Last", "w-16"],
-          ["Iterations", "w-12"],
-          ["Target", "w-14"],
-        ].map(([title, width]) => (
-          <div key={title} className="rounded-md border border-gray-5 p-3">
-            <Text as="div" size="1" color="gray">
-              {title}
-            </Text>
-            {title === "Iterations" ? (
-              <Text as="div" size="4" weight="medium" className="mt-1">
-                0 / {maxIterations}
-              </Text>
-            ) : (
-              <Skeleton className={`mt-2 h-6 ${width}`} />
-            )}
-          </div>
-        ))}
-      </div>
-
       <div className="flex h-[220px] flex-col justify-between rounded-md border border-gray-5 bg-gray-2 p-3">
         <div className="flex flex-col gap-3">
           <Skeleton className="h-3 w-full" />
@@ -222,3 +206,63 @@ function BaselineDashboardSkeleton({
     </output>
   );
 }
+
+function BaselineStatCards({
+  maxIterations,
+  loading,
+}: {
+  maxIterations: number;
+  loading: boolean;
+}) {
+  return (
+    <section
+      aria-label="Autoresearch metric summary"
+      className="grid @min-[360px]:grid-cols-2 @min-[700px]:grid-cols-4 grid-cols-1 gap-2"
+    >
+      {[
+        ["Best", "w-16"],
+        ["Last", "w-16"],
+        ["Iterations", "w-12"],
+        ["Target", "w-14"],
+      ].map(([title, width]) => (
+        <div key={title} className="rounded-md border border-gray-5 p-3">
+          <Text as="div" size="1" color="gray">
+            {title}
+          </Text>
+          <BaselineStatValue
+            title={title}
+            width={width}
+            maxIterations={maxIterations}
+            loading={loading}
+          />
+        </div>
+      ))}
+    </section>
+  );
+}
+
+function BaselineStatValue({
+  title,
+  width,
+  maxIterations,
+  loading,
+}: {
+  title: string;
+  width: string;
+  maxIterations: number;
+  loading: boolean;
+}) {
+  if (title === "Iterations") {
+    return (
+      <Text as="div" size="4" weight="medium" className="mt-1">
+        0 / {maxIterations}
+      </Text>
+    );
+  }
+  if (loading) return <Skeleton className={`mt-2 h-6 ${width}`} />;
+  return (
+    <Text as="div" size="4" color="gray" className="mt-1">
+      —
+    </Text>
+  );
+}
diff --git a/packages/ui/src/features/autoresearch/autoresearchActivity.test.ts b/packages/ui/src/features/autoresearch/autoresearchActivity.test.ts
index 5aa03940dc..6790ecd29f 100644
--- a/packages/ui/src/features/autoresearch/autoresearchActivity.test.ts
+++ b/packages/ui/src/features/autoresearch/autoresearchActivity.test.ts
@@ -26,8 +26,14 @@ describe("analyzeAutoresearchActivity", () => {
       }),
       updateEvent(3_000, {
         sessionUpdate: "tool_call",
+        toolCallId: "search-1",
         title: "Search for selectors",
         kind: "search",
+        status: "in_progress",
+      }),
+      updateEvent(4_000, {
+        sessionUpdate: "tool_call_update",
+        toolCallId: "search-1",
         status: "completed",
       }),
       updateEvent(5_000, {
@@ -58,16 +64,275 @@ describe("analyzeAutoresearchActivity", () => {
     ]);
     expect(result.items[0]).toMatchObject({
       label: "Run benchmark",
+      running: true,
       active: true,
     });
+    expect(result.items[2]).toMatchObject({
+      label: "Search for selectors",
+      active: false,
+      updatedAt: 4_000,
+    });
     expect(result.timeByKind).toEqual({
       reasoning: 2_000,
       research: 2_000,
       implementation: 3_000,
       measurement: 3_000,
+      execution: 0,
+    });
+  });
+
+  it("reconciles tool updates and clears active state for completed calls", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "tool-1",
+        title: "Inspect dashboard",
+        kind: "read",
+        status: "in_progress",
+      }),
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call_update",
+        toolCallId: "tool-1",
+        status: "completed",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 5_000);
+
+    expect(result.items).toEqual([
+      expect.objectContaining({
+        id: "tool-1",
+        label: "Inspect dashboard",
+        running: false,
+        active: false,
+        at: 2_000,
+        updatedAt: 3_000,
+      }),
+    ]);
+  });
+
+  it("preserves running state when a partial tool update omits status", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "tool-1",
+        title: "Execute command",
+        kind: "execute",
+        status: "in_progress",
+      }),
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call_update",
+        toolCallId: "tool-1",
+        rawInput: { command: "pnpm test" },
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 5_000);
+
+    expect(result.items).toEqual([
+      expect.objectContaining({
+        label: "pnpm test",
+        kind: "measurement",
+        running: true,
+        active: true,
+      }),
+    ]);
+  });
+
+  it("uses raw command input instead of a generic execute title", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "tool-1",
+        title: "Execute command",
+        kind: "execute",
+        rawInput: { command: "apply_patch <<'PATCH'" },
+        status: "completed",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 3_000);
+
+    expect(result.items[0]).toMatchObject({
+      label: "apply_patch <<'PATCH'",
+      kind: "implementation",
+      command: true,
+    });
+  });
+
+  it("classifies shell commands by their observable intent", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        title: "/bin/zsh -lc 'pnpm bench:memory'",
+        kind: "execute",
+        status: "completed",
+      }),
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call",
+        title: "/bin/zsh -lc 'apply_patch <<PATCH'",
+        kind: "execute",
+        status: "completed",
+      }),
+      updateEvent(4_000, {
+        sessionUpdate: "tool_call",
+        title: "/bin/zsh -lc 'git status --short'",
+        kind: "execute",
+        status: "completed",
+      }),
+      updateEvent(5_000, {
+        sessionUpdate: "tool_call",
+        title: "/bin/zsh -lc 'pnpm dev:code'",
+        kind: "execute",
+        status: "in_progress",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 6_000);
+    const kindsByLabel = Object.fromEntries(
+      result.items.map((item) => [item.label, item.kind]),
+    );
+
+    expect(kindsByLabel).toEqual({
+      "/bin/zsh -lc 'pnpm dev:code'": "execution",
+      "/bin/zsh -lc 'git status --short'": "research",
+      "/bin/zsh -lc 'apply_patch <<PATCH'": "implementation",
+      "/bin/zsh -lc 'pnpm bench:memory'": "measurement",
+    });
+  });
+
+  it("sorts strictly newest-first while marking the newest live command current", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "server",
+        title: "Start dev server",
+        kind: "execute",
+        status: "in_progress",
+      }),
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "benchmark",
+        title: "Run benchmark",
+        kind: "execute",
+        status: "in_progress",
+      }),
+      updateEvent(4_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "status",
+        title: "Check status",
+        kind: "execute",
+        status: "completed",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 5_000);
+
+    expect(result.items).toEqual([
+      expect.objectContaining({
+        label: "Check status",
+        running: false,
+        active: false,
+      }),
+      expect.objectContaining({
+        label: "Run benchmark",
+        running: true,
+        active: true,
+      }),
+      expect.objectContaining({
+        label: "Start dev server",
+        running: true,
+        active: false,
+      }),
+    ]);
+  });
+
+  it("shows no running items when the run is not live", () => {
+    const events = [
+      updateEvent(2_000, {
+        sessionUpdate: "tool_call",
+        toolCallId: "benchmark",
+        title: "Run benchmark",
+        kind: "execute",
+        status: "in_progress",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 5_000, {
+      live: false,
+    });
+
+    expect(result.items[0]).toMatchObject({ running: false, active: false });
+  });
+
+  it("excludes completed pause intervals from observed time", () => {
+    const events = [
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call",
+        title: "Search code",
+        kind: "search",
+        status: "completed",
+      }),
+      updateEvent(9_000, {
+        sessionUpdate: "tool_call",
+        title: "Run benchmark",
+        kind: "execute",
+        status: "completed",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 12_000, {
+      pauseIntervals: [{ startedAt: 4_000, endedAt: 8_000 }],
+      pausedDurationMs: 4_000,
+    });
+
+    expect(result.timeByKind).toEqual({
+      reasoning: 2_000,
+      research: 2_000,
+      implementation: 0,
+      measurement: 3_000,
+      execution: 0,
     });
   });
 
+  it("caps observed time for legacy runs with untracked paused duration", () => {
+    const events = [
+      updateEvent(3_000, {
+        sessionUpdate: "tool_call",
+        title: "Search code",
+        kind: "search",
+        status: "completed",
+      }),
+    ];
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 11_000, {
+      pausedDurationMs: 6_000,
+    });
+    const totalObservedMs = Object.values(result.timeByKind).reduce(
+      (total, duration) => total + duration,
+      0,
+    );
+
+    expect(totalObservedMs).toBe(4_000);
+  });
+
+  it("shows up to twelve recent timeline items", () => {
+    const events = Array.from({ length: 14 }, (_, index) =>
+      updateEvent(index + 2_000, {
+        sessionUpdate: "tool_call",
+        title: `Command ${index + 1}`,
+        kind: "execute",
+        status: "completed",
+      }),
+    );
+
+    const result = analyzeAutoresearchActivity(events, 1_000, null, 20_000);
+
+    expect(result.items).toHaveLength(12);
+    expect(result.items[0]?.label).toBe("Command 14");
+    expect(result.items[11]?.label).toBe("Command 3");
+  });
+
   it("excludes activity after a historical run ended", () => {
     const events = [
       updateEvent(2_000, {
@@ -94,6 +359,7 @@ describe("analyzeAutoresearchActivity", () => {
       research: 0,
       implementation: 0,
       measurement: 2_000,
+      execution: 0,
     });
   });
 });
diff --git a/packages/ui/src/features/autoresearch/autoresearchActivity.ts b/packages/ui/src/features/autoresearch/autoresearchActivity.ts
index 4699e7d3b3..a7d1094f1e 100644
--- a/packages/ui/src/features/autoresearch/autoresearchActivity.ts
+++ b/packages/ui/src/features/autoresearch/autoresearchActivity.ts
@@ -5,6 +5,7 @@ export type AutoresearchActivityKind =
   | "research"
   | "implementation"
   | "measurement"
+  | "execution"
   | "reasoning";
 
 export interface AutoresearchActivityItem {
@@ -12,6 +13,9 @@ export interface AutoresearchActivityItem {
   kind: AutoresearchActivityKind;
   label: string;
   at: number;
+  updatedAt: number;
+  command: boolean;
+  running: boolean;
   active: boolean;
 }
 
@@ -21,17 +25,25 @@ export interface AutoresearchActivitySnapshot {
   timeByKind: Record<AutoresearchActivityKind, number>;
 }
 
+export interface AutoresearchActivityOptions {
+  live?: boolean;
+  pauseIntervals?: Array<{ startedAt: number; endedAt: number }>;
+  pausedDurationMs?: number;
+}
+
 export function analyzeAutoresearchActivity(
   events: AcpMessage[],
   startedAt: number,
   endedAt: number | null,
   now: number,
+  options: AutoresearchActivityOptions = {},
 ): AutoresearchActivitySnapshot {
+  const live = options.live ?? endedAt === null;
   const relevant = events.filter(
     (event) =>
       event.ts >= startedAt && (endedAt === null || event.ts <= endedAt),
   );
-  const items: AutoresearchActivityItem[] = [];
+  const items = new Map<string, AutoresearchActivityItem>();
   const agentText: string[] = [];
 
   for (const event of relevant) {
@@ -41,9 +53,11 @@ export function analyzeAutoresearchActivity(
       | {
           update?: {
             sessionUpdate?: string;
+            toolCallId?: string;
             title?: string;
             kind?: string | null;
             status?: string | null;
+            rawInput?: Record<string, unknown>;
             content?: { type?: string; text?: string };
           };
         }
@@ -60,56 +74,166 @@ export function analyzeAutoresearchActivity(
       continue;
     }
 
-    if (update.sessionUpdate !== "tool_call") continue;
-    const kind = activityKindForTool(update.kind);
-    items.push({
-      id: `${event.ts}:${update.title ?? "tool"}`,
+    if (
+      update.sessionUpdate !== "tool_call" &&
+      update.sessionUpdate !== "tool_call_update"
+    ) {
+      continue;
+    }
+
+    const id = update.toolCallId ?? `${event.ts}:${update.title ?? "tool"}`;
+    const existing = items.get(id);
+    const rawCommand = update.rawInput?.command;
+    const command = typeof rawCommand === "string" ? rawCommand : undefined;
+    const toolKind = update.kind ?? (existing?.command ? "execute" : undefined);
+    const label = command || update.title || existing?.label;
+    const kind = toolKind
+      ? activityKindForTool(toolKind, label)
+      : existing?.kind;
+    if (!kind) continue;
+    let running = existing?.running ?? false;
+    if (update.status !== undefined && update.status !== null) {
+      running = update.status === "in_progress" || update.status === "pending";
+    }
+    items.set(id, {
+      id,
       kind,
-      label: update.title || activityLabel(kind),
-      at: event.ts,
-      active: update.status === "in_progress" || update.status === "pending",
+      label: label || activityLabel(kind),
+      at: existing?.at ?? event.ts,
+      updatedAt: event.ts,
+      command: toolKind === "execute",
+      running: live && running,
+      active: false,
     });
   }
 
   const currentPlan = parsePlanReport(agentText.join(""));
   const end = endedAt ?? now;
-  const boundaries = items.map((item) => ({ at: item.at, kind: item.kind }));
+  const timeline = Array.from(items.values()).sort((a, b) => a.at - b.at);
+  const currentItemId = timeline.findLast((item) => item.running)?.id;
+  const displayItems = [...timeline]
+    .sort((left, right) => right.at - left.at)
+    .slice(0, 12)
+    .map((item) => ({ ...item, active: item.id === currentItemId }));
+  const boundaries = timeline.map((item) => ({ at: item.at, kind: item.kind }));
+  const pauseIntervals = normalizePauseIntervals(
+    options.pauseIntervals ?? [],
+    startedAt,
+    end,
+  );
+  const trackedPausedDurationMs = pauseIntervals.reduce(
+    (total, interval) => total + interval.endedAt - interval.startedAt,
+    0,
+  );
+  const pausedDurationMs = Math.max(
+    trackedPausedDurationMs,
+    options.pausedDurationMs ?? 0,
+  );
+  let remainingActiveMs = Math.max(0, end - startedAt - pausedDurationMs);
   const timeByKind: Record<AutoresearchActivityKind, number> = {
     research: 0,
     implementation: 0,
     measurement: 0,
+    execution: 0,
     reasoning: 0,
   };
   let cursor = startedAt;
   let kind: AutoresearchActivityKind = "reasoning";
   for (const boundary of boundaries) {
-    timeByKind[kind] += Math.max(0, boundary.at - cursor);
+    const duration = activeDurationBetween(cursor, boundary.at, pauseIntervals);
+    const observedDuration = Math.min(duration, remainingActiveMs);
+    timeByKind[kind] += observedDuration;
+    remainingActiveMs -= observedDuration;
     cursor = boundary.at;
     kind = boundary.kind;
   }
-  timeByKind[kind] += Math.max(0, end - cursor);
+  const duration = activeDurationBetween(cursor, end, pauseIntervals);
+  timeByKind[kind] += Math.min(duration, remainingActiveMs);
 
   return {
     currentPlan,
-    items: items.slice(-8).reverse(),
+    items: displayItems,
     timeByKind,
   };
 }
 
-function activityKindForTool(kind?: string | null): AutoresearchActivityKind {
+function normalizePauseIntervals(
+  intervals: Array<{ startedAt: number; endedAt: number }>,
+  startedAt: number,
+  endedAt: number,
+): Array<{ startedAt: number; endedAt: number }> {
+  const sorted = intervals
+    .map((interval) => ({
+      startedAt: Math.max(startedAt, interval.startedAt),
+      endedAt: Math.min(endedAt, interval.endedAt),
+    }))
+    .filter((interval) => interval.endedAt > interval.startedAt)
+    .sort((left, right) => left.startedAt - right.startedAt);
+  const merged: Array<{ startedAt: number; endedAt: number }> = [];
+  for (const interval of sorted) {
+    const previous = merged.at(-1);
+    if (!previous || interval.startedAt > previous.endedAt) {
+      merged.push(interval);
+      continue;
+    }
+    previous.endedAt = Math.max(previous.endedAt, interval.endedAt);
+  }
+  return merged;
+}
+
+function activeDurationBetween(
+  startedAt: number,
+  endedAt: number,
+  pauseIntervals: Array<{ startedAt: number; endedAt: number }>,
+): number {
+  const duration = Math.max(0, endedAt - startedAt);
+  const pausedDuration = pauseIntervals.reduce((total, interval) => {
+    const overlapStart = Math.max(startedAt, interval.startedAt);
+    const overlapEnd = Math.min(endedAt, interval.endedAt);
+    return total + Math.max(0, overlapEnd - overlapStart);
+  }, 0);
+  return Math.max(0, duration - pausedDuration);
+}
+
+function activityKindForTool(
+  kind?: string | null,
+  label?: string,
+): AutoresearchActivityKind {
   if (kind === "edit" || kind === "delete" || kind === "move") {
     return "implementation";
   }
-  if (kind === "execute") return "measurement";
+  if (kind === "execute") return activityKindForCommand(label);
   if (kind === "read" || kind === "search" || kind === "fetch") {
     return "research";
   }
   return "reasoning";
 }
 
+function activityKindForCommand(label?: string): AutoresearchActivityKind {
+  const command = label?.toLowerCase() ?? "";
+  if (/\b(apply_patch|edit|write|delete|rename)\b/.test(command)) {
+    return "implementation";
+  }
+  if (
+    /\b(bench(?:mark)?|test|vitest|jest|pytest|typecheck|type-check|tsc|lint|biome|build)\b/.test(
+      command,
+    )
+  ) {
+    return "measurement";
+  }
+  if (
+    /\b(search|inspect|read|status|diff|log|show)\b/.test(command) ||
+    /\b(rg|grep|cat|head|tail|find|ls|sed\s+-n)\b/.test(command)
+  ) {
+    return "research";
+  }
+  return "execution";
+}
+
 function activityLabel(kind: AutoresearchActivityKind): string {
   if (kind === "implementation") return "Editing code";
   if (kind === "measurement") return "Running a command";
+  if (kind === "execution") return "Running a command";
   if (kind === "research") return "Inspecting the codebase";
   return "Working";
 }