jupyterlab_claude_code_extension 1.2.7 → 1.2.9

package/README.md

@@ -8,10 +8,21 @@
 [![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)
 
-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.
+A full Claude Code launcher and manager for JupyterLab. Start, resume, fork, switch, and clean up Claude Code CLI sessions from a side panel - one click lands you in the right terminal with Claude already running, no duplicate tabs, no UUID hunting, with a live indicator showing which sessions are active right now.
 
 ![Claude Code Sessions panel](.resources/screenshot.png)
 
+## Why this extension
+
+One principle: **Anthropic knows best how to build the agent harness; we know best how to make it work in JupyterLab.**
+
+Chat-panel extensions re-implement the agent loop and trail the real tool. This one runs the genuine, unmodified Claude Code CLI in JupyterLab terminals - skills, subagents, MCP, hooks, plan mode, every release the day it lands. The extension owns the JupyterLab side:
+
+- **Launching** - new, resumed, or forked sessions, with or without permission prompts, no wrapper shell, correctly sized before Claude draws its first frame
+- **Finding** - every Claude project in one panel: favourites, search, live activity
+- **Reusing** - clicking a session focuses its existing terminal, never a duplicate
+- **Managing** - parallel conversations: switch, fork with a name, delete - no `--resume` pickers, no raw UUIDs
+
 ## Features
 
 - **Three-section side panel** - Favorites, Recent, and All projects, each scrolling independently
@@ -20,8 +31,9 @@ Browse, resume, and manage your Claude Code sessions from a JupyterLab side pane
 - **Favorites** - star projects you keep coming back to via the right-click menu
 - **Remove** - drop a project's Claude history from the panel via the right-click menu; the history folder is moved to the trash (it honours JupyterLab's "move files to trash" setting), not deleted permanently
 - **Clean up parallel sessions** - when a project has accumulated extra sessions beyond the main one, a right-click menu item (showing the count in brackets) removes them all, keeping only the main session; removed files honour the same trash setting
-- **Conversation switcher** - a right-click "Switch and Manage Sessions" submenu lists a project's other conversations by name and short session id, e.g. `home (3f2a1b9c)`, with last-activity time; pick one and it becomes the row's current conversation - the next click resumes exactly that one. The submenu shows the 5 most recent; "Manage Sessions..." opens a searchable popup over the full list where conversations can also be deleted - select one, many, or all via checkboxes, then confirm with a two-step Delete button (removed files honour the trash setting). Rows with multiple conversations show the count in brackets after the name, e.g. `workspace (2)`
-- **Activity at a glance** - each row shows its last activity (`now`, `5m ago`, `2h ago`, `3d ago`); rows active within the last minute light up in the theme's brand colour, rows idle for over a week dim slightly
+- **Conversation switcher** - a right-click "Switch and Manage Sessions" submenu lists a project's other conversations by name and short session id, e.g. `home (3f2a1b9c)`, with last-activity time; pick one and it becomes the row's current conversation - the next click resumes exactly that one. The submenu shows the 5 most recent; "Manage Sessions..." opens a searchable popup over the full list where conversations can also be deleted - select one, many, or all via checkboxes, then confirm with a two-step Delete button (removed files honour the trash setting). Rows with multiple conversations show a branch icon with the count after the name
+- **Branch session** - fork the current conversation into a new named session via the right-click menu (normal or skip-permissions mode); uses Claude's native `--fork-session`, opens in a new terminal, the chosen name is stamped automatically, and the fork becomes the row's current conversation
+- **Activity at a glance** - each row shows its last activity (`now`, `5m ago`, `2h ago`, `3d ago`) in an aligned column, with the favourite star in its own column beside it; rows active within the last minute light up in the theme's brand colour (including the `now` label), rows idle for over a week dim slightly
 - **Search** - fuzzy filter toggled by the funnel button next to refresh
 - **Presentation modes** - label rows by session name (so a `/rename` shows through), folder name, or path relative to the JupyterLab root
 - **Hover tooltip** with project path, last activity, message count, branch, and session id

