npm - @forgeax/interface - Versions diffs - 0.4.1 - Mend

@forgeax/interface 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/dist/package/browser/components/MainArea/MainArea.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import './MainArea.css';
2	+ export declare function MainArea(): import("react/jsx-runtime").JSX.Element;

package/dist/package/browser/components/MainArea/MainArea.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShellSlot } from '@forgeax/app-shell/react';
+import { ViewportPanel } from './SurfacePanels';
+import { usePanelRenderers } from '../DockShell/panelRenderers';
+import './MainArea.css';
+// 2026-05-17 — Bus mode tab + BusAdminPanel render here removed.
+// Bus inventory is now a "Plugins" section inside SettingsPanel (overlay,
+// opened via gear icon).
+// 2026-06-30: 'preview'/'edit' merged into single 'viewport' mode.
+// 2026-07-08 (v9): Editor Page id renamed 'edit' → 'scene'.
+export function MainArea() {
+    // MainArea body is a product Page injected through slots.MainAreaBody.
+    const MainAreaBody = usePanelRenderers().slots?.MainAreaBody;
+    // The 'main' dock panel exists ONLY in the legacy AI layout (Scene uses a
+    // separate 'viewport' panel), so its body is always AI content. The
+    // `activeId === 'scene'` ViewportPanel branch is only a fallback for
+    // interface-alone hosts that inject no MainAreaBody. Derives directly from the
+    // active Page (the single source of truth) — no separate mode field.
+    return (_jsx("main", { className: "main-area", children: MainAreaBody ? (_jsx(ShellSlot, { name: "MainAreaBody", style: { display: 'contents' }, children: _jsx(MainAreaBody, {}) })) : _jsx(ViewportPanel, {}) }));
+}

package/dist/package/browser/components/MainArea/StandaloneExtensionIframe.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+import type { ExtensionInfo } from '../../lib/extension-api';
+/** Split-surface extension Page pane. The extension's
+ *  index.html reads `?pane=` and tags `<body data-pane=...>`; CSS hides the
+ *  irrelevant regions so left/center can be embedded as sibling iframes that
+ *  sync via same-origin BroadcastChannel. */
+export type ExtensionIframePane = 'left' | 'center';
+interface Props {
+    plugin: ExtensionInfo;
+    pane?: ExtensionIframePane;
+    /** Keep-alive visibility. When false the iframe stays mounted & alive but is
+     *  CSS-hidden (no reload), and we push `visibility.changed{visible:false}` so
+     *  heavy plugins can pause their render loop. Defaults to true (standalone /
+     *  non-keep-alive callers keep the old always-visible behavior). */
+    active?: boolean;
+    /** Explicit cold-reload counter. The iframe URL embeds this as `fxv`; the URL
+     *  is otherwise STABLE for a given plugin id + version + slug, so keep-alive
+     *  actually works (switching panels / games no longer reloads the iframe and
+     *  drops its WebGPU ctx / WS / scroll). Bump this only when you intend a
+     *  deliberate hard reload (e.g. a recovery "重载" button). Defaults to 0. */
+    reloadNonce?: number;
+}
+export declare function buildIframeSrc(plugin: ExtensionInfo, pane?: ExtensionIframePane, slug?: string | null): string | null;
+export declare function StandaloneExtensionIframe({ plugin, pane, active, reloadNonce }: Props): ReactElement;
+export {};

