@agent-native/dispatch 0.8.5 → 0.8.6

package/src/routes/pages/agents.tsx

@@ -1,11 +1,190 @@
-import { useActionQuery } from "@agent-native/core/client";
+import { useMemo, useState } from "react";
+import {
+  agentNativePath,
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client";
 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";
+import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
+import { toast } from "sonner";
 
 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 { 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("MCP app access updated");
+    },
+    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("Select at least one app, or expose all apps.");
+      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("MCP URL copied");
+    } catch {
+      toast.error("Could not copy MCP URL");
+    }
+  }
+
+  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} />
+            Unified MCP gateway
+          </div>
+          <div className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Connect external agents to Dispatch once, then route to granted
+            workspace apps through <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" ? "All apps" : "Selected apps"}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {isLoading ? "Loading" : `${grantedCount} granted`}
+            </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="Expose all apps through Dispatch MCP"
+          />
+        </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} />
+          Copy URL
+        </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 { data, refetch } = useActionQuery("list-connected-agents", {});
 
@@ -14,10 +193,13 @@ export default function AgentsRoute() {
       title="Agents"
       description="Dispatch can delegate to the built-in app suite over A2A by default. Add extra agents here only if you want to route work to apps outside that built-in set."
     >
-      <AgentsPanel
-        agents={(data || []) as ConnectedAgent[]}
-        onRefresh={refetch}
-      />
+      <div className="space-y-4">
+        <DispatchMcpAccessPanel />
+        <AgentsPanel
+          agents={(data || []) as ConnectedAgent[]}
+          onRefresh={refetch}
+        />
+      </div>
     </DispatchShell>
   );
 }

package/src/routes/pages/apps.tsx

