@agent-native/dispatch 0.19.1 → 0.20.0

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

@@ -8,15 +8,16 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconClockHour4,
-  IconDots,
   IconEdit,
   IconEye,
   IconEyeOff,
   IconFileText,
-  IconWorld,
+  IconKey,
+  IconSettings,
   IconTrash,
   IconUser,
   IconUsersGroup,
+  IconWorld,
 } from "@tabler/icons-react";
 import { useEffect, useState, type FormEvent } from "react";
 import { toast } from "sonner";
@@ -28,7 +29,10 @@ import {
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
-import { AppKeysPopover } from "./app-keys-popover";
+import { AppIcon } from "./app-icon";
+import { AppKeysPanel } from "./app-keys-popover";
+import { AppListRow } from "./app-list-row";
+import { AppOpenActions } from "./app-open-actions";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import {
@@ -38,7 +42,6 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "./ui/dialog";
 import {
   DropdownMenu,
@@ -67,12 +70,13 @@ export function WorkspaceAppCard({
   const t = useT();
   const { formatDate } = useFormatters();
   const href = workspaceAppHref(app);
-  const openInNewTab = isPendingBuilderHref(app);
   const isPending = app.status === "pending";
   const pendingLabel = app.statusLabel || "Builder branch";
   const isArchived = !!app.archived;
   const audience = app.audience ?? "internal";
   const [editOpen, setEditOpen] = useState(false);
+  const [keysOpen, setKeysOpen] = useState(false);
+  const [resourcesOpen, setResourcesOpen] = useState(false);
   const [draftName, setDraftName] = useState(app.name);
   const [draftDescription, setDraftDescription] = useState(
     app.description || "",
@@ -132,145 +136,71 @@ export function WorkspaceAppCard({
   };
 
   return (
-    <div
-      aria-disabled={!href}
-      className={cn(
-        "group relative rounded-xl bg-card/40 p-4 transition-[background-color] hover:bg-accent/15 focus-within:bg-accent/15 aria-disabled:opacity-60",
-        isArchived && "opacity-70",
-        className,
-      )}
-    >
-      {href ? (
-        <a
-          href={href}
-          target={openInNewTab ? "_blank" : undefined}
-          rel={openInNewTab ? "noreferrer" : undefined}
-          aria-label={`Open ${app.name}`}
-          className="absolute inset-0 z-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-        />
-      ) : null}
-
-      <div className="pointer-events-none relative z-10 flex h-full min-w-0 items-start justify-between gap-3">
+    <>
+      <AppListRow
+        className={cn(
+          !href && "opacity-60",
+          isArchived && "opacity-70",
+          className,
+        )}
+      >
+        <AppIcon id={app.id} name={app.name} size="sm" />
         <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
-            <h3 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
-              {app.name}
-            </h3>
+          <h3 className="truncate text-sm font-semibold text-foreground">
+            {app.name}
+          </h3>
+          {app.description || isPending ? (
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {app.description || pendingLabel}
+            </p>
+          ) : null}
+          <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
             {isPending ? (
-              <Badge
-                variant="outline"
-                className="shrink-0 gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
-              >
+              <span className="inline-flex min-w-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5">
                 <IconClockHour4 size={12} />
-                {pendingLabel}
-              </Badge>
+                <span className="truncate">{pendingLabel}</span>
+              </span>
             ) : null}
             {isArchived ? (
-              <Badge variant="outline" className="shrink-0 gap-1">
+              <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5">
                 <IconEyeOff size={12} />
                 Hidden
-              </Badge>
+              </span>
             ) : null}
             {audience === "public" ? (
-              <Badge variant="outline" className="shrink-0 gap-1">
+              <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5">
                 <IconWorld size={12} />
                 Public
-              </Badge>
+              </span>
+            ) : null}
+            {isPending && app.branchName ? (
+              <span className="min-w-0 truncate">{app.branchName}</span>
             ) : null}
           </div>
-          <p className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-            {app.path}
-          </p>
-          {isPending && app.branchName ? (
-            <p className="mt-1 truncate text-xs text-muted-foreground">
-              Builder branch: {app.branchName}
-            </p>
-          ) : null}
-          {app.description ? (
-            <p className="mt-2 min-h-10 line-clamp-2 text-[13px] leading-5 text-muted-foreground">
-              {app.description}
-            </p>
-          ) : null}
         </div>
-        <div className="flex shrink-0 items-center gap-1">
-          {!isPending && !isArchived ? (
-            <div className="pointer-events-auto">
-              <AppResourcesDialog app={app} />
-            </div>
-          ) : null}
-          {!isPending && !isArchived ? (
-            <div className="pointer-events-auto">
-              <AppKeysPopover appId={app.id} appName={app.name} />
-            </div>
-          ) : null}
-          <div className="pointer-events-auto">
-            <DropdownMenu>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      aria-label={`More actions for ${app.name}`}
-                      className={cn(
-                        APP_CARD_ACTION_CLASS,
-                        "inline-flex cursor-pointer items-center justify-center",
-                      )}
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <IconDots size={15} />
-                    </button>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>More actions</TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent align="end" className="w-72">
-                <DropdownMenuItem
-                  onSelect={(event) => {
-                    event.preventDefault();
-                    setEditOpen(true);
-                  }}
-                >
-                  <IconEdit size={14} className="mr-2" />
-                  Edit details
-                </DropdownMenuItem>
-                {isPending ? (
-                  <DropdownMenuItem
-                    onSelect={handleRemovePending}
-                    className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
-                  >
-                    <IconTrash size={14} className="mr-2" />
-                    Remove from list
-                  </DropdownMenuItem>
-                ) : isArchived ? (
-                  <DropdownMenuItem onSelect={handleUnarchive}>
-                    <IconEye size={14} className="mr-2" />
-                    Restore to list
-                  </DropdownMenuItem>
-                ) : (
-                  <DropdownMenuItem onSelect={handleArchive}>
-                    <IconEyeOff size={14} className="mr-2" />
-                    Hide from list
-                  </DropdownMenuItem>
-                )}
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel className="font-normal">
-                  <WorkspaceAppMetadata
-                    app={app}
-                    formatDate={formatDate}
-                    labels={{
-                      created: t("agents.dashboardMetadataCreated"),
-                      createdBy: t("agents.dashboardMetadataCreatedBy"),
-                      owner: t("dispatch.pages.appMetadataOwner"),
-                      teams: t("dispatch.pages.appMetadataTeams"),
-                      notTracked: t("agents.notTracked"),
-                    }}
-                  />
-                </DropdownMenuLabel>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <WorkspaceAppOpenActions app={app} href={href} />
+          <WorkspaceAppSettings
+            app={app}
+            formatDate={formatDate}
+            isArchived={isArchived}
+            isPending={isPending}
+            onEdit={() => setEditOpen(true)}
+            onKeys={() => setKeysOpen(true)}
+            onResources={() => setResourcesOpen(true)}
+            onArchive={handleArchive}
+            onUnarchive={handleUnarchive}
+            onRemovePending={handleRemovePending}
+            labels={{
+              created: t("agents.dashboardMetadataCreated"),
+              createdBy: t("agents.dashboardMetadataCreatedBy"),
+              owner: t("dispatch.pages.appMetadataOwner"),
+              teams: t("dispatch.pages.appMetadataTeams"),
+              notTracked: t("agents.notTracked"),
+            }}
+          />
         </div>
-      </div>
+      </AppListRow>
       <Dialog open={editOpen} onOpenChange={setEditOpen}>
         <DialogContent>
           <DialogHeader>
@@ -311,7 +241,157 @@ export function WorkspaceAppCard({
           </form>
         </DialogContent>
       </Dialog>
-    </div>
+      <Dialog open={keysOpen} onOpenChange={setKeysOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Manage keys for {app.name}</DialogTitle>
+            <DialogDescription>
+              Choose which workspace credentials this app can use.
+            </DialogDescription>
+          </DialogHeader>
+          <AppKeysPanel appId={app.id} appName={app.name} />
+          <DialogFooter>
+            <Button type="button" onClick={() => setKeysOpen(false)}>
+              Done
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <AppResourcesDialog
+        app={app}
+        open={resourcesOpen}
+        onOpenChange={setResourcesOpen}
+      />
+    </>
+  );
+}
+
+function WorkspaceAppOpenActions({
+  app,
+  href,
+}: {
+  app: WorkspaceAppSummary;
+  href: string | null;
+}) {
+  const openInNewTab = isPendingBuilderHref(app);
+
+  if (!href) {
+    return (
+      <Button size="sm" variant="outline" disabled>
+        Open app
+      </Button>
+    );
+  }
+
+  return (
+    <AppOpenActions
+      name={app.name}
+      href={href}
+      target={openInNewTab ? "_blank" : undefined}
+      rel={openInNewTab ? "noreferrer" : undefined}
+      showInlineOption
+      showNewTabOption
+    />
+  );
+}
+
+type WorkspaceAppMetadataLabels = {
+  created: string;
+  createdBy: string;
+  owner: string;
+  teams: string;
+  notTracked: string;
+};
+
+function WorkspaceAppSettings({
+  app,
+  formatDate,
+  isArchived,
+  isPending,
+  onEdit,
+  onKeys,
+  onResources,
+  onArchive,
+  onUnarchive,
+  onRemovePending,
+  labels,
+}: {
+  app: WorkspaceAppSummary;
+  formatDate: ReturnType<typeof useFormatters>["formatDate"];
+  isArchived: boolean;
+  isPending: boolean;
+  onEdit: () => void;
+  onKeys: () => void;
+  onResources: () => void;
+  onArchive: () => void;
+  onUnarchive: () => void;
+  onRemovePending: () => void;
+  labels: WorkspaceAppMetadataLabels;
+}) {
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-label={`Settings for ${app.name}`}
+              className={APP_CARD_ACTION_CLASS}
+            >
+              <IconSettings size={15} />
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>App settings</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="end" className="w-72">
+        <DropdownMenuItem onSelect={onEdit}>
+          <IconEdit size={14} className="mr-2" />
+          Edit details
+        </DropdownMenuItem>
+        {!isPending && !isArchived ? (
+          <>
+            <DropdownMenuItem onSelect={onKeys}>
+              <IconKey size={14} className="mr-2" />
+              Manage keys
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={onResources}>
+              <IconFileText size={14} className="mr-2" />
+              Agent resources
+            </DropdownMenuItem>
+          </>
+        ) : null}
+        {isPending ? (
+          <DropdownMenuItem
+            onSelect={onRemovePending}
+            className="text-destructive focus:text-destructive"
+          >
+            <IconTrash size={14} className="mr-2" />
+            Remove from list
+          </DropdownMenuItem>
+        ) : isArchived ? (
+          <DropdownMenuItem onSelect={onUnarchive}>
+            <IconEye size={14} className="mr-2" />
+            Restore to list
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem onSelect={onArchive}>
+            <IconEyeOff size={14} className="mr-2" />
+            Hide from list
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="font-normal">
+          <WorkspaceAppMetadata
+            app={app}
+            formatDate={formatDate}
+            labels={labels}
+          />
+        </DropdownMenuLabel>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
 
@@ -322,13 +402,7 @@ function WorkspaceAppMetadata({
 }: {
   app: WorkspaceAppSummary;
   formatDate: ReturnType<typeof useFormatters>["formatDate"];
-  labels: {
-    created: string;
-    createdBy: string;
-    owner: string;
-    teams: string;
-    notTracked: string;
-  };
+  labels: WorkspaceAppMetadataLabels;
 }) {
   function formatMetadataDate(value: string | null | undefined): string {
     if (!value) return labels.notTracked;
@@ -389,8 +463,15 @@ function WorkspaceAppMetadataRow({
   );
 }
 
-function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
-  const [open, setOpen] = useState(false);
+function AppResourcesDialog({
+  app,
+  open,
+  onOpenChange,
+}: {
+  app: WorkspaceAppSummary;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
   const [inspectedResourceId, setInspectedResourceId] = useState<string | null>(
     null,
   );
@@ -408,27 +489,10 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
     <Dialog
       open={open}
       onOpenChange={(nextOpen) => {
-        setOpen(nextOpen);
+        onOpenChange(nextOpen);
         if (!nextOpen) setInspectedResourceId(null);
       }}
     >
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DialogTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              aria-label={`View agent resources for ${app.name}`}
-              className={APP_CARD_ACTION_CLASS}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <IconFileText size={14} />
-            </Button>
-          </DialogTrigger>
-        </TooltipTrigger>
-        <TooltipContent>View agent resources</TooltipContent>
-      </Tooltip>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>{app.name} agent resources</DialogTitle>
@@ -546,7 +610,7 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
           )}
         </div>
         <DialogFooter>
-          <Button type="button" onClick={() => setOpen(false)}>
+          <Button type="button" onClick={() => onOpenChange(false)}>
             Done
           </Button>
         </DialogFooter>

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);
   });
 });