jupyterlab_claude_code_extension 1.0.16

package/lib/widget.js

@@ -0,0 +1,643 @@
+import { CommandRegistry } from '@lumino/commands';
+import { Menu, Widget } from '@lumino/widgets';
+import { requestAPI } from './request';
+import { claudeIcon, refreshIcon, removeIcon, starFilledIcon } from './icons';
+const POLL_INTERVAL_MS = 10000;
+const RECENT_LIMIT = 10;
+const EXPANDED_STORAGE_KEY = 'jupyterlab_claude_code_extension:expanded';
+const SECTION_LABELS = {
+    favourites: 'Favourites',
+    recent: 'Recent',
+    all: 'All'
+};
+const DEFAULT_EXPANDED = {
+    favourites: true,
+    recent: true,
+    all: true
+};
+function loadExpanded() {
+    try {
+        const raw = window.localStorage.getItem(EXPANDED_STORAGE_KEY);
+        if (!raw) {
+            return { ...DEFAULT_EXPANDED };
+        }
+        const parsed = JSON.parse(raw);
+        return {
+            favourites: typeof (parsed === null || parsed === void 0 ? void 0 : parsed.favourites) === 'boolean'
+                ? parsed.favourites
+                : DEFAULT_EXPANDED.favourites,
+            recent: typeof (parsed === null || parsed === void 0 ? void 0 : parsed.recent) === 'boolean'
+                ? parsed.recent
+                : DEFAULT_EXPANDED.recent,
+            all: typeof (parsed === null || parsed === void 0 ? void 0 : parsed.all) === 'boolean' ? parsed.all : DEFAULT_EXPANDED.all
+        };
+    }
+    catch (_err) {
+        return { ...DEFAULT_EXPANDED };
+    }
+}
+function saveExpanded(state) {
+    try {
+        window.localStorage.setItem(EXPANDED_STORAGE_KEY, JSON.stringify(state));
+    }
+    catch (_err) {
+        // localStorage unavailable (private mode, quota) - ignore
+    }
+}
+// Drop any pre-v0.6.18 localStorage entries from previous schemes - they
+// were unreliable and we now interrogate JL's terminal manager directly.
+try {
+    window.localStorage.removeItem('jupyterlab_claude_code_extension:terminals');
+}
+catch (_err) {
+    // ignore
+}
+export class ClaudeCodeSessionsWidget extends Widget {
+    constructor(app, rootDir, terminalTracker = null) {
+        super();
+        this._refreshBtn = null;
+        this._sessions = null;
+        this._expanded = loadExpanded();
+        this._activeSession = null;
+        this._activeRowEl = null;
+        this._pollHandle = null;
+        this._removingPaths = new Set();
+        this._terminalsByPath = new Map();
+        this._pendingByPath = new Map();
+        this._resolveNames = true;
+        this._displayNames = new Map();
+        this._app = app;
+        this._serverSettings = app.serviceManager.serverSettings;
+        this._rootDir = rootDir.replace(/\/+$/, '');
+        this._terminalTracker = terminalTracker;
+        this.id = 'jupyterlab-claude-code-extension';
+        this.title.icon = claudeIcon;
+        this.title.caption = 'Claude Code Sessions';
+        this.addClass('jp-ClaudeSessionsPanel');
+        this._buildShell();
+        this._setupContextMenu();
+    }
+    refresh() {
+        this._showLoading();
+        this._setRefreshSpinning(true);
+        this._fetch()
+            .catch(err => this._showError(err))
+            .finally(() => this._setRefreshSpinning(false));
+    }
+    /** Toggle whether explicit ``/rename`` names are honoured. */
+    setResolveSessionNames(on) {
+        if (this._resolveNames === on) {
+            return;
+        }
+        this._resolveNames = on;
+        this._render();
+    }
+    onAfterShow(_msg) {
+        this.refresh();
+        this._startPolling();
+    }
+    onBeforeHide(_msg) {
+        this._stopPolling();
+    }
+    onCloseRequest(msg) {
+        this._stopPolling();
+        super.onCloseRequest(msg);
+    }
+    // ------------------------------------------------------------------ shell
+    _buildShell() {
+        const root = this.node;
+        root.innerHTML = '';
+        const header = document.createElement('div');
+        header.className = 'jp-ClaudeSessionsPanel-header';
+        const title = document.createElement('span');
+        title.className = 'jp-ClaudeSessionsPanel-title';
+        title.textContent = 'Claude Code Sessions';
+        header.appendChild(title);
+        const refreshBtn = document.createElement('button');
+        refreshBtn.className = 'jp-ClaudeSessionsPanel-iconButton';
+        refreshBtn.title = 'Refresh';
+        refreshIcon.element({ container: refreshBtn });
+        refreshBtn.addEventListener('click', () => this.refresh());
+        header.appendChild(refreshBtn);
+        this._refreshBtn = refreshBtn;
+        const body = document.createElement('div');
+        body.className = 'jp-ClaudeSessionsPanel-body';
+        const status = document.createElement('div');
+        status.className = 'jp-ClaudeSessionsPanel-status';
+        root.appendChild(header);
+        root.appendChild(body);
+        root.appendChild(status);
+        this._bodyEl = body;
+        this._statusEl = status;
+    }
+    _showLoading() {
+        this._statusEl.textContent = this._sessions === null ? 'Loading...' : '';
+    }
+    _showError(err) {
+        const message = err instanceof Error ? err.message : String(err);
+        this._statusEl.textContent = `Error: ${message}`;
+    }
+    // ------------------------------------------------------------------ data
+    async _fetch() {
+        var _a;
+        const data = await requestAPI('sessions', this._serverSettings);
+        this._sessions = (_a = data.sessions) !== null && _a !== void 0 ? _a : [];
+        this._statusEl.textContent = '';
+        this._render();
+    }
+    async _toggleFavourite(session) {
+        const next = !session.favourite;
+        // Optimistic update
+        session.favourite = next;
+        this._render();
+        try {
+            await requestAPI('sessions/favourite', this._serverSettings, {
+                method: 'POST',
+                body: JSON.stringify({
+                    project_path: session.project_path,
+                    favourite: next
+                })
+            });
+        }
+        catch (err) {
+            // Roll back on failure
+            session.favourite = !next;
+            this._render();
+            this._showError(err);
+        }
+    }
+    async _remove(session) {
+        var _a;
+        this._removingPaths.add(session.encoded_path);
+        this._render();
+        try {
+            await requestAPI('sessions/remove', this._serverSettings, {
+                method: 'POST',
+                body: JSON.stringify({ encoded_path: session.encoded_path })
+            });
+            // Drop locally and re-render; a full refresh will follow on next poll
+            this._sessions = ((_a = this._sessions) !== null && _a !== void 0 ? _a : []).filter(s => s.encoded_path !== session.encoded_path);
+        }
+        catch (err) {
+            this._showError(err);
+        }
+        finally {
+            this._removingPaths.delete(session.encoded_path);
+            this._render();
+        }
+    }
+    // -------------------------------------------------------------- terminal
+    async _resumeInTerminal(session) {
+        // Coalesce concurrent clicks on the same row - subsequent clicks attach
+        // to the in-flight promise instead of creating their own terminal.
+        const inFlight = this._pendingByPath.get(session.project_path);
+        if (inFlight) {
+            return inFlight;
+        }
+        const promise = this._doResumeInTerminal(session).finally(() => {
+            this._pendingByPath.delete(session.project_path);
+        });
+        this._pendingByPath.set(session.project_path, promise);
+        return promise;
+    }
+    async _doResumeInTerminal(session) {
+        var _a, _b, _c;
+        try {
+            // 1. In-memory microcache - covers rapid-click and post-creation reuse
+            // before the new widget propagates fully through the tracker. Cleared
+            // on widget disposal. NOT persisted to localStorage.
+            const cached = this._terminalsByPath.get(session.project_path);
+            if (cached && !cached.isDisposed) {
+                this._app.shell.activateById(cached.id);
+                return;
+            }
+            // 2. Walk every live terminal widget JL knows about and ask the
+            // server for the cwd of EVERY process in its pty's tree. Match if
+            // any one of them equals project_path.
+            const found = await this._findTerminalForCwd(session.project_path);
+            if (found) {
+                this._terminalsByPath.set(session.project_path, found);
+                this._wireTerminalDisposal(session.project_path, found);
+                this._app.shell.activateById(found.id);
+                return;
+            }
+            // 3. No matching open terminal - create a new one rooted at this folder.
+            const widget = await this._app.commands.execute('terminal:create-new', { cwd: session.project_path });
+            if (widget === null || widget === void 0 ? void 0 : widget.id) {
+                this._terminalsByPath.set(session.project_path, widget);
+                this._wireTerminalDisposal(session.project_path, widget);
+            }
+            const term = (_b = (_a = widget === null || widget === void 0 ? void 0 : widget.content) === null || _a === void 0 ? void 0 : _a.session) !== null && _b !== void 0 ? _b : widget === null || widget === void 0 ? void 0 : widget.session;
+            const command = `cd ${this._shellQuote(session.project_path)} && claude --resume ${session.session_id}\r`;
+            if (!term || typeof term.send !== 'function') {
+                this._statusEl.textContent = `Run in a terminal: cd ${session.project_path} && claude --resume ${session.session_id}`;
+                return;
+            }
+            // Wait for the first message from the terminal (shell prompt) before
+            // injecting input - sending too early arrives before the shell is ready.
+            let sent = false;
+            const send = () => {
+                if (sent) {
+                    return;
+                }
+                sent = true;
+                term.send({ type: 'stdin', content: [command] });
+            };
+            if ((_c = term.messageReceived) === null || _c === void 0 ? void 0 : _c.connect) {
+                const handler = () => {
+                    term.messageReceived.disconnect(handler);
+                    // Tiny additional delay so the prompt is rendered and ready for input
+                    setTimeout(send, 150);
+                };
+                term.messageReceived.connect(handler);
+                // Hard fallback: if no message arrives within 2s, send anyway
+                setTimeout(send, 2000);
+            }
+            else {
+                setTimeout(send, 600);
+            }
+        }
+        catch (err) {
+            this._showError(err);
+        }
+    }
+    _shellQuote(s) {
+        return `'${s.replace(/'/g, "'\\''")}'`;
+    }
+    async _findTerminalForCwd(projectPath) {
+        var _a, _b;
+        if (!this._terminalTracker) {
+            return null;
+        }
+        const candidates = [];
+        this._terminalTracker.forEach((widget) => {
+            if (widget && !widget.isDisposed) {
+                candidates.push(widget);
+            }
+        });
+        const target = projectPath.replace(/\/+$/, '');
+        for (const widget of candidates) {
+            const sessName = (_b = (_a = widget === null || widget === void 0 ? void 0 : widget.content) === null || _a === void 0 ? void 0 : _a.session) === null || _b === void 0 ? void 0 : _b.name;
+            if (typeof sessName !== 'string' || !sessName) {
+                continue;
+            }
+            try {
+                const data = await requestAPI(`terminal-cwd/${encodeURIComponent(sessName)}`, this._serverSettings);
+                const cwds = Array.isArray(data === null || data === void 0 ? void 0 : data.cwds) ? data.cwds : [];
+                for (const cwd of cwds) {
+                    if ((cwd || '').replace(/\/+$/, '') === target) {
+                        return widget;
+                    }
+                }
+            }
+            catch (_err) {
+                // Backend may report 404 for terminals that disappeared between
+                // tracker enumeration and fetch - skip and continue.
+            }
+        }
+        return null;
+    }
+    _wireTerminalDisposal(projectPath, widget) {
+        var _a;
+        if (!((_a = widget === null || widget === void 0 ? void 0 : widget.disposed) === null || _a === void 0 ? void 0 : _a.connect)) {
+            return;
+        }
+        widget.disposed.connect(() => {
+            if (this._terminalsByPath.get(projectPath) === widget) {
+                this._terminalsByPath.delete(projectPath);
+            }
+        });
+    }
+    // -------------------------------------------------------------- rendering
+    /** Apply the resolve-names setting + path-segment disambiguation. */
+    _displayName(s) {
+        if (!this._resolveNames) {
+            return this._basename(s.project_path) || s.encoded_path;
+        }
+        return s.name || this._basename(s.project_path) || s.encoded_path;
+    }
+    _basename(p) {
+        if (!p) {
+            return '';
+        }
+        const parts = p.split('/').filter(Boolean);
+        return parts[parts.length - 1] || '';
+    }
+    /** Walk path tails until every name in a colliding group is unique. */
+    _disambiguate(rows) {
+        var _a;
+        const out = new Map();
+        const groups = new Map();
+        for (const r of rows) {
+            const n = this._displayName(r);
+            groups.set(n, ((_a = groups.get(n)) !== null && _a !== void 0 ? _a : []).concat(r));
+        }
+        for (const [name, group] of groups.entries()) {
+            if (group.length === 1) {
+                out.set(group[0].project_path, name);
+                continue;
+            }
+            const segs = group.map(r => r.project_path.split('/').filter(Boolean));
+            const max = Math.max(...segs.map(s => s.length));
+            let depth = 1;
+            while (depth <= max) {
+                const tails = segs.map(s => s.slice(-depth).join('/'));
+                if (new Set(tails).size === tails.length) {
+                    group.forEach((r, i) => out.set(r.project_path, tails[i]));
+                    break;
+                }
+                depth += 1;
+            }
+            if (!out.has(group[0].project_path)) {
+                // Fallback to absolute path
+                group.forEach(r => out.set(r.project_path, r.project_path));
+            }
+        }
+        return out;
+    }
+    _render() {
+        var _a;
+        const sessions = (_a = this._sessions) !== null && _a !== void 0 ? _a : [];
+        // Capture scrollTop per section so polling refreshes don't reset the
+        // user's place inside the All list.
+        const scrolls = new Map();
+        this._bodyEl
+            .querySelectorAll('.jp-ClaudeSessionsPanel-section')
+            .forEach(sect => {
+            const key = sect.dataset.section;
+            const list = sect.querySelector('.jp-ClaudeSessionsPanel-list');
+            if (key && list) {
+                scrolls.set(key, list.scrollTop);
+            }
+        });
+        this._bodyEl.innerHTML = '';
+        if (sessions.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'jp-ClaudeSessionsPanel-empty';
+            empty.textContent = 'No Claude Code sessions found.';
+            this._bodyEl.appendChild(empty);
+            return;
+        }
+        // Compute disambiguated display names once per render.
+        this._displayNames = this._disambiguate(sessions);
+        const favourites = sessions.filter(s => s.favourite);
+        const recent = [...sessions]
+            .sort((a, b) => b.file_mtime - a.file_mtime)
+            .slice(0, RECENT_LIMIT);
+        const all = [...sessions].sort((a, b) => this._lookupName(a).localeCompare(this._lookupName(b)));
+        if (favourites.length > 0) {
+            this._renderSection('favourites', favourites);
+        }
+        this._renderSection('recent', recent);
+        this._renderSection('all', all);
+        // Restore scroll positions
+        this._bodyEl
+            .querySelectorAll('.jp-ClaudeSessionsPanel-section')
+            .forEach(sect => {
+            const key = sect.dataset.section;
+            const list = sect.querySelector('.jp-ClaudeSessionsPanel-list');
+            const saved = key ? scrolls.get(key) : undefined;
+            if (list && saved !== undefined) {
+                list.scrollTop = saved;
+            }
+        });
+    }
+    _renderSection(key, items) {
+        const section = document.createElement('div');
+        section.className = 'jp-ClaudeSessionsPanel-section';
+        section.dataset.section = key;
+        const expanded = this._expanded[key];
+        const header = document.createElement('button');
+        header.className = 'jp-ClaudeSessionsPanel-sectionHeader';
+        header.setAttribute('aria-expanded', String(expanded));
+        const caret = document.createElement('span');
+        caret.className = 'jp-ClaudeSessionsPanel-caret';
+        caret.textContent = expanded ? '▾' : '▸';
+        header.appendChild(caret);
+        const label = document.createElement('span');
+        label.className = 'jp-ClaudeSessionsPanel-sectionLabel';
+        label.textContent = `${SECTION_LABELS[key]} (${items.length})`;
+        header.appendChild(label);
+        header.addEventListener('click', () => {
+            this._expanded[key] = !this._expanded[key];
+            saveExpanded(this._expanded);
+            this._render();
+        });
+        section.appendChild(header);
+        if (expanded) {
+            const list = document.createElement('div');
+            list.className = 'jp-ClaudeSessionsPanel-list';
+            if (items.length === 0) {
+                const empty = document.createElement('div');
+                empty.className = 'jp-ClaudeSessionsPanel-emptySection';
+                empty.textContent =
+                    key === 'favourites' ? 'No favourites yet.' : 'Empty.';
+                list.appendChild(empty);
+            }
+            else {
+                for (const item of items) {
+                    list.appendChild(this._renderRow(item));
+                }
+            }
+            section.appendChild(list);
+        }
+        this._bodyEl.appendChild(section);
+    }
+    _renderRow(session) {
+        const row = document.createElement('div');
+        row.className = 'jp-ClaudeSessionsPanel-row';
+        row.title = this._buildRowTooltip(session);
+        const removing = this._removingPaths.has(session.encoded_path);
+        if (removing) {
+            row.classList.add('jp-mod-busy');
+        }
+        if (removing) {
+            const spinner = document.createElement('span');
+            spinner.className = 'jp-ClaudeSessionsPanel-spinner';
+            spinner.title = 'Removing...';
+            row.appendChild(spinner);
+        }
+        else if (session.remote_control) {
+            const dot = document.createElement('span');
+            dot.className = 'jp-ClaudeSessionsPanel-dot';
+            dot.title = 'Remote control session is active';
+            row.appendChild(dot);
+        }
+        else {
+            const dotPlaceholder = document.createElement('span');
+            dotPlaceholder.className = 'jp-ClaudeSessionsPanel-dotPlaceholder';
+            row.appendChild(dotPlaceholder);
+        }
+        const name = document.createElement('span');
+        name.className = 'jp-ClaudeSessionsPanel-name';
+        name.textContent = this._lookupName(session);
+        row.appendChild(name);
+        if (session.favourite) {
+            const star = document.createElement('span');
+            star.className = 'jp-ClaudeSessionsPanel-favStar';
+            star.title = 'Favourite';
+            starFilledIcon.element({ container: star });
+            row.appendChild(star);
+        }
+        row.addEventListener('click', () => {
+            if (removing) {
+                return;
+            }
+            void this._resumeInTerminal(session);
+        });
+        row.addEventListener('contextmenu', e => {
+            e.preventDefault();
+            if (removing) {
+                return;
+            }
+            this._activeSession = session;
+            this._setActiveRow(row);
+            this._contextMenu.open(e.clientX, e.clientY);
+        });
+        return row;
+    }
+    _lookupName(s) {
+        var _a;
+        return (_a = this._displayNames.get(s.project_path)) !== null && _a !== void 0 ? _a : this._displayName(s);
+    }
+    _buildRowTooltip(s) {
+        const lines = [this._lookupName(s)];
+        lines.push(`Path: ${this._displayPath(s.project_path)}`);
+        if (s.file_mtime) {
+            lines.push(`Last activity: ${this._formatRelativeTime(s.file_mtime)}`);
+        }
+        if (s.message_count) {
+            lines.push(`Messages: ${s.message_count}`);
+        }
+        if (s.git_branch) {
+            lines.push(`Branch: ${s.git_branch}`);
+        }
+        if (s.remote_control) {
+            lines.push('Remote control: active');
+        }
+        if (s.first_prompt) {
+            const trimmed = s.first_prompt.length > 100
+                ? `${s.first_prompt.slice(0, 100)}...`
+                : s.first_prompt;
+            lines.push(`First prompt: ${trimmed}`);
+        }
+        if (s.session_id) {
+            lines.push(`Session id: ${s.session_id}`);
+        }
+        return lines.join('\n');
+    }
+    _displayPath(absolute) {
+        if (!this._rootDir) {
+            return absolute;
+        }
+        if (absolute === this._rootDir) {
+            return '.';
+        }
+        if (absolute.startsWith(this._rootDir + '/')) {
+            return absolute.slice(this._rootDir.length + 1);
+        }
+        return absolute;
+    }
+    _formatRelativeTime(epochMs) {
+        if (!epochMs) {
+            return 'unknown';
+        }
+        const diff = Date.now() - epochMs;
+        if (diff < 60000) {
+            return 'just now';
+        }
+        if (diff < 3600000) {
+            return `${Math.floor(diff / 60000)}m ago`;
+        }
+        if (diff < 86400000) {
+            return `${Math.floor(diff / 3600000)}h ago`;
+        }
+        if (diff < 30 * 86400000) {
+            return `${Math.floor(diff / 86400000)}d ago`;
+        }
+        return new Date(epochMs).toLocaleDateString();
+    }
+    _setRefreshSpinning(on) {
+        if (!this._refreshBtn) {
+            return;
+        }
+        this._refreshBtn.classList.toggle('jp-mod-spinning', on);
+    }
+    _setActiveRow(row) {
+        if (this._activeRowEl && this._activeRowEl !== row) {
+            this._activeRowEl.classList.remove('jp-mod-active');
+        }
+        this._activeRowEl = row;
+        if (row) {
+            row.classList.add('jp-mod-active');
+        }
+    }
+    // -------------------------------------------------------------- ctx menu
+    _setupContextMenu() {
+        this._commands = new CommandRegistry();
+        this._commands.addCommand('claude-code-sessions:toggle-favourite', {
+            label: () => {
+                var _a;
+                return ((_a = this._activeSession) === null || _a === void 0 ? void 0 : _a.favourite)
+                    ? 'Remove from Favourites'
+                    : 'Add to Favourites';
+            },
+            execute: () => {
+                if (this._activeSession) {
+                    void this._toggleFavourite(this._activeSession);
+                }
+            }
+        });
+        this._commands.addCommand('claude-code-sessions:resume', {
+            label: 'Resume in Terminal',
+            execute: () => {
+                if (this._activeSession) {
+                    void this._resumeInTerminal(this._activeSession);
+                }
+            }
+        });
+        this._commands.addCommand('claude-code-sessions:remove', {
+            label: 'Remove from Claude',
+            icon: removeIcon,
+            execute: () => {
+                if (this._activeSession) {
+                    void this._remove(this._activeSession);
+                }
+            }
+        });
+        this._contextMenu = new Menu({ commands: this._commands });
+        this._contextMenu.addClass('jp-ClaudeSessionsContextMenu');
+        this._contextMenu.addItem({ command: 'claude-code-sessions:resume' });
+        this._contextMenu.addItem({
+            command: 'claude-code-sessions:toggle-favourite'
+        });
+        this._contextMenu.addItem({ type: 'separator' });
+        this._contextMenu.addItem({ command: 'claude-code-sessions:remove' });
+        this._contextMenu.aboutToClose.connect(() => {
+            // Only clear the visual highlight - DO NOT null _activeSession.
+            // Lumino fires aboutToClose BEFORE the activated item's command runs,
+            // so the command callback still needs to read _activeSession. The
+            // field is overwritten on the next contextmenu open.
+            this._setActiveRow(null);
+        });
+    }
+    // --------------------------------------------------------------- polling
+    _startPolling() {
+        if (this._pollHandle !== null) {
+            return;
+        }
+        this._pollHandle = window.setInterval(() => {
+            // Don't reshuffle rows while the user is interacting with the context menu
+            if (this._contextMenu.isAttached) {
+                return;
+            }
+            this._fetch().catch(err => this._showError(err));
+        }, POLL_INTERVAL_MS);
+    }
+    _stopPolling() {
+        if (this._pollHandle !== null) {
+            window.clearInterval(this._pollHandle);
+            this._pollHandle = null;
+        }
+    }
+}