From 310fee93d810db388ac4126e10ec05e9081057b4 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Sat, 24 Oct 2026 21:40:33 +0800
Subject: [PATCH 1/3] feat: add a Timeline panel of what each action re-ran

- A Timeline tab lists each user action, such as a click or a key press, with the writes it made, the memos and effects that re-ran, and how long the update took. Updates from timers or promises are rows of their own.
- A re-run shows the changes that caused it, down to the write that started them. A re-run that produced the same value is marked as no change.
- The detail shows the input delay, handler time and settle time from the interaction record, and links each re-run to the reactivity graph.
- The copy button puts a report of the action on the clipboard for an agent.
- The toolbar turns on the attribution engine of solid-js when it mounts, with its console log off.
- Clicks in the toolbar change nothing in the app, so they are left out.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/timeline-panel.md              |   9 +
 README.md                                 |  20 ++
 src/dev-toolbar/icons.tsx                 |  19 ++
 src/dev-toolbar/index.tsx                 |  30 +-
 src/dev-toolbar/report/timeline-report.ts | 123 +++++++
 src/dev-toolbar/timeline/index.tsx        | 385 ++++++++++++++++++++++
 src/dev-toolbar/timeline/styles.css       | 312 ++++++++++++++++++
 src/dev-toolbar/timeline/tracker.test.ts  | 202 ++++++++++++
 src/dev-toolbar/timeline/tracker.ts       | 269 +++++++++++++++
 tests/e2e/devtools.spec.ts                |  45 +++
 10 files changed, 1411 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/timeline-panel.md
 create mode 100644 src/dev-toolbar/report/timeline-report.ts
 create mode 100644 src/dev-toolbar/timeline/index.tsx
 create mode 100644 src/dev-toolbar/timeline/styles.css
 create mode 100644 src/dev-toolbar/timeline/tracker.test.ts
 create mode 100644 src/dev-toolbar/timeline/tracker.ts

diff --git a/.changeset/timeline-panel.md b/.changeset/timeline-panel.md
new file mode 100644
index 0000000..2dc74e5
--- /dev/null
+++ b/.changeset/timeline-panel.md
@@ -0,0 +1,9 @@
+---
+'@solidjs/start-devtools': minor
+---
+
+Add a Timeline panel that lists what each user action re-ran, and why.
+
+- Each click, key press or outside update is a row with its writes, re-runs and timing.
+- A re-run shows the changes that caused it, down to the write that started them.
+- The copy button puts a report of the action on the clipboard for an agent.
diff --git a/README.md b/README.md
index 8db67d7..a041c3d 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ Development error and server-function tooling for Solid Start mode.
 
 - Runtime error inspection with source-mapped stack frames.
 - The issues the runtime reports, such as a signal read outside a tracking scope.
+- A timeline of what each action re-ran, and why.
 - Server-function request and response inspection.
 - A reactivity graph of the live signals, memos and effects in the app.
 - An ownership tree of the components and scopes the app created.
@@ -64,6 +65,25 @@ the same findings, mixed with everything else.
 The panel listens from the moment the toolbar mounts, so findings from the first render
 are there when you open it. Issues need a development build of `solid-js`.
 
+## Timeline
+
+The timeline lists what each user action made the app do. A click, a key press or an
+input is one row, with the signals it wrote and every memo and effect that re-ran because
+of it. An update from outside a handler, such as a timer or a promise, is a row of its own.
+
+- A row shows the writes, the number of re-runs and how long the update took.
+- Select a row for the input delay, the handler time, the time until the update settled,
+  and the writes with their old and new values.
+- Open a re-run to see why it ran: the changes it saw, and the changes behind each of
+  those, down to the write that started them.
+- A re-run marked **no change** produced the same value as before, so its work was wasted.
+- The eye opens the memo or effect in the reactivity graph.
+
+The panel turns on the attribution engine of `solid-js` (`solid-js/attribution`) when the
+toolbar mounts, so the first action is recorded even with the dock closed. Clicks in the
+toolbar itself change nothing in the app, so they are left out. The timeline needs a
+development build of `solid-js`.
+
 ## Reactivity graph
 
 The graph panel maps the running reactive graph. Signals, memos and effects are nodes,
diff --git a/src/dev-toolbar/icons.tsx b/src/dev-toolbar/icons.tsx
index 172dd1b..76b1a77 100644
--- a/src/dev-toolbar/icons.tsx
+++ b/src/dev-toolbar/icons.tsx
@@ -740,3 +740,22 @@ export function IssueIcon(props: JSX.IntrinsicElements['svg'] & { title: string
     </svg>
   );
 }
+
+export function TimelineIcon(props: JSX.IntrinsicElements['svg'] & { title: string }): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      {...props}
+    >
+      <title>{props.title}</title>
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/dev-toolbar/index.tsx b/src/dev-toolbar/index.tsx
index 334e4be..a78415f 100644
--- a/src/dev-toolbar/index.tsx
+++ b/src/dev-toolbar/index.tsx
@@ -21,26 +21,30 @@ import {
   ErrorIcon,
   FunctionIcon,
   GraphIcon,
+  IssueIcon,
   MinimizeIcon,
   SolidIcon,
+  TimelineIcon,
   TreeIcon,
-  IssueIcon,
 } from './icons.js';
+import { addIssues, captureIssues, type IssueEntry } from './issues/tracker.js';
 import { excludeOwner, includeOwner } from './ownership/registry.js';
 import { excludeReactiveOwner, includeReactiveOwner } from './reactivity/registry.js';
-import { addIssues, captureIssues, type IssueEntry } from './issues/tracker.js';
+import { startTimeline, TimelineBuilder, type TimelineEntry } from './timeline/tracker.js';
 import './index.css';
 
 const ErrorViewer = clientOnly(() => import('./error-viewer/index.js'), { lazy: true });
 const ReactivityViewer = clientOnly(() => import('./reactivity/index.js'), { lazy: true });
 const OwnershipViewer = clientOnly(() => import('./ownership/index.js'), { lazy: true });
 const IssuesViewer = clientOnly(() => import('./issues/index.js'), { lazy: true });
+const TimelineViewer = clientOnly(() => import('./timeline/index.js'), { lazy: true });
 
-type Tab = 'err' | 'issues' | 'fn' | 'rx' | 'own';
+type Tab = 'err' | 'issues' | 'tl' | 'fn' | 'rx' | 'own';
 
 const TABS: { value: Tab; label: string; icon: typeof ErrorIcon }[] = [
   { value: 'err', label: 'Errors', icon: ErrorIcon },
   { value: 'issues', label: 'Issues', icon: IssueIcon },
+  { value: 'tl', label: 'Timeline', icon: TimelineIcon },
   { value: 'fn', label: 'Server functions', icon: FunctionIcon },
   { value: 'rx', label: 'Reactivity', icon: GraphIcon },
   { value: 'own', label: 'Ownership', icon: TreeIcon },
@@ -321,6 +325,14 @@ export function DevToolbar(props: DevToolbarProps) {
   }
   const issueCount = createMemo(() => issues().reduce((total, entry) => total + entry.count, 0));
 
+  // The first action can come before the toolbar settles, so the timeline
+  // starts during setup too.
+  const timeline = new TimelineBuilder();
+  const [timelineEntries, setTimelineEntries] = createSignal<TimelineEntry[]>([]);
+  if (!isServer) {
+    onCleanup(startTimeline(timeline, () => setTimelineEntries(timeline.snapshot())));
+  }
+
   const [instances, setInstances] = createSignal<
     Record<string, ServerFunctionInstance | undefined>
   >({});
@@ -485,6 +497,18 @@ export function DevToolbar(props: DevToolbarProps) {
                     show('rx');
                   }}
                 />
+                <TimelineViewer
+                  show={visible('tl')}
+                  entries={timelineEntries()}
+                  onClear={() => {
+                    timeline.clear();
+                    setTimelineEntries([]);
+                  }}
+                  onViewInGraph={(node) => {
+                    setGraphFocus({ node });
+                    show('rx');
+                  }}
+                />
                 <ReactivityViewer
                   show={visible('rx')}
                   focus={graphFocus()}
