@agent-native/dispatch 0.13.10 → 0.13.11

package/src/components/dispatch-shell.tsx

@@ -2,12 +2,8 @@ import { useT } from "@agent-native/core/client";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { type ReactNode } from "react";
 
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { useSetPageTitle } from "./layout/HeaderActions";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 /**
  * DispatchShell renders the per-page title (with an optional click-to-open

package/src/components/layout/Header.tsx

@@ -3,8 +3,7 @@ import { RunsTray } from "@agent-native/core/client/progress";
 import { IconLayoutSidebar } from "@tabler/icons-react";
 import { useLocation, useNavigate } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
+import { Button } from "../ui/button";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 
 const pageTitles: Record<string, string> = {
@@ -18,6 +17,7 @@ const pageTitles: Record<string, string> = {
   "/destinations": "Destinations",
   "/identities": "Identities",
   "/approvals": "Approvals",
+  "/automations": "Automations",
   "/audit": "Audit",
   "/settings": "Settings",
 };

package/src/components/layout/Layout.tsx

@@ -37,6 +37,7 @@ import {
   IconLayoutSidebarLeftExpand,
   IconPuzzle,
   IconSettings,
+  IconSettingsAutomation,
   IconShieldCheck,
 } from "@tabler/icons-react";
 import {
@@ -50,26 +51,16 @@ import {
 } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router";
 
+import { cn } from "../../lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
+} from "../ui/dropdown-menu";
+import { Input } from "../ui/input";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
 
@@ -188,6 +179,13 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconShieldCheck,
     section: "operations",
   },
+  {
+    id: "automations",
+    to: "/automations",
+    label: "Automations",
+    icon: IconSettingsAutomation,
+    section: "operations",
+  },
   {
     id: "audit",
     to: "/audit",

package/src/components/messaging-setup-panel.tsx

@@ -14,18 +14,14 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "./ui/button";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "./ui/collapsible";
+import { Input } from "./ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 interface EnvStatus {
   key: string;

package/src/components/task-queue-health.tsx

@@ -0,0 +1,166 @@
+import { useChangeVersions, useT } from "@agent-native/core/client";
+import { IconAlertTriangle, IconPlayerPlay } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  formatQueueAgeSeconds,
+  getDispatchTaskQueueStats,
+  type TaskQueueStats,
+  ZERO_TASK_QUEUE_STATS,
+} from "../lib/task-queue";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./ui/skeleton";
+
+const TASK_QUEUE_QUERY_KEY = ["dispatch-task-queue"] as const;
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat(undefined, {
+    notation: value >= 10_000 ? "compact" : "standard",
+  }).format(value);
+}
+
+function useTaskQueueStats() {
+  const version = useChangeVersions(["action", "screen-refresh"]);
+  return useQuery<TaskQueueStats>({
+    queryKey: [...TASK_QUEUE_QUERY_KEY, version],
+    queryFn: getDispatchTaskQueueStats,
+    placeholderData: (prev) => prev,
+    refetchInterval: 15_000,
+    staleTime: 5_000,
+  });
+}
+
+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>
+  );
+}
+
+export function TaskQueueHealth() {
+  const t = useT();
+  const query = useTaskQueueStats();
+  const taskQueue = query.data ?? ZERO_TASK_QUEUE_STATS;
+  const hasFailure = taskQueue.failed_last_hour > 0;
+  const hasBacklog =
+    taskQueue.pending > 5 || taskQueue.oldest_pending_age_seconds > 300;
+  const oldestAge = formatQueueAgeSeconds(taskQueue.oldest_pending_age_seconds);
+  const oldestAgeLabel =
+    oldestAge === "none" ? t("dispatch.pages.queueAgeNone") : oldestAge;
+
+  return (
+    <section className="rounded-lg border bg-card p-4">
+      <div className="flex min-w-0 items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <IconPlayerPlay
+            size={16}
+            className="shrink-0 text-muted-foreground"
+          />
+          <div className="min-w-0">
+            <h2 className="truncate text-sm font-semibold text-foreground">
+              {t("dispatch.pages.deliveryQueue")}
+            </h2>
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {hasFailure
+                ? t("dispatch.pages.failedLastHour", {
+                    count: taskQueue.failed_last_hour,
+                  })
+                : t("dispatch.pages.processingCount", {
+                    count: taskQueue.processing,
+                  })}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {query.isLoading && !query.data ? (
+        <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-14 rounded-md" />
+          ))}
+        </div>
+      ) : (
+        <>
+          <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <QueueCell
+              label={t("dispatch.pages.queued")}
+              value={taskQueue.pending}
+            />
+            <QueueCell
+              label={t("dispatch.pages.active")}
+              value={taskQueue.processing}
+            />
+            <QueueCell
+              label={t("dispatch.pages.done1h")}
+              value={taskQueue.completed_last_hour}
+            />
+            <QueueCell
+              label={t("dispatch.pages.failed1h")}
+              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",
+            )}
+          >
+            {t("dispatch.pages.oldestQueued", { age: oldestAgeLabel })}
+          </div>
+
+          {hasFailure ? (
+            <div className="mt-3 flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+              <IconAlertTriangle size={14} className="mt-0.5 shrink-0" />
+              <span>{t("dispatch.pages.queueFailureHint")}</span>
+            </div>
+          ) : null}
+
+          {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 || t("dispatch.pages.unknownPlatform")}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {t("dispatch.pages.attemptsCount", {
+                        count: failure.attempts,
+                      })}
+                    </span>
+                  </div>
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {failure.error || t("dispatch.pages.noErrorMessage")}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </>
+      )}
+    </section>
+  );
+}

package/src/components/ui/accordion.tsx

@@ -2,7 +2,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { IconChevronDown } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
 

package/src/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",

package/src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

package/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

package/src/components/ui/breadcrumb.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { IconChevronRight, IconDots } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

package/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/ui/calendar.tsx

@@ -2,8 +2,8 @@ import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

package/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,

package/src/components/ui/carousel.tsx

@@ -4,8 +4,8 @@ import useEmblaCarousel, {
 } from "embla-carousel-react";
 import * as React from "react";
 
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

package/src/components/ui/chart.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;

package/src/components/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { IconCheck } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

package/src/components/ui/command.tsx

@@ -3,8 +3,8 @@ import { IconSearch } from "@tabler/icons-react";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
 
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent, DialogTitle } from "./dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

package/src/components/ui/context-menu.tsx

@@ -2,7 +2,7 @@ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

package/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
 

package/src/components/ui/drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Drawer = ({
   shouldScaleBackground = true,

package/src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

package/src/components/ui/form.tsx

@@ -10,8 +10,8 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { Label } from "./label";
 
 const Form = FormProvider;
 

package/src/components/ui/hover-card.tsx

@@ -1,7 +1,7 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const HoverCard = HoverCardPrimitive.Root;
 

package/src/components/ui/input-otp.tsx

@@ -2,7 +2,7 @@ import { IconPoint } from "@tabler/icons-react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,

package/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {

package/src/components/ui/label.tsx

@@ -2,7 +2,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

package/src/components/ui/menubar.tsx

@@ -2,7 +2,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 // Explicit type annotations needed because TS can't generate portable .d.ts
 // declarations for these without referencing internal Radix types from a

package/src/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import { IconChevronDown } from "@tabler/icons-react";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

package/src/components/ui/pagination.tsx

@@ -5,8 +5,8 @@ import {
 } from "@tabler/icons-react";
 import * as React from "react";
 
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { ButtonProps, buttonVariants } from "./button";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav

package/src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
 

package/src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,

package/src/components/ui/radio-group.tsx

@@ -2,7 +2,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { IconCircle } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

package/src/components/ui/resizable.tsx

@@ -1,7 +1,7 @@
 import { IconGripVertical } from "@tabler/icons-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const ResizablePanelGroup = ({
   className,

package/src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

package/src/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Select = SelectPrimitive.Root;
 

package/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

package/src/components/ui/sheet.tsx

@@ -3,7 +3,7 @@ import { IconX } from "@tabler/icons-react";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Sheet = SheetPrimitive.Root;