@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

package/components/pages/AutomationsFeed.js

@@ -6,41 +6,58 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * This component is intentionally separate from the existing
  * `AutomationsView` — that surface is the full dashboard with sidebar
- * chat, palette, node catalog, etc. This is the "obvious nobody thinks
- * about it" feed for users who just want to see what's running.
+ * chat, palette, node catalog, etc. This is the visual feed for users who
+ * just want to see what's running.
  *
- * Backend dependencies:
- *   GET  /api/automations          (existing)
- *   GET  /api/workbench/tasks      (existing, via WorkbenchTask types)
- *   POST /api/workbench/tasks      (existing)
- *   POST /api/workflow/workflows   (existing)
- *   POST /api/workflow/workflows/generate  (existing)
- *   POST /api/workflow/workflows/:id/activate (existing)
- *
- * No backend changes are required.
+ * Backend: the list is fetched from `GET /api/automations` (served by
+ * `@elizaos/plugin-workflow`), which already aggregates workbench tasks,
+ * triggers, and workflows into one `AutomationListResponse`. Editing routes
+ * through the workflow CRUD endpoints under `/api/workflow/*`.
  */
-import { Button, PagePanel, Spinner, StatusBadge } from "@elizaos/ui";
-import { Calendar, CheckCircle2, ChevronRight, ListChecks, MessageSquare, Pause, Play, Plus, RefreshCw, Workflow, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CalendarClock, CheckCircle2, CircleSlash, Clock, History, Layers, Play, PlayCircle, Plus, Workflow, Zap, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
+import { getCached, setCached } from "../../hooks/resource-cache.js";
 import { useAutomationDeepLink } from "../../hooks/useAutomationDeepLink.js";
+import { useFetchData } from "../../hooks/useFetchData.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { passesFilter, } from "../../utils/automation-feed-filter.js";
 import { formatSchedule } from "../../utils/cron-format.js";
 import { decodeScheduleTags } from "../../utils/task-schedule.js";
-import { AutomationsChatPane } from "./AutomationsChatPane.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
+import { ListSkeleton } from "../ui/skeleton-layouts.js";
+import { Spinner } from "../ui/spinner.js";
+import { StatusBadge } from "../ui/status-badge.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { TaskEditor } from "./TaskEditor.js";
 import { WorkflowEditor } from "./WorkflowEditor.js";
 import { VISUALIZE_WORKFLOW_EVENT, } from "./workflow-graph-events.js";
-export { passesFilter } from "../../utils/automation-feed-filter.js";
 const FILTER_LABELS = {
-    all: "All",
-    tasks: "Tasks",
-    workflows: "Workflows",
-    active: "Active",
-    inactive: "Inactive",
+    all: { key: "automationsfeed.filterAll", defaultLabel: "All" },
+    tasks: { key: "automationsfeed.filterTasks", defaultLabel: "Tasks" },
+    workflows: {
+        key: "automationsfeed.filterWorkflows",
+        defaultLabel: "Workflows",
+    },
+    active: { key: "automationsfeed.filterActive", defaultLabel: "Active" },
+    inactive: {
+        key: "automationsfeed.filterInactive",
+        defaultLabel: "Inactive",
+    },
+};
+const FILTER_ICONS = {
+    all: _jsx(Layers, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    tasks: _jsx(CheckCircle2, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    workflows: _jsx(Workflow, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    active: _jsx(Play, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+    inactive: _jsx(CircleSlash, { className: "h-3.5 w-3.5", "aria-hidden": true }),
 };
 const NEW_AUTOMATION_LINK_ID = "__new__";
-function automationToRow(item) {
+const CHAT_PREFILL_EVENT = "eliza:chat:prefill";
+const NEW_AUTOMATION_PROMPT = "Create an automation that ";
+function automationToRow(item, t) {
     const isWorkflow = item.type === "workflow";
     const schedule = isWorkflow
         ? item.schedules
@@ -59,30 +76,51 @@ function automationToRow(item) {
                 return formatSchedule(decoded.cronExpression);
             }
             if (decoded.kind === "event" && decoded.eventName) {
-                return `On ${decoded.eventName}`;
+                return t("automationsfeed.onEvent", {
+                    event: decoded.eventName,
+                    defaultValue: "On {{event}}",
+                });
             }
             return null;
         })();
     return {
         key: item.id,
         kind: isWorkflow ? "workflow" : "task",
-        title: item.title || "Untitled",
+        title: item.title || t("automationsfeed.untitled", { defaultValue: "Untitled" }),
         schedule,
         active: item.enabled,
         status: item.status,
         lastUpdated: item.updatedAt,
+        lastRunStatus: item.lastExecution?.status ?? null,
         source: item,
     };
 }
-export function AutomationsFeed({ connectedCredTypes, showChatPane = false, } = {}) {
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(true);
+export function AutomationsFeed({ connectedCredTypes, } = {}) {
+    const { t } = useTranslation();
+    // Seed from the shared cache so a revisit paints the last-known automations
+    // instantly and revalidates silently, instead of flashing a spinner.
+    const cachedAutomations = getCached("automations:list");
+    const [data, setData] = useState(cachedAutomations?.data ?? null);
+    const [loading, setLoading] = useState(!cachedAutomations);
     const [error, setError] = useState(null);
     const [filter, setFilter] = useState("all");
-    const [chooser, setChooser] = useState("closed");
     const { link, setLink } = useAutomationDeepLink();
-    const [chatOpen, setChatOpen] = useState(showChatPane);
     const rowRefs = useRef(new Map());
+    const focusAutomationChat = useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        window.dispatchEvent(new CustomEvent(CHAT_PREFILL_EVENT, {
+            detail: { text: NEW_AUTOMATION_PROMPT, select: false },
+        }));
+    }, []);
+    const newAgent = useAgentElement({
+        id: "action-new",
+        role: "button",
+        label: t("automationsfeed.new", { defaultValue: "New" }),
+        group: "automations-actions",
+        description: "Focus Automations chat to create a task or workflow",
+        onActivate: focusAutomationChat,
+    });
     const editor = useMemo(() => {
         if (link.kind === "list")
             return { kind: "none" };
@@ -110,22 +148,29 @@ export function AutomationsFeed({ connectedCredTypes, showChatPane = false, } =
                 id: next.taskId ?? NEW_AUTOMATION_LINK_ID,
             });
     }, [setLink]);
-    const refresh = useCallback(async () => {
-        setLoading(true);
+    const refresh = useCallback(async (options) => {
+        if (!options?.silent)
+            setLoading(true);
         setError(null);
         try {
             const res = await client.listAutomations();
             setData(res);
+            setCached("automations:list", res);
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : "Failed to load automations.");
+            setError(e instanceof Error
+                ? e.message
+                : t("automationsfeed.loadError", {
+                    defaultValue: "Failed to load automations.",
+                }));
         }
         finally {
             setLoading(false);
         }
-    }, []);
+    }, [t]);
     useEffect(() => {
-        void refresh();
+        // Revalidate silently when cached automations are already on screen.
+        void refresh({ silent: getCached("automations:list") != null });
     }, [refresh]);
     const automations = useMemo(() => (Array.isArray(data?.automations) ? data.automations : []), [data]);
     // Behavior #4: external "show only failed runs" / chip filter dispatcher.
@@ -156,15 +201,39 @@ export function AutomationsFeed({ connectedCredTypes, showChatPane = false, } =
         window.addEventListener(VISUALIZE_WORKFLOW_EVENT, handler);
         return () => window.removeEventListener(VISUALIZE_WORKFLOW_EVENT, handler);
     }, [setLink]);
+    const allRows = useMemo(() => automations.map((item) => automationToRow(item, t)), [automations, t]);
     const rows = useMemo(() => {
-        return automations
-            .map(automationToRow)
-            .filter((r) => passesFilter(r, filter));
-    }, [automations, filter]);
-    const tasksCount = useMemo(() => automations.filter((a) => a.type !== "workflow").length, [automations]);
-    const workflowsCount = typeof data?.summary?.workflowCount === "number"
-        ? data.summary.workflowCount
-        : automations.filter((a) => a.type === "workflow").length;
+        return allRows.filter((r) => passesFilter(r, filter));
+    }, [allRows, filter]);
+    const filterCounts = useMemo(() => ({
+        all: allRows.length,
+        tasks: allRows.filter((r) => r.kind === "task").length,
+        workflows: allRows.filter((r) => r.kind === "workflow").length,
+        active: allRows.filter((r) => r.active).length,
+        inactive: allRows.filter((r) => !r.active).length,
+    }), [allRows]);
+    const overviewStats = useMemo(() => [
+        {
+            key: "total",
+            label: t("automationsfeed.statTotal", { defaultValue: "Total" }),
+            value: allRows.length,
+        },
+        {
+            key: "active",
+            label: t("automationsfeed.statActive", { defaultValue: "Active" }),
+            value: filterCounts.active,
+        },
+        {
+            key: "passed",
+            label: t("automationsfeed.statPassed", { defaultValue: "Passed" }),
+            value: allRows.filter((row) => row.lastRunStatus === "success").length,
+        },
+        {
+            key: "failed",
+            label: t("automationsfeed.statFailed", { defaultValue: "Failed" }),
+            value: allRows.filter((row) => row.lastRunStatus === "error").length,
+        },
+    ], [allRows, filterCounts.active, t]);
     // Editor mode
     if (editor.kind === "task") {
         const existing = editor.taskId && data
@@ -185,94 +254,137 @@ export function AutomationsFeed({ connectedCredTypes, showChatPane = false, } =
     }
     if (editor.kind === "workflow") {
         return (_jsx(WorkflowEditorLoader, { workflowId: editor.workflowId, onSaved: () => {
-                setEditor({ kind: "none" });
                 void refresh();
             }, onCancel: () => setEditor({ kind: "none" }) }));
     }
-    const feedContent = (_jsxs("div", { "data-testid": "automations-shell", className: `device-layout mx-auto flex w-full ${chatOpen ? "max-w-3xl" : "max-w-5xl"} flex-col gap-4 px-4 py-4 lg:px-6`, children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("h1", { className: "text-lg font-semibold tracking-[-0.01em] text-txt", children: "Automations" }), _jsxs("p", { className: "text-sm text-muted-strong", children: [tasksCount, " task", tasksCount === 1 ? "" : "s", " \u00B7 ", workflowsCount, " ", "workflow", workflowsCount === 1 ? "" : "s"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setChatOpen((v) => !v), "aria-label": chatOpen ? "Hide chat" : "Show chat", "data-testid": "automations-feed-chat-toggle", children: _jsx(MessageSquare, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void refresh(), disabled: loading, "aria-label": "Refresh", children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`, "aria-hidden": true }) }), _jsxs(Button, { variant: "default", size: "sm", onClick: () => setChooser("task"), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }), "New"] })] })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: Object.keys(FILTER_LABELS).map((key) => (_jsx("button", { type: "button", onClick: () => setFilter(key), className: `rounded-full border px-3 py-1 text-xs transition-colors ${filter === key
-                        ? "border-accent bg-accent/10 text-accent"
-                        : "border-border/40 text-muted-strong hover:border-border"}`, children: FILTER_LABELS[key] }, key))) }), error && (_jsx("div", { className: "rounded-lg border border-danger/20 bg-danger/10 p-3 text-sm text-danger", children: error })), _jsx(PagePanel, { variant: "inset", className: "overflow-hidden rounded-2xl p-0", children: loading && !data ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Spinner, { className: "h-5 w-5" }) })) : rows.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-2 p-10 text-center text-sm text-muted-strong", children: [_jsx(ListChecks, { className: "h-6 w-6", "aria-hidden": true }), _jsx("div", { children: "No automations yet." }), _jsxs(Button, { variant: "default", size: "sm", onClick: () => setChooser("task"), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }), "Create your first automation"] })] })) : (_jsx("ul", { className: "divide-y divide-border/40", children: rows.map((row) => (_jsx(FeedRowItem, { row: row, connectedCredTypes: connectedCredTypes, registerRef: (el) => {
-                            const id = row.source.workflowId ?? row.source.id;
-                            if (el)
-                                rowRefs.current.set(id, el);
-                            else
-                                rowRefs.current.delete(id);
-                        }, onOpen: () => {
-                            if (row.kind === "task") {
-                                setEditor({
-                                    kind: "task",
-                                    taskId: row.source.task?.id ?? null,
-                                });
-                            }
-                            else {
-                                setEditor({
-                                    kind: "workflow",
-                                    workflowId: row.source.workflowId ?? null,
-                                });
-                            }
-                        }, onRunNow: async () => {
-                            if (row.kind !== "workflow" || !row.source.workflowId)
-                                return;
-                            try {
-                                await client.activateWorkflowDefinition(row.source.workflowId);
-                                await refresh();
-                            }
-                            catch {
-                                /* error surfaced on next refresh */
-                            }
-                        } }, row.key))) })) }), chooser !== "closed" && (_jsx(ChooserSheet, { onChooseTask: () => {
-                    setChooser("closed");
-                    setEditor({ kind: "task", taskId: null });
-                }, onChooseWorkflow: () => {
-                    setChooser("closed");
-                    setEditor({ kind: "workflow", workflowId: null });
-                }, onClose: () => setChooser("closed") }))] }));
-    if (!chatOpen)
-        return feedContent;
-    return (_jsxs("div", { className: "flex h-full min-h-0 w-full", children: [_jsx("div", { className: "min-w-0 flex-1 overflow-y-auto", children: feedContent }), _jsxs("aside", { className: "hidden w-[360px] shrink-0 border-l border-border/40 bg-bg/40 lg:block", "data-testid": "automations-feed-chat-pane", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border/30 px-3 py-2 text-xs font-medium text-txt", children: [_jsx("span", { children: "Ask the agent" }), _jsx("button", { type: "button", onClick: () => setChatOpen(false), className: "text-muted-strong hover:text-txt", "aria-label": "Collapse chat", children: _jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true }) })] }), _jsx(AutomationsChatPane, { className: "h-[calc(100%-37px)]" })] })] }));
+    const feedContent = (_jsx(ShellViewAgentSurface, { viewId: "automations", children: _jsxs("div", { "data-testid": "automations-shell", className: "device-layout mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-4 lg:px-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-accent/30 bg-gradient-to-br from-accent/20 to-accent/5 text-accent", "aria-hidden": true, children: _jsx(Zap, { className: "h-5 w-5" }) }), _jsx("h1", { className: "text-lg font-semibold tracking-[-0.01em] text-txt", children: t("automationsfeed.title", { defaultValue: "Automations" }) })] }), _jsxs(Button, { ref: newAgent.ref, variant: "default", size: "sm", onClick: focusAutomationChat, ...newAgent.agentProps, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }), t("automationsfeed.new", { defaultValue: "New" })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: overviewStats.map((stat) => (_jsx(OverviewStat, { statKey: stat.key, label: stat.label, value: stat.value }, stat.key))) }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: Object.keys(FILTER_LABELS).map((key) => (_jsx(FilterChipButton, { filter: key, label: t(FILTER_LABELS[key].key, {
+                            defaultValue: FILTER_LABELS[key].defaultLabel,
+                        }), icon: FILTER_ICONS[key], count: filterCounts[key], isActive: filter === key, onSelect: setFilter }, key))) }), error && (_jsx("div", { className: "rounded-sm border border-danger/20 bg-danger/10 p-3 text-sm text-danger", children: error })), _jsx(PagePanel, { variant: "inset", className: "overflow-hidden rounded-sm p-0", children: loading && !data ? (_jsx(ListSkeleton, { rows: 6, className: "p-3" })) : rows.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-5 px-6 py-14 text-center", children: [_jsx(AutomationEmptyIllustration, {}), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("automationsfeed.emptyHeadline", {
+                                            defaultValue: "Nothing scheduled yet",
+                                        }) }), _jsx("p", { className: "text-xs text-muted-strong", children: t("automationsfeed.emptySub", {
+                                            defaultValue: "Tasks and workflows you create run here.",
+                                        }) })] }), _jsxs(Button, { variant: "default", size: "sm", onClick: focusAutomationChat, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": true }), t("automationsfeed.createFirst", {
+                                        defaultValue: "Create your first automation",
+                                    })] })] })) : (_jsx("ul", { className: "divide-y divide-border/40", children: rows.map((row) => (_jsx(FeedRowItem, { row: row, connectedCredTypes: connectedCredTypes, registerRef: (el) => {
+                                const id = row.source.workflowId ?? row.source.id;
+                                if (el)
+                                    rowRefs.current.set(id, el);
+                                else
+                                    rowRefs.current.delete(id);
+                            }, onOpen: () => {
+                                if (row.kind === "task") {
+                                    setEditor({
+                                        kind: "task",
+                                        taskId: row.source.task?.id ?? null,
+                                    });
+                                }
+                                else {
+                                    setEditor({
+                                        kind: "workflow",
+                                        workflowId: row.source.workflowId ?? null,
+                                    });
+                                }
+                            }, onRunNow: async () => {
+                                if (row.kind !== "workflow" || !row.source.workflowId)
+                                    return;
+                                try {
+                                    await client.runWorkflowDefinition(row.source.workflowId);
+                                    await refresh();
+                                }
+                                catch (e) {
+                                    setError(e instanceof Error
+                                        ? e.message
+                                        : t("automationsfeed.runError", {
+                                            defaultValue: "Failed to run automation.",
+                                        }));
+                                }
+                            } }, row.key))) })) })] }) }));
+    return feedContent;
+}
+function OverviewStat({ statKey, label, value, }) {
+    return (_jsxs("div", { className: "rounded-sm border border-border/40 bg-bg-accent/25 px-3 py-2", "data-testid": `automation-stat-${statKey}`, children: [_jsx("div", { className: "text-2xs font-medium uppercase tracking-normal text-muted-strong", children: label }), _jsx("div", { className: "mt-1 text-lg font-semibold leading-none tabular-nums text-txt", children: value })] }));
+}
+function FilterChipButton({ filter, label, icon, count, isActive, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `tab-${filter}`,
+        role: "tab",
+        label,
+        group: "automations-filters",
+        status: isActive ? "active" : "inactive",
+        description: `Filter automations to "${label}"`,
+        onActivate: () => onSelect(filter),
+    });
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(filter), "aria-current": isActive ? "true" : undefined, className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${isActive
+            ? "border-accent bg-accent/10 text-accent"
+            : "border-border/40 text-muted-strong hover:border-border hover:bg-bg-accent/40"}`, ...agentProps, children: [_jsx("span", { className: "[&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }), _jsx("span", { children: label }), _jsx("span", { className: `min-w-4 rounded-full px-1 text-center text-[0.65rem] font-semibold tabular-nums ${isActive
+                    ? "bg-accent/20 text-accent"
+                    : "bg-bg-accent text-muted-strong"}`, children: count })] }));
 }
 function FeedRowItem({ row, onOpen, onRunNow, connectedCredTypes: _connectedCredTypes, registerRef, }) {
-    const Icon = row.kind === "workflow" ? Workflow : CheckCircle2;
-    return (_jsxs("li", { ref: registerRef, className: "group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-bg-accent/40", children: [_jsxs("button", { type: "button", onClick: onOpen, className: "flex min-w-0 flex-1 items-center gap-3 text-left", children: [_jsx(Icon, { className: `h-4 w-4 shrink-0 ${row.kind === "workflow" ? "text-violet-400" : "text-blue-400"}`, "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: row.title }), _jsx(StatusBadge, { tone: "muted", label: row.kind === "workflow" ? "Workflow" : "Task" }), row.active ? (_jsx(StatusBadge, { tone: "success", label: "Active" })) : (_jsx(StatusBadge, { tone: "muted", label: "Inactive" }))] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-strong", children: [row.schedule && (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Calendar, { className: "h-3 w-3", "aria-hidden": true }), row.schedule] })), row.lastUpdated && (_jsxs("span", { children: ["Updated", " ", new Date(row.lastUpdated).toLocaleString(undefined, {
-                                                month: "short",
-                                                day: "numeric",
-                                                hour: "numeric",
-                                                minute: "2-digit",
-                                            })] }))] })] })] }), row.kind === "workflow" && (_jsx("button", { type: "button", "aria-label": row.active ? "Deactivate workflow" : "Activate workflow", onClick: onRunNow, className: "rounded-md border border-border/40 px-2 py-1 text-xs text-muted-strong opacity-0 transition-opacity hover:border-border group-hover:opacity-100 focus:opacity-100", children: row.active ? (_jsx(Pause, { className: "h-3 w-3", "aria-hidden": true })) : (_jsx(Play, { className: "h-3 w-3", "aria-hidden": true })) }))] }));
+    const { t } = useTranslation();
+    const isWorkflow = row.kind === "workflow";
+    const Icon = isWorkflow ? Workflow : CheckCircle2;
+    const medallionClasses = isWorkflow
+        ? "border-accent/30 bg-gradient-to-br from-accent/20 to-accent/5 text-accent"
+        : "border-border/60 bg-bg-accent text-muted-strong";
+    const workflowId = row.source.workflowId ?? row.source.id;
+    const runAction = useAgentElement({
+        id: `run-workflow-${workflowId}`,
+        role: "button",
+        label: `Run ${row.title}`,
+        group: "automations-actions",
+        description: "Run this workflow now and refresh its latest status.",
+        status: isWorkflow ? "active" : "inactive",
+        onActivate: onRunNow,
+    });
+    return (_jsxs("li", { ref: registerRef, className: "group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-bg-accent/40", children: [_jsxs("button", { type: "button", onClick: onOpen, className: "flex min-w-0 flex-1 items-center gap-3 text-left", children: [_jsx("span", { className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border ${medallionClasses}`, "aria-hidden": true, children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: row.title }), _jsx(StatusBadge, { withDot: true, tone: row.active ? "success" : "muted", label: row.active
+                                            ? t("automationsfeed.active", { defaultValue: "Active" })
+                                            : t("automationsfeed.inactive", { defaultValue: "Inactive" }) })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-strong", children: [row.schedule && (_jsx(RowChip, { icon: _jsx(CalendarClock, { className: "h-3 w-3" }), label: row.schedule, tone: "accent" })), row.lastRunStatus && (_jsx(RowChip, { icon: _jsx(History, { className: "h-3 w-3" }), label: t(`automationsfeed.run.${row.lastRunStatus}`, {
+                                            defaultValue: row.lastRunStatus,
+                                        }), tone: row.lastRunStatus === "error"
+                                            ? "danger"
+                                            : row.lastRunStatus === "success"
+                                                ? "success"
+                                                : "muted" })), !row.schedule && row.lastUpdated && (_jsx(RowChip, { icon: _jsx(Clock, { className: "h-3 w-3" }), label: new Date(row.lastUpdated).toLocaleString(undefined, {
+                                            month: "short",
+                                            day: "numeric",
+                                            hour: "numeric",
+                                            minute: "2-digit",
+                                        }) }))] })] })] }), row.kind === "workflow" && (_jsx("button", { ref: runAction.ref, type: "button", "aria-label": t("automationsfeed.runWorkflowNow", {
+                    name: row.title,
+                    defaultValue: "Run {{name}} now",
+                }), onClick: onRunNow, className: "rounded-sm border border-border/40 p-1.5 text-muted-strong transition-colors hover:border-border hover:bg-bg-accent focus:bg-bg-accent", ...runAction.agentProps, children: _jsx(PlayCircle, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] }));
 }
