jupyterlab_claude_code_extension 1.2.12 → 1.2.19

package/lib/icons.d.ts

@@ -6,4 +6,5 @@ export declare const removeIcon: LabIcon;
 export declare const shieldIcon: LabIcon;
 export declare const addIcon: LabIcon;
 export declare const branchIcon: LabIcon;
+export declare const switchIcon: LabIcon;
 export declare const filterIcon: LabIcon;

package/lib/icons.js

@@ -67,6 +67,15 @@ export const branchIcon = new LabIcon({
     name: 'jupyterlab_claude_code_extension:branch',
     svgstr: branchSvgStr
 });
+// Arrow-switch glyph (Octicons arrow-switch-16, MIT) - marks the
+// "Switch and Manage Sessions" submenu.
+const switchSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M5.22 14.78a.75.75 0 0 0 1.06-1.06L4.56 12h8.69a.75.75 0 0 0 0-1.5H4.56l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3a.75.75 0 0 0 0 1.06l3 3Zm5.56-6.5a.75.75 0 1 1-1.06-1.06l1.72-1.72H2.75a.75.75 0 0 1 0-1.5h8.69L9.72 2.28a.75.75 0 0 1 1.06-1.06l3 3a.75.75 0 0 1 0 1.06l-3 3Z"/>
+</svg>`;
+export const switchIcon = new LabIcon({
+    name: 'jupyterlab_claude_code_extension:switch',
+    svgstr: switchSvgStr
+});
 // Funnel copied verbatim from @jupyterlab/ui-components'
 // `search/filter.svg` - the same image the file browser's filter
 // toggle uses. The `class="jp-icon3"` lets JupyterLab's theme drive

package/lib/widget.d.ts

@@ -149,6 +149,7 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private _commands;
     private _contextMenu;
     private _branchSubmenu;
+    private _branchSessionMenu;
     private _lastBranches;
     private _lastBranchesCurrent;
     private _newSessionMenu;

package/lib/widget.js

@@ -5,7 +5,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 import { Menu, Widget } from '@lumino/widgets';
 import { requestAPI } from './request';
-import { addIcon, branchIcon, claudeIcon, filterIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon } from './icons';
+import { addIcon, branchIcon, switchIcon, claudeIcon, filterIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon } from './icons';
 const POLL_INTERVAL_MS = 30000;
 const DEFAULT_RECENT_LIMIT = 10;
 const EXPANDED_STORAGE_KEY = 'jupyterlab_claude_code_extension:expanded';
@@ -845,12 +845,14 @@ export class ClaudeCodeSessionsWidget extends Widget {
             starFilledIcon.element({ container: star });
             row.appendChild(star);
         }
-        if (session.file_mtime) {
-            const time = document.createElement('span');
-            time.className = 'jp-ClaudeSessionsPanel-rowTime';
-            time.textContent = this._formatRelativeTime(session.file_mtime);
-            row.appendChild(time);
-        }
+        // Always present (empty without an mtime) so the star column keeps
+        // the same anchor across every row in the panel.
+        const time = document.createElement('span');
+        time.className = 'jp-ClaudeSessionsPanel-rowTime';
+        time.textContent = session.file_mtime
+            ? this._formatRelativeTime(session.file_mtime)
+            : '';
+        row.appendChild(time);
         row.addEventListener('click', () => {
             if (removing) {
                 return;
@@ -1073,12 +1075,11 @@ export class ClaudeCodeSessionsWidget extends Widget {
             }
         });
         this._commands.addCommand('claude-code-sessions:branch-session', {
-            label: 'Branch Session...',
-            icon: branchIcon,
+            label: 'Normal',
             execute: () => void this._branchSession(false)
         });
         this._commands.addCommand('claude-code-sessions:branch-session-dangerous', {
-            label: 'Branch Session (Skip Permissions)...',
+            label: 'Skip Permissions',
             icon: shieldIcon,
             execute: () => void this._branchSession(true)
         });
@@ -1116,6 +1117,18 @@ export class ClaudeCodeSessionsWidget extends Widget {
         this._branchSubmenu = new Menu({ commands: this._commands });
         this._branchSubmenu.addClass('jp-ClaudeSessionsContextMenu');
         this._branchSubmenu.title.label = 'Switch and Manage Sessions';
+        this._branchSubmenu.title.icon = switchIcon;
+        // Submenu grouping the two branch-session launch modes.
+        this._branchSessionMenu = new Menu({ commands: this._commands });
+        this._branchSessionMenu.addClass('jp-ClaudeSessionsContextMenu');
+        this._branchSessionMenu.title.label = 'Branch Session';
+        this._branchSessionMenu.title.icon = branchIcon;
+        this._branchSessionMenu.addItem({
+            command: 'claude-code-sessions:branch-session'
+        });
+        this._branchSessionMenu.addItem({
+            command: 'claude-code-sessions:branch-session-dangerous'
+        });
         this._contextMenu = new Menu({ commands: this._commands });
         this._contextMenu.addClass('jp-ClaudeSessionsContextMenu');
         this._rebuildContextMenu(false);
@@ -1154,10 +1167,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
             });
         }
         this._contextMenu.addItem({
-            command: 'claude-code-sessions:branch-session'
-        });
-        this._contextMenu.addItem({
-            command: 'claude-code-sessions:branch-session-dangerous'
+            type: 'submenu',
+            submenu: this._branchSessionMenu
         });
         this._contextMenu.addItem({
             command: 'claude-code-sessions:cleanup-parallel'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.2.12",
+    "version": "1.2.19",
     "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

@@ -318,12 +318,22 @@ describe('launch spinner dismiss contract', () => {
       const rowTime = (css.match(
         /\.jp-ClaudeSessionsPanel-rowTime \{[\s\S]*?\}/
       ) ?? [''])[0];
-      expect(rowTime).toMatch(/width: 52px/);
+      expect(rowTime).toMatch(/width: 4em/);
+      expect(rowTime).toMatch(/white-space: nowrap/);
       expect(rowTime).toMatch(/text-align: right/);
       const branchTime = (css.match(
         /\.jp-ClaudeSessionsPanel-branchTime \{[\s\S]*?\}/
       ) ?? [''])[0];
-      expect(branchTime).toMatch(/width: 52px/);
+      expect(branchTime).toMatch(/width: 4em/);
+      expect(branchTime).toMatch(/white-space: nowrap/);
+      // Stars line up vertically across the entire panel: every row keeps
+      // the time slot (empty without an mtime) and every section reserves
+      // the scrollbar gutter.
+      expect(widgetSrc).toMatch(/time\.textContent = session\.file_mtime\s*\?/);
+      const list = (css.match(/\.jp-ClaudeSessionsPanel-list \{[\s\S]*?\}/) ?? [
+        ''
+      ])[0];
+      expect(list).toMatch(/scrollbar-gutter: stable/);
       expect(branchTime).toMatch(/text-align: right/);
     });
 
@@ -337,14 +347,20 @@ describe('launch spinner dismiss contract', () => {
       );
     });
 
-    it('branch session commands exist in normal and skip-permissions modes', () => {
+    it('branch session is a submenu with normal and skip-permissions entries', () => {
       expect(widgetSrc).toMatch(/claude-code-sessions:branch-session'/);
       expect(widgetSrc).toMatch(
         /claude-code-sessions:branch-session-dangerous/
       );
       expect(widgetSrc).toMatch(
-        /Branch Session \(Skip Permissions\)\.\.\.[\s\S]{0,80}?icon: shieldIcon/
+        /_branchSessionMenu\.title\.label = 'Branch Session'/
+      );
+      expect(widgetSrc).toMatch(
+        /label: 'Skip Permissions',\s*icon: shieldIcon/
       );
+      expect(widgetSrc).toMatch(/submenu: this\._branchSessionMenu/);
+      // No ellipsis on the branch-session labels.
+      expect(widgetSrc).not.toMatch(/Branch Session\.\.\./);
     });
 
     it('branch session asks for a name and launches a known fork id', () => {

package/src/icons.ts

@@ -82,6 +82,17 @@ export const branchIcon = new LabIcon({
   svgstr: branchSvgStr
 });
 
+// Arrow-switch glyph (Octicons arrow-switch-16, MIT) - marks the
+// "Switch and Manage Sessions" submenu.
+const switchSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M5.22 14.78a.75.75 0 0 0 1.06-1.06L4.56 12h8.69a.75.75 0 0 0 0-1.5H4.56l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3a.75.75 0 0 0 0 1.06l3 3Zm5.56-6.5a.75.75 0 1 1-1.06-1.06l1.72-1.72H2.75a.75.75 0 0 1 0-1.5h8.69L9.72 2.28a.75.75 0 0 1 1.06-1.06l3 3a.75.75 0 0 1 0 1.06l-3 3Z"/>
+</svg>`;
+
+export const switchIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:switch',
+  svgstr: switchSvgStr
+});
+
 // Funnel copied verbatim from @jupyterlab/ui-components'
 // `search/filter.svg` - the same image the file browser's filter
 // toggle uses. The `class="jp-icon3"` lets JupyterLab's theme drive