package/lib/icons.d.ts

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

package/lib/icons.js

@@ -58,6 +58,15 @@ export const addIcon = new LabIcon({
     name: 'jupyterlab_claude_code_extension:add',
     svgstr: addSvgStr
 });
+// Git-branch glyph (Octicons git-branch-16, MIT) - marks rows that carry
+// parallel conversations and the Branch Session menu entries.
+const branchSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628a2.25 2.25 0 0 1-1.5-2.122Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/>
+</svg>`;
+export const branchIcon = new LabIcon({
+    name: 'jupyterlab_claude_code_extension:branch',
+    svgstr: branchSvgStr
+});
 // 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

@@ -118,6 +118,20 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
      * Returns the removed count, or null on failure (after notifying).
      * Always resyncs the panel so the row's conversation count drops. */
     private _deleteBranches;
+    /** Fork the active row's current conversation into a new named branch.
+     *
+     * Asks for a name, then launches a terminal running
+     * ``claude --resume <current> --fork-session --session-id <new uuid>`` -
+     * the uuid is generated here so the forked JSONL is known up front. Once
+     * claude materialises the file (polled via sessions/set-title) the chosen
+     * name is stamped as a custom-title record. The fork is the newest JSONL,
+     * so the recency resolution makes it the row's current conversation
+     * without an explicit switch.
+     */
+    private _branchSession;
+    /** Retry sessions/set-title until the forked JSONL exists (404 while it
+     * does not), then refresh so the row shows the named fork as current. */
+    private _stampForkTitle;
     /** Switch the active row's project to another conversation branch.
      * The backend touches the branch JSONL's mtime; a refresh then shows
      * the selected conversation as the row's current one. */

package/lib/widget.js

@@ -1,10 +1,11 @@
-import { Clipboard, Dialog, Notification, showDialog } from '@jupyterlab/apputils';
+import { Clipboard, Dialog, InputDialog, Notification, showDialog } from '@jupyterlab/apputils';
 import { ServerConnection } from '@jupyterlab/services';
 import { folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
+import { UUID } from '@lumino/coreutils';
 import { Menu, Widget } from '@lumino/widgets';
 import { requestAPI } from './request';
-import { addIcon, claudeIcon, filterIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon } from './icons';
+import { addIcon, branchIcon, 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';
@@ -818,20 +819,25 @@ export class ClaudeCodeSessionsWidget extends Widget {
         }
         const name = document.createElement('span');
         name.className = 'jp-ClaudeSessionsPanel-name';
-        // Conversation count in brackets - only when the project has branches.
-        name.textContent =
-            session.extra_sessions > 0
-                ? `${this._lookupName(session)} (${session.extra_sessions + 1})`
-                : this._lookupName(session);
-        row.appendChild(name);
-        if (session.file_mtime) {
-            const time = document.createElement('span');
-            time.className = 'jp-ClaudeSessionsPanel-rowTime';
-            time.textContent = this._formatRelativeTime(session.file_mtime);
-            row.appendChild(time);
+        name.textContent = this._lookupName(session);
+        // Branch icon + total conversation count - only when the project has
+        // branches. Lives inside the name span so it hugs the label text
+        // instead of being flexed to the row's right edge.
+        if (session.extra_sessions > 0) {
+            const badge = document.createElement('span');
+            badge.className = 'jp-ClaudeSessionsPanel-branchBadge';
+            const icon = document.createElement('span');
+            icon.className = 'jp-ClaudeSessionsPanel-branchBadgeIcon';
+            branchIcon.element({ container: icon });
+            badge.appendChild(icon);
+            badge.appendChild(document.createTextNode(String(session.extra_sessions + 1)));
+            name.appendChild(badge);
         }
+        row.appendChild(name);
         // No star in the Favorites section - every row there is a favorite
         // by definition; stars are an indicator only useful in Recent/All.
+        // Star sits before the time so the fixed-width time column stays the
+        // rightmost alignment anchor across all rows.
         if (session.favourite && sectionKey !== 'favourites') {
             const star = document.createElement('span');
             star.className = 'jp-ClaudeSessionsPanel-favStar';
@@ -839,6 +845,12 @@ 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);
+        }
         row.addEventListener('click', () => {
             if (removing) {
                 return;
@@ -1060,6 +1072,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 void this._showBranchPopup(this._lastBranches, this._lastBranchesCurrent);
             }
         });
+        this._commands.addCommand('claude-code-sessions:branch-session', {
+            label: 'Branch Session...',
+            icon: branchIcon,
+            execute: () => void this._branchSession(false)
+        });
+        this._commands.addCommand('claude-code-sessions:branch-session-dangerous', {
+            label: 'Branch Session (Skip Permissions)...',
+            icon: shieldIcon,
+            execute: () => void this._branchSession(true)
+        });
         this._commands.addCommand('claude-code-sessions:remove', {
             label: 'Remove from Claude',
             icon: removeIcon,
@@ -1131,6 +1153,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 submenu: this._branchSubmenu
             });
         }
+        this._contextMenu.addItem({
+            command: 'claude-code-sessions:branch-session'
+        });
+        this._contextMenu.addItem({
+            command: 'claude-code-sessions:branch-session-dangerous'
+        });
         this._contextMenu.addItem({
             command: 'claude-code-sessions:cleanup-parallel'
         });
@@ -1378,6 +1406,89 @@ export class ClaudeCodeSessionsWidget extends Widget {
             await this._fetch();
         }
     }
+    /** Fork the active row's current conversation into a new named branch.
+     *
+     * Asks for a name, then launches a terminal running
+     * ``claude --resume <current> --fork-session --session-id <new uuid>`` -
+     * the uuid is generated here so the forked JSONL is known up front. Once
+     * claude materialises the file (polled via sessions/set-title) the chosen
+     * name is stamped as a custom-title record. The fork is the newest JSONL,
+     * so the recency resolution makes it the row's current conversation
+     * without an explicit switch.
+     */
+    async _branchSession(forceDangerous) {
+        const session = this._activeSession;
+        if (!session) {
+            return;
+        }
+        const named = await InputDialog.getText({
+            title: 'Branch Session',
+            label: 'Name for the new session',
+            placeholder: this._lookupName(session)
+        });
+        if (!named.button.accept || !named.value || !named.value.trim()) {
+            return;
+        }
+        const title = named.value.trim();
+        const forkId = UUID.uuid4();
+        const spinner = this._showLaunchSpinner();
+        try {
+            const launched = await requestAPI('launch-terminal', this._serverSettings, {
+                method: 'POST',
+                body: JSON.stringify({
+                    project_path: session.project_path,
+                    session_id: session.session_id,
+                    fork_session_id: forkId,
+                    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);
+                this._focusTerminal(widget);
+            }
+        }
+        catch (err) {
+            this._showError(err);
+            return;
+        }
+        finally {
+            spinner.dispose();
+        }
+        // Stamp the name in the background once the forked JSONL appears -
+        // claude writes it on its first record, typically within seconds.
+        void this._stampForkTitle(session.encoded_path, forkId, title);
+    }
+    /** Retry sessions/set-title until the forked JSONL exists (404 while it
+     * does not), then refresh so the row shows the named fork as current. */
+    async _stampForkTitle(encodedPath, sessionId, title) {
+        for (let attempt = 0; attempt < 30; attempt++) {
+            try {
+                await requestAPI('sessions/set-title', this._serverSettings, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        encoded_path: encodedPath,
+                        session_id: sessionId,
+                        title
+                    })
+                });
+                await this._fetch();
+                return;
+            }
+            catch (err) {
+                const notYet = err instanceof ServerConnection.ResponseError &&
+                    err.response.status === 404;
+                if (!notYet) {
+                    break;
+                }
+                await new Promise(resolve => setTimeout(resolve, 1000));
+            }
+        }
+        Notification.warning(`Branched session started, but the name "${title}" could not be applied - use /rename in the session.`, { autoClose: 6000 });
+    }
     /** Switch the active row's project to another conversation branch.
      * The backend touches the branch JSONL's mtime; a refresh then shows
      * the selected conversation as the row's current one. */

package/package.json

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

@@ -138,10 +138,15 @@ describe('launch spinner dismiss contract', () => {
       /private async _switchBranch[\s\S]*?\n  \}/
     ) ?? [''])[0];
 
-    it('shows the conversation count only when the project has branches', () => {
-      expect(widgetSrc).toMatch(
-        /session\.extra_sessions > 0\s*\?\s*`\$\{this\._lookupName\(session\)\} \(\$\{session\.extra_sessions \+ 1\}\)`/
+    it('shows a branch icon + count badge only when the project has branches', () => {
+      const renderRow = (widgetSrc.match(
+        /private _renderRow[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(renderRow).toMatch(
+        /session\.extra_sessions > 0[\s\S]*?jp-ClaudeSessionsPanel-branchBadge/
       );
+      expect(renderRow).toMatch(/branchIcon\.element/);
+      expect(renderRow).toMatch(/String\(session\.extra_sessions \+ 1\)/);
     });
 
     it('rebuilds submenu items from a fresh branches fetch on open', () => {
@@ -293,6 +298,87 @@ describe('launch spinner dismiss contract', () => {
         /result\.current !== result\.requested[\s\S]*?Notification\.warning/
       );
     });
+
+    it('renders the favourite star before the time column', () => {
+      const renderRow = (widgetSrc.match(
+        /private _renderRow[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      const starAt = renderRow.indexOf('jp-ClaudeSessionsPanel-favStar');
+      const timeAt = renderRow.indexOf('jp-ClaudeSessionsPanel-rowTime');
+      expect(starAt).toBeGreaterThan(-1);
+      expect(timeAt).toBeGreaterThan(-1);
+      expect(starAt).toBeLessThan(timeAt);
+    });
+
+    it('time labels form fixed-width right-aligned columns', () => {
+      const css: string = fs.readFileSync(
+        path.join(__dirname, '..', '..', 'style', 'base.css'),
+        'utf-8'
+      );
+      const rowTime = (css.match(
+        /\.jp-ClaudeSessionsPanel-rowTime \{[\s\S]*?\}/
+      ) ?? [''])[0];
+      expect(rowTime).toMatch(/width: 52px/);
+      expect(rowTime).toMatch(/text-align: right/);
+      const branchTime = (css.match(
+        /\.jp-ClaudeSessionsPanel-branchTime \{[\s\S]*?\}/
+      ) ?? [''])[0];
+      expect(branchTime).toMatch(/width: 52px/);
+      expect(branchTime).toMatch(/text-align: right/);
+    });
+
+    it('now label shares the recently-active emphasis colour', () => {
+      const css: string = fs.readFileSync(
+        path.join(__dirname, '..', '..', 'style', 'base.css'),
+        'utf-8'
+      );
+      expect(css).toMatch(
+        /jp-mod-recentlyActive[\s\S]{0,200}?jp-ClaudeSessionsPanel-rowTime[\s\S]{0,80}?--jp-brand-color1/
+      );
+    });
+
+    it('branch session commands exist in normal and skip-permissions modes', () => {
+      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/
+      );
+    });
+
+    it('branch session asks for a name and launches a known fork id', () => {
+      const branch = (widgetSrc.match(
+        /private async _branchSession[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(branch).toMatch(/InputDialog\.getText/);
+      expect(branch).toMatch(/UUID\.uuid4\(\)/);
+      expect(branch).toMatch(/fork_session_id: forkId/);
+      expect(branch).toMatch(/session_id: session\.session_id/);
+      expect(branch).toMatch(/_stampForkTitle/);
+    });
+
+    it('fork title stamping retries on 404 until the JSONL appears', () => {
+      const stamp = (widgetSrc.match(
+        /private async _stampForkTitle[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(stamp).toMatch(/sessions\/set-title/);
+      expect(stamp).toMatch(/status === 404/);
+      expect(stamp).toMatch(/await this\._fetch\(\)/);
+      expect(stamp).toMatch(/Notification\.warning/);
+    });
+
+    it('live dot is softened with reduced opacity', () => {
+      const css: string = fs.readFileSync(
+        path.join(__dirname, '..', '..', 'style', 'base.css'),
+        'utf-8'
+      );
+      const dot = (css.match(/\.jp-ClaudeSessionsPanel-dot \{[\s\S]*?\}/) ?? [
+        ''
+      ])[0];
+      expect(dot).toMatch(/--jp-success-color1/);
+      expect(dot).toMatch(/opacity: 0\.75/);
+    });
   });
 
   it('_doResumeInTerminal dismisses spinner via dispose(), not resolve()', () => {

package/src/icons.ts

@@ -71,6 +71,17 @@ export const addIcon = new LabIcon({
   svgstr: addSvgStr
 });
 
+// Git-branch glyph (Octicons git-branch-16, MIT) - marks rows that carry
+// parallel conversations and the Branch Session menu entries.
+const branchSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628a2.25 2.25 0 0 1-1.5-2.122Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/>
+</svg>`;
+
+export const branchIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:branch',
+  svgstr: branchSvgStr
+});
+
 // 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