diff --git a/src/dev-toolbar/report/timeline-report.ts b/src/dev-toolbar/report/timeline-report.ts
new file mode 100644
index 0000000..9f8bb96
--- /dev/null
+++ b/src/dev-toolbar/report/timeline-report.ts
@@ -0,0 +1,123 @@
+import type { ChangeRecord } from 'solid-js/attribution';
+import type { TimelineEntry, TimelineRun } from '../timeline/tracker.js';
+import { code } from './markdown.js';
+import { isSensitiveName, REDACTED, redactText, redactUrl } from './redact.js';
+
+export interface TimelineReportInput {
+  entry: TimelineEntry;
+  /** The path and query of the page. */
+  route: string;
+}
+
+/** Most re-runs the report lists. The rest are counted. */
+const MAX_REPORT_RUNS = 50;
+
+/**
+ * A duration for reading. Browsers round the clock to 0.1ms or coarser, so a
+ * shorter run reads as under that instead of as zero.
+ */
+export function ms(value: number | undefined): string {
+  if (value === undefined) return '?';
+  if (value < 0.1) return '<0.1ms';
+  return value < 1 ? `${value.toFixed(2)}ms` : `${value.toFixed(1)}ms`;
+}
+
+export function plural(count: number, word: string): string {
+  return `${count} ${word}${count === 1 ? '' : 's'}`;
+}
+
+/** `count` 0 → 1, with the values hidden when the name looks sensitive. */
+export function changeText(change: ChangeRecord): string {
+  const name = code(change.name);
+  if (change.kind !== 'write') return `${change.kind} ${name}`;
+  if (change.value === undefined) return `write ${name}`;
+  if (isSensitiveName(change.name)) return `write ${name} ${REDACTED}`;
+  const prev = change.prev === undefined ? '' : `${redactText(change.prev)} → `;
+  return `write ${name} ${prev}${redactText(change.value)}`;
+}
+
+/** The changes that made a run happen, nearest first, each with what caused it. */
+export function causeLines(causes: ChangeRecord[], depth = 0): string[] {
+  const out: string[] = [];
+  for (const cause of causes) {
+    const text = cause.kind === 'derived' ? `${code(cause.name)} changed` : changeText(cause);
+    out.push(`${'  '.repeat(depth)}- ← ${text}`);
+    if (cause.causes?.length) out.push(...causeLines(cause.causes, depth + 1));
+  }
+  return out;
+}
+
+function runLine(run: TimelineRun): string {
+  const { event } = run;
+  const notes: string[] = [ms(event.selfMs)];
+  if (run.effectMs !== undefined) notes.push(`callback ${ms(run.effectMs)}`);
+  if (!event.changed) notes.push('no change');
+  if (event.phase !== 'plain') notes.push(event.phase);
+  if (event.depsAdded.length) notes.push(`now reads ${event.depsAdded.map(code).join(', ')}`);
+  if (event.depsRemoved.length)
+    notes.push(`stopped reading ${event.depsRemoved.map(code).join(', ')}`);
+  return `- ${event.nodeKind} ${code(event.nodeName)} (${notes.join(', ')})`;
+}
+
+/** A Markdown report of what one action made the app do, for an agent to read. */
+export function timelineReport(input: TimelineReportInput): string {
+  const { entry } = input;
+  const { interaction } = entry;
+  const out: string[] = [`# Solid update: ${code(entry.label)}`, ''];
+
+  out.push(`- Page: ${code(redactUrl(input.route))}`);
+  if (interaction) {
+    out.push(`- Outcome: ${interaction.outcome ?? 'pending'}`);
+    if (interaction.inputDelayMs !== undefined) {
+      out.push(`- Input delay: ${ms(interaction.inputDelayMs)}`);
+    }
+    out.push(`- Handler: ${ms(interaction.handlerMs)}`);
+    if (interaction.continuationMs !== undefined) {
+      out.push(`- Async handler continued for ${ms(interaction.continuationMs)}`);
+    }
+    out.push(`- Re-runs: ${interaction.runs}, ${ms(interaction.runMs)} in total`);
+    if (interaction.created) out.push(`- Computations created: ${interaction.created}`);
+    if (interaction.settledMs !== undefined) {
+      out.push(`- Settled: ${ms(interaction.settledMs)} after the event`);
+    }
+  } else {
+    out.push(`- Re-runs: ${entry.runs.length + entry.droppedRuns}`);
+  }
+  if (entry.flushes) out.push(`- Flushes: ${entry.flushes}, ${ms(entry.flushMs)}`);
+
+  if (entry.writes.length) {
+    out.push('', '## Writes', '');
+    for (const write of entry.writes) out.push(`- ${changeText(write)}`);
+  }
+
+  if (entry.runs.length) {
+    out.push('', '## Re-runs, in order', '');
+    for (const run of entry.runs.slice(0, MAX_REPORT_RUNS)) {
+      out.push(runLine(run));
+      out.push(...causeLines(run.event.causes, 1));
+    }
+    const rest = entry.runs.length - MAX_REPORT_RUNS + entry.droppedRuns;
+    if (rest > 0) out.push(`- … ${rest} more re-runs`);
+  }
+
+  if (entry.holds.length) {
+    out.push('', '## Holds', '');
+    for (const hold of entry.holds) {
+      const blockers = hold.blockers.length
+        ? `, waiting on ${hold.blockers.map(code).join(', ')}`
+        : '';
+      const silent = hold.acknowledgements.length ? '' : ', with no pending state shown';
+      out.push(`- ${ms(hold.holdMs)}${blockers}${silent}`);
+    }
+  }
+
+  if (entry.navigations.length) {
+    out.push('', '## Navigations', '');
+    for (const navigation of entry.navigations) {
+      const route = navigation.name ? `${code(navigation.name)} ` : '';
+      out.push(`- ${route}to ${code(navigation.to ?? '?')}, ${navigation.outcome ?? 'pending'}`);
+    }
+  }
+
+  return out.join('\n');
+}
diff --git a/src/dev-toolbar/timeline/index.tsx b/src/dev-toolbar/timeline/index.tsx
new file mode 100644
index 0000000..85a417b
--- /dev/null
+++ b/src/dev-toolbar/timeline/index.tsx
@@ -0,0 +1,385 @@
+import type { JSX } from '@solidjs/web';
+import { createMemo, createSignal, For, Show } from 'solid-js';
+import type { ChangeRecord } from 'solid-js/attribution';
+import { Badge } from '../../ui/Badge.js';
+import IconButton from '../../ui/IconButton.js';
+import Placeholder from '../../ui/Placeholder.js';
+import { Text } from '../../ui/Text.js';
+import { EyeIcon, TrashIcon } from '../icons.js';
+import { CopyReportButton } from '../report/CopyReportButton.js';
+import { pageRoute } from '../report/markdown.js';
+import { ms, plural, timelineReport } from '../report/timeline-report.js';
+import { isTimelineAvailable, type TimelineEntry, type TimelineRun } from './tracker.js';
+import './styles.css';
+
+function outcomeBadge(entry: TimelineEntry): JSX.Element {
+  const outcome = entry.interaction?.outcome;
+  if (outcome === 'held') return <Badge type="warning">held</Badge>;
+  if (outcome === 'committed') return <Badge type="success">committed</Badge>;
+  if (entry.origin && !entry.interaction) return <Badge type="info">pending</Badge>;
+  return <Badge type="info">{entry.origin ? (outcome ?? 'idle') : 'update'}</Badge>;
+}
+
+/** The total time of the entry: the interaction's settle time, else its flushes. */
+function duration(entry: TimelineEntry): number {
+  return entry.interaction?.settledMs ?? entry.flushMs;
+}
+
+function runCount(entry: TimelineEntry): number {
+  return entry.interaction?.runs ?? entry.runs.length + entry.droppedRuns;
+}
+
+/** `0 → 1` for a write, with the values the runtime previewed. */
+function WriteText(props: { change: ChangeRecord }): JSX.Element {
+  return (
+    <>
+      <span data-solid-timeline-change-kind>{props.change.kind}</span>
+      <Text options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}>
+        {props.change.name}
+      </Text>
+      <Show when={props.change.value !== undefined}>
+        <Text data-solid-timeline-change-value options={{ size: 'xs', font: 'mono' }}>
+          {props.change.prev === undefined
+            ? props.change.value!
+            : `${props.change.prev} → ${props.change.value}`}
+        </Text>
+      </Show>
+    </>
+  );
+}
+
+/** Why a run happened: the changes it saw, each with the changes behind it. */
+function CauseTree(props: { causes: ChangeRecord[] }): JSX.Element {
+  return (
+    <ul data-solid-timeline-causes>
+      <For each={props.causes}>
+        {(cause) => (
+          <li>
+            <span data-solid-timeline-cause>
+              <span data-solid-timeline-arrow>←</span>
+              <Show when={cause.kind === 'derived'} fallback={<WriteText change={cause} />}>
+                <Text options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
+                  {`${cause.name} changed`}
+                </Text>
+              </Show>
+            </span>
+            <Show when={cause.causes?.length}>
+              <CauseTree causes={cause.causes!} />
+            </Show>
+          </li>
+        )}
+      </For>
+    </ul>
+  );
+}
+
+interface RunRowProps {
+  run: TimelineRun;
+  open: boolean;
+  onToggle: () => void;
+  onViewInGraph?: (node: object) => void;
+}
+
+function RunRow(props: RunRowProps): JSX.Element {
+  const node = () => props.run.node?.deref();
+  return (
+    <div data-solid-timeline-run data-open={props.open ? '' : undefined}>
+      <div data-solid-timeline-run-head>
+        <button
+          type="button"
+          data-solid-timeline-run-toggle
+          aria-expanded={props.open ? 'true' : 'false'}
+          onClick={props.onToggle}
+        >
+          <span data-solid-timeline-kind={props.run.event.nodeKind} />
+          <Text options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}>
+            {props.run.event.nodeName}
+          </Text>
+          <Show when={!props.run.event.changed}>
+            <Badge type="warning">no change</Badge>
+          </Show>
+          <Show when={props.run.event.phase !== 'plain'}>
+            <Badge type="info">{props.run.event.phase}</Badge>
+          </Show>
+          <Text data-solid-timeline-run-time options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
+            {props.run.effectMs === undefined
+              ? ms(props.run.event.selfMs)
+              : `${ms(props.run.event.selfMs)} + ${ms(props.run.effectMs)}`}
+          </Text>
+        </button>
+        <Show when={props.onViewInGraph && node()}>
+          {(current) => (
+            <button
+              type="button"
+              data-solid-timeline-view-graph
+              aria-label="View in graph"
+              onClick={() => props.onViewInGraph?.(current())}
+            >
+              <EyeIcon title="View in graph" />
+            </button>
+          )}
+        </Show>
+      </div>
+      <Show when={props.open}>
+        <Show
+          when={props.run.event.causes.length}
+          fallback={
+            <Text data-solid-timeline-note options={{ size: 'xs' }}>
+              No tracked change caused this run, such as a retry after an error.
+            </Text>
+          }
+        >
+          <CauseTree causes={props.run.event.causes} />
+        </Show>
+      </Show>
+    </div>
+  );
+}
+
+export interface TimelineViewerProps {
+  show?: boolean;
+  entries: TimelineEntry[];
+  onClear: () => void;
+  /** Opens a memo or an effect in the reactivity graph. */
+  onViewInGraph?: (node: object) => void;
+}
+
+export default function TimelineViewer(props: TimelineViewerProps): JSX.Element {
+  const [query, setQuery] = createSignal('');
+  const [selected, setSelected] = createSignal<number>();
+  const [openRuns, setOpenRuns] = createSignal<number[]>([]);
+
+  const shown = createMemo(() => {
+    const search = query().trim().toLowerCase();
+    if (!search) return props.entries;
+    return props.entries.filter(
+      (entry) =>
+        entry.label.toLowerCase().includes(search) ||
+        entry.writes.some((write) => write.name.toLowerCase().includes(search)) ||
+        entry.runs.some((run) => run.event.nodeName.toLowerCase().includes(search)),
+    );
+  });
+
+  const selectedEntry = createMemo(() => {
+    const id = selected();
+    return id === undefined ? undefined : props.entries.find((entry) => entry.id === id);
+  });
+
+  function select(id: number): void {
+    setOpenRuns([]);
+    setSelected((current) => (current === id ? undefined : id));
+  }
+
+  function toggleRun(run: number): void {
+    setOpenRuns((current) =>
+      current.includes(run) ? current.filter((item) => item !== run) : [...current, run],
+    );
+  }
+
+  return (
+    <Show when={props.show}>
+      <div data-solid-dev-toolbar-panel>
+        <div data-solid-timeline-viewer>
+          <div data-solid-timeline-nav>
+            <input
+              data-solid-timeline-search
+              type="search"
+              placeholder="Filter by action, signal or computation"
+              value={query()}
+              onInput={(event) => setQuery(event.currentTarget.value)}
+            />
+            <div data-solid-timeline-nav-actions>
+              <Text data-solid-timeline-count options={{ size: 'xs', font: 'mono' }}>
+                {`${shown().length} of ${props.entries.length}`}
+              </Text>
+              <IconButton
+                disabled={!props.entries.length}
+                onClick={() => {
+                  setSelected(undefined);
+                  props.onClear();
+                }}
+              >
+                <TrashIcon title="Clear timeline" />
+              </IconButton>
+            </div>
+          </div>
+
+          <div data-solid-timeline-body>
+            <Show
+              when={isTimelineAvailable()}
+              fallback={
+                <Placeholder>
+                  <Text options={{ size: 'xs' }}>
+                    The timeline needs a development build of solid-js.
+                  </Text>
+                </Placeholder>
+              }
+            >
+              <div data-solid-timeline-list>
+                <Show
+                  when={shown().length}
+                  fallback={
+                    <Placeholder>
+                      <Text options={{ size: 'xs' }}>
+                        {props.entries.length
+                          ? 'Nothing matches this filter.'
+                          : 'Interact with the app to see what each action re-runs.'}
+                      </Text>
+                    </Placeholder>
+                  }
+                >
+                  <For each={shown()}>
+                    {(entry) => (
+                      <button
+                        type="button"
+                        data-solid-timeline-row
+                        data-kind={entry.origin ? 'interaction' : 'update'}
+                        data-selected={selected() === entry.id ? '' : undefined}
+                        onClick={() => select(entry.id)}
+                      >
+                        <span data-solid-timeline-row-head>
+                          {outcomeBadge(entry)}
+                          <Text
+                            data-solid-timeline-row-label
+                            options={{
+                              size: 'xs',
+                              weight: 'semibold',
+                              font: 'mono',
+                              wrap: 'nowrap',
+                            }}
+                          >
+                            {entry.label}
+                          </Text>
+                        </span>
+                        <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
+                          {`${plural(entry.writes.length, 'write')} · ${plural(runCount(entry), 're-run')} · ${ms(duration(entry))}`}
+                        </Text>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </div>
+
+              <Show when={selectedEntry()}>
+                {(entry) => (
+                  <aside data-solid-timeline-detail>
+                    <div data-solid-timeline-detail-head>
+                      {outcomeBadge(entry())}
+                      <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
+                        {entry().label}
+                      </Text>
+                      <CopyReportButton
+                        label="this update"
+                        report={() => timelineReport({ entry: entry(), route: pageRoute() })}
+                      />
+                    </div>
+
+                    <Show when={entry().interaction}>
+                      {(interaction) => (
+                        <div data-solid-kv-table>
+                          <Show when={interaction().inputDelayMs !== undefined}>
+                            <div data-solid-kv-row>
+                              <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                                Input delay
+                              </Text>
+                              <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                                {ms(interaction().inputDelayMs)}
+                              </Text>
+                            </div>
+                          </Show>
+                          <div data-solid-kv-row>
+                            <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                              Handler
+                            </Text>
+                            <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                              {ms(interaction().handlerMs)}
+                            </Text>
+                          </div>
+                          <div data-solid-kv-row>
+                            <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                              Re-runs
+                            </Text>
+                            <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                              {`${interaction().runs}, ${ms(interaction().runMs)}`}
+                            </Text>
+                          </div>
+                          <Show when={interaction().settledMs !== undefined}>
+                            <div data-solid-kv-row>
+                              <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                                Settled
+                              </Text>
+                              <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                                {`${ms(interaction().settledMs)} after the event`}
+                              </Text>
+                            </div>
+                          </Show>
+                        </div>
+                      )}
+                    </Show>
+
+                    <Show when={entry().writes.length}>
+                      <div data-solid-timeline-section>
+                        <Text options={{ size: 'xs', weight: 'semibold' }}>
+                          {`Writes (${entry().writes.length})`}
+                        </Text>
+                        <For each={entry().writes}>
+                          {(write) => (
+                            <span data-solid-timeline-write>
+                              <WriteText change={write} />
+                            </span>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+
+                    <div data-solid-timeline-section>
+                      <Text options={{ size: 'xs', weight: 'semibold' }}>
+                        {`Re-runs (${entry().runs.length + entry().droppedRuns})`}
+                      </Text>
+                      <For
+                        each={entry().runs}
+                        fallback={<Text options={{ size: 'xs' }}>Nothing re-ran.</Text>}
+                      >
+                        {(run) => (
+                          <RunRow
+                            run={run}
+                            open={openRuns().includes(run.event.run)}
+                            onToggle={() => toggleRun(run.event.run)}
+                            onViewInGraph={props.onViewInGraph}
+                          />
+                        )}
+                      </For>
+                      <Show when={entry().droppedRuns}>
+                        <Text data-solid-timeline-note options={{ size: 'xs' }}>
+                          {`${entry().droppedRuns} more re-runs are not listed.`}
+                        </Text>
+                      </Show>
+                      <Text data-solid-timeline-note options={{ size: 'xs' }}>
+                        Open a re-run to see the changes that caused it.
+                      </Text>
+                    </div>
+
+                    <Show when={entry().holds.length}>
+                      <div data-solid-timeline-section>
+                        <Text options={{ size: 'xs', weight: 'semibold' }}>
+                          {`Holds (${entry().holds.length})`}
+                        </Text>
+                        <For each={entry().holds}>
+                          {(hold) => (
+                            <Text options={{ size: 'xs', font: 'mono' }}>
+                              {`${ms(hold.holdMs)}${hold.blockers.length ? `, waiting on ${hold.blockers.join(', ')}` : ''}`}
+                            </Text>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+                  </aside>
+                )}
+              </Show>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/src/dev-toolbar/timeline/styles.css b/src/dev-toolbar/timeline/styles.css
new file mode 100644
index 0000000..e22325f
--- /dev/null
+++ b/src/dev-toolbar/timeline/styles.css
@@ -0,0 +1,312 @@
+[data-solid-timeline-viewer] {
+  --start-dt-kind-memo: oklch(0.7 0.14 300);
+  --start-dt-kind-effect: oklch(0.72 0.15 150);
+
+  color: var(--start-dt-text);
+
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  min-height: 0;
+}
+
+[data-solid-timeline-nav] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.5rem;
+
+  padding: 0.5rem 0.75rem;
+
+  border-bottom: var(--start-dt-border-soft) 1px solid;
+}
+
+[data-solid-timeline-search] {
+  flex: 1;
+  min-width: 6rem;
+  max-width: 18rem;
+
+  padding: 0.25rem 0.5rem;
+
+  border-radius: 0.5rem;
+  border: var(--start-dt-border) 1px solid;
+  background: var(--start-dt-surface);
+  color: var(--start-dt-text);
+
+  font-family: inherit;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-solid-timeline-search]:focus {
+  outline: none;
+  border-color: var(--start-dt-accent);
+}
+
+[data-solid-timeline-nav-actions] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.375rem;
+
+  margin-left: auto;
+}
+
+[data-solid-timeline-count] {
+  color: var(--start-dt-text-muted);
+  white-space: nowrap;
+}
+
+[data-solid-timeline-body] {
+  display: flex;
+  flex-direction: row;
+
+  flex: 1;
+  min-height: 0;
+}
+
+[data-solid-timeline-list] {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1;
+  min-width: 0;
+
+  overflow: auto;
+}
+
+[data-solid-timeline-row] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  gap: 0.25rem;
+
+  padding: 0.5rem 0.75rem;
+
+  border: none;
+  border-bottom: var(--start-dt-border-soft) 1px solid;
+  background: none;
+  color: var(--start-dt-text);
+  text-align: left;
+
+  cursor: pointer;
+}
+
+[data-solid-timeline-row]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
+[data-solid-timeline-row][data-selected] {
+  background: var(--start-dt-surface-active);
+}
+
+[data-solid-timeline-row]:focus-visible {
+  outline: 2px solid var(--start-dt-accent);
+  outline-offset: -2px;
+}
+
+[data-solid-timeline-row-head] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.5rem;
+
+  min-width: 0;
+}
+
+[data-solid-timeline-row-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-solid-timeline-row-meta] {
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-timeline-detail] {
+  display: flex;
+  flex-direction: column;
+
+  gap: 0.625rem;
+
+  width: 26rem;
+  flex-shrink: 0;
+  min-height: 0;
+
+  padding: 0.625rem 0.75rem;
+
+  border-left: var(--start-dt-border-soft) 1px solid;
+  overflow: auto;
+}
+
+/* The pane scrolls, so its blocks keep their height instead of shrinking to fit. */
+[data-solid-timeline-detail] > * {
+  flex-shrink: 0;
+}
+
+[data-solid-timeline-detail] [data-solid-kv-key] {
+  flex-basis: 5.5rem;
+}
+
+[data-solid-timeline-detail-head] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.375rem;
+
+  min-width: 0;
+}
+
+[data-solid-timeline-detail-head] [data-solid-copy-report] {
+  margin-left: auto;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+[data-solid-timeline-detail-head] [data-solid-copy-report] > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-solid-timeline-section] {
+  display: flex;
+  flex-direction: column;
+
+  gap: 0.25rem;
+}
+
+[data-solid-timeline-write],
+[data-solid-timeline-cause] {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+
+  gap: 0.375rem;
+
+  min-width: 0;
+}
+
+[data-solid-timeline-change-kind] {
+  color: var(--start-dt-text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+}
+
+[data-solid-timeline-change-value] {
+  color: oklch(0.8 0.12 80);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-timeline-run] {
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 0.375rem;
+}
+
+[data-solid-timeline-run][data-open] {
+  background: var(--start-dt-surface);
+  padding-bottom: 0.375rem;
+}
+
+[data-solid-timeline-run-head] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.25rem;
+}
+
+[data-solid-timeline-run-toggle] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.375rem;
+
+  flex: 1;
+  min-width: 0;
+
+  padding: 0.25rem 0.375rem;
+
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--start-dt-text);
+  text-align: left;
+
+  cursor: pointer;
+}
+
+[data-solid-timeline-run-toggle]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
+[data-solid-timeline-run-time] {
+  margin-left: auto;
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-timeline-kind] {
+  width: 0.5rem;
+  height: 0.5rem;
+  flex-shrink: 0;
+
+  border-radius: 9999px;
+  background: var(--start-dt-kind-effect);
+}
+
+[data-solid-timeline-kind='memo'] {
+  background: var(--start-dt-kind-memo);
+}
+
+[data-solid-timeline-view-graph] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.25rem;
+
+  border: none;
+  border-radius: 0.25rem;
+  background: none;
+  color: var(--start-dt-accent);
+
+  cursor: pointer;
+}
+
+[data-solid-timeline-view-graph]:hover {
+  background: var(--start-dt-accent-soft);
+}
+
+[data-solid-timeline-view-graph] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-solid-timeline-causes] {
+  margin: 0;
+  padding: 0 0 0 1.25rem;
+
+  list-style: none;
+}
+
+[data-solid-timeline-causes] [data-solid-timeline-causes] {
+  padding-left: 1rem;
+}
+
+[data-solid-timeline-arrow] {
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-timeline-note] {
+  color: var(--start-dt-text-muted);
+}
diff --git a/src/dev-toolbar/timeline/tracker.test.ts b/src/dev-toolbar/timeline/tracker.test.ts
new file mode 100644
index 0000000..facc2bc
--- /dev/null
+++ b/src/dev-toolbar/timeline/tracker.test.ts
@@ -0,0 +1,202 @@
+import { describe, expect, it } from 'vitest';
+import type {
+  ChangeOrigin,
+  ChangeRecord,
+  FlushEvent,
+  InteractionEvent,
+  RerunEvent,
+} from 'solid-js/attribution';
+import { timelineReport } from '../report/timeline-report.js';
+import { rootChanges, TimelineBuilder } from './tracker.js';
+
+const click: ChangeOrigin = {
+  kind: 'interaction',
+  name: 'click',
+  target: 'button#inc "count 0"',
+  at: 100,
+};
+
+const write: ChangeRecord = {
+  seq: 1,
+  kind: 'write',
+  name: 'count',
+  nodeId: 5,
+  prev: '0',
+  value: '1',
+  origin: click,
+  at: 101,
+};
+
+const derived: ChangeRecord = {
+  seq: 2,
+  kind: 'derived',
+  name: 'doubled',
+  nodeId: 1,
+  causes: [write],
+};
+
+function rerun(over: Partial<RerunEvent>): RerunEvent {
+  return {
+    run: 1,
+    at: 102,
+    nodeRuns: 1,
+    nodeKind: 'memo',
+    nodeName: 'doubled',
+    nodeId: 1,
+    causes: [write],
+    depCount: 1,
+    depsAdded: [],
+    depsRemoved: [],
+    selfMs: 0.2,
+    totalMs: 0.2,
+    changed: true,
+    phase: 'plain',
+    held: false,
+    interaction: click,
+    ...over,
+  };
+}
+
+function flush(over: Partial<FlushEvent> = {}): FlushEvent {
+  return { at: 102, durationMs: 1, runs: 2, created: 0, held: false, ...over } as FlushEvent;
+}
+
+function interaction(over: Partial<InteractionEvent> = {}): InteractionEvent {
+  return {
+    name: 'click',
+    target: click.target,
+    at: 100,
+    inputDelayMs: 4,
+    handlerMs: 1,
+    writes: 1,
+    runs: 2,
+    created: 0,
+    runMs: 0.5,
+    holds: [],
+    navigations: [],
+    settledMs: 6,
+    outcome: 'committed',
+    origin: click,
+    ...over,
+  };
+}
+
+describe('rootChanges', () => {
+  it('finds the writes a chain of derived changes bottoms out in, once each', () => {
+    expect([...rootChanges([write, derived]).values()]).toEqual([write]);
+  });
+});
+
+describe('TimelineBuilder', () => {
+  it('groups the records of one interaction into one entry', () => {
+    const builder = new TimelineBuilder();
+    const node = {};
+    builder.rerun(rerun({}), node);
+    builder.rerun(
+      rerun({ run: 2, nodeKind: 'effect', nodeName: 'title', nodeId: 2, causes: [derived] }),
+      undefined,
+    );
+    builder.effect({
+      at: 103,
+      durationMs: 0.3,
+      nodeId: 2,
+      nodeName: 'title',
+      run: 2,
+      interaction: click,
+    });
+    builder.flush(flush({ interaction: click }));
+    builder.interaction(interaction());
+
+    const entries = builder.snapshot();
+    expect(entries).toHaveLength(1);
+    const [entry] = entries;
+    expect(entry!.label).toBe('click on button#inc "count 0"');
+    expect(entry!.writes).toEqual([write]);
+    expect(entry!.runs.map((run) => run.event.nodeName)).toEqual(['doubled', 'title']);
+    expect(entry!.runs[0]!.node?.deref()).toBe(node);
+    expect(entry!.runs[1]!.effectMs).toBe(0.3);
+    expect(entry!.flushes).toBe(1);
+    expect(entry!.interaction?.settledMs).toBe(6);
+  });
+
+  it('starts a new entry for each outside update, ended by its flush', () => {
+    const builder = new TimelineBuilder();
+    const timer: ChangeRecord = { ...write, seq: 9, name: 'clock', origin: { kind: 'external' } };
+    builder.rerun(rerun({ interaction: undefined, causes: [timer] }), undefined);
+    builder.flush(flush());
+    builder.rerun(
+      rerun({ run: 3, interaction: undefined, causes: [{ ...timer, seq: 10 }] }),
+      undefined,
+    );
+    builder.flush(flush());
+
+    const entries = builder.snapshot();
+    expect(entries).toHaveLength(2);
+    expect(entries[0]!.label).toBe('update: clock');
+    expect(entries[0]!.origin).toBeUndefined();
+  });
+
+  it('leaves out an interaction that changed nothing', () => {
+    const builder = new TimelineBuilder();
+    builder.interaction(
+      interaction({ writes: 0, runs: 0, origin: { kind: 'interaction', name: 'click' } }),
+    );
+    expect(builder.snapshot()).toHaveLength(0);
+  });
+
+  it('gives a changed entry a new object and keeps the rest', () => {
+    const builder = new TimelineBuilder();
+    const other: ChangeOrigin = { kind: 'interaction', name: 'keydown', at: 200 };
+    builder.rerun(rerun({}), undefined);
+    builder.rerun(rerun({ run: 2, interaction: other }), undefined);
+    const first = builder.snapshot();
+    builder.rerun(rerun({ run: 3 }), undefined);
+    const second = builder.snapshot();
+
+    expect(second[0]).toBe(first[0]);
+    expect(second[1]).not.toBe(first[1]);
+    expect(second[1]!.runs).toHaveLength(2);
+  });
+
+  it('keeps the newest entries up to the limit', () => {
+    const builder = new TimelineBuilder(2);
+    for (const at of [1, 2, 3]) {
+      builder.rerun(
+        rerun({ run: at, interaction: { kind: 'interaction', name: `e${at}`, at } }),
+        undefined,
+      );
+    }
+    expect(builder.snapshot().map((entry) => entry.origin?.name)).toEqual(['e3', 'e2']);
+  });
+});
+
+describe('timelineReport', () => {
+  it('lists the writes and each re-run with its causes', () => {
+    const builder = new TimelineBuilder();
+    builder.rerun(rerun({}), undefined);
+    builder.rerun(
+      rerun({ run: 2, nodeKind: 'effect', nodeName: 'title', causes: [derived], changed: false }),
+      undefined,
+    );
+    builder.interaction(interaction());
+    const report = timelineReport({ entry: builder.snapshot()[0]!, route: '/' });
+
+    expect(report).toContain('# Solid update: `click on button#inc "count 0"`');
+    expect(report).toContain('- Input delay: 4.0ms');
+    expect(report).toContain('- Settled: 6.0ms after the event');
+    expect(report).toContain('## Writes\n\n- write `count` 0 → 1');
+    expect(report).toContain('- memo `doubled` (0.20ms)\n  - ← write `count` 0 → 1');
+    expect(report).toContain(
+      '- effect `title` (0.20ms, no change)\n  - ← `doubled` changed\n    - ← write `count` 0 → 1',
+    );
+  });
+
+  it('hides the values of a write with a sensitive name', () => {
+    const builder = new TimelineBuilder();
+    const secret: ChangeRecord = { ...write, name: 'authToken', prev: 'a', value: 'b' };
+    builder.rerun(rerun({ causes: [secret] }), undefined);
+    const report = timelineReport({ entry: builder.snapshot()[0]!, route: '/' });
+    expect(report).toContain('write `authToken` [redacted]');
+    expect(report).not.toContain('a → b');
+  });
+});
diff --git a/src/dev-toolbar/timeline/tracker.ts b/src/dev-toolbar/timeline/tracker.ts
new file mode 100644
index 0000000..81430a8
--- /dev/null
+++ b/src/dev-toolbar/timeline/tracker.ts
@@ -0,0 +1,269 @@
+import { OBSERVE } from 'solid-js';
+import {
+  attribution,
+  formatOrigin,
+  type ChangeOrigin,
+  type ChangeRecord,
+  type EffectRunEvent,
+  type FlushEvent,
+  type HoldEvent,
+  type InteractionEvent,
+  type NavigationEvent,
+  type RerunEvent,
+} from 'solid-js/attribution';
+
+/** One re-run of a memo or an effect, with the time its effect callback took. */
+export interface TimelineRun {
+  event: RerunEvent;
+  /** The runtime node, held weakly so the graph can be pointed at it. */
+  node: WeakRef<object> | undefined;
+  /** Time of the effect callback that followed the compute run, for an effect. */
+  effectMs: number | undefined;
+}
+
+/**
+ * What one user action, or one update from outside the app's handlers, made
+ * the app do: the writes it started with and every re-run they caused.
+ */
+export interface TimelineEntry {
+  id: number;
+  /**
+   * The interaction the records trace back to. The runtime hands the same
+   * object to every record of one interaction, so it is the key the records
+   * are grouped by. `undefined` for an update from a timer, a promise or
+   * another callback the runtime does not know as an interaction.
+   */
+  origin: ChangeOrigin | undefined;
+  label: string;
+  /** When the action began, on the `performance.now()` clock. */
+  at: number;
+  /** The interaction record, which the runtime sends once the update has settled. */
+  interaction: InteractionEvent | undefined;
+  /** The writes the re-runs bottom out in, in order. */
+  writes: ChangeRecord[];
+  runs: TimelineRun[];
+  /** Re-runs left out once the entry held `MAX_RUNS`. */
+  droppedRuns: number;
+  flushes: number;
+  flushMs: number;
+  holds: HoldEvent[];
+  navigations: NavigationEvent[];
+}
+
+/** Most entries the panel keeps. The oldest go first. */
+export const MAX_ENTRIES = 100;
+/** Most re-runs one entry keeps. */
+export const MAX_RUNS = 300;
+
+/** The writes, landings and refreshes a cause chain bottoms out in. */
+export function rootChanges(causes: ChangeRecord[], out = new Map<number, ChangeRecord>()) {
+  for (const cause of causes) {
+    if (cause.causes?.length) rootChanges(cause.causes, out);
+    else if (!out.has(cause.seq)) out.set(cause.seq, cause);
+  }
+  return out;
+}
+
+function externalLabel(writes: ChangeRecord[]): string {
+  const origin = writes.find((write) => write.origin)?.origin;
+  const source = origin && origin.kind !== 'external' ? formatOrigin(origin) : 'update';
+  const names = [...new Set(writes.map((write) => write.name))];
+  return names.length ? `${source}: ${names.join(', ')}` : source;
+}
+
+/**
+ * Builds the timeline from the runtime's records. Pure apart from the clock
+ * values in the records, so it can be fed by hand in tests.
+ */
+export class TimelineBuilder {
+  entries: TimelineEntry[] = [];
+  private nextId = 1;
+  private byOrigin = new WeakMap<ChangeOrigin, TimelineEntry>();
+  /** The entry collecting re-runs that no interaction caused, until its flush ends. */
+  private external: TimelineEntry | undefined;
+  private changed = new Set<TimelineEntry>();
+
+  constructor(private readonly max = MAX_ENTRIES) {}
+
+  private create(origin: ChangeOrigin | undefined, at: number): TimelineEntry {
+    const entry: TimelineEntry = {
+      id: this.nextId++,
+      origin,
+      label: origin ? formatOrigin(origin) : 'update',
+      at: origin?.at ?? at,
+      interaction: undefined,
+      writes: [],
+      runs: [],
+      droppedRuns: 0,
+      flushes: 0,
+      flushMs: 0,
+      holds: [],
+      navigations: [],
+    };
+    this.entries.unshift(entry);
+    for (const dropped of this.entries.splice(this.max)) {
+      if (dropped.origin) this.byOrigin.delete(dropped.origin);
+      if (dropped === this.external) this.external = undefined;
+    }
+    if (origin) this.byOrigin.set(origin, entry);
+    return entry;
+  }
+
+  private entryFor(origin: ChangeOrigin | undefined, at: number): TimelineEntry {
+    if (origin) return this.byOrigin.get(origin) ?? this.create(origin, at);
+    this.external ??= this.create(undefined, at);
+    return this.external;
+  }
+
+  private touch(entry: TimelineEntry): void {
+    this.changed.add(entry);
+  }
+
+  rerun(event: RerunEvent, node: object | undefined): void {
+    const entry = this.entryFor(event.interaction, event.at);
+    const known = new Set(entry.writes.map((write) => write.seq));
+    for (const root of rootChanges(event.causes).values()) {
+      if (!known.has(root.seq)) entry.writes.push(root);
+    }
+    if (!entry.origin) entry.label = externalLabel(entry.writes);
+    if (entry.runs.length < MAX_RUNS) {
+      entry.runs.push({ event, node: node ? new WeakRef(node) : undefined, effectMs: undefined });
+    } else {
+      entry.droppedRuns++;
+    }
+    this.touch(entry);
+  }
+
+  effect(event: EffectRunEvent): void {
+    if (event.run === undefined) return;
+    const entry = this.entryFor(event.interaction, event.at);
+    const run = entry.runs.find((item) => item.event.run === event.run);
+    if (!run) return;
+    run.effectMs = (run.effectMs ?? 0) + event.durationMs;
+    this.touch(entry);
+  }
+
+  flush(event: FlushEvent): void {
+    // A flush with nothing in it says nothing about an action.
+    if (!event.runs && !event.created) {
+      if (!event.interaction) this.external = undefined;
+      return;
+    }
+    const entry = this.entryFor(event.interaction, event.at);
+    entry.flushes++;
+    entry.flushMs += event.durationMs;
+    // The re-runs of an outside update end with its flush, so the next ones start a new entry.
+    if (!event.interaction) this.external = undefined;
+    this.touch(entry);
+  }
+
+  interaction(event: InteractionEvent): void {
+    // A click on something that reads no state, such as the devtools themselves.
+    const idle = !event.writes && !event.runs && !event.created && !event.holds.length;
+    if (idle && !this.byOrigin.has(event.origin)) return;
+    const entry = this.entryFor(event.origin, event.at);
+    entry.interaction = event;
+    entry.at = event.at;
+    this.touch(entry);
+  }
+
+  hold(event: HoldEvent): void {
+    const entry = this.entryFor(event.interaction, event.at);
+    entry.holds.push(event);
+    this.touch(entry);
+  }
+
+  navigation(event: NavigationEvent): void {
+    const entry = this.entryFor(event.interaction ?? event.origin, event.at);
+    entry.navigations.push(event);
+    this.touch(entry);
+  }
+
+  /**
+   * The entries for the panel. An entry that changed since the last call is a
+   * new object, so the panel redraws only what moved.
+   */
+  snapshot(): TimelineEntry[] {
+    if (!this.changed.size) return this.entries;
+    this.entries = this.entries.map((entry) => {
+      if (!this.changed.has(entry)) return entry;
+      const copy = {
+        ...entry,
+        writes: entry.writes.slice(),
+        runs: entry.runs.slice(),
+        holds: entry.holds.slice(),
+        navigations: entry.navigations.slice(),
+      };
+      // Later records find the entry through its origin, so they reach the copy.
+      if (copy.origin) this.byOrigin.set(copy.origin, copy);
+      if (this.external === entry) this.external = copy;
+      return copy;
+    });
+    this.changed.clear();
+    return this.entries;
+  }
+
+  clear(): void {
+    this.entries = [];
+    this.byOrigin = new WeakMap();
+    this.external = undefined;
+    this.changed.clear();
+  }
+}
+
+/** True when the runtime can explain re-runs, which is in dev and observe builds. */
+export function isTimelineAvailable(): boolean {
+  return !!OBSERVE?.records && typeof attribution?.enable === 'function';
+}
+
+/**
+ * Turns on the runtime's attribution engine and feeds its records to a
+ * builder. The engine's records arrive inside the runtime's own work, where a
+ * signal write would be part of what it measures, so the panel hears about
+ * changes on a microtask. Returns the stop.
+ */
+export function startTimeline(builder: TimelineBuilder, onChange: () => void): () => void {
+  if (!isTimelineAvailable()) return () => {};
+  const records = OBSERVE!.records;
+  let queued = false;
+  const changed = () => {
+    if (queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      onChange();
+    });
+  };
+  const offs = [
+    records.subscribe('rerun', (event, node) => {
+      builder.rerun(event, node as object | undefined);
+      changed();
+    }),
+    records.subscribe('effect', (event) => {
+      builder.effect(event);
+      changed();
+    }),
+    records.subscribe('flush', (event) => {
+      builder.flush(event);
+      changed();
+    }),
+    records.subscribe('interaction', (event) => {
+      builder.interaction(event);
+      changed();
+    }),
+    records.subscribe('hold', (event) => {
+      builder.hold(event);
+      changed();
+    }),
+    records.subscribe('navigation', (event) => {
+      builder.navigation(event);
+      changed();
+    }),
+  ];
+  // The console log stays off: the panel is where the re-runs are read.
+  const release = attribution.enable({ log: false, values: 'full' });
+  return () => {
+    release();
+    for (const off of offs) off();
+  };
+}
diff --git a/tests/e2e/devtools.spec.ts b/tests/e2e/devtools.spec.ts
index 4e2d559..b01dd1d 100644
--- a/tests/e2e/devtools.spec.ts
+++ b/tests/e2e/devtools.spec.ts
@@ -489,6 +489,51 @@ test('lists runtime issues', async ({ page }) => {
   await expect(page.getByRole('tab', { name: 'Issues', exact: true })).not.toContainText('2');
 });
 
