ccakashic 0.3.1 → 0.5.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,8 +51,9 @@ 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
+- **Read-only JSON feed** — `GET /api/sessions?limit=40&waiting=1` returns what the dashboard shows (title, project, branch, model, `status`, `waiting`, `detailUrl`, `resumeCommand`) so other local tools can reuse the waiting signal. `waiting=1` returns only the sessions asking for you, and is the cheap path — it looks those up by id instead of parsing a whole window of session files
 - **Zero dependencies** — Node.js built-in modules only
 
 ## cmux integration

package/dist/api.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_SESSION_LIMIT = exports.DEFAULT_SESSION_LIMIT = void 0;
+exports.toSessionRow = toSessionRow;
+exports.parseSessionLimit = parseSessionLimit;
+exports.orderSessionRows = orderSessionRows;
+const dashboard_1 = require("./dashboard");
+const cmux_1 = require("./cmux");
+// Read-only JSON view of what the dashboard already computes, so other local
+// tools can treat ccakashic as the source of truth for "which session is
+// waiting for me" instead of re-deriving it from ~/.claude. The waiting signal
+// in particular cannot be rebuilt elsewhere: it maps cmux's unread
+// notifications through ccakashic's own resume map.
+exports.DEFAULT_SESSION_LIMIT = 40;
+// Each row costs a full session-file read, so cap what one request can ask for.
+exports.MAX_SESSION_LIMIT = 100;
+const PREVIEW_MAX = 200;
+function toSessionRow(session, waiting) {
+    return {
+        id: session.id,
+        projectRawName: session.projectRawName,
+        projectName: session.projectName,
+        cwd: session.cwd,
+        title: (0, dashboard_1.paneTitle)(session),
+        preview: (session.preview || '').slice(0, PREVIEW_MAX),
+        gitBranch: session.gitBranch,
+        model: session.model,
+        lastModified: session.lastModified,
+        status: (0, dashboard_1.paneStatus)(session.lastModified),
+        waiting,
+        detailUrl: `/project/${encodeURIComponent(session.projectRawName)}/session/${encodeURIComponent(session.id)}`,
+        // /api/resume is POST-only and requires the CSRF token, so there is no GET
+        // URL to hand out — and publishing that token from an unauthenticated
+        // endpoint would defeat it. Callers that want to act on a session either
+        // open detailUrl and press Resume, or run resumeCommand themselves.
+        resumeUrl: null,
+        resumeCommand: session.cwd ? (0, cmux_1.buildResumeCommand)(session.cwd, session.id) : null,
+    };
+}
+function parseSessionLimit(raw) {
+    const n = parseInt(raw || '', 10);
+    if (!Number.isFinite(n) || n <= 0)
+        return exports.DEFAULT_SESSION_LIMIT;
+    return Math.min(n, exports.MAX_SESSION_LIMIT);
+}
+function orderSessionRows(rows, limit) {
+    return rows.slice().sort((a, b) => b.lastModified - a.lastModified).slice(0, limit);
+}

package/dist/bin/ccakashic.js

@@ -41,6 +41,7 @@ const path = __importStar(require("path"));
 const child_process_1 = require("child_process");
 const util_1 = require("../util");
 const discover_1 = require("../discover");
+const api_1 = require("../api");
 const parser_1 = require("../parser");
 const html_generator_1 = require("../html-generator");
 const pages_1 = require("../pages");
@@ -100,16 +101,25 @@ async function buildResumeContext() {
     }
     return { token: RESUME_TOKEN, cmuxAvailable, openSessionIds };
 }
