4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T4109,import React, { memo, useState, useMemo, useCallback } from 'react'; import { cn } from '@/lib/utils'; import { MessageCircleCode, CheckCircle2, XCircle, Clock, AlertCircle, CheckCircle, CircleDashed } from 'lucide-react'; import { Spinner } from '@/components/ui/spinner'; import { Button } from '@/components/ui/button'; import { CollapsibleSection } from '@/components/ui/collapsible-section'; import { ToolInvocationStatusPending, ToolInvocationStatusInProgress, ToolInvocationStatusAwaitingInput, ToolInvocationStatusAwaitingApproval, ToolInvocationStatusCompleted, ToolInvocationStatusFailed, ToolInvocationStatusCancelled, ToolTypeApp, ToolInvocationDTO, } from '@inferencesh/sdk'; import { useAgentActions, useAgentClient } from '@inferencesh/sdk/agent'; import { WidgetRenderer } from '@/components/infsh/agent/widget-renderer'; import { parseWidget, type WidgetAction, type WidgetFormData } from '@/components/infsh/agent/widget-types'; import { CredentialRequirementCard } from '@/components/infsh/agent/credential-requirement-card'; import { TaskOutputWrapper } from '@/components/infsh/task/task-output-wrapper'; import { Markdown } from '@/lib/pretext-md/react'; // Tool finish constants const ToolFinishStatusSucceeded = 'succeeded'; const ToolFinishStatusFailed = 'failed'; const ToolFinishStatusCancelled = 'cancelled'; // Types interface ToolFinish { status: string; result?: unknown; error?: string; } interface ToolInvocationProps { invocation: ToolInvocationDTO; className?: string; defaultOpen?: boolean; } // ============================================================================ // Finish Block - Special display for finish tool marking end of chat // ============================================================================ const FinishBlock = memo(function FinishBlock({ finish, isActive = false, }: { finish?: ToolFinish | null isActive?: boolean }) { const getStatusIcon = () => { if (isActive) { return } switch (finish?.status) { case ToolFinishStatusSucceeded: return case ToolFinishStatusFailed: return case ToolFinishStatusCancelled: return default: return } } const getStatusText = () => { if (isActive) return 'finishing' switch (finish?.status) { case ToolFinishStatusSucceeded: return 'completed' case ToolFinishStatusFailed: return 'failed' case ToolFinishStatusCancelled: return 'cancelled' default: return 'completed' } } const getLineColor = () => { switch (finish?.status) { case ToolFinishStatusFailed: return 'bg-red-400/30' case ToolFinishStatusCancelled: return 'bg-muted-foreground/30' default: return 'bg-muted-foreground/20' } } const resultMessage = finish?.result && typeof finish.result === 'string' && !isActive ? finish.result.toLowerCase() : null; return (

{getStatusIcon()} {getStatusText()}