package/src/widget.ts

@@ -19,6 +19,7 @@ import { requestAPI } from './request';
 import {
   addIcon,
   branchIcon,
+  switchIcon,
   claudeIcon,
   filterIcon,
   refreshIcon,
@@ -996,12 +997,14 @@ export class ClaudeCodeSessionsWidget extends Widget {
       row.appendChild(star);
     }
 
-    if (session.file_mtime) {
-      const time = document.createElement('span');
-      time.className = 'jp-ClaudeSessionsPanel-rowTime';
-      time.textContent = this._formatRelativeTime(session.file_mtime);
-      row.appendChild(time);
-    }
+    // Always present (empty without an mtime) so the star column keeps
+    // the same anchor across every row in the panel.
+    const time = document.createElement('span');
+    time.className = 'jp-ClaudeSessionsPanel-rowTime';
+    time.textContent = session.file_mtime
+      ? this._formatRelativeTime(session.file_mtime)
+      : '';
+    row.appendChild(time);
 
     row.addEventListener('click', () => {
       if (removing) {
@@ -1252,13 +1255,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
     });
 
     this._commands.addCommand('claude-code-sessions:branch-session', {
-      label: 'Branch Session...',
-      icon: branchIcon,
+      label: 'Normal',
       execute: () => void this._branchSession(false)
     });
 
     this._commands.addCommand('claude-code-sessions:branch-session-dangerous', {
-      label: 'Branch Session (Skip Permissions)...',
+      label: 'Skip Permissions',
       icon: shieldIcon,
       execute: () => void this._branchSession(true)
     });
@@ -1301,6 +1303,19 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._branchSubmenu = new Menu({ commands: this._commands });
     this._branchSubmenu.addClass('jp-ClaudeSessionsContextMenu');
     this._branchSubmenu.title.label = 'Switch and Manage Sessions';
+    this._branchSubmenu.title.icon = switchIcon;
+
+    // Submenu grouping the two branch-session launch modes.
+    this._branchSessionMenu = new Menu({ commands: this._commands });
+    this._branchSessionMenu.addClass('jp-ClaudeSessionsContextMenu');
+    this._branchSessionMenu.title.label = 'Branch Session';
+    this._branchSessionMenu.title.icon = branchIcon;
+    this._branchSessionMenu.addItem({
+      command: 'claude-code-sessions:branch-session'
+    });
+    this._branchSessionMenu.addItem({
+      command: 'claude-code-sessions:branch-session-dangerous'
+    });
 
     this._contextMenu = new Menu({ commands: this._commands });
     this._contextMenu.addClass('jp-ClaudeSessionsContextMenu');
@@ -1342,10 +1357,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
       });
     }
     this._contextMenu.addItem({
-      command: 'claude-code-sessions:branch-session'
-    });
-    this._contextMenu.addItem({
-      command: 'claude-code-sessions:branch-session-dangerous'
+      type: 'submenu',
+      submenu: this._branchSessionMenu
     });
     this._contextMenu.addItem({
       command: 'claude-code-sessions:cleanup-parallel'
@@ -1803,6 +1816,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
   private _commands!: CommandRegistry;
   private _contextMenu!: Menu;
   private _branchSubmenu!: Menu;
+  private _branchSessionMenu!: Menu;
   private _lastBranches: IBranch[] = [];
   private _lastBranchesCurrent = '';
   private _newSessionMenu!: Menu;

package/style/base.css

@@ -155,6 +155,10 @@
   flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
+
+  /* Reserve the scrollbar gutter in every section so star/time columns
+     line up across the entire panel, scrollbar or not. */
+  scrollbar-gutter: stable;
 }
 
 .jp-ClaudeSessionsPanel-row {
@@ -382,7 +386,8 @@
 
 .jp-ClaudeSessionsPanel-branchTime {
   flex: none;
-  width: 52px;
+  width: 4em;
+  white-space: nowrap;
   text-align: right;
   color: var(--jp-ui-font-color2);
   font-size: var(--jp-ui-font-size0);
@@ -458,7 +463,8 @@
    column so values line up across rows; the star column sits before it. */
 .jp-ClaudeSessionsPanel-rowTime {
   flex: 0 0 auto;
-  width: 52px;
+  width: 4em;
+  white-space: nowrap;
   text-align: right;
   color: var(--jp-ui-font-color2);
   font-size: var(--jp-ui-font-size0);