@agent-native/dispatch 0.13.9 → 0.13.11

package/src/lib/automation-display.ts

@@ -0,0 +1,70 @@
+import type { DispatchAutomationItem } from "./automations.js";
+
+export type AutomationStatusTone =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "muted";
+
+export function automationIdentity(
+  item: Pick<DispatchAutomationItem, "owner" | "path">,
+): string {
+  return `${item.owner}:${item.path}`;
+}
+
+export function automationTarget(item: DispatchAutomationItem): 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";
+}
+
+export 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}`;
+}
+
+export function automationLastRun(item: DispatchAutomationItem): string {
+  return item.lastRun ? relativeRunTime(item.lastRun) : "never";
+}
+
+export function automationNextRun(item: DispatchAutomationItem): string {
+  if (!item.enabled) return "paused";
+  if (item.triggerType === "event") return "on event";
+  return item.nextRun ? relativeRunTime(item.nextRun) : "not scheduled";
+}
+
+export function automationStatus(item: DispatchAutomationItem): {
+  label: string;
+  tone: AutomationStatusTone;
+} {
+  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" };
+}
+
+export function sortAutomations(
+  automations: DispatchAutomationItem[],
+): DispatchAutomationItem[] {
+  return [...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 || "");
+  });
+}

package/src/lib/task-queue.spec.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  formatQueueAgeSeconds,
+  normalizeTaskQueueStats,
+  ZERO_TASK_QUEUE_STATS,
+} from "./task-queue";
+
+describe("normalizeTaskQueueStats", () => {
+  it("returns zeros for invalid payloads", () => {
+    expect(normalizeTaskQueueStats(null)).toEqual(ZERO_TASK_QUEUE_STATS);
+    expect(normalizeTaskQueueStats("bad")).toEqual(ZERO_TASK_QUEUE_STATS);
+  });
+
+  it("normalizes numeric fields and recent failures", () => {
+    expect(
+      normalizeTaskQueueStats({
+        pending: "2",
+        processing: 1,
+        completed_last_hour: 4,
+        failed_last_hour: "1",
+        oldest_pending_age_seconds: 90,
+        recent_failures: [
+          {
+            id: "f1",
+            platform: "slack",
+            error: "rate limited",
+            attempts: "3",
+          },
+        ],
+      }),
+    ).toEqual({
+      pending: 2,
+      processing: 1,
+      completed_last_hour: 4,
+      failed_last_hour: 1,
+      oldest_pending_age_seconds: 90,
+      recent_failures: [
+        {
+          id: "f1",
+          platform: "slack",
+          error: "rate limited",
+          attempts: 3,
+        },
+      ],
+    });
+  });
+});
+
+describe("formatQueueAgeSeconds", () => {
+  it("formats common ages", () => {
+    expect(formatQueueAgeSeconds(0)).toBe("none");
+    expect(formatQueueAgeSeconds(12)).toBe("12s");
+    expect(formatQueueAgeSeconds(120)).toBe("2m");
+    expect(formatQueueAgeSeconds(7200)).toBe("2.0h");
+  });
+});

package/src/lib/task-queue.ts

@@ -0,0 +1,72 @@
+import { agentNativePath } from "@agent-native/core/client";
+
+export interface TaskQueueFailure {
+  id: string;
+  platform: string;
+  error: string;
+  attempts: number;
+}
+
+export interface TaskQueueStats {
+  pending: number;
+  processing: number;
+  completed_last_hour: number;
+  failed_last_hour: number;
+  oldest_pending_age_seconds: number;
+  recent_failures: TaskQueueFailure[];
+}
+
+export 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: [],
+};
+
+function asNumber(value: unknown): number {
+  const n = Number(value ?? 0);
+  return Number.isFinite(n) ? n : 0;
+}
+
+export function normalizeTaskQueueStats(value: unknown): TaskQueueStats {
+  if (!value || typeof value !== "object") return ZERO_TASK_QUEUE_STATS;
+  const stats = value as Record<string, unknown>;
+  return {
+    pending: asNumber(stats.pending),
+    processing: asNumber(stats.processing),
+    completed_last_hour: asNumber(stats.completed_last_hour),
+    failed_last_hour: asNumber(stats.failed_last_hour),
+    oldest_pending_age_seconds: asNumber(stats.oldest_pending_age_seconds),
+    recent_failures: Array.isArray(stats.recent_failures)
+      ? stats.recent_failures.map((failure, index) => {
+          const row =
+            failure && typeof failure === "object"
+              ? (failure as Record<string, unknown>)
+              : {};
+          return {
+            id: String(row.id ?? `failure-${index}`),
+            platform: String(row.platform ?? ""),
+            error: String(row.error ?? ""),
+            attempts: asNumber(row.attempts),
+          };
+        })
+      : [],
+  };
+}
+
+export async function getDispatchTaskQueueStats(): Promise<TaskQueueStats> {
+  const response = await fetch(
+    agentNativePath("/_agent-native/integrations/task-queue/status"),
+  );
+  if (!response.ok) return ZERO_TASK_QUEUE_STATS;
+  return normalizeTaskQueueStats(await response.json().catch(() => null));
+}
+
+export function formatQueueAgeSeconds(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "none";
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  return `${(seconds / 3600).toFixed(1)}h`;
+}

package/src/routes/index.ts

@@ -47,6 +47,7 @@ export const dispatchRoutes: RouteConfig = [
   route("identities", "./pages/identities.js"),
   route("approval", "./pages/approval.js"),
   route("approvals", "./pages/approvals.js"),
+  route("automations", "./pages/automations.js"),
   route("audit", "./pages/audit.js"),
   route("settings", "./pages/settings.js"),
   route("dreams", "./pages/dreams.js"),

package/src/routes/pages/$appId.tsx

@@ -14,15 +14,15 @@ import {
   type LoaderFunctionArgs,
 } from "react-router";
 
-import { DispatchShell } from "@/components/dispatch-shell";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
-import { resolveServerCatchAllTarget } from "@/lib/catch-all-target";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Spinner } from "../../components/ui/spinner";
+import { resolveServerCatchAllTarget } from "../../lib/catch-all-target";
 import {
   workspaceAppHref,
   type WorkspaceAppSummary,
-} from "@/lib/workspace-apps";
+} from "../../lib/workspace-apps";
 
 export function meta() {
   return [{ title: "Workspace app - Dispatch" }];

package/src/routes/pages/_index.tsx

@@ -1,7 +1,7 @@
 import { appPath } from "@agent-native/core/client";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "../../components/ui/spinner";
 
 const SEO_TITLE =
   "Agent-Native Dispatch - Open Source workspace control plane for AI agents";

package/src/routes/pages/agents.tsx

@@ -8,11 +8,14 @@ import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
-import { AgentsPanel, type ConnectedAgent } from "@/components/agents-panel";
-import { DispatchShell } from "@/components/dispatch-shell";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
+import {
+  AgentsPanel,
+  type ConnectedAgent,
+} from "../../components/agents-panel";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Switch } from "../../components/ui/switch";
 
 export function meta() {
   return [{ title: "Agents — Dispatch" }];

package/src/routes/pages/approval.tsx

@@ -19,10 +19,10 @@ import { toast } from "sonner";
 import {
   ApprovalValueBlock,
   parseApprovalValue,
-} from "@/components/approval-value-block";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "../../components/approval-value-block";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Skeleton } from "../../components/ui/skeleton";
 
 export function meta() {
   return [{ title: "Approval — Dispatch" }];

package/src/routes/pages/approvals.tsx

@@ -3,10 +3,10 @@ import { useOrg } from "@agent-native/core/client/org";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
-import { DispatchShell } from "@/components/dispatch-shell";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Switch } from "../../components/ui/switch";
 
 export function meta() {
   return [{ title: "Approvals — Dispatch" }];

package/src/routes/pages/apps.$appId.tsx

@@ -7,14 +7,14 @@ import {
 import { useEffect, useMemo } from "react";
 import { Link, useParams } from "react-router";
 
-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 { DispatchShell } from "../../components/dispatch-shell";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Skeleton } from "../../components/ui/skeleton";
 import {
   workspaceAppHref,
   type WorkspaceAppSummary,
-} from "@/lib/workspace-apps";
+} from "../../lib/workspace-apps";
 
 export function meta() {
   return [{ title: "Workspace app - Dispatch" }];

package/src/routes/pages/apps.tsx

@@ -25,18 +25,18 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
-import { CreateAppPopover } from "@/components/create-app-popover";
-import { DispatchShell } from "@/components/dispatch-shell";
-import { Button } from "@/components/ui/button";
+import { CreateAppPopover } from "../../components/create-app-popover";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Button } from "../../components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Skeleton } from "@/components/ui/skeleton";
-import { WorkspaceAppCard } from "@/components/workspace-app-card";
-import { cn } from "@/lib/utils";
-import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
+} from "../../components/ui/collapsible";
+import { Skeleton } from "../../components/ui/skeleton";
+import { WorkspaceAppCard } from "../../components/workspace-app-card";
+import { cn } from "../../lib/utils";
+import type { WorkspaceAppSummary } from "../../lib/workspace-apps";
 
 export function meta() {
   return [{ title: "Apps — Dispatch" }];

package/src/routes/pages/audit.tsx

@@ -1,6 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client";
 
-import { DispatchShell } from "@/components/dispatch-shell";
+import { DispatchShell } from "../../components/dispatch-shell";
 
 export function meta() {
   return [{ title: "Audit — Dispatch" }];

package/src/routes/pages/automations.tsx

@@ -0,0 +1,280 @@
+import {
+  PromptComposer,
+  sendToAgentChat,
+  useChangeVersions,
+} from "@agent-native/core/client";
+import { IconPlus, IconSettingsAutomation } from "@tabler/icons-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { Skeleton } from "../../components/ui/skeleton";
+import { Switch } from "../../components/ui/switch";
+import {
+  automationIdentity,
+  automationLastRun,
+  automationNextRun,
+  automationStatus,
+  automationTarget,
+  sortAutomations,
+  type AutomationStatusTone,
+} from "../../lib/automation-display";
+import {
+  listDispatchAutomations,
+  setDispatchAutomationEnabled,
+  type DispatchAutomationItem,
+  type SetDispatchAutomationEnabledInput,
+} from "../../lib/automations";
+import { cn } from "../../lib/utils";
+
+const AUTOMATIONS_QUERY_KEY = ["dispatch-automations"] as const;
+
+export function meta() {
+  return [{ title: "Automations — Dispatch" }];
+}
+
+function StatusDot({ tone }: { tone: AutomationStatusTone }) {
+  return (
+    <span
+      className={cn(
+        "size-2 shrink-0 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 useAutomations() {
+  const version = useChangeVersions(["action", "screen-refresh"]);
+  return useQuery<DispatchAutomationItem[]>({
+    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<DispatchAutomationItem[]>({
+        queryKey: AUTOMATIONS_QUERY_KEY,
+      });
+
+      queryClient.setQueriesData<DispatchAutomationItem[]>(
+        { 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<DispatchAutomationItem[]>(
+        { queryKey: AUTOMATIONS_QUERY_KEY },
+        (rows) =>
+          rows?.map((item) =>
+            automationIdentity(item) === automationIdentity(updated)
+              ? updated
+              : item,
+          ),
+      );
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: AUTOMATIONS_QUERY_KEY });
+    },
+  });
+}
+
+function CreateAutomationButton() {
+  const [open, setOpen] = useState(false);
+  const [scope, setScope] = useState<"personal" | "organization">("personal");
+
+  function handleSubmit(text: string) {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    window.dispatchEvent(
+      new CustomEvent("agent-panel:set-mode", {
+        detail: { mode: "chat" },
+      }),
+    );
+    sendToAgentChat({
+      message: trimmed,
+      context: `The user wants to create a new automation. Scope: ${scope}. Use manage-automations with action=define to create it. Ask clarifying questions if needed about what event to trigger on, conditions, and what actions to take.`,
+      submit: true,
+      newTab: true,
+    });
+    setOpen(false);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button size="sm">
+          <IconPlus size={14} />
+          New automation
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[min(100vw-2rem,24rem)] p-3">
+        <p className="pb-2 text-sm font-semibold text-foreground">
+          New automation
+        </p>
+        <PromptComposer
+          autoFocus
+          placeholder="Describe what you want to automate..."
+          draftScope="dispatch-automations:create"
+          onSubmit={handleSubmit}
+        />
+        <select
+          value={scope}
+          onChange={(event) =>
+            setScope(event.target.value as "personal" | "organization")
+          }
+          className="mt-2 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-1.5 text-xs text-foreground"
+        >
+          <option value="personal">Personal</option>
+          <option value="organization">Organization</option>
+        </select>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default function AutomationsRoute() {
+  const automationsQuery = useAutomations();
+  const toggleAutomation = useToggleAutomation();
+  const automations = automationsQuery.data ?? [];
+  const ordered = useMemo(() => sortAutomations(automations), [automations]);
+  const enabledCount = automations.filter((item) => item.enabled).length;
+  const errorCount = automations.filter(
+    (item) => item.enabled && item.lastStatus === "error",
+  ).length;
+  const pendingToggleIdentity = toggleAutomation.isPending
+    ? toggleAutomation.variables
+      ? automationIdentity(toggleAutomation.variables)
+      : null
+    : null;
+
+  return (
+    <DispatchShell
+      title="Automations"
+      description="See scheduled and event-triggered jobs, pause them, or ask the agent to create one."
+    >
+      <section className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
+            <IconSettingsAutomation size={16} className="shrink-0" />
+            <span>
+              {enabledCount} enabled
+              {errorCount > 0 ? ` · ${errorCount} errors` : ""}
+            </span>
+          </div>
+          <CreateAutomationButton />
+        </div>
+
+        <div className="divide-y rounded-lg border bg-card">
+          {automationsQuery.isLoading && ordered.length === 0 ? (
+            Array.from({ length: 4 }).map((_, index) => (
+              <div key={index} className="px-4 py-3">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="mt-2 h-3 w-28" />
+              </div>
+            ))
+          ) : ordered.length > 0 ? (
+            ordered.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-4 py-3"
+                >
+                  <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>Last {automationLastRun(item)}</span>
+                      <span>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-2">
+                    <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) =>
+                        toggleAutomation.mutate({
+                          owner: item.owner,
+                          path: item.path,
+                          enabled: checked,
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+              );
+            })
+          ) : (
+            <div className="px-4 py-10 text-center text-sm text-muted-foreground">
+              No automations yet. Create one here, or ask Dispatch to set up a
+              scheduled or event-triggered job.
+            </div>
+          )}
+        </div>
+      </section>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/chat.tsx

@@ -13,7 +13,7 @@ import {
 } from "react";
 import { useLocation, useNavigate } from "react-router";
 
-import { submitOverviewPrompt } from "@/lib/overview-chat";
+import { submitOverviewPrompt } from "../../lib/overview-chat";
 
 function chatThreadPath(threadId: string | null): string {
   return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";