@agent-native/dispatch 0.19.2 → 0.20.1

package/src/components/app-icon.tsx

@@ -0,0 +1,149 @@
+import {
+  IconActivity,
+  IconApps,
+  IconBrain,
+  IconBrush,
+  IconCalendar,
+  IconChartBar,
+  IconClipboardList,
+  IconFileText,
+  IconMail,
+  IconPhoto,
+  IconPlugConnected,
+  IconPresentation,
+  IconPuzzle,
+  IconScreenShare,
+} from "@tabler/icons-react";
+import type { CSSProperties } from "react";
+
+import { cn } from "../lib/utils";
+
+type AppIconComponent = typeof IconApps;
+
+const FALLBACK_ICONS: AppIconComponent[] = [
+  IconApps,
+  IconPuzzle,
+  IconActivity,
+  IconPlugConnected,
+];
+
+const APP_ICON_TONES = [
+  "bg-primary/10 text-primary",
+  "bg-secondary text-secondary-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-muted text-foreground",
+] as const;
+
+const ICONS_BY_KEY: Record<string, AppIconComponent> = {
+  barchart2: IconChartBar,
+  brain: IconBrain,
+  brush: IconBrush,
+  calendardays: IconCalendar,
+  chartbar: IconChartBar,
+  clipboardlist: IconClipboardList,
+  filetext: IconFileText,
+  galleryhorizontal: IconPresentation,
+  mail: IconMail,
+  photo: IconPhoto,
+  presentation: IconPresentation,
+  screenshare: IconScreenShare,
+};
+
+function appIconComponent(
+  id: string,
+  name: string,
+  iconKey?: string,
+): AppIconComponent {
+  const normalizedIconKey = iconKey?.trim().toLowerCase();
+  if (normalizedIconKey && ICONS_BY_KEY[normalizedIconKey]) {
+    return ICONS_BY_KEY[normalizedIconKey];
+  }
+
+  const haystack = `${id} ${name}`.toLowerCase();
+
+  if (haystack.includes("mail") || haystack.includes("email")) {
+    return IconMail;
+  }
+  if (
+    haystack.includes("analytics") ||
+    haystack.includes("metric") ||
+    haystack.includes("indicator") ||
+    haystack.includes("gtm")
+  ) {
+    return IconChartBar;
+  }
+  if (haystack.includes("coach") || haystack.includes("agent")) {
+    return IconBrain;
+  }
+
+  let hash = 0;
+  for (const character of `${id}:${name}`) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+  return FALLBACK_ICONS[Math.abs(hash) % FALLBACK_ICONS.length] ?? IconApps;
+}
+
+function safeHexColor(color: string | undefined): string | null {
+  const normalized = color?.trim();
+  return normalized && /^#[0-9a-f]{6}$/i.test(normalized) ? normalized : null;
+}
+
+export function AppIcon({
+  id,
+  name,
+  icon,
+  color,
+  className,
+  size = "md",
+}: {
+  id: string;
+  name: string;
+  icon?: string;
+  color?: string;
+  className?: string;
+  size?: "sm" | "md";
+}) {
+  const Icon = appIconComponent(id, name, icon);
+  const customColor = safeHexColor(color);
+  const tone =
+    APP_ICON_TONES[Math.abs(hashForApp(id, name)) % APP_ICON_TONES.length];
+  const style = customColor
+    ? ({
+        "--dispatch-app-icon-color": customColor,
+        backgroundColor:
+          "color-mix(in srgb, var(--dispatch-app-icon-color) 14%, transparent)",
+        color: "var(--dispatch-app-icon-color)",
+      } as CSSProperties)
+    : ({
+        "--dispatch-app-icon-hue": `${appHue(id, name)} 72% 44%`,
+        backgroundColor: "hsl(var(--dispatch-app-icon-hue) / 0.14)",
+        color: "hsl(var(--dispatch-app-icon-hue))",
+      } as CSSProperties);
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded-xl",
+        size === "sm" ? "size-8" : "size-10",
+        !customColor && tone,
+        className,
+      )}
+      style={style}
+    >
+      <Icon size={size === "sm" ? 16 : 19} stroke={1.8} />
+    </span>
+  );
+}
+
+function hashForApp(id: string, name: string): number {
+  let hash = 0;
+  for (const character of `${id}:${name}`) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+  return hash;
+}
+
+function appHue(id: string, name: string): number {
+  return 20 + (Math.abs(hashForApp(id, name)) % 320);
+}

