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

package/components/views/ShellViewAgentSurface.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ShellViewAgentSurface — makes a shell-rendered builtin view (settings,
+ * character, …) agent-controllable, the same way DynamicViewLoader does for
+ * dynamically-loaded plugin bundles.
+ *
+ * Builtin views are rendered directly by the app shell rather than through the
+ * bundle loader, so they don't get the loader's AgentSurfaceProvider + interact
+ * bridge for free. Wrapping a page in this component gives it a registry, the
+ * indicator overlay, and a WS interact handler — so the agent can list-elements
+ * / agent-click / agent-fill it by id exactly like a plugin view. The page's
+ * controls opt in with `useAgentElement`.
+ */
+import { type ReactNode } from "react";
+import { type AgentViewType } from "../../agent-surface";
+export interface ShellViewAgentSurfaceProps {
+    /** Stable builtin view id (matches the entry in builtin-views.ts). */
+    viewId: string;
+    viewType?: AgentViewType;
+    children: ReactNode;
+}
+export declare function ShellViewAgentSurface({ viewId, viewType, children, }: ShellViewAgentSurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellViewAgentSurface.d.ts.map

package/components/views/ShellViewAgentSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellViewAgentSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ShellViewAgentSurface.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAIL,KAAK,aAAa,EAInB,MAAM,qBAAqB,CAAC;AAQ7B,MAAM,WAAW,0BAA0B;IACzC,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAgB,EAChB,QAAQ,GACT,EAAE,0BAA0B,2CAqE5B"}

package/components/views/ShellViewAgentSurface.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ShellViewAgentSurface — makes a shell-rendered builtin view (settings,
+ * character, …) agent-controllable, the same way DynamicViewLoader does for
+ * dynamically-loaded plugin bundles.
+ *
+ * Builtin views are rendered directly by the app shell rather than through the
+ * bundle loader, so they don't get the loader's AgentSurfaceProvider + interact
+ * bridge for free. Wrapping a page in this component gives it a registry, the
+ * indicator overlay, and a WS interact handler — so the agent can list-elements
+ * / agent-click / agent-fill it by id exactly like a plugin view. The page's
+ * controls opt in with `useAgentElement`.
+ */
+import { useEffect, useRef } from "react";
+import { AgentElementOverlay, AgentSurfaceElementReporter, AgentSurfaceProvider, getViewRegistry, handleAgentSurfaceCapability, isAgentSurfaceCapability, } from "../../agent-surface/index.js";
+import { registerViewInteractHandler } from "./view-interact-registry.js";
+function idParam(params) {
+    const id = params?.agentId ?? params?.id;
+    return typeof id === "string" ? id : null;
+}
+export function ShellViewAgentSurface({ viewId, viewType = "gui", children, }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        return registerViewInteractHandler(viewId, viewType, async (capability, params) => {
+            const registry = getViewRegistry(viewId, viewType);
+            if (isAgentSurfaceCapability(capability)) {
+                if (!registry) {
+                    throw new Error(`Shell view "${viewId}" has no agent surface registered yet`);
+                }
+                return handleAgentSurfaceCapability(registry, capability, params);
+            }
+            switch (capability) {
+                case "get-text":
+                    return containerRef.current?.innerText ?? "";
+                case "get-state":
+                    return registry && registry.size() > 0 ? registry.snapshot() : {};
+                case "focus-element": {
+                    const id = idParam(params);
+                    if (id && registry) {
+                        const r = registry.focus(id);
+                        return { focused: r.ok, id, reason: r.reason };
+                    }
+                    return { focused: false, reason: "agentId required" };
+                }
+                case "click-element": {
+                    const id = idParam(params);
+                    if (id && registry) {
+                        const r = registry.click(id);
+                        return { clicked: r.ok, id, reason: r.reason };
+                    }
+                    return { clicked: false, reason: "agentId required" };
+                }
+                case "fill-input": {
+                    const id = idParam(params);
+                    const value = typeof params?.value === "string" ? params.value : null;
+                    if (value === null) {
+                        return { filled: false, reason: "value must be a string" };
+                    }
+                    if (id && registry) {
+                        const r = registry.fill(id, value);
+                        return { filled: r.ok, id, reason: r.reason, value };
+                    }
+                    return { filled: false, reason: "agentId required" };
+                }
+                default:
+                    throw new Error(`Shell view "${viewId}" does not support capability "${capability}"`);
+            }
+        });
+    }, [viewId, viewType]);
+    return (_jsxs(AgentSurfaceProvider, { viewId: viewId, viewType: viewType, children: [_jsx("div", { ref: containerRef, className: "contents", children: children }), _jsx(AgentElementOverlay, {}), _jsx(AgentSurfaceElementReporter, {})] }));
+}

