@agent-native/core 0.117.2 → 0.118.1

package/corpus/core/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/corpus/core/src/client/RunStuckBanner.tsx

@@ -45,11 +45,9 @@ export interface RunStuckBannerProps {
    * `chatHandle.hasInFlightWork()`. "No progress" for a stretch of time does
    * not mean the run is dead: a long provider query or a cross-app `call
    * agent` can legitimately emit nothing for minutes. When this returns
-   * true, Retry (which aborts the run) is hidden — aborting would destroy
-   * real in-flight work and re-execute the same long call from scratch.
-   * Only Cancel, an explicit destructive choice, remains available. Checked
-   * fresh on every render; omit to keep the unconditional Retry/Cancel
-   * behavior.
+   * true, the stuck warning is hidden — aborting would destroy real in-flight
+   * work and re-execute the same long call from scratch. Checked fresh on every
+   * render; omit to keep the unconditional Retry/Cancel behavior.
    */
   hasInFlightWork?: () => boolean;
   /**
@@ -191,9 +189,9 @@ export function RunStuckBanner({
   const backgroundWorkerStillAlive = isFreshBackgroundWorker(state);
   // A live tool call or sub-agent (A2A) call means "no progress" is not the
   // same as "dead" — the process is genuinely still doing the user's work.
-  // Retry aborts the run, so it must not be offered as the (implicitly
-  // safe-looking) primary action while real work is in flight; see the
-  // `hasInFlightWork` prop doc comment. Re-checked on every render (the
+  // Retry aborts the run, so the stuck warning stays out of the way while real
+  // work is in flight; see the `hasInFlightWork` prop doc comment. Re-checked
+  // on every render (the
   // underlying source mutates in place as tool/agent-call events stream in),
   // which is why this is a function prop rather than a plain boolean.
   //
@@ -308,7 +306,18 @@ export function RunStuckBanner({
     threadId,
   ]);
 
-  if (!state.isStuck || !state.runId) return null;
+  // A stale progress timestamp is not actionable while the server is still
+  // heartbeating or an unresolved tool/A2A call is known to be running. Keep
+  // those healthy long-running states in the chat's inline activity UI; the
+  // warning is reserved for runs that may actually need recovery.
+  if (
+    !state.isStuck ||
+    !state.runId ||
+    backgroundWorkerStillAlive ||
+    inFlightWork
+  ) {
+    return null;
+  }
 
   const handleCancel = async () => {
     if (!state.runId || busy.type !== "none") return;
@@ -323,9 +332,9 @@ export function RunStuckBanner({
   };
 
   const handleRetry = async () => {
-    // Defense in depth: Retry is hidden while a background worker is still
-    // heartbeating or work is explicitly in flight (see render below). Guard
-    // the handler too so this path cannot abort a run the server says is alive.
+    // Defense in depth: the banner is hidden while a background worker is
+    // still heartbeating or work is explicitly in flight. Guard the handler
+    // too so a render transition cannot abort a run the server says is alive.
     if (
       !state.runId ||
       busy.type !== "none" ||
@@ -350,8 +359,6 @@ export function RunStuckBanner({
   const stuckSeconds =
     state.stuckSinceMs != null ? Math.floor(state.stuckSinceMs / 1000) : null;
 
-  const stillWorking = backgroundWorkerStillAlive || inFlightWork;
-
   return (
     <div
       role="status"
@@ -368,51 +375,36 @@ export function RunStuckBanner({
       />
       <div className="flex min-w-0 flex-1 flex-col gap-1.5">
         <div className="leading-snug">
-          <span className="font-medium">
-            {stillWorking
-              ? "The agent is still working."
-              : "This chat looks stuck."}
-          </span>{" "}
+          <span className="font-medium">This chat looks stuck.</span>{" "}
           <span className="text-muted-foreground">
             No progress
-            {stuckSeconds != null ? ` for ${stuckSeconds}s` : ""}.{" "}
-            {inFlightWork
-              ? "It's waiting on a call to another app or a long tool — canceling will stop that work."
-              : backgroundWorkerStillAlive
-                ? "The background worker is still alive; large updates can take a few minutes."
-                : "The agent may have hit a server timeout or lost its connection."}
+            {stuckSeconds != null ? ` for ${stuckSeconds}s` : ""}. The agent may
+            have hit a server timeout or lost its connection.
             {autoRetry && busyType === "retry"
               ? " Retrying automatically now."
               : ""}
           </span>
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          {stillWorking ? null : (
-            <button
-              type="button"
-              onClick={handleRetry}
-              disabled={busyType !== "none"}
-              className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md bg-foreground px-2.5 text-[11px] font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {busyType === "retry" ? (
-                <IconLoader2
-                  size={12}
-                  className="animate-spin"
-                  aria-hidden="true"
-                />
-              ) : null}
-              Retry
-            </button>
-          )}
+          <button
+            type="button"
+            onClick={handleRetry}
+            disabled={busyType !== "none"}
+            className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md bg-foreground px-2.5 text-[11px] font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busyType === "retry" ? (
+              <IconLoader2
+                size={12}
+                className="animate-spin"
+                aria-hidden="true"
+              />
+            ) : null}
+            Retry
+          </button>
           <button
             type="button"
             onClick={handleCancel}
             disabled={busyType !== "none"}
-            title={
-              inFlightWork
-                ? "Stop the in-progress run. Work that hasn't finished will be lost."
-                : undefined
-            }
             className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-60"
           >
             {busyType === "cancel" ? (

package/corpus/core/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/corpus/core/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/corpus/core/src/client/chat/action-chat-ui-surface.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER } from "../../action-ui.js";
+import { cn } from "../utils.js";
+import type { ToolRendererContext } from "./tool-render-registry.js";
+
+export function ActionChatUiSurface({
+  context,
+  isBuiltinDataWidget,
+  children,
+}: {
+  context: ToolRendererContext;
+  isBuiltinDataWidget: boolean;
+  children: ReactNode;
+}) {
+  if (!context.chatUI || isBuiltinDataWidget) return <>{children}</>;
+
+  const containsPaddedIframe =
+    context.chatUI.renderer === ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER;
+
+  return (
+    <div
+      data-agent-native-custom-ui=""
+      className={cn(
+        "my-3 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm empty:hidden",
+        !containsPaddedIframe && "p-3",
+      )}
+    >
+      {children}
+    </div>
+  );
+}