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

package/components/pages/AppDetailsView.js

@@ -8,19 +8,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Pin, PinOff, Rocket, Settings as SettingsIcon, TriangleAlert, } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge/index.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { getWidgetComponent } from "../../widgets/registry.js";
 import { isWidgetVisible, loadChatSidebarVisibility, saveChatSidebarVisibility, widgetVisibilityKey, } from "../../widgets/visibility.js";
-import { resolveRuntimeImageUrl } from "../apps/app-identity.js";
+import { resolveRuntimeImageUrl } from "../apps/app-identity.helpers.js";
 import { getAppDetailExtension } from "../apps/extensions/registry.js";
 import { findAppBySlug, getAppSlug } from "../apps/helpers.js";
-import { getInternalToolAppDescriptors, getInternalToolAppHasDetailsPage, getInternalToolApps, getInternalToolAppTargetTab, isInternalToolApp, } from "../apps/internal-tool-apps.js";
+import { getInternalToolAppDescriptors, getInternalToolApps, getInternalToolAppTargetTab, } from "../apps/internal-tool-apps.js";
 import { getLaunchHistoryForApp, recordLaunchAttempt, } from "../apps/launch-history.js";
-import { getAllOverlayApps, isOverlayApp, overlayAppToRegistryInfo, } from "../apps/overlay-app-registry.js";
+import { getAvailableOverlayApps, isOverlayApp, overlayAppToRegistryInfo, } from "../apps/overlay-app-registry.js";
 import { loadPerAppConfig, savePerAppConfig, subscribePerAppConfig, } from "../apps/per-app-config.js";
+import { getProvenanceFlags, getProvenanceTitle } from "../apps/provenance.js";
 import { useRegistryCatalog } from "../apps/useRegistryCatalog.js";
 function pluginIdFromName(name) {
     return name.replace(/^@elizaos\/app-/, "");
@@ -40,7 +42,7 @@ function resolveAppFromSlug(slug, catalog) {
         }
     }
     // Overlay app by slug
-    const overlay = getAllOverlayApps().find((a) => getAppSlug(a.name) === slug && isOverlayApp(a.name));
+    const overlay = getAvailableOverlayApps().find((a) => getAppSlug(a.name) === slug && isOverlayApp(a.name));
     if (overlay) {
         return {
             source: "overlay",
@@ -61,17 +63,57 @@ function resolveAppFromSlug(slug, catalog) {
     }
     return null;
 }
-function sourceLabel(source) {
+function sourceLabel(source, t) {
     switch (source) {
         case "internal-tool":
-            return "Internal Tool";
+            return t("appdetails.source.internalTool", {
+                defaultValue: "Internal Tool",
+            });
         case "overlay":
-            return "Overlay App";
+            return t("appdetails.source.overlay", { defaultValue: "Overlay App" });
         case "catalog":
-            return "Catalog App";
+            return t("appdetails.source.catalog", { defaultValue: "Catalog App" });
         default:
-            return "Unknown";
+            return t("appdetails.source.unknown", { defaultValue: "Unknown" });
+    }
+}
+function appProvenanceBadges(app, t) {
+    const flags = getProvenanceFlags(app);
+    const title = getProvenanceTitle(flags, "app");
+    const badges = [];
+    if (flags.isThirdParty) {
+        badges.push({
+            key: "origin",
+            label: t("appdetails.badge.thirdParty", { defaultValue: "Third party" }),
+            className: "border-border/60 text-muted",
+            title,
+        });
+    }
+    else if (flags.isBuiltIn) {
+        badges.push({
+            key: "origin",
+            label: t("appdetails.badge.builtIn", { defaultValue: "Built in" }),
+            className: "border-border/60 text-muted",
+            title,
+        });
+    }
+    if (flags.isCommunity) {
+        badges.push({
+            key: "support",
+            label: t("appdetails.badge.community", { defaultValue: "Community" }),
+            className: "border-warn/45 text-warn",
+            title,
+        });
     }
+    else if (flags.isFirstParty) {
+        badges.push({
+            key: "support",
+            label: t("appdetails.badge.firstParty", { defaultValue: "First party" }),
+            className: "border-accent/45 text-accent",
+            title,
+        });
+    }
+    return badges;
 }
 function isOverlayLaunchApp(app) {
     return isOverlayApp(app.name) || app.launchType === "overlay";
@@ -90,24 +132,67 @@ function formatLabel(value) {
 function SectionHeader({ children }) {
     return (_jsx("h3", { className: "text-xs-tight font-semibold uppercase tracking-[0.18em] text-accent", children: children }));
 }
-function ChipList({ items }) {
+function ChipList({ items, t, }) {
     if (items.length === 0) {
-        return _jsx("span", { className: "text-xs text-muted", children: "None declared" });
+        return (_jsx("span", { className: "text-xs text-muted", children: t("appdetails.noneDeclared", { defaultValue: "None declared" }) }));
     }
     return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item) => (_jsx("span", { className: "rounded-full border border-border/60 bg-card/50 px-2 py-0.5 text-xs text-muted", children: item }, item))) }));
 }
