jupyter-chat-components 0.4.0 → 0.5.0

package/README.md

@@ -26,38 +26,7 @@ The registry is available directly on the `IComponentsRendererFactory` token as
 
 Other JupyterLab extensions can consume the `IComponentsRendererFactory` token and use `registry.add()` to register their own components, which will then be available for rendering via the MIME bundle.
 
-## Available components
-
-### `tool-call`
-
-Renders an AI tool call, displaying the tool name, input arguments, and output in a structured and readable format. Useful for visualizing function calls made by AI assistants during a conversation.
-
-### `grouped-tool-calls`
-
-Renders grouped tool calls, including:
-
-- grouped in-progress, completed, and failed tool rows
-- expandable raw output and file path details
-- inline file diffs for edit operations
-- permission options for approval flows
-
-The component uses a camelCase metadata API.
-
-If your host extension wants the approval buttons to be interactive, set the renderer factory callbacks:
-
-```ts
-rendererFactory.toolCallPermissionDecision = async (
-  sessionId,
-  toolCallId,
-  optionId
-) => {
-  // submit the decision to your backend
-};
-
-rendererFactory.openToolCallPath = path => {
-  // optionally open the referenced file or resource
-};
-```
+For live end-to-end metadata examples, see the deployed demo notebook at [brichet.github.io/jupyter-chat-components/lab/index.html?path=components_demo.ipynb](https://brichet.github.io/jupyter-chat-components/lab/index.html?path=components_demo.ipynb). The source notebook lives at [demo/contents/components_demo.ipynb](./demo/contents/components_demo.ipynb).
 
 ## Requirements
 

package/lib/components/error.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IComponentProps } from '../token';
+export interface IErrorProps extends IComponentProps {
+    errorMessage: string;
+    title?: string;
+}
+export declare const ErrorMessage: React.FC<IErrorProps>;

package/lib/components/error.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { errorIcon } from '../icons';
+export const ErrorMessage = ({ errorMessage, title = 'Error' }) => {
+    return (React.createElement("div", { className: "jp-ai-error-message" },
+        React.createElement("div", { className: "jp-ai-error-icon" },
+            React.createElement(errorIcon.react, { tag: "span", width: "18px", height: "18px" })),
+        React.createElement("div", { className: "jp-ai-error-body" },
+            React.createElement("div", { className: "jp-ai-error-title" }, title),
+            React.createElement("div", { className: "jp-ai-error-text" }, errorMessage))));
+};

package/lib/components/grouped-tool-calls.d.ts

@@ -12,13 +12,9 @@ export interface IGroupedToolCallsProps extends IComponentProps, IToolCallsMetad
  */
 export declare function toServerRelativePath(absolutePath: string): string;
 /**
- * Format tool output for display.
+ * Format tool payload (input/output) for display.
  */
-export declare function formatToolCallOutput(rawOutput: unknown): string;
-/**
- * Format tool input for display.
- */
-export declare function formatToolCallInput(input: unknown): string;
+export declare function formatToolCallIO(payload: unknown): string;
 /**
  * Compute the line title shown for a tool call.
  */
@@ -28,10 +24,6 @@ export declare function getToolCallDisplayTitle(toolCall: IToolCallsEntry): stri
  * title alone is enough.
  */
 export declare function buildPermissionDetail(toolCall: IToolCallsEntry): string | null;
-/**
- * Build the expandable detail lines shown for completed and failed tool calls.
- */
-export declare function buildToolCallDetailsLines(toolCall: IToolCallsEntry): string[];
 /**
  * React component for rendering grouped tool calls.
  */

package/lib/components/grouped-tool-calls.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { structuredPatch } from 'diff';
 /** Maximum number of rendered diff lines before truncation. */
 const MAX_DIFF_LINES = 20;
+/** Maximum number of lines shown in an expanded detail. */
+const MAX_DETAIL_LINES = 15;
 /** Tool kinds where expanded view shows file paths from locations. */
 const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
