@agent-native/dispatch 0.11.1 → 0.11.3

package/dist/components/dispatch-control-plane.js

@@ -0,0 +1,432 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { PromptComposer, agentNativePath, isInBuilderFrame, useActionQuery, useChangeVersions, useChatModels, useChatThreads, } from "@agent-native/core/client";
+import { RunsTray } from "@agent-native/core/client/progress";
+import { IconActivity, IconAlertTriangle, IconArrowUpRight, IconBolt, IconBroadcast, IconCheck, IconListCheck, IconMessages, IconPlayerPlay, IconPlugConnected, IconPlus, IconRobot, IconRocket, IconSettingsAutomation, IconShieldCheck, IconStack3, IconUsersGroup, } from "@tabler/icons-react";
+import { toast } from "sonner";
+import { CreateAppPopover } from "../components/create-app-popover.js";
+import { DispatchShell } from "../components/dispatch-shell.js";
+import { WorkspaceAppCard } from "../components/workspace-app-card.js";
+import { Badge } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { Skeleton } from "../components/ui/skeleton.js";
+import { Switch } from "../components/ui/switch.js";
+import { cn } from "../lib/utils.js";
+import { listDispatchAutomations, setDispatchAutomationEnabled, } from "../lib/automations.js";
+import { submitOverviewPrompt } from "../lib/overview-chat.js";
+const ZERO_TASK_QUEUE_STATS = {
+    pending: 0,
+    processing: 0,
+    completed_last_hour: 0,
+    failed_last_hour: 0,
+    oldest_pending_age_seconds: 0,
+    recent_failures: [],
+};
+const PROMPT_SUGGESTIONS = [
+    "Summarize the current workspace health",
+    "Create an app for onboarding requests",
+    "Check which agents can help with analytics",
+];
+const AUTOMATIONS_QUERY_KEY = [
+    "dispatch-control-plane",
+    "automations",
+];
+function formatNumber(value) {
+    return new Intl.NumberFormat(undefined, {
+        notation: value >= 10_000 ? "compact" : "standard",
+        maximumFractionDigits: value >= 10_000 ? 1 : 0,
+    }).format(value);
+}
+function formatAgeSeconds(seconds) {
+    if (!seconds || seconds < 0)
+        return "0s";
+    if (seconds < 60)
+        return `${Math.floor(seconds)}s`;
+    if (seconds < 3600)
+        return `${Math.floor(seconds / 60)}m`;
+    return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+}
+function timeAgo(value) {
+    if (value == null || value === "")
+        return "never";
+    const timestamp = typeof value === "number" ? value : new Date(value).getTime();
+    if (!Number.isFinite(timestamp))
+        return "never";
+    const diff = Math.max(0, Date.now() - timestamp);
+    if (diff < 60_000)
+        return "now";
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h`;
+    return `${Math.floor(diff / 86_400_000)}d`;
+}
+function relativeRunTime(value) {
+    if (!value)
+        return "never";
+    const timestamp = new Date(value).getTime();
+    if (!Number.isFinite(timestamp))
+        return "never";
+    const diff = timestamp - Date.now();
+    const abs = Math.abs(diff);
+    const suffix = diff >= 0 ? "from now" : "ago";
+    if (abs < 60_000)
+        return diff >= 0 ? "soon" : "now";
+    if (abs < 3_600_000)
+        return `${Math.floor(abs / 60_000)}m ${suffix}`;
+    if (abs < 86_400_000)
+        return `${Math.floor(abs / 3_600_000)}h ${suffix}`;
+    return `${Math.floor(abs / 86_400_000)}d ${suffix}`;
+}
+function dateTimeTitle(value) {
+    if (!value)
+        return undefined;
+    const timestamp = new Date(value).getTime();
+    if (!Number.isFinite(timestamp))
+        return undefined;
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short",
+    }).format(timestamp);
+}
+function threadUpdatedAt(thread) {
+    return Number.isFinite(thread.updatedAt)
+        ? thread.updatedAt
+        : Number.isFinite(thread.createdAt)
+            ? thread.createdAt
+            : 0;
+}
+function threadTitle(thread) {
+    return thread.title || thread.preview || "New chat";
+}
+function automationTarget(item) {
+    if (item.triggerType === "event" && item.event)
+        return item.event;
+    if (item.scheduleDescription)
+        return item.scheduleDescription;
+    if (item.schedule)
+        return item.schedule;
+    return item.triggerType || "schedule";
+}
+function automationLastRun(item) {
+    return item.lastRun ? relativeRunTime(item.lastRun) : "never";
+}
+function automationNextRun(item) {
+    if (!item.enabled)
+        return "paused";
+    if (item.triggerType === "event")
+        return "on event";
+    return item.nextRun ? relativeRunTime(item.nextRun) : "not scheduled";
+}
+function automationStatus(item) {
+    if (!item.enabled)
+        return { label: "Paused", tone: "muted" };
+    if (item.lastStatus === "error")
+        return { label: "Error", tone: "danger" };
+    if (item.lastStatus === "running")
+        return { label: "Running", tone: "warning" };
+    if (item.lastStatus === "skipped")
+        return { label: "Skipped", tone: "warning" };
+    if (item.lastStatus === "success")
+        return { label: "Healthy", tone: "success" };
+    return { label: "Ready", tone: "default" };
+}
+function automationIdentity(item) {
+    return `${item.owner}:${item.path}`;
+}
+function StatusDot({ tone = "default", }) {
+    return (_jsx("span", { className: cn("size-2 rounded-full", tone === "success" && "bg-emerald-500", tone === "warning" && "bg-amber-500", tone === "danger" && "bg-destructive", tone === "muted" && "bg-muted-foreground/35", tone === "default" && "bg-primary") }));
+}
+function useAutomationsStatus() {
+    const version = useChangeVersions(["action", "screen-refresh"]);
+    return useQuery({
+        queryKey: [...AUTOMATIONS_QUERY_KEY, version],
+        queryFn: listDispatchAutomations,
+        placeholderData: (prev) => prev,
+        refetchInterval: 15_000,
+        staleTime: 5_000,
+    });
+}
+function useToggleAutomation() {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: setDispatchAutomationEnabled,
+        onMutate: async (input) => {
+            await queryClient.cancelQueries({ queryKey: AUTOMATIONS_QUERY_KEY });
+            const snapshots = queryClient.getQueriesData({
+                queryKey: AUTOMATIONS_QUERY_KEY,
+            });
+            queryClient.setQueriesData({ queryKey: AUTOMATIONS_QUERY_KEY }, (rows) => rows?.map((item) => automationIdentity(item) === automationIdentity(input)
+                ? { ...item, enabled: input.enabled }
+                : item));
+            return { snapshots };
+        },
+        onError: (err, _input, context) => {
+            for (const [queryKey, data] of context?.snapshots ?? []) {
+                queryClient.setQueryData(queryKey, data);
+            }
+            toast.error(`Could not update automation: ${err instanceof Error ? err.message : String(err)}`);
+        },
+        onSuccess: (updated) => {
+            queryClient.setQueriesData({ queryKey: AUTOMATIONS_QUERY_KEY }, (rows) => rows?.map((item) => automationIdentity(item) === automationIdentity(updated)
+                ? updated
+                : item));
+        },
+        onSettled: () => {
+            void queryClient.invalidateQueries({ queryKey: AUTOMATIONS_QUERY_KEY });
+        },
+    });
+}
+function useTaskQueueStats() {
+    return useQuery({
+        queryKey: ["dispatch-control-plane", "task-queue"],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath("/_agent-native/integrations/task-queue/status"));
+            if (!res.ok)
+                return ZERO_TASK_QUEUE_STATS;
+            const stats = await res.json();
+            if (!stats || typeof stats !== "object")
+                return ZERO_TASK_QUEUE_STATS;
+            return {
+                pending: Number(stats.pending ?? 0),
+                processing: Number(stats.processing ?? 0),
+                completed_last_hour: Number(stats.completed_last_hour ?? 0),
+                failed_last_hour: Number(stats.failed_last_hour ?? 0),
+                oldest_pending_age_seconds: Number(stats.oldest_pending_age_seconds ?? 0),
+                recent_failures: Array.isArray(stats.recent_failures)
+                    ? stats.recent_failures
+                    : [],
+            };
+        },
+        placeholderData: (prev) => prev,
+        refetchInterval: 15_000,
+        staleTime: 5_000,
+    });
+}
+function CommandPanel() {
+    const { selectedModel } = useChatModels();
+    const navigate = useNavigate();
+    function send(message) {
+        const trimmed = message.trim();
+        if (!trimmed)
+            return;
+        if (isInBuilderFrame()) {
+            submitOverviewPrompt(trimmed, selectedModel);
+            return;
+        }
+        navigate("/chat", {
+            state: {
+                dispatchPrompt: {
+                    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                    message: trimmed,
+                    selectedModel,
+                },
+            },
+        });
+    }
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconBroadcast, { size: 16, className: "text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Ask Dispatch" })] }), _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { to: "/chat", children: ["Open chat", _jsx(IconArrowUpRight, { size: 14 })] }) })] }), _jsx(PromptComposer, { placeholder: "Route work, inspect status, or create an app...", onSubmit: (text) => send(text) }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: PROMPT_SUGGESTIONS.map((suggestion) => (_jsx("button", { type: "button", onClick: () => send(suggestion), className: "cursor-pointer rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-muted-foreground transition hover:border-foreground/30 hover:text-foreground", children: suggestion }, suggestion))) })] }));
+}
+function MetricCard({ label, value, detail, icon: Icon, to, tone = "default", }) {
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [_jsx(Icon, { size: 15 }), _jsx("span", { className: "truncate", children: label })] }), _jsx(StatusDot, { tone: tone === "success"
+                            ? "success"
+                            : tone === "warning"
+                                ? "warning"
+                                : tone === "danger"
+                                    ? "danger"
+                                    : "default" })] }), _jsx("div", { className: "mt-3 text-2xl font-semibold tracking-tight text-foreground", children: value }), _jsx("div", { className: "mt-1 truncate text-xs text-muted-foreground", children: detail })] }));
+    const className = cn("block min-w-0 rounded-lg border bg-card p-4 transition", to && "hover:border-foreground/30 hover:bg-muted/20");
+    if (to) {
+        return (_jsx(Link, { to: to, className: className, children: body }));
+    }
+    return _jsx("div", { className: className, children: body });
+}
+function ControlPlaneMetrics({ overview, apps, agents, automations, threads, taskQueue, }) {
+    const activeApps = apps.filter((app) => !app.isDispatch && !app.archived);
+    const pendingApps = activeApps.filter((app) => app.status === "pending");
+    const enabledAutomations = automations.filter((item) => item.enabled);
+    const automationErrors = automations.filter((item) => item.enabled && item.lastStatus === "error");
+    const pendingApprovals = overview?.counts?.pendingApprovals ?? 0;
+    const activeRuns = taskQueue.processing;
+    return (_jsxs("section", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-6", children: [_jsx(MetricCard, { label: "Chats", value: formatNumber(threads.length), detail: `${threads.filter((thread) => thread.messageCount > 0).length} with messages`, icon: IconMessages, to: "/chat" }), _jsx(MetricCard, { label: "Runs", value: formatNumber(activeRuns), detail: `${formatNumber(taskQueue.pending)} queued`, icon: IconPlayerPlay, tone: taskQueue.failed_last_hour > 0
+                    ? "danger"
+                    : taskQueue.pending > 5
+                        ? "warning"
+                        : "default" }), _jsx(MetricCard, { label: "Apps", value: formatNumber(activeApps.length), detail: `${formatNumber(pendingApps.length)} building`, icon: IconStack3, to: "/apps", tone: pendingApps.length > 0 ? "warning" : "default" }), _jsx(MetricCard, { label: "Agents", value: formatNumber(agents.length), detail: `${formatNumber(agents.filter((agent) => agent.source === "custom").length)} custom`, icon: IconRobot, to: "/agents" }), _jsx(MetricCard, { label: "Automations", value: formatNumber(enabledAutomations.length), detail: `${formatNumber(automationErrors.length)} need attention`, icon: IconSettingsAutomation, tone: automationErrors.length > 0 ? "danger" : "success" }), _jsx(MetricCard, { label: "Approvals", value: formatNumber(pendingApprovals), detail: overview?.settings?.enabled ? "review mode" : "immediate changes", icon: IconShieldCheck, to: "/approvals", tone: pendingApprovals > 0 ? "warning" : "default" })] }));
+}
+function SectionHeader({ icon: Icon, title, detail, action, }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Icon, { size: 16, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: title }), detail ? (_jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: detail })) : null] })] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+}
+function RecentChatsPanel() {
+    const navigate = useNavigate();
+    const { threads, activeThreadId, createThread, switchThread } = useChatThreads(undefined, undefined, undefined, { autoCreate: false });
+    const [creating, setCreating] = useState(false);
+    const visibleThreads = useMemo(() => threads
+        .filter((thread) => thread.messageCount > 0 || thread.id === activeThreadId)
+        .sort((a, b) => threadUpdatedAt(b) - threadUpdatedAt(a))
+        .slice(0, 5), [activeThreadId, threads]);
+    function openThread(threadId, isNew = false) {
+        switchThread(threadId);
+        navigate("/chat", {
+            state: {
+                dispatchThread: {
+                    id: `${Date.now()}-${threadId}`,
+                    threadId,
+                },
+            },
+        });
+        window.requestAnimationFrame(() => {
+            window.dispatchEvent(new CustomEvent("agent-chat:open-thread", {
+                detail: { threadId, newThread: isNew },
+            }));
+        });
+    }
+    async function handleNewChat() {
+        setCreating(true);
+        try {
+            const threadId = await createThread();
+            if (threadId)
+                openThread(threadId, true);
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconMessages, title: "Chats", detail: `${visibleThreads.length} recent`, action: _jsxs(Button, { variant: "outline", size: "sm", onClick: handleNewChat, disabled: creating, children: [_jsx(IconPlus, { size: 14 }), "New"] }) }), _jsx("div", { className: "mt-3 divide-y rounded-md border", children: visibleThreads.length > 0 ? (visibleThreads.map((thread) => (_jsxs("button", { type: "button", onClick: () => openThread(thread.id), className: "grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 px-3 py-2.5 text-left transition hover:bg-muted/40", children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: threadTitle(thread) }), _jsx("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: thread.preview || `${thread.messageCount} messages` })] }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: timeAgo(threadUpdatedAt(thread)) })] }, thread.id)))) : (_jsx("button", { type: "button", onClick: handleNewChat, className: "block w-full px-3 py-8 text-center text-sm text-muted-foreground transition hover:bg-muted/40", children: "Start a Dispatch chat" })) })] }));
+}
+function RunsPanel({ taskQueue }) {
+    const hasFailure = taskQueue.failed_last_hour > 0;
+    const hasBacklog = taskQueue.pending > 5 || taskQueue.oldest_pending_age_seconds > 300;
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconPlayerPlay, title: "Runs", detail: hasFailure
+                    ? `${taskQueue.failed_last_hour} failed in the last hour`
+                    : `${taskQueue.processing} processing`, action: _jsx(RunsTray, { triggerVariant: "pill", hideWhenIdle: false, showRecent: true, limit: 8 }) }), _jsxs("div", { className: "mt-3 grid grid-cols-4 gap-2", children: [_jsx(QueueCell, { label: "Queued", value: taskQueue.pending }), _jsx(QueueCell, { label: "Active", value: taskQueue.processing }), _jsx(QueueCell, { label: "Done 1h", value: taskQueue.completed_last_hour }), _jsx(QueueCell, { label: "Failed 1h", value: taskQueue.failed_last_hour, danger: hasFailure })] }), _jsxs("div", { className: cn("mt-3 rounded-md border px-3 py-2 text-xs", hasFailure
+                    ? "border-destructive/30 bg-destructive/5 text-destructive"
+                    : hasBacklog
+                        ? "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+                        : "bg-muted/20 text-muted-foreground"), children: ["Oldest queued: ", formatAgeSeconds(taskQueue.oldest_pending_age_seconds)] }), taskQueue.recent_failures.length > 0 ? (_jsx("div", { className: "mt-3 divide-y rounded-md border", children: taskQueue.recent_failures.slice(0, 3).map((failure) => (_jsxs("div", { className: "px-3 py-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { className: "font-medium text-foreground", children: failure.platform }), _jsxs("span", { className: "text-muted-foreground", children: [failure.attempts, " attempts"] })] }), _jsx("div", { className: "mt-1 truncate text-xs text-muted-foreground", children: failure.error || "(no error message)" })] }, failure.id))) })) : null] }));
+}
+function QueueCell({ label, value, danger, }) {
+    return (_jsxs("div", { className: "rounded-md border bg-background px-2 py-2", children: [_jsx("div", { className: cn("text-lg font-semibold text-foreground", danger && "text-destructive"), children: formatNumber(value) }), _jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: label })] }));
+}
+function AppsPanel({ apps, isLoading, }) {
+    const visibleApps = apps
+        .filter((app) => !app.isDispatch && !app.archived)
+        .slice(0, 4);
+    const showSkeletons = isLoading && visibleApps.length === 0;
+    return (_jsxs("section", { className: "space-y-3", children: [_jsx(SectionHeader, { icon: IconStack3, title: "Projects and apps", detail: `${apps.filter((app) => !app.isDispatch && !app.archived).length} active`, action: _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { to: "/apps", children: ["View all", _jsx(IconArrowUpRight, { size: 14 })] }) }) }), showSkeletons ? (_jsx("div", { className: "grid gap-3 md:grid-cols-2", children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: "rounded-lg border bg-card p-4", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "mt-3 h-3 w-24" }), _jsx(Skeleton, { className: "mt-3 h-3 w-full" })] }, index))) })) : visibleApps.length > 0 ? (_jsx("div", { className: "grid gap-3 md:grid-cols-2", children: visibleApps.map((app) => (_jsx(WorkspaceAppCard, { app: app, className: "min-h-32" }, app.id))) })) : (_jsx(CreateAppPopover, {}))] }));
+}
+function AutomationsPanel({ automations, isLoading, }) {
+    const toggleAutomation = useToggleAutomation();
+    const ordered = useMemo(() => [...automations].sort((a, b) => {
+        const aError = a.enabled && a.lastStatus === "error" ? 1 : 0;
+        const bError = b.enabled && b.lastStatus === "error" ? 1 : 0;
+        if (aError !== bError)
+            return bError - aError;
+        return (b.lastRun || "").localeCompare(a.lastRun || "");
+    }), [automations]);
+    const enabled = automations.filter((item) => item.enabled).length;
+    const errors = automations.filter((item) => item.enabled && item.lastStatus === "error").length;
+    const pendingToggleIdentity = toggleAutomation.isPending
+        ? toggleAutomation.variables
+            ? automationIdentity(toggleAutomation.variables)
+            : null
+        : null;
+    function handleToggle(item, enabled) {
+        toggleAutomation.mutate({
+            owner: item.owner,
+            path: item.path,
+            enabled,
+        });
+    }
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconSettingsAutomation, title: "Automations", detail: `${enabled} enabled · ${errors} errors`, action: _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { to: "/chat", children: ["Create", _jsx(IconArrowUpRight, { size: 14 })] }) }) }), _jsx("div", { className: "mt-3 divide-y rounded-md border", children: isLoading && ordered.length === 0 ? (Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "mt-2 h-3 w-28" })] }, index)))) : ordered.length > 0 ? (ordered.slice(0, 6).map((item) => {
+                    const status = automationStatus(item);
+                    const canUpdate = item.canUpdate !== false;
+                    const isToggling = pendingToggleIdentity === automationIdentity(item);
+                    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusDot, { tone: status.tone }), _jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.name })] }), _jsx("div", { className: "mt-1 truncate text-xs text-muted-foreground", children: automationTarget(item) }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: [_jsxs("span", { title: dateTimeTitle(item.lastRun), children: ["Last ", automationLastRun(item)] }), _jsxs("span", { title: dateTimeTitle(item.nextRun), children: ["Next ", automationNextRun(item)] })] }), item.lastError ? (_jsx("div", { className: "mt-1 truncate text-xs text-destructive", children: item.lastError })) : null] }), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(Badge, { variant: status.tone === "danger" ? "destructive" : "outline", className: "h-5", children: status.label }), _jsx(Switch, { checked: !!item.enabled, disabled: !canUpdate || isToggling, "aria-label": `${item.enabled ? "Disable" : "Enable"} automation ${item.name}`, onCheckedChange: (checked) => handleToggle(item, checked) })] })] }, item.id));
+                })) : (_jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: "No automations yet" })) })] }));
+}
+function AgentsPanelSummary({ agents }) {
+    const builtin = agents.filter((agent) => agent.source === "builtin");
+    const extra = agents.filter((agent) => agent.source !== "builtin");
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconPlugConnected, title: "Agents", detail: `${builtin.length} built in · ${extra.length} added`, action: _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { to: "/agents", children: ["Manage", _jsx(IconArrowUpRight, { size: 14 })] }) }) }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [agents.slice(0, 12).map((agent) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-2 rounded-md border bg-background px-2.5 py-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: agent.color || "hsl(var(--primary))" } }), _jsx("span", { className: "truncate", children: agent.name })] }, agent.id))), agents.length === 0 ? (_jsx("div", { className: "w-full rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground", children: "No agents detected" })) : null] })] }));
+}
+function ApprovalsAndAuditPanel({ overview, isLoading, }) {
+    const approvals = overview?.recentApprovals ?? [];
+    const audit = overview?.recentAudit ?? [];
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconActivity, title: "Activity", detail: `${approvals.length} approvals · ${audit.length} audit rows`, action: _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { to: "/audit", children: ["Audit", _jsx(IconArrowUpRight, { size: 14 })] }) }) }), _jsxs("div", { className: "mt-3 grid gap-3 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b px-3 py-2", children: [_jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "Approvals" }), _jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsx(Link, { to: "/approvals", children: "Open" }) })] }), _jsx("div", { className: "divide-y", children: isLoading && approvals.length === 0 ? (Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "mt-2 h-3 w-24" })] }, index)))) : approvals.length > 0 ? (approvals.slice(0, 4).map((approval) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: approval.summary }), _jsxs("div", { className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx(StatusDot, { tone: approval.status === "pending" ? "warning" : "muted" }), _jsx("span", { children: approval.status })] })] }, approval.id)))) : (_jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: "No approval requests" })) })] }), _jsxs("div", { className: "rounded-md border", children: [_jsx("div", { className: "border-b px-3 py-2 text-xs font-medium uppercase text-muted-foreground", children: "Recent audit" }), _jsx("div", { className: "divide-y", children: isLoading && audit.length === 0 ? (Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx(Skeleton, { className: "h-4 w-44" }), _jsx(Skeleton, { className: "mt-2 h-3 w-28" })] }, index)))) : audit.length > 0 ? (audit.slice(0, 4).map((event) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: event.summary }), _jsxs("div", { className: "mt-1 truncate text-xs text-muted-foreground", children: [event.actor, " \u00B7 ", timeAgo(event.createdAt)] })] }, event.id)))) : (_jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: "No audit entries" })) })] })] })] }));
+}
+function ReadinessPanel({ overview, apps, agents, automations, }) {
+    const rows = [
+        {
+            label: "Vault",
+            detail: (overview?.vault?.secretCount ?? 0) > 0
+                ? `${overview?.vault?.secretCount ?? 0} secrets`
+                : "no secrets",
+            ok: (overview?.vault?.secretCount ?? 0) > 0,
+            to: "/vault",
+            icon: IconShieldCheck,
+        },
+        {
+            label: "Apps",
+            detail: `${apps.filter((app) => !app.isDispatch && !app.archived).length} active`,
+            ok: apps.some((app) => !app.isDispatch && !app.archived),
+            to: "/apps",
+            icon: IconRocket,
+        },
+        {
+            label: "Agents",
+            detail: `${agents.length} available`,
+            ok: agents.length > 0,
+            to: "/agents",
+            icon: IconRobot,
+        },
+        {
+            label: "Automations",
+            detail: `${automations.filter((item) => item.enabled).length} enabled`,
+            ok: automations.every((item) => !item.enabled || item.lastStatus !== "error"),
+            to: "/chat",
+            icon: IconBolt,
+        },
+        {
+            label: "Team",
+            detail: `${overview?.counts?.linkedIdentities ?? 0} linked identities`,
+            ok: (overview?.counts?.linkedIdentities ?? 0) > 0,
+            to: "/team",
+            icon: IconUsersGroup,
+        },
+    ];
+    return (_jsxs("section", { className: "rounded-lg border bg-card p-4", children: [_jsx(SectionHeader, { icon: IconListCheck, title: "Readiness" }), _jsx("div", { className: "mt-3 divide-y rounded-md border", children: rows.map((row) => {
+                    const Icon = row.icon;
+                    return (_jsxs(Link, { to: row.to, className: "flex items-center gap-3 px-3 py-2.5 transition hover:bg-muted/40", children: [_jsx("span", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-md border", row.ok
+                                    ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                                    : "bg-background text-muted-foreground"), children: row.ok ? _jsx(IconCheck, { size: 14 }) : _jsx(Icon, { size: 14 }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: row.label }), _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: row.detail })] }), _jsx(IconArrowUpRight, { size: 14, className: "text-muted-foreground" })] }, row.label));
+                }) })] }));
+}
+export function DispatchControlPlane() {
+    const { data: overviewData, isLoading: overviewLoading } = useActionQuery("list-dispatch-overview", {});
+    const { data: connectedAgents = [] } = useActionQuery("list-connected-agents", {});
+    const { data: workspaceApps = [], isLoading: appsLoading } = useActionQuery("list-workspace-apps", { includeAgentCards: false, includeArchived: true }, { refetchInterval: 2_000 });
+    const { threads } = useChatThreads(undefined, undefined, undefined, {
+        autoCreate: false,
+    });
+    const automationsQuery = useAutomationsStatus();
+    const taskQueueQuery = useTaskQueueStats();
+    const overview = overviewData;
+    const apps = workspaceApps ?? [];
+    const agents = connectedAgents ?? [];
+    const automations = automationsQuery.data ?? [];
+    const taskQueue = taskQueueQuery.data ?? ZERO_TASK_QUEUE_STATS;
+    const visibleThreads = threads.filter((thread) => thread.messageCount > 0);
+    useEffect(() => {
+        const handleRunning = () => {
+            void taskQueueQuery.refetch();
+        };
+        window.addEventListener("agentNative.chatRunning", handleRunning);
+        return () => {
+            window.removeEventListener("agentNative.chatRunning", handleRunning);
+        };
+    }, [taskQueueQuery]);
+    return (_jsx(DispatchShell, { title: "Control plane", description: "Dispatch is the workspace shell for chats, runs, apps, agents, automations, approvals, and resources.", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(360px,0.92fr)]", children: [_jsx(CommandPanel, {}), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(MetricCard, { label: "Vault", value: formatNumber(overview?.vault?.secretCount ?? 0), detail: `${formatNumber(overview?.vault?.activeGrantCount ?? 0)} active grants`, icon: IconShieldCheck, to: "/vault", tone: (overview?.vault?.secretCount ?? 0) > 0 ? "success" : "default" }), _jsx(MetricCard, { label: "Resources", value: formatNumber(overview?.counts?.destinations ?? 0), detail: "destinations", icon: IconArrowUpRight, to: "/destinations" })] })] }), _jsx(ControlPlaneMetrics, { overview: overview, apps: apps, agents: agents, automations: automations, threads: visibleThreads, taskQueue: taskQueue }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(340px,0.85fr)]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx(RecentChatsPanel, {}), _jsx(RunsPanel, { taskQueue: taskQueue })] }), _jsx(AppsPanel, { apps: apps, isLoading: appsLoading }), _jsx(ApprovalsAndAuditPanel, { overview: overview, isLoading: overviewLoading })] }), _jsxs("div", { className: "space-y-4", children: [_jsx(AutomationsPanel, { automations: automations, isLoading: automationsQuery.isLoading }), _jsx(AgentsPanelSummary, { agents: agents }), _jsx(ReadinessPanel, { overview: overview, apps: apps, agents: agents, automations: automations }), taskQueue.failed_last_hour > 0 ? (_jsxs("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(IconAlertTriangle, { size: 16 }), "Integration failures detected"] }), _jsx("div", { className: "mt-1 text-xs", children: "Check credentials, destinations, and recent queue errors." })] })) : null] })] })] }) }));
+}
+//# sourceMappingURL=dispatch-control-plane.js.map