claude-home 1.2.2 → 1.4.0

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.0",
   "description": "Web dashboard for Claude Code — browse sessions, manage skills, hooks, commands, and agents",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -397,6 +397,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 +435,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 +450,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);
@@ -1959,7 +1969,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>
@@ -1992,8 +2002,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 +2035,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>
@@ -3811,14 +3826,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 +3881,7 @@
         deletingSession: false,
         exportDropOpen: false,
         exportMsg: '',
-        cleanMode: false,
+        cleanMode: true,
         planExportMsg: '',
         planExportOpen: false,
         sidebarW: parseInt(localStorage.getItem('cm:sidebarW') || '260'),
@@ -4253,9 +4280,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 +4326,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;
@@ -291,6 +296,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;