package/components/views/TerminalPluginView.d.ts

@@ -0,0 +1,10 @@
+interface TerminalPluginViewProps {
+    id: string;
+    label: string;
+    description?: string;
+    commands?: string[];
+    endpoints?: string[];
+}
+export declare function TerminalPluginView({ id, label, description, commands, endpoints, }: TerminalPluginViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TerminalPluginView.d.ts.map

package/components/views/TerminalPluginView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPluginView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/TerminalPluginView.tsx"],"names":[],"mappings":"AAWA,UAAU,uBAAuB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AA0DD,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,KAAK,EACL,WAAW,EACX,QAAa,EACb,SAAc,GACf,EAAE,uBAAuB,2CA0NzB"}

package/components/views/TerminalPluginView.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, CheckCircle2, CircleAlert, Network, Play, SquareTerminal, } from "lucide-react";
+import { useState } from "react";
+import { fetchWithCsrf } from "../../api/csrf-client.js";
+const shellStyle = {
+    minHeight: "100vh",
+    background: "#08111f",
+    color: "#d6e4ef",
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+    padding: 20,
+};
+const panelStyle = {
+    border: "1px solid rgba(148,163,184,0.22)",
+    borderRadius: 8,
+    background: "#0d1828",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
+    overflow: "hidden",
+};
+const commandButtonStyle = {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    gap: 10,
+    border: "1px solid rgba(148,163,184,0.16)",
+    borderRadius: 6,
+    background: "#101d2d",
+    color: "#d6e4ef",
+    cursor: "pointer",
+    font: "inherit",
+    minHeight: 38,
+    padding: "0 10px",
+    textAlign: "left",
+};
+const chipStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    border: "1px solid rgba(148,163,184,0.2)",
+    borderRadius: 999,
+    color: "#b6c9d8",
+    background: "#101d2d",
+    padding: "5px 9px",
+    fontSize: 12,
+    lineHeight: 1,
+};
+const sectionHeaderStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    color: "#8bd3ff",
+    fontSize: 12,
+    textTransform: "uppercase",
+    letterSpacing: 0,
+};
+export function TerminalPluginView({ id, label, description, commands = [], endpoints = [], }) {
+    const resolvedCommands = commands.length
+        ? commands
+        : ["get-state", "get-text", "refresh"];
+    const [transcript, setTranscript] = useState([]);
+    const state = {
+        viewType: "tui",
+        viewId: id,
+        label,
+        commandCount: resolvedCommands.length,
+        endpointCount: endpoints.length,
+    };
+    const runCommand = async (command) => {
+        const lineId = Date.now();
+        setTranscript((lines) => [
+            ...lines,
+            { id: lineId, command, status: "pending", output: "running..." },
+        ]);
+        window.dispatchEvent(new CustomEvent("eliza:tui-command", {
+            detail: { viewId: id, command },
+        }));
+        try {
+            const response = await fetchWithCsrf(`/api/views/${encodeURIComponent(id)}/interact?viewType=tui`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ capability: command, timeoutMs: 5_000 }),
+            });
+            const text = await response.text();
+            let parsed = text;
+            if (text) {
+                try {
+                    parsed = JSON.parse(text);
+                }
+                catch {
+                    parsed = text;
+                }
+            }
+            if (!response.ok) {
+                throw new Error(typeof parsed === "object" && parsed !== null && "error" in parsed
+                    ? String(parsed.error)
+                    : response.statusText);
+            }
+            setTranscript((lines) => lines.map((line) => line.id === lineId
+                ? {
+                    ...line,
+                    status: "ok",
+                    output: JSON.stringify(parsed, null, 2),
+                }
+                : line));
+        }
+        catch (error) {
+            setTranscript((lines) => lines.map((line) => line.id === lineId
+                ? {
+                    ...line,
+                    status: "error",
+                    output: error instanceof Error ? error.message : String(error),
+                }
+                : line));
+        }
+    };
+    return (_jsx("div", { "data-view-state": JSON.stringify(state), title: description, style: shellStyle, children: _jsxs("div", { style: panelStyle, children: [_jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 14,
+                        borderBottom: "1px solid rgba(148,163,184,0.18)",
+                        padding: 14,
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("div", { style: {
+                                        display: "grid",
+                                        placeItems: "center",
+                                        width: 38,
+                                        height: 38,
+                                        borderRadius: 8,
+                                        background: "#142238",
+                                        color: "#8bd3ff",
+                                    }, children: _jsx(SquareTerminal, { size: 20, "aria-hidden": "true" }) }), _jsxs("div", { children: [_jsx("div", { style: { color: "#eef6ff", fontWeight: 700 }, children: label }), _jsxs("div", { style: { color: "#7890a4", fontSize: 12 }, children: ["elizaos://", id, " --type=tui"] })] })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: [_jsxs("span", { style: chipStyle, children: [_jsx(Activity, { size: 13, "aria-hidden": "true" }), resolvedCommands.length] }), _jsxs("span", { style: chipStyle, children: [_jsx(Network, { size: 13, "aria-hidden": "true" }), endpoints.length] })] })] }), _jsxs("div", { style: { padding: 14 }, children: [_jsxs("div", { style: { ...sectionHeaderStyle, marginBottom: 10 }, children: [_jsx(Activity, { size: 14, "aria-hidden": "true" }), "capabilities"] }), _jsx("div", { style: {
+                                display: "grid",
+                                gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                                gap: 8,
+                            }, children: resolvedCommands.map((command, index) => (_jsxs("button", { type: "button", "data-terminal-command": command, "aria-label": `Run ${command}`, title: `Run ${command} (${index + 1})`, style: commandButtonStyle, onClick: () => {
+                                    void runCommand(command);
+                                }, children: [_jsx(Play, { size: 14, "aria-hidden": "true", style: { color: "#8bd3ff" } }), _jsx("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: command }), _jsx("span", { style: { color: "#7890a4", marginLeft: "auto" }, children: index + 1 })] }, command))) }), endpoints.length > 0 && (_jsxs("div", { style: { marginTop: 18 }, children: [_jsxs("div", { style: { ...sectionHeaderStyle, marginBottom: 10 }, children: [_jsx(Network, { size: 14, "aria-hidden": "true" }), "endpoints"] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: endpoints.map((endpoint) => (_jsxs("span", { style: chipStyle, children: [_jsx("span", { style: { color: "#8bd3ff" }, children: "GET" }), endpoint] }, endpoint))) })] })), transcript.length > 0 && (_jsxs("div", { style: { marginTop: 18 }, children: [_jsxs("div", { style: { ...sectionHeaderStyle, marginBottom: 10 }, children: [_jsx(SquareTerminal, { size: 14, "aria-hidden": "true" }), "output"] }), transcript.map((line) => (_jsxs("pre", { "data-terminal-output": line.status, style: {
+                                        margin: "8px 0 0",
+                                        border: "1px solid rgba(148,163,184,0.16)",
+                                        borderRadius: 6,
+                                        background: "#07101d",
+                                        padding: 10,
+                                        overflowX: "auto",
+                                        whiteSpace: "pre-wrap",
+                                        color: line.status === "error" ? "#ffb4a8" : "#d6e4ef",
+                                    }, children: [line.status === "error" ? (_jsx(CircleAlert, { size: 14, "aria-hidden": "true" })) : (_jsx(CheckCircle2, { size: 14, "aria-hidden": "true" })), " ", "$ ", line.command, "\n", "[", line.status, "] ", line.output] }, line.id)))] }))] })] }) }));
+}

