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

package/components/chat/widgets/agent-orchestrator.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat-sidebar widgets for the `agent-orchestrator` plugin (Apps / Tasks /
+ * Activity). This file lives in `@elizaos/app-core` (not in
+ * `@elizaos/plugin-agent-orchestrator`) because the widget depends on app-core
+ * internals that the runtime plugin does not own and does not re-export:
+ * the app-core API client, `AppRunSummary` / `ActivityEvent` types, the
+ * `useApp` store, `TranslateFn`, `getRunAttentionReasons`, and the widget
+ * registry contract (`ChatSidebarWidgetDefinition` / `ChatSidebarWidgetProps`
+ * and the `EmptyWidgetState` / `WidgetSection` primitives).
+ *
+ * The runtime plugin is a pure Node package (actions, providers, services,
+ * api, types) with no React build target or widget-publication mechanism.
+ * Moving this file into the plugin would require standing up a React build,
+ * publishing app-core internals, and adding a widget-registration hook — a
+ * reverse coupling we don't want. The widget is owned by the app shell; the
+ * plugin just provides the backend capabilities it consumes.
+ */
+import { Button } from "@elizaos/ui";
+import { Activity, AlertTriangle, BellRing, Check, CheckCheck, Eye, EyeOff, HeartPulse, MessageSquare, OctagonAlert, Play, Square, SquareArrowOutUpRight, SquarePause, Trash2, Workflow, Wrench, Zap, } from "lucide-react";
+import { startTransition, useEffect, useMemo, useState } from "react";
+import { client } from "../../../api/index.js";
+import { useApp } from "../../../state/index.js";
+import { AppHero } from "../../apps/app-identity.js";
+import { loadMergedCatalogApps } from "../../apps/catalog-loader.js";
+import { getRunAttentionReasons } from "../../apps/run-attention.js";
+import { EmptyWidgetState, WidgetSection } from "./shared.js";
+function relativeTime(ts) {
+    const delta = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+    if (delta < 5)
+        return "just now";
+    if (delta < 60)
+        return `${delta}s ago`;
+    const mins = Math.floor(delta / 60);
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    return `${hrs}h ago`;
+}
+function relativeDuration(ts) {
+    const delta = Math.max(1, Math.floor((Date.now() - ts) / 1000));
+    if (delta < 60)
+        return `${delta}s`;
+    const mins = Math.floor(delta / 60);
+    if (mins < 60)
+        return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24)
+        return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+}
+const DEFAULT_EVENT_TYPE_META = {
+    icon: Activity,
+    toneClass: "bg-muted/20 text-muted",
+    label: "activity",
+};
+const EVENT_TYPE_META = {
+    task_registered: {
+        icon: Play,
+        toneClass: "bg-ok/20 text-ok",
+        label: "task started",
+    },
+    task_complete: {
+        icon: Check,
+        toneClass: "bg-ok/20 text-ok",
+        label: "task complete",
+    },
+    stopped: {
+        icon: Square,
+        toneClass: "bg-muted/20 text-muted",
+        label: "stopped",
+    },
+    tool_running: {
+        icon: Wrench,
+        toneClass: "bg-accent/20 text-accent",
+        label: "tool running",
+    },
+    blocked: {
+        icon: SquarePause,
+        toneClass: "bg-warn/20 text-warn",
+        label: "blocked",
+    },
+    blocked_auto_resolved: {
+        icon: CheckCheck,
+        toneClass: "bg-ok/20 text-ok",
+        label: "auto resolved",
+    },
+    escalation: {
+        icon: AlertTriangle,
+        toneClass: "bg-warn/20 text-warn",
+        label: "escalation",
+    },
+    error: {
+        icon: OctagonAlert,
+        toneClass: "bg-danger/20 text-danger",
+        label: "error",
+    },
+    "proactive-message": {
+        icon: MessageSquare,
+        toneClass: "bg-accent/20 text-accent",
+        label: "proactive message",
+    },
+    reminder: {
+        icon: BellRing,
+        toneClass: "bg-warn/20 text-warn",
+        label: "reminder",
+    },
+    workflow: {
+        icon: Workflow,
+        toneClass: "bg-ok/20 text-ok",
+        label: "workflow",
+    },
+    "check-in": {
+        icon: HeartPulse,
+        toneClass: "bg-accent/20 text-accent",
+        label: "check in",
+    },
+    nudge: {
+        icon: Zap,
+        toneClass: "bg-accent/20 text-accent",
+        label: "nudge",
+    },
+};
+const fallbackTranslate = (key, vars) => typeof vars?.defaultValue === "string" ? vars.defaultValue : key;
+function formatIsoTime(value) {
+    if (!value)
+        return "unknown";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "unknown";
+    return relativeTime(date.getTime());
+}
+function ActivityItemsContent({ events }) {
+    if (events.length === 0) {
+        return (_jsx(EmptyWidgetState, { icon: _jsx(Activity, { className: "h-8 w-8" }), title: "No recent activity" }));
+    }
+    return (_jsx("div", { className: "flex flex-col gap-0.5", children: events.map((event) => {
+            const eventTypeMeta = EVENT_TYPE_META[event.eventType] ?? DEFAULT_EVENT_TYPE_META;
+            const EventIcon = eventTypeMeta.icon;
+            return (_jsxs("div", { className: "flex items-start gap-1.5 rounded-md px-1.5 py-1 transition-colors hover:bg-bg-hover/40", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-3xs font-medium tabular-nums text-muted", children: relativeDuration(event.timestamp) }), _jsxs("span", { className: `inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-md ${eventTypeMeta.toneClass}`, role: "img", title: eventTypeMeta.label, children: [_jsx(EventIcon, { className: "h-2.5 w-2.5" }), _jsx("span", { className: "sr-only", children: eventTypeMeta.label })] }), _jsx("span", { className: "min-w-0 flex-1 break-words pt-0.5 text-2xs leading-4 text-txt", children: event.summary })] }, event.id));
+        }) }));
+}
+function getClientErrorMessage(error, fallback) {
+    return error instanceof Error ? error.message : fallback;
+}
+function getAppRunIdentity(run, catalogAppsByName) {
+    const catalogApp = catalogAppsByName.get(run.appName);
+    return {
+        name: run.appName,
+        displayName: catalogApp?.displayName ?? run.displayName,
+        description: catalogApp?.description ?? run.summary ?? null,
+        category: catalogApp?.category ?? "utility",
+        icon: catalogApp?.icon ?? null,
+        heroImage: catalogApp?.heroImage ?? null,
+    };
+}
+function AppRunCard({ run, attentionReasons, app, }) {
+    const healthDot = run.health.state === "healthy"
+        ? "bg-ok"
+        : run.health.state === "degraded"
+            ? "bg-warn"
+            : "bg-danger";
+    const ViewerIcon = run.viewerAttachment === "attached" ? Eye : EyeOff;
+    return (_jsx("div", { className: "rounded-lg border border-border/50 bg-bg-accent/30 p-2", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "w-20 shrink-0 overflow-hidden rounded-md border border-white/10 bg-black/10", children: _jsx(AppHero, { app: app, className: "aspect-[5/4]", imageOnly: true }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-2xs font-semibold text-txt", children: run.displayName }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5 text-3xs text-muted", children: [_jsx("span", { className: `inline-block h-1.5 w-1.5 rounded-full ${healthDot}`, role: "img", "aria-label": run.health.state, title: run.health.state }), _jsx(ViewerIcon, { className: "h-3 w-3", "aria-label": run.viewerAttachment }), _jsx("span", { children: formatIsoTime(run.lastHeartbeatAt ?? run.updatedAt) })] }), _jsx("div", { className: "mt-1 line-clamp-2 text-3xs text-muted", children: run.summary || run.health.message || "Run active." }), attentionReasons.length > 0 ? (_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-3xs text-warn", children: [_jsx(AlertTriangle, { className: "h-3 w-3 shrink-0", "aria-label": "Needs attention" }), _jsx("span", { className: "truncate", children: attentionReasons[0] })] })) : null] })] }) }));
+}
+function AppRunsWidget(_props) {
+    const app = useApp();
+    const appRuns = app?.appRuns;
+    const setTab = app?.setTab ?? (() => undefined);
+    const setState = app?.setState ?? (() => undefined);
+    const t = app?.t ?? fallbackTranslate;
+    const [catalogApps, setCatalogApps] = useState([]);
+    const [runs, setRuns] = useState(() => Array.isArray(appRuns) ? appRuns : []);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const catalogAppsByName = useMemo(() => new Map(catalogApps.map((catalogApp) => [catalogApp.name, catalogApp])), [catalogApps]);
+    const currentRun = runs.find((run) => run.viewerAttachment === "attached" && run.viewer) ??
+        null;
+    const attachedCount = runs.filter((run) => run.viewerAttachment === "attached").length;
+    const backgroundCount = runs.filter((run) => run.viewerAttachment !== "attached").length;
+    const attentionMap = useMemo(() => new Map(runs.map((run) => [run.runId, getRunAttentionReasons(run)])), [runs]);
+    const needsAttentionCount = useMemo(() => runs.filter((run) => (attentionMap.get(run.runId)?.length ?? 0) > 0)
+        .length, [attentionMap, runs]);
+    const attentionRuns = runs.filter((run) => (attentionMap.get(run.runId)?.length ?? 0) > 0);
+    const shouldHideWidget = !loading && runs.length === 0 && error === null;
+    useEffect(() => {
+        let cancelled = false;
+        void loadMergedCatalogApps({ includeHiddenApps: true })
+            .then((apps) => {
+            if (!cancelled) {
+                setCatalogApps(apps);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        const refreshRuns = async () => {
+            try {
+                const nextRuns = await client.listAppRuns();
+                const nextRunsSafe = Array.isArray(nextRuns) ? nextRuns : [];
+                if (cancelled)
+                    return;
+                setError(null);
+                startTransition(() => {
+                    setRuns(nextRunsSafe);
+                    setState("appRuns", nextRunsSafe);
+                });
+            }
+            catch (refreshError) {
+                if (cancelled)
+                    return;
+                setError(getClientErrorMessage(refreshError, "Failed to load app runs."));
+            }
+            finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+        void refreshRuns();
+        const timer = setInterval(() => {
+            void refreshRuns();
+        }, 5_000);
+        return () => {
+            cancelled = true;
+            clearInterval(timer);
+        };
+    }, [setState]);
+    if (shouldHideWidget) {
+        return null;
+    }
+    return (_jsxs(WidgetSection, { title: t("appsview.Running", { defaultValue: "Apps" }), icon: _jsx(Activity, { className: "h-4 w-4" }), action: _jsxs("div", { className: "flex items-center gap-1", children: [currentRun ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 p-0", "aria-label": "Resume viewer", onClick: () => {
+                        setState("appRuns", runs);
+                        setState("activeGameRunId", currentRun.runId);
+                        setTab("apps");
+                        setState("appsSubTab", "games");
+                    }, children: _jsx(Play, { className: "h-3.5 w-3.5" }) })) : null, _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 p-0", "aria-label": "Open apps", onClick: () => {
+                        setState("appRuns", runs);
+                        setTab("apps");
+                        setState("appsSubTab", "running");
+                    }, children: _jsx(SquareArrowOutUpRight, { className: "h-3.5 w-3.5" }) })] }), testId: "chat-widget-app-runs", children: [error ? (_jsx("div", { className: "mb-2 rounded-md border border-danger/30 bg-danger/10 px-2 py-1.5 text-xs-tight text-danger", children: error })) : null, runs.length === 0 ? (loading ? (_jsx("div", { className: "text-xs-tight text-muted", children: "Loading app runs..." })) : (_jsx(EmptyWidgetState, { icon: _jsx(Activity, { className: "h-8 w-8" }), title: "No games are running" }))) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-3xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", title: "Currently playing", children: [_jsx(Eye, { className: "h-3 w-3" }), attachedCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", title: "Background", children: [_jsx(EyeOff, { className: "h-3 w-3" }), backgroundCount] }), _jsxs("span", { className: `inline-flex items-center gap-1 ${needsAttentionCount > 0 ? "text-warn" : "text-ok"}`, title: "Needs attention", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), needsAttentionCount] })] }), attentionRuns.length > 0 ? (_jsxs("div", { className: "rounded-lg border border-warn/30 bg-warn/10 p-2", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-1.5 text-3xs font-semibold uppercase tracking-[0.08em] text-warn", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), "Recovery"] }), _jsx("div", { className: "flex flex-col gap-2", children: attentionRuns.slice(0, 3).map((run) => {
+                                    const reasons = attentionMap.get(run.runId) ?? [];
+                                    return (_jsx(AppRunCard, { run: run, attentionReasons: reasons, app: getAppRunIdentity(run, catalogAppsByName) }, run.runId));
+                                }) })] })) : null, _jsx("div", { className: "flex flex-col gap-2", children: runs.slice(0, 4).map((run) => (_jsx(AppRunCard, { run: run, attentionReasons: attentionMap.get(run.runId) ?? [], app: getAppRunIdentity(run, catalogAppsByName) }, run.runId))) })] }))] }));
+}
+function OrchestratorActivityWidget({ events, clearEvents, }) {
+    const app = useApp();
+    const t = app?.t ?? fallbackTranslate;
+    if (events.length === 0) {
+        return null;
+    }
+    return (_jsx(WidgetSection, { title: t("taskseventspanel.Activity", { defaultValue: "Activity" }), icon: _jsx(Activity, { className: "h-4 w-4" }), action: _jsx(Button, { variant: "ghost", size: "sm", onClick: clearEvents, "aria-label": "Clear activity", className: "h-6 w-6 p-0 text-muted", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }), testId: "chat-widget-events", children: _jsx(ActivityItemsContent, { events: events }) }));
+}
+export const AGENT_ORCHESTRATOR_PLUGIN_WIDGETS = [
+    {
+        id: "agent-orchestrator.apps",
+        pluginId: "agent-orchestrator",
+        order: 150,
+        defaultEnabled: true,
+        Component: AppRunsWidget,
+    },
+    {
+        id: "agent-orchestrator.activity",
+        pluginId: "agent-orchestrator",
+        order: 300,
+        defaultEnabled: true,
+        Component: OrchestratorActivityWidget,
+    },
+];