-function WidgetPreview({ declaration, pluginId, }) {
+function WidgetPreview({ declaration, pluginId, t, }) {
     const Component = useMemo(() => getWidgetComponent(pluginId, declaration.id), [declaration.id, pluginId]);
     if (!Component) {
-        return (_jsx("div", { className: "rounded-md border border-border/40 bg-card/30 px-3 py-2 text-xs text-muted", children: "No bundled component for this widget \u2014 preview unavailable." }));
+        return (_jsx("div", { className: "rounded-sm border border-border/40 bg-card/30 px-3 py-2 text-xs text-muted", children: t("appdetails.widgetPreviewUnavailable", {
+                defaultValue: "No bundled component for this widget — preview unavailable.",
+            }) }));
     }
-    return (_jsx("div", { className: "rounded-md border border-border/40 bg-card/30 p-3", children: _jsx(Component, { pluginId: pluginId, events: [], clearEvents: () => { } }) }));
+    return (_jsx("div", { className: "rounded-sm border border-border/40 bg-card/30 p-3", children: _jsx(Component, { pluginId: pluginId, events: [], clearEvents: () => { } }) }));
+}
+function WidgetRow({ declaration, pluginId, visible, expanded, onTogglePreview, onToggleVisible, t, }) {
+    const widgetKey = widgetVisibilityKey(declaration.pluginId, declaration.id);
+    const previewButton = useAgentElement({
+        id: `widget-preview-${widgetKey}`,
+        role: "button",
+        label: t("appdetails.preview", { defaultValue: "Preview" }) +
+            ` — ${declaration.label}`,
+        group: "app-widgets",
+        status: expanded ? "active" : "inactive",
+        description: `Toggle preview of the ${declaration.label} widget`,
+        onActivate: onTogglePreview,
+    });
+    const showToggle = useAgentElement({
+        id: `widget-show-${widgetKey}`,
+        role: "toggle",
+        label: t("appdetails.show", { defaultValue: "Show" }) +
+            ` — ${declaration.label}`,
+        group: "app-widgets",
+        status: visible ? "active" : "inactive",
+        description: `Show or hide the ${declaration.label} widget`,
+        getValue: () => visible,
+        onActivate: () => onToggleVisible(!visible),
+    });
+    return (_jsxs("li", { className: "rounded-sm border border-border/40 bg-card/30", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: declaration.label }), _jsx("div", { className: "truncate text-[10px] uppercase tracking-[0.14em] text-muted", children: declaration.slot })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { ref: previewButton.ref, type: "button", onClick: onTogglePreview, className: "rounded-full border border-border/60 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-muted transition-colors hover:text-foreground", ...previewButton.agentProps, children: expanded
+                                    ? t("appdetails.hide", { defaultValue: "Hide" })
+                                    : t("appdetails.preview", {
+                                        defaultValue: "Preview",
+                                    }) }), _jsxs("label", { className: "inline-flex cursor-pointer items-center gap-1.5 text-xs", children: [_jsx("input", { ref: showToggle.ref, type: "checkbox", checked: visible, onChange: (event) => onToggleVisible(event.currentTarget.checked), className: "h-3.5 w-3.5 accent-accent", ...showToggle.agentProps }), _jsx("span", { className: "text-muted", children: t("appdetails.show", { defaultValue: "Show" }) })] })] })] }), expanded ? (_jsx("div", { className: "border-t border-border/40 p-3", children: _jsx(WidgetPreview, { declaration: declaration, pluginId: pluginId, t: t }) })) : null] }));
 }
 export function AppDetailsView({ slug, onLaunched, }) {
-    const { plugins, appRuns, t, setTab, setState, setActionNotice } = useApp();
+    const { plugins, appRuns, t, setTab, setState, setActionNotice } = useAppSelectorShallow((s) => ({
+        plugins: s.plugins,
+        appRuns: s.appRuns,
+        t: s.t,
+        setTab: s.setTab,
+        setState: s.setState,
+        setActionNotice: s.setActionNotice,
+    }));
     // Catalog of registry apps for slug → app resolution.
-    const { catalog: registryCatalog, error: catalogError } = useRegistryCatalog();
-    const catalog = registryCatalog ?? [];
+    const { catalog: registryCatalog, error: catalogError, loading: catalogLoading, } = useRegistryCatalog();
+    // Stabilize identity: `registryCatalog ?? []` would mint a fresh array every
+    // render while the registry is still loading (registryCatalog nullish), which
+    // re-recomputes `resolved` and re-fires the launch-history effect every
+    // render — an infinite render loop on first paint. Memoize so it only changes
+    // when the underlying catalog actually changes.
+    const catalog = useMemo(() => registryCatalog ?? [], [registryCatalog]);
     const resolved = useMemo(() => resolveAppFromSlug(slug, catalog), [catalog, slug]);
     // Per-app config (launch mode, alwaysOnTop, free-form settings).
     const [config, setConfig] = useState(() => loadPerAppConfig(slug));
@@ -252,7 +337,9 @@ export function AppDetailsView({ slug, onLaunched, }) {
                 },
             });
             if (!created?.id) {
-                throw new Error("Desktop bridge declined to open the window.");
+                throw new Error(t("appdetails.bridgeDeclined", {
+                    defaultValue: "Desktop bridge declined to open the window.",
+                }));
             }
             recordResult(true);
             onLaunched?.({ mode: "window", slug });
