@dimina-kit/inspect 0.3.0 → 0.4.0-dev.20260716153350

package/README.md

@@ -1,15 +1,18 @@
 # @dimina-kit/inspect
 
 Host-agnostic runtime inspection for dimina mini-programs: WXML tree
-extraction and Storage inspection. One package owns the protocol types, the
-pure logic (Vue-runtime walk, stable-id registry, mutation-observing
-inspector, storage-event reduction), the React panels, and the panels' data
-wiring — so the Electron devtools and any downstream host (browser workbench,
-preview iframe) share a single implementation and stay wire-compatible.
+extraction, Storage inspection, AppData (page `setData` state) and the 编译
+(compile) timeline. One package owns the protocol types, the pure logic
+(Vue-runtime walk, stable-id registry, mutation-observing inspector,
+storage-event reduction, setData accumulation), the React panels, and the
+panels' data wiring — so the Electron devtools and any downstream host
+(browser workbench, preview iframe) share a single implementation and stay
+wire-compatible.
 
 ## Entry points
 
-- `@dimina-kit/inspect` — core, zero runtime dependencies:
+- `@dimina-kit/inspect` — core (no runtime dependencies; the JSON tree viewer
+  is pulled in by the `/panel` entry only):
   - `WxmlNode` / `ElementInspection` — the wire-format types. Hosts transport
     them over IPC, `postMessage` or anything else.
   - `walkInstance(instance, depth)` — walks a mounted dimina render-layer Vue
@@ -24,14 +27,26 @@ preview iframe) share a single implementation and stay wire-compatible.
   - `StorageItem` / `StorageEvent` / `StorageWriteResult` — the Storage
     wire-format types, plus `applyStorageEvent(items, evt)`, the pure
     reducer that folds a change feed into an item list.
+  - `AppDataAccumulator` + `decodeWorkerMessage` / `decodeOutgoingMessage` /
+    `decodedToInput` — the cumulative per-(bridge, module) `setData` state
+    behind the AppData panel. Hosts tap the dimina service→render message
+    stream wherever they can reach it (an Electron preload sniffing Worker
+    `message` events, a same-origin workbench observing the pageFrame's
+    Worker) and feed this one accumulator, so the decode/merge/page-only
+    policy can't drift between hosts. `AppDataSnapshot` is the wire format.
+  - `CompileEvent` / `CompileLogEntry` — the 编译 panel's two feed item
+    shapes (status transitions and per-line compiler output).
 - `@dimina-kit/inspect/panel` — the React layer (React ≥ 18 peer):
-  - `WxmlPanel` / `StoragePanel` — the pure views (props in, no data wiring).
-  - `ConnectedWxmlPanel` / `ConnectedStoragePanel` — the panels' data wiring,
-    written once against their source contracts: seed on the
-    (enabled && active) rising edge, live updates via the push subscription,
-    visibility gating, hover inspection (WXML) / write forwarding (Storage).
-    Hosts render them with their source implementation and never duplicate
-    the wiring.
+  - `WxmlPanel` / `StoragePanel` / `AppDataPanel` / `CompilePanel` — the pure
+    views (props in, no data wiring).
+  - `ConnectedWxmlPanel` / `ConnectedStoragePanel` / `ConnectedAppDataPanel` /
+    `ConnectedCompilePanel` — the panels' data wiring, written once against
+    their source contracts: seed on the (enabled && active) rising edge, live
+    updates via the push subscription, visibility gating, plus the
+    panel-specific parts — hover inspection (WXML), write forwarding
+    (Storage), bridge-tab auto-follow of the active page (AppData), FIFO caps
+    and arrival-order `seq` stamping (编译). Hosts render them with their
+    source implementation and never duplicate the wiring.
   - Styling uses Tailwind utility classes over CSS variables
     (`--color-code-blue`, `--color-surface-2`, …); the consuming app provides
     the Tailwind theme mapping and variable values, and must include this
