@agent-native/core 0.117.1 → 0.118.0

package/src/client/CommandMenu.tsx

@@ -15,10 +15,18 @@
  *   </CommandMenu>
  */
 
+import {
+  Command as CommandPrimitive,
+  CommandGroup as CommandGroupPrimitive,
+  CommandInput as CommandInputPrimitive,
+  CommandItem as CommandItemPrimitive,
+  CommandList as CommandListPrimitive,
+  CommandSeparator as CommandSeparatorPrimitive,
+  CommandShortcut as CommandShortcutPrimitive,
+} from "@agent-native/toolkit/ui/command";
 import {
   IconBook2,
   IconExternalLink,
-  IconSearch,
   IconMessage,
   IconHistory,
 } from "@tabler/icons-react";
@@ -36,6 +44,7 @@ import React, {
 import { parseChangelog } from "../changelog/parse.js";
 import { sendToAgentChat } from "./agent-chat.js";
 import { ChangelogDialog, useChangelogSeen } from "./changelog/Changelog.js";
+import { Dialog, DialogContent, DialogTitle } from "./components/ui/dialog.js";
 import { cn } from "./utils.js";
 
 // ─── Context ────────────────────────────────────────────────────────────────
@@ -43,8 +52,6 @@ import { cn } from "./utils.js";
 interface CommandMenuContextValue {
   search: string;
   onOpenChange: (open: boolean) => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  setSelectedIndex: (index: number) => void;
 }
 
 const CommandMenuContext = createContext<CommandMenuContextValue | null>(null);
@@ -122,14 +129,7 @@ interface CommandGroupProps {
 
 function CommandGroup({ heading, children }: CommandGroupProps) {
   return (
-    <div className="overflow-hidden p-1 text-foreground">
-      {heading && (
-        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-          {heading}
-        </div>
-      )}
-      {children}
-    </div>
+    <CommandGroupPrimitive heading={heading}>{children}</CommandGroupPrimitive>
   );
 }
 
@@ -148,9 +148,7 @@ function CommandItem({
   className,
   deferSelect = true,
 }: CommandItemProps) {
-  const { onOpenChange, containerRef, setSelectedIndex } =
-    useCommandMenuContext();
-  const itemRef = useRef<HTMLDivElement>(null);
+  const { onOpenChange } = useCommandMenuContext();
 
   const handleSelect = () => {
     if (!deferSelect) {
@@ -164,26 +162,13 @@ function CommandItem({
     setTimeout(onSelect, 50);
   };
 
-  const handleMouseEnter = () => {
-    if (!containerRef.current || !itemRef.current) return;
-    const items = containerRef.current.querySelectorAll('[role="option"]');
-    const index = Array.from(items).indexOf(itemRef.current);
-    if (index >= 0) setSelectedIndex(index);
-  };
-
   return (
-    <div
-      ref={itemRef}
-      className={cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-        className,
-      )}
-      onClick={handleSelect}
-      onMouseEnter={handleMouseEnter}
-      role="option"
+    <CommandItemPrimitive
+      className={cn("cursor-pointer gap-2", className)}
+      onSelect={handleSelect}
     >
       {children}
-    </div>
+    </CommandItemPrimitive>
   );
 }
 
@@ -194,19 +179,14 @@ interface CommandShortcutProps {
 
 function CommandShortcut({ children, className }: CommandShortcutProps) {
   return (
-    <span
-      className={cn(
-        "ms-auto text-xs tracking-widest text-muted-foreground",
-        className,
-      )}
-    >
+    <CommandShortcutPrimitive className={className}>
       {children}
-    </span>
+    </CommandShortcutPrimitive>
   );
 }
 
 function CommandSeparator({ className }: { className?: string }) {
-  return <div className={cn("-mx-1 my-1 h-px bg-border", className)} />;
+  return <CommandSeparatorPrimitive className={cn("my-1", className)} />;
 }
 
 export interface CommandMenuDoc {
@@ -319,7 +299,6 @@ export function CommandMenu({
   changelogKey,
 }: CommandMenuProps) {
   const [search, setSearch] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -349,13 +328,11 @@ export function CommandMenu({
   useEffect(() => {
     if (!open) {
       setSearch("");
-      setSelectedIndex(0);
       return;
     }
 
     if (open) {
       setSearch("");
-      setSelectedIndex(0);
       // Wait for render then focus
       requestAnimationFrame(() => {
         inputRef.current?.focus();
@@ -363,64 +340,6 @@ export function CommandMenu({
     }
   }, [open]);
 
-  // Reset selection when search changes
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [search]);
-
-  // Keep selected item scrolled into view
-  useEffect(() => {
-    const items = containerRef.current?.querySelectorAll('[role="option"]');
-    if (items && items[selectedIndex]) {
-      items[selectedIndex].scrollIntoView({ block: "nearest" });
-    }
-  }, [selectedIndex]);
-
-  // Apply selected styling directly (can't rely on Tailwind scanning core package)
-  useEffect(() => {
-    const items = containerRef.current?.querySelectorAll('[role="option"]');
-    if (!items) return;
-    items.forEach((item, i) => {
-      const el = item as HTMLElement;
-      if (i === selectedIndex) {
-        el.style.backgroundColor = "hsl(var(--accent))";
-        el.style.color = "hsl(var(--accent-foreground))";
-      } else {
-        el.style.backgroundColor = "";
-        el.style.color = "";
-      }
-    });
-  });
-
-  // Close on escape
-  useEffect(() => {
-    if (!open) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onOpenChange(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, onOpenChange]);
-
-  // Close on click outside
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        onOpenChange(false);
-      }
-    };
-    // Use capture to handle clicks before they bubble
-    document.addEventListener("mousedown", handleClick, true);
-    return () => document.removeEventListener("mousedown", handleClick, true);
-  }, [open, onOpenChange]);
-
   const handleSubmitToAgent = useCallback(() => {
     onOpenChange(false);
     if (!search.trim()) {
@@ -430,24 +349,6 @@ export function CommandMenu({
     submitToAgent(search.trim());
   }, [search, onOpenChange]);
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const items = containerRef.current?.querySelectorAll('[role="option"]');
-    const itemCount = items?.length ?? 0;
-
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev + 1) % itemCount || 0);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev - 1 + itemCount) % itemCount || 0);
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (items && items[selectedIndex]) {
-        (items[selectedIndex] as HTMLElement).click();
-      }
-    }
-  };
-
   // The built-in "What's new" row matches changelog-ish search terms.
   const changelogRowMatches =
     !search ||
@@ -528,34 +429,47 @@ export function CommandMenu({
 
   return (
     <>
-      {open && (
-        <div className="fixed inset-0 z-50 bg-black/50">
-          <div
-            ref={containerRef}
-            className={cn(
-              "fixed left-1/2 top-[15vh] -translate-x-1/2 w-full max-w-lg",
-              "rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
-              className,
-            )}
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={containerRef}
+          aria-describedby={undefined}
+          hideClose
+          motion="instant"
+          overlayClassName="fixed inset-0 z-50 bg-black/50 backdrop-blur-none transition-none"
+          overlayStyle={{
+            zIndex: 50,
+            backgroundColor: "rgb(0 0 0 / 0.5)",
+            backdropFilter: "none",
+            animation: "none",
+            transition: "none",
+          }}
+          className={cn(
+            "fixed left-1/2 top-[15vh] !z-50 !max-h-none -translate-x-1/2 !translate-y-0 !gap-0 w-full max-w-lg",
+            "rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
+            className,
+          )}
+          style={{
+            animation: "none",
+            transition: "none",
+          }}
+        >
+          <DialogTitle className="sr-only">{placeholder}</DialogTitle>
+          <CommandPrimitive
+            loop
+            shouldFilter={false}
+            className="h-auto rounded-lg"
           >
-            <CommandMenuContext.Provider
-              value={{ search, onOpenChange, containerRef, setSelectedIndex }}
-            >
+            <CommandMenuContext.Provider value={{ search, onOpenChange }}>
               {/* Search input */}
-              <div className="flex items-center border-b px-3">
-                <IconSearch className="me-2 h-4 w-4 shrink-0 opacity-50" />
-                <input
-                  ref={inputRef}
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder={placeholder}
-                  className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                />
-              </div>
+              <CommandInputPrimitive
+                ref={inputRef}
+                value={search}
+                onValueChange={setSearch}
+                placeholder={placeholder}
+              />
 
               {/* Command list */}
-              <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+              <CommandListPrimitive>
                 {dynamicResults}
                 {hasResults && filteredChildren}
 
@@ -564,21 +478,9 @@ export function CommandMenu({
                   <>
                     {hasResults && <CommandSeparator />}
                     <div className="p-1">
-                      <div
-                        className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none"
-                        onClick={openChangelog}
-                        onMouseEnter={(e) => {
-                          const items =
-                            containerRef.current?.querySelectorAll(
-                              '[role="option"]',
-                            );
-                          if (!items) return;
-                          const index = Array.from(items).indexOf(
-                            e.currentTarget,
-                          );
-                          if (index >= 0) setSelectedIndex(index);
-                        }}
-                        role="option"
+                      <CommandItemPrimitive
+                        className="cursor-pointer gap-2 py-2"
+                        onSelect={openChangelog}
                       >
                         <IconHistory className="h-4 w-4 text-muted-foreground" />
                         <span>{changelogLabel}</span>
@@ -588,7 +490,7 @@ export function CommandMenu({
                             aria-label="New updates available"
                           />
                         )}
-                      </div>
+                      </CommandItemPrimitive>
                     </div>
                   </>
                 )}
@@ -600,21 +502,9 @@ export function CommandMenu({
                       <CommandSeparator />
                     )}
                     <div className="p-1">
-                      <div
-                        className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none"
-                        onClick={handleSubmitToAgent}
-                        onMouseEnter={(e) => {
-                          const items =
-                            containerRef.current?.querySelectorAll(
-                              '[role="option"]',
-                            );
-                          if (!items) return;
-                          const index = Array.from(items).indexOf(
-                            e.currentTarget,
-                          );
-                          if (index >= 0) setSelectedIndex(index);
-                        }}
-                        role="option"
+                      <CommandItemPrimitive
+                        className="cursor-pointer gap-2 py-2"
+                        onSelect={handleSubmitToAgent}
                       >
                         <IconMessage className="h-4 w-4 text-muted-foreground" />
                         <span>
@@ -636,15 +526,15 @@ export function CommandMenu({
                             ↵
                           </span>
                         )}
-                      </div>
+                      </CommandItemPrimitive>
                     </div>
                   </>
                 )}
-              </div>
+              </CommandListPrimitive>
             </CommandMenuContext.Provider>
-          </div>
-        </div>
-      )}
+          </CommandPrimitive>
+        </DialogContent>
+      </Dialog>
 
       {hasChangelog && (
         <ChangelogDialog

package/src/client/agent-chat-adapter.ts

@@ -673,7 +673,9 @@ function contentToStructuredMessages(
     }
 
     if (isToolCallContentPart(part)) {
-      if (part.activity === true) continue;
+      if (part.activity === true || part.toolName.startsWith("agent:")) {
+        continue;
+      }
       const toolCallId = nextToolCallId();
       assistantParts.push({
         type: "tool-call",

package/src/client/app-providers.tsx

@@ -48,11 +48,11 @@
  *                              intentionally animates theme changes (e.g. content).
  */
 
+import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
 import { ThemeProvider, type Attribute } from "next-themes";
 import React from "react";
-import { Toaster } from "sonner";
 
 import { ClientOnly } from "./ClientOnly.js";
 import { DefaultSpinner } from "./DefaultSpinner.js";

package/src/client/chat/message-components.tsx

@@ -64,6 +64,10 @@ import {
 import { ThumbsFeedback } from "../observability/ThumbsFeedback.js";
 import { McpConnectionSuggestion } from "../resources/McpConnectionSuggestion.js";
 import type { ContentPart } from "../sse-event-processor.js";
+import {
+  isCallAgentToolCallShadowed,
+  shadowedCallAgentToolCallIds,
+} from "../tool-display.js";
 import { cn } from "../utils.js";
 import {
   MarkdownText,
@@ -860,6 +864,49 @@ export function assistantMessageHasUnresolvedTool(content: unknown): boolean {
   });
 }
 
+export function assistantMessageHasCompletedCustomUi(
+  content: unknown,
+): boolean {
+  if (!Array.isArray(content)) return false;
+  let lastTextIndex = -1;
+  for (let index = 0; index < content.length; index++) {
+    const part = content[index];
+    if (
+      part &&
+      typeof part === "object" &&
+      (part as { type?: unknown }).type === "text"
+    ) {
+      lastTextIndex = index;
+    }
+  }
+  let hasCompletedTool = false;
+  let lastCompletedToolIsCustomUi = false;
+  for (let index = lastTextIndex + 1; index < content.length; index++) {
+    const part = content[index];
+    if (!part || typeof part !== "object") continue;
+    const record = part as {
+      type?: unknown;
+      result?: unknown;
+      isError?: unknown;
+      activity?: unknown;
+      chatUI?: unknown;
+      mcpApp?: unknown;
+    };
+    if (
+      record.type !== "tool-call" ||
+      record.activity === true ||
+      record.result === undefined ||
+      record.isError === true
+    ) {
+      continue;
+    }
+    hasCompletedTool = true;
+    lastCompletedToolIsCustomUi =
+      record.chatUI !== undefined || record.mcpApp !== undefined;
+  }
+  return hasCompletedTool && lastCompletedToolIsCustomUi;
+}
+
 // Only the last assistant message may shimmer as "the currently running
 // tool" — an older message's dangling unresolved tool-call must never
 // shimmer once a later run is active.
@@ -870,8 +917,10 @@ export function computeActiveTailToolCallId(
   if (!isLast) return null;
   return (
     content?.reduce(
-      (latestToolCallId, part) =>
-        part.type === "tool-call" && (chatRunning || part.activity === true)
+      (latestToolCallId, part, index) =>
+        part.type === "tool-call" &&
+        !isCallAgentToolCallShadowed(content, index) &&
+        (chatRunning || part.activity === true)
           ? part.toolCallId
           : latestToolCallId,
       null as string | null,
@@ -903,12 +952,19 @@ export function shouldShowMissingFinalResponse({
   statusIsTerminal,
   hasAssistantText,
   hasUnresolvedTool,
+  hasCompletedCustomUi,
 }: {
   statusIsTerminal: boolean;
   hasAssistantText: boolean;
   hasUnresolvedTool: boolean;
+  hasCompletedCustomUi?: boolean;
 }): boolean {
-  return statusIsTerminal && !hasAssistantText && !hasUnresolvedTool;
+  return (
+    statusIsTerminal &&
+    !hasAssistantText &&
+    !hasUnresolvedTool &&
+    !hasCompletedCustomUi
+  );
 }
 
 export function shouldShowAssistantWorkSummary({
@@ -977,19 +1033,34 @@ const ALWAYS_VISIBLE_ASSISTANT_TOOLS = new Set(["connect-builder"]);
 export function isCollapsibleAssistantWorkPart(part: {
   type?: string;
   toolName?: string;
+  chatUI?: unknown;
+  mcpApp?: unknown;
 }): boolean {
   if (part.type === "reasoning") return true;
   return (
     part.type === "tool-call" &&
-    !ALWAYS_VISIBLE_ASSISTANT_TOOLS.has(part.toolName ?? "")
+    !ALWAYS_VISIBLE_ASSISTANT_TOOLS.has(part.toolName ?? "") &&
+    part.chatUI === undefined &&
+    part.mcpApp === undefined
   );
 }
 
 export function getAssistantToolSummaryInfo(
-  parts: readonly { type?: string; toolName?: string }[],
+  parts: readonly {
+    type?: string;
+    toolCallId?: string;
+    toolName?: string;
+    args?: Record<string, unknown>;
+    chatUI?: unknown;
+    mcpApp?: unknown;
+  }[],
 ): { startIndex: number; hiddenToolCount: number } {
   const toolCallIndices = parts.reduce<number[]>((indices, part, index) => {
-    if (part.type === "tool-call" && isCollapsibleAssistantWorkPart(part)) {
+    if (
+      part.type === "tool-call" &&
+      !isCallAgentToolCallShadowed(parts, index) &&
+      isCollapsibleAssistantWorkPart(part)
+    ) {
       indices.push(index);
     }
     return indices;
@@ -1012,11 +1083,23 @@ export function getAssistantToolSummaryInfo(
 function groupAssistantWorkParts(
   part: {
     type?: string;
+    toolCallId?: string;
     toolName?: string;
+    args?: Record<string, unknown>;
+    chatUI?: unknown;
+    mcpApp?: unknown;
   },
   index: number,
-  parts: readonly { type?: string; toolName?: string }[],
+  parts: readonly {
+    type?: string;
+    toolCallId?: string;
+    toolName?: string;
+    args?: Record<string, unknown>;
+    chatUI?: unknown;
+    mcpApp?: unknown;
+  }[],
 ): ["group-work"] | ["group-work", "group-ran-tools"] | null {
+  if (isCallAgentToolCallShadowed(parts, index)) return null;
   if (isCollapsibleAssistantWorkPart(part)) {
     const { startIndex } = getAssistantToolSummaryInfo(parts);
     if (isAssistantToolSummaryPart(parts, index, startIndex)) {
@@ -1028,16 +1111,29 @@ function groupAssistantWorkParts(
 }
 
 function isAssistantToolSummaryPart(
-  parts: readonly { type?: string; toolName?: string }[],
+  parts: readonly {
+    type?: string;
+    toolCallId?: string;
+    toolName?: string;
+    args?: Record<string, unknown>;
+    chatUI?: unknown;
+    mcpApp?: unknown;
+  }[],
   index: number,
   startIndex: number,
 ): boolean {
   if (startIndex < 0 || index >= startIndex) return false;
-  if (!isCollapsibleAssistantWorkPart(parts[index]!)) return false;
+  if (
+    isCallAgentToolCallShadowed(parts, index) ||
+    !isCollapsibleAssistantWorkPart(parts[index]!)
+  ) {
+    return false;
+  }
 
   let segmentStart = index;
   while (
     segmentStart > 0 &&
+    !isCallAgentToolCallShadowed(parts, segmentStart - 1) &&
     isCollapsibleAssistantWorkPart(parts[segmentStart - 1]!)
   ) {
     segmentStart--;
@@ -1046,6 +1142,7 @@ function isAssistantToolSummaryPart(
   let segmentEnd = index + 1;
   while (
     segmentEnd < startIndex &&
+    !isCallAgentToolCallShadowed(parts, segmentEnd) &&
     isCollapsibleAssistantWorkPart(parts[segmentEnd]!)
   ) {
     segmentEnd++;
@@ -1073,10 +1170,14 @@ export function AssistantMessage() {
   const hasUnresolvedTool = assistantMessageHasUnresolvedTool(msg.content);
   const responseConnectionText = messageTextFromContent(msg.content);
   const statusIsTerminal = assistantMessageStatusIsTerminal(msg);
+  const hasCompletedCustomUi = assistantMessageHasCompletedCustomUi(
+    msg.content,
+  );
   const showMissingFinalResponse = shouldShowMissingFinalResponse({
     statusIsTerminal,
     hasAssistantText: responseConnectionText.trim().length > 0,
     hasUnresolvedTool,
+    hasCompletedCustomUi,
   });
   const responseConnectionContext = latestUserMessageText(thread.messages);
   const isComplete = shouldShowAssistantMessageFooter({
@@ -1191,10 +1292,14 @@ export function AssistantMessage() {
   const hasCollapsibleWork =
     Array.isArray(msgContent) &&
     msgContent.some(
-      (p) =>
+      (p, index) =>
+        !isCallAgentToolCallShadowed(msgContent, index) &&
         (p.type !== "tool-call" || p.activity !== true) &&
         isCollapsibleAssistantWorkPart(p),
     );
+  const shadowedToolCallIds = Array.isArray(msgContent)
+    ? shadowedCallAgentToolCallIds(msgContent)
+    : new Set<string>();
   const activeTailToolCallId = computeActiveTailToolCallId(msgContent, {
     chatRunning,
     isLast,
@@ -1243,6 +1348,7 @@ export function AssistantMessage() {
               case "reasoning":
                 return <ReasoningMessagePart />;
               case "tool-call":
+                if (shadowedToolCallIds.has(part.toolCallId)) return null;
                 return part.toolUI ? (
                   <ToolActivityPresentation
                     toolName={part.toolName}