@dimina-kit/inspect 0.4.0-dev.20260716214527 → 0.4.0-dev.20260717120050

package/src/appdata-tree.tsx

@@ -0,0 +1,265 @@
+// The AppData tree: one page's merged setData state as a collapsible,
+// optionally editable tree (WeChat DevTools AppData semantics). Pure
+// presentation + local expansion/edit state; committed edits are reported
+// upward as (path, next, prev) — the panel owns the undo/redo stack and the
+// actual write-back, and the rendered VALUES always come from `root`, never
+// from a local echo of an edit.
+import React, { useState } from 'react'
+
+/** One expand/collapse-all toolbar action. Every keepalive tree instance sees
+ * the same command object; a tree applies it only when `bridgeId` is its own
+ * and `seq` is unseen — a background tree must not replay a command that was
+ * aimed at the tree visible when the button was clicked. */
+export interface AppDataTreeCommand {
+  seq: number
+  mode: 'expanded' | 'collapsed'
+  bridgeId: string
+}
+
+export interface AppDataTreeProps {
+  root: Record<string, unknown>
+  bridgeId: string
+  command: AppDataTreeCommand | null
+  /** Absent → read-only tree (no checkboxes, double-click is inert). */
+  onCommit?: (path: string, next: unknown, prev: unknown) => void
+}
+
+/** WeChat setData path syntax: dots between keys, indices in brackets. */
+function childPath(parent: string, key: string | number): string {
+  if (typeof key === 'number') return `${parent}[${key}]`
+  return parent === '' ? key : `${parent}.${key}`
+}
+
+function isContainer(v: unknown): v is object {
+  return typeof v === 'object' && v !== null
+}
+
+function sortedEntries(value: object): Array<[string | number, unknown]> {
+  // Array.isArray narrows to any[]; the explicit unknown[] view keeps the
+  // elements typed (type-coverage counts every any-typed identifier).
+  if (Array.isArray(value)) return (value as unknown[]).map((v, i) => [i, v])
+  return Object.keys(value).sort().map((k) => [k, (value as Record<string, unknown>)[k]])
+}
+
+function countLabel(value: object): string {
+  return Array.isArray(value) ? `[${value.length}]` : `{${Object.keys(value).length}}`
+}
+
+// default: only the root row is open; expanded/collapsed: everything is.
+type Baseline = 'default' | 'expanded' | 'collapsed'
+const ROOT_PATH = ''
+
+interface TreeState {
+  baseline: Baseline
+  overrides: Map<string, boolean>
+  editingPath: string | null
+  draft: string
+}
+
+function isExpanded(state: TreeState, path: string): boolean {
+  const override = state.overrides.get(path)
+  if (override !== undefined) return override
+  if (state.baseline === 'expanded') return true
+  if (state.baseline === 'collapsed') return false
+  return path === ROOT_PATH
+}
+
+interface NodeContext {
+  state: TreeState
+  toggle: (path: string, value: unknown) => void
+  beginEdit: (path: string, initial: string) => void
+  setDraft: (draft: string) => void
+  endEdit: () => void
+  onCommit?: (path: string, next: unknown, prev: unknown) => void
+}
+
+function ValueCell({ path, value, editable, ctx }: {
+  path: string
+  value: unknown
+  editable: boolean
+  ctx: NodeContext
+}) {
+  if (typeof value === 'boolean') {
+    return (
+      <span className="inline-flex items-center gap-1 text-code-keyword">
+        {editable && (
+          <input
+            type="checkbox"
+            checked={value}
+            onChange={() => ctx.onCommit?.(path, !value, value)}
+            className="accent-accent"
+          />
+        )}
+        {String(value)}
+      </span>
+    )
+  }
+  if (value === null || value === undefined) {
+    return <span className="text-code-keyword">{String(value)}</span>
+  }
+  if (ctx.state.editingPath === path) {
+    const commit = (): void => {
+      const prev = value
+      if (typeof prev === 'number') {
+        const draft = ctx.state.draft.trim()
+        const next = Number(draft)
+        ctx.endEdit()
+        // Only finite numbers commit: Infinity/-Infinity (and 1e309-style
+        // overflow) are not serializable AppData values.
+        if (draft === '' || !Number.isFinite(next)) return
+        ctx.onCommit?.(path, next, prev)
+        return
+      }
+      const next = ctx.state.draft
+      ctx.endEdit()
+      ctx.onCommit?.(path, next, prev)
+    }
+    return (
+      <input
+        type="text"
+        autoFocus
+        value={ctx.state.draft}
+        onChange={(e) => ctx.setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commit()
+          else if (e.key === 'Escape') ctx.endEdit()
+        }}
+        onBlur={commit}
+        className="bg-surface-3 border border-accent rounded px-1 text-[12px] font-mono min-w-0 w-40"
+      />
+    )
+  }
+  const color = typeof value === 'number'
+    ? { color: 'var(--color-code-number)' }
+    : undefined
+  return (
+    <span
+      data-testid="appdata-value"
+      className={typeof value === 'string' ? 'text-code-orange' : undefined}
+      style={color}
+      onDoubleClick={editable ? () => ctx.beginEdit(path, String(value)) : undefined}
+    >
+      {String(value)}
+    </span>
+  )
+}
+
+/** True when a key segment would be re-parsed by the runtime's lodash-style
+ * `toPath` (dots / brackets), or silently DROPPED by it (empty keys — toPath
+ * never pushes an empty segment, so `profile.` parses to just `['profile']`
+ * and a write would overwrite the parent). Array indices are numbers and
+ * always safe. */
+function segmentUnsafe(key: string | number): boolean {
+  return typeof key === 'string' && (key === '' || /[.[\]]/.test(key))
+}
+
+function TreeNode({ path, label, value, depth, unsafeSegments, ctx }: {
+  path: string
+  label: string
+  value: unknown
+  depth: number
+  /** Some segment on this node's path (its own key included) contains `.`/`[`/`]`. */
+  unsafeSegments: boolean
+  ctx: NodeContext
+}) {
+  const indent = { paddingLeft: depth * 14 }
+  if (isContainer(value)) {
+    const open = isExpanded(ctx.state, path)
+    return (
+      <div>
+        <div
+          className="flex items-center gap-1 px-2 py-px cursor-pointer hover:bg-surface-3 text-[12px] font-mono"
+          style={indent}
+          onClick={() => ctx.toggle(path, value)}
+        >
+          <span className="text-text-secondary w-3 shrink-0 text-center select-none">
+            {open ? '▾' : '▸'}
+          </span>
+          <span className="text-code-blue">{label}</span>
+          <span className="text-text-secondary">{countLabel(value)}</span>
+        </div>
+        {open && sortedEntries(value).map(([key, child]) => (
+          <TreeNode
+            key={String(key)}
+            path={childPath(path, key)}
+            label={String(key)}
+            value={child}
+            depth={depth + 1}
+            unsafeSegments={unsafeSegments || segmentUnsafe(key)}
+            ctx={ctx}
+          />
+        ))}
+      </div>
+    )
+  }
+  const primitive = typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'
+  // A multi-segment path with an unsafe segment cannot round-trip through the
+  // runtime's string-path `set()` — the patch key would be re-split on the
+  // dots/brackets inside the key and write a DIFFERENT field. A single-segment
+  // (top-level) key is safe regardless of content: the runtime's own-key check
+  // short-circuits before path parsing. `__proto__` is unwritable at ANY
+  // depth: the runtime's isUnsafeProperty drops the write outright. Unsafe
+  // rows render read-only.
+  const pathAmbiguous = (depth > 1 && unsafeSegments) || label === '__proto__'
+  const editable = primitive && ctx.onCommit !== undefined && !pathAmbiguous
+  return (
+    <div
+      className="flex items-center gap-1 px-2 py-px text-[12px] font-mono"
+      style={indent}
+      {...(editable ? { 'data-path': path } : {})}
+    >
+      <span className="w-3 shrink-0" />
+      <span className="text-code-blue">{label}</span>
+      <span className="text-text-secondary">:</span>
+      <ValueCell path={path} value={value} editable={editable} ctx={ctx} />
+    </div>
+  )
+}
+
+export function AppDataTree({ root, bridgeId, command, onCommit }: AppDataTreeProps) {
+  const [baseline, setBaseline] = useState<Baseline>('default')
+  const [overrides, setOverrides] = useState<Map<string, boolean>>(new Map())
+  const [appliedSeq, setAppliedSeq] = useState(0)
+  const [editingPath, setEditingPath] = useState<string | null>(null)
+  const [draft, setDraft] = useState('')
+
+  // Applying a toolbar command during render (state-adjust-in-render, same
+  // pattern as useActiveBridgeId) keeps the frame it lands on consistent.
+  if (command && command.bridgeId === bridgeId && command.seq !== appliedSeq) {
+    setBaseline(command.mode)
+    setOverrides(new Map())
+    setAppliedSeq(command.seq)
+  }
+
+  const state: TreeState = { baseline, overrides, editingPath, draft }
+  const ctx: NodeContext = {
+    state,
+    toggle: (path, value) => {
+      const next = new Map(overrides)
+      const opening = !isExpanded(state, path)
+      next.set(path, opening)
+      // Opening an array also opens its container elements: the elements are
+      // anonymous index rows, so surfacing their fields in the same click is
+      // what makes `list[0].id` reachable without a second dig.
+      if (opening && Array.isArray(value)) {
+        ;(value as unknown[]).forEach((element, i) => {
+          if (isContainer(element)) next.set(childPath(path, i), true)
+        })
+      }
+      setOverrides(next)
+    },
+    beginEdit: (path, initial) => {
+      setEditingPath(path)
+      setDraft(initial)
+    },
+    setDraft,
+    endEdit: () => setEditingPath(null),
+    onCommit,
+  }
+
+  return (
+    <div data-testid="appdata-tree" className="py-1">
+      <TreeNode path={ROOT_PATH} label="object" value={root} depth={0} unsafeSegments={false} ctx={ctx} />
+    </div>
+  )
+}

