ccakashic 0.2.8 → 0.3.0

package/dist/dashboard.js

@@ -0,0 +1,330 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PANE_COUNT = exports.PANE_COUNTS = void 0;
+exports.timeAgo = timeAgo;
+exports.paneStatus = paneStatus;
+exports.renderPaneBody = renderPaneBody;
+exports.waitBadgeHtml = waitBadgeHtml;
+exports.generateDashboard = generateDashboard;
+const template_assets_1 = require("./template-assets");
+const html_generator_1 = require("./html-generator");
+const resume_ui_1 = require("./resume-ui");
+const util_1 = require("./util");
+// Multi-pane dashboard: the N most recently active sessions across all
+// projects, each pane showing the last 24h of conversation as a scrollable
+// thread, refreshed by polling /api/pane.
+exports.PANE_COUNTS = [4, 6, 8];
+exports.DEFAULT_PANE_COUNT = 4;
+const DAY_MS = 24 * 60 * 60 * 1000;
+// Keep panes light: a busy session can have thousands of messages in 24h.
+const MAX_PANE_MESSAGES = 150;
+function timeAgo(mtime) {
+    const diff = Date.now() - mtime;
+    if (diff < 60_000)
+        return 'just now';
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < DAY_MS)
+        return `${Math.floor(diff / 3_600_000)}h ago`;
+    return `${Math.floor(diff / DAY_MS)}d ago`;
+}
+function paneStatus(mtime) {
+    const diff = Date.now() - mtime;
+    if (diff < util_1.ACTIVE_THRESHOLD_MS)
+        return 'active';
+    if (diff < 30 * 60_000)
+        return 'recent';
+    return 'idle';
+}
+function renderPaneBody(parsed) {
+    const cutoff = Date.now() - DAY_MS;
+    // Exclude only messages we can positively place before the cutoff. Messages
+    // with a missing or unparseable timestamp (some tool/meta records) are kept
+    // rather than silently dropped — they interleave with timestamped ones and
+    // are usually part of the recent tail.
+    let messages = parsed.messages.filter((m) => {
+        const t = m.timestamp ? new Date(m.timestamp).getTime() : NaN;
+        return isNaN(t) || t >= cutoff;
+    });
+    let note = '';
+    if (messages.length === 0) {
+        // Nothing in the last 24h: show the tail so the pane isn't empty.
+        messages = parsed.messages.slice(-6);
+        note = '<div class="dash-pane-note">No activity in the last 24h — showing latest messages</div>';
+    }
+    else if (messages.length > MAX_PANE_MESSAGES) {
+        note = `<div class="dash-pane-note">Showing last ${MAX_PANE_MESSAGES} of ${messages.length} messages from 24h</div>`;
+        messages = messages.slice(-MAX_PANE_MESSAGES);
+    }
+    return note + messages.map(html_generator_1.renderMessage).join('\n');
+}
+function paneTitle(s) {
+    return s.customTitle || s.aiTitle || s.slug || s.id.slice(0, 8);
+}
+function waitBadgeHtml(waiting) {
+    if (!waiting)
+        return '';
+    const label = waiting === 'permission' ? '\u{1F510} Permission' : '⏳ Your turn';
+    return `<span class="dash-wait-badge dash-wait-${waiting}">${label}</span>`;
+}
+function generateDashboard(panes, paneCount, resume) {
+    const cols = paneCount <= 4 ? Math.max(panes.length, 1) : Math.ceil(paneCount / 2);
+    const rows = paneCount <= 4 ? 1 : 2;
+    const panesHtml = panes.map(({ session: s, bodyHtml, waiting }) => {
+        const status = paneStatus(s.lastModified);
+        const detailUrl = `/project/${encodeURIComponent(s.projectRawName)}/session/${encodeURIComponent(s.id)}`;
+        const projectLabel = s.projectName.split('/').pop() || s.projectName;
+        const branch = s.gitBranch && s.gitBranch !== 'HEAD' ? `<span class="dash-meta-item">${(0, util_1.escapeHtml)(s.gitBranch)}</span>` : '';
+        return `<div class="dash-pane${waiting ? ' dash-pane-waiting' : ''}" data-project="${(0, util_1.escapeHtml)(s.projectRawName)}" data-session="${(0, util_1.escapeHtml)(s.id)}" data-mtime="${s.lastModified}" data-waiting="${waiting || ''}">
+  <div class="dash-pane-header">
+    <div class="dash-pane-titles">
+      <div class="dash-pane-title"><span class="dash-dot dash-dot-${status}" title="${status}"></span><a href="${detailUrl}">${(0, util_1.escapeHtml)(paneTitle(s))}</a><span class="dash-wait-slot">${waitBadgeHtml(waiting)}</span></div>
+      <div class="dash-pane-meta">
+        <span class="dash-meta-item dash-meta-project" title="${(0, util_1.escapeHtml)(s.projectName)}">${(0, util_1.escapeHtml)(projectLabel)}</span>
+        ${branch}
+        <span class="dash-meta-item dash-ago">${timeAgo(s.lastModified)}</span>
+      </div>
+    </div>
+    ${(0, resume_ui_1.resumeButtonsHtml)(s.projectRawName, s, resume)}
+  </div>
+  <div class="dash-pane-body">${bodyHtml}</div>
+</div>`;
+    }).join('\n');
+    const countLinks = exports.PANE_COUNTS.map((n) => `<a class="dash-count${n === paneCount ? ' active' : ''}" href="/?n=${n}">${n}</a>`).join('');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ccakashic — dashboard</title>
+<link rel="icon" id="dash-favicon" href="data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="3" fill="#2563eb"/></svg>')}">
+<style>${(0, template_assets_1.getCSS)()}
+${(0, resume_ui_1.resumeCSS)()}
+${dashboardCSS(cols, rows)}
+</style>
+</head>
+<body class="dash-page">
+<div class="dash-topbar">
+  <span class="dash-brand">ccakashic</span>
+  <span class="dash-sub">last 24h across projects</span>
+  <span class="dash-counts">Panes: ${countLinks}</span>
+  <a class="dash-nav-link" href="/projects">All projects &rarr;</a>
+</div>
+<div class="dash-grid">
+${panesHtml || '<div class="empty">No sessions found</div>'}
+</div>
+<script>${(0, template_assets_1.getAppJS)()}
+${(0, resume_ui_1.resumeJS)(resume)}
+${dashboardJS()}
+</script>
+</body>
+</html>`;
+}
+function dashboardCSS(cols, rows) {
+    return `
+.dash-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.dash-topbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.dash-brand { font-weight: 700; font-size: 1rem; }
+.dash-sub { color: var(--text-muted); font-size: 0.8rem; }
+.dash-counts { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }
+.dash-count {
+  display: inline-block;
+  padding: 2px 8px;
+  margin-left: 4px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--text);
+  text-decoration: none;
+}
+.dash-count.active { border-color: var(--link); color: var(--link); font-weight: 700; }
+.dash-nav-link { color: var(--link); text-decoration: none; font-size: 0.85rem; }
+.dash-nav-link:hover { text-decoration: underline; }
+
+.dash-grid {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(${cols}, 1fr);
+  grid-template-rows: repeat(${rows}, 1fr);
+  gap: 8px;
+  padding: 8px;
+}
+.dash-pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg);
+}
+.dash-pane-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+.dash-pane-titles { min-width: 0; }
+.dash-pane-title {
+  font-size: 0.85rem;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dash-pane-title a { color: var(--text); text-decoration: none; }
+.dash-pane-title a:hover { color: var(--link); }
+.dash-pane-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dash-pane-header .resume-actions { margin-top: 0; flex-shrink: 0; }
+
+/* Waiting-for-user emphasis: orange frame + glow so it stands out at a glance. */
+.dash-pane-waiting {
+  border-color: #f97316;
+  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.35);
+}
+.dash-pane-waiting .dash-pane-header { background: rgba(249, 115, 22, 0.12); }
+.dash-wait-slot:empty { display: none; }
+.dash-wait-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  vertical-align: middle;
+  white-space: nowrap;
+  background: #f97316;
+  color: #fff;
+}
+.dash-wait-permission { background: #dc2626; animation: dash-pulse 1.2s ease-in-out infinite; }
+
+.dash-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  background: var(--text-muted);
+  opacity: 0.4;
+}
+.dash-dot-active { background: #22c55e; opacity: 1; animation: dash-pulse 1.6s ease-in-out infinite; }
+.dash-dot-recent { background: #eab308; opacity: 1; }
+@keyframes dash-pulse { 50% { opacity: 0.35; } }
+.dash-pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 10px;
+  font-size: 0.85rem;
+}
+.dash-pane-body .msg { max-width: 100%; }
+.dash-pane-note {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 4px 0 8px;
+}
+.empty { text-align: center; color: var(--text-muted); padding: 40px; }
+
+@media (max-width: 900px) {
+  .dash-page { height: auto; overflow: auto; }
+  .dash-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 70vh; }
+}
+`;
+}
+function dashboardJS() {
+    return `
+(function() {
+  var POLL_MS = 20000;
+
+  function scrollToBottom(body) {
+    body.scrollTop = body.scrollHeight;
+  }
+
+  document.querySelectorAll('.dash-pane-body').forEach(scrollToBottom);
+
+  var BASE_TITLE = 'ccakashic';
+  var ICON_NORMAL = document.getElementById('dash-favicon').href;
+  function svgIcon(fill) {
+    return 'data:image/svg+xml,' + encodeURIComponent(
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="3" fill="' + fill + '"/></svg>'
+    );
+  }
+  var ICON_WAIT = svgIcon('#f97316');
+
+  function waitBadge(state) {
+    if (state === 'permission') return '<span class="dash-wait-badge dash-wait-permission">\u{1F510} Permission</span>';
+    if (state === 'input') return '<span class="dash-wait-badge dash-wait-input">⏳ Your turn</span>';
+    return '';
+  }
+
+  // Reflect the number of sessions awaiting the user into the tab title and
+  // favicon, so a glance at the browser tab is enough.
+  function syncWaitingIndicator() {
+    var waiting = document.querySelectorAll('.dash-pane[data-waiting="input"], .dash-pane[data-waiting="permission"]').length;
+    document.title = waiting ? '(' + waiting + ') ' + BASE_TITLE + ' — dashboard' : BASE_TITLE + ' — dashboard';
+    var icon = document.getElementById('dash-favicon');
+    if (icon) icon.href = waiting ? ICON_WAIT : ICON_NORMAL;
+  }
+
+  function applyWaiting(pane, state) {
+    var norm = (state === 'input' || state === 'permission') ? state : '';
+    if ((pane.dataset.waiting || '') === norm) return;
+    pane.dataset.waiting = norm;
+    pane.classList.toggle('dash-pane-waiting', !!norm);
+    var slot = pane.querySelector('.dash-wait-slot');
+    if (slot) slot.innerHTML = waitBadge(norm);
+  }
+
+  function refreshPane(pane) {
+    var body = pane.querySelector('.dash-pane-body');
+    var url = '/api/pane?project=' + encodeURIComponent(pane.dataset.project)
+      + '&session=' + encodeURIComponent(pane.dataset.session)
+      + '&since=' + encodeURIComponent(pane.dataset.mtime);
+    return fetch(url).then(function(res) { return res.json(); }).then(function(data) {
+      var dot = pane.querySelector('.dash-dot');
+      if (dot && data.status) dot.className = 'dash-dot dash-dot-' + data.status;
+      var ago = pane.querySelector('.dash-ago');
+      if (ago && data.ago) ago.textContent = data.ago;
+      if ('waiting' in data) { applyWaiting(pane, data.waiting); syncWaitingIndicator(); }
+      if (!data.changed) return;
+      pane.dataset.mtime = data.mtime;
+      var nearBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 60;
+      body.innerHTML = data.html;
+      if (window.ccakashicApplyMarkdown) window.ccakashicApplyMarkdown(body);
+      if (nearBottom) scrollToBottom(body);
+    }).catch(function() { /* server briefly unavailable; retry next tick */ });
+  }
+
+  syncWaitingIndicator();
+  setInterval(function() {
+    document.querySelectorAll('.dash-pane').forEach(refreshPane);
+  }, POLL_MS);
+})();
+`;
+}

package/dist/discover.js

@@ -37,6 +37,8 @@ exports.CLAUDE_DIR = void 0;
 exports.decodeDirName = decodeDirName;
 exports.listProjects = listProjects;
 exports.listSessions = listSessions;
+exports.listRecentSessions = listRecentSessions;
+exports.readCwdFromSession = readCwdFromSession;
 exports.findSessionForCwd = findSessionForCwd;
 const fs = __importStar(require("fs"));
 const os = __importStar(require("os"));
@@ -51,42 +53,69 @@ function decodeDirName(dirName) {
     }
     return dirName;
 }
-async function listProjects() {
-    if (!fs.existsSync(exports.CLAUDE_DIR)) {
+// Stat every .jsonl in a project dir once. Tolerant of files/dirs disappearing
+// mid-scan (a live `claude` process may be rotating them).
+function statSessionFiles(projectDir) {
+    let names;
+    try {
+        names = fs.readdirSync(projectDir);
+    }
+    catch {
+        return [];
+    }
+    const out = [];
+    for (const f of names) {
+        if (!f.endsWith('.jsonl'))
+            continue;
+        try {
+            out.push({ file: f, mtimeMs: fs.statSync(path.join(projectDir, f)).mtimeMs });
+        }
+        catch {
+            // removed between readdir and stat
+        }
+    }
+    return out;
+}
+// Single source of truth for walking ~/.claude/projects. Both listProjects and
+// listRecentSessions build on this so the filesystem is walked/statted once.
+async function scanProjects() {
+    if (!fs.existsSync(exports.CLAUDE_DIR))
+        return [];
+    let entries;
+    try {
+        entries = fs.readdirSync(exports.CLAUDE_DIR, { withFileTypes: true });
+    }
+    catch {
         return [];
     }
-    const entries = fs.readdirSync(exports.CLAUDE_DIR, { withFileTypes: true });
-    const projects = [];
+    const scans = [];
     for (const entry of entries) {
         if (!entry.isDirectory())
             continue;
-        const projectDir = path.join(exports.CLAUDE_DIR, entry.name);
-        const jsonlFiles = fs.readdirSync(projectDir).filter((f) => f.endsWith('.jsonl'));
-        if (jsonlFiles.length === 0)
+        const dir = path.join(exports.CLAUDE_DIR, entry.name);
+        const files = statSessionFiles(dir);
+        if (files.length === 0)
             continue;
-        let lastModified = 0;
-        for (const f of jsonlFiles) {
-            const stat = fs.statSync(path.join(projectDir, f));
-            if (stat.mtimeMs > lastModified)
-                lastModified = stat.mtimeMs;
-        }
-        // Prefer the real cwd recorded in the session over the lossy directory-name
-        // decoding (dots and slashes both collapse to dashes in the dir name).
+        // Prefer the real cwd recorded in the latest session over the lossy
+        // directory-name decoding (dots and slashes both collapse to dashes).
         let name = decodeDirName(entry.name);
-        const latest = latestSessionFile(projectDir);
-        if (latest) {
-            const cwd = await readCwdFromSession(path.join(projectDir, latest.file));
-            if (cwd)
-                name = cwd;
-        }
-        projects.push({
-            name,
-            rawName: entry.name,
-            dir: projectDir,
-            sessionCount: jsonlFiles.length,
-            lastModified: new Date(lastModified),
-        });
+        const latest = files.reduce((a, b) => (b.mtimeMs > a.mtimeMs ? b : a));
+        const cwd = await readCwdFromSession(path.join(dir, latest.file));
+        if (cwd)
+            name = cwd;
+        scans.push({ rawName: entry.name, dir, name, files });
     }
+    return scans;
+}
+async function listProjects() {
+    const scans = await scanProjects();
+    const projects = scans.map((s) => ({
+        name: s.name,
+        rawName: s.rawName,
+        dir: s.dir,
+        sessionCount: s.files.length,
+        lastModified: new Date(Math.max(...s.files.map((f) => f.mtimeMs))),
+    }));
     projects.sort((a, b) => b.lastModified.getTime() - a.lastModified.getTime());
     return projects;
 }
@@ -95,6 +124,7 @@ async function getSessionPreview(filePath) {
         const result = {
             id: path.basename(filePath, '.jsonl'),
             path: filePath,
+            cwd: null,
             timestamp: null,
             lastModified: fs.statSync(filePath).mtimeMs,
             preview: '',
@@ -122,6 +152,9 @@ async function getSessionPreview(filePath) {
                 if (!result.timestamp && obj.timestamp) {
                     result.timestamp = obj.timestamp;
                 }
+                if (!result.cwd && obj.cwd) {
+                    result.cwd = obj.cwd;
+                }
                 if (!result.gitBranch && obj.gitBranch) {
                     result.gitBranch = obj.gitBranch;
                 }
@@ -182,6 +215,23 @@ async function listSessions(projectDir) {
     sessions.sort((a, b) => b.lastModified - a.lastModified);
     return sessions;
 }
+async function listRecentSessions(limit) {
+    const scans = await scanProjects();
+    const entries = [];
+    for (const scan of scans) {
+        for (const f of scan.files) {
+            entries.push({ file: path.join(scan.dir, f.file), mtime: f.mtimeMs, scan });
+        }
+    }
+    entries.sort((a, b) => b.mtime - a.mtime);
+    const top = entries.slice(0, limit);
+    const previews = await Promise.all(top.map((e) => getSessionPreview(e.file)));
+    return previews.map((s, i) => ({
+        ...s,
+        projectRawName: top[i].scan.rawName,
+        projectName: top[i].scan.name,
+    }));
+}
 function readCwdFromSession(filePath) {
     return new Promise((resolve) => {
         const rl = readline.createInterface({