-/** Tool kinds where expanded view shows raw output. */
-const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
 const TOOL_KIND_LABELS = {
     read: 'Reading',
     edit: 'Editing',
@@ -47,38 +47,19 @@ export function toServerRelativePath(absolutePath) {
     return relativePath;
 }
 /**
- * Format tool output for display.
+ * Format tool payload (input/output) for display.
  */
-export function formatToolCallOutput(rawOutput) {
-    if (typeof rawOutput === 'string') {
-        return rawOutput;
+export function formatToolCallIO(payload) {
+    if (typeof payload === 'string') {
+        return payload;
     }
-    if (Array.isArray(rawOutput) &&
-        rawOutput.every(item => typeof item === 'object' &&
+    if (Array.isArray(payload) &&
+        payload.every(item => typeof item === 'object' &&
             item !== null &&
             typeof item.text === 'string')) {
-        return rawOutput.map(item => item.text).join('\n');
+        return payload.map(item => item.text).join('\n');
     }
-    return JSON.stringify(rawOutput, null, 2);
-}
-/**
- * Format tool input for display.
- */
-export function formatToolCallInput(input) {
-    if (typeof input === 'string') {
-        return input;
-    }
-    if (typeof input !== 'object' || input === null || Array.isArray(input)) {
-        return JSON.stringify(input, null, 2);
-    }
-    const entries = Object.entries(input);
-    const isFlat = entries.every(([, value]) => typeof value === 'string' ||
-        typeof value === 'number' ||
-        typeof value === 'boolean');
-    if (isFlat) {
-        return entries.map(([key, value]) => `${key}: ${value}`).join('\n');
-    }
-    return JSON.stringify(input, null, 2);
+    return JSON.stringify(payload, null, 2);
 }
 function getLocationSummary(toolCall) {
     var _a;
@@ -143,7 +124,7 @@ export function buildPermissionDetail(toolCall) {
             result[key] = value;
             return result;
         }, {});
-        const params = paramEntries.length > 0 ? formatToolCallInput(filteredParams) : null;
+        const params = paramEntries.length > 0 ? formatToolCallIO(filteredParams) : null;
         if (purpose && params) {
             return `${purpose}\n${params}`;
         }
@@ -156,29 +137,21 @@ export function buildPermissionDetail(toolCall) {
         return null;
     }
     if (rawInput !== null && rawInput !== undefined) {
-        return formatToolCallInput(rawInput);
+        return formatToolCallIO(rawInput);
     }
     return null;
 }
 /**
- * Build the expandable detail lines shown for completed and failed tool calls.
+ * Returns true when a completed/failed tool call has expandable detail content.
  */
-export function buildToolCallDetailsLines(toolCall) {
-    const lines = [];
-    const { kind, locations, rawOutput } = toolCall;
+function hasDetailContent(toolCall) {
+    const { kind, locations, rawInput, rawOutput } = toolCall;
+    const hasInput = rawInput !== null && rawInput !== undefined;
+    const hasOutput = rawOutput !== null && rawOutput !== undefined;
     if (kind && FILE_KINDS.has(kind) && (locations === null || locations === void 0 ? void 0 : locations.length)) {
-        lines.push(...locations.map(toServerRelativePath));
-    }
-    else if (kind &&
-        OUTPUT_KINDS.has(kind) &&
-        rawOutput !== null &&
-        rawOutput !== undefined) {
-        lines.push(formatToolCallOutput(rawOutput));
+        return true;
     }
-    else if (typeof rawOutput === 'string') {
-        lines.push(rawOutput);
-    }
-    return lines;
+    return hasInput || hasOutput;
 }
 function toDiffLineInfo(type, text, key) {
     switch (type) {
@@ -230,6 +203,67 @@ function buildDiffLines(diff) {
         return lines;
     }, []);
 }
+/**
+ * A labeled section with a capped height and show-all/show-less toggle.
+ */
+function ToolCallSection({ label, children, trans }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const preRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        const details = (_a = preRef.current) === null || _a === void 0 ? void 0 : _a.closest('details');
+        if (!details) {
+            return;
+        }
+        const handleToggle = () => {
+            if (!details.open) {
+                setExpanded(false);
+            }
+        };
+        details.addEventListener('toggle', handleToggle);
+        return () => details.removeEventListener('toggle', handleToggle);
+    }, []);
+    React.useLayoutEffect(() => {
+        const el = preRef.current;
+        if (!el) {
+            return;
+        }
+        const measure = () => {
+            if (!expanded) {
+                setIsOverflowing(el.scrollHeight > el.clientHeight);
+            }
+        };
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        measure();
+        return () => observer.disconnect();
+    }, [expanded]);
+    return (React.createElement("div", { className: "jp-ai-tool-call-detail-section" },
+        React.createElement("div", { className: "jp-ai-tool-call-detail-label" }, label),
+        React.createElement("pre", { ref: preRef, className: "jp-ai-tool-call-detail-code", style: {
+                maxHeight: expanded
+                    ? undefined
+                    : `calc(${MAX_DETAIL_LINES} * var(--jp-content-line-height) * var(--jp-ui-font-size1))`
+            } },
+            React.createElement("code", null, children)),
+        !expanded && isOverflowing && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(true), type: "button" }, trans.__('Show all'))),
+        expanded && (React.createElement("button", { className: "jp-ai-tool-call-diff-toggle", onClick: () => setExpanded(false), type: "button" }, trans.__('Show less')))));
+}
+/**
+ * Expandable detail view for a completed or failed tool call.
+ */
+function ToolCallDetail({ toolCall, trans }) {
+    const { kind, locations, rawInput, rawOutput } = toolCall;
+    const hasInput = rawInput !== null && rawInput !== undefined;
+    const hasOutput = rawOutput !== null && rawOutput !== undefined;
+    if (kind && FILE_KINDS.has(kind) && (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return (React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, locations.map((loc, i) => (React.createElement("div", { key: i, className: "jp-ai-tool-call-item-detail-path" }, toServerRelativePath(loc))))));
+    }
+    return (React.createElement("div", { className: "jp-ai-tool-call-item-detail" },
+        hasInput && (React.createElement(ToolCallSection, { label: trans.__('Input'), trans: trans }, formatToolCallIO(rawInput))),
+        hasOutput && (React.createElement(ToolCallSection, { label: trans.__('Output'), trans: trans }, formatToolCallIO(rawOutput)))));
+}
 function ToolCallDiffBlock({ diff, trans, openToolCallPath, pendingPermission }) {
     const [expanded, setExpanded] = React.useState(false);
     const allLines = React.useMemo(() => buildDiffLines(diff), [diff]);
@@ -300,10 +334,10 @@ function ToolCallRow({ toolCall, trans, openToolCallPath, toolCallPermissionDeci
     var _a, _b, _c, _d;
     const displayTitle = getToolCallDisplayTitle(toolCall);
     const selectedOption = (_a = toolCall.permissionOptions) === null || _a === void 0 ? void 0 : _a.find(option => option.optionId === toolCall.selectedOptionId);
+    const status = (_b = toolCall.status) !== null && _b !== void 0 ? _b : 'in_progress';
     const isRejected = toolCall.permissionStatus === 'resolved' &&
-        !!((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.kind) === null || _b === void 0 ? void 0 : _b.includes('reject'));
+        (!!((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.kind) === null || _c === void 0 ? void 0 : _c.includes('reject')) || status === 'rejected');
     const hasPendingPermission = toolCall.permissionStatus === 'pending';
-    const status = (_c = toolCall.status) !== null && _c !== void 0 ? _c : 'in_progress';
     const isInProgress = !isRejected &&
         (status === 'in_progress' || status === 'pending' || hasPendingPermission);
     const isCompleted = status === 'completed';
@@ -316,15 +350,21 @@ function ToolCallRow({ toolCall, trans, openToolCallPath, toolCallPermissionDeci
                 ? '\u2717'
                 : '\u2022';
     const effectiveStatus = (isRejected ? 'failed' : status).replace(/_/g, '-');
-    const cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}`;
     const hasDiffs = !!((_d = toolCall.diffs) === null || _d === void 0 ? void 0 : _d.length);
+    const hasExpandableContent = hasDiffs ||
+        (!hasDiffs && (isCompleted || isFailed) && hasDetailContent(toolCall));
+    const cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}${!hasExpandableContent && !hasPendingPermission ? ' jp-ai-tool-call-item-no-detail' : ''}`;
     if (hasDiffs && hasPendingPermission) {
         return (React.createElement("div", { className: cssClass },
             React.createElement("details", { open: true },
                 React.createElement("summary", null,
                     React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
                     ' ',
-                    React.createElement("em", null, displayTitle)),
+                    React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                        displayTitle,
+                        toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                            '  ',
+                            toolCall.summary)))),
                 React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath, pendingPermission: true })),
             React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
     }
