@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/widgets/WidgetHost.d.ts

@@ -0,0 +1,32 @@
+/**
+ * WidgetHost — renders all enabled plugin widgets for a named slot.
+ *
+ * Drop this into any page view:
+ *   <WidgetHost slot="chat-sidebar" />
+ *   <WidgetHost slot="wallet" />
+ *
+ * Queries the widget registry for matching declarations, wraps each in an
+ * error boundary, and renders either the bundled React component or falls back
+ * to the declarative UiRenderer for uiSpec widgets.
+ */
+import type { ActivityEvent } from "../hooks/useActivityEvents";
+import type { PluginWidgetDeclaration, WidgetSlot } from "./types";
+export interface WidgetHostProps {
+    /** Which slot to render widgets for. */
+    slot: WidgetSlot;
+    /** Activity events forwarded to widgets (primarily chat-sidebar). */
+    events?: ActivityEvent[];
+    /** Clear events callback. */
+    clearEvents?: () => void;
+    /** Additional CSS class on the host container. */
+    className?: string;
+    /** When true, render nothing if no widgets resolve (default: true). */
+    hideWhenEmpty?: boolean;
+    /**
+     * Optional post-resolution filter. Useful for layering user-controlled
+     * visibility overrides on top of the registry's plugin-enabled gate.
+     */
+    filter?: (declaration: PluginWidgetDeclaration) => boolean;
+}
+export declare function WidgetHost({ slot, events, clearEvents, className, hideWhenEmpty, filter, }: WidgetHostProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=WidgetHost.d.ts.map

package/widgets/WidgetHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetHost.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/WidgetHost.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAIhE,OAAO,KAAK,EAAE,uBAAuB,EAAe,UAAU,EAAE,MAAM,SAAS,CAAC;AAgDhF,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,IAAI,EAAE,UAAU,CAAC;IACjB,qEAAqE;IACrE,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,OAAO,CAAC;CAC5D;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAoB,EACpB,MAAM,GACP,EAAE,eAAe,kDA2DjB"}

package/widgets/WidgetHost.js

@@ -0,0 +1,62 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * WidgetHost — renders all enabled plugin widgets for a named slot.
+ *
+ * Drop this into any page view:
+ *   <WidgetHost slot="chat-sidebar" />
+ *   <WidgetHost slot="wallet" />
+ *
+ * Queries the widget registry for matching declarations, wraps each in an
+ * error boundary, and renders either the bundled React component or falls back
+ * to the declarative UiRenderer for uiSpec widgets.
+ */
+import { Component, useMemo } from "react";
+import { useApp } from "../state/index.js";
+import { useIsDeveloperMode } from "../state/useDeveloperMode.js";
+import { resolveWidgetsForSlot } from "./registry.js";
+class WidgetErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        console.error(`[widget:${this.props.widgetId}] render error:`, error, info.componentStack);
+    }
+    render() {
+        if (this.state.error) {
+            return (_jsxs("div", { className: "rounded-lg border border-danger/30 bg-danger/5 px-3 py-2 text-xs text-danger", "data-testid": `widget-error-${this.props.widgetId}`, children: ["Widget \"", this.props.widgetId, "\" failed to render."] }));
+        }
+        return this.props.children;
+    }
+}
+export function WidgetHost({ slot, events, clearEvents, className, hideWhenEmpty = true, filter, }) {
+    const { plugins } = useApp();
+    const developerModeEnabled = useIsDeveloperMode();
+    const resolved = useMemo(() => {
+        const all = resolveWidgetsForSlot(slot, plugins ?? []);
+        const gated = developerModeEnabled
+            ? all
+            : all.filter((entry) => entry.declaration.developerOnly !== true);
+        return filter ? gated.filter((entry) => filter(entry.declaration)) : gated;
+    }, [slot, plugins, filter, developerModeEnabled]);
+    if (resolved.length === 0 && hideWhenEmpty)
+        return null;
+    return (_jsx("div", { className: `flex flex-col gap-3 ${className ?? ""}`, "data-testid": `widget-host-${slot}`, "data-slot": slot, children: resolved.map(({ declaration, Component }) => {
+            const widgetKey = `${declaration.pluginId}/${declaration.id}`;
+            const pluginState = (plugins ?? []).find((p) => p.id === declaration.pluginId);
+            const widgetProps = {
+                pluginId: declaration.pluginId,
+                pluginState,
+                events,
+                clearEvents,
+            };
+            if (Component) {
+                return (_jsx(WidgetErrorBoundary, { widgetId: widgetKey, children: _jsx(Component, { ...widgetProps }) }, widgetKey));
+            }
+            // Fallback: declarative uiSpec rendering (future — placeholder for now)
+            if (declaration.uiSpec) {
+                return (_jsx(WidgetErrorBoundary, { widgetId: widgetKey, children: _jsxs("div", { className: "rounded-lg border border-border/60 bg-bg-accent/25 px-3 py-3 text-xs text-muted", "data-testid": `widget-uispec-${declaration.id}`, children: [declaration.label, " (declarative widget)"] }) }, widgetKey));
+            }
+            return null;
+        }) }));
+}

