jupyterlab_claude_code_extension 1.0.50 → 1.0.54

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** - Favorites, 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
+- **Favorites** - 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

@@ -7,7 +7,7 @@ const PLUGIN_ID = 'jupyterlab_claude_code_extension:plugin';
 const WIDGET_ID = 'jupyterlab-claude-code-extension';
 const plugin = {
     id: PLUGIN_ID,
-    description: 'Side panel listing Claude Code sessions per project folder, with remote-control indicator, favourites, and one-click resume in a terminal.',
+    description: 'Side panel listing Claude Code sessions per project folder, with remote-control indicator, favorites, and one-click resume in a terminal.',
     autoStart: true,
     requires: [ILabShell],
     optional: [ILayoutRestorer, ISettingRegistry, ITerminalTracker],
@@ -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

@@ -49,7 +49,14 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
      * 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

@@ -8,7 +8,7 @@ const DEFAULT_RECENT_LIMIT = 10;
 const EXPANDED_STORAGE_KEY = 'jupyterlab_claude_code_extension:expanded';
 const DEFAULT_PRESENTATION_MODE = 'session';
 const SECTION_LABELS = {
-    favourites: 'Favourites',
+    favourites: 'Favorites',
     recent: 'Recent',
     all: 'All'
 };
@@ -472,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();
@@ -486,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;
@@ -582,7 +607,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 const empty = document.createElement('div');
                 empty.className = 'jp-ClaudeSessionsPanel-emptySection';
                 empty.textContent =
-                    key === 'favourites' ? 'No favourites yet.' : 'Empty.';
+                    key === 'favourites' ? 'No favorites yet.' : 'Empty.';
                 list.appendChild(empty);
             }
             else {
@@ -623,12 +648,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
         name.className = 'jp-ClaudeSessionsPanel-name';
         name.textContent = this._lookupName(session);
         row.appendChild(name);
-        // No star in the Favourites section - every row there is a favourite
+        // No star in the Favorites section - every row there is a favorite
         // by definition; stars are an indicator only useful in Recent/All.
         if (session.favourite && sectionKey !== 'favourites') {
             const star = document.createElement('span');
             star.className = 'jp-ClaudeSessionsPanel-favStar';
-            star.title = 'Favourite';
+            star.title = 'Favorite';
             starFilledIcon.element({ container: star });
             row.appendChild(star);
         }
@@ -726,8 +751,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
             label: () => {
                 var _a;
                 return ((_a = this._activeSession) === null || _a === void 0 ? void 0 : _a.favourite)
-                    ? 'Remove from Favourites'
-                    : 'Add to Favourites';
+                    ? 'Remove from Favorites'
+                    : 'Add to Favorites';
             },
             execute: () => {
                 if (this._activeSession) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.0.50",
+    "version": "1.0.54",
     "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/__tests__/jupyterlab_claude_code_extension.spec.ts

@@ -5,6 +5,7 @@ const session = (over: Partial<ISession> = {}): ISession => ({
   encoded_path: '-p',
   session_id: 'sid',
   name: 'P',
+  name_source: 'basename',
   summary: '',
   first_prompt: '',
   message_count: 0,

package/src/index.ts

@@ -17,7 +17,7 @@ const WIDGET_ID = 'jupyterlab-claude-code-extension';
 const plugin: JupyterFrontEndPlugin<void> = {
   id: PLUGIN_ID,
   description:
-    'Side panel listing Claude Code sessions per project folder, with remote-control indicator, favourites, and one-click resume in a terminal.',
+    'Side panel listing Claude Code sessions per project folder, with remote-control indicator, favorites, and one-click resume in a terminal.',
   autoStart: true,
   requires: [ILabShell],
   optional: [ILayoutRestorer, ISettingRegistry, ITerminalTracker],
@@ -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

@@ -33,7 +33,7 @@ export type PresentationMode = 'session' | 'folder' | 'path';
 const DEFAULT_PRESENTATION_MODE: PresentationMode = 'session';
 
 const SECTION_LABELS: Record<SectionKey, string> = {
-  favourites: 'Favourites',
+  favourites: 'Favorites',
   recent: 'Recent',
   all: 'All'
 };
@@ -566,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[]>();
@@ -579,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;
@@ -694,7 +724,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
         const empty = document.createElement('div');
         empty.className = 'jp-ClaudeSessionsPanel-emptySection';
         empty.textContent =
-          key === 'favourites' ? 'No favourites yet.' : 'Empty.';
+          key === 'favourites' ? 'No favorites yet.' : 'Empty.';
         list.appendChild(empty);
       } else {
         for (const item of items) {
@@ -741,12 +771,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
     name.textContent = this._lookupName(session);
     row.appendChild(name);
 
-    // No star in the Favourites section - every row there is a favourite
+    // No star in the Favorites section - every row there is a favorite
     // by definition; stars are an indicator only useful in Recent/All.
     if (session.favourite && sectionKey !== 'favourites') {
       const star = document.createElement('span');
       star.className = 'jp-ClaudeSessionsPanel-favStar';
-      star.title = 'Favourite';
+      star.title = 'Favorite';
       starFilledIcon.element({ container: star });
       row.appendChild(star);
     }
@@ -853,8 +883,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._commands.addCommand('claude-code-sessions:toggle-favourite', {
       label: () =>
         this._activeSession?.favourite
-          ? 'Remove from Favourites'
-          : 'Add to Favourites',
+          ? 'Remove from Favorites'
+          : 'Add to Favorites',
       execute: () => {
         if (this._activeSession) {
           void this._toggleFavourite(this._activeSession);

package/style/base.css

@@ -24,13 +24,16 @@
   min-height: 24px;
 }
 
+/* The panel title and section headers mirror the file browser's headers
+   (jp-Favorites-header / jp-FileBrowser-header) so the sidebar reads
+   uniformly: 600 weight, uppercase, ui-font-size0, 1px tracking. */
 .jp-ClaudeSessionsPanel-title {
   flex: 1 1 auto;
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 1px;
   text-transform: uppercase;
   font-size: var(--jp-ui-font-size0);
-  color: var(--jp-ui-font-color2);
+  color: var(--jp-ui-font-color1);
 }
 
 .jp-ClaudeSessionsPanel-iconButton {
@@ -123,7 +126,7 @@
   font-family: inherit;
   font-size: var(--jp-ui-font-size0);
   font-weight: 600;
-  letter-spacing: 0.04em;
+  letter-spacing: 1px;
   text-transform: uppercase;
 }