jupyterlab_claude_code_extension 1.0.45 → 1.0.50

package/lib/widget.d.ts

@@ -40,6 +40,10 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
     private _doResumeInTerminal;
     private _findTerminalForCwd;
     private _showCloseExistingDialog;
+    /** Show a modal with a spinner while the terminal is being launched. The
+     * caller must dismiss it via ``.resolve()`` once the work is done.
+     */
+    private _showLaunchSpinner;
     private _wireTerminalDisposal;
     /** Apply the presentation-mode setting (path-segment disambiguation is
      * handled separately in ``_disambiguate``). */

package/lib/widget.js

@@ -338,21 +338,29 @@ export class ClaudeCodeSessionsWidget extends Widget {
             // as the pty's only process (no shell). Server-side endpoint calls
             // terminal_manager.create(shell_command=[claude, --resume, sid], cwd=...)
             // and returns the terminal name; we then attach JL's standard widget
-            // via terminal:open. When claude exits, the tab closes.
-            const launched = await requestAPI('launch-terminal', this._serverSettings, {
-                method: 'POST',
-                body: JSON.stringify({
-                    project_path: session.project_path,
-                    session_id: session.session_id,
-                    dangerously_skip_permissions: forceDangerous || this._dangerouslySkip
-                })
-            });
-            const widget = await this._app.commands.execute('terminal:open', {
-                name: launched.terminal_name
-            });
-            if (widget === null || widget === void 0 ? void 0 : widget.id) {
-                this._terminalsByPath.set(session.project_path, widget);
-                this._wireTerminalDisposal(session.project_path, widget);
+            // via terminal:open. When claude exits, the tab closes. The launch
+            // RPC + the WebSocket-resize waiter on the server can take a few
+            // seconds, so show a modal spinner for visual feedback.
+            const spinner = this._showLaunchSpinner(`Opening ${this._lookupName(session)}...`);
+            try {
+                const launched = await requestAPI('launch-terminal', this._serverSettings, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        project_path: session.project_path,
+                        session_id: session.session_id,
+                        dangerously_skip_permissions: forceDangerous || this._dangerouslySkip
+                    })
+                });
+                const widget = await this._app.commands.execute('terminal:open', {
+                    name: launched.terminal_name
+                });
+                if (widget === null || widget === void 0 ? void 0 : widget.id) {
+                    this._terminalsByPath.set(session.project_path, widget);
+                    this._wireTerminalDisposal(session.project_path, widget);
+                }
+            }
+            finally {
+                spinner.resolve();
             }
         }
         catch (err) {
@@ -407,6 +415,30 @@ export class ClaudeCodeSessionsWidget extends Widget {
             buttons: [Dialog.okButton({ label: 'OK' })]
         });
     }
+    /** Show a modal with a spinner while the terminal is being launched. The
+     * caller must dismiss it via ``.resolve()`` once the work is done.
+     */
+    _showLaunchSpinner(label) {
+        const body = new Widget();
+        body.node.className = 'jp-ClaudeSessionsPanel-launchOverlay';
+        const spinner = document.createElement('div');
+        spinner.className =
+            'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-launchSpinner';
+        body.node.appendChild(spinner);
+        const text = document.createElement('div');
+        text.className = 'jp-ClaudeSessionsPanel-launchLabel';
+        text.textContent = label;
+        body.node.appendChild(text);
+        const dialog = new Dialog({
+            title: 'Opening Claude Code session',
+            body,
+            buttons: [Dialog.cancelButton({ label: 'Run in background' })]
+        });
+        // launch() returns a Promise we don't await - we resolve programmatically
+        // when the spawn completes (or errors).
+        void dialog.launch();
+        return dialog;
+    }
     _wireTerminalDisposal(projectPath, widget) {
         var _a;
         if (!((_a = widget === null || widget === void 0 ? void 0 : widget.disposed) === null || _a === void 0 ? void 0 : _a.connect)) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.0.45",
+    "version": "1.0.50",
     "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",

package/src/widget.ts

@@ -415,26 +415,35 @@ export class ClaudeCodeSessionsWidget extends Widget {
       // as the pty's only process (no shell). Server-side endpoint calls
       // terminal_manager.create(shell_command=[claude, --resume, sid], cwd=...)
       // and returns the terminal name; we then attach JL's standard widget
-      // via terminal:open. When claude exits, the tab closes.
-      const launched = await requestAPI<ILaunchTerminalResponse>(
-        'launch-terminal',
-        this._serverSettings,
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            project_path: session.project_path,
-            session_id: session.session_id,
-            dangerously_skip_permissions:
-              forceDangerous || this._dangerouslySkip
-          })
-        }
+      // via terminal:open. When claude exits, the tab closes. The launch
+      // RPC + the WebSocket-resize waiter on the server can take a few
+      // seconds, so show a modal spinner for visual feedback.
+      const spinner = this._showLaunchSpinner(
+        `Opening ${this._lookupName(session)}...`
       );