package/widgets/index.d.ts

@@ -0,0 +1,7 @@
+export type { WidgetPluginState } from "./registry";
+export { BUILTIN_WIDGET_DECLARATIONS, getWidgetComponent, registerBuiltinWidgetDeclarations, registerBuiltinWidgets, registerWidgetComponent, resolveChatSidebarWidgets, resolveWidgetsForSlot, } from "./registry";
+export { seedLegacyWidgets } from "./registry-store";
+export type { PluginWidgetDeclaration, WidgetProps, WidgetRegistration, WidgetSlot, } from "./types";
+export type { WidgetHostProps } from "./WidgetHost";
+export { WidgetHost } from "./WidgetHost";
+//# sourceMappingURL=index.d.ts.map

package/widgets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,EAClB,iCAAiC,EACjC,sBAAsB,EACtB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EACV,uBAAuB,EACvB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/widgets/index.js

@@ -0,0 +1,3 @@
+export { BUILTIN_WIDGET_DECLARATIONS, getWidgetComponent, registerBuiltinWidgetDeclarations, registerBuiltinWidgets, registerWidgetComponent, resolveChatSidebarWidgets, resolveWidgetsForSlot, } from "./registry.js";
+export { seedLegacyWidgets } from "./registry-store.js";
+export { WidgetHost } from "./WidgetHost.js";

package/widgets/registry-store.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType } from "react";
+import type { ChatSidebarWidgetDefinition } from "../components/chat/widgets/types";
+import type { WidgetProps } from "./types";
+/**
+ * Register a bundled React component for a widget declaration.
+ * Key format: `${pluginId}/${declarationId}`.
+ */
+export declare function registerWidgetComponent(pluginId: string, declarationId: string, Component: ComponentType<WidgetProps>): void;
+/** Look up a registered component. */
+export declare function getWidgetComponent(pluginId: string, declarationId: string): ComponentType<WidgetProps> | undefined;
+/**
+ * Adapts existing ChatSidebarWidgetDefinition[] to the new registry format.
+ * These legacy widgets used `ChatSidebarWidgetProps` which is compatible with
+ * `WidgetProps` (events + clearEvents).
+ */
+export declare function seedLegacyWidgets(definitions: ReadonlyArray<ChatSidebarWidgetDefinition>): void;
+/**
+ * Public API for plugins outside app-core to seed their own widget components.
+ * Call this when your plugin loads (e.g. via side-effect import of a widgets
+ * module). Each definition must be a `ChatSidebarWidgetDefinition`.
+ */
+export declare function registerBuiltinWidgets(definitions: ReadonlyArray<ChatSidebarWidgetDefinition>): void;
+//# sourceMappingURL=registry-store.d.ts.map

package/widgets/registry-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-store.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/registry-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,GACpC,IAAI,CAEN;AAED,sCAAsC;AACtC,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,GACpB,aAAa,CAAC,WAAW,CAAC,GAAG,SAAS,CAExC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,aAAa,CAAC,2BAA2B,CAAC,GACtD,IAAI,CAQN;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,aAAa,CAAC,2BAA2B,CAAC,GACtD,IAAI,CAEN"}

package/widgets/registry-store.js

