@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/apps/GameView.js

@@ -9,19 +9,45 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - 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 { useDocumentVisibility, useIntervalWhenDocumentVisible, } from "../../hooks/useDocumentVisibility.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { useTimeout } from "../../hooks/useTimeout.js";
 import { useApp } from "../../state/index.js";
 import { navigatePreOpenedWindow, openExternalUrl, preOpenWindow, } from "../../utils/index.js";
 import { formatTime } from "../../utils/format.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
 import { getAppOperatorSurface } from "./surfaces/registry.js";
 import { buildViewerSessionKey, resolveEmbeddedViewerUrl, resolvePostMessageTargetOrigin, resolveViewerReadyEventType, shouldUseEmbeddedAppViewer, } from "./viewer-auth.js";
-export function buildDisconnectedSessionState(session) {
+function readLearningTelemetry(telemetry) {
+    if (!telemetry)
+        return {};
+    const abilityPriority = Array.isArray(telemetry.abilityPriority)
+        ? telemetry.abilityPriority.filter((ability) => typeof ability === "string")
+        : undefined;
+    return {
+        abilityPriority,
+        recallThreshold: typeof telemetry.recallThreshold === "number"
+            ? telemetry.recallThreshold
+            : undefined,
+        ticksTracked: typeof telemetry.ticksTracked === "number"
+            ? telemetry.ticksTracked
+            : undefined,
+        abilitiesLearned: typeof telemetry.abilitiesLearned === "number"
+            ? telemetry.abilitiesLearned
+            : undefined,
+        survivalRate: typeof telemetry.survivalRate === "number"
+            ? telemetry.survivalRate
+            : undefined,
+    };
+}
+function buildDisconnectedSessionState(session) {
     if (!session)
         return null;
     return {
@@ -84,56 +110,6 @@ const TAG_COLORS = {
     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);
@@ -167,8 +143,8 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                 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);
+            catch {
+                // non-fatal: pin state defaults to false on poll failure
             }
         }
         const gpuWindows = await invokeDesktopBridgeRequest({
@@ -204,11 +180,11 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
             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", {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded-sm border border-border px-2 py-1 text-2xs text-muted", children: boundsLabel }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs 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 () => {
+                }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs hover:border-accent", onClick: () => void runAction("game-native-focus", async () => {
                     if (!gameWindowId) {
                         throw new Error(t("gameview.GameWindowNotReadyYet", {
                             defaultValue: "Game window not ready yet.",
@@ -221,7 +197,7 @@ export function DesktopGameWindowControls({ 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 () => {
+                }), 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 hover:border-accent", onClick: () => void runAction("game-native-show", async () => {
                     if (!gameWindowId) {
                         throw new Error(t("gameview.GameWindowNotReadyYet", {
                             defaultValue: "Game window not ready yet.",
@@ -234,7 +210,7 @@ export function DesktopGameWindowControls({ 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 () => {
+                }), 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 hover:border-accent", onClick: () => void runAction("game-native-hide", async () => {
                     if (!gameWindowId) {
                         throw new Error(t("gameview.GameWindowNotReadyYet", {
                             defaultValue: "Game window not ready yet.",
@@ -247,7 +223,7 @@ export function DesktopGameWindowControls({ 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 () => {
+                }), 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 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.",
@@ -273,7 +249,7 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                         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 () => {
+                        : t("gameview.KeepOnTop", { defaultValue: "Keep On Top" })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs hover:border-accent", onClick: () => void runAction("game-native-snapshot", async () => {
                     if (!gameWindowId) {
                         throw new Error(t("gameview.GameWindowNotReadyYet", {
                             defaultValue: "Game window not ready yet.",
@@ -291,7 +267,7 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                     }
                 }, 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 () => {
+                }), 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 hover:border-accent", onClick: () => void runAction("game-gpu-window", async () => {
                     const created = await invokeDesktopBridgeRequest({
                         rpcMethod: "gpuWindowCreate",
                         ipcChannel: "gpuWindow:create",
@@ -320,7 +296,7 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                     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 () => {
+                }) }), gpuWindowId && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs hover:border-accent", onClick: () => void runAction("game-gpu-show", async () => {
                             await invokeDesktopBridgeRequest({
                                 rpcMethod: "gpuWindowShow",
                                 ipcChannel: "gpuWindow:show",
@@ -330,7 +306,7 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                             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 () => {
+                        }) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs hover:border-accent", onClick: () => void runAction("game-gpu-hide", async () => {
                             await invokeDesktopBridgeRequest({
                                 rpcMethod: "gpuWindowHide",
                                 ipcChannel: "gpuWindow:hide",
@@ -343,6 +319,7 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
                         }) })] })), (message || error) && (_jsx("span", { className: `text-2xs ${error ? "text-danger" : "text-ok"}`, children: error ?? message }))] }));
 }
 export function GameView() {
+    useRenderGuard("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();
@@ -362,6 +339,8 @@ export function GameView() {
     const [gameWindowId, setGameWindowId] = useState(null);
     const gameWindowIdRef = useRef(null);
     const appRunsRef = useRef(appRuns);
+    const activeGameRunIdRef = useRef(activeGameRunId);
+    const activeGameAppRef = useRef(activeGameApp);
     const activeGameSessionRef = useRef(activeGameSession);
     const sessionStateRef = useRef(sessionState);
     const refreshSessionPromiseRef = useRef(null);
@@ -376,11 +355,9 @@ export function GameView() {
         !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 dashboardPanelEnabled = true;
     const hasActiveRun = Boolean(activeGameRun);
     const hasViewer = Boolean(activeGameRun?.viewer?.url);
     const viewerAttached = activeGameRun?.viewerAttachment === "attached";
@@ -392,6 +369,12 @@ export function GameView() {
     useEffect(() => {
         appRunsRef.current = appRuns;
     }, [appRuns]);
+    useEffect(() => {
+        activeGameRunIdRef.current = activeGameRunId;
+    }, [activeGameRunId]);
+    useEffect(() => {
+        activeGameAppRef.current = activeGameApp;
+    }, [activeGameApp]);
     useEffect(() => {
         activeGameSessionRef.current = activeGameSession;
     }, [activeGameSession]);
@@ -401,12 +384,13 @@ export function GameView() {
     const applySessionState = useCallback((nextSession) => {
         setSessionState(nextSession);
         sessionStateRef.current = nextSession;
-        if (!activeGameRunId)
+        const currentRunId = activeGameRunIdRef.current;
+        if (!currentRunId)
             return;
         const currentRuns = appRunsRef.current;
         const nextUpdatedAt = new Date().toISOString();
         const nextRuns = currentRuns.map((run) => {
-            if (run.runId !== activeGameRunId)
+            if (run.runId !== currentRunId)
                 return run;
             const nextHealth = nextSession?.status === "disconnected"
                 ? {
@@ -431,15 +415,15 @@ export function GameView() {
         });
         appRunsRef.current = nextRuns;
         setState("appRuns", nextRuns);
-    }, [activeGameRunId, setState]);
+    }, [setState]);
     const applyRunState = useCallback((nextRun) => {
         if (!nextRun)
             return;
+        if (nextRun.runId !== activeGameRunIdRef.current)
+            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)
@@ -470,16 +454,29 @@ export function GameView() {
         });
         appRunsRef.current = nextRuns;
         setState("appRuns", nextRuns);
-    }, [activeGameRunId, setState]);
+    }, [setState]);
     const refreshSessionState = useCallback(async () => {
-        if (refreshSessionPromiseRef.current) {
-            return refreshSessionPromiseRef.current;
+        const currentSession = sessionStateRef.current ?? activeGameSessionRef.current;
+        const refreshKey = activeGameRunId
+            ? `run:${activeGameRunId}`
+            : activeGameApp && currentSession?.sessionId
+                ? `session:${activeGameApp}:${currentSession.sessionId}`
+                : "none";
+        if (refreshSessionPromiseRef.current?.key === refreshKey) {
+            return refreshSessionPromiseRef.current.promise;
         }
+        const isCurrentRefresh = () => activeGameRunIdRef.current === activeGameRunId &&
+            activeGameAppRef.current === activeGameApp &&
+            (activeGameRunId ||
+                activeGameSessionRef.current?.sessionId ===
+                    currentSession?.sessionId) &&
+            refreshSessionPromiseRef.current?.key === refreshKey;
         const refreshTask = (async () => {
-            const currentSession = sessionStateRef.current ?? activeGameSessionRef.current;
             if (activeGameRunId) {
                 try {
                     const nextRun = await client.getAppRun(activeGameRunId);
+                    if (!isCurrentRefresh())
+                        return sessionStateRef.current;
                     if (nextRun) {
                         applyRunState(nextRun);
                         setConnectionStatus(nextRun.health.state === "offline" ||
@@ -489,8 +486,9 @@ export function GameView() {
                         return nextRun.session ?? null;
                     }
                 }
-                catch (err) {
-                    console.warn("[GameView] Failed to refresh app run state:", err);
+                catch {
+                    if (!isCurrentRefresh())
+                        return sessionStateRef.current;
                     if (!activeGameApp || !currentSession?.sessionId) {
                         setConnectionStatus("disconnected");
                         return currentSession ?? null;
@@ -501,12 +499,15 @@ export function GameView() {
                 return null;
             try {
                 const nextSession = await client.getAppSessionState(activeGameApp, currentSession.sessionId);
+                if (!isCurrentRefresh())
+                    return sessionStateRef.current;
                 applySessionState(nextSession);
                 setConnectionStatus("connected");
                 return nextSession;
             }
-            catch (err) {
-                console.warn("[GameView] Failed to refresh app session state:", err);
+            catch {
+                if (!isCurrentRefresh())
+                    return sessionStateRef.current;
                 if (activeGameRunId) {
                     setConnectionStatus("disconnected");
                     return currentSession ?? null;
@@ -516,12 +517,15 @@ export function GameView() {
                 return null;
             }
         })();
-        refreshSessionPromiseRef.current = refreshTask;
+        refreshSessionPromiseRef.current = {
+            key: refreshKey,
+            promise: refreshTask,
+        };
         try {
             return await refreshTask;
         }
         finally {
-            if (refreshSessionPromiseRef.current === refreshTask) {
+            if (refreshSessionPromiseRef.current?.promise === refreshTask) {
                 refreshSessionPromiseRef.current = null;
             }
         }
@@ -533,7 +537,7 @@ export function GameView() {
     useEffect(() => {
         setShowLogsPanel(dashboardPanelEnabled);
         setMobileSurface("game");
-    }, [dashboardPanelEnabled]);
+    }, []);
     useEffect(() => {
         if (!activeGameRunId && !activeGameSession?.sessionId)
             return;
@@ -548,16 +552,19 @@ export function GameView() {
     // gone silent. Pauses while the document is hidden; the sweeper's
     // 90s grace window covers brief tab-switching.
     useIntervalWhenDocumentVisible(() => {
-        if (!activeGameRunId)
+        const heartbeatRunId = activeGameRunId;
+        if (!heartbeatRunId)
             return;
-        void client.heartbeatAppRun(activeGameRunId).catch((err) => {
+        void client.heartbeatAppRun(heartbeatRunId).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", "");
+                setState("appRuns", appRunsRef.current.filter((run) => run.runId !== heartbeatRunId));
+                if (activeGameRunIdRef.current === heartbeatRunId) {
+                    setState("activeGameRunId", "");
+                }
             }
         });
     }, 15_000, Boolean(activeGameRunId));
@@ -779,9 +786,8 @@ export function GameView() {
                 setConnectionStatus("connected");
             }
         })
-            .catch((err) => {
-            console.warn("[GameView] game:openWindow failed:", err);
-            // Fall through — iframe fallback is still rendered
+            .catch(() => {
+            // fall through — iframe fallback is still rendered
         });
         return () => {
             cancelled = true;
@@ -838,6 +844,10 @@ export function GameView() {
         const expectedReadyType = resolveViewerReadyEventType(activeGamePostMessagePayload);
         if (!expectedReadyType)
             return;
+        // Fail closed: without a concrete http(s) origin we can neither verify the
+        // sender nor safely target the auth payload, so never send it.
+        if (!postMessageTargetOrigin)
+            return;
         const onMessage = (event) => {
             if (authSentRef.current)
                 return;
@@ -846,8 +856,7 @@ export function GameView() {
                 return;
             if (event.data?.type !== expectedReadyType)
                 return;
-            if (postMessageTargetOrigin !== "*" &&
-                event.origin !== postMessageTargetOrigin) {
+            if (event.origin !== postMessageTargetOrigin) {
                 return;
             }
             iframeWindow.postMessage(activeGamePostMessagePayload, postMessageTargetOrigin);
@@ -971,83 +980,83 @@ export function GameView() {
         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") })] }));
+                    }, className: "ml-2 font-bold tracking-wide ", 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) /
+    const renderLogsPanel = (layout = "sidebar") => {
+        const learningTelemetry = readLearningTelemetry(activeSessionState?.telemetry);
+        return (_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-sm bg-ok/15 text-ok font-semibold", children: "AUTO" })) : (_jsx("span", { className: "px-1 py-0.5 rounded-sm 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.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")
+                                                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] }), learningTelemetry.abilityPriority?.length ? (_jsxs("div", { className: "text-3xs", children: ["Priority: ", learningTelemetry.abilityPriority.join(" > "), " · ", "Recall @", learningTelemetry.recallThreshold != null
+                                            ? `${Math.round(learningTelemetry.recallThreshold * 100)}% HP`
+                                            : "—"] })) : null, learningTelemetry.ticksTracked != null ? (_jsxs("div", { className: "text-3xs", children: [learningTelemetry.ticksTracked, " ticks tracked \u00B7", " ", learningTelemetry.abilitiesLearned != null
+                                            ? `${learningTelemetry.abilitiesLearned} abilities learned`
+                                            : "— abilities learned", learningTelemetry.survivalRate != null
+                                            ? ` · ${Math.round(learningTelemetry.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 ", 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 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.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}`)))) })] }));
+                                                : "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-sm", 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 ??
@@ -1107,22 +1116,22 @@ export function GameView() {
         }
         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
+    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 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("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 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 hover:border-accent", onClick: () => setShowDiagnostics((current) => !current), children: "Details" }), canAttachViewer ? (_jsx(Button, { variant: "outline", size: "sm", className: "h-7 text-xs 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 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 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: () => {
+                            : t("game.keepVisible"), children: gameOverlayEnabled ? t("game.unpinOverlay") : t("game.keepOnTop") })) : null, renderOpenInNewTabButton("default", "h-7 text-xs "), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs ", disabled: stopping, onClick: handleStop, children: stopping ? t("game.stopping") : t("common.stop") }), _jsx(Button, { variant: "default", size: "sm", className: "h-7 text-xs ", 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", {
+                        }, 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 ", 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", {
+                        }) }), _jsx(Button, { variant: mobileSurface === "dashboard" ? "default" : "outline", size: "sm", "data-testid": "game-mobile-surface-dashboard", className: "h-8 text-xs ", 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", {
+                        }) }), _jsx(Button, { variant: mobileSurface === "chat" ? "default" : "outline", size: "sm", "data-testid": "game-mobile-surface-chat", className: "h-8 text-xs ", 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 ||