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

package/components/apps/AppWindowRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppWindowRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppWindowRenderer.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;CACd;AA6BD,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,GACL,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAmE7C"}
+{"version":3,"file":"AppWindowRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppWindowRenderer.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;CACd;AA6BD,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,GACL,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAwF7C"}

package/components/apps/AppWindowRenderer.helpers.d.ts

@@ -1,4 +1,4 @@
 import { type ComponentType } from "react";
-import type { OverlayApp, OverlayAppContext } from "./overlay-app-api";
+import type { OverlayApp, OverlayAppContext } from "./overlay-app-api.js";
 export declare function getOverlayAppLazyComponent(app: OverlayApp): ComponentType<OverlayAppContext> | null;
 //# sourceMappingURL=AppWindowRenderer.helpers.d.ts.map

package/components/apps/AppWindowRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useMemo, useState, } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useState, } from "react";
 import { getOverlayAppLazyComponent } from "./AppWindowRenderer.helpers.js";
 import { getAppSlug } from "./helpers.js";
 import { getAvailableOverlayApps } from "./overlay-app-registry.js";
@@ -49,18 +49,31 @@ export function AppWindowRenderer({ slug, }) {
             void app?.onStop?.();
         };
     }, [app]);
+    // Read the theme from the DOM in an effect (not during render) and keep it in
+    // sync as the document class toggles, so the memoized context only changes when
+    // the theme actually changes.
+    const [uiTheme, setUiTheme] = useState(() => document.documentElement.classList.contains("dark") ? "dark" : "light");
+    useEffect(() => {
+        const root = document.documentElement;
+        const sync = () => setUiTheme(root.classList.contains("dark") ? "dark" : "light");
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+        return () => observer.disconnect();
+    }, []);
+    const exitToApps = useCallback(() => {
+        window.location.href = "/apps";
+    }, []);
+    // Stable identity so embedded apps can use React.memo: only changes when a
+    // render-affecting field (exitToApps / uiTheme) actually changes.
+    const context = useMemo(() => ({
+        exitToApps,
+        uiTheme,
+        t: (key) => key,
+    }), [exitToApps, uiTheme]);
     if (!app) {
         return (_jsxs("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: ["App not found: ", slug] }));
     }
-    const context = {
-        exitToApps: () => {
-            window.location.href = "/apps";
-        },
-        uiTheme: document.documentElement.classList.contains("dark")
-            ? "dark"
-            : "light",
-        t: (key) => key,
-    };
     const LazyComponent = getLazyComponentForApp(app);
     if (LazyComponent) {
         return (_jsx(Suspense, { fallback: _jsx(AppFallback, {}), children: _jsx(LazyComponent, { ...context }) }));

package/components/apps/AppsCatalogGrid.d.ts

@@ -1,4 +1,4 @@
-import type { RegistryAppInfo } from "../../api";
+import type { RegistryAppInfo } from "../../api/index.js";
 interface AppsCatalogGridProps {
     activeAppNames: Set<string>;
     error: string | null;

package/components/apps/AppsCatalogGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppsCatalogGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsCatalogGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAOjD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwQD,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EACP,gBAAgB,GACjB,EAAE,oBAAoB,2CAkQtB"}
+{"version":3,"file":"AppsCatalogGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsCatalogGrid.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAOjD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AA+WD,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EACP,gBAAgB,GACjB,EAAE,oBAAoB,2CA+JtB"}

package/components/apps/AppsCatalogGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { memo, useEffect, useMemo, useRef, useState, } from "react";
+import { useAppSelector } from "../../state/index.js";
 import { Skeleton } from "../ui/skeleton.js";
 import { AppHero } from "./app-identity.js";
 import { getAppShortName, groupAppsForCatalog } from "./helpers.js";
@@ -158,8 +158,20 @@ function CatalogSkeletonSection({ label, rowSizes, }) {
                         gridTemplateColumns: `repeat(${rowDescriptor.rowSize}, minmax(0, 1fr))`,
                     }, children: rowDescriptor.cardKeys.map((cardKey) => (_jsxs("div", { className: "overflow-hidden rounded-sm border border-border/35 bg-card/72", children: [_jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-none bg-bg-accent/70" }), _jsx("div", { className: "space-y-2 px-3 py-3", children: _jsx(Skeleton, { className: "h-3 w-2/3 rounded-full bg-bg-accent/80" }) })] }, cardKey))) }, rowDescriptor.key))) })] }));
 }
+const AppCard = memo(function AppCard({ app, isActive, isFavorite, onLaunch, onToggleFavorite, }) {
+    const displayName = app.displayName ?? getAppShortName(app);
+    const provenanceLabels = useMemo(() => appProvenanceLabels(app), [app]);
+    return (_jsxs("div", { className: `group relative overflow-hidden rounded-sm border bg-card/72 transition-all hover:border-accent/45   ${isActive ? "border-ok/45 " : "border-border/35 "}`, children: [_jsxs("button", { type: "button", "data-testid": `app-card-${app.name.replace(/[^a-z0-9]+/gi, "-")}`, title: displayName, "aria-label": displayName, className: "block w-full text-left ", onClick: () => onLaunch(app), children: [_jsx(AppHero, { app: app, className: "aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.02]" }), provenanceLabels.originLabel || provenanceLabels.supportLabel ? (_jsxs("div", { className: "pointer-events-none absolute left-3 top-3 flex max-w-[calc(100%-4rem)] flex-wrap gap-1.5", title: provenanceLabels.title, children: [provenanceLabels.originLabel ? (_jsx("span", { className: "rounded-sm border border-white/20 bg-black/40 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white", children: provenanceLabels.originLabel })) : null, provenanceLabels.supportLabel ? (_jsx("span", { className: `rounded-sm border px-1.5 py-0.5 text-[10px] font-semibold uppercase ${provenanceLabels.supportLabel === "Community"
+                                    ? "border-warn/45 bg-black/40 text-warn"
+                                    : "border-accent/45 bg-black/40 text-white"}`, children: provenanceLabels.supportLabel })) : null] })) : null, _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2 pe-10", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-semibold text-white", children: displayName }) }) })] }), isActive ? (_jsx("span", { title: "Running", className: "pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full bg-ok " })) : null, _jsx("button", { type: "button", "aria-label": isFavorite ? "Remove from favorites" : "Add to favorites", className: `absolute bottom-3 right-3 rounded-full p-1.5 text-white transition-all ${isFavorite
+                    ? "bg-black/70 text-warn"
+                    : "bg-black/70 text-white/70 hover:text-warn "}`, onClick: (event) => {
+                    event.stopPropagation();
+                    onToggleFavorite(app.name);
+                }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: isFavorite ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("title", { children: "Favorite" }), _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })] }) })] }));
+});
 export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onRetry, onToggleFavorite, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const catalogRef = useRef(null);
     const [catalogWidth, setCatalogWidth] = useState(0);
     const cardsPerRow = useMemo(() => resolveCardsPerRow(catalogWidth), [catalogWidth]);
