claude-home 1.4.8 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-home",
-  "version": "1.4.8",
+  "version": "1.5.9",
   "description": "Web dashboard for Claude Code — browse sessions, manage skills, hooks, commands, and agents",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -740,6 +740,90 @@
       font-variant-numeric: tabular-nums;
     }
 
+    /* ── Projects ─────────────────────────────────────────── */
+    .project-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+      gap: 12px;
+      padding: 20px;
+      align-content: start;
+    }
+    .project-card {
+      background: var(--white);
+      border: 1px solid var(--rule);
+      border-radius: 6px;
+      padding: 16px 18px;
+      cursor: pointer;
+      transition: border-color 0.12s, box-shadow 0.12s;
+    }
+    .project-card:hover {
+      border-color: var(--rule-2);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+    .project-card-name {
+      font-size: 14px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 2px;
+    }
+    .project-card-path {
+      font-size: 10.5px;
+      color: var(--ink-3);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 12px;
+      font-family: 'SF Mono','Fira Code',monospace;
+    }
+    .project-card-stats {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+    .project-stat { display: flex; flex-direction: column; gap: 1px; }
+    .project-stat-val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
+    .project-stat-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
+    .project-card-footer {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px solid var(--rule);
+      flex-wrap: wrap;
+    }
+    .proj-badge {
+      font-size: 10px;
+      padding: 2px 7px;
+      border-radius: 3px;
+      background: var(--canvas);
+      color: var(--ink-3);
+      font-weight: 500;
+    }
+    .proj-badge.missing { background: #3a1a1a; color: var(--red); }
+    .proj-badge.memory { background: var(--canvas); color: var(--ink-2); }
+    .project-detail-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--rule);
+      min-height: 52px;
+    }
+    .project-detail-body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .proj-md-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+    }
+
     /* ── Memory ───────────────────────────────────────────── */
     .memory-layout {
       display: flex;
@@ -1573,35 +1657,6 @@
             <span style="color:var(--ink-3)">CO₂</span>
             <span x-text="fmtCarbon(insights.totalCarbon) || '—'"></span>
           </div>
-          <template x-if="insights.totalCarbon > 100">
-            <div style="margin-top:6px;display:flex;flex-direction:column;gap:3px">
-              <!-- Car -->
-              <div style="font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M5 17H3v-5l2-5h14l2 5v5h-2"/><circle cx="7.5" cy="17.5" r="1.5"/><circle cx="16.5" cy="17.5" r="1.5"/><path d="M5 12h14"/></svg>
-                <span x-text="carbonEquivs(insights.totalCarbon)?.car"></span>
-              </div>
-              <!-- Plane -->
-              <div style="font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg>
-                <span x-text="carbonEquivs(insights.totalCarbon)?.flights"></span>
-              </div>
-              <!-- Tree -->
-              <div style="font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M12 22v-7"/><path d="M9 15l3-3 3 3"/><path d="M7 12l5-5 5 5"/><path d="M5 9l7-7 7 7"/></svg>
-                <span x-text="carbonEquivs(insights.totalCarbon)?.trees"></span>
-              </div>
-              <!-- Burger / Food -->
-              <div style="font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M4 8h16"/><path d="M4 12h16"/><path d="M4 16h16"/><path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></svg>
-                <span x-text="carbonEquivs(insights.totalCarbon)?.burgers"></span>
-              </div>
-              <!-- Home / Electricity -->
-              <div style="font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path d="M9 21V12h6v9"/></svg>
-                <span x-text="carbonEquivs(insights.totalCarbon)?.electricity"></span>
-              </div>
-            </div>
-          </template>
         </div>
       </template>
       <!-- Version + last session -->
@@ -1614,12 +1669,174 @@
           Last: <span x-text="formatDate(sessions[0]?.modified)"></span>
         </div>
       </template>
+      <div class="sidebar-footer-row" style="color:var(--ink-3)">
+        Created by <a href="https://zenekezene.com/" target="_blank" style="color:var(--ink-2);text-decoration:none;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Zenekezene</a> with wine
+      </div>
     </div>
   </aside>
 
   <!-- ── Main ── -->
   <div class="main">
 
+    <!-- Project detail -->
+    <template x-if="view === 'projects' && selectedProject && !selectedSession">
+      <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
+        <!-- Header -->
+        <div class="project-detail-header">
+          <button class="btn btn-outline btn-sm" @click="selectedProject=null;view='dashboard'" style="flex-shrink:0">← Dashboard</button>
+          <div style="flex:1;min-width:0">
+            <div style="font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" x-text="shortProjectName(selectedProject.projectPath) || selectedProject.dirName"></div>
+            <div style="font-size:10.5px;color:var(--ink-3);font-family:'SF Mono','Fira Code',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" x-text="selectedProject.projectPath"></div>
+          </div>
+          <!-- Stats chips -->
+          <div style="display:flex;gap:10px;align-items:center;flex-shrink:0">
+            <span style="font-size:11.5px;color:var(--ink-3)"><b x-text="selectedProject.sessionCount"></b> sessions</span>
+            <template x-if="selectedProject.memoryCount > 0">
+              <span style="font-size:11.5px;color:var(--ink-3)"><b x-text="selectedProject.memoryCount"></b> memories</span>
+            </template>
+            <template x-if="projectCost(selectedProject.dirName) !== null">
+              <span style="font-size:11.5px;color:var(--ink-3)"><b x-text="fmtCost(projectCost(selectedProject.dirName))"></b> cost</span>
+            </template>
+            <template x-if="!selectedProject.diskExists">
+              <span class="proj-badge missing">directory missing</span>
+            </template>
+          </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="tools-tabs" style="border-bottom:1px solid var(--rule)">
+          <div class="tools-tab" :class="{active: projectTab==='sessions'}" @click="projectTab='sessions'">Sessions</div>
+          <div class="tools-tab" :class="{active: projectTab==='memory'}" @click="projectTab='memory'">Memory <template x-if="projectMemory.length>0"><span class="nav-count" x-text="projectMemory.length"></span></template></div>
+          <div class="tools-tab" :class="{active: projectTab==='claudemd'}" @click="projectTab='claudemd'">CLAUDE.md</div>
+        </div>
+
+        <!-- Tab: Sessions -->
+        <template x-if="projectTab === 'sessions'">
+          <div style="flex:1;overflow-y:auto;padding-top:6px;">
+            <template x-if="projectSessionsLoading"><div class="loading"><div class="spinner"></div> Loading…</div></template>
+            <template x-if="!projectSessionsLoading && projectSessions.length === 0">
+              <div class="empty"><div class="empty-mark"></div>No sessions</div>
+            </template>
+            <template x-if="!projectSessionsLoading && projectSessions.length > 0">
+              <div class="sessions-list" style="padding:0 20px">
+                <template x-for="s in projectSessions" :key="s.sessionId">
+                  <div class="session-row" @click="view='sessions';openSession(s)">
+                    <div class="session-body">
+                      <div class="session-prompt" x-text="s.firstPrompt || '(no prompt)'"></div>
+                      <div class="session-lower">
+                        <template x-if="s.gitBranch">
+                          <div class="session-branch">
+                            <div class="branch-square" :style="'background:' + branchColor(s.gitBranch)"></div>
+                            <span x-text="s.gitBranch"></span>
+                          </div>
+                        </template>
+                        <span class="session-msgs" x-text="s.messageCount + ' msgs'"></span>
+                        <span class="session-msgs" x-text="formatDate(s.modified)"></span>
+                        <template x-if="sessionCosts[s.sessionId]">
+                          <span class="session-msgs" style="padding-left:8px;border-left:1px solid var(--rule);font-family:'SF Mono','Fira Code',monospace" x-text="fmtCost(sessionCosts[s.sessionId])"></span>
+                        </template>
+                      </div>
+                    </div>
+                    <div class="session-right">
+                      <button class="session-resume-btn" :disabled="!s.resumable" :title="!s.resumable ? 'Session file deleted' : 'Copy resume command'" @click.stop="s.resumable && resumeSession(s.sessionId, 'proj-resume-'+s.sessionId, s.projectPath)" :id="'proj-resume-'+s.sessionId">Resume →</button>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <!-- Tab: Memory -->
+        <template x-if="projectTab === 'memory'">
+          <div style="flex:1;overflow:hidden;display:flex;">
+            <template x-if="projectMemoryLoading"><div class="loading"><div class="spinner"></div> Loading…</div></template>
+            <template x-if="!projectMemoryLoading && projectMemory.length === 0">
+              <div class="empty"><div class="empty-mark"></div>No memory files for this project</div>
+            </template>
+            <template x-if="!projectMemoryLoading && projectMemory.length > 0">
+              <div style="display:flex;width:100%;overflow:hidden;">
+                <div class="memory-sidebar" :style="'width:'+sidebarW+'px'">
+                  <template x-for="f in projectMemory" :key="f.filename">
+                    <div class="memory-row" :class="{active: projectMemorySelected?.filename===f.filename}"
+                         @click="projectMemorySelected=f">
+                      <div class="memory-row-name" x-text="f.name || f.filename"></div>
+                      <div class="memory-row-desc" x-text="f.description || f.filename"></div>
+                    </div>
+                  </template>
+                </div>
+                <div class="resize-handle" @mousedown.prevent="startResize($event)"></div>
+                <div class="memory-detail">
+                  <template x-if="!projectMemorySelected">
+                    <div class="memory-empty"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>Select a memory file</div>
+                  </template>
+                  <template x-if="projectMemorySelected">
+                    <div>
+                      <div class="memory-detail-title" x-text="projectMemorySelected.name || projectMemorySelected.filename"></div>
+                      <div class="memory-detail-meta">
+                        <span :class="'type-pill type-'+(projectMemorySelected.type||'unknown')" x-text="projectMemorySelected.type||'unknown'"></span>
+                        <span class="memory-filename" x-text="projectMemorySelected.filename"></span>
+                      </div>
+                      <template x-if="projectMemorySelected.description"><div class="memory-desc-intro" x-text="projectMemorySelected.description"></div></template>
+                      <div class="memory-content md-content" x-html="renderMd(projectMemorySelected.content)"></div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <!-- Tab: CLAUDE.md -->
+        <template x-if="projectTab === 'claudemd'">
+          <div style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
+            <template x-if="projectClaudeMdLoading"><div class="loading"><div class="spinner"></div> Loading…</div></template>
+            <template x-if="!projectClaudeMdLoading && projectClaudeMd">
+              <div style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
+                <!-- File selector + actions -->
+                <div style="display:flex;align-items:center;gap:8px;padding:8px 20px;border-bottom:1px solid var(--rule);flex-wrap:wrap">
+                  <template x-if="projectClaudeMd.files.length === 0">
+                    <span style="font-size:12px;color:var(--ink-3)">No CLAUDE.md found in this project</span>
+                  </template>
+                  <template x-if="projectClaudeMd.files.length > 0">
+                    <select class="filter-select" x-model.number="projectClaudeMdEdit.fileIdx" @change="projectClaudeMdEdit.active=false;projectClaudeMdEdit.msg=''">
+                      <template x-for="(f, i) in projectClaudeMd.files" :key="f.filePath">
+                        <option :value="i" x-text="f.label"></option>
+                      </template>
+                    </select>
+                  </template>
+                  <div style="margin-left:auto;display:flex;gap:8px;align-items:center">
+                    <template x-if="projectClaudeMdEdit.msg">
+                      <span :class="projectClaudeMdEdit.msg==='Saved'?'save-msg':'err-msg'" x-text="projectClaudeMdEdit.msg"></span>
+                    </template>
+                    <template x-if="projectClaudeMd.files.length > 0 && !projectClaudeMdEdit.active">
+                      <button class="btn btn-outline btn-sm" @click="projectClaudeMdEdit.active=true;projectClaudeMdEdit.draft=projectClaudeMd.files[projectClaudeMdEdit.fileIdx]?.content||'';projectClaudeMdEdit.msg=''">Edit</button>
+                    </template>
+                    <template x-if="projectClaudeMdEdit.active">
+                      <button class="btn btn-outline btn-sm" @click="projectClaudeMdEdit.active=false">Cancel</button>
+                    </template>
+                    <template x-if="projectClaudeMdEdit.active">
+                      <button class="btn btn-primary btn-sm" @click="saveProjectClaudeMd()" :disabled="projectClaudeMdEdit.saving" x-text="projectClaudeMdEdit.saving?'Saving…':'Save'"></button>
+                    </template>
+                  </div>
+                </div>
+                <!-- Content -->
+                <div style="flex:1;overflow:hidden;">
+                  <template x-if="projectClaudeMd.files.length > 0 && !projectClaudeMdEdit.active">
+                    <div class="proj-md-content md-content" x-html="renderMd(projectClaudeMd.files[projectClaudeMdEdit.fileIdx]?.content||'')"></div>
+                  </template>
+                  <template x-if="projectClaudeMdEdit.active">
+                    <textarea class="edit-textarea" style="width:100%;height:100%;resize:none;border:none;outline:none;padding:20px;font-family:'SF Mono','Fira Code',monospace;font-size:12.5px;line-height:1.7;background:var(--white);box-sizing:border-box" x-model="projectClaudeMdEdit.draft"></textarea>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+
+      </div>
+    </template>
+
     <!-- Dashboard (home) — disabled -->
     <template x-if="view === 'dashboard' && !selectedSession">
       <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
@@ -1628,7 +1845,10 @@
           <span style="font-size:11px;color:var(--ink-3)" x-text="formatDate(new Date().toISOString())"></span>
         </div>
         <div class="content">
-          <div style="max-width:1100px">
+          <div style="max-width:1200px;display:flex;gap:20px;align-items:flex-start">
+
+            <!-- Left column: all dashboard content -->
+            <div style="flex:1;min-width:0">
 
             <!-- Row 1: Stats -->
             <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px">
@@ -1638,12 +1858,42 @@
                 <div class="db-card-sub" x-text="insights ? fmtTokensM(insights.totalTokens.output) + ' output · ' + fmtTokensM(insights.totalTokens.input) + ' input' : ''"></div>
               </div>
               <div class="db-card">
-                <div class="db-card-label">Total cost</div>
+                <div class="db-card-label" style="display:flex;align-items:center;gap:5px">
+                  Total cost
+                  <span class="tooltip-wrap" @click.stop>
+                    <i class="tooltip-icon">i</i>
+                    <span class="tooltip-box">
+                      <strong>Cost calculation</strong><br><br>
+                      Based on Anthropic's published API pricing (USD per million tokens):<br><br>
+                      <table style="border-collapse:collapse;width:100%;font-size:11px">
+                        <tr style="color:var(--ink-3)"><td></td><td style="text-align:right;padding-right:8px">Input</td><td style="text-align:right;padding-right:8px">Output</td><td style="text-align:right;padding-right:8px">Cache write</td><td style="text-align:right">Cache read</td></tr>
+                        <tr><td style="padding-right:8px">Opus</td><td style="text-align:right;padding-right:8px">$15</td><td style="text-align:right;padding-right:8px">$75</td><td style="text-align:right;padding-right:8px">$18.75</td><td style="text-align:right">$1.50</td></tr>
+                        <tr><td style="padding-right:8px">Sonnet</td><td style="text-align:right;padding-right:8px">$3</td><td style="text-align:right;padding-right:8px">$15</td><td style="text-align:right;padding-right:8px">$3.75</td><td style="text-align:right">$0.30</td></tr>
+                        <tr><td style="padding-right:8px">Haiku</td><td style="text-align:right;padding-right:8px">$0.80</td><td style="text-align:right;padding-right:8px">$4</td><td style="text-align:right;padding-right:8px">$1.00</td><td style="text-align:right">$0.08</td></tr>
+                      </table><br>
+                      Cost is summed across all sessions by reading token usage from each JSONL file. Sessions with no token data are excluded.
+                    </span>
+                  </span>
+                </div>
                 <div class="db-card-value" x-text="insights ? fmtCost(insights.totalCost) : '—'"></div>
                 <div class="db-card-sub">all time</div>
               </div>
               <div class="db-card">
-                <div class="db-card-label">Cache savings</div>
+                <div class="db-card-label" style="display:flex;align-items:center;gap:5px">
+                  Cache savings
+                  <span class="tooltip-wrap" @click.stop>
+                    <i class="tooltip-icon">i</i>
+                    <span class="tooltip-box">
+                      <strong>How cache savings are calculated</strong><br><br>
+                      When Claude reuses a prompt prefix it has seen before, those tokens are billed at the cheaper <em>cache read</em> rate instead of the full input rate.<br><br>
+                      <strong>Savings per token = input price − cache read price:</strong><br>
+                      Opus: $15 − $1.50 = <strong>$13.50</strong>/M tokens<br>
+                      Sonnet: $3 − $0.30 = <strong>$2.70</strong>/M tokens<br>
+                      Haiku: $0.80 − $0.08 = <strong>$0.72</strong>/M tokens<br><br>
+                      Savings shown here are the cumulative total across all sessions where cache hits were recorded.
+                    </span>
+                  </span>
+                </div>
                 <div class="db-card-value" style="color:var(--green)" x-text="insights ? fmtCost(insights.totalSavings) : '—'"></div>
                 <div class="db-card-sub">money saved via prompt cache</div>
               </div>
@@ -1690,28 +1940,9 @@
                   </div>
                 </template>
               </div>
-            </div>
+            </div><!-- /stats grid -->
 
-            <!-- Row 2: Latest session -->
-            <template x-if="sessions.length > 0">
-              <div class="db-latest" @click="openSession(sessions[0])">
-                <div class="db-latest-label">Latest session</div>
-                <div class="db-latest-prompt" x-text="sessions[0].firstPrompt || '(no prompt)'"></div>
-                <div class="db-latest-meta">
-                  <template x-if="sessions[0].gitBranch">
-                    <span style="display:flex;align-items:center;gap:5px">
-                      <div class="branch-square" :style="'background:' + branchColor(sessions[0].gitBranch)"></div>
-                      <span x-text="sessions[0].gitBranch"></span>
-                    </span>
-                  </template>
-                  <span x-text="formatDate(sessions[0].modified)"></span>
-                  <span x-text="sessions[0].messageCount + ' msgs'"></span>
-                  <button class="btn btn-primary btn-sm" style="margin-left:auto" :id="'resume-db'" :disabled="!sessions[0].resumable" :title="!sessions[0].resumable ? 'Session file deleted — cannot resume' : 'Copy command to resume this session'" @click.stop="sessions[0].resumable && resumeSession(sessions[0].sessionId,'resume-db', sessions[0].projectPath)">Resume →</button>
-                </div>
-              </div>
-            </template>
-
-            <!-- Row 3: Heatmap -->
+            <!-- Row 2: Heatmap -->
             <template x-if="stats">
               <div class="heatmap-wrap">
                 <div class="heatmap-section-title">Contribution heatmap</div>
@@ -1761,6 +1992,25 @@
                   </template>
                 </div>
 
+                <!-- Latest session -->
+                <template x-if="sessions.length > 0">
+                  <div class="db-latest" @click="openSession(sessions[0])" style="margin-bottom:16px">
+                    <div class="db-latest-label">Latest session</div>
+                    <div class="db-latest-prompt" x-text="sessions[0].firstPrompt || '(no prompt)'"></div>
+                    <div class="db-latest-meta">
+                      <template x-if="sessions[0].gitBranch">
+                        <span style="display:flex;align-items:center;gap:5px">
+                          <div class="branch-square" :style="'background:' + branchColor(sessions[0].gitBranch)"></div>
+                          <span x-text="sessions[0].gitBranch"></span>
+                        </span>
+                      </template>
+                      <span x-text="formatDate(sessions[0].modified)"></span>
+                      <span x-text="sessions[0].messageCount + ' msgs'"></span>
+                      <button class="btn btn-primary btn-sm" style="margin-left:auto" :id="'resume-db'" :disabled="!sessions[0].resumable" :title="!sessions[0].resumable ? 'Session file deleted — cannot resume' : 'Copy command to resume this session'" @click.stop="sessions[0].resumable && resumeSession(sessions[0].sessionId,'resume-db', sessions[0].projectPath)">Resume →</button>
+                    </div>
+                  </div>
+                </template>
+
                 <!-- Top sessions -->
                 <template x-if="insights.topSessions && insights.topSessions.length > 0">
                   <div class="insight-section">
@@ -1777,7 +2027,34 @@
               </div>
             </template>
 
-          </div>
+            </div><!-- /left column -->
+
+            <!-- Right column: Projects -->
+            <div style="width:240px;min-width:240px;background:var(--white);border:1px solid var(--rule);border-radius:6px;overflow:hidden;position:sticky;top:0">
+              <div style="padding:12px 14px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule)">Projects</div>
+              <template x-if="projects.length === 0">
+                <div style="padding:16px 14px;font-size:12px;color:var(--ink-3)">No projects</div>
+              </template>
+              <template x-for="proj in projects" :key="proj.dirName">
+                <div @click="openProject(proj)" style="padding:9px 14px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background 0.1s" @mouseenter="$el.style.background='var(--canvas)'" @mouseleave="$el.style.background=''">
+                  <div style="display:flex;align-items:baseline;gap:5px;margin-bottom:2px">
+                    <span style="font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1" x-text="shortProjectName(proj.projectPath) || proj.dirName"></span>
+                    <template x-if="!proj.diskExists">
+                      <span style="font-size:9px;color:var(--red);flex-shrink:0">missing</span>
+                    </template>
+                  </div>
+                  <div style="display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)">
+                    <span x-text="proj.sessionCount + ' sessions'"></span>
+                    <template x-if="projectCost(proj.dirName) !== null">
+                      <span x-text="fmtCost(projectCost(proj.dirName))" style="font-family:'SF Mono','Fira Code',monospace"></span>
+                    </template>
+                  </div>
+                  <div style="font-size:10.5px;color:var(--ink-4);margin-top:1px" x-text="proj.lastActive ? formatDate(proj.lastActive) : ''"></div>
+                </div>
+              </template>
+            </div><!-- /right column -->
+
+          </div><!-- /two-col layout -->
         </div>
       </div>
     </template>
@@ -3981,7 +4258,7 @@
           { cmd: '/insights',                       desc: 'Session analytics report' },
           { cmd: '/keybindings',                    desc: 'Open keybindings file' },
           { cmd: '/login',                          desc: 'Sign in to Anthropic' },
-          { cmd: '/logout',                         desc: 'Sign out de Anthropic' },
+          { cmd: '/logout',                         desc: 'Sign out from Anthropic' },
           { cmd: '/mcp',                            desc: 'Manage MCP connections and OAuth' },
           { cmd: '/memory',                         desc: 'Edit CLAUDE.md and manage auto-memory' },
           { cmd: '/model [model]',                  desc: 'Select or change AI model' },
@@ -4005,6 +4282,16 @@
           { cmd: '/vim',                            desc: 'Toggle Vim and Normal modes' },
           { cmd: '/voice',                          desc: 'Enable voice dictation (push to talk)' },
         ],
