@elizaos/agent 2.0.0-alpha.519 → 2.0.0-alpha.521

package/packages/app-core/src/components/apps/GameView.js

@@ -1,1133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Game View — embeds a running app's game client in an iframe.
- *
- * Features:
- * - Full-screen iframe for game client
- * - PostMessage auth for embedded app viewers
- * - Split-screen mode with agent logs panel
- * - Connection status indicator
- */
-import { packageNameToAppRouteSlug } from "@elizaos/shared";
-import { Button, Input, useDocumentVisibility, useIntervalWhenDocumentVisible, useTimeout, } from "@elizaos/ui";
-import { Pin, PinOff } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { client, } from "../../api";
-import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge";
-import { useBranding } from "../../config/branding";
-import { useMediaQuery } from "../../hooks";
-import { useApp } from "../../state";
-import { navigatePreOpenedWindow, openExternalUrl, preOpenWindow, } from "../../utils";
-import { formatTime } from "../../utils/format";
-import { getAppOperatorSurface } from "./surfaces/registry";
-import { buildViewerSessionKey, resolveEmbeddedViewerUrl, resolvePostMessageTargetOrigin, resolveViewerReadyEventType, shouldUseEmbeddedAppViewer, } from "./viewer-auth";
-export function buildDisconnectedSessionState(session) {
-    if (!session)
-        return null;
-    return {
-        ...session,
-        status: "disconnected",
-        canSendCommands: false,
-        controls: [],
-        goalLabel: null,
-        suggestedPrompts: [],
-        telemetry: null,
-        summary: session.displayName
-            ? `Session unavailable: ${session.displayName}`
-            : "Session unavailable.",
-    };
-}
-function getSteeringNotice(disposition, message) {
-    if (disposition === "queued") {
-        return {
-            tone: "info",
-            ttlMs: 2600,
-            text: message,
-        };
-    }
-    if (disposition === "accepted") {
-        return {
-            tone: "success",
-            ttlMs: 2400,
-            text: message,
-        };
-    }
-    return {
-        tone: "error",
-        ttlMs: 3200,
-        text: message,
-    };
-}
-function getSteeringFallbackMessage(disposition, defaultValue) {
-    if (disposition === "queued")
-        return "Command queued.";
-    if (disposition === "accepted")
-        return "Command accepted.";
-    if (disposition === "unsupported") {
-        return "This run does not support that steering channel.";
-    }
-    return defaultValue;
-}
-function getApiStatus(err) {
-    if (err &&
-        typeof err === "object" &&
-        "status" in err &&
-        typeof err.status === "number") {
-        return err.status;
-    }
-    return null;
-}
-/** Tag badge colors for logs panel. */
-const TAG_COLORS = {
-    agent: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
-    game: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
-    autonomy: { bg: "rgba(245, 158, 11, 0.15)", fg: "rgb(245, 158, 11)" },
-    websocket: { bg: "rgba(20, 184, 166, 0.15)", fg: "rgb(20, 184, 166)" },
-};
-export const DESKTOP_GAME_CLICK_AUDIT = [
-    {
-        id: "game-native-refresh",
-        entryPoint: "game",
-        label: "Refresh Native Window State",
-        expectedAction: "Refresh canvas bounds and GPU window state.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-    {
-        id: "game-native-focus",
-        entryPoint: "game",
-        label: "Focus Game Window",
-        expectedAction: "Focus the native game canvas window.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-    {
-        id: "game-native-visibility",
-        entryPoint: "game",
-        label: "Show/Hide Game Window",
-        expectedAction: "Show or hide the native game canvas window.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-    {
-        id: "game-native-always-on-top",
-        entryPoint: "game",
-        label: "Toggle Game Window Always On Top",
-        expectedAction: "Toggle whether the native game window floats above other windows.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-    {
-        id: "game-native-snapshot",
-        entryPoint: "game",
-        label: "Snapshot Game Window",
-        expectedAction: "Capture a native snapshot of the game canvas window.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-    {
-        id: "game-gpu-window",
-        entryPoint: "game",
-        label: "Launch GPU Diagnostics",
-        expectedAction: "Create or focus a safe GPU diagnostics window.",
-        runtimeRequirement: "desktop",
-        coverage: "automated",
-    },
-];
-export function DesktopGameWindowControls({ gameWindowId, }) {
-    const { t } = useApp();
-    const [busyAction, setBusyAction] = useState(null);
-    const [message, setMessage] = useState(null);
-    const [error, setError] = useState(null);
-    const [alwaysOnTop, setAlwaysOnTop] = useState(false);
-    const [boundsLabel, setBoundsLabel] = useState(t("gameview.BoundsUnavailable", { defaultValue: "Bounds unavailable." }));
-    const [gpuWindowId, setGpuWindowId] = useState(null);
-    const branding = useBranding();
-    const refresh = useCallback(async () => {
-        if (!gameWindowId) {
-            setBoundsLabel(t("gameview.WaitingForNativeGameWindow", {
-                defaultValue: "Waiting for native game window.",
-            }));
-            setAlwaysOnTop(false);
-        }
-        else {
-            const bounds = await invokeDesktopBridgeRequest({
-                rpcMethod: "canvasGetBounds",
-                ipcChannel: "canvas:getBounds",
-                params: { id: gameWindowId },
-            });
-            if (bounds) {
-                setBoundsLabel(`${bounds.width}x${bounds.height} @ ${bounds.x},${bounds.y}`);
-            }
-            try {
-                const windows = await invokeDesktopBridgeRequest({
-                    rpcMethod: "canvasListWindows",
-                    ipcChannel: "canvas:listWindows",
-                });
-                const currentWindow = windows?.windows.find((item) => item.id === gameWindowId);
-                setAlwaysOnTop(currentWindow?.alwaysOnTop ?? false);
-            }
-            catch (err) {
-                console.warn("[GameView] Failed to refresh game window pin state", err);
-            }
-        }
-        const gpuWindows = await invokeDesktopBridgeRequest({
-            rpcMethod: "gpuWindowList",
-            ipcChannel: "gpuWindow:list",
-        });
-        setGpuWindowId(gpuWindows?.windows[0]?.id ?? null);
-    }, [gameWindowId, t]);
-    useEffect(() => {
-        void refresh();
-    }, [refresh]);
-    const runAction = useCallback(async (id, action, successMessage, refreshAfter = true) => {
-        setBusyAction(id);
-        setError(null);
-        setMessage(null);
-        try {
-            await action();
-            if (refreshAfter) {
-                await refresh();
-            }
-            if (successMessage) {
-                setMessage(successMessage);
-            }
-        }
-        catch (err) {
-            setError(err instanceof Error
-                ? err.message
-                : t("gameview.NativeGameActionFailed", {
-                    defaultValue: "Native game action failed.",
-                }));
-        }
-        finally {
-            setBusyAction(null);
-        }
-    }, [refresh, t]);
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded border border-border px-2 py-1 text-2xs text-muted", children: boundsLabel }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-refresh", async () => { }, t("gameview.NativeGameStateRefreshed", {
-                    defaultValue: "Native game state refreshed.",
-                })), disabled: busyAction === "game-native-refresh", children: t("gameview.RefreshNativeState", {
-                    defaultValue: "Refresh Native State",
-                }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-focus", async () => {
-                    if (!gameWindowId) {
-                        throw new Error(t("gameview.GameWindowNotReadyYet", {
-                            defaultValue: "Game window not ready yet.",
-                        }));
-                    }
-                    await invokeDesktopBridgeRequest({
-                        rpcMethod: "canvasFocus",
-                        ipcChannel: "canvas:focus",
-                        params: { id: gameWindowId },
-                    });
-                }, t("gameview.FocusedNativeGameWindow", {
-                    defaultValue: "Focused native game window.",
-                }), false), disabled: !gameWindowId || busyAction === "game-native-focus", children: t("gameview.FocusWindow", { defaultValue: "Focus Window" }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-show", async () => {
-                    if (!gameWindowId) {
-                        throw new Error(t("gameview.GameWindowNotReadyYet", {
-                            defaultValue: "Game window not ready yet.",
-                        }));
-                    }
-                    await invokeDesktopBridgeRequest({
-                        rpcMethod: "canvasShow",
-                        ipcChannel: "canvas:show",
-                        params: { id: gameWindowId },
-                    });
-                }, t("gameview.ShownNativeGameWindow", {
-                    defaultValue: "Shown native game window.",
-                }), false), disabled: !gameWindowId || busyAction === "game-native-show", children: t("gameview.ShowWindow", { defaultValue: "Show Window" }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-hide", async () => {
-                    if (!gameWindowId) {
-                        throw new Error(t("gameview.GameWindowNotReadyYet", {
-                            defaultValue: "Game window not ready yet.",
-                        }));
-                    }
-                    await invokeDesktopBridgeRequest({
-                        rpcMethod: "canvasHide",
-                        ipcChannel: "canvas:hide",
-                        params: { id: gameWindowId },
-                    });
-                }, t("gameview.HidNativeGameWindow", {
-                    defaultValue: "Hid native game window.",
-                }), false), disabled: !gameWindowId || busyAction === "game-native-hide", children: t("gameview.HideWindow", { defaultValue: "Hide Window" }) }), _jsxs(Button, { variant: alwaysOnTop ? "default" : "outline", size: "sm", className: "h-7 gap-1.5 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-always-on-top", async () => {
-                    if (!gameWindowId) {
-                        throw new Error(t("gameview.GameWindowNotReadyYet", {
-                            defaultValue: "Game window not ready yet.",
-                        }));
-                    }
-                    const next = !alwaysOnTop;
-                    const result = await invokeDesktopBridgeRequest({
-                        rpcMethod: "canvasSetAlwaysOnTop",
-                        ipcChannel: "canvas:setAlwaysOnTop",
-                        params: { id: gameWindowId, flag: next },
-                    });
-                    if (!result?.success) {
-                        throw new Error(t("gameview.GameWindowNoLongerOpen", {
-                            defaultValue: "Game window is no longer open.",
-                        }));
-                    }
-                    setAlwaysOnTop(next);
-                }, alwaysOnTop
-                    ? t("gameview.NativeGameWindowNormal", {
-                        defaultValue: "Native game window acts like a normal window.",
-                    })
-                    : t("gameview.NativeGameWindowPinned", {
-                        defaultValue: "Native game window stays on top.",
-                    })), disabled: !gameWindowId || busyAction === "game-native-always-on-top", children: [alwaysOnTop ? (_jsx(PinOff, { className: "h-3.5 w-3.5", "aria-hidden": "true" })) : (_jsx(Pin, { className: "h-3.5 w-3.5", "aria-hidden": "true" })), alwaysOnTop
-                        ? t("gameview.NormalWindow", { defaultValue: "Normal Window" })
-                        : t("gameview.KeepOnTop", { defaultValue: "Keep On Top" })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-native-snapshot", async () => {
-                    if (!gameWindowId) {
-                        throw new Error(t("gameview.GameWindowNotReadyYet", {
-                            defaultValue: "Game window not ready yet.",
-                        }));
-                    }
-                    const snapshot = await invokeDesktopBridgeRequest({
-                        rpcMethod: "canvasSnapshot",
-                        ipcChannel: "canvas:snapshot",
-                        params: { id: gameWindowId, format: "png" },
-                    });
-                    if (!snapshot?.data) {
-                        throw new Error(t("gameview.SnapshotUnavailable", {
-                            defaultValue: "Snapshot unavailable.",
-                        }));
-                    }
-                }, t("gameview.CapturedNativeGameSnapshot", {
-                    defaultValue: "Captured native game snapshot.",
-                }), false), disabled: !gameWindowId || busyAction === "game-native-snapshot", children: t("gameview.SnapshotWindow", { defaultValue: "Snapshot Window" }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-gpu-window", async () => {
-                    const created = await invokeDesktopBridgeRequest({
-                        rpcMethod: "gpuWindowCreate",
-                        ipcChannel: "gpuWindow:create",
-                        params: {
-                            id: "gpu-diagnostics",
-                            title: `${branding.appName} GPU Diagnostics`,
-                            width: 640,
-                            height: 360,
-                        },
-                    });
-                    const nextGpuWindowId = created?.id ?? gpuWindowId;
-                    if (nextGpuWindowId) {
-                        await invokeDesktopBridgeRequest({
-                            rpcMethod: "gpuWindowShow",
-                            ipcChannel: "gpuWindow:show",
-                            params: { id: nextGpuWindowId },
-                        });
-                        await invokeDesktopBridgeRequest({
-                            rpcMethod: "gpuWindowGetInfo",
-                            ipcChannel: "gpuWindow:getInfo",
-                            params: { id: nextGpuWindowId },
-                        });
-                        setGpuWindowId(nextGpuWindowId);
-                    }
-                }, t("gameview.GpuDiagnosticsWindowReady", {
-                    defaultValue: "GPU diagnostics window ready.",
-                })), disabled: busyAction === "game-gpu-window", children: t("gameview.LaunchGpuDiagnostics", {
-                    defaultValue: "Launch GPU Diagnostics",
-                }) }), gpuWindowId && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-gpu-show", async () => {
-                            await invokeDesktopBridgeRequest({
-                                rpcMethod: "gpuWindowShow",
-                                ipcChannel: "gpuWindow:show",
-                                params: { id: gpuWindowId },
-                            });
-                        }, t("gameview.GpuDiagnosticsWindowShown", {
-                            defaultValue: "GPU diagnostics window shown.",
-                        }), false), disabled: busyAction === "game-gpu-show", children: t("gameview.ShowGpuWindow", {
-                            defaultValue: "Show GPU Window",
-                        }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void runAction("game-gpu-hide", async () => {
-                            await invokeDesktopBridgeRequest({
-                                rpcMethod: "gpuWindowHide",
-                                ipcChannel: "gpuWindow:hide",
-                                params: { id: gpuWindowId },
-                            });
-                        }, t("gameview.GpuDiagnosticsWindowHidden", {
-                            defaultValue: "GPU diagnostics window hidden.",
-                        }), false), disabled: busyAction === "game-gpu-hide", children: t("gameview.HideGpuWindow", {
-                            defaultValue: "Hide GPU Window",
-                        }) })] })), (message || error) && (_jsx("span", { className: `text-2xs ${error ? "text-danger" : "text-ok"}`, children: error ?? message }))] }));
-}
-export function GameView() {
-    const { setTimeout } = useTimeout();
-    const { appRuns, activeGameRunId, activeGameApp, activeGameDisplayName, activeGameViewerUrl, activeGameSandbox, activeGamePostMessageAuth, activeGamePostMessagePayload, activeGameSession, gameOverlayEnabled, logs, logLoadError, loadLogs, setState, setActionNotice, t, } = useApp();
-    const isElectrobun = isElectrobunRuntime();
-    const isCompactLayout = useMediaQuery("(max-width: 1023px)");
-    const [stopping, setStopping] = useState(false);
-    const [attachingViewer, setAttachingViewer] = useState(false);
-    const [detachingViewer, setDetachingViewer] = useState(false);
-    const [showLogsPanel, setShowLogsPanel] = useState(false);
-    const [showDiagnostics, setShowDiagnostics] = useState(false);
-    const [mobileSurface, setMobileSurface] = useState("game");
-    const docVisible = useDocumentVisibility();
-    const [connectionStatus, setConnectionStatus] = useState("connecting");
-    const [chatInput, setChatInput] = useState("");
-    const [sendingChat, setSendingChat] = useState(false);
-    const [sessionBusyAction, setSessionBusyAction] = useState(null);
-    const [sessionState, setSessionState] = useState(activeGameSession);
-    const [gameWindowId, setGameWindowId] = useState(null);
-    const gameWindowIdRef = useRef(null);
-    const appRunsRef = useRef(appRuns);
-    const activeGameSessionRef = useRef(activeGameSession);
-    const sessionStateRef = useRef(sessionState);
-    const refreshSessionPromiseRef = useRef(null);
-    const iframeRef = useRef(null);
-    const authSentRef = useRef(false);
-    const viewerSessionRef = useRef("");
-    const activeGameRun = useMemo(() => appRuns.find((run) => run.runId === activeGameRunId) ?? null, [activeGameRunId, appRuns]);
-    const useEmbeddedViewer = useMemo(() => shouldUseEmbeddedAppViewer(activeGameRun), [activeGameRun]);
-    const useNativeGameWindow = Boolean(isElectrobun &&
-        activeGameRun?.viewer?.url &&
-        activeGameRun.viewerAttachment === "attached" &&
-        !useEmbeddedViewer);
-    const OperatorSurface = useMemo(() => getAppOperatorSurface(activeGameApp), [activeGameApp]);
-    const hasOperatorSurface = Boolean(OperatorSurface);
-    const openOperatorPanelByDefault = activeGameApp !== "@hyperscape/plugin-hyperscape" &&
-        activeGameApp !== "@elizaos/app-hyperscape";
-    const resolvedActiveGameViewerUrl = useMemo(() => resolveEmbeddedViewerUrl(activeGameViewerUrl), [activeGameViewerUrl]);
-    const resolvedActiveGameLaunchUrl = useMemo(() => resolveEmbeddedViewerUrl(activeGameRun?.launchUrl ?? ""), [activeGameRun?.launchUrl]);
-    const dashboardPanelEnabled = !hasOperatorSurface || openOperatorPanelByDefault;
-    const hasActiveRun = Boolean(activeGameRun);
-    const hasViewer = Boolean(activeGameRun?.viewer?.url);
-    const viewerAttached = activeGameRun?.viewerAttachment === "attached";
-    const openableUrl = resolvedActiveGameViewerUrl || resolvedActiveGameLaunchUrl || "";
-    const canAttachViewer = Boolean(activeGameRun?.viewer?.url) &&
-        activeGameRun?.viewerAttachment === "detached";
-    const canDetachViewer = activeGameRun?.viewerAttachment === "attached" &&
-        (activeGameRun?.supportsViewerDetach ?? true);
-    useEffect(() => {
-        appRunsRef.current = appRuns;
-    }, [appRuns]);
-    useEffect(() => {
-        activeGameSessionRef.current = activeGameSession;
-    }, [activeGameSession]);
-    useEffect(() => {
-        sessionStateRef.current = sessionState;
-    }, [sessionState]);
-    const applySessionState = useCallback((nextSession) => {
-        setSessionState(nextSession);
-        sessionStateRef.current = nextSession;
-        if (!activeGameRunId)
-            return;
-        const currentRuns = appRunsRef.current;
-        const nextUpdatedAt = new Date().toISOString();
-        const nextRuns = currentRuns.map((run) => {
-            if (run.runId !== activeGameRunId)
-                return run;
-            const nextHealth = nextSession?.status === "disconnected"
-                ? {
-                    state: "degraded",
-                    message: nextSession.summary ?? run.summary ?? "Session unavailable.",
-                }
-                : nextSession
-                    ? {
-                        state: "healthy",
-                        message: nextSession.summary ?? null,
-                    }
-                    : run.health;
-            return {
-                ...run,
-                session: nextSession,
-                status: nextSession?.status ?? run.status,
-                summary: nextSession?.summary ?? run.summary,
-                updatedAt: nextUpdatedAt,
-                lastHeartbeatAt: nextSession ? nextUpdatedAt : run.lastHeartbeatAt,
-                health: nextHealth,
-            };
-        });
-        appRunsRef.current = nextRuns;
-        setState("appRuns", nextRuns);
-    }, [activeGameRunId, setState]);
-    const applyRunState = useCallback((nextRun) => {
-        if (!nextRun)
-            return;
-        const nextUpdatedAt = new Date().toISOString();
-        setSessionState(nextRun.session ?? null);
-        sessionStateRef.current = nextRun.session ?? null;
-        if (nextRun.runId !== activeGameRunId)
-            return;
-        const currentRuns = appRunsRef.current;
-        const nextRuns = currentRuns.map((run) => {
-            if (run.runId !== nextRun.runId)
-                return run;
-            const nextHealth = nextRun.health ??
-                (nextRun.session?.status === "disconnected"
-                    ? {
-                        state: "degraded",
-                        message: nextRun.session.summary ??
-                            nextRun.summary ??
-                            "Session unavailable.",
-                    }
-                    : nextRun.session
-                        ? {
-                            state: "healthy",
-                            message: nextRun.session.summary ?? null,
-                        }
-                        : run.health);
-            return {
-                ...run,
-                ...nextRun,
-                updatedAt: nextUpdatedAt,
-                lastHeartbeatAt: nextRun.session
-                    ? nextUpdatedAt
-                    : run.lastHeartbeatAt,
-                health: nextHealth,
-            };
-        });
-        appRunsRef.current = nextRuns;
-        setState("appRuns", nextRuns);
-    }, [activeGameRunId, setState]);
-    const refreshSessionState = useCallback(async () => {
-        if (refreshSessionPromiseRef.current) {
-            return refreshSessionPromiseRef.current;
-        }
-        const refreshTask = (async () => {
-            const currentSession = sessionStateRef.current ?? activeGameSessionRef.current;
-            if (activeGameRunId) {
-                try {
-                    const nextRun = await client.getAppRun(activeGameRunId);
-                    if (nextRun) {
-                        applyRunState(nextRun);
-                        setConnectionStatus(nextRun.health.state === "offline" ||
-                            nextRun.session?.status === "disconnected"
-                            ? "disconnected"
-                            : "connected");
-                        return nextRun.session ?? null;
-                    }
-                }
-                catch (err) {
-                    console.warn("[GameView] Failed to refresh app run state:", err);
-                    if (!activeGameApp || !currentSession?.sessionId) {
-                        setConnectionStatus("disconnected");
-                        return currentSession ?? null;
-                    }
-                }
-            }
-            if (!activeGameApp || !currentSession?.sessionId)
-                return null;
-            try {
-                const nextSession = await client.getAppSessionState(activeGameApp, currentSession.sessionId);
-                applySessionState(nextSession);
-                setConnectionStatus("connected");
-                return nextSession;
-            }
-            catch (err) {
-                console.warn("[GameView] Failed to refresh app session state:", err);
-                if (activeGameRunId) {
-                    setConnectionStatus("disconnected");
-                    return currentSession ?? null;
-                }
-                applySessionState(buildDisconnectedSessionState(currentSession));
-                setConnectionStatus("disconnected");
-                return null;
-            }
-        })();
-        refreshSessionPromiseRef.current = refreshTask;
-        try {
-            return await refreshTask;
-        }
-        finally {
-            if (refreshSessionPromiseRef.current === refreshTask) {
-                refreshSessionPromiseRef.current = null;
-            }
-        }
-    }, [activeGameRunId, activeGameApp, applyRunState, applySessionState]);
-    useEffect(() => {
-        setSessionState(activeGameSession);
-        sessionStateRef.current = activeGameSession;
-    }, [activeGameSession]);
-    useEffect(() => {
-        setShowLogsPanel(dashboardPanelEnabled);
-        setMobileSurface("game");
-    }, [dashboardPanelEnabled]);
-    useEffect(() => {
-        if (!activeGameRunId && !activeGameSession?.sessionId)
-            return;
-        void refreshSessionState();
-    }, [activeGameRunId, activeGameSession?.sessionId, refreshSessionState]);
-    useIntervalWhenDocumentVisible(() => {
-        void refreshSessionState();
-    }, 3000, Boolean(activeGameRunId || activeGameSession?.sessionId));
-    // Cheap liveness ping — separate from the 3s session refresh so it still
-    // fires when the upstream game API is degraded. The server's stale-run
-    // sweeper uses this to decide whether to stop a run whose UI tab has
-    // gone silent. Pauses while the document is hidden; the sweeper's
-    // 90s grace window covers brief tab-switching.
-    useIntervalWhenDocumentVisible(() => {
-        if (!activeGameRunId)
-            return;
-        void client.heartbeatAppRun(activeGameRunId).catch((err) => {
-            // 404 means the run was reaped (sweeper or another window) — drop
-            // local state so the user sees the empty-state UI instead of a
-            // ghost session that no longer exists server-side.
-            const status = getApiStatus(err);
-            if (status === 404) {
-                setState("appRuns", appRunsRef.current.filter((run) => run.runId !== activeGameRunId));
-                setState("activeGameRunId", "");
-            }
-        });
-    }, 15_000, Boolean(activeGameRunId));
-    // Clean up server-side state when the browser tab closes. `sendBeacon`
-    // is the only request method browsers reliably deliver during unload —
-    // a normal `fetch` would be cancelled. Falls through silently if the
-    // browser is too old or the run is already gone.
-    useEffect(() => {
-        if (!activeGameRunId)
-            return;
-        const handleUnload = () => {
-            const beacon = navigator?.sendBeacon;
-            if (typeof beacon !== "function")
-                return;
-            const baseUrl = client.getBaseUrl();
-            const stopPath = `/api/apps/runs/${encodeURIComponent(activeGameRunId)}/stop`;
-            const stopUrl = baseUrl ? `${baseUrl}${stopPath}` : stopPath;
-            beacon.call(navigator, stopUrl);
-        };
-        window.addEventListener("pagehide", handleUnload);
-        window.addEventListener("beforeunload", handleUnload);
-        return () => {
-            window.removeEventListener("pagehide", handleUnload);
-            window.removeEventListener("beforeunload", handleUnload);
-        };
-    }, [activeGameRunId]);
-    const sendChatCommand = useCallback(async (rawContent) => {
-        const content = rawContent.trim();
-        if (!content)
-            return;
-        const currentSession = sessionState ?? activeGameSession;
-        const currentRun = activeGameRun ?? null;
-        setSendingChat(true);
-        try {
-            if (currentRun?.runId) {
-                const response = (await client.sendAppRunMessage(currentRun.runId, content));
-                if (response.run) {
-                    applyRunState(response.run);
-                }
-                else if (response.session) {
-                    applySessionState(response.session);
-                }
-                const notice = getSteeringNotice(response.disposition, response.message ||
-                    getSteeringFallbackMessage(response.disposition, t("gameview.CommandSentToAppRun", {
-                        defaultValue: "Command sent to app run.",
-                    })));
-                setActionNotice(notice.text, notice.tone, notice.ttlMs);
-                if (response.disposition === "accepted" ||
-                    response.disposition === "queued") {
-                    if (!response.run && !response.session) {
-                        await refreshSessionState();
-                    }
-                    setChatInput("");
-                    setTimeout(() => void loadLogs(), 1500);
-                }
-            }
-            else if (currentSession?.sessionId &&
-                currentSession.canSendCommands) {
-                const response = await client.sendAppSessionMessage(activeGameApp, currentSession.sessionId, content);
-                if (response.session) {
-                    applySessionState(response.session);
-                }
-                else {
-                    await refreshSessionState();
-                }
-                setActionNotice(response.message ||
-                    t("gameview.CommandSentToAppSession", {
-                        defaultValue: "Command sent to app session.",
-                    }), "success", 2400);
-                setChatInput("");
-                setTimeout(() => void loadLogs(), 1500);
-            }
-            else {
-                setActionNotice(t("gameview.RunSteeringUnsupported", {
-                    defaultValue: "This run does not expose a steering channel yet.",
-                }), "error", 3200);
-            }
-        }
-        catch (err) {
-            const status = getApiStatus(err);
-            setActionNotice(status === 501 || status === 503
-                ? t("gameview.RunSteeringUnsupported", {
-                    defaultValue: "This run does not expose a steering channel yet.",
-                })
-                : t("gameview.FailedToSend", {
-                    defaultValue: "Failed to send: {{message}}",
-                    message: err instanceof Error ? err.message : "error",
-                }), "error", 3000);
-        }
-        finally {
-            setSendingChat(false);
-        }
-    }, [
-        activeGameApp,
-        activeGameSession,
-        applySessionState,
-        loadLogs,
-        refreshSessionState,
-        setActionNotice,
-        setTimeout,
-        sessionState,
-        t,
-        activeGameRun,
-        applyRunState,
-    ]);
-    const handleSendChat = useCallback(() => {
-        void sendChatCommand(chatInput);
-    }, [chatInput, sendChatCommand]);
-    const activeSessionState = sessionState ?? activeGameSession;
-    const sessionControlAction = useMemo(() => {
-        if (activeSessionState?.controls?.includes("pause"))
-            return "pause";
-        if (activeSessionState?.controls?.includes("resume"))
-            return "resume";
-        return null;
-    }, [activeSessionState]);
-    const handleSessionControl = useCallback(async () => {
-        if (!activeGameRunId ||
-            !activeGameApp ||
-            !activeGameSession?.sessionId ||
-            !sessionControlAction)
-            return;
-        setSessionBusyAction(sessionControlAction);
-        try {
-            const response = (await client.controlAppRun(activeGameRunId, sessionControlAction));
-            if (response.run) {
-                applyRunState(response.run);
-            }
-            else if (response.session) {
-                applySessionState(response.session);
-            }
-            const notice = getSteeringNotice(response.disposition, response.message ||
-                getSteeringFallbackMessage(response.disposition, t("gameview.SessionControlSent", {
-                    defaultValue: "Session control updated.",
-                })));
-            setActionNotice(notice.text, notice.tone, notice.ttlMs);
-            if ((response.disposition === "accepted" ||
-                response.disposition === "queued") &&
-                !response.run &&
-                !response.session) {
-                await refreshSessionState();
-            }
-        }
-        catch (err) {
-            const status = getApiStatus(err);
-            setActionNotice(status === 501 || status === 503
-                ? t("gameview.SessionControlUnsupported", {
-                    defaultValue: "This run does not expose session controls.",
-                })
-                : t("gameview.SessionControlFailed", {
-                    defaultValue: "Failed to update session: {{message}}",
-                    message: err instanceof Error ? err.message : "error",
-                }), "error", 3200);
-        }
-        finally {
-            setSessionBusyAction(null);
-        }
-    }, [
-        activeGameApp,
-        activeGameSession?.sessionId,
-        applySessionState,
-        refreshSessionState,
-        sessionControlAction,
-        setActionNotice,
-        t,
-        activeGameRunId,
-        applyRunState,
-    ]);
-    const postMessageTargetOrigin = useMemo(() => resolvePostMessageTargetOrigin(activeGameViewerUrl), [activeGameViewerUrl]);
-    const viewerSessionKey = useMemo(() => buildViewerSessionKey(activeGameViewerUrl, activeGamePostMessagePayload), [activeGamePostMessagePayload, activeGameViewerUrl]);
-    // Filter logs relevant to the current game
-    const gameLogs = useMemo(() => {
-        if (!activeGameApp)
-            return [];
-        const appKeyword = (packageNameToAppRouteSlug(activeGameApp) ?? activeGameApp).toLowerCase();
-        return logs.filter((entry) => {
-            const message = (entry.message ?? "").toLowerCase();
-            const source = (entry.source ?? "").toLowerCase();
-            const tags = (entry.tags ?? []).map((t) => t.toLowerCase());
-            return (message.includes(appKeyword) ||
-                source.includes(appKeyword) ||
-                tags.some((t) => t.includes(appKeyword)) ||
-                tags.includes("game") ||
-                tags.includes("autonomy") ||
-                source.includes("agent"));
-        });
-    }, [activeGameApp, logs]);
-    // Auto-refresh logs when panel is open and tab is visible (catch-up on focus).
-    useEffect(() => {
-        if (!showLogsPanel || !docVisible)
-            return;
-        void loadLogs();
-    }, [showLogsPanel, docVisible, loadLogs]);
-    useIntervalWhenDocumentVisible(() => {
-        void loadLogs();
-    }, 3000, showLogsPanel);
-    // Open the game URL in an isolated Electrobun BrowserWindow.
-    // Runs whenever the viewer URL or game title changes and we're inside the desktop app.
-    useEffect(() => {
-        if (!useNativeGameWindow || !resolvedActiveGameViewerUrl)
-            return;
-        let cancelled = false;
-        void invokeDesktopBridgeRequest({
-            rpcMethod: "gameOpenWindow",
-            ipcChannel: "game:openWindow",
-            params: {
-                url: resolvedActiveGameViewerUrl,
-                title: activeGameDisplayName ||
-                    activeGameApp ||
-                    t("common.game", { defaultValue: "Game" }),
-            },
-        })
-            .then((result) => {
-            if (cancelled)
-                return;
-            if (result?.id) {
-                gameWindowIdRef.current = result.id;
-                setGameWindowId(result.id);
-                setConnectionStatus("connected");
-            }
-        })
-            .catch((err) => {
-            console.warn("[GameView] game:openWindow failed:", err);
-            // Fall through — iframe fallback is still rendered
-        });
-        return () => {
-            cancelled = true;
-            // Close the game window when GameView unmounts or the URL changes
-            if (gameWindowIdRef.current) {
-                void invokeDesktopBridgeRequest({
-                    rpcMethod: "canvasDestroyWindow",
-                    ipcChannel: "canvas:destroyWindow",
-                    params: { id: gameWindowIdRef.current },
-                }).catch(() => { });
-                gameWindowIdRef.current = null;
-                setGameWindowId(null);
-            }
-        };
-    }, [
-        activeGameApp,
-        activeGameDisplayName,
-        resolvedActiveGameViewerUrl,
-        t,
-        useNativeGameWindow,
-    ]);
-    // Reset auth handshake state when the active viewer session changes.
-    useEffect(() => {
-        if (viewerSessionRef.current !== viewerSessionKey) {
-            viewerSessionRef.current = viewerSessionKey;
-            authSentRef.current = false;
-        }
-        if (activeGamePostMessageAuth && useEmbeddedViewer) {
-            setConnectionStatus("connecting");
-            return;
-        }
-        if (useNativeGameWindow) {
-            setConnectionStatus("connecting");
-            return;
-        }
-        setConnectionStatus("connected");
-    }, [
-        activeGamePostMessageAuth,
-        useEmbeddedViewer,
-        useNativeGameWindow,
-        viewerSessionKey,
-    ]);
-    const resetActiveGameState = useCallback(() => {
-        setSessionState(null);
-        setState("activeGameRunId", "");
-    }, [setState]);
-    useEffect(() => {
-        if (!useEmbeddedViewer ||
-            !activeGamePostMessageAuth ||
-            !activeGamePostMessagePayload)
-            return;
-        if (authSentRef.current)
-            return;
-        const expectedReadyType = resolveViewerReadyEventType(activeGamePostMessagePayload);
-        if (!expectedReadyType)
-            return;
-        const onMessage = (event) => {
-            if (authSentRef.current)
-                return;
-            const iframeWindow = iframeRef.current?.contentWindow;
-            if (!iframeWindow || event.source !== iframeWindow)
-                return;
-            if (event.data?.type !== expectedReadyType)
-                return;
-            if (postMessageTargetOrigin !== "*" &&
-                event.origin !== postMessageTargetOrigin) {
-                return;
-            }
-            iframeWindow.postMessage(activeGamePostMessagePayload, postMessageTargetOrigin);
-            authSentRef.current = true;
-            setConnectionStatus("connected");
-            setActionNotice(t("gameview.ViewerAuthSent", { defaultValue: "Viewer auth sent." }), "info", 1800);
-        };
-        window.addEventListener("message", onMessage);
-        return () => {
-            window.removeEventListener("message", onMessage);
-        };
-    }, [
-        activeGamePostMessageAuth,
-        activeGamePostMessagePayload,
-        postMessageTargetOrigin,
-        setActionNotice,
-        t,
-        useEmbeddedViewer,
-    ]);
-    const handleOpenInNewTab = useCallback(async () => {
-        if (!openableUrl) {
-            setActionNotice(t("gameview.ViewerUnavailable", {
-                defaultValue: "No viewer or launch URL is available for this run.",
-            }), "error", 3200);
-            return;
-        }
-        const popup = preOpenWindow();
-        try {
-            if (popup) {
-                navigatePreOpenedWindow(popup, openableUrl);
-            }
-            else {
-                await openExternalUrl(openableUrl);
-            }
-        }
-        catch {
-            setActionNotice(t("appsview.PopupBlocked", {
-                defaultValue: "Popup blocked. Allow popups and try again.",
-            }), "error", 3600);
-        }
-    }, [openableUrl, setActionNotice, t]);
-    const handleAttachViewer = useCallback(async () => {
-        if (!activeGameRun)
-            return;
-        setAttachingViewer(true);
-        try {
-            const result = await client.attachAppRun(activeGameRun.runId);
-            if (result.run) {
-                applyRunState(result.run);
-            }
-            setActionNotice(result.message ||
-                t("gameview.ViewerAttached", {
-                    defaultValue: "Viewer attached.",
-                }), "success", 2200);
-        }
-        catch (err) {
-            setActionNotice(t("gameview.ViewerAttachFailed", {
-                defaultValue: "Failed to attach viewer: {{message}}",
-                message: err instanceof Error ? err.message : "error",
-            }), "error", 3600);
-        }
-        finally {
-            setAttachingViewer(false);
-        }
-    }, [activeGameRun, applyRunState, setActionNotice, t]);
-    const handleDetachViewer = useCallback(async () => {
-        if (!activeGameRun)
-            return;
-        setDetachingViewer(true);
-        try {
-            const result = await client.detachAppRun(activeGameRun.runId);
-            if (result.run) {
-                applyRunState(result.run);
-            }
-            setActionNotice(result.message ||
-                t("gameview.ViewerDetached", {
-                    defaultValue: "Viewer detached.",
-                }), "success", 2200);
-        }
-        catch (err) {
-            setActionNotice(t("gameview.ViewerDetachFailed", {
-                defaultValue: "Failed to detach viewer: {{message}}",
-                message: err instanceof Error ? err.message : "error",
-            }), "error", 3600);
-        }
-        finally {
-            setDetachingViewer(false);
-        }
-    }, [activeGameRun, applyRunState, setActionNotice, t]);
-    const handleStop = useCallback(async () => {
-        if (!activeGameRunId)
-            return;
-        setStopping(true);
-        try {
-            const stopResult = await client.stopAppRun(activeGameRunId);
-            const nextRuns = appRuns.filter((run) => run.runId !== activeGameRunId);
-            setState("appRuns", nextRuns);
-            resetActiveGameState();
-            setState("tab", "apps");
-            setState("appsSubTab", nextRuns.length > 0 ? "running" : "browse");
-            setActionNotice(stopResult.message, stopResult.success ? "success" : "info", stopResult.needsRestart ? 5000 : 3200);
-        }
-        catch (err) {
-            setActionNotice(t("gameview.FailedToStop", {
-                defaultValue: "Failed to stop: {{message}}",
-                message: err instanceof Error ? err.message : "error",
-            }), "error");
-        }
-        finally {
-            setStopping(false);
-        }
-    }, [
-        activeGameRunId,
-        appRuns,
-        resetActiveGameState,
-        setActionNotice,
-        setState,
-        t,
-    ]);
-    if (!hasActiveRun) {
-        return (_jsxs("div", { className: "flex items-center justify-center py-10 text-muted italic", children: [t("game.noActiveSession"), " ", _jsx(Button, { variant: "default", size: "sm", onClick: () => {
-                        setState("tab", "apps");
-                        setState("appsSubTab", "browse");
-                    }, className: "ml-2 font-bold tracking-wide shadow-sm", children: t("game.backToApps") })] }));
-    }
-    const renderLogsPanel = (layout = "sidebar") => (_jsxs("div", { className: `flex min-h-0 flex-col bg-card ${layout === "sidebar" ? "w-80" : "h-full"}`, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("span", { className: "font-bold text-xs", children: t("game.agentActivity") }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-6 text-2xs px-2 py-0 border-border bg-card hover:border-accent", onClick: () => void loadLogs(), children: t("common.refresh") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-6 text-2xs px-2 py-0 border-border bg-card hover:border-accent", onClick: () => setShowLogsPanel(false), children: t("common.hide") })] }), activeSessionState?.goalLabel ? (_jsx("div", { className: "px-2 py-1.5 text-2xs text-muted", children: activeSessionState.goalLabel })) : null, activeSessionState?.telemetry?.heroClass != null ? (_jsxs("div", { className: "px-2 py-2 text-2xs space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-semibold text-txt", children: [String(activeSessionState.telemetry.heroClass)
-                                        .charAt(0)
-                                        .toUpperCase() +
-                                        String(activeSessionState.telemetry.heroClass).slice(1), " ", "Lv", String(activeSessionState.telemetry.heroLevel ?? "?")] }), _jsxs("span", { className: "text-muted", children: [String(activeSessionState.telemetry.heroLane ?? "?"), " lane"] }), activeSessionState.telemetry.heroAlive === false ? (_jsx("span", { className: "text-danger font-semibold", children: "DEAD" })) : null, activeSessionState.telemetry.autoPlay ? (_jsx("span", { className: "px-1 py-0.5 rounded bg-ok/15 text-ok font-semibold", children: "AUTO" })) : (_jsx("span", { className: "px-1 py-0.5 rounded bg-muted/15 text-muted", children: "MANUAL" }))] }), typeof activeSessionState.telemetry.heroHp === "number" &&
-                        typeof activeSessionState.telemetry.heroMaxHp === "number" &&
-                        activeSessionState.telemetry.heroMaxHp > 0 ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1 h-1.5 bg-border rounded-full overflow-hidden", children: _jsx("div", { className: "h-full rounded-full transition-all", style: {
-                                        width: `${Math.min(100, Math.round((Number(activeSessionState.telemetry.heroHp) / Number(activeSessionState.telemetry.heroMaxHp)) * 100))}%`,
-                                        background: Number(activeSessionState.telemetry.heroHp) /
-                                            Number(activeSessionState.telemetry.heroMaxHp) >
-                                            0.5
-                                            ? "rgb(34, 197, 94)"
-                                            : Number(activeSessionState.telemetry.heroHp) /
-                                                Number(activeSessionState.telemetry.heroMaxHp) >
-                                                0.25
-                                                ? "rgb(245, 158, 11)"
-                                                : "rgb(239, 68, 68)",
-                                    } }) }), _jsxs("span", { className: "text-muted whitespace-nowrap", children: [activeSessionState.telemetry.heroHp, "/", activeSessionState.telemetry.heroMaxHp] })] })) : null, activeSessionState.telemetry.strategyVersion != null ? (_jsxs("div", { className: "space-y-0.5 text-muted", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { children: ["Strategy v", String(activeSessionState.telemetry.strategyVersion)] }), activeSessionState.telemetry.strategyScore != null ? (_jsxs("span", { children: ["score:", " ", Number(activeSessionState.telemetry.strategyScore).toFixed(2)] })) : null, activeSessionState.telemetry.bestStrategyVersion != null ? (_jsxs("span", { children: ["best: v", String(activeSessionState.telemetry.bestStrategyVersion), " (", Number(activeSessionState.telemetry.bestStrategyScore ?? 0).toFixed(2), ")"] })) : null] }), activeSessionState.telemetry
-                                .abilityPriority ? (_jsxs("div", { className: "text-3xs", children: ["Priority:", " ", activeSessionState.telemetry
-                                        .abilityPriority.join(" > "), " · ", "Recall @", Math.round(Number(activeSessionState.telemetry
-                                        .recallThreshold ?? 0.25) * 100), "% HP"] })) : null, activeSessionState.telemetry
-                                .ticksTracked != null ? (_jsxs("div", { className: "text-3xs", children: [String(activeSessionState.telemetry
-                                        .ticksTracked), " ", "ticks tracked \u00B7", " ", String(activeSessionState.telemetry
-                                        .abilitiesLearned ?? 0), " ", "abilities learned", activeSessionState.telemetry.survivalRate != null
-                                        ? ` · ${Math.round(Number(activeSessionState.telemetry.survivalRate) * 100)}% survival`
-                                        : ""] })) : null] })) : null, activeSessionState.telemetry.laneHumanUnits != null ? (_jsxs("div", { className: "flex items-center gap-2 text-muted", children: [_jsx("span", { children: "Lane:" }), _jsxs("span", { className: Number(activeSessionState.telemetry.laneFrontline ?? 0) > 0
-                                    ? "text-ok"
-                                    : Number(activeSessionState.telemetry.laneFrontline ?? 0) <
-                                        0
-                                        ? "text-danger"
-                                        : "", children: [String(activeSessionState.telemetry.laneHumanUnits), "v", String(activeSessionState.telemetry.laneOrcUnits), " (", Number(activeSessionState.telemetry.laneFrontline ?? 0) > 0
-                                        ? "+"
-                                        : "", String(activeSessionState.telemetry.laneFrontline), ")"] })] })) : null] })) : null, activeSessionState?.suggestedPrompts?.length ? (_jsx("div", { className: "flex flex-wrap gap-1 px-2 py-2", children: activeSessionState.suggestedPrompts.slice(0, 4).map((prompt) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-6 max-w-full text-2xs shadow-sm", onClick: () => void sendChatCommand(prompt), disabled: sendingChat, children: _jsx("span", { className: "truncate", children: prompt }) }, prompt))) })) : null, activeSessionState?.recommendations?.length ? (_jsxs("div", { className: "px-2 py-2 text-2xs space-y-1.5", children: [_jsx("div", { className: "font-semibold text-txt", children: t("gameview.Recommendations", {
-                            defaultValue: "Recommendations",
-                        }) }), activeSessionState.recommendations.slice(0, 3).map((item) => (_jsxs("div", { className: "space-y-0.5", children: [_jsxs("div", { className: "text-txt", children: [item.label, typeof item.priority === "number" ? (_jsxs("span", { className: "ml-1 text-muted", children: ["#", item.priority] })) : null] }), item.reason ? (_jsx("div", { className: "text-muted", children: item.reason })) : null] }, item.id)))] })) : null, logLoadError ? (_jsx("div", { className: "border-b border-danger/25 bg-danger/8 px-2 py-1.5 text-2xs text-danger", children: t("logsview.LoadFailed", {
-                    defaultValue: "Failed to load logs: {{message}}",
-                    message: logLoadError,
-                }) })) : null, _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsx(Input, { type: "text", "data-testid": "game-command-input", value: chatInput, onChange: (e) => setChatInput(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter" && !e.shiftKey && !sendingChat) {
-                                e.preventDefault();
-                                handleSendChat();
-                            }
-                        }, placeholder: t("game.chatPlaceholder"), className: "flex-1 h-8 text-xs bg-bg focus-visible:ring-accent", disabled: sendingChat }), _jsx(Button, { variant: "default", size: "sm", "data-testid": "game-command-send", onClick: handleSendChat, disabled: sendingChat || !chatInput.trim(), className: "h-8 shadow-sm font-bold tracking-wide", children: sendingChat ? "..." : t("common.send") })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-2 text-xs-tight font-mono", children: Array.isArray(activeSessionState?.telemetry
-                    ?.recentActivity) &&
-                    (activeSessionState?.telemetry)
-                        .recentActivity.length > 0 ? ((activeSessionState?.telemetry)
-                    .recentActivity
-                    .slice()
-                    .reverse()
-                    .slice(0, 30)
-                    .map((entry, idx) => (_jsxs("div", { className: "py-1 flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted text-2xs", children: formatTime(entry.ts, { fallback: "—" }) }), _jsx("span", { className: `font-semibold text-2xs uppercase ${entry.action === "error"
-                                        ? "text-danger"
-                                        : entry.action.startsWith("ability")
-                                            ? "text-ok"
-                                            : entry.action.startsWith("move")
-                                                ? "text-warn"
-                                                : "text-muted"}`, children: entry.action.split(":")[0] })] }), _jsx("div", { className: "text-txt break-all", children: entry.detail })] }, `${entry.ts}-${idx}`)))) : Array.isArray(activeSessionState?.activity) &&
-                    activeSessionState.activity.length > 0 ? (activeSessionState.activity
-                    .slice()
-                    .sort((a, b) => Number(b.timestamp ?? 0) - Number(a.timestamp ?? 0))
-                    .slice(0, 30)
-                    .map((entry) => (_jsxs("div", { className: "py-1 flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted text-2xs", children: formatTime(entry.timestamp ?? 0, { fallback: "—" }) }), _jsx("span", { className: `font-semibold text-2xs uppercase ${entry.severity === "error"
-                                        ? "text-danger"
-                                        : entry.severity === "warning"
-                                            ? "text-warn"
-                                            : "text-muted"}`, children: entry.type })] }), _jsx("div", { className: "text-txt break-all", children: entry.message })] }, entry.id)))) : gameLogs.length === 0 ? (_jsx("div", { className: "text-center py-4 text-muted italic", children: t("game.noAgentActivity") })) : (gameLogs.slice(0, 50).map((entry, idx) => (_jsxs("div", { className: "py-1 flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted text-2xs", children: formatTime(entry.timestamp, { fallback: "—" }) }), _jsx("span", { className: `font-semibold text-2xs uppercase ${entry.level === "error"
-                                        ? "text-danger"
-                                        : entry.level === "warn"
-                                            ? "text-warn"
-                                            : "text-muted"}`, children: entry.level }), (entry.tags ?? []).slice(0, 2).map((t) => {
-                                    const c = TAG_COLORS[t];
-                                    return (_jsx("span", { className: "text-3xs px-1 py-px rounded", style: {
-                                            background: c ? c.bg : "var(--bg-muted)",
-                                            color: c ? c.fg : "var(--muted)",
-                                        }, children: t }, t));
-                                })] }), _jsx("div", { className: "text-txt break-all", children: entry.message })] }, `${entry.timestamp}-${idx}`)))) })] }));
-    const activeRunSummary = activeGameRun?.summary ??
-        activeGameRun?.health.message ??
-        activeSessionState?.summary ??
-        null;
-    const gameStatusLabel = connectionStatus !== "connected"
-        ? connectionStatus === "connecting"
-            ? "Starting"
-            : "Offline"
-        : activeGameRun?.health.state === "offline" ||
-            activeGameRun?.health.state === "degraded"
-            ? "Needs attention"
-            : "Live";
-    const gameStatusClass = gameStatusLabel === "Live"
-        ? "border-ok/30 bg-ok/10 text-ok"
-        : gameStatusLabel === "Needs attention"
-            ? "border-warn/35 bg-warn/10 text-warn"
-            : "border-border/45 bg-bg-hover/70 text-muted-strong";
-    const diagnostics = [
-        { label: "Connection", value: connectionStatus },
-        {
-            label: "Viewer",
-            value: activeGameRun?.viewerAttachment ?? "unavailable",
-        },
-        { label: "Health", value: activeGameRun?.health.state ?? "unknown" },
-        {
-            label: "Chat",
-            value: activeGameRun?.chatAvailability ?? "unknown",
-        },
-        {
-            label: "Control",
-            value: activeGameRun?.controlAvailability ?? "unknown",
-        },
-    ];
-    const operatorSurfaceFocus = isCompactLayout && mobileSurface === "dashboard"
-        ? "dashboard"
-        : isCompactLayout && mobileSurface === "chat"
-            ? "chat"
-            : "all";
-    const openInNewTabLabel = hasViewer
-        ? t("game.openInNewTab")
-        : "Open launch URL";
-    const renderOpenInNewTabButton = (variant, className) => {
-        if (!openableUrl || isElectrobun) {
-            return (_jsx(Button, { variant: variant, size: "sm", className: className, onClick: handleOpenInNewTab, disabled: !openableUrl, children: openInNewTabLabel }));
-        }
-        return (_jsx(Button, { asChild: true, variant: variant, size: "sm", className: className, children: _jsx("a", { href: openableUrl, target: "_blank", rel: "noreferrer", children: openInNewTabLabel }) }));
-    };
-    const renderViewerPane = () => {
-        if (!hasViewer) {
-            return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 bg-bg px-6 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: activeGameDisplayName || activeGameApp }), _jsx("div", { className: "max-w-md text-xs leading-6 text-muted", children: "This run is alive, but it does not currently expose a viewer URL. You can keep steering it from the dashboard and running-runs panel." })] }));
-        }
-        if (!viewerAttached) {
-            return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 bg-bg px-6 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: "Viewer detached" }), _jsx("div", { className: "max-w-md text-xs leading-6 text-muted", children: "The autonomous run is still active. Reattach the viewer to resume watching without restarting the session." }), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: renderOpenInNewTabButton("outline") })] }));
-        }
-        if (useNativeGameWindow) {
-            return (_jsx("div", { className: "w-full h-full flex flex-col items-center justify-center bg-bg text-muted gap-3", children: gameWindowId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: activeGameDisplayName || activeGameApp }), _jsx("span", { className: "text-xs text-muted", children: t("game.openInNativeWindow") })] })) : (_jsx("span", { className: "text-xs italic", children: t("common.launching") })) }));
-        }
-        return (_jsx("iframe", { ref: iframeRef, src: resolvedActiveGameViewerUrl, sandbox: activeGameSandbox, allow: "fullscreen *", allowFullScreen: true, "data-testid": "game-view-iframe", className: "w-full h-full border-none", title: activeGameDisplayName || t("common.game", { defaultValue: "Game" }) }));
-    };
-    return (_jsxs("div", { className: "flex flex-col h-full min-h-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 bg-card px-4 py-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-bold text-sm", children: activeGameDisplayName || activeGameApp }), _jsx("span", { className: `rounded-full border px-2.5 py-1 text-2xs font-medium uppercase tracking-[0.14em] ${gameStatusClass}`, children: gameStatusLabel })] }), activeRunSummary ? (_jsx("div", { className: "mt-1 max-w-3xl truncate text-xs-tight leading-5 text-muted-strong", children: activeRunSummary })) : null] }), sessionControlAction ? (_jsx(Button, { variant: "outline", size: "sm", "data-testid": "game-session-control", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void handleSessionControl(), disabled: sessionBusyAction === sessionControlAction, children: sessionBusyAction === sessionControlAction
-                            ? t("gameview.UpdatingSession", {
-                                defaultValue: "Updating…",
-                            })
-                            : sessionControlAction === "pause"
-                                ? t("common.pause", { defaultValue: "Pause" })
-                                : t("common.resume", { defaultValue: "Resume" }) })) : null, dashboardPanelEnabled && !isCompactLayout ? (_jsx(Button, { variant: showLogsPanel ? "default" : "outline", size: "sm", "data-testid": "game-toggle-logs", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setShowLogsPanel(!showLogsPanel), children: showLogsPanel ? "Hide game chat" : "Show game chat" })) : null, _jsx(Button, { variant: showDiagnostics ? "default" : "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setShowDiagnostics((current) => !current), children: "Details" }), canAttachViewer ? (_jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void handleAttachViewer(), disabled: attachingViewer, children: attachingViewer ? "Reattaching..." : "Reattach viewer" })) : null, canDetachViewer ? (_jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => void handleDetachViewer(), disabled: detachingViewer, children: detachingViewer ? "Detaching..." : "Detach viewer" })) : null, useNativeGameWindow ? (_jsx(DesktopGameWindowControls, { gameWindowId: gameWindowId })) : null, hasViewer ? (_jsx(Button, { variant: gameOverlayEnabled ? "default" : "outline", size: "sm", className: "h-7 text-xs shadow-sm hover:border-accent", onClick: () => setState("gameOverlayEnabled", !gameOverlayEnabled), title: gameOverlayEnabled
-                            ? t("game.disableOverlay")
-                            : t("game.keepVisible"), children: gameOverlayEnabled ? t("game.unpinOverlay") : t("game.keepOnTop") })) : null, renderOpenInNewTabButton("default", "h-7 text-xs shadow-sm"), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs shadow-sm", disabled: stopping, onClick: handleStop, children: stopping ? t("game.stopping") : t("common.stop") }), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs shadow-sm", onClick: () => {
-                            setState("tab", "apps");
-                            setState("appsSubTab", "browse");
-                        }, children: t("game.backToApps") })] }), showDiagnostics ? (_jsxs("div", { className: "border-t border-border/30 bg-card/70 px-4 py-2 text-xs-tight leading-5 text-muted-strong", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [diagnostics.map((item) => (_jsxs("span", { className: "rounded-full border border-border/35 bg-bg/65 px-2.5 py-1", children: [_jsxs("span", { className: "text-muted", children: [item.label, ": "] }), item.value] }, item.label))), activeGamePostMessageAuth ? (_jsx("span", { className: "rounded-full border border-border/35 bg-bg/65 px-2.5 py-1", children: t("gameview.postMessageAuth") })) : null] }), activeGameRun?.health.message ? (_jsx("div", { className: "mt-2", children: activeGameRun.health.message })) : null] })) : null, dashboardPanelEnabled && isCompactLayout ? (_jsxs("div", { className: "flex items-center gap-2 bg-card px-4 py-2", children: [_jsx(Button, { variant: mobileSurface === "game" ? "default" : "outline", size: "sm", "data-testid": "game-mobile-surface-game", className: "h-8 text-xs shadow-sm", onClick: () => setMobileSurface("game"), children: t("common.game", {
-                            defaultValue: "Game",
-                        }) }), _jsx(Button, { variant: mobileSurface === "dashboard" ? "default" : "outline", size: "sm", "data-testid": "game-mobile-surface-dashboard", className: "h-8 text-xs shadow-sm", onClick: () => setMobileSurface("dashboard"), children: t("common.actions", {
-                            defaultValue: "Actions",
-                        }) }), _jsx(Button, { variant: mobileSurface === "chat" ? "default" : "outline", size: "sm", "data-testid": "game-mobile-surface-chat", className: "h-8 text-xs shadow-sm", onClick: () => setMobileSurface("chat"), children: t("nav.chat", {
-                            defaultValue: "Chat",
-                        }) })] })) : null, _jsxs("div", { className: `flex-1 min-h-0 ${isCompactLayout ? "flex flex-col" : "flex"}`, children: [!dashboardPanelEnabled ||
-                        !isCompactLayout ||
-                        mobileSurface === "game" ? (_jsx("div", { className: "flex-1 min-h-0 relative", children: renderViewerPane() })) : null, (showLogsPanel && dashboardPanelEnabled) ||
-                        (isCompactLayout &&
-                            dashboardPanelEnabled &&
-                            mobileSurface !== "game") ? (isCompactLayout ? (mobileSurface === "dashboard" || mobileSurface === "chat" ? (hasOperatorSurface && OperatorSurface ? (_jsx("div", { className: "h-full overflow-y-auto", children: _jsx(OperatorSurface, { appName: activeGameApp, variant: "live", focus: operatorSurfaceFocus }) })) : (renderLogsPanel("standalone"))) : null) : hasOperatorSurface && OperatorSurface ? (_jsx("div", { className: "w-[30rem] min-h-0 overflow-y-auto bg-card", children: _jsx(OperatorSurface, { appName: activeGameApp, variant: "live", focus: "all" }) })) : (renderLogsPanel())) : null] })] }));
-}