@@ -280,11 +367,70 @@ export function AppDetailsView({ slug, onLaunched, }) {
         slug,
         t,
     ]);
+    const supportsInline = resolved?.source === "internal-tool" || resolved?.source === "overlay";
+    const launchButton = useAgentElement({
+        id: "launch",
+        role: "button",
+        label: t("appdetails.launch", { defaultValue: "Launch" }),
+        group: "app-launch",
+        status: launching ? "active" : "inactive",
+        description: "Launch this app",
+        onActivate: () => void handleLaunch(),
+    });
+    const launchModeWindowRadio = useAgentElement({
+        id: "launch-mode-window",
+        role: "toggle",
+        label: t("appdetails.dedicatedWindow", {
+            defaultValue: "Dedicated window",
+        }),
+        group: "launch-mode",
+        status: config.launchMode === "window" ? "active" : "inactive",
+        description: "Launch this app in a dedicated window",
+        getValue: () => config.launchMode === "window",
+        onActivate: () => updateConfig({ launchMode: "window" }),
+    });
+    const launchModeInlineRadio = useAgentElement({
+        id: "launch-mode-inline",
+        role: "toggle",
+        label: t("appdetails.mainWindow", { defaultValue: "Main window" }),
+        group: "launch-mode",
+        status: config.launchMode === "inline" ? "active" : "inactive",
+        description: "Launch this app inline in the main window",
+        getValue: () => config.launchMode === "inline",
+        onActivate: () => {
+            if (supportsInline)
+                updateConfig({ launchMode: "inline" });
+        },
+    });
+    const alwaysOnTopToggle = useAgentElement({
+        id: "always-on-top",
+        role: "toggle",
+        label: t("appdetails.keepOnTop", {
+            defaultValue: "Keep this app's window on top",
+        }),
+        group: "app-launch",
+        status: config.alwaysOnTop ? "active" : "inactive",
+        description: "Keep this app's window above other windows",
+        getValue: () => config.alwaysOnTop,
+        onActivate: () => {
+            if (config.launchMode === "window")
+                updateConfig({ alwaysOnTop: !config.alwaysOnTop });
+        },
+    });
     if (catalogError && !resolved) {
         return (_jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted", children: [_jsx(TriangleAlert, { className: "h-5 w-5 text-accent" }), _jsx("span", { children: catalogError })] }));
     }
+    if (!resolved && catalogLoading) {
+        return (_jsx("div", { className: "flex h-full min-h-0 w-full items-center justify-center text-sm text-muted", children: t("appdetails.loadingSlug", {
+                slug,
+                defaultValue: "Loading {{slug}}…",
+            }) }));
+    }
     if (!resolved) {
-        return (_jsxs("div", { className: "flex h-full min-h-0 w-full items-center justify-center text-sm text-muted", children: ["Loading ", slug, "\u2026"] }));
+        return (_jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted", children: [_jsx(TriangleAlert, { className: "h-5 w-5 text-accent" }), _jsx("span", { children: t("appdetails.appNotFound", {
+                        slug,
+                        defaultValue: "App not found: {{slug}}",
+                    }) })] }));
     }
     const isInternal = resolved.source === "internal-tool";
     const supportsInlineMode = isInternal || resolved.source === "overlay";
