@forgeax/interface 0.4.1

package/dist/package/node/components/Feedback/PassiveFeedback.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, ChevronDown, X } from 'lucide-react';
+import { createIntervalTaskLifecycle, installCustomEventObservation, installMutationObservation, } from '@forgeax/app-shell/react';
+import { useTranslation } from '../../i18n/index.js';
+import { useHost } from '../../core/app-shell/index.js';
+import { useShellStore } from '../../store.js';
+import { PASSIVE_FEEDBACK_EVENT, PASSIVE_FEEDBACK_RECOVERED_EVENT, createPassiveFeedbackClassifier, matchesPassiveFeedbackScope, reportPassiveFeedbackSignal, } from '../../lib/passive-feedback.js';
+import { useHealthStore } from '../StatusBar/healthStore.js';
+import { useFeedbackStore } from './store.js';
+
+const SEEN_STORAGE_KEY = 'forgeax.feedback.passive.seen';
+let incidentSequence = 1;
+function loadSeen() {
+    try {
+        const value = JSON.parse(sessionStorage.getItem(SEEN_STORAGE_KEY) ?? '[]');
+        return new Set(Array.isArray(value) ? value.filter((x) => typeof x === 'string') : []);
+    }
+    catch {
+        return new Set();
+    }
+}
+function persistSeen(seen) {
+    try {
+        sessionStorage.setItem(SEEN_STORAGE_KEY, JSON.stringify([...seen]));
+    }
+    catch { /* best effort */ }
+}
+function nextPaint() {
+    return new Promise((resolve) => {
+        if (typeof requestAnimationFrame === 'function')
+            requestAnimationFrame(() => resolve());
+        else
+            setTimeout(resolve, 0);
+    });
+}
+function useComposerPortal(active) {
+    const [target, setTarget] = useState(null);
+    useEffect(() => {
+        if (!active) {
+            setTarget(null);
+            return;
+        }
+        let slot = null;
+        const attach = () => {
+            if (slot?.isConnected)
+                return;
+            const composer = document.querySelector('.chat-panel .composer');
+            if (!(composer instanceof HTMLElement) || !composer.parentElement)
+                return;
+            slot = document.createElement('div');
+            slot.className = 'feedback-passive-chat-slot';
+            composer.parentElement.insertBefore(slot, composer);
+            setTarget(slot);
+        };
+        attach();
+        const disposeMutationObservation = installMutationObservation({
+            target: document.body,
+            observerOptions: { childList: true, subtree: true },
+            onMutation: attach,
+        });
+        return () => {
+            disposeMutationObservation();
+            slot?.remove();
+            setTarget(null);
+        };
+    }, [active]);
+    return target;
+}
+function PassiveFeedbackCard({ incident, onDismiss, onPrimary, }) {
+    const { t } = useTranslation();
+    const card = (_jsxs("section", { className: `feedback-passive-card feedback-passive-card--${incident.placement}`, role: incident.placement === 'center' ? 'alertdialog' : 'alert', "aria-modal": incident.placement === 'center' ? true : undefined, "aria-labelledby": `feedback-passive-title-${incident.id}`, children: [_jsx("button", { type: "button", className: "feedback-passive-close", "aria-label": t('feedback.passive.dismiss'), title: t('feedback.passive.dismiss'), onClick: onDismiss, children: _jsx(X, { size: 17 }) }), _jsxs("header", { className: "feedback-passive-header", children: [_jsx("span", { className: "feedback-passive-icon", "aria-hidden": "true", children: _jsx(AlertTriangle, { size: 18 }) }), _jsx("h2", { id: `feedback-passive-title-${incident.id}`, children: t(incident.titleKey) })] }), _jsx("p", { className: "feedback-passive-summary", children: incident.summary }), incident.stack && (_jsxs("details", { className: "feedback-passive-stack", children: [_jsxs("summary", { children: [t('feedback.passive.fullStack'), _jsx(ChevronDown, { size: 15 })] }), _jsx("pre", { children: incident.stack })] })), _jsxs("footer", { className: "feedback-passive-actions", children: [_jsx("button", { type: "button", className: "feedback-passive-primary", onClick: onPrimary, children: t(incident.actionKey) }), _jsx("button", { type: "button", className: "feedback-passive-ignore", onClick: onDismiss, children: t('feedback.passive.ignore') })] })] }));
+    return incident.placement === 'center'
+        ? _jsx("div", { className: "feedback-passive-backdrop", children: card })
+        : card;
+}
+export function PassiveFeedbackHost() {
+    const host = useHost();
+    const [incidents, setIncidents] = useState([]);
+    const classifier = useMemo(() => createPassiveFeedbackClassifier(), []);
+    const seenRef = useRef(loadSeen());
+    const lastHealthIdRef = useRef(0);
+    const current = incidents[0] ?? null;
+    const composerTarget = useComposerPortal(current?.placement === 'chat');
+    const enqueue = useCallback((incident) => {
+        // Requirements §4: "右下角轻量卡片。同一异常类型同一会话只询问一次,避免检测器
+        // 重复弹出。" The session-once rule is scoped to the corner placement, whose
+        // sources are polling detectors (heartbeat drift, uncaught-error windows,
+        // build retries) that would otherwise re-prompt endlessly. Center failures
+        // (save / GPU / Play / renderer / runtime) and the Agent card are per-attempt
+        // user-visible failures — muting them for the rest of the session would hide
+        // a second failed save entirely.
+        if (incident.placement === 'corner') {
+            if (seenRef.current.has(incident.exceptionKey))
+                return;
+            seenRef.current.add(incident.exceptionKey);
+            persistSeen(seenRef.current);
+        }
+        setIncidents((currentIncidents) => {
+            // Never stack the same incident, but keep differently scoped agent
+            // attempts separate so recovering one session/agent does not hide a
+            // still-unresponsive peer.
+            if (currentIncidents.some((queued) => {
+                if (queued.exceptionKey !== incident.exceptionKey)
+                    return false;
+                if (incident.placement !== 'chat' || queued.placement !== 'chat')
+                    return true;
+                return matchesPassiveFeedbackScope(queued.scope, incident.scope)
+                    && matchesPassiveFeedbackScope(incident.scope, queued.scope);
+            })) {
+                return currentIncidents;
+            }
+            return [...currentIncidents, { ...incident, id: incidentSequence++ }];
+        });
+    }, []);
+    useEffect(() => {
+        const ingest = (signal) => {
+            const incident = classifier.ingest(signal);
+            if (incident)
+                enqueue(incident);
+        };
+        const onSignal = (event) => {
+            const detail = event.detail;
+            if (detail && typeof detail.code === 'string' && typeof detail.message === 'string')
+                ingest(detail);
+        };
+        const disposeSignalObservation = installCustomEventObservation({
+            target: window,
+            eventType: PASSIVE_FEEDBACK_EVENT,
+            onEvent: onSignal,
+        });
+        const onRecovered = (event) => {
+            const detail = event.detail;
+            if (!detail || typeof detail.exceptionKey !== 'string')
+                return;
+            setIncidents((currentIncidents) => currentIncidents.filter((incident) => incident.exceptionKey !== detail.exceptionKey || !matchesPassiveFeedbackScope(incident.scope, detail.scope)));
+        };
+        const disposeRecoveredObservation = installCustomEventObservation({
+            target: window,
+            eventType: PASSIVE_FEEDBACK_RECOVERED_EVENT,
+            onEvent: onRecovered,
+        });
+        const ingestHealth = () => {
+            for (const entry of useHealthStore.getState().entries) {
+                if (entry.id <= lastHealthIdRef.current)
+                    continue;
+                lastHealthIdRef.current = entry.id;
+                ingest({ code: entry.code ?? '', message: entry.message, source: entry.source, ts: entry.ts });
+            }
+        };
+        ingestHealth();
+        const unsubscribe = useHealthStore.subscribe(ingestHealth);
+        let expected = performance.now() + 1_000;
+        const heartbeat = createIntervalTaskLifecycle({
+            intervalMs: 1_000,
+            setInterval: window.setInterval.bind(window),
+            clearInterval: (handle) => window.clearInterval(handle),
+            task: () => {
+                const now = performance.now();
+                const drift = now - expected;
+                expected = now + 1_000;
+                if (drift >= 5_000) {
+                    reportPassiveFeedbackSignal({
+                        code: 'main-thread-stall',
+                        message: `Main thread was unresponsive for ${Math.round(drift / 1_000)} seconds`,
+                    });
+                }
+            },
+        });
+        heartbeat.start();
+        return () => {
+            disposeSignalObservation();
+            disposeRecoveredObservation();
+            heartbeat.dispose();
+            unsubscribe();
+        };
+    }, [classifier, enqueue]);
+    useEffect(() => {
+        if (current?.placement !== 'chat')
+            return;
+        const state = useShellStore.getState();
+        if (state.chatpanelCollapsed)
+            state.toggleChatpanel();
+    }, [current]);
+    const dismissCurrent = useCallback(() => {
+        setIncidents((currentIncidents) => currentIncidents.slice(1));
+    }, []);
+    const submitAndRecover = useCallback(async () => {
+        if (!current)
+            return;
+        dismissCurrent();
+        await nextPaint();
+        const diagnostic = `[passive-feedback/${current.exceptionKey}] ${current.summary}${current.stack ? `\n${current.stack}` : ''}`;
+        // /api/feedback 的唯一出口是 store(见 store.ts 文件头 SSOT 注释 +
+        // scripts/agnostic-api-policy.ts);这里只描述事实,采集与上报都归它。
+        const submit = useFeedbackStore.getState().submitAuto({
+            exceptionKey: current.exceptionKey,
+            diagnostic,
+        });
+        if (current.recovery.kind === 'command') {
+            await Promise.allSettled([submit, host.commands.execute(current.recovery.commandId)]);
+            return;
+        }
+        if (current.recovery.kind === 'reload-page') {
+            await submit;
+            window.location.reload();
+            return;
+        }
+        await submit;
+    }, [current, dismissCurrent, host]);
+    if (!current)
+        return null;
+    const card = (_jsx(PassiveFeedbackCard, { incident: current, onDismiss: dismissCurrent, onPrimary: () => { void submitAndRecover(); } }));
+    if (current.placement === 'chat' && composerTarget)
+        return createPortal(card, composerTarget);
+    return card;
+}

