ccakashic 0.3.1 → 0.4.0

package/README.md

@@ -36,6 +36,10 @@ A local HTTP server starts and your browser opens automatically.
 - **Waiting-for-you indicator** — Sessions cmux is notifying you about (an **unread** "Claude is waiting for your input" / "needs your permission") get an orange frame and a `⏳ Your turn` / `🔐 Permission` badge. cmux marks the notification read the moment you focus that workspace, so the highlight **self-clears** on the next poll once you open the tab — it mirrors cmux's own badge exactly. The browser tab title shows the count (`(2) ccakashic`) and the favicon turns orange, so a glance at the tab tells you how many sessions need you. (Requires cmux; covers sessions resumed through ccakashic, which are tracked in the resume map.)
 - **Fully browser-based** — Dashboard → Project list → Session list → Conversation detail
 - **Chat-style layout** — User / assistant messages in chat bubbles
+- **Show only the conversation** — A `Show` row in the session header toggles each kind of noise off: `Tools`, `Injected`, `Thinking`, `Shell`, `System`, `Cost`. `Chat only` strips a session down to what was asked and answered; the choice is remembered across sessions
+- **Real prompts vs. injected text** — A `user` record in the log is not necessarily something you typed: hook feedback, skill bodies, task notifications and compaction summaries are all fed to the model in the user role. Those are labelled (`HOOK FEEDBACK`, `SKILL`, `TASK NOTIFICATION`, …) and collapsed into their own row instead of sharing your chat bubble
+- **Jump between your own prompts** — A pager in the corner (`▲ 11 / 31 ▼`, or `p` / `n`) moves through the prompts you actually typed and tracks where you are as you scroll
+- **Sticky session header** — Title, branch, model, Resume buttons and the filters stay on screen, condensing to a thin strip as you scroll
 - **Collapsible tool calls** — Bash, Read, Edit, and other tool invocations collapsed by default
 - **Diff view** — File edits shown with red/green line highlights
 - **Date navigation** — Side nav and sticky headers to jump between dates
@@ -47,7 +51,7 @@ A local HTTP server starts and your browser opens automatically.
 - **Session-level stats** — Estimated cost, turns, token breakdown, cache hit rate, and duration in the header
 - **Dark mode** — Follows `prefers-color-scheme` automatically
 - **Filter search** — Incremental filtering on list pages