package/components/views/ViewIcon.d.ts

@@ -0,0 +1,7 @@
+export declare function ViewIcon({ icon, label, id, className, }: {
+    icon?: string | null;
+    label?: string;
+    id?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewIcon.d.ts.map

package/components/views/ViewIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/ViewIcon.tsx"],"names":[],"mappings":"AAuIA,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,EAAE,EACF,SAAqB,GACtB,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAeA"}

package/components/views/ViewIcon.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Activity, AppWindow, BarChart2, Bot, BrainCircuit, CalendarDays, Clock, Database, Focus, Gamepad2, Glasses, Heart, ImageIcon, Inbox, KeyRound, Layers, LayoutDashboard, LayoutGrid, ListTodo, Mail, MessageSquare, Monitor, Network, Package, Phone, Rss, Shield, ShoppingBag, Smartphone, SquareTerminal, Target, Terminal, TestTube2, TrendingUp, Users, UsersRound, Wallet, Zap, } from "lucide-react";
+const ICONS = {
+    Activity,
+    AppWindow,
+    BarChart2,
+    Bot,
+    BrainCircuit,
+    CalendarDays,
+    Clock,
+    Database,
+    Focus,
+    Gamepad2,
+    Glasses,
+    Heart,
+    ImageIcon,
+    Inbox,
+    KeyRound,
+    Layers,
+    LayoutDashboard,
+    LayoutGrid,
+    ListTodo,
+    Mail,
+    MessageSquare,
+    Monitor,
+    Network,
+    Package,
+    Phone,
+    Rss,
+    Shield,
+    ShoppingBag,
+    Smartphone,
+    SquareTerminal,
+    Target,
+    Terminal,
+    TestTube2,
+    TrendingUp,
+    Users,
+    UsersRound,
+    Wallet,
+    Zap,
+};
+// Keyword → icon, so a view with no (or an unrecognized) icon name still gets a
+// distinct, meaningful glyph derived from its label/id instead of the generic
+// grid fallback. First match wins; order matters.
+const KEYWORD_ICONS = [
+    [/calendar|schedule|agenda/, CalendarDays],
+    [/wallet/, Wallet],
+    [/financ|budget|spend|money|portfolio/, TrendingUp],
+    [/health|fitness|wellness|sleep/, Heart],
+    [/todo|checklist|task list/, ListTodo],
+    [/goal|objective|target/, Target],
+    [/focus|blocker|deep work|distraction/, Focus],
+    [/inbox/, Inbox],
+    [/mail|email/, Mail],
+    [/message|sms|imessage|whatsapp|telegram/, MessageSquare],
+    [/contact|address book/, UsersRound],
+    [/relationship|network|graph|connection/, Network],
+    [/phone|call|dial/, Phone],
+    [/companion|avatar|persona/, Bot],
+    [/life ?ops|daily brief|assistant|dashboard/, LayoutDashboard],
+    [/polymarket|hyperliquid|trade|trading|market|perp|swap/, TrendingUp],
+    [/shop|store|commerce|product|cart/, ShoppingBag],
+    [/steward/, Shield],
+    [/vincent|delegat|signer|\bkey\b|credential/, KeyRound],
+    [/screen ?share|display|monitor/, Monitor],
+    [/fine ?tun|training|optimiz/, BrainCircuit],
+    [/model|test/, TestTube2],
+    [/vector|database|memory|embedding|knowledge/, Database],
+    [/trajector|\blog/, Activity],
+    [/feed|social|alpha/, Rss],
+    [/glass|facewear|smart ?glass|\bxr\b|spatial|vr\b/, Glasses],
+    [/clawville|defense|arcade|\bgame/, Gamepad2],
+    [/coordinat|orchestrat|builder|maker|coding|workflow/, Bot],
+    [/plugin|catalog|apps?\b/, LayoutGrid],
+];
+function guessIconFromText(label, id) {
+    const hay = `${label ?? ""} ${id ?? ""}`.toLowerCase();
+    for (const [re, Icon] of KEYWORD_ICONS) {
+        if (re.test(hay))
+            return Icon;
+    }
+    return LayoutGrid;
+}
+function isImageIcon(value) {
+    return (value.startsWith("data:image/") ||
+        value.startsWith("/") ||
+        value.startsWith("http://") ||
+        value.startsWith("https://"));
+}
+export function ViewIcon({ icon, label, id, className = "h-5 w-5", }) {
+    if (icon && isImageIcon(icon)) {
+        return (_jsx("img", { src: icon, alt: "", className: className, loading: "lazy", "aria-hidden": "true" }));
+    }
+    const Icon = (icon ? ICONS[icon] : undefined) ?? guessIconFromText(label, id);
+    return _jsx(Icon, { className: className, "aria-hidden": "true" });
+}

package/components/views/view-interact-registry.d.ts

@@ -0,0 +1,32 @@
+/**
+ * view-interact-registry — bridges WS `view:interact` messages to loaded view modules.
+ *
+ * DynamicViewLoader registers an interact handler when a view module is loaded
+ * and unregisters it on unmount.  The startup-phase WS listener calls
+ * `dispatchViewInteract` when it receives a `view:interact` message from the
+ * server, which routes it to the correct handler and sends the result back.
+ */
+import type { AgentViewType } from "../../agent-surface";
+type InteractHandler = (capability: string, params: Record<string, unknown> | undefined) => Promise<unknown>;
+type ViewType = AgentViewType;
+export declare function registerViewInteractHandler(viewId: string, viewType: ViewType, handler: InteractHandler): () => void;
+/**
+ * Called by the startup-phase WS listener when a `view:interact` message
+ * arrives.  Routes to the correct handler and sends the result back via WS.
+ */
+export declare function dispatchViewInteract(viewId: string, viewType: ViewType | undefined, capability: string, params: Record<string, unknown> | undefined, requestId: string): Promise<void>;
+/**
+ * Invoke a mounted view's interact handler and RETURN its result — the same path
+ * `dispatchViewInteract` runs, minus the WS round-trip. This is what lets the
+ * agent (and devtools / e2e) read and drive any view's agent surface directly:
+ * `__ELIZA_VIEW_INTERACT__("settings","gui","list-elements",{})`,
+ * `…("agent-fill",{ id, value })`, `…("agent-click",{ id })`.
+ */
+export declare function invokeViewInteract(viewId: string, viewType: ViewType | undefined, capability: string, params?: Record<string, unknown>): Promise<unknown>;
+declare global {
+    interface Window {
+        __ELIZA_VIEW_INTERACT__?: typeof invokeViewInteract;
+    }
+}
+export {};
+//# sourceMappingURL=view-interact-registry.d.ts.map

package/components/views/view-interact-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-interact-registry.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/view-interact-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,KAAK,eAAe,GAAG,CACrB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,KACxC,OAAO,CAAC,OAAO,CAAC,CAAC;AAEtB,KAAK,QAAQ,GAAG,aAAa,CAAC;AAW9B,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAe,GACvB,MAAM,IAAI,CAQZ;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,CACxC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAC9B,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,IAAI,CAAC,CAmCf;AAED;;;;;;GAMG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAC9B,UAAU,EAAE,MAAM,EAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,OAAO,CAAC,OAAO,CAAC,CAQlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,uBAAuB,CAAC,EAAE,OAAO,kBAAkB,CAAC;KACrD;CACF"}

package/components/views/view-interact-registry.js

@@ -0,0 +1,81 @@
+/**
+ * view-interact-registry — bridges WS `view:interact` messages to loaded view modules.
+ *
+ * DynamicViewLoader registers an interact handler when a view module is loaded
+ * and unregisters it on unmount.  The startup-phase WS listener calls
+ * `dispatchViewInteract` when it receives a `view:interact` message from the
+ * server, which routes it to the correct handler and sends the result back.
+ */
+import { client } from "../../api/index.js";
+function handlerKey(viewId, viewType) {
+    return `${viewType}:${viewId}`;
+}
+/** viewType:viewId → handler registered by the mounted DynamicViewLoader. */
+const handlers = new Map();
+const handledRequestIds = new Map();
+const HANDLED_REQUEST_TTL_MS = 60_000;
+export function registerViewInteractHandler(viewId, viewType, handler) {
+    const key = handlerKey(viewId, viewType);
+    handlers.set(key, handler);
+    return () => {
+        if (handlers.get(key) === handler) {
+            handlers.delete(key);
+        }
+    };
+}
+/**
+ * Called by the startup-phase WS listener when a `view:interact` message
+ * arrives.  Routes to the correct handler and sends the result back via WS.
+ */
+export async function dispatchViewInteract(viewId, viewType, capability, params, requestId) {
+    const resolvedViewType = viewType ?? "gui";
+    const handler = handlers.get(handlerKey(viewId, resolvedViewType));
+    if (!handler) {
+        // The API broadcasts view-interact requests to every connected shell.
+        // Clients that do not currently mount the target view must stay silent so
+        // they do not race the mounted client and resolve the request as failed.
+        return;
+    }
+    if (handledRequestIds.has(requestId)) {
+        return;
+    }
+    const timeout = setTimeout(() => {
+        handledRequestIds.delete(requestId);
+    }, HANDLED_REQUEST_TTL_MS);
+    timeout.unref?.();
+    handledRequestIds.set(requestId, timeout);
+    try {
+        const result = await handler(capability, params);
+        client.sendWsMessage({
+            type: "view:interact:result",
+            requestId,
+            success: true,
+            result,
+        });
+    }
+    catch (err) {
+        client.sendWsMessage({
+            type: "view:interact:result",
+            requestId,
+            success: false,
+            error: err instanceof Error ? err.message : String(err),
+        });
+    }
+}
+/**
+ * Invoke a mounted view's interact handler and RETURN its result — the same path
+ * `dispatchViewInteract` runs, minus the WS round-trip. This is what lets the
+ * agent (and devtools / e2e) read and drive any view's agent surface directly:
+ * `__ELIZA_VIEW_INTERACT__("settings","gui","list-elements",{})`,
+ * `…("agent-fill",{ id, value })`, `…("agent-click",{ id })`.
+ */
+export async function invokeViewInteract(viewId, viewType, capability, params) {
+    const handler = handlers.get(handlerKey(viewId, viewType ?? "gui"));
+    if (!handler) {
+        throw new Error(`No interact handler mounted for ${viewType ?? "gui"}:${viewId}`);
+    }
+    return handler(capability, params);
+}
+if (typeof window !== "undefined") {
+    window.__ELIZA_VIEW_INTERACT__ = invokeViewInteract;
+}

package/components/workspace/AppWorkspaceChrome.d.ts

@@ -1,62 +1,18 @@
-import { type JSX, type ReactNode } from "react";
-import { type PageScopedChatPaneProps } from "../pages/PageScopedChatPane.js";
-import type { PageScope } from "../pages/page-scoped-conversations.js";
-export declare const APP_WORKSPACE_CHROME_CHAT_STORAGE_KEY = "app-workspace-chrome:chat-collapsed";
-export declare const APP_WORKSPACE_CHROME_CHAT_WIDTH_STORAGE_KEY = "app-workspace-chrome:chat-width";
-interface AppWorkspaceChatChromeContextValue {
-    collapseChat: () => void;
-    openChat: () => void;
-    isChatOpen: boolean;
-}
-export declare function useAppWorkspaceChatChrome(): AppWorkspaceChatChromeContextValue | null;
-interface AppWorkspaceChatCollapseButtonProps {
-    testId?: string;
-}
-export declare function AppWorkspaceChatCollapseButton({ testId, }: AppWorkspaceChatCollapseButtonProps): JSX.Element | null;
+import type React from "react";
+import { type ReactNode } from "react";
 export interface AppWorkspaceChromeProps {
     /** Optional nav region rendered above the main pane. */
     nav?: ReactNode;
     /** Required main content area. */
     main: ReactNode;
-    /**
-     * Chat content for the right sidebar. When omitted a shared
-     * `<ChatView variant="default" />` is rendered, unless `chatScope` is set.
-     */
-    chat?: ReactNode;
-    /**
-     * Page-scoped assistant context for workspace pages whose right rail should
-     * explain and act within the current surface instead of the global chat.
-     */
-    chatScope?: PageScope;
-    /**
-     * Optional overrides forwarded into the shared page-scoped chat pane when
-     * `chatScope` is provided.
-     */
-    pageScopedChatPaneProps?: Omit<PageScopedChatPaneProps, "scope" | "footerActions">;
-    /**
-     * Controlled: current collapsed state.
-     * When provided, `onToggleChat` must also be provided.
-     */
-    chatCollapsed?: boolean;
-    /**
-     * Controlled: callback when the user toggles the sidebar.
-     * Receives the next collapsed boolean.
-     */
-    onToggleChat?: (next: boolean) => void;
-    /**
-     * Uncontrolled: initial collapsed state.
-     * Ignored when `chatCollapsed` is provided.
-     * Defaults to the value persisted in localStorage, then `false`.
-     */
-    chatDefaultCollapsed?: boolean;
-    /** Hide the default bottom-right collapse control when chat content owns it. */
-    hideCollapseButton?: boolean;
-    /** Disable the right chat rail for focused surfaces that own their own chat. */
-    chatDisabled?: boolean;
     /** data-testid applied to the root element. */
     testId?: string;
 }
-/** Pure-layout chrome: main pane + collapsible right-side chat sidebar. */
-export declare function AppWorkspaceChrome({ nav, main, chat, chatScope, pageScopedChatPaneProps, chatCollapsed: chatCollapsedProp, onToggleChat, chatDefaultCollapsed, hideCollapseButton, chatDisabled, testId, }: AppWorkspaceChromeProps): JSX.Element;
-export {};
+/**
+ * Pure-layout workspace chrome: an optional nav region above the main content
+ * pane, plus a mobile control to reveal the left sidebar. There is exactly one
+ * chat surface in the app — the global floating overlay — so the chrome carries
+ * no chat rail of its own (single codepath, per the architecture rules).
+ */
+export declare function AppWorkspaceChrome({ nav, main, testId, }: AppWorkspaceChromeProps): React.JSX.Element;
 //# sourceMappingURL=AppWorkspaceChrome.d.ts.map

package/components/workspace/AppWorkspaceChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppWorkspaceChrome.d.ts","sourceRoot":"","sources":["../../../../../../src/components/workspace/AppWorkspaceChrome.tsx"],"names":[],"mappings":"AAYA,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAEvE,eAAO,MAAM,qCAAqC,wCACX,CAAC;AACxC,eAAO,MAAM,2CAA2C,oCACrB,CAAC;AAOpC,UAAU,kCAAkC;IAC1C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB;AAKD,wBAAgB,yBAAyB,IAAI,kCAAkC,GAAG,IAAI,CAErF;AAED,UAAU,mCAAmC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,MAAsC,GACvC,EAAE,mCAAmC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgB1D;AA6GD,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,kCAAkC;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,OAAO,GAAG,eAAe,CAC1B,CAAC;IACF;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,uBAAuB,EACvB,aAAa,EAAE,iBAAiB,EAChC,YAAY,EACZ,oBAA4B,EAC5B,kBAA0B,EAC1B,YAAoB,EACpB,MAA+B,GAChC,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAoSvC"}
+{"version":3,"file":"AppWorkspaceChrome.d.ts","sourceRoot":"","sources":["../../../../../../src/components/workspace/AppWorkspaceChrome.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AAmDvE,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,kCAAkC;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,MAA+B,GAChC,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwD7C"}