@agent-native/dispatch 0.19.2 → 0.20.1

package/src/components/workspace-template-card.spec.tsx

@@ -66,14 +66,23 @@ describe("WorkspaceTemplateCard", () => {
     vi.unstubAllGlobals();
   });
 
-  it("shows template context and only links to a live app when supplied", async () => {
+  it("keeps template cards concise and moves setup context into the add flow", async () => {
     await act(async () => {
       root.render(<WorkspaceTemplateCard template={template} />);
     });
 
     expect(container.textContent).toContain("Weekly report");
-    expect(container.textContent).toContain("RevOps");
-    expect(container.textContent).toContain(
+    expect(container.textContent).not.toContain("RevOps");
+    expect(container.textContent).not.toContain(
+      "Connect your CRM after installing the app.",
+    );
+
+    const trigger = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
+    );
+    expect(trigger).not.toBeUndefined();
+    await act(async () => trigger?.click());
+    expect(document.body.textContent).toContain(
       "Connect your CRM after installing the app.",
     );
 
@@ -103,7 +112,7 @@ describe("WorkspaceTemplateCard", () => {
     });
 
     const trigger = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Create from template"),
+      (button) => button.textContent?.includes("Add app"),
     );
     expect(trigger).not.toBeUndefined();
 
@@ -144,6 +153,35 @@ describe("WorkspaceTemplateCard", () => {
     );
   });
 
+  it("keeps add app inside the catalog split-button menu", async () => {
+    await act(async () => {
+      root.render(<WorkspaceTemplateCard template={template} catalog />);
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("button")).some((button) =>
+        button.textContent?.includes("Add app"),
+      ),
+    ).toBe(false);
+
+    const optionsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Open options for Weekly report"]',
+    );
+    expect(optionsButton).not.toBeNull();
+    await act(async () => {
+      optionsButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+
+    const addItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.includes("Add app"));
+    expect(addItem).not.toBeUndefined();
+    await act(async () => addItem?.click());
+    expect(document.body.textContent).toContain("Choose the URL-safe id");
+  });
+
   it("accepts the list action envelope and renders installed state", async () => {
     await act(async () => {
       root.render(
@@ -166,9 +204,9 @@ describe("WorkspaceTemplateCard", () => {
     expect(container.textContent).toContain("Curated templates");
     expect(container.textContent).toContain("Installed");
     expect(container.querySelector('a[href^="https://"]')).toBeNull();
-    const remixButton = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Create from template"),
+    const addButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
     );
-    expect(remixButton).not.toHaveProperty("disabled", true);
+    expect(addButton).not.toHaveProperty("disabled", true);
   });
 });

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

@@ -2,26 +2,17 @@ import { useActionMutation } from "@agent-native/core/client/hooks";
 import {
   IconArrowUpRight,
   IconCircleCheck,
-  IconCopy,
-  IconExternalLink,
-  IconFileText,
+  IconPlus,
   IconPlugConnected,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
 import { cn } from "../lib/utils";
-import { Alert, AlertDescription } from "./ui/alert";
-import { Badge } from "./ui/badge";
+import { AppIcon } from "./app-icon";
+import { AppListRow } from "./app-list-row";
+import { AppOpenActions } from "./app-open-actions";
 import { Button } from "./ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
 import {
   Dialog,
   DialogContent,
@@ -43,6 +34,8 @@ export interface CuratedWorkspaceTemplate {
   description?: string | null;
   source?: string | null;
   sourceDescription?: string | null;
+  icon?: string | null;
+  color?: string | null;
   integrationSetup?: string | null;
   setupNote?: string | null;
   installed?: boolean | null;
@@ -69,6 +62,7 @@ export interface WorkspaceTemplateLabels {
   remixError: string;
   appIdRequired: string;
   source: string;
+  openApp: string;
   viewLiveApp: string;
 }
 
@@ -78,12 +72,13 @@ const DEFAULT_LABELS: WorkspaceTemplateLabels = {
   cancel: "Cancel",
   integrationSetup: "Integration setup",
   installed: "Installed",
-  remix: "Create from template",
+  remix: "Add app",
   remixing: "Creating app…",
   remixSuccess: "Template app creation started.",
-  remixError: "Could not create an app from this template",
+  remixError: "Could not add this app",
   appIdRequired: "App ID is required.",
   source: "Source",
+  openApp: "Open app",
   viewLiveApp: "View the live app",
 };
 
@@ -92,6 +87,7 @@ export interface WorkspaceTemplateCardProps {
   defaultAppId?: string;
   labels?: Partial<WorkspaceTemplateLabels>;
   className?: string;
+  catalog?: boolean;
   onRemixSuccess?: (
     result: unknown,
     template: CuratedWorkspaceTemplate,
@@ -119,7 +115,7 @@ function defaultAppIdFor(
 ): string {
   if (defaultAppId) return slugifyAppId(defaultAppId);
   const sourceId = slugifyAppId(template.appId || template.name);
-  return `${sourceId}-remix`;
+  return `${sourceId}-app`;
 }
 
 function stringifyError(error: unknown): string {
@@ -139,6 +135,7 @@ export function WorkspaceTemplateCard({
   defaultAppId,
   labels: labelOverrides,
   className,
+  catalog = false,
   onRemixSuccess,
 }: WorkspaceTemplateCardProps) {
   const labels = useMemo(() => mergeLabels(labelOverrides), [labelOverrides]);
@@ -189,75 +186,53 @@ export function WorkspaceTemplateCard({
   }
 
   return (
-    <Card
-      className={cn(
-        "flex h-full flex-col bg-card/40 shadow-none transition-[background-color] hover:bg-accent/15",
-        className,
-      )}
-    >
-      <CardHeader className="gap-2 p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-start gap-2.5">
-            <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground">
-              <IconFileText size={16} />
-            </span>
-            <div className="min-w-0">
-              <CardTitle className="truncate text-sm font-semibold">
-                {template.name}
-              </CardTitle>
-              {template.source || template.sourceDescription ? (
-                <CardDescription className="mt-1 truncate text-xs">
-                  <span className="font-medium text-foreground/70">
-                    {labels.source}:
-                  </span>{" "}
-                  {template.sourceDescription || template.source}
-                </CardDescription>
-              ) : null}
-            </div>
-          </div>
+    <AppListRow className={cn("items-center", className)}>
+      <AppIcon
+        id={template.id || template.templateId || template.name}
+        name={template.name}
+        icon={template.icon || undefined}
+        color={template.color || undefined}
+        size="sm"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <h3 className="truncate text-sm font-semibold text-foreground">
+            {template.name}
+          </h3>
           {isInstalled ? (
-            <Badge
-              variant="outline"
-              className="shrink-0 gap-1 border-primary/30 bg-primary/5 text-primary"
-            >
+            <span className="inline-flex shrink-0 items-center gap-1 text-xs text-primary">
               <IconCircleCheck size={13} />
               {labels.installed}
-            </Badge>
+            </span>
           ) : null}
         </div>
-      </CardHeader>
-
-      <CardContent className="flex flex-1 flex-col gap-3 p-4 pt-0">
         {template.description ? (
-          <p className="line-clamp-3 text-[13px] leading-5 text-muted-foreground">
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
             {template.description}
           </p>
         ) : null}
-
-        {setupNote ? (
-          <Alert className="border-border/60 bg-muted/25 px-3 py-2 [&>svg]:left-3 [&>svg]:top-2.5">
-            <IconPlugConnected size={15} />
-            <AlertDescription className="text-xs leading-5">
-              <span className="font-medium text-foreground/80">
-                {labels.integrationSetup}:
-              </span>{" "}
-              {setupNote}
-            </AlertDescription>
-          </Alert>
-        ) : null}
-      </CardContent>
-
-      <CardFooter className="flex flex-wrap justify-between gap-2 p-4 pt-0">
-        {liveUrl ? (
-          <Button variant="link" size="sm" className="h-8 px-0" asChild>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {catalog ? (
+          <AppOpenActions
+            name={template.name}
+            href={liveUrl ?? null}
+            target="_blank"
+            rel="noreferrer"
+            labels={{
+              addApp: labels.remix,
+              openApp: labels.openApp,
+            }}
+            onAddApp={() => setOpen(true)}
+          />
+        ) : liveUrl ? (
+          <Button variant="ghost" size="sm" className="shrink-0" asChild>
             <a href={liveUrl} target="_blank" rel="noreferrer">
               {labels.viewLiveApp}
-              <IconExternalLink />
+              <IconArrowUpRight />
             </a>
           </Button>
-        ) : (
-          <span />
-        )}
+        ) : null}
 
         <Dialog
           open={open}
@@ -265,12 +240,14 @@ export function WorkspaceTemplateCard({
             if (!remix.isPending) setOpen(nextOpen);
           }}
         >
-          <DialogTrigger asChild>
-            <Button type="button" size="sm">
-              <IconCopy />
-              {labels.remix}
-            </Button>
-          </DialogTrigger>
+          {!catalog ? (
+            <DialogTrigger asChild>
+              <Button type="button" variant="outline" size="sm">
+                <IconPlus />
+                {labels.remix}
+              </Button>
+            </DialogTrigger>
+          ) : null}
           <DialogContent className="max-w-md">
             <DialogHeader>
               <DialogTitle>{template.name}</DialogTitle>
@@ -297,6 +274,17 @@ export function WorkspaceTemplateCard({
                   disabled={remix.isPending}
                 />
               </div>
+              {setupNote ? (
+                <div className="flex items-start gap-2 rounded-lg bg-muted px-3 py-2 text-xs leading-5 text-muted-foreground">
+                  <IconPlugConnected className="mt-0.5 shrink-0" size={15} />
+                  <span>
+                    <span className="font-medium text-foreground">
+                      {labels.integrationSetup}:
+                    </span>{" "}
+                    {setupNote}
+                  </span>
+                </div>
+              ) : null}
               <DialogFooter>
                 <Button
                   type="button"
@@ -314,8 +302,8 @@ export function WorkspaceTemplateCard({
             </form>
           </DialogContent>
         </Dialog>
-      </CardFooter>
-    </Card>
+      </div>
+    </AppListRow>
   );
 }
 
@@ -326,6 +314,8 @@ export interface WorkspaceTemplatesSectionProps {
   labels?: Partial<WorkspaceTemplateLabels>;
   className?: string;
   cardClassName?: string;
+  listClassName?: string;
+  catalog?: boolean;
   onRemixSuccess?: (
     result: unknown,
     template: CuratedWorkspaceTemplate,
@@ -345,6 +335,8 @@ export function WorkspaceTemplatesSection({
   labels,
   className,
   cardClassName,
+  listClassName,
+  catalog = false,
   onRemixSuccess,
 }: WorkspaceTemplatesSectionProps) {
   const templates = getTemplateItems(result);
@@ -354,13 +346,14 @@ export function WorkspaceTemplatesSection({
   return (
     <section className={cn("flex flex-col gap-3", className)}>
       {title ? <div className="text-sm font-semibold">{title}</div> : null}
-      <div className="grid gap-3 md:grid-cols-2">
+      <div className={cn("overflow-hidden rounded-2xl bg-card", listClassName)}>
         {templates.map((template) => (
           <WorkspaceTemplateCard
             key={templateIdFor(template)}
             template={template}
             defaultAppId={defaultAppId}
             labels={labels}
+            catalog={catalog}
             className={cardClassName}
             onRemixSuccess={onRemixSuccess}
           />

package/src/lib/other-apps.spec.ts

@@ -73,4 +73,35 @@ describe("filterOtherApps", () => {
       },
     ]);
   });
+
+  it("hides the unsupported CRM and Research entries", () => {
+    expect(
+      filterOtherApps(
+        [
+          {
+            id: "crm",
+            name: "CRM",
+            url: "https://crm.example.com",
+          },
+          {
+            id: "research",
+            name: "Research",
+            url: "https://research.example.com",
+          },
+          {
+            id: "mail",
+            name: "Mail",
+            url: "https://mail.agent-native.com",
+          },
+        ],
+        [],
+      ),
+    ).toEqual([
+      {
+        id: "mail",
+        name: "Mail",
+        url: "https://mail.agent-native.com",
+      },
+    ]);
+  });
 });

package/src/lib/other-apps.ts

@@ -12,6 +12,8 @@ export interface WorkspaceAppId {
   isDispatch?: boolean;
 }
 
+const HIDDEN_OTHER_APP_IDS = new Set(["crm", "research"]);
+
 function isHttpUrl(value: string): boolean {
   try {
     const url = new URL(value);
@@ -34,7 +36,13 @@ export function filterOtherApps(
   return connectedApps
     .filter((app) => {
       const id = app.id.trim().toLowerCase();
-      if (!id || workspaceAppIds.has(id) || seen.has(id)) return false;
+      if (
+        !id ||
+        HIDDEN_OTHER_APP_IDS.has(id) ||
+        workspaceAppIds.has(id) ||
+        seen.has(id)
+      )
+        return false;
       if (app.source === "workspace") return false;
       if (!isHttpUrl(app.url)) return false;
       seen.add(id);

package/src/lib/workspace-apps.ts

@@ -26,6 +26,10 @@ export interface WorkspaceAppSummary {
   archived?: boolean;
 }
 
+export function workspaceAppRoute(appId: string): string {
+  return `/apps/${encodeURIComponent(appId)}`;
+}
+
 export function workspaceAppHref(app: WorkspaceAppSummary): string | null {
   if (app.status === "pending") {
     return app.builderUrl

package/src/routes/index.spec.ts

@@ -31,7 +31,8 @@ describe("Dispatch route registration", () => {
     const admin = routes.find((route) => route.path === "admin");
     const adminPaths = admin?.children?.map((route) => route.path) ?? [];
     expect(adminPaths).toContain("operations");
-    expect(adminPaths).toContain("apps/:appId");
+    expect(adminPaths).not.toContain("apps");
+    expect(adminPaths).not.toContain("apps/:appId");
     expect(adminPaths.indexOf("operations")).toBeGreaterThanOrEqual(0);
   });
 });

package/src/routes/index.ts

@@ -38,8 +38,6 @@ export const dispatchRoutes: RouteConfig = [
   route("overview", "./pages/overview.js"),
   route("admin", "./pages/admin.js", [
     index("./pages/admin._index.js"),
-    route("apps", "./pages/apps.js"),
-    route("apps/:appId", "./pages/apps.$appId.js"),
     route("new-app", "./pages/new-app.js"),
     route("operations", "./pages/operations.js"),
     route("metrics", "./pages/metrics.js"),

package/src/routes/pages/admin._index.tsx

@@ -1,5 +1,11 @@
 import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Link } from "react-router";
 
+import {
+  useAdminNavGroups,
+  type AdminNavGroup,
+} from "../../components/admin-navigation";
 import { DispatchShell } from "../../components/dispatch-shell";
 
 export function meta() {
@@ -8,6 +14,7 @@ export function meta() {
 
 export default function AdminOverviewRoute() {
   const t = useT();
+  const groups = useAdminNavGroups();
 
   return (
     <DispatchShell
@@ -16,24 +23,85 @@ export default function AdminOverviewRoute() {
         defaultValue: "Workspace controls and operations",
       })}
     >
-      <section className="max-w-2xl space-y-2">
-        <h2 className="text-base font-semibold text-foreground">
-          {t("dispatch.pages.adminWelcome", {
-            defaultValue: "Workspace control plane",
-          })}
-        </h2>
-        <p className="text-sm leading-6 text-muted-foreground">
-          {t("dispatch.pages.adminChooseArea", {
-            defaultValue:
-              "Manage apps, connections, automations, and operational tools from one place.",
-          })}
-        </p>
-        <p className="text-sm leading-6 text-muted-foreground">
-          {t("dispatch.pages.adminChooseAreaHint", {
-            defaultValue: "Choose an area from the Admin navigation.",
-          })}
-        </p>
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {groups.map((group, index) => (
+          <AdminAreaCard key={group.id} group={group} index={index} />
+        ))}
       </section>
     </DispatchShell>
   );
 }
+
+const GROUP_DESCRIPTIONS: Record<string, string> = {
+  workspace: "Apps, resources, and workspace setup",
+  operations: "Monitor runs, metrics, and audit history",
+  automation: "Control scheduled work and delivery",
+  connections: "Manage integrations, secrets, and messaging",
+  "agent-platform": "Manage connected agents and dreams",
+  "workspace-extensions": "Tools added by this workspace",
+};
+
+const GROUP_TONES = [
+  "bg-primary/10 text-primary",
+  "bg-secondary text-secondary-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-muted text-foreground",
+] as const;
+
+function AdminAreaCard({
+  group,
+  index,
+}: {
+  group: AdminNavGroup;
+  index: number;
+}) {
+  const t = useT();
+  const GroupIcon = group.items[0]?.icon;
+  const tone = GROUP_TONES[index % GROUP_TONES.length];
+
+  return (
+    <div className="rounded-2xl border border-transparent bg-card p-4 transition-[border-color,background-color] hover:border-border hover:bg-card/80">
+      <div className="flex items-start gap-3">
+        <span
+          className={`flex size-10 shrink-0 items-center justify-center rounded-xl ${tone}`}
+        >
+          {GroupIcon ? <GroupIcon size={19} /> : null}
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-foreground">
+            {t(group.labelKey, { defaultValue: group.label })}
+          </h2>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {GROUP_DESCRIPTIONS[group.id] || "Workspace tools and controls"}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-4 space-y-1">
+        {group.items
+          .filter((item) => item.id !== "admin-overview")
+          .map((item) => {
+            const ItemIcon = item.icon;
+            return (
+              <Link
+                key={item.id}
+                to={item.adminTo ?? item.to}
+                className="group flex min-h-9 items-center gap-2 rounded-lg px-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {ItemIcon ? <ItemIcon size={15} className="shrink-0" /> : null}
+                <span className="min-w-0 flex-1 truncate">
+                  {t(`dispatch.nav.${item.id}`, {
+                    defaultValue: item.label,
+                  })}
+                </span>
+                <IconChevronRight
+                  size={15}
+                  className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                />
+              </Link>
+            );
+          })}
+      </div>
+    </div>
+  );
+}