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

package/components/pages/SpringboardSurface.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isViewVisible } from "@elizaos/core";
+import * as React from "react";
+import { useRoutableViews } from "../../hooks/useAvailableViews.js";
+import { useViewCatalog } from "../../hooks/useViewCatalog.js";
+import { viewToEntry } from "../../hooks/view-catalog.js";
+import { getActiveViewModality, } from "../../platform/platform-guards.js";
+import { setSpringboardEditing, setSpringboardPage, setSpringboardPageCount, useShellSurface, } from "../../state/shell-surface-store.js";
+import { useEnabledViewKinds } from "../../state/useViewKinds.js";
+import { recordRecentViewId } from "../../view-recents.js";
+import { Springboard } from "./Springboard.js";
+const HIDDEN_SPRINGBOARD_VIEW_IDS = new Set([
+    "chat",
+    "views",
+    "apps",
+    "views-manager",
+    "character",
+    "character-select",
+    "voice",
+]);
+const HIDDEN_SPRINGBOARD_PATHS = new Set(["/chat", "/views", "/apps"]);
+const SPRINGBOARD_SYSTEM_ENTRY_IDS = new Set([
+    "settings",
+    "tasks",
+    "automations",
+    "triggers",
+    "browser",
+    "inventory",
+    "documents",
+    "files",
+    "plugins",
+    "skills",
+    "trajectories",
+    "transcripts",
+    "relationships",
+    "memories",
+    "runtime",
+    "database",
+    "logs",
+    "background",
+    "stream",
+    "desktop",
+]);
+function isVisibleSpringboardView(view, enabledKinds, activeModality) {
+    if (HIDDEN_SPRINGBOARD_VIEW_IDS.has(view.id))
+        return false;
+    if (view.path && HIDDEN_SPRINGBOARD_PATHS.has(view.path))
+        return false;
+    if ((view.viewType ?? "gui") !== activeModality)
+        return false;
+    if (!isViewVisible(view, enabledKinds))
+        return false;
+    if (view.visibleInManager === false &&
+        !SPRINGBOARD_SYSTEM_ENTRY_IDS.has(view.id)) {
+        return false;
+    }
+    return true;
+}
+function compareEntryLabels(left, right) {
+    return left.label.localeCompare(right.label, undefined, {
+        numeric: true,
+        sensitivity: "base",
+    });
+}
+function dedupeEntries(entries) {
+    const seen = new Set();
+    const out = [];
+    for (const entry of entries) {
+        const key = `${entry.modality}:${entry.id}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        out.push(entry);
+    }
+    return out;
+}
+export const SpringboardSurface = React.memo(function SpringboardSurface({ onNavigateHomeFromEdge, }) {
+    const { views, loading } = useRoutableViews();
+    const { entries: catalogEntries, get: getCatalogEntry } = useViewCatalog();
+    const enabledKinds = useEnabledViewKinds();
+    const activeModality = React.useMemo(() => getActiveViewModality(), []);
+    // Page index + edit mode come from the single shell-surface store, so the
+    // springboard, the rail, and its one indicator can never disagree (and edit
+    // mode is auto-reset by the store when the user leaves the springboard).
+    const { springboardPage, springboardEditing } = useShellSurface();
+    const loadedEntries = React.useMemo(() => views
+        .filter((view) => isVisibleSpringboardView(view, enabledKinds, activeModality))
+        .map(viewToEntry), [activeModality, enabledKinds, views]);
+    const availableEntries = React.useMemo(() => catalogEntries
+        .filter((entry) => entry.state !== "loaded")
+        .filter((entry) => entry.modality === activeModality)
+        .sort(compareEntryLabels), [activeModality, catalogEntries]);
+    const entries = React.useMemo(() => dedupeEntries([...loadedEntries, ...availableEntries]), [availableEntries, loadedEntries]);
+    const entryById = React.useMemo(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
+    const handleLaunch = React.useCallback((entry) => {
+        if (entry.state !== "loaded") {
+            void getCatalogEntry(entry).catch(() => {
+                /* useViewCatalog marks the entry as errored; keep launch best-effort */
+            });
+            return;
+        }
+        const path = entry.path ?? `/apps/${entry.id}`;
+        recordRecentViewId(entry.id);
+        try {
+            if (typeof window === "undefined")
+                return;
+            if (window.location.protocol === "file:") {
+                window.location.hash = path;
+            }
+            else {
+                window.history.pushState(null, "", path);
+                window.dispatchEvent(new PopStateEvent("popstate"));
+            }
+        }
+        catch {
+            // Sandboxed navigation is best-effort.
+        }
+    }, [getCatalogEntry]);
+    return (_jsx("div", { className: "absolute inset-0 flex min-h-0 flex-col px-0 pt-2 pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.75rem)]", children: _jsx(Springboard, { entries: entries, loading: loading, onLaunch: (entry) => handleLaunch(entryById.get(entry.id) ?? entry), onEdgeSwipeRight: onNavigateHomeFromEdge, page: springboardPage, onPageChange: setSpringboardPage, onPageCountChange: setSpringboardPageCount, editing: springboardEditing, onEditingChange: setSpringboardEditing, showPageDots: false }) }));
+});

package/components/pages/SqlEditorPanel.d.ts

@@ -1,4 +1,4 @@
-import type { QueryResult } from "../../api";
+import type { QueryResult } from "../../api/index.js";
 export declare function SqlEditorPanel({ queryText, setQueryText, queryResult, queryLoading, runQuery, queryHistory, showHistory, onCellClick, }: {
     queryText: string;
     setQueryText: (text: string) => void;

package/components/pages/SqlEditorPanel.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { Button } from "../ui/button.js";
 import { Textarea } from "../ui/textarea.js";
 import { ResultsGrid } from "./database-utils.js";
 export function SqlEditorPanel({ queryText, setQueryText, queryResult, queryLoading, runQuery, queryHistory, showHistory, onCellClick, }) {
-    const { t } = useApp();
-    return (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.SQLEditor") })] }), _jsxs(PagePanel, { variant: "surface", className: "mt-4 flex flex-col p-4", children: [_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "absolute -inset-[1px] bg-gradient-to-r from-accent/0 via-accent/30 to-accent/0 rounded-sm opacity-0 group-focus-within:opacity-100 blur transition-opacity duration-500" }), _jsx(Textarea, { value: queryText, onChange: (e) => setQueryText(e.target.value), onKeyDown: (e) => {
+    const t = useAppSelector((s) => s.t);
+    return (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.SQLEditor") })] }), _jsxs(PagePanel, { variant: "surface", className: "mt-4 flex flex-col p-4", children: [_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "absolute -inset-[1px] bg-gradient-to-r from-accent/0 via-accent/30 to-accent/0 rounded-sm opacity-0  blur transition-opacity duration-500" }), _jsx(Textarea, { value: queryText, onChange: (e) => setQueryText(e.target.value), onKeyDown: (e) => {
                                     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                                         e.preventDefault();
                                         runQuery();
                                     }
-                                }, placeholder: t("databaseview.SELECTFROMMemori"), rows: 6, className: "w-full relative bg-bg/80 backdrop-blur-md border-border/50 text-txt text-sm font-mono resize-y leading-relaxed rounded-sm focus-visible:ring-accent focus-visible:border-accent custom-scrollbar ", spellCheck: false })] }), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-auto min-h-[2.25rem] whitespace-normal break-words rounded-sm bg-accent px-6 py-1.5 text-left text-xs font-bold text-accent-fg transition-[opacity,transform,box-shadow] hover:scale-[1.02] hover:opacity-90 disabled:opacity-40", disabled: queryLoading || !queryText.trim(), onClick: runQuery, children: queryLoading
+                                }, placeholder: t("databaseview.SELECTFROMMemori"), rows: 6, className: "w-full relative bg-bg/95 border-border/50 text-txt text-sm font-mono resize-y leading-relaxed rounded-sm   custom-scrollbar ", spellCheck: false })] }), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-auto min-h-[2.25rem] whitespace-normal break-words rounded-sm bg-accent px-6 py-1.5 text-left text-xs font-bold text-accent-fg transition-[opacity,transform,box-shadow] hover:scale-[1.02] hover:opacity-90 disabled:opacity-40", disabled: queryLoading || !queryText.trim(), onClick: runQuery, children: queryLoading
                                     ? t("common.running", { defaultValue: "Running..." })
                                     : t("databaseview.runQuery", {
                                         defaultValue: "Run Query",
                                     }) }), _jsxs("kbd", { className: "text-2xs text-muted font-mono bg-bg/50 px-2 py-1 rounded-sm border border-border/30 tracking-wider", children: [navigator.platform.includes("Mac") ? "⌘" : "Ctrl", " ", t("common.enter")] }), queryResult && (_jsxs("div", { className: "text-xs text-muted ml-auto bg-bg/50 px-3 py-1.5 rounded-sm border border-border/30 font-medium tracking-wide", children: [_jsx("span", { className: "text-txt", children: queryResult.rowCount }), " ", queryResult.rowCount === 1
                                         ? t("databaseview.row")
-                                        : t("common.rows"), " ", "\u00B7 ", _jsxs("span", { className: "text-txt", children: [queryResult.durationMs, "ms"] })] }))] })] }), showHistory && queryHistory.length > 0 && !queryResult && (_jsxs("div", { className: "border border-border/40 bg-card/40 backdrop-blur-xl rounded-sm overflow-hidden", children: [_jsx("div", { className: "px-4 py-2.5 text-2xs text-muted uppercase font-bold tracking-widest bg-bg/60 ", children: t("databaseview.RecentQueries") }), _jsx("div", { className: "flex flex-col", children: queryHistory.slice(0, 5).map((q) => (_jsx(Button, { variant: "ghost", className: "w-full px-4 py-3 h-auto justify-start text-xs-tight font-mono text-txt text-left rounded-none hover:bg-bg-hover hover:text-txt transition-colors truncate", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate opacity-80 group-hover:opacity-100", children: q }) }, q))) })] })), queryResult && queryResult.rows.length > 0 ? (_jsx(PagePanel, { variant: "surface", className: "mt-4 flex flex-1 min-h-0 flex-col overflow-hidden p-3", children: _jsx(ResultsGrid, { columns: queryResult.columns, rows: queryResult.rows, onCellClick: onCellClick }) })) : null, queryResult && queryResult.rows.length === 0 ? (_jsx(PagePanel.Empty, { className: "mt-4 min-h-[12rem]", title: t("databaseview.QueryReturnedNoRo"), description: t("databaseview.QueryReturnedNoRo") })) : null] }));
+                                        : t("common.rows"), " ", "\u00B7 ", _jsxs("span", { className: "text-txt", children: [queryResult.durationMs, "ms"] })] }))] })] }), showHistory && queryHistory.length > 0 && !queryResult && (_jsxs("div", { className: "border border-border/40 bg-card/95 rounded-sm overflow-hidden", children: [_jsx("div", { className: "px-4 py-2.5 text-2xs text-muted uppercase font-bold tracking-widest bg-bg/60 ", children: t("databaseview.RecentQueries") }), _jsx("div", { className: "flex flex-col", children: queryHistory.slice(0, 5).map((q) => (_jsx(Button, { variant: "ghost", className: "w-full px-4 py-3 h-auto justify-start text-xs-tight font-mono text-txt text-left rounded-none hover:bg-bg-hover hover:text-txt transition-colors truncate", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate opacity-80 group-hover:opacity-100", children: q }) }, q))) })] })), queryResult && queryResult.rows.length > 0 ? (_jsx(PagePanel, { variant: "surface", className: "mt-4 flex flex-1 min-h-0 flex-col overflow-hidden p-3", children: _jsx(ResultsGrid, { columns: queryResult.columns, rows: queryResult.rows, onCellClick: onCellClick }) })) : null, queryResult && queryResult.rows.length === 0 ? (_jsx(PagePanel.Empty, { className: "mt-4 min-h-[12rem]", title: t("databaseview.QueryReturnedNoRo"), description: t("databaseview.QueryReturnedNoRo") })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"StreamView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/StreamView.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAoLjE"}
+{"version":3,"file":"StreamView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/StreamView.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAmLjE"}

package/components/pages/StreamView.js

@@ -6,7 +6,7 @@ import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
 import { getBootConfig } from "../../config/boot-config.js";
 import { getCached, setCached } from "../../hooks/resource-cache.js";
 import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelector } from "../../state/index.js";
 import { formatUptime } from "../../utils/format.js";
 import { IS_POPOUT } from "../stream/helpers.js";
 import { openStreamPopout } from "../stream/popout-url.js";
@@ -15,7 +15,8 @@ import { DetailSkeleton } from "../ui/skeleton-layouts.js";
 import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 const STREAM_STATUS_CACHE_KEY = "stream:status";
 export function StreamView({ inModal } = {}) {
-    const { agentStatus, t } = useApp();
+    const agentStatus = useAppSelector((s) => s.agentStatus);
+    const t = useAppSelector((s) => s.t);
     const { branding } = getBootConfig();
     const agentName = agentStatus?.agentName ?? branding.appName ?? "Eliza";
     const isElectrobun = isElectrobunRuntime();
@@ -96,11 +97,9 @@ export function StreamView({ inModal } = {}) {
             setStreamLoading(false);
         }
     }, [isElectrobun, streamLive]);
-    return (_jsx(ShellViewAgentSurface, { viewId: "stream", children: _jsxs("div", { "data-stream-view": true, className: `flex flex-col text-txt font-body ${inModal ? "bg-transparent" : "bg-bg"} h-full w-full`, children: [_jsx(StatusBar, { agentName: agentName, streamAvailable: streamAvailable, streamLive: streamLive, streamLoading: streamLoading, onToggleStream: toggleStream, uptime: uptime, frameCount: frameCount }), _jsx("div", { className: "flex flex-1 min-h-0 items-center justify-center", children: initialLoading && streamAvailable && !statusError ? (_jsx("div", { className: "w-full max-w-md rounded-sm border border-border/60 bg-card/94 p-6 backdrop-blur-xl", children: _jsx(DetailSkeleton, {}) })) : statusError && streamAvailable ? (_jsxs("div", { role: "alert", className: "max-w-lg rounded-sm border border-danger/45 bg-danger/8 p-6 text-center backdrop-blur-xl", children: [_jsx("p", { className: "text-xs-tight uppercase tracking-[0.24em] text-danger", children: t("streamview.StatusError", {
+    return (_jsx(ShellViewAgentSurface, { viewId: "stream", children: _jsxs("div", { "data-stream-view": true, className: `flex flex-col text-txt font-body ${inModal ? "bg-transparent" : "bg-bg"} h-full w-full`, children: [_jsx(StatusBar, { agentName: agentName, streamAvailable: streamAvailable, streamLive: streamLive, streamLoading: streamLoading, onToggleStream: toggleStream, uptime: uptime, frameCount: frameCount }), _jsx("div", { className: "flex flex-1 min-h-0 items-center justify-center", children: initialLoading && streamAvailable && !statusError ? (_jsx("div", { className: "w-full max-w-md rounded-sm border border-border/60 bg-card/94 p-6", children: _jsx(DetailSkeleton, {}) })) : statusError && streamAvailable ? (_jsxs("div", { role: "alert", className: "max-w-lg rounded-sm border border-danger/45 bg-danger/20 p-6 text-center", children: [_jsx("p", { className: "text-xs-tight uppercase tracking-[0.24em] text-danger", children: t("streamview.StatusError", {
                                     defaultValue: "Stream status error",
-                                }) }), _jsx("p", { className: "mt-3 text-sm leading-6 text-danger", children: statusError })] })) : !streamAvailable ? (_jsxs("div", { className: "max-w-lg rounded-sm border border-border/60 bg-card/94 p-6 text-center backdrop-blur-xl", children: [_jsx("p", { className: "text-xs-tight uppercase tracking-[0.24em] text-muted", children: t("streamview.StreamingUnavailabl") }), _jsx("h2", { className: "mt-2 text-xl font-semibold text-txt", children: t("streamview.EnableTheStreaming") }), _jsxs("p", { className: "mt-3 text-sm leading-6 text-muted", children: [t("streamview.CouldNotRea"), " ", _jsx("code", { className: "rounded-sm border border-border/45 bg-bg-hover px-1.5 py-0.5 text-xs text-txt-strong", children: t("streamview.streamingBase") }), " ", t("streamview.pluginThenReload")] }), _jsx("p", { className: "mt-4 text-xs text-muted", children: t("streamview.IfThePluginIsAlr") })] })) : (_jsxs("div", { className: "max-w-md rounded-sm border border-border/60 bg-card/94 p-6 text-center backdrop-blur-xl", children: [_jsx("div", { className: `mx-auto mb-4 h-3 w-3 rounded-full ${streamLive
-                                    ? "bg-danger ring-4 ring-danger/20 animate-pulse"
-                                    : "bg-muted"}` }), _jsx("h2", { className: "text-lg font-semibold text-txt", children: streamLive
+                                }) }), _jsx("p", { className: "mt-3 text-sm leading-6 text-danger", children: statusError })] })) : !streamAvailable ? (_jsxs("div", { className: "max-w-lg rounded-sm border border-border/60 bg-card/94 p-6 text-center", children: [_jsx("p", { className: "text-xs-tight uppercase tracking-[0.24em] text-muted", children: t("streamview.StreamingUnavailabl") }), _jsx("h2", { className: "mt-2 text-xl font-semibold text-txt", children: t("streamview.EnableTheStreaming") }), _jsxs("p", { className: "mt-3 text-sm leading-6 text-muted", children: [t("streamview.CouldNotRea"), " ", _jsx("code", { className: "rounded-sm border border-border/45 bg-bg-hover px-1.5 py-0.5 text-xs text-txt-strong", children: t("streamview.streamingBase") }), " ", t("streamview.pluginThenReload")] }), _jsx("p", { className: "mt-4 text-xs text-muted", children: t("streamview.IfThePluginIsAlr") })] })) : (_jsxs("div", { className: "max-w-md rounded-sm border border-border/60 bg-card/94 p-6 text-center", children: [_jsx("div", { className: `mx-auto mb-4 h-3 w-3 rounded-full ${streamLive ? "bg-danger   animate-pulse" : "bg-muted"}` }), _jsx("h2", { className: "text-lg font-semibold text-txt", children: streamLive
                                     ? t("streamview.StreamIsLive", {
                                         defaultValue: "Stream is Live",
                                     })
@@ -109,7 +108,7 @@ export function StreamView({ inModal } = {}) {
                                     }) }), _jsx("p", { className: "mt-2 text-sm text-muted", children: streamLive
                                     ? t("streamview.StreamLiveStatus", {
                                         uptime: formatUptime(uptime),
-                                        frameCount: frameCount.toLocaleString(),
+                                        frameCount: frameCount.toLocaleString("en-US"),
                                         defaultValue: "Uptime: {{uptime}} · {{frameCount}} frames",
                                     })
                                     : t("streamview.GoLiveHint", {

package/components/pages/TaskEditor.d.ts

@@ -9,9 +9,9 @@
  * uses tags as free-form metadata. When the workflow plugin grows a
  * dedicated `cron` field on WorkbenchTask we can drop the tag encoding.
  */
-import type { WorkbenchTask } from "../../api/client-types-config";
-import { type TaskScheduleKind } from "../../utils/task-schedule";
-export type { TaskScheduleKind } from "../../utils/task-schedule";
+import type { WorkbenchTask } from "../../api/client-types-config.js";
+import { type TaskScheduleKind } from "../../utils/task-schedule.js";
+export type { TaskScheduleKind } from "../../utils/task-schedule.js";
 export interface TaskEditorInitialValue {
     id?: string;
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TrajectoriesView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/TrajectoriesView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAsDf,UAAU,qBAAqB;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,oBAAoB,EAAE,YAAY,EAClC,kBAAkB,EAAE,kBAAkB,GACvC,EAAE,qBAAqB,2CAmgBvB"}
+{"version":3,"file":"TrajectoriesView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/TrajectoriesView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAuDf,UAAU,qBAAqB;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,oBAAoB,EAAE,YAAY,EAClC,kBAAkB,EAAE,kBAAkB,GACvC,EAAE,qBAAqB,2CAkgBvB"}

package/components/pages/TrajectoriesView.js

@@ -3,8 +3,9 @@ import { Download, Route, Trash2, XCircle } from "lucide-react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { client } from "../../api/client.js";
 import { getCached, setCached } from "../../hooks/resource-cache.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelector } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { formatTrajectoryDuration, formatTrajectoryTimestamp, formatTrajectoryTokenCount, } from "../../utils/trajectory-format.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
@@ -39,7 +40,8 @@ function formatTrajectorySourceLabel(trajectory) {
     return parts.join(" • ");
 }
 export function TrajectoriesView({ contentHeader, selectedTrajectoryId: controlledId, onSelectTrajectory: controlledOnSelect, }) {
-    const { t, setActionNotice } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
     const [error, setError] = useState(null);
     // Self-manage selection when no external callback is provided (standalone mode).
     const [internalId, setInternalId] = useState(null);
@@ -109,13 +111,11 @@ export function TrajectoriesView({ contentHeader, selectedTrajectoryId: controll
             silent: getCached(cacheKey) != null,
         });
     }, [loadTrajectories, cacheKey]);
-    useEffect(() => {
-        // Poll for new turns in the background instead of a manual refresh button.
-        const interval = setInterval(() => {
-            void loadTrajectories({ silent: true });
-        }, 15000);
-        return () => clearInterval(interval);
-    }, [loadTrajectories]);
+    // Poll for new turns in the background instead of a manual refresh button.
+    // Gated on document visibility so a backgrounded window stops polling.
+    useIntervalWhenDocumentVisible(() => {
+        void loadTrajectories({ silent: true });
+    }, 15000);
     useEffect(() => {
         const previousSearchQuery = previousSearchQueryRef.current;
         if (previousSearchQuery === searchQuery) {

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

@@ -1 +1 @@
-{"version":3,"file":"TrajectoryDetailView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/TrajectoryDetailView.tsx"],"names":[],"mappings":"AA4GA,UAAU,yBAAyB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA+PD,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,GACb,EAAE,yBAAyB,2CA8Y3B"}
+{"version":3,"file":"TrajectoryDetailView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/TrajectoryDetailView.tsx"],"names":[],"mappings":"AA4GA,UAAU,yBAAyB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA+PD,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,GACb,EAAE,yBAAyB,2CA0a3B"}

package/components/pages/TrajectoryDetailView.js

@@ -3,7 +3,7 @@ import { Brain, CheckCircle, MessageSquare, ShieldCheck, X, Zap, } from "lucide-
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelector } from "../../state/index.js";
 import { formatTrajectoryDuration, formatTrajectoryTokenCount, } from "../../utils/trajectory-format.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { TrajectoryCacheStats, } from "../composites/trajectories/trajectory-cache-stats.js";
@@ -262,7 +262,8 @@ function buildContextDiffSummaries(diffs) {
     }));
 }
 export function TrajectoryDetailView({ trajectoryId, }) {
-    const { t, copyToClipboard } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const copyToClipboard = useAppSelector((s) => s.copyToClipboard);
     const [loading, setLoading] = useState(true);
     const [detail, setDetail] = useState(null);
     const [error, setError] = useState(null);
@@ -287,43 +288,61 @@ export function TrajectoryDetailView({ trajectoryId, }) {
     const llmCalls = detail?.llmCalls ?? [];
     const providerAccesses = detail?.providerAccesses ?? [];
     const trajectory = detail?.trajectory;
-    const explicitEvents = detail?.events ?? [];
-    const toolEvents = dedupeEvents([
-        ...(detail?.toolEvents ?? []),
-        ...explicitEvents.filter(isNativeToolCallEvent),
-    ]);
-    const evaluationEvents = dedupeEvents([
-        ...(detail?.evaluationEvents ?? []),
-        ...explicitEvents.filter(isEvaluationEvent),
-    ]);
-    const cacheObservations = dedupeEvents([
-        ...(detail?.cacheObservations ?? []),
-        ...explicitEvents.filter(isCacheObservation),
-    ]);
-    const contextDiffs = dedupeEvents([
-        ...(detail?.contextDiffs ?? []),
-        ...explicitEvents.filter(isContextDiff),
-    ]);
-    const timelineEvents = buildTimelineEvents({
-        events: dedupeEvents([
-            ...explicitEvents,
-            ...toolEvents,
-            ...evaluationEvents,
-            ...cacheObservations,
-            ...contextDiffs,
-        ]),
-        llmCalls,
-        providerAccesses,
-    });
-    const cacheMetrics = buildCacheMetrics(cacheObservations, detail?.cacheStats);
-    const contextDiffSummaries = buildContextDiffSummaries(contextDiffs);
-    const shouldShowNativeEventPanels = explicitEvents.length > 0 ||
-        toolEvents.length > 0 ||
-        evaluationEvents.length > 0 ||
-        cacheObservations.length > 0 ||
-        Boolean(detail?.cacheStats) ||
-        contextDiffs.length > 0 ||
-        (detail?.contextEvents?.length ?? 0) > 0;
+    // The whole event pipeline (several O(n) dedupeEvents + the O(n log n)
+    // buildTimelineEvents + cache/context derivations) was rebuilt in the render
+    // body on EVERY render — filter clicks, hover, any state change — over a
+    // trajectory that can carry hundreds of events. Memoize it on the fetched
+    // detail so it only recomputes when the data actually changes.
+    const { toolEvents, timelineEvents, cacheMetrics, contextDiffSummaries, shouldShowNativeEventPanels, } = useMemo(() => {
+        const explicitEvents = detail?.events ?? [];
+        const toolEvents = dedupeEvents([
+            ...(detail?.toolEvents ?? []),
+            ...explicitEvents.filter(isNativeToolCallEvent),
+        ]);
+        const evaluationEvents = dedupeEvents([
+            ...(detail?.evaluationEvents ?? []),
+            ...explicitEvents.filter(isEvaluationEvent),
+        ]);
+        const cacheObservations = dedupeEvents([
+            ...(detail?.cacheObservations ?? []),
+            ...explicitEvents.filter(isCacheObservation),
+        ]);
+        const contextDiffs = dedupeEvents([
+            ...(detail?.contextDiffs ?? []),
+            ...explicitEvents.filter(isContextDiff),
+        ]);
+        const timelineEvents = buildTimelineEvents({
+            events: dedupeEvents([
+                ...explicitEvents,
+                ...toolEvents,
+                ...evaluationEvents,
+                ...cacheObservations,
+                ...contextDiffs,
+            ]),
+            llmCalls,
+            providerAccesses,
+        });
+        const cacheMetrics = buildCacheMetrics(cacheObservations, detail?.cacheStats);
+        const contextDiffSummaries = buildContextDiffSummaries(contextDiffs);
+        const shouldShowNativeEventPanels = explicitEvents.length > 0 ||
+            toolEvents.length > 0 ||
+            evaluationEvents.length > 0 ||
+            cacheObservations.length > 0 ||
+            Boolean(detail?.cacheStats) ||
+            contextDiffs.length > 0 ||
+            (detail?.contextEvents?.length ?? 0) > 0;
+        return {
+            explicitEvents,
+            toolEvents,
+            evaluationEvents,
+            cacheObservations,
+            contextDiffs,
+            timelineEvents,
+            cacheMetrics,
+            contextDiffSummaries,
+            shouldShowNativeEventPanels,
+        };
+    }, [detail, llmCalls, providerAccesses]);
     const pipelineNodes = useMemo(() => buildPipelineNodes(llmCalls, trajectory?.status ?? "active"), [llmCalls, trajectory?.status]);
     const filteredCalls = useMemo(() => {
         if (!activeStage || activeStage === "input")

package/components/pages/WorkflowEditor.d.ts

@@ -16,7 +16,7 @@
  * always-on via the debounced parse above (the status badge shows
  * Valid/Invalid live), so there is no separate manual "Validate" control.
  */
-import type { WorkflowDefinition } from "../../api/client-types-chat";
+import type { WorkflowDefinition } from "../../api/client-types-chat.js";
 export interface WorkflowEditorProps {
     initial?: WorkflowDefinition | null;
     onSaved?: (workflow: WorkflowDefinition) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"WorkflowEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAmBH,OAAO,KAAK,EACV,kBAAkB,EAGnB,MAAM,6BAA6B,CAAC;AAsBrC,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,2CAq4BrB"}
+{"version":3,"file":"WorkflowEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAmBH,OAAO,KAAK,EACV,kBAAkB,EAGnB,MAAM,6BAA6B,CAAC;AAqBrC,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,2CA23BrB"}

package/components/pages/WorkflowEditor.js

@@ -21,6 +21,7 @@ import { AlertTriangle, CheckCircle2, ClipboardList, Clock3, Copy, Pause, PlayCi
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
+import { dispatchChatPrefill } from "../../events/index.js";
 import { useDebouncedValue } from "../../hooks/useDebouncedValue.js";
 import { buildWorkflowExecutionDiagnostics, formatWorkflowEngineMetrics, getWorkflowExecutionRunRows, summarizeWorkflowExecution, } from "../../utils/workflow-executions.js";
 import { parseWorkflowJson, toWriteRequest, workflowToJsonText, } from "../../utils/workflow-json.js";
@@ -29,7 +30,6 @@ import { Button } from "../ui/button.js";
 import { Spinner } from "../ui/spinner.js";
 import { StatusBadge } from "../ui/status-badge.js";
 import { WorkflowGraphViewer } from "./WorkflowGraphViewer.js";
-const CHAT_PREFILL_EVENT = "eliza:chat:prefill";
 export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
     const [text, setText] = useState(() => workflowToJsonText(initial));
     const debouncedText = useDebouncedValue(text, 250);
@@ -291,35 +291,26 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
         }
     }, [selectedExecution]);
     const handleTroubleshootInChat = useCallback(() => {
-        if (!selectedExecution || typeof window === "undefined")
+        if (!selectedExecution)
             return;
         const workflowId = persistedWorkflowId ?? selectedExecution.workflowId ?? "unknown";
         const diagnostics = buildWorkflowExecutionDiagnostics(selectedExecution);
-        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
-            detail: {
-                text: [
-                    `Troubleshoot workflow ${workflowId} execution ${selectedExecution.id}.`,
-                    "",
-                    diagnostics,
-                ].join("\n"),
-                select: false,
-            },
-        }));
+        dispatchChatPrefill({
+            text: [
+                `Troubleshoot workflow ${workflowId} execution ${selectedExecution.id}.`,
+                "",
+                diagnostics,
+            ].join("\n"),
+            select: false,
+        });
     }, [persistedWorkflowId, selectedExecution]);
     const handleEditInChat = useCallback(() => {
-        if (typeof window === "undefined")
-            return;
         const workflowName = lastValidWorkflow?.name ?? "this workflow";
         const workflowId = persistedWorkflowId ?? lastValidWorkflow?.id ?? initial?.id ?? "draft";
         const text = workflowId === "draft"
             ? "Create a workflow that "
             : `Modify workflow ${workflowId} (${workflowName}). `;
-        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
-            detail: {
-                text,
-                select: false,
-            },
-        }));
+        dispatchChatPrefill({ text, select: false });
     }, [initial?.id, lastValidWorkflow, persistedWorkflowId]);
     const handleCopyEvaluationSamples = useCallback(async () => {
         if (!persistedWorkflowId)
@@ -479,7 +470,7 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
                                                         return (_jsxs("button", { type: "button", className: `flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left hover:bg-bg-accent/50 ${selected ? "bg-bg-accent" : ""}`, onClick: () => {
                                                                 setSelectedExecutionId(execution.id);
                                                                 setDiagnosticsCopied(false);
-                                                            }, children: [summary.tone === "success" ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-ok", "aria-hidden": true })) : summary.tone === "danger" ? (_jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0 text-danger", "aria-hidden": true })) : (_jsx(Clock3, { className: "h-3.5 w-3.5 shrink-0 text-muted-strong", "aria-hidden": true })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium text-txt", children: summary.statusLabel }), _jsxs("span", { className: "block truncate text-2xs text-muted-strong", children: [new Date(execution.startedAt).toLocaleString(), " /", " ", summary.durationLabel] })] })] }, execution.id));
+                                                            }, children: [summary.tone === "success" ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-ok", "aria-hidden": true })) : summary.tone === "danger" ? (_jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0 text-danger", "aria-hidden": true })) : (_jsx(Clock3, { className: "h-3.5 w-3.5 shrink-0 text-muted-strong", "aria-hidden": true })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium text-txt", children: summary.statusLabel }), _jsxs("span", { className: "block truncate text-2xs text-muted-strong", children: [new Date(execution.startedAt).toLocaleString("en-US"), " ", "/ ", summary.durationLabel] })] })] }, execution.id));
                                                     }) })) }), _jsx("div", { className: "min-h-[156px] overflow-auto p-3", children: !selectedExecution || !selectedExecutionSummary ? (_jsx("div", { className: "flex h-full min-h-[128px] items-center text-xs text-muted-strong", children: "Select a run to inspect node output, logs, and errors." })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(StatusBadge, { tone: selectedExecutionSummary.tone, label: selectedExecutionSummary.statusLabel }), _jsxs("span", { className: "text-2xs text-muted-strong", children: [selectedExecutionSummary.nodeCount, " node", selectedExecutionSummary.nodeCount === 1 ? "" : "s", " /", " ", selectedExecutionSummary.durationLabel] }), selectedEngineMetrics && (_jsxs("span", { className: "text-2xs text-muted-strong", children: ["/ ", selectedEngineMetrics] })), _jsxs(Button, { ref: copyDiagnosticsButton.ref, ...copyDiagnosticsButton.agentProps, variant: "ghost", size: "sm", className: "ml-auto h-7 px-2 text-2xs", onClick: () => void handleCopyDiagnostics(), disabled: !selectedExecution || diagnosticsCopying, children: [diagnosticsCopying ? (_jsx(Spinner, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Copy, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": true })), diagnosticsCopied ? "Copied" : "Copy diagnostics"] }), _jsxs(Button, { ref: troubleshootRunButton.ref, ...troubleshootRunButton.agentProps, variant: "ghost", size: "sm", className: "h-7 px-2 text-2xs", "aria-label": "Troubleshoot run in chat", onClick: handleTroubleshootInChat, disabled: !selectedExecution, children: [_jsx(AlertTriangle, { className: "mr-0 h-3.5 w-3.5 sm:mr-1.5", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: "Troubleshoot" })] })] }), selectedExecutionSummary.error && (_jsx("div", { className: "rounded-sm border border-danger/20 bg-danger/10 p-2 text-xs text-danger", children: selectedExecutionSummary.error })), selectedRunRows.length === 0 ? (_jsx("div", { className: "text-xs text-muted-strong", children: "This execution has no node output yet." })) : (_jsx("div", { className: "space-y-2", children: selectedRunRows.map((row) => (_jsxs("div", { className: "rounded-sm border border-border/50 bg-bg/40 p-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusBadge, { tone: row.status === "error"
                                                                                     ? "danger"
                                                                                     : row.status === "success"
@@ -489,7 +480,7 @@ export function WorkflowEditor({ initial = null, onSaved, onCancel, }) {
                                                         : "Unsaved draft" })] }) }), revisionsError && (_jsx("div", { className: "border-b border-danger/20 bg-danger/10 px-3 py-2 text-xs text-danger", children: revisionsError })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto px-3 py-2", children: revisionsLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-strong", children: [_jsx(Spinner, { className: "h-3.5 w-3.5" }), "Loading history"] })) : revisions.length === 0 ? (_jsx("div", { className: "text-xs text-muted-strong", children: "Save an edit to create a restorable version." })) : (_jsx("div", { className: "space-y-1.5", children: revisions.slice(0, 4).map((revision) => (_jsx(WorkflowRevisionRow, { revision: revision, disabled: !persistedWorkflowId || saving, onRestore: handleRestoreRevision }, revision.id))) })) })] })] })] })] }));
 }
 function WorkflowRevisionRow({ revision, disabled, onRestore, }) {
-    const capturedAt = new Date(revision.capturedAt).toLocaleString();
+    const capturedAt = new Date(revision.capturedAt).toLocaleString("en-US");
     const versionLabel = revision.versionId.slice(0, 8);
     const restoreAction = useAgentElement({
         id: `restore-workflow-version-${versionLabel}`,

package/components/pages/WorkflowGraphViewer.d.ts

@@ -1,4 +1,4 @@
-import type { WorkflowDefinition } from "../../api/client-types-chat";
+import type { WorkflowDefinition } from "../../api/client-types-chat.js";
 interface WorkflowGraphViewerProps {
     workflow: WorkflowDefinition | null;
     loading?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"WorkflowGraphViewer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowGraphViewer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,6BAA6B,CAAC;AAqiBrC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAe,EACf,YAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,GACnB,EAAE,wBAAwB,2CA0R1B"}
+{"version":3,"file":"WorkflowGraphViewer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/WorkflowGraphViewer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,6BAA6B,CAAC;AAoiBrC,UAAU,wBAAwB;IAChC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAe,EACf,YAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,EACX,kBAAkB,GACnB,EAAE,wBAAwB,2CAyR1B"}