From db6e0c0e80af86859c30fa3db4cb3d65180cb6c7 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 10:38:31 +0800
Subject: [PATCH 01/10] feat(dock): group the panels into Health, Activity and
 Structure views

The dock header switches between three views instead of a sidebar of seven
tabs. Health lists thrown errors and runtime issues together, with the
selected entry beside the list. Activity holds Timeline, Async and Server
functions, and Structure holds Ownership and Reactivity.

The header and pull tab show the solid-js version instead of the toolbar's
title and version. The error panel lists frames beside the source, folds
library frames and opens frames in the editor. The timeline folds runs of
the same action. Every list and detail split uses the resize handle.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/dock-three-views.md              |  10 +
 README.md                                   |  10 +-
 src/dev-toolbar/async/index.tsx             |   6 +-
 src/dev-toolbar/async/styles.css            |   5 +-
 src/dev-toolbar/error-viewer/frames.test.ts |  81 +++
 src/dev-toolbar/error-viewer/frames.ts      |  99 ++++
 src/dev-toolbar/error-viewer/index.tsx      | 317 ++++++++----
 src/dev-toolbar/error-viewer/styles.css     | 115 ++++-
 src/dev-toolbar/functions/index.tsx         |   9 +-
 src/dev-toolbar/functions/styles.css        |  14 +-
 src/dev-toolbar/health/index.tsx            | 251 ++++++++++
 src/dev-toolbar/health/styles.css           |  82 ++++
 src/dev-toolbar/index.css                   | 182 ++-----
 src/dev-toolbar/index.tsx                   | 516 +++++++++++---------
 src/dev-toolbar/issues/index.tsx            | 426 ++++++----------
 src/dev-toolbar/issues/styles.css           |   4 +-
 src/dev-toolbar/reactivity/index.tsx        |  19 +
 src/dev-toolbar/reactivity/styles.css       |  31 ++
 src/dev-toolbar/timeline/group.test.ts      |  62 +++
 src/dev-toolbar/timeline/group.ts           |  76 +++
 src/dev-toolbar/timeline/index.tsx          | 174 +++++--
 src/dev-toolbar/timeline/styles.css         |  26 +-
 tests/e2e/devtools.spec.ts                  |  66 +--
 23 files changed, 1743 insertions(+), 838 deletions(-)
 create mode 100644 .changeset/dock-three-views.md
 create mode 100644 src/dev-toolbar/error-viewer/frames.test.ts
 create mode 100644 src/dev-toolbar/error-viewer/frames.ts
 create mode 100644 src/dev-toolbar/health/index.tsx
 create mode 100644 src/dev-toolbar/health/styles.css
 create mode 100644 src/dev-toolbar/timeline/group.test.ts
 create mode 100644 src/dev-toolbar/timeline/group.ts

diff --git a/.changeset/dock-three-views.md b/.changeset/dock-three-views.md
new file mode 100644
index 0000000..e1426f2
--- /dev/null
+++ b/.changeset/dock-three-views.md
@@ -0,0 +1,10 @@
+---
+'@solidjs/start-devtools': minor
+---
+
+- The dock groups its panels into three views: Health (errors and runtime issues in one list), Activity (Timeline, Async and Server functions) and Structure (Ownership and Reactivity).
+- The header and the pull tab show the `solid-js` version the app runs, in place of the toolbar's title and version. The pull tab also counts issues.
+- The error panel lists stack frames beside the source, folds frames from libraries, and opens the selected frame in the editor.
+- The Timeline folds runs of the same action into one row with a count.
+- The detail panes of Health, Timeline, Async and Server functions, and the split between stack frames and source, are resizable.
+- Picking an element with the inspector opens it in the ownership tree. The Reactivity graph shows the component filter the pick sets, with a button to clear it.
diff --git a/README.md b/README.md
index 41e6258..59b18eb 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,15 @@ pnpm add @solidjs/start-devtools@next
 The toolbar is a dock at the bottom of the page. Closed, it is a small grip at the bottom
 center. Click it, drag it up, or press Alt+Shift+D to open it. Drag its top edge to change
 its height. It remembers whether it was open, its tab and its height across reloads, and an
-error opens it on the Errors tab.
+error opens it on the Health view.
+
+The panels are grouped into three views, picked in the header:
+
+- **Health**: thrown errors and the issues the runtime reports, in one list.
+- **Activity**: the Timeline, Async and Server functions panels.
+- **Structure**: the Ownership tree and the Reactivity graph.
+
+The header and the pull tab show the `solid-js` version the app runs.
 
 The Vite plugin mounts it automatically. Integrations can use the package directly:
 
diff --git a/src/dev-toolbar/async/index.tsx b/src/dev-toolbar/async/index.tsx
index 00053f6..cbad6a7 100644
--- a/src/dev-toolbar/async/index.tsx
+++ b/src/dev-toolbar/async/index.tsx
@@ -3,7 +3,9 @@ import { createEffect, createMemo, createSignal, For, getOwner, onCleanup, Show
 import { Badge } from '../../ui/Badge.js';
 import IconButton from '../../ui/IconButton.js';
 import Placeholder from '../../ui/Placeholder.js';
+import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
 import { EyeIcon, TrashIcon, TreeIcon } from '../icons.js';
 import {
   excludeReactiveOwner,
@@ -51,6 +53,7 @@ export interface AsyncViewerProps {
 }
 
 export default function AsyncViewer(props: AsyncViewerProps): JSX.Element {
+  const detail = useResizableDetail({ storageKey: 'solid-start-devtools:async-detail-width' });
   // The live list reads the graph, which must not list the panel's own nodes.
   excludeReactiveOwner(getOwner());
 
@@ -292,7 +295,8 @@ export default function AsyncViewer(props: AsyncViewerProps): JSX.Element {
                       : undefined;
                   };
                   return (
-                    <aside data-solid-async-detail>
+                    <aside data-solid-async-detail style={{ width: `${detail.width()}px` }}>
+                      <ResizeHandle detail={detail} />
                       <div data-solid-async-detail-head>
                         <span data-solid-async-type={record().type}>{record().type}</span>
                         <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
diff --git a/src/dev-toolbar/async/styles.css b/src/dev-toolbar/async/styles.css
index 329319f..2db356b 100644
--- a/src/dev-toolbar/async/styles.css
+++ b/src/dev-toolbar/async/styles.css
@@ -285,7 +285,10 @@
 
   gap: 0.625rem;
 
-  width: 24rem;
+  position: relative;
+
+  /* Keeps the list usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
   flex-shrink: 0;
   min-height: 0;
 
diff --git a/src/dev-toolbar/error-viewer/frames.test.ts b/src/dev-toolbar/error-viewer/frames.test.ts
new file mode 100644
index 0000000..4a152f0
--- /dev/null
+++ b/src/dev-toolbar/error-viewer/frames.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest';
+import { editorLocation, foldLibraryFrames, isLibraryFile, pickDefaultFrame } from './frames.js';
+
+describe('isLibraryFile', () => {
+  it('flags node_modules, solid-js, @solidjs and the devtools', () => {
+    expect(isLibraryFile('http://localhost:3000/node_modules/.vite/deps/x.js?v=1')).toBe(true);
+    expect(isLibraryFile('/proj/node_modules/solid-js/dist/dev.js')).toBe(true);
+    expect(isLibraryFile('http://localhost/@fs/proj/node_modules/@solidjs/web/dist/web.js')).toBe(
+      true,
+    );
+    expect(isLibraryFile('/proj/packages/solid-js/src/index.ts')).toBe(true);
+    expect(isLibraryFile('/proj/node_modules/@solidjs/start-devtools/dist/index.js')).toBe(true);
+  });
+
+  it('keeps app files and unknown files', () => {
+    expect(isLibraryFile('http://localhost:3000/src/app.tsx')).toBe(false);
+    expect(isLibraryFile('/proj/src/solid-js-notes.ts')).toBe(false);
+    expect(isLibraryFile(undefined)).toBe(false);
+  });
+});
+
+describe('foldLibraryFrames', () => {
+  const app = (name: string) => ({ file: `/src/${name}.tsx` });
+  const lib = (name: string) => ({ file: `/node_modules/${name}/index.js` });
+
+  it('folds each run of library frames', () => {
+    const frames = [app('a'), lib('x'), lib('y'), app('b'), lib('z')];
+    const segments = foldLibraryFrames(frames);
+    expect(segments.map((s) => s.type)).toEqual(['frame', 'fold', 'frame', 'fold']);
+    const first = segments[1]!;
+    expect(first.type === 'fold' && first.frames).toEqual([frames[1], frames[2]]);
+    expect(first.type === 'fold' && first.id).toBe(1);
+  });
+
+  it('shows everything when all frames are library frames', () => {
+    const segments = foldLibraryFrames([lib('x'), lib('y')]);
+    expect(segments.map((s) => s.type)).toEqual(['frame', 'frame']);
+  });
+
+  it('shows everything when none is a library frame', () => {
+    expect(foldLibraryFrames([app('a'), app('b')]).map((s) => s.type)).toEqual(['frame', 'frame']);
+  });
+});
+
+describe('pickDefaultFrame', () => {
+  it('picks the first app frame, else the first frame', () => {
+    const lib = { file: '/node_modules/x/i.js' };
+    const app = { file: '/src/a.tsx' };
+    expect(pickDefaultFrame([lib, app])).toBe(app);
+    expect(pickDefaultFrame([lib])).toBe(lib);
+    expect(pickDefaultFrame([])).toBeUndefined();
+  });
+});
+
+describe('editorLocation', () => {
+  it('turns a served url into a root-relative location', () => {
+    expect(
+      editorLocation({ source: 'http://localhost:3000/src/app.tsx?t=1', line: 4, column: 7 }),
+    ).toBe('src/app.tsx:4:7');
+  });
+
+  it('keeps absolute file system paths', () => {
+    expect(editorLocation({ source: '/@fs/Users/me/app.tsx', line: 2, column: 1 })).toBe(
+      '/Users/me/app.tsx:2:1',
+    );
+    expect(editorLocation({ source: 'file:///Users/me/app.tsx', line: 2 })).toBe(
+      '/Users/me/app.tsx:2',
+    );
+  });
+
+  it('drops leading ../ from source map paths', () => {
+    expect(editorLocation({ source: '../../src/app.tsx', line: 9, column: 3 })).toBe(
+      'src/app.tsx:9:3',
+    );
+  });
+
+  it('is undefined without a file or line', () => {
+    expect(editorLocation({ source: '', line: 1 })).toBeUndefined();
+    expect(editorLocation({ source: 'a.ts' })).toBeUndefined();
+  });
+});
diff --git a/src/dev-toolbar/error-viewer/frames.ts b/src/dev-toolbar/error-viewer/frames.ts
new file mode 100644
index 0000000..bec4e56
--- /dev/null
+++ b/src/dev-toolbar/error-viewer/frames.ts
@@ -0,0 +1,99 @@
+/** A run of consecutive frames, shown as is or folded behind one row. */
+export type FrameSegment<T> =
+  | { type: 'frame'; frame: T }
+  | { type: 'fold'; id: number; frames: T[] };
+
+const LIBRARY_PATTERNS = [
+  /[\\/]node_modules[\\/]/,
+  /[\\/]\.vite[\\/]deps[\\/]/,
+  /[\\/]solid-js(?:[\\/]|$)/,
+  /[\\/]@solidjs[\\/]/,
+  /[\\/]start-devtools[\\/]/,
+  /[\\/]solid-start-devtools[\\/]/,
+];
+
+/** Whether a frame's file belongs to a library or to the devtools instead of the app. */
+export function isLibraryFile(file: string | undefined): boolean {
+  if (!file) return false;
+  // Drop the query so `?v=abc` cannot hide a match.
+  const path = file.split('?')[0]!;
+  for (const pattern of LIBRARY_PATTERNS) {
+    if (pattern.test(path)) return true;
+  }
+  return false;
+}
+
+/**
+ * Groups frames into rows. Each run of library frames becomes one fold row.
+ * When every frame is a library frame, or none is, nothing folds.
+ */
+export function foldLibraryFrames<T extends { file?: string }>(frames: T[]): FrameSegment<T>[] {
+  const library: boolean[] = [];
+  let libraryCount = 0;
+  for (const frame of frames) {
+    const isLibrary = isLibraryFile(frame.file);
+    library.push(isLibrary);
+    if (isLibrary) libraryCount++;
+  }
+
+  const segments: FrameSegment<T>[] = [];
+  if (libraryCount === 0 || libraryCount === frames.length) {
+    for (const frame of frames) segments.push({ type: 'frame', frame });
+    return segments;
+  }
+
+  let run: T[] = [];
+  let runStart = 0;
+  for (let i = 0; i < frames.length; i++) {
+    const frame = frames[i]!;
+    if (library[i]) {
+      if (run.length === 0) runStart = i;
+      run.push(frame);
+      continue;
+    }
+    if (run.length > 0) {
+      segments.push({ type: 'fold', id: runStart, frames: run });
+      run = [];
+    }
+    segments.push({ type: 'frame', frame });
+  }
+  if (run.length > 0) segments.push({ type: 'fold', id: runStart, frames: run });
+  return segments;
+}
+
+/** The frame the panel opens on: the first one from the app, else the first one. */
+export function pickDefaultFrame<T extends { file?: string }>(frames: T[]): T | undefined {
+  for (const frame of frames) {
+    if (!isLibraryFile(frame.file)) return frame;
+  }
+  return frames[0];
+}
+
+/**
+ * The `file:line:column` the dev server's open-in-editor endpoint expects.
+ * `undefined` when the frame has no file or line.
+ */
+export function editorLocation(source: {
+  source?: string;
+  line?: number;
+  column?: number;
+}): string | undefined {
+  const raw = source.source;
+  if (!raw || !source.line) return undefined;
+
+  // Reduce the source to a path the dev server can find.
+  let path = raw.split('?')[0]!;
+  if (path.startsWith('file://')) {
+    path = path.slice('file://'.length);
+  } else if (/^https?:\/\//.test(path)) {
+    // A served file is relative to the project root, not the origin.
+    path = path.replace(/^https?:\/\/[^/]+\/?/, '');
+  }
+  if (path.startsWith('/@fs/')) path = '/' + path.slice('/@fs/'.length).replace(/^\/+/, '');
+  // Source maps point to files with `../` segments that only mean something to the bundler.
+  path = path.replace(/^(\.\.?\/)+/, '');
+  if (!path) return undefined;
+
+  const column = source.column ? `:${source.column}` : '';
+  return `${path}:${source.line}${column}`;
+}
diff --git a/src/dev-toolbar/error-viewer/index.tsx b/src/dev-toolbar/error-viewer/index.tsx
index 3e0e7f3..8e9520b 100644
--- a/src/dev-toolbar/error-viewer/index.tsx
+++ b/src/dev-toolbar/error-viewer/index.tsx
@@ -3,10 +3,12 @@ import { parse as parseErrorStack, type StackFrameLite } from 'error-stack-parse
 import * as htmlToImage from 'html-to-image';
 import type { JSX } from '@solidjs/web';
 import { Errored, For, Loading, Show, createMemo, createSignal } from 'solid-js';
+import Button from '../../ui/Button.js';
 import IconButton from '../../ui/IconButton.js';
 import Placeholder from '../../ui/Placeholder.js';
-import { Select, SelectOption } from '../../ui/Select.js';
+import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -17,12 +19,14 @@ import {
   ViewCompiledIcon,
   ViewOriginalIcon,
 } from '../icons.js';
+import { openInEditor } from '../open-in-editor.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { errorReport, resolveErrorFrames } from '../report/error-report.js';
 import { pageRoute } from '../report/markdown.js';
 import { CodeView } from './CodeView.js';
 import { createStackFrame, type StackFrameSource } from './create-stack-frame.js';
 import download from './download.js';
+import { editorLocation, foldLibraryFrames, pickDefaultFrame } from './frames.js';
 import './styles.css';
 
 export function classNames(...classes: (string | boolean | undefined)[]): string {
@@ -56,11 +60,6 @@ function ErrorInfo(props: ErrorInfoProps): JSX.Element {
   );
 }
 
-interface StackFramesContentProps {
-  error: Error;
-  isCompiled: boolean;
-}
-
 function getFileName(source: string): string {
   try {
     const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
@@ -85,94 +84,219 @@ function CodeFallback(): JSX.Element {
   );
 }
 
-interface RawStackFrameOptionProps {
-  frame: StackFrameLite;
+interface FrameButtonProps {
+  name: string | undefined;
+  file: string;
+  selected: boolean;
   disabled?: boolean;
+  onSelect: () => void;
+}
+
+function FrameButton(props: FrameButtonProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      data-solid-error-viewer-stack-frame
+      data-selected={props.selected ? '' : undefined}
+      aria-current={props.selected ? 'true' : undefined}
+      disabled={props.disabled}
+      onClick={props.onSelect}
+    >
+      <span data-solid-error-viewer-stack-frame-function>{props.name ?? '<anonymous>'}</span>
+      <span data-solid-error-viewer-stack-frame-file>{props.file}</span>
+    </button>
+  );
+}
+
+interface FrameOptionProps {
+  frame: StackFrameLite;
+  isCompiled: boolean;
+  selected: boolean;
+  onSelect: (frame: StackFrameLite) => void;
 }
 
 // Frame rendered from the raw (unmapped) stack info — used while the source
 // is loading or when it is unreachable, so the frame never vanishes from
 // the list.
-function RawStackFrameOption(props: RawStackFrameOptionProps): JSX.Element {
-  const fileName = () => props.frame.file;
+function rawFrameFile(frame: StackFrameLite): string {
+  if (!frame.file) return '<unknown source>';
+  return getFilePath({
+    source: frame.file,
+    content: '',
+    line: frame.line!,
+    column: frame.col!,
+    name: frame.function,
+  });
+}
+
+function FrameOption(props: FrameOptionProps): JSX.Element {
+  function select() {
+    props.onSelect(props.frame);
+  }
+  function raw(disabled?: boolean) {
+    return (
+      <FrameButton
+        name={props.frame.function}
+        file={rawFrameFile(props.frame)}
+        selected={props.selected}
+        disabled={disabled}
+        onSelect={select}
+      />
+    );
+  }
+
+  return (
+    <Errored fallback={raw(true)}>
+      {(() => {
+        const data = createStackFrame(props.frame, () => props.isCompiled);
+        return (
+          <Loading fallback={raw()}>
+            <Show when={data()} keyed fallback={raw()}>
+              {(source) => (
+                <FrameButton
+                  name={source.name}
+                  file={getFilePath(source)}
+                  selected={props.selected}
+                  onSelect={select}
+                />
+              )}
+            </Show>
+          </Loading>
+        );
+      })()}
+    </Errored>
+  );
+}
+
+interface CodeBarProps {
+  source?: StackFrameSource;
+  isCompiled: boolean;
+  onToggleCompiled: () => void;
+}
+
+function CodeBar(props: CodeBarProps): JSX.Element {
   return (
-    <SelectOption value={props.frame} disabled={props.disabled} data-solid-error-viewer-stack-frame>
-      <span data-solid-error-viewer-stack-frame-function>
-        {props.frame.function ?? '<anonymous>'}
-      </span>
-      <span data-solid-error-viewer-stack-frame-file>
-        {fileName()
-          ? getFilePath({
-              source: fileName()!,
-              content: '',
-              line: props.frame.line!,
-              column: props.frame.col!,
-              name: props.frame.function,
-            })
-          : '<unknown source>'}
-      </span>
-    </SelectOption>
+    <div data-solid-error-viewer-stack-frames-code-bar>
+      <span data-solid-error-viewer-stack-frames-code-source>{props.source?.source}</span>
+      <Show when={props.source ? editorLocation(props.source) : undefined}>
+        {(location) => (
+          <Button
+            data-solid-error-viewer-open-in-editor
+            title={`Open ${location()} in editor`}
+            onClick={() => openInEditor(location())}
+          >
+            Open in editor
+          </Button>
+        )}
+      </Show>
+      <IconButton data-solid-error-viewer-button onClick={props.onToggleCompiled} type="button">
+        <Show when={props.isCompiled} fallback={<ViewOriginalIcon title="View Original Source" />}>
+          <ViewCompiledIcon title="View Compiled Source" />
+        </Show>
+      </IconButton>
+    </div>
   );
 }
 
+interface StackFramesContentProps {
+  error: Error;
+  isCompiled: boolean;
+  onToggleCompiled: () => void;
+}
+
 function StackFramesContent(props: StackFramesContentProps) {
   // An error without a usable stack yields no frames instead of throwing.
   const stackframes = parseErrorStack(props.error, { allowEmpty: true });
+  const segments = foldLibraryFrames(stackframes);
 
   const [selectedFrame, setSelectedFrame] = createSignal<StackFrameLite | undefined>(
-    stackframes[0],
+    pickDefaultFrame(stackframes),
   );
+  // Ids of the folded runs that are open.
+  const [expanded, setExpanded] = createSignal<ReadonlySet<number>>(new Set());
+
+  const detail = useResizableDetail({
+    storageKey: 'solid-start-devtools:error-code-width',
+    defaultWidth: 480,
+  });
+
+  function toggleFold(id: number) {
+    const next = new Set(expanded());
+    if (!next.delete(id)) next.add(id);
+    setExpanded(next);
+  }
+
+  function selectFrame(frame: StackFrameLite) {
+    setSelectedFrame(frame);
+  }
+
+  function codeFallback() {
+    return (
+      <>
+        <CodeBar isCompiled={props.isCompiled} onToggleCompiled={props.onToggleCompiled} />
+        <CodeFallback />
+      </>
+    );
+  }
+
+  function frameOption(frame: StackFrameLite) {
+    return (
+      <FrameOption
+        frame={frame}
+        isCompiled={props.isCompiled}
+        selected={selectedFrame() === frame}
+        onSelect={selectFrame}
+      />
+    );
+  }
 
   return (
     <div data-solid-error-viewer-stack-frames-content>
-      <Select<StackFrameLite>
-        data-solid-error-viewer-stack-frames
-        value={selectedFrame()}
-        onChange={setSelectedFrame}
-      >
-        <For each={stackframes}>
-          {(current) => (
-            <Errored fallback={<RawStackFrameOption frame={current} disabled />}>
-              {(() => {
-                const data = createStackFrame(current, () => props.isCompiled);
-                return (
-                  <Loading fallback={<RawStackFrameOption frame={current} />}>
-                    <Show when={data()} keyed fallback={<RawStackFrameOption frame={current} />}>
-                      {(source) => (
-                        <SelectOption data-solid-error-viewer-stack-frame value={current}>
-                          <span data-solid-error-viewer-stack-frame-function>
-                            {source.name ?? '<anonymous>'}
-                          </span>
-                          <span data-solid-error-viewer-stack-frame-file>
-                            {getFilePath(source)}
-                          </span>
-                        </SelectOption>
-                      )}
-                    </Show>
-                  </Loading>
-                );
-              })()}
-            </Errored>
-          )}
+      <div data-solid-error-viewer-stack-frames>
+        <For each={segments}>
+          {(segment) => {
+            if (segment.type === 'frame') return frameOption(segment.frame);
+            const open = () => expanded().has(segment.id);
+            return (
+              <>
+                <button
+                  type="button"
+                  data-solid-error-viewer-stack-frames-fold
+                  aria-expanded={open() ? 'true' : 'false'}
+                  onClick={() => toggleFold(segment.id)}
+                >
+                  {`${open() ? '▾' : '▸'} ${segment.frames.length} ${
+                    segment.frames.length === 1 ? 'frame' : 'frames'
+                  } in libraries`}
+                </button>
+                <Show when={open()}>
+                  <For each={segment.frames}>{(frame) => frameOption(frame)}</For>
+                </Show>
+              </>
+            );
+          }}
         </For>
-      </Select>
-      <div data-solid-error-viewer-stack-frames-code>
+      </div>
+      <div data-solid-error-viewer-stack-frames-code style={{ width: `${detail.width()}px` }}>
+        <ResizeHandle detail={detail} />
         <Show when={selectedFrame()} keyed>
           {(frame) => (
             // Keyed on the frame so a failure inspecting one frame (an
             // unreachable source, a failed highlight) resets when another
             // frame is selected instead of leaving the pane stuck.
-            <Errored fallback={<CodeFallback />}>
+            <Errored fallback={codeFallback()}>
               {(() => {
                 const data = createStackFrame(frame, () => props.isCompiled);
                 return (
-                  <Loading fallback={<CodeFallback />}>
-                    <Show when={data()} keyed fallback={<CodeFallback />}>
+                  <Loading fallback={codeFallback()}>
+                    <Show when={data()} keyed fallback={codeFallback()}>
                       {(source) => (
                         <>
-                          <span data-solid-error-viewer-stack-frames-code-source>
-                            {source.source}
-                          </span>
+                          <CodeBar
+                            source={source}
+                            isCompiled={props.isCompiled}
+                            onToggleCompiled={props.onToggleCompiled}
+                          />
                           <div data-solid-error-viewer-stack-frames-code-container>
                             <CodeView
                               fileName={source.source}
@@ -198,12 +322,19 @@ function StackFramesContent(props: StackFramesContentProps) {
 interface StackFramesProps {
   error: unknown;
   isCompiled: boolean;
+  onToggleCompiled: () => void;
 }
 
 function StackFrames(props: StackFramesProps) {
   return (
     <Show when={props.error instanceof Error && props.error} keyed>
-      {(current) => <StackFramesContent error={current} isCompiled={props.isCompiled} />}
+      {(current) => (
+        <StackFramesContent
+          error={current}
+          isCompiled={props.isCompiled}
+          onToggleCompiled={props.onToggleCompiled}
+        />
+      )}
     </Show>
   );
 }
@@ -212,36 +343,36 @@ interface ErrorViewerProps {
   show?: boolean;
   errors: any[];
   resetError: () => void;
+  /** 0-based index into `errors`. When set, the parent owns the selection. */
+  index?: number;
+  onIndexChange?: (index: number) => void;
 }
 
 const ISSUE_THREAD = 'https://github.com/solidjs/solid-start-devtools/issues/new';
 const DISCORD_INVITE = 'https://discord.com/invite/solidjs';
 
 export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
-  const [currentPage, setCurrentPage] = createSignal(1);
+  const [page, setPage] = createSignal(0);
   const [isCompiled, setIsCompiled] = createSignal(false);
   const length = createMemo(() => props.errors.length);
 
-  const truncated = createMemo(() => {
-    return Math.min(currentPage(), length());
+  // The 0-based index shown, from the parent when it controls the selection.
+  const current = createMemo(() => {
+    const wanted = props.index ?? page();
+    return Math.max(0, Math.min(wanted, length() - 1));
   });
 
+  function selectIndex(next: number) {
+    if (props.index === undefined) setPage(next);
+    props.onIndexChange?.(next);
+  }
+
   function goPrev() {
-    setCurrentPage((c) => {
-      if (c > 1) {
-        return c - 1;
-      }
-      return length();
-    });
+    selectIndex(current() > 0 ? current() - 1 : length() - 1);
   }
 
   function goNext() {
-    setCurrentPage((c) => {
-      if (c < length()) {
-        return c + 1;
-      }
-      return 1;
-    });
+    selectIndex(current() < length() - 1 ? current() + 1 : 0);
   }
 
   function toggleIsCompiled() {
@@ -270,12 +401,12 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
     url.searchParams.append('labels', 'bug');
     url.searchParams.append('labels', 'needs+triage');
     url.searchParams.append('template', 'bug.yml');
-    url.searchParams.append('title', `[Bug?]:` + props.errors[truncated() - 1].toString());
+    url.searchParams.append('title', `[Bug?]:` + props.errors[current()].toString());
     window.open(url, '_blank')!.focus();
   }
 
   async function copyErrorReport(): Promise<string> {
-    const error = props.errors[truncated() - 1];
+    const error = props.errors[current()];
     return errorReport({ error, frames: await resolveErrorFrames(error), route: pageRoute() });
   }
 
@@ -303,7 +434,7 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
                       <ArrowLeftIcon title="Go Previous" />
                     </IconButton>
                     <div data-solid-error-viewer-page-counter>
-                      {`${truncated()} of ${props.errors.length}`}
+                      {`${current() + 1} of ${props.errors.length}`}
                     </div>
                     <IconButton data-solid-error-viewer-button onClick={goNext} type="button">
                       <ArrowRightIcon title="Go Next" />
@@ -330,24 +461,20 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
                 >
                   <CameraIcon title="Capture Error Overlay" />
                 </IconButton>
-                <IconButton data-solid-error-viewer-button onClick={toggleIsCompiled} type="button">
-                  <Show
-                    when={isCompiled()}
-                    fallback={<ViewOriginalIcon title="View Original Source" />}
-                  >
-                    <ViewCompiledIcon title="View Compiled Source" />
-                  </Show>
-                </IconButton>
                 <IconButton data-solid-error-viewer-button onClick={props.resetError} type="button">
                   <RefreshIcon title="Reset Error" />
                 </IconButton>
               </div>
             </div>
-            <Show when={props.errors[truncated() - 1]} keyed>
-              {(current) => (
+            <Show when={props.errors[current()]} keyed>
+              {(error) => (
                 <div data-solid-error-viewer-content>
-                  <ErrorInfo error={current} />
-                  <StackFrames error={current} isCompiled={isCompiled()} />
+                  <ErrorInfo error={error} />
+                  <StackFrames
+                    error={error}
+                    isCompiled={isCompiled()}
+                    onToggleCompiled={toggleIsCompiled}
+                  />
                 </div>
               )}
             </Show>
diff --git a/src/dev-toolbar/error-viewer/styles.css b/src/dev-toolbar/error-viewer/styles.css
index 65037e0..7121633 100644
--- a/src/dev-toolbar/error-viewer/styles.css
+++ b/src/dev-toolbar/error-viewer/styles.css
@@ -133,20 +133,20 @@
 [data-solid-error-viewer-stack-frames-content] {
   display: flex;
   flex-direction: row;
-  gap: 0.75rem;
 
   flex: 1;
   min-height: 0;
 }
 
 [data-solid-error-viewer-stack-frames] {
-  width: 38%;
-  max-width: 20rem;
-  flex-shrink: 0;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 
-  border: 1px var(--start-dt-border-soft) solid;
-  border-radius: 0.5rem;
+  flex: 1 1 0%;
+  min-width: 0;
+  padding-right: 0.5rem;
+  overflow-y: auto;
 }
 
 [data-solid-error-viewer-stack-frame] {
@@ -154,13 +154,14 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.125rem;
+  flex-shrink: 0;
   color: var(--start-dt-text);
-  cursor: default;
-  user-select: none;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   outline: none;
@@ -169,14 +170,29 @@
   max-width: 100%;
 }
 
-[data-solid-error-viewer-stack-frame][tc-active],
-[data-solid-error-viewer-stack-frame][tc-selected] {
-  color: var(--start-dt-text);
-  background-color: var(--start-dt-accent-soft);
+[data-solid-error-viewer-stack-frame]:hover {
+  background-color: var(--start-dt-surface-hover);
+}
+
+[data-solid-error-viewer-stack-frame][data-selected] {
+  background-color: var(--start-dt-surface-active);
+}
+
+[data-solid-error-viewer-stack-frame]:focus-visible {
+  box-shadow: 0 0 0 2px var(--start-dt-accent);
+}
+
+[data-solid-error-viewer-stack-frame]:disabled {
+  cursor: default;
+  opacity: 0.6;
 }
 
 [data-solid-error-viewer-stack-frame-function] {
   font-weight: 600;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
@@ -192,19 +208,61 @@
   color: var(--start-dt-text-muted);
 }
 
+[data-solid-error-viewer-stack-frames-fold] {
+  flex-shrink: 0;
+  text-align: left;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--start-dt-text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  outline: none;
+}
+
+[data-solid-error-viewer-stack-frames-fold]:hover {
+  color: var(--start-dt-text);
+  background-color: var(--start-dt-surface-hover);
+}
+
+[data-solid-error-viewer-stack-frames-fold]:focus-visible {
+  box-shadow: 0 0 0 2px var(--start-dt-accent);
+}
+
 [data-solid-error-viewer-stack-frames-code] {
-  padding: 0.5rem 0.75rem;
-  gap: 0.375rem;
-  flex: 1 1 0%;
-  min-width: 0;
-  min-height: 0;
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  justify-content: flex-start;
-  border-radius: 0.5rem;
-  background-color: var(--start-dt-surface);
-  border: 1px var(--start-dt-border-soft) solid;
+  gap: 0.375rem;
+
+  /* Keeps the frames usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
+  min-height: 0;
+  flex-shrink: 0;
+  padding: 0.5rem 0 0.5rem 0.75rem;
+
+  border-left: var(--start-dt-border-soft) 1px solid;
+}
+
+[data-solid-error-viewer-stack-frames-code-bar] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+[data-solid-error-viewer-open-in-editor] {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-solid-error-viewer-stack-frames-code-bar] > [data-solid-error-viewer-button] {
+  flex-shrink: 0;
 }
 
 [data-solid-error-viewer-stack-frames-code-fallback] {
@@ -219,6 +277,11 @@
 }
 
 [data-solid-error-viewer-stack-frames-code-source] {
+  flex: 1 1 0%;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 0.8125rem;
   line-height: 1.25rem;
   color: var(--start-dt-text-muted);
diff --git a/src/dev-toolbar/functions/index.tsx b/src/dev-toolbar/functions/index.tsx
index b737deb..49ed323 100644
--- a/src/dev-toolbar/functions/index.tsx
+++ b/src/dev-toolbar/functions/index.tsx
@@ -10,10 +10,12 @@ import {
 import { Badge } from '../../ui/Badge.js';
 import IconButton from '../../ui/IconButton.js';
 import Placeholder from '../../ui/Placeholder.js';
+import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Section } from '../../ui/Section.js';
 import { Select, SelectOption } from '../../ui/Select.js';
 import { Tab, TabGroup, TabList, TabPanel } from '../../ui/Tabs.js';
 import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
 import { TrashIcon } from '../icons.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { readReportBody, serverFunctionReport } from '../report/function-report.js';
@@ -386,6 +388,10 @@ export interface ServerFunctionViewerProps {
 
 export function ServerFunctionViewer(props: ServerFunctionViewerProps): JSX.Element {
   const [currentInstance, setCurrentInstance] = createSignal<string>();
+  const detail = useResizableDetail({
+    storageKey: 'solid-start-devtools:functions-detail-width',
+    defaultWidth: 480,
+  });
 
   createEffect(
     () => props.focus,
@@ -430,7 +436,8 @@ export function ServerFunctionViewer(props: ServerFunctionViewerProps): JSX.Elem
             </div>
           </div>
           {/* request/response viewer */}
-          <div data-solid-functions-detail>
+          <div data-solid-functions-detail style={{ width: `${detail.width()}px` }}>
+            <ResizeHandle detail={detail} />
             <Show
               when={currentInstance()}
               fallback={
diff --git a/src/dev-toolbar/functions/styles.css b/src/dev-toolbar/functions/styles.css
index 3887188..4bbb487 100644
--- a/src/dev-toolbar/functions/styles.css
+++ b/src/dev-toolbar/functions/styles.css
@@ -24,22 +24,24 @@
   display: flex;
   flex-direction: column;
 
-  width: 17rem;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 0;
   min-height: 0;
-
-  border-right: var(--start-dt-border-soft) 1px solid;
 }
 
 [data-solid-functions-detail] {
+  position: relative;
   display: flex;
   flex-direction: column;
 
-  flex: 1;
-  min-width: 0;
+  /* Keeps the list usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
+  flex-shrink: 0;
   min-height: 0;
 
   overflow: auto;
+
+  border-left: var(--start-dt-border-soft) 1px solid;
 }
 
 [data-solid-functions-instances-container] {
diff --git a/src/dev-toolbar/health/index.tsx b/src/dev-toolbar/health/index.tsx
new file mode 100644
index 0000000..b34225a
--- /dev/null
+++ b/src/dev-toolbar/health/index.tsx
@@ -0,0 +1,251 @@
+import type { JSX } from '@solidjs/web';
+import { clientOnly } from '@solidjs/web';
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';
+import IconButton from '../../ui/IconButton.js';
+import Placeholder from '../../ui/Placeholder.js';
+import { ResizeHandle } from '../../ui/ResizeHandle.js';
+import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
+import { TrashIcon } from '../icons.js';
+import { IssueDetail, IssueRow, matchesIssue, SEVERITIES, type Severity } from '../issues/index.js';
+import { isIssuesAvailable, type IssueEntry } from '../issues/tracker.js';
+import './styles.css';
+
+// The error panel is the heaviest part of the view, so it loads when an error is opened.
+const ErrorViewer = clientOnly(() => import('../error-viewer/index.js'), { lazy: true });
+
+/** What the detail pane shows: a thrown error by its index, or an issue by its key. */
+type Selection = { kind: 'error'; index: number } | { kind: 'issue'; key: string };
+
+/** The first line of a thrown value, split into its name and message. */
+export function describeError(error: unknown): { name: string; message: string } {
+  if (error instanceof Error) {
+    return { name: error.name || 'Error', message: error.message };
+  }
+  if (error instanceof ErrorEvent) {
+    return { name: 'Error', message: error.message };
+  }
+  return { name: 'Thrown value', message: String(error) };
+}
+
+export interface HealthViewerProps {
+  show?: boolean;
+  errors: unknown[];
+  resetError: () => void;
+  issues: IssueEntry[];
+  onClearIssues: () => void;
+  onViewOwner?: (owner: object) => void;
+  onViewInGraph?: (node: object) => void;
+}
+
+/** Thrown errors and the runtime's diagnostics in one list, with the selected entry beside it. */
+export default function HealthViewer(props: HealthViewerProps): JSX.Element {
+  const [query, setQuery] = createSignal('');
+  const [hideErrors, setHideErrors] = createSignal(false);
+  const [hidden, setHidden] = createSignal<Severity[]>([]);
+  const [selected, setSelected] = createSignal<Selection>();
+  const detail = useResizableDetail({
+    storageKey: 'solid-start-devtools:health-detail-width',
+    defaultWidth: 640,
+    minWidth: 360,
+  });
+
+  // A new error lands at the top of the list and is opened, as the old Errors panel did.
+  let seenErrors = 0;
+  createEffect(
+    () => props.errors.length,
+    (count) => {
+      if (count > seenErrors) setSelected({ kind: 'error', index: 0 });
+      seenErrors = count;
+    },
+  );
+
+  const shownErrors = createMemo(() => {
+    if (hideErrors()) return [];
+    const search = query().trim().toLowerCase();
+    const result: { error: unknown; index: number }[] = [];
+    let index = 0;
+    for (const error of props.errors) {
+      const { name, message } = describeError(error);
+      if (!search || `${name} ${message}`.toLowerCase().includes(search)) {
+        result.push({ error, index });
+      }
+      index++;
+    }
+    return result;
+  });
+
+  const shownIssues = createMemo(() => {
+    const search = query().trim().toLowerCase();
+    const off = hidden();
+    const result: IssueEntry[] = [];
+    for (const entry of props.issues) {
+      if (!off.includes(entry.event.severity) && matchesIssue(entry, search)) result.push(entry);
+    }
+    return result;
+  });
+
+  const total = () => props.errors.length + props.issues.length;
+  const shownCount = () => shownErrors().length + shownIssues().length;
+
+  // An issue that was cleared or an error index past the end selects nothing.
+  const current = createMemo(() => {
+    const value = selected();
+    if (!value) return undefined;
+    if (value.kind === 'error') return value.index < props.errors.length ? value : undefined;
+    const entry = props.issues.find((item) => item.key === value.key);
+    return entry ? { kind: 'issue' as const, entry } : undefined;
+  });
+
+  function toggleSeverity(value: Severity): void {
+    setHidden((list) =>
+      list.includes(value) ? list.filter((item) => item !== value) : [...list, value],
+    );
+  }
+
+  function clearAll(): void {
+    setSelected(undefined);
+    props.resetError();
+    props.onClearIssues();
+  }
+
+  return (
+    <Show when={props.show}>
+      <div data-solid-dev-toolbar-panel>
+        <div data-solid-health-viewer>
+          <div data-solid-health-list-pane>
+            <div data-solid-issues-nav>
+              <input
+                data-solid-issues-search
+                type="search"
+                placeholder="Filter by name, code, message or owner"
+                value={query()}
+                onInput={(event) => setQuery(event.currentTarget.value)}
+              />
+              <div data-solid-issues-filters>
+                <button
+                  type="button"
+                  data-solid-issues-filter="thrown"
+                  data-off={hideErrors() ? '' : undefined}
+                  aria-pressed={hideErrors() ? 'false' : 'true'}
+                  onClick={() => setHideErrors((value) => !value)}
+                >
+                  <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>Thrown</Text>
+                </button>
+                <For each={SEVERITIES}>
+                  {(severity) => (
+                    <button
+                      type="button"
+                      data-solid-issues-filter={severity.value}
+                      data-off={hidden().includes(severity.value) ? '' : undefined}
+                      aria-pressed={hidden().includes(severity.value) ? 'false' : 'true'}
+                      onClick={() => toggleSeverity(severity.value)}
+                    >
+                      <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>
+                        {severity.label}
+                      </Text>
+                    </button>
+                  )}
+                </For>
+              </div>
+              <div data-solid-issues-nav-actions>
+                <Text data-solid-issues-count options={{ size: 'xs', font: 'mono' }}>
+                  {`${shownCount()} of ${total()}`}
+                </Text>
+                <IconButton disabled={!total()} onClick={clearAll}>
+                  <TrashIcon title="Clear errors and issues" />
+                </IconButton>
+              </div>
+            </div>
+            <div data-solid-issues-list>
+              <Show
+                when={shownCount()}
+                fallback={
+                  <Placeholder>
+                    <Text options={{ size: 'xs' }}>
+                      {total()
+                        ? 'Nothing matches this filter.'
+                        : isIssuesAvailable()
+                          ? 'No errors or issues so far.'
+                          : 'No errors so far. Issues need a development build of solid-js.'}
+                    </Text>
+                  </Placeholder>
+                }
+              >
+                <For each={shownErrors()}>
+                  {(item) => {
+                    const info = () => describeError(item.error);
+                    const isSelected = () => {
+                      const value = current();
+                      return value?.kind === 'error' && value.index === item.index;
+                    };
+                    return (
+                      <button
+                        type="button"
+                        data-solid-health-error-row
+                        data-selected={isSelected() ? '' : undefined}
+                        onClick={() => setSelected({ kind: 'error', index: item.index })}
+                      >
+                        <Text data-solid-health-error-name options={{ size: 'xs', font: 'mono' }}>
+                          {info().name}
+                        </Text>
+                        <Text data-solid-issues-row-message options={{ size: 'xs' }}>
+                          {info().message}
+                        </Text>
+                      </button>
+                    );
+                  }}
+                </For>
+                <For each={shownIssues()}>
+                  {(entry) => {
+                    const isSelected = () => {
+                      const value = current();
+                      return value?.kind === 'issue' && value.entry.key === entry.key;
+                    };
+                    return (
+                      <IssueRow
+                        entry={entry}
+                        selected={isSelected()}
+                        onSelect={() => setSelected({ kind: 'issue', key: entry.key })}
+                      />
+                    );
+                  }}
+                </For>
+              </Show>
+            </div>
+          </div>
+          <Show when={current()}>
+            {(value) => (
+              <aside data-solid-health-detail style={{ width: `${detail.width()}px` }}>
+                <ResizeHandle detail={detail} />
+                <Show
+                  when={value().kind === 'error' && (value() as { index: number })}
+                  fallback={
+                    <IssueDetail
+                      entry={(value() as { entry: IssueEntry }).entry}
+                      onViewOwner={props.onViewOwner}
+                      onViewInGraph={props.onViewInGraph}
+                    />
+                  }
+                >
+                  {(error) => (
+                    <ErrorViewer
+                      show
+                      errors={props.errors}
+                      index={error().index}
+                      onIndexChange={(index: number) => setSelected({ kind: 'error', index })}
+                      resetError={() => {
+                        setSelected(undefined);
+                        props.resetError();
+                      }}
+                    />
+                  )}
+                </Show>
+              </aside>
+            )}
+          </Show>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/src/dev-toolbar/health/styles.css b/src/dev-toolbar/health/styles.css
new file mode 100644
index 0000000..31e2be2
--- /dev/null
+++ b/src/dev-toolbar/health/styles.css
@@ -0,0 +1,82 @@
+[data-solid-health-viewer] {
+  display: flex;
+  flex-direction: row;
+
+  height: 100%;
+  min-height: 0;
+
+  color: var(--start-dt-text);
+}
+
+[data-solid-health-list-pane] {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1;
+  min-width: 0;
+}
+
+[data-solid-health-list-pane] [data-solid-issues-nav] {
+  flex-wrap: wrap;
+}
+
+[data-solid-issues-filter='thrown']::before {
+  background: var(--start-dt-danger);
+  border-radius: 0.125rem;
+}
+
+[data-solid-health-error-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-health-error-row]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
+[data-solid-health-error-row][data-selected] {
+  background: var(--start-dt-surface-active);
+}
+
+[data-solid-health-error-row]:focus-visible {
+  outline: 2px solid var(--start-dt-accent);
+  outline-offset: -2px;
+}
+
+[data-solid-health-error-name] {
+  color: oklch(0.78 0.14 25);
+  font-weight: 600;
+}
+
+[data-solid-health-detail] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  /* Keeps the list usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
+  flex-shrink: 0;
+  min-height: 0;
+
+  overflow: hidden;
+
+  border-left: var(--start-dt-border-soft) 1px solid;
+}
+
+[data-solid-health-detail] > [data-solid-dev-toolbar-panel] {
+  flex: 1;
+  min-height: 0;
+}
diff --git a/src/dev-toolbar/index.css b/src/dev-toolbar/index.css
index f884faa..3b5225f 100644
--- a/src/dev-toolbar/index.css
+++ b/src/dev-toolbar/index.css
@@ -157,6 +157,20 @@
   text-align: center;
 }
 
+[data-solid-dev-toolbar-handle-issues] {
+  min-width: 1.125rem;
+  padding: 0 0.3125rem;
+
+  border-radius: 9999px;
+  background: oklch(0.8 0.15 80 / 0.18);
+  color: oklch(0.85 0.12 80);
+
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+  line-height: 1.125rem;
+  text-align: center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-solid-dev-toolbar-handle-grip],
   [data-solid-dev-toolbar-handle-content] {
@@ -166,17 +180,21 @@
 
 [data-solid-dev-toolbar-version] {
   border-radius: 9999px;
-  color: var(--start-dt-accent);
-  background: var(--start-dt-accent-soft);
+  color: var(--start-dt-text-muted);
+  background: oklch(1 0 0 / 0.06);
   padding: 0.0625rem 0.5rem;
 
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   line-height: 1.25rem;
-  font-weight: 600;
   white-space: nowrap;
 }
 
+[data-solid-dev-toolbar-version] b {
+  color: var(--start-dt-text);
+  font-weight: 600;
+}
+
 /* open: a dock along the bottom of the page */
 
 [data-solid-dev-toolbar-dock] {
@@ -223,7 +241,7 @@
 [data-solid-dev-toolbar-header] {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 
   padding: 0.25rem 0.5rem 0.25rem 0.75rem;
 
@@ -234,18 +252,9 @@
   overflow: hidden;
 }
 
-[data-solid-dev-toolbar-brand] {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  font-size: 0.8125rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
 [data-solid-dev-toolbar-route] {
   min-width: 0;
+  max-width: 16rem;
   overflow: hidden;
   text-overflow: ellipsis;
 
@@ -254,83 +263,6 @@
   font-size: 0.75rem;
 }
 
-[data-solid-dev-toolbar-funnel] {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  background: var(--start-dt-accent-soft);
-  border: 1px solid var(--start-dt-border-soft);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  white-space: nowrap;
-}
-
-[data-solid-dev-toolbar-funnel-label] {
-  color: var(--start-dt-text-muted);
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-[data-solid-dev-toolbar-funnel-name] {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-weight: 600;
-  color: var(--start-dt-accent);
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 2px;
-}
-
-[data-solid-dev-toolbar-funnel-name]:hover {
-  text-decoration-style: solid;
-}
-
-[data-solid-dev-toolbar-funnel-action] {
-  background: none;
-  border: none;
-  padding: 0 0.25rem;
-  font: inherit;
-  font-size: 0.6875rem;
-  color: var(--start-dt-text);
-  cursor: pointer;
-  text-decoration: underline;
-  opacity: 0.85;
-}
-
-[data-solid-dev-toolbar-funnel-action]:hover {
-  opacity: 1;
-  color: var(--start-dt-accent);
-}
-
-[data-solid-dev-toolbar-funnel-clear] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 9999px;
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  font-size: 0.8125rem;
-  line-height: 1;
-  color: var(--start-dt-text-muted);
-  cursor: pointer;
-}
-
-[data-solid-dev-toolbar-funnel-clear]:hover {
-  color: var(--start-dt-text);
-  background: var(--start-dt-surface-hover);
-}
-
 [data-solid-icon-button][data-active] {
   color: var(--start-dt-accent);
   background-color: var(--start-dt-accent-soft);
@@ -340,36 +272,33 @@
   flex: 1;
 }
 
-[data-solid-dev-toolbar-main] {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-}
+/* the views and the tabs of the current view: segmented controls in the header */
 
-[data-solid-dev-toolbar-nav] {
+[data-solid-dev-toolbar-views],
+[data-solid-dev-toolbar-tabs] {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.125rem;
 
-  width: 11rem;
-  flex-shrink: 0;
-  padding: 0.375rem;
-  overflow: auto;
+  padding: 0.1875rem;
 
-  background: var(--start-dt-surface);
-  border-right: var(--start-dt-border-soft) 1px solid;
+  border-radius: 0.5625rem;
+  background: oklch(0 0 0 / 0.28);
 }
 
+[data-solid-dev-toolbar-view],
 [data-solid-dev-toolbar-tab] {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
 
-  padding: 0.375rem 0.5rem;
+  height: 1.625rem;
+  padding: 0 0.6875rem;
 
   font: inherit;
   font-size: 0.8125rem;
-  text-align: left;
+  font-weight: 500;
+  white-space: nowrap;
   color: var(--start-dt-text-muted);
   cursor: pointer;
 
@@ -382,35 +311,29 @@
   transition-duration: 150ms;
 }
 
-[data-solid-dev-toolbar-tab] svg {
-  height: 1rem;
-  width: 1rem;
+[data-solid-dev-toolbar-tab] {
+  font-size: 0.75rem;
+  padding: 0 0.5625rem;
 }
 
+[data-solid-dev-toolbar-view]:hover,
 [data-solid-dev-toolbar-tab]:hover {
   color: var(--start-dt-text);
-  background: var(--start-dt-surface-hover);
 }
 
+[data-solid-dev-toolbar-view]:focus-visible,
 [data-solid-dev-toolbar-tab]:focus-visible {
   outline: 2px solid var(--start-dt-accent);
   outline-offset: -2px;
 }
 
+[data-solid-dev-toolbar-view][aria-selected='true'],
 [data-solid-dev-toolbar-tab][aria-selected='true'] {
   color: var(--start-dt-text);
   background: var(--start-dt-surface-active);
-}
-
-[data-solid-dev-toolbar-tab][aria-selected='true'] svg {
-  color: var(--start-dt-accent);
-}
-
-[data-solid-dev-toolbar-tab-label] {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 0.4),
+    inset 0 1px 0 oklch(1 0 0 / 0.06);
 }
 
 [data-solid-dev-toolbar-tab-badge] {
@@ -439,6 +362,8 @@
 
 [data-solid-dev-toolbar-body] {
   flex: 1;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
@@ -452,14 +377,9 @@
   overflow: hidden;
 }
 
-/* narrow pages fold the nav down to its icons */
-@media (max-width: 640px) {
-  [data-solid-dev-toolbar-nav] {
-    width: auto;
-  }
-
-  [data-solid-dev-toolbar-tab-label],
-  [data-solid-dev-toolbar-tab-badge],
+/* narrow pages drop the route and the version */
+@media (max-width: 720px) {
+  [data-solid-dev-toolbar-header] [data-solid-dev-toolbar-version],
   [data-solid-dev-toolbar-route] {
     display: none;
   }
diff --git a/src/dev-toolbar/index.tsx b/src/dev-toolbar/index.tsx
index 1dcceb8..e44dd2d 100644
--- a/src/dev-toolbar/index.tsx
+++ b/src/dev-toolbar/index.tsx
@@ -17,19 +17,7 @@ import version from '../version.js';
 import IconButton from '../ui/IconButton.js';
 import { type ServerFunctionInstance, ServerFunctionViewer } from './functions/index.js';
 import { captureServerFunctionCall } from './functions/tracker.js';
-import {
-  AsyncIcon,
-  ErrorIcon,
-  FunctionIcon,
-  GraphIcon,
-  HighlightUpdatesIcon,
-  InspectIcon,
-  IssueIcon,
-  MinimizeIcon,
-  SolidIcon,
-  TimelineIcon,
-  TreeIcon,
-} from './icons.js';
+import { HighlightUpdatesIcon, InspectIcon, MinimizeIcon, SolidIcon } from './icons.js';
 import { AsyncHistory, startAsyncCapture, type AsyncRecord } from './async/tracker.js';
 import { HighlightUpdatesOverlay } from './highlight-updates/overlay.js';
 import { installElementTracking, type InspectedComponent } from './inspector/lookup.js';
@@ -37,7 +25,6 @@ import { InspectorOverlay } from './inspector/overlay.js';
 import { addIssues, captureIssues, type IssueEntry } from './issues/tracker.js';
 import { isExtensionError } from './extension-errors.js';
 import { addError } from './error-list.js';
-import { openInEditor } from './open-in-editor.js';
 import { CopyReportButton } from './report/CopyReportButton.js';
 import { pageRoute } from './report/markdown.js';
 import { excludeOwner, includeOwner } from './ownership/registry.js';
@@ -45,25 +32,57 @@ import { excludeReactiveOwner, includeReactiveOwner } from './reactivity/registr
 import { startTimeline, TimelineBuilder, type TimelineEntry } from './timeline/tracker.js';
 import './index.css';
 
-const ErrorViewer = clientOnly(() => import('./error-viewer/index.js'), { lazy: true });
+const HealthViewer = clientOnly(() => import('./health/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 });
 const AsyncViewer = clientOnly(() => import('./async/index.js'), { lazy: true });
 
-type Tab = 'err' | 'issues' | 'tl' | 'async' | 'fn' | 'rx' | 'own';
+/** A panel of the dock. Each belongs to one view. */
+type Tab = 'health' | 'tl' | 'async' | 'fn' | 'own' | 'rx';
+type View = 'health' | 'activity' | 'structure';
 
-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: 'async', label: 'Async', icon: AsyncIcon },
-  { value: 'fn', label: 'Server functions', icon: FunctionIcon },
-  { value: 'rx', label: 'Reactivity', icon: GraphIcon },
-  { value: 'own', label: 'Ownership', icon: TreeIcon },
+const VIEWS: { value: View; label: string; tabs: Tab[] }[] = [
+  { value: 'health', label: 'Health', tabs: ['health'] },
+  { value: 'activity', label: 'Activity', tabs: ['tl', 'async', 'fn'] },
+  { value: 'structure', label: 'Structure', tabs: ['own', 'rx'] },
 ];
 
+const TAB_LABELS: Record<Tab, string> = {
+  health: 'Health',
+  tl: 'Timeline',
+  async: 'Async',
+  fn: 'Server functions',
+  own: 'Ownership',
+  rx: 'Reactivity',
+};
+
+function viewOf(tab: Tab): (typeof VIEWS)[number] {
+  for (const view of VIEWS) {
+    if (view.tabs.includes(tab)) return view;
+  }
+  return VIEWS[0]!;
+}
+
+/** Reads a saved tab, mapping the Errors and Issues panels of older versions to Health. */
+function savedTab(value: unknown): Tab | undefined {
+  if (value === 'err' || value === 'issues') return 'health';
+  return typeof value === 'string' && value in TAB_LABELS ? (value as Tab) : undefined;
+}
+
+/** The solid-js version the app runs, read from its package once the toolbar loads. */
+async function loadSolidVersion(): Promise<string | undefined> {
+  try {
+    // No import attribute: Vite serves the file as a module, and a browser
+    // rejects that module when the import asks for JSON.
+    const pkg = await import('solid-js/package.json');
+    return (pkg.default as { version?: string }).version;
+  } catch {
+    // A bundler that cannot import the package file leaves the version out.
+    return undefined;
+  }
+}
+
 // The dock remembers whether it was open, its tab and its height, so a full
 // reload during development comes back to the same view.
 const STORAGE_KEY = 'solid-start-devtools:dock';
@@ -75,6 +94,8 @@ const DRAG_THRESHOLD = 4;
 interface DockState {
   open: boolean;
   tab: Tab;
+  /** The last tab of each view, so switching views comes back to it. */
+  viewTabs?: Partial<Record<View, Tab>>;
   height: number;
   highlightUpdates?: boolean;
 }
@@ -117,6 +138,15 @@ function currentRoute(): string {
   return location.pathname + location.search;
 }
 
+/** The solid-js version chip, in the pull tab and the header. */
+function SolidVersion(props: { value: string }): JSX.Element {
+  return (
+    <span data-solid-dev-toolbar-version title="solid-js version">
+      solid-js <b>{props.value}</b>
+    </span>
+  );
+}
+
 export interface DevToolbarProps {
   children?: JSX.Element;
 }
@@ -147,6 +177,8 @@ export function DevToolbar(props: DevToolbarProps) {
 
   const [open, setOpen] = createSignal(false);
   const [tab, setTab] = createSignal<Tab>('fn');
+  const [viewTabs, setViewTabs] = createSignal<Partial<Record<View, Tab>>>({});
+  const [solidVersion, setSolidVersion] = createSignal<string>();
   const [height, setHeight] = createSignal(DEFAULT_HEIGHT);
   const [highlightUpdates, setHighlightUpdates] = createSignal(false);
   const [route, setRoute] = createSignal('');
@@ -160,11 +192,9 @@ export function DevToolbar(props: DevToolbarProps) {
   function selectComponent(comp: InspectedComponent) {
     setInspecting(false);
     setSelectedComponent(comp);
+    // The pick opens in the ownership tree, which selects and shows it.
     setOwnershipFocus({ owner: comp.owner });
-    if (!open()) {
-      setOpen(true);
-      persist({ open: true });
-    }
+    show('own');
   }
 
   function clearComponentFunnel() {
@@ -185,6 +215,7 @@ export function DevToolbar(props: DevToolbarProps) {
     writeDockState({
       open: open(),
       tab: tab(),
+      viewTabs: viewTabs(),
       height: height(),
       highlightUpdates: highlightUpdates(),
       ...next,
@@ -192,9 +223,17 @@ export function DevToolbar(props: DevToolbarProps) {
   }
 
   function show(value: Tab) {
+    const nextViewTabs = { ...viewTabs(), [viewOf(value).value]: value };
     setTab(value);
+    setViewTabs(nextViewTabs);
     setOpen(true);
-    persist({ open: true, tab: value });
+    persist({ open: true, tab: value, viewTabs: nextViewTabs });
+  }
+
+  // A view opens on the tab it showed last.
+  function showView(view: View) {
+    const entry = VIEWS.find((item) => item.value === view)!;
+    show(viewTabs()[view] ?? entry.tabs[0]!);
   }
 
   function close() {
@@ -213,7 +252,9 @@ export function DevToolbar(props: DevToolbarProps) {
   function openAndFocus() {
     show(tab());
     flush();
-    dock?.querySelector<HTMLElement>(`[data-solid-dev-toolbar-tab="${tab()}"]`)?.focus();
+    dock
+      ?.querySelector<HTMLElement>(`[data-solid-dev-toolbar-view="${viewOf(tab()).value}"]`)
+      ?.focus();
   }
 
   // A panel is live only while the dock is open on its tab, so the graph and
@@ -222,7 +263,17 @@ export function DevToolbar(props: DevToolbarProps) {
 
   onSettled(() => {
     const saved = readDockState();
-    if (TABS.some((entry) => entry.value === saved.tab)) setTab(saved.tab!);
+    const restored = savedTab(saved.tab);
+    if (restored) setTab(restored);
+    if (saved.viewTabs && typeof saved.viewTabs === 'object') {
+      const next: Partial<Record<View, Tab>> = {};
+      for (const view of VIEWS) {
+        const value = savedTab(saved.viewTabs[view.value]);
+        if (value && view.tabs.includes(value)) next[view.value] = value;
+      }
+      setViewTabs(next);
+    }
+    void loadSolidVersion().then((value) => setSolidVersion(value));
     if (typeof saved.height === 'number') setHeight(clampHeight(saved.height));
     if (typeof saved.highlightUpdates === 'boolean') setHighlightUpdates(saved.highlightUpdates);
     if (saved.open) setOpen(true);
@@ -323,19 +374,35 @@ export function DevToolbar(props: DevToolbarProps) {
     return () => window.removeEventListener('keydown', onKeyDown);
   });
 
+  // Arrow keys move along a tab list, and Home and End jump to its ends.
+  function nextIndex(event: KeyboardEvent, index: number, length: number): number | undefined {
+    if (event.key === 'ArrowRight') return (index + 1) % length;
+    if (event.key === 'ArrowLeft') return (index - 1 + length) % length;
+    if (event.key === 'Home') return 0;
+    if (event.key === 'End') return length - 1;
+    return undefined;
+  }
+
+  function onViewKeyDown(event: KeyboardEvent) {
+    const index = VIEWS.findIndex((entry) => entry === viewOf(tab()));
+    const target = nextIndex(event, index, VIEWS.length);
+    if (target === undefined) return;
+    event.preventDefault();
+    const next = VIEWS[target]!;
+    showView(next.value);
+    const list = event.currentTarget as HTMLElement;
+    list.querySelector<HTMLElement>(`[data-solid-dev-toolbar-view="${next.value}"]`)?.focus();
+  }
+
   function onTabKeyDown(event: KeyboardEvent) {
-    const index = TABS.findIndex((entry) => entry.value === tab());
-    let target: number;
-    if (event.key === 'ArrowDown') target = (index + 1) % TABS.length;
-    else if (event.key === 'ArrowUp') target = (index - 1 + TABS.length) % TABS.length;
-    else if (event.key === 'Home') target = 0;
-    else if (event.key === 'End') target = TABS.length - 1;
-    else return;
+    const tabs = viewOf(tab()).tabs;
+    const target = nextIndex(event, tabs.indexOf(tab()), tabs.length);
+    if (target === undefined) return;
     event.preventDefault();
-    const next = TABS[target]!;
-    show(next.value);
+    const next = tabs[target]!;
+    show(next);
     const list = event.currentTarget as HTMLElement;
-    list.querySelector<HTMLElement>(`[data-solid-dev-toolbar-tab="${next.value}"]`)?.focus();
+    list.querySelector<HTMLElement>(`[data-solid-dev-toolbar-tab="${next}"]`)?.focus();
   }
 
   // A panel can ask the graph to show a node. Each request is a new object, so
@@ -356,7 +423,7 @@ export function DevToolbar(props: DevToolbarProps) {
     console.error(error);
     setErrors((current) => addError(current, error));
 
-    show('err');
+    show('health');
   }
 
   onSettled(() => {
@@ -448,12 +515,7 @@ export function DevToolbar(props: DevToolbarProps) {
     });
   }
 
-  const badge = (value: Tab): number => {
-    if (value === 'err') return errors().length;
-    if (value === 'issues') return issueCount();
-    if (value === 'fn') return callCount();
-    return 0;
-  };
+  const badge = (value: Tab): number => (value === 'fn' ? callCount() : 0);
 
   return (
     <>
@@ -483,10 +545,13 @@ export function DevToolbar(props: DevToolbarProps) {
               <Show when={!open()}>
                 <SolidIcon title="" aria-hidden="true" />
               </Show>
-              <span data-solid-dev-toolbar-version>{version}</span>
+              <Show when={solidVersion()}>{(value) => <SolidVersion value={value()} />}</Show>
               <Show when={errors().length}>
                 {(count) => <span data-solid-dev-toolbar-handle-errors>{count()}</span>}
               </Show>
+              <Show when={issueCount()}>
+                {(count) => <span data-solid-dev-toolbar-handle-issues>{count()}</span>}
+              </Show>
               <MinimizeIcon title="" aria-hidden="true" data-solid-dev-toolbar-handle-chevron />
             </span>
           </button>
@@ -504,56 +569,89 @@ export function DevToolbar(props: DevToolbarProps) {
               onPointerDown={(event) => onDragHeight(event, false)}
             />
             <div data-solid-dev-toolbar-header>
-              <div data-solid-dev-toolbar-brand>
-                <Show when={open()}>
-                  <SolidIcon title="" aria-hidden="true" />
-                </Show>
-                <span>Start Devtools</span>
-              </div>
-              <span data-solid-dev-toolbar-version title="Start Devtools version">
-                {version}
-              </span>
+              <Show when={open()}>
+                <SolidIcon title="" aria-hidden="true" />
+              </Show>
+              <Show when={solidVersion()}>{(value) => <SolidVersion value={value()} />}</Show>
               <span data-solid-dev-toolbar-route title="Current route">
                 {route()}
               </span>
-              <Show when={selectedComponent()}>
-                {(comp) => (
-                  <div data-solid-dev-toolbar-funnel>
-                    <span data-solid-dev-toolbar-funnel-label>Inspecting</span>
-                    <button
-                      type="button"
-                      data-solid-dev-toolbar-funnel-name
-                      title={`View ${comp().name} in ownership tree`}
-                      onClick={() => {
-                        setOwnershipFocus({ owner: comp().owner });
-                        show('own');
-                      }}
-                    >
-                      {comp().name}
-                    </button>
-                    <Show when={comp().location}>
-                      {(loc) => (
-                        <button
-                          type="button"
-                          data-solid-dev-toolbar-funnel-action
-                          title={`Open ${loc()} in editor`}
-                          onClick={() => openInEditor(loc())}
-                        >
-                          Open in editor
-                        </button>
-                      )}
-                    </Show>
-                    <button
-                      type="button"
-                      data-solid-dev-toolbar-funnel-clear
-                      title="Clear component funnel"
-                      aria-label="Clear component funnel"
-                      onClick={clearComponentFunnel}
-                    >
-                      ×
-                    </button>
-                  </div>
-                )}
+              <div
+                data-solid-dev-toolbar-views
+                role="tablist"
+                aria-label="Views"
+                onKeyDown={onViewKeyDown}
+              >
+                <For each={VIEWS}>
+                  {(entry) => {
+                    const selected = () => viewOf(tab()).value === entry.value;
+                    return (
+                      <button
+                        type="button"
+                        role="tab"
+                        aria-label={entry.label}
+                        id={`solid-dev-toolbar-view-${entry.value}`}
+                        aria-selected={selected() ? 'true' : 'false'}
+                        aria-controls="solid-dev-toolbar-body"
+                        tabindex={selected() ? 0 : -1}
+                        data-solid-dev-toolbar-view={entry.value}
+                        onClick={() => showView(entry.value)}
+                      >
+                        {entry.label}
+                        <Show when={entry.value === 'health' && errors().length}>
+                          {(count) => (
+                            <span data-solid-dev-toolbar-tab-badge="failure">{count()}</span>
+                          )}
+                        </Show>
+                        <Show when={entry.value === 'health' && issueCount()}>
+                          {(count) => (
+                            <span data-solid-dev-toolbar-tab-badge="warning">{count()}</span>
+                          )}
+                        </Show>
+                      </button>
+                    );
+                  }}
+                </For>
+              </div>
+              <Show when={viewOf(tab()).tabs.length > 1}>
+                <div
+                  data-solid-dev-toolbar-tabs
+                  role="tablist"
+                  aria-label={`${viewOf(tab()).label} panels`}
+                  onKeyDown={onTabKeyDown}
+                >
+                  <For each={viewOf(tab()).tabs}>
+                    {(value) => (
+                      <button
+                        type="button"
+                        role="tab"
+                        aria-label={TAB_LABELS[value]}
+                        // The label names the tab, so the count is read as its description.
+                        aria-describedby={
+                          badge(value) ? `solid-dev-toolbar-tab-${value}-count` : undefined
+                        }
+                        id={`solid-dev-toolbar-tab-${value}`}
+                        aria-controls="solid-dev-toolbar-body"
+                        aria-selected={tab() === value ? 'true' : 'false'}
+                        tabindex={tab() === value ? 0 : -1}
+                        data-solid-dev-toolbar-tab={value}
+                        onClick={() => show(value)}
+                      >
+                        {TAB_LABELS[value]}
+                        <Show when={badge(value)}>
+                          {(count) => (
+                            <span
+                              id={`solid-dev-toolbar-tab-${value}-count`}
+                              data-solid-dev-toolbar-tab-badge
+                            >
+                              {count()}
+                            </span>
+                          )}
+                        </Show>
+                      </button>
+                    )}
+                  </For>
+                </div>
               </Show>
               <div data-solid-dev-toolbar-spacer />
               <IconButton
@@ -584,141 +682,95 @@ export function DevToolbar(props: DevToolbarProps) {
                 <MinimizeIcon title="Close Start Devtools" />
               </IconButton>
             </div>
-            <div data-solid-dev-toolbar-main>
-              <div
-                data-solid-dev-toolbar-nav
-                role="tablist"
-                aria-orientation="vertical"
-                onKeyDown={onTabKeyDown}
-              >
-                <For each={TABS}>
-                  {(entry) => {
-                    const Icon = entry.icon;
-                    return (
-                      <button
-                        type="button"
-                        role="tab"
-                        aria-label={entry.label}
-                        // The label names the tab, so the count is read as its description.
-                        aria-describedby={
-                          badge(entry.value)
-                            ? `solid-dev-toolbar-tab-${entry.value}-count`
-                            : undefined
-                        }
-                        id={`solid-dev-toolbar-tab-${entry.value}`}
-                        aria-controls="solid-dev-toolbar-body"
-                        aria-selected={tab() === entry.value ? 'true' : 'false'}
-                        tabindex={tab() === entry.value ? 0 : -1}
-                        data-solid-dev-toolbar-tab={entry.value}
-                        onClick={() => show(entry.value)}
-                      >
-                        <Icon title="" aria-hidden="true" />
-                        <span data-solid-dev-toolbar-tab-label>{entry.label}</span>
-                        <Show when={badge(entry.value)}>
-                          {(count) => (
-                            <span
-                              id={`solid-dev-toolbar-tab-${entry.value}-count`}
-                              data-solid-dev-toolbar-tab-badge={
-                                entry.value === 'err'
-                                  ? 'failure'
-                                  : entry.value === 'issues'
-                                    ? 'warning'
-                                    : undefined
-                              }
-                            >
-                              {count()}
-                            </span>
-                          )}
-                        </Show>
-                      </button>
-                    );
-                  }}
-                </For>
-              </div>
-              <div
-                data-solid-dev-toolbar-body
-                id="solid-dev-toolbar-body"
-                role="tabpanel"
-                aria-labelledby={`solid-dev-toolbar-tab-${tab()}`}
-              >
-                <ErrorViewer show={visible('err')} errors={errors()} resetError={resetError} />
-                <IssuesViewer
-                  show={visible('issues')}
-                  entries={issues()}
-                  onClear={() => setIssues([])}
-                  onViewOwner={(owner) => {
-                    setOwnershipFocus({ owner });
-                    show('own');
-                  }}
-                  onViewInGraph={(node) => {
-                    setGraphFocus({ node });
-                    show('rx');
-                  }}
-                />
-                <TimelineViewer
-                  show={visible('tl')}
-                  entries={timelineEntries()}
-                  onClear={() => {
-                    timeline.clear();
-                    setTimelineEntries([]);
-                  }}
-                  onViewCall={(instance) => {
-                    setFunctionsFocus({ instance });
-                    show('fn');
-                  }}
-                  onViewInGraph={(node) => {
-                    setGraphFocus({ node });
-                    show('rx');
-                  }}
-                />
-                <AsyncViewer
-                  show={visible('async')}
-                  history={asyncHistory}
-                  records={asyncRecords()}
-                  onClear={() => {
-                    asyncHistory.clear();
-                    setAsyncRecords([]);
-                  }}
-                  onViewInGraph={(node) => {
-                    setGraphFocus({ node });
-                    show('rx');
-                  }}
-                  onViewOwner={(owner) => {
-                    setOwnershipFocus({ owner });
-                    show('own');
-                  }}
-                />
-                <ReactivityViewer
-                  show={visible('rx')}
-                  focus={graphFocus()}
-                  ownerFilter={selectedComponent()?.owner}
-                  componentFilter={selectedComponent()?.name}
-                  onViewOwner={(owner) => {
-                    setOwnershipFocus({ owner });
-                    show('own');
-                  }}
-                />
-                <OwnershipViewer
-                  show={visible('own')}
-                  focus={ownershipFocus()}
-                  onViewInGraph={(node) => {
-                    setGraphFocus({ node });
-                    show('rx');
-                  }}
-                />
-                <ServerFunctionViewer
-                  show={visible('fn')}
-                  focus={functionsFocus()}
-                  instances={instances()}
-                  onDeleteInstance={(value) => {
-                    setInstances((current) => {
-                      const next = { ...current };
-                      delete next[value];
-                      return next;
-                    });
-                  }}
-                />
-              </div>
+            <div
+              data-solid-dev-toolbar-body
+              id="solid-dev-toolbar-body"
+              role="tabpanel"
+              aria-labelledby={
+                viewOf(tab()).tabs.length > 1
+                  ? `solid-dev-toolbar-tab-${tab()}`
+                  : `solid-dev-toolbar-view-${viewOf(tab()).value}`
+              }
+            >
+              <HealthViewer
+                show={visible('health')}
+                errors={errors()}
+                resetError={resetError}
+                issues={issues()}
+                onClearIssues={() => setIssues([])}
+                onViewOwner={(owner) => {
+                  setOwnershipFocus({ owner });
+                  show('own');
+                }}
+                onViewInGraph={(node) => {
+                  setGraphFocus({ node });
+                  show('rx');
+                }}
+              />
+              <TimelineViewer
+                show={visible('tl')}
+                entries={timelineEntries()}
+                onClear={() => {
+                  timeline.clear();
+                  setTimelineEntries([]);
+                }}
+                onViewCall={(instance) => {
+                  setFunctionsFocus({ instance });
+                  show('fn');
+                }}
+                onViewInGraph={(node) => {
+                  setGraphFocus({ node });
+                  show('rx');
+                }}
+              />
+              <AsyncViewer
+                show={visible('async')}
+                history={asyncHistory}
+                records={asyncRecords()}
+                onClear={() => {
+                  asyncHistory.clear();
+                  setAsyncRecords([]);
+                }}
+                onViewInGraph={(node) => {
+                  setGraphFocus({ node });
+                  show('rx');
+                }}
+                onViewOwner={(owner) => {
+                  setOwnershipFocus({ owner });
+                  show('own');
+                }}
+              />
+              <ReactivityViewer
+                show={visible('rx')}
+                focus={graphFocus()}
+                ownerFilter={selectedComponent()?.owner}
+                componentFilter={selectedComponent()?.name}
+                onClearComponentFilter={clearComponentFunnel}
+                onViewOwner={(owner) => {
+                  setOwnershipFocus({ owner });
+                  show('own');
+                }}
+              />
+              <OwnershipViewer
+                show={visible('own')}
+                focus={ownershipFocus()}
+                onViewInGraph={(node) => {
+                  setGraphFocus({ node });
+                  show('rx');
+                }}
+              />
+              <ServerFunctionViewer
+                show={visible('fn')}
+                focus={functionsFocus()}
+                instances={instances()}
+                onDeleteInstance={(value) => {
+                  setInstances((current) => {
+                    const next = { ...current };
+                    delete next[value];
+                    return next;
+                  });
+                }}
+              />
             </div>
           </div>
         </div>
diff --git a/src/dev-toolbar/issues/index.tsx b/src/dev-toolbar/issues/index.tsx
index b2cb33f..030d33c 100644
--- a/src/dev-toolbar/issues/index.tsx
+++ b/src/dev-toolbar/issues/index.tsx
@@ -1,25 +1,23 @@
 import type { JSX } from '@solidjs/web';
-import { createMemo, createSignal, DEV, For, Show } from 'solid-js';
+import { DEV, Show } from 'solid-js';
 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, TreeIcon } from '../icons.js';
+import { EyeIcon, TreeIcon } from '../icons.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { pageRoute } from '../report/markdown.js';
 import { issueReport } from '../report/issue-report.js';
-import { isIssuesAvailable, issueText, type IssueEntry, type IssueEvent } from './tracker.js';
+import { issueText, type IssueEntry, type IssueEvent } from './tracker.js';
 import './styles.css';
 
-type Severity = IssueEvent['severity'];
+export type Severity = IssueEvent['severity'];
 
-const SEVERITIES: { value: Severity; label: string }[] = [
+export const SEVERITIES: { value: Severity; label: string }[] = [
   { value: 'error', label: 'Errors' },
   { value: 'warn', label: 'Warnings' },
   { value: 'info', label: 'Info' },
 ];
 
-const BADGES: Record<Severity, 'failure' | 'warning' | 'info'> = {
+export const BADGES: Record<Severity, 'failure' | 'warning' | 'info'> = {
   error: 'failure',
   warn: 'warning',
   info: 'info',
@@ -59,281 +57,167 @@ function time(at: number): string {
   return new Date(at).toLocaleTimeString();
 }
 
-export interface IssuesViewerProps {
-  show?: boolean;
-  entries: IssueEntry[];
-  onClear: () => void;
+/** Whether an issue's code, message, node or owners contain the lowercased `search`. */
+export function matchesIssue(entry: IssueEntry, search: string): boolean {
+  if (!search) return true;
+  const { event } = entry;
+  for (const text of [
+    event.code,
+    event.message,
+    event.nodeName ?? '',
+    ...(event.ownerPath ?? []),
+  ]) {
+    if (text.toLowerCase().includes(search)) return true;
+  }
+  return false;
+}
+
+export interface IssueRowProps {
+  entry: IssueEntry;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+export function IssueRow(props: IssueRowProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      data-solid-issues-row
+      data-severity={props.entry.event.severity}
+      data-selected={props.selected ? '' : undefined}
+      onClick={props.onSelect}
+    >
+      <span data-solid-issues-row-head>
+        <Badge type={BADGES[props.entry.event.severity]}>{props.entry.event.code}</Badge>
+        <Show when={props.entry.count > 1}>
+          <span data-solid-issues-row-count>{`×${props.entry.count}`}</span>
+        </Show>
+        <Show when={props.entry.event.ownerPath?.length}>
+          <Text data-solid-issues-row-owner options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
+            {props.entry.event.ownerPath!.join(' › ')}
+          </Text>
+        </Show>
+      </span>
+      <Text data-solid-issues-row-message options={{ size: 'xs' }}>
+        {issueText(props.entry.event)}
+      </Text>
+    </button>
+  );
+}
+
+export interface IssueDetailProps {
+  entry: IssueEntry;
   /** Opens the owner of a finding in the ownership tree. */
   onViewOwner?: (owner: object) => void;
   /** Opens the node of a finding in the reactivity graph. */
   onViewInGraph?: (node: object) => void;
 }
 
-export default function IssuesViewer(props: IssuesViewerProps): JSX.Element {
-  const [query, setQuery] = createSignal('');
-  const [hidden, setHidden] = createSignal<Severity[]>([]);
-  const [selected, setSelected] = createSignal<string>();
-
-  const shown = createMemo(() => {
-    const search = query().trim().toLowerCase();
-    const off = hidden();
-    return props.entries.filter((entry) => {
-      if (off.includes(entry.event.severity)) return false;
-      if (!search) return true;
-      const { event } = entry;
-      return [event.code, event.message, event.nodeName ?? '', ...(event.ownerPath ?? [])].some(
-        (text) => text.toLowerCase().includes(search),
-      );
-    });
-  });
-
-  const selectedEntry = createMemo(() => {
-    const key = selected();
-    return key ? props.entries.find((entry) => entry.key === key) : undefined;
-  });
-
-  function toggleSeverity(value: Severity): void {
-    setHidden((current) =>
-      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
-    );
-  }
-
+export function IssueDetail(props: IssueDetailProps): JSX.Element {
+  const subject = () => props.entry.subject?.deref();
+  const guide = () => guideUrl(props.entry.event.code);
   return (
-    <Show when={props.show}>
-      <div data-solid-dev-toolbar-panel>
-        <div data-solid-issues-viewer>
-          <div data-solid-issues-nav>
-            <input
-              data-solid-issues-search
-              type="search"
-              placeholder="Filter by code, message or owner"
-              value={query()}
-              onInput={(event) => setQuery(event.currentTarget.value)}
-            />
-            <div data-solid-issues-filters>
-              <For each={SEVERITIES}>
-                {(severity) => (
-                  <button
-                    type="button"
-                    data-solid-issues-filter={severity.value}
-                    data-off={hidden().includes(severity.value) ? '' : undefined}
-                    aria-pressed={hidden().includes(severity.value) ? 'false' : 'true'}
-                    onClick={() => toggleSeverity(severity.value)}
-                  >
-                    <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>
-                      {severity.label}
-                    </Text>
-                  </button>
-                )}
-              </For>
-            </div>
-            <div data-solid-issues-nav-actions>
-              <Text data-solid-issues-count options={{ size: 'xs', font: 'mono' }}>
-                {`${shown().length} of ${props.entries.length}`}
+    <div data-solid-issues-detail>
+      <div data-solid-issues-detail-head>
+        <Badge type={BADGES[props.entry.event.severity]}>{props.entry.event.severity}</Badge>
+        <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
+          {props.entry.event.code}
+        </Text>
+        <CopyReportButton
+          label="this issue"
+          report={() => issueReport({ entry: props.entry, guideUrl: guide(), route: pageRoute() })}
+        />
+      </div>
+
+      <Text data-solid-issues-detail-message options={{ size: 'xs' }}>
+        {issueText(props.entry.event)}
+      </Text>
+
+      <div data-solid-kv-table>
+        <div data-solid-kv-row>
+          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+            Kind
+          </Text>
+          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+            {props.entry.event.kind}
+          </Text>
+        </div>
+        <Show when={props.entry.event.ownerPath?.length}>
+          <div data-solid-kv-row>
+            <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+              Owner
+            </Text>
+            <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+              {props.entry.event.ownerPath!.join(' › ')}
+            </Text>
+          </div>
+        </Show>
+        <Show when={props.entry.event.nodeName}>
+          {(name) => (
+            <div data-solid-kv-row>
+              <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                Node
+              </Text>
+              <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                {name()}
               </Text>
-              <IconButton
-                disabled={!props.entries.length}
-                onClick={() => {
-                  setSelected(undefined);
-                  props.onClear();
-                }}
-              >
-                <TrashIcon title="Clear issues" />
-              </IconButton>
             </div>
-          </div>
+          )}
+        </Show>
+        <div data-solid-kv-row>
+          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+            Seen
+          </Text>
+          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+            {props.entry.count > 1
+              ? `${props.entry.count} times, ${time(props.entry.firstAt)} to ${time(props.entry.lastAt)}`
+              : `once, ${time(props.entry.lastAt)}`}
+          </Text>
+        </div>
+      </div>
 
-          <div data-solid-issues-body>
-            <Show
-              when={isIssuesAvailable()}
-              fallback={
-                <Placeholder>
-                  <Text options={{ size: 'xs' }}>Issues need a development build of solid-js.</Text>
-                </Placeholder>
-              }
+      <div data-solid-issues-actions>
+        <Show when={props.onViewOwner && subject()}>
+          {(current) => (
+            <button
+              type="button"
+              data-solid-issues-action
+              onClick={() => props.onViewOwner?.(ownerOf(current()))}
             >
-              <div data-solid-issues-list>
-                <Show
-                  when={shown().length}
-                  fallback={
-                    <Placeholder>
-                      <Text options={{ size: 'xs' }}>
-                        {props.entries.length
-                          ? 'Nothing matches this filter.'
-                          : 'No issues reported by the runtime.'}
-                      </Text>
-                    </Placeholder>
-                  }
-                >
-                  <For each={shown()}>
-                    {(entry) => (
-                      <button
-                        type="button"
-                        data-solid-issues-row
-                        data-severity={entry.event.severity}
-                        data-selected={selected() === entry.key ? '' : undefined}
-                        onClick={() =>
-                          setSelected((current) => (current === entry.key ? undefined : entry.key))
-                        }
-                      >
-                        <span data-solid-issues-row-head>
-                          <Badge type={BADGES[entry.event.severity]}>{entry.event.code}</Badge>
-                          <Show when={entry.count > 1}>
-                            <span data-solid-issues-row-count>{`×${entry.count}`}</span>
-                          </Show>
-                          <Show when={entry.event.ownerPath?.length}>
-                            <Text
-                              data-solid-issues-row-owner
-                              options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}
-                            >
-                              {entry.event.ownerPath!.join(' › ')}
-                            </Text>
-                          </Show>
-                        </span>
-                        <Text data-solid-issues-row-message options={{ size: 'xs' }}>
-                          {issueText(entry.event)}
-                        </Text>
-                      </button>
-                    )}
-                  </For>
-                </Show>
-              </div>
-
-              <Show when={selectedEntry()}>
-                {(entry) => {
-                  const subject = () => entry().subject?.deref();
-                  const guide = () => guideUrl(entry().event.code);
-                  return (
-                    <aside data-solid-issues-detail>
-                      <div data-solid-issues-detail-head>
-                        <Badge type={BADGES[entry().event.severity]}>
-                          {entry().event.severity}
-                        </Badge>
-                        <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
-                          {entry().event.code}
-                        </Text>
-                        <CopyReportButton
-                          label="this issue"
-                          report={() =>
-                            issueReport({ entry: entry(), guideUrl: guide(), route: pageRoute() })
-                          }
-                        />
-                      </div>
-
-                      <Text data-solid-issues-detail-message options={{ size: 'xs' }}>
-                        {issueText(entry().event)}
-                      </Text>
-
-                      <div data-solid-kv-table>
-                        <div data-solid-kv-row>
-                          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-                            Kind
-                          </Text>
-                          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-                            {entry().event.kind}
-                          </Text>
-                        </div>
-                        <Show when={entry().event.ownerPath?.length}>
-                          <div data-solid-kv-row>
-                            <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-                              Owner
-                            </Text>
-                            <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-                              {entry().event.ownerPath!.join(' › ')}
-                            </Text>
-                          </div>
-                        </Show>
-                        <Show when={entry().event.nodeName}>
-                          {(name) => (
-                            <div data-solid-kv-row>
-                              <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-                                Node
-                              </Text>
-                              <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-                                {name()}
-                              </Text>
-                            </div>
-                          )}
-                        </Show>
-                        <div data-solid-kv-row>
-                          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-                            Seen
-                          </Text>
-                          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-                            {entry().count > 1
-                              ? `${entry().count} times, ${time(entry().firstAt)} to ${time(entry().lastAt)}`
-                              : `once, ${time(entry().lastAt)}`}
-                          </Text>
-                        </div>
-                      </div>
-
-                      <div data-solid-issues-actions>
-                        <Show when={props.onViewOwner && subject()}>
-                          {(current) => (
-                            <button
-                              type="button"
-                              data-solid-issues-action
-                              onClick={() => props.onViewOwner?.(ownerOf(current()))}
-                            >
-                              <TreeIcon title="" aria-hidden="true" />
-                              <Text options={{ size: 'xs', weight: 'semibold' }}>
-                                Show in the ownership tree
-                              </Text>
-                            </button>
-                          )}
-                        </Show>
-                        <Show
-                          when={
-                            props.onViewInGraph && subject() && isInGraph(subject()!) && subject()
-                          }
-                        >
-                          {(current) => (
-                            <button
-                              type="button"
-                              data-solid-issues-action
-                              onClick={() => props.onViewInGraph?.(current())}
-                            >
-                              <EyeIcon title="" aria-hidden="true" />
-                              <Text options={{ size: 'xs', weight: 'semibold' }}>
-                                Show in the reactivity graph
-                              </Text>
-                            </button>
-                          )}
-                        </Show>
-                        <Show when={guide()}>
-                          {(url) => (
-                            <a
-                              data-solid-issues-action
-                              href={url()}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              <Text options={{ size: 'xs', weight: 'semibold' }}>
-                                Open the repair guide
-                              </Text>
-                            </a>
-                          )}
-                        </Show>
-                      </div>
+              <TreeIcon title="" aria-hidden="true" />
+              <Text options={{ size: 'xs', weight: 'semibold' }}>Show in the ownership tree</Text>
+            </button>
+          )}
+        </Show>
+        <Show when={props.onViewInGraph && subject() && isInGraph(subject()!) && subject()}>
+          {(current) => (
+            <button
+              type="button"
+              data-solid-issues-action
+              onClick={() => props.onViewInGraph?.(current())}
+            >
+              <EyeIcon title="" aria-hidden="true" />
+              <Text options={{ size: 'xs', weight: 'semibold' }}>Show in the reactivity graph</Text>
+            </button>
+          )}
+        </Show>
+        <Show when={guide()}>
+          {(url) => (
+            <a data-solid-issues-action href={url()} target="_blank" rel="noreferrer">
+              <Text options={{ size: 'xs', weight: 'semibold' }}>Open the repair guide</Text>
+            </a>
+          )}
+        </Show>
+      </div>
 
-                      <Show when={entry().event.data && Object.keys(entry().event.data!).length}>
-                        <div data-solid-issues-data>
-                          <Text options={{ size: 'xs', weight: 'semibold' }}>Data</Text>
-                          <pre>
-                            <Text options={{ size: 'xs', font: 'mono' }}>
-                              {dataText(entry().event.data!)}
-                            </Text>
-                          </pre>
-                        </div>
-                      </Show>
-                    </aside>
-                  );
-                }}
-              </Show>
-            </Show>
-          </div>
+      <Show when={props.entry.event.data && Object.keys(props.entry.event.data!).length}>
+        <div data-solid-issues-data>
+          <Text options={{ size: 'xs', weight: 'semibold' }}>Data</Text>
+          <pre>
+            <Text options={{ size: 'xs', font: 'mono' }}>{dataText(props.entry.event.data!)}</Text>
+          </pre>
         </div>
-      </div>
-    </Show>
+      </Show>
+    </div>
   );
 }
diff --git a/src/dev-toolbar/issues/styles.css b/src/dev-toolbar/issues/styles.css
index b355d52..8688b0a 100644
--- a/src/dev-toolbar/issues/styles.css
+++ b/src/dev-toolbar/issues/styles.css
@@ -201,13 +201,11 @@
 
   gap: 0.625rem;
 
-  width: 24rem;
-  flex-shrink: 0;
+  flex: 1;
   min-height: 0;
 
   padding: 0.625rem 0.75rem;
 
-  border-left: var(--start-dt-border-soft) 1px solid;
   overflow: auto;
 }
 
diff --git a/src/dev-toolbar/reactivity/index.tsx b/src/dev-toolbar/reactivity/index.tsx
index 3040670..49c5807 100644
--- a/src/dev-toolbar/reactivity/index.tsx
+++ b/src/dev-toolbar/reactivity/index.tsx
@@ -145,6 +145,8 @@ export interface ReactivityViewerProps {
   ownerFilter?: object;
   /** Filters nodes to those owned by or under a specific component name. */
   componentFilter?: string;
+  /** Drops the component filter set by the element inspector. */
+  onClearComponentFilter?: () => void;
 }
 
 function isDescendantOf(owner: object | undefined, target: object): boolean {
@@ -517,6 +519,23 @@ export default function ReactivityViewer(props: ReactivityViewerProps): JSX.Elem
                 )}
               </For>
             </div>
+            <Show when={props.componentFilter}>
+              {(name) => (
+                <span data-solid-reactivity-component-filter>
+                  <Text
+                    options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}
+                  >{`Under ${name()}`}</Text>
+                  <button
+                    type="button"
+                    title="Clear component filter"
+                    aria-label="Clear component filter"
+                    onClick={() => props.onClearComponentFilter?.()}
+                  >
+                    ×
+                  </button>
+                </span>
+              )}
+            </Show>
             <div data-solid-reactivity-nav-actions>
               <Text data-solid-reactivity-count options={{ size: 'xs', font: 'mono' }}>
                 {`${visibleNodes().length} nodes / ${visibleEdges().length} edges`}
diff --git a/src/dev-toolbar/reactivity/styles.css b/src/dev-toolbar/reactivity/styles.css
index 82e9dd9..e6e96b0 100644
--- a/src/dev-toolbar/reactivity/styles.css
+++ b/src/dev-toolbar/reactivity/styles.css
@@ -580,3 +580,34 @@
 [data-solid-reactivity-owner]:hover {
   text-decoration: underline;
 }
+
+[data-solid-reactivity-component-filter] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  padding: 0.0625rem 0.25rem 0.0625rem 0.5rem;
+
+  border-radius: 9999px;
+  background: var(--start-dt-accent-soft);
+  color: var(--start-dt-accent);
+}
+
+[data-solid-reactivity-component-filter] button {
+  display: grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+
+  padding: 0;
+  border: none;
+  border-radius: 9999px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+[data-solid-reactivity-component-filter] button:hover {
+  background: oklch(0.68 0.13 245 / 0.25);
+}
diff --git a/src/dev-toolbar/timeline/group.test.ts b/src/dev-toolbar/timeline/group.test.ts
new file mode 100644
index 0000000..34aad43
--- /dev/null
+++ b/src/dev-toolbar/timeline/group.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { groupEntries } from './group.js';
+import type { TimelineEntry } from './tracker.js';
+
+function entry(id: number, label: string, writes = 1, flushMs = 2): TimelineEntry {
+  return {
+    id,
+    origin: undefined,
+    label,
+    at: 0,
+    interaction: undefined,
+    writes: Array.from({ length: writes }, () => ({}) as never),
+    runs: [],
+    droppedRuns: 3,
+    flushes: 1,
+    flushMs,
+    holds: [],
+    navigations: [],
+    calls: [],
+  };
+}
+
+describe('groupEntries', () => {
+  it('returns nothing for no entries', () => {
+    expect(groupEntries([])).toEqual([]);
+  });
+
+  it('keeps a lone entry as a plain row', () => {
+    const groups = groupEntries([entry(3, 'a'), entry(2, 'b'), entry(1, 'a')]);
+    expect(groups.map((group) => group.folded)).toEqual([false, false, false]);
+    expect(groups.map((group) => group.entries.length)).toEqual([1, 1, 1]);
+  });
+
+  it('folds consecutive entries with the same label', () => {
+    const groups = groupEntries([
+      entry(5, 'update: tick'),
+      entry(4, 'update: tick'),
+      entry(3, 'update: tick'),
+      entry(2, 'click'),
+      entry(1, 'update: tick'),
+    ]);
+    expect(groups.map((group) => [group.label, group.entries.length, group.folded])).toEqual([
+      ['update: tick', 3, true],
+      ['click', 1, false],
+      ['update: tick', 1, false],
+    ]);
+  });
+
+  it('sums the writes, re-runs and durations', () => {
+    const [group] = groupEntries([entry(2, 'a', 2, 1.5), entry(1, 'a', 3, 2.5)]);
+    expect(group.writes).toBe(5);
+    expect(group.runs).toBe(6);
+    expect(group.totalMs).toBe(4);
+  });
+
+  it('keys a group by its oldest entry so it survives new entries', () => {
+    const [before] = groupEntries([entry(2, 'a'), entry(1, 'a')]);
+    const [after] = groupEntries([entry(3, 'a'), entry(2, 'a'), entry(1, 'a')]);
+    expect(before.key).toBe(1);
+    expect(after.key).toBe(1);
+  });
+});
diff --git a/src/dev-toolbar/timeline/group.ts b/src/dev-toolbar/timeline/group.ts
new file mode 100644
index 0000000..69acb4c
--- /dev/null
+++ b/src/dev-toolbar/timeline/group.ts
@@ -0,0 +1,76 @@
+import type { TimelineEntry } from './tracker.js';
+
+/** Fewest consecutive entries with one label that fold into one row. */
+export const MIN_FOLD = 2;
+
+/** The total time of the entry: the interaction's settle time, else its flushes. */
+export function entryDuration(entry: TimelineEntry): number {
+  return entry.interaction?.settledMs ?? entry.flushMs;
+}
+
+export function entryRunCount(entry: TimelineEntry): number {
+  return entry.interaction?.runs ?? entry.runs.length + entry.droppedRuns;
+}
+
+export interface TimelineGroup {
+  /**
+   * The id of the group's oldest entry. The list is newest first, so new
+   * entries join at the front and this id stays the same while the run grows.
+   */
+  key: number;
+  label: string;
+  /** In list order. A group of one is a plain row. */
+  entries: TimelineEntry[];
+  folded: boolean;
+  writes: number;
+  runs: number;
+  calls: number;
+  /** The sum of the entries' durations. */
+  totalMs: number;
+}
+
+/** Folds runs of consecutive entries that share a label into one group each. */
+export function groupEntries(entries: readonly TimelineEntry[]): TimelineGroup[] {
+  const groups: TimelineGroup[] = [];
+  let run: TimelineEntry[] = [];
+
+  function closeRun(): void {
+    if (!run.length) return;
+    const folded = run.length >= MIN_FOLD;
+    // A run that is too short stays as one group per entry.
+    if (folded) groups.push(summarize(run, true));
+    else for (const entry of run) groups.push(summarize([entry], false));
+    run = [];
+  }
+
+  for (const entry of entries) {
+    // A different label ends the run.
+    if (run.length && run[0].label !== entry.label) closeRun();
+    run.push(entry);
+  }
+  closeRun();
+  return groups;
+}
+
+function summarize(entries: TimelineEntry[], folded: boolean): TimelineGroup {
+  let writes = 0;
+  let runs = 0;
+  let calls = 0;
+  let totalMs = 0;
+  for (const entry of entries) {
+    writes += entry.writes.length;
+    runs += entryRunCount(entry);
+    calls += entry.calls.length;
+    totalMs += entryDuration(entry);
+  }
+  return {
+    key: entries[entries.length - 1].id,
+    label: entries[0].label,
+    entries,
+    folded,
+    writes,
+    runs,
+    calls,
+    totalMs,
+  };
+}
diff --git a/src/dev-toolbar/timeline/index.tsx b/src/dev-toolbar/timeline/index.tsx
index 32a5e9e..b315c9a 100644
--- a/src/dev-toolbar/timeline/index.tsx
+++ b/src/dev-toolbar/timeline/index.tsx
@@ -4,7 +4,9 @@ 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 { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
 import { EyeIcon, TrashIcon } from '../icons.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { pageRoute } from '../report/markdown.js';
@@ -16,6 +18,7 @@ import {
   type TimelineEntry,
   type TimelineRun,
 } from './tracker.js';
+import { entryDuration, entryRunCount, groupEntries, type TimelineGroup } from './group.js';
 import './styles.css';
 
 function outcomeBadge(entry: TimelineEntry): JSX.Element {
@@ -26,15 +29,6 @@ function outcomeBadge(entry: TimelineEntry): JSX.Element {
   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 (
@@ -179,6 +173,104 @@ function CallRow(props: {
   );
 }
 
+interface EntryRowProps {
+  entry: TimelineEntry;
+  selected: boolean;
+  nested?: boolean;
+  onSelect: (id: number) => void;
+}
+
+function EntryRow(props: EntryRowProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      data-solid-timeline-row
+      data-kind={props.entry.origin ? 'interaction' : 'update'}
+      data-selected={props.selected ? '' : undefined}
+      data-nested={props.nested ? '' : undefined}
+      onClick={() => props.onSelect(props.entry.id)}
+    >
+      <span data-solid-timeline-row-head>
+        {outcomeBadge(props.entry)}
+        <Text
+          data-solid-timeline-row-label
+          options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}
+        >
+          {props.entry.label}
+        </Text>
+      </span>
+      <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
+        {[
+          plural(props.entry.writes.length, 'write'),
+          plural(entryRunCount(props.entry), 're-run'),
+          ...(props.entry.calls.length ? [plural(props.entry.calls.length, 'call')] : []),
+          ms(entryDuration(props.entry)),
+        ].join(' · ')}
+      </Text>
+    </button>
+  );
+}
+
+interface GroupRowsProps {
+  group: TimelineGroup;
+  open: boolean;
+  selected: number | undefined;
+  onToggle: () => void;
+  onSelect: (id: number) => void;
+}
+
+/** A run of entries with one label: a summary row that opens into the entries. */
+function GroupRows(props: GroupRowsProps): JSX.Element {
+  // A closed group shows the selection of an entry inside it.
+  const holdsSelection = () =>
+    !props.open && props.group.entries.some((entry) => entry.id === props.selected);
+  return (
+    <div data-solid-timeline-group data-open={props.open ? '' : undefined}>
+      <button
+        type="button"
+        data-solid-timeline-row
+        data-solid-timeline-group-head
+        data-selected={holdsSelection() ? '' : undefined}
+        aria-expanded={props.open ? 'true' : 'false'}
+        onClick={props.onToggle}
+      >
+        <span data-solid-timeline-row-head>
+          <span data-solid-timeline-chevron aria-hidden="true">
+            {props.open ? '▾' : '▸'}
+          </span>
+          <Text
+            data-solid-timeline-row-label
+            options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}
+          >
+            {props.group.label}
+          </Text>
+          <Badge type="info">{`×${props.group.entries.length}`}</Badge>
+        </span>
+        <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
+          {[
+            plural(props.group.writes, 'write'),
+            plural(props.group.runs, 're-run'),
+            ...(props.group.calls ? [plural(props.group.calls, 'call')] : []),
+            `${ms(props.group.totalMs)} total`,
+          ].join(' · ')}
+        </Text>
+      </button>
+      <Show when={props.open}>
+        <For each={props.group.entries}>
+          {(entry) => (
+            <EntryRow
+              entry={entry}
+              nested
+              selected={props.selected === entry.id}
+              onSelect={props.onSelect}
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}
+
 export interface TimelineViewerProps {
   show?: boolean;
   entries: TimelineEntry[];
@@ -194,6 +286,8 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
   const [showUnnamed, setShowUnnamed] = createSignal(false);
   const [selected, setSelected] = createSignal<number>();
   const [openRuns, setOpenRuns] = createSignal<number[]>([]);
+  const [openGroups, setOpenGroups] = createSignal<number[]>([]);
+  const detail = useResizableDetail({ storageKey: 'solid-start-devtools:timeline-detail-width' });
 
   const unnamedCount = createMemo(() => props.entries.filter(isUnnamedUpdate).length);
 
@@ -211,6 +305,9 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
     );
   });
 
+  // Folding runs after filtering, so the search only sees the entries it matches.
+  const groups = createMemo(() => groupEntries(shown()));
+
   const selectedEntry = createMemo(() => {
     const id = selected();
     return id === undefined ? undefined : props.entries.find((entry) => entry.id === id);
@@ -221,6 +318,12 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
     setSelected((current) => (current === id ? undefined : id));
   }
 
+  function toggleGroup(key: number): void {
+    setOpenGroups((current) =>
+      current.includes(key) ? current.filter((item) => item !== key) : [...current, key],
+    );
+  }
+
   function toggleRun(run: number): void {
     setOpenRuns((current) =>
       current.includes(run) ? current.filter((item) => item !== run) : [...current, run],
@@ -292,38 +395,26 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
                     </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)}
+                  <For each={groups()}>
+                    {(group) => (
+                      <Show
+                        when={group.folded}
+                        fallback={
+                          <EntryRow
+                            entry={group.entries[0]}
+                            selected={selected() === group.entries[0].id}
+                            onSelect={select}
+                          />
+                        }
                       >
-                        <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'),
-                            ...(entry.calls.length ? [plural(entry.calls.length, 'call')] : []),
-                            ms(duration(entry)),
-                          ].join(' · ')}
-                        </Text>
-                      </button>
+                        <GroupRows
+                          group={group}
+                          open={openGroups().includes(group.key)}
+                          selected={selected()}
+                          onToggle={() => toggleGroup(group.key)}
+                          onSelect={select}
+                        />
+                      </Show>
                     )}
                   </For>
                 </Show>
@@ -331,7 +422,8 @@ export default function TimelineViewer(props: TimelineViewerProps): JSX.Element
 
               <Show when={selectedEntry()}>
                 {(entry) => (
-                  <aside data-solid-timeline-detail>
+                  <aside data-solid-timeline-detail style={{ width: `${detail.width()}px` }}>
+                    <ResizeHandle detail={detail} />
                     <div data-solid-timeline-detail-head>
                       {outcomeBadge(entry())}
                       <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
diff --git a/src/dev-toolbar/timeline/styles.css b/src/dev-toolbar/timeline/styles.css
index 9537423..dd47219 100644
--- a/src/dev-toolbar/timeline/styles.css
+++ b/src/dev-toolbar/timeline/styles.css
@@ -153,7 +153,10 @@
 
   gap: 0.625rem;
 
-  width: 26rem;
+  position: relative;
+
+  /* Keeps the list usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
   flex-shrink: 0;
   min-height: 0;
 
@@ -353,3 +356,24 @@ button[data-solid-timeline-call]:hover {
 [data-solid-timeline-note] {
   color: var(--start-dt-text-muted);
 }
+
+[data-solid-timeline-group] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-solid-timeline-group] > [data-solid-timeline-row] {
+  flex-shrink: 0;
+}
+
+[data-solid-timeline-row][data-nested] {
+  padding-left: 1.75rem;
+}
+
+[data-solid-timeline-chevron] {
+  width: 0.75rem;
+  flex-shrink: 0;
+
+  color: var(--start-dt-text-muted);
+  text-align: center;
+}
diff --git a/tests/e2e/devtools.spec.ts b/tests/e2e/devtools.spec.ts
index 86bc1c0..5b4b6a5 100644
--- a/tests/e2e/devtools.spec.ts
+++ b/tests/e2e/devtools.spec.ts
@@ -23,11 +23,22 @@ async function readJavaScript(directory: string): Promise<string> {
   return sources.join('\n');
 }
 
-// Opens the dock on a tab. The dock sits below the page, which can scroll past
-// it, so the fixture stays clickable while it is open.
+// The view each panel belongs to. Health has no panels of its own.
+const VIEW_OF: Record<string, string> = {
+  Timeline: 'Activity',
+  Async: 'Activity',
+  'Server functions': 'Activity',
+  Ownership: 'Structure',
+  Reactivity: 'Structure',
+};
+
+// Opens the dock on a view, or on a panel of a view. The dock sits below the
+// page, which can scroll past it, so the fixture stays clickable while it is open.
 async function openTab(page: Page, name: string) {
   const launcher = page.getByRole('button', { name: 'Open Start Devtools' });
   if (await launcher.isVisible()) await launcher.click();
+  const view = VIEW_OF[name];
+  if (view) await page.getByRole('tab', { name: view, exact: true }).click();
   await page.getByRole('tab', { name, exact: true }).click();
 }
 
@@ -56,7 +67,7 @@ test('docks at the bottom of the page', async ({ page }) => {
   );
 
   // Dragging the top edge resizes it, and a reload keeps the height and the tab.
-  await page.getByRole('tab', { name: 'Ownership', exact: true }).click();
+  await openTab(page, 'Ownership');
   await page.mouse.move(viewport.width / 2, box.y + 1);
   await page.mouse.down();
   await page.mouse.move(viewport.width / 2, box.y - 100, { steps: 4 });
@@ -114,12 +125,16 @@ test('moves focus with the dock and leaves typing alone', async ({ page }) => {
   const dock = page.getByRole('region', { name: 'Start Devtools' });
   const handle = page.getByRole('button', { name: 'Open Start Devtools' });
 
-  // Opening focuses the selected tab, and closing focuses the handle.
+  // Opening focuses the selected view, and closing focuses the handle.
   await handle.focus();
   await page.keyboard.press('Enter');
-  await expect(page.getByRole('tab', { name: 'Server functions', exact: true })).toBeFocused();
+  await expect(page.getByRole('tab', { name: 'Activity', exact: true })).toBeFocused();
   await page.keyboard.press('End');
-  await expect(page.getByRole('tab', { name: 'Ownership', exact: true })).toBeFocused();
+  await expect(page.getByRole('tab', { name: 'Structure', exact: true })).toBeFocused();
+  await expect(page.getByRole('tab', { name: 'Ownership', exact: true })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
   await page.keyboard.press('Alt+Shift+KeyD');
   await expect(dock).toBeHidden();
   await expect(handle).toBeFocused();
@@ -233,8 +248,8 @@ test('captures client errors', async ({ page }) => {
   await page.goto('/');
   await page.locator('#throw-client-error').click();
 
-  // An error opens the dock on its tab.
-  await expect(page.getByRole('tab', { name: 'Errors', exact: true })).toHaveAttribute(
+  // An error opens the dock on the Health view.
+  await expect(page.getByRole('tab', { name: 'Health', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
@@ -562,8 +577,8 @@ test('lists runtime issues', async ({ page }) => {
 
   // Each render of the reader reports the same untracked read.
   for (let i = 0; i < 3; i++) await page.locator('#emit-warning').click();
-  await openTab(page, 'Issues');
-  await expect(page.getByRole('tab', { name: 'Issues', exact: true })).toContainText('2');
+  await openTab(page, 'Health');
+  await expect(page.getByRole('tab', { name: 'Health', exact: true })).toContainText('2');
 
   const rows = page.locator('[data-solid-issues-row]');
   await expect(rows).toHaveCount(1);
@@ -592,10 +607,10 @@ test('lists runtime issues', async ({ page }) => {
   );
 
   // Clearing empties the list and the count.
-  await openTab(page, 'Issues');
-  await page.getByRole('button', { name: 'Clear issues' }).click();
+  await openTab(page, 'Health');
+  await page.getByRole('button', { name: 'Clear errors and issues' }).click();
   await expect(rows).toHaveCount(0);
-  await expect(page.getByRole('tab', { name: 'Issues', exact: true })).not.toContainText('2');
+  await expect(page.getByRole('tab', { name: 'Health', exact: true })).not.toContainText('2');
 });
 
 test('shows what each action re-ran and why', async ({ page }) => {
@@ -714,7 +729,7 @@ test('copies a report of the whole session', async ({ page, context }) => {
   await page.locator('#increment-count').click();
   await page.locator('#emit-warning').click();
 
-  await openTab(page, 'Errors');
+  await openTab(page, 'Health');
   await page.getByRole('button', { name: 'Copy the whole session for an agent' }).click();
   await expect.poll(clipboard).toContain('# Solid devtools session');
   const report = await clipboard();
@@ -891,29 +906,24 @@ test('inspects elements and funnels components across panels', async ({ page })
   await expect(overlay).toBeHidden();
   await expect(inspectButton).not.toHaveAttribute('data-active', '');
 
-  // 4. Verify the funnel badge appears in the header.
-  const funnel = page.locator('[data-solid-dev-toolbar-funnel]');
-  await expect(funnel).toBeVisible();
-  const funnelName = page.locator('[data-solid-dev-toolbar-funnel-name]');
-  await expect(funnelName).toHaveText('<Counter>');
-
-  // 5. Clicking the component name in the funnel jumps to the Ownership tree.
-  await funnelName.click();
-  await expect(page.getByRole('tab', { name: 'Ownership' })).toHaveAttribute(
+  // 4. The pick opens in the Ownership tree, selected.
+  await expect(page.getByRole('tab', { name: 'Ownership', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
   await expect(page.locator('[data-solid-ownership-row][data-selected]')).toContainText('Counter');
   await expect(page.locator('[data-solid-ownership-detail]')).toBeVisible();
 
-  // 6. Switching to Reactivity isolates nodes belonging to the selected owner instance.
-  await page.getByRole('tab', { name: 'Reactivity' }).click();
+  // 5. Reactivity isolates nodes under the picked component and says so.
+  await page.getByRole('tab', { name: 'Reactivity', exact: true }).click();
+  const filter = page.locator('[data-solid-reactivity-component-filter]');
+  await expect(filter).toContainText('Under <Counter>');
   const graphNodes = page.locator('[data-solid-reactivity-node-name]');
   await expect(graphNodes.filter({ hasText: 'count' })).toBeVisible();
 
-  // 7. Clear the funnel.
-  await page.getByRole('button', { name: 'Clear component funnel' }).click();
-  await expect(funnel).toHaveCount(0);
+  // 6. Clearing the filter shows the whole graph again.
+  await page.getByRole('button', { name: 'Clear component filter' }).click();
+  await expect(filter).toHaveCount(0);
 
   // 8. Test keyboard shortcut Alt+Shift+C and Escape cancel.
   await page.keyboard.press('Alt+Shift+C');

From f054645f7ba7ee716d3f0031a98062f73d10073f Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 10:40:10 +0800
Subject: [PATCH 02/10] fix(dock): read the issue count in the pull tab's label

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/dev-toolbar/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/dev-toolbar/index.tsx b/src/dev-toolbar/index.tsx
index e44dd2d..ff6273d 100644
--- a/src/dev-toolbar/index.tsx
+++ b/src/dev-toolbar/index.tsx
@@ -515,6 +515,14 @@ export function DevToolbar(props: DevToolbarProps) {
     });
   }
 
+  // The pull tab reads out the counts it shows.
+  function handleLabel(): string {
+    const counts: string[] = [];
+    if (errors().length) counts.push(`${errors().length} errors`);
+    if (issueCount()) counts.push(`${issueCount()} issues`);
+    return ['Open Start Devtools', ...counts].join(', ');
+  }
+
   const badge = (value: Tab): number => (value === 'fn' ? callCount() : 0);
 
   return (
@@ -528,11 +536,7 @@ export function DevToolbar(props: DevToolbarProps) {
             type="button"
             data-solid-dev-toolbar-handle
             data-errors={errors().length ? '' : undefined}
-            aria-label={
-              errors().length
-                ? `Open Start Devtools, ${errors().length} errors`
-                : 'Open Start Devtools'
-            }
+            aria-label={handleLabel()}
             title="Start Devtools (Alt+Shift+D)"
             hidden={open()}
             onPointerDown={(event) => onDragHeight(event, true)}

From 9f6bd351dda4ecd55e10a9d5f27811d43c63f867 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 11:52:00 +0800
Subject: [PATCH 03/10] feat(dock): build the Health, Activity and Structure
 views to the prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The views keep the approved prototype's layout instead of the old panels.

- Activity merges actions, server calls, async records and errors into one
  stream with a lanes strip, filter chips, time groups and folded repeats.
  An action shows its writes, re-runs and effects, waterfalls of re-runs
  and server calls, its interaction, holds and outcome.
- Health lists errors and issues with search and severity chips. An error
  shows where it was thrown, when, the action it happened in, the stack
  beside the source and "Open in editor".
- Structure switches between the ownership tree and the reactivity graph.
  Rows show counts and update heat, Solid's own components fold away, and
  the detail lists props, signals and memos with a signal's last change.
- A ⌘K palette finds components, signals, memos, actions and calls.
- The header has the three views and the search box, and errors keep
  when they were caught and the action they happened in.

Fixes found along the way: the timeline drops repeats of one label before
distinct actions when full, the toolbar's own fallbacks and pull-tab clicks
stay out of Activity, and the value editor no longer recurses when a panel
hands it its own bridge node.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/dock-three-views.md                |   13 +-
 README.md                                     |   10 +-
 src/dev-toolbar/activity/detail.tsx           |  734 ++++++++++
 src/dev-toolbar/activity/index.tsx            |  451 +++++++
 src/dev-toolbar/activity/model.test.ts        |  474 +++++++
 src/dev-toolbar/activity/model.ts             |  860 ++++++++++++
 src/dev-toolbar/activity/scrub.tsx            |  158 +++
 src/dev-toolbar/activity/styles.css           |  622 +++++++++
 src/dev-toolbar/async/index.tsx               |    4 +-
 src/dev-toolbar/async/tracker.ts              |   16 +
 src/dev-toolbar/error-record.ts               |   25 +
 src/dev-toolbar/error-viewer/CodeView.tsx     |   22 +-
 src/dev-toolbar/error-viewer/frames.test.ts   |   40 +-
 src/dev-toolbar/error-viewer/frames.ts        |   50 +
 src/dev-toolbar/error-viewer/index.tsx        |  365 ++---
 src/dev-toolbar/error-viewer/styles.css       |  433 +++---
 src/dev-toolbar/functions/index.tsx           |   31 +-
 src/dev-toolbar/health/HealthButton.css       |   79 ++
 src/dev-toolbar/health/HealthButton.tsx       |   26 +
 src/dev-toolbar/health/HealthRow.tsx          |   45 +
 src/dev-toolbar/health/describe-error.ts      |   10 +
 src/dev-toolbar/health/index.tsx              |  327 +++--
 src/dev-toolbar/health/leading-pane.ts        |   16 +
 src/dev-toolbar/health/styles.css             |  223 +++-
 src/dev-toolbar/health/time.test.ts           |   28 +
 src/dev-toolbar/health/time.ts                |   25 +
 src/dev-toolbar/index.css                     |  177 ++-
 src/dev-toolbar/index.tsx                     |  337 +++--
 src/dev-toolbar/issues/index.tsx              |  223 ++--
 src/dev-toolbar/issues/styles.css             |  308 +----
 src/dev-toolbar/ownership/builtins.ts         |   50 +
 src/dev-toolbar/ownership/heat.test.ts        |  109 ++
 src/dev-toolbar/ownership/heat.ts             |  137 ++
 src/dev-toolbar/ownership/index.tsx           | 1189 ++++++++++-------
 src/dev-toolbar/ownership/registry.ts         |    5 +
 src/dev-toolbar/ownership/runs.test.ts        |   46 +
 src/dev-toolbar/ownership/runs.ts             |   44 +
 src/dev-toolbar/ownership/styles.css          |  673 ++++------
 src/dev-toolbar/ownership/tree.test.ts        |   14 +
 src/dev-toolbar/ownership/tree.ts             |   46 +
 src/dev-toolbar/palette/index.tsx             |  229 ++++
 src/dev-toolbar/palette/search.test.ts        |   53 +
 src/dev-toolbar/palette/search.ts             |   96 ++
 src/dev-toolbar/palette/styles.css            |  182 +++
 src/dev-toolbar/reactivity/ValueInspector.tsx |    2 +-
 src/dev-toolbar/reactivity/index.tsx          |    3 +
 src/dev-toolbar/reactivity/value-editor.ts    |   20 +-
 src/dev-toolbar/report/CopyReportButton.tsx   |   19 +
 src/dev-toolbar/structure/index.tsx           |  119 ++
 .../structure/signal-history.test.ts          |   19 +
 src/dev-toolbar/structure/signal-history.ts   |   35 +
 src/dev-toolbar/structure/styles.css          |   48 +
 src/dev-toolbar/timeline/index.tsx            |  557 --------
 src/dev-toolbar/timeline/styles.css           |  379 ------
 src/dev-toolbar/timeline/tracker.test.ts      |   23 +-
 src/dev-toolbar/timeline/tracker.ts           |   45 +-
 tests/e2e/devtools.spec.ts                    |  246 ++--
 57 files changed, 7409 insertions(+), 3111 deletions(-)
 create mode 100644 src/dev-toolbar/activity/detail.tsx
 create mode 100644 src/dev-toolbar/activity/index.tsx
 create mode 100644 src/dev-toolbar/activity/model.test.ts
 create mode 100644 src/dev-toolbar/activity/model.ts
 create mode 100644 src/dev-toolbar/activity/scrub.tsx
 create mode 100644 src/dev-toolbar/activity/styles.css
 create mode 100644 src/dev-toolbar/error-record.ts
 create mode 100644 src/dev-toolbar/health/HealthButton.css
 create mode 100644 src/dev-toolbar/health/HealthButton.tsx
 create mode 100644 src/dev-toolbar/health/HealthRow.tsx
 create mode 100644 src/dev-toolbar/health/describe-error.ts
 create mode 100644 src/dev-toolbar/health/leading-pane.ts
 create mode 100644 src/dev-toolbar/health/time.test.ts
 create mode 100644 src/dev-toolbar/health/time.ts
 create mode 100644 src/dev-toolbar/ownership/builtins.ts
 create mode 100644 src/dev-toolbar/ownership/heat.test.ts
 create mode 100644 src/dev-toolbar/ownership/heat.ts
 create mode 100644 src/dev-toolbar/ownership/runs.test.ts
 create mode 100644 src/dev-toolbar/ownership/runs.ts
 create mode 100644 src/dev-toolbar/palette/index.tsx
 create mode 100644 src/dev-toolbar/palette/search.test.ts
 create mode 100644 src/dev-toolbar/palette/search.ts
 create mode 100644 src/dev-toolbar/palette/styles.css
 create mode 100644 src/dev-toolbar/structure/index.tsx
 create mode 100644 src/dev-toolbar/structure/signal-history.test.ts
 create mode 100644 src/dev-toolbar/structure/signal-history.ts
 create mode 100644 src/dev-toolbar/structure/styles.css
 delete mode 100644 src/dev-toolbar/timeline/index.tsx
 delete mode 100644 src/dev-toolbar/timeline/styles.css

diff --git a/.changeset/dock-three-views.md b/.changeset/dock-three-views.md
index e1426f2..0a4a6d4 100644
--- a/.changeset/dock-three-views.md
+++ b/.changeset/dock-three-views.md
@@ -2,9 +2,10 @@
 '@solidjs/start-devtools': minor
 ---
 
-- The dock groups its panels into three views: Health (errors and runtime issues in one list), Activity (Timeline, Async and Server functions) and Structure (Ownership and Reactivity).
-- The header and the pull tab show the `solid-js` version the app runs, in place of the toolbar's title and version. The pull tab also counts issues.
-- The error panel lists stack frames beside the source, folds frames from libraries, and opens the selected frame in the editor.
-- The Timeline folds runs of the same action into one row with a count.
-- The detail panes of Health, Timeline, Async and Server functions, and the split between stack frames and source, are resizable.
-- Picking an element with the inspector opens it in the ownership tree. The Reactivity graph shows the component filter the pick sets, with a button to clear it.
+- The dock has three views in its header: Health, Activity and Structure. The header shows the `solid-js` version the app runs, in place of the toolbar's title and version.
+- Health lists thrown errors and runtime issues together, with search and severity chips. An error shows the function it was thrown in, when it was caught, the action it was caught during with a link to it, its stack frames beside the source, and "Open in editor".
+- Activity merges actions, server-function calls, async loads and waits, and errors into one stream with a lanes strip, filter chips and time groups. Repeated actions fold into one row. An action shows what it wrote, what re-ran and which effects ran, then waterfalls of its re-runs and server calls.
+- Structure shows the ownership tree or the reactivity graph. Tree rows show signal and memo counts and how recently and how often their computations update. "Hide Solid internals" folds Solid's own components away. The detail lists props, signals and memos by kind, with a signal's previous value.
+- ⌘K (Ctrl+K) opens a search across components, signals, memos, actions and server functions while the dock is open.
+- The timeline keeps distinct actions when one action repeats many times, such as an animation loop.
+- Every list and detail split is resizable.
diff --git a/README.md b/README.md
index 59b18eb..ebce45c 100644
--- a/README.md
+++ b/README.md
@@ -21,11 +21,15 @@ center. Click it, drag it up, or press Alt+Shift+D to open it. Drag its top edge
 its height. It remembers whether it was open, its tab and its height across reloads, and an
 error opens it on the Health view.
 
-The panels are grouped into three views, picked in the header:
+The dock has three views, picked in the header:
 
 - **Health**: thrown errors and the issues the runtime reports, in one list.
-- **Activity**: the Timeline, Async and Server functions panels.
-- **Structure**: the Ownership tree and the Reactivity graph.
+- **Activity**: one stream of actions, server-function calls, async loads and errors, with
+  a strip of lanes over time.
+- **Structure**: the ownership tree, or the reactivity graph.
+
+Press ⌘K (Ctrl+K) while the dock is open to find a component, signal, memo, action or
+server function by name.
 
 The header and the pull tab show the `solid-js` version the app runs.
 
diff --git a/src/dev-toolbar/activity/detail.tsx b/src/dev-toolbar/activity/detail.tsx
new file mode 100644
index 0000000..5b56a54
--- /dev/null
+++ b/src/dev-toolbar/activity/detail.tsx
@@ -0,0 +1,734 @@
+import type { JSX } from '@solidjs/web';
+import { createMemo, createSignal, For, onCleanup, Show } from 'solid-js';
+import type { ChangeRecord } from 'solid-js/attribution';
+import { RecordRows } from '../async/index.js';
+import { concernOf, type AsyncRecord } from '../async/tracker.js';
+import { Badge } from '../../ui/Badge.js';
+import type { ErrorRecord } from '../error-record.js';
+import { copyCallReport, ServerFunctionContent } from '../functions/index.js';
+import type { ServerFunctionInstance } from '../functions/index.js';
+import { openInEditor } from '../open-in-editor.js';
+import { Text } from '../../ui/Text.js';
+import { asyncDuration, asyncOrigin, asyncReport, asyncTitle } from '../report/async-report.js';
+import { copyText } from '../report/CopyReportButton.js';
+import { pageRoute } from '../report/markdown.js';
+import { ms, plural, timelineReport } from '../report/timeline-report.js';
+import { entryDuration } from '../timeline/group.js';
+import type { TimelineEntry, TimelineRun } from '../timeline/tracker.js';
+import {
+  actionKey,
+  barMs,
+  callBars,
+  callDuration,
+  callName,
+  callStatus,
+  clockTime,
+  describeThrown,
+  entryLocation,
+  eventName,
+  firstMemoDelta,
+  GLYPHS,
+  runBars,
+  serverKey,
+  summarizeChain,
+  type LiveLoad,
+  type ValueMemory,
+  type WaterfallBar,
+} from './model.js';
+
+/** How long a button shows that it copied. */
+const COPIED_MS = 1500;
+
+function OpenIcon(): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="14"
+      height="14"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M7 17 17 7M8 7h9v9" />
+    </svg>
+  );
+}
+
+/** A text button that copies a report for an agent to read. */
+export function CopyReport(props: {
+  label: string;
+  report: () => string | Promise<string>;
+}): JSX.Element {
+  const [state, setState] = createSignal<'idle' | 'busy' | 'copied' | 'failed'>('idle');
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  onCleanup(() => clearTimeout(timer));
+
+  async function copy(): Promise<void> {
+    if (state() === 'busy') return;
+    setState('busy');
+    try {
+      await copyText(await props.report());
+      setState('copied');
+    } catch (error) {
+      console.warn('[solid dev toolbar] failed to copy the report', error);
+      setState('failed');
+    }
+    clearTimeout(timer);
+    timer = setTimeout(() => setState('idle'), COPIED_MS);
+  }
+
+  return (
+    <button
+      type="button"
+      data-solid-activity-btn
+      data-solid-copy-report={state()}
+      aria-label={`Copy ${props.label} for an agent`}
+      disabled={state() === 'busy'}
+      onClick={copy}
+    >
+      {state() === 'copied' ? 'Copied' : state() === 'failed' ? 'Could not copy' : 'Copy report'}
+    </button>
+  );
+}
+
+function Glyph(props: { kind: 'act' | 'srv' | 'wait' | 'err' }): JSX.Element {
+  return (
+    <span data-solid-activity-glyph={props.kind} aria-hidden="true">
+      {GLYPHS[props.kind]}
+    </span>
+  );
+}
+
+function Section(props: { title: string; aside?: string; children: JSX.Element }): JSX.Element {
+  return (
+    <>
+      <div data-solid-activity-sect>
+        <span>{props.title}</span>
+        <Show when={props.aside}>
+          <span>{props.aside}</span>
+        </Show>
+      </div>
+      {props.children}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------- action
+
+/** `0 → 1` with the old value red and the new one green. */
+function Delta(props: { prev: string | undefined; value: string | undefined }): JSX.Element {
+  return (
+    <Show when={props.value !== undefined}>
+      <Show
+        when={props.prev !== undefined}
+        fallback={<span data-solid-activity-ins>{props.value}</span>}
+      >
+        <span data-solid-activity-del>{props.prev}</span>
+        {' → '}
+        <span data-solid-activity-ins>{props.value}</span>
+      </Show>
+    </Show>
+  );
+}
+
+function causeText(cause: ChangeRecord): string {
+  if (cause.kind === 'derived') return `${cause.name} changed`;
+  const values =
+    cause.value === undefined
+      ? ''
+      : cause.prev === undefined
+        ? ` ${cause.value}`
+        : ` ${cause.prev} → ${cause.value}`;
+  return `${cause.kind} ${cause.name}${values}`;
+}
+
+/** The changes behind a run, each with the changes behind it. */
+function CauseList(props: { causes: ChangeRecord[] }): JSX.Element {
+  return (
+    <ul data-solid-activity-causes>
+      <For each={props.causes}>
+        {(cause) => (
+          <li>
+            <span>{`← ${causeText(cause)}`}</span>
+            <Show when={cause.causes?.length}>
+              <CauseList causes={cause.causes!} />
+            </Show>
+          </li>
+        )}
+      </For>
+    </ul>
+  );
+}
+
+function RunCauses(props: {
+  runs: TimelineRun[];
+  onViewInGraph?: (node: object) => void;
+}): JSX.Element {
+  return (
+    <div data-solid-activity-why>
+      <For each={props.runs}>
+        {(run) => (
+          <>
+            <Show
+              when={run.event.causes.length}
+              fallback={
+                <Text options={{ size: 'xs' }}>
+                  No tracked change caused this run, such as a retry after an error.
+                </Text>
+              }
+            >
+              <CauseList causes={run.event.causes} />
+            </Show>
+            <Show when={props.onViewInGraph && run.node?.deref()}>
+              {(node) => (
+                <button
+                  type="button"
+                  data-solid-activity-btn
+                  onClick={() => props.onViewInGraph?.(node())}
+                >
+                  View in graph
+                </button>
+              )}
+            </Show>
+          </>
+        )}
+      </For>
+    </div>
+  );
+}
+
+function RunRows(props: {
+  bars: WaterfallBar[];
+  onViewInGraph?: (node: object) => void;
+}): JSX.Element {
+  const [open, setOpen] = createSignal<string[]>([]);
+
+  function toggle(key: string): void {
+    // Step 1: close the row if it is open.
+    const next: string[] = [];
+    let wasOpen = false;
+    for (const item of open()) {
+      if (item === key) wasOpen = true;
+      else next.push(item);
+    }
+    // Step 2: otherwise open it.
+    if (!wasOpen) next.push(key);
+    setOpen(next);
+  }
+
+  return (
+    <For each={props.bars} keyed={(bar) => bar.key}>
+      {(bar) => (
+        <>
+          <div
+            data-solid-activity-wf
+            data-kind={bar().kind}
+            role="button"
+            tabindex="0"
+            aria-expanded={open().includes(bar().key) ? 'true' : 'false'}
+            title="Show what caused this re-run"
+            onClick={() => toggle(bar().key)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                toggle(bar().key);
+              }
+            }}
+          >
+            <span>{bar().name}</span>
+            <div data-solid-activity-track>
+              <i style={{ left: `${bar().left}%`, width: `${bar().width}%` }} />
+            </div>
+            <span data-solid-activity-ms>{barMs(bar().ms)}</span>
+          </div>
+          <Show when={open().includes(bar().key)}>
+            <RunCauses runs={bar().runs} onViewInGraph={props.onViewInGraph} />
+          </Show>
+        </>
+      )}
+    </For>
+  );
+}
+
+function OutcomePill(props: { entry: TimelineEntry }): JSX.Element {
+  const outcome = () => props.entry.interaction?.outcome;
+  return (
+    <Show when={props.entry.origin}>
+      <span
+        data-solid-activity-pill={
+          outcome() === 'held' ? 'held' : outcome() === 'committed' ? 'committed' : 'idle'
+        }
+        data-solid-timeline-outcome
+      >
+        {outcome() ?? (props.entry.interaction ? 'idle' : 'pending')}
+      </span>
+    </Show>
+  );
+}
+
+function KvRow(props: { label: string; value: string }): JSX.Element {
+  return (
+    <div data-solid-kv-row>
+      <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+        {props.label}
+      </Text>
+      <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+        {props.value}
+      </Text>
+    </div>
+  );
+}
+
+export interface ActionDetailProps {
+  entry: TimelineEntry;
+  /** How many entries the row folded. */
+  count: number;
+  memory: ValueMemory;
+  /** Read to re-draw when the memory learned of new values. */
+  observed: () => number;
+  onSelect: (key: string) => void;
+  onShowInStructure?: (node: object) => void;
+  onViewInGraph?: (node: object) => void;
+}
+
+export function ActionDetail(props: ActionDetailProps): JSX.Element {
+  const chain = createMemo(() => summarizeChain(props.entry));
+  const location = createMemo(() => entryLocation(props.entry));
+  const rerun = createMemo(() => {
+    props.observed();
+    return firstMemoDelta(props.entry, props.memory);
+  });
+  const runs = createMemo(() => runBars(props.entry));
+  const calls = createMemo(() => callBars(props.entry));
+  const node = createMemo(() => {
+    for (const run of props.entry.runs) {
+      const live = run.node?.deref();
+      if (live) return live;
+    }
+    return undefined;
+  });
+  const sub = createMemo(() => {
+    const parts: string[] = [];
+    const found = location();
+    if (found) parts.push(found.label);
+    const event = eventName(props.entry);
+    if (event) parts.push(event);
+    parts.push(ms(entryDuration(props.entry)));
+    parts.push(clockTime(props.entry.at));
+    return parts.join(' · ');
+  });
+
+  return (
+    <div data-solid-activity-detail-body data-kind="action">
+      <h2>
+        <Glyph kind="act" />
+        <span data-solid-activity-title>{props.entry.label}</span>
+        <OutcomePill entry={props.entry} />
+        <Show when={props.count > 1}>
+          <span data-solid-activity-count>{`×${props.count}`}</span>
+        </Show>
+      </h2>
+      <div data-solid-activity-sub>
+        {sub()}
+        <Show when={props.count > 1}>{` · latest of ${props.count}`}</Show>
+      </div>
+
+      <div data-solid-activity-chain>
+        <div data-solid-activity-node>
+          <small>Wrote</small>
+          <Show when={chain().wrote} fallback={<code data-solid-activity-none>nothing</code>}>
+            {(wrote) => (
+              <>
+                <code>{wrote().name}</code>
+                <div data-solid-activity-delta>
+                  <Delta prev={wrote().prev} value={wrote().value} />
+                  <Show when={wrote().more}>{` +${wrote().more} more`}</Show>
+                </div>
+              </>
+            )}
+          </Show>
+        </div>
+        <div data-solid-activity-arrow aria-hidden="true">
+          →
+        </div>
+        <div data-solid-activity-node>
+          <small>Re-ran</small>
+          <code data-solid-activity-none={chain().reran ? undefined : ''}>
+            {chain().reran || 'nothing'}
+          </code>
+          <Show when={rerun()}>
+            {(item) => (
+              <div data-solid-activity-delta>
+                {`${item().name} `}
+                <Delta prev={item().delta.before} value={item().delta.after} />
+              </div>
+            )}
+          </Show>
+        </div>
+        <div data-solid-activity-arrow aria-hidden="true">
+          →
+        </div>
+        <div data-solid-activity-node>
+          <small>Effects</small>
+          <code data-solid-activity-none={chain().effects ? undefined : ''}>
+            {chain().effects || 'none'}
+          </code>
+        </div>
+      </div>
+
+      <Show when={props.entry.interaction}>
+        {(interaction) => (
+          <Section title="Interaction">
+            <div data-solid-activity-kv data-solid-kv-table>
+              <Show when={interaction().inputDelayMs !== undefined}>
+                <KvRow label="Input delay" value={ms(interaction().inputDelayMs)} />
+              </Show>
+              <KvRow label="Handler" value={ms(interaction().handlerMs)} />
+              <KvRow label="Re-runs" value={`${interaction().runs}, ${ms(interaction().runMs)}`} />
+              <Show when={interaction().settledMs !== undefined}>
+                <KvRow label="Settled" value={`${ms(interaction().settledMs)} after the event`} />
+              </Show>
+            </div>
+          </Section>
+        )}
+      </Show>
+
+      <Show when={runs().bars.length}>
+        <Section title="Re-runs" aside={ms(runs().totalMs)}>
+          <RunRows bars={runs().bars} onViewInGraph={props.onViewInGraph} />
+          <Show when={props.entry.droppedRuns}>
+            <div data-solid-activity-note>
+              {`${plural(props.entry.droppedRuns, 're-run')} not listed.`}
+            </div>
+          </Show>
+        </Section>
+      </Show>
+
+      <Show when={calls().bars.length}>
+        <Section title="Server" aside={ms(calls().totalMs)}>
+          <For each={calls().bars} keyed={(bar) => bar.key}>
+            {(bar) => (
+              <button
+                type="button"
+                data-solid-activity-wf
+                data-kind="server"
+                disabled={!bar().instance}
+                title={bar().instance ? 'Open this call' : undefined}
+                onClick={() => {
+                  const instance = bar().instance;
+                  if (instance) props.onSelect(serverKey(instance));
+                }}
+              >
+                <span>{`ƒ ${bar().name}`}</span>
+                <div data-solid-activity-track>
+                  <i style={{ left: `${bar().left}%`, width: `${bar().width}%` }} />
+                </div>
+                <span data-solid-activity-ms>{barMs(bar().ms)}</span>
+              </button>
+            )}
+          </For>
+        </Section>
+      </Show>
+
+      <Show when={props.entry.holds.length}>
+        <Section title="Holds">
+          <For each={props.entry.holds}>
+            {(hold) => (
+              <div data-solid-activity-hold data-solid-timeline-hold>
+                {`${ms(hold.holdMs)}${hold.blockers.length ? `, waiting on ${hold.blockers.join(', ')}` : ''}`}
+              </div>
+            )}
+          </For>
+        </Section>
+      </Show>
+
+      <div data-solid-activity-btnrow>
+        <Show when={location()}>
+          {(found) => (
+            <button
+              type="button"
+              data-solid-activity-btn
+              data-primary
+              onClick={() => openInEditor(found().location)}
+            >
+              <OpenIcon />
+              {`Open ${found().label}`}
+            </button>
+          )}
+        </Show>
+        <Show when={props.onShowInStructure && node()}>
+          {(live) => (
+            <button
+              type="button"
+              data-solid-activity-btn
+              onClick={() => props.onShowInStructure?.(live())}
+            >
+              Show in Structure
+            </button>
+          )}
+        </Show>
+        <CopyReport
+          label="this update"
+          report={() => timelineReport({ entry: props.entry, route: pageRoute() })}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- server call
+
+export interface ServerDetailProps {
+  value: ServerFunctionInstance;
+  /** The action the call ran for. */
+  from: TimelineEntry | undefined;
+  onSelect: (key: string) => void;
+  onDelete: () => void;
+}
+
+export function ServerDetail(props: ServerDetailProps): JSX.Element {
+  const sub = createMemo(() => {
+    const parts: string[] = [callStatus(props.value), props.value.request.source.method];
+    const duration = callDuration(props.value);
+    if (duration !== undefined) parts.push(ms(duration));
+    parts.push(clockTime(props.value.request.time));
+    return parts.join(' · ');
+  });
+
+  return (
+    <div data-solid-activity-detail-body data-kind="server">
+      <h2>
+        <Glyph kind="srv" />
+        <span data-solid-activity-title>{callName(props.value)}</span>
+        <Show when={props.value.response}>
+          {(response) => (
+            <Badge type={response().source.ok ? 'success' : 'failure'}>
+              {response().source.status}
+            </Badge>
+          )}
+        </Show>
+      </h2>
+      <div data-solid-activity-sub>{sub()}</div>
+
+      <Show when={props.from}>
+        {(entry) => (
+          <Section title="Called by">
+            <button
+              type="button"
+              data-solid-activity-link
+              onClick={() => props.onSelect(actionKey(entry().id))}
+            >
+              <Glyph kind="act" />
+              {entry().label}
+            </button>
+          </Section>
+        )}
+      </Show>
+
+      <Section title="Request and response">
+        <ServerFunctionContent instance={props.value} />
+      </Section>
+
+      <div data-solid-activity-btnrow>
+        <CopyReport label="this call" report={() => copyCallReport(props.value)} />
+        <button type="button" data-solid-activity-btn onClick={props.onDelete}>
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- async
+
+export interface AsyncDetailProps {
+  record: AsyncRecord;
+  onViewInGraph?: (node: object) => void;
+  onViewOwner?: (owner: object) => void;
+}
+
+export function AsyncDetail(props: AsyncDetailProps): JSX.Element {
+  const node = createMemo(() => {
+    const current = props.record;
+    return current.type === 'load' || current.type === 'fallback'
+      ? current.node?.deref()
+      : undefined;
+  });
+  const sub = createMemo(() =>
+    [props.record.type, ms(asyncDuration(props.record)), clockTime(props.record.at)].join(' · '),
+  );
+
+  return (
+    <div data-solid-activity-detail-body data-kind="async">
+      <h2>
+        <Glyph kind="wait" />
+        <span data-solid-activity-title>{asyncTitle(props.record)}</span>
+      </h2>
+      <div data-solid-activity-sub>{sub()}</div>
+
+      <Show when={concernOf(props.record)}>
+        {(concern) => (
+          <Section title="Worth a look">
+            <div data-solid-activity-concern>{concern()}</div>
+          </Section>
+        )}
+      </Show>
+
+      <Section title="Details">
+        <div data-solid-kv-table>
+          <Show when={asyncOrigin(props.record)}>
+            {(origin) => (
+              <div data-solid-kv-row>
+                <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
+                  Started by
+                </Text>
+                <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
+                  {origin()}
+                </Text>
+              </div>
+            )}
+          </Show>
+          <RecordRows record={props.record} />
+        </div>
+      </Section>
+
+      <div data-solid-activity-btnrow>
+        <Show when={node()}>
+          {(current) => (
+            <>
+              <Show when={props.onViewInGraph && props.record.type === 'load'}>
+                <button
+                  type="button"
+                  data-solid-activity-btn
+                  data-primary
+                  onClick={() => props.onViewInGraph?.(current())}
+                >
+                  Show in the reactivity graph
+                </button>
+              </Show>
+              <Show when={props.onViewOwner}>
+                <button
+                  type="button"
+                  data-solid-activity-btn
+                  onClick={() => props.onViewOwner?.(current())}
+                >
+                  Show in the ownership tree
+                </button>
+              </Show>
+            </>
+          )}
+        </Show>
+        <CopyReport
+          label={`this ${props.record.type}`}
+          report={() => asyncReport({ record: props.record, route: pageRoute() })}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** A load in flight: the live list of the async panel. */
+export function LiveDetail(props: {
+  load: LiveLoad;
+  now: number;
+  onViewInGraph?: (node: object) => void;
+  onViewOwner?: (owner: object) => void;
+}): JSX.Element {
+  return (
+    <div data-solid-activity-detail-body data-kind="async">
+      <h2>
+        <Glyph kind="wait" />
+        <span data-solid-activity-title>{`${props.load.name} loading`}</span>
+      </h2>
+      <div data-solid-activity-sub>{`live · ${ms(props.now - props.load.since)}`}</div>
+      <Show when={props.load.ownerPath.length}>
+        <Section title="Owner">
+          <div data-solid-activity-concern data-plain>
+            {props.load.ownerPath.join(' › ')}
+          </div>
+        </Section>
+      </Show>
+      <div data-solid-activity-btnrow>
+        <Show when={props.onViewInGraph}>
+          <button
+            type="button"
+            data-solid-activity-btn
+            data-primary
+            onClick={() => props.onViewInGraph?.(props.load.raw)}
+          >
+            Show in the reactivity graph
+          </button>
+        </Show>
+        <Show when={props.onViewOwner}>
+          <button
+            type="button"
+            data-solid-activity-btn
+            onClick={() => props.onViewOwner?.(props.load.raw)}
+          >
+            Show in the ownership tree
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- error
+
+export interface ErrorDetailProps {
+  record: ErrorRecord;
+  entry: TimelineEntry | undefined;
+  onSelect: (key: string) => void;
+  onShowError?: () => void;
+}
+
+export function ErrorDetail(props: ErrorDetailProps): JSX.Element {
+  const thrown = createMemo(() => describeThrown(props.record.error));
+
+  return (
+    <div data-solid-activity-detail-body data-kind="error">
+      <h2>
+        <Glyph kind="err" />
+        <span data-solid-activity-title>{thrown().name}</span>
+      </h2>
+      <div data-solid-activity-sub>{clockTime(props.record.at)}</div>
+
+      <Section title="Message">
+        <div data-solid-activity-concern data-plain>
+          {thrown().message}
+        </div>
+      </Section>
+
+      <Show when={props.entry}>
+        {(entry) => (
+          <Section title="Thrown in">
+            <button
+              type="button"
+              data-solid-activity-link
+              onClick={() => props.onSelect(actionKey(entry().id))}
+            >
+              <Glyph kind="act" />
+              {entry().label}
+            </button>
+          </Section>
+        )}
+      </Show>
+
+      <div data-solid-activity-btnrow>
+        <Show when={props.onShowError}>
+          <button
+            type="button"
+            data-solid-activity-btn
+            data-primary
+            onClick={() => props.onShowError?.()}
+          >
+            Show error
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}
diff --git a/src/dev-toolbar/activity/index.tsx b/src/dev-toolbar/activity/index.tsx
new file mode 100644
index 0000000..edd343b
--- /dev/null
+++ b/src/dev-toolbar/activity/index.tsx
@@ -0,0 +1,451 @@
+import type { JSX } from '@solidjs/web';
+import { createEffect, createMemo, createSignal, For, getOwner, onCleanup, Show } from 'solid-js';
+import Placeholder from '../../ui/Placeholder.js';
+import { ResizeHandle } from '../../ui/ResizeHandle.js';
+import { Text } from '../../ui/Text.js';
+import { useResizableDetail } from '../../ui/use-resizable-detail.js';
+import { isAsyncAvailable, type AsyncHistory, type AsyncRecord } from '../async/tracker.js';
+import type { ErrorRecord } from '../error-record.js';
+import type { ServerFunctionInstance } from '../functions/index.js';
+import {
+  excludeReactiveOwner,
+  snapshotReactivityGraph,
+  startReactivityTracking,
+  subscribeReactivityGraph,
+} from '../reactivity/registry.js';
+import { isTimelineAvailable, type TimelineEntry } from '../timeline/tracker.js';
+import { ActionDetail, AsyncDetail, ErrorDetail, LiveDetail, ServerDetail } from './detail.js';
+import {
+  actionKey,
+  bucketRows,
+  collectRows,
+  GLYPHS,
+  inWindow,
+  layoutLanes,
+  matchesFilter,
+  matchesOwner,
+  resolveSelection,
+  serverKey,
+  ValueMemory,
+  type ActivityFilter,
+  type ActivityRow,
+  type LiveLoad,
+  type TimeWindow,
+} from './model.js';
+import { Scrub } from './scrub.js';
+import './styles.css';
+
+const FILTERS: { value: ActivityFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'actions', label: 'Actions' },
+  { value: 'server', label: 'Server' },
+  { value: 'async', label: 'Async' },
+];
+
+/** How often the group labels and the elapsed time of what loads now are redrawn. */
+const TICK_MS = 1000;
+
+export interface ActivityFocus {
+  /** Select the action that began with this interaction or frame. */
+  origin?: object;
+  /** Select the server-function call with this key. */
+  instance?: string;
+  /** Show only what involves this owner, such as `<OrderRow>`. */
+  ownerName?: string;
+}
+
+export interface ActivityViewerProps {
+  show?: boolean;
+  entries: TimelineEntry[];
+  /** The async history, to tell the sources of a load from the nodes that wait on them. */
+  history: AsyncHistory;
+  records: AsyncRecord[];
+  instances: Record<string, ServerFunctionInstance | undefined>;
+  errors: ErrorRecord[];
+  /**
+   * Another view asking Activity to show something. Pass a new object for every
+   * request, so asking for the same thing twice still selects it.
+   */
+  focus?: ActivityFocus;
+  /** Clears the timeline and the async history. The button shows only when this is given. */
+  onClear?: () => void;
+  onDeleteInstance: (instance: string) => void;
+  onViewInGraph?: (node: object) => void;
+  onViewOwner?: (owner: object) => void;
+  onShowInStructure?: (node: object) => void;
+  /** Opens the error at this index of `errors`. */
+  onShowError?: (index: number) => void;
+}
+
+function Row(props: { row: ActivityRow; selected: boolean; onSelect: () => void }): JSX.Element {
+  return (
+    <button
+      type="button"
+      data-solid-activity-row
+      data-kind={props.row.kind}
+      data-selected={props.selected ? '' : undefined}
+      data-repeat={props.row.count > 1 ? '' : undefined}
+      aria-pressed={props.selected ? 'true' : 'false'}
+      onClick={props.onSelect}
+    >
+      <span data-solid-activity-glyph={props.row.glyph} aria-hidden="true">
+        {GLYPHS[props.row.glyph]}
+      </span>
+      <div data-solid-activity-what>
+        <b>{props.row.title}</b>
+        <Show when={props.row.count > 1}>
+          <span data-solid-activity-count>{` ×${props.row.count}`}</span>
+        </Show>
+        <div>{props.row.subtitle}</div>
+      </div>
+      <div data-solid-activity-t>{props.row.time}</div>
+    </button>
+  );
+}
+
+/** Actions, server calls, async waits and thrown errors in one stream, with the selected one beside it. */
+export default function ActivityViewer(props: ActivityViewerProps): JSX.Element {
+  const detail = useResizableDetail({
+    storageKey: 'solid-start-devtools:activity-detail-width',
+    defaultWidth: 520,
+  });
+  // The live list reads the graph, which must not list the panel's own nodes.
+  excludeReactiveOwner(getOwner());
+
+  const [filter, setFilter] = createSignal<ActivityFilter>('all');
+  const [unfold, setUnfold] = createSignal(false);
+  const [selected, setSelected] = createSignal<string>();
+  const [timeRange, setTimeRange] = createSignal<TimeWindow>();
+  const [owner, setOwner] = createSignal<string>();
+  const [live, setLive] = createSignal<LiveLoad[]>([]);
+  const [now, setNow] = createSignal(performance.now());
+  const [observed, setObserved] = createSignal(0);
+  const since = new Map<string, number>();
+  const memory = new ValueMemory();
+
+  // What is loading now comes from the graph, so it is read only while the panel shows.
+  createEffect(
+    () => !!props.show,
+    (visible) => {
+      if (!visible) return;
+      function read(): void {
+        const nodes = snapshotReactivityGraph().nodes;
+        const ids = new Set<string>();
+        const loads: LiveLoad[] = [];
+        // Step 1: the nodes that wait on a source of async work are not listed, only the sources.
+        for (const node of nodes) {
+          if (!node.pending || node.kind === 'signal') continue;
+          if (!props.history.isSource(node.raw)) continue;
+          ids.add(node.id);
+          if (!since.has(node.id)) since.set(node.id, performance.now());
+          loads.push({
+            id: node.id,
+            name: node.name,
+            ownerPath: node.ownerPath,
+            since: since.get(node.id)!,
+            raw: node.raw,
+          });
+        }
+        // Step 2: forget what stopped loading.
+        for (const id of since.keys()) if (!ids.has(id)) since.delete(id);
+        setLive(loads);
+      }
+      const stop = startReactivityTracking();
+      const unsubscribe = subscribeReactivityGraph(read);
+      const timer = setInterval(() => setNow(performance.now()), TICK_MS);
+      read();
+      return () => {
+        clearInterval(timer);
+        unsubscribe();
+        stop();
+      };
+    },
+  );
+  onCleanup(() => since.clear());
+
+  // The values of the memos that re-ran are read as the runs arrive, so the next run can show what it changed from.
+  createEffect(
+    () => props.entries,
+    (entries) => {
+      memory.observe(entries);
+      setObserved((count) => count + 1);
+    },
+  );
+
+  // Another view asked for something.
+  createEffect(
+    () => props.focus,
+    (request) => {
+      if (!request) return;
+      if (request.ownerName !== undefined) setOwner(request.ownerName || undefined);
+      if (request.origin) {
+        for (const entry of props.entries) {
+          if (entry.origin !== request.origin) continue;
+          setFilter('all');
+          setTimeRange(undefined);
+          setSelected(actionKey(entry.id));
+          break;
+        }
+      }
+      if (request.instance) {
+        setFilter('all');
+        setTimeRange(undefined);
+        setSelected(serverKey(request.instance));
+      }
+    },
+  );
+
+  const collected = createMemo(() =>
+    collectRows({
+      entries: props.entries,
+      instances: props.instances,
+      records: props.records,
+      errors: props.errors,
+      live: live(),
+      unfold: unfold(),
+    }),
+  );
+
+  const shown = createMemo(() => {
+    const rows: ActivityRow[] = [];
+    const kind = filter();
+    const name = owner();
+    const range = timeRange();
+    for (const row of collected().rows) {
+      if (!matchesFilter(row, kind)) continue;
+      if (!matchesOwner(row, name)) continue;
+      if (!inWindow(row, range)) continue;
+      rows.push(row);
+    }
+    return rows;
+  });
+
+  const buckets = createMemo(() => bucketRows(shown(), now()));
+  const lanes = createMemo(() => layoutLanes(collected().rows));
+  const selection = createMemo(() => resolveSelection(collected().rows, selected()));
+
+  // Each detail reads its own memo, which holds the same object while the list
+  // redraws. A detail that read the selection itself would be told of every new
+  // list and rebuild its body, and a body that suspends would never settle.
+  const actionPick = createMemo(() => selection()?.entry);
+  const actionCount = createMemo(() => selection()?.row.count ?? 1);
+  const serverPick = createMemo(
+    () => {
+      const source = selection()?.row.source;
+      return source?.type === 'server' ? source : undefined;
+    },
+    { equals: (a, b) => a?.instance === b?.instance && a?.value === b?.value },
+  );
+  const asyncPick = createMemo(() => {
+    const source = selection()?.row.source;
+    return source?.type === 'async' ? source.record : undefined;
+  });
+  const livePick = createMemo(
+    () => {
+      const source = selection()?.row.source;
+      return source?.type === 'live' ? source.load : undefined;
+    },
+    { equals: (a, b) => a?.raw === b?.raw },
+  );
+  const errorPick = createMemo(
+    () => {
+      const source = selection()?.row.source;
+      return source?.type === 'error' ? source : undefined;
+    },
+    { equals: (a, b) => a?.record === b?.record && a?.entry === b?.entry },
+  );
+
+  /** The action a server call ran for. */
+  function callerOf(instance: string): TimelineEntry | undefined {
+    for (const entry of props.entries) {
+      for (const call of entry.calls) if (call.instance === instance) return entry;
+    }
+    return undefined;
+  }
+
+  function clear(): void {
+    setSelected(undefined);
+    setTimeRange(undefined);
+    props.onClear?.();
+  }
+
+  return (
+    <Show when={props.show}>
+      <div data-solid-dev-toolbar-panel>
+        <div data-solid-activity>
+          <Show
+            when={isTimelineAvailable() || isAsyncAvailable()}
+            fallback={
+              <Placeholder>
+                <Text options={{ size: 'xs' }}>
+                  Activity needs a development build of solid-js.
+                </Text>
+              </Placeholder>
+            }
+          >
+            <Scrub
+              lanes={lanes()}
+              window={timeRange()}
+              selected={selected()}
+              onWindow={setTimeRange}
+            />
+            <div data-solid-activity-split>
+              <div data-solid-activity-list>
+                <div data-solid-activity-filters>
+                  <For each={FILTERS}>
+                    {(item) => (
+                      <button
+                        type="button"
+                        data-solid-activity-chip
+                        data-filter={item.value}
+                        data-on={filter() === item.value ? '' : undefined}
+                        aria-pressed={filter() === item.value ? 'true' : 'false'}
+                        onClick={() => setFilter(item.value)}
+                      >
+                        {item.label}
+                      </button>
+                    )}
+                  </For>
+                  <Show when={owner()}>
+                    {(name) => (
+                      <button
+                        type="button"
+                        data-solid-activity-chip
+                        data-owner
+                        data-on=""
+                        title="Show everything again"
+                        onClick={() => setOwner(undefined)}
+                      >
+                        {`${name()} ×`}
+                      </button>
+                    )}
+                  </Show>
+                  <Show when={collected().folded || unfold()}>
+                    <button
+                      type="button"
+                      data-solid-activity-chip
+                      data-ghost
+                      data-on={unfold() ? '' : undefined}
+                      aria-pressed={unfold() ? 'true' : 'false'}
+                      title="Repeats and unnamed updates are folded"
+                      onClick={() => setUnfold((current) => !current)}
+                    >
+                      {`${collected().folded} ${unfold() ? 'unfolded' : 'folded'}`}
+                    </button>
+                  </Show>
+                  <Show when={props.onClear}>
+                    <button
+                      type="button"
+                      data-solid-activity-chip
+                      data-clear
+                      disabled={!collected().rows.length}
+                      title="Clear the timeline and the async history"
+                      onClick={clear}
+                    >
+                      Clear
+                    </button>
+                  </Show>
+                </div>
+
+                <Show
+                  when={shown().length}
+                  fallback={
+                    <div data-solid-activity-empty>
+                      {collected().rows.length
+                        ? 'Nothing matches this filter.'
+                        : 'Interact with the app to see what each action re-ran.'}
+                    </div>
+                  }
+                >
+                  <For each={buckets()} keyed={(bucket) => bucket.label}>
+                    {(bucket) => (
+                      <>
+                        <div data-solid-activity-group>{bucket().label}</div>
+                        <For each={bucket().rows} keyed={(row) => row.key}>
+                          {(row) => (
+                            <Row
+                              row={row()}
+                              selected={row().members.includes(selected() ?? '')}
+                              onSelect={() => setSelected(row().members[0])}
+                            />
+                          )}
+                        </For>
+                      </>
+                    )}
+                  </For>
+                </Show>
+              </div>
+
+              <aside data-solid-activity-detail style={{ width: `${detail.width()}px` }}>
+                <ResizeHandle detail={detail} />
+                <Show
+                  when={selection()}
+                  fallback={<div data-solid-activity-empty>Select an item to see what it did.</div>}
+                >
+                  <Show when={actionPick()}>
+                    {(entry) => (
+                      <ActionDetail
+                        entry={entry()}
+                        count={actionCount()}
+                        memory={memory}
+                        observed={observed}
+                        onSelect={setSelected}
+                        onShowInStructure={props.onShowInStructure}
+                        onViewInGraph={props.onViewInGraph}
+                      />
+                    )}
+                  </Show>
+                  <Show when={serverPick()}>
+                    {(pick) => (
+                      <ServerDetail
+                        value={pick().value}
+                        from={callerOf(pick().instance)}
+                        onSelect={setSelected}
+                        onDelete={() => {
+                          const instance = pick().instance;
+                          setSelected(undefined);
+                          props.onDeleteInstance(instance);
+                        }}
+                      />
+                    )}
+                  </Show>
+                  <Show when={asyncPick()}>
+                    {(record) => (
+                      <AsyncDetail
+                        record={record()}
+                        onViewInGraph={props.onViewInGraph}
+                        onViewOwner={props.onViewOwner}
+                      />
+                    )}
+                  </Show>
+                  <Show when={livePick()}>
+                    {(load) => (
+                      <LiveDetail
+                        load={load()}
+                        now={now()}
+                        onViewInGraph={props.onViewInGraph}
+                        onViewOwner={props.onViewOwner}
+                      />
+                    )}
+                  </Show>
+                  <Show when={errorPick()}>
+                    {(pick) => (
+                      <ErrorDetail
+                        record={pick().record}
+                        entry={pick().entry}
+                        onSelect={setSelected}
+                        onShowError={
+                          props.onShowError ? () => props.onShowError?.(pick().index) : undefined
+                        }
+                      />
+                    )}
+                  </Show>
+                </Show>
+              </aside>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/src/dev-toolbar/activity/model.test.ts b/src/dev-toolbar/activity/model.test.ts
new file mode 100644
index 0000000..c8580be
--- /dev/null
+++ b/src/dev-toolbar/activity/model.test.ts
@@ -0,0 +1,474 @@
+import { describe, expect, it } from 'vitest';
+import type { AsyncRecord } from '../async/tracker.js';
+import type { ErrorRecord } from '../error-record.js';
+import type { ServerFunctionInstance } from '../functions/index.js';
+import type { TimelineEntry, TimelineRun } from '../timeline/tracker.js';
+import {
+  bucketLabel,
+  bucketRows,
+  callBars,
+  collectRows,
+  countNames,
+  entryLocation,
+  firstMemoDelta,
+  handlerLocation,
+  inWindow,
+  layoutLanes,
+  makeWindow,
+  matchesFilter,
+  matchesOwner,
+  parseStackFrame,
+  previewValue,
+  resolveSelection,
+  runBars,
+  shiftWindow,
+  summarizeChain,
+  ValueMemory,
+  type ActivityRow,
+} from './model.js';
+
+const ORIGIN = { kind: 'interaction', name: 'click' } as const;
+
+function run(
+  id: number,
+  name: string,
+  kind: 'memo' | 'effect',
+  at: number,
+  selfMs: number,
+  value?: unknown,
+): TimelineRun {
+  return {
+    event: { run: id, at, nodeId: id, nodeKind: kind, nodeName: name, selfMs, causes: [] } as never,
+    node: value === undefined ? undefined : new WeakRef({ _value: value }),
+    effectMs: undefined,
+  };
+}
+
+function entry(id: number, label: string, at: number, extra: Partial<TimelineEntry> = {}) {
+  return {
+    id,
+    // An update with no origin and no named write counts as unnamed, so an entry has an origin by default.
+    origin: { kind: 'interaction', name: 'click' },
+    label,
+    at,
+    interaction: undefined,
+    // An entry with no write and no run is idle and never listed.
+    writes: [{ name: 'w' } as never],
+    runs: [],
+    droppedRuns: 0,
+    flushes: 1,
+    flushMs: 2,
+    holds: [],
+    navigations: [],
+    calls: [],
+    ...extra,
+  } as TimelineEntry;
+}
+
+function server(at: number, durationMs?: number, name = 'refundOrder'): ServerFunctionInstance {
+  const request = {
+    type: 'request',
+    id: 'fn',
+    instance: 'fn#1',
+    source: { method: 'POST' },
+    meta: { name },
+    time: at,
+  };
+  if (durationMs === undefined) return { request } as never;
+  return {
+    request,
+    response: { type: 'response', time: at + durationMs, source: { status: 200, ok: true } },
+  } as never;
+}
+
+function collect(overrides: Partial<Parameters<typeof collectRows>[0]> = {}) {
+  return collectRows({
+    entries: [],
+    instances: {},
+    records: [],
+    errors: [],
+    live: [],
+    unfold: false,
+    ...overrides,
+  });
+}
+
+describe('collectRows', () => {
+  it('merges every source into one stream, newest first', () => {
+    const wait = {
+      type: 'wait',
+      id: 1,
+      at: 300,
+      event: { blockers: ['user'], holdMs: 40, silent: false, long: false },
+    } as unknown as AsyncRecord;
+    const error: ErrorRecord = { error: new RangeError('bad'), at: 250, origin: undefined };
+    const { rows } = collect({
+      entries: [entry(2, 'click on b', 200), entry(1, 'click on a', 100)],
+      instances: { 'fn#1': server(150, 38) },
+      records: [wait],
+      errors: [error],
+    });
+    expect(rows.map((row) => row.kind)).toEqual(['async', 'error', 'action', 'server', 'action']);
+  });
+
+  it('names a thrown error by the action it happened in, joined by origin identity', () => {
+    const inAction = entry(1, 'click on button#a', 100, { origin: ORIGIN as never });
+    const { rows } = collect({
+      entries: [inAction],
+      errors: [
+        { error: new RangeError('bad'), at: 120, origin: ORIGIN as never },
+        { error: new TypeError('oops'), at: 130, origin: undefined },
+      ],
+    });
+    const errors = rows.filter((row) => row.kind === 'error');
+    expect(errors.map((row) => row.title)).toEqual(['TypeError', 'click on button#a']);
+    expect(errors[1]!.subtitle).toBe('RangeError: bad');
+  });
+
+  it('folds consecutive actions with one label and sums their stats', () => {
+    const writes = [{ name: 'x' } as never];
+    const { rows, folded } = collect({
+      entries: [
+        entry(3, 'tick', 300, { writes }),
+        entry(2, 'tick', 200, { writes }),
+        entry(1, 'tick', 100, { writes }),
+      ],
+    });
+    expect(rows).toHaveLength(1);
+    expect(rows[0]!.title).toBe('tick');
+    expect(rows[0]!.count).toBe(3);
+    expect(rows[0]!.subtitle).toBe('3 writes · every 100ms');
+    expect(rows[0]!.members).toEqual(['a:3', 'a:2', 'a:1']);
+    expect(folded).toBe(2);
+  });
+
+  it('shows every entry and the unnamed updates once unfolded', () => {
+    const unnamed = entry(4, 'update', 400, {
+      origin: undefined,
+      writes: [{ name: 'signal' } as never],
+    });
+    const entries = [unnamed, entry(3, 'tick', 300), entry(2, 'tick', 200)];
+    expect(collect({ entries }).rows).toHaveLength(1);
+    const unfolded = collect({ entries, unfold: true });
+    expect(unfolded.rows).toHaveLength(3);
+    expect(unfolded.folded).toBe(2);
+  });
+
+  it('writes the subtitle of an action from its counts', () => {
+    const { rows } = collect({
+      entries: [
+        entry(1, 'click', 0, {
+          writes: [{ name: 'a' } as never],
+          runs: [run(1, 'm', 'memo', 0, 1), run(2, 'e', 'effect', 0, 1)],
+          calls: [{ event: {} as never, instance: 'fn#1' }],
+        }),
+      ],
+    });
+    expect(rows[0]!.subtitle).toBe('1 write · 2 re-runs · 1 server call');
+  });
+
+  it('says where a server call came from', () => {
+    const { rows } = collect({
+      entries: [entry(1, 'click on b', 100, { calls: [{ event: {} as never, instance: 'fn#1' }] })],
+      instances: { 'fn#1': server(110, 38) },
+    });
+    const call = rows.find((row) => row.kind === 'server')!;
+    expect(call.subtitle).toBe('200 · from click on b');
+    expect(call.time).toBe('38.0ms');
+  });
+
+  it('keeps a pending call and skips a response that has no request', () => {
+    const { rows } = collect({
+      instances: { 'fn#1': server(10), 'fn#2': { response: {} } as never },
+    });
+    expect(rows).toHaveLength(1);
+    expect(rows[0]!.time).toBe('live');
+  });
+});
+
+describe('idle entries', () => {
+  it('never lists an entry that changed nothing', () => {
+    const idle = entry(1, 'click on the pull tab', 0, { writes: [] });
+    expect(collect({ entries: [idle] }).rows).toEqual([]);
+  });
+});
+
+describe('filters', () => {
+  const rows = collect({
+    entries: [entry(1, 'click', 100)],
+    instances: { 'fn#1': server(150, 5) },
+    errors: [{ error: new Error('x'), at: 120, origin: undefined }],
+    live: [{ id: 'n', name: 'user', ownerPath: ['<App>'], since: 90, raw: {} }],
+  }).rows;
+
+  it('keeps errors with the actions', () => {
+    const kinds = (filter: 'all' | 'actions' | 'server' | 'async') =>
+      rows.filter((row) => matchesFilter(row, filter)).map((row) => row.kind);
+    expect(kinds('all')).toHaveLength(4);
+    expect(kinds('actions').sort()).toEqual(['action', 'error']);
+    expect(kinds('server')).toEqual(['server']);
+    expect(kinds('async')).toEqual(['async']);
+  });
+
+  it('keeps what overlaps the window, and everything with no window', () => {
+    const [call] = rows.filter((row) => row.kind === 'server') as ActivityRow[];
+    expect(inWindow(call!, undefined)).toBe(true);
+    expect(inWindow(call!, { from: 0, to: 149 })).toBe(false);
+    expect(inWindow(call!, { from: 154, to: 200 })).toBe(true);
+    expect(inWindow(call!, { from: 156, to: 200 })).toBe(false);
+  });
+
+  it('matches an owner by the names the row involves', () => {
+    const action = collect({
+      entries: [entry(1, 'click', 0, { runs: [run(1, 'OrderRow total', 'memo', 0, 1)] })],
+    }).rows[0]!;
+    expect(matchesOwner(action, undefined)).toBe(true);
+    expect(matchesOwner(action, '<OrderRow>')).toBe(true);
+    expect(matchesOwner(action, '<Footer>')).toBe(false);
+    const load = rows.find((row) => row.source.type === 'live')!;
+    expect(matchesOwner(load, '<App>')).toBe(true);
+  });
+});
+
+describe('resolveSelection', () => {
+  it('finds the row and the entry of a key, folded or not', () => {
+    const { rows } = collect({
+      entries: [entry(2, 'tick', 200), entry(1, 'tick', 100), entry(3, 'other', 300)].sort(
+        (a, b) => b.at - a.at,
+      ),
+    });
+    const found = resolveSelection(rows, 'a:1');
+    expect(found?.row.count).toBe(2);
+    expect(found?.entry?.id).toBe(1);
+    expect(resolveSelection(rows, 'a:99')).toBeUndefined();
+    expect(resolveSelection(rows, undefined)).toBeUndefined();
+  });
+});
+
+describe('time groups', () => {
+  it('labels the age of a row', () => {
+    expect(bucketLabel(0)).toBe('just now');
+    expect(bucketLabel(4_999)).toBe('just now');
+    expect(bucketLabel(5_000)).toBe('5s ago');
+    expect(bucketLabel(12_000)).toBe('10s ago');
+    expect(bucketLabel(59_000)).toBe('50s ago');
+    expect(bucketLabel(60_000)).toBe('1m ago');
+    expect(bucketLabel(125_000)).toBe('2m ago');
+    expect(bucketLabel(3_600_000)).toBe('1h ago');
+    expect(bucketLabel(-10)).toBe('just now');
+  });
+
+  it('splits a newest-first list into runs with one label', () => {
+    const { rows } = collect({
+      entries: [entry(3, 'c', 99_000), entry(2, 'b', 98_000), entry(1, 'a', 20_000)],
+    });
+    const buckets = bucketRows(rows, 100_000);
+    expect(buckets.map((bucket) => [bucket.label, bucket.rows.length])).toEqual([
+      ['just now', 2],
+      ['1m ago', 1],
+    ]);
+  });
+});
+
+describe('lanes', () => {
+  it('places ticks by time and marks the actions with many re-runs', () => {
+    const many = Array.from({ length: 9 }, (_, i) => run(i, 'm', 'memo', 0, 1));
+    const { rows } = collect({
+      entries: [
+        entry(2, 'big', 1000, { runs: many, flushMs: 0 }),
+        entry(1, 'small', 0, { flushMs: 0 }),
+      ],
+      instances: { 'fn#1': server(500, 250) },
+      records: [
+        {
+          type: 'wait',
+          id: 1,
+          at: 250,
+          event: { blockers: [], holdMs: 500 },
+        } as unknown as AsyncRecord,
+      ],
+    });
+    const lanes = layoutLanes(rows);
+    expect(lanes.start).toBe(0);
+    expect(lanes.end).toBe(1000);
+    expect(lanes.actions.map((tick) => [tick.left, tick.big])).toEqual([
+      [100, true],
+      [0, false],
+    ]);
+    expect(lanes.server).toEqual([{ left: 50, width: 25, big: false, member: 's:fn#1' }]);
+    expect(lanes.async).toEqual([{ left: 25, width: 50, big: false, member: 'w:1' }]);
+  });
+
+  it('gives an empty session a range to draw', () => {
+    const lanes = layoutLanes([]);
+    expect(lanes.end - lanes.start).toBeGreaterThan(0);
+    expect(lanes.actions).toEqual([]);
+  });
+
+  it('ticks every entry of a fold', () => {
+    const { rows } = collect({ entries: [entry(2, 'tick', 200), entry(1, 'tick', 100)] });
+    expect(layoutLanes(rows).actions).toHaveLength(2);
+  });
+});
+
+describe('time window', () => {
+  const lanes = { start: 0, end: 1000 };
+
+  it('orders its ends and keeps inside the range', () => {
+    expect(makeWindow(lanes, 600, 200)).toEqual({ from: 200, to: 600 });
+    expect(makeWindow(lanes, -50, 2000)).toEqual({ from: 0, to: 1000 });
+  });
+
+  it('keeps a minimum width', () => {
+    expect(makeWindow(lanes, 500, 500, 10)).toEqual({ from: 500, to: 510 });
+    expect(makeWindow(lanes, 995, 995, 10)).toEqual({ from: 990, to: 1000 });
+  });
+
+  it('moves with its width and stops at the edges', () => {
+    const window = { from: 100, to: 300 };
+    expect(shiftWindow(lanes, window, 50)).toEqual({ from: 150, to: 350 });
+    expect(shiftWindow(lanes, window, -500)).toEqual({ from: 0, to: 200 });
+    expect(shiftWindow(lanes, window, 5000)).toEqual({ from: 800, to: 1000 });
+  });
+});
+
+describe('handler location', () => {
+  it('reads the frame formats of the browsers', () => {
+    expect(parseStackFrame('at onClick (http://localhost:5173/src/Order.tsx?t=17:58:12)')).toEqual({
+      file: 'http://localhost:5173/src/Order.tsx?t=17',
+      line: 58,
+      column: 12,
+    });
+    expect(parseStackFrame('at http://localhost:5173/src/Order.tsx:58:12')).toMatchObject({
+      line: 58,
+      column: 12,
+    });
+    expect(parseStackFrame('onClick@http://localhost:5173/src/Order.tsx:58:12')).toMatchObject({
+      line: 58,
+    });
+    expect(parseStackFrame('nothing here')).toBeUndefined();
+  });
+
+  it('takes the first frame in the app and shows it as a file and line', () => {
+    const found = handlerLocation([
+      'at set (http://localhost:5173/node_modules/.vite/deps/solid-js.js?v=1:10:5)',
+      'at onClick (http://localhost:5173/src/components/OrderTable.tsx?t=1:58:12)',
+      'at other (http://localhost:5173/src/other.tsx:1:1)',
+    ]);
+    expect(found).toEqual({
+      location: 'src/components/OrderTable.tsx:58:12',
+      label: 'OrderTable.tsx:58',
+    });
+    expect(handlerLocation(undefined)).toBeUndefined();
+    expect(handlerLocation(['at x (http://localhost:5173/node_modules/a.js:1:1)'])).toBeUndefined();
+  });
+
+  it('uses the first write that has a stack', () => {
+    const found = entryLocation(
+      entry(1, 'click', 0, {
+        writes: [
+          { name: 'a' } as never,
+          { name: 'b', stack: ['at f (http://x/src/App.tsx:3:4)'] } as never,
+        ],
+      }),
+    );
+    expect(found?.label).toBe('App.tsx:3');
+  });
+});
+
+describe('action detail', () => {
+  const memoRun = (id: number, name: string, at: number, ms: number, value?: unknown) =>
+    run(id, name, 'memo', at, ms, value);
+
+  it('summarizes the chain', () => {
+    const chain = summarizeChain(
+      entry(1, 'click', 0, {
+        writes: [
+          { name: 'status', prev: '"paid"', value: '"refunded"' } as never,
+          { name: 'other' } as never,
+        ],
+        runs: [
+          memoRun(1, 'matching', 0, 1),
+          run(2, 'render', 'effect', 1, 1),
+          run(3, 'render', 'effect', 2, 1),
+          run(4, 'title', 'effect', 3, 1),
+        ],
+      }),
+    );
+    expect(chain.wrote).toEqual({ name: 'status', prev: '"paid"', value: '"refunded"', more: 1 });
+    expect(chain.reran).toBe('matching');
+    expect(chain.effects).toBe('render ×2, title');
+  });
+
+  it('counts repeated names and caps the list', () => {
+    expect(countNames(['a', 'a', 'b'])).toBe('a ×2, b');
+    expect(countNames(['a', 'b', 'c', 'd', 'e', 'f'], 3)).toBe('a, b, c +3');
+  });
+
+  it('places the re-runs by their start and size', () => {
+    const { bars, totalMs } = runBars(
+      entry(1, 'click', 100, {
+        flushMs: 10,
+        runs: [
+          memoRun(1, 'a', 100, 2),
+          run(2, 'e', 'effect', 105, 4),
+          run(3, 'e', 'effect', 106, 1),
+        ],
+      }),
+    );
+    expect(totalMs).toBe(10);
+    expect(bars.map((bar) => [bar.name, bar.kind])).toEqual([
+      ['a', 'memo'],
+      ['e ×2', 'effect'],
+    ]);
+    expect(bars[0]).toMatchObject({ left: 0, width: 20, ms: 2 });
+    expect(bars[1]).toMatchObject({ left: 50, width: 40, ms: 5 });
+  });
+
+  it('puts the server calls on their own scale', () => {
+    const { bars, totalMs } = callBars(
+      entry(1, 'click', 100, {
+        calls: [
+          {
+            event: { at: 104, durationMs: 90, id: 'fn', name: 'refundOrder' } as never,
+            instance: 'fn#1',
+          },
+        ],
+      }),
+    );
+    expect(totalMs).toBe(94);
+    expect(bars[0]).toMatchObject({ name: 'refundOrder', instance: 'fn#1', ms: 90 });
+    expect(bars[0]!.left).toBeCloseTo((4 / 94) * 100);
+  });
+});
+
+describe('ValueMemory', () => {
+  it('remembers the value a memo had at its previous run', () => {
+    const memory = new ValueMemory();
+    const first = run(1, 'revenue', 'memo', 0, 1, 164.25);
+    const earlier = entry(1, 'click', 0, { runs: [first] });
+    memory.observe([earlier]);
+    expect(memory.deltaOf(first)).toEqual({ before: undefined, after: '164.25' });
+
+    const second = run(2, 'revenue', 'memo', 10, 1, 139.75);
+    second.event = { ...second.event, nodeId: first.event.nodeId };
+    const later = entry(2, 'click', 10, { runs: [second] });
+    memory.observe([later, earlier]);
+    expect(memory.deltaOf(second)).toEqual({ before: '164.25', after: '139.75' });
+    expect(firstMemoDelta(later, memory)).toMatchObject({ name: 'revenue' });
+  });
+
+  it('skips a run whose value did not move', () => {
+    const memory = new ValueMemory();
+    const a = run(1, 'm', 'memo', 0, 1, 5);
+    const b = run(1, 'm', 'memo', 1, 1, 5);
+    memory.observe([entry(1, 'x', 0, { runs: [a, b] })]);
+    expect(memory.deltaOf(b)).toBeUndefined();
+  });
+
+  it('writes a short preview', () => {
+    expect(previewValue('hi')).toBe('"hi"');
+    expect(previewValue([1, 2])).toBe('Array(2)');
+    expect(previewValue(null)).toBe('null');
+  });
+});
diff --git a/src/dev-toolbar/activity/model.ts b/src/dev-toolbar/activity/model.ts
new file mode 100644
index 0000000..6ebeced
--- /dev/null
+++ b/src/dev-toolbar/activity/model.ts
@@ -0,0 +1,860 @@
+import type { AsyncRecord } from '../async/tracker.js';
+import type { ErrorRecord } from '../error-record.js';
+import { editorLocation, isLibraryFile } from '../error-viewer/frames.js';
+import type { ServerFunctionInstance } from '../functions/index.js';
+import { asyncDuration, asyncTitle } from '../report/async-report.js';
+import { concernOf } from '../async/tracker.js';
+import { ms, plural } from '../report/timeline-report.js';
+import {
+  entryDuration,
+  entryRunCount,
+  groupEntries,
+  type TimelineGroup,
+} from '../timeline/group.js';
+import {
+  isIdleEntry,
+  isUnnamedUpdate,
+  type TimelineEntry,
+  type TimelineRun,
+} from '../timeline/tracker.js';
+
+/** A thing the list shows. */
+export type ActivityKind = 'action' | 'server' | 'async' | 'error';
+
+/** What a filter chip keeps. */
+export type ActivityFilter = 'all' | 'actions' | 'server' | 'async';
+
+/** An async node that is loading right now. */
+export interface LiveLoad {
+  id: string;
+  name: string;
+  ownerPath: string[];
+  /** When the panel first saw it pending, on the `performance.now()` clock. */
+  since: number;
+  raw: object;
+}
+
+export type ActivitySource =
+  | { type: 'action'; entry: TimelineEntry; entries: TimelineEntry[] }
+  | { type: 'server'; instance: string; value: ServerFunctionInstance }
+  | { type: 'async'; record: AsyncRecord }
+  | { type: 'error'; record: ErrorRecord; index: number; entry: TimelineEntry | undefined }
+  | { type: 'live'; load: LiveLoad };
+
+export interface ActivityRow {
+  /** One key per row, stable while the row's data grows. */
+  key: string;
+  kind: ActivityKind;
+  /** The glyph's class: `act`, `srv`, `wait` or `err`. */
+  glyph: 'act' | 'srv' | 'wait' | 'err';
+  /** Start time on the `performance.now()` clock. */
+  at: number;
+  /** End time. Equal to `at` for a thing with no duration. */
+  end: number;
+  /** The selection keys this row stands for. A folded row holds all of its entries. */
+  members: string[];
+  title: string;
+  subtitle: string;
+  /** The right-aligned time or duration. */
+  time: string;
+  /** How many entries the row folds. `1` for a plain row. */
+  count: number;
+  source: ActivitySource;
+}
+
+export const GLYPHS = { act: 'A', srv: 'ƒ', wait: '⧗', err: '✕' } as const;
+
+export function actionKey(id: number): string {
+  return `a:${id}`;
+}
+
+export function serverKey(instance: string): string {
+  return `s:${instance}`;
+}
+
+export function asyncKey(id: number): string {
+  return `w:${id}`;
+}
+
+export function errorKey(record: ErrorRecord): string {
+  return `e:${record.at}`;
+}
+
+export function liveKey(id: string): string {
+  return `l:${id}`;
+}
+
+/** The name and message of a thrown value. */
+export function describeThrown(error: unknown): { name: string; message: string } {
+  if (error instanceof Error) return { name: error.name || 'Error', message: error.message };
+  if (typeof ErrorEvent !== 'undefined' && error instanceof ErrorEvent) {
+    return { name: 'Error', message: error.message };
+  }
+  return { name: 'Thrown value', message: String(error) };
+}
+
+/** The status a server-function call shows: its HTTP status, `ERR` when the fetch failed, `…` while pending. */
+export function callStatus(value: ServerFunctionInstance): string {
+  if (value.response) return String(value.response.source.status);
+  if (value.request?.meta?.error !== undefined) return 'ERR';
+  return '…';
+}
+
+export function callName(value: ServerFunctionInstance): string {
+  return value.request?.meta?.name ?? value.request?.id ?? 'server function';
+}
+
+/** How long a call took, or `undefined` while it is pending or failed. */
+export function callDuration(value: ServerFunctionInstance): number | undefined {
+  if (!value.request || !value.response) return undefined;
+  return Math.max(0, value.response.time - value.request.time);
+}
+
+function actionSubtitle(parts: { writes: number; runs: number; calls: number }): string {
+  const out: string[] = [];
+  if (parts.writes) out.push(plural(parts.writes, 'write'));
+  if (parts.runs) out.push(plural(parts.runs, 're-run'));
+  if (parts.calls) out.push(plural(parts.calls, 'server call'));
+  return out.length ? out.join(' · ') : 'nothing re-ran';
+}
+
+/** The mean gap between the entries of a fold, newest first, as `every 16ms`. */
+export function foldInterval(entries: readonly TimelineEntry[]): string | undefined {
+  if (entries.length < 2) return undefined;
+  const span = entries[0]!.at - entries[entries.length - 1]!.at;
+  const gap = span / (entries.length - 1);
+  if (!(gap > 0)) return undefined;
+  return `every ${gap < 10 ? gap.toFixed(1) : Math.round(gap)}ms`;
+}
+
+function actionRow(group: TimelineGroup): ActivityRow {
+  const newest = group.entries[0]!;
+  const oldest = group.entries[group.entries.length - 1]!;
+  const interval = group.folded ? foldInterval(group.entries) : undefined;
+  const subtitle = actionSubtitle(group);
+  const members: string[] = [];
+  for (const entry of group.entries) members.push(actionKey(entry.id));
+  return {
+    key: group.folded ? `g:${group.key}` : actionKey(newest.id),
+    kind: 'action',
+    glyph: 'act',
+    at: oldest.at,
+    end: newest.at + entryDuration(newest),
+    members,
+    title: group.label,
+    subtitle: interval ? `${subtitle} · ${interval}` : subtitle,
+    time: ms(group.totalMs),
+    count: group.folded ? group.entries.length : 1,
+    source: { type: 'action', entry: newest, entries: group.entries },
+  };
+}
+
+function singleGroup(entry: TimelineEntry): TimelineGroup {
+  return {
+    key: entry.id,
+    label: entry.label,
+    entries: [entry],
+    folded: false,
+    writes: entry.writes.length,
+    runs: entryRunCount(entry),
+    calls: entry.calls.length,
+    totalMs: entryDuration(entry),
+  };
+}
+
+export interface CollectInput {
+  entries: readonly TimelineEntry[];
+  instances: Record<string, ServerFunctionInstance | undefined>;
+  records: readonly AsyncRecord[];
+  errors: readonly ErrorRecord[];
+  live: readonly LiveLoad[];
+  /** Show every entry as its own row, unnamed updates included. */
+  unfold: boolean;
+}
+
+export interface Collected {
+  /** Newest first. */
+  rows: ActivityRow[];
+  /** How many entries the fold hides: the repeats and the unnamed updates. */
+  folded: number;
+}
+
+/** The entry whose interaction or frame a thrown error happened in, joined by identity. */
+export function entryOfError(
+  record: ErrorRecord,
+  entries: readonly TimelineEntry[],
+): TimelineEntry | undefined {
+  if (!record.origin) return undefined;
+  for (const entry of entries) {
+    if (entry.origin === record.origin) return entry;
+  }
+  return undefined;
+}
+
+/** The label of the action each call ran for, by the call's key. */
+function callOwners(entries: readonly TimelineEntry[]): Map<string, string> {
+  const owners = new Map<string, string>();
+  for (const entry of entries) {
+    for (const call of entry.calls) {
+      if (call.instance) owners.set(call.instance, entry.label);
+    }
+  }
+  return owners;
+}
+
+function serverRow(
+  instance: string,
+  value: ServerFunctionInstance,
+  owners: Map<string, string>,
+): ActivityRow | undefined {
+  // A response that arrived with no request has nothing to place on the clock.
+  if (!value.request) return undefined;
+  const at = value.request.time;
+  const duration = callDuration(value);
+  const owner = owners.get(instance);
+  const status = callStatus(value);
+  return {
+    key: serverKey(instance),
+    kind: 'server',
+    glyph: 'srv',
+    at,
+    end: at + (duration ?? 0),
+    members: [serverKey(instance)],
+    title: callName(value),
+    subtitle: owner ? `${status} · from ${owner}` : `${status} · ${value.request.source.method}`,
+    time: duration === undefined ? (status === '…' ? 'live' : '') : ms(duration),
+    count: 1,
+    source: { type: 'server', instance, value },
+  };
+}
+
+function asyncRow(record: AsyncRecord): ActivityRow {
+  const duration = asyncDuration(record);
+  const concern = concernOf(record);
+  return {
+    key: asyncKey(record.id),
+    kind: 'async',
+    glyph: 'wait',
+    at: record.at,
+    end: record.at + duration,
+    members: [asyncKey(record.id)],
+    title: asyncTitle(record),
+    subtitle: concern ? `${record.type} · ${concern}` : record.type,
+    time: ms(duration),
+    count: 1,
+    source: { type: 'async', record },
+  };
+}
+
+function errorRow(
+  record: ErrorRecord,
+  index: number,
+  entries: readonly TimelineEntry[],
+): ActivityRow {
+  const { name, message } = describeThrown(record.error);
+  const entry = entryOfError(record, entries);
+  return {
+    key: errorKey(record),
+    kind: 'error',
+    glyph: 'err',
+    at: record.at,
+    end: record.at,
+    members: [errorKey(record)],
+    title: entry ? entry.label : name,
+    subtitle: entry ? `${name}: ${message}` : message,
+    time: entry ? ms(entryDuration(entry)) : '',
+    count: 1,
+    source: { type: 'error', record, index, entry },
+  };
+}
+
+function liveRow(load: LiveLoad): ActivityRow {
+  return {
+    key: liveKey(load.id),
+    kind: 'async',
+    glyph: 'wait',
+    at: load.since,
+    end: load.since,
+    members: [liveKey(load.id)],
+    title: `${load.name} loading`,
+    subtitle: load.ownerPath.length ? load.ownerPath.join(' › ') : 'loading now',
+    time: 'live',
+    count: 1,
+    source: { type: 'live', load },
+  };
+}
+
+/** Merges every source into one stream, newest first. */
+export function collectRows(input: CollectInput): Collected {
+  const rows: ActivityRow[] = [];
+  let folded = 0;
+
+  // Actions: unnamed updates and repeats fold unless the list is unfolded.
+  const named: TimelineEntry[] = [];
+  for (const entry of input.entries) {
+    // A click that changed nothing, such as one on the toolbar itself, is never listed.
+    if (isIdleEntry(entry)) continue;
+    if (isUnnamedUpdate(entry)) {
+      folded++;
+      if (input.unfold) named.push(entry);
+    } else {
+      named.push(entry);
+    }
+  }
+  const groups = groupEntries(named);
+  for (const group of groups) {
+    if (!group.folded) {
+      rows.push(actionRow(group));
+      continue;
+    }
+    folded += group.entries.length - 1;
+    if (!input.unfold) {
+      rows.push(actionRow(group));
+      continue;
+    }
+    for (const entry of group.entries) rows.push(actionRow(singleGroup(entry)));
+  }
+
+  // Server-function calls.
+  const owners = callOwners(input.entries);
+  for (const instance of Object.keys(input.instances)) {
+    const value = input.instances[instance];
+    if (!value) continue;
+    const row = serverRow(instance, value, owners);
+    if (row) rows.push(row);
+  }
+
+  // Async records and the loads in flight.
+  for (const record of input.records) rows.push(asyncRow(record));
+  for (const load of input.live) rows.push(liveRow(load));
+
+  // Thrown errors.
+  for (let index = 0; index < input.errors.length; index++) {
+    rows.push(errorRow(input.errors[index]!, index, input.entries));
+  }
+
+  // Newest first. The sort is stable, so ties keep their source order.
+  rows.sort((a, b) => b.at - a.at);
+  return { rows, folded };
+}
+
+export interface TimeWindow {
+  from: number;
+  to: number;
+}
+
+/** Whether a row starts or runs inside the window. No window keeps everything. */
+export function inWindow(row: ActivityRow, window: TimeWindow | undefined): boolean {
+  if (!window) return true;
+  return row.at <= window.to && row.end >= window.from;
+}
+
+export function matchesFilter(row: ActivityRow, filter: ActivityFilter): boolean {
+  switch (filter) {
+    case 'all':
+      return true;
+    case 'actions':
+      // An error happened inside an action, so it travels with them.
+      return row.kind === 'action' || row.kind === 'error';
+    case 'server':
+      return row.kind === 'server';
+    case 'async':
+      return row.kind === 'async';
+  }
+}
+
+/** The names of the owners above a live runtime node, outermost first. */
+export function ownerNamesOf(node: object | undefined): string[] {
+  const names: string[] = [];
+  let owner = (node as { _parent?: unknown } | undefined)?._parent as
+    | { _parent?: unknown; _name?: unknown; _component?: { name?: unknown } }
+    | undefined;
+  for (let depth = 0; owner && depth < 64; depth++) {
+    const component = owner._component?.name;
+    if (typeof component === 'string') names.push(component);
+    else if (typeof owner._name === 'string') names.push(owner._name);
+    owner = owner._parent as typeof owner | undefined;
+  }
+  return names.reverse();
+}
+
+function stripBrackets(name: string): string {
+  return name.replace(/^<|>$/g, '');
+}
+
+/** Whether anything the row involves belongs to the named owner, such as `<OrderRow>`. */
+export function matchesOwner(row: ActivityRow, ownerName: string | undefined): boolean {
+  if (!ownerName) return true;
+  const wanted = stripBrackets(ownerName).toLowerCase();
+  const hit = (text: string | undefined) => !!text && text.toLowerCase().includes(wanted);
+  const { source } = row;
+  switch (source.type) {
+    case 'action':
+      for (const entry of source.entries) {
+        if (hit(entry.label)) return true;
+        for (const write of entry.writes) if (hit(write.name)) return true;
+        for (const run of entry.runs) {
+          if (hit(run.event.nodeName)) return true;
+          for (const owner of ownerNamesOf(run.node?.deref())) if (hit(owner)) return true;
+        }
+      }
+      return false;
+    case 'async': {
+      const record = source.record;
+      if (hit(asyncTitle(record))) return true;
+      const path = 'ownerPath' in record.event ? record.event.ownerPath : undefined;
+      for (const owner of path ?? []) if (hit(owner)) return true;
+      return false;
+    }
+    case 'live':
+      for (const owner of source.load.ownerPath) if (hit(owner)) return true;
+      return hit(source.load.name);
+    case 'server':
+      return hit(row.title) || hit(row.subtitle);
+    case 'error':
+      return hit(row.title) || hit(row.subtitle);
+  }
+}
+
+/** The row a selection key belongs to, and for an action the entry the key names. */
+export function resolveSelection(
+  rows: readonly ActivityRow[],
+  key: string | undefined,
+): { row: ActivityRow; entry: TimelineEntry | undefined } | undefined {
+  if (!key) return undefined;
+  for (const row of rows) {
+    if (!row.members.includes(key)) continue;
+    if (row.source.type !== 'action') return { row, entry: undefined };
+    for (const entry of row.source.entries) {
+      if (actionKey(entry.id) === key) return { row, entry };
+    }
+  }
+  return undefined;
+}
+
+// ---------------------------------------------------------------- time groups
+
+export interface RowBucket {
+  label: string;
+  rows: ActivityRow[];
+}
+
+/** The label of the group a row of the given age falls in. */
+export function bucketLabel(ageMs: number): string {
+  const age = Math.max(0, ageMs);
+  if (age < 5_000) return 'just now';
+  if (age < 60_000) return `${Math.floor(age / 10_000) * 10 || 5}s ago`;
+  if (age < 3_600_000) return `${Math.floor(age / 60_000)}m ago`;
+  return `${Math.floor(age / 3_600_000)}h ago`;
+}
+
+/** Splits a newest-first list into runs of rows with the same age label. */
+export function bucketRows(rows: readonly ActivityRow[], now: number): RowBucket[] {
+  const buckets: RowBucket[] = [];
+  for (const row of rows) {
+    const label = bucketLabel(now - row.at);
+    const last = buckets[buckets.length - 1];
+    if (last && last.label === label) last.rows.push(row);
+    else buckets.push({ label, rows: [row] });
+  }
+  return buckets;
+}
+
+// ---------------------------------------------------------------- lanes
+
+/** An action with at least this many re-runs gets a big tick. */
+export const BIG_RUNS = 8;
+
+export interface LaneTick {
+  /** Percent of the strip. */
+  left: number;
+  width: number;
+  big: boolean;
+  /** The row the tick stands for, so a click can select it. */
+  member: string;
+}
+
+export interface Lanes {
+  start: number;
+  end: number;
+  actions: LaneTick[];
+  server: LaneTick[];
+  async: LaneTick[];
+}
+
+/** The shortest span the strip covers, so one early entry does not fill it. */
+export const MIN_SPAN_MS = 1000;
+
+function percent(value: number, start: number, span: number): number {
+  return ((value - start) / span) * 100;
+}
+
+/** Positions every item of the three lanes along the time range they cover. */
+export function layoutLanes(rows: readonly ActivityRow[]): Lanes {
+  const lanes: Lanes = { start: 0, end: MIN_SPAN_MS, actions: [], server: [], async: [] };
+  if (!rows.length) return lanes;
+
+  // The range runs from the oldest start to the latest end.
+  let start = Infinity;
+  let end = -Infinity;
+  for (const row of rows) {
+    if (row.kind === 'error') continue;
+    start = Math.min(start, row.at);
+    end = Math.max(end, row.end);
+  }
+  if (!Number.isFinite(start)) return lanes;
+  end = Math.max(end, start + MIN_SPAN_MS);
+  const span = end - start;
+  lanes.start = start;
+  lanes.end = end;
+
+  for (const row of rows) {
+    const { source } = row;
+    if (source.type === 'action') {
+      // Every entry of a fold is its own tick.
+      for (const entry of source.entries) {
+        lanes.actions.push({
+          left: percent(entry.at, start, span),
+          width: 0,
+          big: entryRunCount(entry) >= BIG_RUNS,
+          member: actionKey(entry.id),
+        });
+      }
+    } else if (row.kind === 'server') {
+      lanes.server.push({
+        left: percent(row.at, start, span),
+        width: ((row.end - row.at) / span) * 100,
+        big: false,
+        member: row.members[0]!,
+      });
+    } else if (row.kind === 'async') {
+      lanes.async.push({
+        left: percent(row.at, start, span),
+        width: ((row.end - row.at) / span) * 100,
+        big: false,
+        member: row.members[0]!,
+      });
+    }
+  }
+  return lanes;
+}
+
+/** Percent of the strip to a time. */
+export function timeAt(lanes: Pick<Lanes, 'start' | 'end'>, fraction: number): number {
+  return lanes.start + Math.min(1, Math.max(0, fraction)) * (lanes.end - lanes.start);
+}
+
+/** A window from two times in any order, kept inside the range and at least `minMs` wide. */
+export function makeWindow(
+  lanes: Pick<Lanes, 'start' | 'end'>,
+  a: number,
+  b: number,
+  minMs = 0,
+): TimeWindow {
+  let from = Math.max(lanes.start, Math.min(a, b));
+  let to = Math.min(lanes.end, Math.max(a, b));
+  if (to - from < minMs) to = Math.min(lanes.end, from + minMs);
+  if (to - from < minMs) from = Math.max(lanes.start, to - minMs);
+  return { from, to };
+}
+
+/** The window moved by `deltaMs`, kept inside the range with its width. */
+export function shiftWindow(
+  lanes: Pick<Lanes, 'start' | 'end'>,
+  window: TimeWindow,
+  deltaMs: number,
+): TimeWindow {
+  const width = window.to - window.from;
+  const from = Math.min(lanes.end - width, Math.max(lanes.start, window.from + deltaMs));
+  return { from, to: from + width };
+}
+
+// ---------------------------------------------------------------- stacks
+
+export interface HandlerLocation {
+  /** `src/OrderTable.tsx:58:12`, as the dev server's open-in-editor endpoint wants it. */
+  location: string;
+  /** `OrderTable.tsx:58`, as the panel shows it. */
+  label: string;
+}
+
+/** Splits `at fn (url:line:col)`, `at url:line:col` and `fn@url:line:col` into the file, line and column. */
+export function parseStackFrame(
+  line: string,
+): { file: string; line: number; column: number | undefined } | undefined {
+  const match =
+    /\(?((?:https?:\/\/|file:\/\/|\/|[A-Za-z]:[\\/])[^()\s]*?):(\d+)(?::(\d+))?\)?\s*$/.exec(
+      line.trim(),
+    ) ?? /@(.+?):(\d+)(?::(\d+))?\s*$/.exec(line.trim());
+  if (!match) return undefined;
+  return {
+    file: match[1]!,
+    line: Number(match[2]),
+    column: match[3] === undefined ? undefined : Number(match[3]),
+  };
+}
+
+/** The first frame in the app's own files, from a write's stack. */
+export function handlerLocation(stack: readonly string[] | undefined): HandlerLocation | undefined {
+  if (!stack) return undefined;
+  for (const text of stack) {
+    const frame = parseStackFrame(text);
+    if (!frame || isLibraryFile(frame.file)) continue;
+    const location = editorLocation({ source: frame.file, line: frame.line, column: frame.column });
+    if (!location) continue;
+    const path = location.split(':')[0]!;
+    const base = path.split('/').pop() ?? path;
+    return { location, label: `${base}:${frame.line}` };
+  }
+  return undefined;
+}
+
+/** The location of the action's handler, from the first write that has a stack. */
+export function entryLocation(entry: TimelineEntry): HandlerLocation | undefined {
+  for (const write of entry.writes) {
+    const found = handlerLocation(write.stack);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+// ---------------------------------------------------------------- action detail
+
+/** `click` as `onClick`. */
+export function eventName(entry: TimelineEntry): string | undefined {
+  const name =
+    entry.interaction?.name ??
+    (entry.origin?.kind === 'interaction' ? entry.origin.name : undefined);
+  if (name) return `on${name[0]!.toUpperCase()}${name.slice(1)}`;
+  const kind = entry.origin?.kind;
+  if (kind && kind !== 'external') return kind;
+  return undefined;
+}
+
+function pad(value: number, size = 2): string {
+  return String(value).padStart(size, '0');
+}
+
+/** The wall-clock time of a `performance.now()` value, as `hh:mm:ss.mmm`. */
+export function clockTime(at: number, origin = performance.timeOrigin): string {
+  const date = new Date(origin + at);
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
+}
+
+/** Names with a count when one repeats: `render ×2, title`. Shows at most `limit` names. */
+export function countNames(names: readonly string[], limit = 4): string {
+  const counts = new Map<string, number>();
+  for (const name of names) counts.set(name, (counts.get(name) ?? 0) + 1);
+  const parts: string[] = [];
+  for (const [name, count] of counts) parts.push(count > 1 ? `${name} ×${count}` : name);
+  if (parts.length <= limit) return parts.join(', ');
+  return `${parts.slice(0, limit).join(', ')} +${parts.length - limit}`;
+}
+
+export interface ChainSummary {
+  wrote:
+    | { name: string; prev: string | undefined; value: string | undefined; more: number }
+    | undefined;
+  reran: string;
+  effects: string;
+}
+
+/** The three boxes of the chain: the first write, the memos that re-ran and the effects that ran. */
+export function summarizeChain(entry: TimelineEntry): ChainSummary {
+  const first = entry.writes[0];
+  const memos: string[] = [];
+  const effects: string[] = [];
+  for (const run of entry.runs) {
+    if (run.event.nodeKind === 'memo') memos.push(run.event.nodeName);
+    else effects.push(run.event.nodeName);
+  }
+  return {
+    wrote: first
+      ? {
+          name: first.name,
+          prev: first.prev,
+          value: first.value,
+          more: entry.writes.length - 1,
+        }
+      : undefined,
+    reran: countNames(memos),
+    effects: countNames(effects),
+  };
+}
+
+/** A short text for a value read off a live node. */
+export function previewValue(value: unknown): string {
+  switch (typeof value) {
+    case 'string':
+      return JSON.stringify(value.length > 24 ? `${value.slice(0, 24)}…` : value);
+    case 'number':
+    case 'boolean':
+    case 'bigint':
+    case 'undefined':
+      return String(value);
+    case 'function':
+      return '[function]';
+    case 'symbol':
+      return value.toString();
+    default:
+      if (value === null) return 'null';
+      return Array.isArray(value)
+        ? `Array(${value.length})`
+        : `[${(value as object).constructor?.name ?? 'object'}]`;
+  }
+}
+
+export interface ValueDelta {
+  before: string | undefined;
+  after: string;
+}
+
+/**
+ * Remembers the value of each memo the last time a re-run of it was seen, so
+ * the next re-run can show what it changed from. A run's value is read off the
+ * live node the first time the run is seen, which is just after it happened.
+ */
+export class ValueMemory {
+  private lastByNode = new Map<number, string>();
+  private deltas = new WeakMap<TimelineRun, ValueDelta>();
+  private seen = new WeakSet<TimelineRun>();
+
+  /** Takes the entries newest first, as the builder keeps them. */
+  observe(entries: readonly TimelineEntry[]): void {
+    for (let i = entries.length - 1; i >= 0; i--) {
+      for (const run of entries[i]!.runs) {
+        if (this.seen.has(run)) continue;
+        this.seen.add(run);
+        if (run.event.nodeKind !== 'memo') continue;
+        const node = run.node?.deref() as { _value?: unknown } | undefined;
+        if (!node) continue;
+        const after = previewValue(node._value);
+        const before = this.lastByNode.get(run.event.nodeId);
+        this.lastByNode.set(run.event.nodeId, after);
+        // A memo that re-ran twice in one batch reads the same live value both times.
+        if (before !== after) this.deltas.set(run, { before, after });
+      }
+    }
+  }
+
+  deltaOf(run: TimelineRun): ValueDelta | undefined {
+    return this.deltas.get(run);
+  }
+}
+
+/** The first memo that re-ran with a value that moved, for the Re-ran box. */
+export function firstMemoDelta(
+  entry: TimelineEntry,
+  memory: ValueMemory,
+): { name: string; delta: ValueDelta } | undefined {
+  for (const run of entry.runs) {
+    if (run.event.nodeKind !== 'memo') continue;
+    const delta = memory.deltaOf(run);
+    if (delta) return { name: run.event.nodeName, delta };
+  }
+  return undefined;
+}
+
+export interface WaterfallBar {
+  key: string;
+  name: string;
+  kind: 'memo' | 'effect' | 'server';
+  /** Percent of the track. */
+  left: number;
+  width: number;
+  ms: number;
+  /** The runs the bar stands for, so a click can show why they ran. */
+  runs: TimelineRun[];
+  /** The server-function panel's key for a call bar. */
+  instance?: string;
+}
+
+/** Most bars one waterfall draws. */
+export const MAX_BARS = 40;
+
+/** Smallest bar width, in percent, so a very short run still shows. */
+const MIN_BAR = 1.5;
+
+function place(offset: number, duration: number, span: number): { left: number; width: number } {
+  const left = Math.min(100 - MIN_BAR, Math.max(0, (offset / span) * 100));
+  const width = Math.min(100 - left, Math.max(MIN_BAR, (duration / span) * 100));
+  return { left, width };
+}
+
+/**
+ * One bar per memo or effect that re-ran, placed by when it started after the
+ * action began and sized by how long it took. Runs of one node share a bar.
+ */
+export function runBars(entry: TimelineEntry): { bars: WaterfallBar[]; totalMs: number } {
+  type Group = {
+    kind: 'memo' | 'effect';
+    name: string;
+    runs: TimelineRun[];
+    start: number;
+    end: number;
+    ms: number;
+  };
+  const groups = new Map<string, Group>();
+  let latest = 0;
+  for (const run of entry.runs) {
+    const { event } = run;
+    const start = Math.max(0, event.at - entry.at);
+    const duration = event.selfMs + (run.effectMs ?? 0);
+    const key = `${event.nodeKind}:${event.nodeName}`;
+    let group = groups.get(key);
+    if (!group) {
+      group = { kind: event.nodeKind, name: event.nodeName, runs: [], start, end: start, ms: 0 };
+      groups.set(key, group);
+    }
+    group.runs.push(run);
+    group.start = Math.min(group.start, start);
+    group.end = Math.max(group.end, start + duration);
+    group.ms += duration;
+    latest = Math.max(latest, start + duration);
+  }
+  const totalMs = Math.max(entryDuration(entry), latest, 0.01);
+  const bars: WaterfallBar[] = [];
+  for (const [key, group] of groups) {
+    if (bars.length >= MAX_BARS) break;
+    bars.push({
+      key,
+      name: group.runs.length > 1 ? `${group.name} ×${group.runs.length}` : group.name,
+      kind: group.kind,
+      ...place(group.start, group.end - group.start, totalMs),
+      ms: group.ms,
+      runs: group.runs,
+    });
+  }
+  bars.sort((a, b) => a.left - b.left);
+  return { bars, totalMs };
+}
+
+/** One bar per server call of the action, on its own scale. */
+export function callBars(entry: TimelineEntry): { bars: WaterfallBar[]; totalMs: number } {
+  let span = 0;
+  for (const call of entry.calls) {
+    span = Math.max(span, Math.max(0, call.event.at - entry.at) + call.event.durationMs);
+  }
+  span = Math.max(span, 0.01);
+  const bars: WaterfallBar[] = [];
+  for (const call of entry.calls) {
+    if (bars.length >= MAX_BARS) break;
+    bars.push({
+      key: call.instance ?? String(call.event.at),
+      name: call.event.name ?? call.event.id,
+      kind: 'server',
+      ...place(Math.max(0, call.event.at - entry.at), call.event.durationMs, span),
+      ms: call.event.durationMs,
+      runs: [],
+      instance: call.instance,
+    });
+  }
+  return { bars, totalMs: span };
+}
+
+/** A millisecond figure for a waterfall row: two decimals under 1ms, none from 10ms. */
+export function barMs(value: number): string {
+  if (value < 1) return value.toFixed(2);
+  if (value < 10) return value.toFixed(1);
+  return String(Math.round(value));
+}
diff --git a/src/dev-toolbar/activity/scrub.tsx b/src/dev-toolbar/activity/scrub.tsx
new file mode 100644
index 0000000..99bdab5
--- /dev/null
+++ b/src/dev-toolbar/activity/scrub.tsx
@@ -0,0 +1,158 @@
+import type { JSX } from '@solidjs/web';
+import { For, Show } from 'solid-js';
+import {
+  makeWindow,
+  shiftWindow,
+  timeAt,
+  type LaneTick,
+  type Lanes,
+  type TimeWindow,
+} from './model.js';
+
+/** Narrowest window, as a share of the range. */
+const MIN_WINDOW = 0.01;
+/** One arrow key press moves the window by this share of the range. */
+const KEY_STEP = 0.02;
+/** Pixels a drag has to travel before it counts as a drag and not a click. */
+const DRAG_SLOP = 3;
+
+type DragMode = 'new' | 'move' | 'from' | 'to';
+
+export interface ScrubProps {
+  lanes: Lanes;
+  window: TimeWindow | undefined;
+  selected: string | undefined;
+  onWindow: (window: TimeWindow | undefined) => void;
+}
+
+function Ticks(props: { ticks: LaneTick[]; selected: string | undefined }): JSX.Element {
+  return (
+    <For each={props.ticks}>
+      {(tick) => (
+        <span
+          data-solid-activity-tick
+          data-big={tick.big ? '' : undefined}
+          data-selected={props.selected === tick.member ? '' : undefined}
+          style={{
+            left: `${tick.left}%`,
+            width: tick.width ? `${tick.width}%` : undefined,
+          }}
+        />
+      )}
+    </For>
+  );
+}
+
+/** Three lanes of ticks along the time the session covers, and a window to pick a range of it. */
+export function Scrub(props: ScrubProps): JSX.Element {
+  let track: HTMLDivElement | undefined;
+
+  function shown(): { left: number; width: number } | undefined {
+    const range = props.window;
+    if (!range) return undefined;
+    const span = props.lanes.end - props.lanes.start;
+    const left = Math.max(0, ((range.from - props.lanes.start) / span) * 100);
+    const right = Math.min(100, ((range.to - props.lanes.start) / span) * 100);
+    if (right <= left) return undefined;
+    return { left, width: right - left };
+  }
+
+  function startDrag(event: PointerEvent, mode: DragMode): void {
+    if (event.button !== 0 || !track) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const rect = track.getBoundingClientRect();
+    if (!rect.width) return;
+    const lanes = props.lanes;
+    const base = props.window;
+    const span = lanes.end - lanes.start;
+    const minMs = span * MIN_WINDOW;
+    const startX = event.clientX;
+    const startTime = timeAt(lanes, (startX - rect.left) / rect.width);
+    let moved = false;
+
+    function onMove(next: PointerEvent): void {
+      const dx = next.clientX - startX;
+      if (Math.abs(dx) > DRAG_SLOP) moved = true;
+      if (!moved) return;
+      const time = timeAt(lanes, (next.clientX - rect.left) / rect.width);
+      if (mode === 'new') props.onWindow(makeWindow(lanes, startTime, time, minMs));
+      else if (!base) return;
+      else if (mode === 'move') props.onWindow(shiftWindow(lanes, base, (dx / rect.width) * span));
+      else if (mode === 'from') props.onWindow(makeWindow(lanes, time, base.to, minMs));
+      else props.onWindow(makeWindow(lanes, base.from, time, minMs));
+    }
+
+    function onUp(): void {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      // A click on the bare strip drops the window.
+      if (mode === 'new' && !moved) props.onWindow(undefined);
+    }
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  }
+
+  function onKeyDown(event: KeyboardEvent): void {
+    const current = props.window;
+    if (!current) return;
+    const span = props.lanes.end - props.lanes.start;
+    if (event.key === 'Escape') props.onWindow(undefined);
+    else if (event.key === 'ArrowLeft')
+      props.onWindow(shiftWindow(props.lanes, current, -span * KEY_STEP));
+    else if (event.key === 'ArrowRight')
+      props.onWindow(shiftWindow(props.lanes, current, span * KEY_STEP));
+    else return;
+    event.preventDefault();
+  }
+
+  return (
+    <div data-solid-activity-scrub>
+      <div data-solid-activity-lane="actions">
+        <label>Actions</label>
+        <Ticks ticks={props.lanes.actions} selected={props.selected} />
+      </div>
+      <div data-solid-activity-lane="server">
+        <label>Server</label>
+        <Ticks ticks={props.lanes.server} selected={props.selected} />
+      </div>
+      <div data-solid-activity-lane="async">
+        <label>Async</label>
+        <Ticks ticks={props.lanes.async} selected={props.selected} />
+      </div>
+      <div
+        ref={track}
+        data-solid-activity-track-area
+        title="Drag to pick a time range, click to clear it"
+        onPointerDown={(event) => startDrag(event, 'new')}
+      >
+        <Show when={shown()}>
+          {(box) => (
+            <div
+              data-solid-activity-window
+              role="group"
+              tabindex="0"
+              aria-label="Time range. Drag to move it, press Escape to clear it."
+              style={{ left: `${box().left}%`, width: `${box().width}%` }}
+              onPointerDown={(event) => startDrag(event, 'move')}
+              onDblClick={() => props.onWindow(undefined)}
+              onKeyDown={onKeyDown}
+            >
+              <span
+                data-solid-activity-window-edge="from"
+                onPointerDown={(event) => startDrag(event, 'from')}
+              />
+              <span
+                data-solid-activity-window-edge="to"
+                onPointerDown={(event) => startDrag(event, 'to')}
+              />
+            </div>
+          )}
+        </Show>
+      </div>
+    </div>
+  );
+}
diff --git a/src/dev-toolbar/activity/styles.css b/src/dev-toolbar/activity/styles.css
new file mode 100644
index 0000000..6bf5e27
--- /dev/null
+++ b/src/dev-toolbar/activity/styles.css
@@ -0,0 +1,622 @@
+/* The Activity view: lanes on top, the list beside the detail pane. Selection is a fill, never a side rule. */
+
+[data-solid-activity] {
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  min-height: 0;
+
+  color: var(--start-dt-text);
+  font:
+    13px/1.45 system-ui,
+    -apple-system,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* :where keeps the reset from outweighing the buttons' own rules */
+:where([data-solid-activity]) button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* ---------- lanes ---------- */
+
+[data-solid-activity-scrub] {
+  position: relative;
+  flex: none;
+  padding: 7px 14px 5px 84px;
+  border-bottom: 1px solid var(--start-dt-line);
+}
+
+[data-solid-activity-lane] {
+  position: relative;
+  height: 13px;
+  margin-bottom: 3px;
+}
+
+[data-solid-activity-lane] label {
+  position: absolute;
+  left: -70px;
+  width: 62px;
+  text-align: right;
+  font-size: 9.5px;
+  color: var(--start-dt-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 13px;
+}
+
+[data-solid-activity-tick] {
+  position: absolute;
+  top: 3px;
+  height: 7px;
+  min-width: 2px;
+  border-radius: 2px;
+}
+
+[data-solid-activity-lane='actions'] [data-solid-activity-tick] {
+  width: 2px;
+  background: var(--start-dt-solid);
+  opacity: 0.5;
+}
+
+[data-solid-activity-lane='actions'] [data-solid-activity-tick][data-big] {
+  width: 3px;
+  opacity: 1;
+  top: 0;
+  height: 13px;
+}
+
+[data-solid-activity-lane='server'] [data-solid-activity-tick] {
+  background: var(--start-dt-violet);
+}
+
+[data-solid-activity-lane='async'] [data-solid-activity-tick] {
+  background: var(--start-dt-amber-soft);
+  border: 1px solid var(--start-dt-amber);
+}
+
+[data-solid-activity-tick][data-selected] {
+  opacity: 1;
+  box-shadow: 0 0 0 1px var(--start-dt-text);
+}
+
+/* the strip takes the pointer: a drag on it picks a time range */
+[data-solid-activity-track-area] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 84px;
+  right: 14px;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+[data-solid-activity-window] {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  border: 1px solid var(--start-dt-line-2);
+  background: oklch(1 0 0 / 0.03);
+  border-radius: 5px;
+  cursor: grab;
+}
+
+[data-solid-activity-window]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: 1px;
+}
+
+[data-solid-activity-window-edge] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: ew-resize;
+}
+
+[data-solid-activity-window-edge='from'] {
+  left: -4px;
+}
+
+[data-solid-activity-window-edge='to'] {
+  right: -4px;
+}
+
+/* ---------- split ---------- */
+
+[data-solid-activity-split] {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+[data-solid-activity-list] {
+  flex: 1;
+  min-width: 240px;
+  overflow: auto;
+  padding: 6px;
+}
+
+[data-solid-activity-detail] {
+  position: relative;
+  flex: none;
+  /* Keeps the list usable when the window shrinks below a saved width. */
+  max-width: calc(100% - 240px);
+  overflow: auto;
+  padding: 14px 18px;
+  border-left: 1px solid var(--start-dt-line);
+}
+
+/* ---------- list ---------- */
+
+[data-solid-activity-filters] {
+  display: flex;
+  gap: 6px;
+  padding: 4px 4px 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+[data-solid-activity-chip] {
+  font-size: 11.5px;
+  padding: 3px 9px;
+  border-radius: 99px;
+  border: 1px solid var(--start-dt-line-2);
+  color: var(--start-dt-text-muted);
+  white-space: nowrap;
+}
+
+[data-solid-activity-chip]:hover {
+  color: var(--start-dt-text);
+}
+
+[data-solid-activity-chip][data-on] {
+  background: var(--start-dt-raise-2);
+  color: var(--start-dt-text);
+  border-color: transparent;
+}
+
+[data-solid-activity-chip][data-ghost] {
+  margin-left: auto;
+  color: var(--start-dt-faint);
+  border-style: dashed;
+}
+
+[data-solid-activity-chip][data-ghost][data-on] {
+  color: var(--start-dt-text);
+}
+
+[data-solid-activity-chip][data-ghost] ~ [data-solid-activity-chip] {
+  margin-left: 0;
+}
+
+[data-solid-activity-chip][data-clear] {
+  color: var(--start-dt-faint);
+}
+
+[data-solid-activity-chip]:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+[data-solid-activity] button:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: -2px;
+}
+
+[data-solid-activity-row] {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 7px 10px;
+  border-radius: 7px;
+  text-align: left;
+}
+
+[data-solid-activity-row]:hover {
+  background: oklch(1 0 0 / 0.04);
+}
+
+[data-solid-activity-row][data-selected] {
+  background: var(--start-dt-raise-2);
+}
+
+[data-solid-activity-what] {
+  min-width: 0;
+}
+
+[data-solid-activity-what] b {
+  font-weight: 600;
+}
+
+[data-solid-activity-what] > div {
+  color: var(--start-dt-faint);
+  font-size: 11.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* a folded run reads quieter than a single action */
+[data-solid-activity-row][data-repeat] [data-solid-activity-glyph] {
+  opacity: 0.55;
+}
+
+[data-solid-activity-row][data-repeat] b {
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-activity-count] {
+  font: 600 10.5px var(--start-dt-mono);
+  padding: 0 5px;
+  border-radius: 99px;
+  line-height: 16px;
+  color: var(--start-dt-faint);
+}
+
+[data-solid-activity-t] {
+  font: 11px var(--start-dt-mono);
+  color: var(--start-dt-faint);
+  text-align: right;
+}
+
+[data-solid-activity-glyph] {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  display: grid;
+  place-items: center;
+  font: 700 10px var(--start-dt-mono);
+  flex: none;
+}
+
+[data-solid-activity-glyph='act'] {
+  background: var(--start-dt-solid-soft);
+  color: var(--start-dt-solid);
+}
+
+[data-solid-activity-glyph='srv'] {
+  background: var(--start-dt-violet-soft);
+  color: var(--start-dt-violet);
+}
+
+[data-solid-activity-glyph='wait'] {
+  background: var(--start-dt-amber-soft);
+  color: var(--start-dt-amber);
+}
+
+[data-solid-activity-glyph='err'] {
+  background: var(--start-dt-red-soft);
+  color: var(--start-dt-red);
+}
+
+[data-solid-activity-group] {
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
+  padding: 8px 10px 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+}
+
+[data-solid-activity-group]::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--start-dt-line);
+}
+
+[data-solid-activity-empty] {
+  padding: 16px 10px;
+  color: var(--start-dt-faint);
+  font-size: 12px;
+}
+
+/* ---------- detail ---------- */
+
+[data-solid-activity-detail-body] h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+[data-solid-activity-title] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-activity-sub] {
+  color: var(--start-dt-faint);
+  margin: 2px 0 14px;
+  font-size: 12px;
+}
+
+[data-solid-activity-sect] {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--start-dt-faint);
+  margin: 14px 0 8px;
+  display: flex;
+  justify-content: space-between;
+}
+
+[data-solid-activity-chain] {
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 4px;
+}
+
+[data-solid-activity-node] {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 8px;
+  background: var(--start-dt-raise);
+}
+
+[data-solid-activity-node] small {
+  display: block;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--start-dt-faint);
+}
+
+[data-solid-activity-node] code {
+  display: block;
+  font: 12px var(--start-dt-mono);
+  overflow-wrap: anywhere;
+}
+
+[data-solid-activity-node] code[data-solid-activity-none] {
+  color: var(--start-dt-faint);
+}
+
+[data-solid-activity-delta] {
+  font: 11px var(--start-dt-mono);
+  color: var(--start-dt-text-muted);
+  margin-top: 2px;
+  overflow-wrap: anywhere;
+}
+
+[data-solid-activity-del] {
+  color: var(--start-dt-red);
+}
+
+[data-solid-activity-ins] {
+  color: var(--start-dt-green);
+}
+
+[data-solid-activity-arrow] {
+  width: 24px;
+  display: grid;
+  place-items: center;
+  color: var(--start-dt-faint);
+  flex: none;
+}
+
+[data-solid-activity-wf] {
+  display: grid;
+  grid-template-columns: minmax(110px, 160px) 1fr 50px;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 3px 0;
+  font: 12px var(--start-dt-mono);
+  text-align: left;
+}
+
+[data-solid-activity-wf] > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-activity-wf][data-kind='server'] > span:first-child {
+  color: var(--start-dt-violet);
+}
+
+[data-solid-activity-wf][role='button'] {
+  cursor: pointer;
+}
+
+[data-solid-activity-track] {
+  height: 8px;
+  background: oklch(1 0 0 / 0.04);
+  border-radius: 4px;
+  position: relative;
+}
+
+[data-solid-activity-track] i {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 4px;
+  background: var(--start-dt-violet);
+}
+
+[data-solid-activity-wf][data-kind='effect'] i {
+  background: var(--start-dt-green);
+}
+
+[data-solid-activity-wf][data-kind='server'] i {
+  background: oklch(0.72 0.15 300 / 0.5);
+}
+
+[data-solid-activity-ms] {
+  color: var(--start-dt-faint);
+  text-align: right;
+}
+
+[data-solid-activity-wf]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* what caused a re-run, under its row */
+[data-solid-activity-why] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 2px 0 6px;
+  padding-left: 12px;
+  font: 11px var(--start-dt-mono);
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-activity-causes] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-solid-activity-causes] ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 14px;
+}
+
+[data-solid-activity-note] {
+  color: var(--start-dt-faint);
+  font-size: 11px;
+  padding-top: 4px;
+}
+
+[data-solid-activity-concern] {
+  font-size: 12px;
+  color: var(--start-dt-amber);
+}
+
+[data-solid-activity-concern][data-plain] {
+  color: var(--start-dt-text);
+  font-family: var(--start-dt-mono);
+  overflow-wrap: anywhere;
+}
+
+[data-solid-activity-link] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding: 4px 8px 4px 4px;
+  border-radius: 7px;
+  font-weight: 600;
+}
+
+[data-solid-activity-link]:hover {
+  background: oklch(1 0 0 / 0.05);
+}
+
+[data-solid-activity-btnrow] {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 14px;
+}
+
+[data-solid-activity-btn] {
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 7px;
+  border: 1px solid var(--start-dt-line-2);
+  color: var(--start-dt-text-muted);
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  flex: none;
+}
+
+[data-solid-activity-btn]:hover {
+  color: var(--start-dt-text);
+  background: oklch(1 0 0 / 0.05);
+}
+
+[data-solid-activity-btn][data-primary] {
+  background: var(--start-dt-solid);
+  color: oklch(0.16 0.02 265);
+  border-color: transparent;
+  font-weight: 600;
+}
+
+[data-solid-activity-btn][data-primary]:hover {
+  background: var(--start-dt-solid);
+  filter: brightness(1.08);
+}
+
+[data-solid-activity-btn][data-solid-copy-report='failed'] {
+  color: var(--start-dt-red);
+}
+
+[data-solid-activity-btn]:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-solid-activity-row],
+  [data-solid-activity-chip],
+  [data-solid-activity-btn] {
+    transition:
+      background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+}
+
+/* outcome of an action, next to its title */
+[data-solid-activity-pill] {
+  font: 600 10.5px var(--start-dt-mono);
+  line-height: 16px;
+  padding: 0 7px;
+  border-radius: 99px;
+  flex: none;
+  background: var(--start-dt-raise-2);
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-activity-pill='held'] {
+  background: var(--start-dt-amber-soft);
+  color: var(--start-dt-amber);
+}
+
+[data-solid-activity-pill='committed'] {
+  background: var(--start-dt-green-soft);
+  color: var(--start-dt-green);
+}
+
+[data-solid-activity-kv] [data-solid-kv-key] {
+  flex-basis: 6rem;
+}
+
+[data-solid-activity-hold] {
+  font: 12px var(--start-dt-mono);
+  color: var(--start-dt-text-muted);
+  padding: 2px 0;
+}
diff --git a/src/dev-toolbar/async/index.tsx b/src/dev-toolbar/async/index.tsx
index cbad6a7..7e83f64 100644
--- a/src/dev-toolbar/async/index.tsx
+++ b/src/dev-toolbar/async/index.tsx
@@ -375,7 +375,7 @@ export default function AsyncViewer(props: AsyncViewerProps): JSX.Element {
   );
 }
 
-function Row(props: { label: string; children: JSX.Element }): JSX.Element {
+export function Row(props: { label: string; children: JSX.Element }): JSX.Element {
   return (
     <div data-solid-kv-row>
       <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
@@ -389,7 +389,7 @@ function Row(props: { label: string; children: JSX.Element }): JSX.Element {
 }
 
 /** The fields a record has beyond its title and time. */
-function RecordRows(props: { record: AsyncRecord }): JSX.Element {
+export function RecordRows(props: { record: AsyncRecord }): JSX.Element {
   return (
     <>
       {(() => {
diff --git a/src/dev-toolbar/async/tracker.ts b/src/dev-toolbar/async/tracker.ts
index 251f442..ec04963 100644
--- a/src/dev-toolbar/async/tracker.ts
+++ b/src/dev-toolbar/async/tracker.ts
@@ -11,6 +11,20 @@ import { appOwnerPath } from '../issues/tracker.js';
 /** A fallback shown for less than this reads as a flash, as the runtime's `FALLBACK_FLASH` finding counts it. */
 export const FLASH_MS = 150;
 
+/**
+ * Whether the node sits under an owner the toolbar excluded with
+ * `OBSERVE.exclude`. The runtime still sends the records of such a node, so
+ * the history asks the runtime's own answer by owner identity.
+ */
+function isToolbarNode(node: object | undefined): boolean {
+  if (!node) return false;
+  try {
+    return !!OBSERVE?.isExcluded?.(node as never);
+  } catch {
+    return false;
+  }
+}
+
 /** Most records the panel keeps. The oldest go first. */
 export const MAX_RECORDS = 200;
 
@@ -80,6 +94,7 @@ export class AsyncHistory {
   }
 
   flight(event: FlightEvent, node: object | undefined): void {
+    if (isToolbarNode(node)) return;
     if (node) this.sources.add(node);
     this.add({
       type: 'load',
@@ -104,6 +119,7 @@ export class AsyncHistory {
   }
 
   fallback(event: FallbackEvent, node: object | undefined): void {
+    if (isToolbarNode(node)) return;
     this.add({
       type: 'fallback',
       id: this.nextId++,
diff --git a/src/dev-toolbar/error-record.ts b/src/dev-toolbar/error-record.ts
new file mode 100644
index 0000000..99b03d7
--- /dev/null
+++ b/src/dev-toolbar/error-record.ts
@@ -0,0 +1,25 @@
+import { OBSERVE } from 'solid-js';
+import type { ChangeOrigin } from 'solid-js/attribution';
+
+/** A thrown value the toolbar caught, with when and during what. */
+export interface ErrorRecord {
+  error: unknown;
+  /** When it was caught, on the `performance.now()` clock the timeline uses. */
+  at: number;
+  /**
+   * The interaction or frame running when it was caught. It is the same
+   * object a timeline entry keeps as its `origin`, so the two join by identity.
+   */
+  origin: ChangeOrigin | undefined;
+}
+
+export function createErrorRecord(error: unknown): ErrorRecord {
+  let origin: ChangeOrigin | undefined;
+  try {
+    // Only an observe or dev build of the runtime with attribution on knows it.
+    origin = OBSERVE?.attribution?.currentOrigin?.() as ChangeOrigin | undefined;
+  } catch {
+    origin = undefined;
+  }
+  return { error, at: performance.now(), origin };
+}
diff --git a/src/dev-toolbar/error-viewer/CodeView.tsx b/src/dev-toolbar/error-viewer/CodeView.tsx
index 9093615..b4de301 100644
--- a/src/dev-toolbar/error-viewer/CodeView.tsx
+++ b/src/dev-toolbar/error-viewer/CodeView.tsx
@@ -20,6 +20,23 @@ export interface CodeViewProps {
  */
 const RANGE = 25;
 
+/**
+ * Puts a `^` under the column of the hit line.
+ *
+ * The line sits after a gutter of 58px, and the code is monospace, so the
+ * caret is indented by that gutter and one character per column before it.
+ */
+function placeCaret(hit: HTMLElement, column: number | undefined): void {
+  hit.parentElement?.querySelector('[data-solid-error-viewer-caret]')?.remove();
+  if (!column || column < 1) return;
+  const caret = document.createElement('span');
+  caret.setAttribute('data-solid-error-viewer-caret', '');
+  caret.setAttribute('aria-hidden', 'true');
+  caret.style.paddingLeft = `calc(58px + ${column - 1}ch)`;
+  caret.textContent = '^';
+  hit.after(caret);
+}
+
 export function CodeView(props: CodeViewProps): JSX.Element | null {
   const [element, setElement] = createSignal<HTMLDivElement>();
 
@@ -36,11 +53,12 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
   // The frame can sit anywhere in the file, so the view opens on it. Scrolling
   // the box itself leaves the page where it is.
   createEffect(
-    () => ({ view: element(), code: html() }),
-    ({ view }) => {
+    () => ({ view: element(), code: html(), column: props.column }),
+    ({ view, column }) => {
       if (!view) return;
       const focused = view.querySelector('.focus') as HTMLElement | null;
       if (!focused) return;
+      placeCaret(focused, column);
       view.scrollTop = Math.max(focused.offsetTop - view.clientHeight / 2, 0);
     },
   );
diff --git a/src/dev-toolbar/error-viewer/frames.test.ts b/src/dev-toolbar/error-viewer/frames.test.ts
index 4a152f0..368e7da 100644
--- a/src/dev-toolbar/error-viewer/frames.test.ts
+++ b/src/dev-toolbar/error-viewer/frames.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from 'vitest';
-import { editorLocation, foldLibraryFrames, isLibraryFile, pickDefaultFrame } from './frames.js';
+import {
+  editorLocation,
+  foldLabel,
+  foldLibraryFrames,
+  isLibraryFile,
+  libraryNames,
+  pickDefaultFrame,
+} from './frames.js';
 
 describe('isLibraryFile', () => {
   it('flags node_modules, solid-js, @solidjs and the devtools', () => {
@@ -79,3 +86,34 @@ describe('editorLocation', () => {
     expect(editorLocation({ source: 'a.ts' })).toBeUndefined();
   });
 });
+
+describe('libraryNames', () => {
+  it('leaves out the hashed chunks Vite shares between dependencies', () => {
+    expect(
+      libraryNames([
+        'http://localhost:5173/node_modules/.vite/deps/dev-shared-C0gnZxoQ.js?v=1',
+        'http://localhost:5173/node_modules/.vite/deps/solid-js.js?v=1',
+      ]),
+    ).toEqual(['solid-js']);
+  });
+
+  it('reads package names from node_modules, pre-bundled and served paths', () => {
+    expect(
+      libraryNames([
+        '/app/node_modules/.pnpm/solid-js@2.0.0/node_modules/solid-js/dist/dev.js',
+        'http://localhost:3000/node_modules/.vite/deps/@solidjs_start_server.js?v=1',
+        'http://localhost:3000/node_modules/@solidjs/start/dist/x.js',
+        undefined,
+      ]),
+    ).toEqual(['solid-js', '@solidjs/start']);
+  });
+});
+
+describe('foldLabel', () => {
+  it('names the libraries of the run', () => {
+    const files = ['/a/node_modules/solid-js/x.js', '/a/node_modules/@solidjs/start/y.js'];
+    expect(foldLabel(files)).toBe('2 frames in solid-js and @solidjs/start');
+    expect(foldLabel(['/a/node_modules/solid-js/x.js'])).toBe('1 frame in solid-js');
+    expect(foldLabel(['http://x/y.js'])).toBe('1 frame in libraries');
+  });
+});
diff --git a/src/dev-toolbar/error-viewer/frames.ts b/src/dev-toolbar/error-viewer/frames.ts
index bec4e56..beec6f1 100644
--- a/src/dev-toolbar/error-viewer/frames.ts
+++ b/src/dev-toolbar/error-viewer/frames.ts
@@ -97,3 +97,53 @@ export function editorLocation(source: {
   const column = source.column ? `:${source.column}` : '';
   return `${path}:${source.line}${column}`;
 }
+
+/** The package a library file belongs to, when its path says. */
+function packageOf(file: string): string | undefined {
+  const path = file.split('?')[0]!.replace(/\\/g, '/');
+
+  // A pre-bundled dependency is one flat file, with `/` of a scoped name written as `_`.
+  const bundled = /\/\.vite\/deps\/([^/]+?)(?:\.[cm]?js)?$/.exec(path)?.[1];
+  if (bundled) {
+    // A chunk Vite split out and shares between dependencies ends in a hash,
+    // such as `dev-shared-C0gnZxoQ`. It names no package.
+    if (/-[A-Za-z0-9_]{8}$/.test(bundled)) return undefined;
+    const scoped = /^(@[^_]+)_([^_]+)/.exec(bundled);
+    return scoped ? `${scoped[1]}/${scoped[2]}` : bundled.split('_')[0];
+  }
+
+  // A package manager folder holds the package name after the last node_modules.
+  const modules = path.split('node_modules/');
+  if (modules.length > 1) {
+    const parts = modules[modules.length - 1]!.split('/');
+    if (parts[0]!.startsWith('@') && parts[1]) return `${parts[0]}/${parts[1]}`;
+    return parts[0] || undefined;
+  }
+
+  // The runtime and the start package, served from outside node_modules.
+  const scoped = /\/(@solidjs)\/([^/]+)/.exec(path);
+  if (scoped) return `${scoped[1]}/${scoped[2]}`;
+  if (/\/solid-js(?:\/|$)/.test(path)) return 'solid-js';
+  return undefined;
+}
+
+/** The names of the packages a run of library frames comes from, first seen first. */
+export function libraryNames(files: (string | undefined)[]): string[] {
+  const names: string[] = [];
+  for (const file of files) {
+    const name = file ? packageOf(file) : undefined;
+    if (name && !names.includes(name)) names.push(name);
+  }
+  return names;
+}
+
+/** The label of a folded run: "6 frames in solid-js and @solidjs/start". */
+export function foldLabel(files: (string | undefined)[]): string {
+  const names = libraryNames(files);
+  const count = `${files.length} ${files.length === 1 ? 'frame' : 'frames'}`;
+  if (names.length === 0) return `${count} in libraries`;
+  if (names.length === 1) return `${count} in ${names[0]}`;
+  if (names.length === 2) return `${count} in ${names[0]} and ${names[1]}`;
+  if (names.length === 3) return `${count} in ${names[0]}, ${names[1]} and ${names[2]}`;
+  return `${count} in ${names[0]}, ${names[1]} and ${names.length - 2} more`;
+}
diff --git a/src/dev-toolbar/error-viewer/index.tsx b/src/dev-toolbar/error-viewer/index.tsx
index 8e9520b..f7d80db 100644
--- a/src/dev-toolbar/error-viewer/index.tsx
+++ b/src/dev-toolbar/error-viewer/index.tsx
@@ -3,22 +3,16 @@ import { parse as parseErrorStack, type StackFrameLite } from 'error-stack-parse
 import * as htmlToImage from 'html-to-image';
 import type { JSX } from '@solidjs/web';
 import { Errored, For, Loading, Show, createMemo, createSignal } from 'solid-js';
-import Button from '../../ui/Button.js';
-import IconButton from '../../ui/IconButton.js';
 import Placeholder from '../../ui/Placeholder.js';
 import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Text } from '../../ui/Text.js';
 import { useResizableDetail } from '../../ui/use-resizable-detail.js';
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CameraIcon,
-  DiscordIcon,
-  GithubIcon,
-  RefreshIcon,
-  ViewCompiledIcon,
-  ViewOriginalIcon,
-} from '../icons.js';
+import type { ErrorRecord } from '../error-record.js';
+import { describeError } from '../health/describe-error.js';
+import { HealthButton } from '../health/HealthButton.js';
+import { leadingPane } from '../health/leading-pane.js';
+import { formatClock, wallTime } from '../health/time.js';
+import { CameraIcon, DiscordIcon, GithubIcon, RefreshIcon } from '../icons.js';
 import { openInEditor } from '../open-in-editor.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { errorReport, resolveErrorFrames } from '../report/error-report.js';
@@ -26,54 +20,28 @@ import { pageRoute } from '../report/markdown.js';
 import { CodeView } from './CodeView.js';
 import { createStackFrame, type StackFrameSource } from './create-stack-frame.js';
 import download from './download.js';
-import { editorLocation, foldLibraryFrames, pickDefaultFrame } from './frames.js';
+import {
+  editorLocation,
+  foldLabel,
+  foldLibraryFrames,
+  isLibraryFile,
+  pickDefaultFrame,
+} from './frames.js';
 import './styles.css';
 
-export function classNames(...classes: (string | boolean | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-interface ErrorInfoProps {
-  error: unknown;
+/** The path of a source without its query and origin, split into folder and file name. */
+function splitPath(source: string): { folder: string; file: string } {
+  let path = source.split(/[?#]/)[0]!;
+  path = path.replace(/^file:\/\//, '').replace(/^https?:\/\/[^/]+/, '');
+  const slash = path.lastIndexOf('/');
+  return { folder: path.slice(0, slash + 1), file: path.slice(slash + 1) };
 }
 
-function ErrorInfo(props: ErrorInfoProps): JSX.Element {
-  const error = createMemo(() => {
-    const e = props.error;
-
-    if (e instanceof Error) {
-      return { name: e.name, message: e.message };
-    }
-
-    if (e instanceof ErrorEvent) {
-      return { message: e.message };
-    }
-
-    return { message: (e as Error).toString() };
-  });
-
-  return (
-    <span data-solid-error-viewer-error-info>
-      <span data-solid-error-viewer-error-info-name>{error().name}</span>
-      <span data-solid-error-viewer-error-info-message>{error().message}</span>
-    </span>
-  );
-}
-
-function getFileName(source: string): string {
-  try {
-    const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
-    const paths = path.pathname.split('/');
-    return paths[paths.length - 1]!;
-  } catch (error) {
-    return getFileName(`/${source}`);
-  }
-}
-
-function getFilePath(source: StackFrameSource) {
+/** `file:line:column` of a frame, as the frame list shows it. */
+function getFilePath(source: StackFrameSource): string {
   const line = source.line ? `:${source.line}` : '';
   const column = source.column ? `:${source.column}` : '';
-  return `${getFileName(source.source)}${line}${column}`;
+  return `${splitPath(source.source).file}${line}${column}`;
 }
 
 function CodeFallback(): JSX.Element {
@@ -115,7 +83,7 @@ interface FrameOptionProps {
   onSelect: (frame: StackFrameLite) => void;
 }
 
-// Frame rendered from the raw (unmapped) stack info — used while the source
+// Frame rendered from the raw (unmapped) stack info, used while the source
 // is loading or when it is unreachable, so the frame never vanishes from
 // the list.
 function rawFrameFile(frame: StackFrameLite): string {
@@ -168,57 +136,101 @@ function FrameOption(props: FrameOptionProps): JSX.Element {
   );
 }
 
+function OpenIcon(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+      <path
+        d="M14 4h6v6M20 4l-9 9M18 14v5H5V6h5"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
 interface CodeBarProps {
   source?: StackFrameSource;
   isCompiled: boolean;
-  onToggleCompiled: () => void;
+  onSetCompiled: (compiled: boolean) => void;
 }
 
+/** The path of the frame, the Original and Compiled switch and the editor button. */
 function CodeBar(props: CodeBarProps): JSX.Element {
   return (
     <div data-solid-error-viewer-stack-frames-code-bar>
-      <span data-solid-error-viewer-stack-frames-code-source>{props.source?.source}</span>
+      <span data-solid-error-viewer-stack-frames-code-source title={props.source?.source}>
+        <Show when={props.source}>
+          {(source) => (
+            <>
+              {splitPath(source().source).folder}
+              <b>{splitPath(source().source).file}</b>
+              {source().line ? `:${source().line}` : ''}
+              {source().column ? `:${source().column}` : ''}
+            </>
+          )}
+        </Show>
+      </span>
+      <div data-solid-error-viewer-segment>
+        <button
+          type="button"
+          title="View Original Source"
+          aria-pressed={props.isCompiled ? 'false' : 'true'}
+          data-on={props.isCompiled ? undefined : ''}
+          onClick={() => props.onSetCompiled(false)}
+        >
+          Original
+        </button>
+        <button
+          type="button"
+          title="View Compiled Source"
+          aria-pressed={props.isCompiled ? 'true' : 'false'}
+          data-on={props.isCompiled ? '' : undefined}
+          onClick={() => props.onSetCompiled(true)}
+        >
+          Compiled
+        </button>
+      </div>
       <Show when={props.source ? editorLocation(props.source) : undefined}>
         {(location) => (
-          <Button
+          <HealthButton
+            primary
             data-solid-error-viewer-open-in-editor
             title={`Open ${location()} in editor`}
             onClick={() => openInEditor(location())}
           >
+            <OpenIcon />
             Open in editor
-          </Button>
+          </HealthButton>
         )}
       </Show>
-      <IconButton data-solid-error-viewer-button onClick={props.onToggleCompiled} type="button">
-        <Show when={props.isCompiled} fallback={<ViewOriginalIcon title="View Original Source" />}>
-          <ViewCompiledIcon title="View Compiled Source" />
-        </Show>
-      </IconButton>
     </div>
   );
 }
 
 interface StackFramesContentProps {
-  error: Error;
+  frames: StackFrameLite[];
   isCompiled: boolean;
-  onToggleCompiled: () => void;
+  onSetCompiled: (compiled: boolean) => void;
 }
 
 function StackFramesContent(props: StackFramesContentProps) {
-  // An error without a usable stack yields no frames instead of throwing.
-  const stackframes = parseErrorStack(props.error, { allowEmpty: true });
-  const segments = foldLibraryFrames(stackframes);
+  const segments = foldLibraryFrames(props.frames);
 
   const [selectedFrame, setSelectedFrame] = createSignal<StackFrameLite | undefined>(
-    pickDefaultFrame(stackframes),
+    pickDefaultFrame(props.frames),
   );
   // Ids of the folded runs that are open.
   const [expanded, setExpanded] = createSignal<ReadonlySet<number>>(new Set());
 
-  const detail = useResizableDetail({
-    storageKey: 'solid-start-devtools:error-code-width',
-    defaultWidth: 480,
-  });
+  // The handle is the left edge of the code, so it sizes the frame list before it.
+  const framesWidth = leadingPane(
+    useResizableDetail({
+      storageKey: 'solid-start-devtools:error-frames-width',
+      defaultWidth: 250,
+      minWidth: 160,
+    }),
+  );
 
   function toggleFold(id: number) {
     const next = new Set(expanded());
@@ -233,7 +245,7 @@ function StackFramesContent(props: StackFramesContentProps) {
   function codeFallback() {
     return (
       <>
-        <CodeBar isCompiled={props.isCompiled} onToggleCompiled={props.onToggleCompiled} />
+        <CodeBar isCompiled={props.isCompiled} onSetCompiled={props.onSetCompiled} />
         <CodeFallback />
       </>
     );
@@ -252,11 +264,12 @@ function StackFramesContent(props: StackFramesContentProps) {
 
   return (
     <div data-solid-error-viewer-stack-frames-content>
-      <div data-solid-error-viewer-stack-frames>
+      <div data-solid-error-viewer-stack-frames style={{ width: `${framesWidth.width()}px` }}>
         <For each={segments}>
           {(segment) => {
             if (segment.type === 'frame') return frameOption(segment.frame);
             const open = () => expanded().has(segment.id);
+            const label = foldLabel(segment.frames.map((frame) => frame.file));
             return (
               <>
                 <button
@@ -265,9 +278,7 @@ function StackFramesContent(props: StackFramesContentProps) {
                   aria-expanded={open() ? 'true' : 'false'}
                   onClick={() => toggleFold(segment.id)}
                 >
-                  {`${open() ? '▾' : '▸'} ${segment.frames.length} ${
-                    segment.frames.length === 1 ? 'frame' : 'frames'
-                  } in libraries`}
+                  {`${open() ? '▾' : '▸'} ${label}`}
                 </button>
                 <Show when={open()}>
                   <For each={segment.frames}>{(frame) => frameOption(frame)}</For>
@@ -277,8 +288,8 @@ function StackFramesContent(props: StackFramesContentProps) {
           }}
         </For>
       </div>
-      <div data-solid-error-viewer-stack-frames-code style={{ width: `${detail.width()}px` }}>
-        <ResizeHandle detail={detail} />
+      <div data-solid-error-viewer-stack-frames-code>
+        <ResizeHandle detail={framesWidth} title="Drag to resize, double-click to reset" />
         <Show when={selectedFrame()} keyed>
           {(frame) => (
             // Keyed on the frame so a failure inspecting one frame (an
@@ -295,7 +306,7 @@ function StackFramesContent(props: StackFramesContentProps) {
                           <CodeBar
                             source={source}
                             isCompiled={props.isCompiled}
-                            onToggleCompiled={props.onToggleCompiled}
+                            onSetCompiled={props.onSetCompiled}
                           />
                           <div data-solid-error-viewer-stack-frames-code-container>
                             <CodeView
@@ -319,33 +330,19 @@ function StackFramesContent(props: StackFramesContentProps) {
   );
 }
 
-interface StackFramesProps {
-  error: unknown;
-  isCompiled: boolean;
-  onToggleCompiled: () => void;
-}
-
-function StackFrames(props: StackFramesProps) {
-  return (
-    <Show when={props.error instanceof Error && props.error} keyed>
-      {(current) => (
-        <StackFramesContent
-          error={current}
-          isCompiled={props.isCompiled}
-          onToggleCompiled={props.onToggleCompiled}
-        />
-      )}
-    </Show>
-  );
-}
-
 interface ErrorViewerProps {
   show?: boolean;
   errors: any[];
+  /** When and during what each error was caught, in the order of `errors`. */
+  records?: ErrorRecord[];
   resetError: () => void;
   /** 0-based index into `errors`. When set, the parent owns the selection. */
   index?: number;
   onIndexChange?: (index: number) => void;
+  /** The label of the action an origin belongs to, when it belongs to one. */
+  describeOrigin?: (origin: object) => string | undefined;
+  /** Opens the action an origin belongs to in the Activity view. */
+  onShowInActivity?: (origin: object) => void;
 }
 
 const ISSUE_THREAD = 'https://github.com/solidjs/solid-start-devtools/issues/new';
@@ -375,10 +372,6 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
     selectIndex(current() < length() - 1 ? current() + 1 : 0);
   }
 
-  function toggleIsCompiled() {
-    setIsCompiled((c) => !c);
-  }
-
   const [panel, setPanel] = createSignal<HTMLElement>();
 
   function downloadScreenshot() {
@@ -426,57 +419,117 @@ export default function ErrorViewer(props: ErrorViewerProps): JSX.Element {
           }
         >
           <div ref={setPanel} data-solid-error-viewer>
-            <div data-solid-error-viewer-navbar>
-              <div data-solid-error-viewer-navbar-left>
-                <Show when={props.errors.length > 1}>
-                  <div data-solid-error-viewer-pagination>
-                    <IconButton data-solid-error-viewer-button onClick={goPrev} type="button">
-                      <ArrowLeftIcon title="Go Previous" />
-                    </IconButton>
-                    <div data-solid-error-viewer-page-counter>
-                      {`${current() + 1} of ${props.errors.length}`}
-                    </div>
-                    <IconButton data-solid-error-viewer-button onClick={goNext} type="button">
-                      <ArrowRightIcon title="Go Next" />
-                    </IconButton>
-                  </div>
-                </Show>
-              </div>
-              <div data-solid-error-viewer-controls>
-                <CopyReportButton label="this error" report={copyErrorReport} />
-                <IconButton data-solid-error-viewer-button onClick={redirectToGithub} type="button">
-                  <GithubIcon title="Create an issue thread on Github" />
-                </IconButton>
-                <IconButton
-                  data-solid-error-viewer-button
-                  onClick={redirectToDiscord}
-                  type="button"
-                >
-                  <DiscordIcon title="Join our Discord Channel" />
-                </IconButton>
-                <IconButton
-                  data-solid-error-viewer-button
-                  onClick={downloadScreenshot}
-                  type="button"
-                >
-                  <CameraIcon title="Capture Error Overlay" />
-                </IconButton>
-                <IconButton data-solid-error-viewer-button onClick={props.resetError} type="button">
-                  <RefreshIcon title="Reset Error" />
-                </IconButton>
-              </div>
-            </div>
             <Show when={props.errors[current()]} keyed>
-              {(error) => (
-                <div data-solid-error-viewer-content>
-                  <ErrorInfo error={error} />
-                  <StackFrames
-                    error={error}
-                    isCompiled={isCompiled()}
-                    onToggleCompiled={toggleIsCompiled}
-                  />
-                </div>
-              )}
+              {(error) => {
+                // An error without a usable stack yields no frames instead of throwing.
+                const frames =
+                  error instanceof Error ? parseErrorStack(error, { allowEmpty: true }) : [];
+                const info = describeError(error);
+                const record = () => props.records?.[current()];
+                // The first frame from the app, which is where the error was thrown from.
+                const thrownIn = () => {
+                  const frame = pickDefaultFrame(frames);
+                  return frame && !isLibraryFile(frame.file) ? frame.function : undefined;
+                };
+                // The action that was running, when the origin belongs to one.
+                const action = () => {
+                  const origin = record()?.origin;
+                  const label = origin && props.describeOrigin?.(origin);
+                  return label ? { origin: origin as object, label } : undefined;
+                };
+                return (
+                  <>
+                    <div data-solid-error-viewer-head>
+                      <div data-solid-error-viewer-top>
+                        <Show when={props.errors.length > 1}>
+                          <div data-solid-error-viewer-pagination>
+                            <button type="button" title="Previous error" onClick={goPrev}>
+                              ‹
+                            </button>
+                            <span data-solid-error-viewer-page-counter>
+                              {`${current() + 1} of ${props.errors.length}`}
+                            </span>
+                            <button type="button" title="Next error" onClick={goNext}>
+                              ›
+                            </button>
+                          </div>
+                        </Show>
+                        <Show when={thrownIn()}>
+                          {(name) => (
+                            <span data-solid-error-viewer-where>
+                              in <b>{`ƒ ${name()}`}</b>
+                            </span>
+                          )}
+                        </Show>
+                        <span data-solid-error-viewer-spacer />
+                        <HealthButton icon onClick={redirectToGithub}>
+                          <GithubIcon title="Create an issue thread on GitHub" />
+                        </HealthButton>
+                        <HealthButton icon onClick={redirectToDiscord}>
+                          <DiscordIcon title="Join our Discord channel" />
+                        </HealthButton>
+                        <HealthButton icon onClick={downloadScreenshot}>
+                          <CameraIcon title="Capture the error as an image" />
+                        </HealthButton>
+                        <CopyReportButton
+                          label="this error"
+                          text="Copy report"
+                          report={copyErrorReport}
+                        />
+                        <HealthButton title="Reset the error" onClick={props.resetError}>
+                          <RefreshIcon title="" aria-hidden="true" />
+                          Reset
+                        </HealthButton>
+                      </div>
+                      <div data-solid-error-viewer-error-info-name>{info.name}</div>
+                      <div data-solid-error-viewer-error-info-message>{info.message}</div>
+                      <Show when={record()}>
+                        {(item) => (
+                          <div data-solid-error-viewer-meta>
+                            {formatClock(wallTime(item().at))}
+                            <Show when={action()}>
+                              {(found) => (
+                                <>
+                                  {' · after '}
+                                  <span data-solid-error-viewer-mono>{found().label}</span>
+                                  {' on '}
+                                  <span data-solid-error-viewer-mono>{pageRoute()}</span>
+                                  <Show when={props.onShowInActivity}>
+                                    {(show) => (
+                                      <>
+                                        {' · '}
+                                        <button
+                                          type="button"
+                                          data-solid-error-viewer-link
+                                          onClick={() => show()(found().origin)}
+                                        >
+                                          see it in Activity
+                                        </button>
+                                      </>
+                                    )}
+                                  </Show>
+                                </>
+                              )}
+                            </Show>
+                          </div>
+                        )}
+                      </Show>
+                    </div>
+                    <Show
+                      when={frames.length}
+                      fallback={
+                        <div data-solid-error-viewer-nostack>This value has no stack to show.</div>
+                      }
+                    >
+                      <StackFramesContent
+                        frames={frames}
+                        isCompiled={isCompiled()}
+                        onSetCompiled={setIsCompiled}
+                      />
+                    </Show>
+                  </>
+                );
+              }}
             </Show>
           </div>
         </Show>
diff --git a/src/dev-toolbar/error-viewer/styles.css b/src/dev-toolbar/error-viewer/styles.css
index 7121633..79e8278 100644
--- a/src/dev-toolbar/error-viewer/styles.css
+++ b/src/dev-toolbar/error-viewer/styles.css
@@ -5,181 +5,177 @@
   width: 100%;
   height: 100%;
   min-height: 0;
+  min-width: 0;
+}
+
+/* the header block: pager and actions, then the error, then when it happened */
+[data-solid-error-viewer-head] {
+  flex: none;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--start-dt-line);
 }
 
-[data-solid-error-viewer-navbar] {
+[data-solid-error-viewer-top] {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-
-  padding: 0.5rem 0.75rem;
-
-  position: sticky;
-  top: 0;
-  z-index: 1;
+  gap: 6px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
 
-  background: var(--start-dt-bg-glass);
-  backdrop-filter: blur(16px) saturate(140%);
-  -webkit-backdrop-filter: blur(16px) saturate(140%);
+[data-solid-error-viewer-spacer] {
+  flex: 1;
 }
 
 [data-solid-error-viewer-pagination] {
   display: flex;
-  flex-direction: row;
+  flex: none;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 9999px;
-  color: var(--start-dt-text);
-  background-color: var(--start-dt-surface);
-  padding: 0.25rem;
+  gap: 2px;
+
+  padding: 2px;
+
+  border-radius: 99px;
+  background: var(--start-dt-raise);
+  color: var(--start-dt-text-muted);
+  font: 11px var(--start-dt-mono);
 }
 
-[data-solid-error-viewer-button] {
-  /* empty */
+[data-solid-error-viewer-pagination] > button {
+  display: grid;
+  place-items: center;
+
+  width: 22px;
+  height: 22px;
+  padding: 0;
+
+  border: 0;
+  border-radius: 99px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
 }
 
-[data-solid-error-viewer-button]:hover {
+[data-solid-error-viewer-pagination] > button:hover {
+  background: var(--start-dt-raise-2);
   color: var(--start-dt-text);
-  background-color: var(--start-dt-surface-hover);
 }
 
-[data-solid-error-viewer-button]:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  outline-color: var(--start-dt-accent);
+[data-solid-error-viewer-pagination] > button:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
 }
 
-[data-solid-error-viewer-button]:focus-visible {
-  box-shadow: 0 0 0 2px var(--start-dt-accent);
+[data-solid-error-viewer-page-counter] {
+  padding: 0 4px;
 }
 
-[data-solid-error-viewer-button]:active {
-  color: var(--start-dt-accent);
-  background-color: var(--start-dt-surface-active);
-}
+[data-solid-error-viewer-where] {
+  min-width: 0;
+  overflow: hidden;
 
-[data-solid-error-viewer-button] > svg {
-  height: 1.5rem;
-  width: 1.5rem;
+  color: var(--start-dt-faint);
+  font: 11.5px var(--start-dt-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-[data-solid-error-viewer-page-counter] {
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--start-dt-text-muted);
+[data-solid-error-viewer-where] > b {
+  color: var(--start-dt-violet);
+  font-weight: 500;
 }
 
-[data-solid-error-viewer-navbar-left] {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+[data-solid-error-viewer-error-info-name] {
+  color: var(--start-dt-red);
+  font: 600 13px var(--start-dt-mono);
 }
 
-[data-solid-error-viewer-controls] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  border-radius: 9999px;
+[data-solid-error-viewer-error-info-message] {
+  margin-top: 1px;
+
   color: var(--start-dt-text);
-  padding: 0.25rem;
+  font: 15px var(--start-dt-mono);
+  word-break: break-word;
 }
 
-[data-solid-error-viewer-content] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
+[data-solid-error-viewer-meta] {
+  margin-top: 6px;
 
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
+  color: var(--start-dt-faint);
+  font-size: 12px;
+}
 
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--start-dt-border-soft);
+[data-solid-error-viewer-mono] {
+  font-family: var(--start-dt-mono);
 }
 
-[data-solid-error-viewer-error-info] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+[data-solid-error-viewer-link] {
+  padding: 0;
+
+  border: 0;
+  background: none;
+  color: var(--start-dt-solid);
+  font: inherit;
+  cursor: pointer;
 }
 
-[data-solid-error-viewer-error-info-name] {
-  font-weight: 600;
-  font-size: 0.8125rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--start-dt-text-muted);
+[data-solid-error-viewer-link]:hover {
+  text-decoration: underline;
 }
 
-[data-solid-error-viewer-error-info-message] {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  color: var(--start-dt-danger);
-  font-weight: 700;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
+[data-solid-error-viewer-nostack] {
+  padding: 16px;
+  color: var(--start-dt-faint);
+  font-size: 12px;
 }
 
+/* the stack: frames on the left, source on the right */
 [data-solid-error-viewer-stack-frames-content] {
   display: flex;
-  flex-direction: row;
-
   flex: 1;
   min-height: 0;
+  min-width: 0;
 }
 
 [data-solid-error-viewer-stack-frames] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+  box-sizing: border-box;
+  position: relative;
+  flex: none;
+  /* keeps the source usable when the window shrinks below a saved width */
+  max-width: calc(100% - 240px);
+  overflow: auto;
+  padding: 6px;
 
-  flex: 1 1 0%;
-  min-width: 0;
-  padding-right: 0.5rem;
-  overflow-y: auto;
+  border-right: 1px solid var(--start-dt-line);
 }
 
 [data-solid-error-viewer-stack-frame] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.125rem;
-  flex-shrink: 0;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 9px;
+
+  border: 0;
+  border-radius: 6px;
+  background: none;
   color: var(--start-dt-text);
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem;
-  cursor: pointer;
+  font: 12px var(--start-dt-mono);
   text-align: left;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline: none;
-
-  min-width: 0;
-  max-width: 100%;
+  cursor: pointer;
 }
 
 [data-solid-error-viewer-stack-frame]:hover {
-  background-color: var(--start-dt-surface-hover);
+  background: oklch(1 0 0 / 0.04);
 }
 
 [data-solid-error-viewer-stack-frame][data-selected] {
-  background-color: var(--start-dt-surface-active);
+  background: var(--start-dt-raise-2);
 }
 
-[data-solid-error-viewer-stack-frame]:focus-visible {
-  box-shadow: 0 0 0 2px var(--start-dt-accent);
+[data-solid-error-viewer-stack-frame]:focus-visible,
+[data-solid-error-viewer-stack-frames-fold]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: -2px;
 }
 
 [data-solid-error-viewer-stack-frame]:disabled {
@@ -187,163 +183,194 @@
   opacity: 0.6;
 }
 
-[data-solid-error-viewer-stack-frame-function] {
-  font-weight: 600;
-  max-width: 100%;
-  white-space: nowrap;
+[data-solid-error-viewer-stack-frame-function],
+[data-solid-error-viewer-stack-frame-file] {
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
+  white-space: nowrap;
+}
+
+[data-solid-error-viewer-stack-frame-function] {
+  color: var(--start-dt-text);
 }
 
 [data-solid-error-viewer-stack-frame-file] {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  color: var(--start-dt-text-muted);
+  color: var(--start-dt-faint);
+  font-size: 11px;
 }
 
 [data-solid-error-viewer-stack-frames-fold] {
-  flex-shrink: 0;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 9px;
+
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--start-dt-faint);
+  font: inherit;
+  font-size: 11.5px;
   text-align: left;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  color: var(--start-dt-text-muted);
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem;
   cursor: pointer;
-  outline: none;
 }
 
 [data-solid-error-viewer-stack-frames-fold]:hover {
-  color: var(--start-dt-text);
-  background-color: var(--start-dt-surface-hover);
-}
-
-[data-solid-error-viewer-stack-frames-fold]:focus-visible {
-  box-shadow: 0 0 0 2px var(--start-dt-accent);
+  background: oklch(1 0 0 / 0.04);
+  color: var(--start-dt-text-muted);
 }
 
+/* the source pane; its handle sits on its left edge, over the frame list's border */
 [data-solid-error-viewer-stack-frames-code] {
   position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  align-items: stretch;
-  gap: 0.375rem;
-
-  /* Keeps the frames usable when the window shrinks below a saved width. */
-  max-width: calc(100% - 240px);
+  min-width: 240px;
   min-height: 0;
-  flex-shrink: 0;
-  padding: 0.5rem 0 0.5rem 0.75rem;
+}
 
-  border-left: var(--start-dt-border-soft) 1px solid;
+[data-solid-error-viewer-stack-frames-code] > [data-solid-resize-handle] {
+  left: 0;
 }
 
 [data-solid-error-viewer-stack-frames-code-bar] {
   display: flex;
-  flex-direction: row;
+  flex: none;
   align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-[data-solid-error-viewer-open-in-editor] {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
+  gap: 8px;
 
-[data-solid-error-viewer-stack-frames-code-bar] > [data-solid-error-viewer-button] {
-  flex-shrink: 0;
-}
+  padding: 6px 8px 6px 14px;
 
-[data-solid-error-viewer-stack-frames-code-fallback] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border-bottom: 1px solid var(--start-dt-line);
+  background: var(--start-dt-bg);
   color: var(--start-dt-text-muted);
-  flex: 1;
-  min-height: 8rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font: 12px var(--start-dt-mono);
 }
 
 [data-solid-error-viewer-stack-frames-code-source] {
-  flex: 1 1 0%;
+  flex: 1;
   min-width: 0;
-  white-space: nowrap;
   overflow: hidden;
+
   text-overflow: ellipsis;
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
+  white-space: nowrap;
+}
+
+[data-solid-error-viewer-stack-frames-code-source] b {
+  color: var(--start-dt-text);
+  font-weight: 500;
+}
+
+/* Original and Compiled */
+[data-solid-error-viewer-segment] {
+  display: inline-flex;
+  flex: none;
+  padding: 2px;
+
+  border-radius: 7px;
+  background: var(--start-dt-well);
+}
+
+[data-solid-error-viewer-segment] > button {
+  height: 24px;
+  padding: 0 9px;
+
+  border: 0;
+  border-radius: 5px;
+  background: none;
   color: var(--start-dt-text-muted);
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
+  font:
+    11.5px system-ui,
+    sans-serif;
+  cursor: pointer;
+}
+
+[data-solid-error-viewer-segment] > button[data-on] {
+  background: var(--start-dt-raise-2);
+  color: var(--start-dt-text);
+}
+
+[data-solid-error-viewer-segment] > button:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+}
+
+[data-solid-error-viewer-stack-frames-code-fallback] {
+  padding: 16px 14px;
+  color: var(--start-dt-faint);
+  font-size: 12px;
 }
 
 [data-solid-error-viewer-stack-frames-code-container] {
-  width: 100%;
-  overflow: hidden;
-  min-width: 100%;
   flex: 1;
   min-height: 0;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--start-dt-border-soft);
 }
 
 [data-solid-error-viewer-code-view] {
   /* the offsetParent of the lines, so the view can scroll to the frame */
   position: relative;
   overflow: auto;
-  min-width: 100%;
+  box-sizing: border-box;
   height: 100%;
 }
 
 [data-solid-error-viewer-code-view] > .twinkleplop {
-  float: left;
+  box-sizing: border-box;
+  width: max-content;
   min-width: 100%;
-  overflow-x: auto;
   margin: 0;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  padding: 8px 0;
+
   background-color: transparent;
+  font: 12px/1.7 var(--start-dt-mono);
+}
+
+/* One block per line; the newlines between them are not drawn. */
+[data-solid-error-viewer-code-view] code {
+  display: block;
+  white-space: normal;
+}
+
+[data-solid-error-viewer-code-view] .l {
+  display: block;
+  padding: 0 14px;
+  white-space: pre;
 }
 
 /* The highlighter numbers the lines, so the panel only has to place them. */
 [data-solid-error-viewer-code-view] .ln {
   display: inline-block;
-  width: 2.5rem;
-  margin-right: 1rem;
+  width: 28px;
+  margin-right: 16px;
   text-align: right;
-  color: rgba(115, 138, 148, 0.4);
+  color: var(--start-dt-faint);
+  font-style: normal;
 }
 
 /* The `focus` directive marks the line the frame points at. */
 [data-solid-error-viewer-code-view] .l.focus {
-  display: inline-block;
-  min-width: 100%;
-  background-color: oklch(0.63 0.21 25 / 0.25);
+  background-color: var(--start-dt-red-soft);
+  color: var(--start-dt-text);
 }
 
-/* The highlighter tags the block when a line is in focus, so the lines around
-   it can step back without the panel tracking which line that is. */
-[data-solid-error-viewer-code-view] .has-focus .l:not(.focus) {
-  opacity: 0.65;
+[data-solid-error-viewer-code-view] .l.focus .ln {
+  color: var(--start-dt-red);
+}
+
+/* The `^` under the column of the hit line. */
+[data-solid-error-viewer-caret] {
+  display: block;
+  box-sizing: border-box;
+
+  color: var(--start-dt-red);
+  font-weight: 700;
+  line-height: 1.1;
+  white-space: pre;
 }
 
-/* The `err` directive marks the word inside it, when the frame has a column. */
+/* The `err` directive marks the word; the caret already points at it. */
 [data-solid-error-viewer-code-view] .tok.error {
-  border-radius: 0.125rem;
-  background-color: oklch(0.63 0.21 25 / 0.35);
-  box-shadow: 0 1px 0 0 oklch(0.63 0.21 25 / 0.9);
+  background: none;
+  box-shadow: none;
 }
diff --git a/src/dev-toolbar/functions/index.tsx b/src/dev-toolbar/functions/index.tsx
index 49ed323..a60654b 100644
--- a/src/dev-toolbar/functions/index.tsx
+++ b/src/dev-toolbar/functions/index.tsx
@@ -319,7 +319,7 @@ interface ServerFunctionInstanceViewerProps {
   onDelete: () => void;
 }
 
-async function copyCallReport(instance: ServerFunctionInstance): Promise<string> {
+export async function copyCallReport(instance: ServerFunctionInstance): Promise<string> {
   const [requestBody, responseBody] = await Promise.all([
     readReportBody(instance.request.source),
     instance.response ? readReportBody(instance.response.source) : undefined,
@@ -328,7 +328,6 @@ async function copyCallReport(instance: ServerFunctionInstance): Promise<string>
 }
 
 function ServerFunctionInstanceViewer(props: ServerFunctionInstanceViewerProps): JSX.Element {
-  const [tab, setTab] = createSignal<'request' | 'response'>('request');
   return (
     <div data-solid-function-instance-viewer>
       <div data-solid-function-instance-viewer-nav>
@@ -353,16 +352,24 @@ function ServerFunctionInstanceViewer(props: ServerFunctionInstanceViewerProps):
           </IconButton>
         </div>
       </div>
-      <div data-solid-function-instance-viewer-content>
-        <TabGroup horizontal value={tab()} onChange={(value) => setTab(value ?? 'request')}>
-          <TabList>
-            <Tab value="request">Request</Tab>
-            <Tab value="response">Response</Tab>
-          </TabList>
-          <RequestViewer request={props.instance.request} />
-          <ResponseViewer request={props.instance.request} response={props.instance.response} />
-        </TabGroup>
-      </div>
+      <ServerFunctionContent instance={props.instance} />
+    </div>
+  );
+}
+
+/** The request and response of a call, in two tabs. */
+export function ServerFunctionContent(props: { instance: ServerFunctionInstance }): JSX.Element {
+  const [tab, setTab] = createSignal<'request' | 'response'>('request');
+  return (
+    <div data-solid-function-instance-viewer-content>
+      <TabGroup horizontal value={tab()} onChange={(value) => setTab(value ?? 'request')}>
+        <TabList>
+          <Tab value="request">Request</Tab>
+          <Tab value="response">Response</Tab>
+        </TabList>
+        <RequestViewer request={props.instance.request} />
+        <ResponseViewer request={props.instance.request} response={props.instance.response} />
+      </TabGroup>
     </div>
   );
 }
diff --git a/src/dev-toolbar/health/HealthButton.css b/src/dev-toolbar/health/HealthButton.css
new file mode 100644
index 0000000..35e9464
--- /dev/null
+++ b/src/dev-toolbar/health/HealthButton.css
@@ -0,0 +1,79 @@
+/* The prototype's `.btn`: 28px tall, hairline border, muted until hovered. */
+[data-solid-health-btn] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+
+  height: 28px;
+  padding: 0 10px;
+
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 7px;
+  background: none;
+  color: var(--start-dt-text-muted);
+
+  font: inherit;
+  font-family: system-ui, sans-serif;
+  font-size: 12px;
+  line-height: 1.45;
+  text-decoration: none;
+  white-space: nowrap;
+
+  cursor: pointer;
+}
+
+[data-solid-health-btn]:hover:not(:disabled) {
+  color: var(--start-dt-text);
+  background: oklch(1 0 0 / 0.05);
+}
+
+[data-solid-health-btn]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: 1px;
+}
+
+[data-solid-health-btn]:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+[data-solid-health-btn][data-icon] {
+  width: 28px;
+  padding: 0;
+  justify-content: center;
+}
+
+[data-solid-health-btn][data-primary] {
+  background: var(--start-dt-solid);
+  color: oklch(0.16 0.02 265);
+  border-color: transparent;
+  font-weight: 600;
+}
+
+[data-solid-health-btn][data-primary]:hover:not(:disabled) {
+  color: oklch(0.16 0.02 265);
+  background: var(--start-dt-solid);
+  filter: brightness(1.1);
+}
+
+/* An icon alone is 16px, beside a label it is 14px. */
+[data-solid-dev-toolbar] [data-solid-health-btn] svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+[data-solid-dev-toolbar] [data-solid-health-btn][data-icon] svg {
+  width: 16px;
+  height: 16px;
+}
+
+[data-solid-health-btn][data-solid-copy-report='copied'] {
+  color: var(--start-dt-green);
+}
+
+[data-solid-health-btn][data-solid-copy-report='failed'] {
+  color: var(--start-dt-red);
+}
diff --git a/src/dev-toolbar/health/HealthButton.tsx b/src/dev-toolbar/health/HealthButton.tsx
new file mode 100644
index 0000000..947bcc3
--- /dev/null
+++ b/src/dev-toolbar/health/HealthButton.tsx
@@ -0,0 +1,26 @@
+import type { JSX } from '@solidjs/web';
+import { omit } from 'solid-js';
+import './HealthButton.css';
+
+export interface HealthButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** A square button that holds only an icon. */
+  icon?: boolean;
+  /** The one filled action of a bar. */
+  primary?: boolean;
+}
+
+/** An action of the Health view, in the size and weight the prototype gives it. */
+export function HealthButton(props: HealthButtonProps): JSX.Element {
+  const rest = omit(props, 'icon', 'primary', 'children');
+  return (
+    <button
+      type="button"
+      {...rest}
+      data-solid-health-btn
+      data-icon={props.icon ? '' : undefined}
+      data-primary={props.primary ? '' : undefined}
+    >
+      {props.children}
+    </button>
+  );
+}
diff --git a/src/dev-toolbar/health/HealthRow.tsx b/src/dev-toolbar/health/HealthRow.tsx
new file mode 100644
index 0000000..8867c23
--- /dev/null
+++ b/src/dev-toolbar/health/HealthRow.tsx
@@ -0,0 +1,45 @@
+import type { JSX } from '@solidjs/web';
+import { omit } from 'solid-js';
+
+export type Tone = 'error' | 'warn' | 'info';
+
+const GLYPHS: Record<Tone, string> = { error: '✕', warn: '!', info: 'i' };
+
+/** The glyph of a thrown error or an issue: red cross, amber bang or blue i. */
+export function Glyph(props: { tone: Tone }): JSX.Element {
+  return (
+    <span data-solid-health-glyph={props.tone} aria-hidden="true">
+      {GLYPHS[props.tone]}
+    </span>
+  );
+}
+
+export interface HealthRowProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+  tone: Tone;
+  title: string;
+  subtitle: string;
+  /** The age, or the count of a repeated issue. */
+  time: string;
+  selected: boolean;
+}
+
+/** One entry of the Health list: glyph, title and message, and when. */
+export function HealthRow(props: HealthRowProps): JSX.Element {
+  const rest = omit(props, 'tone', 'title', 'subtitle', 'time', 'selected');
+  return (
+    <button
+      type="button"
+      {...rest}
+      data-solid-health-row
+      data-selected={props.selected ? '' : undefined}
+      aria-current={props.selected ? 'true' : undefined}
+    >
+      <Glyph tone={props.tone} />
+      <span data-solid-health-row-what>
+        <b>{props.title}</b>
+        <span data-solid-health-row-sub>{props.subtitle}</span>
+      </span>
+      <span data-solid-health-row-time>{props.time}</span>
+    </button>
+  );
+}
diff --git a/src/dev-toolbar/health/describe-error.ts b/src/dev-toolbar/health/describe-error.ts
new file mode 100644
index 0000000..c0c07d3
--- /dev/null
+++ b/src/dev-toolbar/health/describe-error.ts
@@ -0,0 +1,10 @@
+/** The first line of a thrown value, split into its name and message. */
+export function describeError(error: unknown): { name: string; message: string } {
+  if (error instanceof Error) {
+    return { name: error.name || 'Error', message: error.message };
+  }
+  if (error instanceof ErrorEvent) {
+    return { name: 'Error', message: error.message };
+  }
+  return { name: 'Thrown value', message: String(error) };
+}
diff --git a/src/dev-toolbar/health/index.tsx b/src/dev-toolbar/health/index.tsx
index b34225a..2c04649 100644
--- a/src/dev-toolbar/health/index.tsx
+++ b/src/dev-toolbar/health/index.tsx
@@ -1,53 +1,73 @@
 import type { JSX } from '@solidjs/web';
 import { clientOnly } from '@solidjs/web';
-import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';
-import IconButton from '../../ui/IconButton.js';
-import Placeholder from '../../ui/Placeholder.js';
+import { createEffect, createMemo, createSignal, For, onSettled, Show } from 'solid-js';
 import { ResizeHandle } from '../../ui/ResizeHandle.js';
-import { Text } from '../../ui/Text.js';
 import { useResizableDetail } from '../../ui/use-resizable-detail.js';
-import { TrashIcon } from '../icons.js';
-import { IssueDetail, IssueRow, matchesIssue, SEVERITIES, type Severity } from '../issues/index.js';
-import { isIssuesAvailable, type IssueEntry } from '../issues/tracker.js';
+import type { ErrorRecord } from '../error-record.js';
+import { IssueDetail, matchesIssue, TONES } from '../issues/index.js';
+import { isIssuesAvailable, issueText, type IssueEntry } from '../issues/tracker.js';
+import { describeError } from './describe-error.js';
+import { HealthRow } from './HealthRow.js';
+import { leadingPane } from './leading-pane.js';
+import { formatAge } from './time.js';
 import './styles.css';
 
+export { describeError } from './describe-error.js';
+
 // The error panel is the heaviest part of the view, so it loads when an error is opened.
 const ErrorViewer = clientOnly(() => import('../error-viewer/index.js'), { lazy: true });
 
 /** What the detail pane shows: a thrown error by its index, or an issue by its key. */
 type Selection = { kind: 'error'; index: number } | { kind: 'issue'; key: string };
 
-/** The first line of a thrown value, split into its name and message. */
-export function describeError(error: unknown): { name: string; message: string } {
-  if (error instanceof Error) {
-    return { name: error.name || 'Error', message: error.message };
-  }
-  if (error instanceof ErrorEvent) {
-    return { name: 'Error', message: error.message };
-  }
-  return { name: 'Thrown value', message: String(error) };
-}
+/** Which entries the list shows. */
+type Filter = 'all' | 'error' | 'warn' | 'info';
+
+const FILTERS: { value: Filter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'error', label: 'Errors' },
+  { value: 'warn', label: 'Warnings' },
+  { value: 'info', label: 'Info' },
+];
+
+/** How often the ages in the list move on. */
+const TICK_MS = 5000;
 
 export interface HealthViewerProps {
   show?: boolean;
-  errors: unknown[];
+  /** The errors the toolbar caught, newest first. */
+  errors: ErrorRecord[];
   resetError: () => void;
   issues: IssueEntry[];
   onClearIssues: () => void;
   onViewOwner?: (owner: object) => void;
   onViewInGraph?: (node: object) => void;
+  /** The label of the action an error's origin belongs to, such as `setCurrency("XYZ")`. */
+  describeOrigin?: (origin: object) => string | undefined;
+  /** Opens the action an error's origin belongs to in the Activity view. */
+  onShowInActivity?: (origin: object) => void;
 }
 
 /** Thrown errors and the runtime's diagnostics in one list, with the selected entry beside it. */
 export default function HealthViewer(props: HealthViewerProps): JSX.Element {
+  const [filter, setFilter] = createSignal<Filter>('all');
   const [query, setQuery] = createSignal('');
-  const [hideErrors, setHideErrors] = createSignal(false);
-  const [hidden, setHidden] = createSignal<Severity[]>([]);
   const [selected, setSelected] = createSignal<Selection>();
-  const detail = useResizableDetail({
-    storageKey: 'solid-start-devtools:health-detail-width',
-    defaultWidth: 640,
-    minWidth: 360,
+  const [tick, setTick] = createSignal(0);
+
+  // The handle is the left edge of the detail, so it sizes the list before it.
+  const listWidth = leadingPane(
+    useResizableDetail({
+      storageKey: 'solid-start-devtools:health-list-width',
+      defaultWidth: 320,
+      minWidth: 200,
+    }),
+  );
+
+  // The ages in the rows move on without a change to the lists, so a clock runs.
+  onSettled(() => {
+    const timer = setInterval(() => setTick((value) => value + 1), TICK_MS);
+    return () => clearInterval(timer);
   });
 
   // A new error lands at the top of the list and is opened, as the old Errors panel did.
@@ -60,15 +80,16 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
     },
   );
 
+  // Thrown errors count as errors, so only the All and Errors chips list them.
   const shownErrors = createMemo(() => {
-    if (hideErrors()) return [];
+    const result: { record: ErrorRecord; index: number }[] = [];
+    if (filter() !== 'all' && filter() !== 'error') return result;
     const search = query().trim().toLowerCase();
-    const result: { error: unknown; index: number }[] = [];
     let index = 0;
-    for (const error of props.errors) {
-      const { name, message } = describeError(error);
+    for (const record of props.errors) {
+      const { name, message } = describeError(record.error);
       if (!search || `${name} ${message}`.toLowerCase().includes(search)) {
-        result.push({ error, index });
+        result.push({ record, index });
       }
       index++;
     }
@@ -77,10 +98,10 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
 
   const shownIssues = createMemo(() => {
     const search = query().trim().toLowerCase();
-    const off = hidden();
     const result: IssueEntry[] = [];
     for (const entry of props.issues) {
-      if (!off.includes(entry.event.severity) && matchesIssue(entry, search)) result.push(entry);
+      if (filter() !== 'all' && entry.event.severity !== filter()) continue;
+      if (matchesIssue(entry, search)) result.push(entry);
     }
     return result;
   });
@@ -88,136 +109,145 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
   const total = () => props.errors.length + props.issues.length;
   const shownCount = () => shownErrors().length + shownIssues().length;
 
-  // An issue that was cleared or an error index past the end selects nothing.
+  // What the detail shows: the pick, else the first row. A cleared pick falls back the same way.
   const current = createMemo(() => {
     const value = selected();
-    if (!value) return undefined;
-    if (value.kind === 'error') return value.index < props.errors.length ? value : undefined;
-    const entry = props.issues.find((item) => item.key === value.key);
-    return entry ? { kind: 'issue' as const, entry } : undefined;
+    if (value?.kind === 'error' && value.index < props.errors.length) return value;
+    if (value?.kind === 'issue') {
+      const entry = props.issues.find((item) => item.key === value.key);
+      if (entry) return { kind: 'issue' as const, entry };
+    }
+    const first = shownErrors()[0];
+    if (first) return { kind: 'error' as const, index: first.index };
+    const issue = shownIssues()[0];
+    return issue ? { kind: 'issue' as const, entry: issue } : undefined;
   });
 
-  function toggleSeverity(value: Severity): void {
-    setHidden((list) =>
-      list.includes(value) ? list.filter((item) => item !== value) : [...list, value],
-    );
-  }
-
   function clearAll(): void {
     setSelected(undefined);
     props.resetError();
     props.onClearIssues();
   }
 
+  // The age of a thrown error is on the clock the timeline uses, an issue's on the wall clock.
+  function errorAge(record: ErrorRecord): string {
+    tick();
+    return formatAge(performance.now() - record.at);
+  }
+
+  function issueAge(entry: IssueEntry): string {
+    tick();
+    if (entry.count > 1) return `×${entry.count}`;
+    return formatAge(Date.now() - entry.lastAt);
+  }
+
+  function emptyText(): string {
+    return isIssuesAvailable()
+      ? 'No errors or issues so far.'
+      : 'No errors so far. Issues need a development build of solid-js.';
+  }
+
   return (
     <Show when={props.show}>
       <div data-solid-dev-toolbar-panel>
         <div data-solid-health-viewer>
-          <div data-solid-health-list-pane>
-            <div data-solid-issues-nav>
-              <input
-                data-solid-issues-search
-                type="search"
-                placeholder="Filter by name, code, message or owner"
-                value={query()}
-                onInput={(event) => setQuery(event.currentTarget.value)}
-              />
-              <div data-solid-issues-filters>
-                <button
-                  type="button"
-                  data-solid-issues-filter="thrown"
-                  data-off={hideErrors() ? '' : undefined}
-                  aria-pressed={hideErrors() ? 'false' : 'true'}
-                  onClick={() => setHideErrors((value) => !value)}
-                >
-                  <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>Thrown</Text>
-                </button>
-                <For each={SEVERITIES}>
-                  {(severity) => (
-                    <button
-                      type="button"
-                      data-solid-issues-filter={severity.value}
-                      data-off={hidden().includes(severity.value) ? '' : undefined}
-                      aria-pressed={hidden().includes(severity.value) ? 'false' : 'true'}
-                      onClick={() => toggleSeverity(severity.value)}
-                    >
-                      <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>
-                        {severity.label}
-                      </Text>
-                    </button>
-                  )}
-                </For>
-              </div>
-              <div data-solid-issues-nav-actions>
-                <Text data-solid-issues-count options={{ size: 'xs', font: 'mono' }}>
-                  {`${shownCount()} of ${total()}`}
-                </Text>
-                <IconButton disabled={!total()} onClick={clearAll}>
-                  <TrashIcon title="Clear errors and issues" />
-                </IconButton>
-              </div>
+          <div data-solid-health-list style={{ width: `${listWidth.width()}px` }}>
+            <div data-solid-health-searchrow>
+              <label data-solid-health-search>
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="11" cy="11" r="6" />
+                  <path d="m20 20-4.5-4.5" />
+                </svg>
+                <input
+                  data-solid-issues-search
+                  type="search"
+                  placeholder="Filter by name, code, message or owner"
+                  aria-label="Filter by name, code, message or owner"
+                  value={query()}
+                  onInput={(event) => setQuery(event.currentTarget.value)}
+                />
+              </label>
+              <span data-solid-health-count>{`${shownCount()} of ${total()}`}</span>
             </div>
-            <div data-solid-issues-list>
-              <Show
-                when={shownCount()}
-                fallback={
-                  <Placeholder>
-                    <Text options={{ size: 'xs' }}>
-                      {total()
-                        ? 'Nothing matches this filter.'
-                        : isIssuesAvailable()
-                          ? 'No errors or issues so far.'
-                          : 'No errors so far. Issues need a development build of solid-js.'}
-                    </Text>
-                  </Placeholder>
-                }
+            <div data-solid-health-filters>
+              <For each={FILTERS}>
+                {(item) => (
+                  <button
+                    type="button"
+                    data-solid-health-chip
+                    data-solid-health-filter={item.value}
+                    data-on={filter() === item.value ? '' : undefined}
+                    aria-pressed={filter() === item.value ? 'true' : 'false'}
+                    onClick={() => setFilter(item.value)}
+                  >
+                    {item.label}
+                  </button>
+                )}
+              </For>
+              <button
+                type="button"
+                data-solid-health-chip
+                data-ghost
+                aria-label="Clear errors and issues"
+                title="Clear errors and issues"
+                disabled={!total()}
+                onClick={clearAll}
               >
-                <For each={shownErrors()}>
-                  {(item) => {
-                    const info = () => describeError(item.error);
-                    const isSelected = () => {
-                      const value = current();
-                      return value?.kind === 'error' && value.index === item.index;
-                    };
-                    return (
-                      <button
-                        type="button"
-                        data-solid-health-error-row
-                        data-selected={isSelected() ? '' : undefined}
-                        onClick={() => setSelected({ kind: 'error', index: item.index })}
-                      >
-                        <Text data-solid-health-error-name options={{ size: 'xs', font: 'mono' }}>
-                          {info().name}
-                        </Text>
-                        <Text data-solid-issues-row-message options={{ size: 'xs' }}>
-                          {info().message}
-                        </Text>
-                      </button>
-                    );
-                  }}
-                </For>
-                <For each={shownIssues()}>
-                  {(entry) => {
-                    const isSelected = () => {
-                      const value = current();
-                      return value?.kind === 'issue' && value.entry.key === entry.key;
-                    };
-                    return (
-                      <IssueRow
-                        entry={entry}
-                        selected={isSelected()}
-                        onSelect={() => setSelected({ kind: 'issue', key: entry.key })}
-                      />
-                    );
-                  }}
-                </For>
-              </Show>
+                Clear
+              </button>
             </div>
+            <For each={shownErrors()}>
+              {(item) => {
+                const info = () => describeError(item.record.error);
+                const isSelected = () => {
+                  const value = current();
+                  return value?.kind === 'error' && value.index === item.index;
+                };
+                return (
+                  <HealthRow
+                    data-solid-health-error-row
+                    tone="error"
+                    title={info().name}
+                    subtitle={info().message}
+                    time={errorAge(item.record)}
+                    selected={isSelected()}
+                    onClick={() => setSelected({ kind: 'error', index: item.index })}
+                  />
+                );
+              }}
+            </For>
+            <For each={shownIssues()}>
+              {(entry) => {
+                const isSelected = () => {
+                  const value = current();
+                  return value?.kind === 'issue' && value.entry.key === entry.key;
+                };
+                return (
+                  <HealthRow
+                    data-solid-issues-row
+                    data-severity={entry.event.severity}
+                    tone={TONES[entry.event.severity]}
+                    title={entry.event.code}
+                    subtitle={issueText(entry.event)}
+                    time={issueAge(entry)}
+                    selected={isSelected()}
+                    onClick={() => setSelected({ kind: 'issue', key: entry.key })}
+                  />
+                );
+              }}
+            </For>
           </div>
-          <Show when={current()}>
-            {(value) => (
-              <aside data-solid-health-detail style={{ width: `${detail.width()}px` }}>
-                <ResizeHandle detail={detail} />
+          <div data-solid-health-detail>
+            <ResizeHandle detail={listWidth} title="Drag to resize, double-click to reset" />
+            <Show
+              when={current()}
+              fallback={
+                <div data-solid-health-empty>
+                  {total() ? 'Nothing matches this filter.' : emptyText()}
+                </div>
+              }
+            >
+              {(value) => (
                 <Show
                   when={value().kind === 'error' && (value() as { index: number })}
                   fallback={
@@ -231,9 +261,12 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
                   {(error) => (
                     <ErrorViewer
                       show
-                      errors={props.errors}
+                      errors={props.errors.map((record) => record.error)}
+                      records={props.errors}
                       index={error().index}
                       onIndexChange={(index: number) => setSelected({ kind: 'error', index })}
+                      describeOrigin={props.describeOrigin}
+                      onShowInActivity={props.onShowInActivity}
                       resetError={() => {
                         setSelected(undefined);
                         props.resetError();
@@ -241,9 +274,9 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
                     />
                   )}
                 </Show>
-              </aside>
-            )}
-          </Show>
+              )}
+            </Show>
+          </div>
         </div>
       </div>
     </Show>
diff --git a/src/dev-toolbar/health/leading-pane.ts b/src/dev-toolbar/health/leading-pane.ts
new file mode 100644
index 0000000..bf4f21d
--- /dev/null
+++ b/src/dev-toolbar/health/leading-pane.ts
@@ -0,0 +1,16 @@
+import type { ResizableDetail } from '../../ui/use-resizable-detail.js';
+
+/**
+ * Turns a detail width into the width of the pane before the handle.
+ *
+ * The handle sits on the left edge of the pane after it, so dragging it to
+ * the left makes the pane before it narrower, where it would widen a detail
+ * pane that sits at the right edge.
+ */
+export function leadingPane(detail: ResizableDetail): ResizableDetail {
+  return {
+    ...detail,
+    drag: (offsetX) => detail.drag(-offsetX),
+    step: (deltaX, panelWidth) => detail.step(-deltaX, panelWidth),
+  };
+}
diff --git a/src/dev-toolbar/health/styles.css b/src/dev-toolbar/health/styles.css
index 31e2be2..9ddde01 100644
--- a/src/dev-toolbar/health/styles.css
+++ b/src/dev-toolbar/health/styles.css
@@ -1,82 +1,245 @@
+/* the prototype's split: the list on the left, the selected entry beside it */
 [data-solid-health-viewer] {
   display: flex;
   flex-direction: row;
 
   height: 100%;
   min-height: 0;
+  min-width: 0;
 
   color: var(--start-dt-text);
+  font:
+    13px/1.45 system-ui,
+    -apple-system,
+    sans-serif;
 }
 
-[data-solid-health-list-pane] {
+[data-solid-health-list] {
+  box-sizing: border-box;
+  flex: none;
+  /* keeps the detail usable when the window shrinks below a saved width */
+  max-width: calc(100% - 240px);
+  overflow: auto;
+  padding: 6px;
+}
+
+[data-solid-health-searchrow] {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 4px 0;
+}
 
+[data-solid-health-search] {
+  box-sizing: border-box;
+  display: flex;
   flex: 1;
+  align-items: center;
+  gap: 8px;
   min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+
+  border: 1px solid var(--start-dt-line);
+  border-radius: 7px;
+  background: var(--start-dt-well);
+  color: var(--start-dt-faint);
 }
 
-[data-solid-health-list-pane] [data-solid-issues-nav] {
-  flex-wrap: wrap;
+[data-solid-health-search]:focus-within {
+  border-color: var(--start-dt-solid);
+}
+
+[data-solid-dev-toolbar] [data-solid-health-search] svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-solid-health-search] input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+
+  border: 0;
+  outline: 0;
+  background: none;
+  color: var(--start-dt-text);
+  font: inherit;
+  font-size: 12px;
+}
+
+[data-solid-health-search] input::placeholder {
+  color: var(--start-dt-faint);
 }
 
-[data-solid-issues-filter='thrown']::before {
-  background: var(--start-dt-danger);
-  border-radius: 0.125rem;
+[data-solid-health-count] {
+  flex: none;
+  color: var(--start-dt-faint);
+  font: 11px var(--start-dt-mono);
 }
 
-[data-solid-health-error-row] {
+[data-solid-health-filters] {
+  flex-wrap: wrap;
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 4px;
+}
+
+[data-solid-health-chip] {
+  padding: 3px 9px;
+
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 99px;
+  background: none;
+  color: var(--start-dt-text-muted);
+  font: inherit;
+  font-size: 11.5px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+[data-solid-health-chip]:hover:not(:disabled) {
+  color: var(--start-dt-text);
+}
+
+[data-solid-health-chip][data-on] {
+  background: var(--start-dt-raise-2);
+  border-color: transparent;
+  color: var(--start-dt-text);
+}
+
+[data-solid-health-chip][data-ghost] {
+  margin-left: auto;
+  border-style: dashed;
+  color: var(--start-dt-faint);
+}
+
+[data-solid-health-chip]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+[data-solid-health-chip]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
+  outline-offset: 1px;
+}
 
-  gap: 0.25rem;
+/* a row: glyph, title over message, then the age. Selection is a fill, never a side rule. */
+[data-solid-health-row] {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
 
-  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 7px 10px;
 
-  border: none;
-  border-bottom: var(--start-dt-border-soft) 1px solid;
+  border: 0;
+  border-radius: 7px;
   background: none;
   color: var(--start-dt-text);
+  font: inherit;
   text-align: left;
-
   cursor: pointer;
 }
 
-[data-solid-health-error-row]:hover {
-  background: var(--start-dt-surface-hover);
+[data-solid-health-row]:hover {
+  background: oklch(1 0 0 / 0.04);
 }
 
-[data-solid-health-error-row][data-selected] {
-  background: var(--start-dt-surface-active);
+[data-solid-health-row][data-selected] {
+  background: var(--start-dt-raise-2);
 }
 
-[data-solid-health-error-row]:focus-visible {
-  outline: 2px solid var(--start-dt-accent);
+[data-solid-health-row]:focus-visible {
+  outline: 2px solid var(--start-dt-solid);
   outline-offset: -2px;
 }
 
-[data-solid-health-error-name] {
-  color: oklch(0.78 0.14 25);
+[data-solid-health-row-what] {
+  min-width: 0;
+}
+
+[data-solid-health-row-what] > b {
+  display: block;
+  overflow: hidden;
+
   font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-health-row-sub] {
+  display: block;
+  overflow: hidden;
+
+  color: var(--start-dt-faint);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-solid-health-row-time] {
+  color: var(--start-dt-faint);
+  font: 11px var(--start-dt-mono);
+  text-align: right;
+}
+
+/* the 18px glyph: red cross, amber bang, blue i */
+[data-solid-health-glyph] {
+  display: grid;
+  place-items: center;
+  flex: none;
+
+  width: 18px;
+  height: 18px;
+
+  border-radius: 5px;
+  font: 700 10px var(--start-dt-mono);
+}
+
+[data-solid-health-glyph='error'] {
+  background: var(--start-dt-red-soft);
+  color: var(--start-dt-red);
+}
+
+[data-solid-health-glyph='warn'] {
+  background: var(--start-dt-amber-soft);
+  color: var(--start-dt-amber);
+}
+
+[data-solid-health-glyph='info'] {
+  background: var(--start-dt-solid-soft);
+  color: var(--start-dt-solid);
 }
 
+/* the right pane; the resize handle sits on its left edge */
 [data-solid-health-detail] {
   position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
-
-  /* Keeps the list usable when the window shrinks below a saved width. */
-  max-width: calc(100% - 240px);
-  flex-shrink: 0;
   min-height: 0;
+  min-width: 0;
 
-  overflow: hidden;
-
-  border-left: var(--start-dt-border-soft) 1px solid;
+  border-left: 1px solid var(--start-dt-line);
 }
 
 [data-solid-health-detail] > [data-solid-dev-toolbar-panel] {
   flex: 1;
   min-height: 0;
 }
+
+[data-solid-health-empty] {
+  padding: 16px;
+  color: var(--start-dt-faint);
+  font-size: 12px;
+}
diff --git a/src/dev-toolbar/health/time.test.ts b/src/dev-toolbar/health/time.test.ts
new file mode 100644
index 0000000..76524f2
--- /dev/null
+++ b/src/dev-toolbar/health/time.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { formatAge, formatClock, wallTime } from './time.js';
+
+describe('formatAge', () => {
+  it('rounds down to the largest unit', () => {
+    expect(formatAge(1000)).toBe('now');
+    expect(formatAge(12_000)).toBe('12s');
+    expect(formatAge(3 * 60_000 + 20_000)).toBe('3m');
+    expect(formatAge(2 * 3_600_000)).toBe('2h');
+    expect(formatAge(3 * 86_400_000)).toBe('3d');
+  });
+
+  it('treats a time in the future as now', () => {
+    expect(formatAge(-500)).toBe('now');
+  });
+});
+
+describe('wallTime', () => {
+  it('moves a performance.now() time onto the wall clock', () => {
+    expect(wallTime(900, 10_000, 1000)).toBe(9900);
+  });
+});
+
+describe('formatClock', () => {
+  it('pads each part to two digits', () => {
+    expect(formatClock(new Date(2026, 0, 1, 4, 5, 9).getTime())).toBe('04:05:09');
+  });
+});
diff --git a/src/dev-toolbar/health/time.ts b/src/dev-toolbar/health/time.ts
new file mode 100644
index 0000000..30a4b5b
--- /dev/null
+++ b/src/dev-toolbar/health/time.ts
@@ -0,0 +1,25 @@
+/** The wall-clock time a record made on the `performance.now()` clock was made at. */
+export function wallTime(at: number, now = Date.now(), tick = performance.now()): number {
+  return now - (tick - at);
+}
+
+/** How long ago, as the list shows it: "now", "12s", "3m", "2h", "4d". */
+export function formatAge(milliseconds: number): string {
+  const seconds = Math.max(0, Math.floor(milliseconds / 1000));
+  if (seconds < 5) return 'now';
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  return `${Math.floor(hours / 24)}d`;
+}
+
+/** The time of day as hh:mm:ss on a 24-hour clock. */
+export function formatClock(time: number): string {
+  const date = new Date(time);
+  const parts = [date.getHours(), date.getMinutes(), date.getSeconds()];
+  const padded: string[] = [];
+  for (const part of parts) padded.push(String(part).padStart(2, '0'));
+  return padded.join(':');
+}
diff --git a/src/dev-toolbar/index.css b/src/dev-toolbar/index.css
index 3b5225f..af55039 100644
--- a/src/dev-toolbar/index.css
+++ b/src/dev-toolbar/index.css
@@ -14,6 +14,25 @@
   --start-dt-danger: oklch(0.63 0.21 25);
   --start-dt-shadow: 0 12px 32px oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.25);
 
+  /* the redesign's palette: raised surfaces, hairlines, text steps and status hues */
+  --start-dt-raise: oklch(0.21 0.017 265);
+  --start-dt-raise-2: oklch(0.26 0.022 265);
+  --start-dt-line: oklch(1 0 0 / 0.08);
+  --start-dt-line-2: oklch(1 0 0 / 0.14);
+  --start-dt-faint: oklch(0.55 0.015 265);
+  --start-dt-well: oklch(0 0 0 / 0.28);
+  --start-dt-solid: oklch(0.7 0.14 245);
+  --start-dt-solid-soft: oklch(0.7 0.14 245 / 0.15);
+  --start-dt-red: oklch(0.68 0.2 25);
+  --start-dt-red-soft: oklch(0.68 0.2 25 / 0.16);
+  --start-dt-amber: oklch(0.8 0.15 80);
+  --start-dt-amber-soft: oklch(0.8 0.15 80 / 0.16);
+  --start-dt-green: oklch(0.78 0.15 155);
+  --start-dt-green-soft: oklch(0.78 0.15 155 / 0.15);
+  --start-dt-violet: oklch(0.72 0.15 300);
+  --start-dt-violet-soft: oklch(0.72 0.15 300 / 0.17);
+  --start-dt-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
+
   position: fixed;
   left: 0;
   right: 0;
@@ -241,26 +260,110 @@
 [data-solid-dev-toolbar-header] {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
 
-  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  height: 42px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0 6px 0 12px;
 
-  background: var(--start-dt-surface);
-  border-bottom: var(--start-dt-border-soft) 1px solid;
+  font-size: 13px;
+  background: var(--start-dt-bg);
+  border-bottom: 1px solid var(--start-dt-line);
 
   white-space: nowrap;
   overflow: hidden;
 }
 
+[data-solid-dev-toolbar-header] > svg {
+  width: 18px;
+  height: 18px;
+}
+
+[data-solid-dev-toolbar-header] [data-solid-icon-button] {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  border-radius: 7px;
+}
+
+[data-solid-dev-toolbar-header] [data-solid-icon-button] svg {
+  width: 16px;
+  height: 16px;
+}
+
+[data-solid-dev-toolbar-search] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  width: 250px;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+
+  font: inherit;
+  font-size: 13px;
+  color: var(--start-dt-faint);
+  cursor: pointer;
+
+  background: var(--start-dt-well);
+  border: 1px solid var(--start-dt-line);
+  border-radius: 7px;
+}
+
+[data-solid-dev-toolbar-search]:hover {
+  border-color: var(--start-dt-line-2);
+}
+
+[data-solid-dev-toolbar-search]:focus-visible {
+  outline: 2px solid var(--start-dt-accent);
+  outline-offset: -2px;
+}
+
+[data-solid-dev-toolbar-search] svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
+
+[data-solid-dev-toolbar-search] span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+
+[data-solid-dev-toolbar-search] kbd {
+  padding: 0 4px;
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 4px;
+  color: var(--start-dt-faint);
+  font: 10px var(--start-dt-mono);
+}
+
 [data-solid-dev-toolbar-route] {
   min-width: 0;
   max-width: 16rem;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 0 2px;
 
-  color: var(--start-dt-text-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.75rem;
+  color: var(--start-dt-text);
+  font: 12px var(--start-dt-mono);
+}
+
+/* the hairline between the version and the route */
+[data-solid-dev-toolbar-header] [data-solid-dev-toolbar-version] + [data-solid-dev-toolbar-route] {
+  margin-left: 3px;
+  padding-left: 11px;
+  border-left: 1px solid var(--start-dt-line-2);
 }
 
 [data-solid-icon-button][data-active] {
@@ -274,29 +377,28 @@
 
 /* the views and the tabs of the current view: segmented controls in the header */
 
-[data-solid-dev-toolbar-views],
-[data-solid-dev-toolbar-tabs] {
+[data-solid-dev-toolbar-views] {
   display: flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: 2px;
 
-  padding: 0.1875rem;
+  margin-left: 6px;
+  padding: 3px;
 
-  border-radius: 0.5625rem;
-  background: oklch(0 0 0 / 0.28);
+  border-radius: 9px;
+  background: var(--start-dt-well);
 }
 
-[data-solid-dev-toolbar-view],
-[data-solid-dev-toolbar-tab] {
+[data-solid-dev-toolbar-view] {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 6px;
 
-  height: 1.625rem;
-  padding: 0 0.6875rem;
+  height: 26px;
+  padding: 0 11px;
 
   font: inherit;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   color: var(--start-dt-text-muted);
@@ -304,60 +406,47 @@
 
   background: none;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: 6px;
 
   transition-property: color, background-color, box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-[data-solid-dev-toolbar-tab] {
-  font-size: 0.75rem;
-  padding: 0 0.5625rem;
-}
-
-[data-solid-dev-toolbar-view]:hover,
-[data-solid-dev-toolbar-tab]:hover {
+[data-solid-dev-toolbar-view]:hover {
   color: var(--start-dt-text);
 }
 
-[data-solid-dev-toolbar-view]:focus-visible,
-[data-solid-dev-toolbar-tab]:focus-visible {
+[data-solid-dev-toolbar-view]:focus-visible {
   outline: 2px solid var(--start-dt-accent);
   outline-offset: -2px;
 }
 
-[data-solid-dev-toolbar-view][aria-selected='true'],
-[data-solid-dev-toolbar-tab][aria-selected='true'] {
+[data-solid-dev-toolbar-view][aria-selected='true'] {
   color: var(--start-dt-text);
-  background: var(--start-dt-surface-active);
+  background: var(--start-dt-raise-2);
   box-shadow:
     0 1px 2px oklch(0 0 0 / 0.4),
     inset 0 1px 0 oklch(1 0 0 / 0.06);
 }
 
 [data-solid-dev-toolbar-tab-badge] {
-  min-width: 1.125rem;
-  padding: 0 0.3125rem;
+  padding: 0 5px;
 
   border-radius: 9999px;
-  background: var(--start-dt-surface-hover);
-  color: var(--start-dt-text-muted);
+  color: var(--start-dt-faint);
 
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6875rem;
-  line-height: 1.125rem;
-  text-align: center;
+  font: 600 10.5px/16px var(--start-dt-mono);
 }
 
 [data-solid-dev-toolbar-tab-badge='failure'] {
-  background: oklch(0.63 0.21 25 / 0.2);
-  color: oklch(0.78 0.14 25);
+  background: var(--start-dt-red-soft);
+  color: var(--start-dt-red);
 }
 
 [data-solid-dev-toolbar-tab-badge='warning'] {
-  background: oklch(0.8 0.15 80 / 0.18);
-  color: oklch(0.85 0.12 80);
+  background: var(--start-dt-amber-soft);
+  color: var(--start-dt-amber);
 }
 
 [data-solid-dev-toolbar-body] {
diff --git a/src/dev-toolbar/index.tsx b/src/dev-toolbar/index.tsx
index ff6273d..59e3bc8 100644
--- a/src/dev-toolbar/index.tsx
+++ b/src/dev-toolbar/index.tsx
@@ -15,7 +15,7 @@ import {
 } from 'solid-js';
 import version from '../version.js';
 import IconButton from '../ui/IconButton.js';
-import { type ServerFunctionInstance, ServerFunctionViewer } from './functions/index.js';
+import type { ServerFunctionInstance } from './functions/index.js';
 import { captureServerFunctionCall } from './functions/tracker.js';
 import { HighlightUpdatesIcon, InspectIcon, MinimizeIcon, SolidIcon } from './icons.js';
 import { AsyncHistory, startAsyncCapture, type AsyncRecord } from './async/tracker.js';
@@ -27,47 +27,48 @@ import { isExtensionError } from './extension-errors.js';
 import { addError } from './error-list.js';
 import { CopyReportButton } from './report/CopyReportButton.js';
 import { pageRoute } from './report/markdown.js';
+import { createErrorRecord, type ErrorRecord } from './error-record.js';
 import { excludeOwner, includeOwner } from './ownership/registry.js';
 import { excludeReactiveOwner, includeReactiveOwner } from './reactivity/registry.js';
 import { startTimeline, TimelineBuilder, type TimelineEntry } from './timeline/tracker.js';
+import type { PaletteTarget } from './palette/search.js';
+import { SignalHistory } from './structure/signal-history.js';
 import './index.css';
 
 const HealthViewer = clientOnly(() => import('./health/index.js'), { lazy: true });
-const ReactivityViewer = clientOnly(() => import('./reactivity/index.js'), { lazy: true });
-const OwnershipViewer = clientOnly(() => import('./ownership/index.js'), { lazy: true });
-const TimelineViewer = clientOnly(() => import('./timeline/index.js'), { lazy: true });
-const AsyncViewer = clientOnly(() => import('./async/index.js'), { lazy: true });
-
-/** A panel of the dock. Each belongs to one view. */
-type Tab = 'health' | 'tl' | 'async' | 'fn' | 'own' | 'rx';
-type View = 'health' | 'activity' | 'structure';
-
-const VIEWS: { value: View; label: string; tabs: Tab[] }[] = [
-  { value: 'health', label: 'Health', tabs: ['health'] },
-  { value: 'activity', label: 'Activity', tabs: ['tl', 'async', 'fn'] },
-  { value: 'structure', label: 'Structure', tabs: ['own', 'rx'] },
+const ActivityViewer = clientOnly(() => import('./activity/index.js'), { lazy: true });
+const StructureViewer = clientOnly(() => import('./structure/index.js'), { lazy: true });
+const CommandPalette = clientOnly(() => import('./palette/index.js'), { lazy: true });
+
+/** A view of the dock. */
+type Tab = 'health' | 'activity' | 'structure';
+type StructureMode = 'owners' | 'graph';
+
+const VIEWS: { value: Tab; label: string }[] = [
+  { value: 'health', label: 'Health' },
+  { value: 'activity', label: 'Activity' },
+  { value: 'structure', label: 'Structure' },
 ];
 
-const TAB_LABELS: Record<Tab, string> = {
-  health: 'Health',
-  tl: 'Timeline',
-  async: 'Async',
-  fn: 'Server functions',
-  own: 'Ownership',
-  rx: 'Reactivity',
+/** The panels of older versions, and the view each now lives in. */
+const OLD_TABS: Record<string, Tab> = {
+  err: 'health',
+  issues: 'health',
+  tl: 'activity',
+  async: 'activity',
+  fn: 'activity',
+  own: 'structure',
+  rx: 'structure',
 };
 
-function viewOf(tab: Tab): (typeof VIEWS)[number] {
+/** Reads a saved tab, mapping the panels of older versions to their view. */
+function savedTab(value: unknown): Tab | undefined {
+  if (typeof value !== 'string') return undefined;
+  if (value in OLD_TABS) return OLD_TABS[value];
   for (const view of VIEWS) {
-    if (view.tabs.includes(tab)) return view;
+    if (view.value === value) return view.value;
   }
-  return VIEWS[0]!;
-}
-
-/** Reads a saved tab, mapping the Errors and Issues panels of older versions to Health. */
-function savedTab(value: unknown): Tab | undefined {
-  if (value === 'err' || value === 'issues') return 'health';
-  return typeof value === 'string' && value in TAB_LABELS ? (value as Tab) : undefined;
+  return undefined;
 }
 
 /** The solid-js version the app runs, read from its package once the toolbar loads. */
@@ -94,8 +95,7 @@ const DRAG_THRESHOLD = 4;
 interface DockState {
   open: boolean;
   tab: Tab;
-  /** The last tab of each view, so switching views comes back to it. */
-  viewTabs?: Partial<Record<View, Tab>>;
+  structureMode?: StructureMode;
   height: number;
   highlightUpdates?: boolean;
 }
@@ -176,8 +176,9 @@ export function DevToolbar(props: DevToolbarProps) {
   if (owner) OBSERVE?.exclude(owner);
 
   const [open, setOpen] = createSignal(false);
-  const [tab, setTab] = createSignal<Tab>('fn');
-  const [viewTabs, setViewTabs] = createSignal<Partial<Record<View, Tab>>>({});
+  const [tab, setTab] = createSignal<Tab>('activity');
+  const [structureMode, setStructureMode] = createSignal<StructureMode>('owners');
+  const [paletteOpen, setPaletteOpen] = createSignal(false);
   const [solidVersion, setSolidVersion] = createSignal<string>();
   const [height, setHeight] = createSignal(DEFAULT_HEIGHT);
   const [highlightUpdates, setHighlightUpdates] = createSignal(false);
@@ -194,7 +195,7 @@ export function DevToolbar(props: DevToolbarProps) {
     setSelectedComponent(comp);
     // The pick opens in the ownership tree, which selects and shows it.
     setOwnershipFocus({ owner: comp.owner });
-    show('own');
+    showOwner(comp.owner);
   }
 
   function clearComponentFunnel() {
@@ -215,7 +216,7 @@ export function DevToolbar(props: DevToolbarProps) {
     writeDockState({
       open: open(),
       tab: tab(),
-      viewTabs: viewTabs(),
+      structureMode: structureMode(),
       height: height(),
       highlightUpdates: highlightUpdates(),
       ...next,
@@ -223,17 +224,27 @@ export function DevToolbar(props: DevToolbarProps) {
   }
 
   function show(value: Tab) {
-    const nextViewTabs = { ...viewTabs(), [viewOf(value).value]: value };
     setTab(value);
-    setViewTabs(nextViewTabs);
     setOpen(true);
-    persist({ open: true, tab: value, viewTabs: nextViewTabs });
+    persist({ open: true, tab: value });
   }
 
-  // A view opens on the tab it showed last.
-  function showView(view: View) {
-    const entry = VIEWS.find((item) => item.value === view)!;
-    show(viewTabs()[view] ?? entry.tabs[0]!);
+  function changeStructureMode(mode: StructureMode) {
+    setStructureMode(mode);
+    persist({ structureMode: mode });
+  }
+
+  // Other views link into Structure: an owner opens the tree, a node the graph.
+  function showOwner(owner: object) {
+    setOwnershipFocus({ owner });
+    changeStructureMode('owners');
+    show('structure');
+  }
+
+  function showInGraph(node: object) {
+    setGraphFocus({ node });
+    changeStructureMode('graph');
+    show('structure');
   }
 
   function close() {
@@ -252,9 +263,7 @@ export function DevToolbar(props: DevToolbarProps) {
   function openAndFocus() {
     show(tab());
     flush();
-    dock
-      ?.querySelector<HTMLElement>(`[data-solid-dev-toolbar-view="${viewOf(tab()).value}"]`)
-      ?.focus();
+    dock?.querySelector<HTMLElement>(`[data-solid-dev-toolbar-view="${tab()}"]`)?.focus();
   }
 
   // A panel is live only while the dock is open on its tab, so the graph and
@@ -265,13 +274,8 @@ export function DevToolbar(props: DevToolbarProps) {
     const saved = readDockState();
     const restored = savedTab(saved.tab);
     if (restored) setTab(restored);
-    if (saved.viewTabs && typeof saved.viewTabs === 'object') {
-      const next: Partial<Record<View, Tab>> = {};
-      for (const view of VIEWS) {
-        const value = savedTab(saved.viewTabs[view.value]);
-        if (value && view.tabs.includes(value)) next[view.value] = value;
-      }
-      setViewTabs(next);
+    if (saved.structureMode === 'owners' || saved.structureMode === 'graph') {
+      setStructureMode(saved.structureMode);
     }
     void loadSolidVersion().then((value) => setSolidVersion(value));
     if (typeof saved.height === 'number') setHeight(clampHeight(saved.height));
@@ -350,6 +354,13 @@ export function DevToolbar(props: DevToolbarProps) {
 
   onSettled(() => {
     const onKeyDown = (event: KeyboardEvent) => {
+      // ⌘K or Ctrl+K opens the palette, only while the dock is open so the
+      // app keeps the shortcut otherwise.
+      if ((event.metaKey || event.ctrlKey) && event.code === 'KeyK' && open()) {
+        event.preventDefault();
+        setPaletteOpen((current) => !current);
+        return;
+      }
       // `code`, because Alt changes the character `key` reports on macOS.
       if (!event.altKey || !event.shiftKey) return;
       if (event.repeat || isEditable(event.composedPath()[0] ?? null)) return;
@@ -384,36 +395,37 @@ export function DevToolbar(props: DevToolbarProps) {
   }
 
   function onViewKeyDown(event: KeyboardEvent) {
-    const index = VIEWS.findIndex((entry) => entry === viewOf(tab()));
+    const index = VIEWS.findIndex((entry) => entry.value === tab());
     const target = nextIndex(event, index, VIEWS.length);
     if (target === undefined) return;
     event.preventDefault();
     const next = VIEWS[target]!;
-    showView(next.value);
+    show(next.value);
     const list = event.currentTarget as HTMLElement;
     list.querySelector<HTMLElement>(`[data-solid-dev-toolbar-view="${next.value}"]`)?.focus();
   }
 
-  function onTabKeyDown(event: KeyboardEvent) {
-    const tabs = viewOf(tab()).tabs;
-    const target = nextIndex(event, tabs.indexOf(tab()), tabs.length);
-    if (target === undefined) return;
-    event.preventDefault();
-    const next = tabs[target]!;
-    show(next);
-    const list = event.currentTarget as HTMLElement;
-    list.querySelector<HTMLElement>(`[data-solid-dev-toolbar-tab="${next}"]`)?.focus();
-  }
-
   // A panel can ask the graph to show a node. Each request is a new object, so
   // asking for the same node twice still moves the view.
   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 }>();
+  // Health, Structure and the palette can ask Activity to show an action, a call or an owner.
+  const [activityFocus, setActivityFocus] = createSignal<{
+    origin?: object;
+    instance?: string;
+    ownerName?: string;
+  }>();
+
+  function showInActivity(focus: { origin?: object; instance?: string; ownerName?: string }) {
+    setActivityFocus(focus);
+    show('activity');
+  }
+
+  // The structure view shows the last change of a signal it lists.
+  const signalHistory = new SignalHistory();
 
-  const [errors, setErrors] = createSignal<unknown[]>([]);
+  const [errors, setErrors] = createSignal<ErrorRecord[]>([]);
 
   function resetError() {
     setErrors([]);
@@ -421,7 +433,8 @@ export function DevToolbar(props: DevToolbarProps) {
 
   function pushError(error: unknown) {
     console.error(error);
-    setErrors((current) => addError(current, error));
+    const record = createErrorRecord(error);
+    setErrors((current) => addError(current, record));
 
     show('health');
   }
@@ -491,8 +504,6 @@ export function DevToolbar(props: DevToolbarProps) {
     }),
   );
 
-  const callCount = createMemo(() => Object.keys(instances()).length);
-
   async function copySession(): Promise<string> {
     // Loaded on use: mapping stacks needs the source-map reader the error panel loads lazily.
     const [{ resolveErrorFrames }, { SESSION_ERRORS, sessionReport }] = await Promise.all([
@@ -501,7 +512,7 @@ export function DevToolbar(props: DevToolbarProps) {
     ]);
     const recent = errors().slice(0, SESSION_ERRORS);
     const resolved = await Promise.all(
-      recent.map(async (error) => ({ error, frames: await resolveErrorFrames(error) })),
+      recent.map(async ({ error }) => ({ error, frames: await resolveErrorFrames(error) })),
     );
     return sessionReport({
       errors: resolved,
@@ -523,7 +534,22 @@ export function DevToolbar(props: DevToolbarProps) {
     return ['Open Start Devtools', ...counts].join(', ');
   }
 
-  const badge = (value: Tab): number => (value === 'fn' ? callCount() : 0);
+  // An action's label, for an error that was thrown during it.
+  function describeOrigin(origin: object): string | undefined {
+    for (const entry of timelineEntries()) {
+      if (entry.origin === origin) return entry.label;
+    }
+    return undefined;
+  }
+
+  function pickFromPalette(target: PaletteTarget) {
+    if (target.kind === 'component') showOwner(target.owner);
+    else if (target.kind === 'memo' || target.kind === 'signal') showInGraph(target.node);
+    else if (target.kind === 'action') {
+      if (target.origin) showInActivity({ origin: target.origin });
+      else show('activity');
+    } else if (target.kind === 'call') showInActivity({ instance: target.instance });
+  }
 
   return (
     <>
@@ -588,7 +614,7 @@ export function DevToolbar(props: DevToolbarProps) {
               >
                 <For each={VIEWS}>
                   {(entry) => {
-                    const selected = () => viewOf(tab()).value === entry.value;
+                    const selected = () => tab() === entry.value;
                     return (
                       <button
                         type="button"
@@ -599,7 +625,7 @@ export function DevToolbar(props: DevToolbarProps) {
                         aria-controls="solid-dev-toolbar-body"
                         tabindex={selected() ? 0 : -1}
                         data-solid-dev-toolbar-view={entry.value}
-                        onClick={() => showView(entry.value)}
+                        onClick={() => show(entry.value)}
                       >
                         {entry.label}
                         <Show when={entry.value === 'health' && errors().length}>
@@ -617,47 +643,20 @@ export function DevToolbar(props: DevToolbarProps) {
                   }}
                 </For>
               </div>
-              <Show when={viewOf(tab()).tabs.length > 1}>
-                <div
-                  data-solid-dev-toolbar-tabs
-                  role="tablist"
-                  aria-label={`${viewOf(tab()).label} panels`}
-                  onKeyDown={onTabKeyDown}
-                >
-                  <For each={viewOf(tab()).tabs}>
-                    {(value) => (
-                      <button
-                        type="button"
-                        role="tab"
-                        aria-label={TAB_LABELS[value]}
-                        // The label names the tab, so the count is read as its description.
-                        aria-describedby={
-                          badge(value) ? `solid-dev-toolbar-tab-${value}-count` : undefined
-                        }
-                        id={`solid-dev-toolbar-tab-${value}`}
-                        aria-controls="solid-dev-toolbar-body"
-                        aria-selected={tab() === value ? 'true' : 'false'}
-                        tabindex={tab() === value ? 0 : -1}
-                        data-solid-dev-toolbar-tab={value}
-                        onClick={() => show(value)}
-                      >
-                        {TAB_LABELS[value]}
-                        <Show when={badge(value)}>
-                          {(count) => (
-                            <span
-                              id={`solid-dev-toolbar-tab-${value}-count`}
-                              data-solid-dev-toolbar-tab-badge
-                            >
-                              {count()}
-                            </span>
-                          )}
-                        </Show>
-                      </button>
-                    )}
-                  </For>
-                </div>
-              </Show>
               <div data-solid-dev-toolbar-spacer />
+              <button
+                type="button"
+                data-solid-dev-toolbar-search
+                aria-haspopup="dialog"
+                onClick={() => setPaletteOpen(true)}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="11" cy="11" r="6" />
+                  <path d="m20 20-4.5-4.5" />
+                </svg>
+                <span>Find signal, component, call</span>
+                <kbd>⌘K</kbd>
+              </button>
               <IconButton
                 onClick={toggleInspect}
                 data-active={inspecting() ? '' : undefined}
@@ -690,11 +689,7 @@ export function DevToolbar(props: DevToolbarProps) {
               data-solid-dev-toolbar-body
               id="solid-dev-toolbar-body"
               role="tabpanel"
-              aria-labelledby={
-                viewOf(tab()).tabs.length > 1
-                  ? `solid-dev-toolbar-tab-${tab()}`
-                  : `solid-dev-toolbar-view-${viewOf(tab()).value}`
-              }
+              aria-labelledby={`solid-dev-toolbar-view-${tab()}`}
             >
               <HealthViewer
                 show={visible('health')}
@@ -702,81 +697,67 @@ export function DevToolbar(props: DevToolbarProps) {
                 resetError={resetError}
                 issues={issues()}
                 onClearIssues={() => setIssues([])}
-                onViewOwner={(owner) => {
-                  setOwnershipFocus({ owner });
-                  show('own');
-                }}
-                onViewInGraph={(node) => {
-                  setGraphFocus({ node });
-                  show('rx');
-                }}
+                onViewOwner={showOwner}
+                onViewInGraph={showInGraph}
+                describeOrigin={describeOrigin}
+                onShowInActivity={(origin: object) => showInActivity({ origin })}
               />
-              <TimelineViewer
-                show={visible('tl')}
+              <ActivityViewer
+                show={visible('activity')}
                 entries={timelineEntries()}
-                onClear={() => {
-                  timeline.clear();
-                  setTimelineEntries([]);
-                }}
-                onViewCall={(instance) => {
-                  setFunctionsFocus({ instance });
-                  show('fn');
-                }}
-                onViewInGraph={(node) => {
-                  setGraphFocus({ node });
-                  show('rx');
-                }}
-              />
-              <AsyncViewer
-                show={visible('async')}
                 history={asyncHistory}
                 records={asyncRecords()}
+                instances={instances()}
+                errors={errors()}
+                focus={activityFocus()}
                 onClear={() => {
+                  timeline.clear();
+                  setTimelineEntries([]);
                   asyncHistory.clear();
                   setAsyncRecords([]);
                 }}
-                onViewInGraph={(node) => {
-                  setGraphFocus({ node });
-                  show('rx');
-                }}
-                onViewOwner={(owner) => {
-                  setOwnershipFocus({ owner });
-                  show('own');
+                onDeleteInstance={(value: string) => {
+                  setInstances((current) => {
+                    const next = { ...current };
+                    delete next[value];
+                    return next;
+                  });
                 }}
+                onViewInGraph={showInGraph}
+                onViewOwner={showOwner}
+                onShowInStructure={showInGraph}
+                onShowError={() => show('health')}
               />
-              <ReactivityViewer
-                show={visible('rx')}
+              <StructureViewer
+                show={visible('structure')}
+                mode={structureMode()}
+                onModeChange={changeStructureMode}
                 focus={graphFocus()}
+                ownerFocus={ownershipFocus()}
                 ownerFilter={selectedComponent()?.owner}
                 componentFilter={selectedComponent()?.name}
                 onClearComponentFilter={clearComponentFunnel}
-                onViewOwner={(owner) => {
-                  setOwnershipFocus({ owner });
-                  show('own');
-                }}
+                onViewOwner={showOwner}
+                onViewInGraph={showInGraph}
+                lastChange={(_id: string | number, node?: object) =>
+                  node ? signalHistory.lastChange(node) : undefined
+                }
+                onShowActivity={(_owner: object, name: string) =>
+                  showInActivity({ ownerName: name })
+                }
               />
-              <OwnershipViewer
-                show={visible('own')}
-                focus={ownershipFocus()}
-                onViewInGraph={(node) => {
-                  setGraphFocus({ node });
-                  show('rx');
-                }}
-              />
-              <ServerFunctionViewer
-                show={visible('fn')}
-                focus={functionsFocus()}
+            </div>
+          </div>
+          <Show when={paletteOpen()}>
+            <div data-solid-dev-toolbar-palette-layer>
+              <CommandPalette
+                entries={timelineEntries()}
                 instances={instances()}
-                onDeleteInstance={(value) => {
-                  setInstances((current) => {
-                    const next = { ...current };
-                    delete next[value];
-                    return next;
-                  });
-                }}
+                onPick={pickFromPalette}
+                onClose={() => setPaletteOpen(false)}
               />
             </div>
-          </div>
+          </Show>
         </div>
         <HighlightUpdatesOverlay active={highlightUpdates()} />
         <InspectorOverlay
diff --git a/src/dev-toolbar/issues/index.tsx b/src/dev-toolbar/issues/index.tsx
index 030d33c..41a687a 100644
--- a/src/dev-toolbar/issues/index.tsx
+++ b/src/dev-toolbar/issues/index.tsx
@@ -1,7 +1,7 @@
 import type { JSX } from '@solidjs/web';
-import { DEV, Show } from 'solid-js';
-import { Badge } from '../../ui/Badge.js';
-import { Text } from '../../ui/Text.js';
+import { DEV, For, Show } from 'solid-js';
+import { HealthButton } from '../health/HealthButton.js';
+import { Glyph, type Tone } from '../health/HealthRow.js';
 import { EyeIcon, TreeIcon } from '../icons.js';
 import { CopyReportButton } from '../report/CopyReportButton.js';
 import { pageRoute } from '../report/markdown.js';
@@ -11,15 +11,10 @@ import './styles.css';
 
 export type Severity = IssueEvent['severity'];
 
-export const SEVERITIES: { value: Severity; label: string }[] = [
-  { value: 'error', label: 'Errors' },
-  { value: 'warn', label: 'Warnings' },
-  { value: 'info', label: 'Info' },
-];
-
-export const BADGES: Record<Severity, 'failure' | 'warning' | 'info'> = {
-  error: 'failure',
-  warn: 'warning',
+/** The tone an issue is drawn in: its severity. */
+export const TONES: Record<Severity, Tone> = {
+  error: 'error',
+  warn: 'warn',
   info: 'info',
 };
 
@@ -72,39 +67,6 @@ export function matchesIssue(entry: IssueEntry, search: string): boolean {
   return false;
 }
 
-export interface IssueRowProps {
-  entry: IssueEntry;
-  selected: boolean;
-  onSelect: () => void;
-}
-
-export function IssueRow(props: IssueRowProps): JSX.Element {
-  return (
-    <button
-      type="button"
-      data-solid-issues-row
-      data-severity={props.entry.event.severity}
-      data-selected={props.selected ? '' : undefined}
-      onClick={props.onSelect}
-    >
-      <span data-solid-issues-row-head>
-        <Badge type={BADGES[props.entry.event.severity]}>{props.entry.event.code}</Badge>
-        <Show when={props.entry.count > 1}>
-          <span data-solid-issues-row-count>{`×${props.entry.count}`}</span>
-        </Show>
-        <Show when={props.entry.event.ownerPath?.length}>
-          <Text data-solid-issues-row-owner options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
-            {props.entry.event.ownerPath!.join(' › ')}
-          </Text>
-        </Show>
-      </span>
-      <Text data-solid-issues-row-message options={{ size: 'xs' }}>
-        {issueText(props.entry.event)}
-      </Text>
-    </button>
-  );
-}
-
 export interface IssueDetailProps {
   entry: IssueEntry;
   /** Opens the owner of a finding in the ownership tree. */
@@ -113,111 +75,96 @@ export interface IssueDetailProps {
   onViewInGraph?: (node: object) => void;
 }
 
+/** The rows of the key and value list: label, then a mono value. */
+function issueFacts(entry: IssueEntry): { key: string; value: string }[] {
+  const facts = [{ key: 'Kind', value: entry.event.kind }];
+  if (entry.event.ownerPath?.length) {
+    facts.push({ key: 'Owner', value: entry.event.ownerPath.join(' › ') });
+  }
+  if (entry.event.nodeName) facts.push({ key: 'Node', value: entry.event.nodeName });
+  facts.push({
+    key: 'Seen',
+    value:
+      entry.count > 1
+        ? `${entry.count} times, ${time(entry.firstAt)} to ${time(entry.lastAt)}`
+        : `once, ${time(entry.lastAt)}`,
+  });
+  return facts;
+}
+
+/** An issue in the header pattern of a thrown error, then its facts and actions. */
 export function IssueDetail(props: IssueDetailProps): JSX.Element {
   const subject = () => props.entry.subject?.deref();
   const guide = () => guideUrl(props.entry.event.code);
   return (
     <div data-solid-issues-detail>
-      <div data-solid-issues-detail-head>
-        <Badge type={BADGES[props.entry.event.severity]}>{props.entry.event.severity}</Badge>
-        <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
+      <div data-solid-issues-head>
+        <div data-solid-issues-top>
+          <Glyph tone={TONES[props.entry.event.severity]} />
+          <span
+            data-solid-issues-severity={props.entry.event.severity}
+            data-solid-issues-severity-label
+          >
+            {props.entry.event.severity}
+          </span>
+          <span data-solid-issues-spacer />
+          <CopyReportButton
+            label="this issue"
+            text="Copy report"
+            report={() =>
+              issueReport({ entry: props.entry, guideUrl: guide(), route: pageRoute() })
+            }
+          />
+        </div>
+        <div data-solid-issues-code data-solid-issues-severity={props.entry.event.severity}>
           {props.entry.event.code}
-        </Text>
-        <CopyReportButton
-          label="this issue"
-          report={() => issueReport({ entry: props.entry, guideUrl: guide(), route: pageRoute() })}
-        />
+        </div>
+        <div data-solid-issues-detail-message>{issueText(props.entry.event)}</div>
       </div>
 
-      <Text data-solid-issues-detail-message options={{ size: 'xs' }}>
-        {issueText(props.entry.event)}
-      </Text>
-
-      <div data-solid-kv-table>
-        <div data-solid-kv-row>
-          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-            Kind
-          </Text>
-          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-            {props.entry.event.kind}
-          </Text>
-        </div>
-        <Show when={props.entry.event.ownerPath?.length}>
-          <div data-solid-kv-row>
-            <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-              Owner
-            </Text>
-            <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-              {props.entry.event.ownerPath!.join(' › ')}
-            </Text>
-          </div>
-        </Show>
-        <Show when={props.entry.event.nodeName}>
-          {(name) => (
-            <div data-solid-kv-row>
-              <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-                Node
-              </Text>
-              <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-                {name()}
-              </Text>
-            </div>
-          )}
-        </Show>
-        <div data-solid-kv-row>
-          <Text data-solid-kv-key options={{ size: 'xs', font: 'mono' }}>
-            Seen
-          </Text>
-          <Text data-solid-kv-value options={{ size: 'xs', font: 'mono' }}>
-            {props.entry.count > 1
-              ? `${props.entry.count} times, ${time(props.entry.firstAt)} to ${time(props.entry.lastAt)}`
-              : `once, ${time(props.entry.lastAt)}`}
-          </Text>
+      <div data-solid-issues-body>
+        <dl data-solid-issues-facts>
+          <For each={issueFacts(props.entry)}>
+            {(fact) => (
+              <>
+                <dt>{fact.key}</dt>
+                <dd>{fact.value}</dd>
+              </>
+            )}
+          </For>
+        </dl>
+
+        <div data-solid-issues-actions>
+          <Show when={props.onViewOwner && subject()}>
+            {(current) => (
+              <HealthButton onClick={() => props.onViewOwner?.(ownerOf(current()))}>
+                <TreeIcon title="" aria-hidden="true" />
+                Show in the ownership tree
+              </HealthButton>
+            )}
+          </Show>
+          <Show when={props.onViewInGraph && subject() && isInGraph(subject()!) && subject()}>
+            {(current) => (
+              <HealthButton onClick={() => props.onViewInGraph?.(current())}>
+                <EyeIcon title="" aria-hidden="true" />
+                Show in the reactivity graph
+              </HealthButton>
+            )}
+          </Show>
+          <Show when={guide()}>
+            {(url) => (
+              <a data-solid-health-btn href={url()} target="_blank" rel="noreferrer">
+                Open the repair guide
+              </a>
+            )}
+          </Show>
         </div>
-      </div>
 
-      <div data-solid-issues-actions>
-        <Show when={props.onViewOwner && subject()}>
-          {(current) => (
-            <button
-              type="button"
-              data-solid-issues-action
-              onClick={() => props.onViewOwner?.(ownerOf(current()))}
-            >
-              <TreeIcon title="" aria-hidden="true" />
-              <Text options={{ size: 'xs', weight: 'semibold' }}>Show in the ownership tree</Text>
-            </button>
-          )}
-        </Show>
-        <Show when={props.onViewInGraph && subject() && isInGraph(subject()!) && subject()}>
-          {(current) => (
-            <button
-              type="button"
-              data-solid-issues-action
-              onClick={() => props.onViewInGraph?.(current())}
-            >
-              <EyeIcon title="" aria-hidden="true" />
-              <Text options={{ size: 'xs', weight: 'semibold' }}>Show in the reactivity graph</Text>
-            </button>
-          )}
-        </Show>
-        <Show when={guide()}>
-          {(url) => (
-            <a data-solid-issues-action href={url()} target="_blank" rel="noreferrer">
-              <Text options={{ size: 'xs', weight: 'semibold' }}>Open the repair guide</Text>
-            </a>
-          )}
+        <Show when={props.entry.event.data && Object.keys(props.entry.event.data!).length}>
+          <div data-solid-issues-section>Data</div>
+          <pre data-solid-issues-data>{dataText(props.entry.event.data!)}</pre>
         </Show>
       </div>
-
-      <Show when={props.entry.event.data && Object.keys(props.entry.event.data!).length}>
-        <div data-solid-issues-data>
-          <Text options={{ size: 'xs', weight: 'semibold' }}>Data</Text>
-          <pre>
-            <Text options={{ size: 'xs', font: 'mono' }}>{dataText(props.entry.event.data!)}</Text>
-          </pre>
-        </div>
-      </Show>
     </div>
   );
 }
diff --git a/src/dev-toolbar/issues/styles.css b/src/dev-toolbar/issues/styles.css
index 8688b0a..33a9d74 100644
--- a/src/dev-toolbar/issues/styles.css
+++ b/src/dev-toolbar/issues/styles.css
@@ -1,298 +1,120 @@
-[data-solid-issues-viewer] {
-  color: var(--start-dt-text);
-
+[data-solid-issues-detail] {
   display: flex;
+  flex: 1;
   flex-direction: column;
-
-  height: 100%;
   min-height: 0;
+  min-width: 0;
+  overflow: auto;
 }
 
-[data-solid-issues-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-issues-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-issues-search]:focus {
-  outline: none;
-  border-color: var(--start-dt-accent);
-}
-
-[data-solid-issues-filters] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 0.25rem;
+/* the same header block as a thrown error */
+[data-solid-issues-head] {
+  flex: none;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--start-dt-line);
 }
 
-[data-solid-issues-filter] {
+[data-solid-issues-top] {
   display: flex;
   align-items: center;
-
-  gap: 0.25rem;
-
-  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);
-
-  cursor: pointer;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
-[data-solid-issues-filter]::before {
-  content: '';
-
-  width: 0.5rem;
-  height: 0.5rem;
-
-  border-radius: 9999px;
-  background: var(--start-dt-danger);
-}
-
-[data-solid-issues-filter='warn']::before {
-  background: oklch(0.8 0.15 80);
-}
-
-[data-solid-issues-filter='info']::before {
-  background: oklch(0.68 0.13 245);
-}
-
-[data-solid-issues-filter]:hover {
-  background: var(--start-dt-surface-hover);
+[data-solid-issues-spacer] {
+  flex: 1;
 }
 
-[data-solid-issues-filter][data-off] {
-  color: var(--start-dt-text-muted);
-  opacity: 0.55;
+[data-solid-issues-severity-label] {
+  font: 11.5px var(--start-dt-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
 }
 
-[data-solid-issues-nav-actions] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 0.375rem;
-
-  margin-left: auto;
+[data-solid-issues-severity='error'] {
+  color: var(--start-dt-red);
 }
 
-[data-solid-issues-count] {
-  color: var(--start-dt-text-muted);
-  white-space: nowrap;
+[data-solid-issues-severity='warn'] {
+  color: var(--start-dt-amber);
 }
 
-[data-solid-issues-body] {
-  display: flex;
-  flex-direction: row;
-
-  flex: 1;
-  min-height: 0;
+[data-solid-issues-severity='info'] {
+  color: var(--start-dt-solid);
 }
 
-[data-solid-issues-list] {
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  min-width: 0;
-
-  overflow: auto;
+[data-solid-issues-code] {
+  font: 600 13px var(--start-dt-mono);
 }
 
-[data-solid-issues-row] {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  gap: 0.25rem;
-
-  padding: 0.5rem 0.75rem;
+[data-solid-issues-detail-message] {
+  margin-top: 1px;
 
-  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-issues-row]:hover {
-  background: var(--start-dt-surface-hover);
-}
-
-[data-solid-issues-row][data-selected] {
-  background: var(--start-dt-surface-active);
+  font: 15px var(--start-dt-mono);
+  word-break: break-word;
 }
 
-[data-solid-issues-row]:focus-visible {
-  outline: 2px solid var(--start-dt-accent);
-  outline-offset: -2px;
+[data-solid-issues-body] {
+  padding: 14px 16px;
 }
 
-[data-solid-issues-row-head] {
-  display: flex;
-  flex-direction: row;
+/* the prototype's `.kv` */
+[data-solid-issues-facts] {
+  display: grid;
+  grid-template-columns: minmax(120px, 170px) 1fr;
+  gap: 6px 14px;
   align-items: center;
 
-  gap: 0.5rem;
-
-  min-width: 0;
-}
-
-[data-solid-issues-row-count] {
-  padding: 0 0.375rem;
-
-  border-radius: 9999px;
-  background: var(--start-dt-surface-hover);
-  color: var(--start-dt-text-muted);
-
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.6875rem;
-  line-height: 1.125rem;
-}
-
-[data-solid-issues-row-owner] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  color: var(--start-dt-text-muted);
-}
-
-[data-solid-issues-row-message] {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-
-  color: var(--start-dt-text-muted);
-}
-
-[data-solid-issues-detail] {
-  display: flex;
-  flex-direction: column;
-
-  gap: 0.625rem;
-
-  flex: 1;
-  min-height: 0;
-
-  padding: 0.625rem 0.75rem;
+  margin: 0;
 
-  overflow: auto;
+  font: 12px var(--start-dt-mono);
 }
 
-[data-solid-issues-detail-head] {
+[data-solid-issues-facts] > dt {
   display: flex;
-  flex-direction: row;
   align-items: center;
-
-  gap: 0.375rem;
-
-  min-width: 0;
-}
-
-[data-solid-issues-detail-head] [data-solid-copy-report] {
-  margin-left: auto;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-}
-
-[data-solid-issues-detail-head] [data-solid-copy-report] > svg {
-  width: 0.875rem;
-  height: 0.875rem;
+  gap: 6px;
+  color: var(--start-dt-text-muted);
 }
 
-[data-solid-issues-detail-message] {
-  white-space: pre-wrap;
+[data-solid-issues-facts] > dd {
+  margin: 0;
+  word-break: break-word;
 }
 
 [data-solid-issues-actions] {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-
-  gap: 0.375rem;
-}
-
-[data-solid-issues-action] {
-  display: inline-flex;
   align-items: center;
+  gap: 6px;
 
-  gap: 0.375rem;
-
-  padding: 0.25rem 0.5rem;
-
-  border-radius: 0.375rem;
-  border: var(--start-dt-border) 1px solid;
-  background: var(--start-dt-surface);
-  color: var(--start-dt-accent);
-  text-decoration: none;
-
-  cursor: pointer;
+  margin-top: 14px;
 }
 
-[data-solid-issues-action]:hover {
-  background: var(--start-dt-accent-soft);
-}
-
-[data-solid-issues-action] > svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-[data-solid-issues-data] {
+/* the prototype's `.sect` */
+[data-solid-issues-section] {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
 
-  gap: 0.25rem;
+  margin: 14px 0 8px;
+
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-[data-solid-issues-data] > pre {
+[data-solid-issues-data] {
   margin: 0;
-  padding: 0.5rem;
+  padding: 8px 10px;
 
-  border-radius: 0.375rem;
-  background: var(--start-dt-surface);
+  border: 1px solid var(--start-dt-line);
+  border-radius: 7px;
+  background: var(--start-dt-well);
+  color: var(--start-dt-text-muted);
+  font: 12px/1.5 var(--start-dt-mono);
   overflow: auto;
-}
-
-/* The pane scrolls, so its blocks keep their height instead of shrinking to fit. */
-[data-solid-issues-detail] > * {
-  flex-shrink: 0;
-}
-
-[data-solid-issues-data] > pre > * {
-  white-space: pre;
-}
-
-[data-solid-issues-detail] [data-solid-kv-key] {
-  flex-basis: 4rem;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
diff --git a/src/dev-toolbar/ownership/builtins.ts b/src/dev-toolbar/ownership/builtins.ts
new file mode 100644
index 0000000..d38ac84
--- /dev/null
+++ b/src/dev-toolbar/ownership/builtins.ts
@@ -0,0 +1,50 @@
+import { For, Hydration, Match, NoHydration, Repeat, Reveal, Show, Switch } from 'solid-js';
+import { Dynamic, HydrationScript, Portal } from '@solidjs/web';
+import { componentLocation, type RawNode } from './tree.js';
+
+/** The components Solid ships. Loading and Errored are left out, they mark boundaries. */
+const BUILTIN_FUNCTIONS = new Set<unknown>([
+  For,
+  Show,
+  Switch,
+  Match,
+  Repeat,
+  Reveal,
+  NoHydration,
+  Hydration,
+  Dynamic,
+  Portal,
+  HydrationScript,
+]);
+
+/**
+ * Names to fall back on for built-ins whose function the runtime wraps, such
+ * as `Dynamic`. A name only counts when the component has no source location,
+ * because the app's own components carry one.
+ */
+const BUILTIN_NAMES = new Set([
+  'For',
+  'Index',
+  'Show',
+  'Switch',
+  'Match',
+  'Repeat',
+  'Dynamic',
+  'Portal',
+  'Reveal',
+  'NoHydration',
+  'Hydration',
+  'HydrationScript',
+  'Document',
+]);
+
+/** True for a component owner that comes from solid-js or @solidjs/web. */
+export function isSolidBuiltin(owner: RawNode): boolean {
+  const component = owner._component;
+  if (!component) return false;
+  // Step 1: the function itself is the reliable test.
+  if (BUILTIN_FUNCTIONS.has(component.fn)) return true;
+  // Step 2: otherwise trust the name, unless the app declared it.
+  const name = typeof component.name === 'string' ? component.name : component.fn?.name;
+  return typeof name === 'string' && BUILTIN_NAMES.has(name) && !componentLocation(owner);
+}
diff --git a/src/dev-toolbar/ownership/heat.test.ts b/src/dev-toolbar/ownership/heat.test.ts
new file mode 100644
index 0000000..cb50caa
--- /dev/null
+++ b/src/dev-toolbar/ownership/heat.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import {
+  collectActivity,
+  describeHeat,
+  formatAgo,
+  pushRateSample,
+  type ActivityNode,
+  type RateSample,
+} from './heat.js';
+import type { TreeNode } from './tree.js';
+
+function row(id: string, owner: object): TreeNode {
+  return { id, owner } as unknown as TreeNode;
+}
+
+describe('collectActivity', () => {
+  it('adds a memo and a signal to the component above them', () => {
+    const component = { _parent: null };
+    const memo = { _parent: component };
+    const activity = collectActivity(
+      [row('a', component)],
+      [
+        { kind: 'memo', updates: 2, updatedAt: 10, pending: false, raw: memo, owner: component },
+        {
+          kind: 'signal',
+          updates: 1,
+          updatedAt: 30,
+          pending: true,
+          raw: {},
+          owner: component,
+        } satisfies ActivityNode,
+      ],
+    );
+    expect(activity.get('a')).toEqual({ updates: 3, updatedAt: 30, pending: true });
+  });
+
+  it('skips nodes outside every row', () => {
+    const activity = collectActivity(
+      [row('a', {})],
+      [{ kind: 'memo', updates: 1, updatedAt: 1, pending: false, raw: {}, owner: undefined }],
+    );
+    expect(activity.size).toBe(0);
+  });
+});
+
+describe('pushRateSample', () => {
+  it('measures updates per second over the window', () => {
+    const samples: RateSample[] = [];
+    expect(pushRateSample(samples, 1000, 0)).toBe(0);
+    expect(pushRateSample(samples, 2000, 60)).toBe(60);
+  });
+
+  it('starts over when the total goes down', () => {
+    const samples: RateSample[] = [];
+    pushRateSample(samples, 1000, 50);
+    pushRateSample(samples, 2000, 0);
+    expect(samples).toHaveLength(1);
+  });
+});
+
+describe('describeHeat', () => {
+  const now = 100_000;
+  it('shows nothing for a row that never ran', () => {
+    expect(describeHeat(undefined, 0, now)).toEqual({
+      dot: undefined,
+      text: undefined,
+      tone: undefined,
+    });
+  });
+
+  it('marks a very frequent row red with its rate', () => {
+    const heat = describeHeat({ updates: 90, updatedAt: now - 10, pending: false }, 60, now);
+    expect(heat).toMatchObject({ dot: 'red', text: '60/s' });
+  });
+
+  it('tells a recent update and goes amber after a while', () => {
+    expect(
+      describeHeat({ updates: 1, updatedAt: now - 4000, pending: false }, 0, now),
+    ).toMatchObject({
+      dot: 'red',
+      text: 'updated 4s ago',
+    });
+    expect(
+      describeHeat({ updates: 1, updatedAt: now - 20_000, pending: false }, 0, now),
+    ).toMatchObject({
+      dot: 'amber',
+    });
+    expect(describeHeat({ updates: 1, updatedAt: now - 120_000, pending: false }, 0, now)).toEqual({
+      dot: undefined,
+      text: undefined,
+      tone: undefined,
+    });
+  });
+
+  it('shows waiting in amber', () => {
+    expect(describeHeat({ updates: 0, updatedAt: 0, pending: true }, 0, now)).toMatchObject({
+      text: 'waiting',
+      tone: 'amber',
+    });
+  });
+});
+
+describe('formatAgo', () => {
+  it('picks the unit', () => {
+    expect(formatAgo(4000)).toBe('4s');
+    expect(formatAgo(120_000)).toBe('2m');
+    expect(formatAgo(7_200_000)).toBe('2h');
+  });
+});
diff --git a/src/dev-toolbar/ownership/heat.ts b/src/dev-toolbar/ownership/heat.ts
new file mode 100644
index 0000000..6367a6c
--- /dev/null
+++ b/src/dev-toolbar/ownership/heat.ts
@@ -0,0 +1,137 @@
+import type { TreeNode } from './tree.js';
+
+/** What the reactive graph says about the computations created under one tree row. */
+export interface OwnerActivity {
+  /** Updates of every computation under the row, added up. */
+  updates: number;
+  /** Timestamp of the latest update under the row. Zero when nothing ran. */
+  updatedAt: number;
+  /** A computation under the row waits on async work. */
+  pending: boolean;
+}
+
+/** The graph fields the heat needs. */
+export interface ActivityNode {
+  kind: string;
+  updates: number;
+  updatedAt: number;
+  pending: boolean;
+  raw: object;
+  owner: object | undefined;
+}
+
+/** Updates in the window above this many per second make a row hot. */
+export const HOT_RATE = 3;
+/** An update this recent is red. */
+export const RED_MS = 5_000;
+/** An update this recent is amber. */
+export const AMBER_MS = 30_000;
+/** The row tells how long ago it updated for this long, then shows its counts again. */
+export const AGO_MS = 60_000;
+/** The span the update rate is measured over. */
+export const RATE_WINDOW_MS = 2_000;
+
+interface Parented {
+  _parent?: Parented | null;
+}
+
+/**
+ * Adds the graph's nodes up under the nearest tree row above each of them.
+ * A signal belongs to its owner, a memo or effect to its own place in the owner chain.
+ */
+export function collectActivity(
+  treeNodes: TreeNode[],
+  graphNodes: ActivityNode[],
+): Map<string, OwnerActivity> {
+  const rowOf = new Map<object, string>();
+  for (const node of treeNodes) rowOf.set(node.owner, node.id);
+
+  const out = new Map<string, OwnerActivity>();
+  for (const node of graphNodes) {
+    // A node nobody ran has nothing to tell.
+    if (node.updates === 0 && !node.pending) continue;
+
+    // Step 1: find the row, climbing the owner chain from the node.
+    const start = node.kind === 'signal' || node.kind === 'store' ? node.owner : node.raw;
+    let id: string | undefined;
+    for (let cursor = start as Parented | null | undefined; cursor; cursor = cursor._parent) {
+      id = rowOf.get(cursor);
+      if (id) break;
+    }
+    if (!id) continue;
+
+    // Step 2: add it to the row.
+    const entry = out.get(id) ?? { updates: 0, updatedAt: 0, pending: false };
+    entry.updates += node.updates;
+    entry.updatedAt = Math.max(entry.updatedAt, node.updatedAt);
+    entry.pending = entry.pending || node.pending;
+    out.set(id, entry);
+  }
+  return out;
+}
+
+export interface RateSample {
+  at: number;
+  updates: number;
+}
+
+/**
+ * Adds a reading to a row's samples and returns the updates per second over
+ * the window. The list is trimmed in place.
+ */
+export function pushRateSample(
+  samples: RateSample[],
+  now: number,
+  updates: number,
+  windowMs = RATE_WINDOW_MS,
+): number {
+  // Step 1: a total that went down means the row was rebuilt, so start over.
+  const last = samples[samples.length - 1];
+  if (last && updates < last.updates) samples.length = 0;
+  samples.push({ at: now, updates });
+
+  // Step 2: drop readings older than the window, but keep one at its edge.
+  while (samples.length > 2 && samples[1]!.at <= now - windowMs) samples.shift();
+
+  // Step 3: the rate between the oldest reading and this one.
+  const first = samples[0]!;
+  const seconds = (now - first.at) / 1000;
+  if (seconds < 0.25) return 0;
+  return (updates - first.updates) / seconds;
+}
+
+/** `4s`, `2m` or `1h`, for how long ago something happened. */
+export function formatAgo(ms: number): string {
+  const seconds = Math.max(0, Math.round(ms / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  return `${Math.round(minutes / 60)}h`;
+}
+
+export interface RowHeat {
+  dot: 'red' | 'amber' | undefined;
+  /** Replaces the row's counts. Undefined keeps the counts. */
+  text: string | undefined;
+  tone: 'amber' | undefined;
+}
+
+/** The dot and the text a tree row shows for its activity. */
+export function describeHeat(
+  activity: OwnerActivity | undefined,
+  rate: number,
+  now: number,
+): RowHeat {
+  if (!activity) return { dot: undefined, text: undefined, tone: undefined };
+  if (activity.pending) return { dot: undefined, text: 'waiting', tone: 'amber' };
+
+  const age = activity.updatedAt > 0 ? now - activity.updatedAt : Infinity;
+  const hot = rate >= HOT_RATE && age < RED_MS;
+  if (hot) return { dot: 'red', text: `${Math.round(rate)}/s`, tone: undefined };
+
+  let dot: RowHeat['dot'];
+  if (age < RED_MS) dot = 'red';
+  else if (age < AMBER_MS) dot = 'amber';
+  const text = age < AGO_MS ? `updated ${formatAgo(age)} ago` : undefined;
+  return { dot, text, tone: undefined };
+}
diff --git a/src/dev-toolbar/ownership/index.tsx b/src/dev-toolbar/ownership/index.tsx
index b034575..94437f7 100644
--- a/src/dev-toolbar/ownership/index.tsx
+++ b/src/dev-toolbar/ownership/index.tsx
@@ -1,21 +1,33 @@
 import type { JSX } from '@solidjs/web';
-import { createEffect, createMemo, createSignal, For, getOwner, Show } from 'solid-js';
-import { Badge } from '../../ui/Badge.js';
-import IconButton from '../../ui/IconButton.js';
+import { createEffect, createMemo, createSignal, For, getOwner, onCleanup, Show } from 'solid-js';
 import Placeholder from '../../ui/Placeholder.js';
 import { ResizeHandle } from '../../ui/ResizeHandle.js';
-import { Text } from '../../ui/Text.js';
 import { useResizableDetail } from '../../ui/use-resizable-detail.js';
-import { CollapseIcon, EditIcon, ExpandIcon, EyeIcon, PauseIcon, PlayIcon } from '../icons.js';
+import { HealthButton } from '../health/HealthButton.js';
+import { CollapseIcon, ExpandIcon, EyeIcon, PauseIcon, PlayIcon } from '../icons.js';
 import { openInEditor } from '../open-in-editor.js';
-import { CopyReportButton } from '../report/CopyReportButton.js';
-import { pageRoute } from '../report/markdown.js';
-import { ownerReport } from '../report/owner-report.js';
 import { createDraftEdit } from '../reactivity/draft-edit.js';
 import { DraftInput } from '../reactivity/DraftInput.js';
+import {
+  snapshotReactivityGraph,
+  startReactivityTracking,
+  subscribeReactivityGraph,
+} from '../reactivity/registry.js';
 import { isTextEditable, writeReactiveValue } from '../reactivity/value-editor.js';
 import { ValueInspector } from '../reactivity/ValueInspector.js';
-import { previewValue, typeName } from './format.js';
+import { CopyReportButton } from '../report/CopyReportButton.js';
+import { pageRoute } from '../report/markdown.js';
+import { ownerReport } from '../report/owner-report.js';
+import { previewValue } from './format.js';
+import { groupRuns, type RunItem } from './runs.js';
+import {
+  collectActivity,
+  describeHeat,
+  formatAgo,
+  pushRateSample,
+  type OwnerActivity,
+  type RateSample,
+} from './heat.js';
 import {
   excludeOwner,
   isOwnershipAvailable,
@@ -27,8 +39,10 @@ import {
 import {
   ancestorsOf,
   EMPTY_TREE,
+  readPropValues,
   type OwnerKind,
   type OwnershipTree,
+  type PropValue,
   type TreeNode,
 } from './tree.js';
 import './styles.css';
@@ -40,6 +54,8 @@ function isInGraph(kind: OwnerKind): boolean {
 
 /** How long a row stays marked as new after it first appears. */
 const FRESH_MS = 900;
+/** Width of one level of the tree, in pixels. */
+const INDENT = 14;
 
 interface Row {
   node: TreeNode;
@@ -47,6 +63,16 @@ interface Row {
   indent: number;
   expandable: boolean;
   expanded: boolean;
+  /** Set on a row that stands for several siblings of one name. */
+  run?: { ids: string[]; label: string };
+}
+
+/** A change of a signal, as the timeline recorded it. */
+export interface SignalChange {
+  /** The previous value, already formatted. */
+  prev?: string;
+  /** When the write happened, on the `performance.now()` clock. */
+  at: number;
 }
 
 export interface OwnershipViewerProps {
@@ -58,134 +84,151 @@ export interface OwnershipViewerProps {
    * so asking for the same owner twice still moves the tree.
    */
   focus?: { owner: object };
+  /** Shown first in the filter row, ahead of the search. */
+  lead?: JSX.Element;
+  /**
+   * The last change of a signal. The first argument is the id this panel gives
+   * the signal, the second the runtime signal itself.
+   */
+  lastChange?: (nodeId: string | number, node?: object) => SignalChange | undefined;
+  /** Opens the activity of an owner. */
+  onShowActivity?: (owner: object, name: string) => void;
 }
 
-interface OwnershipSignalRowProps {
-  signal: { name: string; value: unknown; node: object };
+/** The colour class of a value, as the prototype sets it. */
+function valueTone(value: unknown): 'str' | 'num' | 'kw' | undefined {
+  if (typeof value === 'string') return 'str';
+  if (typeof value === 'number' || typeof value === 'bigint') return 'num';
+  if (typeof value === 'boolean' || value === null || value === undefined) return 'kw';
+  return undefined;
+}
+
+/** The file name of a location, such as `OrderTable.tsx` from `src/OrderTable.tsx:41:7`. */
+function shortLocation(location: string): string {
+  // Step 1: drop the line and the column.
+  const parts = location.split(':');
+  while (parts.length > 1 && /^\d+$/.test(parts[parts.length - 1]!)) parts.pop();
+  // Step 2: keep the file name.
+  const path = parts.join(':');
+  const slash = path.lastIndexOf('/');
+  return slash >= 0 ? path.slice(slash + 1) : path;
+}
+
+/** The component name without the angle brackets the tree keeps. */
+function plainName(node: TreeNode): string {
+  return node.kind === 'component' ? node.name.slice(1, -1) : node.name;
+}
+
+function pluralize(count: number, word: string): string {
+  return `${count} ${word}${count === 1 ? '' : 's'}`;
+}
+
+interface ValueCellProps {
+  value: unknown;
+  /** Writes a new value. A value without it is read only. */
+  write?: (nextValue: unknown) => boolean;
+  /** Writes into a value that is not a primitive, at a path inside it. */
+  writeAt?: (path: readonly (string | number)[], nextValue: unknown) => boolean;
+  /** The runtime node the graph can show. */
+  node?: object;
+  label: string;
   onViewInGraph?: (node: object) => void;
+  /** Shown after the value, such as when it last changed. */
+  note?: JSX.Element;
 }
 
-function OwnershipSignalRow(props: OwnershipSignalRowProps): JSX.Element {
+function ValueCell(props: ValueCellProps): JSX.Element {
   const [expanded, setExpanded] = createSignal(false);
   const edit = createDraftEdit({
-    value: () => props.signal.value,
-    write: (nextValue) => writeReactiveValue(props.signal.node, [], nextValue),
+    value: () => props.value,
+    write: (nextValue) => props.write?.(nextValue) ?? false,
   });
 
-  const isComplex = createMemo(
-    () => typeof props.signal.value === 'object' && props.signal.value !== null,
-  );
+  const isComplex = createMemo(() => typeof props.value === 'object' && props.value !== null);
   // A Map, a Date or a class instance would come back from JSON as a plain
   // object, so only values that survive the round trip are edited as text.
-  const textEditable = createMemo(() => isTextEditable(props.signal.value));
+  const textEditable = createMemo(() => !!props.write && isTextEditable(props.value));
 
   function valueTitle(): string {
     if (edit.failed()) return 'The app did not take this edit';
     if (!textEditable()) return isComplex() ? 'Click to expand' : '';
-    return isComplex() ? 'Click to expand / double-click to edit JSON' : 'Double-click to edit';
+    if (isComplex()) return 'Click to expand, double-click to edit JSON';
+    return typeof props.value === 'boolean' ? 'Click to toggle' : 'Click to edit';
+  }
+
+  function activate(): void {
+    // Step 1: a boolean flips on one click.
+    if (props.write && typeof props.value === 'boolean') {
+      edit.write(!props.value);
+      return;
+    }
+    // Step 2: an object opens, and a primitive goes to the editor.
+    if (isComplex()) setExpanded((current) => !current);
+    else if (textEditable()) edit.start();
   }
 
   return (
-    <div data-solid-ownership-signal-block>
-      <div data-solid-ownership-signal>
-        <span data-solid-ownership-signal-name>
-          <Show when={isComplex()}>
-            <button
-              type="button"
-              data-solid-ownership-signal-chevron
-              data-expanded={expanded() ? 'true' : undefined}
-              onClick={() => setExpanded((v) => !v)}
-              aria-label={expanded() ? 'Collapse value' : 'Expand value'}
-            />
-          </Show>
-          <Text
-            options={{
-              size: 'xs',
-              weight: 'semibold',
-              font: 'mono',
-              wrap: 'nowrap',
+    <>
+      <Show
+        when={edit.editing()}
+        fallback={
+          <span
+            data-solid-ownership-value
+            data-editable={textEditable() ? '' : undefined}
+            data-tone={valueTone(props.value)}
+            data-solid-ownership-edit-failed={edit.failed() ? '' : undefined}
+            title={valueTitle()}
+            onClick={activate}
+            onDblClick={() => {
+              if (isComplex() && textEditable()) edit.start();
             }}
           >
-            {props.signal.name}
-          </Text>
-        </span>
-        <Show
-          when={edit.editing()}
-          fallback={
-            <>
-              <Show
-                when={typeof props.signal.value === 'boolean'}
-                fallback={
-                  <Text
-                    data-solid-ownership-signal-value
-                    data-solid-ownership-edit-failed={edit.failed() ? '' : undefined}
-                    options={{ size: 'xs', font: 'mono' }}
-                    onClick={() => {
-                      if (isComplex()) setExpanded((v) => !v);
-                    }}
-                    onDblClick={() => {
-                      if (textEditable()) edit.start();
-                    }}
-                    title={valueTitle()}
-                  >
-                    {previewValue(props.signal.value)}
-                  </Text>
-                }
-              >
-                <button
-                  type="button"
-                  data-solid-ownership-toggle-btn
-                  data-value={props.signal.value ? 'true' : 'false'}
-                  data-solid-ownership-edit-failed={edit.failed() ? '' : undefined}
-                  onClick={() => edit.write(!props.signal.value)}
-                  title={edit.failed() ? valueTitle() : 'Click to toggle boolean'}
-                >
-                  <Text options={{ size: 'xs', font: 'mono' }}>{`${props.signal.value}`}</Text>
-                </button>
-              </Show>
-              <div data-solid-ownership-signal-actions>
-                <Show when={textEditable()}>
-                  <button
-                    type="button"
-                    data-solid-ownership-edit-signal
-                    aria-label={`Edit ${props.signal.name}`}
-                    title={`Edit ${props.signal.name}`}
-                    onClick={edit.start}
-                  >
-                    <EditIcon title={`Edit ${props.signal.name}`} />
-                  </button>
-                </Show>
-                <Show when={props.onViewInGraph}>
-                  <button
-                    type="button"
-                    data-solid-ownership-view-graph
-                    aria-label="View in graph"
-                    onClick={() => props.onViewInGraph?.(props.signal.node)}
-                  >
-                    <EyeIcon title="View in graph" />
-                  </button>
-                </Show>
-              </div>
-            </>
-          }
+            {previewValue(props.value)}
+          </span>
+        }
+      >
+        <DraftInput edit={edit} marker="data-solid-ownership-signal-input" />
+      </Show>
+      {props.note}
+      <Show when={props.node && props.onViewInGraph}>
+        <button
+          type="button"
+          data-solid-ownership-view-graph
+          aria-label={`View ${props.label} in graph`}
+          title="View in graph"
+          onClick={() => props.onViewInGraph?.(props.node!)}
         >
-          <DraftInput edit={edit} marker="data-solid-ownership-signal-input" />
-        </Show>
-      </div>
+          <EyeIcon title="View in graph" />
+        </button>
+      </Show>
       <Show when={isComplex() && expanded()}>
-        <div data-solid-ownership-signal-tree>
+        <div data-solid-ownership-inspector>
           <ValueInspector
-            value={props.signal.value}
+            value={props.value}
             open
-            editable
-            onEdit={(path, nextValue) => writeReactiveValue(props.signal.node, path, nextValue)}
+            editable={!!props.writeAt}
+            onEdit={(path, nextValue) => props.writeAt?.(path, nextValue) ?? false}
           />
         </div>
       </Show>
-    </div>
+    </>
   );
 }
 
+interface KindChipProps {
+  kind: 'prop' | 'signal' | 'memo' | 'other';
+  children: JSX.Element;
+}
+
+function KindChip(props: KindChipProps): JSX.Element {
+  return <span data-solid-ownership-kind-chip={props.kind}>{props.children}</span>;
+}
+
+interface ActivityEntry {
+  activity: OwnerActivity;
+  rate: number;
+}
+
 export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Element {
   // The panel renders inside the app it inspects, so its own scope is marked.
   excludeOwner(getOwner());
@@ -194,21 +237,28 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
   const [componentsOnly, setComponentsOnly] = createSignal(true);
   const [paused, setPaused] = createSignal(false);
   const [query, setQuery] = createSignal('');
+  const [openRuns, setOpenRuns] = createSignal<string[]>([]);
   const [collapsed, setCollapsed] = createSignal<string[]>([]);
   const [selected, setSelected] = createSignal<string>();
-  const detail = useResizableDetail({ storageKey: 'solid-start-devtools:ownership-detail-width' });
+  const [activity, setActivity] = createSignal(new Map<string, ActivityEntry>());
+  const [now, setNow] = createSignal(Date.now());
+  const detail = useResizableDetail({
+    storageKey: 'solid-start-devtools:ownership-detail-width',
+    defaultWidth: 480,
+  });
 
   const firstSeen = new Map<string, number>();
+  const rateSamples = new Map<string, RateSample[]>();
   let appliedFocus: { owner: object } | undefined;
-  let rowsElement: HTMLDivElement | undefined;
+  let treeElement: HTMLDivElement | undefined;
 
   // Takes the mode as an argument because reading a signal inside an effect
   // callback is not tracked.
   function refresh(mode: boolean): void {
-    const next = snapshotOwnershipTree({ componentsOnly: mode });
-    const now = Date.now();
+    const next = snapshotOwnershipTree({ componentsOnly: mode, hideBuiltins: mode });
+    const at = Date.now();
     for (const node of next.nodes) {
-      if (!firstSeen.has(node.id)) firstSeen.set(node.id, now);
+      if (!firstSeen.has(node.id)) firstSeen.set(node.id, at);
     }
     // An unchanged fingerprint means the app tree did not move. Skipping the
     // write stops the panel's own render from feeding itself another update.
@@ -230,6 +280,43 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     },
   );
 
+  // Heat comes from the reactivity graph. Each computation counts for the row
+  // above it, so a row shows how much runs under it.
+  function readActivity(nodes: TreeNode[]): void {
+    const at = Date.now();
+    const found = collectActivity(nodes, snapshotReactivityGraph().nodes);
+    const next = new Map<string, ActivityEntry>();
+    for (const [id, entry] of found) {
+      let samples = rateSamples.get(id);
+      if (!samples) {
+        samples = [];
+        rateSamples.set(id, samples);
+      }
+      next.set(id, { activity: entry, rate: pushRateSample(samples, at, entry.updates) });
+    }
+    setActivity(next);
+    setNow(at);
+  }
+
+  createEffect(
+    () => ({ watching: !!props.show && !paused(), nodes: tree().nodes }),
+    (state) => {
+      if (!state.watching) return;
+      const read = () => readActivity(state.nodes);
+      const stop = startReactivityTracking();
+      const unsubscribe = subscribeReactivityGraph(read);
+      read();
+      // The ages in the rows move on without a graph change, so a clock runs.
+      const clock = setInterval(() => setNow(Date.now()), 1000);
+      return () => {
+        clearInterval(clock);
+        unsubscribe();
+        stop();
+      };
+    },
+  );
+  onCleanup(() => rateSamples.clear());
+
   // The graph can ask for an owner. The request selects the closest row the
   // tree shows for it, opens the rows above that row, and waits for a snapshot
   // that contains it.
@@ -237,8 +324,15 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     () => ({ request: props.focus, nodes: tree().nodes, visible: !!props.show }),
     ({ request, nodes, visible }) => {
       if (!request || !visible || request === appliedFocus) return;
-      const known = new Map(nodes.map((node) => [node.id, node]));
-      const id = ownerChainIds(request.owner).find((candidate) => known.has(candidate));
+      const known = new Map<string, TreeNode>();
+      for (const node of nodes) known.set(node.id, node);
+      let id: string | undefined;
+      for (const candidate of ownerChainIds(request.owner)) {
+        if (known.has(candidate)) {
+          id = candidate;
+          break;
+        }
+      }
       if (!id) return;
       appliedFocus = request;
       const open = new Set([id, ...ancestorsOf(known, id)]);
@@ -247,11 +341,33 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
       setSelected(id);
       // The row exists after this flush renders, so scroll on the next frame.
       requestAnimationFrame(() => {
-        rowsElement?.querySelector(`[data-owner-id="${id}"]`)?.scrollIntoView({ block: 'nearest' });
+        treeElement?.querySelector(`[data-owner-id="${id}"]`)?.scrollIntoView({ block: 'nearest' });
       });
     },
   );
-  const byId = createMemo(() => new Map(tree().nodes.map((node) => [node.id, node])));
+
+  const byId = createMemo(() => {
+    const map = new Map<string, TreeNode>();
+    for (const node of tree().nodes) map.set(node.id, node);
+    return map;
+  });
+
+  // Siblings that share a name get a number, so `<OrderRow>` twice reads as #1 and #2.
+  const instances = createMemo(() => {
+    const out = new Map<string, number>();
+    const groups = new Map<string, string[]>();
+    for (const node of tree().nodes) {
+      const key = `${node.parentId ?? ''}\u0000${node.name}`;
+      const group = groups.get(key);
+      if (group) group.push(node.id);
+      else groups.set(key, [node.id]);
+    }
+    for (const group of groups.values()) {
+      if (group.length < 2) continue;
+      for (let index = 0; index < group.length; index++) out.set(group[index]!, index + 1);
+    }
+    return out;
+  });
 
   const matches = createMemo(() => {
     const search = query().trim().toLowerCase();
@@ -259,19 +375,19 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     const nodes = byId();
     const keep = new Set<string>();
     for (const node of tree().nodes) {
-      const hit =
-        node.name.toLowerCase().includes(search) ||
-        node.kind.includes(search) ||
-        node.signals.some(
-          (signal) =>
-            signal.name.toLowerCase().includes(search) ||
-            previewValue(signal.value).toLowerCase().includes(search),
-        ) ||
-        node.scopes.some(
-          (scope) =>
-            scope.name.toLowerCase().includes(search) ||
-            previewValue(scope.value).toLowerCase().includes(search),
-        );
+      let hit = node.name.toLowerCase().includes(search) || node.kind.includes(search);
+      for (const signal of node.signals) {
+        if (hit) break;
+        hit =
+          signal.name.toLowerCase().includes(search) ||
+          previewValue(signal.value).toLowerCase().includes(search);
+      }
+      for (const scope of node.scopes) {
+        if (hit) break;
+        hit =
+          scope.name.toLowerCase().includes(search) ||
+          previewValue(scope.value).toLowerCase().includes(search);
+      }
       if (!hit) continue;
       keep.add(node.id);
       for (const parent of ancestorsOf(nodes, node.id)) keep.add(parent);
@@ -284,36 +400,98 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     const visible = matches();
     const hidden = collapsed();
     const out: Row[] = [];
+    const chosen = selected();
+    const opened = openRuns();
+
+    function isOpen(child: string): boolean {
+      const node = nodes.get(child);
+      return !!node && node.children.length > 0 && !hidden.includes(child);
+    }
+
+    // Step 1: group same-name siblings, unless a search is showing them.
+    function segmentsOf(children: string[]) {
+      const items: RunItem[] = [];
+      for (const child of children) {
+        items.push({
+          id: child,
+          name: nodes.get(child)?.name ?? child,
+          foldable: !visible && child !== chosen && !isOpen(child),
+        });
+      }
+      return groupRuns(items);
+    }
 
-    const walk = (id: string, indent: number) => {
+    function walk(id: string, indent: number): void {
       const node = nodes.get(id);
       if (!node) return;
       if (visible && !visible.has(id)) return;
-      const children = visible
-        ? node.children.filter((child) => visible.has(child))
-        : node.children;
+      const children: string[] = [];
+      for (const child of node.children) {
+        if (!visible || visible.has(child)) children.push(child);
+      }
       // A search result is always open, so matches deeper down stay reachable.
       const expanded = visible ? true : !hidden.includes(id);
       out.push({ node, indent, expandable: children.length > 0, expanded });
       if (!expanded) return;
-      for (const child of children) walk(child, indent + 1);
-    };
+      pushChildren(children, indent + 1);
+    }
+
+    function pushChildren(children: string[], indent: number): void {
+      for (const segment of segmentsOf(children)) {
+        if (segment.kind === 'item') {
+          walk(segment.id, indent);
+          continue;
+        }
+        // Step 2: an opened run shows its rows, a closed one shows one row.
+        if (opened.includes(segment.ids[0]!)) {
+          for (const child of segment.ids) walk(child, indent);
+          continue;
+        }
+        const first = nodes.get(segment.ids[0]!)!;
+        const last = nodes.get(segment.ids[segment.ids.length - 1]!)!;
+        const label = `${plainName(first)} #${instances().get(first.id) ?? ''} … #${instances().get(last.id) ?? ''}`;
+        out.push({
+          node: first,
+          indent,
+          expandable: false,
+          expanded: false,
+          run: { ids: segment.ids, label },
+        });
+      }
+    }
 
-    for (const root of tree().roots) walk(root, 0);
+    // The roots follow the same rule as any other siblings.
+    pushChildren(tree().roots, 0);
     return out;
   });
 
-  function toggle(id: string): void {
-    setCollapsed((current) =>
-      current.includes(id) ? current.filter((item) => item !== id) : [...current, id],
-    );
+  function openRun(row: Row): void {
+    const first = row.run?.ids[0];
+    if (first) setOpenRuns((current) => [...current, first]);
+  }
+
+  function expandAll(): void {
+    setCollapsed([]);
   }
 
   function collapseAll(): void {
-    setCollapsed(
-      tree()
-        .nodes.filter((node) => node.children.length > 0)
-        .map((node) => node.id),
+    const ids: string[] = [];
+    for (const node of tree().nodes) {
+      if (node.children.length > 0) ids.push(node.id);
+    }
+    setCollapsed(ids);
+  }
+
+  /** Rows the tree holds, counting the ones a run stands for. */
+  const shownCount = createMemo(() => {
+    let count = 0;
+    for (const row of rows()) count += row.run ? row.run.ids.length : 1;
+    return count;
+  });
+
+  function toggle(id: string): void {
+    setCollapsed((current) =>
+      current.includes(id) ? current.filter((item) => item !== id) : [...current, id],
     );
   }
 
@@ -336,371 +514,472 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
     return frames;
   });
 
+  // Props are getters. Reading them again each second keeps the values live.
+  const propValues = createMemo<PropValue[]>(() => {
+    const node = selectedNode();
+    now();
+    return node?.kind === 'component' ? readPropValues(node.owner) : [];
+  });
+
+  /** The text on the right of a row: its heat, else what it owns. */
+  function metaOf(node: TreeNode) {
+    const entry = activity().get(node.id);
+    const heat = describeHeat(entry?.activity, entry?.rate ?? 0, now());
+    let memos = 0;
+    for (const scope of node.scopes) {
+      if (scope.kind === 'memo') memos += 1;
+    }
+    const counts: string[] = [];
+    if (node.signals.length > 0) counts.push(pluralize(node.signals.length, 'signal'));
+    if (memos > 0) counts.push(pluralize(memos, 'memo'));
+    let text = heat.text ?? (counts.length > 0 ? counts.join(' · ') : undefined);
+    if (node.disposed) text = 'disposed';
+    return { dot: heat.dot, text, tone: node.disposed ? ('red' as const) : heat.tone };
+  }
+
+  /** `<OrderRow #2>` for a component, the plain name for the rest. */
+  function titleOf(node: TreeNode): string {
+    const instance = instances().get(node.id);
+    if (node.kind !== 'component') return node.name;
+    return `<${plainName(node)}${instance ? ` #${instance}` : ''}>`;
+  }
+
+  function onRowKeyDown(event: KeyboardEvent, row: Row): void {
+    if (event.target !== event.currentTarget) return;
+    if (row.run) {
+      if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowRight') return;
+      openRun(row);
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      setSelected((current) => (current === row.node.id ? undefined : row.node.id));
+    } else if (event.key === 'ArrowRight' && row.expandable && !row.expanded) {
+      toggle(row.node.id);
+    } else if (event.key === 'ArrowLeft' && row.expandable && row.expanded) {
+      toggle(row.node.id);
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+
   return (
     <Show when={props.show}>
       <div data-solid-dev-toolbar-panel>
         <div data-solid-ownership-viewer>
-          <div data-solid-ownership-nav>
-            <input
-              data-solid-ownership-search
-              type="search"
-              placeholder="Filter by component, scope or signal"
-              value={query()}
-              onInput={(event) => setQuery(event.currentTarget.value)}
-            />
-            <div data-solid-ownership-modes>
+          <div
+            data-solid-ownership-tree
+            ref={(element) => {
+              treeElement = element;
+            }}
+          >
+            <div data-solid-ownership-filters>
+              {props.lead}
+              <input
+                data-solid-ownership-search
+                type="search"
+                placeholder="Filter by component, scope or signal"
+                aria-label="Filter the ownership tree"
+                value={query()}
+                onInput={(event) => setQuery(event.currentTarget.value)}
+              />
               <button
                 type="button"
+                data-solid-structure-chip
+                data-ghost
                 data-solid-ownership-mode
-                data-active={componentsOnly() ? '' : undefined}
-                onClick={() => setComponentsOnly(true)}
+                aria-pressed={componentsOnly() ? 'true' : 'false'}
+                onClick={() => setComponentsOnly((current) => !current)}
               >
-                <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>Components</Text>
+                Hide Solid internals
               </button>
+              <span data-solid-ownership-count>{`${shownCount()} of ${tree().nodes.length}`}</span>
               <button
                 type="button"
-                data-solid-ownership-mode
-                data-active={componentsOnly() ? undefined : ''}
-                onClick={() => setComponentsOnly(false)}
+                data-solid-ownership-tool
+                data-solid-ownership-pause
+                aria-label={paused() ? 'Resume live updates' : 'Pause live updates'}
+                title={paused() ? 'Resume live updates' : 'Pause live updates'}
+                onClick={() => setPaused((current) => !current)}
               >
-                <Text options={{ size: 'xs', weight: 'semibold', wrap: 'nowrap' }}>Owners</Text>
-              </button>
-            </div>
-            <div data-solid-ownership-nav-actions>
-              <Text data-solid-ownership-count options={{ size: 'xs', font: 'mono' }}>
-                {`${rows().length} of ${tree().nodes.length}`}
-              </Text>
-              <IconButton onClick={() => setPaused((current) => !current)}>
                 <Show
                   when={paused()}
                   fallback={<PauseIcon title="Pause live updates" />}
                   children={<PlayIcon title="Resume live updates" />}
                 />
-              </IconButton>
-              <IconButton onClick={() => setCollapsed([])}>
+              </button>
+              <button
+                type="button"
+                data-solid-ownership-tool
+                data-solid-ownership-expand-all
+                aria-label="Expand all"
+                title="Expand all"
+                onClick={expandAll}
+              >
                 <ExpandIcon title="Expand all" />
-              </IconButton>
-              <IconButton onClick={collapseAll}>
+              </button>
+              <button
+                type="button"
+                data-solid-ownership-tool
+                data-solid-ownership-collapse-all
+                aria-label="Collapse all"
+                title="Collapse all"
+                onClick={collapseAll}
+              >
                 <CollapseIcon title="Collapse all" />
-              </IconButton>
+              </button>
             </div>
-          </div>
-
-          <div data-solid-ownership-body>
             <Show
               when={isOwnershipAvailable()}
               fallback={
-                <Placeholder>
-                  <Text options={{ size: 'xs' }}>
-                    The ownership tree needs a development build of solid-js.
-                  </Text>
-                </Placeholder>
+                <Placeholder>The ownership tree needs a development build of solid-js.</Placeholder>
               }
             >
-              <div
-                data-solid-ownership-rows
-                ref={(element) => {
-                  rowsElement = element;
-                }}
+              <Show
+                when={rows().length > 0}
+                fallback={
+                  <Placeholder>
+                    {query() ? 'Nothing matches this filter.' : 'No owners observed yet.'}
+                  </Placeholder>
+                }
               >
-                <Show
-                  when={rows().length > 0}
-                  fallback={
-                    <Placeholder>
-                      <Text options={{ size: 'xs' }}>
-                        {query() ? 'Nothing matches this filter.' : 'No owners observed yet.'}
-                      </Text>
-                    </Placeholder>
-                  }
-                >
-                  <For each={rows()} keyed={(row) => row.node.id}>
+                <div data-solid-ownership-rows role="tree">
+                  <For
+                    each={rows()}
+                    keyed={(row) => (row.run ? `run:${row.node.id}` : row.node.id)}
+                  >
                     {(row) => (
                       <div
                         data-solid-ownership-row
                         data-owner-id={row().node.id}
-                        data-selected={selected() === row().node.id ? '' : undefined}
+                        data-selected={!row().run && selected() === row().node.id ? '' : undefined}
+                        data-solid-ownership-run={row().run ? '' : undefined}
                         data-fresh={
                           Date.now() - (firstSeen.get(row().node.id) ?? 0) < FRESH_MS
                             ? ''
                             : undefined
                         }
-                        style={{ 'padding-left': `${row().indent * 0.875 + 0.25}rem` }}
+                        role="treeitem"
+                        tabindex="0"
+                        aria-selected={selected() === row().node.id ? 'true' : 'false'}
+                        aria-expanded={
+                          row().expandable ? (row().expanded ? 'true' : 'false') : undefined
+                        }
+                        style={{ 'padding-left': `${row().indent * INDENT}px` }}
+                        onClick={() => {
+                          if (row().run) openRun(row());
+                          else
+                            setSelected((current) =>
+                              current === row().node.id ? undefined : row().node.id,
+                            );
+                        }}
+                        onKeyDown={(event) => onRowKeyDown(event, row())}
                       >
-                        <button
-                          type="button"
+                        <span
                           data-solid-ownership-chevron
                           data-leaf={row().expandable ? undefined : ''}
                           data-expanded={row().expanded ? '' : undefined}
-                          aria-label={row().expanded ? 'Collapse' : 'Expand'}
-                          onClick={() => row().expandable && toggle(row().node.id)}
-                        />
-                        <button
-                          type="button"
-                          data-solid-ownership-label
-                          onClick={() =>
-                            setSelected((current) =>
-                              current === row().node.id ? undefined : row().node.id,
-                            )
+                          aria-label={
+                            row().expandable ? (row().expanded ? 'Collapse' : 'Expand') : undefined
                           }
+                          onClick={(event) => {
+                            // The caret opens the row and leaves the selection alone.
+                            event.stopPropagation();
+                            if (row().expandable) toggle(row().node.id);
+                          }}
                         >
-                          <span data-solid-ownership-kind={row().node.kind} />
-                          <Text
-                            data-solid-ownership-name
-                            options={{
-                              size: 'xs',
-                              weight: 'semibold',
-                              font: 'mono',
-                              wrap: 'nowrap',
-                            }}
+                          {row().run ? '▸' : row().expandable ? (row().expanded ? '▾' : '▸') : ''}
+                        </span>
+                        <span data-solid-ownership-label data-kind={row().node.kind}>
+                          <Show
+                            when={row().run}
+                            fallback={
+                              <>
+                                <span data-solid-ownership-name>{plainName(row().node)}</span>
+                                <Show when={instances().get(row().node.id)}>
+                                  {(instance) => ` #${instance()}`}
+                                </Show>
+                              </>
+                            }
                           >
-                            {row().node.name}
-                          </Text>
-                          <Show when={row().node.disposed}>
-                            <Badge type="failure">disposed</Badge>
+                            {(run) => (
+                              <>
+                                <span data-solid-ownership-name>{run().label.split(' #')[0]}</span>
+                                {run().label.slice(run().label.indexOf(' #'))}
+                              </>
+                            )}
                           </Show>
-                        </button>
+                        </span>
+                        <Show when={!row().run && metaOf(row().node)}>
+                          {(meta) => (
+                            <span data-solid-ownership-meta data-tone={meta().tone}>
+                              <Show when={meta().dot}>
+                                {(dot) => <span data-solid-ownership-heat={dot()} />}
+                              </Show>
+                              {meta().text}
+                            </span>
+                          )}
+                        </Show>
                       </div>
                     )}
                   </For>
-                </Show>
-              </div>
-
-              <Show when={selectedNode()}>
-                {(node) => (
-                  <aside data-solid-ownership-detail style={{ width: `${detail.width()}px` }}>
-                    <ResizeHandle detail={detail} />
-                    <div data-solid-ownership-detail-content>
-                      <div data-solid-ownership-detail-head>
-                        <span data-solid-ownership-kind={node().kind} />
-                        <Text options={{ size: 'sm', weight: 'semibold', font: 'mono' }}>
-                          {node().name}
-                        </Text>
-                        <Badge type="info">{node().kind}</Badge>
-                        <Show when={props.onViewInGraph && isInGraph(node().kind)}>
-                          <button
-                            type="button"
-                            data-solid-ownership-view-graph
-                            aria-label="View in graph"
-                            onClick={() => props.onViewInGraph?.(node().owner)}
-                          >
-                            <EyeIcon title="View in graph" />
-                          </button>
-                        </Show>
-                        <CopyReportButton
-                          label={`this ${node().kind}`}
-                          report={() =>
-                            ownerReport({
-                              node: node(),
-                              ancestry: ancestry(),
-                              nodes: byId(),
-                              route: pageRoute(),
-                            })
-                          }
-                        />
-                      </div>
+                </div>
+              </Show>
+            </Show>
+          </div>
 
-                      <Show when={node().location}>
-                        {(location) => (
-                          <button
-                            type="button"
-                            data-solid-ownership-location
-                            title="Open in editor"
-                            onClick={() => openInEditor(location())}
-                          >
-                            <Text options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
-                              {location()}
-                            </Text>
-                          </button>
-                        )}
-                      </Show>
-
-                      <Show when={node().hasValue}>
-                        <div data-solid-ownership-detail-block>
-                          <Text options={{ size: 'xs', weight: 'semibold' }}>Value</Text>
-                          <Text options={{ size: 'xs', font: 'mono' }}>
-                            {`${previewValue(node().value)} (${typeName(node().value)})`}
-                          </Text>
-                        </div>
-                      </Show>
-
-                      <Show when={node().props}>
-                        {(props) => (
-                          <div data-solid-ownership-detail-block>
-                            <Text options={{ size: 'xs', weight: 'semibold' }}>
-                              {`Props (${props().length})`}
-                            </Text>
-                            <div data-solid-ownership-chips>
-                              <For
-                                each={props()}
-                                fallback={
-                                  <Text options={{ size: 'xs' }}>
-                                    This component takes no props.
-                                  </Text>
+          <Show when={selectedNode()}>
+            {(node) => {
+              const entry = () => activity().get(node().id)?.activity;
+              const parent = () => {
+                const id = node().parentId;
+                return id ? byId().get(id) : undefined;
+              };
+              const memos = () => node().scopes.filter((scope) => scope.kind === 'memo');
+              const otherScopes = () => node().scopes.filter((scope) => scope.kind !== 'memo');
+
+              // The line under the title: where it is, who owns it, how busy it is.
+              const subLine = createMemo(() => {
+                const parts: string[] = [];
+                const location = node().location;
+                if (location) parts.push(`${shortLocation(location)}${lineOf(location)}`);
+                const owner = parent();
+                if (owner) parts.push(`owned by ${plainName(owner)}`);
+                const found = entry();
+                if (found && found.updates > 0) {
+                  const ago =
+                    found.updatedAt > 0 ? `, last ${formatAgo(now() - found.updatedAt)} ago` : '';
+                  parts.push(`${pluralize(found.updates, 'update')}${ago}`);
+                } else {
+                  parts.push('no updates yet');
+                }
+                if (node().disposed) parts.push('disposed');
+                return parts.join(' · ');
+              });
+
+              return (
+                <aside data-solid-ownership-detail style={{ width: `${detail.width()}px` }}>
+                  <ResizeHandle detail={detail} />
+                  <h2 data-solid-ownership-detail-head>{titleOf(node())}</h2>
+                  <div data-solid-ownership-sub>{subLine()}</div>
+
+                  <dl data-solid-ownership-kv>
+                    <Show when={node().hasValue && node().kind !== 'component'}>
+                      <dt>
+                        <KindChip kind={node().kind === 'memo' ? 'memo' : 'other'}>
+                          {node().kind}
+                        </KindChip>
+                        value
+                      </dt>
+                      <dd>
+                        <ValueCell
+                          value={node().value}
+                          label="value"
+                          node={isInGraph(node().kind) ? node().owner : undefined}
+                          onViewInGraph={props.onViewInGraph}
+                        />
+                      </dd>
+                    </Show>
+                    <For each={propValues()}>
+                      {(prop) => (
+                        <>
+                          <dt>
+                            <KindChip kind="prop">prop</KindChip>
+                            {prop.name}
+                          </dt>
+                          <dd>
+                            <ValueCell value={prop.value} label={prop.name} />
+                          </dd>
+                        </>
+                      )}
+                    </For>
+                    <For each={node().signals}>
+                      {(signal) => {
+                        const change = () => {
+                          now();
+                          return props.lastChange?.(signal.id, signal.node);
+                        };
+                        return (
+                          <>
+                            <dt data-solid-ownership-signal>
+                              <KindChip kind="signal">signal</KindChip>
+                              {signal.name}
+                            </dt>
+                            <dd>
+                              <ValueCell
+                                value={signal.value}
+                                label={signal.name}
+                                node={signal.node}
+                                write={(next) => writeReactiveValue(signal.node, [], next)}
+                                writeAt={(path, next) =>
+                                  writeReactiveValue(signal.node, path, next)
                                 }
-                              >
-                                {(name) => (
-                                  <span data-solid-ownership-chip>
-                                    <Text options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
-                                      {name}
-                                    </Text>
-                                  </span>
-                                )}
-                              </For>
-                            </div>
-                            <Text data-solid-ownership-note options={{ size: 'xs' }}>
-                              Props are getters, so the panel lists their names without reading
-                              them.
-                            </Text>
-                          </div>
-                        )}
-                      </Show>
-
-                      <div data-solid-ownership-detail-block>
-                        <Text options={{ size: 'xs', weight: 'semibold' }}>
-                          {`Signals (${node().signals.length})`}
-                        </Text>
-                        <div data-solid-ownership-signals>
-                          <For
-                            each={node().signals}
-                            fallback={
-                              <Text options={{ size: 'xs' }}>This owner holds no signals.</Text>
-                            }
-                          >
-                            {(signal) => (
-                              <OwnershipSignalRow
-                                signal={signal}
                                 onViewInGraph={props.onViewInGraph}
-                              />
-                            )}
-                          </For>
-                        </div>
-                      </div>
-
-                      <Show when={node().scopes.length > 0}>
-                        <div data-solid-ownership-detail-block>
-                          <Text options={{ size: 'xs', weight: 'semibold' }}>
-                            {`Scopes (${node().scopes.length})`}
-                          </Text>
-                          <div data-solid-ownership-signals>
-                            <For each={node().scopes}>
-                              {(scope) => (
-                                <div data-solid-ownership-signal>
-                                  <span data-solid-ownership-scope-name>
-                                    <span data-solid-ownership-kind={scope.kind} />
-                                    <Text
-                                      options={{
-                                        size: 'xs',
-                                        weight: 'semibold',
-                                        font: 'mono',
-                                        wrap: 'nowrap',
-                                      }}
-                                    >
-                                      {scope.name}
-                                    </Text>
-                                  </span>
-                                  <Text
-                                    data-solid-ownership-signal-value
-                                    options={{ size: 'xs', font: 'mono' }}
-                                  >
-                                    {scope.hasValue ? previewValue(scope.value) : scope.kind}
-                                  </Text>
-                                  <Show when={props.onViewInGraph && isInGraph(scope.kind)}>
-                                    <button
-                                      type="button"
-                                      data-solid-ownership-view-graph
-                                      aria-label="View in graph"
-                                      onClick={() => props.onViewInGraph?.(scope.node)}
-                                    >
-                                      <EyeIcon title="View in graph" />
-                                    </button>
+                                note={
+                                  <Show when={change()}>
+                                    {(last) => (
+                                      <span data-solid-ownership-was>
+                                        {`${last().prev !== undefined ? `was ${last().prev} · ` : 'changed '}${formatAgo(
+                                          performance.now() - last().at,
+                                        )} ago`}
+                                      </span>
+                                    )}
                                   </Show>
-                                </div>
-                              )}
-                            </For>
-                          </div>
-                          <Text data-solid-ownership-note options={{ size: 'xs' }}>
-                            Memos and effects created inside this component, folded into it by
-                            component mode.
-                          </Text>
-                        </div>
-                      </Show>
-
-                      <div data-solid-ownership-detail-block>
-                        <Text options={{ size: 'xs', weight: 'semibold' }}>
-                          {`Children (${node().children.length})`}
-                        </Text>
-                        <div data-solid-ownership-chips>
-                          <For
-                            each={node().children}
-                            fallback={<Text options={{ size: 'xs' }}>Nothing below this one.</Text>}
-                          >
-                            {(id) => (
-                              <Show when={byId().get(id)}>
-                                {(child) => (
-                                  <button
-                                    type="button"
-                                    data-solid-ownership-chip
-                                    onClick={() => setSelected(id)}
-                                  >
-                                    <span data-solid-ownership-kind={child().kind} />
-                                    <Text options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
-                                      {child().name}
-                                    </Text>
-                                  </button>
-                                )}
+                                }
+                              />
+                            </dd>
+                          </>
+                        );
+                      }}
+                    </For>
+                    <For each={memos()}>
+                      {(scope) => (
+                        <>
+                          <dt>
+                            <KindChip kind="memo">memo</KindChip>
+                            {scope.name}
+                          </dt>
+                          <dd>
+                            <ValueCell
+                              value={scope.value}
+                              label={scope.name}
+                              node={scope.node}
+                              onViewInGraph={props.onViewInGraph}
+                            />
+                          </dd>
+                        </>
+                      )}
+                    </For>
+                  </dl>
+                  <Show
+                    when={
+                      propValues().length +
+                        node().signals.length +
+                        memos().length +
+                        (node().hasValue && node().kind !== 'component' ? 1 : 0) ===
+                      0
+                    }
+                  >
+                    <div data-solid-ownership-empty>
+                      {node().kind === 'component'
+                        ? 'No props, signals or memos.'
+                        : 'This owner holds nothing.'}
+                    </div>
+                  </Show>
+
+                  <Show when={otherScopes().length > 0}>
+                    <div data-solid-ownership-sect>Scopes</div>
+                    <dl data-solid-ownership-kv>
+                      <For each={otherScopes()}>
+                        {(scope) => (
+                          <>
+                            <dt>
+                              <KindChip kind="other">{scope.kind}</KindChip>
+                              {scope.name}
+                            </dt>
+                            <dd>
+                              <Show when={scope.hasValue}>
+                                <ValueCell
+                                  value={scope.value}
+                                  label={scope.name}
+                                  node={isInGraph(scope.kind) ? scope.node : undefined}
+                                  onViewInGraph={props.onViewInGraph}
+                                />
                               </Show>
+                            </dd>
+                          </>
+                        )}
+                      </For>
+                    </dl>
+                  </Show>
+
+                  <div data-solid-ownership-buttons>
+                    <Show when={node().location}>
+                      {(location) => (
+                        <HealthButton primary onClick={() => openInEditor(location())}>
+                          <svg
+                            viewBox="0 0 24 24"
+                            width="14"
+                            height="14"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.6"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            aria-hidden="true"
+                          >
+                            <path d="M14 4h6v6M20 4l-9 9M18 14v5H5V6h5" />
+                          </svg>
+                          {`Open ${shortLocation(location())}${lineOf(location())}`}
+                        </HealthButton>
+                      )}
+                    </Show>
+                    <Show when={props.onShowActivity}>
+                      <HealthButton
+                        onClick={() => props.onShowActivity?.(node().owner, plainName(node()))}
+                      >
+                        Activity for this owner
+                      </HealthButton>
+                    </Show>
+                    <Show when={props.onViewInGraph && isInGraph(node().kind)}>
+                      <HealthButton onClick={() => props.onViewInGraph?.(node().owner)}>
+                        View in graph
+                      </HealthButton>
+                    </Show>
+                    <CopyReportButton
+                      label={`this ${node().kind}`}
+                      text="Copy report"
+                      report={() =>
+                        ownerReport({
+                          node: node(),
+                          ancestry: ancestry(),
+                          nodes: byId(),
+                          route: pageRoute(),
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div data-solid-ownership-sect>
+                    <span>Ancestry</span>
+                    <span>{ancestry().length}</span>
+                  </div>
+                  <div data-solid-ownership-stack>
+                    <For each={ancestry()}>
+                      {(frame, index) => (
+                        <button
+                          type="button"
+                          data-solid-ownership-frame
+                          data-current={index() === 0 ? '' : undefined}
+                          onClick={() => setSelected(frame.id)}
+                        >
+                          <span data-solid-ownership-frame-name>{titleOf(frame)}</span>
+                          <Show when={frame.location}>
+                            {(location) => (
+                              <span data-solid-ownership-frame-location>
+                                {shortLocation(location()) + lineOf(location())}
+                              </span>
                             )}
-                          </For>
-                        </div>
-                      </div>
-
-                      <div data-solid-ownership-detail-block>
-                        <Text options={{ size: 'xs', weight: 'semibold' }}>
-                          {`Ancestry (${ancestry().length})`}
-                        </Text>
-                        <div data-solid-ownership-stack>
-                          <For each={ancestry()}>
-                            {(frame, index) => (
-                              <button
-                                type="button"
-                                data-solid-ownership-frame
-                                data-current={index() === 0 ? '' : undefined}
-                                onClick={() => setSelected(frame.id)}
-                              >
-                                <span data-solid-ownership-frame-index>{`${index()}`}</span>
-                                <span data-solid-ownership-kind={frame.kind} />
-                                <Text
-                                  data-solid-ownership-frame-name
-                                  options={{ size: 'xs', weight: 'semibold', font: 'mono' }}
-                                >
-                                  {frame.name}
-                                </Text>
-                                <Show when={frame.location}>
-                                  {(location) => (
-                                    <Text
-                                      data-solid-ownership-frame-location
-                                      options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}
-                                    >
-                                      {location()}
-                                    </Text>
-                                  )}
-                                </Show>
-                              </button>
-                            )}
-                          </For>
-                        </div>
-                        <Text data-solid-ownership-note options={{ size: 'xs' }}>
-                          The owners this one was created under, nearest first.
-                        </Text>
-                      </div>
-                    </div>
-                  </aside>
-                )}
-              </Show>
-            </Show>
-          </div>
+                          </Show>
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                </aside>
+              );
+            }}
+          </Show>
         </div>
       </div>
     </Show>
   );
 }
+
+/** `:41` from `src/OrderTable.tsx:41:7`, or nothing when the location has no line. */
+function lineOf(location: string): string {
+  const parts = location.split(':');
+  const last = parts[parts.length - 1]!;
+  if (parts.length > 2 && /^\d+$/.test(last) && /^\d+$/.test(parts[parts.length - 2]!)) {
+    return `:${parts[parts.length - 2]}`;
+  }
+  if (parts.length === 2 && /^\d+$/.test(last)) return `:${last}`;
+  return '';
+}
diff --git a/src/dev-toolbar/ownership/registry.ts b/src/dev-toolbar/ownership/registry.ts
index ad2c76c..ddaa102 100644
--- a/src/dev-toolbar/ownership/registry.ts
+++ b/src/dev-toolbar/ownership/registry.ts
@@ -1,5 +1,6 @@
 import { DEV } from 'solid-js';
 import { listenToDevHooks } from '../dev-hooks.js';
+import { isSolidBuiltin } from './builtins.js';
 import { buildOwnershipTree, EMPTY_TREE, type OwnershipTree, type RawNode } from './tree.js';
 
 let nextId = 1;
@@ -157,6 +158,8 @@ function rootOf(owner: RawNode): RawNode {
 
 export interface SnapshotOptions {
   componentsOnly?: boolean;
+  /** Fold the components Solid ships into their parents. */
+  hideBuiltins?: boolean;
   includeDisposed?: boolean;
 }
 
@@ -189,5 +192,7 @@ export function snapshotOwnershipTree(options?: SnapshotOptions): OwnershipTree
     isIncluded,
     componentsOnly: options?.componentsOnly ?? true,
     includeDisposed: options?.includeDisposed,
+    hideBuiltins: options?.hideBuiltins ?? options?.componentsOnly ?? true,
+    isBuiltin: isSolidBuiltin,
   });
 }
diff --git a/src/dev-toolbar/ownership/runs.test.ts b/src/dev-toolbar/ownership/runs.test.ts
new file mode 100644
index 0000000..dce926d
--- /dev/null
+++ b/src/dev-toolbar/ownership/runs.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { groupRuns, type RunItem } from './runs.js';
+
+function items(names: string, unfoldable: string[] = []): RunItem[] {
+  return [...names].map((name, index) => ({
+    id: `${index}`,
+    name,
+    foldable: !unfoldable.includes(`${index}`),
+  }));
+}
+
+describe('groupRuns', () => {
+  it('folds the rows after the first of a run of the same name', () => {
+    expect(groupRuns(items('aaaa'))).toEqual([
+      { kind: 'item', id: '0' },
+      { kind: 'run', ids: ['1', '2', '3'] },
+    ]);
+  });
+
+  it('leaves short runs and mixed names alone', () => {
+    expect(groupRuns(items('aab'))).toEqual([
+      { kind: 'item', id: '0' },
+      { kind: 'item', id: '1' },
+      { kind: 'item', id: '2' },
+    ]);
+  });
+
+  it('never folds a row that must stay, and splits the run around it', () => {
+    expect(groupRuns(items('aaaaaa', ['2']))).toEqual([
+      { kind: 'item', id: '0' },
+      { kind: 'item', id: '1' },
+      { kind: 'item', id: '2' },
+      { kind: 'item', id: '3' },
+      { kind: 'run', ids: ['4', '5'] },
+    ]);
+  });
+
+  it('starts a new group at each name', () => {
+    expect(groupRuns(items('aaabbb'))).toEqual([
+      { kind: 'item', id: '0' },
+      { kind: 'run', ids: ['1', '2'] },
+      { kind: 'item', id: '3' },
+      { kind: 'run', ids: ['4', '5'] },
+    ]);
+  });
+});
diff --git a/src/dev-toolbar/ownership/runs.ts b/src/dev-toolbar/ownership/runs.ts
new file mode 100644
index 0000000..7b89b00
--- /dev/null
+++ b/src/dev-toolbar/ownership/runs.ts
@@ -0,0 +1,44 @@
+/** A sibling row the run finder looks at. */
+export interface RunItem {
+  id: string;
+  name: string;
+  /**
+   * False for a row that must stay on screen: one that is open with children
+   * below it, or one that is selected.
+   */
+  foldable: boolean;
+}
+
+export type RunSegment = { kind: 'item'; id: string } | { kind: 'run'; ids: string[] };
+
+/** The fewest rows a collapsed run may hold. */
+export const MIN_RUN = 2;
+
+/**
+ * Groups consecutive siblings that share a name. The first row of a group
+ * stays, and the rest fold into one run when at least `MIN_RUN` rows remain.
+ */
+export function groupRuns(items: RunItem[]): RunSegment[] {
+  const out: RunSegment[] = [];
+  let index = 0;
+  while (index < items.length) {
+    const first = items[index]!;
+    // Step 1: find how far the group goes.
+    let end = index + 1;
+    if (first.foldable) {
+      while (end < items.length && items[end]!.foldable && items[end]!.name === first.name) end++;
+    }
+
+    // Step 2: keep the first row, and fold the rest when there are enough.
+    out.push({ kind: 'item', id: first.id });
+    if (end - index - 1 >= MIN_RUN) {
+      const ids: string[] = [];
+      for (let at = index + 1; at < end; at++) ids.push(items[at]!.id);
+      out.push({ kind: 'run', ids });
+    } else {
+      for (let at = index + 1; at < end; at++) out.push({ kind: 'item', id: items[at]!.id });
+    }
+    index = end;
+  }
+  return out;
+}
diff --git a/src/dev-toolbar/ownership/styles.css b/src/dev-toolbar/ownership/styles.css
index 4f0ed28..cc02073 100644
--- a/src/dev-toolbar/ownership/styles.css
+++ b/src/dev-toolbar/ownership/styles.css
@@ -1,136 +1,122 @@
-[data-solid-ownership-viewer] {
-  --start-dt-kind-component: oklch(0.68 0.13 245);
-  --start-dt-kind-root: oklch(0.72 0.12 195);
-  --start-dt-kind-memo: oklch(0.7 0.14 300);
-  --start-dt-kind-effect: oklch(0.72 0.15 150);
-  --start-dt-kind-render-effect: oklch(0.78 0.13 80);
-  --start-dt-kind-tracked-effect: oklch(0.72 0.12 210);
-  --start-dt-kind-scope: oklch(0.6 0.02 265);
-
-  color: var(--start-dt-text);
+/* The Structure view's tree and detail, set to the prototype. */
 
+[data-solid-ownership-viewer] {
   display: flex;
-  flex-direction: column;
-
-  height: 100%;
+  flex: 1;
   min-height: 0;
-}
+  min-width: 0;
+  overflow: hidden;
 
-[data-solid-ownership-nav] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  color: var(--start-dt-text);
+  font:
+    13px/1.45 system-ui,
+    -apple-system,
+    sans-serif;
+}
 
-  gap: 0.5rem;
+/* the tree pane */
 
-  padding: 0.5rem 0.75rem;
+[data-solid-ownership-tree] {
+  flex: 1;
+  min-width: 240px;
+  overflow: auto;
+  padding: 8px;
 
-  border-bottom: var(--start-dt-border-soft) 1px solid;
+  font: 12.5px/1 var(--start-dt-mono);
 }
 
-[data-solid-ownership-nav-actions] {
+[data-solid-ownership-filters] {
   display: flex;
-  flex-direction: row;
   align-items: center;
+  gap: 6px;
+  padding: 0 2px 8px;
 
-  gap: 0.375rem;
-
-  margin-left: auto;
-}
-
-[data-solid-ownership-count] {
-  color: var(--start-dt-text-muted);
-  white-space: nowrap;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
 }
 
 [data-solid-ownership-search] {
   flex: 1;
   min-width: 6rem;
-  max-width: 18rem;
-
-  padding: 0.25rem 0.5rem;
+  max-width: 14rem;
+  height: 24px;
+  padding: 0 8px;
 
-  border-radius: 0.5rem;
-  border: var(--start-dt-border) 1px solid;
-  background: var(--start-dt-surface);
+  border: 1px solid var(--start-dt-line);
+  border-radius: 7px;
+  background: var(--start-dt-well);
   color: var(--start-dt-text);
 
-  font-family: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font: inherit;
+  font-size: 11.5px;
+}
+
+[data-solid-ownership-search]::placeholder {
+  color: var(--start-dt-faint);
 }
 
 [data-solid-ownership-search]:focus {
   outline: none;
-  border-color: var(--start-dt-accent);
+  border-color: var(--start-dt-line-2);
 }
 
-[data-solid-ownership-modes] {
-  display: flex;
-
-  border-radius: 9999px;
-  border: var(--start-dt-border) 1px solid;
-  overflow: hidden;
+[data-solid-ownership-count] {
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
+  white-space: nowrap;
 }
 
-[data-solid-ownership-mode] {
-  padding: 0.1875rem 0.625rem;
+[data-solid-ownership-tool] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
 
-  border: none;
-  background: var(--start-dt-surface);
+  border: 0;
+  border-radius: 7px;
+  background: none;
   color: var(--start-dt-text-muted);
 
   cursor: pointer;
 }
 
-[data-solid-ownership-mode]:hover {
-  background: var(--start-dt-surface-hover);
-}
-
-[data-solid-ownership-mode][data-active] {
-  background: var(--start-dt-accent-soft);
-  color: var(--start-dt-accent);
-}
-
-[data-solid-ownership-body] {
-  display: flex;
-  flex-direction: row;
-
-  flex: 1;
-  min-height: 0;
+[data-solid-ownership-tool]:hover {
+  background: oklch(1 0 0 / 0.06);
+  color: var(--start-dt-text);
 }
 
-[data-solid-ownership-rows] {
-  display: flex;
-  flex-direction: column;
-
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-
-  padding: 0.375rem 0.25rem;
-
-  overflow: auto;
-}
+/* rows */
 
 [data-solid-ownership-row] {
   display: flex;
-  flex-direction: row;
   align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding-right: 8px;
 
-  gap: 0.125rem;
-
-  border-radius: 0.375rem;
+  border-radius: 6px;
+  color: var(--start-dt-text-muted);
 
-  min-width: 0;
+  white-space: nowrap;
+  cursor: pointer;
 }
 
 [data-solid-ownership-row]:hover {
-  background: var(--start-dt-surface-hover);
+  background: oklch(1 0 0 / 0.04);
+}
+
+[data-solid-ownership-row]:focus-visible {
+  outline: 1px solid var(--start-dt-line-2);
+  outline-offset: -1px;
 }
 
 [data-solid-ownership-row][data-selected] {
-  background: var(--start-dt-surface-active);
+  background: var(--start-dt-raise-2);
+  color: var(--start-dt-text);
 }
 
 [data-solid-ownership-row][data-fresh] {
@@ -139,7 +125,7 @@
 
 @keyframes solid-ownership-pulse {
   0% {
-    background: var(--start-dt-accent-soft);
+    background: var(--start-dt-solid-soft);
   }
   100% {
     background: transparent;
@@ -147,483 +133,300 @@
 }
 
 [data-solid-ownership-chevron] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
+  width: 12px;
+  flex: none;
 
-  /* The browser pads buttons, which leaves the arrow no room in a 1rem box. */
-  padding: 0;
-
-  border: none;
-  background: none;
-  color: var(--start-dt-text-muted);
-  cursor: pointer;
-}
-
-[data-solid-ownership-chevron]::before {
-  content: '';
-
-  box-sizing: content-box;
-  width: 0.3125rem;
-  height: 0.3125rem;
-  flex-shrink: 0;
-
-  border-right: 1.5px currentColor solid;
-  border-bottom: 1.5px currentColor solid;
-
-  transform: rotate(-45deg);
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--start-dt-faint);
+  font-size: 9px;
+  text-align: center;
 }
 
-[data-solid-ownership-chevron][data-leaf] {
-  cursor: default;
+[data-solid-ownership-label] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-[data-solid-ownership-chevron][data-leaf]::before {
-  content: none;
+[data-solid-ownership-name] {
+  color: var(--start-dt-text);
 }
 
-[data-solid-ownership-chevron][data-expanded]::before {
-  transform: rotate(45deg);
+/* names of scopes between components read as the muted text around them */
+[data-solid-ownership-label]:not([data-kind='component']) [data-solid-ownership-name] {
+  color: inherit;
 }
 
-[data-solid-ownership-label] {
+[data-solid-ownership-meta] {
   display: flex;
-  flex-direction: row;
   align-items: center;
+  gap: 5px;
+  margin-left: auto;
 
-  gap: 0.375rem;
-
-  flex: 1;
-  min-width: 0;
-
-  padding: 0.1875rem 0.25rem;
-
-  border: none;
-  background: none;
-  color: inherit;
-
-  text-align: left;
-  cursor: pointer;
-}
-
-[data-solid-ownership-name] {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
 }
 
-[data-solid-ownership-kind] {
-  width: 0.5rem;
-  height: 0.5rem;
-
-  flex-shrink: 0;
-
-  border-radius: 9999px;
-  background: var(--start-dt-kind-scope);
+[data-solid-ownership-meta][data-tone='amber'] {
+  color: var(--start-dt-amber);
 }
 
-[data-solid-ownership-kind='component'] {
-  background: var(--start-dt-kind-component);
+[data-solid-ownership-meta][data-tone='red'] {
+  color: var(--start-dt-red);
 }
 
-[data-solid-ownership-kind='root'] {
-  background: var(--start-dt-kind-root);
-}
+[data-solid-ownership-heat] {
+  width: 6px;
+  height: 6px;
 
-[data-solid-ownership-kind='memo'] {
-  background: var(--start-dt-kind-memo);
+  border-radius: 50%;
 }
 
-[data-solid-ownership-kind='effect'] {
-  background: var(--start-dt-kind-effect);
+[data-solid-ownership-heat='red'] {
+  background: var(--start-dt-red);
 }
 
-[data-solid-ownership-kind='render-effect'] {
-  background: var(--start-dt-kind-render-effect);
+[data-solid-ownership-heat='amber'] {
+  background: var(--start-dt-amber);
 }
 
-[data-solid-ownership-kind='tracked-effect'] {
-  background: var(--start-dt-kind-tracked-effect);
-}
+/* the detail pane */
 
 [data-solid-ownership-detail] {
   position: relative;
-  display: flex;
-  flex-direction: column;
-
-  /* Keeps the tree usable when the window shrinks below a saved width. */
-  max-width: calc(100% - 240px);
-  flex-shrink: 0;
-  min-height: 0;
-
-  overflow-y: auto;
-
-  border-left: var(--start-dt-border-soft) 1px solid;
-}
-
-[data-solid-ownership-detail-content] {
-  display: flex;
-  flex-direction: column;
-
-  gap: 0.5rem;
+  flex: none;
+  overflow: auto;
+  padding: 14px 18px;
 
-  padding: 0.625rem 0.75rem;
+  border-left: 1px solid var(--start-dt-line);
 }
 
 [data-solid-ownership-detail-head] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 0.375rem;
+  margin: 0;
 
-  min-width: 0;
+  font-family: var(--start-dt-mono);
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.45;
 }
 
-[data-solid-ownership-location] {
-  align-self: flex-start;
-
-  padding: 0.125rem 0.375rem;
+[data-solid-ownership-sub] {
+  margin: 2px 0 14px;
 
-  border: var(--start-dt-border) 1px solid;
-  border-radius: 0.375rem;
-  background: var(--start-dt-surface);
-  color: var(--start-dt-accent);
-
-  cursor: pointer;
-
-  max-width: 100%;
-  overflow: hidden;
+  color: var(--start-dt-faint);
+  font-size: 12px;
 }
 
-[data-solid-ownership-location]:hover {
-  background: var(--start-dt-surface-hover);
-}
-
-[data-solid-ownership-detail-block] {
+[data-solid-ownership-sect] {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  margin: 14px 0 8px;
 
-  gap: 0.25rem;
-
-  padding-top: 0.5rem;
-
-  border-top: var(--start-dt-border-soft) 1px solid;
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-[data-solid-ownership-note] {
-  color: var(--start-dt-text-muted);
+[data-solid-ownership-kv] {
+  display: grid;
+  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
+  align-items: center;
+  gap: 6px 14px;
+  margin: 0;
+
+  font: 12px var(--start-dt-mono);
 }
 
-[data-solid-ownership-signals] {
+[data-solid-ownership-kv] dt {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 6px;
 
-  gap: 0.125rem;
+  color: var(--start-dt-text-muted);
+  overflow-wrap: anywhere;
 }
 
-[data-solid-ownership-signal-block] {
+[data-solid-ownership-kv] dd {
   display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-[data-solid-ownership-signal-chevron] {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
-
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 0 6px;
+  margin: 0;
 
-  border: none;
-  background: none;
-  padding: 0;
-  color: var(--start-dt-text-muted);
-  cursor: pointer;
+  min-width: 0;
 }
 
-[data-solid-ownership-signal-chevron]::before {
-  content: '';
+[data-solid-ownership-kind-chip] {
+  flex: none;
+  padding: 0 5px;
 
-  width: 0.3125rem;
-  height: 0.3125rem;
-
-  border-right: 1.5px currentColor solid;
-  border-bottom: 1.5px currentColor solid;
+  border-radius: 4px;
+  background: oklch(1 0 0 / 0.07);
+  color: var(--start-dt-text-muted);
 
-  transform: rotate(-45deg);
-  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 9.5px;
+  line-height: 15px;
 }
 
-[data-solid-ownership-signal-chevron][data-expanded]::before {
-  transform: rotate(45deg);
+[data-solid-ownership-kind-chip='signal'] {
+  background: var(--start-dt-solid-soft);
+  color: var(--start-dt-solid);
 }
 
-[data-solid-ownership-signal-tree] {
-  padding: 0.25rem 0.5rem;
-  margin-top: 0.25rem;
-  margin-left: 0.875rem;
-  border-radius: 0.375rem;
-  border: 1px solid var(--start-dt-border-soft);
-  background: var(--start-dt-bg);
-  max-height: 14rem;
-  overflow: auto;
+[data-solid-ownership-kind-chip='memo'] {
+  background: var(--start-dt-violet-soft);
+  color: var(--start-dt-violet);
 }
 
-[data-solid-ownership-signal] {
-  display: grid;
-  grid-template-columns: minmax(4rem, 40%) 1fr auto;
-  align-items: baseline;
-
-  gap: 0.5rem;
+[data-solid-ownership-value] {
+  padding: 2px 6px;
+  margin-left: -7px;
 
-  padding: 0.125rem 0.25rem;
-
-  border-radius: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  overflow-wrap: anywhere;
 }
 
-[data-solid-ownership-signal]:hover {
-  background: var(--start-dt-surface-hover);
+[data-solid-ownership-value]:not([data-editable]) {
+  margin-left: 0;
+  padding: 2px 0;
 }
 
-/* The action stays out of the way until the row is pointed at or focused. */
-[data-solid-ownership-signal-actions] {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-left: auto;
+[data-solid-ownership-value][data-editable] {
+  cursor: text;
 }
 
-[data-solid-ownership-edit-signal] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 0.125rem;
-
-  border: none;
-  border-radius: 0.25rem;
-  background: none;
-  color: var(--start-dt-text-muted);
+[data-solid-ownership-value][data-editable]:hover {
+  border-color: var(--start-dt-line-2);
+  background: oklch(0 0 0 / 0.25);
+}
 
-  cursor: pointer;
-  opacity: 0;
-  transition:
-    opacity 150ms ease-out,
-    color 150ms ease-out;
+[data-solid-ownership-value][data-tone='str'] {
+  color: var(--start-dt-green);
 }
 
-[data-solid-ownership-signal]:hover [data-solid-ownership-edit-signal],
-[data-solid-ownership-edit-signal]:focus-visible {
-  opacity: 1;
+[data-solid-ownership-value][data-tone='num'] {
+  color: var(--start-dt-amber);
 }
 
-[data-solid-ownership-edit-signal]:hover {
-  color: var(--start-dt-accent);
-  background: var(--start-dt-accent-soft);
+[data-solid-ownership-value][data-tone='kw'] {
+  color: var(--start-dt-violet);
 }
 
-[data-solid-ownership-signal] [data-solid-ownership-edit-signal] svg {
-  width: 0.875rem;
-  height: 0.875rem;
+[data-solid-ownership-edit-failed] {
+  border-color: var(--start-dt-red);
 }
 
 [data-solid-ownership-signal-input] {
-  flex: 1;
-  min-width: 3.5rem;
-  max-width: 12rem;
-  padding: 0.0625rem 0.25rem;
-  font-family: inherit;
-  font-size: 0.6875rem;
-  line-height: 1rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--start-dt-accent);
-  background: var(--start-dt-bg);
+  width: 100%;
+  min-width: 0;
+  padding: 2px 6px;
+  margin-left: -7px;
+
+  border: 1px solid var(--start-dt-solid);
+  border-radius: 5px;
+  background: oklch(0 0 0 / 0.25);
   color: var(--start-dt-text);
-  outline: none;
+
+  font: inherit;
 }
 
-[data-solid-ownership-toggle-btn] {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.0625rem 0.25rem;
-  border: 1px solid var(--start-dt-border-soft, transparent);
-  border-radius: 0.25rem;
-  background: var(--start-dt-surface, transparent);
-  color: var(--start-dt-text);
-  cursor: pointer;
-  transition: border-color 150ms ease-out;
+[data-solid-ownership-signal-input]:focus {
+  outline: none;
 }
 
-[data-solid-ownership-toggle-btn]:hover {
-  border-color: var(--start-dt-accent);
+[data-solid-ownership-was] {
+  color: var(--start-dt-faint);
+  font-size: 11px;
 }
 
 [data-solid-ownership-view-graph] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 0.125rem;
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
 
-  border: none;
-  border-radius: 0.25rem;
+  border: 0;
+  border-radius: 5px;
   background: none;
-  color: var(--start-dt-accent);
+  color: var(--start-dt-faint);
 
-  cursor: pointer;
   opacity: 0;
+  cursor: pointer;
 }
 
-[data-solid-ownership-signal]:hover [data-solid-ownership-view-graph],
+[data-solid-ownership-view-graph] svg {
+  width: 14px;
+  height: 14px;
+}
+
+[data-solid-ownership-kv] dd:hover [data-solid-ownership-view-graph],
 [data-solid-ownership-view-graph]:focus-visible {
   opacity: 1;
 }
 
 [data-solid-ownership-view-graph]:hover {
-  background: var(--start-dt-accent-soft);
+  background: oklch(1 0 0 / 0.06);
+  color: var(--start-dt-text);
 }
 
-/* The selected owner's own action sits in the heading, so it is always shown. */
-[data-solid-ownership-detail-head] [data-solid-ownership-view-graph] {
-  margin-left: auto;
-  opacity: 1;
+[data-solid-ownership-inspector] {
+  flex-basis: 100%;
+  margin-top: 4px;
 }
 
-/* The toolbar sizes every svg as a large icon. Row actions need a small one. */
-[data-solid-ownership-signal] [data-solid-ownership-view-graph] svg,
-[data-solid-ownership-detail-head] [data-solid-ownership-view-graph] svg {
-  width: 0.875rem;
-  height: 0.875rem;
+[data-solid-ownership-empty] {
+  color: var(--start-dt-faint);
+  font-size: 12px;
 }
 
-[data-solid-ownership-scope-name],
-[data-solid-ownership-signal-name] {
-  display: inline-flex;
+[data-solid-ownership-buttons] {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-
-  gap: 0.375rem;
-
-  min-width: 0;
-  overflow: hidden;
-}
-
-[data-solid-ownership-scope-name] > [data-solid-text-size],
-[data-solid-ownership-signal-name] > [data-solid-text-size] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[data-solid-ownership-signal] > [data-solid-text-size]:first-child,
-[data-solid-ownership-signal] > [data-solid-ownership-signal-name] {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 6px;
+  margin-top: 16px;
 }
 
-[data-solid-ownership-signal-value] {
-  color: var(--start-dt-text-muted);
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+/* ancestry */
 
 [data-solid-ownership-stack] {
   display: flex;
   flex-direction: column;
-
-  gap: 0.125rem;
 }
 
 [data-solid-ownership-frame] {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 0.375rem;
-
-  padding: 0.1875rem 0.375rem;
+  align-items: baseline;
+  gap: 10px;
+  height: 26px;
+  padding: 0 6px;
 
-  border: none;
-  border-radius: 0.375rem;
+  border: 0;
+  border-radius: 6px;
   background: none;
-  color: var(--start-dt-text);
+  color: var(--start-dt-text-muted);
 
+  font: 12px var(--start-dt-mono);
   text-align: left;
+  white-space: nowrap;
   cursor: pointer;
-
-  min-width: 0;
+  align-items: center;
 }
 
 [data-solid-ownership-frame]:hover {
-  background: var(--start-dt-surface-hover);
+  background: oklch(1 0 0 / 0.04);
 }
 
 [data-solid-ownership-frame][data-current] {
-  background: var(--start-dt-surface-active);
-}
-
-[data-solid-ownership-frame-index] {
-  width: 1rem;
-  flex-shrink: 0;
-
-  color: var(--start-dt-text-muted);
-
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.625rem;
-  text-align: right;
-}
-
-[data-solid-ownership-frame-name] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--start-dt-text);
 }
 
 [data-solid-ownership-frame-location] {
   margin-left: auto;
 
-  color: var(--start-dt-text-muted);
-
-  direction: rtl;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 55%;
-}
-
-[data-solid-ownership-chips] {
-  display: flex;
-  flex-wrap: wrap;
-
-  gap: 0.25rem;
-}
-
-[data-solid-ownership-chip] {
-  display: inline-flex;
-  align-items: center;
-
-  gap: 0.25rem;
-
-  padding: 0.125rem 0.5rem;
-
-  border-radius: 9999px;
-  border: var(--start-dt-border) 1px solid;
-  background: var(--start-dt-surface);
-  color: var(--start-dt-text);
-
-  cursor: pointer;
-}
-
-button[data-solid-ownership-chip]:hover {
-  background: var(--start-dt-surface-hover);
-}
-
-[data-solid-ownership-edit-failed] {
-  text-decoration: wavy underline var(--start-dt-danger);
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
 }
diff --git a/src/dev-toolbar/ownership/tree.test.ts b/src/dev-toolbar/ownership/tree.test.ts
index 356ce3b..3a5cf23 100644
--- a/src/dev-toolbar/ownership/tree.test.ts
+++ b/src/dev-toolbar/ownership/tree.test.ts
@@ -287,3 +287,17 @@ describe('ancestorsOf', () => {
     ]);
   });
 });
+
+describe('hideBuiltins', () => {
+  it('lifts the children of a built-in component to its parent', () => {
+    const inner = owner({ component: 'Row' });
+    const builtin = owner({ component: 'For', children: [inner] });
+    const app = owner({ component: 'App', children: [builtin] });
+    const tree = build([app], {
+      hideBuiltins: true,
+      isBuiltin: (item) => item._component?.name === 'For',
+    });
+    expect(tree.nodes.map((node) => node.name)).toEqual(['<App>', '<Row>']);
+    expect(tree.nodes[1]!.parentId).toBe(tree.nodes[0]!.id);
+  });
+});
diff --git a/src/dev-toolbar/ownership/tree.ts b/src/dev-toolbar/ownership/tree.ts
index 08d5e84..ff63d2a 100644
--- a/src/dev-toolbar/ownership/tree.ts
+++ b/src/dev-toolbar/ownership/tree.ts
@@ -1,3 +1,5 @@
+import { untrack } from 'solid-js';
+
 /** Raw owner or signal from the runtime. Only the fields the tree needs are read. */
 export type RawNode = Record<string, any>;
 
@@ -162,6 +164,38 @@ function propNames(owner: RawNode): string[] | undefined {
   }
 }
 
+export interface PropValue {
+  name: string;
+  value: unknown;
+}
+
+/**
+ * Reads the props of a component. They are getters, so a read can run app code
+ * and throw. Each one is read on its own, outside any tracking scope, and a
+ * getter that throws shows its error as the value.
+ */
+export function readPropValues(owner: RawNode): PropValue[] {
+  const props = owner._component?.props;
+  if (!props || typeof props !== 'object') return [];
+  let names: string[];
+  try {
+    names = Object.keys(props);
+  } catch {
+    return [];
+  }
+  const out: PropValue[] = [];
+  for (const name of names) {
+    let value: unknown;
+    try {
+      value = untrack(() => props[name]);
+    } catch (error) {
+      value = error;
+    }
+    out.push({ name, value });
+  }
+  return out;
+}
+
 /** The runtime clock of a node's last write. Zero for owners that hold no value. */
 function timeOf(node: RawNode): number {
   return typeof node._time === 'number' ? node._time : 0;
@@ -188,6 +222,10 @@ export interface BuildOptions {
   componentsOnly: boolean;
   /** Keep owners the runtime already disposed. */
   includeDisposed?: boolean;
+  /** Walk through the components Solid ships, so their children join the parent. */
+  hideBuiltins?: boolean;
+  /** True for a component that comes from solid-js or @solidjs/web. */
+  isBuiltin?(owner: RawNode): boolean;
 }
 
 /**
@@ -269,6 +307,14 @@ export function buildOwnershipTree(roots: RawNode[], options: BuildOptions): Own
       return;
     }
 
+    // A built-in such as For or Show is nobody's concern. Its children join the
+    // component above it.
+    if (options.hideBuiltins && isComponent(owner) && options.isBuiltin?.(owner)) {
+      if (host) collectSignals(owner, host);
+      for (const child of options.children(owner)) walk(child, host, depth, false);
+      return;
+    }
+
     const shown = !options.componentsOnly || isComponent(owner);
 
     if (shown) {
diff --git a/src/dev-toolbar/palette/index.tsx b/src/dev-toolbar/palette/index.tsx
new file mode 100644
index 0000000..75988ff
--- /dev/null
+++ b/src/dev-toolbar/palette/index.tsx
@@ -0,0 +1,229 @@
+import type { JSX } from '@solidjs/web';
+import { createMemo, createSignal, For, onSettled, Show } from 'solid-js';
+import { snapshotOwnershipTree, startOwnershipTracking } from '../ownership/registry.js';
+import { formatValue } from '../reactivity/format.js';
+import { snapshotReactivityGraph, startReactivityTracking } from '../reactivity/registry.js';
+import type { ServerFunctionInstance } from '../functions/index.js';
+import type { TimelineEntry } from '../timeline/tracker.js';
+import {
+  searchPalette,
+  type PaletteItem,
+  type PaletteMatch,
+  type PaletteTarget,
+} from './search.js';
+import './styles.css';
+
+export interface CommandPaletteProps {
+  entries: TimelineEntry[];
+  instances: Record<string, ServerFunctionInstance | undefined>;
+  onPick: (target: PaletteTarget) => void;
+  onClose: () => void;
+}
+
+/** How long ago a `performance.now()` time was, in words. */
+function ago(at: number): string {
+  const seconds = Math.max(0, Math.round((performance.now() - at) / 1000));
+  if (seconds < 5) return 'just now';
+  if (seconds < 60) return `${seconds}s ago`;
+  return `${Math.round(seconds / 60)}m ago`;
+}
+
+function shorten(text: string, max = 32): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+/** Everything the palette can jump to, read once when it opens. */
+function collectItems(props: CommandPaletteProps): PaletteItem[] {
+  const items: PaletteItem[] = [];
+
+  // Components come from the ownership tree, folded down to components.
+  for (const node of snapshotOwnershipTree({ componentsOnly: true }).nodes) {
+    if (node.kind !== 'component') continue;
+    items.push({
+      group: 'Components',
+      label: node.name,
+      detail: node.location ?? `${node.signals.length} signals`,
+      target: { kind: 'component', owner: node.owner },
+    });
+  }
+
+  // Signals and memos come from the reactive graph, with their current value.
+  for (const node of snapshotReactivityGraph().nodes) {
+    if (node.kind !== 'signal' && node.kind !== 'memo') continue;
+    const owner = node.ownerPath[node.ownerPath.length - 1];
+    const value = shorten(formatValue(node.value));
+    items.push({
+      group: node.kind === 'memo' ? 'Memos' : 'Signals',
+      label: node.name,
+      detail: owner ? `${value} · ${owner}` : value,
+      target: { kind: node.kind, node: node.raw },
+    });
+  }
+
+  // Actions, newest first as the timeline holds them.
+  for (const entry of props.entries) {
+    items.push({
+      group: 'Actions',
+      label: entry.label,
+      detail: ago(entry.at),
+      target: { kind: 'action', origin: entry.origin, id: entry.id },
+    });
+  }
+
+  // Server functions by name, with how many calls each made.
+  const calls = new Map<string, { instance: string; count: number }>();
+  for (const [instance, value] of Object.entries(props.instances)) {
+    if (!value) continue;
+    const name = String(value.request.meta?.name ?? value.request.id);
+    const known = calls.get(name);
+    if (known) known.count++;
+    else calls.set(name, { instance, count: 1 });
+  }
+  for (const [name, { instance, count }] of calls) {
+    items.push({
+      group: 'Server functions',
+      label: name,
+      detail: count === 1 ? '1 call' : `${count} calls`,
+      target: { kind: 'call', instance },
+    });
+  }
+  return items;
+}
+
+/** The label with its matched characters marked. */
+function Highlighted(props: { match: PaletteMatch }): JSX.Element {
+  const parts = createMemo(() => {
+    const marked = new Set(props.match.positions);
+    const result: { text: string; marked: boolean }[] = [];
+    for (const [index, char] of [...props.match.item.label].entries()) {
+      const last = result[result.length - 1];
+      const isMarked = marked.has(index);
+      if (last && last.marked === isMarked) last.text += char;
+      else result.push({ text: char, marked: isMarked });
+    }
+    return result;
+  });
+  return (
+    <code>
+      <For each={parts()}>{(part) => (part.marked ? <mark>{part.text}</mark> : part.text)}</For>
+    </code>
+  );
+}
+
+const KIND_CHIPS: Record<PaletteTarget['kind'], { text: string; kind: string }> = {
+  component: { text: '<>', kind: 'component' },
+  memo: { text: 'memo', kind: 'memo' },
+  signal: { text: 'signal', kind: 'signal' },
+  action: { text: 'A', kind: 'action' },
+  call: { text: 'ƒ', kind: 'call' },
+};
+
+/** ⌘K: jump to a component, signal, memo, action or server function by name. */
+export default function CommandPalette(props: CommandPaletteProps): JSX.Element {
+  const [query, setQuery] = createSignal('');
+  const [active, setActive] = createSignal(0);
+  const [items, setItems] = createSignal<PaletteItem[]>([]);
+  let input: HTMLInputElement | undefined;
+
+  // The registries only see nodes while something tracks them, so the palette
+  // tracks while it is open and reads once the trackers have walked the app.
+  onSettled(() => {
+    const stopOwnership = startOwnershipTracking();
+    const stopReactivity = startReactivityTracking();
+    const frame = requestAnimationFrame(() => setItems(collectItems(props)));
+    input?.focus();
+    return () => {
+      cancelAnimationFrame(frame);
+      stopOwnership();
+      stopReactivity();
+    };
+  });
+
+  const matches = createMemo(() => searchPalette(items(), query()));
+
+  function pick(match: PaletteMatch | undefined): void {
+    if (!match) return;
+    props.onPick(match.item.target);
+    props.onClose();
+  }
+
+  function onKeyDown(event: KeyboardEvent): void {
+    const count = matches().length;
+    if (event.key === 'ArrowDown') setActive((index) => (count ? (index + 1) % count : 0));
+    else if (event.key === 'ArrowUp')
+      setActive((index) => (count ? (index - 1 + count) % count : 0));
+    else if (event.key === 'Enter') pick(matches()[active()]);
+    else if (event.key === 'Escape') props.onClose();
+    else return;
+    event.preventDefault();
+  }
+
+  return (
+    <div
+      data-solid-palette-backdrop
+      onPointerDown={(event) => event.target === event.currentTarget && props.onClose()}
+    >
+      <div data-solid-palette role="dialog" aria-label="Find in the app" onKeyDown={onKeyDown}>
+        <label data-solid-palette-query>
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="11" cy="11" r="6" />
+            <path d="m20 20-4.5-4.5" />
+          </svg>
+          <input
+            ref={input}
+            type="text"
+            placeholder="Find signal, component, call"
+            aria-label="Find signal, component, call"
+            role="combobox"
+            aria-expanded="true"
+            aria-controls="solid-palette-results"
+            aria-activedescendant={matches().length ? `solid-palette-item-${active()}` : undefined}
+            value={query()}
+            onInput={(event) => {
+              setQuery(event.currentTarget.value);
+              setActive(0);
+            }}
+          />
+          <kbd>esc</kbd>
+        </label>
+        <div data-solid-palette-results id="solid-palette-results" role="listbox">
+          <Show
+            when={matches().length}
+            fallback={
+              <div data-solid-palette-empty>
+                {items().length ? 'No matches.' : 'Reading the app…'}
+              </div>
+            }
+          >
+            <For each={matches()}>
+              {(match, index) => {
+                const chip = KIND_CHIPS[match.item.target.kind];
+                const heading = () =>
+                  index() === 0 || matches()[index() - 1]!.item.group !== match.item.group;
+                return (
+                  <>
+                    <Show when={heading()}>
+                      <div data-solid-palette-group>{match.item.group}</div>
+                    </Show>
+                    <div
+                      id={`solid-palette-item-${index()}`}
+                      role="option"
+                      aria-selected={active() === index() ? 'true' : 'false'}
+                      data-solid-palette-item
+                      onPointerMove={() => setActive(index())}
+                      onClick={() => pick(match)}
+                    >
+                      <span data-solid-palette-kind={chip.kind}>{chip.text}</span>
+                      <Highlighted match={match} />
+                      <span data-solid-palette-detail>{match.item.detail}</span>
+                    </div>
+                  </>
+                );
+              }}
+            </For>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/dev-toolbar/palette/search.test.ts b/src/dev-toolbar/palette/search.test.ts
new file mode 100644
index 0000000..ab6a454
--- /dev/null
+++ b/src/dev-toolbar/palette/search.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { matchLabel, searchPalette, type PaletteItem } from './search.js';
+
+function item(label: string, group: PaletteItem['group'] = 'Memos'): PaletteItem {
+  return { group, label, detail: '', target: { kind: 'call', instance: label } };
+}
+
+describe('matchLabel', () => {
+  it('matches a substring and returns its positions', () => {
+    expect(matchLabel('revenueUsd', 'rev')).toEqual({ positions: [0, 1, 2], score: 150 });
+  });
+
+  it('matches a subsequence in order', () => {
+    expect(matchLabel('refundOrder', 'rfo')?.positions).toEqual([0, 2, 6]);
+  });
+
+  it('rejects letters out of order', () => {
+    expect(matchLabel('revenue', 'vnu')).toBeDefined();
+    expect(matchLabel('revenue', 'ver')).toBeUndefined();
+  });
+
+  it('ignores case', () => {
+    expect(matchLabel('OrderRow', 'orderrow')?.positions).toHaveLength(8);
+  });
+});
+
+describe('searchPalette', () => {
+  it('ranks a match at the start above one in the middle', () => {
+    const result = searchPalette([item('totalRevenue'), item('revenue')], 'rev');
+    expect(result.map((match) => match.item.label)).toEqual(['revenue', 'totalRevenue']);
+  });
+
+  it('lists groups in a fixed order and caps each group', () => {
+    const items = [
+      item('refund', 'Actions'),
+      item('revenue', 'Memos'),
+      item('r1', 'Signals'),
+      item('r2', 'Signals'),
+      item('r3', 'Signals'),
+    ];
+    const result = searchPalette(items, 'r', 2);
+    expect(result.map((match) => match.item.group)).toEqual([
+      'Memos',
+      'Signals',
+      'Signals',
+      'Actions',
+    ]);
+  });
+
+  it('returns everything for an empty query', () => {
+    expect(searchPalette([item('a'), item('b')], '')).toHaveLength(2);
+  });
+});
diff --git a/src/dev-toolbar/palette/search.ts b/src/dev-toolbar/palette/search.ts
new file mode 100644
index 0000000..cd82a01
--- /dev/null
+++ b/src/dev-toolbar/palette/search.ts
@@ -0,0 +1,96 @@
+/** What a palette result points at, so the dock can open it in the right view. */
+export type PaletteTarget =
+  | { kind: 'memo' | 'signal'; node: object }
+  | { kind: 'component'; owner: object }
+  | { kind: 'action'; origin: object | undefined; id: number }
+  | { kind: 'call'; instance: string };
+
+export interface PaletteItem {
+  /** The group heading the item is listed under. */
+  group: 'Components' | 'Signals' | 'Memos' | 'Actions' | 'Server functions';
+  label: string;
+  /** Muted text on the right: a value, an owner, a time. */
+  detail: string;
+  target: PaletteTarget;
+}
+
+export interface PaletteMatch {
+  item: PaletteItem;
+  /** Indexes of the label's characters that matched, for highlighting. */
+  positions: number[];
+  score: number;
+}
+
+/** The order groups are listed in. */
+export const GROUP_ORDER: PaletteItem['group'][] = [
+  'Components',
+  'Memos',
+  'Signals',
+  'Actions',
+  'Server functions',
+];
+
+/**
+ * Matches `query` against `label` as a subsequence, ignoring case. A run of
+ * adjacent characters and a match at the start or after a separator score
+ * higher, so `rev` ranks `revenue` above `refundOrderView`.
+ */
+export function matchLabel(
+  label: string,
+  query: string,
+): { positions: number[]; score: number } | undefined {
+  const text = label.toLowerCase();
+  const needle = query.trim().toLowerCase();
+  if (!needle) return { positions: [], score: 0 };
+
+  // A plain substring is the strongest match.
+  const at = text.indexOf(needle);
+  if (at !== -1) {
+    const positions: number[] = [];
+    for (let i = 0; i < needle.length; i++) positions.push(at + i);
+    const boundary = at === 0 || !/[a-z0-9]/.test(text[at - 1]!);
+    return { positions, score: 100 + (boundary ? 50 : 0) - at };
+  }
+
+  // Otherwise every character must appear in order.
+  const positions: number[] = [];
+  let score = 0;
+  let from = 0;
+  for (const char of needle) {
+    const index = text.indexOf(char, from);
+    if (index === -1) return undefined;
+    if (positions.length && index === positions[positions.length - 1]! + 1) score += 5;
+    positions.push(index);
+    from = index + 1;
+  }
+  return { positions, score: score - positions[0]! };
+}
+
+/** The items that match `query`, best first within each group, groups in `GROUP_ORDER`. */
+export function searchPalette(items: PaletteItem[], query: string, limit = 6): PaletteMatch[] {
+  // Each group keeps its own best matches, so one large group cannot crowd out the rest.
+  const byGroup = new Map<PaletteItem['group'], PaletteMatch[]>();
+  for (const item of items) {
+    const match = matchLabel(item.label, query);
+    if (!match) continue;
+    let list = byGroup.get(item.group);
+    if (!list) {
+      list = [];
+      byGroup.set(item.group, list);
+    }
+    list.push({ item, positions: match.positions, score: match.score });
+  }
+
+  const result: PaletteMatch[] = [];
+  for (const group of GROUP_ORDER) {
+    const list = byGroup.get(group);
+    if (!list) continue;
+    list.sort(compareMatches);
+    for (const match of list.slice(0, limit)) result.push(match);
+  }
+  return result;
+}
+
+function compareMatches(a: PaletteMatch, b: PaletteMatch): number {
+  return b.score - a.score || a.item.label.length - b.item.label.length;
+}
diff --git a/src/dev-toolbar/palette/styles.css b/src/dev-toolbar/palette/styles.css
new file mode 100644
index 0000000..ed029b6
--- /dev/null
+++ b/src/dev-toolbar/palette/styles.css
@@ -0,0 +1,182 @@
+[data-solid-palette-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 3;
+
+  pointer-events: auto;
+  background: oklch(0 0 0 / 0.35);
+}
+
+[data-solid-palette] {
+  position: absolute;
+  left: 50%;
+  top: 18vh;
+  width: min(560px, calc(100vw - 2rem));
+  transform: translateX(-50%);
+
+  overflow: hidden;
+
+  color: var(--start-dt-text);
+  background: oklch(0.19 0.015 265 / 0.96);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 14px;
+  box-shadow: 0 30px 80px oklch(0 0 0 / 0.6);
+
+  animation: solid-palette-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes solid-palette-pop {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -8px) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-solid-palette] {
+    animation: none;
+  }
+}
+
+[data-solid-palette-query] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--start-dt-line);
+}
+
+[data-solid-palette-query] svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+
+  fill: none;
+  stroke: var(--start-dt-text-muted);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+}
+
+[data-solid-palette-query] input {
+  flex: 1;
+  min-width: 0;
+
+  padding: 0;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--start-dt-text);
+
+  font:
+    15px system-ui,
+    sans-serif;
+}
+
+[data-solid-palette-query] input::placeholder {
+  color: var(--start-dt-faint);
+}
+
+[data-solid-palette] kbd {
+  padding: 0 4px;
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 4px;
+  color: var(--start-dt-faint);
+  font: 10px var(--start-dt-mono);
+}
+
+[data-solid-palette-results] {
+  max-height: 50vh;
+  overflow: auto;
+  padding: 6px;
+}
+
+[data-solid-palette-group] {
+  padding: 8px 10px 4px;
+
+  color: var(--start-dt-faint);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+[data-solid-palette-item] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+[data-solid-palette-item][aria-selected='true'] {
+  background: var(--start-dt-raise-2);
+}
+
+[data-solid-palette-item] code {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  font: 12.5px var(--start-dt-mono);
+}
+
+[data-solid-palette-item] mark {
+  background: none;
+  color: var(--start-dt-solid);
+  font-weight: 700;
+}
+
+[data-solid-palette-detail] {
+  margin-left: auto;
+  flex-shrink: 0;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  color: var(--start-dt-faint);
+  font-size: 11.5px;
+}
+
+[data-solid-palette-kind] {
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 0 5px;
+
+  border-radius: 4px;
+  font: 700 9.5px/16px var(--start-dt-mono);
+  text-align: center;
+}
+
+[data-solid-palette-kind='memo'] {
+  background: var(--start-dt-violet-soft);
+  color: var(--start-dt-violet);
+}
+
+[data-solid-palette-kind='signal'],
+[data-solid-palette-kind='action'] {
+  background: var(--start-dt-solid-soft);
+  color: var(--start-dt-solid);
+}
+
+[data-solid-palette-kind='call'] {
+  background: var(--start-dt-violet-soft);
+  color: var(--start-dt-violet);
+}
+
+[data-solid-palette-kind='component'] {
+  background: oklch(1 0 0 / 0.07);
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-palette-empty] {
+  padding: 18px 10px;
+  color: var(--start-dt-faint);
+  text-align: center;
+  font-size: 12px;
+}
diff --git a/src/dev-toolbar/reactivity/ValueInspector.tsx b/src/dev-toolbar/reactivity/ValueInspector.tsx
index f12b85c..eadf908 100644
--- a/src/dev-toolbar/reactivity/ValueInspector.tsx
+++ b/src/dev-toolbar/reactivity/ValueInspector.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from '@solidjs/web';
-import { createMemo, createSignal, For, Show } from 'solid-js';
+import { createMemo, For, Show } from 'solid-js';
 import { Badge } from '../../ui/Badge.js';
 import {
   TreeBranch,
diff --git a/src/dev-toolbar/reactivity/index.tsx b/src/dev-toolbar/reactivity/index.tsx
index 49c5807..49b8284 100644
--- a/src/dev-toolbar/reactivity/index.tsx
+++ b/src/dev-toolbar/reactivity/index.tsx
@@ -147,6 +147,8 @@ export interface ReactivityViewerProps {
   componentFilter?: string;
   /** Drops the component filter set by the element inspector. */
   onClearComponentFilter?: () => void;
+  /** Shown first in the toolbar, such as the Structure view's mode chips. */
+  lead?: JSX.Element;
 }
 
 function isDescendantOf(owner: object | undefined, target: object): boolean {
@@ -490,6 +492,7 @@ export default function ReactivityViewer(props: ReactivityViewerProps): JSX.Elem
       <div data-solid-dev-toolbar-panel>
         <div data-solid-reactivity-viewer>
           <div data-solid-reactivity-nav>
+            {props.lead}
             <input
               data-solid-reactivity-search
               type="search"
diff --git a/src/dev-toolbar/reactivity/value-editor.ts b/src/dev-toolbar/reactivity/value-editor.ts
index 89a5e30..58f511a 100644
--- a/src/dev-toolbar/reactivity/value-editor.ts
+++ b/src/dev-toolbar/reactivity/value-editor.ts
@@ -1,4 +1,6 @@
-import { createRoot, createSignal, DEV, flush, getOwner, runWithOwner } from 'solid-js';
+import { createRoot, createSignal, DEV, flush, getOwner, OBSERVE, runWithOwner } from 'solid-js';
+import { excludeOwner } from '../ownership/registry.js';
+import { excludeReactiveOwner } from './registry.js';
 
 /**
  * Whether a value is an array or an object made by `{}` or
@@ -219,6 +221,8 @@ function resolveWrite(
 class ReactiveWriter {
   private setter?: (value: unknown) => unknown;
   private bridgeNode?: Record<string, unknown>;
+  /** The node the bridge forwards to now. */
+  private forwarded?: Record<string, any>;
 
   private ensureBridge(): void {
     if (this.setter && this.bridgeNode) return;
@@ -226,6 +230,12 @@ class ReactiveWriter {
       const [_, set] = createSignal(0);
       this.setter = set as (value: unknown) => unknown;
       const owner = getOwner();
+      // The bridge is the toolbar's, so the graph, the tree and the runtime's
+      // records leave it out. Listed as app code, the graph could hand it back
+      // as the node to edit.
+      excludeReactiveOwner(owner);
+      excludeOwner(owner);
+      if (owner) OBSERVE?.exclude(owner);
       const signals = DEV?.getSignals
         ? (DEV.getSignals(owner as never) as Record<string, unknown>[])
         : [];
@@ -239,6 +249,14 @@ class ReactiveWriter {
     this.ensureBridge();
     if (!this.setter || !this.bridgeNode) return false;
 
+    // A panel that still holds the bridge means the node it forwards to.
+    // Forwarding the bridge to itself would recurse in every getter.
+    if (target === this.bridgeNode) {
+      if (!this.forwarded) return false;
+      target = this.forwarded;
+    }
+    this.forwarded = target;
+
     if ('_host' in target && target._host) {
       const key = target._key;
       if (target._host.v) target._host.v[key] = nextValue;
diff --git a/src/dev-toolbar/report/CopyReportButton.tsx b/src/dev-toolbar/report/CopyReportButton.tsx
index 5fc8160..902353e 100644
--- a/src/dev-toolbar/report/CopyReportButton.tsx
+++ b/src/dev-toolbar/report/CopyReportButton.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from '@solidjs/web';
 import { createSignal, onCleanup, Show } from 'solid-js';
 import IconButton from '../../ui/IconButton.js';
+import { HealthButton } from '../health/HealthButton.js';
 import { CheckIcon, CopyIcon } from '../icons.js';
 import './styles.css';
 
@@ -36,6 +37,8 @@ export interface CopyReportButtonProps {
   report: () => string | Promise<string>;
   /** What the button copies, such as "this error". */
   label: string;
+  /** Shows a button with this text beside the icon, in place of the icon alone. */
+  text?: string;
 }
 
 /** Copies a Markdown report for an agent, such as Claude Code, to read. */
@@ -69,6 +72,22 @@ export function CopyReportButton(props: CopyReportButtonProps): JSX.Element {
     }
   };
 
+  if (props.text) {
+    return (
+      <HealthButton
+        data-solid-copy-report={state()}
+        title={title()}
+        disabled={state() === 'busy'}
+        onClick={copy}
+      >
+        <Show when={state() === 'copied'} fallback={<CopyIcon title="" aria-hidden="true" />}>
+          <CheckIcon title="" aria-hidden="true" />
+        </Show>
+        {props.text}
+      </HealthButton>
+    );
+  }
+
   return (
     <IconButton
       data-solid-copy-report={state()}
diff --git a/src/dev-toolbar/structure/index.tsx b/src/dev-toolbar/structure/index.tsx
new file mode 100644
index 0000000..1799eb5
--- /dev/null
+++ b/src/dev-toolbar/structure/index.tsx
@@ -0,0 +1,119 @@
+import type { JSX } from '@solidjs/web';
+import { createSignal, For } from 'solid-js';
+import OwnershipViewer, { type SignalChange } from '../ownership/index.js';
+import ReactivityViewer from '../reactivity/index.js';
+import './styles.css';
+
+export type StructureMode = 'owners' | 'graph';
+
+export type { SignalChange };
+
+export interface StructureViewerProps {
+  show?: boolean;
+  /** Which of the two the view shows. Leave it out to let the view keep its own. */
+  mode?: StructureMode;
+  onModeChange?: (mode: StructureMode) => void;
+  /** A signal, memo or effect another panel asked the graph to show. */
+  focus?: { node: object };
+  /** An owner another panel asked the tree to show. Pass a new object for every request. */
+  ownerFocus?: { owner: object };
+  /** Graph: only nodes owned by or under this component instance. */
+  ownerFilter?: object;
+  /** Graph: only nodes owned by or under a component of this name. */
+  componentFilter?: string;
+  onClearComponentFilter?: () => void;
+  /** Graph: opens the owner of a node in the tree. */
+  onViewOwner?: (owner: object) => void;
+  /** Tree: opens a signal, memo or effect in the graph. */
+  onViewInGraph?: (node: object) => void;
+  /** The last change of a signal, from the timeline. The second argument is the runtime signal. */
+  lastChange?: (nodeId: string | number, node?: object) => SignalChange | undefined;
+  /** Opens the activity of an owner. */
+  onShowActivity?: (owner: object, name: string) => void;
+}
+
+const MODES: { value: StructureMode; label: string; name: string }[] = [
+  { value: 'owners', label: 'Owners', name: 'Ownership' },
+  { value: 'graph', label: 'Graph', name: 'Reactivity' },
+];
+
+interface ModeChipsProps {
+  mode: StructureMode;
+  onChange: (mode: StructureMode) => void;
+}
+
+/** The Owners and Graph chips. Both sides of the view show them. */
+function ModeChips(props: ModeChipsProps): JSX.Element {
+  function moveMode(event: KeyboardEvent): void {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
+    props.onChange(props.mode === 'owners' ? 'graph' : 'owners');
+    // The chip that takes over is the one that is now selected.
+    queueMicrotask(() => {
+      (event.currentTarget as HTMLElement | null)?.parentElement
+        ?.querySelector<HTMLElement>('[aria-selected="true"]')
+        ?.focus();
+    });
+  }
+
+  return (
+    <div data-solid-structure-modes role="tablist" aria-label="Structure">
+      <For each={MODES}>
+        {(entry) => (
+          <button
+            type="button"
+            role="tab"
+            data-solid-structure-chip
+            data-solid-structure-mode={entry.value}
+            aria-label={entry.name}
+            aria-selected={props.mode === entry.value ? 'true' : 'false'}
+            tabindex={props.mode === entry.value ? 0 : -1}
+            onClick={() => props.onChange(entry.value)}
+            onKeyDown={moveMode}
+          >
+            {entry.label}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+}
+
+/**
+ * The Structure view: the ownership tree and the reactivity graph behind one
+ * pair of chips. Selecting a chip swaps the pane, and each pane keeps its own
+ * selection while it is hidden.
+ */
+export default function StructureViewer(props: StructureViewerProps): JSX.Element {
+  const [ownMode, setOwnMode] = createSignal<StructureMode>('owners');
+  const mode = () => props.mode ?? ownMode();
+
+  function changeMode(next: StructureMode): void {
+    setOwnMode(next);
+    props.onModeChange?.(next);
+  }
+
+  const chips = () => <ModeChips mode={mode()} onChange={changeMode} />;
+
+  return (
+    <>
+      <OwnershipViewer
+        show={!!props.show && mode() === 'owners'}
+        focus={props.ownerFocus}
+        onViewInGraph={props.onViewInGraph}
+        lastChange={props.lastChange}
+        onShowActivity={props.onShowActivity}
+        lead={chips()}
+      />
+      <ReactivityViewer
+        show={!!props.show && mode() === 'graph'}
+        focus={props.focus}
+        ownerFilter={props.ownerFilter}
+        componentFilter={props.componentFilter}
+        onClearComponentFilter={props.onClearComponentFilter}
+        onViewOwner={props.onViewOwner}
+        lead={chips()}
+      />
+    </>
+  );
+}
diff --git a/src/dev-toolbar/structure/signal-history.test.ts b/src/dev-toolbar/structure/signal-history.test.ts
new file mode 100644
index 0000000..f459e2f
--- /dev/null
+++ b/src/dev-toolbar/structure/signal-history.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { SignalHistory } from './signal-history.js';
+
+describe('SignalHistory', () => {
+  it('has no change for a node seen once', () => {
+    const history = new SignalHistory();
+    expect(history.lastChange({ _value: 1 }, 10)).toBeUndefined();
+  });
+
+  it('reports the previous value and when it changed', () => {
+    const history = new SignalHistory();
+    const node = { _value: 'paid' };
+    history.lastChange(node, 10);
+    node._value = 'refunded';
+    expect(history.lastChange(node, 20)).toEqual({ prev: '"paid"', at: 20 });
+    // Reading again without a change keeps the same answer.
+    expect(history.lastChange(node, 30)).toEqual({ prev: '"paid"', at: 20 });
+  });
+});
diff --git a/src/dev-toolbar/structure/signal-history.ts b/src/dev-toolbar/structure/signal-history.ts
new file mode 100644
index 0000000..fd19e4f
--- /dev/null
+++ b/src/dev-toolbar/structure/signal-history.ts
@@ -0,0 +1,35 @@
+import { formatValue } from '../reactivity/format.js';
+import type { SignalChange } from '../ownership/index.js';
+
+interface Seen {
+  value: unknown;
+  prev?: unknown;
+  at?: number;
+}
+
+/**
+ * Remembers each signal's value the last time the tree showed it, and the
+ * value before that. The runtime does not hand out the id its write records
+ * use, so the history is kept per node here.
+ */
+export class SignalHistory {
+  #seen = new WeakMap<object, Seen>();
+
+  /** Notes the node's current value, and returns its last change if it had one. */
+  lastChange(node: object, now = performance.now()): SignalChange | undefined {
+    const value = (node as { _value?: unknown })._value;
+    const seen = this.#seen.get(node);
+    if (!seen) {
+      this.#seen.set(node, { value });
+      return undefined;
+    }
+    // A new value moves the old one into `prev` and stamps the time.
+    if (!Object.is(seen.value, value)) {
+      seen.prev = seen.value;
+      seen.at = now;
+      seen.value = value;
+    }
+    if (seen.at === undefined) return undefined;
+    return { prev: formatValue(seen.prev), at: seen.at };
+  }
+}
diff --git a/src/dev-toolbar/structure/styles.css b/src/dev-toolbar/structure/styles.css
new file mode 100644
index 0000000..1b4ea94
--- /dev/null
+++ b/src/dev-toolbar/structure/styles.css
@@ -0,0 +1,48 @@
+/* The chips of the Structure view, in the tree pane and in the graph toolbar. */
+
+[data-solid-structure-chip] {
+  padding: 3px 9px;
+
+  border: 1px solid var(--start-dt-line-2);
+  border-radius: 99px;
+  background: none;
+  color: var(--start-dt-text-muted);
+
+  font: inherit;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-size: 11.5px;
+  line-height: 1.45;
+  white-space: nowrap;
+  cursor: pointer;
+  flex: none;
+}
+
+[data-solid-structure-chip][aria-selected='true'] {
+  border-color: transparent;
+  background: var(--start-dt-raise-2);
+  color: var(--start-dt-text);
+}
+
+[data-solid-structure-chip][data-ghost] {
+  margin-left: auto;
+
+  border-style: dashed;
+  color: var(--start-dt-faint);
+}
+
+[data-solid-structure-chip][data-ghost][aria-pressed='true'] {
+  background: oklch(1 0 0 / 0.05);
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-structure-chip]:focus-visible {
+  outline: 1px solid var(--start-dt-solid);
+  outline-offset: 1px;
+}
+
+[data-solid-structure-modes] {
+  display: contents;
+}
diff --git a/src/dev-toolbar/timeline/index.tsx b/src/dev-toolbar/timeline/index.tsx
deleted file mode 100644
index b315c9a..0000000
--- a/src/dev-toolbar/timeline/index.tsx
+++ /dev/null
@@ -1,557 +0,0 @@
-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 { ResizeHandle } from '../../ui/ResizeHandle.js';
-import { Text } from '../../ui/Text.js';
-import { useResizableDetail } from '../../ui/use-resizable-detail.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,
-  isUnnamedUpdate,
-  type TimelineCall,
-  type TimelineEntry,
-  type TimelineRun,
-} from './tracker.js';
-import { entryDuration, entryRunCount, groupEntries, type TimelineGroup } from './group.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>;
-}
-
-/** `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>
-  );
-}
-
-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>
-  );
-}
-
-interface EntryRowProps {
-  entry: TimelineEntry;
-  selected: boolean;
-  nested?: boolean;
-  onSelect: (id: number) => void;
-}
-
-function EntryRow(props: EntryRowProps): JSX.Element {
-  return (
-    <button
-      type="button"
-      data-solid-timeline-row
-      data-kind={props.entry.origin ? 'interaction' : 'update'}
-      data-selected={props.selected ? '' : undefined}
-      data-nested={props.nested ? '' : undefined}
-      onClick={() => props.onSelect(props.entry.id)}
-    >
-      <span data-solid-timeline-row-head>
-        {outcomeBadge(props.entry)}
-        <Text
-          data-solid-timeline-row-label
-          options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}
-        >
-          {props.entry.label}
-        </Text>
-      </span>
-      <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
-        {[
-          plural(props.entry.writes.length, 'write'),
-          plural(entryRunCount(props.entry), 're-run'),
-          ...(props.entry.calls.length ? [plural(props.entry.calls.length, 'call')] : []),
-          ms(entryDuration(props.entry)),
-        ].join(' · ')}
-      </Text>
-    </button>
-  );
-}
-
-interface GroupRowsProps {
-  group: TimelineGroup;
-  open: boolean;
-  selected: number | undefined;
-  onToggle: () => void;
-  onSelect: (id: number) => void;
-}
-
-/** A run of entries with one label: a summary row that opens into the entries. */
-function GroupRows(props: GroupRowsProps): JSX.Element {
-  // A closed group shows the selection of an entry inside it.
-  const holdsSelection = () =>
-    !props.open && props.group.entries.some((entry) => entry.id === props.selected);
-  return (
-    <div data-solid-timeline-group data-open={props.open ? '' : undefined}>
-      <button
-        type="button"
-        data-solid-timeline-row
-        data-solid-timeline-group-head
-        data-selected={holdsSelection() ? '' : undefined}
-        aria-expanded={props.open ? 'true' : 'false'}
-        onClick={props.onToggle}
-      >
-        <span data-solid-timeline-row-head>
-          <span data-solid-timeline-chevron aria-hidden="true">
-            {props.open ? '▾' : '▸'}
-          </span>
-          <Text
-            data-solid-timeline-row-label
-            options={{ size: 'xs', weight: 'semibold', font: 'mono', wrap: 'nowrap' }}
-          >
-            {props.group.label}
-          </Text>
-          <Badge type="info">{`×${props.group.entries.length}`}</Badge>
-        </span>
-        <Text data-solid-timeline-row-meta options={{ size: 'xs', font: 'mono' }}>
-          {[
-            plural(props.group.writes, 'write'),
-            plural(props.group.runs, 're-run'),
-            ...(props.group.calls ? [plural(props.group.calls, 'call')] : []),
-            `${ms(props.group.totalMs)} total`,
-          ].join(' · ')}
-        </Text>
-      </button>
-      <Show when={props.open}>
-        <For each={props.group.entries}>
-          {(entry) => (
-            <EntryRow
-              entry={entry}
-              nested
-              selected={props.selected === entry.id}
-              onSelect={props.onSelect}
-            />
-          )}
-        </For>
-      </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;
-  /** 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 {
-  const [query, setQuery] = createSignal('');
-  const [showUnnamed, setShowUnnamed] = createSignal(false);
-  const [selected, setSelected] = createSignal<number>();
-  const [openRuns, setOpenRuns] = createSignal<number[]>([]);
-  const [openGroups, setOpenGroups] = createSignal<number[]>([]);
-  const detail = useResizableDetail({ storageKey: 'solid-start-devtools:timeline-detail-width' });
-
-  const unnamedCount = createMemo(() => props.entries.filter(isUnnamedUpdate).length);
-
-  const shown = createMemo(() => {
-    const search = query().trim().toLowerCase();
-    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)) ||
-        entry.runs.some((run) => run.event.nodeName.toLowerCase().includes(search)),
-    );
-  });
-
-  // Folding runs after filtering, so the search only sees the entries it matches.
-  const groups = createMemo(() => groupEntries(shown()));
-
-  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 toggleGroup(key: number): void {
-    setOpenGroups((current) =>
-      current.includes(key) ? current.filter((item) => item !== key) : [...current, key],
-    );
-  }
-
-  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)}
-            />
-            <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}`}
-              </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={groups()}>
-                    {(group) => (
-                      <Show
-                        when={group.folded}
-                        fallback={
-                          <EntryRow
-                            entry={group.entries[0]}
-                            selected={selected() === group.entries[0].id}
-                            onSelect={select}
-                          />
-                        }
-                      >
-                        <GroupRows
-                          group={group}
-                          open={openGroups().includes(group.key)}
-                          selected={selected()}
-                          onToggle={() => toggleGroup(group.key)}
-                          onSelect={select}
-                        />
-                      </Show>
-                    )}
-                  </For>
-                </Show>
-              </div>
-
-              <Show when={selectedEntry()}>
-                {(entry) => (
-                  <aside data-solid-timeline-detail style={{ width: `${detail.width()}px` }}>
-                    <ResizeHandle detail={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().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' }}>
-                          {`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
deleted file mode 100644
index dd47219..0000000
--- a/src/dev-toolbar/timeline/styles.css
+++ /dev/null
@@ -1,379 +0,0 @@
-[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-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;
-  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;
-
-  position: relative;
-
-  /* Keeps the list usable when the window shrinks below a saved width. */
-  max-width: calc(100% - 240px);
-  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-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;
-
-  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);
-}
-
-[data-solid-timeline-group] {
-  display: flex;
-  flex-direction: column;
-}
-
-[data-solid-timeline-group] > [data-solid-timeline-row] {
-  flex-shrink: 0;
-}
-
-[data-solid-timeline-row][data-nested] {
-  padding-left: 1.75rem;
-}
-
-[data-solid-timeline-chevron] {
-  width: 0.75rem;
-  flex-shrink: 0;
-
-  color: var(--start-dt-text-muted);
-  text-align: center;
-}
diff --git a/src/dev-toolbar/timeline/tracker.test.ts b/src/dev-toolbar/timeline/tracker.test.ts
index 4bee355..932775f 100644
--- a/src/dev-toolbar/timeline/tracker.test.ts
+++ b/src/dev-toolbar/timeline/tracker.test.ts
@@ -8,7 +8,14 @@ import type {
 } from 'solid-js/attribution';
 import { timelineReport } from '../report/timeline-report.js';
 import type { CallEvent } from '@solidjs/web';
-import { callInteraction, isUnnamedUpdate, rootChanges, TimelineBuilder } from './tracker.js';
+import {
+  callInteraction,
+  evictionIndex,
+  isUnnamedUpdate,
+  MAX_SAME_LABEL,
+  rootChanges,
+  TimelineBuilder,
+} from './tracker.js';
 
 const click: ChangeOrigin = {
   kind: 'interaction',
@@ -301,3 +308,17 @@ describe('timelineReport', () => {
     expect(report).not.toContain('a → b');
   });
 });
+
+describe('evictionIndex', () => {
+  it('drops the oldest entry of a label repeated past the limit', () => {
+    const entries = [{ label: 'refund' }];
+    for (let i = 0; i < MAX_SAME_LABEL + 1; i++) entries.push({ label: 'update: tick' });
+    entries.push({ label: 'setFilter' });
+    // The oldest is `setFilter`, but the tick label is over the limit.
+    expect(evictionIndex(entries)).toBe(entries.length - 2);
+  });
+
+  it('drops the oldest entry when no label is over the limit', () => {
+    expect(evictionIndex([{ label: 'a' }, { label: 'b' }, { label: 'a' }])).toBe(2);
+  });
+});
diff --git a/src/dev-toolbar/timeline/tracker.ts b/src/dev-toolbar/timeline/tracker.ts
index 464fd96..533a341 100644
--- a/src/dev-toolbar/timeline/tracker.ts
+++ b/src/dev-toolbar/timeline/tracker.ts
@@ -62,6 +62,24 @@ export interface TimelineEntry {
 
 /** Most entries the panel keeps. The oldest go first. */
 export const MAX_ENTRIES = 100;
+/** How many entries of one label are kept before its oldest go first. */
+export const MAX_SAME_LABEL = 20;
+
+/**
+ * The entry to drop when the timeline is full. A loop such as an animation
+ * frame repeats one label many times a second, so the oldest entry of a label
+ * that has more than `MAX_SAME_LABEL` entries goes before any other action.
+ * Otherwise the oldest entry goes. `entries` is newest first.
+ */
+export function evictionIndex(entries: { label: string }[]): number {
+  const counts = new Map<string, number>();
+  for (const entry of entries) counts.set(entry.label, (counts.get(entry.label) ?? 0) + 1);
+  for (let index = entries.length - 1; index >= 0; index--) {
+    if (counts.get(entries[index]!.label)! > MAX_SAME_LABEL) return index;
+  }
+  return entries.length - 1;
+}
+
 /** Most re-runs one entry keeps. */
 export const MAX_RUNS = 300;
 
@@ -114,6 +132,23 @@ export function isUnnamedUpdate(entry: TimelineEntry): boolean {
   return !entry.origin && entry.writes.every((write) => DEFAULT_NAMES.has(write.name));
 }
 
+/**
+ * An entry that wrote nothing, re-ran nothing and made no call, hold or
+ * navigation. A click inside the toolbar ends up here: the runtime counts its
+ * flush, but the toolbar's own nodes send no records. Lists leave it out, as
+ * they do an interaction that changed nothing.
+ */
+export function isIdleEntry(entry: TimelineEntry): boolean {
+  return (
+    !entry.writes.length &&
+    !entry.runs.length &&
+    !entry.droppedRuns &&
+    !entry.calls.length &&
+    !entry.holds.length &&
+    !entry.navigations.length
+  );
+}
+
 function externalLabel(writes: ChangeRecord[]): string {
   const origin = writes.find((write) => write.origin)?.origin;
   const source = origin && origin.kind !== 'external' ? formatOrigin(origin) : 'update';
@@ -157,8 +192,9 @@ export class TimelineBuilder {
       calls: [],
     };
     this.entries.unshift(entry);
-    for (const dropped of this.entries.splice(this.max)) {
-      if (dropped.origin) this.byOrigin.delete(dropped.origin);
+    while (this.entries.length > this.max) {
+      const [dropped] = this.entries.splice(evictionIndex(this.entries), 1);
+      if (dropped!.origin) this.byOrigin.delete(dropped!.origin);
       if (dropped === this.external) this.external = undefined;
     }
     if (origin) this.byOrigin.set(origin, entry);
@@ -345,8 +381,9 @@ export function startTimeline(builder: TimelineBuilder, onChange: () => void): (
       changed();
     }),
   ];
-  // The console log stays off: the panel is where the re-runs are read.
-  const release = attribution.enable({ log: false, values: 'full' });
+  // The console log stays off: the panel is where the re-runs are read. Stacks
+  // are on so each write names the line of the handler that made it.
+  const release = attribution.enable({ log: false, values: 'full', stacks: true });
   return () => {
     release();
     for (const off of offs) off();
diff --git a/tests/e2e/devtools.spec.ts b/tests/e2e/devtools.spec.ts
index 5b4b6a5..233d9a0 100644
--- a/tests/e2e/devtools.spec.ts
+++ b/tests/e2e/devtools.spec.ts
@@ -23,23 +23,35 @@ async function readJavaScript(directory: string): Promise<string> {
   return sources.join('\n');
 }
 
-// The view each panel belongs to. Health has no panels of its own.
+// The view each panel belongs to. Activity is one merged stream, so Timeline, Async
+// and Server functions are not tabs of their own. Ownership and Reactivity are
+// chips inside Structure.
 const VIEW_OF: Record<string, string> = {
+  Health: 'Health',
   Timeline: 'Activity',
   Async: 'Activity',
   'Server functions': 'Activity',
   Ownership: 'Structure',
   Reactivity: 'Structure',
 };
+const CHIP_OF = new Set(['Ownership', 'Reactivity']);
 
-// Opens the dock on a view, or on a panel of a view. The dock sits below the
+// Opens the dock on a view, or on a chip of the Structure view. The dock sits below the
 // page, which can scroll past it, so the fixture stays clickable while it is open.
 async function openTab(page: Page, name: string) {
   const launcher = page.getByRole('button', { name: 'Open Start Devtools' });
   if (await launcher.isVisible()) await launcher.click();
   const view = VIEW_OF[name];
-  if (view) await page.getByRole('tab', { name: view, exact: true }).click();
-  await page.getByRole('tab', { name, exact: true }).click();
+  await page.getByRole('tab', { name: view, exact: true }).click();
+  if (CHIP_OF.has(name)) await page.getByRole('tab', { name, exact: true }).click();
+}
+
+// A signal of the selected owner is a term and the definition beside it.
+function ownershipSignal(page: Page, name: string) {
+  const term = page
+    .locator('dt[data-solid-ownership-signal]')
+    .filter({ hasText: new RegExp(`${name}$`) });
+  return { term, value: term.locator('xpath=following-sibling::dd[1]') };
 }
 
 test('renders the toolbar around the app', async ({ page }) => {
@@ -77,7 +89,7 @@ test('docks at the bottom of the page', async ({ page }) => {
   await page.reload();
   await expect(dock).toBeVisible();
   await expect.poll(async () => (await dock.boundingBox())!.height).toBe(box.height + 100);
-  await expect(page.getByRole('tab', { name: 'Ownership', exact: true })).toHaveAttribute(
+  await expect(page.getByRole('tab', { name: 'Structure', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
@@ -296,12 +308,11 @@ test('shows server-function calls', async ({ page }) => {
   });
 
   await page.goto('/');
-  const instances = page.locator('[data-solid-functions-instances]');
+  const instances = page.locator('[data-solid-activity-row][data-kind="server"]');
 
   await page.locator('#emit-server-function-request').click();
   await openTab(page, 'Server functions');
   await expect(instances).toContainText('loadUser');
-  await expect(page.getByRole('tab', { name: 'Server functions' })).toContainText('1');
 
   await page.locator('#emit-server-function-response').click();
   await expect(instances).toContainText('201');
@@ -310,10 +321,12 @@ test('shows server-function calls', async ({ page }) => {
   await expect(instances).toContainText('500');
 
   // The detail pane starts empty and fills in once a call is selected.
-  const detail = page.locator('[data-solid-functions-detail]');
-  await expect(detail).toContainText('Select a server function call.');
-  await page.locator('[data-solid-functions-instances] [data-solid-select-option]').first().click();
-  await expect(detail.locator('[data-solid-function-instance-viewer]')).toBeVisible();
+  const detail = page.locator('[data-solid-activity-detail]');
+  await expect(detail).toContainText('Select an item to see what it did.');
+  await instances.first().click();
+  await expect(
+    detail.locator('[data-solid-activity-detail-body][data-kind="server"]'),
+  ).toBeVisible();
 
   expect(warnings).not.toContainEqual(expect.stringContaining('STRICT_READ_UNTRACKED'));
 });
@@ -326,12 +339,10 @@ test('shows the arguments and files of an upload call', async ({ page }) => {
   await page.locator('#emit-upload-request').click();
   await openTab(page, 'Server functions');
   await page
-    .locator('[data-solid-functions-instances] [data-solid-select-option]', {
-      hasText: 'uploadAvatar',
-    })
+    .locator('[data-solid-activity-row][data-kind="server"]', { hasText: 'uploadAvatar' })
     .click();
 
-  const detail = page.locator('[data-solid-functions-detail]');
+  const detail = page.locator('[data-solid-activity-detail]');
   await expect(detail.locator('[data-solid-seroval-viewer]')).toContainText('note');
   await expect(detail.locator('[data-solid-form-data-viewer]')).toContainText('file0');
   await expect(detail.locator('[data-solid-blob-viewer-name]')).toContainText('avatar.txt');
@@ -420,9 +431,7 @@ test('maps the reactivity graph', async ({ page }) => {
     page.locator('[data-solid-reactivity-detail] [data-solid-reactivity-owner]'),
   ).toHaveText('<App> › <Counter>');
   await page.locator('[data-solid-reactivity-detail] [data-solid-reactivity-owner]').click();
-  await expect(page.locator('[data-solid-ownership-row][data-selected]')).toContainText(
-    '<Counter>',
-  );
+  await expect(page.locator('[data-solid-ownership-row][data-selected]')).toContainText('Counter');
 });
 
 test('maps the ownership tree', async ({ page }) => {
@@ -430,40 +439,37 @@ test('maps the ownership tree', async ({ page }) => {
   const rows = page.locator('[data-solid-ownership-name]');
 
   await openTab(page, 'Ownership');
-  await expect(rows).toHaveText(['<App>', '<Greeting>', '<Counter>', '<Show>', '<Show>', '<Show>']);
+  // Solid's own components are hidden by default.
+  await expect(rows).toHaveText(['App', 'Greeting', 'Counter']);
 
-  // The expand arrow keeps its full size inside the button.
-  const arrow = await page
-    .locator('[data-solid-ownership-chevron]')
-    .first()
-    .evaluate((element) => {
-      const style = getComputedStyle(element, '::before');
-      return [style.width, style.height];
-    });
-  expect(arrow).toEqual(['5px', '5px']);
+  // The expand arrow is a glyph that keeps its width in the row.
+  await expect(page.locator('[data-solid-ownership-chevron]').first()).toHaveText('▾');
+  expect(
+    await page
+      .locator('[data-solid-ownership-chevron]')
+      .first()
+      .evaluate((element) => element.getBoundingClientRect().width),
+  ).toBe(12);
 
   // The detail pane only appears once an owner is selected.
   await expect(page.locator('[data-solid-ownership-detail]')).toHaveCount(0);
 
   // A component owns the signals and scopes created inside it.
-  await page.locator('[data-solid-ownership-label]').filter({ hasText: '<Counter>' }).click();
+  await page.locator('[data-solid-ownership-label]').filter({ hasText: 'Counter' }).click();
   const detail = page.locator('[data-solid-ownership-detail]');
-  await expect(detail).toContainText('Signals (1)');
+  await expect(detail.locator('[data-solid-ownership-detail-head]')).toContainText('<Counter');
+  await expect(detail).toContainText('count');
   await expect(detail).toContainText('count');
   await expect(detail).toContainText('doubled');
 
   // Values stay live while the panel is open, even when the tree does not move.
   // The panel covers the page, so the click goes straight to the element.
   await page.evaluate(() => (document.querySelector('#increment-count') as HTMLElement).click());
-  await expect(
-    detail
-      .locator('[data-solid-ownership-signal]')
-      .filter({ has: page.getByText('count', { exact: true }) }),
-  ).toContainText('1');
+  await expect(ownershipSignal(page, 'count').value).toContainText('1');
 
   // Props are listed by name, never read.
-  await page.locator('[data-solid-ownership-label]').filter({ hasText: '<Greeting>' }).click();
-  await expect(detail).toContainText('Props (1)');
+  await page.locator('[data-solid-ownership-label]').filter({ hasText: 'Greeting' }).click();
+  await expect(detail).toContainText('prop');
   await expect(detail).toContainText('name');
 
   // The ancestry section lists the owners above the selection, nearest first.
@@ -474,28 +480,29 @@ test('maps the ownership tree', async ({ page }) => {
 
   // Clicking a frame walks up the tree.
   await frames.nth(1).click();
-  await expect(detail.locator('[data-solid-ownership-detail-head]')).toContainText('<App>');
+  await expect(detail.locator('[data-solid-ownership-detail-head]')).toContainText('<App');
 
-  // Owner mode adds the scopes that component mode folds away.
-  await page.getByRole('button', { name: 'Owners', exact: true }).click();
+  // Showing Solid internals adds the scopes that the default view folds away.
+  const internals = page.locator('[data-solid-ownership-mode]');
+  await internals.click();
+  await expect(internals).toHaveAttribute('aria-pressed', 'false');
   await expect(rows.filter({ hasText: /^doubled$/ })).toHaveCount(1);
 
   // Search keeps the ancestors of a match so the row stays reachable.
-  await page.getByRole('button', { name: 'Components', exact: true }).click();
+  await internals.click();
+  await expect(internals).toHaveAttribute('aria-pressed', 'true');
   await page.locator('[data-solid-ownership-search]').fill('doubled');
-  await expect(rows).toHaveText(['<App>', '<Counter>']);
+  await expect(rows).toHaveText(['App', 'Counter']);
 
   // Rows carry no count badges.
   await expect(page.locator('[data-solid-ownership-row] [data-solid-badge="info"]')).toHaveCount(0);
 
   // A signal opens in the reactivity graph with that node selected.
   await page.locator('[data-solid-ownership-search]').fill('');
-  await page.locator('[data-solid-ownership-label]').filter({ hasText: '<Counter>' }).click();
-  const countEntry = detail
-    .locator('[data-solid-ownership-signal]')
-    .filter({ has: page.getByText('count', { exact: true }) });
+  await page.locator('[data-solid-ownership-label]').filter({ hasText: 'Counter' }).click();
+  const countEntry = ownershipSignal(page, 'count').value;
   await countEntry.hover();
-  await countEntry.getByRole('button', { name: 'View in graph' }).click();
+  await countEntry.getByRole('button', { name: 'View count in graph' }).click();
   await expect(
     page
       .locator('[data-solid-reactivity-node]')
@@ -529,7 +536,8 @@ test('maps the ownership tree', async ({ page }) => {
 
   // In owner mode a memo is a row of its own, and its heading links to the graph.
   await openTab(page, 'Ownership');
-  await page.getByRole('button', { name: 'Owners', exact: true }).click();
+  const showInternals = page.locator('[data-solid-ownership-mode]');
+  if ((await showInternals.getAttribute('aria-pressed')) === 'true') await showInternals.click();
   await page
     .locator('[data-solid-ownership-label]')
     .filter({ hasText: /^doubled$/ })
@@ -552,18 +560,14 @@ test('maps the ownership tree', async ({ page }) => {
 
   // Double click resets the width
   await handle.dblclick();
-  const resetWidth = (await detail.boundingBox())!.width;
-  expect(Math.abs(resetWidth - 320)).toBeLessThanOrEqual(2);
+  await expect(detail).toHaveCSS('width', '480px');
 
   // The left arrow key widens the pane from the keyboard.
   await handle.focus();
   await page.keyboard.press('ArrowLeft');
-  await expect(handle).toHaveAttribute('aria-valuenow', '336');
+  await expect(handle).toHaveAttribute('aria-valuenow', '496');
 
-  await detail
-    .locator('[data-solid-ownership-detail-head]')
-    .getByRole('button', { name: 'View in graph' })
-    .click();
+  await detail.getByRole('button', { name: 'View in graph', exact: true }).click();
   await expect(
     page
       .locator('[data-solid-reactivity-node]')
@@ -584,18 +588,19 @@ test('lists runtime issues', async ({ page }) => {
   await expect(rows).toHaveCount(1);
   await expect(rows.first()).toContainText('STRICT_READ_UNTRACKED');
   await expect(rows.first()).toContainText('×2');
-  // The toolbar's own owners are not part of the path.
-  await expect(rows.first()).toContainText('<App> › <Show> › value › <DraftReader>');
-  await expect(rows.first()).not.toContainText('<DevToolbar>');
 
   // The severity filter hides it.
-  await page.locator('[data-solid-issues-filter="warn"]').click();
+  await page.locator('[data-solid-health-filter="error"]').click();
   await expect(rows).toHaveCount(0);
-  await page.locator('[data-solid-issues-filter="warn"]').click();
+  await expect(page.locator('[data-solid-health-count]')).toContainText('0');
+  await page.locator('[data-solid-health-filter="all"]').click();
 
   // The detail links to the component in the ownership tree.
   await rows.first().click();
   const detail = page.locator('[data-solid-issues-detail]');
+  // The toolbar's own owners are not part of the path.
+  await expect(detail).toContainText('<App> › <Show> › value › <DraftReader>');
+  await expect(detail).not.toContainText('<DevToolbar>');
   await expect(detail).toContainText('draft');
   await expect(detail.getByRole('link', { name: 'Open the repair guide' })).toHaveAttribute(
     'href',
@@ -603,7 +608,7 @@ test('lists runtime issues', async ({ page }) => {
   );
   await detail.getByRole('button', { name: 'Show in the ownership tree' }).click();
   await expect(page.locator('[data-solid-ownership-row][data-selected]')).toContainText(
-    '<DraftReader>',
+    'DraftReader',
   );
 
   // Clearing empties the list and the count.
@@ -618,44 +623,44 @@ test('shows what each action re-ran and why', async ({ page }) => {
   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.
+  const actions = page.locator('[data-solid-activity-row][data-kind="action"]');
+  const rows = actions.filter({ hasText: 'button#increment-count' });
   await expect(rows).toHaveCount(1);
-  await expect(rows.first()).toContainText('click on button#increment-count');
+  await expect(rows.first().locator('[data-solid-activity-what] b')).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/,
-  ]);
+  const detail = page.locator('[data-solid-activity-detail]');
+  await expect(detail.locator('[data-solid-timeline-outcome]')).toContainText('committed');
+  const wrote = detail.locator('[data-solid-activity-node]').first();
+  await expect(wrote).toContainText('Wrote');
+  await expect(wrote).toContainText('count');
+  await expect(wrote).toContainText('0 → 1');
+  const runs = detail.locator('[data-solid-activity-wf]');
+  await expect(runs).toHaveCount(3);
+  await expect(runs.nth(0)).toContainText('doubled');
+  await expect(runs.nth(1)).toContainText('effect');
+  await expect(runs.nth(2)).toContainText('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 runs.filter({ hasText: 'report-doubled' }).click();
+  const causes = detail.locator('[data-solid-activity-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 detail.getByRole('button', { name: 'View in graph' }).first().click();
   await expect(page.getByRole('tab', { name: 'Reactivity', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
   await expect(page.locator('[data-solid-reactivity-detail]')).toContainText('doubled');
+
+  // Clicks on the toolbar change nothing in the app, so the click on the counter is the only entry.
+  await openTab(page, 'Timeline');
+  await expect(actions).toHaveCount(1);
 });
 
 test('lists the server calls of an action and opens them', async ({ page }) => {
@@ -664,37 +669,44 @@ test('lists the server calls of an action and opens them', async ({ page }) => {
   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');
+  const row = page
+    .locator('[data-solid-activity-row][data-kind="action"]')
+    .filter({ hasText: 'button#call-server' });
+  await expect(row).toContainText('1 server call');
   await row.click();
 
-  const call = page.locator('[data-solid-timeline-call]');
-  await expect(call).toContainText('loadUser');
-  await expect(call).toContainText('200');
+  const call = page.locator('[data-solid-activity-wf][data-kind="server"]');
+  await expect(call).toContainText('ƒ loadUser');
   await call.click();
 
-  await expect(page.getByRole('tab', { name: 'Server functions', exact: true })).toHaveAttribute(
+  // The call opens beside the list, in the same view.
+  await expect(page.getByRole('tab', { name: 'Activity', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
-  await expect(page.locator('[data-solid-function-instance-viewer]')).toContainText('loadUser');
+  const server = page.locator('[data-solid-activity-detail-body][data-kind="server"]');
+  await expect(server.locator('h2')).toContainText('loadUser');
+  await expect(server.locator('h2')).toContainText('200');
 });
 
 test('shows async loads, waits, fallbacks and chains', async ({ page }) => {
   await page.goto('/');
   await openTab(page, 'Async');
-  await expect(page.locator('[data-solid-async-now]')).toContainText('Nothing is loading.');
+  const live = page.locator('[data-solid-activity-row][data-kind="async"]', {
+    hasText: 'user loading',
+  });
+  await expect(live).toHaveCount(0);
 
   await page.locator('#show-async').click();
   await expect(page.locator('#async-posts')).toHaveText('post of user 1');
 
-  // While the next user loads, the panel lists what is loading.
+  // While the next user loads, the list shows what is loading.
   await page.locator('#next-user').click();
-  await expect(page.locator('[data-solid-async-now]')).toContainText('user');
+  await expect(live).toContainText('live');
   await expect(page.locator('#async-posts')).toHaveText('post of user 2');
-  await expect(page.locator('[data-solid-async-now]')).toContainText('Nothing is loading.');
+  await expect(live).toHaveCount(0);
 
-  const rows = page.locator('[data-solid-async-row]');
+  const rows = page.locator('[data-solid-activity-row][data-kind="async"]');
   await expect(rows.filter({ hasText: 'load user' }).first()).toBeVisible();
   await expect(rows.filter({ hasText: 'fallback at <App>' }).first()).toBeVisible();
   // posts starts only once user has landed.
@@ -707,13 +719,14 @@ test('shows async loads, waits, fallbacks and chains', async ({ page }) => {
   const wait = rows.filter({ hasText: /wait on (user, posts|posts, user)/ }).first();
   await expect(wait).toContainText('no pending state shown');
   await wait.click();
-  const detail = page.locator('[data-solid-async-detail]');
+  const detail = page.locator('[data-solid-activity-detail]');
   await expect(detail).toContainText('click on button#next-user');
   await expect(detail).toContainText('userId 1 → 2');
 
   // The filter hides a kind of record.
-  await page.locator('[data-solid-async-filter="chain"]').click();
-  await expect(rows.filter({ hasText: 'chain user → posts' })).toHaveCount(0);
+  await page.locator('[data-solid-activity-chip][data-filter="server"]').click();
+  await expect(rows).toHaveCount(0);
+  await page.locator('[data-solid-activity-chip][data-filter="all"]').click();
 
   // A load links to its node in the reactivity graph.
   await rows.filter({ hasText: 'load user' }).first().click();
@@ -747,22 +760,28 @@ test('hides updates that only touched unnamed signals', async ({ page }) => {
   await expect(page.locator('#async-posts')).toHaveText('post of user 1');
 
   await openTab(page, 'Timeline');
-  const rows = page.locator('[data-solid-timeline-row]');
-  const toggle = page.locator('[data-solid-timeline-unnamed]');
-  await expect(toggle).toContainText(/Show \d+ unnamed update/);
+  const rows = page.locator('[data-solid-activity-row][data-kind="action"]');
+  const toggle = page.locator('[data-solid-activity-chip][data-ghost]');
+  await expect(toggle).toContainText(/\d+ folded/);
   await expect(rows.filter({ hasText: /^update/ })).toHaveCount(0);
   await expect(rows.filter({ hasText: 'button#show-async' })).toHaveCount(1);
+  const folded = await rows.count();
 
   await toggle.click();
-  await expect(toggle).toContainText(/Hide \d+ unnamed update/);
-  expect(await rows.count()).toBeGreaterThan(1);
+  await expect(toggle).toContainText(/\d+ unfolded/);
+  expect(await rows.count()).toBeGreaterThan(folded);
 });
 
 test('copies reports for an agent', async ({ page, context }) => {
   await context.grantPermissions(['clipboard-read', 'clipboard-write']);
   const clipboard = () => page.evaluate(() => navigator.clipboard.readText());
+  // A button with a visible label carries the sentence in its title, an icon button in its name.
   const copy = (name: string) =>
-    page.getByRole('button', { name: `Copy ${name} for an agent` }).click();
+    page
+      .locator(
+        `button[title="Copy ${name} for an agent"], button[aria-label="Copy ${name} for an agent"]`,
+      )
+      .click();
 
   await page.goto('/');
 
@@ -786,14 +805,14 @@ test('copies reports for an agent', async ({ page, context }) => {
   await page.locator('#emit-server-function-request').click();
   await page.locator('#emit-server-function-response').click();
   await openTab(page, 'Server functions');
-  await page.locator('[data-solid-functions-instances] [data-solid-select-option]').first().click();
+  await page.locator('[data-solid-activity-row][data-kind="server"]').first().click();
   await copy('this call');
   await expect.poll(clipboard).toContain('# Server function call: `loadUser`');
   expect(await clipboard()).toContain('- Response: `201`');
 
   // A component, with its signals and where it sits.
   await openTab(page, 'Ownership');
-  await page.locator('[data-solid-ownership-label]').filter({ hasText: '<Counter>' }).click();
+  await page.locator('[data-solid-ownership-label]').filter({ hasText: 'Counter' }).click();
   await copy('this component');
   await expect.poll(clipboard).toContain('# Solid component: `<Counter>`');
   expect(await clipboard()).toContain('- `count` = `0`');
@@ -907,6 +926,10 @@ test('inspects elements and funnels components across panels', async ({ page })
   await expect(inspectButton).not.toHaveAttribute('data-active', '');
 
   // 4. The pick opens in the Ownership tree, selected.
+  await expect(page.getByRole('tab', { name: 'Structure', exact: true })).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
   await expect(page.getByRole('tab', { name: 'Ownership', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
@@ -940,16 +963,13 @@ test('allows live editing of signal state and updates DOM', async ({ page }) =>
 
   // 1. Live edit via Ownership panel
   await openTab(page, 'Ownership');
-  await page.locator('[data-solid-ownership-label]').filter({ hasText: '<Counter>' }).click();
+  await page.locator('[data-solid-ownership-label]').filter({ hasText: 'Counter' }).click();
 
-  const countSignal = page
-    .locator('[data-solid-ownership-signal]')
-    .filter({ has: page.getByText('count', { exact: true }) });
+  const countSignal = ownershipSignal(page, 'count').value;
   await expect(countSignal).toContainText('0');
 
   // Trigger inline edit
-  await countSignal.hover();
-  await countSignal.locator('[data-solid-ownership-edit-signal]').click();
+  await countSignal.locator('[data-solid-ownership-value]').click();
   const ownershipInput = countSignal.locator('[data-solid-ownership-signal-input]');
   await expect(ownershipInput).toBeVisible();
   await ownershipInput.fill('42');

From 72e7cb71bb7263988dda1326c0cee92e2035a781 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 11:54:58 +0800
Subject: [PATCH 04/10] fix(health): run the age clock only while shown, and
 open each new error

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/dev-toolbar/health/index.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/dev-toolbar/health/index.tsx b/src/dev-toolbar/health/index.tsx
index 2c04649..a072551 100644
--- a/src/dev-toolbar/health/index.tsx
+++ b/src/dev-toolbar/health/index.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from '@solidjs/web';
 import { clientOnly } from '@solidjs/web';
-import { createEffect, createMemo, createSignal, For, onSettled, Show } from 'solid-js';
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';
 import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { useResizableDetail } from '../../ui/use-resizable-detail.js';
 import type { ErrorRecord } from '../error-record.js';
@@ -64,19 +64,25 @@ export default function HealthViewer(props: HealthViewerProps): JSX.Element {
     }),
   );
 
-  // The ages in the rows move on without a change to the lists, so a clock runs.
-  onSettled(() => {
-    const timer = setInterval(() => setTick((value) => value + 1), TICK_MS);
-    return () => clearInterval(timer);
-  });
+  // The ages in the rows move on without a change to the lists, so a clock
+  // runs while the view is shown.
+  createEffect(
+    () => props.show,
+    (show) => {
+      if (!show) return;
+      const timer = setInterval(() => setTick((value) => value + 1), TICK_MS);
+      return () => clearInterval(timer);
+    },
+  );
 
-  // A new error lands at the top of the list and is opened, as the old Errors panel did.
-  let seenErrors = 0;
+  // A new error lands at the top of the list and is opened, as the old Errors
+  // panel did. The newest record is compared, so a capped list still works.
+  let newest: ErrorRecord | undefined;
   createEffect(
-    () => props.errors.length,
-    (count) => {
-      if (count > seenErrors) setSelected({ kind: 'error', index: 0 });
-      seenErrors = count;
+    () => props.errors[0],
+    (first) => {
+      if (first && first !== newest) setSelected({ kind: 'error', index: 0 });
+      newest = first;
     },
   );
 

From adf977727b5f9f7273be07eaf7a75679728c9305 Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 12:05:24 +0800
Subject: [PATCH 05/10] feat(activity): show the last 30 seconds on a live
 strip, with pause

The lanes strip covered the oldest to the newest record and rescaled as
entries were dropped, so actions seemed to vanish. It now covers the last
30 seconds on a fixed axis with -30s, -20s, -10s and now, and items slide
left as time passes. The list shows the same window, and a selected item
stays until it is deselected. Pause freezes what is shown, even while the
stores drop old records.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/dev-toolbar/activity/index.tsx     |  87 +++++++++++--
 src/dev-toolbar/activity/model.test.ts | 162 ++++++++++++++++++++++---
 src/dev-toolbar/activity/model.ts      | 160 ++++++++++++++++++------
 src/dev-toolbar/activity/scrub.tsx     |  28 ++++-
 src/dev-toolbar/activity/styles.css    |  75 ++++++++++++
 5 files changed, 441 insertions(+), 71 deletions(-)

diff --git a/src/dev-toolbar/activity/index.tsx b/src/dev-toolbar/activity/index.tsx
index edd343b..70175dc 100644
--- a/src/dev-toolbar/activity/index.tsx
+++ b/src/dev-toolbar/activity/index.tsx
@@ -1,5 +1,6 @@
 import type { JSX } from '@solidjs/web';
 import { createEffect, createMemo, createSignal, For, getOwner, onCleanup, Show } from 'solid-js';
+import { PauseIcon, PlayIcon } from '../icons.js';
 import Placeholder from '../../ui/Placeholder.js';
 import { ResizeHandle } from '../../ui/ResizeHandle.js';
 import { Text } from '../../ui/Text.js';
@@ -20,8 +21,12 @@ import {
   bucketRows,
   collectRows,
   GLYPHS,
+  frozenSources,
   inWindow,
+  type ActivitySources,
   layoutLanes,
+  viewRange,
+  WINDOW_MS,
   matchesFilter,
   matchesOwner,
   resolveSelection,
@@ -43,7 +48,7 @@ const FILTERS: { value: ActivityFilter; label: string }[] = [
 ];
 
 /** How often the group labels and the elapsed time of what loads now are redrawn. */
-const TICK_MS = 1000;
+const TICK_MS = 250;
 
 export interface ActivityFocus {
   /** Select the action that began with this interaction or frame. */
@@ -119,6 +124,11 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
   const [owner, setOwner] = createSignal<string>();
   const [live, setLive] = createSignal<LiveLoad[]>([]);
   const [now, setNow] = createSignal(performance.now());
+  const [paused, setPaused] = createSignal(false);
+  // What the list showed when it was paused.
+  const [frozenSrc, setFrozenSrc] = createSignal<ActivitySources>();
+  // The clock reads this outside any tracking scope.
+  let frozen = false;
   const [observed, setObserved] = createSignal(0);
   const since = new Map<string, number>();
   const memory = new ValueMemory();
@@ -152,7 +162,9 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
       }
       const stop = startReactivityTracking();
       const unsubscribe = subscribeReactivityGraph(read);
-      const timer = setInterval(() => setNow(performance.now()), TICK_MS);
+      const timer = setInterval(() => {
+        if (!frozen) setNow(performance.now());
+      }, TICK_MS);
       read();
       return () => {
         clearInterval(timer);
@@ -195,16 +207,59 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
     },
   );
 
-  const collected = createMemo(() =>
-    collectRows({
+  // The strip and the list cover the last `WINDOW_MS`. While paused nothing newer than the pause shows.
+  const range = createMemo(() => {
+    const current = viewRange(now());
+    return paused() ? current : { ...current, until: Number.POSITIVE_INFINITY };
+  });
+
+  // A picked time range that has slid out of the strip is dropped.
+  createEffect(
+    () => {
+      const picked = timeRange();
+      return picked !== undefined && picked.to < now() - WINDOW_MS;
+    },
+    (stale) => {
+      if (stale) setTimeRange(undefined);
+    },
+  );
+
+  function togglePause(): void {
+    const next = !paused();
+    frozen = next;
+    // Pausing keeps what is shown, so the stores can evict without the view losing rows.
+    setFrozenSrc(
+      next
+        ? {
+            entries: props.entries,
+            instances: props.instances,
+            records: props.records,
+            errors: props.errors,
+            live: live(),
+          }
+        : undefined,
+    );
+    // Resuming jumps back to live.
+    if (!next) setNow(performance.now());
+    setPaused(next);
+  }
+
+  const collected = createMemo(() => {
+    const current: ActivitySources = {
       entries: props.entries,
       instances: props.instances,
       records: props.records,
       errors: props.errors,
       live: live(),
+    };
+    const frozenNow = frozenSrc();
+    return collectRows({
+      ...(frozenNow ? frozenSources(frozenNow, current) : current),
       unfold: unfold(),
-    }),
-  );
+      range: range(),
+      pinned: selected(),
+    });
+  });
 
   const shown = createMemo(() => {
     const rows: ActivityRow[] = [];
@@ -221,7 +276,7 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
   });
 
   const buckets = createMemo(() => bucketRows(shown(), now()));
-  const lanes = createMemo(() => layoutLanes(collected().rows));
+  const lanes = createMemo(() => layoutLanes(collected().rows, now()));
   const selection = createMemo(() => resolveSelection(collected().rows, selected()));
 
   // Each detail reads its own memo, which holds the same object while the list
@@ -338,13 +393,27 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
                       type="button"
                       data-solid-activity-chip
                       data-clear
-                      disabled={!collected().rows.length}
+                      disabled={!props.entries.length && !props.records.length}
                       title="Clear the timeline and the async history"
                       onClick={clear}
                     >
                       Clear
                     </button>
                   </Show>
+                  <button
+                    type="button"
+                    data-solid-activity-pause
+                    aria-pressed={paused() ? 'true' : 'false'}
+                    aria-label={paused() ? 'Resume live updates' : 'Pause live updates'}
+                    title={paused() ? 'Resume live updates' : 'Pause live updates'}
+                    onClick={togglePause}
+                  >
+                    <Show
+                      when={paused()}
+                      fallback={<PauseIcon title="Pause live updates" />}
+                      children={<PlayIcon title="Resume live updates" />}
+                    />
+                  </button>
                 </div>
 
                 <Show
@@ -353,7 +422,7 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
                     <div data-solid-activity-empty>
                       {collected().rows.length
                         ? 'Nothing matches this filter.'
-                        : 'Interact with the app to see what each action re-ran.'}
+                        : 'Nothing happened in the last 30 seconds.'}
                     </div>
                   }
                 >
diff --git a/src/dev-toolbar/activity/model.test.ts b/src/dev-toolbar/activity/model.test.ts
index c8580be..45c67a0 100644
--- a/src/dev-toolbar/activity/model.test.ts
+++ b/src/dev-toolbar/activity/model.test.ts
@@ -4,6 +4,7 @@ import type { ErrorRecord } from '../error-record.js';
 import type { ServerFunctionInstance } from '../functions/index.js';
 import type { TimelineEntry, TimelineRun } from '../timeline/tracker.js';
 import {
+  axisMarks,
   bucketLabel,
   bucketRows,
   callBars,
@@ -11,6 +12,7 @@ import {
   countNames,
   entryLocation,
   firstMemoDelta,
+  frozenSources,
   handlerLocation,
   inWindow,
   layoutLanes,
@@ -24,6 +26,8 @@ import {
   shiftWindow,
   summarizeChain,
   ValueMemory,
+  viewRange,
+  WINDOW_MS,
   type ActivityRow,
 } from './model.js';
 
@@ -271,43 +275,165 @@ describe('time groups', () => {
 });
 
 describe('lanes', () => {
-  it('places ticks by time and marks the actions with many re-runs', () => {
+  const NOW = 100_000;
+
+  it('places ticks and bars along the last 30 seconds', () => {
     const many = Array.from({ length: 9 }, (_, i) => run(i, 'm', 'memo', 0, 1));
     const { rows } = collect({
       entries: [
-        entry(2, 'big', 1000, { runs: many, flushMs: 0 }),
-        entry(1, 'small', 0, { flushMs: 0 }),
+        entry(2, 'big', NOW - 15_000, { runs: many, flushMs: 0 }),
+        entry(1, 'small', NOW, { flushMs: 0 }),
       ],
-      instances: { 'fn#1': server(500, 250) },
+      instances: { 'fn#1': server(NOW - 24_000, 3000) },
       records: [
         {
           type: 'wait',
           id: 1,
-          at: 250,
-          event: { blockers: [], holdMs: 500 },
+          at: NOW - 15_000,
+          event: { blockers: [], holdMs: 6000 },
         } as unknown as AsyncRecord,
       ],
     });
-    const lanes = layoutLanes(rows);
-    expect(lanes.start).toBe(0);
-    expect(lanes.end).toBe(1000);
+    const lanes = layoutLanes(rows, NOW);
+    expect(lanes.start).toBe(NOW - WINDOW_MS);
+    expect(lanes.end).toBe(NOW);
     expect(lanes.actions.map((tick) => [tick.left, tick.big])).toEqual([
-      [100, true],
-      [0, false],
+      [100, false],
+      [50, true],
     ]);
-    expect(lanes.server).toEqual([{ left: 50, width: 25, big: false, member: 's:fn#1' }]);
-    expect(lanes.async).toEqual([{ left: 25, width: 50, big: false, member: 'w:1' }]);
+    expect(lanes.server).toEqual([{ left: 20, width: 10, big: false, member: 's:fn#1' }]);
+    expect(lanes.async).toEqual([{ left: 50, width: 20, big: false, member: 'w:1' }]);
+  });
+
+  it('drops ticks before the start and clips bars that cross it', () => {
+    const { rows } = collect({
+      entries: [entry(1, 'old', NOW - 40_000, { flushMs: 0 })],
+      instances: {
+        'fn#1': server(NOW - 35_000, 10_000),
+        'fn#2': server(NOW - 50_000, 5000),
+      },
+    });
+    const lanes = layoutLanes(rows, NOW);
+    expect(lanes.actions).toEqual([]);
+    expect(lanes.server).toHaveLength(1);
+    expect(lanes.server[0]).toMatchObject({ left: 0 });
+    expect(lanes.server[0]!.width).toBeCloseTo((5000 / WINDOW_MS) * 100);
+  });
+
+  it('runs a pending call and a load in flight up to now', () => {
+    const { rows } = collect({
+      instances: { 'fn#1': server(NOW - 3000) },
+      live: [{ id: 'n', name: 'user', ownerPath: [], since: NOW - 6000, raw: {} }],
+    });
+    const lanes = layoutLanes(rows, NOW);
+    expect(lanes.server[0]).toMatchObject({ left: 90, width: 10 });
+    expect(lanes.async[0]).toMatchObject({ left: 80, width: 20 });
   });
 
-  it('gives an empty session a range to draw', () => {
-    const lanes = layoutLanes([]);
-    expect(lanes.end - lanes.start).toBeGreaterThan(0);
+  it('gives an empty session an empty strip', () => {
+    const lanes = layoutLanes([], NOW);
+    expect(lanes.end - lanes.start).toBe(WINDOW_MS);
     expect(lanes.actions).toEqual([]);
   });
 
   it('ticks every entry of a fold', () => {
-    const { rows } = collect({ entries: [entry(2, 'tick', 200), entry(1, 'tick', 100)] });
-    expect(layoutLanes(rows).actions).toHaveLength(2);
+    const { rows } = collect({
+      entries: [entry(2, 'tick', NOW - 100), entry(1, 'tick', NOW - 200)],
+    });
+    expect(layoutLanes(rows, NOW).actions).toHaveLength(2);
+  });
+});
+
+describe('axis', () => {
+  it('labels every 10 seconds and ends with now', () => {
+    expect(axisMarks()).toEqual([
+      { label: '\u221230s', left: 0 },
+      { label: '\u221220s', left: (10 / 30) * 100 },
+      { label: '\u221210s', left: (20 / 30) * 100 },
+      { label: 'now', left: 100 },
+    ]);
+  });
+});
+
+describe('a paused view', () => {
+  const NOW = 100_000;
+  const range = { since: NOW - WINDOW_MS, until: NOW };
+
+  it('keeps the rows the stores evicted and the pending call that answered', () => {
+    const empty = { entries: [], instances: {}, records: [], errors: [], live: [] };
+    const frozen = {
+      ...empty,
+      entries: [entry(2, 'tick', NOW - 100), entry(1, 'tick', NOW - 200)],
+      instances: { 'fn#1': server(NOW - 1000) },
+    };
+    // The store evicted both entries and a response arrived for the call.
+    const current = {
+      ...empty,
+      entries: [entry(9, 'new', NOW + 500)],
+      instances: { 'fn#1': server(NOW - 1000, 40) },
+    };
+    const sources = frozenSources(frozen, current);
+    const { rows, folded } = collectRows({ ...sources, unfold: false, range });
+    expect(rows.map((row) => row.title).sort()).toEqual(['refundOrder', 'tick']);
+    expect(rows.find((row) => row.kind === 'server')?.time).toBe('40.0ms');
+    expect(rows.find((row) => row.kind === 'action')?.count).toBe(2);
+    expect(folded).toBe(1);
+  });
+});
+
+describe('the last 30 seconds', () => {
+  const NOW = 100_000;
+  const range = viewRange(NOW);
+  const entries = [
+    entry(3, 'new', NOW - 1000),
+    entry(2, 'edge', NOW - 29_000),
+    entry(1, 'old', NOW - 60_000),
+  ];
+
+  it('lists only what ended within the window', () => {
+    const { rows } = collect({ entries, range });
+    expect(rows.map((row) => row.title)).toEqual(['new', 'edge']);
+  });
+
+  it('keeps a thing that began earlier but ended inside', () => {
+    const { rows } = collect({
+      entries: [entry(1, 'long', NOW - 40_000, { flushMs: 20_000 })],
+      range,
+    });
+    expect(rows).toHaveLength(1);
+  });
+
+  it('keeps the pinned row however old it is', () => {
+    const { rows } = collect({ entries, range, pinned: 'a:1' });
+    expect(rows.map((row) => row.title)).toEqual(['new', 'edge', 'old']);
+    const call = collect({
+      instances: { 'fn#1': server(NOW - 90_000, 5) },
+      range,
+      pinned: 's:fn#1',
+    });
+    expect(call.rows).toHaveLength(1);
+  });
+
+  it('counts only the folded rows in the window', () => {
+    const repeats = [
+      entry(4, 'tick', NOW - 100),
+      entry(3, 'tick', NOW - 200),
+      entry(2, 'tick', NOW - 50_000),
+      entry(1, 'tick', NOW - 60_000),
+    ];
+    expect(collect({ entries: repeats, range }).folded).toBe(1);
+    expect(collect({ entries: repeats }).folded).toBe(3);
+  });
+
+  it('counts a running call as now', () => {
+    const { rows } = collect({ instances: { 'fn#1': server(NOW - 90_000) }, range });
+    expect(rows).toHaveLength(1);
+  });
+
+  it('shows nothing newer than the pause', () => {
+    const paused = { since: NOW - WINDOW_MS, until: NOW - 5000 };
+    const { rows } = collect({ entries, range: paused });
+    expect(rows.map((row) => row.title)).toEqual(['edge']);
   });
 });
 
diff --git a/src/dev-toolbar/activity/model.ts b/src/dev-toolbar/activity/model.ts
index 6ebeced..0080771 100644
--- a/src/dev-toolbar/activity/model.ts
+++ b/src/dev-toolbar/activity/model.ts
@@ -57,11 +57,33 @@ export interface ActivityRow {
   subtitle: string;
   /** The right-aligned time or duration. */
   time: string;
+  /** Still going: a load in flight or a call with no answer yet. Its end is now. */
+  running?: boolean;
   /** How many entries the row folds. `1` for a plain row. */
   count: number;
   source: ActivitySource;
 }
 
+/** How far back the view looks. */
+export const WINDOW_MS = 30_000;
+
+/** The span the view shows: what ended since `since` and began by `until`. */
+export interface ViewRange {
+  since: number;
+  until: number;
+}
+
+/** The last `WINDOW_MS` up to `now`. */
+export function viewRange(now: number): ViewRange {
+  return { since: now - WINDOW_MS, until: now };
+}
+
+/** Whether a thing that began at `at` and ended at `end` belongs to the range. */
+export function inRange(at: number, end: number, range: ViewRange | undefined): boolean {
+  if (!range) return true;
+  return at <= range.until && end >= range.since;
+}
+
 export const GLYPHS = { act: 'A', srv: 'ƒ', wait: '⧗', err: '✕' } as const;
 
 export function actionKey(id: number): string {
@@ -162,6 +184,34 @@ function singleGroup(entry: TimelineEntry): TimelineGroup {
   };
 }
 
+/** What the rows are built from. */
+export interface ActivitySources {
+  entries: readonly TimelineEntry[];
+  instances: Record<string, ServerFunctionInstance | undefined>;
+  records: readonly AsyncRecord[];
+  errors: readonly ErrorRecord[];
+  live: readonly LiveLoad[];
+}
+
+/**
+ * The sources of a paused view: everything the pause took, with the newest
+ * state of what is still in the stores. Nothing the stores evicted since
+ * disappears, and nothing new appears. Only a row already shown updates, such
+ * as a pending call that got its response.
+ */
+export function frozenSources(frozen: ActivitySources, current: ActivitySources): ActivitySources {
+  const entries: TimelineEntry[] = [];
+  const latest = new Map<number, TimelineEntry>();
+  for (const entry of current.entries) latest.set(entry.id, entry);
+  for (const entry of frozen.entries) entries.push(latest.get(entry.id) ?? entry);
+
+  const instances: Record<string, ServerFunctionInstance | undefined> = {};
+  for (const key of Object.keys(frozen.instances)) {
+    instances[key] = current.instances[key] ?? frozen.instances[key];
+  }
+  return { ...frozen, entries, instances };
+}
+
 export interface CollectInput {
   entries: readonly TimelineEntry[];
   instances: Record<string, ServerFunctionInstance | undefined>;
@@ -170,6 +220,10 @@ export interface CollectInput {
   live: readonly LiveLoad[];
   /** Show every entry as its own row, unnamed updates included. */
   unfold: boolean;
+  /** Keeps only what falls in the range. Everything when absent. */
+  range?: ViewRange;
+  /** The selection key of a row that stays listed whatever its age. */
+  pinned?: string;
 }
 
 export interface Collected {
@@ -223,6 +277,7 @@ function serverRow(
     title: callName(value),
     subtitle: owner ? `${status} · from ${owner}` : `${status} · ${value.request.source.method}`,
     time: duration === undefined ? (status === '…' ? 'live' : '') : ms(duration),
+    running: !value.response && status === '…',
     count: 1,
     source: { type: 'server', instance, value },
   };
@@ -279,6 +334,7 @@ function liveRow(load: LiveLoad): ActivityRow {
     title: `${load.name} loading`,
     subtitle: load.ownerPath.length ? load.ownerPath.join(' › ') : 'loading now',
     time: 'live',
+    running: true,
     count: 1,
     source: { type: 'live', load },
   };
@@ -294,6 +350,12 @@ export function collectRows(input: CollectInput): Collected {
   for (const entry of input.entries) {
     // A click that changed nothing, such as one on the toolbar itself, is never listed.
     if (isIdleEntry(entry)) continue;
+    if (
+      !inRange(entry.at, entry.at + entryDuration(entry), input.range) &&
+      actionKey(entry.id) !== input.pinned
+    ) {
+      continue;
+    }
     if (isUnnamedUpdate(entry)) {
       folded++;
       if (input.unfold) named.push(entry);
@@ -333,6 +395,22 @@ export function collectRows(input: CollectInput): Collected {
     rows.push(errorRow(input.errors[index]!, index, input.entries));
   }
 
+  // Only the actions fold, so the rest are cut to the range here.
+  if (input.range) {
+    const kept: ActivityRow[] = [];
+    for (const row of rows) {
+      if (row.source.type === 'action') kept.push(row);
+      else if (
+        row.members.includes(input.pinned ?? '') ||
+        inRange(row.at, row.running ? input.range.until : row.end, input.range)
+      ) {
+        kept.push(row);
+      }
+    }
+    rows.length = 0;
+    rows.push(...kept);
+  }
+
   // Newest first. The sort is stable, so ties keep their source order.
   rows.sort((a, b) => b.at - a.at);
   return { rows, folded };
@@ -482,63 +560,67 @@ export interface Lanes {
   async: LaneTick[];
 }
 
-/** The shortest span the strip covers, so one early entry does not fill it. */
-export const MIN_SPAN_MS = 1000;
-
-function percent(value: number, start: number, span: number): number {
-  return ((value - start) / span) * 100;
+/** A bar from `at` to `end`, clipped to the strip, or `undefined` when it lies outside. */
+function clipBar(
+  at: number,
+  end: number,
+  lanes: Pick<Lanes, 'start' | 'end'>,
+): { left: number; width: number } | undefined {
+  if (end < lanes.start || at > lanes.end) return undefined;
+  const span = lanes.end - lanes.start;
+  const from = Math.max(at, lanes.start);
+  const to = Math.min(Math.max(end, at), lanes.end);
+  return { left: ((from - lanes.start) / span) * 100, width: ((to - from) / span) * 100 };
 }
 
-/** Positions every item of the three lanes along the time range they cover. */
-export function layoutLanes(rows: readonly ActivityRow[]): Lanes {
-  const lanes: Lanes = { start: 0, end: MIN_SPAN_MS, actions: [], server: [], async: [] };
-  if (!rows.length) return lanes;
-
-  // The range runs from the oldest start to the latest end.
-  let start = Infinity;
-  let end = -Infinity;
-  for (const row of rows) {
-    if (row.kind === 'error') continue;
-    start = Math.min(start, row.at);
-    end = Math.max(end, row.end);
-  }
-  if (!Number.isFinite(start)) return lanes;
-  end = Math.max(end, start + MIN_SPAN_MS);
-  const span = end - start;
-  lanes.start = start;
-  lanes.end = end;
+/** Positions the items of the three lanes along the last `WINDOW_MS` up to `now`. */
+export function layoutLanes(rows: readonly ActivityRow[], now: number): Lanes {
+  const lanes: Lanes = { start: now - WINDOW_MS, end: now, actions: [], server: [], async: [] };
 
   for (const row of rows) {
     const { source } = row;
     if (source.type === 'action') {
-      // Every entry of a fold is its own tick.
+      // Every entry of a fold is its own tick, and a tick before the start is dropped.
       for (const entry of source.entries) {
+        const at = clipBar(entry.at, entry.at, lanes);
+        if (!at) continue;
         lanes.actions.push({
-          left: percent(entry.at, start, span),
+          left: at.left,
           width: 0,
           big: entryRunCount(entry) >= BIG_RUNS,
           member: actionKey(entry.id),
         });
       }
-    } else if (row.kind === 'server') {
-      lanes.server.push({
-        left: percent(row.at, start, span),
-        width: ((row.end - row.at) / span) * 100,
-        big: false,
-        member: row.members[0]!,
-      });
-    } else if (row.kind === 'async') {
-      lanes.async.push({
-        left: percent(row.at, start, span),
-        width: ((row.end - row.at) / span) * 100,
-        big: false,
-        member: row.members[0]!,
-      });
+    } else if (row.kind === 'server' || row.kind === 'async') {
+      const bar = clipBar(row.at, row.running ? now : row.end, lanes);
+      if (!bar) continue;
+      const tick = { left: bar.left, width: bar.width, big: false, member: row.members[0]! };
+      if (row.kind === 'server') lanes.server.push(tick);
+      else lanes.async.push(tick);
     }
   }
   return lanes;
 }
 
+export interface AxisMark {
+  label: string;
+  /** Percent of the strip. */
+  left: number;
+}
+
+/** The labels under the strip, one every `stepMs`, ending with `now`. */
+export function axisMarks(windowMs = WINDOW_MS, stepMs = 10_000): AxisMark[] {
+  const marks: AxisMark[] = [];
+  for (let back = windowMs; back > 0; back -= stepMs) {
+    marks.push({
+      label: `\u2212${Math.round(back / 1000)}s`,
+      left: ((windowMs - back) / windowMs) * 100,
+    });
+  }
+  marks.push({ label: 'now', left: 100 });
+  return marks;
+}
+
 /** Percent of the strip to a time. */
 export function timeAt(lanes: Pick<Lanes, 'start' | 'end'>, fraction: number): number {
   return lanes.start + Math.min(1, Math.max(0, fraction)) * (lanes.end - lanes.start);
diff --git a/src/dev-toolbar/activity/scrub.tsx b/src/dev-toolbar/activity/scrub.tsx
index 99bdab5..58e71a2 100644
--- a/src/dev-toolbar/activity/scrub.tsx
+++ b/src/dev-toolbar/activity/scrub.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from '@solidjs/web';
 import { For, Show } from 'solid-js';
 import {
+  axisMarks,
   makeWindow,
   shiftWindow,
   timeAt,
@@ -16,6 +17,8 @@ const KEY_STEP = 0.02;
 /** Pixels a drag has to travel before it counts as a drag and not a click. */
 const DRAG_SLOP = 3;
 
+const MARKS = axisMarks();
+
 type DragMode = 'new' | 'move' | 'from' | 'to';
 
 export interface ScrubProps {
@@ -27,15 +30,15 @@ export interface ScrubProps {
 
 function Ticks(props: { ticks: LaneTick[]; selected: string | undefined }): JSX.Element {
   return (
-    <For each={props.ticks}>
+    <For each={props.ticks} keyed={(tick) => tick.member}>
       {(tick) => (
         <span
           data-solid-activity-tick
-          data-big={tick.big ? '' : undefined}
-          data-selected={props.selected === tick.member ? '' : undefined}
+          data-big={tick().big ? '' : undefined}
+          data-selected={props.selected === tick().member ? '' : undefined}
           style={{
-            left: `${tick.left}%`,
-            width: tick.width ? `${tick.width}%` : undefined,
+            left: `${tick().left}%`,
+            width: tick().width ? `${tick().width}%` : undefined,
           }}
         />
       )}
@@ -123,6 +126,21 @@ export function Scrub(props: ScrubProps): JSX.Element {
         <label>Async</label>
         <Ticks ticks={props.lanes.async} selected={props.selected} />
       </div>
+      <div data-solid-activity-grid aria-hidden="true">
+        <For each={MARKS}>
+          {(mark) => <span data-solid-activity-gridline style={{ left: `${mark.left}%` }} />}
+        </For>
+        <span data-solid-activity-nowline />
+      </div>
+      <div data-solid-activity-axis aria-hidden="true">
+        <For each={MARKS}>
+          {(mark) => (
+            <span data-solid-activity-axis-label style={{ left: `${mark.left}%` }}>
+              {mark.label}
+            </span>
+          )}
+        </For>
+      </div>
       <div
         ref={track}
         data-solid-activity-track-area
diff --git a/src/dev-toolbar/activity/styles.css b/src/dev-toolbar/activity/styles.css
index 6bf5e27..2cb888b 100644
--- a/src/dev-toolbar/activity/styles.css
+++ b/src/dev-toolbar/activity/styles.css
@@ -620,3 +620,78 @@
   color: var(--start-dt-text-muted);
   padding: 2px 0;
 }
+
+/* the time axis: gridlines every 10s through the lanes, labels under them */
+[data-solid-activity-grid] {
+  position: absolute;
+  top: 0;
+  bottom: 20px;
+  left: 84px;
+  right: 14px;
+  pointer-events: none;
+}
+
+[data-solid-activity-gridline] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--start-dt-line);
+}
+
+[data-solid-activity-nowline] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  background: var(--start-dt-line-2);
+}
+
+[data-solid-activity-axis] {
+  position: relative;
+  height: 13px;
+  margin-top: 2px;
+}
+
+[data-solid-activity-axis-label] {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font: 9.5px/13px var(--start-dt-mono);
+  color: var(--start-dt-faint);
+  white-space: nowrap;
+}
+
+[data-solid-activity-axis-label]:last-child {
+  transform: translateX(-100%);
+}
+
+[data-solid-activity-axis-label]:first-child {
+  transform: none;
+}
+
+[data-solid-activity-pause] {
+  margin-left: auto;
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border-radius: 7px;
+  color: var(--start-dt-text-muted);
+}
+
+[data-solid-activity-pause]:hover {
+  background: oklch(1 0 0 / 0.06);
+  color: var(--start-dt-text);
+}
+
+[data-solid-activity-pause][aria-pressed='true'] {
+  color: var(--start-dt-solid);
+}
+
+[data-solid-activity-chip][data-ghost] ~ [data-solid-activity-pause] {
+  margin-left: 0;
+}

From a2729909b54452111fab26b80399d655fb95607e Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 12:05:25 +0800
Subject: [PATCH 06/10] docs(changeset): describe the 30-second Activity window

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/dock-three-views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/dock-three-views.md b/.changeset/dock-three-views.md
index 0a4a6d4..a003d28 100644
--- a/.changeset/dock-three-views.md
+++ b/.changeset/dock-three-views.md
@@ -4,7 +4,7 @@
 
 - The dock has three views in its header: Health, Activity and Structure. The header shows the `solid-js` version the app runs, in place of the toolbar's title and version.
 - Health lists thrown errors and runtime issues together, with search and severity chips. An error shows the function it was thrown in, when it was caught, the action it was caught during with a link to it, its stack frames beside the source, and "Open in editor".
-- Activity merges actions, server-function calls, async loads and waits, and errors into one stream with a lanes strip, filter chips and time groups. Repeated actions fold into one row. An action shows what it wrote, what re-ran and which effects ran, then waterfalls of its re-runs and server calls.
+- Activity merges actions, server-function calls, async loads and waits, and errors into one stream over the last 30 seconds, with a live lanes strip on a time axis, filter chips, time groups and a pause button. Repeated actions fold into one row. An action shows what it wrote, what re-ran and which effects ran, then waterfalls of its re-runs and server calls.
 - Structure shows the ownership tree or the reactivity graph. Tree rows show signal and memo counts and how recently and how often their computations update. "Hide Solid internals" folds Solid's own components away. The detail lists props, signals and memos by kind, with a signal's previous value.
 - ⌘K (Ctrl+K) opens a search across components, signals, memos, actions and server functions while the dock is open.
 - The timeline keeps distinct actions when one action repeats many times, such as an animation loop.

From 17eda44dc2450ae419b4511e14ad3932e8f026bf Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 12:21:41 +0800
Subject: [PATCH 07/10] fix(activity): keep every action from the last 30
 seconds

The timeline kept 100 entries and the async history its own count, so a
loop such as an animation frame pushed actions out of the window within a
second. Both now keep everything from the last 30 seconds, with a large
safety cap. A fast run of one action draws as one bar on the strip, and the
view redraws from a sample at most every 250ms.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/dev-toolbar/activity/index.tsx       | 114 ++++++++++++++++-------
 src/dev-toolbar/activity/model.test.ts   |  39 +++++++-
 src/dev-toolbar/activity/model.ts        |  80 ++++++++++++----
 src/dev-toolbar/activity/scrub.tsx       |   8 +-
 src/dev-toolbar/activity/styles.css      |   4 +
 src/dev-toolbar/async/tracker.test.ts    |  18 ++++
 src/dev-toolbar/async/tracker.ts         |  23 ++++-
 src/dev-toolbar/timeline/tracker.test.ts |  62 +++++++-----
 src/dev-toolbar/timeline/tracker.ts      |  56 +++++------
 9 files changed, 299 insertions(+), 105 deletions(-)

diff --git a/src/dev-toolbar/activity/index.tsx b/src/dev-toolbar/activity/index.tsx
index 70175dc..0f474cf 100644
--- a/src/dev-toolbar/activity/index.tsx
+++ b/src/dev-toolbar/activity/index.tsx
@@ -49,6 +49,8 @@ const FILTERS: { value: ActivityFilter; label: string }[] = [
 
 /** How often the group labels and the elapsed time of what loads now are redrawn. */
 const TICK_MS = 250;
+/** Longest the view waits to read the graph after it changed. */
+const GRAPH_READ_MS = 100;
 
 export interface ActivityFocus {
   /** Select the action that began with this interaction or frame. */
@@ -123,12 +125,44 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
   const [timeRange, setTimeRange] = createSignal<TimeWindow>();
   const [owner, setOwner] = createSignal<string>();
   const [live, setLive] = createSignal<LiveLoad[]>([]);
-  const [now, setNow] = createSignal(performance.now());
   const [paused, setPaused] = createSignal(false);
   // What the list showed when it was paused.
-  const [frozenSrc, setFrozenSrc] = createSignal<ActivitySources>();
-  // The clock reads this outside any tracking scope.
+  // Read by the sampler, outside any tracking scope.
+  let frozenSrc: ActivitySources | undefined;
+  // The clock reads these outside any tracking scope.
   let frozen = false;
+  let pausedAt = 0;
+  let lastSample = 0;
+  let graphChanged = true;
+  let liveSignature = '';
+  // The list and the strip redraw from a sample taken at most every `TICK_MS`,
+  // however often the stores change. A loop that updates 60 times a second
+  // would otherwise rebuild every row 60 times a second.
+  function currentSources(): ActivitySources {
+    return {
+      entries: props.entries,
+      instances: props.instances,
+      records: props.records,
+      errors: props.errors,
+      live: live(),
+    };
+  }
+  const [view, setView] = createSignal<{ sources: ActivitySources; now: number }>({
+    sources: { entries: [], instances: {}, records: [], errors: [], live: [] },
+    now: performance.now(),
+  });
+  const now = () => view().now;
+
+  function sample(taken?: ActivitySources): void {
+    lastSample = performance.now();
+    const frozenNow = frozenSrc;
+    const current = taken ?? currentSources();
+    setView({
+      sources: frozenNow ? frozenSources(frozenNow, current) : current,
+      now: frozen ? pausedAt : lastSample,
+    });
+  }
+
   const [observed, setObserved] = createSignal(0);
   const since = new Map<string, number>();
   const memory = new ValueMemory();
@@ -159,15 +193,40 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
         // Step 2: forget what stopped loading.
         for (const id of since.keys()) if (!ids.has(id)) since.delete(id);
         setLive(loads);
+        // A load that starts or lands shows at once, not at the next tick.
+        const signature = [...ids].join('|');
+        if (signature !== liveSignature) {
+          liveSignature = signature;
+          queueMicrotask(() => sample());
+        }
       }
       const stop = startReactivityTracking();
-      const unsubscribe = subscribeReactivityGraph(read);
+      // The graph is read at the tick and only if it changed, since reading all of it costs.
+      let readTimer: ReturnType<typeof setTimeout> | undefined;
+      const unsubscribe = subscribeReactivityGraph(() => {
+        graphChanged = true;
+        // Reads are spaced out, since reading the whole graph costs.
+        readTimer ??= setTimeout(() => {
+          readTimer = undefined;
+          if (!graphChanged) return;
+          graphChanged = false;
+          read();
+        }, GRAPH_READ_MS);
+      });
       const timer = setInterval(() => {
-        if (!frozen) setNow(performance.now());
+        if (graphChanged) {
+          graphChanged = false;
+          read();
+        }
+        sample();
       }, TICK_MS);
+      graphChanged = false;
       read();
+      // Outside the effect, since reading the stores here would be an untracked read.
+      queueMicrotask(() => sample());
       return () => {
         clearInterval(timer);
+        clearTimeout(readTimer);
         unsubscribe();
         stop();
       };
@@ -175,6 +234,14 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
   );
   onCleanup(() => since.clear());
 
+  // A change in the stores shows at once when the last sample is old enough, else at the next tick.
+  createEffect(
+    () => ({ show: !!props.show, sources: currentSources() }),
+    ({ show, sources }) => {
+      if (show && performance.now() - lastSample >= TICK_MS) sample(sources);
+    },
+  );
+
   // The values of the memos that re-ran are read as the runs arrive, so the next run can show what it changed from.
   createEffect(
     () => props.entries,
@@ -209,7 +276,7 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
 
   // The strip and the list cover the last `WINDOW_MS`. While paused nothing newer than the pause shows.
   const range = createMemo(() => {
-    const current = viewRange(now());
+    const current = viewRange(view().now);
     return paused() ? current : { ...current, until: Number.POSITIVE_INFINITY };
   });
 
@@ -228,38 +295,21 @@ export default function ActivityViewer(props: ActivityViewerProps): JSX.Element
     const next = !paused();
     frozen = next;
     // Pausing keeps what is shown, so the stores can evict without the view losing rows.
-    setFrozenSrc(
-      next
-        ? {
-            entries: props.entries,
-            instances: props.instances,
-            records: props.records,
-            errors: props.errors,
-            live: live(),
-          }
-        : undefined,
-    );
-    // Resuming jumps back to live.
-    if (!next) setNow(performance.now());
+    pausedAt = view().now;
+    frozenSrc = next ? view().sources : undefined;
     setPaused(next);
+    // Resuming jumps back to live.
+    sample();
   }
 
-  const collected = createMemo(() => {
-    const current: ActivitySources = {
-      entries: props.entries,
-      instances: props.instances,
-      records: props.records,
-      errors: props.errors,
-      live: live(),
-    };
-    const frozenNow = frozenSrc();
-    return collectRows({
-      ...(frozenNow ? frozenSources(frozenNow, current) : current),
+  const collected = createMemo(() =>
+    collectRows({
+      ...view().sources,
       unfold: unfold(),
       range: range(),
       pinned: selected(),
-    });
-  });
+    }),
+  );
 
   const shown = createMemo(() => {
     const rows: ActivityRow[] = [];
diff --git a/src/dev-toolbar/activity/model.test.ts b/src/dev-toolbar/activity/model.test.ts
index 45c67a0..ac02ecf 100644
--- a/src/dev-toolbar/activity/model.test.ts
+++ b/src/dev-toolbar/activity/model.test.ts
@@ -336,11 +336,46 @@ describe('lanes', () => {
     expect(lanes.actions).toEqual([]);
   });
 
-  it('ticks every entry of a fold', () => {
+  it('draws a close fold as one bar of all its entries', () => {
     const { rows } = collect({
       entries: [entry(2, 'tick', NOW - 100), entry(1, 'tick', NOW - 200)],
     });
-    expect(layoutLanes(rows, NOW).actions).toHaveLength(2);
+    // Two entries 100ms apart read as one bar standing for both.
+    expect(layoutLanes(rows, NOW).actions[0]!.members).toHaveLength(2);
+  });
+});
+
+describe('run bars', () => {
+  const NOW = 100_000;
+
+  it('joins entries of a folded action less than 250ms apart into one bar', () => {
+    const entries = [];
+    for (let i = 0; i < 60; i++)
+      entries.push(entry(60 - i, 'frame', NOW - 5000 + (59 - i) * 16, { flushMs: 1 }));
+    const { rows } = collect({ entries });
+    const lanes = layoutLanes(rows, NOW);
+    expect(lanes.actions).toHaveLength(1);
+    const bar = lanes.actions[0]!;
+    expect(bar.members).toHaveLength(60);
+    const span = (59 * 16 + 1) / WINDOW_MS;
+    expect(bar.width).toBeCloseTo(span * 100);
+    expect(bar.left).toBeCloseTo(((WINDOW_MS - 5000) / WINDOW_MS) * 100);
+  });
+
+  it('keeps sparse entries as ticks and splits runs at a long gap', () => {
+    const at = [NOW - 20_000, NOW - 19_900, NOW - 19_800, NOW - 10_000];
+    const entries = [];
+    for (let i = 0; i < at.length; i++)
+      entries.push(entry(at.length - i, 'tick', at[at.length - 1 - i]!));
+    const lanes = layoutLanes(collect({ entries }).rows, NOW);
+    expect(lanes.actions).toHaveLength(2);
+    expect(lanes.actions.map((tick) => tick.members?.length ?? 1).sort()).toEqual([1, 3]);
+  });
+
+  it('keeps single actions as ticks and unfolded entries apart', () => {
+    const entries = [entry(2, 'x', NOW - 100), entry(1, 'x', NOW - 150)];
+    const unfolded = layoutLanes(collect({ entries, unfold: true }).rows, NOW);
+    expect(unfolded.actions.every((tick) => tick.width === 0)).toBe(true);
   });
 });
 
diff --git a/src/dev-toolbar/activity/model.ts b/src/dev-toolbar/activity/model.ts
index 0080771..09f2c59 100644
--- a/src/dev-toolbar/activity/model.ts
+++ b/src/dev-toolbar/activity/model.ts
@@ -14,6 +14,7 @@ import {
 import {
   isIdleEntry,
   isUnnamedUpdate,
+  WINDOW_MS,
   type TimelineEntry,
   type TimelineRun,
 } from '../timeline/tracker.js';
@@ -64,8 +65,8 @@ export interface ActivityRow {
   source: ActivitySource;
 }
 
-/** How far back the view looks. */
-export const WINDOW_MS = 30_000;
+/** How far back the view looks. The stores keep the same span. */
+export { WINDOW_MS };
 
 /** The span the view shows: what ended since `since` and began by `until`. */
 export interface ViewRange {
@@ -412,7 +413,7 @@ export function collectRows(input: CollectInput): Collected {
   }
 
   // Newest first. The sort is stable, so ties keep their source order.
-  rows.sort((a, b) => b.at - a.at);
+  rows.sort((a, b) => b.end - a.end);
   return { rows, folded };
 }
 
@@ -530,7 +531,7 @@ export function bucketLabel(ageMs: number): string {
 export function bucketRows(rows: readonly ActivityRow[], now: number): RowBucket[] {
   const buckets: RowBucket[] = [];
   for (const row of rows) {
-    const label = bucketLabel(now - row.at);
+    const label = bucketLabel(now - row.end);
     const last = buckets[buckets.length - 1];
     if (last && last.label === label) last.rows.push(row);
     else buckets.push({ label, rows: [row] });
@@ -550,8 +551,13 @@ export interface LaneTick {
   big: boolean;
   /** The row the tick stands for, so a click can select it. */
   member: string;
+  /** Every entry a run bar stands for. */
+  members?: string[];
 }
 
+/** Entries of one action closer than this draw as one bar. */
+export const RUN_GAP_MS = 250;
+
 export interface Lanes {
   start: number;
   end: number;
@@ -573,6 +579,46 @@ function clipBar(
   return { left: ((from - lanes.start) / span) * 100, width: ((to - from) / span) * 100 };
 }
 
+/**
+ * The ticks of a folded action, whose entries are newest first. Entries less
+ * than `RUN_GAP_MS` apart join into one bar from the start of the first to the
+ * end of the last, so a loop of 60 updates a second reads as one band. A lone
+ * entry stays a tick. A plain row's one entry is a tick.
+ */
+function pushActionTicks(lanes: Lanes, entries: readonly TimelineEntry[], folded: boolean): void {
+  let run: TimelineEntry[] = [];
+
+  function closeRun(): void {
+    if (!run.length) return;
+    const first = run[0]!;
+    const last = run[run.length - 1]!;
+    const big = run.some((entry) => entryRunCount(entry) >= BIG_RUNS);
+    if (run.length === 1) {
+      const tick = clipBar(first.at, first.at, lanes);
+      if (tick) {
+        lanes.actions.push({ left: tick.left, width: 0, big, member: actionKey(first.id) });
+      }
+    } else {
+      const bar = clipBar(first.at, last.at + entryDuration(last), lanes);
+      if (bar) {
+        const members: string[] = [];
+        for (const entry of run) members.push(actionKey(entry.id));
+        lanes.actions.push({ left: bar.left, width: bar.width, big, member: members[0]!, members });
+      }
+    }
+    run = [];
+  }
+
+  // Walk oldest to newest.
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const entry = entries[i]!;
+    const previous = run[run.length - 1];
+    if (previous && (!folded || entry.at - previous.at >= RUN_GAP_MS)) closeRun();
+    run.push(entry);
+  }
+  closeRun();
+}
+
 /** Positions the items of the three lanes along the last `WINDOW_MS` up to `now`. */
 export function layoutLanes(rows: readonly ActivityRow[], now: number): Lanes {
   const lanes: Lanes = { start: now - WINDOW_MS, end: now, actions: [], server: [], async: [] };
@@ -580,17 +626,7 @@ export function layoutLanes(rows: readonly ActivityRow[], now: number): Lanes {
   for (const row of rows) {
     const { source } = row;
     if (source.type === 'action') {
-      // Every entry of a fold is its own tick, and a tick before the start is dropped.
-      for (const entry of source.entries) {
-        const at = clipBar(entry.at, entry.at, lanes);
-        if (!at) continue;
-        lanes.actions.push({
-          left: at.left,
-          width: 0,
-          big: entryRunCount(entry) >= BIG_RUNS,
-          member: actionKey(entry.id),
-        });
-      }
+      pushActionTicks(lanes, source.entries, row.count > 1);
     } else if (row.kind === 'server' || row.kind === 'async') {
       const bar = clipBar(row.at, row.running ? now : row.end, lanes);
       if (!bar) continue;
@@ -801,10 +837,20 @@ export class ValueMemory {
   private deltas = new WeakMap<TimelineRun, ValueDelta>();
   private seen = new WeakSet<TimelineRun>();
 
+  /** Entries already read. A builder snapshot reuses the object of an entry that did not change. */
+  private done = new WeakSet<TimelineEntry>();
+
   /** Takes the entries newest first, as the builder keeps them. */
   observe(entries: readonly TimelineEntry[]): void {
-    for (let i = entries.length - 1; i >= 0; i--) {
-      for (const run of entries[i]!.runs) {
+    // Only entries that are new or changed since the last call, oldest first.
+    const fresh: TimelineEntry[] = [];
+    for (const entry of entries) {
+      if (!this.done.has(entry)) fresh.push(entry);
+    }
+    for (let i = fresh.length - 1; i >= 0; i--) {
+      const entry = fresh[i]!;
+      this.done.add(entry);
+      for (const run of entry.runs) {
         if (this.seen.has(run)) continue;
         this.seen.add(run);
         if (run.event.nodeKind !== 'memo') continue;
diff --git a/src/dev-toolbar/activity/scrub.tsx b/src/dev-toolbar/activity/scrub.tsx
index 58e71a2..4ba37bd 100644
--- a/src/dev-toolbar/activity/scrub.tsx
+++ b/src/dev-toolbar/activity/scrub.tsx
@@ -28,6 +28,11 @@ export interface ScrubProps {
   onWindow: (window: TimeWindow | undefined) => void;
 }
 
+function isSelected(tick: LaneTick, selected: string | undefined): boolean {
+  if (selected === undefined) return false;
+  return tick.member === selected || !!tick.members?.includes(selected);
+}
+
 function Ticks(props: { ticks: LaneTick[]; selected: string | undefined }): JSX.Element {
   return (
     <For each={props.ticks} keyed={(tick) => tick.member}>
@@ -35,7 +40,8 @@ function Ticks(props: { ticks: LaneTick[]; selected: string | undefined }): JSX.
         <span
           data-solid-activity-tick
           data-big={tick().big ? '' : undefined}
-          data-selected={props.selected === tick().member ? '' : undefined}
+          data-selected={isSelected(tick(), props.selected) ? '' : undefined}
+          data-run={tick().members ? '' : undefined}
           style={{
             left: `${tick().left}%`,
             width: tick().width ? `${tick().width}%` : undefined,
diff --git a/src/dev-toolbar/activity/styles.css b/src/dev-toolbar/activity/styles.css
index 2cb888b..ff662f2 100644
--- a/src/dev-toolbar/activity/styles.css
+++ b/src/dev-toolbar/activity/styles.css
@@ -695,3 +695,7 @@
 [data-solid-activity-chip][data-ghost] ~ [data-solid-activity-pause] {
   margin-left: 0;
 }
+
+[data-solid-activity-lane='actions'] [data-solid-activity-tick][data-run] {
+  border-radius: 3px;
+}
diff --git a/src/dev-toolbar/async/tracker.test.ts b/src/dev-toolbar/async/tracker.test.ts
index 61e71af..6403ff0 100644
--- a/src/dev-toolbar/async/tracker.test.ts
+++ b/src/dev-toolbar/async/tracker.test.ts
@@ -80,6 +80,24 @@ describe('AsyncHistory', () => {
   });
 });
 
+describe('retention by time', () => {
+  it('keeps the records of the last 30 seconds and drops older ones', () => {
+    const history = new AsyncHistory();
+    for (const at of [1000, 20_000, 40_000])
+      history.flight(flight({ at, nodeName: `n${at}` }), undefined);
+    history.flight(flight({ at: 45_000, nodeName: 'n45000' }), undefined);
+    expect(history.records.map((record) => record.at)).toEqual([45_000, 40_000, 20_000]);
+    expect(history.prune(80_000)).toBe(true);
+    expect(history.records).toEqual([]);
+  });
+
+  it('caps a runaway at the safety limit', () => {
+    const history = new AsyncHistory(3);
+    for (let at = 1; at <= 5; at++) history.flight(flight({ at }), undefined);
+    expect(history.records.map((record) => record.at)).toEqual([5, 4, 3]);
+  });
+});
+
 describe('concernOf', () => {
   it('flags replaced loads, silent and long waits, flashes and chains', () => {
     const history = new AsyncHistory();
diff --git a/src/dev-toolbar/async/tracker.ts b/src/dev-toolbar/async/tracker.ts
index ec04963..7158b44 100644
--- a/src/dev-toolbar/async/tracker.ts
+++ b/src/dev-toolbar/async/tracker.ts
@@ -7,6 +7,7 @@ import {
   type WaterfallRecord,
 } from 'solid-js/attribution';
 import { appOwnerPath } from '../issues/tracker.js';
+import { WINDOW_MS } from '../timeline/tracker.js';
 
 /** A fallback shown for less than this reads as a flash, as the runtime's `FALLBACK_FLASH` finding counts it. */
 export const FLASH_MS = 150;
@@ -25,8 +26,8 @@ function isToolbarNode(node: object | undefined): boolean {
   }
 }
 
-/** Most records the panel keeps. The oldest go first. */
-export const MAX_RECORDS = 200;
+/** A safety cap that only applies in a runaway. */
+export const MAX_RECORDS = 1000;
 
 /** One thing that happened while the app waited on async work. */
 export type AsyncRecord =
@@ -87,10 +88,24 @@ export class AsyncHistory {
   private sources = new WeakSet<object>();
   private seenChains = new WeakSet<WaterfallRecord>();
 
-  constructor(private readonly max = MAX_RECORDS) {}
+  constructor(
+    private readonly max = MAX_RECORDS,
+    private readonly windowMs = WINDOW_MS,
+  ) {}
 
   private add(record: AsyncRecord): void {
-    this.records = [record, ...this.records].slice(0, this.max);
+    this.records = [record, ...this.records];
+    this.prune(record.at);
+  }
+
+  /** Drops the records that began before the window ending at `now`, and the oldest past the safety cap. */
+  prune(now: number): boolean {
+    const cutoff = now - this.windowMs;
+    let keep = this.records.length;
+    while (keep > 0 && (keep > this.max || this.records[keep - 1]!.at < cutoff)) keep--;
+    if (keep === this.records.length) return false;
+    this.records = this.records.slice(0, keep);
+    return true;
   }
 
   flight(event: FlightEvent, node: object | undefined): void {
diff --git a/src/dev-toolbar/timeline/tracker.test.ts b/src/dev-toolbar/timeline/tracker.test.ts
index 932775f..e4232e8 100644
--- a/src/dev-toolbar/timeline/tracker.test.ts
+++ b/src/dev-toolbar/timeline/tracker.test.ts
@@ -8,14 +8,7 @@ import type {
 } from 'solid-js/attribution';
 import { timelineReport } from '../report/timeline-report.js';
 import type { CallEvent } from '@solidjs/web';
-import {
-  callInteraction,
-  evictionIndex,
-  isUnnamedUpdate,
-  MAX_SAME_LABEL,
-  rootChanges,
-  TimelineBuilder,
-} from './tracker.js';
+import { callInteraction, isUnnamedUpdate, rootChanges, TimelineBuilder } from './tracker.js';
 
 const click: ChangeOrigin = {
   kind: 'interaction',
@@ -176,6 +169,45 @@ describe('TimelineBuilder', () => {
     }
     expect(builder.snapshot().map((entry) => entry.origin?.name)).toEqual(['e3', 'e2']);
   });
+
+  function act(builder: TimelineBuilder, at: number): void {
+    builder.rerun(
+      rerun({ run: at, at, interaction: { kind: 'interaction', name: `e${at}`, at } }),
+      undefined,
+    );
+  }
+
+  it('keeps every entry of the last 30 seconds and drops older ones', () => {
+    const builder = new TimelineBuilder();
+    for (let at = 1000; at <= 61_000; at += 1000) act(builder, at);
+    const names = builder.snapshot(61_000).map((entry) => entry.origin?.at);
+    // 31 entries from 31000 to 61000, newest first.
+    expect(names).toHaveLength(31);
+    expect(names[0]).toBe(61_000);
+    expect(names[30]).toBe(31_000);
+  });
+
+  it('does not thin out a repeated label inside the window', () => {
+    const builder = new TimelineBuilder();
+    for (let i = 0; i < 1800; i++) act(builder, 1000 + i * 16);
+    expect(builder.snapshot(1000 + 1799 * 16)).toHaveLength(1800);
+  });
+
+  it('ages entries out of a snapshot even when nothing new arrived', () => {
+    const builder = new TimelineBuilder();
+    act(builder, 1000);
+    const first = builder.snapshot(2000);
+    expect(first).toHaveLength(1);
+    const later = builder.snapshot(40_000);
+    expect(later).toHaveLength(0);
+    expect(later).not.toBe(first);
+  });
+
+  it('caps a runaway at the safety limit, dropping the oldest', () => {
+    const builder = new TimelineBuilder(3);
+    for (const at of [1, 2, 3, 4, 5]) act(builder, at);
+    expect(builder.snapshot(5).map((entry) => entry.origin?.at)).toEqual([5, 4, 3]);
+  });
 });
 
 function call(over: Partial<CallEvent> = {}): CallEvent {
@@ -308,17 +340,3 @@ describe('timelineReport', () => {
     expect(report).not.toContain('a → b');
   });
 });
-
-describe('evictionIndex', () => {
-  it('drops the oldest entry of a label repeated past the limit', () => {
-    const entries = [{ label: 'refund' }];
-    for (let i = 0; i < MAX_SAME_LABEL + 1; i++) entries.push({ label: 'update: tick' });
-    entries.push({ label: 'setFilter' });
-    // The oldest is `setFilter`, but the tick label is over the limit.
-    expect(evictionIndex(entries)).toBe(entries.length - 2);
-  });
-
-  it('drops the oldest entry when no label is over the limit', () => {
-    expect(evictionIndex([{ label: 'a' }, { label: 'b' }, { label: 'a' }])).toBe(2);
-  });
-});
diff --git a/src/dev-toolbar/timeline/tracker.ts b/src/dev-toolbar/timeline/tracker.ts
index 533a341..e989982 100644
--- a/src/dev-toolbar/timeline/tracker.ts
+++ b/src/dev-toolbar/timeline/tracker.ts
@@ -60,25 +60,10 @@ export interface TimelineEntry {
   calls: TimelineCall[];
 }
 
-/** Most entries the panel keeps. The oldest go first. */
-export const MAX_ENTRIES = 100;
-/** How many entries of one label are kept before its oldest go first. */
-export const MAX_SAME_LABEL = 20;
-
-/**
- * The entry to drop when the timeline is full. A loop such as an animation
- * frame repeats one label many times a second, so the oldest entry of a label
- * that has more than `MAX_SAME_LABEL` entries goes before any other action.
- * Otherwise the oldest entry goes. `entries` is newest first.
- */
-export function evictionIndex(entries: { label: string }[]): number {
-  const counts = new Map<string, number>();
-  for (const entry of entries) counts.set(entry.label, (counts.get(entry.label) ?? 0) + 1);
-  for (let index = entries.length - 1; index >= 0; index--) {
-    if (counts.get(entries[index]!.label)! > MAX_SAME_LABEL) return index;
-  }
-  return entries.length - 1;
-}
+/** How far back the timeline and the Activity view look. */
+export const WINDOW_MS = 30_000;
+/** A safety cap that only applies in a runaway, such as a loop that makes thousands of actions a second. */
+export const MAX_ENTRIES = 5000;
 
 /** Most re-runs one entry keeps. */
 export const MAX_RUNS = 300;
@@ -173,7 +158,10 @@ export class TimelineBuilder {
    */
   private idle = new WeakMap<ChangeOrigin, InteractionEvent>();
 
-  constructor(private readonly max = MAX_ENTRIES) {}
+  constructor(
+    private readonly max = MAX_ENTRIES,
+    private readonly windowMs = WINDOW_MS,
+  ) {}
 
   private create(origin: ChangeOrigin | undefined, at: number): TimelineEntry {
     const entry: TimelineEntry = {
@@ -192,15 +180,28 @@ export class TimelineBuilder {
       calls: [],
     };
     this.entries.unshift(entry);
-    while (this.entries.length > this.max) {
-      const [dropped] = this.entries.splice(evictionIndex(this.entries), 1);
-      if (dropped!.origin) this.byOrigin.delete(dropped!.origin);
-      if (dropped === this.external) this.external = undefined;
-    }
     if (origin) this.byOrigin.set(origin, entry);
+    this.prune(entry.at);
     return entry;
   }
 
+  /**
+   * Drops the entries that began before the window ending at `now`, and the
+   * oldest ones past the safety cap. Returns whether any went. The list is
+   * newest first, so the oldest are at the end.
+   */
+  private prune(now: number): boolean {
+    const cutoff = now - this.windowMs;
+    let keep = this.entries.length;
+    while (keep > 0 && (keep > this.max || this.entries[keep - 1]!.at < cutoff)) keep--;
+    if (keep === this.entries.length) return false;
+    for (const dropped of this.entries.splice(keep)) {
+      if (dropped.origin) this.byOrigin.delete(dropped.origin);
+      if (dropped === this.external) this.external = undefined;
+    }
+    return true;
+  }
+
   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);
@@ -295,8 +296,9 @@ export class TimelineBuilder {
    * 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;
+  snapshot(now = performance.now()): TimelineEntry[] {
+    const pruned = this.prune(now);
+    if (!this.changed.size) return pruned ? this.entries.slice() : this.entries;
     this.entries = this.entries.map((entry) => {
       if (!this.changed.has(entry)) return entry;
       const copy = {

From d53155a209ad60494840aff29e4aa4f18220828f Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 12:21:43 +0800
Subject: [PATCH 08/10] docs(changeset): describe time-based retention

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/dock-three-views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/dock-three-views.md b/.changeset/dock-three-views.md
index a003d28..a0b34cc 100644
--- a/.changeset/dock-three-views.md
+++ b/.changeset/dock-three-views.md
@@ -7,5 +7,5 @@
 - Activity merges actions, server-function calls, async loads and waits, and errors into one stream over the last 30 seconds, with a live lanes strip on a time axis, filter chips, time groups and a pause button. Repeated actions fold into one row. An action shows what it wrote, what re-ran and which effects ran, then waterfalls of its re-runs and server calls.
 - Structure shows the ownership tree or the reactivity graph. Tree rows show signal and memo counts and how recently and how often their computations update. "Hide Solid internals" folds Solid's own components away. The detail lists props, signals and memos by kind, with a signal's previous value.
 - ⌘K (Ctrl+K) opens a search across components, signals, memos, actions and server functions while the dock is open.
-- The timeline keeps distinct actions when one action repeats many times, such as an animation loop.
+- The timeline and the async history keep everything from the last 30 seconds instead of a fixed number of entries, so a loop such as an animation frame no longer pushes other actions out. A fast run of one action draws as one bar.
 - Every list and detail split is resizable.

From f63820a1616c144591f585e2803ca760cce7f67b Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 12:43:11 +0800
Subject: [PATCH 09/10] fix(health): mark the error with the highlighter's
 squiggle, not a caret

The source view drew a ^ under the column. The highlighter's err marker
already wraps the exact expression, so it is drawn as an error squiggle
and the lines around it step back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/dev-toolbar/error-viewer/CodeView.tsx | 24 +++--------------------
 src/dev-toolbar/error-viewer/styles.css   | 24 +++++++++++------------
 2 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/dev-toolbar/error-viewer/CodeView.tsx b/src/dev-toolbar/error-viewer/CodeView.tsx
index b4de301..68e78d9 100644
--- a/src/dev-toolbar/error-viewer/CodeView.tsx
+++ b/src/dev-toolbar/error-viewer/CodeView.tsx
@@ -8,7 +8,7 @@ export interface CodeViewProps {
   fileName: string;
   content: string;
   line: number;
-  /** Column of the error, so the marker can point at one word instead of the line. */
+  /** Column of the error, so the `err` marker wraps one expression instead of the line. */
   column?: number;
 }
 
@@ -20,23 +20,6 @@ export interface CodeViewProps {
  */
 const RANGE = 25;
 
-/**
- * Puts a `^` under the column of the hit line.
- *
- * The line sits after a gutter of 58px, and the code is monospace, so the
- * caret is indented by that gutter and one character per column before it.
- */
-function placeCaret(hit: HTMLElement, column: number | undefined): void {
-  hit.parentElement?.querySelector('[data-solid-error-viewer-caret]')?.remove();
-  if (!column || column < 1) return;
-  const caret = document.createElement('span');
-  caret.setAttribute('data-solid-error-viewer-caret', '');
-  caret.setAttribute('aria-hidden', 'true');
-  caret.style.paddingLeft = `calc(58px + ${column - 1}ch)`;
-  caret.textContent = '^';
-  hit.after(caret);
-}
-
 export function CodeView(props: CodeViewProps): JSX.Element | null {
   const [element, setElement] = createSignal<HTMLDivElement>();
 
@@ -53,12 +36,11 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
   // The frame can sit anywhere in the file, so the view opens on it. Scrolling
   // the box itself leaves the page where it is.
   createEffect(
-    () => ({ view: element(), code: html(), column: props.column }),
-    ({ view, column }) => {
+    () => ({ view: element(), code: html() }),
+    ({ view }) => {
       if (!view) return;
       const focused = view.querySelector('.focus') as HTMLElement | null;
       if (!focused) return;
-      placeCaret(focused, column);
       view.scrollTop = Math.max(focused.offsetTop - view.clientHeight / 2, 0);
     },
   );
diff --git a/src/dev-toolbar/error-viewer/styles.css b/src/dev-toolbar/error-viewer/styles.css
index 79e8278..5bb662f 100644
--- a/src/dev-toolbar/error-viewer/styles.css
+++ b/src/dev-toolbar/error-viewer/styles.css
@@ -358,19 +358,19 @@
   color: var(--start-dt-red);
 }
 
-/* The `^` under the column of the hit line. */
-[data-solid-error-viewer-caret] {
-  display: block;
-  box-sizing: border-box;
-
-  color: var(--start-dt-red);
-  font-weight: 700;
-  line-height: 1.1;
-  white-space: pre;
+/* The other lines step back. The highlighter tags the block when a line is
+   in focus, so this needs no tracking of which line that is. */
+[data-solid-error-viewer-code-view] .has-focus .l:not(.focus) {
+  opacity: 0.6;
 }
 
-/* The `err` directive marks the word; the caret already points at it. */
+/* The `err` directive wraps the exact expression at the frame's column, drawn
+   as an editor's error squiggle. */
 [data-solid-error-viewer-code-view] .tok.error {
-  background: none;
-  box-shadow: none;
+  border-radius: 2px;
+  background-color: var(--start-dt-red-soft);
+  text-decoration: underline wavy var(--start-dt-red);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-skip-ink: none;
 }

From e3ab7bf68ca339fd3cd32052a0ebb8c2a290b22c Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Wed, 4 Nov 2026 13:20:46 +0800
Subject: [PATCH 10/10] test(e2e): open the Health view in the error tests from
 main

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/e2e/devtools.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/devtools.spec.ts b/tests/e2e/devtools.spec.ts
index 233d9a0..0e623a0 100644
--- a/tests/e2e/devtools.spec.ts
+++ b/tests/e2e/devtools.spec.ts
@@ -227,7 +227,7 @@ test('leaves out errors thrown by browser extensions', async ({ page }) => {
 
   // An error of the app still counts.
   await page.locator('#throw-client-error').click();
-  await expect(page.getByRole('tab', { name: 'Errors', exact: true })).toHaveAttribute(
+  await expect(page.getByRole('tab', { name: 'Health', exact: true })).toHaveAttribute(
     'aria-selected',
     'true',
   );
@@ -247,7 +247,7 @@ test('keeps the newest errors when an error repeats in a loop', async ({ page })
     }
   });
 
-  const tab = page.getByRole('tab', { name: 'Errors', exact: true });
+  const tab = page.getByRole('tab', { name: 'Health', exact: true });
   await expect(tab).toHaveAttribute('aria-selected', 'true');
   await expect(tab).toContainText('200');
   // The newest is shown first, and the oldest five are gone.