@agent-native/core 0.35.3 → 0.37.0

package/dist/client/AssistantChat.js

@@ -6,7 +6,7 @@ import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { createAgentChatAdapter, } from "./agent-chat-adapter.js";
 import { appendAgentChatContextToMessage, formatAgentChatContextItemsForPrompt, normalizeAgentChatContextItem, publishAgentChatContextItems, refreshAgentChatContext, } from "./agent-chat.js";
-import { useAgentDynamicSuggestions, } from "./dynamic-suggestions.js";
+import { useAgentDynamicSuggestionsResult, } from "./dynamic-suggestions.js";
 import { initialSmoothStreamingGraphemeCount, SMOOTH_STREAMING_COMMIT_INTERVAL_MS, smoothStreamingPunctuationDelayMs, smoothStreamingRevealCount, splitStreamingTextGraphemes, } from "../shared/streaming-text-smoothing.js";
 import { getActiveRun } from "./active-run-state.js";
 import { AgentAutoContinueSignal, readSSEStreamRaw, } from "./sse-event-processor.js";
@@ -19,6 +19,7 @@ import { TextAttachmentAdapter } from "./composer/attachment-accept.js";
 import { AgentTaskCard } from "./AgentTaskCard.js";
 import { ConnectBuilderCard } from "./ConnectBuilderCard.js";
 import { McpAppRenderer } from "./mcp-apps/McpAppRenderer.js";
+import { humanizeToolLabelText, humanizeToolName } from "./tool-display.js";
 import { useBuilderConnectFlow } from "./settings/useBuilderStatus.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./components/ui/tooltip.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./components/ui/dropdown-menu.js";