package/components/chat/widgets/browser-status.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Compact browser-workspace widget for the chat-sidebar.
+ *
+ * Polls the workspace snapshot and renders a compact list of open tabs with
+ * a status indicator per tab (visible / background). Returns null when no
+ * tabs are open — the widget keeps the right rail quiet until the user
+ * actually has browser state.
+ *
+ * Title-click opens /browser. Tab-click focuses that tab via the backend.
+ */
+import type { ChatSidebarWidgetDefinition, ChatSidebarWidgetProps } from "./types";
+export declare function BrowserStatusSidebarWidget(_props: ChatSidebarWidgetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const BROWSER_STATUS_WIDGET: ChatSidebarWidgetDefinition;
+//# sourceMappingURL=browser-status.d.ts.map

package/components/chat/widgets/browser-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-status.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/browser-status.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAWH,OAAO,KAAK,EACV,2BAA2B,EAC3B,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAsCjB,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,sBAAsB,kDA4FxE;AAED,eAAO,MAAM,qBAAqB,EAAE,2BAMnC,CAAC"}

package/components/chat/widgets/browser-status.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Compact browser-workspace widget for the chat-sidebar.
+ *
+ * Polls the workspace snapshot and renders a compact list of open tabs with
+ * a status indicator per tab (visible / background). Returns null when no
+ * tabs are open — the widget keeps the right rail quiet until the user
+ * actually has browser state.
+ *
+ * Title-click opens /browser. Tab-click focuses that tab via the backend.
+ */
+import { Globe } from "lucide-react";
+import { useEffect, useState } from "react";
+import { client, } from "../../../api/index.js";
+import { useApp } from "../../../state/index.js";
+import { WidgetSection } from "./shared.js";
+const POLL_INTERVAL_MS = 4_000;
+const MAX_TAB_ROWS = 8;
+function tabLabel(tab) {
+    const title = tab.title?.trim();
+    if (title)
+        return title;
+    const url = tab.url?.trim();
+    if (!url)
+        return "New tab";
+    try {
+        return new URL(url).hostname.replace(/^www\./, "") || url;
+    }
+    catch {
+        return url;
+    }
+}
+function tabStatus(tab) {
+    if (tab.visible) {
+        return {
+            label: "Active",
+            dotClass: "bg-accent",
+            textClass: "text-txt",
+        };
+    }
+    return {
+        label: "Background",
+        dotClass: "bg-muted/50",
+        textClass: "text-muted",
+    };
+}
+export function BrowserStatusSidebarWidget(_props) {
+    const { setTab } = useApp();
+    const [snapshot, setSnapshot] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        let timer = null;
+        async function poll() {
+            try {
+                const next = await client.getBrowserWorkspace();
+                if (cancelled)
+                    return;
+                setSnapshot(next);
+            }
+            catch {
+                // Transient errors — keep the last snapshot.
+            }
+            finally {
+                if (!cancelled) {
+                    timer = setTimeout(poll, POLL_INTERVAL_MS);
+                }
+            }
+        }
+        void poll();
+        return () => {
+            cancelled = true;
+            if (timer !== null)
+                clearTimeout(timer);
+        };
+    }, []);
+    const tabs = snapshot?.tabs ?? [];
+    if (tabs.length === 0) {
+        // Hide the widget entirely until the user has open tabs — the sidebar
+        // stays quiet when the browser surface has nothing to say.
+        return null;
+    }
+    const rows = tabs.slice(0, MAX_TAB_ROWS);
+    function handleTabClick(tab) {
+        // Best-effort: bring the tab forward in the workspace. Not every backend
+        // implements this (web mode falls through silently) — we always also
+        // navigate to /browser so the user lands on the workspace view.
+        void (async () => {
+            try {
+                await client.showBrowserWorkspaceTab?.(tab.id);
+            }
+            catch {
+                // Ignore — navigation still happens.
+            }
+        })();
+        setTab("browser");
+    }
+    return (_jsx(WidgetSection, { title: "Browser", icon: _jsx(Globe, { className: "h-3.5 w-3.5" }), testId: "chat-widget-browser-status", onTitleClick: () => setTab("browser"), children: _jsx("div", { className: "flex flex-col gap-0.5 pt-0.5", children: rows.map((tab) => {
+                const label = tabLabel(tab);
+                const status = tabStatus(tab);
+                return (_jsxs("button", { type: "button", onClick: () => handleTabClick(tab), title: tab.url ?? label, "data-testid": `chat-widget-browser-tab-${tab.id}`, className: "flex items-center gap-2 rounded-[var(--radius-sm)] px-0.5 py-0.5 text-left transition-colors hover:bg-bg-hover/40", children: [_jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${status.dotClass}`, "aria-hidden": true }), _jsx("span", { className: `min-w-0 flex-1 truncate text-3xs ${status.textClass}`, children: label }), _jsx("span", { className: "shrink-0 text-3xs uppercase tracking-wider text-muted/70", children: status.label })] }, tab.id));
+            }) }) }));
+}
+export const BROWSER_STATUS_WIDGET = {
+    id: "browser.status",
+    pluginId: "browser-workspace",
+    order: 75,
+    defaultEnabled: true,
+    Component: BrowserStatusSidebarWidget,
+};

package/components/chat/widgets/music-player.d.ts

@@ -0,0 +1,4 @@
+import type { ChatSidebarWidgetDefinition, ChatSidebarWidgetProps } from "./types";
+export declare function MusicPlayerSidebarWidget(_props: ChatSidebarWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare const MUSIC_PLAYER_WIDGET: ChatSidebarWidgetDefinition;
+//# sourceMappingURL=music-player.d.ts.map

package/components/chat/widgets/music-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"music-player.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/music-player.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,2BAA2B,EAC3B,sBAAsB,EACvB,MAAM,SAAS,CAAC;AA4BjB,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,sBAAsB,2CAmLtE;AAED,eAAO,MAAM,mBAAmB,EAAE,2BAMjC,CAAC"}

package/components/chat/widgets/music-player.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Music, Pause, Play, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchWithCsrf } from "../../../api/csrf-client.js";
+import { resolveApiUrl } from "../../../utils/asset-url.js";
+import { EmptyWidgetState, WidgetSection } from "./shared.js";
+const MEDIA_ERROR_NAMES = {
+    1: "MEDIA_ERR_ABORTED",
+    2: "MEDIA_ERR_NETWORK",
+    3: "MEDIA_ERR_DECODE",
+    4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
+};
+function statusLabel(state) {
+    if (state.kind === "playing")
+        return state.isPaused ? "Paused" : "Live";
+    if (state.kind === "loading")
+        return "Loading";
+    if (state.kind === "error")
+        return "Unavailable";
+    return "Idle";
+}
+export function MusicPlayerSidebarWidget(_props) {
+    const audioRef = useRef(null);
+    const lastAttachedTrack = useRef(null);
+    const [player, setPlayer] = useState({ kind: "idle" });
+    const [audioError, setAudioError] = useState(null);
+    const [audioPaused, setAudioPaused] = useState(true);
+    const isPlaying = player.kind === "playing";
+    const pollOnce = useCallback(async () => {
+        setPlayer((prev) => (prev.kind === "idle" ? { kind: "loading" } : prev));
+        try {
+            const res = await fetchWithCsrf(resolveApiUrl("/music-player/status"));
+            const data = (await res.json());
+            if (!res.ok) {
+                setPlayer({ kind: "error", message: data.error ?? res.statusText });
+                return;
+            }
+            if (data.track?.title && data.guildId && data.streamUrl) {
+                setPlayer({
+                    kind: "playing",
+                    title: data.track.title,
+                    guildId: data.guildId,
+                    streamUrl: resolveApiUrl(data.streamUrl),
+                    isPaused: data.isPaused === true,
+                });
+                return;
+            }
+            setPlayer({ kind: "idle" });
+            setAudioPaused(true);
+        }
+        catch {
+            setPlayer({
+                kind: "error",
+                message: "Could not reach the music player.",
+            });
+            setAudioPaused(true);
+        }
+    }, []);
+    useEffect(() => {
+        void pollOnce();
+        const id = window.setInterval(() => void pollOnce(), 5_000);
+        return () => window.clearInterval(id);
+    }, [pollOnce]);
+    useEffect(() => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        if (player.kind !== "playing") {
+            el.pause();
+            el.removeAttribute("src");
+            el.load();
+            lastAttachedTrack.current = null;
+            return;
+        }
+        const key = `${player.guildId}::${player.title}`;
+        if (lastAttachedTrack.current !== key) {
+            lastAttachedTrack.current = key;
+            setAudioError(null);
+            setAudioPaused(true);
+            el.src = player.streamUrl;
+            el.load();
+        }
+        if (player.isPaused) {
+            el.pause();
+            setAudioPaused(true);
+            return;
+        }
+        el.play().catch(() => {
+            /* Browser autoplay policy may require the user to press play. */
+        });
+    }, [player]);
+    useEffect(() => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        const handlePlay = () => setAudioPaused(false);
+        const handlePause = () => setAudioPaused(true);
+        const handler = () => {
+            const err = el.error;
+            const code = err?.code ?? 0;
+            const name = MEDIA_ERROR_NAMES[code] ?? `UNKNOWN(${code})`;
+            setAudioError(`${name}: ${err?.message || "no details"}`);
+        };
+        el.addEventListener("play", handlePlay);
+        el.addEventListener("pause", handlePause);
+        el.addEventListener("error", handler);
+        return () => {
+            el.removeEventListener("play", handlePlay);
+            el.removeEventListener("pause", handlePause);
+            el.removeEventListener("error", handler);
+        };
+    }, []);
+    function togglePlayback() {
+        const el = audioRef.current;
+        if (!el || player.kind !== "playing" || !player.streamUrl)
+            return;
+        if (el.paused) {
+            void el.play();
+            return;
+        }
+        el.pause();
+    }
+    return (_jsx(WidgetSection, { title: "Music", icon: _jsx(Music, { className: "h-3.5 w-3.5" }), testId: "chat-widget-music-player", action: _jsx("button", { type: "button", onClick: () => void pollOnce(), "aria-label": "Refresh music player", className: "inline-flex h-5 w-5 items-center justify-center rounded-[var(--radius-sm)] bg-transparent text-muted transition-colors hover:text-txt", children: _jsx(RefreshCw, { className: "h-3 w-3", "aria-hidden": true }) }), children: _jsxs("div", { className: "flex flex-col gap-2 pt-0.5", children: [isPlaying ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: togglePlayback, "aria-label": audioPaused ? "Play music" : "Pause music", title: audioPaused ? "Play" : "Pause", className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] bg-transparent text-muted transition-colors hover:text-txt", children: audioPaused ? (_jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true })) : (_jsx(Pause, { className: "h-3.5 w-3.5", "aria-hidden": true })) }), _jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${player.isPaused ? "bg-warn" : "bg-ok"}`, "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate text-3xs font-semibold text-txt", children: player.title }), _jsx("span", { className: "shrink-0 text-3xs uppercase tracking-wider text-muted/70", children: statusLabel(player) })] })) : (_jsx(EmptyWidgetState, { icon: _jsx(Music, { className: "h-5 w-5" }), title: player.kind === "error"
+                        ? player.message
+                        : "No music stream is active.", description: "Ask the agent to play music in chat." })), _jsx("audio", { ref: audioRef, className: "hidden", "aria-label": "Agent music stream" }), audioError ? (_jsx("p", { className: "break-words font-mono text-3xs text-warn", children: audioError })) : null] }) }));
+}
+export const MUSIC_PLAYER_WIDGET = {
+    id: "music-player.stream",
+    pluginId: "music-player",
+    order: 125,
+    defaultEnabled: true,
+    Component: MusicPlayerSidebarWidget,
+};

