fix: improve tool call hover behavior and argument rendering (#16990)

* fix: improve tool call hover behavior and argument rendering

- Narrow hover trigger from <summary> to args label <span> to prevent
  cascading hovers when scrolling through chat
- Make hover interactive (sticky) so users can move into the tooltip,
  scroll, and select text
- Format tooltip content smartly: short string values as plain text,
  long strings as code blocks with real line breaks, non-strings always
  as code blocks
- Add scrollable hover styling scoped via cssClasses
- Add getArgumentsShortLabel for all file changeset tools to produce
  short single-line labels (e.g., "Ran writeFileContent(test.ts …)")

fixes: #16988

* treat strings and non string values the same

* more review comments

* fix: improve tool call argument tooltip rendering

- Render values by type: inline code for short strings/primitives, code blocks for long/multiline strings, JSON blocks for objects and arrays
- Expand array-of-object entries (e.g. replacements) into individual key-value sections with code blocks
- Constrain hover dimensions and add scroll support for large code blocks
- Add horizontal rule separators between top-level argument entries
- Fix and extend tests

* fix: anchor tooltip to entire summary element

---------

Co-authored-by: Nina Doschek <ndoschek@eclipsesource.com>

Author: eneufeld

packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.spec.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { expect } from 'chai';
-import { condenseArguments } from './toolcall-utils';
+import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
 describe('condenseArguments', () => {
 
@@ -130,3 +130,147 @@ describe('condenseArguments', () => {
     });
 
 });
+
+describe('formatArgsForTooltip', () => {
+
+    it('renders short single-line args as inline code', () => {
+        const args = JSON.stringify({ path: 'test.ts' });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**path:** `test.ts`');
+        expect(result.value).to.not.contain('```');
+    });
+
+    it('renders long single-line string as inline code (no newlines)', () => {
+        const longPath = 'src/browser/chat-response-renderer/toolcall-utils.ts';
+        const args = JSON.stringify({ path: longPath });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain(`**path:** \`${longPath}\``);
+        expect(result.value).to.not.contain('```');
+    });
+
+    it('renders multi-line string as code block', () => {
+        const multiLine = 'line one\nline two\nline three';
+        const args = JSON.stringify({ content: multiLine });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**content:**');
+        expect(result.value).to.contain('```\n');
+        expect(result.value).to.contain(multiLine);
+    });
+
+    it('renders JSON object value as code block (serialization produces newlines)', () => {
+        const args = JSON.stringify({ config: { nested: true, key: 'value' } });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**config:**');
+        expect(result.value).to.contain('```');
+    });
+
+    it('renders array value as code block (serialization produces newlines)', () => {
+        const bigArray = Array.from({ length: 5 }, (_, i) => i);
+        const args = JSON.stringify({ data: bigArray });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**data:**');
+        expect(result.value).to.contain('```');
+    });
+
+    it('renders simple non-string values as inline code (no code blocks)', () => {
+        const args = '{"count": 42, "enabled": true, "value": null}';
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**count:** `42`');
+        expect(result.value).to.contain('**enabled:** `true`');
+        expect(result.value).to.contain('**value:** `null`');
+        expect(result.value).to.not.contain('```');
+    });
+
+    it('renders mixed single-line and multi-line values correctly', () => {
+        const args = JSON.stringify({ path: 'test.ts', content: 'line1\nline2' });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**path:** `test.ts`');
+        expect(result.value).to.contain('**content:**');
+        expect(result.value).to.contain('```');
+    });
+
+    it('falls back to code block for short unparseable JSON', () => {
+        const invalidJson = 'not json at all';
+        const result = formatArgsForTooltip(invalidJson);
+        expect(result.value).to.contain('```');
+        expect(result.value).to.contain('not json at all');
+    });
+
+    it('falls back to code block for multi-line unparseable JSON', () => {
+        const invalidJson = 'not json\nat all';
+        const result = formatArgsForTooltip(invalidJson);
+        expect(result.value).to.contain('```');
+        expect(result.value).to.contain(invalidJson);
+    });
+
+    it('handles top-level non-object parsed value as code block', () => {
+        const longString = '"a string that is longer than fifty characters total and keeps going"';
+        expect(longString.length).to.be.greaterThan(50);
+        const result = formatArgsForTooltip(longString);
+        expect(result.value).to.contain('```');
+        expect(result.value).to.contain('a string that is longer than fifty characters total and keeps going');
+    });
+
+    it('handles top-level array as code block (serialization produces newlines)', () => {
+        const args = JSON.stringify([1, 2, 3]);
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('```');
+    });
+
+    it('separates top-level entries with horizontal rules', () => {
+        const args = JSON.stringify({ path: 'test.ts', enabled: true });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('---');
+    });
+
+    it('renders primitive array as JSON code block', () => {
+        const args = JSON.stringify({ tags: ['a', 'b', 'c'] });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**tags:**');
+        expect(result.value).to.contain('```');
+        expect(result.value).to.contain('"a"');
+        expect(result.value).to.contain('"b"');
+    });
+
+    it('expands array of objects with string values into sections', () => {
+        const args = JSON.stringify({
+            replacements: [
+                { oldContent: 'line one\nline two', newContent: 'line three\nline four' }
+            ]
+        });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**oldContent:**');
+        expect(result.value).to.contain('**newContent:**');
+        expect(result.value).to.contain('line one\nline two');
+        expect(result.value).to.contain('line three\nline four');
+    });
+
+    it('renders short strings as code blocks inside array items', () => {
+        const args = JSON.stringify({
+            replacements: [
+                { oldContent: '// 2024', newContent: '// 2025' }
+            ]
+        });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('**oldContent:**');
+        expect(result.value).to.contain('**newContent:**');
+        expect(result.value).to.contain('// 2024');
+        expect(result.value).to.contain('// 2025');
+        // Both values should be in code blocks, not inline code
+        const codeBlockCount = (result.value.match(/```/g) || []).length;
+        expect(codeBlockCount).to.be.greaterThanOrEqual(4); // 2 code blocks = 4 fences
+    });
+
+    it('numbers array items when there are multiple', () => {
+        const args = JSON.stringify({
+            replacements: [
+                { old: 'aaa\nbbb', new: 'ccc\nddd' },
+                { old: 'eee\nfff', new: 'ggg\nhhh' }
+            ]
+        });
+        const result = formatArgsForTooltip(args);
+        expect(result.value).to.contain('\\[0\\]');
+        expect(result.value).to.contain('\\[1\\]');
+    });
+
+});

packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -27,8 +27,7 @@ import { ResponseNode } from '../chat-tree-view';
 import { useMarkdownRendering } from './markdown-part-renderer';
 import { ToolCallResult, ToolInvocationRegistry, ToolRequest } from '@theia/ai-core';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
-import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
-import { condenseArguments } from './toolcall-utils';
+import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
@@ -143,23 +142,15 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         if (!target || !response.arguments || !response.arguments.trim() || response.arguments.trim() === '{}') {
             return;
         }
-        const prettyArgs = this.prettyPrintArgs(response.arguments);
-        const markdownString = new MarkdownStringImpl(`**${response.name}**\n`).appendCodeblock('json', prettyArgs);
+        const markdownString = formatArgsForTooltip(response.arguments);
         this.hoverService.requestHover({
             content: markdownString,
             target,
-            position: 'right'
+            position: 'right',
+            interactive: true,
+            cssClasses: ['toolcall-args-hover']
         });
     }
-
-    private prettyPrintArgs(args: string): string {
-        try {
-            return JSON.stringify(JSON.parse(args), undefined, 2);
-        } catch (e) {
-            // fall through
-            return args;
-        }
-    }
 }
 
 const Spinner = () => (
@@ -196,8 +187,7 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
 }) => {
     const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
     const [rejectionReason, setRejectionReason] = React.useState<unknown>(undefined);
-    // eslint-disable-next-line no-null/no-null
-    const summaryRef = React.useRef<HTMLElement>(null);
+    const summaryRef = React.useRef<HTMLElement | undefined>(undefined);
 
     const formatReason = (reason: unknown): string => {
         if (!reason) {
@@ -278,8 +268,8 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
             ) : response.finished ? (
                 <details className='theia-toolCall-finished'>
                     <summary
-                        ref={summaryRef}
-                        onMouseEnter={() => showArgsTooltip(response, summaryRef.current ?? undefined)}
+                        ref={(el: HTMLElement | null) => { summaryRef.current = el ?? undefined; }}
+                        onMouseEnter={() => showArgsTooltip(response, summaryRef.current)}
                     >
                         {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
                         (<span className='theia-toolCall-args-label'>{getArgumentsLabel(response.name, response.arguments)}</span>)