@agent-native/dispatch 0.6.0 → 0.7.0

package/src/components/messaging-setup-panel.tsx

@@ -449,23 +449,34 @@ export function MessagingSetupPanel() {
                     </p>
                   </div>
                 </div>
-                <div className="flex items-center gap-3">
-                  <a
-                    href={platform.docsUrl}
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                <div className="flex shrink-0 items-center gap-1">
+                  <Button
+                    asChild
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-muted-foreground"
                   >
-                    Docs
-                  </a>
+                    <a href={platform.docsUrl} target="_blank" rel="noreferrer">
+                      Docs
+                      <IconExternalLink className="ml-1 h-3 w-3" />
+                    </a>
+                  </Button>
                   {platform.externalUrl ? (
-                    <a
-                      href={platform.externalUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 px-2 text-xs text-muted-foreground"
                     >
-                      {platform.externalLabel ?? "Open"}
-                      <IconExternalLink className="h-3.5 w-3.5" />
-                    </a>
+                      <a
+                        href={platform.externalUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {platform.externalLabel ?? "Open"}
+                        <IconExternalLink className="ml-1 h-3 w-3" />
+                      </a>
+                    </Button>
                   ) : null}
                 </div>
               </div>
@@ -609,7 +620,7 @@ export function MessagingSetupPanel() {
                 </div>
               ) : null}
 
-              <div className="mt-5 flex flex-wrap gap-2">
+              <div className="mt-5 flex flex-wrap items-center justify-end gap-2 border-t border-border pt-4">
                 {platform.id === "telegram" && configured ? (
                   <Button
                     variant="outline"
@@ -626,31 +637,35 @@ export function MessagingSetupPanel() {
                     )}
                   </Button>
                 ) : null}
-                <Button
-                  onClick={() => togglePlatform(platform, enabled)}
-                  disabled={
-                    togglingPlatform === platform.id || (!enabled && !canEnable)
-                  }
-                >
-                  {togglingPlatform === platform.id ? (
-                    <>
-                      <IconLoader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Saving...
-                    </>
-                  ) : enabled ? (
-                    "Disable"
-                  ) : (
-                    "Enable"
-                  )}
-                </Button>
+                {!configured && !enabled ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span tabIndex={0}>
+                        <Button disabled>Enable</Button>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      Save the required credentials first.
+                    </TooltipContent>
+                  </Tooltip>
+                ) : (
+                  <Button
+                    onClick={() => togglePlatform(platform, enabled)}
+                    disabled={togglingPlatform === platform.id}
+                  >
+                    {togglingPlatform === platform.id ? (
+                      <>
+                        <IconLoader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Saving...
+                      </>
+                    ) : enabled ? (
+                      "Disable"
+                    ) : (
+                      "Enable"
+                    )}
+                  </Button>
+                )}
               </div>
-
-              {!configured ? (
-                <p className="mt-3 text-xs text-muted-foreground">
-                  Save the required credentials before enabling {platform.label}
-                  .
-                </p>
-              ) : null}
             </section>
           );
         })}

package/src/components/workspace-app-card.tsx

