jupyterlab_show_commands_reference_extension 1.0.4

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, 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,44 @@
+# jupyterlab_show_commands_reference_extension
+
+[![GitHub Actions](https://github.com/stellarshenson/jupyterlab_show_commands_reference_extension/actions/workflows/build.yml/badge.svg)](https://github.com/stellarshenson/jupyterlab_show_commands_reference_extension/actions/workflows/build.yml)
+[![npm version](https://img.shields.io/npm/v/jupyterlab_show_commands_reference_extension.svg)](https://www.npmjs.com/package/jupyterlab_show_commands_reference_extension)
+[![PyPI version](https://img.shields.io/pypi/v/jupyterlab-show-commands-reference-extension.svg)](https://pypi.org/project/jupyterlab-show-commands-reference-extension/)
+[![Total PyPI downloads](https://static.pepy.tech/badge/jupyterlab-show-commands-reference-extension)](https://pepy.tech/project/jupyterlab-show-commands-reference-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)
+
+Display all available JupyterLab commands with their full reference IDs and arguments in a dedicated tab. A reference help page for developers working with JupyterLab commands.
+
+![Command Palette](.resources/screenshot-command.png)
+
+![Commands Reference Panel](.resources/screenshot-commands-reference.png)
+
+## Features
+
+- **Command reference tab** - Opens a new tab listing all registered JupyterLab commands
+- **Full command IDs** - Shows complete command identifiers (e.g., `iframe:open`, `filebrowser:copy`)
+- **Argument inspection** - Displays command arguments extracted from the application in realtime
+- **Searchable list** - Filter commands by name or description
+
+## Requirements
+
+- JupyterLab >= 4.0.0
+
+## Installation
+
+```bash
+make install
+```
+
+Or via pip:
+
+```bash
+pip install jupyterlab_show_commands_reference_extension
+```
+
+## Uninstall
+
+```bash
+pip uninstall jupyterlab_show_commands_reference_extension
+```

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,56 @@
+import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
+import { CommandsReferenceWidget } from './widget';
+/**
+ * Command IDs for the extension
+ */
+var CommandIDs;
+(function (CommandIDs) {
+    CommandIDs.open = 'jupyterlab-commands-reference:open';
+})(CommandIDs || (CommandIDs = {}));
+/**
+ * Track the widget instance to prevent duplicates
+ */
+let widget = null;
+/**
+ * Initialization data for the jupyterlab_show_commands_reference_extension extension.
+ */
+const plugin = {
+    id: 'jupyterlab_show_commands_reference_extension:plugin',
+    description: 'Display all available JupyterLab commands with their full reference IDs and arguments in a dedicated tab',
+    autoStart: true,
+    requires: [ICommandPalette],
+    activate: (app, palette) => {
+        console.log('JupyterLab extension jupyterlab_show_commands_reference_extension is activated!');
+        // Register the command
+        app.commands.addCommand(CommandIDs.open, {
+            label: 'Show Commands Reference',
+            caption: 'Display all available JupyterLab commands with their IDs and arguments',
+            execute: () => {
+                // Create widget if it doesn't exist or was disposed
+                if (!widget || widget.isDisposed) {
+                    const content = new CommandsReferenceWidget(app.commands);
+                    widget = new MainAreaWidget({ content });
+                    widget.id = 'jp-commands-reference';
+                    widget.title.label = 'Commands Reference';
+                    widget.title.closable = true;
+                    // Clear reference when widget is disposed
+                    widget.disposed.connect(() => {
+                        widget = null;
+                    });
+                }
+                // Add to main area if not already attached
+                if (!widget.isAttached) {
+                    app.shell.add(widget, 'main');
+                }
+                // Activate the widget
+                app.shell.activateById(widget.id);
+            }
+        });
+        // Add command to palette under Help category
+        palette.addItem({
+            command: CommandIDs.open,
+            category: 'Help'
+        });
+    }
+};
+export default plugin;

package/lib/widget.d.ts

@@ -0,0 +1,55 @@
+import { Widget } from '@lumino/widgets';
+import { CommandRegistry } from '@lumino/commands';
+/**
+ * A widget that displays all registered JupyterLab commands
+ */
+export declare class CommandsReferenceWidget extends Widget {
+    private _commands;
+    private _searchInput;
+    private _countSpan;
+    private _tbody;
+    private _commandsCache;
+    private _argsCache;
+    constructor(commands: CommandRegistry);
+    /**
+     * Build the header with search input and count
+     */
+    private _buildHeader;
+    /**
+     * Build the content area with commands table
+     */
+    private _buildContent;
+    /**
+     * Load all commands from the registry
+     */
+    private _loadCommands;
+    /**
+     * Load command arguments asynchronously
+     */
+    private _loadArguments;
+    /**
+     * Format arguments object as readable string
+     * Handles JSON Schema format: { type: "object", properties: { argName: { type: "string" } } }
+     */
+    private _formatArgs;
+    /**
+     * Update a specific args cell in the table
+     */
+    private _updateArgsCell;
+    /**
+     * Render the commands table
+     */
+    private _renderTable;
+    /**
+     * Filter commands based on search input
+     */
+    private _filterCommands;
+    /**
+     * Update the command count display
+     */
+    private _updateCount;
+    /**
+     * Refresh the commands list
+     */
+    refresh(): void;
+}

package/lib/widget.js

@@ -0,0 +1,254 @@
+import { Widget } from '@lumino/widgets';
+/**
+ * A widget that displays all registered JupyterLab commands
+ */
+export class CommandsReferenceWidget extends Widget {
+    constructor(commands) {
+        super();
+        this._commandsCache = [];
+        this._argsCache = new Map();
+        this._commands = commands;
+        this.addClass('jp-CommandsReferenceWidget');
+        // Build DOM structure
+        this._buildHeader();
+        this._buildContent();
+        // Initial load
+        void this._loadCommands();
+    }
+    /**
+     * Build the header with search input and count
+     */
+    _buildHeader() {
+        const header = document.createElement('div');
+        header.className = 'jp-CommandsReferenceWidget-header';
+        // Search input
+        this._searchInput = document.createElement('input');
+        this._searchInput.type = 'text';
+        this._searchInput.placeholder = 'Filter commands...';
+        this._searchInput.className = 'jp-CommandsReferenceWidget-search';
+        this._searchInput.addEventListener('input', () => {
+            this._filterCommands();
+        });
+        header.appendChild(this._searchInput);
+        // Command count
+        this._countSpan = document.createElement('span');
+        this._countSpan.className = 'jp-CommandsReferenceWidget-count';
+        header.appendChild(this._countSpan);
+        this.node.appendChild(header);
+    }
+    /**
+     * Build the content area with commands table
+     */
+    _buildContent() {
+        const content = document.createElement('div');
+        content.className = 'jp-CommandsReferenceWidget-content';
+        const table = document.createElement('table');
+        table.className = 'jp-CommandsReferenceWidget-table';
+        // Table header
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+        const headers = ['Command ID', 'Label', 'Description', 'Arguments'];
+        for (const headerText of headers) {
+            const th = document.createElement('th');
+            th.textContent = headerText;
+            headerRow.appendChild(th);
+        }
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+        // Table body
+        this._tbody = document.createElement('tbody');
+        table.appendChild(this._tbody);
+        content.appendChild(table);
+        this.node.appendChild(content);
+    }
+    /**
+     * Load all commands from the registry
+     */
+    async _loadCommands() {
+        try {
+            const commandIds = this._commands.listCommands();
+            console.log(`Commands Reference: Found ${commandIds.length} commands`);
+            this._commandsCache = [];
+            for (const id of commandIds) {
+                let label = '';
+                let caption = '';
+                // Some commands have label/caption functions that may fail without args
+                try {
+                    label = this._commands.label(id) || '';
+                }
+                catch (_a) {
+                    label = '';
+                }
+                try {
+                    caption = this._commands.caption(id) || '';
+                }
+                catch (_b) {
+                    caption = '';
+                }
+                const info = {
+                    id,
+                    label,
+                    caption,
+                    args: null
+                };
+                this._commandsCache.push(info);
+            }
+            // Sort by command ID
+            this._commandsCache.sort((a, b) => a.id.localeCompare(b.id));
+            // Render initial table
+            this._renderTable(this._commandsCache);
+            // Load arguments asynchronously
+            void this._loadArguments();
+        }
+        catch (error) {
+            console.error('Commands Reference: Error loading commands', error);
+        }
+    }
+    /**
+     * Load command arguments asynchronously
+     */
+    async _loadArguments() {
+        const batchSize = 50;
+        const commands = this._commandsCache;
+        for (let i = 0; i < commands.length; i += batchSize) {
+            const batch = commands.slice(i, i + batchSize);
+            await Promise.all(batch.map(async (cmd) => {
+                try {
+                    const description = await this._commands.describedBy(cmd.id);
+                    if (description && description.args) {
+                        const argsStr = this._formatArgs(description.args);
+                        cmd.args = argsStr;
+                        this._argsCache.set(cmd.id, argsStr);
+                        // Update the cell if visible
+                        this._updateArgsCell(cmd.id, argsStr);
+                    }
+                }
+                catch (_a) {
+                    // Command may not have describedBy implemented
+                }
+            }));
+            // Yield to allow UI updates
+            await new Promise(resolve => setTimeout(resolve, 0));
+        }
+    }
+    /**
+     * Format arguments object as readable string
+     * Handles JSON Schema format: { type: "object", properties: { argName: { type: "string" } } }
+     */
+    _formatArgs(args) {
+        if (!args || typeof args !== 'object') {
+            return '';
+        }
+        const schema = args;
+        // JSON Schema format: extract from 'properties' object
+        if (schema.properties && typeof schema.properties === 'object') {
+            const properties = schema.properties;
+            const propKeys = Object.keys(properties);
+            if (propKeys.length === 0) {
+                return '';
+            }
+            const formatted = propKeys.map(key => {
+                const prop = properties[key];
+                if (prop && typeof prop === 'object') {
+                    const propObj = prop;
+                    const typeInfo = propObj.type;
+                    if (typeInfo) {
+                        return `${key}: ${typeInfo}`;
+                    }
+                }
+                return key;
+            });
+            return formatted.join(', ');
+        }
+        // Fallback: direct key-value format (non-schema)
+        const keys = Object.keys(schema).filter(k => k !== 'type' && k !== '$schema');
+        if (keys.length === 0) {
+            return '';
+        }
+        return keys.join(', ');
+    }
+    /**
+     * Update a specific args cell in the table
+     */
+    _updateArgsCell(commandId, argsStr) {
+        const rows = Array.from(this._tbody.querySelectorAll('tr'));
+        for (const row of rows) {
+            const idCell = row.querySelector('td:first-child');
+            if (idCell && idCell.textContent === commandId) {
+                const argsCell = row.querySelector('td:nth-child(4)');
+                if (argsCell) {
+                    argsCell.textContent = argsStr;
+                    argsCell.title = argsStr;
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * Render the commands table
+     */
+    _renderTable(commands) {
+        this._tbody.innerHTML = '';
+        for (const cmd of commands) {
+            const row = document.createElement('tr');
+            // Command ID cell
+            const idCell = document.createElement('td');
+            idCell.className = 'jp-CommandsReferenceWidget-commandId';
+            idCell.textContent = cmd.id;
+            idCell.title = cmd.id;
+            row.appendChild(idCell);
+            // Label cell
+            const labelCell = document.createElement('td');
+            labelCell.textContent = cmd.label;
+            labelCell.title = cmd.label;
+            row.appendChild(labelCell);
+            // Description cell
+            const descCell = document.createElement('td');
+            descCell.textContent = cmd.caption;
+            descCell.title = cmd.caption;
+            row.appendChild(descCell);
+            // Arguments cell
+            const argsCell = document.createElement('td');
+            const cachedArgs = this._argsCache.get(cmd.id);
+            argsCell.textContent = cachedArgs || cmd.args || '';
+            argsCell.title = cachedArgs || cmd.args || '';
+            row.appendChild(argsCell);
+            this._tbody.appendChild(row);
+        }
+        this._updateCount(commands.length, this._commandsCache.length);
+    }
+    /**
+     * Filter commands based on search input
+     */
+    _filterCommands() {
+        const query = this._searchInput.value.toLowerCase().trim();
+        if (!query) {
+            this._renderTable(this._commandsCache);
+            return;
+        }
+        const filtered = this._commandsCache.filter(cmd => {
+            return (cmd.id.toLowerCase().includes(query) ||
+                cmd.label.toLowerCase().includes(query) ||
+                cmd.caption.toLowerCase().includes(query));
+        });
+        this._renderTable(filtered);
+    }
+    /**
+     * Update the command count display
+     */
+    _updateCount(shown, total) {
+        if (shown === total) {
+            this._countSpan.textContent = `${total} commands`;
+        }
+        else {
+            this._countSpan.textContent = `${shown} / ${total} commands`;
+        }
+    }
+    /**
+     * Refresh the commands list
+     */
+    refresh() {
+        this._argsCache.clear();
+        void this._loadCommands();
+    }
+}

package/package.json

@@ -0,0 +1,198 @@
+{
+    "name": "jupyterlab_show_commands_reference_extension",
+    "version": "1.0.4",
+    "description": "Display all available JupyterLab commands with their full reference IDs and arguments in a dedicated tab",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/stellarshenson/jupyterlab_show_commands_reference_extension",
+    "bugs": {
+        "url": "https://github.com/stellarshenson/jupyterlab_show_commands_reference_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_show_commands_reference_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_show_commands_reference_extension/labextension jupyterlab_show_commands_reference_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/apputils": "^4.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",
+        "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",
+        "yjs": "^13.5.0"
+    },
+    "resolutions": {
+        "lib0": "0.2.111"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "extension": true,
+        "outputDir": "jupyterlab_show_commands_reference_extension/labextension"
+    },
+    "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_show_commands_reference_extension.spec.ts

@@ -0,0 +1,9 @@
+/**
+ * Example of [Jest](https://jestjs.io/docs/getting-started) unit tests
+ */
+
+describe('jupyterlab_show_commands_reference_extension', () => {
+  it('should be tested', () => {
+    expect(1 + 1).toEqual(2);
+  });
+});

package/src/index.ts

@@ -0,0 +1,74 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
+
+import { CommandsReferenceWidget } from './widget';
+
+/**
+ * Command IDs for the extension
+ */
+namespace CommandIDs {
+  export const open = 'jupyterlab-commands-reference:open';
+}
+
+/**
+ * Track the widget instance to prevent duplicates
+ */
+let widget: MainAreaWidget<CommandsReferenceWidget> | null = null;
+
+/**
+ * Initialization data for the jupyterlab_show_commands_reference_extension extension.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab_show_commands_reference_extension:plugin',
+  description:
+    'Display all available JupyterLab commands with their full reference IDs and arguments in a dedicated tab',
+  autoStart: true,
+  requires: [ICommandPalette],
+  activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {
+    console.log(
+      'JupyterLab extension jupyterlab_show_commands_reference_extension is activated!'
+    );
+
+    // Register the command
+    app.commands.addCommand(CommandIDs.open, {
+      label: 'Show Commands Reference',
+      caption:
+        'Display all available JupyterLab commands with their IDs and arguments',
+      execute: () => {
+        // Create widget if it doesn't exist or was disposed
+        if (!widget || widget.isDisposed) {
+          const content = new CommandsReferenceWidget(app.commands);
+          widget = new MainAreaWidget({ content });
+          widget.id = 'jp-commands-reference';
+          widget.title.label = 'Commands Reference';
+          widget.title.closable = true;
+
+          // Clear reference when widget is disposed
+          widget.disposed.connect(() => {
+            widget = null;
+          });
+        }
+
+        // Add to main area if not already attached
+        if (!widget.isAttached) {
+          app.shell.add(widget, 'main');
+        }
+
+        // Activate the widget
+        app.shell.activateById(widget.id);
+      }
+    });
+
+    // Add command to palette under Help category
+    palette.addItem({
+      command: CommandIDs.open,
+      category: 'Help'
+    });
+  }
+};
+
+export default plugin;

package/src/widget.ts

@@ -0,0 +1,321 @@
+import { Widget } from '@lumino/widgets';
+import { CommandRegistry } from '@lumino/commands';
+
+/**
+ * Interface for cached command information
+ */
+interface ICommandInfo {
+  id: string;
+  label: string;
+  caption: string;
+  args: string | null;
+}
+
+/**
+ * A widget that displays all registered JupyterLab commands
+ */
+export class CommandsReferenceWidget extends Widget {
+  private _commands: CommandRegistry;
+  private _searchInput!: HTMLInputElement;
+  private _countSpan!: HTMLSpanElement;
+  private _tbody!: HTMLTableSectionElement;
+  private _commandsCache: ICommandInfo[] = [];
+  private _argsCache: Map<string, string> = new Map();
+
+  constructor(commands: CommandRegistry) {
+    super();
+    this._commands = commands;
+    this.addClass('jp-CommandsReferenceWidget');
+
+    // Build DOM structure
+    this._buildHeader();
+    this._buildContent();
+
+    // Initial load
+    void this._loadCommands();
+  }
+
+  /**
+   * Build the header with search input and count
+   */
+  private _buildHeader(): void {
+    const header = document.createElement('div');
+    header.className = 'jp-CommandsReferenceWidget-header';
+
+    // Search input
+    this._searchInput = document.createElement('input');
+    this._searchInput.type = 'text';
+    this._searchInput.placeholder = 'Filter commands...';
+    this._searchInput.className = 'jp-CommandsReferenceWidget-search';
+    this._searchInput.addEventListener('input', () => {
+      this._filterCommands();
+    });
+    header.appendChild(this._searchInput);
+
+    // Command count
+    this._countSpan = document.createElement('span');
+    this._countSpan.className = 'jp-CommandsReferenceWidget-count';
+    header.appendChild(this._countSpan);
+
+    this.node.appendChild(header);
+  }
+
+  /**
+   * Build the content area with commands table
+   */
+  private _buildContent(): void {
+    const content = document.createElement('div');
+    content.className = 'jp-CommandsReferenceWidget-content';
+
+    const table = document.createElement('table');
+    table.className = 'jp-CommandsReferenceWidget-table';
+
+    // Table header
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+    const headers = ['Command ID', 'Label', 'Description', 'Arguments'];
+    for (const headerText of headers) {
+      const th = document.createElement('th');
+      th.textContent = headerText;
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Table body
+    this._tbody = document.createElement('tbody');
+    table.appendChild(this._tbody);
+
+    content.appendChild(table);
+    this.node.appendChild(content);
+  }
+
+  /**
+   * Load all commands from the registry
+   */
+  private async _loadCommands(): Promise<void> {
+    try {
+      const commandIds = this._commands.listCommands();
+      console.log(`Commands Reference: Found ${commandIds.length} commands`);
+      this._commandsCache = [];
+
+      for (const id of commandIds) {
+        let label = '';
+        let caption = '';
+
+        // Some commands have label/caption functions that may fail without args
+        try {
+          label = this._commands.label(id) || '';
+        } catch {
+          label = '';
+        }
+
+        try {
+          caption = this._commands.caption(id) || '';
+        } catch {
+          caption = '';
+        }
+
+        const info: ICommandInfo = {
+          id,
+          label,
+          caption,
+          args: null
+        };
+        this._commandsCache.push(info);
+      }
+
+      // Sort by command ID
+      this._commandsCache.sort((a, b) => a.id.localeCompare(b.id));
+
+      // Render initial table
+      this._renderTable(this._commandsCache);
+
+      // Load arguments asynchronously
+      void this._loadArguments();
+    } catch (error) {
+      console.error('Commands Reference: Error loading commands', error);
+    }
+  }
+
+  /**
+   * Load command arguments asynchronously
+   */
+  private async _loadArguments(): Promise<void> {
+    const batchSize = 50;
+    const commands = this._commandsCache;
+
+    for (let i = 0; i < commands.length; i += batchSize) {
+      const batch = commands.slice(i, i + batchSize);
+
+      await Promise.all(
+        batch.map(async cmd => {
+          try {
+            const description = await this._commands.describedBy(cmd.id);
+            if (description && description.args) {
+              const argsStr = this._formatArgs(description.args);
+              cmd.args = argsStr;
+              this._argsCache.set(cmd.id, argsStr);
+
+              // Update the cell if visible
+              this._updateArgsCell(cmd.id, argsStr);
+            }
+          } catch {
+            // Command may not have describedBy implemented
+          }
+        })
+      );
+
+      // Yield to allow UI updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    }
+  }
+
+  /**
+   * Format arguments object as readable string
+   * Handles JSON Schema format: { type: "object", properties: { argName: { type: "string" } } }
+   */
+  private _formatArgs(args: unknown): string {
+    if (!args || typeof args !== 'object') {
+      return '';
+    }
+
+    const schema = args as Record<string, unknown>;
+
+    // JSON Schema format: extract from 'properties' object
+    if (schema.properties && typeof schema.properties === 'object') {
+      const properties = schema.properties as Record<string, unknown>;
+      const propKeys = Object.keys(properties);
+
+      if (propKeys.length === 0) {
+        return '';
+      }
+
+      const formatted = propKeys.map(key => {
+        const prop = properties[key];
+        if (prop && typeof prop === 'object') {
+          const propObj = prop as Record<string, unknown>;
+          const typeInfo = propObj.type;
+          if (typeInfo) {
+            return `${key}: ${typeInfo}`;
+          }
+        }
+        return key;
+      });
+
+      return formatted.join(', ');
+    }
+
+    // Fallback: direct key-value format (non-schema)
+    const keys = Object.keys(schema).filter(
+      k => k !== 'type' && k !== '$schema'
+    );
+    if (keys.length === 0) {
+      return '';
+    }
+
+    return keys.join(', ');
+  }
+
+  /**
+   * Update a specific args cell in the table
+   */
+  private _updateArgsCell(commandId: string, argsStr: string): void {
+    const rows = Array.from(this._tbody.querySelectorAll('tr'));
+    for (const row of rows) {
+      const idCell = row.querySelector('td:first-child');
+      if (idCell && idCell.textContent === commandId) {
+        const argsCell = row.querySelector(
+          'td:nth-child(4)'
+        ) as HTMLElement | null;
+        if (argsCell) {
+          argsCell.textContent = argsStr;
+          argsCell.title = argsStr;
+        }
+        break;
+      }
+    }
+  }
+
+  /**
+   * Render the commands table
+   */
+  private _renderTable(commands: ICommandInfo[]): void {
+    this._tbody.innerHTML = '';
+
+    for (const cmd of commands) {
+      const row = document.createElement('tr');
+
+      // Command ID cell
+      const idCell = document.createElement('td');
+      idCell.className = 'jp-CommandsReferenceWidget-commandId';
+      idCell.textContent = cmd.id;
+      idCell.title = cmd.id;
+      row.appendChild(idCell);
+
+      // Label cell
+      const labelCell = document.createElement('td');
+      labelCell.textContent = cmd.label;
+      labelCell.title = cmd.label;
+      row.appendChild(labelCell);
+
+      // Description cell
+      const descCell = document.createElement('td');
+      descCell.textContent = cmd.caption;
+      descCell.title = cmd.caption;
+      row.appendChild(descCell);
+
+      // Arguments cell
+      const argsCell = document.createElement('td');
+      const cachedArgs = this._argsCache.get(cmd.id);
+      argsCell.textContent = cachedArgs || cmd.args || '';
+      argsCell.title = cachedArgs || cmd.args || '';
+      row.appendChild(argsCell);
+
+      this._tbody.appendChild(row);
+    }
+
+    this._updateCount(commands.length, this._commandsCache.length);
+  }
+
+  /**
+   * Filter commands based on search input
+   */
+  private _filterCommands(): void {
+    const query = this._searchInput.value.toLowerCase().trim();
+
+    if (!query) {
+      this._renderTable(this._commandsCache);
+      return;
+    }
+
+    const filtered = this._commandsCache.filter(cmd => {
+      return (
+        cmd.id.toLowerCase().includes(query) ||
+        cmd.label.toLowerCase().includes(query) ||
+        cmd.caption.toLowerCase().includes(query)
+      );
+    });
+
+    this._renderTable(filtered);
+  }
+
+  /**
+   * Update the command count display
+   */
+  private _updateCount(shown: number, total: number): void {
+    if (shown === total) {
+      this._countSpan.textContent = `${total} commands`;
+    } else {
+      this._countSpan.textContent = `${shown} / ${total} commands`;
+    }
+  }
+
+  /**
+   * Refresh the commands list
+   */
+  refresh(): void {
+    this._argsCache.clear();
+    void this._loadCommands();
+  }
+}

package/style/base.css

@@ -0,0 +1,141 @@
+/*
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+/* Main widget container */
+.jp-CommandsReferenceWidget {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header with search and count */
+.jp-CommandsReferenceWidget-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--jp-layout-color1);
+  border-bottom: 1px solid var(--jp-border-color2);
+  flex-shrink: 0;
+}
+
+/* Search input */
+.jp-CommandsReferenceWidget-search {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  background: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  outline: none;
+}
+
+.jp-CommandsReferenceWidget-search:focus {
+  border-color: var(--jp-brand-color1);
+}
+
+.jp-CommandsReferenceWidget-search::placeholder {
+  color: var(--jp-ui-font-color3);
+}
+
+/* Command count */
+.jp-CommandsReferenceWidget-count {
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  white-space: nowrap;
+}
+
+/* Scrollable content area */
+.jp-CommandsReferenceWidget-content {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
+/* Commands table */
+.jp-CommandsReferenceWidget-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--jp-ui-font-size1);
+}
+
+/* Table header */
+.jp-CommandsReferenceWidget-table thead {
+  position: sticky;
+  top: 0;
+  background: var(--jp-layout-color2);
+  z-index: 1;
+}
+
+.jp-CommandsReferenceWidget-table th {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+  border-bottom: 2px solid var(--jp-border-color1);
+  white-space: nowrap;
+}
+
+/* Table cells */
+.jp-CommandsReferenceWidget-table td {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--jp-border-color2);
+  color: var(--jp-ui-font-color1);
+  vertical-align: top;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Command ID column - monospace and selectable */
+.jp-CommandsReferenceWidget-commandId {
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  color: var(--jp-brand-color1);
+  user-select: text;
+  white-space: nowrap;
+}
+
+/* Alternating row colors */
+.jp-CommandsReferenceWidget-table tbody tr:nth-child(even) {
+  background: var(--jp-layout-color1);
+}
+
+.jp-CommandsReferenceWidget-table tbody tr:nth-child(odd) {
+  background: var(--jp-layout-color0);
+}
+
+/* Row hover effect */
+.jp-CommandsReferenceWidget-table tbody tr:hover {
+  background: var(--jp-layout-color2);
+}
+
+/* Column widths */
+.jp-CommandsReferenceWidget-table th:nth-child(1),
+.jp-CommandsReferenceWidget-table td:nth-child(1) {
+  width: 30%;
+  min-width: 200px;
+}
+
+.jp-CommandsReferenceWidget-table th:nth-child(2),
+.jp-CommandsReferenceWidget-table td:nth-child(2) {
+  width: 20%;
+}
+
+.jp-CommandsReferenceWidget-table th:nth-child(3),
+.jp-CommandsReferenceWidget-table td:nth-child(3) {
+  width: 30%;
+}
+
+.jp-CommandsReferenceWidget-table th:nth-child(4),
+.jp-CommandsReferenceWidget-table td:nth-child(4) {
+  width: 20%;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+  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';