@@ -336,35 +376,46 @@ function ToolCallRow({ toolCall, trans, openToolCallPath, toolCallPermissionDeci
                     React.createElement("summary", null,
                         React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
                         ' ',
-                        React.createElement("em", null, displayTitle)),
+                        React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                            displayTitle,
+                            toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                                '  ',
+                                toolCall.summary)))),
                     React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, permissionDetail)),
                 React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
         }
     }
-    const detailLines = !hasDiffs && (isCompleted || isFailed)
-        ? buildToolCallDetailsLines(toolCall)
-        : [];
-    const hasExpandableContent = hasDiffs || detailLines.length > 0;
     if ((isCompleted || isFailed) && hasExpandableContent) {
         return (React.createElement("details", { className: cssClass },
             React.createElement("summary", null,
                 React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
                 ' ',
-                displayTitle,
+                React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                    displayTitle,
+                    toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                        '  ',
+                        toolCall.summary))),
                 React.createElement(PermissionLabel, { toolCall: toolCall })),
-            hasDiffs ? (React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath })) : (React.createElement("div", { className: "jp-ai-tool-call-item-detail" }, detailLines.join('\n')))));
+            hasDiffs ? (React.createElement(ToolCallDiffView, { diffs: toolCall.diffs, trans: trans, openToolCallPath: openToolCallPath })) : (React.createElement(ToolCallDetail, { toolCall: toolCall, trans: trans }))));
     }
     if (isInProgress) {
         return (React.createElement("div", { className: cssClass },
             React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
             ' ',
-            React.createElement("em", null, displayTitle),
+            React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+                displayTitle,
+                toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                    '  ',
+                    toolCall.summary))),
             React.createElement(PermissionButtons, { toolCall: toolCall, trans: trans, toolCallPermissionDecision: toolCallPermissionDecision })));
     }
     return (React.createElement("div", { className: cssClass },
         React.createElement("span", { className: "jp-ai-tool-call-item-icon" }, icon),
-        " ",
-        displayTitle,
+        React.createElement("div", { className: "jp-ai-tool-call-item-title" },
+            displayTitle,
+            toolCall.summary && (React.createElement("span", { className: "jp-ai-tool-call-item-summary" },
+                '  ',
+                toolCall.summary))),
         React.createElement(PermissionLabel, { toolCall: toolCall })));
 }
 /**

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/lib/components/index.js

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/lib/factory.js

@@ -1,7 +1,7 @@
 import { nullTranslator } from '@jupyterlab/translation';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall } from './components';
+import { GroupedToolCalls, InlineDiff, MessageQueue, ToolCall, ErrorMessage } from './components';
 import { ComponentRegistry } from './registry';
 /**
  * The default mime type for the extension.
@@ -94,5 +94,6 @@ export class RendererFactory {
         this.registry.add('grouped-tool-calls', GroupedToolCalls);
         this.registry.add('inline-diff', InlineDiff);
         this.registry.add('message-queue', MessageQueue);
+        this.registry.add('error', ErrorMessage);
     }
 }

package/lib/icons.d.ts

@@ -0,0 +1,2 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export declare const errorIcon: LabIcon;

package/lib/icons.js

@@ -0,0 +1,5 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+export const errorIcon = new LabIcon({
+    name: 'jupyter-chat:error',
+    svgstr: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'
+});

package/lib/index.d.ts

@@ -8,4 +8,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/lib/index.js

@@ -20,4 +20,5 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 export default factory;

package/lib/token.d.ts

@@ -134,6 +134,10 @@ export interface IToolCallsEntry {
      * Human-readable title displayed in the UI.
      */
     title?: string;
