jupyterlab_claude_code_extension 1.2.40 → 1.2.42

package/README.md

@@ -36,6 +36,7 @@ Chat-panel extensions re-implement the agent loop and trail the real tool. This
 - **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
+- **Coloured terminal tabs** - each Claude session's colour (set with `/color`, or auto-assigned) tints its terminal tab, so open sessions are easy to tell apart; needs the companion `jupyterlab_colourful_tab_extension` (>= 1.0.19), which supplies the tab-colouring API
 - **Search** - fuzzy filter toggled by the funnel button next to refresh
 - **Presentation modes** - label rows by session name (so a `/rename` shows through), folder name, or path relative to the JupyterLab root
 - **Hover tooltip** with project path, last activity, message count, branch, and session id

package/lib/index.js

@@ -2,6 +2,7 @@ import { ILabShell, ILayoutRestorer } from '@jupyterlab/application';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminalTracker } from '@jupyterlab/terminal';
+import { IColourfulTabs } from 'jupyterlab_colourful_tab_extension';
 import { requestAPI } from './request';
 import { ClaudeCodeSessionsWidget } from './widget';
 const PLUGIN_ID = 'jupyterlab_claude_code_extension:plugin';
@@ -15,9 +16,10 @@ const plugin = {
         ILayoutRestorer,
         ISettingRegistry,
         ITerminalTracker,
-        IDefaultFileBrowser
+        IDefaultFileBrowser,
+        IColourfulTabs
     ],
