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

package/components/local-inference/runtime-class-ui.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Runtime-class labeling + platform-servability helpers for the local-model
+ * picker UIs.
+ *
+ * The discriminator is computed on the server (`runtimeClass` on
+ * `CatalogModel` / `InstalledModel`); the UI reads the field and renders an
+ * honest label so the user knows which models run the full Eliza-1 pipeline vs
+ * the reduced-optimization generic GGUF path, and which picks can't run on the
+ * current platform at all.
+ */
+import { type RuntimeClass } from "@elizaos/shared/local-inference";
+import type { CatalogModel, InstalledModel } from "../../api/client-local-inference.js";
+export type { RuntimeClass };
+/** Resolve the runtime class for an installed model (reads the field; backfills). */
+export declare function installedRuntimeClass(model: InstalledModel): RuntimeClass;
+/** Resolve the runtime class for a catalog/search model (reads the field). */
+export declare function catalogRuntimeClass(model: CatalogModel): RuntimeClass;
+/**
+ * Short badge label for a runtime class. Fused Eliza-1 runs the full local
+ * pipeline (MTP, fork KV kernels, fused voice/vision); generic is a single
+ * GGUF with stock optimizations.
+ */
+export declare function runtimeClassBadge(runtimeClass: RuntimeClass): string;
+/** Longer descriptor used in tooltips / option suffixes. */
+export declare function runtimeClassDescription(runtimeClass: RuntimeClass): string;
+/**
+ * Whether the current platform can serve a model of this runtime class.
+ *
+ * Fused Eliza-1 bundles are servable wherever the fused runtime is present.
+ * Generic single-file GGUF needs the explicit-`modelPath` binding, which
+ * ships on mobile (Capacitor) but is not built into the desktop/web runtime
+ * yet — so a generic pick is flagged unavailable off-mobile. Mirrors the
+ * server-side `canServeRuntimeClassOnHost` gate so the UI disables exactly the
+ * picks the route would reject.
+ */
+export declare function canServeRuntimeClassOnPlatform(runtimeClass: RuntimeClass): boolean;
+/**
+ * Human-readable reason a runtime class can't run on the current platform, or
+ * `null` when it is servable. Drives the disabled annotation in the model
+ * pickers so a generic GGUF pick on desktop/web is visibly flagged instead of
+ * silently failing at activation.
+ */
+export declare function runtimeClassUnavailableReason(runtimeClass: RuntimeClass): string | null;
+//# sourceMappingURL=runtime-class-ui.d.ts.map

package/components/local-inference/runtime-class-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-class-ui.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/runtime-class-ui.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EACV,YAAY,EACZ,cAAc,EACf,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAEzE;AAED,8EAA8E;AAC9E,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAErE;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM,CAEpE;AAED,4DAA4D;AAC5D,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM,CAI1E;AAED;;;;;;;;;GASG;AACH,wBAAgB,8BAA8B,CAC5C,YAAY,EAAE,YAAY,GACzB,OAAO,CAIT;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,YAAY,EAAE,YAAY,GACzB,MAAM,GAAG,IAAI,CAGf"}

package/components/local-inference/runtime-class-ui.js

@@ -0,0 +1,61 @@
+/**
+ * Runtime-class labeling + platform-servability helpers for the local-model
+ * picker UIs.
+ *
+ * The discriminator is computed on the server (`runtimeClass` on
+ * `CatalogModel` / `InstalledModel`); the UI reads the field and renders an
+ * honest label so the user knows which models run the full Eliza-1 pipeline vs
+ * the reduced-optimization generic GGUF path, and which picks can't run on the
+ * current platform at all.
+ */
+import { classifyCatalogModelRuntimeClass, classifyInstalledModelRuntimeClass, } from "@elizaos/shared/local-inference";
+import { getFrontendPlatform } from "../../platform/platform-guards.js";
+/** Resolve the runtime class for an installed model (reads the field; backfills). */
+export function installedRuntimeClass(model) {
+    return classifyInstalledModelRuntimeClass(model);
+}
+/** Resolve the runtime class for a catalog/search model (reads the field). */
+export function catalogRuntimeClass(model) {
+    return model.runtimeClass ?? classifyCatalogModelRuntimeClass(model);
+}
+/**
+ * Short badge label for a runtime class. Fused Eliza-1 runs the full local
+ * pipeline (MTP, fork KV kernels, fused voice/vision); generic is a single
+ * GGUF with stock optimizations.
+ */
+export function runtimeClassBadge(runtimeClass) {
+    return runtimeClass === "fused-eliza1" ? "eliza-1" : "generic";
+}
+/** Longer descriptor used in tooltips / option suffixes. */
+export function runtimeClassDescription(runtimeClass) {
+    return runtimeClass === "fused-eliza1"
+        ? "eliza-1 — full pipeline"
+        : "generic — reduced optimizations";
+}
+/**
+ * Whether the current platform can serve a model of this runtime class.
+ *
+ * Fused Eliza-1 bundles are servable wherever the fused runtime is present.
+ * Generic single-file GGUF needs the explicit-`modelPath` binding, which
+ * ships on mobile (Capacitor) but is not built into the desktop/web runtime
+ * yet — so a generic pick is flagged unavailable off-mobile. Mirrors the
+ * server-side `canServeRuntimeClassOnHost` gate so the UI disables exactly the
+ * picks the route would reject.
+ */
+export function canServeRuntimeClassOnPlatform(runtimeClass) {
+    if (runtimeClass === "fused-eliza1")
+        return true;
+    const platform = getFrontendPlatform();
+    return platform === "ios" || platform === "android";
+}
+/**
+ * Human-readable reason a runtime class can't run on the current platform, or
+ * `null` when it is servable. Drives the disabled annotation in the model
+ * pickers so a generic GGUF pick on desktop/web is visibly flagged instead of
+ * silently failing at activation.
+ */
+export function runtimeClassUnavailableReason(runtimeClass) {
+    if (canServeRuntimeClassOnPlatform(runtimeClass))
+        return null;
+    return "Not runnable on this platform — generic GGUF needs a mobile build";
+}