+        selectedProject: null,
+        projectSessions: [],
+        projectSessionsLoading: false,
+        projectMemory: [],
+        projectMemorySelected: null,
+        projectMemoryLoading: false,
+        projectClaudeMd: null,
+        projectClaudeMdLoading: false,
+        projectClaudeMdEdit: { active: false, fileIdx: 0, draft: '', saving: false, msg: '' },
+        projectTab: 'sessions',
         sessionsTab: 'list',
         knowledgeTab: 'memory',
         setupTab: 'commands',
@@ -4042,6 +4329,7 @@
 
         initView(v) {
           if (v === 'dashboard')            { this.loadStats(); this.loadInsights(); }
+          if (v === 'projects')             { this.loadProjects(); }
           if (v === 'memory')               { this.loadMemory(); }
           if (v === 'plans')                { this.loadPlans(); }
           if (v === 'commands' || v === 'skills') { this.loadTools(); }
@@ -4055,6 +4343,67 @@
           this.totalSessions = data.reduce((s, p) => s + p.sessionCount, 0);
         },
 
+        async openProject(proj) {
+          this.view = 'projects';
+          this.selectedProject = proj;
+          this.projectTab = 'sessions';
+          this.projectMemorySelected = null;
+          this.projectClaudeMd = null;
+          this.projectClaudeMdEdit = { active: false, fileIdx: 0, draft: '', saving: false, msg: '' };
+          this.loadProjectSessions();
+          this.loadProjectMemory();
+          this.loadProjectClaudeMd();
+        },
+
+        async loadProjectSessions() {
+          if (!this.selectedProject) return;
+          this.projectSessionsLoading = true;
+          this.projectSessions = await fetch(`/api/sessions?project=${this.selectedProject.dirName}`).then(r => r.json());
+          this.projectSessionsLoading = false;
+        },
+
+        async loadProjectMemory() {
+          if (!this.selectedProject) return;
+          this.projectMemoryLoading = true;
+          this.projectMemory = await fetch(`/api/memory?project=${this.selectedProject.dirName}`).then(r => r.json());
+          this.projectMemoryLoading = false;
+        },
+
+        async loadProjectClaudeMd() {
+          if (!this.selectedProject) return;
+          this.projectClaudeMdLoading = true;
+          this.projectClaudeMd = await fetch(`/api/projects/${this.selectedProject.dirName}/claude-md`).then(r => r.json());
+          this.projectClaudeMdLoading = false;
+        },
+
+        async saveProjectClaudeMd() {
+          if (!this.selectedProject || !this.projectClaudeMd) return;
+          const file = this.projectClaudeMd.files[this.projectClaudeMdEdit.fileIdx];
+          if (!file) return;
+          this.projectClaudeMdEdit.saving = true;
+          this.projectClaudeMdEdit.msg = '';
+          try {
+            const res = await fetch(`/api/projects/${this.selectedProject.dirName}/claude-md`, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ filePath: file.filePath, content: this.projectClaudeMdEdit.draft }),
+            });
+            if (!res.ok) throw new Error((await res.json()).error || 'Error');
+            file.content = this.projectClaudeMdEdit.draft;
+            this.projectClaudeMdEdit.active = false;
+            this.projectClaudeMdEdit.msg = 'Saved';
+          } catch (e) {
+            this.projectClaudeMdEdit.msg = e.message;
+          }
+          this.projectClaudeMdEdit.saving = false;
+        },
+
+        projectCost(dirName) {
+          if (!this.insights) return null;
+          const entry = this.insights.byProject?.find(p => p.dir === dirName);
+          return entry ? entry.cost : null;
+        },
+
         async loadBranches() {
           const params = this.filterProject ? `?project=${this.filterProject}` : '';
           this.branches = await fetch(`/api/branches${params}`).then(r => r.json());
@@ -4104,7 +4453,7 @@
               setTimeout(() => { btn.textContent = orig; btn.classList.remove('btn-copied', 'copied'); }, 2000);
             }
           } catch {
-            prompt('Copia este comando:', cmd);
+            prompt('Copy this command:', cmd);
           }
         },
 

