diff --git a/packages/coding-agent/package.json b/packages/coding-agent/package.json index c22f5d89..dc7ebfb7 100644 --- a/packages/coding-agent/package.json +++ b/packages/coding-agent/package.json @@ -32,7 +32,7 @@ "clean": "rm -rf dist", "build": "tsgo -p tsconfig.build.json && chmod +x dist/cli.js && npm run copy-assets", "build:binary": "npm run build && bun build --compile ./dist/cli.js --outfile dist/pi && npm run copy-binary-assets", - "copy-assets": "mkdir -p dist/modes/interactive/theme && cp src/modes/interactive/theme/*.json dist/modes/interactive/theme/ && mkdir -p dist/core/export-html/vendor && cp src/core/export-html/template.html dist/core/export-html/ && cp src/core/export-html/vendor/*.js dist/core/export-html/vendor/", + "copy-assets": "mkdir -p dist/modes/interactive/theme && cp src/modes/interactive/theme/*.json dist/modes/interactive/theme/ && mkdir -p dist/core/export-html/vendor && cp src/core/export-html/template.html src/core/export-html/template.css src/core/export-html/template.js dist/core/export-html/ && cp src/core/export-html/vendor/*.js dist/core/export-html/vendor/", "copy-binary-assets": "cp package.json dist/ && cp README.md dist/ && cp CHANGELOG.md dist/ && mkdir -p dist/theme && cp src/modes/interactive/theme/*.json dist/theme/ && mkdir -p dist/export-html/vendor && cp src/core/export-html/template.html dist/export-html/ && cp src/core/export-html/vendor/*.js dist/export-html/vendor/ && cp -r docs dist/ && cp -r examples dist/", "test": "vitest --run", "prepublishOnly": "npm run clean && npm run build" diff --git a/packages/coding-agent/src/core/export-html/index.ts b/packages/coding-agent/src/core/export-html/index.ts index 66fe9a75..43764f29 100644 --- a/packages/coding-agent/src/core/export-html/index.ts +++ b/packages/coding-agent/src/core/export-html/index.ts @@ -110,6 +110,8 @@ interface SessionData { function generateHtml(sessionData: SessionData, themeName?: string): string { const templateDir = getExportTemplateDir(); const template = readFileSync(join(templateDir, "template.html"), "utf-8"); + const templateCss = readFileSync(join(templateDir, "template.css"), "utf-8"); + const templateJs = readFileSync(join(templateDir, "template.js"), "utf-8"); const markedJs = readFileSync(join(templateDir, "vendor", "marked.min.js"), "utf-8"); const hljsJs = readFileSync(join(templateDir, "vendor", "highlight.min.js"), "utf-8"); @@ -125,17 +127,19 @@ function generateHtml(sessionData: SessionData, themeName?: string): string { // Base64 encode session data to avoid escaping issues const sessionDataBase64 = Buffer.from(JSON.stringify(sessionData)).toString("base64"); - return template - .replace("{{TITLE}}", title) + // Build the CSS with theme variables injected + const css = templateCss .replace("{{THEME_VARS}}", themeVars) .replace("{{BODY_BG}}", bodyBg) .replace("{{CONTAINER_BG}}", containerBg) - .replace("{{INFO_BG}}", infoBg) + .replace("{{INFO_BG}}", infoBg); + + return template + .replace("{{CSS}}", css) + .replace("{{JS}}", templateJs) .replace("{{SESSION_DATA}}", sessionDataBase64) .replace("{{MARKED_JS}}", markedJs) - .replace("{{HIGHLIGHT_JS}}", hljsJs) - .replace("{{APP_NAME}}", `${APP_NAME} v${VERSION}`) - .replace("{{GENERATED_DATE}}", new Date().toLocaleString()); + .replace("{{HIGHLIGHT_JS}}", hljsJs); } /** diff --git a/packages/coding-agent/src/core/export-html/template.css b/packages/coding-agent/src/core/export-html/template.css new file mode 100644 index 00000000..9fba6841 --- /dev/null +++ b/packages/coding-agent/src/core/export-html/template.css @@ -0,0 +1,775 @@ + :root { + {{THEME_VARS}} + --body-bg: {{BODY_BG}}; + --container-bg: {{CONTAINER_BG}}; + --info-bg: {{INFO_BG}}; + } + + * { margin: 0; padding: 0; box-sizing: border-box; } + + :root { + --line-height: 18px; /* 12px font * 1.5 */ + } + + body { + font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + font-size: 12px; + line-height: var(--line-height); + color: var(--text); + background: var(--body-bg); + } + + #app { + display: flex; + min-height: 100vh; + } + + /* Sidebar */ + #sidebar { + width: 400px; + background: var(--container-bg); + flex-shrink: 0; + display: flex; + flex-direction: column; + position: sticky; + top: 0; + height: 100vh; + border-right: 1px solid var(--dim); + } + + .sidebar-header { + padding: 8px 12px; + flex-shrink: 0; + } + + .sidebar-controls { + padding: 8px 8px 4px 8px; + } + + .sidebar-search { + width: 100%; + box-sizing: border-box; + padding: 4px 8px; + font-size: 11px; + font-family: inherit; + background: var(--body-bg); + color: var(--text); + border: 1px solid var(--dim); + border-radius: 3px; + } + + .sidebar-filters { + display: flex; + padding: 4px 8px 8px 8px; + gap: 4px; + align-items: center; + flex-wrap: wrap; + } + + .sidebar-search:focus { + outline: none; + border-color: var(--accent); + } + + .sidebar-search::placeholder { + color: var(--muted); + } + + .filter-btn { + padding: 3px 8px; + font-size: 10px; + font-family: inherit; + background: transparent; + color: var(--muted); + border: 1px solid var(--dim); + border-radius: 3px; + cursor: pointer; + } + + .filter-btn:hover { + color: var(--text); + border-color: var(--text); + } + + .filter-btn.active { + background: var(--accent); + color: var(--body-bg); + border-color: var(--accent); + } + + .sidebar-close { + display: none; + padding: 3px 8px; + font-size: 12px; + font-family: inherit; + background: transparent; + color: var(--muted); + border: 1px solid var(--dim); + border-radius: 3px; + cursor: pointer; + margin-left: auto; + } + + .sidebar-close:hover { + color: var(--text); + border-color: var(--text); + } + + .tree-container { + flex: 1; + overflow: auto; + padding: 4px 0; + } + + .tree-node { + padding: 0 8px; + cursor: pointer; + display: flex; + align-items: baseline; + font-size: 11px; + line-height: 13px; + white-space: nowrap; + } + + .tree-node:hover { + background: var(--selectedBg); + } + + .tree-node.active { + background: var(--selectedBg); + } + + .tree-node.active .tree-content { + font-weight: bold; + } + + .tree-node.in-path { + } + + .tree-prefix { + color: var(--muted); + flex-shrink: 0; + font-family: monospace; + white-space: pre; + } + + .tree-marker { + color: var(--accent); + flex-shrink: 0; + } + + .tree-content { + color: var(--text); + } + + .tree-role-user { + color: var(--accent); + } + + .tree-role-assistant { + color: var(--success); + } + + .tree-role-tool { + color: var(--muted); + } + + .tree-muted { + color: var(--muted); + } + + .tree-error { + color: var(--error); + } + + .tree-compaction { + color: var(--borderAccent); + } + + .tree-branch-summary { + color: var(--warning); + } + + .tree-custom-message { + color: var(--customMessageLabel); + } + + .tree-status { + padding: 4px 12px; + font-size: 10px; + color: var(--muted); + flex-shrink: 0; + } + + /* Main content */ + #content { + flex: 1; + overflow-y: auto; + padding: var(--line-height) calc(var(--line-height) * 2); + display: flex; + flex-direction: column; + align-items: center; + } + + #content > * { + width: 100%; + max-width: 800px; + } + + /* Help bar */ + .help-bar { + font-size: 12px; + color: var(--warning); + margin-bottom: var(--line-height); + } + + /* Header */ + .header { + background: var(--container-bg); + border-radius: 4px; + padding: var(--line-height); + margin-bottom: var(--line-height); + } + + .header h1 { + font-size: 12px; + font-weight: bold; + color: var(--borderAccent); + margin-bottom: var(--line-height); + } + + .header-info { + display: flex; + flex-direction: column; + gap: 0; + font-size: 11px; + } + + .info-item { + color: var(--dim); + display: flex; + align-items: baseline; + } + + .info-label { + font-weight: 600; + margin-right: 8px; + min-width: 100px; + } + + .info-value { + color: var(--text); + flex: 1; + } + + /* Messages */ + #messages { + display: flex; + flex-direction: column; + gap: var(--line-height); + } + + .message-timestamp { + font-size: 10px; + color: var(--dim); + opacity: 0.8; + } + + .user-message { + background: var(--userMessageBg); + color: var(--userMessageText); + padding: var(--line-height); + border-radius: 4px; + } + + .assistant-message { + padding: 0; + } + + .assistant-message > .message-timestamp { + padding-left: var(--line-height); + } + + .assistant-text { + padding: var(--line-height); + padding-bottom: 0; + } + + .message-timestamp + .assistant-text, + .message-timestamp + .thinking-block { + padding-top: 0; + } + + .thinking-block + .assistant-text { + padding-top: 0; + } + + .thinking-text { + padding: var(--line-height); + color: var(--thinkingText); + font-style: italic; + white-space: pre-wrap; + } + + .message-timestamp + .thinking-block .thinking-text, + .message-timestamp + .thinking-block .thinking-collapsed { + padding-top: 0; + } + + .thinking-collapsed { + display: none; + padding: var(--line-height); + color: var(--thinkingText); + font-style: italic; + } + + /* Tool execution */ + .tool-execution { + padding: var(--line-height); + border-radius: 4px; + } + + .tool-execution + .tool-execution { + margin-top: var(--line-height); + } + + .tool-execution.pending { background: var(--toolPendingBg); } + .tool-execution.success { background: var(--toolSuccessBg); } + .tool-execution.error { background: var(--toolErrorBg); } + + .tool-header, .tool-name { + font-weight: bold; + } + + .tool-path { + color: var(--accent); + word-break: break-all; + } + + .line-numbers { + color: var(--warning); + } + + .line-count { + color: var(--dim); + } + + .tool-command { + font-weight: bold; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; + word-break: break-word; + } + + .tool-output { + margin-top: var(--line-height); + color: var(--toolOutput); + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; + word-break: break-word; + font-family: inherit; + overflow-x: auto; + } + + .tool-output > div { + line-height: var(--line-height); + } + + .tool-output pre { + margin: 0; + padding: 0; + font-family: inherit; + color: inherit; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; + } + + .tool-output code { + padding: 0; + background: none; + color: var(--text); + } + + .tool-output.expandable { + cursor: pointer; + } + + .tool-output.expandable:hover { + opacity: 0.9; + } + + .tool-output.expandable .output-full { + display: none; + } + + .tool-output.expandable.expanded .output-preview { + display: none; + } + + .tool-output.expandable.expanded .output-full { + display: block; + } + + .tool-images { + } + + .tool-image { + max-width: 100%; + max-height: 500px; + border-radius: 4px; + margin: var(--line-height) 0; + } + + .expand-hint { + color: var(--toolOutput); + } + + /* Diff */ + .tool-diff { + font-size: 11px; + overflow-x: auto; + white-space: pre; + } + + .diff-added { color: var(--toolDiffAdded); } + .diff-removed { color: var(--toolDiffRemoved); } + .diff-context { color: var(--toolDiffContext); } + + /* Model change */ + .model-change { + padding: 0 var(--line-height); + color: var(--dim); + font-size: 11px; + } + + .model-name { + color: var(--borderAccent); + font-weight: bold; + } + + /* Compaction / Branch Summary - matches customMessage colors from TUI */ + .compaction { + background: var(--customMessageBg); + border-radius: 4px; + padding: var(--line-height); + cursor: pointer; + } + + .compaction-label { + color: var(--customMessageLabel); + font-weight: bold; + } + + .compaction-collapsed { + color: var(--customMessageText); + } + + .compaction-content { + display: none; + color: var(--customMessageText); + white-space: pre-wrap; + margin-top: var(--line-height); + } + + .compaction.expanded .compaction-collapsed { + display: none; + } + + .compaction.expanded .compaction-content { + display: block; + } + + /* System prompt */ + .system-prompt { + background: var(--customMessageBg); + padding: var(--line-height); + border-radius: 4px; + margin-bottom: var(--line-height); + } + + .system-prompt-header { + font-weight: bold; + color: var(--customMessageLabel); + } + + .system-prompt-content { + color: var(--customMessageText); + white-space: pre-wrap; + word-wrap: break-word; + font-size: 11px; + max-height: 200px; + overflow-y: auto; + margin-top: var(--line-height); + } + + /* Tools list */ + .tools-list { + background: var(--customMessageBg); + padding: var(--line-height); + border-radius: 4px; + margin-bottom: var(--line-height); + } + + .tools-header { + font-weight: bold; + color: var(--warning); + } + + .tool-item { + font-size: 11px; + } + + .tool-item-name { + font-weight: bold; + color: var(--text); + } + + .tool-item-desc { + color: var(--dim); + } + + /* Hook/custom messages */ + .hook-message { + background: var(--customMessageBg); + color: var(--customMessageText); + padding: var(--line-height); + border-radius: 4px; + } + + .hook-type { + color: var(--customMessageLabel); + font-weight: bold; + } + + /* Branch summary */ + .branch-summary { + background: var(--customMessageBg); + padding: var(--line-height); + border-radius: 4px; + } + + .branch-summary-header { + font-weight: bold; + color: var(--borderAccent); + } + + /* Error */ + .error-text { + color: var(--error); + padding: 0 var(--line-height); + } + + /* Images */ + .message-images { + margin-bottom: 12px; + } + + .message-image { + max-width: 100%; + max-height: 400px; + border-radius: 4px; + margin: var(--line-height) 0; + } + + /* Markdown content */ + .markdown-content h1, + .markdown-content h2, + .markdown-content h3, + .markdown-content h4, + .markdown-content h5, + .markdown-content h6 { + color: var(--mdHeading); + margin: var(--line-height) 0 0 0; + font-weight: bold; + } + + .markdown-content h1 { font-size: 1em; } + .markdown-content h2 { font-size: 1em; } + .markdown-content h3 { font-size: 1em; } + .markdown-content h4 { font-size: 1em; } + .markdown-content h5 { font-size: 1em; } + .markdown-content h6 { font-size: 1em; } + .markdown-content p { margin: 0; } + .markdown-content p + p { margin-top: var(--line-height); } + + .markdown-content a { + color: var(--mdLink); + text-decoration: underline; + } + + .markdown-content code { + background: rgba(128, 128, 128, 0.2); + color: var(--mdCode); + padding: 0 4px; + border-radius: 3px; + font-family: inherit; + } + + .markdown-content pre { + background: transparent; + margin: var(--line-height) 0; + overflow-x: auto; + } + + .markdown-content pre code { + display: block; + background: none; + color: var(--mdCodeBlock); + padding: var(--line-height); + } + + .markdown-content blockquote { + border-left: 3px solid var(--mdQuoteBorder); + padding-left: var(--line-height); + margin: var(--line-height) 0; + color: var(--mdQuote); + font-style: italic; + } + + .markdown-content ul, + .markdown-content ol { + margin: var(--line-height) 0; + padding-left: calc(var(--line-height) * 2); + } + + .markdown-content li { margin: 0; } + .markdown-content li::marker { color: var(--mdListBullet); } + + .markdown-content hr { + border: none; + border-top: 1px solid var(--mdHr); + margin: var(--line-height) 0; + } + + .markdown-content table { + border-collapse: collapse; + margin: 0.5em 0; + width: 100%; + } + + .markdown-content th, + .markdown-content td { + border: 1px solid var(--mdCodeBlockBorder); + padding: 6px 10px; + text-align: left; + } + + .markdown-content th { + background: rgba(128, 128, 128, 0.1); + font-weight: bold; + } + + .markdown-content img { + max-width: 100%; + border-radius: 4px; + } + + /* Syntax highlighting */ + .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, .hljs-property { color: var(--syntaxVariable); } + .hljs-meta { color: var(--syntaxKeyword); } + .hljs-punctuation, .hljs-operator { color: var(--syntaxOperator); } + .hljs-subst { color: var(--text); } + + /* Footer */ + .footer { + margin-top: 48px; + padding: 20px; + text-align: center; + color: var(--dim); + font-size: 10px; + } + + /* Mobile */ + #hamburger { + display: none; + position: fixed; + top: 10px; + left: 10px; + z-index: 100; + padding: 3px 8px; + font-size: 12px; + font-family: inherit; + background: transparent; + color: var(--muted); + border: 1px solid var(--dim); + border-radius: 3px; + cursor: pointer; + } + + #hamburger:hover { + color: var(--text); + border-color: var(--text); + } + + + + #sidebar-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 98; + } + + @media (max-width: 900px) { + #sidebar { + position: fixed; + left: -400px; + width: 400px; + top: 0; + bottom: 0; + height: 100vh; + z-index: 99; + transition: left 0.3s; + } + + #sidebar.open { + left: 0; + } + + #sidebar-overlay.open { + display: block; + } + + #hamburger { + display: block; + } + + .sidebar-close { + display: block; + } + + #content { + padding: var(--line-height) 16px; + } + + #content > * { + max-width: 100%; + } + } + + @media (max-width: 500px) { + #sidebar { + width: 100vw; + left: -100vw; + } + } + + @media print { + #sidebar, #sidebar-toggle { display: none !important; } + body { background: white; color: black; } + #content { max-width: none; } + } diff --git a/packages/coding-agent/src/core/export-html/template.html b/packages/coding-agent/src/core/export-html/template.html index cdab50bc..42f2a45b 100644 --- a/packages/coding-agent/src/core/export-html/template.html +++ b/packages/coding-agent/src/core/export-html/template.html @@ -3,795 +3,26 @@ - {{TITLE}} + Session Export - - - + -
-
Ctrl+T toggle thinking · Ctrl+O toggle tools
-
- Generated by {{APP_NAME}} on {{GENERATED_DATE}} -
+
+ +
- + + + - + - + diff --git a/packages/coding-agent/src/core/export-html/template.js b/packages/coding-agent/src/core/export-html/template.js new file mode 100644 index 00000000..f0c1dd01 --- /dev/null +++ b/packages/coding-agent/src/core/export-html/template.js @@ -0,0 +1,1160 @@ + (function() { + 'use strict'; + + // ============================================================ + // DATA LOADING + // ============================================================ + + 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; + + // ============================================================ + // DATA STRUCTURES + // ============================================================ + + // Entry lookup by ID + const byId = new Map(); + for (const entry of entries) { + byId.set(entry.id, entry); + } + + // Tool call lookup (toolCallId -> {name, arguments}) + const toolCallMap = new Map(); + for (const entry of entries) { + if (entry.type === 'message' && entry.message.role === 'assistant') { + const content = entry.message.content; + if (Array.isArray(content)) { + for (const block of content) { + if (block.type === 'toolCall') { + toolCallMap.set(block.id, { name: block.name, arguments: block.arguments }); + } + } + } + } + } + + // Label lookup (entryId -> label string) + // Labels are stored in 'label' entries that reference their target via parentId + const labelMap = new Map(); + for (const entry of entries) { + if (entry.type === 'label' && entry.parentId && entry.label) { + labelMap.set(entry.parentId, entry.label); + } + } + + // ============================================================ + // TREE DATA PREPARATION (no DOM, pure data) + // ============================================================ + + /** + * Build tree structure from flat entries. + * Returns array of root nodes, each with { entry, children, label }. + */ + function buildTree() { + const nodeMap = new Map(); + const roots = []; + + // Create nodes + for (const entry of entries) { + nodeMap.set(entry.id, { + entry, + children: [], + label: labelMap.get(entry.id) + }); + } + + // Build parent-child relationships + for (const entry of entries) { + const node = nodeMap.get(entry.id); + if (entry.parentId === null || entry.parentId === undefined || entry.parentId === entry.id) { + roots.push(node); + } else { + const parent = nodeMap.get(entry.parentId); + if (parent) { + parent.children.push(node); + } else { + roots.push(node); + } + } + } + + // Sort children by timestamp + function sortChildren(node) { + node.children.sort((a, b) => + new Date(a.entry.timestamp).getTime() - new Date(b.entry.timestamp).getTime() + ); + node.children.forEach(sortChildren); + } + roots.forEach(sortChildren); + + return roots; + } + + /** + * Build set of entry IDs on path from root to target. + */ + function buildActivePathIds(targetId) { + const ids = new Set(); + let current = byId.get(targetId); + while (current) { + ids.add(current.id); + // Stop if no parent or self-referencing (root) + if (!current.parentId || current.parentId === current.id) { + break; + } + current = byId.get(current.parentId); + } + return ids; + } + + /** + * Get array of entries from root to target (the conversation path). + */ + function getPath(targetId) { + const path = []; + let current = byId.get(targetId); + while (current) { + path.unshift(current); + // Stop if no parent or self-referencing (root) + if (!current.parentId || current.parentId === current.id) { + break; + } + current = byId.get(current.parentId); + } + return path; + } + + /** + * Flatten tree into list with indentation and connector info. + * Returns array of { node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots }. + * Matches tree-selector.ts logic exactly. + */ + function flattenTree(roots, activePathIds) { + const result = []; + const multipleRoots = roots.length > 1; + + // Mark which subtrees contain the active leaf + const containsActive = new Map(); + function markActive(node) { + let has = activePathIds.has(node.entry.id); + for (const child of node.children) { + if (markActive(child)) has = true; + } + containsActive.set(node, has); + return has; + } + roots.forEach(markActive); + + // Stack: [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild] + const stack = []; + + // Add roots (prioritize branch containing active leaf) + const orderedRoots = [...roots].sort((a, b) => + Number(containsActive.get(b)) - Number(containsActive.get(a)) + ); + for (let i = orderedRoots.length - 1; i >= 0; i--) { + const isLast = i === orderedRoots.length - 1; + stack.push([orderedRoots[i], multipleRoots ? 1 : 0, multipleRoots, multipleRoots, isLast, [], multipleRoots]); + } + + while (stack.length > 0) { + const [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild] = stack.pop(); + + result.push({ node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots }); + + const children = node.children; + const multipleChildren = children.length > 1; + + // Order children (active branch first) + const orderedChildren = [...children].sort((a, b) => + Number(containsActive.get(b)) - Number(containsActive.get(a)) + ); + + // Calculate child indent (matches tree-selector.ts) + let childIndent; + if (multipleChildren) { + // Parent branches: children get +1 + childIndent = indent + 1; + } else if (justBranched && indent > 0) { + // First generation after a branch: +1 for visual grouping + childIndent = indent + 1; + } else { + // Single-child chain: stay flat + childIndent = indent; + } + + // Build gutters for children + const connectorDisplayed = showConnector && !isVirtualRootChild; + const currentDisplayIndent = multipleRoots ? Math.max(0, indent - 1) : indent; + const connectorPosition = Math.max(0, currentDisplayIndent - 1); + const childGutters = connectorDisplayed + ? [...gutters, { position: connectorPosition, show: !isLast }] + : gutters; + + // Add children in reverse order for stack + for (let i = orderedChildren.length - 1; i >= 0; i--) { + const childIsLast = i === orderedChildren.length - 1; + stack.push([orderedChildren[i], childIndent, multipleChildren, multipleChildren, childIsLast, childGutters, false]); + } + } + + return result; + } + + /** + * Build ASCII prefix string for tree node. + */ + function buildTreePrefix(flatNode) { + const { indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots } = flatNode; + const displayIndent = multipleRoots ? Math.max(0, indent - 1) : indent; + const connector = showConnector && !isVirtualRootChild ? (isLast ? '└─ ' : '├─ ') : ''; + const connectorPosition = connector ? displayIndent - 1 : -1; + + const totalChars = displayIndent * 3; + const prefixChars = []; + for (let i = 0; i < totalChars; i++) { + const level = Math.floor(i / 3); + const posInLevel = i % 3; + + const gutter = gutters.find(g => g.position === level); + if (gutter) { + prefixChars.push(posInLevel === 0 ? (gutter.show ? '│' : ' ') : ' '); + } else if (connector && level === connectorPosition) { + if (posInLevel === 0) { + prefixChars.push(isLast ? '└' : '├'); + } else if (posInLevel === 1) { + prefixChars.push('─'); + } else { + prefixChars.push(' '); + } + } else { + prefixChars.push(' '); + } + } + return prefixChars.join(''); + } + + // ============================================================ + // FILTERING (pure data) + // ============================================================ + + let filterMode = 'default'; + let searchQuery = ''; + + function hasTextContent(content) { + if (typeof content === 'string') return content.trim().length > 0; + if (Array.isArray(content)) { + for (const c of content) { + if (c.type === 'text' && c.text && c.text.trim().length > 0) return true; + } + } + return false; + } + + function extractContent(content) { + if (typeof content === 'string') return content; + if (Array.isArray(content)) { + return content + .filter(c => c.type === 'text' && c.text) + .map(c => c.text) + .join(''); + } + return ''; + } + + function getSearchableText(entry, label) { + const parts = []; + if (label) parts.push(label); + + switch (entry.type) { + case 'message': { + const msg = entry.message; + parts.push(msg.role); + if (msg.content) parts.push(extractContent(msg.content)); + if (msg.role === 'bashExecution' && msg.command) parts.push(msg.command); + break; + } + case 'custom_message': + parts.push(entry.customType); + parts.push(typeof entry.content === 'string' ? entry.content : extractContent(entry.content)); + break; + case 'compaction': + parts.push('compaction'); + break; + case 'branch_summary': + parts.push('branch summary', entry.summary); + break; + case 'model_change': + parts.push('model', entry.modelId); + break; + case 'thinking_level_change': + parts.push('thinking', entry.thinkingLevel); + break; + } + + return parts.join(' ').toLowerCase(); + } + + /** + * Filter flat nodes based on current filterMode and searchQuery. + */ + function filterNodes(flatNodes, currentLeafId) { + const searchTokens = searchQuery.toLowerCase().split(/\s+/).filter(Boolean); + + return flatNodes.filter(flatNode => { + const entry = flatNode.node.entry; + const label = flatNode.node.label; + const isCurrentLeaf = entry.id === currentLeafId; + + // Always show current leaf + if (isCurrentLeaf) return true; + + // Hide assistant messages with only tool calls (no text) unless error/aborted + if (entry.type === 'message' && entry.message.role === 'assistant') { + const msg = entry.message; + const hasText = hasTextContent(msg.content); + const isErrorOrAborted = msg.stopReason && msg.stopReason !== 'stop' && msg.stopReason !== 'toolUse'; + if (!hasText && !isErrorOrAborted) return false; + } + + // Apply filter mode + const isSettingsEntry = ['label', 'custom', 'model_change', 'thinking_level_change'].includes(entry.type); + let passesFilter = true; + + switch (filterMode) { + case 'user-only': + passesFilter = entry.type === 'message' && entry.message.role === 'user'; + break; + case 'no-tools': + passesFilter = !isSettingsEntry && !(entry.type === 'message' && entry.message.role === 'toolResult'); + break; + case 'labeled-only': + passesFilter = label !== undefined; + break; + case 'all': + passesFilter = true; + break; + default: // 'default' + passesFilter = !isSettingsEntry; + break; + } + + if (!passesFilter) return false; + + // Apply search filter + if (searchTokens.length > 0) { + const nodeText = getSearchableText(entry, label); + if (!searchTokens.every(t => nodeText.includes(t))) return false; + } + + return true; + }); + } + + // ============================================================ + // TREE DISPLAY TEXT (pure data -> string) + // ============================================================ + + function shortenPath(p) { + if (p.startsWith('/Users/')) { + const parts = p.split('/'); + if (parts.length > 2) return '~' + p.slice(('/Users/' + parts[2]).length); + } + if (p.startsWith('/home/')) { + const parts = p.split('/'); + if (parts.length > 2) return '~' + p.slice(('/home/' + parts[2]).length); + } + return p; + } + + function formatToolCall(name, args) { + switch (name) { + case 'read': { + const path = shortenPath(String(args.path || args.file_path || '')); + const offset = args.offset; + const limit = args.limit; + let display = path; + if (offset !== undefined || limit !== undefined) { + const start = offset ?? 1; + const end = limit !== undefined ? start + limit - 1 : ''; + display += `:${start}${end ? `-${end}` : ''}`; + } + return `[read: ${display}]`; + } + case 'write': + return `[write: ${shortenPath(String(args.path || args.file_path || ''))}]`; + case 'edit': + return `[edit: ${shortenPath(String(args.path || args.file_path || ''))}]`; + case 'bash': { + const rawCmd = String(args.command || ''); + const cmd = rawCmd.replace(/[\n\t]/g, ' ').trim().slice(0, 50); + return `[bash: ${cmd}${rawCmd.length > 50 ? '...' : ''}]`; + } + case 'grep': + return `[grep: /${args.pattern || ''}/ in ${shortenPath(String(args.path || '.'))}]`; + case 'find': + return `[find: ${args.pattern || ''} in ${shortenPath(String(args.path || '.'))}]`; + case 'ls': + return `[ls: ${shortenPath(String(args.path || '.'))}]`; + default: { + const argsStr = JSON.stringify(args).slice(0, 40); + return `[${name}: ${argsStr}${JSON.stringify(args).length > 40 ? '...' : ''}]`; + } + } + } + + function escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + /** + * Truncate string to maxLen chars, append "..." if truncated. + */ + function truncate(s, maxLen = 100) { + if (s.length <= maxLen) return s; + return s.slice(0, maxLen) + '...'; + } + + /** + * Get display text for tree node (returns HTML string). + */ + function getTreeNodeDisplayHtml(entry, label) { + const normalize = s => s.replace(/[\n\t]/g, ' ').trim(); + const labelHtml = label ? `[${escapeHtml(label)}] ` : ''; + + switch (entry.type) { + case 'message': { + const msg = entry.message; + if (msg.role === 'user') { + const content = truncate(normalize(extractContent(msg.content))); + return labelHtml + `user: ${escapeHtml(content)}`; + } + if (msg.role === 'assistant') { + const textContent = truncate(normalize(extractContent(msg.content))); + if (textContent) { + return labelHtml + `assistant: ${escapeHtml(textContent)}`; + } + if (msg.stopReason === 'aborted') { + return labelHtml + `assistant: (aborted)`; + } + if (msg.errorMessage) { + return labelHtml + `assistant: ${escapeHtml(truncate(msg.errorMessage))}`; + } + return labelHtml + `assistant: (no text)`; + } + if (msg.role === 'toolResult') { + const toolCall = msg.toolCallId ? toolCallMap.get(msg.toolCallId) : null; + if (toolCall) { + return labelHtml + `${escapeHtml(formatToolCall(toolCall.name, toolCall.arguments))}`; + } + return labelHtml + `[${msg.toolName || 'tool'}]`; + } + if (msg.role === 'bashExecution') { + const cmd = truncate(normalize(msg.command || '')); + return labelHtml + `[bash]: ${escapeHtml(cmd)}`; + } + return labelHtml + `[${msg.role}]`; + } + case 'compaction': + return labelHtml + `[compaction: ${Math.round(entry.tokensBefore/1000)}k tokens]`; + case 'branch_summary': { + const summary = truncate(normalize(entry.summary || '')); + return labelHtml + `[branch summary]: ${escapeHtml(summary)}`; + } + case 'custom_message': { + const content = typeof entry.content === 'string' ? entry.content : extractContent(entry.content); + return labelHtml + `[${escapeHtml(entry.customType)}]: ${escapeHtml(truncate(normalize(content)))}`; + } + case 'model_change': + return labelHtml + `[model: ${entry.modelId}]`; + case 'thinking_level_change': + return labelHtml + `[thinking: ${entry.thinkingLevel}]`; + default: + return labelHtml + `[${entry.type}]`; + } + } + + // ============================================================ + // TREE RENDERING (DOM manipulation) + // ============================================================ + + let currentLeafId = leafId; + let treeRendered = false; + + function renderTree() { + const tree = buildTree(); + const activePathIds = buildActivePathIds(currentLeafId); + const flatNodes = flattenTree(tree, activePathIds); + const filtered = filterNodes(flatNodes, currentLeafId); + const container = document.getElementById('tree-container'); + + // Full render only on first call or when filter/search changes + if (!treeRendered) { + container.innerHTML = ''; + + for (const flatNode of filtered) { + const entry = flatNode.node.entry; + const isOnPath = activePathIds.has(entry.id); + const isLeaf = entry.id === currentLeafId; + + const div = document.createElement('div'); + div.className = 'tree-node'; + if (isOnPath) div.classList.add('in-path'); + if (isLeaf) div.classList.add('active'); + div.dataset.id = entry.id; + + const prefix = buildTreePrefix(flatNode); + const prefixSpan = document.createElement('span'); + prefixSpan.className = 'tree-prefix'; + prefixSpan.textContent = prefix; + + const marker = document.createElement('span'); + marker.className = 'tree-marker'; + marker.textContent = isOnPath ? '•' : ' '; + + const content = document.createElement('span'); + content.className = 'tree-content'; + content.innerHTML = getTreeNodeDisplayHtml(entry, flatNode.node.label); + + div.appendChild(prefixSpan); + div.appendChild(marker); + div.appendChild(content); + div.addEventListener('click', () => navigateTo(entry.id)); + + container.appendChild(div); + } + + treeRendered = true; + } else { + // Just update markers and classes + const nodes = container.querySelectorAll('.tree-node'); + for (const node of nodes) { + const id = node.dataset.id; + const isOnPath = activePathIds.has(id); + const isLeaf = id === currentLeafId; + + node.classList.toggle('in-path', isOnPath); + node.classList.toggle('active', isLeaf); + + const marker = node.querySelector('.tree-marker'); + if (marker) { + marker.textContent = isOnPath ? '•' : ' '; + } + } + } + + document.getElementById('tree-status').textContent = `${filtered.length} / ${flatNodes.length} entries`; + + // Scroll active node into view after layout + setTimeout(() => { + const activeNode = container.querySelector('.tree-node.active'); + if (activeNode) { + activeNode.scrollIntoView({ block: 'nearest' }); + } + }, 0); + } + + function forceTreeRerender() { + treeRendered = false; + renderTree(); + } + + // ============================================================ + // MESSAGE RENDERING + // ============================================================ + + function formatTokens(count) { + if (count < 1000) return count.toString(); + if (count < 10000) return (count / 1000).toFixed(1) + 'k'; + if (count < 1000000) return Math.round(count / 1000) + 'k'; + return (count / 1000000).toFixed(1) + 'M'; + } + + function formatTimestamp(ts) { + if (!ts) return ''; + const date = new Date(ts); + return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' }); + } + + function replaceTabs(text) { + return text.replace(/\t/g, ' '); + } + + function getLanguageFromPath(filePath) { + const ext = filePath.split('.').pop()?.toLowerCase(); + const extToLang = { + ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript', + py: 'python', rb: 'ruby', rs: 'rust', go: 'go', java: 'java', + c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp', cs: 'csharp', + php: 'php', sh: 'bash', bash: 'bash', zsh: 'bash', + sql: 'sql', html: 'html', css: 'css', scss: 'scss', + json: 'json', yaml: 'yaml', yml: 'yaml', xml: 'xml', + md: 'markdown', dockerfile: 'dockerfile' + }; + return extToLang[ext]; + } + + function findToolResult(toolCallId) { + for (const entry of entries) { + if (entry.type === 'message' && entry.message.role === 'toolResult') { + if (entry.message.toolCallId === toolCallId) { + return entry.message; + } + } + } + return null; + } + + function formatExpandableOutput(text, maxLines, lang) { + text = replaceTabs(text); + const lines = text.split('\n'); + const displayLines = lines.slice(0, maxLines); + const remaining = lines.length - maxLines; + + if (lang) { + let highlighted; + try { + highlighted = hljs.highlight(text, { language: lang }).value; + } catch { + highlighted = escapeHtml(text); + } + + if (remaining > 0) { + const previewCode = displayLines.join('\n'); + let previewHighlighted; + try { + previewHighlighted = hljs.highlight(previewCode, { language: lang }).value; + } catch { + previewHighlighted = escapeHtml(previewCode); + } + + return ``; + } + + return `
${highlighted}
`; + } + + // Plain text output + if (remaining > 0) { + let out = ''; + return out; + } + + let out = '
'; + for (const line of displayLines) { + out += `
${escapeHtml(replaceTabs(line))}
`; + } + out += '
'; + return out; + } + + function renderToolCall(call) { + const result = findToolResult(call.id); + const isError = result?.isError || false; + const statusClass = result ? (isError ? 'error' : 'success') : 'pending'; + + const getResultText = () => { + if (!result) return ''; + const textBlocks = result.content.filter(c => c.type === 'text'); + return textBlocks.map(c => c.text).join('\n'); + }; + + const getResultImages = () => { + if (!result) return []; + return result.content.filter(c => c.type === 'image'); + }; + + const renderResultImages = () => { + const images = getResultImages(); + if (images.length === 0) return ''; + return '
' + + images.map(img => ``).join('') + + '
'; + }; + + let html = `
`; + const args = call.arguments || {}; + const name = call.name; + + switch (name) { + case 'bash': { + const command = args.command || ''; + html += `
$ ${escapeHtml(command)}
`; + if (result) { + const output = getResultText().trim(); + if (output) html += formatExpandableOutput(output, 5); + } + break; + } + case 'read': { + const filePath = args.file_path || args.path || ''; + const offset = args.offset; + const limit = args.limit; + const lang = getLanguageFromPath(filePath); + + let pathHtml = escapeHtml(shortenPath(filePath)); + if (offset !== undefined || limit !== undefined) { + const startLine = offset ?? 1; + const endLine = limit !== undefined ? startLine + limit - 1 : ''; + pathHtml += `:${startLine}${endLine ? '-' + endLine : ''}`; + } + + html += `
read ${pathHtml}
`; + if (result) { + html += renderResultImages(); + const output = getResultText(); + if (output) html += formatExpandableOutput(output, 10, lang); + } + break; + } + case 'write': { + const filePath = args.file_path || args.path || ''; + const content = args.content || ''; + const lines = content.split('\n'); + const lang = getLanguageFromPath(filePath); + + html += `
write ${escapeHtml(shortenPath(filePath))}`; + if (lines.length > 10) html += ` (${lines.length} lines)`; + html += '
'; + + if (content) html += formatExpandableOutput(content, 10, lang); + if (result) { + const output = getResultText().trim(); + if (output) html += `
${escapeHtml(output)}
`; + } + break; + } + case 'edit': { + const filePath = args.file_path || args.path || ''; + html += `
edit ${escapeHtml(shortenPath(filePath))}
`; + + if (result?.details?.diff) { + const diffLines = result.details.diff.split('\n'); + html += '
'; + for (const line of diffLines) { + const cls = line.match(/^\+/) ? 'diff-added' : line.match(/^-/) ? 'diff-removed' : 'diff-context'; + html += `
${escapeHtml(replaceTabs(line))}
`; + } + html += '
'; + } else if (result) { + const output = getResultText().trim(); + if (output) html += `
${escapeHtml(output)}
`; + } + break; + } + default: { + html += `
${escapeHtml(name)}
`; + html += `
${escapeHtml(JSON.stringify(args, null, 2))}
`; + if (result) { + const output = getResultText(); + if (output) html += formatExpandableOutput(output, 10); + } + } + } + + html += '
'; + return html; + } + + function renderEntry(entry) { + const ts = formatTimestamp(entry.timestamp); + const tsHtml = ts ? `
${ts}
` : ''; + const entryId = `entry-${entry.id}`; + + if (entry.type === 'message') { + const msg = entry.message; + + if (msg.role === 'user') { + let html = `
${tsHtml}`; + const content = msg.content; + + if (Array.isArray(content)) { + const images = content.filter(c => c.type === 'image'); + if (images.length > 0) { + html += '
'; + for (const img of images) { + html += ``; + } + html += '
'; + } + } + + const text = typeof content === 'string' ? content : + content.filter(c => c.type === 'text').map(c => c.text).join('\n'); + if (text.trim()) { + html += `
${safeMarkedParse(text)}
`; + } + html += '
'; + return html; + } + + if (msg.role === 'assistant') { + let html = `
${tsHtml}`; + + for (const block of msg.content) { + if (block.type === 'text' && block.text.trim()) { + html += `
${safeMarkedParse(block.text)}
`; + } else if (block.type === 'thinking' && block.thinking.trim()) { + html += `
+
${escapeHtml(block.thinking)}
+
Thinking ...
+
`; + } + } + + for (const block of msg.content) { + if (block.type === 'toolCall') { + html += renderToolCall(block); + } + } + + if (msg.stopReason === 'aborted') { + html += '
Aborted
'; + } else if (msg.stopReason === 'error') { + html += `
Error: ${escapeHtml(msg.errorMessage || 'Unknown error')}
`; + } + + html += '
'; + return html; + } + + if (msg.role === 'bashExecution') { + const isError = msg.cancelled || (msg.exitCode !== 0 && msg.exitCode !== null); + let html = `
${tsHtml}`; + html += `
$ ${escapeHtml(msg.command)}
`; + if (msg.output) html += formatExpandableOutput(msg.output, 10); + if (msg.cancelled) { + html += '
(cancelled)
'; + } else if (msg.exitCode !== 0 && msg.exitCode !== null) { + html += `
(exit ${msg.exitCode})
`; + } + html += '
'; + return html; + } + + if (msg.role === 'toolResult') return ''; + } + + if (entry.type === 'model_change') { + return `
${tsHtml}Switched to model: ${escapeHtml(entry.provider)}/${escapeHtml(entry.modelId)}
`; + } + + if (entry.type === 'compaction') { + return `
+
[compaction]
+
Compacted from ${entry.tokensBefore.toLocaleString()} tokens
+
Compacted from ${entry.tokensBefore.toLocaleString()} tokens\n\n${escapeHtml(entry.summary)}
+
`; + } + + if (entry.type === 'branch_summary') { + return `
${tsHtml} +
Branch Summary
+
${safeMarkedParse(entry.summary)}
+
`; + } + + if (entry.type === 'custom_message' && entry.display) { + return `
${tsHtml} +
[${escapeHtml(entry.customType)}]
+
${safeMarkedParse(typeof entry.content === 'string' ? entry.content : JSON.stringify(entry.content))}
+
`; + } + + return ''; + } + + // ============================================================ + // HEADER / STATS + // ============================================================ + + function computeStats(entryList) { + let userMessages = 0, assistantMessages = 0, toolResults = 0; + let customMessages = 0, compactions = 0, branchSummaries = 0, toolCalls = 0; + const tokens = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }; + const cost = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }; + const models = new Set(); + + for (const entry of entryList) { + if (entry.type === 'message') { + const msg = entry.message; + if (msg.role === 'user') userMessages++; + if (msg.role === 'assistant') { + assistantMessages++; + if (msg.model) models.add(msg.provider ? `${msg.provider}/${msg.model}` : msg.model); + if (msg.usage) { + tokens.input += msg.usage.input || 0; + tokens.output += msg.usage.output || 0; + tokens.cacheRead += msg.usage.cacheRead || 0; + tokens.cacheWrite += msg.usage.cacheWrite || 0; + if (msg.usage.cost) { + cost.input += msg.usage.cost.input || 0; + cost.output += msg.usage.cost.output || 0; + cost.cacheRead += msg.usage.cost.cacheRead || 0; + cost.cacheWrite += msg.usage.cost.cacheWrite || 0; + } + } + toolCalls += msg.content.filter(c => c.type === 'toolCall').length; + } + if (msg.role === 'toolResult') toolResults++; + } else if (entry.type === 'compaction') { + compactions++; + } else if (entry.type === 'branch_summary') { + branchSummaries++; + } else if (entry.type === 'custom_message') { + customMessages++; + } + } + + return { userMessages, assistantMessages, toolResults, customMessages, compactions, branchSummaries, toolCalls, tokens, cost, models: Array.from(models) }; + } + + const globalStats = computeStats(entries); + + function renderHeader() { + const totalCost = globalStats.cost.input + globalStats.cost.output + globalStats.cost.cacheRead + globalStats.cost.cacheWrite; + + const tokenParts = []; + if (globalStats.tokens.input) tokenParts.push(`↑${formatTokens(globalStats.tokens.input)}`); + if (globalStats.tokens.output) tokenParts.push(`↓${formatTokens(globalStats.tokens.output)}`); + if (globalStats.tokens.cacheRead) tokenParts.push(`R${formatTokens(globalStats.tokens.cacheRead)}`); + if (globalStats.tokens.cacheWrite) tokenParts.push(`W${formatTokens(globalStats.tokens.cacheWrite)}`); + + const msgParts = []; + if (globalStats.userMessages) msgParts.push(`${globalStats.userMessages} user`); + if (globalStats.assistantMessages) msgParts.push(`${globalStats.assistantMessages} assistant`); + if (globalStats.toolResults) msgParts.push(`${globalStats.toolResults} tool results`); + if (globalStats.customMessages) msgParts.push(`${globalStats.customMessages} custom`); + if (globalStats.compactions) msgParts.push(`${globalStats.compactions} compactions`); + if (globalStats.branchSummaries) msgParts.push(`${globalStats.branchSummaries} branch summaries`); + + let html = ` +
+

Session: ${escapeHtml(header?.id || 'unknown')}

+
Ctrl+T toggle thinking · Ctrl+O toggle tools
+
+
Date:${header?.timestamp ? new Date(header.timestamp).toLocaleString() : 'unknown'}
+
Models:${globalStats.models.join(', ') || 'unknown'}
+
Messages:${msgParts.join(', ') || '0'}
+
Tool Calls:${globalStats.toolCalls}
+
Tokens:${tokenParts.join(' ') || '0'}
+
Cost:$${totalCost.toFixed(3)}
+
+
`; + + if (systemPrompt) { + html += `
+
System Prompt
+
${escapeHtml(systemPrompt)}
+
`; + } + + if (tools && tools.length > 0) { + html += `
+
Available Tools
+
+ ${tools.map(t => `
${escapeHtml(t.name)} - ${escapeHtml(t.description)}
`).join('')} +
+
`; + } + + return html; + } + + // ============================================================ + // NAVIGATION + // ============================================================ + + // Cache for rendered entry DOM nodes + const entryCache = new Map(); + + function renderEntryToNode(entry) { + // Check cache first + if (entryCache.has(entry.id)) { + return entryCache.get(entry.id).cloneNode(true); + } + + // Render to HTML string, then parse to node + const html = renderEntry(entry); + if (!html) return null; + + const template = document.createElement('template'); + template.innerHTML = html; + const node = template.content.firstElementChild; + + // Cache the node + if (node) { + entryCache.set(entry.id, node.cloneNode(true)); + } + return node; + } + + function navigateTo(targetId, scrollMode = 'target') { + currentLeafId = targetId; + const path = getPath(targetId); + + renderTree(); + + document.getElementById('header-container').innerHTML = renderHeader(); + + // Build messages using cached DOM nodes + const messagesEl = document.getElementById('messages'); + const fragment = document.createDocumentFragment(); + + for (const entry of path) { + const node = renderEntryToNode(entry); + if (node) { + fragment.appendChild(node); + } + } + + messagesEl.innerHTML = ''; + messagesEl.appendChild(fragment); + + // Use setTimeout(0) to ensure DOM is fully laid out before scrolling + setTimeout(() => { + const content = document.getElementById('content'); + if (scrollMode === 'bottom') { + content.scrollTop = content.scrollHeight; + } else if (scrollMode === 'target') { + const targetEl = document.getElementById(`entry-${targetId}`); + if (targetEl) { + targetEl.scrollIntoView({ block: 'center' }); + } + } + }, 0); + } + + // ============================================================ + // INITIALIZATION + // ============================================================ + + // Wrapper for marked that escapes HTML before parsing + // Escapes all < that look like tag starts (followed by letter or /) + // Code blocks are safe because marked processes them before our escaping affects display + function safeMarkedParse(text) { + const escaped = text.replace(/<(?=[a-zA-Z\/])/g, '<'); + return marked.parse(escaped); + } + + // Configure marked + marked.setOptions({ + breaks: true, + gfm: true, + highlight: function(code, lang) { + if (lang && hljs.getLanguage(lang)) { + try { + return hljs.highlight(code, { language: lang }).value; + } catch {} + } + return escapeHtml(code); + } + }); + + // Search input + const searchInput = document.getElementById('tree-search'); + searchInput.addEventListener('input', (e) => { + searchQuery = e.target.value; + forceTreeRerender(); + }); + + // Filter buttons + document.querySelectorAll('.filter-btn').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + filterMode = btn.dataset.filter; + forceTreeRerender(); + }); + }); + + // Sidebar toggle + const sidebar = document.getElementById('sidebar'); + const overlay = document.getElementById('sidebar-overlay'); + const hamburger = document.getElementById('hamburger'); + + hamburger.addEventListener('click', () => { + sidebar.classList.add('open'); + overlay.classList.add('open'); + hamburger.style.display = 'none'; + }); + + const closeSidebar = () => { + sidebar.classList.remove('open'); + overlay.classList.remove('open'); + hamburger.style.display = ''; + }; + + overlay.addEventListener('click', closeSidebar); + document.getElementById('sidebar-close').addEventListener('click', closeSidebar); + + // Toggle states + let thinkingExpanded = true; + let toolOutputsExpanded = false; + + 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' : 'block'; + }); + }; + + const toggleToolOutputs = () => { + toolOutputsExpanded = !toolOutputsExpanded; + document.querySelectorAll('.tool-output.expandable').forEach(el => { + el.classList.toggle('expanded', toolOutputsExpanded); + }); + document.querySelectorAll('.compaction').forEach(el => { + el.classList.toggle('expanded', toolOutputsExpanded); + }); + }; + + // Keyboard shortcuts + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + searchInput.value = ''; + searchQuery = ''; + navigateTo(leafId, 'bottom'); + } + if (e.ctrlKey && e.key === 't') { + e.preventDefault(); + toggleThinking(); + } + if (e.ctrlKey && e.key === 'o') { + e.preventDefault(); + toggleToolOutputs(); + } + }); + + // Initial render - don't scroll, stay at top + if (leafId) { + navigateTo(leafId, 'none'); + } else if (entries.length > 0) { + // Fallback: use last entry if no leafId + navigateTo(entries[entries.length - 1].id, 'none'); + } + })(); diff --git a/packages/coding-agent/src/modes/interactive/interactive-mode.ts b/packages/coding-agent/src/modes/interactive/interactive-mode.ts index 29a3cd1c..b0e4b7ff 100644 --- a/packages/coding-agent/src/modes/interactive/interactive-mode.ts +++ b/packages/coding-agent/src/modes/interactive/interactive-mode.ts @@ -23,7 +23,7 @@ import { TUI, visibleWidth, } from "@mariozechner/pi-tui"; -import { exec, spawnSync } from "child_process"; +import { exec, spawn, spawnSync } from "child_process"; import { APP_NAME, getAuthPath, getDebugLogPath } from "../../config.js"; import type { AgentSession, AgentSessionEvent } from "../../core/agent-session.js"; import type { CustomToolSessionEvent, LoadedCustomTool } from "../../core/custom-tools/index.js"; @@ -173,6 +173,7 @@ export class InteractiveMode { { name: "settings", description: "Open settings menu" }, { name: "model", description: "Select model (opens selector UI)" }, { name: "export", description: "Export session to HTML file" }, + { name: "share", description: "Share session as a secret GitHub gist" }, { name: "copy", description: "Copy last agent message to clipboard" }, { name: "session", description: "Show session info and stats" }, { name: "changelog", description: "Show changelog entries" }, @@ -675,6 +676,11 @@ export class InteractiveMode { this.editor.setText(""); return; } + if (text === "/share") { + await this.handleShareCommand(); + this.editor.setText(""); + return; + } if (text === "/copy") { this.handleCopyCommand(); this.editor.setText(""); @@ -1914,6 +1920,85 @@ export class InteractiveMode { } } + private async handleShareCommand(): Promise { + // Check if gh is available and logged in + try { + const authResult = spawnSync("gh", ["auth", "status"], { encoding: "utf-8" }); + if (authResult.status !== 0) { + this.showError("GitHub CLI is not logged in. Run 'gh auth login' first."); + return; + } + } catch { + this.showError("GitHub CLI (gh) is not installed. Install it from https://cli.github.com/"); + return; + } + + // Export to a temp file + const tmpFile = path.join(os.tmpdir(), "session.html"); + try { + this.session.exportToHtml(tmpFile); + } catch (error: unknown) { + this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`); + return; + } + + // Show loader while creating gist + const loader = new Loader( + this.ui, + (spinner) => theme.fg("accent", spinner), + (text) => theme.fg("muted", text), + "Creating gist...", + ); + this.statusContainer.addChild(loader); + this.ui.requestRender(); + + // Create a secret gist asynchronously + try { + const result = await new Promise<{ stdout: string; stderr: string; code: number | null }>((resolve) => { + const proc = spawn("gh", ["gist", "create", "--public=false", tmpFile]); + let stdout = ""; + let stderr = ""; + proc.stdout.on("data", (data) => { + stdout += data.toString(); + }); + proc.stderr.on("data", (data) => { + stderr += data.toString(); + }); + proc.on("close", (code) => resolve({ stdout, stderr, code })); + }); + + if (result.code !== 0) { + const errorMsg = result.stderr?.trim() || "Unknown error"; + this.showError(`Failed to create gist: ${errorMsg}`); + return; + } + + // Extract gist ID from the URL returned by gh + // gh returns something like: https://gist.github.com/username/GIST_ID + const gistUrl = result.stdout?.trim(); + const gistId = gistUrl?.split("/").pop(); + if (!gistId) { + this.showError("Failed to parse gist ID from gh output"); + return; + } + + // Create the preview URL + const previewUrl = `https://shittycodingagent.ai/session?${gistId}`; + this.showStatus(`Share URL: ${previewUrl}\nGist: ${gistUrl}`); + } catch (error: unknown) { + this.showError(`Failed to create gist: ${error instanceof Error ? error.message : "Unknown error"}`); + } finally { + // Stop loader and clean up + loader.stop(); + this.statusContainer.clear(); + try { + fs.unlinkSync(tmpFile); + } catch { + // Ignore cleanup errors + } + } + } + private handleCopyCommand(): void { const text = this.session.getLastAssistantText(); if (!text) {