claude-home 1.2.2 → 1.4.2

package/bin/cli.js

@@ -66,10 +66,8 @@ if (args.includes('--help') || args.includes('-h')) {
 if (subcommand === 'stop') {
   const { execSync } = require('child_process');
   try {
-    const pid = execSync(`lsof -ti:${port}`, { encoding: 'utf8' }).trim();
-    if (!pid) { console.log(`No claude-home process found on port ${port}`); process.exit(0); }
-    execSync(`kill ${pid}`);
-    console.log(`✓ claude-home stopped (pid ${pid})`);
+    execSync(`lsof -ti:${port} | xargs kill -9`, { stdio: 'ignore' });
+    console.log(`✓ claude-home stopped`);
   } catch { console.log(`No claude-home process found on port ${port}`); }
   process.exit(0);
 }

package/package.json

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

package/public/index.html

@@ -343,6 +343,9 @@
 
     .session-resume-btn:hover { background: var(--red); }
     .session-resume-btn.copied { background: var(--green) !important; }
+    .session-resume-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--surface-2); color: var(--ink-3); }
+    .session-resume-btn:disabled:hover { background: var(--surface-2); }
+    .session-row:hover .session-resume-btn:disabled { opacity: 0.4; }
 
     /* ── Chat view ────────────────────────────────────────── */
     .chat-header {
@@ -397,6 +400,10 @@
 
     .message { display: flex; flex-direction: column; margin-bottom: 24px; }
 
+    .message.assistant { flex-direction: row; align-items: flex-start; gap: 10px; }
+    .message.assistant .message-role { margin-bottom: 0; flex-shrink: 0; padding-top: 3px; }
+    .message.assistant .message-bubble .md-content > *:first-child { margin-top: 0; }
+
     .message-role {
       font-size: 10px;
       font-weight: 700;
@@ -431,7 +438,10 @@
       align-items: center;
       gap: 8px;
       margin-top: 6px;
+      opacity: 0;
+      transition: opacity 0.15s;
     }
+    .message:hover .message-footer { opacity: 1; }
 
     .msg-meta { font-size: 10.5px; color: var(--ink-3); }
 
@@ -443,13 +453,16 @@
     .md-content p { margin: 6px 0; }
     .md-content ul, .md-content ol { padding-left: 20px; margin: 6px 0; }
     .md-content li { margin: 3px 0; }
-    .md-content code {
+    .md-content code, .inline-code {
       background: var(--canvas);
       border: 1px solid var(--rule);
       padding: 1px 5px;
+      border-radius: 3px;
       font-family: 'SF Mono', 'Fira Code', monospace;
       font-size: 12px;
     }
+    /* keep inline hljs within the bubble background, don't override with theme's white */
+    code.inline-code.hljs { background: var(--canvas); }
     .md-content pre {
       background: var(--white);
       border: 1px solid var(--rule);
@@ -1690,7 +1703,7 @@
                   </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'" @click.stop="resumeSession(sessions[0].sessionId,'resume-db')">Resume →</button>
+                  <button class="btn btn-primary btn-sm" style="margin-left:auto" :id="'resume-db'" :disabled="!sessions[0].resumable" :title="!sessions[0].resumable ? 'Archivo de sesión eliminado — no se puede retomar' : 'Copiar comando para retomar esta sesión'" @click.stop="sessions[0].resumable && resumeSession(sessions[0].sessionId,'resume-db', sessions[0].projectPath)">Resume →</button>
                 </div>
               </div>
             </template>
@@ -1854,7 +1867,7 @@
                               </div>
                             </div>
                             <div class="session-right">
-                              <button class="session-resume-btn" :id="'resume-' + s.sessionId" @click.stop="resumeSession(s.sessionId, 'resume-' + s.sessionId)">Resume →</button>
+                              <button class="session-resume-btn" :id="'resume-' + s.sessionId" :disabled="!s.resumable" :title="!s.resumable ? 'Archivo de sesión eliminado — no se puede retomar' : 'Copiar comando para retomar esta sesión'" @click.stop="s.resumable && resumeSession(s.sessionId, 'resume-' + s.sessionId, s.projectPath)">Resume →</button>
                             </div>
                           </div>
                         </template>
@@ -1959,7 +1972,7 @@
             </div>
           </div>
           <div style="display:flex;gap:6px;align-items:center;flex-shrink:0">
-            <button class="btn btn-sm" :class="cleanMode ? 'btn-primary' : ''" style="background:var(--canvas-2);color:var(--ink)" :style="cleanMode ? 'background:var(--blue);color:#fff' : ''" @click="cleanMode=!cleanMode" title="Toggle clean view">Clean</button>
+            <button class="btn btn-sm" :class="cleanMode ? 'btn-primary' : ''" style="background:var(--canvas-2);color:var(--ink)" :style="cleanMode ? 'background:var(--blue);color:#fff' : ''" @click="cleanMode=!cleanMode" title="Toggle focus view">Focus</button>
             <div style="position:relative">
               <button class="btn btn-sm" style="background:var(--canvas-2);color:var(--ink);display:flex;align-items:center;gap:4px" @click="exportDropOpen=!exportDropOpen" @click.outside="exportDropOpen=false">
                 Export <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3.5L5 6.5L8 3.5"/></svg>
@@ -1971,7 +1984,7 @@
             </div>
             <button class="btn btn-sm" style="background:var(--red-dim,#3a1a1a);color:var(--red);border:1px solid var(--red)" @click="deleteSession()" x-show="!deletingSession">Delete</button>
             <span x-show="deletingSession" style="font-size:12px;color:var(--ink-3)">Deleting…</span>
-            <button class="btn btn-primary btn-sm" id="resume-detail" @click="resumeSession(selectedSession.sessionId, 'resume-detail')">
+            <button class="btn btn-primary btn-sm" id="resume-detail" :disabled="!sessionDetail?.resumable" :title="!sessionDetail?.resumable ? 'Archivo de sesión eliminado — no se puede retomar' : 'Copiar comando para retomar esta sesión'" @click="sessionDetail?.resumable && resumeSession(selectedSession.sessionId, 'resume-detail', selectedSession.projectPath)">
               Resume →
             </button>
             <span x-show="exportMsg" x-text="exportMsg" style="font-size:12px;color:var(--green)" x-transition></span>
@@ -1992,8 +2005,11 @@
                     <div class="message-bubble">
                       <template x-for="(block, bi) in getUserBlocks(msg)" :key="bi">
                         <div>
+                          <template x-if="block.type === 'slash-command'">
+                            <span style="display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:4px;background:var(--canvas-2);border:1px solid var(--rule-2);color:var(--ink-2);font-family:monospace" x-text="block.command"></span>
+                          </template>
                           <template x-if="block.type === 'text'">
-                            <div x-text="block.text" style="white-space:pre-wrap"></div>
+                            <div x-html="renderInlineCode(block.text)" style="white-space:pre-wrap"></div>
                           </template>
                           <template x-if="block.type === 'tool_result' && !cleanMode">
                             <div class="collapsible" style="margin-top:6px">
@@ -2022,7 +2038,9 @@
                 <!-- Assistant message -->
                 <template x-if="msg.type === 'assistant'">
                   <div class="message assistant" x-show="!cleanMode || msgHasText(msg)">
-                    <div class="message-role">Claude</div>
+                    <div class="message-role">
+                      <svg fill="currentColor" fill-rule="evenodd" width="16" height="16" viewBox="0 0 24 24" style="color:var(--ink-3)" xmlns="http://www.w3.org/2000/svg"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"></path></svg>
+                    </div>
                     <div class="message-bubble">
                       <template x-for="(block, bi) in getAssistantBlocks(msg)" :key="bi">
                         <div>
@@ -3623,8 +3641,10 @@
                         <input class="perm-add-input" style="width:100%" x-model="ruleBuilder.specifier"
                           placeholder="npm run *  /  git commit *  /  * --help *"
                           @keydown.enter="ruleBuilderAdd()" />
-                        <div style="font-size:11px;color:var(--ink-3);margin-top:5px">
-                          <code>Bash(ls *)</code> coincide con <code>ls -la</code> pero no con <code>lsof</code> — el espacio antes de <code>*</code> actúa como límite de palabra.
+                        <div style="font-size:11px;color:var(--ink-3);margin-top:5px;display:flex;flex-direction:column;gap:4px">
+                          <span><code>Bash(ls *)</code> coincide con <code>ls -la</code> pero no con <code>lsof</code> — el espacio antes de <code>*</code> actúa como límite de palabra.</span>
+                          <span>⚠️ Comandos con <code>&&</code>, <code>|</code> o redirecciones pueden ser bloqueados por la detección automática de patrones peligrosos, aunque estén en allow.</span>
+                          <span>💡 Para comandos de una sola herramienta usa el prefijo sin encadenar: <code>npm publish *</code> en lugar de <code>cd /dir && npm publish</code>.</span>
                         </div>
                       </div>
                     </template>
@@ -3811,14 +3831,26 @@
 
   <script>
     marked.setOptions({ gfm: true, breaks: true });
-    marked.use({ renderer: { code(token) {
-      const lang = token.lang || '';
-      const valid = hljs.getLanguage(lang) ? lang : 'plaintext';
-      try {
-        const highlighted = hljs.highlight(token.text, { language: valid }).value;
-        return `<pre><code class="hljs language-${valid}">${highlighted}</code></pre>`;
-      } catch { return `<pre><code>${token.text}</code></pre>`; }
-    }}});
+    marked.use({ renderer: {
+      code(token) {
+        const lang = token.lang || '';
+        const valid = hljs.getLanguage(lang) ? lang : 'plaintext';
+        try {
+          const highlighted = hljs.highlight(token.text, { language: valid }).value;
+          return `<pre><code class="hljs language-${valid}">${highlighted}</code></pre>`;
+        } catch { return `<pre><code>${token.text}</code></pre>`; }
+      },
+      codespan(token) {
+        try {
+          const highlighted = hljs.highlightAuto(token.text).value;
+          return `<code class="inline-code hljs">${highlighted}</code>`;
+        } catch { return `<code class="inline-code">${token.text}</code>`; }
+      }
+    }});
+
+    function hljsInline(text) {
+      try { return hljs.highlightAuto(text).value; } catch { return text; }
+    }
 
     function app() {
       return {
@@ -3854,7 +3886,7 @@
         deletingSession: false,
         exportDropOpen: false,
         exportMsg: '',
-        cleanMode: false,
+        cleanMode: true,
         planExportMsg: '',
         planExportOpen: false,
         sidebarW: parseInt(localStorage.getItem('cm:sidebarW') || '260'),
@@ -4045,15 +4077,21 @@
           await this.openSession(s);
         },
 
-        async resumeSession(sessionId, btnId) {
-          const cmd = `claude -r ${sessionId}`;
-          await navigator.clipboard.writeText(cmd);
+        async resumeSession(sessionId, btnId, projectPath) {
+          const cmd = projectPath
+            ? `cd "${projectPath}" && claude -r ${sessionId}`
+            : `claude -r ${sessionId}`;
           const btn = document.getElementById(btnId);
-          if (btn) {
-            const orig = btn.textContent;
-            btn.textContent = 'Copied!';
-            btn.classList.add('btn-copied', 'copied');
-            setTimeout(() => { btn.textContent = orig; btn.classList.remove('btn-copied', 'copied'); }, 2000);
+          try {
+            await navigator.clipboard.writeText(cmd);
+            if (btn) {
+              const orig = btn.textContent;
+              btn.textContent = 'Copied!';
+              btn.classList.add('btn-copied', 'copied');
+              setTimeout(() => { btn.textContent = orig; btn.classList.remove('btn-copied', 'copied'); }, 2000);
+            }
+          } catch {
+            prompt('Copia este comando:', cmd);
           }
         },
 
@@ -4253,9 +4291,13 @@
 
         getUserBlocks(msg) {
           const content = msg.message?.content;
-          if (typeof content === 'string') return [{ type: 'text', text: content }];
-          if (Array.isArray(content)) return content;
-          return [];
+          const blocks = typeof content === 'string' ? [{ type: 'text', text: content }] : Array.isArray(content) ? content : [];
+          return blocks.map(b => {
+            if (b.type !== 'text') return b;
+            const m = b.text?.match(/<command-name>([^<]+)<\/command-name>/);
+            if (m) return { type: 'slash-command', command: m[1].startsWith('/') ? m[1] : '/' + m[1] };
+            return b;
+          });
         },
 
         getAssistantBlocks(msg) {
@@ -4295,6 +4337,16 @@
 
         renderMd(text) { try { return marked.parse(text); } catch { return text; } },
 
+        renderInlineCode(text) {
+          const esc = text
+            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+          return esc.replace(/`([^`\n]+)`/g, (_, code) => {
+            const decoded = code.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&').replace(/&quot;/g,'"');
+            return `<code class="inline-code hljs">${hljsInline(decoded)}</code>`;
+          });
+        },
+
         shortProjectName(p) {
           if (!p) return 'unknown';
           const parts = p.replace(/\\/g, '/').split('/');

package/server.js

@@ -200,10 +200,15 @@ async function readFirstMessage(filePath) {
         if (!timestamp && obj.timestamp) timestamp = obj.timestamp;
         if (!firstPrompt && obj.type === 'user') {
           const content = obj.message?.content;
-          if (typeof content === 'string') firstPrompt = content.slice(0, 300);
-          else if (Array.isArray(content)) {
-            const txt = content.find(c => c.type === 'text');
-            if (txt) firstPrompt = txt.text.slice(0, 300);
+          const isHook = typeof content === 'string'
+            ? content.includes('<local-command-caveat>')
+            : Array.isArray(content) && content.every(c => c.type === 'text' && c.text?.includes('<local-command-caveat>'));
+          if (!isHook) {
+            if (typeof content === 'string' && !content.includes('<command-name>')) firstPrompt = content.slice(0, 300);
+            else if (Array.isArray(content)) {
+              const txt = content.find(c => c.type === 'text' && !c.text?.includes('<command-name>') && !c.text?.includes('<local-command-caveat>'));
+              if (txt) firstPrompt = txt.text.slice(0, 300);
+            }
           }
         }
         if (firstPrompt && gitBranch && count > 5) break;
@@ -267,7 +272,13 @@ async function loadSessionIndex(dirName) {
     };
   }));
 
-  const allEntries = [...indexedEntries, ...unindexedEntries];
+  const allEntries = [
+    ...indexedEntries.map(e => {
+      const exists = fs.existsSync(e.fullPath || path.join(dir, `${e.sessionId}.jsonl`));
+      return { ...e, orphaned: !exists, resumable: exists };
+    }),
+    ...unindexedEntries.map(e => ({ ...e, resumable: true })),
+  ];
   indexCache.set(dirName, { indexMtime, dirMtime: dirStat, entries: allEntries });
   return allEntries;
 }
@@ -291,6 +302,15 @@ async function parseJsonl(filePath, { includeNoise = false, searchText = null }
     try { obj = JSON.parse(line); } catch { continue; }
     if (!includeNoise && NOISE_TYPES.has(obj.type)) continue;
 
+    // Filter out hook output messages (local-command-caveat)
+    if (obj.type === 'user') {
+      const c = obj.message?.content;
+      const isHookMsg = typeof c === 'string'
+        ? c.includes('<local-command-caveat>')
+        : Array.isArray(c) && c.every(b => b.type === 'text' && b.text?.includes('<local-command-caveat>'));
+      if (isHookMsg) continue;
+    }
+
     if (searchText) {
       const text = extractText(obj);
       if (!text.toLowerCase().includes(searchText.toLowerCase())) continue;
@@ -424,6 +444,7 @@ app.get('/api/sessions/:project/:sessionId', async (req, res) => {
   const { project, sessionId } = req.params;
   const filePath = path.join(PROJECTS_DIR, project, `${sessionId}.jsonl`);
   try {
+    const resumable = fs.existsSync(filePath);
     const messages = await parseJsonl(filePath);
     const tokens = aggregateTokens(messages);
     const models = [...new Set(
@@ -435,7 +456,7 @@ app.get('/api/sessions/:project/:sessionId', async (req, res) => {
     const cost = calculateCost(tokens, primaryModel);
     const savings = cacheSavings(tokens, primaryModel);
     const carbon = calculateCarbon(tokens, primaryModel);
-    res.json({ sessionId, tokens, models, cost, savings, carbon, messages });
+    res.json({ sessionId, tokens, models, cost, savings, carbon, messages, resumable });
   } catch (e) {
     res.status(500).json({ error: e.message });
   }