@@ -205,26 +217,7 @@ export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loadi
                                             .join("-");
                                         return (_jsx("div", { className: "grid gap-2", style: {
                                                 gridTemplateColumns: `repeat(${row.length}, minmax(0, 1fr))`,
-                                            }, children: row.map((app) => {
-                                                const isActive = activeAppNames.has(app.name);
-                                                const isFavorite = favoriteAppNames.has(app.name);
-                                                const displayName = app.displayName ?? getAppShortName(app);
-                                                const provenanceLabels = appProvenanceLabels(app);
-                                                return (_jsxs("div", { className: `group relative overflow-hidden rounded-sm border bg-card/72 transition-all hover:border-accent/45 focus-within:ring-2 focus-within:ring-accent/35 ${isActive
-                                                        ? "border-ok/45 "
-                                                        : "border-border/35 "}`, children: [_jsxs("button", { type: "button", "data-testid": `app-card-${app.name.replace(/[^a-z0-9]+/gi, "-")}`, title: displayName, "aria-label": displayName, className: "block w-full text-left focus-visible:outline-none", onClick: () => onLaunch(app), children: [_jsx(AppHero, { app: app, className: "aspect-[4/3] transition-transform duration-300 group-hover:scale-[1.02]" }), provenanceLabels.originLabel ||
-                                                                    provenanceLabels.supportLabel ? (_jsxs("div", { className: "pointer-events-none absolute left-3 top-3 flex max-w-[calc(100%-4rem)] flex-wrap gap-1.5", title: provenanceLabels.title, children: [provenanceLabels.originLabel ? (_jsx("span", { className: "rounded-sm border border-white/20 bg-black/40 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white backdrop-blur-sm", children: provenanceLabels.originLabel })) : null, provenanceLabels.supportLabel ? (_jsx("span", { className: `rounded-sm border px-1.5 py-0.5 text-[10px] font-semibold uppercase backdrop-blur-sm ${provenanceLabels.supportLabel ===
-                                                                                "Community"
-                                                                                ? "border-warn/45 bg-black/40 text-warn"
-                                                                                : "border-accent/45 bg-black/40 text-white"}`, children: provenanceLabels.supportLabel })) : null] })) : null, _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-2 pe-10", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-xs font-semibold text-white", children: displayName }) }) })] }), isActive ? (_jsx("span", { title: "Running", className: "pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full bg-ok " })) : null, _jsx("button", { type: "button", "aria-label": isFavorite
-                                                                ? "Remove from favorites"
-                                                                : "Add to favorites", className: `absolute bottom-3 right-3 rounded-full p-1.5 text-white transition-all ${isFavorite
-                                                                ? "bg-black/30 text-warn backdrop-blur-sm"
-                                                                : "bg-black/30 text-white/70 backdrop-blur-sm hover:text-warn focus-visible:text-warn"}`, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onToggleFavorite(app.name);
-                                                            }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: isFavorite ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("title", { children: "Favorite" }), _jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })] }) })] }, app.name));
-                                            }) }, `${section.key}-${sectionRowKey}`));
+                                            }, children: row.map((app) => (_jsx(AppCard, { app: app, isActive: activeAppNames.has(app.name), isFavorite: favoriteAppNames.has(app.name), onLaunch: onLaunch, onToggleFavorite: onToggleFavorite }, app.name))) }, `${section.key}-${sectionRowKey}`));
                                     }) })] }, section.key))) }, rowKey));
                 }) }))] }));
 }

