@agent-native/dispatch 0.14.3 → 0.14.5

package/src/components/action-query-error.spec.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ActionQueryError } from "./action-query-error";
+
+vi.mock("@agent-native/core/client", () => ({
+  useT: () => (key: string) =>
+    ({
+      "dispatch.pages.dataLoadFailed": "Couldn't load data",
+      "dispatch.pages.dataLoadFailedDescription":
+        "Dispatch couldn't load this data.",
+      "dispatch.pages.tryAgain": "Try again",
+    })[key] ?? key,
+}));
+
+describe("ActionQueryError", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("shows a safe query error and retries on request", () => {
+    const onRetry = vi.fn();
+    act(() => {
+      root.render(
+        <ActionQueryError
+          error={new Error("Database unavailable")}
+          onRetry={onRetry}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Couldn't load data");
+    expect(container.textContent).toContain(
+      "Dispatch couldn't load this data.",
+    );
+    expect(container.textContent).not.toContain("Database unavailable");
+    act(() => {
+      container.querySelector("button")?.click();
+    });
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});

package/src/components/action-query-error.tsx

@@ -0,0 +1,32 @@
+import { useT } from "@agent-native/core/client";
+import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
+
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
+
+interface ActionQueryErrorProps {
+  error?: unknown;
+  onRetry: () => unknown;
+  className?: string;
+}
+
+export function ActionQueryError({
+  onRetry,
+  className,
+}: ActionQueryErrorProps) {
+  const t = useT();
+
+  return (
+    <Alert variant="destructive" className={className}>
+      <IconAlertTriangle className="size-4" />
+      <AlertTitle>{t("dispatch.pages.dataLoadFailed")}</AlertTitle>
+      <AlertDescription className="flex flex-wrap items-center justify-between gap-3">
+        <span>{t("dispatch.pages.dataLoadFailedDescription")}</span>
+        <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+          <IconRefresh className="size-4" />
+          {t("dispatch.pages.tryAgain")}
+        </Button>
+      </AlertDescription>
+    </Alert>
+  );
+}

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

@@ -0,0 +1,85 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AppKeysPanel } from "./app-keys-popover";
+
+const queryState = vi.hoisted(() => ({
+  refetchSecrets: vi.fn(),
+  refetchGrants: vi.fn(),
+  refetchAccess: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client", () => ({
+  useT: () => (key: string) =>
+    ({
+      "dispatch.pages.dataLoadFailed": "Couldn't load data",
+      "dispatch.pages.dataLoadFailedDescription":
+        "Dispatch couldn't load this data.",
+      "dispatch.pages.tryAgain": "Try again",
+    })[key] ?? key,
+  useActionQuery: (name: string) => {
+    const queries = {
+      "list-vault-secret-options": {
+        data: undefined,
+        isLoading: false,
+        error: new Error("Vault unavailable"),
+        refetch: queryState.refetchSecrets,
+      },
+      "list-vault-grants": {
+        data: [],
+        isLoading: false,
+        error: null,
+        refetch: queryState.refetchGrants,
+      },
+      "get-vault-access-settings": {
+        data: undefined,
+        isLoading: false,
+        error: null,
+        refetch: queryState.refetchAccess,
+      },
+    };
+    return queries[name as keyof typeof queries];
+  },
+  useActionMutation: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+describe("AppKeysPanel", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.clearAllMocks();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("shows a retryable error instead of an empty key list", () => {
+    act(() => {
+      root.render(<AppKeysPanel appId="mail" appName="Mail" />);
+    });
+
+    expect(container.textContent).toContain("Couldn't load data");
+    expect(container.textContent).toContain(
+      "Dispatch couldn't load this data.",
+    );
+    expect(container.textContent).not.toContain("Vault unavailable");
+    expect(container.textContent).not.toContain("No vault keys yet");
+
+    act(() => {
+      container.querySelector("button")?.click();
+    });
+    expect(queryState.refetchSecrets).toHaveBeenCalledOnce();
+    expect(queryState.refetchGrants).toHaveBeenCalledOnce();
+    expect(queryState.refetchAccess).toHaveBeenCalledOnce();
+  });
+});

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",
+          }),
+        },
+      }),
+    );
+  });
+});