jupyterlab_claude_code_extension 1.1.16 → 1.1.18

package/lib/icons.d.ts

@@ -4,3 +4,4 @@ export declare const starFilledIcon: LabIcon;
 export declare const refreshIcon: LabIcon;
 export declare const removeIcon: LabIcon;
 export declare const shieldIcon: LabIcon;
+export declare const filterIcon: LabIcon;

package/lib/icons.js

@@ -49,3 +49,10 @@ export const shieldIcon = new LabIcon({
     name: 'jupyterlab_claude_code_extension:shield',
     svgstr: shieldSvgStr
 });
+const filterSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+</svg>`;
+export const filterIcon = new LabIcon({
+    name: 'jupyterlab_claude_code_extension:filter',
+    svgstr: filterSvgStr
+});

package/lib/widget.d.ts

@@ -16,6 +16,11 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     protected onBeforeHide(_msg: Message): void;
     protected onCloseRequest(msg: Message): void;
     private _buildShell;
+    /** Show / hide the filter input. Hiding also clears the active filter
+     * so the user does not end up with an "invisible" filter narrowing
+     * the rows the next time they open the panel.
+     */
+    private _toggleFilterBar;
     /** Normalise strings for filter comparison: NFD-decompose, strip combining
      * diacritic marks, lowercase, and collapse separators (`-`, `_`, `.`, `/`,
      * whitespace) entirely. So "foo-bar", "foo_bar", "foo bar", "Foo Bar" all
@@ -85,6 +90,8 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private readonly _serverSettings;
     private _bodyEl;
     private _refreshBtn;
+    private _filterBtn;
+    private _searchEl;
     private _sessions;
     private _expanded;
     private _commands;

package/lib/widget.js

@@ -3,7 +3,7 @@ import { folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Menu, Widget } from '@lumino/widgets';
 import { requestAPI } from './request';
-import { claudeIcon, refreshIcon, removeIcon, shieldIcon, starFilledIcon } from './icons';
+import { 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';
@@ -59,6 +59,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
     constructor(app, rootDir, terminalTracker = null) {
         super();
         this._refreshBtn = null;
+        this._filterBtn = null;
+        this._searchEl = null;
         this._sessions = null;
         this._expanded = loadExpanded();
         this._activeSession = null;
@@ -137,6 +139,13 @@ export class ClaudeCodeSessionsWidget extends Widget {
         title.className = 'jp-ClaudeSessionsPanel-title';
         title.textContent = 'Claude Code Sessions';
         header.appendChild(title);
+        const filterBtn = document.createElement('button');
+        filterBtn.className = 'jp-ClaudeSessionsPanel-iconButton';
+        filterBtn.title = 'Filter sessions';
+        filterIcon.element({ container: filterBtn });
+        filterBtn.addEventListener('click', () => this._toggleFilterBar());
+        header.appendChild(filterBtn);
+        this._filterBtn = filterBtn;
         const refreshBtn = document.createElement('button');
         refreshBtn.className = 'jp-ClaudeSessionsPanel-iconButton';
         refreshBtn.title = 'Refresh';
@@ -149,10 +158,15 @@ export class ClaudeCodeSessionsWidget extends Widget {
         search.className = 'jp-ClaudeSessionsPanel-search';
         search.placeholder = 'Filter sessions...';
         search.spellcheck = false;
+        // Hidden by default; the filter-icon button reveals it. Lumino's
+        // ``hidden`` attribute toggles ``display: none`` via the user-agent
+        // stylesheet so no extra CSS rule is needed.
+        search.hidden = true;
         search.addEventListener('input', () => {
             this._filter = search.value;
             this._render();
         });
+        this._searchEl = search;
         const body = document.createElement('div');
         body.className = 'jp-ClaudeSessionsPanel-body';
         root.appendChild(header);
@@ -160,6 +174,28 @@ export class ClaudeCodeSessionsWidget extends Widget {
         root.appendChild(body);
         this._bodyEl = body;
     }
+    /** Show / hide the filter input. Hiding also clears the active filter
+     * so the user does not end up with an "invisible" filter narrowing
+     * the rows the next time they open the panel.
+     */
+    _toggleFilterBar() {
+        if (!this._searchEl) {
+            return;
+        }
+        const show = this._searchEl.hidden;
+        this._searchEl.hidden = !show;
+        if (this._filterBtn) {
+            this._filterBtn.classList.toggle('jp-mod-active', show);
+        }
+        if (show) {
+            this._searchEl.focus();
+        }
+        else if (this._filter) {
+            this._filter = '';
+            this._searchEl.value = '';
+            this._render();
+        }
+    }
     /** Normalise strings for filter comparison: NFD-decompose, strip combining
      * diacritic marks, lowercase, and collapse separators (`-`, `_`, `.`, `/`,
      * whitespace) entirely. So "foo-bar", "foo_bar", "foo bar", "Foo Bar" all

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.1.16",
+    "version": "1.1.18",
     "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/icons.ts

@@ -59,3 +59,12 @@ export const shieldIcon = new LabIcon({
   name: 'jupyterlab_claude_code_extension:shield',
   svgstr: shieldSvgStr
 });
+
+const filterSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+</svg>`;
+
+export const filterIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:filter',
+  svgstr: filterSvgStr
+});