@@ -295,56 +441,62 @@ export function AppDetailsView({ slug, onLaunched, }) {
     const launchTarget = viewerUrl ?? resolved.windowPath;
     const sessionMode = resolved.info.session?.mode;
     const sessionFeatures = resolved.info.session?.features ?? [];
+    const provenanceBadges = appProvenanceBadges(resolved.info, t);
     const launchModeLabel = config.launchMode === "inline" && supportsInlineMode
-        ? "Main window"
-        : "Dedicated window";
-    return (_jsxs("div", { className: "device-layout mx-auto flex w-full max-w-4xl flex-col gap-6 px-4 py-6 lg:px-6", children: [_jsx("header", { className: "flex flex-col gap-3 border-b border-border/35 pb-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [resolved.info.heroImage ? (_jsx("img", { src: resolveRuntimeImageUrl(resolved.info.heroImage), alt: "", className: "h-14 w-14 rounded-lg border border-border/40 object-cover" })) : (_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-lg border border-border/40 bg-card/40 text-xs uppercase text-muted", children: (resolved.info.displayName ?? resolved.info.name)
+        ? t("appdetails.mainWindow", { defaultValue: "Main window" })
+        : t("appdetails.dedicatedWindow", { defaultValue: "Dedicated window" });
+    return (_jsxs("div", { className: "device-layout mx-auto flex w-full max-w-4xl flex-col gap-6 px-4 py-6 lg:px-6", children: [_jsx("header", { className: "flex flex-col gap-3 border-b border-border/35 pb-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [resolved.info.heroImage ? (_jsx("img", { src: resolveRuntimeImageUrl(resolved.info.heroImage), alt: "", className: "h-14 w-14 rounded-sm border border-border/40 object-cover" })) : (_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-sm border border-border/40 bg-card/40 text-xs uppercase text-muted", children: (resolved.info.displayName ?? resolved.info.name)
                                 .slice(0, 2)
-                                .toUpperCase() })), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-base font-semibold text-foreground", children: resolved.info.displayName ?? resolved.info.name }), _jsx("p", { className: "truncate text-xs text-muted", children: resolved.info.name }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-[0.16em] text-muted", children: [_jsx("span", { children: sourceLabel(resolved.source) }), recentRuns.length > 0 ? (_jsxs("span", { className: "rounded-full bg-accent/15 px-2 py-0.5 text-accent", children: [recentRuns.length, " running"] })) : null] })] })] }) }), _jsxs("section", { "data-testid": "app-launch-panel", className: "flex flex-col gap-4 rounded-lg border border-border/45 bg-card/30 p-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(SectionHeader, { children: "Launch" }), _jsx("p", { className: "text-xs text-muted", children: activeRun
-                                            ? `${activeRun.displayName} is ${activeRun.status}.`
-                                            : "Ready to launch." })] }), _jsxs("button", { type: "button", onClick: handleLaunch, disabled: launching, className: "inline-flex items-center justify-center gap-2 rounded-full bg-accent px-5 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-accent-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(Rocket, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), launching
-                                        ? "Launching..."
-                                        : `Launch ${resolved.info.displayName ?? "App"}`] })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: "Run" }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: activeRun?.status ?? "Ready" })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: "Window" }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: launchModeLabel })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: "Target" }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", title: launchTarget, children: viewerUrl ? "Viewer" : "App route" })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: "Session" }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: sessionMode ? formatLabel(sessionMode) : "Not declared" })] })] }), sessionFeatures.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: sessionFeatures.map((feature) => (_jsx("span", { className: "rounded-full border border-border/60 bg-card/50 px-2 py-0.5 text-xs text-muted", children: formatLabel(feature) }, feature))) })) : null, latestFailure ? (_jsxs("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-muted", children: [_jsx("span", { className: "font-medium text-destructive", children: "Last failure: " }), latestFailure.errorMessage ?? "Launch failed."] })) : null, _jsxs("fieldset", { className: "flex flex-col gap-2 rounded-md border border-border/40 bg-bg/20 p-3", children: [_jsxs("legend", { className: "px-1 text-xs uppercase tracking-[0.14em] text-muted", children: [_jsx(SettingsIcon, { className: "mr-1 inline h-3 w-3" }), " Launch Destination"] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", checked: config.launchMode === "window", onChange: () => updateConfig({ launchMode: "window" }), className: "h-3.5 w-3.5 accent-accent" }), _jsx("span", { children: "Dedicated window" })] }), _jsxs("label", { className: `flex items-center gap-2 text-sm ${supportsInlineMode
+                                .toUpperCase() })), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-base font-semibold text-foreground", children: resolved.info.displayName ?? resolved.info.name }), _jsx("p", { className: "truncate text-xs text-muted", children: resolved.info.name }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-[0.16em] text-muted", children: [_jsx("span", { children: sourceLabel(resolved.source, t) }), provenanceBadges.map((badge) => (_jsx("span", { title: badge.title, className: `rounded-full border px-2 py-0.5 ${badge.className}`, children: badge.label }, badge.key))), recentRuns.length > 0 ? (_jsx("span", { className: "rounded-full bg-accent/15 px-2 py-0.5 text-accent", children: t("appdetails.runningCount", {
+                                                count: recentRuns.length,
+                                                defaultValue: "{{count}} running",
+                                            }) })) : null] })] })] }) }), _jsxs("section", { "data-testid": "app-launch-panel", className: "flex flex-col gap-4 rounded-sm border border-border/45 bg-card/30 p-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(SectionHeader, { children: t("appdetails.launch", { defaultValue: "Launch" }) }), _jsx("p", { className: "text-xs text-muted", children: activeRun
+                                            ? t("appdetails.runStatus", {
+                                                name: activeRun.displayName,
+                                                status: activeRun.status,
+                                                defaultValue: "{{name}} is {{status}}.",
+                                            })
+                                            : t("appdetails.readyToLaunch", {
+                                                defaultValue: "Ready to launch.",
+                                            }) })] }), _jsxs("button", { ref: launchButton.ref, type: "button", onClick: handleLaunch, disabled: launching, title: t("appdetails.launchTitle", {
+                                    name: resolved.info.displayName ?? resolved.info.name,
+                                    defaultValue: "Launch {{name}}",
+                                }), className: "inline-flex max-w-full items-center justify-center gap-2 rounded-full bg-accent px-5 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-accent-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60", ...launchButton.agentProps, children: [_jsx(Rocket, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: launching
+                                            ? t("appdetails.launching", { defaultValue: "Launching..." })
+                                            : t("appdetails.launch", { defaultValue: "Launch" }) })] })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: t("appdetails.statRun", { defaultValue: "Run" }) }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: activeRun?.status ??
+                                            t("appdetails.statReady", { defaultValue: "Ready" }) })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: t("appdetails.statWindow", { defaultValue: "Window" }) }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: launchModeLabel })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: t("appdetails.statTarget", { defaultValue: "Target" }) }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", title: launchTarget, children: viewerUrl
+                                            ? t("appdetails.targetViewer", { defaultValue: "Viewer" })
+                                            : t("appdetails.targetAppRoute", { defaultValue: "App route" }) })] }), _jsxs("div", { className: "min-w-0 border-l border-border/35 pl-3", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.14em] text-muted", children: t("appdetails.statSession", { defaultValue: "Session" }) }), _jsx("div", { className: "truncate text-sm font-medium text-foreground", children: sessionMode
+                                            ? formatLabel(sessionMode)
+                                            : t("appdetails.sessionNotDeclared", {
+                                                defaultValue: "Not declared",
+                                            }) })] })] }), sessionFeatures.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: sessionFeatures.map((feature) => (_jsx("span", { className: "rounded-full border border-border/60 bg-card/50 px-2 py-0.5 text-xs text-muted", children: formatLabel(feature) }, feature))) })) : null, latestFailure ? (_jsxs("div", { className: "rounded-sm border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-muted", children: [_jsx("span", { className: "font-medium text-destructive", children: t("appdetails.lastFailure", { defaultValue: "Last failure: " }) }), latestFailure.errorMessage ??
+                                t("appdetails.launchFailedShort", {
+                                    defaultValue: "Launch failed.",
+                                })] })) : null, _jsxs("fieldset", { className: "flex flex-col gap-2 rounded-sm border border-border/40 bg-bg/20 p-3", children: [_jsxs("legend", { className: "px-1 text-xs uppercase tracking-[0.14em] text-muted", children: [_jsx(SettingsIcon, { className: "mr-1 inline h-3 w-3" }), " ", t("appdetails.launchDestination", {
+                                        defaultValue: "Launch Destination",
+                                    })] }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [_jsx("input", { ref: launchModeWindowRadio.ref, type: "radio", checked: config.launchMode === "window", onChange: () => updateConfig({ launchMode: "window" }), className: "h-3.5 w-3.5 accent-accent", ...launchModeWindowRadio.agentProps }), _jsx("span", { children: t("appdetails.dedicatedWindow", {
+                                            defaultValue: "Dedicated window",
+                                        }) })] }), _jsxs("label", { className: `flex items-center gap-2 text-sm ${supportsInlineMode
                                     ? "cursor-pointer"
-                                    : "cursor-not-allowed opacity-50"}`, children: [_jsx("input", { type: "radio", checked: config.launchMode === "inline", disabled: !supportsInlineMode, onChange: () => updateConfig({ launchMode: "inline" }), className: "h-3.5 w-3.5 accent-accent" }), _jsxs("span", { children: ["Main window", !supportsInlineMode ? " (not supported)" : ""] })] })] }), _jsxs("label", { className: `inline-flex items-center gap-2 self-start rounded-full border border-border/60 bg-bg/20 px-3 py-1.5 text-xs ${config.launchMode === "window"
+                                    : "cursor-not-allowed opacity-50"}`, children: [_jsx("input", { ref: launchModeInlineRadio.ref, type: "radio", checked: config.launchMode === "inline", disabled: !supportsInlineMode, onChange: () => updateConfig({ launchMode: "inline" }), className: "h-3.5 w-3.5 accent-accent", ...launchModeInlineRadio.agentProps }), _jsx("span", { children: !supportsInlineMode
+                                            ? t("appdetails.mainWindowNotSupported", {
+                                                defaultValue: "Main window (not supported)",
+                                            })
+                                            : t("appdetails.mainWindow", { defaultValue: "Main window" }) })] })] }), _jsxs("label", { className: `inline-flex items-center gap-2 self-start rounded-full border border-border/60 bg-bg/20 px-3 py-1.5 text-xs ${config.launchMode === "window"
                             ? "cursor-pointer"
-                            : "cursor-not-allowed opacity-50"}`, children: [_jsx("input", { type: "checkbox", checked: config.alwaysOnTop, disabled: config.launchMode !== "window", onChange: (event) => updateConfig({ alwaysOnTop: event.currentTarget.checked }), className: "h-3.5 w-3.5 accent-accent" }), config.alwaysOnTop ? (_jsx(Pin, { className: "h-3.5 w-3.5", "aria-hidden": "true" })) : (_jsx(PinOff, { className: "h-3.5 w-3.5", "aria-hidden": "true" })), _jsx("span", { children: "Keep this app's window on top" })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeader, { children: "About" }), resolved.info.description ? (_jsx("p", { className: "text-sm text-muted", children: resolved.info.description })) : null, _jsx(ChipList, { items: resolved.info.capabilities ?? [] })] }), DetailExtension ? (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeader, { children: "Details" }), _jsx(DetailExtension, { app: resolved.info })] })) : null, recentRuns.length > 0 ? (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: "Recent Runs" }), _jsx("ul", { className: "flex flex-col gap-1 text-xs text-muted", children: recentRuns.map((run) => (_jsxs("li", { className: "flex items-center justify-between rounded-md border border-border/40 bg-card/30 px-3 py-1.5", children: [_jsx("span", { className: "truncate", children: run.runId }), _jsx("span", { className: "ml-2 shrink-0 uppercase tracking-[0.14em]", children: run.status })] }, run.runId))) })] })) : null, _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: "Launch Diagnostics" }), history.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: "No launch history yet." })) : (_jsx("ul", { className: "flex flex-col gap-1 text-xs", children: history.slice(0, 5).map((entry) => (_jsxs("li", { className: "rounded-md border border-border/40 bg-card/30 px-3 py-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted", children: formatTimestamp(entry.timestamp) }), _jsx("span", { className: entry.succeeded ? "text-accent" : "text-destructive", children: entry.succeeded ? "OK" : "FAILED" })] }), entry.errorMessage ? (_jsx("p", { className: "mt-1 text-muted", children: entry.errorMessage })) : null] }, entry.timestamp))) }))] }), widgets.length > 0 ? (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: "Widgets" }), _jsx("ul", { className: "flex flex-col gap-2", children: widgets.map((decl) => {
+                            : "cursor-not-allowed opacity-50"}`, children: [_jsx("input", { ref: alwaysOnTopToggle.ref, type: "checkbox", checked: config.alwaysOnTop, disabled: config.launchMode !== "window", onChange: (event) => updateConfig({ alwaysOnTop: event.currentTarget.checked }), className: "h-3.5 w-3.5 accent-accent", ...alwaysOnTopToggle.agentProps }), config.alwaysOnTop ? (_jsx(Pin, { className: "h-3.5 w-3.5", "aria-hidden": "true" })) : (_jsx(PinOff, { className: "h-3.5 w-3.5", "aria-hidden": "true" })), _jsx("span", { children: t("appdetails.keepOnTop", {
+                                    defaultValue: "Keep this app's window on top",
+                                }) })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeader, { children: t("appdetails.about", { defaultValue: "About" }) }), resolved.info.description ? (_jsx("p", { className: "text-sm text-muted", children: resolved.info.description })) : null, _jsx(ChipList, { items: resolved.info.capabilities ?? [], t: t })] }), DetailExtension ? (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeader, { children: t("appdetails.details", { defaultValue: "Details" }) }), _jsx(DetailExtension, { app: resolved.info })] })) : null, recentRuns.length > 0 ? (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: t("appdetails.recentRuns", { defaultValue: "Recent Runs" }) }), _jsx("ul", { className: "flex flex-col gap-1 text-xs text-muted", children: recentRuns.map((run) => (_jsxs("li", { className: "flex items-center justify-between rounded-sm border border-border/40 bg-card/30 px-3 py-1.5", children: [_jsx("span", { className: "truncate", children: run.runId }), _jsx("span", { className: "ml-2 shrink-0 uppercase tracking-[0.14em]", children: run.status })] }, run.runId))) })] })) : null, _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: t("appdetails.launchDiagnostics", {
+                            defaultValue: "Launch Diagnostics",
+                        }) }), history.length === 0 ? (_jsx("p", { className: "text-xs text-muted", children: t("appdetails.noLaunchHistory", {
+                            defaultValue: "No launch history yet.",
+                        }) })) : (_jsx("ul", { className: "flex flex-col gap-1 text-xs", children: history.slice(0, 5).map((entry) => (_jsxs("li", { className: "rounded-sm border border-border/40 bg-card/30 px-3 py-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted", children: formatTimestamp(entry.timestamp) }), _jsx("span", { className: entry.succeeded ? "text-accent" : "text-destructive", children: entry.succeeded
+                                                ? t("appdetails.diagOk", { defaultValue: "OK" })
+                                                : t("appdetails.diagFailed", { defaultValue: "FAILED" }) })] }), entry.errorMessage ? (_jsx("p", { className: "mt-1 text-muted", children: entry.errorMessage })) : null] }, entry.timestamp))) }))] }), widgets.length > 0 ? (_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx(SectionHeader, { children: t("appdetails.widgets", { defaultValue: "Widgets" }) }), _jsx("ul", { className: "flex flex-col gap-2", children: widgets.map((decl) => {
                             const visible = isWidgetVisible(decl, visibility.overrides);
                             const widgetKey = widgetVisibilityKey(decl.pluginId, decl.id);
                             const expanded = expandedWidget === widgetKey;
-                            return (_jsxs("li", { className: "rounded-md border border-border/40 bg-card/30", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: decl.label }), _jsx("div", { className: "truncate text-[10px] uppercase tracking-[0.14em] text-muted", children: decl.slot })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => setExpandedWidget(expanded ? null : widgetKey), className: "rounded-full border border-border/60 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-muted transition-colors hover:text-foreground", children: expanded ? "Hide" : "Preview" }), _jsxs("label", { className: "inline-flex cursor-pointer items-center gap-1.5 text-xs", children: [_jsx("input", { type: "checkbox", checked: visible, onChange: (event) => toggleWidget(decl, event.currentTarget.checked), className: "h-3.5 w-3.5 accent-accent" }), _jsx("span", { className: "text-muted", children: "Show" })] })] })] }), expanded ? (_jsx("div", { className: "border-t border-border/40 p-3", children: _jsx(WidgetPreview, { declaration: decl, pluginId: resolved.pluginId }) })) : null] }, widgetKey));
+                            return (_jsx(WidgetRow, { declaration: decl, pluginId: resolved.pluginId, visible: visible, expanded: expanded, onTogglePreview: () => setExpandedWidget(expanded ? null : widgetKey), onToggleVisible: (enabled) => toggleWidget(decl, enabled), t: t }, widgetKey));
                         }) })] })) : null] }));
 }