{resultMessage && ( )}

) }) /** * ToolInvocation - Single tool call display with widget and task output support * * @example * ```tsx * * ``` */ export const ToolInvocation = memo(function ToolInvocation({ invocation, className, defaultOpen = false, }: ToolInvocationProps) { // Parse widget from result or data - moved up to check for auto-open const widget = useMemo(() => { // Try to parse from widget field first if (invocation.widget) { return parseWidget(invocation.widget); } // Try to parse from result if (invocation.result) { return parseWidget(invocation.result); } return null; }, [invocation.widget, invocation.result]); // Default to open for awaiting approval so users can see what they're approving // Also default to open for widgets so users can see them immediately const isAwaitingApprovalStatus = invocation.status === ToolInvocationStatusAwaitingApproval; const [isOpen, setIsOpen] = useState(defaultOpen || isAwaitingApprovalStatus || !!widget); const { submitToolResult, approveTool, rejectTool, alwaysAllowTool } = useAgentActions(); // Get client for TaskOutputWrapper const client = useAgentClient(); // Tool names are now direct (no type prefix) - use as-is const functionName = invocation.function?.name || 'tool'; const status = invocation.status; const isActive = status === ToolInvocationStatusInProgress || status === ToolInvocationStatusAwaitingInput || status === ToolInvocationStatusPending; // Check if this is an app tool with an execution_id (task) const isAppTool = invocation.type === ToolTypeApp; // Try to get task ID from execution_id, or parse from result as fallback const taskId = useMemo(() => { // First try the execution_id field if (invocation.execution_id) { return invocation.execution_id; } // Fallback: try to parse task ID from result text // Result format: "Task {task_id} {app_name} completed with output: ..." if (isAppTool && typeof invocation.result === 'string') { const match = invocation.result.match(/^Task\s+([a-z0-9]+)\s+/); if (match) { return match[1]; } } return null; }, [invocation.execution_id, invocation.result, isAppTool]); const hasTaskOutput = isAppTool && taskId; // Check if this is a finish tool - render with special FinishBlock component const isFinishTool = functionName === 'finish'; // Parse finish data from invocation.data (where backend stores ToolFinish) const finishData = useMemo((): ToolFinish | null => { if (!isFinishTool) return null; // Try to parse from data field (where backend stores structured ToolFinish) if (invocation.data) { try { // data might be a string or already parsed object const data = typeof invocation.data === 'string' ? JSON.parse(invocation.data) : invocation.data; // Check if it looks like a ToolFinish (has status field) if (data && typeof data.status === 'string') { return data as ToolFinish; } } catch { // Not valid JSON or not a ToolFinish } } // Fallback: try to parse from arguments (for in-progress invocations) if (invocation.function?.arguments) { const args = invocation.function.arguments; if (args.status && typeof args.status === 'string') { return { status: args.status as string, result: args.result as string | undefined, }; } } return null; }, [isFinishTool, invocation.data, invocation.function?.arguments]); // Check if this tool invocation is blocked on credential requirements const credentialRequirementErrors = useMemo(() => { if (status !== ToolInvocationStatusAwaitingInput || !invocation.data) return null; try { const data = typeof invocation.data === 'string' ? JSON.parse(invocation.data) : invocation.data; if (data?.requirement_errors && Array.isArray(data.requirement_errors)) { return data.requirement_errors; } } catch { // Not requirement data } return null; }, [status, invocation.data]); const statusIcon = useMemo(() => { switch (status) { case ToolInvocationStatusPending: case ToolInvocationStatusInProgress: return ; case ToolInvocationStatusAwaitingInput: case ToolInvocationStatusAwaitingApproval: return ; case ToolInvocationStatusCompleted: return ; case ToolInvocationStatusFailed: return ; case ToolInvocationStatusCancelled: return ; default: return ; } }, [status]); const statusText = useMemo(() => { switch (status) { case ToolInvocationStatusPending: return 'pending'; case ToolInvocationStatusInProgress: return 'running'; case ToolInvocationStatusAwaitingInput: return 'awaiting input'; case ToolInvocationStatusAwaitingApproval: return 'awaiting approval'; case ToolInvocationStatusCompleted: return 'completed'; case ToolInvocationStatusFailed: return 'failed'; case ToolInvocationStatusCancelled: return 'cancelled'; default: return ''; } }, [status]); // Handle widget actions // - For awaiting_input: Submit tool result to continue current turn // - For completed: Send new message with action context (e.g., "Create Variation" on finished images) const handleWidgetAction = useCallback(async (action: WidgetAction, formData?: WidgetFormData) => { if (status !== ToolInvocationStatusAwaitingInput) return; if (!submitToolResult) return; try { await submitToolResult(invocation.id, JSON.stringify({ action, form_data: formData })); } catch (error) { console.error('[ToolInvocation] Failed to submit widget action:', error); } }, [invocation.id, status, submitToolResult]); // Handle approve/reject for HIL approval (separate from widget submission) const handleApprove = useCallback(async () => { try { await approveTool(invocation.id); } catch (error) { console.error('[ToolInvocation] Failed to approve:', error); } }, [invocation.id, approveTool]); const handleReject = useCallback(async () => { try { await rejectTool(invocation.id); } catch (error) { console.error('[ToolInvocation] Failed to reject:', error); } }, [invocation.id, rejectTool]); const handleAlwaysAllow = useCallback(async () => { try { await alwaysAllowTool(invocation.id, functionName); } catch (error) { console.error('[ToolInvocation] Failed to always-allow:', error); } }, [invocation.id, functionName, alwaysAllowTool]); const hasArgs = invocation.function?.arguments && Object.keys(invocation.function.arguments).length > 0; // Note: hasResult only applies when there's no widget (widgets are handled separately) const hasResult = !!invocation.result && !widget && !hasTaskOutput; const isWidgetInteractive = status === ToolInvocationStatusAwaitingInput; // For finish tool with standard schema (has status field), use custom FinishBlock // For custom output schemas, fall through to widget rendering if (isFinishTool && (finishData || isActive)) { return ( ); } // For awaiting approval, show approval UI if (isAwaitingApprovalStatus) { // If there's a widget, use it if (widget) { return (

); } // Otherwise show default approval UI with buttons in footer return (