-    activate: async (app, labShell, restorer, settingRegistry, terminalTracker, fileBrowser) => {
+    activate: async (app, labShell, restorer, settingRegistry, terminalTracker, fileBrowser, colourfulTabs) => {
         const settings = app.serviceManager.serverSettings;
         let status;
         try {
@@ -31,7 +33,7 @@ const plugin = {
             console.info('[jupyterlab_claude_code_extension] `claude` binary not found on PATH; panel disabled.');
             return;
         }
-        const widget = new ClaudeCodeSessionsWidget(app, status.root_dir || '', terminalTracker, fileBrowser);
+        const widget = new ClaudeCodeSessionsWidget(app, status.root_dir || '', terminalTracker, fileBrowser, colourfulTabs);
         // Read the sidebar setting before docking so we add the widget to the
         // user's preferred side on first paint. Default to right.
         let currentSidebar = 'right';

package/lib/types.d.ts

@@ -14,6 +14,9 @@ export interface ISession {
     remote_control: boolean;
     favourite: boolean;
     extra_sessions: number;
+    /** Claude session colour from `/color` or auto-assignment (e.g. "blue"), or
+     * null when the session carries none. Drives the terminal tab tint. */
+    color: string | null;
 }
 export interface ISessionsListResponse {
     sessions: ISession[];

package/lib/widget.d.ts

@@ -1,11 +1,12 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ITerminalTracker } from '@jupyterlab/terminal';
+import { IColourfulTabs } from 'jupyterlab_colourful_tab_extension';
 import { Widget } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
 export type PresentationMode = 'name' | 'path';
 export declare class ClaudeCodeSessionsWidget extends Widget {
-    constructor(app: JupyterFrontEnd, rootDir: string, terminalTracker?: ITerminalTracker | null, fileBrowser?: IDefaultFileBrowser | null);
+    constructor(app: JupyterFrontEnd, rootDir: string, terminalTracker?: ITerminalTracker | null, fileBrowser?: IDefaultFileBrowser | null, colourfulTabs?: IColourfulTabs | null);
     refresh(): void;
     /** Choose how rows are labelled: by name (session name, initially the
      * folder name), or by path. */
@@ -81,6 +82,19 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
      * first.
      */
     private _focusTerminal;
+    /** Tint a terminal's dock tab with the colour of the Claude session it runs,
+     * delegating to jupyterlab_colourful_tab_extension's `setColour` API so that
+     * extension owns the tab CSS and colour vocabulary. A no-op when the
+     * colourful-tab extension is not installed (the token is optional). An
+     * absent/unknown colour clears the tint. */
+    private _applyTerminalColour;
+    /** Re-tint every tracked terminal tab from the freshest session colours.
+     * Runs after each fetch (launch refresh + the 30s poll), so a `/color`
+     * change shows on the next tick. Matches on project AND conversation so a
+     * tab only takes the colour of the exact session it runs; a terminal
+     * running a branch other than the project's representative row stays
+     * untinted rather than borrowing a sibling's colour. */
+    private _reconcileTerminalColours;
     private _findTerminalForCwd;
     private _showCloseExistingDialog;
     /** Show a modal with a spinner while the terminal is being launched. The
@@ -204,6 +218,7 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private readonly _removingPaths;
     private readonly _terminalTracker;
     private readonly _fileBrowser;
+    private readonly _colourfulTabs;
     private readonly _terminalsByPath;
     private readonly _pendingByPath;
     private readonly _rootDir;

package/lib/widget.js

@@ -14,6 +14,21 @@ const BRANCH_WATCH_MAX_ATTEMPTS = 90; // ~3 minutes
 const DEFAULT_RECENT_LIMIT = 10;
 const EXPANDED_STORAGE_KEY = 'jupyterlab_claude_code_extension:expanded';
 const DEFAULT_PRESENTATION_MODE = 'name';
+// Claude's per-session colour (set by `/color`, or auto-assigned for
+// multi-session use) maps to a jupyterlab_colourful_tab_extension colour id.
+// That extension owns the tab-tint CSS and the setColour API; we only feed it
+// the colour. An absent or unrecognised colour resolves to null (clear tint).
+const CLAUDE_TAB_COLOUR_ID = {
+    red: 'rose',
+    orange: 'peach',
+    yellow: 'lemon',
+    green: 'mint',
+    blue: 'sky',
+    purple: 'lavender'
+};
+function claudeTabColourId(color) {
+    return (color && CLAUDE_TAB_COLOUR_ID[color]) || null;
+}
 const SECTION_LABELS = {
     favourites: 'Favorites',
     recent: 'Recent',
@@ -62,7 +77,7 @@ catch (_err) {
     // ignore
 }
 export class ClaudeCodeSessionsWidget extends Widget {
-    constructor(app, rootDir, terminalTracker = null, fileBrowser = null) {
+    constructor(app, rootDir, terminalTracker = null, fileBrowser = null, colourfulTabs = null) {
         super();
         this._loadingEl = null;
         this._refreshBtn = null;
@@ -92,6 +107,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
         this._rootDir = rootDir.replace(/\/+$/, '');
         this._terminalTracker = terminalTracker;
         this._fileBrowser = fileBrowser;
+        this._colourfulTabs = colourfulTabs;
         this.id = 'jupyterlab-claude-code-extension';
         this.title.icon = claudeIcon;
         this.title.caption = 'Claude Code Sessions';
@@ -337,6 +353,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
         const data = await requestAPI('sessions', this._serverSettings, { cache: 'no-store' });
         this._sessions = (_a = data.sessions) !== null && _a !== void 0 ? _a : [];
         this._render();
+        this._reconcileTerminalColours();
     }
     async _toggleFavourite(session) {
         const next = !session.favourite;
@@ -641,6 +658,35 @@ export class ClaudeCodeSessionsWidget extends Widget {
             }
         });
     }
+    /** Tint a terminal's dock tab with the colour of the Claude session it runs,
+     * delegating to jupyterlab_colourful_tab_extension's `setColour` API so that
+     * extension owns the tab CSS and colour vocabulary. A no-op when the
+     * colourful-tab extension is not installed (the token is optional). An
+     * absent/unknown colour clears the tint. */
+    _applyTerminalColour(widget, color) {
+        if (!this._colourfulTabs || !widget || widget.isDisposed) {
+            return;
+        }
+        this._colourfulTabs.setColour(widget, claudeTabColourId(color));
+    }
+    /** Re-tint every tracked terminal tab from the freshest session colours.
+     * Runs after each fetch (launch refresh + the 30s poll), so a `/color`
+     * change shows on the next tick. Matches on project AND conversation so a
+     * tab only takes the colour of the exact session it runs; a terminal
+     * running a branch other than the project's representative row stays
+     * untinted rather than borrowing a sibling's colour. */
+    _reconcileTerminalColours() {
+        var _a;
+        const sessions = (_a = this._sessions) !== null && _a !== void 0 ? _a : [];
+        this._terminalsByPath.forEach((entry, projectPath) => {
+            var _a;
+            if (!entry.widget || entry.widget.isDisposed) {
+                return;
+            }
+            const match = sessions.find(s => s.project_path === projectPath && s.session_id === entry.sessionId);
+            this._applyTerminalColour(entry.widget, (_a = match === null || match === void 0 ? void 0 : match.color) !== null && _a !== void 0 ? _a : null);
+        });
+    }
     async _findTerminalForCwd(projectPath, wantedSessionId) {
         var _a, _b, _c;
         if (!this._terminalTracker) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.2.40",
+    "version": "1.2.42",
     "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",
@@ -64,7 +64,8 @@
         "@jupyterlab/terminal": "^4.0.0",
         "@jupyterlab/ui-components": "^4.0.0",
         "@lumino/commands": "^2.0.0",
-        "@lumino/widgets": "^2.0.0"
+        "@lumino/widgets": "^2.0.0",
+        "jupyterlab_colourful_tab_extension": "^1.0.19"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",
@@ -125,7 +126,13 @@
         },
         "extension": true,
         "schemaDir": "schema",
-        "outputDir": "jupyterlab_claude_code_extension/labextension"
+        "outputDir": "jupyterlab_claude_code_extension/labextension",
+        "sharedPackages": {
+            "jupyterlab_colourful_tab_extension": {
+                "bundled": false,
+                "singleton": true
+            }
+        }
     },
     "eslintIgnore": [
         "node_modules",

package/src/index.ts

@@ -7,6 +7,7 @@ import {
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITerminalTracker } from '@jupyterlab/terminal';
+import { IColourfulTabs } from 'jupyterlab_colourful_tab_extension';
 
 import { requestAPI } from './request';
 import { IStatusResponse } from './types';
@@ -25,7 +26,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
     ILayoutRestorer,
     ISettingRegistry,
     ITerminalTracker,
-    IDefaultFileBrowser
+    IDefaultFileBrowser,
+    IColourfulTabs
   ],
   activate: async (
     app: JupyterFrontEnd,
@@ -33,7 +35,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
     restorer: ILayoutRestorer | null,
     settingRegistry: ISettingRegistry | null,
     terminalTracker: ITerminalTracker | null,
-    fileBrowser: IDefaultFileBrowser | null
+    fileBrowser: IDefaultFileBrowser | null,
+    colourfulTabs: IColourfulTabs | null
   ) => {
     const settings = app.serviceManager.serverSettings;
 
@@ -59,7 +62,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       app,
       status.root_dir || '',
       terminalTracker,
-      fileBrowser
+      fileBrowser,
+      colourfulTabs
     );
 
     // Read the sidebar setting before docking so we add the widget to the

package/src/types.ts

@@ -14,6 +14,9 @@ export interface ISession {
   remote_control: boolean;
   favourite: boolean;
   extra_sessions: number;
+  /** Claude session colour from `/color` or auto-assignment (e.g. "blue"), or
+   * null when the session carries none. Drives the terminal tab tint. */
+  color: string | null;
 }
 
 export interface ISessionsListResponse {

package/src/widget.ts

@@ -9,6 +9,7 @@ import {
 import { ServerConnection } from '@jupyterlab/services';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { ITerminalTracker } from '@jupyterlab/terminal';
+import { IColourfulTabs } from 'jupyterlab_colourful_tab_extension';
 import { copyIcon, folderIcon, terminalIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
@@ -54,6 +55,23 @@ export type PresentationMode = 'name' | 'path';
 
 const DEFAULT_PRESENTATION_MODE: PresentationMode = 'name';
 
+// Claude's per-session colour (set by `/color`, or auto-assigned for
+// multi-session use) maps to a jupyterlab_colourful_tab_extension colour id.
+// That extension owns the tab-tint CSS and the setColour API; we only feed it
+// the colour. An absent or unrecognised colour resolves to null (clear tint).
+const CLAUDE_TAB_COLOUR_ID: Record<string, string> = {
+  red: 'rose',
+  orange: 'peach',
+  yellow: 'lemon',
+  green: 'mint',
+  blue: 'sky',
+  purple: 'lavender'
+};
+
+function claudeTabColourId(color: string | null | undefined): string | null {
+  return (color && CLAUDE_TAB_COLOUR_ID[color]) || null;
+}
+
 const SECTION_LABELS: Record<SectionKey, string> = {
   favourites: 'Favorites',
   recent: 'Recent',
@@ -119,7 +137,8 @@ export class ClaudeCodeSessionsWidget extends Widget {
     app: JupyterFrontEnd,
     rootDir: string,
     terminalTracker: ITerminalTracker | null = null,
-    fileBrowser: IDefaultFileBrowser | null = null
+    fileBrowser: IDefaultFileBrowser | null = null,
+    colourfulTabs: IColourfulTabs | null = null
   ) {
     super();
     this._app = app;
@@ -127,6 +146,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
     this._rootDir = rootDir.replace(/\/+$/, '');
     this._terminalTracker = terminalTracker;
     this._fileBrowser = fileBrowser;
+    this._colourfulTabs = colourfulTabs;
 
     this.id = 'jupyterlab-claude-code-extension';
     this.title.icon = claudeIcon;
@@ -408,6 +428,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
     );
     this._sessions = data.sessions ?? [];
     this._render();
+    this._reconcileTerminalColours();
   }
 
   private async _toggleFavourite(session: ISession): Promise<void> {
@@ -762,6 +783,40 @@ export class ClaudeCodeSessionsWidget extends Widget {
     });
   }
 
+  /** Tint a terminal's dock tab with the colour of the Claude session it runs,
+   * delegating to jupyterlab_colourful_tab_extension's `setColour` API so that
+   * extension owns the tab CSS and colour vocabulary. A no-op when the
+   * colourful-tab extension is not installed (the token is optional). An
+   * absent/unknown colour clears the tint. */
+  private _applyTerminalColour(
+    widget: any,
+    color: string | null | undefined
+  ): void {
+    if (!this._colourfulTabs || !widget || widget.isDisposed) {
+      return;
+    }
+    this._colourfulTabs.setColour(widget, claudeTabColourId(color));
+  }
+
+  /** Re-tint every tracked terminal tab from the freshest session colours.
+   * Runs after each fetch (launch refresh + the 30s poll), so a `/color`
+   * change shows on the next tick. Matches on project AND conversation so a
+   * tab only takes the colour of the exact session it runs; a terminal
+   * running a branch other than the project's representative row stays
+   * untinted rather than borrowing a sibling's colour. */
+  private _reconcileTerminalColours(): void {
+    const sessions = this._sessions ?? [];
+    this._terminalsByPath.forEach((entry, projectPath) => {
+      if (!entry.widget || entry.widget.isDisposed) {
+        return;
+      }
+      const match = sessions.find(
+        s => s.project_path === projectPath && s.session_id === entry.sessionId
+      );
+      this._applyTerminalColour(entry.widget, match?.color ?? null);
+    });
+  }
+
   private async _findTerminalForCwd(
     projectPath: string,
     wantedSessionId: string | undefined
@@ -2205,6 +2260,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
   private readonly _removingPaths: Set<string> = new Set();
   private readonly _terminalTracker: ITerminalTracker | null;
   private readonly _fileBrowser: IDefaultFileBrowser | null;
+  private readonly _colourfulTabs: IColourfulTabs | null;
   // Microcache of the most-recent terminal per project, tagged with the
   // conversation it is running so reuse can tell a project's branches apart.
   private readonly _terminalsByPath: Map<