-// sessionId → wait reason, from cmux's unread notifications mapped through the
-// resume map. Only covers ccakashic-resumed sessions; others fall back to the
-// jsonl-derived activity below. Empty when cmux is unavailable/disabled.
+// sessionId → wait reason, from cmux's unread notifications resolved through
+// two independent workspace→session sources. Empty when cmux is
+// unavailable/disabled.
 async function buildCmuxWaitMap() {
     const result = new Map();
     if (NO_CMUX || !(await (0, cmux_1.isCmuxAvailable)()))
         return result;
     try {
         const waiting = await (0, cmux_1.listWaitingWorkspacesCached)();
+        // The resume map only covers sessions ccakashic resumed, which left every
+        // hand-started session permanently unbadged. The live map reads
+        // CMUX_WORKSPACE_ID from each running session's own process and covers
+        // those. They complement each other — the resume map still resolves
+        // sessions that have since exited — so the live one is layered on top,
+        // winning conflicts because it reflects the process attached right now.
         const wsToSession = (0, cmux_1.loadWorkspaceToSession)();
+        for (const [wsId, sessionId] of await (0, cmux_1.liveWorkspaceToSessionCached)()) {
+            wsToSession.set(wsId, sessionId);
+        }
         for (const [wsId, reason] of waiting) {
             const sessionId = wsToSession.get(wsId);
             if (sessionId)
@@ -291,6 +301,24 @@ const server = http.createServer(async (req, res) => {
             res.end(JSON.stringify({ changed: true, mtime, status, ago, waiting, html: (0, dashboard_1.renderPaneBody)(parsed) }));
             return;
         }
+        // Read-only feed of the dashboard's own view, for other local tools.
+        if (pathname === '/api/sessions') {
+            const limit = (0, api_1.parseSessionLimit)(url.searchParams.get('limit'));
+            const waitingOnly = url.searchParams.get('waiting') === '1';
+            const cmuxWait = await buildCmuxWaitMap();
+            // Waiting sessions are fetched by id rather than filtered out of the
+            // recent window: a session can sit waiting while other projects churn
+            // past it, and reading a wide window means parsing every file in it.
+            const sessions = waitingOnly
+                ? await (0, discover_1.findRecentSessionsByIds)([...cmuxWait.keys()])
+                : await (0, discover_1.listRecentSessions)(limit);
+            const rows = (0, api_1.orderSessionRows)(sessions
+                .map((s) => (0, api_1.toSessionRow)(s, resolveWaiting(s.id, cmuxWait)))
+                .filter((r) => !waitingOnly || r.waiting !== null), limit);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(rows));
+            return;
+        }
         const projectMatch = pathname.match(/^\/project\/(.+)$/);
         if (projectMatch && !pathname.includes('/session/')) {
             const rawName = decodeURIComponent(projectMatch[1]);

package/dist/cmux.js

@@ -49,6 +49,10 @@ exports.openInCmuxBrowser = openInCmuxBrowser;
 exports.loadResumeMap = loadResumeMap;
 exports.saveResumeMapEntry = saveResumeMapEntry;
 exports.loadWorkspaceToSession = loadWorkspaceToSession;
+exports.loadSessionRegistry = loadSessionRegistry;
+exports.parseWorkspaceEnv = parseWorkspaceEnv;
+exports.liveWorkspaceToSession = liveWorkspaceToSession;
+exports.liveWorkspaceToSessionCached = liveWorkspaceToSessionCached;
 exports.findLiveWorkspaceForSession = findLiveWorkspaceForSession;
 const child_process_1 = require("child_process");
 const fs = __importStar(require("fs"));
@@ -260,6 +264,124 @@ function loadWorkspaceToSession() {
     }
     return inv;
 }
+// --- Live workspace mapping, read from the running processes themselves ---
+//
+// The resume map only knows about sessions ccakashic itself resumed, so a
+// session you started by hand inside cmux has no workspace mapping and never
+// gets a waiting badge. Claude Code registers every running session in
+// ~/.claude/sessions/<pid>.json, and a session launched inside cmux inherits
+// CMUX_WORKSPACE_ID in its environment — together those give the same mapping
+// without ccakashic having been involved.
+//
+// The two sources are complements, not replacements: this one sees only live
+// processes, while the resume map still covers sessions that have since exited.
+const SESSION_REGISTRY_DIR = path.join(os.homedir(), '.claude', 'sessions');
+function loadSessionRegistry() {
+    let names;
+    try {
+        names = fs.readdirSync(SESSION_REGISTRY_DIR);
+    }
+    catch {
+        return []; // no registry (older Claude Code, or nothing has run yet)
+    }
+    const out = [];
+    for (const f of names) {
+        if (!f.endsWith('.json'))
+            continue;
+        try {
+            const o = JSON.parse(fs.readFileSync(path.join(SESSION_REGISTRY_DIR, f), 'utf-8'));
+            if (typeof o?.pid === 'number' && typeof o?.sessionId === 'string') {
+                out.push({ pid: o.pid, sessionId: o.sessionId, procStart: o.procStart });
+            }
+        }
+        catch {
+            // a half-written or stale record; skip it
+        }
+    }
+    return out;
+}
+function isProcessAlive(pid) {
+    try {
+        process.kill(pid, 0); // signal 0 only probes; it does not signal
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+// `ps eww` prints one line per process: pid, then the command, then the
+// process's ENTIRE environment — which routinely holds API keys and tokens.
+// Only CMUX_WORKSPACE_ID is ever pulled out of it; no other variable is
+// stored, returned or logged, and the raw output is not retained.
+function parseWorkspaceEnv(psOutput) {
+    const byPid = new Map();
+    for (const line of psOutput.split('\n')) {
+        const pid = line.match(/^\s*(\d+)\s/);
+        if (!pid)
+            continue;
+        const ws = line.match(/\bCMUX_WORKSPACE_ID=([A-Za-z0-9-]+)/);
+        if (ws)
+            byPid.set(parseInt(pid[1], 10), ws[1].toUpperCase());
+    }
+    return byPid;
+}
+function runPlain(bin, args, timeoutMs = 3000) {
+    return new Promise((resolve) => {
+        (0, child_process_1.execFile)(bin, args, { timeout: timeoutMs, maxBuffer: 8 * 1024 * 1024 }, (err, stdout) => {
+            resolve(err ? '' : stdout);
+        });
+    });
+}
+// A process's environment is fixed at exec time, so a pid only ever needs
+// looking up once. Keyed with procStart as well so a recycled pid can't
+// inherit the previous process's answer. null means "checked, not a cmux
+// process" — cached too, so those aren't re-probed on every poll.
+const workspaceEnvCache = new Map();
+const envKey = (r) => `${r.pid}:${r.procStart ?? ''}`;
+async function liveWorkspaceToSession() {
+    const live = loadSessionRegistry().filter((r) => isProcessAlive(r.pid));
+    const result = new Map();
+    const unknown = [];
+    for (const r of live) {
+        const key = envKey(r);
+        if (workspaceEnvCache.has(key)) {
+            const ws = workspaceEnvCache.get(key);
+            if (ws)
+                result.set(ws, r.sessionId);
+        }
+        else {
+            unknown.push(r);
+        }
+    }
+    if (unknown.length) {
+        // One ps for every new pid at once, not one spawn per session.
+        const out = await runPlain('ps', ['eww', '-p', unknown.map((r) => r.pid).join(',')]);
+        const byPid = parseWorkspaceEnv(out);
+        for (const r of unknown) {
+            const ws = byPid.get(r.pid) ?? null;
+            workspaceEnvCache.set(envKey(r), ws);
+            if (ws)
+                result.set(ws, r.sessionId);
+        }
+    }
+    // Drop entries for processes that are gone, so a long-lived server doesn't
+    // accumulate one per session ever started.
+    const alive = new Set(live.map(envKey));
+    for (const key of workspaceEnvCache.keys()) {
+        if (!alive.has(key))
+            workspaceEnvCache.delete(key);
+    }
+    return result;
+}
+let cachedLiveWorkspaces = null;
+async function liveWorkspaceToSessionCached() {
+    if (cachedLiveWorkspaces && Date.now() - cachedLiveWorkspaces.at < 5_000) {
+        return cachedLiveWorkspaces.value;
+    }
+    const value = await liveWorkspaceToSession();
+    cachedLiveWorkspaces = { value, at: Date.now() };
+    return value;
+}
 async function findLiveWorkspaceForSession(sessionId) {
     const mapped = loadResumeMap()[sessionId];
     if (!mapped)

package/dist/dashboard.js

@@ -4,6 +4,7 @@ exports.DEFAULT_PANE_COUNT = exports.PANE_COUNTS = void 0;
 exports.timeAgo = timeAgo;
 exports.paneStatus = paneStatus;
 exports.renderPaneBody = renderPaneBody;
+exports.paneTitle = paneTitle;
 exports.waitBadgeHtml = waitBadgeHtml;
 exports.generateDashboard = generateDashboard;
 const template_assets_1 = require("./template-assets");

package/dist/discover.js

@@ -38,6 +38,7 @@ exports.decodeDirName = decodeDirName;
 exports.listProjects = listProjects;
 exports.listSessions = listSessions;
 exports.listRecentSessions = listRecentSessions;
+exports.findRecentSessionsByIds = findRecentSessionsByIds;
 exports.readCwdFromSession = readCwdFromSession;
 exports.findSessionForCwd = findSessionForCwd;
 const fs = __importStar(require("fs"));
@@ -232,6 +233,32 @@ async function listRecentSessions(limit) {
         projectName: top[i].scan.name,
     }));
 }
+// Locate specific sessions by id. scanProjects only stats filenames, so this
+// parses just the matched files — unlike listRecentSessions, which parses every
+// file in its window (getSessionPreview reads a session end to end to total its
+// tokens). Callers that know which ids they want should use this: a session can
+// sit waiting for you while other projects churn past it, so it is not
+// necessarily inside any "most recent N" window.
+async function findRecentSessionsByIds(ids) {
+    const wanted = new Set(ids);
+    if (!wanted.size)
+        return [];
+    const scans = await scanProjects();
+    const hits = [];
+    for (const scan of scans) {
+        for (const f of scan.files) {
+            if (wanted.has(f.file.replace(/\.jsonl$/, ''))) {
+                hits.push({ file: path.join(scan.dir, f.file), scan });
+            }
+        }
+    }
+    const previews = await Promise.all(hits.map((h) => getSessionPreview(h.file)));
+    return previews.map((s, i) => ({
+        ...s,
+        projectRawName: hits[i].scan.rawName,
+        projectName: hits[i].scan.name,
+    }));
+}
 function readCwdFromSession(filePath) {
     return new Promise((resolve) => {
         const rl = readline.createInterface({

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.5.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"