diff --git a/src/components/segments/ToolCallRequestView.tsx b/src/components/segments/ToolCallRequestView.tsx index 099ff52..0f4fe46 100644 --- a/src/components/segments/ToolCallRequestView.tsx +++ b/src/components/segments/ToolCallRequestView.tsx @@ -1,23 +1,99 @@ import type { ToolCallRequestSegment } from '../../types/protocol' -import { Play } from 'lucide-react' +import { Play, ChevronDown, ChevronRight } from 'lucide-react' +import { useState } from 'react' + +/** Format a value for inline display — booleans, numbers, short strings stay inline; long strings/objects get special treatment */ +function formatArg(value: unknown): { display: string; isLong: boolean } { + if (value === null || value === undefined) { + return { display: String(value), isLong: false } + } + if (typeof value === 'boolean') { + return { display: value ? 'true' : 'false', isLong: false } + } + if (typeof value === 'number') { + return { display: String(value), isLong: false } + } + if (typeof value === 'string') { + const trimmed = value.trim() + const hasNewlines = trimmed.includes('\n') + const isLong = trimmed.length > 80 || hasNewlines + if (hasNewlines || trimmed.length > 200) { + return { display: trimmed.slice(0, 200) + (trimmed.length > 200 ? '…' : ''), isLong: true } + } + return { display: trimmed, isLong } + } + if (Array.isArray(value)) { + const s = JSON.stringify(value) + return { display: s, isLong: s.length > 80 } + } + if (typeof value === 'object') { + const s = JSON.stringify(value, null, 2) + return { display: s, isLong: s.length > 80 || s.includes('\n') } + } + return { display: String(value), isLong: false } +} + +function ArgRow({ name, value }: { name: string; value: unknown }) { + const [expanded, setExpanded] = useState(false) + const { display, isLong } = formatArg(value) + const needsExpansion = isLong + + return ( +
- {JSON.stringify(segment.arguments, null, 2)}
-
+
+ {/* Arguments as labeled rows */}
+ {entries.length > 0 ? (
+