jupyterlab_claude_code_extension 1.2.24 → 1.2.25

package/README.md

@@ -31,7 +31,7 @@ Chat-panel extensions re-implement the agent loop and trail the real tool. This
 - **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; a confirmation dialog names the project and warns it removes the whole project and all its conversations before anything is touched, then 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; 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
+- **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 - a scrollable table over the full list with the current conversation pinned at the top and accented. Conversations can also be deleted here - select one, many, or all via checkboxes, then click Delete; they move to trash immediately (no confirmation, with an "N moved to trash" message; 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

package/lib/widget.js

@@ -1292,6 +1292,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
         // Local working copy so deletions can refresh the list in place.
         let items = [...branches];
         const selected = new Set();
+        let deleting = false; // guards the async delete against double-invocation
         const body = document.createElement('div');
         body.className = 'jp-ClaudeSessionsPanel-branchPopup';
         const search = document.createElement('input');
@@ -1299,25 +1300,49 @@ export class ClaudeCodeSessionsWidget extends Widget {
         search.placeholder = 'Filter sessions...';
         search.className = 'jp-ClaudeSessionsPanel-branchSearch';
         body.appendChild(search);
+        // Table header strip: select-all on the left, conversation count right.
+        const header = document.createElement('div');
+        header.className = 'jp-ClaudeSessionsPanel-branchHeader';
         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);
+        header.appendChild(selectAllBar);
+        const countEl = document.createElement('span');
+        countEl.className = 'jp-ClaudeSessionsPanel-branchHeaderCount';
+        header.appendChild(countEl);
+        body.appendChild(header);
         const list = document.createElement('div');
         list.className = 'jp-ClaudeSessionsPanel-branchList';
+        // role=group makes the aria-label apply to the conversation list region.
+        list.setAttribute('role', 'group');
+        list.setAttribute('aria-label', 'Conversations');
         body.appendChild(list);
         const footer = document.createElement('div');
         footer.className = 'jp-ClaudeSessionsPanel-branchFooter';
+        // Plain visual counter (selection or last action). The screen-reader
+        // announcement lives in a separate live region (srLive) so per-checkbox
+        // ticks are not announced on top of the native checkbox.
+        const selCount = document.createElement('span');
+        selCount.className = 'jp-ClaudeSessionsPanel-branchSelCount';
+        footer.appendChild(selCount);
         const deleteBtn = document.createElement('button');
+        deleteBtn.type = 'button';
         deleteBtn.className = 'jp-ClaudeSessionsPanel-branchDelete';
+        deleteBtn.title = 'Deleted conversations move to the trash (recoverable)';
         footer.appendChild(deleteBtn);
         body.appendChild(footer);
+        // Visually-hidden polite live region, announced only on delete.
+        const srLive = document.createElement('div');
+        srLive.className = 'jp-ClaudeSessionsPanel-srOnly';
+        srLive.setAttribute('role', 'status');
+        srLive.setAttribute('aria-live', 'polite');
+        body.appendChild(srLive);
         const bodyWidget = new Widget({ node: body });
         const dialog = new Dialog({
-            title: 'Switch and Manage Sessions',
+            title: 'Manage Sessions',
             body: bodyWidget,
             buttons: [Dialog.cancelButton()]
         });
@@ -1328,9 +1353,18 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 b.session_id.toLowerCase().includes(needle));
         };
         const updateControls = () => {
-            deleteBtn.disabled = selected.size === 0;
-            deleteBtn.textContent = `Delete (${selected.size})`;
+            deleteBtn.disabled = deleting || selected.size === 0;
+            deleteBtn.textContent = deleting
+                ? 'Deleting...'
+                : `Delete (${selected.size})`;
+            selCount.textContent = selected.size ? `${selected.size} selected` : '';
+            selCount.classList.remove('jp-mod-deleted');
             const visible = visibleMatches();
+            const total = items.length + 1; // + the pinned current conversation
+            const shown = visible.length + 1; // the current row is always shown
+            countEl.textContent = search.value.trim()
+                ? `${shown} of ${total}`
+                : `${total} conversation${total === 1 ? '' : 's'}`;
             const visibleSelected = visible.filter(b => selected.has(b.session_id)).length;
             selectAll.checked =
                 visible.length > 0 && visibleSelected === visible.length;
@@ -1344,6 +1378,10 @@ export class ClaudeCodeSessionsWidget extends Widget {
             const currentRow = document.createElement('div');
             currentRow.className = 'jp-ClaudeSessionsPanel-branchRow jp-mod-current';
             currentRow.title = `Session id: ${current}`;
+            // Empty select cell keeps the name column aligned with branch rows.
+            const currentSelect = document.createElement('span');
+            currentSelect.className = 'jp-ClaudeSessionsPanel-branchSelectCell';
+            currentRow.appendChild(currentSelect);
             const currentLabel = document.createElement('span');
             currentLabel.className = 'jp-ClaudeSessionsPanel-branchLabel';
             const currentName = this._activeSession
@@ -1371,12 +1409,21 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 const row = document.createElement('div');
                 row.className = 'jp-ClaudeSessionsPanel-branchRow';
                 row.title = `Session id: ${b.session_id}`;
+                const selectCell = document.createElement('span');
+                selectCell.className = 'jp-ClaudeSessionsPanel-branchSelectCell';
                 const check = document.createElement('input');
                 check.type = 'checkbox';
                 check.checked = selected.has(b.session_id);
+                check.setAttribute('aria-label', `Select ${this._branchDisplayName(b)}`);
                 // The checkbox is its own click zone - ticking must not switch.
                 check.addEventListener('click', e => {
                     e.stopPropagation();
+                    if (deleting) {
+                        // Keyboard Space isn't blocked by the busy scrim's pointer-events;
+                        // re-sync the native toggle on the next render.
+                        check.checked = selected.has(b.session_id);
+                        return;
+                    }
                     if (check.checked) {
                         selected.add(b.session_id);
                     }
@@ -1385,7 +1432,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
                     }
                     updateControls();
                 });
-                row.appendChild(check);
+                selectCell.appendChild(check);
+                // The whole cell is a select target (>=24px), not just the checkbox;
+                // clicking the padding toggles via the checkbox's own handler.
+                selectCell.addEventListener('click', e => {
+                    if (e.target !== check) {
+                        e.stopPropagation();
+                        check.click();
+                    }
+                });
+                row.appendChild(selectCell);
                 const label = document.createElement('span');
                 label.className = 'jp-ClaudeSessionsPanel-branchLabel';
                 label.textContent = this._branchDisplayName(b);
@@ -1416,6 +1472,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
             }
         };
         selectAll.addEventListener('change', () => {
+            if (deleting) {
+                return;
+            }
             // Select-all acts on the visible (filtered) rows only.
             const visible = visibleMatches();
             if (selectAll.checked) {
@@ -1427,33 +1486,100 @@ export class ClaudeCodeSessionsWidget extends Widget {
             render();
             updateControls();
         });
+        // Busy-lock the whole body (button + list) during the async delete so a
+        // slow backend cannot be double-clicked into deleting the same set twice
+        // and a mid-flight selection cannot be silently discarded.
+        const setDeleting = (on) => {
+            deleting = on;
+            // Scrim the whole popup body (search, select-all, list) so nothing can
+            // be re-ticked or re-triggered mid-flight; the Dialog's Cancel button
+            // sits outside the body and stays usable. aria-busy goes on the live
+            // list region, not the (disabled, unannounced) button.
+            body.classList.toggle('jp-mod-busy', on);
+            if (on) {
+                list.setAttribute('aria-busy', 'true');
+            }
+            else {
+                list.removeAttribute('aria-busy');
+            }
+        };
         deleteBtn.addEventListener('click', () => {
-            if (selected.size === 0) {
+            if (deleting || selected.size === 0) {
                 return;
             }
-            const n = selected.size;
-            void showDialog({
-                title: 'Delete Sessions',
-                body: `Delete ${n} session${n === 1 ? '' : 's'} from "${this._activeSession ? this._lookupName(this._activeSession) : ''}"? ` +
-                    'They are moved to trash. This cannot be undone.',
-                buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Delete' })]
-            }).then(confirm => {
-                if (!confirm.button.accept) {
+            // No confirmation here: deletions move to trash (recoverable), and a
+            // second Lumino dialog stacked on this popup renders detached. The only
+            // confirmed destructive actions are Clean Up Parallel Sessions and
+            // Remove from Claude (whole-project / bulk). Feedback is given instead
+            // of a prompt: a live "N moved to trash" status (a failure still toasts
+            // via _deleteBranches).
+            setDeleting(true);
+            updateControls();
+            void this._deleteBranches([...selected])
+                .then(async (deleted) => {
+                if (deleted === null) {
+                    setDeleting(false);
+                    updateControls(); // re-enable; selection unchanged
                     return;
                 }
-                void this._deleteBranches([...selected]).then(deleted => {
-                    if (deleted === null) {
-                        return;
+                // Re-sync from disk truth, not an optimistic splice: a branch the
+                // backend skipped (it became the resolved-current, or was already
+                // gone) must not vanish from the list while it still exists.
+                const session = this._activeSession;
+                try {
+                    if (!session) {
+                        throw new Error('no active session');
                     }
+                    const fresh = await requestAPI(`sessions/branches?encoded_path=${encodeURIComponent(session.encoded_path)}`, this._serverSettings, { cache: 'no-store' });
+                    items = fresh.branches;
+                }
+                catch (_a) {
+                    // Refetch failed (rare): optimistic removal. The announced count
+                    // may then differ from rows removed if the backend skipped one;
+                    // the panel's own _fetch (in _deleteBranches) reconciles on disk.
                     items = items.filter(b => !selected.has(b.session_id));
-                    selected.clear();
-                    this._lastBranches = items;
-                    render();
+                }
+                // The user may have closed the popup during the refetch await - don't
+                // touch shared state or a detached DOM in that case.
+                if (!bodyWidget.isAttached) {
+                    return;
+                }
+                setDeleting(false);
+                selected.clear();
+                this._lastBranches = items;
+                render();
+                updateControls();
+                // Feedback (no prompt): a perceivable counter + a polite SR
+                // announcement of the actual number the backend moved to trash.
+                const moved = `${deleted} moved to trash`;
+                selCount.textContent = moved;
+                selCount.classList.add('jp-mod-deleted');
+                // Clear then re-set on the next tick so an identical count (two
+                // single deletes in a row) is still re-announced by aria-live.
+                srLive.textContent = '';
+                window.setTimeout(() => {
+                    srLive.textContent = moved;
+                }, 60);
+                // Keep focus inside the dialog (render() destroyed the focused row).
+                // Focus the select-all checkbox (a real control with a reliable
+                // keyboard ring), unless the user is still typing in the search box.
+                if (document.activeElement !== search) {
+                    selectAll.focus();
+                }
+            })
+                .catch(() => {
+                // Defensive: never leave the button stuck disabled if the chain
+                // rejects unexpectedly.
+                if (bodyWidget.isAttached) {
+                    setDeleting(false);
                     updateControls();
-                });
+                }
             });
         });
         search.addEventListener('input', () => {
+            if (deleting) {
+                return;
+            }
             render();
             updateControls();
         });

package/package.json

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

@@ -240,15 +240,56 @@ describe('launch spinner dismiss contract', () => {
       );
     });
 
-    it('delete opens a confirmation dialog and only deletes on accept', () => {
+    it('delete removes selected sessions immediately, no confirmation dialog', () => {
       const popup = (widgetSrc.match(
         /private _showBranchPopup[\s\S]*?\n  \}/
       ) ?? [''])[0];
-      expect(popup).toMatch(/showDialog\(\{\s*title: 'Delete Sessions'/);
-      expect(popup).toMatch(/Dialog\.warnButton\(\{ label: 'Delete' \}\)/);
-      expect(popup).toMatch(
-        /if \(!confirm\.button\.accept\) \{\s*return;[\s\S]*?_deleteBranches/
+      // The per-row delete must NOT stack a second Lumino dialog on the popup
+      // (it renders detached) - confirmation is reserved for cleanup / remove.
+      expect(popup).not.toMatch(/title: 'Delete Sessions'/);
+      const delHandler = (popup.match(
+        /deleteBtn\.addEventListener\('click'[\s\S]*?\n    \}\);/
+      ) ?? [''])[0];
+      expect(delHandler).toMatch(/this\._deleteBranches\(\[\.\.\.selected\]\)/);
+      expect(delHandler).not.toMatch(/showDialog/);
+    });
+
+    it('manage sessions popup is a table with an accented pinned current row', () => {
+      const popup = (widgetSrc.match(
+        /private _showBranchPopup[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(popup).toMatch(/title: 'Manage Sessions'/);
+      expect(popup).toMatch(/branchHeader/);
+      expect(popup).toMatch(/branchHeaderCount/);
+      expect(popup).toMatch(/branchSelectCell/);
+      const css: string = fs.readFileSync(
+        path.join(__dirname, '..', '..', 'style', 'base.css'),
+        'utf-8'
       );
+      const cur = (css.match(
+        /\.jp-ClaudeSessionsPanel-branchRow\.jp-mod-current \{[\s\S]*?\}/
+      ) ?? [''])[0];
+      expect(cur).toMatch(/position: sticky/);
+      expect(cur).toMatch(/border-left: 3px solid var\(--jp-brand-color1\)/);
+      const del = (css.match(
+        /\.jp-ClaudeSessionsPanel-branchDelete \{[\s\S]*?\}/
+      ) ?? [''])[0];
+      expect(del).toMatch(/--jp-error-color1/);
+    });
+
+    it('popup delete is accessible and gives feedback without a prompt', () => {
+      const popup = (widgetSrc.match(
+        /private _showBranchPopup[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      // per-checkbox accessible name + polite live region for the result
+      expect(popup).toMatch(/`Select \$\{this\._branchDisplayName/);
+      expect(popup).toMatch(/aria-live', 'polite'/);
+      // the delete handler announces "N moved to trash" and keeps focus
+      const delHandler = (popup.match(
+        /deleteBtn\.addEventListener\('click'[\s\S]*?\n    \}\);/
+      ) ?? [''])[0];
+      expect(delHandler).toMatch(/moved to trash/);
+      expect(delHandler).toMatch(/selectAll\.focus\(\)/);
     });
 
     it('delete posts to delete-branches and resyncs the panel', () => {

package/src/widget.ts

@@ -1496,6 +1496,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
     // Local working copy so deletions can refresh the list in place.
     let items = [...branches];
     const selected = new Set<string>();
+    let deleting = false; // guards the async delete against double-invocation
 
     const body = document.createElement('div');
     body.className = 'jp-ClaudeSessionsPanel-branchPopup';
@@ -1506,28 +1507,53 @@ export class ClaudeCodeSessionsWidget extends Widget {
     search.className = 'jp-ClaudeSessionsPanel-branchSearch';
     body.appendChild(search);
 
+    // Table header strip: select-all on the left, conversation count right.
+    const header = document.createElement('div');
+    header.className = 'jp-ClaudeSessionsPanel-branchHeader';
     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);
+    header.appendChild(selectAllBar);
+    const countEl = document.createElement('span');
+    countEl.className = 'jp-ClaudeSessionsPanel-branchHeaderCount';
+    header.appendChild(countEl);
+    body.appendChild(header);
 
     const list = document.createElement('div');
     list.className = 'jp-ClaudeSessionsPanel-branchList';
+    // role=group makes the aria-label apply to the conversation list region.
+    list.setAttribute('role', 'group');
+    list.setAttribute('aria-label', 'Conversations');
     body.appendChild(list);
 
     const footer = document.createElement('div');
     footer.className = 'jp-ClaudeSessionsPanel-branchFooter';
+    // Plain visual counter (selection or last action). The screen-reader
+    // announcement lives in a separate live region (srLive) so per-checkbox
+    // ticks are not announced on top of the native checkbox.
+    const selCount = document.createElement('span');
+    selCount.className = 'jp-ClaudeSessionsPanel-branchSelCount';
+    footer.appendChild(selCount);
     const deleteBtn = document.createElement('button');
+    deleteBtn.type = 'button';
     deleteBtn.className = 'jp-ClaudeSessionsPanel-branchDelete';
+    deleteBtn.title = 'Deleted conversations move to the trash (recoverable)';
     footer.appendChild(deleteBtn);
     body.appendChild(footer);
 
+    // Visually-hidden polite live region, announced only on delete.
+    const srLive = document.createElement('div');
+    srLive.className = 'jp-ClaudeSessionsPanel-srOnly';
+    srLive.setAttribute('role', 'status');
+    srLive.setAttribute('aria-live', 'polite');
+    body.appendChild(srLive);
+
     const bodyWidget = new Widget({ node: body });
     const dialog = new Dialog({
-      title: 'Switch and Manage Sessions',
+      title: 'Manage Sessions',
       body: bodyWidget,
       buttons: [Dialog.cancelButton()]
     });
@@ -1543,9 +1569,18 @@ export class ClaudeCodeSessionsWidget extends Widget {
     };
 
     const updateControls = () => {
-      deleteBtn.disabled = selected.size === 0;
-      deleteBtn.textContent = `Delete (${selected.size})`;
+      deleteBtn.disabled = deleting || selected.size === 0;
+      deleteBtn.textContent = deleting
+        ? 'Deleting...'
+        : `Delete (${selected.size})`;
+      selCount.textContent = selected.size ? `${selected.size} selected` : '';
+      selCount.classList.remove('jp-mod-deleted');
       const visible = visibleMatches();
+      const total = items.length + 1; // + the pinned current conversation
+      const shown = visible.length + 1; // the current row is always shown
+      countEl.textContent = search.value.trim()
+        ? `${shown} of ${total}`
+        : `${total} conversation${total === 1 ? '' : 's'}`;
       const visibleSelected = visible.filter(b =>
         selected.has(b.session_id)
       ).length;
@@ -1563,6 +1598,10 @@ export class ClaudeCodeSessionsWidget extends Widget {
       const currentRow = document.createElement('div');
       currentRow.className = 'jp-ClaudeSessionsPanel-branchRow jp-mod-current';
       currentRow.title = `Session id: ${current}`;
+      // Empty select cell keeps the name column aligned with branch rows.
+      const currentSelect = document.createElement('span');
+      currentSelect.className = 'jp-ClaudeSessionsPanel-branchSelectCell';
+      currentRow.appendChild(currentSelect);
       const currentLabel = document.createElement('span');
       currentLabel.className = 'jp-ClaudeSessionsPanel-branchLabel';
       const currentName = this._activeSession
@@ -1592,12 +1631,24 @@ export class ClaudeCodeSessionsWidget extends Widget {
         row.className = 'jp-ClaudeSessionsPanel-branchRow';
         row.title = `Session id: ${b.session_id}`;
 
+        const selectCell = document.createElement('span');
+        selectCell.className = 'jp-ClaudeSessionsPanel-branchSelectCell';
         const check = document.createElement('input');
         check.type = 'checkbox';
         check.checked = selected.has(b.session_id);
+        check.setAttribute(
+          'aria-label',
+          `Select ${this._branchDisplayName(b)}`
+        );
         // The checkbox is its own click zone - ticking must not switch.
         check.addEventListener('click', e => {
           e.stopPropagation();
+          if (deleting) {
+            // Keyboard Space isn't blocked by the busy scrim's pointer-events;
+            // re-sync the native toggle on the next render.
+            check.checked = selected.has(b.session_id);
+            return;
+          }
           if (check.checked) {
             selected.add(b.session_id);
           } else {
@@ -1605,7 +1656,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
           }
           updateControls();
         });
-        row.appendChild(check);
+        selectCell.appendChild(check);
+        // The whole cell is a select target (>=24px), not just the checkbox;
+        // clicking the padding toggles via the checkbox's own handler.
+        selectCell.addEventListener('click', e => {
+          if (e.target !== check) {
+            e.stopPropagation();
+            check.click();
+          }
+        });
+        row.appendChild(selectCell);
 
         const label = document.createElement('span');
         label.className = 'jp-ClaudeSessionsPanel-branchLabel';
@@ -1640,6 +1700,9 @@ export class ClaudeCodeSessionsWidget extends Widget {
     };
 
     selectAll.addEventListener('change', () => {
+      if (deleting) {
+        return;
+      }
       // Select-all acts on the visible (filtered) rows only.
       const visible = visibleMatches();
       if (selectAll.checked) {
@@ -1651,35 +1714,104 @@ export class ClaudeCodeSessionsWidget extends Widget {
       updateControls();
     });
 
+    // Busy-lock the whole body (button + list) during the async delete so a
+    // slow backend cannot be double-clicked into deleting the same set twice
+    // and a mid-flight selection cannot be silently discarded.
+    const setDeleting = (on: boolean) => {
+      deleting = on;
+      // Scrim the whole popup body (search, select-all, list) so nothing can
+      // be re-ticked or re-triggered mid-flight; the Dialog's Cancel button
+      // sits outside the body and stays usable. aria-busy goes on the live
+      // list region, not the (disabled, unannounced) button.
+      body.classList.toggle('jp-mod-busy', on);
+      if (on) {
+        list.setAttribute('aria-busy', 'true');
+      } else {
+        list.removeAttribute('aria-busy');
+      }
+    };
+
     deleteBtn.addEventListener('click', () => {
-      if (selected.size === 0) {
+      if (deleting || selected.size === 0) {
         return;
       }
-      const n = selected.size;
-      void showDialog({
-        title: 'Delete Sessions',
-        body:
-          `Delete ${n} session${n === 1 ? '' : 's'} from "${this._activeSession ? this._lookupName(this._activeSession) : ''}"? ` +
-          'They are moved to trash. This cannot be undone.',
-        buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Delete' })]
-      }).then(confirm => {
-        if (!confirm.button.accept) {
-          return;
-        }
-        void this._deleteBranches([...selected]).then(deleted => {
+      // No confirmation here: deletions move to trash (recoverable), and a
+      // second Lumino dialog stacked on this popup renders detached. The only
+      // confirmed destructive actions are Clean Up Parallel Sessions and
+      // Remove from Claude (whole-project / bulk). Feedback is given instead
+      // of a prompt: a live "N moved to trash" status (a failure still toasts
+      // via _deleteBranches).
+      setDeleting(true);
+      updateControls();
+      void this._deleteBranches([...selected])
+        .then(async deleted => {
           if (deleted === null) {
+            setDeleting(false);
+            updateControls(); // re-enable; selection unchanged
+            return;
+          }
+          // Re-sync from disk truth, not an optimistic splice: a branch the
+          // backend skipped (it became the resolved-current, or was already
+          // gone) must not vanish from the list while it still exists.
+          const session = this._activeSession;
+          try {
+            if (!session) {
+              throw new Error('no active session');
+            }
+            const fresh = await requestAPI<IBranchesResponse>(
+              `sessions/branches?encoded_path=${encodeURIComponent(session.encoded_path)}`,
+              this._serverSettings,
+              { cache: 'no-store' }
+            );
+            items = fresh.branches;
+          } catch {
+            // Refetch failed (rare): optimistic removal. The announced count
+            // may then differ from rows removed if the backend skipped one;
+            // the panel's own _fetch (in _deleteBranches) reconciles on disk.
+            items = items.filter(b => !selected.has(b.session_id));
+          }
+          // The user may have closed the popup during the refetch await - don't
+          // touch shared state or a detached DOM in that case.
+          if (!bodyWidget.isAttached) {
             return;
           }
-          items = items.filter(b => !selected.has(b.session_id));
+          setDeleting(false);
           selected.clear();
           this._lastBranches = items;
           render();
           updateControls();
+          // Feedback (no prompt): a perceivable counter + a polite SR
+          // announcement of the actual number the backend moved to trash.
+          const moved = `${deleted} moved to trash`;
+          selCount.textContent = moved;
+          selCount.classList.add('jp-mod-deleted');
+          // Clear then re-set on the next tick so an identical count (two
+          // single deletes in a row) is still re-announced by aria-live.
+          srLive.textContent = '';
+          window.setTimeout(() => {
+            srLive.textContent = moved;
+          }, 60);
+          // Keep focus inside the dialog (render() destroyed the focused row).
+          // Focus the select-all checkbox (a real control with a reliable
+          // keyboard ring), unless the user is still typing in the search box.
+          if (document.activeElement !== search) {
+            selectAll.focus();
+          }
+        })
+        .catch(() => {
+          // Defensive: never leave the button stuck disabled if the chain
+          // rejects unexpectedly.
+          if (bodyWidget.isAttached) {
+            setDeleting(false);
+            updateControls();
+          }
         });
-      });
     });
 
     search.addEventListener('input', () => {
+      if (deleting) {
+        return;
+      }
       render();
       updateControls();
     });

package/style/base.css

@@ -377,9 +377,50 @@
   border-color: var(--jp-brand-color1);
 }
 
+/* Table header strip above the scrollable list - select-all and count. */
+.jp-ClaudeSessionsPanel-branchHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2px;
+}
+
+.jp-ClaudeSessionsPanel-branchHeaderCount {
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+/* Fixed-width first column so the checkbox (branch rows) and the empty cell
+   (current row) keep the name column aligned, giving a table feel. */
+.jp-ClaudeSessionsPanel-branchSelectCell {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
 .jp-ClaudeSessionsPanel-branchList {
   max-height: 280px;
   overflow-y: auto;
+  position: relative;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 2px;
+}
+
+/* Visually-hidden polite live region (delete announcements). */
+.jp-ClaudeSessionsPanel-srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .jp-ClaudeSessionsPanel-branchRow {
@@ -437,23 +478,39 @@
   cursor: pointer;
 }
 
-/* The current conversation leads the popup list - badged, untouchable. */
+/* The current conversation is pinned at the top of the scroll area and
+   accented (brand left-bar + tint) so it reads as the active one - not
+   dimmed; it is not selectable or deletable. */
 .jp-ClaudeSessionsPanel-branchRow.jp-mod-current {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   cursor: default;
-  color: var(--jp-ui-font-color2);
+  background: var(--jp-layout-color2);
+  border-left: 3px solid var(--jp-brand-color1);
+  padding-left: 5px;
 }
 
 .jp-ClaudeSessionsPanel-branchRow.jp-mod-current:hover {
-  background: transparent;
+  background: var(--jp-layout-color2);
+}
+
+/* The current row's select cell is an empty alignment spacer - no pointer. */
+.jp-ClaudeSessionsPanel-branchRow.jp-mod-current
+  .jp-ClaudeSessionsPanel-branchSelectCell {
+  cursor: default;
 }
 
 .jp-ClaudeSessionsPanel-branchCurrentBadge {
   flex: none;
   padding: 0 6px;
-  border: 1px solid var(--jp-border-color2);
+  border: 1px solid var(--jp-brand-color1);
   border-radius: 8px;
-  color: var(--jp-ui-font-color2);
+  color: var(--jp-brand-color1);
   font-size: var(--jp-ui-font-size0);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .jp-ClaudeSessionsPanel-branchSelectAll {
@@ -474,27 +531,53 @@
 
 .jp-ClaudeSessionsPanel-branchFooter {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
 }
 
+.jp-ClaudeSessionsPanel-branchSelCount {
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+/* The post-delete "N moved to trash" feedback reads at full strength - it is
+   the recoverability cue that stands in for a confirmation prompt. */
+.jp-ClaudeSessionsPanel-branchSelCount.jp-mod-deleted {
+  color: var(--jp-ui-font-color1);
+}
+
+/* While a delete is in flight the whole body is scrimmed so a mid-flight tick,
+   a select-all, a search or a second delete cannot race the async refetch. The
+   Dialog's Cancel button is outside the body and stays usable. */
+.jp-ClaudeSessionsPanel-branchPopup.jp-mod-busy {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* Destructive: deletes immediately (no confirmation), so it reads in the
+   error colour and fills on hover. */
 .jp-ClaudeSessionsPanel-branchDelete {
   padding: 2px 8px;
-  border: 1px solid var(--jp-border-color1);
+  border: 1px solid var(--jp-error-color1);
   border-radius: 2px;
   background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
+  color: var(--jp-error-color1);
   cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
 }
 
 .jp-ClaudeSessionsPanel-branchDelete:disabled {
   opacity: 0.5;
   cursor: default;
+  border-color: var(--jp-border-color1);
+  color: var(--jp-ui-font-color2);
 }
 
-/* Armed state of the two-step delete - second click executes. */
-.jp-ClaudeSessionsPanel-branchDelete.jp-mod-confirm {
-  border-color: var(--jp-error-color1);
-  color: var(--jp-error-color1);
+.jp-ClaudeSessionsPanel-branchDelete:hover:not(:disabled) {
+  background: var(--jp-error-color1);
+  color: var(--jp-ui-inverse-font-color1, #fff);
 }
 
 /* Last-activity time on session rows - dim, fixed-width right-aligned