package/dist/package/browser/components/MainArea/StandaloneExtensionIframe.js ADDED Viewed

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Phase A3 — iframe-mounted page plugin.
+ *
+ * Renders the plugin's standalone dev server inside an iframe and wires it to
+ * the host RPC channel via `createExtensionPort` from `@forgeax/extension-platform/transport`. This
+ * is the new path that will eventually replace the import-tree-based
+ * `MAINAREA_PLUGIN_LOADERS` map. Today (A3) it's gated behind the
+ * `VITE_FX_USE_IFRAME=true` env flag and only kicks in when a plugin
+ * manifest declares `entry.standalone`.
+ *
+ * What we wire on the host side (interface):
+ *   - onChat       — plugin → composer text  (TODO B-phase: dispatch into store)
+ *   - onToolCall   — plugin → tool registry  (TODO B-phase: real registry)
+ *   - surface.subscribe — observe surface.expose for AgentsPanel
+ *   - setTheme    — pushed when light/dark or locale changes
+ */
+import { useCallback, useMemo } from 'react';
+import { getLocale, useTranslation } from '../../i18n';
+import { useShellStore } from '../../store';
+import { openExtensionPage } from '../../core/page-navigation';
+import { getSessionClient } from '../../store-parts/session-client';
+import { ExtensionIframeHost } from '../ExtensionHost/ExtensionIframeHost';
+import { usePanelRenderers } from '../DockShell/panelRenderers';
+export function buildIframeSrc(plugin, pane, slug) {
+    const sa = plugin.entry?.standalone;
+    if (!plugin.frontendUrl && !sa && !plugin.entry?.frontend)
+        return null;
+    // Explicit host-validated dev URLs win. Existing embedded/proxy/port modes
+    // remain for installed extensions and never infer a Toolkit registration.
+    // Four address modes:
+    //   1. embeddedAlso=true — plugin ships a built dist served by the host at
+    //      /extensions/<id>/. Prefer this when set: the studio doesn't launch the
+    //      plugin's own dev server, and declared `port` may collide with other
+    //      services (e.g. extension-character's 15173 collides with the engine).
+    //   2. anydev/cloud proxy mode — keep the browser on Studio's HTTPS origin and
+    //      let Vite proxy to the plugin's plain-HTTP dev server inside the container.
+    //   3. plugin declares `port` — use http://<host>:<port>/<readyProbe?>
+    //   4. plugin only declares `start` — fall back to /extensions/<id>/.
+    const shortId = plugin.id.replace(/^@[^/]+\//, '');
+    const encodedShortId = encodeURIComponent(shortId);
+    const embeddedSrc = `/extensions/${encodedShortId}/`;
+    let base;
+    if (plugin.frontendUrl)
+        base = plugin.frontendUrl;
+    else if (plugin.entry?.frontend || sa?.embeddedAlso === true)
+        base = embeddedSrc;
+    else if (import.meta.env.VITE_FORGEAX_STANDALONE_PROXY === '1') {
+        const probe = sa?.readyProbe ?? '/';
+        const path = probe.startsWith('/') ? probe : `/${probe}`;
+        base = `/__fx-plugin/${encodedShortId}${path}`;
+    }
+    else if (typeof sa?.port === 'number') {
+        const probe = sa.readyProbe ?? '/';
+        const path = probe.startsWith('/') ? probe : `/${probe}`;
+        // Match the parent page's protocol. When the Studio UI is served over HTTPS
+        // (FORGEAX_INTERFACE_HTTPS=1, e.g. remote-IP access) an `http://` iframe is
+        // blocked as mixed content. The plugin dev server must then also serve HTTPS
+        // (run.ts passes the studio .tls cert to its vite). Falls back to http://
+        // transparently when the parent is http.
+        base = `${window.location.protocol}//${window.location.hostname}:${sa.port}${path}`;
+    }
+    else
+        base = embeddedSrc;
+    // 多游戏：把当前 game slug 喂进 iframe URL，让 extension-scene 等"per-game data"
+    // 类型的插件能在自己空间里读出。其它插件忽略此参数即可。
+    const params = [];
+    if (pane)
+        params.push(`pane=${encodeURIComponent(pane)}`);
+    if (slug)
+        params.push(`slug=${encodeURIComponent(slug)}`);
+    params.push(`locale=${encodeURIComponent(getLocale())}`);
+    if (params.length === 0)
+        return base;
+    return base + (base.includes('?') ? '&' : '?') + params.join('&');
+}
+/** localStorage key the host writes the cross-page handoff payload to.
+ *  Same-origin so the target plugin iframe (e.g. extension-anim) can read it on boot
+ *  + via the 'storage' event. Mirrored constant lives in extension-anim's bridge. */
+const ANIM_HANDOFF_KEY = 'forgeax:anim-handoff';
+/** Resolve the target plugin's page tab id + flip the store so MainArea
+ *  takes over with the target plugin. Writes the handoff payload (charId/role/
+ *  slug) to localStorage first so the target iframe can pick it up. */
+function doNavigate(targetPluginId, payload) {
+    try {
+        if (payload && Object.keys(payload).length > 0) {
+            window.localStorage.setItem(ANIM_HANDOFF_KEY, JSON.stringify({ ...payload, targetPluginId, ts: Date.now() }));
+        }
+    }
+    catch {
+        /* localStorage unavailable (private mode) — target falls back to selector */
+    }
+    void openExtensionPage(targetPluginId);
+}
+export function StandaloneExtensionIframe({ plugin, pane, active = true, reloadNonce = 0 }) {
+    const { t } = useTranslation();
+    const { editor } = usePanelRenderers();
+    // STABLE cache key. Was `${version}-${Date.now()}` which defeated keep-alive:
+    // any iframe remount (re-parent / reconcile) recomputed Date.now() → new URL →
+    // a full cold reload that tore down the WebGPU ctx + WS + scroll on every
+    // panel/game switch. Now keyed only on identity (id + version) + an explicit
+    // reloadNonce, so the URL stays identical across switches and the browser
+    // reuses the live iframe. A deliberate reload bumps reloadNonce.
+    const iframeCacheKey = useMemo(() => `${plugin.version ?? 'dev'}-${reloadNonce}`, [plugin.id, plugin.version, reloadNonce]);
+    const effectiveSlug = useShellStore((s) => s.activeGameSlug);
+    const slugReady = useShellStore((s) => s.activeGameResolved);
+    const rawSrc = slugReady ? buildIframeSrc(plugin, pane, effectiveSlug) : null;
+    const src = rawSrc ? rawSrc + (rawSrc.includes('?') ? '&' : '?') + `fxv=${encodeURIComponent(iframeCacheKey)}` : null;
+    const handleNavigate = useCallback((targetPluginId, payload) => {
+        doNavigate(targetPluginId, payload);
+    }, []);
+    const handleChatPost = useCallback((e) => {
+        if (!e.text || !e.text.trim())
+            return;
+        if (e.attachments && e.attachments.length > 0 && import.meta.env.DEV) {
+            // eslint-disable-next-line no-console
+            console.warn('[plugin chat.post] attachments dropped (not yet supported):', plugin.id, e.attachments);
+        }
+        const st = useShellStore.getState();
+        const sid = st.activeSid;
+        if (!sid)
+            return;
+        const to = st.tabs.find((tb) => tb.sid === sid)?.agentId ?? undefined;
+        void getSessionClient().emitForgeaXMessage(sid, e.text, to ? { to } : {}).catch((err) => {
+            if (import.meta.env.DEV) {
+                // eslint-disable-next-line no-console
+                console.warn('[plugin chat.post] emit failed:', plugin.id, err);
+            }
+        });
+    }, [plugin.id]);
+    const handleToolCall = useCallback(async (call) => {
+        try {
+            const r = await fetch('/api/tools/call', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    toolId: call.toolId,
+                    args: call.args ?? {},
+                    caller: { kind: 'extension', extensionId: plugin.id, instanceId: `standalone:${plugin.id}` },
+                }),
+            });
+            const body = (await r.json());
+            return body.ok
+                ? { ok: true, result: body.result }
+                : { ok: false, error: body.error ?? 'tool call failed' };
+        }
+        catch (e) {
+            return { ok: false, error: e.message };
+        }
+    }, [plugin.id]);
+    if (!src) {
+        return (_jsxs("div", { style: { padding: 20, color: '#888' }, children: [t('standaloneExtension.noEntryPrefix'), " ", _jsx("code", { children: plugin.id }), ' ', t('standaloneExtension.noEntryMiddle'), " ", _jsx("code", { children: "entry.standalone" }), ' ', t('standaloneExtension.noEntrySuffix')] }));
+    }
+    return (_jsx(ExtensionIframeHost, { extensionId: plugin.id, src: src, pane: pane, active: active, onNavigate: handleNavigate, onChatPost: handleChatPost, onEditorAssetImport: editor?.importAssetSource, onToolCall: handleToolCall, allowedOrigin: plugin.allowedOrigin, loadErrorText: (error) => t('standaloneExtension.iframeLoadFailed', { error }) }));
+}

