@dxos/react-ui-trace 0.11.1 → 0.14.0

package/src/execution-graph/execution-graph.ts

@@ -9,15 +9,14 @@ import * as Pipeable from 'effect/Pipeable';
 import * as Schema from 'effect/Schema';
 import * as Struct from 'effect/Struct';
 
-import { RUN_AGAIN_ERROR_CODE, RUN_AGAIN_MESSAGE } from '@dxos/compute';
 import * as Process from '@dxos/compute/Process';
 import * as Trace from '@dxos/compute/Trace';
 import { Annotation } from '@dxos/echo';
 import { EID } from '@dxos/keys';
 import { LogLevel, log } from '@dxos/log';
-import { type Commit } from '../components/Timeline/index.ts';
 import { type ContentBlock } from '@dxos/types';
 
+import { type Commit } from '../components/Timeline/index.ts';
 import { ROOT_SPAN_ID, type Span, buildSpanTree, isSpanBeginEvent, isSpanEndEvent, walkSpanTree } from './span-tree.ts';
 
 /**
@@ -93,7 +92,7 @@ const ICONS = {
 
 export interface BuildExecutionGraphParams {
   traceMessages: readonly Trace.Message[];
-  activeProcesses?: readonly Process.Info[];
+  activeProcesses?: readonly Process.Process[];
   collapseCompletedSpans?: boolean;
   eventLimit?: number;
   /**
@@ -336,8 +335,8 @@ const presentEvent = (event: Trace.FlatEvent, toolCallContext: ToolCallContext):
     // the legacy message for events persisted before `errorCode` existed.
     const incomplete =
       event.data.outcome === 'failure' &&
-      (event.data.errorCode === RUN_AGAIN_ERROR_CODE ||
-        (event.data.errorCode === undefined && event.data.error === RUN_AGAIN_MESSAGE));
+      (event.data.errorCode === Process.RUN_AGAIN_ERROR_CODE ||
+        (event.data.errorCode === undefined && event.data.error === Process.RUN_AGAIN_MESSAGE));
     const presentation =
       event.data.outcome === 'success'
         ? { icon: ICONS.operationEndSuccess.icon, level: ICONS.operationEndSuccess.level, suffix: '' }
@@ -478,16 +477,28 @@ export const deriveInFlightActivityLine = (
 };
 
 const collectDescendantPids = (messages: readonly Trace.Message[], rootPid: string): Set<string> => {
+  // Indexed first so the walk costs one pass over the messages rather than one per tree level.
+  const childPidsByParent = new Map<string, Set<string>>();
+  for (const message of messages) {
+    const { pid, parentPid } = message.meta;
+    if (!pid || !parentPid) {
+      continue;
+    }
+    let children = childPidsByParent.get(parentPid);
+    if (!children) {
+      children = new Set();
+      childPidsByParent.set(parentPid, children);
+    }
+    children.add(pid);
+  }
+
   const pids = new Set([rootPid]);
-  let expanded = true;
-  while (expanded) {
-    expanded = false;
-    for (const message of messages) {
-      const pid = message.meta.pid;
-      const parentPid = message.meta.parentPid;
-      if (pid && parentPid && pids.has(parentPid) && !pids.has(pid)) {
-        pids.add(pid);
-        expanded = true;
+  const pending = [rootPid];
+  while (pending.length > 0) {
+    for (const childPid of childPidsByParent.get(pending.pop()!) ?? []) {
+      if (!pids.has(childPid)) {
+        pids.add(childPid);
+        pending.push(childPid);
       }
     }
   }
@@ -567,9 +578,13 @@ const isCollapsibleSpan = (span: Span, parent: Span | null, collapseCompletedSpa
  * subtrees (depth-first), then its remaining events. Active-process running rows are inserted
  * at the end of each matching span block — not appended after the entire tree.
  */
