@forgeax/interface 0.4.1

package/dist/package/node/components/Surfaces/SurfaceOverlay.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Phase D2 — dev-mode surface overlay.
+ *
+ * A panel listing every `surface.expose` snapshot received from plugin
+ * iframes (07-INTERFACE-EXPOSURE.md §1.2). Lets the user / author / AI
+ * see "this UI element is equivalent to tool X with args Y" without
+ * cracking open devtools.
+ *
+ * UX: entry point is a `surfaces · N` chip in the global status bar
+ * (right slot). Clicking the chip toggles the panel; default closed so
+ * the workspace isn't covered. Production builds omit the entire
+ * subtree via the DEV gate on the wrapper.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { EyeOff, Play } from 'lucide-react';
+import { installEventSourceObservation } from '@forgeax/app-shell/react';
+import { listSurfaces, subscribeSurfaces } from '../../lib/surface-store.js';
+import { SchemaForm } from '../SchemaForm/SchemaForm.js';
+import { useTranslation } from '../../i18n/index.js';
+
+async function fetchTools() {
+    try {
+        const r = await fetch('/api/tools');
+        if (!r.ok)
+            return [];
+        const j = (await r.json());
+        return j.tools ?? [];
+    }
+    catch {
+        return [];
+    }
+}
+export function SurfaceOverlay() {
+    if (!import.meta.env.DEV)
+        return null;
+    return _jsx(SurfaceOverlayDev, {});
+}
+/** ADR-0030 §2.2 — dev-only surface overlay entry as a `custom` status-item.
+ *  The chip toggles a fixed-position overlay; `when` gates it to DEV builds so
+ *  production omits the subtree. Low priority → joins the right-slot carousel
+ *  pool rather than anchoring. */
+export const surfaceOverlayStatusItem = {
+    kind: 'status-item',
+    id: 'surface-overlay',
+    location: 'statusbar.right',
+    priority: 10,
+    when: () => import.meta.env.DEV,
+    item: { type: 'custom', render: () => _jsx(SurfaceOverlay, {}) },
+};
+function SurfaceOverlayDev() {
+    const { t } = useTranslation();
+    const [surfaces, setSurfaces] = useState(() => listSurfaces());
+    const [open, setOpen] = useState(false);
+    const [tools, setTools] = useState([]);
+    useEffect(() => {
+        const off = subscribeSurfaces(() => setSurfaces(listSurfaces()));
+        return off;
+    }, []);
+    // Doc 07 §4 — load tool catalog so the dev overlay can render a SchemaForm
+    // for each surface action whose `id` matches a registered tool. Re-fetched
+    // on plugin reload via SSE; cheap, ~1KB payload.
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        let cancelled = false;
+        const reload = () => fetchTools().then((next) => { if (!cancelled)
+            setTools(next); });
+        void reload();
+        const disposeObservation = installEventSourceObservation({
+            url: '/api/events/stream?topic=plugin.reloaded',
+            onEvent: () => { void reload(); },
+        });
+        return () => {
+            cancelled = true;
+            disposeObservation();
+        };
+    }, [open]);
+    const toolsById = useMemo(() => {
+        const m = new Map();
+        for (const tool of tools)
+            m.set(tool.id, tool);
+        return m;
+    }, [tools]);
+    // Chip lives inline in the strip slot; the overlay it toggles is a sibling
+    // fixed-position layer. Low priority so it joins the right-slot carousel
+    // pool rather than anchoring — a dev-only debugging surface shouldn't crowd
+    // out the always-visible state chips.
+    const chip = (_jsxs("button", { type: "button", className: `sb-chip fx-surf-chip${open ? ' fx-surf-chip-open' : ''}`, onClick: () => setOpen((v) => !v), title: open ? t('surfaces.chip.close') : t('surfaces.chip.open'), children: ["surfaces \u00B7 ", surfaces.length] }));
+    if (!open)
+        return chip;
+    return (_jsxs(_Fragment, { children: [chip, _jsxs("div", { className: "fx-surf-overlay", role: "complementary", "aria-label": "surface overlay", children: [_jsxs("div", { className: "fx-surf-overlay-head", children: [_jsxs("span", { className: "fx-surf-overlay-title", children: ["surfaces \u00B7 ", surfaces.length] }), _jsx("button", { type: "button", className: "fx-surf-overlay-hide", onClick: () => setOpen(false), title: t('common.close'), children: _jsx(EyeOff, { size: 12 }) })] }), _jsx("div", { className: "fx-surf-overlay-body", children: surfaces.length === 0 ? (_jsx("div", { className: "fx-surf-overlay-empty", children: t('surfaces.overlay.empty') })) : (surfaces.map((s) => (_jsx(SurfaceCard, { surface: s, toolsById: toolsById }, `${s.extensionId}:${s.surfaceId}`)))) })] })] }));
+}
+function SurfaceCard({ surface, toolsById, }) {
+    return (_jsxs("div", { className: "fx-surf-card", children: [_jsxs("div", { className: "fx-surf-card-head", children: [_jsx("span", { className: "fx-surf-plugin", children: surface.extensionId }), _jsx("span", { className: "fx-surf-id", children: surface.surfaceId })] }), _jsxs("ul", { className: "fx-surf-actions", children: [surface.actions.map((a) => (_jsx(SurfaceActionRow, { action: a, tool: toolsById.get(a.id), extensionId: surface.extensionId }, a.id))), surface.actions.length === 0 ? _jsx("li", { className: "fx-surf-empty", children: "(no actions)" }) : null] })] }));
+}
+/** D2 — single surface-action row. Has a "▶" toggle that opens an inline
+ *  SchemaForm seeded with the action's args snapshot + the tool's argsSchema
+ *  (when registered). Submitting POSTs `/api/tools/call` as caller=user
+ *  (page surface — the dev clicked the form). The legacy <pre>args view
+ *  is preserved for actions with no schema or no matching tool registration. */
+function SurfaceActionRow({ action, tool, extensionId, }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [result, setResult] = useState(null);
+    const argsSchema = (tool?.argsSchema ?? null);
+    const canRun = !!argsSchema && action.enabled !== false;
+    const submit = async (value) => {
+        setBusy(true);
+        setResult(null);
+        try {
+            const r = await fetch('/api/tools/call', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    toolId: action.id,
+                    args: value,
+                    caller: { kind: 'user', agentId: extensionId },
+                }),
+            });
+            const j = (await r.json());
+            setResult(j.ok ? 'ok' : (j.error ?? 'failed'));
+            if (j.ok)
+                setOpen(false);
+        }
+        catch (e) {
+            setResult(e.message);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("li", { className: `fx-surf-action${action.enabled ? '' : ' fx-surf-action-disabled'}`, children: [_jsx("code", { className: "fx-surf-action-id", children: action.id }), action.label ? _jsx("span", { className: "fx-surf-action-label", children: action.label }) : null, action.hotkey ? _jsx("kbd", { className: "fx-surf-hotkey", children: action.hotkey }) : null, canRun ? (_jsxs("button", { type: "button", className: "fx-surf-action-run", onClick: () => setOpen((v) => !v), title: open ? t('surfaces.action.formClose') : t('surfaces.action.formOpen'), children: [_jsx(Play, { size: 10 }), " ", open ? t('surfaces.action.collapse') : t('surfaces.action.run')] })) : null, !open && action.args ? _jsx("pre", { className: "fx-surf-args", children: summarizeArgs(action.args) }) : null, open && argsSchema ? (_jsxs("div", { className: "fx-surf-action-form", children: [_jsx(SchemaForm, { schema: argsSchema, initialValue: action.args, onSubmit: (v) => void submit(v), onCancel: () => setOpen(false), submitLabel: tool?.requireConfirm ? t('surfaces.action.runConfirm') : t('surfaces.action.run'), layout: "inline", busy: busy }), result ? _jsx("div", { className: "fx-surf-action-result", children: result }) : null] })) : null] }));
+}
+function summarizeArgs(args) {
+    try {
+        const s = JSON.stringify(args);
+        return s.length > 120 ? s.slice(0, 117) + '…' : s;
+    }
+    catch {
+        return String(args);
+    }
+}

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Smartphone, Image as ImageIcon, Trash2, RectangleHorizontal, RectangleVertical } from 'lucide-react';
+
+// Mirror the backend validation (AndroidPackager.ts) so bad input is caught
+// before the round-trip; the backend still re-validates as a safety net.
+const APP_ID_RE = /^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/;
+const PROJECT_NAME_RE = /^[A-Za-z0-9_-]+$/;
+const MAX_ICON_BYTES = 2 * 1024 * 1024;
+/** Derive a sane default applicationId from a slug (matches the backend). */
+export function defaultAndroidAppId(slug) {
+    let seg = slug.toLowerCase().replace(/[^a-z0-9]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');
+    if (!seg)
+        seg = 'app';
+    if (/^[0-9]/.test(seg))
+        seg = `g${seg}`;
+    return `com.forgeax.game.${seg}`;
+}
+export function AndroidPackageDialog({ slug, defaultAppName, onCancel, onConfirm, t }) {
+    const [appId, setAppId] = useState(defaultAndroidAppId(slug));
+    const [appName, setAppName] = useState(defaultAppName || slug);
+    const [projectName, setProjectName] = useState(slug);
+    const [orientation, setOrientation] = useState('landscape');
+    const [icon, setIcon] = useState();
+    const [iconError, setIconError] = useState('');
+    const fileInputRef = useRef(null);
+    const appIdValid = APP_ID_RE.test(appId.trim());
+    const appNameValid = appName.trim().length >= 1 && appName.trim().length <= 30;
+    const projectNameValid = PROJECT_NAME_RE.test(projectName.trim());
+    const canSubmit = appIdValid && appNameValid && projectNameValid && !iconError;
+    const onPickIcon = (e) => {
+        setIconError('');
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (file.type !== 'image/png') {
+            setIconError(t('topbar.android.iconErrType'));
+            return;
+        }
+        if (file.size > MAX_ICON_BYTES) {
+            setIconError(t('topbar.android.iconErrSize'));
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            const dataUrl = String(reader.result ?? '');
+            const comma = dataUrl.indexOf(',');
+            const b64 = comma >= 0 ? dataUrl.slice(comma + 1) : '';
+            setIcon({ dataBase64: b64, filename: file.name, previewUrl: dataUrl });
+        };
+        reader.onerror = () => setIconError(t('topbar.android.iconErrType'));
+        reader.readAsDataURL(file);
+    };
+    const submit = () => {
+        if (!canSubmit)
+            return;
+        onConfirm({
+            androidAppId: appId.trim(),
+            androidAppName: appName.trim(),
+            androidProjectName: projectName.trim(),
+            androidIcon: icon ? { dataBase64: icon.dataBase64, filename: icon.filename } : undefined,
+            androidOrientation: orientation,
+        });
+    };
+    const labelStyle = { fontSize: 12, fontWeight: 600, marginBottom: 4, display: 'block' };
+    const inputStyle = {
+        width: '100%', boxSizing: 'border-box', fontSize: 13, padding: '6px 8px', borderRadius: 4,
+        border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(0,0,0,0.25)', color: 'inherit',
+    };
+    const hintStyle = { fontSize: 11, opacity: 0.6, marginTop: 3 };
+    const errStyle = { fontSize: 11, color: '#f87171', marginTop: 3 };
+    return (_jsx("div", { className: "tb-progress-overlay", onClick: (e) => { if (e.target === e.currentTarget)
+            onCancel(); }, children: _jsxs("div", { className: "tb-progress-dialog", style: { minWidth: 440, maxWidth: 520 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }, children: [_jsx(Smartphone, { size: 16 }), _jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: t('topbar.android.title') })] }), _jsx("div", { style: { fontSize: 12, opacity: 0.7, marginBottom: 14 }, children: t('topbar.android.subtitle') }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: labelStyle, children: t('topbar.android.appIdLabel') }), _jsx("input", { style: { ...inputStyle, borderColor: appIdValid ? inputStyle.border : '#f87171' }, value: appId, spellCheck: false, autoCapitalize: "off", onChange: (e) => setAppId(e.target.value), placeholder: "com.acme.mygame" }), appIdValid
+                            ? _jsx("div", { style: hintStyle, children: t('topbar.android.appIdHint') })
+                            : _jsx("div", { style: errStyle, children: t('topbar.android.appIdError') })] }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: labelStyle, children: t('topbar.android.appNameLabel') }), _jsx("input", { style: { ...inputStyle, borderColor: appNameValid ? inputStyle.border : '#f87171' }, value: appName, onChange: (e) => setAppName(e.target.value), maxLength: 30 }), !appNameValid && _jsx("div", { style: errStyle, children: t('topbar.android.appNameError') })] }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: labelStyle, children: t('topbar.android.projectNameLabel') }), _jsx("input", { style: { ...inputStyle, borderColor: projectNameValid ? inputStyle.border : '#f87171' }, value: projectName, spellCheck: false, autoCapitalize: "off", onChange: (e) => setProjectName(e.target.value) }), projectNameValid
+                            ? _jsx("div", { style: hintStyle, children: t('topbar.android.projectNameHint') })
+                            : _jsx("div", { style: errStyle, children: t('topbar.android.projectNameError') })] }), _jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("label", { style: labelStyle, children: t('topbar.android.orientationLabel') }), _jsx("div", { style: { display: 'flex', gap: 8 }, children: ([
+                                { value: 'landscape', icon: _jsx(RectangleHorizontal, { size: 14 }), label: t('topbar.android.orientationLandscape') },
+                                { value: 'portrait', icon: _jsx(RectangleVertical, { size: 14 }), label: t('topbar.android.orientationPortrait') },
+                            ]).map((opt) => {
+                                const active = orientation === opt.value;
+                                return (_jsxs("button", { type: "button", onClick: () => setOrientation(opt.value), style: {
+                                        flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+                                        fontSize: 12, cursor: 'pointer', padding: '7px 10px', borderRadius: 4,
+                                        border: `1px solid ${active ? 'var(--accent, #3b82f6)' : 'rgba(255,255,255,0.15)'}`,
+                                        background: active ? 'rgba(59,130,246,0.18)' : 'rgba(0,0,0,0.25)',
+                                        color: 'inherit', fontWeight: active ? 600 : 400,
+                                    }, children: [opt.icon, opt.label] }, opt.value));
+                            }) }), _jsx("div", { style: hintStyle, children: t('topbar.android.orientationHint') })] }), _jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("label", { style: labelStyle, children: t('topbar.android.iconLabel') }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsx("div", { style: {
+                                        width: 56, height: 56, borderRadius: 10, flexShrink: 0,
+                                        border: '1px solid rgba(255,255,255,0.15)', overflow: 'hidden',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        background: 'rgba(0,0,0,0.25)',
+                                    }, children: icon
+                                        ? _jsx("img", { src: icon.previewUrl, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })
+                                        : _jsx(ImageIcon, { size: 22, style: { opacity: 0.4 } }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("button", { type: "button", onClick: () => { const el = fileInputRef.current; if (el) {
+                                                el.value = '';
+                                                el.click();
+                                            } }, style: {
+                                                display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, cursor: 'pointer',
+                                                padding: '5px 10px', borderRadius: 4, border: '1px solid rgba(255,255,255,0.18)',
+                                                background: 'transparent', color: 'inherit',
+                                            }, children: [_jsx(ImageIcon, { size: 13 }), t('topbar.android.iconPick')] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/png", style: { display: 'none' }, onChange: onPickIcon }), icon && (_jsxs("button", { type: "button", onClick: () => { setIcon(undefined); setIconError(''); }, title: t('topbar.android.iconRemove'), style: {
+                                                marginLeft: 8, fontSize: 12, cursor: 'pointer', background: 'none',
+                                                border: 'none', color: 'inherit', opacity: 0.6, display: 'inline-flex',
+                                                alignItems: 'center', gap: 3, verticalAlign: 'middle',
+                                            }, children: [_jsx(Trash2, { size: 12 }), " ", t('topbar.android.iconRemove')] })), _jsx("div", { style: hintStyle, children: icon ? icon.filename : t('topbar.android.iconHint') }), iconError && _jsx("div", { style: errStyle, children: iconError })] })] })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 18 }, children: [_jsx("button", { type: "button", onClick: onCancel, style: {
+                                fontSize: 13, cursor: 'pointer', padding: '6px 14px', borderRadius: 4,
+                                border: '1px solid rgba(255,255,255,0.18)', background: 'transparent', color: 'inherit',
+                            }, children: t('topbar.android.cancel') }), _jsx("button", { type: "button", onClick: submit, disabled: !canSubmit, style: {
+                                fontSize: 13, cursor: canSubmit ? 'pointer' : 'not-allowed', padding: '6px 14px',
+                                borderRadius: 4, border: 'none', color: '#fff',
+                                background: canSubmit ? 'var(--accent, #3b82f6)' : 'rgba(120,120,120,0.4)',
+                            }, children: t('topbar.android.confirm') })] })] }) }));
+}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// FsBrowser — server-side directory picker for an existing game directory.
+//
+// Folder-only navigation (the server endpoint only returns dirs). The caller
+// binds the selected directory as the active game.
+import { useCallback, useEffect, useState } from 'react';
+import { ArrowUp, FolderOpen, Folder, Home, Loader2 } from 'lucide-react';
+import { useTranslation } from '../../i18n/index.js';
+export function FsBrowser({ initialDir = '~', onPick, onCancel, busy, externalError }) {
+    const { t } = useTranslation();
+    const [dir, setDir] = useState(initialDir);
+    const [addrInput, setAddrInput] = useState(initialDir);
+    const [data, setData] = useState(null);
+    const [loadErr, setLoadErr] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [picking, setPicking] = useState(false);
+    const load = useCallback(async (target) => {
+        setLoading(true);
+        setLoadErr(null);
+        try {
+            const r = await fetch(`/api/fs/browse?dir=${encodeURIComponent(target)}`);
+            const j = (await r.json());
+            if (!r.ok || j.error) {
+                setLoadErr(j.error ?? `HTTP ${r.status}`);
+                setData(null);
+            }
+            else {
+                setData(j);
+                setAddrInput(j.dirDisplay);
+            }
+        }
+        catch (e) {
+            setLoadErr(e.message);
+            setData(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => { void load(dir); }, [dir, load]);
+    const enter = (name) => {
+        if (!data)
+            return;
+        setDir(`${data.dir.replace(/\/$/, '')}/${name}`);
+    };
+    const goParent = () => {
+        if (data?.parent)
+            setDir(data.parent);
+    };
+    const goHome = () => setDir('~');
+    const goAddr = () => {
+        const v = addrInput.trim();
+        if (v)
+            setDir(v);
+    };
+    // OS-native folder dialog, same endpoint the onboarding project step uses.
+    // The list stays authoritative afterwards: we only feed the picked path back
+    // into `dir` so the footer's "select this directory" acts on it.
+    const pickNative = async () => {
+        setPicking(true);
+        try {
+            const r = await fetch('/api/fs/pick-directory', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ initialDir: data?.dir ?? dir }),
+            });
+            const j = (await r.json().catch(() => null));
+            if (j?.cancelled)
+                return;
+            if (!r.ok || !j?.ok || !j.path) {
+                setLoadErr(j?.error ?? `HTTP ${r.status}`);
+                return;
+            }
+            setLoadErr(null);
+            // Same path as the current dir ⇒ no state change ⇒ no reload; that is the
+            // correct outcome, the user re-picked where they already were.
+            setDir(j.path);
+        }
+        catch (e) {
+            setLoadErr(e.message);
+        }
+        finally {
+            setPicking(false);
+        }
+    };
+    const onPickClick = () => {
+        if (!data)
+            return;
+        void onPick(data.dir);
+    };
+    return (_jsxs("div", { className: "fsb", children: [_jsxs("div", { className: "fsb-toolbar", children: [_jsx("button", { className: "fsb-icon-btn", onClick: goParent, disabled: !data?.parent || loading, title: t('fsBrowser.parentDir'), children: _jsx(ArrowUp, { size: 13 }) }), _jsx("button", { className: "fsb-icon-btn", onClick: goHome, disabled: loading, title: "HOME", children: _jsx(Home, { size: 13 }) }), _jsx("input", { className: "fsb-addr", value: addrInput, onChange: (e) => setAddrInput(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter')
+                            goAddr(); }, spellCheck: false, placeholder: "~/path/to/dir", title: t('fsBrowser.addrHint') }), _jsx("button", { className: "fsb-icon-btn", onClick: () => void pickNative(), disabled: loading || picking || busy, title: t('fsBrowser.browse'), children: picking ? _jsx(Loader2, { size: 13, className: "fsb-spin" }) : _jsx(FolderOpen, { size: 13 }) })] }), _jsxs("div", { className: "fsb-list", children: [loading && (_jsxs("div", { className: "fsb-state", children: [_jsx(Loader2, { size: 14, className: "fsb-spin" }), " ", t('common.loading')] })), !loading && loadErr && (_jsx("div", { className: "fsb-state fsb-err", children: loadErr })), !loading && !loadErr && data && data.entries.length === 0 && (_jsx("div", { className: "fsb-state fsb-dim", children: t('fsBrowser.emptyDir') })), !loading && !loadErr && data && data.entries.map((e) => (_jsxs("button", { className: "fsb-row", onClick: () => enter(e.name), title: `${data.dir.replace(/\/$/, '')}/${e.name}`, children: [_jsx(Folder, { size: 12, className: "fsb-row-ico" }), _jsx("span", { className: "fsb-row-name", children: e.name }), _jsxs("span", { className: "fsb-row-badges", children: [e.hasForgeaX && _jsx("span", { className: "fsb-badge", children: ".forgeax" }), e.hasGame && _jsx("span", { className: "fsb-badge fsb-badge-game", children: "game" })] })] }, e.name)))] }), _jsxs("div", { className: "fsb-footer", children: [externalError && _jsx("div", { className: "fsb-ext-err", children: externalError }), _jsxs("div", { className: "fsb-actions", children: [_jsx("button", { className: "tb-modal-btn", onClick: onCancel, disabled: busy, children: t('common.cancel') }), _jsx("button", { className: "tb-modal-btn primary", onClick: onPickClick, disabled: busy || !data, title: data ? t('fsBrowser.selectDir', { dir: data.dirDisplay }) : '', children: busy ? t('fsBrowser.processing') : t('fsBrowser.selectThisDir') })] })] })] }));
+}

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

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Game modal host + New Game modal + timeSince helper.
+//
+// 2026-07-23 — the always-on GameSwitcher dropdown was removed from the TopBar.
+// Game-specific commands still drive the new-game dialog and game list modal;
+// File → 打开游戏目录 is handled by the game-directory modal separately.
+// This file exports `GameModalHost` (mounted once in App.tsx);
+// `NewGameModal` + `timeSince` stay internal. The store flag `gameSwitcherOpen`
+// now means "the open-game list modal is open".
+import { useState, useEffect } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { useShellStore } from '../../store.js';
+import { getSessionClient } from '../../store-parts/session-client.js';
+import { getStudioProjectClient } from '../../store.js';
+import { confirmDialog, alertDialog } from '../../lib/dialog.js';
+import { listGameTemplates } from '../../lib/game-templates.js';
+import { useTranslation } from '../../i18n/index.js';
+
+export function ProjectSessionRows({ games, currentSlug, onPick, onNewSession, onDelete, labels, }) {
+    if (games.length === 0)
+        return _jsx("div", { className: "tb-game-empty", children: labels.empty });
+    return games.map((game) => (_jsxs("div", { className: `tb-game-row ${game.slug === currentSlug ? 'active' : ''}`, "data-game-slug": game.slug, children: [_jsxs("button", { className: "tb-game-pick", onClick: () => onPick(game.slug), title: labels.switchTo(game.slug), children: [_jsx("span", { className: "tb-game-name", children: game.name }), _jsx("span", { className: "tb-game-meta", children: labels.meta(game.mtime) })] }), _jsx("button", { className: "tb-game-del tb-game-add-session", onClick: () => onNewSession(game.slug), title: labels.newSession(game.slug), "aria-label": labels.newSession(game.slug), children: _jsx(Plus, { size: 13 }) }), _jsx("button", { className: "tb-game-del", onClick: () => onDelete(game.slug), title: labels.delete, children: _jsx(Trash2, { size: 11 }) })] }, game.slug)));
+}
+export async function createSessionForGame(slug, dependencies) {
+    await dependencies.setActiveGame(slug);
+    return Boolean(await dependencies.createNewSession({ scope: slug }));
+}
+// Mounted once in the shell (App.tsx). Renders the new-game dialog (game.new)
+// and the "open game" list modal (game.open), both driven by the shell store so
+// the File-menu commands can open them.
+export function GameModalHost() {
+    const { t } = useTranslation();
+    const listOpen = useShellStore((s) => s.gameSwitcherOpen);
+    const setListOpen = useShellStore((s) => s.setGameSwitcherOpen);
+    const gameModalOpen = useShellStore((s) => s.gameModalOpen);
+    const closeGameModal = useShellStore((s) => s.closeGameModal);
+    const [games, setGames] = useState([]);
+    const activeGameSlug = useShellStore((s) => s.activeGameSlug);
+    const setActiveGame = useShellStore((s) => s.setActiveGame);
+    const createNewSession = useShellStore((s) => s.createNewSession);
+    const currentSlug = activeGameSlug;
+    const reload = async () => {
+        try {
+            const j = await getStudioProjectClient().listProjects();
+            setGames(j.games ?? []);
+        }
+        catch { /* ignore */ }
+    };
+    // Load the game list when the "open game" modal opens (was a 6s poll on the
+    // always-on switcher; now on-demand since the list only shows in the modal).
+    useEffect(() => { if (listOpen)
+        void reload(); }, [listOpen]);
+    // Picking a game goes through the one authoritative active-game mutation.
+    const onPick = async (slug) => {
+        setListOpen(false);
+        await setActiveGame(slug);
+    };
+    const onDelete = async (slug) => {
+        if (!(await confirmDialog({ body: t('gameSwitcher.deleteConfirm', { slug }), danger: true })))
+            return;
+        try {
+            await getStudioProjectClient().deleteProject(slug);
+            await reload();
+        }
+        catch (e) {
+            void alertDialog({ title: t('gameSwitcher.deleteFailedTitle'), body: e.message });
+        }
+    };
+    const onNewSession = async (slug) => {
+        const created = await createSessionForGame(slug, { setActiveGame, createNewSession });
+        if (created)
+            setListOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [gameModalOpen && _jsx(NewGameModal, { onClose: () => { closeGameModal(); } }), listOpen && (_jsx("div", { className: "tb-modal-overlay", onClick: () => setListOpen(false), children: _jsxs("div", { className: "tb-modal", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "tb-modal-title", children: t('gameSwitcher.listTitle') }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 1, maxHeight: '60vh', overflowY: 'auto', marginTop: 4 }, children: _jsx(ProjectSessionRows, { games: games, currentSlug: currentSlug, onPick: (slug) => void onPick(slug), onNewSession: (slug) => void onNewSession(slug), onDelete: (slug) => void onDelete(slug), labels: {
+                                    empty: t('gameSwitcher.empty'),
+                                    switchTo: (slug) => t('gameSwitcher.switchToTooltip', { slug }),
+                                    newSession: (slug) => t('gameSwitcher.newSessionTooltip', { slug }),
+                                    delete: t('gameSwitcher.deleteTooltip'),
+                                    meta: (mtime) => t('gameSwitcher.gameMeta', { time: timeSince(mtime) }),
+                                } }) })] }) }))] }));
+}
+// Game-directory modal and game binding are extracted → ./ProjectSwitcher (§D).
+function timeSince(ms) {
+    const d = (Date.now() - ms) / 1000;
+    if (d < 60)
+        return `${Math.floor(d)}s`;
+    if (d < 3600)
+        return `${Math.floor(d / 60)}m`;
+    if (d < 86400)
+        return `${Math.floor(d / 3600)}h`;
+    return `${Math.floor(d / 86400)}d`;
+}
+function NewGameModal({ onClose }) {
+    const { t } = useTranslation();
+    const [slug, setSlug] = useState('');
+    const [name, setName] = useState('');
+    const [brief, setBrief] = useState('');
+    const [templates, setTemplates] = useState(null);
+    const [templateSlug, setTemplateSlug] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    const setActiveGame = useShellStore((s) => s.setActiveGame);
+    useEffect(() => {
+        let cancelled = false;
+        void listGameTemplates()
+            .then((items) => {
+            if (cancelled)
+                return;
+            setTemplates(items);
+            setTemplateSlug((current) => items.some((item) => item.slug === current) ? current : items[0]?.slug ?? '');
+        })
+            .catch(() => { if (!cancelled)
+            setTemplates([]); });
+        return () => { cancelled = true; };
+    }, []);
+    const submit = async () => {
+        const cleaned = slug.trim().toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/^-+|-+$/g, '');
+        if (!/^[a-z0-9][a-z0-9-]{0,40}$/.test(cleaned)) {
+            setErr(t('gameSwitcher.slugError'));
+            return;
+        }
+        setBusy(true);
+        setErr(null);
+        try {
+            const j = await getStudioProjectClient().createProject({
+                slug: cleaned,
+                name: name.trim() || cleaned,
+                brief: brief.trim(),
+                ...(templateSlug ? { template: templateSlug } : {}),
+            });
+            if (!j.ok) {
+                setErr(j.error ?? 'create failed');
+                setBusy(false);
+                return;
+            }
+            await setActiveGame(cleaned);
+            onClose();
+            // Kick Forge with the brief so the design pipeline starts immediately.
+            // Emit straight onto the new session's EventBus (server reflects
+            // user_input → chat session-stream renders it). The shell never imports
+            // chat — the bus IS the app-agnostic send channel.
+            if (brief.trim()) {
+                const st = useShellStore.getState();
+                const sid = st.activeSid;
+                if (sid) {
+                    const to = st.tabs.find((tb) => tb.sid === sid)?.agentId ?? undefined;
+                    void getSessionClient().emitForgeaXMessage(sid, t('gameSwitcher.kickoffMessage', { slug: cleaned, brief: brief.trim() }), to ? { to } : {});
+                }
+            }
+        }
+        catch (e) {
+            setErr(e.message);
+            setBusy(false);
+        }
+    };
+    return (_jsx("div", { className: "tb-modal-overlay", onClick: onClose, children: _jsxs("div", { className: "tb-modal", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "tb-modal-title", children: t('gameSwitcher.modalTitle') }), _jsx("label", { className: "tb-modal-label", children: t('gameSwitcher.slugLabel') }), _jsx("input", { autoFocus: true, className: "tb-modal-input", placeholder: "e.g. roguelike-deckbuilder", value: slug, onChange: (e) => setSlug(e.target.value) }), _jsx("label", { className: "tb-modal-label", children: t('gameSwitcher.nameLabel') }), _jsx("input", { className: "tb-modal-input", placeholder: t('gameSwitcher.namePlaceholder'), value: name, onChange: (e) => setName(e.target.value) }), _jsx("label", { className: "tb-modal-label", children: t('gameSwitcher.templateLabel') }), templates === null && _jsx("div", { className: "tb-modal-help", children: t('gameSwitcher.templateLoading') }), templates !== null && templates.length > 0 && (_jsx("select", { className: "tb-modal-select", value: templateSlug, onChange: (e) => setTemplateSlug(e.target.value), disabled: busy, children: templates.map((template) => (_jsx("option", { value: template.slug, children: template.name }, template.slug))) })), templates !== null && templates.length === 0 && _jsx("div", { className: "tb-modal-help", children: t('gameSwitcher.templateEmpty') }), _jsx("label", { className: "tb-modal-label", children: t('gameSwitcher.briefLabel') }), _jsx("textarea", { className: "tb-modal-textarea", placeholder: t('gameSwitcher.briefPlaceholder'), rows: 3, value: brief, onChange: (e) => setBrief(e.target.value) }), err && _jsx("div", { className: "tb-modal-error", children: err }), _jsxs("div", { className: "tb-modal-actions", children: [_jsx("button", { className: "tb-modal-btn", onClick: onClose, disabled: busy, children: t('common.cancel') }), _jsx("button", { className: "tb-modal-btn primary", onClick: submit, disabled: busy, children: busy ? t('gameSwitcher.creating') : t('gameSwitcher.create') })] })] }) }));
+}