jupyterlab_claude_code_extension 1.0.47 → 1.0.53

package/README.md

@@ -8,21 +8,20 @@
 [![Brought To You By KOLOMOLO](https://img.shields.io/badge/Brought%20To%20You%20By-KOLOMOLO-00ffff?style=flat)](https://kolomolo.com)
 [![Donate PayPal](https://img.shields.io/badge/Donate-PayPal-blue?style=flat)](https://www.paypal.com/donate/?hosted_button_id=B4KPBJDLLXTSA)
 
-Manage Claude Code CLI sessions from inside JupyterLab. A left-sidebar panel lists every project under `~/.claude/projects/` deduplicated to one row per folder, marks live remote-control sessions with a green dot, and lets you jump back into any session by opening (or reactivating) a terminal pwd'd to that project and auto-running `claude --resume <id>`.
+Browse, resume, and manage your Claude Code sessions from a JupyterLab side panel. One click reactivates the right terminal, no duplicate tabs, with a live indicator showing which sessions are currently active.
 
 ![Claude Code Sessions panel](.resources/screenshot.png)
 
 ## Features
 
-- **Three-section side panel** - Favourites, Recent (top 10 by activity), and All. Each section scrolls independently; Favourites disappears when empty
-- **Live remote-control indicator** - green dot on rows whose `~/.claude/sessions/<pid>.json` is alive (verified via `os.kill(pid, 0)`)
-- **One-click resume** - click a row to find an existing terminal pwd'd to that project (queried server-side from the pty's process tree) and reactivate its tab; only spawns a fresh terminal if none matches. Concurrent rapid clicks are coalesced
-- **Smart name resolution** - shows the user-set `/rename` name when available; auto-detected names (volatile across the same `sessionId` or 3+ token lowercase-kebab) fall back to the folder basename. Toggle the behaviour via the `resolveSessionNames` setting
-- **Path-segment disambiguation** - when two sessions share the same display name, the row reveals the minimum number of trailing path segments needed for each to be unique
-- **Favourites** - star a session via the right-click menu; persisted server-side at `~/.claude/jupyterlab_claude_code_extension.json`
-- **Layout restorer** - panel visibility persists across JupyterLab reloads
-- **Auto-disabled** when the `claude` binary is not on `PATH`
-- **Hover tooltip** with relative path (vs JL root), last activity, message count, branch, first prompt, session id
+- **Three-section side panel** - Favourites, Recent, and All projects, each scrolling independently
+- **Live indicator** - a green dot marks sessions that are currently running somewhere
+- **One-click resume** - click a row to jump back into that session in a terminal. If a terminal for the project is already open, it's reused instead of duplicated
+- **Favourites** - star projects you keep coming back to via the right-click menu
+- **Search** - fuzzy filter at the top of the panel
+- **Presentation modes** - label rows by session name, folder name, or path relative to the JupyterLab root
+- **Hover tooltip** with project path, last activity, message count, branch, and session id
+- **Auto-disabled** when the Claude Code CLI is not installed
 
 ## Requirements
 

package/lib/index.js

@@ -26,10 +26,17 @@ const plugin = {
             return;
         }
         const widget = new ClaudeCodeSessionsWidget(app, status.root_dir || '', terminalTracker);
-        labShell.add(widget, 'left', { rank: 600 });
+        // Read the sidebar setting before docking so we add the widget to the
+        // user's preferred side on first paint. Default to left.
+        let currentSidebar = 'left';
         if (settingRegistry) {
             try {
                 const settings = await settingRegistry.load(PLUGIN_ID);
+                const initialSidebar = settings.get('sidebar').composite;
+                if (initialSidebar === 'left' || initialSidebar === 'right') {
+                    currentSidebar = initialSidebar;
+                }
+                labShell.add(widget, currentSidebar, { rank: 600 });
                 const apply = () => {
                     const mode = settings.get('presentationMode').composite;
                     if (mode === 'session' || mode === 'folder' || mode === 'path') {
@@ -42,14 +49,26 @@ const plugin = {
                     const dangerous = settings.get('dangerouslySkipPermissions')
                         .composite;
                     widget.setDangerouslySkipPermissions(!!dangerous);
+                    const sidebar = settings.get('sidebar').composite;
+                    if ((sidebar === 'left' || sidebar === 'right') &&
+                        sidebar !== currentSidebar) {
+                        currentSidebar = sidebar;
+                        // Lumino re-parents the widget cleanly when add() is called
+                        // against a different area.
+                        labShell.add(widget, sidebar, { rank: 600 });
+                    }
                 };
                 apply();
                 settings.changed.connect(apply);
             }
             catch (err) {
                 console.warn('[jupyterlab_claude_code_extension] failed to load settings; using defaults', err);
+                labShell.add(widget, currentSidebar, { rank: 600 });
             }
         }
+        else {
+            labShell.add(widget, currentSidebar, { rank: 600 });
+        }
         // Register with the layout restorer so JL remembers whether the panel
         // was active/visible across browser reloads and restarts.
         if (restorer) {

package/lib/types.d.ts

@@ -3,6 +3,7 @@ export interface ISession {
     encoded_path: string;
     session_id: string;
     name: string;
+    name_source: 'rename' | 'basename';
     summary: string;
     first_prompt: string;
     message_count: number;

package/lib/widget.d.ts

@@ -40,12 +40,23 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private _doResumeInTerminal;
     private _findTerminalForCwd;
     private _showCloseExistingDialog;
+    /** Show a modal with a spinner while the terminal is being launched. The
+     * caller must dismiss it via ``.resolve()`` once the work is done.
+     */
+    private _showLaunchSpinner;
     private _wireTerminalDisposal;
     /** Apply the presentation-mode setting (path-segment disambiguation is
      * handled separately in ``_disambiguate``). */
     private _displayName;
     private _basename;
-    /** Walk path tails until every name in a colliding group is unique. */
+    /** Walk path tails until every name in a colliding group is unique.
+     *
+     * User-set rename names (``name_source === 'rename'``) survive
+     * disambiguation untouched: a Claude ``/rename`` should never be rolled
+     * back to a path tail just because some other row happens to share its
+     * folder basename. Basename-derived rows in the same group get the path
+     * tail suffix, picked so it stays distinct from every rename label too.
+     */
     private _disambiguate;
     private _render;
     private _renderSection;

package/lib/widget.js

@@ -338,21 +338,29 @@ export class ClaudeCodeSessionsWidget extends Widget {
             // as the pty's only process (no shell). Server-side endpoint calls
             // terminal_manager.create(shell_command=[claude, --resume, sid], cwd=...)
             // and returns the terminal name; we then attach JL's standard widget
-            // via terminal:open. When claude exits, the tab closes.
-            const launched = await requestAPI('launch-terminal', this._serverSettings, {
-                method: 'POST',
-                body: JSON.stringify({
-                    project_path: session.project_path,
-                    session_id: session.session_id,
-                    dangerously_skip_permissions: forceDangerous || this._dangerouslySkip
-                })
-            });
-            const widget = await this._app.commands.execute('terminal:open', {
-                name: launched.terminal_name
-            });
-            if (widget === null || widget === void 0 ? void 0 : widget.id) {
-                this._terminalsByPath.set(session.project_path, widget);
-                this._wireTerminalDisposal(session.project_path, widget);
+            // via terminal:open. When claude exits, the tab closes. The launch
+            // RPC + the WebSocket-resize waiter on the server can take a few
+            // seconds, so show a modal spinner for visual feedback.
+            const spinner = this._showLaunchSpinner(`Opening ${this._lookupName(session)}...`);
+            try {
+                const launched = await requestAPI('launch-terminal', this._serverSettings, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        project_path: session.project_path,
+                        session_id: session.session_id,
+                        dangerously_skip_permissions: forceDangerous || this._dangerouslySkip
+                    })
+                });
+                const widget = await this._app.commands.execute('terminal:open', {
+                    name: launched.terminal_name
+                });
+                if (widget === null || widget === void 0 ? void 0 : widget.id) {
+                    this._terminalsByPath.set(session.project_path, widget);
+                    this._wireTerminalDisposal(session.project_path, widget);
+                }
+            }
+            finally {
+                spinner.resolve();
             }
         }
         catch (err) {
@@ -407,6 +415,30 @@ export class ClaudeCodeSessionsWidget extends Widget {
             buttons: [Dialog.okButton({ label: 'OK' })]
         });
     }
+    /** Show a modal with a spinner while the terminal is being launched. The
+     * caller must dismiss it via ``.resolve()`` once the work is done.
+     */
+    _showLaunchSpinner(label) {
+        const body = new Widget();
+        body.node.className = 'jp-ClaudeSessionsPanel-launchOverlay';
+        const spinner = document.createElement('div');
+        spinner.className =
+            'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-launchSpinner';
+        body.node.appendChild(spinner);
+        const text = document.createElement('div');
+        text.className = 'jp-ClaudeSessionsPanel-launchLabel';
+        text.textContent = label;
+        body.node.appendChild(text);
+        const dialog = new Dialog({
+            title: 'Opening Claude Code session',
+            body,
+            buttons: [Dialog.cancelButton({ label: 'Run in background' })]
+        });
+        // launch() returns a Promise we don't await - we resolve programmatically
+        // when the spawn completes (or errors).
+        void dialog.launch();
+        return dialog;
+    }
     _wireTerminalDisposal(projectPath, widget) {
         var _a;
         if (!((_a = widget === null || widget === void 0 ? void 0 : widget.disposed) === null || _a === void 0 ? void 0 : _a.connect)) {
@@ -440,7 +472,14 @@ export class ClaudeCodeSessionsWidget extends Widget {
         const parts = p.split('/').filter(Boolean);
         return parts[parts.length - 1] || '';
     }
-    /** Walk path tails until every name in a colliding group is unique. */
+    /** Walk path tails until every name in a colliding group is unique.
+     *
+     * User-set rename names (``name_source === 'rename'``) survive
+     * disambiguation untouched: a Claude ``/rename`` should never be rolled
+     * back to a path tail just because some other row happens to share its
+     * folder basename. Basename-derived rows in the same group get the path
+     * tail suffix, picked so it stays distinct from every rename label too.
+     */
     _disambiguate(rows) {
         var _a;
         const out = new Map();
@@ -454,20 +493,38 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 out.set(group[0].project_path, name);
                 continue;
             }
-            const segs = group.map(r => r.project_path.split('/').filter(Boolean));
+            const renames = group.filter(r => r.name_source === 'rename');
+            const basenames = group.filter(r => r.name_source !== 'rename');
+            // Rename rows win unchanged. The ``taken`` set guards basename
+            // disambiguation from colliding back into a rename's label.
+            const taken = new Set();
+            for (const r of renames) {
+                out.set(r.project_path, r.name);
+                taken.add(r.name);
+            }
+            if (basenames.length === 0) {
+                continue;
+            }
+            // Walk path tails for basename rows: tail must be unique among
+            // basenames AND not equal to any rename label already taken.
+            const segs = basenames.map(r => r.project_path.split('/').filter(Boolean));
             const max = Math.max(...segs.map(s => s.length));
             let depth = 1;
+            let resolved = false;
             while (depth <= max) {
                 const tails = segs.map(s => s.slice(-depth).join('/'));
-                if (new Set(tails).size === tails.length) {
-                    group.forEach((r, i) => out.set(r.project_path, tails[i]));
+                const unique = new Set(tails).size === tails.length;
+                const noConflict = tails.every(t => !taken.has(t));
+                if (unique && noConflict) {
+                    basenames.forEach((r, i) => out.set(r.project_path, tails[i]));
+                    resolved = true;
                     break;
                 }
                 depth += 1;
             }
-            if (!out.has(group[0].project_path)) {
+            if (!resolved) {
                 // Fallback to absolute path
-                group.forEach(r => out.set(r.project_path, r.project_path));
+                basenames.forEach(r => out.set(r.project_path, r.project_path));
             }
         }
         return out;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.0.47",
+    "version": "1.0.53",
     "description": "Browse, resume, and manage your Claude Code CLI sessions from a JupyterLab side panel. One click reactivates the right terminal - no duplicate tabs, live remote-control indicator, and favourites for the projects you keep coming back to.",
     "keywords": [
         "jupyter",

package/src/index.ts

@@ -53,11 +53,20 @@ const plugin: JupyterFrontEndPlugin<void> = {
       status.root_dir || '',
       terminalTracker
     );
-    labShell.add(widget, 'left', { rank: 600 });
+
+    // Read the sidebar setting before docking so we add the widget to the
+    // user's preferred side on first paint. Default to left.
+    let currentSidebar: 'left' | 'right' = 'left';
 
     if (settingRegistry) {
       try {
         const settings = await settingRegistry.load(PLUGIN_ID);
+        const initialSidebar = settings.get('sidebar').composite as string;
+        if (initialSidebar === 'left' || initialSidebar === 'right') {
+          currentSidebar = initialSidebar;
+        }
+        labShell.add(widget, currentSidebar, { rank: 600 });
+
         const apply = (): void => {
           const mode = settings.get('presentationMode').composite as string;
           if (mode === 'session' || mode === 'folder' || mode === 'path') {
@@ -70,6 +79,16 @@ const plugin: JupyterFrontEndPlugin<void> = {
           const dangerous = settings.get('dangerouslySkipPermissions')
             .composite as boolean;
           widget.setDangerouslySkipPermissions(!!dangerous);
+          const sidebar = settings.get('sidebar').composite as string;
+          if (
+            (sidebar === 'left' || sidebar === 'right') &&
+            sidebar !== currentSidebar
+          ) {
+            currentSidebar = sidebar;
+            // Lumino re-parents the widget cleanly when add() is called
+            // against a different area.
+            labShell.add(widget, sidebar, { rank: 600 });
+          }
         };
         apply();
         settings.changed.connect(apply);
@@ -78,7 +97,10 @@ const plugin: JupyterFrontEndPlugin<void> = {
           '[jupyterlab_claude_code_extension] failed to load settings; using defaults',
           err
         );
+        labShell.add(widget, currentSidebar, { rank: 600 });
       }
+    } else {
+      labShell.add(widget, currentSidebar, { rank: 600 });
     }
 
     // Register with the layout restorer so JL remembers whether the panel

package/src/types.ts

@@ -3,6 +3,7 @@ export interface ISession {
   encoded_path: string;
   session_id: string;
   name: string;
+  name_source: 'rename' | 'basename';
   summary: string;
   first_prompt: string;
   message_count: number;

package/src/widget.ts

@@ -415,26 +415,35 @@ export class ClaudeCodeSessionsWidget extends Widget {
       // as the pty's only process (no shell). Server-side endpoint calls
       // terminal_manager.create(shell_command=[claude, --resume, sid], cwd=...)
       // and returns the terminal name; we then attach JL's standard widget
-      // via terminal:open. When claude exits, the tab closes.
-      const launched = await requestAPI<ILaunchTerminalResponse>(
-        'launch-terminal',
-        this._serverSettings,
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            project_path: session.project_path,
-            session_id: session.session_id,
-            dangerously_skip_permissions:
-              forceDangerous || this._dangerouslySkip
-          })
-        }
+      // via terminal:open. When claude exits, the tab closes. The launch
+      // RPC + the WebSocket-resize waiter on the server can take a few
+      // seconds, so show a modal spinner for visual feedback.
+      const spinner = this._showLaunchSpinner(
+        `Opening ${this._lookupName(session)}...`
       );
-      const widget: any = await this._app.commands.execute('terminal:open', {
-        name: launched.terminal_name
-      });
-      if (widget?.id) {
-        this._terminalsByPath.set(session.project_path, widget);
-        this._wireTerminalDisposal(session.project_path, widget);
+      try {
+        const launched = await requestAPI<ILaunchTerminalResponse>(
+          'launch-terminal',
+          this._serverSettings,
+          {
+            method: 'POST',
+            body: JSON.stringify({
+              project_path: session.project_path,
+              session_id: session.session_id,
+              dangerously_skip_permissions:
+                forceDangerous || this._dangerouslySkip
+            })
+          }
+        );
+        const widget: any = await this._app.commands.execute('terminal:open', {
+          name: launched.terminal_name
+        });
+        if (widget?.id) {
+          this._terminalsByPath.set(session.project_path, widget);
+          this._wireTerminalDisposal(session.project_path, widget);
+        }
+      } finally {
+        spinner.resolve();
       }
     } catch (err) {
       this._showError(err);
@@ -493,6 +502,34 @@ export class ClaudeCodeSessionsWidget extends Widget {
     });
   }
 
+  /** Show a modal with a spinner while the terminal is being launched. The
+   * caller must dismiss it via ``.resolve()`` once the work is done.
+   */
+  private _showLaunchSpinner(label: string): Dialog<unknown> {
+    const body = new Widget();
+    body.node.className = 'jp-ClaudeSessionsPanel-launchOverlay';
+
+    const spinner = document.createElement('div');
+    spinner.className =
+      'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-launchSpinner';
+    body.node.appendChild(spinner);
+
+    const text = document.createElement('div');
+    text.className = 'jp-ClaudeSessionsPanel-launchLabel';
+    text.textContent = label;
+    body.node.appendChild(text);
+
+    const dialog = new Dialog<unknown>({
+      title: 'Opening Claude Code session',
+      body,
+      buttons: [Dialog.cancelButton({ label: 'Run in background' })]
+    });
+    // launch() returns a Promise we don't await - we resolve programmatically
+    // when the spawn completes (or errors).
+    void dialog.launch();
+    return dialog;
+  }
+
   private _wireTerminalDisposal(projectPath: string, widget: any): void {
     if (!widget?.disposed?.connect) {
       return;
@@ -529,7 +566,14 @@ export class ClaudeCodeSessionsWidget extends Widget {
     return parts[parts.length - 1] || '';
   }
 
-  /** Walk path tails until every name in a colliding group is unique. */
+  /** Walk path tails until every name in a colliding group is unique.
+   *
+   * User-set rename names (``name_source === 'rename'``) survive
+   * disambiguation untouched: a Claude ``/rename`` should never be rolled
+   * back to a path tail just because some other row happens to share its
+   * folder basename. Basename-derived rows in the same group get the path
+   * tail suffix, picked so it stays distinct from every rename label too.
+   */
   private _disambiguate(rows: ISession[]): Map<string, string> {
     const out = new Map<string, string>();
     const groups = new Map<string, ISession[]>();
@@ -542,20 +586,43 @@ export class ClaudeCodeSessionsWidget extends Widget {
         out.set(group[0].project_path, name);
         continue;
       }
-      const segs = group.map(r => r.project_path.split('/').filter(Boolean));
+
+      const renames = group.filter(r => r.name_source === 'rename');
+      const basenames = group.filter(r => r.name_source !== 'rename');
+
+      // Rename rows win unchanged. The ``taken`` set guards basename
+      // disambiguation from colliding back into a rename's label.
+      const taken = new Set<string>();
+      for (const r of renames) {
+        out.set(r.project_path, r.name);
+        taken.add(r.name);
+      }
+      if (basenames.length === 0) {
+        continue;
+      }
+
+      // Walk path tails for basename rows: tail must be unique among
+      // basenames AND not equal to any rename label already taken.
+      const segs = basenames.map(r =>
+        r.project_path.split('/').filter(Boolean)
+      );
       const max = Math.max(...segs.map(s => s.length));
       let depth = 1;
+      let resolved = false;
       while (depth <= max) {
         const tails = segs.map(s => s.slice(-depth).join('/'));
-        if (new Set(tails).size === tails.length) {
-          group.forEach((r, i) => out.set(r.project_path, tails[i]));
+        const unique = new Set(tails).size === tails.length;
+        const noConflict = tails.every(t => !taken.has(t));
+        if (unique && noConflict) {
+          basenames.forEach((r, i) => out.set(r.project_path, tails[i]));
+          resolved = true;
           break;
         }
         depth += 1;
       }
-      if (!out.has(group[0].project_path)) {
+      if (!resolved) {
         // Fallback to absolute path
-        group.forEach(r => out.set(r.project_path, r.project_path));
+        basenames.forEach(r => out.set(r.project_path, r.project_path));
       }
     }
     return out;

package/style/base.css

@@ -237,6 +237,29 @@
   display: inline-block;
 }
 
+.jp-ClaudeSessionsPanel-launchOverlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 8px;
+  min-width: 240px;
+}
+
+.jp-ClaudeSessionsPanel-launchSpinner {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+.jp-ClaudeSessionsPanel-launchLabel {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  text-align: center;
+  word-break: break-word;
+}
+
 .jp-ClaudeSessionsPanel-row.jp-mod-busy {
   opacity: 0.55;
   pointer-events: none;