package/src/widget.ts

@@ -15,6 +15,7 @@ import { Message } from '@lumino/messaging';
 import { requestAPI } from './request';
 import {
   claudeIcon,
+  filterIcon,
   refreshIcon,
   removeIcon,
   shieldIcon,
@@ -183,6 +184,14 @@ export class ClaudeCodeSessionsWidget extends Widget {
     title.textContent = 'Claude Code Sessions';
     header.appendChild(title);
 
+    const filterBtn = document.createElement('button');
+    filterBtn.className = 'jp-ClaudeSessionsPanel-iconButton';
+    filterBtn.title = 'Filter sessions';
+    filterIcon.element({ container: filterBtn });
+    filterBtn.addEventListener('click', () => this._toggleFilterBar());
+    header.appendChild(filterBtn);
+    this._filterBtn = filterBtn;
+
     const refreshBtn = document.createElement('button');
     refreshBtn.className = 'jp-ClaudeSessionsPanel-iconButton';
     refreshBtn.title = 'Refresh';
@@ -196,10 +205,15 @@ export class ClaudeCodeSessionsWidget extends Widget {
     search.className = 'jp-ClaudeSessionsPanel-search';
     search.placeholder = 'Filter sessions...';
     search.spellcheck = false;
+    // Hidden by default; the filter-icon button reveals it. Lumino's
+    // ``hidden`` attribute toggles ``display: none`` via the user-agent
+    // stylesheet so no extra CSS rule is needed.
+    search.hidden = true;
     search.addEventListener('input', () => {
       this._filter = search.value;
       this._render();
     });
+    this._searchEl = search;
 
     const body = document.createElement('div');
     body.className = 'jp-ClaudeSessionsPanel-body';
@@ -211,6 +225,28 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._bodyEl = body;
   }
 
+  /** Show / hide the filter input. Hiding also clears the active filter
+   * so the user does not end up with an "invisible" filter narrowing
+   * the rows the next time they open the panel.
+   */
+  private _toggleFilterBar(): void {
+    if (!this._searchEl) {
+      return;
+    }
+    const show = this._searchEl.hidden;
+    this._searchEl.hidden = !show;
+    if (this._filterBtn) {
+      this._filterBtn.classList.toggle('jp-mod-active', show);
+    }
+    if (show) {
+      this._searchEl.focus();
+    } else if (this._filter) {
+      this._filter = '';
+      this._searchEl.value = '';
+      this._render();
+    }
+  }
+
   /** Normalise strings for filter comparison: NFD-decompose, strip combining
    * diacritic marks, lowercase, and collapse separators (`-`, `_`, `.`, `/`,
    * whitespace) entirely. So "foo-bar", "foo_bar", "foo bar", "Foo Bar" all
@@ -1062,6 +1098,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
   private readonly _serverSettings: ServerConnection.ISettings;
   private _bodyEl!: HTMLDivElement;
   private _refreshBtn: HTMLButtonElement | null = null;
+  private _filterBtn: HTMLButtonElement | null = null;
+  private _searchEl: HTMLInputElement | null = null;
   private _sessions: ISession[] | null = null;
   private _expanded: Record<SectionKey, boolean> = loadExpanded();
   private _commands!: CommandRegistry;

package/style/base.css

@@ -55,6 +55,11 @@
   color: var(--jp-ui-font-color1);
 }
 
+.jp-ClaudeSessionsPanel-iconButton.jp-mod-active {
+  background: var(--jp-layout-color3);
+  color: var(--jp-brand-color1);
+}
+
 .jp-ClaudeSessionsPanel-iconButton svg {
   width: 14px;
   height: 14px;