@forgeax/interface 0.4.1

package/dist/package/browser/components/StatusBar/footer/DiagnosticsPopover.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DiagnosticsPopover — the right-side footer entry (demo `data-sb-pop="diag"`).
+ * A status-bar chip that opens an upward card summarizing device / runtime /
+ * project environment info. Same demo layout; data swapped to real sources:
+ *
+ *  - Device/memory/GPU: browser probes (navigator.platform / hardwareConcurrency;
+ *    performance.memory JS heap for the meter; WebGPU adapter info for GPU).
+ *  - Runtime: server RSS / uptime / WS from dashApi.health() (5s).
+ *  - Project: engine / project / scene / assets from the editor-facts bus
+ *    (useEditorFacts). The scene value has no public transport source and shows "—".
+ *
+ * Lives in interface, auto-registered by chrome-statusbar; sits far-right.
+ */
+import { useEffect, useState } from 'react';
+import { Gauge, Circle } from 'lucide-react';
+import { StripPopover } from '../StripPopover';
+import { useSharedHealth } from '../../../lib/shell-live-data';
+import { useEditorFacts } from '../../../lib/editor-facts-bus';
+import { useTranslation } from '../../../i18n';
+import './footer.css';
+/** Compact uptime: "2h13m" / "13m" / "<1m". */
+function fmtUptime(s) {
+    if (s < 60)
+        return '<1m';
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    return h > 0 ? `${h}h${m}m` : `${m}m`;
+}
+function deviceLabel(unknownDevice, coreUnit) {
+    const nav = navigator;
+    const cores = nav.hardwareConcurrency;
+    const plat = nav.platform || unknownDevice;
+    return cores ? `${plat} · ${cores} ${coreUnit}` : plat;
+}
+function readHeap() {
+    const m = performance.memory;
+    if (!m || !m.jsHeapSizeLimit)
+        return null;
+    return {
+        usedMB: Math.round(m.usedJSHeapSize / 1048576),
+        totalMB: Math.round(m.jsHeapSizeLimit / 1048576),
+    };
+}
+async function probeGpu(unavailable) {
+    try {
+        const gpu = navigator.gpu;
+        if (!gpu?.requestAdapter)
+            return unavailable;
+        const adapter = await gpu.requestAdapter();
+        if (!adapter)
+            return unavailable;
+        const info = adapter.info ??
+            (typeof adapter.requestAdapterInfo === 'function' ? await adapter.requestAdapterInfo() : undefined);
+        if (!info)
+            return 'WebGPU';
+        const parts = [info.vendor, info.architecture].filter((x) => typeof x === 'string' && x.length > 0);
+        return parts.length ? parts.join(' · ') : 'WebGPU';
+    }
+    catch {
+        return unavailable;
+    }
+}
+export function DiagnosticsChip() {
+    const facts = useEditorFacts();
+    const sharedHealth = useSharedHealth();
+    const { t, i18n } = useTranslation();
+    const [gpu, setGpu] = useState(() => t('statusBar.diagnostics.checking'));
+    const [heap, setHeap] = useState(null);
+    const [resState, setResState] = useState('loading');
+    const [res, setRes] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        setGpu(t('statusBar.diagnostics.checking'));
+        void probeGpu(t('statusBar.diagnostics.webgpuUnavailable')).then((g) => {
+            if (!cancelled)
+                setGpu(g);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [i18n.language, t]);
+    useEffect(() => {
+        setHeap(readHeap());
+        if (sharedHealth.state === 'loading')
+            return;
+        if (sharedHealth.state === 'down') {
+            setResState('down');
+            return;
+        }
+        const h = sharedHealth.value;
+        const rss = typeof h.mem?.rss === 'number' ? h.mem.rss : 0;
+        setRes({ rssMB: Math.round(rss / 1048576), uptime: h.uptime ?? 0, ws: h.wsClients ?? 0 });
+        setResState('ok');
+    }, [sharedHealth]);
+    const memPct = heap && heap.totalMB ? Math.round((heap.usedMB / heap.totalMB) * 100) : 0;
+    const resText = (fmt) => resState === 'loading' ? '—' : resState === 'down' ? '!' : res ? fmt(res) : '—';
+    return (_jsxs(StripPopover, { icon: "Gauge", label: t('statusBar.diagnostics.title'), tooltip: t('statusBar.diagnostics.tooltip'), title: _jsxs(_Fragment, { children: [_jsx(Gauge, { size: 13 }), t('statusBar.diagnostics.title')] }), children: [_jsxs("div", { className: "fx-pop-sec", children: [_jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.device') }), _jsx("b", { children: deviceLabel(t('statusBar.diagnostics.unknownDevice'), t('statusBar.diagnostics.cores')) })] }), _jsxs("div", { className: "fx-meter", children: [_jsxs("div", { className: "fx-meter-top", children: [_jsx("span", { children: t('statusBar.diagnostics.memory') }), _jsx("b", { children: heap ? `${heap.usedMB} / ${heap.totalMB} MB` : t('statusBar.diagnostics.unavailable') })] }), _jsx("div", { className: "fx-meter-bar", children: _jsx("i", { style: { width: `${memPct}%` } }) })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: "GPU" }), _jsx("b", { children: gpu })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.engine') }), _jsxs("b", { className: facts ? 'ok' : undefined, children: [facts ? _jsx(Circle, { size: 12 }) : null, facts?.engine ?? '—'] })] })] }), _jsx("div", { className: "fx-pop-div" }), _jsxs("div", { className: "fx-pop-sec", children: [_jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.processMemory') }), _jsx("b", { children: resText((r) => `${r.rssMB} MB`) })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.uptime') }), _jsx("b", { children: resText((r) => fmtUptime(r.uptime)) })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.wsConnections') }), _jsx("b", { children: resText((r) => String(r.ws)) })] })] }), _jsx("div", { className: "fx-pop-div" }), _jsxs("div", { className: "fx-pop-sec", children: [_jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.project') }), _jsx("b", { children: facts?.project ?? '—' })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.scene') }), _jsx("b", { children: facts?.scene ?? '—' })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: t('statusBar.diagnostics.assets') }), _jsx("b", { children: facts ? facts.assets : '—' })] })] })] }));
+}
+// Pulse chips and diagnostics share statusbar.right. Its lower priority keeps
+// diagnostics after MB / SKILL / TOOL / AGENT and immediately before Version.
+export const diagnosticsStatusItem = {
+    kind: 'status-item',
+    id: 'diagnostics',
+    location: 'statusbar.right',
+    priority: 5,
+    item: { type: 'custom', render: () => _jsx(DiagnosticsChip, {}) },
+};

