@jupyter-ai/acp-client 0.0.6 → 0.0.8

package/README.md

@@ -28,13 +28,13 @@ package also provides a default ACP client implementation as `JaiAcpClient`.
   the persona name, the persona avatar, and the `executable` starting the ACP
   agent server.
 
-For example, the `@Claude-ACP` persona is defined in `claude.py` using less than
+For example, the `@Claude` persona is defined in `claude.py` using less than
 20 lines of code:
 
 ```py
 class ClaudeAcpPersona(BaseAcpPersona):
     def __init__(self, *args, **kwargs):
-        executable = ["claude-code-acp"]
+        executable = ["claude-agent-acp"]
         super().__init__(*args, executable=executable, **kwargs)
 
     @property
@@ -44,19 +44,24 @@ class ClaudeAcpPersona(BaseAcpPersona):
         ))
 
         return PersonaDefaults(
-            name="Claude-ACP",
+            name="Claude",
             description="Claude Code as an ACP agent persona.",
             avatar_path=avatar_path,
             system_prompt="unused"
         )
 ```
 
-Currently, this package provides 2 personas:
+Currently, this package provides 4 personas:
 
-1. `@Claude-ACP`
-   - requires `claude-code-acp`, installed via `npm install -g @zed-industries/claude-code-acp`
-2. `@Kiro`
-   - requires `kiro-cli`, installed from https://kiro.dev
+- `@Claude`
+  - requires `claude-agent-acp`, installed via `npm install -g @zed-industries/claude-agent-acp`
+  - optional env variable `CLAUDE_CODE_EXECUTABLE` points to your custom-installed Claude executable location. By default, claude-agent-acp uses Claude packaged in `@zed-industries/claude-agent-acp`.
+- `@Gemini`
+  - requires `gemini` CLI (>= 0.34.0), installed via https://geminicli.com/
+- `@Kiro`
+  - requires `kiro-cli` (>= 1.25.0, < 2), installed via https://kiro.dev
+- `@Mistral-Vibe`
+  - requires `vibe-acp`, installed via `uv tool install mistral-vibe` or `pip install mistral-vibe`
 
 ## Dependencies
 
@@ -68,8 +73,10 @@ Currently, this package provides 2 personas:
 
 **Optional**
 
-- `claude-code-acp` (enables `@Claude-ACP`)
+- `claude-agent-acp` (enables `@Claude`)
+- `gemini` (enables `@Gemini`)
 - `kiro-cli` (enables `@Kiro`)
+- `mistral-vibe` (enables `@Mistral-Vibe` via the `vibe-acp` command)
 
 ## Install
 

package/lib/diff-view.d.ts

@@ -2,7 +2,9 @@ import { IToolCallDiff } from '@jupyter/chat';
 /**
  * Renders one or more file diffs.
  */
