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

package/src/components/app-tier-sections.spec.tsx

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+const orgRole = vi.hoisted(() => ({
+  current: {
+    org: { orgId: "org-1" } as { orgId: string | null } | null,
+    canManageOrg: true,
+    isLoading: false,
+  },
+}));
+
+vi.mock("@agent-native/core/client/org", () => ({
+  useOrgRole: () => orgRole.current,
+}));
+
+import { AppListActions, AppTierSections } from "./app-tier-sections";
+import { TooltipProvider } from "./ui/tooltip";
+
+describe("AppTierSections", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    orgRole.current = {
+      org: { orgId: "org-1" },
+      canManageOrg: true,
+      isLoading: false,
+    };
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it.each([
+    ["nothing is pinned", [], false, "Apps"],
+    ["an app is pinned", ["mail"], true, "dispatch.pages.pinnedApps"],
+    // A search that matches no pinned app keeps the input where it was.
+    ["no pinned app matches the search", [], true, "dispatch.pages.pinnedApps"],
+  ])(
+    "puts View all, search and New app together in the first header when %s",
+    async (_case, pinned, hasPinnedApps, header) => {
+      await act(async () =>
+        root.render(
+          <MemoryRouter>
+            <AppTierSections
+              tiers={{ pinned, apps: ["plan"], hosted: [] }}
+              hasPinnedApps={hasPinnedApps}
+              appsTitle="Apps"
+              actions={
+                <AppListActions
+                  viewAllHref="/apps"
+                  search={<input data-search />}
+                  newApp={<button type="button" data-new-app />}
+                />
+              }
+              renderItems={(items) => items.join(",")}
+            />
+          </MemoryRouter>,
+        ),
+      );
+
+      const search = container.querySelectorAll("[data-search]");
+      expect(search).toHaveLength(1);
+      const section = search[0]!.closest("section");
+      expect(section?.getAttribute("aria-label")).toBe(header);
+      const cluster = search[0]!.closest("[data-app-list-actions]")!;
+      expect(
+        [...cluster.children].map((child) =>
+          child.matches("a")
+            ? `link:${child.getAttribute("href")}:${child.textContent}`
+            : child.querySelector("[data-search]")
+              ? "search"
+              : "new",
+        ),
+      ).toEqual(["link:/apps:dispatch.pages.viewAllApps", "search", "new"]);
+      expect(container.querySelectorAll("[data-new-app]")).toHaveLength(1);
+    },
+  );
+
+  it("lets a wide header action shrink into the row instead of overflowing", async () => {
+    await act(async () =>
+      root.render(
+        <MemoryRouter>
+          <AppTierSections
+            tiers={{ pinned: [], apps: [], hosted: [] }}
+            appsTitle="Apps"
+            actions={<AppListActions newApp={<div data-apps-action />} />}
+            renderItems={() => null}
+          />
+        </MemoryRouter>,
+      ),
+    );
+
+    const action =
+      container.querySelector("[data-apps-action]")!.parentElement!;
+    const classes = action.className.split(" ");
+    expect(classes).not.toContain("shrink-0");
+    expect(classes).toEqual(expect.arrayContaining(["min-w-0", "flex-1"]));
+  });
+
+  it.each([
+    ["an admin", { orgId: "org-1" }, true, "link"],
+    ["a member", { orgId: "org-1" }, false, "disabled"],
+    ["a solo workspace", null, true, "none"],
+    ["a user with no organization", { orgId: null }, true, "none"],
+  ] as const)(
+    "shows Manage on the Hosted apps tier as expected for %s",
+    async (_who, org, canManageOrg, expected) => {
+      orgRole.current = { org, canManageOrg, isLoading: false };
+      await act(async () =>
+        root.render(
+          <MemoryRouter>
+            <TooltipProvider>
+              <AppTierSections
+                tiers={{ pinned: [], apps: [], hosted: ["clips"] }}
+                appsTitle="Apps"
+                renderItems={(items) => items.join(",")}
+              />
+            </TooltipProvider>
+          </MemoryRouter>,
+        ),
+      );
+
+      const hosted = container.querySelector(
+        'section[aria-label="dispatch.pages.hostedApps"]',
+      )!;
+      const manage = [...hosted.querySelectorAll("a, button")].find(
+        (element) => element.textContent === "dispatch.pages.manageHostedApps",
+      );
+      const shown =
+        manage === undefined
+          ? "none"
+          : manage.tagName === "A"
+            ? "link"
+            : (manage as HTMLButtonElement).disabled
+              ? "disabled"
+              : "enabled";
+      expect(shown).toBe(expected);
+    },
+  );
+});