package/components/apps/AppsSidebar.d.ts

@@ -1,4 +1,4 @@
-import type { AppRunSummary, RegistryAppInfo } from "../../api";
+import type { AppRunSummary, RegistryAppInfo } from "../../api/index.js";
 interface AppsSidebarProps {
     apps: RegistryAppInfo[];
     browseApps: RegistryAppInfo[];

package/components/apps/AppsSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppsSidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAehE,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AASD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,aAAa,EACb,QAAc,EACd,QAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CA6LlB"}
+{"version":3,"file":"AppsSidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAehE,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AASD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,aAAa,EACb,QAAc,EACd,QAAc,EACd,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CAuMlB"}

package/components/apps/AppsSidebar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Play, Star } from "lucide-react";
-import { useMemo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
 import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
@@ -15,6 +15,10 @@ const GENRE_ORDER = [
     "other",
 ];
 export function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAppNames, selectedAppName, collapsed, onCollapsedChange, width, onWidthChange, minWidth = 220, maxWidth = 420, onLaunchApp, onOpenRun, }) {
+    // Stable per-row handlers so the memoized AppsSidebarAppButton holds: each row
+    // receives the parent callback unchanged and passes its own payload back.
+    const handleLaunchApp = useCallback((app) => onLaunchApp(app), [onLaunchApp]);
+    const handleOpenRun = useCallback((run) => onOpenRun(run), [onOpenRun]);
     const appsByName = useMemo(() => {
         const map = new Map();
         for (const app of apps)
@@ -35,7 +39,14 @@ export function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAp
             .map((run) => {
             const app = appsByName.get(run.appName);
             const displayName = app?.displayName ?? run.displayName ?? run.appName;
-            return { run, app, displayName };
+            const identitySource = app ?? {
+                name: run.appName,
+                displayName,
+                icon: null,
+                category: "",
+                description: "",
+            };
+            return { run, displayName, identitySource };
         })
             .sort((a, b) => b.run.updatedAt.localeCompare(a.run.updatedAt));
     }, [appsByName, runs]);
@@ -82,19 +93,19 @@ export function AppsSidebar({ apps, browseApps, runs, activeAppNames, favoriteAp
         starredEntries.length > 0 ||
         activeEntries.length > 0 ||
         genreEntries.length > 0;
-    return (_jsx(AppPageSidebar, { testId: "apps-sidebar", collapsible: true, contentIdentity: "apps", collapseButtonAriaLabel: "Collapse apps sidebar", expandButtonAriaLabel: "Expand apps sidebar", expandButtonTestId: "apps-sidebar-expand-toggle", collapsed: collapsed, onCollapsedChange: onCollapsedChange, resizable: true, width: width, onWidthChange: onWidthChange, minWidth: minWidth, maxWidth: maxWidth, onCollapseRequest: () => onCollapsedChange(true), children: _jsx(SidebarScrollRegion, { className: "scrollbar-hide px-1 pb-3 pt-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx(SidebarPanel, { className: "bg-transparent gap-0 p-0 shadow-none", children: !hasAnyResults ? (_jsx("div", { className: "px-3 py-4 text-2xs text-muted/70", children: "No apps available" })) : (_jsxs("div", { className: "space-y-3", children: [starredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Starred", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: starredEntries.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) })), featuredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Featured", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: featuredEntries.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) })), activeEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Active", icon: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }), children: activeEntries.map(({ run, app, displayName }) => (_jsx(AppsSidebarAppButton, { name: run.appName, displayName: displayName, active: true, selected: selectedAppName === run.appName, identitySource: app ?? {
-                                    name: run.appName,
-                                    displayName,
-                                    icon: null,
-                                    category: "",
-                                    description: "",
-                                }, onClick: () => onOpenRun(run) }, run.runId))) })), genreEntries.map((section) => (_jsx(AppsSidebarSection, { label: section.label, children: section.apps.map((app) => (_jsx(AppsSidebarAppButton, { name: app.name, displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, onClick: () => onLaunchApp(app) }, app.name))) }, section.key)))] })) }) }) }));
+    return (_jsx(AppPageSidebar, { testId: "apps-sidebar", collapsible: true, contentIdentity: "apps", collapseButtonAriaLabel: "Collapse apps sidebar", expandButtonAriaLabel: "Expand apps sidebar", expandButtonTestId: "apps-sidebar-expand-toggle", collapsed: collapsed, onCollapsedChange: onCollapsedChange, resizable: true, width: width, onWidthChange: onWidthChange, minWidth: minWidth, maxWidth: maxWidth, onCollapseRequest: () => onCollapsedChange(true), children: _jsx(SidebarScrollRegion, { className: "scrollbar-hide px-1 pb-3 pt-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx(SidebarPanel, { className: "bg-transparent gap-0 p-0 shadow-none", children: !hasAnyResults ? (_jsx("div", { className: "px-3 py-4 text-2xs text-muted/70", children: "No apps available" })) : (_jsxs("div", { className: "space-y-3", children: [starredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Starred", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: starredEntries.map((app) => (_jsx(AppsSidebarAppButton, { displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, payload: app, onSelect: handleLaunchApp }, app.name))) })), featuredEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Featured", icon: _jsx(Star, { className: "h-3 w-3", "aria-hidden": true }), children: featuredEntries.map((app) => (_jsx(AppsSidebarAppButton, { displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, payload: app, onSelect: handleLaunchApp }, app.name))) })), activeEntries.length > 0 && (_jsx(AppsSidebarSection, { label: "Active", icon: _jsx(Play, { className: "h-3 w-3", "aria-hidden": true }), children: activeEntries.map(({ run, displayName, identitySource }) => (_jsx(AppsSidebarAppButton, { displayName: displayName, active: true, selected: selectedAppName === run.appName, identitySource: identitySource, payload: run, onSelect: handleOpenRun }, run.runId))) })), genreEntries.map((section) => (_jsx(AppsSidebarSection, { label: section.label, children: section.apps.map((app) => (_jsx(AppsSidebarAppButton, { displayName: app.displayName ?? getAppShortName(app), active: activeAppNames.has(app.name), selected: selectedAppName === app.name, identitySource: app, payload: app, onSelect: handleLaunchApp }, app.name))) }, section.key)))] })) }) }) }));
 }
 function AppsSidebarSection({ label, icon, children, }) {
     return (_jsxs("div", { children: [_jsxs(SidebarContent.SectionLabel, { className: "mb-1 inline-flex items-center gap-1.5 px-2 text-[0.625rem]", children: [icon, label] }), _jsx("div", { className: "space-y-0.5 pl-3", children: children })] }));
 }
-function AppsSidebarAppButton({ displayName, active, selected, identitySource, onClick, }) {
+function AppsSidebarAppButtonInner({ displayName, active, selected, identitySource, payload, onSelect, }) {
     const { t } = useTranslation();
     const Icon = getAppCategoryIcon(identitySource);
-    return (_jsxs("button", { type: "button", onClick: onClick, "aria-current": selected ? "page" : undefined, className: `group flex w-full min-w-0 items-center gap-2 rounded-sm px-2 py-1 text-left transition-colors ${selected ? "bg-accent/15 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted/70", "aria-hidden": true, strokeWidth: 2 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs-tight", children: displayName }), active ? (_jsx("span", { role: "img", "aria-label": t("appsview.Running"), className: "h-1.5 w-1.5 shrink-0 rounded-full bg-ok " })) : null] }));
+    const handleClick = useCallback(() => {
+        onSelect(payload);
+    }, [onSelect, payload]);
+    return (_jsxs("button", { type: "button", onClick: handleClick, "aria-current": selected ? "page" : undefined, className: `group flex w-full min-w-0 items-center gap-2 rounded-sm px-2 py-1 text-left transition-colors ${selected ? "bg-accent/15 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted/70", "aria-hidden": true, strokeWidth: 2 }), _jsx("span", { className: "min-w-0 flex-1 truncate text-xs-tight", children: displayName }), active ? (_jsx("span", { role: "img", "aria-label": t("appsview.Running"), className: "h-1.5 w-1.5 shrink-0 rounded-full bg-ok " })) : null] }));
 }
