diff --git a/packages/coding-agent/src/core/export-html/template.html b/packages/coding-agent/src/core/export-html/template.html index f72759f4..4d6ba542 100644 --- a/packages/coding-agent/src/core/export-html/template.html +++ b/packages/coding-agent/src/core/export-html/template.html @@ -214,6 +214,14 @@ max-width: 800px; } + /* Help bar */ + .help-bar { + font-size: 11px; + color: var(--dim); + margin-bottom: 16px; + opacity: 0.7; + } + /* Header */ .header { background: var(--container-bg); @@ -278,6 +286,10 @@ padding: 0; } + .assistant-message > .message-timestamp { + padding-left: 16px; + } + .assistant-text { padding: 12px 16px; } @@ -289,6 +301,13 @@ white-space: pre-wrap; } + .thinking-collapsed { + display: none; + padding: 12px 16px; + color: var(--thinkingText); + font-style: italic; + } + /* Tool execution */ .tool-execution { padding: 12px 16px; @@ -305,7 +324,7 @@ } .tool-path { - color: var(--borderAccent); + color: var(--accent); word-break: break-all; } @@ -353,6 +372,7 @@ .tool-output code { padding: 0; background: none; + color: var(--text); } .tool-output.expandable { @@ -387,9 +407,7 @@ } .expand-hint { - color: var(--borderAccent); - font-style: italic; - margin-top: 4px; + color: var(--toolOutput); } /* Diff */ @@ -397,6 +415,7 @@ margin-top: 12px; font-size: 11px; overflow-x: auto; + white-space: pre; } .diff-added { color: var(--toolDiffAdded); } @@ -406,8 +425,6 @@ /* Model change */ .model-change { padding: 8px 16px; - background: var(--info-bg); - border-radius: 4px; color: var(--dim); font-size: 11px; } @@ -417,59 +434,41 @@ font-weight: bold; } - /* Compaction */ + /* Compaction / Branch Summary - matches customMessage colors from TUI */ .compaction { - background: var(--info-bg); + background: var(--customMessageBg); border-radius: 4px; - overflow: hidden; - } - - .compaction-header { padding: 12px 16px; cursor: pointer; - display: flex; - align-items: center; - gap: 8px; } - .compaction-header:hover { - background: var(--selectedBg); - } - - .compaction-toggle { - color: var(--borderAccent); - font-size: 10px; - transition: transform 0.2s; - } - - .compaction.expanded .compaction-toggle { - transform: rotate(90deg); - } - - .compaction-title { - color: var(--text); + .compaction-label { + color: var(--customMessageLabel); font-weight: bold; } + .compaction-collapsed { + color: var(--customMessageText); + } + .compaction-content { display: none; - padding: 0 16px 16px; + color: var(--customMessageText); + white-space: pre-wrap; + margin-top: 8px; + } + + .compaction.expanded .compaction-collapsed { + display: none; } .compaction.expanded .compaction-content { display: block; } - .compaction-summary { - background: var(--selectedBg); - border-radius: 4px; - padding: 12px; - white-space: pre-wrap; - } - /* System prompt */ .system-prompt { - background: var(--info-bg); + background: var(--customMessageBg); padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; @@ -477,12 +476,12 @@ .system-prompt-header { font-weight: bold; - color: var(--warning); + color: var(--customMessageLabel); margin-bottom: 8px; } .system-prompt-content { - color: var(--dim); + color: var(--customMessageText); white-space: pre-wrap; word-wrap: break-word; font-size: 11px; @@ -656,15 +655,17 @@ } /* Syntax highlighting */ - .hljs { background: transparent; } + .hljs { background: transparent; color: var(--text); } .hljs-comment, .hljs-quote { color: var(--syntaxComment); } .hljs-keyword, .hljs-selector-tag { color: var(--syntaxKeyword); } .hljs-number, .hljs-literal { color: var(--syntaxNumber); } .hljs-string, .hljs-doctag { color: var(--syntaxString); } .hljs-title, .hljs-section, .hljs-name { color: var(--syntaxFunction); } .hljs-type, .hljs-class, .hljs-built_in { color: var(--syntaxType); } - .hljs-attr, .hljs-variable, .hljs-params { color: var(--syntaxVariable); } + .hljs-attr, .hljs-variable, .hljs-params, .hljs-property { color: var(--syntaxVariable); } .hljs-meta { color: var(--syntaxKeyword); } + .hljs-punctuation, .hljs-operator { color: var(--syntaxOperator); } + .hljs-subst { color: var(--text); } /* Footer */ .footer { @@ -783,6 +784,7 @@
+
Ctrl+T toggle thinking · Ctrl+O toggle tools · Esc reset
Generated by {{APP_NAME}} on {{GENERATED_DATE}} @@ -801,7 +803,14 @@ (function() { 'use strict'; - const data = JSON.parse(atob(document.getElementById('session-data').textContent)); + // Decode base64 with proper UTF-8 handling + const base64 = document.getElementById('session-data').textContent; + const binary = atob(base64); + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + const data = JSON.parse(new TextDecoder('utf-8').decode(bytes)); const { header, entries, leafId, systemPrompt, tools } = data; // Build entry index @@ -1328,6 +1337,8 @@ // Format expandable output (matches old export-html.ts exactly) function formatExpandableOutput(text, maxLines, lang) { + // Replace tabs with spaces first + text = replaceTabs(text); const lines = text.split('\n'); const displayLines = lines.slice(0, maxLines); const remaining = lines.length - maxLines; @@ -1353,7 +1364,7 @@ let out = '`; return out; @@ -1369,7 +1380,7 @@ for (const line of displayLines) { out += `
${escapeHtml(replaceTabs(line))}
`; } - out += `
... (${remaining} more lines) - click to expand
`; + out += `
... (${remaining} more lines)
`; out += '
'; out += '
'; for (const line of lines) { @@ -1493,13 +1504,8 @@ const diffLines = result.details.diff.split('\n'); html += '
'; for (const line of diffLines) { - if (line.startsWith('+')) { - html += `
${escapeHtml(line)}
`; - } else if (line.startsWith('-')) { - html += `
${escapeHtml(line)}
`; - } else { - html += `
${escapeHtml(line)}
`; - } + const cls = line.match(/^\+/) ? 'diff-added' : line.match(/^-/) ? 'diff-removed' : 'diff-context'; + html += `
${escapeHtml(replaceTabs(line))}
`; } html += '
'; } @@ -1570,7 +1576,10 @@ if (block.type === 'text' && block.text.trim()) { html += `
${renderMarkdown(block.text)}
`; } else if (block.type === 'thinking' && block.thinking.trim()) { + html += `
`; html += `
${escapeHtml(block.thinking)}
`; + html += `
Thinking ...
`; + html += `
`; } } @@ -1617,14 +1626,10 @@ } if (entry.type === 'compaction') { - return `
-
- ▶ - Context compacted from ${entry.tokensBefore.toLocaleString()} tokens -
-
-
${escapeHtml(entry.summary)}
-
+ return `
+
[compaction]
+
Compacted from ${entry.tokensBefore.toLocaleString()} tokens (ctrl+o to expand)
+
Compacted from ${entry.tokensBefore.toLocaleString()} tokens\n\n${escapeHtml(entry.summary)}
`; } @@ -1738,7 +1743,8 @@ if (scrollToTarget) { const targetEl = document.getElementById(`entry-${targetId}`); if (targetEl) { - targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); + // Use 'end' to ensure we scroll far enough to see the target + targetEl.scrollIntoView({ behavior: 'smooth', block: 'end' }); // Brief highlight targetEl.style.outline = '2px solid var(--accent)'; setTimeout(() => { targetEl.style.outline = ''; }, 1500); @@ -1791,18 +1797,56 @@ // Close sidebar when clicking close button document.getElementById('sidebar-close').addEventListener('click', closeSidebar); - // Keyboard shortcut: Escape to reset to leaf + // Track toggle states + let thinkingExpanded = true; + let toolOutputsExpanded = true; + + const toggleThinking = () => { + thinkingExpanded = !thinkingExpanded; + document.querySelectorAll('.thinking-text').forEach(el => { + el.style.display = thinkingExpanded ? '' : 'none'; + }); + document.querySelectorAll('.thinking-collapsed').forEach(el => { + el.style.display = thinkingExpanded ? 'none' : ''; + }); + }; + + const toggleToolOutputs = () => { + toolOutputsExpanded = !toolOutputsExpanded; + // Toggle expanded state on expandable tool outputs + document.querySelectorAll('.tool-output.expandable').forEach(el => { + if (toolOutputsExpanded) { + el.classList.add('expanded'); + } else { + el.classList.remove('expanded'); + } + }); + // Toggle compaction/branch-summary expanded state + document.querySelectorAll('.compaction').forEach(el => { + if (toolOutputsExpanded) { + el.classList.add('expanded'); + } else { + el.classList.remove('expanded'); + } + }); + }; + + // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { searchInput.value = ''; searchQuery = ''; navigateTo(leafId); } - // Focus search on Ctrl/Cmd+F - if ((e.ctrlKey || e.metaKey) && e.key === 'f') { + // Toggle thinking blocks on Ctrl+T + if (e.ctrlKey && e.key === 't') { e.preventDefault(); - searchInput.focus(); - searchInput.select(); + toggleThinking(); + } + // Toggle tool outputs on Ctrl+O + if (e.ctrlKey && e.key === 'o') { + e.preventDefault(); + toggleToolOutputs(); } });