package/src/components/app-tier-sections.tsx

@@ -0,0 +1,158 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useOrgRole } from "@agent-native/core/client/org";
+import { buildSettingsRoute } from "@agent-native/core/navigation";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+
+import { cn } from "../lib/utils";
+import type { WorkspaceAppTiers } from "../lib/workspace-app-layout";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+function TierHeader({ title, action }: { title: string; action?: ReactNode }) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3">
+      <h2 className="truncate text-sm font-semibold text-foreground">
+        {title}
+      </h2>
+      {/* Takes the rest of the row so a wide action wraps inside it. */}
+      {action ? (
+        <div className="flex min-w-0 flex-1 justify-end">{action}</div>
+      ) : null}
+    </div>
+  );
+}
+
+/** The Apps tier's empty text when the workspace has no apps of its own. */
+export function NoWorkspaceAppsText() {
+  const t = useT();
+  return (
+    <p className="px-4 py-3 text-sm text-muted-foreground">
+      {t("dispatch.pages.chatFirstNoWorkspaceApps")}
+    </p>
+  );
+}
+
+function ManageHostedAppsLink() {
+  const t = useT();
+  const { org, canManageOrg, isLoading } = useOrgRole();
+  const label = t("dispatch.pages.manageHostedApps");
+  // Settings › Organization › Apps only exists inside an organization.
+  if (isLoading || !org?.orgId) return null;
+  if (canManageOrg) {
+    return (
+      <Button variant="ghost" size="sm" asChild>
+        <Link to={buildSettingsRoute("apps")} className="text-muted-foreground">
+          {label}
+        </Link>
+      </Button>
+    );
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span tabIndex={0} className="inline-flex rounded-md">
+          <Button variant="ghost" size="sm" disabled>
+            {label}
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        {t("dispatch.pages.manageHostedAppsAdminOnly")}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** View all, search and New app: the header cluster of every app list. */
+export function AppListActions({
+  viewAllHref,
+  search,
+  newApp,
+}: {
+  viewAllHref?: string | undefined;
+  search?: ReactNode;
+  newApp?: ReactNode;
+}) {
+  const t = useT();
+  return (
+    // Below `sm` the search takes its own full-width line under the buttons.
+    <div
+      data-app-list-actions
+      className="flex min-w-0 flex-1 flex-wrap items-center justify-end gap-1.5 sm:flex-nowrap"
+    >
+      {viewAllHref ? (
+        <Button variant="ghost" size="sm" asChild>
+          <Link to={viewAllHref} className="text-muted-foreground">
+            {t("dispatch.pages.viewAllApps")}
+          </Link>
+        </Button>
+      ) : null}
+      {search ? (
+        <div className="order-last min-w-0 basis-full sm:order-none sm:basis-auto">
+          {search}
+        </div>
+      ) : null}
+      {newApp}
+    </div>
+  );
+}
+
+/**
+ * Pinned (only when something is pinned), Apps, then Hosted apps. The Apps
+ * tier always renders. `actions` sit in the first header; `hasPinnedApps` is
+ * decided before a search filters, so a query that matches no pinned app does
+ * not move the search while typing.
+ */
+export function AppTierSections<T>({
+  tiers,
+  appsTitle,
+  actions,
+  hasPinnedApps = tiers.pinned.length > 0,
+  appsFallback,
+  renderItems,
+  className,
+}: {
+  tiers: WorkspaceAppTiers<T>;
+  appsTitle: string;
+  actions?: ReactNode;
+  hasPinnedApps?: boolean | undefined;
+  /** Shown in the Apps tier when it has no rows (loading, empty, no matches). */
+  appsFallback?: ReactNode;
+  renderItems: (items: T[]) => ReactNode;
+  className?: string;
+}) {
+  const t = useT();
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {hasPinnedApps ? (
+        <section
+          aria-label={t("dispatch.pages.pinnedApps")}
+          className="flex flex-col gap-3"
+        >
+          <TierHeader title={t("dispatch.pages.pinnedApps")} action={actions} />
+          {tiers.pinned.length > 0 ? renderItems(tiers.pinned) : null}
+        </section>
+      ) : null}
+      <section aria-label={appsTitle} className="flex flex-col gap-3">
+        <TierHeader
+          title={appsTitle}
+          action={hasPinnedApps ? undefined : actions}
+        />
+        {tiers.apps.length > 0 ? renderItems(tiers.apps) : appsFallback}
+      </section>
+      {tiers.hosted.length > 0 ? (
+        <section
+          aria-label={t("dispatch.pages.hostedApps")}
+          className="flex flex-col gap-3"
+        >
+          <TierHeader
+            title={t("dispatch.pages.hostedApps")}
+            action={<ManageHostedAppsLink />}
+          />
+          {renderItems(tiers.hosted)}
+        </section>
+      ) : null}
+    </div>
+  );
+}

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

@@ -24,7 +24,7 @@ const launcherState = vi.hoisted(() => ({
         path: "/mail",
       },
     ],
-    isLoading: false,
+    workspaceAppsStatus: "ready" as "loading" | "error" | "ready",
     error: undefined as unknown,
     errorQueryName: undefined as
       | "list-workspace-apps"
@@ -36,6 +36,7 @@ const launcherState = vi.hoisted(() => ({
 }));
 const appLayoutState = vi.hoisted(() => ({
   value: { pinnedIds: ["mail"], orderedIds: ["mail", "plan"] },
+  togglePinned: vi.fn(),
 }));
 
 vi.mock("@agent-native/core/client/i18n", () => ({
@@ -43,7 +44,6 @@ vi.mock("@agent-native/core/client/i18n", () => ({
     ({
       "dispatch.nav.apps": "Apps",
       "dispatch.pages.allApps": "All apps",
-      "dispatch.pages.chatFirstNewApp": "New",
       "dispatch.pages.openApp": "Open",
       "dispatch.pages.chatFirstOpenApp": "Open {{name}}",
       "dispatch.pages.chatFirstOpenInNewTab": "Open in new tab",
@@ -52,9 +52,25 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "extensions.optionsFor": "Options for {{name}}",
       "dispatch.pages.searchApps": "Search apps",
       "dispatch.pages.searchAppsPlaceholder": "Search apps",
+      "dispatch.pages.hostedApps": "Hosted apps",
+      "dispatch.pages.pinApp": "Pin {{name}}",
+      "dispatch.pages.unpinApp": "Unpin {{name}}",
+      "dispatch.pages.pinnedApps": "Pinned apps",
+      "dispatch.pages.workspaceApps": "Workspace apps",
+      "dispatch.pages.viewAllApps": "View all",
+      "dispatch.pages.newApp": "New app",
     })[key]?.replace("{{name}}", values?.name ?? "") ?? key,
 }));
 
+vi.mock("@agent-native/core/client/org", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@agent-native/core/client/org")>()),
+  useOrgRole: () => ({
+    org: { orgId: "org-1" },
+    canManageOrg: true,
+    isLoading: false,
+  }),
+}));
+
 vi.mock("./layout/Layout", () => ({
   dispatchNavLinkTarget: (path: string) => path,
   useDispatchWorkspaceAppLauncher: () => launcherState.value,
@@ -65,11 +81,25 @@ vi.mock("../lib/workspace-app-layout", async (importOriginal) => {
     await importOriginal<typeof import("../lib/workspace-app-layout")>();
   return {
     ...actual,
-    useWorkspaceAppLayout: () => ({ layout: appLayoutState.value }),
+    useWorkspaceAppLayout: () => ({
+      layout: appLayoutState.value,
+      togglePinned: appLayoutState.togglePinned,
+    }),
   };
 });
 
 import { DispatchChatHomeApps } from "./chat-home-apps";
+import { TooltipProvider } from "./ui/tooltip";
+
+function renderChatHome(root: Root) {
+  root.render(
+    <MemoryRouter initialEntries={["/chat"]}>
+      <TooltipProvider>
+        <DispatchChatHomeApps />
+      </TooltipProvider>
+    </MemoryRouter>,
+  );
+}
 
 describe("DispatchChatHomeApps", () => {
   let container: HTMLDivElement;
@@ -92,7 +122,13 @@ describe("DispatchChatHomeApps", () => {
       },
     ];
     launcherState.value.openApp.mockReset();
+    appLayoutState.togglePinned.mockReset();
+    appLayoutState.value = {
+      pinnedIds: ["mail"],
+      orderedIds: ["mail", "plan"],
+    };
     launcherState.value.retry.mockReset();
+    launcherState.value.workspaceAppsStatus = "ready";
     launcherState.value.error = undefined;
     launcherState.value.errorQueryName = undefined;
     container = document.createElement("div");
@@ -108,20 +144,19 @@ describe("DispatchChatHomeApps", () => {
 
   it("renders the searchable Electron-style app directory and open actions", async () => {
     await act(async () => {
-      root.render(
-        <MemoryRouter initialEntries={["/chat"]}>
-          <DispatchChatHomeApps />
-        </MemoryRouter>,
-      );
+      renderChatHome(root);
     });
 
-    const section = container.querySelector("section[aria-label='Apps']");
+    const section = container.querySelector(
+      "section[aria-label='Workspace apps']",
+    );
     const grid = section?.querySelector(".grid.grid-cols-1");
     expect(grid?.className.split(" ")).toContain("sm:grid-cols-2");
-    expect(section?.querySelectorAll("article")).toHaveLength(2);
-    expect(section?.querySelectorAll("article")[0]?.textContent).toContain(
-      "Mail",
-    );
+    expect(section?.querySelectorAll("article")).toHaveLength(1);
+    expect(section?.textContent).toContain("Plan");
+    expect(
+      container.querySelector("section[aria-label='Pinned apps']")?.textContent,
+    ).toContain("Mail");
     expect(container.textContent).toContain("Structured project plans");
     expect(
       container.querySelector("button[aria-label='Options for Mail']"),
@@ -140,16 +175,14 @@ describe("DispatchChatHomeApps", () => {
 
     const allAppsLink =
       container.querySelector<HTMLAnchorElement>("a[href='/apps']");
-    expect(allAppsLink?.textContent?.trim()).toContain("All apps");
+    expect(allAppsLink?.textContent?.trim()).toBe("View all");
+    // View all sits in the header cluster, not below the list.
+    expect(allAppsLink?.closest("section[aria-label]")).not.toBeNull();
   });
 
   it("filters app descriptions and opens the selected app", async () => {
     await act(async () => {
-      root.render(
-        <MemoryRouter initialEntries={["/chat"]}>
-          <DispatchChatHomeApps />
-        </MemoryRouter>,
-      );
+      renderChatHome(root);
     });
 
     const search = container.querySelector<HTMLInputElement>(
@@ -190,17 +223,94 @@ describe("DispatchChatHomeApps", () => {
     ];
 
     await act(async () => {
-      root.render(
-        <MemoryRouter initialEntries={["/chat"]}>
-          <DispatchChatHomeApps />
-        </MemoryRouter>,
-      );
+      renderChatHome(root);
     });
 
     expect(container.textContent).toContain("Localized Calendar description");
     expect(container.textContent).not.toContain("Default English text");
   });
 
+  it("tiers pinned, workspace and hosted apps with a pin button on each row", async () => {
+    launcherState.value.workspaceApps = [
+      { id: "zeta", name: "Zeta", path: "/zeta" },
+      { id: "mail", name: "Mail", source: "builtin", url: "https://m.test" },
+      { id: "alpha", name: "Alpha", path: "/alpha" },
+      { id: "plan", name: "Plan", path: "/plan" },
+      { id: "clips", name: "Clips", source: "builtin", url: "https://c.test" },
+    ] as typeof launcherState.value.workspaceApps;
+    appLayoutState.value = { pinnedIds: ["plan", "mail"], orderedIds: [] };
+
+    await act(async () => renderChatHome(root));
+
+    const names = (label: string) =>
+      [
+        ...container.querySelectorAll(
+          `section[aria-label='${label}'] article .font-semibold`,
+        ),
+      ].map((node) => node.textContent);
+    expect(names("Pinned apps")).toEqual(["Plan", "Mail"]);
+    expect(names("Workspace apps")).toEqual(["Alpha", "Zeta"]);
+    expect(names("Hosted apps")).toEqual(["Clips"]);
+    expect(
+      container.querySelector("section[aria-label='Hosted apps'] a")
+        ?.textContent,
+    ).toBe("dispatch.pages.manageHostedApps");
+
+    const unpinMail = container.querySelector<HTMLButtonElement>(
+      "button[aria-label='Unpin Mail']",
+    );
+    expect(unpinMail?.getAttribute("aria-pressed")).toBe("true");
+    const pinClips = container.querySelector<HTMLButtonElement>(
+      "button[aria-label='Pin Clips']",
+    );
+    expect(pinClips?.getAttribute("aria-pressed")).toBe("false");
+    await act(async () => pinClips?.click());
+    expect(appLayoutState.togglePinned).toHaveBeenCalledWith("clips");
+    expect(launcherState.value.openApp).not.toHaveBeenCalled();
+  });
+
+  it("says the workspace has no apps under Apps when only hosted apps exist", async () => {
+    launcherState.value.workspaceApps = [
+      { id: "mail", name: "Mail", source: "builtin", url: "https://m.test" },
+    ] as typeof launcherState.value.workspaceApps;
+    appLayoutState.value = { pinnedIds: [], orderedIds: [] };
+
+    await act(async () => renderChatHome(root));
+
+    expect(
+      container.querySelector("section[aria-label='Workspace apps']")
+        ?.textContent,
+    ).toContain("dispatch.pages.chatFirstNoWorkspaceApps");
+    expect(
+      container.querySelectorAll("section[aria-label='Hosted apps'] article"),
+    ).toHaveLength(1);
+  });
+
+  it("does not claim there are no apps while workspace apps load", async () => {
+    launcherState.value.workspaceApps = [];
+    launcherState.value.workspaceAppsStatus = "loading";
+
+    await act(async () => renderChatHome(root));
+
+    expect(container.textContent).not.toContain(
+      "dispatch.pages.chatFirstNoWorkspaceApps",
+    );
+  });
+
+  it("keeps the Apps header and New app trigger with no apps at all", async () => {
+    launcherState.value.workspaceApps = [];
+
+    await act(async () => renderChatHome(root));
+
+    const apps = container.querySelector(
+      "section[aria-label='Workspace apps']",
+    );
+    expect(apps?.textContent).toContain("New");
+    expect(apps?.textContent).toContain(
+      "dispatch.pages.chatFirstNoWorkspaceApps",
+    );
+  });
+
   it.each([
     ["list-workspace-apps", "Workspace apps failed"],
     ["list-connected-agents", "Connected agents failed"],
@@ -213,11 +323,7 @@ describe("DispatchChatHomeApps", () => {
     launcherState.value.errorQueryName = queryName;
 
     await act(async () => {
-      root.render(
-        <MemoryRouter initialEntries={["/chat"]}>
-          <DispatchChatHomeApps />
-        </MemoryRouter>,
-      );
+      renderChatHome(root);
     });
 
     expect(container.textContent).toContain(