+    /**
+     * Human-readable summary from tool input displayed with the title
+     */
+    summary?: string;
     /**
      * Tool operation category.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyter-chat-components",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "Components to displayed in jupyter chat",
     "keywords": [
         "jupyter",
@@ -61,6 +61,7 @@
         "@jupyterlab/rendermime": "^4.5.0",
         "@jupyterlab/rendermime-interfaces": "^3.8.0",
         "@jupyterlab/translation": "^4.5.0",
+        "@jupyterlab/ui-components": "^4.5.0",
         "@lumino/coreutils": "^2.2.2",
         "@lumino/widgets": "^2.1.0",
         "diff": "^8.0.0"

package/src/components/error.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { IComponentProps } from '../token';
+import { errorIcon } from '../icons';
+
+export interface IErrorProps extends IComponentProps {
+  errorMessage: string;
+  title?: string;
+}
+
+export const ErrorMessage: React.FC<IErrorProps> = ({
+  errorMessage,
+  title = 'Error'
+}) => {
+  return (
+    <div className="jp-ai-error-message">
+      <div className="jp-ai-error-icon">
+        <errorIcon.react tag="span" width="18px" height="18px" />
+      </div>
+      <div className="jp-ai-error-body">
+        <div className="jp-ai-error-title">{title}</div>
+        <div className="jp-ai-error-text">{errorMessage}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/grouped-tool-calls.tsx

@@ -17,12 +17,12 @@ import {
 /** Maximum number of rendered diff lines before truncation. */
 const MAX_DIFF_LINES = 20;
 