@@ -2,6 +2,7 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import {
   Clipboard,
   Dialog,
+  InputDialog,
   Notification,
   showDialog
 } from '@jupyterlab/apputils';
@@ -10,12 +11,14 @@ import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ITerminalTracker } from '@jupyterlab/terminal';
 import { folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
+import { UUID } from '@lumino/coreutils';
 import { Menu, Widget } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
 
 import { requestAPI } from './request';
 import {
   addIcon,
+  branchIcon,
   claudeIcon,
   filterIcon,
   refreshIcon,
@@ -963,22 +966,28 @@ export class ClaudeCodeSessionsWidget extends Widget {
 
     const name = document.createElement('span');
     name.className = 'jp-ClaudeSessionsPanel-name';
-    // Conversation count in brackets - only when the project has branches.
-    name.textContent =
-      session.extra_sessions > 0
-        ? `${this._lookupName(session)} (${session.extra_sessions + 1})`
-        : this._lookupName(session);
-    row.appendChild(name);
-
-    if (session.file_mtime) {
-      const time = document.createElement('span');
-      time.className = 'jp-ClaudeSessionsPanel-rowTime';
-      time.textContent = this._formatRelativeTime(session.file_mtime);
-      row.appendChild(time);
+    name.textContent = this._lookupName(session);
+    // Branch icon + total conversation count - only when the project has
+    // branches. Lives inside the name span so it hugs the label text
+    // instead of being flexed to the row's right edge.
+    if (session.extra_sessions > 0) {
+      const badge = document.createElement('span');
+      badge.className = 'jp-ClaudeSessionsPanel-branchBadge';
+      const icon = document.createElement('span');
+      icon.className = 'jp-ClaudeSessionsPanel-branchBadgeIcon';
+      branchIcon.element({ container: icon });
+      badge.appendChild(icon);
+      badge.appendChild(
+        document.createTextNode(String(session.extra_sessions + 1))
+      );
+      name.appendChild(badge);
     }
+    row.appendChild(name);
 
     // No star in the Favorites section - every row there is a favorite
     // by definition; stars are an indicator only useful in Recent/All.
+    // Star sits before the time so the fixed-width time column stays the
+    // rightmost alignment anchor across all rows.
     if (session.favourite && sectionKey !== 'favourites') {
       const star = document.createElement('span');
       star.className = 'jp-ClaudeSessionsPanel-favStar';
@@ -987,6 +996,13 @@ 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);
+    }
+
     row.addEventListener('click', () => {
       if (removing) {
         return;
@@ -1235,6 +1251,18 @@ export class ClaudeCodeSessionsWidget extends Widget {
       }
     });
 
+    this._commands.addCommand('claude-code-sessions:branch-session', {
+      label: 'Branch Session...',
+      icon: branchIcon,
+      execute: () => void this._branchSession(false)
+    });
+
+    this._commands.addCommand('claude-code-sessions:branch-session-dangerous', {
+      label: 'Branch Session (Skip Permissions)...',
+      icon: shieldIcon,
+      execute: () => void this._branchSession(true)
+    });
+
     this._commands.addCommand('claude-code-sessions:remove', {
       label: 'Remove from Claude',
       icon: removeIcon,
@@ -1313,6 +1341,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
         submenu: this._branchSubmenu
       });
     }
+    this._contextMenu.addItem({
+      command: 'claude-code-sessions:branch-session'
+    });
+    this._contextMenu.addItem({
+      command: 'claude-code-sessions:branch-session-dangerous'
+    });
     this._contextMenu.addItem({
       command: 'claude-code-sessions:cleanup-parallel'
     });
@@ -1594,6 +1628,105 @@ export class ClaudeCodeSessionsWidget extends Widget {
     }
   }
 
+  /** Fork the active row's current conversation into a new named branch.
+   *
+   * Asks for a name, then launches a terminal running
+   * ``claude --resume <current> --fork-session --session-id <new uuid>`` -
+   * the uuid is generated here so the forked JSONL is known up front. Once
+   * claude materialises the file (polled via sessions/set-title) the chosen
+   * name is stamped as a custom-title record. The fork is the newest JSONL,
+   * so the recency resolution makes it the row's current conversation
+   * without an explicit switch.
+   */
+  private async _branchSession(forceDangerous: boolean): Promise<void> {
+    const session = this._activeSession;
+    if (!session) {
+      return;
+    }
+    const named = await InputDialog.getText({
+      title: 'Branch Session',
+      label: 'Name for the new session',
+      placeholder: this._lookupName(session)
+    });
+    if (!named.button.accept || !named.value || !named.value.trim()) {
+      return;
+    }
+    const title = named.value.trim();
+    const forkId = UUID.uuid4();
+    const spinner = this._showLaunchSpinner();
+    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,
+            fork_session_id: forkId,
+            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);
+        this._focusTerminal(widget);
+      }
+    } catch (err) {
+      this._showError(err);
+      return;
+    } finally {
+      spinner.dispose();
+    }
+    // Stamp the name in the background once the forked JSONL appears -
+    // claude writes it on its first record, typically within seconds.
+    void this._stampForkTitle(session.encoded_path, forkId, title);
+  }
+
+  /** Retry sessions/set-title until the forked JSONL exists (404 while it
+   * does not), then refresh so the row shows the named fork as current. */
+  private async _stampForkTitle(
+    encodedPath: string,
+    sessionId: string,
+    title: string
+  ): Promise<void> {
+    for (let attempt = 0; attempt < 30; attempt++) {
+      try {
+        await requestAPI<{ ok: boolean }>(
+          'sessions/set-title',
+          this._serverSettings,
+          {
+            method: 'POST',
+            body: JSON.stringify({
+              encoded_path: encodedPath,
+              session_id: sessionId,
+              title
+            })
+          }
+        );
+        await this._fetch();
+        return;
+      } catch (err) {
+        const notYet =
+          err instanceof ServerConnection.ResponseError &&
+          err.response.status === 404;
+        if (!notYet) {
+          break;
+        }
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
+    Notification.warning(
+      `Branched session started, but the name "${title}" could not be applied - use /rename in the session.`,
+      { autoClose: 6000 }
+    );
+  }
+
   /** Switch the active row's project to another conversation branch.
    * The backend touches the branch JSONL's mtime; a refresh then shows
    * the selected conversation as the row's current one. */

package/style/base.css

@@ -199,12 +199,37 @@
 .jp-ClaudeSessionsPanel-dot {
   background-color: var(--jp-success-color1);
   box-shadow: 0 0 4px var(--jp-success-color1);
+
+  /* Softened a touch - full saturation reads too loud next to row text. */
+  opacity: 0.75;
 }
 
 .jp-ClaudeSessionsPanel-dotPlaceholder {
   background-color: transparent;
 }
 
+/* Branch icon + conversation count, hugging the name text inside the
+   ellipsised name span (not flexed to the row edge). */
+.jp-ClaudeSessionsPanel-branchBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 6px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  vertical-align: middle;
+}
+
+.jp-ClaudeSessionsPanel-branchBadgeIcon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.jp-ClaudeSessionsPanel-branchBadgeIcon svg {
+  width: 12px;
+  height: 12px;
+}
+
 .jp-ClaudeSessionsPanel-favStar {
   flex: 0 0 auto;
   display: inline-flex;
@@ -313,7 +338,18 @@
 .jp-ClaudeSessionsPanel-branchSearch {
   width: 100%;
   box-sizing: border-box;
-  padding: 4px 6px;
+  padding: 2px 6px;
+  background: var(--jp-input-background, var(--jp-layout-color1));
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 2px;
+  font-family: inherit;
+  font-size: var(--jp-ui-font-size1);
+  outline: none;
+}
+
+.jp-ClaudeSessionsPanel-branchSearch:focus {
+  border-color: var(--jp-brand-color1);
 }
 
 .jp-ClaudeSessionsPanel-branchList {
@@ -325,10 +361,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 4px 6px;
+  gap: 6px;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
   cursor: pointer;
   border-radius: 2px;
+  font-size: var(--jp-ui-font-size1);
 }
 
 .jp-ClaudeSessionsPanel-branchRow:hover {
@@ -343,6 +382,8 @@
 
 .jp-ClaudeSessionsPanel-branchTime {
   flex: none;
+  width: 52px;
+  text-align: right;
   color: var(--jp-ui-font-color2);
   font-size: var(--jp-ui-font-size0);
 }
@@ -394,7 +435,7 @@
 }
 
 .jp-ClaudeSessionsPanel-branchDelete {
-  padding: 4px 12px;
+  padding: 2px 8px;
   border: 1px solid var(--jp-border-color1);
   border-radius: 2px;
   background: var(--jp-layout-color1);
@@ -413,17 +454,22 @@
   color: var(--jp-error-color1);
 }
 
-/* Last-activity time on session rows - dim, right of the name. */
+/* Last-activity time on session rows - dim, fixed-width right-aligned
+   column so values line up across rows; the star column sits before it. */
 .jp-ClaudeSessionsPanel-rowTime {
   flex: 0 0 auto;
-  margin-left: 6px;
+  width: 52px;
+  text-align: right;
   color: var(--jp-ui-font-color2);
   font-size: var(--jp-ui-font-size0);
 }
 
 /* Age emphasis: a row active within the last minute reads bright, a row
-   idle for over a week dims; both decay/promote on the next refresh. */
-.jp-ClaudeSessionsPanel-row.jp-mod-recentlyActive .jp-ClaudeSessionsPanel-name {
+   idle for over a week dims; both decay/promote on the next refresh. The
+   "now" time label shares the active colour - same <60s threshold. */
+.jp-ClaudeSessionsPanel-row.jp-mod-recentlyActive .jp-ClaudeSessionsPanel-name,
+.jp-ClaudeSessionsPanel-row.jp-mod-recentlyActive
+  .jp-ClaudeSessionsPanel-rowTime {
   color: var(--jp-brand-color1);
 }