@@ -0,0 +1,34 @@
+var COMPONENT_REGISTRY;
+function getComponentRegistry() {
+    COMPONENT_REGISTRY ??= new Map();
+    return COMPONENT_REGISTRY;
+}
+/**
+ * Register a bundled React component for a widget declaration.
+ * Key format: `${pluginId}/${declarationId}`.
+ */
+export function registerWidgetComponent(pluginId, declarationId, Component) {
+    getComponentRegistry().set(`${pluginId}/${declarationId}`, Component);
+}
+/** Look up a registered component. */
+export function getWidgetComponent(pluginId, declarationId) {
+    return getComponentRegistry().get(`${pluginId}/${declarationId}`);
+}
+/**
+ * Adapts existing ChatSidebarWidgetDefinition[] to the new registry format.
+ * These legacy widgets used `ChatSidebarWidgetProps` which is compatible with
+ * `WidgetProps` (events + clearEvents).
+ */
+export function seedLegacyWidgets(definitions) {
+    for (const def of definitions) {
+        registerWidgetComponent(def.pluginId, def.id, def.Component);
+    }
+}
+/**
+ * Public API for plugins outside app-core to seed their own widget components.
+ * Call this when your plugin loads (e.g. via side-effect import of a widgets
+ * module). Each definition must be a `ChatSidebarWidgetDefinition`.
+ */
+export function registerBuiltinWidgets(definitions) {
+    seedLegacyWidgets(definitions);
+}

package/widgets/registry.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Plugin widget registry.
+ *
+ * Maintains a static map of plugin widget React components (bundled plugins)
+ * and resolves widgets for a given slot based on plugin state.
+ *
+ * Third-party plugins without bundled React components can provide a `uiSpec`
+ * in their widget declaration, which gets rendered by `UiRenderer` via the
+ * `WidgetHost` component.
+ */
+import type { PluginInfo } from "../api/client-types-config";
+import type { PluginWidgetDeclaration, WidgetProps, WidgetSlot } from "./types";
+export { getWidgetComponent, registerBuiltinWidgets, registerWidgetComponent, } from "./registry-store";
+/**
+ * Public API for plugins outside app-core to append widget declarations to the
+ * built-in fallback list. Declarations appear in the sidebar when the runtime
+ * plugin snapshot isn't available or when the plugin is in the fallback set.
+ */
+export declare function registerBuiltinWidgetDeclarations(declarations: ReadonlyArray<PluginWidgetDeclaration>, options?: {
+    fallbackPluginIds?: ReadonlyArray<string>;
+}): void;
+export declare const BUILTIN_WIDGET_DECLARATIONS: PluginWidgetDeclaration[];
+/** Minimal plugin state needed for widget resolution. */
+export type WidgetPluginState = Pick<PluginInfo, "id" | "enabled" | "isActive">;
+interface ResolvedWidget {
+    declaration: PluginWidgetDeclaration;
+    Component: React.ComponentType<WidgetProps> | null;
+}
+/**
+ * Resolve all enabled widgets for a slot.
+ *
+ * Merges built-in declarations with any server-provided declarations
+ * (from PluginInfo.widgets), deduplicating by declaration ID.
+ */
+export declare function resolveWidgetsForSlot(slot: WidgetSlot, plugins: readonly WidgetPluginState[], serverDeclarations?: readonly PluginWidgetDeclaration[]): ResolvedWidget[];
+import type { ChatSidebarPluginState } from "../components/chat/widgets/types";
+export declare function resolveChatSidebarWidgets(plugins: readonly ChatSidebarPluginState[]): {
+    id: string;
+    pluginId: string;
+    order: number;
+    defaultEnabled: boolean;
+    Component: import("react").ComponentType<WidgetProps>;
+}[];
+//# sourceMappingURL=registry.d.ts.map

package/widgets/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAM7D,OAAO,KAAK,EAAE,uBAAuB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEhF,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,kBAAkB,CAAC;AAqB1B;;;;GAIG;AACH,wBAAgB,iCAAiC,CAC/C,YAAY,EAAE,aAAa,CAAC,uBAAuB,CAAC,EACpD,OAAO,CAAC,EAAE;IAAE,iBAAiB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,GACtD,IAAI,CASN;AAOD,eAAO,MAAM,2BAA2B,EAAE,uBAAuB,EAiDhE,CAAC;AAIF,yDAAyD;AACzD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAoBhF,UAAU,cAAc;IACtB,WAAW,EAAE,uBAAuB,CAAC;IACrC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACpD;AAqCD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,SAAS,iBAAiB,EAAE,EACrC,kBAAkB,CAAC,EAAE,SAAS,uBAAuB,EAAE,GACtD,cAAc,EAAE,CAgDlB;AAMD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAE/E,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE;;;;;;IAU3C"}

