From 69d182086431a6b8020775877eff8aabfb1a0642 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:29:56 +0000
Subject: [PATCH 01/28] enhance(website): Redesign the playground Store
 inspector

Replace the react-json-tree dump with a store view built around how
Data Client normalizes data. Tables by default, a Tree view as a saved
option. Ids are links in both directions, long lists collapse, and
every stored value stays reachable from a row's expanded detail.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 website/package.json                          |   1 -
 .../components/Playground/preview/Preview.tsx |  21 +-
 .../Playground/preview/StoreInspector.tsx     |  20 +-
 .../components/Playground/preview/Tree.tsx    | 116 ------
 .../preview/__tests__/storeModel.test.ts      | 124 ++++++
 .../Playground/preview/store/Details.tsx      | 136 ++++++
 .../Playground/preview/store/Sections.tsx     | 246 +++++++++++
 .../Playground/preview/store/StorePanel.tsx   | 109 +++++
 .../Playground/preview/store/StoreUI.tsx      | 102 +++++
 .../Playground/preview/store/TableView.tsx    | 191 +++++++++
 .../Playground/preview/store/TreeView.tsx     |  93 +++++
 .../Playground/preview/store/Value.tsx        | 223 ++++++++++
 .../Playground/preview/store/model.ts         | 158 +++++++
 .../Playground/preview/store/refs.ts          | 135 ++++++
 .../preview/store/schemaRegistry.ts           |  52 +++
 .../Playground/preview/store/store.module.css | 387 ++++++++++++++++++
 .../components/Playground/styles.module.css   |  23 ++
 yarn.lock                                     |   3 +-
 18 files changed, 2002 insertions(+), 138 deletions(-)
 delete mode 100644 website/src/components/Playground/preview/Tree.tsx
 create mode 100644 website/src/components/Playground/preview/__tests__/storeModel.test.ts
 create mode 100644 website/src/components/Playground/preview/store/Details.tsx
 create mode 100644 website/src/components/Playground/preview/store/Sections.tsx
 create mode 100644 website/src/components/Playground/preview/store/StorePanel.tsx
 create mode 100644 website/src/components/Playground/preview/store/StoreUI.tsx
 create mode 100644 website/src/components/Playground/preview/store/TableView.tsx
 create mode 100644 website/src/components/Playground/preview/store/TreeView.tsx
 create mode 100644 website/src/components/Playground/preview/store/Value.tsx
 create mode 100644 website/src/components/Playground/preview/store/model.ts
 create mode 100644 website/src/components/Playground/preview/store/refs.ts
 create mode 100644 website/src/components/Playground/preview/store/schemaRegistry.ts
 create mode 100644 website/src/components/Playground/preview/store/store.module.css

diff --git a/website/package.json b/website/package.json
index e1d033d2455e..a22d615d4297 100644
--- a/website/package.json
+++ b/website/package.json
@@ -82,7 +82,6 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-json-tree": "0.20.0",
     "react-live": "^4.0.0",
     "temporal-polyfill": "^0.3.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",
diff --git a/website/src/components/Playground/preview/Preview.tsx b/website/src/components/Playground/preview/Preview.tsx
index e81d49e320bb..5c72b39cae72 100644
--- a/website/src/components/Playground/preview/Preview.tsx
+++ b/website/src/components/Playground/preview/Preview.tsx
@@ -3,6 +3,7 @@ import {
   PollingSubscription,
   SubscriptionManager,
   NetworkManager,
+  type Manager,
 } from '@data-client/react';
 import { MockResolver } from '@data-client/test/browser';
 import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal';
@@ -16,6 +17,7 @@ import React, {
 } from 'react';
 
 import Boundary from '../Boundary';
+import SchemaRegistry from './store/schemaRegistry';
 import StoreInspector from './StoreInspector';
 import { useTabStorage } from '../../../utils/tabStorage';
 import styles from '../styles.module.css';
@@ -50,10 +52,15 @@ function Preview<T>({
     ],
   );
 
-  const managers = useMemo(
-    () => [new NetworkManager(), new SubscriptionManager(PollingSubscription)],
-    [],
-  );
+  const [registry, managers] = useMemo(() => {
+    const registry = new SchemaRegistry();
+    const managers: Manager[] = [
+      registry,
+      new NetworkManager(),
+      new SubscriptionManager(PollingSubscription),
+    ];
+    return [registry, managers] as const;
+  }, []);
 
   const hiddenResult = row && selectedValue === 'y';
   return (
@@ -72,7 +79,11 @@ function Preview<T>({
             <PreviewBlockLazy onCommit={onCommit} />
           </Boundary>
         </div>
-        <StoreInspector selectedValue={selectedValue} toggle={toggle} />
+        <StoreInspector
+          selectedValue={selectedValue}
+          toggle={toggle}
+          registry={registry}
+        />
       </MockResolver>
     </DataProvider>
   );
diff --git a/website/src/components/Playground/preview/StoreInspector.tsx b/website/src/components/Playground/preview/StoreInspector.tsx
index 81d861af8e89..24166db5367c 100644
--- a/website/src/components/Playground/preview/StoreInspector.tsx
+++ b/website/src/components/Playground/preview/StoreInspector.tsx
@@ -1,23 +1,25 @@
-import { StateContext } from '@data-client/react';
 import clsx from 'clsx';
-import React, { useContext, memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import styles from '../styles.module.css';
-import Tree from './Tree';
+import type SchemaRegistry from './store/schemaRegistry';
+import StorePanel from './store/StorePanel';
 
 function StoreInspector({
   toggle,
   selectedValue,
+  registry,
 }: {
   selectedValue: 'y' | 'n';
   toggle: React.MouseEventHandler<HTMLDivElement>;
+  registry: SchemaRegistry;
 }) {
   const isSelected = selectedValue === 'y';
   return (
     <>
       <StoreToggle onClick={toggle} open={isSelected} />
       {isSelected ?
-        <StoreTreeM />
+        <StorePanel registry={registry} />
       : null}
     </>
   );
@@ -47,13 +49,3 @@ export function StoreToggle({
     </div>
   );
 }
-
-function StoreTree() {
-  const state = useContext(StateContext);
-  const simplifiedState = useMemo(() => {
-    const { optimistic, ...ret } = state;
-    return ret;
-  }, [state]);
-  return <Tree value={simplifiedState} />;
-}
-const StoreTreeM = memo(StoreTree);
diff --git a/website/src/components/Playground/preview/Tree.tsx b/website/src/components/Playground/preview/Tree.tsx
deleted file mode 100644
index 2b1f00f86634..000000000000
--- a/website/src/components/Playground/preview/Tree.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useColorMode } from '@docusaurus/theme-common';
-import React, { useMemo, type CSSProperties } from 'react';
-import { JSONTree, type KeyPath, type ValueRenderer } from 'react-json-tree';
-
-const valueColorMap = {
-  String: 'rgb(195, 232, 141)',
-  Date: 'rgb(247, 140, 108)',
-  Number: 'rgb(247, 140, 108)',
-  Boolean: 'rgb(247, 140, 108)',
-  Null: 'rgb(255, 88, 116)',
-  Undefined: 'rgb(255, 88, 116)',
-  Function: 'rgb(247, 140, 108)',
-  Symbol: 'rgb(247, 140, 108)',
-};
-
-export default function Output({ value }: { value: unknown }) {
-  const isDarkTheme = useColorMode().colorMode === 'dark';
-  const theme = useMemo(
-    () => ({
-      tree: {
-        overflow: 'auto',
-        flex: '4 1 40%',
-        margin: 0,
-        padding: '0 0.5rem 0 0.8rem',
-        backgroundColor:
-          isDarkTheme ? 'var(--ifm-pre-background)' : 'rgb(41, 45, 62)',
-        font: 'var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace) !important',
-        color: 'rgb(227, 227, 227)',
-      },
-      arrowContainer: ({ style }: { style: CSSProperties }) => ({
-        style: {
-          ...style,
-          fontFamily: 'arial',
-          padding: '7px 7px 7px 0',
-          margin: '-7px calc(0.5em - 7px) -7px 0',
-        },
-      }),
-      arrowSign: {
-        color: 'rgb(130, 170, 255)',
-      },
-      label: {
-        color: 'rgb(130, 170, 255)',
-      },
-      itemRange: {
-        color: 'rgb(105, 112, 152)',
-      },
-      valueText: (
-        { style }: { style: CSSProperties },
-        nodeType: keyof typeof valueColorMap,
-      ) => ({
-        style: {
-          ...style,
-          color: valueColorMap[nodeType],
-        },
-      }),
-      base0B: 'rgb(191, 199, 213)',
-    }),
-    [isDarkTheme],
-  );
-  const shouldExpandNodeInitially = useMemo(shouldExpandNode, []);
-  return (
-    <JSONTree
-      shouldExpandNodeInitially={shouldExpandNodeInitially}
-      data={value}
-      valueRenderer={valueRenderer}
-      theme={theme}
-      hideRoot={true}
-    />
-  );
-}
-
-const shouldExpandNode = () => {
-  let entityCount = 0;
-  let schemaCount = 0;
-
-  return (keyName: KeyPath, _data: unknown, level: number) => {
-    if (level === 0) return true;
-    if (level === 1 && ['entities', 'results'].includes(String(keyName[0])))
-      return true;
-    if (level === 2 && keyName[1] === 'entities') return schemaCount++ < 2;
-    if (level === 2 && keyName[1] === 'results') return true;
-    if (level === 3 && keyName[2] === 'entities') {
-      return entityCount++ < 4;
-    }
-    if (level === 3 && keyName[2] === 'results') return true;
-    return false;
-  };
-};
-
-const timeFormatter =
-  typeof Intl !== 'undefined' ?
-    Intl.DateTimeFormat('en-US', {
-      hour: 'numeric',
-      minute: 'numeric',
-      second: 'numeric',
-      fractionalSecondDigits: 3,
-    })
-  : undefined;
-
-const valueRenderer: ValueRenderer = (
-  valueAsString: unknown,
-  value: unknown,
-  ...keyPath: KeyPath
-) => {
-  const key = keyPath[0];
-  if (
-    timeFormatter &&
-    typeof value === 'number' &&
-    typeof key === 'string' &&
-    isFinite(value) &&
-    (key === 'date' || key.endsWith('At'))
-  ) {
-    return timeFormatter.format(value);
-  }
-  return valueAsString as string;
-};
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
new file mode 100644
index 000000000000..532cce30e93f
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -0,0 +1,124 @@
+/// <reference types="jest" />
+import { Collection, Entity, schema } from '@data-client/endpoint';
+import type { State } from '@data-client/react';
+
+import { buildModel, changedIds, entityId, splitKey } from '../store/model';
+import { resolve } from '../store/refs';
+import SchemaRegistry from '../store/schemaRegistry';
+
+class User extends Entity {
+  id = '';
+  name = '';
+}
+class Comment extends Entity {
+  id = '';
+  commenter = User.fromJS();
+  static schema = { commenter: User };
+}
+class Post extends Entity {
+  id = '';
+  author = User.fromJS();
+  comments: Comment[] = [];
+  static schema = {
+    author: User,
+    comments: new Collection([Comment], {
+      nestKey: (parent: any) => ({ postId: parent.id }),
+    }),
+  };
+}
+
+const state = {
+  meta: {},
+  entitiesMeta: {},
+  indexes: {},
+  optimistic: [],
+  lastReset: 0,
+  endpoints: { 'GET https://example.com/posts': ['1'] },
+  entities: {
+    User: { 123: { id: '123', name: 'Paul' } },
+    Comment: { 249: { id: '249', commenter: '123' } },
+    Post: { 1: { id: '1', author: '123', comments: '{"postId":"1"}' } },
+    '[Comment]': { '{"postId":"1"}': ['249'] },
+  },
+} as unknown as State<unknown>;
+
+function registryFor(key: string, s: any) {
+  const registry = new SchemaRegistry();
+  registry.endpoints.set(key, { endpoint: { schema: s }, args: [] });
+  registry.learn(s);
+  return registry;
+}
+
+describe('store model', () => {
+  it('learns every entity table reachable from an endpoint schema', () => {
+    const registry = registryFor('k', [Post]);
+    expect([...registry.entities.keys()].sort()).toEqual(
+      ['Comment', 'Post', 'User', '[Comment]'].sort(),
+    );
+  });
+
+  it('resolves references through Collections and Unions', () => {
+    const union = new schema.Union(
+      { users: User, posts: Post },
+      (input: any) => input.type,
+    );
+    expect(resolve({ id: '1', schema: 'posts' }, union)).toEqual({
+      t: 'ref',
+      key: 'Post',
+      pk: '1',
+    });
+    expect(resolve([{ id: '123', schema: 'users' }], [union])).toEqual({
+      t: 'arr',
+      items: [{ t: 'ref', key: 'User', pk: '123' }],
+    });
+  });
+
+  it('indexes who references each entity', () => {
+    const model = buildModel(
+      state,
+      registryFor('GET https://example.com/posts', [Post]),
+    );
+    const labels = (key: string, pk: string) =>
+      model.referrers.get(entityId(key, pk))?.map(r => r.label);
+    expect(labels('Post', '1')).toEqual(['GET /posts']);
+    expect(labels('User', '123')).toEqual(['Comment 249', 'Post 1']);
+    expect(labels('Comment', '249')).toEqual(['[Comment] {"postId":"1"}']);
+    expect(model.tables.map(t => [t.key, t.kind])).toEqual([
+      ['User', 'entity'],
+      ['Comment', 'entity'],
+      ['Post', 'entity'],
+      ['[Comment]', 'collection'],
+    ]);
+  });
+
+  it('shows unknown schemas as plain values', () => {
+    const model = buildModel(state, new SchemaRegistry());
+    expect(model.endpoints[0].value).toEqual({
+      t: 'arr',
+      items: [{ t: 'val', v: '1' }],
+    });
+    expect(model.referrers.size).toBe(0);
+  });
+
+  it('finds changed rows', () => {
+    const next = {
+      ...state,
+      entities: {
+        ...state.entities,
+        User: { 123: { id: '123', name: 'Paul Jones' } },
+      },
+    };
+    expect([...changedIds(state, next)]).toEqual([entityId('User', '123')]);
+  });
+
+  it('splits endpoint keys', () => {
+    expect(splitKey('GET https://example.com/posts?page=2')).toEqual({
+      method: 'GET',
+      path: '/posts?page=2',
+    });
+    expect(splitKey('custom key')).toEqual({
+      method: '',
+      path: 'custom key',
+    });
+  });
+});
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
new file mode 100644
index 000000000000..6085fcbc40f6
--- /dev/null
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -0,0 +1,136 @@
+import { StateContext, useController } from '@data-client/react';
+import clsx from 'clsx';
+import React, { useContext, useEffect, useState } from 'react';
+
+import {
+  isEndpointId,
+  type EndpointRow,
+  type EntityRow,
+  type Referrer,
+} from './model';
+import { plain } from './refs';
+import type { EndpointRecord } from './schemaRegistry';
+import { Segmented } from './Sections';
+import styles from './store.module.css';
+import { Block, Field, formatTime, RefChip } from './Value';
+
+type Meta = EndpointRow['meta'];
+
+/** fresh (with countdown), stale, error or invalidated */
+export function Status({ meta }: { meta: Meta }) {
+  const now = useNow(meta?.expiresAt);
+  if (!meta) return null;
+  if (meta.error)
+    return <span className={clsx(styles.pill, styles.error)}>error</span>;
+  if (meta.invalidated)
+    return <span className={clsx(styles.pill, styles.stale)}>invalid</span>;
+  const left = meta.expiresAt - now;
+  return left > 0 ?
+      <span
+        className={clsx(styles.pill, styles.fresh)}
+        title={`Expires at ${formatTime(meta.expiresAt)}`}
+      >
+        fresh {seconds(left)}
+      </span>
+    : <span className={clsx(styles.pill, styles.stale)}>stale</span>;
+}
+
+/** Re-renders each second until `until` passes */
+function useNow(until: number | undefined) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    if (until === undefined || until <= Date.now()) return;
+    const timer = setInterval(() => {
+      const t = Date.now();
+      setNow(t);
+      if (t >= until) clearInterval(timer);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [until]);
+  return now;
+}
+
+const seconds = (ms: number) =>
+  ms < 60_000 ? `${Math.ceil(ms / 1000)}s` : `${Math.round(ms / 60_000)}m`;
+
+export function EndpointDetail({ row }: { row: EndpointRow }) {
+  const [view, setView] = useState<'stored' | 'returns'>('stored');
+  const { record } = row;
+  return (
+    <div className={styles.detail}>
+      {record && (
+        <Segmented
+          label="Show"
+          options={{ stored: 'Stored', returns: 'Returns' }}
+          value={view}
+          onChange={setView}
+        />
+      )}
+      {view === 'returns' && record ?
+        <Returns record={record} />
+      : <Block node={row.value} />}
+      <div className={styles.metaList}>
+        <Field name="key" node={{ t: 'val', v: row.key }} />
+        {record?.args.length ?
+          <Field name="args" node={plain(record.args)} />
+        : null}
+        {row.meta && <Field name="meta" node={plain(row.meta)} />}
+      </div>
+    </div>
+  );
+}
+
+/** What useSuspense() hands the component for this endpoint */
+function Returns({ record }: { record: EndpointRecord }) {
+  const controller = useController();
+  const state = useContext(StateContext);
+  let data: unknown;
+  try {
+    data = controller.getResponse(record.endpoint, ...record.args, state).data;
+  } catch (e) {
+    data = e instanceof Error ? e.message : e;
+  }
+  return <Block node={plain(data)} />;
+}
+
+export function EntityDetail({
+  row,
+  referrers,
+}: {
+  row: EntityRow;
+  referrers: readonly Referrer[] | undefined;
+}) {
+  return (
+    <div className={styles.detail}>
+      <Block node={row.value} />
+      <div className={styles.metaList}>
+        {row.meta && <Field name="meta" node={plain(row.meta)} />}
+        <ReferencedBy referrers={referrers} />
+      </div>
+    </div>
+  );
+}
+
+function ReferencedBy({
+  referrers,
+}: {
+  referrers: readonly Referrer[] | undefined;
+}) {
+  return (
+    <div className={styles.field}>
+      <span className={styles.label}>used by</span>
+      {referrers?.length ?
+        <span className={styles.wrapList}>
+          {referrers.map(r => (
+            <RefChip
+              key={r.id}
+              id={r.id}
+              label={r.label}
+              className={isEndpointId(r.id) ? styles.endpointRef : undefined}
+            />
+          ))}
+        </span>
+      : <span className={styles.dim}>nothing</span>}
+    </div>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/Sections.tsx b/website/src/components/Playground/preview/store/Sections.tsx
new file mode 100644
index 000000000000..7e809226ae9b
--- /dev/null
+++ b/website/src/components/Playground/preview/store/Sections.tsx
@@ -0,0 +1,246 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import type { EndpointRow, EntityTable, StoreModel } from './model';
+import { splitKey } from './model';
+import { plain } from './refs';
+import styles from './store.module.css';
+import { ROW_LIMIT, sectionId, showAllId, useStoreUI } from './StoreUI';
+import { Field } from './Value';
+
+/** Every view shows the same sections; only how rows lay out differs */
+export function StoreSections({
+  model,
+  endpoints,
+  renderTable,
+}: {
+  model: StoreModel;
+  endpoints: React.ReactNode;
+  renderTable: (table: EntityTable) => React.ReactNode;
+}) {
+  const entityCount = model.tables.reduce((n, t) => n + t.rows.length, 0);
+  return (
+    <>
+      <OptimisticSection model={model} />
+      <Section
+        name="endpoints"
+        title="Endpoints"
+        count={model.endpoints.length}
+      >
+        {endpoints}
+      </Section>
+      <Section name="entities" title="Entities" count={entityCount}>
+        {model.tables.map(renderTable)}
+      </Section>
+      <InternalsSection model={model} />
+    </>
+  );
+}
+
+export function EndpointLabel({
+  row,
+  open,
+}: {
+  row: EndpointRow;
+  open: boolean;
+}) {
+  return (
+    <>
+      <Chevron open={open} />
+      <span className={styles.method}>{row.method}</span>{' '}
+      <span className={styles.trunc}>{row.path}</span>
+    </>
+  );
+}
+
+export function GroupLabel({
+  table,
+  open,
+}: {
+  table: EntityTable;
+  open: boolean;
+}) {
+  return (
+    <>
+      <Chevron open={open} />
+      <span className={styles.type}>{table.key}</span>
+      <span className={styles.count}>{table.rows.length}</span>
+      {table.kind === 'collection' && (
+        <span className={styles.kind}>Collection</span>
+      )}
+    </>
+  );
+}
+
+export function Segmented<V extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: Record<V, string>;
+  value: V;
+  onChange: (value: V) => void;
+}) {
+  return (
+    <div className={styles.seg} role="group" aria-label={label}>
+      {(Object.keys(options) as V[]).map(v => (
+        <button
+          key={v}
+          type="button"
+          aria-pressed={value === v}
+          onClick={e => {
+            e.stopPropagation();
+            onChange(v);
+          }}
+        >
+          {options[v]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function Chevron({ open }: { open: boolean }) {
+  return (
+    <span className={clsx(styles.chevron, open && styles.chevronOpen)}>▶</span>
+  );
+}
+
+/** Collapsible block with a sticky header */
+export function Section({
+  name,
+  title,
+  count,
+  children,
+}: {
+  name: string;
+  title: string;
+  count?: number;
+  children: React.ReactNode;
+}) {
+  const { isOpen, toggle } = useStoreUI();
+  const id = sectionId(name);
+  const open = isOpen(id);
+  return (
+    <section className={styles.section}>
+      <button
+        type="button"
+        className={styles.sectionHeader}
+        aria-expanded={open}
+        onClick={() => toggle(id)}
+      >
+        <Chevron open={open} />
+        {title}
+        {count !== undefined && <span className={styles.count}>{count}</span>}
+      </button>
+      {open && children}
+    </section>
+  );
+}
+
+/** Props making a row (tr or div) expand on click or Enter/Space */
+export function useRowProps(id: string, className?: string) {
+  const { isOpen, toggle, selected } = useStoreUI();
+  const open = isOpen(id);
+  return {
+    open,
+    props: {
+      'data-id': id,
+      tabIndex: 0,
+      'aria-expanded': open,
+      className: clsx(
+        styles.row,
+        className,
+        selected === id && styles.selected,
+      ),
+      onClick: () => toggle(id),
+      onKeyDown: (e: React.KeyboardEvent) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggle(id);
+        }
+      },
+    },
+  };
+}
+
+/** Rows of a table, capped at ROW_LIMIT until "Show all" */
+export function useLimitedRows<T>(tableKey: string, rows: readonly T[]) {
+  const { isOpen, toggle } = useStoreUI();
+  const all = isOpen(showAllId(tableKey));
+  const shown = all ? rows : rows.slice(0, ROW_LIMIT);
+  const footer =
+    rows.length > ROW_LIMIT ?
+      <button
+        type="button"
+        className={styles.showAll}
+        onClick={() => toggle(showAllId(tableKey))}
+      >
+        {all ? 'Show fewer' : `Show all ${rows.length}`}
+      </button>
+    : null;
+  return { shown, footer };
+}
+
+function OptimisticSection({ model }: { model: StoreModel }) {
+  if (!model.optimistic.length) return null;
+  return (
+    <Section
+      name="optimistic"
+      title="Optimistic"
+      count={model.optimistic.length}
+    >
+      {model.optimistic.map((action, i) => (
+        <OptimisticRow key={`${action.key}${i}`} action={action} index={i} />
+      ))}
+    </Section>
+  );
+}
+
+function OptimisticRow({
+  action,
+  index,
+}: {
+  action: StoreModel['optimistic'][number];
+  index: number;
+}) {
+  const { open, props } = useRowProps(`o\u001f${index}`);
+  const { method, path } = splitKey(action.key);
+  return (
+    <>
+      <div {...props}>
+        <Chevron open={open} />
+        <span className={clsx(styles.method, styles.optimistic)}>{method}</span>
+        <span className={styles.trunc}>{path}</span>
+        <span className={clsx(styles.pill, styles.optimistic)}>
+          waiting for server
+        </span>
+      </div>
+      {open && (
+        <div className={styles.detail}>
+          <Field name="key" node={{ t: 'val', v: action.key }} />
+          <Field name="args" node={plain(action.args)} />
+          <Field
+            name="fetchedAt"
+            node={{ t: 'val', v: action.meta.fetchedAt }}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Bookkeeping most people never need, collapsed by default */
+function InternalsSection({ model }: { model: StoreModel }) {
+  return (
+    <Section name="internals" title="Internals">
+      <div className={styles.detail}>
+        <Field name="lastReset" node={{ t: 'val', v: model.lastReset }} />
+        <Field name="indexes" node={plain(model.indexes)} />
+      </div>
+    </Section>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
new file mode 100644
index 000000000000..91c18e30ba92
--- /dev/null
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -0,0 +1,109 @@
+import { StateContext, type State } from '@data-client/react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import { buildModel, changedIds } from './model';
+import type SchemaRegistry from './schemaRegistry';
+import { Segmented } from './Sections';
+import styles from './store.module.css';
+import { StoreUIProvider } from './StoreUI';
+import TableView from './TableView';
+import TreeView from './TreeView';
+import { useTabStorage } from '../../../../utils/tabStorage';
+
+type View = 'table' | 'tree';
+/** Rough width of one table column, used to decide how many fit */
+const COLUMN_WIDTH = 120;
+
+export default function StorePanel({ registry }: { registry: SchemaRegistry }) {
+  const state = useContext(StateContext);
+  const model = useMemo(() => buildModel(state, registry), [state, registry]);
+  const [stored, setView] = useTabStorage('playgroundStoreView');
+  const view: View = stored === 'tree' ? 'tree' : 'table';
+
+  const scroller = useRef<HTMLDivElement>(null);
+  const maxColumns = useColumnCount(scroller);
+  useFlashChanges(scroller, state);
+
+  const [pending, setPending] = useState<string | null>(null);
+  useEffect(() => {
+    if (!pending || !scroller.current) return;
+    scrollToRow(scroller.current, pending);
+    setPending(null);
+  }, [pending]);
+
+  return (
+    <StoreUIProvider model={model} onReveal={setPending}>
+      <div className={styles.store} ref={scroller}>
+        <div className={styles.toolbar}>
+          <Segmented
+            label="Store view"
+            options={{ table: 'Table', tree: 'Tree' }}
+            value={view}
+            onChange={setView}
+          />
+        </div>
+        {view === 'table' ?
+          <TableView model={model} maxColumns={maxColumns} />
+        : <TreeView model={model} />}
+      </div>
+    </StoreUIProvider>
+  );
+}
+
+/** Table field columns that fit; re-renders only when the count changes */
+function useColumnCount(ref: React.RefObject<HTMLElement | null>) {
+  const [count, setCount] = useState(2);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(([entry]) =>
+      setCount(
+        Math.max(1, Math.floor((entry.contentRect.width - 80) / COLUMN_WIDTH)),
+      ),
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return count;
+}
+
+/** Briefly highlights rows whose stored value changed since the last state */
+function useFlashChanges(
+  ref: React.RefObject<HTMLElement | null>,
+  state: State<unknown>,
+) {
+  const prev = useRef(state);
+  useEffect(() => {
+    const before = prev.current;
+    prev.current = state;
+    const el = ref.current;
+    if (!el || before === state || typeof el.animate !== 'function') return;
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const ids = changedIds(before, state);
+    if (!ids.size) return;
+    for (const row of el.querySelectorAll<HTMLElement>('[data-id]')) {
+      if (!ids.has(row.dataset.id as string)) continue;
+      row.animate(
+        [
+          { backgroundColor: 'var(--store-flash)' },
+          { backgroundColor: 'transparent' },
+        ],
+        { duration: 1400, easing: 'ease-out' },
+      );
+    }
+  }, [ref, state]);
+}
+
+function scrollToRow(scroller: HTMLElement, id: string) {
+  const row = scroller.querySelector<HTMLElement>(
+    `[data-id="${CSS.escape(id)}"]`,
+  );
+  if (!row) return;
+  const top =
+    row.getBoundingClientRect().top -
+    scroller.getBoundingClientRect().top +
+    scroller.scrollTop;
+  // leave room for the sticky toolbar and section header
+  scroller.scrollTo({ top: Math.max(0, top - 64), behavior: 'smooth' });
+  row.focus({ preventScroll: true });
+}
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
new file mode 100644
index 000000000000..2c8a2192be2c
--- /dev/null
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -0,0 +1,102 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { isEndpointId, type StoreModel } from './model';
+
+/** Rows shown per table before "Show all" */
+export const ROW_LIMIT = 8;
+
+interface StoreUIValue {
+  readonly isOpen: (id: string) => boolean;
+  readonly toggle: (id: string) => void;
+  readonly selected: string | null;
+  /** Opens everything leading to `id`, selects it and scrolls it into view */
+  readonly reveal: (id: string) => void;
+}
+
+const StoreUIContext = createContext<StoreUIValue>({
+  isOpen: () => false,
+  toggle: () => {},
+  selected: null,
+  reveal: () => {},
+});
+export const useStoreUI = () => useContext(StoreUIContext);
+
+export const groupId = (key: string) => `g\u001f${key}`;
+export const showAllId = (key: string) => `a\u001f${key}`;
+export const sectionId = (name: string) => `s\u001f${name}`;
+
+/** Sections (but Internals) and the first few Entity types start open;
+ * rows start closed */
+const OPEN_GROUPS = 3;
+const openSections = ['optimistic', 'endpoints', 'entities'].map(sectionId);
+
+export function StoreUIProvider({
+  model,
+  onReveal,
+  children,
+}: {
+  model: StoreModel;
+  onReveal: (id: string) => void;
+  children: React.ReactNode;
+}) {
+  /** ids the user flipped away from their default */
+  const [flipped, setFlipped] = useState<ReadonlySet<string>>(new Set());
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const defaultOpen = useMemo(
+    () =>
+      new Set([
+        ...openSections,
+        ...model.tables.slice(0, OPEN_GROUPS).map(t => groupId(t.key)),
+      ]),
+    [model.tables],
+  );
+  const isOpen = useCallback(
+    (id: string) => defaultOpen.has(id) !== flipped.has(id),
+    [defaultOpen, flipped],
+  );
+  const toggle = useCallback((id: string) => {
+    setFlipped(prev => {
+      const next = new Set(prev);
+      if (!next.delete(id)) next.add(id);
+      return next;
+    });
+  }, []);
+
+  const reveal = useCallback(
+    (id: string) => {
+      const ancestors = [id];
+      if (isEndpointId(id)) ancestors.push(sectionId('endpoints'));
+      for (const table of model.tables) {
+        const index = table.rows.findIndex(row => row.id === id);
+        if (index < 0) continue;
+        ancestors.push(sectionId('entities'), groupId(table.key));
+        if (index >= ROW_LIMIT) ancestors.push(showAllId(table.key));
+      }
+      setFlipped(prev => {
+        const next = new Set(prev);
+        for (const a of ancestors)
+          if (defaultOpen.has(a)) next.delete(a);
+          else next.add(a);
+        return next;
+      });
+      setSelected(id);
+      onReveal(id);
+    },
+    [model, defaultOpen, onReveal],
+  );
+
+  const value = useMemo(
+    () => ({ isOpen, toggle, selected, reveal }),
+    [isOpen, toggle, selected, reveal],
+  );
+  return (
+    <StoreUIContext.Provider value={value}>{children}</StoreUIContext.Provider>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/TableView.tsx b/website/src/components/Playground/preview/store/TableView.tsx
new file mode 100644
index 000000000000..386d5d429ca7
--- /dev/null
+++ b/website/src/components/Playground/preview/store/TableView.tsx
@@ -0,0 +1,191 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { EndpointDetail, EntityDetail, Status } from './Details';
+import type { EndpointRow, EntityRow, EntityTable, StoreModel } from './model';
+import type { VNode } from './refs';
+import {
+  Chevron,
+  EndpointLabel,
+  GroupLabel,
+  StoreSections,
+  useLimitedRows,
+  useRowProps,
+} from './Sections';
+import styles from './store.module.css';
+import { groupId, useStoreUI } from './StoreUI';
+import { Inline, prettyPk } from './Value';
+
+/** Each Entity type is a table; fields that don't fit move into the row's
+ * expanded detail rather than scrolling sideways */
+export default function TableView({
+  model,
+  maxColumns,
+}: {
+  model: StoreModel;
+  maxColumns: number;
+}) {
+  return (
+    <StoreSections
+      model={model}
+      endpoints={
+        <table className={styles.table}>
+          <tbody>
+            {model.endpoints.map(row => (
+              <EndpointTableRow key={row.id} row={row} />
+            ))}
+          </tbody>
+        </table>
+      }
+      renderTable={table => (
+        <EntityGroup
+          key={table.key}
+          table={table}
+          model={model}
+          maxColumns={maxColumns}
+        />
+      )}
+    />
+  );
+}
+
+function EndpointTableRow({ row }: { row: EndpointRow }) {
+  const { open, props } = useRowProps(row.id);
+  return (
+    <>
+      <tr {...props}>
+        <td className={styles.endpointCell} title={row.key}>
+          <EndpointLabel row={row} open={open} />
+        </td>
+        <td>
+          <Inline node={row.value} />
+        </td>
+        <td className={styles.statusCell}>
+          <Status meta={row.meta} />
+        </td>
+      </tr>
+      {open && (
+        <tr className={styles.detailRow}>
+          <td colSpan={3}>
+            <EndpointDetail row={row} />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+const VALUE_COLUMN = '';
+const pkLabel = {
+  entity: 'id',
+  collection: 'args',
+  scalar: 'cell',
+  unknown: 'key',
+} as const;
+
+function EntityGroup({
+  table,
+  model,
+  maxColumns,
+}: {
+  table: EntityTable;
+  model: StoreModel;
+  maxColumns: number;
+}) {
+  const { isOpen, toggle } = useStoreUI();
+  const open = isOpen(groupId(table.key));
+  const { shown, footer } = useLimitedRows(table.key, table.rows);
+  // Entities get a column per field that fits; other tables one value column
+  const columns =
+    table.kind === 'entity' ?
+      table.fields.slice(0, maxColumns)
+    : [VALUE_COLUMN];
+  const hidden =
+    table.kind === 'entity' ? table.fields.length - columns.length : 0;
+  return (
+    <div className={styles.group}>
+      <button
+        type="button"
+        className={styles.groupHeader}
+        aria-expanded={open}
+        onClick={() => toggle(groupId(table.key))}
+      >
+        <GroupLabel table={table} open={open} />
+        {open && hidden > 0 && (
+          <span className={styles.hint}>
+            +{hidden} field{hidden === 1 ? '' : 's'} when expanded
+          </span>
+        )}
+      </button>
+      {open && (
+        <>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th
+                  className={
+                    table.kind === 'entity' ? styles.pkCell : styles.argsCell
+                  }
+                >
+                  {pkLabel[table.kind]}
+                </th>
+                {columns.map(c => (
+                  <th key={c}>{c}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {shown.map(row => (
+                <EntityTableRow
+                  key={row.id}
+                  row={row}
+                  columns={columns}
+                  model={model}
+                />
+              ))}
+            </tbody>
+          </table>
+          {footer}
+        </>
+      )}
+    </div>
+  );
+}
+
+function EntityTableRow({
+  row,
+  columns,
+  model,
+}: {
+  row: EntityRow;
+  columns: readonly string[];
+  model: StoreModel;
+}) {
+  const { open, props } = useRowProps(row.id);
+  return (
+    <>
+      <tr {...props}>
+        <td className={clsx(styles.pkCell, styles.key)}>
+          <Chevron open={open} />
+          {prettyPk(row.pk)}
+        </td>
+        {columns.map(c => {
+          const node = c === VALUE_COLUMN ? row.value : field(row.value, c);
+          return <td key={c}>{node && <Inline node={node} name={c} />}</td>;
+        })}
+      </tr>
+      {open && (
+        <tr className={styles.detailRow}>
+          <td colSpan={columns.length + 1}>
+            <EntityDetail row={row} referrers={model.referrers.get(row.id)} />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function field(node: VNode, name: string): VNode | undefined {
+  if (node.t !== 'obj') return;
+  return node.entries.find(([k]) => k === name)?.[1];
+}
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
new file mode 100644
index 000000000000..979608ef9898
--- /dev/null
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { EndpointDetail, EntityDetail, Status } from './Details';
+import type { EndpointRow, EntityRow, EntityTable, StoreModel } from './model';
+import {
+  Chevron,
+  EndpointLabel,
+  GroupLabel,
+  StoreSections,
+  useLimitedRows,
+  useRowProps,
+} from './Sections';
+import styles from './store.module.css';
+import { groupId } from './StoreUI';
+import { Inline, prettyPk } from './Value';
+
+/** Explorer: one line per row with a preview of its fields */
+export default function TreeView({ model }: { model: StoreModel }) {
+  return (
+    <StoreSections
+      model={model}
+      endpoints={model.endpoints.map(row => (
+        <EndpointTreeRow key={row.id} row={row} />
+      ))}
+      renderTable={table => (
+        <EntityTreeGroup key={table.key} table={table} model={model} />
+      )}
+    />
+  );
+}
+
+function EndpointTreeRow({ row }: { row: EndpointRow }) {
+  const { open, props } = useRowProps(row.id);
+  return (
+    <>
+      <div {...props} title={row.key}>
+        <EndpointLabel row={row} open={open} />
+        <Status meta={row.meta} />
+      </div>
+      {open && <EndpointDetail row={row} />}
+    </>
+  );
+}
+
+function EntityTreeGroup({
+  table,
+  model,
+}: {
+  table: EntityTable;
+  model: StoreModel;
+}) {
+  const { open, props } = useRowProps(groupId(table.key));
+  const { shown, footer } = useLimitedRows(table.key, table.rows);
+  return (
+    <>
+      <div {...props}>
+        <GroupLabel table={table} open={open} />
+      </div>
+      {open && (
+        <div className={styles.indent}>
+          {shown.map(row => (
+            <EntityTreeRow key={row.id} row={row} model={model} />
+          ))}
+          {footer}
+        </div>
+      )}
+    </>
+  );
+}
+
+function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
+  const { open, props } = useRowProps(row.id);
+  const preview =
+    row.value.t === 'obj' ?
+      { ...row.value, entries: row.value.entries.filter(([k]) => k !== 'id') }
+    : row.value;
+  return (
+    <>
+      <div {...props}>
+        <Chevron open={open} />
+        <span className={styles.key}>{prettyPk(row.pk)}</span>
+        <span className={styles.trunc}>
+          <Inline node={preview} bare />
+        </span>
+      </div>
+      {open && (
+        <div className={styles.indent}>
+          <EntityDetail row={row} referrers={model.referrers.get(row.id)} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
new file mode 100644
index 000000000000..fdaa701a3234
--- /dev/null
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -0,0 +1,223 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+
+import { entityId } from './model';
+import type { VNode } from './refs';
+import styles from './store.module.css';
+import { useStoreUI } from './StoreUI';
+
+/** Items shown before a "N more" button in expanded values */
+const BLOCK_LIMIT = 20;
+/** Items shown inline (table cells, tree previews) before "+N" */
+const INLINE_LIMIT = 3;
+
+export function RefChip({
+  id,
+  label,
+  className,
+}: {
+  id: string;
+  label: React.ReactNode;
+  className?: string;
+}) {
+  const { reveal } = useStoreUI();
+  return (
+    <button
+      type="button"
+      className={clsx(styles.ref, className)}
+      onClick={e => {
+        e.stopPropagation();
+        reveal(id);
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+function EntityRef({ entityKey, pk }: { entityKey: string; pk: string }) {
+  return (
+    <RefChip
+      id={entityId(entityKey, pk)}
+      label={
+        <>
+          {entityKey} <b>{prettyPk(pk)}</b>
+        </>
+      }
+    />
+  );
+}
+
+/** Single-line summary for table cells and tree rows */
+export function Inline({
+  node,
+  name,
+  bare = false,
+}: {
+  node: VNode;
+  name?: string;
+  /** Top-level object without braces, every field (the row truncates) */
+  bare?: boolean;
+}) {
+  switch (node.t) {
+    case 'ref':
+      return <EntityRef entityKey={node.key} pk={node.pk} />;
+    case 'val':
+      return <Primitive value={node.v} name={name} />;
+    case 'arr': {
+      const shown = node.items.slice(0, INLINE_LIMIT);
+      const rest = node.items.length - shown.length;
+      return (
+        <span className={styles.inlineList}>
+          <span className={styles.dim}>[</span>
+          {shown.map((item, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <span className={styles.dim}>, </span>}
+              <Inline node={item} />
+            </React.Fragment>
+          ))}
+          {rest > 0 && <span className={styles.dim}>, +{rest}</span>}
+          <span className={styles.dim}>]</span>
+        </span>
+      );
+    }
+    case 'obj': {
+      const shown = bare ? node.entries : node.entries.slice(0, 2);
+      const rest = node.entries.length - shown.length;
+      return (
+        <span className={styles.inlineList}>
+          {!bare && <span className={styles.dim}>{'{'}</span>}
+          {shown.map(([k, v], i) => (
+            <React.Fragment key={k}>
+              {i > 0 && <span className={styles.dim}>, </span>}
+              <span className={styles.key}>{k}</span>
+              <span className={styles.dim}>: </span>
+              <Inline node={v} name={k} />
+            </React.Fragment>
+          ))}
+          {rest > 0 && <span className={styles.dim}>, +{rest}</span>}
+          {!bare && <span className={styles.dim}>{'}'}</span>}
+        </span>
+      );
+    }
+  }
+}
+
+/** Full value: nested objects indent, long lists show more on request */
+export function Block({ node, name }: { node: VNode; name?: string }) {
+  if (node.t === 'obj') {
+    if (!node.entries.length) return <span className={styles.dim}>{'{}'}</span>;
+    return (
+      <div className={styles.fields}>
+        {node.entries.map(([k, v]) => (
+          <Field key={k} name={k} node={v} />
+        ))}
+      </div>
+    );
+  }
+  if (node.t === 'arr') return <BlockList node={node} />;
+  return <Inline node={node} name={name} />;
+}
+
+export function Field({ name, node }: { name: string; node: VNode }) {
+  const nested =
+    (node.t === 'obj' && node.entries.length > 0) ||
+    (node.t === 'arr' && node.items.some(i => i.t === 'obj'));
+  return (
+    <div className={clsx(styles.field, nested && styles.nested)}>
+      <span className={styles.key}>
+        {name}
+        <span className={styles.dim}>:</span>
+      </span>
+      <Block node={node} name={name} />
+    </div>
+  );
+}
+
+function BlockList({ node }: { node: Extract<VNode, { t: 'arr' }> }) {
+  const [all, setAll] = useState(false);
+  const shown = all ? node.items : node.items.slice(0, BLOCK_LIMIT);
+  const rest = node.items.length - shown.length;
+  const more =
+    rest > 0 ?
+      <button
+        type="button"
+        className={styles.more}
+        onClick={e => {
+          e.stopPropagation();
+          setAll(true);
+        }}
+      >
+        {rest} more
+      </button>
+    : null;
+  if (!node.items.length) return <span className={styles.dim}>[]</span>;
+  // Objects get one indexed block each; refs and primitives wrap inline
+  if (node.items.some(i => i.t === 'obj'))
+    return (
+      <div className={styles.fields}>
+        {shown.map((item, i) => (
+          <Field key={i} name={`${i}`} node={item} />
+        ))}
+        {more}
+      </div>
+    );
+  return (
+    <span className={styles.wrapList}>
+      {shown.map((item, i) => (
+        <Inline key={i} node={item} />
+      ))}
+      {more}
+    </span>
+  );
+}
+
+function Primitive({ value, name }: { value: unknown; name?: string }) {
+  if (value === null || value === undefined)
+    return <span className={styles.null}>{String(value)}</span>;
+  if (typeof value === 'string')
+    return <span className={styles.string}>{JSON.stringify(value)}</span>;
+  if (typeof value === 'number' && value && name && isTimeField(name))
+    return (
+      <span className={styles.number} title={String(value)}>
+        {formatTime(value)}
+      </span>
+    );
+  if (value instanceof Date)
+    return <span className={styles.number}>{value.toISOString()}</span>;
+  if (typeof value === 'object')
+    return <span className={styles.dim}>{JSON.stringify(value)}</span>;
+  return <span className={styles.number}>{String(value)}</span>;
+}
+
+const isTimeField = (name: string) =>
+  name === 'date' || name === 'lastReset' || /[a-z]At$/.test(name);
+
+const timeFormatter =
+  typeof Intl !== 'undefined' ?
+    Intl.DateTimeFormat('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      fractionalSecondDigits: 3,
+    })
+  : undefined;
+
+export function formatTime(ms: number) {
+  if (!isFinite(ms)) return String(ms);
+  return timeFormatter ? timeFormatter.format(ms) : new Date(ms).toISOString();
+}
+
+/** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
+export function prettyPk(pk: string) {
+  if (!pk.startsWith('{')) return pk;
+  try {
+    const args = JSON.parse(pk);
+    const entries = Object.entries(args);
+    return entries.length ?
+        entries.map(([k, v]) => `${k}: ${String(v)}`).join(', ')
+      : 'all';
+  } catch {
+    return pk;
+  }
+}
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
new file mode 100644
index 000000000000..af9440ed11ea
--- /dev/null
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -0,0 +1,158 @@
+import { schema as s } from '@data-client/endpoint';
+import type { State } from '@data-client/react';
+
+import { forEachRef, resolve, resolveRow, type VNode } from './refs';
+import type {
+  EndpointRecord,
+  default as SchemaRegistry,
+} from './schemaRegistry';
+
+/** Row ids shared by both views, selection and flashes */
+const endpointId = (key: string) => `e\u001f${key}`;
+export const isEndpointId = (id: string) => id.startsWith('e\u001f');
+export const entityId = (key: string, pk: string) => `n\u001f${key}\u001f${pk}`;
+
+export interface EndpointRow {
+  readonly id: string;
+  readonly key: string;
+  readonly method: string;
+  readonly path: string;
+  readonly value: VNode;
+  readonly meta: State<unknown>['meta'][string] | undefined;
+  /** Known only once the endpoint's action passed through the registry */
+  readonly record: EndpointRecord | undefined;
+}
+
+export interface EntityRow {
+  readonly id: string;
+  readonly pk: string;
+  readonly value: VNode;
+  readonly meta: State<unknown>['entitiesMeta'][string][string] | undefined;
+}
+
+export interface EntityTable {
+  readonly key: string;
+  readonly kind: 'entity' | 'collection' | 'scalar' | 'unknown';
+  readonly rows: readonly EntityRow[];
+  /** Field names in first-seen order, without `id` (entities only) */
+  readonly fields: readonly string[];
+}
+
+export interface Referrer {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface StoreModel {
+  readonly endpoints: readonly EndpointRow[];
+  readonly tables: readonly EntityTable[];
+  /** Row id → everything that references it */
+  readonly referrers: ReadonlyMap<string, readonly Referrer[]>;
+  readonly optimistic: State<unknown>['optimistic'];
+  readonly indexes: State<unknown>['indexes'];
+  readonly lastReset: number;
+}
+
+export function buildModel(
+  state: State<unknown>,
+  registry: SchemaRegistry,
+): StoreModel {
+  const referrers = new Map<string, Referrer[]>();
+  const addRefs = (from: Referrer, node: VNode) =>
+    forEachRef(node, (key, pk) => {
+      const to = entityId(key, pk);
+      const list = referrers.get(to);
+      if (!list) referrers.set(to, [from]);
+      // a row's refs arrive together, so a repeat is always the last entry
+      else if (list[list.length - 1].id !== from.id) list.push(from);
+    });
+
+  const endpoints = Object.entries(state.endpoints).map(([key, raw]) => {
+    const record = registry.endpoints.get(key);
+    const value = resolve(raw, record?.endpoint.schema);
+    const row: EndpointRow = {
+      id: endpointId(key),
+      key,
+      ...splitKey(key),
+      value,
+      meta: state.meta[key],
+      record,
+    };
+    addRefs({ id: row.id, label: `${row.method} ${row.path}`.trim() }, value);
+    return row;
+  });
+
+  const tables = Object.entries(state.entities).map(([key, rows = {}]) => {
+    const table = registry.entities.get(key);
+    const kind = tableKind(table, rows);
+    const fields = new Set<string>();
+    const entityRows = Object.entries(rows).map(([pk, raw]) => {
+      if (kind === 'entity' && raw && typeof raw === 'object')
+        Object.keys(raw).forEach(f => f !== 'id' && fields.add(f));
+      const row: EntityRow = {
+        id: entityId(key, pk),
+        pk,
+        value: resolveRow(raw, table),
+        meta: state.entitiesMeta[key]?.[pk],
+      };
+      addRefs({ id: row.id, label: `${key} ${pk}` }, row.value);
+      return row;
+    });
+    return { key, kind, rows: entityRows, fields: [...fields] };
+  });
+  // Entities first, then Collections, then Scalar cells
+  const order = { entity: 0, unknown: 1, collection: 2, scalar: 3 };
+  tables.sort((a, b) => order[a.kind] - order[b.kind]);
+
+  return {
+    endpoints,
+    tables,
+    referrers,
+    optimistic: state.optimistic,
+    indexes: state.indexes,
+    lastReset: state.lastReset,
+  };
+}
+
+function tableKind(
+  table: any,
+  rows: Record<string, unknown>,
+): EntityTable['kind'] {
+  if (typeof table === 'function') return 'entity';
+  if (table instanceof s.Collection) return 'collection';
+  if (table instanceof s.Scalar) return 'scalar';
+  // Unknown schema (e.g. state seeded without an action): guess from the rows
+  const first = Object.values(rows)[0];
+  return Array.isArray(first) ? 'collection' : 'unknown';
+}
+
+/** `GET https://host/posts?x=1` → method and path (host dropped) */
+export function splitKey(key: string) {
+  const match = /^([A-Z]+) (\S+)(.*)$/.exec(key);
+  if (!match) return { method: '', path: key };
+  const [, method, url, rest] = match;
+  try {
+    const parsed = new URL(url);
+    return { method, path: `${parsed.pathname}${parsed.search}${rest}` };
+  } catch {
+    return { method, path: `${url}${rest}` };
+  }
+}
+
+/** Ids whose stored value changed between two states */
+export function changedIds(prev: State<unknown>, next: State<unknown>) {
+  const ids = new Set<string>();
+  if (prev === next) return ids;
+  for (const [key, value] of Object.entries(next.endpoints)) {
+    if (prev.endpoints[key] !== value || prev.meta[key] !== next.meta[key])
+      ids.add(endpointId(key));
+  }
+  for (const [key, rows] of Object.entries(next.entities)) {
+    const before = prev.entities[key];
+    if (before === rows || !rows) continue;
+    for (const [pk, row] of Object.entries(rows)) {
+      if (before?.[pk] !== row) ids.add(entityId(key, pk));
+    }
+  }
+  return ids;
+}
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
new file mode 100644
index 000000000000..07357f4cbbae
--- /dev/null
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -0,0 +1,135 @@
+import { schema as s } from '@data-client/endpoint';
+
+/** A stored value annotated with which parts are references to entities */
+export type VNode =
+  | { readonly t: 'ref'; readonly key: string; readonly pk: string }
+  | { readonly t: 'arr'; readonly items: readonly VNode[] }
+  | {
+      readonly t: 'obj';
+      readonly entries: readonly (readonly [string, VNode])[];
+    }
+  | { readonly t: 'val'; readonly v: unknown };
+
+/** Anything stored as its own table in `state.entities` (Entity, Collection,
+ * Scalar); the same test denormalize uses */
+export function isEntityLike(schema: any): boolean {
+  return (
+    typeof schema?.createIfValid === 'function' &&
+    typeof schema.key === 'string'
+  );
+}
+
+function isPlainObject(value: any): value is Record<string, unknown> {
+  if (!value || typeof value !== 'object') return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+
+function isPolymorphic(schema: any) {
+  return (
+    schema instanceof s.Array ||
+    schema instanceof s.Values ||
+    schema instanceof s.Union ||
+    schema instanceof s.Invalidate
+  );
+}
+
+/** Calls `fn` with each schema nested directly inside `schema` */
+export function forEachChildSchema(schema: any, fn: (child: any) => void) {
+  if (Array.isArray(schema)) return schema.forEach(fn);
+  if (isPlainObject(schema)) return Object.values(schema).forEach(fn);
+  // Entity fields, Collection/Array/Values/Union members, Object fields, Lazy
+  if (schema.schema && !(schema instanceof s.Scalar)) fn(schema.schema);
+}
+
+/** Annotates a normalized `value` stored for `schema` */
+export function resolve(value: unknown, schema: any): VNode {
+  if (value == null || schema == null) return plain(value);
+  if (Array.isArray(schema))
+    return Array.isArray(value) ?
+        { t: 'arr', items: value.map(v => resolve(v, schema[0])) }
+      : plain(value);
+  if (schema instanceof s.Scalar) return plain(value);
+  if (isEntityLike(schema))
+    return typeof value === 'string' || typeof value === 'number' ?
+        { t: 'ref', key: schema.key, pk: `${value}` }
+      : plain(value);
+  if (isPolymorphic(schema)) {
+    const member = (v: unknown) => resolveMember(v, schema);
+    if (schema instanceof s.Values)
+      return isPlainObject(value) ?
+          {
+            t: 'obj',
+            entries: Object.entries(value).map(([k, v]) => [k, member(v)]),
+          }
+        : plain(value);
+    if (schema instanceof s.Array)
+      return Array.isArray(value) ?
+          { t: 'arr', items: value.map(member) }
+        : plain(value);
+    return member(value);
+  }
+  if (schema instanceof s.Lazy) return resolve(value, schema.schema);
+  const fields =
+    isPlainObject(schema) ? schema
+    : schema instanceof s.Object ? schema.schema
+    : undefined;
+  if (fields && isPlainObject(value)) return resolveFields(value, fields);
+  return plain(value);
+}
+
+/** One member of an Array/Values/Union: discriminated ones store `{ id, schema }` */
+function resolveMember(value: any, schema: any): VNode {
+  if (schema.isSingleSchema) return resolve(value, schema.schema);
+  if (isPlainObject(value) && 'schema' in value && 'id' in value) {
+    const member = schema.schema[value.schema as string];
+    if (member) return resolve(value.id, member);
+  }
+  return plain(value);
+}
+
+function resolveFields(
+  value: Record<string, unknown>,
+  fields: Record<string, any> | undefined,
+): VNode {
+  return {
+    t: 'obj',
+    entries: Object.entries(value).map(([k, v]) => [
+      k,
+      resolve(v, fields?.[k]),
+    ]),
+  };
+}
+
+/** Annotates one stored row of `state.entities[key]` */
+export function resolveRow(row: unknown, table: any): VNode {
+  if (!table) return plain(row);
+  if (table instanceof s.Collection) return resolve(row, table.schema);
+  if (typeof table === 'function' && isPlainObject(row))
+    return resolveFields(row, table.schema);
+  return plain(row);
+}
+
+export function plain(value: unknown): VNode {
+  if (Array.isArray(value)) return { t: 'arr', items: value.map(plain) };
+  if (value && typeof value === 'object' && !(value instanceof Date))
+    return {
+      t: 'obj',
+      entries: Object.entries(value).map(([k, v]) => [k, plain(v)]),
+    };
+  return { t: 'val', v: value };
+}
+
+export function forEachRef(
+  node: VNode,
+  fn: (key: string, pk: string) => void,
+): void {
+  switch (node.t) {
+    case 'ref':
+      return fn(node.key, node.pk);
+    case 'arr':
+      return node.items.forEach(n => forEachRef(n, fn));
+    case 'obj':
+      return node.entries.forEach(([, n]) => forEachRef(n, fn));
+  }
+}
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
new file mode 100644
index 000000000000..c9ab23ebaaf3
--- /dev/null
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -0,0 +1,52 @@
+import {
+  actionTypes,
+  type ActionTypes,
+  type Manager,
+  type Middleware,
+} from '@data-client/react';
+
+import { forEachChildSchema, isEntityLike } from './refs';
+
+export interface EndpointRecord {
+  readonly endpoint: any;
+  readonly args: readonly unknown[];
+}
+
+/** Remembers each endpoint (and every entity schema reachable from it) as
+ * actions pass through, since the store only holds keys and ids.
+ * Lives in the preview's DataProvider; action tracking can hook in here too. */
+export default class SchemaRegistry implements Manager<ActionTypes> {
+  readonly endpoints = new Map<string, EndpointRecord>();
+  /** Entity table key (`state.entities[key]`) → Entity class, Collection or Scalar */
+  readonly entities = new Map<string, any>();
+
+  middleware: Middleware<ActionTypes> = () => next => action => {
+    switch (action.type) {
+      case actionTypes.FETCH:
+      case actionTypes.SET_RESPONSE:
+      case actionTypes.OPTIMISTIC:
+        this.endpoints.set(action.key, {
+          endpoint: action.endpoint,
+          args: action.args,
+        });
+        this.learn(action.endpoint.schema);
+        break;
+      case actionTypes.SET:
+        this.learn(action.schema);
+        break;
+    }
+    return next(action);
+  };
+
+  cleanup() {}
+
+  learn(schema: any) {
+    if (!schema || (typeof schema !== 'object' && typeof schema !== 'function'))
+      return;
+    if (isEntityLike(schema)) {
+      if (this.entities.get(schema.key) === schema) return;
+      this.entities.set(schema.key, schema);
+    }
+    forEachChildSchema(schema, child => this.learn(child));
+  }
+}
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
new file mode 100644
index 000000000000..3cb653f4358f
--- /dev/null
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -0,0 +1,387 @@
+/* Store inspector: code-colored in both themes, like the editor */
+.store {
+  --store-fg: rgb(191, 199, 213);
+  --store-dim: rgb(105, 112, 152);
+  --store-key: rgb(130, 170, 255);
+  --store-string: rgb(195, 232, 141);
+  --store-number: rgb(247, 140, 108);
+  --store-null: rgb(255, 88, 116);
+  --store-type: #c792ea;
+  --store-fresh: #7fd1a0;
+  --store-stale: #ffcb6b;
+  --store-line: rgba(255, 255, 255, 0.07);
+  --store-hover: rgba(255, 255, 255, 0.045);
+  --store-selected: rgba(130, 170, 255, 0.16);
+  --store-flash: rgba(255, 203, 107, 0.3);
+  --store-bg: var(--monoco-code-background);
+
+  flex: 4 1 40%;
+  min-width: 0;
+  max-height: 32rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: var(--store-bg);
+  color: var(--store-fg);
+  font: 12px / 1.6 var(--ifm-font-family-monospace);
+}
+
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  box-sizing: border-box;
+  height: 2rem;
+  padding: 0 0.5rem;
+  background: var(--store-bg);
+}
+
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--store-line);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.seg button {
+  font: 500 11px / 1.6 var(--ifm-font-family-base);
+  background: none;
+  border: 0;
+  color: var(--store-dim);
+  padding: 0.05rem 0.6rem;
+  cursor: pointer;
+}
+.seg button[aria-pressed='true'] {
+  background: rgba(130, 170, 255, 0.16);
+  color: var(--store-fg);
+}
+
+.section + .section {
+  border-top: 1px solid var(--store-line);
+}
+.sectionHeader {
+  position: sticky;
+  top: 2rem;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  width: 100%;
+  padding: 0.35rem 0.75rem;
+  border: 0;
+  background: var(--store-bg);
+  color: var(--store-dim);
+  font: 600 10.5px / 1.6 var(--ifm-font-family-base);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  text-align: start;
+  cursor: pointer;
+}
+.count {
+  font: 400 11px var(--ifm-font-family-monospace);
+  letter-spacing: 0;
+  color: var(--store-dim);
+}
+
+.chevron {
+  display: inline-block;
+  flex: none;
+  width: 1em;
+  font-size: 8px;
+  color: var(--store-dim);
+  transition: transform 150ms;
+}
+.chevronOpen {
+  transform: rotate(90deg);
+}
+
+.row {
+  cursor: pointer;
+  outline-offset: -2px;
+}
+div.row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  min-width: 0;
+  padding: 0.1rem 0.75rem;
+}
+.row:focus-visible {
+  outline: 2px solid var(--store-key);
+}
+.selected,
+.selected > td {
+  background: var(--store-selected);
+}
+@media (hover: hover) {
+  .row:hover,
+  .row:hover > td,
+  .sectionHeader:hover,
+  .groupHeader:hover {
+    background-color: var(--store-hover);
+  }
+}
+
+.indent {
+  padding-left: 1.1rem;
+}
+
+/* tables: fixed layout so long values truncate instead of scrolling */
+.table {
+  display: table;
+  width: 100%;
+  margin: 0;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font: inherit;
+}
+.table thead,
+.table tr,
+.table tr:nth-child(2n),
+.table td,
+.table th {
+  border: 0;
+  background: none;
+}
+.table th {
+  padding: 0.1rem 0.5rem 0.1rem 0;
+  text-align: start;
+  font: 600 10px / 1.6 var(--ifm-font-family-base);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--store-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.table th:first-child {
+  padding-left: 0.75rem;
+}
+.table td {
+  padding: 0.1rem 0.5rem 0.1rem 0;
+  border-top: 1px solid var(--store-line);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: baseline;
+}
+.table td:first-child {
+  padding-left: 0.75rem;
+}
+.table tr.detailRow > td {
+  border-top: 0;
+  white-space: normal;
+  overflow: visible;
+}
+.pkCell {
+  width: 6.5em;
+}
+.argsCell {
+  width: 40%;
+}
+.endpointCell {
+  width: 45%;
+}
+.statusCell {
+  width: 7em;
+  text-align: end;
+}
+
+.group {
+  margin-bottom: 0.25rem;
+}
+.groupHeader {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  width: 100%;
+  padding: 0.15rem 0.75rem;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.hint {
+  margin-left: auto;
+  color: var(--store-dim);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.kind {
+  color: var(--store-dim);
+  font-size: 11px;
+}
+.showAll,
+.more {
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 11px;
+  color: var(--store-key);
+  cursor: pointer;
+}
+.showAll {
+  display: block;
+  padding: 0.15rem 0.75rem 0.2rem 2rem;
+}
+.showAll:hover,
+.more:hover {
+  text-decoration: underline;
+}
+
+/* expanded rows */
+.detail {
+  padding: 0.15rem 0.75rem 0.45rem 2rem;
+}
+.indent .detail {
+  padding-left: 1rem;
+}
+.detailRow .detail {
+  padding-left: 1.25rem;
+  padding-right: 0;
+}
+.detail > .seg {
+  display: flex;
+  width: fit-content;
+  margin-bottom: 0.25rem;
+}
+.fields {
+  flex-basis: 100%;
+}
+.field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 0.4rem;
+  min-width: 0;
+}
+.field.nested > .fields {
+  padding-left: 1rem;
+}
+.metaList {
+  margin-top: 0.3rem;
+  padding-top: 0.25rem;
+  border-top: 1px dashed var(--store-line);
+}
+.metaList .key,
+.label {
+  color: var(--store-dim);
+}
+.wrapList {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.3rem;
+  align-items: baseline;
+  min-width: 0;
+}
+
+/* values */
+.key {
+  color: var(--store-key);
+}
+.type {
+  color: var(--store-type);
+}
+.string {
+  color: var(--store-string);
+  overflow-wrap: anywhere;
+}
+.number {
+  color: var(--store-number);
+}
+.null {
+  color: var(--store-null);
+}
+.dim {
+  color: var(--store-dim);
+}
+.trunc {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.inlineList {
+  white-space: nowrap;
+}
+.method {
+  flex: none;
+  font: 600 10px var(--ifm-font-family-base);
+  letter-spacing: 0.04em;
+  color: var(--store-fresh);
+}
+
+.ref {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.3em;
+  max-width: 100%;
+  padding: 0 0.35em;
+  border: 1px solid rgba(199, 146, 234, 0.32);
+  border-radius: 4px;
+  background: rgba(199, 146, 234, 0.12);
+  color: var(--store-type);
+  font: inherit;
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.ref b {
+  font-weight: 500;
+  color: var(--store-fg);
+}
+.ref:hover {
+  background: rgba(199, 146, 234, 0.24);
+}
+.ref:focus-visible {
+  outline: 2px solid var(--store-key);
+}
+.endpointRef {
+  color: var(--store-fresh);
+  border-color: rgba(127, 209, 160, 0.35);
+  background: rgba(127, 209, 160, 0.08);
+}
+.endpointRef:hover {
+  background: rgba(127, 209, 160, 0.18);
+}
+
+.pill {
+  flex: none;
+  margin-left: auto;
+  padding: 0 0.5em;
+  border: 1px solid;
+  border-radius: 999px;
+  font: 500 10px / 1.6 var(--ifm-font-family-base);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.fresh {
+  color: var(--store-fresh);
+  border-color: rgba(127, 209, 160, 0.4);
+}
+.stale {
+  color: var(--store-stale);
+  border-color: rgba(255, 203, 107, 0.4);
+}
+.error {
+  color: var(--store-null);
+  border-color: rgba(255, 88, 116, 0.4);
+}
+.optimistic {
+  color: var(--store-type);
+  border-color: rgba(199, 146, 234, 0.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron {
+    transition: none;
+  }
+}
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index bb55a52b6907..da860732fe09 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -578,3 +578,26 @@ div.fixtureJson {
   color: inherit;
   cursor: pointer;
 }
+
+/* Narrow playgrounds: the Store stacks under the preview at full width */
+@container playground (max-width: 559px) {
+  .playgroundResult {
+    flex-direction: column;
+  }
+  .playgroundResult > * {
+    flex: none;
+  }
+  .debugToggle {
+    writing-mode: horizontal-tb;
+    text-orientation: mixed;
+    letter-spacing: 0.08rem;
+    line-height: inherit;
+    padding: 0.3rem 0.75rem;
+  }
+  .debugToggle .arrow.right {
+    transform: rotateZ(90deg);
+  }
+  .debugToggle .arrow.left {
+    transform: rotateZ(0deg);
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index ff0acfa90acf..ce65e1cd936e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23953,7 +23953,6 @@ __metadata:
     raw-loader: "npm:^4.0.2"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
-    react-json-tree: "npm:0.20.0"
     react-live: "npm:^4.0.0"
     react-redux: "npm:^9.2.0"
     redux: "npm:^5.0.1"
@@ -24141,7 +24140,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-json-tree@npm:0.20.0, react-json-tree@npm:^0.20.0":
+"react-json-tree@npm:^0.20.0":
   version: 0.20.0
   resolution: "react-json-tree@npm:0.20.0"
   dependencies:

From 5fc3d34bfc0b9c4393f9ac41c334076452e264fd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:33:41 +0000
Subject: [PATCH 02/28] fix(website): Keep Store groups open or closed as
 tables arrive

Store explicit open/closed choices instead of flips against a default
that moved whenever a new Entity type sorted in. Each group's default
is now fixed when it first appears. Covers the remaining schema types
in tests and notes the registry never prunes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StoreUI.test.tsx        | 41 ++++++++++++
 .../preview/__tests__/storeModel.test.ts      | 34 ++++++++++
 .../Playground/preview/store/StoreUI.tsx      | 67 ++++++++++---------
 .../preview/store/schemaRegistry.ts           |  4 +-
 4 files changed, 115 insertions(+), 31 deletions(-)
 create mode 100644 website/src/components/Playground/preview/__tests__/StoreUI.test.tsx

diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
new file mode 100644
index 000000000000..96d9efa5779d
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -0,0 +1,41 @@
+/// <reference types="jest" />
+import { act, render } from '@testing-library/react';
+import React from 'react';
+
+import type { EntityTable, StoreModel } from '../store/model';
+import { groupId, StoreUIProvider, useStoreUI } from '../store/StoreUI';
+
+const table = (key: string): EntityTable => ({
+  key,
+  kind: 'entity',
+  rows: [],
+  fields: [],
+});
+const model = (...keys: string[]) =>
+  ({ endpoints: [], tables: keys.map(table) }) as unknown as StoreModel;
+
+let ui: ReturnType<typeof useStoreUI>;
+function Probe() {
+  ui = useStoreUI();
+  return null;
+}
+const mount = (m: StoreModel) => (
+  <StoreUIProvider model={m} onReveal={() => {}}>
+    <Probe />
+  </StoreUIProvider>
+);
+
+describe('StoreUI', () => {
+  it('keeps groups open or closed when tables arrive later', () => {
+    const { rerender } = render(mount(model('User', 'Post', '[Comment]')));
+    expect(ui.isOpen(groupId('[Comment]'))).toBe(true);
+    act(() => ui.toggle(groupId('Post')));
+    expect(ui.isOpen(groupId('Post'))).toBe(false);
+
+    // a new Entity type sorts ahead of the Collection
+    rerender(mount(model('User', 'Post', 'Comment', '[Comment]')));
+    expect(ui.isOpen(groupId('Post'))).toBe(false);
+    expect(ui.isOpen(groupId('[Comment]'))).toBe(true);
+    expect(ui.isOpen(groupId('Comment'))).toBe(false);
+  });
+});
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 532cce30e93f..3b593f27a938 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -73,6 +73,40 @@ describe('store model', () => {
     });
   });
 
+  it('resolves Values, Object, Lazy and Invalidate members', () => {
+    const ref = (key: string, pk: string) => ({ t: 'ref', key, pk });
+    expect(resolve({ a: '123' }, new schema.Values(User))).toEqual({
+      t: 'obj',
+      entries: [['a', ref('User', '123')]],
+    });
+    expect(
+      resolve({ user: '123', n: 1 }, new schema.Object({ user: User })),
+    ).toEqual({
+      t: 'obj',
+      entries: [
+        ['user', ref('User', '123')],
+        ['n', { t: 'val', v: 1 }],
+      ],
+    });
+    expect(resolve(['123'], new schema.Lazy([User]))).toEqual({
+      t: 'arr',
+      items: [ref('User', '123')],
+    });
+    expect(resolve('1', new schema.Invalidate(Post))).toEqual(ref('Post', '1'));
+  });
+
+  it('shows Scalar cells as plain values', () => {
+    const scalar = new schema.Scalar({
+      lens: (args: any) => args[0]?.portfolio,
+      key: 'portfolio',
+      entity: User,
+    });
+    expect(resolve(['1', 'pct', 'User'], scalar)).toEqual({
+      t: 'arr',
+      items: ['1', 'pct', 'User'].map(v => ({ t: 'val', v })),
+    });
+  });
+
   it('indexes who references each entity', () => {
     const model = buildModel(
       state,
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
index 2c8a2192be2c..b0baae9dc9dd 100644
--- a/website/src/components/Playground/preview/store/StoreUI.tsx
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -31,10 +32,12 @@ export const groupId = (key: string) => `g\u001f${key}`;
 export const showAllId = (key: string) => `a\u001f${key}`;
 export const sectionId = (name: string) => `s\u001f${name}`;
 
-/** Sections (but Internals) and the first few Entity types start open;
- * rows start closed */
+/** Sections (but Internals) and the first few Entity types to appear start
+ * open; rows start closed */
 const OPEN_GROUPS = 3;
-const openSections = ['optimistic', 'endpoints', 'entities'].map(sectionId);
+const openSections = new Set(
+  ['optimistic', 'endpoints', 'entities'].map(sectionId),
+);
 
 export function StoreUIProvider({
   model,
@@ -45,29 +48,39 @@ export function StoreUIProvider({
   onReveal: (id: string) => void;
   children: React.ReactNode;
 }) {
-  /** ids the user flipped away from their default */
-  const [flipped, setFlipped] = useState<ReadonlySet<string>>(new Set());
+  /** the user's explicit open/closed choices */
+  const [overrides, setOverrides] = useState<ReadonlyMap<string, boolean>>(
+    new Map(),
+  );
   const [selected, setSelected] = useState<string | null>(null);
 
-  const defaultOpen = useMemo(
-    () =>
-      new Set([
-        ...openSections,
-        ...model.tables.slice(0, OPEN_GROUPS).map(t => groupId(t.key)),
-      ]),
-    [model.tables],
-  );
+  // A group's default is fixed when it first appears, so tables arriving
+  // later (Suspense loads them one by one) never reshuffle what is open
+  const groupDefaults = useRef(new Map<string, boolean>()).current;
+  for (const table of model.tables) {
+    const id = groupId(table.key);
+    if (!groupDefaults.has(id))
+      groupDefaults.set(id, groupDefaults.size < OPEN_GROUPS);
+  }
+
   const isOpen = useCallback(
-    (id: string) => defaultOpen.has(id) !== flipped.has(id),
-    [defaultOpen, flipped],
+    (id: string) =>
+      overrides.get(id) ?? (openSections.has(id) || !!groupDefaults.get(id)),
+    [overrides, groupDefaults],
+  );
+  const setOpen = useCallback(
+    (ids: readonly string[], open: boolean) =>
+      setOverrides(prev => {
+        const next = new Map(prev);
+        for (const id of ids) next.set(id, open);
+        return next;
+      }),
+    [],
+  );
+  const toggle = useCallback(
+    (id: string) => setOpen([id], !isOpen(id)),
+    [setOpen, isOpen],
   );
-  const toggle = useCallback((id: string) => {
-    setFlipped(prev => {
-      const next = new Set(prev);
-      if (!next.delete(id)) next.add(id);
-      return next;
-    });
-  }, []);
 
   const reveal = useCallback(
     (id: string) => {
@@ -79,17 +92,11 @@ export function StoreUIProvider({
         ancestors.push(sectionId('entities'), groupId(table.key));
         if (index >= ROW_LIMIT) ancestors.push(showAllId(table.key));
       }
-      setFlipped(prev => {
-        const next = new Set(prev);
-        for (const a of ancestors)
-          if (defaultOpen.has(a)) next.delete(a);
-          else next.add(a);
-        return next;
-      });
+      setOpen(ancestors, true);
       setSelected(id);
       onReveal(id);
     },
-    [model, defaultOpen, onReveal],
+    [model, setOpen, onReveal],
   );
 
   const value = useMemo(
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index c9ab23ebaaf3..47f22ceb884e 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -14,7 +14,9 @@ export interface EndpointRecord {
 
 /** Remembers each endpoint (and every entity schema reachable from it) as
  * actions pass through, since the store only holds keys and ids.
- * Lives in the preview's DataProvider; action tracking can hook in here too. */
+ * Lives in the preview's DataProvider; extend this manager (rather than
+ * adding another) when the preview starts tracking actions.
+ * Never prunes: fine for a playground session, not for a long-lived app. */
 export default class SchemaRegistry implements Manager<ActionTypes> {
   readonly endpoints = new Map<string, EndpointRecord>();
   /** Entity table key (`state.entities[key]`) → Entity class, Collection or Scalar */

From 90208ba71ebb909311db9e37320bee46da4a2794 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:36:24 +0000
Subject: [PATCH 03/28] test(website): Cover the Store inspector's model,
 registry and reveal

Brings branch coverage back over the repo's 96% threshold.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StoreUI.test.tsx        | 39 +++++++++++-
 .../preview/__tests__/storeModel.test.ts      | 62 ++++++++++++++++++-
 2 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
index 96d9efa5779d..fceae22e054e 100644
--- a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -3,7 +3,15 @@ import { act, render } from '@testing-library/react';
 import React from 'react';
 
 import type { EntityTable, StoreModel } from '../store/model';
-import { groupId, StoreUIProvider, useStoreUI } from '../store/StoreUI';
+import { entityId } from '../store/model';
+import {
+  groupId,
+  ROW_LIMIT,
+  sectionId,
+  showAllId,
+  StoreUIProvider,
+  useStoreUI,
+} from '../store/StoreUI';
 
 const table = (key: string): EntityTable => ({
   key,
@@ -19,8 +27,9 @@ function Probe() {
   ui = useStoreUI();
   return null;
 }
+const onReveal = jest.fn();
 const mount = (m: StoreModel) => (
-  <StoreUIProvider model={m} onReveal={() => {}}>
+  <StoreUIProvider model={m} onReveal={onReveal}>
     <Probe />
   </StoreUIProvider>
 );
@@ -38,4 +47,30 @@ describe('StoreUI', () => {
     expect(ui.isOpen(groupId('[Comment]'))).toBe(true);
     expect(ui.isOpen(groupId('Comment'))).toBe(false);
   });
+
+  it('reveal opens everything leading to a row', () => {
+    const rows = Array.from({ length: ROW_LIMIT + 1 }, (_, i) => ({
+      id: entityId('Late', `${i}`),
+    }));
+    const m = {
+      endpoints: [],
+      tables: ['A', 'B', 'C'].map(table).concat({ ...table('Late'), rows }),
+    } as unknown as StoreModel;
+    render(mount(m));
+    act(() => ui.toggle(sectionId('entities')));
+    const target = entityId('Late', `${ROW_LIMIT}`);
+    act(() => ui.reveal(target));
+    expect(ui.selected).toBe(target);
+    expect(onReveal).toHaveBeenCalledWith(target);
+    for (const id of [
+      target,
+      sectionId('entities'),
+      groupId('Late'),
+      showAllId('Late'),
+    ])
+      expect(ui.isOpen(id)).toBe(true);
+
+    act(() => ui.reveal('e\u001fGET /x'));
+    expect(ui.isOpen(sectionId('endpoints'))).toBe(true);
+  });
 });
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 3b593f27a938..d51b545c5e3e 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -1,8 +1,9 @@
 /// <reference types="jest" />
 import { Collection, Entity, schema } from '@data-client/endpoint';
-import type { State } from '@data-client/react';
+import { actionTypes, type State } from '@data-client/react';
 
 import { buildModel, changedIds, entityId, splitKey } from '../store/model';
+import { resolveRow } from '../store/refs';
 import { resolve } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
@@ -107,6 +108,31 @@ describe('store model', () => {
     });
   });
 
+  it('falls back to plain values when the stored shape does not match', () => {
+    const val = (v: unknown) => ({ t: 'val', v });
+    expect(resolve('x', new schema.Values(User))).toEqual(val('x'));
+    expect(resolve('x', new schema.Array(User))).toEqual(val('x'));
+    expect(resolve('x', [User])).toEqual(val('x'));
+    expect(resolve({ id: '1' }, User)).toEqual({
+      t: 'obj',
+      entries: [['id', val('1')]],
+    });
+    const union = new schema.Union({ users: User }, (i: any) => i.type);
+    expect(resolve({ id: '1', schema: 'nope' }, union)).toEqual({
+      t: 'obj',
+      entries: [
+        ['id', val('1')],
+        ['schema', val('nope')],
+      ],
+    });
+    expect(resolveRow('x', undefined)).toEqual(val('x'));
+    expect(resolveRow('x', User)).toEqual(val('x'));
+    expect(resolveRow(['249'], Post.schema.comments)).toEqual({
+      t: 'arr',
+      items: [{ t: 'ref', key: 'Comment', pk: '249' }],
+    });
+  });
+
   it('indexes who references each entity', () => {
     const model = buildModel(
       state,
@@ -134,6 +160,36 @@ describe('store model', () => {
     expect(model.referrers.size).toBe(0);
   });
 
+  it('guesses table kinds without a schema', () => {
+    const model = buildModel(
+      {
+        ...state,
+        entities: { Thing: { a: { n: 1 } }, '[Thing]': { '{}': ['a'] } },
+      } as unknown as State<unknown>,
+      new SchemaRegistry(),
+    );
+    expect(model.tables.map(t => t.kind)).toEqual(['unknown', 'collection']);
+  });
+
+  it('records endpoints and schemas from actions', async () => {
+    const registry = new SchemaRegistry();
+    const next = jest.fn(() => Promise.resolve());
+    const dispatch = registry.middleware({} as any)(next);
+    await dispatch({
+      type: actionTypes.SET_RESPONSE,
+      key: 'k',
+      endpoint: { schema: [Post] },
+      args: [1],
+    } as any);
+    await dispatch({ type: actionTypes.SET, schema: Comment } as any);
+    await dispatch({ type: actionTypes.RESET } as any);
+    expect(next).toHaveBeenCalledTimes(3);
+    expect(registry.endpoints.get('k')?.args).toEqual([1]);
+    expect(registry.entities.get('Comment')).toBe(Comment);
+    registry.learn(null);
+    registry.cleanup();
+  });
+
   it('finds changed rows', () => {
     const next = {
       ...state,
@@ -146,6 +202,10 @@ describe('store model', () => {
   });
 
   it('splits endpoint keys', () => {
+    expect(splitKey('GET /relative')).toEqual({
+      method: 'GET',
+      path: '/relative',
+    });
     expect(splitKey('GET https://example.com/posts?page=2')).toEqual({
       method: 'GET',
       path: '/posts?page=2',

From 657c66ab0af882606e479b4c94dccf5767cb32a1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:37:01 +0000
Subject: [PATCH 04/28] test(website): Fix StoreUI test row typing

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../components/Playground/preview/__tests__/StoreUI.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
index fceae22e054e..5f4ff111a45f 100644
--- a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -51,7 +51,7 @@ describe('StoreUI', () => {
   it('reveal opens everything leading to a row', () => {
     const rows = Array.from({ length: ROW_LIMIT + 1 }, (_, i) => ({
       id: entityId('Late', `${i}`),
-    }));
+    })) as unknown as EntityTable['rows'];
     const m = {
       endpoints: [],
       tables: ['A', 'B', 'C'].map(table).concat({ ...table('Late'), rows }),

From b4bd2ac6fc15383ef10012146dec2068517e9ba9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:41:50 +0000
Subject: [PATCH 05/28] fix(website): Show failed endpoints, pending optimistic
 updates, Scalar refs and error details in the Store

- List endpoints that only have meta (errors, invalidations)
- Track the optimistic queue in SchemaRegistry: the state components read
  has it applied and emptied
- Link standalone Scalar cells to their table rows
- Keep an Error's name, message and stack

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/storeModel.test.ts      | 67 ++++++++++++++++++-
 .../Playground/preview/store/Sections.tsx     |  5 +-
 .../Playground/preview/store/model.ts         | 24 +++++--
 .../Playground/preview/store/refs.ts          | 18 ++++-
 .../preview/store/schemaRegistry.ts           | 29 ++++++++
 5 files changed, 129 insertions(+), 14 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index d51b545c5e3e..313bd614431d 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -3,8 +3,7 @@ import { Collection, Entity, schema } from '@data-client/endpoint';
 import { actionTypes, type State } from '@data-client/react';
 
 import { buildModel, changedIds, entityId, splitKey } from '../store/model';
-import { resolveRow } from '../store/refs';
-import { resolve } from '../store/refs';
+import { plain, resolve, resolveRow } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
 class User extends Entity {
@@ -96,18 +95,45 @@ describe('store model', () => {
     expect(resolve('1', new schema.Invalidate(Post))).toEqual(ref('Post', '1'));
   });
 
-  it('shows Scalar cells as plain values', () => {
+  it('links standalone Scalar cells and shows entity-field tuples plainly', () => {
     const scalar = new schema.Scalar({
       lens: (args: any) => args[0]?.portfolio,
       key: 'portfolio',
       entity: User,
     });
+    expect(resolve(['User|1|a'], [scalar])).toEqual({
+      t: 'arr',
+      items: [{ t: 'ref', key: scalar.key, pk: 'User|1|a' }],
+    });
     expect(resolve(['1', 'pct', 'User'], scalar)).toEqual({
       t: 'arr',
       items: ['1', 'pct', 'User'].map(v => ({ t: 'val', v })),
     });
   });
 
+  it('keeps error details', () => {
+    const error = Object.assign(new TypeError('boom'), { status: 500 });
+    const entries = (plain(error) as any).entries.map(([k]: any) => k);
+    expect(entries).toEqual(['name', 'message', 'status', 'stack']);
+    expect((plain(error) as any).entries[1][1]).toEqual({
+      t: 'val',
+      v: 'boom',
+    });
+  });
+
+  it('lists endpoints that only have meta', () => {
+    const failed = {
+      ...state,
+      meta: { 'GET /broken': { error: new Error('x'), date: 1 } },
+    } as unknown as State<unknown>;
+    const model = buildModel(failed, new SchemaRegistry());
+    expect(model.endpoints.map(e => e.key)).toEqual([
+      'GET https://example.com/posts',
+      'GET /broken',
+    ]);
+    expect([...changedIds(state, failed)]).toEqual(['e\u001fGET /broken']);
+  });
+
   it('falls back to plain values when the stored shape does not match', () => {
     const val = (v: unknown) => ({ t: 'val', v });
     expect(resolve('x', new schema.Values(User))).toEqual(val('x'));
@@ -190,6 +216,41 @@ describe('store model', () => {
     registry.cleanup();
   });
 
+  it('tracks optimistic updates until their response arrives', () => {
+    const registry = new SchemaRegistry();
+    const dispatch = registry.middleware({} as any)(() => Promise.resolve());
+    const endpoint = { getOptimisticResponse: () => 1, sideEffect: true };
+    const fetch = (fetchedAt: number) =>
+      dispatch({
+        type: actionTypes.FETCH,
+        key: 'k',
+        endpoint,
+        args: [fetchedAt],
+        meta: { fetchedAt },
+      } as any);
+    fetch(1);
+    fetch(2);
+    dispatch({
+      type: actionTypes.FETCH,
+      key: 'plain',
+      endpoint: {},
+      args: [],
+      meta: { fetchedAt: 3 },
+    } as any);
+    expect(registry.optimistic.map(o => o.fetchedAt)).toEqual([1, 2]);
+    dispatch({
+      type: actionTypes.SET_RESPONSE,
+      key: 'k',
+      endpoint,
+      args: [1],
+      meta: { fetchedAt: 1 },
+    } as any);
+    expect(registry.optimistic.map(o => o.fetchedAt)).toEqual([2]);
+    expect(buildModel(state, registry).optimistic).toBe(registry.optimistic);
+    dispatch({ type: actionTypes.RESET } as any);
+    expect(registry.optimistic).toEqual([]);
+  });
+
   it('finds changed rows', () => {
     const next = {
       ...state,
diff --git a/website/src/components/Playground/preview/store/Sections.tsx b/website/src/components/Playground/preview/store/Sections.tsx
index 7e809226ae9b..55094a0ea337 100644
--- a/website/src/components/Playground/preview/store/Sections.tsx
+++ b/website/src/components/Playground/preview/store/Sections.tsx
@@ -223,10 +223,7 @@ function OptimisticRow({
         <div className={styles.detail}>
           <Field name="key" node={{ t: 'val', v: action.key }} />
           <Field name="args" node={plain(action.args)} />
-          <Field
-            name="fetchedAt"
-            node={{ t: 'val', v: action.meta.fetchedAt }}
-          />
+          <Field name="fetchedAt" node={{ t: 'val', v: action.fetchedAt }} />
         </div>
       )}
     </>
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index af9440ed11ea..2bb98f60363e 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -4,6 +4,7 @@ import type { State } from '@data-client/react';
 import { forEachRef, resolve, resolveRow, type VNode } from './refs';
 import type {
   EndpointRecord,
+  PendingOptimistic,
   default as SchemaRegistry,
 } from './schemaRegistry';
 
@@ -48,7 +49,7 @@ export interface StoreModel {
   readonly tables: readonly EntityTable[];
   /** Row id → everything that references it */
   readonly referrers: ReadonlyMap<string, readonly Referrer[]>;
-  readonly optimistic: State<unknown>['optimistic'];
+  readonly optimistic: readonly PendingOptimistic[];
   readonly indexes: State<unknown>['indexes'];
   readonly lastReset: number;
 }
@@ -67,9 +68,14 @@ export function buildModel(
       else if (list[list.length - 1].id !== from.id) list.push(from);
     });
 
-  const endpoints = Object.entries(state.endpoints).map(([key, raw]) => {
+  // errors and invalidations can leave meta without a stored response
+  const endpointKeys = new Set([
+    ...Object.keys(state.endpoints),
+    ...Object.keys(state.meta),
+  ]);
+  const endpoints = [...endpointKeys].map(key => {
     const record = registry.endpoints.get(key);
-    const value = resolve(raw, record?.endpoint.schema);
+    const value = resolve(state.endpoints[key], record?.endpoint.schema);
     const row: EndpointRow = {
       id: endpointId(key),
       key,
@@ -108,7 +114,7 @@ export function buildModel(
     endpoints,
     tables,
     referrers,
-    optimistic: state.optimistic,
+    optimistic: registry.optimistic,
     indexes: state.indexes,
     lastReset: state.lastReset,
   };
@@ -143,8 +149,14 @@ export function splitKey(key: string) {
 export function changedIds(prev: State<unknown>, next: State<unknown>) {
   const ids = new Set<string>();
   if (prev === next) return ids;
-  for (const [key, value] of Object.entries(next.endpoints)) {
-    if (prev.endpoints[key] !== value || prev.meta[key] !== next.meta[key])
+  for (const key of new Set([
+    ...Object.keys(next.endpoints),
+    ...Object.keys(next.meta),
+  ])) {
+    if (
+      prev.endpoints[key] !== next.endpoints[key] ||
+      prev.meta[key] !== next.meta[key]
+    )
       ids.add(endpointId(key));
   }
   for (const [key, rows] of Object.entries(next.entities)) {
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 07357f4cbbae..1f8dcbcdcf1a 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -49,7 +49,12 @@ export function resolve(value: unknown, schema: any): VNode {
     return Array.isArray(value) ?
         { t: 'arr', items: value.map(v => resolve(v, schema[0])) }
       : plain(value);
-  if (schema instanceof s.Scalar) return plain(value);
+  // Standalone cells are stored by compound pk; entity-field tuples need
+  // endpoint args to find their cell, so they stay plain
+  if (schema instanceof s.Scalar)
+    return typeof value === 'string' ?
+        { t: 'ref', key: schema.key, pk: value }
+      : plain(value);
   if (isEntityLike(schema))
     return typeof value === 'string' || typeof value === 'number' ?
         { t: 'ref', key: schema.key, pk: `${value}` }
@@ -112,6 +117,17 @@ export function resolveRow(row: unknown, table: any): VNode {
 
 export function plain(value: unknown): VNode {
   if (Array.isArray(value)) return { t: 'arr', items: value.map(plain) };
+  // name, message and stack are not enumerable
+  if (value instanceof Error)
+    return {
+      t: 'obj',
+      entries: [
+        ['name', plain(value.name)],
+        ['message', plain(value.message)],
+        ...Object.entries(value).map(([k, v]) => [k, plain(v)] as const),
+        ['stack', plain(value.stack)],
+      ],
+    };
   if (value && typeof value === 'object' && !(value instanceof Date))
     return {
       t: 'obj',
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index 47f22ceb884e..7bdc47f01ee6 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -12,6 +12,12 @@ export interface EndpointRecord {
   readonly args: readonly unknown[];
 }
 
+export interface PendingOptimistic {
+  readonly key: string;
+  readonly args: readonly unknown[];
+  readonly fetchedAt: number;
+}
+
 /** Remembers each endpoint (and every entity schema reachable from it) as
  * actions pass through, since the store only holds keys and ids.
  * Lives in the preview's DataProvider; extend this manager (rather than
@@ -21,6 +27,9 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
   readonly endpoints = new Map<string, EndpointRecord>();
   /** Entity table key (`state.entities[key]`) → Entity class, Collection or Scalar */
   readonly entities = new Map<string, any>();
+  /** Optimistic updates awaiting their response. The store's own queue is
+   * already applied (and so emptied) in the state components can read. */
+  optimistic: readonly PendingOptimistic[] = [];
 
   middleware: Middleware<ActionTypes> = () => next => action => {
     switch (action.type) {
@@ -32,6 +41,10 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
           args: action.args,
         });
         this.learn(action.endpoint.schema);
+        this.trackOptimistic(action);
+        break;
+      case actionTypes.RESET:
+        this.optimistic = [];
         break;
       case actionTypes.SET:
         this.learn(action.schema);
@@ -42,6 +55,22 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
 
   cleanup() {}
 
+  /** Mirrors core's fetchReducer and filterOptimistic */
+  private trackOptimistic(action: any) {
+    const { key, args, endpoint, meta } = action;
+    if (action.type === actionTypes.FETCH) {
+      if (endpoint.getOptimisticResponse && endpoint.sideEffect)
+        this.optimistic = [
+          ...this.optimistic,
+          { key, args, fetchedAt: meta.fetchedAt },
+        ];
+    } else if (action.type === actionTypes.SET_RESPONSE) {
+      this.optimistic = this.optimistic.filter(
+        o => o.key !== key || o.fetchedAt !== meta.fetchedAt,
+      );
+    }
+  }
+
   learn(schema: any) {
     if (!schema || (typeof schema !== 'object' && typeof schema !== 'function'))
       return;

From db882806a58a8266cd88bd3abe4996fdcc7c8ae5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 02:49:09 +0000
Subject: [PATCH 06/28] fix(website): Stop the Store inspector at cyclic values

Denormalized Returns can contain cycles (bidirectional relationships),
which overflowed plain(). Repeats on the current path now show as
[Circular]. Errors with their own enumerable name or message list it once.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/storeModel.test.ts      | 39 ++++++++++++++-
 .../Playground/preview/store/Value.tsx        |  3 +-
 .../Playground/preview/store/refs.ts          | 47 +++++++++++--------
 3 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 313bd614431d..011218011b76 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -3,7 +3,7 @@ import { Collection, Entity, schema } from '@data-client/endpoint';
 import { actionTypes, type State } from '@data-client/react';
 
 import { buildModel, changedIds, entityId, splitKey } from '../store/model';
-import { plain, resolve, resolveRow } from '../store/refs';
+import { CIRCULAR, plain, resolve, resolveRow } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
 class User extends Entity {
@@ -121,6 +121,43 @@ describe('store model', () => {
     });
   });
 
+  it('keeps own error fields once and stops at cycles', () => {
+    const error = Object.assign(new Error('boom'), { name: 'HttpError' });
+    const keys = (plain(error) as any).entries.map(([k]: any) => k);
+    expect(keys).toEqual(['name', 'message', 'stack']);
+    const post: any = { id: '1', tags: [] };
+    post.author = { id: '2', posts: [post] };
+    post.tags.push(post.tags);
+    const shared = { n: 1 };
+    expect(plain({ post, a: shared, b: shared })).toEqual({
+      t: 'obj',
+      entries: [
+        [
+          'post',
+          {
+            t: 'obj',
+            entries: [
+              ['id', { t: 'val', v: '1' }],
+              ['tags', { t: 'arr', items: [{ t: 'val', v: CIRCULAR }] }],
+              [
+                'author',
+                {
+                  t: 'obj',
+                  entries: [
+                    ['id', { t: 'val', v: '2' }],
+                    ['posts', { t: 'arr', items: [{ t: 'val', v: CIRCULAR }] }],
+                  ],
+                },
+              ],
+            ],
+          },
+        ],
+        ['a', { t: 'obj', entries: [['n', { t: 'val', v: 1 }]] }],
+        ['b', { t: 'obj', entries: [['n', { t: 'val', v: 1 }]] }],
+      ],
+    });
+  });
+
   it('lists endpoints that only have meta', () => {
     const failed = {
       ...state,
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index fdaa701a3234..07966383edfe 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import { entityId } from './model';
-import type { VNode } from './refs';
+import { CIRCULAR, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
@@ -173,6 +173,7 @@ function BlockList({ node }: { node: Extract<VNode, { t: 'arr' }> }) {
 }
 
 function Primitive({ value, name }: { value: unknown; name?: string }) {
+  if (value === CIRCULAR) return <span className={styles.dim}>[Circular]</span>;
   if (value === null || value === undefined)
     return <span className={styles.null}>{String(value)}</span>;
   if (typeof value === 'string')
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 1f8dcbcdcf1a..de819bdddd59 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -115,25 +115,34 @@ export function resolveRow(row: unknown, table: any): VNode {
   return plain(row);
 }
 
-export function plain(value: unknown): VNode {
-  if (Array.isArray(value)) return { t: 'arr', items: value.map(plain) };
-  // name, message and stack are not enumerable
-  if (value instanceof Error)
-    return {
-      t: 'obj',
-      entries: [
-        ['name', plain(value.name)],
-        ['message', plain(value.message)],
-        ...Object.entries(value).map(([k, v]) => [k, plain(v)] as const),
-        ['stack', plain(value.stack)],
-      ],
-    };
-  if (value && typeof value === 'object' && !(value instanceof Date))
-    return {
-      t: 'obj',
-      entries: Object.entries(value).map(([k, v]) => [k, plain(v)]),
-    };
-  return { t: 'val', v: value };
+/** Stands in for an object that contains itself (denormalized cycles) */
+export const CIRCULAR = Symbol('circular');
+
+export function plain(value: unknown, ancestors = new Set<object>()): VNode {
+  if (!value || typeof value !== 'object' || value instanceof Date)
+    return { t: 'val', v: value };
+  if (ancestors.has(value)) return { t: 'val', v: CIRCULAR };
+  ancestors.add(value);
+  const child = (v: unknown) => plain(v, ancestors);
+  let node: VNode;
+  if (Array.isArray(value)) node = { t: 'arr', items: value.map(child) };
+  else {
+    let entries = Object.entries(value);
+    // an Error's name, message and stack are usually not enumerable; a Map
+    // keeps each key once, in first-seen order
+    if (value instanceof Error)
+      entries = [
+        ...new Map([
+          ['name', value.name],
+          ['message', value.message],
+          ...entries,
+          ['stack', value.stack],
+        ]),
+      ];
+    node = { t: 'obj', entries: entries.map(([k, v]) => [k, child(v)]) };
+  }
+  ancestors.delete(value);
+  return node;
 }
 
 export function forEachRef(

From 4fa15a4ebc1b2b8d7ad962b2b41b7c12afed5c78 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 15:45:06 +0000
Subject: [PATCH 07/28] enhance(website): Dive-in Store inspector with paged
 tables and records

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     | 196 ++++++++
 .../preview/__tests__/StoreUI.test.tsx        |   1 +
 .../preview/__tests__/storeModel.test.ts      |  18 +-
 .../Playground/preview/store/Details.tsx      |  27 +-
 .../Playground/preview/store/DiveViews.tsx    | 288 +++++++++++
 .../Playground/preview/store/RootView.tsx     | 265 +++++++++++
 .../Playground/preview/store/StorePanel.tsx   | 321 +++++++++++--
 .../Playground/preview/store/Table.tsx        | 388 +++++++++++++++
 .../Playground/preview/store/TableView.tsx    | 191 --------
 .../Playground/preview/store/TreeView.tsx     |  13 +-
 .../Playground/preview/store/Value.tsx        | 145 +++++-
 .../Playground/preview/store/columns.ts       |  92 ++++
 .../Playground/preview/store/model.ts         | 202 ++++++--
 .../Playground/preview/store/nav.tsx          |  26 +
 .../Playground/preview/store/store.module.css | 448 +++++++++++++++---
 website/src/components/motion/index.ts        |   1 +
 16 files changed, 2258 insertions(+), 364 deletions(-)
 create mode 100644 website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
 create mode 100644 website/src/components/Playground/preview/store/DiveViews.tsx
 create mode 100644 website/src/components/Playground/preview/store/RootView.tsx
 create mode 100644 website/src/components/Playground/preview/store/Table.tsx
 delete mode 100644 website/src/components/Playground/preview/store/TableView.tsx
 create mode 100644 website/src/components/Playground/preview/store/columns.ts
 create mode 100644 website/src/components/Playground/preview/store/nav.tsx

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
new file mode 100644
index 000000000000..f915450ef9a1
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -0,0 +1,196 @@
+/// <reference types="jest" />
+import { Collection, Entity } from '@data-client/endpoint';
+import { StateContext, type State } from '@data-client/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import React from 'react';
+
+import SchemaRegistry from '../store/schemaRegistry';
+import StorePanel from '../store/StorePanel';
+
+jest.mock('../../../../utils/tabStorage', () => ({
+  useTabStorage: () => require('react').useState(null),
+}));
+
+class User extends Entity {
+  id = '';
+  name = '';
+}
+class Post extends Entity {
+  id = '';
+  title = '';
+  body = '';
+  summary = '';
+  author = User.fromJS();
+  tags: string[] = [];
+  static schema = { author: User };
+}
+class Comment extends Entity {
+  id = '';
+  text = '';
+  static schema = {};
+}
+const comments = new Collection([Comment]);
+
+const range = (n: number) => Array.from({ length: n }, (_, i) => `${i + 1}`);
+const posts = Object.fromEntries(
+  range(12).map(id => [
+    id,
+    {
+      id,
+      title: `Post title number ${id} that is long`,
+      body: 'A body that wants plenty of room in its column',
+      summary: 'Another long string field to push columns onto pages',
+      author: '1',
+      tags: ['a', 'b'],
+    },
+  ]),
+);
+const commentIds = range(40);
+
+const state = {
+  meta: {
+    'GET https://example.com/posts': { date: 0, expiresAt: 0 },
+    'GET https://example.com/broken': {
+      date: 0,
+      expiresAt: 0,
+      error: new Error('404 Not Found'),
+    },
+  },
+  entitiesMeta: {
+    Post: { 1: { date: 1, fetchedAt: 1, expiresAt: 2 } },
+  },
+  indexes: {},
+  optimistic: [],
+  lastReset: 0,
+  endpoints: {
+    'GET https://example.com/posts': range(12),
+    'GET https://example.com/comments': '{}',
+  },
+  entities: {
+    User: { 1: { id: '1', name: 'Paul' } },
+    Post: posts,
+    Comment: Object.fromEntries(
+      commentIds.map(id => [id, { id, text: `comment ${id}` }]),
+    ),
+    '[Comment]': { '{}': commentIds },
+  },
+} as unknown as State<unknown>;
+
+function registry() {
+  const r = new SchemaRegistry();
+  r.endpoints.set('GET https://example.com/posts', {
+    endpoint: { schema: [Post] },
+    args: [],
+  });
+  r.endpoints.set('GET https://example.com/comments', {
+    endpoint: { schema: comments },
+    args: [],
+  });
+  r.learn([Post]);
+  r.learn(comments);
+  return r;
+}
+
+const top = () =>
+  document.querySelector<HTMLElement>('[data-level]:not([data-covered])')!;
+const crumbs = () =>
+  [...top().querySelectorAll('nav > *')].map(el => el.textContent);
+const press = (key: string) =>
+  fireEvent.keyDown(document.activeElement ?? top(), { key });
+
+function mount(s = state, r = registry()) {
+  return render(
+    <StateContext.Provider value={s}>
+      <StorePanel registry={r} />
+    </StateContext.Provider>,
+  );
+}
+
+describe('StorePanel table view', () => {
+  it('shows a few rows of every table, Collections after their Entity', () => {
+    mount();
+    const groups = [...top().querySelectorAll('[data-table]')].map(g =>
+      g.getAttribute('data-table'),
+    );
+    expect(groups).toEqual(['User', 'Post', 'Comment', '[Comment]']);
+    const post = within(top().querySelector('[data-table=Post]')!);
+    expect(post.getAllByRole('row').filter(r => r.dataset.id)).toHaveLength(5);
+    expect(post.getByText('7 more')).toBeTruthy();
+    // the error endpoint shows its message
+    expect(screen.getByText('404 Not Found')).toBeTruthy();
+  });
+
+  it('dives into a record and back', () => {
+    mount();
+    fireEvent.click(within(top()).getByText('"Paul"'));
+    expect(crumbs()).toEqual(['State', '›', 'User 1']);
+    expect(within(top()).getByText('used by')).toBeTruthy();
+    // a ref chip dives further
+    fireEvent.click(within(top()).getByRole('button', { name: 'Post 1' }));
+    expect(crumbs()).toEqual(['State', '›', 'User 1', '›', 'Post 1']);
+    act(() => press('Escape'));
+    expect(crumbs()).toEqual(['State', '›', 'User 1']);
+    fireEvent.click(within(top()).getByLabelText('Back'));
+    expect(top().querySelector('nav')).toBeNull();
+  });
+
+  it('lists a whole table with a filter', () => {
+    mount();
+    fireEvent.click(screen.getByText('7 more'));
+    expect(crumbs()).toEqual(['State', '›', 'Post12']);
+    const rows = () =>
+      [...top().querySelectorAll('tr[data-id]')].map(
+        r => r.getAttribute('data-id')?.split('\u001f')[2],
+      );
+    expect(rows()).toHaveLength(12);
+    fireEvent.change(within(top()).getByLabelText('Filter rows'), {
+      target: { value: 'number 1' },
+    });
+    expect(rows()).toEqual(['1', '10', '11', '12']);
+    expect(within(top()).getByText('4 of 12')).toBeTruthy();
+    fireEvent.change(within(top()).getByLabelText('Filter rows'), {
+      target: { value: 'nope' },
+    });
+    expect(within(top()).getByText('no matches')).toBeTruthy();
+  });
+
+  it('pages fields and shows the rest below a row', () => {
+    mount();
+    const post = () => within(top().querySelector('[data-table=Post]')!);
+    const headers = () =>
+      post()
+        .getAllByRole('columnheader')
+        .map(h => h.textContent);
+    expect(headers()).toEqual(['id', 'title', 'body', '']);
+    fireEvent.click(post().getByLabelText('Next fields'));
+    expect(headers()).toEqual(['id', 'summary', 'author', 'tags', '']);
+    fireEvent.click(post().getByLabelText('Previous fields'));
+
+    const more = post().getAllByLabelText(/Show \d+ more fields below/)[0];
+    fireEvent.click(more);
+    expect(post().getByText('summary')).toBeTruthy();
+    fireEvent.click(post().getByLabelText('Hide fields'));
+    expect(post().queryByLabelText('Hide fields')).toBeNull();
+    fireEvent.keyDown(post().getAllByLabelText(/more fields below/)[0], {
+      key: 'Enter',
+    });
+    expect(post().getByLabelText('Hide fields')).toBeTruthy();
+  });
+
+  it('dives into long lists of refs and endpoint lists', () => {
+    mount();
+    const collection = within(top().querySelector('[data-table="[Comment]"]')!);
+    fireEvent.click(collection.getByText(/^\+\d+$/));
+    expect(crumbs()[2]).toMatch(/^\[Comment\] all items40$/);
+    expect(top().querySelectorAll('tr[data-id]').length).toBeGreaterThan(0);
+  });
+
+  it('switches to the tree view', () => {
+    mount();
+    fireEvent.click(screen.getByLabelText('Tree view'));
+    expect(
+      screen.getByLabelText('Tree view').getAttribute('aria-pressed'),
+    ).toBe('true');
+    expect(document.querySelector('[data-table]')).toBeNull();
+  });
+});
diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
index 5f4ff111a45f..8844b011a1ce 100644
--- a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -18,6 +18,7 @@ const table = (key: string): EntityTable => ({
   kind: 'entity',
   rows: [],
   fields: [],
+  get: () => undefined,
 });
 const model = (...keys: string[]) =>
   ({ endpoints: [], tables: keys.map(table) }) as unknown as StoreModel;
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 011218011b76..94fa91c8d899 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -2,7 +2,13 @@
 import { Collection, Entity, schema } from '@data-client/endpoint';
 import { actionTypes, type State } from '@data-client/react';
 
-import { buildModel, changedIds, entityId, splitKey } from '../store/model';
+import {
+  buildModel,
+  changedIds,
+  entityId,
+  referrersOf,
+  splitKey,
+} from '../store/model';
 import { CIRCULAR, plain, resolve, resolveRow } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
@@ -202,15 +208,17 @@ describe('store model', () => {
       registryFor('GET https://example.com/posts', [Post]),
     );
     const labels = (key: string, pk: string) =>
-      model.referrers.get(entityId(key, pk))?.map(r => r.label);
+      referrersOf(model)
+        .get(entityId(key, pk))
+        ?.map(r => r.label);
     expect(labels('Post', '1')).toEqual(['GET /posts']);
     expect(labels('User', '123')).toEqual(['Comment 249', 'Post 1']);
-    expect(labels('Comment', '249')).toEqual(['[Comment] {"postId":"1"}']);
+    expect(labels('Comment', '249')).toEqual(['[Comment] postId: 1']);
     expect(model.tables.map(t => [t.key, t.kind])).toEqual([
       ['User', 'entity'],
       ['Comment', 'entity'],
-      ['Post', 'entity'],
       ['[Comment]', 'collection'],
+      ['Post', 'entity'],
     ]);
   });
 
@@ -220,7 +228,7 @@ describe('store model', () => {
       t: 'arr',
       items: [{ t: 'val', v: '1' }],
     });
-    expect(model.referrers.size).toBe(0);
+    expect(referrersOf(model).size).toBe(0);
   });
 
   it('guesses table kinds without a schema', () => {
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index 6085fcbc40f6..ea58b59b1da1 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -8,11 +8,19 @@ import {
   type EntityRow,
   type Referrer,
 } from './model';
+import { useNav } from './nav';
 import { plain } from './refs';
 import type { EndpointRecord } from './schemaRegistry';
 import { Segmented } from './Sections';
 import styles from './store.module.css';
-import { Block, Field, formatTime, RefChip } from './Value';
+import {
+  Block,
+  CountChip,
+  Field,
+  formatTime,
+  RECORD_REFS,
+  RefChip,
+} from './Value';
 
 type Meta = EndpointRow['meta'];
 
@@ -112,16 +120,22 @@ export function EntityDetail({
 }
 
 function ReferencedBy({
-  referrers,
+  referrers = [],
 }: {
   referrers: readonly Referrer[] | undefined;
 }) {
+  // the table view dives into long lists instead of listing them all
+  const nav = useNav();
+  const shown =
+    nav && referrers.length > RECORD_REFS ?
+      referrers.slice(0, RECORD_REFS)
+    : referrers;
   return (
     <div className={styles.field}>
       <span className={styles.label}>used by</span>
-      {referrers?.length ?
+      {referrers.length ?
         <span className={styles.wrapList}>
-          {referrers.map(r => (
+          {shown.map(r => (
             <RefChip
               key={r.id}
               id={r.id}
@@ -129,6 +143,11 @@ function ReferencedBy({
               className={isEndpointId(r.id) ? styles.endpointRef : undefined}
             />
           ))}
+          {shown.length < referrers.length && (
+            <CountChip ids={referrers.map(r => r.id)} label="used by">
+              +{referrers.length - shown.length}
+            </CountChip>
+          )}
         </span>
       : <span className={styles.dim}>nothing</span>}
     </div>
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
new file mode 100644
index 000000000000..af83480fe3d3
--- /dev/null
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -0,0 +1,288 @@
+import React, {
+  useDeferredValue,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { EndpointDetail, EntityDetail } from './Details';
+import {
+  findRow,
+  isEndpointId,
+  prettyPk,
+  referrersOf,
+  type EndpointRow,
+  type EntityRow,
+  type StoreModel,
+} from './model';
+import { useNav, type View } from './nav';
+import styles from './store.module.css';
+import {
+  endpointColumns,
+  mixedColumns,
+  Pager,
+  RowsTable,
+  tableColumns,
+  type AnyRow,
+  type Column,
+} from './Table';
+
+type ListViewProps = Extract<View, { kind: 'list' }>;
+type Header = (tools?: React.ReactNode) => React.ReactNode;
+
+/** Rows rendered beyond the visible ones, on each side */
+const OVERSCAN = 20;
+/** Row height until one is measured */
+const ROW_GUESS = 28;
+
+/** Every row of a table, or of a list of refs, with a filter. Only rows on
+ * screen render, so it stays fast at any size */
+export function ListView({
+  view,
+  scroller,
+  header,
+}: {
+  view: ListViewProps;
+  scroller: React.RefObject<HTMLElement | null>;
+  header: Header;
+}) {
+  const { model, width, push } = useNav()!;
+  const [filter, setFilter] = useState('');
+  const query = useDeferredValue(filter.trim().toLowerCase());
+  const [page, setPage] = useState(0);
+  const [inline, setInline] = useState<string | null>(null);
+
+  const table = model.tables.find(
+    t => t.key === (view.table ?? tableOf(view.ids)),
+  );
+  const rows = useMemo(
+    () =>
+      view.ids ?
+        view.ids.flatMap(id => findRow(model, id) ?? [])
+      : (table?.rows ?? []),
+    [model, view.ids, table],
+  );
+  const matches = useMemo(
+    () => (query ? rows.filter(row => searchText(row).includes(query)) : rows),
+    [rows, query],
+  );
+
+  let columns: readonly Column<AnyRow>[];
+  let more: ((row: AnyRow) => number) | undefined;
+  let pages: readonly (readonly unknown[])[] = [];
+  if (table) {
+    const fit = tableColumns(table, rows as EntityRow[], width, page, true);
+    columns = fit.columns as unknown as Column<AnyRow>[];
+    more = fit.more as ((row: AnyRow) => number) | undefined;
+    pages = fit.pages;
+  } else if (rows.every(row => isEndpointId(row.id))) {
+    columns = endpointColumns(width) as Column<AnyRow>[];
+  } else {
+    columns = mixedColumns(width);
+  }
+
+  const openIndex = inline ? matches.findIndex(row => row.id === inline) : -1;
+  const { start, end, before, after, spacer } = useWindow(
+    scroller,
+    matches.length,
+    openIndex,
+  );
+  // a new filter starts from the top
+  useLayoutEffect(() => {
+    if (scroller.current) scroller.current.scrollTop = 0;
+  }, [scroller, query]);
+
+  return (
+    <>
+      {header(
+        <>
+          <input
+            className={styles.filter}
+            value={filter}
+            onChange={e => setFilter(e.target.value)}
+            placeholder="filter"
+            aria-label="Filter rows"
+          />
+          <Pager pages={pages} page={page} onChange={setPage} />
+        </>,
+      )}
+      <RowsTable<AnyRow>
+        columns={columns}
+        rows={matches.slice(start, end)}
+        before={before}
+        after={after}
+        beforeRef={spacer}
+        onOpen={row => push({ kind: 'record', id: row.id })}
+        more={more}
+        inline={inline}
+        onInline={setInline}
+        record={row => (
+          <EntityDetail
+            row={row as EntityRow}
+            referrers={referrersOf(model).get(row.id)}
+          />
+        )}
+        foot={
+          query ?
+            <span>
+              {matches.length ?
+                `${matches.length.toLocaleString()} of ${rows.length.toLocaleString()}`
+              : 'no matches'}
+            </span>
+          : null
+        }
+      />
+    </>
+  );
+}
+
+/** The one table every id of `ids` is in, if they share one */
+function tableOf(ids: readonly string[] | undefined) {
+  const [first] = ids ?? [];
+  if (!first || isEndpointId(first)) return;
+  const prefix = first.slice(0, first.indexOf('\u001f', 2) + 1);
+  if (ids!.every(id => id.startsWith(prefix))) return prefix.slice(2, -1);
+}
+
+/** Lowercase text a filter matches against, cached with the stored object */
+const searchCache = new WeakMap<object, string>();
+function searchText(row: AnyRow) {
+  if ('key' in row) return row.key.toLowerCase();
+  const key = row.raw && typeof row.raw === 'object' ? row.raw : null;
+  let text = key && searchCache.get(key);
+  if (text) return text;
+  text = `${prettyPk(row.pk)} ${JSON.stringify(row.raw)}`.toLowerCase();
+  if (key) searchCache.set(key, text);
+  return text;
+}
+
+/** Which of `count` rows are on screen in `scroller`; an open record
+ * (below row `openIndex`) adds its measured height */
+function useWindow(
+  scroller: React.RefObject<HTMLElement | null>,
+  count: number,
+  openIndex: number,
+) {
+  const spacer = useRef<HTMLTableRowElement>(null);
+  const rowHeight = useRef(ROW_GUESS);
+  const extra = useRef(0);
+  const [[start, end], setRange] = useState([0, 2 * OVERSCAN]);
+
+  // measure after each render: a row's height, and the open record's
+  useLayoutEffect(() => {
+    const row = spacer.current?.nextElementSibling as HTMLElement | null;
+    if (row?.offsetHeight) rowHeight.current = row.offsetHeight;
+    const record = spacer.current?.parentElement?.querySelector<HTMLElement>(
+      `.${styles.recordRow}`,
+    );
+    if (record) extra.current = record.offsetHeight;
+  });
+
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el) return;
+    const update = () => {
+      const top = spacer.current;
+      if (!top) return;
+      const base =
+        top.getBoundingClientRect().top -
+        el.getBoundingClientRect().top +
+        el.scrollTop;
+      const y = el.scrollTop - base;
+      const h = rowHeight.current;
+      let first = y / h;
+      if (openIndex >= 0 && first > openIndex + 1)
+        first = (y - extra.current) / h;
+      const from = Math.min(
+        Math.max(0, Math.floor(first) - OVERSCAN),
+        Math.max(0, count - 1),
+      );
+      const to = Math.min(
+        count,
+        from + Math.ceil(el.clientHeight / h) + 2 * OVERSCAN,
+      );
+      setRange(prev =>
+        prev[0] === from && prev[1] === to ? prev : [from, to],
+      );
+    };
+    update();
+    el.addEventListener('scroll', update, { passive: true });
+    const observer =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    return () => {
+      el.removeEventListener('scroll', update);
+      observer?.disconnect();
+    };
+  }, [scroller, count, openIndex]);
+
+  const h = rowHeight.current;
+  return {
+    start,
+    end,
+    before:
+      start * h + (openIndex >= 0 && openIndex < start ? extra.current : 0),
+    after:
+      Math.max(0, count - end) * h + (openIndex >= end ? extra.current : 0),
+    spacer,
+  };
+}
+
+/** One row with everything about it */
+export function RecordView({ id, header }: { id: string; header: Header }) {
+  const { model } = useNav()!;
+  const row = findRow(model, id);
+  return (
+    <>
+      {header()}
+      <div className={styles.record}>
+        {!row ?
+          <span className={styles.dim}>No longer in the store</span>
+        : isEndpointId(id) ?
+          <EndpointDetail row={row as EndpointRow} />
+        : <EntityDetail
+            row={row as EntityRow}
+            referrers={referrersOf(model).get(id)}
+          />
+        }
+      </div>
+    </>
+  );
+}
+
+/** What a breadcrumb shows for a view */
+export function crumbLabel(view: View, model: StoreModel): React.ReactNode {
+  switch (view.kind) {
+    case 'root':
+      return 'State';
+    case 'list': {
+      const count =
+        view.ids?.length ??
+        model.tables.find(t => t.key === view.table)?.rows.length ??
+        0;
+      return (
+        <>
+          <span className={styles.crumbName}>{view.label}</span>
+          <span className={styles.count}>{count.toLocaleString()}</span>
+        </>
+      );
+    }
+    case 'record': {
+      const row = findRow(model, view.id);
+      if (!row) return '…';
+      if ('key' in row)
+        return (
+          <>
+            <span className={styles.method}>{row.method}</span> {row.path}
+          </>
+        );
+      return (
+        <>
+          <span className={styles.crumbName}>{row.table}</span>{' '}
+          <b>{prettyPk(row.pk)}</b>
+        </>
+      );
+    }
+  }
+}
diff --git a/website/src/components/Playground/preview/store/RootView.tsx b/website/src/components/Playground/preview/store/RootView.tsx
new file mode 100644
index 000000000000..3ad52fda0595
--- /dev/null
+++ b/website/src/components/Playground/preview/store/RootView.tsx
@@ -0,0 +1,265 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+
+import { EntityDetail } from './Details';
+import {
+  referrersOf,
+  splitKey,
+  type EntityRow,
+  type EntityTable,
+  type StoreModel,
+} from './model';
+import { useNav } from './nav';
+import { plain } from './refs';
+import styles from './store.module.css';
+import {
+  endpointColumns,
+  Pager,
+  RowsTable,
+  tableColumns,
+  type Column,
+} from './Table';
+import { Field, Inline, Primitive } from './Value';
+
+/** Rows a table shows before "N more"; tables this short show them all */
+const PREVIEW_ROWS = 5;
+const SHOW_ALL_UNDER = 8;
+/** Tables needed before a jump list of them is worth its line */
+const INDEX_OVER = 5;
+
+const preview = <T,>(rows: readonly T[]) =>
+  rows.length > SHOW_ALL_UNDER ? rows.slice(0, PREVIEW_ROWS) : rows;
+
+/** The whole store at a glance: a few rows of everything */
+export default function RootView() {
+  const { model, width, push } = useNav()!;
+  const [closed, setClosed] = useState<ReadonlySet<string>>(
+    () => new Set(['internals']),
+  );
+  const section = (name: string, title: string, count: number | undefined) => ({
+    name,
+    title,
+    count,
+    open: !closed.has(name),
+    onToggle: () =>
+      setClosed(prev => {
+        const next = new Set(prev);
+        if (!next.delete(name)) next.add(name);
+        return next;
+      }),
+  });
+  const entityCount = model.tables.reduce((n, t) => n + t.rows.length, 0);
+  const endpoints = preview(model.endpoints);
+  const hiddenEndpoints = model.endpoints.length - endpoints.length;
+  return (
+    <>
+      {model.optimistic.length > 0 && (
+        <Section
+          {...section('optimistic', 'Optimistic', model.optimistic.length)}
+        >
+          <OptimisticTable model={model} />
+        </Section>
+      )}
+      <Section {...section('endpoints', 'Endpoints', model.endpoints.length)}>
+        {endpoints.length > 0 && (
+          <RowsTable
+            columns={endpointColumns(width)}
+            rows={endpoints}
+            onOpen={row => push({ kind: 'record', id: row.id })}
+            foot={
+              hiddenEndpoints > 0 && (
+                <button
+                  type="button"
+                  onClick={() =>
+                    push({
+                      kind: 'list',
+                      label: 'Endpoints',
+                      ids: model.endpoints.map(e => e.id),
+                    })
+                  }
+                >
+                  {hiddenEndpoints.toLocaleString()} more
+                </button>
+              )
+            }
+          />
+        )}
+      </Section>
+      <Section {...section('entities', 'Entities', entityCount)}>
+        {model.tables.length > INDEX_OVER && <TableIndex model={model} />}
+        {model.tables.map(table => (
+          <Group key={table.key} table={table} />
+        ))}
+      </Section>
+      <Section {...section('internals', 'Internals', undefined)}>
+        <div className={styles.detail}>
+          <Field name="lastReset" node={{ t: 'val', v: model.lastReset }} />
+          <Field name="indexes" node={plain(model.indexes)} />
+        </div>
+      </Section>
+    </>
+  );
+}
+
+function Section({
+  name,
+  title,
+  count,
+  open,
+  onToggle,
+  children,
+}: {
+  name: string;
+  title: string;
+  count: number | undefined;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className={styles.section} data-section={name}>
+      <button
+        type="button"
+        className={clsx(styles.sectionHeader, !open && styles.closed)}
+        aria-expanded={open}
+        onClick={onToggle}
+      >
+        {title}
+        {count !== undefined && (
+          <span className={styles.count}>{count.toLocaleString()}</span>
+        )}
+      </button>
+      {open && children}
+    </section>
+  );
+}
+
+/** Jumps to a table further down */
+function TableIndex({ model }: { model: StoreModel }) {
+  return (
+    <div className={styles.tableIndex}>
+      {model.tables.map(table => (
+        <button
+          key={table.key}
+          type="button"
+          onClick={e => {
+            const scroller =
+              e.currentTarget.closest<HTMLElement>('[data-level]');
+            const group = scroller?.querySelector<HTMLElement>(
+              `[data-table="${CSS.escape(table.key)}"]`,
+            );
+            if (!scroller || !group) return;
+            scroller.scrollTo({
+              top:
+                group.getBoundingClientRect().top -
+                scroller.getBoundingClientRect().top +
+                scroller.scrollTop,
+              behavior: 'smooth',
+            });
+          }}
+        >
+          {table.key}
+          <span className={styles.count}>
+            {table.rows.length.toLocaleString()}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** One table: a few rows, its fields paged to fit (the pager shows on hover,
+ * or after tapping the header on touch) */
+function Group({ table }: { table: EntityTable }) {
+  const { model, width, push } = useNav()!;
+  const [page, setPage] = useState(0);
+  const [inline, setInline] = useState<string | null>(null);
+  const [active, setActive] = useState(false);
+  const rows = preview(table.rows);
+  const { columns, pages, more } = tableColumns(table, table.rows, width, page);
+  const hidden = table.rows.length - rows.length;
+  return (
+    <div
+      className={styles.group}
+      data-table={table.key}
+      data-active={active || undefined}
+    >
+      <div className={styles.groupHeader} onClick={() => setActive(a => !a)}>
+        <span className={styles.type}>{table.key}</span>
+        <span className={styles.count}>
+          {table.rows.length.toLocaleString()}
+        </span>
+        {table.kind === 'collection' && (
+          <span className={styles.kind}>Collection</span>
+        )}
+        <span className={styles.tool}>
+          <Pager pages={pages} page={page} onChange={setPage} />
+        </span>
+      </div>
+      <RowsTable<EntityRow>
+        columns={columns}
+        rows={rows}
+        onOpen={row => push({ kind: 'record', id: row.id })}
+        more={more}
+        inline={inline}
+        onInline={setInline}
+        record={row => (
+          <EntityDetail row={row} referrers={referrersOf(model).get(row.id)} />
+        )}
+        foot={
+          hidden > 0 && (
+            <button
+              type="button"
+              onClick={() =>
+                push({ kind: 'list', table: table.key, label: table.key })
+              }
+            >
+              {hidden.toLocaleString()} more
+            </button>
+          )
+        }
+      />
+    </div>
+  );
+}
+
+type Optimistic = StoreModel['optimistic'][number] & { id: string };
+
+/** Updates applied ahead of their response */
+function OptimisticTable({ model }: { model: StoreModel }) {
+  const columns: Column<Optimistic>[] = [
+    {
+      id: 'key',
+      header: 'key',
+      width: '40%',
+      cell: ({ key }) => {
+        const { method, path } = splitKey(key);
+        return (
+          <span title={key}>
+            <span className={clsx(styles.method, styles.optimistic)}>
+              {method}
+            </span>{' '}
+            {path}
+          </span>
+        );
+      },
+    },
+    {
+      id: 'args',
+      header: 'args',
+      cell: ({ args }) => <Inline node={plain(args)} />,
+    },
+    {
+      id: 'fetchedAt',
+      header: 'sent',
+      width: 124,
+      cell: ({ fetchedAt }) => <Primitive value={fetchedAt} name="fetchedAt" />,
+    },
+  ];
+  return (
+    <RowsTable
+      columns={columns}
+      rows={model.optimistic.map((o, i) => ({ ...o, id: `o\u001f${i}` }))}
+    />
+  );
+}
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 91c18e30ba92..612fa8c8b82b 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -1,70 +1,295 @@
 import { StateContext, type State } from '@data-client/react';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { buildModel, changedIds } from './model';
+import { crumbLabel, ListView, RecordView } from './DiveViews';
+import { buildModel, changedIds, type StoreModel } from './model';
+import { NavContext, type Nav, type View } from './nav';
+import RootView from './RootView';
 import type SchemaRegistry from './schemaRegistry';
-import { Segmented } from './Sections';
 import styles from './store.module.css';
 import { StoreUIProvider } from './StoreUI';
-import TableView from './TableView';
 import TreeView from './TreeView';
 import { useTabStorage } from '../../../../utils/tabStorage';
+import { springEasing, springs } from '../../../motion';
 
-type View = 'table' | 'tree';
-/** Rough width of one table column, used to decide how many fit */
-const COLUMN_WIDTH = 120;
+interface Entry {
+  readonly key: number;
+  readonly view: View;
+}
+/** Breadcrumbs shown before the middle ones collapse to `…` */
+const CRUMBS = 4;
 
 export default function StorePanel({ registry }: { registry: SchemaRegistry }) {
   const state = useContext(StateContext);
   const model = useMemo(() => buildModel(state, registry), [state, registry]);
   const [stored, setView] = useTabStorage('playgroundStoreView');
-  const view: View = stored === 'tree' ? 'tree' : 'table';
+  const tree = stored === 'tree';
 
-  const scroller = useRef<HTMLDivElement>(null);
-  const maxColumns = useColumnCount(scroller);
-  useFlashChanges(scroller, state);
+  const panel = useRef<HTMLDivElement>(null);
+  const width = useWidth(panel);
+  useFlashChanges(panel, state);
+
+  return (
+    <div className={styles.store} ref={panel}>
+      <div className={styles.bar}>
+        <span className={styles.tab} aria-current="page">
+          State
+        </span>
+        <span className={clsx(styles.tab, styles.later)} title="Coming later">
+          Actions <span className={styles.laterTag}>later</span>
+        </span>
+        <span
+          className={styles.viewButtons}
+          role="group"
+          aria-label="Store view"
+        >
+          <button
+            type="button"
+            aria-label="Table view"
+            title="Table view"
+            aria-pressed={!tree}
+            onClick={() => setView('table')}
+          >
+            <TableIcon />
+          </button>
+          <button
+            type="button"
+            aria-label="Tree view"
+            title="Tree view"
+            aria-pressed={tree}
+            onClick={() => setView('tree')}
+          >
+            <TreeIcon />
+          </button>
+        </span>
+      </div>
+      {tree ?
+        <TreeLevel model={model} />
+      : <Levels model={model} width={width} />}
+    </div>
+  );
+}
+
+/** The table view: a stack of full-panel levels. Covered levels stay
+ * mounted (hidden), so going back keeps their scroll, pages and filters */
+function Levels({ model, width }: { model: StoreModel; width: number }) {
+  const [stack, setStack] = useState<readonly Entry[]>([
+    { key: 0, view: { kind: 'root' } },
+  ]);
+  const nextKey = useRef(1);
+  const push = useCallback((view: View) => {
+    const key = nextKey.current++;
+    setStack(prev => [...prev, { key, view }]);
+  }, []);
+  const nav = useMemo<Nav>(
+    () => ({ model, width, push }),
+    [model, width, push],
+  );
+  // the row a record was opened from flashes once you're back
+  const returnTo = useRef<string | null>(null);
+  const back = useCallback((depth: number) => {
+    setStack(prev => {
+      const left = prev[depth];
+      returnTo.current = left?.view.kind === 'record' ? left.view.id : null;
+      return prev.slice(0, Math.max(1, depth));
+    });
+  }, []);
+
+  const crumbs = (depth: number, tools?: React.ReactNode) => {
+    const shown = stack.slice(0, depth + 1);
+    const items =
+      shown.length > CRUMBS ?
+        [0, -1, shown.length - 2, shown.length - 1]
+      : shown.map((_, i) => i);
+    return (
+      <div className={styles.crumbs}>
+        <button
+          type="button"
+          className={styles.back}
+          aria-label="Back"
+          onClick={() => back(depth)}
+        >
+          ‹
+        </button>
+        <nav className={styles.crumbList} aria-label="Store location">
+          {items.map((i, n) => (
+            <React.Fragment key={i}>
+              {n > 0 && <span className={styles.sep}>›</span>}
+              {i < 0 ?
+                <span className={styles.sep}>…</span>
+              : i === depth ?
+                <span className={styles.crumbCurrent} aria-current="page">
+                  {crumbLabel(shown[i].view, model)}
+                </span>
+              : <button
+                  type="button"
+                  className={styles.crumb}
+                  onClick={() => back(i + 1)}
+                >
+                  {crumbLabel(shown[i].view, model)}
+                </button>
+              }
+            </React.Fragment>
+          ))}
+        </nav>
+        {tools && <span className={styles.tools}>{tools}</span>}
+      </div>
+    );
+  };
+
+  return (
+    <NavContext.Provider value={nav}>
+      <div className={styles.levels}>
+        {stack.map((entry, depth) => (
+          <Level
+            key={entry.key}
+            depth={depth}
+            top={depth === stack.length - 1}
+            onBack={back}
+            returnTo={returnTo}
+          >
+            {scroller =>
+              entry.view.kind === 'root' ? <RootView />
+              : entry.view.kind === 'list' ?
+                <ListView
+                  view={entry.view}
+                  scroller={scroller}
+                  header={tools => crumbs(depth, tools)}
+                />
+              : <RecordView id={entry.view.id} header={() => crumbs(depth)} />
+            }
+          </Level>
+        ))}
+      </div>
+    </NavContext.Provider>
+  );
+}
 
+/** One scrolling level; slides in when pushed, and back in from the other
+ * side when what covered it closes */
+function Level({
+  depth,
+  top,
+  onBack,
+  returnTo,
+  children,
+}: {
+  depth: number;
+  top: boolean;
+  onBack: (depth: number) => void;
+  returnTo: React.RefObject<string | null>;
+  children: (
+    scroller: React.RefObject<HTMLDivElement | null>,
+  ) => React.ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const wasTop = useRef<boolean | null>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    const before = wasTop.current;
+    wasTop.current = top;
+    if (!el || !top || before === true || (before === null && !depth)) return;
+    // keyboard focus follows, so Escape goes back
+    el.focus({ preventScroll: true });
+    slide(el, before === null ? 1 : -1);
+    if (before === false && returnTo.current) {
+      flash(el, new Set([returnTo.current]));
+      returnTo.current = null;
+    }
+  }, [top, depth, returnTo]);
+  return (
+    <div
+      ref={ref}
+      className={styles.level}
+      data-level
+      data-covered={!top || undefined}
+      inert={!top}
+      tabIndex={-1}
+      onKeyDown={e => {
+        if (e.key === 'Escape' && depth > 0) {
+          e.preventDefault();
+          onBack(depth);
+        }
+      }}
+    >
+      {children(ref)}
+    </div>
+  );
+}
+
+/** Moves in from `direction` (1: the right, -1: the left) */
+function slide(el: HTMLElement, direction: 1 | -1) {
+  if (typeof el.animate !== 'function' || reducedMotion()) return;
+  el.animate(
+    [
+      { opacity: 0, translate: `${direction * 24}px 0` },
+      { opacity: 1, translate: '0 0' },
+    ],
+    smooth,
+  );
+}
+const smooth = springEasing(springs.smooth);
+const reducedMotion = () =>
+  matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/** Highlights the rows of `ids` in `scope` for a moment */
+function flash(scope: HTMLElement, ids: ReadonlySet<string>) {
+  if (!ids.size || typeof scope.animate !== 'function' || reducedMotion())
+    return;
+  for (const row of scope.querySelectorAll<HTMLElement>('[data-id]')) {
+    if (!ids.has(row.dataset.id!)) continue;
+    row.animate(
+      [
+        { backgroundColor: 'var(--store-flash)' },
+        { backgroundColor: 'transparent' },
+      ],
+      { duration: 1400, easing: 'ease-out' },
+    );
+  }
+}
+
+/** The explorer: everything expands in place */
+function TreeLevel({ model }: { model: StoreModel }) {
+  const scroller = useRef<HTMLDivElement>(null);
   const [pending, setPending] = useState<string | null>(null);
   useEffect(() => {
     if (!pending || !scroller.current) return;
     scrollToRow(scroller.current, pending);
     setPending(null);
   }, [pending]);
-
   return (
     <StoreUIProvider model={model} onReveal={setPending}>
-      <div className={styles.store} ref={scroller}>
-        <div className={styles.toolbar}>
-          <Segmented
-            label="Store view"
-            options={{ table: 'Table', tree: 'Tree' }}
-            value={view}
-            onChange={setView}
-          />
+      <div className={styles.levels}>
+        <div className={styles.level} ref={scroller}>
+          <TreeView model={model} />
         </div>
-        {view === 'table' ?
-          <TableView model={model} maxColumns={maxColumns} />
-        : <TreeView model={model} />}
       </div>
     </StoreUIProvider>
   );
 }
 
-/** Table field columns that fit; re-renders only when the count changes */
-function useColumnCount(ref: React.RefObject<HTMLElement | null>) {
-  const [count, setCount] = useState(2);
+/** Panel width; re-renders only when it changes */
+function useWidth(ref: React.RefObject<HTMLElement | null>) {
+  const [width, setWidth] = useState(560);
   useEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === 'undefined') return;
     const observer = new ResizeObserver(([entry]) =>
-      setCount(
-        Math.max(1, Math.floor((entry.contentRect.width - 80) / COLUMN_WIDTH)),
-      ),
+      setWidth(Math.round(entry.contentRect.width)),
     );
     observer.observe(el);
     return () => observer.disconnect();
   }, [ref]);
-  return count;
+  return width;
 }
 
 /** Briefly highlights rows whose stored value changed since the last state */
@@ -77,20 +302,8 @@ function useFlashChanges(
     const before = prev.current;
     prev.current = state;
     const el = ref.current;
-    if (!el || before === state || typeof el.animate !== 'function') return;
-    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-    const ids = changedIds(before, state);
-    if (!ids.size) return;
-    for (const row of el.querySelectorAll<HTMLElement>('[data-id]')) {
-      if (!ids.has(row.dataset.id as string)) continue;
-      row.animate(
-        [
-          { backgroundColor: 'var(--store-flash)' },
-          { backgroundColor: 'transparent' },
-        ],
-        { duration: 1400, easing: 'ease-out' },
-      );
-    }
+    if (!el || before === state) return;
+    flash(el, changedIds(before, state));
   }, [ref, state]);
 }
 
@@ -103,7 +316,23 @@ function scrollToRow(scroller: HTMLElement, id: string) {
     row.getBoundingClientRect().top -
     scroller.getBoundingClientRect().top +
     scroller.scrollTop;
-  // leave room for the sticky toolbar and section header
-  scroller.scrollTo({ top: Math.max(0, top - 64), behavior: 'smooth' });
+  // leave room for the section header
+  scroller.scrollTo({ top: Math.max(0, top - 32), behavior: 'smooth' });
   row.focus({ preventScroll: true });
 }
+
+function TableIcon() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <rect x="2" y="3" width="12" height="10" rx="1" />
+      <path d="M2 6.5h12M2 9.5h12M6 3v10" />
+    </svg>
+  );
+}
+function TreeIcon() {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M3 3.5h10M4.5 5.5v7M4.5 8.5h8.5M4.5 12.5h8.5" />
+    </svg>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
new file mode 100644
index 000000000000..f78aaa33c3aa
--- /dev/null
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -0,0 +1,388 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import {
+  columnWidth,
+  idWidth,
+  MORE_WIDTH,
+  pageColumns,
+  type ColumnSize,
+} from './columns';
+import { Status } from './Details';
+import {
+  isEndpointId,
+  prettyPk,
+  type EndpointRow,
+  type EntityRow,
+  type EntityTable,
+} from './model';
+import type { VNode } from './refs';
+import styles from './store.module.css';
+import { Cell, Inline, Primitive, RefChip } from './Value';
+
+export type AnyRow = EndpointRow | EntityRow;
+
+export interface Column<R> {
+  readonly id: string;
+  readonly header: React.ReactNode;
+  /** px, or a percentage; the column without one takes the rest */
+  readonly width?: number | string;
+  readonly className?: string;
+  readonly cell: (row: R) => React.ReactNode;
+}
+
+/** Rows that open their record on click; `more` adds a `+N` column that
+ * shows the fields not on screen below the row instead */
+export function RowsTable<R extends { readonly id: string }>({
+  columns,
+  rows,
+  onOpen,
+  more,
+  inline,
+  onInline,
+  record,
+  foot,
+  before = 0,
+  after = 0,
+  beforeRef,
+}: {
+  columns: readonly Column<R>[];
+  rows: readonly R[];
+  onOpen?: (row: R) => void;
+  more?: (row: R) => number;
+  inline?: string | null;
+  onInline?: (id: string | null) => void;
+  record?: (row: R) => React.ReactNode;
+  foot?: React.ReactNode;
+  /** Heights (px) of rows left out above and below a window */
+  before?: number;
+  after?: number;
+  beforeRef?: React.Ref<HTMLTableRowElement>;
+}) {
+  const span = columns.length + (more ? 1 : 0);
+  return (
+    <table className={styles.table}>
+      <colgroup>
+        {columns.map(c => (
+          <col key={c.id} style={{ width: c.width }} />
+        ))}
+        {more && <col style={{ width: MORE_WIDTH }} />}
+      </colgroup>
+      <thead>
+        <tr>
+          {columns.map(c => (
+            <th key={c.id} className={c.className}>
+              {c.header}
+            </th>
+          ))}
+          {more && <th />}
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          ref={beforeRef}
+          className={styles.spacer}
+          style={{ height: before }}
+        />
+        {rows.map(row => {
+          const open = inline === row.id;
+          return (
+            <React.Fragment key={row.id}>
+              <tr
+                data-id={row.id}
+                tabIndex={onOpen ? 0 : undefined}
+                className={clsx(
+                  styles.row,
+                  !onOpen && styles.inertRow,
+                  open && styles.selected,
+                )}
+                onClick={onOpen && (() => onOpen(row))}
+                onKeyDown={
+                  onOpen &&
+                  (e => {
+                    if (e.target === e.currentTarget && e.key === 'Enter')
+                      onOpen(row);
+                  })
+                }
+              >
+                {columns.map(c => (
+                  <td key={c.id} className={c.className}>
+                    {c.cell(row)}
+                  </td>
+                ))}
+                {more && (
+                  <MoreCell
+                    count={more(row)}
+                    open={open}
+                    onClick={() => onInline?.(open ? null : row.id)}
+                  />
+                )}
+              </tr>
+              {open && record && (
+                <tr className={styles.recordRow}>
+                  <td colSpan={span}>{record(row)}</td>
+                </tr>
+              )}
+            </React.Fragment>
+          );
+        })}
+        <tr className={styles.spacer} style={{ height: after }} />
+        {foot && (
+          <tr className={styles.foot}>
+            <td colSpan={span}>{foot}</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}
+
+function MoreCell({
+  count,
+  open,
+  onClick,
+}: {
+  count: number;
+  open: boolean;
+  onClick: () => void;
+}) {
+  if (!count && !open) return <td />;
+  return (
+    <td
+      className={styles.moreCell}
+      data-hint={open ? 'hide' : 'show below'}
+      role="button"
+      tabIndex={0}
+      aria-expanded={open}
+      aria-label={open ? 'Hide fields' : `Show ${count} more fields below`}
+      onClick={e => {
+        e.stopPropagation();
+        onClick();
+      }}
+      onKeyDown={e => {
+        if (e.key !== 'Enter' && e.key !== ' ') return;
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {open ? '×' : `+${count}`}
+    </td>
+  );
+}
+
+/** `‹ 1–4 of 9 ›` */
+export function Pager({
+  pages,
+  page,
+  onChange,
+}: {
+  pages: readonly (readonly unknown[])[];
+  page: number;
+  onChange: (page: number) => void;
+}) {
+  if (pages.length < 2) return null;
+  const first = pages.slice(0, page).reduce((n, p) => n + p.length, 1);
+  const total = pages.reduce((n, p) => n + p.length, 0);
+  return (
+    <span className={styles.pager}>
+      <button
+        type="button"
+        aria-label="Previous fields"
+        disabled={page === 0}
+        onClick={e => {
+          e.stopPropagation();
+          onChange(page - 1);
+        }}
+      >
+        ‹
+      </button>
+      {pages[page].length > 1 ?
+        `${first}–${first + pages[page].length - 1}`
+      : first}{' '}
+      of {total}
+      <button
+        type="button"
+        aria-label="Next fields"
+        disabled={page === pages.length - 1}
+        onClick={e => {
+          e.stopPropagation();
+          onChange(page + 1);
+        }}
+      >
+        ›
+      </button>
+    </span>
+  );
+}
+
+const VALUE = '';
+/** A time of day, `3:38:36.875 PM` */
+const TIME_WIDTH = 124;
+const META = 'meta\u001f';
+const metaFields = { fetchedAt: 'fetched', expiresAt: 'expires' } as const;
+const keyLabel = {
+  entity: 'id',
+  collection: 'args',
+  scalar: 'cell',
+  unknown: 'key',
+} as const;
+
+function field(node: VNode, name: string): VNode | undefined {
+  if (name === VALUE) return node;
+  if (node.t !== 'obj') return;
+  return node.entries.find(([k]) => k === name)?.[1];
+}
+
+/**
+ * Columns of `table` that fit `width`, as pages. Entities get a column per
+ * field, other tables one value column; `withMeta` adds when each row was
+ * fetched and expires.
+ */
+export function tableColumns(
+  table: EntityTable,
+  rows: readonly EntityRow[],
+  width: number,
+  page: number,
+  withMeta = false,
+) {
+  const narrow = width < 480;
+  const fields = table.kind === 'entity' ? table.fields : [VALUE];
+  const sizes: ColumnSize[] = fields.map(f => ({
+    id: f,
+    width: columnWidth(rows, row => field(row.value, f), f, narrow),
+  }));
+  if (withMeta)
+    for (const f of Object.keys(metaFields))
+      sizes.push({ id: META + f, width: TIME_WIDTH });
+  const keyWidth =
+    table.kind === 'entity' ?
+      idWidth(rows)
+    : Math.min(idWidth(rows) + 40, Math.round(width * 0.4));
+  const pages = pageColumns(sizes, keyWidth, width);
+  const current = pages[Math.min(page, pages.length - 1)];
+  // columns share the room left by the key (and +N) in proportion to what
+  // they want; the last one has no width, so it absorbs rounding
+  const room = width - keyWidth - (pages.length > 1 ? MORE_WIDTH : 0);
+  const scale = room / current.reduce((w, c) => w + c.width, 0);
+  const shown = new Set(current.map(c => c.id));
+  const columns: Column<EntityRow>[] = [
+    {
+      id: 'key',
+      header: keyLabel[table.kind],
+      width: keyWidth,
+      className: styles.key,
+      cell: row => prettyPk(row.pk),
+    },
+    ...current.map((c): Column<EntityRow> => ({
+      id: c.id,
+      header:
+        c.id.startsWith(META) ?
+          metaFields[c.id.slice(META.length) as keyof typeof metaFields]
+        : c.id || (table.kind === 'collection' ? 'items' : 'value'),
+      width: c === current[current.length - 1] ? undefined : c.width * scale,
+      cell:
+        c.id.startsWith(META) ?
+          row => {
+            const name = c.id.slice(META.length);
+            const v = row.meta?.[name as keyof typeof metaFields];
+            return v === undefined ? null : <Primitive value={v} name={name} />;
+          }
+        : row => {
+            const node = field(row.value, c.id);
+            return (
+              node && (
+                <Cell
+                  node={node}
+                  name={c.id || 'items'}
+                  width={c.width * scale}
+                  owner={`${table.key} ${prettyPk(row.pk)}`}
+                />
+              )
+            );
+          },
+    })),
+  ];
+  const more =
+    pages.length > 1 ?
+      (row: EntityRow) => {
+        if (table.kind !== 'entity') return shown.has(VALUE) ? 0 : 1;
+        if (row.value.t !== 'obj') return 0;
+        return row.value.entries.filter(([k]) => k !== 'id' && !shown.has(k))
+          .length;
+      }
+    : undefined;
+  return { columns, pages, more };
+}
+
+export function endpointColumns(width: number): Column<EndpointRow>[] {
+  const keyWidth = Math.round(width * 0.4);
+  const statusWidth = 96;
+  return [
+    {
+      id: 'key',
+      header: 'key',
+      width: keyWidth,
+      cell: row => (
+        <span title={row.key}>
+          <span className={styles.method}>{row.method}</span> {row.path}
+        </span>
+      ),
+    },
+    {
+      id: 'status',
+      header: 'status',
+      width: statusWidth,
+      cell: row => <Status meta={row.meta} />,
+    },
+    {
+      id: 'value',
+      header: 'value',
+      cell: row =>
+        row.meta?.error && row.value.t === 'val' && row.value.v === undefined ?
+          <span className={styles.null}>{errorText(row.meta.error)}</span>
+        : <Cell
+            node={row.value}
+            name="value"
+            width={width - keyWidth - statusWidth}
+            owner={`${row.method} ${row.path}`}
+          />,
+    },
+  ];
+}
+
+function errorText(error: unknown) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+/** For lists that mix tables: each row as a ref, then its value */
+export function mixedColumns(width: number): Column<AnyRow>[] {
+  return [
+    {
+      id: 'ref',
+      header: 'row',
+      width: Math.round(width * 0.35),
+      cell: row =>
+        isEndpointId(row.id) ?
+          <RefChip
+            id={row.id}
+            className={styles.endpointRef}
+            label={`${(row as EndpointRow).method} ${(row as EndpointRow).path}`}
+          />
+        : <RefChip
+            id={row.id}
+            label={
+              <>
+                {(row as EntityRow).table}{' '}
+                <b>{prettyPk((row as EntityRow).pk)}</b>
+              </>
+            }
+          />,
+    },
+    {
+      id: 'value',
+      header: 'value',
+      cell: row => <Inline node={row.value} bare />,
+    },
+  ];
+}
diff --git a/website/src/components/Playground/preview/store/TableView.tsx b/website/src/components/Playground/preview/store/TableView.tsx
deleted file mode 100644
index 386d5d429ca7..000000000000
--- a/website/src/components/Playground/preview/store/TableView.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import { EndpointDetail, EntityDetail, Status } from './Details';
-import type { EndpointRow, EntityRow, EntityTable, StoreModel } from './model';
-import type { VNode } from './refs';
-import {
-  Chevron,
-  EndpointLabel,
-  GroupLabel,
-  StoreSections,
-  useLimitedRows,
-  useRowProps,
-} from './Sections';
-import styles from './store.module.css';
-import { groupId, useStoreUI } from './StoreUI';
-import { Inline, prettyPk } from './Value';
-
-/** Each Entity type is a table; fields that don't fit move into the row's
- * expanded detail rather than scrolling sideways */
-export default function TableView({
-  model,
-  maxColumns,
-}: {
-  model: StoreModel;
-  maxColumns: number;
-}) {
-  return (
-    <StoreSections
-      model={model}
-      endpoints={
-        <table className={styles.table}>
-          <tbody>
-            {model.endpoints.map(row => (
-              <EndpointTableRow key={row.id} row={row} />
-            ))}
-          </tbody>
-        </table>
-      }
-      renderTable={table => (
-        <EntityGroup
-          key={table.key}
-          table={table}
-          model={model}
-          maxColumns={maxColumns}
-        />
-      )}
-    />
-  );
-}
-
-function EndpointTableRow({ row }: { row: EndpointRow }) {
-  const { open, props } = useRowProps(row.id);
-  return (
-    <>
-      <tr {...props}>
-        <td className={styles.endpointCell} title={row.key}>
-          <EndpointLabel row={row} open={open} />
-        </td>
-        <td>
-          <Inline node={row.value} />
-        </td>
-        <td className={styles.statusCell}>
-          <Status meta={row.meta} />
-        </td>
-      </tr>
-      {open && (
-        <tr className={styles.detailRow}>
-          <td colSpan={3}>
-            <EndpointDetail row={row} />
-          </td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-const VALUE_COLUMN = '';
-const pkLabel = {
-  entity: 'id',
-  collection: 'args',
-  scalar: 'cell',
-  unknown: 'key',
-} as const;
-
-function EntityGroup({
-  table,
-  model,
-  maxColumns,
-}: {
-  table: EntityTable;
-  model: StoreModel;
-  maxColumns: number;
-}) {
-  const { isOpen, toggle } = useStoreUI();
-  const open = isOpen(groupId(table.key));
-  const { shown, footer } = useLimitedRows(table.key, table.rows);
-  // Entities get a column per field that fits; other tables one value column
-  const columns =
-    table.kind === 'entity' ?
-      table.fields.slice(0, maxColumns)
-    : [VALUE_COLUMN];
-  const hidden =
-    table.kind === 'entity' ? table.fields.length - columns.length : 0;
-  return (
-    <div className={styles.group}>
-      <button
-        type="button"
-        className={styles.groupHeader}
-        aria-expanded={open}
-        onClick={() => toggle(groupId(table.key))}
-      >
-        <GroupLabel table={table} open={open} />
-        {open && hidden > 0 && (
-          <span className={styles.hint}>
-            +{hidden} field{hidden === 1 ? '' : 's'} when expanded
-          </span>
-        )}
-      </button>
-      {open && (
-        <>
-          <table className={styles.table}>
-            <thead>
-              <tr>
-                <th
-                  className={
-                    table.kind === 'entity' ? styles.pkCell : styles.argsCell
-                  }
-                >
-                  {pkLabel[table.kind]}
-                </th>
-                {columns.map(c => (
-                  <th key={c}>{c}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {shown.map(row => (
-                <EntityTableRow
-                  key={row.id}
-                  row={row}
-                  columns={columns}
-                  model={model}
-                />
-              ))}
-            </tbody>
-          </table>
-          {footer}
-        </>
-      )}
-    </div>
-  );
-}
-
-function EntityTableRow({
-  row,
-  columns,
-  model,
-}: {
-  row: EntityRow;
-  columns: readonly string[];
-  model: StoreModel;
-}) {
-  const { open, props } = useRowProps(row.id);
-  return (
-    <>
-      <tr {...props}>
-        <td className={clsx(styles.pkCell, styles.key)}>
-          <Chevron open={open} />
-          {prettyPk(row.pk)}
-        </td>
-        {columns.map(c => {
-          const node = c === VALUE_COLUMN ? row.value : field(row.value, c);
-          return <td key={c}>{node && <Inline node={node} name={c} />}</td>;
-        })}
-      </tr>
-      {open && (
-        <tr className={styles.detailRow}>
-          <td colSpan={columns.length + 1}>
-            <EntityDetail row={row} referrers={model.referrers.get(row.id)} />
-          </td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-function field(node: VNode, name: string): VNode | undefined {
-  if (node.t !== 'obj') return;
-  return node.entries.find(([k]) => k === name)?.[1];
-}
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 979608ef9898..7b1551519266 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 
 import { EndpointDetail, EntityDetail, Status } from './Details';
-import type { EndpointRow, EntityRow, EntityTable, StoreModel } from './model';
+import {
+  prettyPk,
+  referrersOf,
+  type EndpointRow,
+  type EntityRow,
+  type EntityTable,
+  type StoreModel,
+} from './model';
 import {
   Chevron,
   EndpointLabel,
@@ -12,7 +19,7 @@ import {
 } from './Sections';
 import styles from './store.module.css';
 import { groupId } from './StoreUI';
-import { Inline, prettyPk } from './Value';
+import { Inline } from './Value';
 
 /** Explorer: one line per row with a preview of its fields */
 export default function TreeView({ model }: { model: StoreModel }) {
@@ -85,7 +92,7 @@ function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
       </div>
       {open && (
         <div className={styles.indent}>
-          <EntityDetail row={row} referrers={model.referrers.get(row.id)} />
+          <EntityDetail row={row} referrers={referrersOf(model).get(row.id)} />
         </div>
       )}
     </>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 07966383edfe..593cc7057f9a 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -1,13 +1,16 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { entityId } from './model';
+import { entityId, prettyPk } from './model';
+import { useNav } from './nav';
 import { CIRCULAR, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
 /** Items shown before a "N more" button in expanded values */
 const BLOCK_LIMIT = 20;
+/** Refs listed in a record before a count chip that dives into all of them */
+export const RECORD_REFS = 10;
 /** Items shown inline (table cells, tree previews) before "+N" */
 const INLINE_LIMIT = 3;
 
@@ -21,13 +24,15 @@ export function RefChip({
   className?: string;
 }) {
   const { reveal } = useStoreUI();
+  const nav = useNav();
   return (
     <button
       type="button"
       className={clsx(styles.ref, className)}
       onClick={e => {
         e.stopPropagation();
-        reveal(id);
+        if (nav) nav.push({ kind: 'record', id });
+        else reveal(id);
       }}
     >
       {label}
@@ -48,6 +53,103 @@ function EntityRef({ entityKey, pk }: { entityKey: string; pk: string }) {
   );
 }
 
+/** Dives into a list of rows: `+79`, or `Comment · 80` when none fit */
+export function CountChip({
+  ids,
+  label,
+  children,
+}: {
+  ids: readonly string[];
+  /** Breadcrumb for the list */
+  label: string;
+  children: React.ReactNode;
+}) {
+  const nav = useNav();
+  return (
+    <button
+      type="button"
+      className={clsx(styles.ref, styles.countRef)}
+      onClick={e => {
+        e.stopPropagation();
+        nav?.push({ kind: 'list', ids, label });
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** Rough rendered width of a ref chip, in px */
+export const chipWidth = (key: string, pk: string) =>
+  (key.length + 1 + prettyPk(pk).length) * 6.6 + 14;
+/** Room for a `+79` chip and the separators around it */
+const COUNT_WIDTH = 44;
+
+type RefNode = Extract<VNode, { t: 'ref' }>;
+const isRefList = (
+  node: VNode,
+): node is { t: 'arr'; items: readonly RefNode[] } =>
+  node.t === 'arr' &&
+  node.items.length > 0 &&
+  node.items.every(i => i.t === 'ref');
+const refIds = (items: readonly RefNode[]) =>
+  items.map(i => entityId(i.key, i.pk));
+
+/** Table cell: lists of refs show the chips that fit in `width`, then a
+ * count chip for the rest */
+export function Cell({
+  node,
+  name,
+  width,
+  owner,
+}: {
+  node: VNode;
+  name: string;
+  width: number;
+  /** Row label, for the breadcrumb of a list it dives into */
+  owner: string;
+}) {
+  if (!isRefList(node)) return <Inline node={node} name={name} />;
+  const { items } = node;
+  let used = 16;
+  let fit = 0;
+  for (const item of items) {
+    const w = chipWidth(item.key, item.pk) + 8;
+    const room = fit + 1 < items.length ? width - COUNT_WIDTH : width;
+    if (used + w > room) break;
+    used += w;
+    fit++;
+  }
+  const label = `${owner} ${name}`;
+  if (!fit)
+    return (
+      <CountChip ids={refIds(items)} label={label}>
+        {items[0].key} · {items.length}
+      </CountChip>
+    );
+  const rest = items.length - fit;
+  return (
+    <span className={styles.inlineList}>
+      <span className={styles.dim}>[</span>
+      {items.slice(0, fit).map((item, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <span className={styles.dim}>, </span>}
+          <Inline node={item} />
+        </React.Fragment>
+      ))}
+      {rest > 0 && (
+        <>
+          <span className={styles.dim}>, </span>
+          <CountChip ids={refIds(items)} label={label}>
+            +{rest}
+          </CountChip>
+        </>
+      )}
+      <span className={styles.dim}>]</span>
+    </span>
+  );
+}
+
 /** Single-line summary for table cells and tree rows */
 export function Inline({
   node,
@@ -115,7 +217,7 @@ export function Block({ node, name }: { node: VNode; name?: string }) {
       </div>
     );
   }
-  if (node.t === 'arr') return <BlockList node={node} />;
+  if (node.t === 'arr') return <BlockList node={node} name={name} />;
   return <Inline node={node} name={name} />;
 }
 
@@ -134,8 +236,27 @@ export function Field({ name, node }: { name: string; node: VNode }) {
   );
 }
 
-function BlockList({ node }: { node: Extract<VNode, { t: 'arr' }> }) {
+function BlockList({
+  node,
+  name = 'items',
+}: {
+  node: Extract<VNode, { t: 'arr' }>;
+  name?: string;
+}) {
   const [all, setAll] = useState(false);
+  const nav = useNav();
+  // the table view dives into long lists of refs instead of growing them
+  if (nav && isRefList(node) && node.items.length > RECORD_REFS)
+    return (
+      <span className={styles.wrapList}>
+        {node.items.slice(0, RECORD_REFS).map((item, i) => (
+          <Inline key={i} node={item} />
+        ))}
+        <CountChip ids={refIds(node.items)} label={name}>
+          +{node.items.length - RECORD_REFS}
+        </CountChip>
+      </span>
+    );
   const shown = all ? node.items : node.items.slice(0, BLOCK_LIMIT);
   const rest = node.items.length - shown.length;
   const more =
@@ -172,7 +293,7 @@ function BlockList({ node }: { node: Extract<VNode, { t: 'arr' }> }) {
   );
 }
 
-function Primitive({ value, name }: { value: unknown; name?: string }) {
+export function Primitive({ value, name }: { value: unknown; name?: string }) {
   if (value === CIRCULAR) return <span className={styles.dim}>[Circular]</span>;
   if (value === null || value === undefined)
     return <span className={styles.null}>{String(value)}</span>;
@@ -208,17 +329,3 @@ export function formatTime(ms: number) {
   if (!isFinite(ms)) return String(ms);
   return timeFormatter ? timeFormatter.format(ms) : new Date(ms).toISOString();
 }
-
-/** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
-export function prettyPk(pk: string) {
-  if (!pk.startsWith('{')) return pk;
-  try {
-    const args = JSON.parse(pk);
-    const entries = Object.entries(args);
-    return entries.length ?
-        entries.map(([k, v]) => `${k}: ${String(v)}`).join(', ')
-      : 'all';
-  } catch {
-    return pk;
-  }
-}
diff --git a/website/src/components/Playground/preview/store/columns.ts b/website/src/components/Playground/preview/store/columns.ts
new file mode 100644
index 000000000000..0b823eb02b40
--- /dev/null
+++ b/website/src/components/Playground/preview/store/columns.ts
@@ -0,0 +1,92 @@
+import { prettyPk, type EntityRow } from './model';
+import type { VNode } from './refs';
+import { chipWidth } from './Value';
+
+/** Width of one 12px monospace character */
+const CHAR = 7.2;
+/** Cell padding (the outer columns have a little more) */
+const PAD = 20;
+/** The `+N` column that opens a row's other fields below it */
+export const MORE_WIDTH = 38;
+/** Rows sampled to size columns */
+const SAMPLE = 20;
+
+/** A data column and the width its values want */
+export interface ColumnSize {
+  readonly id: string;
+  readonly width: number;
+}
+
+/** Natural single-line width of a value, in px */
+function naturalWidth(node: VNode | undefined, name: string): number {
+  if (!node) return 0;
+  switch (node.t) {
+    case 'ref':
+      return chipWidth(node.key, node.pk);
+    case 'val': {
+      const { v } = node;
+      if (typeof v === 'string') return (v.length + 2) * CHAR;
+      // timestamps show as a time of day
+      if (typeof v === 'number' && /(^date|At)$/.test(name)) return 14 * CHAR;
+      return String(v).length * CHAR;
+    }
+    case 'arr': {
+      const shown = node.items.slice(0, 3);
+      const items = shown.reduce((w, i) => w + naturalWidth(i, '') + 16, 16);
+      return node.items.length > shown.length ? items + 44 : items;
+    }
+    case 'obj':
+      return 30 * CHAR;
+  }
+}
+
+/** How wide a column of `rows`' values should be, capped so a few fit */
+export function columnWidth(
+  rows: readonly EntityRow[],
+  value: (row: EntityRow) => VNode | undefined,
+  name: string,
+  narrow: boolean,
+) {
+  // room for the header too (10px uppercase, spaced)
+  let widest = name.length * 7.5;
+  for (const row of rows.slice(0, SAMPLE))
+    widest = Math.max(widest, naturalWidth(value(row), name));
+  return Math.round(Math.min(Math.max(widest + PAD, 48), narrow ? 150 : 232));
+}
+
+/** Width of an entity table's id column */
+export function idWidth(rows: readonly EntityRow[]) {
+  let longest = 1;
+  for (const row of rows.slice(0, SAMPLE))
+    longest = Math.max(longest, prettyPk(row.pk).length);
+  return Math.round(Math.min(longest * CHAR + PAD + 12, 140));
+}
+
+/**
+ * Splits columns into pages that fit `available` px beside the key column;
+ * every page holds at least one. Pages leave room for the `+N` column
+ * whenever there is more than one.
+ */
+export function pageColumns(
+  columns: readonly ColumnSize[],
+  keyWidth: number,
+  available: number,
+): ColumnSize[][] {
+  const total = columns.reduce((w, c) => w + c.width, keyWidth);
+  if (total <= available) return [[...columns]];
+  const room = available - MORE_WIDTH;
+  const pages: ColumnSize[][] = [];
+  let page: ColumnSize[] = [];
+  let used = keyWidth;
+  for (const column of columns) {
+    if (page.length && used + column.width > room) {
+      pages.push(page);
+      page = [];
+      used = keyWidth;
+    }
+    page.push(column);
+    used += column.width;
+  }
+  if (page.length) pages.push(page);
+  return pages;
+}
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 2bb98f60363e..018002f921b8 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -9,7 +9,7 @@ import type {
 } from './schemaRegistry';
 
 /** Row ids shared by both views, selection and flashes */
-const endpointId = (key: string) => `e\u001f${key}`;
+export const endpointId = (key: string) => `e\u001f${key}`;
 export const isEndpointId = (id: string) => id.startsWith('e\u001f');
 export const entityId = (key: string, pk: string) => `n\u001f${key}\u001f${pk}`;
 
@@ -27,6 +27,10 @@ export interface EndpointRow {
 export interface EntityRow {
   readonly id: string;
   readonly pk: string;
+  /** `state.entities` key of the table it lives in */
+  readonly table: string;
+  readonly raw: unknown;
+  /** Resolved on first read, then cached with the stored object */
   readonly value: VNode;
   readonly meta: State<unknown>['entitiesMeta'][string][string] | undefined;
 }
@@ -37,6 +41,7 @@ export interface EntityTable {
   readonly rows: readonly EntityRow[];
   /** Field names in first-seen order, without `id` (entities only) */
   readonly fields: readonly string[];
+  readonly get: (pk: string) => EntityRow | undefined;
 }
 
 export interface Referrer {
@@ -47,27 +52,88 @@ export interface Referrer {
 export interface StoreModel {
   readonly endpoints: readonly EndpointRow[];
   readonly tables: readonly EntityTable[];
-  /** Row id → everything that references it */
-  readonly referrers: ReadonlyMap<string, readonly Referrer[]>;
   readonly optimistic: readonly PendingOptimistic[];
   readonly indexes: State<unknown>['indexes'];
   readonly lastReset: number;
 }
 
+/** Rows scanned for field names; later rows' extra fields still show in
+ * their record */
+const FIELD_SAMPLE = 500;
+
+/** Stored objects keep their identity until they change, so their resolved
+ * values (and tables, below) are reused across states. Per schema, since one
+ * can be learned after its rows were stored */
+const resolved = new WeakMap<object, WeakMap<object, VNode>>();
+const unknownSchema = {};
+function resolveCached(raw: unknown, schema: unknown): VNode {
+  if (!raw || typeof raw !== 'object') return resolveRow(raw, schema);
+  const scope = (schema as object | undefined) ?? unknownSchema;
+  let cache = resolved.get(scope);
+  if (!cache) resolved.set(scope, (cache = new WeakMap()));
+  let node = cache.get(raw);
+  if (!node) cache.set(raw, (node = resolveRow(raw, schema)));
+  return node;
+}
+
+class StoredRow implements EntityRow {
+  constructor(
+    readonly table: string,
+    readonly pk: string,
+    readonly raw: unknown,
+    readonly meta: EntityRow['meta'],
+    private readonly schema: unknown,
+  ) {}
+
+  get id() {
+    return entityId(this.table, this.pk);
+  }
+
+  get value() {
+    return resolveCached(this.raw, this.schema);
+  }
+}
+
+const tableCache = new WeakMap<
+  object,
+  { schema: unknown; meta: unknown; table: EntityTable }
+>();
+function buildTable(
+  key: string,
+  rows: Record<string, unknown>,
+  meta: State<unknown>['entitiesMeta'][string] | undefined,
+  schema: unknown,
+): EntityTable {
+  const hit = tableCache.get(rows);
+  if (hit && hit.schema === schema && hit.meta === meta) return hit.table;
+  const kind = tableKind(schema, rows);
+  const pks = Object.keys(rows);
+  const fields = new Set<string>();
+  if (kind === 'entity')
+    for (const pk of pks.slice(0, FIELD_SAMPLE)) {
+      const raw = rows[pk];
+      if (raw && typeof raw === 'object')
+        for (const f of Object.keys(raw)) if (f !== 'id') fields.add(f);
+    }
+  const get = (pk: string) =>
+    pk in rows ?
+      new StoredRow(key, pk, rows[pk], meta?.[pk], schema)
+    : undefined;
+  const table: EntityTable = {
+    key,
+    kind,
+    rows: pks.map(pk => new StoredRow(key, pk, rows[pk], meta?.[pk], schema)),
+    fields: [...fields],
+    get,
+  };
+  tableCache.set(rows, { schema, meta, table });
+  return table;
+}
+
 export function buildModel(
   state: State<unknown>,
   registry: SchemaRegistry,
 ): StoreModel {
-  const referrers = new Map<string, Referrer[]>();
-  const addRefs = (from: Referrer, node: VNode) =>
-    forEachRef(node, (key, pk) => {
-      const to = entityId(key, pk);
-      const list = referrers.get(to);
-      if (!list) referrers.set(to, [from]);
-      // a row's refs arrive together, so a repeat is always the last entry
-      else if (list[list.length - 1].id !== from.id) list.push(from);
-    });
-
   // errors and invalidations can leave meta without a stored response
   const endpointKeys = new Set([
     ...Object.keys(state.endpoints),
@@ -75,51 +141,95 @@ export function buildModel(
   ]);
   const endpoints = [...endpointKeys].map(key => {
     const record = registry.endpoints.get(key);
-    const value = resolve(state.endpoints[key], record?.endpoint.schema);
     const row: EndpointRow = {
       id: endpointId(key),
       key,
       ...splitKey(key),
-      value,
+      value: resolve(state.endpoints[key], record?.endpoint.schema),
       meta: state.meta[key],
       record,
     };
-    addRefs({ id: row.id, label: `${row.method} ${row.path}`.trim() }, value);
     return row;
   });
 
-  const tables = Object.entries(state.entities).map(([key, rows = {}]) => {
-    const table = registry.entities.get(key);
-    const kind = tableKind(table, rows);
-    const fields = new Set<string>();
-    const entityRows = Object.entries(rows).map(([pk, raw]) => {
-      if (kind === 'entity' && raw && typeof raw === 'object')
-        Object.keys(raw).forEach(f => f !== 'id' && fields.add(f));
-      const row: EntityRow = {
-        id: entityId(key, pk),
-        pk,
-        value: resolveRow(raw, table),
-        meta: state.entitiesMeta[key]?.[pk],
-      };
-      addRefs({ id: row.id, label: `${key} ${pk}` }, row.value);
-      return row;
-    });
-    return { key, kind, rows: entityRows, fields: [...fields] };
-  });
-  // Entities first, then Collections, then Scalar cells
-  const order = { entity: 0, unknown: 1, collection: 2, scalar: 3 };
-  tables.sort((a, b) => order[a.kind] - order[b.kind]);
+  const tables = Object.entries(state.entities).map(([key, rows = {}]) =>
+    buildTable(key, rows, state.entitiesMeta[key], registry.entities.get(key)),
+  );
 
   return {
     endpoints,
-    tables,
-    referrers,
+    tables: orderTables(tables),
     optimistic: registry.optimistic,
     indexes: state.indexes,
     lastReset: state.lastReset,
   };
 }
 
+/** Each Collection right after the Entity it holds (`[Todo]` after `Todo`),
+ * then Collections of anything else, then Scalar cells */
+function orderTables(tables: EntityTable[]) {
+  const held = new Map<string, EntityTable[]>();
+  const rest: EntityTable[] = [];
+  for (const table of tables) {
+    if (table.kind !== 'collection') continue;
+    const member = memberKey(table.key);
+    if (tables.some(t => t.key === member && t.kind !== 'collection'))
+      held.set(member, [...(held.get(member) ?? []), table]);
+    else rest.push(table);
+  }
+  const ordered: EntityTable[] = [];
+  for (const table of tables) {
+    if (table.kind === 'entity' || table.kind === 'unknown')
+      ordered.push(table, ...(held.get(table.key) ?? []));
+  }
+  return [...ordered, ...rest, ...tables.filter(t => t.kind === 'scalar')];
+}
+
+/** `[Todo]`, `{Todo}` or `(Todo)` → `Todo` */
+const memberKey = (key: string) => key.replace(/^[[{(](.*)[\]})]$/, '$1');
+
+const referrerCache = new WeakMap<StoreModel, Map<string, Referrer[]>>();
+/** Row id → everything that references it. Built on first use (opening a
+ * record), since it reads every stored row */
+export function referrersOf(
+  model: StoreModel,
+): ReadonlyMap<string, readonly Referrer[]> {
+  let referrers = referrerCache.get(model);
+  if (referrers) return referrers;
+  const map = new Map<string, Referrer[]>();
+  const addRefs = (from: Referrer, node: VNode) =>
+    forEachRef(node, (key, pk) => {
+      const to = entityId(key, pk);
+      const list = map.get(to);
+      if (!list) map.set(to, [from]);
+      // a row's refs arrive together, so a repeat is always the last entry
+      else if (list[list.length - 1].id !== from.id) list.push(from);
+    });
+  for (const row of model.endpoints)
+    addRefs(
+      { id: row.id, label: `${row.method} ${row.path}`.trim() },
+      row.value,
+    );
+  for (const table of model.tables)
+    for (const row of table.rows)
+      addRefs(
+        { id: row.id, label: `${table.key} ${prettyPk(row.pk)}` },
+        row.value,
+      );
+  referrerCache.set(model, (referrers = map));
+  return referrers;
+}
+
+/** The endpoint or stored row an id names */
+export function findRow(
+  model: StoreModel,
+  id: string,
+): EndpointRow | EntityRow | undefined {
+  if (isEndpointId(id)) return model.endpoints.find(r => r.id === id);
+  const [, key, ...pk] = id.split('\u001f');
+  return model.tables.find(t => t.key === key)?.get(pk.join('\u001f'));
+}
+
 function tableKind(
   table: any,
   rows: Record<string, unknown>,
@@ -168,3 +278,17 @@ export function changedIds(prev: State<unknown>, next: State<unknown>) {
   }
   return ids;
 }
+
+/** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
+export function prettyPk(pk: string) {
+  if (!pk.startsWith('{')) return pk;
+  try {
+    const args = JSON.parse(pk);
+    const entries = Object.entries(args);
+    return entries.length ?
+        entries.map(([k, v]) => `${k}: ${String(v)}`).join(', ')
+      : 'all';
+  } catch {
+    return pk;
+  }
+}
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
new file mode 100644
index 000000000000..1f43377849cd
--- /dev/null
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+import type { StoreModel } from './model';
+
+/** One level of the table view's navigation stack */
+export type View =
+  | { readonly kind: 'root' }
+  /** Rows of a whole table, or just `ids` (entity or endpoint row ids) */
+  | {
+      readonly kind: 'list';
+      readonly label: string;
+      readonly table?: string;
+      readonly ids?: readonly string[];
+    }
+  | { readonly kind: 'record'; readonly id: string };
+
+export interface Nav {
+  readonly model: StoreModel;
+  /** Panel width in px, to fit columns and chips */
+  readonly width: number;
+  readonly push: (view: View) => void;
+}
+
+/** Set by the table view only; the tree view expands in place instead */
+export const NavContext = createContext<Nav | null>(null);
+export const useNav = () => useContext(NavContext);
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index c7d1e0302502..273b6f399154 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -10,50 +10,248 @@
   --store-fresh: #7fd1a0;
   --store-stale: #ffcb6b;
   --store-line: rgba(255, 255, 255, 0.07);
+  --store-line-strong: rgba(255, 255, 255, 0.12);
   --store-hover: rgba(255, 255, 255, 0.045);
   --store-selected: rgba(130, 170, 255, 0.16);
+  --store-record: rgba(130, 170, 255, 0.07);
   --store-flash: rgba(255, 203, 107, 0.3);
+  --store-tip: #3a4057;
   --store-bg: var(--monoco-code-background);
 
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   max-height: 32rem;
-  overflow: auto;
-  overscroll-behavior: contain;
   background: var(--store-bg);
   color: var(--store-fg);
   font: 12px / 1.6 var(--ifm-font-family-monospace);
 }
 
-.toolbar {
+/* State | Actions, then the view switch; the same band as the other headers */
+.bar {
+  flex: none;
+  display: flex;
+  align-items: stretch;
+  min-height: 2.25rem;
+  padding: 0 0.375rem 0 0.25rem;
+  background: var(--pg-bar);
+  color: var(--pg-tab);
+  font: 500 var(--ifm-code-font-size) / 1 var(--ifm-font-family-base);
+}
+.tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0 0.6rem;
+}
+.tab[aria-current]::after {
+  content: '';
+  position: absolute;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: 0;
+  height: 2px;
+  border-radius: 1px 1px 0 0;
+  background: var(--ifm-color-primary);
+}
+.later {
+  opacity: 0.55;
+  cursor: default;
+}
+.laterTag {
+  padding: 2px 4px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+}
+.viewButtons {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+.viewButtons button {
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition:
+    background-color var(--motion-snappy),
+    opacity var(--motion-snappy),
+    scale var(--motion-snappy);
+}
+.viewButtons button:active {
+  scale: 0.9;
+}
+.viewButtons button[aria-pressed='true'] {
+  background: var(--pg-tab-hover-bg);
+  opacity: 1;
+}
+.viewButtons svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.3;
+  stroke-linecap: round;
+}
+
+/* Levels of the table view stack in one cell; the covered ones stay laid out
+   (so they keep their scroll) but invisible */
+.levels {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+}
+.level {
+  grid-area: 1 / 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  outline: none;
+}
+.level[data-covered] {
+  visibility: hidden;
+}
+
+/* breadcrumbs of a dive-in level */
+.crumbs {
   position: sticky;
   top: 0;
   z-index: 2;
   display: flex;
-  justify-content: flex-end;
+  flex-wrap: wrap;
   align-items: center;
-  box-sizing: border-box;
-  height: 2rem;
-  padding: 0 0.5rem;
+  gap: 2px 4px;
+  min-height: 1.9rem;
+  padding: 3px 0.75rem 3px 0.25rem;
   background: var(--store-bg);
+  box-shadow: inset 0 -1px 0 var(--store-line-strong);
 }
-
-.seg {
-  display: inline-flex;
-  border: 1px solid var(--store-line);
+.back {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
   border-radius: 5px;
-  overflow: hidden;
-}
-.seg button {
-  font: 500 11px / 1.6 var(--ifm-font-family-base);
   background: none;
+  color: var(--store-fg);
+  font: 500 17px / 1 var(--ifm-font-family-base);
+  cursor: pointer;
+}
+.crumbList {
+  display: contents;
+}
+.crumb,
+.crumbCurrent {
+  padding: 0 3px;
   border: 0;
+  border-radius: 4px;
+  background: none;
   color: var(--store-dim);
-  padding: 0.05rem 0.6rem;
+  font: inherit;
+  white-space: nowrap;
+  line-height: 1.8;
+}
+.crumb {
   cursor: pointer;
 }
-.seg button[aria-pressed='true'] {
-  background: rgba(130, 170, 255, 0.16);
+.crumb b,
+.crumb .crumbName,
+.crumb .method {
+  color: inherit;
+  font-weight: inherit;
+}
+.crumbCurrent {
+  color: var(--store-fg);
+}
+.crumbName {
+  color: var(--store-type);
+}
+.crumbCurrent b {
+  font-weight: 500;
+}
+.crumb .count,
+.crumbCurrent .count {
+  margin-left: 0.35em;
+}
+.sep {
+  color: var(--store-dim);
+  opacity: 0.6;
+}
+.tools {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  white-space: nowrap;
+}
+.filter {
+  width: 7.5rem;
+  height: 1.3rem;
+  padding: 0 0.4rem;
+  border: 1px solid var(--store-line-strong);
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.22);
   color: var(--store-fg);
+  font: inherit;
+  font-size: 11px;
+  outline: none;
+}
+.filter::placeholder {
+  color: var(--store-dim);
+}
+.filter:focus {
+  border-color: var(--store-key);
+}
+
+/* `‹ 1–4 of 9 ›`: always in a dive-in level; at the top level only while
+   that table is hovered or (touch) its header was tapped */
+.pager {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--store-dim);
+  font-size: 11px;
+}
+.pager button {
+  padding: 0 0.4rem;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--store-key);
+  font: inherit;
+  line-height: 1.6;
+  cursor: pointer;
+}
+.pager button:disabled {
+  color: var(--store-dim);
+  opacity: 0.45;
+  cursor: default;
+}
+.tool {
+  margin-left: auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-snappy);
+}
+.group[data-active] .tool,
+.group:focus-within .tool {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .section + .section {
@@ -61,13 +259,13 @@
 }
 .sectionHeader {
   position: sticky;
-  top: 2rem;
+  top: 0;
   z-index: 1;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 0.45rem;
   width: 100%;
-  padding: 0.35rem 0.75rem;
+  padding: 0.45rem 0.75rem 0.3rem;
   border: 0;
   background: var(--store-bg);
   color: var(--store-dim);
@@ -77,19 +275,23 @@
   text-align: start;
   cursor: pointer;
 }
+.closed {
+  opacity: 0.75;
+}
 .count {
   font: 400 11px var(--ifm-font-family-monospace);
   letter-spacing: 0;
   color: var(--store-dim);
 }
 
+/* tree view disclosure arrows */
 .chevron {
   display: inline-block;
   flex: none;
   width: 1em;
   font-size: 8px;
   color: var(--store-dim);
-  transition: transform 150ms;
+  transition: transform var(--motion-snappy);
 }
 .chevronOpen {
   transform: rotate(90deg);
@@ -99,6 +301,9 @@
   cursor: pointer;
   outline-offset: -2px;
 }
+.inertRow {
+  cursor: default;
+}
 div.row {
   display: flex;
   align-items: baseline;
@@ -114,12 +319,38 @@ div.row {
   background: var(--store-selected);
 }
 @media (hover: hover) {
-  .row:hover,
-  .row:hover > td,
-  .sectionHeader:hover,
+  .row:not(.inertRow):hover,
+  .row:not(.inertRow):hover > td,
   .groupHeader:hover {
     background-color: var(--store-hover);
   }
+  .selected:hover > td {
+    background-color: var(--store-selected);
+  }
+  .sectionHeader:hover,
+  .crumb:hover,
+  .back:hover,
+  .tableIndex button:hover,
+  .foot button:hover {
+    color: var(--store-fg);
+    opacity: 1;
+  }
+  .crumb:hover,
+  .back:hover,
+  .pager button:not(:disabled):hover {
+    background: var(--store-hover);
+  }
+  .group:hover .tool {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .moreCell:hover {
+    color: var(--store-fg);
+  }
+  .moreCell:hover::after {
+    opacity: 1;
+    translate: 0;
+  }
 }
 
 .indent {
@@ -144,75 +375,143 @@ div.row {
   background: none;
 }
 .table th {
-  padding: 0.1rem 0.5rem 0.1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 0.2rem 0.5rem;
+  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.06em;
+  letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--store-dim);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.table th:first-child {
-  padding-left: 0.75rem;
+/* below the breadcrumbs in a dive-in level */
+.crumbs ~ .table th {
+  top: 1.9rem;
 }
 .table td {
-  padding: 0.1rem 0.5rem 0.1rem 0;
-  border-top: 1px solid var(--store-line);
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--store-line);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: baseline;
 }
+.table th:first-child,
 .table td:first-child {
   padding-left: 0.75rem;
 }
-.table tr.detailRow > td {
-  border-top: 0;
+.table th:last-child,
+.table td:last-child {
+  padding-right: 0.75rem;
+}
+.table tr.spacer > td,
+.table tr.spacer {
+  padding: 0;
+  border: 0;
+}
+/* the +N that opens a row's other fields below it */
+.table td.moreCell {
+  position: relative;
+  overflow: visible;
+  text-align: end;
+  color: var(--store-dim);
+  font-size: 11px;
+  cursor: pointer;
+}
+.moreCell::after {
+  content: attr(data-hint);
+  position: absolute;
+  right: 0.5rem;
+  bottom: calc(100% - 3px);
+  z-index: 2;
+  padding: 0 0.45rem;
+  border-radius: 4px;
+  background: var(--store-tip);
+  color: var(--store-fg);
+  font: 500 10px / 1.8 var(--ifm-font-family-base);
+  white-space: nowrap;
+  opacity: 0;
+  translate: 0 2px;
+  pointer-events: none;
+  transition:
+    opacity var(--motion-snappy),
+    translate var(--motion-snappy);
+}
+.table tr.recordRow > td {
+  padding: 0;
+  background: var(--store-record);
   white-space: normal;
   overflow: visible;
+  cursor: default;
 }
-.pkCell {
-  width: 6.5em;
+.recordRow .detail {
+  animation: open var(--motion-smooth);
 }
-.argsCell {
-  width: 40%;
+@keyframes open {
+  from {
+    opacity: 0;
+    translate: 0 -4px;
+  }
 }
-.endpointCell {
-  width: 45%;
+.table tr.foot > td {
+  padding: 0.3rem 0.75rem;
+  border: 0;
+  color: var(--store-dim);
+  font-size: 11px;
 }
-.statusCell {
-  width: 7em;
-  text-align: end;
+.foot button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--store-dim);
+  font: inherit;
+  cursor: pointer;
 }
 
 .group {
-  margin-bottom: 0.25rem;
+  padding-bottom: 0.6rem;
 }
 .groupHeader {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.45rem;
-  width: 100%;
-  padding: 0.15rem 0.75rem;
+  gap: 2px 0.45rem;
+  padding: 0.35rem 0.75rem 0.1rem;
+}
+.tableIndex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 0.75rem;
+  padding: 0 0.75rem 0.4rem;
+  font-size: 11px;
+}
+.tableIndex button {
+  display: inline-flex;
+  gap: 0.35em;
+  padding: 0;
   border: 0;
   background: none;
-  color: inherit;
+  color: var(--store-type);
   font: inherit;
-  text-align: start;
+  opacity: 0.8;
   cursor: pointer;
 }
-.hint {
-  margin-left: auto;
-  color: var(--store-dim);
-  font-size: 11px;
-  white-space: nowrap;
-}
 .kind {
   color: var(--store-dim);
   font-size: 11px;
 }
+.record {
+  padding: 0.5rem 0;
+}
+.record > .detail {
+  padding-left: 0.75rem;
+}
 .showAll,
 .more {
   border: 0;
@@ -348,6 +647,15 @@ div.row {
   border-color: rgba(127, 209, 160, 0.35);
   background: rgba(127, 209, 160, 0.08);
 }
+.countRef {
+  color: var(--store-dim);
+  border-color: var(--store-line-strong);
+  background: var(--store-hover);
+}
+.countRef:hover {
+  color: var(--store-fg);
+  background: var(--store-line-strong);
+}
 .endpointRef:hover {
   background: rgba(127, 209, 160, 0.18);
 }
@@ -379,8 +687,34 @@ div.row {
   border-color: rgba(199, 146, 234, 0.4);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .chevron {
-    transition: none;
+
+
+/* a record: inline below its row, or as its own level */
+.recordRow .detail,
+.record > .detail {
+  padding: 0.5rem 0.75rem 0.6rem;
+}
+.level {
+  container-type: inline-size;
+}
+/* each field of a record: name column, then its value */
+.recordRow .detail > .fields > .field,
+.record > .detail > .fields > .field {
+  display: grid;
+  grid-template-columns: 6rem minmax(0, 1fr);
+  gap: 0 0.5rem;
+}
+.recordRow .detail > .fields > .field > .key,
+.record > .detail > .fields > .field > .key {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@container (min-width: 480px) {
+  .recordRow .detail > .fields,
+  .record > .detail > .fields {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 1.25rem;
   }
 }
diff --git a/website/src/components/motion/index.ts b/website/src/components/motion/index.ts
index 2b4b728085a6..6be35e23f98c 100644
--- a/website/src/components/motion/index.ts
+++ b/website/src/components/motion/index.ts
@@ -3,4 +3,5 @@ export { default as MotionGroup, useLayoutMotion } from './MotionGroup';
 export { default as Reveal } from './Reveal';
 
 export { springs } from './tokens';
+export { springEasing } from './spring';
 export type { Spring } from './spring';

From ccf8d3c08b1529c32dc2b1752346cd489ba62008 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 15:46:23 +0000
Subject: [PATCH 08/28] fix(website): Store inspector review fixes: clock
 refresh, stable optimistic ids, invalid dates, registry outlives remounts

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../components/Playground/preview/LivePreview.tsx  |  4 ++++
 .../src/components/Playground/preview/Preview.tsx  | 14 ++++++++------
 .../Playground/preview/store/Details.tsx           |  2 ++
 .../Playground/preview/store/RootView.tsx          |  3 ++-
 .../Playground/preview/store/Sections.tsx          | 10 ++++------
 .../components/Playground/preview/store/Value.tsx  |  6 +++++-
 .../components/Playground/preview/store/model.ts   |  3 +++
 .../Playground/preview/store/schemaRegistry.ts     |  8 +++++++-
 8 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/website/src/components/Playground/preview/LivePreview.tsx b/website/src/components/Playground/preview/LivePreview.tsx
index 1e5f24e415d3..554b8689cfd8 100644
--- a/website/src/components/Playground/preview/LivePreview.tsx
+++ b/website/src/components/Playground/preview/LivePreview.tsx
@@ -6,6 +6,7 @@ import { ResetButton } from './PreviewError';
 import PreviewWrapper from './PreviewWrapper';
 import { useRenderCount } from './RenderCount';
 import { previewScope } from './scope';
+import SchemaRegistry from './store/schemaRegistry';
 import transformCode from './transformCode';
 import { usePlaygroundConsoleDemotion } from './usePlaygroundConsoleDemotion';
 import { usePreviewReset } from './usePreviewReset';
@@ -28,6 +29,8 @@ export default function LivePreview<T>({
   usePlaygroundConsoleDemotion();
   const { onCommit, badge } = useRenderCount(renderCount);
   const { key, restored, reset, ...handlers } = usePreviewReset(code);
+  // outlives remounts, so a restored store keeps its schemas
+  const registry = useMemo(() => new SchemaRegistry(), []);
   const getInterceptorData = useMemo(
     () =>
       restored ?
@@ -61,6 +64,7 @@ export default function LivePreview<T>({
           getInitialInterceptorData={getInterceptorData}
           onCommit={onCommit}
           initialState={restored?.state}
+          registry={registry}
           onReset={reset}
           {...handlers}
         />
diff --git a/website/src/components/Playground/preview/Preview.tsx b/website/src/components/Playground/preview/Preview.tsx
index a06ea19ea94c..8402480476db 100644
--- a/website/src/components/Playground/preview/Preview.tsx
+++ b/website/src/components/Playground/preview/Preview.tsx
@@ -34,6 +34,7 @@ function Preview<T>({
   getInitialInterceptorData,
   onCommit,
   initialState,
+  registry,
   onInteract,
   ...errorProps
 }: PreviewProps<T> &
@@ -41,6 +42,8 @@ function Preview<T>({
     /** Called on every React commit of the live result (enables a `<Profiler>`) */
     onCommit?: ProfilerOnRenderCallback;
     initialState?: State<unknown>;
+    /** Schemas the Store inspector has seen */
+    registry: SchemaRegistry;
     /** User pointer/keyboard input inside the result */
     onInteract: () => void;
   }) {
@@ -62,15 +65,14 @@ function Preview<T>({
     ],
   );
 
-  const [registry, managers] = useMemo(() => {
-    const registry = new SchemaRegistry();
-    const managers: Manager[] = [
+  const managers = useMemo<Manager[]>(
+    () => [
       registry,
       new NetworkManager(),
       new SubscriptionManager(PollingSubscription),
-    ];
-    return [registry, managers] as const;
-  }, []);
+    ],
+    [registry],
+  );
 
   const coveredResult = row && selectedValue === 'y';
   return (
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index ea58b59b1da1..a323d60783d8 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -47,6 +47,8 @@ export function Status({ meta }: { meta: Meta }) {
 function useNow(until: number | undefined) {
   const [now, setNow] = useState(Date.now);
   useEffect(() => {
+    // a new deadline may already have passed
+    setNow(Date.now());
     if (until === undefined || until <= Date.now()) return;
     const timer = setInterval(() => {
       const t = Date.now();
diff --git a/website/src/components/Playground/preview/store/RootView.tsx b/website/src/components/Playground/preview/store/RootView.tsx
index 3ad52fda0595..6aa2dd6e32ed 100644
--- a/website/src/components/Playground/preview/store/RootView.tsx
+++ b/website/src/components/Playground/preview/store/RootView.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 
 import { EntityDetail } from './Details';
 import {
+  optimisticId,
   referrersOf,
   splitKey,
   type EntityRow,
@@ -259,7 +260,7 @@ function OptimisticTable({ model }: { model: StoreModel }) {
   return (
     <RowsTable
       columns={columns}
-      rows={model.optimistic.map((o, i) => ({ ...o, id: `o\u001f${i}` }))}
+      rows={model.optimistic.map(o => ({ ...o, id: optimisticId(o) }))}
     />
   );
 }
diff --git a/website/src/components/Playground/preview/store/Sections.tsx b/website/src/components/Playground/preview/store/Sections.tsx
index 55094a0ea337..8f6a2f44a341 100644
--- a/website/src/components/Playground/preview/store/Sections.tsx
+++ b/website/src/components/Playground/preview/store/Sections.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import type { EndpointRow, EntityTable, StoreModel } from './model';
-import { splitKey } from './model';
+import { optimisticId, splitKey } from './model';
 import { plain } from './refs';
 import styles from './store.module.css';
 import { ROW_LIMIT, sectionId, showAllId, useStoreUI } from './StoreUI';
@@ -193,8 +193,8 @@ function OptimisticSection({ model }: { model: StoreModel }) {
       title="Optimistic"
       count={model.optimistic.length}
     >
-      {model.optimistic.map((action, i) => (
-        <OptimisticRow key={`${action.key}${i}`} action={action} index={i} />
+      {model.optimistic.map(action => (
+        <OptimisticRow key={optimisticId(action)} action={action} />
       ))}
     </Section>
   );
@@ -202,12 +202,10 @@ function OptimisticSection({ model }: { model: StoreModel }) {
 
 function OptimisticRow({
   action,
-  index,
 }: {
   action: StoreModel['optimistic'][number];
-  index: number;
 }) {
-  const { open, props } = useRowProps(`o\u001f${index}`);
+  const { open, props } = useRowProps(optimisticId(action));
   const { method, path } = splitKey(action.key);
   return (
     <>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 593cc7057f9a..54fec68a7b90 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -306,7 +306,11 @@ export function Primitive({ value, name }: { value: unknown; name?: string }) {
       </span>
     );
   if (value instanceof Date)
-    return <span className={styles.number}>{value.toISOString()}</span>;
+    return (
+      <span className={styles.number}>
+        {isNaN(value.getTime()) ? 'Invalid Date' : value.toISOString()}
+      </span>
+    );
   if (typeof value === 'object')
     return <span className={styles.dim}>{JSON.stringify(value)}</span>;
   return <span className={styles.number}>{String(value)}</span>;
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 018002f921b8..de3bc324c8d9 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -12,6 +12,9 @@ import type {
 export const endpointId = (key: string) => `e\u001f${key}`;
 export const isEndpointId = (id: string) => id.startsWith('e\u001f');
 export const entityId = (key: string, pk: string) => `n\u001f${key}\u001f${pk}`;
+/** Stable while other optimistic updates settle around it */
+export const optimisticId = (o: PendingOptimistic) =>
+  `o\u001f${o.key}\u001f${o.fetchedAt}`;
 
 export interface EndpointRow {
   readonly id: string;
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index 7bdc47f01ee6..719432e823d0 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -20,7 +20,7 @@ export interface PendingOptimistic {
 
 /** Remembers each endpoint (and every entity schema reachable from it) as
  * actions pass through, since the store only holds keys and ids.
- * Lives in the preview's DataProvider; extend this manager (rather than
+ * Lives as long as the live preview (across store remounts); extend this manager (rather than
  * adding another) when the preview starts tracking actions.
  * Never prunes: fine for a playground session, not for a long-lived app. */
 export default class SchemaRegistry implements Manager<ActionTypes> {
@@ -53,6 +53,12 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
     return next(action);
   };
 
+  /** A remounted preview starts a new store; schemas carry over (a restored
+   * store still holds their rows), pending optimistic updates don't */
+  init() {
+    this.optimistic = [];
+  }
+
   cleanup() {}
 
   /** Mirrors core's fetchReducer and filterOptimistic */

From eae00fc2d195ac1a6d1f0901b341a57ab907be80 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 15:55:35 +0000
Subject: [PATCH 09/28] Simplify store inspector: lazy rows, shared column
 fitting, per-level nav

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/storeModel.test.ts      |  17 +-
 .../Playground/preview/store/Details.tsx      |  73 ++----
 .../Playground/preview/store/DiveViews.tsx    | 231 +++++++++++-------
 .../Playground/preview/store/RootView.tsx     | 197 ++++++---------
 .../Playground/preview/store/Sections.tsx     |  67 +++--
 .../Playground/preview/store/StorePanel.tsx   | 110 +++++----
 .../Playground/preview/store/Table.tsx        | 193 ++++++++-------
 .../Playground/preview/store/TreeView.tsx     |   3 +-
 .../Playground/preview/store/Value.tsx        | 157 +++++++-----
 .../Playground/preview/store/columns.ts       |  42 ++--
 .../Playground/preview/store/model.ts         | 192 ++++++++-------
 .../Playground/preview/store/nav.tsx          |  26 +-
 .../Playground/preview/store/store.module.css |  27 +-
 website/src/components/motion/MotionGroup.tsx |   2 +-
 website/src/components/motion/index.ts        |   6 +-
 15 files changed, 733 insertions(+), 610 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 94fa91c8d899..83a5ce917c24 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -4,9 +4,10 @@ import { actionTypes, type State } from '@data-client/react';
 
 import {
   buildModel,
-  changedIds,
   entityId,
+  isChanged,
   referrersOf,
+  rowLabel,
   splitKey,
 } from '../store/model';
 import { CIRCULAR, plain, resolve, resolveRow } from '../store/refs';
@@ -174,7 +175,10 @@ describe('store model', () => {
       'GET https://example.com/posts',
       'GET /broken',
     ]);
-    expect([...changedIds(state, failed)]).toEqual(['e\u001fGET /broken']);
+    expect(isChanged(state, failed, 'e\u001fGET /broken')).toBe(true);
+    expect(
+      isChanged(state, failed, 'e\u001fGET https://example.com/posts'),
+    ).toBe(false);
   });
 
   it('falls back to plain values when the stored shape does not match', () => {
@@ -208,9 +212,7 @@ describe('store model', () => {
       registryFor('GET https://example.com/posts', [Post]),
     );
     const labels = (key: string, pk: string) =>
-      referrersOf(model)
-        .get(entityId(key, pk))
-        ?.map(r => r.label);
+      referrersOf(model, entityId(key, pk)).map(rowLabel);
     expect(labels('Post', '1')).toEqual(['GET /posts']);
     expect(labels('User', '123')).toEqual(['Comment 249', 'Post 1']);
     expect(labels('Comment', '249')).toEqual(['[Comment] postId: 1']);
@@ -228,7 +230,7 @@ describe('store model', () => {
       t: 'arr',
       items: [{ t: 'val', v: '1' }],
     });
-    expect(referrersOf(model).size).toBe(0);
+    expect(referrersOf(model, entityId('User', '123'))).toEqual([]);
   });
 
   it('guesses table kinds without a schema', () => {
@@ -304,7 +306,8 @@ describe('store model', () => {
         User: { 123: { id: '123', name: 'Paul Jones' } },
       },
     };
-    expect([...changedIds(state, next)]).toEqual([entityId('User', '123')]);
+    expect(isChanged(state, next, entityId('User', '123'))).toBe(true);
+    expect(isChanged(state, next, entityId('Post', '1'))).toBe(false);
   });
 
   it('splits endpoint keys', () => {
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index a323d60783d8..150af99609e0 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -3,24 +3,17 @@ import clsx from 'clsx';
 import React, { useContext, useEffect, useState } from 'react';
 
 import {
-  isEndpointId,
+  errorText,
+  referrersOf,
   type EndpointRow,
   type EntityRow,
-  type Referrer,
+  type StoreModel,
 } from './model';
-import { useNav } from './nav';
 import { plain } from './refs';
 import type { EndpointRecord } from './schemaRegistry';
 import { Segmented } from './Sections';
 import styles from './store.module.css';
-import {
-  Block,
-  CountChip,
-  Field,
-  formatTime,
-  RECORD_REFS,
-  RefChip,
-} from './Value';
+import { Block, Field, formatTime, RefList, RowChip } from './Value';
 
 type Meta = EndpointRow['meta'];
 
@@ -98,60 +91,40 @@ function Returns({ record }: { record: EndpointRecord }) {
   try {
     data = controller.getResponse(record.endpoint, ...record.args, state).data;
   } catch (e) {
-    data = e instanceof Error ? e.message : e;
+    data = errorText(e);
   }
   return <Block node={plain(data)} />;
 }
 
 export function EntityDetail({
   row,
-  referrers,
+  model,
 }: {
   row: EntityRow;
-  referrers: readonly Referrer[] | undefined;
+  model: StoreModel;
 }) {
+  const referrers = referrersOf(model, row.id);
   return (
     <div className={styles.detail}>
       <Block node={row.value} />
       <div className={styles.metaList}>
         {row.meta && <Field name="meta" node={plain(row.meta)} />}
-        <ReferencedBy referrers={referrers} />
-      </div>
-    </div>
-  );
-}
-
-function ReferencedBy({
-  referrers = [],
-}: {
-  referrers: readonly Referrer[] | undefined;
-}) {
-  // the table view dives into long lists instead of listing them all
-  const nav = useNav();
-  const shown =
-    nav && referrers.length > RECORD_REFS ?
-      referrers.slice(0, RECORD_REFS)
-    : referrers;
-  return (
-    <div className={styles.field}>
-      <span className={styles.label}>used by</span>
-      {referrers.length ?
-        <span className={styles.wrapList}>
-          {shown.map(r => (
-            <RefChip
-              key={r.id}
-              id={r.id}
-              label={r.label}
-              className={isEndpointId(r.id) ? styles.endpointRef : undefined}
+        <div className={styles.field}>
+          <span className={styles.label}>used by</span>
+          {referrers.length ?
+            <RefList
+              chips={referrers.map(r => (
+                <RowChip key={r.id} row={r} />
+              ))}
+              list={() => ({
+                kind: 'list',
+                label: 'used by',
+                ids: referrers.map(r => r.id),
+              })}
             />
-          ))}
-          {shown.length < referrers.length && (
-            <CountChip ids={referrers.map(r => r.id)} label="used by">
-              +{referrers.length - shown.length}
-            </CountChip>
-          )}
-        </span>
-      : <span className={styles.dim}>nothing</span>}
+          : <span className={styles.dim}>nothing</span>}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index af83480fe3d3..089becebfee5 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -9,14 +9,13 @@ import React, {
 import { EndpointDetail, EntityDetail } from './Details';
 import {
   findRow,
-  isEndpointId,
+  isEndpointRow,
   prettyPk,
-  referrersOf,
-  type EndpointRow,
-  type EntityRow,
+  type AnyRow,
+  type EntityTable,
   type StoreModel,
 } from './model';
-import { useNav, type View } from './nav';
+import { offsetIn, useNav, type ListView, type View } from './nav';
 import styles from './store.module.css';
 import {
   endpointColumns,
@@ -24,12 +23,12 @@ import {
   Pager,
   RowsTable,
   tableColumns,
-  type AnyRow,
   type Column,
 } from './Table';
+import { EndpointKey, EntityKey } from './Value';
 
-type ListViewProps = Extract<View, { kind: 'list' }>;
-type Header = (tools?: React.ReactNode) => React.ReactNode;
+type Scroller = React.RefObject<HTMLElement | null>;
+type Header = (tools: React.ReactNode) => React.ReactNode;
 
 /** Rows rendered beyond the visible ones, on each side */
 const OVERSCAN = 20;
@@ -43,46 +42,125 @@ export function ListView({
   scroller,
   header,
 }: {
-  view: ListViewProps;
-  scroller: React.RefObject<HTMLElement | null>;
+  view: ListView;
+  scroller: Scroller;
   header: Header;
 }) {
-  const { model, width, push } = useNav()!;
-  const [filter, setFilter] = useState('');
-  const query = useDeferredValue(filter.trim().toLowerCase());
-  const [page, setPage] = useState(0);
-  const [inline, setInline] = useState<string | null>(null);
+  const { model } = useNav()!;
+  if ('table' in view) {
+    const table = model.table(view.table);
+    return table ?
+        <TableList
+          table={table}
+          pks={view.pks}
+          scroller={scroller}
+          header={header}
+        />
+      : <>
+          {header(null)}
+          <Gone />
+        </>;
+  }
+  return <IdList ids={view.ids} scroller={scroller} header={header} />;
+}
 
-  const table = model.tables.find(
-    t => t.key === (view.table ?? tableOf(view.ids)),
+/** Rows of one table: its columns, paged, with `+N` and meta columns */
+function TableList({
+  table,
+  pks,
+  scroller,
+  header,
+}: {
+  table: EntityTable;
+  pks: readonly string[] | undefined;
+  scroller: Scroller;
+  header: Header;
+}) {
+  const { model, width } = useNav()!;
+  const [page, setPage] = useState(0);
+  const rows = useMemo(
+    () => (pks ? pks.flatMap(pk => table.get(pk) ?? []) : table.rows),
+    [table, pks],
   );
+  const { columns, pages, more } = useMemo(
+    () => tableColumns(table, rows, width, page, true),
+    [table, rows, width, page],
+  );
+  return (
+    <FilteredRows
+      rows={rows}
+      columns={columns}
+      more={more}
+      record={row => <EntityDetail row={row} model={model} />}
+      scroller={scroller}
+      header={header}
+      tools={<Pager pages={pages} page={page} onChange={setPage} />}
+    />
+  );
+}
+
+/** Rows by id: endpoints, or a mix of tables */
+function IdList({
+  ids,
+  scroller,
+  header,
+}: {
+  ids: readonly string[];
+  scroller: Scroller;
+  header: Header;
+}) {
+  const { model, width } = useNav()!;
   const rows = useMemo(
+    () => ids.flatMap(id => findRow(model, id) ?? []),
+    [model, ids],
+  );
+  const columns = useMemo(
     () =>
-      view.ids ?
-        view.ids.flatMap(id => findRow(model, id) ?? [])
-      : (table?.rows ?? []),
-    [model, view.ids, table],
+      rows.every(isEndpointRow) ?
+        (endpointColumns(width) as Column<AnyRow>[])
+      : mixedColumns(width),
+    [rows, width],
   );
+  return (
+    <FilteredRows
+      rows={rows}
+      columns={columns}
+      scroller={scroller}
+      header={header}
+    />
+  );
+}
+
+/** A filter box over a windowed table of `rows` */
+function FilteredRows<R extends AnyRow>({
+  rows,
+  columns,
+  more,
+  record,
+  scroller,
+  header,
+  tools,
+}: {
+  rows: readonly R[];
+  columns: readonly Column<R>[];
+  more?: (row: R) => number;
+  record?: (row: R) => React.ReactNode;
+  scroller: Scroller;
+  header: Header;
+  tools?: React.ReactNode;
+}) {
+  const { push } = useNav()!;
+  const [filter, setFilter] = useState('');
+  const query = useDeferredValue(filter.trim().toLowerCase());
+  const [inline, setInline] = useState<string | null>(null);
   const matches = useMemo(
     () => (query ? rows.filter(row => searchText(row).includes(query)) : rows),
     [rows, query],
   );
-
-  let columns: readonly Column<AnyRow>[];
-  let more: ((row: AnyRow) => number) | undefined;
-  let pages: readonly (readonly unknown[])[] = [];
-  if (table) {
-    const fit = tableColumns(table, rows as EntityRow[], width, page, true);
-    columns = fit.columns as unknown as Column<AnyRow>[];
-    more = fit.more as ((row: AnyRow) => number) | undefined;
-    pages = fit.pages;
-  } else if (rows.every(row => isEndpointId(row.id))) {
-    columns = endpointColumns(width) as Column<AnyRow>[];
-  } else {
-    columns = mixedColumns(width);
-  }
-
-  const openIndex = inline ? matches.findIndex(row => row.id === inline) : -1;
+  const openIndex = useMemo(
+    () => (inline ? matches.findIndex(row => row.id === inline) : -1),
+    [matches, inline],
+  );
   const { start, end, before, after, spacer } = useWindow(
     scroller,
     matches.length,
@@ -104,10 +182,10 @@ export function ListView({
             placeholder="filter"
             aria-label="Filter rows"
           />
-          <Pager pages={pages} page={page} onChange={setPage} />
+          {tools}
         </>,
       )}
-      <RowsTable<AnyRow>
+      <RowsTable
         columns={columns}
         rows={matches.slice(start, end)}
         before={before}
@@ -117,12 +195,7 @@ export function ListView({
         more={more}
         inline={inline}
         onInline={setInline}
-        record={row => (
-          <EntityDetail
-            row={row as EntityRow}
-            referrers={referrersOf(model).get(row.id)}
-          />
-        )}
+        record={record}
         foot={
           query ?
             <span>
@@ -137,18 +210,16 @@ export function ListView({
   );
 }
 
-/** The one table every id of `ids` is in, if they share one */
-function tableOf(ids: readonly string[] | undefined) {
-  const [first] = ids ?? [];
-  if (!first || isEndpointId(first)) return;
-  const prefix = first.slice(0, first.indexOf('\u001f', 2) + 1);
-  if (ids!.every(id => id.startsWith(prefix))) return prefix.slice(2, -1);
-}
+const Gone = () => (
+  <div className={styles.record}>
+    <span className={styles.dim}>No longer in the store</span>
+  </div>
+);
 
 /** Lowercase text a filter matches against, cached with the stored object */
 const searchCache = new WeakMap<object, string>();
 function searchText(row: AnyRow) {
-  if ('key' in row) return row.key.toLowerCase();
+  if (isEndpointRow(row)) return row.key.toLowerCase();
   const key = row.raw && typeof row.raw === 'object' ? row.raw : null;
   let text = key && searchCache.get(key);
   if (text) return text;
@@ -172,7 +243,8 @@ function useWindow(
   // measure after each render: a row's height, and the open record's
   useLayoutEffect(() => {
     const row = spacer.current?.nextElementSibling as HTMLElement | null;
-    if (row?.offsetHeight) rowHeight.current = row.offsetHeight;
+    if (row?.dataset.id && row.offsetHeight)
+      rowHeight.current = row.offsetHeight;
     const record = spacer.current?.parentElement?.querySelector<HTMLElement>(
       `.${styles.recordRow}`,
     );
@@ -185,11 +257,7 @@ function useWindow(
     const update = () => {
       const top = spacer.current;
       if (!top) return;
-      const base =
-        top.getBoundingClientRect().top -
-        el.getBoundingClientRect().top +
-        el.scrollTop;
-      const y = el.scrollTop - base;
+      const y = el.scrollTop - offsetIn(el, top);
       const h = rowHeight.current;
       let first = y / h;
       if (openIndex >= 0 && first > openIndex + 1)
@@ -230,24 +298,16 @@ function useWindow(
 }
 
 /** One row with everything about it */
-export function RecordView({ id, header }: { id: string; header: Header }) {
+export function RecordView({ id }: { id: string }) {
   const { model } = useNav()!;
   const row = findRow(model, id);
+  if (!row) return <Gone />;
   return (
-    <>
-      {header()}
-      <div className={styles.record}>
-        {!row ?
-          <span className={styles.dim}>No longer in the store</span>
-        : isEndpointId(id) ?
-          <EndpointDetail row={row as EndpointRow} />
-        : <EntityDetail
-            row={row as EntityRow}
-            referrers={referrersOf(model).get(id)}
-          />
-        }
-      </div>
-    </>
+    <div className={styles.record}>
+      {isEndpointRow(row) ?
+        <EndpointDetail row={row} />
+      : <EntityDetail row={row} model={model} />}
+    </div>
   );
 }
 
@@ -258,9 +318,9 @@ export function crumbLabel(view: View, model: StoreModel): React.ReactNode {
       return 'State';
     case 'list': {
       const count =
-        view.ids?.length ??
-        model.tables.find(t => t.key === view.table)?.rows.length ??
-        0;
+        'ids' in view ? view.ids.length
+        : view.pks ? view.pks.length
+        : (model.table(view.table)?.rows.length ?? 0);
       return (
         <>
           <span className={styles.crumbName}>{view.label}</span>
@@ -271,18 +331,11 @@ export function crumbLabel(view: View, model: StoreModel): React.ReactNode {
     case 'record': {
       const row = findRow(model, view.id);
       if (!row) return '…';
-      if ('key' in row)
-        return (
-          <>
-            <span className={styles.method}>{row.method}</span> {row.path}
-          </>
-        );
-      return (
-        <>
-          <span className={styles.crumbName}>{row.table}</span>{' '}
-          <b>{prettyPk(row.pk)}</b>
-        </>
-      );
+      return isEndpointRow(row) ?
+          <EndpointKey method={row.method} path={row.path} />
+        : <span className={styles.crumbName}>
+            <EntityKey table={row.table} pk={row.pk} />
+          </span>;
     }
   }
 }
diff --git a/website/src/components/Playground/preview/store/RootView.tsx b/website/src/components/Playground/preview/store/RootView.tsx
index 6aa2dd6e32ed..32ec4fb7e755 100644
--- a/website/src/components/Playground/preview/store/RootView.tsx
+++ b/website/src/components/Playground/preview/store/RootView.tsx
@@ -1,17 +1,17 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { TIME_WIDTH } from './columns';
 import { EntityDetail } from './Details';
 import {
   optimisticId,
-  referrersOf,
   splitKey,
   type EntityRow,
   type EntityTable,
   type StoreModel,
 } from './model';
-import { useNav } from './nav';
+import { offsetIn, useNav } from './nav';
 import { plain } from './refs';
+import { GroupLabel, Internals, SectionBlock } from './Sections';
 import styles from './store.module.css';
 import {
   endpointColumns,
@@ -20,7 +20,7 @@ import {
   tableColumns,
   type Column,
 } from './Table';
-import { Field, Inline, Primitive } from './Value';
+import { EndpointKey, Inline, Primitive } from './Value';
 
 /** Rows a table shows before "N more"; tables this short show them all */
 const PREVIEW_ROWS = 5;
@@ -32,20 +32,23 @@ const preview = <T,>(rows: readonly T[]) =>
   rows.length > SHOW_ALL_UNDER ? rows.slice(0, PREVIEW_ROWS) : rows;
 
 /** The whole store at a glance: a few rows of everything */
-export default function RootView() {
+export default function RootView({
+  scroller,
+}: {
+  scroller: React.RefObject<HTMLElement | null>;
+}) {
   const { model, width, push } = useNav()!;
   const [closed, setClosed] = useState<ReadonlySet<string>>(
-    () => new Set(['internals']),
+    () => new Set(['Internals']),
   );
-  const section = (name: string, title: string, count: number | undefined) => ({
-    name,
+  const section = (title: string, count?: number) => ({
     title,
     count,
-    open: !closed.has(name),
+    open: !closed.has(title),
     onToggle: () =>
       setClosed(prev => {
         const next = new Set(prev);
-        if (!next.delete(name)) next.add(name);
+        if (!next.delete(title)) next.add(title);
         return next;
       }),
   });
@@ -55,13 +58,14 @@ export default function RootView() {
   return (
     <>
       {model.optimistic.length > 0 && (
-        <Section
-          {...section('optimistic', 'Optimistic', model.optimistic.length)}
-        >
-          <OptimisticTable model={model} />
-        </Section>
+        <SectionBlock {...section('Optimistic', model.optimistic.length)}>
+          <RowsTable
+            columns={optimisticColumns}
+            rows={model.optimistic.map(o => ({ ...o, id: optimisticId(o) }))}
+          />
+        </SectionBlock>
       )}
-      <Section {...section('endpoints', 'Endpoints', model.endpoints.length)}>
+      <SectionBlock {...section('Endpoints', model.endpoints.length)}>
         {endpoints.length > 0 && (
           <RowsTable
             columns={endpointColumns(width)}
@@ -85,84 +89,46 @@ export default function RootView() {
             }
           />
         )}
-      </Section>
-      <Section {...section('entities', 'Entities', entityCount)}>
-        {model.tables.length > INDEX_OVER && <TableIndex model={model} />}
+      </SectionBlock>
+      <SectionBlock {...section('Entities', entityCount)}>
+        {model.tables.length > INDEX_OVER && (
+          <TableIndex model={model} scroller={scroller} />
+        )}
         {model.tables.map(table => (
           <Group key={table.key} table={table} />
         ))}
-      </Section>
-      <Section {...section('internals', 'Internals', undefined)}>
-        <div className={styles.detail}>
-          <Field name="lastReset" node={{ t: 'val', v: model.lastReset }} />
-          <Field name="indexes" node={plain(model.indexes)} />
-        </div>
-      </Section>
+      </SectionBlock>
+      <SectionBlock {...section('Internals')}>
+        <Internals model={model} />
+      </SectionBlock>
     </>
   );
 }
 
-function Section({
-  name,
-  title,
-  count,
-  open,
-  onToggle,
-  children,
+/** Jumps to a table further down */
+function TableIndex({
+  model,
+  scroller,
 }: {
-  name: string;
-  title: string;
-  count: number | undefined;
-  open: boolean;
-  onToggle: () => void;
-  children: React.ReactNode;
+  model: StoreModel;
+  scroller: React.RefObject<HTMLElement | null>;
 }) {
-  return (
-    <section className={styles.section} data-section={name}>
-      <button
-        type="button"
-        className={clsx(styles.sectionHeader, !open && styles.closed)}
-        aria-expanded={open}
-        onClick={onToggle}
-      >
-        {title}
-        {count !== undefined && (
-          <span className={styles.count}>{count.toLocaleString()}</span>
-        )}
-      </button>
-      {open && children}
-    </section>
-  );
-}
-
-/** Jumps to a table further down */
-function TableIndex({ model }: { model: StoreModel }) {
   return (
     <div className={styles.tableIndex}>
       {model.tables.map(table => (
         <button
           key={table.key}
           type="button"
-          onClick={e => {
-            const scroller =
-              e.currentTarget.closest<HTMLElement>('[data-level]');
-            const group = scroller?.querySelector<HTMLElement>(
-              `[data-table="${CSS.escape(table.key)}"]`,
+          onClick={() => {
+            const el = scroller.current;
+            const group = el?.querySelector<HTMLElement>(
+              `[data-table="${table.key.replace(/["\\]/g, '\\$&')}"]`,
             );
-            if (!scroller || !group) return;
-            scroller.scrollTo({
-              top:
-                group.getBoundingClientRect().top -
-                scroller.getBoundingClientRect().top +
-                scroller.scrollTop,
-              behavior: 'smooth',
-            });
+            if (el && group)
+              el.scrollTo({ top: offsetIn(el, group), behavior: 'smooth' });
           }}
         >
-          {table.key}
-          <span className={styles.count}>
-            {table.rows.length.toLocaleString()}
-          </span>
+          <GroupLabel table={table} />
         </button>
       ))}
     </div>
@@ -177,7 +143,10 @@ function Group({ table }: { table: EntityTable }) {
   const [inline, setInline] = useState<string | null>(null);
   const [active, setActive] = useState(false);
   const rows = preview(table.rows);
-  const { columns, pages, more } = tableColumns(table, table.rows, width, page);
+  const { columns, pages, more } = useMemo(
+    () => tableColumns(table, table.rows, width, page),
+    [table, width, page],
+  );
   const hidden = table.rows.length - rows.length;
   return (
     <div
@@ -186,13 +155,7 @@ function Group({ table }: { table: EntityTable }) {
       data-active={active || undefined}
     >
       <div className={styles.groupHeader} onClick={() => setActive(a => !a)}>
-        <span className={styles.type}>{table.key}</span>
-        <span className={styles.count}>
-          {table.rows.length.toLocaleString()}
-        </span>
-        {table.kind === 'collection' && (
-          <span className={styles.kind}>Collection</span>
-        )}
+        <GroupLabel table={table} />
         <span className={styles.tool}>
           <Pager pages={pages} page={page} onChange={setPage} />
         </span>
@@ -204,9 +167,7 @@ function Group({ table }: { table: EntityTable }) {
         more={more}
         inline={inline}
         onInline={setInline}
-        record={row => (
-          <EntityDetail row={row} referrers={referrersOf(model).get(row.id)} />
-        )}
+        record={row => <EntityDetail row={row} model={model} />}
         foot={
           hidden > 0 && (
             <button
@@ -227,40 +188,26 @@ function Group({ table }: { table: EntityTable }) {
 type Optimistic = StoreModel['optimistic'][number] & { id: string };
 
 /** Updates applied ahead of their response */
-function OptimisticTable({ model }: { model: StoreModel }) {
-  const columns: Column<Optimistic>[] = [
-    {
-      id: 'key',
-      header: 'key',
-      width: '40%',
-      cell: ({ key }) => {
-        const { method, path } = splitKey(key);
-        return (
-          <span title={key}>
-            <span className={clsx(styles.method, styles.optimistic)}>
-              {method}
-            </span>{' '}
-            {path}
-          </span>
-        );
-      },
-    },
-    {
-      id: 'args',
-      header: 'args',
-      cell: ({ args }) => <Inline node={plain(args)} />,
-    },
-    {
-      id: 'fetchedAt',
-      header: 'sent',
-      width: 124,
-      cell: ({ fetchedAt }) => <Primitive value={fetchedAt} name="fetchedAt" />,
-    },
-  ];
-  return (
-    <RowsTable
-      columns={columns}
-      rows={model.optimistic.map(o => ({ ...o, id: optimisticId(o) }))}
-    />
-  );
-}
+const optimisticColumns: Column<Optimistic>[] = [
+  {
+    id: 'key',
+    header: 'key',
+    width: '40%',
+    cell: ({ key }) => (
+      <span className={styles.optimistic} title={key}>
+        <EndpointKey {...splitKey(key)} />
+      </span>
+    ),
+  },
+  {
+    id: 'args',
+    header: 'args',
+    cell: ({ args }) => <Inline node={plain(args)} />,
+  },
+  {
+    id: 'fetchedAt',
+    header: 'sent',
+    width: TIME_WIDTH,
+    cell: ({ fetchedAt }) => <Primitive value={fetchedAt} name="fetchedAt" />,
+  },
+];
diff --git a/website/src/components/Playground/preview/store/Sections.tsx b/website/src/components/Playground/preview/store/Sections.tsx
index 8f6a2f44a341..e74e1a193048 100644
--- a/website/src/components/Playground/preview/store/Sections.tsx
+++ b/website/src/components/Playground/preview/store/Sections.tsx
@@ -6,7 +6,7 @@ import { optimisticId, splitKey } from './model';
 import { plain } from './refs';
 import styles from './store.module.css';
 import { ROW_LIMIT, sectionId, showAllId, useStoreUI } from './StoreUI';
-import { Field } from './Value';
+import { EndpointKey, Field } from './Value';
 
 /** Every view shows the same sections; only how rows lay out differs */
 export function StoreSections({
@@ -47,24 +47,26 @@ export function EndpointLabel({
   return (
     <>
       <Chevron open={open} />
-      <span className={styles.method}>{row.method}</span>{' '}
-      <span className={styles.trunc}>{row.path}</span>
+      <span className={styles.trunc}>
+        <EndpointKey method={row.method} path={row.path} />
+      </span>
     </>
   );
 }
 
+/** `Post 312`, with a disclosure arrow when `open` is given */
 export function GroupLabel({
   table,
   open,
 }: {
   table: EntityTable;
-  open: boolean;
+  open?: boolean;
 }) {
   return (
     <>
-      <Chevron open={open} />
+      {open !== undefined && <Chevron open={open} />}
       <span className={styles.type}>{table.key}</span>
-      <span className={styles.count}>{table.rows.length}</span>
+      <span className={styles.count}>{table.rows.length.toLocaleString()}</span>
       {table.kind === 'collection' && (
         <span className={styles.kind}>Collection</span>
       )}
@@ -108,32 +110,53 @@ export function Chevron({ open }: { open: boolean }) {
   );
 }
 
-/** Collapsible block with a sticky header */
+/** Collapsible block with a sticky header; the tree view's open state */
 export function Section({
   name,
+  ...props
+}: Omit<React.ComponentProps<typeof SectionBlock>, 'open' | 'onToggle'> & {
+  name: string;
+}) {
+  const { isOpen, toggle } = useStoreUI();
+  const id = sectionId(name);
+  return (
+    <SectionBlock
+      {...props}
+      open={isOpen(id)}
+      onToggle={() => toggle(id)}
+      chevron
+    />
+  );
+}
+
+export function SectionBlock({
   title,
   count,
+  open,
+  onToggle,
+  chevron = false,
   children,
 }: {
-  name: string;
   title: string;
   count?: number;
+  open: boolean;
+  onToggle: () => void;
+  chevron?: boolean;
   children: React.ReactNode;
 }) {
-  const { isOpen, toggle } = useStoreUI();
-  const id = sectionId(name);
-  const open = isOpen(id);
   return (
     <section className={styles.section}>
       <button
         type="button"
-        className={styles.sectionHeader}
+        className={clsx(styles.sectionHeader, !open && styles.closed)}
         aria-expanded={open}
-        onClick={() => toggle(id)}
+        onClick={onToggle}
       >
-        <Chevron open={open} />
+        {chevron && <Chevron open={open} />}
         {title}
-        {count !== undefined && <span className={styles.count}>{count}</span>}
+        {count !== undefined && (
+          <span className={styles.count}>{count.toLocaleString()}</span>
+        )}
       </button>
       {open && children}
     </section>
@@ -232,10 +255,16 @@ function OptimisticRow({
 function InternalsSection({ model }: { model: StoreModel }) {
   return (
     <Section name="internals" title="Internals">
-      <div className={styles.detail}>
-        <Field name="lastReset" node={{ t: 'val', v: model.lastReset }} />
-        <Field name="indexes" node={plain(model.indexes)} />
-      </div>
+      <Internals model={model} />
     </Section>
   );
 }
+
+export function Internals({ model }: { model: StoreModel }) {
+  return (
+    <div className={styles.detail}>
+      <Field name="lastReset" node={{ t: 'val', v: model.lastReset }} />
+      <Field name="indexes" node={plain(model.indexes)} />
+    </div>
+  );
+}
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 612fa8c8b82b..7597e1cb4e80 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -11,15 +11,15 @@ import React, {
 } from 'react';
 
 import { crumbLabel, ListView, RecordView } from './DiveViews';
-import { buildModel, changedIds, type StoreModel } from './model';
-import { NavContext, type Nav, type View } from './nav';
+import { buildModel, isChanged, type StoreModel } from './model';
+import { NavContext, offsetIn, type Nav, type View } from './nav';
 import RootView from './RootView';
 import type SchemaRegistry from './schemaRegistry';
 import styles from './store.module.css';
 import { StoreUIProvider } from './StoreUI';
 import TreeView from './TreeView';
 import { useTabStorage } from '../../../../utils/tabStorage';
-import { springEasing, springs } from '../../../motion';
+import { prefersReducedMotion, springEasing, springs } from '../../../motion';
 
 interface Entry {
   readonly key: number;
@@ -147,42 +147,46 @@ function Levels({ model, width }: { model: StoreModel; width: number }) {
   };
 
   return (
-    <NavContext.Provider value={nav}>
-      <div className={styles.levels}>
-        {stack.map((entry, depth) => (
-          <Level
-            key={entry.key}
-            depth={depth}
-            top={depth === stack.length - 1}
-            onBack={back}
-            returnTo={returnTo}
-          >
-            {scroller =>
-              entry.view.kind === 'root' ? <RootView />
-              : entry.view.kind === 'list' ?
-                <ListView
-                  view={entry.view}
-                  scroller={scroller}
-                  header={tools => crumbs(depth, tools)}
-                />
-              : <RecordView id={entry.view.id} header={() => crumbs(depth)} />
-            }
-          </Level>
-        ))}
-      </div>
-    </NavContext.Provider>
+    <div className={styles.levels}>
+      {stack.map(({ key, view }, depth) => (
+        <Level
+          key={key}
+          nav={nav}
+          depth={depth}
+          top={depth === stack.length - 1}
+          onBack={back}
+          returnTo={returnTo}
+        >
+          {scroller =>
+            view.kind === 'root' ? <RootView scroller={scroller} />
+            : view.kind === 'list' ?
+              <ListView
+                view={view}
+                scroller={scroller}
+                header={tools => crumbs(depth, tools)}
+              />
+            : <>
+                {crumbs(depth)}
+                <RecordView id={view.id} />
+              </>
+          }
+        </Level>
+      ))}
+    </div>
   );
 }
 
 /** One scrolling level; slides in when pushed, and back in from the other
  * side when what covered it closes */
 function Level({
+  nav,
   depth,
   top,
   onBack,
   returnTo,
   children,
 }: {
+  nav: Nav;
   depth: number;
   top: boolean;
   onBack: (depth: number) => void;
@@ -192,6 +196,18 @@ function Level({
   ) => React.ReactNode;
 }) {
   const ref = useRef<HTMLDivElement>(null);
+  // a covered level keeps what it showed, so store updates cost it nothing
+  // until it is uncovered
+  const shown = useRef(nav);
+  if (top) shown.current = nav;
+  const current = shown.current;
+  const content = useMemo(
+    () => (
+      <NavContext.Provider value={current}>{children(ref)}</NavContext.Provider>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `children` is new each render; what it shows only changes with `current`
+    [current],
+  );
   const wasTop = useRef<boolean | null>(null);
   useLayoutEffect(() => {
     const el = ref.current;
@@ -201,8 +217,9 @@ function Level({
     // keyboard focus follows, so Escape goes back
     el.focus({ preventScroll: true });
     slide(el, before === null ? 1 : -1);
-    if (before === false && returnTo.current) {
-      flash(el, new Set([returnTo.current]));
+    const from = returnTo.current;
+    if (before === false && from) {
+      flash(el, id => id === from);
       returnTo.current = null;
     }
   }, [top, depth, returnTo]);
@@ -221,14 +238,14 @@ function Level({
         }
       }}
     >
-      {children(ref)}
+      {content}
     </div>
   );
 }
 
 /** Moves in from `direction` (1: the right, -1: the left) */
 function slide(el: HTMLElement, direction: 1 | -1) {
-  if (typeof el.animate !== 'function' || reducedMotion()) return;
+  if (typeof el.animate !== 'function' || prefersReducedMotion()) return;
   el.animate(
     [
       { opacity: 0, translate: `${direction * 24}px 0` },
@@ -238,15 +255,12 @@ function slide(el: HTMLElement, direction: 1 | -1) {
   );
 }
 const smooth = springEasing(springs.smooth);
-const reducedMotion = () =>
-  matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-/** Highlights the rows of `ids` in `scope` for a moment */
-function flash(scope: HTMLElement, ids: ReadonlySet<string>) {
-  if (!ids.size || typeof scope.animate !== 'function' || reducedMotion())
-    return;
+/** Highlights the rows in `scope` whose id passes `test`, for a moment */
+function flash(scope: HTMLElement, test: (id: string) => boolean) {
+  if (typeof scope.animate !== 'function' || prefersReducedMotion()) return;
   for (const row of scope.querySelectorAll<HTMLElement>('[data-id]')) {
-    if (!ids.has(row.dataset.id!)) continue;
+    if (!test(row.dataset.id!)) continue;
     row.animate(
       [
         { backgroundColor: 'var(--store-flash)' },
@@ -269,7 +283,7 @@ function TreeLevel({ model }: { model: StoreModel }) {
   return (
     <StoreUIProvider model={model} onReveal={setPending}>
       <div className={styles.levels}>
-        <div className={styles.level} ref={scroller}>
+        <div className={styles.level} ref={scroller} data-level>
           <TreeView model={model} />
         </div>
       </div>
@@ -292,7 +306,8 @@ function useWidth(ref: React.RefObject<HTMLElement | null>) {
   return width;
 }
 
-/** Briefly highlights rows whose stored value changed since the last state */
+/** Briefly highlights rows on screen whose stored value changed since the
+ * last state (only those: a big store has far more rows than the screen) */
 function useFlashChanges(
   ref: React.RefObject<HTMLElement | null>,
   state: State<unknown>,
@@ -301,9 +316,11 @@ function useFlashChanges(
   useEffect(() => {
     const before = prev.current;
     prev.current = state;
-    const el = ref.current;
+    const el = ref.current?.querySelector<HTMLElement>(
+      '[data-level]:not([data-covered])',
+    );
     if (!el || before === state) return;
-    flash(el, changedIds(before, state));
+    flash(el, id => isChanged(before, state, id));
   }, [ref, state]);
 }
 
@@ -312,12 +329,11 @@ function scrollToRow(scroller: HTMLElement, id: string) {
     `[data-id="${CSS.escape(id)}"]`,
   );
   if (!row) return;
-  const top =
-    row.getBoundingClientRect().top -
-    scroller.getBoundingClientRect().top +
-    scroller.scrollTop;
   // leave room for the section header
-  scroller.scrollTo({ top: Math.max(0, top - 32), behavior: 'smooth' });
+  scroller.scrollTo({
+    top: Math.max(0, offsetIn(scroller, row) - 32),
+    behavior: 'smooth',
+  });
   row.focus({ preventScroll: true });
 }
 
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index f78aaa33c3aa..738e0eefa9ab 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -6,21 +6,21 @@ import {
   idWidth,
   MORE_WIDTH,
   pageColumns,
-  type ColumnSize,
+  STATUS_WIDTH,
+  TIME_WIDTH,
 } from './columns';
 import { Status } from './Details';
 import {
-  isEndpointId,
+  errorText,
   prettyPk,
+  type AnyRow,
   type EndpointRow,
   type EntityRow,
   type EntityTable,
 } from './model';
 import type { VNode } from './refs';
 import styles from './store.module.css';
-import { Cell, Inline, Primitive, RefChip } from './Value';
-
-export type AnyRow = EndpointRow | EntityRow;
+import { Cell, EndpointKey, Inline, Primitive, RowChip } from './Value';
 
 export interface Column<R> {
   readonly id: string;
@@ -54,7 +54,8 @@ export function RowsTable<R extends { readonly id: string }>({
   onInline?: (id: string | null) => void;
   record?: (row: R) => React.ReactNode;
   foot?: React.ReactNode;
-  /** Heights (px) of rows left out above and below a window */
+  /** Heights (px) of rows left out above and below a window, which
+   * `beforeRef` measures from */
   before?: number;
   after?: number;
   beforeRef?: React.Ref<HTMLTableRowElement>;
@@ -79,11 +80,13 @@ export function RowsTable<R extends { readonly id: string }>({
         </tr>
       </thead>
       <tbody>
-        <tr
-          ref={beforeRef}
-          className={styles.spacer}
-          style={{ height: before }}
-        />
+        {beforeRef && (
+          <tr
+            ref={beforeRef}
+            className={styles.spacer}
+            style={{ height: before }}
+          />
+        )}
         {rows.map(row => {
           const open = inline === row.id;
           return (
@@ -126,7 +129,9 @@ export function RowsTable<R extends { readonly id: string }>({
             </React.Fragment>
           );
         })}
-        <tr className={styles.spacer} style={{ height: after }} />
+        {beforeRef && (
+          <tr className={styles.spacer} style={{ height: after }} />
+        )}
         {foot && (
           <tr className={styles.foot}>
             <td colSpan={span}>{foot}</td>
@@ -216,11 +221,6 @@ export function Pager({
   );
 }
 
-const VALUE = '';
-/** A time of day, `3:38:36.875 PM` */
-const TIME_WIDTH = 124;
-const META = 'meta\u001f';
-const metaFields = { fetchedAt: 'fetched', expiresAt: 'expires' } as const;
 const keyLabel = {
   entity: 'id',
   collection: 'args',
@@ -228,16 +228,78 @@ const keyLabel = {
   unknown: 'key',
 } as const;
 
+/** A column before it is fitted: what it wants, and its cell at a width */
+interface Spec {
+  readonly id: string;
+  readonly header: string;
+  readonly want: number;
+  readonly cell: (row: EntityRow, width: number) => React.ReactNode;
+  /** Data the row has that this column shows (counted by `+N` when hidden) */
+  readonly has?: (row: EntityRow) => boolean;
+}
+
 function field(node: VNode, name: string): VNode | undefined {
-  if (name === VALUE) return node;
   if (node.t !== 'obj') return;
   return node.entries.find(([k]) => k === name)?.[1];
 }
 
+/** One column per field (entities) or for the whole value (other tables) */
+function dataSpecs(
+  table: EntityTable,
+  rows: readonly EntityRow[],
+  width: number,
+): Spec[] {
+  const owner = (row: EntityRow) => `${table.key} ${prettyPk(row.pk)}`;
+  if (table.kind !== 'entity') {
+    const name = table.kind === 'collection' ? 'items' : 'value';
+    return [
+      {
+        id: name,
+        header: name,
+        want: columnWidth(rows, row => row.value, name, width),
+        cell: (row, w) => (
+          <Cell node={row.value} name={name} width={w} owner={owner(row)} />
+        ),
+        has: () => true,
+      },
+    ];
+  }
+  return table.fields.map(name => {
+    const value = (row: EntityRow) => field(row.value, name);
+    return {
+      id: name,
+      header: name,
+      want: columnWidth(rows, value, name, width),
+      cell: (row, w) => {
+        const node = value(row);
+        return (
+          node && <Cell node={node} name={name} width={w} owner={owner(row)} />
+        );
+      },
+      has: row => value(row) !== undefined,
+    };
+  });
+}
+
+/** When each row was fetched and expires */
+const metaSpecs: Spec[] = (
+  [
+    ['fetchedAt', 'fetched'],
+    ['expiresAt', 'expires'],
+  ] as const
+).map(([name, header]) => ({
+  id: name,
+  header,
+  want: TIME_WIDTH,
+  cell: row => {
+    const v = row.meta?.[name];
+    return v === undefined ? null : <Primitive value={v} name={name} />;
+  },
+}));
+
 /**
- * Columns of `table` that fit `width`, as pages. Entities get a column per
- * field, other tables one value column; `withMeta` adds when each row was
- * fetched and expires.
+ * Columns of `table` that fit `width`, as pages; `withMeta` adds when each
+ * row was fetched and expires.
  */
 export function tableColumns(
   table: EntityTable,
@@ -246,26 +308,18 @@ export function tableColumns(
   page: number,
   withMeta = false,
 ) {
-  const narrow = width < 480;
-  const fields = table.kind === 'entity' ? table.fields : [VALUE];
-  const sizes: ColumnSize[] = fields.map(f => ({
-    id: f,
-    width: columnWidth(rows, row => field(row.value, f), f, narrow),
-  }));
-  if (withMeta)
-    for (const f of Object.keys(metaFields))
-      sizes.push({ id: META + f, width: TIME_WIDTH });
+  const specs = dataSpecs(table, rows, width);
+  if (withMeta) specs.push(...metaSpecs);
   const keyWidth =
     table.kind === 'entity' ?
       idWidth(rows)
     : Math.min(idWidth(rows) + 40, Math.round(width * 0.4));
-  const pages = pageColumns(sizes, keyWidth, width);
+  const pages = pageColumns(specs, keyWidth, width);
   const current = pages[Math.min(page, pages.length - 1)];
   // columns share the room left by the key (and +N) in proportion to what
   // they want; the last one has no width, so it absorbs rounding
   const room = width - keyWidth - (pages.length > 1 ? MORE_WIDTH : 0);
-  const scale = room / current.reduce((w, c) => w + c.width, 0);
-  const shown = new Set(current.map(c => c.id));
+  const scale = room / current.reduce((w, c) => w + c.want, 0);
   const columns: Column<EntityRow>[] = [
     {
       id: 'key',
@@ -274,50 +328,26 @@ export function tableColumns(
       className: styles.key,
       cell: row => prettyPk(row.pk),
     },
-    ...current.map((c): Column<EntityRow> => ({
-      id: c.id,
-      header:
-        c.id.startsWith(META) ?
-          metaFields[c.id.slice(META.length) as keyof typeof metaFields]
-        : c.id || (table.kind === 'collection' ? 'items' : 'value'),
-      width: c === current[current.length - 1] ? undefined : c.width * scale,
-      cell:
-        c.id.startsWith(META) ?
-          row => {
-            const name = c.id.slice(META.length);
-            const v = row.meta?.[name as keyof typeof metaFields];
-            return v === undefined ? null : <Primitive value={v} name={name} />;
-          }
-        : row => {
-            const node = field(row.value, c.id);
-            return (
-              node && (
-                <Cell
-                  node={node}
-                  name={c.id || 'items'}
-                  width={c.width * scale}
-                  owner={`${table.key} ${prettyPk(row.pk)}`}
-                />
-              )
-            );
-          },
-    })),
+    ...current.map((c, i) => {
+      const w = c.want * scale;
+      return {
+        id: c.id,
+        header: c.header,
+        width: i === current.length - 1 ? undefined : w,
+        cell: (row: EntityRow) => c.cell(row, w),
+      };
+    }),
   ];
+  const hidden = specs.filter(c => c.has && !current.includes(c));
   const more =
     pages.length > 1 ?
-      (row: EntityRow) => {
-        if (table.kind !== 'entity') return shown.has(VALUE) ? 0 : 1;
-        if (row.value.t !== 'obj') return 0;
-        return row.value.entries.filter(([k]) => k !== 'id' && !shown.has(k))
-          .length;
-      }
+      (row: EntityRow) => hidden.filter(c => c.has!(row)).length
     : undefined;
   return { columns, pages, more };
 }
 
 export function endpointColumns(width: number): Column<EndpointRow>[] {
   const keyWidth = Math.round(width * 0.4);
-  const statusWidth = 96;
   return [
     {
       id: 'key',
@@ -325,14 +355,14 @@ export function endpointColumns(width: number): Column<EndpointRow>[] {
       width: keyWidth,
       cell: row => (
         <span title={row.key}>
-          <span className={styles.method}>{row.method}</span> {row.path}
+          <EndpointKey method={row.method} path={row.path} />
         </span>
       ),
     },
     {
       id: 'status',
       header: 'status',
-      width: statusWidth,
+      width: STATUS_WIDTH,
       cell: row => <Status meta={row.meta} />,
     },
     {
@@ -344,17 +374,13 @@ export function endpointColumns(width: number): Column<EndpointRow>[] {
         : <Cell
             node={row.value}
             name="value"
-            width={width - keyWidth - statusWidth}
+            width={width - keyWidth - STATUS_WIDTH}
             owner={`${row.method} ${row.path}`}
           />,
     },
   ];
 }
 
-function errorText(error: unknown) {
-  return error instanceof Error ? error.message : String(error);
-}
-
 /** For lists that mix tables: each row as a ref, then its value */
 export function mixedColumns(width: number): Column<AnyRow>[] {
   return [
@@ -362,22 +388,7 @@ export function mixedColumns(width: number): Column<AnyRow>[] {
       id: 'ref',
       header: 'row',
       width: Math.round(width * 0.35),
-      cell: row =>
-        isEndpointId(row.id) ?
-          <RefChip
-            id={row.id}
-            className={styles.endpointRef}
-            label={`${(row as EndpointRow).method} ${(row as EndpointRow).path}`}
-          />
-        : <RefChip
-            id={row.id}
-            label={
-              <>
-                {(row as EntityRow).table}{' '}
-                <b>{prettyPk((row as EntityRow).pk)}</b>
-              </>
-            }
-          />,
+      cell: row => <RowChip row={row} />,
     },
     {
       id: 'value',
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 7b1551519266..35c7d06f85ac 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { EndpointDetail, EntityDetail, Status } from './Details';
 import {
   prettyPk,
-  referrersOf,
   type EndpointRow,
   type EntityRow,
   type EntityTable,
@@ -92,7 +91,7 @@ function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
       </div>
       {open && (
         <div className={styles.indent}>
-          <EntityDetail row={row} referrers={referrersOf(model).get(row.id)} />
+          <EntityDetail row={row} model={model} />
         </div>
       )}
     </>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 54fec68a7b90..3ad3dbd18b9f 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { entityId, prettyPk } from './model';
-import { useNav } from './nav';
+import { chipWidth } from './columns';
+import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
+import { useNav, type ListView } from './nav';
 import { CIRCULAR, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
@@ -40,28 +41,50 @@ export function RefChip({
   );
 }
 
-function EntityRef({ entityKey, pk }: { entityKey: string; pk: string }) {
+/** `GET /posts` */
+export function EndpointKey({
+  method,
+  path,
+}: {
+  method: string;
+  path: string;
+}) {
   return (
-    <RefChip
-      id={entityId(entityKey, pk)}
-      label={
-        <>
-          {entityKey} <b>{prettyPk(pk)}</b>
-        </>
-      }
-    />
+    <>
+      <span className={styles.method}>{method}</span> {path}
+    </>
+  );
+}
+
+/** `Post 1` */
+export function EntityKey({ table, pk }: { table: string; pk: string }) {
+  return (
+    <>
+      {table} <b>{prettyPk(pk)}</b>
+    </>
   );
 }
 
+/** A chip for any row, endpoint or stored */
+export function RowChip({ row }: { row: AnyRow }) {
+  return isEndpointRow(row) ?
+      <RefChip
+        id={row.id}
+        className={styles.endpointRef}
+        label={<EndpointKey method={row.method} path={row.path} />}
+      />
+    : <RefChip
+        id={row.id}
+        label={<EntityKey table={row.table} pk={row.pk} />}
+      />;
+}
+
 /** Dives into a list of rows: `+79`, or `Comment · 80` when none fit */
 export function CountChip({
-  ids,
-  label,
+  list,
   children,
 }: {
-  ids: readonly string[];
-  /** Breadcrumb for the list */
-  label: string;
+  list: ListView;
   children: React.ReactNode;
 }) {
   const nav = useNav();
@@ -71,7 +94,7 @@ export function CountChip({
       className={clsx(styles.ref, styles.countRef)}
       onClick={e => {
         e.stopPropagation();
-        nav?.push({ kind: 'list', ids, label });
+        nav?.push(list);
       }}
     >
       {children}
@@ -79,9 +102,6 @@ export function CountChip({
   );
 }
 
-/** Rough rendered width of a ref chip, in px */
-export const chipWidth = (key: string, pk: string) =>
-  (key.length + 1 + prettyPk(pk).length) * 6.6 + 14;
 /** Room for a `+79` chip and the separators around it */
 const COUNT_WIDTH = 44;
 
@@ -92,8 +112,34 @@ const isRefList = (
   node.t === 'arr' &&
   node.items.length > 0 &&
   node.items.every(i => i.t === 'ref');
-const refIds = (items: readonly RefNode[]) =>
-  items.map(i => entityId(i.key, i.pk));
+
+/** The list a count chip dives into: one table's rows when they share one */
+function refsList(items: readonly RefNode[], label: string): ListView {
+  const table = items[0].key;
+  return items.every(i => i.key === table) ?
+      { kind: 'list', label, table, pks: items.map(i => i.pk) }
+    : { kind: 'list', label, ids: items.map(i => entityId(i.key, i.pk)) };
+}
+
+/** The first `RECORD_REFS` chips; the table view dives into the rest */
+export function RefList({
+  chips,
+  list,
+}: {
+  chips: readonly React.ReactNode[];
+  list: () => ListView;
+}) {
+  const nav = useNav();
+  const cut = nav && chips.length > RECORD_REFS;
+  return (
+    <span className={styles.wrapList}>
+      {cut ? chips.slice(0, RECORD_REFS) : chips}
+      {cut && (
+        <CountChip list={list()}>+{chips.length - RECORD_REFS}</CountChip>
+      )}
+    </span>
+  );
+}
 
 /** Table cell: lists of refs show the chips that fit in `width`, then a
  * count chip for the rest */
@@ -114,39 +160,24 @@ export function Cell({
   let used = 16;
   let fit = 0;
   for (const item of items) {
-    const w = chipWidth(item.key, item.pk) + 8;
     const room = fit + 1 < items.length ? width - COUNT_WIDTH : width;
-    if (used + w > room) break;
-    used += w;
+    used += chipWidth(item.key, item.pk) + 8;
+    if (used > room) break;
     fit++;
   }
-  const label = `${owner} ${name}`;
+  const list = refsList(items, `${owner} ${name}`);
   if (!fit)
     return (
-      <CountChip ids={refIds(items)} label={label}>
+      <CountChip list={list}>
         {items[0].key} · {items.length}
       </CountChip>
     );
-  const rest = items.length - fit;
   return (
-    <span className={styles.inlineList}>
-      <span className={styles.dim}>[</span>
-      {items.slice(0, fit).map((item, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <span className={styles.dim}>, </span>}
-          <Inline node={item} />
-        </React.Fragment>
-      ))}
-      {rest > 0 && (
-        <>
-          <span className={styles.dim}>, </span>
-          <CountChip ids={refIds(items)} label={label}>
-            +{rest}
-          </CountChip>
-        </>
-      )}
-      <span className={styles.dim}>]</span>
-    </span>
+    <Inline
+      node={node}
+      limit={fit}
+      more={<CountChip list={list}>+{items.length - fit}</CountChip>}
+    />
   );
 }
 
@@ -155,19 +186,30 @@ export function Inline({
   node,
   name,
   bare = false,
+  limit = INLINE_LIMIT,
+  more,
 }: {
   node: VNode;
   name?: string;
   /** Top-level object without braces, every field (the row truncates) */
   bare?: boolean;
+  /** Array items shown */
+  limit?: number;
+  /** Stands for the items past `limit` (default: a dim `+N`) */
+  more?: React.ReactNode;
 }) {
   switch (node.t) {
     case 'ref':
-      return <EntityRef entityKey={node.key} pk={node.pk} />;
+      return (
+        <RefChip
+          id={entityId(node.key, node.pk)}
+          label={<EntityKey table={node.key} pk={node.pk} />}
+        />
+      );
     case 'val':
       return <Primitive value={node.v} name={name} />;
     case 'arr': {
-      const shown = node.items.slice(0, INLINE_LIMIT);
+      const shown = node.items.slice(0, limit);
       const rest = node.items.length - shown.length;
       return (
         <span className={styles.inlineList}>
@@ -178,7 +220,12 @@ export function Inline({
               <Inline node={item} />
             </React.Fragment>
           ))}
-          {rest > 0 && <span className={styles.dim}>, +{rest}</span>}
+          {rest > 0 && (
+            <>
+              <span className={styles.dim}>, </span>
+              {more ?? <span className={styles.dim}>+{rest}</span>}
+            </>
+          )}
           <span className={styles.dim}>]</span>
         </span>
       );
@@ -246,16 +293,14 @@ function BlockList({
   const [all, setAll] = useState(false);
   const nav = useNav();
   // the table view dives into long lists of refs instead of growing them
-  if (nav && isRefList(node) && node.items.length > RECORD_REFS)
+  if (nav && isRefList(node))
     return (
-      <span className={styles.wrapList}>
-        {node.items.slice(0, RECORD_REFS).map((item, i) => (
+      <RefList
+        chips={node.items.map((item, i) => (
           <Inline key={i} node={item} />
         ))}
-        <CountChip ids={refIds(node.items)} label={name}>
-          +{node.items.length - RECORD_REFS}
-        </CountChip>
-      </span>
+        list={() => refsList(node.items, name)}
+      />
     );
   const shown = all ? node.items : node.items.slice(0, BLOCK_LIMIT);
   const rest = node.items.length - shown.length;
diff --git a/website/src/components/Playground/preview/store/columns.ts b/website/src/components/Playground/preview/store/columns.ts
index 0b823eb02b40..99ee3a142971 100644
--- a/website/src/components/Playground/preview/store/columns.ts
+++ b/website/src/components/Playground/preview/store/columns.ts
@@ -1,21 +1,28 @@
 import { prettyPk, type EntityRow } from './model';
 import type { VNode } from './refs';
-import { chipWidth } from './Value';
 
-/** Width of one 12px monospace character */
+/** Width of one character: 12px monospace values, 11px chips, 10px spaced
+ * uppercase headers */
 const CHAR = 7.2;
+const CHIP_CHAR = 6.6;
+const HEADER_CHAR = 7.5;
 /** Cell padding (the outer columns have a little more) */
 const PAD = 20;
 /** The `+N` column that opens a row's other fields below it */
 export const MORE_WIDTH = 38;
+/** A time of day, `3:38:36.875 PM` */
+export const TIME_WIDTH = 124;
+/** A status pill, `fresh 57s` */
+export const STATUS_WIDTH = 96;
+/** Panels narrower than this get narrower columns (and one-column records,
+ * the `@container` query in store.module.css) */
+export const NARROW_WIDTH = 480;
 /** Rows sampled to size columns */
 const SAMPLE = 20;
 
-/** A data column and the width its values want */
-export interface ColumnSize {
-  readonly id: string;
-  readonly width: number;
-}
+/** Rough rendered width of a ref chip, in px */
+export const chipWidth = (key: string, pk: string) =>
+  (key.length + 1 + prettyPk(pk).length) * CHIP_CHAR + 14;
 
 /** Natural single-line width of a value, in px */
 function naturalWidth(node: VNode | undefined, name: string): number {
@@ -45,10 +52,11 @@ export function columnWidth(
   rows: readonly EntityRow[],
   value: (row: EntityRow) => VNode | undefined,
   name: string,
-  narrow: boolean,
+  width: number,
 ) {
+  const narrow = width < NARROW_WIDTH;
   // room for the header too (10px uppercase, spaced)
-  let widest = name.length * 7.5;
+  let widest = name.length * HEADER_CHAR;
   for (const row of rows.slice(0, SAMPLE))
     widest = Math.max(widest, naturalWidth(value(row), name));
   return Math.round(Math.min(Math.max(widest + PAD, 48), narrow ? 150 : 232));
@@ -67,25 +75,25 @@ export function idWidth(rows: readonly EntityRow[]) {
  * every page holds at least one. Pages leave room for the `+N` column
  * whenever there is more than one.
  */
-export function pageColumns(
-  columns: readonly ColumnSize[],
+export function pageColumns<C extends { readonly want: number }>(
+  columns: readonly C[],
   keyWidth: number,
   available: number,
-): ColumnSize[][] {
-  const total = columns.reduce((w, c) => w + c.width, keyWidth);
+): C[][] {
+  const total = columns.reduce((w, c) => w + c.want, keyWidth);
   if (total <= available) return [[...columns]];
   const room = available - MORE_WIDTH;
-  const pages: ColumnSize[][] = [];
-  let page: ColumnSize[] = [];
+  const pages: C[][] = [];
+  let page: C[] = [];
   let used = keyWidth;
   for (const column of columns) {
-    if (page.length && used + column.width > room) {
+    if (page.length && used + column.want > room) {
       pages.push(page);
       page = [];
       used = keyWidth;
     }
     page.push(column);
-    used += column.width;
+    used += column.want;
   }
   if (page.length) pages.push(page);
   return pages;
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index de3bc324c8d9..6faee99d2339 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -47,14 +47,12 @@ export interface EntityTable {
   readonly get: (pk: string) => EntityRow | undefined;
 }
 
-export interface Referrer {
-  readonly id: string;
-  readonly label: string;
-}
+export type AnyRow = EndpointRow | EntityRow;
 
 export interface StoreModel {
   readonly endpoints: readonly EndpointRow[];
   readonly tables: readonly EntityTable[];
+  readonly table: (key: string) => EntityTable | undefined;
   readonly optimistic: readonly PendingOptimistic[];
   readonly indexes: State<unknown>['indexes'];
   readonly lastReset: number;
@@ -67,33 +65,36 @@ const FIELD_SAMPLE = 500;
 /** Stored objects keep their identity until they change, so their resolved
  * values (and tables, below) are reused across states. Per schema, since one
  * can be learned after its rows were stored */
-const resolved = new WeakMap<object, WeakMap<object, VNode>>();
-const unknownSchema = {};
-function resolveCached(raw: unknown, schema: unknown): VNode {
-  if (!raw || typeof raw !== 'object') return resolveRow(raw, schema);
-  const scope = (schema as object | undefined) ?? unknownSchema;
-  let cache = resolved.get(scope);
-  if (!cache) resolved.set(scope, (cache = new WeakMap()));
-  let node = cache.get(raw);
-  if (!node) cache.set(raw, (node = resolveRow(raw, schema)));
-  return node;
+function cached(resolver: (raw: unknown, schema: any) => VNode) {
+  const bySchema = new WeakMap<object, WeakMap<object, VNode>>();
+  const unknownSchema = {};
+  return (raw: unknown, schema: unknown): VNode => {
+    if (!raw || typeof raw !== 'object') return resolver(raw, schema);
+    const scope = (schema as object | undefined) ?? unknownSchema;
+    let cache = bySchema.get(scope);
+    if (!cache) bySchema.set(scope, (cache = new WeakMap()));
+    let node = cache.get(raw);
+    if (!node) cache.set(raw, (node = resolver(raw, schema)));
+    return node;
+  };
 }
+const resolveStored = cached(resolveRow);
+const resolveEndpoint = cached(resolve);
 
 class StoredRow implements EntityRow {
+  readonly id: string;
   constructor(
     readonly table: string,
     readonly pk: string,
     readonly raw: unknown,
     readonly meta: EntityRow['meta'],
     private readonly schema: unknown,
-  ) {}
-
-  get id() {
-    return entityId(this.table, this.pk);
+  ) {
+    this.id = entityId(table, pk);
   }
 
   get value() {
-    return resolveCached(this.raw, this.schema);
+    return resolveStored(this.raw, this.schema);
   }
 }
 
@@ -109,8 +110,8 @@ function buildTable(
 ): EntityTable {
   const hit = tableCache.get(rows);
   if (hit && hit.schema === schema && hit.meta === meta) return hit.table;
-  const kind = tableKind(schema, rows);
   const pks = Object.keys(rows);
+  const kind = tableKind(schema, rows[pks[0]]);
   const fields = new Set<string>();
   if (kind === 'entity')
     for (const pk of pks.slice(0, FIELD_SAMPLE)) {
@@ -118,16 +119,15 @@ function buildTable(
       if (raw && typeof raw === 'object')
         for (const f of Object.keys(raw)) if (f !== 'id') fields.add(f);
     }
-  const get = (pk: string) =>
-    pk in rows ?
-      new StoredRow(key, pk, rows[pk], meta?.[pk], schema)
-    : undefined;
+  const byPk = new Map(
+    pks.map(pk => [pk, new StoredRow(key, pk, rows[pk], meta?.[pk], schema)]),
+  );
   const table: EntityTable = {
     key,
     kind,
-    rows: pks.map(pk => new StoredRow(key, pk, rows[pk], meta?.[pk], schema)),
+    rows: [...byPk.values()],
     fields: [...fields],
-    get,
+    get: pk => byPk.get(pk),
   };
   tableCache.set(rows, { schema, meta, table });
   return table;
@@ -148,20 +148,29 @@ export function buildModel(
       id: endpointId(key),
       key,
       ...splitKey(key),
-      value: resolve(state.endpoints[key], record?.endpoint.schema),
+      value: resolveEndpoint(state.endpoints[key], record?.endpoint.schema),
       meta: state.meta[key],
       record,
     };
     return row;
   });
 
-  const tables = Object.entries(state.entities).map(([key, rows = {}]) =>
-    buildTable(key, rows, state.entitiesMeta[key], registry.entities.get(key)),
+  const tables = new Map(
+    Object.entries(state.entities).map(([key, rows = {}]) => [
+      key,
+      buildTable(
+        key,
+        rows,
+        state.entitiesMeta[key],
+        registry.entities.get(key),
+      ),
+    ]),
   );
 
   return {
     endpoints,
     tables: orderTables(tables),
+    table: key => tables.get(key),
     optimistic: registry.optimistic,
     indexes: state.indexes,
     lastReset: state.lastReset,
@@ -170,83 +179,92 @@ export function buildModel(
 
 /** Each Collection right after the Entity it holds (`[Todo]` after `Todo`),
  * then Collections of anything else, then Scalar cells */
-function orderTables(tables: EntityTable[]) {
+function orderTables(tables: ReadonlyMap<string, EntityTable>) {
   const held = new Map<string, EntityTable[]>();
   const rest: EntityTable[] = [];
-  for (const table of tables) {
+  for (const table of tables.values()) {
     if (table.kind !== 'collection') continue;
     const member = memberKey(table.key);
-    if (tables.some(t => t.key === member && t.kind !== 'collection'))
+    const kind = tables.get(member)?.kind;
+    if (kind === 'entity' || kind === 'unknown')
       held.set(member, [...(held.get(member) ?? []), table]);
     else rest.push(table);
   }
   const ordered: EntityTable[] = [];
-  for (const table of tables) {
+  const scalars: EntityTable[] = [];
+  for (const table of tables.values()) {
     if (table.kind === 'entity' || table.kind === 'unknown')
       ordered.push(table, ...(held.get(table.key) ?? []));
+    else if (table.kind === 'scalar') scalars.push(table);
   }
-  return [...ordered, ...rest, ...tables.filter(t => t.kind === 'scalar')];
+  return [...ordered, ...rest, ...scalars];
 }
 
 /** `[Todo]`, `{Todo}` or `(Todo)` → `Todo` */
 const memberKey = (key: string) => key.replace(/^[[{(](.*)[\]})]$/, '$1');
 
-const referrerCache = new WeakMap<StoreModel, Map<string, Referrer[]>>();
-/** Row id → everything that references it. Built on first use (opening a
- * record), since it reads every stored row */
-export function referrersOf(
-  model: StoreModel,
-): ReadonlyMap<string, readonly Referrer[]> {
-  let referrers = referrerCache.get(model);
-  if (referrers) return referrers;
-  const map = new Map<string, Referrer[]>();
-  const addRefs = (from: Referrer, node: VNode) =>
-    forEachRef(node, (key, pk) => {
+/** Ref target id → the rows in `rows` that reference it; cached per table
+ * (and endpoint list), which keep their identity until they change */
+const refIndex = new WeakMap<object, Map<string, AnyRow[]>>();
+function indexRefs(owner: object, rows: readonly AnyRow[]) {
+  let map = refIndex.get(owner);
+  if (map) return map;
+  map = new Map();
+  for (const row of rows)
+    forEachRef(row.value, (key, pk) => {
       const to = entityId(key, pk);
-      const list = map.get(to);
-      if (!list) map.set(to, [from]);
+      const list = map!.get(to);
+      if (!list) map!.set(to, [row]);
       // a row's refs arrive together, so a repeat is always the last entry
-      else if (list[list.length - 1].id !== from.id) list.push(from);
+      else if (list[list.length - 1] !== row) list.push(row);
     });
-  for (const row of model.endpoints)
-    addRefs(
-      { id: row.id, label: `${row.method} ${row.path}`.trim() },
-      row.value,
-    );
-  for (const table of model.tables)
-    for (const row of table.rows)
-      addRefs(
-        { id: row.id, label: `${table.key} ${prettyPk(row.pk)}` },
-        row.value,
-      );
-  referrerCache.set(model, (referrers = map));
-  return referrers;
+  refIndex.set(owner, map);
+  return map;
+}
+
+/** Every row that references row `id`. Indexes a table on first use (opening
+ * a record) and again only once that table changes */
+export function referrersOf(model: StoreModel, id: string): AnyRow[] {
+  return [model.endpoints, ...model.tables].flatMap(
+    owner =>
+      indexRefs(owner, 'rows' in owner ? owner.rows : owner).get(id) ?? [],
+  );
 }
 
 /** The endpoint or stored row an id names */
-export function findRow(
-  model: StoreModel,
-  id: string,
-): EndpointRow | EntityRow | undefined {
+export function findRow(model: StoreModel, id: string): AnyRow | undefined {
   if (isEndpointId(id)) return model.endpoints.find(r => r.id === id);
   const [, key, ...pk] = id.split('\u001f');
-  return model.tables.find(t => t.key === key)?.get(pk.join('\u001f'));
+  return model.table(key)?.get(pk.join('\u001f'));
 }
 
-function tableKind(
-  table: any,
-  rows: Record<string, unknown>,
-): EntityTable['kind'] {
+export const isEndpointRow = (row: AnyRow): row is EndpointRow => 'key' in row;
+
+/** `GET /posts` or `Post 1` */
+export const rowLabel = (row: AnyRow) =>
+  isEndpointRow(row) ?
+    `${row.method} ${row.path}`.trim()
+  : `${row.table} ${prettyPk(row.pk)}`;
+
+export const errorText = (error: unknown) =>
+  error instanceof Error ? error.message : String(error);
+
+function tableKind(table: any, first: unknown): EntityTable['kind'] {
   if (typeof table === 'function') return 'entity';
   if (table instanceof s.Collection) return 'collection';
   if (table instanceof s.Scalar) return 'scalar';
   // Unknown schema (e.g. state seeded without an action): guess from the rows
-  const first = Object.values(rows)[0];
   return Array.isArray(first) ? 'collection' : 'unknown';
 }
 
+const splitCache = new Map<string, { method: string; path: string }>();
 /** `GET https://host/posts?x=1` → method and path (host dropped) */
 export function splitKey(key: string) {
+  let split = splitCache.get(key);
+  if (!split) splitCache.set(key, (split = parseKey(key)));
+  return split;
+}
+function parseKey(key: string) {
   const match = /^([A-Z]+) (\S+)(.*)$/.exec(key);
   if (!match) return { method: '', path: key };
   const [, method, url, rest] = match;
@@ -258,28 +276,22 @@ export function splitKey(key: string) {
   }
 }
 
-/** Ids whose stored value changed between two states */
-export function changedIds(prev: State<unknown>, next: State<unknown>) {
-  const ids = new Set<string>();
-  if (prev === next) return ids;
-  for (const key of new Set([
-    ...Object.keys(next.endpoints),
-    ...Object.keys(next.meta),
-  ])) {
-    if (
+/** Whether row `id`'s stored value (or meta) differs between two states */
+export function isChanged(
+  prev: State<unknown>,
+  next: State<unknown>,
+  id: string,
+) {
+  if (isEndpointId(id)) {
+    const key = id.slice(2);
+    return (
       prev.endpoints[key] !== next.endpoints[key] ||
       prev.meta[key] !== next.meta[key]
-    )
-      ids.add(endpointId(key));
-  }
-  for (const [key, rows] of Object.entries(next.entities)) {
-    const before = prev.entities[key];
-    if (before === rows || !rows) continue;
-    for (const [pk, row] of Object.entries(rows)) {
-      if (before?.[pk] !== row) ids.add(entityId(key, pk));
-    }
+    );
   }
-  return ids;
+  const [, key, ...rest] = id.split('\u001f');
+  const pk = rest.join('\u001f');
+  return prev.entities[key]?.[pk] !== next.entities[key]?.[pk];
 }
 
 /** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index 1f43377849cd..feae9aeecc95 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -2,16 +2,24 @@ import { createContext, useContext } from 'react';
 
 import type { StoreModel } from './model';
 
-/** One level of the table view's navigation stack */
-export type View =
-  | { readonly kind: 'root' }
-  /** Rows of a whole table, or just `ids` (entity or endpoint row ids) */
+/** Rows of one table (all, or just `pks`), or rows of any kind by id */
+export type ListView =
   | {
       readonly kind: 'list';
       readonly label: string;
-      readonly table?: string;
-      readonly ids?: readonly string[];
+      readonly table: string;
+      readonly pks?: readonly string[];
     }
+  | {
+      readonly kind: 'list';
+      readonly label: string;
+      readonly ids: readonly string[];
+    };
+
+/** One level of the table view's navigation stack */
+export type View =
+  | { readonly kind: 'root' }
+  | ListView
   | { readonly kind: 'record'; readonly id: string };
 
 export interface Nav {
@@ -24,3 +32,9 @@ export interface Nav {
 /** Set by the table view only; the tree view expands in place instead */
 export const NavContext = createContext<Nav | null>(null);
 export const useNav = () => useContext(NavContext);
+
+/** Where `el` sits in `scroller`'s scrolled content, in px */
+export const offsetIn = (scroller: HTMLElement, el: Element) =>
+  el.getBoundingClientRect().top -
+  scroller.getBoundingClientRect().top +
+  scroller.scrollTop;
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index 273b6f399154..549ec8952dd4 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -119,6 +119,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   outline: none;
+  container-type: inline-size;
 }
 .level[data-covered] {
   visibility: hidden;
@@ -509,9 +510,6 @@ div.row {
 .record {
   padding: 0.5rem 0;
 }
-.record > .detail {
-  padding-left: 0.75rem;
-}
 .showAll,
 .more {
   border: 0;
@@ -538,9 +536,23 @@ div.row {
 .indent .detail {
   padding-left: 1rem;
 }
-.detailRow .detail {
-  padding-left: 1.25rem;
-  padding-right: 0;
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--store-line);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.seg button {
+  font: 500 11px / 1.6 var(--ifm-font-family-base);
+  background: none;
+  border: 0;
+  color: var(--store-dim);
+  padding: 0.05rem 0.6rem;
+  cursor: pointer;
+}
+.seg button[aria-pressed='true'] {
+  background: rgba(130, 170, 255, 0.16);
+  color: var(--store-fg);
 }
 .detail > .seg {
   display: flex;
@@ -694,9 +706,6 @@ div.row {
 .record > .detail {
   padding: 0.5rem 0.75rem 0.6rem;
 }
-.level {
-  container-type: inline-size;
-}
 /* each field of a record: name column, then its value */
 .recordRow .detail > .fields > .field,
 .record > .detail > .fields > .field {
diff --git a/website/src/components/motion/MotionGroup.tsx b/website/src/components/motion/MotionGroup.tsx
index adbc33b75a57..c4f622eded0c 100644
--- a/website/src/components/motion/MotionGroup.tsx
+++ b/website/src/components/motion/MotionGroup.tsx
@@ -213,7 +213,7 @@ function unpin(el: HTMLElement) {
 }
 
 // same as @docusaurus/theme-common's, but safe without matchMedia (jsdom)
-function prefersReducedMotion() {
+export function prefersReducedMotion() {
   return !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 }
 
diff --git a/website/src/components/motion/index.ts b/website/src/components/motion/index.ts
index 6be35e23f98c..8d61f0fc838e 100644
--- a/website/src/components/motion/index.ts
+++ b/website/src/components/motion/index.ts
@@ -1,5 +1,9 @@
 /** Physical, compositor-driven motion. See README.md */
-export { default as MotionGroup, useLayoutMotion } from './MotionGroup';
+export {
+  default as MotionGroup,
+  prefersReducedMotion,
+  useLayoutMotion,
+} from './MotionGroup';
 export { default as Reveal } from './Reveal';
 
 export { springs } from './tokens';

From 17b85687b57ce80ab215ee30f6fd0c3a1da54d39 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:01:15 +0000
Subject: [PATCH 10/28] ci: Persist website/src/utils for Playground unit tests

StorePanel imports website/src/utils/tabStorage, which the setup job's
workspace left out, so the module couldn't resolve in unit_tests-latest.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .circleci/config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 83822bea28c8..1e173a9272fe 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -187,6 +187,7 @@ jobs:
             # Playground and motion unit tests; rest of website omitted
             - project/website/src/components/Playground
             - project/website/src/components/motion
+            - project/website/src/utils
             - project/.yarnrc.yml
             - project/babel.config.js
             - project/eslint.config.mjs

From e3183f34c679344d500a8644e22a18845960f2e1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:02:08 +0000
Subject: [PATCH 11/28] ci: Leave website code out of coverage

Coverage tracks the packages published to npm; the website's Playground
tests still run but no longer count toward the thresholds or Codecov.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 jest.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/jest.config.js b/jest.config.js
index 04402ea41909..9c7ff98720d6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -35,6 +35,8 @@ const baseConfig = {
     'packages/react/src/next',
     'packages/react/src/server',
     'packages/react/src/components/DevToolsButton.tsx',
+    // website code is tested but not published, so it isn't tracked
+    '<rootDir>/website/',
   ],
   /** TODO: Remove once we move to 'publishConfig' */
   moduleNameMapper: {

From 815d9a8af85da68314267a004c0544f2b0ccd8bf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:07:27 +0000
Subject: [PATCH 12/28] test(website): Cover Store inspector model, column
 fitting and navigation

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanelNav.test.tsx  | 355 ++++++++++++++++++
 .../preview/__tests__/storeColumns.test.ts    |  86 +++++
 .../preview/__tests__/storeModel.test.ts      |  41 ++
 .../Playground/preview/store/Value.tsx        |  17 +-
 4 files changed, 489 insertions(+), 10 deletions(-)
 create mode 100644 website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
 create mode 100644 website/src/components/Playground/preview/__tests__/storeColumns.test.ts

diff --git a/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
new file mode 100644
index 000000000000..3c23acc76574
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
@@ -0,0 +1,355 @@
+/// <reference types="jest" />
+import { Collection, Endpoint, Entity, schema } from '@data-client/endpoint';
+import { StateContext, type State } from '@data-client/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import React from 'react';
+
+import { entityId } from '../store/model';
+import SchemaRegistry from '../store/schemaRegistry';
+import StorePanel from '../store/StorePanel';
+
+jest.mock('../../../../utils/tabStorage', () => ({
+  useTabStorage: () => require('react').useState(null),
+}));
+
+class User extends Entity {
+  id = '';
+  name = '';
+}
+class Post extends Entity {
+  id = '';
+  title = '';
+  author = User.fromJS();
+  static schema = { author: User };
+}
+class Comment extends Entity {
+  id = '';
+  text = '';
+}
+const comments = new Collection([Comment]);
+const feed = new schema.Union({ post: Post, user: User }, (v: any) => v.type);
+
+const range = (n: number) => Array.from({ length: n }, (_, i) => `${i + 1}`);
+const commentIds = range(40);
+const NOW = 1_700_000_000_000;
+const url = (path: string) => `GET https://example.com/${path}`;
+const POSTS = url('posts');
+const COMMENTS = url('comments');
+const FEED = url('feed');
+const NUMBERS = url('numbers');
+const OBJECTS = url('objects');
+const BROKEN = url('broken');
+
+/** Enough of everything to page, dive and collapse */
+const state = {
+  meta: {
+    [POSTS]: { date: NOW, fetchedAt: NOW, expiresAt: 0 },
+    [BROKEN]: { date: 0, expiresAt: 0, error: new Error('404 Not Found') },
+  },
+  entitiesMeta: {},
+  indexes: {},
+  optimistic: [],
+  lastReset: 0,
+  endpoints: {
+    [POSTS]: range(12),
+    [COMMENTS]: '{}',
+    [FEED]: [
+      ...range(11).map(id => ({ id, schema: 'post' })),
+      { id: '1', schema: 'user' },
+    ],
+    [NUMBERS]: Array.from({ length: 25 }, (_, i) => i),
+    [OBJECTS]: [{ a: 1 }, { b: 2 }],
+    ...Object.fromEntries(range(5).map(n => [url(`extra/${n}`), 'x'])),
+  },
+  entities: {
+    User: {
+      1: {
+        id: '1',
+        name: 'Paul',
+        joinedAt: NOW,
+        prefs: { theme: 'dark' },
+        tags: ['a', 'b', 'c', 'd', 'e'],
+      },
+    },
+    Post: Object.fromEntries(
+      range(12).map(id => [
+        id,
+        { id, title: `Post number ${id}`, author: '1' },
+      ]),
+    ),
+    Comment: Object.fromEntries(
+      commentIds.map(id => [id, { id, text: `comment ${id}` }]),
+    ),
+    '[Comment]': { '{}': commentIds },
+    Thing: {
+      a: {
+        n: 1,
+        when: new Date(0),
+        bad: new Date('nope'),
+        ok: true,
+        nothing: null,
+      },
+    },
+    // a Collection whose member table never arrived, with enough rows to page
+    '[Orphan]': Object.fromEntries(
+      range(9).map(n => [JSON.stringify({ page: n }), ['x']]),
+    ),
+  },
+} as unknown as State<unknown>;
+
+function registry() {
+  const r = new SchemaRegistry();
+  r.endpoints.set(POSTS, {
+    endpoint: new Endpoint(() => Promise.resolve([]), {
+      key: () => POSTS,
+      schema: [Post],
+    }),
+    args: [{ page: 1 }],
+  });
+  // no `key()`: what useSuspense() would get cannot be computed
+  r.endpoints.set(COMMENTS, { endpoint: { schema: comments }, args: [] });
+  r.endpoints.set(FEED, { endpoint: { schema: [feed] }, args: [] });
+  r.learn([Post]);
+  r.learn(comments);
+  return r;
+}
+
+const top = () =>
+  document.querySelector<HTMLElement>('[data-level]:not([data-covered])')!;
+const crumbs = () =>
+  [...top().querySelectorAll('nav > *')].map(el => el.textContent);
+const press = (key: string) =>
+  fireEvent.keyDown(document.activeElement ?? top(), { key });
+/** The last button called `name` on the top level: chips come after crumbs */
+const chip = (name: string) =>
+  within(top()).getAllByRole('button', { name }).at(-1)!;
+const row = (id: string) =>
+  top().querySelector<HTMLElement>(`tr[data-id="${id}"]`)!;
+const group = (key: string) =>
+  within(top().querySelector(`[data-table="${key}"]`)!);
+const headers = () =>
+  within(top())
+    .getAllByRole('columnheader')
+    .map(h => h.textContent);
+
+function mount(s = state, r = registry()) {
+  const ui = (s: State<unknown>) => (
+    <StateContext.Provider value={s}>
+      <StorePanel registry={r} />
+    </StateContext.Provider>
+  );
+  const result = render(ui(s));
+  return {
+    ...result,
+    update: (next: State<unknown>) => result.rerender(ui(next)),
+  };
+}
+
+describe('StorePanel navigation', () => {
+  it('collapses breadcrumbs past four levels and jumps back by crumb', () => {
+    mount();
+    fireEvent.click(within(top()).getByText('"Paul"'));
+    fireEvent.click(chip('Post 1'));
+    fireEvent.click(chip('User 1'));
+    fireEvent.click(chip('Post 1'));
+    expect(crumbs()).toEqual(['State', '›', '…', '›', 'User 1', '›', 'Post 1']);
+    fireEvent.click(
+      within(top().querySelector('nav')!).getByRole('button', {
+        name: 'User 1',
+      }),
+    );
+    expect(crumbs()).toEqual([
+      'State',
+      '›',
+      'User 1',
+      '›',
+      'Post 1',
+      '›',
+      'User 1',
+    ]);
+    fireEvent.click(
+      within(top().querySelector('nav')!).getByRole('button', {
+        name: 'State',
+      }),
+    );
+    expect(top().querySelector('nav')).toBeNull();
+  });
+
+  it('ignores Escape at the root', () => {
+    mount();
+    act(() => press('Escape'));
+    expect(top().querySelector('nav')).toBeNull();
+    expect(group('Post').getByText('7 more')).toBeTruthy();
+  });
+
+  it('dives from "used by" into a mixed list and opens a row from it', () => {
+    mount();
+    fireEvent.click(within(top()).getByText('"Paul"'));
+    // the feed endpoint and 12 posts reference the user: ten chips, then a
+    // count that dives into all of them
+    expect(chip('GET /feed')).toBeTruthy();
+    expect(
+      within(top()).getAllByRole('button', { name: /^Post \d+$/ }),
+    ).toHaveLength(9);
+    fireEvent.click(chip('+3'));
+    expect(crumbs()).toEqual(['State', '›', 'User 1', '›', 'used by13']);
+    expect(headers()).toEqual(['row', 'value']);
+    expect(top().querySelectorAll('tr[data-id]')).toHaveLength(13);
+    fireEvent.click(row(entityId('Post', '3')));
+    expect(crumbs().at(-1)).toBe('Post 3');
+  });
+
+  it('lists every endpoint past the preview and opens one with Enter', () => {
+    mount();
+    expect(within(top()).getByText('6 more')).toBeTruthy();
+    fireEvent.click(within(top()).getByText('6 more'));
+    expect(crumbs()).toEqual(['State', '›', 'Endpoints11']);
+    expect(headers()).toEqual(['key', 'status', 'value']);
+    expect(top().querySelectorAll('tr[data-id]')).toHaveLength(11);
+    const target = row(`e\u001f${NUMBERS}`);
+    // keys from a chip inside the row are its own
+    fireEvent.keyDown(within(target).getByText('0'), { key: 'Enter' });
+    expect(crumbs()).toEqual(['State', '›', 'Endpoints11']);
+    fireEvent.keyDown(target, { key: 'Enter' });
+    expect(crumbs().at(-1)).toBe('GET /numbers');
+  });
+
+  it('shows an endpoint record with what was stored and what it returns', () => {
+    mount();
+    fireEvent.click(row(`e\u001f${POSTS}`));
+    const show = within(top()).getByRole('group', { name: 'Show' });
+    expect(within(show).getByText('Stored').getAttribute('aria-pressed')).toBe(
+      'true',
+    );
+    // 12 refs: ten chips and a count that dives into the rest
+    expect(
+      within(top()).getAllByRole('button', { name: /^Post \d+$/ }),
+    ).toHaveLength(10);
+    expect(within(top()).getByText('args')).toBeTruthy();
+    expect(within(top()).getByText('page')).toBeTruthy();
+    fireEvent.click(within(show).getByText('Returns'));
+    expect(within(top()).getByText('"Post number 1"')).toBeTruthy();
+    expect(within(top()).getAllByText('"Paul"')).toHaveLength(12);
+    // a date in meta shows as a time of day
+    expect(within(top()).getAllByTitle(String(NOW)).length).toBeGreaterThan(0);
+    fireEvent.click(within(show).getByText('Stored'));
+    fireEvent.click(chip('+2'));
+    expect(crumbs().at(-1)).toBe('items12');
+  });
+
+  it('explains when what an endpoint returns cannot be computed', () => {
+    mount();
+    fireEvent.click(row(`e\u001f${COMMENTS}`));
+    fireEvent.click(within(top()).getByText('Returns'));
+    expect(within(top()).getByText(/is not a function/)).toBeTruthy();
+    expect(within(top()).queryByText('args')).toBeNull();
+  });
+
+  it('grows long lists on request and indexes lists of objects', () => {
+    mount();
+    fireEvent.click(row(`e\u001f${NUMBERS}`));
+    expect(within(top()).queryByText('24')).toBeNull();
+    fireEvent.click(within(top()).getByText('5 more'));
+    expect(within(top()).getByText('24')).toBeTruthy();
+    // an endpoint without a known schema shows no Stored/Returns choice
+    expect(within(top()).queryByRole('group', { name: 'Show' })).toBeNull();
+    fireEvent.click(within(top()).getByLabelText('Back'));
+    fireEvent.click(row(`e\u001f${OBJECTS}`));
+    expect(within(top()).getByText('0')).toBeTruthy();
+    expect(within(top()).getByText('b')).toBeTruthy();
+  });
+
+  it('dives from a mixed list of refs into rows of several tables', () => {
+    mount();
+    fireEvent.click(row(`e\u001f${FEED}`));
+    fireEvent.click(chip('+2'));
+    expect(crumbs().at(-1)).toBe('items12');
+    expect(headers()).toEqual(['row', 'value']);
+    expect(row(entityId('User', '1'))).toBeTruthy();
+    expect(row(entityId('Post', '11'))).toBeTruthy();
+  });
+
+  it('says so when a listed table or an open record leaves the store', () => {
+    const { update } = mount();
+    fireEvent.click(group('Post').getByText('7 more'));
+    const { Post: _, ...entities } = state.entities as any;
+    update({ ...state, entities } as State<unknown>);
+    expect(within(top()).getByText('No longer in the store')).toBeTruthy();
+    expect(crumbs()).toEqual(['State', '›', 'Post0']);
+    fireEvent.click(within(top()).getByLabelText('Back'));
+    fireEvent.click(within(top()).getByText('"Paul"'));
+    const { User: __, ...rest } = entities;
+    update({ ...state, entities: rest } as State<unknown>);
+    expect(within(top()).getByText('No longer in the store')).toBeTruthy();
+    expect(crumbs()).toEqual(['State', '›', '…']);
+  });
+
+  it('toggles sections and lists pending optimistic updates', () => {
+    const r = registry();
+    r.optimistic = [
+      {
+        key: 'POST https://example.com/posts',
+        args: [{ title: 'optimistic' }],
+        fetchedAt: NOW,
+      },
+    ];
+    mount(state, r);
+    const optimistic = within(top()).getByRole('button', {
+      name: /^Optimistic/,
+    });
+    expect(optimistic.getAttribute('aria-expanded')).toBe('true');
+    expect(within(top()).getByText('POST')).toBeTruthy();
+    expect(within(top()).getByText('"optimistic"')).toBeTruthy();
+    fireEvent.click(optimistic);
+    expect(within(top()).queryByText('POST')).toBeNull();
+    fireEvent.click(optimistic);
+    expect(within(top()).getByText('POST')).toBeTruthy();
+    fireEvent.click(within(top()).getByRole('button', { name: /^Internals/ }));
+    expect(within(top()).getByText('lastReset')).toBeTruthy();
+  });
+
+  it('jumps to a table from the index when there are many', () => {
+    const scrollTo = jest.fn();
+    Element.prototype.scrollTo = scrollTo;
+    try {
+      mount();
+      fireEvent.click(
+        within(top()).getByRole('button', { name: /^Comment\s?40$/ }),
+      );
+      expect(scrollTo).toHaveBeenCalledWith(
+        expect.objectContaining({ behavior: 'smooth' }),
+      );
+    } finally {
+      delete (Element.prototype as any).scrollTo;
+    }
+  });
+});
+
+describe('endpoint status', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(NOW);
+  });
+  afterEach(() => jest.useRealTimers());
+
+  it('counts down until fresh data goes stale', () => {
+    mount({
+      ...state,
+      meta: {
+        [POSTS]: { date: NOW, expiresAt: NOW + 5000 },
+        [COMMENTS]: { date: NOW, expiresAt: NOW + 120_000 },
+        [FEED]: { date: NOW, expiresAt: Infinity },
+        [NUMBERS]: { date: NOW, expiresAt: NOW + 5000, invalidated: true },
+      },
+    } as unknown as State<unknown>);
+    expect(screen.getByText('fresh 5s')).toBeTruthy();
+    expect(screen.getByText('fresh 2m')).toBeTruthy();
+    expect(screen.getByText('invalid')).toBeTruthy();
+    expect(screen.getByTitle('Expires at Infinity')).toBeTruthy();
+    act(() => jest.advanceTimersByTime(1000));
+    expect(screen.getByText('fresh 4s')).toBeTruthy();
+    act(() => jest.advanceTimersByTime(5000));
+    expect(screen.queryByText(/fresh \ds/)).toBeNull();
+    expect(screen.getAllByText('stale').length).toBeGreaterThan(0);
+  });
+});
diff --git a/website/src/components/Playground/preview/__tests__/storeColumns.test.ts b/website/src/components/Playground/preview/__tests__/storeColumns.test.ts
new file mode 100644
index 000000000000..ecba79576722
--- /dev/null
+++ b/website/src/components/Playground/preview/__tests__/storeColumns.test.ts
@@ -0,0 +1,86 @@
+/// <reference types="jest" />
+import {
+  columnWidth,
+  idWidth,
+  MORE_WIDTH,
+  NARROW_WIDTH,
+  pageColumns,
+} from '../store/columns';
+import type { EntityRow } from '../store/model';
+import { plain, type VNode } from '../store/refs';
+
+const row = (pk: string, raw: unknown): EntityRow => ({
+  id: `n\u001fT\u001f${pk}`,
+  pk,
+  table: 'T',
+  raw,
+  value: plain(raw),
+  meta: undefined,
+});
+const field = (name: string) => (r: EntityRow) =>
+  r.value.t === 'obj' ?
+    r.value.entries.find(([k]) => k === name)?.[1]
+  : undefined;
+
+describe('store columns', () => {
+  it('sizes a column by the widest sampled value, within bounds', () => {
+    const rows = [
+      row('1', { name: 'Al', createdAt: 1_700_000_000_000, n: 5 }),
+      row('2', { name: 'A much longer name than the other', n: 123 }),
+    ];
+    // never narrower than 48, never wider than the cap
+    expect(columnWidth(rows, field('n'), 'n', 560)).toBe(48);
+    expect(columnWidth(rows, field('name'), 'name', 560)).toBe(232);
+    expect(columnWidth(rows, field('name'), 'name', NARROW_WIDTH - 1)).toBe(
+      150,
+    );
+    // a timestamp shows as a time of day, whatever its digits
+    expect(columnWidth(rows, field('createdAt'), 'createdAt', 560)).toBe(
+      Math.round(14 * 7.2 + 20),
+    );
+    // missing values and nested objects have a fixed size
+    expect(columnWidth([], field('x'), 'x', 560)).toBe(48);
+    expect(columnWidth([row('1', { o: { a: 1 } })], field('o'), 'o', 560)).toBe(
+      232,
+    );
+  });
+
+  it('sizes lists by their first items plus room for the rest', () => {
+    const short: VNode = { t: 'arr', items: [{ t: 'val', v: 'a' }] };
+    const long: VNode = {
+      t: 'arr',
+      items: Array.from({ length: 5 }, () => ({ t: 'val', v: 'a' })),
+    };
+    const refs: VNode = {
+      t: 'arr',
+      items: [{ t: 'ref', key: 'User', pk: '1' }],
+    };
+    const width = (node: VNode) =>
+      columnWidth([row('1', {})], () => node, 'x', 560);
+    expect(width(long)).toBeGreaterThan(width(short) + 44);
+    expect(width(refs)).toBeGreaterThan(width(short));
+  });
+
+  it('sizes the id column by the prettiest key', () => {
+    expect(idWidth([row('1', {})])).toBe(Math.round(7.2 + 32));
+    expect(idWidth([row('{"userId":"1"}', {})])).toBe(
+      Math.round('userId: 1'.length * 7.2 + 32),
+    );
+    expect(idWidth([row('x'.repeat(50), {})])).toBe(140);
+  });
+
+  it('pages columns to fit, leaving room for the +N column', () => {
+    const cols = [{ want: 100 }, { want: 200 }, { want: 150 }, { want: 400 }];
+    expect(pageColumns(cols, 50, 1000)).toEqual([cols]);
+    const pages = pageColumns(cols, 50, 400);
+    expect(pages.map(p => p.map(c => c.want))).toEqual([
+      [100, 200],
+      [150],
+      [400],
+    ]);
+    // a column wider than a page still gets one
+    expect(pageColumns([{ want: 900 }], 50, 400)).toEqual([[{ want: 900 }]]);
+    expect(pageColumns([], 50, 400)).toEqual([[]]);
+    expect(MORE_WIDTH).toBeGreaterThan(0);
+  });
+});
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 83a5ce917c24..b7c1b9d067a8 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -6,6 +6,7 @@ import {
   buildModel,
   entityId,
   isChanged,
+  prettyPk,
   referrersOf,
   rowLabel,
   splitKey,
@@ -233,6 +234,42 @@ describe('store model', () => {
     expect(referrersOf(model, entityId('User', '123'))).toEqual([]);
   });
 
+  it('orders Collections after their Entity, orphans next, then Scalars', () => {
+    const cell = new schema.Scalar({
+      lens: (args: any) => args[0]?.portfolio,
+      key: 'portfolio',
+      entity: User,
+    });
+    const registry = registryFor('GET https://example.com/posts', [Post]);
+    registry.learn(cell);
+    const model = buildModel(
+      {
+        ...state,
+        entities: {
+          'Scalar(portfolio)': { 'User|123|a': 1 },
+          '[Orphan]': { '{}': ['x'] },
+          ...state.entities,
+        },
+      } as unknown as State<unknown>,
+      registry,
+    );
+    expect(model.tables.map(t => `${t.key}:${t.kind}`)).toEqual([
+      'User:entity',
+      'Comment:entity',
+      '[Comment]:collection',
+      'Post:entity',
+      '[Orphan]:collection',
+      'Scalar(portfolio):scalar',
+    ]);
+  });
+
+  it('prints Collection args as labels', () => {
+    expect(prettyPk('{}')).toBe('all');
+    expect(prettyPk('{"userId":"1","page":2}')).toBe('userId: 1, page: 2');
+    expect(prettyPk('{not json')).toBe('{not json');
+    expect(prettyPk('plain')).toBe('plain');
+  });
+
   it('guesses table kinds without a schema', () => {
     const model = buildModel(
       {
@@ -296,6 +333,10 @@ describe('store model', () => {
     expect(buildModel(state, registry).optimistic).toBe(registry.optimistic);
     dispatch({ type: actionTypes.RESET } as any);
     expect(registry.optimistic).toEqual([]);
+    // a remounted preview starts over without pending updates
+    fetch(4);
+    registry.init();
+    expect(registry.optimistic).toEqual([]);
   });
 
   it('finds changed rows', () => {
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 3ad3dbd18b9f..06392448b110 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -364,17 +364,14 @@ export function Primitive({ value, name }: { value: unknown; name?: string }) {
 const isTimeField = (name: string) =>
   name === 'date' || name === 'lastReset' || /[a-z]At$/.test(name);
 
-const timeFormatter =
-  typeof Intl !== 'undefined' ?
-    Intl.DateTimeFormat('en-US', {
-      hour: 'numeric',
-      minute: 'numeric',
-      second: 'numeric',
-      fractionalSecondDigits: 3,
-    })
-  : undefined;
+const timeFormatter = Intl.DateTimeFormat('en-US', {
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  fractionalSecondDigits: 3,
+});
 
 export function formatTime(ms: number) {
   if (!isFinite(ms)) return String(ms);
-  return timeFormatter ? timeFormatter.format(ms) : new Date(ms).toISOString();
+  return timeFormatter.format(ms);
 }

From d8320316b56b7bdc5ddf8a9f01c027d899eaf07e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:19:10 +0000
Subject: [PATCH 13/28] refactor(website): Give each Store inspector concept
 one owner

Row ids are built and parsed only in model.ts; column sizing shares its
metrics with the renderers; DOM helpers live in dom.ts; tree-only
pieces moved into TreeView.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     |   8 +-
 .../preview/__tests__/StorePanelNav.test.tsx  |  14 +-
 .../preview/__tests__/StoreUI.test.tsx        |   4 +-
 .../preview/__tests__/storeColumns.test.ts    |   4 +-
 .../preview/__tests__/storeModel.test.ts      |  25 ++-
 .../Playground/preview/store/Details.tsx      |  31 ++-
 .../Playground/preview/store/DiveViews.tsx    |  34 +--
 .../Playground/preview/store/RootView.tsx     |   5 +-
 .../Playground/preview/store/Sections.tsx     | 200 +-----------------
 .../Playground/preview/store/StorePanel.tsx   |  79 ++++---
 .../Playground/preview/store/StoreUI.tsx      |   8 +-
 .../Playground/preview/store/Table.tsx        |  10 +-
 .../Playground/preview/store/TreeView.tsx     | 186 +++++++++++++++-
 .../Playground/preview/store/Value.tsx        |  65 ++----
 .../Playground/preview/store/columns.ts       |  37 +++-
 .../Playground/preview/store/dom.ts           |  62 ++++++
 .../Playground/preview/store/model.ts         |  54 +++--
 .../Playground/preview/store/nav.tsx          |  17 +-
 .../Playground/preview/store/refs.ts          |  10 +
 .../Playground/preview/store/store.module.css |   3 +
 20 files changed, 478 insertions(+), 378 deletions(-)
 create mode 100644 website/src/components/Playground/preview/store/dom.ts

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index f915450ef9a1..7ed39994ba9e 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -4,6 +4,7 @@ import { StateContext, type State } from '@data-client/react';
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
 
+import { parseRowId } from '../store/model';
 import SchemaRegistry from '../store/schemaRegistry';
 import StorePanel from '../store/StorePanel';
 
@@ -139,9 +140,10 @@ describe('StorePanel table view', () => {
     fireEvent.click(screen.getByText('7 more'));
     expect(crumbs()).toEqual(['State', '›', 'Post12']);
     const rows = () =>
-      [...top().querySelectorAll('tr[data-id]')].map(
-        r => r.getAttribute('data-id')?.split('\u001f')[2],
-      );
+      [...top().querySelectorAll('tr[data-id]')].map(r => {
+        const ref = parseRowId(r.getAttribute('data-id')!);
+        return ref?.kind === 'entity' ? ref.pk : undefined;
+      });
     expect(rows()).toHaveLength(12);
     fireEvent.change(within(top()).getByLabelText('Filter rows'), {
       target: { value: 'number 1' },
diff --git a/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
index 3c23acc76574..9d4308d283f1 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
@@ -4,7 +4,7 @@ import { StateContext, type State } from '@data-client/react';
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
 
-import { entityId } from '../store/model';
+import { endpointId, entityId } from '../store/model';
 import SchemaRegistry from '../store/schemaRegistry';
 import StorePanel from '../store/StorePanel';
 
@@ -206,7 +206,7 @@ describe('StorePanel navigation', () => {
     expect(crumbs()).toEqual(['State', '›', 'Endpoints11']);
     expect(headers()).toEqual(['key', 'status', 'value']);
     expect(top().querySelectorAll('tr[data-id]')).toHaveLength(11);
-    const target = row(`e\u001f${NUMBERS}`);
+    const target = row(endpointId(NUMBERS));
     // keys from a chip inside the row are its own
     fireEvent.keyDown(within(target).getByText('0'), { key: 'Enter' });
     expect(crumbs()).toEqual(['State', '›', 'Endpoints11']);
@@ -216,7 +216,7 @@ describe('StorePanel navigation', () => {
 
   it('shows an endpoint record with what was stored and what it returns', () => {
     mount();
-    fireEvent.click(row(`e\u001f${POSTS}`));
+    fireEvent.click(row(endpointId(POSTS)));
     const show = within(top()).getByRole('group', { name: 'Show' });
     expect(within(show).getByText('Stored').getAttribute('aria-pressed')).toBe(
       'true',
@@ -239,7 +239,7 @@ describe('StorePanel navigation', () => {
 
   it('explains when what an endpoint returns cannot be computed', () => {
     mount();
-    fireEvent.click(row(`e\u001f${COMMENTS}`));
+    fireEvent.click(row(endpointId(COMMENTS)));
     fireEvent.click(within(top()).getByText('Returns'));
     expect(within(top()).getByText(/is not a function/)).toBeTruthy();
     expect(within(top()).queryByText('args')).toBeNull();
@@ -247,21 +247,21 @@ describe('StorePanel navigation', () => {
 
   it('grows long lists on request and indexes lists of objects', () => {
     mount();
-    fireEvent.click(row(`e\u001f${NUMBERS}`));
+    fireEvent.click(row(endpointId(NUMBERS)));
     expect(within(top()).queryByText('24')).toBeNull();
     fireEvent.click(within(top()).getByText('5 more'));
     expect(within(top()).getByText('24')).toBeTruthy();
     // an endpoint without a known schema shows no Stored/Returns choice
     expect(within(top()).queryByRole('group', { name: 'Show' })).toBeNull();
     fireEvent.click(within(top()).getByLabelText('Back'));
-    fireEvent.click(row(`e\u001f${OBJECTS}`));
+    fireEvent.click(row(endpointId(OBJECTS)));
     expect(within(top()).getByText('0')).toBeTruthy();
     expect(within(top()).getByText('b')).toBeTruthy();
   });
 
   it('dives from a mixed list of refs into rows of several tables', () => {
     mount();
-    fireEvent.click(row(`e\u001f${FEED}`));
+    fireEvent.click(row(endpointId(FEED)));
     fireEvent.click(chip('+2'));
     expect(crumbs().at(-1)).toBe('items12');
     expect(headers()).toEqual(['row', 'value']);
diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
index 8844b011a1ce..e0d95f7c660f 100644
--- a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -3,7 +3,7 @@ import { act, render } from '@testing-library/react';
 import React from 'react';
 
 import type { EntityTable, StoreModel } from '../store/model';
-import { entityId } from '../store/model';
+import { endpointId, entityId } from '../store/model';
 import {
   groupId,
   ROW_LIMIT,
@@ -71,7 +71,7 @@ describe('StoreUI', () => {
     ])
       expect(ui.isOpen(id)).toBe(true);
 
-    act(() => ui.reveal('e\u001fGET /x'));
+    act(() => ui.reveal(endpointId('GET /x')));
     expect(ui.isOpen(sectionId('endpoints'))).toBe(true);
   });
 });
diff --git a/website/src/components/Playground/preview/__tests__/storeColumns.test.ts b/website/src/components/Playground/preview/__tests__/storeColumns.test.ts
index ecba79576722..2541b4ee5e29 100644
--- a/website/src/components/Playground/preview/__tests__/storeColumns.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeColumns.test.ts
@@ -6,11 +6,11 @@ import {
   NARROW_WIDTH,
   pageColumns,
 } from '../store/columns';
-import type { EntityRow } from '../store/model';
+import { entityId, type EntityRow } from '../store/model';
 import { plain, type VNode } from '../store/refs';
 
 const row = (pk: string, raw: unknown): EntityRow => ({
-  id: `n\u001fT\u001f${pk}`,
+  id: entityId('T', pk),
   pk,
   table: 'T',
   raw,
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index b7c1b9d067a8..3ea008bb7702 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -4,8 +4,11 @@ import { actionTypes, type State } from '@data-client/react';
 
 import {
   buildModel,
+  endpointId,
   entityId,
+  findRow,
   isChanged,
+  parseRowId,
   prettyPk,
   referrersOf,
   rowLabel,
@@ -176,12 +179,30 @@ describe('store model', () => {
       'GET https://example.com/posts',
       'GET /broken',
     ]);
-    expect(isChanged(state, failed, 'e\u001fGET /broken')).toBe(true);
+    expect(isChanged(state, failed, endpointId('GET /broken'))).toBe(true);
     expect(
-      isChanged(state, failed, 'e\u001fGET https://example.com/posts'),
+      isChanged(state, failed, endpointId('GET https://example.com/posts')),
     ).toBe(false);
   });
 
+  it('reads row ids back', () => {
+    expect(parseRowId(endpointId('GET /posts'))).toEqual({
+      kind: 'endpoint',
+      key: 'GET /posts',
+    });
+    expect(parseRowId(entityId('[Comment]', '{"postId":"1"}'))).toEqual({
+      kind: 'entity',
+      table: '[Comment]',
+      pk: '{"postId":"1"}',
+    });
+    expect(parseRowId('something else')).toBeUndefined();
+    const model = buildModel(state, new SchemaRegistry());
+    expect(findRow(model, entityId('User', '123'))?.id).toBe(
+      entityId('User', '123'),
+    );
+    expect(findRow(model, endpointId('GET /nope'))).toBeUndefined();
+  });
+
   it('falls back to plain values when the stored shape does not match', () => {
     const val = (v: unknown) => ({ t: 'val', v });
     expect(resolve('x', new schema.Values(User))).toEqual(val('x'));
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index 150af99609e0..10ae8f12c5bb 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -11,7 +11,6 @@ import {
 } from './model';
 import { plain } from './refs';
 import type { EndpointRecord } from './schemaRegistry';
-import { Segmented } from './Sections';
 import styles from './store.module.css';
 import { Block, Field, formatTime, RefList, RowChip } from './Value';
 
@@ -83,6 +82,36 @@ export function EndpointDetail({ row }: { row: EndpointRow }) {
   );
 }
 
+function Segmented<V extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: Record<V, string>;
+  value: V;
+  onChange: (value: V) => void;
+}) {
+  return (
+    <div className={styles.seg} role="group" aria-label={label}>
+      {(Object.keys(options) as V[]).map(v => (
+        <button
+          key={v}
+          type="button"
+          aria-pressed={value === v}
+          onClick={e => {
+            e.stopPropagation();
+            onChange(v);
+          }}
+        >
+          {options[v]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 /** What useSuspense() hands the component for this endpoint */
 function Returns({ record }: { record: EndpointRecord }) {
   const controller = useController();
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index 089becebfee5..e6aede802f62 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -7,15 +7,15 @@ import React, {
 } from 'react';
 
 import { EndpointDetail, EntityDetail } from './Details';
+import { offsetIn } from './dom';
 import {
   findRow,
   isEndpointRow,
   prettyPk,
   type AnyRow,
   type EntityTable,
-  type StoreModel,
 } from './model';
-import { offsetIn, useNav, type ListView, type View } from './nav';
+import { useNav, type ListView } from './nav';
 import styles from './store.module.css';
 import {
   endpointColumns,
@@ -25,7 +25,6 @@ import {
   tableColumns,
   type Column,
 } from './Table';
-import { EndpointKey, EntityKey } from './Value';
 
 type Scroller = React.RefObject<HTMLElement | null>;
 type Header = (tools: React.ReactNode) => React.ReactNode;
@@ -310,32 +309,3 @@ export function RecordView({ id }: { id: string }) {
     </div>
   );
 }
-
-/** What a breadcrumb shows for a view */
-export function crumbLabel(view: View, model: StoreModel): React.ReactNode {
-  switch (view.kind) {
-    case 'root':
-      return 'State';
-    case 'list': {
-      const count =
-        'ids' in view ? view.ids.length
-        : view.pks ? view.pks.length
-        : (model.table(view.table)?.rows.length ?? 0);
-      return (
-        <>
-          <span className={styles.crumbName}>{view.label}</span>
-          <span className={styles.count}>{count.toLocaleString()}</span>
-        </>
-      );
-    }
-    case 'record': {
-      const row = findRow(model, view.id);
-      if (!row) return '…';
-      return isEndpointRow(row) ?
-          <EndpointKey method={row.method} path={row.path} />
-        : <span className={styles.crumbName}>
-            <EntityKey table={row.table} pk={row.pk} />
-          </span>;
-    }
-  }
-}
diff --git a/website/src/components/Playground/preview/store/RootView.tsx b/website/src/components/Playground/preview/store/RootView.tsx
index 32ec4fb7e755..ca5c570ca134 100644
--- a/website/src/components/Playground/preview/store/RootView.tsx
+++ b/website/src/components/Playground/preview/store/RootView.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 
 import { TIME_WIDTH } from './columns';
 import { EntityDetail } from './Details';
+import { attrSelector, offsetIn } from './dom';
 import {
   optimisticId,
   splitKey,
@@ -9,7 +10,7 @@ import {
   type EntityTable,
   type StoreModel,
 } from './model';
-import { offsetIn, useNav } from './nav';
+import { useNav } from './nav';
 import { plain } from './refs';
 import { GroupLabel, Internals, SectionBlock } from './Sections';
 import styles from './store.module.css';
@@ -122,7 +123,7 @@ function TableIndex({
           onClick={() => {
             const el = scroller.current;
             const group = el?.querySelector<HTMLElement>(
-              `[data-table="${table.key.replace(/["\\]/g, '\\$&')}"]`,
+              attrSelector('data-table', table.key),
             );
             if (el && group)
               el.scrollTo({ top: offsetIn(el, group), behavior: 'smooth' });
diff --git a/website/src/components/Playground/preview/store/Sections.tsx b/website/src/components/Playground/preview/store/Sections.tsx
index e74e1a193048..436f4ea3e7cc 100644
--- a/website/src/components/Playground/preview/store/Sections.tsx
+++ b/website/src/components/Playground/preview/store/Sections.tsx
@@ -1,58 +1,10 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import type { EndpointRow, EntityTable, StoreModel } from './model';
-import { optimisticId, splitKey } from './model';
+import type { EntityTable, StoreModel } from './model';
 import { plain } from './refs';
 import styles from './store.module.css';
-import { ROW_LIMIT, sectionId, showAllId, useStoreUI } from './StoreUI';
-import { EndpointKey, Field } from './Value';
-
-/** Every view shows the same sections; only how rows lay out differs */
-export function StoreSections({
-  model,
-  endpoints,
-  renderTable,
-}: {
-  model: StoreModel;
-  endpoints: React.ReactNode;
-  renderTable: (table: EntityTable) => React.ReactNode;
-}) {
-  const entityCount = model.tables.reduce((n, t) => n + t.rows.length, 0);
-  return (
-    <>
-      <OptimisticSection model={model} />
-      <Section
-        name="endpoints"
-        title="Endpoints"
-        count={model.endpoints.length}
-      >
-        {endpoints}
-      </Section>
-      <Section name="entities" title="Entities" count={entityCount}>
-        {model.tables.map(renderTable)}
-      </Section>
-      <InternalsSection model={model} />
-    </>
-  );
-}
-
-export function EndpointLabel({
-  row,
-  open,
-}: {
-  row: EndpointRow;
-  open: boolean;
-}) {
-  return (
-    <>
-      <Chevron open={open} />
-      <span className={styles.trunc}>
-        <EndpointKey method={row.method} path={row.path} />
-      </span>
-    </>
-  );
-}
+import { Field } from './Value';
 
 /** `Post 312`, with a disclosure arrow when `open` is given */
 export function GroupLabel({
@@ -74,61 +26,13 @@ export function GroupLabel({
   );
 }
 
-export function Segmented<V extends string>({
-  label,
-  options,
-  value,
-  onChange,
-}: {
-  label: string;
-  options: Record<V, string>;
-  value: V;
-  onChange: (value: V) => void;
-}) {
-  return (
-    <div className={styles.seg} role="group" aria-label={label}>
-      {(Object.keys(options) as V[]).map(v => (
-        <button
-          key={v}
-          type="button"
-          aria-pressed={value === v}
-          onClick={e => {
-            e.stopPropagation();
-            onChange(v);
-          }}
-        >
-          {options[v]}
-        </button>
-      ))}
-    </div>
-  );
-}
-
 export function Chevron({ open }: { open: boolean }) {
   return (
     <span className={clsx(styles.chevron, open && styles.chevronOpen)}>▶</span>
   );
 }
 
-/** Collapsible block with a sticky header; the tree view's open state */
-export function Section({
-  name,
-  ...props
-}: Omit<React.ComponentProps<typeof SectionBlock>, 'open' | 'onToggle'> & {
-  name: string;
-}) {
-  const { isOpen, toggle } = useStoreUI();
-  const id = sectionId(name);
-  return (
-    <SectionBlock
-      {...props}
-      open={isOpen(id)}
-      onToggle={() => toggle(id)}
-      chevron
-    />
-  );
-}
-
+/** Collapsible block with a sticky header */
 export function SectionBlock({
   title,
   count,
@@ -163,103 +67,7 @@ export function SectionBlock({
   );
 }
 
-/** Props making a row (tr or div) expand on click or Enter/Space */
-export function useRowProps(id: string, className?: string) {
-  const { isOpen, toggle, selected } = useStoreUI();
-  const open = isOpen(id);
-  return {
-    open,
-    props: {
-      'data-id': id,
-      tabIndex: 0,
-      'aria-expanded': open,
-      className: clsx(
-        styles.row,
-        className,
-        selected === id && styles.selected,
-      ),
-      onClick: () => toggle(id),
-      onKeyDown: (e: React.KeyboardEvent) => {
-        if (e.target !== e.currentTarget) return;
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          toggle(id);
-        }
-      },
-    },
-  };
-}
-
-/** Rows of a table, capped at ROW_LIMIT until "Show all" */
-export function useLimitedRows<T>(tableKey: string, rows: readonly T[]) {
-  const { isOpen, toggle } = useStoreUI();
-  const all = isOpen(showAllId(tableKey));
-  const shown = all ? rows : rows.slice(0, ROW_LIMIT);
-  const footer =
-    rows.length > ROW_LIMIT ?
-      <button
-        type="button"
-        className={styles.showAll}
-        onClick={() => toggle(showAllId(tableKey))}
-      >
-        {all ? 'Show fewer' : `Show all ${rows.length}`}
-      </button>
-    : null;
-  return { shown, footer };
-}
-
-function OptimisticSection({ model }: { model: StoreModel }) {
-  if (!model.optimistic.length) return null;
-  return (
-    <Section
-      name="optimistic"
-      title="Optimistic"
-      count={model.optimistic.length}
-    >
-      {model.optimistic.map(action => (
-        <OptimisticRow key={optimisticId(action)} action={action} />
-      ))}
-    </Section>
-  );
-}
-
-function OptimisticRow({
-  action,
-}: {
-  action: StoreModel['optimistic'][number];
-}) {
-  const { open, props } = useRowProps(optimisticId(action));
-  const { method, path } = splitKey(action.key);
-  return (
-    <>
-      <div {...props}>
-        <Chevron open={open} />
-        <span className={clsx(styles.method, styles.optimistic)}>{method}</span>
-        <span className={styles.trunc}>{path}</span>
-        <span className={clsx(styles.pill, styles.optimistic)}>
-          waiting for server
-        </span>
-      </div>
-      {open && (
-        <div className={styles.detail}>
-          <Field name="key" node={{ t: 'val', v: action.key }} />
-          <Field name="args" node={plain(action.args)} />
-          <Field name="fetchedAt" node={{ t: 'val', v: action.fetchedAt }} />
-        </div>
-      )}
-    </>
-  );
-}
-
-/** Bookkeeping most people never need, collapsed by default */
-function InternalsSection({ model }: { model: StoreModel }) {
-  return (
-    <Section name="internals" title="Internals">
-      <Internals model={model} />
-    </Section>
-  );
-}
-
+/** Bookkeeping most people never need */
 export function Internals({ model }: { model: StoreModel }) {
   return (
     <div className={styles.detail}>
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 7597e1cb4e80..bef824ac7833 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -10,16 +10,23 @@ import React, {
   useState,
 } from 'react';
 
-import { crumbLabel, ListView, RecordView } from './DiveViews';
-import { buildModel, isChanged, type StoreModel } from './model';
-import { NavContext, offsetIn, type Nav, type View } from './nav';
+import { ListView, RecordView } from './DiveViews';
+import { flash, scrollToRow, slide } from './dom';
+import {
+  buildModel,
+  findRow,
+  isChanged,
+  isEndpointRow,
+  type StoreModel,
+} from './model';
+import { NavContext, type Nav, type View } from './nav';
 import RootView from './RootView';
 import type SchemaRegistry from './schemaRegistry';
 import styles from './store.module.css';
 import { StoreUIProvider } from './StoreUI';
 import TreeView from './TreeView';
+import { RowKey } from './Value';
 import { useTabStorage } from '../../../../utils/tabStorage';
-import { prefersReducedMotion, springEasing, springs } from '../../../motion';
 
 interface Entry {
   readonly key: number;
@@ -243,31 +250,32 @@ function Level({
   );
 }
 
-/** Moves in from `direction` (1: the right, -1: the left) */
-function slide(el: HTMLElement, direction: 1 | -1) {
-  if (typeof el.animate !== 'function' || prefersReducedMotion()) return;
-  el.animate(
-    [
-      { opacity: 0, translate: `${direction * 24}px 0` },
-      { opacity: 1, translate: '0 0' },
-    ],
-    smooth,
-  );
-}
-const smooth = springEasing(springs.smooth);
-
-/** Highlights the rows in `scope` whose id passes `test`, for a moment */
-function flash(scope: HTMLElement, test: (id: string) => boolean) {
-  if (typeof scope.animate !== 'function' || prefersReducedMotion()) return;
-  for (const row of scope.querySelectorAll<HTMLElement>('[data-id]')) {
-    if (!test(row.dataset.id!)) continue;
-    row.animate(
-      [
-        { backgroundColor: 'var(--store-flash)' },
-        { backgroundColor: 'transparent' },
-      ],
-      { duration: 1400, easing: 'ease-out' },
-    );
+/** What a breadcrumb shows for a view */
+function crumbLabel(view: View, model: StoreModel): React.ReactNode {
+  switch (view.kind) {
+    case 'root':
+      return 'State';
+    case 'list': {
+      const count =
+        'ids' in view ? view.ids.length
+        : view.pks ? view.pks.length
+        : (model.table(view.table)?.rows.length ?? 0);
+      return (
+        <>
+          <span className={styles.crumbName}>{view.label}</span>
+          <span className={styles.count}>{count.toLocaleString()}</span>
+        </>
+      );
+    }
+    case 'record': {
+      const row = findRow(model, view.id);
+      if (!row) return '…';
+      return isEndpointRow(row) ?
+          <RowKey row={row} />
+        : <span className={styles.crumbName}>
+            <RowKey row={row} />
+          </span>;
+    }
   }
 }
 
@@ -324,19 +332,6 @@ function useFlashChanges(
   }, [ref, state]);
 }
 
-function scrollToRow(scroller: HTMLElement, id: string) {
-  const row = scroller.querySelector<HTMLElement>(
-    `[data-id="${CSS.escape(id)}"]`,
-  );
-  if (!row) return;
-  // leave room for the section header
-  scroller.scrollTo({
-    top: Math.max(0, offsetIn(scroller, row) - 32),
-    behavior: 'smooth',
-  });
-  row.focus({ preventScroll: true });
-}
-
 function TableIcon() {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true">
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
index b0baae9dc9dd..2981bdc1164e 100644
--- a/website/src/components/Playground/preview/store/StoreUI.tsx
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react';
 
-import { isEndpointId, type StoreModel } from './model';
+import { isEndpointId, nodeId, type StoreModel } from './model';
 
 /** Rows shown per table before "Show all" */
 export const ROW_LIMIT = 8;
@@ -28,9 +28,9 @@ const StoreUIContext = createContext<StoreUIValue>({
 });
 export const useStoreUI = () => useContext(StoreUIContext);
 
-export const groupId = (key: string) => `g\u001f${key}`;
-export const showAllId = (key: string) => `a\u001f${key}`;
-export const sectionId = (name: string) => `s\u001f${name}`;
+export const groupId = (key: string) => nodeId('g', key);
+export const showAllId = (key: string) => nodeId('a', key);
+export const sectionId = (name: string) => nodeId('s', name);
 
 /** Sections (but Internals) and the first few Entity types to appear start
  * open; rows start closed */
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 738e0eefa9ab..acdd9724ed1a 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -13,6 +13,7 @@ import { Status } from './Details';
 import {
   errorText,
   prettyPk,
+  rowLabel,
   type AnyRow,
   type EndpointRow,
   type EntityRow,
@@ -249,7 +250,6 @@ function dataSpecs(
   rows: readonly EntityRow[],
   width: number,
 ): Spec[] {
-  const owner = (row: EntityRow) => `${table.key} ${prettyPk(row.pk)}`;
   if (table.kind !== 'entity') {
     const name = table.kind === 'collection' ? 'items' : 'value';
     return [
@@ -258,7 +258,7 @@ function dataSpecs(
         header: name,
         want: columnWidth(rows, row => row.value, name, width),
         cell: (row, w) => (
-          <Cell node={row.value} name={name} width={w} owner={owner(row)} />
+          <Cell node={row.value} name={name} width={w} owner={rowLabel(row)} />
         ),
         has: () => true,
       },
@@ -273,7 +273,9 @@ function dataSpecs(
       cell: (row, w) => {
         const node = value(row);
         return (
-          node && <Cell node={node} name={name} width={w} owner={owner(row)} />
+          node && (
+            <Cell node={node} name={name} width={w} owner={rowLabel(row)} />
+          )
         );
       },
       has: row => value(row) !== undefined,
@@ -375,7 +377,7 @@ export function endpointColumns(width: number): Column<EndpointRow>[] {
             node={row.value}
             name="value"
             width={width - keyWidth - STATUS_WIDTH}
-            owner={`${row.method} ${row.path}`}
+            owner={rowLabel(row)}
           />,
     },
   ];
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 35c7d06f85ac..33786c76568d 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -1,24 +1,28 @@
+import clsx from 'clsx';
 import React from 'react';
 
 import { EndpointDetail, EntityDetail, Status } from './Details';
 import {
+  optimisticId,
+  PK_FIELD,
   prettyPk,
+  splitKey,
   type EndpointRow,
   type EntityRow,
   type EntityTable,
   type StoreModel,
 } from './model';
-import {
-  Chevron,
-  EndpointLabel,
-  GroupLabel,
-  StoreSections,
-  useLimitedRows,
-  useRowProps,
-} from './Sections';
+import { plain } from './refs';
+import { Chevron, GroupLabel, Internals, SectionBlock } from './Sections';
 import styles from './store.module.css';
-import { groupId } from './StoreUI';
-import { Inline } from './Value';
+import {
+  groupId,
+  ROW_LIMIT,
+  sectionId,
+  showAllId,
+  useStoreUI,
+} from './StoreUI';
+import { EndpointKey, Field, Inline } from './Value';
 
 /** Explorer: one line per row with a preview of its fields */
 export default function TreeView({ model }: { model: StoreModel }) {
@@ -35,6 +39,151 @@ export default function TreeView({ model }: { model: StoreModel }) {
   );
 }
 
+/** The same sections as the table view; only how rows lay out differs */
+function StoreSections({
+  model,
+  endpoints,
+  renderTable,
+}: {
+  model: StoreModel;
+  endpoints: React.ReactNode;
+  renderTable: (table: EntityTable) => React.ReactNode;
+}) {
+  const entityCount = model.tables.reduce((n, t) => n + t.rows.length, 0);
+  return (
+    <>
+      <OptimisticSection model={model} />
+      <Section
+        name="endpoints"
+        title="Endpoints"
+        count={model.endpoints.length}
+      >
+        {endpoints}
+      </Section>
+      <Section name="entities" title="Entities" count={entityCount}>
+        {model.tables.map(renderTable)}
+      </Section>
+      <InternalsSection model={model} />
+    </>
+  );
+}
+
+/** Collapsible block with a sticky header; the tree view's open state */
+function Section({
+  name,
+  ...props
+}: Omit<React.ComponentProps<typeof SectionBlock>, 'open' | 'onToggle'> & {
+  name: string;
+}) {
+  const { isOpen, toggle } = useStoreUI();
+  const id = sectionId(name);
+  return (
+    <SectionBlock
+      {...props}
+      open={isOpen(id)}
+      onToggle={() => toggle(id)}
+      chevron
+    />
+  );
+}
+
+/** Props making a row (tr or div) expand on click or Enter/Space */
+function useRowProps(id: string, className?: string) {
+  const { isOpen, toggle, selected } = useStoreUI();
+  const open = isOpen(id);
+  return {
+    open,
+    props: {
+      'data-id': id,
+      tabIndex: 0,
+      'aria-expanded': open,
+      className: clsx(
+        styles.row,
+        className,
+        selected === id && styles.selected,
+      ),
+      onClick: () => toggle(id),
+      onKeyDown: (e: React.KeyboardEvent) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggle(id);
+        }
+      },
+    },
+  };
+}
+
+/** Rows of a table, capped at ROW_LIMIT until "Show all" */
+function useLimitedRows<T>(tableKey: string, rows: readonly T[]) {
+  const { isOpen, toggle } = useStoreUI();
+  const all = isOpen(showAllId(tableKey));
+  const shown = all ? rows : rows.slice(0, ROW_LIMIT);
+  const footer =
+    rows.length > ROW_LIMIT ?
+      <button
+        type="button"
+        className={styles.showAll}
+        onClick={() => toggle(showAllId(tableKey))}
+      >
+        {all ? 'Show fewer' : `Show all ${rows.length}`}
+      </button>
+    : null;
+  return { shown, footer };
+}
+
+function OptimisticSection({ model }: { model: StoreModel }) {
+  if (!model.optimistic.length) return null;
+  return (
+    <Section
+      name="optimistic"
+      title="Optimistic"
+      count={model.optimistic.length}
+    >
+      {model.optimistic.map(action => (
+        <OptimisticRow key={optimisticId(action)} action={action} />
+      ))}
+    </Section>
+  );
+}
+
+function OptimisticRow({
+  action,
+}: {
+  action: StoreModel['optimistic'][number];
+}) {
+  const { open, props } = useRowProps(optimisticId(action));
+  const { method, path } = splitKey(action.key);
+  return (
+    <>
+      <div {...props}>
+        <Chevron open={open} />
+        <span className={clsx(styles.method, styles.optimistic)}>{method}</span>
+        <span className={styles.trunc}>{path}</span>
+        <span className={clsx(styles.pill, styles.optimistic)}>
+          waiting for server
+        </span>
+      </div>
+      {open && (
+        <div className={styles.detail}>
+          <Field name="key" node={{ t: 'val', v: action.key }} />
+          <Field name="args" node={plain(action.args)} />
+          <Field name="fetchedAt" node={{ t: 'val', v: action.fetchedAt }} />
+        </div>
+      )}
+    </>
+  );
+}
+
+/** Bookkeeping most people never need, collapsed by default */
+function InternalsSection({ model }: { model: StoreModel }) {
+  return (
+    <Section name="internals" title="Internals">
+      <Internals model={model} />
+    </Section>
+  );
+}
+
 function EndpointTreeRow({ row }: { row: EndpointRow }) {
   const { open, props } = useRowProps(row.id);
   return (
@@ -48,6 +197,17 @@ function EndpointTreeRow({ row }: { row: EndpointRow }) {
   );
 }
 
+function EndpointLabel({ row, open }: { row: EndpointRow; open: boolean }) {
+  return (
+    <>
+      <Chevron open={open} />
+      <span className={styles.trunc}>
+        <EndpointKey method={row.method} path={row.path} />
+      </span>
+    </>
+  );
+}
+
 function EntityTreeGroup({
   table,
   model,
@@ -76,9 +236,13 @@ function EntityTreeGroup({
 
 function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
   const { open, props } = useRowProps(row.id);
+  // the pk is the row's key, so its field would only repeat it
   const preview =
     row.value.t === 'obj' ?
-      { ...row.value, entries: row.value.entries.filter(([k]) => k !== 'id') }
+      {
+        ...row.value,
+        entries: row.value.entries.filter(([k]) => k !== PK_FIELD),
+      }
     : row.value;
   return (
     <>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 06392448b110..166df6a8fe6b 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -1,19 +1,17 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { chipWidth } from './columns';
+import { fitChips, INLINE_LIMIT, isTimeField } from './columns';
 import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
-import { useNav, type ListView } from './nav';
-import { CIRCULAR, type VNode } from './refs';
+import { refsList, useNav, type ListView } from './nav';
+import { CIRCULAR, isRefList, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
 /** Items shown before a "N more" button in expanded values */
 const BLOCK_LIMIT = 20;
 /** Refs listed in a record before a count chip that dives into all of them */
-export const RECORD_REFS = 10;
-/** Items shown inline (table cells, tree previews) before "+N" */
-const INLINE_LIMIT = 3;
+const RECORD_REFS = 10;
 
 export function RefChip({
   id,
@@ -65,18 +63,22 @@ export function EntityKey({ table, pk }: { table: string; pk: string }) {
   );
 }
 
+/** The key of any row: `GET /posts` or `Post 1` */
+export function RowKey({ row }: { row: AnyRow }) {
+  return isEndpointRow(row) ?
+      <EndpointKey method={row.method} path={row.path} />
+    : <EntityKey table={row.table} pk={row.pk} />;
+}
+
 /** A chip for any row, endpoint or stored */
 export function RowChip({ row }: { row: AnyRow }) {
-  return isEndpointRow(row) ?
-      <RefChip
-        id={row.id}
-        className={styles.endpointRef}
-        label={<EndpointKey method={row.method} path={row.path} />}
-      />
-    : <RefChip
-        id={row.id}
-        label={<EntityKey table={row.table} pk={row.pk} />}
-      />;
+  return (
+    <RefChip
+      id={row.id}
+      className={isEndpointRow(row) ? styles.endpointRef : undefined}
+      label={<RowKey row={row} />}
+    />
+  );
 }
 
 /** Dives into a list of rows: `+79`, or `Comment · 80` when none fit */
@@ -102,25 +104,6 @@ export function CountChip({
   );
 }
 
-/** Room for a `+79` chip and the separators around it */
-const COUNT_WIDTH = 44;
-
-type RefNode = Extract<VNode, { t: 'ref' }>;
-const isRefList = (
-  node: VNode,
-): node is { t: 'arr'; items: readonly RefNode[] } =>
-  node.t === 'arr' &&
-  node.items.length > 0 &&
-  node.items.every(i => i.t === 'ref');
-
-/** The list a count chip dives into: one table's rows when they share one */
-function refsList(items: readonly RefNode[], label: string): ListView {
-  const table = items[0].key;
-  return items.every(i => i.key === table) ?
-      { kind: 'list', label, table, pks: items.map(i => i.pk) }
-    : { kind: 'list', label, ids: items.map(i => entityId(i.key, i.pk)) };
-}
-
 /** The first `RECORD_REFS` chips; the table view dives into the rest */
 export function RefList({
   chips,
@@ -157,14 +140,7 @@ export function Cell({
 }) {
   if (!isRefList(node)) return <Inline node={node} name={name} />;
   const { items } = node;
-  let used = 16;
-  let fit = 0;
-  for (const item of items) {
-    const room = fit + 1 < items.length ? width - COUNT_WIDTH : width;
-    used += chipWidth(item.key, item.pk) + 8;
-    if (used > room) break;
-    fit++;
-  }
+  const fit = fitChips(items, width);
   const list = refsList(items, `${owner} ${name}`);
   if (!fit)
     return (
@@ -361,9 +337,6 @@ export function Primitive({ value, name }: { value: unknown; name?: string }) {
   return <span className={styles.number}>{String(value)}</span>;
 }
 
-const isTimeField = (name: string) =>
-  name === 'date' || name === 'lastReset' || /[a-z]At$/.test(name);
-
 const timeFormatter = Intl.DateTimeFormat('en-US', {
   hour: 'numeric',
   minute: 'numeric',
diff --git a/website/src/components/Playground/preview/store/columns.ts b/website/src/components/Playground/preview/store/columns.ts
index 99ee3a142971..f035b14edf49 100644
--- a/website/src/components/Playground/preview/store/columns.ts
+++ b/website/src/components/Playground/preview/store/columns.ts
@@ -10,7 +10,15 @@ const HEADER_CHAR = 7.5;
 const PAD = 20;
 /** The `+N` column that opens a row's other fields below it */
 export const MORE_WIDTH = 38;
-/** A time of day, `3:38:36.875 PM` */
+/** Items shown inline (table cells, tree previews) before "+N" */
+export const INLINE_LIMIT = 3;
+/** Room for a `+79` chip and the separators around it */
+export const COUNT_WIDTH = 44;
+/** Characters in a time of day, `3:38:36.875 PM` (what `isTimeField`
+ * values show as) */
+const TIME_CHARS = 14;
+/** A time of day column: `TIME_CHARS * CHAR` plus `PAD`, rounded up to what
+ * the proportional digits of the 12px font need */
 export const TIME_WIDTH = 124;
 /** A status pill, `fresh 57s` */
 export const STATUS_WIDTH = 96;
@@ -20,10 +28,31 @@ export const NARROW_WIDTH = 480;
 /** Rows sampled to size columns */
 const SAMPLE = 20;
 
+/** Fields holding a timestamp, shown as a time of day */
+export const isTimeField = (name: string) =>
+  name === 'date' || name === 'lastReset' || /[a-z]At$/.test(name);
+
 /** Rough rendered width of a ref chip, in px */
 export const chipWidth = (key: string, pk: string) =>
   (key.length + 1 + prettyPk(pk).length) * CHIP_CHAR + 14;
 
+/** How many of `items`' chips fit in a `width` px cell, leaving room for a
+ * count chip whenever some are left over */
+export function fitChips(
+  items: readonly { readonly key: string; readonly pk: string }[],
+  width: number,
+) {
+  let used = 16;
+  let fit = 0;
+  for (const item of items) {
+    const room = fit + 1 < items.length ? width - COUNT_WIDTH : width;
+    used += chipWidth(item.key, item.pk) + 8;
+    if (used > room) break;
+    fit++;
+  }
+  return fit;
+}
+
 /** Natural single-line width of a value, in px */
 function naturalWidth(node: VNode | undefined, name: string): number {
   if (!node) return 0;
@@ -34,13 +63,13 @@ function naturalWidth(node: VNode | undefined, name: string): number {
       const { v } = node;
       if (typeof v === 'string') return (v.length + 2) * CHAR;
       // timestamps show as a time of day
-      if (typeof v === 'number' && /(^date|At)$/.test(name)) return 14 * CHAR;
+      if (typeof v === 'number' && isTimeField(name)) return TIME_CHARS * CHAR;
       return String(v).length * CHAR;
     }
     case 'arr': {
-      const shown = node.items.slice(0, 3);
+      const shown = node.items.slice(0, INLINE_LIMIT);
       const items = shown.reduce((w, i) => w + naturalWidth(i, '') + 16, 16);
-      return node.items.length > shown.length ? items + 44 : items;
+      return node.items.length > shown.length ? items + COUNT_WIDTH : items;
     }
     case 'obj':
       return 30 * CHAR;
diff --git a/website/src/components/Playground/preview/store/dom.ts b/website/src/components/Playground/preview/store/dom.ts
new file mode 100644
index 000000000000..f34f40058bd3
--- /dev/null
+++ b/website/src/components/Playground/preview/store/dom.ts
@@ -0,0 +1,62 @@
+import { prefersReducedMotion, springEasing, springs } from '../../../motion';
+
+/** What `scrollToRow` leaves above a revealed row, for the sticky section
+ * header (`.sectionHeader` in store.module.css) */
+const HEADER_HEIGHT = 32;
+
+/** `[name="value"]`; CSS.escape where the browser has it (jsdom doesn't) */
+export const attrSelector = (name: string, value: string) =>
+  `[${name}="${
+    typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ?
+      CSS.escape(value)
+    : value.replace(/["\\]/g, '\\$&')
+  }"]`;
+
+/** The element showing row (or other node) `id` */
+export const rowSelector = (id: string) => attrSelector('data-id', id);
+
+/** Where `el` sits in `scroller`'s scrolled content, in px */
+export const offsetIn = (scroller: HTMLElement, el: Element) =>
+  el.getBoundingClientRect().top -
+  scroller.getBoundingClientRect().top +
+  scroller.scrollTop;
+
+const smooth = springEasing(springs.smooth);
+
+/** Moves in from `direction` (1: the right, -1: the left) */
+export function slide(el: HTMLElement, direction: 1 | -1) {
+  if (typeof el.animate !== 'function' || prefersReducedMotion()) return;
+  el.animate(
+    [
+      { opacity: 0, translate: `${direction * 24}px 0` },
+      { opacity: 1, translate: '0 0' },
+    ],
+    smooth,
+  );
+}
+
+/** Highlights the rows in `scope` whose id passes `test`, for a moment */
+export function flash(scope: HTMLElement, test: (id: string) => boolean) {
+  if (typeof scope.animate !== 'function' || prefersReducedMotion()) return;
+  for (const row of scope.querySelectorAll<HTMLElement>('[data-id]')) {
+    if (!test(row.dataset.id!)) continue;
+    row.animate(
+      [
+        { backgroundColor: 'var(--store-flash)' },
+        { backgroundColor: 'transparent' },
+      ],
+      { duration: 1400, easing: 'ease-out' },
+    );
+  }
+}
+
+/** Scrolls row `id` into view below the section header and focuses it */
+export function scrollToRow(scroller: HTMLElement, id: string) {
+  const row = scroller.querySelector<HTMLElement>(rowSelector(id));
+  if (!row) return;
+  scroller.scrollTo({
+    top: Math.max(0, offsetIn(scroller, row) - HEADER_HEIGHT),
+    behavior: 'smooth',
+  });
+  row.focus({ preventScroll: true });
+}
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 6faee99d2339..0b7a13a4d9fe 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -8,13 +8,38 @@ import type {
   default as SchemaRegistry,
 } from './schemaRegistry';
 
+/** Keeps a node's kind and parts apart in its id: no key or pk contains it */
+const SEP = '\u001f';
+/** Id of a node both views share (rows, groups, sections): a one-letter
+ * kind, then its parts */
+export const nodeId = (kind: string, ...parts: readonly string[]) =>
+  [kind, ...parts].join(SEP);
+
 /** Row ids shared by both views, selection and flashes */
-export const endpointId = (key: string) => `e\u001f${key}`;
-export const isEndpointId = (id: string) => id.startsWith('e\u001f');
-export const entityId = (key: string, pk: string) => `n\u001f${key}\u001f${pk}`;
+export const endpointId = (key: string) => nodeId('e', key);
+export const isEndpointId = (id: string) => id.startsWith(`e${SEP}`);
+export const entityId = (key: string, pk: string) => nodeId('n', key, pk);
 /** Stable while other optimistic updates settle around it */
 export const optimisticId = (o: PendingOptimistic) =>
-  `o\u001f${o.key}\u001f${o.fetchedAt}`;
+  nodeId('o', o.key, `${o.fetchedAt}`);
+
+export type RowId =
+  | { readonly kind: 'endpoint'; readonly key: string }
+  | { readonly kind: 'entity'; readonly table: string; readonly pk: string };
+
+/** What a row id names; undefined for ids of other nodes (groups, sections) */
+export function parseRowId(id: string): RowId | undefined {
+  const [kind, ...parts] = id.split(SEP);
+  if (!parts.length) return;
+  if (kind === 'e') return { kind: 'endpoint', key: parts.join(SEP) };
+  if (kind === 'n') {
+    const [table = '', ...pk] = parts;
+    return { kind: 'entity', table, pk: pk.join(SEP) };
+  }
+}
+
+/** The field holding an entity's pk: shown as the row's key, not a field */
+export const PK_FIELD = 'id';
 
 export interface EndpointRow {
   readonly id: string;
@@ -117,7 +142,7 @@ function buildTable(
     for (const pk of pks.slice(0, FIELD_SAMPLE)) {
       const raw = rows[pk];
       if (raw && typeof raw === 'object')
-        for (const f of Object.keys(raw)) if (f !== 'id') fields.add(f);
+        for (const f of Object.keys(raw)) if (f !== PK_FIELD) fields.add(f);
     }
   const byPk = new Map(
     pks.map(pk => [pk, new StoredRow(key, pk, rows[pk], meta?.[pk], schema)]),
@@ -233,9 +258,11 @@ export function referrersOf(model: StoreModel, id: string): AnyRow[] {
 
 /** The endpoint or stored row an id names */
 export function findRow(model: StoreModel, id: string): AnyRow | undefined {
-  if (isEndpointId(id)) return model.endpoints.find(r => r.id === id);
-  const [, key, ...pk] = id.split('\u001f');
-  return model.table(key)?.get(pk.join('\u001f'));
+  const ref = parseRowId(id);
+  if (!ref) return;
+  return ref.kind === 'endpoint' ?
+      model.endpoints.find(r => r.id === id)
+    : model.table(ref.table)?.get(ref.pk);
 }
 
 export const isEndpointRow = (row: AnyRow): row is EndpointRow => 'key' in row;
@@ -282,16 +309,17 @@ export function isChanged(
   next: State<unknown>,
   id: string,
 ) {
-  if (isEndpointId(id)) {
-    const key = id.slice(2);
+  const ref = parseRowId(id);
+  if (!ref) return false;
+  if (ref.kind === 'endpoint') {
+    const { key } = ref;
     return (
       prev.endpoints[key] !== next.endpoints[key] ||
       prev.meta[key] !== next.meta[key]
     );
   }
-  const [, key, ...rest] = id.split('\u001f');
-  const pk = rest.join('\u001f');
-  return prev.entities[key]?.[pk] !== next.entities[key]?.[pk];
+  const { table, pk } = ref;
+  return prev.entities[table]?.[pk] !== next.entities[table]?.[pk];
 }
 
 /** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index feae9aeecc95..e9f58e7c7535 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import type { StoreModel } from './model';
+import { entityId, type StoreModel } from './model';
+import type { RefNode } from './refs';
 
 /** Rows of one table (all, or just `pks`), or rows of any kind by id */
 export type ListView =
@@ -16,6 +17,14 @@ export type ListView =
       readonly ids: readonly string[];
     };
 
+/** The list a count chip dives into: one table's rows when they share one */
+export function refsList(items: readonly RefNode[], label: string): ListView {
+  const table = items[0].key;
+  return items.every(i => i.key === table) ?
+      { kind: 'list', label, table, pks: items.map(i => i.pk) }
+    : { kind: 'list', label, ids: items.map(i => entityId(i.key, i.pk)) };
+}
+
 /** One level of the table view's navigation stack */
 export type View =
   | { readonly kind: 'root' }
@@ -32,9 +41,3 @@ export interface Nav {
 /** Set by the table view only; the tree view expands in place instead */
 export const NavContext = createContext<Nav | null>(null);
 export const useNav = () => useContext(NavContext);
-
-/** Where `el` sits in `scroller`'s scrolled content, in px */
-export const offsetIn = (scroller: HTMLElement, el: Element) =>
-  el.getBoundingClientRect().top -
-  scroller.getBoundingClientRect().top +
-  scroller.scrollTop;
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index de819bdddd59..5b78b5eb0ff7 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -115,6 +115,16 @@ export function resolveRow(row: unknown, table: any): VNode {
   return plain(row);
 }
 
+export type RefNode = Extract<VNode, { t: 'ref' }>;
+
+/** A non-empty list made only of references */
+export const isRefList = (
+  node: VNode,
+): node is { readonly t: 'arr'; readonly items: readonly RefNode[] } =>
+  node.t === 'arr' &&
+  node.items.length > 0 &&
+  node.items.every(i => i.t === 'ref');
+
 /** Stands in for an object that contains itself (denormalized cycles) */
 export const CIRCULAR = Symbol('circular');
 
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index 549ec8952dd4..e151c20bdf7b 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -258,6 +258,7 @@
 .section + .section {
   border-top: 1px solid var(--store-line);
 }
+/* ~32px tall: HEADER_HEIGHT in dom.ts, what scrollToRow leaves above a row */
 .sectionHeader {
   position: sticky;
   top: 0;
@@ -395,6 +396,7 @@ div.row {
 .crumbs ~ .table th {
   top: 1.9rem;
 }
+/* a row is ~28px tall: ROW_GUESS in DiveViews.tsx, until one is measured */
 .table td {
   padding: 0.25rem 0.5rem;
   border-bottom: 1px solid var(--store-line);
@@ -719,6 +721,7 @@ div.row {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* NARROW_WIDTH in columns.ts: narrower panels also get narrower columns */
 @container (min-width: 480px) {
   .recordRow .detail > .fields,
   .record > .detail > .fields {

From 8801c83ca6d55964f11fcf7d65311730aaea6e68 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:20:50 +0000
Subject: [PATCH 14/28] fix(website): Store inspector pager after resize, GC,
 infinite expiry, Query refs, filter

- Pager clamps a page left over from a refit with fewer field pages
- Tables rebuild after GC, which deletes rows in place
- expiresAt: Infinity reads fresh with no countdown or timer
- Query schemas resolve through the schema they wrap
- Filtering skips values JSON can't encode (bigint, cycles)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanelNav.test.tsx  |  4 +++-
 .../preview/__tests__/storeModel.test.ts      | 24 +++++++++++++++++++
 .../Playground/preview/store/Details.tsx      |  4 +++-
 .../Playground/preview/store/DiveViews.tsx    | 12 +++++++++-
 .../Playground/preview/store/Table.tsx        |  1 +
 .../Playground/preview/store/model.ts         |  9 ++++---
 .../Playground/preview/store/refs.ts          |  3 ++-
 .../preview/store/schemaRegistry.ts           |  5 ++++
 8 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
index 9d4308d283f1..f120f27c6d73 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanelNav.test.tsx
@@ -345,11 +345,13 @@ describe('endpoint status', () => {
     expect(screen.getByText('fresh 5s')).toBeTruthy();
     expect(screen.getByText('fresh 2m')).toBeTruthy();
     expect(screen.getByText('invalid')).toBeTruthy();
-    expect(screen.getByTitle('Expires at Infinity')).toBeTruthy();
+    // never expires: fresh without a countdown
+    expect(screen.getByText('fresh')).toBeTruthy();
     act(() => jest.advanceTimersByTime(1000));
     expect(screen.getByText('fresh 4s')).toBeTruthy();
     act(() => jest.advanceTimersByTime(5000));
     expect(screen.queryByText(/fresh \ds/)).toBeNull();
     expect(screen.getAllByText('stale').length).toBeGreaterThan(0);
+    expect(screen.getByText('fresh')).toBeTruthy();
   });
 });
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 3ea008bb7702..d9ed46a4a9bd 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -84,6 +84,30 @@ describe('store model', () => {
     });
   });
 
+  it('resolves a Query through the schema it wraps', () => {
+    const comments = Post.schema.comments;
+    const query = new schema.Query(comments, (entries: any) => entries);
+    expect(resolve('{"postId":"1"}', query)).toEqual({
+      t: 'ref',
+      key: '[Comment]',
+      pk: '{"postId":"1"}',
+    });
+  });
+
+  it('drops rows garbage collection deleted in place', () => {
+    const registry = registryFor('GET https://example.com/posts', [Post]);
+    const entities = { ...state.entities, User: { ...state.entities.User } };
+    const before = { ...state, entities } as State<unknown>;
+    expect(buildModel(before, registry).table('User')?.rows).toHaveLength(1);
+    // GC mutates the table and keeps its identity
+    delete (entities.User as any)[123];
+    registry.middleware({} as any)((a: any) => a)({
+      type: actionTypes.GC,
+    } as any);
+    const after = { ...before } as State<unknown>;
+    expect(buildModel(after, registry).table('User')?.rows).toHaveLength(0);
+  });
+
   it('resolves Values, Object, Lazy and Invalidate members', () => {
     const ref = (key: string, pk: string) => ({ t: 'ref', key, pk });
     expect(resolve({ a: '123' }, new schema.Values(User))).toEqual({
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index 10ae8f12c5bb..176699132129 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -24,6 +24,8 @@ export function Status({ meta }: { meta: Meta }) {
     return <span className={clsx(styles.pill, styles.error)}>error</span>;
   if (meta.invalidated)
     return <span className={clsx(styles.pill, styles.stale)}>invalid</span>;
+  if (!isFinite(meta.expiresAt))
+    return <span className={clsx(styles.pill, styles.fresh)}>fresh</span>;
   const left = meta.expiresAt - now;
   return left > 0 ?
       <span
@@ -41,7 +43,7 @@ function useNow(until: number | undefined) {
   useEffect(() => {
     // a new deadline may already have passed
     setNow(Date.now());
-    if (until === undefined || until <= Date.now()) return;
+    if (until === undefined || !isFinite(until) || until <= Date.now()) return;
     const timer = setInterval(() => {
       const t = Date.now();
       setNow(t);
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index e6aede802f62..cf7b83ac5d5b 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -217,12 +217,22 @@ const Gone = () => (
 
 /** Lowercase text a filter matches against, cached with the stored object */
 const searchCache = new WeakMap<object, string>();
+/** JSON for searching; values JSON can't encode (bigint, cycles) fall back
+ * to their pk alone */
+function stringify(value: unknown) {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
 function searchText(row: AnyRow) {
   if (isEndpointRow(row)) return row.key.toLowerCase();
   const key = row.raw && typeof row.raw === 'object' ? row.raw : null;
   let text = key && searchCache.get(key);
   if (text) return text;
-  text = `${prettyPk(row.pk)} ${JSON.stringify(row.raw)}`.toLowerCase();
+  text = `${prettyPk(row.pk)} ${stringify(row.raw)}`.toLowerCase();
   if (key) searchCache.set(key, text);
   return text;
 }
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index acdd9724ed1a..991aa78c8f38 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -188,6 +188,7 @@ export function Pager({
   onChange: (page: number) => void;
 }) {
   if (pages.length < 2) return null;
+  page = Math.min(page, pages.length - 1);
   const first = pages.slice(0, page).reduce((n, p) => n + p.length, 1);
   const total = pages.reduce((n, p) => n + p.length, 0);
   return (
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 0b7a13a4d9fe..a29b0a41e1ae 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -125,16 +125,18 @@ class StoredRow implements EntityRow {
 
 const tableCache = new WeakMap<
   object,
-  { schema: unknown; meta: unknown; table: EntityTable }
+  { schema: unknown; meta: unknown; gc: number; table: EntityTable }
 >();
 function buildTable(
   key: string,
   rows: Record<string, unknown>,
   meta: State<unknown>['entitiesMeta'][string] | undefined,
   schema: unknown,
+  gc: number,
 ): EntityTable {
   const hit = tableCache.get(rows);
-  if (hit && hit.schema === schema && hit.meta === meta) return hit.table;
+  if (hit && hit.schema === schema && hit.meta === meta && hit.gc === gc)
+    return hit.table;
   const pks = Object.keys(rows);
   const kind = tableKind(schema, rows[pks[0]]);
   const fields = new Set<string>();
@@ -154,7 +156,7 @@ function buildTable(
     fields: [...fields],
     get: pk => byPk.get(pk),
   };
-  tableCache.set(rows, { schema, meta, table });
+  tableCache.set(rows, { schema, meta, gc, table });
   return table;
 }
 
@@ -188,6 +190,7 @@ export function buildModel(
         rows,
         state.entitiesMeta[key],
         registry.entities.get(key),
+        registry.gcCount,
       ),
     ]),
   );
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 5b78b5eb0ff7..48d5904f3ef8 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -74,7 +74,8 @@ export function resolve(value: unknown, schema: any): VNode {
         : plain(value);
     return member(value);
   }
-  if (schema instanceof s.Lazy) return resolve(value, schema.schema);
+  if (schema instanceof s.Lazy || schema instanceof s.Query)
+    return resolve(value, schema.schema);
   const fields =
     isPlainObject(schema) ? schema
     : schema instanceof s.Object ? schema.schema
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index 719432e823d0..6555f4a882bf 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -30,6 +30,8 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
   /** Optimistic updates awaiting their response. The store's own queue is
    * already applied (and so emptied) in the state components can read. */
   optimistic: readonly PendingOptimistic[] = [];
+  /** Bumped by each GC, which deletes rows in place (keeping table identity) */
+  gcCount = 0;
 
   middleware: Middleware<ActionTypes> = () => next => action => {
     switch (action.type) {
@@ -46,6 +48,9 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
       case actionTypes.RESET:
         this.optimistic = [];
         break;
+      case actionTypes.GC:
+        this.gcCount++;
+        break;
       case actionTypes.SET:
         this.learn(action.schema);
         break;

From f23cbd2f7b4886278c4f09de6fc9bce721453388 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:22:53 +0000
Subject: [PATCH 15/28] enhance(website): Open a Collection as a table of its
 members

Its own meta and back-references sit above the member table.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     | 10 ++++
 .../Playground/preview/store/Details.tsx      | 43 ++++++++------
 .../Playground/preview/store/DiveViews.tsx    | 58 +++++++++++++++++--
 .../Playground/preview/store/StorePanel.tsx   | 11 ++--
 .../Playground/preview/store/nav.tsx          | 18 +++++-
 .../Playground/preview/store/store.module.css |  6 ++
 6 files changed, 117 insertions(+), 29 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index 7ed39994ba9e..1ebd89428873 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -187,6 +187,16 @@ describe('StorePanel table view', () => {
     expect(top().querySelectorAll('tr[data-id]').length).toBeGreaterThan(0);
   });
 
+  it('opens a Collection as a table of its members', () => {
+    mount();
+    const collection = top().querySelector('[data-table="[Comment]"]')!;
+    fireEvent.click(collection.querySelector('tr[data-id]')!);
+    // the member table, with the Collection's own meta above it
+    expect(top().querySelectorAll('tr[data-id]').length).toBeGreaterThan(0);
+    expect(within(top()).getByText('used by')).toBeTruthy();
+    expect(within(top()).getByLabelText('Filter rows')).toBeTruthy();
+  });
+
   it('switches to the tree view', () => {
     mount();
     fireEvent.click(screen.getByLabelText('Tree view'));
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index 176699132129..78fea3eab428 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -134,27 +134,34 @@ export function EntityDetail({
   row: EntityRow;
   model: StoreModel;
 }) {
-  const referrers = referrersOf(model, row.id);
   return (
     <div className={styles.detail}>
       <Block node={row.value} />
-      <div className={styles.metaList}>
-        {row.meta && <Field name="meta" node={plain(row.meta)} />}
-        <div className={styles.field}>
-          <span className={styles.label}>used by</span>
-          {referrers.length ?
-            <RefList
-              chips={referrers.map(r => (
-                <RowChip key={r.id} row={r} />
-              ))}
-              list={() => ({
-                kind: 'list',
-                label: 'used by',
-                ids: referrers.map(r => r.id),
-              })}
-            />
-          : <span className={styles.dim}>nothing</span>}
-        </div>
+      <RowMeta row={row} model={model} />
+    </div>
+  );
+}
+
+/** When a row was fetched and what references it */
+export function RowMeta({ row, model }: { row: EntityRow; model: StoreModel }) {
+  const referrers = referrersOf(model, row.id);
+  return (
+    <div className={styles.metaList}>
+      {row.meta && <Field name="meta" node={plain(row.meta)} />}
+      <div className={styles.field}>
+        <span className={styles.label}>used by</span>
+        {referrers.length ?
+          <RefList
+            chips={referrers.map(r => (
+              <RowChip key={r.id} row={r} />
+            ))}
+            list={() => ({
+              kind: 'list',
+              label: 'used by',
+              ids: referrers.map(r => r.id),
+            })}
+          />
+        : <span className={styles.dim}>nothing</span>}
       </div>
     </div>
   );
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index cf7b83ac5d5b..5708814e0c31 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import { EndpointDetail, EntityDetail } from './Details';
+import { EndpointDetail, EntityDetail, RowMeta } from './Details';
 import { offsetIn } from './dom';
 import {
   findRow,
@@ -15,7 +15,7 @@ import {
   type AnyRow,
   type EntityTable,
 } from './model';
-import { useNav, type ListView } from './nav';
+import { membersOf, useNav, type ListView } from './nav';
 import styles from './store.module.css';
 import {
   endpointColumns,
@@ -40,10 +40,13 @@ export function ListView({
   view,
   scroller,
   header,
+  intro,
 }: {
   view: ListView;
   scroller: Scroller;
   header: Header;
+  /** Shown between the header and the rows */
+  intro?: React.ReactNode;
 }) {
   const { model } = useNav()!;
   if ('table' in view) {
@@ -54,13 +57,16 @@ export function ListView({
           pks={view.pks}
           scroller={scroller}
           header={header}
+          intro={intro}
         />
       : <>
           {header(null)}
           <Gone />
         </>;
   }
-  return <IdList ids={view.ids} scroller={scroller} header={header} />;
+  return (
+    <IdList ids={view.ids} scroller={scroller} header={header} intro={intro} />
+  );
 }
 
 /** Rows of one table: its columns, paged, with `+N` and meta columns */
@@ -69,11 +75,13 @@ function TableList({
   pks,
   scroller,
   header,
+  intro,
 }: {
   table: EntityTable;
   pks: readonly string[] | undefined;
   scroller: Scroller;
   header: Header;
+  intro: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const [page, setPage] = useState(0);
@@ -93,6 +101,7 @@ function TableList({
       record={row => <EntityDetail row={row} model={model} />}
       scroller={scroller}
       header={header}
+      intro={intro}
       tools={<Pager pages={pages} page={page} onChange={setPage} />}
     />
   );
@@ -103,10 +112,12 @@ function IdList({
   ids,
   scroller,
   header,
+  intro,
 }: {
   ids: readonly string[];
   scroller: Scroller;
   header: Header;
+  intro: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const rows = useMemo(
@@ -126,6 +137,7 @@ function IdList({
       columns={columns}
       scroller={scroller}
       header={header}
+      intro={intro}
     />
   );
 }
@@ -139,6 +151,7 @@ function FilteredRows<R extends AnyRow>({
   scroller,
   header,
   tools,
+  intro,
 }: {
   rows: readonly R[];
   columns: readonly Column<R>[];
@@ -147,6 +160,7 @@ function FilteredRows<R extends AnyRow>({
   scroller: Scroller;
   header: Header;
   tools?: React.ReactNode;
+  intro?: React.ReactNode;
 }) {
   const { push } = useNav()!;
   const [filter, setFilter] = useState('');
@@ -184,6 +198,7 @@ function FilteredRows<R extends AnyRow>({
           {tools}
         </>,
       )}
+      {intro}
       <RowsTable
         columns={columns}
         rows={matches.slice(start, end)}
@@ -307,7 +322,42 @@ function useWindow(
 }
 
 /** One row with everything about it */
-export function RecordView({ id }: { id: string }) {
+/** A row's own level: a Collection lists its members as a table, with its
+ * own meta above them; any other row shows its record */
+export function RecordLevel({
+  id,
+  scroller,
+  header,
+}: {
+  id: string;
+  scroller: Scroller;
+  header: Header;
+}) {
+  const { model } = useNav()!;
+  const row = findRow(model, id);
+  const members = row && membersOf(model, row);
+  if (!members || !row || isEndpointRow(row))
+    return (
+      <>
+        {header(null)}
+        <RecordView id={id} />
+      </>
+    );
+  return (
+    <ListView
+      view={members}
+      scroller={scroller}
+      header={header}
+      intro={
+        <div className={styles.memberMeta}>
+          <RowMeta row={row} model={model} />
+        </div>
+      }
+    />
+  );
+}
+
+function RecordView({ id }: { id: string }) {
   const { model } = useNav()!;
   const row = findRow(model, id);
   if (!row) return <Gone />;
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index bef824ac7833..9c1b14f1e35f 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -10,7 +10,7 @@ import React, {
   useState,
 } from 'react';
 
-import { ListView, RecordView } from './DiveViews';
+import { ListView, RecordLevel } from './DiveViews';
 import { flash, scrollToRow, slide } from './dom';
 import {
   buildModel,
@@ -172,10 +172,11 @@ function Levels({ model, width }: { model: StoreModel; width: number }) {
                 scroller={scroller}
                 header={tools => crumbs(depth, tools)}
               />
-            : <>
-                {crumbs(depth)}
-                <RecordView id={view.id} />
-              </>
+            : <RecordLevel
+                id={view.id}
+                scroller={scroller}
+                header={tools => crumbs(depth, tools)}
+              />
           }
         </Level>
       ))}
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index e9f58e7c7535..3dd9d8baa13f 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import { entityId, type StoreModel } from './model';
-import type { RefNode } from './refs';
+import { entityId, isEndpointRow, type AnyRow, type StoreModel } from './model';
+import { isRefList, type RefNode } from './refs';
 
 /** Rows of one table (all, or just `pks`), or rows of any kind by id */
 export type ListView =
@@ -25,6 +25,20 @@ export function refsList(items: readonly RefNode[], label: string): ListView {
     : { kind: 'list', label, ids: items.map(i => entityId(i.key, i.pk)) };
 }
 
+/** A Collection row's members, which its record shows as their own table */
+export function membersOf(
+  model: StoreModel,
+  row: AnyRow,
+): ListView | undefined {
+  if (isEndpointRow(row) || model.table(row.table)?.kind !== 'collection')
+    return undefined;
+  const value = row.value;
+  if (!isRefList(value)) return undefined;
+  const list = refsList(value.items, row.table);
+  // members whose table never arrived still show as a plain record
+  return 'table' in list && !model.table(list.table) ? undefined : list;
+}
+
 /** One level of the table view's navigation stack */
 export type View =
   | { readonly kind: 'root' }
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index e151c20bdf7b..d0a17f0431bf 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -730,3 +730,9 @@ div.row {
     gap: 0 1.25rem;
   }
 }
+
+/* a Collection's own meta, above its member table */
+.memberMeta > .metaList {
+  margin: 0;
+  padding: 0.4rem 0.75rem 0.5rem;
+}

From 06e68cdeabc8268c6a432e8d89074688e683fac8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:36:48 +0000
Subject: [PATCH 16/28] fix(website): Store inspector Values Collections,
 custom pks, remount

- Values-backed Collections open as their member table too
- id stays a field when an Entity's pk() uses another field
- A remounted store drops the last one's pending optimistic updates
  before its first render

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../components/Playground/preview/Preview.tsx | 13 +++--
 .../preview/__tests__/storeModel.test.ts      | 52 +++++++++++++++++++
 .../Playground/preview/store/model.ts         | 22 ++++++--
 .../Playground/preview/store/nav.tsx          |  8 +--
 .../Playground/preview/store/refs.ts          |  9 ++++
 5 files changed, 90 insertions(+), 14 deletions(-)

diff --git a/website/src/components/Playground/preview/Preview.tsx b/website/src/components/Playground/preview/Preview.tsx
index 8402480476db..0af7c3e1bc13 100644
--- a/website/src/components/Playground/preview/Preview.tsx
+++ b/website/src/components/Playground/preview/Preview.tsx
@@ -65,14 +65,17 @@ function Preview<T>({
     ],
   );
 
-  const managers = useMemo<Manager[]>(
-    () => [
+  const managers = useMemo<Manager[]>(() => {
+    // this mount is a new store: drop the last one's pending optimistic
+    // updates before the Store panel first renders (DataStore's init()
+    // only runs after it)
+    registry.init();
+    return [
       registry,
       new NetworkManager(),
       new SubscriptionManager(PollingSubscription),
-    ],
-    [registry],
-  );
+    ];
+  }, [registry]);
 
   const coveredResult = row && selectedValue === 'y';
   return (
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index d9ed46a4a9bd..4a68efd67276 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -14,6 +14,7 @@ import {
   rowLabel,
   splitKey,
 } from '../store/model';
+import { membersOf } from '../store/nav';
 import { CIRCULAR, plain, resolve, resolveRow } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
@@ -108,6 +109,57 @@ describe('store model', () => {
     expect(buildModel(after, registry).table('User')?.rows).toHaveLength(0);
   });
 
+  it('keeps id as data when an Entity is keyed by another field', () => {
+    class Article extends Entity {
+      id = 0;
+      slug = '';
+      title = '';
+      pk() {
+        return this.slug;
+      }
+    }
+    const registry = registryFor('k', [Article]);
+    registry.learn([User]);
+    const model = buildModel(
+      {
+        ...state,
+        entities: {
+          Article: { intro: { id: 7, slug: 'intro', title: 'Hi' } },
+          User: state.entities.User,
+        },
+      } as unknown as State<unknown>,
+      registry,
+    );
+    expect(model.table('Article')?.fields).toEqual(['id', 'slug', 'title']);
+    expect(model.table('User')?.fields).toEqual(['name']);
+  });
+
+  it('lists the members of array and Values Collections', () => {
+    const byId = new Collection(new schema.Values(Comment));
+    const registry = registryFor('GET https://example.com/posts', [Post]);
+    registry.learn(byId);
+    const model = buildModel(
+      {
+        ...state,
+        entities: {
+          ...state.entities,
+          [byId.key]: { '{}': { a: '249' } },
+        },
+      } as unknown as State<unknown>,
+      registry,
+    );
+    const members = (key: string, pk: string) =>
+      membersOf(model, model.table(key)!.get(pk)!);
+    expect(members('[Comment]', '{"postId":"1"}')).toEqual({
+      kind: 'list',
+      label: '[Comment]',
+      table: 'Comment',
+      pks: ['249'],
+    });
+    expect(members(byId.key, '{}')).toMatchObject({ pks: ['249'] });
+    expect(members('User', '123')).toBeUndefined();
+  });
+
   it('resolves Values, Object, Lazy and Invalidate members', () => {
     const ref = (key: string, pk: string) => ({ t: 'ref', key, pk });
     expect(resolve({ a: '123' }, new schema.Values(User))).toEqual({
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index a29b0a41e1ae..39e158561efa 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -38,8 +38,8 @@ export function parseRowId(id: string): RowId | undefined {
   }
 }
 
-/** The field holding an entity's pk: shown as the row's key, not a field */
-export const PK_FIELD = 'id';
+/** The usual field holding an entity's pk, shown as the row's key instead */
+const PK_FIELD = 'id';
 
 export interface EndpointRow {
   readonly id: string;
@@ -67,8 +67,11 @@ export interface EntityTable {
   readonly key: string;
   readonly kind: 'entity' | 'collection' | 'scalar' | 'unknown';
   readonly rows: readonly EntityRow[];
-  /** Field names in first-seen order, without `id` (entities only) */
+  /** Field names in first-seen order, without `pkField` (entities only) */
   readonly fields: readonly string[];
+  /** The field that repeats the row key (`id`), when every row's matches;
+   * entities keyed by another field (a custom `pk()`) keep `id` as data */
+  readonly pkField?: string;
   readonly get: (pk: string) => EntityRow | undefined;
 }
 
@@ -140,11 +143,19 @@ function buildTable(
   const pks = Object.keys(rows);
   const kind = tableKind(schema, rows[pks[0]]);
   const fields = new Set<string>();
+  const sample = pks.slice(0, FIELD_SAMPLE);
+  const pkField =
+    (
+      kind === 'entity' &&
+      sample.every(pk => String((rows[pk] as any)?.[PK_FIELD]) === pk)
+    ) ?
+      PK_FIELD
+    : undefined;
   if (kind === 'entity')
-    for (const pk of pks.slice(0, FIELD_SAMPLE)) {
+    for (const pk of sample) {
       const raw = rows[pk];
       if (raw && typeof raw === 'object')
-        for (const f of Object.keys(raw)) if (f !== PK_FIELD) fields.add(f);
+        for (const f of Object.keys(raw)) if (f !== pkField) fields.add(f);
     }
   const byPk = new Map(
     pks.map(pk => [pk, new StoredRow(key, pk, rows[pk], meta?.[pk], schema)]),
@@ -152,6 +163,7 @@ function buildTable(
   const table: EntityTable = {
     key,
     kind,
+    pkField,
     rows: [...byPk.values()],
     fields: [...fields],
     get: pk => byPk.get(pk),
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index 3dd9d8baa13f..c6219b30dd4b 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 
 import { entityId, isEndpointRow, type AnyRow, type StoreModel } from './model';
-import { isRefList, type RefNode } from './refs';
+import { memberRefs, type RefNode } from './refs';
 
 /** Rows of one table (all, or just `pks`), or rows of any kind by id */
 export type ListView =
@@ -32,9 +32,9 @@ export function membersOf(
 ): ListView | undefined {
   if (isEndpointRow(row) || model.table(row.table)?.kind !== 'collection')
     return undefined;
-  const value = row.value;
-  if (!isRefList(value)) return undefined;
-  const list = refsList(value.items, row.table);
+  const refs = memberRefs(row.value);
+  if (!refs) return undefined;
+  const list = refsList(refs, row.table);
   // members whose table never arrived still show as a plain record
   return 'table' in list && !model.table(list.table) ? undefined : list;
 }
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 48d5904f3ef8..f4132c0cc5a5 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -126,6 +126,15 @@ export const isRefList = (
   node.items.length > 0 &&
   node.items.every(i => i.t === 'ref');
 
+/** The refs a Collection row holds: its array, or a Values collection's
+ * object of refs */
+export function memberRefs(node: VNode): readonly RefNode[] | undefined {
+  if (isRefList(node)) return node.items;
+  if (node.t !== 'obj' || !node.entries.length) return undefined;
+  const items = node.entries.map(([, v]) => v);
+  return items.every(i => i.t === 'ref') ? (items as RefNode[]) : undefined;
+}
+
 /** Stands in for an object that contains itself (denormalized cycles) */
 export const CIRCULAR = Symbol('circular');
 

From 51e8bf48141ff961c549ce7af6a3c415e309ba8b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 16:36:48 +0000
Subject: [PATCH 17/28] enhance(website): Right-align record keys, quiet the
 meta

Records read as one key|value column with nested objects in a sub-column.
Meta is a smaller, muted footer; the tree view folds it into one summary
line that expands on click.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/preview/store/Details.tsx      |  90 ++++++++++++--
 .../Playground/preview/store/TreeView.tsx     |  21 ++--
 .../Playground/preview/store/Value.tsx        |   5 +-
 .../Playground/preview/store/store.module.css | 117 ++++++++++++------
 4 files changed, 177 insertions(+), 56 deletions(-)

diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index 78fea3eab428..ae8d6f318212 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -57,7 +57,14 @@ function useNow(until: number | undefined) {
 const seconds = (ms: number) =>
   ms < 60_000 ? `${Math.ceil(ms / 1000)}s` : `${Math.round(ms / 60_000)}m`;
 
-export function EndpointDetail({ row }: { row: EndpointRow }) {
+export function EndpointDetail({
+  row,
+  collapsedMeta,
+}: {
+  row: EndpointRow;
+  /** Meta behind a disclosure (the tree view) instead of always shown */
+  collapsedMeta?: boolean;
+}) {
   const [view, setView] = useState<'stored' | 'returns'>('stored');
   const { record } = row;
   return (
@@ -73,13 +80,13 @@ export function EndpointDetail({ row }: { row: EndpointRow }) {
       {view === 'returns' && record ?
         <Returns record={record} />
       : <Block node={row.value} />}
-      <div className={styles.metaList}>
+      <MetaBlock collapsed={collapsedMeta} summary={metaSummary(row.meta)}>
         <Field name="key" node={{ t: 'val', v: row.key }} />
         {record?.args.length ?
           <Field name="args" node={plain(record.args)} />
         : null}
-        {row.meta && <Field name="meta" node={plain(row.meta)} />}
-      </div>
+        <MetaFields meta={row.meta} />
+      </MetaBlock>
     </div>
   );
 }
@@ -130,26 +137,41 @@ function Returns({ record }: { record: EndpointRecord }) {
 export function EntityDetail({
   row,
   model,
+  collapsedMeta,
 }: {
   row: EntityRow;
   model: StoreModel;
+  /** Meta behind a disclosure (the tree view) instead of always shown */
+  collapsedMeta?: boolean;
 }) {
   return (
     <div className={styles.detail}>
       <Block node={row.value} />
-      <RowMeta row={row} model={model} />
+      <RowMeta row={row} model={model} collapsed={collapsedMeta} />
     </div>
   );
 }
 
 /** When a row was fetched and what references it */
-export function RowMeta({ row, model }: { row: EntityRow; model: StoreModel }) {
+export function RowMeta({
+  row,
+  model,
+  collapsed,
+}: {
+  row: EntityRow;
+  model: StoreModel;
+  collapsed?: boolean;
+}) {
   const referrers = referrersOf(model, row.id);
+  const summary = metaSummary(row.meta);
+  if (referrers.length) summary.push(`used by ${referrers.length}`);
   return (
-    <div className={styles.metaList}>
-      {row.meta && <Field name="meta" node={plain(row.meta)} />}
+    <MetaBlock collapsed={collapsed} summary={summary}>
+      <MetaFields meta={row.meta} />
       <div className={styles.field}>
-        <span className={styles.label}>used by</span>
+        <span className={styles.key}>
+          used by<span className={styles.dim}>:</span>
+        </span>
         {referrers.length ?
           <RefList
             chips={referrers.map(r => (
@@ -163,6 +185,54 @@ export function RowMeta({ row, model }: { row: EntityRow; model: StoreModel }) {
           />
         : <span className={styles.dim}>nothing</span>}
       </div>
-    </div>
+    </MetaBlock>
+  );
+}
+
+/** The quieter rows below a record's data: always shown, or (`collapsed`)
+ * behind a `meta` disclosure that sums them up on one line */
+function MetaBlock({
+  collapsed,
+  summary,
+  children,
+}: {
+  collapsed?: boolean;
+  summary: readonly string[];
+  children: React.ReactNode;
+}) {
+  const list = (
+    <div className={clsx(styles.fields, styles.metaList)}>{children}</div>
+  );
+  if (!collapsed) return list;
+  return (
+    <details className={styles.metaDetails}>
+      <summary>
+        <span className={styles.chevron}>▶</span>
+        meta
+        <span className={styles.metaSummary}>{summary.join(' · ')}</span>
+      </summary>
+      {list}
+    </details>
+  );
+}
+
+/** One row per meta field: fetchedAt, date, expiresAt, error... */
+function MetaFields({ meta }: { meta: Meta | EntityRow['meta'] }) {
+  const node = plain(meta);
+  if (node.t !== 'obj') return null;
+  return node.entries.map(([k, v]) => <Field key={k} name={k} node={v} />);
+}
+
+/** `fetched 12:11:13.045 PM · expires 12:12:13.045 PM · error` */
+function metaSummary(meta: Meta | EntityRow['meta']) {
+  if (!meta) return [];
+  const parts = [`fetched ${formatTime(meta.fetchedAt || meta.date)}`];
+  parts.push(
+    isFinite(meta.expiresAt) ?
+      `expires ${formatTime(meta.expiresAt)}`
+    : 'never expires',
   );
+  if ('error' in meta && meta.error) parts.push('error');
+  if ('invalidated' in meta && meta.invalidated) parts.push('invalidated');
+  return parts;
 }
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 33786c76568d..711e0ca38cb9 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { EndpointDetail, EntityDetail, Status } from './Details';
 import {
   optimisticId,
-  PK_FIELD,
   prettyPk,
   splitKey,
   type EndpointRow,
@@ -192,7 +191,7 @@ function EndpointTreeRow({ row }: { row: EndpointRow }) {
         <EndpointLabel row={row} open={open} />
         <Status meta={row.meta} />
       </div>
-      {open && <EndpointDetail row={row} />}
+      {open && <EndpointDetail row={row} collapsedMeta />}
     </>
   );
 }
@@ -225,7 +224,7 @@ function EntityTreeGroup({
       {open && (
         <div className={styles.indent}>
           {shown.map(row => (
-            <EntityTreeRow key={row.id} row={row} model={model} />
+            <EntityTreeRow key={row.id} row={row} table={table} model={model} />
           ))}
           {footer}
         </div>
@@ -234,14 +233,22 @@ function EntityTreeGroup({
   );
 }
 
-function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
+function EntityTreeRow({
+  row,
+  table,
+  model,
+}: {
+  row: EntityRow;
+  table: EntityTable;
+  model: StoreModel;
+}) {
   const { open, props } = useRowProps(row.id);
   // the pk is the row's key, so its field would only repeat it
   const preview =
-    row.value.t === 'obj' ?
+    row.value.t === 'obj' && table.pkField ?
       {
         ...row.value,
-        entries: row.value.entries.filter(([k]) => k !== PK_FIELD),
+        entries: row.value.entries.filter(([k]) => k !== table.pkField),
       }
     : row.value;
   return (
@@ -255,7 +262,7 @@ function EntityTreeRow({ row, model }: { row: EntityRow; model: StoreModel }) {
       </div>
       {open && (
         <div className={styles.indent}>
-          <EntityDetail row={row} model={model} />
+          <EntityDetail row={row} model={model} collapsedMeta />
         </div>
       )}
     </>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 166df6a8fe6b..af1e0293dfad 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -245,11 +245,8 @@ export function Block({ node, name }: { node: VNode; name?: string }) {
 }
 
 export function Field({ name, node }: { name: string; node: VNode }) {
-  const nested =
-    (node.t === 'obj' && node.entries.length > 0) ||
-    (node.t === 'arr' && node.items.some(i => i.t === 'obj'));
   return (
-    <div className={clsx(styles.field, nested && styles.nested)}>
+    <div className={styles.field}>
       <span className={styles.key}>
         {name}
         <span className={styles.dim}>:</span>
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index d0a17f0431bf..f70b19a6c843 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -2,6 +2,8 @@
 .store {
   --store-fg: rgb(191, 199, 213);
   --store-dim: rgb(105, 112, 152);
+  /* secondary text that stays AA on the code background */
+  --store-muted: rgb(146, 154, 186);
   --store-key: rgb(130, 170, 255);
   --store-string: rgb(195, 232, 141);
   --store-number: rgb(247, 140, 108);
@@ -346,7 +348,8 @@ div.row {
     opacity: 1;
     pointer-events: auto;
   }
-  .moreCell:hover {
+  .moreCell:hover,
+  .metaDetails > summary:hover {
     color: var(--store-fg);
   }
   .moreCell:hover::after {
@@ -561,9 +564,6 @@ div.row {
   width: fit-content;
   margin-bottom: 0.25rem;
 }
-.fields {
-  flex-basis: 100%;
-}
 .field {
   display: flex;
   flex-wrap: wrap;
@@ -571,17 +571,86 @@ div.row {
   gap: 0 0.4rem;
   min-width: 0;
 }
-.field.nested > .fields {
-  padding-left: 1rem;
+/* an object's fields: names right-aligned against one value column. A
+   nested object aligns its own names in a sub-column of that value */
+.fields {
+  display: grid;
+  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+  column-gap: 0.5rem;
+  align-items: baseline;
+  flex-basis: 100%;
+  min-width: 0;
+}
+.fields .fields {
+  grid-template-columns: max-content minmax(0, 1fr);
+}
+.fields > .field {
+  display: contents;
+}
+.fields > .field > .key {
+  max-width: 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: end;
+}
+.fields > .more {
+  grid-column: 2;
+  justify-self: start;
 }
+
+/* meta: the quieter rows below a record's data */
 .metaList {
-  margin-top: 0.3rem;
-  padding-top: 0.25rem;
-  border-top: 1px dashed var(--store-line);
+  margin-top: 0.4rem;
+  padding-top: 0.4rem;
+  border-top: 1px dashed var(--store-line-strong);
+  font-size: 11px;
+  color: var(--store-muted);
 }
 .metaList .key,
-.label {
-  color: var(--store-dim);
+.metaList .string,
+.metaList .number,
+.metaList .null {
+  color: inherit;
+}
+/* tree view: meta behind a disclosure that sums it up on one line */
+.metaDetails {
+  margin-top: 0.25rem;
+  font-size: 11px;
+  color: var(--store-muted);
+}
+.metaDetails > summary {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  min-width: 0;
+  padding: 0.2rem 0;
+  border-radius: 4px;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+.metaDetails > summary::-webkit-details-marker {
+  display: none;
+}
+.metaDetails > summary:focus-visible {
+  outline: 2px solid var(--store-key);
+  outline-offset: -2px;
+}
+.metaDetails[open] > summary > .chevron {
+  transform: rotate(90deg);
+}
+.metaSummary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.metaDetails > .metaList {
+  margin: 0 0 0.2rem;
+  padding: 0;
+  border: 0;
 }
 .wrapList {
   display: inline-flex;
@@ -701,38 +770,16 @@ div.row {
   border-color: rgba(199, 146, 234, 0.4);
 }
 
-
-
 /* a record: inline below its row, or as its own level */
 .recordRow .detail,
 .record > .detail {
   padding: 0.5rem 0.75rem 0.6rem;
 }
-/* each field of a record: name column, then its value */
-.recordRow .detail > .fields > .field,
-.record > .detail > .fields > .field {
-  display: grid;
-  grid-template-columns: 6rem minmax(0, 1fr);
-  gap: 0 0.5rem;
-}
-.recordRow .detail > .fields > .field > .key,
-.record > .detail > .fields > .field > .key {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* NARROW_WIDTH in columns.ts: narrower panels also get narrower columns */
-@container (min-width: 480px) {
-  .recordRow .detail > .fields,
-  .record > .detail > .fields {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0 1.25rem;
-  }
-}
 
 /* a Collection's own meta, above its member table */
 .memberMeta > .metaList {
   margin: 0;
   padding: 0.4rem 0.75rem 0.5rem;
+  border-top: 0;
+  border-bottom: 1px dashed var(--store-line-strong);
 }

From 9bac642ac7f4f89ced2419231b3dfc62b3e93a39 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 17:24:03 +0000
Subject: [PATCH 18/28] Store inspector: meta at the bottom of records,
 Collection +N opens its record

A record level fills the panel and its meta sits at the bottom, below a
Collection's member table too. A Collection's items count chip opens the
Collection itself (members plus meta) instead of a separate list view.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     |  4 ++-
 .../Playground/preview/store/DiveViews.tsx    | 35 +++++++++++--------
 .../Playground/preview/store/Table.tsx        | 14 +++++++-
 .../Playground/preview/store/Value.tsx        | 11 +++---
 .../Playground/preview/store/store.module.css | 28 +++++++++++++--
 5 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index 1ebd89428873..ebbf062069cc 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -182,9 +182,11 @@ describe('StorePanel table view', () => {
   it('dives into long lists of refs and endpoint lists', () => {
     mount();
     const collection = within(top().querySelector('[data-table="[Comment]"]')!);
+    // a Collection's +N opens its own record: the member table and its meta
     fireEvent.click(collection.getByText(/^\+\d+$/));
-    expect(crumbs()[2]).toMatch(/^\[Comment\] all items40$/);
+    expect(crumbs()[2]).toMatch(/^\[Comment\] all$/);
     expect(top().querySelectorAll('tr[data-id]').length).toBeGreaterThan(0);
+    expect(within(top()).getByText('used by')).toBeTruthy();
   });
 
   it('opens a Collection as a table of its members', () => {
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index 5708814e0c31..47da030f580f 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -40,13 +40,13 @@ export function ListView({
   view,
   scroller,
   header,
-  intro,
+  footer,
 }: {
   view: ListView;
   scroller: Scroller;
   header: Header;
-  /** Shown between the header and the rows */
-  intro?: React.ReactNode;
+  /** Shown below the rows, at the bottom of the level */
+  footer?: React.ReactNode;
 }) {
   const { model } = useNav()!;
   if ('table' in view) {
@@ -57,7 +57,7 @@ export function ListView({
           pks={view.pks}
           scroller={scroller}
           header={header}
-          intro={intro}
+          footer={footer}
         />
       : <>
           {header(null)}
@@ -65,7 +65,12 @@ export function ListView({
         </>;
   }
   return (
-    <IdList ids={view.ids} scroller={scroller} header={header} intro={intro} />
+    <IdList
+      ids={view.ids}
+      scroller={scroller}
+      header={header}
+      footer={footer}
+    />
   );
 }
 
@@ -75,13 +80,13 @@ function TableList({
   pks,
   scroller,
   header,
-  intro,
+  footer,
 }: {
   table: EntityTable;
   pks: readonly string[] | undefined;
   scroller: Scroller;
   header: Header;
-  intro: React.ReactNode;
+  footer: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const [page, setPage] = useState(0);
@@ -101,7 +106,7 @@ function TableList({
       record={row => <EntityDetail row={row} model={model} />}
       scroller={scroller}
       header={header}
-      intro={intro}
+      footer={footer}
       tools={<Pager pages={pages} page={page} onChange={setPage} />}
     />
   );
@@ -112,12 +117,12 @@ function IdList({
   ids,
   scroller,
   header,
-  intro,
+  footer,
 }: {
   ids: readonly string[];
   scroller: Scroller;
   header: Header;
-  intro: React.ReactNode;
+  footer: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const rows = useMemo(
@@ -137,7 +142,7 @@ function IdList({
       columns={columns}
       scroller={scroller}
       header={header}
-      intro={intro}
+      footer={footer}
     />
   );
 }
@@ -151,7 +156,7 @@ function FilteredRows<R extends AnyRow>({
   scroller,
   header,
   tools,
-  intro,
+  footer,
 }: {
   rows: readonly R[];
   columns: readonly Column<R>[];
@@ -160,7 +165,7 @@ function FilteredRows<R extends AnyRow>({
   scroller: Scroller;
   header: Header;
   tools?: React.ReactNode;
-  intro?: React.ReactNode;
+  footer?: React.ReactNode;
 }) {
   const { push } = useNav()!;
   const [filter, setFilter] = useState('');
@@ -198,7 +203,6 @@ function FilteredRows<R extends AnyRow>({
           {tools}
         </>,
       )}
-      {intro}
       <RowsTable
         columns={columns}
         rows={matches.slice(start, end)}
@@ -220,6 +224,7 @@ function FilteredRows<R extends AnyRow>({
           : null
         }
       />
+      {footer}
     </>
   );
 }
@@ -348,7 +353,7 @@ export function RecordLevel({
       view={members}
       scroller={scroller}
       header={header}
-      intro={
+      footer={
         <div className={styles.memberMeta}>
           <RowMeta row={row} model={model} />
         </div>
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 991aa78c8f38..4d08a5c1f560 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -259,7 +259,19 @@ function dataSpecs(
         header: name,
         want: columnWidth(rows, row => row.value, name, width),
         cell: (row, w) => (
-          <Cell node={row.value} name={name} width={w} owner={rowLabel(row)} />
+          <Cell
+            node={row.value}
+            name={name}
+            width={w}
+            owner={rowLabel(row)}
+            // a Collection holds nothing but its members, so its own record
+            // (their table, with its meta) is the list to dive into
+            dive={
+              table.kind === 'collection' ?
+                { kind: 'record', id: row.id }
+              : undefined
+            }
+          />
         ),
         has: () => true,
       },
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index af1e0293dfad..0c5ca47b34d8 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import { fitChips, INLINE_LIMIT, isTimeField } from './columns';
 import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
-import { refsList, useNav, type ListView } from './nav';
+import { refsList, useNav, type ListView, type View } from './nav';
 import { CIRCULAR, isRefList, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
@@ -81,12 +81,12 @@ export function RowChip({ row }: { row: AnyRow }) {
   );
 }
 
-/** Dives into a list of rows: `+79`, or `Comment · 80` when none fit */
+/** Dives into the rest: `+79`, or `Comment · 80` when none fit */
 export function CountChip({
   list,
   children,
 }: {
-  list: ListView;
+  list: View;
   children: React.ReactNode;
 }) {
   const nav = useNav();
@@ -131,17 +131,20 @@ export function Cell({
   name,
   width,
   owner,
+  dive,
 }: {
   node: VNode;
   name: string;
   width: number;
   /** Row label, for the breadcrumb of a list it dives into */
   owner: string;
+  /** Where the count chip goes instead of a list of just these refs */
+  dive?: View;
 }) {
   if (!isRefList(node)) return <Inline node={node} name={name} />;
   const { items } = node;
   const fit = fitChips(items, width);
-  const list = refsList(items, `${owner} ${name}`);
+  const list = dive ?? refsList(items, `${owner} ${name}`);
   if (!fit)
     return (
       <CountChip list={list}>
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index f70b19a6c843..f0fa9412b6f1 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -116,6 +116,9 @@
 }
 .level {
   grid-area: 1 / 1;
+  /* a column, so a record's meta can sit at the bottom of a short level */
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   min-height: 0;
   overflow-y: auto;
@@ -123,6 +126,9 @@
   outline: none;
   container-type: inline-size;
 }
+.level > * {
+  flex-shrink: 0;
+}
 .level[data-covered] {
   visibility: hidden;
 }
@@ -776,10 +782,26 @@ div.row {
   padding: 0.5rem 0.75rem 0.6rem;
 }
 
-/* a Collection's own meta, above its member table */
+/* a record level fills the panel, and its meta (or a Collection's, below its
+   member table) sits at the bottom */
+.level > .record {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.record > .detail {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.record > .detail > .fields {
+  flex-basis: auto;
+}
+.record > .detail > .metaList,
+.memberMeta {
+  margin-top: auto;
+}
 .memberMeta > .metaList {
   margin: 0;
   padding: 0.4rem 0.75rem 0.5rem;
-  border-top: 0;
-  border-bottom: 1px dashed var(--store-line-strong);
 }

From ad7c3969819d84797d23fafb783c0636b0f274eb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 17:34:18 +0000
Subject: [PATCH 19/28] Store inspector: keep render pure

A covered level remembers what it showed in state instead of a ref
written during render, tree group defaults are state rather than a Map
mutated in render, and the row to flash on going back lives in the level
stack state instead of a ref set inside a state updater.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/preview/store/StorePanel.tsx   | 37 +++++++++----------
 .../Playground/preview/store/StoreUI.tsx      | 16 +++++---
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 9c1b14f1e35f..7a412e7c41ba 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -89,25 +89,27 @@ export default function StorePanel({ registry }: { registry: SchemaRegistry }) {
 /** The table view: a stack of full-panel levels. Covered levels stay
  * mounted (hidden), so going back keeps their scroll, pages and filters */
 function Levels({ model, width }: { model: StoreModel; width: number }) {
-  const [stack, setStack] = useState<readonly Entry[]>([
-    { key: 0, view: { kind: 'root' } },
-  ]);
+  // the record a level was opened from flashes once that level is back on top
+  const [{ stack, returnTo }, setLevels] = useState<{
+    readonly stack: readonly Entry[];
+    readonly returnTo: string | null;
+  }>({ stack: [{ key: 0, view: { kind: 'root' } }], returnTo: null });
   const nextKey = useRef(1);
   const push = useCallback((view: View) => {
     const key = nextKey.current++;
-    setStack(prev => [...prev, { key, view }]);
+    setLevels(prev => ({ ...prev, stack: [...prev.stack, { key, view }] }));
   }, []);
   const nav = useMemo<Nav>(
     () => ({ model, width, push }),
     [model, width, push],
   );
-  // the row a record was opened from flashes once you're back
-  const returnTo = useRef<string | null>(null);
   const back = useCallback((depth: number) => {
-    setStack(prev => {
-      const left = prev[depth];
-      returnTo.current = left?.view.kind === 'record' ? left.view.id : null;
-      return prev.slice(0, Math.max(1, depth));
+    setLevels(({ stack }) => {
+      const left = stack[depth]?.view;
+      return {
+        stack: stack.slice(0, Math.max(1, depth)),
+        returnTo: left?.kind === 'record' ? left.id : null,
+      };
     });
   }, []);
 
@@ -198,7 +200,8 @@ function Level({
   depth: number;
   top: boolean;
   onBack: (depth: number) => void;
-  returnTo: React.RefObject<string | null>;
+  /** Row to flash when this level is uncovered */
+  returnTo: string | null;
   children: (
     scroller: React.RefObject<HTMLDivElement | null>,
   ) => React.ReactNode;
@@ -206,9 +209,9 @@ function Level({
   const ref = useRef<HTMLDivElement>(null);
   // a covered level keeps what it showed, so store updates cost it nothing
   // until it is uncovered
-  const shown = useRef(nav);
-  if (top) shown.current = nav;
-  const current = shown.current;
+  const [shown, setShown] = useState(nav);
+  if (top && shown !== nav) setShown(nav);
+  const current = top ? nav : shown;
   const content = useMemo(
     () => (
       <NavContext.Provider value={current}>{children(ref)}</NavContext.Provider>
@@ -225,11 +228,7 @@ function Level({
     // keyboard focus follows, so Escape goes back
     el.focus({ preventScroll: true });
     slide(el, before === null ? 1 : -1);
-    const from = returnTo.current;
-    if (before === false && from) {
-      flash(el, id => id === from);
-      returnTo.current = null;
-    }
+    if (before === false && returnTo) flash(el, id => id === returnTo);
   }, [top, depth, returnTo]);
   return (
     <div
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
index 2981bdc1164e..1bf4fa65e097 100644
--- a/website/src/components/Playground/preview/store/StoreUI.tsx
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -3,7 +3,6 @@ import React, {
   useCallback,
   useContext,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
@@ -56,11 +55,16 @@ export function StoreUIProvider({
 
   // A group's default is fixed when it first appears, so tables arriving
   // later (Suspense loads them one by one) never reshuffle what is open
-  const groupDefaults = useRef(new Map<string, boolean>()).current;
-  for (const table of model.tables) {
-    const id = groupId(table.key);
-    if (!groupDefaults.has(id))
-      groupDefaults.set(id, groupDefaults.size < OPEN_GROUPS);
+  const [groupDefaults, setGroupDefaults] = useState<
+    ReadonlyMap<string, boolean>
+  >(new Map());
+  if (model.tables.some(table => !groupDefaults.has(groupId(table.key)))) {
+    const next = new Map(groupDefaults);
+    for (const table of model.tables) {
+      const id = groupId(table.key);
+      if (!next.has(id)) next.set(id, next.size < OPEN_GROUPS);
+    }
+    setGroupDefaults(next);
   }
 
   const isOpen = useCallback(

From ba56bf6343ff9e69b96810d8bdf9a1cd6ece7d37 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 17:36:12 +0000
Subject: [PATCH 20/28] Store inspector: address review findings

Lists show a row once however often it is referenced, the tree caps
bare previews and endpoint rows, recursive schemas no longer overflow the
registry, the selector fallback hex-escapes control characters, and a
row whose meta alone changed still flashes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/storeModel.test.ts      | 26 +++++++++++++++++-
 .../Playground/preview/store/StoreUI.tsx      |  7 ++++-
 .../Playground/preview/store/TreeView.tsx     | 27 +++++++++++++------
 .../Playground/preview/store/Value.tsx        |  6 +++--
 .../Playground/preview/store/dom.ts           |  8 +++++-
 .../Playground/preview/store/model.ts         |  5 +++-
 .../Playground/preview/store/nav.tsx          |  9 +++++--
 .../preview/store/schemaRegistry.ts           |  7 +++--
 8 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 4a68efd67276..b02e9152cf00 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -14,7 +14,7 @@ import {
   rowLabel,
   splitKey,
 } from '../store/model';
-import { membersOf } from '../store/nav';
+import { membersOf, refsList } from '../store/nav';
 import { CIRCULAR, plain, resolve, resolveRow } from '../store/refs';
 import SchemaRegistry from '../store/schemaRegistry';
 
@@ -446,6 +446,30 @@ describe('store model', () => {
     };
     expect(isChanged(state, next, entityId('User', '123'))).toBe(true);
     expect(isChanged(state, next, entityId('Post', '1'))).toBe(false);
+    // shouldUpdate() can keep the row but still refresh its meta
+    const refetched = {
+      ...state,
+      entitiesMeta: {
+        ...state.entitiesMeta,
+        Post: { 1: { date: 1, fetchedAt: 1, expiresAt: 2 } },
+      },
+    };
+    expect(isChanged(state, refetched, entityId('Post', '1'))).toBe(true);
+  });
+
+  it('learns recursive schemas', () => {
+    const tree = new schema.Object({});
+    tree.define({ children: [tree], author: User });
+    const registry = new SchemaRegistry();
+    registry.learn(tree);
+    expect(registry.entities.get('User')).toBe(User);
+  });
+
+  it('lists a referenced row once', () => {
+    const ref = (pk: string) => ({ t: 'ref', key: 'User', pk }) as const;
+    expect(refsList([ref('1'), ref('2'), ref('1')], 'x')).toMatchObject({
+      pks: ['1', '2'],
+    });
   });
 
   it('splits endpoint keys', () => {
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
index 1bf4fa65e097..77b2c7eef416 100644
--- a/website/src/components/Playground/preview/store/StoreUI.tsx
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -29,6 +29,7 @@ export const useStoreUI = () => useContext(StoreUIContext);
 
 export const groupId = (key: string) => nodeId('g', key);
 export const showAllId = (key: string) => nodeId('a', key);
+export const showAllEndpointsId = nodeId('A');
 export const sectionId = (name: string) => nodeId('s', name);
 
 /** Sections (but Internals) and the first few Entity types to appear start
@@ -89,7 +90,11 @@ export function StoreUIProvider({
   const reveal = useCallback(
     (id: string) => {
       const ancestors = [id];
-      if (isEndpointId(id)) ancestors.push(sectionId('endpoints'));
+      if (isEndpointId(id)) {
+        ancestors.push(sectionId('endpoints'));
+        if (model.endpoints.findIndex(row => row.id === id) >= ROW_LIMIT)
+          ancestors.push(showAllEndpointsId);
+      }
       for (const table of model.tables) {
         const index = table.rows.findIndex(row => row.id === id);
         if (index < 0) continue;
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 711e0ca38cb9..7990efa48d26 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -18,6 +18,7 @@ import {
   groupId,
   ROW_LIMIT,
   sectionId,
+  showAllEndpointsId,
   showAllId,
   useStoreUI,
 } from './StoreUI';
@@ -28,9 +29,7 @@ export default function TreeView({ model }: { model: StoreModel }) {
   return (
     <StoreSections
       model={model}
-      endpoints={model.endpoints.map(row => (
-        <EndpointTreeRow key={row.id} row={row} />
-      ))}
+      endpoints={<EndpointTreeRows rows={model.endpoints} />}
       renderTable={table => (
         <EntityTreeGroup key={table.key} table={table} model={model} />
       )}
@@ -113,17 +112,29 @@ function useRowProps(id: string, className?: string) {
   };
 }
 
-/** Rows of a table, capped at ROW_LIMIT until "Show all" */
-function useLimitedRows<T>(tableKey: string, rows: readonly T[]) {
+function EndpointTreeRows({ rows }: { rows: readonly EndpointRow[] }) {
+  const { shown, footer } = useLimitedRows(showAllEndpointsId, rows);
+  return (
+    <>
+      {shown.map(row => (
+        <EndpointTreeRow key={row.id} row={row} />
+      ))}
+      {footer}
+    </>
+  );
+}
+
+/** Rows capped at ROW_LIMIT until "Show all" (`showAll` toggles it) */
+function useLimitedRows<T>(showAll: string, rows: readonly T[]) {
   const { isOpen, toggle } = useStoreUI();
-  const all = isOpen(showAllId(tableKey));
+  const all = isOpen(showAll);
   const shown = all ? rows : rows.slice(0, ROW_LIMIT);
   const footer =
     rows.length > ROW_LIMIT ?
       <button
         type="button"
         className={styles.showAll}
-        onClick={() => toggle(showAllId(tableKey))}
+        onClick={() => toggle(showAll)}
       >
         {all ? 'Show fewer' : `Show all ${rows.length}`}
       </button>
@@ -215,7 +226,7 @@ function EntityTreeGroup({
   model: StoreModel;
 }) {
   const { open, props } = useRowProps(groupId(table.key));
-  const { shown, footer } = useLimitedRows(table.key, table.rows);
+  const { shown, footer } = useLimitedRows(showAllId(table.key), table.rows);
   return (
     <>
       <div {...props}>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 0c5ca47b34d8..a3647c01c7a1 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -8,6 +8,8 @@ import { CIRCULAR, isRefList, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
+/** Fields a bare preview shows (the row truncates long before) */
+const BARE_LIMIT = 20;
 /** Items shown before a "N more" button in expanded values */
 const BLOCK_LIMIT = 20;
 /** Refs listed in a record before a count chip that dives into all of them */
@@ -170,7 +172,7 @@ export function Inline({
 }: {
   node: VNode;
   name?: string;
-  /** Top-level object without braces, every field (the row truncates) */
+  /** Top-level object without braces, its first BARE_LIMIT fields */
   bare?: boolean;
   /** Array items shown */
   limit?: number;
@@ -210,7 +212,7 @@ export function Inline({
       );
     }
     case 'obj': {
-      const shown = bare ? node.entries : node.entries.slice(0, 2);
+      const shown = node.entries.slice(0, bare ? BARE_LIMIT : 2);
       const rest = node.entries.length - shown.length;
       return (
         <span className={styles.inlineList}>
diff --git a/website/src/components/Playground/preview/store/dom.ts b/website/src/components/Playground/preview/store/dom.ts
index f34f40058bd3..8718184807ff 100644
--- a/website/src/components/Playground/preview/store/dom.ts
+++ b/website/src/components/Playground/preview/store/dom.ts
@@ -9,7 +9,13 @@ export const attrSelector = (name: string, value: string) =>
   `[${name}="${
     typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ?
       CSS.escape(value)
-    : value.replace(/["\\]/g, '\\$&')
+      // row ids hold the U+001F separator, which CSS needs as a hex escape
+      // eslint-disable-next-line no-control-regex
+    : value.replace(/["\\]|[\0-\x1f\x7f]/g, c =>
+        c === '"' || c === '\\' ?
+          `\\${c}`
+        : `\\${c.charCodeAt(0).toString(16)} `,
+      )
   }"]`;
 
 /** The element showing row (or other node) `id` */
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 39e158561efa..6b961b357001 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -334,7 +334,10 @@ export function isChanged(
     );
   }
   const { table, pk } = ref;
-  return prev.entities[table]?.[pk] !== next.entities[table]?.[pk];
+  return (
+    prev.entities[table]?.[pk] !== next.entities[table]?.[pk] ||
+    prev.entitiesMeta[table]?.[pk] !== next.entitiesMeta[table]?.[pk]
+  );
 }
 
 /** Collection pks are serialized args: `{"userId":"1"}` → `userId: 1` */
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index c6219b30dd4b..20cde956988a 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -20,9 +20,14 @@ export type ListView =
 /** The list a count chip dives into: one table's rows when they share one */
 export function refsList(items: readonly RefNode[], label: string): ListView {
   const table = items[0].key;
+  // a row lists once however often it is referenced
   return items.every(i => i.key === table) ?
-      { kind: 'list', label, table, pks: items.map(i => i.pk) }
-    : { kind: 'list', label, ids: items.map(i => entityId(i.key, i.pk)) };
+      { kind: 'list', label, table, pks: [...new Set(items.map(i => i.pk))] }
+    : {
+        kind: 'list',
+        label,
+        ids: [...new Set(items.map(i => entityId(i.key, i.pk)))],
+      };
 }
 
 /** A Collection row's members, which its record shows as their own table */
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index 6555f4a882bf..8f8d126cb0d7 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -82,13 +82,16 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
     }
   }
 
-  learn(schema: any) {
+  /** `seen` stops recursive schemas (an Object holding itself) */
+  learn(schema: any, seen = new WeakSet<object>()) {
     if (!schema || (typeof schema !== 'object' && typeof schema !== 'function'))
       return;
+    if (seen.has(schema)) return;
+    seen.add(schema);
     if (isEntityLike(schema)) {
       if (this.entities.get(schema.key) === schema) return;
       this.entities.set(schema.key, schema);
     }
-    forEachChildSchema(schema, child => this.learn(child));
+    forEachChildSchema(schema, child => this.learn(child, seen));
   }
 }

From 8efe4d4e1f8442630047e99a3569d7caa30fa8da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 18:31:46 +0000
Subject: [PATCH 21/28] Store inspector: drop the GC workaround

GC only removes rows nothing uses, so the inspector need not track it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/storeModel.test.ts           | 14 --------------
 .../components/Playground/preview/store/model.ts   |  9 +++------
 .../Playground/preview/store/schemaRegistry.ts     |  5 -----
 3 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index b02e9152cf00..9a8d61aea1db 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -95,20 +95,6 @@ describe('store model', () => {
     });
   });
 
-  it('drops rows garbage collection deleted in place', () => {
-    const registry = registryFor('GET https://example.com/posts', [Post]);
-    const entities = { ...state.entities, User: { ...state.entities.User } };
-    const before = { ...state, entities } as State<unknown>;
-    expect(buildModel(before, registry).table('User')?.rows).toHaveLength(1);
-    // GC mutates the table and keeps its identity
-    delete (entities.User as any)[123];
-    registry.middleware({} as any)((a: any) => a)({
-      type: actionTypes.GC,
-    } as any);
-    const after = { ...before } as State<unknown>;
-    expect(buildModel(after, registry).table('User')?.rows).toHaveLength(0);
-  });
-
   it('keeps id as data when an Entity is keyed by another field', () => {
     class Article extends Entity {
       id = 0;
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 6b961b357001..13958a6a8f34 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -128,18 +128,16 @@ class StoredRow implements EntityRow {
 
 const tableCache = new WeakMap<
   object,
-  { schema: unknown; meta: unknown; gc: number; table: EntityTable }
+  { schema: unknown; meta: unknown; table: EntityTable }
 >();
 function buildTable(
   key: string,
   rows: Record<string, unknown>,
   meta: State<unknown>['entitiesMeta'][string] | undefined,
   schema: unknown,
-  gc: number,
 ): EntityTable {
   const hit = tableCache.get(rows);
-  if (hit && hit.schema === schema && hit.meta === meta && hit.gc === gc)
-    return hit.table;
+  if (hit && hit.schema === schema && hit.meta === meta) return hit.table;
   const pks = Object.keys(rows);
   const kind = tableKind(schema, rows[pks[0]]);
   const fields = new Set<string>();
@@ -168,7 +166,7 @@ function buildTable(
     fields: [...fields],
     get: pk => byPk.get(pk),
   };
-  tableCache.set(rows, { schema, meta, gc, table });
+  tableCache.set(rows, { schema, meta, table });
   return table;
 }
 
@@ -202,7 +200,6 @@ export function buildModel(
         rows,
         state.entitiesMeta[key],
         registry.entities.get(key),
-        registry.gcCount,
       ),
     ]),
   );
diff --git a/website/src/components/Playground/preview/store/schemaRegistry.ts b/website/src/components/Playground/preview/store/schemaRegistry.ts
index 8f8d126cb0d7..312d2ef5721f 100644
--- a/website/src/components/Playground/preview/store/schemaRegistry.ts
+++ b/website/src/components/Playground/preview/store/schemaRegistry.ts
@@ -30,8 +30,6 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
   /** Optimistic updates awaiting their response. The store's own queue is
    * already applied (and so emptied) in the state components can read. */
   optimistic: readonly PendingOptimistic[] = [];
-  /** Bumped by each GC, which deletes rows in place (keeping table identity) */
-  gcCount = 0;
 
   middleware: Middleware<ActionTypes> = () => next => action => {
     switch (action.type) {
@@ -48,9 +46,6 @@ export default class SchemaRegistry implements Manager<ActionTypes> {
       case actionTypes.RESET:
         this.optimistic = [];
         break;
-      case actionTypes.GC:
-        this.gcCount++;
-        break;
       case actionTypes.SET:
         this.learn(action.schema);
         break;

From 3a5f4ad7c6da98619de13ab5bdfff1d2eb7c585e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 18:37:57 +0000
Subject: [PATCH 22/28] Store inspector: simplify recent changes

A record level renders its meta as a level footer, so the CSS needs no
nested flex overrides and list views no footer prop. Cells take where
their count chip dives (nav's cellDive) and build it on click, show-all
state is keyed by its group or section with one reveal loop, and rows
are found by data attribute instead of escaped selectors.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/monaco/preloadManifest.ts      | 34 ++++-----
 .../preview/__tests__/StoreUI.test.tsx        |  4 +-
 .../Playground/preview/store/Details.tsx      | 41 +++++++---
 .../Playground/preview/store/DiveViews.tsx    | 76 +++++++------------
 .../Playground/preview/store/RootView.tsx     |  6 +-
 .../Playground/preview/store/StorePanel.tsx   |  2 +-
 .../Playground/preview/store/StoreUI.tsx      | 38 +++++-----
 .../Playground/preview/store/Table.tsx        | 20 +++--
 .../Playground/preview/store/TreeView.tsx     | 11 ++-
 .../Playground/preview/store/Value.tsx        | 19 ++---
 .../Playground/preview/store/dom.ts           | 24 ++----
 .../Playground/preview/store/model.ts         |  1 -
 .../Playground/preview/store/nav.tsx          | 32 ++++++--
 .../Playground/preview/store/store.module.css | 22 +-----
 14 files changed, 161 insertions(+), 169 deletions(-)

diff --git a/website/src/components/Playground/monaco/preloadManifest.ts b/website/src/components/Playground/monaco/preloadManifest.ts
index 6f7fac8f666a..cf49991b7486 100644
--- a/website/src/components/Playground/monaco/preloadManifest.ts
+++ b/website/src/components/Playground/monaco/preloadManifest.ts
@@ -7,28 +7,28 @@ export const monacoPreloadManifest = {
   preloadPaths: [
     'loader.js',
     'editor/editor.main.js',
-    'json.worker-BizpAl9O.js',
-    'css.worker-CyhWkhHo.js',
-    'html.worker-CA3iAimZ.js',
-    'ts.worker-2QLmBukE.js',
+    'json.worker-Bp7U0-9w.js',
+    'css.worker-BInK4lsP.js',
+    'html.worker-C1TNvQ72.js',
+    'ts.worker-BLYAhMkX.js',
     'nls.messages-loader.js',
-    'index-CBVt3dzv.js',
-    'monaco.contribution-9cKT3C7t.js',
-    'editor-KLE6jdfb.js',
-    'monaco.contribution-BgRy6xDf.js',
-    'monaco.contribution-BE88ZNGY.js',
-    'monaco.contribution-BPhsneLd.js',
-    'toggleHighContrast-qGX7E9o7.js',
+    'index-DZH_zysX.js',
+    'monaco.contribution-C7tY_xnl.js',
+    'editor-BdtEMBbM.js',
+    'monaco.contribution-BuX2NvO2.js',
+    'monaco.contribution-CY2lwFI8.js',
+    'monaco.contribution-D1-wBxcq.js',
+    'toggleHighContrast-DuqAmExZ.js',
     'basic-languages/monaco.contribution.js',
-    'editorWorkerHost-fVE1cjcC.js',
+    'editorWorkerHost-B_VpI68A.js',
   ],
   prefetchPaths: [
-    'assets/editor.worker-lj3bdIIn.js',
-    'assets/ts.worker-BWKtMYOk.js',
-    'tsMode-B0S_kp2q.js',
-    'typescript-_2t_511t.js',
+    'assets/editor.worker-_vAIFJDs.js',
+    'assets/ts.worker-g3pjEjl4.js',
+    'tsMode-DB1GiNun.js',
+    'typescript-BTLNeq8B.js',
   ],
 } as const;
 
 export const MONACO_CDN_VS =
-  'https://cdn.jsdelivr.net/npm/monaco-editor@0.56.0/min/vs';
+  'https://cdn.jsdelivr.net/npm/monaco-editor@0.57.0/min/vs';
diff --git a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
index e0d95f7c660f..1ec36b6ebeb4 100644
--- a/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StoreUI.test.tsx
@@ -54,7 +54,7 @@ describe('StoreUI', () => {
       id: entityId('Late', `${i}`),
     })) as unknown as EntityTable['rows'];
     const m = {
-      endpoints: [],
+      endpoints: [{ id: endpointId('GET /x') }],
       tables: ['A', 'B', 'C'].map(table).concat({ ...table('Late'), rows }),
     } as unknown as StoreModel;
     render(mount(m));
@@ -67,7 +67,7 @@ describe('StoreUI', () => {
       target,
       sectionId('entities'),
       groupId('Late'),
-      showAllId('Late'),
+      showAllId(groupId('Late')),
     ])
       expect(ui.isOpen(id)).toBe(true);
 
diff --git a/website/src/components/Playground/preview/store/Details.tsx b/website/src/components/Playground/preview/store/Details.tsx
index ae8d6f318212..00d6afad872e 100644
--- a/website/src/components/Playground/preview/store/Details.tsx
+++ b/website/src/components/Playground/preview/store/Details.tsx
@@ -65,10 +65,20 @@ export function EndpointDetail({
   /** Meta behind a disclosure (the tree view) instead of always shown */
   collapsedMeta?: boolean;
 }) {
+  return (
+    <div className={styles.detail}>
+      <EndpointBody row={row} />
+      <EndpointMeta row={row} collapsed={collapsedMeta} />
+    </div>
+  );
+}
+
+/** An endpoint's stored value, or what useSuspense() returns for it */
+export function EndpointBody({ row }: { row: EndpointRow }) {
   const [view, setView] = useState<'stored' | 'returns'>('stored');
   const { record } = row;
   return (
-    <div className={styles.detail}>
+    <>
       {record && (
         <Segmented
           label="Show"
@@ -80,14 +90,27 @@ export function EndpointDetail({
       {view === 'returns' && record ?
         <Returns record={record} />
       : <Block node={row.value} />}
-      <MetaBlock collapsed={collapsedMeta} summary={metaSummary(row.meta)}>
-        <Field name="key" node={{ t: 'val', v: row.key }} />
-        {record?.args.length ?
-          <Field name="args" node={plain(record.args)} />
-        : null}
-        <MetaFields meta={row.meta} />
-      </MetaBlock>
-    </div>
+    </>
+  );
+}
+
+/** An endpoint's key, args and fetch meta */
+export function EndpointMeta({
+  row,
+  collapsed,
+}: {
+  row: EndpointRow;
+  collapsed?: boolean;
+}) {
+  const { record } = row;
+  return (
+    <MetaBlock collapsed={collapsed} summary={metaSummary(row.meta)}>
+      <Field name="key" node={{ t: 'val', v: row.key }} />
+      {record?.args.length ?
+        <Field name="args" node={plain(record.args)} />
+      : null}
+      <MetaFields meta={row.meta} />
+    </MetaBlock>
   );
 }
 
diff --git a/website/src/components/Playground/preview/store/DiveViews.tsx b/website/src/components/Playground/preview/store/DiveViews.tsx
index 47da030f580f..fc1553efb78e 100644
--- a/website/src/components/Playground/preview/store/DiveViews.tsx
+++ b/website/src/components/Playground/preview/store/DiveViews.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import { EndpointDetail, EntityDetail, RowMeta } from './Details';
+import { EndpointBody, EndpointMeta, EntityDetail, RowMeta } from './Details';
 import { offsetIn } from './dom';
 import {
   findRow,
@@ -25,6 +25,7 @@ import {
   tableColumns,
   type Column,
 } from './Table';
+import { Block } from './Value';
 
 type Scroller = React.RefObject<HTMLElement | null>;
 type Header = (tools: React.ReactNode) => React.ReactNode;
@@ -40,13 +41,10 @@ export function ListView({
   view,
   scroller,
   header,
-  footer,
 }: {
   view: ListView;
   scroller: Scroller;
   header: Header;
-  /** Shown below the rows, at the bottom of the level */
-  footer?: React.ReactNode;
 }) {
   const { model } = useNav()!;
   if ('table' in view) {
@@ -57,21 +55,13 @@ export function ListView({
           pks={view.pks}
           scroller={scroller}
           header={header}
-          footer={footer}
         />
       : <>
           {header(null)}
           <Gone />
         </>;
   }
-  return (
-    <IdList
-      ids={view.ids}
-      scroller={scroller}
-      header={header}
-      footer={footer}
-    />
-  );
+  return <IdList ids={view.ids} scroller={scroller} header={header} />;
 }
 
 /** Rows of one table: its columns, paged, with `+N` and meta columns */
@@ -80,13 +70,11 @@ function TableList({
   pks,
   scroller,
   header,
-  footer,
 }: {
   table: EntityTable;
   pks: readonly string[] | undefined;
   scroller: Scroller;
   header: Header;
-  footer: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const [page, setPage] = useState(0);
@@ -106,7 +94,6 @@ function TableList({
       record={row => <EntityDetail row={row} model={model} />}
       scroller={scroller}
       header={header}
-      footer={footer}
       tools={<Pager pages={pages} page={page} onChange={setPage} />}
     />
   );
@@ -117,12 +104,10 @@ function IdList({
   ids,
   scroller,
   header,
-  footer,
 }: {
   ids: readonly string[];
   scroller: Scroller;
   header: Header;
-  footer: React.ReactNode;
 }) {
   const { model, width } = useNav()!;
   const rows = useMemo(
@@ -142,7 +127,6 @@ function IdList({
       columns={columns}
       scroller={scroller}
       header={header}
-      footer={footer}
     />
   );
 }
@@ -156,7 +140,6 @@ function FilteredRows<R extends AnyRow>({
   scroller,
   header,
   tools,
-  footer,
 }: {
   rows: readonly R[];
   columns: readonly Column<R>[];
@@ -165,7 +148,6 @@ function FilteredRows<R extends AnyRow>({
   scroller: Scroller;
   header: Header;
   tools?: React.ReactNode;
-  footer?: React.ReactNode;
 }) {
   const { push } = useNav()!;
   const [filter, setFilter] = useState('');
@@ -224,7 +206,6 @@ function FilteredRows<R extends AnyRow>({
           : null
         }
       />
-      {footer}
     </>
   );
 }
@@ -327,8 +308,8 @@ function useWindow(
 }
 
 /** One row with everything about it */
-/** A row's own level: a Collection lists its members as a table, with its
- * own meta above them; any other row shows its record */
+/** A row's own level: its record, or a Collection's members as a table,
+ * with the row's meta at the bottom */
 export function RecordLevel({
   id,
   scroller,
@@ -340,37 +321,34 @@ export function RecordLevel({
 }) {
   const { model } = useNav()!;
   const row = findRow(model, id);
-  const members = row && membersOf(model, row);
-  if (!members || !row || isEndpointRow(row))
+  const members = useMemo(() => row && membersOf(model, row), [model, row]);
+  if (!row)
     return (
       <>
         {header(null)}
-        <RecordView id={id} />
+        <Gone />
       </>
     );
   return (
-    <ListView
-      view={members}
-      scroller={scroller}
-      header={header}
-      footer={
-        <div className={styles.memberMeta}>
-          <RowMeta row={row} model={model} />
-        </div>
+    <>
+      {members ?
+        <ListView view={members} scroller={scroller} header={header} />
+      : <>
+          {header(null)}
+          <div className={styles.record}>
+            <div className={styles.detail}>
+              {isEndpointRow(row) ?
+                <EndpointBody row={row} />
+              : <Block node={row.value} />}
+            </div>
+          </div>
+        </>
       }
-    />
-  );
-}
-
-function RecordView({ id }: { id: string }) {
-  const { model } = useNav()!;
-  const row = findRow(model, id);
-  if (!row) return <Gone />;
-  return (
-    <div className={styles.record}>
-      {isEndpointRow(row) ?
-        <EndpointDetail row={row} />
-      : <EntityDetail row={row} model={model} />}
-    </div>
+      <div className={styles.levelFoot}>
+        {isEndpointRow(row) ?
+          <EndpointMeta row={row} />
+        : <RowMeta row={row} model={model} />}
+      </div>
+    </>
   );
 }
diff --git a/website/src/components/Playground/preview/store/RootView.tsx b/website/src/components/Playground/preview/store/RootView.tsx
index ca5c570ca134..d5b5e0ce303f 100644
--- a/website/src/components/Playground/preview/store/RootView.tsx
+++ b/website/src/components/Playground/preview/store/RootView.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 
 import { TIME_WIDTH } from './columns';
 import { EntityDetail } from './Details';
-import { attrSelector, offsetIn } from './dom';
+import { byData, offsetIn } from './dom';
 import {
   optimisticId,
   splitKey,
@@ -122,9 +122,7 @@ function TableIndex({
           type="button"
           onClick={() => {
             const el = scroller.current;
-            const group = el?.querySelector<HTMLElement>(
-              attrSelector('data-table', table.key),
-            );
+            const group = el && byData(el, 'table', table.key);
             if (el && group)
               el.scrollTo({ top: offsetIn(el, group), behavior: 'smooth' });
           }}
diff --git a/website/src/components/Playground/preview/store/StorePanel.tsx b/website/src/components/Playground/preview/store/StorePanel.tsx
index 7a412e7c41ba..f36d6344ae9e 100644
--- a/website/src/components/Playground/preview/store/StorePanel.tsx
+++ b/website/src/components/Playground/preview/store/StorePanel.tsx
@@ -211,7 +211,7 @@ function Level({
   // until it is uncovered
   const [shown, setShown] = useState(nav);
   if (top && shown !== nav) setShown(nav);
-  const current = top ? nav : shown;
+  const current = shown;
   const content = useMemo(
     () => (
       <NavContext.Provider value={current}>{children(ref)}</NavContext.Provider>
diff --git a/website/src/components/Playground/preview/store/StoreUI.tsx b/website/src/components/Playground/preview/store/StoreUI.tsx
index 77b2c7eef416..66c12004ff7c 100644
--- a/website/src/components/Playground/preview/store/StoreUI.tsx
+++ b/website/src/components/Playground/preview/store/StoreUI.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import { isEndpointId, nodeId, type StoreModel } from './model';
+import { nodeId, type StoreModel } from './model';
 
 /** Rows shown per table before "Show all" */
 export const ROW_LIMIT = 8;
@@ -28,8 +28,8 @@ const StoreUIContext = createContext<StoreUIValue>({
 export const useStoreUI = () => useContext(StoreUIContext);
 
 export const groupId = (key: string) => nodeId('g', key);
-export const showAllId = (key: string) => nodeId('a', key);
-export const showAllEndpointsId = nodeId('A');
+/** "Show all" past ROW_LIMIT in the group or section `container` */
+export const showAllId = (container: string) => nodeId('a', container);
 export const sectionId = (name: string) => nodeId('s', name);
 
 /** Sections (but Internals) and the first few Entity types to appear start
@@ -59,12 +59,12 @@ export function StoreUIProvider({
   const [groupDefaults, setGroupDefaults] = useState<
     ReadonlyMap<string, boolean>
   >(new Map());
-  if (model.tables.some(table => !groupDefaults.has(groupId(table.key)))) {
+  const newGroups = model.tables
+    .map(table => groupId(table.key))
+    .filter(id => !groupDefaults.has(id));
+  if (newGroups.length) {
     const next = new Map(groupDefaults);
-    for (const table of model.tables) {
-      const id = groupId(table.key);
-      if (!next.has(id)) next.set(id, next.size < OPEN_GROUPS);
-    }
+    for (const id of newGroups) next.set(id, next.size < OPEN_GROUPS);
     setGroupDefaults(next);
   }
 
@@ -90,16 +90,20 @@ export function StoreUIProvider({
   const reveal = useCallback(
     (id: string) => {
       const ancestors = [id];
-      if (isEndpointId(id)) {
-        ancestors.push(sectionId('endpoints'));
-        if (model.endpoints.findIndex(row => row.id === id) >= ROW_LIMIT)
-          ancestors.push(showAllEndpointsId);
-      }
-      for (const table of model.tables) {
-        const index = table.rows.findIndex(row => row.id === id);
+      // the containers a row can sit in, each opened along with what holds it
+      const containers = [
+        { path: [sectionId('endpoints')], rows: model.endpoints },
+        ...model.tables.map(table => ({
+          path: [sectionId('entities'), groupId(table.key)],
+          rows: table.rows,
+        })),
+      ];
+      for (const { path, rows } of containers) {
+        const index = rows.findIndex(row => row.id === id);
         if (index < 0) continue;
-        ancestors.push(sectionId('entities'), groupId(table.key));
-        if (index >= ROW_LIMIT) ancestors.push(showAllId(table.key));
+        ancestors.push(...path);
+        if (index >= ROW_LIMIT)
+          ancestors.push(showAllId(path[path.length - 1]));
       }
       setOpen(ancestors, true);
       setSelected(id);
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 4d08a5c1f560..514f7f87b165 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -13,12 +13,12 @@ import { Status } from './Details';
 import {
   errorText,
   prettyPk,
-  rowLabel,
   type AnyRow,
   type EndpointRow,
   type EntityRow,
   type EntityTable,
 } from './model';
+import { cellDive } from './nav';
 import type { VNode } from './refs';
 import styles from './store.module.css';
 import { Cell, EndpointKey, Inline, Primitive, RowChip } from './Value';
@@ -263,14 +263,7 @@ function dataSpecs(
             node={row.value}
             name={name}
             width={w}
-            owner={rowLabel(row)}
-            // a Collection holds nothing but its members, so its own record
-            // (their table, with its meta) is the list to dive into
-            dive={
-              table.kind === 'collection' ?
-                { kind: 'record', id: row.id }
-              : undefined
-            }
+            dive={cellDive(table, row, name)}
           />
         ),
         has: () => true,
@@ -287,7 +280,12 @@ function dataSpecs(
         const node = value(row);
         return (
           node && (
-            <Cell node={node} name={name} width={w} owner={rowLabel(row)} />
+            <Cell
+              node={node}
+              name={name}
+              width={w}
+              dive={cellDive(table, row, name)}
+            />
           )
         );
       },
@@ -390,7 +388,7 @@ export function endpointColumns(width: number): Column<EndpointRow>[] {
             node={row.value}
             name="value"
             width={width - keyWidth - STATUS_WIDTH}
-            owner={rowLabel(row)}
+            dive={cellDive(undefined, row, 'value')}
           />,
     },
   ];
diff --git a/website/src/components/Playground/preview/store/TreeView.tsx b/website/src/components/Playground/preview/store/TreeView.tsx
index 7990efa48d26..0c4f6256a6b6 100644
--- a/website/src/components/Playground/preview/store/TreeView.tsx
+++ b/website/src/components/Playground/preview/store/TreeView.tsx
@@ -18,7 +18,6 @@ import {
   groupId,
   ROW_LIMIT,
   sectionId,
-  showAllEndpointsId,
   showAllId,
   useStoreUI,
 } from './StoreUI';
@@ -113,7 +112,10 @@ function useRowProps(id: string, className?: string) {
 }
 
 function EndpointTreeRows({ rows }: { rows: readonly EndpointRow[] }) {
-  const { shown, footer } = useLimitedRows(showAllEndpointsId, rows);
+  const { shown, footer } = useLimitedRows(
+    showAllId(sectionId('endpoints')),
+    rows,
+  );
   return (
     <>
       {shown.map(row => (
@@ -226,7 +228,10 @@ function EntityTreeGroup({
   model: StoreModel;
 }) {
   const { open, props } = useRowProps(groupId(table.key));
-  const { shown, footer } = useLimitedRows(showAllId(table.key), table.rows);
+  const { shown, footer } = useLimitedRows(
+    showAllId(groupId(table.key)),
+    table.rows,
+  );
   return (
     <>
       <div {...props}>
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index a3647c01c7a1..a3dd93f8f9cb 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { fitChips, INLINE_LIMIT, isTimeField } from './columns';
 import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
 import { refsList, useNav, type ListView, type View } from './nav';
-import { CIRCULAR, isRefList, type VNode } from './refs';
+import { CIRCULAR, isRefList, type RefNode, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
@@ -88,7 +88,7 @@ export function CountChip({
   list,
   children,
 }: {
-  list: View;
+  list: () => View;
   children: React.ReactNode;
 }) {
   const nav = useNav();
@@ -98,7 +98,7 @@ export function CountChip({
       className={clsx(styles.ref, styles.countRef)}
       onClick={e => {
         e.stopPropagation();
-        nav?.push(list);
+        nav?.push(list());
       }}
     >
       {children}
@@ -119,9 +119,7 @@ export function RefList({
   return (
     <span className={styles.wrapList}>
       {cut ? chips.slice(0, RECORD_REFS) : chips}
-      {cut && (
-        <CountChip list={list()}>+{chips.length - RECORD_REFS}</CountChip>
-      )}
+      {cut && <CountChip list={list}>+{chips.length - RECORD_REFS}</CountChip>}
     </span>
   );
 }
@@ -132,21 +130,18 @@ export function Cell({
   node,
   name,
   width,
-  owner,
   dive,
 }: {
   node: VNode;
   name: string;
   width: number;
-  /** Row label, for the breadcrumb of a list it dives into */
-  owner: string;
-  /** Where the count chip goes instead of a list of just these refs */
-  dive?: View;
+  /** Where the count chip goes (nav's `cellDive`) */
+  dive: (items: readonly RefNode[]) => View;
 }) {
   if (!isRefList(node)) return <Inline node={node} name={name} />;
   const { items } = node;
   const fit = fitChips(items, width);
-  const list = dive ?? refsList(items, `${owner} ${name}`);
+  const list = () => dive(items);
   if (!fit)
     return (
       <CountChip list={list}>
diff --git a/website/src/components/Playground/preview/store/dom.ts b/website/src/components/Playground/preview/store/dom.ts
index 8718184807ff..9c97d3bbdcc3 100644
--- a/website/src/components/Playground/preview/store/dom.ts
+++ b/website/src/components/Playground/preview/store/dom.ts
@@ -4,22 +4,12 @@ import { prefersReducedMotion, springEasing, springs } from '../../../motion';
  * header (`.sectionHeader` in store.module.css) */
 const HEADER_HEIGHT = 32;
 
-/** `[name="value"]`; CSS.escape where the browser has it (jsdom doesn't) */
-export const attrSelector = (name: string, value: string) =>
-  `[${name}="${
-    typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ?
-      CSS.escape(value)
-      // row ids hold the U+001F separator, which CSS needs as a hex escape
-      // eslint-disable-next-line no-control-regex
-    : value.replace(/["\\]|[\0-\x1f\x7f]/g, c =>
-        c === '"' || c === '\\' ?
-          `\\${c}`
-        : `\\${c.charCodeAt(0).toString(16)} `,
-      )
-  }"]`;
-
-/** The element showing row (or other node) `id` */
-export const rowSelector = (id: string) => attrSelector('data-id', id);
+/** The element in `scope` whose `data-<key>` is `value`; compares the
+ * attribute, so ids need no selector escaping */
+export const byData = (scope: ParentNode, key: 'id' | 'table', value: string) =>
+  [...scope.querySelectorAll<HTMLElement>(`[data-${key}]`)].find(
+    el => el.dataset[key] === value,
+  );
 
 /** Where `el` sits in `scroller`'s scrolled content, in px */
 export const offsetIn = (scroller: HTMLElement, el: Element) =>
@@ -58,7 +48,7 @@ export function flash(scope: HTMLElement, test: (id: string) => boolean) {
 
 /** Scrolls row `id` into view below the section header and focuses it */
 export function scrollToRow(scroller: HTMLElement, id: string) {
-  const row = scroller.querySelector<HTMLElement>(rowSelector(id));
+  const row = byData(scroller, 'id', id);
   if (!row) return;
   scroller.scrollTo({
     top: Math.max(0, offsetIn(scroller, row) - HEADER_HEIGHT),
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 13958a6a8f34..3ca342041eaf 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -17,7 +17,6 @@ export const nodeId = (kind: string, ...parts: readonly string[]) =>
 
 /** Row ids shared by both views, selection and flashes */
 export const endpointId = (key: string) => nodeId('e', key);
-export const isEndpointId = (id: string) => id.startsWith(`e${SEP}`);
 export const entityId = (key: string, pk: string) => nodeId('n', key, pk);
 /** Stable while other optimistic updates settle around it */
 export const optimisticId = (o: PendingOptimistic) =>
diff --git a/website/src/components/Playground/preview/store/nav.tsx b/website/src/components/Playground/preview/store/nav.tsx
index 20cde956988a..02ff4a2ee1c2 100644
--- a/website/src/components/Playground/preview/store/nav.tsx
+++ b/website/src/components/Playground/preview/store/nav.tsx
@@ -1,6 +1,13 @@
 import { createContext, useContext } from 'react';
 
-import { entityId, isEndpointRow, type AnyRow, type StoreModel } from './model';
+import {
+  entityId,
+  isEndpointRow,
+  rowLabel,
+  type AnyRow,
+  type EntityTable,
+  type StoreModel,
+} from './model';
 import { memberRefs, type RefNode } from './refs';
 
 /** Rows of one table (all, or just `pks`), or rows of any kind by id */
@@ -20,14 +27,14 @@ export type ListView =
 /** The list a count chip dives into: one table's rows when they share one */
 export function refsList(items: readonly RefNode[], label: string): ListView {
   const table = items[0].key;
+  const same = items.every(i => i.key === table);
   // a row lists once however often it is referenced
-  return items.every(i => i.key === table) ?
-      { kind: 'list', label, table, pks: [...new Set(items.map(i => i.pk))] }
-    : {
-        kind: 'list',
-        label,
-        ids: [...new Set(items.map(i => entityId(i.key, i.pk)))],
-      };
+  const keys = [
+    ...new Set(items.map(i => (same ? i.pk : entityId(i.key, i.pk)))),
+  ];
+  return same ?
+      { kind: 'list', label, table, pks: keys }
+    : { kind: 'list', label, ids: keys };
 }
 
 /** A Collection row's members, which its record shows as their own table */
@@ -44,6 +51,15 @@ export function membersOf(
   return 'table' in list && !model.table(list.table) ? undefined : list;
 }
 
+/** Where a cell's count chip dives: a Collection row's own record (it holds
+ * nothing but its members), otherwise a list of just the cell's refs */
+export const cellDive =
+  (table: EntityTable | undefined, row: AnyRow, name: string) =>
+  (items: readonly RefNode[]): View =>
+    table?.kind === 'collection' ?
+      { kind: 'record', id: row.id }
+    : refsList(items, `${rowLabel(row)} ${name}`);
+
 /** One level of the table view's navigation stack */
 export type View =
   | { readonly kind: 'root' }
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index f0fa9412b6f1..cc7dcb2b85c1 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -782,26 +782,12 @@ div.row {
   padding: 0.5rem 0.75rem 0.6rem;
 }
 
-/* a record level fills the panel, and its meta (or a Collection's, below its
-   member table) sits at the bottom */
-.level > .record {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-}
-.record > .detail {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-}
-.record > .detail > .fields {
-  flex-basis: auto;
-}
-.record > .detail > .metaList,
-.memberMeta {
+/* a record level's meta (or a Collection's, below its member table) sits
+   at the bottom */
+.levelFoot {
   margin-top: auto;
 }
-.memberMeta > .metaList {
+.levelFoot > .metaList {
   margin: 0;
   padding: 0.4rem 0.75rem 0.5rem;
 }

From a8bf77521ffe909cba244c7508c55881dd8330ba Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 18:38:19 +0000
Subject: [PATCH 23/28] Restore the Monaco preload manifest the dev server
 regenerated

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/monaco/preloadManifest.ts      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/website/src/components/Playground/monaco/preloadManifest.ts b/website/src/components/Playground/monaco/preloadManifest.ts
index cf49991b7486..6f7fac8f666a 100644
--- a/website/src/components/Playground/monaco/preloadManifest.ts
+++ b/website/src/components/Playground/monaco/preloadManifest.ts
@@ -7,28 +7,28 @@ export const monacoPreloadManifest = {
   preloadPaths: [
     'loader.js',
     'editor/editor.main.js',
-    'json.worker-Bp7U0-9w.js',
-    'css.worker-BInK4lsP.js',
-    'html.worker-C1TNvQ72.js',
-    'ts.worker-BLYAhMkX.js',
+    'json.worker-BizpAl9O.js',
+    'css.worker-CyhWkhHo.js',
+    'html.worker-CA3iAimZ.js',
+    'ts.worker-2QLmBukE.js',
     'nls.messages-loader.js',
-    'index-DZH_zysX.js',
-    'monaco.contribution-C7tY_xnl.js',
-    'editor-BdtEMBbM.js',
-    'monaco.contribution-BuX2NvO2.js',
-    'monaco.contribution-CY2lwFI8.js',
-    'monaco.contribution-D1-wBxcq.js',
-    'toggleHighContrast-DuqAmExZ.js',
+    'index-CBVt3dzv.js',
+    'monaco.contribution-9cKT3C7t.js',
+    'editor-KLE6jdfb.js',
+    'monaco.contribution-BgRy6xDf.js',
+    'monaco.contribution-BE88ZNGY.js',
+    'monaco.contribution-BPhsneLd.js',
+    'toggleHighContrast-qGX7E9o7.js',
     'basic-languages/monaco.contribution.js',
-    'editorWorkerHost-B_VpI68A.js',
+    'editorWorkerHost-fVE1cjcC.js',
   ],
   prefetchPaths: [
-    'assets/editor.worker-_vAIFJDs.js',
-    'assets/ts.worker-g3pjEjl4.js',
-    'tsMode-DB1GiNun.js',
-    'typescript-BTLNeq8B.js',
+    'assets/editor.worker-lj3bdIIn.js',
+    'assets/ts.worker-BWKtMYOk.js',
+    'tsMode-B0S_kp2q.js',
+    'typescript-_2t_511t.js',
   ],
 } as const;
 
 export const MONACO_CDN_VS =
-  'https://cdn.jsdelivr.net/npm/monaco-editor@0.57.0/min/vs';
+  'https://cdn.jsdelivr.net/npm/monaco-editor@0.56.0/min/vs';

From a4ee9ac9cb09b2339638277e6e11fdd8cdaa9c30 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 18:48:19 +0000
Subject: [PATCH 24/28] Keep the Store as it was left when reopened; show
 Collection adders' members

Reveal hides its content with <Activity> once its exit settles instead of
unmounting it, and the playground keeps its StorePanel after first open, so
closing and reopening the Store keeps the level stack, filters, open rows and
scroll. MotionGroup unpins a presence that is shown again.

Collection.push, unshift, remove, move, assign and addWith store what their
members normalize to, so their endpoints now resolve through the members
instead of showing raw pks. A deleted row no longer makes id show as a field.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/preview/StoreInspector.tsx     |  9 ++-
 .../preview/__tests__/storeModel.test.ts      | 39 ++++++++++++
 .../Playground/preview/store/model.ts         | 10 +++-
 .../Playground/preview/store/refs.ts          |  9 +++
 website/src/components/motion/MotionGroup.tsx | 10 ++--
 website/src/components/motion/README.md       |  2 +-
 website/src/components/motion/Reveal.tsx      | 40 +++++++++----
 .../motion/__tests__/MotionGroup.test.tsx     | 59 +++++++++++++++----
 8 files changed, 145 insertions(+), 33 deletions(-)

diff --git a/website/src/components/Playground/preview/StoreInspector.tsx b/website/src/components/Playground/preview/StoreInspector.tsx
index fb0e1aa6c754..e0531cddec90 100644
--- a/website/src/components/Playground/preview/StoreInspector.tsx
+++ b/website/src/components/Playground/preview/StoreInspector.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useDeferredValue, memo } from 'react';
+import React, { useDeferredValue, useState, memo } from 'react';
 
 import { Reveal, useLayoutMotion } from '../../motion';
 import styles from '../styles.module.css';
@@ -16,8 +16,11 @@ function StoreInspector({
   registry: SchemaRegistry;
 }) {
   const isSelected = selectedValue === 'y';
-  // the empty drawer starts moving at once; the tree renders a frame later
-  const showTree = useDeferredValue(isSelected);
+  // the empty drawer starts moving at once; the tree renders a frame later,
+  // then stays, so reopening finds the Store as it was left
+  const ready = useDeferredValue(isSelected);
+  const [showTree, setShowTree] = useState(false);
+  if (ready && !showTree) setShowTree(true);
   return (
     <>
       <StoreToggle onClick={toggle} open={isSelected} />
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index 9a8d61aea1db..ab8ffa0aa672 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -95,6 +95,45 @@ describe('store model', () => {
     });
   });
 
+  it('resolves what Collection adders store to the members they change', () => {
+    const comments = Post.schema.comments;
+    const refs = { t: 'arr', items: [{ t: 'ref', key: 'Comment', pk: '249' }] };
+    for (const adder of [
+      comments.push,
+      comments.unshift,
+      comments.remove,
+      comments.move,
+      comments.addWith(() => true),
+    ])
+      expect(resolve(['249'], adder)).toEqual(refs);
+    const byId = new Collection(new schema.Values(Comment));
+    for (const adder of [byId.assign, byId.remove])
+      expect(resolve({ a: '249' }, adder)).toEqual({
+        t: 'obj',
+        entries: [['a', { t: 'ref', key: 'Comment', pk: '249' }]],
+      });
+    expect(resolve('{"postId":"1"}', comments)).toEqual({
+      t: 'ref',
+      key: '[Comment]',
+      pk: '{"postId":"1"}',
+    });
+  });
+
+  it('still drops the id field when a row was deleted', () => {
+    const registry = registryFor('k', [User]);
+    const model = buildModel(
+      {
+        ...state,
+        entities: {
+          User: { ...state.entities.User, 9: Symbol('INVALID') },
+        },
+      } as unknown as State<unknown>,
+      registry,
+    );
+    expect(model.table('User')?.pkField).toBe('id');
+    expect(model.table('User')?.fields).toEqual(['name']);
+  });
+
   it('keeps id as data when an Entity is keyed by another field', () => {
     class Article extends Entity {
       id = 0;
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 3ca342041eaf..944d4449a527 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -144,7 +144,15 @@ function buildTable(
   const pkField =
     (
       kind === 'entity' &&
-      sample.every(pk => String((rows[pk] as any)?.[PK_FIELD]) === pk)
+      // deleted rows store a marker instead of an object
+      sample.every(pk => {
+        const raw = rows[pk];
+        return (
+          !raw ||
+          typeof raw !== 'object' ||
+          String((raw as any)[PK_FIELD]) === pk
+        );
+      })
     ) ?
       PK_FIELD
     : undefined;
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index f4132c0cc5a5..348849ff84b6 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -25,6 +25,12 @@ function isPlainObject(value: any): value is Record<string, unknown> {
   return proto === Object.prototype || proto === null;
 }
 
+/** `push`, `unshift`, `remove`, `assign`, `move`: made with Object.create from
+ * their Collection */
+const isCollectionAdder = (schema: any) =>
+  schema instanceof s.Collection &&
+  Object.getPrototypeOf(schema) instanceof s.Collection;
+
 function isPolymorphic(schema: any) {
   return (
     schema instanceof s.Array ||
@@ -55,6 +61,9 @@ export function resolve(value: unknown, schema: any): VNode {
     return typeof value === 'string' ?
         { t: 'ref', key: schema.key, pk: value }
       : plain(value);
+  // Collection.push and friends store what their members normalize to (the
+  // new pks); only the Collection itself is stored by its own pk
+  if (isCollectionAdder(schema)) return resolve(value, schema.schema);
   if (isEntityLike(schema))
     return typeof value === 'string' || typeof value === 'number' ?
         { t: 'ref', key: schema.key, pk: `${value}` }
diff --git a/website/src/components/motion/MotionGroup.tsx b/website/src/components/motion/MotionGroup.tsx
index c4f622eded0c..cf84cbb616a7 100644
--- a/website/src/components/motion/MotionGroup.tsx
+++ b/website/src/components/motion/MotionGroup.tsx
@@ -15,7 +15,7 @@ import { springs } from './tokens';
 
 /** How a member enters and leaves; absent for members that only move */
 interface Presence {
-  /** Leaving: slides out past the end of its container; its owner unmounts it */
+  /** Leaving: slides out past the end of its container; its owner hides it */
   exiting: boolean;
 }
 type Members = Map<HTMLElement, RefObject<Presence | undefined>>;
@@ -100,10 +100,12 @@ export default class MotionGroup extends Component<Props> {
       return;
     }
     const { spring = springs.smooth } = this.props;
-    // settle the final layout before measuring anything
-    for (const [el, { box }] of snapshots) {
+    // settle the final layout before measuring anything; a presence shown
+    // again (it was hidden, not unmounted) rejoins the layout
+    for (const [el, { current }] of this.members) {
       stop(el);
-      if (this.members.get(el)?.current?.exiting) pin(el, box);
+      const before = snapshots.get(el);
+      if (before && current?.exiting) pin(el, before.box);
       else unpin(el);
     }
     // measure everything, then start animations (one style recalc)
diff --git a/website/src/components/motion/README.md b/website/src/components/motion/README.md
index 48f2256d5725..69259df57163 100644
--- a/website/src/components/motion/README.md
+++ b/website/src/components/motion/README.md
@@ -86,7 +86,7 @@ css.ts            global CSS (springs as custom properties, Reveal's box),
                   injected into every page by a plugin in docusaurus.config.ts
 glide.ts          runs and retargets one element's translate (Web Animations)
 MotionGroup.tsx   measures before/after a commit; drives members; useLayoutMotion
-Reveal.tsx        presence: mount, slide in, slide out, unmount
+Reveal.tsx        presence: mount, slide in, slide out, hide (state kept)
 ```
 
 Tests: `yarn test --selectProjects ReactDOM --testPathPatterns website/src/components/motion`
diff --git a/website/src/components/motion/Reveal.tsx b/website/src/components/motion/Reveal.tsx
index 4d0d0a5df70c..984d5bed66ae 100644
--- a/website/src/components/motion/Reveal.tsx
+++ b/website/src/components/motion/Reveal.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  Activity,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { settled } from './glide';
 import { useMember, useWillGlide } from './MotionGroup';
@@ -6,9 +12,10 @@ import { useMember, useWillGlide } from './MotionGroup';
 /**
  * Shows `children` while `show`, sliding in from and back out past the end of
  * its flex container (so it follows the layout: sideways in a row, up from
- * the bottom when stacked). Stays mounted until its exit finishes, so
+ * the bottom when stacked). Once its exit finishes it is hidden (an
+ * `<Activity>`), not unmounted, so reopening finds its state as it was left;
  * reopening mid-exit just turns it around. The motion comes from the nearest
- * `<MotionGroup>`; without one it just mounts and unmounts.
+ * `<MotionGroup>`; without one it just shows and hides.
  *
  * It slides over its siblings; clip it with `overflow: hidden` on an ancestor.
  */
@@ -22,8 +29,13 @@ export default function Reveal({
   className?: string;
   children: React.ReactNode;
 }) {
+  const [visible, setVisible] = useState(show);
+  // renders nothing until first shown
   const [mounted, setMounted] = useState(show);
-  if (show && !mounted) setMounted(true);
+  if (show && !visible) {
+    setVisible(true);
+    setMounted(true);
+  }
   // keep showing what it had while it slides out
   const shown = useRef(children);
   if (show) shown.current = children;
@@ -37,30 +49,32 @@ export default function Reveal({
     },
     [memberRef],
   );
-  // leaves once it comes to rest: at once (before it paints in flow) if
+  // hides once it comes to rest: at once (before it paints in flow) if
   // nothing will slide it out, else after the group's glide settles
   useLayoutEffect(() => {
     const node = el.current;
     if (show || !node) return;
     if (!willGlide(node)) {
-      setMounted(false);
+      setVisible(false);
       return;
     }
     let reopened = false;
     // the group starts its glide later in this commit
     queueMicrotask(() =>
-      settled(node).then(() => reopened || setMounted(false)),
+      settled(node).then(() => reopened || setVisible(false)),
     );
     return () => {
       reopened = true;
     };
   }, [show, willGlide]);
   return mounted ?
-      <div
-        ref={ref}
-        className={className ? `motion-reveal ${className}` : 'motion-reveal'}
-      >
-        {shown.current}
-      </div>
+      <Activity mode={visible ? 'visible' : 'hidden'}>
+        <div
+          ref={ref}
+          className={className ? `motion-reveal ${className}` : 'motion-reveal'}
+        >
+          {shown.current}
+        </div>
+      </Activity>
     : null;
 }
diff --git a/website/src/components/motion/__tests__/MotionGroup.test.tsx b/website/src/components/motion/__tests__/MotionGroup.test.tsx
index 7ab27acc836c..dde2b97b2633 100644
--- a/website/src/components/motion/__tests__/MotionGroup.test.tsx
+++ b/website/src/components/motion/__tests__/MotionGroup.test.tsx
@@ -101,7 +101,7 @@ it('keeps an exiting element, with its last content, until it slides out', async
   expect(screen.getByText('first')).toBeTruthy();
 
   await act(async () => exit?.animation.finish?.());
-  expect(screen.queryByText('first')).toBeNull();
+  expectHidden('first');
 });
 
 it('turns around mid-exit instead of remounting', () => {
@@ -125,20 +125,20 @@ it('lands in place when the user prefers reduced motion', () => {
   const { rerender } = render(<Drawer open />);
   rerender(<Drawer open={false} />);
   expect(animations).toEqual([]);
-  expect(screen.queryByText('panel')).toBeNull();
+  expectHidden('panel');
 });
 
-it('leaves at once when no group slides it out', () => {
+it('hides at once when no group slides it out', () => {
   const { rerender } = render(<Reveal show>alone</Reveal>);
   rerender(<Reveal show={false}>alone</Reveal>);
-  expect(screen.queryByText('alone')).toBeNull();
+  expectHidden('alone');
 });
 
-it('leaves on its own when the group ignores the change', async () => {
+it('hides on its own when the group ignores the change', async () => {
   const { rerender } = render(<OpensOnly open opened={0} />);
   rerender(<OpensOnly open={false} opened={0} />);
   await settledReveals();
-  expect(screen.queryByText('panel')).toBeNull();
+  expectHidden('panel');
 });
 
 it('reverses with the momentum it had mid-flight', () => {
@@ -178,7 +178,7 @@ it('lands in place without Web Animations', () => {
   delete (HTMLElement.prototype as any).animate;
   const { rerender } = render(<Drawer open />);
   rerender(<Drawer open={false} />);
-  expect(screen.queryByText('panel')).toBeNull();
+  expectHidden('panel');
 });
 
 it('does not slide in members that only move', () => {
@@ -246,7 +246,7 @@ it('stops glides in flight when reduced motion turns on', () => {
   expect(enter?.animation.cancel).toHaveBeenCalled();
 });
 
-it('leaves once its entrance settles when the group ignores the close', async () => {
+it('hides once its entrance settles when the group ignores the close', async () => {
   const { rerender } = render(<OpensOnly open={false} opened={0} />);
   rerender(<OpensOnly open opened={1} />);
   const enter = animations.find(({ el }) => el === screen.getByText('panel'));
@@ -254,7 +254,7 @@ it('leaves once its entrance settles when the group ignores the close', async ()
   await settledReveals();
   expect(screen.getByText('panel')).toBeTruthy();
   await act(async () => enter?.animation.finish?.());
-  expect(screen.queryByText('panel')).toBeNull();
+  expectHidden('panel');
 });
 
 it('stays when reopened before a settling glide finishes', async () => {
@@ -268,7 +268,7 @@ it('stays when reopened before a settling glide finishes', async () => {
   expect(screen.getByText('panel')).toBeTruthy();
 });
 
-it('leaves once the glide that retargets its exit settles', async () => {
+it('hides once the glide that retargets its exit settles', async () => {
   function Steps({ step }: { step: number }) {
     return (
       <MotionGroup layoutDependency={step}>
@@ -283,7 +283,7 @@ it('leaves once the glide that retargets its exit settles', async () => {
   await settledReveals();
   expect(screen.getByText('panel')).toBeTruthy();
   await act(async () => animations.at(-1)?.animation.finish?.());
-  expect(screen.queryByText('panel')).toBeNull();
+  expectHidden('panel');
 });
 
 it('rejoins the layout when reopened mid-exit under reduced motion', () => {
@@ -295,3 +295,40 @@ it('rejoins the layout when reopened mid-exit under reduced motion', () => {
   rerender(<Drawer open />);
   expect(panel.style.position).toBe('');
 });
+
+it('keeps its state while hidden and slides back in when reopened', async () => {
+  function Counter() {
+    const [n, setN] = React.useState(0);
+    return <button onClick={() => setN(n + 1)}>{`count ${n}`}</button>;
+  }
+  function Toggle({ open }: { open: boolean }) {
+    return (
+      <MotionGroup layoutDependency={open}>
+        <Reveal show={open}>
+          <Counter />
+        </Reveal>
+      </MotionGroup>
+    );
+  }
+  const { rerender } = render(<Toggle open />);
+  act(() => screen.getByText('count 0').click());
+  rerender(<Toggle open={false} />);
+  await act(async () => animations.at(-1)?.animation.finish?.());
+  expectHidden('count 1');
+  rerender(<Toggle open />);
+  const panel = screen.getByText('count 1').parentElement!;
+  expect(panel.style.display).toBe('');
+  expect(panel.style.position).toBe('');
+  expect(animations.at(-1)?.el).toBe(panel);
+  expect(animations.at(-1)?.keyframes[0].translate).toBe(
+    `${PARENT_WIDTH}px 0px`,
+  );
+});
+
+/** Hidden by its `<Reveal>` (kept mounted, so its state survives) */
+function expectHidden(text: string) {
+  expect(screen.getByText(text).closest('.motion-reveal')).toHaveProperty(
+    'style.display',
+    'none',
+  );
+}

From 0438aa24c118ebf2af77ae1a1bcbc070c5780d31 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 18:51:12 +0000
Subject: [PATCH 25/28] Tell Collection adders from subclassed Collections by
 their own key

A subclassed Collection's prototype is itself a Collection, so it was read
as an adder and its pk shown raw. Constructed Collections set key on
themselves; adders made with Object.create inherit it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/preview/__tests__/storeModel.test.ts | 13 ++++++++-----
 .../src/components/Playground/preview/store/refs.ts |  6 +++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index ab8ffa0aa672..b086abd42093 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -112,11 +112,14 @@ describe('store model', () => {
         t: 'obj',
         entries: [['a', { t: 'ref', key: 'Comment', pk: '249' }]],
       });
-    expect(resolve('{"postId":"1"}', comments)).toEqual({
-      t: 'ref',
-      key: '[Comment]',
-      pk: '{"postId":"1"}',
-    });
+    // subclassed Collections are still stored by their own pk
+    class MyCollection extends Collection<any> {}
+    for (const collection of [comments, new MyCollection([Comment])])
+      expect(resolve('{"postId":"1"}', collection)).toEqual({
+        t: 'ref',
+        key: '[Comment]',
+        pk: '{"postId":"1"}',
+      });
   });
 
   it('still drops the id field when a row was deleted', () => {
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 348849ff84b6..2738ab31d79f 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -26,10 +26,10 @@ function isPlainObject(value: any): value is Record<string, unknown> {
 }
 
 /** `push`, `unshift`, `remove`, `assign`, `move`: made with Object.create from
- * their Collection */
+ * their Collection, so they inherit the `key` a constructed one (subclassed
+ * or not) sets on itself */
 const isCollectionAdder = (schema: any) =>
-  schema instanceof s.Collection &&
-  Object.getPrototypeOf(schema) instanceof s.Collection;
+  schema instanceof s.Collection && !Object.hasOwn(schema, 'key');
 
 function isPolymorphic(schema: any) {
   return (

From 24e694238f9c56f00b6ddf40b14f3d1b79f27b8d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 19:36:19 +0000
Subject: [PATCH 26/28] Show a lone ref chip in narrow cells and mark deleted
 rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A list holding one ref fell back to a gray "Todo · 1" count chip when its
chip was wider than the cell; it now shows the chip, truncated. Rows a
schema.Invalidate removed (stored as the INVALID symbol) showed as empty
columns; they now say "deleted" in the table, tree and record views.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     | 38 ++++++++++++++++++-
 .../preview/__tests__/storeModel.test.ts      | 10 +++--
 .../Playground/preview/store/Table.tsx        |  9 ++++-
 .../Playground/preview/store/Value.tsx        |  7 +++-
 .../Playground/preview/store/model.ts         |  6 ++-
 .../Playground/preview/store/refs.ts          |  5 +++
 .../Playground/preview/store/store.module.css |  5 +++
 7 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index ebbf062069cc..8c8e9fceb962 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -4,7 +4,8 @@ import { StateContext, type State } from '@data-client/react';
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import React from 'react';
 
-import { parseRowId } from '../store/model';
+import { byData } from '../store/dom';
+import { endpointId, parseRowId } from '../store/model';
 import SchemaRegistry from '../store/schemaRegistry';
 import StorePanel from '../store/StorePanel';
 
@@ -121,6 +122,41 @@ describe('StorePanel table view', () => {
     expect(screen.getByText('404 Not Found')).toBeTruthy();
   });
 
+  it('marks deleted rows and shows a lone ref however long its pk', () => {
+    const long = '38200029883820002988382000298838200029883820002988';
+    const r = registry();
+    r.endpoints.set('POST https://example.com/users', {
+      endpoint: { schema: [User] },
+      args: [],
+    });
+    mount(
+      {
+        ...state,
+        endpoints: {
+          ...state.endpoints,
+          'POST https://example.com/users': [long],
+        },
+        entities: {
+          ...state.entities,
+          User: {
+            ...state.entities.User,
+            2: Symbol('INVALID'),
+            [long]: { id: long, name: 'Al' },
+          },
+        },
+      } as unknown as State<unknown>,
+      r,
+    );
+    const users = within(top().querySelector('[data-table=User]')!);
+    expect(users.getByText('deleted')).toBeTruthy();
+    const endpoint = byData(
+      top(),
+      'id',
+      endpointId('POST https://example.com/users'),
+    );
+    expect(endpoint?.textContent).toContain(long);
+  });
+
   it('dives into a record and back', () => {
     mount();
     fireEvent.click(within(top()).getByText('"Paul"'));
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index b086abd42093..f7ecc95fffd1 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -8,6 +8,7 @@ import {
   entityId,
   findRow,
   isChanged,
+  isDeleted,
   parseRowId,
   prettyPk,
   referrersOf,
@@ -122,7 +123,7 @@ describe('store model', () => {
       });
   });
 
-  it('still drops the id field when a row was deleted', () => {
+  it('marks deleted rows, which keep the id field dropped', () => {
     const registry = registryFor('k', [User]);
     const model = buildModel(
       {
@@ -133,8 +134,11 @@ describe('store model', () => {
       } as unknown as State<unknown>,
       registry,
     );
-    expect(model.table('User')?.pkField).toBe('id');
-    expect(model.table('User')?.fields).toEqual(['name']);
+    const users = model.table('User')!;
+    expect(users.pkField).toBe('id');
+    expect(users.fields).toEqual(['name']);
+    expect(isDeleted(users.get('9')!)).toBe(true);
+    expect(isDeleted(users.get('123')!)).toBe(false);
   });
 
   it('keeps id as data when an Entity is keyed by another field', () => {
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 514f7f87b165..07a356688056 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -12,6 +12,7 @@ import {
 import { Status } from './Details';
 import {
   errorText,
+  isDeleted,
   prettyPk,
   type AnyRow,
   type EndpointRow,
@@ -19,7 +20,7 @@ import {
   type EntityTable,
 } from './model';
 import { cellDive } from './nav';
-import type { VNode } from './refs';
+import { DELETED, type VNode } from './refs';
 import styles from './store.module.css';
 import { Cell, EndpointKey, Inline, Primitive, RowChip } from './Value';
 
@@ -347,7 +348,11 @@ export function tableColumns(
         id: c.id,
         header: c.header,
         width: i === current.length - 1 ? undefined : w,
-        cell: (row: EntityRow) => c.cell(row, w),
+        // a deleted row has no fields; its first column says so
+        cell: (row: EntityRow) =>
+          i === 0 && isDeleted(row) ?
+            <Primitive value={DELETED} />
+          : c.cell(row, w),
       };
     }),
   ];
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index a3dd93f8f9cb..725b7033de42 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { fitChips, INLINE_LIMIT, isTimeField } from './columns';
 import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
 import { refsList, useNav, type ListView, type View } from './nav';
-import { CIRCULAR, isRefList, type RefNode, type VNode } from './refs';
+import { CIRCULAR, DELETED, isRefList, type RefNode, type VNode } from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
@@ -140,7 +140,8 @@ export function Cell({
 }) {
   if (!isRefList(node)) return <Inline node={node} name={name} />;
   const { items } = node;
-  const fit = fitChips(items, width);
+  // a lone chip shows (truncated if it must) rather than a count of one
+  const fit = Math.max(fitChips(items, width), items.length === 1 ? 1 : 0);
   const list = () => dive(items);
   if (!fit)
     return (
@@ -313,6 +314,8 @@ function BlockList({
 
 export function Primitive({ value, name }: { value: unknown; name?: string }) {
   if (value === CIRCULAR) return <span className={styles.dim}>[Circular]</span>;
+  if (value === DELETED)
+    return <span className={clsx(styles.pill, styles.deleted)}>deleted</span>;
   if (value === null || value === undefined)
     return <span className={styles.null}>{String(value)}</span>;
   if (typeof value === 'string')
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 944d4449a527..620654f7ffe9 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -1,7 +1,7 @@
 import { schema as s } from '@data-client/endpoint';
 import type { State } from '@data-client/react';
 
-import { forEachRef, resolve, resolveRow, type VNode } from './refs';
+import { DELETED, forEachRef, resolve, resolveRow, type VNode } from './refs';
 import type {
   EndpointRecord,
   PendingOptimistic,
@@ -286,6 +286,10 @@ export function findRow(model: StoreModel, id: string): AnyRow | undefined {
 
 export const isEndpointRow = (row: AnyRow): row is EndpointRow => 'key' in row;
 
+/** Removed by a `schema.Invalidate` (a delete), but still in the store */
+export const isDeleted = (row: EntityRow) =>
+  row.value.t === 'val' && row.value.v === DELETED;
+
 /** `GET /posts` or `Post 1` */
 export const rowLabel = (row: AnyRow) =>
   isEndpointRow(row) ?
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 2738ab31d79f..7619b07236f3 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -116,8 +116,13 @@ function resolveFields(
   };
 }
 
+/** Stands in for a deleted row: `schema.Invalidate` stores the `INVALID`
+ * symbol in its place, the only symbol the store holds */
+export const DELETED = Symbol('deleted');
+
 /** Annotates one stored row of `state.entities[key]` */
 export function resolveRow(row: unknown, table: any): VNode {
+  if (typeof row === 'symbol') return { t: 'val', v: DELETED };
   if (!table) return plain(row);
   if (table instanceof s.Collection) return resolve(row, table.schema);
   if (typeof table === 'function' && isPlainObject(row))
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index cc7dcb2b85c1..9c00947dbb4b 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -771,6 +771,11 @@ div.row {
   color: var(--store-null);
   border-color: rgba(255, 88, 116, 0.4);
 }
+.deleted {
+  margin-left: 0;
+  color: var(--store-dim);
+  border-color: var(--store-line-strong);
+}
 .optimistic {
   color: var(--store-type);
   border-color: rgba(199, 146, 234, 0.4);

From c43df51a62435d7fe79e973905fb120a429c4db0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 19:42:07 +0000
Subject: [PATCH 27/28] Mark deleted rows by their key when a table has no
 field columns

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../Playground/preview/__tests__/StorePanel.test.tsx   |  5 +++++
 .../src/components/Playground/preview/store/Table.tsx  | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index 8c8e9fceb962..4ab918bd23e3 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -143,12 +143,17 @@ describe('StorePanel table view', () => {
             2: Symbol('INVALID'),
             [long]: { id: long, name: 'Al' },
           },
+          // every row deleted: no field columns
+          Comment: { 1: Symbol('INVALID') },
         },
       } as unknown as State<unknown>,
       r,
     );
     const users = within(top().querySelector('[data-table=User]')!);
     expect(users.getByText('deleted')).toBeTruthy();
+    // a table with no field columns marks it by the key
+    const comments = within(top().querySelector('[data-table=Comment]')!);
+    expect(comments.getByText('deleted')).toBeTruthy();
     const endpoint = byData(
       top(),
       'id',
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 07a356688056..9cfa5453b8c1 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -340,7 +340,13 @@ export function tableColumns(
       header: keyLabel[table.kind],
       width: keyWidth,
       className: styles.key,
-      cell: row => prettyPk(row.pk),
+      // with no field columns to say so, the key marks a deleted row
+      cell: row =>
+        !current.length && isDeleted(row) ?
+          <>
+            {prettyPk(row.pk)} <Primitive value={DELETED} />
+          </>
+        : prettyPk(row.pk),
     },
     ...current.map((c, i) => {
       const w = c.want * scale;
@@ -348,7 +354,7 @@ export function tableColumns(
         id: c.id,
         header: c.header,
         width: i === current.length - 1 ? undefined : w,
-        // a deleted row has no fields; its first column says so
+        // a deleted row has no fields; the first column says so
         cell: (row: EntityRow) =>
           i === 0 && isDeleted(row) ?
             <Primitive value={DELETED} />

From 157ee2f27b1041a45b83fe1ce53e11c8f2b661dd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 7 Oct 2026 19:47:09 +0000
Subject: [PATCH 28/28] Shrink a cell's ref chips to fit; call invalidated rows
 invalid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A chip wider than its cell was replaced whole by the cell's ellipsis
("[…"). Lists of chips in table cells now lay out as a row whose chips
shrink, keeping the type and truncating the pk. Rows schema.Invalidate
removed are labeled "invalid", the word the docs and INVALID use.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SaF7H7PxLeSAoqV55xaXL3
---
 .../preview/__tests__/StorePanel.test.tsx     |  8 ++++----
 .../preview/__tests__/storeModel.test.ts      |  8 ++++----
 .../Playground/preview/store/Table.tsx        | 16 +++++++--------
 .../Playground/preview/store/Value.tsx        | 20 +++++++++++++++----
 .../Playground/preview/store/model.ts         | 16 ++++++++++-----
 .../Playground/preview/store/refs.ts          |  8 ++++----
 .../Playground/preview/store/store.module.css | 19 +++++++++++++++++-
 7 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
index 4ab918bd23e3..649176f2a9a3 100644
--- a/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
+++ b/website/src/components/Playground/preview/__tests__/StorePanel.test.tsx
@@ -122,7 +122,7 @@ describe('StorePanel table view', () => {
     expect(screen.getByText('404 Not Found')).toBeTruthy();
   });
 
-  it('marks deleted rows and shows a lone ref however long its pk', () => {
+  it('marks invalidated rows and shows a lone ref however long its pk', () => {
     const long = '38200029883820002988382000298838200029883820002988';
     const r = registry();
     r.endpoints.set('POST https://example.com/users', {
@@ -143,17 +143,17 @@ describe('StorePanel table view', () => {
             2: Symbol('INVALID'),
             [long]: { id: long, name: 'Al' },
           },
-          // every row deleted: no field columns
+          // every row invalidated: no field columns
           Comment: { 1: Symbol('INVALID') },
         },
       } as unknown as State<unknown>,
       r,
     );
     const users = within(top().querySelector('[data-table=User]')!);
-    expect(users.getByText('deleted')).toBeTruthy();
+    expect(users.getByText('invalid')).toBeTruthy();
     // a table with no field columns marks it by the key
     const comments = within(top().querySelector('[data-table=Comment]')!);
-    expect(comments.getByText('deleted')).toBeTruthy();
+    expect(comments.getByText('invalid')).toBeTruthy();
     const endpoint = byData(
       top(),
       'id',
diff --git a/website/src/components/Playground/preview/__tests__/storeModel.test.ts b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
index f7ecc95fffd1..934ce72ab8ff 100644
--- a/website/src/components/Playground/preview/__tests__/storeModel.test.ts
+++ b/website/src/components/Playground/preview/__tests__/storeModel.test.ts
@@ -8,7 +8,7 @@ import {
   entityId,
   findRow,
   isChanged,
-  isDeleted,
+  isInvalidated,
   parseRowId,
   prettyPk,
   referrersOf,
@@ -123,7 +123,7 @@ describe('store model', () => {
       });
   });
 
-  it('marks deleted rows, which keep the id field dropped', () => {
+  it('marks invalidated rows, which keep the id field dropped', () => {
     const registry = registryFor('k', [User]);
     const model = buildModel(
       {
@@ -137,8 +137,8 @@ describe('store model', () => {
     const users = model.table('User')!;
     expect(users.pkField).toBe('id');
     expect(users.fields).toEqual(['name']);
-    expect(isDeleted(users.get('9')!)).toBe(true);
-    expect(isDeleted(users.get('123')!)).toBe(false);
+    expect(isInvalidated(users.get('9')!)).toBe(true);
+    expect(isInvalidated(users.get('123')!)).toBe(false);
   });
 
   it('keeps id as data when an Entity is keyed by another field', () => {
diff --git a/website/src/components/Playground/preview/store/Table.tsx b/website/src/components/Playground/preview/store/Table.tsx
index 9cfa5453b8c1..89db2e12f953 100644
--- a/website/src/components/Playground/preview/store/Table.tsx
+++ b/website/src/components/Playground/preview/store/Table.tsx
@@ -12,7 +12,7 @@ import {
 import { Status } from './Details';
 import {
   errorText,
-  isDeleted,
+  isInvalidated,
   prettyPk,
   type AnyRow,
   type EndpointRow,
@@ -20,7 +20,7 @@ import {
   type EntityTable,
 } from './model';
 import { cellDive } from './nav';
-import { DELETED, type VNode } from './refs';
+import { INVALIDATED, type VNode } from './refs';
 import styles from './store.module.css';
 import { Cell, EndpointKey, Inline, Primitive, RowChip } from './Value';
 
@@ -340,11 +340,11 @@ export function tableColumns(
       header: keyLabel[table.kind],
       width: keyWidth,
       className: styles.key,
-      // with no field columns to say so, the key marks a deleted row
+      // with no field columns to say so, the key marks an invalidated row
       cell: row =>
-        !current.length && isDeleted(row) ?
+        !current.length && isInvalidated(row) ?
           <>
-            {prettyPk(row.pk)} <Primitive value={DELETED} />
+            {prettyPk(row.pk)} <Primitive value={INVALIDATED} />
           </>
         : prettyPk(row.pk),
     },
@@ -354,10 +354,10 @@ export function tableColumns(
         id: c.id,
         header: c.header,
         width: i === current.length - 1 ? undefined : w,
-        // a deleted row has no fields; the first column says so
+        // an invalidated row has no fields; the first column says so
         cell: (row: EntityRow) =>
-          i === 0 && isDeleted(row) ?
-            <Primitive value={DELETED} />
+          i === 0 && isInvalidated(row) ?
+            <Primitive value={INVALIDATED} />
           : c.cell(row, w),
       };
     }),
diff --git a/website/src/components/Playground/preview/store/Value.tsx b/website/src/components/Playground/preview/store/Value.tsx
index 725b7033de42..76d103f2f923 100644
--- a/website/src/components/Playground/preview/store/Value.tsx
+++ b/website/src/components/Playground/preview/store/Value.tsx
@@ -4,7 +4,13 @@ import React, { useState } from 'react';
 import { fitChips, INLINE_LIMIT, isTimeField } from './columns';
 import { entityId, isEndpointRow, prettyPk, type AnyRow } from './model';
 import { refsList, useNav, type ListView, type View } from './nav';
-import { CIRCULAR, DELETED, isRefList, type RefNode, type VNode } from './refs';
+import {
+  CIRCULAR,
+  INVALIDATED,
+  isRefList,
+  type RefNode,
+  type VNode,
+} from './refs';
 import styles from './store.module.css';
 import { useStoreUI } from './StoreUI';
 
@@ -153,6 +159,7 @@ export function Cell({
     <Inline
       node={node}
       limit={fit}
+      shrink
       more={<CountChip list={list}>+{items.length - fit}</CountChip>}
     />
   );
@@ -165,6 +172,7 @@ export function Inline({
   bare = false,
   limit = INLINE_LIMIT,
   more,
+  shrink = false,
 }: {
   node: VNode;
   name?: string;
@@ -174,6 +182,8 @@ export function Inline({
   limit?: number;
   /** Stands for the items past `limit` (default: a dim `+N`) */
   more?: React.ReactNode;
+  /** A list's chips shrink (truncating their pk) to fit its cell */
+  shrink?: boolean;
 }) {
   switch (node.t) {
     case 'ref':
@@ -189,7 +199,7 @@ export function Inline({
       const shown = node.items.slice(0, limit);
       const rest = node.items.length - shown.length;
       return (
-        <span className={styles.inlineList}>
+        <span className={clsx(styles.inlineList, shrink && styles.shrinkList)}>
           <span className={styles.dim}>[</span>
           {shown.map((item, i) => (
             <React.Fragment key={i}>
@@ -314,8 +324,10 @@ function BlockList({
 
 export function Primitive({ value, name }: { value: unknown; name?: string }) {
   if (value === CIRCULAR) return <span className={styles.dim}>[Circular]</span>;
-  if (value === DELETED)
-    return <span className={clsx(styles.pill, styles.deleted)}>deleted</span>;
+  if (value === INVALIDATED)
+    return (
+      <span className={clsx(styles.pill, styles.invalidated)}>invalid</span>
+    );
   if (value === null || value === undefined)
     return <span className={styles.null}>{String(value)}</span>;
   if (typeof value === 'string')
diff --git a/website/src/components/Playground/preview/store/model.ts b/website/src/components/Playground/preview/store/model.ts
index 620654f7ffe9..7839728183ad 100644
--- a/website/src/components/Playground/preview/store/model.ts
+++ b/website/src/components/Playground/preview/store/model.ts
@@ -1,7 +1,13 @@
 import { schema as s } from '@data-client/endpoint';
 import type { State } from '@data-client/react';
 
-import { DELETED, forEachRef, resolve, resolveRow, type VNode } from './refs';
+import {
+  INVALIDATED,
+  forEachRef,
+  resolve,
+  resolveRow,
+  type VNode,
+} from './refs';
 import type {
   EndpointRecord,
   PendingOptimistic,
@@ -144,7 +150,7 @@ function buildTable(
   const pkField =
     (
       kind === 'entity' &&
-      // deleted rows store a marker instead of an object
+      // invalidated rows store a marker instead of an object
       sample.every(pk => {
         const raw = rows[pk];
         return (
@@ -286,9 +292,9 @@ export function findRow(model: StoreModel, id: string): AnyRow | undefined {
 
 export const isEndpointRow = (row: AnyRow): row is EndpointRow => 'key' in row;
 
-/** Removed by a `schema.Invalidate` (a delete), but still in the store */
-export const isDeleted = (row: EntityRow) =>
-  row.value.t === 'val' && row.value.v === DELETED;
+/** Invalidated by a `schema.Invalidate`, but still in the store */
+export const isInvalidated = (row: EntityRow) =>
+  row.value.t === 'val' && row.value.v === INVALIDATED;
 
 /** `GET /posts` or `Post 1` */
 export const rowLabel = (row: AnyRow) =>
diff --git a/website/src/components/Playground/preview/store/refs.ts b/website/src/components/Playground/preview/store/refs.ts
index 7619b07236f3..c1bace352d6f 100644
--- a/website/src/components/Playground/preview/store/refs.ts
+++ b/website/src/components/Playground/preview/store/refs.ts
@@ -116,13 +116,13 @@ function resolveFields(
   };
 }
 
-/** Stands in for a deleted row: `schema.Invalidate` stores the `INVALID`
- * symbol in its place, the only symbol the store holds */
-export const DELETED = Symbol('deleted');
+/** Stands in for an invalidated row: `schema.Invalidate` stores the
+ * `INVALID` symbol in its place, the only symbol the store holds */
+export const INVALIDATED = Symbol('invalidated');
 
 /** Annotates one stored row of `state.entities[key]` */
 export function resolveRow(row: unknown, table: any): VNode {
-  if (typeof row === 'symbol') return { t: 'val', v: DELETED };
+  if (typeof row === 'symbol') return { t: 'val', v: INVALIDATED };
   if (!table) return plain(row);
   if (table instanceof s.Collection) return resolve(row, table.schema);
   if (typeof table === 'function' && isPlainObject(row))
diff --git a/website/src/components/Playground/preview/store/store.module.css b/website/src/components/Playground/preview/store/store.module.css
index 9c00947dbb4b..2397ee1beb5f 100644
--- a/website/src/components/Playground/preview/store/store.module.css
+++ b/website/src/components/Playground/preview/store/store.module.css
@@ -696,6 +696,19 @@ div.row {
 .inlineList {
   white-space: nowrap;
 }
+/* a cell's chips shrink before the cell's ellipsis would hide one whole */
+.shrinkList {
+  display: inline-flex;
+  align-items: baseline;
+  max-width: 100%;
+}
+.shrinkList > * {
+  flex: none;
+}
+.shrinkList > .ref:not(.countRef) {
+  flex-shrink: 1;
+  min-width: 0;
+}
 .method {
   flex: none;
   font: 600 10px var(--ifm-font-family-base);
@@ -722,6 +735,10 @@ div.row {
   cursor: pointer;
 }
 .ref b {
+  /* the pk truncates; the type before it stays */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: 500;
   color: var(--store-fg);
 }
@@ -771,7 +788,7 @@ div.row {
   color: var(--store-null);
   border-color: rgba(255, 88, 116, 0.4);
 }
-.deleted {
+.invalidated {
   margin-left: 0;
   color: var(--store-dim);
   border-color: var(--store-line-strong);