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

package/src/components/hosted-apps-settings-group.tsx

@@ -0,0 +1,189 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { SettingsGroup, SettingsRow } from "@agent-native/toolkit/app/settings";
+import { IconArrowUpRight } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { useWorkspaceAppLists } from "../lib/workspace-app-lists";
+import { HOSTED_APPS_SETTINGS_INVALID_ERROR_CODE } from "../shared/hosted-apps-settings";
+import { ActionQueryError } from "./action-query-error";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { Switch } from "./ui/switch";
+
+export interface HostedAppsSettings {
+  showHostedApps: boolean;
+}
+
+function isInvalidStoredSetting(error: unknown): boolean {
+  return (
+    !!error &&
+    typeof error === "object" &&
+    (error as { errorCode?: unknown }).errorCode ===
+      HOSTED_APPS_SETTINGS_INVALID_ERROR_CODE
+  );
+}
+
+function hostOf(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    // coercion-ok: a URL the browser cannot parse is shown as stored.
+    return url;
+  }
+}
+
+/** Settings › Organization › Apps: show or hide hosted apps for everyone. */
+export function HostedAppsSettingsGroup() {
+  const t = useT();
+  const query = useActionQuery<HostedAppsSettings>(
+    "get-hosted-apps-settings",
+    {},
+  );
+  // The switched value holds until the setting reads back: a save invalidates
+  // action queries, and the next read replaces `query.data`.
+  const [optimistic, setOptimistic] = useState<{
+    showHostedApps: boolean;
+    readFrom: HostedAppsSettings | undefined;
+  } | null>(null);
+  const save = useActionMutation<
+    HostedAppsSettings,
+    { showHostedApps: boolean }
+  >("set-hosted-apps-settings", {
+    onError: (error) => {
+      setOptimistic(null);
+      toast.error(t("dispatch.pages.hostedAppsSaveFailed"), {
+        description: error.message,
+      });
+    },
+  });
+  const title = t("dispatch.pages.hostedApps");
+  // An invalid stored value has no state to show; saving any value repairs it.
+  const storedInvalid = query.isError && isInvalidStoredSetting(query.error);
+  const showHostedApps =
+    optimistic && optimistic.readFrom === query.data
+      ? optimistic.showHostedApps
+      : storedInvalid
+        ? false
+        : query.data?.showHostedApps;
+  // The launchers' Hosted apps tier, including the apps this setting hides.
+  const lists = useWorkspaceAppLists({ includeHiddenFromLaunchers: true });
+  const listsFailed =
+    lists.status === "error" ||
+    (lists.connectedAppsQuery.isError &&
+      lists.connectedAppsQuery.data === undefined);
+  const listsLoading =
+    !listsFailed &&
+    (lists.status === "loading" || lists.connectedAppsQuery.data === undefined);
+
+  return (
+    <SettingsGroup id="hosted-apps" title={title}>
+      {query.isError && !storedInvalid && query.data === undefined ? (
+        <div className="px-5 py-4 sm:px-6">
+          <ActionQueryError
+            error={query.error}
+            onRetry={() => void query.refetch()}
+            queryName="get-hosted-apps-settings"
+          />
+        </div>
+      ) : showHostedApps === undefined ? (
+        <div
+          className="flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
+          aria-busy="true"
+        >
+          <Skeleton className="h-3.5 w-32" />
+          <Skeleton className="h-5 w-9 rounded-full" />
+        </div>
+      ) : (
+        <>
+          <SettingsRow
+            id="show-hosted-apps"
+            label={t("dispatch.pages.showHostedApps")}
+            control={
+              <Switch
+                aria-label={t("dispatch.pages.showHostedApps")}
+                checked={showHostedApps}
+                disabled={save.isPending}
+                onCheckedChange={(checked) => {
+                  setOptimistic({
+                    showHostedApps: checked,
+                    readFrom: query.data,
+                  });
+                  save.mutate({ showHostedApps: checked });
+                }}
+              />
+            }
+          >
+            {storedInvalid ? (
+              <p className="text-xs text-destructive" role="alert">
+                {t("dispatch.pages.hostedAppsSettingInvalid")}
+              </p>
+            ) : null}
+          </SettingsRow>
+          {listsFailed ? (
+            <div className="px-5 py-4 sm:px-6">
+              <ActionQueryError
+                error={
+                  lists.status === "error"
+                    ? lists.appsQuery.error
+                    : lists.connectedAppsQuery.error
+                }
+                onRetry={() => {
+                  void lists.appsQuery.refetch();
+                  void lists.connectedAppsQuery.refetch();
+                }}
+                queryName={
+                  lists.status === "error"
+                    ? "list-workspace-apps"
+                    : "list-connected-agents"
+                }
+              />
+            </div>
+          ) : listsLoading ? (
+            <div
+              className="flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
+              aria-busy="true"
+              data-hosted-apps-loading
+            >
+              <Skeleton className="h-3.5 w-24" />
+              <Skeleton className="h-8 w-16 rounded-md" />
+            </div>
+          ) : lists.hostedApps.length > 0 ? (
+            <div
+              data-state={showHostedApps ? "shown" : "hidden"}
+              className="divide-y divide-border/60 transition-opacity data-[state=hidden]:opacity-50"
+            >
+              {lists.hostedApps.map((app) => (
+                <SettingsRow
+                  key={app.id}
+                  id={`hosted-app-${app.id}`}
+                  label={app.name}
+                  description={hostOf(app.homeUrl?.trim() || app.url)}
+                  control={
+                    <Button variant="outline" size="sm" asChild>
+                      <a
+                        href={app.homeUrl?.trim() || app.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={t("dispatch.pages.chatFirstOpenApp", {
+                          name: app.name,
+                        })}
+                      >
+                        {t("dispatch.pages.openApp")}
+                        <IconArrowUpRight size={13} aria-hidden="true" />
+                      </a>
+                    </Button>
+                  }
+                />
+              ))}
+            </div>
+          ) : null}
+        </>
+      )}
+    </SettingsGroup>
+  );
+}

package/src/components/layout/Layout.spec.tsx

@@ -7,6 +7,7 @@ import { MemoryRouter, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { resetWorkspaceAppLayoutStoreForTests } from "../../lib/workspace-app-layout";
 import { CHAT_FIRST_PANE_STATE_KEY } from "../../shared/chat-first-pane";
 import { AdminShell } from "../admin-navigation";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
@@ -43,6 +44,7 @@ const clientState = vi.hoisted(() => ({
   connectedApps: [] as Array<Record<string, unknown>>,
   connectedAppsError: null as Error | null,
   connectedAppsLoading: false,
+  railRenders: 0,
   appState: {} as Record<string, unknown>,
   appStatePromises: {} as Record<string, Promise<unknown>>,
   basePath: "",
@@ -143,6 +145,15 @@ vi.mock("@agent-native/toolkit/app/chat/AgentSidebar", () => ({
 vi.mock("../deferred-chat-components.js", async (importOriginal) => ({
   ...(await importOriginal<typeof import("../deferred-chat-components.js")>()),
   AgentChatSurface: () => null,
+  ChatFirstAppsRail: await (async () => {
+    const { createElement, memo } = await import("react");
+    const { ChatFirstAppsRail: Rail } =
+      await import("../../../../toolkit/src/app/chat/chat-first/apps-rail.tsx");
+    return memo(function CountedRail(props: Parameters<typeof Rail>[0]) {
+      clientState.railRenders += 1;
+      return createElement(Rail, props);
+    });
+  })(),
   ChatFirstChatHistory: (
     await import("../../../../toolkit/src/app/chat/chat-first/chat-history.tsx")
   ).ChatFirstChatHistory,
@@ -222,47 +233,51 @@ vi.mock("@agent-native/core/client/i18n", () => ({
   DEFAULT_LOCALE: "en-US",
   useOptionalLocale: () => ({ locale: "en-US" }),
   useFormatters: () => ({ formatNumber: (value: number) => String(value) }),
-  useT: () => (key: string, values?: Record<string, unknown>) => {
-    const messages: Record<string, string> = {
-      "dispatch.nav.chat": "Chat",
-      "dispatch.nav.overview": "Overview",
-      "dispatch.nav.apps": "Apps",
-      "dispatch.nav.agents": "Agents",
-      "dispatch.pages.workspaceApps": "Workspace apps",
-      "dispatch.nav.operate": "Operate",
-      "dispatch.nav.advanced": "Advanced",
-      "agentChat.history.mine": "My chats",
-      "agentChat.history.sharedWithYou": "Shared with you",
-      "agentChat.history.ownedBy": `Owner: ${values?.name ?? ""}`,
-      "agentChat.history.accessDirect": "Shared with you",
-      "agentChat.history.accessOrganization": "Shared with your organization",
-      "agentChat.history.copyLink": "Copy link",
-      "agentChat.history.onlyYou": "Only you",
-      "agentChat.history.hide": "Hide from my list",
-      "agentChat.history.showAll": "Show all",
-      "agentChat.history.showLess": "Show less",
-      "agentChat.history.loadMore": "Load more",
-      "agentChat.history.loadingMore": "Loading...",
-      "agentChat.history.emptyMine": "No chats yet",
-      "dispatch.sidebar.chats": "Chats",
-      "dispatch.sidebar.showLocalChats": "Show local chats",
-      "dispatch.sidebar.showAllChats": "Show all chats",
-      "agentChat.contextXray.pin": "Pin",
-      "agentChat.contextXray.unpin": "Unpin",
-      "extensions.delete": "Archive",
-      "dispatch.integrations.failedToSave": "Failed to save",
-      "dispatch.sidebar.newChat": "New chat",
-      "dispatch.sidebar.newDispatchChat": "New Dispatch chat",
-      "dispatch.sidebar.renameChat": "Rename chat",
-      "dispatch.sidebar.chatOptions": `Options for ${values?.title ?? ""}`,
-      "dispatch.sidebar.renameThread": `Rename ${values?.title ?? ""}`,
-      "sidebar.collapseSidebar": "Collapse sidebar",
-      "sidebar.expandSidebar": "Expand sidebar",
-    };
-    return messages[key] ?? String(values?.defaultValue ?? key);
-  },
+  // Stable like the real useT, so memoized copy stays memoized.
+  useT: () => translate,
 }));
 
+function translate(key: string, values?: Record<string, unknown>) {
+  const messages: Record<string, string> = {
+    "dispatch.nav.chat": "Chat",
+    "dispatch.nav.overview": "Overview",
+    "dispatch.nav.apps": "Apps",
+    "dispatch.nav.agents": "Agents",
+    "dispatch.pages.workspaceApps": "Workspace apps",
+    "dispatch.nav.operate": "Operate",
+    "dispatch.nav.advanced": "Advanced",
+    "agentChat.history.mine": "My chats",
+    "agentChat.history.sharedWithYou": "Shared with you",
+    "agentChat.history.ownedBy": `Owner: ${values?.name ?? ""}`,
+    "agentChat.history.accessDirect": "Shared with you",
+    "agentChat.history.accessOrganization": "Shared with your organization",
+    "agentChat.history.copyLink": "Copy link",
+    "agentChat.history.onlyYou": "Only you",
+    "agentChat.history.hide": "Hide from my list",
+    "agentChat.history.showAll": "Show all",
+    "agentChat.history.showLess": "Show less",
+    "agentChat.history.loadMore": "Load more",
+    "agentChat.history.loadingMore": "Loading...",
+    "agentChat.history.emptyMine": "No chats yet",
+    "dispatch.sidebar.chats": "Chats",
+    "dispatch.sidebar.showLocalChats": "Show local chats",
+    "dispatch.sidebar.showAllChats": "Show all chats",
+    "agentChat.contextXray.pin": "Pin",
+    "agentChat.contextXray.unpin": "Unpin",
+    "extensions.delete": "Archive",
+    "dispatch.integrations.failedToSave": "Failed to save",
+    "dispatch.sidebar.newChat": "New chat",
+    "dispatch.sidebar.newDispatchChat": "New Dispatch chat",
+    "dispatch.sidebar.renameChat": "Rename chat",
+    "dispatch.sidebar.chatOptions": `Options for ${values?.title ?? ""}`,
+    "dispatch.sidebar.renameThread": `Rename ${values?.title ?? ""}`,
+    "agentChat.chatFirst.showMoreCount": `${values?.count ?? ""} more apps`,
+    "sidebar.collapseSidebar": "Collapse sidebar",
+    "sidebar.expandSidebar": "Expand sidebar",
+  };
+  return messages[key] ?? String(values?.defaultValue ?? key);
+}
+
 vi.mock("@agent-native/toolkit/app/shared", async (importOriginal) => ({
   ...(await importOriginal<
     typeof import("@agent-native/toolkit/app/shared")
@@ -447,6 +462,7 @@ describe("Dispatch NavContent", () => {
     clientState.connectedAppsLoading = false;
     clientState.appState = {};
     clientState.appStatePromises = {};
+    resetWorkspaceAppLayoutStoreForTests();
     workspaceAppNavigation.navigateToWorkspaceApp.mockClear();
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -595,6 +611,46 @@ describe("Dispatch NavContent", () => {
     ).not.toBeNull();
   });
 
+  it("keeps hosted apps the organization hides out of the rail but openable", async () => {
+    clientState.workspaceApps = [
+      { id: "notes", name: "Notes", path: "/notes", status: "ready" },
+    ];
+    clientState.connectedApps = [
+      {
+        id: "clips",
+        name: "Clips",
+        url: "https://clips.agent-native.com",
+        source: "builtin",
+        hiddenFromLaunchers: true,
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat/hosted-hidden"]}>
+          <Layout extensions={{ chatFirst: true }}>
+            <div />
+          </Layout>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(
+      container.querySelector('[data-chat-first-app][data-app-id="notes"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-chat-first-app][data-app-id="clips"]'),
+    ).toBeNull();
+
+    await act(async () => {
+      emitChatFirstOpenApp({ app: "clips" });
+    });
+
+    expect(
+      container.querySelector("[data-chat-first-app-pane]"),
+    ).not.toBeNull();
+  });
+
   it("retries an app open after connected built-in discovery recovers", async () => {
     clientState.workspaceApps = [
       {
@@ -646,6 +702,77 @@ describe("Dispatch NavContent", () => {
     ).not.toBeNull();
   });
 
+  it("keeps saved pins when the rail pins an app before workspace state loads", async () => {
+    clientState.workspaceApps = ["alpha", "beta"].map((id) => ({
+      id,
+      name: id,
+      path: `/${id}`,
+      url: `https://${id}.example.com`,
+      status: "ready",
+    }));
+    let resolveLayout: (value: unknown) => void = () => {};
+    clientState.appStatePromises["chat-first-app-layout"] = new Promise(
+      (resolve) => {
+        resolveLayout = resolve;
+      },
+    );
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <Layout extensions={{ chatFirst: true }}>
+            <div />
+          </Layout>
+        </MemoryRouter>,
+      );
+    });
+    const pinAlpha = container.querySelector<HTMLButtonElement>(
+      '[data-chat-first-app][data-app-id="alpha"] button[aria-pressed]',
+    );
+    expect(pinAlpha).not.toBeNull();
+    await act(async () => pinAlpha!.click());
+    await act(async () => {
+      resolveLayout({ pinnedIds: ["beta"], orderedIds: [] });
+    });
+
+    expect(clientState.appState["chat-first-app-layout"]).toEqual({
+      pinnedIds: ["alpha", "beta"],
+      orderedIds: [],
+    });
+  });
+
+  it("loads saved pins for the rail on non-chat routes", async () => {
+    clientState.workspaceApps = ["alpha", "beta"].map((id) => ({
+      id,
+      name: id,
+      path: `/${id}`,
+      url: `https://${id}.example.com`,
+      status: "ready",
+    }));
+    clientState.appState["chat-first-app-layout"] = {
+      pinnedIds: ["beta"],
+      orderedIds: [],
+    };
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/admin/automations"]}>
+          <Layout extensions={{ chatFirst: true }}>
+            <div />
+          </Layout>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(
+      container
+        .querySelector(
+          '[data-chat-first-app][data-app-id="beta"] button[aria-pressed]',
+        )
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
   it("keeps hidden Dispatch registered for agent app targets", async () => {
     clientState.workspaceApps = [
       {
@@ -671,7 +798,7 @@ describe("Dispatch NavContent", () => {
       emitChatFirstOpenApp({ app: "dispatch" });
     });
 
-    expect(container.querySelector(".dispatch-chat-first-notice")).toBeNull();
+    expect(container.querySelector("[data-app-notice]")).toBeNull();
   });
 
   it("does not restore a deferred pane after switching chats", async () => {
@@ -1168,15 +1295,19 @@ describe("Dispatch NavContent", () => {
       );
     });
 
-    expect(container.querySelectorAll("[data-chat-first-app]")).toHaveLength(5);
-    const showMore = [...container.querySelectorAll("button")].find(
-      (button) => button.textContent?.trim() === "Show more",
-    );
-    expect(showMore).toBeDefined();
-    await act(async () => {
-      showMore?.click();
-    });
-    expect(container.querySelectorAll("[data-chat-first-app]")).toHaveLength(6);
+    expect(container.querySelectorAll("[data-chat-first-app]")).toHaveLength(3);
+    expect(
+      container.querySelector('[data-chat-first-app-section="apps"]')
+        ?.textContent,
+    ).toContain("Apps");
+    expect(
+      container.querySelector('[data-chat-first-app][draggable="true"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector(
+        "[data-chat-first-apps-rail] button[aria-expanded]",
+      ),
+    ).toBeNull();
 
     const allApps = container.querySelector<HTMLButtonElement>(
       "[data-chat-first-all-apps]",
@@ -1188,6 +1319,147 @@ describe("Dispatch NavContent", () => {
     expect(paths.at(-1)).toBe("/apps");
   });
 
+  describe.each([false, true])(
+    "the chat-first rail's apps (collapsed %s)",
+    (collapsed) => {
+      const workspace = ["zeta", "eta", "beta", "delta", "alpha"].map((id) => ({
+        id,
+        name: id[0]!.toUpperCase() + id.slice(1),
+      }));
+      const hosted = ["mail", "clips", "slides", "design"].map((id) => ({
+        id,
+        name: id,
+        source: "builtin" as const,
+      }));
+      async function renderRail(
+        apps: Array<{ id: string; name: string; source?: "builtin" }>,
+        pinnedIds: string[],
+        activeAppId?: string,
+      ) {
+        await act(async () => {
+          root.render(
+            <MemoryRouter initialEntries={["/chat"]}>
+              <TooltipProvider>
+                <NavContent
+                  chatFirstMode
+                  collapsed={collapsed}
+                  chatFirstApps={apps}
+                  chatFirstAppLayout={{ pinnedIds, orderedIds: [] }}
+                  {...(activeAppId
+                    ? { chatFirstActiveAppId: activeAppId }
+                    : {})}
+                />
+              </TooltipProvider>
+            </MemoryRouter>,
+          );
+        });
+        const sections = [
+          ...container.querySelectorAll<HTMLElement>(
+            "[data-chat-first-app-section]",
+          ),
+        ].map((section) => section.dataset.chatFirstAppSection);
+        return {
+          sections,
+          ids: [
+            ...container.querySelectorAll<HTMLElement>("[data-chat-first-app]"),
+          ].map((row) => row.dataset.appId),
+        };
+      }
+
+      it("shows only pins, in pin order, once something is pinned", async () => {
+        const rail = await renderRail(
+          [...workspace, ...hosted],
+          ["clips", "beta"],
+        );
+        expect(rail.ids).toEqual(["clips", "beta"]);
+        if (!collapsed) {
+          expect(rail.sections).toEqual(["pinned"]);
+          expect(
+            container
+              .querySelector("[data-chat-first-app-section]")
+              ?.getAttribute("aria-label"),
+          ).toBe("dispatch.pages.pinnedApps");
+        }
+      });
+
+      it("suggests the first three workspace apps A to Z with no pins", async () => {
+        const rail = await renderRail([...workspace, ...hosted], []);
+        expect(rail.ids).toEqual(["alpha", "beta", "delta"]);
+        if (!collapsed) expect(rail.sections).toEqual(["apps"]);
+      });
+
+      it("suggests hosted apps when the workspace has none", async () => {
+        const rail = await renderRail(hosted, []);
+        expect(rail.ids).toEqual(["clips", "design", "mail"]);
+      });
+
+      it("adds the open app when it is not shown", async () => {
+        const rail = await renderRail(
+          [...workspace, ...hosted],
+          ["clips"],
+          "zeta",
+        );
+        expect(rail.ids).toEqual(["clips", "zeta"]);
+      });
+    },
+  );
+
+  it.each([
+    ["loading", false],
+    ["error", false],
+    ["ready", true],
+  ] as const)(
+    "says there are no apps only once the list arrived (%s)",
+    async (status, saysEmpty) => {
+      await act(async () => {
+        root.render(
+          <MemoryRouter initialEntries={["/chat"]}>
+            <TooltipProvider>
+              <NavContent
+                chatFirstMode
+                chatFirstApps={[]}
+                chatFirstAppsStatus={status}
+              />
+            </TooltipProvider>
+          </MemoryRouter>,
+        );
+      });
+
+      const appsText =
+        container.querySelector('[data-chat-first-app-section="apps"]')
+          ?.textContent ?? "";
+      if (saysEmpty) expect(appsText).toContain("No apps yet");
+      else expect(appsText).not.toContain("No apps yet");
+    },
+  );
+
+  it("does not re-render the apps rail when the sidebar re-renders with the same apps", async () => {
+    const apps = [
+      { id: "alpha", name: "Alpha" },
+      { id: "mail", name: "Mail", source: "builtin" as const },
+    ];
+    const layout = { pinnedIds: [], orderedIds: [] };
+    const renderNav = () =>
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <TooltipProvider>
+            <NavContent
+              chatFirstMode
+              chatFirstApps={apps}
+              chatFirstAppLayout={layout}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+
+    await act(async () => renderNav());
+    const rendersAfterMount = clientState.railRenders;
+    expect(rendersAfterMount).toBeGreaterThan(0);
+    await act(async () => renderNav());
+
+    expect(clientState.railRenders).toBe(rendersAfterMount);
+  });
+
   it("omits the Chats section when chat-first has no chats", async () => {
     clientState.threads = [];
     await act(async () => {
@@ -1409,6 +1681,41 @@ describe("Dispatch NavContent", () => {
     },
   );
 
+  it("lists chats above the apps rail", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat/active-thread"]}>
+          <TooltipProvider>
+            <NavContent
+              chatFirstMode
+              chatFirstApps={[{ id: "alpha", name: "Alpha" }]}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const chat = [...container.querySelectorAll("button, a")].find((node) =>
+      node.textContent?.includes("Current Dispatch work"),
+    );
+    const rail = container.querySelector("[data-chat-first-apps-rail]");
+    expect(chat).toBeDefined();
+    expect(rail).not.toBeNull();
+    expect(
+      chat!.compareDocumentPosition(rail!) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("puts the chat source toggle in the first chat section header", async () => {
+    await renderHistory(true);
+
+    const toggles = container.querySelectorAll(
+      "[data-dispatch-chat-source-toggle]",
+    );
+    expect(toggles).toHaveLength(1);
+    expect(toggles[0]!.parentElement!.textContent).toBe("My chats");
+  });
+
   it.each([false, true])(
     "passes the persisted external source toggle to both ownership queries (chat-first %s)",
     async (chatFirstMode) => {