jupyterlab_claude_code_extension 1.2.21 → 1.2.23

package/README.md

@@ -33,6 +33,7 @@ Chat-panel extensions re-implement the agent loop and trail the real tool. This
 - **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; a confirmation dialog naming the project and the count appears first, and 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 in a dialog that names the project and the count (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
+- **Copy session id** - a right-click "Copy Session ID" item copies the row's current conversation id to the clipboard; the Manage Sessions popup adds a copy button on every row, so any parallel conversation's id is one click away
 - **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

package/lib/widget.d.ts

@@ -37,7 +37,10 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private _fuzzyMatch;
     private _levenshtein;
     private _matchesFilter;
-    private _showLoading;
+    /** Raise or clear the full-panel refresh veil. Only the explicit refresh
+     * path calls this; the background poll fetches silently so the panel never
+     * flashes a spinner on its own. */
+    private _setLoading;
     private _showError;
     private _fetch;
     private _toggleFavourite;
@@ -108,6 +111,10 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
      * the project has more than one conversation. On a fetch failure the
      * menu opens without the submenu. */
     private _openContextMenu;
+    /** A compact copy button for a popup row that copies the given session id
+     * to the system clipboard. ``stopPropagation`` keeps the click from
+     * switching or selecting the row it sits in. */
+    private _branchCopyButton;
     /** Popup with the project's full branch list - browse, filter, switch
      * and manage. Clicking an entry switches while nothing is selected;
      * checkbox selection (one, many, or select-all) arms a two-step Delete
@@ -121,17 +128,17 @@ export declare 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.
+     * ``claude --resume <current> --fork-session --session-id <new uuid> -n <name>`` -
+     * the uuid is generated here so the forked JSONL is known up front, and
+     * ``-n`` makes claude own the name: it writes the chosen name as a
+     * custom-title record on its first turn and re-stamps it every turn, so
+     * it sticks even though the fork inherits the parent's title. The fork is
+     * the newest JSONL, so recency resolution makes it the row's current
+     * conversation without an explicit switch. claude writes the fork's JSONL
+     * lazily (on its first turn), so the branch appears on the next poll once
+     * it materialises - the panel cannot list a file that does not exist yet.
      */
     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. */
@@ -141,6 +148,7 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private readonly _app;
     private readonly _serverSettings;
     private _bodyEl;
+    private _loadingEl;
     private _refreshBtn;
     private _filterBtn;
     private _searchEl;

package/lib/widget.js

@@ -1,6 +1,6 @@
 import { Clipboard, Dialog, InputDialog, Notification, showDialog } from '@jupyterlab/apputils';
 import { ServerConnection } from '@jupyterlab/services';
-import { folderIcon, terminalIcon } from '@jupyterlab/ui-components';
+import { copyIcon, folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 import { Menu, Widget } from '@lumino/widgets';
@@ -60,6 +60,7 @@ catch (_err) {
 export class ClaudeCodeSessionsWidget extends Widget {
     constructor(app, rootDir, terminalTracker = null, fileBrowser = null) {
         super();
+        this._loadingEl = null;
         this._refreshBtn = null;
         this._filterBtn = null;
         this._searchEl = null;
@@ -91,16 +92,19 @@ export class ClaudeCodeSessionsWidget extends Widget {
         this._setupContextMenu();
     }
     refresh() {
-        this._showLoading();
+        this._setLoading(true);
         this._setRefreshSpinning(true);
-        // `_fetch` is filesystem-fast, so without a floor the refresh icon would
-        // spin for a single frame and read as "nothing happened". Hold the
-        // spinner for at least ~500 ms so the click visibly registers.
+        // `_fetch` is filesystem-fast, so without a floor the spinner would show
+        // for a single frame and read as "nothing happened". Hold it for at least
+        // ~500 ms so the click visibly registers as a full re-poll.
         const minSpin = new Promise(resolve => window.setTimeout(resolve, 500));
         Promise.all([
             this._fetch().catch(err => this._showError(err)),
             minSpin
-        ]).finally(() => this._setRefreshSpinning(false));
+        ]).finally(() => {
+            this._setRefreshSpinning(false);
+            this._setLoading(false);
+        });
     }
     /** Choose how rows are labelled: by session name, folder name, or path. */
     setPresentationMode(mode) {
@@ -184,10 +188,22 @@ export class ClaudeCodeSessionsWidget extends Widget {
         this._searchEl = search;
         const body = document.createElement('div');
         body.className = 'jp-ClaudeSessionsPanel-body';
+        // Refresh veil + spinner, shown only during an explicit refresh. It lives
+        // on the root (not the body) so `_render` - which wipes the body - never
+        // removes it.
+        const loading = document.createElement('div');
+        loading.className = 'jp-ClaudeSessionsPanel-loading';
+        loading.hidden = true;
+        const loadingSpinner = document.createElement('div');
+        loadingSpinner.className =
+            'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-loadingSpinner';
+        loading.appendChild(loadingSpinner);
         root.appendChild(header);
         root.appendChild(search);
         root.appendChild(body);
+        root.appendChild(loading);
         this._bodyEl = body;
+        this._loadingEl = loading;
     }
     /** Show / hide the filter input. Hiding also clears the active filter
      * so the user does not end up with an "invisible" filter narrowing
@@ -291,8 +307,13 @@ export class ClaudeCodeSessionsWidget extends Widget {
             this._fuzzyMatch(s.project_path, q) ||
             this._fuzzyMatch(this._lookupName(s), q));
     }
-    _showLoading() {
-        // No visual indicator - the spinning refresh button conveys loading state.
+    /** Raise or clear the full-panel refresh veil. Only the explicit refresh
+     * path calls this; the background poll fetches silently so the panel never
+     * flashes a spinner on its own. */
+    _setLoading(on) {
+        if (this._loadingEl) {
+            this._loadingEl.hidden = !on;
+        }
     }
     _showError(err) {
         const message = err instanceof Error ? err.message : String(err);
@@ -1071,6 +1092,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 Clipboard.copyToSystem(path);
             }
         });
+        this._commands.addCommand('claude-code-sessions:copy-session-id', {
+            label: 'Copy Session ID',
+            execute: () => {
+                var _a;
+                const id = (_a = this._activeSession) === null || _a === void 0 ? void 0 : _a.session_id;
+                if (id) {
+                    Clipboard.copyToSystem(id);
+                }
+            }
+        });
         this._commands.addCommand('claude-code-sessions:cleanup-parallel', {
             label: () => { var _a, _b; return `Clean Up Parallel Sessions (${(_b = (_a = this._activeSession) === null || _a === void 0 ? void 0 : _a.extra_sessions) !== null && _b !== void 0 ? _b : 0})`; },
             isVisible: () => { var _a, _b; return ((_b = (_a = this._activeSession) === null || _a === void 0 ? void 0 : _a.extra_sessions) !== null && _b !== void 0 ? _b : 0) > 0; },
@@ -1181,6 +1212,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
             command: 'claude-code-sessions:toggle-favourite'
         });
         this._contextMenu.addItem({ command: 'claude-code-sessions:copy-path' });
+        this._contextMenu.addItem({
+            command: 'claude-code-sessions:copy-session-id'
+        });
         this._contextMenu.addItem({ type: 'separator' });
         if (withBranches) {
             this._contextMenu.addItem({
@@ -1234,6 +1268,21 @@ export class ClaudeCodeSessionsWidget extends Widget {
         this._rebuildContextMenu(hasBranches);
         this._contextMenu.open(x, y);
     }
+    /** A compact copy button for a popup row that copies the given session id
+     * to the system clipboard. ``stopPropagation`` keeps the click from
+     * switching or selecting the row it sits in. */
+    _branchCopyButton(sessionId) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'jp-ClaudeSessionsPanel-branchCopy';
+        btn.title = 'Copy session id';
+        copyIcon.element({ container: btn });
+        btn.addEventListener('click', e => {
+            e.stopPropagation();
+            Clipboard.copyToSystem(sessionId);
+        });
+        return btn;
+    }
     /** Popup with the project's full branch list - browse, filter, switch
      * and manage. Clicking an entry switches while nothing is selected;
      * checkbox selection (one, many, or select-all) arms a two-step Delete
@@ -1306,6 +1355,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
             badge.className = 'jp-ClaudeSessionsPanel-branchCurrentBadge';
             badge.textContent = 'current';
             currentRow.appendChild(badge);
+            currentRow.appendChild(this._branchCopyButton(current));
             list.appendChild(currentRow);
             const matches = visibleMatches();
             if (matches.length === 0) {
@@ -1344,6 +1394,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 time.className = 'jp-ClaudeSessionsPanel-branchTime';
                 time.textContent = this._formatRelativeTime(b.file_mtime);
                 row.appendChild(time);
+                row.appendChild(this._branchCopyButton(b.session_id));
                 row.addEventListener('click', () => {
                     // Selection mode: while anything is ticked, row clicks toggle
                     // selection - no accidental switch mid-selection.
@@ -1442,12 +1493,15 @@ 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.
+     * ``claude --resume <current> --fork-session --session-id <new uuid> -n <name>`` -
+     * the uuid is generated here so the forked JSONL is known up front, and
+     * ``-n`` makes claude own the name: it writes the chosen name as a
+     * custom-title record on its first turn and re-stamps it every turn, so
+     * it sticks even though the fork inherits the parent's title. The fork is
+     * the newest JSONL, so recency resolution makes it the row's current
+     * conversation without an explicit switch. claude writes the fork's JSONL
+     * lazily (on its first turn), so the branch appears on the next poll once
+     * it materialises - the panel cannot list a file that does not exist yet.
      */
     async _branchSession(forceDangerous) {
         const session = this._activeSession;
@@ -1472,6 +1526,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
                     project_path: session.project_path,
                     session_id: session.session_id,
                     fork_session_id: forkId,
+                    name: title,
                     dangerously_skip_permissions: forceDangerous || this._dangerouslySkip
                 })
             });
@@ -1491,36 +1546,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
         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 });