package/src/appdata-write-serialization.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * AppDataPanel — a single write gate admits at most one in-flight write
+ * across every write path (commit and replay share it): while a write is
+ * pending, any further commit or replay request is dropped outright — no
+ * local echo, no queued follow-up, no second `onSetData` call. This is what
+ * keeps undo/redo stack order honest when a click races an in-flight async
+ * write:
+ *
+ * 1. A commit fired while a replay (撤销/重做) is in flight is dropped, so a
+ *    resolving replay can never re-add a record that a same-turn commit
+ *    already invalidated by clearing the redo stack.
+ * 2. A second commit fired while the first is still in flight is dropped, so
+ *    the undo stack only ever grows by the write that was actually
+ *    dispatched — never out of commit order.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, waitFor, within } from '@testing-library/react'
+import { AppDataPanel, type AppDataPanelState as AppDataState } from './appdata-panel-view.js'
+
+function writableState(): AppDataState {
+  return {
+    bridges: [{ id: 'b1', pagePath: '/pages/index/index' }],
+    activeBridgeId: 'b1',
+    entries: {
+      b1: {
+        comp: {
+          flag: true,
+          label: 'hello',
+          seed: 'S0',
+          a: 'A0',
+          b: 'B0',
+        },
+      },
+    },
+  }
+}
+
+function checkboxFor(container: HTMLElement, path: string): HTMLInputElement {
+  const row = container.querySelector(`[data-path="${path}"]`) as HTMLElement
+  return row.querySelector('input[type="checkbox"]') as HTMLInputElement
+}
+
+function valueElFor(container: HTMLElement, path: string): HTMLElement {
+  const row = container.querySelector(`[data-path="${path}"]`) as HTMLElement
+  return within(row).getByTestId('appdata-value')
+}
+
+/** Double-click a string/number row, replace its text, and commit on Enter. */
+function commitText(container: HTMLElement, path: string, value: string): void {
+  fireEvent.dblClick(valueElFor(container, path))
+  const input = within(container).getByRole('textbox') as HTMLInputElement
+  fireEvent.change(input, { target: { value } })
+  fireEvent.keyDown(input, { key: 'Enter' })
+}
+
+/** Resolves/rejects on demand — lets a test hold `onSetData` open mid-dispatch
+ * to exercise pending/reentrancy behavior before settling it. */
+function deferred<T>(): { promise: Promise<T>; resolve: (value: T) => void } {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => { resolve = res })
+  return { promise, resolve }
+}
+
+describe('AppDataPanel: a commit is dropped while a replay is in flight', () => {
+  it('never calls onSetData for the dropped commit, and settles into a single redo record — never a resurrected one', async () => {
+    const onSetData = vi.fn<(bridgeId: string, patch: Record<string, unknown>) => boolean | Promise<boolean>>(() => true)
+    const { container, getByTitle } = render(
+      <AppDataPanel state={writableState()} onSelectBridge={vi.fn()} onSetData={onSetData} />,
+    )
+    fireEvent.click(checkboxFor(container, 'flag'))
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(false)
+
+    const write = deferred<boolean>()
+    onSetData.mockImplementation(() => write.promise)
+    onSetData.mockClear()
+
+    fireEvent.click(getByTitle('撤销'))
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    // A commit on an unrelated field lands mid-replay — the write gate must
+    // drop it before it ever reaches onSetData.
+    commitText(container, 'label', 'ignored')
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    write.resolve(true)
+    await waitFor(() => expect((getByTitle('重做') as HTMLButtonElement).disabled).toBe(false))
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(true)
+    // Stack state matches "the dropped commit never happened": exactly the
+    // one replayed record moved to redo, nothing extra came back onto it.
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(getByTitle('重做'))
+    await waitFor(() => expect((getByTitle('重做') as HTMLButtonElement).disabled).toBe(true))
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(false)
+  })
+})
+
+describe('AppDataPanel: a second commit is dropped while the first is in flight', () => {
+  it('calls onSetData once for the in-flight commit, disables 撤销/重做 while it is pending even with a nonempty stack, and undoes only the write that was actually dispatched', async () => {
+    const onSetData = vi.fn<(bridgeId: string, patch: Record<string, unknown>) => boolean | Promise<boolean>>(() => true)
+    const { container, getByTitle } = render(
+      <AppDataPanel state={writableState()} onSelectBridge={vi.fn()} onSetData={onSetData} />,
+    )
+    // Seed a synchronously-settled undo record so the stack is nonempty
+    // before the race below — otherwise "disabled" would be indistinguishable
+    // from an empty-stack disable, not the write gate's pending state.
+    commitText(container, 'seed', 'S1')
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(false)
+
+    const pending: Array<(value: boolean) => void> = []
+    onSetData.mockImplementation(() => new Promise<boolean>((resolve) => { pending.push(resolve) }))
+    onSetData.mockClear()
+
+    commitText(container, 'a', 'A1')
+    expect(onSetData).toHaveBeenCalledTimes(1)
+    // The write gate's pending state disables both buttons even though the
+    // undo stack is nonempty — an in-flight commit holds the gate exactly
+    // like an in-flight replay does.
+    expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(true)
+    expect((getByTitle('重做') as HTMLButtonElement).disabled).toBe(true)
+
+    commitText(container, 'b', 'B1')
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    pending[0]?.(true)
+    await waitFor(() => expect((getByTitle('撤销') as HTMLButtonElement).disabled).toBe(false))
+    expect(onSetData).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(getByTitle('撤销'))
+    // Only `a` was ever committed — `b` never reached onSetData — so the
+    // record undo replays is necessarily `a`'s.
+    expect(onSetData).toHaveBeenLastCalledWith('b1', { a: 'A0' })
+  })
+})

