@farazirfan/costar-server-executor 1.7.44 → 1.7.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farazirfan/costar-server-executor",
-  "version": "1.7.44",
+  "version": "1.7.45",
   "description": "CoStar Server Executor - 24/7 autonomous agent in TypeScript (cloned from OpenClaw)",
   "type": "module",
   "main": "dist/index.js",

package/public/index.html

@@ -1313,7 +1313,7 @@
 
             <!-- Parsed conversation view -->
             <div id="sessions-parsed-view" style="max-height:70vh;overflow:auto;padding:8px 0;">
-              <div id="sessions-parsed-content" style="display:flex;flex-direction:column;gap:6px;">
+              <div id="sessions-parsed-content" style="display:flex;flex-direction:column;gap:2px;">
                 <div class="loading-center"><div class="spinner"></div></div>
               </div>
             </div>
@@ -2679,96 +2679,93 @@
       const el = document.getElementById('sessions-parsed-content');
       let html = '';
 
-      // Session header
+      // Session header — single line
       if (data.session) {
-        html += `<div style="padding:8px 12px;background:var(--bg);border-radius:8px;border:1px solid var(--border);font-size:11px;color:var(--text-muted);">
-          <strong>Session</strong> ${escHtml(data.session.id || '')} &nbsp;|&nbsp; v${data.session.version || '?'} &nbsp;|&nbsp; ${escHtml(data.session.cwd || '')} &nbsp;|&nbsp; ${new Date(data.session.timestamp || '').toLocaleString()}
+        html += `<div style="padding:3px 8px;font-size:10px;color:var(--text-muted);font-family:var(--mono);border-bottom:1px solid var(--border);">
+          ${escHtml(data.session.id || '').slice(0,8)}.. | v${data.session.version || '?'} | ${escHtml(data.session.cwd || '')} | ${new Date(data.session.timestamp || '').toLocaleString()}
         </div>`;
       }
 
-      // Track if we've shown the context boundary divider
       let shownContextBoundary = false;
       let lastWasOutOfContext = false;
 
-      // Turns
       const turns = data.turns || [];
       for (let i = 0; i < turns.length; i++) {
         const turn = turns[i];
         const time = new Date(turn.timestamp);
         const timeStr = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
         const dateStr = time.toLocaleDateString([], { month: 'short', day: 'numeric' });
-        const heartbeatBadge = turn.isHeartbeat ? ' <span style="font-size:9px;background:#f59e0b22;color:#f59e0b;padding:1px 5px;border-radius:3px;font-weight:600;">HEARTBEAT</span>' : '';
-        const modelBadge = turn.model ? `<span style="font-size:10px;color:var(--text-muted);">${escHtml(turn.model)}</span>` : '';
-        const costStr = turn.usage?.cost ? `$${turn.usage.cost.toFixed(4)}` : '';
-        const tokensStr = turn.usage ? `${(turn.usage.totalTokens || 0).toLocaleString()} tok` : '';
-
-        // Show context boundary: compaction divider when transitioning from out-of-context to in-context
-        if (!turn.inContext && data.hasCompaction) {
-          lastWasOutOfContext = true;
-        }
+
+        // Context boundary
+        if (!turn.inContext && data.hasCompaction) lastWasOutOfContext = true;
         if (turn.inContext && lastWasOutOfContext && !shownContextBoundary) {
           shownContextBoundary = true;
-          // Show compaction summary
           if (data.compactions && data.compactions.length > 0) {
-            const c = data.compactions[data.compactions.length - 1]; // latest compaction
-            html += `<div style="padding:10px 12px;background:#a855f715;border:1px solid #a855f740;border-radius:6px;margin:8px 0;">
-              <div style="font-size:10px;color:#a855f7;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">&#9889; Context Compaction &mdash; ${new Date(c.timestamp).toLocaleString()}${c.tokensBefore ? ' &mdash; ' + c.tokensBefore.toLocaleString() + ' tokens compressed' : ''}</div>
-              <div style="font-size:12px;color:var(--text-secondary);white-space:pre-wrap;line-height:1.4;">${escHtml(c.summary || '').slice(0, 1000)}${(c.summary || '').length > 1000 ? '...' : ''}</div>
+            const c = data.compactions[data.compactions.length - 1];
+            html += `<div style="padding:4px 8px;background:#a855f712;border-left:2px solid #a855f7;margin:2px 0;font-size:10px;">
+              <span style="color:#a855f7;font-weight:600;">COMPACTION</span>
+              <span style="color:var(--text-muted);"> ${new Date(c.timestamp).toLocaleString()}${c.tokensBefore ? ' \u2014 ' + c.tokensBefore.toLocaleString() + ' tok' : ''}</span>
+              <div style="color:var(--text-secondary);margin-top:2px;line-height:1.3;white-space:pre-wrap;max-height:80px;overflow:hidden;">${escHtml(c.summary || '').slice(0, 500)}${(c.summary || '').length > 500 ? '...' : ''}</div>
             </div>`;
           }
