@agent-native/dispatch 0.13.8 → 0.13.9

package/src/components/dispatch-control-plane.tsx

@@ -1,336 +1,63 @@
 import {
   PromptComposer,
-  agentNativePath,
   isInBuilderFrame,
   useActionQuery,
-  useChangeVersions,
   useChatModels,
-  useChatThreads,
-  type ChatThreadSummary,
 } from "@agent-native/core/client";
-import { RunsTray } from "@agent-native/core/client/progress";
 import {
-  IconActivity,
-  IconAlertTriangle,
   IconArrowUpRight,
-  IconBolt,
   IconBroadcast,
-  IconCheck,
-  IconClockHour4,
-  IconListCheck,
-  IconMessages,
-  IconPlayerPlay,
-  IconPlugConnected,
-  IconPlus,
-  IconRobot,
-  IconRocket,
-  IconSettingsAutomation,
-  IconShieldCheck,
   IconStack3,
-  IconUsersGroup,
   type IconProps,
 } from "@tabler/icons-react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
-import { toast } from "sonner";
 
-import type { ConnectedAgent } from "@/components/agents-panel";
 import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
 import { WorkspaceAppCard } from "@/components/workspace-app-card";
-import {
-  listDispatchAutomations,
-  setDispatchAutomationEnabled,
-  type DispatchAutomationItem,
-  type SetDispatchAutomationEnabledInput,
-} from "@/lib/automations";
 import { submitOverviewPrompt } from "@/lib/overview-chat";
-import { cn } from "@/lib/utils";
 import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