package/dist/package/browser/components/StatusBar/footer/EventsDrawer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * EventsDrawer — the "事件" bottom-drawer panel (demo `data-rt="events"`). A
+ * feed of the editor gateway's operation-run records (each `run.dispatch`),
+ * newest at the top.
+ *
+ * REAL data: subscribed from the cross-app bus via useGatewayRuns(). The studio
+ * editor-facts publisher polls the editor transport (run.list) and republishes;
+ * this panel is a dumb subscriber that never touches the editor realm
+ * (ADR-0030 §4 data plane). A `drawer` panel contributed by chrome-drawer.tsx.
+ */
+import type { DrawerPanelContribution } from '../../../core/panels';
+import './footer.css';
+export declare function EventsDrawer(): import("react/jsx-runtime").JSX.Element;
+export declare const eventsDrawerPanel: DrawerPanelContribution;

package/dist/package/browser/components/StatusBar/footer/EventsDrawer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGatewayRuns } from '../../../lib/editor-facts-bus';
+import './footer.css';
+/** epoch ms → "HH:MM:SS"; empty ts renders as a dash. */
+function fmtTime(ms) {
+    if (!ms)
+        return '—';
+    const d = new Date(ms);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+}
+export function EventsDrawer() {
+    const runs = useGatewayRuns();
+    if (runs.length === 0) {
+        return (_jsx("div", { className: "fx-drawer-content", children: _jsx("div", { className: "fx-empty", children: "\u6682\u65E0\u4E8B\u4EF6 \u00B7 \u5F15\u64CE\u672A\u8FD0\u884C\u6216\u65E0 gateway \u8C03\u7528" }) }));
+    }
+    return (_jsx("div", { className: "fx-drawer-content", children: runs.map((r) => (_jsxs("div", { className: "fx-ev", children: [_jsx("span", { className: "t", children: fmtTime(r.ts) }), _jsx("span", { className: "ev", children: r.operationId }), _jsx("span", { className: "msg", children: r.error ? `${r.status} · ${r.error}` : r.status })] }, r.runId))) }));
+}
+export const eventsDrawerPanel = {
+    id: 'events',
+    title: 'Events',
+    titleKey: 'footerPanel.events',
+    icon: 'Activity',
+    order: 2,
+    render: () => _jsx(EventsDrawer, {}),
+};

package/dist/package/browser/components/StatusBar/footer/ForgeaxBuildPopover.d.ts

