@plmbr/notebook-intelligence 5.0.0 → 5.1.0-a.1

package/src/components/tool-call-card.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import {
+  VscChevronDown,
+  VscChevronRight,
+  VscClose,
+  VscEdit,
+  VscError,
+  VscEye,
+  VscPassFilled,
+  VscSync,
+  VscTerminal,
+  VscTools
+} from '../icons';
+
+export interface IToolCallDiffLine {
+  type: 'add' | 'remove' | 'context' | string;
+  content: string;
+}
+
+export interface IToolCallDiff {
+  path: string;
+  lines: IToolCallDiffLine[];
+  truncated?: boolean;
+}
+
+/**
+ * A single agent tool call surfaced as a persistent chat card. Mirrors the
+ * `ToolCallData` payload emitted by the server: it stays in the transcript
+ * after the turn ends and carries its final status, unlike the transient
+ * single progress line it replaces. File-edit tools also carry inline diffs.
+ */
+export interface IToolCall {
+  id: string;
+  title: string;
+  // Coarse category, used only to pick the leading icon.
+  kind: 'read' | 'edit' | 'execute' | 'other' | string;
+  status: 'in_progress' | 'completed' | 'failed' | 'cancelled' | string;
+  diffs?: IToolCallDiff[];
+}
+
+const KIND_ICONS: Record<string, React.FC<any>> = {
+  read: VscEye,
+  edit: VscEdit,
+  execute: VscTerminal,
+  other: VscTools
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  in_progress: 'in progress',
+  completed: 'completed',
+  failed: 'failed',
+  cancelled: 'cancelled'
+};
+
+const GUTTER: Record<string, string> = { add: '+', remove: '-' };
+
+function ToolCallDiffView(props: { diffs: IToolCallDiff[] }): JSX.Element {
+  return (
+    <div className="nbi-tool-call-diffs">
+      {props.diffs.map((diff, i) => (
+        <div className="nbi-tool-call-diff" key={i}>
+          {diff.path ? (
+            <div className="nbi-tool-call-diff-path" title={diff.path}>
+              {diff.path}
+            </div>
+          ) : null}
+          <div className="nbi-tool-call-diff-body">
+            {diff.lines.map((line, j) => (
+              <div
+                className={`nbi-tool-call-diff-line nbi-diff-${line.type}`}
+                key={j}
+              >
+                <span className="nbi-diff-gutter" aria-hidden="true">
+                  {GUTTER[line.type] ?? ' '}
+                </span>
+                {/* The +/- gutter is decorative; give screen readers the
+                    add/remove distinction as text instead. */}
+                {line.type === 'add' || line.type === 'remove' ? (
+                  <span className="nbi-sr-only">
+                    {line.type === 'add' ? 'added ' : 'removed '}
+                  </span>
+                ) : null}
+                <span className="nbi-diff-text">{line.content}</span>
+              </div>
+            ))}
+          </div>
+          {diff.truncated ? (
+            <div className="nbi-tool-call-diff-truncated">diff truncated</div>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ToolCallCard(props: { toolCall: IToolCall }): JSX.Element {
+  const { title, kind, status, diffs } = props.toolCall;
+  const [expanded, setExpanded] = useState(true);
+
+  const KindIcon = KIND_ICONS[kind] ?? VscTools;
+
+  let StatusIcon = VscSync;
+  if (status === 'completed') {
+    StatusIcon = VscPassFilled;
+  } else if (status === 'failed') {
+    StatusIcon = VscError;
+  } else if (status === 'cancelled') {
+    StatusIcon = VscClose;
+  }
+
+  const statusLabel = STATUS_LABELS[status] ?? status;
+  const statusModifier = status.replace(/_/g, '-');
+  const hasDiffs = Array.isArray(diffs) && diffs.length > 0;
+
+  return (
+    <div className="nbi-tool-call-wrapper">
+      <div className={`nbi-tool-call nbi-tool-call-${statusModifier}`}>
+        <KindIcon className="nbi-tool-call-kind-icon" aria-hidden="true" />
+        <span className="nbi-tool-call-title" title={title}>
+          {title}
+        </span>
+        {hasDiffs ? (
+          <button
+            type="button"
+            className="nbi-tool-call-diff-toggle"
+            onClick={() => setExpanded(e => !e)}
+            aria-expanded={expanded}
+            aria-label={expanded ? 'Hide diff' : 'Show diff'}
+          >
+            {expanded ? (
+              <VscChevronDown aria-hidden="true" />
+            ) : (
+              <VscChevronRight aria-hidden="true" />
+            )}
+          </button>
+        ) : null}
+        <StatusIcon className="nbi-tool-call-status-icon" aria-hidden="true" />
+        {/* Status reaches screen readers as text; the icons are decorative.
+            The visible title is already in the accessibility tree, so this
+            span carries only the status to avoid announcing the title twice. */}
+        <span className="nbi-sr-only">{statusLabel}</span>
+      </div>
+      {hasDiffs && expanded ? <ToolCallDiffView diffs={diffs!} /> : null}
+    </div>
+  );
+}

package/src/components/tool-call-group.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { VscChevronDown, VscChevronRight } from '../icons';
+import { IToolCall, ToolCallCard } from './tool-call-card';
+
+// Groups with more calls than this start collapsed so a tool-heavy turn (or a
+// reloaded transcript) doesn't flood the chat. A live turn mounts the group at
+// length 1, so it starts expanded and stays visible as calls stream in.
+const GROUP_COLLAPSE_THRESHOLD = 3;
+
+/**
+ * Renders a run of consecutive tool calls. A single call is shown as a bare
+ * card; multiple calls are wrapped in one collapsible group with a summary
+ * header, so consecutive agent activity reads as one unit instead of a wall
+ * of rows.
+ */
+export function ToolCallGroup(props: { toolCalls: IToolCall[] }): JSX.Element {
+  const { toolCalls } = props;
+  // Hooks must run unconditionally and in a stable order: the group's length
+  // grows as calls stream in, so call useState before any length branch.
+  // Start collapsed only for a large group whose calls are all settled --
+  // never hide a still-running or failed call (matters on transcript reload,
+  // where a group can mount already large).
+  const [expanded, setExpanded] = useState(
+    () =>
+      toolCalls.length <= GROUP_COLLAPSE_THRESHOLD ||
+      toolCalls.some(t => t.status === 'in_progress' || t.status === 'failed')
+  );
+
+  if (toolCalls.length <= 1) {
+    return toolCalls.length === 1 ? (
+      <ToolCallCard toolCall={toolCalls[0]} />
+    ) : (
+      <></>
+    );
+  }
+
+  const failed = toolCalls.filter(t => t.status === 'failed').length;
+  const summary =
+    `${toolCalls.length} tool calls` + (failed ? ` (${failed} failed)` : '');
+
+  return (
+    <div className="nbi-tool-call-group">
+      <button
+        type="button"
+        className="nbi-tool-call-group-header"
+        onClick={() => setExpanded(e => !e)}
+        aria-expanded={expanded}
+      >
+        {expanded ? (
+          <VscChevronDown aria-hidden="true" />
+        ) : (
+          <VscChevronRight aria-hidden="true" />
+        )}
+        <span className="nbi-tool-call-group-summary">{summary}</span>
+      </button>
+      {expanded ? (
+        <div className="nbi-tool-call-group-body">
+          {toolCalls.map(toolCall => (
+            <ToolCallCard key={toolCall.id} toolCall={toolCall} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/icons.ts

@@ -41,6 +41,7 @@ export const VscClose = asIcon(Vsc.VscClose);
 export const VscCloudUpload = asIcon(Vsc.VscCloudUpload);
 export const VscCopy = asIcon(Vsc.VscCopy);
 export const VscEdit = asIcon(Vsc.VscEdit);
+export const VscError = asIcon(Vsc.VscError);
 export const VscEye = asIcon(Vsc.VscEye);
 export const VscEyeClosed = asIcon(Vsc.VscEyeClosed);
 export const VscFile = asIcon(Vsc.VscFile);
@@ -55,6 +56,8 @@ export const VscSend = asIcon(Vsc.VscSend);
 export const VscSettingsGear = asIcon(Vsc.VscSettingsGear);
 export const VscSparkle = asIcon(Vsc.VscSparkle);
 export const VscStopCircle = asIcon(Vsc.VscStopCircle);
+export const VscSync = asIcon(Vsc.VscSync);
+export const VscTerminal = asIcon(Vsc.VscTerminal);
 export const VscThumbsdown = asIcon(Vsc.VscThumbsdown);
 export const VscThumbsdownFilled = asIcon(Vsc.VscThumbsdownFilled);
 export const VscThumbsup = asIcon(Vsc.VscThumbsup);

package/src/index.ts

@@ -106,6 +106,7 @@ import {
   cellOutputHasError,
   chooseWorkspaceDirectory,
   compareSelections,
+  buildResumeCommand,
   extractLLMGeneratedCode,
   getSelectionInEditor,
   getTokenCount,
@@ -1403,10 +1404,9 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
             return React.createElement(LauncherPicker, {
               onSessionSelected: (session: IClaudeSessionInfo) => {
                 dialog.close();
-                const cmd = session.cwd
-                  ? `cd ${session.cwd} && claude --resume ${session.session_id}`
-                  : `claude --resume ${session.session_id}`;
-                launchCliInTerminal(cmd);
+                launchCliInTerminal(
+                  buildResumeCommand(session.cwd ?? '', session.session_id)
+                );
               }
             });
           }
@@ -1734,7 +1734,7 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
           source: args.source as string
         });
 
-        return true;
+        return { cellIndex: newCellIndex };
       }
     });
 
@@ -1755,7 +1755,7 @@ const plugin: JupyterFrontEndPlugin<INotebookIntelligence> = {
           source: args.source as string
         });
 
-        return true;
+        return { cellIndex: newCellIndex };
       }
     });
 

package/src/markdown-renderer.tsx

@@ -12,6 +12,8 @@ import {
 } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { VscNewFile, VscInsert, VscCopy, VscNotebook, VscAdd } from './icons';
 import { JupyterFrontEnd } from '@jupyterlab/application';
+import { PathExt } from '@jupyterlab/coreutils';
+import { MarkdownLink } from './components/markdown-link';
 import { isDarkTheme, writeTextToClipboard } from './utils';
 import { IActiveDocumentInfo } from './tokens';
 
@@ -29,11 +31,39 @@ export function MarkdownRenderer({
   const app = getApp();
   const activeDocumentInfo = getActiveDocumentInfo();
   const isNotebook = activeDocumentInfo.filename.endsWith('.ipynb');
+  // Resolve workspace-relative LLM links against the active document's
+  // directory so `[file](README.md)` from a chat scoped to
+  // `notebooks/proj/work.ipynb` lands at `notebooks/proj/README.md` (the
+  // user's mental model) rather than the server-root README.
+  const linkBaseDir = activeDocumentInfo.filePath
+    ? PathExt.dirname(activeDocumentInfo.filePath)
+    : '';
 
   return (
+    // No `rehype-raw` plugin: raw HTML in chat markdown (e.g. an LLM
+    // emitting `<a href="javascript:...">`) renders as literal text, not
+    // a DOM anchor, so the only anchor sink is the CommonMark/GFM `a`
+    // node handled by `SafeAnchor` below. Any future change that enables
+    // raw HTML needs to add a rehype-sanitize pass alongside.
     <Markdown
       remarkPlugins={[remarkGfm]}
       components={{
+        // CommonMark `<https://...>` autolinks, `[text](url)`, and
+        // reference-style links all normalize to the same `a` node.
+        // `MarkdownLink` routes fragment-only and workspace-relative
+        // hrefs through Lab's docmanager so an LLM-emitted link can't
+        // replace the JupyterLab shell, and hands everything else to
+        // SafeAnchor for the `_blank` + scheme-allowlist treatment.
+        a: ({ href, title, children }: any) => (
+          <MarkdownLink
+            app={app}
+            baseDir={linkBaseDir}
+            href={href}
+            title={title}
+          >
+            {children}
+          </MarkdownLink>
+        ),
         code({ node, inline, className, children, getApp, ...props }: any) {
           const match = /language-(\w+)/.exec(className || '');
           const codeString = String(children).replace(/\n$/, '');

package/src/tokens.ts

@@ -48,6 +48,7 @@ export enum ResponseStreamDataType {
   Button = 'button',
   Anchor = 'anchor',
   Progress = 'progress',
+  ToolCall = 'tool-call',
   Confirmation = 'confirmation',
   AskUserQuestion = 'ask-user-question'
 }

package/src/tool-call-stream.ts

@@ -0,0 +1,44 @@
+import { UUID } from '@lumino/coreutils';
+import { ResponseStreamDataType } from './tokens';
+
+/**
+ * The subset of a chat message's stream-content item this helper needs. A
+ * structural subset of `IChatMessageContent` (defined in chat-sidebar) so it
+ * can be unit-tested without importing the sidebar (and creating a cycle).
+ */
+export interface IToolCallStreamItem {
+  id: string;
+  type: ResponseStreamDataType;
+  content: any;
+  created: Date;
+}
+
+/**
+ * Merge a streamed tool-call payload into `contents` by its tool-call id.
+ *
+ * A tool call streams twice under one id (once when it starts, once when it
+ * finishes). The first emission pushes a new card; the second updates that
+ * card's content (its status) in place, so the call stays a single persistent
+ * row rather than appending a duplicate. Mutates `contents`.
+ */
+export function upsertToolCallContent(
+  contents: IToolCallStreamItem[],
+  content: { id: string; [key: string]: any },
+  created: Date
+): void {
+  const existing = contents.find(
+    c =>
+      c.type === ResponseStreamDataType.ToolCall &&
+      c.content?.id === content?.id
+  );
+  if (existing) {
+    existing.content = content;
+  } else {
+    contents.push({
+      id: UUID.uuid4(),
+      type: ResponseStreamDataType.ToolCall,
+      content,
+      created
+    });
+  }
+}

package/src/utils.ts

@@ -339,6 +339,28 @@ function isDisallowedUriCodepoint(code: number): boolean {
   return false;
 }
 
+/**
+ * True when `s` contains any codepoint in the same set `safeAnchorUri`
+ * rejects (C0/DEL/C1, NEL/NBSP/LS/PS/BOM, ZWSP, bidi-override controls).
+ * Mirrors the Python `has_dangerous_text_codepoints`. Used to scrub the
+ * `title` attribute on rendered anchors so an LLM-emitted hover tooltip
+ * can't visually impersonate the link via bidi-reorder or zero-width
+ * tricks.
+ */
+export function hasDangerousTextCodepoints(
+  s: string | undefined | null
+): boolean {
+  if (typeof s !== 'string') {
+    return false;
+  }
+  for (let i = 0; i < s.length; i++) {
+    if (isDisallowedUriCodepoint(s.charCodeAt(i))) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Return `uri` if its scheme is in the chat-anchor allowlist, else null.
  * Mirrors the server-side `safe_anchor_uri` check so that anchor parts
@@ -385,10 +407,11 @@ export function safeAnchorUri(uri: string | undefined | null): string | null {
  * user happens to be in the JupyterLab working directory.
  */
 export function buildResumeCommand(cwd: string, sessionId: string): string {
+  const quotedSessionId = shellSingleQuote(sessionId);
   if (!cwd) {
-    return `claude --resume ${sessionId}`;
+    return `claude --resume ${quotedSessionId}`;
   }
-  return `cd ${shellSingleQuote(cwd)} && claude --resume ${sessionId}`;
+  return `cd ${shellSingleQuote(cwd)} && claude --resume ${quotedSessionId}`;
 }
 
 /**

package/style/base.css

@@ -643,6 +643,7 @@ pre:has(.code-block-header) {
 
 .chat-message-feedback:focus-within,
 .chat-message-feedback:has(.selected),
+.chat-message-feedback.always-visible,
 .chat-message:hover .chat-message-feedback {
   opacity: 1;
 }
@@ -779,6 +780,169 @@ pre:has(.code-block-header) {
   margin-top: 2px;
 }
 
+.nbi-tool-call-wrapper {
+  margin: 2px 0;
+}
+
+.nbi-tool-call {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color2);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-tool-call-kind-icon {
+  flex-shrink: 0;
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-tool-call-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.nbi-tool-call-status-icon {
+  flex-shrink: 0;
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-tool-call-completed .nbi-tool-call-status-icon {
+  color: var(--jp-success-color1);
+}
+
+.nbi-tool-call-failed .nbi-tool-call-status-icon {
+  color: var(--jp-error-color1);
+}
+
+.nbi-tool-call-in-progress .nbi-tool-call-status-icon {
+  animation: nbi-tool-call-spin 1s linear infinite;
+}
+
+@keyframes nbi-tool-call-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nbi-tool-call-in-progress .nbi-tool-call-status-icon {
+    animation: none;
+  }
+}
+
+.nbi-tool-call-diff-toggle {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+}
+
+.nbi-tool-call-diffs {
+  margin: 2px 0 2px 18px;
+  padding-left: 6px;
+  border-left: 2px solid var(--jp-border-color2);
+}
+
+.nbi-tool-call-diff + .nbi-tool-call-diff {
+  margin-top: 4px;
+}
+
+.nbi-tool-call-diff-path {
+  overflow: hidden;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.nbi-tool-call-diff-body {
+  margin: 2px 0;
+  overflow-x: auto;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  line-height: 1.4;
+}
+
+.nbi-tool-call-diff-line {
+  display: flex;
+}
+
+.nbi-diff-gutter {
+  flex-shrink: 0;
+  width: 1ch;
+  user-select: none;
+  text-align: center;
+}
+
+.nbi-diff-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Semi-transparent tints rather than the solid --jp-*-color3 fills (which are
+   light pastels in BOTH themes): the tint sits over the card background so the
+   line stays readable with the theme's own (light-on-dark / dark-on-light)
+   text color instead of forcing dark text onto a pale fill. */
+.nbi-diff-add {
+  background-color: rgb(64 160 43 / 22%);
+}
+
+.nbi-diff-remove {
+  background-color: rgb(248 81 73 / 22%);
+}
+
+.nbi-diff-context {
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-tool-call-diff-truncated {
+  font-size: var(--jp-ui-font-size0);
+  font-style: italic;
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-tool-call-group {
+  margin: 2px 0;
+}
+
+.nbi-tool-call-group-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 2px 4px;
+  border: none;
+  background: none;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  text-align: left;
+  cursor: pointer;
+}
+
+.nbi-tool-call-group-summary {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.nbi-tool-call-group-body {
+  margin-left: 6px;
+}
+
 .user-input-autocomplete,
 .mode-tools-popover,
 .workspace-file-popover {
@@ -1503,12 +1667,17 @@ button.send-button:disabled:active:not(.send-button-stop) {
 .expandable-content-text {
   display: none;
   margin: 5px;
-  padding: 0 5px;
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 5px;
+  padding: 8px 10px;
+  border-radius: 6px;
   max-height: 200px;
   overflow-y: auto;
-  box-shadow: inset 0 0 15px 15px rgb(23 23 23 / 50%);
+  background-color: var(--jp-layout-color2);
+}
+
+/* Inline code also fills with --jp-layout-color2, which now matches this box's
+   fill; recess nested code to --jp-layout-color1 so it stays distinct. */
+.expandable-content-text :not(pre) > code {
+  background-color: var(--jp-layout-color1);
 }
 
 .expandable-content .collapsed-icon {