+        // No post-hoc title write: claude owns the name via ``-n`` and stamps it
+        // on the fork's first turn. The branch surfaces on the next poll once
+        // claude materialises its JSONL.
     }
     /** Switch the active row's project to another conversation branch.
      * The backend touches the branch JSONL's mtime; a refresh then shows

package/package.json

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

@@ -378,17 +378,16 @@ describe('launch spinner dismiss contract', () => {
       expect(branch).toMatch(/UUID\.uuid4\(\)/);
       expect(branch).toMatch(/fork_session_id: forkId/);
       expect(branch).toMatch(/session_id: session\.session_id/);
-      expect(branch).toMatch(/_stampForkTitle/);
+      // The name is forced at launch (claude -n <name>) so it sticks.
+      expect(branch).toMatch(/name: title/);
     });
 
-    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('branch session does not post-hoc stamp a title (claude -n owns it)', () => {
+      // The obsolete sessions/set-title poll and its false "could not be
+      // applied" warning were removed once -n took over naming (DEF-1).
+      expect(widgetSrc).not.toMatch(/_stampForkTitle/);
+      expect(widgetSrc).not.toMatch(/sessions\/set-title/);
+      expect(widgetSrc).not.toMatch(/could not be applied/);
     });
 
     it('live dot is softened with reduced opacity', () => {
@@ -402,6 +401,68 @@ describe('launch spinner dismiss contract', () => {
       expect(dot).toMatch(/--jp-success-color1/);
       expect(dot).toMatch(/opacity: 0\.75/);
     });
+
+    it('Copy Session ID command copies the active session id', () => {
+      const cmd = (widgetSrc.match(
+        /addCommand\('claude-code-sessions:copy-session-id'[\s\S]*?\}\);/
+      ) ?? [''])[0];
+      expect(cmd).toMatch(/label: 'Copy Session ID'/);
+      expect(cmd).toMatch(/this\._activeSession\?\.session_id/);
+      expect(cmd).toMatch(/Clipboard\.copyToSystem\(id\)/);
+    });
+
+    it('Copy Session ID sits in the context menu next to Copy Path', () => {
+      expect(widgetSrc).toMatch(
+        /copy-path'[\s\S]*?claude-code-sessions:copy-session-id/
+      );
+    });
+
+    it('popup rows carry a copy button that copies without switching', () => {
+      const helper = (widgetSrc.match(
+        /private _branchCopyButton[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(helper).toMatch(/branchCopy/);
+      expect(helper).toMatch(/copyIcon\.element/);
+      // type='button' so the button never acts as a form submit.
+      expect(helper).toMatch(/btn\.type = 'button'/);
+      expect(helper).toMatch(/stopPropagation/);
+      expect(helper).toMatch(/Clipboard\.copyToSystem\(sessionId\)/);
+      // Wired into the current row and every branch row.
+      expect(widgetSrc).toMatch(/this\._branchCopyButton\(current\)/);
+      expect(widgetSrc).toMatch(/this\._branchCopyButton\(b\.session_id\)/);
+    });
+
+    it('refresh raises the panel veil; the background poll stays silent', () => {
+      const refresh = (widgetSrc.match(
+        /refresh\(\): void \{[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(refresh).toMatch(/this\._setLoading\(true\)/);
+      expect(refresh).toMatch(/this\._setLoading\(false\)/);
+      const poll = (widgetSrc.match(/private _startPolling[\s\S]*?\n  \}/) ?? [
+        ''
+      ])[0];
+      expect(poll).not.toMatch(/_setLoading/);
+    });
+
+    it('refresh veil is built on the root so _render never wipes it', () => {
+      expect(widgetSrc).toMatch(/jp-ClaudeSessionsPanel-loading/);
+      expect(widgetSrc).toMatch(/root\.appendChild\(loading\)/);
+      // Starts hidden and is toggled via the `hidden` attribute.
+      expect(widgetSrc).toMatch(/loading\.hidden = true/);
+      const css: string = fs.readFileSync(
+        path.join(__dirname, '..', '..', 'style', 'base.css'),
+        'utf-8'
+      );
+      // The veil rule MUST be gated on :not([hidden]); a bare
+      // `.loading { display: flex }` author rule beats the UA
+      // `[hidden] { display: none }` and pins the veil permanently on.
+      const veil = (css.match(
+        /\.jp-ClaudeSessionsPanel-loading:not\(\[hidden\]\) \{[\s\S]*?\}/
+      ) ?? [''])[0];
+      expect(veil).toMatch(/position: absolute/);
+      expect(veil).toMatch(/inset: 0/);
+      expect(veil).toMatch(/display: flex/);
+    });
   });
 
   it('_doResumeInTerminal dismisses spinner via dispose(), not resolve()', () => {

package/src/widget.ts

@@ -9,7 +9,7 @@ import {
 import { ServerConnection } from '@jupyterlab/services';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ITerminalTracker } from '@jupyterlab/terminal';
-import { folderIcon, terminalIcon } from '@jupyterlab/ui-components';
+import { copyIcon, folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 import { Menu, Widget } from '@lumino/widgets';
@@ -131,18 +131,21 @@ export class ClaudeCodeSessionsWidget extends Widget {
   }
 
   refresh(): void {
-    this._showLoading();
+    this._setLoading(true);
     this._setRefreshSpinning(true);
-    // `_fetch` is filesystem-fast, so without a floor the refresh icon would
-    // spin for a single frame and read as "nothing happened". Hold the
-    // spinner for at least ~500 ms so the click visibly registers.
+    // `_fetch` is filesystem-fast, so without a floor the spinner would show
+    // for a single frame and read as "nothing happened". Hold it for at least
+    // ~500 ms so the click visibly registers as a full re-poll.
     const minSpin = new Promise<void>(resolve =>
       window.setTimeout(resolve, 500)
     );
     Promise.all([
       this._fetch().catch(err => this._showError(err)),
       minSpin
-    ]).finally(() => this._setRefreshSpinning(false));
+    ]).finally(() => {
+      this._setRefreshSpinning(false);
+      this._setLoading(false);
+    });
   }
 
   /** Choose how rows are labelled: by session name, folder name, or path. */