+// React.memo erases the generic call signature; cast back so each call site
+// keeps payload type inference per row.
+const AppsSidebarAppButton = memo(AppsSidebarAppButtonInner);

package/components/apps/GameView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAiLH,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,GACb,EAAE;IACD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,2CA8ZA;AAED,wBAAgB,QAAQ,4CAojDvB"}
+{"version":3,"file":"GameView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAkLH,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,GACb,EAAE;IACD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,2CA8ZA;AAED,wBAAgB,QAAQ,4CA4kDvB"}

package/components/apps/GameView.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { DesktopClickAuditItem } from "../../utils/desktop-workspace";
+import type { DesktopClickAuditItem } from "../../utils/desktop-workspace.js";
 export declare const DESKTOP_GAME_CLICK_AUDIT: readonly DesktopClickAuditItem[];
 //# sourceMappingURL=GameView.helpers.d.ts.map

package/components/apps/GameView.js

@@ -18,8 +18,9 @@ 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 { useAppSelector, useAppSelectorShallow } from "../../state/index.js";
 import { navigatePreOpenedWindow, openExternalUrl, preOpenWindow, } from "../../utils/index.js";
+import { safeAttachmentUrl } from "../../utils/attachment-url.js";
 import { formatTime } from "../../utils/format.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
