claude-mission-control 1.20.0 → 1.22.0

package/lib/collector.js

@@ -621,6 +621,7 @@ class Collector {
     const sessionDays = [];
     let sessionTotal = 0;
     let costTotal = 0;
+    const liveIds = new Set(this.raw.live.map((s) => s.sessionId));
     const dayCut = Date.now() - 24 * 3600000;
     const timeline = [];
     const weekDayKey = dayKey(weekCut);
@@ -634,12 +635,14 @@ class Collector {
     let weekCacheAll = 0;
     for (const g of this.raw.transcriptGroups.values()) {
       if (isIgnored(g.path)) continue;
-      sessionTotal += g.sessions.length;
       const projModels = {};
       for (const m of g.sessions) {
         const mDays = combinedDays(m);
         sessionDays.push(mDays);
-        if (m.lastActivityAt >= dayCut) {
+        // Automated and empty sessions count toward spend, not toward sessions.
+        const real = !sessionKind(m, liveIds.has(m.sessionId));
+        if (real) sessionTotal++;
+        if (real && m.lastActivityAt >= dayCut) {
           timeline.push({
             project: friendlyName(g.path),
             sessionId: m.sessionId,
@@ -649,7 +652,7 @@ class Collector {
           });
         }
         if (m.lastActivityAt >= weekCut) {
-          weekSessions++;
+          if (real) weekSessions++;
           if (m.waits) for (let i = 0; i < 4; i++) weekWaits[i] += m.waits[i];
           let mWeekCost = 0;
           for (const [day, byM] of Object.entries(mDays)) {
@@ -675,7 +678,7 @@ class Collector {
           mCost += cost;
           projModels[model] = (projModels[model] || 0) + cost;
         }
-        topCandidates.push({
+        if (real) topCandidates.push({
           sessionId: m.sessionId,
           title: this.titleOf(m).title,
           projectName: friendlyName(g.path),
@@ -726,9 +729,12 @@ class Collector {
   fameSessions() {
     const pricing = readPricing();
     const out = [];
+    const liveIds = new Set(this.raw.live.map((s) => s.sessionId));
     for (const g of this.raw.transcriptGroups.values()) {
       if (isIgnored(g.path)) continue;
       for (const m of g.sessions) {
+        // A one-shot claude -p run that starts as a session ends would claim its commits.
+        if (sessionKind(m, liveIds.has(m.sessionId))) continue;
         const ts = toolSummary(m.tools);
         out.push({
           sessionId: m.sessionId,

package/lib/transcripts.js

@@ -154,7 +154,7 @@ async function scanFile(abs, sessionIdFromName) {
     }
     if (meta.firstUserPrompt === null) {
       const text = extractUserText(rec);
-      if (text) meta.firstUserPrompt = text.slice(0, 120);
+      if (text) meta.firstUserPrompt = text.slice(0, 300); // room for tidyPromptTitle to drop a preamble
     }
     if (meta.cwd && meta.startedAt && meta.firstUserPrompt) break;
   }
@@ -655,12 +655,48 @@ function dailyCostSeries(daysList, numDays, today = Date.now(), pricing = null)
 // Best display title for a session, with its provenance.
 // `custom` is a user-set name from config.json (sessionNames); it wins over
 // anything derived from the transcript.
+// A prompt reads badly as a title when it opens with where the work is:
+// "In /Users/x/site/deploy.sh, the rsync flag…" or "In the Foo monorepo at
+// `path` (branch y), the…". The card already names the project, so drop that
+// clause, keep a file name it pointed at, and shorten home paths to ~/.
+const LOCATION_WORDS = /\b(repo|repository|monorepo|project|folder|directory|codebase|theme|plugin|package|workspace)\b/i;
+const homePaths = (t) => t.replace(/\/(?:Users|home)\/[^/\s]+\//g, '~/');
+
+function leadingClauseEnd(t) {
+  let depth = 0, quote = null;
+  for (let i = 3; i < t.length; i++) {
+    const c = t[i];
+    if (quote) { if (c === quote) quote = null; continue; }
+    if (c === '`' || c === '"') quote = c;
+    else if ('([{'.includes(c)) depth++;
+    else if (')]}'.includes(c)) depth = Math.max(0, depth - 1);
+    else if ((c === ',' || c === ':') && depth === 0 && (i + 1 === t.length || t[i + 1] === ' ')) return i;
+  }
+  return -1;
+}
+
+function tidyPromptTitle(text) {
+  const t = String(text || '');
+  if (/^In /.test(t)) {
+    const end = leadingClauseEnd(t);
+    const clause = end > 0 ? t.slice(3, end) : '';
+    if (clause && (clause.includes('/') || LOCATION_WORDS.test(clause))) {
+      const rest = t.slice(end + 1).trim();
+      if (rest.length >= 8) {
+        const file = /\/([\w.-]+\.[a-z][a-z0-9]{0,5})(?=[\s`"'),]|$)/i.exec(clause);
+        return homePaths(file ? `${file[1]}: ${rest}` : rest);
+      }
+    }
+  }
+  return homePaths(t);
+}
+
 function sessionTitle(meta, customNames) {
   const custom = customNames && customNames[meta.sessionId];
   if (custom) return { title: custom, source: 'custom' };
   if (meta.aiTitle) return { title: meta.aiTitle, source: 'ai-title' };
-  if (meta.firstUserPrompt) return { title: meta.firstUserPrompt, source: 'first-prompt' };
-  if (meta.lastPrompt) return { title: meta.lastPrompt, source: 'last-prompt' };
+  if (meta.firstUserPrompt) return { title: tidyPromptTitle(meta.firstUserPrompt).slice(0, 120), source: 'first-prompt' };
+  if (meta.lastPrompt) return { title: tidyPromptTitle(meta.lastPrompt).slice(0, 120), source: 'last-prompt' };
   return { title: meta.sessionId.slice(0, 8), source: 'session-id' };
 }
 
@@ -685,7 +721,7 @@ function groupByProject(sessions) {
 }
 
 module.exports = {
-  scanAllTranscripts, scanFile, groupByProject, sessionTitle, sessionKind, combinedUsage, mergeUsage,
+  scanAllTranscripts, scanFile, groupByProject, sessionTitle, tidyPromptTitle, sessionKind, combinedUsage, mergeUsage,
   scanLine, mergeDays, combinedDays, dailyCostSeries, subagentSummary, usageBreakdown, dayKey, contextSummary, toolSummary,
   waitingReason, reasonText, shouldReadMeta, TOOL_RING,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-mission-control",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "Local dashboard for Claude Code: live sessions, transcripts, costs, git status — all your projects in one place.",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -950,6 +950,34 @@
   #palette-list li.sel .pl { color: var(--accent); }
   #palette-empty { color: var(--faint); font-size: 12px; padding: 12px 16px; }
 
+  /* ---------- first-run guide ---------- */
+  #guide {
+    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+    padding: 16px 18px 14px; margin-bottom: 22px;
+  }
+  #guide .g-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
+  #guide .g-head h2 { font-size: 14px; font-weight: 600; }
+  #guide .g-head .g-sub { color: var(--faint); font-size: 12.5px; }
+  #guide .g-head .spacer { flex: 1; }
+  #guide .g-done {
+    font: 500 12.5px var(--ui-font); color: var(--amber-ink); background: var(--accent);
+    border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer;
+  }
+  #guide .g-done:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+  #guide .g-grid { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+  #guide .g-item { font-size: 13px; color: var(--muted); line-height: 1.5; }
+  #guide .g-item b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
+  #guide .g-lamps { gap: 6px; }
+  #guide .g-lamps li { align-items: flex-start; }
+  #guide .g-lamps .flap { flex: none; min-width: 84px; justify-content: center; }
+  #guide kbd {
+    font-size: 11.5px; color: var(--ink); background: var(--surface2);
+    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
+  }
+  #guide .g-icons { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
+  #guide .g-icons li { display: flex; align-items: center; gap: 8px; }
+  #guide .g-icons svg { flex: none; color: var(--ink); }
+
   /* welcome card for fresh installs */
   #welcome {
     grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line);
@@ -976,7 +1004,7 @@
     header .spacer, #open-pref-wrap { display: none; } /* opening terminals is a desk thing; still in settings */
     #quota { order: 10; flex: 1 1 100%; flex-wrap: wrap; gap: 8px 14px; }
     .meter .bar { width: 52px; }
-    #live { padding: 12px 16px; }
+    #live { padding: 12px 16px; position: static; } /* a sticky rail would cover most of a phone screen */
     main { padding: 14px 16px; }
     .dep-row { grid-template-columns: 1fr; padding: 10px 12px; }
     .dep-proj { font-size: 15px; }
@@ -1031,6 +1059,7 @@
 
 <section id="live"></section>
 <main>
+  <section id="guide" hidden aria-label="How to read this board"></section>
   <div id="pinned" hidden></div>
   <div id="git-attn" hidden></div>
   <details id="digest" open>
@@ -1623,7 +1652,7 @@ function render(state) {
     : `<div id="welcome">
         <h2><span class="tilde">❯</span> Welcome to Claude Mission Control</h2>
         <p>No Claude Code projects found yet. Run <code>claude</code> in any folder and it appears here automatically — live status, transcripts, git state, costs, the lot.</p>
-        <p>Tip: press <code>⌘K</code> to jump anywhere, <code>/</code> to search, and click ⚙ for settings.</p>
+        <p>Tip: press <code>⌘K</code> to jump anywhere, <code>/</code> to search, and <code>?</code> for a quick guide.</p>
       </div>`);
   const d = $('#dormant');
   d.hidden = dormant.length === 0;
@@ -3761,6 +3790,7 @@ function paletteItems(q) {
   const items = [];
   const st = lastState || { projects: [], liveSessions: [] };
   items.push({ k: '⚙', label: 'Settings', hint: 'rename, hide, terminal, notifications', run: openSettings });
+  items.push({ k: '?', label: 'Show the guide', hint: 'what the lamps, rows and buttons do', run: () => { showGuide(true, true); window.scrollTo({ top: 0 }); } });
   items.push({ k: '▦', label: 'Mission Control', hint: 'every live session at once', run: openMissionControl });
   items.push({ k: '⬢', label: 'Hive', hint: 'live sessions as characters · who is winning', run: openHive });
   items.push({ k: '★', label: 'Hall of Fame', hint: 'your best sessions by award · share cards', run: () => openFame() });
@@ -3864,6 +3894,58 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
+// ---------- first-run guide: shown until dismissed, back with ? or the palette ----------
+const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function guideSeen() { try { return localStorage.getItem('guideSeen') === '1'; } catch { return true; } }
+function renderGuide() {
+  const icon = (id) => $(`#${id} svg`)?.outerHTML || '';
+  const mod = isMac ? '⌘' : 'Ctrl';
+  return `<div class="g-head">
+      <h2>How to read this board</h2>
+      <span class="g-sub">Press <kbd>?</kbd> to bring this back.</span>
+      <span class="spacer"></span>
+      <button class="g-done" id="guide-done">Got it</button>
+    </div>
+    <div class="g-grid">
+      <div class="g-item"><b>Status lamps</b>
+        <ul class="g-icons g-lamps">
+          <li><span class="flap st st-waiting">needs you</span> Claude is waiting on you. What it's asking shows under the title.</li>
+          <li><span class="flap st st-busy">busy</span> Claude is working.</li>
+        </ul></div>
+      <div class="g-item"><b>Sessions</b>
+        Click a session title to read its transcript, live if it's running. Hover a row to rename it, open it in your terminal, or copy its resume command.</div>
+      <div class="g-item"><b>Find anything</b>
+        <kbd>${mod}</kbd> <kbd>K</kbd> jumps to any project, session or view. <kbd>/</kbd> searches inside every transcript. Click a project name for its details.</div>
+      <div class="g-item"><b>Top-right buttons</b>
+        <ul class="g-icons">
+          <li>${icon('mc-btn')} Mission Control: every live session side by side</li>
+          <li>${icon('hive-btn')} Hive: live sessions ranked, plus Hall of Fame</li>
+          <li>${icon('bell-btn')} Catch up on what happened while you were away</li>
+          <li>${icon('gear')} Settings, themes and your phone view</li>
+        </ul></div>
+    </div>`;
+}
+function showGuide(show, focus = false) {
+  const g = $('#guide');
+  if (show) {
+    g.innerHTML = renderGuide();
+    g.hidden = false;
+    if (focus) $('#guide-done').focus({ preventScroll: true });
+  } else g.hidden = true;
+}
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('#guide-done')) return;
+  try { localStorage.setItem('guideSeen', '1'); } catch {}
+  showGuide(false);
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key !== '?' || e.metaKey || e.ctrlKey || /^(INPUT|TEXTAREA|SELECT)$/.test(document.activeElement?.tagName || '')) return;
+  e.preventDefault();
+  showGuide($('#guide').hidden, true);
+  if (!$('#guide').hidden) window.scrollTo({ top: 0 });
+});
+if (!guideSeen()) showGuide(true);
+
 poll();
 connect();
 setInterval(poll, 60_000);