@@ -242,11 +245,24 @@ export class ClaudeCodeSessionsWidget extends Widget {
     const body = document.createElement('div');
     body.className = 'jp-ClaudeSessionsPanel-body';
 
+    // Refresh veil + spinner, shown only during an explicit refresh. It lives
+    // on the root (not the body) so `_render` - which wipes the body - never
+    // removes it.
+    const loading = document.createElement('div');
+    loading.className = 'jp-ClaudeSessionsPanel-loading';
+    loading.hidden = true;
+    const loadingSpinner = document.createElement('div');
+    loadingSpinner.className =
+      'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-loadingSpinner';
+    loading.appendChild(loadingSpinner);
+
     root.appendChild(header);
     root.appendChild(search);
     root.appendChild(body);
+    root.appendChild(loading);
 
     this._bodyEl = body;
+    this._loadingEl = loading;
   }
 
   /** Show / hide the filter input. Hiding also clears the active filter
@@ -357,8 +373,13 @@ export class ClaudeCodeSessionsWidget extends Widget {
     );
   }
 
-  private _showLoading(): void {
-    // No visual indicator - the spinning refresh button conveys loading state.
+  /** Raise or clear the full-panel refresh veil. Only the explicit refresh
+   * path calls this; the background poll fetches silently so the panel never
+   * flashes a spinner on its own. */
+  private _setLoading(on: boolean): void {
+    if (this._loadingEl) {
+      this._loadingEl.hidden = !on;
+    }
   }
 
   private _showError(err: unknown): void {
@@ -1249,6 +1270,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
       }
     });
 