@@ -0,0 +1,4 @@
+import type { StatusItemContribution } from '../../../core/panels';
+import './footer.css';
+export declare function ForgeaxBuildChip(): import("react/jsx-runtime").JSX.Element;
+export declare const forgeaxBuildVersionStatusItem: StatusItemContribution;

package/dist/package/browser/components/StatusBar/footer/ForgeaxBuildPopover.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ForgeaX build projection for the footer.
+ *
+ * This is application build metadata from `/api/version`, not the current
+ * game's Git version. Game version control is contributed by edit-runtime.
+ */
+import { useEffect, useState } from 'react';
+import { createIntervalTaskLifecycle } from '@forgeax/app-shell/react';
+import { Layers } from 'lucide-react';
+import { StripPopover } from '../StripPopover';
+import './footer.css';
+const FALLBACK = { version: 'v0.?.?.?', sha: '?', date: '?', totalCommits: 0, branch: '?' };
+export function ForgeaxBuildChip() {
+    const [info, setInfo] = useState(FALLBACK);
+    const [tags, setTags] = useState([]);
+    useEffect(() => {
+        let cancelled = false;
+        const refresh = () => {
+            fetch('/api/version')
+                .then((response) => (response.ok ? response.json() : null))
+                .then((data) => {
+                if (!cancelled && data)
+                    setInfo(data);
+            })
+                .catch(() => { });
+            fetch('/api/version/tags')
+                .then((response) => (response.ok ? response.json() : null))
+                .then((data) => {
+                if (!cancelled && data)
+                    setTags(data.tags ?? []);
+            })
+                .catch(() => { });
+        };
+        refresh();
+        const onVisibility = () => {
+            if (document.visibilityState === 'visible')
+                refresh();
+        };
+        document.addEventListener('visibilitychange', onVisibility);
+        window.addEventListener('focus', refresh);
+        const poll = createIntervalTaskLifecycle({
+            task: refresh,
+            intervalMs: 60_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            document.removeEventListener('visibilitychange', onVisibility);
+            window.removeEventListener('focus', refresh);
+            poll.dispose();
+        };
+    }, []);
+    return (_jsxs(StripPopover, { icon: "Layers", label: info.version, tooltip: "ForgeaX build version", title: _jsxs(_Fragment, { children: [_jsx(Layers, { size: 13 }), "ForgeaX build"] }), children: [_jsxs("div", { className: "fx-pop-sec", children: [_jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: "Build version" }), _jsx("b", { children: info.version })] }), _jsxs("div", { className: "fx-kv", children: [_jsx("span", { children: "Build identity" }), _jsxs("b", { children: [info.branch, " \u00B7 ", info.sha] })] })] }), _jsx("div", { className: "fx-pop-div" }), tags.length === 0 ? (_jsx("div", { className: "fx-empty", children: "No build tags" })) : (tags.map((tag) => (_jsxs("div", { className: "fx-ver", children: [_jsx("span", { className: "ver", children: tag.tag }), _jsx("span", { className: "lbl", children: tag.message }), _jsx("span", { className: "t", children: tag.date })] }, tag.tag))))] }));
+}
+export const forgeaxBuildVersionStatusItem = {
+    kind: 'status-item',
+    id: 'forgeax-build-version',
+    location: 'statusbar.right',
+    priority: 1000,
+    item: { type: 'custom', render: () => _jsx(ForgeaxBuildChip, {}) },
+};

package/dist/package/browser/components/StatusBar/footer/footer.css