+/** Maximum number of lines shown in an expanded detail. */
+const MAX_DETAIL_LINES = 15;
+
 /** Tool kinds where expanded view shows file paths from locations. */
 const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
 
-/** Tool kinds where expanded view shows raw output. */
-const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
-
 const TOOL_KIND_LABELS: Record<string, string> = {
   read: 'Reading',
   edit: 'Editing',
@@ -88,53 +88,26 @@ export function toServerRelativePath(absolutePath: string): string {
 }
 
 /**
- * Format tool output for display.
+ * Format tool payload (input/output) for display.
  */
-export function formatToolCallOutput(rawOutput: unknown): string {
-  if (typeof rawOutput === 'string') {
-    return rawOutput;
+export function formatToolCallIO(payload: unknown): string {
+  if (typeof payload === 'string') {
+    return payload;
   }
 
   if (
-    Array.isArray(rawOutput) &&
-    rawOutput.every(
+    Array.isArray(payload) &&
+    payload.every(
       item =>
         typeof item === 'object' &&
         item !== null &&
         typeof (item as { text?: unknown }).text === 'string'
     )
   ) {
-    return rawOutput.map(item => (item as { text: string }).text).join('\n');
+    return payload.map(item => (item as { text: string }).text).join('\n');
   }
 
-  return JSON.stringify(rawOutput, null, 2);
-}
-
-/**
- * Format tool input for display.
- */
-export function formatToolCallInput(input: unknown): string {
-  if (typeof input === 'string') {
-    return input;
-  }
-
-  if (typeof input !== 'object' || input === null || Array.isArray(input)) {
-    return JSON.stringify(input, null, 2);
-  }
-
-  const entries = Object.entries(input as Record<string, unknown>);
-  const isFlat = entries.every(
-    ([, value]) =>
-      typeof value === 'string' ||
-      typeof value === 'number' ||
-      typeof value === 'boolean'
-  );
-
-  if (isFlat) {
-    return entries.map(([key, value]) => `${key}: ${value}`).join('\n');
-  }
-
-  return JSON.stringify(input, null, 2);
+  return JSON.stringify(payload, null, 2);
 }
 
 function getLocationSummary(toolCall: IToolCallsEntry): string | null {
@@ -231,7 +204,7 @@ export function buildPermissionDetail(
       {}
     );
     const params =
-      paramEntries.length > 0 ? formatToolCallInput(filteredParams) : null;
+      paramEntries.length > 0 ? formatToolCallIO(filteredParams) : null;
 
     if (purpose && params) {
       return `${purpose}\n${params}`;
@@ -249,33 +222,24 @@ export function buildPermissionDetail(
   }
 
   if (rawInput !== null && rawInput !== undefined) {
-    return formatToolCallInput(rawInput);
+    return formatToolCallIO(rawInput);
   }
 
   return null;
 }
 
 /**
- * Build the expandable detail lines shown for completed and failed tool calls.
+ * Returns true when a completed/failed tool call has expandable detail content.
  */
-export function buildToolCallDetailsLines(toolCall: IToolCallsEntry): string[] {
-  const lines: string[] = [];
-  const { kind, locations, rawOutput } = toolCall;
+function hasDetailContent(toolCall: IToolCallsEntry): boolean {
+  const { kind, locations, rawInput, rawOutput } = toolCall;
+  const hasInput = rawInput !== null && rawInput !== undefined;
+  const hasOutput = rawOutput !== null && rawOutput !== undefined;
 
   if (kind && FILE_KINDS.has(kind) && locations?.length) {
-    lines.push(...locations.map(toServerRelativePath));
-  } else if (
-    kind &&
-    OUTPUT_KINDS.has(kind) &&
-    rawOutput !== null &&
-    rawOutput !== undefined
-  ) {
-    lines.push(formatToolCallOutput(rawOutput));
-  } else if (typeof rawOutput === 'string') {
-    lines.push(rawOutput);
+    return true;
   }
-
-  return lines;
+  return hasInput || hasOutput;
 }
 
 function toDiffLineInfo(
@@ -348,6 +312,130 @@ function buildDiffLines(diff: IToolCallDiff): IDiffLineInfo[] {
   }, []);
 }
 
+/**
+ * A labeled section with a capped height and show-all/show-less toggle.
+ */
+function ToolCallSection({
+  label,
+  children,
+  trans
+}: {
+  label: string;
+  children: React.ReactNode;
+  trans: TranslationBundle;
+}): JSX.Element {
+  const [expanded, setExpanded] = React.useState(false);
+  const [isOverflowing, setIsOverflowing] = React.useState(false);
+  const preRef = React.useRef<HTMLPreElement>(null);
+
+  React.useEffect(() => {
+    const details = preRef.current?.closest('details');
+    if (!details) {
+      return;
+    }
+    const handleToggle = () => {
+      if (!details.open) {
+        setExpanded(false);
+      }
+    };
+    details.addEventListener('toggle', handleToggle);
+    return () => details.removeEventListener('toggle', handleToggle);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    const el = preRef.current;
+    if (!el) {
+      return;
+    }
+    const measure = () => {
+      if (!expanded) {
+        setIsOverflowing(el.scrollHeight > el.clientHeight);
+      }
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    measure();
+    return () => observer.disconnect();
+  }, [expanded]);
+
+  return (
+    <div className="jp-ai-tool-call-detail-section">
+      <div className="jp-ai-tool-call-detail-label">{label}</div>
+      <pre
+        ref={preRef}
+        className="jp-ai-tool-call-detail-code"
+        style={{
+          maxHeight: expanded
+            ? undefined
+            : `calc(${MAX_DETAIL_LINES} * var(--jp-content-line-height) * var(--jp-ui-font-size1))`
+        }}
+      >
+        <code>{children}</code>
+      </pre>
+      {!expanded && isOverflowing && (
+        <button
+          className="jp-ai-tool-call-diff-toggle"
+          onClick={() => setExpanded(true)}
+          type="button"
+        >
+          {trans.__('Show all')}
+        </button>
+      )}
+      {expanded && (
+        <button
+          className="jp-ai-tool-call-diff-toggle"
+          onClick={() => setExpanded(false)}
+          type="button"
+        >
+          {trans.__('Show less')}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Expandable detail view for a completed or failed tool call.
+ */
+function ToolCallDetail({
+  toolCall,
+  trans
+}: {
+  toolCall: IToolCallsEntry;
+  trans: TranslationBundle;
+}): JSX.Element {
+  const { kind, locations, rawInput, rawOutput } = toolCall;
+  const hasInput = rawInput !== null && rawInput !== undefined;
+  const hasOutput = rawOutput !== null && rawOutput !== undefined;
+
+  if (kind && FILE_KINDS.has(kind) && locations?.length) {
+    return (
+      <div className="jp-ai-tool-call-item-detail">
+        {locations.map((loc, i) => (
+          <div key={i} className="jp-ai-tool-call-item-detail-path">
+            {toServerRelativePath(loc)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="jp-ai-tool-call-item-detail">
+      {hasInput && (
+        <ToolCallSection label={trans.__('Input')} trans={trans}>
+          {formatToolCallIO(rawInput)}
+        </ToolCallSection>
+      )}
+      {hasOutput && (
+        <ToolCallSection label={trans.__('Output')} trans={trans}>
+          {formatToolCallIO(rawOutput)}
+        </ToolCallSection>
+      )}
+    </div>
+  );
+}
+
 function ToolCallDiffBlock({
   diff,
   trans,
@@ -554,11 +642,12 @@ function ToolCallRow({
   const selectedOption = toolCall.permissionOptions?.find(
     option => option.optionId === toolCall.selectedOptionId
   );
+  const status = toolCall.status ?? 'in_progress';
+
   const isRejected =
     toolCall.permissionStatus === 'resolved' &&
-    !!selectedOption?.kind?.includes('reject');
+    (!!selectedOption?.kind?.includes('reject') || status === 'rejected');
   const hasPendingPermission = toolCall.permissionStatus === 'pending';
-  const status = toolCall.status ?? 'in_progress';
   const isInProgress =
     !isRejected &&
     (status === 'in_progress' || status === 'pending' || hasPendingPermission);
@@ -572,8 +661,13 @@ function ToolCallRow({
         ? '\u2717'
         : '\u2022';
   const effectiveStatus = (isRejected ? 'failed' : status).replace(/_/g, '-');
-  const cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}`;
+
   const hasDiffs = !!toolCall.diffs?.length;
+  const hasExpandableContent =
+    hasDiffs ||
+    (!hasDiffs && (isCompleted || isFailed) && hasDetailContent(toolCall));
+
+  const cssClass = `jp-ai-tool-call-item jp-ai-tool-call-item-${effectiveStatus}${!hasExpandableContent && !hasPendingPermission ? ' jp-ai-tool-call-item-no-detail' : ''}`;
 
   if (hasDiffs && hasPendingPermission) {
     return (
@@ -581,7 +675,15 @@ function ToolCallRow({
         <details open>
           <summary>
             <span className="jp-ai-tool-call-item-icon">{icon}</span>{' '}
-            <em>{displayTitle}</em>
+            <div className="jp-ai-tool-call-item-title">
+              {displayTitle}
+              {toolCall.summary && (
+                <span className="jp-ai-tool-call-item-summary">
+                  {'  '}
+                  {toolCall.summary}
+                </span>
+              )}
+            </div>
           </summary>
           <ToolCallDiffView
             diffs={toolCall.diffs!}
@@ -608,7 +710,15 @@ function ToolCallRow({
           <details open>
             <summary>
               <span className="jp-ai-tool-call-item-icon">{icon}</span>{' '}
-              <em>{displayTitle}</em>
+              <div className="jp-ai-tool-call-item-title">
+                {displayTitle}
+                {toolCall.summary && (
+                  <span className="jp-ai-tool-call-item-summary">
+                    {'  '}
+                    {toolCall.summary}
+                  </span>
+                )}
+              </div>
             </summary>
             <div className="jp-ai-tool-call-item-detail">
               {permissionDetail}
@@ -624,18 +734,20 @@ function ToolCallRow({
     }
   }
 
-  const detailLines =
-    !hasDiffs && (isCompleted || isFailed)
-      ? buildToolCallDetailsLines(toolCall)
-      : [];
-  const hasExpandableContent = hasDiffs || detailLines.length > 0;
-
   if ((isCompleted || isFailed) && hasExpandableContent) {
     return (
       <details className={cssClass}>
         <summary>
           <span className="jp-ai-tool-call-item-icon">{icon}</span>{' '}
-          {displayTitle}
+          <div className="jp-ai-tool-call-item-title">
+            {displayTitle}
+            {toolCall.summary && (
+              <span className="jp-ai-tool-call-item-summary">
+                {'  '}
+                {toolCall.summary}
+              </span>
+            )}
+          </div>
           <PermissionLabel toolCall={toolCall} />
         </summary>
         {hasDiffs ? (
@@ -645,9 +757,7 @@ function ToolCallRow({
             openToolCallPath={openToolCallPath}
           />
         ) : (
-          <div className="jp-ai-tool-call-item-detail">
-            {detailLines.join('\n')}
-          </div>
+          <ToolCallDetail toolCall={toolCall} trans={trans} />
         )}
       </details>
     );
@@ -657,7 +767,15 @@ function ToolCallRow({
     return (
       <div className={cssClass}>
         <span className="jp-ai-tool-call-item-icon">{icon}</span>{' '}
-        <em>{displayTitle}</em>
+        <div className="jp-ai-tool-call-item-title">
+          {displayTitle}
+          {toolCall.summary && (
+            <span className="jp-ai-tool-call-item-summary">
+              {'  '}
+              {toolCall.summary}
+            </span>
+          )}
+        </div>
         <PermissionButtons
           toolCall={toolCall}
           trans={trans}
@@ -669,7 +787,16 @@ function ToolCallRow({
 
   return (
     <div className={cssClass}>
-      <span className="jp-ai-tool-call-item-icon">{icon}</span> {displayTitle}
+      <span className="jp-ai-tool-call-item-icon">{icon}</span>
+      <div className="jp-ai-tool-call-item-title">
+        {displayTitle}
+        {toolCall.summary && (
+          <span className="jp-ai-tool-call-item-summary">
+            {'  '}
+            {toolCall.summary}
+          </span>
+        )}
+      </div>
       <PermissionLabel toolCall={toolCall} />
     </div>
   );

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './error';
 export * from './inline-diff';
 export * from './message-queue';
 export * from './tool-call';

package/src/factory.tsx

@@ -12,7 +12,8 @@ import {
   GroupedToolCalls,
   InlineDiff,
   MessageQueue,
-  ToolCall
+  ToolCall,
+  ErrorMessage
 } from './components';
 
 import { ComponentRegistry } from './registry';
@@ -162,6 +163,7 @@ export class RendererFactory implements IComponentsRendererFactory {
     this.registry.add('grouped-tool-calls', GroupedToolCalls);
     this.registry.add('inline-diff', InlineDiff);
     this.registry.add('message-queue', MessageQueue);
+    this.registry.add('error', ErrorMessage);
   }
 
   createRenderer = (options: IRenderMime.IRendererOptions) => {

package/src/icons.ts

@@ -0,0 +1,7 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+export const errorIcon = new LabIcon({
+  name: 'jupyter-chat:error',
+  svgstr:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'
+});

package/src/index.ts

@@ -32,5 +32,6 @@ export * from './token';
 export * from './factory';
 export * from './registry';
 export * from './components';
+export * from './icons';
 
 export default factory;

package/src/token.ts

@@ -169,6 +169,10 @@ export interface IToolCallsEntry {
    * Human-readable title displayed in the UI.
    */
   title?: string;
+  /**
+   * Human-readable summary from tool input displayed with the title
+   */
+  summary?: string;
   /**
    * Tool operation category.
    */

package/style/base.css

@@ -233,15 +233,6 @@
 .jp-ai-tool-call-item {
   padding: 1px 0;
   font-family: var(--jp-content-font-family);
-}
-
-.jp-ai-tool-call-item-in-progress,
-.jp-ai-tool-call-item-pending {
-  color: var(--jp-ui-font-color2);
-}
-
-.jp-ai-tool-call-item-completed,
-.jp-ai-tool-call-item-failed {
   color: var(--jp-ui-font-color2);
 }
 
@@ -256,7 +247,30 @@
 details.jp-ai-tool-call-item summary,
 .jp-ai-tool-call-item details summary {
   cursor: pointer;
+}
+
+details.jp-ai-tool-call-item summary,
+.jp-ai-tool-call-item details summary,
+.jp-ai-tool-call-item.jp-ai-tool-call-item-no-detail {
   list-style: none;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--jp-layout-color1);
+  gap: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.jp-ai-tool-call-item-title {
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 500;
+  flex: 1;
+}
+
+.jp-ai-tool-call-item-summary {
+  font-weight: 400;
+  opacity: 0.8;
+  font-size: var(--jp-ui-font-size0);
 }
 
 details.jp-ai-tool-call-item summary::-webkit-details-marker,
@@ -284,11 +298,42 @@ details[open].jp-ai-tool-call-item summary::after,
 
 .jp-ai-tool-call-item-detail {
   margin: 2px 0 2px 20px;
-  font-size: var(--jp-code-font-size);
+  font-size: var(--jp-ui-font-size1);
   font-family: var(--jp-code-font-family);
-  color: var(--jp-ui-font-color2);
   white-space: pre-wrap;
   word-break: break-all;
+  padding-left: 5px;
+}
+
+.jp-ai-tool-call-detail-section {
+  margin-bottom: 8px;
+}
+
+.jp-ai-tool-call-detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.jp-ai-tool-call-detail-label {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 600;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.jp-ai-tool-call-detail-code {
+  background: var(--jp-layout-color2) !important;
+  border: 1px solid var(--jp-border-color1) !important;
+  border-radius: 4px !important;
+  padding: 8px !important;
+  margin: 0 !important;
+  font-size: var(--jp-ui-font-size1) !important;
+  overflow: auto;
+}
+
+.jp-ai-tool-call-detail-code code {
+  font-size: var(--jp-ui-font-size1) !important;
 }
 
 .jp-ai-tool-call-permission-buttons {
@@ -297,6 +342,7 @@ details[open].jp-ai-tool-call-item summary::after,
   margin: 4px 0;
   align-items: center;
   flex-wrap: wrap;
+  padding-left: 5px;
 }
 
 .jp-ai-tool-call-permission-tree {
@@ -598,3 +644,44 @@ details[open].jp-ai-tool-call-item summary::after,
 .jp-chat-message-queue-bubble:hover .jp-chat-message-queue-remove {
   opacity: 1;
 }
+
+/* Error Component Styling */
+.jp-ai-error-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  border-left: 4px solid var(--jp-error-color1);
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin: 8px 0;
+  box-shadow: var(--jp-elevation-z2);
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-ai-error-icon {
+  color: var(--jp-error-color1);
+}
+
+.jp-ai-error-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.jp-ai-error-title {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+  color: var(--jp-error-color1);
+}
+
+.jp-ai-error-text {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  word-break: break-word;
+  white-space: pre-wrap;
+  color: var(--jp-ui-font-color2);
+  line-height: 1.4;
+}