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

package/state/usePreviewMode.js

@@ -0,0 +1,93 @@
+import { useSyncExternalStore } from "react";
+/**
+ * Preview Mode state — when on, the shell renders apps, widgets, nav tabs, and
+ * settings categorized as `preview` (unfinished / alpha / experimental views).
+ * Persists to localStorage so it survives reloads.
+ *
+ * Default: OFF on every build (dev and production alike). Preview views are
+ * always opt-in — unlike Developer Mode, they are never enabled by the build.
+ * The user's explicit choice (once made) wins on every platform/build.
+ *
+ * Mirrors {@link ./useDeveloperMode} so the two toggles behave identically
+ * apart from their default.
+ */
+const STORAGE_KEY = "eliza:previewMode";
+const ENABLED = "1";
+const DISABLED = "0";
+const listeners = new Set();
+/** Build-default when the user hasn't chosen: always off. */
+function defaultPreviewMode() {
+    return false;
+}
+function readStorage() {
+    if (typeof window === "undefined")
+        return defaultPreviewMode();
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (raw === ENABLED)
+            return true;
+        if (raw === DISABLED)
+            return false;
+        return defaultPreviewMode();
+    }
+    catch {
+        return defaultPreviewMode();
+    }
+}
+/**
+ * Cached snapshot of the persisted value. `getSnapshot` runs on every render of
+ * every subscriber, so it must return a stable primitive without per-render
+ * localStorage I/O. The cache is seeded once and refreshed only when the value
+ * changes (via `setPreviewMode` or a cross-tab `storage` event).
+ */
+let cachedEnabled = readStorage();
+if (typeof window !== "undefined") {
+    window.addEventListener("storage", (event) => {
+        if (event.key !== null && event.key !== STORAGE_KEY)
+            return;
+        const next = readStorage();
+        if (next === cachedEnabled)
+            return;
+        cachedEnabled = next;
+        for (const listener of listeners) {
+            listener();
+        }
+    });
+}
+function writeStorage(enabled) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(STORAGE_KEY, enabled ? ENABLED : DISABLED);
+    }
+    catch {
+        // localStorage unavailable (private mode, quota, etc.) — fall through.
+    }
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+function getSnapshot() {
+    return cachedEnabled;
+}
+function getServerSnapshot() {
+    return false;
+}
+export function isPreviewModeEnabled() {
+    return cachedEnabled;
+}
+export function setPreviewMode(enabled) {
+    writeStorage(enabled);
+    if (enabled === cachedEnabled)
+        return;
+    cachedEnabled = enabled;
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export function useIsPreviewMode() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/state/useStartupCoordinator.d.ts

@@ -13,11 +13,11 @@
  * Persistent WS bindings and navigation listeners are set up via bindReadyPhase
  * in a "ready" effect that only cleans up on unmount (not on phase transitions).
  */
-import { type PlatformPolicy, type RuntimeTarget, type StartupEvent, type StartupState } from "./startup-coordinator";
-import { type HydratingDeps, type ReadyPhaseDeps } from "./startup-phase-hydrate";
-import { type PollingBackendDeps } from "./startup-phase-poll";
-import { type RestoringSessionDeps } from "./startup-phase-restore";
-import { type StartingRuntimeDeps } from "./startup-phase-runtime";
+import { type PlatformPolicy, type RuntimeTarget, type StartupEvent, type StartupState } from "./startup-coordinator.js";
+import { type HydratingDeps, type ReadyPhaseDeps } from "./startup-phase-hydrate.js";
+import { type PollingBackendDeps } from "./startup-phase-poll.js";
+import { type RestoringSessionDeps } from "./startup-phase-restore.js";
+import { type StartingRuntimeDeps } from "./startup-phase-runtime.js";
 export declare function recoverTerminalStartupError(deps: StartupCoordinatorDeps, dispatch: (event: StartupEvent) => void, cancelled: {
     current: boolean;
 }): Promise<boolean>;

package/state/useStartupCoordinator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStartupCoordinator.d.ts","sourceRoot":"","sources":["../../../../../src/state/useStartupCoordinator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAOH,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,aAAa,EAElB,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAoBjC,wBAAsB,2BAA2B,CAC/C,IAAI,EAAE,sBAAsB,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,EACvC,SAAS,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,GAC9B,OAAO,CAAC,OAAO,CAAC,CA8BlB;AAMD,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GACvD,kBAAkB,GAClB,mBAAmB,GACnB,aAAa,GACb,cAAc,GAAG;IACf,uEAAuE;IACvE,eAAe,EAAE,CACf,CAAC,EAAE,kBAAkB,GAAG,oBAAoB,GAAG,OAAO,KACnD,IAAI,CAAC;CACX,CAAC;AAIJ,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,kBAAkB,GAAG,oBAAoB,GAAG,OAAO,CAAC;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC9B;AAgBD,wBAAgB,qBAAqB,CACnC,IAAI,CAAC,EAAE,sBAAsB,GAC5B,wBAAwB,CA+O1B"}
+{"version":3,"file":"useStartupCoordinator.d.ts","sourceRoot":"","sources":["../../../../../src/state/useStartupCoordinator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAOH,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,aAAa,EAElB,KAAK,YAAY,EACjB,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAqBjC,wBAAsB,2BAA2B,CAC/C,IAAI,EAAE,sBAAsB,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,EACvC,SAAS,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,GAC9B,OAAO,CAAC,OAAO,CAAC,CA8BlB;AAMD,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GACvD,kBAAkB,GAClB,mBAAmB,GACnB,aAAa,GACb,cAAc,GAAG;IACf,uEAAuE;IACvE,eAAe,EAAE,CACf,CAAC,EAAE,kBAAkB,GAAG,oBAAoB,GAAG,OAAO,KACnD,IAAI,CAAC;CACX,CAAC;AAIJ,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,kBAAkB,GAAG,oBAAoB,GAAG,OAAO,CAAC;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC9B;AAgBD,wBAAgB,qBAAqB,CACnC,IAAI,CAAC,EAAE,sBAAsB,GAC5B,wBAAwB,CAwP1B"}

package/state/useStartupCoordinator.js

@@ -23,6 +23,7 @@ import { bindReadyPhase, runHydrating, } from "./startup-phase-hydrate.js";
 import { runPollingBackend, } from "./startup-phase-poll.js";
 import { runRestoringSession, } from "./startup-phase-restore.js";
 import { runStartingRuntime, } from "./startup-phase-runtime.js";
+import { markStartup } from "./startup-telemetry.js";
 // Auto-recovery backoff: probe the backend after a transient startup error,
 // backing off 2.5s → 5s → 10s → 20s → cap 30s, and give up after a bounded
 // number of attempts so a genuinely-down backend stops thrashing and the user
@@ -106,6 +107,14 @@ export function useStartupCoordinator(deps) {
             return;
         depsRef.current?.setStartupPhase(legacyPhase);
     }, [legacyPhase, depsReady]);
+    // ── Startup telemetry — mark each coordinator phase the first time it is
+    // reached (issue #9565). Pure observation: markStartup dedupes by name, so
+    // poll retries / agent switches do not skew the cold-start trace, and this
+    // never feeds back into the reducer. `coordinator:ready` is the renderer's
+    // "usable agent" checkpoint.
+    useEffect(() => {
+        markStartup(`coordinator:${state.phase}`, { phase: state.phase });
+    }, [state.phase]);
     // ── Phase: restoring-session ────────────────────────────────────
     useEffect(() => {
         if (state.phase !== "restoring-session" || !depsReady)

package/state/useStreamingText.d.ts

@@ -25,7 +25,7 @@
  * stay as direct `setConversationMessages` calls.
  */
 import type { Dispatch, SetStateAction } from "react";
-import type { ChatFailureKind, ConversationMessage } from "../api";
+import type { ChatFailureKind, ConversationMessage } from "../api/index.js";
 export type StreamingTextSetter = Dispatch<SetStateAction<ConversationMessage[]>>;
 /**
  * One streaming-text mutation against a single in-flight assistant turn.

package/state/useTriggersState.d.ts

@@ -4,7 +4,7 @@
  * Manages trigger CRUD, run history, and health polling. Zero coupling to
  * the startup sequence — triggers are only loaded post-ready.
  */
-import type { CreateTriggerRequest, TriggerRunRecord, TriggerSummary, UpdateTriggerRequest } from "../api";
+import type { CreateTriggerRequest, TriggerRunRecord, TriggerSummary, UpdateTriggerRequest } from "../api/index.js";
 export declare function useTriggersState(): {
     state: {
         triggers: import("@elizaos/shared").TriggerSummary[];

package/state/useViewKinds.d.ts

@@ -0,0 +1,19 @@
+import { type EnabledViewKinds, isViewKindEnabled, isViewVisible, resolveViewKind, type ViewKind, type ViewKindBearer } from "@elizaos/core";
+/**
+ * The client is the authority on which view kinds are enabled: `system` and
+ * `release` are always on, while `developer` and `preview` follow the two
+ * Settings toggles (whose defaults depend on the build — dev vs production).
+ * The server returns every view with its `viewKind`; this hook tells the shell
+ * which ones to actually show.
+ *
+ * Use {@link useEnabledViewKinds} to get the toggle state and pass it to the
+ * pure `isViewVisible` / `isViewKindEnabled` helpers from `@elizaos/core`.
+ */
+export declare function useEnabledViewKinds(): EnabledViewKinds;
+/**
+ * Returns a stable predicate that reports whether a view-like declaration is
+ * visible under the current toggles. Recomputed only when a toggle flips.
+ */
+export declare function useViewKindVisible(): (decl: ViewKindBearer | null | undefined) => boolean;
+export { type EnabledViewKinds, isViewKindEnabled, isViewVisible, resolveViewKind, type ViewKind, type ViewKindBearer, };
+//# sourceMappingURL=useViewKinds.d.ts.map

package/state/useViewKinds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewKinds.d.ts","sourceRoot":"","sources":["../../../../../src/state/useViewKinds.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAKvB;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAItD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,CACpC,IAAI,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,KACpC,OAAO,CAOX;AAED,OAAO,EACL,KAAK,gBAAgB,EACrB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,QAAQ,EACb,KAAK,cAAc,GACpB,CAAC"}

package/state/useViewKinds.js

@@ -0,0 +1,28 @@
+import { isViewKindEnabled, isViewVisible, resolveViewKind, } from "@elizaos/core";
+import { useMemo } from "react";
+import { useIsDeveloperMode } from "./useDeveloperMode.js";
+import { useIsPreviewMode } from "./usePreviewMode.js";
+/**
+ * The client is the authority on which view kinds are enabled: `system` and
+ * `release` are always on, while `developer` and `preview` follow the two
+ * Settings toggles (whose defaults depend on the build — dev vs production).
+ * The server returns every view with its `viewKind`; this hook tells the shell
+ * which ones to actually show.
+ *
+ * Use {@link useEnabledViewKinds} to get the toggle state and pass it to the
+ * pure `isViewVisible` / `isViewKindEnabled` helpers from `@elizaos/core`.
+ */
+export function useEnabledViewKinds() {
+    const developer = useIsDeveloperMode();
+    const preview = useIsPreviewMode();
+    return useMemo(() => ({ developer, preview }), [developer, preview]);
+}
+/**
+ * Returns a stable predicate that reports whether a view-like declaration is
+ * visible under the current toggles. Recomputed only when a toggle flips.
+ */
+export function useViewKindVisible() {
+    const enabled = useEnabledViewKinds();
+    return useMemo(() => (decl) => isViewVisible(decl, enabled), [enabled]);
+}
+export { isViewKindEnabled, isViewVisible, resolveViewKind, };

package/state/useWalletState.d.ts

@@ -16,9 +16,9 @@
  * - `confirmAction`   — confirmDesktopAction utility, used by handleExportKeys
  */
 import type { WalletAddresses, WalletBalancesResponse, WalletChainKind, WalletConfigStatus, WalletConfigUpdateRequest, WalletEntry, WalletNftsResponse, WalletPrimaryMap, WalletSource } from "@elizaos/shared";
-import { type DropStatus, type MintResult, type RegistryStatus, type WalletExportResult, type WhitelistStatus } from "../api";
-import type { PromptOptions } from "../components/ui/confirm-dialog";
-import type { InventoryChainFilters } from "./types";
+import { type DropStatus, type MintResult, type RegistryStatus, type WalletExportResult, type WhitelistStatus } from "../api/index.js";
+import type { PromptOptions } from "../components/ui/confirm-dialog.js";
+import type { InventoryChainFilters } from "./types.js";
 interface WalletStateParams {
     setActionNotice: (text: string, tone?: "info" | "success" | "error", ttlMs?: number, once?: boolean, busy?: boolean) => void;
     /** Prompt modal function from AppContext's usePrompt() instance */

package/state/vrm.d.ts

@@ -1,4 +1,4 @@
-import type { UiTheme } from "./ui-preferences";
+import type { UiTheme } from "./ui-preferences.js";
 export declare function getVrmCount(): number;
 export declare const VRM_COUNT = 8;
 export declare function normalizeAvatarIndex(index: number): number;

package/storybook/home-widget-decorator.d.ts

@@ -0,0 +1,21 @@
+import type { Decorator } from "@storybook/react";
+/**
+ * Decorator for individual home-widget stories: provides the mock app context
+ * (plugin snapshot the WidgetHost resolves from) + the seeded fetch/notification
+ * data, and frames the widget on the translucent-glass surface it sits on at
+ * home (the orange wallpaper, approximated by an accent tint).
+ */
+export declare const withSeededHomeWidget: Decorator;
+/**
+ * Story-gate play helpers — dependency-free (no `@storybook/test`, which this
+ * repo does not install). A play that throws is caught by the gate as a broken
+ * story, so these are real fail-when-broken assertions.
+ *
+ * NOTE on timing: the determinism shim FIXES `Date.now()` (so a Date-based
+ * deadline never advances) but keeps `setTimeout` real — so poll with a bounded
+ * count of real `setTimeout` ticks, never wall-clock arithmetic.
+ */
+export declare function assert(cond: unknown, message: string): asserts cond;
+/** Poll (real 100ms ticks) for an element by data-testid; throw on timeout. */
+export declare function waitForTestId(root: HTMLElement, testId: string, tries?: number): Promise<HTMLElement>;
+//# sourceMappingURL=home-widget-decorator.d.ts.map

package/storybook/home-widget-decorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"home-widget-decorator.d.ts","sourceRoot":"","sources":["../../../../../src/storybook/home-widget-decorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BlD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,SAUlC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAEnE;AAED,+EAA+E;AAC/E,wBAAsB,aAAa,CACjC,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,MAAM,EACd,KAAK,SAAK,GACT,OAAO,CAAC,WAAW,CAAC,CAOtB"}

package/storybook/home-widget-decorator.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { HOME_WIDGET_MOCK_PLUGINS, installHomeWidgetFetchMock, seedHomeWidgetAppStore, seedHomeWidgetNotifications, } from "../widgets/__fixtures__/home-widget-mock-data.js";
+import { MockAppProvider } from "./mock-providers.js";
+/**
+ * Seed the home-widget data BEFORE the widget subtree renders, so each widget's
+ * mount-time fetch + the app/notification stores see populated, attention-worthy
+ * data. `useState`'s initializer runs synchronously on first render (ahead of
+ * the children); the `useEffect` cleanup restores `window.fetch` on unmount.
+ * This is the same fixture set the home-screen e2e drives — one source of mock
+ * truth for the home widgets across stories AND tests.
+ */
+function SeededHomeWidgetData({ children }) {
+    const restoreFetch = useRef(null);
+    useState(() => {
+        seedHomeWidgetAppStore();
+        seedHomeWidgetNotifications();
+        restoreFetch.current = installHomeWidgetFetchMock();
+        return null;
+    });
+    useEffect(() => () => restoreFetch.current?.(), []);
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * Decorator for individual home-widget stories: provides the mock app context
+ * (plugin snapshot the WidgetHost resolves from) + the seeded fetch/notification
+ * data, and frames the widget on the translucent-glass surface it sits on at
+ * home (the orange wallpaper, approximated by an accent tint).
+ */
+export const withSeededHomeWidget = (Story) => (_jsx(MockAppProvider, { value: { plugins: HOME_WIDGET_MOCK_PLUGINS, conversations: [] }, children: _jsx(SeededHomeWidgetData, { children: _jsx("div", { className: "w-[360px] rounded-2xl bg-accent/20 p-3", children: _jsx(Story, {}) }) }) }));
+/**
+ * Story-gate play helpers — dependency-free (no `@storybook/test`, which this
+ * repo does not install). A play that throws is caught by the gate as a broken
+ * story, so these are real fail-when-broken assertions.
+ *
+ * NOTE on timing: the determinism shim FIXES `Date.now()` (so a Date-based
+ * deadline never advances) but keeps `setTimeout` real — so poll with a bounded
+ * count of real `setTimeout` ticks, never wall-clock arithmetic.
+ */
+export function assert(cond, message) {
+    if (!cond)
+        throw new Error(`[story] ${message}`);
+}
+/** Poll (real 100ms ticks) for an element by data-testid; throw on timeout. */
+export async function waitForTestId(root, testId, tries = 80) {
+    for (let i = 0; i < tries; i += 1) {
+        const el = root.querySelector(`[data-testid="${testId}"]`);
+        if (el instanceof HTMLElement)
+            return el;
+        await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+    throw new Error(`[story] timed out waiting for [data-testid="${testId}"]`);
+}

package/storybook/mock-providers.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { type UiLanguage } from "../i18n";
-import type { AppContextValue } from "../state/types";
+import { type UiLanguage } from "../i18n/index.js";
+import type { AppContextValue } from "../state/types.js";
 type MockAppOverrides = Partial<AppContextValue>;
 type MockAgentStatus = Partial<NonNullable<AppContextValue["agentStatus"]>>;
 export type MockAppOptions = Omit<MockAppOverrides, "agentStatus"> & {

package/storybook/mock-providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mock-providers.d.ts","sourceRoot":"","sources":["../../../../../src/storybook/mock-providers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAK5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AACjD,KAAK,eAAe,GAAG,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;AAC5E,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,GAAG;IACnE,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CACtC,CAAC;AA2DF;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,UAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,2CASA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,2CAUA"}
+{"version":3,"file":"mock-providers.d.ts","sourceRoot":"","sources":["../../../../../src/storybook/mock-providers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAM5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AACjD,KAAK,eAAe,GAAG,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;AAC5E,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,GAAG;IACnE,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CACtC,CAAC;AAwEF;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,UAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,2CASA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,2CAaA"}

package/storybook/mock-providers.helpers.d.ts

@@ -1,5 +1,5 @@
 import type { Decorator } from "@storybook/react";
-import { type MockAppOptions } from "./mock-providers";
+import { type MockAppOptions } from "./mock-providers.js";
 export declare const withMockApp: Decorator;
 export declare function mockApp(overrides?: MockAppOptions): Decorator;
 /**

package/storybook/mock-providers.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createTranslator } from "../i18n/index.js";
+import { publishAppValue } from "../state/app-store.js";
 import { TranslationCtx, } from "../state/TranslationContext.hooks.js";
 import { AppContext } from "../state/useApp.js";
 const noop = () => { };
 const noopAsync = async () => { };
 const baseMockApp = {
     activeGameViewerUrl: "",
+    // Branch discriminators must be explicit null, NOT left to the Proxy's
+    // `noop` fallback (a truthy function) — otherwise ChatView takes its
+    // terminal/inbox early-return branch ("Starting terminal…") instead of
+    // rendering the composer + transcript.
+    activeInboxChat: null,
+    activeTerminalSessionId: null,
     agentStatus: {
         state: "stopped",
         agentName: "elizaOS Storybook",
@@ -28,6 +35,13 @@ const baseMockApp = {
             queueMicrotask(fn);
         },
     },
+    // Array-typed slices must default to real arrays, NOT the Proxy's `noop`
+    // fallback (a function) — consumers iterate them (`plugins.find`,
+    // `appRuns.filter`) and a function would throw "x is not a function".
+    appRuns: [],
+    plugins: [],
+    favoriteApps: [],
+    recentApps: [],
     pendingRestart: false,
     pendingRestartReasons: [],
     restartBannerDismissed: false,
@@ -72,5 +86,10 @@ export function MockTranslationProvider({ children, uiLanguage = "en", }) {
 export function MockAppProvider({ children, value, }) {
     // Provide both the app context and the translation context so components that
     // read either `useApp()` or `useTranslation()` (or both) render in isolation.
-    return (_jsx(MockTranslationProvider, { uiLanguage: value?.uiLanguage, children: _jsx(AppContext.Provider, { value: createMockApp(value), children: children }) }));
+    const mockValue = createMockApp(value);
+    // This provider supplies a custom AppContext value WITHOUT the real
+    // AppProvider, so the useAppSelector external store is never seeded. Publish
+    // the same mock value into the store so selector-based consumers resolve.
+    publishAppValue(mockValue);
+    return (_jsx(MockTranslationProvider, { uiLanguage: value?.uiLanguage, children: _jsx(AppContext.Provider, { value: mockValue, children: children }) }));
 }

package/styles/base.css

@@ -1,22 +1,23 @@
 /* Eliza — Theme System */
 
 :root {
-  --brand-blue: #1d91e8;
+  /* Legacy alias retained for old theme references, neutralized per #8796. */
+  --brand-blue: rgba(0, 0, 0, 0.6);
   --brand-orange: #ff8a24;
   --brand-black: #000000;
   --brand-white: #ffffff;
   --brand-gray: #d1d0d4;
-  --sky-0: var(--brand-blue);
-  --sky-1: var(--brand-blue);
+  --sky-0: rgba(0, 0, 0, 0.6);
+  --sky-1: rgba(0, 0, 0, 0.74);
   --sky-2: var(--brand-white);
   --eliza-orange: var(--brand-orange);
 
   /* Backgrounds */
   --bg: var(--brand-white);
-  --bg-accent: rgba(11, 53, 241, 0.08);
+  --bg-accent: rgba(0, 0, 0, 0.05);
   --bg-elevated: rgba(255, 255, 255, 0.94);
-  --bg-hover: rgba(11, 53, 241, 0.1);
-  --bg-muted: rgba(11, 53, 241, 0.12);
+  --bg-hover: rgba(0, 0, 0, 0.06);
+  --bg-muted: rgba(0, 0, 0, 0.08);
 
   --card: var(--brand-white);
   --card-foreground: var(--brand-black);
@@ -40,7 +41,7 @@
   --border-strong: rgba(0, 0, 0, 0.22);
   --border-hover: var(--brand-orange);
   --input: var(--brand-white);
-  --ring: var(--brand-blue);
+  --ring: var(--brand-orange);
 
   /* Accent */
   --accent: var(--brand-orange);
@@ -63,7 +64,7 @@
   --warn-muted: rgba(255, 88, 0, 0.72);
   --warn-subtle: rgba(255, 88, 0, 0.14);
   --danger: var(--brand-orange);
-  --info: var(--brand-blue);
+  --info: var(--muted-strong);
 
   /* Status semantic aliases */
   --status-success: var(--ok);
@@ -77,16 +78,16 @@
   --status-info: var(--muted-strong);
   --status-info-bg: rgba(0, 0, 0, 0.06);
 
-  --focus: rgba(11, 53, 241, 0.18);
+  --focus: rgba(255, 88, 0, 0.2);
   --focus-ring: none;
   --scrollbar-track: rgba(255, 255, 255, 0.3);
-  --scrollbar-thumb-start: rgba(11, 53, 241, 0.42);
-  --scrollbar-thumb-mid: rgba(11, 53, 241, 0.58);
-  --scrollbar-thumb-end: rgba(11, 53, 241, 0.66);
+  --scrollbar-thumb-start: rgba(0, 0, 0, 0.22);
+  --scrollbar-thumb-mid: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-end: rgba(0, 0, 0, 0.36);
   --scrollbar-thumb-hover-start: rgba(255, 88, 0, 0.56);
   --scrollbar-thumb-hover-mid: rgba(255, 88, 0, 0.7);
   --scrollbar-thumb-hover-end: rgba(255, 88, 0, 0.78);
-  --scrollbar-thumb-edge: rgba(11, 53, 241, 0.12);
+  --scrollbar-thumb-edge: rgba(0, 0, 0, 0.1);
 
   /* Header */
   --header-bar-bg: rgba(255, 255, 255, 0.9);
@@ -94,7 +95,7 @@
   --section-bar-bg: var(--brand-white);
   --section-bar-fg: var(--brand-black);
   --link-color: var(--brand-black);
-  --link-hover-color: var(--brand-blue);
+  --link-hover-color: var(--brand-orange);
 
   --font-sans:
     "Poppins", "Poppins Variable", system-ui, -apple-system, "Segoe UI", Arial,
@@ -183,7 +184,7 @@
   --border-strong: rgba(255, 255, 255, 0.22);
   --border-hover: var(--brand-orange);
   --input: rgba(255, 255, 255, 0.08);
-  --ring: var(--brand-blue);
+  --ring: var(--brand-orange);
 
   --accent: var(--brand-orange);
   --accent-rgb: 255, 88, 0;
@@ -204,7 +205,7 @@
   --warn-muted: rgba(255, 88, 0, 0.7);
   --warn-subtle: rgba(255, 88, 0, 0.12);
   --danger: var(--brand-orange);
-  --info: var(--brand-blue);
+  --info: var(--muted-strong);
 
   --status-success: var(--ok);
   --status-success-bg: var(--ok-subtle);
@@ -216,12 +217,12 @@
   --status-info: var(--muted-strong);
   --status-info-bg: rgba(255, 255, 255, 0.08);
 
-  --focus: rgba(11, 53, 241, 0.18);
+  --focus: rgba(255, 88, 0, 0.22);
   --focus-ring: none;
   --scrollbar-track: transparent;
-  --scrollbar-thumb-start: rgba(11, 53, 241, 0.88);
-  --scrollbar-thumb-mid: rgba(11, 53, 241, 0.72);
-  --scrollbar-thumb-end: rgba(11, 53, 241, 0.8);
+  --scrollbar-thumb-start: rgba(255, 255, 255, 0.32);
+  --scrollbar-thumb-mid: rgba(255, 255, 255, 0.24);
+  --scrollbar-thumb-end: rgba(255, 255, 255, 0.28);
   --scrollbar-thumb-hover-start: rgba(255, 88, 0, 0.94);
   --scrollbar-thumb-hover-mid: rgba(255, 88, 0, 0.82);
   --scrollbar-thumb-hover-end: rgba(255, 88, 0, 0.88);
@@ -232,7 +233,7 @@
   --section-bar-bg: var(--brand-black);
   --section-bar-fg: var(--brand-white);
   --link-color: var(--text);
-  --link-hover-color: var(--brand-blue);
+  --link-hover-color: var(--brand-orange);
 
   --mono: var(--font-sans);
   --font-body: var(--font-sans);
@@ -337,6 +338,16 @@ body.platform-android [contenteditable="true"] {
   -webkit-touch-callout: default;
 }
 
+/* Chat transcripts are reading surfaces. Keep them selectable even in native
+   shells where the app body disables global selection to protect gestures. */
+body.native [data-chat-selectable="true"],
+body.platform-ios [data-chat-selectable="true"],
+body.platform-android [data-chat-selectable="true"] {
+  -webkit-user-select: text;
+  user-select: text;
+  -webkit-touch-callout: default;
+}
+
 /* Hide scrollbars on native shells. Mobile users don't need a visible
    scrollbar; they get a momentum scroller. */
 body.native *::-webkit-scrollbar,
@@ -357,8 +368,8 @@ body.platform-android * {
 /* ─── Brand theme variants ───────────────────────────────────────────
    Each marketing surface picks one of these by setting the class on
    <html> or <body>. Shared palette, different center of gravity:
-     .theme-cloud   eliza cloud   black + white, blue/orange as accents
-     .theme-os      elizaOS       blue primary, white text
+     .theme-cloud   eliza cloud   black + white, neutral/orange accents
+     .theme-os      elizaOS       black primary, white text
      .theme-app     eliza app     orange primary, black text on orange
    Designed for full-bleed solid-color sections and a cloud video hero. */
 
@@ -395,19 +406,19 @@ body.platform-android * {
   --section-bar-bg: var(--brand-black);
   --section-bar-fg: var(--brand-white);
   --link-color: var(--brand-white);
-  --link-hover-color: var(--brand-blue);
+  --link-hover-color: var(--brand-gray);
 
   color-scheme: dark;
 }
 
 .theme-os {
-  --bg: var(--brand-blue);
+  --bg: var(--brand-black);
   --bg-accent: rgba(255, 255, 255, 0.08);
   --bg-elevated: rgba(255, 255, 255, 0.06);
   --bg-hover: rgba(255, 255, 255, 0.12);
   --bg-muted: rgba(255, 255, 255, 0.08);
 
-  --card: var(--brand-blue);
+  --card: var(--brand-black);
   --card-foreground: var(--brand-white);
   --surface: rgba(255, 255, 255, 0.08);
 
@@ -424,13 +435,13 @@ body.platform-android * {
 
   --accent: var(--brand-white);
   --accent-hover: var(--brand-gray);
-  --accent-foreground: var(--brand-blue);
+  --accent-foreground: var(--brand-black);
   --primary: var(--brand-white);
-  --primary-foreground: var(--brand-blue);
+  --primary-foreground: var(--brand-black);
 
-  --header-bar-bg: var(--brand-blue);
+  --header-bar-bg: var(--brand-black);
   --header-bar-fg: var(--brand-white);
-  --section-bar-bg: var(--brand-blue);
+  --section-bar-bg: var(--brand-black);
   --section-bar-fg: var(--brand-white);
   --link-color: var(--brand-white);
   --link-hover-color: var(--brand-orange);
@@ -471,7 +482,7 @@ body.platform-android * {
   --section-bar-bg: var(--brand-orange);
   --section-bar-fg: var(--brand-black);
   --link-color: var(--brand-black);
-  --link-hover-color: var(--brand-blue);
+  --link-hover-color: var(--brand-orange);
 
   color-scheme: light;
 }
@@ -494,7 +505,8 @@ body.platform-android * {
   padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 4vw, 4rem);
 }
 .brand-section--blue {
-  background: var(--brand-blue);
+  /* Legacy class name; rendered as neutral black after the no-blue pass. */
+  background: var(--brand-black);
   color: var(--brand-white);
 }
 .brand-section--orange {
@@ -539,3 +551,25 @@ body.platform-android * {
     transform: translateY(0);
   }
 }
+
+/* Off-screen render skipping (content-visibility)
+   Defined here in base.css so it ships to every consumer (app styles.css,
+   cloud-ui/index.css, cloud-frontend globals.css, homepage index.css) that
+   @imports this file. Plain CSS classes: add the className to a list/table
+   row to let the browser skip layout + paint for rows scrolled out of view.
+
+   contain-intrinsic-size supplies a placeholder size for skipped rows so the
+   scrollbar stays stable; "auto <h>" lets the browser remember the real
+   measured size after a row has rendered once and fall back to <h> until then.
+
+   .cv-auto      - short list / table rows (logs, trajectories, agents tables).
+   .cv-auto-row  - taller chat-turn rows (a bubble is multi-line + padding). */
+.cv-auto {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 56px;
+}
+
+.cv-auto-row {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 96px;
+}

package/styles/brand-gold.css

@@ -489,8 +489,6 @@
   border: 0;
   background: var(--logs-toolbar-button-bg);
   color: var(--muted-strong);
-  box-shadow: var(--logs-toolbar-button-shadow);
-  backdrop-filter: blur(12px);
   transition:
     background-color 200ms,
     color 200ms,
@@ -511,9 +509,4 @@
   color: var(--muted-strong);
 }
 
-[data-theme="dark"] .logs-toolbar-button,
-.dark .logs-toolbar-button {
-  box-shadow: var(--logs-toolbar-button-shadow-dark);
-}
-
 /* Component-level theme overrides removed — use theme variables directly. */