@@ -0,0 +1,178 @@
+/* Footer panel content styles — the inner bodies of the four demo bottom
+ * entries (ForgeaX build + diagnostics popovers, checkpoints + events
+ * drawers). Ported from the demo's `.sb-*` / `.rt-*` classes onto our tokens.
+ * The popover/drawer SHELLS are owned by StripPopover / DrawerHostView; this
+ * file owns only the content inside them. */
+
+/* ── shared key-value + section primitives (popover bodies) ── */
+.fx-pop-sec {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 4px;
+}
+.fx-pop-div {
+  height: 1px;
+  background: var(--color-divider-default);
+  margin: 8px 2px;
+}
+.fx-kv {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 11px;
+  padding: 1px 4px;
+}
+.fx-kv > span {
+  color: var(--color-text-tertiary);
+}
+.fx-kv > b {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  font-family: var(--font-mono);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.fx-kv > b.ok {
+  color: var(--color-accent-green, #4ade80);
+}
+.fx-kv > b svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* meter (memory usage) */
+.fx-meter {
+  padding: 1px 4px;
+}
+.fx-meter-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10.5px;
+  margin-bottom: 3px;
+}
+.fx-meter-top > span {
+  color: var(--color-text-tertiary);
+}
+.fx-meter-top > b {
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+.fx-meter-bar {
+  height: 5px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+}
+.fx-meter-bar > i {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary), var(--color-accent-cyan, #38bdf8));
+  border-radius: 3px;
+}
+
+/* version rows */
+.fx-ver {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  padding: 4px;
+  border-radius: 5px;
+  font-family: var(--font-mono);
+}
+.fx-ver:hover {
+  background: var(--color-interaction-hover);
+}
+.fx-ver .ver {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  flex: 0 0 auto;
+}
+.fx-ver.cur .ver {
+  color: var(--primary);
+}
+.fx-ver .lbl {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-secondary);
+}
+.fx-ver .t {
+  color: var(--color-text-tertiary);
+  font-size: 10px;
+  flex: 0 0 auto;
+}
+
+/* empty / placeholder state for any footer list (no data / no active game) */
+.fx-empty {
+  padding: 10px 6px;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+/* ── drawer bodies (checkpoints / events) ── */
+.fx-drawer-content {
+  padding: 8px 12px;
+}
+
+/* checkpoints — commit-timeline rows */
+.fx-ck {
+  display: flex;
+  gap: 10px;
+  padding: 7px 2px;
+  border-bottom: 1px solid var(--color-divider-default);
+}
+.fx-ck .dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--color-accent-violet, #7c5cff);
+  margin-top: 4px;
+  flex: 0 0 auto;
+  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15);
+}
+.fx-ck.head .dot {
+  background: var(--primary);
+  box-shadow: 0 0 0 3px rgba(212, 255, 72, 0.18);
+}
+.fx-ck .ck-msg {
+  font-size: 12px;
+  color: var(--color-text-primary);
+}
+.fx-ck .ck-meta {
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+}
+.fx-ck .ck-meta .cur {
+  color: var(--primary);
+}
+
+/* events — timestamped log rows */
+.fx-ev {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+  padding: 3px 2px;
+  border-bottom: 1px solid var(--color-divider-default);
+  font-family: var(--font-mono);
+}
+.fx-ev .t {
+  color: var(--color-text-tertiary);
+  flex: 0 0 auto;
+}
+.fx-ev .ev {
+  color: var(--color-accent-violet, #7c5cff);
+  flex: 0 0 auto;
+  width: 120px;
+}
+.fx-ev .msg {
+  color: var(--color-text-secondary);
+}

package/dist/package/browser/components/StatusBar/healthBridge.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Health bridge — wires every error/health source into the health store.
+ *
+ * Install ONCE at boot (see main.tsx). Idempotent.
+ *
+ * Sources captured here:
+ *   1. The shell itself: window 'error' / 'unhandledrejection' + a console.error
+ *      wrapper → source 'shell'.
+ *   2. iframe-forwarded health: `postMessage({type:'forgeax:health', level,
+ *      source, code, message})` from play / edit / plugin runtimes (cross-origin,
+ *      so this is how their console errors reach the shell at all).
+ *   3. The pre-existing VAG wire: VAG_CONSOLE (error/warn lines) + VAG_DEVICE_LOST.
+ *      These already reach the host window from the runtimes; we map them onto the
+ *      health store too so nothing is missed even before a runtime ships the new
+ *      `forgeax:health` envelope. Source is inferred from the iframe URL.
+ *
+ * We deliberately do NOT import @forgeax/editor here (that would re-create the
+ * interface→editor cycle the panel-renderer split removed). The wire contract is
+ * plain postMessage shapes validated inline.
+ */
+declare const CONSOLE_LEVELS: readonly ["log", "warn", "error", "info", "debug"];
+type ConsoleLevel = (typeof CONSOLE_LEVELS)[number];
+export interface BrowserConsoleEntry {
+    level: ConsoleLevel;
+    text: string;
+    ts: number;
+    /** 连续相同(level+text)行折叠计数;>1 表示重复了几次(防 RAF 刷屏淹没缓冲)。 */
+    repeat?: number;
+}
+/** console.read{source:'browser'} 读取全量外壳控制台(只读引用,勿改)。 */
+export declare function getBrowserConsole(): readonly BrowserConsoleEntry[];
+/** 清空外壳控制台缓冲(console.clear{source:'browser'} 用)。 */
+export declare function clearBrowserConsole(): void;
+/** iframe→shell telemetry postMessage 摄取(VAG_TELEMETRY)。返 true=本消息已消费。
+ *  抽成纯函数,既给 message 监听复用,也便于单测(不必装全局监听,避免跨用例污染)。 */
+export declare function ingestVagTelemetry(data: unknown): boolean;
+export declare function installHealthBridge(): void;
+export {};