@agent-native/dispatch 0.1.1

package/src/actions/sync-workspace-resources-to-app.ts

@@ -0,0 +1,12 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+import { syncResourcesToApp } from "../server/lib/workspace-resources-store.js";
+
+export default defineAction({
+  description:
+    "Push all applicable workspace resources (skills, instructions, agents) to an app. Pushes scope=all resources plus any with active grants for this app.",
+  schema: z.object({
+    appId: z.string().describe("App ID to sync resources to"),
+  }),
+  run: async (args) => syncResourcesToApp(args.appId),
+});

package/src/actions/update-vault-secret.ts

@@ -0,0 +1,12 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+import { updateSecret } from "../server/lib/vault-store.js";
+
+export default defineAction({
+  description: "Update the value of an existing vault secret. Admin only.",
+  schema: z.object({
+    id: z.string().describe("Secret ID"),
+    value: z.string().describe("New secret value"),
+  }),
+  run: async (args) => updateSecret(args.id, args.value),
+});

package/src/actions/update-workspace-resource.ts

@@ -0,0 +1,19 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+import { updateWorkspaceResource } from "../server/lib/workspace-resources-store.js";
+
+export default defineAction({
+  description:
+    "Update a workspace resource's name, description, content, or scope.",
+  schema: z.object({
+    id: z.string().describe("Resource ID"),
+    name: z.string().optional().describe("New name"),
+    description: z.string().optional().describe("New description"),
+    content: z.string().optional().describe("New content"),
+    scope: z.enum(["all", "selected"]).optional().describe("New scope"),
+  }),
+  run: async (args) => {
+    const { id, ...rest } = args;
+    return updateWorkspaceResource(id, rest);
+  },
+});

package/src/actions/upsert-destination.ts

@@ -0,0 +1,29 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+import { upsertDestination } from "../server/lib/dispatch-store.js";
+
+export default defineAction({
+  description:
+    "Create or update a saved messaging destination for proactive Slack, Telegram, or email sends.",
+  schema: z.object({
+    id: z.string().optional(),
+    name: z.string().describe("Friendly destination name"),
+    platform: z
+      .enum(["slack", "telegram", "email"])
+      .describe("Destination platform"),
+    destination: z
+      .string()
+      .describe(
+        "Channel ID, chat ID, email address, or other platform destination id",
+      ),
+    threadRef: z
+      .string()
+      .optional()
+      .describe("Optional thread or topic reference"),
+    notes: z
+      .string()
+      .optional()
+      .describe("Optional notes about this destination"),
+  }),
+  run: async (args) => upsertDestination(args),
+});

package/src/actions/view-screen.ts

@@ -0,0 +1,78 @@
+/**
+ * See what the user is currently looking at on screen.
+ *
+ * Reads and returns the current navigation state from application state.
+ *
+ * Usage:
+ *   pnpm action view-screen
+ */
+
+import { defineAction } from "@agent-native/core";
+import { readAppState } from "@agent-native/core/application-state";
+import { z } from "zod";
+import { listOverview } from "../server/lib/dispatch-store.js";
+import {
+  listVaultOverview,
+  listSecrets,
+  listGrants,
+  listRequests,
+} from "../server/lib/vault-store.js";
+import { listWorkspaceApps } from "../server/lib/app-creation-store.js";
+
+export default defineAction({
+  description:
+    "See what the user is currently looking at in the dispatch UI, including navigation state and a compact operational summary.",
+  schema: z.object({}),
+  http: false,
+  run: async () => {
+    const [navigation, overview, vaultOverview] = await Promise.all([
+      readAppState("navigation"),
+      listOverview(),
+      listVaultOverview(),
+    ]);
+
+    const screen: Record<string, unknown> = {
+      counts: { ...overview.counts, ...vaultOverview },
+      approvalPolicy: overview.settings,
+    };
+    if (navigation) screen.navigation = navigation;
+    if (navigation?.view === "overview") {
+      screen.recentAudit = overview.recentAudit.slice(0, 5);
+      screen.recentApprovals = overview.recentApprovals.slice(0, 5);
+    }
+    if (navigation?.view === "destinations") {
+      screen.recentDestinations = overview.recentDestinations;
+    }
+    if (
+      navigation?.view === "overview" ||
+      navigation?.view === "apps" ||
+      navigation?.view === "new-app"
+    ) {
+      screen.workspaceApps = await listWorkspaceApps({
+        includeAgentCards: true,
+      });
+    }
+    if (navigation?.view === "vault" || navigation?.view === "new-app") {
+      const [secrets, grants, requests] = await Promise.all([
+        listSecrets(),
+        listGrants(),
+        listRequests({ status: "pending" }),
+      ]);
+      screen.vaultSecrets = secrets.map((s) => ({
+        id: s.id,
+        name: s.name,
+        credentialKey: s.credentialKey,
+        provider: s.provider,
+      }));
+      screen.vaultActiveGrants = grants
+        .filter((g) => g.status === "active")
+        .map((g) => ({ secretId: g.secretId, appId: g.appId }));
+      screen.vaultPendingRequests = requests;
+    }
+
+    if (Object.keys(screen).length === 0) {
+      return "No application state found. Is the app running?";
+    }
+    return JSON.stringify(screen, null, 2);
+  },
+});

package/src/components/agents-panel.tsx

@@ -0,0 +1,262 @@
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { IconExternalLink, IconTrash } from "@tabler/icons-react";
+import { agentNativePath } from "@agent-native/core/client";
+
+export interface ConnectedAgent {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  color: string;
+  source: "builtin" | "custom" | "workspace";
+  resourceId?: string;
+  path?: string;
+  scope?: "shared" | "personal";
+}
+
+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 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 () => {
+    const trimmedName = name.trim();
+    const trimmedUrl = url.trim();
+    if (!trimmedName || !trimmedUrl) return;
+
+    const id = trimmedName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+    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("");
+        onRefresh();
+        nameRef.current?.focus();
+      }
+    } 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>
+          <div className="mt-4 space-y-3">
+            <Input
+              ref={nameRef}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Name"
+            />
+            <Input
+              value={url}
+              onChange={(event) => setUrl(event.target.value)}
+              placeholder="https://app.example.com"
+            />
+            <Input
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="Description (optional)"
+            />
+            <Button
+              className="w-full"
+              onClick={handleAdd}
+              disabled={!name.trim() || !url.trim() || saving}
+            >
+              {saving ? "Saving..." : "Add agent"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,231 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  IconCheck,
+  IconLoader2,
+  IconRefresh,
+  IconSettings,
+} from "@tabler/icons-react";
+import { toast } from "sonner";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+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) => {
+              // Card itself is an <a>; stop the link from navigating when the
+              // user clicks the cog inside it.
+              event.preventDefault();
+              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 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;
+  const grantedCount = grantBySecretId.size;
+  const typedSecrets = secrets as VaultSecret[];
+
+  const toggleSecret = (secret: VaultSecret) => {
+    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">
+            {grantedCount} of {typedSecrets.length} granted
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={syncMutation.isPending || 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 ? (
+          <p className="px-3 py-3 text-xs text-muted-foreground">Loading…</p>
+        ) : 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 = grantBySecretId.has(secret.id);
+            const pending = pendingSecretIds.has(secret.id);
+            return (
+              <button
+                key={secret.id}
+                type="button"
+                aria-pressed={granted}
+                disabled={pending}
+                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 ? "" : "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">
+                    {secret.provider || secret.name || "Vault secret"}
+                  </span>
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}