package/widgets/registry.js

@@ -0,0 +1,177 @@
+/**
+ * Plugin widget registry.
+ *
+ * Maintains a static map of plugin widget React components (bundled plugins)
+ * and resolves widgets for a given slot based on plugin state.
+ *
+ * Third-party plugins without bundled React components can provide a `uiSpec`
+ * in their widget declaration, which gets rendered by `UiRenderer` via the
+ * `WidgetHost` component.
+ */
+import { getWidgetComponent, registerWidgetComponent, seedLegacyWidgets, } from "./registry-store.js";
+export { getWidgetComponent, registerBuiltinWidgets, registerWidgetComponent, } from "./registry-store.js";
+// -- Bundled widget component imports ----------------------------------------
+import { MusicLibraryCharacterWidget } from "../components/character/MusicLibraryCharacterWidget.js";
+import { AGENT_ORCHESTRATOR_PLUGIN_WIDGETS } from "../components/chat/widgets/agent-orchestrator.js";
+import { BROWSER_STATUS_WIDGET } from "../components/chat/widgets/browser-status.js";
+import { MUSIC_PLAYER_WIDGET } from "../components/chat/widgets/music-player.js";
+import { TODO_PLUGIN_WIDGETS } from "../components/chat/widgets/todo.js";
+// -- Seed bundled widgets into the registry ----------------------------------
+seedLegacyWidgets(AGENT_ORCHESTRATOR_PLUGIN_WIDGETS);
+seedLegacyWidgets(TODO_PLUGIN_WIDGETS);
+seedLegacyWidgets([BROWSER_STATUS_WIDGET, MUSIC_PLAYER_WIDGET]);
+registerWidgetComponent("music-library", "music-library.playlists", MusicLibraryCharacterWidget);
+/**
+ * Public API for plugins outside app-core to append widget declarations to the
+ * built-in fallback list. Declarations appear in the sidebar when the runtime
+ * plugin snapshot isn't available or when the plugin is in the fallback set.
+ */
+export function registerBuiltinWidgetDeclarations(declarations, options) {
+    for (const decl of declarations) {
+        BUILTIN_WIDGET_DECLARATIONS.push(decl);
+    }
+    if (options?.fallbackPluginIds) {
+        for (const id of options.fallbackPluginIds) {
+            BUILTIN_WIDGET_FALLBACK_PLUGIN_IDS.add(id);
+        }
+    }
+}
+// -- Built-in widget declarations --------------------------------------------
+// These are the widget declarations for bundled plugins. They mirror what
+// the server will eventually provide via GET /api/plugins, but are also
+// available client-side for zero-config rendering.
+export const BUILTIN_WIDGET_DECLARATIONS = [
+    // Agent Orchestrator — app runs
+    {
+        id: "agent-orchestrator.apps",
+        pluginId: "agent-orchestrator",
+        slot: "chat-sidebar",
+        label: "Apps",
+        icon: "Activity",
+        order: 150,
+        defaultEnabled: true,
+    },
+    // Agent Orchestrator — activity
+    {
+        id: "agent-orchestrator.activity",
+        pluginId: "agent-orchestrator",
+        slot: "chat-sidebar",
+        label: "Activity",
+        icon: "Activity",
+        order: 300,
+        defaultEnabled: true,
+    },
+    // Browser workspace status — surfaces /browser state in the right rail.
+    {
+        id: BROWSER_STATUS_WIDGET.id,
+        pluginId: BROWSER_STATUS_WIDGET.pluginId,
+        slot: "chat-sidebar",
+        label: "Browser",
+        icon: "Globe",
+        order: BROWSER_STATUS_WIDGET.order,
+        defaultEnabled: BROWSER_STATUS_WIDGET.defaultEnabled,
+    },
+    {
+        id: MUSIC_PLAYER_WIDGET.id,
+        pluginId: MUSIC_PLAYER_WIDGET.pluginId,
+        slot: "chat-sidebar",
+        label: "Music",
+        icon: "Music",
+        order: MUSIC_PLAYER_WIDGET.order,
+        defaultEnabled: MUSIC_PLAYER_WIDGET.defaultEnabled,
+    },
+    {
+        id: "music-library.playlists",
+        pluginId: "music-library",
+        slot: "character",
+        label: "Music Library",
+        icon: "ListMusic",
+        order: 250,
+        defaultEnabled: true,
+    },
+];
+/**
+ * Some bundled widgets intentionally stay visible even when the runtime plugin
+ * snapshot omits their feature IDs because the UI has compat-backed data
+ * sources for them. Generic todo widgets do not qualify here — Eliza does not
+ * ship a runtime todo plugin, and leaving the fallback enabled crowds out the
+ * LifeOps-first sidebar with a stale generic tasks panel.
+ */
+const BUILTIN_WIDGET_FALLBACK_PLUGIN_IDS = new Set([
+    "agent-orchestrator",
+    // Wallet + browser-workspace are core app-core surfaces, not separately
+    // loadable plugins, so their widgets must render even when the runtime
+    // plugin snapshot doesn't list them as plugins.
+    "wallet",
+    "browser-workspace",
+]);
+const ALWAYS_VISIBLE_BUILTIN_WIDGET_PLUGIN_IDS = new Set(["music-player"]);
+function isWidgetEnabled(declaration, plugins, source) {
+    if (source === "builtin" &&
+        declaration.defaultEnabled !== false &&
+        ALWAYS_VISIBLE_BUILTIN_WIDGET_PLUGIN_IDS.has(declaration.pluginId)) {
+        return true;
+    }
+    if (plugins.length === 0) {
+        return (declaration.defaultEnabled !== false &&
+            (source !== "builtin" ||
+                BUILTIN_WIDGET_FALLBACK_PLUGIN_IDS.has(declaration.pluginId)));
+    }
+    const plugin = plugins.find((p) => p.id === declaration.pluginId);
+    if (!plugin) {
+        return (source === "builtin" &&
+            declaration.defaultEnabled !== false &&
+            BUILTIN_WIDGET_FALLBACK_PLUGIN_IDS.has(declaration.pluginId));
+    }
+    return plugin.isActive === true || plugin.enabled !== false;
+}
+/**
+ * Resolve all enabled widgets for a slot.
+ *
+ * Merges built-in declarations with any server-provided declarations
+ * (from PluginInfo.widgets), deduplicating by declaration ID.
+ */
+export function resolveWidgetsForSlot(slot, plugins, serverDeclarations) {
+    // Merge: server declarations override built-in by id
+    const declarationMap = new Map();
+    for (const decl of BUILTIN_WIDGET_DECLARATIONS) {
+        if (decl.slot === slot) {
+            declarationMap.set(`${decl.pluginId}/${decl.id}`, {
+                declaration: decl,
+                source: "builtin",
+            });
+        }
+    }
+    if (serverDeclarations) {
+        for (const decl of serverDeclarations) {
+            if (decl.slot === slot) {
+                declarationMap.set(`${decl.pluginId}/${decl.id}`, {
+                    declaration: decl,
+                    source: "server",
+                });
+            }
+        }
+    }
+    const results = [];
+    for (const { declaration, source } of declarationMap.values()) {
+        if (!isWidgetEnabled(declaration, plugins, source))
+            continue;
+        const Component = getWidgetComponent(declaration.pluginId, declaration.id);
+        // Include if we have a React component OR a uiSpec fallback
+        if (Component || declaration.uiSpec) {
+            results.push({ declaration, Component: Component ?? null });
+        }
+    }
+    results.sort((a, b) => (a.declaration.order ?? 100) - (b.declaration.order ?? 100));
+    return results;
+}
+export function resolveChatSidebarWidgets(plugins) {
+    return resolveWidgetsForSlot("chat-sidebar", plugins).map((w) => ({
+        id: w.declaration.id,
+        pluginId: w.declaration.pluginId,
+        order: w.declaration.order ?? 100,
+        defaultEnabled: w.declaration.defaultEnabled !== false,
+        // biome-ignore lint/style/noNonNullAssertion: chat-sidebar widgets always have bundled components
+        Component: w.Component,
+    }));
+}