@@ -45,6 +60,15 @@ preview iframe) share a single implementation and stay wire-compatible.
   `clear` / `clearAll?` / `getPrefix`. `clearAll` is optional — hosts whose
   storage partition is shared with non-mini-program data must omit it, and
   the panel then hides the origin-wide wipe entirely.
+- `AppDataPanelSource` (main entry, type-only) — the AppData counterpart:
+  `getSnapshot` / `subscribe` / `setActive`. Pushes carry the FULL cumulative
+  `AppDataSnapshot` (merging patches is the producer-side accumulator's job).
+- `CompilePanelSource` (main entry, type-only) — the 编译 counterpart:
+  `getSnapshot` / `subscribe` / `setActive` / `clear?`. The subscription
+  pushes `CompileFeedEvent`s (`event` / `log` appends or a host-side
+  `reset`); the connected panel owns the FIFO caps (200 events / 300 logs)
+  and stamps a shared monotonic `seq` onto unstamped arrivals so same-`at`
+  ties keep arrival order in the merged timeline.
 
 ## Contract notes
 

package/dist/appdata-accumulator.js

@@ -0,0 +1,218 @@
+/**
+ * Framework-agnostic AppData accumulator.
+ *
+ * The dimina runtime emits two service→render messages relevant to the AppData
+ * panel, identical in shape on BOTH container paths:
+ *   • update batches `{type:'ub', body:{bridgeId, updates:[{moduleId,data}]}}`
+ *     — each `data` is a partial setData patch.
+ *   • instance init: `type === 'page_*'`, body `{bridgeId, path, data}` with the
+ *     COMPLETE initial state.
+ *
+ * Hosts differ only in where they tap that stream — an Electron preload
+ * sniffing Worker `message` events, a main-process service→render forward, or
+ * a same-origin web workbench observing the pageFrame's Worker. Every tap
+ * feeds this one accumulator so the decode/merge/page-only/init-gate policy
+ * can't drift between hosts.
+ */
+/** Parse a service/worker message payload; a non-string is passed through as-is. */
+function parseMessagePayload(message) {
+    if (typeof message !== 'string')
+        return message;
+    try {
+        return JSON.parse(message);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Decode a `ub` (update batch) body into patch entries, PAGE modules only —
+ * component-module updates are dropped (see `decodeWorkerMessage`).
+ */
+function decodeUpdateBatchBody(rawBody) {
+    const body = rawBody;
+    if (!body || typeof body !== 'object')
+        return null;
+    if (typeof body.bridgeId !== 'string' || !Array.isArray(body.updates))
+        return null;
+    const out = [];
+    for (const u of body.updates) {
+        if (!u || typeof u.moduleId !== 'string')
+            continue;
+        if (!u.moduleId.startsWith('page_'))
+            continue;
+        out.push({ mode: 'patch', bridgeId: body.bridgeId, moduleId: u.moduleId, data: u.data });
+    }
+    return out.length > 0 ? out : null;
+}
+/** Decode a `page_*` instance-init body into its single init entry. */
+function decodePageInitBody(moduleId, rawBody) {
+    const body = rawBody;
+    if (!body || typeof body !== 'object')
+        return null;
+    if (typeof body.bridgeId !== 'string' || typeof body.path !== 'string')
+        return null;
+    if (!body.data || typeof body.data !== 'object')
+        return null;
+    return [{
+            mode: 'init',
+            bridgeId: body.bridgeId,
+            moduleId,
+            componentPath: body.path,
+            data: body.data,
+        }];
+}
+/**
+ * Decode a service→render message into AppData entries, or null when it is not
+ * AppData-relevant. Policy: surface PAGE entries only — component entries are
+ * dropped (they sometimes flow on a bridge id distinct from their owning page's
+ * and never receive pageUnload, which would manifest as ghost tabs).
+ */
+export function decodeWorkerMessage(message) {
+    const payload = parseMessagePayload(message);
+    if (!payload || typeof payload !== 'object')
+        return null;
+    const record = payload;
+    if (record.type === 'ub')
+        return decodeUpdateBatchBody(record.body);
+    if (typeof record.type === 'string' && record.type.startsWith('page_')) {
+        return decodePageInitBody(record.type, record.body);
+    }
+    return null;
+}
+/** main→worker direction: container signals page teardown so cache can evict. */
+export function decodeOutgoingMessage(message) {
+    const payload = parseMessagePayload(message);
+    if (!payload || typeof payload !== 'object')
+        return null;
+    const r = payload;
+    if (typeof r.type !== 'string')
+        return null;
+    return {
+        type: r.type,
+        bridgeId: typeof r.body?.bridgeId === 'string' ? r.body.bridgeId : undefined,
+    };
+}
+/** Convert a decoded entry to the normalized accumulator input. */
+export function decodedToInput(entry) {
+    const input = {
+        bridgeId: entry.bridgeId,
+        moduleId: entry.moduleId,
+        data: entry.data,
+        mode: entry.mode,
+    };
+    if (entry.mode === 'init')
+        input.componentPath = entry.componentPath;
+    return input;
+}
+/**
+ * Cumulative per-(bridgeId, moduleId) setData state. Pure data structure — no
+ * Worker / IPC / DOM. Callers own transport (publish/emit) and the automation
+ * mirror.
+ */
+export class AppDataAccumulator {
+    cache = new Map();
+    // Bridges in insertion order — drives the `bridges` array (stable tab order).
+    bridgeOrder = [];
+    // Page path per bridge: set from `page_*` init's body.path (the page route).
+    bridgePagePath = new Map();
+    recordBridge(bridgeId) {
+        if (!this.bridgeOrder.includes(bridgeId))
+            this.bridgeOrder.push(bridgeId);
+    }
+    /**
+     * Apply one entry. Returns true if it was accepted (a mutation worth
+     * republishing), false if dropped (missing ids, or the init-gate).
+     */
+    apply(input) {
+        if (!input.bridgeId || !input.moduleId)
+            return false;
+        // Drop ub patches whose bridge has never been initialised. dimina
+        // dispatches pageUnload → onUnload, whose setData produces a late `ub`
+        // arriving AFTER clearBridge; without this gate it would resurrect the
+        // unloaded bridge as a ghost tab.
+        if (input.mode !== 'init' && !this.bridgePagePath.has(input.bridgeId))
+            return false;
+        const key = `${input.bridgeId}/${input.moduleId}`;
+        const prev = this.cache.get(key);
+        const incoming = input.data && typeof input.data === 'object'
+            ? input.data
+            : {};
+        // init = full-state replace; patch = merge into previous (setData semantics)
+        const merged = input.mode === 'init'
+            ? { ...incoming }
+            : { ...(prev?.data ?? {}), ...incoming };
+        const componentPath = input.componentPath ?? prev?.componentPath;
+        const next = componentPath !== undefined
+            ? { componentPath, data: merged }
+            : { data: merged };
+        this.cache.set(key, next);
+        this.recordBridge(input.bridgeId);
+        if (input.mode === 'init' && input.moduleId.startsWith('page_') && input.componentPath) {
+            this.bridgePagePath.set(input.bridgeId, input.componentPath);
+        }
+        return true;
+    }
+    /** Evict every entry for a bridge (page teardown). */
+    clearBridge(bridgeId) {
+        const prefix = `${bridgeId}/`;
+        for (const key of [...this.cache.keys()]) {
+            if (key.startsWith(prefix))
+                this.cache.delete(key);
+        }
+        const idx = this.bridgeOrder.indexOf(bridgeId);
+        if (idx >= 0)
+            this.bridgeOrder.splice(idx, 1);
+        this.bridgePagePath.delete(bridgeId);
+    }
+    /** The full cumulative snapshot for the panel. */
+    snapshot() {
+        const bridges = [];
+        for (const id of this.bridgeOrder) {
+            bridges.push({ id, pagePath: this.bridgePagePath.get(id) ?? null });
+        }
+        const entries = {};
+        for (const [key, entry] of this.cache) {
+            const slash = key.indexOf('/');
+            if (slash < 0)
+                continue;
+            const bridgeId = key.slice(0, slash);
+            const moduleId = key.slice(slash + 1);
+            if (!entries[bridgeId])
+                entries[bridgeId] = {};
+            const displayKey = entry.componentPath ?? moduleId;
+            entries[bridgeId][displayKey] = entry.data;
+        }
+        return { bridges, entries };
+    }
+    /**
+     * The current reactive page state for a bridge: shallow-merge of `entry.data`
+     * across every cache entry whose key starts with `${bridgeId}/`, in insertion
+     * order (later entries win on key conflicts). `{}` when no entries match
+     * (unknown bridge / after clearBridge). Pure, no side effects.
+     */
+    pageData(bridgeId) {
+        const merged = {};
+        for (const [key, entry] of this.cache) {
+            const slash = key.indexOf('/');
+            if (slash < 0)
+                continue;
+            if (key.slice(0, slash) !== bridgeId)
+                continue;
+            Object.assign(merged, entry.data);
+        }
+        return merged;
+    }
+    /** Flat `key → data` map for the `__simulatorData.getAppdata()` mirror. */
+    flat() {
+        const data = {};
+        for (const [key, entry] of this.cache)
+            data[key] = entry.data;
+        return data;
+    }
+    clear() {
+        this.cache.clear();
+        this.bridgeOrder.length = 0;
+        this.bridgePagePath.clear();
+    }
+}

package/dist/appdata-panel-view.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as jsonViewModule from '@uiw/react-json-view';
+const moduleDefault = 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) {
+    return 'default' in m;
+}
+const JsonView = isInteropNamespace(moduleDefault) ? moduleDefault.default : moduleDefault;
+function bridgeLabel(bridge) {
+    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 = {
+    '--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',
+};
+export function AppDataPanel({ state, onSelectBridge, isRuntimeRunning = true, }) {
+    const { bridges, activeBridgeId, entries } = state;
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden flex-1", "data-testid": "appdata-panel", children: [bridges.length > 1 && (_jsx("div", { className: "flex gap-1 px-2 py-1 border-b border-border-subtle shrink-0 overflow-x-auto bg-bg-panel", children: bridges.map((b) => {
+                    const isActive = b.id === activeBridgeId;
+                    return (_jsx("button", { onClick: () => onSelectBridge(b.id), title: 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'), children: bridgeLabel(b) }, b.id));
+                }) })), bridges.length === 0 ? (_jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: isRuntimeRunning ? '暂无页面数据（仅显示 Page 级 data）' : '小程序未运行' })) : (
+            // 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.
+            _jsx("div", { className: "flex-1 overflow-hidden relative", children: bridges.map((b) => {
+                    const isActive = b.id === activeBridgeId;
+                    const bridgeEntries = entries[b.id] ?? {};
+                    const keys = Object.keys(bridgeEntries);
+                    return (_jsx("div", { "data-bridge-id": b.id, className: "absolute inset-0 flex flex-col gap-2 p-2 overflow-y-auto", style: { display: isActive ? 'flex' : 'none' }, children: keys.length === 0 ? (_jsx("div", { className: "text-[12px] text-text-dim text-center px-4 py-6", children: "\u6682\u65E0\u9875\u9762\u6570\u636E\uFF08\u4EC5\u663E\u793A Page \u7EA7 data\uFF09" })) : (keys.map((comp) => (_jsxs("div", { className: "border border-border-subtle rounded overflow-hidden shrink-0", children: [_jsx("div", { className: "bg-surface-3 px-2 py-0.5 text-[11px] text-code-label truncate", children: comp }), _jsx(JsonView, { value: (bridgeEntries[comp] ?? {}), collapsed: 1, displayDataTypes: false, displayObjectSize: false, enableClipboard: false, indentWidth: 12, style: JSON_VIEW_STYLE })] }, `${b.id}::${comp}`)))) }, b.id));
+                }) }))] }));
+}

