@agent-native/dispatch 0.14.2 → 0.14.4

package/src/components/app-keys-popover.tsx

@@ -8,9 +8,11 @@ import {
 import { useMemo, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "./action-query-error";
 import { Button } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Skeleton } from "./ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 interface VaultSecret {
   id: string;
@@ -46,23 +48,30 @@ export function AppKeysPopover({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {trigger ?? (
-          <button
-            type="button"
-            aria-label={`Manage keys for ${appName}`}
-            onClick={(event) => {
-              // Keep parent card click handlers from also firing. Do not
-              // preventDefault here: Radix uses the same click to open the
-              // popover trigger.
-              event.stopPropagation();
-            }}
-            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground/70 hover:border-border hover:bg-accent/40 hover:text-foreground"
-          >
-            <IconSettings size={14} />
-          </button>
-        )}
-      </PopoverTrigger>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            {trigger ?? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                aria-label={`Manage keys for ${appName}`}
+                onClick={(event) => {
+                  // Keep parent card click handlers from also firing. Do not
+                  // preventDefault here: Radix uses the same click to open the
+                  // popover trigger.
+                  event.stopPropagation();
+                }}
+                className="size-7 rounded-md p-0 text-muted-foreground transition-[background-color,color] hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground"
+              >
+                <IconSettings size={14} />
+              </Button>
+            )}
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Manage keys</TooltipContent>
+      </Tooltip>
       <PopoverContent
         align={align}
         side={side}
@@ -76,20 +85,23 @@ export function AppKeysPopover({
   );
 }
 
-function AppKeysPanel({ appId, appName }: { appId: string; appName: string }) {
-  const { data: secrets = [], isLoading: secretsLoading } = useActionQuery(
-    "list-vault-secret-options",
-    {},
-  );
+export function AppKeysPanel({
+  appId,
+  appName,
+}: {
+  appId: string;
+  appName: string;
+}) {
+  const secretsQuery = useActionQuery("list-vault-secret-options", {});
+  const grantsQuery = useActionQuery("list-vault-grants", { appId });
+  const accessQuery = useActionQuery("get-vault-access-settings", {});
+  const { data: secrets = [], isLoading: secretsLoading } = secretsQuery;
   const {
     data: grants = [],
     isLoading: grantsLoading,
     refetch: refetchGrants,
-  } = useActionQuery("list-vault-grants", { appId });
-  const { data: accessSettings, isLoading: accessLoading } = useActionQuery(
-    "get-vault-access-settings",
-    {},
-  );
+  } = grantsQuery;
+  const { data: accessSettings, isLoading: accessLoading } = accessQuery;
   const accessMode =
     (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
 
@@ -139,6 +151,7 @@ function AppKeysPanel({ appId, appName }: { appId: string; appName: string }) {
   });
 
   const isLoading = secretsLoading || grantsLoading || accessLoading;
+  const error = secretsQuery.error ?? grantsQuery.error ?? accessQuery.error;
   const grantedCount = grantBySecretId.size;
   const typedSecrets = secrets as VaultSecret[];
   const allApps = accessMode !== "manual";
@@ -164,34 +177,47 @@ function AppKeysPanel({ appId, appName }: { appId: string; appName: string }) {
             Keys for {appName}
           </p>
           <p className="text-[11px] text-muted-foreground">
-            {allApps
-              ? `${typedSecrets.length} available`
-              : `${grantedCount} of ${typedSecrets.length} granted`}
+            {error
+              ? null
+              : allApps
+                ? `${typedSecrets.length} available`
+                : `${grantedCount} of ${typedSecrets.length} granted`}
           </p>
         </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          disabled={
-            syncMutation.isPending ||
-            typedSecrets.length === 0 ||
-            (!allApps && grantedCount === 0)
-          }
-          onClick={() => syncMutation.mutate({ appId })}
-          className="h-7 px-2"
-        >
-          {syncMutation.isPending ? (
-            <IconLoader2 className="h-3 w-3 animate-spin" />
-          ) : (
-            <IconRefresh className="h-3 w-3" />
-          )}
-          <span className="ml-1 text-xs">Sync</span>
-        </Button>
+        {!error ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={
+              syncMutation.isPending ||
+              typedSecrets.length === 0 ||
+              (!allApps && grantedCount === 0)
+            }
+            onClick={() => syncMutation.mutate({ appId })}
+            className="h-7 px-2"
+          >
+            {syncMutation.isPending ? (
+              <IconLoader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <IconRefresh className="h-3 w-3" />
+            )}
+            <span className="ml-1 text-xs">Sync</span>
+          </Button>
+        ) : null}
       </div>
 
       <div className="max-h-[320px] space-y-1.5 overflow-y-auto rounded-md border border-border bg-card p-1.5">
-        {isLoading ? (
+        {error ? (
+          <ActionQueryError
+            error={error}
+            onRetry={() => {
+              void secretsQuery.refetch();
+              void grantsQuery.refetch();
+              void accessQuery.refetch();
+            }}
+          />
+        ) : isLoading ? (
           <div className="space-y-1.5 p-1.5">
             {Array.from({ length: 3 }).map((_, index) => (
               <div

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

@@ -0,0 +1,106 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { DispatchControlPlane } from "./dispatch-control-plane";
+import { TooltipProvider } from "./ui/tooltip";
+
+const clientState = vi.hoisted(() => ({
+  navigateWithTransition: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client", () => ({
+  PromptComposer: ({
+    onSubmit,
+    placeholder,
+  }: {
+    onSubmit: (value: string) => void;
+    placeholder: string;
+  }) => (
+    <button
+      type="button"
+      data-placeholder={placeholder}
+      onClick={() => onSubmit("Route onboarding work")}
+    >
+      Composer
+    </button>
+  ),
+  isInBuilderFrame: () => false,
+  navigateWithAgentChatViewTransition: (
+    navigate: unknown,
+    path: string,
+    options?: unknown,
+  ) => clientState.navigateWithTransition(navigate, path, options),
+  useActionQuery: () => ({
+    data: [],
+    isLoading: false,
+    isError: false,
+    refetch: vi.fn(),
+  }),
+  useChatModels: () => ({ selectedModel: "auto" }),
+  useT: () => (key: string, values?: { defaultValue?: string }) =>
+    values?.defaultValue ?? key,
+}));
+
+vi.mock("./create-app-popover", () => ({
+  CreateAppPopover: () => <div>Create app</div>,
+}));
+
+describe("DispatchControlPlane", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    clientState.navigateWithTransition.mockReset();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a minimal Ask surface and transitions submitted prompts into Chat", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <DispatchControlPlane />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Chat across your apps");
+    expect(container.textContent).not.toContain("Open chat");
+    expect(container.textContent).not.toContain("Also");
+    expect(container.textContent).not.toContain("active");
+    expect(container.querySelector("nav")).toBeNull();
+    expect(
+      container.querySelector('[data-placeholder="Ask Dispatch anything..."]'),
+    ).not.toBeNull();
+
+    await act(async () => {
+      container.querySelector<HTMLButtonElement>("[data-placeholder]")?.click();
+    });
+
+    expect(clientState.navigateWithTransition).toHaveBeenCalledWith(
+      expect.any(Function),
+      "/chat",
+      expect.objectContaining({
+        state: {
+          dispatchPrompt: expect.objectContaining({
+            message: "Route onboarding work",
+            selectedModel: "auto",
+          }),
+        },
+      }),
+    );
+  });
+});

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

@@ -1,76 +1,56 @@
 import {
   PromptComposer,
   isInBuilderFrame,
+  navigateWithAgentChatViewTransition,
   useActionQuery,
   useChatModels,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconArrowUpRight,
-  IconBroadcast,
-  IconStack3,
-  type IconProps,
-} from "@tabler/icons-react";
+import { IconArrowUpRight } from "@tabler/icons-react";
 import type { ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { submitOverviewPrompt } from "../lib/overview-chat";
 import type { WorkspaceAppSummary } from "../lib/workspace-apps";
+import { ActionQueryError } from "./action-query-error";
 import { CreateAppPopover } from "./create-app-popover";
-import { DispatchShell } from "./dispatch-shell";
+import { useSetPageTitle } from "./layout/HeaderActions";
 import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
 import { WorkspaceAppCard } from "./workspace-app-card";
 
-const PROMPT_SUGGESTIONS = [
-  "Summarize the current workspace health",
-  "Create an app for onboarding requests",
-  "Check which agents can help with analytics",
-];
-
-const WORKSPACE_LINKS = [
-  { to: "/automations", labelKey: "dispatch.nav.automations" },
-  { to: "/approvals", labelKey: "dispatch.nav.approvals" },
-  { to: "/destinations", labelKey: "dispatch.nav.delivery" },
-  { to: "/agents", labelKey: "dispatch.nav.agents" },
-  { to: "/vault", labelKey: "dispatch.nav.vault" },
-  { to: "/audit", labelKey: "dispatch.nav.audit" },
-] as const;
-
 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>
+      <h2 className="truncate text-sm font-semibold text-foreground">
+        {title}
+      </h2>
       {action ? <div className="shrink-0">{action}</div> : null}
     </div>
   );
 }
 
 function CommandPanel() {
+  const t = useT();
   const { selectedModel } = useChatModels();
   const navigate = useNavigate();
+  const promptSuggestions = [
+    t("dispatch.pages.suggestionWorkspaceHealth", {
+      defaultValue: "Summarize the current workspace health",
+    }),
+    t("dispatch.pages.suggestionOnboardingApp", {
+      defaultValue: "Create an app for onboarding requests",
+    }),
+    t("dispatch.pages.suggestionAnalyticsAgents", {
+      defaultValue: "Check which agents can help with analytics",
+    }),
+  ];
 
   function send(message: string) {
     const trimmed = message.trim();
@@ -81,7 +61,7 @@ function CommandPanel() {
       return;
     }
 
-    navigate("/chat", {
+    navigateWithAgentChatViewTransition(navigate, "/chat", {
       state: {
         dispatchPrompt: {
           id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
@@ -93,71 +73,44 @@ function CommandPanel() {
   }
 
   return (
-    <section className="rounded-lg border bg-card p-4">
-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <IconBroadcast size={16} className="text-muted-foreground" />
-          <h2 className="text-sm font-semibold text-foreground">
-            Ask Dispatch
+    <section className="flex flex-col">
+      <div className="mx-auto flex w-full max-w-3xl flex-col pt-4 sm:pt-6">
+        <div className="mb-5 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+            {t("dispatch.pages.chatAcrossApps", {
+              defaultValue: "Chat across your apps",
+            })}
           </h2>
+          <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+            {t("dispatch.pages.chatAcrossAppsDescription", {
+              defaultValue:
+                "Route work, inspect status, or create something new from one place.",
+            })}
+          </p>
+        </div>
+        <PromptComposer
+          placeholder={t("dispatch.pages.overviewPromptPlaceholder", {
+            defaultValue: "Ask Dispatch anything...",
+          })}
+          onSubmit={(text) => send(text)}
+        />
+        <div className="mt-3 flex flex-wrap justify-center gap-2">
+          {promptSuggestions.map((suggestion) => (
+            <button
+              key={suggestion}
+              type="button"
+              onClick={() => send(suggestion)}
+              className="cursor-pointer rounded-md border border-transparent bg-muted/60 px-2.5 py-1.5 text-xs text-muted-foreground transition-[background-color,color] hover:bg-muted hover:text-foreground"
+            >
+              {suggestion}
+            </button>
+          ))}
         </div>
-        <Button variant="outline" size="sm" asChild>
-          <Link to="/chat">
-            Open chat
-            <IconArrowUpRight size={14} />
-          </Link>
-        </Button>
-      </div>
-      <PromptComposer
-        placeholder="Route work, inspect status, or create an app..."
-        onSubmit={(text) => send(text)}
-      />
-      <div className="mt-3 flex flex-wrap gap-2">
-        {PROMPT_SUGGESTIONS.map((suggestion) => (
-          <button
-            key={suggestion}
-            type="button"
-            onClick={() => send(suggestion)}
-            className="cursor-pointer rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-muted-foreground transition hover:border-foreground/30 hover:text-foreground"
-          >
-            {suggestion}
-          </button>
-        ))}
       </div>
     </section>
   );
 }
 
-function WorkspaceLinks() {
-  const t = useT();
-
-  return (
-    <nav
-      aria-label={t("dispatch.pages.workspaceShortcutsAria")}
-      className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground"
-    >
-      <span className="font-medium text-foreground/70">
-        {t("dispatch.pages.also")}
-      </span>
-      {WORKSPACE_LINKS.map((item, index) => (
-        <span key={item.to} className="inline-flex items-center gap-x-3">
-          {index > 0 ? (
-            <span aria-hidden className="text-border">
-              ·
-            </span>
-          ) : null}
-          <Link
-            to={item.to}
-            className="transition hover:text-foreground hover:underline underline-offset-4"
-          >
-            {t(item.labelKey)}
-          </Link>
-        </span>
-      ))}
-    </nav>
-  );
-}
-
 function AppsPanel({
   apps,
   isLoading,
@@ -171,11 +124,7 @@ function AppsPanel({
   return (
     <section className="flex flex-col gap-3">
       <SectionHeader
-        icon={IconStack3}
         title="Apps"
-        detail={
-          visibleApps.length === 1 ? "1 active" : `${visibleApps.length} active`
-        }
         action={
           <Button variant="outline" size="sm" asChild>
             <Link to="/apps">
@@ -188,7 +137,10 @@ function AppsPanel({
       {showSkeletons ? (
         <div className="grid gap-3 md:grid-cols-2">
           {Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="rounded-lg border bg-card p-4">
+            <div
+              key={index}
+              className="rounded-xl border border-border/60 bg-card/40 p-4"
+            >
               <Skeleton className="h-4 w-32" />
               <Skeleton className="mt-3 h-3 w-24" />
               <Skeleton className="mt-3 h-3 w-full" />
@@ -209,20 +161,24 @@ function AppsPanel({
 }
 
 export function DispatchControlPlane() {
-  const { data: workspaceApps = [], isLoading: appsLoading } = useActionQuery<
-    WorkspaceAppSummary[]
-  >("list-workspace-apps", { includeAgentCards: false, includeArchived: true });
+  useSetPageTitle(<span aria-hidden />);
+  const appsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    { includeAgentCards: false, includeArchived: true },
+  );
+  const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
 
   return (
-    <DispatchShell
-      title="Overview"
-      description="Ask Dispatch or jump into a workspace app."
-    >
-      <div className="flex flex-col gap-6">
-        <CommandPanel />
-        <WorkspaceLinks />
+    <div className="flex flex-col gap-8">
+      <CommandPanel />
+      {appsQuery.isError ? (
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      ) : (
         <AppsPanel apps={workspaceApps ?? []} isLoading={appsLoading} />
-      </div>
-    </DispatchShell>
+      )}
+    </div>
   );
 }

package/src/components/index.ts

@@ -15,3 +15,4 @@ export type {
 } from "./layout/Layout.js";
 export { CreateAppPopover, CreateAppFlow } from "./create-app-popover.js";
 export { AppKeysPopover } from "./app-keys-popover.js";
+export { ActionQueryError } from "./action-query-error.js";

package/src/components/layout/Layout.spec.tsx

@@ -5,7 +5,7 @@ import { MemoryRouter } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { TooltipProvider } from "../ui/tooltip";
-import { NavContent } from "./Layout";
+import { formatThreadAge, NavContent } from "./Layout";
 
 const clientState = vi.hoisted(() => ({
   createThread: vi.fn<() => Promise<string | null>>(),
@@ -66,6 +66,20 @@ vi.mock("@agent-native/core/client/org", () => ({
   OrgSwitcher: () => <div>Organization</div>,
 }));
 
+describe("formatThreadAge", () => {
+  const now = 2_000_000_000_000;
+
+  it.each([
+    [0, "now"],
+    [2 * 60 * 60_000, "2h"],
+    [7 * 24 * 60 * 60_000, "7d"],
+    [21 * 24 * 60 * 60_000, "3w"],
+    [365 * 24 * 60 * 60_000, "1y"],
+  ])("formats %i milliseconds as %s", (elapsed, expected) => {
+    expect(formatThreadAge(now - elapsed, now)).toBe(expected);
+  });
+});
+
 describe("Dispatch NavContent", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -105,6 +119,25 @@ describe("Dispatch NavContent", () => {
     vi.unstubAllGlobals();
   });
 
+  it("puts Overview before Chat in the primary navigation", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <NavContent />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const primaryLabels = [...container.querySelectorAll("nav a")].map((link) =>
+      link.textContent?.trim(),
+    );
+    expect(primaryLabels.indexOf("Overview")).toBeLessThan(
+      primaryLabels.indexOf("Chat"),
+    );
+  });
+
   it("uses the quieter Analytics-style chat history and retains thread actions", async () => {
     await act(async () => {
       root.render(
@@ -121,6 +154,13 @@ describe("Dispatch NavContent", () => {
     expect(container.textContent).toContain("Earlier Dispatch work");
     expect(container.textContent).toContain("New chat");
     expect(container.textContent).toContain("5m");
+    const age = [...container.querySelectorAll("time")].find(
+      (element) => element.textContent === "5m",
+    );
+    expect(age?.className).toContain("w-8");
+    expect(age?.className).toContain("shrink-0");
+    expect(age?.className).toContain("whitespace-nowrap");
+    expect(age?.className).toContain("tabular-nums");
     expect(
       [...container.querySelectorAll("div")].some((element) =>
         element.className.includes("group/item"),
@@ -133,7 +173,7 @@ describe("Dispatch NavContent", () => {
     expect(container.textContent).not.toContain("Workspace control plane");
 
     const threadButton = [...container.querySelectorAll("button")].find(
-      (button) => button.textContent === "Earlier Dispatch work",
+      (button) => button.textContent?.includes("Earlier Dispatch work"),
     );
     expect(threadButton).toBeDefined();
     await act(async () => {