package/widgets/types.d.ts

@@ -0,0 +1,39 @@
+import type { PluginWidgetDeclaration as CorePluginWidgetDeclaration } from "@elizaos/core";
+import type { ComponentType } from "react";
+import type { PluginInfo } from "../api/client-types-config";
+import type { UiSpec } from "../config/ui-spec";
+import type { ActivityEvent } from "../hooks/useActivityEvents";
+/** Named injection points where plugin widgets can render. */
+export type WidgetSlot = "chat-sidebar" | "chat-inline" | "wallet" | "browser" | "heartbeats" | "character" | "settings" | "nav-page" | "automations";
+/**
+ * Serializable widget metadata declared by a plugin.
+ *
+ * The canonical shape lives in `@elizaos/core` (`PluginWidgetDeclaration`)
+ * so plugins can self-declare without depending on app-core. The client
+ * surface adds an optional `uiSpec` for plugins without bundled React
+ * components.
+ */
+export interface PluginWidgetDeclaration extends CorePluginWidgetDeclaration {
+    /** Declarative UI spec — fallback for plugins without bundled React components. */
+    uiSpec?: UiSpec;
+}
+/** Props passed to every widget React component. */
+export interface WidgetProps {
+    pluginId: string;
+    pluginState?: PluginInfo;
+    events?: ActivityEvent[];
+    clearEvents?: () => void;
+}
+/**
+ * Client-side registration mapping a widget declaration to a React component.
+ * Bundled plugins register these statically; third-party plugins rely on uiSpec.
+ */
+export interface WidgetRegistration {
+    /** Must match `PluginWidgetDeclaration.id`. */
+    declarationId: string;
+    /** Must match `PluginWidgetDeclaration.pluginId`. */
+    pluginId: string;
+    /** The React component to render. */
+    Component: ComponentType<WidgetProps>;
+}
+//# sourceMappingURL=types.d.ts.map

