@agent-native/dispatch 0.0.0-beta-20260819155526

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

@@ -0,0 +1,146 @@
+// @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(),
+  queryCalls: [] as Array<{ name: string; options?: { enabled?: boolean } }>,
+  secretsError: new Error("Vault unavailable") as Error | null,
+}));
+
+const orgRoleState = vi.hoisted(() => ({
+  org: { orgId: "org_123" },
+  role: "owner" as "owner" | "admin" | "member",
+  isLoading: false,
+  error: null as Error | null,
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  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,
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionQuery: (
+    name: string,
+    _args?: unknown,
+    options?: { enabled?: boolean },
+  ) => {
+    queryState.queryCalls.push({ name, options });
+    const queries = {
+      "list-vault-secret-options": {
+        data: undefined,
+        isLoading: false,
+        error: queryState.secretsError,
+        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 }),
+}));
+
+vi.mock("@agent-native/core/client/org", () => ({
+  useOrgRole: () => orgRoleState,
+}));
+
+describe("AppKeysPanel", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.clearAllMocks();
+    queryState.queryCalls.length = 0;
+    queryState.secretsError = new Error("Vault unavailable");
+    orgRoleState.role = "owner";
+    orgRoleState.isLoading = false;
+    orgRoleState.error = null;
+    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();
+  });
+
+  it("does not request admin-only grants for workspace members", () => {
+    orgRoleState.role = "member";
+    queryState.secretsError = null;
+
+    act(() => {
+      root.render(
+        <AppKeysPanel appId="retrospectives" appName="Retrospectives" />,
+      );
+    });
+
+    const grantsQuery = queryState.queryCalls.find(
+      (query) => query.name === "list-vault-grants",
+    );
+    expect(grantsQuery?.options).toEqual({ enabled: false });
+    expect(container.textContent).toContain(
+      "Only workspace owners and admins can manage keys.",
+    );
+    expect(container.textContent).not.toContain("Couldn't load data");
+  });
+
+  it("requests grants for workspace owners", () => {
+    queryState.secretsError = null;
+
+    act(() => {
+      root.render(
+        <AppKeysPanel appId="retrospectives" appName="Retrospectives" />,
+      );
+    });
+
+    const grantsQuery = queryState.queryCalls.find(
+      (query) => query.name === "list-vault-grants",
+    );
+    expect(grantsQuery?.options).toEqual({ enabled: true });
+  });
+});

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

