feat(dashboard): label column "Title", 160px min-width; extension retry + 20s timeout (#147)

Addressing test feedback:
- Rename the user-facing column header (and CSV) from "Topic" to "Title" to
  match Claude Code's own custom-title / ai-title records. The internal
  sessions.topic column and s.topic data key are unchanged.
- Give the column a 160px min-width (border-box, padding included) so short
  titles don't collapse it; long titles still wrap and cap at 260px.
- VS Code extension: bump the dashboard readiness timeout 10s -> 20s (the
  one-time topic backfill can slow the first cold start) and add a Retry
  button — both as an action on the failure notification and a persistent
  button on the panel (command: URI; enableCommandUris enabled).

Tests: +1 sidebar test for the retry link.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: phuryn

CHANGELOG.md

@@ -4,7 +4,11 @@
 
 ### Dashboard
 
-- Added a **Topic** column to the Recent Sessions table (placed after Project) and its CSV export, derived from Claude Code's own session titles: a user-set `custom-title` takes priority over an AI-generated `ai-title`. Long topics wrap within the column. Sessions without a title record show an empty Topic — there is no fallback to the first user message, so prompt text never leaks into the table (#147, thanks @arojunior).
+- Added a **Title** column to the Recent Sessions table (after Project) and its CSV export, showing Claude Code's own session title: a user-set `custom-title` takes priority over an AI-generated `ai-title`. Long titles wrap within the column (min width 160px). Sessions without a title record show an empty cell — there is no fallback to the first user message, so prompt text never leaks into the table (#147, thanks @arojunior).
+
+### VS Code extension
+
+- The embedded dashboard now waits up to **20s** (was 10s) for the server to become ready on cold start — the one-time topic backfill can slow the first launch — and a failed start now offers a **Retry** button (both in the error notification and on the panel) instead of only pointing at the command palette (#147).
 
 ### Scanner
 

dashboard.py

@@ -359,7 +359,7 @@ def get_dashboard_data(db_path=DB_PATH):
   .cost-na { color: var(--muted); font-family: monospace; font-size: 11px; }
   .num { font-family: monospace; }
   .muted { color: var(--muted); }
-  .topic-cell { max-width: 260px; overflow-wrap: anywhere; font-size: 12px; color: var(--text); }
+  .topic-cell { box-sizing: border-box; min-width: 160px; max-width: 260px; overflow-wrap: anywhere; font-size: 12px; color: var(--text); }
   .section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
   .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
   .section-header .section-title { margin-bottom: 0; }
@@ -570,7 +570,7 @@ def get_dashboard_data(db_path=DB_PATH):
       <thead><tr>
         <th>Session</th>
         <th>Project</th>
-        <th>Topic</th>
+        <th>Title</th>
         <th class="sortable" onclick="setSessionSort('last')">Last Active <span class="sort-icon" id="sort-icon-last"></span></th>
         <th class="sortable" onclick="setSessionSort('duration_min')">Duration <span class="sort-icon" id="sort-icon-duration_min"></span></th>
         <th>Model</th>
@@ -1841,7 +1841,7 @@ def get_dashboard_data(db_path=DB_PATH):
 }
 
 function exportSessionsCSV() {
-  const header = ['Session', 'Project', 'Topic', 'Last Active', 'Duration (min)', 'Model', 'Turns', 'Input', 'Output', 'Cache Read', 'Cache Creation', 'Est. Cost'];
+  const header = ['Session', 'Project', 'Title', 'Last Active', 'Duration (min)', 'Model', 'Turns', 'Input', 'Output', 'Cache Read', 'Cache Creation', 'Est. Cost'];
   const rows = lastFilteredSessions.map(s => {
     const cost = calcCost(s.model, s.input, s.output, s.cache_read, s.cache_creation);
     return [s.session_id, s.project, s.topic, s.last, s.duration_min, s.model, s.turns, s.input, s.output, s.cache_read, s.cache_creation, cost.toFixed(4)];

vscode-extension/src/extension.ts

@@ -146,6 +146,10 @@ class Extension {
       args: spawnArgs.args,
       url: probeUrl,
       output: this.toSink(),
+      // Cold start can be slow the first time: spawning Python, opening the DB,
+      // and (once, after upgrade) backfilling session topics across the whole
+      // history before /api/data answers. Give it 20s before giving up.
+      readinessTimeoutMs: 20_000,
     });
     this.server = manager;
     try {
@@ -155,9 +159,14 @@ class Extension {
       const msg = `Failed to start dashboard: ${(err as Error).message}`;
       this.output.appendLine(msg);
       this.sidebar.setStatus(msg);
-      vscode.window.showErrorMessage(msg);
       manager.dispose();
       if (this.server === manager) this.server = undefined;
+      // Offer a one-click retry (and log access) rather than making the user
+      // hunt for the command palette. The sidebar also shows a Retry button.
+      void vscode.window.showErrorMessage(msg, "Retry", "Show Logs").then((choice) => {
+        if (choice === "Retry") void this.openDashboard();
+        else if (choice === "Show Logs") this.output.show();
+      });
     }
   }
 

vscode-extension/src/sidebar.ts

@@ -63,12 +63,15 @@ export function renderHtml(
   p { color: #BFBFBF; font-size: 13px; margin: 0 0 8px; }
   p.hint { color: #6F6F70; }
   code { background: #1E1F20; border: 1px solid #2C2D2E; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
+  a.retry { display: inline-block; margin: 6px 0 14px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #161617; background: #BFBFBF; border-radius: 6px; text-decoration: none; }
+  a.retry:hover { background: #D8D8D8; }
 </style>
 </head>
 <body>
 <div class="brand">${logo}<h1>Claude Code Usage</h1></div>
 <p>${escapeHtml(statusText) || "The dashboard server is not running yet."}</p>
-<p class="hint">Run <code>Claude Usage: Open Dashboard</code> from the command palette to start it.</p>
+<p><a class="retry" href="command:claudeUsage.open">&#8635; Retry</a></p>
+<p class="hint">Or run <code>Claude Usage: Open Dashboard</code> from the command palette.</p>
 </body>
 </html>`;
 }
@@ -113,7 +116,10 @@ export class DashboardSidebar implements vscode.WebviewViewProvider {
 
   resolveWebviewView(view: vscode.WebviewView): void {
     this.view = view;
-    view.webview.options = { enableScripts: true };
+    // enableCommandUris lets the status pane's "Retry" link invoke
+    // claudeUsage.open via a command: URI. The pane renders only our own
+    // trusted HTML (statusText is escaped), so allowing command URIs is safe.
+    view.webview.options = { enableScripts: true, enableCommandUris: true };
     // Resolve a webview-safe URI for the bundled icon so the status pane shows
     // the same logo as the dashboard header. Guarded so node-only tests (whose
     // fake view has no asWebviewUri / no vscode.Uri) don't blow up.

vscode-extension/test/sidebar.test.ts

@@ -117,6 +117,12 @@ describe("renderHtml with null URL (status pane)", () => {
     expect(html).not.toContain("frame-src");
   });
 
+  it("offers a Retry button that invokes the open command", () => {
+    const html = renderHtml(null, "Failed to start dashboard: timed out", NONCE);
+    expect(html).toContain('href="command:claudeUsage.open"');
+    expect(html).toContain("Retry");
+  });
+
   it("renders the logo and an img-src CSP when an icon URI is provided", () => {
     const html = renderHtml(null, "", NONCE, "https://host/icon.svg", "vscode-webview://abc");
     expect(html).toContain('class="logo"');