@@ -114,7 +115,7 @@ function getFileDataURL(file) {
 // images on the client before we ever serialize them.
 const MAX_IMAGE_BYTES = 4 * 1024 * 1024;
 const MAX_IMAGE_DIMENSION = 2048;
-const SHOW_AGENT_ACTIVITY_STEPS = false;
+const SHOW_AGENT_ACTIVITY_STEPS = true;
 function loadImage(url) {
     return new Promise((resolve, reject) => {
         const img = new Image();
@@ -867,9 +868,9 @@ function useSmoothStreamingText(targetText, streaming, resetKey) {
         }
         const visibleNoLongerMatchesTarget = visibleTextRef.current.length > 0 &&
             !targetText.startsWith(visibleTextRef.current);
-        if (keyChanged ||
-            visibleNoLongerMatchesTarget ||
-            visibleCountRef.current > targetGraphemes.length) {
+        if (visibleNoLongerMatchesTarget ||
+            visibleCountRef.current > targetGraphemes.length ||
+            (keyChanged && visibleTextRef.current.length === 0)) {
             commitVisibleCount(initialSmoothStreamingGraphemeCount(targetGraphemes));
             lastCommitAtRef.current = 0;
             pauseUntilRef.current = 0;
@@ -963,15 +964,6 @@ function stringifyToolValue(value, pretty = false) {
         return String(value ?? "");
     }
 }
-function toolArgsPreview(args) {
-    return Object.entries(args)
-        .map(([key, value]) => {
-        const singleLine = stringifyToolValue(value).replace(/\s+/g, " ").trim();
-        const preview = singleLine.length > 96 ? `${singleLine.slice(0, 96)}...` : singleLine;
-        return `${key}=${preview}`;
-    })
-        .join(", ");
-}
 function looksLikeSql(text) {
     return /^\s*(select|with|insert|update|delete|merge|create|alter|drop|explain|declare|begin)\b/i.test(text);
 }
@@ -1195,7 +1187,6 @@ function ToolCallDisplay({ toolName, argsText, args, result, mcpApp, isRunning,
             // Fall through to default pill rendering
         }
     }
-    const argsStr = isAgentCall ? "" : toolArgsPreview(args);
     const inputPayload = hasArgs ? toolInputPayload(toolName, args) : null;
     const resultPayload = toolResultPayload(result);
     const displayName = isAgentCall
@@ -1204,14 +1195,14 @@ function ToolCallDisplay({ toolName, argsText, args, result, mcpApp, isRunning,
             : isAgentError
                 ? `Error asking ${agentName}`
                 : `Asked ${agentName}`
-        : toolName;
+        : humanizeToolName(toolName);
     const canExpand = isAgentCall
         ? hasStreamText
         : hasArgs || result !== undefined;
     const isExpanded = isAgentCall ? hasStreamText && expanded : expanded;
     return (_jsxs("div", { className: "my-1 overflow-hidden", children: [mcpApp && _jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" }), _jsxs("button", { onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-mono w-full text-left overflow-hidden", isRunning
                     ? "bg-muted text-muted-foreground"
-                    : "bg-muted text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "shrink-0", children: isRunning ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "h-3 w-3 text-destructive" })) : result !== undefined ? (_jsx(IconCheck, { className: "h-3 w-3 text-emerald-500" })) : (_jsx(IconSquareFilled, { className: "h-3 w-3 text-muted-foreground" })) }), _jsxs("span", { className: "truncate min-w-0", children: [_jsx("span", { className: "font-medium", children: displayName }), argsStr && _jsxs("span", { className: "opacity-60 ml-1", children: ["(", argsStr, ")"] })] }), canExpand && (_jsx(IconChevronDown, { className: cn("ml-auto h-3 w-3 shrink-0 opacity-40", isExpanded && "rotate-180") }))] }), isExpanded && isAgentCall && hasStreamText && (_jsx("div", { ref: streamRef, className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground break-words max-h-48 overflow-y-auto agent-markdown prose prose-sm prose-invert max-w-none", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, urlTransform: markdownUrlTransform, children: agentStreamText }) })), isExpanded && !isAgentCall && (hasArgs || result !== undefined) && (_jsxs("div", { className: "mt-1 space-y-2 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children: [inputPayload && _jsx(ToolDetailViewer, { payload: inputPayload }), resultPayload && _jsx(ToolDetailViewer, { payload: resultPayload })] }))] }));
+                    : "bg-muted text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "shrink-0", children: isRunning ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "h-3 w-3 text-destructive" })) : result !== undefined ? (_jsx(IconCheck, { className: "h-3 w-3 text-emerald-500" })) : (_jsx(IconSquareFilled, { className: "h-3 w-3 text-muted-foreground" })) }), _jsx("span", { className: "truncate min-w-0", children: _jsx("span", { className: "font-medium", children: displayName }) }), canExpand && (_jsx(IconChevronDown, { className: cn("ml-auto h-3 w-3 shrink-0 opacity-40", isExpanded && "rotate-180") }))] }), isExpanded && isAgentCall && hasStreamText && (_jsx("div", { ref: streamRef, className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground break-words max-h-48 overflow-y-auto agent-markdown prose prose-sm prose-invert max-w-none", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, urlTransform: markdownUrlTransform, children: agentStreamText }) })), isExpanded && !isAgentCall && (hasArgs || result !== undefined) && (_jsxs("div", { className: "mt-1 space-y-2 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground", children: [inputPayload && _jsx(ToolDetailViewer, { payload: inputPayload }), resultPayload && _jsx(ToolDetailViewer, { payload: resultPayload })] }))] }));
 }
 function ToolCallFallback({ toolName, args, argsText, result, ...rest }) {
     const chatRunning = React.useContext(ChatRunningContext);
@@ -1958,13 +1949,16 @@ function ensureMessageMetadata(repo) {
 // Re-export for backwards compatibility
 import { extractThreadMeta, normalizeThreadRepository, } from "../agent/thread-data-builder.js";
 export { extractThreadMeta };
+function EmptyStateSuggestionSkeleton() {
+    return (_jsxs("div", { className: "flex w-full max-w-[280px] flex-col gap-1.5", "aria-hidden": "true", children: [_jsx("div", { className: "h-12 w-full rounded-lg border border-border bg-muted/60 animate-pulse" }), _jsx("div", { className: "h-12 w-full rounded-lg border border-border bg-muted/60 animate-pulse" }), _jsx("div", { className: "h-12 w-full rounded-lg border border-border bg-muted/60 animate-pulse" })] }));
+}
 const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, dynamicSuggestions, emptyStateAddon, showHeader = true, onSwitchToCli, className, apiUrl, tabId, browserTabId, threadId, contextScope, isActiveComposer = true, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, composerAreaClassName, composerPlaceholder, composerLayoutVariant = "default", centerComposerWhenEmpty = false, emptyStateDisplay = "default", composerToolbarSlot, composerExtraActionButton, composerDisabled = false, composerDisabledPlaceholder, isNewThread, onSlashCommand, execMode, onExecModeChange, planModeDisabled, planModeDisabledReason, selectedModel, defaultModel, selectedEngine, selectedEffort, availableModels, onModelChange, onEffortChange, onForkChat, onConnectProvider, plusMenuMode = "full", providerStatusChecksEnabled = true, loadHistoryRepository, historyReloadKey, externalStreaming = false, }, ref) {
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
     const composerRuntime = useComposerRuntime();
     const isRuntimeRunning = thread.isRunning;
     const messages = thread.messages;
-    const resolvedSuggestions = useAgentDynamicSuggestions({
+    const { suggestions: resolvedSuggestions, isLoading: suggestionsLoading } = useAgentDynamicSuggestionsResult({
         staticSuggestions: suggestions,
         dynamicSuggestions,
         browserTabId,
@@ -2837,16 +2831,17 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                 detail.label.trim()) {
                 const label = detail.label.trim();
                 const tool = detail.tool?.trim() || undefined;
-                setActivityLabel(label);
+                const displayLabel = humanizeToolLabelText(label, tool);
+                setActivityLabel(displayLabel);
                 setActivitySteps((prev) => {
                     const last = prev[prev.length - 1];
-                    if (last?.label === label && last.tool === tool)
+                    if (last?.label === displayLabel && last.tool === tool)
                         return prev;
                     return [
                         ...prev,
                         {
                             id: `${Date.now()}-${++activityStepIdCounter.current}`,
-                            label,
+                            label: displayLabel,
                             ...(tool ? { tool } : {}),
                         },
                     ].slice(-6);
@@ -3188,6 +3183,8 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         !isComposerDisabled &&
         !showRunningInUI;
     const canImplementPlan = showPlanModeCallout && latestAssistantWasPlan;
+    const contextXRayEnabled = Boolean(threadId &&
+        (messages.length > 0 || isReconnecting || reconnectContent.length > 0));
     const handleImplementPlan = useCallback(() => {
         onExecModeChange?.("build");
         void addToQueue("Implement the plan.", undefined, undefined, undefined, "act");
@@ -3254,12 +3251,13 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                         ? "text-xs text-background bg-foreground hover:opacity-90 px-3 py-1.5 rounded-md"
                                                         : "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Refresh chat" })] })] })) : missingApiKey && messages.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center h-full px-2", children: _jsx(BuilderSetupCard, { onConnected: handleBuilderConnected, bouncePulse: missingKeyBouncePulse }) })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : messages.length === 0 && !isReconnecting ? (_jsxs("div", { className: cn("agent-empty-state", emptyStateDisplay === "hidden"
                                         ? "sr-only"