@@ -1,21 +1,35 @@
+import { useEffect, useState, type FormEvent } from "react";
 import { useActionMutation } from "@agent-native/core/client";
 import {
   IconArrowUpRight,
   IconClockHour4,
   IconDots,
+  IconEdit,
   IconEye,
   IconEyeOff,
+  IconWorld,
   IconTrash,
 } from "@tabler/icons-react";
 import { toast } from "sonner";
 import { AppKeysPopover } from "@/components/app-keys-popover";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import {
   isPendingBuilderHref,
@@ -34,6 +48,18 @@ export function WorkspaceAppCard({
   const openInNewTab = isPendingBuilderHref(app);
   const isPending = app.status === "pending";
   const isArchived = !!app.archived;
+  const audience = app.audience ?? "internal";
+  const [editOpen, setEditOpen] = useState(false);
+  const [draftName, setDraftName] = useState(app.name);
+  const [draftDescription, setDraftDescription] = useState(
+    app.description || "",
+  );
+
+  useEffect(() => {
+    if (editOpen) return;
+    setDraftName(app.name);
+    setDraftDescription(app.description || "");
+  }, [app.description, app.name, editOpen]);
 
   const archive = useActionMutation("archive-workspace-app", {
     onError: (err) =>
@@ -47,6 +73,14 @@ export function WorkspaceAppCard({
     onError: (err) =>
       toast.error(`Could not remove ${app.name}: ${stringifyError(err)}`),
   });
+  const updateMetadata = useActionMutation("update-workspace-app-metadata", {
+    onSuccess: () => {
+      toast.success(`Updated ${draftName.trim() || app.name}`);
+      setEditOpen(false);
+    },
+    onError: (err) =>
+      toast.error(`Could not update ${app.name}: ${stringifyError(err)}`),
+  });
 
   const handleArchive = () => {
     archive.mutate({ appId: app.id });
@@ -60,6 +94,19 @@ export function WorkspaceAppCard({
     removePending.mutate({ appId: app.id });
     toast.success(`Removed pending ${app.name}`);
   };
+  const handleMetadataSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const name = draftName.trim();
+    if (!name) {
+      toast.error("App name is required.");
+      return;
+    }
+    updateMetadata.mutate({
+      appId: app.id,
+      name,
+      description: draftDescription.trim(),
+    });
+  };
 
   return (
     <div
@@ -101,6 +148,12 @@ export function WorkspaceAppCard({
                 Hidden
               </Badge>
             ) : null}
+            {audience === "public" ? (
+              <Badge variant="outline" className="shrink-0 gap-1">
+                <IconWorld size={12} />
+                Public
+              </Badge>
+            ) : null}
           </div>
           <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
             {app.path}
@@ -135,6 +188,15 @@ export function WorkspaceAppCard({
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-44">
+                <DropdownMenuItem
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    setEditOpen(true);
+                  }}
+                >
+                  <IconEdit size={14} className="mr-2" />
+                  Edit details
+                </DropdownMenuItem>
                 {isPending ? (
                   <DropdownMenuItem
                     onSelect={handleRemovePending}
@@ -165,6 +227,46 @@ export function WorkspaceAppCard({
           ) : null}
         </div>
       </div>
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit app details</DialogTitle>
+          </DialogHeader>
+          <form className="space-y-4" onSubmit={handleMetadataSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor={`app-name-${app.id}`}>Name</Label>
+              <Input
+                id={`app-name-${app.id}`}
+                value={draftName}
+                maxLength={120}
+                onChange={(event) => setDraftName(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`app-description-${app.id}`}>Description</Label>
+              <Textarea
+                id={`app-description-${app.id}`}
+                value={draftDescription}
+                maxLength={500}
+                rows={4}
+                onChange={(event) => setDraftDescription(event.target.value)}
+              />
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setEditOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={updateMetadata.isPending}>
+                {updateMetadata.isPending ? "Saving..." : "Save"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

package/src/hooks/use-navigation-state.ts

@@ -77,11 +77,17 @@ export function useNavigationState(extensions?: DispatchExtensionConfig) {
 function routerPath(path: string): string {
   const basePath = appBasePath();
   if (!basePath) return path;
-  if (path === basePath) return "/";
-  if (path.startsWith(`${basePath}/`)) {
-    return path.slice(basePath.length) || "/";
+  let result = path;
+  // Iteratively strip basename. A path that arrives doubly-prefixed
+  // (e.g. "/dispatch/dispatch/overview", possibly from a stale link or a
+  // prior bug) would otherwise get partially stripped here and then
+  // re-prefixed by react-router's basename, restoring the bad URL.
+  for (let i = 0; i < 4; i += 1) {
+    if (result === basePath) return "/";
+    if (!result.startsWith(`${basePath}/`)) break;
+    result = result.slice(basePath.length) || "/";
   }
-  return path;
+  return result;
 }
 
 function extensionItemMatchesPath(

package/src/lib/catch-all-target.spec.ts

@@ -0,0 +1,218 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const loadWorkspaceAppsManifestMock = vi.hoisted(() => vi.fn());
+const getBuiltinAgentsMock = vi.hoisted(() => vi.fn());
+
+vi.mock("@agent-native/core/server/agent-discovery", () => ({
+  loadWorkspaceAppsManifest: loadWorkspaceAppsManifestMock,
+  getBuiltinAgents: getBuiltinAgentsMock,
+}));
+
+import { resolveCatchAllTarget } from "./catch-all-target.js";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("resolveCatchAllTarget", () => {
+  it("prefers the workspace manifest entry when one matches", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "todo", name: "Todo", path: "/todo" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([
+      {
+        id: "todo",
+        name: "Todo",
+        description: "",
+        url: "https://todo.example.com",
+        color: "#000",
+      },
+    ]);
+
+    expect(resolveCatchAllTarget("todo")).toBe("/todo");
+  });
+
+  it("falls back to the built-in template URL when no workspace manifest exists", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue(null);
+    getBuiltinAgentsMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        description: "",
+        url: "http://localhost:8084",
+        color: "#06B6D4",
+      },
+    ]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("http://localhost:8084");
+  });
+
+  it("falls back to the built-in template URL when the workspace manifest does not include the app", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "dispatch", name: "Dispatch", path: "/dispatch" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        description: "",
+        url: "http://localhost:8084",
+        color: "#06B6D4",
+      },
+    ]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("http://localhost:8084");
+  });
+
+  it("normalizes a manifest entry without a leading slash", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "todo", name: "Todo", path: "todo" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("todo")).toBe("/todo");
+  });
+
+  it("uses app.path when id !== path (not /${appId})", () => {
+    // Before the fix, an entry whose mounted path differs from its id —
+    // e.g. id: "forms", path: "my-forms" without a leading slash — was
+    // silently rewritten to `/forms` (the appId) and routed to the wrong
+    // app. The normalizer now keeps the manifest path and only prepends
+    // the missing slash.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "forms", name: "Forms", path: "my-forms" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/my-forms");
+  });
+
+  it("prefers app.url when the manifest entry has an externally-hosted URL", () => {
+    // Workspaces can point at remote deploys. The catch-all should bounce
+    // to the absolute URL instead of mounting a local path that doesn't
+    // exist inside the gateway.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        path: "/forms",
+        url: "https://forms.example.com",
+      },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("https://forms.example.com");
+  });
+
+  it("ignores app.url that isn't an absolute http(s) URL and falls back to path", () => {
+    // Bare hostname — `new URL("forms.example.com")` throws, so the value
+    // is rejected and we fall through to the (validated) path. Without
+    // this, the catch-all would `throw redirect("forms.example.com")`
+    // and the browser would treat the value as a relative path inside the
+    // gateway, producing a broken redirect.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        path: "/forms",
+        url: "forms.example.com",
+      },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/forms");
+  });
+
+  it("rejects non-http(s) URL schemes (e.g. javascript:) and falls back to path", () => {
+    // Defense in depth — a hostile manifest entry can't produce a
+    // `javascript:` redirect target. Validation enforces http(s) only.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        path: "/forms",
+        url: "javascript:alert(1)",
+      },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/forms");
+  });
+
+  it("strips a trailing slash from app.url", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        path: "/forms",
+        url: "https://forms.example.com/",
+      },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("https://forms.example.com");
+  });
+
+  it("ignores an empty/whitespace app.url and falls back to path", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      {
+        id: "forms",
+        name: "Forms",
+        path: "/forms",
+        url: "   ",
+      },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/forms");
+  });
+
+  it("collapses leading slashes/backslashes in app.path so `/\\evil.example` can't redirect off-origin", () => {
+    // Browsers normalize backslashes to forward slashes during URL
+    // parsing, so `throw redirect("/\\evil.example")` would resolve to
+    // `https://evil.example`. The regex covers both slash types.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "forms", name: "Forms", path: "/\\evil.example" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/evil.example");
+  });
+
+  it("collapses leading double slashes in app.path so `//evil.example` can't redirect off-origin", () => {
+    // The manifest parser only checks `startsWith("/")`, so a path of
+    // `//evil.example` slips through. Browsers treat that as a network-
+    // path reference and `throw redirect("//evil.example")` would redirect
+    // to `https://evil.example` — the same phishing vector the `app.url`
+    // validator closes. Collapse the leading slashes so the redirect
+    // stays on the gateway.
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "forms", name: "Forms", path: "//evil.example" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/evil.example");
+  });
+
+  it("falls back to /${appId} when the manifest entry has neither path nor url", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "forms", name: "Forms", path: "" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("forms")).toBe("/forms");
+  });
+
+  it("returns null when nothing matches", () => {
+    loadWorkspaceAppsManifestMock.mockReturnValue([
+      { id: "dispatch", name: "Dispatch", path: "/dispatch" },
+    ]);
+    getBuiltinAgentsMock.mockReturnValue([]);
+
+    expect(resolveCatchAllTarget("unknown-app")).toBeNull();
+  });
+});