{/* Header */}

{statusIcon} {functionName} {statusText}

{/* Arguments */} {hasArgs && (

arguments:

                {JSON.stringify(invocation.function?.arguments, null, 2)}

)} {/* Footer with action buttons */}

); } // For tools blocked on credential requirements, show the connect/add-permissions card if (credentialRequirementErrors) { return ( ); } // For app tools with task output, show the TaskOutputWrapper if (hasTaskOutput) { return (

); } const submittedData = useMemo(() => { if (!widget || isWidgetInteractive || !invocation.result) return undefined; try { const parsed = JSON.parse(invocation.result); return parsed?.form_data as WidgetFormData | undefined; } catch { return undefined; } }, [widget, isWidgetInteractive, invocation.result]); // Render widget if present if (widget) { return (

); } return (

{hasArgs && (

arguments:

              {JSON.stringify(invocation.function?.arguments, null, 2)}

)} {hasResult && (

result:

              {typeof invocation.result === 'string'
                ? invocation.result
                : JSON.stringify(invocation.result, null, 2)}

)}

); }); ToolInvocation.displayName = 'ToolInvocation'; 52:T1358,import React, { memo, useState } from 'react'; import { cn } from '@/lib/utils'; import { ToolInvocation } from '@/components/infsh/agent/tool-invocation'; import { ToolInvocationStatusAwaitingInput, ToolInvocationStatusAwaitingApproval, ToolInvocationStatusFailed, ToolInvocationStatusCompleted, type ChatMessageDTO, type ToolInvocationDTO, } from '@inferencesh/sdk'; import { ChevronRight } from 'lucide-react'; const COLLAPSE_THRESHOLD = 3; // Collapsed CollapsibleSection trigger height const TOOL_ROW_HEIGHT = 20 // Collapse toggle button: text-xs + icon + gap const COLLAPSE_BUTTON_HEIGHT = 20 // space-y-1 gap between tool rows const TOOL_GAP = 4 // Finish block: my-6 (48px) + divider row (~24px) + result card (~48px) const FINISH_BLOCK_HEIGHT = 120 // Approval UI: header + arguments + buttons const APPROVAL_HEIGHT = 100 // Widget: variable, but reasonable default (RO corrects) const WIDGET_HEIGHT = 200 // Artifact embed: header row + 360px sandboxed frame inside the widget card const ARTIFACT_WIDGET_HEIGHT = 440 /** * Returns the predicted height of a single tool invocation. * Accounts for different render paths: finish, widget, approval, regular. */ function measureSingleTool(inv: ToolInvocationDTO): number { // Finish tool if (inv.function?.name === 'finish') return FINISH_BLOCK_HEIGHT // Widget (default open, variable height) if (inv.widget) { if (inv.widget.components?.some((c) => c.component === 'Artifact')) return ARTIFACT_WIDGET_HEIGHT return WIDGET_HEIGHT } // Awaiting approval (expanded by default with buttons) if (inv.status === ToolInvocationStatusAwaitingApproval) return APPROVAL_HEIGHT // Regular collapsed row return TOOL_ROW_HEIGHT } /** * Returns the predicted height of a tool invocations section. * Components own their measurement — strategy just calls this. */ export function measureToolInvocations(invocations: ToolInvocationDTO[] | undefined): number { if (!invocations?.length) return 0 const count = invocations.length if (count < COLLAPSE_THRESHOLD) { // All shown individually let height = 0 for (const inv of invocations) { height += measureSingleTool(inv) + TOOL_GAP } return height - TOOL_GAP // no trailing gap } // Prominent (needs attention) shown individually + collapse button for rest let height = 0 let collapsibleCount = 0 for (const inv of invocations) { if (needsAttention(inv)) { height += measureSingleTool(inv) + TOOL_GAP } else { collapsibleCount++ } } if (collapsibleCount > 0) height += COLLAPSE_BUTTON_HEIGHT return height } function needsAttention(inv: ToolInvocationDTO): boolean { return inv.status === ToolInvocationStatusAwaitingInput || inv.status === ToolInvocationStatusAwaitingApproval || inv.status === ToolInvocationStatusFailed || !!inv.widget; } interface ToolInvocationsProps { message: ChatMessageDTO; className?: string; } export const ToolInvocations = memo(function ToolInvocations({ message, className, }: ToolInvocationsProps) { const invocations = message.tool_invocations; const [expanded, setExpanded] = useState(false); if (!invocations || invocations.length === 0) { return null; } if (invocations.length < COLLAPSE_THRESHOLD) { return (