@@ -111,7 +112,7 @@ const TAG_COLORS = {
     websocket: { bg: "rgba(20, 184, 166, 0.15)", fg: "rgb(20, 184, 166)" },
 };
 export function DesktopGameWindowControls({ gameWindowId, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [busyAction, setBusyAction] = useState(null);
     const [message, setMessage] = useState(null);
     const [error, setError] = useState(null);
@@ -321,7 +322,24 @@ export function DesktopGameWindowControls({ gameWindowId, }) {
 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 { appRuns, activeGameRunId, activeGameApp, activeGameDisplayName, activeGameViewerUrl, activeGameSandbox, activeGamePostMessageAuth, activeGamePostMessagePayload, activeGameSession, gameOverlayEnabled, logs, logLoadError, loadLogs, setState, setActionNotice, t, } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        activeGameRunId: s.activeGameRunId,
+        activeGameApp: s.activeGameApp,
+        activeGameDisplayName: s.activeGameDisplayName,
+        activeGameViewerUrl: s.activeGameViewerUrl,
+        activeGameSandbox: s.activeGameSandbox,
+        activeGamePostMessageAuth: s.activeGamePostMessageAuth,
+        activeGamePostMessagePayload: s.activeGamePostMessagePayload,
+        activeGameSession: s.activeGameSession,
+        gameOverlayEnabled: s.gameOverlayEnabled,
+        logs: s.logs,
+        logLoadError: s.logLoadError,
+        loadLogs: s.loadLogs,
+        setState: s.setState,
+        setActionNotice: s.setActionNotice,
+        t: s.t,
+    }));
     const isElectrobun = isElectrobunRuntime();
     const isCompactLayout = useMediaQuery("(max-width: 1023px)");
     const [stopping, setStopping] = useState(false);
@@ -361,7 +379,13 @@ export function GameView() {
     const hasActiveRun = Boolean(activeGameRun);
     const hasViewer = Boolean(activeGameRun?.viewer?.url);
     const viewerAttached = activeGameRun?.viewerAttachment === "attached";
-    const openableUrl = resolvedActiveGameViewerUrl || resolvedActiveGameLaunchUrl || "";
+    // Scheme-guard the viewer/launch URL before it reaches a navigation sink
+    // (<a href>, popup.location.href via navigatePreOpenedWindow). viewer.url /
+    // launchUrl come from a plugin/cloud-app run record (attacker-influenceable),
+    // and a javascript:/data: value would otherwise execute in the app origin or
+    // open-redirect the tab. safeAttachmentUrl returns "" for a disallowed scheme,
+    // which disables the open affordance / omits the href.
+    const openableUrl = safeAttachmentUrl(resolvedActiveGameViewerUrl || resolvedActiveGameLaunchUrl || "");
     const canAttachViewer = Boolean(activeGameRun?.viewer?.url) &&
         activeGameRun?.viewerAttachment === "detached";
     const canDetachViewer = activeGameRun?.viewerAttachment === "attached" &&
@@ -752,6 +776,30 @@ export function GameView() {
                 source.includes("agent"));
         });
     }, [activeGameApp, logs]);
+    // Memoized activity-feed derivations for the logs panel. GameView re-renders on
+    // every context change (3s polls, keystrokes, toasts); deriving these inline in
+    // renderLogsPanel re-sorted/re-sliced the feeds on each render.
+    const telemetryActivityFeed = useMemo(() => {
+        const recentActivity = activeSessionState?.telemetry?.recentActivity;
+        if (!Array.isArray(recentActivity) || recentActivity.length === 0) {
+            return null;
+        }
+        return recentActivity
+            .slice()
+            .reverse()
+            .slice(0, 30);
+    }, [activeSessionState?.telemetry]);
+    const sessionActivityFeed = useMemo(() => {
+        const activity = activeSessionState?.activity;
+        if (!Array.isArray(activity) || activity.length === 0) {
+            return null;
+        }
+        return activity
+            .slice()
+            .sort((a, b) => Number(b.timestamp ?? 0) - Number(a.timestamp ?? 0))
+            .slice(0, 30);
+    }, [activeSessionState?.activity]);
+    const gameLogsFeed = useMemo(() => gameLogs.slice(0, 50), [gameLogs]);
     // Auto-refresh logs when panel is open and tab is visible (catch-up on focus).
     useEffect(() => {
         if (!showLogsPanel || !docVisible)
@@ -1022,30 +1070,17 @@ export function GameView() {
                                     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"
+                            }, placeholder: t("game.chatPlaceholder"), className: "flex-1 h-8 text-xs bg-bg ", 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: telemetryActivityFeed ? (telemetryActivityFeed.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-muted"}`, children: entry.action.split(":")[0] })] }), _jsx("div", { className: "text-txt break-all", children: entry.detail })] }, `${entry.ts}-${idx}`)))) : sessionActivityFeed ? (sessionActivityFeed.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-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") })) : (gameLogsFeed.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"

package/components/apps/GameViewOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameViewOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameViewOverlay.tsx"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,mDA2O9B"}
+{"version":3,"file":"GameViewOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameViewOverlay.tsx"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,mDA2Q9B"}

package/components/apps/GameViewOverlay.js

@@ -1,15 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDocumentVisibility } from "../../hooks/useDocumentVisibility.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { buildViewerSessionKey, resolveEmbeddedViewerUrl, resolvePostMessageTargetOrigin, resolveViewerReadyEventType, shouldUseEmbeddedAppViewer, } from "./viewer-auth.js";
 export function GameViewOverlay() {
-    const { appRuns, activeGameRunId, activeGameDisplayName, activeGamePostMessageAuth, activeGamePostMessagePayload, activeGameViewerUrl, activeGameSandbox, setState, t, } = useApp();
+    const { appRuns, activeGameRunId, activeGameDisplayName, activeGamePostMessageAuth, activeGamePostMessagePayload, activeGameViewerUrl, activeGameSandbox, setState, t, } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        activeGameRunId: s.activeGameRunId,
+        activeGameDisplayName: s.activeGameDisplayName,
+        activeGamePostMessageAuth: s.activeGamePostMessageAuth,
+        activeGamePostMessagePayload: s.activeGamePostMessagePayload,
+        activeGameViewerUrl: s.activeGameViewerUrl,
+        activeGameSandbox: s.activeGameSandbox,
+        setState: s.setState,
+        t: s.t,
+    }));
     // --- Drag state ---
     const containerRef = useRef(null);
     const [pos, setPos] = useState(null);
     const dragOffset = useRef({ x: 0, y: 0 });