package/src/lib/catch-all-target.ts

@@ -0,0 +1,99 @@
+import {
+  getBuiltinAgents,
+  loadWorkspaceAppsManifest,
+} from "@agent-native/core/server/agent-discovery";
+
+/**
+ * Resolve where `/dispatch/<appId>` should bounce to when it doesn't match
+ * an explicit dispatch route. Used by the `$appId` catch-all route loader.
+ *
+ * Resolution order:
+ *
+ * 1. Workspace apps manifest (env, .agent-native/workspace-apps.json, or a
+ *    filesystem scan of `apps/`).
+ *    - `app.url` (absolute URL — externally hosted workspace app) wins if
+ *      present.
+ *    - Otherwise the `app.path` mounted under the workspace gateway is
+ *      used. Path is normalized to a leading slash if missing
+ *      (e.g. manifest entry `path: "my-forms"` → `/my-forms`), so an app
+ *      whose mounted path differs from its id ends up at the right place
+ *      instead of being silently rewritten to `/${appId}`.
+ *    - Bare entry with no path / url falls back to `/${appId}`.
+ * 2. First-party template registry. When no workspace manifest matches
+ *    (framework dev with each template on its own port, hosted dispatch
+ *    with no sibling apps), return the matching template's deploy URL —
+ *    dev URL in development (e.g. http://localhost:8084 for forms), prod
+ *    URL in production (e.g. https://forms.agent-native.com).
+ *
+ * Returns `null` if neither lookup matches, letting the route render its
+ * "Page not found" pane.
+ */
+/**
+ * Validate `app.url` is an absolute http(s) URL before we trust it as a
+ * redirect target. A bare hostname (`"forms.example.com"`) or a
+ * `javascript:` scheme would otherwise get returned verbatim from
+ * `resolveCatchAllTarget` and produce a broken redirect (or a phishing
+ * vector). Mirrors `normalizeWorkspaceAppUrl` in
+ * `packages/core/src/deploy/workspace-deploy.ts` — but inlined to avoid
+ * pulling the deploy CLI module into a runtime path.
+ */
+function validatedAbsoluteUrl(value: unknown): string | undefined {
+  if (typeof value !== "string" || !value.trim()) return undefined;
+  try {
+    const parsed = new URL(value.trim());
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+      return undefined;
+    }
+    return parsed.toString().replace(/\/$/, "");
+  } catch {
+    return undefined;
+  }
+}
+
+export function resolveCatchAllTarget(appId: string): string | null {
+  const apps = loadWorkspaceAppsManifest();
+  if (apps) {
+    const app = apps.find((entry) => entry?.id === appId);
+    if (app) {
+      // Explicit externally-hosted URL wins. Workspaces that point at a
+      // remote deploy (e.g. a sibling app on Netlify) set `url` and we
+      // should bounce the user there rather than mounting a local path
+      // that doesn't exist inside the gateway. Validate the URL first —
+      // a bare hostname or non-http(s) scheme would produce a broken
+      // redirect (and a `javascript:` value would be a phishing vector).
+      const url = validatedAbsoluteUrl(app.url);
+      if (url) {
+        return url;
+      }
+      // Fall back to the mounted path. Normalize to leading slash so an
+      // entry whose path differs from its id (e.g. `id: "forms"`,
+      // `path: "my-forms"`) still lands on the correct gateway mount —
+      // not on `/${appId}`, which would silently route to the wrong app.
+      //
+      // Reject scheme-relative paths. Three variants reach this point —
+      // all of them get collapsed to a single leading slash so the
+      // redirect stays on the gateway:
+      //
+      //   `//evil.example`   — network-path reference, browser treats as
+      //                        absolute (https://evil.example).
+      //   `/\evil.example`   — browsers normalize backslashes to forward
+      //                        slashes during URL parsing, same result.
+      //   `\/evil.example`   — same idea, leading-backslash variant.
+      //
+      // The manifest parser only checks `startsWith("/")` for the first
+      // case, and even that allows `//evil…`. Defend in depth here by
+      // collapsing any run of leading slashes-or-backslashes to one
+      // forward slash. Same phishing vector that `validatedAbsoluteUrl`
+      // closes for `app.url`.
+      if (typeof app.path === "string" && app.path.trim()) {
+        const normalized = app.path.trim().replace(/^[/\\]+/, "/");
+        return normalized.startsWith("/") ? normalized : `/${normalized}`;
+      }
+      return `/${appId}`;
+    }
+  }
+  const builtin = getBuiltinAgents("dispatch").find(
+    (agent) => agent.id === appId,
+  );
+  return builtin?.url ?? null;
+}

package/src/lib/workspace-apps.ts

@@ -5,10 +5,19 @@ export interface WorkspaceAppSummary {
   path: string;
   url?: string | null;
   isDispatch?: boolean;
+  audience?: "internal" | "public";
+  publicPaths?: string[];
+  protectedPaths?: string[];
   status?: "ready" | "pending";
   statusLabel?: string;
   builderUrl?: string | null;
   branchName?: string | null;
+  createdAt?: string | null;
+  agentCardUrl?: string | null;
+  agentCardReachable?: boolean;
+  a2aEndpointUrl?: string | null;
+  agentName?: string | null;
+  agentSkillsCount?: number | null;
   archived?: boolean;
 }