{invocations.map((inv, idx) => ( ))}

); } const prominent: ToolInvocationDTO[] = []; const collapsible: ToolInvocationDTO[] = []; for (const inv of invocations) { (needsAttention(inv) ? prominent : collapsible).push(inv); } const completedCount = collapsible.filter(inv => inv.status === ToolInvocationStatusCompleted).length; const runningCount = collapsible.length - completedCount; const summary = runningCount > 0 ? `${completedCount} completed, ${runningCount} running` : `${collapsible.length} tool calls`; return (

{prominent.map((inv, idx) => ( ))} {collapsible.length > 0 && ( <> {expanded && (

{collapsible.map((inv, idx) => ( ))}

)} )}

); }); ToolInvocations.displayName = 'ToolInvocations'; 53:T1141,import React from 'react'; import { cn } from '@/lib/utils'; import { AlertTriangle, ExternalLink, Shield } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { credentialGrantPath } from '@/lib/route'; export interface RequirementError { type: string; key: string; message: string; action?: { type: string; provider: string; provider_name?: string; scopes?: string[]; }; } interface CredentialRequirementCardProps { errors: RequirementError[]; /** Tool names that are blocked (e.g. ["gmail_list_messages", "calendar_list_events"]) */ toolNames?: string[]; className?: string; } /** * Compact inline card shown in agent chat when tool invocations are blocked on * a missing credential or scopes. The backend automatically * retries blocked tools when the user connects. */ export const CredentialRequirementCard = React.memo(function CredentialRequirementCard({ errors, toolNames, className, }: CredentialRequirementCardProps) { // Group by provider, collect all scopes const providers = new Map(); for (const err of errors) { const provider = err.action?.provider; if (!provider) continue; if (!providers.has(provider)) { providers.set(provider, { name: err.action?.provider_name || provider, isConnect: err.action?.type === 'connect', scopes: [], }); } const entry = providers.get(provider)!; if (err.action?.scopes) { for (const scope of err.action.scopes) { if (!entry.scopes.includes(scope)) { entry.scopes.push(scope); } } } } const providerEntries = Array.from(providers.entries()); if (providerEntries.length === 0) return null; const isSingleConnect = providerEntries.length === 1 && providerEntries[0][1].isConnect; // Format tool names for display const toolsLabel = toolNames && toolNames.length > 0 ? toolNames.map(n => n.replace(/_/g, ' ')).join(', ') : null; return (

{isSingleConnect ? `${providerEntries[0][1].name} not connected` : `${providerEntries[0][1].name} — missing permissions`} {toolsLabel && ( ({toolsLabel}) )}

{providerEntries.map(([provider, entry]) => ( ))}

{/* Show scopes if missing permissions (not connect) */} {!isSingleConnect && providerEntries.some(([, e]) => e.scopes.length > 0) && (

{providerEntries.flatMap(([, entry]) => entry.scopes.map((scope) => ( {scope} )) )}

)}

will retry automatically after connecting

); }); 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@inferencesh","registryDependencies":["badge","button","card","collapsible","spinner","https://inference.sh/ui/r/pretext-md.json","https://inference.sh/ui/r/widgets.json","https://inference.sh/ui/r/task.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/infsh/agent/tool-invocation.tsx","content":"$51","type":"registry:component","target":"components/infsh/agent/tool-invocation.tsx"},{"path":"components/infsh/agent/tool-invocations.tsx","content":"$52","type":"registry:component","target":"components/infsh/agent/tool-invocations.tsx"},{"path":"components/infsh/agent/credential-requirement-card.tsx","content":"$53","type":"registry:component","target":"components/infsh/agent/credential-requirement-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]