-                                        : "flex h-full flex-col items-center justify-center gap-4 px-4 py-16"), children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: _jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" }) }), _jsx("p", { className: "text-sm text-muted-foreground text-center max-w-[240px]", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, resolvedSuggestions && resolvedSuggestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-1.5 w-full max-w-[280px]", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
+                                        : "flex h-full flex-col items-center justify-center gap-4 px-4 py-16"), children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: _jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" }) }), _jsx("p", { className: "sr-only", children: emptyStateText ?? "How can I help you?" }), emptyStateAddon, suggestionsLoading ? (_jsx(EmptyStateSuggestionSkeleton, {})) : resolvedSuggestions &&
+                                            resolvedSuggestions.length > 0 ? (_jsx("div", { className: "flex flex-col gap-1.5 w-full max-w-[280px]", children: resolvedSuggestions.map((suggestion) => (_jsx("button", { onClick: () => {
                                                     threadRuntime.append({
                                                         role: "user",
                                                         content: [{ type: "text", text: suggestion }],
                                                     });
-                                                }, className: "w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground", children: suggestion }, suggestion))) }))] })) : (_jsxs("div", { className: "agent-thread-content flex flex-col gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(ThreadPrimitive.Messages, { components: {
+                                                }, className: "w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground", children: suggestion }, suggestion))) })) : null] })) : (_jsxs("div", { className: "agent-thread-content flex flex-col gap-4 px-4 py-4", children: [_jsx(AssistantMessageListErrorBoundary, { resetKey: messageListResetKey, children: _jsx(ThreadPrimitive.Messages, { components: {
                                                     UserMessage,
                                                     AssistantMessage,
                                                 } }) }), missingApiKey && (_jsx(BuilderSetupCard, { onConnected: handleBuilderConnected, bouncePulse: missingKeyBouncePulse })), visibleLoopLimit && !showRunningInUI && (_jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
@@ -3297,7 +3295,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                     ? "Reconnecting"
                                     : SHOW_AGENT_ACTIVITY_STEPS
                                         ? (activityLabel ?? "Thinking")
-                                        : "Thinking" })), _jsx(ContextMeter, { threadId: threadId }), _jsxs(AgentComposerFrame, { layoutVariant: composerLayoutVariant, className: cn(composerAreaClassName, missingApiKey && "cursor-pointer", isComposerDisabled && "opacity-70"), onClick: missingApiKey
+                                        : "Thinking" })), _jsxs(AgentComposerFrame, { layoutVariant: composerLayoutVariant, className: cn(composerAreaClassName, missingApiKey && "cursor-pointer", isComposerDisabled && "opacity-70"), onClick: missingApiKey
                                     ? () => setMissingKeyBouncePulse((p) => p + 1)
                                     : undefined, children: [_jsx(ComposerAttachmentPreviewStrip, {}), _jsx(TiptapComposer, { focusRef: tiptapRef, disabled: isComposerDisabled, placeholder: missingApiKey
                                             ? "Connect an AI engine above to start chatting…"
@@ -3310,7 +3308,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                         : "Send a follow-up..."
                                                     : composerPlaceholder, onSubmit: isRunning || composerContextItems.length > 0
                                             ? (text, references, attachments, options) => void addToQueue(text, undefined, references.length > 0 ? references : undefined, attachments, undefined, options?.intent ?? "immediate", undefined, true)
-                                            : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason, selectedModel: selectedModel ?? defaultModel, selectedEffort: selectedEffort, availableModels: availableModels, onModelChange: onModelChange, onEffortChange: onEffortChange, onConnectProvider: onConnectProvider, toolbarSlot: composerToolbarSlot, contextItems: composerContextItems, onRemoveContextItem: removeComposerContextItem, plusMenuMode: plusMenuMode, layoutVariant: composerLayoutVariant, providerConnectStatusEnabled: providerStatusChecksEnabled, draftScope: threadId || tabId, interceptBuildRequestsForBuilder: true, extraActionButton: composerExtraActionButton || showRunningInUI ? (_jsxs(_Fragment, { children: [composerExtraActionButton, showRunningInUI && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => {
+                                            : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason, selectedModel: selectedModel ?? defaultModel, selectedEffort: selectedEffort, availableModels: availableModels, onModelChange: onModelChange, onEffortChange: onEffortChange, onConnectProvider: onConnectProvider, toolbarSlot: composerToolbarSlot, contextItems: composerContextItems, onRemoveContextItem: removeComposerContextItem, plusMenuMode: plusMenuMode, layoutVariant: composerLayoutVariant, providerConnectStatusEnabled: providerStatusChecksEnabled, draftScope: threadId || tabId, interceptBuildRequestsForBuilder: true, extraActionButton: contextXRayEnabled ||
+                                            composerExtraActionButton ||
+                                            showRunningInUI ? (_jsxs(_Fragment, { children: [contextXRayEnabled && (_jsx(ContextMeter, { threadId: threadId })), composerExtraActionButton, showRunningInUI && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => {
                                                                     // Nuclear stop: flip forceStopped so isRunning is false
                                                                     // immediately. This unblocks submission even if the
                                                                     // runtime or reconnect state is stuck.