@@ -0,0 +1,300 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useOrgRole } from "@agent-native/core/client/org";
+import {
+  IconCheck,
+  IconLoader2,
+  IconRefresh,
+  IconSettings,
+} from "@tabler/icons-react";
+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;
+  name?: string | null;
+  credentialKey: string;
+  provider?: string | null;
+  description?: string | null;
+}
+
+interface VaultGrant {
+  id: string;
+  secretId: string;
+  appId: string;
+  status?: string | null;
+}
+
+interface AppKeysPopoverProps {
+  appId: string;
+  appName: string;
+  trigger?: ReactNode;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export function AppKeysPopover({
+  appId,
+  appName,
+  trigger,
+  align = "end",
+  side = "bottom",
+}: AppKeysPopoverProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <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}
+        sideOffset={6}
+        className="w-80 p-3"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {open ? <AppKeysPanel appId={appId} appName={appName} /> : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function AppKeysPanel({
+  appId,
+  appName,
+}: {
+  appId: string;
+  appName: string;
+}) {
+  const { org, role, isLoading: orgLoading, error: orgError } = useOrgRole();
+  const accessReady = !orgLoading && !orgError && !!org;
+  const canManageVault =
+    accessReady && (!org.orgId || role === "owner" || role === "admin");
+  const secretsQuery = useActionQuery("list-vault-secret-options", {});
+  const grantsQuery = useActionQuery(
+    "list-vault-grants",
+    { appId },
+    { enabled: canManageVault },
+  );
+  const accessQuery = useActionQuery("get-vault-access-settings", {});
+  const { data: secrets = [], isLoading: secretsLoading } = secretsQuery;
+  const {
+    data: grants = [],
+    isLoading: grantsLoading,
+    refetch: refetchGrants,
+  } = grantsQuery;
+  const { data: accessSettings, isLoading: accessLoading } = accessQuery;
+  const accessMode =
+    (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
+
+  const grantBySecretId = useMemo(() => {
+    const map = new Map<string, VaultGrant>();
+    for (const grant of grants as VaultGrant[]) {
+      if (grant.status && grant.status !== "active") continue;
+      map.set(grant.secretId, grant);
+    }
+    return map;
+  }, [grants]);
+
+  // Track per-secret pending state so a fast double-click on the same row
+  // can't queue two `create-vault-grant` requests (which would silently
+  // create duplicate active grants — a later revoke only clears one).
+  const [pendingSecretIds, setPendingSecretIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const markPending = (secretId: string, pending: boolean) =>
+    setPendingSecretIds((prev) => {
+      const next = new Set(prev);
+      if (pending) next.add(secretId);
+      else next.delete(secretId);
+      return next;
+    });
+
+  const grantMutation = useActionMutation("create-vault-grant", {
+    onSuccess: () => refetchGrants(),
+    onError: (err) => toast.error(`Could not grant: ${String(err)}`),
+  });
+
+  const revokeMutation = useActionMutation("revoke-vault-grant", {
+    onSuccess: () => refetchGrants(),
+    onError: (err) => toast.error(`Could not revoke: ${String(err)}`),
+  });
+
+  const syncMutation = useActionMutation("sync-vault-to-app", {
+    onSuccess: (result: any) => {
+      const synced = result?.synced ?? 0;
+      toast.success(
+        synced > 0
+          ? `Synced ${synced} key${synced === 1 ? "" : "s"} to ${appName}`
+          : `${appName} is up to date`,
+      );
+    },
+    onError: (err) => toast.error(`Sync failed: ${String(err)}`),
+  });
+
+  const isLoading =
+    orgLoading || secretsLoading || grantsLoading || accessLoading;
+  const error =
+    secretsQuery.error ?? grantsQuery.error ?? accessQuery.error ?? orgError;
+  const grantedCount = grantBySecretId.size;
+  const typedSecrets = secrets as VaultSecret[];
+  const allApps = accessMode !== "manual";
+
+  const toggleSecret = (secret: VaultSecret) => {
+    if (!canManageVault || allApps) return;
+    if (pendingSecretIds.has(secret.id)) return;
+    const existing = grantBySecretId.get(secret.id);
+    markPending(secret.id, true);
+    const onSettled = () => markPending(secret.id, false);
+    if (existing) {
+      revokeMutation.mutate({ grantId: existing.id }, { onSettled });
+    } else {
+      grantMutation.mutate({ secretId: secret.id, appId }, { onSettled });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-2 px-1">
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold text-foreground">
+            Keys for {appName}
+          </p>
+          <p className="text-[11px] text-muted-foreground">
+            {error
+              ? null
+              : !canManageVault
+                ? "Only workspace owners and admins can manage keys."
+                : allApps
+                  ? `${typedSecrets.length} available`
+                  : `${grantedCount} of ${typedSecrets.length} granted`}
+          </p>
+        </div>
+        {!error && canManageVault ? (
+          <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">
+        {error ? (
+          <ActionQueryError
+            error={error}
+            onRetry={() => {
+              void secretsQuery.refetch();
+              if (canManageVault) void grantsQuery.refetch();
+              void accessQuery.refetch();
+            }}
+          />
+        ) : isLoading ? (
+          <div className="space-y-1.5 p-1.5">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex items-start gap-3 rounded-md px-2.5 py-2"
+              >
+                <Skeleton className="mt-0.5 h-4 w-4 shrink-0 rounded" />
+                <div className="flex-1 space-y-1.5">
+                  <Skeleton className="h-3 w-1/2" />
+                  <Skeleton className="h-3 w-3/4" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : typedSecrets.length === 0 ? (
+          <p className="rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
+            No vault keys yet. Add one from the Vault page.
+          </p>
+        ) : (
+          typedSecrets.map((secret) => {
+            const granted = allApps || grantBySecretId.has(secret.id);
+            const pending = pendingSecretIds.has(secret.id);
+            return (
+              <button
+                key={secret.id}
+                type="button"
+                aria-pressed={granted}
+                disabled={pending || allApps || !canManageVault}
+                onClick={() => toggleSecret(secret)}
+                className={`flex w-full items-start gap-3 rounded-md px-2.5 py-2 text-left text-sm disabled:cursor-not-allowed disabled:opacity-60 ${
+                  pending || allApps ? "" : "cursor-pointer"
+                } ${
+                  granted
+                    ? "border border-primary/45 bg-primary/5"
+                    : "border border-transparent hover:border-muted-foreground/30 hover:bg-accent/35"
+                }`}
+              >
+                <span
+                  className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
+                    granted
+                      ? "border-primary/60 bg-primary/10 text-primary"
+                      : "border-muted-foreground/35 text-transparent"
+                  }`}
+                >
+                  {granted ? <IconCheck className="h-3 w-3" /> : null}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-medium">
+                    {secret.credentialKey}
+                  </span>
+                  <span className="block truncate text-xs text-muted-foreground/70">
+                    {allApps
+                      ? "Available to this app"
+                      : secret.provider || secret.name || "Vault secret"}
+                  </span>
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/app-list-row.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+export const APP_LIST_GRID_CLASS = "w-full xl:grid xl:grid-cols-2 xl:gap-3";
+export const APP_LIST_GRID_ROW_CLASS =
+  "xl:rounded-2xl xl:border xl:border-transparent xl:bg-card xl:transition-[background-color,border-color] xl:hover:border-border xl:focus-within:border-ring/50";
+
+export function AppList({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("overflow-hidden rounded-2xl bg-card", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function AppListRow({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "group flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0 transition-[background-color,border-color] hover:bg-muted/30 focus-within:bg-muted/30",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/app-open-actions.tsx

@@ -0,0 +1,5 @@
+export {
+  AppOpenActions,
+  type AppOpenActionLabels,
+  type AppOpenActionMenuItem,
+} from "@agent-native/core/client/chat-first";

package/src/components/app-row-settings.tsx

@@ -0,0 +1,54 @@
+import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/core/client/chat-first";
+import { IconPlus, IconSettings } from "@tabler/icons-react";
+
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+const APP_ROW_ACTION_CLASS =
+  "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";
+
+export function AppRowSettings({
+  name,
+  addAppLabel = "Add app",
+  onAddApp,
+}: {
+  name: string;
+  addAppLabel?: string;
+  onAddApp: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-label={`Settings for ${name}`}
+              className={APP_ROW_ACTION_CLASS}
+            >
+              <IconSettings size={15} />
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>App settings</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent
+        align="end"
+        className={APP_ACTION_MENU_CONTENT_CLASS}
+      >
+        <DropdownMenuItem onSelect={onAddApp}>
+          <IconPlus size={14} aria-hidden="true" />
+          {addAppLabel}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/approval-value-block.spec.tsx

@@ -0,0 +1,60 @@
+// @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 {
+  ApprovalValueBlock,
+  approvalValuePreview,
+  parseApprovalValue,
+} from "./approval-value-block";
+
+describe("approval value display", () => {
+  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("parses serialized approval values and preserves plain strings", () => {
+    expect(
+      parseApprovalValue('{"scope":"all","path":"context/brand.md"}'),
+    ).toEqual({
+      scope: "all",
+      path: "context/brand.md",
+    });
+    expect(parseApprovalValue("plain text")).toBe("plain text");
+    expect(parseApprovalValue(null)).toBeNull();
+  });
+
+  it("formats before/after payloads for readable approval review", () => {
+    expect(approvalValuePreview(null)).toBe("None");
+    expect(approvalValuePreview("plain text")).toBe("plain text");
+    expect(approvalValuePreview({ scope: "all" })).toBe(
+      JSON.stringify({ scope: "all" }, null, 2),
+    );
+
+    act(() => {
+      root.render(
+        <ApprovalValueBlock
+          label="After"
+          value={{ path: "context/brand.md", scope: "all" }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("After");
+    expect(container.textContent).toContain('"path": "context/brand.md"');
+    expect(container.textContent).toContain('"scope": "all"');
+  });
+});

package/src/components/approval-value-block.tsx

@@ -0,0 +1,33 @@
+export function parseApprovalValue(value: string | null | undefined): unknown {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+export function approvalValuePreview(value: unknown): string {
+  if (value === null || value === undefined) return "None";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+
+export function ApprovalValueBlock({
+  label,
+  value,
+}: {
+  label: string;
+  value: unknown;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[11px] font-medium uppercase text-muted-foreground">
+        {label}
+      </div>
+      <pre className="max-h-40 overflow-auto rounded-lg border bg-background p-2 text-[11px] leading-relaxed text-foreground">
+        {approvalValuePreview(value)}
+      </pre>
+    </div>
+  );
+}