-- **Keyboard navigation** — `j` / `k` to move between messages
+- **Keyboard navigation** — `j` / `k` to move between messages, `p` / `n` to move between your own prompts
 - **One-click resume in cmux** — `▶ Resume` spawns a [cmux](https://github.com/manaflow-ai/cmux) workspace that runs `cd <session cwd> && claude --resume <id>`; `📋 Copy` copies the same command for any terminal
 - **Zero dependencies** — Node.js built-in modules only
 

package/dist/html-generator.js

@@ -112,6 +112,10 @@ function renderDiff(patches) {
     lines.push('</div>');
     return lines.join('\n');
 }
+function firstLine(text, max) {
+    const flat = (text || '').replace(/\s+/g, ' ').trim();
+    return flat.length > max ? flat.slice(0, max) + '…' : flat;
+}
 function msgId(ts) {
     if (!ts)
         return `msg-${Date.now()}${Math.random().toString(36).slice(2, 5)}`;
@@ -151,6 +155,14 @@ function renderMessage(msg) {
     const itemBadge = makeItemBadge(msg);
     switch (msg.type) {
         case 'user':
+            // Text the harness injected in the user role (hook output, skill bodies,
+            // task notifications, …) is not part of the conversation, so it gets a
+            // collapsed row instead of the user's bubble.
+            if (msg.injected) {
+                const label = (0, util_1.escapeHtml)(msg.injectedKind || 'Injected');
+                const peek = (0, util_1.escapeHtml)(firstLine(msg.text, 120));
+                return `<div class="msg msg-injected" id="${id}"><details><summary>${time}<span class="injected-label">${label}</span><span class="injected-peek">${peek}</span></summary><div class="injected-body" data-markdown>${(0, util_1.escapeHtml)(msg.text)}</div></details>${turnBadge ? `<div class="tool-usage-row">${turnBadge}</div>` : ''}</div>`;
+            }
             return `<div class="msg msg-user" id="${id}">${time}<div class="msg-content" data-markdown>${(0, util_1.escapeHtml)(msg.text)}</div>${turnBadge}</div>`;
         case 'assistant':
             return `<div class="msg msg-assistant" id="${id}">${time}<div class="msg-content" data-markdown>${(0, util_1.escapeHtml)(msg.text)}</div>${itemBadge ? `<div>${itemBadge}</div>` : ''}</div>`;
@@ -294,6 +306,27 @@ function renderStats(stats) {
     }
     return `<div class="stats-bar">${items.join('')}</div>`;
 }
+// Toggles for the noisier parts of a thread. The chat itself (user +
+// assistant) is never filtered — these only hide the surrounding machinery, so
+// a reader who mostly wants the conversation can strip it down. Choices are
+// persisted client-side (localStorage) so they survive navigation.
+const MESSAGE_FILTERS = [
+    { key: 'tools', label: 'Tools', title: 'Tool calls, their output, and inlined subagent conversations' },
+    { key: 'injected', label: 'Injected', title: 'Text fed to the model in the user role: hook output, skill bodies, task notifications, compaction summaries' },
+    { key: 'thinking', label: 'Thinking', title: 'Thinking indicators' },
+    { key: 'shell', label: 'Shell', title: 'Local ! commands and their output' },
+    { key: 'system', label: 'System', title: 'System messages' },
+    { key: 'cost', label: 'Cost', title: 'Token and cost badges' },
+];
+function filterBarHtml() {
+    const chips = MESSAGE_FILTERS.map(f => `<label class="filter-chip" title="${(0, util_1.escapeHtml)(f.title)}"><input type="checkbox" data-filter="${f.key}" checked>${(0, util_1.escapeHtml)(f.label)}</label>`).join('');
+    return `<div class="detail-filters" id="detailFilters">
+  <span class="detail-filters-label">Show</span>
+  ${chips}
+  <button type="button" class="filter-preset-btn" data-preset="chat" title="Hide everything except the conversation">Chat only</button>
+  <button type="button" class="filter-preset-btn" data-preset="all" title="Show everything">Show all</button>
+</div>`;
+}
 function generate(parsed, options = {}) {
     const { projectName, projectRawName, session, backUrl, resume } = options;
     const resumeButtons = session?.id && projectRawName
@@ -318,7 +351,7 @@ function generate(parsed, options = {}) {
         .filter(g => g.date !== 'unknown')
         .map(g => `<a class="detail-sidenav-item" href="#date-${g.date}" data-date="${(0, util_1.escapeHtml)(g.date)}">${(0, util_1.escapeHtml)(g.date)}</a>`).join('\n');
     const backLink = backUrl
-        ? `<div style="font-size:0.8rem;margin-bottom:8px"><a href="${(0, util_1.escapeHtml)(backUrl)}" style="color:var(--link);text-decoration:none">&larr; Back to sessions</a> &nbsp;|&nbsp; <a href="/" style="color:var(--link);text-decoration:none">Dashboard</a> &nbsp;|&nbsp; <a href="/projects" style="color:var(--link);text-decoration:none">All projects</a></div>`
+        ? `<div class="detail-backlink"><a href="${(0, util_1.escapeHtml)(backUrl)}">&larr; Back to sessions</a> &nbsp;|&nbsp; <a href="/">Dashboard</a> &nbsp;|&nbsp; <a href="/projects">All projects</a></div>`
         : '';
     return `<!DOCTYPE html>
 <html lang="en">
@@ -333,7 +366,7 @@ ${(0, resume_ui_1.resumeCSS)()}
 </head>
 <body>
 <a href="https://github.com/ashimon83/ccakashic" class="github-corner" aria-label="View source on GitHub" target="_blank" rel="noopener"><svg width="70" height="70" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
-<div class="detail-sticky-bar" id="detailStickyBar"></div>
+<div class="session-header-bar" id="sessionHeaderBar">
 <header class="session-header">
   ${backLink}
   <h1>${(0, util_1.escapeHtml)(title)}</h1>
@@ -345,7 +378,9 @@ ${(0, resume_ui_1.resumeCSS)()}
   </div>
   ${resumeButtons}
   ${renderStats(parsed.stats)}
+  ${filterBarHtml()}
 </header>
+</div>
 <div class="detail-layout">
   <nav class="detail-sidenav" id="detailSidenav">
     <div class="detail-sidenav-title">Dates</div>
@@ -363,8 +398,15 @@ ${(0, resume_ui_1.resumeCSS)()}
   <div id="session-bottom"></div>
   </main>
 </div>
+<div class="msg-pager" id="msgPager" hidden title="Jump between your own messages (p / n)">
+  <button type="button" class="msg-pager-btn" data-dir="-1" aria-label="Previous message of yours">&#9650;</button>
+  <span class="msg-pager-count" id="msgPagerCount">&ndash;</span>
+  <button type="button" class="msg-pager-btn" data-dir="1" aria-label="Next message of yours">&#9660;</button>
+</div>
 <script>${(0, template_assets_1.getAppJS)()}
 ${detailNavJS()}
+${messageFilterJS()}
+${msgPagerJS()}
 ${(0, resume_ui_1.resumeJS)(resume)}
 </script>
 </body>
@@ -372,6 +414,242 @@ ${(0, resume_ui_1.resumeJS)(resume)}
 }
 function detailLayoutCSS() {
     return `
+/* Sticky session header. The bar spans the full width (so nothing scrolls
+   past it at the edges) while the header inside keeps its centred column.
+   --header-h is kept in sync by JS and is what the date headings, the side
+   nav and anchor scrolling offset themselves against. */
+.session-header-bar {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+.session-header-bar .session-header {
+  border-bottom: none;
+  padding: 20px 16px 12px;
+}
+/* Past the first scroll the header sheds its bulkier rows so it stays a thin
+   strip; the title, meta, resume buttons and filters remain reachable. */
+.session-header-bar.is-condensed {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
+}
+.session-header-bar.is-condensed .session-header {
+  padding: 6px 16px 8px;
+}
+.session-header-bar.is-condensed .detail-backlink,
+.session-header-bar.is-condensed .stats-bar {
+  display: none;
+}
+.session-header-bar.is-condensed h1 {
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.session-header-bar.is-condensed .session-meta {
+  margin-top: 2px;
+  font-size: 0.75rem;
+  gap: 12px;
+}
+.session-header-bar.is-condensed .resume-actions,
+.session-header-bar.is-condensed .detail-filters {
+  margin-top: 6px;
+}
+
+.detail-backlink {
+  font-size: 0.8rem;
+  margin-bottom: 8px;
+}
+.detail-backlink a {
+  color: var(--link);
+  text-decoration: none;
+}
+.detail-backlink a:hover { text-decoration: underline; }
+
+/* Message-type filters */
+.detail-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  margin-top: 10px;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+.detail-filters-label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  font-size: 0.65rem;
+}
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-secondary);
+  color: var(--text);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.15s, opacity 0.15s;
+}
+.filter-chip:hover { border-color: var(--link); }
+.filter-chip input {
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--link);
+}
+.filter-chip:has(input:not(:checked)) {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+.filter-preset-btn {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+  background: var(--tool-bg);
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.filter-preset-btn:hover {
+  border-color: var(--link);
+  background: var(--bg-secondary);
+}
+
+/* Injected user-role text (hook output, skill bodies, notifications). Kept
+   full width and visually apart from the user's own bubble, and collapsed —
+   these run long and are read only when something looks off. */
+.msg-injected {
+  align-self: center;
+  width: 100%;
+  max-width: 92%;
+  padding: 0;
+  background: var(--tool-bg);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.msg-injected summary {
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+  list-style: none;
+  transition: background 0.15s;
+}
+.msg-injected summary::-webkit-details-marker { display: none; }
+.msg-injected summary::before {
+  content: '\\25B6';
+  font-size: 0.6rem;
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+.msg-injected details[open] > summary::before { transform: rotate(90deg); }
+.msg-injected summary:hover { background: var(--bg-secondary); }
+.msg-injected .timestamp { flex-shrink: 0; margin-bottom: 0; }
+.injected-label {
+  flex-shrink: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-secondary);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.injected-peek {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.8;
+}
+.injected-body {
+  border-top: 1px dashed var(--border);
+  padding: 12px 14px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+/* What each filter hides. User and assistant messages are never touched. */
+body.hide-injected .msg-injected,
+body.hide-tools .msg-tool,
+body.hide-thinking .msg-thinking,
+body.hide-shell .msg-local-cmd,
+body.hide-system .msg-system {
+  display: none;
+}
+body.hide-cost .turn-usage,
+body.hide-cost .item-usage,
+body.hide-cost .tool-usage-row {
+  display: none;
+}
+
+/* Pager over the user's own prompts. Always on screen, because finding "what
+   did I actually ask here" is the main reason to open a long session. */
+.msg-pager {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 150;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
+}
+.msg-pager[hidden] { display: none; }
+.msg-pager-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6rem;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.msg-pager-btn:hover {
+  background: var(--user-bg);
+  color: var(--text);
+}
+.msg-pager-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+  background: transparent;
+}
+.msg-pager-count {
+  min-width: 48px;
+  text-align: center;
+  font-size: 0.72rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+  user-select: none;
+}
+
+/* Anchors (timestamp links, date jumps) must clear the sticky header. */
+.msg, .detail-date-group {
+  scroll-margin-top: calc(var(--header-h, 60px) + 44px);
+}
+
 .detail-layout {
   display: flex;
   max-width: 1100px;
@@ -437,9 +715,9 @@ function detailLayoutCSS() {
   width: 140px;
   flex-shrink: 0;
   position: sticky;
-  top: 48px;
+  top: calc(var(--header-h, 60px) + 8px);
   align-self: flex-start;
-  max-height: calc(100vh - 60px);
+  max-height: calc(100vh - var(--header-h, 60px) - 20px);
   overflow-y: auto;
   padding: 16px 8px 16px 16px;
   border-right: 1px solid var(--border);
@@ -486,7 +764,7 @@ function detailLayoutCSS() {
   border-bottom: 2px solid var(--border);
   margin-bottom: 12px;
   position: sticky;
-  top: 44px;
+  top: var(--header-h, 60px);
   background: var(--bg);
   z-index: 5;
 }
@@ -497,60 +775,241 @@ function detailLayoutCSS() {
   gap: 28px;
 }
 
-/* Sticky date bar */
-.detail-sticky-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  padding: 8px 24px;
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--text);
-  transform: translateY(-100%);
-  transition: transform 0.2s;
-}
-.detail-sticky-bar.visible {
-  transform: translateY(0);
-}
-
 @media (max-width: 768px) {
   .detail-sidenav { display: none; }
   .detail-layout { display: block; }
+  /* On a phone the condensed header is competing with the thread for height;
+     the meta row wraps to two lines, so drop it and keep title + filters. */
+  .session-header-bar.is-condensed .session-meta { display: none; }
 }
 `;
 }
 function detailNavJS() {
     return `
 (function() {
+  var bar = document.getElementById('sessionHeaderBar');
   var groups = Array.from(document.querySelectorAll('.detail-date-group'));
-  var bar = document.getElementById('detailStickyBar');
-  var navItems = Array.from(document.querySelectorAll('.detail-sidenav-item'));
-  if (!groups.length) return;
+  var navItems = Array.from(document.querySelectorAll('.detail-sidenav-item[data-date]'));
+
+  // Everything that has to clear the sticky header reads --header-h, so it has
+  // to follow the header through condensing, resizes and font/wrap changes.
+  function syncHeaderHeight() {
+    if (bar) document.documentElement.style.setProperty('--header-h', bar.offsetHeight + 'px');
+  }
+  syncHeaderHeight();
+  if (bar && window.ResizeObserver) new ResizeObserver(syncHeaderHeight).observe(bar);
+  window.addEventListener('resize', syncHeaderHeight);
+  window.ccakashicSyncHeaderHeight = syncHeaderHeight;
 
   function update() {
-    var scrollY = window.scrollY + 60;
+    if (bar) {
+      // Hysteresis: condensing shortens the header, which nudges the scroll
+      // position — a single threshold would flip back and forth on it.
+      var condensed = bar.classList.contains('is-condensed');
+      var next = condensed ? window.scrollY > 24 : window.scrollY > 72;
+      if (next !== condensed) {
+        bar.classList.toggle('is-condensed', next);
+        syncHeaderHeight();
+      }
+    }
+    if (!groups.length) return;
+    var offset = window.scrollY + (bar ? bar.offsetHeight : 0) + 20;
     var current = null;
     for (var i = 0; i < groups.length; i++) {
-      if (groups[i].offsetTop <= scrollY) current = groups[i];
+      if (groups[i].style.display !== 'none' && groups[i].offsetTop <= offset) current = groups[i];
     }
     var date = current ? current.dataset.date : '';
-    if (date) {
-      bar.textContent = date;
-      bar.classList.add('visible');
-    } else {
-      bar.classList.remove('visible');
-    }
     navItems.forEach(function(a) {
       a.classList.toggle('active', a.dataset.date === date);
     });
   }
 
+  // A sticky element keeps its box in the flow, so when the header condenses
+  // everything below it shifts up by the height it lost. A jump computed
+  // against the expanded layout therefore lands short — by the full delta when
+  // jumping from the top of the page. Nudge the target until it actually sits
+  // at its scroll-margin offset. Shared with the prompt pager below.
+  // update() runs first so the condense state and --header-h are settled before
+  // measuring: it normally reacts to the scroll event, which fires after this
+  // code would already have measured the stale layout. Looping synchronously
+  // (scrollBy applies immediately, and reading the rect forces layout) makes
+  // this converge in two or three passes instead of racing frames.
+  function align(el, tries) {
+    if (!el) return;
+    update();
+    var margin = parseFloat(getComputedStyle(el).scrollMarginTop) || 0;
+    if (!margin) return;
+    var delta = el.getBoundingClientRect().top - margin;
+    if (Math.abs(delta) < 2 || tries > 5) return;
+    window.scrollBy(0, delta);
+    align(el, tries + 1);
+  }
+  window.ccakashicAlign = align;
+
+  // Same correction for the date links and timestamp anchors.
+  window.addEventListener('hashchange', function() {
+    if (!location.hash) return;
+    align(document.getElementById(location.hash.slice(1)), 0);
+  });
+
   window.addEventListener('scroll', update, { passive: true });
   update();
 })();
 `;
 }
+function msgPagerJS() {
+    return `
+(function() {
+  // Direct children only: subagent conversations are inlined inside collapsed
+  // tool rows and carry their own .msg-user elements, which are not prompts
+  // the reader typed and cannot be scrolled to while collapsed.
+  var msgs = Array.from(document.querySelectorAll('.detail-date-group > .msg-user'));
+  var pager = document.getElementById('msgPager');
+  if (!pager || !msgs.length) return;
+  var countEl = document.getElementById('msgPagerCount');
+  var btns = Array.from(pager.querySelectorAll('.msg-pager-btn'));
+  var header = document.getElementById('sessionHeaderBar');
+  pager.hidden = false;
+
+  // Smooth scrolling fires many scroll events on the way to the target, so a
+  // second click mid-flight would otherwise read an in-between position and
+  // undo the first. Freeze the index until the animation settles.
+  var idx = -1;
+  var lockUntil = 0;
+
+  // scrollIntoView({block:'start'}) parks an element at its scroll-margin-top,
+  // which clears the sticky header. Read that same value back instead of
+  // guessing a header offset, or the message just jumped to reads as "not
+  // reached yet" and the counter falls back to "–".
+  function positionIndex() {
+    var margin = parseFloat(getComputedStyle(msgs[0]).scrollMarginTop) || 0;
+    var line = window.scrollY + margin + 8;
+    var cur = -1;
+    for (var i = 0; i < msgs.length; i++) {
+      if (msgs[i].getBoundingClientRect().top + window.scrollY <= line) cur = i;
+    }
+    return cur;
+  }
+
+  function render() {
+    countEl.textContent = (idx < 0 ? '–' : idx + 1) + ' / ' + msgs.length;
+    btns[0].disabled = idx <= 0;
+    btns[1].disabled = idx >= msgs.length - 1;
+  }
+
+  // A session can hold hundreds of prompts and positionIndex() measures every
+  // one, so coalesce the scroll storm into one measurement per frame.
+  var queued = false;
+  function sync() {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(function() {
+      queued = false;
+      if (Date.now() < lockUntil) return;
+      idx = positionIndex();
+      render();
+    });
+  }
+
+  // Jump instantly rather than smoothly: prompts in a long session sit tens of
+  // thousands of pixels apart, where a smooth scroll is a long blur rather than
+  // a sense of place. Re-measure the position each time so a jump still works
+  // after the reader has scrolled away by hand.
+  function go(dir) {
+    var cur = Date.now() < lockUntil ? idx : positionIndex();
+    var target = Math.max(0, Math.min(msgs.length - 1, cur < 0 ? 0 : cur + dir));
+    idx = target;
+    lockUntil = Date.now() + 400;
+    render();
+    var el = msgs[target];
+    el.scrollIntoView({ block: 'start' });
+    if (window.ccakashicAlign) window.ccakashicAlign(el, 0);
+    msgs.forEach(function(m) { m.classList.remove('focused'); });
+    el.classList.add('focused');
+    clearTimeout(el._flash);
+    el._flash = setTimeout(function() { el.classList.remove('focused'); }, 1600);
+  }
+
+  btns.forEach(function(b) {
+    b.addEventListener('click', function() { go(parseInt(b.dataset.dir, 10)); });
+  });
+  document.addEventListener('keydown', function(e) {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    if (e.key === 'n') go(1);
+    else if (e.key === 'p') go(-1);
+  });
+  window.addEventListener('scroll', sync, { passive: true });
+  sync();
+})();
+`;
+}
+function messageFilterJS() {
+    // Only these hide whole messages; 'cost' just strips badges, so it never
+    // empties a date group.
+    const hideSelectors = JSON.stringify({
+        tools: '.msg-tool',
+        injected: '.msg-injected',
+        thinking: '.msg-thinking',
+        shell: '.msg-local-cmd',
+        system: '.msg-system',
+    });
+    return `
+(function() {
+  var KEY = 'ccakashic.msgFilters';
+  var HIDE = ${hideSelectors};
+  var boxes = Array.from(document.querySelectorAll('#detailFilters input[data-filter]'));
+  if (!boxes.length) return;
+  var groups = Array.from(document.querySelectorAll('.detail-date-group'));
+  var navItems = Array.from(document.querySelectorAll('.detail-sidenav-item[data-date]'));
+
+  // A date group whose every message is filtered out would otherwise leave a
+  // bare heading behind; hide it and its side-nav entry too.
+  function updateGroups(state) {
+    var hidden = Object.keys(HIDE).filter(function(k) { return state[k] === false; });
+    var visibleDates = {};
+    groups.forEach(function(g) {
+      var total = g.querySelectorAll(':scope > .msg').length;
+      var hiddenCount = 0;
+      hidden.forEach(function(k) {
+        hiddenCount += g.querySelectorAll(':scope > ' + HIDE[k]).length;
+      });
+      var empty = total > 0 && hiddenCount >= total;
+      g.style.display = empty ? 'none' : '';
+      if (!empty) visibleDates[g.dataset.date] = true;
+    });
+    navItems.forEach(function(a) {
+      a.style.display = visibleDates[a.dataset.date] ? '' : 'none';
+    });
+  }
+
+  function apply(persist) {
+    var state = {};
+    boxes.forEach(function(b) {
+      state[b.dataset.filter] = b.checked;
+      document.body.classList.toggle('hide-' + b.dataset.filter, !b.checked);
+    });
+    if (persist) {
+      try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {}
+    }
+    updateGroups(state);
+  }
+
+  var saved = {};
+  try { saved = JSON.parse(localStorage.getItem(KEY)) || {}; } catch (e) {}
+  boxes.forEach(function(b) {
+    if (saved[b.dataset.filter] === false) b.checked = false;
+    b.addEventListener('change', function() { apply(true); });
+  });
+  apply(false);
+
+  document.querySelectorAll('#detailFilters [data-preset]').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      var showAll = btn.dataset.preset === 'all';
+      boxes.forEach(function(b) { b.checked = showAll; });
+      apply(true);
+    });
+  });
+})();
+`;
+}

package/dist/parser.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseSessionCached = parseSessionCached;
 exports.parseSession = parseSession;
+exports.classifyUserText = classifyUserText;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const readline = __importStar(require("readline"));
@@ -199,6 +200,39 @@ function parseLocalCommand(text) {
     }
     return null;
 }
+// A `user` line in the JSONL is not necessarily something the user typed:
+// Claude Code also feeds hook output, skill bodies, task notifications and
+// compaction summaries to the model in the user role. Those read like
+// instructions to the assistant, so they get their own presentation instead of
+// sharing the bubble with what was actually typed. Ordered — the first match
+// wins, and the labelled prefixes are anchored so a message that merely quotes
+// one is not misfiled.
+const INJECTED_PREFIXES = [
+    [/^Stop hook feedback:/, 'Hook feedback'],
+    [/^Base directory for this skill:/, 'Skill'],
+    [/^Another Claude session sent a message:/, 'Agent message'],
+    [/^\[Request interrupted by user/, 'Interrupted'],
+    [/^\[Your previous response had no visible output/, 'Continuation'],
+    [/^Continue from where you left off\./, 'Continuation'],
+];
+// Returns a label when the text was injected on the user's behalf, or null
+// when it is genuinely typed. Legacy sessions carry no promptSource at all, so
+// "no flags" has to mean typed — never hide a real prompt.
+function classifyUserText(text, line) {
+    if (line.isCompactSummary)
+        return 'Compact summary';
+    if (text.includes('<task-notification>'))
+        return 'Task notification';
+    for (const [re, label] of INJECTED_PREFIXES) {
+        if (re.test(text))
+            return label;
+    }
+    if (line.isMeta)
+        return 'Injected';
+    if (line.promptSource === 'sdk' || line.promptSource === 'system')
+        return 'Injected';
+    return null;
+}
 function processUserText(text, line, messages) {
     if (text.match(/^<local-command-caveat>/)) {
         return;
@@ -240,11 +274,16 @@ function processUserText(text, line, messages) {
         .replace(/<local-command-stdout>[\s\S]*?<\/local-command-stdout>/g, '')
         .trim();
     if (stripped) {
+        // Stays type 'user' so it still opens a turn for turn-usage accounting;
+        // only the presentation differs.
+        const injectedKind = classifyUserText(stripped, line);
         messages.push({
             type: 'user',
             text: stripped,
             timestamp: line.timestamp,
             uuid: line.uuid,
+            injected: injectedKind !== null,
+            injectedKind,
         });
     }
 }

package/dist/template-assets.js

@@ -663,8 +663,11 @@ function getAppJS() {
     });
   }
 
-  // Keyboard navigation: j/k to move between user messages
-  var msgEls = Array.from(document.querySelectorAll('.msg-user, .msg-assistant'));
+  // Keyboard navigation: j/k to move between user messages. Subagent
+  // conversations are inlined inside collapsed tool rows, so their messages
+  // can't be scrolled to — skip them rather than swallowing keypresses.
+  var msgEls = Array.from(document.querySelectorAll('.msg-user, .msg-assistant'))
+    .filter(function(el) { return !el.closest('.subagent-content'); });
   var currentIdx = -1;
 
   document.addEventListener('keydown', function(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccakashic",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A cross-project dashboard for your Claude Code sessions (~/.claude/projects/) — browse logs as beautiful HTML, see which sessions are waiting for you, and resume any of them in one click via cmux",
   "bin": {
     "ccakashic": "dist/bin/ccakashic.js"