jupyterlab_claude_code_extension 1.2.2 → 1.2.5

package/lib/widget.d.ts

@@ -92,6 +92,11 @@ export declare class ClaudeCodeSessionsWidget extends Widget {
      * case the file browser has no way to address it. */
     private _pathUnderRoot;
     private _formatRelativeTime;
+    /** Branch entry display: conversation name plus short session id in
+     * brackets; branches share the project path so only the name and id
+     * distinguish them. Skips the suffix when the label already is the
+     * short id (the backend's last-resort fallback). */
+    private _branchDisplayName;
     private _setRefreshSpinning;
     private _setActiveRow;
     private _setupContextMenu;

package/lib/widget.js

@@ -812,6 +812,12 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 ? `${this._lookupName(session)} (${session.extra_sessions + 1})`
                 : this._lookupName(session);
         row.appendChild(name);
+        if (session.file_mtime) {
+            const time = document.createElement('span');
+            time.className = 'jp-ClaudeSessionsPanel-rowTime';
+            time.textContent = this._formatRelativeTime(session.file_mtime);
+            row.appendChild(time);
+        }
         // No star in the Favorites section - every row there is a favorite
         // by definition; stars are an indicator only useful in Recent/All.
         if (session.favourite && sectionKey !== 'favourites') {
@@ -898,7 +904,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
         }
         const diff = Date.now() - epochMs;
         if (diff < 60000) {
-            return 'just now';
+            return 'now';
         }
         if (diff < 3600000) {
             return `${Math.floor(diff / 60000)}m ago`;
@@ -906,10 +912,15 @@ export class ClaudeCodeSessionsWidget extends Widget {
         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();
+        return `${Math.floor(diff / 86400000)}d ago`;
+    }
+    /** Branch entry display: conversation name plus short session id in
+     * brackets; branches share the project path so only the name and id
+     * distinguish them. Skips the suffix when the label already is the
+     * short id (the backend's last-resort fallback). */
+    _branchDisplayName(b) {
+        const shortId = b.session_id.slice(0, 8);
+        return b.label === shortId ? b.label : `${b.label} (${shortId})`;
     }
     _setRefreshSpinning(on) {
         if (!this._refreshBtn) {
@@ -1130,7 +1141,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
                         command: 'claude-code-sessions:switch-branch',
                         args: {
                             session_id: b.session_id,
-                            label: `${b.label} - ${this._formatRelativeTime(b.file_mtime)}`
+                            label: `${this._branchDisplayName(b)} - ${this._formatRelativeTime(b.file_mtime)}`
                         }
                     });
                 }
@@ -1187,7 +1198,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
                 row.title = `Session id: ${b.session_id}`;
                 const label = document.createElement('span');
                 label.className = 'jp-ClaudeSessionsPanel-branchLabel';
-                label.textContent = b.label;
+                label.textContent = this._branchDisplayName(b);
                 row.appendChild(label);
                 const time = document.createElement('span');
                 time.className = 'jp-ClaudeSessionsPanel-branchTime';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_claude_code_extension",
-    "version": "1.2.2",
+    "version": "1.2.5",
     "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/__tests__/jupyterlab_claude_code_extension.spec.ts

@@ -157,6 +157,20 @@ describe('launch spinner dismiss contract', () => {
       );
     });
 
