codedash-app 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Termius-style browser dashboard for Claude Code sessions. View, search, resume, and delete sessions with a dark-themed UI.",
   "bin": {
     "codedash": "./bin/cli.js"

package/src/data.js

@@ -157,7 +157,7 @@ function loadSessions() {
   // Enrich Claude sessions with detail file info
   for (const [sid, s] of Object.entries(sessions)) {
     if (s.tool !== 'claude') continue;
-    const projectKey = s.project.replace(/\//g, '-').replace(/^-/, '');
+    const projectKey = s.project.replace(/[\/\.]/g, '-');
     const sessionFile = path.join(PROJECTS_DIR, projectKey, `${sid}.jsonl`);
     if (fs.existsSync(sessionFile)) {
       s.has_detail = true;
@@ -192,33 +192,33 @@ function loadSessions() {
 }
 
 function loadSessionDetail(sessionId, project) {
-  const projectKey = project.replace(/\//g, '-').replace(/^-/, '');
-  const sessionFile = path.join(PROJECTS_DIR, projectKey, `${sessionId}.jsonl`);
-
-  if (!fs.existsSync(sessionFile)) {
-    return { error: 'Session file not found', messages: [] };
-  }
+  const found = findSessionFile(sessionId, project);
+  if (!found) return { error: 'Session file not found', messages: [] };
 
   const messages = [];
-  const lines = fs.readFileSync(sessionFile, 'utf8').split('\n').filter(Boolean);
+  const lines = fs.readFileSync(found.file, 'utf8').split('\n').filter(Boolean);
 
   for (const line of lines) {
     try {
       const entry = JSON.parse(line);
-      if (entry.type === 'user' || entry.type === 'assistant') {
-        const msg = entry.message || {};
-        let content = msg.content || '';
-        if (Array.isArray(content)) {
-          content = content
-            .map(b => (typeof b === 'string' ? b : (b.type === 'text' ? b.text : '')))
-            .filter(Boolean)
-            .join('\n');
+
+      if (found.format === 'claude') {
+        if (entry.type === 'user' || entry.type === 'assistant') {
+          const content = extractContent((entry.message || {}).content);
+          if (content) {
+            messages.push({ role: entry.type, content: content.slice(0, 2000), uuid: entry.uuid || '' });
+          }
+        }
+      } else {
+        if (entry.type === 'response_item' && entry.payload) {
+          const role = entry.payload.role;
+          if (role === 'user' || role === 'assistant') {
+            const content = extractContent(entry.payload.content);
+            if (content && !content.startsWith('<permissions') && !content.startsWith('<environment_context') && !content.startsWith('<collaboration_mode')) {
+              messages.push({ role: role, content: content.slice(0, 2000), uuid: '' });
+            }
+          }
         }
-        messages.push({
-          role: entry.type,
-          content: content.slice(0, 2000),
-          uuid: entry.uuid || '',
-        });
       }
     } catch {}
   }
@@ -230,7 +230,7 @@ function deleteSession(sessionId, project) {
   const deleted = [];
 
   // 1. Remove session JSONL file from project dir
-  const projectKey = project.replace(/\//g, '-').replace(/^-/, '');
+  const projectKey = project.replace(/[\/\.]/g, '-');
   const sessionFile = path.join(PROJECTS_DIR, projectKey, `${sessionId}.jsonl`);
   if (fs.existsSync(sessionFile)) {
     fs.unlinkSync(sessionFile);
@@ -299,7 +299,7 @@ function getGitCommits(projectDir, fromTs, toTs) {
 }
 
 function exportSessionMarkdown(sessionId, project) {
-  const projectKey = project.replace(/\//g, '-').replace(/^-/, '');
+  const projectKey = project.replace(/[\/\.]/g, '-');
   const sessionFile = path.join(PROJECTS_DIR, projectKey, `${sessionId}.jsonl`);
 
   if (!fs.existsSync(sessionFile)) {
@@ -330,6 +330,155 @@ function exportSessionMarkdown(sessionId, project) {
   return parts.join('');
 }
 
+// ── Session Preview (first N messages, lightweight) ────────
+
+function findSessionFile(sessionId, project) {
+  // Try Claude projects dir
+  if (project) {
+    const projectKey = project.replace(/[\/\.]/g, '-');
+    const claudeFile = path.join(PROJECTS_DIR, projectKey, `${sessionId}.jsonl`);
+    if (fs.existsSync(claudeFile)) return { file: claudeFile, format: 'claude' };
+  }
+
+  // Try all Claude project dirs
+  if (fs.existsSync(PROJECTS_DIR)) {
+    for (const proj of fs.readdirSync(PROJECTS_DIR)) {
+      const f = path.join(PROJECTS_DIR, proj, `${sessionId}.jsonl`);
+      if (fs.existsSync(f)) return { file: f, format: 'claude' };
+    }
+  }
+
+  // Try Codex sessions dir (walk year/month/day)
+  const codexSessionsDir = path.join(CODEX_DIR, 'sessions');
+  if (fs.existsSync(codexSessionsDir)) {
+    const walkDir = (dir) => {
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          const result = walkDir(full);
+          if (result) return result;
+        } else if (entry.name.includes(sessionId) && entry.name.endsWith('.jsonl')) {
+          return full;
+        }
+      }
+      return null;
+    };
+    const codexFile = walkDir(codexSessionsDir);
+    if (codexFile) return { file: codexFile, format: 'codex' };
+  }
+
+  return null;
+}
+
+function extractContent(raw) {
+  if (!raw) return '';
+  if (typeof raw === 'string') return raw;
+  if (Array.isArray(raw)) {
+    return raw
+      .map(b => (typeof b === 'string' ? b : (b.text || b.input_text || '')))
+      .filter(Boolean)
+      .join('\n');
+  }
+  return String(raw);
+}
+
+function getSessionPreview(sessionId, project, limit) {
+  limit = limit || 10;
+  const found = findSessionFile(sessionId, project);
+  if (!found) return [];
+
+  const messages = [];
+  const lines = fs.readFileSync(found.file, 'utf8').split('\n').filter(Boolean);
+
+  for (const line of lines) {
+    if (messages.length >= limit) break;
+    try {
+      const entry = JSON.parse(line);
+
+      if (found.format === 'claude') {
+        // Claude: {type: "user"|"assistant", message: {content: ...}}
+        if (entry.type === 'user' || entry.type === 'assistant') {
+          const content = extractContent((entry.message || {}).content);
+          if (content) {
+            messages.push({ role: entry.type, content: content.slice(0, 300) });
+          }
+        }
+      } else {
+        // Codex: {type: "response_item", payload: {role: "user"|"assistant", content: [...]}}
+        if (entry.type === 'response_item' && entry.payload) {
+          const role = entry.payload.role;
+          if (role === 'user' || role === 'assistant') {
+            const content = extractContent(entry.payload.content);
+            // Skip system-like messages
+            if (content && !content.startsWith('<permissions') && !content.startsWith('<environment_context') && !content.startsWith('<collaboration_mode')) {
+              messages.push({ role: role, content: content.slice(0, 300) });
+            }
+          }
+        }
+      }
+    } catch {}
+  }
+
+  return messages;
+}
+
+// ── Full-text search across all sessions ──────────────────
+
+function searchFullText(query, sessions) {
+  if (!query || query.length < 2) return [];
+  const q = query.toLowerCase();
+  const results = [];
+
+  for (const s of sessions) {
+    if (s.tool !== 'claude' || !s.has_detail) continue;
+
+    const projectKey = s.project.replace(/[\/\.]/g, '-');
+    const sessionFile = path.join(PROJECTS_DIR, projectKey, `${s.id}.jsonl`);
+    if (!fs.existsSync(sessionFile)) continue;
+
+    try {
+      const data = fs.readFileSync(sessionFile, 'utf8');
+      // Quick check before parsing
+      if (data.toLowerCase().indexOf(q) === -1) continue;
+
+      // Find matching messages
+      const lines = data.split('\n').filter(Boolean);
+      const matches = [];
+      for (const line of lines) {
+        if (matches.length >= 3) break; // max 3 matches per session
+        try {
+          const entry = JSON.parse(line);
+          if (entry.type !== 'user' && entry.type !== 'assistant') continue;
+          const msg = entry.message || {};
+          let content = msg.content || '';
+          if (Array.isArray(content)) {
+            content = content
+              .map(b => (typeof b === 'string' ? b : (b.type === 'text' ? b.text : '')))
+              .filter(Boolean)
+              .join('\n');
+          }
+          if (content.toLowerCase().indexOf(q) >= 0) {
+            // Extract snippet around match
+            const idx = content.toLowerCase().indexOf(q);
+            const start = Math.max(0, idx - 50);
+            const end = Math.min(content.length, idx + q.length + 50);
+            matches.push({
+              role: entry.type,
+              snippet: (start > 0 ? '...' : '') + content.slice(start, end) + (end < content.length ? '...' : ''),
+            });
+          }
+        } catch {}
+      }
+
+      if (matches.length > 0) {
+        results.push({ sessionId: s.id, matches });
+      }
+    } catch {}
+  }
+
+  return results;
+}
+
 // ── Exports ────────────────────────────────────────────────
 
 module.exports = {
@@ -338,7 +487,8 @@ module.exports = {
   deleteSession,
   getGitCommits,
   exportSessionMarkdown,
-  // Expose constants for consumers that need them
+  getSessionPreview,
+  searchFullText,
   CLAUDE_DIR,
   CODEX_DIR,
   HISTORY_FILE,

package/src/frontend/app.js

@@ -288,6 +288,12 @@ function applyFilters() {
 function onSearch(val) {
   searchQuery = val;
   applyFilters();
+
+  // Trigger deep search after debounce
+  clearTimeout(deepSearchTimeout);
+  if (val && val.length >= 3) {
+    deepSearchTimeout = setTimeout(function() { deepSearch(val); }, 600);
+  }
 }
 
 function onTagFilter(val) {
@@ -379,12 +385,15 @@ function renderCard(s, idx) {
   html += '<span class="card-meta">' + escHtml(s.last_time || '') + '</span>';
   html += '<span class="card-id">' + s.id.slice(0, 8) + '</span>';
   // Tags
-  if (tagHtml || true) {
-    html += '<span class="card-tags">' + tagHtml;
-    html += '<button class="tag-add-btn" onclick="showTagDropdown(event, \'' + s.id + '\')" title="Add tag">+</button>';
-    html += '</span>';
+  html += '<span class="card-tags">' + tagHtml;
+  html += '<button class="tag-add-btn" onclick="showTagDropdown(event, \'' + s.id + '\')" title="Add tag">+</button>';
+  html += '</span>';
+  if (s.has_detail) {
+    html += '<button class="card-expand-btn" onclick="event.stopPropagation();toggleExpand(\'' + s.id + '\',\'' + escHtml(s.project || '').replace(/'/g, "\\'") + '\',this)" title="Preview messages">&#9662;</button>';
   }
   html += '</div>';
+  // Expandable preview area (hidden by default)
+  html += '<div class="card-preview-area" id="preview-' + s.id + '"></div>';
   html += '</div>';
   return html;
 }
@@ -425,6 +434,177 @@ function renderListCard(s, idx) {
   return html;
 }
 
+// ── Card expand (inline preview) ──────────────────────────────
+
+async function toggleExpand(sessionId, project, btn) {
+  var area = document.getElementById('preview-' + sessionId);
+  if (!area) return;
+
+  if (area.classList.contains('open')) {
+    area.classList.remove('open');
+    area.innerHTML = '';
+    btn.innerHTML = '&#9662;';
+    return;
+  }
+
+  btn.innerHTML = '&#8987;';
+  area.innerHTML = '<div class="loading">Loading...</div>';
+  area.classList.add('open');
+
+  try {
+    var resp = await fetch('/api/preview/' + sessionId + '?project=' + encodeURIComponent(project) + '&limit=10');
+    var messages = await resp.json();
+
+    if (messages.length === 0) {
+      area.innerHTML = '<div class="preview-empty">No messages</div>';
+    } else {
+      var html = '';
+      messages.forEach(function(m) {
+        var cls = m.role === 'user' ? 'preview-user' : 'preview-assistant';
+        var label = m.role === 'user' ? 'You' : 'AI';
+        html += '<div class="preview-msg ' + cls + '">';
+        html += '<span class="preview-role">' + label + '</span> ';
+        html += escHtml(m.content);
+        html += '</div>';
+      });
+      area.innerHTML = html;
+    }
+    btn.innerHTML = '&#9652;';
+  } catch (e) {
+    area.innerHTML = '<div class="preview-empty">Failed to load</div>';
+    btn.innerHTML = '&#9662;';
+  }
+}
+
+// ── Hover tooltip (show first messages on hover) ──────────────
+
+var hoverTimer = null;
+var hoverTooltip = null;
+
+function initHoverPreview() {
+  document.addEventListener('mouseover', function(e) {
+    var card = e.target.closest('.card');
+    if (!card) { hideHoverTooltip(); return; }
+
+    var id = card.getAttribute('data-id');
+    if (!id) return;
+
+    clearTimeout(hoverTimer);
+    hoverTimer = setTimeout(function() {
+      var s = allSessions.find(function(x) { return x.id === id; });
+      if (!s || !s.has_detail) return;
+      showHoverTooltip(card, s);
+    }, 400); // 400ms delay
+  });
+
+  document.addEventListener('mouseout', function(e) {
+    var card = e.target.closest('.card');
+    if (!card) { clearTimeout(hoverTimer); hideHoverTooltip(); }
+  });
+}
+
+async function showHoverTooltip(card, session) {
+  hideHoverTooltip();
+
+  try {
+    var resp = await fetch('/api/preview/' + session.id + '?project=' + encodeURIComponent(session.project || '') + '&limit=6');
+    var messages = await resp.json();
+    if (messages.length === 0) return;
+
+    var tip = document.createElement('div');
+    tip.className = 'hover-tooltip';
+
+    var html = '';
+    messages.forEach(function(m) {
+      var label = m.role === 'user' ? 'You' : 'AI';
+      var cls = m.role === 'user' ? 'preview-user' : 'preview-assistant';
+      html += '<div class="preview-msg ' + cls + '">';
+      html += '<span class="preview-role">' + label + '</span> ';
+      html += escHtml(m.content.slice(0, 150));
+      if (m.content.length > 150) html += '...';
+      html += '</div>';
+    });
+    tip.innerHTML = html;
+
+    document.body.appendChild(tip);
+    hoverTooltip = tip;
+
+    // Position near card
+    var rect = card.getBoundingClientRect();
+    tip.style.top = Math.min(rect.bottom + 4, window.innerHeight - tip.offsetHeight - 8) + 'px';
+    tip.style.left = Math.max(8, rect.left) + 'px';
+    tip.style.maxWidth = Math.min(500, window.innerWidth - rect.left - 20) + 'px';
+
+    requestAnimationFrame(function() { tip.classList.add('visible'); });
+  } catch {}
+}
+
+function hideHoverTooltip() {
+  if (hoverTooltip) {
+    hoverTooltip.remove();
+    hoverTooltip = null;
+  }
+}
+
+// ── Deep search (full-text across session content) ────────────
+
+var deepSearchCache = {};
+var deepSearchTimeout = null;
+
+async function deepSearch(query) {
+  if (!query || query.length < 3) return;
+  if (deepSearchCache[query]) {
+    applyDeepSearchResults(deepSearchCache[query]);
+    return;
+  }
+
+  try {
+    var resp = await fetch('/api/search?q=' + encodeURIComponent(query));
+    var results = await resp.json();
+    deepSearchCache[query] = results;
+    applyDeepSearchResults(results);
+  } catch {}
+}
+
+function applyDeepSearchResults(results) {
+  if (!results || results.length === 0) return;
+
+  // Highlight matching session IDs in filtered list
+  var matchIds = results.map(function(r) { return r.sessionId; });
+
+  // Boost matching sessions to top if not already visible
+  var boosted = [];
+  var rest = [];
+  filteredSessions.forEach(function(s) {
+    if (matchIds.indexOf(s.id) >= 0) {
+      s._deepMatch = results.find(function(r) { return r.sessionId === s.id; });
+      boosted.push(s);
+    } else {
+      rest.push(s);
+    }
+  });
+
+  // Also add sessions that weren't in filteredSessions but match
+  matchIds.forEach(function(id) {
+    if (!boosted.find(function(s) { return s.id === id; }) && !rest.find(function(s) { return s.id === id; })) {
+      var s = allSessions.find(function(x) { return x.id === id; });
+      if (s) {
+        s._deepMatch = results.find(function(r) { return r.sessionId === id; });
+        boosted.push(s);
+      }
+    }
+  });
+
+  filteredSessions = boosted.concat(rest);
+  render();
+
+  // Show deep search indicator
+  var stats = document.getElementById('stats');
+  if (stats && boosted.length > 0) {
+    stats.textContent += ' | ' + boosted.length + ' deep matches';
+  }
+}
+
 function onCardClick(id, event) {
   if (selectMode) {
     toggleSelect(id, event);
@@ -1164,13 +1344,29 @@ async function checkForUpdates() {
   try {
     var resp = await fetch('/api/version');
     var data = await resp.json();
+    var badge = document.getElementById('versionBadge');
+
+    if (badge) {
+      badge.textContent = 'v' + data.current;
+    }
+
     if (data.updateAvailable) {
+      if (badge) {
+        badge.textContent = 'v' + data.current + ' → v' + data.latest;
+        badge.classList.add('update-available');
+        badge.title = 'Click to copy update command';
+        badge.onclick = function() {
+          navigator.clipboard.writeText('npm i -g codedash-app@latest').then(function() {
+            showToast('Copied: npm i -g codedash-app@latest');
+          });
+        };
+      }
       var banner = document.getElementById('updateBanner');
       var text = document.getElementById('updateText');
       if (banner && text) {
-        text.textContent = 'Update available: v' + data.current + ' → v' + data.latest;
+        text.textContent = 'v' + data.latest + ' available — run: npm i -g codedash-app@latest';
         banner.style.display = 'flex';
-        banner.dataset.cmd = 'npm update -g codedash-app && codedash run';
+        banner.dataset.cmd = 'npm i -g codedash-app@latest';
       }
     }
   } catch {}
@@ -1196,6 +1392,7 @@ function dismissUpdate() {
   loadSessions();
   loadTerminals();
   checkForUpdates();
+  initHoverPreview();
 
   // Apply saved theme
   var savedTheme = localStorage.getItem('codedash-theme') || 'dark';

package/src/frontend/index.html

@@ -12,6 +12,7 @@
     <div class="sidebar-brand">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
         codedash
+        <span class="version-badge" id="versionBadge"></span>
     </div>
     <div class="sidebar-item active" data-view="sessions">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>

package/src/frontend/styles.css

@@ -100,6 +100,26 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-wrap: wrap;
+}
+
+.version-badge {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--text-muted);
+    background: rgba(255,255,255,0.06);
+    padding: 1px 6px;
+    border-radius: 4px;
+}
+
+.version-badge.update-available {
+    color: var(--accent-green);
+    background: rgba(74, 222, 128, 0.15);
+    cursor: pointer;
+}
+
+.version-badge.update-available:hover {
+    background: rgba(74, 222, 128, 0.25);
 }
 
 .sidebar-item {
@@ -1370,6 +1390,104 @@ body {
     color: #fff;
 }
 
+/* ── Card expand preview ────────────────────────────────────── */
+
+.card-expand-btn {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: 12px;
+    cursor: pointer;
+    padding: 1px 6px;
+    margin-left: auto;
+    transition: all 0.15s;
+}
+.card-expand-btn:hover {
+    color: var(--text-primary);
+    border-color: var(--accent-blue);
+}
+
+.card-preview-area {
+    display: none;
+    border-top: 1px solid var(--border);
+    margin-top: 10px;
+    padding-top: 10px;
+    max-height: 300px;
+    overflow-y: auto;
+    animation: fadeIn 0.2s ease;
+}
+
+.card-preview-area.open {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.preview-msg {
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 4px 8px;
+    margin-bottom: 4px;
+    border-radius: 6px;
+    word-break: break-word;
+    white-space: pre-wrap;
+}
+
+.preview-user {
+    background: rgba(96, 165, 250, 0.08);
+}
+
+.preview-assistant {
+    background: rgba(74, 222, 128, 0.06);
+}
+
+.preview-role {
+    font-weight: 600;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.preview-user .preview-role { color: var(--accent-blue); }
+.preview-assistant .preview-role { color: var(--accent-green); }
+
+.preview-empty {
+    color: var(--text-muted);
+    font-size: 12px;
+    padding: 8px 0;
+}
+
+/* ── Hover tooltip ──────────────────────────────────────────── */
+
+.hover-tooltip {
+    position: fixed;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px;
+    z-index: 150;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    max-height: 280px;
+    overflow-y: auto;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 0.15s, transform 0.15s;
+    pointer-events: none;
+}
+
+.hover-tooltip.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+[data-theme="light"] .hover-tooltip {
+    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+}
+
 /* ── Update banner ──────────────────────────────────────────── */
 
 .update-banner {

package/src/server.js

@@ -3,7 +3,7 @@ const http = require('http');
 const https = require('https');
 const { URL } = require('url');
 const { exec } = require('child_process');
-const { loadSessions, loadSessionDetail, deleteSession, getGitCommits, exportSessionMarkdown } = require('./data');
+const { loadSessions, loadSessionDetail, deleteSession, getGitCommits, exportSessionMarkdown, getSessionPreview, searchFullText } = require('./data');
 const { detectTerminals, openInTerminal } = require('./terminals');
 const { getHTML } = require('./html');
 
@@ -104,6 +104,23 @@ function startServer(port, openBrowser = true) {
       json(res, commits);
     }
 
+    // ── Session preview ─────────────────────
+    else if (req.method === 'GET' && pathname.startsWith('/api/preview/')) {
+      const sessionId = pathname.split('/').pop();
+      const project = parsed.searchParams.get('project') || '';
+      const limit = parseInt(parsed.searchParams.get('limit') || '10');
+      const messages = getSessionPreview(sessionId, project, limit);
+      json(res, messages);
+    }
+
+    // ── Full-text search ──────────────────────
+    else if (req.method === 'GET' && pathname === '/api/search') {
+      const q = parsed.searchParams.get('q') || '';
+      const sessions = loadSessions();
+      const results = searchFullText(q, sessions);
+      json(res, results);
+    }
+
     // ── Version check ────────────────────────
     else if (req.method === 'GET' && pathname === '/api/version') {
       const pkg = require('../package.json');