-export declare function DiffView({ diffs, onOpenFile }: {
+export declare function DiffView({ diffs, onOpenFile, toDisplayPath, pendingPermission }: {
     diffs: IToolCallDiff[];
     onOpenFile?: (path: string) => void;
+    toDisplayPath?: (path: string) => string;
+    pendingPermission?: boolean;
 }): JSX.Element;

package/lib/diff-view.js

@@ -1,15 +1,25 @@
 import React from 'react';
+import { PathExt } from '@jupyterlab/coreutils';
 import { structuredPatch } from 'diff';
+import clsx from 'clsx';
 /** Maximum number of diff lines shown before truncation. */
 const MAX_DIFF_LINES = 20;
 /**
  * Renders a single file diff block with filename header, line-level
  * highlighting, and click-to-expand truncation.
  */
-function DiffBlock({ diff, onOpenFile }) {
-    var _a, _b;
+function DiffBlock({ diff, onOpenFile, toDisplayPath, pendingPermission }) {
+    var _a;
     const patch = structuredPatch(diff.path, diff.path, (_a = diff.old_text) !== null && _a !== void 0 ? _a : '', diff.new_text, undefined, undefined, { context: Infinity });
-    const filename = (_b = diff.path.split('/').pop()) !== null && _b !== void 0 ? _b : diff.path;
+    const displayPath = toDisplayPath
+        ? toDisplayPath(diff.path)
+        : PathExt.basename(diff.path);
+    // toDisplayPath makes paths inside the server root relative. A leading '/'
+    // means the file is outside it and cannot be opened via the Contents API.
+    const isOutsideRoot = displayPath.startsWith('/');
+    const isClickable = !!onOpenFile &&
+        !isOutsideRoot &&
+        !(pendingPermission && diff.old_text === undefined);
     const [expanded, setExpanded] = React.useState(false);
     // Flatten hunks into renderable lines
     const allLines = [];
@@ -37,7 +47,9 @@ function DiffBlock({ diff, onOpenFile }) {
     const visible = canTruncate && !expanded ? allLines.slice(0, MAX_DIFF_LINES) : allLines;
     const hiddenCount = allLines.length - MAX_DIFF_LINES;
     return (React.createElement("div", { className: "jp-jupyter-ai-acp-client-diff-block" },
-        React.createElement("div", { className: "jp-jupyter-ai-acp-client-diff-header", onClick: onOpenFile ? () => onOpenFile(diff.path) : undefined, title: diff.path }, filename),
+        React.createElement("div", { className: clsx('jp-jupyter-ai-acp-client-diff-header', {
+                'jp-jupyter-ai-acp-client-diff-header-clickable': isClickable
+            }), onClick: isClickable ? () => onOpenFile(diff.path) : undefined, title: diff.path }, displayPath),
         React.createElement("div", { className: "jp-jupyter-ai-acp-client-diff-content" },
             visible.map((line) => (React.createElement("div", { key: line.key, className: `jp-jupyter-ai-acp-client-diff-line ${line.cls}` },
                 React.createElement("span", { className: "jp-jupyter-ai-acp-client-diff-line-text" },
@@ -53,6 +65,6 @@ function DiffBlock({ diff, onOpenFile }) {
 /**
  * Renders one or more file diffs.
  */
-export function DiffView({ diffs, onOpenFile }) {
-    return (React.createElement("div", { className: "jp-jupyter-ai-acp-client-diff-container" }, diffs.map((d, i) => (React.createElement(DiffBlock, { key: i, diff: d, onOpenFile: onOpenFile })))));
+export function DiffView({ diffs, onOpenFile, toDisplayPath, pendingPermission }) {
+    return (React.createElement("div", { className: "jp-jupyter-ai-acp-client-diff-container" }, diffs.map((d, i) => (React.createElement(DiffBlock, { key: i, diff: d, onOpenFile: onOpenFile, toDisplayPath: toDisplayPath, pendingPermission: pendingPermission })))));
 }

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { IChatCommandProvider, IInputModel, ChatCommand } from '@jupyter/chat';
+import { IChatCommandProvider, IInputModel, IInputToolbarRegistryFactory, ChatCommand } from '@jupyter/chat';
 /**
  * A command provider that provides completions for slash commands and handles
  * slash command calls.
@@ -36,4 +36,11 @@ export declare class SlashCommandProvider implements IChatCommandProvider {
     onSubmit(inputModel: IInputModel): Promise<void>;
 }
 export declare const slashCommandPlugin: JupyterFrontEndPlugin<void>;
-export default slashCommandPlugin;
+/**
+ * Plugin that provides a custom input toolbar factory with the ACP stop button.
+ * The chat panel picks this up and uses it to build the toolbar for each chat.
+ */
+export declare const toolbarPlugin: JupyterFrontEndPlugin<IInputToolbarRegistryFactory>;
+declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IInputToolbarRegistryFactory>)[];
+export default _default;
+export { stopStreaming } from './request';

package/lib/index.js

@@ -1,6 +1,7 @@
-import { IChatCommandRegistry, IMessagePreambleRegistry } from '@jupyter/chat';
+import { IChatCommandRegistry, IMessagePreambleRegistry, IInputToolbarRegistryFactory, InputToolbarRegistry } from '@jupyter/chat';
 import { ToolCallsComponent } from './tool-calls';
 import { getAcpSlashCommands } from './request';
+import { AcpStopButton } from './stop-button';
 const SLASH_COMMAND_PROVIDER_ID = '@jupyter-ai/acp-client:slash-command-provider';
 /**
  * A command provider that provides completions for slash commands and handles
@@ -110,4 +111,29 @@ export const slashCommandPlugin = {
         }
     }
 };
-export default slashCommandPlugin;
+/**
+ * Plugin that provides a custom input toolbar factory with the ACP stop button.
+ * The chat panel picks this up and uses it to build the toolbar for each chat.
+ */
+export const toolbarPlugin = {
+    id: '@jupyter-ai/acp-client:toolbar',
+    description: 'Provides a chat input toolbar with ACP stop streaming button.',
+    autoStart: true,
+    provides: IInputToolbarRegistryFactory,
+    activate: () => {
+        return {
+            create: () => {
+                // Start with the default toolbar (Send, Attach, Cancel, SaveEdit)
+                const registry = InputToolbarRegistry.defaultToolbarRegistry();
+                // Add our stop button (position 90 = just before Send at 100)
+                registry.addItem('stop', {
+                    element: AcpStopButton,
+                    position: 10
+                });
+                return registry;
+            }
+        };
+    }
+};
+export default [slashCommandPlugin, toolbarPlugin];
+export { stopStreaming } from './request';

package/lib/request.d.ts

@@ -15,4 +15,5 @@ export declare function getAcpSlashCommands(chatPath: string, personaMentionName
  * Send the user's permission decision to the backend.
  */
 export declare function submitPermissionDecision(sessionId: string, toolCallId: string, optionId: string): Promise<void>;
+export declare function stopStreaming(chatPath: string, personaMentionName?: string | null): Promise<void>;
 export {};

package/lib/request.js

@@ -63,3 +63,18 @@ export async function submitPermissionDecision(sessionId, toolCallId, optionId)
         })
     });
 }
+export async function stopStreaming(chatPath, personaMentionName = null) {
+    try {
+        if (personaMentionName === null) {
+            await requestAPI(`/stop?chat_path=${chatPath}`, { method: 'POST' });
+        }
+        else {
+            await requestAPI(`/stop/${personaMentionName}?chat_path=${chatPath}`, {
+                method: 'POST'
+            });
+        }
+    }
+    catch (e) {
+        console.warn('Error stopping stream: ', e);
+    }
+}

package/lib/stop-button.d.ts

@@ -0,0 +1,7 @@
+import { InputToolbarRegistry } from '@jupyter/chat';
+/**
+ * A stop button for the chat input toolbar. Observes the chat model's
+ * writers list to enable itself when an AI bot is actively writing,
+ * and calls the ACP stop streaming endpoint on click.
+ */
+export declare function AcpStopButton(props: InputToolbarRegistry.IToolbarItemProps): JSX.Element;

package/lib/stop-button.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import StopIcon from '@mui/icons-material/Stop';
+import { TooltippedIconButton } from '@jupyter/chat';
+import { stopStreaming } from './request';
+const STOP_BUTTON_CLASS = 'jp-jupyter-ai-acp-client-stopButton';
+/**
+ * A stop button for the chat input toolbar. Observes the chat model's
+ * writers list to enable itself when an AI bot is actively writing,
+ * and calls the ACP stop streaming endpoint on click.
+ */
+export function AcpStopButton(props) {
+    const { chatModel } = props;
+    const [disabled, setDisabled] = useState(true);
+    const [inFlight, setInFlight] = useState(false);
+    const tooltip = 'Stop generating';
+    useEffect(() => {
+        var _a;
+        if (!chatModel) {
+            setDisabled(true);
+            return;
+        }
+        const checkWriters = () => {
+            const hasAIWriter = chatModel.writers.some(w => w.user.bot);
+            setDisabled(!hasAIWriter);
+        };
+        checkWriters();
+        (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.connect(checkWriters);
+        return () => {
+            var _a;
+            (_a = chatModel.writersChanged) === null || _a === void 0 ? void 0 : _a.disconnect(checkWriters);
+        };
+    }, [chatModel]);
+    async function handleStop() {
+        if (!chatModel) {
+            return;
+        }
+        setInFlight(true);
+        try {
+            // Call stop with no persona name, backend stops all personas
+            await stopStreaming(chatModel.name, null);
+        }
+        finally {
+            setInFlight(false);
+        }
+    }
+    return (React.createElement(TooltippedIconButton, { onClick: handleStop, tooltip: tooltip, disabled: disabled || inFlight, buttonProps: {
+            title: tooltip,
+            className: STOP_BUTTON_CLASS
+        }, "aria-label": tooltip },
+        React.createElement(StopIcon, null)));
+}

package/lib/tool-calls.js

@@ -1,7 +1,28 @@
 import React from 'react';
+import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 import { submitPermissionDecision } from './request';
 import clsx from 'clsx';
 import { DiffView } from './diff-view';
+/**
+ * Convert an absolute filesystem path to a server-relative path.
+ * Returns the path unchanged if the server root is not set or the path
+ * is outside it.
+ */
+function toServerRelativePath(absolutePath) {
+    const rootUri = PageConfig.getOption('rootUri');
+    const serverRoot = rootUri
+        ? new URL(rootUri).pathname
+        : PageConfig.getOption('serverRoot');
+    if (!serverRoot) {
+        return absolutePath;
+    }
+    const relativePath = PathExt.relative(serverRoot, absolutePath);
+    // Path is outside server root — keep absolute
+    if (relativePath.startsWith('..')) {
+        return absolutePath;
+    }
+    return relativePath;
+}
 /**
  * Preamble component that renders tool call status lines above message body.
  * Returns null if the message has no tool calls.
@@ -14,7 +35,7 @@ export function ToolCallsComponent(props) {
     }
     const onOpenFile = (path) => {
         var _a;
-        (_a = model.documentManager) === null || _a === void 0 ? void 0 : _a.openOrReveal(path);
+        (_a = model.documentManager) === null || _a === void 0 ? void 0 : _a.openOrReveal(toServerRelativePath(path));
     };
     return (React.createElement("div", { className: "jp-jupyter-ai-acp-client-tool-calls" }, ((_d = (_c = message.metadata) === null || _c === void 0 ? void 0 : _c.tool_calls) !== null && _d !== void 0 ? _d : []).map((tc) => (React.createElement(ToolCallLine, { key: tc.tool_call_id, toolCall: tc, onOpenFile: onOpenFile })))));
 }
@@ -31,7 +52,83 @@ function formatOutput(rawOutput) {
     }
     return JSON.stringify(rawOutput, null, 2);
 }
-/** Tool kinds where expanded view shows full file path(s) from locations. */
+/**
+ * Format tool input for display. Flat objects (all primitive values) render as
+ * key-value pairs; nested/complex values fall back to JSON.
+ */
+function formatToolInput(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(([, v]) => typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean');
+    if (isFlat) {
+        return entries.map(([k, v]) => `${k}: ${v}`).join('\n');
+    }
+    return JSON.stringify(input, null, 2);
+}
+/**
+ * Compute the pre-permission detail text for a tool call, or null if nothing
+ * to show beyond the title.
+ */
+function buildPermissionDetail(toolCall) {
+    const { kind, title, locations, raw_input } = toolCall;
+    if (kind === 'execute') {
+        // Prefer raw_input.command (ACP-compliant agents)
+        const rawObj = typeof raw_input === 'object' && raw_input !== null
+            ? raw_input
+            : null;
+        const cmd = rawObj && typeof rawObj.command === 'string'
+            ? rawObj.command
+            : (title === null || title === void 0 ? void 0 : title.replace(/^Running:\s*/i, '').replace(/\.\.\.$/, '').trim()) || null;
+        // If stripping produced nothing new, don't show.
+        if (!cmd || cmd === title) {
+            return null;
+        }
+        return '$ ' + cmd;
+    }
+    if ((kind === 'delete' || kind === 'move' || kind === 'read') &&
+        (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return kind === 'move' && locations.length >= 2
+            ? toServerRelativePath(locations[0]) +
+                '  \u2192  ' +
+                toServerRelativePath(locations[1])
+            : locations.map(toServerRelativePath).join('\n');
+    }
+    // Generic fallback for unknown/MCP kinds with raw_input.
+    if (raw_input !== null &&
+        typeof raw_input === 'object' &&
+        !Array.isArray(raw_input)) {
+        const obj = raw_input;
+        const purpose = typeof obj.__tool_use_purpose === 'string'
+            ? obj.__tool_use_purpose
+            : null;
+        // Filter remaining __-prefixed internal keys for the params display.
+        const paramEntries = Object.entries(obj).filter(([k]) => !k.startsWith('__'));
+        const params = paramEntries.length > 0
+            ? formatToolInput(Object.fromEntries(paramEntries))
+            : null;
+        if (purpose && params) {
+            return purpose + '\n' + params;
+        }
+        if (purpose) {
+            return purpose;
+        }
+        if (params) {
+            return params;
+        }
+        return null;
+    }
+    // Non-object raw_input (string, array, primitive) — pass through.
+    if (raw_input !== null && raw_input !== undefined) {
+        return formatToolInput(raw_input);
+    }
+    return null;
+}
+/** Tool kinds where expanded view shows file path(s) from locations. */
 const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
 /** Tool kinds where expanded view shows raw_output (stdout, search results, etc.). */
 const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
@@ -39,7 +136,7 @@ const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
  * Build the expandable details content for a tool call.
  * Returns lines of metadata to display, or empty array if nothing to show.
  *
- * File operations show full paths; output operations show raw_output;
+ * File operations show server-relative paths; output operations show raw_output;
  * switch_mode/other/None show nothing (clean title only).
  */
 function buildDetailsLines(toolCall) {
@@ -48,7 +145,7 @@ function buildDetailsLines(toolCall) {
     const kind = toolCall.kind;
     if (kind && FILE_KINDS.has(kind) && ((_a = toolCall.locations) === null || _a === void 0 ? void 0 : _a.length)) {
         for (const loc of toolCall.locations) {
-            lines.push(loc);
+            lines.push(toServerRelativePath(loc));
         }
     }
     else if (kind && OUTPUT_KINDS.has(kind) && toolCall.raw_output) {
@@ -98,9 +195,23 @@ function ToolCallLine({ toolCall, onOpenFile }) {
                     React.createElement("span", { className: "jp-jupyter-ai-acp-client-tool-call-icon" }, icon),
                     ' ',
                     React.createElement("em", null, displayTitle)),
-                React.createElement(DiffView, { diffs: toolCall.diffs, onOpenFile: onOpenFile })),
+                React.createElement(DiffView, { diffs: toolCall.diffs, onOpenFile: toolCall.kind === 'edit' ? onOpenFile : undefined, toDisplayPath: toServerRelativePath, pendingPermission: true })),
             React.createElement(PermissionButtons, { toolCall: toolCall })));
     }
+    // Pending permission without diffs: show kind-specific detail if available
+    if (!hasDiffs && hasPendingPermission) {
+        const permissionDetail = buildPermissionDetail(toolCall);
+        if (permissionDetail !== null) {
+            return (React.createElement("div", { className: cssClass },
+                React.createElement("details", { open: true },
+                    React.createElement("summary", null,
+                        React.createElement("span", { className: "jp-jupyter-ai-acp-client-tool-call-icon" }, icon),
+                        ' ',
+                        React.createElement("em", null, displayTitle)),
+                    React.createElement("div", { className: "jp-jupyter-ai-acp-client-tool-call-detail" }, permissionDetail)),
+                React.createElement(PermissionButtons, { toolCall: toolCall })));
+        }
+    }
     // Completed/failed with expandable content (diffs or metadata)
     const detailsLines = !hasDiffs && (isCompleted || isFailed) ? buildDetailsLines(toolCall) : [];
     const hasExpandableContent = hasDiffs || detailsLines.length > 0;
@@ -111,7 +222,7 @@ function ToolCallLine({ toolCall, onOpenFile }) {
                 ' ',
                 displayTitle,
                 React.createElement(PermissionLabel, { toolCall: toolCall })),
-            hasDiffs ? (React.createElement(DiffView, { diffs: toolCall.diffs, onOpenFile: onOpenFile })) : (React.createElement("div", { className: "jp-jupyter-ai-acp-client-tool-call-detail" }, detailsLines.join('\n')))));
+            hasDiffs ? (React.createElement(DiffView, { diffs: toolCall.diffs, onOpenFile: onOpenFile, toDisplayPath: toServerRelativePath })) : (React.createElement("div", { className: "jp-jupyter-ai-acp-client-tool-call-detail" }, detailsLines.join('\n')))));
     }
     // In-progress — italic
     if (isInProgress) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyter-ai/acp-client",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "description": "The ACP client for Jupyter AI, allowing for ACP agents to be used in JupyterLab",
     "keywords": [
         "jupyter",
@@ -116,6 +116,9 @@
         },
         "extension": true,
         "outputDir": "jupyter_ai_acp_client/labextension",
+        "disabledExtensions": [
+            "jupyterlab-chat-extension:inputToolbarFactory"
+        ],
         "sharedPackages": {
             "@jupyter/chat": {
                 "bundled": false,

package/src/diff-view.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IToolCallDiff } from '@jupyter/chat';
+import { PathExt } from '@jupyterlab/coreutils';
 import { structuredPatch } from 'diff';
+import clsx from 'clsx';
 
 /** Maximum number of diff lines shown before truncation. */
 const MAX_DIFF_LINES = 20;
@@ -19,10 +21,14 @@ interface IDiffLineInfo {
  */
 function DiffBlock({
   diff,
-  onOpenFile
+  onOpenFile,
+  toDisplayPath,
+  pendingPermission
 }: {
   diff: IToolCallDiff;
   onOpenFile?: (path: string) => void;
+  toDisplayPath?: (path: string) => string;
+  pendingPermission?: boolean;
 }): JSX.Element {
   const patch = structuredPatch(
     diff.path,
@@ -33,7 +39,16 @@ function DiffBlock({
     undefined,
     { context: Infinity }
   );
-  const filename = diff.path.split('/').pop() ?? diff.path;
+  const displayPath = toDisplayPath
+    ? toDisplayPath(diff.path)
+    : PathExt.basename(diff.path);
+  // toDisplayPath makes paths inside the server root relative. A leading '/'
+  // means the file is outside it and cannot be opened via the Contents API.
+  const isOutsideRoot = displayPath.startsWith('/');
+  const isClickable =
+    !!onOpenFile &&
+    !isOutsideRoot &&
+    !(pendingPermission && diff.old_text === undefined);
   const [expanded, setExpanded] = React.useState(false);
 
   // Flatten hunks into renderable lines
@@ -67,11 +82,13 @@ function DiffBlock({
   return (
     <div className="jp-jupyter-ai-acp-client-diff-block">
       <div
-        className="jp-jupyter-ai-acp-client-diff-header"
-        onClick={onOpenFile ? () => onOpenFile(diff.path) : undefined}
+        className={clsx('jp-jupyter-ai-acp-client-diff-header', {
+          'jp-jupyter-ai-acp-client-diff-header-clickable': isClickable
+        })}
+        onClick={isClickable ? () => onOpenFile!(diff.path) : undefined}
         title={diff.path}
       >
-        {filename}
+        {displayPath}
       </div>
       <div className="jp-jupyter-ai-acp-client-diff-content">
         {visible.map((line: IDiffLineInfo) => (
@@ -110,15 +127,25 @@ function DiffBlock({
  */
 export function DiffView({
   diffs,
-  onOpenFile
+  onOpenFile,
+  toDisplayPath,
+  pendingPermission
 }: {
   diffs: IToolCallDiff[];
   onOpenFile?: (path: string) => void;
+  toDisplayPath?: (path: string) => string;
+  pendingPermission?: boolean;
 }): JSX.Element {
   return (
     <div className="jp-jupyter-ai-acp-client-diff-container">
       {diffs.map((d, i) => (
-        <DiffBlock key={i} diff={d} onOpenFile={onOpenFile} />
+        <DiffBlock
+          key={i}
+          diff={d}
+          onOpenFile={onOpenFile}
+          toDisplayPath={toDisplayPath}
+          pendingPermission={pendingPermission}
+        />
       ))}
     </div>
   );

package/src/index.ts

@@ -8,12 +8,15 @@ import {
   IChatCommandRegistry,
   IInputModel,
   IMessagePreambleRegistry,
+  IInputToolbarRegistryFactory,
+  InputToolbarRegistry,
   ChatCommand
 } from '@jupyter/chat';
 
 import { ToolCallsComponent } from './tool-calls';
 
 import { getAcpSlashCommands } from './request';
+import { AcpStopButton } from './stop-button';
 
 const SLASH_COMMAND_PROVIDER_ID =
   '@jupyter-ai/acp-client:slash-command-provider';
@@ -146,4 +149,33 @@ export const slashCommandPlugin: JupyterFrontEndPlugin<void> = {
   }
 };
 
-export default slashCommandPlugin;
+/**
+ * Plugin that provides a custom input toolbar factory with the ACP stop button.
+ * The chat panel picks this up and uses it to build the toolbar for each chat.
+ */
+export const toolbarPlugin: JupyterFrontEndPlugin<IInputToolbarRegistryFactory> =
+  {
+    id: '@jupyter-ai/acp-client:toolbar',
+    description:
+      'Provides a chat input toolbar with ACP stop streaming button.',
+    autoStart: true,
+    provides: IInputToolbarRegistryFactory,
+    activate: (): IInputToolbarRegistryFactory => {
+      return {
+        create: () => {
+          // Start with the default toolbar (Send, Attach, Cancel, SaveEdit)
+          const registry = InputToolbarRegistry.defaultToolbarRegistry();
+          // Add our stop button (position 90 = just before Send at 100)
+          registry.addItem('stop', {
+            element: AcpStopButton,
+            position: 10
+          });
+          return registry;
+        }
+      };
+    }
+  };
+
+export default [slashCommandPlugin, toolbarPlugin];
+
+export { stopStreaming } from './request';

package/src/jupyter-chat-augment.d.ts

@@ -61,6 +61,11 @@ declare module '@jupyter/chat' {
      * The ACP session ID this tool call belongs to.
      */
     session_id?: string;
+    /**
+     * Raw parameters sent to the tool, from the ACP agent.
+     * Used to show tool input before the user approves a permission request.
+     */
+    raw_input?: unknown;
     /**
      * File diffs from ACP FileEditToolCallContent.
      */

package/src/request.ts

@@ -92,3 +92,20 @@ export async function submitPermissionDecision(
     })
   });
 }
+
+export async function stopStreaming(
+  chatPath: string,
+  personaMentionName: string | null = null
+): Promise<void> {
+  try {
+    if (personaMentionName === null) {
+      await requestAPI(`/stop?chat_path=${chatPath}`, { method: 'POST' });
+    } else {
+      await requestAPI(`/stop/${personaMentionName}?chat_path=${chatPath}`, {
+        method: 'POST'
+      });
+    }
+  } catch (e) {
+    console.warn('Error stopping stream: ', e);
+  }
+}

package/src/stop-button.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import StopIcon from '@mui/icons-material/Stop';
+import { InputToolbarRegistry, TooltippedIconButton } from '@jupyter/chat';
+import { stopStreaming } from './request';
+
+const STOP_BUTTON_CLASS = 'jp-jupyter-ai-acp-client-stopButton';
+
+/**
+ * A stop button for the chat input toolbar. Observes the chat model's
+ * writers list to enable itself when an AI bot is actively writing,
+ * and calls the ACP stop streaming endpoint on click.
+ */
+export function AcpStopButton(
+  props: InputToolbarRegistry.IToolbarItemProps
+): JSX.Element {
+  const { chatModel } = props;
+  const [disabled, setDisabled] = useState(true);
+  const [inFlight, setInFlight] = useState(false);
+  const tooltip = 'Stop generating';
+
+  useEffect(() => {
+    if (!chatModel) {
+      setDisabled(true);
+      return;
+    }
+
+    const checkWriters = () => {
+      const hasAIWriter = chatModel.writers.some(w => w.user.bot);
+      setDisabled(!hasAIWriter);
+    };
+
+    checkWriters();
+    chatModel.writersChanged?.connect(checkWriters);
+
+    return () => {
+      chatModel.writersChanged?.disconnect(checkWriters);
+    };
+  }, [chatModel]);
+
+  async function handleStop() {
+    if (!chatModel) {
+      return;
+    }
+
+    setInFlight(true);
+    try {
+      // Call stop with no persona name, backend stops all personas
+      await stopStreaming(chatModel.name, null);
+    } finally {
+      setInFlight(false);
+    }
+  }
+
+  return (
+    <TooltippedIconButton
+      onClick={handleStop}
+      tooltip={tooltip}
+      disabled={disabled || inFlight}
+      buttonProps={{
+        title: tooltip,
+        className: STOP_BUTTON_CLASS
+      }}
+      aria-label={tooltip}
+    >
+      <StopIcon />
+    </TooltippedIconButton>
+  );
+}

package/src/tool-calls.tsx

@@ -4,10 +4,32 @@ import {
   IPermissionOption,
   MessagePreambleProps
 } from '@jupyter/chat';
+import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 import { submitPermissionDecision } from './request';
 import clsx from 'clsx';
 import { DiffView } from './diff-view';
 
+/**
+ * Convert an absolute filesystem path to a server-relative path.
+ * Returns the path unchanged if the server root is not set or the path
+ * is outside it.
+ */
+function toServerRelativePath(absolutePath: string): string {
+  const rootUri = PageConfig.getOption('rootUri');
+  const serverRoot = rootUri
+    ? new URL(rootUri).pathname
+    : PageConfig.getOption('serverRoot');
+  if (!serverRoot) {
+    return absolutePath;
+  }
+  const relativePath = PathExt.relative(serverRoot, absolutePath);
+  // Path is outside server root — keep absolute
+  if (relativePath.startsWith('..')) {
+    return absolutePath;
+  }
+  return relativePath;
+}
+
 /**
  * Preamble component that renders tool call status lines above message body.
  * Returns null if the message has no tool calls.
@@ -21,7 +43,7 @@ export function ToolCallsComponent(
   }
 
   const onOpenFile = (path: string) => {
-    model.documentManager?.openOrReveal(path);
+    model.documentManager?.openOrReveal(toServerRelativePath(path));
   };
 
   return (
@@ -51,7 +73,109 @@ function formatOutput(rawOutput: unknown): string {
   return JSON.stringify(rawOutput, null, 2);
 }
 
-/** Tool kinds where expanded view shows full file path(s) from locations. */
+/**
+ * Format tool input for display. Flat objects (all primitive values) render as
+ * key-value pairs; nested/complex values fall back to JSON.
+ */
+function formatToolInput(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(
+    ([, v]) =>
+      typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean'
+  );
+  if (isFlat) {
+    return entries.map(([k, v]) => `${k}: ${v}`).join('\n');
+  }
+  return JSON.stringify(input, null, 2);
+}
+
+/**
+ * Compute the pre-permission detail text for a tool call, or null if nothing
+ * to show beyond the title.
+ */
+function buildPermissionDetail(toolCall: IToolCall): string | null {
+  const { kind, title, locations, raw_input } = toolCall;
+
+  if (kind === 'execute') {
+    // Prefer raw_input.command (ACP-compliant agents)
+    const rawObj =
+      typeof raw_input === 'object' && raw_input !== null
+        ? (raw_input as Record<string, unknown>)
+        : null;
+    const cmd =
+      rawObj && typeof rawObj.command === 'string'
+        ? rawObj.command
+        : title
+            ?.replace(/^Running:\s*/i, '')
+            .replace(/\.\.\.$/, '')
+            .trim() || null;
+    // If stripping produced nothing new, don't show.
+    if (!cmd || cmd === title) {
+      return null;
+    }
+    return '$ ' + cmd;
+  }
+
+  if (
+    (kind === 'delete' || kind === 'move' || kind === 'read') &&
+    locations?.length
+  ) {
+    return kind === 'move' && locations.length >= 2
+      ? toServerRelativePath(locations[0]) +
+          '  \u2192  ' +
+          toServerRelativePath(locations[1])
+      : locations.map(toServerRelativePath).join('\n');
+  }
+
+  // Generic fallback for unknown/MCP kinds with raw_input.
+  if (
+    raw_input !== null &&
+    typeof raw_input === 'object' &&
+    !Array.isArray(raw_input)
+  ) {
+    const obj = raw_input as Record<string, unknown>;
+
+    const purpose =
+      typeof obj.__tool_use_purpose === 'string'
+        ? obj.__tool_use_purpose
+        : null;
+
+    // Filter remaining __-prefixed internal keys for the params display.
+    const paramEntries = Object.entries(obj).filter(
+      ([k]) => !k.startsWith('__')
+    );
+    const params =
+      paramEntries.length > 0
+        ? formatToolInput(Object.fromEntries(paramEntries))
+        : null;
+
+    if (purpose && params) {
+      return purpose + '\n' + params;
+    }
+    if (purpose) {
+      return purpose;
+    }
+    if (params) {
+      return params;
+    }
+    return null;
+  }
+
+  // Non-object raw_input (string, array, primitive) — pass through.
+  if (raw_input !== null && raw_input !== undefined) {
+    return formatToolInput(raw_input);
+  }
+
+  return null;
+}
+
+/** Tool kinds where expanded view shows file path(s) from locations. */
 const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
 
 /** Tool kinds where expanded view shows raw_output (stdout, search results, etc.). */
@@ -61,7 +185,7 @@ const OUTPUT_KINDS = new Set(['search', 'execute', 'think', 'fetch']);
  * Build the expandable details content for a tool call.
  * Returns lines of metadata to display, or empty array if nothing to show.
  *
- * File operations show full paths; output operations show raw_output;
+ * File operations show server-relative paths; output operations show raw_output;
  * switch_mode/other/None show nothing (clean title only).
  */
 function buildDetailsLines(toolCall: IToolCall): string[] {
@@ -70,7 +194,7 @@ function buildDetailsLines(toolCall: IToolCall): string[] {
 
   if (kind && FILE_KINDS.has(kind) && toolCall.locations?.length) {
     for (const loc of toolCall.locations) {
-      lines.push(loc);
+      lines.push(toServerRelativePath(loc));
     }
   } else if (kind && OUTPUT_KINDS.has(kind) && toolCall.raw_output) {
     lines.push(formatOutput(toolCall.raw_output));
@@ -140,13 +264,41 @@ function ToolCallLine({
             </span>{' '}
             <em>{displayTitle}</em>
           </summary>
-          <DiffView diffs={toolCall.diffs!} onOpenFile={onOpenFile} />
+          <DiffView
+            diffs={toolCall.diffs!}
+            onOpenFile={toolCall.kind === 'edit' ? onOpenFile : undefined}
+            toDisplayPath={toServerRelativePath}
+            pendingPermission
+          />
         </details>
         <PermissionButtons toolCall={toolCall} />
       </div>
     );
   }
 
+  // Pending permission without diffs: show kind-specific detail if available
+  if (!hasDiffs && hasPendingPermission) {
+    const permissionDetail = buildPermissionDetail(toolCall);
+    if (permissionDetail !== null) {
+      return (
+        <div className={cssClass}>
+          <details open>
+            <summary>
+              <span className="jp-jupyter-ai-acp-client-tool-call-icon">
+                {icon}
+              </span>{' '}
+              <em>{displayTitle}</em>
+            </summary>
+            <div className="jp-jupyter-ai-acp-client-tool-call-detail">
+              {permissionDetail}
+            </div>
+          </details>
+          <PermissionButtons toolCall={toolCall} />
+        </div>
+      );
+    }
+  }
+
   // Completed/failed with expandable content (diffs or metadata)
   const detailsLines =
     !hasDiffs && (isCompleted || isFailed) ? buildDetailsLines(toolCall) : [];
@@ -163,7 +315,11 @@ function ToolCallLine({
           <PermissionLabel toolCall={toolCall} />
         </summary>
         {hasDiffs ? (
-          <DiffView diffs={toolCall.diffs!} onOpenFile={onOpenFile} />
+          <DiffView
+            diffs={toolCall.diffs!}
+            onOpenFile={onOpenFile}
+            toDisplayPath={toServerRelativePath}
+          />
         ) : (
           <div className="jp-jupyter-ai-acp-client-tool-call-detail">
             {detailsLines.join('\n')}

package/style/base.css

@@ -145,10 +145,13 @@ details[open].jp-jupyter-ai-acp-client-tool-call summary::after,
   font-size: var(--jp-ui-font-size0);
   font-family: var(--jp-code-font-family);
   color: var(--jp-ui-font-color2);
+}
+
+.jp-jupyter-ai-acp-client-diff-header-clickable {
   cursor: pointer;
 }
 
-.jp-jupyter-ai-acp-client-diff-header:hover {
+.jp-jupyter-ai-acp-client-diff-header-clickable:hover {
   text-decoration: underline;
 }
 
@@ -211,3 +214,26 @@ details[open].jp-jupyter-ai-acp-client-tool-call summary::after,
 .jp-jupyter-ai-acp-client-diff-context {
   color: var(--jp-ui-font-color2);
 }
+
+/* Stop streaming button */
+.jp-jupyter-ai-acp-client-stopButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  background: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+}
+
+.jp-jupyter-ai-acp-client-stopButton:hover {
+  background: var(--jp-layout-color3);
+}
+
+.jp-jupyter-ai-acp-client-stopButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}