@@ -5,6 +5,7 @@ import {
   IconBrush,
   IconCalendarMonth,
   IconChartBar,
+  IconChevronDown,
   IconClipboardList,
   IconEyeOff,
   IconFileText,
@@ -22,6 +23,13 @@ import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
 import { WorkspaceAppCard } from "@/components/workspace-app-card";
 import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
 export function meta() {
@@ -58,7 +66,8 @@ const TEMPLATE_ICONS: Record<string, typeof IconMail> = {
 
 export default function AppsRoute() {
   const [showHidden, setShowHidden] = useState(false);
-  const { data: apps = [] } = useActionQuery(
+  const [templatesOpen, setTemplatesOpen] = useState(false);
+  const { data: apps = [], isLoading: appsLoading } = useActionQuery(
     "list-workspace-apps",
     { includeAgentCards: false, includeArchived: true },
     {
@@ -70,7 +79,7 @@ export default function AppsRoute() {
     {},
     { staleTime: 60_000 },
   );
-  const { data: templates = [] } = useActionQuery(
+  const { data: templates = [], isLoading: templatesLoading } = useActionQuery(
     "list-available-workspace-templates",
     {},
     { refetchInterval: 5_000 },
@@ -84,6 +93,7 @@ export default function AppsRoute() {
   const visibleApps = allApps.filter((app) => !app.archived);
   const archivedApps = allApps.filter((app) => app.archived);
   const typedTemplates = templates as AvailableTemplate[];
+  const showAppSkeletons = appsLoading && allApps.length === 0;
 
   return (
     <DispatchShell
@@ -94,82 +104,214 @@ export default function AppsRoute() {
           : "Open workspace apps and start new app creation from Dispatch."
       }
     >
-      <div className="space-y-6">
+      <div className="space-y-8">
         <section className="space-y-3">
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <IconApps size={16} className="text-muted-foreground" />
-              <h2 className="text-sm font-semibold text-foreground">
-                {workspaceLabel
-                  ? `Apps in ${workspaceLabel}`
-                  : "Workspace apps"}
-              </h2>
+          <div className="flex flex-wrap items-end justify-between gap-3">
+            <div className="flex min-w-0 items-start gap-2">
+              <IconApps
+                size={16}
+                className="mt-0.5 shrink-0 text-muted-foreground"
+              />
+              <div className="min-w-0">
+                <h2 className="truncate text-sm font-semibold text-foreground">
+                  {workspaceLabel
+                    ? `Apps in ${workspaceLabel}`
+                    : "Workspace apps"}
+                </h2>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {visibleApps.length} active
+                  {archivedApps.length > 0
+                    ? ` · ${archivedApps.length} hidden`
+                    : ""}
+                </p>
+              </div>
             </div>
-            <CreateAppPopover
-              align="end"
-              trigger={
-                <Button size="sm" variant="outline">
-                  <IconPlus size={15} className="mr-1.5" />
-                  App
-                </Button>
-              }
-            />
-          </div>
-
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {visibleApps.map((app) => (
-              <WorkspaceAppCard key={app.id} app={app} />
-            ))}
-
-            <CreateAppPopover />
+            {visibleApps.length > 0 ? (
+              <CreateAppPopover
+                align="end"
+                trigger={
+                  <Button size="sm">
+                    <IconPlus size={15} className="mr-1.5" />
+                    Create app
+                  </Button>
+                }
+              />
+            ) : null}
           </div>
-        </section>
 
-        {typedTemplates.length > 0 ? (
-          <section className="space-y-3">
-            <div className="flex items-center gap-2">
-              <IconStack3 size={16} className="text-muted-foreground" />
-              <h2 className="text-sm font-semibold text-foreground">
-                Add a template
-              </h2>
-              <span className="text-xs text-muted-foreground">
-                Scaffold a first-party app into{" "}
-                <code className="font-mono text-[11px]">apps/</code>.
-              </span>
-            </div>
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {typedTemplates.map((template) => (
-                <AddTemplateCard key={template.name} template={template} />
+          {showAppSkeletons ? (
+            <AppsSkeletonGrid />
+          ) : visibleApps.length > 0 ? (
+            <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {visibleApps.map((app) => (
+                <WorkspaceAppCard key={app.id} app={app} className="h-full" />
               ))}
             </div>
-          </section>
+          ) : (
+            <EmptyAppsState />
+          )}
+        </section>
+
+        {typedTemplates.length > 0 || templatesLoading ? (
+          <Collapsible open={templatesOpen} onOpenChange={setTemplatesOpen}>
+            <section className="space-y-3">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
+                <div className="flex min-w-0 items-center gap-2">
+                  <IconStack3
+                    size={16}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground">
+                      Templates
+                    </h2>
+                    <p className="text-xs text-muted-foreground">
+                      {templatesLoading
+                        ? "Checking available templates"
+                        : `${typedTemplates.length} available to scaffold`}
+                    </p>
+                  </div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                  >
+                    {templatesOpen ? "Hide" : "Show"}
+                    <IconChevronDown
+                      size={14}
+                      className={cn(
+                        "transition-transform",
+                        templatesOpen && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent>
+                {templatesLoading && typedTemplates.length === 0 ? (
+                  <AppsSkeletonGrid />
+                ) : (
+                  <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    {typedTemplates.map((template) => (
+                      <AddTemplateCard
+                        key={template.name}
+                        template={template}
+                      />
+                    ))}
+                  </div>
+                )}
+              </CollapsibleContent>
+            </section>
+          </Collapsible>
         ) : null}
 
         {archivedApps.length > 0 ? (
-          <section className="space-y-3">
-            <button
-              type="button"
-              onClick={() => setShowHidden((cur) => !cur)}
-              className="inline-flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
-            >
-              <IconEyeOff size={14} />
-              {showHidden ? "Hide" : "Show"} {archivedApps.length} hidden{" "}
-              {archivedApps.length === 1 ? "app" : "apps"}
-            </button>
-            {showHidden ? (
-              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-                {archivedApps.map((app) => (
-                  <WorkspaceAppCard key={app.id} app={app} />
-                ))}
+          <Collapsible open={showHidden} onOpenChange={setShowHidden}>
+            <section className="space-y-3">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
+                <div className="flex min-w-0 items-center gap-2">
+                  <IconEyeOff
+                    size={16}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground">
+                      Hidden apps
+                    </h2>
+                    <p className="text-xs text-muted-foreground">
+                      {archivedApps.length} hidden{" "}
+                      {archivedApps.length === 1 ? "app" : "apps"}
+                    </p>
+                  </div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                  >
+                    {showHidden ? "Hide" : "Show"}
+                    <IconChevronDown
+                      size={14}
+                      className={cn(
+                        "transition-transform",
+                        showHidden && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
               </div>
-            ) : null}
-          </section>
+              <CollapsibleContent>
+                <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                  {archivedApps.map((app) => (
+                    <WorkspaceAppCard
+                      key={app.id}
+                      app={app}
+                      className="h-full"
+                    />
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </section>
+          </Collapsible>
         ) : null}
       </div>
     </DispatchShell>
   );
 }
 
+function AppsSkeletonGrid() {
+  return (
+    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div key={index} className="rounded-lg border bg-card p-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1 space-y-3">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-24" />
+              <div className="space-y-2 pt-1">
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-2/3" />
+              </div>
+            </div>
+            <Skeleton className="h-7 w-7 rounded-md" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyAppsState() {
+  return (
+    <div className="rounded-lg border border-dashed bg-card px-4 py-10 text-center">
+      <div className="mx-auto flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+        <IconApps size={18} />
+      </div>
+      <h3 className="mt-3 text-sm font-semibold text-foreground">
+        No workspace apps yet
+      </h3>
+      <p className="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
+        Create an app when a workflow needs its own focused place to live.
+      </p>
+      <div className="mt-4">
+        <CreateAppPopover
+          trigger={
+            <Button size="sm">
+              <IconPlus size={15} className="mr-1.5" />
+              Create app
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
 function AddTemplateCard({ template }: { template: AvailableTemplate }) {
   const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;
   const scaffold = useActionMutation("scaffold-workspace-app", {
@@ -188,9 +330,9 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
   });
 
   return (
-    <div className="group relative flex items-start gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30">
+    <div className="group relative flex h-full min-h-36 items-stretch gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30">
       <div
-        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
+        className="flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-md"
         style={{
           backgroundColor: `rgb(${template.colorRgb} / 0.12)`,
           color: template.color,
@@ -198,7 +340,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
       >
         <Icon size={18} />
       </div>
-      <div className="min-w-0 flex-1">
+      <div className="flex min-w-0 flex-1 flex-col">
         <div className="flex min-w-0 items-center gap-2">
           <h3 className="truncate text-sm font-semibold text-foreground">
             {template.label}
@@ -207,7 +349,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
         <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
           {template.hint}
         </p>
-        <div className="mt-3">
+        <div className="mt-auto pt-3">
           <Button
             size="sm"
             variant="outline"
@@ -217,7 +359,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
             {scaffold.isPending ? (
               <>
                 <IconLoader2 size={14} className="mr-1.5 animate-spin" />
-                Adding…
+                Adding...
               </>
             ) : (
               <>

package/src/routes/pages/overview.tsx

@@ -213,16 +213,22 @@ function WorkspaceAppsSection({
         </Button>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        {showSkeletons
-          ? Array.from({ length: 6 }).map((_, index) => (
-              <AppCardSkeleton key={index} />
-            ))
-          : visibleApps.map((app) => (
-              <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
-            ))}
-
-        {!showSkeletons ? <CreateAppPopover /> : null}
+      <div className="grid auto-rows-fr gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {showSkeletons ? (
+          Array.from({ length: 6 }).map((_, index) => (
+            <AppCardSkeleton key={index} />
+          ))
+        ) : visibleApps.length > 0 ? (
+          visibleApps.map((app) => (
+            <WorkspaceAppCard
+              key={app.id}
+              app={app}
+              className="h-full min-h-32"
+            />
+          ))
+        ) : (
+          <CreateAppPopover />
+        )}
       </div>
     </section>
   );

package/src/server/lib/mcp-access-store.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import {
+  isAppAllowedByMcpAccess,
+  normalizeMcpAppAccessSettings,
+} from "./mcp-access-store.js";
+
+describe("normalizeMcpAppAccessSettings", () => {
+  it("defaults to all apps", () => {
+    expect(normalizeMcpAppAccessSettings(null)).toEqual({
+      mode: "all-apps",
+      selectedAppIds: [],
+      updatedAt: undefined,
+      updatedBy: undefined,
+    });
+  });
+
+  it("normalizes selected app ids", () => {
+    expect(
+      normalizeMcpAppAccessSettings({
+        mode: "selected-apps",
+        selectedAppIds: [" Mail ", "mail", "calendar"],
+        updatedAt: "2026-05-20T12:00:00.000Z",
+        updatedBy: "admin@example.test",
+      }),
+    ).toEqual({
+      mode: "selected-apps",
+      selectedAppIds: ["mail", "calendar"],
+      updatedAt: "2026-05-20T12:00:00.000Z",
+      updatedBy: "admin@example.test",
+    });
+  });
+});
+
+describe("isAppAllowedByMcpAccess", () => {
+  it("allows every app in all-apps mode", () => {
+    expect(
+      isAppAllowedByMcpAccess("mail", {
+        mode: "all-apps",
+        selectedAppIds: [],
+      }),
+    ).toBe(true);
+  });
+
+  it("checks selected grants in selected-apps mode", () => {
+    expect(
+      isAppAllowedByMcpAccess("mail", {
+        mode: "selected-apps",
+        selectedAppIds: ["calendar"],
+      }),
+    ).toBe(false);
+    expect(
+      isAppAllowedByMcpAccess("calendar", {
+        mode: "selected-apps",
+        selectedAppIds: ["calendar"],
+      }),
+    ).toBe(true);
+  });
+});