package/dist/package/browser/components/MainArea/SurfacePanels.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare function ViewportPanel(): import("react/jsx-runtime").JSX.Element;
+export { ViewportPanel as EditPanel };
+export declare function PreviewPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/package/browser/components/MainArea/SurfacePanels.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { SurfaceRegion } from '@forgeax/app-shell/react';
+import { setAnchor } from '../../lib/surfaceAnchors';
+// SurfaceAnchor — empty flex-fill placeholder that registers its element with the
+// anchor registry on mount and clears it on unmount. The keep-alive layer reads
+// this element's bounding rect to position the live (kept-alive) surface over it.
+function SurfaceAnchor({ kind }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        setAnchor(kind, ref.current);
+        return () => setAnchor(kind, null);
+    }, [kind]);
+    return _jsx("div", { ref: ref, className: "surface-anchor", "data-surface-anchor": kind });
+}
+// ViewportPanel — combined edit+preview surface, renders the editor viewport anchor.
+// The keep-alive layer manages the actual surface rendering.
+export function ViewportPanel() {
+    return (_jsx(SurfaceRegion, { children: _jsx(SurfaceAnchor, { kind: "edit" }) }));
+}
+// Backward-compat aliases kept for existing consumers during migration.
+// These are thin wrappers around ViewportPanel; the old 'preview'/'edit' modes
+// should no longer be used (they map to 'viewport' via AppMode migration).
+export { ViewportPanel as EditPanel };
+export function PreviewPanel() {
+    return (_jsx(SurfaceRegion, { children: _jsx(SurfaceAnchor, { kind: "play" }) }));
+}