+    const dragFrameRef = useRef(0);
+    const dragPendingPosRef = useRef(null);
     const [dragging, setDragging] = useState(false);
     const iframeRef = useRef(null);
     const authSentRef = useRef(false);
@@ -32,19 +44,42 @@ export function GameViewOverlay() {
         dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
         setDragging(true);
         const onMove = (ev) => {
-            setPos({
+            dragPendingPosRef.current = {
                 x: ev.clientX - dragOffset.current.x,
                 y: ev.clientY - dragOffset.current.y,
+            };
+            if (dragFrameRef.current)
+                return;
+            dragFrameRef.current = requestAnimationFrame(() => {
+                dragFrameRef.current = 0;
+                if (dragPendingPosRef.current)
+                    setPos(dragPendingPosRef.current);
             });
         };
         const onUp = () => {
             setDragging(false);
+            if (dragFrameRef.current) {
+                cancelAnimationFrame(dragFrameRef.current);
+                dragFrameRef.current = 0;
+            }
+            if (dragPendingPosRef.current) {
+                setPos(dragPendingPosRef.current);
+                dragPendingPosRef.current = null;
+            }
             window.removeEventListener("mousemove", onMove);
             window.removeEventListener("mouseup", onUp);
         };
         window.addEventListener("mousemove", onMove);
         window.addEventListener("mouseup", onUp);
     }, []);
+    useEffect(() => {
+        return () => {
+            if (dragFrameRef.current) {
+                cancelAnimationFrame(dragFrameRef.current);
+                dragFrameRef.current = 0;
+            }
+        };
+    }, []);
     const handleClose = useCallback(() => {
         setState("gameOverlayEnabled", false);
     }, [setState]);
@@ -123,7 +158,6 @@ export function GameViewOverlay() {
                 resize: "both",
                 background: "rgba(18, 22, 32, 0.96)",
                 border: "1px solid rgba(240, 178, 50, 0.18)",
-                boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
                 ...style,
             }, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 select-none", style: {
                         cursor: dragging ? "grabbing" : "grab",

package/components/apps/RunningAppsRow.d.ts

@@ -1,4 +1,4 @@
-import type { AppRunSummary, RegistryAppInfo } from "../../api";
+import type { AppRunSummary, RegistryAppInfo } from "../../api/index.js";
 interface RunningAppsRowProps {
     runs: AppRunSummary[];
     catalogApps: RegistryAppInfo[];

package/components/apps/RunningAppsRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RunningAppsRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/RunningAppsRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIhE,UAAU,mBAAmB;IAC3B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAeD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,mBAAmB,kDA+FrB"}
+{"version":3,"file":"RunningAppsRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/RunningAppsRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIhE,UAAU,mBAAmB;IAC3B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAkGD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,mBAAmB,kDAwCrB"}

package/components/apps/RunningAppsRow.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Square } from "lucide-react";
+import { memo, useMemo } from "react";
 import { AppHero } from "./app-identity.js";
 import { getRunAttentionReasons } from "./run-attention.js";
 function getHealthTone(state) {
@@ -11,10 +12,19 @@ function getHealthTone(state) {
     }
     return { dot: "bg-danger", ring: "" };
 }
+const RunningAppCard = memo(function RunningAppCard({ run, app, isBusy, isStopping, onOpenRun, onStopRun, }) {
+    const attentionReasons = getRunAttentionReasons(run);
+    const needsAttention = attentionReasons.length > 0;
+    const tone = getHealthTone(run.health.state);
+    return (_jsxs("div", { "data-testid": `running-app-card-${run.runId}`, className: "group relative overflow-hidden rounded-sm border border-accent/35 bg-card/72 transition-all hover:border-accent/55  ", children: [_jsxs("button", { type: "button", "aria-label": `Open ${run.displayName}`, "aria-busy": isBusy || undefined, className: "block w-full text-left ", onClick: () => onOpenRun(run), children: [_jsx(AppHero, { app: app, className: "aspect-[5/4] transition-transform duration-300 group-hover:scale-[1.02]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-4 pe-12", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-sm font-semibold text-white", children: run.displayName }) }) })] }), _jsx("span", { title: needsAttention ? attentionReasons[0] : run.health.state, className: `pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full ${tone.dot} ${tone.ring}` }), needsAttention ? (_jsx("span", { title: attentionReasons[0], className: "pointer-events-none absolute right-10 top-3.5 inline-flex items-center rounded-full border border-warn/40 bg-black/40 px-2 py-0.5 text-[0.56rem] font-semibold uppercase tracking-[0.2em] text-warn", children: "!" })) : null, onStopRun ? (_jsx("button", { type: "button", "data-testid": `running-app-stop-${run.runId}`, "aria-label": `Stop ${run.displayName}`, disabled: isStopping, className: "absolute bottom-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/70 text-white/90 transition-all hover:bg-danger/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50", onClick: (event) => {
+                    event.stopPropagation();
+                    onStopRun(run);
+                }, children: isStopping ? (_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-white" })) : (_jsx(Square, { className: "h-3.5 w-3.5", "aria-hidden": true })) })) : null] }));
+});
 export function RunningAppsRow({ runs, catalogApps, busyRunId, onOpenRun, onStopRun, stoppingRunId, }) {
+    const catalogAppByName = useMemo(() => new Map(catalogApps.map((app) => [app.name, app])), [catalogApps]);
     if (runs.length === 0)
         return null;
-    const catalogAppByName = new Map(catalogApps.map((app) => [app.name, app]));
     return (_jsxs("section", { "data-testid": "running-apps-row", className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-xs-tight font-semibold uppercase tracking-[0.18em] text-accent", children: "Running" }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: runs.map((run) => {
                     const app = catalogAppByName.get(run.appName) ?? {
                         name: run.appName,
@@ -22,14 +32,6 @@ export function RunningAppsRow({ runs, catalogApps, busyRunId, onOpenRun, onStop
                         category: "utility",
                         icon: null,
                     };
-                    const attentionReasons = getRunAttentionReasons(run);
-                    const needsAttention = attentionReasons.length > 0;
-                    const isBusy = busyRunId === run.runId;
-                    const isStopping = stoppingRunId === run.runId;
-                    const tone = getHealthTone(run.health.state);
-                    return (_jsxs("div", { "data-testid": `running-app-card-${run.runId}`, className: "group relative overflow-hidden rounded-sm border border-accent/35 bg-card/72 transition-all hover:border-accent/55 focus-within:ring-2 focus-within:ring-accent/35", children: [_jsxs("button", { type: "button", "aria-label": `Open ${run.displayName}`, "aria-busy": isBusy || undefined, className: "block w-full text-left focus-visible:outline-none", onClick: () => onOpenRun(run), children: [_jsx(AppHero, { app: app, className: "aspect-[5/4] transition-transform duration-300 group-hover:scale-[1.02]" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-end p-4 pe-12", children: _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate text-sm font-semibold text-white", children: run.displayName }) }) })] }), _jsx("span", { title: needsAttention ? attentionReasons[0] : run.health.state, className: `pointer-events-none absolute right-4 top-4 h-2.5 w-2.5 rounded-full ${tone.dot} ${tone.ring}` }), needsAttention ? (_jsx("span", { title: attentionReasons[0], className: "pointer-events-none absolute right-10 top-3.5 inline-flex items-center rounded-full border border-warn/40 bg-black/40 px-2 py-0.5 text-[0.56rem] font-semibold uppercase tracking-[0.2em] text-warn backdrop-blur-sm", children: "!" })) : null, onStopRun ? (_jsx("button", { type: "button", "data-testid": `running-app-stop-${run.runId}`, "aria-label": `Stop ${run.displayName}`, disabled: isStopping, className: "absolute bottom-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/90 backdrop-blur-sm transition-all hover:bg-danger/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50", onClick: (event) => {
-                                    event.stopPropagation();
-                                    onStopRun(run);
-                                }, children: isStopping ? (_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-white" })) : (_jsx(Square, { className: "h-3.5 w-3.5", "aria-hidden": true })) })) : null] }, run.runId));
+                    return (_jsx(RunningAppCard, { run: run, app: app, isBusy: busyRunId === run.runId, isStopping: stoppingRunId === run.runId, onOpenRun: onOpenRun, onStopRun: onStopRun }, run.runId));
                 }) })] }));
 }

package/components/apps/app-identity.helpers.d.ts

@@ -1,5 +1,5 @@
 import { type LucideIcon } from "lucide-react";
-import type { AppIdentitySource } from "./app-identity";
+import type { AppIdentitySource } from "./app-identity.js";
 export declare function iconImageSource(icon: string | null | undefined): string | null;
 /**
  * Convert a heroImage/icon src into a runtime-safe URL.

package/components/apps/app-identity.js

@@ -93,7 +93,7 @@ export function AppIdentityTile({ app, active = false, className = "", size = "m
     const iconSize = size === "sm" ? "h-5 w-5" : "h-6 w-6";
     const monoSize = size === "sm" ? "text-[0.64rem]" : "text-[0.68rem]";
     const badgeSize = size === "sm" ? "text-[0.56rem]" : "text-[0.58rem]";
-    return (_jsxs("div", { className: `relative shrink-0 overflow-hidden border border-white/10 ring-1 ring-black/5 ${outerSize} ${className}`, style: {
+    return (_jsxs("div", { className: `relative shrink-0 overflow-hidden border border-white/10   ${outerSize} ${className}`, style: {
             backgroundImage: `linear-gradient(135deg, ${palette[0]} 0%, ${palette[1]} 100%)`,
         }, "aria-hidden": true, children: [!imageOnly ? (_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_20%_18%,rgba(255,255,255,0.32),transparent_30%),radial-gradient(circle_at_82%_20%,rgba(255,255,255,0.18),transparent_26%),radial-gradient(circle_at_50%_100%,rgba(0,0,0,0.16),transparent_35%)]" })) : null, imageSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 h-full w-full object-cover", loading: "lazy", decoding: "async", onError: handleImageError }), !imageOnly ? _jsx("div", { className: "absolute inset-0 bg-black/10" }) : null] })) : (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white", children: [_jsx(Icon, { className: iconSize, strokeWidth: 2.15 }), _jsx("span", { className: `inline-flex items-center rounded-full border border-white/20 bg-white/12 px-1.5 py-0.5 font-semibold uppercase tracking-[0.18em] text-white ${monoSize}`, children: monogram })] })), active && !imageOnly ? (_jsx("span", { className: "absolute right-1.5 top-1.5 h-2.5 w-2.5 rounded-full border border-card bg-ok " })) : null, !imageOnly ? (_jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/12 to-transparent" })) : null, imageSrc && !imageOnly ? (_jsx("div", { className: `absolute left-1.5 top-1.5 inline-flex items-center rounded-full border border-white/20 bg-black/10 px-1.5 py-0.5 font-semibold uppercase tracking-[0.18em] text-white ${badgeSize}`, children: monogram })) : null] }));
 }

package/components/apps/catalog-loader.d.ts

@@ -1,4 +1,4 @@
-import { type RegistryAppInfo } from "../../api";
+import { type RegistryAppInfo } from "../../api/index.js";
 interface LoadMergedCatalogAppsOptions {
     includeHiddenApps?: boolean;
 }

package/components/apps/extensions/registry.d.ts

@@ -1,5 +1,5 @@
-import type { RegistryAppInfo } from "../../../api";
-import type { AppDetailExtensionComponent } from "./types";
+import type { RegistryAppInfo } from "../../../api/index.js";
+import type { AppDetailExtensionComponent } from "./types.js";
 /**
  * Register a detail-panel extension component for a given panel id.
  * Call this once per app at module load time (e.g. from the app's UI entry).

package/components/apps/extensions/surface.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { AppRunSummary } from "../../../api";
+import type { AppRunSummary } from "../../../api/index.js";
 export type SurfaceTone = "neutral" | "accent" | "success" | "warn" | "danger";
 export interface SelectedAppRun {
     run: AppRunSummary | null;
@@ -24,6 +24,6 @@ export declare function SurfaceSection({ title, children, }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SurfaceEmptyState({ title, body, }: {
     title: string;
-    body: string;
+    body?: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=surface.d.ts.map

package/components/apps/extensions/surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/apps/extensions/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,aAAa,EAAE,CAAC;CAC/B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,2CAQA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAgBA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAEtE;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CASA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,2CASA"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/apps/extensions/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,aAAa,EAAE,CAAC;CAC/B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,2CAQA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAcA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAEtE;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAOA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,2CASA"}

package/components/apps/extensions/surface.helpers.d.ts

@@ -1,5 +1,5 @@
-import type { AppRunHealthState, AppRunSummary, AppRunViewerAttachment } from "../../../api";
-import type { SelectedAppRun, SurfaceTone } from "./surface";
+import type { AppRunHealthState, AppRunSummary, AppRunViewerAttachment } from "../../../api/index.js";
+import type { SelectedAppRun, SurfaceTone } from "./surface.js";
 export declare function selectLatestRunForApp(appName: string, runs: AppRunSummary[] | null | undefined): SelectedAppRun;
 export declare function formatDetailTimestamp(value: string | number | null | undefined): string;
 export declare function toneForHealthState(state: AppRunHealthState | null | undefined): SurfaceTone;