package/components/local-inference/slot-metadata.d.ts

@@ -1,4 +1,4 @@
-import type { AgentModelSlot } from "../../api/client-local-inference";
+import type { AgentModelSlot } from "../../api/client-local-inference.js";
 export type LocalInferenceSlotDescriptor = {
     slot: AgentModelSlot;
     modelType: string;

package/components/local-inference/useDeviceBridgeStatus.d.ts

@@ -1,4 +1,4 @@
-import type { DeviceBridgeStatus } from "../../api/client-local-inference";
+import type { DeviceBridgeStatus } from "../../api/client-local-inference.js";
 export declare function buildDeviceBridgeStatusStreamUrl(rawUrl: string, token?: string | null): string;
 export declare function useDeviceBridgeStatus(): DeviceBridgeStatus | null;
 //# sourceMappingURL=useDeviceBridgeStatus.d.ts.map

package/components/local-inference/useDeviceBridgeStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeviceBridgeStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/useDeviceBridgeStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAI3E,wBAAgB,gCAAgC,CAC9C,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAMR;AAED,wBAAgB,qBAAqB,8BA0BpC"}
+{"version":3,"file":"useDeviceBridgeStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/useDeviceBridgeStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAK3E,wBAAgB,gCAAgC,CAC9C,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAMR;AAED,wBAAgB,qBAAqB,8BA8BpC"}

package/components/local-inference/useDeviceBridgeStatus.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { resolveApiUrl } from "../../utils/asset-url.js";
 import { getElizaApiToken } from "../../utils/eliza-globals.js";
+import { openEventSource } from "../../utils/event-source.js";
 export function buildDeviceBridgeStatusStreamUrl(rawUrl, token) {
     const trimmedToken = token?.trim();
     if (!trimmedToken) {
@@ -12,19 +13,23 @@ export function useDeviceBridgeStatus() {
     const [status, setStatus] = useState(null);
     useEffect(() => {
         const url = buildDeviceBridgeStatusStreamUrl(resolveApiUrl("/api/local-inference/device/stream"), getElizaApiToken());
-        const eventSource = new EventSource(url);
-        eventSource.onmessage = (event) => {
-            try {
-                const payload = JSON.parse(event.data);
-                if (payload.type === "status") {
-                    setStatus(payload.status);
+        // The native IPC base used by on-device runtimes is not an http(s) URL, so
+        // EventSource cannot subscribe to it; leave status null in that case.
+        const eventSource = openEventSource(url);
+        if (eventSource) {
+            eventSource.onmessage = (event) => {
+                try {
+                    const payload = JSON.parse(event.data);
+                    if (payload.type === "status") {
+                        setStatus(payload.status);
+                    }
                 }
-            }
-            catch {
-                // Ignore malformed stream events and keep the last good status.
-            }
-        };
-        return () => eventSource.close();
+                catch {
+                    // Ignore malformed stream events and keep the last good status.
+                }
+            };
+        }
+        return () => eventSource?.close();
     }, []);
     return status;
 }

package/components/local-inference/useHomeModelStatus.d.ts

@@ -1,4 +1,4 @@
-import { type HomeModelStatus } from "../../services/local-inference/home-model-status";
+import { type HomeModelStatus } from "../../services/local-inference/home-model-status.js";
 /**
  * Collapses the local-inference hub's per-slot text readiness into a single
  * home-surface status, refreshed live from the download stream. Defaults to

package/components/local-inference/useHomeModelStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHomeModelStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/useHomeModelStatus.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,kDAAkD,CAAC;AAmB1D;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAsCpD"}
+{"version":3,"file":"useHomeModelStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/local-inference/useHomeModelStatus.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,kDAAkD,CAAC;AAoB1D;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CA0CpD"}

package/components/local-inference/useHomeModelStatus.js

@@ -3,6 +3,7 @@ import { client } from "../../api/index.js";
 import { deriveHomeModelStatus, } from "../../services/local-inference/home-model-status.js";
 import { resolveApiUrl } from "../../utils/asset-url.js";
 import { getElizaApiToken } from "../../utils/eliza-globals.js";
+import { openEventSource } from "../../utils/event-source.js";
 const NOT_REQUIRED = {
     kind: "not-required",
     blocksSend: false,
@@ -40,20 +41,24 @@ export function useHomeModelStatus() {
         };
         void refresh();
         const url = appendTokenParam(resolveApiUrl("/api/local-inference/downloads/stream"));
-        const es = new EventSource(url, { withCredentials: false });
-        es.onmessage = () => {
-            // The stream carries download/active deltas but not recomputed
-            // readiness, so debounce a hub refetch to pick up the fresh
-            // `textReadiness` rather than recomputing it client-side.
-            if (refreshTimerRef.current)
-                clearTimeout(refreshTimerRef.current);
-            refreshTimerRef.current = setTimeout(() => void refresh(), 400);
-        };
+        // On-device runtimes are addressed via the native IPC base, which
+        // EventSource cannot open — fall back to the one-shot `refresh()` above.
+        const es = openEventSource(url, { withCredentials: false });
+        if (es) {
+            es.onmessage = () => {
+                // The stream carries download/active deltas but not recomputed
+                // readiness, so debounce a hub refetch to pick up the fresh
+                // `textReadiness` rather than recomputing it client-side.
+                if (refreshTimerRef.current)
+                    clearTimeout(refreshTimerRef.current);
+                refreshTimerRef.current = setTimeout(() => void refresh(), 400);
+            };
+        }
         return () => {
             cancelled = true;
             if (refreshTimerRef.current)
                 clearTimeout(refreshTimerRef.current);
-            es.close();
+            es?.close();
         };
     }, []);
     return status;

package/components/pages/AppDetailsView.d.ts

@@ -5,7 +5,7 @@
  *
  * Mounted by AppsView when the apps sub-path is `/apps/<slug>/details`.
  */
-import { type AppLaunchMode } from "../apps/per-app-config";
+import { type AppLaunchMode } from "../apps/per-app-config.js";
 interface AppDetailsViewProps {
     slug: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"AppDetailsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppDetailsView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0CH,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,wBAAwB,CAAC;AAIhC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE;AAiTD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,UAAU,GACX,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqqBzC"}
+{"version":3,"file":"AppDetailsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppDetailsView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA0CH,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,wBAAwB,CAAC;AAIhC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE;AAiTD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,UAAU,GACX,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqrBzC"}

package/components/pages/AppDetailsView.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { RegistryAppInfo } from "../../api";
+import type { RegistryAppInfo } from "../../api/index.js";
 /**
  * Convenience: does this slug resolve to an app that wants the details
  * page? Used by AppsView.handleLaunch to decide whether to navigate to

package/components/pages/AppDetailsView.js

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { invokeDesktopBridgeRequest, isElectrobunRuntime } from "../../bridge/index.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { getWidgetComponent } from "../../widgets/registry.js";
 import { isWidgetVisible, loadChatSidebarVisibility, saveChatSidebarVisibility, widgetVisibilityKey, } from "../../widgets/visibility.js";
@@ -177,10 +177,22 @@ function WidgetRow({ declaration, pluginId, visible, expanded, onTogglePreview,
                                     }) }), _jsxs("label", { className: "inline-flex cursor-pointer items-center gap-1.5 text-xs", children: [_jsx("input", { ref: showToggle.ref, type: "checkbox", checked: visible, onChange: (event) => onToggleVisible(event.currentTarget.checked), className: "h-3.5 w-3.5 accent-accent", ...showToggle.agentProps }), _jsx("span", { className: "text-muted", children: t("appdetails.show", { defaultValue: "Show" }) })] })] })] }), expanded ? (_jsx("div", { className: "border-t border-border/40 p-3", children: _jsx(WidgetPreview, { declaration: declaration, pluginId: pluginId, t: t }) })) : null] }));
 }
 export function AppDetailsView({ slug, onLaunched, }) {
-    const { plugins, appRuns, t, setTab, setState, setActionNotice } = useApp();
+    const { plugins, appRuns, t, setTab, setState, setActionNotice } = useAppSelectorShallow((s) => ({
+        plugins: s.plugins,
+        appRuns: s.appRuns,
+        t: s.t,
+        setTab: s.setTab,
+        setState: s.setState,
+        setActionNotice: s.setActionNotice,
+    }));
     // Catalog of registry apps for slug → app resolution.
     const { catalog: registryCatalog, error: catalogError, loading: catalogLoading, } = useRegistryCatalog();
-    const catalog = registryCatalog ?? [];
+    // Stabilize identity: `registryCatalog ?? []` would mint a fresh array every
+    // render while the registry is still loading (registryCatalog nullish), which
+    // re-recomputes `resolved` and re-fires the launch-history effect every
+    // render — an infinite render loop on first paint. Memoize so it only changes
+    // when the underlying catalog actually changes.
+    const catalog = useMemo(() => registryCatalog ?? [], [registryCatalog]);
     const resolved = useMemo(() => resolveAppFromSlug(slug, catalog), [catalog, slug]);
     // Per-app config (launch mode, alwaysOnTop, free-form settings).
     const [config, setConfig] = useState(() => loadPerAppConfig(slug));

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

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

package/components/pages/AppsPageView.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { getWindowNavigationPath, shouldUseHashNavigation, } from "../../navigation/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { GameView } from "../apps/GameView.js";
 import { getAppSlug } from "../apps/helpers.js";
 import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { AppsView } from "./AppsView.js";
 export function AppsPageView({ inModal, appsView: AppsViewRenderer = AppsView, gameView: GameViewRenderer = GameView, } = {}) {
-    const { appRuns, appsSubTab, activeGameRunId, setState } = useApp();
+    const { appRuns, appsSubTab, activeGameRunId, setState } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        appsSubTab: s.appsSubTab,
+        activeGameRunId: s.activeGameRunId,
+        setState: s.setState,
+    }));
     const hasActiveGame = activeGameRunId.trim().length > 0;
     const activeGameRun = hasActiveGame
         ? appRuns.find((run) => run.runId === activeGameRunId)

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

@@ -1 +1 @@
-{"version":3,"file":"AppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsView.tsx"],"names":[],"mappings":"AA6PA,wBAAgB,QAAQ,4CAu9BvB"}
+{"version":3,"file":"AppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AppsView.tsx"],"names":[],"mappings":"AA6PA,wBAAgB,QAAQ,4CAg/BvB"}

package/components/pages/AppsView.js

@@ -7,7 +7,7 @@ import { invokeDesktopBridgeRequest, isElectrobunRuntime, subscribeDesktopBridge
 import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
 import { getAppSlugFromPath, getWindowNavigationPath, isAppWindowRoute, shouldUseHashNavigation, } from "../../navigation/index.js";
-import { useApp, useIsDeveloperMode } from "../../state/index.js";
+import { useAppSelectorShallow, useEnabledViewKinds } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { AppsCatalogGrid } from "../apps/AppsCatalogGrid.js";
 import { AppsSidebar } from "../apps/AppsSidebar.js";
@@ -157,8 +157,20 @@ function ActiveRunButton({ hasCurrentGame, onOpen, }) {
     return (_jsx("button", { ref: ref, type: "button", className: "rounded-full border border-ok/35 bg-ok/10 px-3 py-1.5 text-xs-tight font-medium text-ok transition-colors hover:bg-ok/15", onClick: onOpen, ...agentProps, children: label }));
 }
 export function AppsView() {
-    const { appRuns, activeGameRunId, activeGameViewerUrl, appsSubTab, favoriteApps, walletEnabled, recentApps, setTab, setState, setActionNotice, t, } = useApp();
-    const developerMode = useIsDeveloperMode();
+    const { appRuns, activeGameRunId, activeGameViewerUrl, appsSubTab, favoriteApps, walletEnabled, recentApps, setTab, setState, setActionNotice, t, } = useAppSelectorShallow((s) => ({
+        appRuns: s.appRuns,
+        activeGameRunId: s.activeGameRunId,
+        activeGameViewerUrl: s.activeGameViewerUrl,
+        appsSubTab: s.appsSubTab,
+        favoriteApps: s.favoriteApps,
+        walletEnabled: s.walletEnabled,
+        recentApps: s.recentApps,
+        setTab: s.setTab,
+        setState: s.setState,
+        setActionNotice: s.setActionNotice,
+        t: s.t,
+    }));
+    const enabledKinds = useEnabledViewKinds();
     const [apps, setApps] = useState(() => readAppsCache() ?? []);
     const [loading, setLoading] = useState(() => readAppsCache() === null);
     const [error, setError] = useState(null);
@@ -171,8 +183,15 @@ export function AppsView() {
     const [isAppWindow] = useState(isAppWindowRoute);
     const [appWindows, setAppWindows] = useState([]);
     const [busyAppWindowId, setBusyAppWindowId] = useState(null);
+    const mountedRef = useRef(true);
     const slugAutoLaunchDone = useRef(false);
     const appWindowsRef = useRef([]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
     const handleSidebarCollapsedChange = useCallback((next) => {
         setSidebarCollapsed(next);
         try {
@@ -321,6 +340,8 @@ export function AppsView() {
     }, [appRuns, setState]);
     const refreshRuns = useCallback(async () => {
         const runs = await client.listAppRuns();
+        if (!mountedRef.current)
+            return runs;
         setState("appRuns", runs);
         return runs;
     }, [setState]);
@@ -358,16 +379,22 @@ export function AppsView() {
         void refreshRuns().catch(() => { });
         try {
             const list = await loadAppsCatalog();
+            if (!mountedRef.current)
+                return;
             setApps(list);
             writeAppsCache(list);
         }
         catch (err) {
+            if (!mountedRef.current)
+                return;
             setError(t("appsview.LoadError", {
                 message: err instanceof Error ? err.message : t("appsview.NetworkError"),
             }));
         }
         finally {
-            setLoading(false);
+            if (mountedRef.current) {
+                setLoading(false);
+            }
         }
     }, [refreshRuns, t]);
     useEffect(() => {
@@ -746,12 +773,12 @@ export function AppsView() {
             activeAppNames,
             searchQuery,
             walletEnabled,
-            developerMode,
+            enabledKinds,
         });
-    }, [activeAppNames, apps, searchQuery, walletEnabled, developerMode]);
+    }, [activeAppNames, apps, searchQuery, walletEnabled, enabledKinds]);
     const browseApps = useMemo(() => {
-        return filterAppsForCatalog(apps, { walletEnabled, developerMode });
-    }, [apps, walletEnabled, developerMode]);
+        return filterAppsForCatalog(apps, { walletEnabled, enabledKinds });
+    }, [apps, walletEnabled, enabledKinds]);
     const handleToggleFavorite = useCallback((appName) => {
         const current = favoriteApps;
         const next = current.includes(appName)

package/components/pages/AutomationsFeed.d.ts

@@ -13,7 +13,7 @@
  * triggers, and workflows into one `AutomationListResponse`. Editing routes
  * through the workflow CRUD endpoints under `/api/workflow/*`.
  */
-export type { FeedFilter } from "../../utils/automation-feed-filter";
+export type { FeedFilter } from "../../utils/automation-feed-filter.js";
 export interface AutomationsFeedProps {
     /**
      * Cred types the user has already connected. Used to compute the

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

@@ -1 +1 @@
-{"version":3,"file":"AutomationsFeed.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AutomationsFeed.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAsDH,YAAY,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAOrE,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC1C;AAsGD,wBAAgB,eAAe,CAAC,EAC9B,kBAAkB,GACnB,GAAE,oBAAyB,2CAkW3B"}
+{"version":3,"file":"AutomationsFeed.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/AutomationsFeed.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAuDH,YAAY,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAOrE,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC1C;AAqGD,wBAAgB,eAAe,CAAC,EAC9B,kBAAkB,GACnB,GAAE,oBAAyB,2CA6V3B"}

package/components/pages/AutomationsFeed.js

@@ -19,6 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { isApiError } from "../../api/client-types-core.js";
+import { dispatchChatPrefill } from "../../events/index.js";
 import { getCached, setCached } from "../../hooks/resource-cache.js";
 import { useAutomationDeepLink } from "../../hooks/useAutomationDeepLink.js";
 import { useFetchData } from "../../hooks/useFetchData.js";
@@ -56,7 +57,6 @@ const FILTER_ICONS = {
     inactive: _jsx(CircleSlash, { className: "h-3.5 w-3.5", "aria-hidden": true }),
 };
 const NEW_AUTOMATION_LINK_ID = "__new__";
-const CHAT_PREFILL_EVENT = "eliza:chat:prefill";
 const NEW_AUTOMATION_PROMPT = "Create an automation that ";
 // On mobile the workflow runtime (and its `GET /api/automations` route) is
 // intentionally absent — phones cannot host it — even though the Automations
@@ -126,11 +126,7 @@ export function AutomationsFeed({ connectedCredTypes, } = {}) {
     const { link, setLink } = useAutomationDeepLink();
     const rowRefs = useRef(new Map());
     const focusAutomationChat = useCallback(() => {
-        if (typeof window === "undefined")
-            return;
-        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
-            detail: { text: NEW_AUTOMATION_PROMPT, select: false },
-        }));
+        dispatchChatPrefill({ text: NEW_AUTOMATION_PROMPT, select: false });
     }, []);
     const newAgent = useAgentElement({
         id: "action-new",
@@ -399,7 +395,7 @@ function FeedRowItem({ row, onOpen, onRunNow, connectedCredTypes: _connectedCred
                                         }) }))] })] })] }), row.kind === "workflow" && (_jsx("button", { ref: runAction.ref, type: "button", "aria-label": t("automationsfeed.runWorkflowNow", {
                     name: row.title,
                     defaultValue: "Run {{name}} now",
-                }), onClick: onRunNow, className: "rounded-sm border border-border/40 p-1.5 text-muted-strong transition-colors hover:border-border hover:bg-bg-accent focus:bg-bg-accent", ...runAction.agentProps, children: _jsx(PlayCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] }));
+                }), onClick: onRunNow, className: "rounded-sm border border-border/40 p-1.5 text-muted-strong transition-colors hover:border-border hover:bg-bg-accent ", ...runAction.agentProps, children: _jsx(PlayCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] }));
 }
 function RowChip({ icon, label, tone = "muted", }) {
     const toneClasses = {

package/components/pages/BackgroundView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * BackgroundView — the "Background" view.
+ *
+ * A minimal, wordless shell around the shared Appearance settings background
+ * controls. The view stays transparent so the live wallpaper shows behind the
+ * controls and updates the instant a choice is made — the same background Home,
+ * Springboard, Settings, and this route share.
+ */
+export declare function BackgroundView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackgroundView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/BackgroundView.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,wBAAgB,cAAc,4CAS7B"}

package/components/pages/BackgroundView.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BackgroundView — the "Background" view.
+ *
+ * A minimal, wordless shell around the shared Appearance settings background
+ * controls. The view stays transparent so the live wallpaper shows behind the
+ * controls and updates the instant a choice is made — the same background Home,
+ * Springboard, Settings, and this route share.
+ */
+import { BackgroundSettingsControls } from "../settings/BackgroundSettingsControls.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
+export function BackgroundView() {
+    return (_jsx(ShellViewAgentSurface, { viewId: "background", children: _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col items-center justify-center px-4 pb-28 pt-6", children: [_jsx("h1", { className: "sr-only", children: "Background" }), _jsx(BackgroundSettingsControls, {})] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserWorkspaceView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/BrowserWorkspaceView.tsx"],"names":[],"mappings":"AA0FA,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACrC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,IAAI,IAAI,CAAC;IACf,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACvE,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACxE;;;;;;OAMG;IACH,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1C,CAAC;AAcF,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CACnD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;CAC5B,EACD,iBAAiB,CAClB,CAAC;AAIF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,sBAAsB,CAAC;SAC9C;KACF;CACF;AAoYD,wBAAgB,oBAAoB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAgyExD"}
+{"version":3,"file":"BrowserWorkspaceView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/BrowserWorkspaceView.tsx"],"names":[],"mappings":"AA0FA,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACrC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,IAAI,IAAI,CAAC;IACf,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACvE,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACxE;;;;;;OAMG;IACH,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1C,CAAC;AAcF,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CACnD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;CAC5B,EACD,iBAAiB,CAClB,CAAC;AAIF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,sBAAsB,CAAC;SAC9C;KACF;CACF;AAkYD,wBAAgB,oBAAoB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAuyExD"}

package/components/pages/BrowserWorkspaceView.js

@@ -9,7 +9,7 @@ import { readPersistedMobileRuntimeMode } from "../../first-run/mobile-runtime-m
 import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { useRenderGuard } from "../../hooks/useRenderGuard.js";
 import { WorkspaceLayout } from "../../layouts/workspace-layout/workspace-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { BROWSER_TAB_PRELOAD_SCRIPT, setBrowserTabsRendererImpl, } from "../../utils/browser-tabs-renderer-registry.js";
 import { SidebarCollapsedActionButton } from "../composites/sidebar/sidebar-collapsed-rail.js";
@@ -274,9 +274,7 @@ function BrowserTabRow({ tab, active, tabHasSessionFocus, label, description, cl
         description: `Close browser tab: ${label}`,
         onActivate: onClose,
     });
-    return (_jsxs("div", { className: "group relative", children: [_jsxs("button", { ref: activateRef, ...activateAgentProps, type: "button", role: "tab", "aria-selected": active, "aria-current": active ? "page" : undefined, title: tab.url, onClick: onActivate, className: `flex w-full min-w-0 items-start gap-1.5 rounded-sm px-1.5 py-1 text-left transition-colors ${tabIsInternal ? "pr-1.5" : "pr-7"} ${active ? "bg-bg-muted/50 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx("span", { className: "mt-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted/70", children: tabHasSessionFocus ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "h-2 w-2 rounded-full bg-accent " }), _jsx("span", { className: "sr-only", children: agentActiveLabel })] })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none", children: monogram })) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs-tight font-medium leading-snug", children: label }), _jsx("span", { className: "block truncate text-[11px] leading-snug text-muted/65", children: description })] })] }), tabIsInternal ? null : (_jsx("button", { ref: closeRef, ...closeAgentProps, type: "button", "aria-label": `${closeTabLabel} ${label}`, title: `${closeTabLabel}: ${label}`, className: `absolute right-0 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted transition-opacity hover:bg-bg-muted/50 hover:text-danger focus-visible:opacity-100 ${active
-                    ? "opacity-100"
-                    : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`, onClick: (event) => {
+    return (_jsxs("div", { className: "group relative", children: [_jsxs("button", { ref: activateRef, ...activateAgentProps, type: "button", role: "tab", "aria-selected": active, "aria-current": active ? "page" : undefined, title: tab.url, onClick: onActivate, className: `flex w-full min-w-0 items-start gap-1.5 rounded-sm px-1.5 py-1 text-left transition-colors ${tabIsInternal ? "pr-1.5" : "pr-7"} ${active ? "bg-bg-muted/50 text-txt" : "text-txt hover:bg-bg-muted/50"}`, children: [_jsx("span", { className: "mt-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted/70", children: tabHasSessionFocus ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "h-2 w-2 rounded-full bg-accent " }), _jsx("span", { className: "sr-only", children: agentActiveLabel })] })) : (_jsx("span", { className: "text-[10px] font-semibold leading-none", children: monogram })) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs-tight font-medium leading-snug", children: label }), _jsx("span", { className: "block truncate text-[11px] leading-snug text-muted/65", children: description })] })] }), tabIsInternal ? null : (_jsx("button", { ref: closeRef, ...closeAgentProps, type: "button", "aria-label": `${closeTabLabel} ${label}`, title: `${closeTabLabel}: ${label}`, className: `absolute right-0 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted transition-opacity hover:bg-bg-muted/50 hover:text-danger  ${active ? "opacity-100" : "opacity-0 group-hover:opacity-100 "}`, onClick: (event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     onClose();
@@ -284,7 +282,16 @@ function BrowserTabRow({ tab, active, tabHasSessionFocus, label, description, cl
 }
 export function BrowserWorkspaceView() {
     useRenderGuard("BrowserWorkspaceView");
-    const { getStewardPending, getStewardStatus, setActionNotice, t, plugins, uiTheme, walletAddresses, walletConfig, } = useApp();
+    const { getStewardPending, getStewardStatus, setActionNotice, t, plugins, uiTheme, walletAddresses, walletConfig, } = useAppSelectorShallow((s) => ({
+        getStewardPending: s.getStewardPending,
+        getStewardStatus: s.getStewardStatus,
+        setActionNotice: s.setActionNotice,
+        t: s.t,
+        plugins: s.plugins,
+        uiTheme: s.uiTheme,
+        walletAddresses: s.walletAddresses,
+        walletConfig: s.walletConfig,
+    }));
     const [workspace, setWorkspace] = useState({
         mode: "web",
         tabs: [],
@@ -1165,10 +1172,8 @@ export function BrowserWorkspaceView() {
         };
         const observer = new ResizeObserver(() => pokeAll());
         observer.observe(surface);
-        window.addEventListener("resize", pokeAll);
         return () => {
             observer.disconnect();
-            window.removeEventListener("resize", pokeAll);
         };
     }, []);
     // Drive native hide/show on every tag whenever selection or an in-app
@@ -1603,7 +1608,7 @@ export function BrowserWorkspaceView() {
             action: busyAction.replace(/[:\-_]+/g, " "),
         })
         : null;
-    const browserSurface = (_jsxs("div", { ref: browserSurfaceRef, className: "relative flex-1 min-h-0 overflow-hidden bg-bg", children: [watchBannerLabel ? (_jsxs("div", { className: "absolute left-3 right-3 top-2 z-20 flex items-center gap-2 rounded-sm border border-border/40 bg-card/80 px-3 py-1.5 text-xs text-muted backdrop-blur-sm", role: "status", "aria-live": "polite", "data-testid": "browser-workspace-watch-banner", children: [_jsx("span", { "aria-hidden": true, className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent " }), _jsx("span", { className: "truncate", children: watchBannerLabel })] })) : null, loadError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-sm border border-danger/50 bg-danger/15 px-3 py-1.5 text-xs text-danger", role: "alert", children: loadError })) : null, workspace.tabs.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: loading
+    const browserSurface = (_jsxs("div", { ref: browserSurfaceRef, className: "relative flex-1 min-h-0 overflow-hidden bg-bg", children: [watchBannerLabel ? (_jsxs("div", { className: "absolute left-3 right-3 top-2 z-20 flex items-center gap-2 rounded-sm border border-border/40 bg-card/95 px-3 py-1.5 text-xs text-muted", role: "status", "aria-live": "polite", "data-testid": "browser-workspace-watch-banner", children: [_jsx("span", { "aria-hidden": true, className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent " }), _jsx("span", { className: "truncate", children: watchBannerLabel })] })) : null, loadError ? (_jsx("div", { className: "absolute left-1/2 top-6 z-20 -translate-x-1/2 rounded-sm border border-danger/50 bg-danger/15 px-3 py-1.5 text-xs text-danger", role: "alert", children: loadError })) : null, workspace.tabs.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: loading
                                 ? t("browserworkspace.Loading", {
                                     defaultValue: "Loading browser workspace",
                                 })

package/components/pages/CameraPageView.js

@@ -142,8 +142,8 @@ export function CameraPageView() {
                         ...appNameInterpolationVars(branding),
                     }), retryLabel: t("camera.retry", { defaultValue: "Try again" }), settingsLabel: t("camera.openSettings", {
                         defaultValue: "Open Settings",
-                    }), onRetry: retryStart, className: "max-w-sm border-white/20 bg-bg/95 shadow-2xl", testId: "camera-permission-callout" }) })) : null, status === "error" ? (_jsx("div", { "data-testid": "camera-error-state", className: "absolute inset-0 grid place-items-center p-6 text-center", children: _jsxs("div", { className: "flex max-w-xs flex-col items-center gap-3", children: [_jsx(AlertTriangle, { className: "h-8 w-8 text-white/70", "aria-hidden": true }), _jsx("p", { className: "text-sm text-white/80", children: error ??
+                    }), onRetry: retryStart, className: "max-w-sm border-white/20 bg-bg/95", testId: "camera-permission-callout" }) })) : null, status === "error" ? (_jsx("div", { "data-testid": "camera-error-state", className: "absolute inset-0 grid place-items-center p-6 text-center", children: _jsxs("div", { className: "flex max-w-xs flex-col items-center gap-3", children: [_jsx(AlertTriangle, { className: "h-8 w-8 text-white/70", "aria-hidden": true }), _jsx("p", { className: "text-sm text-white/80", children: error ??
                                 t("camera.unavailable", {
                                     defaultValue: "The camera is unavailable on this device.",
-                                }) }), _jsx(Button, { onClick: retryStart, "data-testid": "camera-retry", children: t("camera.retry", { defaultValue: "Try again" }) })] }) })) : null, photo ? (_jsxs("div", { "data-testid": "camera-photo", className: "absolute inset-0 bg-black", children: [_jsx("img", { src: photoDataUrl(photo), alt: t("camera.capturedAlt", { defaultValue: "Captured photo" }), className: "h-full w-full object-contain" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-center gap-3 p-[calc(env(safe-area-inset-bottom,0px)+1.5rem)]", children: _jsxs(Button, { variant: "secondary", onClick: handleRetake, "data-testid": "camera-retake", children: [_jsx(RotateCcw, { className: "h-4 w-4", "aria-hidden": true }), t("camera.retake", { defaultValue: "Retake" })] }) })] })) : null, status === "live" && !photo ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute right-4 top-[calc(env(safe-area-inset-top,0px)+1rem)]", children: _jsx("button", { type: "button", "data-testid": "camera-switch", "aria-label": t("camera.switch", { defaultValue: "Switch camera" }), onClick: handleSwitch, disabled: busy, className: "grid h-11 w-11 place-items-center rounded-full border border-white/[0.18] bg-black/35 text-white backdrop-blur-2xl transition-colors hover:bg-white/[0.16] disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60", children: _jsx(SwitchCamera, { className: "h-5 w-5", "aria-hidden": true }) }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-center p-[calc(env(safe-area-inset-bottom,0px)+1.75rem)]", children: _jsx("button", { type: "button", "data-testid": "camera-capture", "aria-label": t("camera.capture", { defaultValue: "Take photo" }), onClick: handleCapture, disabled: busy, className: "grid h-[72px] w-[72px] place-items-center rounded-full border-4 border-white/90 bg-white/10 backdrop-blur-sm transition-transform active:scale-95 disabled:opacity-60 motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70", children: busy ? (_jsx(Loader2, { className: "h-6 w-6 animate-spin text-white", "aria-hidden": true })) : (_jsx("span", { className: "h-14 w-14 rounded-full bg-white" })) }) })] })) : null, error && status === "live" ? (_jsx("div", { "data-testid": "camera-error", role: "alert", className: "absolute inset-x-0 top-[calc(env(safe-area-inset-top,0px)+1rem)] mx-auto w-fit max-w-[90%] rounded-full bg-red-500/90 px-3 py-1.5 text-center text-xs text-white", children: error })) : null] }));
+                                }) }), _jsx(Button, { onClick: retryStart, "data-testid": "camera-retry", children: t("camera.retry", { defaultValue: "Try again" }) })] }) })) : null, photo ? (_jsxs("div", { "data-testid": "camera-photo", className: "absolute inset-0 bg-black", children: [_jsx("img", { src: photoDataUrl(photo), alt: t("camera.capturedAlt", { defaultValue: "Captured photo" }), className: "h-full w-full object-contain" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-center gap-3 p-[calc(env(safe-area-inset-bottom,0px)+1.5rem)]", children: _jsxs(Button, { variant: "secondary", onClick: handleRetake, "data-testid": "camera-retake", children: [_jsx(RotateCcw, { className: "h-4 w-4", "aria-hidden": true }), t("camera.retake", { defaultValue: "Retake" })] }) })] })) : null, status === "live" && !photo ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute right-4 top-[calc(env(safe-area-inset-top,0px)+1rem)]", children: _jsx("button", { type: "button", "data-testid": "camera-switch", "aria-label": t("camera.switch", { defaultValue: "Switch camera" }), onClick: handleSwitch, disabled: busy, className: "grid h-11 w-11 place-items-center rounded-full border border-white/[0.18] bg-black/55 text-white transition-colors hover:bg-white/[0.16] disabled:opacity-50   ", children: _jsx(SwitchCamera, { className: "h-5 w-5", "aria-hidden": true }) }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-center p-[calc(env(safe-area-inset-bottom,0px)+1.75rem)]", children: _jsx("button", { type: "button", "data-testid": "camera-capture", "aria-label": t("camera.capture", { defaultValue: "Take photo" }), onClick: handleCapture, disabled: busy, className: "grid h-[72px] w-[72px] place-items-center rounded-full border-4 border-white/90 bg-white/10 transition-transform active:scale-95 disabled:opacity-60 motion-reduce:active:scale-100   ", children: busy ? (_jsx(Loader2, { className: "h-6 w-6 animate-spin text-white", "aria-hidden": true })) : (_jsx("span", { className: "h-14 w-14 rounded-full bg-white" })) }) })] })) : null, error && status === "live" ? (_jsx("div", { "data-testid": "camera-error", role: "alert", className: "absolute inset-x-0 top-[calc(env(safe-area-inset-top,0px)+1rem)] mx-auto w-fit max-w-[90%] rounded-full bg-red-500/90 px-3 py-1.5 text-center text-xs text-white", children: error })) : null] }));
 }