package/widgets/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,IAAI,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,8DAA8D;AAC9D,MAAM,MAAM,UAAU,GAClB,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,WAAW,GACX,UAAU,GACV,UAAU,GACV,aAAa,CAAC;AAElB;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,2BAA2B;IAC1E,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oDAAoD;AACpD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC"}

package/widgets/types.js

@@ -0,0 +1 @@
+export {};

package/widgets/useChatSidebarVisibility.d.ts

@@ -0,0 +1,16 @@
+/**
+ * React hook over the chat-sidebar widget visibility overrides.
+ *
+ * - Reads the persisted state from localStorage on mount.
+ * - Subscribes to cross-window `storage` events so two tabs stay in sync.
+ * - Persists every mutation immediately and bumps internal state.
+ */
+import { type VisibilityCandidate } from "./visibility";
+export interface ChatSidebarVisibilityHook {
+    overrides: Record<string, boolean>;
+    isVisible(candidate: VisibilityCandidate): boolean;
+    setVisible(candidate: VisibilityCandidate, next: boolean): void;
+    reset(): void;
+}
+export declare function useChatSidebarVisibility(): ChatSidebarVisibilityHook;
+//# sourceMappingURL=useChatSidebarVisibility.d.ts.map

package/widgets/useChatSidebarVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatSidebarVisibility.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/useChatSidebarVisibility.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAKL,KAAK,mBAAmB,EAGzB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,SAAS,CAAC,SAAS,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACnD,UAAU,CAAC,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAChE,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,wBAAwB,IAAI,yBAAyB,CAwDpE"}

package/widgets/useChatSidebarVisibility.js