+    this._commands.addCommand('claude-code-sessions:copy-session-id', {
+      label: 'Copy Session ID',
+      execute: () => {
+        const id = this._activeSession?.session_id;
+        if (id) {
+          Clipboard.copyToSystem(id);
+        }
+      }
+    });
+
     this._commands.addCommand('claude-code-sessions:cleanup-parallel', {
       label: () =>
         `Clean Up Parallel Sessions (${this._activeSession?.extra_sessions ?? 0})`,
@@ -1375,6 +1406,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
       command: 'claude-code-sessions:toggle-favourite'
     });
     this._contextMenu.addItem({ command: 'claude-code-sessions:copy-path' });
+    this._contextMenu.addItem({
+      command: 'claude-code-sessions:copy-session-id'
+    });
     this._contextMenu.addItem({ type: 'separator' });
     if (withBranches) {
       this._contextMenu.addItem({
@@ -1437,6 +1471,22 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._contextMenu.open(x, y);
   }
 
+  /** A compact copy button for a popup row that copies the given session id
+   * to the system clipboard. ``stopPropagation`` keeps the click from
+   * switching or selecting the row it sits in. */
+  private _branchCopyButton(sessionId: string): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'jp-ClaudeSessionsPanel-branchCopy';
+    btn.title = 'Copy session id';
+    copyIcon.element({ container: btn });
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      Clipboard.copyToSystem(sessionId);
+    });
+    return btn;
+  }
+
   /** Popup with the project's full branch list - browse, filter, switch
    * and manage. Clicking an entry switches while nothing is selected;
    * checkbox selection (one, many, or select-all) arms a two-step Delete
@@ -1524,6 +1574,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
       badge.className = 'jp-ClaudeSessionsPanel-branchCurrentBadge';
       badge.textContent = 'current';
       currentRow.appendChild(badge);
+      currentRow.appendChild(this._branchCopyButton(current));
       list.appendChild(currentRow);
 
       const matches = visibleMatches();
@@ -1566,6 +1617,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
         time.textContent = this._formatRelativeTime(b.file_mtime);
         row.appendChild(time);
 
+        row.appendChild(this._branchCopyButton(b.session_id));
+
         row.addEventListener('click', () => {
           // Selection mode: while anything is ticked, row clicks toggle
           // selection - no accidental switch mid-selection.
@@ -1671,12 +1724,15 @@ 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.
+   * ``claude --resume <current> --fork-session --session-id <new uuid> -n <name>`` -
+   * the uuid is generated here so the forked JSONL is known up front, and
+   * ``-n`` makes claude own the name: it writes the chosen name as a
+   * custom-title record on its first turn and re-stamps it every turn, so
+   * it sticks even though the fork inherits the parent's title. The fork is
+   * the newest JSONL, so recency resolution makes it the row's current
+   * conversation without an explicit switch. claude writes the fork's JSONL
+   * lazily (on its first turn), so the branch appears on the next poll once
+   * it materialises - the panel cannot list a file that does not exist yet.
    */
   private async _branchSession(forceDangerous: boolean): Promise<void> {
     const session = this._activeSession;
@@ -1704,6 +1760,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
             project_path: session.project_path,
             session_id: session.session_id,
             fork_session_id: forkId,
+            name: title,
             dangerously_skip_permissions:
               forceDangerous || this._dangerouslySkip
           })
