@agent-native/toolkit 0.216.0 → 0.218.0

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);
@@ -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"}
           />
         )}

package/src/app/chat/agentkit-chat/action-widget.tsx

@@ -6,6 +6,7 @@ import {
 
 import { AgentWidgetView } from "../../agentkit/react/components.js";
 import {
+  useAgentKit,
   useAgentThread,
   type AgentKitRenderProps,
 } from "../../agentkit/react/context.js";
@@ -30,6 +31,7 @@ export function AgentKitActionWidget({
   value: widget,
   threadId,
 }: AgentKitRenderProps<AgentWidget>) {
+  const { dataChartLayout } = useAgentKit();
   const thread = useAgentThread(threadId);
   const data = asRecord(widget.data);
   const toolCallId = data?.toolCallId;
@@ -93,6 +95,7 @@ export function AgentKitActionWidget({
     ...(relatedResults.length > 1 ? { relatedResults } : {}),
     widgetId: widget.id,
     isRunning: tool.status === "running",
+    dataChartLayout,
     chatUI: {
       renderer: widget.kind,
       ...(widget.title ? { title: widget.title } : {}),

package/src/app/chat/agentkit-chat/rail.ts

@@ -1,5 +1,16 @@
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type ChatThreadScope,
+  type UseChatThreadsOptions,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 export {

package/src/app/chat/chat/index.ts

@@ -54,6 +54,7 @@ export type {
   AgentChatSurfaceKind,
 } from "./surface-types.js";
 export type { AgentChatTranscriptLayout } from "../../agentkit/react/transcript-layout.js";
+export type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 export type { AgentChatWorkedForRowLayout } from "../../agentkit/react/transcript-layout.js";
 export type {
   MultiTabAssistantChatProps,
@@ -222,6 +223,15 @@ export {
 } from "@agent-native/core/client/agent-chat";
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadScope,
   type ChatThreadSnapshot,
   type ChatThreadSummary,

package/src/app/chat/chat/surface-types.ts

@@ -27,6 +27,7 @@ import type { ExportedMessageRepository } from "@assistant-ui/react";
 import type * as React from "react";
 
 import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
 import type {
   AgentChatTranscriptLayout,
@@ -244,6 +245,8 @@ export interface AssistantChatProps {
   emptyStateFooter?: React.ReactNode;
   /** Optional transcript geometry. Omitted values keep the shared defaults. */
   transcriptLayout?: AgentChatTranscriptLayout;
+  /** Optional sizing and typography for built-in chat data charts. */
+  dataChartLayout?: AgentChatDataChartLayout;
   /** Optional elapsed-work row geometry. Omitted values keep the shared defaults. */
   workedForRowLayout?: AgentChatWorkedForRowLayout;
   /** Optional duration text for the shared completed-work row. */

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -352,6 +352,35 @@ describe("ToolCallDisplay native renderers", () => {
     expect(container.textContent).not.toContain("Ada");
   });
 
+  it("passes the app chart layout to regular tool renderers", () => {
+    const layout = { maxWidth: 760, labelFontSize: 14 };
+    registerToolRenderer({
+      id: "app.chart-layout",
+      match: "app-chart-layout",
+      Component: ({ context }) => (
+        <div data-chart-layout-width={context.dataChartLayout?.maxWidth} />
+      ),
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="app-chart-layout"
+          args={{}}
+          result="ready"
+          isRunning={false}
+          dataChartLayout={layout}
+        />,
+      );
+    });
+
+    expect(
+      container
+        .querySelector("[data-chart-layout-width]")
+        ?.getAttribute("data-chart-layout-width"),
+    ).toBe("760");
+  });
+
   it("renders table-only data insight payloads without a chart", async () => {
     await act(async () => {
       root.render(

package/src/app/chat/chat/tool-call-display.tsx

@@ -47,6 +47,7 @@ import React, {
   useRef,
 } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import {
   workedForRowChevronStyle,
   workedForRowSummaryStyle,
@@ -647,6 +648,7 @@ export function ToolCallDisplay({
   isLatestRunning = isRunning,
   isActiveTail,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -670,6 +672,7 @@ export function ToolCallDisplay({
   repeatCount?: number;
   isActiveTail?: boolean;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   /** @deprecated Use isActiveTail. */
   isLatestRunning?: boolean;
@@ -758,6 +761,7 @@ export function ToolCallDisplay({
       repeatCount={repeatCount}
       context={builderContext}
       workedForRowLayout={workedForRowLayout}
+      dataChartLayout={dataChartLayout}
       formatWorkedForDuration={formatWorkedForDuration}
     />,
   );
@@ -782,6 +786,7 @@ function ToolCallDisplayGeneric({
   repeatCount,
   context,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -805,6 +810,7 @@ function ToolCallDisplayGeneric({
   repeatCount?: number;
   context?: string;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
@@ -919,6 +925,7 @@ function ToolCallDisplayGeneric({
     resultJson: parsedResult,
     isRunning,
     isActiveTail,
+    dataChartLayout,
     ...(typeof toolCallId === "string"
       ? { widgetId: `${toolCallId}:chat-ui` }
       : {}),

package/src/app/chat/chat/tool-render-registry.tsx

@@ -1,6 +1,8 @@
 import type { ActionChatUIConfig } from "@agent-native/core/action-ui";
 import type { ComponentType } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
+
 export interface ToolRendererContext {
   toolName: string;
   args: Record<string, unknown>;
@@ -15,6 +17,7 @@ export interface ToolRendererContext {
   isRunning: boolean;
   isActiveTail?: boolean;
   chatUI?: ActionChatUIConfig;
+  dataChartLayout?: AgentChatDataChartLayout;
 }
 
 export interface ToolRendererProps {