package/dist/package/browser/components/MainArea/TelemetryViewer.css ADDED Viewed

@@ -0,0 +1,122 @@
+/* TelemetryViewer — trace waterfall (top) + log stream (bottom).
+ * Mirrors the fx-console-panel palette (DockShell.css). */
+.tv-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--color-background-base, #0d0d0f);
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  color: var(--color-text-primary, #e8eaed);
+}
+.tv-bar,
+.tv-logbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--color-border-default, #2a2d30);
+  color: var(--color-text-tertiary, #778);
+  flex: 0 0 auto;
+}
+.tv-logbar { border-top: 1px solid var(--color-border-default, #2a2d30); }
+.tv-title,
+.tv-logbar-title { font-weight: 600; }
+.tv-clear,
+.tv-filter {
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--color-border-default, #2a2d30);
+  color: var(--color-text-secondary, #9aa0aa);
+  border-radius: 3px;
+  padding: 1px 6px;
+  font: inherit;
+  cursor: pointer;
+}
+.tv-clear:hover { color: var(--color-text-primary, #e8eaed); }
+.tv-filters { margin-left: auto; display: flex; gap: 4px; }
+.tv-filter { margin-left: 0; }
+.tv-filter:hover { color: var(--color-text-primary, #e8eaed); }
+.tv-filter--on {
+  border-color: rgba(212, 255, 72, 0.5);
+  color: var(--color-text-primary, #e8eaed);
+}
+/* Two scroll regions share the remaining height. */
+.tv-section { overflow: auto; }
+.tv-traces { flex: 1 1 55%; padding: 4px 0; }
+.tv-logs { flex: 1 1 45%; padding: 4px 0; }
+.tv-empty { opacity: 0.45; padding: 6px 10px; }
+/* ── trace ── */
+.tv-trace { border-bottom: 1px solid rgba(42, 45, 48, 0.5); padding-bottom: 2px; }
+.tv-trace-head {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  padding: 2px 10px;
+  color: var(--color-text-secondary, #9aa0aa);
+}
+.tv-trace-id { color: rgba(212, 255, 72, 0.8); }
+.tv-trace-dur { color: var(--color-text-tertiary, #778); }
+.tv-trace-count { margin-left: auto; opacity: 0.6; }
+.tv-span-row {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 10px;
+}
+.tv-span-row:hover { background: var(--color-background-elevated, #161619); }
+.tv-span-label { display: flex; gap: 6px; align-items: baseline; overflow: hidden; }
+.tv-span-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tv-span-meta { color: var(--color-text-tertiary, #778); white-space: nowrap; flex: 0 0 auto; }
+.tv-span-track { position: relative; height: 12px; background: var(--color-background-elevated, #161619); border-radius: 2px; }
+.tv-span-bar {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  min-width: 2px;
+  background: rgba(212, 255, 72, 0.55);
+  border-radius: 2px;
+}
+.tv-span-bar--error { background: rgba(255, 92, 92, 0.7); }
+.tv-span-bar--ongoing {
+  background: repeating-linear-gradient(
+    45deg,
+    rgba(212, 255, 72, 0.5),
+    rgba(212, 255, 72, 0.5) 4px,
+    rgba(212, 255, 72, 0.2) 4px,
+    rgba(212, 255, 72, 0.2) 8px
+  );
+}
+/* ── log ── */
+.tv-log-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  padding: 1px 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.tv-log-row:hover { background: var(--color-background-elevated, #161619); }
+.tv-log-time { color: var(--color-text-tertiary, #778); flex: 0 0 auto; }
+.tv-log-level { flex: 0 0 auto; text-transform: uppercase; font-size: 10px; }
+.tv-log-level--debug { color: #6b7280; }
+.tv-log-level--info { color: #60a5fa; }
+.tv-log-level--warn { color: #fbbf24; }
+.tv-log-level--error { color: #f87171; }
+.tv-log-msg { flex: 1 1 auto; }
+.tv-log-trace { flex: 0 0 auto; color: rgba(212, 255, 72, 0.7); opacity: 0.8; }
+.tv-log--error { background: rgba(248, 113, 113, 0.06); }

package/dist/package/browser/components/MainArea/TelemetryViewer.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { type TelemetryRecord, type TelemetrySpan, type TelemetryLog } from '../../store';
+import './TelemetryViewer.css';
+declare const LOG_LEVELS: readonly ["debug", "info", "warn", "error"];
+type LogLevel = (typeof LOG_LEVELS)[number];
+interface TraceTree {
+    traceId: string;
+    /** Earliest startTs / latest end across the trace (window for bar layout). */
+    t0: number;
+    t1: number;
+    /** Spans flattened in render order (DFS by parent), with computed depth. */
+    rows: Array<{
+        span: TelemetrySpan;
+        depth: number;
+    }>;
+}
+/** Group spans by traceId and order each trace's spans into a depth-tagged DFS
+ *  list (root spans first, children nested under their parentSpanId). Spans with
+ *  an unknown / absent parent are treated as roots so nothing is dropped. */
+export declare function buildTraces(spans: TelemetrySpan[]): TraceTree[];
+export declare function fmtDur(ms: number): string;
+export declare function SpanBar({ span, depth, t0, t1 }: {
+    span: TelemetrySpan;
+    depth: number;
+    t0: number;
+    t1: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** 日志按 level 过滤(`'all'` = 不过滤)+ 按 ts 新→旧排序。纯函数,可独立单测。 */
+export declare function filterAndSortLogs(logs: TelemetryLog[], level: LogLevel | 'all'): TelemetryLog[];
+/** store-connected 容器:读 telemetry slice + clear,委托给纯展示组件 {@link TelemetryView}。 */
+export declare function TelemetryViewer(): import("react/jsx-runtime").JSX.Element;
+/** 纯展示组件(prop 驱动,不读 store)—— 便于 renderToStaticMarkup 注入 seeded 数据单测。 */
+export declare function TelemetryView({ telemetry, onClear }: {
+    telemetry: TelemetryRecord[];
+    onClear: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/package/browser/components/MainArea/TelemetryViewer.js ADDED Viewed

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useShellStore } from '../../store';
+import './TelemetryViewer.css';
+// TelemetryViewer — a dock panel for the observability (trace + log) feed.
+//
+// One store slice (`telemetry`) carries BOTH node-produced records (WS
+// `{type:'telemetry'}`) and iframe-produced ones (postMessage
+// `{type:'VAG_TELEMETRY'}`); see store.ts pushTelemetry. This viewer splits by
+// `kind`:
+//   - spans → a per-trace waterfall (nested by parentSpanId, bars positioned by
+//     startTs and sized by duration; provisional spans render as「ongoing」).
+//   - logs  → a newest-first stream with a level filter.
+// 见 .claude/docs/架构设计/forgeax-os/可观测性-trace-log-v3-B档-并行执行计划-2026-06-24.md §C Track UI。
+const LOG_LEVELS = ['debug', 'info', 'warn', 'error'];
+/** Group spans by traceId and order each trace's spans into a depth-tagged DFS
+ *  list (root spans first, children nested under their parentSpanId). Spans with
+ *  an unknown / absent parent are treated as roots so nothing is dropped. */
+export function buildTraces(spans) {
+    // Latest record per spanId wins (onEnd `final` overrides the onStart
+    // `provisional`, both share the same spanId).
+    const bySpanId = new Map();
+    for (const s of spans)
+        bySpanId.set(s.spanId, s);
+    const latest = [...bySpanId.values()];
+    const byTrace = new Map();
+    for (const s of latest) {
+        const arr = byTrace.get(s.traceId) ?? [];
+        arr.push(s);
+        byTrace.set(s.traceId, arr);
+    }
+    const trees = [];
+    for (const [traceId, list] of byTrace) {
+        const ids = new Set(list.map((s) => s.spanId));
+        const children = new Map();
+        const roots = [];
+        for (const s of list) {
+            if (s.parentSpanId && ids.has(s.parentSpanId)) {
+                const arr = children.get(s.parentSpanId) ?? [];
+                arr.push(s);
+                children.set(s.parentSpanId, arr);
+            }
+            else {
+                roots.push(s);
+            }
+        }
+        const sortByStart = (a, b) => a.startTs - b.startTs;
+        roots.sort(sortByStart);
+        for (const arr of children.values())
+            arr.sort(sortByStart);
+        const rows = [];
+        const walk = (s, depth) => {
+            rows.push({ span: s, depth });
+            for (const c of children.get(s.spanId) ?? [])
+                walk(c, depth + 1);
+        };
+        for (const r of roots)
+            walk(r, 0);
+        let t0 = Infinity;
+        let t1 = -Infinity;
+        const now = Date.now();
+        for (const s of list) {
+            t0 = Math.min(t0, s.startTs);
+            t1 = Math.max(t1, s.endTs ?? now); // provisional → extend to now
+        }
+        trees.push({ traceId, t0, t1, rows });
+    }
+    // Newest trace first (by its earliest span).
+    trees.sort((a, b) => b.t0 - a.t0);
+    return trees;
+}
+export function fmtDur(ms) {
+    if (ms < 1)
+        return '<1ms';
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+export function SpanBar({ span, depth, t0, t1 }) {
+    const span0 = span.startTs;
+    const span1 = span.endTs ?? Date.now();
+    const total = Math.max(1, t1 - t0);
+    const leftPct = ((span0 - t0) / total) * 100;
+    const widthPct = Math.max(0.5, ((span1 - span0) / total) * 100);
+    const dur = (span.endTs ?? span1) - span0;
+    const isErr = span.status?.code === 'error';
+    const cls = ['tv-span-bar', isErr ? 'tv-span-bar--error' : '', span.provisional || span.endTs == null ? 'tv-span-bar--ongoing' : '']
+        .filter(Boolean)
+        .join(' ');
+    const who = span.agentId ? `${span.agentId}` : span.sid ?? '';
+    return (_jsxs("div", { className: "tv-span-row", children: [_jsxs("div", { className: "tv-span-label", style: { paddingLeft: depth * 12 }, title: `${span.name} · ${span.spanId}`, children: [_jsx("span", { className: "tv-span-name", children: span.name }), _jsxs("span", { className: "tv-span-meta", children: [fmtDur(dur), span.endTs == null ? '…' : '', who ? ` · ${who}` : ''] })] }), _jsx("div", { className: "tv-span-track", children: _jsx("div", { className: cls, style: { left: `${leftPct}%`, width: `${widthPct}%` } }) })] }));
+}
+/** 日志按 level 过滤(`'all'` = 不过滤)+ 按 ts 新→旧排序。纯函数,可独立单测。 */
+export function filterAndSortLogs(logs, level) {
+    const filtered = level === 'all' ? logs : logs.filter((l) => l.level === level);
+    return [...filtered].sort((a, b) => b.ts - a.ts);
+}
+/** store-connected 容器:读 telemetry slice + clear,委托给纯展示组件 {@link TelemetryView}。 */
+export function TelemetryViewer() {
+    const telemetry = useShellStore((s) => s.telemetry);
+    const clearTelemetry = useShellStore((s) => s.clearTelemetry);
+    return _jsx(TelemetryView, { telemetry: telemetry, onClear: clearTelemetry });
+}
+/** 纯展示组件(prop 驱动,不读 store)—— 便于 renderToStaticMarkup 注入 seeded 数据单测。 */
+export function TelemetryView({ telemetry, onClear }) {
+    const [levelFilter, setLevelFilter] = useState('all');
+    const spans = useMemo(() => telemetry.filter((r) => r.kind === 'span'), [telemetry]);
+    const logs = useMemo(() => telemetry.filter((r) => r.kind === 'log'), [telemetry]);
+    const traces = useMemo(() => buildTraces(spans), [spans]);
+    const visibleLogs = useMemo(() => filterAndSortLogs(logs, levelFilter), [logs, levelFilter]);
+    return (_jsxs("div", { className: "tv-panel", children: [_jsxs("div", { className: "tv-bar", children: [_jsxs("span", { className: "tv-title", children: ["Telemetry", telemetry.length ? ` · ${spans.length} span / ${logs.length} log` : ''] }), telemetry.length > 0 && (_jsx("button", { type: "button", className: "tv-clear", onClick: () => onClear(), title: "clear telemetry", children: "clear" }))] }), _jsxs("div", { className: "tv-section tv-traces thin-scrollbar", children: [traces.length === 0 && _jsx("div", { className: "tv-empty", children: "no spans yet" }), traces.map((tr) => (_jsxs("div", { className: "tv-trace", children: [_jsxs("div", { className: "tv-trace-head", title: tr.traceId, children: [_jsx("span", { className: "tv-trace-id", children: tr.traceId.slice(0, 12) }), _jsx("span", { className: "tv-trace-dur", children: fmtDur(tr.t1 - tr.t0) }), _jsxs("span", { className: "tv-trace-count", children: [tr.rows.length, " spans"] })] }), tr.rows.map(({ span, depth }) => (_jsx(SpanBar, { span: span, depth: depth, t0: tr.t0, t1: tr.t1 }, span.spanId)))] }, tr.traceId)))] }), _jsxs("div", { className: "tv-logbar", children: [_jsx("span", { className: "tv-logbar-title", children: "Logs" }), _jsxs("div", { className: "tv-filters", children: [_jsx("button", { type: "button", className: `tv-filter ${levelFilter === 'all' ? 'tv-filter--on' : ''}`, onClick: () => setLevelFilter('all'), children: "all" }), LOG_LEVELS.map((lv) => (_jsx("button", { type: "button", className: `tv-filter tv-filter--${lv} ${levelFilter === lv ? 'tv-filter--on' : ''}`, onClick: () => setLevelFilter(lv), children: lv }, lv)))] })] }), _jsxs("div", { className: "tv-section tv-logs thin-scrollbar", children: [visibleLogs.length === 0 && _jsx("div", { className: "tv-empty", children: "no logs" }), visibleLogs.map((l, i) => {
+                        const d = new Date(l.ts);
+                        const stamp = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+                        return (_jsxs("div", { className: `tv-log-row tv-log--${l.level}`, children: [_jsx("span", { className: "tv-log-time", children: stamp }), _jsx("span", { className: `tv-log-level tv-log-level--${l.level}`, children: l.level }), _jsx("span", { className: "tv-log-msg", children: l.msg }), l.traceId && _jsx("span", { className: "tv-log-trace", title: l.traceId, children: l.traceId.slice(0, 8) })] }, `${l.ts}-${i}`));
+                    })] })] }));
+}