v1.1.0: Grid/List toggle, Codex support fix, project navigation

- Fix Codex history parsing (session_id/ts/text format)
- Scan ~/.codex/sessions/ for session files
- Add Grid/List layout toggle (persisted in localStorage)
- Fix checkbox positioning inside cards
- Add openProject() to navigate from Projects view to filtered sessions
- Fix html.js template injection (split/join instead of replace)
- Add list view CSS styles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vakovalskii

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codedash-app",
-  "version": "1.0.0",
+  "version": "1.1.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"

src/data.js

@@ -20,18 +20,20 @@ function scanCodexSessions() {
     for (const line of lines) {
       try {
         const d = JSON.parse(line);
-        const sid = d.sessionId || d.id;
+        // Codex uses session_id, ts (seconds), text
+        const sid = d.session_id || d.sessionId || d.id;
         if (!sid) continue;
+        const ts = d.ts ? d.ts * 1000 : (d.timestamp || Date.now());
         if (!sessions.find(s => s.id === sid)) {
           sessions.push({
             id: sid,
             tool: 'codex',
             project: d.project || d.cwd || '',
             project_short: (d.project || d.cwd || '').replace(os.homedir(), '~'),
-            first_ts: d.timestamp || Date.now(),
-            last_ts: d.timestamp || Date.now(),
+            first_ts: ts,
+            last_ts: ts,
             messages: 1,
-            first_message: d.display || d.prompt || '',
+            first_message: d.text || d.display || d.prompt || '',
             has_detail: false,
             file_size: 0,
             detail_messages: 0,
@@ -40,6 +42,52 @@ function scanCodexSessions() {
       } catch {}
     }
   }
+
+  // Enrich with session files from ~/.codex/sessions/
+  const codexSessionsDir = path.join(CODEX_DIR, 'sessions');
+  if (fs.existsSync(codexSessionsDir)) {
+    try {
+      // Walk year/month/day directories
+      const files = [];
+      const walkDir = (dir) => {
+        for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+          const full = path.join(dir, entry.name);
+          if (entry.isDirectory()) walkDir(full);
+          else if (entry.name.endsWith('.jsonl')) files.push(full);
+        }
+      };
+      walkDir(codexSessionsDir);
+
+      for (const f of files) {
+        const stat = fs.statSync(f);
+        // Extract session ID from filename (rollout-DATE-UUID.jsonl)
+        const basename = path.basename(f, '.jsonl');
+        const uuidMatch = basename.match(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/);
+        if (!uuidMatch) continue;
+        const sid = uuidMatch[1];
+        const existing = sessions.find(s => s.id === sid);
+        if (existing) {
+          existing.has_detail = true;
+          existing.file_size = stat.size;
+        } else {
+          sessions.push({
+            id: sid,
+            tool: 'codex',
+            project: '',
+            project_short: '',
+            first_ts: stat.mtimeMs,
+            last_ts: stat.mtimeMs,
+            messages: 0,
+            first_message: '',
+            has_detail: true,
+            file_size: stat.size,
+            detail_messages: 0,
+          });
+        }
+      }
+    } catch {}
+  }
+
   return sessions;
 }
 

src/frontend/app.js

@@ -7,6 +7,7 @@ let allSessions = [];
 let filteredSessions = [];
 let currentView = 'sessions';  // sessions, projects, timeline, activity, starred
 let grouped = true;
+let layout = localStorage.getItem('codedash-layout') || 'grid'; // 'grid' or 'list'
 let searchQuery = '';
 let toolFilter = null;  // null, 'claude', 'codex'
 let tagFilter = '';
@@ -325,6 +326,42 @@ function renderCard(s, idx) {
   return html;
 }
 
+function toggleLayout() {
+  layout = layout === 'grid' ? 'list' : 'grid';
+  localStorage.setItem('codedash-layout', layout);
+  var btn = document.getElementById('layoutBtn');
+  if (btn) btn.classList.toggle('active', layout === 'list');
+  var icon = document.getElementById('layoutIcon');
+  if (icon) {
+    icon.innerHTML = layout === 'list'
+      ? '<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>'
+      : '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>';
+  }
+  render();
+}
+
+function renderListCard(s, idx) {
+  var isStarred = stars.indexOf(s.id) >= 0;
+  var isSelected = selectedIds.has(s.id);
+  var isFocused = focusedIndex === idx;
+  var projName = getProjectName(s.project);
+  var projColor = getProjectColor(projName);
+
+  var classes = 'list-row';
+  if (isSelected) classes += ' selected';
+  if (isFocused) classes += ' focused';
+
+  var html = '<div class="' + classes + '" data-id="' + s.id + '" onclick="onCardClick(\'' + s.id + '\', event)">';
+  html += '<span class="tool-badge tool-' + s.tool + '">' + escHtml(s.tool) + '</span>';
+  html += '<span class="list-project" style="color:' + projColor + '">' + escHtml(projName) + '</span>';
+  html += '<span class="list-msg">' + escHtml((s.first_message || '').slice(0, 80)) + '</span>';
+  html += '<span class="list-meta">' + s.messages + ' msgs</span>';
+  html += '<span class="list-time">' + timeAgo(s.last_ts) + '</span>';
+  html += '<button class="star-btn' + (isStarred ? ' active' : '') + '" onclick="event.stopPropagation();toggleStar(\'' + s.id + '\')">&#9733;</button>';
+  html += '</div>';
+  return html;
+}
+
 function onCardClick(id, event) {
   if (selectMode) {
     toggleSelect(id, event);
@@ -384,15 +421,18 @@ function render() {
     return;
   }
 
+  var renderFn = layout === 'list' ? renderListCard : renderCard;
   if (grouped) {
-    renderGrouped(content, sessions);
+    renderGrouped(content, sessions, renderFn);
   } else {
     var idx2 = 0;
-    content.innerHTML = sessions.map(function(s) { return renderCard(s, idx2++); }).join('');
+    var wrapClass = layout === 'list' ? 'list-view' : 'grid-view';
+    content.innerHTML = '<div class="' + wrapClass + '">' + sessions.map(function(s) { return renderFn(s, idx2++); }).join('') + '</div>';
   }
 }
 
-function renderGrouped(container, sessions) {
+function renderGrouped(container, sessions, renderFn) {
+  renderFn = renderFn || renderCard;
   var groups = {};
   sessions.forEach(function(s) {
     var key = getProjectName(s.project);
@@ -415,9 +455,10 @@ function renderGrouped(container, sessions) {
     html += '<span class="group-count">' + groups[key].length + '</span>';
     html += '<span class="group-chevron">&#9660;</span>';
     html += '</div>';
-    html += '<div class="group-body">';
+    var bodyClass = layout === 'list' ? 'group-body group-body-list' : 'group-body';
+    html += '<div class="' + bodyClass + '">';
     groups[key].forEach(function(s) {
-      html += renderCard(s, globalIdx++);
+      html += renderFn(s, globalIdx++);
     });
     html += '</div></div>';
   });
@@ -479,7 +520,7 @@ function renderProjects(container, sessions) {
     var totalSize = info.sessions.reduce(function(sum, s) { return sum + (s.file_size || 0); }, 0);
     var latest = info.sessions[0];
 
-    html += '<div class="project-card" onclick="onSearch(\'' + escHtml(name) + '\');document.querySelector(\'.search-box\').value=\'' + escHtml(name) + '\'">';
+    html += '<div class="project-card" onclick="openProject(\'' + escHtml(name).replace(/'/g, "\\'") + '\')">';
     html += '<div class="project-card-header">';
     html += '<span class="group-dot" style="background:' + color + '"></span>';
     html += '<span class="project-card-name">' + escHtml(name) + '</span>';
@@ -898,6 +939,18 @@ async function bulkDelete() {
   }
 }
 
+// ── Project actions ────────────────────────────────────────────
+
+function openProject(name) {
+  currentView = 'sessions';
+  searchQuery = name;
+  document.querySelector('.search-box').value = name;
+  document.querySelectorAll('.sidebar-item').forEach(function(el) {
+    el.classList.toggle('active', el.getAttribute('data-view') === 'sessions');
+  });
+  applyFilters();
+}
+
 // ── Themes ─────────────────────────────────────────────────────
 
 function setTheme(theme) {

src/frontend/index.html

@@ -72,6 +72,9 @@
         <input type="date" class="date-input" id="dateFrom" onchange="onDateFilter()" title="From date">
         <input type="date" class="date-input" id="dateTo" onchange="onDateFilter()" title="To date">
         <button class="toolbar-btn" onclick="toggleGroup()" id="groupBtn">Group</button>
+        <button class="toolbar-btn" onclick="toggleLayout()" id="layoutBtn" title="Grid / List">
+            <svg id="layoutIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+        </button>
         <button class="toolbar-btn" onclick="toggleSelectMode()" id="selectBtn">Select</button>
         <button class="toolbar-btn" onclick="refreshData()">Refresh</button>
         <span class="stats" id="stats"></span>

src/frontend/styles.css

@@ -335,30 +335,16 @@ body {
 /* ── Card Checkbox (bulk select) ───────────────────────────────── */
 
 .card-checkbox {
-    position: absolute;
-    top: 10px;
-    left: -6px;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    border: 2px solid var(--border);
-    background: var(--bg-secondary);
+    width: 16px;
+    height: 16px;
     cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.15s, background 0.15s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
+    accent-color: var(--accent-blue);
+    flex-shrink: 0;
+    display: none;
 }
 .card:hover .card-checkbox,
-.card.selected .card-checkbox,
-.select-mode .card-checkbox {
-    opacity: 1;
-}
-.card-checkbox.checked {
-    background: var(--accent-blue);
-    border-color: var(--accent-blue);
+.card.selected .card-checkbox {
+    display: inline-block;
 }
 
 /* ── Card Actions ──────────────────────────────────────────────── */
@@ -1383,3 +1369,81 @@ body {
     background: var(--accent-red);
     color: #fff;
 }
+
+/* ── List view ──────────────────────────────────────────────── */
+
+.list-view {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.list-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s;
+    font-size: 13px;
+}
+
+.list-row:hover {
+    background: var(--bg-card-hover);
+}
+
+.list-row.selected {
+    border-color: var(--accent-blue);
+}
+
+.list-row.focused {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: -2px;
+}
+
+.list-project {
+    font-weight: 600;
+    font-size: 12px;
+    width: 100px;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.list-msg {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-primary);
+}
+
+.list-meta {
+    color: var(--text-muted);
+    font-size: 12px;
+    flex-shrink: 0;
+}
+
+.list-time {
+    color: var(--text-muted);
+    font-size: 12px;
+    flex-shrink: 0;
+    width: 60px;
+    text-align: right;
+}
+
+.grid-view {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 10px;
+}
+
+.group-body-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}

src/html.js

@@ -10,8 +10,8 @@ function buildHTML() {
   const script = fs.readFileSync(path.join(FRONTEND_DIR, 'app.js'), 'utf8');
 
   return template
-    .replace('{{STYLES}}', styles)
-    .replace('{{SCRIPT}}', script);
+    .split('{{STYLES}}').join(styles)
+    .split('{{SCRIPT}}').join(script);
 }
 
 // Cache in production