-          html += `<div style="display:flex;align-items:center;gap:8px;margin:4px 0;">
-            <div style="flex:1;height:1px;background:#10b98150;"></div>
-            <span style="font-size:10px;color:#10b981;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;">&#9660; Active Context (sent to agent) &#9660;</span>
-            <div style="flex:1;height:1px;background:#10b98150;"></div>
+          html += `<div style="display:flex;align-items:center;gap:6px;margin:2px 0;">
+            <div style="flex:1;height:1px;background:#10b98140;"></div>
+            <span style="font-size:9px;color:#10b981;font-weight:700;letter-spacing:0.5px;">ACTIVE CONTEXT</span>
+            <div style="flex:1;height:1px;background:#10b98140;"></div>
           </div>`;
         }
 
-        const dimStyle = !turn.inContext && data.hasCompaction ? 'opacity:0.4;' : '';
-
-        // User message
-        html += `<div style="padding:8px 12px;background:var(--accent)10;border-left:3px solid var(--accent);border-radius:4px;${dimStyle}">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
-            <div style="font-size:10px;color:var(--accent);font-weight:600;">
-              #${turn.turnNumber} USER &mdash; ${dateStr} ${timeStr}${heartbeatBadge}${!turn.inContext && data.hasCompaction ? ' <span style="font-size:9px;background:#ef444422;color:#ef4444;padding:1px 5px;border-radius:3px;">COMPACTED</span>' : ''}
-            </div>
-            <div style="font-size:10px;color:var(--text-muted);">${modelBadge}</div>
+        const dim = !turn.inContext && data.hasCompaction ? 'opacity:0.35;' : '';
+        const hbBadge = turn.isHeartbeat ? '<span style="color:#f59e0b;font-size:8px;font-weight:700;margin-left:3px;">HB</span>' : '';
+        const compBadge = !turn.inContext && data.hasCompaction ? '<span style="color:#ef4444;font-size:8px;margin-left:3px;">OLD</span>' : '';
+
+        // Tool calls summary — inline
+        const toolStr = turn.toolCalls && turn.toolCalls.length > 0
+          ? turn.toolCalls.map(tc => tc.name).join(', ')
+          : '';
+
+        // Tokens / cost
+        const metaRight = [];
+        if (turn.model) metaRight.push(escHtml(turn.model).replace('claude-', '').replace('-20250514',''));
+        if (turn.usage) metaRight.push((turn.usage.totalTokens || 0).toLocaleString() + 't');
+        if (turn.usage?.cost) metaRight.push('$' + turn.usage.cost.toFixed(3));
+
+        // Single compact turn block
+        html += `<div style="border-left:2px solid var(--accent);padding:3px 8px;${dim}">`;
+
+        // Header line: #N time USER message-preview
+        const userPreview = escHtml(turn.userMessage).replace(/\n/g, ' ').slice(0, 120);
+        html += `<div style="display:flex;justify-content:space-between;align-items:baseline;gap:4px;">
+          <div style="font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+            <span style="color:var(--text-muted);font-family:var(--mono);">#${turn.turnNumber}</span>
+            <span style="color:var(--text-muted);font-family:var(--mono);margin:0 2px;">${dateStr} ${timeStr}</span>${hbBadge}${compBadge}
+            <span style="color:var(--accent);font-weight:600;margin-left:3px;">USER</span>
+            <span style="color:var(--text-primary);margin-left:4px;">${userPreview}</span>
           </div>
-          <div style="font-size:12px;white-space:pre-wrap;color:var(--text-primary);line-height:1.4;">${escHtml(turn.userMessage)}</div>
+          <div style="font-size:9px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;">${metaRight.join(' \u00b7 ')}</div>
         </div>`;
 
