@forgeax/interface 0.4.1

package/dist/package/browser/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';
+import './TopBar.css';
+// 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/browser/components/TopBar/FsBrowser.css

@@ -0,0 +1,156 @@
+.fsb {
+  display: flex; flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.fsb-toolbar {
+  display: flex; gap: 6px; align-items: center;
+}
+.fsb-icon-btn {
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.08);
+  color: var(--text-secondary);
+  width: 28px; height: 26px;
+  border-radius: 4px;
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.fsb-icon-btn:hover:not(:disabled) {
+  background: rgba(255,255,255,0.1);
+  color: var(--text-primary);
+}
+.fsb-icon-btn:disabled { color: var(--color-icon-disabled); cursor: not-allowed; }
+.fsb-addr {
+  flex: 1; min-width: 0;
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 5px 8px;
+  border-radius: 4px;
+  outline: none;
+  font-family: var(--font-mono);
+}
+.fsb-addr:focus { border-color: var(--primary); }
+
+.fsb-list {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 4px;
+  height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.fsb-state {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 12px;
+}
+.fsb-state.fsb-err {
+  color: var(--accent-error);
+  background: rgba(255,107,107,0.06);
+  border-radius: 4px;
+  margin: 4px;
+  padding: 8px 10px;
+}
+.fsb-state.fsb-dim { color: var(--text-muted); }
+.fsb-spin { animation: fsbspin 1s linear infinite; }
+@keyframes fsbspin { to { transform: rotate(360deg); } }
+
+.fsb-row {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 6px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  text-align: left;
+}
+.fsb-row:hover { background: rgba(255,255,255,0.05); }
+.fsb-row-ico { flex-shrink: 0; color: var(--text-muted); }
+.fsb-row:hover .fsb-row-ico { color: var(--primary); }
+.fsb-row-name {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fsb-row-badges {
+  display: inline-flex; gap: 4px; flex-shrink: 0;
+}
+.fsb-badge {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.08);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+.fsb-badge.fsb-badge-game {
+  background: rgba(212,255,72,0.12);
+  color: var(--primary);
+}
+
+.fsb-footer {
+  display: flex; flex-direction: column;
+  gap: 6px;
+}
+.fsb-check {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+.fsb-check input { margin: 0; cursor: pointer; }
+.fsb-ext-err {
+  font-size: 11px;
+  color: var(--accent-error);
+  background: rgba(255,107,107,0.08);
+  padding: 6px 8px;
+  border-radius: 4px;
+}
+.fsb-actions {
+  display: flex; gap: 8px; justify-content: flex-end;
+  margin-top: 2px;
+}
+
+/* Modal grows to fit FsBrowser */
+.tb-modal.tb-modal-wide { width: 520px; }
+.tb-modal-tabs {
+  display: flex; gap: 4px;
+  background: rgba(0,0,0,0.25);
+  padding: 3px;
+  border-radius: 5px;
+  margin-bottom: 6px;
+}
+.tb-modal-tab {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.tb-modal-tab:hover { color: var(--text-secondary, rgba(255,255,255,0.8)); }
+.tb-modal-tab.active {
+  background: color-mix(in srgb, var(--primary) 14%, var(--color-background-elevated, #242424));
+  color: var(--primary);
+  font-weight: 600;
+}
+
+/* Source-tag for "registered" rows in ProjectSwitcher dropdown */
+.tb-game-source {
+  font-size: 9px;
+  padding: 0 5px;
+  border-radius: 7px;
+  background: rgba(212,255,72,0.12);
+  color: var(--primary);
+  font-family: var(--font-mono);
+  margin-left: 4px;
+}

package/dist/package/browser/components/TopBar/FsBrowser.d.ts

@@ -0,0 +1,8 @@
+export interface FsBrowserProps {
+    initialDir?: string;
+    onPick: (absPath: string) => void | Promise<void>;
+    onCancel: () => void;
+    busy?: boolean;
+    externalError?: string | null;
+}
+export declare function FsBrowser({ initialDir, onPick, onCancel, busy, externalError }: FsBrowserProps): import("react/jsx-runtime").JSX.Element;

package/dist/package/browser/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';
+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/browser/components/TopBar/GameSwitcher.d.ts

@@ -0,0 +1,29 @@
+import './TopBar.css';
+interface GameRow {
+    slug: string;
+    name: string;
+    fileCount: number;
+    mtime: number;
+}
+export declare function ProjectSessionRows({ games, currentSlug, onPick, onNewSession, onDelete, labels, }: {
+    readonly games: readonly GameRow[];
+    readonly currentSlug: string | null;
+    readonly onPick: (slug: string) => void;
+    readonly onNewSession: (slug: string) => void;
+    readonly onDelete: (slug: string) => void;
+    readonly labels: {
+        readonly empty: string;
+        readonly switchTo: (slug: string) => string;
+        readonly newSession: (slug: string) => string;
+        readonly delete: string;
+        readonly meta: (mtime: number) => string;
+    };
+}): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export declare function createSessionForGame(slug: string, dependencies: {
+    readonly setActiveGame: (slug: string) => Promise<unknown>;
+    readonly createNewSession: (options: {
+        readonly scope: string;
+    }) => Promise<unknown>;
+}): Promise<boolean>;
+export declare function GameModalHost(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/package/browser/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';
+import { getSessionClient } from '../../store-parts/session-client';
+import { getStudioProjectClient } from '../../store';
+import { confirmDialog, alertDialog } from '../../lib/dialog';
+import { listGameTemplates } from '../../lib/game-templates';
+import { useTranslation } from '../../i18n';
+import './TopBar.css';
+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') })] })] }) }));
+}

package/dist/package/browser/components/TopBar/IosPackageDialog.d.ts

@@ -0,0 +1,23 @@
+import './TopBar.css';
+export type IosOrientation = 'portrait' | 'landscape';
+export interface IosPackageConfig {
+    iosBundleId: string;
+    iosAppName: string;
+    iosProjectName: string;
+    iosIcon?: {
+        dataBase64: string;
+        filename: string;
+    };
+    iosOrientation: IosOrientation;
+}
+/** Derive a sane default bundle identifier from a slug (matches the backend). */
+export declare function defaultIosBundleId(slug: string): string;
+type T = (k: string, opts?: Record<string, string | number>) => string;
+export declare function IosPackageDialog({ slug, defaultAppName, onCancel, onConfirm, t }: {
+    slug: string;
+    defaultAppName: string;
+    onCancel: () => void;
+    onConfirm: (cfg: IosPackageConfig) => void;
+    t: T;
+}): import("react/jsx-runtime").JSX.Element;
+export {};