@@ -0,0 +1,54 @@
+/**
+ * React hook over the chat-sidebar widget visibility overrides.
+ *
+ * - Reads the persisted state from localStorage on mount.
+ * - Subscribes to cross-window `storage` events so two tabs stay in sync.
+ * - Persists every mutation immediately and bumps internal state.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { CHAT_SIDEBAR_VISIBILITY_STORAGE_KEY, isWidgetVisible, loadChatSidebarVisibility, saveChatSidebarVisibility, widgetVisibilityKey, } from "./visibility.js";
+export function useChatSidebarVisibility() {
+    const [state, setState] = useState(() => loadChatSidebarVisibility());
+    // Cross-tab sync: another window writing to the same key updates this one.
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        function onStorage(event) {
+            if (event.key !== CHAT_SIDEBAR_VISIBILITY_STORAGE_KEY)
+                return;
+            setState(loadChatSidebarVisibility());
+        }
+        window.addEventListener("storage", onStorage);
+        return () => window.removeEventListener("storage", onStorage);
+    }, []);
+    const setVisible = useCallback((candidate, next) => {
+        setState((prev) => {
+            const key = widgetVisibilityKey(candidate.pluginId, candidate.id);
+            const defaultEnabled = candidate.defaultEnabled !== false;
+            // If the requested state matches the default, drop the explicit
+            // override so future default flips propagate naturally.
+            const nextOverrides = { ...prev.overrides };
+            if (next === defaultEnabled) {
+                delete nextOverrides[key];
+            }
+            else {
+                nextOverrides[key] = next;
+            }
+            const nextState = { overrides: nextOverrides };
+            saveChatSidebarVisibility(nextState);
+            return nextState;
+        });
+    }, []);
+    const reset = useCallback(() => {
+        const nextState = { overrides: {} };
+        saveChatSidebarVisibility(nextState);
+        setState(nextState);
+    }, []);
+    const isVisible = useCallback((candidate) => isWidgetVisible(candidate, state.overrides), [state.overrides]);
+    return {
+        overrides: state.overrides,
+        isVisible,
+        setVisible,
+        reset,
+    };
+}

package/widgets/visibility.d.ts

@@ -0,0 +1,55 @@
+/**
+ * User-controlled visibility overrides for `chat-sidebar` widgets.
+ *
+ * Layered on top of the existing two-stage gate in
+ * {@link ./registry.ts | resolveWidgetsForSlot}:
+ *
+ *   1. Plugin enabled?  →  declaration.defaultEnabled  →  user override
+ *
+ * The override layer is per-user, persisted to localStorage. When a widget's
+ * id is absent from the override map we fall back to `declaration.defaultEnabled`,
+ * so default flips don't reset users who never touched the toggle.
+ *
+ * Wallet/browser widgets that have not yet shipped get the same treatment:
+ * once their plugin loads them, they appear with `defaultEnabled` and the user
+ * can hide them via the same panel.
+ */
+declare const CHAT_SIDEBAR_VISIBILITY_STORAGE_KEY = "eliza:chat-sidebar:visibility";
+/**
+ * Synthetic widget id reserved for the bespoke `AppsSection` rendered in
+ * {@link ../components/chat/TasksEventsPanel.tsx}. Lets the same edit panel
+ * toggle Apps even though it's not a registry widget.
+ */
+export declare const APPS_SECTION_VISIBILITY_KEY = "app-core/apps.section";
+export interface WidgetVisibilityState {
+    /**
+     * Map of `${pluginId}/${declarationId}` → boolean.
+     * Absent key means "use the declaration's defaultEnabled".
+     */
+    overrides: Record<string, boolean>;
+}
+export interface VisibilityCandidate {
+    pluginId: string;
+    id: string;
+    defaultEnabled?: boolean;
+}
+export declare function widgetVisibilityKey(pluginId: string, id: string): string;
+export declare function loadChatSidebarVisibility(): WidgetVisibilityState;
+export declare function saveChatSidebarVisibility(state: WidgetVisibilityState): void;
+/**
+ * Decide whether a widget should be visible right now.
+ * - Explicit `true` override → visible.
+ * - Explicit `false` override → hidden.
+ * - No override → fall back to `defaultEnabled` (defaults to `true` when omitted,
+ *   matching the registry's `defaultEnabled !== false` convention).
+ */
+export declare function isWidgetVisible(candidate: VisibilityCandidate, overrides: Record<string, boolean>): boolean;
+/**
+ * Filter a list of resolved widgets through the override map. Preserves the
+ * input order so the registry's `order` field continues to drive layout.
+ */
+export declare function applyChatSidebarVisibility<T extends {
+    declaration: VisibilityCandidate;
+}>(resolved: readonly T[], overrides: Record<string, boolean>): T[];
+export { CHAT_SIDEBAR_VISIBILITY_STORAGE_KEY };
+//# sourceMappingURL=visibility.d.ts.map

package/widgets/visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/visibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,QAAA,MAAM,mCAAmC,kCAAkC,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,0BAA0B,CAAC;AAEnE,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAExE;AAyBD,wBAAgB,yBAAyB,IAAI,qBAAqB,CAUjE;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAY5E;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,mBAAmB,EAC9B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACjC,OAAO,CAMT;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,CAAC,SAAS;IAAE,WAAW,EAAE,mBAAmB,CAAA;CAAE,EAC9C,QAAQ,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,CAIjE;AAED,OAAO,EAAE,mCAAmC,EAAE,CAAC"}