package/src/components/app-list-row.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+export const APP_LIST_GRID_CLASS =
+  "xl:grid xl:grid-cols-2 xl:gap-3 xl:overflow-visible xl:rounded-none xl:bg-transparent";
+export const APP_LIST_GRID_ROW_CLASS = "xl:rounded-2xl xl:border-0 xl:bg-card";
+
+export function AppList({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("overflow-hidden rounded-2xl bg-card", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function AppListRow({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "group flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0 transition-[background-color] hover:bg-muted/30 focus-within:bg-muted/30",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/app-open-actions.tsx

@@ -0,0 +1,111 @@
+import { IconChevronDown, IconPlus } from "@tabler/icons-react";
+
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+export interface AppOpenActionLabels {
+  addApp: string;
+  openApp: string;
+  openInline: string;
+  openInNewTab: string;
+}
+
+const DEFAULT_LABELS: AppOpenActionLabels = {
+  addApp: "Add app",
+  openApp: "Open app",
+  openInline: "Open inline",
+  openInNewTab: "Open in new tab",
+};
+
+export function AppOpenActions({
+  name,
+  href,
+  target,
+  rel,
+  labels: labelOverrides,
+  onAddApp,
+  showInlineOption = false,
+  showNewTabOption = false,
+}: {
+  name: string;
+  href: string | null;
+  target?: "_blank";
+  rel?: string;
+  labels?: Partial<AppOpenActionLabels>;
+  onAddApp?: () => void;
+  showInlineOption?: boolean;
+  showNewTabOption?: boolean;
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const hasMenu =
+    Boolean(onAddApp) ||
+    (Boolean(href) && (showInlineOption || showNewTabOption));
+
+  if (!href && !hasMenu) {
+    return (
+      <Button size="sm" variant="outline" disabled>
+        {labels.openApp}
+      </Button>
+    );
+  }
+
+  return (
+    <div className="flex shrink-0 overflow-hidden rounded-md border border-border focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
+      <Button
+        asChild={Boolean(href)}
+        size="sm"
+        variant="outline"
+        className="rounded-none border-0 border-e border-border"
+        disabled={!href}
+      >
+        {href ? (
+          <a href={href} target={target} rel={rel}>
+            {labels.openApp}
+          </a>
+        ) : (
+          <span>{labels.openApp}</span>
+        )}
+      </Button>
+      {hasMenu ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              className="size-9 rounded-none border-0 p-0"
+              aria-label={`Open options for ${name}`}
+            >
+              <IconChevronDown size={15} />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-40">
+            {onAddApp ? (
+              <DropdownMenuItem onSelect={onAddApp}>
+                <IconPlus size={14} className="mr-2" />
+                {labels.addApp}
+              </DropdownMenuItem>
+            ) : null}
+            {showInlineOption && href ? (
+              <DropdownMenuItem asChild>
+                <a href={href}>{labels.openInline}</a>
+              </DropdownMenuItem>
+            ) : null}
+            {showNewTabOption && href ? (
+              <DropdownMenuItem asChild>
+                <a href={href} target="_blank" rel="noreferrer">
+                  {labels.openInNewTab}
+                </a>
+              </DropdownMenuItem>
+            ) : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,42 +1,38 @@
-import { useT } from "@agent-native/core/client/i18n";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import { IconArrowUpRight } from "@tabler/icons-react";
 
 import type { ConnectedAppSummary } from "../lib/other-apps";
+import { AppIcon } from "./app-icon";
+import { AppListRow } from "./app-list-row";
+import { AppOpenActions } from "./app-open-actions";
 
-export function ConnectedAppCard({ app }: { app: ConnectedAppSummary }) {
-  const t = useT();
-
+export function ConnectedAppCard({
+  app,
+  className,
+}: {
+  app: ConnectedAppSummary;
+  className?: string;
+}) {
   return (
-    <a
-      href={withBuilderUtmTrackingParams(app.url, {
-        campaign: "product",
-        content: "dispatch_app",
-      })}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group flex min-h-[116px] items-start gap-3 rounded-xl bg-card/40 p-4 transition-[background-color] hover:bg-accent/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground">
-        {app.name.charAt(0).toUpperCase()}
-      </span>
-      <span className="min-w-0 flex-1">
-        <span className="flex items-start justify-between gap-3">
-          <span className="truncate text-sm font-semibold text-foreground">
-            {app.name}
-          </span>
-          <IconArrowUpRight
-            size={15}
-            className="shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
-          />
-        </span>
-        <span className="mt-2 line-clamp-2 block text-[13px] leading-5 text-muted-foreground">
+    <AppListRow className={className}>
+      <AppIcon id={app.id} name={app.name} color={app.color} size="sm" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold text-foreground">
+          {app.name}
+        </div>
+        <div className="mt-0.5 truncate text-xs text-muted-foreground">
           {app.description || app.url}
-        </span>
-        <span className="mt-3 block text-xs font-medium text-foreground">
-          {t("dispatch.pages.openApp")}
-        </span>
-      </span>
-    </a>
+        </div>
+      </div>
+      <AppOpenActions
+        name={app.name}
+        href={withBuilderUtmTrackingParams(app.url, {
+          campaign: "product",
+          content: "dispatch_app",
+        })}
+        target="_blank"
+        rel="noopener noreferrer"
+        showNewTabOption
+      />
+    </AppListRow>
   );
 }

package/src/components/dispatch-control-plane.spec.tsx

@@ -12,6 +12,7 @@ const clientState = vi.hoisted(() => ({
   promptComposerProps: null as Record<string, unknown> | null,
   workspaceApps: [] as Array<Record<string, unknown>>,
   connectedApps: [] as Array<Record<string, unknown>>,
+  curatedTemplates: [] as Array<Record<string, unknown>>,
   useChatModels: vi.fn(() => ({
     availableModels: [],
     defaultModel: "auto",
@@ -56,7 +57,9 @@ vi.mock("@agent-native/core/client/hooks", () => ({
     data:
       name === "list-connected-agents"
         ? clientState.connectedApps
-        : clientState.workspaceApps,
+        : name === "list-curated-workspace-templates"
+          ? clientState.curatedTemplates
+          : clientState.workspaceApps,
     isLoading: false,
     isError: false,
     error: null,
@@ -89,6 +92,7 @@ describe("DispatchControlPlane", () => {
     clientState.promptComposerProps = null;
     clientState.workspaceApps = [];
     clientState.connectedApps = [];
+    clientState.curatedTemplates = [];
     clientState.useChatModels.mockClear();
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -195,6 +199,22 @@ describe("DispatchControlPlane", () => {
         url: "https://duplicate.example.com",
       },
     ];
+    clientState.curatedTemplates = [
+      {
+        id: "mail",
+        name: "Mail",
+        description: "Email client",
+        liveUrl: "https://mail.agent-native.com",
+        installed: false,
+      },
+      {
+        id: "analytics",
+        name: "Analytics",
+        description: "Workspace insights",
+        liveUrl: "https://analytics.agent-native.com",
+        installed: false,
+      },
+    ];
 
     await act(async () => {
       root.render(
@@ -209,8 +229,15 @@ describe("DispatchControlPlane", () => {
     expect(container.textContent).toContain("Onboarding");
     expect(container.textContent).toContain("Mail");
     expect(container.textContent).toContain("Clips");
+    expect(container.textContent).toContain("Analytics");
+    expect(container.textContent).toContain("Your apps");
+    expect(container.textContent).toContain("Other apps");
+    expect(container.textContent?.indexOf("Your apps")).toBeLessThan(
+      container.textContent?.indexOf("Other apps") ?? -1,
+    );
     expect(container.textContent).not.toContain("Archived app");
     expect(container.textContent).not.toContain("Duplicate onboarding");
+    expect(container.textContent).not.toContain("CRM");
     expect(
       Array.from(container.querySelectorAll("a")).filter((anchor) =>
         anchor.getAttribute("href")?.includes("onboarding"),

package/src/components/dispatch-control-plane.tsx

@@ -10,18 +10,25 @@ import {
   IconArrowUpRight,
   IconChevronDown,
   IconClockHour4,
+  IconApps,
 } from "@tabler/icons-react";
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router";
 
-import { filterOtherApps, type ConnectedAppSummary } from "../lib/other-apps";
+import type { ConnectedAppSummary } from "../lib/other-apps";
 import { submitOverviewPrompt } from "../lib/overview-chat";
+import { cn } from "../lib/utils";
 import type { WorkspaceAppSummary } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
-import { ConnectedAppCard } from "./connected-app-card";
+import {
+  APP_LIST_GRID_CLASS,
+  AppList,
+  APP_LIST_GRID_ROW_CLASS,
+} from "./app-list-row";
 import { CreateAppPopover } from "./create-app-popover";
 import { useSetPageTitle } from "./layout/HeaderActions";
+import { OtherAppsSection } from "./other-apps-section";
 import { Button } from "./ui/button";
 import {
   Collapsible,
@@ -30,6 +37,7 @@ import {
 } from "./ui/collapsible";
 import { Skeleton } from "./ui/skeleton";
 import { WorkspaceAppCard } from "./workspace-app-card";
+import type { CuratedWorkspaceTemplatesResult } from "./workspace-template-card";
 
 function SectionHeader({
   title,
@@ -48,6 +56,26 @@ function SectionHeader({
   );
 }
 
+function AppGroupHeader({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <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">
+        <h3 className="truncate text-sm font-semibold text-foreground">
+          {title}
+        </h3>
+        <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
+
 function CommandPanel() {
   const t = useT();
   const {
@@ -143,29 +171,33 @@ function CommandPanel() {
 function AppsPanel({
   apps,
   isLoading,
-  otherApps,
-  otherAppsError,
-  otherAppsLoading,
-  onRetryOtherApps,
+  connectedApps,
+  connectedAppsError,
+  connectedAppsLoading,
+  onRetryConnectedApps,
+  curatedTemplates,
+  curatedTemplatesError,
+  curatedTemplatesLoading,
+  onRetryCuratedTemplates,
 }: {
   apps: WorkspaceAppSummary[];
   isLoading: boolean;
-  otherApps: ConnectedAppSummary[];
-  otherAppsError?: Error | null;
-  otherAppsLoading: boolean;
-  onRetryOtherApps: () => void;
+  connectedApps: ConnectedAppSummary[];
+  connectedAppsError?: Error | null;
+  connectedAppsLoading: boolean;
+  onRetryConnectedApps: () => void;
+  curatedTemplates?: CuratedWorkspaceTemplatesResult;
+  curatedTemplatesError?: Error | null;
+  curatedTemplatesLoading: boolean;
+  onRetryCuratedTemplates: () => void;
 }) {
   const t = useT();
   const [showPending, setShowPending] = useState(false);
   const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
-  const hasActiveApps = activeApps.length > 0 || otherApps.length > 0;
   const showSkeletons =
-    (isLoading || otherAppsLoading) &&
-    activeApps.length === 0 &&
-    otherApps.length === 0 &&
-    pendingApps.length === 0;
+    isLoading && activeApps.length === 0 && pendingApps.length === 0;
 
   return (
     <section className="flex flex-col gap-3">
@@ -181,30 +213,45 @@ function AppsPanel({
         }
       />
       {showSkeletons ? (
-        <div className="grid gap-3 md:grid-cols-2">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="rounded-xl bg-card/40 p-4">
-              <Skeleton className="h-4 w-32" />
-              <Skeleton className="mt-3 h-3 w-24" />
-              <Skeleton className="mt-3 h-3 w-full" />
-            </div>
-          ))}
-        </div>
-      ) : hasActiveApps ? (
-        <div className="grid gap-3 md:grid-cols-2">
-          {activeApps.map((app) => (
-            <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
-          ))}
-          {otherApps.map((app) => (
-            <ConnectedAppCard key={app.id} app={app} />
-          ))}
-        </div>
+        <OverviewAppsSkeleton />
       ) : (
-        <CreateAppPopover />
+        <>
+          {activeApps.length > 0 ? (
+            <div className="space-y-3">
+              <AppGroupHeader
+                title={t("dispatch.pages.yourApps", {
+                  defaultValue: "Your apps",
+                })}
+                description={t("dispatch.pages.activeCount", {
+                  count: activeApps.length,
+                })}
+              />
+              <AppList className={APP_LIST_GRID_CLASS}>
+                {activeApps.map((app) => (
+                  <WorkspaceAppCard
+                    key={app.id}
+                    app={app}
+                    className={APP_LIST_GRID_ROW_CLASS}
+                  />
+                ))}
+              </AppList>
+            </div>
+          ) : (
+            <CreateAppPopover />
+          )}
+          <OtherAppsSection
+            templates={curatedTemplates}
+            connectedApps={connectedApps}
+            workspaceApps={apps}
+            templatesLoading={curatedTemplatesLoading}
+            connectedAppsLoading={connectedAppsLoading}
+            templatesError={curatedTemplatesError}
+            connectedAppsError={connectedAppsError}
+            onRetryTemplates={onRetryCuratedTemplates}
+            onRetryConnectedApps={onRetryConnectedApps}
+          />
+        </>
       )}
-      {otherAppsError ? (
-        <ActionQueryError error={otherAppsError} onRetry={onRetryOtherApps} />
-      ) : null}
       {pendingApps.length > 0 ? (
         <Collapsible open={showPending} onOpenChange={setShowPending}>
           <div className="space-y-3 border-t pt-3">
@@ -243,15 +290,15 @@ function AppsPanel({
               </CollapsibleTrigger>
             </div>
             <CollapsibleContent>
-              <div className="grid gap-3 md:grid-cols-2">
+              <AppList className={APP_LIST_GRID_CLASS}>
                 {pendingApps.map((app) => (
                   <WorkspaceAppCard
                     key={app.id}
                     app={app}
-                    className="min-h-32"
+                    className={APP_LIST_GRID_ROW_CLASS}
                   />
                 ))}
-              </div>
+              </AppList>
             </CollapsibleContent>
           </div>
         </Collapsible>
@@ -260,6 +307,29 @@ function AppsPanel({
   );
 }
 
+function OverviewAppsSkeleton() {
+  return (
+    <AppList className={APP_LIST_GRID_CLASS}>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0",
+            APP_LIST_GRID_ROW_CLASS,
+          )}
+        >
+          <Skeleton className="size-8 shrink-0 rounded-xl" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+          <Skeleton className="h-9 w-24 shrink-0 rounded-md" />
+        </div>
+      ))}
+    </AppList>
+  );
+}
+
 export function DispatchControlPlane() {
   useSetPageTitle(<span aria-hidden />);
   const appsQuery = useActionQuery<WorkspaceAppSummary[]>(
@@ -270,11 +340,11 @@ export function DispatchControlPlane() {
     "list-connected-agents",
     {},
   );
-  const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
-  const otherApps = filterOtherApps(
-    connectedAppsQuery.data ?? [],
-    workspaceApps ?? [],
+  const curatedTemplatesQuery = useActionQuery<CuratedWorkspaceTemplatesResult>(
+    "list-curated-workspace-templates",
+    {},
   );
+  const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
 
   return (
     <div className="flex flex-col gap-8">
@@ -288,10 +358,14 @@ export function DispatchControlPlane() {
         <AppsPanel
           apps={workspaceApps ?? []}
           isLoading={appsLoading}
-          otherApps={otherApps}
-          otherAppsError={connectedAppsQuery.error}
-          otherAppsLoading={connectedAppsQuery.isLoading}
-          onRetryOtherApps={() => void connectedAppsQuery.refetch()}
+          connectedApps={connectedAppsQuery.data ?? []}
+          connectedAppsError={connectedAppsQuery.error}
+          connectedAppsLoading={connectedAppsQuery.isLoading}
+          onRetryConnectedApps={() => void connectedAppsQuery.refetch()}
+          curatedTemplates={curatedTemplatesQuery.data}
+          curatedTemplatesError={curatedTemplatesQuery.error}
+          curatedTemplatesLoading={curatedTemplatesQuery.isLoading}
+          onRetryCuratedTemplates={() => void curatedTemplatesQuery.refetch()}
         />
       )}
     </div>