package/dist/package/node/components/Feedback/collect.js

@@ -0,0 +1,80 @@
+/**
+ * Feedback 静默采集器(需求 §1/§5)——打开面板或触发异常时自动采集现场信息,
+ * 提交反馈时一并带走。密钥打码、绝对路径相对化、不含项目内容。
+ *
+ * 复用宿主既有能力,不新造轮子:
+ *   - 操作轨迹  → lib/ui-trajectory readTrajectory
+ *   - 控制台日志 → StatusBar/healthBridge getBrowserConsole
+ *   - 界面截图  → lib/ui-screenshot captureUiScreenshot(调用方单独处理,这里不出图)
+ *   - 运行环境  → 无现成 helper,这里自行 navigator / window 组包(见下)
+ *
+ * best-effort:任何维度采集失败都只缺席该维度,绝不 throw 阻塞面板。
+ */
+import { readTrajectory } from '../../lib/ui-trajectory.js';
+import { getBrowserConsole } from '../StatusBar/healthBridge.js';
+/** 简单打码:遮蔽看起来像 token/key 的值。 */
+function redact(value) {
+    return value.replace(/(sk-[A-Za-z0-9_-]{8})[A-Za-z0-9_-]+/g, '$1…');
+}
+/** 运行环境(§5):系统 / Studio 版本 / 浏览器 / 硬件 / 窗口尺寸。 */
+function collectEnv() {
+    try {
+        const nav = navigator;
+        return {
+            userAgent: nav.userAgent,
+            platform: nav.platform,
+            language: nav.language,
+            hardwareConcurrency: nav.hardwareConcurrency,
+            deviceMemory: nav.deviceMemory,
+            viewport: { width: window.innerWidth, height: window.innerHeight },
+            screen: { width: window.screen.width, height: window.screen.height },
+            studioVersion: window.__FORGEAX_VERSION__ ?? undefined,
+        };
+    }
+    catch {
+        return {};
+    }
+}
+/** 当前会话(§5):会话 / 项目 / 页签 / 插件。宿主 store 未暴露统一快照,这里采 URL 可得的。 */
+function collectSession() {
+    try {
+        const url = new URL(window.location.href);
+        return {
+            href: url.href,
+            sid: url.searchParams.get('sid') ?? undefined,
+            game: url.searchParams.get('game') ?? undefined,
+        };
+    }
+    catch {
+        return {};
+    }
+}
+/** 运行日志(§5):最近控制台行(level + text,截断、打码)。 */
+function collectLogs(limit = 50) {
+    try {
+        return getBrowserConsole()
+            .slice(-limit)
+            .map((e) => `[${e.level}] ${redact(e.text)}`.slice(0, 500));
+    }
+    catch {
+        return [];
+    }
+}
+/** 操作轨迹(§5):最近操作步骤。 */
+function collectTrajectory(limit = 50) {
+    try {
+        return readTrajectory({ limit }).entries;
+    }
+    catch {
+        return [];
+    }
+}
+/** 汇总采集一份 FeedbackContext。各维度独立 best-effort。 */
+export async function captureFeedbackContext() {
+    return {
+        env: collectEnv(),
+        session: collectSession(),
+        trajectory: collectTrajectory(),
+        logs: collectLogs(),
+    };
+}