package/dist/appdata-source.js

@@ -0,0 +1 @@
+export {};

package/dist/compile-panel-view.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The pure 编译 panel view: the host's compile-status events and per-line
+// compiler log merged — in the VIEW layer only — into one oldest-first
+// (chronological) timeline with a text filter. Pure presentation — feed
+// state lives in the connected container (or the host, when it renders this
+// view directly).
+import { useEffect, useMemo, useRef, useState } from 'react';
+/** Join the truthy class fragments (the panel's only class-composition need). */
+function cn(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function formatTime(at) {
+    const d = new Date(at);
+    return [d.getHours(), d.getMinutes(), d.getSeconds()]
+        .map((n) => String(n).padStart(2, '0'))
+        .join(':');
+}
+/** Status → row/badge accent. Unknown statuses fall back to muted text. */
+function statusClass(status) {
+    if (status === 'error')
+        return 'text-red-500';
+    if (status === 'compiling')
+        return 'text-amber-500';
+    if (status === 'ready')
+        return 'text-emerald-600';
+    return 'text-text-muted';
+}
+/** Extract the display text from a timeline item for filter matching. */
+function itemText(item) {
+    return item.kind === 'event' ? item.event.message : item.log.text;
+}
+export function CompilePanel({ events, logs = [], onClear }) {
+    const latest = events.length > 0 ? events[events.length - 1] : null;
+    const [filter, setFilter] = useState('');
+    const scrollRef = useRef(null);
+    const bottomRef = useRef(null);
+    const shouldAutoScroll = useRef(true);
+    // Track whether the user has scrolled away from the bottom.
+    useEffect(() => {
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            shouldAutoScroll.current = scrollHeight - scrollTop - clientHeight < 20;
+        };
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, []);
+    const totalItems = events.length + logs.length;
+    // Auto-scroll to bottom when new items arrive. Optional-call: jsdom-class
+    // environments don't implement scrollIntoView.
+    useEffect(() => {
+        if (shouldAutoScroll.current) {
+            bottomRef.current?.scrollIntoView?.({ behavior: 'auto' });
+        }
+    }, [totalItems]);
+    const timeline = useMemo(() => {
+        const items = [];
+        events.forEach((event, index) => {
+            // Duration pairs strictly with the IMMEDIATELY preceding event: a
+            // ready right after a compiling shows the elapsed compile time; any
+            // intervening event (e.g. an error) breaks the pair.
+            const previous = index > 0 ? events[index - 1] : null;
+            const durationMs = event.status === 'ready' && previous?.status === 'compiling'
+                ? event.at - previous.at
+                : null;
+            items.push({ kind: 'event', at: event.at, seq: event.seq, event, durationMs });
+        });
+        for (const log of logs) {
+            items.push({ kind: 'log', at: log.at, seq: log.seq, log });
+        }
+        // Oldest first (chronological). Within a same-`at` tie (millisecond
+        // stamps — an event and the logs of the same compile collide routinely)
+        // the shared monotonic `seq` keeps ARRIVAL order.
+        return items.sort((a, b) => {
+            if (a.at !== b.at)
+                return a.at - b.at;
+            if (a.seq !== undefined && b.seq !== undefined)
+                return a.seq - b.seq;
+            return 0;
+        });
+    }, [events, logs]);
+    const filtered = useMemo(() => {
+        if (!filter)
+            return timeline;
+        const lower = filter.toLowerCase();
+        return timeline.filter((item) => itemText(item).toLowerCase().includes(lower));
+    }, [timeline, filter]);
+    const isEmpty = events.length === 0 && logs.length === 0;
+    return (_jsxs("div", { className: "flex flex-col h-full w-full min-h-0 text-[12px]", children: [_jsxs("div", { className: "flex items-center gap-2 px-2 h-8 shrink-0 border-b border-border-subtle", children: [latest ? (_jsx("span", { "data-compile-current": true, "data-status": latest.status, className: cn('truncate font-medium shrink-0', statusClass(latest.status)), children: latest.message })) : (_jsx("span", { className: "text-text-muted shrink-0", children: "\u7F16\u8BD1\u4FE1\u606F" })), _jsx("div", { className: "flex-1 min-w-0" }), _jsx("input", { type: "text", value: filter, onChange: (e) => setFilter(e.target.value), placeholder: "\u8FC7\u6EE4...", className: "h-6 px-2 text-[12px] rounded-sm border border-border-subtle bg-surface\n                     text-text placeholder:text-text-dim\n                     focus:outline-none focus:border-text-muted\n                     w-40 shrink-0" }), filter && (_jsxs("span", { className: "text-[11px] text-text-muted tabular-nums shrink-0", children: [filtered.length, "/", timeline.length] })), _jsx("button", { type: "button", onClick: onClear, className: "px-2 h-6 rounded-sm text-text-muted hover:text-text hover:bg-surface-2 transition-colors shrink-0", children: "\u6E05\u7A7A" })] }), _jsx("div", { ref: scrollRef, className: "flex-1 min-h-0 overflow-auto", children: isEmpty ? (_jsx("div", { className: "flex items-center justify-center h-full text-text-muted", children: "\u6682\u65E0\u7F16\u8BD1\u4FE1\u606F" })) : filtered.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full text-text-muted", children: "\u65E0\u5339\u914D\u65E5\u5FD7" })) : (_jsxs("ul", { className: "px-2 py-1 space-y-0.5", children: [filtered.map((item, index) => item.kind === 'event' ? (_jsxs("li", { "data-compile-row": true, "data-status": item.event.status, className: "flex items-baseline gap-2 leading-5", children: [_jsx("span", { className: "text-text-muted tabular-nums shrink-0", children: formatTime(item.at) }), _jsx("span", { className: cn('break-all', statusClass(item.event.status)), children: item.event.message }), item.event.hotReload === true && (_jsx("span", { className: "shrink-0 px-1 rounded-sm bg-surface-2 text-text-muted", children: "\u5DF2\u91CD\u542F" })), item.durationMs !== null && (_jsxs("span", { "data-compile-duration": true, className: "shrink-0 text-text-muted tabular-nums", children: [(item.durationMs / 1000).toFixed(1), "s"] }))] }, `e-${item.at}-${index}`)) : (_jsxs("li", { "data-compile-log": true, "data-stream": item.log.stream, className: "flex items-baseline gap-2 leading-5", children: [_jsx("span", { className: "text-text-muted tabular-nums shrink-0", children: formatTime(item.at) }), _jsx("span", { className: cn('break-all font-mono', item.log.stream === 'stderr' ? 'text-red-500' : 'text-text'), children: item.log.text })] }, `l-${item.at}-${index}`))), _jsx("div", { ref: bottomRef })] })) })] }));
+}

package/dist/compile-source.js

@@ -0,0 +1 @@
+export {};

package/dist/compile-types.js

@@ -0,0 +1,4 @@
+// The compile panel's two feed item shapes. The stores never cross: status
+// events come from the host's compile-status feed, per-line compiler output
+// lands in the log feed — merging them is a view concern.
+export {};

package/dist/connected-appdata-panel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The AppData panel's data wiring, written once against AppDataPanelSource:
+// seed on the (enabled && active) rising edge, stay live by replacing state
+// with each pushed full snapshot, forward the visibility gate, and own the
+// bridge-tab selection (auto-follow of the simulator's active page + manual
+// picks). Hosts render this with their transport implementation (Electron
+// IPC, a same-origin Worker tap, …) and the pure AppDataPanel view underneath
+// never needs host-specific code.
+import { useState } from 'react';
+import { AppDataPanel } from './appdata-panel-view.js';
+import { useActiveBridgeId } from './use-active-bridge-id.js';
+import { useSourceWiring } from './use-source-wiring.js';
+const EMPTY_SNAPSHOT = { bridges: [], entries: {} };
+export function ConnectedAppDataPanel({ source, active = true, enabled = true, isRuntimeRunning = true, activePagePath = '', }) {
+    const [snapshot, setSnapshot] = useState(EMPTY_SNAPSHOT);
+    useSourceWiring({
+        source,
+        enabled,
+        active,
+        subscribe: s => s.subscribe((next) => {
+            setSnapshot(next);
+        }),
+        seed: (s, isDisposed) => {
+            void s.getSnapshot().then((next) => {
+                if (!isDisposed())
+                    setSnapshot(next);
+            });
+        },
+    });
+    const { activeBridgeId, setActiveBridge } = useActiveBridgeId(snapshot.bridges, activePagePath);
+    return (_jsx(AppDataPanel, { state: { bridges: snapshot.bridges, activeBridgeId, entries: snapshot.entries }, onSelectBridge: setActiveBridge, isRuntimeRunning: isRuntimeRunning }));
+}

package/dist/connected-compile-panel.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The 编译 panel's data wiring, written once against CompilePanelSource: seed
+// on the (enabled && active) rising edge, stay live by appending pushed
+// events/logs under FIFO caps, stamp a shared monotonic `seq` onto unstamped
+// arrivals (the merged timeline's same-`at` tie-break), forward the
+// visibility gate, and route 清空. Hosts render this with their transport
+// implementation and the pure CompilePanel view underneath never needs
+// host-specific code.
+import { useRef, useState } from 'react';
+import { CompilePanel } from './compile-panel-view.js';
+import { useSourceWiring } from './use-source-wiring.js';
+/** events cap — FIFO, oldest evicted first. */
+const MAX_COMPILE_EVENTS = 200;
+/** logs cap — FIFO, oldest evicted first. */
+const MAX_COMPILE_LOGS = 300;
+const EMPTY_FEED = { events: [], logs: [] };
+export function ConnectedCompilePanel({ source, active = true, enabled = true, }) {
+    const [feed, setFeed] = useState(EMPTY_FEED);
+    // The shared arrival counter behind `seq` stamping. Ratcheted past every
+    // explicit seq seen so a locally stamped item can never undercut one the
+    // host stamped itself (which would silently reverse arrival order on a
+    // same-`at` tie).
+    const nextSeq = useRef(0);
+    const stamp = (item) => {
+        if (item.seq !== undefined) {
+            nextSeq.current = Math.max(nextSeq.current, item.seq + 1);
+            return item;
+        }
+        return { ...item, seq: nextSeq.current++ };
+    };
+    useSourceWiring({
+        source,
+        enabled,
+        active,
+        subscribe: s => s.subscribe((evt) => {
+            if (evt.kind === 'reset') {
+                setFeed(EMPTY_FEED);
+                return;
+            }
+            if (evt.kind === 'event') {
+                const event = stamp(evt.event);
+                setFeed(prev => ({
+                    ...prev,
+                    events: [...prev.events, event].slice(-MAX_COMPILE_EVENTS),
+                }));
+                return;
+            }
+            const log = stamp(evt.log);
+            setFeed(prev => ({
+                ...prev,
+                logs: [...prev.logs, log].slice(-MAX_COMPILE_LOGS),
+            }));
+        }),
+        seed: (s, isDisposed) => {
+            void s.getSnapshot().then((snap) => {
+                if (isDisposed())
+                    return;
+                setFeed({
+                    events: snap.events.map(stamp).slice(-MAX_COMPILE_EVENTS),
+                    logs: snap.logs.map(stamp).slice(-MAX_COMPILE_LOGS),
+                });
+            });
+        },
+    });
+    const handleClear = () => {
+        // The local timeline empties regardless; clearing the host-side history
+        // is the optional capability.
+        setFeed(EMPTY_FEED);
+        void source.clear?.();
+    };
+    return _jsx(CompilePanel, { events: feed.events, logs: feed.logs, onClear: handleClear });
+}

package/dist/index.js

@@ -2,3 +2,4 @@ export { SYNTHETIC_SID_PREFIX, registerSyntheticSid, findElementBySid, } from '.
 export { walkInstance } from './wxml-extract.js';
 export { createWxmlInspector, } from './inspector.js';
 export { applyStorageEvent } from './storage-reducer.js';
+export { AppDataAccumulator, decodeWorkerMessage, decodeOutgoingMessage, decodedToInput, } from './appdata-accumulator.js';

package/dist/panel.js

@@ -5,3 +5,8 @@ export { WxmlPanel } from './panel-view.js';
 export { ConnectedWxmlPanel } from './connected-panel.js';
 export { StoragePanel } from './storage-panel-view.js';
 export { ConnectedStoragePanel } from './connected-storage-panel.js';
+export { AppDataPanel } from './appdata-panel-view.js';
+export { ConnectedAppDataPanel } from './connected-appdata-panel.js';
+export { useActiveBridgeId } from './use-active-bridge-id.js';
+export { CompilePanel } from './compile-panel-view.js';
+export { ConnectedCompilePanel } from './connected-compile-panel.js';

package/dist/use-active-bridge-id.js

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+function normalizePagePath(p) {
+    return (p ?? '').replace(/^\/+/, '');
+}
+/**
+ * Derive which AppData page tab is active, synchronously.
+ *
+ * `activeBridgeId` is a pure derivation of (current bridges, the simulator's
+ * active page, manual pick), computed during render — so it is never stale for
+ * a frame the way a useEffect-derived value would be. Auto-follow tracks the
+ * page the user is actually looking at: when `activePagePath` matches a
+ * bridge's pagePath the panel snaps to it, so switching tabBar tabs (which
+ * re-inits no bridge) still moves the panel. A brand-new bridge id appearing or
+ * the active page changing both drop a prior manual pick back to auto-follow.
+ */
+export function useActiveBridgeId(bridges, activePagePath = '') {
+    const ids = bridges.map((b) => b.id);
+    // NUL separator: ids are runtime-generated and never contain it, so two
+    // distinct id lists can never collide on the same key.
+    const idsKey = ids.join('\x00');
+    // The user's manual tab pick; null means "auto-follow the active page".
+    const [selectedBridgeId, setSelectedBridgeId] = useState(null);
+    // The id list from the previous render — lets us spot a freshly-inited page.
+    const [prevIdsKey, setPrevIdsKey] = useState('');
+    // The active page from the previous render — lets us spot a tab switch.
+    const [prevActivePath, setPrevActivePath] = useState(activePagePath);
+    if (idsKey !== prevIdsKey) {
+        // The bridge set changed. If a never-before-seen id appeared, a new page
+        // inited → drop back to auto-follow. Adjusting state during render is the
+        // React-sanctioned alternative to an effect: React re-renders synchronously
+        // before the commit, so `activeBridgeId` below is correct this frame.
+        const prevIds = prevIdsKey ? prevIdsKey.split('\x00') : [];
+        if (ids.some((id) => !prevIds.includes(id))) {
+            setSelectedBridgeId(null);
+        }
+        setPrevIdsKey(idsKey);
+    }
+    if (activePagePath !== prevActivePath) {
+        // The simulator navigated to a different active page (e.g. a tabBar switch).
+        // Drop the manual pick so the panel re-follows the page on screen — without
+        // this, switching tabs leaves the panel stuck on whichever page inited last.
+        setSelectedBridgeId(null);
+        setPrevActivePath(activePagePath);
+    }
+    // Auto-follow target: the bridge whose pagePath matches the active page.
+    const activeFollowId = activePagePath
+        ? bridges.find((b) => normalizePagePath(b.pagePath) === normalizePagePath(activePagePath))?.id ?? null
+        : null;
+    const activeBridgeId = selectedBridgeId && ids.includes(selectedBridgeId)
+        ? selectedBridgeId
+        // Prefer the active page; fall back to the newest bridge when the active
+        // page is unknown or has no matching bridge yet.
+        : (activeFollowId ?? ids.at(-1) ?? null);
+    const setActiveBridge = (id) => {
+        if (ids.includes(id))
+            setSelectedBridgeId(id);
+    };
+    return { activeBridgeId, setActiveBridge };
+}