-      const widget: any = await this._app.commands.execute('terminal:open', {
-        name: launched.terminal_name
-      });
-      if (widget?.id) {
-        this._terminalsByPath.set(session.project_path, widget);
-        this._wireTerminalDisposal(session.project_path, widget);
+      try {
+        const launched = await requestAPI<ILaunchTerminalResponse>(
+          'launch-terminal',
+          this._serverSettings,
+          {
+            method: 'POST',
+            body: JSON.stringify({
+              project_path: session.project_path,
+              session_id: session.session_id,
+              dangerously_skip_permissions:
+                forceDangerous || this._dangerouslySkip
+            })
+          }
+        );
+        const widget: any = await this._app.commands.execute('terminal:open', {
+          name: launched.terminal_name
+        });
+        if (widget?.id) {
+          this._terminalsByPath.set(session.project_path, widget);
+          this._wireTerminalDisposal(session.project_path, widget);
+        }
+      } finally {
+        spinner.resolve();
       }
     } catch (err) {
       this._showError(err);
@@ -493,6 +502,34 @@ export class ClaudeCodeSessionsWidget extends Widget {
     });
   }
 
+  /** Show a modal with a spinner while the terminal is being launched. The
+   * caller must dismiss it via ``.resolve()`` once the work is done.
+   */
+  private _showLaunchSpinner(label: string): Dialog<unknown> {
+    const body = new Widget();
+    body.node.className = 'jp-ClaudeSessionsPanel-launchOverlay';
+
+    const spinner = document.createElement('div');
+    spinner.className =
+      'jp-claude-sessions-panel-spinner jp-ClaudeSessionsPanel-launchSpinner';
+    body.node.appendChild(spinner);
+
+    const text = document.createElement('div');
+    text.className = 'jp-ClaudeSessionsPanel-launchLabel';
+    text.textContent = label;
+    body.node.appendChild(text);
+
+    const dialog = new Dialog<unknown>({
+      title: 'Opening Claude Code session',
+      body,
+      buttons: [Dialog.cancelButton({ label: 'Run in background' })]
+    });
+    // launch() returns a Promise we don't await - we resolve programmatically
+    // when the spawn completes (or errors).
+    void dialog.launch();
+    return dialog;
+  }
+
   private _wireTerminalDisposal(projectPath: string, widget: any): void {
     if (!widget?.disposed?.connect) {
       return;

package/style/base.css

@@ -237,6 +237,29 @@
   display: inline-block;
 }
 
+.jp-ClaudeSessionsPanel-launchOverlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 8px;
+  min-width: 240px;
+}
+
+.jp-ClaudeSessionsPanel-launchSpinner {
+  width: 28px;
+  height: 28px;
+  border-width: 3px;
+}
+
+.jp-ClaudeSessionsPanel-launchLabel {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  text-align: center;
+  word-break: break-word;
+}
+
 .jp-ClaudeSessionsPanel-row.jp-mod-busy {
   opacity: 0.55;
   pointer-events: none;