@agent-native/dispatch 0.24.0 → 0.24.2

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

@@ -1,10 +1,10 @@
+import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/core/client/chat-first";
 import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import { useFormatters, useT } from "@agent-native/core/client/i18n";
+import { useT } from "@agent-native/core/client/i18n";
 import {
-  IconCalendar,
   IconChevronDown,
   IconChevronRight,
   IconClockHour4,
@@ -13,6 +13,7 @@ import {
   IconEyeOff,
   IconFileText,
   IconKey,
+  IconPin,
   IconSettings,
   IconTrash,
   IconUser,
@@ -64,15 +65,21 @@ const APP_CARD_ACTION_CLASS =
 export function WorkspaceAppCard({
   app,
   className,
+  isPinned = false,
+  onTogglePinned,
 }: {
   app: WorkspaceAppSummary;
   className?: string;
+  isPinned?: boolean;
+  onTogglePinned?: () => void;
 }) {
   const t = useT();
-  const { formatDate } = useFormatters();
   const href = workspaceAppHref(app);
   const isPending = app.status === "pending";
   const pendingLabel = app.statusLabel || "Builder branch";
+  const pendingOpenLabel = t("dispatch.pages.openBuilderBranch", {
+    defaultValue: "Open in Builder",
+  });
   const isArchived = !!app.archived;
   const audience = app.audience ?? "internal";
   const [editOpen, setEditOpen] = useState(false);
@@ -135,6 +142,13 @@ export function WorkspaceAppCard({
       description: draftDescription.trim(),
     });
   };
+  const pinLabel = t(
+    isPinned ? "dispatch.pages.unpinApp" : "dispatch.pages.pinApp",
+    {
+      name: app.name,
+      defaultValue: `${isPinned ? "Unpin" : "Pin"} ${app.name}`,
+    },
+  );
 
   return (
     <>
@@ -174,16 +188,19 @@ export function WorkspaceAppCard({
                 Public
               </span>
             ) : null}
-            {isPending && app.branchName ? (
-              <span className="min-w-0 truncate">{app.branchName}</span>
-            ) : null}
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-2">
-          <WorkspaceAppOpenActions app={app} href={href} />
+          <WorkspaceAppOpenActions
+            app={app}
+            href={href}
+            isPinned={isPinned}
+            pinLabel={pinLabel}
+            pendingOpenLabel={pendingOpenLabel}
+            onTogglePinned={onTogglePinned}
+          />
           <WorkspaceAppSettings
             app={app}
-            formatDate={formatDate}
             isArchived={isArchived}
             isPending={isPending}
             onEdit={() => setEditOpen(true)}
@@ -193,11 +210,9 @@ export function WorkspaceAppCard({
             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>
@@ -270,12 +285,35 @@ export function WorkspaceAppCard({
 function WorkspaceAppOpenActions({
   app,
   href,
+  isPinned,
+  pinLabel,
+  pendingOpenLabel,
+  onTogglePinned,
 }: {
   app: WorkspaceAppSummary;
   href: string | null;
+  isPinned: boolean;
+  pinLabel: string;
+  pendingOpenLabel: string;
+  onTogglePinned?: () => void;
 }) {
   const navigate = useNavigate();
   const appRoute = workspaceAppRoute(app.id);
+  const isPending = app.status === "pending";
+
+  if (isPending) {
+    return href ? (
+      <Button asChild size="sm" variant="outline">
+        <a href={href} target="_blank" rel="noreferrer">
+          {pendingOpenLabel}
+        </a>
+      </Button>
+    ) : (
+      <Button size="sm" variant="outline" disabled>
+        {pendingOpenLabel}
+      </Button>
+    );
+  }
 
   if (!href) {
     return (
@@ -289,27 +327,34 @@ function WorkspaceAppOpenActions({
     <AppOpenActions
       name={app.name}
       href={href}
-      target="_blank"
-      rel="noreferrer"
-      showInlineOption
-      onOpenInline={() => {
+      showNewTabOption
+      onOpen={() => {
         navigate(appRoute);
       }}
+      menuItems={
+        onTogglePinned
+          ? [
+              {
+                id: "pin",
+                label: pinLabel,
+                icon: <IconPin size={14} strokeWidth={isPinned ? 2.2 : 1.7} />,
+                onSelect: onTogglePinned,
+              },
+            ]
+          : undefined
+      }
     />
   );
 }
 
 type WorkspaceAppMetadataLabels = {
-  created: string;
   createdBy: string;
   owner: string;
   teams: string;
-  notTracked: string;
 };
 
 function WorkspaceAppSettings({
   app,
-  formatDate,
   isArchived,
   isPending,
   onEdit,
@@ -321,7 +366,6 @@ function WorkspaceAppSettings({
   labels,
 }: {
   app: WorkspaceAppSummary;
-  formatDate: ReturnType<typeof useFormatters>["formatDate"];
   isArchived: boolean;
   isPending: boolean;
   onEdit: () => void;
@@ -350,19 +394,22 @@ function WorkspaceAppSettings({
         </TooltipTrigger>
         <TooltipContent>App settings</TooltipContent>
       </Tooltip>
-      <DropdownMenuContent align="end" className="w-72">
+      <DropdownMenuContent
+        align="end"
+        className={APP_ACTION_MENU_CONTENT_CLASS}
+      >
         <DropdownMenuItem onSelect={onEdit}>
-          <IconEdit size={14} className="mr-2" />
+          <IconEdit size={14} aria-hidden="true" />
           Edit details
         </DropdownMenuItem>
         {!isPending && !isArchived ? (
           <>
             <DropdownMenuItem onSelect={onKeys}>
-              <IconKey size={14} className="mr-2" />
+              <IconKey size={14} aria-hidden="true" />
               Manage keys
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={onResources}>
-              <IconFileText size={14} className="mr-2" />
+              <IconFileText size={14} aria-hidden="true" />
               Agent resources
             </DropdownMenuItem>
           </>
@@ -372,28 +419,21 @@ function WorkspaceAppSettings({
             onSelect={onRemovePending}
             className="text-destructive focus:text-destructive"
           >
-            <IconTrash size={14} className="mr-2" />
+            <IconTrash size={14} aria-hidden="true" />
             Remove from list
           </DropdownMenuItem>
         ) : isArchived ? (
           <DropdownMenuItem onSelect={onUnarchive}>
-            <IconEye size={14} className="mr-2" />
+            <IconEye size={14} aria-hidden="true" />
             Restore to list
           </DropdownMenuItem>
         ) : (
           <DropdownMenuItem onSelect={onArchive}>
-            <IconEyeOff size={14} className="mr-2" />
+            <IconEyeOff size={14} aria-hidden="true" />
             Hide from list
           </DropdownMenuItem>
         )}
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel className="font-normal">
-          <WorkspaceAppMetadata
-            app={app}
-            formatDate={formatDate}
-            labels={labels}
-          />
-        </DropdownMenuLabel>
+        <WorkspaceAppMetadata app={app} labels={labels} />
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -401,51 +441,68 @@ function WorkspaceAppSettings({
 
 function WorkspaceAppMetadata({
   app,
-  formatDate,
   labels,
 }: {
   app: WorkspaceAppSummary;
-  formatDate: ReturnType<typeof useFormatters>["formatDate"];
   labels: WorkspaceAppMetadataLabels;
 }) {
-  function formatMetadataDate(value: string | null | undefined): string {
-    if (!value) return labels.notTracked;
-    try {
-      return formatDate(value, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-      });
-    } catch {
-      return value;
-    }
+  const trackedText = (value: string | null | undefined): string | null => {
+    const normalized = value?.trim();
+    return normalized && normalized.toLowerCase() !== "not tracked"
+      ? normalized
+      : null;
+  };
+  const rows: Array<{
+    id: string;
+    icon: typeof IconUser;
+    label: string;
+    value: string;
+  }> = [];
+
+  const createdBy = trackedText(app.createdBy);
+  if (createdBy) {
+    rows.push({
+      id: "created-by",
+      icon: IconUser,
+      label: labels.createdBy,
+      value: createdBy,
+    });
+  }
+  const owner = trackedText(app.owner);
+  if (owner) {
+    rows.push({
+      id: "owner",
+      icon: IconUser,
+      label: labels.owner,
+      value: owner,
+    });
+  }
+  const teams = app.teams
+    ?.map(trackedText)
+    .filter((team): team is string => Boolean(team))
+    .join(", ");
+  if (teams) {
+    rows.push({
+      id: "teams",
+      icon: IconUsersGroup,
+      label: labels.teams,
+      value: teams,
+    });
   }
 
+  if (rows.length === 0) return null;
+
   return (
-    <div className="flex flex-col gap-1.5 text-xs text-muted-foreground">
-      <WorkspaceAppMetadataRow
-        icon={IconCalendar}
-        label={labels.created}
-        value={formatMetadataDate(app.createdAt)}
-      />
-      <WorkspaceAppMetadataRow
-        icon={IconUser}
-        label={labels.createdBy}
-        value={app.createdBy || labels.notTracked}
-      />
-      <WorkspaceAppMetadataRow
-        icon={IconUser}
-        label={labels.owner}
-        value={app.owner || labels.notTracked}
-      />
-      <WorkspaceAppMetadataRow
-        icon={IconUsersGroup}
-        label={labels.teams}
-        value={app.teams?.join(", ") || labels.notTracked}
-      />
-    </div>
+    <>
+      <DropdownMenuSeparator />
+      <DropdownMenuLabel className="font-normal">
+        <div className="flex flex-col gap-1.5 text-xs text-muted-foreground">
+          {rows.map((row) => (
+            <WorkspaceAppMetadataRow key={row.id} {...row} />
+          ))}
+        </div>
+      </DropdownMenuLabel>
+    </>
   );
 }
 
@@ -454,7 +511,7 @@ function WorkspaceAppMetadataRow({
   label,
   value,
 }: {
-  icon: typeof IconCalendar;
+  icon: typeof IconUser;
   label: string;
   value: string;
 }) {

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

@@ -0,0 +1,96 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconSearch, IconX } from "@tabler/icons-react";
+import { useId } from "react";
+
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+export function WorkspaceAppSearch({
+  query,
+  onQueryChange,
+  className,
+}: {
+  query: string;
+  onQueryChange: (query: string) => void;
+  className?: string;
+}) {
+  const t = useT();
+  const inputId = useId();
+  const label = t("dispatch.pages.searchApps", {
+    defaultValue: "Search apps",
+  });
+  const placeholder = t("dispatch.pages.searchAppsPlaceholder", {
+    defaultValue: "Search by name or description",
+  });
+
+  return (
+    <div role="search" className={cn("flex items-center gap-2", className)}>
+      <div className="relative min-w-0 flex-1">
+        <label htmlFor={inputId} className="sr-only">
+          {label}
+        </label>
+        <IconSearch
+          size={16}
+          aria-hidden="true"
+          className="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          id={inputId}
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          placeholder={placeholder}
+          className="h-9 bg-background ps-9"
+          autoComplete="off"
+        />
+      </div>
+      {query ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0 gap-1.5 text-muted-foreground"
+          onClick={() => onQueryChange("")}
+        >
+          <IconX size={14} aria-hidden="true" />
+          <span>
+            {t("dispatch.pages.clearAppSearch", {
+              defaultValue: "Clear",
+            })}
+          </span>
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+export function WorkspaceAppSearchEmpty({
+  query,
+  onClear,
+}: {
+  query: string;
+  onClear: () => void;
+}) {
+  const t = useT();
+  return (
+    <div className="rounded-lg border border-dashed bg-card px-4 py-8 text-center">
+      <p className="text-sm font-medium text-foreground">
+        {t("dispatch.pages.noAppsMatch", {
+          defaultValue: "No apps match your search",
+        })}
+      </p>
+      <p className="mx-auto mt-1 max-w-md truncate text-xs text-muted-foreground">
+        “{query}”
+      </p>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="mt-4"
+        onClick={onClear}
+      >
+        {t("dispatch.pages.clearAppSearch", { defaultValue: "Clear search" })}
+      </Button>
+    </div>
+  );
+}

package/src/components/workspace-resource-effective-stack.tsx

@@ -3,6 +3,7 @@ import { useActionQuery } from "@agent-native/core/client/hooks";
 import { cn } from "../lib/utils";
 import { ActionQueryError } from "./action-query-error";
 import { Badge } from "./ui/badge";
+import { Skeleton } from "./ui/skeleton";
 
 export function appAvailabilityLabel(value?: string) {
   switch (value) {
@@ -68,11 +69,11 @@ export function AppResourceEffectiveStack({
   if (isLoading && !context) {
     return (
       <div className="mt-3 rounded-lg border bg-muted/20 p-3">
-        <div className="h-3 w-44 animate-pulse rounded bg-muted-foreground/10" />
+        <Skeleton className="h-3 w-44" />
         <div className="mt-3 grid gap-2 sm:grid-cols-3">
-          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
-          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
-          <div className="h-20 animate-pulse rounded-md bg-muted-foreground/10" />
+          <Skeleton className="h-20 rounded-md" />
+          <Skeleton className="h-20 rounded-md" />
+          <Skeleton className="h-20 rounded-md" />
         </div>
       </div>
     );
@@ -99,7 +100,11 @@ export function AppResourceEffectiveStack({
             {resource.path}
           </div>
         </div>
-        <Badge variant="outline">{appAvailabilityLabel(availability)}</Badge>
+        {isLoading ? (
+          <Skeleton className="h-6 w-24 rounded-full" />
+        ) : (
+          <Badge variant="outline">{appAvailabilityLabel(availability)}</Badge>
+        )}
       </div>
 
       <div className="mt-3 grid gap-2 sm:grid-cols-3">

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

@@ -3,6 +3,7 @@ import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { TooltipProvider } from "./ui/tooltip";
 import {
   WorkspaceTemplateCard,
   WorkspaceTemplatesSection,
@@ -68,7 +69,11 @@ describe("WorkspaceTemplateCard", () => {
 
   it("keeps template cards concise and moves setup context into the add flow", async () => {
     await act(async () => {
-      root.render(<WorkspaceTemplateCard template={template} />);
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} />
+        </TooltipProvider>,
+      );
     });
 
     expect(container.textContent).toContain("Weekly report");
@@ -94,9 +99,11 @@ describe("WorkspaceTemplateCard", () => {
 
     await act(async () => {
       root.render(
-        <WorkspaceTemplateCard
-          template={{ ...template, liveUrl: null, productUrl: null }}
-        />,
+        <TooltipProvider>
+          <WorkspaceTemplateCard
+            template={{ ...template, liveUrl: null, productUrl: null }}
+          />
+        </TooltipProvider>,
       );
     });
     expect(
@@ -107,7 +114,9 @@ describe("WorkspaceTemplateCard", () => {
   it("creates an app with the default app id and allows an override", async () => {
     await act(async () => {
       root.render(
-        <WorkspaceTemplateCard template={template} defaultAppId="pipeline" />,
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} defaultAppId="pipeline" />
+        </TooltipProvider>,
       );
     });
 
@@ -155,14 +164,32 @@ describe("WorkspaceTemplateCard", () => {
 
   it("keeps add app available in catalog cards", async () => {
     await act(async () => {
-      root.render(<WorkspaceTemplateCard template={template} catalog />);
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} catalog />
+        </TooltipProvider>,
+      );
     });
 
-    const addButton = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Add app"),
+    const settingsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings for Weekly report"]',
     );
-    expect(addButton).toBeDefined();
-    await act(async () => addButton?.click());
+    expect(settingsButton).not.toBeNull();
+    await act(async () => {
+      settingsButton?.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();
+    const settingsMenu = document.querySelector<HTMLElement>('[role="menu"]');
+    expect(settingsMenu?.className).toContain("w-48");
+    expect(settingsMenu?.className).toContain("bg-popover");
+    expect(settingsMenu?.className).toContain("shadow-md");
+    expect(addItem?.querySelector("svg")).not.toBeNull();
+    await act(async () => addItem?.click());
     expect(document.body.textContent).toContain("Choose the URL-safe id");
     expect(
       container.querySelector('a[href="https://reports.example.test"]'),
@@ -172,19 +199,21 @@ describe("WorkspaceTemplateCard", () => {
   it("accepts the list action envelope and renders installed state", async () => {
     await act(async () => {
       root.render(
-        <WorkspaceTemplatesSection
-          templates={{
-            templates: [
-              {
-                ...template,
-                installed: true,
-                liveUrl: null,
-                productUrl: null,
-              },
-            ],
-          }}
-          title="Curated templates"
-        />,
+        <TooltipProvider>
+          <WorkspaceTemplatesSection
+            templates={{
+              templates: [
+                {
+                  ...template,
+                  installed: true,
+                  liveUrl: null,
+                  productUrl: null,
+                },
+              ],
+            }}
+            title="Curated templates"
+          />
+        </TooltipProvider>,
       );
     });
 

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

@@ -13,6 +13,7 @@ import { cn } from "../lib/utils";
 import { AppIcon } from "./app-icon";
 import { AppListRow } from "./app-list-row";
 import { AppOpenActions } from "./app-open-actions";
+import { AppRowSettings } from "./app-row-settings";
 import { Button } from "./ui/button";
 import {
   Dialog,
@@ -211,20 +212,16 @@ export function WorkspaceTemplateCard({
               <AppOpenActions
                 name={template.name}
                 href={liveUrl}
-                target="_blank"
                 rel="noreferrer"
                 labels={{ openApp: labels.openApp }}
+                showNewTabOption
               />
             ) : null}
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setOpen(true)}
-            >
-              <IconPlus />
-              {labels.remix}
-            </Button>
+            <AppRowSettings
+              name={template.name}
+              addAppLabel={labels.remix}
+              onAddApp={() => setOpen(true)}
+            />
           </>
         ) : liveUrl ? (
           <Button variant="ghost" size="sm" className="shrink-0" asChild>

package/src/lib/workspace-app-layout.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  normalizeWorkspaceAppLayout,
+  orderWorkspaceApps,
+  toggleWorkspaceAppPinned,
+  workspaceAppMatchesQuery,
+} from "./workspace-app-layout";
+
+describe("workspace app layout", () => {
+  it("keeps pinned apps first without changing the remaining catalog order", () => {
+    const apps = [
+      { id: "mail", name: "Mail" },
+      { id: "analytics", name: "Analytics" },
+      { id: "calendar", name: "Calendar" },
+    ];
+
+    expect(
+      orderWorkspaceApps(apps, {
+        pinnedIds: ["calendar", "calendar"],
+        orderedIds: ["mail", "analytics", "calendar"],
+      }).map((app) => app.id),
+    ).toEqual(["calendar", "mail", "analytics"]);
+  });
+
+  it("matches app names and descriptions case-insensitively", () => {
+    expect(
+      workspaceAppMatchesQuery(
+        { name: "Analytics", description: "Explore product health" },
+        "PRODUCT",
+      ),
+    ).toBe(true);
+    expect(workspaceAppMatchesQuery({ name: "Mail" }, "calendar")).toBe(false);
+  });
+
+  it("normalizes persisted layout ids and toggles pin state", () => {
+    const layout = normalizeWorkspaceAppLayout({
+      pinnedIds: ["mail", "mail", 42],
+      orderedIds: ["calendar", "", "calendar"],
+    });
+
+    expect(toggleWorkspaceAppPinned(layout, "calendar")).toEqual({
+      pinnedIds: ["calendar", "mail"],
+      orderedIds: ["calendar"],
+    });
+  });
+});