@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/apps/GameView.js

@@ -0,0 +1,1133 @@
+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/index.js";
+import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge/index.js";
+import { useBranding } from "../../config/branding.js";
+import { useMediaQuery } from "../../hooks/index.js";
+import { useApp } from "../../state/index.js";
+import { navigatePreOpenedWindow, openExternalUrl, preOpenWindow, } from "../../utils/index.js";
+import { formatTime } from "../../utils/format.js";
+import { getAppOperatorSurface } from "./surfaces/registry.js";
+import { buildViewerSessionKey, resolveEmbeddedViewerUrl, resolvePostMessageTargetOrigin, resolveViewerReadyEventType, shouldUseEmbeddedAppViewer, } from "./viewer-auth.js";
+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] })] }));
+}