@jami-studio/dispatch 0.13.14

package/src/routes/pages/agents.tsx

@@ -0,0 +1,216 @@
+import {
+  agentNativePath,
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
+import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AgentsPanel,
+  type ConnectedAgent,
+} from "../../components/agents-panel";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Switch } from "../../components/ui/switch";
+
+export function meta() {
+  return [{ title: "Agents — Dispatch" }];
+}
+
+interface McpAccessApp {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  color: string;
+  granted: boolean;
+}
+
+type McpAccessMode = "all-apps" | "selected-apps";
+
+interface McpAccessState {
+  mode: McpAccessMode;
+  selectedAppIds: string[];
+}
+
+function dispatchMcpUrl(): string {
+  const path = agentNativePath("/_agent-native/mcp");
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).href;
+}
+
+function DispatchMcpAccessPanel() {
+  const t = useT();
+  const { data, isLoading } = useActionQuery("list-mcp-app-access", {});
+  const [optimistic, setOptimistic] = useState<McpAccessState | null>(null);
+  const saveAccess = useActionMutation("set-mcp-app-access", {
+    onSuccess: () => {
+      setOptimistic(null);
+      toast.success(t("dispatch.pages.mcpAccessUpdated"));
+    },
+    onError: (error) => {
+      setOptimistic(null);
+      toast.error(error.message);
+    },
+  });
+
+  const apps = ((data as { apps?: McpAccessApp[] } | undefined)?.apps ??
+    []) as McpAccessApp[];
+  const access =
+    optimistic ??
+    ({
+      mode: ((data as { mode?: McpAccessMode } | undefined)?.mode ??
+        "all-apps") as McpAccessMode,
+      selectedAppIds:
+        (data as { selectedAppIds?: string[] } | undefined)?.selectedAppIds ??
+        [],
+    } satisfies McpAccessState);
+  const selected = useMemo(
+    () => new Set(access.selectedAppIds),
+    [access.selectedAppIds],
+  );
+  const grantedCount =
+    access.mode === "all-apps" ? apps.length : access.selectedAppIds.length;
+  const mcpUrl = dispatchMcpUrl();
+
+  function persist(next: McpAccessState) {
+    if (next.mode === "selected-apps" && next.selectedAppIds.length === 0) {
+      toast.error(t("dispatch.pages.selectAppForMcp"));
+      return;
+    }
+    setOptimistic(next);
+    saveAccess.mutate(next);
+  }
+
+  function toggleApp(appId: string) {
+    const next = selected.has(appId)
+      ? access.selectedAppIds.filter((id) => id !== appId)
+      : [...access.selectedAppIds, appId];
+    persist({ mode: "selected-apps", selectedAppIds: next });
+  }
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(mcpUrl);
+      toast.success(t("dispatch.pages.mcpUrlCopied"));
+    } catch {
+      toast.error(t("dispatch.pages.mcpUrlCopyFailed"));
+    }
+  }
+
+  return (
+    <section className="rounded-2xl border bg-card p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <IconPlugConnected size={16} />
+            {t("dispatch.pages.unifiedMcpGateway")}
+          </div>
+          <div className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            {t("dispatch.pages.unifiedMcpGatewayDescription")}{" "}
+            <code>list_apps</code>, <code>ask_app</code>, and{" "}
+            <code>open_app</code>.
+          </div>
+        </div>
+        <div className="flex items-center gap-3 rounded-xl border px-3 py-2">
+          <div>
+            <div className="text-xs font-medium text-foreground">
+              {access.mode === "all-apps"
+                ? t("dispatch.pages.allApps")
+                : t("dispatch.pages.selectedApps")}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {isLoading
+                ? t("dispatch.pages.loading")
+                : t("dispatch.pages.grantedCount", { count: grantedCount })}
+            </div>
+          </div>
+          <Switch
+            checked={access.mode === "all-apps"}
+            disabled={saveAccess.isPending || apps.length === 0}
+            onCheckedChange={(checked) =>
+              persist({
+                mode: checked ? "all-apps" : "selected-apps",
+                selectedAppIds: checked
+                  ? access.selectedAppIds
+                  : apps.map((app) => app.id),
+              })
+            }
+            aria-label={t("dispatch.pages.exposeAllAppsMcp")}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-2 sm:flex-row">
+        <Input readOnly value={mcpUrl} className="font-mono text-xs" />
+        <Button type="button" variant="outline" onClick={copyUrl}>
+          <IconCopy size={15} />
+          {t("dispatch.pages.copyUrl")}
+        </Button>
+      </div>
+
+      {access.mode === "selected-apps" ? (
+        <div className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+          {apps.map((app) => {
+            const isSelected = selected.has(app.id);
+            return (
+              <button
+                key={app.id}
+                type="button"
+                disabled={
+                  saveAccess.isPending &&
+                  optimistic?.selectedAppIds.includes(app.id) !== isSelected
+                }
+                onClick={() => toggleApp(app.id)}
+                className="flex min-h-[76px] items-start gap-3 rounded-xl border bg-muted/20 px-3 py-3 text-left transition hover:bg-muted/40 disabled:cursor-not-allowed disabled:opacity-60"
+                aria-pressed={isSelected}
+              >
+                <span
+                  className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-xs font-bold text-white"
+                  style={{ backgroundColor: app.color }}
+                >
+                  {app.name.charAt(0).toUpperCase()}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-center gap-2 text-sm font-medium text-foreground">
+                    {app.name}
+                    {isSelected ? (
+                      <IconCheck size={14} className="text-emerald-500" />
+                    ) : null}
+                  </span>
+                  <span className="mt-1 line-clamp-2 block text-xs text-muted-foreground">
+                    {app.description || app.url}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export default function AgentsRoute() {
+  const t = useT();
+  const { data, refetch } = useActionQuery("list-connected-agents", {});
+
+  return (
+    <DispatchShell
+      title={t("dispatch.nav.agents")}
+      description={t("dispatch.pages.agentsDescription")}
+    >
+      <div className="space-y-4">
+        <DispatchMcpAccessPanel />
+        <AgentsPanel
+          agents={(data || []) as ConnectedAgent[]}
+          onRefresh={refetch}
+        />
+      </div>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/approval.tsx

@@ -0,0 +1,287 @@
+import {
+  useActionMutation,
+  useActionQuery,
+  isInAgentEmbed,
+  postNavigate,
+  appPath,
+} from "@agent-native/core/client";
+import {
+  IconCheck,
+  IconX,
+  IconArrowUpRight,
+  IconShieldCheck,
+  IconClock,
+  IconAlertCircle,
+} from "@tabler/icons-react";
+import { useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+import {
+  ApprovalValueBlock,
+  parseApprovalValue,
+} from "../../components/approval-value-block";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Skeleton } from "../../components/ui/skeleton";
+
+export function meta() {
+  return [{ title: "Approval — Dispatch" }];
+}
+
+function StatusBadge({ status }: { status: string }) {
+  if (status === "pending") {
+    return (
+      <Badge
+        variant="outline"
+        className="gap-1.5 border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400"
+      >
+        <IconClock size={11} />
+        Pending
+      </Badge>
+    );
+  }
+  if (status === "approved") {
+    return (
+      <Badge
+        variant="outline"
+        className="gap-1.5 border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+      >
+        <IconCheck size={11} />
+        Approved
+      </Badge>
+    );
+  }
+  return (
+    <Badge
+      variant="outline"
+      className="gap-1.5 border-red-500/40 bg-red-500/10 text-red-600 dark:text-red-400"
+    >
+      <IconX size={11} />
+      Rejected
+    </Badge>
+  );
+}
+
+export default function ApprovalPreviewRoute() {
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id") ?? "";
+
+  const { data: approvals, isLoading } = useActionQuery(
+    "list-dispatch-approvals",
+    {},
+  );
+
+  const approve = useActionMutation("approve-dispatch-change", {
+    onSuccess: () => toast.success("Change approved"),
+  });
+  const reject = useActionMutation("reject-dispatch-change", {
+    onSuccess: () => toast.success("Change rejected"),
+  });
+
+  const inEmbed = isInAgentEmbed();
+
+  const approval = approvals?.find((item: any) => item.id === id) ?? null;
+
+  if (!id) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
+          <IconAlertCircle
+            size={32}
+            className="mx-auto mb-3 text-muted-foreground"
+          />
+          <p className="text-sm font-medium text-foreground">
+            No approval id provided
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Add <code className="rounded bg-muted px-1">?id=&lt;id&gt;</code> to
+            the URL.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-start justify-center bg-background p-6">
+        <div className="w-full max-w-md space-y-4">
+          <div className="rounded-2xl border bg-card p-5">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-5 w-20 rounded-full" />
+                </div>
+                <Skeleton className="h-3 w-32" />
+              </div>
+            </div>
+            <div className="mt-4 space-y-2 rounded-xl border bg-muted/30 px-4 py-3">
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-3 w-28" />
+              </div>
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-16" />
+                <Skeleton className="h-3 w-32" />
+              </div>
+            </div>
+            <div className="mt-4 flex gap-2">
+              <Skeleton className="h-8 flex-1 rounded-md" />
+              <Skeleton className="h-8 flex-1 rounded-md" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!approval) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
+          <IconAlertCircle
+            size={32}
+            className="mx-auto mb-3 text-muted-foreground"
+          />
+          <p className="text-sm font-medium text-foreground">
+            Approval not found
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            The approval with id{" "}
+            <code className="rounded bg-muted px-1">{id}</code> does not exist.
+          </p>
+          {inEmbed && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="mt-4 gap-1.5"
+              onClick={() => postNavigate(appPath("/approvals"))}
+            >
+              <IconArrowUpRight size={14} />
+              View all approvals
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const isPending = approval.status === "pending";
+  const beforeValue = parseApprovalValue(approval.beforeValue);
+  const afterValue = parseApprovalValue(approval.afterValue);
+
+  return (
+    <div className="flex min-h-screen items-start justify-center bg-background p-6">
+      <div className="w-full max-w-2xl space-y-4">
+        <div className="rounded-2xl border bg-card p-5">
+          <div className="flex items-start gap-3">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border bg-muted text-foreground">
+              <IconShieldCheck size={17} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold text-foreground">
+                  {approval.summary}
+                </span>
+                <StatusBadge status={approval.status} />
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                Requested by{" "}
+                <span className="font-medium text-foreground">
+                  {approval.requestedBy}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 space-y-2 rounded-xl border bg-muted/30 px-4 py-3 text-xs">
+            <div className="flex justify-between gap-4">
+              <span className="text-muted-foreground">Change type</span>
+              <span className="font-mono font-medium text-foreground">
+                {approval.changeType}
+              </span>
+            </div>
+            <div className="flex justify-between gap-4">
+              <span className="text-muted-foreground">Target type</span>
+              <span className="font-mono font-medium text-foreground">
+                {approval.targetType}
+              </span>
+            </div>
+            {approval.targetId && (
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">Target id</span>
+                <span className="truncate font-mono font-medium text-foreground">
+                  {approval.targetId}
+                </span>
+              </div>
+            )}
+            {approval.reviewedBy && (
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">Reviewed by</span>
+                <span className="font-medium text-foreground">
+                  {approval.reviewedBy}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {(beforeValue !== null || afterValue !== null) && (
+            <div className="mt-4 grid gap-3 md:grid-cols-2">
+              <ApprovalValueBlock label="Before" value={beforeValue} />
+              <ApprovalValueBlock label="After" value={afterValue} />
+            </div>
+          )}
+
+          {isPending && (
+            <div className="mt-4 flex gap-2">
+              <Button
+                size="sm"
+                className="flex-1"
+                disabled={approve.isPending || reject.isPending}
+                onClick={() => approve.mutate({ id: approval.id })}
+              >
+                <IconCheck size={14} className="mr-1.5" />
+                Approve
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                className="flex-1"
+                disabled={approve.isPending || reject.isPending}
+                onClick={() =>
+                  reject.mutate({
+                    id: approval.id,
+                    reason: "Rejected in dispatch UI",
+                  })
+                }
+              >
+                <IconX size={14} className="mr-1.5" />
+                Reject
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {inEmbed && (
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="gap-1.5 text-muted-foreground"
+              onClick={() => postNavigate(appPath("/approvals"))}
+            >
+              <IconArrowUpRight size={14} />
+              Open in app
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/routes/pages/approvals.tsx

@@ -0,0 +1,158 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { useOrg } from "@agent-native/core/client/org";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { Switch } from "../../components/ui/switch";
+
+export function meta() {
+  return [{ title: "Approvals — Dispatch" }];
+}
+
+export default function ApprovalsRoute() {
+  const { data: settings } = useActionQuery("get-dispatch-settings", {});
+  const { data: approvals } = useActionQuery("list-dispatch-approvals", {});
+  const { data: org } = useOrg();
+  const hasOrg = !!org?.orgId;
+  const [emails, setEmails] = useState("");
+
+  const approverList = useMemo(
+    () =>
+      emails
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean),
+    [emails],
+  );
+
+  const savePolicy = useActionMutation("set-dispatch-approval-policy", {
+    onSuccess: () => toast.success("Approval policy updated"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const approve = useActionMutation("approve-dispatch-change", {
+    onSuccess: () => toast.success("Change approved"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const reject = useActionMutation("reject-dispatch-change", {
+    onSuccess: () => toast.success("Change rejected"),
+    onError: (err) => toast.error(String(err)),
+  });
+
+  return (
+    <DispatchShell
+      title="Approvals"
+      description="Review durable dispatch changes before they apply."
+    >
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Approval policy
+          </h2>
+          <div className="mt-4 space-y-4">
+            <label className="flex items-center justify-between rounded-xl border px-4 py-3">
+              <div>
+                <div className="text-sm font-medium text-foreground">
+                  Require approval for durable changes
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {hasOrg
+                    ? "Applies to saved destinations, shared dream proposals, All-app workspace resources, and dispatch settings."
+                    : "Requires a team workspace. Set one up on the Team page."}
+                </div>
+              </div>
+              <Switch
+                checked={settings?.enabled || false}
+                disabled={!hasOrg || savePolicy.isPending}
+                onCheckedChange={(checked) =>
+                  savePolicy.mutate({
+                    enabled: checked,
+                    approverEmails: settings?.approverEmails || approverList,
+                  })
+                }
+              />
+            </label>
+            <div className="space-y-2">
+              <div className="text-sm font-medium text-foreground">
+                Approver emails
+              </div>
+              <Input
+                value={emails}
+                onChange={(event) => setEmails(event.target.value)}
+                placeholder={(settings?.approverEmails || []).join(", ")}
+                disabled={!hasOrg}
+              />
+              <Button
+                className="w-full"
+                variant="outline"
+                disabled={!hasOrg || savePolicy.isPending}
+                onClick={() =>
+                  savePolicy.mutate({
+                    enabled: settings?.enabled || false,
+                    approverEmails: approverList,
+                  })
+                }
+              >
+                Save approvers
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Pending and recent requests
+          </h2>
+          <div className="mt-4 space-y-3">
+            {(approvals || []).map((approval: any) => (
+              <div
+                key={approval.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">
+                      {approval.summary}
+                    </div>
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      {approval.status} · requested by {approval.requestedBy}
+                    </div>
+                  </div>
+                  {approval.status === "pending" && (
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        onClick={() => approve.mutate({ id: approval.id })}
+                      >
+                        Approve
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          reject.mutate({
+                            id: approval.id,
+                            reason: "Rejected in dispatch UI",
+                          })
+                        }
+                      >
+                        Reject
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {(approvals?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                No approval requests yet.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </DispatchShell>
+  );
+}