@jami-studio/dispatch 0.13.14

package/src/components/agents-panel.tsx

@@ -0,0 +1,358 @@
+import { agentNativePath } from "@agent-native/core/client";
+import { IconExternalLink, IconTrash } from "@tabler/icons-react";
+import { useRef, useState, type FormEvent } from "react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+export interface ConnectedAgent {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  color: string;
+  source: "builtin" | "custom" | "workspace";
+  resourceId?: string;
+  path?: string;
+  scope?: "shared" | "personal";
+}
+
+type AgentFormErrors = Partial<Record<"name" | "url" | "form", string>>;
+
+function slugifyAgentName(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function validateAgentForm(name: string, url: string): AgentFormErrors {
+  const errors: AgentFormErrors = {};
+  const trimmedName = name.trim();
+  const trimmedUrl = url.trim();
+
+  if (!trimmedName) {
+    errors.name = "Agent name is required.";
+  } else if (!slugifyAgentName(trimmedName)) {
+    errors.name = "Agent name must include at least one letter or number.";
+  }
+
+  if (!trimmedUrl) {
+    errors.url = "Agent endpoint URL is required.";
+  } else {
+    try {
+      const parsed = new URL(trimmedUrl);
+      if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+        errors.url = "Use an http:// or https:// endpoint URL.";
+      } else if (!parsed.hostname) {
+        errors.url = "Enter a complete endpoint URL with a host.";
+      } else if (parsed.username || parsed.password) {
+        errors.url = "Do not include credentials in the endpoint URL.";
+      }
+    } catch {
+      errors.url =
+        "Enter a valid endpoint URL, such as https://app.example.com.";
+    }
+  }
+
+  return errors;
+}
+
+export function AgentsPanel({
+  agents,
+  onRefresh,
+}: {
+  agents: ConnectedAgent[];
+  onRefresh: () => void;
+}) {
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [description, setDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<AgentFormErrors>({});
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  const customAgents = agents.filter((agent) => agent.source === "custom");
+  const workspaceAgents = agents.filter(
+    (agent) => agent.source === "workspace",
+  );
+  const builtinAgents = agents.filter((agent) => agent.source === "builtin");
+
+  const handleAdd = async (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
+    const trimmedName = name.trim();
+    const trimmedUrl = url.trim();
+    const nextErrors = validateAgentForm(trimmedName, trimmedUrl);
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors(nextErrors);
+      return;
+    }
+
+    const id = slugifyAgentName(trimmedName);
+    const agentJson = JSON.stringify(
+      {
+        id,
+        name: trimmedName,
+        description: description.trim() || undefined,
+        url: trimmedUrl,
+        color: "#6B7280",
+      },
+      null,
+      2,
+    );
+
+    setSaving(true);
+    try {
+      const res = await fetch(agentNativePath("/_agent-native/resources"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: `remote-agents/${id}.json`,
+          content: agentJson,
+          shared: true,
+        }),
+      });
+      if (res.ok) {
+        setName("");
+        setUrl("");
+        setDescription("");
+        setErrors({});
+        onRefresh();
+        nameRef.current?.focus();
+      } else {
+        setErrors({
+          form: `Could not add agent. Request failed with ${res.status}.`,
+        });
+      }
+    } catch (error) {
+      setErrors({
+        form:
+          error instanceof Error
+            ? error.message
+            : "Could not add agent. Please try again.",
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (resourceId?: string) => {
+    if (!resourceId) return;
+    const res = await fetch(
+      agentNativePath(`/_agent-native/resources/${resourceId}`),
+      {
+        method: "DELETE",
+      },
+    );
+    if (res.ok) onRefresh();
+  };
+
+  return (
+    <section className="rounded-2xl border bg-card p-5">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <div className="space-y-4">
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              Available by default
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {builtinAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs text-muted-foreground"
+                >
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{ backgroundColor: agent.color }}
+                  />
+                  <span>{agent.name}</span>
+                </div>
+              ))}
+              {builtinAgents.length === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+                  No default agents detected.
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm font-medium text-foreground">
+              Added in this workspace
+            </div>
+            <div className="mt-2 space-y-2">
+              {workspaceAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="flex items-start justify-between gap-3 rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-foreground">
+                      {agent.name}
+                    </div>
+                    {agent.description ? (
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {agent.description}
+                      </div>
+                    ) : null}
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      <a
+                        href={agent.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 hover:text-foreground"
+                      >
+                        {agent.url}
+                        <IconExternalLink className="h-3 w-3" />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              {customAgents.map((agent) => (
+                <div
+                  key={agent.id}
+                  className="flex items-start justify-between gap-3 rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-foreground">
+                      {agent.name}
+                    </div>
+                    {agent.description ? (
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {agent.description}
+                      </div>
+                    ) : null}
+                    <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+                      <a
+                        href={agent.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1 hover:text-foreground"
+                      >
+                        {agent.url}
+                        <IconExternalLink className="h-3 w-3" />
+                      </a>
+                      <span>·</span>
+                      <span>{agent.scope || "shared"}</span>
+                    </div>
+                  </div>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <IconTrash className="h-4 w-4" />
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Remove this agent?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          “{agent.name}” will be removed from the workspace. Any
+                          jobs or chats that delegate to it will stop working.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                          onClick={() => handleDelete(agent.resourceId)}
+                        >
+                          Remove
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
+              ))}
+              {workspaceAgents.length === 0 && customAgents.length === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+                  No extra agents added yet.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-xl border bg-muted/20 p-4">
+          <div className="text-sm font-medium text-foreground">
+            Add external agent
+          </div>
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            Add another A2A-compatible app by saving its agent endpoint here.
+          </p>
+          <form className="mt-4 space-y-3" onSubmit={handleAdd} noValidate>
+            <div className="space-y-1.5">
+              <Input
+                ref={nameRef}
+                value={name}
+                onChange={(event) => {
+                  setName(event.target.value);
+                  setErrors((current) => ({ ...current, name: undefined }));
+                }}
+                placeholder="Name"
+                aria-invalid={Boolean(errors.name)}
+                aria-describedby={
+                  errors.name ? "external-agent-name-error" : undefined
+                }
+              />
+              {errors.name ? (
+                <p
+                  id="external-agent-name-error"
+                  className="text-xs font-medium text-destructive"
+                >
+                  {errors.name}
+                </p>
+              ) : null}
+            </div>
+            <div className="space-y-1.5">
+              <Input
+                value={url}
+                onChange={(event) => {
+                  setUrl(event.target.value);
+                  setErrors((current) => ({ ...current, url: undefined }));
+                }}
+                placeholder="https://app.example.com"
+                aria-invalid={Boolean(errors.url)}
+                aria-describedby={
+                  errors.url ? "external-agent-url-error" : undefined
+                }
+              />
+              {errors.url ? (
+                <p
+                  id="external-agent-url-error"
+                  className="text-xs font-medium text-destructive"
+                >
+                  {errors.url}
+                </p>
+              ) : null}
+            </div>
+            <Input
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="Description (optional)"
+            />
+            {errors.form ? (
+              <p className="text-xs font-medium text-destructive">
+                {errors.form}
+              </p>
+            ) : null}
+            <Button type="submit" className="w-full" disabled={saving}>
+              {saving ? "Saving..." : "Add agent"}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,258 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  IconCheck,
+  IconLoader2,
+  IconRefresh,
+  IconSettings,
+} from "@tabler/icons-react";
+import { useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Skeleton } from "./ui/skeleton";
+
+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}>
+      <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>
+      <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>
+  );
+}
+
+function AppKeysPanel({ appId, appName }: { appId: string; appName: string }) {
+  const { data: secrets = [], isLoading: secretsLoading } = useActionQuery(
+    "list-vault-secret-options",
+    {},
+  );
+  const {
+    data: grants = [],
+    isLoading: grantsLoading,
+    refetch: refetchGrants,
+  } = useActionQuery("list-vault-grants", { appId });
+  const { data: accessSettings, isLoading: accessLoading } = useActionQuery(
+    "get-vault-access-settings",
+    {},
+  );
+  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 = secretsLoading || grantsLoading || accessLoading;
+  const grantedCount = grantBySecretId.size;
+  const typedSecrets = secrets as VaultSecret[];
+  const allApps = accessMode !== "manual";
+
+  const toggleSecret = (secret: VaultSecret) => {
+    if (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">
+            {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>
+      </div>
+
+      <div className="max-h-[320px] space-y-1.5 overflow-y-auto rounded-md border border-border bg-card p-1.5">
+        {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}
+                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/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"');
+  });
+});