@forgeax/interface 0.4.1

package/dist/package/node/components/TopBar/TopBar.js

@@ -0,0 +1,606 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { createIntervalTaskLifecycle, createRestartableTimeoutTaskLifecycle, } from '@forgeax/app-shell/react';
+import { SessionSwitcher } from './SessionSwitcher.js';
+import { MenuBar } from '../MenuBar/index.js';
+import { AndroidPackageDialog } from './AndroidPackageDialog.js';
+import { IosPackageDialog } from './IosPackageDialog.js';
+import { STORAGE_KEYS } from '../../lib/storageKeys.js';
+import { CircleGauge, LayoutGrid, MessageSquare, Rocket, Settings, ShieldAlert, Check, X, Globe, Monitor, Laptop, Smartphone, Apple, ChevronDown, History, RefreshCw, Trash2, Loader2, Wrench, Eraser, UploadCloud, PlayCircle, FolderOpen, Copy, HelpCircle, Info, ChevronRight, CheckCircle2, Megaphone } from 'lucide-react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, } from '../ui/dropdown-menu.js';
+import { useConfirmToast } from '../../lib/useConfirmToast.js';
+import { useSurface } from '../../lib/surface.js';
+import { useShellStore } from '../../store.js';
+import { useCommand } from '../../core/app-shell/index.js';
+import { getStudioBuildClient, getStudioProjectClient } from '../../store.js';
+import { usePanelRenderers } from '../DockShell/panelRenderers.js';
+import { dashApi } from '../../lib/dashboard-api.js';
+import { alertDialog, confirmDialog } from '../../lib/dialog.js';
+import { listExtensions } from '../../lib/extension-api.js';
+import { useTranslation } from '../../i18n/index.js';
+import { FeedbackPanel } from '../Feedback/FeedbackPanel.js';
+import { useFeedbackStore } from '../Feedback/store.js';
+import { PublishOnboarding } from './PublishOnboarding.js';
+import { publishDoc } from './publish-options.js';
+
+function formatPackageError(value) {
+    if (typeof value === 'string')
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function useBusExtensionCount() {
+    const [state, setState] = useState({ kind: 'loading' });
+    useEffect(() => {
+        let cancelled = false;
+        const tick = async () => {
+            try {
+                const r = await dashApi.health();
+                if (cancelled)
+                    return;
+                if (!r.bus) {
+                    setState({ kind: 'down' });
+                    return;
+                }
+                setState({ kind: 'ok', extensionCount: r.bus.extensionCount, brokenCount: r.bus.brokenCount });
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setState({ kind: 'down' });
+            }
+        };
+        tick();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void tick(); },
+            intervalMs: 5_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, []);
+    return state;
+}
+function usePreviewWsCount() {
+    const [state, setState] = useState({ kind: 'loading' });
+    useEffect(() => {
+        let cancelled = false;
+        const tick = async () => {
+            try {
+                const r = await dashApi.health();
+                if (cancelled)
+                    return;
+                setState({ kind: 'ok', wsClients: r.wsClients });
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setState({ kind: 'down' });
+            }
+        };
+        tick();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void tick(); },
+            intervalMs: 5_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, []);
+    return state;
+}
+function useModelBindingCount() {
+    const [state, setState] = useState({ kind: 'loading' });
+    useEffect(() => {
+        let cancelled = false;
+        const tick = async () => {
+            try {
+                const r = await listExtensions('model-binding');
+                if (cancelled)
+                    return;
+                setState({ kind: 'ok', count: r.count, ids: r.items.map((p) => p.id) });
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setState({ kind: 'down' });
+            }
+        };
+        tick();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void tick(); },
+            intervalMs: 12_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, []);
+    return state;
+}
+function useCliProvidersHealth() {
+    const [state, setState] = useState({ kind: 'loading' });
+    useEffect(() => {
+        let cancelled = false;
+        const tick = async () => {
+            try {
+                const r = await dashApi.providers();
+                if (cancelled)
+                    return;
+                const rows = r.providers.map((p) => ({
+                    id: p.id,
+                    ok: !!p.health?.ok,
+                    detail: p.health?.detail,
+                }));
+                const ok = rows.filter((p) => p.ok).length;
+                setState({ kind: 'ok', ok, total: rows.length, rows });
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setState({ kind: 'down' });
+            }
+        };
+        tick();
+        const poll = createIntervalTaskLifecycle({
+            task: () => { void tick(); },
+            intervalMs: 10_000,
+        });
+        poll.start();
+        return () => {
+            cancelled = true;
+            poll.dispose();
+        };
+    }, []);
+    return state;
+}
+function TbDivider() {
+    return _jsx("span", { className: "tb-divider", "aria-hidden": "true" });
+}
+// DUAL-MODALITY 9.9 — host.toast surface schema. Mirrors the pending-confirm
+// list rendered by ConfirmToastList so AI can read what the player currently
+// sees as a confirm prompt. allow / deny actions are NOT exposed to AI on
+// purpose: AI must not auto-confirm its own pending tool calls.
+const HOST_TOAST_SCHEMA = {
+    type: 'object',
+    properties: {
+        pending: {
+            type: 'array',
+            items: {
+                type: 'object',
+                required: ['token', 'toolId', 'callerKind', 'receivedAt'],
+                properties: {
+                    token: { type: 'string' },
+                    toolId: { type: 'string' },
+                    callerKind: { type: 'string' },
+                    reason: { type: 'string' },
+                    receivedAt: { type: 'number' },
+                },
+            },
+        },
+    },
+};
+function ConfirmToastList({ confirms, onAck, onDeny }) {
+    if (confirms.length === 0)
+        return null;
+    return (_jsx("div", { className: "tb-confirm-list", role: "status", "aria-live": "polite", children: confirms.map((c) => (_jsxs("div", { className: "tb-confirm-toast", role: "alert", children: [_jsx(ShieldAlert, { size: 14, className: "tb-confirm-icon" }), _jsxs("span", { className: "tb-confirm-label", children: [_jsx("strong", { children: c.toolId }), _jsx("span", { className: "tb-confirm-caller", children: c.caller.kind }), c.message && _jsx("span", { className: "tb-confirm-reason", children: c.message }), !c.message && c.reason && _jsx("span", { className: "tb-confirm-reason", children: c.reason })] }), _jsxs("div", { className: "tb-confirm-actions", children: [_jsxs("button", { type: "button", className: "tb-confirm-btn tb-confirm-btn--allow", onClick: () => onAck(c.token), title: `Allow tool: ${c.toolId}`, children: [_jsx(Check, { size: 12 }), "Allow"] }), _jsxs("button", { type: "button", className: "tb-confirm-btn tb-confirm-btn--deny", onClick: () => onDeny(c.token), title: `Deny tool: ${c.toolId}`, children: [_jsx(X, { size: 12 }), "Deny"] })] })] }, c.token))) }));
+}
+export function TopBar() {
+    const { t } = useTranslation();
+    const hasChatSurface = Boolean(usePanelRenderers().panels?.chat);
+    const openOverlay = useShellStore((s) => s.openOverlay);
+    const activeGameSlug = useShellStore((s) => s.activeGameSlug);
+    const chatpanelCollapsed = useShellStore((s) => s.chatpanelCollapsed);
+    const toggleChatpanel = useShellStore((s) => s.toggleChatpanel);
+    // Route the LayoutGrid button through the command bus so keyboard / palette /
+    // iframe all share one entry (was: window.dispatchEvent(APP_EVENTS.dockLayoutToggle)).
+    const dockLayoutToggle = useCommand('app.dock.layoutToggle');
+    const [packaging, setPackaging] = useState(false);
+    const [packagingPlatform, setPackagingPlatform] = useState('');
+    const [rebuildEngine, setRebuildEngine] = useState(false);
+    const [engineRoots, setEngineRoots] = useState([]);
+    const [selectedEngineRoot, setSelectedEngineRoot] = useState(undefined);
+    const [showHistory, setShowHistory] = useState(false);
+    const [showProgress, setShowProgress] = useState(false);
+    const [progressPhase, setProgressPhase] = useState('');
+    const [progressLogs, setProgressLogs] = useState([]);
+    const [cleaning, setCleaning] = useState(false);
+    const [androidDialog, setAndroidDialog] = useState(null);
+    const [iosDialog, setIosDialog] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [onboardActive, setOnboardActive] = useState(false);
+    const { pendingConfirms, ack, deny } = useConfirmToast();
+    // Publish dropdown open-state is controlled so the first-run coach-mark can
+    // drive it (open it on option steps, close it on the intro). While the tour
+    // is active it owns menuOpen entirely — Radix's own open/close requests are
+    // ignored. On the very first open we kick off the tour instead.
+    const handleMenuOpenChange = (open) => {
+        if (onboardActive)
+            return;
+        if (open && !localStorage.getItem(STORAGE_KEYS.publishOnboarded)) {
+            localStorage.setItem(STORAGE_KEYS.publishOnboarded, '1');
+            setMenuOpen(false);
+            setOnboardActive(true);
+            return;
+        }
+        setMenuOpen(open);
+    };
+    // Detect engine-root candidates for the standalone export. The export script
+    // must run inside an engine root that has its deps (vite, @forgeax/*) — the
+    // live one is play-runtime, not the legacy engine-src.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const j = await getStudioBuildClient().getEngineRoots();
+                if (cancelled)
+                    return;
+                const roots = (j.roots ?? []);
+                setEngineRoots(roots);
+                const recommended = roots.find((x) => x.recommended) ?? roots.find((x) => x.valid);
+                if (recommended)
+                    setSelectedEngineRoot(recommended.path);
+            }
+            catch { /* leave empty — backend auto-detects on package */ }
+        })();
+        return () => { cancelled = true; };
+    }, []);
+    // Package the server-authoritative active game.
+    const resolvePackageSlug = async () => {
+        let slug = activeGameSlug;
+        if (!slug) {
+            try {
+                const j = await getStudioProjectClient().getActiveProject();
+                slug = j.activeSlug ?? null;
+            }
+            catch { /* fall through */ }
+        }
+        return slug ?? null;
+    };
+    // Android needs user config (applicationId / name / icon / orientation) before
+    // packaging, so it opens a dialog first and calls onPackageGame from onConfirm.
+    const openAndroidDialog = async () => {
+        if (packaging)
+            return;
+        const slug = await resolvePackageSlug();
+        if (!slug) {
+            await alertDialog({ title: t('topbar.package.title'), body: t('topbar.package.noGame') });
+            return;
+        }
+        setAndroidDialog({ slug, defaultAppName: slug });
+    };
+    // iOS also needs user config (bundleId / name / icon / orientation) before
+    // packaging, so it opens a dialog first and calls onPackageGame from onConfirm.
+    const openIosDialog = async () => {
+        if (packaging)
+            return;
+        const slug = await resolvePackageSlug();
+        if (!slug) {
+            await alertDialog({ title: t('topbar.package.title'), body: t('topbar.package.noGame') });
+            return;
+        }
+        setIosDialog({ slug, defaultAppName: slug });
+    };
+    const onPackageGame = async (platform, cfg) => {
+        if (packaging)
+            return;
+        const slug = await resolvePackageSlug();
+        if (!slug) {
+            await alertDialog({ title: t('topbar.package.title'), body: t('topbar.package.noGame') });
+            return;
+        }
+        setPackaging(true);
+        setPackagingPlatform(platform);
+        try {
+            const j = await getStudioBuildClient().buildProject(slug, {
+                targetPlatform: platform,
+                rebuildEngine,
+                forceRebuild: false,
+                engineRoot: selectedEngineRoot,
+                ...(cfg ?? {}),
+            });
+            // Async job (Windows / native platforms)
+            if (j.async && typeof j.jobId === 'string') {
+                setShowProgress(true);
+                setProgressPhase('starting');
+                setProgressLogs([]);
+                await pollJob(j.jobId, slug, platform);
+                return;
+            }
+            // Synchronous result (Web)
+            if (!j.ok) {
+                const detail = formatPackageError(j.detail || j.error || t('topbar.package.unknownError'));
+                console.error('[packager] build failed', { slug, platform, result: j, detail });
+                await alertDialog({
+                    title: t('topbar.package.failed'),
+                    body: _jsx("pre", { className: "tb-package-error", children: detail }),
+                });
+                return;
+            }
+            await alertDialog({
+                title: t('topbar.package.done', { slug, platform }),
+                body: (_jsx(PackageSuccessBody, { outDir: String(j.outDir ?? ''), runHint: String(j.runHint ?? ''), platform: platform, slug: slug, t: t })),
+            });
+        }
+        catch (e) {
+            const detail = formatPackageError(e?.message ?? e);
+            console.error('[packager] request failed', { slug, platform, error: e, detail });
+            await alertDialog({ title: t('topbar.package.failed'), body: _jsx("pre", { className: "tb-package-error", children: detail }) });
+        }
+        finally {
+            setPackaging(false);
+            setPackagingPlatform('');
+        }
+    };
+    const pollJob = async (jobId, slug, platform) => {
+        const INTERVAL = 1500;
+        const MAX_POLLS = 400;
+        for (let i = 0; i < MAX_POLLS; i++) {
+            await new Promise(r => setTimeout(r, INTERVAL));
+            try {
+                const job = (await getStudioBuildClient().pollBuildJob(jobId));
+                setProgressPhase(job.phase);
+                setProgressLogs(job.logTail.slice(-30));
+                if (job.status === 'success' || job.status === 'failed') {
+                    setShowProgress(false);
+                    setPackaging(false);
+                    setPackagingPlatform('');
+                    if (job.status === 'success') {
+                        const res = job.result ?? {};
+                        await alertDialog({
+                            title: t('topbar.package.done', { slug, platform }),
+                            body: (_jsx(PackageSuccessBody, { outDir: String(res.outDir ?? ''), runHint: String(res.runHint ?? ''), platform: platform, slug: slug, usedCachedShell: Boolean(res.usedCachedShell), t: t })),
+                        });
+                    }
+                    else {
+                        const res = job.result ?? {};
+                        const detail = formatPackageError(res.detail || res.error || t('topbar.package.unknownError'));
+                        console.error('[packager] build failed', { slug, platform, job, detail });
+                        await alertDialog({
+                            title: t('topbar.package.failed'),
+                            body: _jsx("pre", { className: "tb-package-error", children: detail }),
+                        });
+                    }
+                    return;
+                }
+            }
+            catch (e) {
+                console.error('[packager] polling failed', { jobId, slug, platform, error: e });
+                /* continue polling */
+            }
+        }
+        setShowProgress(false);
+        setPackaging(false);
+        setPackagingPlatform('');
+    };
+    const onRetryPackage = async (slug, platform) => {
+        setPackaging(true);
+        setPackagingPlatform(platform);
+        setShowHistory(false);
+        try {
+            const j = await getStudioBuildClient().buildProject(slug, {
+                targetPlatform: platform,
+                forceRebuild: true,
+                engineRoot: selectedEngineRoot,
+            });
+            if (j.async && typeof j.jobId === 'string') {
+                setShowProgress(true);
+                setProgressPhase('starting');
+                setProgressLogs([]);
+                await pollJob(j.jobId, slug, platform);
+            }
+        }
+        catch (e) {
+            const detail = formatPackageError(e?.message ?? e);
+            console.error('[packager] retry failed', { slug, platform, error: e, detail });
+            await alertDialog({ title: t('topbar.package.failed'), body: _jsx("pre", { className: "tb-package-error", children: detail }) });
+        }
+        finally {
+            setPackaging(false);
+            setPackagingPlatform('');
+        }
+    };
+    const onCleanCache = async () => {
+        if (packaging)
+            return;
+        if (!(await confirmDialog({
+            title: t('topbar.package.cleanTitle'),
+            body: (_jsxs("div", { style: { fontSize: 13, lineHeight: 1.6 }, children: [_jsx("div", { children: t('topbar.package.cleanBody') }), _jsxs("ul", { style: { margin: '6px 0 0', paddingLeft: 18, opacity: 0.85 }, children: [_jsx("li", { children: t('topbar.package.cleanItemToolchain') }), _jsx("li", { children: t('topbar.package.cleanItemShell') }), _jsx("li", { children: t('topbar.package.cleanItemTmp') })] }), _jsx("div", { style: { marginTop: 8, opacity: 0.7 }, children: t('topbar.package.cleanKeepHint') })] })),
+            danger: true,
+            confirmText: t('topbar.package.cleanConfirm'),
+        })))
+            return;
+        setCleaning(true);
+        try {
+            const j = await getStudioBuildClient().cleanBuilds();
+            const fmtSize = (b) => {
+                if (b <= 0)
+                    return '0 B';
+                const u = ['B', 'KB', 'MB', 'GB'];
+                let i = 0;
+                let n = b;
+                while (n >= 1024 && i < u.length - 1) {
+                    n /= 1024;
+                    i++;
+                }
+                return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${u[i]}`;
+            };
+            const anyError = j.targets.some((tg) => Boolean(tg.error));
+            setCleaning(false);
+            await alertDialog({
+                title: anyError ? t('topbar.package.cleanPartial') : t('topbar.package.cleanDone'),
+                body: (_jsxs("div", { style: { fontSize: 13, lineHeight: 1.6 }, children: [_jsx("div", { children: t('topbar.package.cleanFreed', { size: fmtSize(j.totalBytes) }) }), _jsx("ul", { style: { margin: '6px 0 0', paddingLeft: 18, fontSize: 12 }, children: j.targets.map((tg) => (_jsxs("li", { style: { opacity: tg.existed ? 1 : 0.5 }, children: [tg.error ? '✗' : tg.removed ? '✓' : '·', " ", tg.path, tg.removed && tg.bytes > 0 ? ` (${fmtSize(tg.bytes)})` : '', tg.error ? ` — ${tg.error}` : ''] }, tg.path))) })] })),
+            });
+        }
+        catch (e) {
+            setCleaning(false);
+            await alertDialog({ title: t('topbar.package.cleanFailed'), body: String(e?.message ?? e) });
+        }
+    };
+    // DUAL-MODALITY 9.9 — register host.toast surface so the AI can read the
+    // pending-confirm prompts the player currently sees. Snapshot mirrors
+    // pendingConfirms (slim shape — drops the caller blob besides kind). Actions
+    // allow/deny are exposedToAI=false to prevent AI from greenlighting its own
+    // gated tool calls; only the player path (button click) drives them.
+    const toastPendingSlim = useMemo(() => pendingConfirms.map((c) => ({
+        token: c.token,
+        toolId: c.toolId,
+        callerKind: c.caller.kind,
+        reason: c.reason,
+        receivedAt: c.receivedAt,
+    })), [pendingConfirms]);
+    const toastSurface = useSurface({
+        id: 'host.toast',
+        layer: 'host',
+        schema: HOST_TOAST_SCHEMA,
+        initialSnapshot: { pending: toastPendingSlim },
+        actions: {
+            allow: {
+                id: 'allow',
+                exposedToAI: false,
+                argsSchema: { type: 'object', required: ['token'], properties: { token: { type: 'string' } } },
+                run: (raw) => {
+                    const a = (raw ?? {});
+                    if (typeof a.token !== 'string')
+                        return;
+                    void ack(a.token);
+                },
+            },
+            deny: {
+                id: 'deny',
+                exposedToAI: false,
+                argsSchema: { type: 'object', required: ['token'], properties: { token: { type: 'string' } } },
+                run: (raw) => {
+                    const a = (raw ?? {});
+                    if (typeof a.token !== 'string')
+                        return;
+                    void deny(a.token);
+                },
+            },
+        },
+    });
+    useEffect(() => {
+        toastSurface.setSnapshot({ pending: toastPendingSlim });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [toastPendingSlim]);
+    // 2026-05-21 — TopBar 不再渲染模型选择器。原本 tb-right 挂了
+    // `<ModelPicker variant="pill">` 当真实选择器,但 Composer 底部也有一份,
+    // 两个 picker 各自跟 agent.json 异步轮询时会出现展示不一致(顶部还显示
+    // 上一次的 selected,底部已经切了),用户明确反馈"为什么有好几个选模型
+    // 的地方"。SSOT 收回 Composer (`ChatPanel/Composer.tsx <ModelPicker>`),
+    // TopBar 只留 Settings 入口和 cli-provider admin 快捷键。
+    // 2026-05-17 — useBusExtensionCount / usePageExtensionCount / usePreviewWsCount
+    // hooks no longer wired (count badges were removed). The function bodies are
+    // kept in this file for the moment in case future TopBar widgets want them;
+    // the unused-imports lint warning is tolerated.
+    // provHealth / mbCount hooks removed — pills collapsed to icon buttons (no count badges).
+    // Workspace tabs replace the old fixed mode tabs.
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "topbar", "data-tour-id": "topbar", children: [_jsxs("div", { className: "tb-left", "data-tour-id": "tb-left", children: [_jsx(MenuBar, {}), hasChatSurface && (_jsx("span", { "data-testid": "forge-entry", style: { display: 'contents' }, children: _jsx(SessionSwitcher, {}) }))] }), _jsxs("div", { className: "tb-right", "data-tour-id": "tb-right", children: [_jsxs("button", { type: "button", className: "tb-feedback-btn", title: t('feedback.tooltip'), onClick: () => useFeedbackStore.getState().openPanel('write'), children: [_jsx(Megaphone, { size: 16 }), _jsx("span", { children: t('feedback.button') })] }), _jsx(TbDivider, {}), hasChatSurface && (_jsx("button", { type: "button", className: "tb-icon-btn", "data-testid": "chat-panel-toggle", "aria-label": t(chatpanelCollapsed ? 'topbar.chatToggle.expand' : 'topbar.chatToggle.collapse'), "aria-pressed": !chatpanelCollapsed, title: t(chatpanelCollapsed ? 'topbar.chatToggle.expand' : 'topbar.chatToggle.collapse'), onClick: toggleChatpanel, children: _jsx(MessageSquare, { size: 16, fill: chatpanelCollapsed ? 'none' : 'currentColor', stroke: chatpanelCollapsed ? 'currentColor' : 'none' }) })), hasChatSurface && _jsx(TbDivider, {}), _jsx(DashboardToggle, {}), _jsx(TbDivider, {}), _jsx("button", { type: "button", className: "tb-icon-btn", title: t('topbar.layout.tooltip'), onClick: (e) => {
+                                    const r = e.currentTarget.getBoundingClientRect();
+                                    void dockLayoutToggle({ rect: { top: r.top, bottom: r.bottom, left: r.left, right: r.right } });
+                                }, children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(TbDivider, {}), _jsx("button", { type: "button", className: "tb-icon-btn", onClick: () => openOverlay('settings'), title: t('topbar.settings.tooltip'), children: _jsx(Settings, { size: 16 }) }), _jsx(TbDivider, {}), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: handleMenuOpenChange, modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "tb-publish-btn", disabled: packaging, title: packaging ? t('topbar.publish.packaging', { platform: packagingPlatform }) : t('topbar.publish.tooltip'), children: [_jsx(Rocket, { size: 16 }), _jsx(ChevronDown, { size: 10, style: { marginLeft: 2, opacity: 0.6 } })] }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "tb-publish-menu", children: [_jsx(DropdownMenuLabel, { children: t('topbar.package.menuTitle') }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { "data-onboard": "web", title: publishDoc(t, 'web').what, onClick: () => onPackageGame('web'), children: [_jsx(Globe, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformWeb') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'web').when })] })] }), _jsxs(DropdownMenuItem, { "data-onboard": "windows", title: publishDoc(t, 'windows').what, onClick: () => onPackageGame('windows'), children: [_jsx(Monitor, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformWindows') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'windows').when })] })] }), _jsxs(DropdownMenuItem, { "data-onboard": "macos", title: publishDoc(t, 'macos').what, onClick: () => onPackageGame('macos'), children: [_jsx(Laptop, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformMac') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'macos').when })] })] }), _jsxs(DropdownMenuItem, { "data-onboard": "android", disabled: packaging, title: publishDoc(t, 'android').what, onClick: () => { void openAndroidDialog(); }, children: [_jsx(Smartphone, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformAndroid') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'android').when })] })] }), _jsxs(DropdownMenuItem, { "data-onboard": "ios", disabled: packaging, title: publishDoc(t, 'ios').what, onClick: () => { void openIosDialog(); }, children: [_jsx(Apple, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformIos') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'ios').when })] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: true, title: publishDoc(t, 'cloud').what, children: [_jsx(UploadCloud, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.platformCloud') }), _jsx("span", { className: "tb-mi-sub", children: t('topbar.package.comingSoon') })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { style: { fontSize: 11, opacity: 0.6 }, title: publishDoc(t, 'engineRoot').what, children: t('topbar.package.engineRoot') }), engineRoots.length === 0 ? (_jsx(DropdownMenuItem, { disabled: true, style: { fontSize: 11, opacity: 0.5 }, children: t('topbar.package.engineRootNone') })) : (engineRoots.map((root) => (_jsxs(DropdownMenuItem, { disabled: !root.valid, onClick: (e) => { e.preventDefault(); if (root.valid)
+                                                    setSelectedEngineRoot(root.path); }, style: { gap: 6, opacity: root.valid ? 1 : 0.45 }, title: root.path, children: [_jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [root.label, !root.valid && _jsxs("span", { style: { marginLeft: 4, fontSize: 10, opacity: 0.7 }, children: ["(", t('topbar.package.engineRootInvalid'), ")"] })] }), _jsx("span", { style: { width: 14, height: 14, borderRadius: 3, border: '1px solid #666', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }, children: selectedEngineRoot === root.path ? '✓' : '' })] }, root.path)))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { "data-onboard": "engine", title: publishDoc(t, 'engine').what, onClick: (e) => { e.preventDefault(); setRebuildEngine(!rebuildEngine); }, style: { gap: 6 }, children: [_jsx(Wrench, { size: 14 }), _jsxs("span", { className: "tb-mi-txt", children: [_jsx("span", { className: "tb-mi-title", children: t('topbar.package.rebuildEngine') }), _jsx("span", { className: "tb-mi-sub", children: publishDoc(t, 'engine').when })] }), _jsx("span", { style: { width: 14, height: 14, borderRadius: 3, border: '1px solid #666', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }, children: rebuildEngine ? '✓' : '' })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { "data-onboard": "history", title: publishDoc(t, 'history').what, onClick: () => setShowHistory(true), children: [_jsx(History, { size: 14 }), t('topbar.package.history')] }), _jsxs(DropdownMenuItem, { "data-onboard": "clean", title: publishDoc(t, 'clean').what, onClick: (e) => { e.preventDefault(); void onCleanCache(); }, style: { gap: 6, color: 'var(--destructive, #e05260)' }, children: [_jsx(Eraser, { size: 14 }), t('topbar.package.clean')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: (e) => { e.preventDefault(); setOnboardActive(true); }, children: [_jsx(HelpCircle, { size: 14 }), t('topbar.package.viewGuide')] })] })] }), _jsx(PublishOnboarding, { active: onboardActive, onClose: () => setOnboardActive(false), setMenuOpen: setMenuOpen, t: t })] })] }), _jsx(ConfirmToastList, { confirms: pendingConfirms, onAck: ack, onDeny: deny }), _jsx(FeedbackPanel, {}), cleaning && (_jsx("div", { className: "tb-progress-overlay", children: _jsxs("div", { className: "tb-progress-dialog", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(Loader2, { size: 16, className: "tb-spinner" }), _jsx("span", { style: { fontWeight: 600 }, children: t('topbar.package.cleaning') })] }), _jsx("div", { style: { fontSize: 12, opacity: 0.75, marginTop: 6 }, children: t('topbar.package.cleaningHint') })] }) })), showProgress && _jsx(PackageProgressOverlay, { phase: progressPhase, logs: progressLogs, platform: packagingPlatform, onClose: () => { setShowProgress(false); }, t: t }), showHistory && _jsx(PackageHistoryDialog, { onClose: () => setShowHistory(false), onRetry: onRetryPackage, t: t }), androidDialog && (_jsx(AndroidPackageDialog, { slug: androidDialog.slug, defaultAppName: androidDialog.defaultAppName, t: t, onCancel: () => setAndroidDialog(null), onConfirm: (cfg) => { setAndroidDialog(null); void onPackageGame('android', cfg); } })), iosDialog && (_jsx(IosPackageDialog, { slug: iosDialog.slug, defaultAppName: iosDialog.defaultAppName, t: t, onCancel: () => setIosDialog(null), onConfirm: (cfg) => { setIosDialog(null); void onPackageGame('ios', cfg); } }))] }));
+}
+// GameSwitcher + NewGameModal + timeSince extracted → ./GameSwitcher (§D).
+// ── PackageSuccessBody ──
+// The body of the "packaging done" dialog. Turns the old read-only outDir /
+// runHint text into actionable buttons: one-click playtest (web), open the
+// product folder in the OS file manager, and copy the path / run command.
+function PackageSuccessBody({ outDir, runHint, platform, slug, usedCachedShell, t }) {
+    const [copied, setCopied] = useState(null);
+    const copiedResetTaskRef = useRef(null);
+    useEffect(() => {
+        const task = createRestartableTimeoutTaskLifecycle({
+            delayMs: 1600,
+            task: () => setCopied(null),
+        });
+        copiedResetTaskRef.current = task;
+        return () => {
+            copiedResetTaskRef.current = null;
+            task.dispose();
+        };
+    }, []);
+    const copy = async (text, which) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(which);
+            copiedResetTaskRef.current?.schedule();
+        }
+        catch { /* ignore */ }
+    };
+    const reveal = async () => {
+        try {
+            await fetch('/api/builds/reveal', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: outDir }) });
+        }
+        catch { /* ignore */ }
+    };
+    // Playtest is served by the studio server itself (same-origin, secure
+    // localhost context, correct .wasm MIME) — no npx/serve.sh spawn, so the tab
+    // opens instantly onto a ready server instead of a maybe-not-bound one.
+    const play = () => {
+        window.open(`/api/builds/play/${encodeURIComponent(slug)}/`, '_blank');
+    };
+    const isWeb = platform === 'web';
+    return (_jsxs("div", { className: "tb-pkg-success", children: [_jsxs("div", { className: "tb-pkg-head", children: [_jsx(CheckCircle2, { size: 20, className: "tb-pkg-head-ic" }), _jsx("span", { className: "tb-pkg-head-txt", children: t('topbar.package.success.ready') })] }), _jsxs("div", { className: "tb-pkg-path", children: [_jsx(FolderOpen, { size: 14, className: "tb-pkg-path-ic" }), _jsx("code", { className: "tb-pkg-path-txt", children: outDir })] }), _jsxs("div", { className: "tb-success-actions", children: [isWeb && (_jsxs("button", { type: "button", className: "tb-sa-btn primary", onClick: play, children: [_jsx(PlayCircle, { size: 18 }), _jsx("span", { children: t('topbar.package.success.play') })] })), _jsxs("button", { type: "button", className: `tb-sa-btn${isWeb ? '' : ' primary'}`, onClick: () => { void reveal(); }, children: [_jsx(FolderOpen, { size: 18 }), _jsx("span", { children: t('topbar.package.success.open') })] }), _jsxs("button", { type: "button", className: "tb-sa-btn", onClick: () => { void copy(outDir, 'path'); }, children: [copied === 'path' ? _jsx(Check, { size: 18 }) : _jsx(Copy, { size: 18 }), _jsx("span", { children: copied === 'path' ? t('topbar.package.success.copied') : t('topbar.package.success.copyPath') })] }), runHint && (_jsxs("button", { type: "button", className: "tb-sa-btn", onClick: () => { void copy(runHint, 'cmd'); }, children: [copied === 'cmd' ? _jsx(Check, { size: 18 }) : _jsx(Copy, { size: 18 }), _jsx("span", { children: copied === 'cmd' ? t('topbar.package.success.copied') : t('topbar.package.success.copyCmd') })] }))] }), runHint && (_jsxs("details", { className: "tb-pkg-cmd", children: [_jsxs("summary", { children: [_jsx(ChevronRight, { size: 13, className: "tb-pkg-cmd-caret" }), t('topbar.package.runLocally')] }), _jsx("pre", { children: runHint })] })), usedCachedShell && (_jsxs("div", { className: "tb-pkg-hint", children: [_jsx(Info, { size: 13 }), _jsx("span", { children: t('topbar.package.cachedShell') })] })), isWeb && (_jsxs("div", { className: "tb-pkg-hint", children: [_jsx(Info, { size: 13 }), _jsx("span", { children: t('topbar.package.webgpuHint') })] }))] }));
+}
+// ── PackageProgressOverlay ──
+// A polished "packaging in progress" card: an animated orb + humanized phase
+// label, an indeterminate shimmer bar (we have no % from the backend), the
+// latest build line, a reassuring hint, and a collapsible terminal log.
+function PackageProgressOverlay({ phase, logs, platform, onClose, t }) {
+    const logsRef = useRef(null);
+    const [showLogs, setShowLogs] = useState(false);
+    useEffect(() => {
+        if (logsRef.current)
+            logsRef.current.scrollTop = logsRef.current.scrollHeight;
+    }, [logs, showLogs]);
+    // Humanize the phase; fall back to the raw phase if no label key exists.
+    const labelKey = `topbar.package.phaseLabel.${phase}`;
+    const label = t(labelKey);
+    const phaseText = label === labelKey || label.startsWith('topbar.') ? phase : label;
+    const lastLine = logs.length ? logs[logs.length - 1] : '';
+    return (_jsx("div", { className: "tb-progress-overlay", onClick: (e) => { if (e.target === e.currentTarget)
+            onClose(); }, children: _jsxs("div", { className: "tb-progress-dialog tb-prog", children: [_jsxs("div", { className: "tb-prog-head", children: [_jsx("span", { className: "tb-prog-orb", children: _jsx(Loader2, { size: 20, className: "tb-spinner" }) }), _jsxs("div", { className: "tb-prog-headtxt", children: [_jsxs("div", { className: "tb-prog-title", children: [t('topbar.package.progressTitle'), platform && _jsx("span", { className: "tb-prog-badge", children: platform })] }), _jsx("div", { className: "tb-prog-phase", children: phaseText })] })] }), _jsx("div", { className: "tb-prog-bar", role: "progressbar", "aria-label": phaseText, children: _jsx("span", {}) }), lastLine && _jsx("div", { className: "tb-prog-line", children: lastLine }), _jsx("div", { className: "tb-prog-hint", children: t('topbar.package.progressHint') }), _jsxs("details", { className: "tb-prog-logbox", onToggle: (e) => setShowLogs(e.currentTarget.open), children: [_jsxs("summary", { children: [_jsx(ChevronRight, { size: 13, className: "tb-prog-caret" }), t('topbar.package.progressLogs')] }), _jsx("pre", { ref: logsRef, children: logs.join('\n') || '…' })] }), _jsx("div", { className: "tb-prog-foot", children: _jsx("button", { type: "button", className: "tb-prog-close", onClick: onClose, children: t('topbar.package.progressClose') }) })] }) }));
+}
+function PackageHistoryDialog({ onClose, onRetry, t }) {
+    const [records, setRecords] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const fetchHistory = async () => {
+        try {
+            const j = await getStudioBuildClient().listBuildHistory();
+            setRecords((j.records ?? []));
+        }
+        catch { /* empty */ }
+        setLoading(false);
+    };
+    useEffect(() => { fetchHistory(); }, []);
+    const handleDelete = async (id) => {
+        try {
+            await getStudioBuildClient().deleteBuildHistory(id, { clean: true });
+            setRecords(prev => prev.filter(r => r.id !== id));
+        }
+        catch { /* ignore */ }
+    };
+    const fmtDate = (ts) => new Date(ts).toLocaleString();
+    const fmtDuration = (ms) => ms >= 60000 ? `${(ms / 60000).toFixed(1)}m` : `${(ms / 1000).toFixed(1)}s`;
+    return (_jsx("div", { className: "tb-progress-overlay", onClick: (e) => { if (e.target === e.currentTarget)
+            onClose(); }, children: _jsxs("div", { className: "tb-progress-dialog", style: { minWidth: 420, maxHeight: '70vh' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }, children: [_jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: t('topbar.package.history') }), _jsx("button", { type: "button", onClick: onClose, style: { fontSize: 12, cursor: 'pointer', background: 'none', border: 'none', color: 'inherit' }, children: "\u2715" })] }), loading && _jsx("div", { style: { textAlign: 'center', padding: 20, opacity: 0.6 }, children: "\u2026" }), !loading && records.length === 0 && (_jsx("div", { style: { textAlign: 'center', padding: 20, opacity: 0.6 }, children: t('topbar.package.historyEmpty') })), _jsx("div", { style: { overflowY: 'auto', maxHeight: 'calc(70vh - 80px)' }, children: records.map((rec) => (_jsxs("div", { style: {
+                            padding: '8px 10px', borderBottom: '1px solid rgba(255,255,255,0.06)',
+                            display: 'flex', alignItems: 'center', gap: 8, fontSize: 12,
+                        }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: rec.status === 'success' ? '#4ade80' : '#f87171', flexShrink: 0 } }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { fontWeight: 500 }, children: [rec.slug, " \u2014 ", rec.platform, rec.usedCachedShell && _jsx("span", { style: { opacity: 0.5, marginLeft: 4 }, children: "(cached)" })] }), _jsxs("div", { style: { opacity: 0.6 }, children: [fmtDate(rec.createdAt), " \u00B7 ", fmtDuration(rec.durationMs), rec.error && _jsx("span", { style: { color: '#f87171', marginLeft: 4 }, children: rec.error.slice(0, 60) })] })] }), rec.status === 'failed' && (_jsxs("button", { type: "button", onClick: () => onRetry(rec.slug, rec.platform), style: { fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, padding: '2px 6px', borderRadius: 3, border: '1px solid rgba(255,255,255,0.15)', background: 'transparent', color: 'inherit' }, title: t('topbar.package.historyRetry'), children: [_jsx(RefreshCw, { size: 11 }), " ", t('topbar.package.historyRetry')] })), _jsx("button", { type: "button", onClick: () => handleDelete(rec.id), style: { fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, padding: '2px 6px', borderRadius: 3, border: '1px solid rgba(255,255,255,0.1)', background: 'transparent', color: 'inherit', opacity: 0.6 }, title: t('topbar.package.historyDelete'), children: _jsx(Trash2, { size: 11 }) })] }, rec.id))) })] }) }));
+}
+function DashboardToggle() {
+    const dashboardOpen = useShellStore((s) => s.activeOverlay === 'dashboard');
+    const openOverlay = useShellStore((s) => s.openOverlay);
+    const closeOverlay = useShellStore((s) => s.closeOverlay);
+    return (_jsx("button", { className: `tb-icon-btn${dashboardOpen ? ' active' : ''}`, onClick: () => (dashboardOpen ? closeOverlay() : openOverlay('dashboard')), title: "Dashboard \u2014 Run/Thread/Provider monitoring", children: _jsx(CircleGauge, { size: 16 }) }));
+}

package/dist/package/node/components/TopBar/publish-options.js

@@ -0,0 +1,28 @@
+// Single source of truth for the Publish dropdown's option metadata.
+//
+// The same list drives three surfaces so their wording can never drift:
+//   1. dropdown item `title` tooltip      → doc.what
+//   2. dropdown item subtitle (mi-sub)    → doc.when
+//   3. first-run coach-mark onboarding    → doc.what + doc.when + hint
+//
+// Copy lives in i18n under `topbar.package.doc.<id>.*`; this file only owns the
+// structural metadata (order, DOM anchor id, gray/coming-soon flag).
+/** Ordered as they appear in the dropdown. `gray` items render but the tour skips them. */
+export const PUBLISH_OPTIONS = [
+    { id: 'web', kind: 'target', place: 'left' },
+    { id: 'windows', kind: 'target', place: 'left' },
+    { id: 'macos', kind: 'target', place: 'left' },
+    { id: 'android', kind: 'target', place: 'left' },
+    { id: 'ios', kind: 'target', place: 'left' },
+    { id: 'cloud', kind: 'target', place: 'left', gray: true },
+    { id: 'engine', kind: 'option', place: 'left' },
+    { id: 'history', kind: 'tool', place: 'left' },
+    { id: 'clean', kind: 'tool', place: 'left' },
+];
+/** Resolve the what/when copy for an option from i18n (falls back to empty). */
+export function publishDoc(t, id) {
+    return {
+        what: t(`topbar.package.doc.${id}.what`),
+        when: t(`topbar.package.doc.${id}.when`),
+    };
+}