package/components/chat/widgets/registry.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Legacy widget registry — re-exports from the new widget system.
+ *
+ * Kept for backward compatibility with existing tests and any code
+ * that imports `resolveChatSidebarWidgets` from this path.
+ */
+export { resolveChatSidebarWidgets } from "../../../widgets/registry";
+//# sourceMappingURL=registry.d.ts.map

package/components/chat/widgets/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}

package/components/chat/widgets/registry.js

@@ -0,0 +1,7 @@
+/**
+ * Legacy widget registry — re-exports from the new widget system.
+ *
+ * Kept for backward compatibility with existing tests and any code
+ * that imports `resolveChatSidebarWidgets` from this path.
+ */
+export { resolveChatSidebarWidgets } from "../../../widgets/registry.js";

package/components/chat/widgets/shared.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export declare function WidgetSection({ title, icon, action, children, testId, onTitleClick, }: {
+    title: string;
+    icon: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    testId: string;
+    /** When set, the title area becomes a button navigating elsewhere. */
+    onTitleClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyWidgetState({ icon, title, description, children, }: {
+    icon: ReactNode;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=shared.d.ts.map

package/components/chat/widgets/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,2CAgCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAaA"}

package/components/chat/widgets/shared.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function WidgetSection({ title, icon, action, children, testId, onTitleClick, }) {
+    const titleContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-muted [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }), _jsx("span", { className: "truncate text-[11px] leading-none font-semibold uppercase tracking-[0.16em] text-muted", children: title })] }));
+    return (_jsxs("section", { "data-testid": testId, className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 pr-1", children: [onTitleClick ? (_jsx("button", { type: "button", onClick: onTitleClick, className: "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-[var(--radius-sm)] bg-transparent px-0.5 py-1 text-left transition-colors hover:text-txt", children: titleContent })) : (_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-0.5 py-1", children: titleContent })), action] }), _jsx("div", { className: "px-3 text-xs", children: children })] }));
+}
+export function EmptyWidgetState({ icon, title, description, children, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-5 text-center", children: [_jsx("span", { className: "text-muted/50", children: icon }), _jsx("p", { className: "text-2xs text-muted", children: title }), description ? (_jsx("p", { className: "text-3xs text-muted/70", children: description })) : null] }), children] }));
+}

package/components/chat/widgets/todo.d.ts

@@ -0,0 +1,3 @@
+import type { ChatSidebarWidgetDefinition } from "./types";
+export declare const TODO_PLUGIN_WIDGETS: ChatSidebarWidgetDefinition[];
+//# sourceMappingURL=todo.d.ts.map

package/components/chat/widgets/todo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"todo.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/chat/widgets/todo.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,2BAA2B,EAE5B,MAAM,SAAS,CAAC;AA8LjB,eAAO,MAAM,mBAAmB,EAAE,2BAA2B,EAQ5D,CAAC"}