+test('shows what each action re-ran and why', async ({ page }) => {
+  await page.goto('/');
+  await page.locator('#increment-count').click();
+
+  await openTab(page, 'Timeline');
+  const rows = page.locator('[data-solid-timeline-row]');
+  // Clicks on the toolbar change nothing in the app, so the click on the counter is the only entry.
+  await expect(rows).toHaveCount(1);
+  await expect(rows.first()).toContainText('click on button#increment-count');
+  await expect(rows.first()).toContainText('1 write · 3 re-runs');
+  await expect(rows.first()).toContainText('committed');
+
+  await rows.first().click();
+  const detail = page.locator('[data-solid-timeline-detail]');
+  await expect(detail.locator('[data-solid-timeline-write]')).toHaveText(/write\s*count\s*0 → 1/);
+  await expect(detail.locator('[data-solid-timeline-run-toggle]')).toHaveText([
+    /doubled/,
+    /effect/,
+    /report-doubled/,
+  ]);
+
+  // An effect re-ran because the memo it reads changed, which the write caused.
+  await detail
+    .locator('[data-solid-timeline-run-toggle]')
+    .filter({ hasText: 'report-doubled' })
+    .click();
+  const causes = detail.locator(
+    '[data-solid-timeline-run][data-open] [data-solid-timeline-causes]',
+  );
+  await expect(causes.first()).toContainText('doubled changed');
+  await expect(causes.first()).toContainText('count');
+
+  // The eye opens the memo in the reactivity graph.
+  await detail
+    .locator('[data-solid-timeline-run]')
+    .filter({ hasText: /^doubled/ })
+    .getByRole('button', { name: 'View in graph' })
+    .click();
+  await expect(page.getByRole('tab', { name: 'Reactivity', exact: true })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+  await expect(page.locator('[data-solid-reactivity-detail]')).toContainText('doubled');
+});
+
 test('copies reports for an agent', async ({ page, context }) => {
   await context.grantPermissions(['clipboard-read', 'clipboard-write']);
   const clipboard = () => page.evaluate(() => navigator.clipboard.readText());

From 57127ef0af572b14d55d8f1deed56fe44a0bc70f Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Sat, 24 Oct 2026 22:02:05 +0800
Subject: [PATCH 2/3] feat(timeline): list the server-function calls of each
 action

- The timeline reads the `call` record, whose origin is the interaction's own object, or a frame that names it. A call joins the action it ran for.
- A click that only calls the server writes nothing, so its interaction record looks idle. Idle interactions are kept aside, and a later call attaches to its own.
- The detail lists the calls with method, status and time, and the report has a Server calls section.
- A call opens in the server-function panel. The timeline keeps that panel's key for the call, since the runtime's live object for it is not held by anything once it settled.
- The test fixture has a "call server" button that sends a call record from its handler.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/timeline-panel.md              |  1 +
 README.md                                 |  3 +
 src/dev-toolbar/functions/index.tsx       | 14 ++++-
 src/dev-toolbar/functions/records.ts      | 24 ++++++--
 src/dev-toolbar/index.tsx                 |  7 +++
 src/dev-toolbar/report/timeline-report.ts | 11 ++++
 src/dev-toolbar/timeline/index.tsx        | 64 ++++++++++++++++++-
 src/dev-toolbar/timeline/styles.css       | 24 ++++++++
 src/dev-toolbar/timeline/tracker.test.ts  | 75 ++++++++++++++++++++++-
 src/dev-toolbar/timeline/tracker.ts       | 57 ++++++++++++++++-
 tests/e2e/devtools.spec.ts                | 22 +++++++
 tests/fixture/app.tsx                     | 33 +++++++++-
 12 files changed, 323 insertions(+), 12 deletions(-)

diff --git a/.changeset/timeline-panel.md b/.changeset/timeline-panel.md
index 2dc74e5..8eb553e 100644
--- a/.changeset/timeline-panel.md
+++ b/.changeset/timeline-panel.md
@@ -6,4 +6,5 @@ Add a Timeline panel that lists what each user action re-ran, and why.
 
 - Each click, key press or outside update is a row with its writes, re-runs and timing.
 - A re-run shows the changes that caused it, down to the write that started them.
+- The server-function calls an action made are listed under it, and open in the server-function panel.
 - The copy button puts a report of the action on the clipboard for an agent.
diff --git a/README.md b/README.md
index a041c3d..19b9fcb 100644
--- a/README.md
+++ b/README.md
@@ -78,6 +78,9 @@ of it. An update from outside a handler, such as a timer or a promise, is a row
   those, down to the write that started them.
 - A re-run marked **no change** produced the same value as before, so its work was wasted.
 - The eye opens the memo or effect in the reactivity graph.
+- Server-function calls the action made are listed with their status and time. Click one
+  to open it in the server-function panel. A click that only calls the server still gets a
+  row.
 
 The panel turns on the attribution engine of `solid-js` (`solid-js/attribution`) when the
 toolbar mounts, so the first action is recorded even with the dock closed. Clicks in the
diff --git a/src/dev-toolbar/functions/index.tsx b/src/dev-toolbar/functions/index.tsx
index 43477b2..364dfd8 100644
--- a/src/dev-toolbar/functions/index.tsx
+++ b/src/dev-toolbar/functions/index.tsx
@@ -1,4 +1,4 @@
-import { createMemo, createSignal, For, Loading, Show } from 'solid-js';
+import { createEffect, createMemo, createSignal, For, Loading, Show } from 'solid-js';
 import type { JSX } from '@solidjs/web';
 import { BODY_FORMAT_FILE_KEY, BODY_FORMAT_KEY, BodyFormat } from './body-format.js';
 import { Badge } from '../../ui/Badge.js';
@@ -345,6 +345,11 @@ function EmptyServerFunctions(): JSX.Element {
 
 export interface ServerFunctionViewerProps {
   instances: Record<string, ServerFunctionInstance | undefined>;
+  /**
+   * A call another panel asked to show. Pass a new object for every request,
+   * so asking for the same call twice still selects it.
+   */
+  focus?: { instance: string };
   onDeleteInstance: (value: string) => void;
   show?: boolean;
 }
@@ -352,6 +357,13 @@ export interface ServerFunctionViewerProps {
 export function ServerFunctionViewer(props: ServerFunctionViewerProps): JSX.Element {
   const [currentInstance, setCurrentInstance] = createSignal<string>();
 
+  createEffect(
+    () => props.focus,
+    (request) => {
+      if (request) setCurrentInstance(request.instance);
+    },
+  );
+
   const keys = createMemo(() => Object.keys(props.instances));
 
   return (
diff --git a/src/dev-toolbar/functions/records.ts b/src/dev-toolbar/functions/records.ts
index 19f7a35..c3a209a 100644
--- a/src/dev-toolbar/functions/records.ts
+++ b/src/dev-toolbar/functions/records.ts
@@ -26,6 +26,18 @@ export interface CallRecordsChannel {
   ): () => void;
 }
 
+/**
+ * The panel's key for each call the records showed, by the runtime's live
+ * object for the call. Other panels get the live object from the `"call"`
+ * record too, so they can point the panel at the same call.
+ */
+const shownCalls = new WeakMap<object, string>();
+
+/** The panel's key for a call, from the live object of its `"call"` record. */
+export function instanceOfCall(live: object): string | undefined {
+  return shownCalls.get(live);
+}
+
 /**
  * Feeds the server-function panel from the runtime's records. A call shows
  * up when its request is sent and completes when it settles; the two
@@ -56,12 +68,12 @@ export function connectCallRecords(
   const offCall = records.subscribe(
     'call',
     (event, live) => {
-      const instance = instances.get(live);
-      const events =
-        instance === undefined
-          ? callRecordToEvents(event, live, key(event.id))
-          : settleRecordToEvents(event, live, instance);
-      if (instance !== undefined) instances.delete(live);
+      const instance = instances.get(live) ?? key(event.id);
+      const events = instances.has(live)
+        ? settleRecordToEvents(event, live, instance)
+        : callRecordToEvents(event, live, instance);
+      instances.delete(live);
+      if (events.length) shownCalls.set(live, instance);
       for (const call of events) push(call);
     },
     { bodies: true },
diff --git a/src/dev-toolbar/index.tsx b/src/dev-toolbar/index.tsx
index a78415f..bfe9d41 100644
--- a/src/dev-toolbar/index.tsx
+++ b/src/dev-toolbar/index.tsx
@@ -282,6 +282,8 @@ export function DevToolbar(props: DevToolbarProps) {
   const [graphFocus, setGraphFocus] = createSignal<{ node: object }>();
   // The graph can ask the ownership tree to show an owner the same way.
   const [ownershipFocus, setOwnershipFocus] = createSignal<{ owner: object }>();
+  // The timeline can ask the server-function panel to show a call.
+  const [functionsFocus, setFunctionsFocus] = createSignal<{ instance: string }>();
 
   const [errors, setErrors] = createSignal<unknown[]>([]);
 
@@ -504,6 +506,10 @@ export function DevToolbar(props: DevToolbarProps) {
                     timeline.clear();
                     setTimelineEntries([]);
                   }}
+                  onViewCall={(instance) => {
+                    setFunctionsFocus({ instance });
+                    show('fn');
+                  }}
                   onViewInGraph={(node) => {
                     setGraphFocus({ node });
                     show('rx');
@@ -527,6 +533,7 @@ export function DevToolbar(props: DevToolbarProps) {
                 />
                 <ServerFunctionViewer
                   show={visible('fn')}
+                  focus={functionsFocus()}
                   instances={instances()}
                   onDeleteInstance={(value) => {
                     setInstances((current) => {
diff --git a/src/dev-toolbar/report/timeline-report.ts b/src/dev-toolbar/report/timeline-report.ts
index 9f8bb96..34cc297 100644
--- a/src/dev-toolbar/report/timeline-report.ts
+++ b/src/dev-toolbar/report/timeline-report.ts
@@ -100,6 +100,17 @@ export function timelineReport(input: TimelineReportInput): string {
     if (rest > 0) out.push(`- … ${rest} more re-runs`);
   }
 
+  if (entry.calls.length) {
+    out.push('', '## Server calls', '');
+    for (const { event } of entry.calls) {
+      const status = event.status === undefined ? 'no response' : String(event.status);
+      const outcome = event.outcome === 'ok' ? '' : ', failed';
+      out.push(
+        `- ${event.method} ${code(event.name ?? event.id)} → ${status} in ${ms(event.durationMs)}${outcome}`,
+      );
+    }
+  }
+
   if (entry.holds.length) {
     out.push('', '## Holds', '');
     for (const hold of entry.holds) {
diff --git a/src/dev-toolbar/timeline/index.tsx b/src/dev-toolbar/timeline/index.tsx
index 85a417b..a3b3763 100644
--- a/src/dev-toolbar/timeline/index.tsx
+++ b/src/dev-toolbar/timeline/index.tsx
@@ -9,7 +9,12 @@ import { EyeIcon, TrashIcon } from '../icons.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { pageRoute } from '../report/markdown.js';
 import { ms, plural, timelineReport } from '../report/timeline-report.js';
-import { isTimelineAvailable, type TimelineEntry, type TimelineRun } from './tracker.js';
+import {
+  isTimelineAvailable,
+  type TimelineCall,
+  type TimelineEntry,
+  type TimelineRun,
+} from './tracker.js';
 import './styles.css';
 
 function outcomeBadge(entry: TimelineEntry): JSX.Element {
@@ -136,12 +141,51 @@ function RunRow(props: RunRowProps): JSX.Element {
   );
 }
 
+function CallRow(props: {
+  call: TimelineCall;
+  onViewCall?: (instance: string) => void;
+}): JSX.Element {
+  const status = () =>
+    props.call.event.status === undefined ? 'ERR' : String(props.call.event.status);
+  const content = (
+    <>
+      <Badge type="info">{props.call.event.method}</Badge>
+      <Text options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}>
+        {props.call.event.name ?? props.call.event.id}
+      </Text>
+      <Badge type={props.call.event.outcome === 'ok' ? 'success' : 'failure'}>{status()}</Badge>
+      <Text data-solid-timeline-run-time options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
+        {ms(props.call.event.durationMs)}
+      </Text>
+    </>
+  );
+  return (
+    <Show
+      when={props.onViewCall && props.call.instance}
+      fallback={<span data-solid-timeline-call>{content}</span>}
+    >
+      {(current) => (
+        <button
+          type="button"
+          data-solid-timeline-call
+          title="Show in the server-function panel"
+          onClick={() => props.onViewCall?.(current())}
+        >
+          {content}
+        </button>
+      )}
+    </Show>
+  );
+}
+
 export interface TimelineViewerProps {
   show?: boolean;
   entries: TimelineEntry[];
   onClear: () => void;
   /** Opens a memo or an effect in the reactivity graph. */
   onViewInGraph?: (node: object) => void;
+  /** Opens a server-function call in its panel, by the panel's key for it. */
+  onViewCall?: (instance: string) => void;
 }
 
 export default function TimelineViewer(props: TimelineViewerProps): JSX.Element {
@@ -252,7 +296,12 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
                           </Text>
                         </span>
                         <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
-                          {`${plural(entry.writes.length, 'write')} · ${plural(runCount(entry), 're-run')} · ${ms(duration(entry))}`}
+                          {[
+                            plural(entry.writes.length, 'write'),
+                            plural(runCount(entry), 're-run'),
+                            ...(entry.calls.length ? [plural(entry.calls.length, 'call')] : []),
+                            ms(duration(entry)),
+                          ].join(' · ')}
                         </Text>
                       </button>
                     )}
@@ -359,6 +408,17 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
                       </Text>
                     </div>
 
+                    <Show when={entry().calls.length}>
+                      <div data-solid-timeline-section>
+                        <Text options={{ size: 'xs', weight: 'semibold' }}>
+                          {`Server calls (${entry().calls.length})`}
+                        </Text>
+                        <For each={entry().calls}>
+                          {(call) => <CallRow call={call} onViewCall={props.onViewCall} />}
+                        </For>
+                      </div>
+                    </Show>
+
                     <Show when={entry().holds.length}>
                       <div data-solid-timeline-section>
                         <Text options={{ size: 'xs', weight: 'semibold' }}>
diff --git a/src/dev-toolbar/timeline/styles.css b/src/dev-toolbar/timeline/styles.css
index e22325f..580fb27 100644
--- a/src/dev-toolbar/timeline/styles.css
+++ b/src/dev-toolbar/timeline/styles.css
@@ -205,6 +205,30 @@
   white-space: nowrap;
 }
 
+[data-solid-timeline-call] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 0.375rem;
+
+  padding: 0.25rem 0.375rem;
+
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  color: var(--start-dt-text);
+  text-align: left;
+}
+
+button[data-solid-timeline-call] {
+  cursor: pointer;
+}
+
+button[data-solid-timeline-call]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
 [data-solid-timeline-run] {
   display: flex;
   flex-direction: column;
diff --git a/src/dev-toolbar/timeline/tracker.test.ts b/src/dev-toolbar/timeline/tracker.test.ts
index facc2bc..74875d7 100644
--- a/src/dev-toolbar/timeline/tracker.test.ts
+++ b/src/dev-toolbar/timeline/tracker.test.ts
@@ -7,7 +7,8 @@ import type {
   RerunEvent,
 } from 'solid-js/attribution';
 import { timelineReport } from '../report/timeline-report.js';
-import { rootChanges, TimelineBuilder } from './tracker.js';
+import type { CallEvent } from '@solidjs/web';
+import { callInteraction, rootChanges, TimelineBuilder } from './tracker.js';
 
 const click: ChangeOrigin = {
   kind: 'interaction',
@@ -170,6 +171,64 @@ describe('TimelineBuilder', () => {
   });
 });
 
+function call(over: Partial<CallEvent> = {}): CallEvent {
+  return {
+    id: 'load-user',
+    name: 'loadUser',
+    at: 105,
+    durationMs: 40,
+    method: 'POST',
+    outcome: 'ok',
+    status: 200,
+    origin: click,
+    ...over,
+  };
+}
+
+describe('callInteraction', () => {
+  it('finds the interaction behind the frame a call was made in', () => {
+    expect(callInteraction(click)).toBe(click);
+    expect(callInteraction({ kind: 'effect', name: 'sync', interaction: click })).toBe(click);
+    expect(callInteraction({ kind: 'external' })).toBeUndefined();
+    expect(callInteraction(undefined)).toBeUndefined();
+  });
+});
+
+describe('TimelineBuilder calls', () => {
+  it('puts a call under the interaction that made it', () => {
+    const builder = new TimelineBuilder();
+    builder.rerun(rerun({}), undefined);
+    builder.call(
+      call({ origin: { kind: 'effect', name: 'sync', interaction: click } }),
+      'load-user#1',
+    );
+    const [entry] = builder.snapshot();
+    expect(entry!.calls).toEqual([
+      expect.objectContaining({
+        instance: 'load-user#1',
+        event: expect.objectContaining({ name: 'loadUser' }),
+      }),
+    ]);
+  });
+
+  it('keeps a click that only called the server', () => {
+    const builder = new TimelineBuilder();
+    builder.interaction(interaction({ writes: 0, runs: 0, outcome: 'idle' }));
+    expect(builder.snapshot()).toHaveLength(0);
+
+    builder.call(call(), 'load-user#1');
+    const [entry] = builder.snapshot();
+    expect(entry!.interaction?.outcome).toBe('idle');
+    expect(entry!.calls).toHaveLength(1);
+  });
+
+  it('leaves calls no interaction made to the server-function panel', () => {
+    const builder = new TimelineBuilder();
+    builder.call(call({ origin: undefined }), undefined);
+    expect(builder.snapshot()).toHaveLength(0);
+  });
+});
+
 describe('timelineReport', () => {
   it('lists the writes and each re-run with its causes', () => {
     const builder = new TimelineBuilder();
@@ -191,6 +250,20 @@ describe('timelineReport', () => {
     );
   });
 
+  it('lists the server calls of the action', () => {
+    const builder = new TimelineBuilder();
+    builder.rerun(rerun({}), undefined);
+    builder.call(call(), undefined);
+    builder.call(
+      call({ name: 'save', outcome: 'error', status: undefined, durationMs: 12 }),
+      undefined,
+    );
+    const report = timelineReport({ entry: builder.snapshot()[0]!, route: '/' });
+    expect(report).toContain(
+      '## Server calls\n\n- POST `loadUser` → 200 in 40.0ms\n- POST `save` → no response in 12.0ms, failed',
+    );
+  });
+
   it('hides the values of a write with a sensitive name', () => {
     const builder = new TimelineBuilder();
     const secret: ChangeRecord = { ...write, name: 'authToken', prev: 'a', value: 'b' };
diff --git a/src/dev-toolbar/timeline/tracker.ts b/src/dev-toolbar/timeline/tracker.ts
index 81430a8..db17e2e 100644
--- a/src/dev-toolbar/timeline/tracker.ts
+++ b/src/dev-toolbar/timeline/tracker.ts
@@ -1,4 +1,6 @@
+import type { CallEvent } from '@solidjs/web';
 import { OBSERVE } from 'solid-js';
+import { instanceOfCall } from '../functions/records.js';
 import {
   attribution,
   formatOrigin,
@@ -21,6 +23,13 @@ export interface TimelineRun {
   effectMs: number | undefined;
 }
 
+/** One server-function call the action made. */
+export interface TimelineCall {
+  event: CallEvent;
+  /** The server-function panel's key for the call, so the panel can show it. */
+  instance: string | undefined;
+}
+
 /**
  * What one user action, or one update from outside the app's handlers, made
  * the app do: the writes it started with and every re-run they caused.
@@ -48,6 +57,7 @@ export interface TimelineEntry {
   flushMs: number;
   holds: HoldEvent[];
   navigations: NavigationEvent[];
+  calls: TimelineCall[];
 }
 
 /** Most entries the panel keeps. The oldest go first. */
@@ -55,6 +65,16 @@ export const MAX_ENTRIES = 100;
 /** Most re-runs one entry keeps. */
 export const MAX_RUNS = 300;
 
+/**
+ * The interaction a call ran for. A call made by a handler carries the
+ * interaction itself. One made for an effect, a navigation or a landing
+ * carries that frame, which names the interaction behind it.
+ */
+export function callInteraction(origin: ChangeOrigin | undefined): ChangeOrigin | undefined {
+  if (!origin) return undefined;
+  return origin.kind === 'interaction' ? origin : origin.interaction;
+}
+
 /** The writes, landings and refreshes a cause chain bottoms out in. */
 export function rootChanges(causes: ChangeRecord[], out = new Map<number, ChangeRecord>()) {
   for (const cause of causes) {
@@ -82,6 +102,11 @@ export class TimelineBuilder {
   /** The entry collecting re-runs that no interaction caused, until its flush ends. */
   private external: TimelineEntry | undefined;
   private changed = new Set<TimelineEntry>();
+  /**
+   * Interactions that changed nothing, kept aside. A click that only calls
+   * the server looks idle when its record arrives, and its call settles later.
+   */
+  private idle = new WeakMap<ChangeOrigin, InteractionEvent>();
 
   constructor(private readonly max = MAX_ENTRIES) {}
 
@@ -99,6 +124,7 @@ export class TimelineBuilder {
       flushMs: 0,
       holds: [],
       navigations: [],
+      calls: [],
     };
     this.entries.unshift(entry);
     for (const dropped of this.entries.splice(this.max)) {
@@ -160,7 +186,10 @@ export class TimelineBuilder {
   interaction(event: InteractionEvent): void {
     // A click on something that reads no state, such as the devtools themselves.
     const idle = !event.writes && !event.runs && !event.created && !event.holds.length;
-    if (idle && !this.byOrigin.has(event.origin)) return;
+    if (idle && !this.byOrigin.has(event.origin)) {
+      this.idle.set(event.origin, event);
+      return;
+    }
     const entry = this.entryFor(event.origin, event.at);
     entry.interaction = event;
     entry.at = event.at;
@@ -173,6 +202,23 @@ export class TimelineBuilder {
     this.touch(entry);
   }
 
+  /**
+   * A server-function call joins the action it ran for. A call that no
+   * interaction made is left to the server-function panel.
+   */
+  call(event: CallEvent, instance: string | undefined): void {
+    const origin = callInteraction(event.origin);
+    if (!origin) return;
+    const entry = this.entryFor(origin, event.at);
+    const idle = this.idle.get(origin);
+    if (idle && !entry.interaction) {
+      entry.interaction = idle;
+      entry.at = idle.at;
+    }
+    entry.calls.push({ event, instance });
+    this.touch(entry);
+  }
+
   navigation(event: NavigationEvent): void {
     const entry = this.entryFor(event.interaction ?? event.origin, event.at);
     entry.navigations.push(event);
@@ -193,6 +239,7 @@ export class TimelineBuilder {
         runs: entry.runs.slice(),
         holds: entry.holds.slice(),
         navigations: entry.navigations.slice(),
+        calls: entry.calls.slice(),
       };
       // Later records find the entry through its origin, so they reach the copy.
       if (copy.origin) this.byOrigin.set(copy.origin, copy);
@@ -206,6 +253,7 @@ export class TimelineBuilder {
   clear(): void {
     this.entries = [];
     this.byOrigin = new WeakMap();
+    this.idle = new WeakMap();
     this.external = undefined;
     this.changed.clear();
   }
@@ -259,6 +307,13 @@ export function startTimeline(builder: TimelineBuilder, onChange: () => void): (
       builder.navigation(event);
       changed();
     }),
+    records.subscribe('call', (event, live) => {
+      // The server-function panel listens from the moment the package loads, so
+      // it has given the call its key by now. The live object itself is not
+      // kept, since nothing else holds it once the call settled.
+      builder.call(event, instanceOfCall(live));
+      changed();
+    }),
   ];
   // The console log stays off: the panel is where the re-runs are read.
   const release = attribution.enable({ log: false, values: 'full' });
diff --git a/tests/e2e/devtools.spec.ts b/tests/e2e/devtools.spec.ts
index b01dd1d..b40a7d5 100644
--- a/tests/e2e/devtools.spec.ts
+++ b/tests/e2e/devtools.spec.ts
@@ -534,6 +534,28 @@ test('shows what each action re-ran and why', async ({ page }) => {
   await expect(page.locator('[data-solid-reactivity-detail]')).toContainText('doubled');
 });
 
+test('lists the server calls of an action and opens them', async ({ page }) => {
+  await page.goto('/');
+  // The handler writes nothing, so the call is all the click did.
+  await page.locator('#call-server').click();
+
+  await openTab(page, 'Timeline');
+  const row = page.locator('[data-solid-timeline-row]').filter({ hasText: 'button#call-server' });
+  await expect(row).toContainText('1 call');
+  await row.click();
+
+  const call = page.locator('[data-solid-timeline-call]');
+  await expect(call).toContainText('loadUser');
+  await expect(call).toContainText('200');
+  await call.click();
+
+  await expect(page.getByRole('tab', { name: 'Server functions', exact: true })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+  await expect(page.locator('[data-solid-function-instance-viewer]')).toContainText('loadUser');
+});
+
 test('copies reports for an agent', async ({ page, context }) => {
   await context.grantPermissions(['clipboard-read', 'clipboard-write']);
   const clipboard = () => page.evaluate(() => navigator.clipboard.readText());
diff --git a/tests/fixture/app.tsx b/tests/fixture/app.tsx
index a1d86c7..cb4dd4d 100644
--- a/tests/fixture/app.tsx
+++ b/tests/fixture/app.tsx
@@ -1,6 +1,6 @@
 import { render } from '@solidjs/web';
 import { DevToolbar, mountDevToolbar, pushServerFunctionCall } from '@solidjs/start-devtools';
-import { createEffect, createMemo, createSignal, Show } from 'solid-js';
+import { createEffect, createMemo, createSignal, OBSERVE, Show } from 'solid-js';
 
 function Broken(): never {
   throw new Error('client boom');
@@ -32,6 +32,34 @@ function emitServerFunctionResponse() {
   responseStatus = 500;
 }
 
+// A call record as the runtime sends it once a call settles. The handler
+// writes nothing, so the call is all the click did.
+function callServer() {
+  const origin = OBSERVE?.attribution.currentOrigin();
+  const at = performance.now();
+  const request = new Request('/_server', { method: 'POST', body: '[1]' });
+  setTimeout(() => {
+    OBSERVE?.records.emit(
+      'call',
+      {
+        id: 'load-user',
+        name: 'loadUser',
+        at,
+        durationMs: performance.now() - at,
+        method: 'POST',
+        outcome: 'ok',
+        status: 200,
+        origin,
+      },
+      {
+        args: [1],
+        request,
+        response: new Response('{"id":1}', { headers: { 'content-type': 'application/json' } }),
+      } as never,
+    );
+  }, 40);
+}
+
 // Reads a signal in its body, outside any tracking scope, which the runtime
 // reports as a warning.
 function DraftReader() {
@@ -78,6 +106,9 @@ function App() {
       <button id="emit-server-function-response" onClick={emitServerFunctionResponse}>
         emit server function response
       </button>
+      <button id="call-server" onClick={callServer}>
+        call server
+      </button>
       <button id="emit-warning" onClick={() => setWriter((value) => !value)}>
         emit warning
       </button>

From e28a462da62524779395b78cc4c8926ad7e9af5c Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Sat, 24 Oct 2026 22:11:31 +0800
Subject: [PATCH 3/3] fix(timeline): hide updates that only touched unnamed
 signals

- Updates no action caused, whose writes all went to unnamed signals or that wrote nothing, come mostly from Solid's own state, such as a Show condition or a Loading boundary settling. They pushed real actions down the list.
- They are hidden by default. A button above the list shows how many there are and brings them back, since an app's own unnamed signal looks the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md                                |  3 +++
 src/dev-toolbar/timeline/index.tsx       | 24 ++++++++++++++++++++++--
 src/dev-toolbar/timeline/styles.css      | 19 +++++++++++++++++++
 src/dev-toolbar/timeline/tracker.test.ts | 24 +++++++++++++++++++++++-
 src/dev-toolbar/timeline/tracker.ts      | 14 ++++++++++++++
 5 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 19b9fcb..e562bd0 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,9 @@ of it. An update from outside a handler, such as a timer or a promise, is a row
 - Server-function calls the action made are listed with their status and time. Click one
   to open it in the server-function panel. A click that only calls the server still gets a
   row.
+- Updates no action caused whose writes all went to unnamed signals are hidden, since most
+  come from Solid's own state, such as a `<Show>` condition. The button above the list shows
+  how many there are and brings them back.
 
 The panel turns on the attribution engine of `solid-js` (`solid-js/attribution`) when the
 toolbar mounts, so the first action is recorded even with the dock closed. Clicks in the
diff --git a/src/dev-toolbar/timeline/index.tsx b/src/dev-toolbar/timeline/index.tsx
index a3b3763..32a5e9e 100644
--- a/src/dev-toolbar/timeline/index.tsx
+++ b/src/dev-toolbar/timeline/index.tsx
@@ -11,6 +11,7 @@ import { pageRoute } from '../report/markdown.js';
 import { ms, plural, timelineReport } from '../report/timeline-report.js';
 import {
   isTimelineAvailable,
+  isUnnamedUpdate,
   type TimelineCall,
   type TimelineEntry,
   type TimelineRun,
@@ -190,13 +191,19 @@ export interface TimelineViewerProps {
 
 export default function TimelineViewer(props: TimelineViewerProps): JSX.Element {
   const [query, setQuery] = createSignal('');
+  const [showUnnamed, setShowUnnamed] = createSignal(false);
   const [selected, setSelected] = createSignal<number>();
   const [openRuns, setOpenRuns] = createSignal<number[]>([]);
 
+  const unnamedCount = createMemo(() => props.entries.filter(isUnnamedUpdate).length);
+
   const shown = createMemo(() => {
     const search = query().trim().toLowerCase();
-    if (!search) return props.entries;
-    return props.entries.filter(
+    const entries = showUnnamed()
+      ? props.entries
+      : props.entries.filter((entry) => !isUnnamedUpdate(entry));
+    if (!search) return entries;
+    return entries.filter(
       (entry) =>
         entry.label.toLowerCase().includes(search) ||
         entry.writes.some((write) => write.name.toLowerCase().includes(search)) ||
@@ -232,6 +239,19 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
               value={query()}
               onInput={(event) => setQuery(event.currentTarget.value)}
             />
+            <Show when={unnamedCount()}>
+              <button
+                type="button"
+                data-solid-timeline-unnamed
+                aria-pressed={showUnnamed() ? 'true' : 'false'}
+                title="Updates no action caused, whose writes all went to unnamed signals"
+                onClick={() => setShowUnnamed((current) => !current)}
+              >
+                <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>
+                  {`${showUnnamed() ? 'Hide' : 'Show'} ${plural(unnamedCount(), 'unnamed update')}`}
+                </Text>
+              </button>
+            </Show>
             <div data-solid-timeline-nav-actions>
               <Text data-solid-timeline-count options={{ size: 'xs', font: 'mono' }}>
                 {`${shown().length} of ${props.entries.length}`}
diff --git a/src/dev-toolbar/timeline/styles.css b/src/dev-toolbar/timeline/styles.css
index 580fb27..9537423 100644
--- a/src/dev-toolbar/timeline/styles.css
+++ b/src/dev-toolbar/timeline/styles.css
@@ -45,6 +45,25 @@
   border-color: var(--start-dt-accent);
 }
 
+[data-solid-timeline-unnamed] {
+  padding: 0.1875rem 0.5rem;
+
+  border-radius: 9999px;
+  border: var(--start-dt-border) 1px solid;
+  background: var(--start-dt-surface);
+  color: var(--start-dt-text-muted);
+
+  cursor: pointer;
+}
+
+[data-solid-timeline-unnamed]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
+[data-solid-timeline-unnamed][aria-pressed='true'] {
+  color: var(--start-dt-text);
+}
+
 [data-solid-timeline-nav-actions] {
   display: flex;
   flex-direction: row;
diff --git a/src/dev-toolbar/timeline/tracker.test.ts b/src/dev-toolbar/timeline/tracker.test.ts
index 74875d7..1c56905 100644
--- a/src/dev-toolbar/timeline/tracker.test.ts
+++ b/src/dev-toolbar/timeline/tracker.test.ts
@@ -8,7 +8,7 @@ import type {
 } from 'solid-js/attribution';
 import { timelineReport } from '../report/timeline-report.js';
 import type { CallEvent } from '@solidjs/web';
-import { callInteraction, rootChanges, TimelineBuilder } from './tracker.js';
+import { callInteraction, isUnnamedUpdate, rootChanges, TimelineBuilder } from './tracker.js';
 
 const click: ChangeOrigin = {
   kind: 'interaction',
@@ -229,6 +229,28 @@ describe('TimelineBuilder calls', () => {
   });
 });
 
+describe('isUnnamedUpdate', () => {
+  it('marks updates no action caused that wrote only unnamed signals, or nothing', () => {
+    const builder = new TimelineBuilder();
+    const unnamed: ChangeRecord = {
+      ...write,
+      seq: 20,
+      name: 'signal',
+      origin: { kind: 'external' },
+    };
+    const named: ChangeRecord = { ...write, seq: 21, name: 'clock', origin: { kind: 'external' } };
+    builder.rerun(rerun({ run: 1, interaction: undefined, causes: [unnamed] }), undefined);
+    builder.flush(flush());
+    builder.rerun(rerun({ run: 2, interaction: undefined, causes: [] }), undefined);
+    builder.flush(flush());
+    builder.rerun(rerun({ run: 3, interaction: undefined, causes: [named] }), undefined);
+    builder.flush(flush());
+    builder.rerun(rerun({ run: 4, causes: [{ ...unnamed, seq: 22, origin: click }] }), undefined);
+
+    expect(builder.snapshot().map(isUnnamedUpdate)).toEqual([false, false, true, true]);
+  });
+});
+
 describe('timelineReport', () => {
   it('lists the writes and each re-run with its causes', () => {
     const builder = new TimelineBuilder();
diff --git a/src/dev-toolbar/timeline/tracker.ts b/src/dev-toolbar/timeline/tracker.ts
index db17e2e..da2863c 100644
--- a/src/dev-toolbar/timeline/tracker.ts
+++ b/src/dev-toolbar/timeline/tracker.ts
@@ -84,6 +84,20 @@ export function rootChanges(causes: ChangeRecord[], out = new Map<number, Change
   return out;
 }
 
+/** The names the runtime gives a signal or a memo created without a `name` option. */
+const DEFAULT_NAMES = new Set(['signal', 'computed', 'memo']);
+
+/**
+ * An update no action caused whose writes all went to unnamed signals, or
+ * that wrote nothing. Most come from the runtime's own state, such as the
+ * condition of a `<Show>` or a `<Loading>` boundary settling, so the panel
+ * hides them unless asked. An app's own unnamed signal looks the same, which
+ * is why they are hidden and not dropped.
+ */
+export function isUnnamedUpdate(entry: TimelineEntry): boolean {
+  return !entry.origin && entry.writes.every((write) => DEFAULT_NAMES.has(write.name));
+}
+
 function externalLabel(writes: ChangeRecord[]): string {
   const origin = writes.find((write) => write.origin)?.origin;
   const source = origin && origin.kind !== 'external' ? formatOrigin(origin) : 'update';