diff --git a/website/src/components/Playground/README.md b/website/src/components/Playground/README.md
index f30552e59c61..dd60e4a548a8 100644
--- a/website/src/components/Playground/README.md
+++ b/website/src/components/Playground/README.md
@@ -30,11 +30,13 @@ editor/             code model + editor UI
   EditorSurface.tsx   headers, file tabs, collapse state, per-file TextEditTab
   StaticEditor.tsx    SSR/crawler/loading markup (Prism, not editable)
   InteractiveEditor.tsx  client-only: Monaco, or editable react-live on mobile/bots
+  declarations.ts     top-level names each document declares (managers' reload, Store links)
+  openCode.ts         CodeOpenerContext: what the Store can open in the code
 monaco/             everything Monaco-specific
   setup.ts            side-effect init: CDN loader, hints, compiler options, theme, types
   typeLibs.ts         raw .d.ts chunks from editor-types/ → addExtraLib
   navigation.ts       import completions
-  useDefinitionOpener.ts  cross-tab go-to-definition into this editor
+  useDefinitionOpener.ts  cross-tab go-to-definition, and `reveal` for Store links, into this editor
   modelPath.ts        `/<id>/<file>` model URI scheme
   models.ts           creates a surface's models together so cross-tab imports type-check
   preloadManifest.ts  GENERATED by website/scripts/generateMonacoPreloads.cjs
@@ -43,6 +45,9 @@ preview/            live execution (loaded lazily, never on the server)
   LivePreview.tsx     react-live LiveProvider with scope + transformCode
   Preview.tsx         DataProvider + MockResolver(fixtures) + Store inspector
   StoreToggle.tsx     Store toggles + open state
+  store/              Store inspector: StorePanel owns navigation (nav.tsx), actionLog.ts
+                      logs dispatches, actionGroups.ts groups them, attribution.ts
+                      says which manager sent or handled each (Pipeline.tsx, ManagerName.tsx)
   autorun/            the `autoRun` demo player (see Auto-run)
   ...
 editor-types/       .d.ts bundles fed to Monaco (raw-loader)
@@ -178,115 +183,50 @@ DesignSystem/       components injected into preview scope
   store (see Reset) starts a new history, a store the retry restores continues
   its own, and the panel shows only the current one. An action's chips open the
   store as that action left it (see `Moment` in `preview/store/nav.tsx`).
-- The Store inspector navigates by two coordinates (see
-  `preview/store/nav.tsx`, both owned by `StorePanel`): the **moment** (the
-  action shown, or live; `NavStateContext` carries it down, with where a
-  step back or on lands (`earlier`, `later`), and `set` and
-  `show(seq)` back up: `show` also opens that action in the Action tab) and the **subject** (a
-  stack of levels over the store: a table, a record, a list of rows, with
-  breadcrumbs, Back and Escape). A moment can stand for one action or, when
-  a request's or subscription's row was picked (`whole`), every action of
-  that group up to it (`momentEntries` in `preview/store/actionGroups.ts`),
-  so an optimistic update and its response show as one effect. Two tabs at
-  the left end of the bar (`role="tablist"`), **State** and **Action**,
-  show the subject; the one picked, and State's Snapshot or Diff, are each
-  Playground's own (state of the panel), while the table or tree view is
-  shared across them (`useTabStorage`).
-  - **State** shows the subject at the moment, as one of two icon toggles
-    at the bar's right end says (`aria-pressed`, beside the table and tree
-    view switch); both share the subject's stack:
-    - **Snapshot**: the subject at the moment (table or tree); live, the
-      store as it is. A moment the store never saw (a fetch, a subscribe)
-      shows the store as the last action before it left it.
-    - **Diff**: only what the moment's action (or group) changed at that
-      level, from before its first action to the store the moment shows
-      (`diffModel` in `preview/store/diffModel.ts`, with the changes from
-      `log.spanChanges`, which merges a group's with `mergeChanges` so another
-      action's rows in between are left out, while a row both changed shows as
-      it ended up). The store and its lists keep only the rows it changed, a
-      removed one as it was, each row marked `data-change` through
-      `DiffContext` and each field it changed `data-changed` (`added` when
-      the update added it, fresh-colored like an added row), with the
-      sections it left empty hidden; a record, or a level it left alone, says what it did there with `SubjectChanges` from
-      `preview/store/ActionDetail.tsx`. Live, it shows the newest stored
-      action's whole group, so a response that stored nothing new still shows
-      its request's optimistic update (Live on the scrubber is marked as the
-      moment).
-  - **Action**: the moment's action at full width (`{ kind: 'action', seq }`,
-    `ActionDetail`: what it did to the subject, then the action's fields;
-    live, `seq: null`, the subject's newest action, garbage collection
-    aside, as its whole request when it has several actions, so an
-    optimistic update shows with its response, with "newest" by its crumb). A line above its crumbs, so they head the
-    action, and one stuck to the bottom (`ActionStep`) name the subject's actions before and after it (as ‹ ›
-    step, `stepMoment`; past the newest is live), and a click makes that the
-    moment, in the same level. Its stack opens at the action over the
-    subject's actions in full (`{ kind: 'actions' }`, `ActionsLevel` in
-    `preview/store/ActionList.tsx`, a `region` with its row count beside the
-    crumbs "Actions of <subject>"), which Back, its crumb and the
-    scrubber's list button go to, and picking the Action tab again leaves
-    for the moment's action; while it shows, a mark picked on the
-    timeline (the timelines' `onMark`) opens its action, as a row does, while ‹ › only move
-    the moment. Picking a step there sets the moment and
-    opens the action over the list; picking a row of several actions opens
-    the group (`whole`: what they did together, then its actions, each
-    opening its own). Chips drill on in the tab. Stepping the moment moves
-    that level to the new action, and going live to the newest
-    (`followMoment`).
-
-  Both stacks stay mounted while their tab is hidden, keeping their levels'
-  stores, scroll, pages and filters. A record's "changed by" names the kept
-  action that made the value shown (the latest at or before the moment, live
-  included; "actions not kept" when the log dropped it) and opens it, moving
-  the moment. A level a chip opened at an action shows that store, not the
-  diff, until the moment is set on purpose (`clearAt`), which outranks it.
-  The list is another way to see more of the timeline, so its button sits
-  at the scrubber's right end beside the ▾ ("Actions", `aria-pressed` while
-  the list shows): a click opens
-  the list in the Action tab, and the mouse resting on it, unless the list
-  shows, peeks at the same list (`ActionsPane`, an `aside` whose head counts
-  its rows): an overlay over the panel's right side (narrow, most of it),
-  dropping from right under the button,
-  that stays while the pointer is over either and goes as it leaves both,
-  with Escape or a press outside (each panel's own: a page holds several),
-  focus going back to the button. Picking a row or step there only moves
-  the moment, so the tab under it follows; its chips open in State.
-  Both list (`ActionList`) the actions that touched the subject
-  (`subjectFilter` in `preview/store/actionGroups.ts`: at the store every
-  action that reached it; on a record or list those that changed or stored
-  again a row it covers, and on a record the kept action each gap of
-  dropped actions was found at, noted once above a run of them), one row per
-  request or subscription; a row's ▸ lists its actions. The moment's row is marked (`aria-current`), opened and
-  scrolled to; nothing is marked while live. ↑ ↓ on a row or step move to
-  the next one, as the moment; a head of several actions stands for the whole
-  group, as clicking it does. A row renders
-  again only as its own group changes (`GroupRow` is memoized;
-  `subjectFilter` keeps its identity while the record's gaps do, and the
-  chips' `Nav` reads the model through a ref so it keeps its identity
-  across commits).
-  The scrubber across the top of the panel (`Scrubber` in
-  `preview/store/Timeline.tsx`, a `role="group"`) always shows the whole
-  history on one lane, fit to the panel: ‹ › and ←→ (from anywhere in the
-  panel without a use of its own for them, see `usesArrows`, or a
-  widget that took them with `preventDefault`; the panel alone handles them) step through the changes
-  to the subject (`subjectFilter`'s `hit`: every stored action at the store; below it the marks that left the subject alone
-  are dimmed, `data-dim`, and skipped; past the newest, and End, go live), a
-  mark lands on its action, "Live" lets go. Marks closer on the track than a
-  mark's width and a gap (`MERGE_PX`) draw as one, at the first of them
-  (`data-count`; dimmed only if all are), so fast polling stays readable. While the moment is set its second line says "After
-  <action> · <time>", which opens the action at full width. Its ▾ ("Timeline", `aria-expanded`) slides open the expanded
-  timeline under it (`Timeline`: the same history, a lane per key, requests
-  as spans, stepping as the scrubber does). By default it keeps the detailed
-  spacing (`timeScale`) and scrolls sideways; only the tracks scroll, the lane
-  labels kept beside them in a column of their own: while live they stay on
-  the newest, and picking an action or scrolling back lets go until "Live" or
-  End. The "Fit timeline" toggle in the axis's corner (`aria-pressed`, kept
-  per tab) squeezes the whole history to the strip's width instead (marks are
-  placed as fractions of the track, `--tl-f`, so nothing is measured; axis
-  labels thin out as it squeezes). Narrow (under `NARROW_WIDTH`), the
-  timeline opens as a sheet over the content instead of pushing it down,
-  closed by ✕, Escape or picking a mark. Where there is no level to open a
-  view from (the tree view, the peek's chips), `StorePanel` opens it over
-  the top level in the table view.
+- Store inspector navigation (`preview/store/nav.tsx`, all state owned by
+  `StorePanel`):
+  - Two coordinates. The **moment** is a `Step` (`seq` plus `scope`) or
+    `null` for live; `NavStateContext` carries it down with `earlier`,
+    `later` and `current` (the seqs it stands for, which the timeline, list
+    and levels all mark), and children move it only through `set`, `step`
+    and `show`. The **subject** is a stack of levels (table, record, list)
+    with breadcrumbs, Back and Escape.
+  - `scope` says what a moment spans: `request` (the default, and live: the
+    newest request), `group` (a row of several actions was picked) or
+    `action` (a step was picked, shown a level deeper). `unitOf` in
+    `actionGroups.ts` is the one owner of that; `momentEntries` (what Diff
+    shows as one effect, so an optimistic update and its response merge)
+    and `shownGroup` (what names it) build on it.
+  - Every way of moving goes through two pure functions at the moment's
+    depth: `stepAt` (`actionLog.ts`) for ‹ ›, ← →, Before and After, and
+    `pickAt` for a mark picked on a timeline. The surface steps by request
+    (`requestsOf`: each poll of a subscription its own); a level deeper
+    steps every listed action. Live is a place past the last request.
+  - Tabs: **State** (Snapshot, or Diff via `diffModel` and `mergeChanges`,
+    which leaves out rows other actions changed in between) and **Action**
+    (`ActionDetail` over `ActionsLevel`, so Back lists the subject's
+    actions). Both stacks stay mounted while hidden, keeping scroll, pages
+    and filters. The tab and Snapshot/Diff are each Playground's own; table
+    vs tree is shared (`useTabStorage`).
+  - The Action tab's Before/After columns (`ActionStep`) take no height and
+    only the action between them scrolls, so the wheel over the action
+    scrolls it. Stepping moves the action level with the moment
+    (`followMoment`), keeping an action alone a level under its request or
+    row.
+  - A level a chip opened at an action shows that action's store until the
+    moment is set on purpose (`clearAt`).
+  - The action list (`ActionList`, also the scrubber's hover peek
+    `ActionsPane`) shows what `subjectFilter` says touched the subject. Rows
+    render again only when their own group changes: keep `GroupRow`
+    memoized, `subjectFilter`'s result stable and the chips' `Nav` reading
+    the model through a ref. ↑ ↓ read a row's moment from its `data-seq`
+    and `data-scope`.
+  - ← → reach the panel only when the focused element has no use for them
+    (`usesArrows`, or a widget calling `preventDefault`).
+  - Timeline marks are placed as fractions of the track (`--tl-f`), never
+    measured. Under `NARROW_WIDTH` the timeline opens as a sheet over the
+    content. Where no level can open a view (tree view, the peek's chips),
+    `StorePanel` opens it over the top level in the table view.
 
 - Router (`preview/router.tsx`): a demo with several pages gives each page's
   fence a `route` (a path whose `:name` segments are params, `/posts/:id`) and writes no
@@ -334,6 +274,14 @@ DesignSystem/       components injected into preview scope
     other edits keep sockets open. Code that fails to run keeps the old ones.
   - A manager that throws shows a "Manager error" card; the preview runs on
     without that step.
+  - The Store shows which manager sent or handled each action
+    (`preview/store/attribution.ts`). Library managers are matched by exact
+    class, so a playground's subclass counts as its own code.
+  - A manager the code declares links to its declaration (`ManagerName`).
+    Opening one closes a Store covering the code in the same render as it
+    hands the line to the editor (`openCode` in `index.tsx`): an `inert`
+    editor can't take focus, and Monaco may still be loading, so `reveal`
+    waits for both.
 - Errors show in one `ErrorPanel` card (`Playground/ErrorPanel.tsx`) labeled by the stage that failed: amber
   "Compile error" for react-live's `SyntaxError`s (the code never ran) and red
   "Runtime error" for anything thrown while running. Demos rely on the reset
diff --git a/website/src/components/Playground/editor/EditorSurface.tsx b/website/src/components/Playground/editor/EditorSurface.tsx
index b8efbd9da9df..16420212600a 100644
--- a/website/src/components/Playground/editor/EditorSurface.tsx
+++ b/website/src/components/Playground/editor/EditorSurface.tsx
@@ -14,6 +14,7 @@ import styles from '../styles.module.css';
 import TabList from '../TabList';
 import type { CodeDocument, CodeModel } from './codeModel';
 import type { InteractiveEditorProps } from './InteractiveEditor';
+import type { CodeTarget } from './openCode';
 import StaticEditor from './StaticEditor';
 
 export interface EditorSurfaceProps extends CodeModel {
@@ -29,6 +30,9 @@ export interface EditorSurfaceProps extends CodeModel {
   covered?: boolean;
   /** Names `cover` in the header while it hides the code */
   coverTitle?: React.ReactNode;
+  /** A line to show, handed to its file's editor, which opens its tab and
+   * puts the cursor there (each new object, once) */
+  reveal?: CodeTarget | null;
 }
 
 export default function EditorSurface({
@@ -42,6 +46,7 @@ export default function EditorSurface({
   cover,
   covered = false,
   coverTitle,
+  reveal,
 }: EditorSurfaceProps) {
   const id = useModelId();
   const row = layout === 'row';
@@ -130,6 +135,7 @@ export default function EditorSurface({
         language={document.language}
         highlights={document.highlights}
         autoFocus={document.autoFocus}
+        reveal={reveal?.path === document.path ? reveal : undefined}
       />
     </React.Fragment>
   ));
diff --git a/website/src/components/Playground/editor/InteractiveEditor.tsx b/website/src/components/Playground/editor/InteractiveEditor.tsx
index 7a5450faf3ee..3465b7bd66c2 100644
--- a/website/src/components/Playground/editor/InteractiveEditor.tsx
+++ b/website/src/components/Playground/editor/InteractiveEditor.tsx
@@ -12,6 +12,7 @@ import useAutoHeight from '../monaco/useAutoHeight';
 import useDefinitionOpener from '../monaco/useDefinitionOpener';
 import PlaygroundLiveEditor from '../PlaygroundLiveEditor';
 import { isMobileOrBot } from '../userAgent';
+import type { CodeTarget } from './openCode';
 import StaticEditor from './StaticEditor';
 
 // TODO: consider using the ts worker's getEmitOutput to compile rather than babel
@@ -33,6 +34,8 @@ export interface InteractiveEditorProps {
   isFocused?: boolean;
   language: string;
   readOnly?: boolean;
+  /** A line to put the cursor on (each new object, once) */
+  reveal?: Pick<CodeTarget, 'line'>;
 }
 
 /**
@@ -51,6 +54,7 @@ function InteractiveEditor({
   isFocused = false,
   language,
   readOnly = false,
+  reveal,
 }: InteractiveEditorProps) {
   const editorOptions = useMemo(() => ({ ...options, readOnly }), [readOnly]);
   const { height, handleMount: handleAutoMount } = useAutoHeight({
@@ -60,6 +64,7 @@ function InteractiveEditor({
   const handleOpenerMount = useDefinitionOpener({
     isVisible: isFocused,
     onOpen: () => onFocus(tabIndex),
+    reveal,
   });
 
   // Mount-time setup only: props read here are fixed for the editor's life
diff --git a/website/src/components/Playground/editor/declarations.ts b/website/src/components/Playground/editor/declarations.ts
new file mode 100644
index 000000000000..2051f13b9713
--- /dev/null
+++ b/website/src/components/Playground/editor/declarations.ts
@@ -0,0 +1,41 @@
+import type { CodeDocument } from './codeModel';
+import type { CodeTarget } from './openCode';
+
+const DECLARATION =
+  /\b(?:class|function|const|let|var|enum)\s+([A-Za-z_$][\w$]*)/g;
+
+/** The names `source` declares, with where each declaration starts */
+export function* declarationsIn(source: string) {
+  for (const match of source.matchAll(DECLARATION))
+    yield { name: match[1], index: match.index };
+}
+
+/** Where `documents` first declare each name */
+export function declarationsOf(
+  documents: readonly Pick<CodeDocument, 'path' | 'value'>[],
+): ReadonlyMap<string, CodeTarget> {
+  const declared = new Map<string, CodeTarget>();
+  for (const { path, value } of documents) {
+    let line = 1;
+    let at = 0;
+    for (const { name, index } of declarationsIn(value)) {
+      for (; at < index; at++) if (value[at] === '\n') line++;
+      if (!declared.has(name)) declared.set(name, { path, line });
+    }
+  }
+  return declared;
+}
+
+/** `next`, or `prev` when every name is declared where it was, so what is
+ * built on it keeps its identity through edits that move no declaration */
+export function keepSameDeclarations(
+  prev: ReadonlyMap<string, CodeTarget>,
+  next: ReadonlyMap<string, CodeTarget>,
+): ReadonlyMap<string, CodeTarget> {
+  if (prev.size !== next.size) return next;
+  for (const [name, { path, line }] of next) {
+    const was = prev.get(name);
+    if (was?.path !== path || was.line !== line) return next;
+  }
+  return prev;
+}
diff --git a/website/src/components/Playground/editor/openCode.ts b/website/src/components/Playground/editor/openCode.ts
new file mode 100644
index 000000000000..f9787e3dbe46
--- /dev/null
+++ b/website/src/components/Playground/editor/openCode.ts
@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+/** A line of one of the playground's files */
+export interface CodeTarget {
+  readonly path: string;
+  readonly line: number;
+}
+
+/** What the playground's code declares, and a way to show a line of it: it
+ * uncovers the code (closing a Store that slides over it), opens the file's
+ * tab and puts the cursor there */
+export interface CodeOpener {
+  /** Where each name is first declared (a class, function or variable) */
+  readonly declared: ReadonlyMap<string, CodeTarget>;
+  readonly open: (target: CodeTarget) => void;
+}
+export const CodeOpenerContext = createContext<CodeOpener | null>(null);
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
index 8e81f4a1bced..836821cdb3ef 100644
--- a/website/src/components/Playground/index.tsx
+++ b/website/src/components/Playground/index.tsx
@@ -1,11 +1,24 @@
 import Translate from '@docusaurus/Translate';
 import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import clsx from 'clsx';
-import React, { lazy, useDeferredValue, useState } from 'react';
+import React, {
+  lazy,
+  useCallback,
+  useDeferredValue,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import Boundary from './Boundary';
 import { useCodeDocuments } from './editor/codeModel';
+import { declarationsOf, keepSameDeclarations } from './editor/declarations';
 import EditorSurface from './editor/EditorSurface';
+import {
+  CodeOpenerContext,
+  type CodeOpener,
+  type CodeTarget,
+} from './editor/openCode';
 import type { AutoRunScript } from './preview/autorun/script';
 import FixturePreview from './preview/FixturePreview';
 import type LivePreviewType from './preview/LivePreview';
@@ -84,6 +97,34 @@ export default function Playground<T>({
   const [storeHost, setStoreHost] = useState<HTMLDivElement | null>(null);
   const codeCovered = row && storeOpen;
 
+  // the line the Store last asked to show: a new object per ask, so asking
+  // for the same line again shows it again
+  const [codeShown, showCode] = useState<CodeTarget | null>(null);
+  const openCode = useCallback(
+    (target: CodeTarget) => {
+      // in the same render, so the code is no longer inert by the time its
+      // editor takes focus
+      if (codeCovered) showStore(false);
+      showCode({ ...target });
+    },
+    [codeCovered, showStore],
+  );
+  // from the code the preview runs, so the Store's links change with it;
+  // kept while no declaration moves, so an edit elsewhere renders no link
+  const lastDeclared = useRef<CodeOpener['declared']>(new Map());
+  const declared = useMemo(
+    () =>
+      (lastDeclared.current = keepSameDeclarations(
+        lastDeclared.current,
+        declarationsOf(documents),
+      )),
+    [documents],
+  );
+  const codeOpener = useMemo<CodeOpener>(
+    () => ({ declared, open: openCode }),
+    [declared, openCode],
+  );
+
   // Hydrate Monaco on first show and keep it (preserves undo / go-to-def).
   const [editorInteractive, setEditorInteractive] = useState(!hidden);
   useIsomorphicLayoutEffect(() => {
@@ -111,6 +152,7 @@ export default function Playground<T>({
         : null
       }
       covered={codeCovered}
+      reveal={codeShown}
       coverTitle={<Translate id="playground.store">Store</Translate>}
     />
   );
@@ -120,20 +162,22 @@ export default function Playground<T>({
     hidden ? loading : (
       <Boundary fallback={loading}>
         <DemoViewContext.Provider value={demoView}>
-          <LivePreview
-            documents={documents}
-            fixtureContent={previewFixtures}
-            storeOpen={storeOpen}
-            toggleStore={toggleStore}
-            row={row}
-            storeHost={storeHost}
-            fixtures={fixtures}
-            getInitialInterceptorData={getInitialInterceptorData}
-            renderCount={renderCount}
-            actionLog={actionLog}
-            autoRun={autoRun}
-            showStore={showStore}
-          />
+          <CodeOpenerContext.Provider value={codeOpener}>
+            <LivePreview
+              documents={documents}
+              fixtureContent={previewFixtures}
+              storeOpen={storeOpen}
+              toggleStore={toggleStore}
+              row={row}
+              storeHost={storeHost}
+              fixtures={fixtures}
+              getInitialInterceptorData={getInitialInterceptorData}
+              renderCount={renderCount}
+              actionLog={actionLog}
+              autoRun={autoRun}
+              showStore={showStore}
+            />
+          </CodeOpenerContext.Provider>
         </DemoViewContext.Provider>
       </Boundary>
     );
diff --git a/website/src/components/Playground/monaco/useDefinitionOpener.ts b/website/src/components/Playground/monaco/useDefinitionOpener.ts
index 2346244577d9..1affc9c7458a 100644
--- a/website/src/components/Playground/monaco/useDefinitionOpener.ts
+++ b/website/src/components/Playground/monaco/useDefinitionOpener.ts
@@ -2,6 +2,7 @@ import type * as Monaco from 'monaco-editor';
 import { useCallback, useEffect, useState } from 'react';
 
 import { prefersReducedMotion } from '../../motion';
+import type { CodeTarget } from '../editor/openCode';
 
 interface OpenRequest {
   editor: Monaco.editor.ICodeEditor;
@@ -9,19 +10,37 @@ interface OpenRequest {
 }
 
 /**
- * Lands cross-file go to definition in this editor. Opening only asks for
- * this editor's tab (`onOpen`); the selection and focus wait until the tab
- * is visible, since a display:none editor can't take focus.
+ * Lands cross-file go to definition in this editor, and lines asked for by
+ * `reveal` (each new object, once). Opening only asks for this editor's tab
+ * (`onOpen`); the selection and focus wait until the tab is visible, since
+ * a display:none editor can't take focus.
  */
 export default function useDefinitionOpener({
   isVisible,
   onOpen,
+  reveal,
 }: {
   isVisible: boolean;
   /** Show this editor's tab. Read once at mount, so it must be stable. */
   onOpen: () => void;
+  /** A line to put the cursor on: its tab opens at once, the cursor lands
+   * once the editor has mounted and shows */
+  reveal?: Pick<CodeTarget, 'line'>;
 }) {
   const [request, setRequest] = useState<OpenRequest | null>(null);
+  // Monaco may load after the ask: the cursor waits for it, the tab doesn't
+  const [editor, setEditor] = useState<Monaco.editor.ICodeEditor | null>(null);
+  // only as the ask comes: the editor mounting later moves the cursor, but
+  // never opens the tab again over one picked since
+  useEffect(() => {
+    if (reveal) onOpen();
+    // onOpen is stable (see above)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reveal]);
+  useEffect(() => {
+    if (editor && reveal)
+      setRequest({ editor, target: { lineNumber: reveal.line, column: 1 } });
+  }, [editor, reveal]);
 
   useEffect(() => {
     if (!request || !isVisible) return;
@@ -51,6 +70,7 @@ export default function useDefinitionOpener({
         },
       });
       editor.onDidDispose(() => opener.dispose());
+      setEditor(editor);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
diff --git a/website/src/components/Playground/preview/Preview.tsx b/website/src/components/Playground/preview/Preview.tsx
index 9e4972f5f3a4..cfd8137703e4 100644
--- a/website/src/components/Playground/preview/Preview.tsx
+++ b/website/src/components/Playground/preview/Preview.tsx
@@ -55,7 +55,9 @@ function Preview<T>({
     const log = registry.log.connect(history, replacedHistory, action =>
       network.skipLogging(action),
     );
-    return [log.head, registry, ...managers, log.tail];
+    // the head goes first: it credits each action to the manager whose
+    // controller call sent it
+    return [log.head, registry, ...log.track(managers), log.tail];
   });
 
   return (
diff --git a/website/src/components/Playground/preview/__tests__/StoreActions.test.tsx b/website/src/components/Playground/preview/__tests__/StoreActions.test.tsx
index 743e25a834c4..faa7f8741701 100644
--- a/website/src/components/Playground/preview/__tests__/StoreActions.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreActions.test.tsx
@@ -265,18 +265,24 @@ describe('Store Actions pane detail', () => {
     ).toBeTruthy();
     // each of its actions opens on its own
     fireEvent.click(top().querySelector<HTMLElement>('[data-seq="2"]')!);
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts']);
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
     expect(scrubber().textContent).toContain('After setResponse');
     expect(top().textContent).toContain('dispatchedAt');
-    // Back lists it as the moment's, open; a step is a moment too: the
-    // store never saw the fetch
+    // Back surfaces to its request, then lists it as the moment's, open; a
+    // step is a moment too: the store never saw the fetch
+    fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
     fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
-    expect(crumbs()).toEqual(['Actions']);
+    expect(crumbs()).toEqual([]);
     expect(rows()[0].getAttribute('aria-current')).toBe('true');
     expect(rows()[0].getAttribute('aria-expanded')).toBe('true');
     fireEvent.click(pane().querySelector<HTMLElement>('[data-seq="1"]')!);
     expect(scrubber().textContent).toContain('fetch');
-    expect(crumbs()).toEqual(['Actions', 'fetch GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
     expect(top().textContent).toContain('Started the request');
     expect(top().textContent).not.toContain('+ Post 1');
     // State shows the subject again, the moment staying
@@ -374,10 +380,10 @@ describe('Store Actions pane detail', () => {
     const level = top();
     previous();
     expect(top()).toBe(level);
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
     // a record its chip opened over it: the action under it steps too
     fireEvent.click(within(top()).getByRole('button', { name: '+ Post 1' }));
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts', 'Post 1']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'Post 1']);
     fireEvent.click(screen.getByRole('button', { name: 'Next change' }));
     expect(crumbs()).toEqual(['Actions', 'set Post', 'Post 1']);
     // past the newest, live: the action view shows the newest
@@ -448,10 +454,21 @@ describe('Store Actions pane detail', () => {
     const fetch = document.activeElement as HTMLElement;
     expect(fetch.dataset.seq).toBe('1');
     expect(fetch.getAttribute('aria-current')).toBe('true');
+    expect(
+      fetch
+        .parentElement!.querySelector('[data-seq="2"]')!
+        .getAttribute('aria-current'),
+    ).toBeNull();
+    // the head stands for every step of the row: each is marked
     fireEvent.keyDown(fetch, { key: 'ArrowUp' });
     expect(document.activeElement).toBe(rows()[0]);
     expect(rows()[0].getAttribute('aria-current')).toBe('true');
-    expect(fetch.getAttribute('aria-current')).toBeNull();
+    expect(fetch.getAttribute('aria-current')).toBe('true');
+    expect(
+      fetch
+        .parentElement!.querySelector('[data-seq="2"]')!
+        .getAttribute('aria-current'),
+    ).toBe('true');
     fireEvent.keyDown(rows()[0], { key: 'ArrowDown' });
     expect(fetch.getAttribute('aria-current')).toBe('true');
     rows()[0].focus();
@@ -460,7 +477,7 @@ describe('Store Actions pane detail', () => {
     fireEvent.click(expander(rows()[0]));
     expect(rows()[0].getAttribute('aria-expanded')).toBe('false');
     expect(rows()[0].getAttribute('aria-current')).toBe('true');
-    expect(scrubber().textContent).toContain('fetch');
+    expect(scrubber().textContent).toContain('After GET /posts');
     fireEvent.click(expander(rows()[0]));
     expect(rows()[0].getAttribute('aria-expanded')).toBe('true');
     // and a row's ▸ opens and closes it while the moment is on another
@@ -507,8 +524,8 @@ describe('Store Actions pane detail', () => {
     wait();
     fireEvent.click(toggle);
     expect(peek()).toBeNull();
-    expect(crumbs()).toEqual(['Actions']);
-    expect(listCount()).toBe('1');
+    expect(crumbs()).toEqual([]);
+    expect(rows()).toHaveLength(1);
     expect(toggle.getAttribute('aria-pressed')).toBe('true');
     hover(toggle, false);
     hover(toggle, true);
@@ -697,10 +714,10 @@ describe('Store Actions pane', () => {
     fireEvent.click(expander(rows()[0]));
     fireEvent.click(pane().querySelector<HTMLElement>('[data-seq="1"]')!);
     expect(scrubber().textContent).toContain('fetch');
-    expect(crumbs()).toEqual(['Actions', 'fetch GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
     expect(top().textContent).toContain('Started the request');
     await act(() => ctrl().set(Post, { id: '2' }, { id: '2', title: 'Later' }));
-    expect(crumbs()).toEqual(['Actions', 'fetch GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
     expect(top().textContent).toContain('Started the request');
     expect(scrubber().textContent).toContain('fetch');
     openState();
@@ -730,9 +747,10 @@ describe('Store Actions pane', () => {
       previous();
       expect(rows()[0].getAttribute('aria-expanded')).toBe('true');
       expect(rows()[0].getAttribute('aria-current')).toBe('true');
-      expect(marked()).toHaveLength(2);
-      expect(marked()[1]).toContain('setResponse');
-      expect(marked()[1]).not.toContain('fetch');
+      // the row stands for its whole request: every step of it is marked
+      expect(marked()).toHaveLength(3);
+      expect(marked()[1]).toContain('fetch');
+      expect(marked()[2]).toContain('setResponse');
       expect(scrollTo).toHaveBeenCalledWith(
         expect.objectContaining({ behavior: 'smooth' }),
       );
@@ -1577,11 +1595,11 @@ describe('Store diff', () => {
 });
 
 describe('Store action level', () => {
-  /** The Action tab's line for the action before or after the one shown */
+  /** The Action tab's column for the action before or after the one shown */
   const step = (dir: 'Before' | 'After') =>
-    [...top().children].find(el => el.textContent!.includes(dir))!;
+    within(top()).getByRole('button', { name: new RegExp('^' + dir + ': ') });
 
-  it('shows the newest action live, stepping to those before and after it', async () => {
+  it('shows the newest action live, stepping a row at a time', async () => {
     const { ctrl } = mount();
     openAction();
     expect(crumbs()).toEqual(['Actions', 'Newest']);
@@ -1590,19 +1608,32 @@ describe('Store action level', () => {
     await act(() =>
       ctrl().set(Post, { id: '1' }, { id: '1', title: 'Edited' }),
     );
-    // live: the newest, after it nothing yet
+    // live: the newest, after it nothing yet. Live sits past the last row,
+    // so the step before it is that row, held still
     expect(crumbs()).toEqual(['Actions', 'set Post']);
     expect(top().textContent).toMatch(/title: "One" → "Edited"/);
-    expect(step('Before').textContent).toContain('setResponse GET /posts');
+    expect(step('Before').textContent).toContain('set Post');
     expect(step('After').textContent).toContain('this is live');
-    // the one before becomes the moment, in the same level
     const level = top();
     fireEvent.click(step('Before'));
     expect(top()).toBe(level);
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts']);
-    expect(scrubber().textContent).toContain('After setResponse GET /posts');
+    expect(crumbs()).toEqual(['Actions', 'set Post']);
+    expect(step('Before').textContent).toContain('GET /posts');
+    // the row before becomes the moment, in the same level: its request
+    // as one, every step of it marked
+    fireEvent.click(step('Before'));
+    expect(top()).toBe(level);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
+    expect(scrubber().textContent).toContain('After GET /posts');
     expect(step('Before').textContent).toContain('nothing the log kept');
     expect(step('After').textContent).toContain('set Post');
+    expect(
+      [
+        ...top().querySelectorAll<HTMLElement>('[role="button"][aria-current]'),
+      ].map(el => el.dataset.seq),
+    ).toEqual(['1', '2']);
+    expect(top().textContent).toMatch(/fetch.*setResponse.*Store changes/s);
+    expect(top().textContent).not.toContain('dispatchedAt');
     fireEvent.click(step('After'));
     expect(crumbs()).toEqual(['Actions', 'set Post']);
     // past the newest is live again
@@ -1615,6 +1646,141 @@ describe('Store action level', () => {
     expect(rows()).toHaveLength(2);
   });
 
+  it('dives into a step, stepping an action at a time, and surfaces to its request', async () => {
+    const { ctrl } = mount();
+    openAction();
+    await act(() => ctrl().fetch(getPosts));
+    await act(() =>
+      ctrl().set(Post, { id: '1' }, { id: '1', title: 'Edited' }),
+    );
+    const headings = () =>
+      [...top().querySelectorAll('h3')].map(h => h.textContent);
+    // an action of no request is one level: nothing deeper to go to
+    expect(headings()).toEqual(['Store changes', 'Action']);
+    fireEvent.click(step('Before'));
+    fireEvent.click(step('Before'));
+    const request = top();
+    expect(headings()).toEqual(['Steps', 'Store changes']);
+    // a step itself opens alone, a level deeper
+    fireEvent.click(
+      top().querySelector<HTMLElement>('[role="button"][data-seq="2"]')!,
+    );
+    expect(top()).not.toBe(request);
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
+    expect(headings()).toEqual(['Store changes', 'Action']);
+    expect(top().textContent).toContain('dispatchedAt');
+    expect(document.activeElement).toBe(top());
+    // steps there are its request's actions, one at a time
+    const deep = top();
+    fireEvent.click(step('Before'));
+    expect(top()).toBe(deep);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
+    // the scrubber steps the same way, and its marks show just the action
+    const selected = () =>
+      [...document.querySelectorAll<HTMLElement>('[data-selected]')].map(
+        el => el.getAttribute('aria-label')?.split(' ')[0],
+      );
+    expect(selected()).toEqual(['fetch']);
+    fireEvent.click(screen.getByRole('button', { name: 'Next change' }));
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
+    expect(selected()).toEqual(['setResponse']);
+    fireEvent.click(screen.getByRole('button', { name: 'Previous change' }));
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
+    // a level deeper, a mark picks its action alone too
+    fireEvent.click(
+      within(scrubber()).getByRole('button', { name: /^setResponse at/ }),
+    );
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
+    fireEvent.click(
+      within(scrubber()).getByRole('button', { name: /^fetch at/ }),
+    );
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
+    fireEvent.click(step('After'));
+    fireEvent.click(step('After'));
+    // past its request, the next action: one alone needs no request level
+    expect(crumbs()).toEqual(['Actions', 'set Post']);
+    fireEvent.click(step('Before'));
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
+    // Back surfaces to the request up to the step it came from, its steps
+    // marked
+    fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
+    expect(headings()).toEqual(['Steps', 'Store changes']);
+    expect(
+      [
+        ...top().querySelectorAll<HTMLElement>('[role="button"][aria-current]'),
+      ].map(el => el.dataset.seq),
+    ).toEqual(['1', '2']);
+    const after = () =>
+      [...top().querySelectorAll<HTMLElement>('[data-after]')].map(
+        el => el.dataset.seq,
+      );
+    expect(after()).toEqual([]);
+    backTo('Actions');
+    fireEvent.click(
+      top().querySelector<HTMLElement>(
+        '[role="button"][data-seq="1"]:not([aria-expanded])',
+      )!,
+    );
+    fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
+    // up to its fetch, the response it hasn't seen yet dims
+    expect(after()).toEqual(['2']);
+    // at a step alone, the list opens its row: the step before it stays as
+    // it is
+    fireEvent.click(
+      top().querySelector<HTMLElement>('[role="button"][data-seq="2"]')!,
+    );
+    backTo('Actions');
+    expect(top().querySelector('[data-seq="1"]')).not.toBeNull();
+    expect(after()).toEqual([]);
+  });
+
+  it('steps an action at a time past a fetch deduped into the request, as the timeline shows none', async () => {
+    const { ctrl } = mount();
+    await act(() =>
+      Promise.all([ctrl().fetch(getPosts), ctrl().fetch(getPosts)]),
+    );
+    openAction();
+    fireEvent.click(
+      top().querySelector<HTMLElement>('[role="button"][data-seq="1"]')!,
+    );
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
+    // its mark is the moment's
+    const selected = () =>
+      [...document.querySelectorAll<HTMLElement>('[data-selected]')].map(
+        el => el.getAttribute('aria-label')?.split(' ')[0],
+      );
+    expect(selected()).toEqual(['fetch']);
+    // the deduped fetch is no step of its own: on to the response
+    fireEvent.click(step('After'));
+    expect(crumbs()).toEqual([
+      'Actions',
+      'GET /posts',
+      'setResponse GET /posts',
+    ]);
+    expect(selected()).toEqual(['setResponse']);
+    fireEvent.click(screen.getByRole('button', { name: 'Previous change' }));
+    expect(crumbs()).toEqual(['Actions', 'GET /posts', 'fetch GET /posts']);
+    expect(selected()).toEqual(['fetch']);
+  });
+
   it('shows the newest request live as one, its optimistic update too', async () => {
     const { ctrl } = mount();
     await act(() => ctrl().fetch(getPosts));
@@ -1633,6 +1799,8 @@ describe('Store action level', () => {
     expect(crumbs()).toEqual(['Actions', 'PATCH /posts/1']);
     expect(top().textContent).toMatch(/title: "One" → "Edited!"/);
     expect(top().textContent).toContain('this is live');
+    // live, nothing has come after
+    expect(top().querySelector('[data-after]')).toBeNull();
   });
 
   it('shows the newest poll live as its own request', async () => {
@@ -1658,6 +1826,77 @@ describe('Store action level', () => {
     expect(top().textContent).not.toContain('"poll 0"');
   });
 
+  it('dives into a step of a subscription that is no request of its own, Back coming up to the row', async () => {
+    const { ctrl } = mount();
+    const polled = new Endpoint(async () => [{ id: '1', title: 'poll' }], {
+      schema: [Post],
+      key: () => POSTS,
+      name: 'polled',
+      pollFrequency: 1e6,
+    });
+    await act(async () => {
+      await ctrl().subscribe(polled);
+      await ctrl().fetch(polled);
+    });
+    openPane();
+    fireEvent.click(rows()[0]);
+    const row = crumbs();
+    expect(row).toHaveLength(2);
+    // its subscribe stands alone: no request holds it but the row
+    fireEvent.click(
+      [
+        ...top().querySelectorAll<HTMLElement>('[role="button"][data-seq]'),
+      ].find(el => el.textContent!.includes('subscribe'))!,
+    );
+    expect(crumbs()).toHaveLength(3);
+    expect(crumbs().slice(0, 2)).toEqual(row);
+    fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
+    expect(crumbs()).toEqual(row);
+  });
+
+  it('steps a request at a time, each poll of a subscription its own', async () => {
+    const { ctrl } = mount();
+    const polled = new Endpoint(async () => [{ id: '1', title: 'poll' }], {
+      schema: [Post],
+      key: () => POSTS,
+      name: 'polled',
+      pollFrequency: 1e6,
+    });
+    await act(async () => {
+      await ctrl().subscribe(polled);
+      await ctrl().fetch(polled);
+      await ctrl().set(Post, { id: '2' }, { id: '2', title: 'Later' });
+      await ctrl().fetch(polled);
+    });
+    openAction();
+    const selected = () =>
+      [...document.querySelectorAll<HTMLElement>('[data-selected]')].map(
+        el => el.getAttribute('aria-label')?.split(' ')[0],
+      );
+    // live is past the newest request; back from it, a request at a time:
+    // a poll alone, its fetch and response marked, not the subscription's
+    // every poll (how many polls there are depends on timing)
+    const seen: string[] = [];
+    while (!(step('Before') as HTMLButtonElement).disabled) {
+      fireEvent.click(step('Before'));
+      const [, label] = crumbs();
+      seen.unshift(label!);
+      expect(selected()).toEqual(
+        label === 'set Post' ? ['set'] : ['fetch', 'setResponse'],
+      );
+    }
+    expect(seen).toContain('set Post');
+    expect(seen.length).toBeGreaterThanOrEqual(3);
+    expect(new Set(seen)).toEqual(new Set(['GET /posts', 'set Post']));
+    // and on again in time, to live
+    for (const label of seen.slice(1)) {
+      fireEvent.click(step('After'));
+      expect(crumbs()[1]).toBe(label);
+    }
+    fireEvent.click(step('After'));
+    expect(screen.queryByRole('button', { name: 'Live' })).toBeNull();
+  });
+
   it("goes back to the moment's action as its tab is picked over the list", async () => {
     const { ctrl } = mount();
     await act(() => ctrl().fetch(getPosts));
@@ -1665,7 +1904,7 @@ describe('Store action level', () => {
       ctrl().set(Post, { id: '1' }, { id: '1', title: 'Edited' }),
     );
     openPane();
-    expect(crumbs()).toEqual(['Actions']);
+    expect(crumbs()).toEqual([]);
     openAction();
     expect(crumbs()).toEqual(['Actions', 'set Post']);
     // at a moment, its action
@@ -1673,7 +1912,7 @@ describe('Store action level', () => {
     previous();
     openPane();
     openAction();
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
   });
 
   it('opens the action a timeline mark picks while it lists them', async () => {
@@ -1685,23 +1924,24 @@ describe('Store action level', () => {
     const mark = (name: RegExp) =>
       within(scrubber()).getByRole('button', { name });
     openPane();
-    expect(crumbs()).toEqual(['Actions']);
+    expect(crumbs()).toEqual([]);
     const list = top();
     fireEvent.click(mark(/^set at/));
     expect(crumbs()).toEqual(['Actions', 'set Post']);
     // a step moves it on, in place
     previous();
-    expect(crumbs()).toEqual(['Actions', 'setResponse GET /posts']);
+    expect(crumbs()).toEqual(['Actions', 'GET /posts']);
     backTo('Actions');
     expect(top()).toBe(list);
     // stepping over the list only marks the moment there
     fireEvent.click(screen.getByRole('button', { name: 'Next change' }));
-    expect(crumbs()).toEqual(['Actions']);
+    expect(crumbs()).toEqual([]);
     // in State, a mark only moves the moment
     openState();
     fireEvent.click(mark(/^setResponse at/));
     expect(crumbs()).toEqual([]);
-    expect(scrubber().textContent).toContain('After setResponse GET /posts');
+    // on the surface, a mark picks its row, as the list's row does
+    expect(scrubber().textContent).toContain('After GET /posts');
   });
 
   it('steps the timeline with ← → from anywhere they mean nothing else', async () => {
@@ -1714,7 +1954,7 @@ describe('Store action level', () => {
     fireEvent.keyDown(top(), { key: 'ArrowLeft' });
     expect(scrubber().textContent).toContain('After set Post');
     fireEvent.keyDown(top(), { key: 'ArrowLeft' });
-    expect(scrubber().textContent).toContain('After setResponse GET /posts');
+    expect(scrubber().textContent).toContain('After GET /posts');
     fireEvent.keyDown(top(), { key: 'ArrowRight' });
     fireEvent.keyDown(top(), { key: 'ArrowRight' });
     expect(screen.queryByRole('button', { name: 'Live' })).toBeNull();
@@ -1777,7 +2017,8 @@ describe('Store Actions pane on a record', () => {
     // the store lists every action
     toRoot();
     openPane();
-    expect(listCount()).toBe('5');
+    // its tab names the store's: no crumbs of their own
+    expect(crumbs()).toEqual([]);
     expect(rows()).toHaveLength(5);
   });
 
@@ -1946,7 +2187,7 @@ describe('Store Actions pane on a record', () => {
     const { seq } = step.dataset;
     fireEvent.click(step);
     expect(top().textContent).toContain('title:');
-    fireEvent.click(within(top()).getByRole('button', { name: 'Back' }));
+    backTo('Actions of Post 1');
     expect(
       [
         ...pane().querySelectorAll<HTMLElement>(
@@ -2115,7 +2356,7 @@ describe('Store Actions pane on a record', () => {
     });
     await act(() => ctrl().fetch(getPosts));
     const bar = scrubber();
-    expect(bar.textContent).toContain('setResponse');
+    expect(bar.textContent).toContain('GET /posts');
     const next = within(bar).getByRole('button', { name: 'Next change' });
     expect((next as HTMLButtonElement).disabled).toBe(false);
     // its records still say what changed them
@@ -2137,7 +2378,7 @@ describe('Store Actions pane on a record', () => {
     expect(previousButton().disabled).toBe(false);
     fireEvent.click(previousButton());
     expect(screen.getByRole('button', { name: 'Live' })).toBeTruthy();
-    expect(bar.textContent).toContain('setResponse');
+    expect(bar.textContent).toContain('GET /posts');
   });
 });
 
diff --git a/website/src/components/Playground/preview/__tests__/StoreTimeline.test.tsx b/website/src/components/Playground/preview/__tests__/StoreTimeline.test.tsx
index f80ba46c93f7..bfb8f6bbc1a7 100644
--- a/website/src/components/Playground/preview/__tests__/StoreTimeline.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreTimeline.test.tsx
@@ -307,15 +307,14 @@ describe('Store scrubber', () => {
     expect(screen.getByRole('group', { name: 'Store view' })).toBeTruthy();
     await act(() => ctrl().fetch(getPosts));
     await act(() => ctrl().fetch(getPosts));
-    // only actions that reached the store can be picked; the rest show
+    // every action can be picked, those the store never saw too (hollow)
     const marks = within(bar).getAllByRole('button', {
       name: /^setResponse at/,
     });
     expect(marks).toHaveLength(2);
-    expect(within(bar).getAllByRole('img', { name: /^fetch at/ })).toHaveLength(
-      2,
-    );
-    expect(within(bar).queryByRole('button', { name: /^fetch at/ })).toBeNull();
+    expect(
+      within(bar).getAllByRole('button', { name: /^fetch at/ }),
+    ).toHaveLength(2);
     // the lanes stay collapsed
     expect(screen.queryByRole('group', { name: /^Timeline/ })).toBeNull();
   });
@@ -339,9 +338,9 @@ describe('Store scrubber', () => {
     expect(
       within(bar).getAllByRole('button', { name: /^setResponse at/ }),
     ).toHaveLength(20);
-    expect(within(bar).getAllByRole('img', { name: /^fetch at/ })).toHaveLength(
-      20,
-    );
+    expect(
+      within(bar).getAllByRole('button', { name: /^fetch at/ }),
+    ).toHaveLength(20);
     expect(bar.querySelector('[data-count]')).toBeNull();
     // the newest stays in view, as the lanes' does
     expect(track.scrollLeft).toBe(2000);
@@ -422,7 +421,7 @@ describe('Store scrubber', () => {
     });
     fireEvent.click(marks[0]);
     expect(bar.textContent).toContain('After');
-    expect(bar.textContent).toContain('setResponse');
+    expect(bar.textContent).toContain('GET /posts');
     expect(bar.textContent).toMatch(/· [\d.]+s/);
     expect(marks[0].hasAttribute('data-selected')).toBe(true);
     expect(screen.getAllByText('"One"').length).toBeGreaterThan(0);
@@ -439,6 +438,25 @@ describe('Store scrubber', () => {
     expect(marks[0].hasAttribute('data-selected')).toBe(false);
   });
 
+  it('marks every action of the row the moment stands for, and a mark picks its row', async () => {
+    const { ctrl } = mount();
+    await act(() => ctrl().fetch(getPosts));
+    const bar = scrubber();
+    const [fetch] = within(bar).getAllByRole('button', { name: /^fetch at/ });
+    const [response] = within(bar).getAllByRole('button', {
+      name: /^setResponse at/,
+    });
+    // the request, its fetch with its response
+    fireEvent.click(screen.getByRole('button', { name: 'Previous change' }));
+    expect(fetch.hasAttribute('data-selected')).toBe(true);
+    expect(response.hasAttribute('data-selected')).toBe(true);
+    // on the surface, a mark picks its row, as the list's row does
+    fireEvent.click(screen.getByRole('button', { name: 'Live' }));
+    fireEvent.click(fetch);
+    expect(fetch.hasAttribute('data-selected')).toBe(true);
+    expect(response.hasAttribute('data-selected')).toBe(true);
+  });
+
   it('steps through changes with ‹ › and the arrow keys, past the newest to live', async () => {
     const { ctrl } = mount();
     title = 'One';
@@ -513,9 +531,10 @@ describe('Store scrubber', () => {
     // over the subject, with focus
     const level = top()!;
     expect(level.querySelector('[aria-current="page"]')!.textContent).toBe(
-      'setResponse GET /posts',
+      'GET /posts',
     );
-    expect(level.textContent).toContain('dispatchedAt');
+    // as its request: the steps to it, and what they did
+    expect(level.textContent).toContain('Store changes');
     expect(document.activeElement).toBe(level);
   });
 
@@ -525,15 +544,16 @@ describe('Store scrubber', () => {
     await act(() => ctrl().set(Post, { id: '2' }, { id: '2', title: 'Two' }));
     const marks = () =>
       within(scrubber())
-        .getAllByRole('button', { name: /at \d/ })
+        .getAllByRole('button', { name: /^set(Response)? at/ })
         .map(m => m.hasAttribute('data-dim'));
     // the store: every change
     expect(marks()).toEqual([false, false]);
     // a record: its own
     fireEvent.click(top()!.querySelector<HTMLElement>('tr[data-id]')!);
     expect(marks()).toEqual([false, true]);
+    // its rows: the request that added it
     fireEvent.click(screen.getByRole('button', { name: 'Previous change' }));
-    expect(scrubber().textContent).toContain('setResponse');
+    expect(scrubber().textContent).toContain('After GET /posts');
     expect(
       (
         screen.getByRole('button', {
@@ -565,7 +585,7 @@ describe('Store scrubber', () => {
     });
     // still first on the lane, picked, though the log let go of it
     expect(marks()[0].hasAttribute('data-selected')).toBe(true);
-    expect(scrubber().textContent).toContain('setResponse');
+    expect(scrubber().textContent).toContain('GET /posts');
   });
 });
 
@@ -1445,7 +1465,7 @@ describe('Store Actions pane', () => {
     expect(screen.queryByRole('button', { name: 'Close timeline' })).toBeNull();
     expect(pane()).toBeNull();
     expect(top()!.querySelector('[aria-current="page"]')!.textContent).toBe(
-      'setResponse GET /posts',
+      'GET /posts',
     );
     // focus lands on the level once the sheet slid shut
     fireEvent.transitionEnd(box);
diff --git a/website/src/components/Playground/preview/__tests__/managerAttribution.test.tsx b/website/src/components/Playground/preview/__tests__/managerAttribution.test.tsx
new file mode 100644
index 000000000000..9010de89ba64
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/managerAttribution.test.tsx
@@ -0,0 +1,712 @@
+/// <reference types="jest" />
+import { Endpoint, Entity } from '@data-client/endpoint';
+import {
+  actionTypes,
+  DataProvider,
+  DevToolsManager,
+  IdlingNetworkManager,
+  NetworkManager,
+  PollingSubscription,
+  SubscriptionManager,
+  useController,
+  useSuspense,
+  type ActionTypes,
+  type Controller,
+  type Manager,
+  type Middleware,
+} from '@data-client/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import React, { Suspense } from 'react';
+
+import { declarationsOf } from '../../editor/declarations';
+import { CodeOpenerContext, type CodeOpener } from '../../editor/openCode';
+import { stageFilter } from '../store/actionGroups';
+import { isLibraryManager, managerNames } from '../store/attribution';
+import SchemaRegistry from '../store/schemaRegistry';
+import StorePanel from '../store/StorePanel';
+
+jest.mock('../../../../utils/tabStorage', () => ({
+  useTabStorage: () => require('react').useState(null),
+}));
+
+class Ticker extends Entity {
+  id = '';
+  price = 0;
+}
+
+/** Pushes tickers with `controller.set`, and handles subscribes itself */
+class StreamManager implements Manager<ActionTypes> {
+  declare controller: Controller;
+  middleware: Middleware<ActionTypes> = controller => {
+    this.controller = controller;
+    return next => action =>
+      action.type === actionTypes.SUBSCRIBE ? Promise.resolve() : next(action);
+  };
+
+  push(price: number) {
+    return this.controller.set(Ticker, { id: 'BTC' }, { id: 'BTC', price });
+  }
+
+  cleanup() {}
+}
+
+/** Passes everything on, after a tick */
+class SlowManager implements Manager<ActionTypes> {
+  middleware: Middleware<ActionTypes> = () => next => async action => {
+    await Promise.resolve();
+    return next(action);
+  };
+
+  cleanup() {}
+}
+
+/** Fetches with `controller.fetch`, passing everything on */
+class PrefetchManager implements Manager<ActionTypes> {
+  declare controller: Controller;
+  middleware: Middleware<ActionTypes> = controller => {
+    this.controller = controller;
+    return next => action => next(action);
+  };
+
+  prefetch() {
+    return this.controller.fetch(getTicker);
+  }
+
+  cleanup() {}
+}
+
+/** Passes everything on */
+class QuietManager implements Manager<ActionTypes> {
+  middleware: Middleware<ActionTypes> = () => next => action => next(action);
+
+  cleanup() {}
+}
+
+const getTicker = new Endpoint(async () => ({ id: 'BTC', price: 1 }), {
+  schema: Ticker,
+  key: () => 'GET /ticker',
+  name: 'getTicker',
+});
+
+function mount(
+  own: Manager[],
+  preview?: React.ReactNode,
+  panel = false,
+  opener: CodeOpener | null = null,
+) {
+  const registry = new SchemaRegistry({ trimEvery: 1 });
+  const log = registry.log.connect(0);
+  const managers = [log.head, registry, ...log.track(own), log.tail];
+  const ref: { ctrl?: Controller } = {};
+  function Grab() {
+    ref.ctrl = useController();
+    return null;
+  }
+  render(
+    <CodeOpenerContext.Provider value={opener}>
+      <DataProvider managers={managers} devButton={null}>
+        <Grab />
+        <Suspense fallback="loading">{preview}</Suspense>
+        {panel && <StorePanel registry={registry} history={0} />}
+      </DataProvider>
+    </CodeOpenerContext.Provider>,
+  );
+  return {
+    ctrl: () => ref.ctrl!,
+    history: () => registry.log.history(0),
+    entries: () =>
+      registry.log.history(0).entries.map(e => ({
+        type: e.action.type,
+        origin: e.origin,
+        consumedBy: e.consumedBy,
+        requested: e.requested,
+      })),
+  };
+}
+
+describe('manager attribution', () => {
+  it('names the chain in order, numbering repeats', () => {
+    const stream = new StreamManager();
+    const { history } = mount([
+      stream,
+      new StreamManager(),
+      new NetworkManager(),
+      new SubscriptionManager(PollingSubscription),
+    ]);
+    act(() => {
+      stream.push(1);
+    });
+    expect(history().managers).toEqual([
+      'StreamManager',
+      'StreamManager #2',
+      'NetworkManager',
+      'SubscriptionManager',
+    ]);
+  });
+
+  it('knows library managers by class, not by their (minified) name', () => {
+    const name = Object.getOwnPropertyDescriptor(NetworkManager, 'name')!;
+    Object.defineProperty(NetworkManager, 'name', { value: 'e' });
+    try {
+      expect(
+        managerNames([
+          new NetworkManager(),
+          { middleware: () => (n: unknown) => n } as any,
+        ]),
+      ).toEqual(['NetworkManager', 'Object']);
+    } finally {
+      Object.defineProperty(NetworkManager, 'name', name);
+    }
+  });
+
+  it("names a subclass of the library's for itself: it is the code's", () => {
+    class PollingNetwork extends NetworkManager {}
+    const [own, idling] = managerNames([
+      new PollingNetwork(),
+      new IdlingNetworkManager(),
+    ]);
+    expect(own).toBe('PollingNetwork');
+    expect(isLibraryManager(own)).toBe(false);
+    // the library's own subclass is the library's
+    expect(isLibraryManager(idling)).toBe(true);
+  });
+
+  it("credits what a manager sends through its controller, not the app's", async () => {
+    const stream = new StreamManager();
+    const { ctrl, entries } = mount([stream, new NetworkManager()]);
+    await act(async () => {
+      void stream.push(2);
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+    });
+    expect(entries()).toEqual([
+      { type: actionTypes.SET, origin: 'StreamManager', consumedBy: undefined },
+      { type: actionTypes.SET, origin: undefined, consumedBy: undefined },
+    ]);
+  });
+
+  it('marks actions a middleware handled without passing on', async () => {
+    const { ctrl, entries } = mount([
+      new StreamManager(),
+      new NetworkManager(),
+      new SubscriptionManager(PollingSubscription),
+    ]);
+    await act(async () => {
+      void ctrl().subscribe(getTicker);
+    });
+    expect(entries()).toEqual([
+      {
+        type: actionTypes.SUBSCRIBE,
+        origin: undefined,
+        consumedBy: 'StreamManager',
+      },
+    ]);
+  });
+
+  it('credits NetworkManager with the fetches it handles and its response', async () => {
+    function App() {
+      const { price } = useSuspense(getTicker);
+      return <div>price {price}</div>;
+    }
+    const { entries } = mount(
+      [new NetworkManager(), new SubscriptionManager(PollingSubscription)],
+      <App />,
+    );
+    await screen.findByText('price 1');
+    // suspense renders twice: the second fetch shares the first's request
+    const fetched = {
+      type: actionTypes.FETCH,
+      origin: undefined,
+      consumedBy: 'NetworkManager',
+      requested: true,
+    };
+    expect(entries()).toEqual([
+      fetched,
+      fetched,
+      {
+        type: actionTypes.SET_RESPONSE,
+        origin: 'NetworkManager',
+        consumedBy: undefined,
+      },
+    ]);
+  });
+
+  it("knows a NetworkManager subclass's fetches start requests", async () => {
+    class LoggingNetworkManager extends NetworkManager {}
+    function App() {
+      const { price } = useSuspense(getTicker);
+      return <div>price {price}</div>;
+    }
+    const { entries } = mount([new LoggingNetworkManager()], <App />);
+    await screen.findByText('price 1');
+    expect(entries()[0]).toEqual({
+      type: actionTypes.FETCH,
+      origin: undefined,
+      consumedBy: 'LoggingNetworkManager',
+      requested: true,
+    });
+  });
+
+  it('waits for async middleware before calling an action consumed', async () => {
+    const { ctrl, entries } = mount([new SlowManager(), new NetworkManager()]);
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'BTC' }, { id: 'BTC', price: 4 });
+    });
+    expect(entries()).toEqual([
+      { type: actionTypes.SET, origin: undefined, consumedBy: undefined },
+    ]);
+    expect(screen.queryByText('loading')).toBeNull();
+  });
+
+  it('credits an action sent while another passes to whoever sent it', async () => {
+    // Echo answers each set with an expire, from inside the set's dispatch
+    class Echo implements Manager<ActionTypes> {
+      middleware: Middleware<ActionTypes> = controller => next => action => {
+        if (action.type === actionTypes.SET)
+          controller.expireAll({ testKey: () => false });
+        return next(action);
+      };
+
+      cleanup() {}
+    }
+    const stream = new StreamManager();
+    const { ctrl, entries } = mount([stream, new Echo(), new NetworkManager()]);
+    await act(async () => {
+      void stream.push(5);
+      void ctrl().resetEntireStore();
+    });
+    expect(entries().map(e => [e.type, e.origin])).toEqual([
+      [actionTypes.SET, 'StreamManager'],
+      [actionTypes.EXPIREALL, 'Echo'],
+      [actionTypes.RESET, undefined],
+    ]);
+  });
+
+  it('counts a copy passed on as the action passed on', async () => {
+    class Stamping implements Manager<ActionTypes> {
+      middleware: Middleware<ActionTypes> = () => next => action =>
+        next({ ...action });
+
+      cleanup() {}
+    }
+    const { ctrl, entries } = mount([new Stamping(), new NetworkManager()]);
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'BTC' }, { id: 'BTC', price: 6 });
+    });
+    expect(entries()[0].consumedBy).toBeUndefined();
+  });
+
+  it('credits whoever handles a copy, and stores it, on the recorded action', async () => {
+    class Stamping implements Manager<ActionTypes> {
+      middleware: Middleware<ActionTypes> = () => next => action =>
+        next({ ...action });
+
+      cleanup() {}
+    }
+    const { ctrl, history } = mount([
+      new Stamping(),
+      new Stamping(),
+      new StreamManager(),
+      new NetworkManager(),
+    ]);
+    await act(async () => {
+      void ctrl().subscribe(getTicker);
+      void ctrl().set(Ticker, { id: 'BTC' }, { id: 'BTC', price: 6 });
+    });
+    const [subscribe, set] = history().entries;
+    expect(subscribe.consumedBy).toBe('StreamManager');
+    expect(set.store).toBeDefined();
+  });
+
+  it("keeps an action's own record when another is passed on besides it", async () => {
+    class Extra implements Manager<ActionTypes> {
+      middleware: Middleware<ActionTypes> = controller => next => action => {
+        const result = next(action);
+        if (action.type === actionTypes.SET)
+          next({ ...action, value: { id: 'BTC', price: 0 } } as ActionTypes);
+        return result;
+      };
+
+      cleanup() {}
+    }
+    const { ctrl, history } = mount([new Extra(), new NetworkManager()]);
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'BTC' }, { id: 'BTC', price: 9 });
+    });
+    const [set] = history().entries;
+    expect(set.store?.before).not.toBe(set.store?.after);
+    expect((set.store?.after.entities as any).Ticker.BTC.price).toBe(9);
+  });
+
+  it('takes back "handled" when a held action is passed on later', async () => {
+    jest.useFakeTimers();
+    try {
+      class Holding implements Manager<ActionTypes> {
+        middleware: Middleware<ActionTypes> = () => next => action => {
+          setTimeout(() => next(action), 100);
+          return undefined as any;
+        };
+
+        cleanup() {}
+      }
+      const { ctrl, entries } = mount([new Holding(), new NetworkManager()]);
+      act(() => {
+        void ctrl().set(Ticker, { id: 'BTC' }, { id: 'BTC', price: 7 });
+      });
+      expect(entries()[0].consumedBy).toBe('Holding');
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(entries()[0].consumedBy).toBeUndefined();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it("doesn't credit DevToolsManager with calls through the controller it shares", async () => {
+    const devtools = new DevToolsManager();
+    const { entries } = mount([devtools, new NetworkManager()]);
+    await act(async () => {
+      void (devtools as any).controller.set(
+        Ticker,
+        { id: 'BTC' },
+        { id: 'BTC', price: 8 },
+      );
+    });
+    expect(entries()[0].origin).toBeUndefined();
+  });
+});
+
+describe('stageFilter', () => {
+  const base = {
+    hit: (e: any) => !!e.store,
+    lists: () => true,
+    gaps: new Map(),
+  };
+  const chain = ['StreamManager', 'NetworkManager'];
+
+  it("lists all the store's actions, and stands on those the code's managers kept too", () => {
+    const filter = stageFilter(base, chain, null);
+    expect(filter.lists).toBe(base.lists);
+    expect(filter.hit({ consumedBy: 'StreamManager' } as any)).toBe(true);
+    expect(filter.hit({ consumedBy: 'NetworkManager' } as any)).toBe(false);
+  });
+
+  it("narrows to a picked stage's actions", () => {
+    const filter = stageFilter(base, chain, 'StreamManager');
+    expect(filter.lists({ origin: 'StreamManager' } as any)).toBe(true);
+    expect(filter.lists({ store: {} } as any)).toBe(false);
+  });
+});
+
+describe('Store panel pipeline', () => {
+  const openActions = () =>
+    fireEvent.click(
+      within(screen.getAllByRole('group', { name: /^Scrubber/ })[0]).getByRole(
+        'button',
+        { name: 'Actions' },
+      ),
+    );
+  const pipeline = () => screen.getByRole('group', { name: /^Pipeline/ });
+  /** The pipeline's stages (and folds), as they read */
+  const stages = () =>
+    within(pipeline())
+      .getAllByRole('button')
+      .map(b => b.textContent);
+  /** The pipeline's button that reads `name` */
+  const stage = (name: string | RegExp) =>
+    within(pipeline()).getByRole('button', { name });
+  /** The listed rows' heads */
+  const listed = () =>
+    screen
+      .getByRole('region', { name: 'Actions' })
+      .querySelectorAll('[role="button"][aria-expanded]');
+
+  it('draws the app, the chain and the store, with what each sent and kept', async () => {
+    const stream = new StreamManager();
+    const { ctrl } = mount(
+      [
+        stream,
+        new NetworkManager(),
+        new SubscriptionManager(PollingSubscription),
+      ],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void stream.push(1);
+      void stream.push(2);
+      void ctrl().subscribe(getTicker);
+    });
+    openActions();
+    expect(stages()).toEqual(['the app1', 'StreamManager2⊘ 1', '2 idle']);
+    expect(pipeline().lastElementChild?.textContent).toBe('store');
+    // the idle ones open in place, and fold again
+    fireEvent.click(stage(/^2 idle/));
+    expect(stages()).toEqual([
+      'the app1',
+      'StreamManager2⊘ 1',
+      'NetworkManager0',
+      'SubscriptionManager0',
+      'fold',
+    ]);
+    fireEvent.click(stage(/^fold/));
+    stage(/^2 idle/);
+  });
+
+  it('draws the library defaults and their path', async () => {
+    const { ctrl } = mount(
+      [new NetworkManager(), new SubscriptionManager(PollingSubscription)],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+    });
+    openActions();
+    expect(stages()).toEqual(['the app1', '2 idle']);
+    fireEvent.click(listed()[0]);
+    const path = await screen.findByRole('group', { name: /^Path/ });
+    // it only passed them
+    expect(path.textContent).toBe('the app→2 passed→store');
+  });
+
+  it('folds each run of quiet managers on its own', async () => {
+    const { ctrl } = mount(
+      [
+        new QuietManager(),
+        new QuietManager(),
+        new StreamManager(),
+        new NetworkManager(),
+        new SubscriptionManager(PollingSubscription),
+      ],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void ctrl().subscribe(getTicker);
+    });
+    openActions();
+    expect(stages()).toEqual([
+      'the app1',
+      '2 idle',
+      'StreamManager0⊘ 1',
+      '2 idle',
+    ]);
+    const [first] = within(pipeline()).getAllByRole('button', {
+      name: /^2 idle/,
+    });
+    expect(first.getAttribute('aria-expanded')).toBe('false');
+    first.focus();
+    fireEvent.click(first);
+    expect(stages()).toEqual([
+      'the app1',
+      'QuietManager0',
+      'QuietManager #20',
+      'fold',
+      'StreamManager0⊘ 1',
+      '2 idle',
+    ]);
+    // it says which run it folds
+    const fold = stage('fold: QuietManager, QuietManager #2');
+    expect(fold.getAttribute('aria-expanded')).toBe('true');
+    // the button pressed stays, keeping focus, to fold it back
+    expect(fold).toBe(first);
+    expect(document.activeElement).toBe(fold);
+    fireEvent.click(fold);
+    expect(document.activeElement?.textContent).toBe('2 idle');
+    expect(stages()).toEqual([
+      'the app1',
+      '2 idle',
+      'StreamManager0⊘ 1',
+      '2 idle',
+    ]);
+    fireEvent.click(listed()[0]);
+    const path = await screen.findByRole('group', { name: /^Path/ });
+    expect(path.textContent).toBe(
+      'the app→2 passed→StreamManager⊘ handled it→2 never saw it→store',
+    );
+  });
+
+  it('keeps a run open as its first manager leaves, and folded when it rejoins', async () => {
+    const { ctrl } = mount(
+      [new QuietManager(), new QuietManager(), new QuietManager()],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+    });
+    openActions();
+    expect(stages()).toEqual(['the app1', '3 idle']);
+    fireEvent.click(stage(/^3 idle/));
+    // picking the first takes it out of the run, which stays open
+    fireEvent.click(stage(/^QuietManager(?! #)/));
+    expect(stages()).toEqual([
+      'the app1',
+      'QuietManager0',
+      'QuietManager #20',
+      'QuietManager #30',
+      'fold',
+    ]);
+    fireEvent.click(stage(/^fold/));
+    expect(stages()).toEqual(['the app1', 'QuietManager0', '2 idle']);
+    // unpicked, it rejoins the folded run without opening it
+    fireEvent.click(stage(/^QuietManager(?! #)/));
+    expect(stages()).toEqual(['the app1', '3 idle']);
+  });
+
+  it('closes a run that splits up', async () => {
+    const { ctrl } = mount(
+      [new QuietManager(), new QuietManager()],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+    });
+    openActions();
+    fireEvent.click(stage(/^2 idle/));
+    fireEvent.click(stage(/^QuietManager(?! #)/));
+    expect(stages()).toEqual(['the app1', 'QuietManager0', 'QuietManager #20']);
+    fireEvent.click(stage(/^QuietManager(?! #)/));
+    expect(stages()).toEqual(['the app1', '2 idle']);
+  });
+
+  it("shows only a stage's actions while it is picked", async () => {
+    const stream = new StreamManager();
+    const { ctrl } = mount([stream, new NetworkManager()], undefined, true);
+    await act(async () => {
+      void stream.push(1);
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+      void ctrl().subscribe(getTicker);
+    });
+    openActions();
+    expect(listed()).toHaveLength(3);
+    const streamStage = stage(/^StreamManager/);
+    fireEvent.click(streamStage);
+    expect(streamStage.getAttribute('aria-pressed')).toBe('true');
+    // its set and the subscribe it kept from the store
+    expect(listed()).toHaveLength(2);
+    fireEvent.click(stage(/^the app/));
+    expect(listed()).toHaveLength(2);
+    fireEvent.click(stage(/^the app/));
+    expect(listed()).toHaveLength(3);
+  });
+
+  it("tags the store's actions with the manager that sent them", async () => {
+    const stream = new StreamManager();
+    const { ctrl } = mount([stream, new NetworkManager()], undefined, true);
+    await act(async () => {
+      void stream.push(1);
+      void ctrl().set(Ticker, { id: 'ETH' }, { id: 'ETH', price: 3 });
+    });
+    openActions();
+    expect(screen.getAllByText('↑ StreamManager')).toHaveLength(1);
+  });
+
+  it("draws a request's paths: one for each way its actions took", async () => {
+    const { ctrl } = mount([new NetworkManager()], undefined, true);
+    await act(async () => {
+      await Promise.all([ctrl().fetch(getTicker), ctrl().fetch(getTicker)]);
+    });
+    openActions();
+    fireEvent.click(listed()[0]);
+    const paths = await screen.findAllByRole('group', { name: /^Path/ });
+    expect(paths.map(p => p.textContent)).toEqual([
+      'the app→NetworkManager⊘ handled it→store×2',
+      // a manager's dispatch starts at the top of the chain
+      'NetworkManager↑ sent it→store',
+    ]);
+    // each under the first step to take it; the deduped fetch took the
+    // same way
+    const fetchPath = paths[0].parentElement;
+    expect(fetchPath?.previousElementSibling?.textContent).toMatch(
+      /^\d+\.\d+sfetch$/,
+    );
+    expect(paths[0].textContent).toMatch(/store×2$/);
+    expect(paths[1].parentElement?.previousElementSibling?.textContent).toMatch(
+      /^\d+\.\d+ssetResponse/,
+    );
+  });
+
+  it('heads a request with its steps, then its store changes', async () => {
+    const { ctrl } = mount([new NetworkManager()], undefined, true);
+    await act(async () => {
+      await ctrl().fetch(getTicker);
+    });
+    openActions();
+    fireEvent.click(listed()[0]);
+    await screen.findAllByRole('group', { name: /^Path/ });
+    expect(
+      screen.getAllByRole('heading', { level: 3 }).map(h => h.textContent),
+    ).toEqual(['Steps', 'Store changes']);
+  });
+
+  it('draws the path of a deduped fetch that went its own way', async () => {
+    const prefetcher = new PrefetchManager();
+    const { ctrl } = mount([prefetcher, new NetworkManager()], undefined, true);
+    await act(async () => {
+      await Promise.all([ctrl().fetch(getTicker), prefetcher.prefetch()]);
+    });
+    openActions();
+    fireEvent.click(listed()[0]);
+    const paths = await screen.findAllByRole('group', { name: /^Path/ });
+    const own = paths.find(p =>
+      /^PrefetchManager↑ sent it/.test(p.textContent ?? ''),
+    );
+    expect(own?.parentElement?.previousElementSibling?.textContent).toMatch(
+      /deduped into this request$/,
+    );
+  });
+
+  it("opens the code of the playground's own managers wherever they're named", async () => {
+    const open = jest.fn();
+    const documents = [
+      { path: 'Ticker.ts', value: 'export class Ticker {}' },
+      {
+        path: 'StreamManager.ts',
+        value: "import x from 'x';\n\nexport default class StreamManager {}",
+      },
+    ];
+    const stream = new StreamManager();
+    mount([stream, new NetworkManager()], undefined, true, {
+      declared: declarationsOf(documents),
+      open,
+    });
+    await act(async () => {
+      void stream.push(1);
+    });
+    openActions();
+    const target = { path: 'StreamManager.ts', line: 3 };
+    const links = () => screen.getAllByTitle('Open StreamManager in the code');
+    // the pipeline's, and the tag on its action's row
+    expect(links()).toHaveLength(2);
+    for (const link of links()) fireEvent.click(link);
+    expect(open.mock.calls).toEqual([[target], [target]]);
+    // the tag's click opens no action
+    expect(screen.queryByRole('group', { name: /^Path/ })).toBeNull();
+    // nor do the library's managers, which the code doesn't declare
+    expect(screen.queryByTitle(/Open NetworkManager/)).toBeNull();
+    fireEvent.click(listed()[0]);
+    const path = await screen.findByRole('group', { name: /^Path/ });
+    fireEvent.click(within(path).getByTitle('Open StreamManager in the code'));
+    expect(open).toHaveBeenLastCalledWith(target);
+  });
+
+  it("draws an action's path: who sent it and where it stopped", async () => {
+    const { ctrl } = mount(
+      [new StreamManager(), new NetworkManager()],
+      undefined,
+      true,
+    );
+    await act(async () => {
+      void ctrl().subscribe(getTicker);
+    });
+    openActions();
+    fireEvent.click(listed()[0]);
+    const path = await screen.findByRole('group', { name: /^Path/ });
+    expect(path.textContent).toBe(
+      'the app→StreamManager⊘ handled it→NetworkManager→store',
+    );
+  });
+});
diff --git a/website/src/components/Playground/preview/managers.ts b/website/src/components/Playground/preview/managers.ts
index efe1d05f3266..8e608f8ae10e 100644
--- a/website/src/components/Playground/preview/managers.ts
+++ b/website/src/components/Playground/preview/managers.ts
@@ -8,6 +8,7 @@ import {
 
 import { takeSnapshot, type PreviewSnapshot } from './usePreviewReset';
 import type { CodeDocument } from '../editor/codeModel';
+import { declarationsIn } from '../editor/declarations';
 
 /** Hash of the documents `getManagers()` depends on. Editing them gives the
  * store new managers; other edits keep them. */
@@ -35,15 +36,13 @@ function managerSources(sources: readonly string[]): string[] {
 }
 
 function declaresNameUsedBy(source: string, user: string): boolean {
-  for (const [, name] of source.matchAll(DECLARATION)) {
+  for (const { name } of declarationsIn(source)) {
     const escaped = name.replace(/\$/g, '\\$');
     if (new RegExp(`(?<![\\w$])${escaped}(?![\\w$])`).test(user)) return true;
   }
   return false;
 }
 const DEFINES_GET_MANAGERS = /\bfunction\s+getManagers\b|\bgetManagers\s*[:=]/;
-const DECLARATION =
-  /\b(?:class|function|const|let|var|enum)\s+([A-Za-z_$][\w$]*)/g;
 
 /** Managers a playground's code declares with `getManagers()`, the same
  * function a real app passes to `<DataProvider managers>`.
diff --git a/website/src/components/Playground/preview/store/ActionDetail.tsx b/website/src/components/Playground/preview/store/ActionDetail.tsx
index 8c6ea88228de..0094f4f38d28 100644
--- a/website/src/components/Playground/preview/store/ActionDetail.tsx
+++ b/website/src/components/Playground/preview/store/ActionDetail.tsx
@@ -14,8 +14,10 @@ import {
   ChangeChip,
   gapText,
   spanOf,
+  Time,
   useActions,
 } from './actionParts';
+import { shownChain } from './attribution';
 import { EndpointBody } from './Details';
 import { errorText, findRow, isEndpointRow } from './model';
 import {
@@ -25,6 +27,7 @@ import {
   type Nav,
   type View,
 } from './nav';
+import { StepPath } from './Pipeline';
 import { plain } from './refs';
 import styles from './store.module.css';
 import {
@@ -37,9 +40,11 @@ import {
   ValueChange,
 } from './Value';
 
-/** What an action did to `subject` (every row at the store, a line saying
- * it left the subject alone, or that it is where a `gap` of dropped actions
- * changing it was found), then the action itself */
+/** One action, headed by when it was dispatched and the way it took
+ * through the managers (its crumb names it, so no section of their own),
+ * then what it did to `subject` (every row at the store, a line saying it left the subject alone, or that it is where a
+ * `gap` of dropped actions changing it was found); then, only here, the
+ * action itself */
 export function ActionDetail({
   entry,
   subject,
@@ -49,9 +54,16 @@ export function ActionDetail({
   subject: View;
   gap?: ChangeKind;
 }) {
+  const chain = shownChain(useActions().history.managers);
   return (
     <div className={styles.actBody}>
+      <div className={styles.actHeadline}>
+        <Time at={entry.at} />
+        {chain && <StepPath chain={chain} entry={entry} n={1} />}
+      </div>
+      <h3 className={styles.sectionLabel}>Store changes</h3>
       <SubjectChanges entries={[entry]} subject={subject} gap={gap} />
+      <h3 className={styles.sectionLabel}>Action</h3>
       <div className={clsx(styles.fields, styles.metaList)}>
         <Field name="dispatchedAt" node={{ t: 'val', v: entry.at }} />
         {actionFields(entry.action).map(([name, value]) => (
@@ -106,7 +118,7 @@ export function SubjectChanges({
           )}
         </>
       : <span className={styles.dim}>
-          {unappliedNote(entries[entries.length - 1].action)}
+          {unappliedNote(entries[entries.length - 1])}
         </span>
       }
     </div>
@@ -126,16 +138,12 @@ function unchangedNote(subject: View) {
 }
 
 /** Why an action that never reached the store is still in the log */
-function unappliedNote(action: ActionTypes) {
-  switch (action.type) {
-    case actionTypes.FETCH:
-      return 'Started the request; the store changes when its response arrives';
-    case actionTypes.SUBSCRIBE:
-    case actionTypes.UNSUBSCRIBE:
-      return 'Handled by SubscriptionManager; the store is unchanged';
-    default:
-      return 'A manager handled this without passing it to the store';
-  }
+function unappliedNote({ action, consumedBy, requested }: LogEntry) {
+  if (action.type === actionTypes.FETCH && (!consumedBy || requested))
+    return 'Started the request; the store changes when its response arrives';
+  return consumedBy ?
+      `Handled by ${consumedBy}; the store is unchanged`
+    : 'Not passed on to the store (yet)';
 }
 
 /** Rows the `stored` actions changed, and how */
diff --git a/website/src/components/Playground/preview/store/ActionList.tsx b/website/src/components/Playground/preview/store/ActionList.tsx
index 7ec6dcefefb9..3136d8b70707 100644
--- a/website/src/components/Playground/preview/store/ActionList.tsx
+++ b/website/src/components/Playground/preview/store/ActionList.tsx
@@ -11,6 +11,7 @@ import React, {
 
 import {
   groupEntriesOf,
+  stageFilter,
   groupOf,
   joinedFetches,
   touches,
@@ -18,6 +19,9 @@ import {
   type ChangeKind,
   type RequestGroup,
   type SubjectFilter,
+  isLone,
+  rowMoment,
+  rowsOf,
 } from './actionGroups';
 import { findEntry, type LogEntry } from './actionLog';
 import {
@@ -26,6 +30,7 @@ import {
   gapText,
   KeyLabel,
   Lifecycle,
+  ManagerTags,
   spanOf,
   Status,
   statusFailed,
@@ -36,20 +41,19 @@ import {
   useFollow,
   useLog,
 } from './actionParts';
+import { routesOf, shownChain, stagesOf } from './attribution';
 import type { Header } from './DiveViews';
 import { byData, onActivateKey, revealIn, toggled } from './dom';
 import { actionId } from './model';
-import { ActionSpanContext, useNavState, type View } from './nav';
+import { ActionSpanContext, useNavState, type Scope, type View } from './nav';
+import { Pipeline, StepPath } from './Pipeline';
 import styles from './store.module.css';
 
 /** The groups with an action that touched the subject */
-function useRows(filter: SubjectFilter) {
+export function useRows(filter: SubjectFilter) {
   const { groups } = useActions();
   const { hit } = filter;
-  return useMemo(
-    () => groups.filter(g => groupEntriesOf(g).some(hit)),
-    [groups, hit],
-  );
+  return useMemo(() => rowsOf(groups, hit), [groups, hit]);
 }
 
 /** A peek at `subject`'s actions as the mouse rests on the scrubber's list
@@ -78,8 +82,8 @@ export function ActionsPane({
   toggle: React.RefObject<HTMLElement | null>;
   /** The pointer came into it (`true`) or left it */
   onHover: (inside: boolean, e: React.PointerEvent) => void;
-  /** A row (`whole`) or step was picked: moves the moment there */
-  onPick: (seq: number, whole?: boolean) => void;
+  /** A row (`group`) or step (`action`) was picked: moves the moment there */
+  onPick: (seq: number, scope?: Scope) => void;
   onClose: () => void;
 }) {
   const rows = useRows(filter);
@@ -133,13 +137,27 @@ export function ActionsPane({
  * `header` (the crumbs) with their count, then the list */
 export function ActionsLevel({
   subject,
-  filter,
+  filter: subjectFilter,
   header,
 }: {
   subject: View;
   filter: SubjectFilter;
   header: Header;
 }) {
+  const { history } = useActions();
+  // at the store: who sent what
+  const chain =
+    subject.kind === 'root' ? shownChain(history.managers) : undefined;
+  const [chosen, setChosen] = useState<string | null>(null);
+  // a stage the chain no longer has (the code changed) counts as none
+  const picked =
+    chosen !== null && chain && stagesOf(chain).includes(chosen) ?
+      chosen
+    : null;
+  const filter = useMemo(
+    () => (chain ? stageFilter(subjectFilter, chain, picked) : subjectFilter),
+    [chain, picked, subjectFilter],
+  );
   const rows = useRows(filter);
   return (
     <>
@@ -147,6 +165,14 @@ export function ActionsLevel({
         <span className={styles.count}>{rows.length.toLocaleString()}</span>,
       )}
       <section className={styles.actionsLevel} aria-label="Actions">
+        {chain && (
+          <Pipeline
+            chain={chain}
+            entries={history.entries}
+            picked={picked}
+            onPick={setChosen}
+          />
+        )}
         <ActionList rows={rows} subject={subject} filter={filter} />
       </section>
     </>
@@ -167,12 +193,12 @@ function ActionList({
   rows: readonly ActionGroup[];
   subject: View;
   filter: SubjectFilter;
-  /** What a row (`whole`: its group's actions as one) or step picked does,
-   * by default open it */
-  onPick?: (seq: number, whole?: boolean) => void;
+  /** What a row (`group`: its actions as one) or step (`action`) picked
+   * does, by default open it */
+  onPick?: (seq: number, scope?: Scope) => void;
 }) {
   const { history, groups } = useActions();
-  const { seq, whole, set, show } = useNavState();
+  const { seq, current: marked, set, show } = useNavState();
   const scroller = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<ReadonlySet<string>>(() => new Set());
   const toggle = useCallback(
@@ -218,7 +244,8 @@ function ActionList({
     if (!next) return;
     e.preventDefault();
     next.focus();
-    set(Number(next.dataset.seq), next.dataset.id === next.dataset.group);
+    // a step stands for its request up to it
+    set(Number(next.dataset.seq), (next.dataset.scope as Scope) ?? 'request');
   };
   return (
     <div ref={scroller} className={styles.actList} onKeyDown={onKeyDown}>
@@ -235,8 +262,7 @@ function ActionList({
           key={group.id}
           group={group}
           open={open.has(group.id)}
-          currentSeq={group === current ? seq! : undefined}
-          whole={group === current && whole}
+          marked={group === current ? marked : undefined}
           subject={subject}
           filter={filter}
           onToggle={toggle}
@@ -276,7 +302,6 @@ function gapNotes(
 
 /** A group of one action is its own step: its row carries the action's id
  * (what the moment scrolls to); a group of several, the group's */
-const isLone = (group: ActionGroup) => groupEntriesOf(group).length === 1;
 const rowId = (group: ActionGroup) =>
   isLone(group) ? actionId(groupEntriesOf(group)[0].seq) : group.id;
 
@@ -327,8 +352,7 @@ function useReveal(
 const GroupRow = memo(function GroupRow({
   group,
   open,
-  currentSeq,
-  whole,
+  marked,
   subject,
   filter,
   onToggle,
@@ -336,27 +360,23 @@ const GroupRow = memo(function GroupRow({
 }: {
   group: ActionGroup;
   open: boolean;
-  /** The moment's action, when it is one of this row's */
-  currentSeq?: number;
-  /** The moment stands for the row's actions up to it, not one step */
-  whole: boolean;
+  /** The actions the moment stands for, when it is at this row */
+  marked?: ReadonlySet<number>;
   subject: View;
   filter: SubjectFilter;
   onToggle: (id: string) => void;
-  /** Opens an action (or the row's, `whole`), as the moment */
-  onSelect: (seq: number, whole?: boolean) => void;
+  /** Opens an action (or the row's, `group`), as the moment */
+  onSelect: (seq: number, scope?: Scope) => void;
 }) {
   const { log } = useLog();
   const all = groupEntriesOf(group);
   // what it did to the subject (at the store, everything)
   const changes = log.mergedChanges(all).filter(c => touches(subject, c));
   const first = all[0];
-  // the row stands for its last action that touched the subject (a
-  // request's response), or its last one
-  const seq = (all.findLast(filter.hit) ?? all[all.length - 1]).seq;
+  const { seq, scope } = rowMoment(group, filter.hit);
   const steps = !isLone(group);
   // the row stands for all its actions, what they did together
-  const select = () => onSelect(seq, steps);
+  const select = () => onSelect(seq, scope);
   const notes = gapNotes(all, filter.gaps);
   return (
     <div className={styles.actGroup} data-open={open || undefined}>
@@ -368,10 +388,10 @@ const GroupRow = memo(function GroupRow({
         role="button"
         tabIndex={0}
         aria-expanded={open}
-        aria-current={currentSeq !== undefined || undefined}
+        aria-current={!!marked || undefined}
         data-id={rowId(group)}
-        data-group={group.id}
         data-seq={seq}
+        data-scope={scope}
         className={clsx(styles.row, styles.actRow)}
         onClick={select}
         onKeyDown={onActivateKey(select)}
@@ -395,6 +415,7 @@ const GroupRow = memo(function GroupRow({
           {group.kind === 'single' && <TypeName entry={first} />}
           <KeyLabel value={group.key} />
           <Tag group={group} />
+          <ManagerTags entries={all} />
           <span className={styles.actMeta}>
             <Status group={group} />
             <Time at={first.at} />
@@ -415,7 +436,7 @@ const GroupRow = memo(function GroupRow({
       {open && (
         <Steps
           group={group}
-          currentSeq={whole ? undefined : currentSeq}
+          marked={marked}
           subject={subject}
           lists={filter.lists}
           notes={notes}
@@ -427,7 +448,8 @@ const GroupRow = memo(function GroupRow({
 });
 
 /** A group's actions that touched `subject` (at the store, all of them),
- * under what they did together: each opens its own */
+ * under what they did together: clicking one opens it alone, a level deeper,
+ * as the moment */
 export function GroupActions({
   group,
   subject,
@@ -437,15 +459,36 @@ export function GroupActions({
   subject: View;
   filter: SubjectFilter;
 }) {
-  const { show } = useNavState();
+  const { set, current } = useNavState();
+  const chain = shownChain(useActions().history.managers);
+  const entries = useMemo(() => groupEntriesOf(group), [group]);
+  // each way its actions took, under the first step to take it
+  const paths = useMemo(
+    () =>
+      chain &&
+      new Map(
+        routesOf(entries.filter(filter.lists)).map(({ entry, n }) => [
+          entry.seq,
+          <StepPath
+            key={'path ' + entry.seq}
+            chain={chain}
+            entry={entry}
+            n={n}
+          />,
+        ]),
+      ),
+    [chain, entries, filter],
+  );
   return (
     <div className={styles.groupSteps}>
       <Steps
         group={group}
+        marked={current}
         subject={subject}
         lists={filter.lists}
-        notes={gapNotes(groupEntriesOf(group), filter.gaps)}
-        onSelect={show}
+        notes={gapNotes(entries, filter.gaps)}
+        paths={paths}
+        onSelect={set}
       />
     </div>
   );
@@ -457,26 +500,32 @@ export function GroupActions({
  * log dropped of the row's own actions, the row says */
 function Steps({
   group,
-  currentSeq,
+  marked,
   subject,
   lists,
   notes,
+  paths,
   onSelect,
 }: {
   group: ActionGroup;
-  currentSeq?: number;
+  /** The actions the moment stands for */
+  marked?: ReadonlySet<number>;
   subject: View;
   lists: SubjectFilter['lists'];
   notes: ReadonlyMap<number, ChangeKind>;
-  onSelect: (seq: number) => void;
+  /** What to show under a step, by its seq */
+  paths?: ReadonlyMap<number, React.ReactNode>;
+  /** Opens a step's action alone */
+  onSelect: (seq: number, scope: 'action') => void;
 }) {
   const all = groupEntriesOf(group);
   const joined = joinedFetches(group);
   const counted = new Set<RequestGroup>();
   const scroller = useRef<HTMLDivElement>(null);
+  const { seq } = useNavState();
   // a long poll's newest tick stays in view while live; a picked moment
   // holds it still, as it does the list
-  useFollow(scroller, all, 'y', useNavState().seq !== null);
+  useFollow(scroller, all, 'y', seq !== null);
   return (
     <div className={styles.steps} ref={scroller}>
       {all.map(entry => {
@@ -490,18 +539,20 @@ function Steps({
                 key={entry.seq}
                 entry={entry}
                 own={group.key}
-                group={group.id}
                 subject={subject}
-                current={entry.seq === currentSeq}
+                current={!!marked?.has(entry.seq)}
+                after={!!marked && seq !== null && entry.seq > seq}
                 onSelect={onSelect}
               />
             ),
+            lists(entry) && paths?.get(entry.seq),
           ];
         }
         if (counted.has(request)) return null;
         counted.add(request);
-        const n = request.entries.filter(e => joined.has(e)).length;
-        return (
+        const deduped = request.entries.filter(e => joined.has(e));
+        const n = deduped.length;
+        return [
           <div
             key={entry.seq}
             className={clsx(styles.row, styles.stepRow, styles.joined)}
@@ -510,8 +561,10 @@ function Steps({
             <span className={styles.dim}>
               {n} more fetch{n === 1 ? '' : 'es'} deduped into this request
             </span>
-          </div>
-        );
+          </div>,
+          // a fetch deduped here may still have gone its own way
+          ...deduped.map(e => paths?.get(e.seq)),
+        ];
       })}
     </div>
   );
@@ -521,30 +574,31 @@ function Steps({
 function StepRow({
   entry,
   own,
-  group,
   subject,
   current,
+  after,
   onSelect,
 }: {
   entry: LogEntry;
   own: string;
-  /** The row's group, which ↑ ↓ keep to */
-  group: string;
   subject: View;
-  /** Whether it is the moment's action */
+  /** Whether the moment stands for it */
   current: boolean;
-  onSelect: (seq: number) => void;
+  /** Its row is the moment's and it came after the moment: it dims, as the
+   * store hasn't seen it yet */
+  after: boolean;
+  onSelect: (seq: number, scope: 'action') => void;
 }) {
   const { log } = useLog();
-  const select = () => onSelect(entry.seq);
+  const select = () => onSelect(entry.seq, 'action');
   const changes = log.changes(entry).filter(c => touches(subject, c));
   return (
     <div
       role="button"
       tabIndex={0}
       aria-current={current || undefined}
+      data-after={after || undefined}
       data-id={actionId(entry.seq)}
-      data-group={group}
       data-seq={entry.seq}
       className={clsx(styles.row, styles.stepRow)}
       onClick={select}
@@ -552,6 +606,7 @@ function StepRow({
     >
       <Time at={entry.at} />
       <TypeName entry={entry} />
+      <ManagerTags entries={[entry]} />
       <span className={styles.actSum}>
         <ActionSpanContext.Provider value={spanOf([entry])}>
           <ChangeChips changes={changes} own={own} />
diff --git a/website/src/components/Playground/preview/store/ManagerName.tsx b/website/src/components/Playground/preview/store/ManagerName.tsx
new file mode 100644
index 000000000000..5ce0dcda4fc8
--- /dev/null
+++ b/website/src/components/Playground/preview/store/ManagerName.tsx
@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+
+import { baseName, isLibraryManager } from './attribution';
+import styles from './store.module.css';
+import { CodeOpenerContext } from '../../editor/openCode';
+
+/** Opens where the playground's code declares manager `name`, if it does:
+ * the library's managers are no code of the reader's */
+function useOpenManager(name: string) {
+  const opener = useContext(CodeOpenerContext);
+  const target =
+    !isLibraryManager(name) && opener?.declared.get(baseName(name));
+  return opener && target ? () => opener.open(target) : undefined;
+}
+
+const openLabel = (name: string) => 'Open ' + name + ' in the code';
+
+/** A manager's name, a link to its code when the playground declares it.
+ * Its click and keys stay its own inside a row that is a button itself */
+export function ManagerName({ name }: { name: string }) {
+  const open = useOpenManager(name);
+  if (!open) return <>{name}</>;
+  return (
+    <button
+      type="button"
+      className={styles.managerLink}
+      title={openLabel(name)}
+      onClick={e => {
+        e.stopPropagation();
+        open();
+      }}
+      onKeyDown={e => e.stopPropagation()}
+    >
+      {name}
+    </button>
+  );
+}
+
+/** `</>` beside a manager's pipeline stage, whose own click picks it: opens
+ * its code when the playground declares it */
+export function CodeLink({ name }: { name: string }) {
+  const open = useOpenManager(name);
+  if (!open) return null;
+  return (
+    <button
+      type="button"
+      className={styles.codeLink}
+      title={openLabel(name)}
+      aria-label={openLabel(name)}
+      onClick={open}
+    >
+      {'</>'}
+    </button>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/Pipeline.tsx b/website/src/components/Playground/preview/store/Pipeline.tsx
new file mode 100644
index 000000000000..254cb57030ce
--- /dev/null
+++ b/website/src/components/Playground/preview/store/Pipeline.tsx
@@ -0,0 +1,282 @@
+import clsx from 'clsx';
+import React, { useMemo, useState } from 'react';
+
+import { actionName } from './actionGroups';
+import type { LogEntry } from './actionLog';
+import { APP, originOf, pipeline, stagesOf } from './attribution';
+import { CodeLink, ManagerName } from './ManagerName';
+import styles from './store.module.css';
+
+/** Every dispatch's way to the store: the app, then each manager of the
+ * chain in order, then the store. Each stage says how many actions it sent
+ * and (⊘) handled without passing on, and those that did neither fold into
+ * runs; picking one (`picked`, again to let go) shows only its actions */
+export function Pipeline({
+  chain,
+  entries,
+  picked,
+  onPick,
+}: {
+  chain: readonly string[];
+  entries: readonly LogEntry[];
+  picked: string | null;
+  onPick: (stage: string | null) => void;
+}) {
+  const stages = useMemo(() => pipeline(chain, entries), [chain, entries]);
+  return (
+    <Strip
+      className={styles.pipelineBar}
+      label="Pipeline: who sent the actions, and who handled them"
+      stages={stages.map(({ id, sent, handled }) => ({
+        id,
+        foldAs:
+          id !== APP && !sent && !handled && picked !== id ? 'idle' : undefined,
+        node: (
+          <>
+            <button
+              type="button"
+              className={styles.stage}
+              aria-pressed={picked === id}
+              onClick={() => onPick(picked === id ? null : id)}
+            >
+              {id}
+              <span className={sent ? styles.number : styles.dim}>{sent}</span>
+              {handled > 0 && (
+                <span className={styles.stageNote}>⊘ {handled}</span>
+              )}
+            </button>
+            <CodeLink name={id} />
+          </>
+        ),
+      }))}
+    />
+  );
+}
+
+/** The way `entry` took: who sent it (the app, or a manager), each manager
+ * it passed, the one that handled it (⊘) and those after, which never saw
+ * it, and whether it reached the store. Runs of managers it only passed, or
+ * that never saw it, fold */
+function ActionPath({
+  chain,
+  entry,
+  children,
+}: {
+  chain: readonly string[];
+  entry: LogEntry;
+  /** After the store, on its line */
+  children?: React.ReactNode;
+}) {
+  const { seq, action, consumedBy, store } = entry;
+  const origin = originOf(entry);
+  // a manager's dispatch starts down the chain from its top, not the app
+  const ids = origin === APP ? stagesOf(chain) : chain;
+  const stop = consumedBy ? ids.indexOf(consumedBy) : -1;
+  return (
+    <Strip
+      // another action's path starts folded
+      key={seq}
+      label={'Path of ' + actionName(action) + ' through the managers'}
+      stored={!!store}
+      stages={ids.map((id, i) => {
+        const after = stop >= 0 && i > stop;
+        return {
+          id,
+          foldAs:
+            id === origin || i === stop ? undefined
+            : after ? 'never saw it'
+            : 'passed',
+          node: (
+            <span
+              className={clsx(
+                styles.stage,
+                id === origin && styles.stageSender,
+                i === stop && styles.stageStop,
+                after && styles.stageOff,
+              )}
+            >
+              <ManagerName name={id} />
+              {id === origin && id !== APP && (
+                <span className={styles.stageNote}>↑ sent it</span>
+              )}
+              {i === stop && (
+                <span className={styles.stageNote}>⊘ handled it</span>
+              )}
+            </span>
+          ),
+        };
+      })}
+    >
+      {children}
+    </Strip>
+  );
+}
+
+/** The path one way a request's actions took through the managers, under
+ * the first step to take it, with how many took it */
+export function StepPath({
+  chain,
+  entry,
+  n,
+}: {
+  chain: readonly string[];
+  entry: LogEntry;
+  n: number;
+}) {
+  return (
+    <div className={styles.stepPath}>
+      <ActionPath chain={chain} entry={entry}>
+        {n > 1 && (
+          <span
+            className={styles.stepCount}
+            title={n + ' actions took this way'}
+          >
+            ×{n}
+          </span>
+        )}
+      </ActionPath>
+    </div>
+  );
+}
+
+interface Shown {
+  /** The stage's name */
+  readonly id: string;
+  /** What a run of stages like this one folds into ("3 idle"), if any:
+   * only stages with the same label fold together */
+  readonly foldAs?: string;
+  readonly node: React.ReactElement;
+}
+
+/** `stages` joined by arrows, wrapping as needed, ending at the store (dim
+ * when the action never reached it, `stored` false). Two or more stages in
+ * a row that fold alike show as one, until it's opened */
+function Strip({
+  className,
+  label,
+  stored = true,
+  stages,
+  children,
+}: {
+  className?: string;
+  label: string;
+  stored?: boolean;
+  stages: readonly Shown[];
+  /** After the store, on its line */
+  children?: React.ReactNode;
+}) {
+  /** The stages of the runs opened: a run (of two or more) is open while
+   * any of its stages is, so one that grows or shrinks as managers start or
+   * stop acting stays open */
+  const [opened, setOpened] = useState<ReadonlySet<string>>(new Set());
+  const runs = foldRuns(stages);
+  const isOpen = (run: readonly Shown[]) =>
+    run.length > 1 && run.some(stage => opened.has(stage.id));
+  // only the stages of runs open now: a run that splits up closes, so a
+  // manager that left it can't reopen another run it joins later
+  const openNow = new Set(
+    runs
+      .filter(isOpen)
+      .flat()
+      .map(stage => stage.id),
+  );
+  // synced while rendering, so a stale open run is never painted; a manager
+  // can leave a run and another join it in one render, so compare members
+  if (openNow.size !== opened.size || [...openNow].some(id => !opened.has(id)))
+    setOpened(openNow);
+  return (
+    <div
+      className={clsx(styles.pipeline, className)}
+      role="group"
+      aria-label={label}
+    >
+      {runs.flatMap(run => {
+        const key = run[0].id;
+        if (run.length === 1) return [<Step key={key}>{run[0].node}</Step>];
+        const ids = run.map(stage => stage.id);
+        const names = ids.join(', ');
+        const open = isOpen(run);
+        const text = open ? 'fold' : run.length + ' ' + run[0].foldAs;
+        // its own keyed slot, open or folded, so the button pressed stays
+        // (and keeps focus) as its run opens, folds or changes at its end,
+        // and the stages around it never move to another parent
+        const fold = (
+          <Step key={'fold:' + key}>
+            <button
+              type="button"
+              className={clsx(styles.stage, styles.stageFold)}
+              title={names}
+              aria-label={text + ': ' + names}
+              aria-expanded={open}
+              onClick={() =>
+                setOpened(
+                  new Set(
+                    open ?
+                      [...openNow].filter(id => !ids.includes(id))
+                    : [...openNow, ...ids],
+                  ),
+                )
+              }
+            >
+              {text}
+            </button>
+          </Step>
+        );
+        if (!open) return [fold];
+        return [
+          ...run.map((stage, i) => (
+            <Step key={stage.id} arrow={i < run.length - 1}>
+              {stage.node}
+            </Step>
+          )),
+          fold,
+        ];
+      })}
+      <Step arrow={false}>
+        <span
+          className={clsx(
+            styles.stage,
+            styles.stageEnd,
+            !stored && styles.stageOff,
+          )}
+        >
+          store
+        </span>
+        {children}
+      </Step>
+    </div>
+  );
+}
+
+/** A stage and the arrow after it (none after the store, or after an open
+ * run's last stage, whose fold button follows it), which wraps with it, so
+ * a line never starts with one */
+function Step({
+  arrow = true,
+  children,
+}: {
+  arrow?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <span className={styles.stageStep}>
+      {children}
+      {arrow && (
+        <span className={styles.stageArrow} aria-hidden>
+          →
+        </span>
+      )}
+    </span>
+  );
+}
+
+/** `stages`, each run of alike folding ones as one */
+function foldRuns(stages: readonly Shown[]): Shown[][] {
+  const runs: Shown[][] = [];
+  for (const stage of stages) {
+    const last = runs.at(-1);
+    if (stage.foldAs && last?.[0].foldAs === stage.foldAs) last.push(stage);
+    else runs.push([stage]);
+  }
+  return runs;
+}
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 9d16ae28732a..8fcecaaf01f2 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -14,12 +14,13 @@ import React, {
 import { ActionDetail, SubjectChanges } from './ActionDetail';
 import {
   groupEntries,
-  groupEntriesOf,
-  groupOf,
   keepUnchanged,
   momentEntries,
-  requestEntries,
-  requestOf,
+  pickAt,
+  requestsOf,
+  rowsOf,
+  shownGroup,
+  shownOf,
   subjectFilter,
   subjectGaps,
   touches,
@@ -33,13 +34,14 @@ import {
   findEntry,
   isRecordChange,
   keepSameMap,
-  stepMoment,
+  keepSameSet,
+  stepAt,
   storeAt,
   withDropped,
   type LogEntry,
 } from './actionLog';
 import type ActionLog from './actionLog';
-import { ActionName, KeyLabel, Time } from './actionParts';
+import { MomentName, Time } from './actionParts';
 import {
   ActionsContext,
   AtMoment,
@@ -71,7 +73,10 @@ import {
   type Moment,
   type Nav,
   type NavState,
+  type Scope,
+  keepSameStep,
   type StackEntry,
+  type Step,
   type Then,
   useNavState,
   type LevelView,
@@ -90,6 +95,8 @@ import Unfold from '../../Unfold';
 
 /** Breadcrumbs shown before the middle ones collapse to `…` */
 const CRUMBS = 4;
+/** What an action alone opens under, first that shows as a group */
+const UNDER = ['request', 'group'] as const satisfies readonly Scope[];
 
 export default function StorePanel({
   registry,
@@ -107,7 +114,8 @@ export default function StorePanel({
   const [view, setView] = useStoreView();
   const tree = view === 'tree';
   // the subject at the moment (`state`), or the moment's action; and the
-  // state as a whole, or (`diffMode`) only what the moment's action changed.
+  // state as a whole, or (`diffMode`) only what the moment changed (its
+  // request's actions up to it, see `Scope`).
   // Each Playground's own, unlike the table or tree view
   const [tab, setTab] = useState<Tab>('state');
   const [diffMode, setDiffMode] = useState(false);
@@ -137,17 +145,17 @@ export default function StorePanel({
   const levels = useLevelStack(ROOT);
   // the Action tab opens at the moment's action, over the list Back goes to
   const actionLevels = useLevelStack(ACTIONS, NEWEST);
-  // the moment: right after one action, until "Live"; a new store (a
-  // reset) starts live, with no action of the old one left showing
-  const [momentSeq, setMomentSeq] = useState<number | null>(null);
-  // the moment stands for its action's whole group (a request: its
-  // optimistic update and response as one), picked by its row
-  const [whole, setWhole] = useState(false);
+  // the moment: right after one action, until "Live" (`null`); a new store
+  // (a reset) starts live, with no action of the old one left showing. It
+  // stands for its request up to it, unless its row (the group) or its step
+  // (the action alone) was picked; live stands for the newest request
+  const [pinned, setPinned] = useState<Step | null>(null);
+  const momentSeq = pinned?.seq ?? null;
+  const scope = pinned?.scope ?? 'request';
   const [shownId, setShownId] = useState(id);
   if (shownId !== id) {
     setShownId(id);
-    setMomentSeq(null);
-    setWhole(false);
+    setPinned(null);
     actionLevels.followMoment(null);
     // levels a chip opened at the old store's actions show the new one
     levels.clearAt();
@@ -219,12 +227,21 @@ export default function StorePanel({
   // stored nothing new still shows its optimistic update. Garbage
   // collection is the store's housekeeping, not something the code did
   const span = useMemo(() => {
-    if (moment) return momentEntries(groups, moment, whole);
+    if (moment) return momentEntries(groups, moment, scope);
     const newest = known.findLast(
       e => e.store && e.action.type !== actionTypes.GC,
     );
-    return newest && requestEntries(groups, newest);
-  }, [groups, moment, whole, known]);
+    return newest && momentEntries(groups, newest, 'request');
+  }, [groups, moment, scope, known]);
+  const lastCurrent = useRef<ReadonlySet<number>>(new Set());
+  const current = useMemo(
+    () =>
+      (lastCurrent.current = keepSameSet(
+        lastCurrent.current,
+        new Set(moment && span ? span.map(e => e.seq) : []),
+      )),
+    [moment, span],
+  );
   const first = span?.find(e => e.store);
   const last = span?.findLast(e => e.store);
   const prior = first && then({ seq: first.seq, before: true });
@@ -265,19 +282,46 @@ export default function StorePanel({
   // a moment set on purpose outranks the store a chip opened a level at;
   // the action view follows it
   const { clearAt: clearStateAt } = levels;
-  const { clearAt: clearActionsAt, followMoment, showAction } = actionLevels;
+  const {
+    clearAt: clearActionsAt,
+    followMoment,
+    showAction: showLevel,
+  } = actionLevels;
+  // an action alone opens a level deeper than its request or row, when
+  // that has more actions, so Back comes up to it. The groups come through
+  // a ref, so `show` keeps its identity and the memoized rows skip rendering
+  const groupsRef = useRef(groups);
+  groupsRef.current = groups;
+  // what the view under an action alone stands for: its request, or else
+  // the row holding it, when either has more actions
+  const under = useCallback(
+    (seq: number | null, to: Scope): Scope | undefined => {
+      if (to !== 'action' || seq === null) return;
+      return UNDER.find(scope => shownGroup(groupsRef.current, seq, scope));
+    },
+    [],
+  );
+  const showAction = useCallback(
+    (seq: number | null, to: Scope = 'request', quiet = false) =>
+      showLevel(seq, to, under(seq, to), quiet),
+    [under, showLevel],
+  );
   const clearAt = useCallback(() => {
     clearStateAt();
     clearActionsAt();
   }, [clearStateAt, clearActionsAt]);
+  // a level deeper than a request, the moment stays an action alone as it
+  // moves, unless told otherwise; live comes back up to its request
+  const deep = scope === 'action';
   const set = useCallback(
-    (seq: number | null, whole = false) => {
-      setMomentSeq(seq);
-      setWhole(seq !== null && whole);
+    (seq: number | null, to?: Scope) => {
+      const next =
+        seq === null ? 'request' : (to ?? (deep ? 'action' : 'request'));
+      setPinned(seq === null ? null : { seq, scope: next });
       clearAt();
-      followMoment(seq, whole);
+      followMoment(seq, next, under(seq, next));
     },
-    [clearAt, followMoment],
+    [clearAt, followMoment, under, deep],
   );
 
   const panel = useRef<HTMLDivElement>(null);
@@ -327,12 +371,11 @@ export default function StorePanel({
   // showing an action opens it in the Action tab, as the moment, over the
   // subject's actions (closing the peek and, narrow, the sheet)
   const show = useCallback(
-    (seq: number, whole = false) => {
-      setMomentSeq(seq);
-      setWhole(whole);
+    (seq: number, to: Scope = 'request') => {
+      setPinned({ seq, scope: to });
       clearAt();
       setTab('action');
-      showAction(seq, whole);
+      showAction(seq, to);
       closePane();
       if (covered) focusLevel.current = true;
       if (narrow) collapse();
@@ -343,12 +386,26 @@ export default function StorePanel({
   // opens the one picked there, as the list's own rows do (in place, so
   // stepping on keeps focus on the timeline); narrow, it closes the sheet
   const actionShown = actionLevels.stack.some(e => e.view.kind === 'action');
+  // what every step (‹ ›, ← →, Before and After) and a mark picked go
+  // through: the subject's rows, the surface stepping by their requests
+  const { hit } = filter;
+  const listing = useMemo(() => {
+    const rows = rowsOf(groups, hit);
+    return {
+      entries: shownOf(groups, known).shown,
+      groups,
+      listed: new Set(rows),
+      requests: requestsOf(rows, hit),
+      hit,
+    };
+  }, [known, groups, hit]);
   const mark = useCallback(
     (seq: number) => {
-      set(seq);
-      if (tab === 'action' && !actionShown) showAction(seq, false, true);
+      const to = pickAt(listing.requests, seq, scope);
+      set(to.seq, to.scope);
+      if (tab === 'action' && !actionShown) showAction(to.seq, to.scope, true);
     },
-    [set, tab, actionShown, showAction],
+    [listing, scope, set, tab, actionShown, showAction],
   );
   const markInSheet = useCallback(
     (seq: number) => {
@@ -357,18 +414,52 @@ export default function StorePanel({
     },
     [mark, collapse],
   );
-  // the timeline steps over the subject's actions
-  const [earlier, later] = useMemo(
-    () =>
-      [
-        stepMoment(known, momentSeq, -1, filter.hit),
-        stepMoment(known, momentSeq, 1, filter.hit),
-      ] as const,
-    [known, momentSeq, filter.hit],
+  // the moment's neighbours at its depth, kept while they stay put, so the
+  // nav state holds still as actions arrive
+  const lastSteps = useRef<readonly (Step | null | undefined)[]>([]);
+  const [earlier, later] = useMemo(() => {
+    const live = momentSeq === null;
+    const at = live ? newestOf(known, hit) : (moment ?? undefined);
+    return (lastSteps.current = ([-1, 1] as const).map((by, i) =>
+      keepSameStep(lastSteps.current[i], stepAt(listing, at, live, scope, by)),
+    ));
+  }, [listing, known, hit, momentSeq, moment, scope]);
+  const step = useCallback(
+    (by: -1 | 1) => {
+      const to = by < 0 ? earlier : later;
+      if (to === undefined) return false;
+      set(to && to.seq, to?.scope);
+      return true;
+    },
+    [earlier, later, set],
+  );
+  // back on an action view (coming up from an action alone), the moment is
+  // that view's
+  const { stack: actionStack, back: backActions } = actionLevels;
+  const actionsShown = useMemo<LevelStack>(
+    () => ({
+      ...actionLevels,
+      back: depth => {
+        const up = actionStack[depth - 1]?.view;
+        if (up?.kind === 'action')
+          setPinned(up.seq === null ? null : { seq: up.seq, scope: up.scope });
+        backActions(depth);
+      },
+    }),
+    [actionLevels, actionStack, backActions],
   );
   const navState = useMemo<NavState>(
-    () => ({ seq: momentSeq, whole, earlier, later, set, show }),
-    [momentSeq, whole, earlier, later, set, show],
+    () => ({
+      seq: momentSeq,
+      scope,
+      current,
+      earlier,
+      later,
+      set,
+      step,
+      show,
+    }),
+    [momentSeq, scope, current, earlier, later, set, step, show],
   );
   // what the peek's chips open: over the State tab's top level, in the
   // table view, with the peek closed to show it
@@ -395,7 +486,7 @@ export default function StorePanel({
   // the tab shows the moment's action: picked again over the list, it goes
   // back to that
   const openActionTab = () => {
-    if (listed) showAction(momentSeq, whole);
+    if (listed) showAction(momentSeq, scope);
     setTab('action');
   };
   // the chips only push, so the model comes through a ref: the value keeps
@@ -476,11 +567,7 @@ export default function StorePanel({
                 !e.metaKey &&
                 !usesArrows(e.target as Element)
               ) {
-                const to = e.key === 'ArrowLeft' ? earlier : later;
-                if (to !== undefined) {
-                  e.preventDefault();
-                  set(to);
-                }
+                if (step(e.key === 'ArrowLeft' ? -1 : 1)) e.preventDefault();
                 return;
               }
               // the sheet shuts from anywhere in the panel, the ▾ included;
@@ -556,7 +643,7 @@ export default function StorePanel({
                         <button
                           type="button"
                           aria-label="Diff"
-                          title="Diff: only what the moment's action changed"
+                          title="Diff: only what the moment changed"
                           aria-pressed={diffMode}
                           onClick={() => setDiffMode(true)}
                         >
@@ -599,7 +686,7 @@ export default function StorePanel({
                       <Levels
                         model={model}
                         width={width}
-                        levels={actionLevels}
+                        levels={actionsShown}
                         subject={subject}
                         hidden={tab !== 'action'}
                       />
@@ -803,9 +890,12 @@ function Levels({
       {stack.map((entry, depth) => {
         const { key, view, at } = entry;
         const level = levelOf(entry);
-        // the store's root has no crumbs; the actions' does, for their subject
+        // a stack's first level has no crumbs, as its tab names it; the
+        // actions' has, to name a subject other than the store
         const header = (tools: React.ReactNode) =>
-          depth > 0 || view.kind === 'actions' ? crumbs(depth, tools) : null;
+          depth > 0 || (view.kind === 'actions' && subjectAt(depth) !== ROOT) ?
+            crumbs(depth, tools)
+          : null;
         // one a chip opened at an action shows that store, not the moment's
         const levelDiff = !at ? diff : undefined;
         return (
@@ -829,7 +919,7 @@ function Levels({
               : view.kind === 'action' ?
                 <ActionLevel
                   seq={view.seq}
-                  whole={view.whole}
+                  scope={view.scope}
                   subject={subjectAt(depth)}
                   header={header}
                 />
@@ -1011,31 +1101,29 @@ function DiffLevel({
   );
 }
 
-/** An action at full width (`null`: the newest, while live): what it did
- * to `subject` (the level under it), then the action itself; between the
- * subject's actions before and after it, to step to */
+/** An action at full width (`null`: the newest, while live). On the
+ * surface, its row: a request's steps up to it (marking it, unless the row
+ * was picked) and what they did to `subject` (the level under it); a step
+ * picked opens alone a level deeper (`scope` `action`). Between the rows
+ * before and after it on the surface, or the actions a level deeper, to step
+ * to without changing depth */
 function ActionLevel({
   seq,
-  whole,
+  scope,
   subject,
   header,
 }: {
   seq: number | null;
-  /** Its group's actions up to it, as one */
-  whole?: boolean;
+  scope: Scope;
   subject: View;
   header: Header;
 }) {
-  const { entries } = useActions().history;
-  const { entry, group, span, filter } = useShownAction(seq, whole, subject);
-  // a group steps from its first action and to after the moment's
-  const from = span ? span[0].seq : entry?.seq;
-  // the step before leads, so the crumbs under it head the action shown
+  const { entry, group, span, filter } = useShownAction(seq, scope, subject);
+  // the steps flank it, before on the left and after on the right as the
+  // timeline runs, in columns that take none of the height; only the action
+  // between them scrolls
   return (
     <>
-      {entry && (
-        <ActionStep dir={-1} to={stepMoment(entries, from!, -1, filter.hit)} />
-      )}
       {header(
         seq === null && entry && <span className={styles.dim}>newest</span>,
       )}
@@ -1045,62 +1133,46 @@ function ActionLevel({
             'Nothing dispatched yet. The newest action shows here as the preview runs.'
           : 'No longer in the log.'}
         </p>
-      : <>
-          {group && span ?
-            <div className={styles.actBody}>
-              <SubjectChanges entries={span} subject={subject} />
-              <GroupActions group={group} subject={subject} filter={filter} />
-            </div>
-          : <ActionDetail
-              entry={entry}
-              subject={subject}
-              gap={filter.gaps.get(entry.seq)}
-            />
-          }
-          <ActionStep
-            dir={1}
-            to={
-              seq === null ? undefined : (
-                stepMoment(entries, entry.seq, 1, filter.hit)
-              )
+      : <div className={styles.actFrame}>
+          <ActionStep dir={-1} />
+          <div className={styles.actScroll}>
+            {group && span ?
+              <div className={styles.actBody}>
+                <h3 className={styles.sectionLabel}>Steps</h3>
+                <GroupActions group={group} subject={subject} filter={filter} />
+                <h3 className={styles.sectionLabel}>Store changes</h3>
+                <SubjectChanges entries={span} subject={subject} />
+              </div>
+            : <ActionDetail
+                entry={entry}
+                subject={subject}
+                gap={filter.gaps.get(entry.seq)}
+              />
             }
-          />
-        </>
+          </div>
+          <ActionStep dir={1} />
+        </div>
       }
     </>
   );
 }
 
 /** What an action view of `subject` shows: action `seq` (`null`, the newest
- * of the subject's), and as one its group when `whole`, or live its request
- * when that has more (its optimistic update shows too; a poll, only its own
- * request) */
-function useShownAction(
-  seq: number | null,
-  whole: boolean | undefined,
-  subject: View,
-) {
+ * of the subject's), and as one (see `Scope`) its request up to it when that
+ * has more (its optimistic update shows too; a poll, only its own request),
+ * or its group's actions up to it */
+function useShownAction(seq: number | null, scope: Scope, subject: View) {
   const { log, history, groups } = useActions();
   const { entries } = history;
   const filter = useSubjectFilter(log, entries, subject);
   return useMemo(() => {
     const entry =
       seq === null ? newestOf(entries, filter.hit) : findEntry(entries, seq);
-    let group: ActionGroup | undefined;
+    const group = entry && shownGroup(groups, entry.seq, scope);
     // its actions up to it, as one
-    let span: readonly LogEntry[] | undefined;
-    if (entry && seq === null) {
-      const request = requestOf(groups, entry.seq);
-      if (request && groupEntriesOf(request).length > 1) {
-        group = request;
-        span = requestEntries(groups, entry);
-      }
-    } else if (entry && whole) {
-      group = groupOf(groups, entry.seq);
-      span = momentEntries(groups, entry, true);
-    }
+    const span = group && momentEntries(groups, entry, scope);
     return { entry, group, span, filter };
-  }, [entries, groups, filter, seq, whole]);
+  }, [entries, groups, filter, seq, scope]);
 }
 
 /** The newest of the subject's actions: what the Action tab shows live, as
@@ -1117,51 +1189,40 @@ function newestOf(
   );
 }
 
-/** One line for the action before (`-1`) or after (`1`) the one shown,
- * which a click makes the moment, so the level shows it instead: `to` (see
- * `stepMoment`) is its seq, `null` live, `undefined` none */
-function ActionStep({
-  dir,
-  to,
-}: {
-  dir: -1 | 1;
-  to: number | null | undefined;
-}) {
+/** One line for the moment before (`-1`) or after (`1`) the one shown, at
+ * its depth (see `NavState`), which a click makes the moment, so the level
+ * shows it instead */
+function ActionStep({ dir }: { dir: -1 | 1 }) {
   const { history } = useActions();
-  const { set } = useNavState();
+  const { earlier, later, step } = useNavState();
+  const to = dir < 0 ? earlier : later;
   const label = dir < 0 ? 'Before' : 'After';
-  const entry = to == null ? undefined : findEntry(history.entries, to);
+  const entry = to ? findEntry(history.entries, to.seq) : undefined;
   return (
     <button
       type="button"
-      className={clsx(styles.actStep, dir > 0 && styles.actStepAfter)}
+      className={styles.actStep}
       disabled={to === undefined}
-      title={
-        to === undefined ? undefined
-        : to === null ?
-          'Back to live'
-        : 'Step to this action'
-      }
-      onClick={() => to !== undefined && set(to)}
+      onClick={() => step(dir)}
     >
-      <span className={styles.actStepDir}>
-        {to !== undefined && (dir < 0 ? '↑ ' : '↓ ')}
-        {label}
+      <span className={styles.actStepDir} aria-hidden>
+        {dir < 0 ? '‹' : '›'}
       </span>
-      {to === undefined ?
-        <span className={styles.dim}>
-          {dir < 0 ? 'nothing the log kept' : 'nothing yet: this is live'}
-        </span>
-      : entry ?
-        <>
-          <span className={styles.actStepName}>
-            <ActionName entry={entry} />
-          </span>
+      <span className={styles.actStepName}>
+        <span className={styles.srOnly}>{label}: </span>
+        {to === undefined ?
           <span className={styles.dim}>
-            <Time at={entry.at} />
+            {dir < 0 ? 'nothing the log kept' : 'nothing yet: this is live'}
           </span>
-        </>
-      : <span className={styles.liveText}>Live</span>}
+        : to && entry ?
+          <>
+            <MomentName entry={entry} scope={to.scope} />{' '}
+            <span className={styles.dim}>
+              <Time at={entry.at} />
+            </span>
+          </>
+        : <span className={styles.liveText}>Live</span>}
+      </span>
     </button>
   );
 }
@@ -1249,7 +1310,7 @@ function crumbLabel(
       return 'Store';
     case 'action':
       return (
-        <ActionCrumb seq={view.seq} whole={view.whole} subject={subject} />
+        <ActionCrumb seq={view.seq} scope={view.scope} subject={subject} />
       );
     case 'list': {
       const count =
@@ -1279,17 +1340,16 @@ function crumbLabel(
  * the newest of `subject`'s */
 function ActionCrumb({
   seq,
-  whole,
+  scope,
   subject,
 }: {
   seq: number | null;
-  whole?: boolean;
+  scope: Scope;
   subject: View;
 }) {
-  const { entry, group } = useShownAction(seq, whole, subject);
+  const { entry } = useShownAction(seq, scope, subject);
   return (
-    group ? <KeyLabel value={group.key} />
-    : entry ? <ActionName entry={entry} />
+    entry ? <MomentName entry={entry} scope={scope} />
     : seq === null ? <>Newest</>
     : <>…</>
   );
diff --git a/website/src/components/Playground/preview/store/Timeline.tsx b/website/src/components/Playground/preview/store/Timeline.tsx
index 4f2254b5bbd5..1cdeb36eb9cf 100644
--- a/website/src/components/Playground/preview/store/Timeline.tsx
+++ b/website/src/components/Playground/preview/store/Timeline.tsx
@@ -11,15 +11,14 @@ import React, {
 import {
   actionName,
   groupEntriesOf,
-  groupOf,
-  joinedFetches,
+  shownOf,
   type ActionGroup,
   type RequestGroup,
   type SubjectFilter,
 } from './actionGroups';
 import type ActionLog from './actionLog';
 import type { History, LogEntry } from './actionLog';
-import { ActionName } from './actionParts';
+import { MomentName } from './actionParts';
 import {
   CATCH_UP_MS,
   droppedIn,
@@ -35,7 +34,7 @@ import {
   type Actions,
 } from './actionParts';
 import { NARROW_WIDTH } from './columns';
-import { useHoldFocus, useWidth } from './dom';
+import { byData, useHoldFocus, useWidth } from './dom';
 import { actionId } from './model';
 import { useNavState } from './nav';
 import type { OnPreview } from './Preview';
@@ -110,13 +109,6 @@ export function lanesOf(groups: readonly ActionGroup[]): Lane[] {
   return [...lanes].map(([key, groups]) => ({ key, groups }));
 }
 
-/** The shown history: without the fetches deduped into a request in
- * flight (they add nothing to see), which `joined` holds */
-function shownOf(groups: readonly ActionGroup[], entries: readonly LogEntry[]) {
-  const joined = new Set(groups.flatMap(g => [...joinedFetches(g).keys()]));
-  return { joined, shown: entries.filter(e => !joined.has(e)) };
-}
-
 /** The shown history on `timeScale` */
 function useScale(actions: Actions) {
   // from the history alone: stepping through moments leaves the marks be
@@ -138,14 +130,14 @@ function useDrawer(
   onSelect: (seq: number) => void,
 ) {
   const { log, history } = actions;
-  const { seq: selected } = useNavState();
+  const { seq: selected, current } = useNavState();
   const { joined, shown, scale } = useScale(actions);
   const draw = drawer({
     log,
     scale,
     joined,
     since: history.since,
-    selected,
+    current,
     hit,
     onSelect,
   });
@@ -165,13 +157,15 @@ function useDrawer(
 
 /** Draws groups along `scale`: requests as spans from fetch to response,
  * everything else as marks, placed as fractions of the track (`--tl-f`).
- * Picking an action the store saw makes it the moment. The marks `hit` says left the subject alone are dimmed */
+ * Picking an action makes it the moment; the moment's actions (`current`)
+ * are marked. Those the store never saw are hollow, and those `hit` says
+ * left the subject alone are dimmed */
 function drawer({
   log,
   scale,
   joined,
   since,
-  selected,
+  current,
   hit,
   onSelect,
 }: {
@@ -179,7 +173,7 @@ function drawer({
   scale: TimeScale;
   joined: ReadonlySet<LogEntry>;
   since: number;
-  selected: number | null;
+  current: ReadonlySet<number>;
   hit: SubjectFilter['hit'];
   onSelect: (seq: number) => void;
 }) {
@@ -192,29 +186,25 @@ function drawer({
   const mark = (entry: LogEntry, extra?: string) => {
     const label = labelOf(entry);
     const style = pos(scale.x.get(entry.seq)!);
-    const type = typeClass(entry);
-    // only an action the store saw has a state to show
-    return entry.store ?
-        <button
-          key={entry.seq}
-          type="button"
-          tabIndex={-1}
-          className={clsx(styles.tlMark, type, extra)}
-          style={style}
-          aria-label={label}
-          data-id={actionId(entry.seq)}
-          data-selected={entry.seq === selected || undefined}
-          data-dim={!hit(entry) || undefined}
-          onClick={() => onSelect(entry.seq)}
-        />
-      : <span
-          key={entry.seq}
-          className={clsx(styles.tlMark, styles.tlHollow, type, extra)}
-          style={style}
-          role="img"
-          aria-label={label}
-          data-id={actionId(entry.seq)}
-        />;
+    return (
+      <button
+        key={entry.seq}
+        type="button"
+        tabIndex={-1}
+        className={clsx(
+          styles.tlMark,
+          !entry.store && styles.tlHollow,
+          typeClass(entry),
+          extra,
+        )}
+        style={style}
+        aria-label={label}
+        data-id={actionId(entry.seq)}
+        data-selected={current.has(entry.seq) || undefined}
+        data-dim={!hit(entry) || undefined}
+        onClick={() => onSelect(entry.seq)}
+      />
+    );
   };
   const span = (from: number, to: number, className: string, key: string) => (
     <span
@@ -551,9 +541,13 @@ function useTrackFollow(
   );
   useLayoutEffect(() => {
     if (selected === null) return;
-    scroller.current
-      ?.querySelector('[data-selected]')
-      ?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    // the moment's own mark, of the several it may stand for
+    const el = scroller.current;
+    if (el)
+      byData(el, 'id', actionId(selected))?.scrollIntoView?.({
+        block: 'nearest',
+        inline: 'nearest',
+      });
   }, [scroller, selected, refocus]);
   return () => (selected === null ? followNewest() : set(null));
 }
@@ -603,9 +597,14 @@ export const Scrubber = memo(function Scrubber({
   // the pointer on the track: what it shows holds still
   const { actions, setOn, behind, catchingUp } = useHeld(track);
   const { groups } = actions;
-  const { whole, earlier, later, set: onSelect, show } = useNavState();
-  // a row picked stands for its whole group: the label names that
-  const group = whole && entry ? groupOf(groups, entry.seq) : undefined;
+  const {
+    scope,
+    earlier,
+    later,
+    set: onSelect,
+    step: onStep,
+    show,
+  } = useNavState();
   const { shown, scale, drawn, decor } = useDrawer(actions, hit, onMark);
   const end = useTrackFollow(track, scale, catchingUp);
 
@@ -614,9 +613,13 @@ export const Scrubber = memo(function Scrubber({
   const bar = useRef<HTMLDivElement>(null);
   const hold = useHoldFocus(bar);
   useTrackPreview(track, bar, [shown], scale, onPreview, setOn);
-  const step = (to: number | null) => {
+  const step = (by: -1 | 1) => {
+    hold();
+    onStep(by);
+  };
+  const live = () => {
     hold();
-    onSelect(to);
+    onSelect(null);
   };
   const onKeyDown = (e: React.KeyboardEvent) => {
     // ← → step as they do across the panel, which takes them on from here
@@ -644,7 +647,7 @@ export const Scrubber = memo(function Scrubber({
           data-step
           aria-label="Previous change"
           disabled={earlier === undefined}
-          onClick={() => earlier !== undefined && step(earlier)}
+          onClick={() => step(-1)}
         >
           ‹
         </button>
@@ -653,7 +656,7 @@ export const Scrubber = memo(function Scrubber({
           data-step
           aria-label="Next change"
           disabled={later === undefined}
-          onClick={() => later !== undefined && step(later)}
+          onClick={() => step(1)}
         >
           ›
         </button>
@@ -671,11 +674,7 @@ export const Scrubber = memo(function Scrubber({
           )}
         </div>
         {entry ?
-          <button
-            type="button"
-            className={styles.liveButton}
-            onClick={() => step(null)}
-          >
+          <button type="button" className={styles.liveButton} onClick={live}>
             Live
           </button>
         : <span
@@ -718,11 +717,9 @@ export const Scrubber = memo(function Scrubber({
             type="button"
             className={styles.momentAction}
             title="Show action"
-            onClick={() => show(entry.seq, !!group)}
+            onClick={() => show(entry.seq, scope)}
           >
-            {group ?
-              <KeyLabel value={group.key} />
-            : <ActionName entry={entry} />}
+            <MomentName entry={entry} scope={scope} />
           </button>
           <span className={styles.dim}>
             {' · '}
diff --git a/website/src/components/Playground/preview/store/actionGroups.ts b/website/src/components/Playground/preview/store/actionGroups.ts
index 2514baedd55a..c2ef8383c69b 100644
--- a/website/src/components/Playground/preview/store/actionGroups.ts
+++ b/website/src/components/Playground/preview/store/actionGroups.ts
@@ -7,8 +7,9 @@ import {
 
 import type ActionLog from './actionLog';
 import type { LogEntry } from './actionLog';
+import { byStage, isLibraryManager } from './attribution';
 import { endpointId, entityId, parseRowId } from './model';
-import type { View } from './nav';
+import type { Scope, Step, View } from './nav';
 import { isPlainObject, temporalType } from './refs';
 
 /** Each has a color, `--store-kind-<kind>` in store.module.css */
@@ -456,6 +457,64 @@ const sameList = <T>(a: readonly T[], b: readonly T[]) =>
 const sameArgs = (fetch: ActionTypes, response: ActionTypes) =>
   'args' in fetch && 'args' in response && equal(fetch.args, response.args);
 
+/** The rows listed for a subject: the groups with an action `hit` says
+ * touched it */
+export const rowsOf = (
+  groups: readonly ActionGroup[],
+  hit: SubjectFilter['hit'],
+) => groups.filter(g => groupEntriesOf(g).some(hit));
+
+/** A row of one action: it has no steps */
+export const isLone = (group: ActionGroup) =>
+  groupEntriesOf(group).length === 1;
+
+/** The moment a row stands for: its last action that touched the subject (a
+ * request's response), or its last; all its actions as one, unless it has
+ * only that one */
+export function rowMoment(group: ActionGroup, hit: SubjectFilter['hit']): Step {
+  const all = groupEntriesOf(group);
+  const seq = (all.findLast(hit) ?? all[all.length - 1]).seq;
+  return { seq, scope: isLone(group) ? 'request' : 'group' };
+}
+
+/** The requests of `rows`, the surface's places: each request (a
+ * subscription's polls each their own, not the whole subscription) and each
+ * action of none that `hit` says touched the subject, at its moment (its
+ * last such action), in the order those came. `of` finds the one holding
+ * an action, by its seq */
+export interface Requests {
+  readonly moments: readonly Step[];
+  readonly of: ReadonlyMap<number, number>;
+}
+export function requestsOf(
+  rows: readonly ActionGroup[],
+  hit: SubjectFilter['hit'],
+): Requests {
+  const parts = rows.flatMap(row =>
+    row.kind === 'subscription' ?
+      [...row.entries.map(e => [e]), ...row.requests.map(r => r.entries)]
+    : [groupEntriesOf(row)],
+  );
+  const found = parts
+    .map(entries => ({ entries, last: entries.findLast(hit) }))
+    .filter(part => part.last)
+    .sort((a, b) => a.last!.seq - b.last!.seq);
+  return {
+    moments: found.map(({ last }) => ({ seq: last!.seq, scope: 'request' })),
+    of: new Map(
+      found.flatMap(({ entries }, i) => entries.map(e => [e.seq, i] as const)),
+    ),
+  };
+}
+
+/** Where picking action `seq` lands at a moment's depth (`scope`): a level
+ * deeper, the action alone; on the surface, its request, as ← → step */
+export function pickAt(requests: Requests, seq: number, scope: Scope): Step {
+  const i = scope === 'action' ? undefined : requests.of.get(seq);
+  if (i !== undefined) return requests.moments[i];
+  return { seq, scope: scope === 'action' ? scope : 'request' };
+}
+
 /** Every action of a group, in dispatch order */
 export function groupEntriesOf(group: ActionGroup): readonly LogEntry[] {
   if (group.kind !== 'subscription') return group.entries;
@@ -464,22 +523,37 @@ export function groupEntriesOf(group: ActionGroup): readonly LogEntry[] {
   );
 }
 
-/** The actions a moment stands for: `entry` alone, or (`whole`) every
- * action of its group up to it, so their effect shows as one */
+/** The group a moment at `seq` spans (see `Scope`): its request, its row,
+ * or none for the action alone */
+export function unitOf(
+  groups: readonly ActionGroup[],
+  seq: number,
+  scope: Scope,
+): ActionGroup | undefined {
+  switch (scope) {
+    case 'request':
+      return requestOf(groups, seq);
+    case 'group':
+      return groupOf(groups, seq);
+    case 'action':
+      return undefined;
+  }
+}
+
+/** The actions a moment at `entry` stands for, up to it, so their effect
+ * shows as one */
 export function momentEntries(
   groups: readonly ActionGroup[],
   entry: LogEntry,
-  whole: boolean,
+  scope: Scope,
 ): readonly LogEntry[] {
-  const group = whole ? groupOf(groups, entry.seq) : undefined;
-  return group ?
-      groupEntriesOf(group).filter(e => e.seq <= entry.seq)
-    : [entry];
+  const unit = unitOf(groups, entry.seq, scope);
+  return unit ? groupEntriesOf(unit).filter(e => e.seq <= entry.seq) : [entry];
 }
 
 /** The group action `seq` belongs to, narrowed to its request when a
  * subscription polled it */
-export function requestOf(
+function requestOf(
   groups: readonly ActionGroup[],
   seq: number,
 ): ActionGroup | undefined {
@@ -489,14 +563,15 @@ export function requestOf(
     : group;
 }
 
-/** The request `entry` belongs to, up to it: its optimistic update and
- * response together, even when a subscription polled it */
-export function requestEntries(
+/** The group a moment at `seq` shows as one, and is named for: the one it
+ * spans, when that has several actions */
+export function shownGroup(
   groups: readonly ActionGroup[],
-  entry: LogEntry,
-): readonly LogEntry[] {
-  const request = requestOf(groups, entry.seq);
-  return request ? request.entries.filter(e => e.seq <= entry.seq) : [entry];
+  seq: number,
+  scope: Scope,
+): ActionGroup | undefined {
+  const unit = unitOf(groups, seq, scope);
+  return unit && !isLone(unit) ? unit : undefined;
 }
 
 /** By seq, for each list of groups: the one holding that action */
@@ -534,6 +609,17 @@ export function joinedFetches(group: ActionGroup) {
   return joined;
 }
 
+/** The shown history: without the fetches deduped into a request in
+ * flight (they add nothing to see, so neither the timeline nor the steps
+ * stop at them), which `joined` holds */
+export function shownOf(
+  groups: readonly ActionGroup[],
+  entries: readonly LogEntry[],
+) {
+  const joined = new Set(groups.flatMap(g => [...joinedFetches(g).keys()]));
+  return { joined, shown: entries.filter(e => !joined.has(e)) };
+}
+
 /** What an action is about: an endpoint key, or a schema's key for `set` */
 export function actionKey(action: ActionTypes): string {
   if ('key' in action && typeof action.key === 'string') return action.key;
@@ -735,6 +821,25 @@ export function subjectFilter(
 }
 const NO_GAPS: ReadonlyMap<number, ChangeKind> = new Map();
 
+/** The store's filter (`base`) with its managers (`chain`) drawn as a
+ * pipeline: what the `picked` stage took part in (see `byStage`), or, none
+ * picked, also what the code's own managers kept from the store */
+export function stageFilter(
+  base: SubjectFilter,
+  chain: readonly string[],
+  picked: string | null,
+): SubjectFilter {
+  if (picked !== null) {
+    const hit = byStage(picked);
+    return { ...base, hit, lists: hit };
+  }
+  const own = new Set(chain.filter(name => !isLibraryManager(name)));
+  return {
+    ...base,
+    hit: e => base.hit(e) || (!!e.consumedBy && own.has(e.consumedBy)),
+  };
+}
+
 /** Row `id` as diffs name it, to compare it between two stores */
 function rowOf(id: string): Change | undefined {
   const row = parseRowId(id);
diff --git a/website/src/components/Playground/preview/store/actionLog.ts b/website/src/components/Playground/preview/store/actionLog.ts
index 1b447c889c17..a8a8b149f9b1 100644
--- a/website/src/components/Playground/preview/store/actionLog.ts
+++ b/website/src/components/Playground/preview/store/actionLog.ts
@@ -11,12 +11,22 @@ import {
   diffStates,
   groupEntries,
   groupEntriesOf,
+  groupOf,
+  type ActionGroup,
+  type Requests,
   pollFrequencyOf,
   mergeChanges,
   type Change,
   type RequestGroup,
 } from './actionGroups';
-import type { Moment } from './nav';
+import {
+  attributed,
+  lineage,
+  managerNames,
+  startsRequests,
+  type Attribution,
+} from './attribution';
+import type { Moment, Scope, Step } from './nav';
 
 const { createReducer } = __INTERNAL__;
 
@@ -57,6 +67,14 @@ export interface LogEntry {
   /** A fetch's: whether NetworkManager shared it with the request it already
    * had for its key, instead of fetching. Missing when the log can't tell */
   readonly deduped?: boolean;
+  /** The manager that dispatched it (through its controller); missing for
+   * the app's own (a component's fetch, a button's set) */
+  readonly origin?: string;
+  /** The manager whose middleware handled it without passing it on, so the
+   * managers after it (and the store) never saw it */
+  readonly consumedBy?: string;
+  /** A fetch `consumedBy` a NetworkManager, which started its request */
+  readonly requested?: true;
   /** The store's own state (pending optimistic updates not yet applied)
    * right before and after this action. Missing when a manager handled the
    * action without passing it on (a plain fetch, a subscribe) */
@@ -82,6 +100,8 @@ export interface History {
   /** By an entry's seq: how many earlier updates of its row `updateLimit`
    * dropped (see `capUpdates`) */
   readonly dropped?: ReadonlyMap<number, number>;
+  /** Its current store's managers in chain order, as `track` named them */
+  readonly managers?: readonly string[];
 }
 
 const EMPTY: History = { entries: [], since: 0 };
@@ -104,18 +124,50 @@ function nearestHit(
   return entries.find(e => e.seq > seq && hit(e));
 }
 
-/** Where a step before (`-1`) or after (`1`) moment `seq` lands: the nearest
- * action `hit` says touched the subject, or past the newest, live (`null`).
- * `undefined` has nowhere to go: before the oldest, or after live */
-export function stepMoment(
-  entries: readonly LogEntry[],
-  seq: number | null,
+/** The actions a subject's steps go through: the log's `entries` in their
+ * `groups`, and the rows `listed` for it (those with an action `hit` says
+ * touched it) */
+export interface Listing {
+  readonly entries: readonly LogEntry[];
+  readonly groups: readonly ActionGroup[];
+  readonly listed: ReadonlySet<ActionGroup>;
+  /** The rows' requests: where the surface steps */
+  readonly requests: Requests;
+  readonly hit: (entry: LogEntry) => boolean;
+}
+
+/** Where a step before (`-1`) or after (`1`) the moment at `entry` (the
+ * newest, `live`) lands, at its depth (see `Scope`). An action alone steps
+ * an action at a time through the rows listed, every step of theirs
+ * included. Otherwise it steps a request at a time (see `requestsOf`), a
+ * picked row stepping from its request at the moment. Live is a place past
+ * the last request: stepping on from it reaches live, stepping back from
+ * live the last request. `null` is live; `undefined` has nowhere to go */
+export function stepAt(
+  { entries, groups, listed, requests, hit }: Listing,
+  entry: LogEntry | undefined,
+  live: boolean,
+  scope: Scope,
   by: -1 | 1,
-  hit: (entry: LogEntry) => boolean,
-): number | null | undefined {
-  const next = nearestHit(entries, seq, by, hit);
-  if (next) return next.seq;
-  if (by > 0 && seq !== null) return null;
+): Step | null | undefined {
+  if (!entry) return undefined;
+  if (scope === 'action') {
+    const next = nearestHit(entries, entry.seq, by, e => {
+      const row = groupOf(groups, e.seq);
+      return row ? listed.has(row) : hit(e);
+    });
+    if (next) return { seq: next.seq, scope };
+  } else {
+    const { moments } = requests;
+    const i = live ? moments.length : requests.of.get(entry.seq);
+    const next =
+      i !== undefined ? moments[i + by]
+      : by < 0 ? moments.findLast(m => m.seq < entry.seq)
+      : moments.find(m => m.seq > entry.seq);
+    if (next) return next;
+  }
+  // past the newest is live again
+  if (by > 0 && !live) return null;
 }
 
 /** The store at `entry`'s moment: as it left it, or (one a manager handled
@@ -206,8 +258,17 @@ export default class ActionLog {
     keep?: number,
     deduped?: (action: ActionTypes) => boolean,
   ) {
-    /** Each action's entry, for the tail to find what the head recorded */
-    const recorded = new WeakMap<ActionTypes, LogEntry>();
+    /** Each action's seq, for the tail to find what the head recorded */
+    const recorded = new WeakMap<ActionTypes, number>();
+    const attribution: Attribution = { copies: new WeakMap() };
+    /** The seq of `action`, or of what it's a copy of */
+    const seqOf = (action: ActionTypes): number | undefined => {
+      for (const a of lineage(attribution, action)) {
+        const seq = recorded.get(a);
+        if (seq !== undefined) return seq;
+      }
+    };
+    let managers: readonly string[] | undefined;
     let first = true;
     /** An action reached the tail, which keeps the history's state since */
     let reached = false;
@@ -220,6 +281,7 @@ export default class ActionLog {
       if (first) dropOthers();
       this.histories.set(id, {
         ...this.history(id),
+        managers,
         state: detach(state),
         ...(first && { storeFrom: this.nextSeq }),
       });
@@ -227,6 +289,8 @@ export default class ActionLog {
     };
     const head: Manager<ActionTypes> = {
       middleware: () => next => action => {
+        const origin = attribution.dispatching;
+        attribution.dispatching = undefined;
         if (!this.recording) return next(action);
         // the first action recorded starts the history
         if (first) dropOthers();
@@ -239,10 +303,11 @@ export default class ActionLog {
             action.type === actionTypes.FETCH && {
               deduped: deduped(action),
             }),
+          ...(origin && { origin }),
         };
         first = false;
-        recorded.set(action, entry);
-        this.append(id, entry);
+        recorded.set(action, entry.seq);
+        this.append(id, entry, managers);
         return next(action);
       },
       // a store can start without dispatching (one restored after an error,
@@ -273,13 +338,39 @@ export default class ActionLog {
             action.type === actionTypes.GC ? detach(before) : before,
             action,
           );
-          this.settle(id, recorded.get(action), { before, after: state });
+          // the state it left (one sent before recording started has no
+          // entry, but its state counts)
+          this.patch(
+            id,
+            seqOf(action),
+            { store: { before, after: state } },
+            { state },
+          );
           return next(action);
         };
       },
       cleanup() {},
     };
-    return { head, tail };
+    /** The store's own managers (between `head` and `tail`), each
+     * crediting what it dispatches and consumes to its name */
+    const track = (chain: readonly Manager[]): Manager[] => {
+      const names = managerNames(chain);
+      managers = names;
+      return chain.map((manager, i) => {
+        const requests = startsRequests(manager);
+        return attributed(manager, names[i], attribution, (action, by) => {
+          const seq = seqOf(action);
+          if (seq === undefined) return;
+          const requested =
+            requests && by !== undefined && action.type === actionTypes.FETCH;
+          this.patch(id, seq, {
+            consumedBy: by,
+            requested: requested || undefined,
+          });
+        });
+      });
+    };
+    return { head, tail, track };
   }
 
   history = (id: number): History => this.histories.get(id) ?? EMPTY;
@@ -352,7 +443,7 @@ export default class ActionLog {
     };
   };
 
-  private append(id: number, entry: LogEntry) {
+  private append(id: number, entry: LogEntry, managers?: readonly string[]) {
     const history = this.histories.get(id);
     // only a store's first action starts a history; a dropped one stays gone
     if (!history && !entry.newStore) return;
@@ -361,6 +452,7 @@ export default class ActionLog {
     const due = appended.length - trimmed >= this.trimEvery;
     this.histories.set(id, {
       ...history,
+      ...(!history && { managers }),
       entries: appended,
       since: entries.length ? since : entry.at,
       ...(due && this.compact(appended, history)),
@@ -398,18 +490,25 @@ export default class ActionLog {
     };
   }
 
-  /** The store state an action left */
-  private settle(
+  /** `fields` added to entry `seq` of history `id`, and `historyFields`
+   * to the history */
+  private patch(
     id: number,
-    entry: LogEntry | undefined,
-    store: Required<LogEntry>['store'],
+    seq: number | undefined,
+    fields: Partial<LogEntry>,
+    historyFields?: Partial<History>,
   ) {
     const history = this.histories.get(id);
     if (!history) return;
+    const { entries } = history;
+    // nearly always the newest
+    const i =
+      seq === undefined ? -1 : entries.findLastIndex(e => e.seq === seq);
+    if (i < 0 && !historyFields) return;
     this.histories.set(id, {
       ...history,
-      entries: history.entries.map(e => (e === entry ? { ...e, store } : e)),
-      state: store.after,
+      ...(i >= 0 && { entries: entries.with(i, { ...entries[i], ...fields }) }),
+      ...historyFields,
     });
     this.notify();
   }
@@ -558,6 +657,17 @@ function detach(state: State<unknown>): State<unknown> {
   };
 }
 
+/** `next`, or `prev` when it holds the same, so what is built on the set
+ * keeps its identity between actions that leave it alone */
+export function keepSameSet<T>(
+  prev: ReadonlySet<T>,
+  next: ReadonlySet<T>,
+): ReadonlySet<T> {
+  if (prev.size !== next.size) return next;
+  for (const value of next) if (!prev.has(value)) return next;
+  return prev;
+}
+
 /** `next`, or `prev` when it holds the same, so what is built on the map
  * keeps its identity between actions that leave it alone */
 export function keepSameMap<K, V>(
diff --git a/website/src/components/Playground/preview/store/actionParts.tsx b/website/src/components/Playground/preview/store/actionParts.tsx
index c227bb6134a1..fc0593e819e5 100644
--- a/website/src/components/Playground/preview/store/actionParts.tsx
+++ b/website/src/components/Playground/preview/store/actionParts.tsx
@@ -14,6 +14,7 @@ import {
   actionKey,
   actionName,
   pollFrequencyOf,
+  shownGroup,
   type ActionGroup,
   type Change,
   type RequestGroup,
@@ -22,11 +23,14 @@ import {
 } from './actionGroups';
 import type ActionLog from './actionLog';
 import { isRecordChange, type History, type LogEntry } from './actionLog';
+import { notableAttribution } from './attribution';
 import { kindColor } from './dom';
+import { ManagerName } from './ManagerName';
 import {
   ActionSpanContext,
   type ActionSpan,
   type Moment,
+  type Scope,
   type Then,
 } from './nav';
 import styles from './store.module.css';
@@ -340,6 +344,30 @@ export function TypeName({ entry }: { entry: LogEntry }) {
   );
 }
 
+/** Which of the code's managers sent the actions, and which kept one from
+ * the rest of the chain (the routine work of the default managers left
+ * out, see `notableAttribution`) */
+export function ManagerTags({ entries }: { entries: readonly LogEntry[] }) {
+  const { origin, consumedBy } = notableAttribution(entries);
+  return (
+    <>
+      {origin && (
+        <span className={styles.manager} title={`Sent by ${origin}`}>
+          ↑ <ManagerName name={origin} />
+        </span>
+      )}
+      {consumedBy && (
+        <span
+          className={styles.manager}
+          title={`${consumedBy} handled it without passing it on`}
+        >
+          ⊘ handled by <ManagerName name={consumedBy} />
+        </span>
+      )}
+    </>
+  );
+}
+
 export function typeClass(entry: LogEntry) {
   const { action } = entry;
   switch (action.type) {
@@ -717,6 +745,20 @@ export function ChangeChip({ change }: { change: Change }) {
   );
 }
 
+/** The moment at `entry` (as much as `scope` says): a request or row of
+ * several actions is named for them all, else the action */
+export function MomentName({
+  entry,
+  scope,
+}: {
+  entry: LogEntry;
+  scope: Scope;
+}) {
+  const { groups } = useActions();
+  const group = shownGroup(groups, entry.seq, scope);
+  return group ? <KeyLabel value={group.key} /> : <ActionName entry={entry} />;
+}
+
 /** `setResponse GET /posts`, or `gc` for an action without a key */
 export function ActionName({ entry }: { entry: LogEntry }) {
   const key = actionKey(entry.action);
diff --git a/website/src/components/Playground/preview/store/attribution.ts b/website/src/components/Playground/preview/store/attribution.ts
new file mode 100644
index 000000000000..f696f3217fa6
--- /dev/null
+++ b/website/src/components/Playground/preview/store/attribution.ts
@@ -0,0 +1,261 @@
+import {
+  DevToolsManager,
+  IdlingNetworkManager,
+  LogoutManager,
+  NetworkManager,
+  SubscriptionManager,
+  type ActionTypes,
+  type Controller,
+  type Manager,
+} from '@data-client/react';
+
+import type { LogEntry } from './actionLog';
+
+/** The library's managers, by class: a production build minifies their
+ * `constructor.name`. `console`: it (or a subclass) hands its controller to
+ * the console (`__DC__`), whose calls it never makes itself */
+const KNOWN: readonly {
+  readonly cls: abstract new (...args: any) => Manager;
+  readonly name: string;
+  readonly console?: true;
+}[] = [
+  { cls: NetworkManager, name: 'NetworkManager' },
+  { cls: IdlingNetworkManager, name: 'IdlingNetworkManager' },
+  { cls: SubscriptionManager, name: 'SubscriptionManager' },
+  { cls: DevToolsManager, name: 'DevToolsManager', console: true },
+  { cls: LogoutManager, name: 'LogoutManager' },
+];
+const KNOWN_NAMES = new Set(KNOWN.map(known => known.name));
+/** The library's name for `manager`, when it is one of the library's own
+ * classes; a subclass is the code's, named for itself */
+const libraryName = (manager: Manager) =>
+  KNOWN.find(({ cls }) => manager.constructor === cls)?.name;
+const sharesWithConsole = (manager: Manager) =>
+  KNOWN.some(known => known.console && manager instanceof known.cls);
+
+/** A manager every store has unless the code chooses otherwise, by the
+ * name `managerNames` gave it */
+export const isLibraryManager = (name: string) =>
+  KNOWN_NAMES.has(baseName(name));
+
+/** Whether a fetch it handles starts a request: a NetworkManager, the
+ * library's or a subclass the code made of it */
+export const startsRequests = (manager: Manager) =>
+  manager instanceof NetworkManager;
+
+/** Its class's name, without the `#2` a repeat gets */
+export const baseName = (name: string) => name.replace(/ #\d+$/, '');
+
+interface Stage {
+  /** The manager's name (unique in its chain) */
+  readonly id: string;
+  /** Actions it dispatched */
+  readonly sent: number;
+  /** Actions it kept from the rest of the chain */
+  readonly handled: number;
+}
+
+/** Who sent an action and who kept it from the rest of the chain */
+type Attributed = Pick<LogEntry, 'origin' | 'consumedBy'>;
+
+/** The stage before the chain: the app's own dispatches */
+export const APP = 'the app';
+/** Every stage a dispatch can start from, in order: the app, then the chain */
+export const stagesOf = (chain: readonly string[]) => [APP, ...chain];
+/** The stage that sent `entry`: a manager, or the app */
+export const originOf = (entry: Attributed) => entry.origin ?? APP;
+
+/** What the app and each manager of the chain, in order, did over
+ * `entries` */
+export function pipeline(
+  chain: readonly string[],
+  entries: readonly Attributed[],
+): Stage[] {
+  const stages = new Map(
+    stagesOf(chain).map(id => [id, { id, sent: 0, handled: 0 }]),
+  );
+  for (const entry of entries) {
+    const sender = stages.get(originOf(entry));
+    if (sender) sender.sent++;
+    const handler = entry.consumedBy && stages.get(entry.consumedBy);
+    if (handler) handler.handled++;
+  }
+  return [...stages.values()];
+}
+
+/** Each way `entries` took (by type, sender, handler and whether it was
+ * stored), with the first to take it and how many did */
+export function routesOf(
+  entries: readonly LogEntry[],
+): { entry: LogEntry; n: number }[] {
+  const seen = new Map<string, { entry: LogEntry; n: number }>();
+  for (const entry of entries) {
+    const { action, origin, consumedBy, store } = entry;
+    const key = JSON.stringify([action.type, origin, consumedBy, !!store]);
+    const route = seen.get(key);
+    if (route) route.n++;
+    else seen.set(key, { entry, n: 1 });
+  }
+  return [...seen.values()];
+}
+
+/** The chain to draw, once the store has managers */
+export const shownChain = (managers: readonly string[] | undefined) =>
+  managers?.length ? managers : undefined;
+
+/** Whether `entry` is one `stage` took part in: those it sent, and (a
+ * manager) those it kept from the rest of the chain */
+export function byStage(stage: string) {
+  return (entry: Attributed) =>
+    originOf(entry) === stage || entry.consumedBy === stage;
+}
+
+/** What the Store inspector calls each manager of a chain: its class, with
+ * `#2` and on when a chain holds several of one class */
+export function managerNames(managers: readonly Manager[]): string[] {
+  const seen = new Map<string, number>();
+  return managers.map(manager => {
+    const base = libraryName(manager) || manager.constructor?.name || 'Manager';
+    const n = (seen.get(base) ?? 0) + 1;
+    seen.set(base, n);
+    return n > 1 ? `${base} #${n}` : base;
+  });
+}
+
+export interface Attribution {
+  /** Who is dispatching right now: the manager whose controller call is on
+   * the stack. The log's head reads it as each action arrives, and clears
+   * it, so what else that dispatch sets off isn't credited to it too */
+  dispatching?: string;
+  /** The action each copy a middleware passed on was made from, so whoever
+   * handles the copy is credited on the action the log recorded */
+  readonly copies: WeakMap<ActionTypes, ActionTypes>;
+}
+
+/** `manager`, telling `attribution` while it calls its controller (what it
+ * dispatches through `set`, `fetch`, `dispatch` …), and `consumed` with each
+ * action its middleware returned without passing on (when its promise
+ * settles, for async middleware), or with no one when it passes one on later.
+ * Passing on a copy (`next({ ...action })`) counts while the middleware
+ * runs. The prototype stays the manager, so `instanceof` checks still see
+ * its class */
+export function attributed(
+  manager: Manager,
+  name: string,
+  attribution: Attribution,
+  consumed: (action: ActionTypes, by?: string) => void,
+): Manager {
+  const tracked: Manager = Object.create(manager);
+  // with `this` the manager, as DataProvider would call them
+  if (manager.init) tracked.init = state => manager.init!(state);
+  tracked.cleanup = () => manager.cleanup();
+  const sends = !sharesWithConsole(manager);
+  tracked.middleware = controller => {
+    const own =
+      sends ? asDispatcher(controller, name, attribution) : controller;
+    const withController = manager.middleware.call(manager, own);
+    return next => {
+      const passed = new WeakSet<object>();
+      const reported = new WeakSet<object>();
+      /** The actions this middleware is running for, innermost last */
+      const running: ActionTypes[] = [];
+      const dispatch = withController(action => {
+        passed.add(action);
+        // one passed on in place of the action running (not besides it,
+        // nor a copy it came from) stands for it
+        const from = running.at(-1);
+        if (
+          from &&
+          !passed.has(from) &&
+          !copiedFrom(attribution, from, action)
+        ) {
+          passed.add(from);
+          attribution.copies.set(action, from);
+        }
+        if (reported.has(action)) consumed(action);
+        return next(action);
+      });
+      return action => {
+        const check = () => {
+          if (passed.has(action)) return;
+          reported.add(action);
+          consumed(action, name);
+        };
+        running.push(action);
+        let result;
+        try {
+          result = dispatch(action);
+        } finally {
+          running.pop();
+        }
+        if (result instanceof Promise) result.then(check, check);
+        else check();
+        return result;
+      };
+    };
+  };
+  return tracked;
+}
+
+/** `action`, then what it was copied from, and so on */
+export function* lineage(
+  { copies }: Attribution,
+  action: ActionTypes,
+): Generator<ActionTypes> {
+  for (let a: ActionTypes | undefined = action; a; a = copies.get(a)) yield a;
+}
+
+/** Whether `ancestor` is `action`, or what it was copied from (linking a
+ * copy to its ancestor would loop) */
+function copiedFrom(
+  attribution: Attribution,
+  action: ActionTypes,
+  ancestor: ActionTypes,
+): boolean {
+  for (const a of lineage(attribution, action)) if (a === ancestor) return true;
+  return false;
+}
+
+type AnyFn = (...args: any[]) => any;
+
+/** `controller`, whose every call runs as `name` dispatching */
+function asDispatcher(
+  controller: Controller,
+  name: string,
+  attribution: Attribution,
+): Controller {
+  const wrapped = new WeakMap<AnyFn, AnyFn>();
+  return new Proxy(controller, {
+    get(target, key) {
+      const value = Reflect.get(target, key, target);
+      if (typeof value !== 'function') return value;
+      // the same function each read, until the controller's changes
+      const cached = wrapped.get(value);
+      if (cached) return cached;
+      const asName = function (this: unknown, ...args: unknown[]) {
+        const outer = attribution.dispatching;
+        attribution.dispatching = name;
+        try {
+          return value.apply(target, args);
+        } finally {
+          attribution.dispatching = outer;
+        }
+      };
+      wrapped.set(value, asName);
+      return asName;
+    },
+  });
+}
+
+/** Who sent `entries` (the first, which started them) and the first
+ * manager to keep one from the rest of the chain, leaving out the library's
+ * managers, whose work every playground has, so the code's own stand out.
+ * An action's path still says all */
+export function notableAttribution(entries: readonly Attributed[]): Attributed {
+  const notable = (name?: string) =>
+    name && !isLibraryManager(name) ? name : undefined;
+  return {
+    origin: notable(entries[0]?.origin),
+    consumedBy: entries.find(e => notable(e.consumedBy))?.consumedBy,
+  };
+}
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index d2ca7a777888..9bb19fed9e3b 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -75,12 +75,33 @@ export type View =
   | ListView
   | { readonly kind: 'record'; readonly id: string };
 
-/** One action (`seq`), or (`whole`) its group up to it, shown over a
- * subject with what it did to it; `null`, live, is the newest */
+/** What a moment at action `seq` stands for: by default its request up to
+ * it (its optimistic update and response as one, as live shows the
+ * newest's), `group` its row's actions up to it (the row was picked), or
+ * `action` only it (its step was picked: a level deeper than its request) */
+export type Scope = 'request' | 'group' | 'action';
+
+/** A moment to go to: action `seq`, as much as `scope` says */
+export interface Step {
+  readonly seq: number;
+  readonly scope: Scope;
+}
+/** `next`, or `prev` when it is the same place, so what is built on it
+ * keeps its identity between actions that don't move it */
+export const keepSameStep = <S extends Step | null | undefined>(
+  prev: S,
+  next: S,
+): S =>
+  prev && next && prev.seq === next.seq && prev.scope === next.scope ?
+    prev
+  : next;
+
+/** Action `seq` (as much as `scope` says), shown over a subject with what
+ * it did to it; `null`, live, is the newest */
 interface ActionView {
   readonly kind: 'action';
   readonly seq: number | null;
-  readonly whole?: boolean;
+  readonly scope: Scope;
 }
 
 /** The actions that touched the subject under it, at full width */
@@ -120,17 +141,26 @@ export interface LevelStack {
   /** Every level shows the store as it is (or the moment's): the moment set
    * on purpose outranks the store a chip opened a level at */
   readonly clearAt: () => void;
-  /** Shows action `seq` (or its group, `whole`) over the subject's actions
+  /** Shows action `seq` (as much as `scope` says) over the subject's actions
    * (opening them, or in place of the action view on top), so Back lists
-   * them; `null` the newest. `quiet`, without sliding in or taking focus */
+   * them; `null` the newest. `under` (see `followMoment`), a level deeper
+   * than that view. `quiet`, without sliding in or taking focus */
   readonly showAction: (
     seq: number | null,
-    whole?: boolean,
+    scope?: Scope,
+    under?: Scope,
     quiet?: boolean,
   ) => void;
   /** The moment moved: the action view follows it (on top or under levels
-   * its chips opened), to the newest action as it goes live (`null`) */
-  readonly followMoment: (seq: number | null, whole?: boolean) => void;
+   * its chips opened), to the newest action as it goes live (`null`).
+   * `under` (what the view under it stands for: its request, or the row
+   * holding it), it shows a level deeper than that view, which moves along
+   * under it */
+  readonly followMoment: (
+    seq: number | null,
+    scope?: Scope,
+    under?: Scope,
+  ) => void;
 }
 
 /** A stack of views over `root`, opening at `over` (on top of it) */
@@ -173,39 +203,79 @@ export function useLevelStack(
   // a level of its own (a new key), so it slides in and takes focus like
   // any level opened on purpose
   const showAction = useCallback(
-    (seq: number | null, whole = false, quiet = false) => {
+    (
+      seq: number | null,
+      scope: Scope = 'request',
+      under?: Scope,
+      quiet = false,
+    ) => {
       setLevels(prev => {
-        let under = prev.stack;
-        if (under[under.length - 1].view.kind === 'action')
-          under = under.slice(0, -1);
-        if (under[under.length - 1].view.kind !== 'actions')
-          under = [...under, { key: nextKey.current++, view: ACTIONS }];
-        const view: ActionView = { kind: 'action', seq, whole };
-        const entry: StackEntry = { key: nextKey.current++, view };
+        let base = prev.stack;
+        while (base[base.length - 1].view.kind === 'action')
+          base = base.slice(0, -1);
+        if (base[base.length - 1].view.kind !== 'actions')
+          base = [...base, { key: nextKey.current++, view: ACTIONS }];
+        const views: ActionView[] = [
+          ...(under ? [{ kind: 'action', seq, scope: under } as const] : []),
+          { kind: 'action', seq, scope },
+        ];
         return {
           ...prev,
-          stack: [...under, quiet ? { ...entry, quiet: true } : entry],
+          stack: [
+            ...base,
+            ...views.map((view): StackEntry => ({
+              key: nextKey.current++,
+              view,
+              ...(quiet && { quiet: true }),
+            })),
+          ],
         };
       });
     },
     [],
   );
-  const followMoment = useCallback((seq: number | null, whole = false) => {
-    setLevels(prev => {
-      // the action view, on top or under levels its chips opened (which
-      // the moment moves too, see `clearAt`), so Back finds the moment's
-      const i = prev.stack.findLastIndex(e => e.view.kind === 'action');
-      const shown = prev.stack[i]?.view;
-      if (
-        shown?.kind !== 'action' ||
-        (shown.seq === seq && !!shown.whole === whole)
-      )
-        return prev;
-      const stack = [...prev.stack];
-      stack[i] = { key: stack[i].key, view: { kind: 'action', seq, whole } };
-      return { ...prev, stack };
-    });
-  }, []);
+  const followMoment = useCallback(
+    (seq: number | null, scope: Scope = 'request', under?: Scope) => {
+      setLevels(prev => {
+        // the action view, on top or under levels its chips opened (which
+        // the moment moves too, see `clearAt`), so Back finds the moment's
+        let i = prev.stack.findLastIndex(e => e.view.kind === 'action');
+        if (i < 0) return prev;
+        // one a level deeper than its request moves that along under it
+        const deep = prev.stack[i - 1]?.view.kind === 'action';
+        if (deep) i--;
+        const views: ActionView[] =
+          under ?
+            [
+              { kind: 'action', seq, scope: under },
+              { kind: 'action', seq, scope },
+            ]
+          : [{ kind: 'action', seq, scope }];
+        const was = prev.stack.slice(i, i + (deep ? 2 : 1));
+        if (
+          was.length === views.length &&
+          was.every(
+            ({ view }, j) =>
+              view.kind === 'action' &&
+              view.seq === views[j].seq &&
+              view.scope === views[j].scope,
+          )
+        )
+          return prev;
+        const stack = [...prev.stack];
+        stack.splice(
+          i,
+          was.length,
+          ...views.map((view, j) => ({
+            key: was[j]?.key ?? nextKey.current++,
+            view,
+          })),
+        );
+        return { ...prev, stack };
+      });
+    },
+    [],
+  );
   return {
     stack,
     returnTo,
@@ -218,7 +288,11 @@ export function useLevelStack(
 }
 export const ACTIONS: ActionsView = { kind: 'actions' };
 /** The newest action, followed while live */
-export const NEWEST: ActionView = { kind: 'action', seq: null };
+export const NEWEST: ActionView = {
+  kind: 'action',
+  seq: null,
+  scope: 'request',
+};
 
 /** The store as an action left it, or (`before`) found it (a removed row
  * shows as it was). A level pushed at a Moment shows that store, and so does
@@ -234,24 +308,33 @@ export interface Moment {
  * actions can move it */
 export interface NavState {
   readonly seq: number | null;
-  /** The moment stands for every action of its group up to `seq` (its row
-   * was picked): what they did together shows as one */
-  readonly whole: boolean;
-  /** Where a step back (‹, ←) and on (›, →) land: see `stepMoment` */
-  readonly earlier: number | null | undefined;
-  readonly later: number | null | undefined;
-  readonly set: (seq: number | null, whole?: boolean) => void;
-  /** Moves the moment to action `seq` (or its group, `whole`) and opens it
+  /** What the moment stands for: what its actions did together shows as
+   * one */
+  readonly scope: Scope;
+  /** The actions the moment stands for, by seq (see `momentEntries`): the
+   * list, the timeline and the levels mark them all. None while live */
+  readonly current: ReadonlySet<number>;
+  /** Where a step back (‹, ←, Before) and on (›, →, After) land, at the
+   * moment's depth (see `stepAt`): `null` live, `undefined` nowhere */
+  readonly earlier: Step | null | undefined;
+  readonly later: Step | null | undefined;
+  readonly set: (seq: number | null, scope?: Scope) => void;
+  /** Moves the moment to `earlier` (`-1`) or `later` (`1`), if there is
+   * one: says whether it moved */
+  readonly step: (by: -1 | 1) => boolean;
+  /** Moves the moment to action `seq` (as much as `scope` says) and opens it
    * in the Action tab: what it did to the subject, then the action itself
    * (or the group's actions) */
-  readonly show: (seq: number, whole?: boolean) => void;
+  readonly show: (seq: number, scope?: Scope) => void;
 }
 export const NavStateContext = createContext<NavState>({
   seq: null,
-  whole: false,
+  scope: 'request',
+  current: new Set(),
   earlier: undefined,
   later: undefined,
   set: () => {},
+  step: () => false,
   show: () => {},
 });
 export const useNavState = () => useContext(NavStateContext);
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index 3dde0e913af0..3031e0760e41 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -154,11 +154,14 @@
 .pane.paneNarrow {
   width: min(100%, 22rem);
 }
-/* the subject's actions at full width, a level of their own; they shrink
- * to scroll on their own, unlike the level's other children */
-.level > .actionsLevel {
+/* views that fill the level and scroll inside it, unlike its other
+ * children: the subject's actions, and one action between its steps */
+.level > .actionsLevel,
+.level > .actFrame {
   flex: 1 1 auto;
   min-height: 0;
+}
+.level > .actionsLevel {
   display: flex;
   flex-direction: column;
 }
@@ -556,6 +559,18 @@ div.row[data-change='removed'] {
   border: 0;
   background: none;
 }
+/* the headings: a table's columns, a request's sections */
+.table th,
+.sectionLabel {
+  font: 600 10px / 1.6 var(--ifm-font-family-base);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--store-dim);
+}
+.sectionLabel {
+  margin: 0;
+  padding: 0.75rem 0.75rem 0.25rem;
+}
 .table th {
   position: sticky;
   top: 0;
@@ -564,10 +579,6 @@ div.row[data-change='removed'] {
   background: var(--store-bg);
   box-shadow: inset 0 -1px 0 var(--store-line-strong);
   text-align: start;
-  font: 600 10px / 1.6 var(--ifm-font-family-base);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--store-dim);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1007,9 +1018,8 @@ div.gapRow {
   font-size: 11px;
   cursor: default;
 }
-/* the moment's action: its row, and its step when the row is open */
-.actRow[aria-current],
-.stepRow[aria-current] {
+/* the moment's row */
+.actRow[aria-current] {
   box-shadow: inset 2px 0 0 var(--store-stale);
   background: var(--store-stale-bg);
 }
@@ -1020,6 +1030,127 @@ div.gapRow {
   gap: 0.5rem;
   min-width: 0;
 }
+/* the code's manager that sent an action, or kept it from the rest of the
+   chain */
+.manager {
+  composes: pill from '../../styles.module.css';
+  color: var(--store-muted);
+  border-color: var(--store-line-strong);
+}
+/* stages an action goes through (the app, the chain's managers, the
+   store), wrapping rather than scrolling: the pipeline over the store's
+   actions, and each action's path */
+.pipeline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 0.35rem;
+}
+.pipelineBar {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--store-line);
+}
+/* a step's path through the managers, as plain words under its name and
+   changes: only the managers that sent or handled it stand out */
+.stepPath {
+  /* past the padding a step row has */
+  padding: 0 0.6rem 0.3rem calc(0.6rem + var(--step-name));
+  font-size: 11px;
+}
+/* a single action's view: its time and path on one line under the crumbs */
+.actHeadline {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  padding: 0.6rem 0.75rem 0.1rem;
+  font-size: 11px;
+}
+.actHeadline > .stepPath {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+}
+.stepCount {
+  padding-left: 0.6rem;
+  color: var(--store-dim);
+}
+.stepPath > .pipeline {
+  row-gap: 0.1rem;
+}
+.stepPath .stage:not(.stageFold) {
+  padding: 0;
+  border-color: transparent;
+  background: none;
+  color: var(--store-muted);
+}
+.stepPath .stage.stageSender {
+  color: var(--store-fg);
+}
+.stepPath .stage.stageStop {
+  color: var(--store-stale);
+}
+.stageStep {
+  display: inline-flex;
+  align-items: center;
+}
+.stageArrow {
+  padding: 0 0.35rem;
+  color: var(--store-dim);
+}
+.stage {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4em;
+  padding: 0.15rem 0.5rem;
+  border: 1px solid var(--store-line-strong);
+  border-radius: 6px;
+  background: none;
+  color: var(--store-fg);
+  font: 400 11px / 1.5 var(--ifm-font-family-monospace);
+  white-space: nowrap;
+}
+button.stage {
+  cursor: pointer;
+}
+button.stage:hover {
+  background: var(--store-hover);
+}
+button.stage:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 1px;
+}
+.stage[aria-pressed='true'] {
+  border-color: var(--ifm-color-primary);
+  background: var(--store-selected);
+}
+@media (pointer: coarse) {
+  button.stage {
+    padding-block: 0.35rem;
+  }
+}
+.stageFold {
+  padding-inline: 0.6rem;
+  border-radius: 999px;
+}
+/* the dim, dashed stages: a folded run, and the store */
+.stageFold,
+.stageEnd {
+  border-style: dashed;
+  color: var(--store-muted);
+}
+.stageNote {
+  color: var(--store-muted);
+}
+.stageSender {
+  border-color: var(--ifm-color-primary);
+}
+.stageStop {
+  border-color: var(--store-stale);
+  background: var(--store-stale-bg);
+}
+.stageOff {
+  opacity: 0.4;
+}
 /* the key keeps its room in a narrow row: the meta wraps under it first */
 .actKey {
   flex: 0 1 auto;
@@ -1118,6 +1249,10 @@ div.gapRow {
    ends a scroll goes on to the list: a contained one trapped the wheel
    whenever the pointer rested on an open row */
 .steps {
+  /* a step's time column (its 11px text), and how far past the row's
+     padding its name starts: its changes and path start there too */
+  --step-time: calc(3.2 * 11px);
+  --step-name: calc(var(--step-time) + 0.6rem);
   margin: 0 0.75rem 0.35rem 1.05rem;
   border-left: 1px solid var(--store-line-strong);
   max-height: 16rem;
@@ -1127,6 +1262,12 @@ div.gapRow {
 .groupSteps > .steps {
   max-height: none;
   overflow-y: visible;
+  margin: 0;
+  border: none;
+}
+/* a step of the moment's row past the moment: the store hasn't seen it */
+.stepRow[data-after] {
+  opacity: 0.5;
 }
 div.stepRow {
   flex-wrap: wrap;
@@ -1134,11 +1275,16 @@ div.stepRow {
   padding: 0.15rem 0.6rem;
 }
 .stepRow .actTime {
-  min-width: 3.2em;
+  min-width: var(--step-time);
   text-align: right;
 }
+/* its changes on their own line, under its name */
 .stepRow .actSum {
-  flex: 1 1 12rem;
+  flex-basis: 100%;
+  padding-left: var(--step-name);
+}
+.stepRow .actSum:empty {
+  display: none;
 }
 div.joined {
   cursor: default;
@@ -1166,7 +1312,9 @@ div.joined {
 }
 .actBody > .metaList {
   margin: 0;
-  padding: 0.4rem 0.75rem 0.2rem;
+  padding: 0 0.75rem 0.2rem;
+  /* its heading sets it apart */
+  border: none;
   /* narrow as the panel may be, the values keep room: names take only what
      they need, and a nested object goes under its name, indented */
   grid-template-columns: max-content minmax(0, 1fr);
@@ -1362,20 +1510,41 @@ div.joined {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.momentAction {
+/* text that is a button: the moment's action, and a manager the
+   playground's code declares, which opens it there */
+.momentAction,
+.managerLink,
+.codeLink {
   min-width: 0;
   padding: 0;
   border: 0;
   background: none;
   color: inherit;
   font: inherit;
+  cursor: pointer;
+}
+.momentAction,
+.managerLink {
   text-decoration: underline dotted;
   text-underline-offset: 2px;
-  cursor: pointer;
 }
-.momentAction:hover {
+.momentAction:hover,
+.codeLink:hover {
   color: var(--store-fg);
 }
+.managerLink:hover {
+  text-decoration-style: solid;
+}
+/* beside a pipeline stage, whose own click picks it */
+.codeLink {
+  margin-left: 0.3em;
+  color: var(--store-muted);
+}
+@media (pointer: coarse) {
+  .codeLink {
+    padding: 0.35rem 0.2rem;
+  }
+}
 
 /* The lanes, above the tabs; narrow, they drop over them as a sheet */
 .lanes {
@@ -1584,11 +1753,18 @@ button.tlMark:hover {
     0 0 0 2px var(--store-bg),
     0 0 0 3.5px var(--store-fg);
 }
-/* the store didn't see it (a plain fetch, a subscribe): no state to show */
+/* the store didn't see it (a plain fetch, a subscribe): picked, it shows
+   the store as it found it */
 .tlHollow {
   background: none;
   box-shadow: inset 0 0 0 1.5px currentColor;
 }
+.tlHollow[data-selected] {
+  box-shadow:
+    inset 0 0 0 1.5px currentColor,
+    0 0 0 2px var(--store-bg),
+    0 0 0 3.5px var(--store-fg);
+}
 .tlOptimistic {
   width: 7px;
   height: 7px;
@@ -1716,31 +1892,32 @@ button.tlMark:hover {
   padding: 0.3rem 0.6rem 0.45rem;
 }
 
-/* the Action tab's actions before and after the one shown, a line each, to
-   step to; the one after stays at the bottom, of a short level too */
+/* the Action tab's action between the ones before and after it: columns
+   down its edges, as the timeline runs, take none of its height, and only
+   the action between them scrolls */
+.level > .actFrame {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr);
+}
+.actScroll {
+  overflow-y: auto;
+  border-inline: 1px solid var(--store-line);
+}
+/* the arrow, then (vertical) what it steps to, a long name cut short */
 .actStep {
   display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 0;
-  padding: 0.35rem 0.75rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  width: 1.75rem;
+  padding: 0.4rem 0;
+  overflow: hidden;
   border: 0;
-  border-bottom: 1px solid var(--store-line);
   background: none;
   color: var(--store-fg);
   font: inherit;
-  text-align: left;
-  white-space: nowrap;
-}
-.actStepAfter {
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
-  margin-top: auto;
-  border-top: 1px solid var(--store-line-strong);
-  border-bottom: 0;
-  background: var(--store-bg);
+  font-size: 11px;
 }
 .actStep:enabled {
   cursor: pointer;
@@ -1749,20 +1926,28 @@ button.tlMark:hover {
 .actStep:enabled:hover {
   background: var(--store-hover);
 }
-.actStepAfter:enabled:hover {
-  background: linear-gradient(var(--store-hover), var(--store-hover))
-    var(--store-bg);
-}
 .actStepDir {
-  flex: none;
-  width: 4.2rem;
   color: var(--store-dim);
-  font-size: 0.85em;
+  font-size: 1.4em;
+  line-height: 1;
+}
+.actStep:enabled:hover .actStepDir {
+  color: var(--store-fg);
 }
 .actStepName {
-  min-width: 0;
+  min-height: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  writing-mode: vertical-rl;
+}
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 .liveText {
   color: var(--store-fresh);