From 0fa89fc1089319c82308f238f87a92861768b6fd Mon Sep 17 00:00:00 2001 From: Gagancreates Date: Thu, 28 May 2026 01:48:33 +0530 Subject: [PATCH] feat: apply web search card design to tool-call box with action summary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shared --card-surface token, rounded card, hover, collapse animation, and a state-driven lead icon (spinner/check/cross). Single tools and the group now match. Completed group shows 'Ran N tools · , more...' with the action summary in lighter gray. --- apps/x/apps/renderer/src/App.css | 4 + .../src/components/ai-elements/tool.tsx | 97 ++++++++----------- .../ai-elements/web-search-result.tsx | 2 +- .../renderer/src/lib/chat-conversation.ts | 57 +++++++++++ 4 files changed, 102 insertions(+), 58 deletions(-) diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index 29d7a82d..86c6535d 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -1200,6 +1200,10 @@ --scrollbar-track: oklch(0.95 0 0); --scrollbar-thumb: oklch(0.75 0 0); --scrollbar-thumb-hover: oklch(0.65 0 0); + /* Subtle raised-card surface: tints toward foreground, so it reads a hair + darker than the background in light mode and a hair lighter in dark mode. + Shared by the web search card and tool-call group. */ + --card-surface: color-mix(in oklab, var(--background) 98.5%, var(--foreground)); --rowboat-panel: oklch(0.97 0 0); --rowboat-raised: oklch(1 0 0); --rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%); diff --git a/apps/x/apps/renderer/src/components/ai-elements/tool.tsx b/apps/x/apps/renderer/src/components/ai-elements/tool.tsx index 5f65fa32..a4d1e402 100644 --- a/apps/x/apps/renderer/src/components/ai-elements/tool.tsx +++ b/apps/x/apps/renderer/src/components/ai-elements/tool.tsx @@ -1,6 +1,5 @@ "use client"; -import { Badge } from "@/components/ui/badge"; import { Collapsible, CollapsibleContent, @@ -9,17 +8,15 @@ import { import { cn } from "@/lib/utils"; import type { ToolUIPart } from "ai"; import { - CheckCircleIcon, ChevronDownIcon, - CircleIcon, - ClockIcon, - WrenchIcon, + CircleCheck, + LoaderIcon, XCircleIcon, } from "lucide-react"; import { type ComponentProps, type ReactNode, isValidElement, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import type { ToolCall, ToolGroup as ToolGroupType } from "@/lib/chat-conversation"; -import { getToolDisplayName, getToolGroupSummary, toToolState } from "@/lib/chat-conversation"; +import { getToolActionsSummary, getToolDisplayName, getToolGroupSummary, toToolState } from "@/lib/chat-conversation"; const formatToolValue = (value: unknown) => { if (typeof value === "string") return value; @@ -52,7 +49,10 @@ export type ToolProps = ComponentProps; export const Tool = ({ className, ...props }: ToolProps) => ( ); @@ -64,35 +64,13 @@ export type ToolHeaderProps = { className?: string; }; -const getStatusBadge = (status: ToolUIPart["state"]) => { - const labels: Record = { - "input-streaming": "Pending", - "input-available": "Running", - // @ts-expect-error state only available in AI SDK v6 - "approval-requested": "Awaiting Approval", - "approval-responded": "Responded", - "output-available": "Completed", - "output-error": "Error", - "output-denied": "Denied", - }; - - const icons: Record = { - "input-streaming": , - "input-available": , - // @ts-expect-error state only available in AI SDK v6 - "approval-requested": , - "approval-responded": , - "output-available": , - "output-error": , - "output-denied": , - }; - - return ( - - {icons[status]} - {labels[status]} - - ); +// Lead icon shown to the left of the tool label: spinner while running, a +// green check when done, a red cross on error. Shared by ToolHeader (single +// tools) and the tool-call group. +const getLeadIcon = (state: ToolUIPart["state"]): ReactNode => { + if (state === "output-available") return ; + if (state === "output-error") return ; + return ; }; export const ToolHeader = ({ @@ -107,13 +85,13 @@ export const ToolHeader = ({ return (
- + {getLeadIcon(state)}
-
- {getStatusBadge(state)} - -
+ ) }; @@ -134,7 +109,7 @@ export type ToolContentProps = ComponentProps; export const ToolContent = ({ className, ...props }: ToolContentProps) => ( t.status === 'running' || t.status === 'pending') const currentTool = runningTool ?? group.items[group.items.length - 1] - const summary = isCompleted - ? `Ran ${group.items.length} tool${group.items.length !== 1 ? 's' : ''}` + const toolCount = group.items.length + const ranLabel = `Ran ${toolCount} tool${toolCount !== 1 ? 's' : ''}` + const actions = isCompleted ? getToolActionsSummary(group.items) : '' + // Plain string used as the AnimatePresence key + tooltip; the rendered node + // shows the action summary in a lighter gray than the "Ran N tools" prefix. + const summaryText = isCompleted + ? `${ranLabel} · ${actions}` : currentTool ? getToolDisplayName(currentTool) : getToolGroupSummary(group.items) + const summaryNode: ReactNode = isCompleted + ? <>{ranLabel} {`· ${actions}`} + : summaryText + + const leadIcon = getLeadIcon(state) return ( - +
- + {leadIcon}
- {summary} + {summaryNode}
-
- {getStatusBadge(state)} - -
+ - +
{group.items.map((tool) => { const toolState = toToolState(tool.status) @@ -291,12 +273,13 @@ export const ToolGroupComponent = ({ group, isToolOpen, onToolOpenChange }: Tool key={tool.id} open={isOpen} onOpenChange={(o) => onToolOpenChange(tool.id, o)} - className="mb-0 border-border/60" + className="mb-0 rounded-md border-border/60 bg-transparent hover:border-border/60" > {/* Rolling header: clipped, fixed height so sliding lines stay contained */} diff --git a/apps/x/apps/renderer/src/lib/chat-conversation.ts b/apps/x/apps/renderer/src/lib/chat-conversation.ts index 576997ad..41344107 100644 --- a/apps/x/apps/renderer/src/lib/chat-conversation.ts +++ b/apps/x/apps/renderer/src/lib/chat-conversation.ts @@ -653,6 +653,63 @@ export const getToolGroupSummary = (tools: ToolCall[]): string => { return names.join(' · ') } +// Past-tense action phrases for summarizing a finished tool group, e.g. +// "read 3 files, listed directory". Keyed by builtin tool name. +const TOOL_ACTION_VERBS: Record = { + 'file-readText': { verb: 'read', one: 'file', many: 'files' }, + 'file-writeText': { verb: 'wrote', one: 'file', many: 'files' }, + 'file-editText': { verb: 'edited', one: 'file', many: 'files' }, + 'file-list': { verb: 'listed', one: 'directory', many: 'directories' }, + 'file-exists': { verb: 'checked', one: 'path', many: 'paths' }, + 'file-stat': { verb: 'inspected', one: 'file', many: 'files' }, + 'file-glob': { verb: 'searched for', one: 'file', many: 'files' }, + 'file-grep': { verb: 'searched', one: 'file', many: 'files' }, + 'file-mkdir': { verb: 'created', one: 'directory', many: 'directories' }, + 'file-rename': { verb: 'renamed', one: 'file', many: 'files' }, + 'file-copy': { verb: 'copied', one: 'file', many: 'files' }, + 'file-remove': { verb: 'removed', one: 'file', many: 'files' }, + 'file-getRoot': { verb: 'resolved', one: 'file root', many: 'file roots' }, + 'executeCommand': { verb: 'ran', one: 'command', many: 'commands' }, + 'executeMcpTool': { verb: 'ran', one: 'MCP tool', many: 'MCP tools' }, + 'listMcpServers': { verb: 'listed', one: 'MCP server', many: 'MCP servers' }, + 'listMcpTools': { verb: 'listed', one: 'MCP tool', many: 'MCP tools' }, + 'save-to-memory': { verb: 'saved', one: 'memory', many: 'memories' }, + 'loadSkill': { verb: 'loaded', one: 'skill', many: 'skills' }, + 'parseFile': { verb: 'parsed', one: 'file', many: 'files' }, +} + +// Summarize what a group of tools actually did, grouping identical actions +// and counting them: "read 3 files, listed directory". Unmapped tools fall +// back to their lowercased display name. +export const getToolActionsSummary = (tools: ToolCall[]): string => { + const order: string[] = [] + const grouped = new Map() + for (const tool of tools) { + const phrase = TOOL_ACTION_VERBS[tool.name] ?? null + const key = phrase ? `${phrase.verb}|${phrase.one}` : tool.name + const existing = grouped.get(key) + if (existing) { + existing.count++ + } else { + grouped.set(key, { phrase, count: 1, fallback: getToolDisplayName(tool) }) + order.push(key) + } + } + const phrases = order.map((key) => { + const { phrase, count, fallback } = grouped.get(key)! + if (!phrase) return fallback.toLowerCase() + if (count > 1) return `${phrase.verb} ${count} ${phrase.many}` + const article = /^[aeiou]/i.test(phrase.one) ? 'an' : 'a' + return `${phrase.verb} ${article} ${phrase.one}` + }) + // Show at most two operations; collapse the rest into "more...". + const MAX_ACTIONS = 2 + if (phrases.length > MAX_ACTIONS) { + return `${phrases.slice(0, MAX_ACTIONS).join(', ')}, more...` + } + return phrases.join(', ') +} + export const inferRunTitleFromMessage = (content: string): string | undefined => { const { message } = parseAttachedFiles(content) const normalized = message.replace(/\s+/g, ' ').trim()