-/**
- * Convenience: does this slug resolve to an app that wants the details
- * page? Used by AppsView.handleLaunch to decide whether to navigate to
- * /apps/<slug>/details or call openAppRouteWindow directly.
- *
- * Internal tools opt in with `hasDetailsPage`; catalog apps opt in through
- * launch metadata that implies setup, runtime control, or a heavier session.
- */
-export function appNeedsDetailsPage(app) {
-    const name = typeof app === "string" ? app : app.name;
-    if (isInternalToolApp(name)) {
-        return getInternalToolAppHasDetailsPage(name);
-    }
-    if (isOverlayApp(name)) {
-        return false;
-    }
-    if (typeof app !== "string" && app.launchType === "overlay") {
-        return false;
-    }
-    if (typeof app === "string") {
-        return false;
-    }
-    if (app.uiExtension?.detailPanelId) {
-        return true;
-    }
-    if (app.session) {
-        return true;
-    }
-    if (app.category.trim().toLowerCase() === "game") {
-        return true;
-    }
-    return false;
-}

package/components/pages/AppsPageView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppsPageView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,oBAAoB,GAAG,MAAM,KAAK,CAAC,YAAY,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EAAE,gBAAmD,EAC7D,QAAQ,EAAE,gBAAmD,GAC9D,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CAC5B,2CA+DL"}
+{"version":3,"file":"AppsPageView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,KAAK,oBAAoB,GAAG,MAAM,KAAK,CAAC,YAAY,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EAAE,gBAAmD,EAC7D,QAAQ,EAAE,gBAAmD,GAC9D,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CAC5B,2CA2EL"}