package/server.js

@@ -406,20 +406,95 @@ function loadMemoryFiles(dirName) {
 
 app.use(express.static(path.join(__dirname, 'public')));
 
+// ─── Project helpers ─────────────────────────────────────────────────────────
+
+async function getProjectPath(dirName) {
+  // 1. Try sessions-index.json originalPath (most reliable)
+  const indexPath = path.join(PROJECTS_DIR, dirName, 'sessions-index.json');
+  try {
+    const idx = JSON.parse(fs.readFileSync(indexPath, 'utf8'));
+    if (idx.originalPath) return idx.originalPath;
+  } catch {}
+  // 2. Try projectPath from loaded entries
+  const entries = await loadSessionIndex(dirName);
+  if (entries[0]?.projectPath) return entries[0].projectPath;
+  // 3. Try cwd field from first few lines of any available JSONL
+  const dir = path.join(PROJECTS_DIR, dirName);
+  try {
+    const jsonlFiles = fs.readdirSync(dir).filter(f => f.endsWith('.jsonl'));
+    for (const f of jsonlFiles.slice(0, 3)) {
+      const rl = readline.createInterface({ input: fs.createReadStream(path.join(dir, f)), crlfDelay: Infinity });
+      let scanned = 0;
+      for await (const line of rl) {
+        if (!line.trim()) continue;
+        try {
+          const obj = JSON.parse(line);
+          if (obj.cwd) { rl.close(); return obj.cwd; }
+        } catch {}
+        if (++scanned >= 20) break; // scan up to 20 lines per file
+      }
+      rl.close();
+    }
+  } catch {}
+  return '';
+}
+
 // GET /api/projects
 app.get('/api/projects', async (req, res) => {
   const dirs = getProjectDirs();
   const results = await Promise.all(dirs.map(async dirName => {
     const entries = await loadSessionIndex(dirName);
-    const projectPath = entries[0]?.projectPath || dirName.replace(/-/g, '/').replace('/Users/', '/Users/');
+    const projectPath = await getProjectPath(dirName);
     const lastActive = entries.length
       ? entries.reduce((max, e) => e.modified > max ? e.modified : max, '')
       : null;
-    return { dirName, projectPath, sessionCount: entries.length, lastActive };
+    const memDir = path.join(PROJECTS_DIR, dirName, 'memory');
+    const memoryCount = fs.existsSync(memDir)
+      ? fs.readdirSync(memDir).filter(f => f.endsWith('.md') && !f.endsWith('.bak')).length
+      : 0;
+    const diskExists = projectPath ? fs.existsSync(projectPath) : false;
+    const branches = [...new Set(entries.map(e => e.gitBranch).filter(Boolean))];
+    return { dirName, projectPath, sessionCount: entries.length, lastActive, memoryCount, diskExists, branches };
   }));
   res.json(results.filter(p => p.sessionCount > 0).sort((a, b) => (b.lastActive || '').localeCompare(a.lastActive || '')));
 });
 
+// GET /api/projects/:dirName/claude-md
+app.get('/api/projects/:dirName/claude-md', async (req, res) => {
+  const { dirName } = req.params;
+  const projectPath = await getProjectPath(dirName);
+  if (!projectPath) return res.json({ projectPath: '', files: [] });
+  const candidates = [
+    { label: 'CLAUDE.md',             p: path.join(projectPath, 'CLAUDE.md') },
+    { label: '.claude/CLAUDE.md',     p: path.join(projectPath, '.claude', 'CLAUDE.md') },
+    { label: '.claude/CLAUDE.local.md', p: path.join(projectPath, '.claude', 'CLAUDE.local.md') },
+  ];
+  const files = [];
+  for (const { label, p } of candidates) {
+    if (fs.existsSync(p)) files.push({ label, filePath: p, content: fs.readFileSync(p, 'utf8') });
+  }
+  res.json({ projectPath, files });
+});
+
+// PUT /api/projects/:dirName/claude-md
+app.put('/api/projects/:dirName/claude-md', async (req, res) => {
+  const { dirName } = req.params;
+  const { filePath, content } = req.body;
+  if (!filePath || typeof content !== 'string') return res.status(400).json({ error: 'Missing filePath or content' });
+  const projectPath = await getProjectPath(dirName);
+  if (!projectPath) return res.status(404).json({ error: 'Project not found' });
+  // Security: filePath must be within projectPath
+  const resolved = path.resolve(filePath);
+  const base = path.resolve(projectPath);
+  if (!resolved.startsWith(base + path.sep) && resolved !== base) {
+    return res.status(403).json({ error: 'Path not allowed' });
+  }
+  try {
+    safeWrite(resolved, content);
+    res.json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 // GET /api/sessions
 app.get('/api/sessions', async (req, res) => {
   const { project, branch, search, from, to } = req.query;