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

package/packages/app-core/src/components/pages/AppsView.js

@@ -1,883 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PageLayout } from "@elizaos/ui";
-import { Pin, PinOff } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { client } from "../../api";
-import { invokeDesktopBridgeRequest, isElectrobunRuntime, subscribeDesktopBridgeEvent, } from "../../bridge";
-import { getAppSlugFromPath, getWindowNavigationPath, isAppWindowRoute, shouldUseHashNavigation, } from "../../navigation";
-import { useApp } from "../../state";
-import { openExternalUrl } from "../../utils";
-import { AppsCatalogGrid } from "../apps/AppsCatalogGrid";
-import { AppsSidebar } from "../apps/AppsSidebar";
-import { filterAppsForCatalog, findAppBySlug, getAppSlug, } from "../apps/helpers";
-import { getInternalToolApps, getInternalToolAppTargetTab, getInternalToolAppWindowPath, } from "../apps/internal-tool-apps";
-import { getAllOverlayApps, isOverlayApp, overlayAppToRegistryInfo, } from "../apps/overlay-app-registry";
-import { RunningAppsRow } from "../apps/RunningAppsRow";
-import { resolveEmbeddedViewerUrl, shouldUseEmbeddedAppViewer, } from "../apps/viewer-auth";
-import { AppDetailsView, appNeedsDetailsPage } from "./AppDetailsView";
-export { shouldShowAppInAppsView } from "../apps/helpers";
-/** Max items retained in launch history. */
-const RECENT_APPS_LIMIT = 10;
-const APPS_SIDEBAR_WIDTH_KEY = "milady:apps:sidebar:width";
-const APPS_SIDEBAR_COLLAPSED_KEY = "milady:apps:sidebar:collapsed";
-const APPS_SIDEBAR_DEFAULT_WIDTH = 240;
-const APPS_SIDEBAR_MIN_WIDTH = 200;
-const APPS_SIDEBAR_MAX_WIDTH = 520;
-const APP_WINDOW_ALWAYS_ON_TOP_KEY = "milady:apps:window:always-on-top";
-const APP_WINDOW_HEARTBEAT_MS = 15_000;
-function clampWidth(value) {
-    return Math.min(Math.max(value, APPS_SIDEBAR_MIN_WIDTH), APPS_SIDEBAR_MAX_WIDTH);
-}
-function loadInitialSidebarWidth() {
-    if (typeof window === "undefined")
-        return APPS_SIDEBAR_DEFAULT_WIDTH;
-    try {
-        const raw = window.localStorage.getItem(APPS_SIDEBAR_WIDTH_KEY);
-        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
-        if (Number.isFinite(parsed))
-            return clampWidth(parsed);
-    }
-    catch {
-        /* ignore sandboxed storage */
-    }
-    return APPS_SIDEBAR_DEFAULT_WIDTH;
-}
-function loadInitialSidebarCollapsed() {
-    if (typeof window === "undefined")
-        return false;
-    try {
-        return window.localStorage.getItem(APPS_SIDEBAR_COLLAPSED_KEY) === "true";
-    }
-    catch {
-        return false;
-    }
-}
-function loadInitialAppWindowAlwaysOnTop() {
-    if (typeof window === "undefined")
-        return false;
-    try {
-        return window.localStorage.getItem(APP_WINDOW_ALWAYS_ON_TOP_KEY) === "true";
-    }
-    catch {
-        return false;
-    }
-}
-function getCurrentAppsPath() {
-    return getWindowNavigationPath();
-}
-/**
- * Parse the current apps sub-path into `{slug, action}`. Action recognizes
- * `details` for `/apps/<slug>/details`. Anything else is treated as a
- * direct app surface (`action: null`).
- */
-function parseAppsRoute(path) {
-    if (!path.startsWith("/apps/"))
-        return { slug: null, action: null };
-    const after = path.slice("/apps/".length).replace(/[?#].*$/, "");
-    if (!after)
-        return { slug: null, action: null };
-    const [slug, sub] = after.split("/");
-    return {
-        slug: slug || null,
-        action: sub === "details" ? "details" : null,
-    };
-}
-function resolveDesktopViewerUrl(viewerUrl) {
-    const resolved = resolveEmbeddedViewerUrl(viewerUrl);
-    if (!resolved)
-        return null;
-    try {
-        const parsed = new URL(resolved);
-        if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
-            return null;
-        }
-        return parsed.toString();
-    }
-    catch {
-        return null;
-    }
-}
-function getApiStatus(err) {
-    if (err &&
-        typeof err === "object" &&
-        "status" in err &&
-        typeof err.status === "number") {
-        return err.status;
-    }
-    return null;
-}
-function isClosedCanvasWindowEvent(payload) {
-    if (payload === null || typeof payload !== "object")
-        return false;
-    const candidate = payload;
-    return ("windowId" in payload &&
-        typeof candidate.windowId === "string" &&
-        "event" in payload &&
-        candidate.event === "closed");
-}
-function isManagedWindowsChangedEvent(payload) {
-    if (payload === null || typeof payload !== "object")
-        return false;
-    const windows = payload.windows;
-    return Array.isArray(windows);
-}
-function isOverlayLaunchApp(app) {
-    return isOverlayApp(app.name) || app.launchType === "overlay";
-}
-export function AppsView() {
-    const { appRuns, activeGameRunId, activeGameViewerUrl, appsSubTab, favoriteApps, walletEnabled, recentApps, setTab, setState, setActionNotice, t, } = useApp();
-    const [apps, setApps] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [searchQuery, _setSearchQuery] = useState("");
-    const [busyRunId, setBusyRunId] = useState(null);
-    const [stoppingRunId, setStoppingRunId] = useState(null);
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(loadInitialSidebarCollapsed);
-    const [sidebarWidth, setSidebarWidth] = useState(loadInitialSidebarWidth);
-    const [appWindowAlwaysOnTop] = useState(loadInitialAppWindowAlwaysOnTop);
-    const [isAppWindow] = useState(isAppWindowRoute);
-    const [appWindows, setAppWindows] = useState([]);
-    const [busyAppWindowId, setBusyAppWindowId] = useState(null);
-    const slugAutoLaunchDone = useRef(false);
-    const appWindowsRef = useRef([]);
-    const handleSidebarCollapsedChange = useCallback((next) => {
-        setSidebarCollapsed(next);
-        try {
-            window.localStorage.setItem(APPS_SIDEBAR_COLLAPSED_KEY, String(next));
-        }
-        catch {
-            /* ignore */
-        }
-    }, []);
-    const handleSidebarWidthChange = useCallback((next) => {
-        const clamped = clampWidth(next);
-        setSidebarWidth(clamped);
-        try {
-            window.localStorage.setItem(APPS_SIDEBAR_WIDTH_KEY, String(clamped));
-        }
-        catch {
-            /* ignore */
-        }
-    }, []);
-    useEffect(() => {
-        appWindowsRef.current = appWindows;
-    }, [appWindows]);
-    useEffect(() => {
-        return subscribeDesktopBridgeEvent({
-            rpcMessage: "canvasWindowEvent",
-            ipcChannel: "canvas:windowEvent",
-            listener: (payload) => {
-                if (!isClosedCanvasWindowEvent(payload))
-                    return;
-                setAppWindows((current) => current.filter((item) => item.id !== payload.windowId));
-            },
-        });
-    }, []);
-    useEffect(() => {
-        return subscribeDesktopBridgeEvent({
-            rpcMessage: "desktopManagedWindowsChanged",
-            ipcChannel: "desktop:managedWindowsChanged",
-            listener: (payload) => {
-                if (!isManagedWindowsChangedEvent(payload))
-                    return;
-                setAppWindows((current) => {
-                    const currentById = new Map(current.map((record) => [record.id, record]));
-                    const managedWindows = payload.windows
-                        .filter((windowRecord) => windowRecord.surface !== "settings")
-                        .map((windowRecord) => {
-                        const existing = currentById.get(windowRecord.id);
-                        return {
-                            id: windowRecord.id,
-                            kind: "managed",
-                            runId: "",
-                            appName: existing?.appName ?? "",
-                            displayName: existing?.displayName ?? windowRecord.title,
-                            alwaysOnTop: windowRecord.alwaysOnTop,
-                        };
-                    });
-                    return [
-                        ...managedWindows,
-                        ...current.filter((record) => record.kind === "game"),
-                    ];
-                });
-            },
-        });
-    }, []);
-    const activeAppNames = useMemo(() => new Set(appRuns.map((run) => run.appName)), [appRuns]);
-    const favoriteAppNames = useMemo(() => new Set(favoriteApps), [favoriteApps]);
-    const activeGameRun = useMemo(() => appRuns.find((run) => run.runId === activeGameRunId) ?? null, [activeGameRunId, appRuns]);
-    const currentGameViewerUrl = typeof activeGameViewerUrl === "string" ? activeGameViewerUrl.trim() : "";
-    const hasActiveRun = Boolean(activeGameRun);
-    const hasCurrentGame = currentGameViewerUrl.length > 0 &&
-        activeGameRun?.viewerAttachment === "attached";
-    /**
-     * Push or replace the browser URL to reflect the active app (or browse).
-     * `subPath` is appended after the slug so `/apps/<slug>/details` shows
-     * the details page instead of launching directly.
-     */
-    const pushAppsUrl = useCallback((slug, subPath) => {
-        try {
-            const path = slug
-                ? subPath
-                    ? `/apps/${slug}/${subPath}`
-                    : `/apps/${slug}`
-                : "/apps";
-            if (shouldUseHashNavigation()) {
-                window.location.hash = path;
-            }
-            else {
-                window.history.replaceState(null, "", path);
-            }
-        }
-        catch {
-            /* ignore — sandboxed iframe or SSR */
-        }
-    }, []);
-    // Track the current `/apps/<slug>/details` slug for the details-page
-    // routing. Listens to hashchange + popstate so back/forward navigation
-    // unmounts AppDetailsView correctly.
-    const [appsDetailsSlug, setAppsDetailsSlug] = useState(() => parseAppsRoute(getCurrentAppsPath()).action === "details"
-        ? parseAppsRoute(getCurrentAppsPath()).slug
-        : null);
-    useEffect(() => {
-        const handle = () => {
-            const parsed = parseAppsRoute(getCurrentAppsPath());
-            setAppsDetailsSlug(parsed.action === "details" ? parsed.slug : null);
-        };
-        window.addEventListener("hashchange", handle);
-        window.addEventListener("popstate", handle);
-        return () => {
-            window.removeEventListener("hashchange", handle);
-            window.removeEventListener("popstate", handle);
-        };
-    }, []);
-    // Bun side fires this when a menu/tray click hits an app that declares
-    // `hasDetailsPage: true`. We switch to the apps tab and navigate the
-    // hash to /apps/<slug>/details so AppDetailsView mounts.
-    useEffect(() => {
-        return subscribeDesktopBridgeEvent({
-            rpcMessage: "desktopAppDetailsRequested",
-            ipcChannel: "desktop:appDetailsRequested",
-            listener: (payload) => {
-                if (!payload ||
-                    typeof payload !== "object" ||
-                    typeof payload.slug !== "string") {
-                    return;
-                }
-                const slug = payload.slug;
-                if (!slug)
-                    return;
-                setTab("apps");
-                setState("appsSubTab", "browse");
-                // Update state directly: pushAppsUrl uses replaceState in non-hash
-                // routing mode, which fires no event, so the hashchange/popstate
-                // listener wouldn't pick it up.
-                setAppsDetailsSlug(slug);
-                pushAppsUrl(slug, "details");
-            },
-        });
-    }, [pushAppsUrl, setState, setTab]);
-    const sortedRuns = useMemo(() => [...appRuns].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)), [appRuns]);
-    const mergeRun = useCallback((run) => {
-        const nextRuns = [
-            run,
-            ...appRuns.filter((item) => item.runId !== run.runId),
-        ].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
-        setState("appRuns", nextRuns);
-        return nextRuns;
-    }, [appRuns, setState]);
-    const refreshRuns = useCallback(async () => {
-        const runs = await client.listAppRuns();
-        setState("appRuns", runs);
-        return runs;
-    }, [setState]);
-    useEffect(() => {
-        if (appWindows.length === 0)
-            return;
-        let cancelled = false;
-        const heartbeat = async () => {
-            const records = appWindowsRef.current;
-            for (const record of records) {
-                if (!record.runId)
-                    continue;
-                try {
-                    await client.heartbeatAppRun(record.runId);
-                }
-                catch (err) {
-                    if (cancelled || getApiStatus(err) !== 404)
-                        continue;
-                    setAppWindows((current) => current.filter((item) => item.runId !== record.runId));
-                    void refreshRuns().catch(() => { });
-                }
-            }
-        };
-        void heartbeat();
-        const timer = window.setInterval(() => {
-            void heartbeat();
-        }, APP_WINDOW_HEARTBEAT_MS);
-        return () => {
-            cancelled = true;
-            window.clearInterval(timer);
-        };
-    }, [appWindows.length, refreshRuns]);
-    const loadApps = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        void refreshRuns().catch((err) => {
-            console.warn("[AppsView] Failed to list app runs:", err);
-        });
-        try {
-            const serverAppsResult = await client
-                .listApps()
-                .then((apps) => ({
-                status: "fulfilled",
-                value: apps,
-            }))
-                .catch((reason) => ({
-                status: "rejected",
-                reason,
-            }));
-            const serverApps = serverAppsResult.status === "fulfilled" ? serverAppsResult.value : [];
-            if (serverAppsResult.status === "rejected") {
-                console.warn("[AppsView] Failed to list apps:", serverAppsResult.reason);
-            }
-            // Internal tool apps are client-owned navigation surfaces. The registry
-            // augments them with curated apps, but it must not be able to hide them.
-            let catalogApps;
-            try {
-                catalogApps = [
-                    ...getInternalToolApps(),
-                    ...(await client.listCatalogApps()),
-                ];
-            }
-            catch (catalogErr) {
-                console.warn("[AppsView] Failed to load catalog apps; using internal tools:", catalogErr);
-                catalogApps = getInternalToolApps();
-            }
-            // Inject registered overlay apps (e.g. companion) if not already from server
-            const overlayDescriptors = getAllOverlayApps()
-                .filter((oa) => !serverApps.some((a) => a.name === oa.name))
-                .filter((oa) => !catalogApps.some((a) => a.name === oa.name))
-                .map(overlayAppToRegistryInfo);
-            // Internal-tool entries (first in `catalogApps`) own the canonical
-            // metadata (heroImage, category, descriptions). Server runtime data is
-            // joined onto them via app-runs elsewhere; we must NOT let bare
-            // `serverApps` entries clobber the heroImage by winning the dedup.
-            // Keep the FIRST occurrence so internal tools stay authoritative.
-            const seen = new Set();
-            const list = [
-                ...catalogApps,
-                ...overlayDescriptors,
-                ...serverApps,
-            ].filter((app) => {
-                if (seen.has(app.name))
-                    return false;
-                seen.add(app.name);
-                return true;
-            });
-            setApps(list);
-        }
-        catch (err) {
-            setError(t("appsview.LoadError", {
-                message: err instanceof Error ? err.message : t("appsview.NetworkError"),
-            }));
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [refreshRuns, t]);
-    useEffect(() => {
-        void loadApps();
-    }, [loadApps]);
-    useEffect(() => {
-        let cancelled = false;
-        const refresh = async () => {
-            try {
-                await refreshRuns();
-            }
-            catch (err) {
-                if (!cancelled) {
-                    console.warn("[AppsView] Failed to refresh app runs:", err);
-                }
-            }
-        };
-        const timer = setInterval(() => {
-            void refresh();
-        }, 5_000);
-        return () => {
-            cancelled = true;
-            clearInterval(timer);
-        };
-    }, [refreshRuns]);
-    useEffect(() => {
-        if (appsSubTab !== "running")
-            return;
-        setState("appsSubTab", "browse");
-    }, [appsSubTab, setState]);
-    const pushRecentApp = useCallback((appName) => {
-        const next = [appName, ...recentApps.filter((name) => name !== appName)];
-        if (next.length > RECENT_APPS_LIMIT)
-            next.length = RECENT_APPS_LIMIT;
-        setState("recentApps", next);
-    }, [recentApps, setState]);
-    const openAppRouteWindow = useCallback(async (app) => {
-        if (isAppWindow || !isElectrobunRuntime()) {
-            return false;
-        }
-        // Internal tools that have an explicit windowPath open as their own
-        // app window (Ghost-style). The renderer parses `appWindow=1` + the
-        // hash route and renders the matching tab. This supersedes upstream's
-        // `desktopOpenSurfaceWindow` + `nativeSurfaceForInternalToolTab` path
-        // (the surface-bridge approach was removed when AppWindowRenderer
-        // landed — see the apps-as-windows refactor).
-        const internalWindowPath = getInternalToolAppWindowPath(app.name);
-        if (internalWindowPath) {
-            const slug = getAppSlug(app.name);
-            const created = await invokeDesktopBridgeRequest({
-                rpcMethod: "desktopOpenAppWindow",
-                ipcChannel: "desktop:openAppWindow",
-                params: {
-                    slug,
-                    title: app.displayName ?? app.name,
-                    path: internalWindowPath,
-                    alwaysOnTop: appWindowAlwaysOnTop,
-                },
-            });
-            if (!created?.id)
-                return false;
-            setAppWindows((current) => [
-                {
-                    id: created.id,
-                    kind: "managed",
-                    runId: "",
-                    appName: app.name,
-                    displayName: app.displayName ?? app.name,
-                    alwaysOnTop: created.alwaysOnTop,
-                },
-                ...current.filter((item) => item.id !== created.id),
-            ]);
-            pushRecentApp(app.name);
-            setState("appsSubTab", "browse");
-            pushAppsUrl(slug);
-            setActionNotice(t("appsview.OpenedInDesktopWindow", {
-                defaultValue: `${app.displayName ?? app.name} opened in a desktop window.`,
-                name: app.displayName ?? app.name,
-            }), "success", 2600);
-            return true;
-        }
-        const slug = getAppSlug(app.name);
-        const created = await invokeDesktopBridgeRequest({
-            rpcMethod: "desktopOpenAppWindow",
-            ipcChannel: "desktop:openAppWindow",
-            params: {
-                slug,
-                title: app.displayName ?? app.name,
-                path: `/apps/${encodeURIComponent(slug)}`,
-                alwaysOnTop: appWindowAlwaysOnTop,
-            },
-        });
-        if (!created?.id)
-            return false;
-        setAppWindows((current) => [
-            {
-                id: created.id,
-                kind: "managed",
-                runId: "",
-                appName: app.name,
-                displayName: app.displayName ?? app.name,
-                alwaysOnTop: created.alwaysOnTop,
-            },
-            ...current.filter((item) => item.id !== created.id),
-        ]);
-        pushRecentApp(app.name);
-        setState("appsSubTab", "browse");
-        pushAppsUrl(getAppSlug(app.name));
-        setActionNotice(t("appsview.OpenedInDesktopWindow", {
-            defaultValue: `${app.displayName ?? app.name} opened in a desktop window.`,
-            name: app.displayName ?? app.name,
-        }), "success", 2600);
-        return true;
-    }, [
-        appWindowAlwaysOnTop,
-        isAppWindow,
-        pushAppsUrl,
-        pushRecentApp,
-        setActionNotice,
-        setState,
-        t,
-    ]);
-    const openRunInDesktopWindow = useCallback(async (run) => {
-        if (!run.viewer?.url ||
-            shouldUseEmbeddedAppViewer(run) ||
-            !isElectrobunRuntime()) {
-            return false;
-        }
-        const viewerUrl = resolveDesktopViewerUrl(run.viewer.url);
-        if (!viewerUrl)
-            return false;
-        let runForWindow = run;
-        if (run.viewerAttachment !== "attached") {
-            const attached = await client.attachAppRun(run.runId);
-            runForWindow =
-                attached.run ??
-                    {
-                        ...run,
-                        viewerAttachment: "attached",
-                    };
-            mergeRun(runForWindow);
-        }
-        const created = await invokeDesktopBridgeRequest({
-            rpcMethod: "gameOpenWindow",
-            ipcChannel: "game:openWindow",
-            params: {
-                url: viewerUrl,
-                title: runForWindow.displayName,
-                alwaysOnTop: appWindowAlwaysOnTop,
-            },
-        });
-        if (!created?.id)
-            return false;
-        setAppWindows((current) => [
-            {
-                id: created.id,
-                kind: "game",
-                runId: runForWindow.runId,
-                appName: runForWindow.appName,
-                displayName: runForWindow.displayName,
-                alwaysOnTop: appWindowAlwaysOnTop,
-            },
-            ...current.filter((item) => item.id !== created.id),
-        ]);
-        setState("activeGameRunId", runForWindow.runId);
-        setState("tab", "apps");
-        setState("appsSubTab", "browse");
-        pushAppsUrl(getAppSlug(runForWindow.appName));
-        void client.heartbeatAppRun(runForWindow.runId).catch(() => { });
-        setActionNotice(t("appsview.OpenedInDesktopWindow", {
-            defaultValue: `${runForWindow.displayName} opened in a desktop window.`,
-            name: runForWindow.displayName,
-        }), "success", 2600);
-        return true;
-    }, [appWindowAlwaysOnTop, mergeRun, pushAppsUrl, setActionNotice, setState, t]);
-    const handleLaunch = useCallback(async (app) => {
-        slugAutoLaunchDone.current = true;
-        // Apps that declare config / runtime / widgets show a Details page
-        // first so the user can review settings before launching. The Launch
-        // button on AppDetailsView is what eventually calls the bridge or
-        // navigates inline. Skip when we're already inside an app window
-        // (the slug lives there, not in the main shell).
-        if (!isAppWindow && appNeedsDetailsPage(app)) {
-            const slug = getAppSlug(app.name);
-            pushRecentApp(app.name);
-            setState("appsSubTab", "browse");
-            setAppsDetailsSlug(slug);
-            pushAppsUrl(slug, "details");
-            return;
-        }
-        // In Electrobun, try to open the app's dedicated native window via
-        // `openAppRouteWindow` — slug-deduped + per-app bounds, Ghost-style.
-        if (isElectrobunRuntime()) {
-            const openedRouteWindow = await openAppRouteWindow(app).catch(() => false);
-            if (openedRouteWindow)
-                return;
-        }
-        // Web fallback: internal tools switch tabs in the shell.
-        const internalToolTab = getInternalToolAppTargetTab(app.name);
-        if (internalToolTab) {
-            pushRecentApp(app.name);
-            setTab(internalToolTab);
-            return;
-        }
-        // Web fallback: overlay apps (e.g. companion) mount inside the shell.
-        if (isOverlayLaunchApp(app)) {
-            pushRecentApp(app.name);
-            setState("activeOverlayApp", app.name);
-            pushAppsUrl(getAppSlug(app.name));
-            return;
-        }
-        try {
-            const result = await client.launchApp(app.name);
-            const primaryLaunchDiagnostic = result.diagnostics?.find((diagnostic) => diagnostic.severity === "error") ?? result.diagnostics?.[0];
-            const launchedRun = result.run ? mergeRun(result.run) : null;
-            const primaryRun = launchedRun?.find((run) => run.appName === app.name) ?? result.run;
-            if (primaryRun)
-                pushRecentApp(app.name);
-            if (primaryRun?.viewer?.url) {
-                const openedInDesktopWindow = await openRunInDesktopWindow(primaryRun).catch(() => false);
-                if (openedInDesktopWindow) {
-                    if (primaryLaunchDiagnostic?.severity === "error") {
-                        setActionNotice(primaryLaunchDiagnostic.message, "error", 6500);
-                    }
-                    return;
-                }
-                setState("activeGameRunId", primaryRun.runId);
-                if (primaryRun.viewer.postMessageAuth &&
-                    !primaryRun.viewer.authMessage) {
-                    setActionNotice(t("appsview.IframeAuthMissing", {
-                        name: app.displayName ?? app.name,
-                    }), "error", 4800);
-                }
-                if (primaryLaunchDiagnostic) {
-                    setActionNotice(primaryLaunchDiagnostic.message, primaryLaunchDiagnostic.severity === "error" ? "error" : "info", 6500);
-                }
-                setState("tab", "apps");
-                setState("appsSubTab", "games");
-                pushAppsUrl(getAppSlug(app.name));
-                return;
-            }
-            if (primaryRun) {
-                setState("appsSubTab", "browse");
-                pushAppsUrl(getAppSlug(app.name));
-            }
-            if (primaryLaunchDiagnostic) {
-                setActionNotice(primaryLaunchDiagnostic.message, primaryLaunchDiagnostic.severity === "error" ? "error" : "info", 6500);
-            }
-            const targetUrl = result.launchUrl ?? app.launchUrl;
-            if (targetUrl) {
-                try {
-                    await openExternalUrl(targetUrl);
-                    setActionNotice(t("appsview.OpenedInNewTab", {
-                        name: app.displayName ?? app.name,
-                    }), "success", 2600);
-                }
-                catch {
-                    setActionNotice(t("appsview.PopupBlockedOpen", {
-                        name: app.displayName ?? app.name,
-                    }), "error", 4200);
-                }
-                return;
-            }
-            setActionNotice(t("appsview.LaunchedNoViewer", {
-                name: app.displayName ?? app.name,
-            }), "error", 4000);
-        }
-        catch (err) {
-            setActionNotice(t("appsview.LaunchFailed", {
-                name: app.displayName ?? app.name,
-                message: err instanceof Error ? err.message : t("common.error"),
-            }), "error", 4000);
-        }
-    }, [
-        mergeRun,
-        openAppRouteWindow,
-        openRunInDesktopWindow,
-        pushAppsUrl,
-        pushRecentApp,
-        isAppWindow,
-        setActionNotice,
-        setState,
-        setTab,
-        t,
-    ]);
-    // Auto-launch from URL slug on first load (e.g. /apps/babylon after refresh)
-    useEffect(() => {
-        if (slugAutoLaunchDone.current || apps.length === 0)
-            return;
-        const parsed = parseAppsRoute(getCurrentAppsPath());
-        // /apps/<slug>/details is handled by the details renderer below; never
-        // auto-launch from it (would loop straight back to details).
-        if (parsed.action === "details")
-            return;
-        const slug = parsed.slug ?? getAppSlugFromPath(getCurrentAppsPath());
-        slugAutoLaunchDone.current = true;
-        if (!slug)
-            return;
-        const app = findAppBySlug(apps, slug);
-        if (!app)
-            return;
-        // Restored game runs should not block direct overlay-app routes like
-        // /apps/companion, which are expected to take over immediately.
-        if (activeGameRunId && !isOverlayLaunchApp(app))
-            return;
-        void handleLaunch(app);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- one-time on first apps load
-    }, [apps, handleLaunch, activeGameRunId]);
-    const handleOpenCurrentGame = useCallback(() => {
-        if (!hasActiveRun || !activeGameRun)
-            return;
-        setState("tab", "apps");
-        setState("appsSubTab", "games");
-        pushAppsUrl(getAppSlug(activeGameRun.appName));
-    }, [activeGameRun, hasActiveRun, pushAppsUrl, setState]);
-    const handleOpenRun = useCallback(async (run) => {
-        if (!run.viewer?.url) {
-            if (run.launchUrl) {
-                try {
-                    await openExternalUrl(run.launchUrl);
-                    setActionNotice(t("appsview.OpenedInNewTab", {
-                        name: run.displayName,
-                    }), "success", 2600);
-                }
-                catch {
-                    setActionNotice(t("appsview.PopupBlockedOpen", {
-                        name: run.displayName,
-                    }), "error", 4200);
-                }
-                return;
-            }
-            setActionNotice(t("appsview.LaunchedNoViewer", {
-                name: run.displayName,
-            }), "info", 3200);
-            return;
-        }
-        setBusyRunId(run.runId);
-        try {
-            const openedInDesktopWindow = await openRunInDesktopWindow(run).catch(() => false);
-            if (openedInDesktopWindow) {
-                pushRecentApp(run.appName);
-                return;
-            }
-            const result = run.viewerAttachment === "attached"
-                ? {
-                    success: true,
-                    message: `${run.displayName} attached.`,
-                    run,
-                }
-                : await client.attachAppRun(run.runId);
-            const nextRun = result.run ??
-                {
-                    ...run,
-                    viewerAttachment: "attached",
-                };
-            mergeRun(nextRun);
-            pushRecentApp(nextRun.appName);
-            setState("activeGameRunId", nextRun.runId);
-            setState("tab", "apps");
-            setState("appsSubTab", "games");
-            pushAppsUrl(getAppSlug(nextRun.appName));
-            if (nextRun.viewer?.postMessageAuth && !nextRun.viewer.authMessage) {
-                setActionNotice(t("appsview.IframeAuthMissing", {
-                    name: nextRun.displayName,
-                }), "error", 4800);
-            }
-            else if (result.message) {
-                setActionNotice(result.message, "success", 2200);
-            }
-        }
-        catch (err) {
-            setActionNotice(t("appsview.LaunchFailed", {
-                name: run.displayName,
-                message: err instanceof Error ? err.message : t("common.error"),
-            }), "error", 4000);
-        }
-        finally {
-            setBusyRunId(null);
-        }
-    }, [
-        mergeRun,
-        openRunInDesktopWindow,
-        pushAppsUrl,
-        pushRecentApp,
-        setActionNotice,
-        setState,
-        t,
-    ]);
-    const visibleApps = useMemo(() => {
-        return filterAppsForCatalog(apps, {
-            activeAppNames,
-            searchQuery,
-            walletEnabled,
-        });
-    }, [activeAppNames, apps, searchQuery, walletEnabled]);
-    const browseApps = useMemo(() => {
-        return filterAppsForCatalog(apps, { walletEnabled });
-    }, [apps, walletEnabled]);
-    const handleToggleFavorite = useCallback((appName) => {
-        const current = favoriteApps;
-        const next = current.includes(appName)
-            ? current.filter((name) => name !== appName)
-            : [...current, appName];
-        setState("favoriteApps", next);
-    }, [favoriteApps, setState]);
-    const handleStopRun = useCallback(async (run) => {
-        if (stoppingRunId === run.runId)
-            return;
-        setStoppingRunId(run.runId);
-        try {
-            await client.stopAppRun(run.runId);
-            // Remove the run from local state so the UI updates immediately.
-            const nextRuns = appRuns.filter((r) => r.runId !== run.runId);
-            setState("appRuns", nextRuns);
-            if (activeGameRunId === run.runId) {
-                setState("activeGameRunId", "");
-            }
-            setActionNotice(t("appsview.Stopped", {
-                defaultValue: `${run.displayName} stopped.`,
-            }), "success", 2600);
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            setActionNotice(t("appsview.StopFailed", {
-                defaultValue: `Could not stop ${run.displayName}: ${message}`,
-            }), "error", 4000);
-        }
-        finally {
-            setStoppingRunId(null);
-        }
-    }, [activeGameRunId, appRuns, setActionNotice, setState, stoppingRunId, t]);
-    const handleToggleAppWindowAlwaysOnTop = useCallback(async (windowRecord) => {
-        if (busyAppWindowId === windowRecord.id)
-            return;
-        const next = !windowRecord.alwaysOnTop;
-        setBusyAppWindowId(windowRecord.id);
-        try {
-            if (windowRecord.kind === "managed") {
-                const result = await invokeDesktopBridgeRequest({
-                    rpcMethod: "desktopSetManagedWindowAlwaysOnTop",
-                    ipcChannel: "desktop:setManagedWindowAlwaysOnTop",
-                    params: { id: windowRecord.id, flag: next },
-                });
-                if (!result?.success) {
-                    throw new Error("Window is no longer open.");
-                }
-            }
-            else {
-                const result = await invokeDesktopBridgeRequest({
-                    rpcMethod: "canvasSetAlwaysOnTop",
-                    ipcChannel: "canvas:setAlwaysOnTop",
-                    params: { id: windowRecord.id, flag: next },
-                });
-                if (!result?.success) {
-                    throw new Error("Window is no longer open.");
-                }
-            }
-            setAppWindows((current) => current.map((item) => item.id === windowRecord.id
-                ? {
-                    ...item,
-                    alwaysOnTop: next,
-                }
-                : item));
-            setActionNotice(next
-                ? t("appsview.AppWindowPinned", {
-                    defaultValue: `${windowRecord.displayName} will stay on top.`,
-                    name: windowRecord.displayName,
-                })
-                : t("appsview.AppWindowNormal", {
-                    defaultValue: `${windowRecord.displayName} is a normal window.`,
-                    name: windowRecord.displayName,
-                }), "success", 2200);
-        }
-        catch (err) {
-            setActionNotice(t("appsview.AppWindowPinFailed", {
-                defaultValue: `Could not update ${windowRecord.displayName}: ${err instanceof Error ? err.message : t("common.error")}`,
-                name: windowRecord.displayName,
-                message: err instanceof Error ? err.message : t("common.error"),
-            }), "error", 3600);
-        }
-        finally {
-            setBusyAppWindowId(null);
-        }
-    }, [busyAppWindowId, setActionNotice, t]);
-    const appsSidebar = (_jsx(AppsSidebar, { apps: apps, browseApps: browseApps, runs: sortedRuns, activeAppNames: activeAppNames, favoriteAppNames: favoriteAppNames, selectedAppName: activeGameRun?.appName ?? null, collapsed: sidebarCollapsed, onCollapsedChange: handleSidebarCollapsedChange, width: sidebarWidth, onWidthChange: handleSidebarWidthChange, minWidth: APPS_SIDEBAR_MIN_WIDTH, maxWidth: APPS_SIDEBAR_MAX_WIDTH, onLaunchApp: (app) => void handleLaunch(app), onOpenRun: (run) => void handleOpenRun(run) }));
-    return (_jsx(PageLayout, { className: "h-full bg-transparent", "data-testid": "apps-shell", sidebar: appsSidebar, contentInnerClassName: "w-full", contentClassName: "![scrollbar-width:none] [&::-webkit-scrollbar]:!hidden", children: _jsxs("div", { className: "device-layout mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-4 lg:px-6", children: [appWindows.length > 0 ? (_jsx("section", { "data-testid": "app-window-controls", className: "flex flex-wrap items-center gap-2", children: appWindows.map((windowRecord) => {
-                        const busy = busyAppWindowId === windowRecord.id;
-                        return (_jsxs("div", { className: "inline-flex min-w-0 items-center gap-2 rounded-full border border-border/55 bg-card/70 px-3 py-1.5 text-xs text-muted", children: [_jsx("span", { className: "max-w-44 truncate font-medium text-foreground", children: windowRecord.displayName }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-full border border-border/60 px-2 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-muted transition-colors hover:border-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60", onClick: () => void handleToggleAppWindowAlwaysOnTop(windowRecord), disabled: busy, "aria-label": windowRecord.alwaysOnTop
-                                        ? `Let ${windowRecord.displayName} act like a normal window`
-                                        : `Keep ${windowRecord.displayName} on top`, children: [windowRecord.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" })), windowRecord.alwaysOnTop ? "Normal" : "On top"] })] }, windowRecord.id));
-                    }) })) : null, hasActiveRun ? (_jsx("div", { className: "flex flex-wrap items-center justify-between gap-3", children: _jsx("button", { type: "button", className: "rounded-full border border-ok/35 bg-ok/10 px-3 py-1.5 text-xs-tight font-medium text-ok transition-colors hover:bg-ok/15", onClick: handleOpenCurrentGame, children: hasCurrentGame ? "Live viewer" : "Active run" }) })) : null, appsDetailsSlug ? (_jsx(AppDetailsView, { slug: appsDetailsSlug, onLaunched: (launch) => {
-                        setAppsDetailsSlug(null);
-                        if (launch.mode === "window") {
-                            pushAppsUrl();
-                        }
-                    } })) : (_jsxs(_Fragment, { children: [_jsx(RunningAppsRow, { runs: sortedRuns, catalogApps: apps, busyRunId: busyRunId, onOpenRun: (run) => void handleOpenRun(run), onStopRun: (run) => void handleStopRun(run), stoppingRunId: stoppingRunId }), _jsx(AppsCatalogGrid, { activeAppNames: activeAppNames, error: error, favoriteAppNames: favoriteAppNames, loading: loading, searchQuery: searchQuery, visibleApps: visibleApps, onLaunch: (app) => void handleLaunch(app), onToggleFavorite: handleToggleFavorite })] }))] }) }));
-}