+/** Branch tips as a commit's parent list; a branch with no commit yet contributes nothing. */
+const parentIds = (...tips: (Commit | undefined)[]): string[] =>
+  Array.dedupe(tips.filter((tip) => tip !== undefined).map((tip) => tip.id));
+
 const spanTreeToCommits = (
   root: Span,
-  activeProcesses: readonly Process.Info[],
+  activeProcesses: readonly Process.Process[],
   toolCallContext: ToolCallContext,
   collapseCompletedSpans: boolean,
 ): { branches: string[]; commits: Commit[]; details: ExecutionGraphDetailsMap } => {
@@ -621,7 +636,7 @@ const spanTreeToCommits = (
   // Track the id of the begin commit for each non-collapsible span so the end commit can merge into it.
   const beginCommitIdBySpan = new Map<string, string>();
 
-  // Selector that returns "the most recent commit in this span's structural context".
+  // The parents for "the most recent commit in this span's structural context".
   //
   // The walk is structural (pid/parentPid), not topological: at each ancestor, we prefer
   //   1) the last commit on that span's own branch, then
@@ -633,17 +648,19 @@ const spanTreeToCommits = (
   // to A.begin — not to whatever unrelated commit happens to be the latest on main.
   // This keeps fork edges visually attached to the correct span even when sibling top-level
   // spans (different pids) overlap in time on main.
-  const lastInSpanContext = (span: Span | null): CommitSelector => {
+  const lastInSpanContext = (span: Span | null): string[] => {
     if (!span || span.id === ROOT_SPAN_ID) {
-      return CommitSelector.branch(MAIN_BRANCH).pipe(CommitSelector.compose(CommitSelector.last()));
+      return parentIds(builder.tipOf(MAIN_BRANCH));
+    }
+    const ownTip = builder.tipOf(branchOf(span));
+    if (ownTip) {
+      return parentIds(ownTip);
     }
-    const ownBranch = branchOf(span);
     const beginId = beginCommitIdBySpan.get(span.id);
-    return CommitSelector.firstOf(
-      CommitSelector.branch(ownBranch).pipe(CommitSelector.compose(CommitSelector.last())),
-      beginId ? CommitSelector.id(beginId) : CommitSelector.filter(() => false),
-      lastInSpanContext(findParentSpan(span)),
-    );
+    if (beginId && builder.hasCommit(beginId)) {
+      return [beginId];
+    }
+    return lastInSpanContext(findParentSpan(span));
   };
 
   const lastCommitIdBySpan = new Map<string, string>();
@@ -671,12 +688,7 @@ const spanTreeToCommits = (
         branch: process.pid,
         // Falls back to the tail of main: a completed request collapses onto main, leaving the
         // agent's own branch empty, and a parentless spinner draws as a second, disconnected root.
-        parents: builder.computeParents(
-          CommitSelector.firstOf(
-            CommitSelector.branch(process.pid).pipe(CommitSelector.compose(CommitSelector.last())),
-            CommitSelector.branch(MAIN_BRANCH).pipe(CommitSelector.compose(CommitSelector.last())),
-          ),
-        ),
+        parents: parentIds(builder.firstTipOf(process.pid, MAIN_BRANCH)),
         icon: ICONS.agentRequestRunning.icon,
         level: ICONS.agentRequestRunning.level,
         message: 'Generating...',
@@ -688,9 +700,7 @@ const spanTreeToCommits = (
       builder.addCommit({
         id: `running:${process.pid}`,
         branch: process.pid,
-        parents: builder.computeParents(
-          CommitSelector.branch(process.pid).pipe(CommitSelector.compose(CommitSelector.last())),
-        ),
+        parents: parentIds(builder.tipOf(process.pid)),
         icon: ICONS.processRunning.icon,
         level: ICONS.processRunning.level,
         message: 'Running...',
@@ -746,19 +756,19 @@ const spanTreeToCommits = (
     if (span.id === ROOT_SPAN_ID) {
       // Root-level events (no pid) attach sequentially to main.
       branch = MAIN_BRANCH;
-      parents = builder.computeParents(lastInSpanContext(null));
+      parents = lastInSpanContext(null);
     } else if (collapsible) {
       // Only the end event reaches here for collapsible spans.
       // Anchor to the parent span's structural context so the fork attaches to the parent
       // — not to a sibling span's commit that happens to be the latest on the shared ancestor.
       branch = parentBranch;
-      parents = builder.computeParents(lastInSpanContext(parentSpan));
+      parents = lastInSpanContext(parentSpan);
     } else if (isBeginEvent) {
       // Begin commit, anchored to the parent's structural context. A nested sub-span stays on the
       // parent lane (only its middle events fork). A concurrent child process forks onto its own
       // branch from this first event so it gets its own lane immediately.
       branch = isProcessBoundary ? ownBranch : parentBranch;
-      parents = builder.computeParents(lastInSpanContext(parentSpan));
+      parents = lastInSpanContext(parentSpan);
     } else if (isEndEvent) {
       // End commit: continues the parent branch chronologically and merges in own-branch work.
       //
@@ -773,18 +783,13 @@ const spanTreeToCommits = (
       // to main) would otherwise gain commits after its own merge and never re-collapse — leaving a
       // dangling lane after the child finishes.
       branch = isProcessBoundary ? MAIN_BRANCH : parentBranch;
-      parents = builder.computeParents(
-        CommitSelector.unionAll(
-          CommitSelector.branch(branch).pipe(CommitSelector.compose(CommitSelector.last())),
-          CommitSelector.branch(ownBranch).pipe(CommitSelector.compose(CommitSelector.last())),
-        ),
-      );
+      parents = parentIds(builder.tipOf(branch), builder.tipOf(ownBranch));
     } else {
       // Middle event: continue the span's own branch; fall back to span's own context so the
       // first middle event of a span forks from the span's begin commit, not from a sibling's
       // commit on an ancestor branch.
       branch = ownBranch;
-      parents = builder.computeParents(lastInSpanContext(span));
+      parents = lastInSpanContext(span);
     }
 
     const commitIndex = globalIndex++;
@@ -1010,26 +1015,58 @@ export const CommitSelector = {
     }),
 };
 
+/**
+ * Accumulates the commit list. Every lookup the graph makes while building — the tip of a branch,
+ * a commit by id — is served from an index, because each is asked once per commit and a scan would
+ * make the whole build quadratic in the history.
+ */
 class GraphBuilder {
   #commits: Commit[] = [];
   #branches = new Set<string>();
-
-  findCommits(selector: CommitSelector): Commit[] {
-    return selector.select(this.#commits);
-  }
+  #indexById = new Map<string, number>();
+  #tipIndexByBranch = new Map<string, number>();
 
   hasBranch(branch: string): boolean {
     return this.#branches.has(branch);
   }
 
+  hasCommit(commitId: string): boolean {
+    return this.#indexById.has(commitId);
+  }
+
+  /** The most recent commit on a branch, or undefined while the branch has none. */
+  tipOf(branch: string | Falsy): Commit | undefined {
+    if (!branch) {
+      return undefined;
+    }
+    const index = this.#tipIndexByBranch.get(branch);
+    return index === undefined ? undefined : this.#commits[index];
+  }
+
+  /** The most recent commit on the first of `branches` that has one. */
+  firstTipOf(...branches: (string | Falsy)[]): Commit | undefined {
+    for (const branch of branches) {
+      const tip = this.tipOf(branch);
+      if (tip) {
+        return tip;
+      }
+    }
+    return undefined;
+  }
+
   addCommit(commit: Commit) {
     this.addBranch(commit.branch);
-    this.#commits.push(commit);
+    const index = this.#commits.push(commit) - 1;
+    // Duplicate ids survive until `doctor` drops them, and it keeps the first — so does this index.
+    if (!this.#indexById.has(commit.id)) {
+      this.#indexById.set(commit.id, index);
+    }
+    this.#tipIndexByBranch.set(commit.branch, index);
   }
 
   addTag(commitId: string, tag: string) {
-    const index = this.#commits.findIndex((commit) => commit.id === commitId);
-    if (index < 0) {
+    const index = this.#indexById.get(commitId);
+    if (index === undefined) {
       return;
     }
     const commit = this.#commits[index]!;
@@ -1039,13 +1076,6 @@ class GraphBuilder {
     this.#commits[index] = { ...commit, tags: [...(commit.tags ?? []), tag] };
   }
 
-  /**
-   * Computes parents — picks first matching commit's id.
-   */
-  computeParents(selector: CommitSelector): string[] {
-    return Array.dedupe(selector.select(this.#commits).map((commit) => commit.id));
-  }
-
   addBranch(branch: string) {
     this.#branches.add(branch);
   }
@@ -1054,16 +1084,23 @@ class GraphBuilder {
    * Removes duplicate commits and dangling parents.
    */
   doctor() {
+    const seen = new Set<string>();
     this.#commits = pipe(
       this.#commits,
-      Array.dedupeWith((a, b) => a.id === b.id),
+      Array.filter((commit) => {
+        if (seen.has(commit.id)) {
+          return false;
+        }
+        seen.add(commit.id);
+        return true;
+      }),
       Array.map(
         Struct.evolve({
-          parents: (parents) =>
-            parents ? Array.filter(parents, (id) => this.#commits.some((commit) => commit.id === id)) : undefined,
+          parents: (parents) => (parents ? Array.filter(parents, (id) => seen.has(id)) : undefined),
         }),
       ),
     );
+    this.#reindex();
   }
 
   build() {
@@ -1073,4 +1110,15 @@ class GraphBuilder {
       branches: [...this.#branches],
     };
   }
+
+  #reindex() {
+    this.#indexById.clear();
+    this.#tipIndexByBranch.clear();
+    this.#commits.forEach((commit, index) => {
+      if (!this.#indexById.has(commit.id)) {
+        this.#indexById.set(commit.id, index);
+      }
+      this.#tipIndexByBranch.set(commit.branch, index);
+    });
+  }
 }

package/src/execution-graph/pending-block-status.ts

@@ -34,7 +34,7 @@ export const formatPendingBlockStatus = (block: ContentBlock.Any): string | unde
 
   if (block._tag === 'toolCall') {
     const bytes = new TextEncoder().encode(block.input).length;
-    const name = block.operationName ?? block.name;
+    const name = block.displayName ?? block.operationName ?? block.name;
     return `Calling ${name} (${bytes} bytes)...`;
   }
 

package/src/execution-graph/sub-agent-delegation.test.ts

@@ -5,8 +5,8 @@
 import { describe, test } from 'vitest';
 
 import * as Trace from '@dxos/compute/Trace';
-import { renderTimelineAscii } from '../components/Timeline/index.ts';
 
+import { renderTimelineAscii } from '../components/Timeline/index.ts';
 import { buildExecutionGraph, collectProcessActivityLines, deriveInFlightActivityLine } from './execution-graph.ts';
 import subAgentFixture from './testing/sub-agent-delegation.json';
 

package/src/hooks/useExecutionGraph.ts

@@ -5,15 +5,14 @@
 import { useAtomValue } from '@effect/atom-react/Hooks';
 import * as Duration from 'effect/Duration';
 import { pipe } from 'effect/Function';
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import { useEffect, useMemo, useState } from 'react';
 
 import * as Process from '@dxos/compute/Process';
 import { type Space } from '@dxos/react-client/echo';
 
-import { filterTraceMessages } from '../components/TracePanel/trace-filter.ts';
+import { filterProcessesBySelection, filterTraceMessages } from '../components/TracePanel/trace-filter.ts';
 import { type ExecutionGraph, buildExecutionGraph } from '../execution-graph/index.ts';
-
 import { getTraceMessagesAtom } from './useTraceMessages.ts';
 
 // Stable refs.
@@ -25,6 +24,11 @@ const NO_PIDS: readonly string[] = [];
 // benefit to re-deriving the graph more often than this just to catch the timeout crossing.
 const SPAN_TIMEOUT_CHECK_INTERVAL_MS = 60_000;
 
+// The trace feed emits per message while anything runs, and the process monitor re-polls on its own
+// clock; every emission rebuilds the graph from the whole history, so the rebuild rate is capped
+// rather than either input's, as `useSessionTimeline` already does.
+const REBUILD_DEBOUNCE = Duration.millis(500);
+
 export type UseExecutionGraphOptions = {
   collapseCompletedSpans?: boolean;
   eventLimit?: number;
@@ -39,7 +43,7 @@ export type UseExecutionGraphOptions = {
  */
 export const useExecutionGraph = (
   space: Space,
-  processesAtom: Atom.Atom<readonly Process.Info[]> | undefined,
+  processesAtom: Atom.Atom<readonly Process.Process[]> | undefined,
   { collapseCompletedSpans, eventLimit, selectedPids = NO_PIDS }: UseExecutionGraphOptions = {},
 ): ExecutionGraph => {
   // Ticks periodically so spans that are still open purely because no new trace event has
@@ -62,13 +66,13 @@ export const useExecutionGraph = (
 };
 
 /** Identity for the graph: only a process appearing, disappearing or changing state redraws it. */
-const sameProcesses = (left: readonly Process.Info[], right: readonly Process.Info[]): boolean =>
+const sameProcesses = (left: readonly Process.Process[], right: readonly Process.Process[]): boolean =>
   left.length === right.length &&
   left.every((process, index) => process.pid === right[index].pid && process.state === right[index].state);
 
 const getExecutionGraph = (
   space: Space,
-  processesAtom: Atom.Atom<readonly Process.Info[]>,
+  processesAtom: Atom.Atom<readonly Process.Process[]>,
   {
     collapseCompletedSpans = true,
     eventLimit = 100,
@@ -77,17 +81,16 @@ const getExecutionGraph = (
   }: UseExecutionGraphOptions & { now: number },
 ): Atom.Atom<ExecutionGraph> => {
   const traceMessages = getTraceMessagesAtom(space).pipe(
+    Atom.debounce(REBUILD_DEBOUNCE),
     Atom.map((messages) => filterTraceMessages(messages, selectedPids)),
   );
 
   const activeProcesses = pipe(
     processesAtom,
-    Atom.debounce(Duration.millis(500)),
+    Atom.debounce(REBUILD_DEBOUNCE),
     Atom.map((processes) =>
-      processes.filter(
-        (process) =>
-          (process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING) &&
-          (selectedPids.length === 0 || selectedPids.includes(process.pid)),
+      filterProcessesBySelection(processes, selectedPids).filter(
+        (process) => process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING,
       ),
     ),
     // The monitor rebuilds the process list on every poll, so without a structural comparison the

package/src/hooks/useSessionTimeline.ts

@@ -3,14 +3,20 @@
 //
 
 import * as Duration from 'effect/Duration';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import type * as Process from '@dxos/compute/Process';
+import { Obj } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { type Task } from '@dxos/types';
 
-import { type Session, type SessionTimeline, buildSessionTimeline } from '../session-timeline/index.ts';
-
+import {
+  type Session,
+  type SessionTimeline,
+  type TaskStatusChange,
+  buildSessionTimeline,
+  readTaskStatusChanges,
+} from '../session-timeline/index.ts';
 import { useTraceMessages } from './useTraceMessages.ts';
 
 /** How often `now` advances while a session is open, so a running lane's range keeps growing. */
@@ -20,14 +26,31 @@ const TICK_MS = 5_000;
 // timeline from the full message history — so the rebuild rate is capped rather than the feed's.
 const TRACE_DEBOUNCE = Duration.millis(500);
 
-const NO_PROCESSES: readonly Process.Info[] = [];
+const NO_PROCESSES: readonly Process.Process[] = [];
+
+type StatusChangeCache = Map<string, { heads: string; changes: TaskStatusChange[] }>;
+
+/**
+ * A task's status moves, re-read only when its document has moved on: reading them diffs every change
+ * in the document, and the timeline rebuilds on every trace emission and tick.
+ */
+const cachedStatusChanges = (cache: StatusChangeCache, task: Task.Task): TaskStatusChange[] => {
+  const heads = (Obj.version(task).automergeHeads ?? []).join(',');
+  const cached = cache.get(task.id);
+  if (cached?.heads === heads) {
+    return cached.changes;
+  }
+  const changes = readTaskStatusChanges(task);
+  cache.set(task.id, { heads, changes });
+  return changes;
+};
 
 export type UseSessionTimelineOptions = {
   /** The sessions shown; each contributes a session lane and its checklist's task lanes. */
   sessions: readonly Session[];
   tasks?: readonly Task.Task[];
   /** The live process tree, from whichever monitor the host has; without it a session's liveness is read from the trace alone. */
-  processes?: readonly Process.Info[];
+  processes?: readonly Process.Process[];
 };
 
 /**
@@ -46,8 +69,11 @@ export const useSessionTimeline = (
     return () => clearInterval(interval);
   }, []);
 
-  return useMemo(
-    () => buildSessionTimeline({ traceMessages, processes, sessions, tasks, now }),
-    [traceMessages, processes, sessions, tasks, now],
-  );
+  const statusChangeCache = useRef<StatusChangeCache>(new Map());
+  return useMemo(() => {
+    const taskStatusChanges = new Map(
+      (tasks ?? []).map((task) => [task.id, cachedStatusChanges(statusChangeCache.current, task)]),
+    );
+    return buildSessionTimeline({ traceMessages, processes, sessions, tasks, taskStatusChanges, now });
+  }, [traceMessages, processes, sessions, tasks, now]);
 };

package/src/hooks/useTraceMessages.ts

@@ -5,7 +5,7 @@
 import { useAtomValue } from '@effect/atom-react/Hooks';
 import * as Duration from 'effect/Duration';
 import { pipe } from 'effect/Function';
-import * as Atom from 'effect/unstable/reactivity/Atom';
+import * as Atom from 'effect/reactivity/Atom';
 import { useMemo } from 'react';
 
 import { FeedTraceSink } from '@dxos/compute-runtime';

package/src/session-timeline/TaskHistory.stories.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import * as Trace from '@dxos/compute/Trace';
+import { Feed, Obj, Ref } from '@dxos/echo';
+import { EID, EntityId } from '@dxos/keys';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Task } from '@dxos/types';
+
+import { Gantt } from '../components/index.ts';
+import { sessionTimelineToGantt } from './gantt-mapping.ts';
+import { type TaskStatusChange, buildSessionTimeline } from './session-timeline.ts';
+import { type Session } from './types.ts';
+
+const T0 = Date.UTC(2026, 8, 25, 12, 5, 22);
+const MINUTE = 60_000;
+const minute = (minutes: number): number => T0 + minutes * MINUTE;
+const at = (minutes: number): string => new Date(minute(minutes)).toISOString();
+
+/**
+ * One session's checklist, and the status moves each task's edit history records — the story's tasks
+ * live in no database, so their moves are given rather than read. With `history` off, the chart sees
+ * only the trace.
+ */
+const makeTasks = (history: boolean) => {
+  const audit = Task.make({ title: 'Audit current artifact storage', status: 'done' });
+  const design = Task.make({ title: 'Design history entry schema', status: 'done' });
+  const migrate = Task.make({ title: 'Write the migration', status: 'done' });
+  const backfill = Task.make({
+    title: 'Backfill existing tasks',
+    status: 'todo',
+    dependsOn: [Ref.make(migrate), Ref.make(design)],
+  });
+  const worked = (start: number, end: number): TaskStatusChange[] => [
+    { timestamp: minute(start), status: 'started', previousStatus: 'todo' },
+    { timestamp: minute(end), status: 'done', previousStatus: 'started' },
+  ];
+  if (history) {
+    const question = Task.ask(design, {
+      text: 'Keep artifacts as refs or fold them into history?',
+      actor: { name: 'Scout', role: 'assistant' },
+      date: at(36),
+    });
+    Task.answer(design, question.id, 'Keep refs', { date: at(47) });
+  }
+  const taskStatusChanges = new Map<string, TaskStatusChange[]>(
+    history
+      ? [
+          [audit.id, worked(1, 26)],
+          [design.id, worked(28, 55)],
+          [migrate.id, worked(57, 111)],
+        ]
+      : [],
+  );
+  return { tasks: [audit, design, migrate, backfill], taskStatusChanges };
+};
+
+/** The session's own trace: two requests and the tool calls between them, with no task status events. */
+const makeTrace = (feed: Ref.Ref<Feed.Feed>): Trace.Message[] => {
+  const event = (minutes: number, type: string, data: unknown) => ({ timestamp: T0 + minutes * MINUTE, type, data });
+  const toolCall = (minutes: number, name: string) =>
+    event(minutes, Trace.CompleteBlock.key, {
+      messageId: EntityId.random(),
+      role: 'assistant',
+      block: { _tag: 'toolCall', toolCallId: name, name, input: '{}', providerExecuted: false },
+    });
+  return [
+    Obj.make(Trace.Message, {
+      meta: { pid: 'agent', conversation: feed },
+      isEphemeral: false,
+      events: [
+        event(0, Trace.AgentRequestBegin.key, {}),
+        toolCall(4, 'Search code'),
+        toolCall(12, 'Read file'),
+        toolCall(20, 'Read file'),
+        toolCall(33, 'Write document'),
+        toolCall(42, 'Ask question'),
+        event(58, Trace.AgentRequestEnd.key, { status: 'success' }),
+        event(104, Trace.AgentRequestBegin.key, {}),
+        toolCall(106, 'Edit file'),
+        toolCall(109, 'Run tests'),
+        event(113, Trace.AgentRequestEnd.key, { status: 'success' }),
+      ],
+    }),
+  ];
+};
+
+const Timeline = ({ title, history }: { title: string; history: boolean }) => {
+  const timeline = useMemo(() => {
+    const feed = Feed.make();
+    const { tasks, taskStatusChanges } = makeTasks(history);
+    const id = EntityId.random();
+    const session: Session = {
+      id,
+      label: 'Schema Migration: Task Artifacts to History',
+      uri: EID.make({ entityId: id }).toString(),
+      feedId: feed.id,
+      taskIds: tasks.map((task) => task.id),
+    };
+    return buildSessionTimeline({
+      traceMessages: makeTrace(Ref.make(feed)),
+      sessions: [session],
+      tasks,
+      taskStatusChanges,
+    });
+  }, [history]);
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <h2 className='px-2 text-sm text-fg-subtle'>{title}</h2>
+      <Gantt.Root {...sessionTimelineToGantt(timeline)} range={timeline.range} classNames='p-2'>
+        <Gantt.Legend>
+          <Gantt.LegendToggle />
+        </Gantt.Legend>
+        <Gantt.Chart />
+      </Gantt.Root>
+    </div>
+  );
+};
+
+const DefaultStory = () => (
+  <div className='flex flex-col gap-6 p-4'>
+    <Timeline title='Trace only — task lanes have no span' history={false} />
+    <Timeline title='With edit history — begin, end, status moves and questions as nodes' history={true} />
+  </div>
+);
+
+const meta = {
+  title: 'ui/react-ui-trace/SessionTimeline',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TaskHistory: Story = {};