package/src/connected-appdata-panel.test.tsx

@@ -55,6 +55,14 @@ async function flush() {
   })
 }
 
+/** Finds a Pages sidebar row by its rendered label (pagePath, or id when pagePath is null). */
+function pageItem(label: string): HTMLElement {
+  const items = screen.getAllByTestId('appdata-page-item')
+  const found = items.find(el => (el.textContent ?? '').trim() === label)
+  if (!found) throw new Error(`no page item labeled "${label}" among [${items.map(el => el.textContent).join(', ')}]`)
+  return found
+}
+
 afterEach(() => {
   cleanup()
   vi.unstubAllGlobals()
@@ -254,7 +262,7 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     expect(screen.getByTestId('appdata-panel').textContent).toContain('暂无页面数据（仅显示 Page 级 data）')
   })
 
-  it('hides the tab bar when there is only a single bridge', async () => {
+  it('renders the Pages sidebar with a single item even when there is only one bridge', async () => {
     const { source, getSnapshotQueue } = createFakeSource()
     getSnapshotQueue.push(Promise.resolve(snapshot([{ id: 'b1', pagePath: '/pages/index/index' }], {
       b1: { 'pages/index/index': { count: 1 } },
@@ -262,10 +270,11 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     render(<ConnectedAppDataPanel source={source} />)
     await flush()
 
-    expect(screen.queryByTitle('b1')).toBeNull()
+    expect(screen.getByTestId('appdata-pages')).not.toBeNull()
+    expect(screen.getAllByTestId('appdata-page-item')).toHaveLength(1)
   })
 
-  it('renders one tab button per bridge, labeled by pagePath and falling back to id when pagePath is null', async () => {
+  it('renders one Pages sidebar item per bridge, labeled by pagePath and falling back to id when pagePath is null', async () => {
     const { source, getSnapshotQueue } = createFakeSource()
     getSnapshotQueue.push(Promise.resolve(snapshot([
       { id: 'b1', pagePath: '/pages/index/index' },
@@ -277,10 +286,9 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     render(<ConnectedAppDataPanel source={source} />)
     await flush()
 
-    const tab1 = screen.getByTitle('b1')
-    const tab2 = screen.getByTitle('b2')
-    expect(tab1.textContent).toBe('/pages/index/index')
-    expect(tab2.textContent).toBe('b2')
+    const labels = screen.getAllByTestId('appdata-page-item').map(el => (el.textContent ?? '').trim())
+    expect(labels).toContain('/pages/index/index')
+    expect(labels).toContain('b2')
   })
 
   it('keeps every bridge container mounted and toggles display instead of unmounting on tab switch', async () => {
@@ -303,7 +311,7 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     expect(c2.style.display).toBe('flex')
     expect(c1.style.display).toBe('none')
 
-    fireEvent.click(screen.getByTitle('b1'))
+    fireEvent.click(pageItem('/pages/index/index'))
 
     expect(c1.style.display).toBe('flex')
     expect(c2.style.display).toBe('none')
@@ -312,7 +320,7 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     expect(document.querySelector('[data-bridge-id="b2"]')).toBe(c2)
   })
 
-  it('renders one data section per entry key, headed by the key itself', async () => {
+  it('merges every entry\'s data into one tree so no bridge data is lost through the connected wiring', async () => {
     const { source, getSnapshotQueue } = createFakeSource()
     getSnapshotQueue.push(Promise.resolve(snapshot([{ id: 'b1', pagePath: null }], {
       b1: {
@@ -323,9 +331,9 @@ describe('ConnectedAppDataPanel: rendering contract', () => {
     render(<ConnectedAppDataPanel source={source} />)
     await flush()
 
-    const container = within(document.querySelector('[data-bridge-id="b1"]') as HTMLElement)
-    expect(container.getByText('pages/index/index')).not.toBeNull()
-    expect(container.getByText('components/foo/foo')).not.toBeNull()
+    const tree = within(document.querySelector('[data-bridge-id="b1"]') as HTMLElement).getByTestId('appdata-tree')
+    expect(tree.textContent).toContain('count')
+    expect(tree.textContent).toContain('visible')
   })
 })
 
@@ -373,7 +381,7 @@ describe('ConnectedAppDataPanel: active bridge auto-follow', () => {
     render(<ConnectedAppDataPanel source={source} />)
     await flush()
 
-    fireEvent.click(screen.getByTitle('b1'))
+    fireEvent.click(pageItem('/pages/index/index'))
     expect((document.querySelector('[data-bridge-id="b1"]') as HTMLElement).style.display).toBe('flex')
 
     act(() => {
@@ -393,7 +401,7 @@ describe('ConnectedAppDataPanel: active bridge auto-follow', () => {
     render(<ConnectedAppDataPanel source={source} />)
     await flush()
 
-    fireEvent.click(screen.getByTitle('b1'))
+    fireEvent.click(pageItem('/pages/index/index'))
     expect((document.querySelector('[data-bridge-id="b1"]') as HTMLElement).style.display).toBe('flex')
 
     act(() => {
@@ -415,7 +423,7 @@ describe('ConnectedAppDataPanel: active bridge auto-follow', () => {
     await flush()
     expect((document.querySelector('[data-bridge-id="b1"]') as HTMLElement).style.display).toBe('flex')
 
-    fireEvent.click(screen.getByTitle('b2'))
+    fireEvent.click(pageItem('/pages/detail/detail'))
     expect((document.querySelector('[data-bridge-id="b2"]') as HTMLElement).style.display).toBe('flex')
 
     rerender(<ConnectedAppDataPanel source={source} activePagePath="/pages/detail/detail" />)

package/src/connected-appdata-panel.tsx

@@ -52,11 +52,21 @@ export function ConnectedAppDataPanel({
 
   const { activeBridgeId, setActiveBridge } = useActiveBridgeId(snapshot.bridges, activePagePath)
 
+  // Only a source with a write-back channel makes the tree editable. The
+  // dispatch result flows through to the panel: its undo/redo stacks only
+  // advance when the runtime actually accepted the write. The authoritative
+  // new VALUE still arrives back through the snapshot push, never locally.
+  const setData = source.setData?.bind(source)
+  const onSetData = setData
+    ? (bridgeId: string, patch: Record<string, unknown>): Promise<boolean> => setData(bridgeId, patch)
+    : undefined
+
   return (
     <AppDataPanel
       state={{ bridges: snapshot.bridges, activeBridgeId, entries: snapshot.entries }}
       onSelectBridge={setActiveBridge}
       isRuntimeRunning={isRuntimeRunning}
+      onSetData={onSetData}
     />
   )
 }