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

package/components/accounts/RotationStrategyPicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@elizaos/ui";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
 const STRATEGY_OPTIONS = [
     {
         id: "priority",
@@ -32,12 +32,12 @@ const STRATEGY_OPTIONS = [
     },
 ];
 export function RotationStrategyPicker({ providerId, value, onChange, disabled, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const resolved = value ?? "priority";
     return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted", children: t("accounts.strategy.label", { defaultValue: "Strategy" }) }), _jsxs(Select, { value: resolved, onValueChange: (next) => {
                     if (next !== resolved)
                         onChange(next);
-                }, disabled: disabled, children: [_jsx(SelectTrigger, { id: `rotation-strategy-${providerId}`, className: "h-8 w-[160px] rounded-lg border border-border bg-card text-xs", children: _jsx(SelectValue, { placeholder: t("accounts.strategy.choose", {
+                }, disabled: disabled, children: [_jsx(SelectTrigger, { id: `rotation-strategy-${providerId}`, className: "h-8 w-[160px] rounded-sm border border-border bg-card text-xs", children: _jsx(SelectValue, { placeholder: t("accounts.strategy.choose", {
                                 defaultValue: "Choose strategy",
                             }) }) }), _jsx(SelectContent, { children: STRATEGY_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.id, children: _jsxs("div", { className: "flex flex-col gap-0.5 py-0.5", children: [_jsx("span", { className: "text-sm font-medium text-txt", children: t(option.labelKey, { defaultValue: option.labelFallback }) }), _jsx("span", { className: "text-xs text-muted", children: t(option.descriptionKey, {
                                             defaultValue: option.descriptionFallback,

package/components/apps/AppWindowRenderer.d.ts

@@ -0,0 +1,5 @@
+export interface AppWindowRendererProps {
+    slug: string;
+}
+export declare function AppWindowRenderer({ slug, }: AppWindowRendererProps): React.ReactElement;
+//# sourceMappingURL=AppWindowRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+import { type ComponentType } from "react";
+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.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppWindowRenderer.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppWindowRenderer.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAOvE,wBAAgB,0BAA0B,CACxC,GAAG,EAAE,UAAU,GACd,aAAa,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAczC"}

package/components/apps/AppWindowRenderer.helpers.js

@@ -0,0 +1,20 @@
+import { createElement } from "react";
+import { RetainedLazyComponent } from "../../retained-lazy.js";
+const lazyComponentCache = new WeakMap();
+export function getOverlayAppLazyComponent(app) {
+    if (!app.loader)
+        return null;
+    const existing = lazyComponentCache.get(app.loader);
+    if (existing)
+        return existing;
+    const loader = app.loader;
+    const created = function RetainedOverlayApp(props) {
+        return createElement((RetainedLazyComponent), {
+            loader,
+            componentProps: props,
+            fallback: null,
+        });
+    };
+    lazyComponentCache.set(app.loader, created);
+    return created;
+}

package/components/apps/AppWindowRenderer.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+function resolveOverlayAppBySlug(slug) {
+    const normalizedSlug = slug.toLowerCase();
+    return getAvailableOverlayApps().find((app) => getAppSlug(app.name).toLowerCase() === normalizedSlug);
+}
+// Overlay apps register asynchronously: the host loads plugin side-effect
+// modules off the first-paint critical path (idle-scheduled), so an app window
+// opened deep-link/standalone can mount BEFORE its overlay app has registered.
+// Re-resolve on a short bounded poll so a late-registering app is picked up
+// instead of being stranded on a permanent "App not found".
+const RESOLVE_RETRY_INTERVAL_MS = 120;
+const RESOLVE_RETRY_WINDOW_MS = 8000;
+function getLazyComponentForApp(app) {
+    return getOverlayAppLazyComponent(app);
+}
+function AppFallback() {
+    return (_jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground" }));
+}
+export function AppWindowRenderer({ slug, }) {
+    const initialApp = useMemo(() => resolveOverlayAppBySlug(slug), [slug]);
+    const [app, setApp] = useState(initialApp);
+    // Reset to the freshest synchronous resolution whenever the slug changes.
+    useEffect(() => {
+        setApp(resolveOverlayAppBySlug(slug));
+    }, [slug]);
+    // If the app isn't registered yet, poll the registry briefly until it shows
+    // up (late async plugin registration) or the retry window elapses.
+    useEffect(() => {
+        if (app)
+            return;
+        const deadline = Date.now() + RESOLVE_RETRY_WINDOW_MS;
+        const interval = window.setInterval(() => {
+            const resolved = resolveOverlayAppBySlug(slug);
+            if (resolved || Date.now() >= deadline) {
+                window.clearInterval(interval);
+                if (resolved)
+                    setApp(resolved);
+            }
+        }, RESOLVE_RETRY_INTERVAL_MS);
+        return () => window.clearInterval(interval);
+    }, [app, slug]);
+    useEffect(() => {
+        void app?.onLaunch?.();
+        return () => {
+            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 LazyComponent = getLazyComponentForApp(app);
+    if (LazyComponent) {
+        return (_jsx(Suspense, { fallback: _jsx(AppFallback, {}), children: _jsx(LazyComponent, { ...context }) }));
+    }
+    if (app.Component) {
+        return _jsx(app.Component, { ...context });
+    }
+    return (_jsxs("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: ["App has no component: ", slug] }));
+}

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;
@@ -7,8 +7,9 @@ interface AppsCatalogGridProps {
     searchQuery: string;
     visibleApps: RegistryAppInfo[];
     onLaunch: (app: RegistryAppInfo) => void;
+    onRetry?: () => void;
     onToggleFavorite: (appName: string) => void;
 }
-export declare function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onToggleFavorite, }: AppsCatalogGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onRetry, onToggleFavorite, }: AppsCatalogGridProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AppsCatalogGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppsCatalogGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/AppsCatalogGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAKjD,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,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmPD,wBAAgB,eAAe,CAAC,EAC9B,cAAc,EACd,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,GACjB,EAAE,oBAAoB,2CA8NtB"}
+{"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,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "@elizaos/ui";
-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";
+import { getProvenanceFlags, getProvenanceTitle } from "./provenance.js";
 const CARD_GAP_PX = 8;
 const MAX_CARDS_PER_ROW = 5;
 const MIN_CARD_WIDTH_PX = 248;
@@ -16,6 +17,22 @@ function resolveCardsPerRow(width) {
     const fit = Math.floor((width + CARD_GAP_PX) / (MIN_CARD_WIDTH_PX + CARD_GAP_PX));
     return clampCardsPerRow(fit);
 }
+function appProvenanceLabels(app) {
+    const flags = getProvenanceFlags(app);
+    return {
+        originLabel: flags.isThirdParty
+            ? "Third party"
+            : flags.isBuiltIn
+                ? "Built in"
+                : null,
+        supportLabel: flags.isCommunity
+            ? "Community"
+            : flags.isFirstParty
+                ? "First party"
+                : null,
+        title: getProvenanceTitle(flags, "app"),
+    };
+}
 function buildBalancedRows(items, maxCardsPerRow) {
     if (items.length === 0)
         return [];
@@ -139,10 +156,22 @@ function CatalogSkeletonSection({ label, rowSizes, }) {
     }, [label, rowSizes]);
     return (_jsxs("section", { className: "space-y-3", "aria-hidden": "true", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28 rounded-full bg-bg-accent/80" }), _jsx("div", { className: "h-px flex-1 bg-border/30" })] }), _jsx("div", { className: "space-y-2", children: rowDescriptors.map((rowDescriptor) => (_jsx("div", { className: "grid gap-2", style: {
                         gridTemplateColumns: `repeat(${rowDescriptor.rowSize}, minmax(0, 1fr))`,
-                    }, children: rowDescriptor.cardKeys.map((cardKey) => (_jsxs("div", { className: "overflow-hidden rounded-2xl 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))) })] }));
+                    }, 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))) })] }));
 }
-export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loading, searchQuery, visibleApps, onLaunch, onToggleFavorite, }) {
-    const { t } = useApp();
+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 = useAppSelector((s) => s.t);
     const catalogRef = useRef(null);
     const [catalogWidth, setCatalogWidth] = useState(0);
     const cardsPerRow = useMemo(() => resolveCardsPerRow(catalogWidth), [catalogWidth]);
@@ -172,7 +201,7 @@ export function AppsCatalogGrid({ activeAppNames, error, favoriteAppNames, loadi
         observer.observe(element);
         return () => observer.disconnect();
     }, []);
-    return (_jsxs("div", { ref: catalogRef, "data-testid": "apps-catalog-grid", children: [error ? (_jsx("div", { className: "mb-4 rounded-xl border border-danger/30 bg-danger/10 px-3 py-2 text-xs-tight text-danger", children: error })) : null, loading ? (_jsxs("div", { className: "space-y-6", role: "status", "aria-label": t("appsview.Loading"), children: [_jsx(CatalogSkeletonSection, { label: "Featured", rowSizes: [1] }), _jsx(CatalogSkeletonSection, { label: "Games & Entertainment", rowSizes: buildBalancedRows(Array.from({ length: 7 }), cardsPerRow).map((row) => row.length) }), _jsx(CatalogSkeletonSection, { label: "Developer Utilities", rowSizes: buildBalancedRows(Array.from({ length: 6 }), cardsPerRow).map((row) => row.length) })] })) : visibleApps.length === 0 ? (_jsx("div", { className: "rounded-2xl border border-dashed border-border/35 bg-card/72 px-6 py-16 text-center", children: _jsx("div", { className: "text-xs font-medium text-muted-strong", children: searchQuery
+    return (_jsxs("div", { ref: catalogRef, "data-testid": "apps-catalog-grid", children: [error ? (_jsxs("div", { className: "mb-4 flex flex-col gap-2 rounded-sm border border-danger/30 bg-danger/10 px-3 py-2 text-xs-tight text-danger sm:flex-row sm:items-center sm:justify-between", children: [_jsx("span", { children: error }), onRetry ? (_jsx("button", { type: "button", className: "self-start rounded-full border border-danger/40 px-2.5 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.14em] transition-colors hover:bg-danger/10 sm:self-auto", onClick: onRetry, children: "Retry" })) : null] })) : null, loading ? (_jsxs("div", { className: "space-y-6", role: "status", "aria-label": t("appsview.Loading"), children: [_jsx(CatalogSkeletonSection, { label: "Featured", rowSizes: [1] }), _jsx(CatalogSkeletonSection, { label: "Games & Entertainment", rowSizes: buildBalancedRows(Array.from({ length: 7 }), cardsPerRow).map((row) => row.length) }), _jsx(CatalogSkeletonSection, { label: "Developer Utilities", rowSizes: buildBalancedRows(Array.from({ length: 6 }), cardsPerRow).map((row) => row.length) })] })) : visibleApps.length === 0 ? (_jsx("div", { className: "rounded-sm border border-dashed border-border/35 bg-card/72 px-6 py-16 text-center", children: _jsx("div", { className: "text-xs font-medium text-muted-strong", children: searchQuery
                         ? t("appsview.NoAppsMatchSearch")
                         : t("appsview.NoAppsAvailable") }) })) : (_jsx("div", { className: "space-y-4", children: sectionRows.map((sectionRow) => {
                     const rowKey = sectionRow.sections
@@ -188,21 +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);
-                                                return (_jsxs("div", { className: `group relative overflow-hidden rounded-2xl border bg-card/72 transition-all hover:border-accent/45 focus-within:ring-2 focus-within:ring-accent/35 ${isActive
-                                                        ? "border-ok/45 shadow-[0_0_0_1px_rgba(16,185,129,0.25)]"
-                                                        : "border-border/35 hover:shadow-[0_8px_24px_-12px_rgba(0,0,0,0.4)]"}`, 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]" }), _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 drop-shadow-[0_1px_6px_rgba(0,0,0,0.6)]", 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 shadow-[0_0_0_3px_rgba(16,185,129,0.35)]" })) : 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":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAWhE,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,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SidebarContent, SidebarPanel, SidebarScrollRegion } from "@elizaos/ui";
 import { Play, Star } from "lucide-react";
-import { useMemo } from "react";
-import { useTranslation } from "../../state/TranslationContext.js";
+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";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
-import { getAppCategoryIcon } from "./app-identity.js";
+import { getAppCategoryIcon } from "./app-identity.helpers.js";
 import { APP_CATALOG_SECTION_LABELS, getAppCatalogSectionKey, getAppShortName, } from "./helpers.js";
 const GENRE_ORDER = [
     "games",
@@ -13,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)
@@ -33,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]);
@@ -80,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-[var(--radius-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 shadow-[0_0_0_2px_rgba(16,185,129,0.25)]" })) : 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

@@ -7,10 +7,6 @@
  * - Split-screen mode with agent logs panel
  * - Connection status indicator
  */
-import { type AppSessionState } from "../../api";
-import type { DesktopClickAuditItem } from "../../utils/desktop-workspace";
-export declare function buildDisconnectedSessionState(session: AppSessionState | null): AppSessionState | null;
-export declare const DESKTOP_GAME_CLICK_AUDIT: readonly DesktopClickAuditItem[];
 export declare function DesktopGameWindowControls({ gameWindowId, }: {
     gameWindowId: string | null;
 }): import("react/jsx-runtime").JSX.Element;

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;AAYH,OAAO,EAGL,KAAK,eAAe,EAGrB,MAAM,WAAW,CAAC;AAUnB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAW3E,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,eAAe,GAAG,IAAI,GAC9B,eAAe,GAAG,IAAI,CAcxB;AA8ED,eAAO,MAAM,wBAAwB,EAAE,SAAS,qBAAqB,EAkD3D,CAAC;AAEX,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,GACb,EAAE;IACD,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,2CA8ZA;AAED,wBAAgB,QAAQ,4CAyhDvB"}
+{"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

@@ -0,0 +1,3 @@
+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.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameView.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/apps/GameView.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAE3E,eAAO,MAAM,wBAAwB,EAAE,SAAS,qBAAqB,EAkD3D,CAAC"}

package/components/apps/GameView.helpers.js

@@ -0,0 +1,50 @@
+export const DESKTOP_GAME_CLICK_AUDIT = [
+    {
+        id: "game-native-refresh",
+        entryPoint: "game",
+        label: "Refresh Native Window State",
+        expectedAction: "Refresh canvas bounds and GPU window state.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "game-native-focus",
+        entryPoint: "game",
+        label: "Focus Game Window",
+        expectedAction: "Focus the native game canvas window.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "game-native-visibility",
+        entryPoint: "game",
+        label: "Show/Hide Game Window",
+        expectedAction: "Show or hide the native game canvas window.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "game-native-always-on-top",
+        entryPoint: "game",
+        label: "Toggle Game Window Always On Top",
+        expectedAction: "Toggle whether the native game window floats above other windows.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "game-native-snapshot",
+        entryPoint: "game",
+        label: "Snapshot Game Window",
+        expectedAction: "Capture a native snapshot of the game canvas window.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+    {
+        id: "game-gpu-window",
+        entryPoint: "game",
+        label: "Launch GPU Diagnostics",
+        expectedAction: "Create or focus a safe GPU diagnostics window.",
+        runtimeRequirement: "desktop",
+        coverage: "automated",
+    },
+];