package/dist/package/node/components/Feedback/store.js

@@ -0,0 +1,174 @@
+/**
+ * Feedback store — 「写反馈 / 我的反馈」面板的自包含状态。
+ *
+ * Why standalone: like healthStore, this stays out of the 3k-line app store.ts.
+ * It owns the panel open/tab state, the write-form draft, and the「我的反馈」
+ * list fetched from the server. Server is the SSOT for records (POST/GET/PATCH
+ * /api/feedback); this store only mirrors the list for display + holds the draft.
+ *
+ * 需求:docs/features/feedback-requirement-source.md。
+ * schema 契约 SSOT 在 @forgeax/types/feedback —— 这里只 import 类型,不重定义。
+ */
+import { create } from 'zustand';
+import { STORAGE_KEYS } from '../../lib/storageKeys.js';
+import { captureUiScreenshot } from '../../lib/ui-screenshot.js';
+import { captureFeedbackContext } from './collect.js';
+function readPersistedEmail() {
+    try {
+        return globalThis.localStorage?.getItem(STORAGE_KEYS.feedbackEmail)?.trim() ?? '';
+    }
+    catch {
+        return '';
+    }
+}
+function persistEmail(email) {
+    try {
+        const value = email.trim();
+        if (value)
+            globalThis.localStorage?.setItem(STORAGE_KEYS.feedbackEmail, value);
+        else
+            globalThis.localStorage?.removeItem(STORAGE_KEYS.feedbackEmail);
+    }
+    catch {
+        // The form remains usable when storage is unavailable or blocked.
+    }
+}
+export const useFeedbackStore = create((set, get) => ({
+    open: false,
+    tab: 'write',
+    context: null,
+    type: 'stuck',
+    description: '',
+    email: readPersistedEmail(),
+    screenshots: [],
+    submitting: false,
+    lastSubmitted: null,
+    submitError: null,
+    reports: [],
+    loading: false,
+    openPanel: (tab = 'write') => {
+        set({
+            open: true,
+            tab,
+            email: readPersistedEmail(),
+            lastSubmitted: null,
+            submitError: null,
+        });
+        // 打开即静默采集现场信息,不等提交(§1)。best-effort,失败不阻塞面板。
+        void captureFeedbackContext().then((context) => set({ context }));
+        // Header count must be available on the write tab too; refresh again when
+        // entering "mine" so its status list stays current.
+        void get().loadReports();
+    },
+    closePanel: () => set({ open: false }),
+    setTab: (tab) => {
+        set({ tab });
+        if (tab === 'mine')
+            void get().loadReports();
+    },
+    setType: (type) => set({ type }),
+    setDescription: (description) => set({ description }),
+    setEmail: (email) => {
+        persistEmail(email);
+        set({ email });
+    },
+    addScreenshot: (s) => set((st) => (st.screenshots.length >= 5 ? st : { screenshots: [...st.screenshots, s] })),
+    removeScreenshot: (index) => set((st) => ({ screenshots: st.screenshots.filter((_, i) => i !== index) })),
+    submit: async () => {
+        const st = get();
+        if (!st.description.trim()) {
+            set({ submitError: 'description-required' });
+            return;
+        }
+        if (!st.email.trim()) {
+            set({ submitError: 'email-required' });
+            return;
+        }
+        set({ submitting: true, submitError: null });
+        try {
+            const body = {
+                type: st.type,
+                source: 'manual',
+                description: st.description.trim(),
+                email: st.email.trim(),
+                ...(st.screenshots.length ? { screenshots: st.screenshots.map((s) => s.ref) } : {}),
+                // 上下文以提交时刻为准:优先用打开时采的,缺失则现场补采一次。
+                context: st.context ?? (await captureFeedbackContext()),
+            };
+            const r = await fetch('/api/feedback', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            const data = (await r.json());
+            if (!r.ok || !data.ok || !data.report) {
+                throw new Error(data.error ?? `submit failed (${r.status})`);
+            }
+            set({ lastSubmitted: { id: data.report.id }, submitting: false });
+        }
+        catch (error) {
+            set({ submitting: false, submitError: error.message });
+        }
+    },
+    submitAuto: async (incident) => {
+        // §4.3 零输入:不填描述/邮箱/类型,一律记为「崩溃或无响应」。
+        // 与 submit() 分开,是因为它既不读草稿也不写 lastSubmitted —— 被动卡片不展示回执。
+        // 现场必须以「异常触发时刻」为准(§5),不复用面板打开时那份快照。
+        const [context, screenshot] = await Promise.all([
+            captureFeedbackContext(),
+            captureUiScreenshot({ target: 'app' }),
+        ]);
+        const body = {
+            type: 'stuck',
+            source: 'auto',
+            exceptionKey: incident.exceptionKey,
+            context: { ...context, logs: [...(context.logs ?? []), incident.diagnostic] },
+            ...('dataUrl' in screenshot ? { screenshots: [screenshot.dataUrl] } : {}),
+        };
+        try {
+            await fetch('/api/feedback', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            // 列表可能正开着「我的反馈」;自动记录也要立刻可见。
+            if (get().open)
+                void get().loadReports();
+        }
+        catch { /* best effort —— 恢复动作比上报重要,失败不打断 */ }
+    },
+    loadReports: async () => {
+        set({ loading: true });
+        try {
+            const r = await fetch('/api/feedback');
+            const data = (await r.json());
+            set({ reports: data.ok && data.reports ? data.reports : [], loading: false });
+        }
+        catch {
+            set({ loading: false });
+        }
+    },
+    setStatus: async (id, status) => {
+        try {
+            const r = await fetch(`/api/feedback/${encodeURIComponent(id)}/status`, {
+                method: 'PATCH',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ status }),
+            });
+            const data = (await r.json());
+            if (r.ok && data.ok && data.report) {
+                set((st) => ({
+                    reports: st.reports.map((x) => (x.id === id ? data.report : x)),
+                }));
+            }
+        }
+        catch { /* best effort */ }
+    },
+    resetDraft: () => set({
+        type: 'stuck',
+        description: '',
+        screenshots: [],
+        lastSubmitted: null,
+        submitError: null,
+    }),
+}));

