jupyterlab_claude_code_extension 1.0.16

package/package.json

@@ -0,0 +1,217 @@
+{
+    "name": "jupyterlab_claude_code_extension",
+    "version": "1.0.16",
+    "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",
+        "jupyterlab",
+        "jupyterlab-extension"
+    ],
+    "homepage": "https://github.com/stellarshenson/jupyterlab_claude_code_extension",
+    "bugs": {
+        "url": "https://github.com/stellarshenson/jupyterlab_claude_code_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_claude_code_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_claude_code_extension/labextension jupyterlab_claude_code_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",
+        "@jupyterlab/coreutils": "^6.0.0",
+        "@jupyterlab/services": "^7.0.0",
+        "@jupyterlab/settingregistry": "^4.0.0",
+        "@jupyterlab/terminal": "^4.0.0",
+        "@jupyterlab/ui-components": "^4.0.0",
+        "@lumino/commands": "^2.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",
+        "yjs": "^13.5.0"
+    },
+    "resolutions": {
+        "lib0": "0.2.111"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "jupyterlab": {
+        "discovery": {
+            "server": {
+                "managers": [
+                    "pip"
+                ],
+                "base": {
+                    "name": "jupyterlab_claude_code_extension"
+                }
+            }
+        },
+        "extension": true,
+        "schemaDir": "schema",
+        "outputDir": "jupyterlab_claude_code_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_claude_code_extension.spec.ts

@@ -0,0 +1,62 @@
+import type { ISession } from '../types';
+
+const session = (over: Partial<ISession> = {}): ISession => ({
+  project_path: '/p',
+  encoded_path: '-p',
+  session_id: 'sid',
+  name: 'P',
+  summary: '',
+  first_prompt: '',
+  message_count: 0,
+  created: null,
+  modified: null,
+  file_mtime: 0,
+  git_branch: null,
+  remote_control: false,
+  favourite: false,
+  ...over
+});
+
+describe('session sorting', () => {
+  it('orders by file_mtime descending', () => {
+    const items = [
+      session({ project_path: 'a', file_mtime: 1 }),
+      session({ project_path: 'b', file_mtime: 3 }),
+      session({ project_path: 'c', file_mtime: 2 })
+    ];
+    const sorted = [...items].sort((a, b) => b.file_mtime - a.file_mtime);
+    expect(sorted.map(s => s.project_path)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('orders alphabetically by display name', () => {
+    const items = [
+      session({ name: 'Charlie' }),
+      session({ name: 'alpha' }),
+      session({ name: 'Beta' })
+    ];
+    const sorted = [...items].sort((a, b) => a.name.localeCompare(b.name));
+    expect(sorted.map(s => s.name)).toEqual(['alpha', 'Beta', 'Charlie']);
+  });
+
+  it('filters favourites only', () => {
+    const items = [
+      session({ project_path: 'a', favourite: true }),
+      session({ project_path: 'b', favourite: false }),
+      session({ project_path: 'c', favourite: true })
+    ];
+    const favs = items.filter(s => s.favourite).map(s => s.project_path);
+    expect(favs).toEqual(['a', 'c']);
+  });
+
+  it('caps recent at the configured limit', () => {
+    const items = Array.from({ length: 25 }, (_, i) =>
+      session({ project_path: `p${i}`, file_mtime: i })
+    );
+    const recent = [...items]
+      .sort((a, b) => b.file_mtime - a.file_mtime)
+      .slice(0, 10);
+    expect(recent).toHaveLength(10);
+    expect(recent[0].project_path).toBe('p24');
+    expect(recent[9].project_path).toBe('p15');
+  });
+});

package/src/icons.ts

@@ -0,0 +1,52 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+const claudeSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <g class="jp-icon3" fill="#616161">
+    <path d="m14.375 6.48.49.28v.209l-.14.489-5.937 1.397-.558-1.387zm0 0"/>
+    <path d="m12.155 2.373.683.143.182.224.173.535-.072.342-3.983 5.447L7.81 7.737l3.673-4.82z"/>
+    <path d="m8.719 1.522.419-.28.349.14.349.49-.957 5.748-.65-.441-.279-.769.49-4.33z"/>
+    <path d="m4.239 1.614.43-.55L4.95 1l.558.081.275.216 2.004 4.442.724 2.11-.848.471-3.231-5.864z"/>
+    <path d="m2.154 4.665-.14-.56.42-.488.488.07h.14l2.933 2.165.908.698 1.257.978-.698 1.187-.629-.489-.419-.419-4.05-2.863z"/>
+    <path d="M1.316 8.296 1 7.946v-.31l.316-.108 3.562.21 3.491.279-.113.695-6.66-.346z"/>
+    <path d="M3.411 11.931h-.698l-.278-.32v-.382l1.186-.838 4.82-3.068.487.833z"/>
+    <path d="m4.738 13.883-.28.07-.418-.21.07-.35 4.12-5.446.558.768-3.072 4.05z"/>
+    <path d="m8.23 14.581-.21.28-.419.14-.349-.28-.21-.42L8.09 8.646l.629.07z"/>
+    <path d="M11.791 13.045v.558l-.07.21-.279.14-.489-.066-3.356-4.996 1.331-1.014 1.117 2.025.105.733z"/>
+    <path d="m13.398 12.207.07.349-.21.279-.21-.07-1.187-.838-1.815-1.606-1.397-.978.419-1.326.698.419.42.768z"/>
+    <path d="m12.49 8.645 1.746.14.419.28.279.418v.302l-.768.327-3.911-.978-1.606-.07.419-1.466 1.117.838z"/>
+  </g>
+</svg>`;
+
+export const claudeIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:claude',
+  svgstr: claudeSvgStr
+});
+
+const starFilledSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M12 2.5l2.9 6.4 7 .7-5.3 4.7 1.6 6.9L12 17.7l-6.2 3.5 1.6-6.9-5.3-4.7 7-.7z"/>
+</svg>`;
+
+export const starFilledIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:star-filled',
+  svgstr: starFilledSvgStr
+});
+
+// Material-style icons matched verbatim to jupyterlab_trash_mgmt_extension so
+// header/menu icons render at identical size and theme.
+const refreshSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+</svg>`;
+
+export const refreshIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:refresh',
+  svgstr: refreshSvgStr
+});
+
+const removeSvgStr = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+  <path class="jp-icon3" fill="#616161" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"/>
+</svg>`;
+
+export const removeIcon = new LabIcon({
+  name: 'jupyterlab_claude_code_extension:remove',
+  svgstr: removeSvgStr
+});

package/src/index.ts

@@ -0,0 +1,95 @@
+import {
+  ILabShell,
+  ILayoutRestorer,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ITerminalTracker } from '@jupyterlab/terminal';
+
+import { requestAPI } from './request';
+import { IStatusResponse } from './types';
+import { ClaudeCodeSessionsWidget } from './widget';
+
+const PLUGIN_ID = 'jupyterlab_claude_code_extension:plugin';
+const WIDGET_ID = 'jupyterlab-claude-code-extension';
+
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: PLUGIN_ID,
+  description:
+    'Side panel listing Claude Code sessions per project folder, with remote-control indicator, favourites, and one-click resume in a terminal.',
+  autoStart: true,
+  requires: [ILabShell],
+  optional: [ILayoutRestorer, ISettingRegistry, ITerminalTracker],
+  activate: async (
+    app: JupyterFrontEnd,
+    labShell: ILabShell,
+    restorer: ILayoutRestorer | null,
+    settingRegistry: ISettingRegistry | null,
+    terminalTracker: ITerminalTracker | null
+  ) => {
+    const settings = app.serviceManager.serverSettings;
+
+    let status: IStatusResponse;
+    try {
+      status = await requestAPI<IStatusResponse>('status', settings);
+    } catch (err) {
+      console.error(
+        '[jupyterlab_claude_code_extension] status check failed; panel will not be registered.',
+        err
+      );
+      return;
+    }
+
+    if (!status.enabled) {
+      console.info(
+        '[jupyterlab_claude_code_extension] `claude` binary not found on PATH; panel disabled.'
+      );
+      return;
+    }
+
+    const widget = new ClaudeCodeSessionsWidget(
+      app,
+      status.root_dir || '',
+      terminalTracker
+    );
+    labShell.add(widget, 'left', { rank: 600 });
+
+    if (settingRegistry) {
+      try {
+        const settings = await settingRegistry.load(PLUGIN_ID);
+        const apply = (): void => {
+          const resolve = settings.get('resolveSessionNames')
+            .composite as boolean;
+          widget.setResolveSessionNames(resolve !== false);
+        };
+        apply();
+        settings.changed.connect(apply);
+      } catch (err) {
+        console.warn(
+          '[jupyterlab_claude_code_extension] failed to load settings; using defaults',
+          err
+        );
+      }
+    }
+
+    // Register with the layout restorer so JL remembers whether the panel
+    // was active/visible across browser reloads and restarts.
+    if (restorer) {
+      restorer.add(widget, WIDGET_ID);
+    }
+
+    app.commands.addCommand('claude-code-sessions:refresh', {
+      label: 'Refresh Claude Code Sessions',
+      execute: () => widget.refresh()
+    });
+
+    console.log(
+      '[jupyterlab_claude_code_extension] panel registered (claude:',
+      status.claude_path,
+      ')'
+    );
+  }
+};
+
+export default plugin;

package/src/request.ts

@@ -0,0 +1,51 @@
+import { URLExt } from '@jupyterlab/coreutils';
+
+import { ServerConnection } from '@jupyterlab/services';
+
+/**
+ * Call the server extension
+ *
+ * @param endPoint API REST end point for the extension
+ * @param serverSettings The server settings to use for the request
+ * @param init Initial values for the request
+ * @returns The response body interpreted as JSON
+ */
+export async function requestAPI<T>(
+  endPoint: string,
+  serverSettings: ServerConnection.ISettings,
+  init: RequestInit = {}
+): Promise<T> {
+  // Make request to Jupyter API
+  const requestUrl = URLExt.join(
+    serverSettings.baseUrl,
+    'jupyterlab-claude-code-extension', // our server extension's API namespace
+    endPoint
+  );
+
+  let response: Response;
+  try {
+    response = await ServerConnection.makeRequest(
+      requestUrl,
+      init,
+      serverSettings
+    );
+  } catch (error) {
+    throw new ServerConnection.NetworkError(error as any);
+  }
+
+  let data: any = await response.text();
+
+  if (data.length > 0) {
+    try {
+      data = JSON.parse(data);
+    } catch (error) {
+      console.log('Not a JSON response body.', response);
+    }
+  }
+
+  if (!response.ok) {
+    throw new ServerConnection.ResponseError(response, data.message || data);
+  }
+
+  return data;
+}

package/src/types.ts

@@ -0,0 +1,42 @@
+export interface ISession {
+  project_path: string;
+  encoded_path: string;
+  session_id: string;
+  name: string;
+  summary: string;
+  first_prompt: string;
+  message_count: number;
+  created: string | null;
+  modified: string | null;
+  file_mtime: number;
+  git_branch: string | null;
+  remote_control: boolean;
+  favourite: boolean;
+}
+
+export interface ISessionsListResponse {
+  sessions: ISession[];
+}
+
+export interface IStatusResponse {
+  enabled: boolean;
+  claude_path: string | null;
+  root_dir: string;
+}
+
+export interface IFavouriteRequest {
+  project_path: string;
+  favourite: boolean;
+}
+
+export interface IFavouriteResponse {
+  favourites: string[];
+}
+
+export interface IRemoveRequest {
+  encoded_path: string;
+}
+
+export interface IRemoveResponse {
+  removed: string;
+}