@jupyter-ai/acp-client 0.0.5 → 0.0.7

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

@@ -31,6 +31,80 @@ function formatOutput(rawOutput) {
     }
     return JSON.stringify(rawOutput, null, 2);
 }
+/**
+ * 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. Returns a plain string so callers can check null.
+ */
+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
+            ? locations[0] + '  \u2192  ' + locations[1]
+            : locations.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 full 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.). */
@@ -101,6 +175,20 @@ function ToolCallLine({ toolCall, onOpenFile }) {
                 React.createElement(DiffView, { diffs: toolCall.diffs, onOpenFile: onOpenFile })),
             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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyter-ai/acp-client",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "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/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

@@ -51,6 +51,106 @@ function formatOutput(rawOutput: unknown): string {
   return JSON.stringify(rawOutput, null, 2);
 }
 
+/**
+ * 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. Returns a plain string so callers can check null.
+ */
+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
+      ? locations[0] + '  \u2192  ' + locations[1]
+      : locations.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 full file path(s) from locations. */
 const FILE_KINDS = new Set(['read', 'edit', 'delete', 'move']);
 
@@ -147,6 +247,29 @@ function ToolCallLine({
     );
   }
 
+  // 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) : [];

package/style/base.css

@@ -211,3 +211,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;
+}