jupyterlab_claude_code_extension 1.2.5 → 1.2.9

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,
@@ -26,6 +29,7 @@ import {
 import {
   IBranch,
   IBranchesResponse,
+  IDeleteBranchesResponse,
   IFavouriteResponse,
   ILaunchTerminalResponse,
   ICleanupResponse,
@@ -928,6 +932,17 @@ export class ClaudeCodeSessionsWidget extends Widget {
     row.className = 'jp-ClaudeSessionsPanel-row';
     row.title = this._buildRowTooltip(session);
 
+    // Age emphasis: active within the last minute reads bright, idle for
+    // over a week dims; the state decays/promotes on the next refresh.
+    if (session.file_mtime) {
+      const age = Date.now() - session.file_mtime;
+      if (age < 60_000) {
+        row.classList.add('jp-mod-recentlyActive');
+      } else if (age > 7 * 86_400_000) {
+        row.classList.add('jp-mod-stale');
+      }
+    }
+
     const removing = this._removingPaths.has(session.encoded_path);
     if (removing) {
       row.classList.add('jp-mod-busy');
@@ -951,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';
@@ -975,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;
@@ -1214,12 +1242,27 @@ export class ClaudeCodeSessionsWidget extends Widget {
     });
 
     this._commands.addCommand('claude-code-sessions:switch-branch-more', {
-      label: () => `More... (${this._lastBranches.length} total)`,
+      label: () => `Manage Sessions... (${this._lastBranches.length})`,
       execute: () => {
-        void this._showBranchPopup(this._lastBranches);
+        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,
@@ -1257,7 +1300,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
     // sessions/branches fetch.
     this._branchSubmenu = new Menu({ commands: this._commands });
     this._branchSubmenu.addClass('jp-ClaudeSessionsContextMenu');
-    this._branchSubmenu.title.label = 'Switch Conversation Branch';
+    this._branchSubmenu.title.label = 'Switch and Manage Sessions';
 
     this._contextMenu = new Menu({ commands: this._commands });
     this._contextMenu.addClass('jp-ClaudeSessionsContextMenu');
@@ -1298,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'
     });
@@ -1321,9 +1370,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
           { cache: 'no-store' }
         );
         this._lastBranches = data.branches;
+        this._lastBranchesCurrent = data.current;
         this._branchSubmenu.clearItems();
-        // The submenu shows only the 5 most recent; the full list lives
-        // behind "More..." in a searchable popup.
+        this._branchSubmenu.title.label = `Switch and Manage Sessions (${data.branches.length})`;
+        // The submenu shows only the 5 most recent inline (fewest clicks
+        // for often-used sessions); the full list plus management lives
+        // behind the always-present "Manage Sessions..." popup.
         for (const b of data.branches.slice(0, 5)) {
           this._branchSubmenu.addItem({
             command: 'claude-code-sessions:switch-branch',
@@ -1333,12 +1385,10 @@ export class ClaudeCodeSessionsWidget extends Widget {
             }
           });
         }
-        if (data.branches.length > 5) {
-          this._branchSubmenu.addItem({ type: 'separator' });
-          this._branchSubmenu.addItem({
-            command: 'claude-code-sessions:switch-branch-more'
-          });
-        }
+        this._branchSubmenu.addItem({ type: 'separator' });
+        this._branchSubmenu.addItem({
+          command: 'claude-code-sessions:switch-branch-more'
+        });
         hasBranches = data.branches.length > 0;
       } catch {
         hasBranches = false;
@@ -1348,42 +1398,106 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._contextMenu.open(x, y);
   }
 
-  /** Popup with the project's full branch list - browse and filter when
-   * the list is too large for the submenu. Clicking an entry switches. */
-  private _showBranchPopup(branches: IBranch[]): void {
+  /** 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
+   * button that removes the chosen sessions. The current conversation is
+   * shown first, badged and untouchable. */
+  private _showBranchPopup(branches: IBranch[], current: string): void {
+    // Local working copy so deletions can refresh the list in place.
+    let items = [...branches];
+    const selected = new Set<string>();
+    let confirmArmed = false;
+
     const body = document.createElement('div');
     body.className = 'jp-ClaudeSessionsPanel-branchPopup';
 
     const search = document.createElement('input');
     search.type = 'search';
-    search.placeholder = 'Filter branches...';
+    search.placeholder = 'Filter sessions...';
     search.className = 'jp-ClaudeSessionsPanel-branchSearch';
     body.appendChild(search);
 
+    const selectAllBar = document.createElement('label');
+    selectAllBar.className = 'jp-ClaudeSessionsPanel-branchSelectAll';
+    const selectAll = document.createElement('input');
+    selectAll.type = 'checkbox';
+    selectAllBar.appendChild(selectAll);
+    selectAllBar.appendChild(document.createTextNode('Select all'));
+    body.appendChild(selectAllBar);
+
     const list = document.createElement('div');
     list.className = 'jp-ClaudeSessionsPanel-branchList';
     body.appendChild(list);
 
+    const footer = document.createElement('div');
+    footer.className = 'jp-ClaudeSessionsPanel-branchFooter';
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'jp-ClaudeSessionsPanel-branchDelete';
+    footer.appendChild(deleteBtn);
+    body.appendChild(footer);
+
     const bodyWidget = new Widget({ node: body });
     const dialog = new Dialog({
-      title: 'Switch Conversation Branch',
+      title: 'Switch and Manage Sessions',
       body: bodyWidget,
       buttons: [Dialog.cancelButton()]
     });
 
-    const render = () => {
+    const visibleMatches = (): IBranch[] => {
       const needle = search.value.trim().toLowerCase();
-      list.replaceChildren();
-      const matches = branches.filter(
+      return items.filter(
         b =>
           !needle ||
           b.label.toLowerCase().includes(needle) ||
           b.session_id.toLowerCase().includes(needle)
       );
+    };
+
+    // Any selection change disarms a pending confirm.
+    const updateControls = () => {
+      confirmArmed = false;
+      deleteBtn.disabled = selected.size === 0;
+      deleteBtn.textContent = `Delete (${selected.size})`;
+      deleteBtn.classList.remove('jp-mod-confirm');
+      const visible = visibleMatches();
+      const visibleSelected = visible.filter(b =>
+        selected.has(b.session_id)
+      ).length;
+      selectAll.checked =
+        visible.length > 0 && visibleSelected === visible.length;
+      selectAll.indeterminate =
+        visibleSelected > 0 && visibleSelected < visible.length;
+    };
+
+    const render = () => {
+      list.replaceChildren();
+
+      // The current conversation leads the list - badged, unselectable,
+      // undeletable; only the extras below it are manageable.
+      const currentRow = document.createElement('div');
+      currentRow.className = 'jp-ClaudeSessionsPanel-branchRow jp-mod-current';
+      currentRow.title = `Session id: ${current}`;
+      const currentLabel = document.createElement('span');
+      currentLabel.className = 'jp-ClaudeSessionsPanel-branchLabel';
+      const currentName = this._activeSession
+        ? this._lookupName(this._activeSession)
+        : current.slice(0, 8);
+      currentLabel.textContent = `${currentName} (${current.slice(0, 8)})`;
+      currentRow.appendChild(currentLabel);
+      const badge = document.createElement('span');
+      badge.className = 'jp-ClaudeSessionsPanel-branchCurrentBadge';
+      badge.textContent = 'current';
+      currentRow.appendChild(badge);
+      list.appendChild(currentRow);
+
+      const matches = visibleMatches();
       if (matches.length === 0) {
         const empty = document.createElement('div');
         empty.className = 'jp-ClaudeSessionsPanel-emptySection';
-        empty.textContent = 'No matching branches.';
+        empty.textContent = items.length
+          ? 'No matching sessions.'
+          : 'No other conversations.';
         list.appendChild(empty);
         return;
       }
@@ -1392,6 +1506,21 @@ export class ClaudeCodeSessionsWidget extends Widget {
         row.className = 'jp-ClaudeSessionsPanel-branchRow';
         row.title = `Session id: ${b.session_id}`;
 
+        const check = document.createElement('input');
+        check.type = 'checkbox';
+        check.checked = selected.has(b.session_id);
+        // The checkbox is its own click zone - ticking must not switch.
+        check.addEventListener('click', e => {
+          e.stopPropagation();
+          if (check.checked) {
+            selected.add(b.session_id);
+          } else {
+            selected.delete(b.session_id);
+          }
+          updateControls();
+        });
+        row.appendChild(check);
+
         const label = document.createElement('span');
         label.className = 'jp-ClaudeSessionsPanel-branchLabel';
         label.textContent = this._branchDisplayName(b);
@@ -1403,19 +1532,201 @@ export class ClaudeCodeSessionsWidget extends Widget {
         row.appendChild(time);
 
         row.addEventListener('click', () => {
+          // Selection mode: while anything is ticked, row clicks toggle
+          // selection - no accidental switch mid-selection.
+          if (selected.size > 0) {
+            if (selected.has(b.session_id)) {
+              selected.delete(b.session_id);
+            } else {
+              selected.add(b.session_id);
+            }
+            check.checked = selected.has(b.session_id);
+            updateControls();
+            return;
+          }
           dialog.dispose();
           void this._switchBranch(b.session_id);
         });
         list.appendChild(row);
       }
     };
-    search.addEventListener('input', render);
+
+    selectAll.addEventListener('change', () => {
+      // Select-all acts on the visible (filtered) rows only.
+      const visible = visibleMatches();
+      if (selectAll.checked) {
+        visible.forEach(b => selected.add(b.session_id));
+      } else {
+        visible.forEach(b => selected.delete(b.session_id));
+      }
+      render();
+      updateControls();
+    });
+
+    deleteBtn.addEventListener('click', () => {
+      if (selected.size === 0) {
+        return;
+      }
+      if (!confirmArmed) {
+        // Two-step delete: first click arms, second click executes.
+        confirmArmed = true;
+        deleteBtn.textContent = `Confirm delete (${selected.size})`;
+        deleteBtn.classList.add('jp-mod-confirm');
+        return;
+      }
+      void this._deleteBranches([...selected]).then(deleted => {
+        if (deleted === null) {
+          return;
+        }
+        items = items.filter(b => !selected.has(b.session_id));
+        selected.clear();
+        this._lastBranches = items;
+        render();
+        updateControls();
+      });
+    });
+
+    search.addEventListener('input', () => {
+      render();
+      updateControls();
+    });
     render();
+    updateControls();
 
     void dialog.launch();
     search.focus();
   }
 
+  /** Delete the given branch sessions of the active row's project.
+   * Returns the removed count, or null on failure (after notifying).
+   * Always resyncs the panel so the row's conversation count drops. */
+  private async _deleteBranches(sessionIds: string[]): Promise<number | null> {
+    const session = this._activeSession;
+    if (!session) {
+      return null;
+    }
+    try {
+      const result = await requestAPI<IDeleteBranchesResponse>(
+        'sessions/delete-branches',
+        this._serverSettings,
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            encoded_path: session.encoded_path,
+            session_ids: sessionIds
+          })
+        }
+      );
+      return result.removed_count;
+    } catch (err) {
+      Notification.error(`Delete failed: ${String(err)}`, {
+        autoClose: 4000
+      });
+      return null;
+    } finally {
+      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.
+   */
+  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. */
@@ -1493,6 +1804,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
   private _contextMenu!: Menu;
   private _branchSubmenu!: Menu;
   private _lastBranches: IBranch[] = [];
+  private _lastBranchesCurrent = '';
   private _newSessionMenu!: Menu;
   private _activeSession: ISession | null = null;
   private _activeRowEl: HTMLElement | null = null;