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

package/src/appdata-panel-view-wechat.test.tsx

@@ -0,0 +1,268 @@
+/**
+ * AppDataPanel — WeChat DevTools parity.
+ *
+ * A Pages sidebar drives a single merged data tree per page, replacing the
+ * old top bridge-tab bar and the one-JSON-card-per-component-path layout.
+ * Every active bridge's `entries[bridgeId]` component objects are
+ * shallow-merged (insertion order, later wins) into one root object and
+ * rendered as a collapsible tree: the root and its top-level keys are always
+ * visible, nested object/array nodes start collapsed, and a toolbar can
+ * expand or collapse everything at once. Editing behavior (checkboxes,
+ * inline text/number edit, data-path targeting, undo/redo) is covered
+ * separately in appdata-tree-edit.test.tsx.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/react'
+import { AppDataPanel, type AppDataPanelState as AppDataState } from './appdata-panel-view.js'
+
+function makeState(overrides: Partial<AppDataState> = {}): AppDataState {
+  return {
+    bridges: [{ id: 'b1', pagePath: 'pages/index/index' }],
+    activeBridgeId: 'b1',
+    entries: { b1: { 'pages/index/index': { count: 1 } } },
+    ...overrides,
+  }
+}
+
+describe('AppDataPanel: Pages sidebar', () => {
+  it('renders a Pages sidebar with one item even for a single bridge', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <AppDataPanel state={makeState()} onSelectBridge={vi.fn()} />,
+    )
+    const sidebar = getByTestId('appdata-pages')
+    expect(sidebar.textContent).toContain('Pages')
+    expect(getAllByTestId('appdata-page-item')).toHaveLength(1)
+  })
+
+  it('labels each page item by pagePath, falling back to the bridge id when pagePath is null', () => {
+    const state = makeState({
+      bridges: [
+        { id: 'b1', pagePath: '/pages/index/index' },
+        { id: 'b2', pagePath: null },
+      ],
+      activeBridgeId: 'b1',
+      entries: {
+        b1: { 'pages/index/index': { count: 1 } },
+        b2: { 'pages/detail/detail': { count: 2 } },
+      },
+    })
+    const { getAllByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const labels = getAllByTestId('appdata-page-item').map(el => (el.textContent ?? '').trim())
+    expect(labels).toContain('/pages/index/index')
+    expect(labels).toContain('b2')
+  })
+
+  it('marks the active bridge row aria-selected=true and the rest aria-selected=false', () => {
+    const state = makeState({
+      bridges: [
+        { id: 'b1', pagePath: '/pages/index/index' },
+        { id: 'b2', pagePath: '/pages/detail/detail' },
+      ],
+      activeBridgeId: 'b2',
+      entries: {
+        b1: { 'pages/index/index': { count: 1 } },
+        b2: { 'pages/detail/detail': { count: 2 } },
+      },
+    })
+    const { getAllByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const items = getAllByTestId('appdata-page-item')
+    const b1Item = items.find(el => (el.textContent ?? '').trim() === '/pages/index/index')!
+    const b2Item = items.find(el => (el.textContent ?? '').trim() === '/pages/detail/detail')!
+    expect(b1Item.getAttribute('aria-selected')).toBe('false')
+    expect(b2Item.getAttribute('aria-selected')).toBe('true')
+  })
+
+  it('calls onSelectBridge with the clicked bridge id', () => {
+    const state = makeState({
+      bridges: [
+        { id: 'b1', pagePath: '/pages/index/index' },
+        { id: 'b2', pagePath: '/pages/detail/detail' },
+      ],
+      activeBridgeId: 'b1',
+      entries: {
+        b1: { 'pages/index/index': { count: 1 } },
+        b2: { 'pages/detail/detail': { count: 2 } },
+      },
+    })
+    const onSelectBridge = vi.fn()
+    const { getAllByTestId } = render(<AppDataPanel state={state} onSelectBridge={onSelectBridge} />)
+    const b2Item = getAllByTestId('appdata-page-item').find(
+      el => (el.textContent ?? '').trim() === '/pages/detail/detail',
+    )!
+    fireEvent.click(b2Item)
+    expect(onSelectBridge).toHaveBeenCalledWith('b2')
+  })
+})
+
+describe('AppDataPanel: merged data tree', () => {
+  it('shallow-merges every component entry for the active bridge into one tree, later entries winning on key conflicts', () => {
+    const state = makeState({
+      entries: {
+        b1: {
+          'pages/index/index': { count: 1, shared: 'first' },
+          'components/foo/foo': { visible: true, shared: 'second' },
+        },
+      },
+    })
+    const { getByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const tree = getByTestId('appdata-tree')
+    expect(tree.textContent).toContain('count')
+    expect(tree.textContent).toContain('visible')
+    expect(tree.textContent).toContain('second')
+  })
+
+  it('renders exactly one merged tree per bridge, not one card per component path', () => {
+    const state = makeState({
+      entries: {
+        b1: {
+          'pages/index/index': { count: 1 },
+          'components/foo/foo': { visible: true },
+        },
+      },
+    })
+    const { container } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const bridgeContainer = container.querySelector('[data-bridge-id="b1"]') as HTMLElement
+    expect(bridgeContainer.querySelectorAll('[data-testid="appdata-tree"]')).toHaveLength(1)
+  })
+
+  it('does not render the component path as a visible header inside the tree', () => {
+    const state = makeState({
+      entries: { b1: { 'pages/index/index': { count: 1 } } },
+    })
+    const { getByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    expect(getByTestId('appdata-tree').textContent).not.toContain('pages/index/index')
+  })
+})
+
+describe('AppDataPanel: root default expansion and key order', () => {
+  it('shows top-level keys without any interaction, inside the merged appdata-tree container', () => {
+    const state = makeState({ entries: { b1: { comp: { count: 1, label: 'hi' } } } })
+    const { getByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const tree = getByTestId('appdata-tree')
+    expect(tree.textContent).toContain('count')
+    expect(tree.textContent).toContain('label')
+  })
+
+  it('shows the root row entry count as {n} for n top-level keys', () => {
+    const state = makeState({ entries: { b1: { comp: { alpha: 1, beta: 2, gamma: 3 } } } })
+    const { getByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    expect(getByTestId('appdata-tree').textContent).toContain('{3}')
+  })
+
+  it('orders top-level keys by Array.prototype.sort() default (code-unit ascending), not insertion order', () => {
+    const state = makeState({ entries: { b1: { comp: { zeta: 1, alpha: 2 } } } })
+    const { getByTestId } = render(<AppDataPanel state={state} onSelectBridge={vi.fn()} />)
+    const text = getByTestId('appdata-tree').textContent ?? ''
+    expect(text.indexOf('alpha')).toBeGreaterThanOrEqual(0)
+    expect(text.indexOf('zeta')).toBeGreaterThanOrEqual(0)
+    expect(text.indexOf('alpha')).toBeLessThan(text.indexOf('zeta'))
+  })
+})
+
+describe('AppDataPanel: non-root node collapse', () => {
+  function nestedState(): AppDataState {
+    return makeState({
+      entries: {
+        b1: {
+          comp: {
+            obj: { first: 1, second: 2 },
+            list: [10, 20, 30, 40],
+          },
+        },
+      },
+    })
+  }
+
+  it('collapses a nested object by default, hiding its keys and showing {n} until the row is clicked', () => {
+    const { getByTestId, getByText, queryByText } = render(
+      <AppDataPanel state={nestedState()} onSelectBridge={vi.fn()} />,
+    )
+    expect(queryByText('first')).toBeNull()
+    expect(getByTestId('appdata-tree').textContent).toContain('{2}')
+
+    fireEvent.click(getByText('obj'))
+
+    expect(getByText('first')).toBeTruthy()
+    expect(getByText('second')).toBeTruthy()
+  })
+
+  it('collapses a nested array by default, showing [n] and revealing elements once clicked', () => {
+    const { getByTestId, getByText, queryByText } = render(
+      <AppDataPanel state={nestedState()} onSelectBridge={vi.fn()} />,
+    )
+    expect(getByTestId('appdata-tree').textContent).toContain('[4]')
+    expect(queryByText('10')).toBeNull()
+
+    fireEvent.click(getByText('list'))
+
+    expect(getByText('10')).toBeTruthy()
+  })
+})
+
+describe('AppDataPanel: toolbar expand/collapse all', () => {
+  function deepState(): AppDataState {
+    return makeState({
+      entries: {
+        b1: {
+          comp: {
+            outer: { inner: { leaf: 'value' } },
+          },
+        },
+      },
+    })
+  }
+
+  it('renders a toolbar with 全部展开/全部收起/撤销/重做 controls', () => {
+    const { getByTestId, getByTitle } = render(<AppDataPanel state={deepState()} onSelectBridge={vi.fn()} />)
+    expect(getByTestId('appdata-toolbar')).toBeTruthy()
+    expect(getByTitle('全部展开')).toBeTruthy()
+    expect(getByTitle('全部收起')).toBeTruthy()
+    expect(getByTitle('撤销')).toBeTruthy()
+    expect(getByTitle('重做')).toBeTruthy()
+  })
+
+  it('reveals every nested key when 全部展开 is clicked', () => {
+    const { getByTitle, getByText, queryByText } = render(
+      <AppDataPanel state={deepState()} onSelectBridge={vi.fn()} />,
+    )
+    expect(queryByText('leaf')).toBeNull()
+    fireEvent.click(getByTitle('全部展开'))
+    expect(getByText('leaf')).toBeTruthy()
+  })
+
+  it('hides every top-level key when 全部收起 is clicked, leaving only the root row', () => {
+    const { getByTitle, queryByText } = render(
+      <AppDataPanel state={deepState()} onSelectBridge={vi.fn()} />,
+    )
+    fireEvent.click(getByTitle('全部收起'))
+    expect(queryByText('outer')).toBeNull()
+  })
+})
+
+describe('AppDataPanel: keepalive preserves expand state across bridge switches', () => {
+  it('keeps a manually expanded node expanded after switching away and back', () => {
+    const state = makeState({
+      bridges: [
+        { id: 'b1', pagePath: '/pages/index/index' },
+        { id: 'b2', pagePath: '/pages/detail/detail' },
+      ],
+      activeBridgeId: 'b1',
+      entries: {
+        b1: { comp: { obj: { first: 1 } } },
+        b2: { comp: { count: 2 } },
+      },
+    })
+    const { container, getByText, rerender } = render(
+      <AppDataPanel state={state} onSelectBridge={vi.fn()} />,
+    )
+    const b1Tree = (container.querySelector('[data-bridge-id="b1"]') as HTMLElement)
+      .querySelector('[data-testid="appdata-tree"]') as HTMLElement
+    fireEvent.click(getByText('obj'))
+    expect(b1Tree.textContent).toContain('first')
+
+    rerender(<AppDataPanel state={{ ...state, activeBridgeId: 'b2' }} onSelectBridge={vi.fn()} />)
+    rerender(<AppDataPanel state={{ ...state, activeBridgeId: 'b1' }} onSelectBridge={vi.fn()} />)
+
+    expect(b1Tree.textContent).toContain('first')
+  })
+})

package/src/appdata-panel-view.tsx

@@ -1,34 +1,12 @@
-// The pure AppData panel view: per-page bridge tabs over cumulative setData
-// state, each component path rendered as a collapsible JSON tree. Pure
+// The pure AppData panel view, WeChat DevTools AppData layout: a Pages
+// sidebar over one merged, collapsible (and optionally editable) data tree
+// per page bridge, plus an expand/collapse/undo/redo toolbar. Pure
 // presentation — bridge selection and data feeds live in the connected
 // container (or the host, when it renders this view directly).
-import React from 'react'
-import * as jsonViewModule from '@uiw/react-json-view'
+import React, { useRef, useState } from 'react'
+import { AppDataTree, type AppDataTreeCommand } from './appdata-tree.js'
 import type { AppDataSnapshot } from './appdata-accumulator.js'
 
-// The package ships CJS-flavoured type declarations (no `"type": "module"`),
-// so what `default` types as depends on the consumer's moduleResolution:
-// under NodeNext it is the whole module.exports object with the component on
-// `.default`; under Bundler (and in vite/vitest at runtime) it IS the
-// component (a forwardRef exotic object, so a typeof-function probe can't
-// tell the shapes apart; the interop namespace is the only shape carrying a
-// `default` key). The conditional type and the `in` probe resolve the
-// component under BOTH semantics — this package typechecks under NodeNext
-// and is also typechecked from source by Bundler-resolution consumers.
-type ModuleDefault = (typeof jsonViewModule)['default']
-type JsonViewComponent = ModuleDefault extends { default: infer C } ? C : ModuleDefault
-const moduleDefault: JsonViewComponent | { default: JsonViewComponent } = jsonViewModule.default
-// A type predicate (not a bare `in` check): plain `in` narrowing intersects
-// `Record<'default', unknown>` onto the component branch, degrading the
-// conditional's type to unknown.
-function isInteropNamespace(
-  m: JsonViewComponent | { default: JsonViewComponent },
-): m is { default: JsonViewComponent } {
-  return 'default' in m
-}
-const JsonView: JsonViewComponent
-  = isInteropNamespace(moduleDefault) ? moduleDefault.default : moduleDefault
-
 /** The view's full input state: a snapshot plus which bridge tab is active. */
 export interface AppDataPanelState {
   bridges: AppDataSnapshot['bridges']
@@ -36,70 +14,233 @@ export interface AppDataPanelState {
   entries: AppDataSnapshot['entries']
 }
 
-function bridgeLabel(bridge: { id: string; pagePath: string | null }): string {
-  return bridge.pagePath ?? bridge.id
-}
-
-// Map the json-view CSS vars onto the panel's existing design tokens so the
-// component blends with both dark and light themes. CSS variables defined
-// here cascade to the json-view's internal vars (--w-rjv-*) via inline style.
-const JSON_VIEW_STYLE: React.CSSProperties = {
-  '--w-rjv-font-family': 'var(--font-family-mono)',
-  '--w-rjv-background-color': 'transparent',
-  '--w-rjv-color': 'var(--color-code-blue)',
-  '--w-rjv-key-string': 'var(--color-code-blue)',
-  '--w-rjv-line-color': 'var(--color-border-subtle)',
-  '--w-rjv-arrow-color': 'var(--color-text-secondary)',
-  '--w-rjv-info-color': 'var(--color-code-label)',
-  '--w-rjv-curlybraces-color': 'var(--color-text-secondary)',
-  '--w-rjv-brackets-color': 'var(--color-text-secondary)',
-  '--w-rjv-quotes-color': 'var(--color-code-orange)',
-  '--w-rjv-quotes-string-color': 'var(--color-code-orange)',
-  '--w-rjv-type-string-color': 'var(--color-code-orange)',
-  '--w-rjv-type-int-color': 'var(--color-code-number)',
-  '--w-rjv-type-float-color': 'var(--color-code-number)',
-  '--w-rjv-type-bigint-color': 'var(--color-code-number)',
-  '--w-rjv-type-boolean-color': 'var(--color-code-keyword)',
-  '--w-rjv-type-null-color': 'var(--color-code-keyword)',
-  '--w-rjv-type-nan-color': 'var(--color-code-keyword)',
-  '--w-rjv-type-undefined-color': 'var(--color-code-keyword)',
-  '--w-rjv-type-date-color': 'var(--color-code-label)',
-  '--w-rjv-type-url-color': 'var(--color-code-blue)',
-  fontSize: 12,
-  padding: '6px 8px',
-  wordBreak: 'break-all',
-  whiteSpace: 'pre-wrap',
-} as React.CSSProperties
-
 export interface AppDataPanelProps {
   state: AppDataPanelState
   onSelectBridge: (id: string) => void
   /** Whether the mini-program's runtime session is `running` — distinguishes "小程序未运行" from a true empty-data vacuum below. Defaults to true so callers that don't track runtime status keep the plain empty-data text. */
   isRuntimeRunning?: boolean
+  /** Write-back for tree edits (setData path syntax keys). Absent → the tree
+   * renders read-only: no checkboxes, double-click is inert. The return value
+   * reports whether the write was dispatched to a live runtime: `false` (sync
+   * or resolved) rejects the edit — the undo/redo stacks only advance on
+   * success. `void`/`undefined` counts as success (fire-and-forget hosts). */
+  onSetData?: (bridgeId: string, patch: Record<string, unknown>) => void | boolean | Promise<boolean>
+}
+
+function bridgeLabel(bridge: { id: string; pagePath: string | null }): string {
+  return bridge.pagePath ?? bridge.id
+}
+
+function isThenable(v: unknown): v is PromiseLike<boolean> {
+  return v != null && (typeof v === 'object' || typeof v === 'function')
+    && typeof (v as { then?: unknown }).then === 'function'
+}
+
+/** One page's merged state: its component entries shallow-merged in insertion
+ * order (later entries win) — the single root object the tree renders. Copies
+ * via defineProperty, NOT Object.assign: an own enumerable `__proto__` data
+ * key (JSON.parse can produce one) would trigger the legacy setter under
+ * [[Set]], silently rebasing the merged object's prototype and dropping the
+ * key from the tree. */
+function mergeEntries(bridgeEntries: Record<string, unknown>): Record<string, unknown> {
+  const merged: Record<string, unknown> = {}
+  for (const key of Object.keys(bridgeEntries)) {
+    const data = bridgeEntries[key]
+    if (!data || typeof data !== 'object') continue
+    for (const dataKey of Object.keys(data)) {
+      Object.defineProperty(merged, dataKey, {
+        value: (data as Record<string, unknown>)[dataKey],
+        enumerable: true,
+        writable: true,
+        configurable: true,
+      })
+    }
+  }
+  return merged
+}
+
+/** One committed edit — enough to replay in either direction. The stack lives
+ * on the panel (not per tree) so undo keeps working after a page switch. */
+interface EditRecord {
+  bridgeId: string
+  path: string
+  before: unknown
+  after: unknown
+}
+
+function ToolbarButton({ title, disabled, onClick, children }: {
+  title: string
+  disabled?: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      className="px-1.5 py-0.5 text-[12px] rounded text-text-secondary hover:bg-surface-3 hover:text-text-primary disabled:opacity-40 disabled:hover:bg-transparent"
+    >
+      {children}
+    </button>
+  )
 }
 
 export function AppDataPanel({
   state,
   onSelectBridge,
   isRuntimeRunning = true,
+  onSetData,
 }: AppDataPanelProps) {
   const { bridges, activeBridgeId, entries } = state
+  const [command, setCommand] = useState<AppDataTreeCommand | null>(null)
+  const [undoStack, setUndoStack] = useState<EditRecord[]>([])
+  const [redoStack, setRedoStack] = useState<EditRecord[]>([])
+  // The single write gate: at most ONE write (commit OR replay) is ever in
+  // flight. The ref blocks reentry synchronously — a concurrent replay would
+  // move the same record twice, a concurrent commit would settle out of
+  // action order (undo then reverts the wrong field) or resurrect a redo
+  // branch the commit just invalidated. The panel has no local echo, so a
+  // gated-away click is a clean no-op. The state mirror disables the
+  // undo/redo buttons while pending.
+  const writeInFlight = useRef(false)
+  const [writePending, setWritePending] = useState(false)
+
+  const emptyText = isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行'
+
+  const issueCommand = (mode: AppDataTreeCommand['mode']): void => {
+    if (!activeBridgeId) return
+    setCommand({ seq: (command?.seq ?? 0) + 1, mode, bridgeId: activeBridgeId })
+  }
+
+  /** Dispatch a write, then run `apply` with its acceptance: only an explicit
+   * `false` (sync or resolved) is a rejection — `void` keeps fire-and-forget
+   * hosts working. A synchronous result settles synchronously so the stacks
+   * (and their buttons) update in the same event turn as the click. A thrown
+   * error or rejected promise (IPC torn down mid-edit) settles as a rejection
+   * instead of escaping as an unhandled rejection. */
+  const dispatch = (
+    bridgeId: string,
+    patch: Record<string, unknown>,
+    apply: (ok: boolean) => void,
+  ): void => {
+    let result: void | boolean | Promise<boolean>
+    try {
+      result = onSetData?.(bridgeId, patch)
+    } catch {
+      apply(false)
+      return
+    }
+    // Duck-typed, not `instanceof Promise`: a cross-realm promise or plain
+    // thenable is still an ASYNC result — treating it as a sync truthy value
+    // would count it as an instant success and release the write gate early.
+    if (isThenable(result)) {
+      void Promise.resolve(result).then(v => v !== false, () => false).then(apply)
+      return
+    }
+    apply(result !== false)
+  }
+
+  /** The only entry to `dispatch` — every write (commit and replay) passes
+   * through the gate so a second write can never start while one is pending. */
+  const performWrite = (
+    bridgeId: string,
+    patch: Record<string, unknown>,
+    apply: (ok: boolean) => void,
+  ): void => {
+    if (writeInFlight.current) return
+    writeInFlight.current = true
+    setWritePending(true)
+    dispatch(bridgeId, patch, (ok) => {
+      writeInFlight.current = false
+      setWritePending(false)
+      apply(ok)
+    })
+  }
+
+  const commitEdit = (bridgeId: string) => (path: string, next: unknown, prev: unknown): void => {
+    performWrite(bridgeId, { [path]: next }, (ok) => {
+      if (!ok) return
+      setUndoStack(stack => [...stack, { bridgeId, path, before: prev, after: next }])
+      setRedoStack([])
+    })
+  }
+
+  const bridgeIsLive = (bridgeId: string): boolean => bridges.some(b => b.id === bridgeId)
+
+  /** Replay one record in either direction through the shared write gate. */
+  const replay = (
+    record: EditRecord,
+    value: unknown,
+    move: (record: EditRecord) => void,
+  ): void => {
+    performWrite(record.bridgeId, { [record.path]: value }, (ok) => {
+      // A rejected replay (runtime refused the write) leaves both stacks
+      // untouched so the UI state never claims an undo that didn't happen.
+      if (!ok) return
+      move(record)
+    })
+  }
+
+  const undo = (): void => {
+    const record = undoStack.at(-1)
+    if (!record) return
+    if (!bridgeIsLive(record.bridgeId)) {
+      // The page this edit targeted is gone — replaying it can only write into
+      // the void. Drop the record without dispatching.
+      setUndoStack(stack => stack.filter(r => r !== record))
+      return
+    }
+    replay(record, record.before, (r) => {
+      setUndoStack(stack => stack.filter(item => item !== r))
+      setRedoStack(stack => [...stack, r])
+    })
+  }
+
+  const redo = (): void => {
+    const record = redoStack.at(-1)
+    if (!record) return
+    if (!bridgeIsLive(record.bridgeId)) {
+      setRedoStack(stack => stack.filter(r => r !== record))
+      return
+    }
+    replay(record, record.after, (r) => {
+      setRedoStack(stack => stack.filter(item => item !== r))
+      setUndoStack(stack => [...stack, r])
+    })
+  }
+
+  if (bridges.length === 0) {
+    return (
+      <div className="flex flex-col overflow-hidden flex-1" data-testid="appdata-panel">
+        <div className="text-[12px] text-text-dim text-center px-4 py-6">{emptyText}</div>
+      </div>
+    )
+  }
+
   return (
-    <div className="flex flex-col overflow-hidden flex-1" data-testid="appdata-panel">
-      {bridges.length > 1 && (
-        <div className="flex gap-1 px-2 py-1 border-b border-border-subtle shrink-0 overflow-x-auto bg-bg-panel">
+    <div className="flex overflow-hidden flex-1" data-testid="appdata-panel">
+      <div
+        data-testid="appdata-pages"
+        className="w-40 shrink-0 border-r border-border-subtle bg-bg-panel flex flex-col overflow-hidden"
+      >
+        <div className="px-2 py-1 text-[11px] text-text-secondary border-b border-border-subtle shrink-0">
+          Pages
+        </div>
+        <div className="flex-1 overflow-y-auto" role="listbox">
           {bridges.map((b) => {
             const isActive = b.id === activeBridgeId
             return (
               <button
                 key={b.id}
-                onClick={() => onSelectBridge(b.id)}
+                data-testid="appdata-page-item"
+                role="option"
+                aria-selected={isActive}
                 title={b.id}
+                onClick={() => onSelectBridge(b.id)}
                 className={
-                  'shrink-0 px-2 py-0.5 text-[11px] rounded border transition-colors '
-                  + (isActive
-                    ? 'border-accent text-accent bg-surface-3'
-                    : 'border-border-subtle text-text-dim hover:border-accent hover:text-accent')
+                  'block w-full text-left px-2 py-1 text-[11px] truncate '
+                  + (isActive ? 'bg-accent/20 text-accent' : 'text-text-dim hover:bg-surface-3')
                 }
               >
                 {bridgeLabel(b)}
@@ -107,59 +248,48 @@ export function AppDataPanel({
             )
           })}
         </div>
-      )}
-      {bridges.length === 0 ? (
-        <div className="text-[12px] text-text-dim text-center px-4 py-6">
-          {isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行'}
+      </div>
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div
+          data-testid="appdata-toolbar"
+          className="flex items-center gap-1 px-2 py-0.5 border-b border-border-subtle shrink-0 bg-bg-panel"
+        >
+          <ToolbarButton title="全部展开" onClick={() => issueCommand('expanded')}>⊕</ToolbarButton>
+          <ToolbarButton title="全部收起" onClick={() => issueCommand('collapsed')}>⊖</ToolbarButton>
+          <ToolbarButton title="撤销" disabled={undoStack.length === 0 || writePending} onClick={undo}>↶</ToolbarButton>
+          <ToolbarButton title="重做" disabled={redoStack.length === 0 || writePending} onClick={redo}>↷</ToolbarButton>
         </div>
-      ) : (
-        // A bridge with zero entries still gets its keepalive container (with
-        // the per-bridge empty text) so live pushes land in a mounted tab.
-        // Keepalive: render every bridge's entries; hide non-active ones via
-        // `display: none` so the JsonView instances stay mounted and preserve
-        // their expand/collapse state across tab switches.
+        {/* Keepalive: every bridge's tree stays mounted (hidden via display:
+            none) so expand/collapse state survives page switches. */}
         <div className="flex-1 overflow-hidden relative">
           {bridges.map((b) => {
             const isActive = b.id === activeBridgeId
             const bridgeEntries = entries[b.id] ?? {}
-            const keys = Object.keys(bridgeEntries)
+            const hasData = Object.keys(bridgeEntries).length > 0
             return (
               <div
                 key={b.id}
                 data-bridge-id={b.id}
-                className="absolute inset-0 flex flex-col gap-2 p-2 overflow-y-auto"
+                className="absolute inset-0 flex-col overflow-y-auto"
                 style={{ display: isActive ? 'flex' : 'none' }}
               >
-                {keys.length === 0 ? (
-                  <div className="text-[12px] text-text-dim text-center px-4 py-6">
-                    {isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行'}
-                  </div>
-                ) : (
-                  keys.map((comp) => (
-                    <div
-                      key={`${b.id}::${comp}`}
-                      className="border border-border-subtle rounded overflow-hidden shrink-0"
-                    >
-                      <div className="bg-surface-3 px-2 py-0.5 text-[11px] text-code-label truncate">
-                        {comp}
-                      </div>
-                      <JsonView
-                        value={(bridgeEntries[comp] ?? {}) as object}
-                        collapsed={1}
-                        displayDataTypes={false}
-                        displayObjectSize={false}
-                        enableClipboard={false}
-                        indentWidth={12}
-                        style={JSON_VIEW_STYLE}
+                {hasData
+                  ? (
+                      <AppDataTree
+                        root={mergeEntries(bridgeEntries)}
+                        bridgeId={b.id}
+                        command={command}
+                        onCommit={onSetData ? commitEdit(b.id) : undefined}
                       />
-                    </div>
-                  ))
-                )}
+                    )
+                  : (
+                      <div className="text-[12px] text-text-dim text-center px-4 py-6">{emptyText}</div>
+                    )}
               </div>
             )
           })}
         </div>
-      )}
+      </div>
     </div>
   )
 }

package/src/appdata-source.ts

@@ -15,4 +15,9 @@ export interface AppDataPanelSource {
   /** Visibility gate: hosts whose feed costs something (listeners, walks)
    * only keep it armed while some panel is visible. */
   setActive(on: boolean): void
+  /** Write an edit back into the running page (`page.setData(patch)`); patch
+   * keys use setData path syntax (`a.b`, `list[0].id`). Resolves true when the
+   * write was dispatched to a live runtime. Absent → the host has no
+   * write-back channel and the panel renders read-only. */
+  setData?: (bridgeId: string, patch: Record<string, unknown>) => Promise<boolean>
 }