jupyterlab_colourful_tab_extension 1.0.10

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, Stellars Henson
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,57 @@
+# jupyterlab_colourful_tab_extension
+
+[![GitHub Actions](https://github.com/stellarshenson/jupyterlab_colourful_tab_extension/actions/workflows/build.yml/badge.svg)](https://github.com/stellarshenson/jupyterlab_colourful_tab_extension/actions/workflows/build.yml)
+[![npm version](https://img.shields.io/npm/v/jupyterlab_colourful_tab_extension.svg)](https://www.npmjs.com/package/jupyterlab_colourful_tab_extension)
+[![PyPI version](https://img.shields.io/pypi/v/jupyterlab-colourful-tab-extension.svg)](https://pypi.org/project/jupyterlab-colourful-tab-extension/)
+[![Total PyPI downloads](https://static.pepy.tech/badge/jupyterlab-colourful-tab-extension)](https://pepy.tech/project/jupyterlab-colourful-tab-extension)
+[![JupyterLab 4](https://img.shields.io/badge/JupyterLab-4-orange.svg)](https://jupyterlab.readthedocs.io/en/stable/)
+[![Brought To You By KOLOMOLO](https://img.shields.io/badge/Brought%20To%20You%20By-KOLOMOLO-00ffff?style=flat)](https://kolomolo.com)
+[![Donate PayPal](https://img.shields.io/badge/Donate-PayPal-blue?style=flat)](https://www.paypal.com/donate/?hosted_button_id=B4KPBJDLLXTSA)
+
+A JupyterLab extension that applies pastel colours to tabs for visual identification when many tabs are open.
+
+Coloured tabs make it easy to identify different notebooks and files at a glance.
+
+![](.resources/screenshot-tabs.png)
+
+Right-click any tab to select a colour from the "Tab Colour" submenu.
+
+![](.resources/screenshot-menu.png)
+
+## Features
+
+Assign colours to tabs via right-click context menu for easy visual identification when working with multiple notebooks and files.
+
+**Colour options**:
+
+- Red, Orange, Yellow, Green, Blue, Purple
+- Pastel shades optimised for both light and dark themes
+
+**Key features**:
+
+- Right-click any tab to assign a colour from the "Set Tab Colour" submenu
+- Colours persist across browser refreshes via localStorage
+- Notebook toolbar matches the active tab colour
+- Automatic cleanup when tabs are closed
+
+Yes, this is yet another mass-produced JupyterLab extension that does one trivially simple thing. We are almost embarrassed by how utterly unremarkable it is - just some CSS classes and a context menu. But someone had to do it, and here we are. You're welcome.
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Install
+
+To install the extension, execute:
+
+```bash
+pip install jupyterlab_colourful_tab_extension
+```
+
+## Uninstall
+
+To remove the extension, execute:
+
+```bash
+pip uninstall jupyterlab_colourful_tab_extension
+```

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+/**
+ * Initialization data for the jupyterlab_colourful_tab_extension extension.
+ */
+declare const plugin: JupyterFrontEndPlugin<void>;
+export default plugin;

package/lib/index.js

@@ -0,0 +1,319 @@
+import { ITerminalTracker } from '@jupyterlab/terminal';
+/**
+ * Colour definitions - CSS classes are defined in style/base.css
+ * CSS variables handle light/dark theme switching automatically
+ */
+const COLOURS = [
+    { name: 'Red', id: 'rose', cssClass: 'jp-colourful-tab-rose' },
+    { name: 'Orange', id: 'peach', cssClass: 'jp-colourful-tab-peach' },
+    { name: 'Yellow', id: 'lemon', cssClass: 'jp-colourful-tab-lemon' },
+    { name: 'Green', id: 'mint', cssClass: 'jp-colourful-tab-mint' },
+    { name: 'Blue', id: 'sky', cssClass: 'jp-colourful-tab-sky' },
+    { name: 'Purple', id: 'lavender', cssClass: 'jp-colourful-tab-lavender' }
+];
+/**
+ * LocalStorage key for persisting tab colours
+ */
+const STORAGE_KEY = 'jupyterlab-colourful-tab-colours';
+/**
+ * Storage for tab colours (persists across refreshes via localStorage)
+ * Maps widget ID to colour index
+ */
+const tabColours = new Map();
+/**
+ * Load tab colours from localStorage
+ */
+function loadTabColours() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+            const data = JSON.parse(stored);
+            Object.entries(data).forEach(([widgetId, colourIndex]) => {
+                tabColours.set(widgetId, colourIndex);
+            });
+        }
+    }
+    catch (e) {
+        console.warn('Colourful Tab: Failed to load colours from storage', e);
+    }
+}
+/**
+ * Save tab colours to localStorage
+ */
+function saveTabColours() {
+    try {
+        const data = {};
+        tabColours.forEach((colourIndex, widgetId) => {
+            data[widgetId] = colourIndex;
+        });
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+    }
+    catch (e) {
+        console.warn('Colourful Tab: Failed to save colours to storage', e);
+    }
+}
+/**
+ * Currently right-clicked tab element (set by contextmenu event)
+ */
+let currentTabElement = null;
+/**
+ * Reference to terminal tracker for getting session names
+ */
+let terminalTracker = null;
+/**
+ * Build a map from widget ID to terminal session name
+ */
+function getTerminalSessionMap() {
+    const widgetToSession = new Map();
+    if (terminalTracker) {
+        terminalTracker.forEach(widget => {
+            var _a, _b;
+            const session = (_a = widget.content) === null || _a === void 0 ? void 0 : _a.session;
+            if ((_b = session === null || session === void 0 ? void 0 : session.model) === null || _b === void 0 ? void 0 : _b.name) {
+                widgetToSession.set(widget.id, `terminal:${session.model.name}`);
+            }
+        });
+    }
+    return widgetToSession;
+}
+/**
+ * Apply colour class to a tab element
+ */
+function applyTabColour(tabElement, colourIndex) {
+    // Remove all existing colour classes
+    COLOURS.forEach(c => tabElement.classList.remove(c.cssClass));
+    // Apply new colour class
+    if (colourIndex >= 0 && colourIndex < COLOURS.length) {
+        tabElement.classList.add(COLOURS[colourIndex].cssClass);
+    }
+}
+/**
+ * Clear colour from a tab element
+ */
+function clearTabColour(tabElement) {
+    COLOURS.forEach(c => tabElement.classList.remove(c.cssClass));
+}
+/**
+ * Get stable identifier for a tab.
+ * - For files: extract Path from title attribute
+ * - For terminals: use terminal session name (e.g., "terminal:1")
+ */
+function getStableTabId(tabElement) {
+    const title = tabElement.getAttribute('title');
+    const widgetId = tabElement.dataset.id;
+    // For files: title contains "Path: /path/to/file.ipynb"
+    if (title && title.includes('Path:')) {
+        const pathMatch = title.match(/Path:\s*(.+?)(?:\n|$)/);
+        if (pathMatch && pathMatch[1]) {
+            return pathMatch[1].trim();
+        }
+    }
+    // For terminals: use session name which persists across browser refresh
+    if (widgetId) {
+        const terminalMap = getTerminalSessionMap();
+        const sessionId = terminalMap.get(widgetId);
+        if (sessionId) {
+            return sessionId;
+        }
+        // Fallback to widget ID for non-terminal widgets
+        return widgetId;
+    }
+    return null;
+}
+/**
+ * Find all current tabs with their stable identifiers
+ */
+function getAllTabsByStableId() {
+    const idToTab = new Map();
+    const tabs = document.querySelectorAll('#jp-main-dock-panel .lm-TabBar-tab');
+    tabs.forEach(tab => {
+        const tabElement = tab;
+        const stableId = getStableTabId(tabElement);
+        if (stableId) {
+            idToTab.set(stableId, tabElement);
+        }
+    });
+    return idToTab;
+}
+/**
+ * Clean up colours for tabs that no longer exist
+ */
+function cleanupStaleColours() {
+    const currentTabs = getAllTabsByStableId();
+    const staleIds = [];
+    tabColours.forEach((_, storedId) => {
+        if (!currentTabs.has(storedId)) {
+            staleIds.push(storedId);
+        }
+    });
+    if (staleIds.length > 0) {
+        staleIds.forEach(id => tabColours.delete(id));
+        saveTabColours();
+    }
+}
+/**
+ * Refresh all tab colours (useful after DOM changes)
+ */
+function refreshAllTabColours() {
+    const currentTabs = getAllTabsByStableId();
+    tabColours.forEach((colourIndex, storedId) => {
+        const tabElement = currentTabs.get(storedId);
+        if (tabElement &&
+            !tabElement.classList.contains(COLOURS[colourIndex].cssClass)) {
+            applyTabColour(tabElement, colourIndex);
+        }
+    });
+    // Clean up colours for closed tabs
+    cleanupStaleColours();
+}
+/**
+ * Debounce timer for refresh
+ */
+let refreshTimer = null;
+/**
+ * Debounced refresh to avoid excessive DOM operations
+ */
+function debouncedRefresh() {
+    if (refreshTimer) {
+        clearTimeout(refreshTimer);
+    }
+    refreshTimer = setTimeout(() => {
+        refreshAllTabColours();
+        applyToolbarColour();
+        refreshTimer = null;
+    }, 50);
+}
+/**
+ * Apply colour to the active notebook's toolbar based on its tab colour
+ */
+function applyToolbarColour() {
+    // Find the currently active tab
+    const activeTab = document.querySelector('#jp-main-dock-panel .lm-TabBar-tab.lm-mod-current');
+    if (!activeTab) {
+        return;
+    }
+    // Get the stable ID for this tab
+    const stableId = getStableTabId(activeTab);
+    if (!stableId) {
+        return;
+    }
+    // Get the colour index for this tab
+    const colourIndex = tabColours.get(stableId);
+    // Find all toolbars and clear their colours first
+    const toolbars = document.querySelectorAll('jp-toolbar');
+    toolbars.forEach(toolbar => {
+        COLOURS.forEach(c => toolbar.classList.remove(c.cssClass));
+    });
+    // If the active tab has a colour, apply it to the active panel's toolbar
+    if (colourIndex !== undefined &&
+        colourIndex >= 0 &&
+        colourIndex < COLOURS.length) {
+        // Find the active panel's toolbar - it's in the currently visible notebook panel
+        const activePanel = document.querySelector('#jp-main-dock-panel .lm-DockPanel-widget:not(.lm-mod-hidden) jp-toolbar');
+        if (activePanel) {
+            activePanel.classList.add(COLOURS[colourIndex].cssClass);
+        }
+    }
+}
+/**
+ * Initialization data for the jupyterlab_colourful_tab_extension extension.
+ */
+const plugin = {
+    id: 'jupyterlab_colourful_tab_extension:plugin',
+    description: 'JupyterLab extension that makes tabs coloured using pastel colours to help identify them when many are open',
+    autoStart: true,
+    optional: [ITerminalTracker],
+    activate: (app, tracker) => {
+        console.log('JupyterLab extension jupyterlab_colourful_tab_extension is activated!');
+        // Store terminal tracker reference for session name lookups
+        terminalTracker = tracker;
+        // Load persisted colours from localStorage
+        loadTabColours();
+        const { commands } = app;
+        // Track right-clicked tab using capture phase to get it before menu opens
+        document.addEventListener('contextmenu', (event) => {
+            const target = event.target;
+            // Only capture tabs within the main dock panel tab bar
+            const tabElement = target.closest('#jp-main-dock-panel .lm-DockPanel-tabBar .lm-TabBar-tab');
+            if (tabElement && tabElement.classList.contains('lm-TabBar-tab')) {
+                currentTabElement = tabElement;
+            }
+        }, true // Use capture phase
+        );
+        // Register colour commands
+        COLOURS.forEach((colour, index) => {
+            commands.addCommand(`colourful-tab:set-${colour.id}`, {
+                label: colour.name,
+                caption: `Set tab colour to ${colour.name}`,
+                execute: () => {
+                    // Verify we have a valid tab element
+                    if (currentTabElement &&
+                        currentTabElement.classList.contains('lm-TabBar-tab')) {
+                        const stableId = getStableTabId(currentTabElement);
+                        if (stableId) {
+                            tabColours.set(stableId, index);
+                            saveTabColours();
+                            applyTabColour(currentTabElement, index);
+                            applyToolbarColour();
+                        }
+                    }
+                }
+            });
+        });
+        // Register clear command
+        commands.addCommand('colourful-tab:clear', {
+            label: 'Clear',
+            caption: 'Remove tab colour',
+            execute: () => {
+                // Verify we have a valid tab element
+                if (currentTabElement &&
+                    currentTabElement.classList.contains('lm-TabBar-tab')) {
+                    const stableId = getStableTabId(currentTabElement);
+                    if (stableId) {
+                        clearTabColour(currentTabElement);
+                        tabColours.delete(stableId);
+                        saveTabColours();
+                        applyToolbarColour();
+                    }
+                }
+            }
+        });
+        // Watch for DOM changes to reapply colours (e.g., when tabs are reordered or classes reset)
+        app.restored.then(() => {
+            const observer = new MutationObserver(mutations => {
+                // Check if any mutation affects tab elements
+                const affectsTabs = mutations.some(mutation => {
+                    // Check for class attribute changes on tabs
+                    if (mutation.type === 'attributes' &&
+                        mutation.attributeName === 'class') {
+                        const target = mutation.target;
+                        return target.classList.contains('lm-TabBar-tab');
+                    }
+                    // Check for child list changes in tab bars
+                    if (mutation.type === 'childList') {
+                        const target = mutation.target;
+                        return (target.classList.contains('lm-TabBar-content') ||
+                            target.closest('.lm-TabBar') !== null);
+                    }
+                    return false;
+                });
+                if (affectsTabs) {
+                    debouncedRefresh();
+                }
+            });
+            const dockPanel = document.getElementById('jp-main-dock-panel');
+            if (dockPanel) {
+                observer.observe(dockPanel, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['class']
+                });
+                // Initial application of colours
+                refreshAllTabColours();
+                applyToolbarColour();
+            }
+        });
+    }
+};
+export default plugin;

package/package.json

@@ -0,0 +1,197 @@
+{
+    "name": "jupyterlab_colourful_tab_extension",
+    "version": "1.0.10",
+    "description": "Jupyterlab extension that makes the tabs coloured (using pastel colours) to help you find tab when many of them are opened. Colour persists between refreshes",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/stellarshenson/jupyterlab_colourful_tab_extension",
+    "bugs": {
+        "url": "https://github.com/stellarshenson/jupyterlab_colourful_tab_extension/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Stellars Henson",
+        "email": "konrad.jelen@gmail.com"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/stellarshenson/jupyterlab_colourful_tab_extension.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
+        "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:labextension": "jupyter labextension build .",
+        "build:labextension:dev": "jupyter labextension build --development True .",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:labextension": "rimraf jupyterlab_colourful_tab_extension/labextension jupyterlab_colourful_tab_extension/_version.py",
+        "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "install:extension": "jlpm build",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage",
+        "watch": "run-p watch:src watch:labextension",
+        "watch:src": "tsc -w --sourceMap",
+        "watch:labextension": "jupyter labextension watch ."
+    },
+    "dependencies": {
+        "@jupyterlab/application": "^4.0.0",
+        "@jupyterlab/terminal": "^4.0.0",
+        "@lumino/widgets": "^2.0.0"
+    },
+    "devDependencies": {
+        "@jupyterlab/builder": "^4.0.0",
+        "@jupyterlab/testutils": "^4.0.0",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "mkdirp": "^1.0.3",
+        "npm-run-all2": "^7.0.1",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.5.4"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyterlab_colourful_tab_extension/labextension",
+        "schemaDir": "schema"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/__tests__/jupyterlab_colourful_tab_extension.spec.ts

@@ -0,0 +1,29 @@
+/**
+ * Unit tests for jupyterlab_colourful_tab_extension
+ */
+
+describe('jupyterlab_colourful_tab_extension', () => {
+  it('should define light theme colours', () => {
+    const lightColours = [
+      { name: 'Rose', colour: '#ffd6e0' },
+      { name: 'Peach', colour: '#ffe5cc' },
+      { name: 'Lemon', colour: '#fff9c4' },
+      { name: 'Mint', colour: '#c8f7c5' },
+      { name: 'Sky', colour: '#c5e8f7' },
+      { name: 'Lavender', colour: '#e5d6f7' }
+    ];
+    expect(lightColours.length).toEqual(6);
+  });
+
+  it('should define dark theme colours', () => {
+    const darkColours = [
+      { name: 'Rose', colour: '#5c3a42' },
+      { name: 'Peach', colour: '#5c4a3a' },
+      { name: 'Lemon', colour: '#5c5a3a' },
+      { name: 'Mint', colour: '#3a5c3f' },
+      { name: 'Sky', colour: '#3a4a5c' },
+      { name: 'Lavender', colour: '#4a3a5c' }
+    ];
+    expect(darkColours.length).toEqual(6);
+  });
+});

package/src/index.ts

@@ -0,0 +1,385 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { ITerminalTracker } from '@jupyterlab/terminal';
+
+/**
+ * Colour definitions - CSS classes are defined in style/base.css
+ * CSS variables handle light/dark theme switching automatically
+ */
+const COLOURS = [
+  { name: 'Red', id: 'rose', cssClass: 'jp-colourful-tab-rose' },
+  { name: 'Orange', id: 'peach', cssClass: 'jp-colourful-tab-peach' },
+  { name: 'Yellow', id: 'lemon', cssClass: 'jp-colourful-tab-lemon' },
+  { name: 'Green', id: 'mint', cssClass: 'jp-colourful-tab-mint' },
+  { name: 'Blue', id: 'sky', cssClass: 'jp-colourful-tab-sky' },
+  { name: 'Purple', id: 'lavender', cssClass: 'jp-colourful-tab-lavender' }
+];
+
+/**
+ * LocalStorage key for persisting tab colours
+ */
+const STORAGE_KEY = 'jupyterlab-colourful-tab-colours';
+
+/**
+ * Storage for tab colours (persists across refreshes via localStorage)
+ * Maps widget ID to colour index
+ */
+const tabColours: Map<string, number> = new Map();
+
+/**
+ * Load tab colours from localStorage
+ */
+function loadTabColours(): void {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const data = JSON.parse(stored) as Record<string, number>;
+      Object.entries(data).forEach(([widgetId, colourIndex]) => {
+        tabColours.set(widgetId, colourIndex);
+      });
+    }
+  } catch (e) {
+    console.warn('Colourful Tab: Failed to load colours from storage', e);
+  }
+}
+
+/**
+ * Save tab colours to localStorage
+ */
+function saveTabColours(): void {
+  try {
+    const data: Record<string, number> = {};
+    tabColours.forEach((colourIndex, widgetId) => {
+      data[widgetId] = colourIndex;
+    });
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  } catch (e) {
+    console.warn('Colourful Tab: Failed to save colours to storage', e);
+  }
+}
+
+/**
+ * Currently right-clicked tab element (set by contextmenu event)
+ */
+let currentTabElement: HTMLElement | null = null;
+
+/**
+ * Reference to terminal tracker for getting session names
+ */
+let terminalTracker: ITerminalTracker | null = null;
+
+/**
+ * Build a map from widget ID to terminal session name
+ */
+function getTerminalSessionMap(): Map<string, string> {
+  const widgetToSession = new Map<string, string>();
+  if (terminalTracker) {
+    terminalTracker.forEach(widget => {
+      const session = widget.content?.session;
+      if (session?.model?.name) {
+        widgetToSession.set(widget.id, `terminal:${session.model.name}`);
+      }
+    });
+  }
+  return widgetToSession;
+}
+
+/**
+ * Apply colour class to a tab element
+ */
+function applyTabColour(tabElement: HTMLElement, colourIndex: number): void {
+  // Remove all existing colour classes
+  COLOURS.forEach(c => tabElement.classList.remove(c.cssClass));
+
+  // Apply new colour class
+  if (colourIndex >= 0 && colourIndex < COLOURS.length) {
+    tabElement.classList.add(COLOURS[colourIndex].cssClass);
+  }
+}
+
+/**
+ * Clear colour from a tab element
+ */
+function clearTabColour(tabElement: HTMLElement): void {
+  COLOURS.forEach(c => tabElement.classList.remove(c.cssClass));
+}
+
+/**
+ * Get stable identifier for a tab.
+ * - For files: extract Path from title attribute
+ * - For terminals: use terminal session name (e.g., "terminal:1")
+ */
+function getStableTabId(tabElement: HTMLElement): string | null {
+  const title = tabElement.getAttribute('title');
+  const widgetId = tabElement.dataset.id;
+
+  // For files: title contains "Path: /path/to/file.ipynb"
+  if (title && title.includes('Path:')) {
+    const pathMatch = title.match(/Path:\s*(.+?)(?:\n|$)/);
+    if (pathMatch && pathMatch[1]) {
+      return pathMatch[1].trim();
+    }
+  }
+
+  // For terminals: use session name which persists across browser refresh
+  if (widgetId) {
+    const terminalMap = getTerminalSessionMap();
+    const sessionId = terminalMap.get(widgetId);
+    if (sessionId) {
+      return sessionId;
+    }
+    // Fallback to widget ID for non-terminal widgets
+    return widgetId;
+  }
+
+  return null;
+}
+
+/**
+ * Find all current tabs with their stable identifiers
+ */
+function getAllTabsByStableId(): Map<string, HTMLElement> {
+  const idToTab = new Map<string, HTMLElement>();
+  const tabs = document.querySelectorAll('#jp-main-dock-panel .lm-TabBar-tab');
+  tabs.forEach(tab => {
+    const tabElement = tab as HTMLElement;
+    const stableId = getStableTabId(tabElement);
+    if (stableId) {
+      idToTab.set(stableId, tabElement);
+    }
+  });
+  return idToTab;
+}
+
+/**
+ * Clean up colours for tabs that no longer exist
+ */
+function cleanupStaleColours(): void {
+  const currentTabs = getAllTabsByStableId();
+  const staleIds: string[] = [];
+
+  tabColours.forEach((_, storedId) => {
+    if (!currentTabs.has(storedId)) {
+      staleIds.push(storedId);
+    }
+  });
+
+  if (staleIds.length > 0) {
+    staleIds.forEach(id => tabColours.delete(id));
+    saveTabColours();
+  }
+}
+
+/**
+ * Refresh all tab colours (useful after DOM changes)
+ */
+function refreshAllTabColours(): void {
+  const currentTabs = getAllTabsByStableId();
+
+  tabColours.forEach((colourIndex, storedId) => {
+    const tabElement = currentTabs.get(storedId);
+    if (
+      tabElement &&
+      !tabElement.classList.contains(COLOURS[colourIndex].cssClass)
+    ) {
+      applyTabColour(tabElement, colourIndex);
+    }
+  });
+
+  // Clean up colours for closed tabs
+  cleanupStaleColours();
+}
+
+/**
+ * Debounce timer for refresh
+ */
+let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+
+/**
+ * Debounced refresh to avoid excessive DOM operations
+ */
+function debouncedRefresh(): void {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+  }
+  refreshTimer = setTimeout(() => {
+    refreshAllTabColours();
+    applyToolbarColour();
+    refreshTimer = null;
+  }, 50);
+}
+
+/**
+ * Apply colour to the active notebook's toolbar based on its tab colour
+ */
+function applyToolbarColour(): void {
+  // Find the currently active tab
+  const activeTab = document.querySelector(
+    '#jp-main-dock-panel .lm-TabBar-tab.lm-mod-current'
+  ) as HTMLElement;
+  if (!activeTab) {
+    return;
+  }
+
+  // Get the stable ID for this tab
+  const stableId = getStableTabId(activeTab);
+  if (!stableId) {
+    return;
+  }
+
+  // Get the colour index for this tab
+  const colourIndex = tabColours.get(stableId);
+
+  // Find all toolbars and clear their colours first
+  const toolbars = document.querySelectorAll('jp-toolbar');
+  toolbars.forEach(toolbar => {
+    COLOURS.forEach(c => toolbar.classList.remove(c.cssClass));
+  });
+
+  // If the active tab has a colour, apply it to the active panel's toolbar
+  if (
+    colourIndex !== undefined &&
+    colourIndex >= 0 &&
+    colourIndex < COLOURS.length
+  ) {
+    // Find the active panel's toolbar - it's in the currently visible notebook panel
+    const activePanel = document.querySelector(
+      '#jp-main-dock-panel .lm-DockPanel-widget:not(.lm-mod-hidden) jp-toolbar'
+    );
+    if (activePanel) {
+      activePanel.classList.add(COLOURS[colourIndex].cssClass);
+    }
+  }
+}
+
+/**
+ * Initialization data for the jupyterlab_colourful_tab_extension extension.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab_colourful_tab_extension:plugin',
+  description:
+    'JupyterLab extension that makes tabs coloured using pastel colours to help identify them when many are open',
+  autoStart: true,
+  optional: [ITerminalTracker],
+  activate: (app: JupyterFrontEnd, tracker: ITerminalTracker | null) => {
+    console.log(
+      'JupyterLab extension jupyterlab_colourful_tab_extension is activated!'
+    );
+
+    // Store terminal tracker reference for session name lookups
+    terminalTracker = tracker;
+
+    // Load persisted colours from localStorage
+    loadTabColours();
+
+    const { commands } = app;
+
+    // Track right-clicked tab using capture phase to get it before menu opens
+    document.addEventListener(
+      'contextmenu',
+      (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Only capture tabs within the main dock panel tab bar
+        const tabElement = target.closest(
+          '#jp-main-dock-panel .lm-DockPanel-tabBar .lm-TabBar-tab'
+        ) as HTMLElement;
+        if (tabElement && tabElement.classList.contains('lm-TabBar-tab')) {
+          currentTabElement = tabElement;
+        }
+      },
+      true // Use capture phase
+    );
+
+    // Register colour commands
+    COLOURS.forEach((colour, index) => {
+      commands.addCommand(`colourful-tab:set-${colour.id}`, {
+        label: colour.name,
+        caption: `Set tab colour to ${colour.name}`,
+        execute: () => {
+          // Verify we have a valid tab element
+          if (
+            currentTabElement &&
+            currentTabElement.classList.contains('lm-TabBar-tab')
+          ) {
+            const stableId = getStableTabId(currentTabElement);
+            if (stableId) {
+              tabColours.set(stableId, index);
+              saveTabColours();
+              applyTabColour(currentTabElement, index);
+              applyToolbarColour();
+            }
+          }
+        }
+      });
+    });
+
+    // Register clear command
+    commands.addCommand('colourful-tab:clear', {
+      label: 'Clear',
+      caption: 'Remove tab colour',
+      execute: () => {
+        // Verify we have a valid tab element
+        if (
+          currentTabElement &&
+          currentTabElement.classList.contains('lm-TabBar-tab')
+        ) {
+          const stableId = getStableTabId(currentTabElement);
+          if (stableId) {
+            clearTabColour(currentTabElement);
+            tabColours.delete(stableId);
+            saveTabColours();
+            applyToolbarColour();
+          }
+        }
+      }
+    });
+
+    // Watch for DOM changes to reapply colours (e.g., when tabs are reordered or classes reset)
+    app.restored.then(() => {
+      const observer = new MutationObserver(mutations => {
+        // Check if any mutation affects tab elements
+        const affectsTabs = mutations.some(mutation => {
+          // Check for class attribute changes on tabs
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'class'
+          ) {
+            const target = mutation.target as HTMLElement;
+            return target.classList.contains('lm-TabBar-tab');
+          }
+          // Check for child list changes in tab bars
+          if (mutation.type === 'childList') {
+            const target = mutation.target as HTMLElement;
+            return (
+              target.classList.contains('lm-TabBar-content') ||
+              target.closest('.lm-TabBar') !== null
+            );
+          }
+          return false;
+        });
+
+        if (affectsTabs) {
+          debouncedRefresh();
+        }
+      });
+
+      const dockPanel = document.getElementById('jp-main-dock-panel');
+      if (dockPanel) {
+        observer.observe(dockPanel, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['class']
+        });
+
+        // Initial application of colours
+        refreshAllTabColours();
+        applyToolbarColour();
+      }
+    });
+  }
+};
+
+export default plugin;

package/style/.ipynb_checkpoints/base-checkpoint.css

@@ -0,0 +1,45 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+/* Colour selection menu */
+.jp-colourful-tab-menu {
+  position: fixed;
+  z-index: 10000;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  min-width: 140px;
+  padding: 4px 0;
+}
+
+.jp-colourful-tab-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-colourful-tab-menu-item:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-colourful-tab-swatch {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  margin-right: 8px;
+  border: 1px solid var(--jp-border-color2);
+}
+
+.jp-colourful-tab-menu-clear {
+  border-top: 1px solid var(--jp-border-color1);
+  margin-top: 4px;
+  padding-top: 8px;
+  color: var(--jp-ui-font-color2);
+}

package/style/.ipynb_checkpoints/index-checkpoint.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/.ipynb_checkpoints/index-checkpoint.js

@@ -0,0 +1 @@
+import './base.css';

package/style/base.css

@@ -0,0 +1,145 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+/* Light theme pastel colours */
+:root {
+  --jp-colourful-tab-rose: #ffd6e0;
+  --jp-colourful-tab-peach: #ffe5cc;
+  --jp-colourful-tab-lemon: #fff9c4;
+  --jp-colourful-tab-mint: #c8f7c5;
+  --jp-colourful-tab-sky: #a8d4f0;
+  --jp-colourful-tab-lavender: #e5d6f7;
+}
+
+/* Dark theme muted colours */
+[data-jp-theme-light='false'] {
+  --jp-colourful-tab-rose: #5a3840;
+  --jp-colourful-tab-peach: #5a4a3a;
+  --jp-colourful-tab-lemon: #5a563a;
+  --jp-colourful-tab-mint: #3a5a3f;
+  --jp-colourful-tab-sky: #2e4258;
+  --jp-colourful-tab-lavender: #4a3a5a;
+}
+
+/* Colour selection menu */
+.jp-colourful-tab-menu {
+  position: fixed;
+  z-index: 10000;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+  min-width: 140px;
+  padding: 4px 0;
+}
+
+.jp-colourful-tab-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-colourful-tab-menu-item:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-colourful-tab-swatch {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  margin-right: 8px;
+  border: 1px solid var(--jp-border-color2);
+}
+
+/* Swatch colours */
+.jp-colourful-tab-swatch-rose {
+  background-color: var(--jp-colourful-tab-rose);
+}
+
+.jp-colourful-tab-swatch-peach {
+  background-color: var(--jp-colourful-tab-peach);
+}
+
+.jp-colourful-tab-swatch-lemon {
+  background-color: var(--jp-colourful-tab-lemon);
+}
+
+.jp-colourful-tab-swatch-mint {
+  background-color: var(--jp-colourful-tab-mint);
+}
+
+.jp-colourful-tab-swatch-sky {
+  background-color: var(--jp-colourful-tab-sky);
+}
+
+.jp-colourful-tab-swatch-lavender {
+  background-color: var(--jp-colourful-tab-lavender);
+}
+
+/* Tab colours - apply to tab, inner elements, and shadow DOM parts */
+.jp-colourful-tab-rose,
+.jp-colourful-tab-rose * {
+  background-color: var(--jp-colourful-tab-rose) !important;
+}
+
+.jp-colourful-tab-rose::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-rose) !important;
+}
+
+.jp-colourful-tab-peach,
+.jp-colourful-tab-peach * {
+  background-color: var(--jp-colourful-tab-peach) !important;
+}
+
+.jp-colourful-tab-peach::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-peach) !important;
+}
+
+.jp-colourful-tab-lemon,
+.jp-colourful-tab-lemon * {
+  background-color: var(--jp-colourful-tab-lemon) !important;
+}
+
+.jp-colourful-tab-lemon::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-lemon) !important;
+}
+
+.jp-colourful-tab-mint,
+.jp-colourful-tab-mint * {
+  background-color: var(--jp-colourful-tab-mint) !important;
+}
+
+.jp-colourful-tab-mint::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-mint) !important;
+}
+
+.jp-colourful-tab-sky,
+.jp-colourful-tab-sky * {
+  background-color: var(--jp-colourful-tab-sky) !important;
+}
+
+.jp-colourful-tab-sky::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-sky) !important;
+}
+
+.jp-colourful-tab-lavender,
+.jp-colourful-tab-lavender * {
+  background-color: var(--jp-colourful-tab-lavender) !important;
+}
+
+.jp-colourful-tab-lavender::part(positioning-region) {
+  background-color: var(--jp-colourful-tab-lavender) !important;
+}
+
+.jp-colourful-tab-menu-clear {
+  border-top: 1px solid var(--jp-border-color1);
+  margin-top: 4px;
+  padding-top: 8px;
+  color: var(--jp-ui-font-color2);
+}

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/index.js

@@ -0,0 +1 @@
+import './base.css';