+    it('branch entries render name plus short id via _branchDisplayName', () => {
+      const display = (widgetSrc.match(
+        /private _branchDisplayName[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(display).toMatch(/session_id\.slice\(0, 8\)/);
+      expect(display).toMatch(/`\$\{b\.label\} \(\$\{shortId\}\)`/);
+      expect(widgetSrc).toMatch(
+        /label: `\$\{this\._branchDisplayName\(b\)\} - \$\{this\._formatRelativeTime\(b\.file_mtime\)\}`/
+      );
+      expect(widgetSrc).toMatch(
+        /label\.textContent = this\._branchDisplayName\(b\)/
+      );
+    });
+
     it('More... popup filters by label or session id and switches on click', () => {
       const popup = (widgetSrc.match(
         /private _showBranchPopup[\s\S]*?\n  \}/
@@ -182,6 +196,23 @@ describe('launch spinner dismiss contract', () => {
       expect(switchBranch).toMatch(/Branch no longer exists/);
     });
 
+    it('shows last activity on session rows via the shared formatter', () => {
+      expect(widgetSrc).toMatch(
+        /jp-ClaudeSessionsPanel-rowTime[\s\S]*?_formatRelativeTime\(session\.file_mtime\)/
+      );
+    });
+
+    it('formats relative time as now / m / h / d ago, no date fallback', () => {
+      const fmt = (widgetSrc.match(
+        /private _formatRelativeTime[\s\S]*?\n  \}/
+      ) ?? [''])[0];
+      expect(fmt).toMatch(/return 'now'/);
+      expect(fmt).toMatch(/m ago/);
+      expect(fmt).toMatch(/h ago/);
+      expect(fmt).toMatch(/d ago/);
+      expect(fmt).not.toMatch(/toLocaleDateString/);
+    });
+
     it('warns when the resolved current differs from the requested branch', () => {
       expect(switchBranch).toMatch(
         /result\.current !== result\.requested[\s\S]*?Notification\.warning/

package/src/widget.ts

@@ -958,6 +958,13 @@ export class ClaudeCodeSessionsWidget extends Widget {
         : this._lookupName(session);
     row.appendChild(name);
 
+    if (session.file_mtime) {
+      const time = document.createElement('span');
+      time.className = 'jp-ClaudeSessionsPanel-rowTime';
+      time.textContent = this._formatRelativeTime(session.file_mtime);
+      row.appendChild(time);
+    }
+
     // No star in the Favorites section - every row there is a favorite
     // by definition; stars are an indicator only useful in Recent/All.
     if (session.favourite && sectionKey !== 'favourites') {
@@ -1050,7 +1057,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
     }
     const diff = Date.now() - epochMs;
     if (diff < 60_000) {
-      return 'just now';
+      return 'now';
     }
     if (diff < 3_600_000) {
       return `${Math.floor(diff / 60_000)}m ago`;
@@ -1058,10 +1065,16 @@ export class ClaudeCodeSessionsWidget extends Widget {
     if (diff < 86_400_000) {
       return `${Math.floor(diff / 3_600_000)}h ago`;
     }
-    if (diff < 30 * 86_400_000) {
-      return `${Math.floor(diff / 86_400_000)}d ago`;
-    }
-    return new Date(epochMs).toLocaleDateString();
+    return `${Math.floor(diff / 86_400_000)}d ago`;
+  }
+
+  /** Branch entry display: conversation name plus short session id in
+   * brackets; branches share the project path so only the name and id
+   * distinguish them. Skips the suffix when the label already is the
+   * short id (the backend's last-resort fallback). */
+  private _branchDisplayName(b: IBranch): string {
+    const shortId = b.session_id.slice(0, 8);
+    return b.label === shortId ? b.label : `${b.label} (${shortId})`;
   }
 
   private _setRefreshSpinning(on: boolean): void {
@@ -1316,7 +1329,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
             command: 'claude-code-sessions:switch-branch',
             args: {
               session_id: b.session_id,
-              label: `${b.label} - ${this._formatRelativeTime(b.file_mtime)}`
+              label: `${this._branchDisplayName(b)} - ${this._formatRelativeTime(b.file_mtime)}`
             }
           });
         }
@@ -1381,7 +1394,7 @@ export class ClaudeCodeSessionsWidget extends Widget {
 
         const label = document.createElement('span');
         label.className = 'jp-ClaudeSessionsPanel-branchLabel';
-        label.textContent = b.label;
+        label.textContent = this._branchDisplayName(b);
         row.appendChild(label);
 
         const time = document.createElement('span');

package/style/base.css

@@ -346,3 +346,11 @@
   color: var(--jp-ui-font-color2);
   font-size: var(--jp-ui-font-size0);
 }
+
+/* Last-activity time on session rows - dim, right of the name. */
+.jp-ClaudeSessionsPanel-rowTime {
+  flex: 0 0 auto;
+  margin-left: 6px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}