-interface DispatchOverview {
-  counts?: {
-    destinations?: number;
-    pendingApprovals?: number;
-    linkedIdentities?: number;
-    activeTokens?: number;
-  };
-  recentApprovals?: Array<{
-    id: string;
-    summary: string;
-    status: string;
-    requestedBy?: string;
-  }>;
-  recentAudit?: RecentAuditEvent[];
-  settings?: {
-    enabled?: boolean;
-  };
-  vault?: {
-    secretCount?: number;
-    activeGrantCount?: number;
-    accessMode?: string;
-  };
-}
-
-interface RecentAuditEvent {
-  id: string;
-  summary: string;
-  actor: string;
-  action?: string;
-  createdAt: string;
-}
-
-interface TaskQueueRecentFailure {
-  id: string;
-  platform: string;
-  error: string;
-  attempts: number;
-}
-
-interface TaskQueueStats {
-  pending: number;
-  processing: number;
-  completed_last_hour: number;
-  failed_last_hour: number;
-  oldest_pending_age_seconds: number;
-  recent_failures: TaskQueueRecentFailure[];
-}
-
-type AutomationItem = DispatchAutomationItem;
-
-const ZERO_TASK_QUEUE_STATS: TaskQueueStats = {
-  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",
-] as const;
-
-function formatNumber(value: number): string {
-  return new Intl.NumberFormat(undefined, {
-    notation: value >= 10_000 ? "compact" : "standard",
-    maximumFractionDigits: value >= 10_000 ? 1 : 0,
-  }).format(value);
-}
-
-function formatAgeSeconds(seconds: number): string {
-  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: number | string | null | undefined): string {
-  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: string | null | undefined): string {
-  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: string | null | undefined): string | undefined {
-  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: ChatThreadSummary): number {
-  return Number.isFinite(thread.updatedAt)
-    ? thread.updatedAt
-    : Number.isFinite(thread.createdAt)
-      ? thread.createdAt
-      : 0;
-}
-
-function threadTitle(thread: ChatThreadSummary): string {
-  return thread.title || thread.preview || "New chat";
-}
-
-function automationTarget(item: AutomationItem): string {
-  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: AutomationItem): string {
-  return item.lastRun ? relativeRunTime(item.lastRun) : "never";
-}
-
-function automationNextRun(item: AutomationItem): string {
-  if (!item.enabled) return "paused";
-  if (item.triggerType === "event") return "on event";
-  return item.nextRun ? relativeRunTime(item.nextRun) : "not scheduled";
-}
-
-function automationStatus(item: AutomationItem): {
-  label: string;
-  tone: "default" | "success" | "warning" | "danger" | "muted";
-} {
-  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: Pick<AutomationItem, "owner" | "path">,
-): string {
-  return `${item.owner}:${item.path}`;
-}
-
-function StatusDot({
-  tone = "default",
+function SectionHeader({
+  icon: Icon,
+  title,
+  detail,
+  action,
 }: {
-  tone?: "default" | "success" | "warning" | "danger" | "muted";
+  icon: React.ComponentType<IconProps>;
+  title: string;
+  detail?: string;
+  action?: ReactNode;
 }) {
   return (
-    <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",
-      )}
-    />
+    <div className="flex min-w-0 items-center justify-between gap-3">
+      <div className="flex min-w-0 items-center gap-2">
+        <Icon size={16} className="shrink-0 text-muted-foreground" />
+        <div className="min-w-0">
+          <h2 className="truncate text-sm font-semibold text-foreground">
+            {title}
+          </h2>
+          {detail ? (
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {detail}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
   );
 }
 
-function useAutomationsStatus() {
-  const version = useChangeVersions(["action", "screen-refresh"]);
-  return useQuery<AutomationItem[]>({
-    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: SetDispatchAutomationEnabledInput) => {
-      await queryClient.cancelQueries({ queryKey: AUTOMATIONS_QUERY_KEY });
-      const snapshots = queryClient.getQueriesData<AutomationItem[]>({
-        queryKey: AUTOMATIONS_QUERY_KEY,
-      });
-
-      queryClient.setQueriesData<AutomationItem[]>(
-        { 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<AutomationItem[]>(
-        { 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<TaskQueueStats>({
-    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();
@@ -391,371 +118,6 @@ function CommandPanel() {
   );
 }
 
-function MetricCard({
-  label,
-  value,
-  detail,
-  icon: Icon,
-  to,
-  tone = "default",
-}: {
-  label: string;
-  value: ReactNode;
-  detail: string;
-  icon: React.ComponentType<IconProps>;
-  to?: string;
-  tone?: "default" | "success" | "warning" | "danger";
-}) {
-  const body = (
-    <>
-      <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
-          <Icon size={15} />
-          <span className="truncate">{label}</span>
-        </div>
-        <StatusDot
-          tone={
-            tone === "success"
-              ? "success"
-              : tone === "warning"
-                ? "warning"
-                : tone === "danger"
-                  ? "danger"
-                  : "default"
-          }
-        />
-      </div>
-      <div className="mt-3 text-2xl font-semibold tracking-tight text-foreground">
-        {value}
-      </div>
-      <div className="mt-1 truncate text-xs text-muted-foreground">
-        {detail}
-      </div>
-    </>
-  );
-
-  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 (
-      <Link to={to} className={className}>
-        {body}
-      </Link>
-    );
-  }
-
-  return <div className={className}>{body}</div>;
-}
-
-function ControlPlaneMetrics({
-  overview,
-  apps,
-  agents,
-  automations,
-  threads,
-  taskQueue,
-}: {
-  overview?: DispatchOverview;
-  apps: WorkspaceAppSummary[];
-  agents: ConnectedAgent[];
-  automations: AutomationItem[];
-  threads: ChatThreadSummary[];
-  taskQueue: TaskQueueStats;
-}) {
-  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 (
-    <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-6">
-      <MetricCard
-        label="Chats"
-        value={formatNumber(threads.length)}
-        detail={`${threads.filter((thread) => thread.messageCount > 0).length} with messages`}
-        icon={IconMessages}
-        to="/chat"
-      />
-      <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"
-        }
-      />
-      <MetricCard
-        label="Apps"
-        value={formatNumber(activeApps.length)}
-        detail={`${formatNumber(pendingApps.length)} building`}
-        icon={IconStack3}
-        to="/apps"
-        tone={pendingApps.length > 0 ? "warning" : "default"}
-      />
-      <MetricCard
-        label="Agents"
-        value={formatNumber(agents.length)}
-        detail={`${formatNumber(agents.filter((agent) => agent.source === "custom").length)} custom`}
-        icon={IconRobot}
-        to="/agents"
-      />
-      <MetricCard
-        label="Automations"
-        value={formatNumber(enabledAutomations.length)}
-        detail={`${formatNumber(automationErrors.length)} need attention`}
-        icon={IconSettingsAutomation}
-        tone={automationErrors.length > 0 ? "danger" : "success"}
-      />
-      <MetricCard
-        label="Approvals"
-        value={formatNumber(pendingApprovals)}
-        detail={
-          overview?.settings?.enabled ? "review mode" : "immediate changes"
-        }
-        icon={IconShieldCheck}
-        to="/approvals"
-        tone={pendingApprovals > 0 ? "warning" : "default"}
-      />
-    </section>
-  );
-}
-
-function SectionHeader({
-  icon: Icon,
-  title,
-  detail,
-  action,
-}: {
-  icon: React.ComponentType<IconProps>;
-  title: string;
-  detail?: string;
-  action?: ReactNode;
-}) {
-  return (
-    <div className="flex min-w-0 items-center justify-between gap-3">
-      <div className="flex min-w-0 items-center gap-2">
-        <Icon size={16} className="shrink-0 text-muted-foreground" />
-        <div className="min-w-0">
-          <h2 className="truncate text-sm font-semibold text-foreground">
-            {title}
-          </h2>
-          {detail ? (
-            <p className="mt-0.5 truncate text-xs text-muted-foreground">
-              {detail}
-            </p>
-          ) : null}
-        </div>
-      </div>
-      {action ? <div className="shrink-0">{action}</div> : null}
-    </div>
-  );
-}
-
-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: string, 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 (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader
-        icon={IconMessages}
-        title="Chats"
-        detail={`${visibleThreads.length} recent`}
-        action={
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleNewChat}
-            disabled={creating}
-          >
-            <IconPlus size={14} />
-            New
-          </Button>
-        }
-      />
-      <div className="mt-3 divide-y rounded-md border">
-        {visibleThreads.length > 0 ? (
-          visibleThreads.map((thread) => (
-            <button
-              key={thread.id}
-              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"
-            >
-              <span className="min-w-0">
-                <span className="block truncate text-sm font-medium text-foreground">
-                  {threadTitle(thread)}
-                </span>
-                <span className="mt-0.5 block truncate text-xs text-muted-foreground">
-                  {thread.preview || `${thread.messageCount} messages`}
-                </span>
-              </span>
-              <span className="text-[11px] text-muted-foreground">
-                {timeAgo(threadUpdatedAt(thread))}
-              </span>
-            </button>
-          ))
-        ) : (
-          <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"
-          >
-            Start a Dispatch chat
-          </button>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function RunsPanel({ taskQueue }: { taskQueue: TaskQueueStats }) {
-  const hasFailure = taskQueue.failed_last_hour > 0;
-  const hasBacklog =
-    taskQueue.pending > 5 || taskQueue.oldest_pending_age_seconds > 300;
-
-  return (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader
-        icon={IconPlayerPlay}
-        title="Runs"
-        detail={
-          hasFailure
-            ? `${taskQueue.failed_last_hour} failed in the last hour`
-            : `${taskQueue.processing} processing`
-        }
-        action={
-          <RunsTray
-            triggerVariant="pill"
-            hideWhenIdle={false}
-            showRecent
-            limit={8}
-          />
-        }
-      />
-      <div className="mt-3 grid grid-cols-4 gap-2">
-        <QueueCell label="Queued" value={taskQueue.pending} />
-        <QueueCell label="Active" value={taskQueue.processing} />
-        <QueueCell label="Done 1h" value={taskQueue.completed_last_hour} />
-        <QueueCell
-          label="Failed 1h"
-          value={taskQueue.failed_last_hour}
-          danger={hasFailure}
-        />
-      </div>
-      <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",
-        )}
-      >
-        Oldest queued: {formatAgeSeconds(taskQueue.oldest_pending_age_seconds)}
-      </div>
-      {taskQueue.recent_failures.length > 0 ? (
-        <div className="mt-3 divide-y rounded-md border">
-          {taskQueue.recent_failures.slice(0, 3).map((failure) => (
-            <div key={failure.id} className="px-3 py-2">
-              <div className="flex items-center justify-between gap-3 text-xs">
-                <span className="font-medium text-foreground">
-                  {failure.platform}
-                </span>
-                <span className="text-muted-foreground">
-                  {failure.attempts} attempts
-                </span>
-              </div>
-              <div className="mt-1 truncate text-xs text-muted-foreground">
-                {failure.error || "(no error message)"}
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </section>
-  );
-}
-
-function QueueCell({
-  label,
-  value,
-  danger,
-}: {
-  label: string;
-  value: number;
-  danger?: boolean;
-}) {
-  return (
-    <div className="rounded-md border bg-background px-2 py-2">
-      <div
-        className={cn(
-          "text-lg font-semibold text-foreground",
-          danger && "text-destructive",
-        )}
-      >
-        {formatNumber(value)}
-      </div>
-      <div className="truncate text-[11px] text-muted-foreground">{label}</div>
-    </div>
-  );
-}
-
 function AppsPanel({
   apps,
   isLoading,
@@ -763,17 +125,17 @@ function AppsPanel({
   apps: WorkspaceAppSummary[];
   isLoading: boolean;
 }) {
-  const visibleApps = apps
-    .filter((app) => !app.isDispatch && !app.archived)
-    .slice(0, 4);
+  const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
   const showSkeletons = isLoading && visibleApps.length === 0;
 
   return (
-    <section className="space-y-3">
+    <section className="flex flex-col gap-3">
       <SectionHeader
         icon={IconStack3}
-        title="Projects and apps"
-        detail={`${apps.filter((app) => !app.isDispatch && !app.archived).length} active`}
+        title="Apps"
+        detail={
+          visibleApps.length === 1 ? "1 active" : `${visibleApps.length} active`
+        }
         action={
           <Button variant="outline" size="sm" asChild>
             <Link to="/apps">
@@ -806,371 +168,7 @@ function AppsPanel({
   );
 }
 
-function AutomationsPanel({
-  automations,
-  isLoading,
-}: {
-  automations: AutomationItem[];
-  isLoading: boolean;
-}) {
-  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: AutomationItem, enabled: boolean) {
-    toggleAutomation.mutate({
-      owner: item.owner,
-      path: item.path,
-      enabled,
-    });
-  }
-
-  return (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader
-        icon={IconSettingsAutomation}
-        title="Automations"
-        detail={`${enabled} enabled · ${errors} errors`}
-        action={
-          <Button variant="outline" size="sm" asChild>
-            <Link to="/chat">
-              Create
-              <IconArrowUpRight size={14} />
-            </Link>
-          </Button>
-        }
-      />
-      <div className="mt-3 divide-y rounded-md border">
-        {isLoading && ordered.length === 0 ? (
-          Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="px-3 py-2.5">
-              <Skeleton className="h-4 w-40" />
-              <Skeleton className="mt-2 h-3 w-28" />
-            </div>
-          ))
-        ) : ordered.length > 0 ? (
-          ordered.slice(0, 6).map((item) => {
-            const status = automationStatus(item);
-            const canUpdate = item.canUpdate !== false;
-            const isToggling =
-              pendingToggleIdentity === automationIdentity(item);
-            return (
-              <div
-                key={item.id}
-                className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-3 py-2.5"
-              >
-                <div className="min-w-0">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <StatusDot tone={status.tone} />
-                    <span className="truncate text-sm font-medium text-foreground">
-                      {item.name}
-                    </span>
-                  </div>
-                  <div className="mt-1 truncate text-xs text-muted-foreground">
-                    {automationTarget(item)}
-                  </div>
-                  <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
-                    <span title={dateTimeTitle(item.lastRun)}>
-                      Last {automationLastRun(item)}
-                    </span>
-                    <span title={dateTimeTitle(item.nextRun)}>
-                      Next {automationNextRun(item)}
-                    </span>
-                  </div>
-                  {item.lastError ? (
-                    <div className="mt-1 truncate text-xs text-destructive">
-                      {item.lastError}
-                    </div>
-                  ) : null}
-                </div>
-                <div className="flex flex-col items-end gap-1">
-                  <Badge
-                    variant={
-                      status.tone === "danger" ? "destructive" : "outline"
-                    }
-                    className="h-5"
-                  >
-                    {status.label}
-                  </Badge>
-                  <Switch
-                    checked={!!item.enabled}
-                    disabled={!canUpdate || isToggling}
-                    aria-label={`${item.enabled ? "Disable" : "Enable"} automation ${item.name}`}
-                    onCheckedChange={(checked) => handleToggle(item, checked)}
-                  />
-                </div>
-              </div>
-            );
-          })
-        ) : (
-          <div className="px-3 py-8 text-center text-sm text-muted-foreground">
-            No automations yet
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function AgentsPanelSummary({ agents }: { agents: ConnectedAgent[] }) {
-  const builtin = agents.filter((agent) => agent.source === "builtin");
-  const extra = agents.filter((agent) => agent.source !== "builtin");
-
-  return (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader
-        icon={IconPlugConnected}
-        title="Agents"
-        detail={`${builtin.length} built in · ${extra.length} added`}
-        action={
-          <Button variant="outline" size="sm" asChild>
-            <Link to="/agents">
-              Manage
-              <IconArrowUpRight size={14} />
-            </Link>
-          </Button>
-        }
-      />
-      <div className="mt-3 flex flex-wrap gap-2">
-        {agents.slice(0, 12).map((agent) => (
-          <span
-            key={agent.id}
-            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"
-          >
-            <span
-              className="size-2 shrink-0 rounded-full"
-              style={{ backgroundColor: agent.color || "hsl(var(--primary))" }}
-            />
-            <span className="truncate">{agent.name}</span>
-          </span>
-        ))}
-        {agents.length === 0 ? (
-          <div className="w-full rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
-            No agents detected
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-function ApprovalsAndAuditPanel({
-  overview,
-  isLoading,
-}: {
-  overview?: DispatchOverview;
-  isLoading: boolean;
-}) {
-  const approvals = overview?.recentApprovals ?? [];
-  const audit = overview?.recentAudit ?? [];
-
-  return (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader
-        icon={IconActivity}
-        title="Activity"
-        detail={`${approvals.length} approvals · ${audit.length} audit rows`}
-        action={
-          <Button variant="outline" size="sm" asChild>
-            <Link to="/audit">
-              Audit
-              <IconArrowUpRight size={14} />
-            </Link>
-          </Button>
-        }
-      />
-      <div className="mt-3 grid gap-3 lg:grid-cols-2">
-        <div className="rounded-md border">
-          <div className="flex items-center justify-between gap-3 border-b px-3 py-2">
-            <div className="text-xs font-medium uppercase text-muted-foreground">
-              Approvals
-            </div>
-            <Button variant="ghost" size="sm" asChild>
-              <Link to="/approvals">Open</Link>
-            </Button>
-          </div>
-          <div className="divide-y">
-            {isLoading && approvals.length === 0 ? (
-              Array.from({ length: 3 }).map((_, index) => (
-                <div key={index} className="px-3 py-2.5">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="mt-2 h-3 w-24" />
-                </div>
-              ))
-            ) : approvals.length > 0 ? (
-              approvals.slice(0, 4).map((approval) => (
-                <div key={approval.id} className="px-3 py-2.5">
-                  <div className="truncate text-sm font-medium text-foreground">
-                    {approval.summary}
-                  </div>
-                  <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
-                    <StatusDot
-                      tone={approval.status === "pending" ? "warning" : "muted"}
-                    />
-                    <span>{approval.status}</span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="px-3 py-8 text-center text-sm text-muted-foreground">
-                No approval requests
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="rounded-md border">
-          <div className="border-b px-3 py-2 text-xs font-medium uppercase text-muted-foreground">
-            Recent audit
-          </div>
-          <div className="divide-y">
-            {isLoading && audit.length === 0 ? (
-              Array.from({ length: 3 }).map((_, index) => (
-                <div key={index} className="px-3 py-2.5">
-                  <Skeleton className="h-4 w-44" />
-                  <Skeleton className="mt-2 h-3 w-28" />
-                </div>
-              ))
-            ) : audit.length > 0 ? (
-              audit.slice(0, 4).map((event) => (
-                <div key={event.id} className="px-3 py-2.5">
-                  <div className="truncate text-sm font-medium text-foreground">
-                    {event.summary}
-                  </div>
-                  <div className="mt-1 truncate text-xs text-muted-foreground">
-                    {event.actor} · {timeAgo(event.createdAt)}
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="px-3 py-8 text-center text-sm text-muted-foreground">
-                No audit entries
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function ReadinessPanel({
-  overview,
-  apps,
-  agents,
-  automations,
-}: {
-  overview?: DispatchOverview;
-  apps: WorkspaceAppSummary[];
-  agents: ConnectedAgent[];
-  automations: AutomationItem[];
-}) {
-  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: "/settings#team",
-      icon: IconUsersGroup,
-    },
-  ];
-
-  return (
-    <section className="rounded-lg border bg-card p-4">
-      <SectionHeader icon={IconListCheck} title="Readiness" />
-      <div className="mt-3 divide-y rounded-md border">
-        {rows.map((row) => {
-          const Icon = row.icon;
-          return (
-            <Link
-              key={row.label}
-              to={row.to}
-              className="flex items-center gap-3 px-3 py-2.5 transition hover:bg-muted/40"
-            >
-              <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",
-                )}
-              >
-                {row.ok ? <IconCheck size={14} /> : <Icon size={14} />}
-              </span>
-              <span className="min-w-0 flex-1">
-                <span className="block truncate text-sm font-medium text-foreground">
-                  {row.label}
-                </span>
-                <span className="block truncate text-xs text-muted-foreground">
-                  {row.detail}
-                </span>
-              </span>
-              <IconArrowUpRight size={14} className="text-muted-foreground" />
-            </Link>
-          );
-        })}
-      </div>
-    </section>
-  );
-}
-
 export function DispatchControlPlane() {
-  const { data: overviewData, isLoading: overviewLoading } =
-    useActionQuery<DispatchOverview>("list-dispatch-overview", {});
-  const { data: connectedAgents = [] } = useActionQuery<ConnectedAgent[]>(
-    "list-connected-agents",
-    {},
-  );
   const { data: workspaceApps = [], isLoading: appsLoading } = useActionQuery<
     WorkspaceAppSummary[]
   >(
@@ -1178,105 +176,15 @@ export function DispatchControlPlane() {
     { 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 (
     <DispatchShell
-      title="Control plane"
-      description="Dispatch is the workspace shell for chats, runs, apps, agents, automations, approvals, and resources."
+      title="Overview"
+      description="Ask Dispatch or jump into a workspace app."
     >
-      <div className="space-y-6">
-        <div className="grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(360px,0.92fr)]">
-          <CommandPanel />
-          <div className="grid gap-3 sm:grid-cols-2">
-            <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"
-              }
-            />
-            <MetricCard
-              label="Resources"
-              value={formatNumber(overview?.counts?.destinations ?? 0)}
-              detail="destinations"
-              icon={IconArrowUpRight}
-              to="/destinations"
-            />
-          </div>
-        </div>
-
-        <ControlPlaneMetrics
-          overview={overview}
-          apps={apps}
-          agents={agents}
-          automations={automations}
-          threads={visibleThreads}
-          taskQueue={taskQueue}
-        />
-
-        <div className="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(340px,0.85fr)]">
-          <div className="space-y-4">
-            <div className="grid gap-4 lg:grid-cols-2">
-              <RecentChatsPanel />
-              <RunsPanel taskQueue={taskQueue} />
-            </div>
-            <AppsPanel apps={apps} isLoading={appsLoading} />
-            <ApprovalsAndAuditPanel
-              overview={overview}
-              isLoading={overviewLoading}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <AutomationsPanel
-              automations={automations}
-              isLoading={automationsQuery.isLoading}
-            />
-            <AgentsPanelSummary agents={agents} />
-            <ReadinessPanel
-              overview={overview}
-              apps={apps}
-              agents={agents}
-              automations={automations}
-            />
-            {taskQueue.failed_last_hour > 0 ? (
-              <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
-                <div className="flex items-center gap-2 font-medium">
-                  <IconAlertTriangle size={16} />
-                  Integration failures detected
-                </div>
-                <div className="mt-1 text-xs">
-                  Check credentials, destinations, and recent queue errors.
-                </div>
-              </div>
-            ) : null}
-          </div>
-        </div>
+      <div className="flex flex-col gap-6">
+        <CommandPanel />
+        <AppsPanel apps={workspaceApps ?? []} isLoading={appsLoading} />
       </div>
     </DispatchShell>
   );