package/dist/package/node/components/LangSwitcher/LangSwitcher.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Languages, Check } from 'lucide-react';
+import { useTranslation } from '../../i18n/index.js';
+import { useShellStore } from '../../store.js';
+
+/**
+ * Agent reply-language switcher. Mounted in the Page "Agents · Team"
+ * header (top-right). Controls the language the agent replies in.
+ *
+ * Semantics (see lib/reply-language.ts):
+ *   - "Follow my input" (default ON, highest priority): the agent replies in the
+ *     detected language of each user message.
+ *   - Picking English / 中文 pins that language AND turns "follow input" OFF —
+ *     an explicit manual choice wins (pinReplyLanguage).
+ */
+export function LangSwitcher({ className = '' }) {
+    const { t } = useTranslation();
+    const replyLanguage = useShellStore((s) => s.replyLanguage);
+    const followInput = useShellStore((s) => s.followInput);
+    const pinReplyLanguage = useShellStore((s) => s.pinReplyLanguage);
+    const setFollowInput = useShellStore((s) => s.setFollowInput);
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onClick = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, [open]);
+    const label = followInput ? t('lang.auto') : replyLanguage === 'zh' ? '中' : 'En';
+    return (_jsxs("div", { className: `lang-switcher ${className}`, ref: rootRef, onKeyDown: (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setOpen(false);
+            }
+        }, tabIndex: -1, children: [_jsxs("button", { type: "button", className: `lang-switcher-btn ${followInput ? '' : 'is-pinned'}`, onClick: () => setOpen((v) => !v), title: t('lang.switcherTitle'), "aria-haspopup": "menu", "aria-expanded": open, children: [_jsx(Languages, { size: 14 }), _jsx("span", { className: "lang-switcher-label", children: label })] }), open && (_jsxs("div", { className: "lang-switcher-menu", role: "menu", children: [_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": followInput, className: `lang-switcher-item ${followInput ? 'is-current' : ''}`, onClick: () => { setFollowInput(true); setOpen(false); }, children: [_jsxs("span", { className: "lang-switcher-row", children: [_jsx("span", { children: t('lang.followInput') }), followInput && _jsx(Check, { size: 13 })] }), _jsx("span", { className: "lang-switcher-desc", children: t('lang.followInputDesc') })] }), _jsx("button", { type: "button", role: "menuitemradio", "aria-checked": !followInput && replyLanguage === 'en', className: `lang-switcher-item ${!followInput && replyLanguage === 'en' ? 'is-current' : ''}`, onClick: () => { pinReplyLanguage('en'); setOpen(false); }, children: _jsxs("span", { className: "lang-switcher-row", children: [_jsx("span", { children: "English" }), !followInput && replyLanguage === 'en' && _jsx(Check, { size: 13 })] }) }), _jsx("button", { type: "button", role: "menuitemradio", "aria-checked": !followInput && replyLanguage === 'zh', className: `lang-switcher-item ${!followInput && replyLanguage === 'zh' ? 'is-current' : ''}`, onClick: () => { pinReplyLanguage('zh'); setOpen(false); }, children: _jsxs("span", { className: "lang-switcher-row", children: [_jsx("span", { children: "\u4E2D\u6587" }), !followInput && replyLanguage === 'zh' && _jsx(Check, { size: 13 })] }) })] }))] }));
+}

package/dist/package/node/components/MainArea/ConsolePanel.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useShellStore } from '../../store.js';
+import { useTranslation } from '../../i18n/index.js';
+// ConsolePanel — a standalone dock panel for the engine/editor console stream
+// (the same `consoleLog` the Page bottom tab shows, surfaced as its own
+// dockable/floatable/pop-out-able panel). Reuses the existing console-row styles.
+export function ConsolePanel() {
+    const { t } = useTranslation();
+    const consoleLog = useShellStore((s) => s.consoleLog);
+    const clearConsole = useShellStore((s) => s.clearConsole);
+    return (_jsxs("div", { className: "fx-console-panel", children: [_jsxs("div", { className: "fx-console-bar", children: [_jsxs("span", { className: "fx-console-title", children: ["Console", consoleLog.length ? ` · ${consoleLog.length}` : ''] }), consoleLog.length > 0 && (_jsx("button", { type: "button", className: "fx-console-clear", onClick: () => clearConsole(), title: t('consolePanel.clearTitle'), children: "clear" }))] }), _jsxs("div", { className: "page-bottom-body thin-scrollbar fx-console-body", children: [consoleLog.length === 0 && (_jsx("div", { className: "wbb-row", style: { opacity: 0.5 }, children: _jsx("span", { children: t('consolePanel.empty') }) })), consoleLog.map((e, i) => {
+                        const d = new Date(e.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: `wbb-row console-row level-${e.level}`, children: [_jsx("span", { className: "wbb-time", children: stamp }), _jsx("span", { className: `wbb-tag console-${e.level}`, children: e.level }), _jsx("span", { className: "console-text", children: e.text })] }, i));
+                    })] })] }));
+}

package/dist/package/node/components/MainArea/MainArea.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShellSlot } from '@forgeax/app-shell/react';
+import { ViewportPanel } from './SurfacePanels.js';
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+
+// 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, {}) }));
+}