@agent-native/toolkit 0.217.0 → 0.219.0

package/src/app/chat/MultiTabAssistantChat.spec.tsx

@@ -34,6 +34,7 @@ import React, { act } from "react";
 import { flushSync } from "react-dom";
 import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter } from "react-router";
+import { toast } from "sonner";
 import {
   afterEach,
   beforeEach,
@@ -7874,6 +7875,8 @@ describe("MultiTabAssistantChat page overlay", () => {
 describe("MultiTabAssistantChat history popover", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let sharedHistoryRows: ChatThreadSummary[];
+  let mineHistoryRows: ChatThreadSummary[] | undefined;
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
@@ -7882,6 +7885,8 @@ describe("MultiTabAssistantChat history popover", () => {
       return 0;
     });
     resetThreadMocks();
+    sharedHistoryRows = [];
+    mineHistoryRows = undefined;
     const now = Date.now();
     threadMocks.activeThreadId = "thread-1";
     const historyThreads: ChatThreadSummary[] = [
@@ -7917,7 +7922,32 @@ describe("MultiTabAssistantChat history popover", () => {
     threadMocks.threads = historyThreads;
     vi.stubGlobal(
       "fetch",
-      vi.fn(async () => Response.json({ value: null })),
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = new URL(String(input), "http://test.local");
+        const ownership = url.searchParams.get("ownership");
+        if (ownership) {
+          const source =
+            ownership === "mine"
+              ? (mineHistoryRows ?? threadMocks.threads).map((thread) => ({
+                  ...thread,
+                  ownerEmail: "me@example.com",
+                  accessBasis: "owner",
+                  visibility: "private",
+                }))
+              : sharedHistoryRows;
+          const query = url.searchParams.get("q") ?? "";
+          const matching = source.filter((row) =>
+            row.title.toLowerCase().includes(query.toLowerCase()),
+          );
+          const offset = Number(url.searchParams.get("offset") ?? 0);
+          const limit = Number(url.searchParams.get("limit") ?? 50);
+          return Response.json({
+            threads: matching.slice(offset, offset + limit),
+            hasMore: matching.length > offset + limit,
+          });
+        }
+        return Response.json({ value: null });
+      }),
     );
     window.localStorage.clear();
     window.localStorage.setItem(
@@ -7947,7 +7977,7 @@ describe("MultiTabAssistantChat history popover", () => {
       'button[aria-label="All chats"]',
     );
     expect(historyButton).not.toBeNull();
-    act(() => {
+    await act(async () => {
       historyButton!.click();
     });
   }
@@ -7965,13 +7995,224 @@ describe("MultiTabAssistantChat history popover", () => {
     });
   }
 
+  it.each(["local", "owner"] as const)(
+    "keeps the active proven-%s empty chat before persistence and hides inactive blanks",
+    async (proof) => {
+      mineHistoryRows = [];
+      threadMocks.isNewThread.mockImplementation(() => proof === "local");
+      threadMocks.threads = threadMocks.threads.slice(0, 2).map((thread) => ({
+        ...thread,
+        messageCount: 0,
+        ...(proof === "owner"
+          ? {
+              accessBasis: "owner" as const,
+              ownerEmail: "me@example.com",
+              visibility: "private" as const,
+            }
+          : {}),
+      }));
+      await openHistory();
+
+      const mine = container.querySelector(
+        '.an-chat-history__section[data-section-id="mine"]',
+      )!;
+      expect(
+        Array.from(mine.querySelectorAll(".an-chat-history-row__title")).map(
+          (element) => element.textContent,
+        ),
+      ).toEqual(["Active chat"]);
+      expect(mine.querySelector(".an-chat-history-row--active")).not.toBeNull();
+      expect(
+        mine.querySelector(".an-chat-history-row__timestamp")?.textContent,
+      ).toBe("Active");
+      expect(threadMocks.saveThreadData).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each([false, true])(
+    "never recasts an active shared empty chat as Mine (server row loaded: %s)",
+    async (loaded) => {
+      mineHistoryRows = [];
+      threadMocks.isNewThread.mockReturnValue(true);
+      const shared: ChatThreadSummary = {
+        ...threadMocks.threads[0],
+        messageCount: 0,
+        accessBasis: "direct",
+        ownerEmail: "pat@example.com",
+        visibility: "private",
+      };
+      threadMocks.threads = [shared];
+      sharedHistoryRows = loaded ? [shared] : [];
+      await openHistory();
+
+      expect(
+        container.querySelector(
+          '.an-chat-history__section[data-section-id="mine"] .an-chat-history-row',
+        ),
+      ).toBeNull();
+      const sharedSection = container.querySelector(
+        '.an-chat-history__section[data-section-id="shared"]',
+      );
+      expect(
+        sharedSection?.querySelectorAll(".an-chat-history-row").length ?? 0,
+      ).toBe(loaded ? 1 : 0);
+      const trigger =
+        sharedSection?.querySelector<HTMLButtonElement>(
+          ".an-chat-history-row__menu-trigger",
+        ) ?? null;
+      if (!loaded) {
+        expect(trigger).toBeNull();
+        return;
+      }
+      await openRowMenu(trigger!);
+      expect(
+        Array.from(
+          document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+          (element) => element.textContent,
+        ),
+      ).toEqual(["Copy link"]);
+    },
+  );
+
+  it("loads both ownership lists only while open and debounces search to both", async () => {
+    await act(async () => {
+      root.render(<MultiTabAssistantChat storageKey="history-test" />);
+    });
+    const fetchMock = vi.mocked(fetch);
+    const ownershipRequests = () =>
+      fetchMock.mock.calls
+        .map(([input]) => new URL(String(input), "http://test.local"))
+        .filter((url) => url.searchParams.has("ownership"));
+    expect(ownershipRequests()).toHaveLength(0);
+    await openHistory();
+    expect(
+      ownershipRequests().map((url) => url.searchParams.get("ownership")),
+    ).toEqual(["mine", "shared"]);
+    vi.useFakeTimers();
+    try {
+      const input = container.querySelector<HTMLInputElement>(
+        ".an-chat-history__search-input",
+      )!;
+      act(() => {
+        Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(input, "Other");
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+      expect(ownershipRequests()).toHaveLength(2);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(250);
+      });
+      expect(
+        ownershipRequests()
+          .slice(-2)
+          .map((url) => [
+            url.searchParams.get("ownership"),
+            url.searchParams.get("q"),
+          ]),
+      ).toEqual([
+        ["mine", "Other"],
+        ["shared", "Other"],
+      ]);
+      expect(threadMocks.searchThreads).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("previews five shared rows without owner pins or actions and switches through history", async () => {
+    sharedHistoryRows = Array.from({ length: 51 }, (_, index) => ({
+      id: `shared-${index}`,
+      title: `Shared ${index}`,
+      preview: "",
+      messageCount: 1,
+      createdAt: 1,
+      updatedAt: 1,
+      scope: null,
+      accessBasis: index === 0 ? "organization" : "direct",
+      ownerEmail: "pat@example.com",
+      visibility: "org",
+      pinnedAt: 10,
+    }));
+    await openHistory();
+    const sharedSection = container.querySelector(
+      '.an-chat-history__section[data-section-id="shared"]',
+    )!;
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      5,
+    );
+    expect(sharedSection.textContent).toContain("pat@example.com");
+    expect(sharedSection.textContent).toContain(
+      "Shared with your organization",
+    );
+    await openRowMenu(
+      sharedSection.querySelector<HTMLButtonElement>(
+        ".an-chat-history-row__menu-trigger",
+      )!,
+    );
+    expect(
+      Array.from(
+        document.body.querySelectorAll(".an-chat-history-row__menu-item"),
+        (element) => element.textContent,
+      ),
+    ).toEqual(["Copy link"]);
+    await act(async () => {
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+    });
+    expect(
+      sharedSection.querySelector(".an-chat-history-row--pinned"),
+    ).toBeNull();
+    expect(container.querySelector(".an-chat-history-rail__footer")).toBeNull();
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(
+          ".an-chat-history-rail__section-toggle",
+        )!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      50,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(".an-chat-history-rail__load-more")!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      51,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(
+          ".an-chat-history-rail__section-toggle",
+        )!
+        .click();
+    });
+    expect(sharedSection.querySelectorAll(".an-chat-history-row")).toHaveLength(
+      5,
+    );
+    await act(async () => {
+      sharedSection
+        .querySelector<HTMLButtonElement>(".an-chat-history-row__button")!
+        .click();
+    });
+    expect(threadMocks.switchThread).toHaveBeenCalledWith("shared-0");
+    expect(container.querySelector(".an-chat-history")).toBeNull();
+    expect(
+      chatThreadHookMocks.useChatThreads.mock.calls.at(-1)?.[3]?.ownership,
+    ).toBeUndefined();
+  });
+
   it("groups pinned threads into a dedicated section, sorted ahead of the rest", async () => {
     await openHistory();
 
     const labels = Array.from(
       container.querySelectorAll(".an-chat-history__section-label"),
     ).map((el) => el.textContent);
-    expect(labels).toEqual(["Pinned"]);
+    expect(labels).toEqual(["Pinned", "My chats"]);
 
     const titles = Array.from(
       container.querySelectorAll(".an-chat-history-row__title"),
@@ -8055,6 +8296,32 @@ describe("MultiTabAssistantChat history popover", () => {
     expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-3", true);
   });
 
+  it("shows the localized save failure when a history pin fails", async () => {
+    const toastError = vi
+      .spyOn(toast, "error")
+      .mockReturnValue("failure-toast");
+    threadMocks.pinThread.mockResolvedValue(false);
+    try {
+      await openHistory();
+      const row = container.querySelectorAll(".an-chat-history-row")[2];
+      await openRowMenu(
+        row.querySelector<HTMLButtonElement>(
+          ".an-chat-history-row__menu-trigger",
+        )!,
+      );
+      const pinItem = Array.from(
+        document.body.querySelectorAll<HTMLButtonElement>(
+          ".an-chat-history-row__menu-item",
+        ),
+      ).find((element) => element.textContent?.includes("Pin to top"))!;
+      await act(async () => pinItem.click());
+      expect(threadMocks.pinThread).toHaveBeenCalledWith("thread-3", true);
+      expect(toastError).toHaveBeenCalledExactlyOnceWith("Save failed");
+    } finally {
+      toastError.mockRestore();
+    }
+  });
+
   it("unpins an already-pinned thread via the row action menu", async () => {
     await openHistory();
 

package/src/app/chat/MultiTabAssistantChat.tsx

@@ -33,7 +33,6 @@ import {
 import {
   useChatThreads,
   type ChatThreadScope,
-  type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import { agentNativePath, appPath } from "@agent-native/core/client/api-path";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
@@ -80,17 +79,13 @@ import React, {
   useLayoutEffect,
   useCallback,
 } from "react";
+import { toast } from "sonner";
 
 import {
   getAgentChatNavigationKey,
   type AgentChatNavigationKey,
 } from "./agent-sidebar-events.js";
 import { AgentKitAssistantChat } from "./AgentKitAssistantChat.js";
-import {
-  ChatHistoryList,
-  type ChatHistoryItem,
-  type ChatHistorySection,
-} from "./chat/ChatHistoryList.js";
 import type {
   AssistantChatProps,
   AssistantChatHandle,
@@ -98,6 +93,12 @@ import type {
   AssistantChatSendOptions,
 } from "./chat/surface-types.js";
 import { fallbackChatTitle } from "./fallback-chat-title.js";
+import {
+  OwnershipChatHistoryRail,
+  ownDraftRows,
+  useOwnershipChatHistory,
+  type OwnDraftRow,
+} from "./ownership-history/index.js";
 
 type AgentActionScope = NonNullable<AgentChatMessage["actionScope"]>;
 const PREFILL_CONTEXT_KEY = "agent-chat-prefill-context";
@@ -488,139 +489,75 @@ function formatThreadTime(
 }
 
 function HistoryPopover({
-  threads,
+  apiUrl,
+  scope,
+  localMineRows,
   openTabIds,
   activeThreadId,
-  hasMoreThreads = false,
-  isLoadingMoreThreads = false,
-  loadError,
   onSelect,
+  onNewChat,
   onClose,
-  onLoadMore,
-  onSearch,
   onTogglePin,
   onRename,
+  getThreadUrl,
   popoverAlign = "end",
 }: {
-  threads: ChatThreadSummary[];
+  apiUrl?: string;
+  scope?: ChatThreadScope;
+  localMineRows: OwnDraftRow[];
   openTabIds: Set<string>;
   activeThreadId: string | null;
-  hasMoreThreads?: boolean;
-  isLoadingMoreThreads?: boolean;
-  loadError?: string | null;
   onSelect: (id: string) => void;
+  onNewChat: () => void;
   onClose: () => void;
-  onLoadMore?: () => void;
-  onSearch?: (query: string) => Promise<ChatThreadSummary[]>;
-  /** Presence enables the pin/unpin row action. Receives the thread's
-   * current pinned state so the caller can flip it. */
-  onTogglePin?: (id: string, pinned: boolean) => void;
-  /** Presence enables the inline rename row action. */
-  onRename?: (id: string, nextTitle: string) => void;
+  onTogglePin: (id: string, pinned: boolean) => Promise<boolean>;
+  onRename: (id: string, nextTitle: string) => Promise<boolean>;
+  getThreadUrl: (id: string) => string;
   popoverAlign?: "start" | "end";
 }) {
   const t = useT();
   const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
   const [search, setSearch] = useState("");
-  const [searchResults, setSearchResults] = useState<
-    ChatThreadSummary[] | null
-  >(null);
-  const [isSearching, setIsSearching] = useState(false);
+  const [query, setQuery] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  // Debounced server-side search
-  const searchIdRef = useRef(0);
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    const q = search.trim();
-    if (!q) {
-      searchIdRef.current++;
-      setSearchResults(null);
-      setIsSearching(false);
-      return;
-    }
-    setIsSearching(true);
-    const id = ++searchIdRef.current;
-    debounceRef.current = setTimeout(async () => {
-      if (onSearch) {
-        const results = await onSearch(q);
-        if (id !== searchIdRef.current) return;
-        setSearchResults(results);
-      } else {
-        // Fallback to client-side filtering
-        setSearchResults(null);
-      }
-      setIsSearching(false);
-    }, 250);
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [search, onSearch]);
-
-  // Hide empty threads from the history list — except the currently-active
-  // one. The active thread always belongs in the list so the user can see
-  // they're in it (the previous filter dropped a brand-new chat the user
-  // had just opened, making them think their chat had vanished).
-  const visibleThreads = threads.filter(
-    (t) => t.messageCount > 0 || t.id === activeThreadId,
-  );
-
-  const filtered = search.trim()
-    ? (searchResults ?? visibleThreads).filter(
-        (t) => t.messageCount > 0 || t.id === activeThreadId,
-      )
-    : visibleThreads;
-
-  // Pinned threads always float to the top of `threads` already (see
-  // `sortThreadSummaries` in use-chat-threads.ts and the matching server
-  // ORDER BY), but pulling them into their own labeled section — instead of
-  // just relying on sort order within "All chats" — makes the pin affordance
-  // visible at a glance, matching common chat-history UX.
-  const pinnedThreads = filtered.filter((t) => t.pinnedAt != null);
-  const unpinnedThreads = filtered.filter((t) => t.pinnedAt == null);
-
-  const toHistoryItem = (thread: ChatThreadSummary): ChatHistoryItem => {
-    const isActive = thread.id === activeThreadId;
-    const hasTitle = Boolean(thread.title);
-    const title = thread.title || t("agentChat.history.untitledChat");
-    return {
-      id: thread.id,
-      title,
-      titleText: title,
+    const timer = setTimeout(() => setQuery(search.trim()), 250);
+    return () => clearTimeout(timer);
+  }, [search]);
+
+  // This component is mounted only while the popover is open.
+  const history = useOwnershipChatHistory({
+    apiUrl,
+    scope,
+    enabled: true,
+    query,
+    activeId: activeThreadId,
+    pinned: true,
+    localMineRows,
+    mutations: { pin: onTogglePin, rename: onRename },
+    getThreadUrl,
+    onMutationFailed: () => toast.error(t("agentChat.common.saveFailed")),
+    decorateItem: (item, row) => ({
+      ...item,
+      title: row.title || t("agentChat.history.untitledChat"),
+      titleText: row.title || t("agentChat.history.untitledChat"),
       subtitle:
-        hasTitle && thread.preview && thread.title !== thread.preview
-          ? thread.preview
+        row.title && row.preview && row.title !== row.preview
+          ? row.preview
           : undefined,
-      timestamp: isActive
-        ? t("agentChat.history.active")
-        : openTabIds.has(thread.id)
-          ? t("agentChat.history.open")
-          : formatThreadTime(
-              thread.updatedAt,
-              locale,
-              t("agentChat.history.yesterday"),
-            ),
-      pinned: thread.pinnedAt != null,
-    };
-  };
-
-  const historySections: ChatHistorySection[] = [
-    ...(pinnedThreads.length > 0
-      ? [
-          {
-            id: "pinned",
-            label: t("agentChat.history.pinned"),
-            items: pinnedThreads.map(toHistoryItem),
-          },
-        ]
-      : []),
-    { id: "all", items: unpinnedThreads.map(toHistoryItem) },
-  ];
+      timestamp:
+        row.id === activeThreadId
+          ? t("agentChat.history.active")
+          : openTabIds.has(row.id)
+            ? t("agentChat.history.open")
+            : formatThreadTime(
+                row.updatedAt,
+                locale,
+                t("agentChat.history.yesterday"),
+              ),
+    }),
+  });
 
   return (
     <Popover open onOpenChange={(open) => !open && onClose()}>
@@ -640,46 +577,23 @@ function HistoryPopover({
         }}
         className="w-72 rounded-lg p-0"
       >
-        <ChatHistoryList
-          sections={historySections}
+        <OwnershipChatHistoryRail
+          {...history}
           activeId={activeThreadId}
+          onNewChat={onNewChat}
+          showNewChat={false}
           onSelect={(id) => {
             onSelect(id);
             onClose();
           }}
-          onTogglePin={
-            onTogglePin
-              ? (id) => {
-                  const isPinned =
-                    threads.find((t) => t.id === id)?.pinnedAt != null;
-                  onTogglePin(id, !isPinned);
-                }
-              : undefined
-          }
-          onRename={onRename}
           searchValue={search}
           onSearchChange={setSearch}
           searchPlaceholder={t("agentChat.history.search")}
           searchInputRef={inputRef}
-          loading={isSearching}
           loadingLabel={t("agentChat.history.searching")}
-          error={loadError && !search.trim() ? loadError : undefined}
           emptyLabel={t("agentChat.history.empty")}
           emptySearchLabel={t("agentChat.history.noMatches")}
-          footer={
-            !search.trim() && hasMoreThreads ? (
-              <button
-                type="button"
-                onClick={() => onLoadMore?.()}
-                disabled={isLoadingMoreThreads}
-                className="mx-1 mt-1 flex w-[calc(100%-0.5rem)] items-center justify-center rounded-md px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:cursor-default disabled:opacity-60"
-              >
-                {isLoadingMoreThreads
-                  ? t("agentChat.common.loading")
-                  : t("agentChat.history.loadOlder")}
-              </button>
-            ) : undefined
-          }
+          className="an-chat-history--capped"
         />
       </PopoverContent>
     </Popover>
@@ -1284,12 +1198,7 @@ export function MultiTabAssistantChat({
     forkThread,
     saveThreadData,
     generateTitle,
-    searchThreads,
-    loadMoreThreads,
     refreshThreads,
-    hasMoreThreads,
-    isLoadingMoreThreads,
-    threadsLoadError,
     restoredThreadIdOnListFailure,
     evictedThreadIds,
     isNewThread,
@@ -1333,6 +1242,7 @@ export function MultiTabAssistantChat({
   const [showHistory, setShowHistory] = useState(false);
   const [pageOverlayScrolled, setPageOverlayScrolled] = useState(false);
   const newThreadIds = useRef<Set<string>>(new Set());
+  const observedThreadStarts = useRef(new Map<string, number>());
   const [, setThreadPersistenceVersion] = useState(0);
   const handleThreadSnapshotPersisted = useCallback(
     (threadId: string, messageCount: number) => {
@@ -2732,6 +2642,7 @@ export function MultiTabAssistantChat({
       if (!detail) return;
       const { isRunning, tabId } = detail;
       if (!tabId) return;
+      if (isRunning) observedThreadStarts.current.set(tabId, Date.now());
 
       setRunningThreads((prev) => {
         const next = new Set(prev);
@@ -3769,7 +3680,7 @@ export function MultiTabAssistantChat({
                             key={tab.id}
                             ref={isActive ? activeTabRefCb : undefined}
                             className={cn(
-                              "agent-tab agent-tab-group relative flex items-center rounded-md text-[11px] font-medium shrink-0 min-w-[56px] max-w-[130px]",
+                              "agent-tab agent-tab-group relative flex items-center rounded-md text-[11px] font-medium shrink min-w-[56px] max-w-[130px]",
                               isActive
                                 ? "bg-accent text-foreground ring-1 ring-inset ring-border/60 shadow-sm"
                                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
@@ -3871,7 +3782,7 @@ export function MultiTabAssistantChat({
                                 : undefined
                             }
                             className={cn(
-                              "agent-tab agent-tab-group relative flex shrink-0 items-center rounded-md text-[10px] font-medium min-w-[48px] max-w-[130px]",
+                              "agent-tab agent-tab-group relative flex shrink items-center rounded-md text-[10px] font-medium min-w-[48px] max-w-[130px]",
                               tab.id === activeThreadId
                                 ? "bg-accent text-foreground"
                                 : "text-muted-foreground hover:bg-accent hover:text-foreground",
@@ -3939,18 +3850,30 @@ export function MultiTabAssistantChat({
         {/* History popover — rendered inside relative container so positioning works */}
         {showHistory && (
           <HistoryPopover
-            threads={threads}
+            apiUrl={apiUrl}
+            scope={isolateHistoryByScope ? (scope ?? undefined) : undefined}
+            localMineRows={ownDraftRows({
+              threads: threads.map((thread) => ({
+                ...thread,
+                messageCount: messageCounts[thread.id] ?? thread.messageCount,
+              })),
+              isNewThread,
+              activeId: activeThreadId,
+              observedThreadStarts: observedThreadStarts.current,
+            })}
             openTabIds={new Set(openTabIds)}
             activeThreadId={activeThreadId}
-            hasMoreThreads={hasMoreThreads}
-            isLoadingMoreThreads={isLoadingMoreThreads}
-            loadError={threadsLoadError}
             onSelect={openFromHistory}
+            onNewChat={addTab}
             onClose={() => setShowHistory(false)}
-            onLoadMore={loadMoreThreads}
-            onSearch={searchThreads}
             onTogglePin={pinThread}
             onRename={renameThread}
+            getThreadUrl={(threadId) => {
+              if (getThreadPath) return appPath(getThreadPath(threadId));
+              const url = new URL(window.location.href);
+              url.searchParams.set(threadUrlParamName, threadId);
+              return url.toString();
+            }}
             popoverAlign={renderOverlay ? "start" : "end"}
           />
         )}