-        // Tool calls
-        if (turn.toolCalls && turn.toolCalls.length > 0) {
-          let toolsHtml = turn.toolCalls.map(tc => {
-            const inputStr = tc.input ? escHtml(tc.input) : '';
-            const resultStr = tc.result ? escHtml(tc.result) : '<span style="color:var(--text-muted);">no result</span>';
-            return `<div style="padding:4px 0;border-bottom:1px solid var(--border);">
-              <code style="font-size:11px;color:#3b82f6;font-weight:600;">${escHtml(tc.name)}</code>
-              ${inputStr ? `<div style="font-size:11px;color:var(--text-muted);margin-top:2px;font-family:var(--mono);white-space:pre-wrap;max-height:60px;overflow:hidden;">${inputStr}</div>` : ''}
-              <div style="font-size:11px;color:var(--text-secondary);margin-top:2px;font-family:var(--mono);white-space:pre-wrap;max-height:60px;overflow:hidden;">${resultStr}</div>
-            </div>`;
-          }).join('');
-
-          html += `<div style="padding:6px 12px;background:#3b82f610;border-left:3px solid #3b82f6;border-radius:4px;${dimStyle}">
-            <div style="font-size:10px;color:#3b82f6;font-weight:600;margin-bottom:4px;">${turn.toolCalls.length} TOOL CALL${turn.toolCalls.length > 1 ? 'S' : ''}</div>
-            ${toolsHtml}
+        // Tool calls — collapsed single line
+        if (toolStr) {
+          html += `<div style="font-size:9px;color:#3b82f6;font-family:var(--mono);padding:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+            \u2514 ${turn.toolCalls.length} tool${turn.toolCalls.length > 1 ? 's' : ''}: ${escHtml(toolStr).slice(0, 100)}
           </div>`;
         }
 
-        // Assistant response
+        // Assistant response — single line preview
         if (turn.assistantMessages && turn.assistantMessages.length > 0) {
-          const fullText = turn.assistantMessages.join('\n');
-          html += `<div style="padding:8px 12px;background:#10b98110;border-left:3px solid #10b981;border-radius:4px;${dimStyle}">
-            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
-              <div style="font-size:10px;color:#10b981;font-weight:600;">ASSISTANT</div>
-              <div style="font-size:10px;color:var(--text-muted);">${tokensStr}${costStr ? ' \u00b7 ' + costStr : ''}</div>
-            </div>
-            <div style="font-size:12px;white-space:pre-wrap;color:var(--text-primary);line-height:1.4;">${escHtml(fullText).slice(0, 2000)}${fullText.length > 2000 ? '...' : ''}</div>
+          const aPreview = escHtml(turn.assistantMessages.join(' ').replace(/\n/g, ' ')).slice(0, 150);
+          html += `<div style="font-size:10px;padding:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+            <span style="color:#10b981;font-weight:600;">ASST</span>
+            <span style="color:var(--text-secondary);margin-left:4px;">${aPreview}${turn.assistantMessages.join('').length > 150 ? '...' : ''}</span>
           </div>`;
         }
+
+        html += `</div>`;
       }
 
       if (turns.length === 0) {
-        html += '<div style="text-align:center;color:var(--text-muted);padding:40px;">No conversation turns found in this session.</div>';
+        html += '<div style="text-align:center;color:var(--text-muted);padding:20px;font-size:12px;">No conversation turns found.</div>';
       }
 
       el.innerHTML = html;