@@ -1723,48 +1780,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
     } 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 }
-    );
+    // No post-hoc title write: claude owns the name via ``-n`` and stamps it
+    // on the fork's first turn. The branch surfaces on the next poll once
+    // claude materialises its JSONL.
   }
 
   /** Switch the active row's project to another conversation branch.
@@ -1835,6 +1853,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
   private readonly _app: JupyterFrontEnd;
   private readonly _serverSettings: ServerConnection.ISettings;
   private _bodyEl!: HTMLDivElement;
+  private _loadingEl: HTMLElement | null = null;
   private _refreshBtn: HTMLButtonElement | null = null;
   private _filterBtn: HTMLButtonElement | null = null;
   private _searchEl: HTMLInputElement | null = null;

package/style/base.css

@@ -6,6 +6,7 @@
 .jp-ClaudeSessionsPanel {
   display: flex;
   flex-direction: column;
+  position: relative;
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
   font-family: var(--jp-ui-font-family);
@@ -274,6 +275,26 @@
   display: inline-block;
 }
 
+/* Full-panel veil shown only during an explicit refresh (refresh button or
+   panel show) - the background 30 s poll never raises it. The rule is gated
+   on :not([hidden]) because this author `display` would otherwise beat the
+   UA `[hidden] { display: none }` rule and pin the veil permanently on. */
+.jp-ClaudeSessionsPanel-loading:not([hidden]) {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--jp-layout-color1) 65%, transparent);
+}
+
+.jp-ClaudeSessionsPanel-loadingSpinner {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
 .jp-ClaudeSessionsPanel-launchOverlay {
   display: flex;
   flex-direction: column;
@@ -379,11 +400,28 @@
 }
 
 .jp-ClaudeSessionsPanel-branchLabel {
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.jp-ClaudeSessionsPanel-branchCopy {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+}
+
+.jp-ClaudeSessionsPanel-branchCopy:hover {
+  color: var(--jp-ui-font-color1);
+}
+
 .jp-ClaudeSessionsPanel-branchTime {
   flex: none;
   width: 4em;