@agent-native/dispatch 0.41.1-nightly-20261104110058 → 0.42.0

package/src/components/chat-home-apps.tsx

@@ -1,23 +1,28 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { AppOpenActions } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
-import { IconArrowUpRight, IconPlus } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { Link } from "react-router";
 
 import {
-  orderWorkspaceApps,
+  hasPinnedWorkspaceApp,
+  tierWorkspaceApps,
   useWorkspaceAppLayout,
   workspaceAppMatchesQuery,
 } from "../lib/workspace-app-layout";
 import { workspaceAppHref } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
 import { AppIcon } from "./app-icon";
-import { CreateAppPopover } from "./create-app-popover";
+import { AppGridItem, AppList, AppListRow } from "./app-list-row";
+import { AppOpenActions, appOpenActionLabels } from "./app-open-actions";
+import { AppPinButton } from "./app-pin-button";
+import {
+  AppListActions,
+  AppTierSections,
+  NoWorkspaceAppsText,
+} from "./app-tier-sections";
+import { NewAppButton } from "./create-app-popover";
 import {
   dispatchNavLinkTarget,
   useDispatchWorkspaceAppLauncher,
 } from "./layout/Layout";
-import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
 import {
   WorkspaceAppSearch,
@@ -27,25 +32,34 @@ import {
 export function DispatchChatHomeApps() {
   const t = useT();
   const launcher = useDispatchWorkspaceAppLauncher();
-  const { layout } = useWorkspaceAppLayout();
+  const { layout, togglePinned } = useWorkspaceAppLayout();
   const [query, setQuery] = useState("");
-  const apps = useMemo(
+  const tiers = useMemo(
     () =>
-      orderWorkspaceApps(launcher?.workspaceApps ?? [], layout)
-        .map((app) => ({
-          app,
-          description: app.defaultDescriptionKey
-            ? t(app.defaultDescriptionKey)
-            : app.description,
-        }))
-        .filter(({ app, description }) =>
-          workspaceAppMatchesQuery({ ...app, description }, query),
-        ),
+      tierWorkspaceApps(
+        (launcher?.workspaceApps ?? [])
+          .map((app) => ({
+            id: app.id,
+            name: app.name,
+            source: app.source,
+            app,
+            description: app.defaultDescriptionKey
+              ? t(app.defaultDescriptionKey)
+              : app.description,
+          }))
+          .filter((row) => workspaceAppMatchesQuery(row, query)),
+        layout,
+      ),
     [launcher?.workspaceApps, layout, query, t],
   );
+  const hasMatches =
+    tiers.pinned.length + tiers.apps.length + tiers.hosted.length > 0;
   if (!launcher) return null;
+  const hasOwnApps = launcher.workspaceApps.some(
+    (app) => app.source !== "builtin",
+  );
 
-  if (launcher.error && launcher.workspaceApps.length === 0) {
+  if (launcher.workspaceAppsStatus === "error") {
     return (
       <div className="mx-auto w-full max-w-[1000px]">
         <ActionQueryError
@@ -56,8 +70,6 @@ export function DispatchChatHomeApps() {
       </div>
     );
   }
-  if (!launcher.isLoading && launcher.workspaceApps.length === 0) return null;
-
   return (
     <div className="mx-auto w-full max-w-[1000px]">
       {launcher.error ? (
@@ -68,99 +80,91 @@ export function DispatchChatHomeApps() {
           queryName={launcher.errorQueryName}
         />
       ) : null}
-      <section aria-label={t("dispatch.nav.apps")}>
-        <header className="mb-3 flex flex-wrap items-center justify-between gap-3">
-          <h2 className="text-sm font-semibold text-foreground">
-            {t("dispatch.nav.apps")}
-          </h2>
-          <div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:flex-none">
-            <WorkspaceAppSearch
-              query={query}
-              onQueryChange={setQuery}
-              className="w-full max-w-[280px]"
-            />
-            <CreateAppPopover
-              align="end"
-              onCreated={launcher.retry}
-              trigger={
-                <Button type="button" size="sm" variant="outline">
-                  <IconPlus size={16} aria-hidden="true" />
-                  {t("dispatch.pages.chatFirstNewApp")}
-                </Button>
+      <section>
+        <AppTierSections
+          tiers={tiers}
+          appsTitle={t("dispatch.pages.workspaceApps")}
+          hasPinnedApps={hasPinnedWorkspaceApp(launcher.workspaceApps, layout)}
+          actions={
+            <AppListActions
+              viewAllHref={dispatchNavLinkTarget("/apps")}
+              search={
+                <WorkspaceAppSearch
+                  query={query}
+                  onQueryChange={setQuery}
+                  className="w-full sm:w-[280px]"
+                />
               }
+              newApp={<NewAppButton onCreated={launcher.retry} />}
             />
-          </div>
-        </header>
-        {launcher.isLoading && launcher.workspaceApps.length === 0 ? (
-          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-            {Array.from({ length: 6 }, (_, index) => (
-              <div
-                key={index}
-                className="flex min-w-0 items-center gap-3 rounded-xl bg-muted/30 px-3 py-2.5"
-              >
-                <Skeleton className="size-7 rounded-lg" />
-                <div className="min-w-0 flex-1 space-y-1.5">
-                  <Skeleton className="h-4 w-20" />
-                  <Skeleton className="h-3 w-40 max-w-full" />
-                </div>
-                <Skeleton className="h-7 w-20" />
-              </div>
-            ))}
-          </div>
-        ) : apps.length > 0 ? (
-          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-            {apps.map(({ app, description }) => {
-              const href = workspaceAppHref(app);
-              return (
-                <article
-                  key={app.id}
-                  className="flex min-w-0 items-center gap-3 rounded-xl bg-muted/30 px-3 py-2.5 transition-colors hover:bg-muted/50"
-                >
-                  <div className="flex min-w-0 flex-1 items-center gap-3">
-                    <AppIcon id={app.id} name={app.name} size="sm" />
-                    <span className="min-w-0 flex-1">
-                      <span className="block truncate text-sm font-semibold text-foreground">
-                        {app.name}
-                      </span>
-                      {description ? (
-                        <span className="mt-0.5 block truncate text-xs text-muted-foreground">
-                          {description}
+          }
+          appsFallback={
+            launcher.workspaceAppsStatus === "loading" ? (
+              <AppList layout="grid">
+                {Array.from({ length: 6 }, (_, index) => (
+                  <AppListRow key={index}>
+                    <Skeleton className="size-7 rounded-lg" />
+                    <div className="min-w-0 flex-1 space-y-1.5">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-3 w-40 max-w-full" />
+                    </div>
+                    <Skeleton className="h-7 w-20" />
+                  </AppListRow>
+                ))}
+              </AppList>
+            ) : query.trim() ? (
+              hasMatches ? null : (
+                <WorkspaceAppSearchEmpty
+                  query={query}
+                  onClear={() => setQuery("")}
+                />
+              )
+            ) : hasOwnApps ? null : (
+              <NoWorkspaceAppsText />
+            )
+          }
+          renderItems={(rows) => (
+            <AppList layout="grid">
+              {rows.map(({ app, description }) => {
+                const href = workspaceAppHref(app);
+                const pinned = layout.pinnedIds.includes(app.id.toLowerCase());
+                return (
+                  <AppGridItem key={app.id} asChild>
+                    <article>
+                      <div className="flex min-w-0 flex-1 items-center gap-3">
+                        <AppIcon id={app.id} name={app.name} size="sm" />
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate text-sm font-semibold text-foreground">
+                            {app.name}
+                          </span>
+                          {description ? (
+                            <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                              {description}
+                            </span>
+                          ) : null}
                         </span>
-                      ) : null}
-                    </span>
-                  </div>
-                  <AppOpenActions
-                    name={app.name}
-                    href={href}
-                    onOpen={() => launcher.openApp(app)}
-                    showNewTabOption={Boolean(href)}
-                    labels={{
-                      openApp: t("dispatch.pages.openApp", {
-                        defaultValue: "Open",
-                      }),
-                      openAppAccessible: t("dispatch.pages.chatFirstOpenApp", {
-                        name: app.name,
-                      }),
-                      openInNewTab: t("dispatch.pages.chatFirstOpenInNewTab"),
-                      moreOptions: t("extensions.optionsFor", {
-                        name: app.name,
-                      }),
-                    }}
-                  />
-                </article>
-              );
-            })}
-          </div>
-        ) : (
-          <WorkspaceAppSearchEmpty query={query} onClear={() => setQuery("")} />
-        )}
-        <Link
-          to={dispatchNavLinkTarget("/apps")}
-          className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground"
-        >
-          {t("dispatch.pages.allApps")}
-          <IconArrowUpRight size={14} aria-hidden="true" />
-        </Link>
+                      </div>
+                      <AppPinButton
+                        appId={app.id}
+                        name={app.name}
+                        pinned={pinned}
+                        onToggle={() => togglePinned(app.id)}
+                      />
+                      <AppOpenActions
+                        name={app.name}
+                        href={href}
+                        onOpen={() => launcher.openApp(app)}
+                        showNewTabOption={Boolean(href)}
+                        external={app.source === "builtin"}
+                        labels={appOpenActionLabels(t, app.name)}
+                      />
+                    </article>
+                  </AppGridItem>
+                );
+              })}
+            </AppList>
+          )}
+        />
       </section>
     </div>
   );

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

@@ -8,10 +8,25 @@ import { ConnectedAppCard } from "./connected-app-card";
 
 vi.mock("./app-icon", () => ({ AppIcon: () => null }));
 vi.mock("./app-open-actions", () => ({
-  AppOpenActions: ({ name, href }: { name: string; href: string }) =>
+  appOpenActionLabels: (_t: unknown, name: string) => ({
+    openInNewTab: `localized new tab for ${name}`,
+  }),
+  AppOpenActions: ({
+    name,
+    href,
+    labels,
+  }: {
+    name: string;
+    href: string;
+    labels?: { openInNewTab?: string };
+  }) =>
     React.createElement(
       "a",
-      { className: "app-open-actions__primary", href },
+      {
+        className: "app-open-actions__primary",
+        href,
+        "data-new-tab-label": labels?.openInNewTab,
+      },
       name,
     ),
 }));
@@ -66,6 +81,7 @@ describe("ConnectedAppCard", () => {
     expect(anchor?.getAttribute("href")).toContain(
       "https://clips.agent-native.com/home",
     );
+    expect(anchor?.dataset.newTabLabel).toBe("localized new tab for Clips");
   });
 
   it("opens built-in app actions through the host window on primary clicks", async () => {

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
 import type { MouseEvent } from "react";
 
@@ -8,15 +9,21 @@ import {
 } from "../lib/workspace-apps";
 import { AppIcon } from "./app-icon";
 import { AppListRow } from "./app-list-row";
-import { AppOpenActions } from "./app-open-actions";
+import { AppOpenActions, appOpenActionLabels } from "./app-open-actions";
+import { AppPinButton } from "./app-pin-button";
 
 export function ConnectedAppCard({
   app,
   className,
+  isPinned = false,
+  onTogglePinned,
 }: {
   app: ConnectedAppSummary;
   className?: string;
+  isPinned?: boolean;
+  onTogglePinned?: () => void;
 }) {
+  const t = useT();
   const launchUrl = app.homeUrl ?? app.url;
   const trackedLaunchUrl = withBuilderUtmTrackingParams(launchUrl, {
     campaign: "product",
@@ -55,12 +62,22 @@ export function ConnectedAppCard({
           {app.description || app.url}
         </div>
       </div>
+      {onTogglePinned ? (
+        <AppPinButton
+          appId={app.id}
+          name={app.name}
+          pinned={isPinned}
+          onToggle={onTogglePinned}
+        />
+      ) : null}
       <div className="flex shrink-0" onClickCapture={handleActionClick}>
         <AppOpenActions
           name={app.name}
           href={trackedLaunchUrl}
           rel="noopener noreferrer"
           showNewTabOption
+          external={app.source === "builtin"}
+          labels={appOpenActionLabels(t, app.name)}
         />
       </div>
     </AppListRow>

package/src/components/create-app-popover.tsx

@@ -5,6 +5,7 @@ import {
   appBasePath,
 } from "@agent-native/core/client/api-path";
 import { isInBuilderFrame } from "@agent-native/core/client/host";
+import { useT } from "@agent-native/core/client/i18n";
 import {
   buildChatFirstAppCreationPrompt,
   docsUrl,
@@ -698,3 +699,24 @@ function CreateAppPopoverBody({
     <CreateAppFlow onClose={onClose} {...(onCreated ? { onCreated } : {})} />
   );
 }
+
+/** The "New app" button every app list puts beside its search. */
+export function NewAppButton({
+  onCreated,
+}: {
+  onCreated?: (() => void) | undefined;
+}) {
+  const t = useT();
+  return (
+    <CreateAppPopover
+      align="end"
+      {...(onCreated ? { onCreated } : {})}
+      trigger={
+        <Button type="button" variant="default" size="sm" className="gap-1.5">
+          <IconPlus size={14} aria-hidden="true" />
+          {t("dispatch.pages.newApp")}
+        </Button>
+      }
+    />
+  );
+}

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

@@ -12,7 +12,8 @@ const clientState = vi.hoisted(() => ({
   inBuilderFrame: false,
   navigateWithTransition: vi.fn(),
   promptComposerProps: null as Record<string, unknown> | null,
-  workspaceApps: [] as Array<Record<string, unknown>>,
+  workspaceApps: [] as Array<Record<string, unknown>> | undefined,
+  workspaceAppsError: null as Error | null,
   connectedApps: [] as Array<Record<string, unknown>>,
   curatedTemplates: [] as Array<Record<string, unknown>>,
   useChatModels: vi.fn(() => ({
@@ -77,8 +78,10 @@ vi.mock("@agent-native/core/client/hooks", () => ({
           ? clientState.curatedTemplates
           : clientState.workspaceApps,
     isLoading: false,
-    isError: false,
-    error: null,
+    isError:
+      name === "list-workspace-apps" && clientState.workspaceAppsError != null,
+    error:
+      name === "list-workspace-apps" ? clientState.workspaceAppsError : null,
     refetch: vi.fn(),
   }),
   useActionMutation: () => ({ mutate: vi.fn(), isPending: false }),
@@ -110,6 +113,12 @@ vi.mock("./create-app-popover", () => ({
       <span>Create app</span>
     </div>
   ),
+  NewAppButton: () => (
+    <div>
+      <button type="button">New app</button>
+      <span>Create app</span>
+    </div>
+  ),
 }));
 
 describe("DispatchControlPlane", () => {
@@ -138,6 +147,7 @@ describe("DispatchControlPlane", () => {
     clientState.navigateWithTransition.mockReset();
     clientState.promptComposerProps = null;
     clientState.workspaceApps = [];
+    clientState.workspaceAppsError = null;
     clientState.connectedApps = [];
     clientState.curatedTemplates = [];
     clientState.activeOrgId = "org-a";
@@ -293,7 +303,7 @@ describe("DispatchControlPlane", () => {
     });
   });
 
-  it("shows apps built in this workspace without cross-workspace catalogs", async () => {
+  it("shows this workspace's apps, then hosted apps, without other catalogs", async () => {
     clientState.workspaceApps = [
       {
         id: "onboarding",
@@ -377,10 +387,21 @@ describe("DispatchControlPlane", () => {
       );
     });
 
-    expect(container.textContent).toContain("Onboarding");
-    expect(container.textContent).not.toContain("Mail");
+    const tier = (label: string) =>
+      container.querySelector(`section[aria-label="${label}"]`);
+    expect(tier("dispatch.pages.workspaceApps")?.textContent).toContain(
+      "Onboarding",
+    );
+    const hosted = tier("dispatch.pages.hostedApps");
+    expect(hosted?.textContent).toContain("Clips");
+    expect(hosted?.textContent).toContain("Mail");
+    expect(hosted?.textContent).not.toContain("Onboarding");
+    expect(
+      hosted?.querySelector(
+        'a[href^="https://clips.agent-native.com"]:not([href*="/share/"])',
+      ),
+    ).not.toBeNull();
     expect(container.textContent).not.toContain("Custom app");
-    expect(container.textContent).not.toContain("Clips");
     expect(container.textContent).not.toContain("Analytics");
     expect(container.textContent).toContain("Apps");
     expect(container.textContent).toContain("New");
@@ -388,7 +409,7 @@ describe("DispatchControlPlane", () => {
       container.querySelector('input[placeholder="Search apps"]'),
     ).not.toBeNull();
     const viewAllLink = Array.from(container.querySelectorAll("a")).find(
-      (link) => link.textContent?.trim() === "View all",
+      (link) => link.textContent?.trim() === "dispatch.pages.viewAllApps",
     );
     expect(viewAllLink?.className).toContain("text-muted-foreground");
     expect(container.textContent).not.toContain("Other apps");
@@ -396,19 +417,22 @@ describe("DispatchControlPlane", () => {
     expect(container.textContent).not.toContain("Archived app");
     expect(container.textContent).not.toContain("Duplicate onboarding");
     expect(container.textContent).not.toContain("CRM");
-    expect(
-      container.querySelectorAll(
-        'button[aria-label="Open options for Onboarding"]',
-      ),
-    ).toHaveLength(1);
+    let onboardingRow: Element | null | undefined = container.querySelector(
+      'button[aria-label="Settings for Onboarding"]',
+    );
+    while (onboardingRow && !onboardingRow.querySelector(".app-open-actions")) {
+      onboardingRow = onboardingRow.parentElement;
+    }
+    const onboardingMenus = [
+      ...(onboardingRow?.querySelectorAll<HTMLButtonElement>(
+        ".app-open-actions__menu",
+      ) ?? []),
+    ];
+    expect(onboardingMenus).toHaveLength(1);
     await act(async () => {
-      container
-        .querySelector<HTMLButtonElement>(
-          'button[aria-label="Open options for Onboarding"]',
-        )
-        ?.dispatchEvent(
-          new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
-        );
+      onboardingMenus[0]?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
     });
     const onboardingNewTabLink = document.querySelector<HTMLAnchorElement>(
       'a[href="/onboarding/home"][target="_blank"]',
@@ -416,6 +440,51 @@ describe("DispatchControlPlane", () => {
     expect(onboardingNewTabLink).not.toBeNull();
   });
 
+  const renderHome = () =>
+    act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <QueryClientProvider client={queryClient}>
+              <DispatchControlPlane />
+            </QueryClientProvider>
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+  const hostedMail = {
+    id: "mail",
+    name: "Mail",
+    url: "https://mail.agent-native.com",
+    source: "builtin",
+  };
+
+  it("lists no apps while the workspace list is still loading", async () => {
+    clientState.workspaceApps = undefined;
+    clientState.connectedApps = [hostedMail];
+
+    await renderHome();
+
+    expect(container.textContent).not.toContain(
+      "dispatch.pages.chatFirstNoWorkspaceApps",
+    );
+    expect(container.textContent).not.toContain("Mail");
+  });
+
+  it("keeps the last workspace list and reports a failed refresh", async () => {
+    clientState.workspaceApps = [
+      { id: "notes", name: "Notes", path: "/notes", status: "ready" },
+    ];
+    clientState.workspaceAppsError = new Error("refresh failed");
+    clientState.connectedApps = [hostedMail];
+
+    await renderHome();
+
+    expect(container.textContent).toContain("Notes");
+    expect(container.textContent).toContain("Mail");
+    expect(container.querySelector('[role="alert"]')).not.toBeNull();
+  });
+
   it("searches only apps in this workspace", async () => {
     clientState.workspaceApps = [
       {