@agent-native/dispatch 0.21.0 → 0.22.1

package/src/components/ui/select.tsx

@@ -1,158 +1 @@
-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";
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <IconChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <IconChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <IconChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <IconCheck className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
+export * from "@agent-native/toolkit/ui/select";

package/src/hooks/use-mobile.tsx

@@ -1,21 +1 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}
+export * from "@agent-native/toolkit/hooks";

package/src/lib/automation-display.spec.ts

@@ -32,7 +32,7 @@ describe("automation-display", () => {
   it("prepares a thread-debug search for an automation", () => {
     expect(
       automationTroubleshootPath({ name: "coach onboarding reminder" }),
-    ).toBe("/admin/thread-debug?query=coach+onboarding+reminder");
+    ).toBe("/admin/thread-debug?mode=threads&query=coach+onboarding+reminder");
   });
 
   it("keeps Dispatch-owned and legacy automations in the default view", () => {

package/src/lib/automation-display.ts

@@ -27,7 +27,7 @@ export function belongsToDispatch(
 export function automationTroubleshootPath(
   item: Pick<DispatchAutomationItem, "name">,
 ): string {
-  const params = new URLSearchParams({ query: item.name });
+  const params = new URLSearchParams({ mode: "threads", query: item.name });
   return `/admin/thread-debug?${params.toString()}`;
 }
 

package/src/routes/pages/thread-debug.spec.tsx

@@ -27,13 +27,17 @@ const failedRun = {
   threadTitle: "Mail agent failed",
   threadPreview: "Provider timed out",
   status: "errored",
-  errorCode: "provider_timeout",
-  errorDetail: "The provider did not respond.",
-  terminalReason: "provider_timeout",
+  errorCode: "stale_run",
+  errorDetail:
+    "The run heartbeat stopped while the run was still marked running.",
+  terminalReason: "stale_run",
   abortReason: null,
   dispatchMode: "background-processing",
   diagStage: null,
   workerStage: "model",
+  heartbeatAt: 1_722_400_029_000,
+  lastProgressAt: 1_722_400_028_000,
+  regime: "scheduled",
   startedAt: 1_722_400_000_000,
   completedAt: 1_722_400_030_000,
   durationMs: 30_000,
@@ -67,7 +71,25 @@ const detail = {
   queuedMessages: [],
   threadData: {},
   rawThreadData: "{}",
-  runs: [],
+  runs: [
+    {
+      ...failedRun,
+      events: [
+        {
+          seq: 1,
+          event: { type: "tool_start", tool: "search-mail" },
+          rawEventData: '{"type":"tool_start","tool":"search-mail"}',
+        },
+        {
+          seq: 2,
+          event: { type: "error", errorCode: "stale_run" },
+          rawEventData: '{"type":"error","errorCode":"stale_run"}',
+        },
+      ],
+      completedAt: null,
+      durationMs: null,
+    },
+  ],
   traces: { summaries: [], spans: [] },
   feedback: [],
   satisfaction: [],
@@ -75,6 +97,17 @@ const detail = {
   checkpoints: [],
 };
 
+const threadResult = {
+  id: "thread-chat-1",
+  ownerEmail: "ops@example.com",
+  title: "Job: builder-agent-refresh — 8/9/2026",
+  preview: "thread-chat-1",
+  messageCount: 3,
+  createdAt: 1_722_400_000_000,
+  updatedAt: 1_722_400_030_000,
+  snippet: "{}",
+};
+
 vi.mock("@agent-native/core/client/hooks", () => ({
   useActionQuery: (
     name: string,
@@ -158,6 +191,25 @@ vi.mock("@agent-native/core/client/hooks", () => ({
     if (name === "get-agent-thread-debug") {
       return { ...base, data: enabled ? detail : undefined };
     }
+    if (name === "search-agent-threads") {
+      return {
+        ...base,
+        data: enabled
+          ? {
+              count: 1,
+              threads: [threadResult],
+              access: {
+                scope: "current organization",
+                canInspectAll: true,
+              },
+              source: {
+                id: "current",
+                label: "Current Dispatch DB",
+              },
+            }
+          : undefined,
+      };
+    }
     return { ...base, data: undefined };
   },
 }));
@@ -219,10 +271,13 @@ describe("ThreadDebugRoute", () => {
     ).toMatchObject({
       sourceId: "all",
       status: "all",
+      regime: "all",
       lookbackHours: 24,
     });
     expect(container.textContent).toContain("Partial results");
     expect(container.textContent).toContain("Clips (unavailable)");
+    expect(container.textContent).not.toContain(failedRun.id);
+    expect(container.textContent).not.toContain(failedRun.threadId);
 
     const failureButton = [...container.querySelectorAll("button")].find(
       (button) => button.textContent?.includes("Inspect failed run"),
@@ -243,6 +298,8 @@ describe("ThreadDebugRoute", () => {
       sourceId: "mail",
       runId: failedRun.id,
     });
+    expect(container.textContent).toContain("Worker stopped reporting");
+    expect(container.textContent).toContain("retained 2 execution events");
   });
 
   it("passes valid URL-backed failure filters to the action", async () => {
@@ -250,7 +307,7 @@ describe("ThreadDebugRoute", () => {
       root.render(
         <MemoryRouter
           initialEntries={[
-            "/thread-debug?source=mail&owner=ops%40example.com&status=errored&range=7d",
+            "/thread-debug?source=mail&owner=ops%40example.com&status=errored&regime=scheduled&range=7d",
           ]}
         >
           <ThreadDebugRoute />
@@ -266,7 +323,48 @@ describe("ThreadDebugRoute", () => {
       sourceId: "mail",
       ownerEmail: "ops@example.com",
       status: "errored",
+      regime: "scheduled",
       lookbackHours: 168,
     });
   });
+
+  it("keeps thread list rows human-readable without technical identifiers", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/thread-debug?mode=threads"]}>
+          <ThreadDebugRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Builder Agent Refresh");
+    expect(container.textContent).toContain("3 messages");
+    expect(container.textContent).toContain("ops@example.com");
+    expect(container.textContent).toContain("Advanced");
+    expect(container.textContent).not.toContain("Owner email");
+    expect(container.textContent).not.toContain("Find a thread");
+    expect(container.textContent).not.toContain("Search by title");
+    expect(container.textContent).not.toContain(threadResult.id);
+    expect(container.textContent).not.toContain("{}");
+    expect(container.querySelector("summary svg")).toBeTruthy();
+    const searchCall = queryState.calls.find(
+      (call) => call.name === "search-agent-threads" && call.enabled,
+    );
+    expect(searchCall?.params).toMatchObject({
+      sourceId: "current",
+      limit: 25,
+    });
+    expect(searchCall?.params).not.toHaveProperty("ownerEmail");
+
+    const searchInput = container.querySelector(
+      'input[aria-label="Search threads or email"]',
+    );
+    expect(searchInput).toBeTruthy();
+    await act(async () => {
+      (searchInput as HTMLInputElement).focus();
+    });
+    expect(document.body.querySelector('[role="option"]')?.textContent).toBe(
+      "ops@example.com",
+    );
+  });
 });