-function ChooserSheet({ onChooseTask, onChooseWorkflow, onClose, }) {
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 lg:items-center", children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "absolute inset-0 cursor-default" }), _jsxs("dialog", { open: true, className: "relative m-0 w-full max-w-md rounded-2xl border border-border/40 bg-bg p-4 shadow-xl", "aria-modal": "true", children: [_jsx("h3", { className: "mb-3 text-base font-semibold text-txt", children: "What do you want to create?" }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("button", { type: "button", onClick: onChooseTask, className: "flex items-start gap-3 rounded-xl border border-border/40 p-3 text-left transition-colors hover:border-accent hover:bg-accent/5", children: [_jsx(CheckCircle2, { className: "mt-0.5 h-5 w-5 shrink-0 text-blue-400", "aria-hidden": true }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-txt", children: "Task (simple prompt)" }), _jsx("div", { className: "text-xs text-muted-strong", children: "One prompt, run once or on a schedule. Pick this if you're not sure." })] })] }), _jsxs("button", { type: "button", onClick: onChooseWorkflow, className: "flex items-start gap-3 rounded-xl border border-border/40 p-3 text-left transition-colors hover:border-accent hover:bg-accent/5", children: [_jsx(Workflow, { className: "mt-0.5 h-5 w-5 shrink-0 text-violet-400", "aria-hidden": true }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-txt", children: "Workflow (node graph)" }), _jsx("div", { className: "text-xs text-muted-strong", children: "Multi-step. Trigger \u2192 actions \u2192 integrations. Edit JSON or generate from a prompt." })] })] })] })] })] }));
+function RowChip({ icon, label, tone = "muted", }) {
+    const toneClasses = {
+        muted: "border-border/40 bg-bg-accent/40 text-muted-strong",
+        accent: "border-accent/25 bg-accent/10 text-accent",
+        success: "border-ok/30 bg-ok/10 text-ok",
+        danger: "border-destructive/30 bg-destructive/10 text-destructive",
+    }[tone];
+    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 ${toneClasses}`, children: [_jsx("span", { className: "[&>svg]:h-3 [&>svg]:w-3", children: icon }), _jsx("span", { className: "truncate", children: label })] }));
+}
+/**
+ * Generative clock + workflow-node motif for the empty state. Pure SVG with
+ * gradient fills driven by the theme accent token, so it tracks light/dark and
+ * brand color without bitmap assets.
+ */
+function AutomationEmptyIllustration() {
+    return (_jsxs("svg", { width: "148", height: "120", viewBox: "0 0 148 120", fill: "none", "aria-hidden": "true", className: "text-accent", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "autoFill", x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--accent)", stopOpacity: "0.22" }), _jsx("stop", { offset: "100%", stopColor: "var(--accent)", stopOpacity: "0.04" })] }), _jsxs("linearGradient", { id: "autoRing", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--accent)", stopOpacity: "0.9" }), _jsx("stop", { offset: "100%", stopColor: "var(--accent)", stopOpacity: "0.4" })] })] }), _jsx("path", { d: "M96 60 H120 M120 60 V36 M120 60 V84", stroke: "var(--accent)", strokeOpacity: "0.35", strokeWidth: "2", strokeLinecap: "round" }), _jsx("circle", { cx: "60", cy: "60", r: "34", fill: "url(#autoFill)" }), _jsx("circle", { cx: "60", cy: "60", r: "34", stroke: "url(#autoRing)", strokeWidth: "2.5" }), _jsx("path", { d: "M60 60 V40 M60 60 L74 68", stroke: "var(--accent)", strokeWidth: "3", strokeLinecap: "round" }), _jsx("circle", { cx: "60", cy: "60", r: "3.5", fill: "var(--accent)" }), _jsxs("g", { stroke: "var(--accent)", strokeOpacity: "0.5", strokeWidth: "2", strokeLinecap: "round", children: [_jsx("path", { d: "M60 30 V34" }), _jsx("path", { d: "M60 86 V90" }), _jsx("path", { d: "M30 60 H34" }), _jsx("path", { d: "M86 60 H90" })] }), _jsxs("g", { children: [_jsx("rect", { x: "108", y: "26", width: "20", height: "20", rx: "5", fill: "url(#autoFill)", stroke: "url(#autoRing)", strokeWidth: "2" }), _jsx("rect", { x: "108", y: "74", width: "20", height: "20", rx: "5", fill: "url(#autoFill)", stroke: "url(#autoRing)", strokeWidth: "2" })] })] }));
 }
 function WorkflowEditorLoader({ workflowId, onSaved, onCancel, }) {
-    const [loaded, setLoaded] = useState(workflowId ? null : { workflow: null });
-    const [loadError, setLoadError] = useState(null);
-    useEffect(() => {
-        if (!workflowId) {
-            setLoaded({ workflow: null });
-            return;
-        }
-        let cancelled = false;
-        void (async () => {
-            try {
-                const wf = await client.getWorkflowDefinition(workflowId);
-                if (!cancelled)
-                    setLoaded({ workflow: wf });
-            }
-            catch (e) {
-                if (!cancelled) {
-                    setLoadError(e instanceof Error ? e.message : "Failed to load workflow.");
-                }
-            }
-        })();
-        return () => {
-            cancelled = true;
-        };
-    }, [workflowId]);
-    if (loadError) {
-        return (_jsxs("div", { className: "p-6", children: [_jsx("div", { className: "rounded-lg border border-danger/20 bg-danger/10 p-3 text-sm text-danger", children: loadError }), _jsx(Button, { variant: "ghost", size: "sm", className: "mt-3", onClick: onCancel, children: "Back" })] }));
+    const { t } = useTranslation();
+    // A null workflowId means "create new" — resolve to a null definition
+    // without hitting the API. Otherwise fetch the definition to edit.
+    const fetchState = useFetchData(async () => (workflowId ? client.getWorkflowDefinition(workflowId) : null), [workflowId]);
+    if (fetchState.status === "error") {
+        return (_jsxs("div", { className: "p-6", children: [_jsx("div", { className: "rounded-sm border border-danger/20 bg-danger/10 p-3 text-sm text-danger", children: fetchState.error.message ||
+                        t("automationsfeed.workflowLoadError", {
+                            defaultValue: "Failed to load workflow.",
+                        }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "mt-3", onClick: onCancel, children: t("automationsfeed.back", { defaultValue: "Back" }) })] }));
     }
-    if (!loaded) {
+    if (fetchState.status !== "success") {
         return (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsx(Spinner, { className: "h-5 w-5" }) }));
     }
-    return (_jsx("div", { className: "device-layout mx-auto flex h-full w-full max-w-7xl flex-col gap-4 px-4 py-4 lg:px-6", children: _jsx(WorkflowEditor, { initial: loaded.workflow, onSaved: onSaved, onCancel: onCancel }) }));
+    return (_jsx("div", { className: "device-layout mx-auto flex h-full w-full max-w-7xl flex-col gap-4 px-4 py-4 lg:px-6", children: _jsx(WorkflowEditor, { initial: fetchState.data, onSaved: onSaved, onCancel: onCancel }) }));
 }

package/components/pages/BrowserWorkspaceView.d.ts

@@ -1,17 +1,71 @@
-import { type JSX } from "react";
-declare module "react" {
+type WebviewTagElement = HTMLElement & {
+    loadURL(url: string): void;
+    reload(): void;
+    executeJavascript(js: string): void;
+    on(event: "host-message", handler: (event: CustomEvent) => void): void;
+    off(event: "host-message", handler: (event: CustomEvent) => void): void;
+    /**
+     * Synchronizes the OOPIF's frame with the anchor's `getBoundingClientRect()`.
+     * The tag auto-syncs on its own resize, but layout changes outside the
+     * element (sidebar collapse, window resize, parent flex reflow) need a
+     * manual poke. `force: true` triggers the sync even if dimensions look
+     * unchanged.
+     */
+    syncDimensions(force?: boolean): void;
+    /**
+     * Hide/show the underlying native OOPIF view. The HTML `hidden` attribute
+     * does not propagate to the native layer — only this method does. Without
+     * it, inactive tabs' OOPIFs stay painted over the surface and intercept
+     * clicks meant for sibling UI.
+     */
+    toggleHidden(value?: boolean): void;
+    /**
+     * Toggle pointer-event passthrough on the native OOPIF view. When enabled
+     * the surface stops capturing clicks even if it remains visible, so React
+     * siblings stacked over the same rect (overlays mid-transition, the
+     * inactive-tab opacity-0 layer) can receive events. Used alongside
+     * `toggleHidden` on inactive tabs so the native view neither paints nor
+     * grabs input during the gap between layout flap and first sync.
+     */
+    togglePassthrough(value?: boolean): void;
+};
+type ElectrobunWebviewProps = React.DetailedHTMLProps<React.HTMLAttributes<WebviewTagElement> & {
+    src?: string;
+    partition?: string;
+    preload?: string;
+    sandbox?: boolean | "";
+    transparent?: boolean | "";
+    hidden?: boolean;
+    /**
+     * "cef" (bundled Chromium) or "native" (system WKWebView on macOS).
+     * Set explicitly per-tag rather than relying on the
+     * `defaultRenderer` config: CEF is what supports the OOPIF model
+     * + RPC + preload script the agent automation kit depends on.
+     */
+    renderer?: "cef" | "native";
+    /**
+     * Comma-separated CSS selectors. Any element matching is treated
+     * as a punch-out rect — the native OOPIF will not paint over it
+     * and will not capture clicks within it. Required so React
+     * overlays (modals, dropdowns, toasts) render above the webview
+     * surface and remain interactive.
+     */
+    masks?: string;
+    /**
+     * Initial passthrough state. When present the OOPIF starts in
+     * pointer-events: none mode. Set on inactive tabs so the gap
+     * between mount and the first selection effect doesn't leak
+     * clicks into the wrong tab.
+     */
+    passthrough?: boolean | "";
+}, WebviewTagElement>;
+declare module "react/jsx-runtime" {
     namespace JSX {
         interface IntrinsicElements {
-            "electrobun-webview": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-                src?: string;
-                partition?: string;
-                preload?: string;
-                sandbox?: boolean | "";
-                transparent?: boolean | "";
-                hidden?: boolean;
-            }, HTMLElement>;
+            "electrobun-webview": ElectrobunWebviewProps;
         }
     }
 }
-export declare function BrowserWorkspaceView(): JSX.Element;
+export declare function BrowserWorkspaceView(): React.JSX.Element;
+export {};
 //# sourceMappingURL=BrowserWorkspaceView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BrowserWorkspaceView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/BrowserWorkspaceView.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,GAAG,EAMT,MAAM,OAAO,CAAC;AAsFf,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAClC,GAAG,CAAC,EAAE,MAAM,CAAC;gBACb,SAAS,CAAC,EAAE,MAAM,CAAC;gBACnB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;gBACvB,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;gBAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;aAClB,EACD,WAAW,CACZ,CAAC;SACH;KACF;CACF;AA0OD,wBAAgB,oBAAoB,IAAI,GAAG,CAAC,OAAO,CAguElD"}
+{"version":3,"file":"BrowserWorkspaceView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/BrowserWorkspaceView.tsx"],"names":[],"mappings":"AA8FA,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACrC,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,IAAI,IAAI,CAAC;IACf,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACvE,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CAAC;IACxE;;;;;;OAMG;IACH,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1C,CAAC;AAcF,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CACnD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC;CAC5B,EACD,iBAAiB,CAClB,CAAC;AAIF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,oBAAoB,EAAE,sBAAsB,CAAC;SAC9C;KACF;CACF;AAoYD,wBAAgB,oBAAoB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAq3ExD"}