package/components/pages/AppsPageView.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { getWindowNavigationPath, shouldUseHashNavigation, } from "../../navigation/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { GameView } from "../apps/GameView.js";
 import { getAppSlug } from "../apps/helpers.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { AppsView } from "./AppsView.js";
 export function AppsPageView({ inModal, appsView: AppsViewRenderer = AppsView, gameView: GameViewRenderer = GameView, } = {}) {
-    const { appRuns, appsSubTab, activeGameRunId, setState } = useApp();
+    const { appRuns, appsSubTab, activeGameRunId, setState } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        appsSubTab: s.appsSubTab,
+        activeGameRunId: s.activeGameRunId,
+        setState: s.setState,
+    }));
     const hasActiveGame = activeGameRunId.trim().length > 0;
     const activeGameRun = hasActiveGame
         ? appRuns.find((run) => run.runId === activeGameRunId)
@@ -43,16 +49,16 @@ export function AppsPageView({ inModal, appsView: AppsViewRenderer = AppsView, g
         return _jsx(GameViewRenderer, {});
     }
     if (inModal) {
-        return (_jsx("div", { className: "settings-content-area", style: {
-                "--accent": "var(--section-accent-apps, #10b981)",
-                "--surface": "rgba(255, 255, 255, 0.06)",
-                "--s-accent": "#10b981",
-                "--s-text-txt": "#10b981",
-                "--s-accent-glow": "rgba(16, 185, 129, 0.35)",
-                "--s-accent-subtle": "rgba(16, 185, 129, 0.12)",
-                "--s-grid-line": "rgba(16, 185, 129, 0.02)",
-                "--s-glow-edge": "rgba(16, 185, 129, 0.08)",
-            }, children: _jsx("div", { className: "settings-section-pane pt-4", children: _jsx(AppsViewRenderer, {}) }) }));
+        return (_jsx(ShellViewAgentSurface, { viewId: "apps", children: _jsx("div", { className: "settings-content-area", style: {
+                    "--accent": "var(--section-accent-apps, #ff8a24)",
+                    "--surface": "rgba(255, 255, 255, 0.06)",
+                    "--s-accent": "#ff8a24",
+                    "--s-text-txt": "#ff8a24",
+                    "--s-accent-glow": "rgba(255, 138, 36, 0.35)",
+                    "--s-accent-subtle": "rgba(255, 138, 36, 0.12)",
+                    "--s-grid-line": "rgba(255, 138, 36, 0.02)",
+                    "--s-glow-edge": "rgba(255, 138, 36, 0.08)",
+                }, children: _jsx("div", { className: "settings-section-pane pt-4", children: _jsx(AppsViewRenderer, {}) }) }) }));
     }
-    return _jsx(AppsViewRenderer, {});
+    return (_jsx(ShellViewAgentSurface, { viewId: "apps", children: _jsx(AppsViewRenderer, {}) }));
 }

package/components/pages/AppsView.d.ts

@@ -1,3 +1,2 @@
-export { shouldShowAppInAppsView } from "../apps/helpers";
 export declare function AppsView(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppsView.d.ts.map

package/components/pages/AppsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsView.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AA4I1D,wBAAgB,QAAQ,4CAs/BvB"}
+{"version":3,"file":"AppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsView.tsx"],"names":[],"mappings":"AA6PA,wBAAgB,QAAQ,4CAg/BvB"}