@mariozechner/pi-coding-agent 0.30.1 → 0.31.0

package/dist/core/export-html.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"export-html.d.ts","sourceRoot":"","sources":["../../src/core/export-html.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAU9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAkyC3D,MAAM,WAAW,aAAa;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,UAAU,EACjB,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,GAC9B,MAAM,CA6BR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAsB1F","sourcesContent":["import type { AgentState } from \"@mariozechner/pi-agent-core\";\nimport type { AssistantMessage, ImageContent, Message, ToolResultMessage, UserMessage } from \"@mariozechner/pi-ai\";\nimport { existsSync, readFileSync, writeFileSync } from \"fs\";\nimport hljs from \"highlight.js\";\nimport { marked } from \"marked\";\nimport { homedir } from \"os\";\nimport * as path from \"path\";\nimport { basename } from \"path\";\nimport { APP_NAME, getCustomThemesDir, getThemesDir, VERSION } from \"../config.js\";\nimport { type BashExecutionMessage, isBashExecutionMessage } from \"./messages.js\";\nimport type { SessionManager } from \"./session-manager.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface MessageEvent {\n\ttype: \"message\";\n\tmessage: Message;\n\ttimestamp?: number;\n}\n\ninterface ModelChangeEvent {\n\ttype: \"model_change\";\n\tprovider: string;\n\tmodelId: string;\n\ttimestamp?: number;\n}\n\ninterface CompactionEvent {\n\ttype: \"compaction\";\n\ttimestamp: string;\n\tsummary: string;\n\ttokensBefore: number;\n}\n\ntype SessionEvent = MessageEvent | ModelChangeEvent | CompactionEvent;\n\ninterface ParsedSessionData {\n\tsessionId: string;\n\ttimestamp: string;\n\tsystemPrompt?: string;\n\tmodelsUsed: Set<string>;\n\tmessages: Message[];\n\ttoolResultsMap: Map<string, ToolResultMessage>;\n\tsessionEvents: SessionEvent[];\n\ttokenStats: { input: number; output: number; cacheRead: number; cacheWrite: number };\n\tcostStats: { input: number; output: number; cacheRead: number; cacheWrite: number };\n\ttools?: { name: string; description: string }[];\n\tcontextWindow?: number;\n\tisStreamingFormat?: boolean;\n}\n\n// ============================================================================\n// Theme Types and Loading\n// ============================================================================\n\ninterface ThemeJson {\n\tname: string;\n\tvars?: Record<string, string | number>;\n\tcolors: Record<string, string | number>;\n}\n\ninterface ThemeColors {\n\t// Core UI\n\taccent: string;\n\tborder: string;\n\tborderAccent: string;\n\tsuccess: string;\n\terror: string;\n\twarning: string;\n\tmuted: string;\n\tdim: string;\n\ttext: string;\n\t// Backgrounds\n\tuserMessageBg: string;\n\tuserMessageText: string;\n\ttoolPendingBg: string;\n\ttoolSuccessBg: string;\n\ttoolErrorBg: string;\n\ttoolOutput: string;\n\t// Markdown\n\tmdHeading: string;\n\tmdLink: string;\n\tmdLinkUrl: string;\n\tmdCode: string;\n\tmdCodeBlock: string;\n\tmdCodeBlockBorder: string;\n\tmdQuote: string;\n\tmdQuoteBorder: string;\n\tmdHr: string;\n\tmdListBullet: string;\n\t// Diffs\n\ttoolDiffAdded: string;\n\ttoolDiffRemoved: string;\n\ttoolDiffContext: string;\n\t// Syntax highlighting\n\tsyntaxComment: string;\n\tsyntaxKeyword: string;\n\tsyntaxFunction: string;\n\tsyntaxVariable: string;\n\tsyntaxString: string;\n\tsyntaxNumber: string;\n\tsyntaxType: string;\n\tsyntaxOperator: string;\n\tsyntaxPunctuation: string;\n}\n\n/** Resolve a theme color value, following variable references until we get a final value. */\nfunction resolveColorValue(\n\tvalue: string | number,\n\tvars: Record<string, string | number>,\n\tdefaultValue: string,\n\tvisited = new Set<string>(),\n): string {\n\tif (value === \"\") return defaultValue;\n\tif (typeof value !== \"string\") return defaultValue;\n\tif (visited.has(value)) return defaultValue;\n\tif (!(value in vars)) return value; // Return as-is (hex colors work in CSS)\n\tvisited.add(value);\n\treturn resolveColorValue(vars[value], vars, defaultValue, visited);\n}\n\n/** Load theme JSON from built-in or custom themes directory. */\nfunction loadThemeJson(name: string): ThemeJson | null {\n\t// Try built-in themes first\n\tconst themesDir = getThemesDir();\n\tconst builtinPath = path.join(themesDir, `${name}.json`);\n\tif (existsSync(builtinPath)) {\n\t\ttry {\n\t\t\treturn JSON.parse(readFileSync(builtinPath, \"utf-8\")) as ThemeJson;\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t// Try custom themes\n\tconst customThemesDir = getCustomThemesDir();\n\tconst customPath = path.join(customThemesDir, `${name}.json`);\n\tif (existsSync(customPath)) {\n\t\ttry {\n\t\t\treturn JSON.parse(readFileSync(customPath, \"utf-8\")) as ThemeJson;\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn null;\n}\n\n/** Build complete theme colors object, resolving theme JSON values against defaults. */\nfunction getThemeColors(themeName?: string): ThemeColors {\n\tconst isLight = isLightTheme(themeName);\n\n\t// Default colors based on theme type\n\tconst defaultColors: ThemeColors = isLight\n\t\t? {\n\t\t\t\t// Light theme defaults\n\t\t\t\taccent: \"rgb(95, 135, 135)\",\n\t\t\t\tborder: \"rgb(95, 135, 175)\",\n\t\t\t\tborderAccent: \"rgb(95, 135, 135)\",\n\t\t\t\tsuccess: \"rgb(135, 175, 135)\",\n\t\t\t\terror: \"rgb(175, 95, 95)\",\n\t\t\t\twarning: \"rgb(215, 175, 95)\",\n\t\t\t\tmuted: \"rgb(108, 108, 108)\",\n\t\t\t\tdim: \"rgb(138, 138, 138)\",\n\t\t\t\ttext: \"rgb(0, 0, 0)\",\n\t\t\t\tuserMessageBg: \"rgb(232, 232, 232)\",\n\t\t\t\tuserMessageText: \"rgb(0, 0, 0)\",\n\t\t\t\ttoolPendingBg: \"rgb(232, 232, 240)\",\n\t\t\t\ttoolSuccessBg: \"rgb(232, 240, 232)\",\n\t\t\t\ttoolErrorBg: \"rgb(240, 232, 232)\",\n\t\t\t\ttoolOutput: \"rgb(108, 108, 108)\",\n\t\t\t\tmdHeading: \"rgb(215, 175, 95)\",\n\t\t\t\tmdLink: \"rgb(95, 135, 175)\",\n\t\t\t\tmdLinkUrl: \"rgb(138, 138, 138)\",\n\t\t\t\tmdCode: \"rgb(95, 135, 135)\",\n\t\t\t\tmdCodeBlock: \"rgb(135, 175, 135)\",\n\t\t\t\tmdCodeBlockBorder: \"rgb(108, 108, 108)\",\n\t\t\t\tmdQuote: \"rgb(108, 108, 108)\",\n\t\t\t\tmdQuoteBorder: \"rgb(108, 108, 108)\",\n\t\t\t\tmdHr: \"rgb(108, 108, 108)\",\n\t\t\t\tmdListBullet: \"rgb(135, 175, 135)\",\n\t\t\t\ttoolDiffAdded: \"rgb(135, 175, 135)\",\n\t\t\t\ttoolDiffRemoved: \"rgb(175, 95, 95)\",\n\t\t\t\ttoolDiffContext: \"rgb(108, 108, 108)\",\n\t\t\t\tsyntaxComment: \"rgb(0, 128, 0)\",\n\t\t\t\tsyntaxKeyword: \"rgb(0, 0, 255)\",\n\t\t\t\tsyntaxFunction: \"rgb(121, 94, 38)\",\n\t\t\t\tsyntaxVariable: \"rgb(0, 16, 128)\",\n\t\t\t\tsyntaxString: \"rgb(163, 21, 21)\",\n\t\t\t\tsyntaxNumber: \"rgb(9, 134, 88)\",\n\t\t\t\tsyntaxType: \"rgb(38, 127, 153)\",\n\t\t\t\tsyntaxOperator: \"rgb(0, 0, 0)\",\n\t\t\t\tsyntaxPunctuation: \"rgb(0, 0, 0)\",\n\t\t\t}\n\t\t: {\n\t\t\t\t// Dark theme defaults\n\t\t\t\taccent: \"rgb(138, 190, 183)\",\n\t\t\t\tborder: \"rgb(95, 135, 255)\",\n\t\t\t\tborderAccent: \"rgb(0, 215, 255)\",\n\t\t\t\tsuccess: \"rgb(181, 189, 104)\",\n\t\t\t\terror: \"rgb(204, 102, 102)\",\n\t\t\t\twarning: \"rgb(255, 255, 0)\",\n\t\t\t\tmuted: \"rgb(128, 128, 128)\",\n\t\t\t\tdim: \"rgb(102, 102, 102)\",\n\t\t\t\ttext: \"rgb(229, 229, 231)\",\n\t\t\t\tuserMessageBg: \"rgb(52, 53, 65)\",\n\t\t\t\tuserMessageText: \"rgb(229, 229, 231)\",\n\t\t\t\ttoolPendingBg: \"rgb(40, 40, 50)\",\n\t\t\t\ttoolSuccessBg: \"rgb(40, 50, 40)\",\n\t\t\t\ttoolErrorBg: \"rgb(60, 40, 40)\",\n\t\t\t\ttoolOutput: \"rgb(128, 128, 128)\",\n\t\t\t\tmdHeading: \"rgb(240, 198, 116)\",\n\t\t\t\tmdLink: \"rgb(129, 162, 190)\",\n\t\t\t\tmdLinkUrl: \"rgb(102, 102, 102)\",\n\t\t\t\tmdCode: \"rgb(138, 190, 183)\",\n\t\t\t\tmdCodeBlock: \"rgb(181, 189, 104)\",\n\t\t\t\tmdCodeBlockBorder: \"rgb(128, 128, 128)\",\n\t\t\t\tmdQuote: \"rgb(128, 128, 128)\",\n\t\t\t\tmdQuoteBorder: \"rgb(128, 128, 128)\",\n\t\t\t\tmdHr: \"rgb(128, 128, 128)\",\n\t\t\t\tmdListBullet: \"rgb(138, 190, 183)\",\n\t\t\t\ttoolDiffAdded: \"rgb(181, 189, 104)\",\n\t\t\t\ttoolDiffRemoved: \"rgb(204, 102, 102)\",\n\t\t\t\ttoolDiffContext: \"rgb(128, 128, 128)\",\n\t\t\t\tsyntaxComment: \"rgb(106, 153, 85)\",\n\t\t\t\tsyntaxKeyword: \"rgb(86, 156, 214)\",\n\t\t\t\tsyntaxFunction: \"rgb(220, 220, 170)\",\n\t\t\t\tsyntaxVariable: \"rgb(156, 220, 254)\",\n\t\t\t\tsyntaxString: \"rgb(206, 145, 120)\",\n\t\t\t\tsyntaxNumber: \"rgb(181, 206, 168)\",\n\t\t\t\tsyntaxType: \"rgb(78, 201, 176)\",\n\t\t\t\tsyntaxOperator: \"rgb(212, 212, 212)\",\n\t\t\t\tsyntaxPunctuation: \"rgb(212, 212, 212)\",\n\t\t\t};\n\n\tif (!themeName) return defaultColors;\n\n\tconst themeJson = loadThemeJson(themeName);\n\tif (!themeJson) return defaultColors;\n\n\tconst vars = themeJson.vars || {};\n\tconst colors = themeJson.colors;\n\n\tconst resolve = (key: keyof ThemeColors): string => {\n\t\tconst value = colors[key];\n\t\tif (value === undefined) return defaultColors[key];\n\t\treturn resolveColorValue(value, vars, defaultColors[key]);\n\t};\n\n\treturn {\n\t\taccent: resolve(\"accent\"),\n\t\tborder: resolve(\"border\"),\n\t\tborderAccent: resolve(\"borderAccent\"),\n\t\tsuccess: resolve(\"success\"),\n\t\terror: resolve(\"error\"),\n\t\twarning: resolve(\"warning\"),\n\t\tmuted: resolve(\"muted\"),\n\t\tdim: resolve(\"dim\"),\n\t\ttext: resolve(\"text\"),\n\t\tuserMessageBg: resolve(\"userMessageBg\"),\n\t\tuserMessageText: resolve(\"userMessageText\"),\n\t\ttoolPendingBg: resolve(\"toolPendingBg\"),\n\t\ttoolSuccessBg: resolve(\"toolSuccessBg\"),\n\t\ttoolErrorBg: resolve(\"toolErrorBg\"),\n\t\ttoolOutput: resolve(\"toolOutput\"),\n\t\tmdHeading: resolve(\"mdHeading\"),\n\t\tmdLink: resolve(\"mdLink\"),\n\t\tmdLinkUrl: resolve(\"mdLinkUrl\"),\n\t\tmdCode: resolve(\"mdCode\"),\n\t\tmdCodeBlock: resolve(\"mdCodeBlock\"),\n\t\tmdCodeBlockBorder: resolve(\"mdCodeBlockBorder\"),\n\t\tmdQuote: resolve(\"mdQuote\"),\n\t\tmdQuoteBorder: resolve(\"mdQuoteBorder\"),\n\t\tmdHr: resolve(\"mdHr\"),\n\t\tmdListBullet: resolve(\"mdListBullet\"),\n\t\ttoolDiffAdded: resolve(\"toolDiffAdded\"),\n\t\ttoolDiffRemoved: resolve(\"toolDiffRemoved\"),\n\t\ttoolDiffContext: resolve(\"toolDiffContext\"),\n\t\tsyntaxComment: resolve(\"syntaxComment\"),\n\t\tsyntaxKeyword: resolve(\"syntaxKeyword\"),\n\t\tsyntaxFunction: resolve(\"syntaxFunction\"),\n\t\tsyntaxVariable: resolve(\"syntaxVariable\"),\n\t\tsyntaxString: resolve(\"syntaxString\"),\n\t\tsyntaxNumber: resolve(\"syntaxNumber\"),\n\t\tsyntaxType: resolve(\"syntaxType\"),\n\t\tsyntaxOperator: resolve(\"syntaxOperator\"),\n\t\tsyntaxPunctuation: resolve(\"syntaxPunctuation\"),\n\t};\n}\n\n/** Check if theme is a light theme (currently only matches \"light\" exactly). */\nfunction isLightTheme(themeName?: string): boolean {\n\treturn themeName === \"light\";\n}\n\n// ============================================================================\n// Utility functions\n// ============================================================================\n\nfunction escapeHtml(text: string): string {\n\treturn text\n\t\t.replace(/&/g, \"&amp;\")\n\t\t.replace(/</g, \"&lt;\")\n\t\t.replace(/>/g, \"&gt;\")\n\t\t.replace(/\"/g, \"&quot;\")\n\t\t.replace(/'/g, \"&#039;\");\n}\n\nfunction shortenPath(path: string): string {\n\tconst home = homedir();\n\treturn path.startsWith(home) ? `~${path.slice(home.length)}` : path;\n}\n\nfunction replaceTabs(text: string): string {\n\treturn text.replace(/\\t/g, \"   \");\n}\n\nfunction formatTimestamp(timestamp: number | string | undefined): string {\n\tif (!timestamp) return \"\";\n\tconst date = new Date(typeof timestamp === \"string\" ? timestamp : timestamp);\n\treturn date.toLocaleTimeString(undefined, { hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" });\n}\n\n/** Highlight code using highlight.js. Returns HTML with syntax highlighting spans. */\nfunction highlightCode(code: string, lang?: string): string {\n\tif (!lang) {\n\t\treturn escapeHtml(code);\n\t}\n\ttry {\n\t\t// Check if language is supported\n\t\tif (hljs.getLanguage(lang)) {\n\t\t\treturn hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;\n\t\t}\n\t\t// Try common aliases\n\t\tconst aliases: Record<string, string> = {\n\t\t\tts: \"typescript\",\n\t\t\tjs: \"javascript\",\n\t\t\tpy: \"python\",\n\t\t\trb: \"ruby\",\n\t\t\tsh: \"bash\",\n\t\t\tyml: \"yaml\",\n\t\t\tmd: \"markdown\",\n\t\t};\n\t\tconst aliasedLang = aliases[lang];\n\t\tif (aliasedLang && hljs.getLanguage(aliasedLang)) {\n\t\t\treturn hljs.highlight(code, { language: aliasedLang, ignoreIllegals: true }).value;\n\t\t}\n\t} catch {\n\t\t// Fall through to escaped output\n\t}\n\treturn escapeHtml(code);\n}\n\n/** Get language from file path extension. */\nfunction getLanguageFromPath(filePath: string): string | undefined {\n\tconst ext = filePath.split(\".\").pop()?.toLowerCase();\n\tif (!ext) return undefined;\n\n\tconst extToLang: Record<string, string> = {\n\t\tts: \"typescript\",\n\t\ttsx: \"typescript\",\n\t\tjs: \"javascript\",\n\t\tjsx: \"javascript\",\n\t\tmjs: \"javascript\",\n\t\tcjs: \"javascript\",\n\t\tpy: \"python\",\n\t\trb: \"ruby\",\n\t\trs: \"rust\",\n\t\tgo: \"go\",\n\t\tjava: \"java\",\n\t\tkt: \"kotlin\",\n\t\tswift: \"swift\",\n\t\tc: \"c\",\n\t\th: \"c\",\n\t\tcpp: \"cpp\",\n\t\tcc: \"cpp\",\n\t\tcxx: \"cpp\",\n\t\thpp: \"cpp\",\n\t\tcs: \"csharp\",\n\t\tphp: \"php\",\n\t\tsh: \"bash\",\n\t\tbash: \"bash\",\n\t\tzsh: \"bash\",\n\t\tfish: \"bash\",\n\t\tps1: \"powershell\",\n\t\tsql: \"sql\",\n\t\thtml: \"html\",\n\t\thtm: \"html\",\n\t\txml: \"xml\",\n\t\tcss: \"css\",\n\t\tscss: \"scss\",\n\t\tsass: \"scss\",\n\t\tless: \"less\",\n\t\tjson: \"json\",\n\t\tyaml: \"yaml\",\n\t\tyml: \"yaml\",\n\t\ttoml: \"toml\",\n\t\tini: \"ini\",\n\t\tmd: \"markdown\",\n\t\tmarkdown: \"markdown\",\n\t\tdockerfile: \"dockerfile\",\n\t\tmakefile: \"makefile\",\n\t\tcmake: \"cmake\",\n\t\tlua: \"lua\",\n\t\tr: \"r\",\n\t\tscala: \"scala\",\n\t\tclj: \"clojure\",\n\t\tcljs: \"clojure\",\n\t\tex: \"elixir\",\n\t\texs: \"elixir\",\n\t\terl: \"erlang\",\n\t\thrl: \"erlang\",\n\t\ths: \"haskell\",\n\t\tml: \"ocaml\",\n\t\tmli: \"ocaml\",\n\t\tfs: \"fsharp\",\n\t\tfsx: \"fsharp\",\n\t\tvue: \"vue\",\n\t\tsvelte: \"xml\",\n\t\ttf: \"hcl\",\n\t\thcl: \"hcl\",\n\t\tproto: \"protobuf\",\n\t\tgraphql: \"graphql\",\n\t\tgql: \"graphql\",\n\t};\n\n\treturn extToLang[ext];\n}\n\n/** Render markdown to HTML server-side with TUI-style code block formatting and syntax highlighting. */\nfunction renderMarkdown(text: string): string {\n\t// Custom renderer for code blocks to match TUI style\n\tconst renderer = new marked.Renderer();\n\trenderer.code = ({ text: code, lang }: { text: string; lang?: string }) => {\n\t\tconst language = lang || \"\";\n\t\tconst highlighted = highlightCode(code, lang);\n\t\treturn (\n\t\t\t'<div class=\"code-block-wrapper\">' +\n\t\t\t`<div class=\"code-block-header\">\\`\\`\\`${language}</div>` +\n\t\t\t`<pre><code class=\"hljs\">${highlighted}</code></pre>` +\n\t\t\t'<div class=\"code-block-footer\">```</div>' +\n\t\t\t\"</div>\"\n\t\t);\n\t};\n\n\t// Configure marked for safe rendering\n\tmarked.setOptions({\n\t\tbreaks: true,\n\t\tgfm: true,\n\t});\n\n\t// Parse markdown (marked escapes HTML by default in newer versions)\n\treturn marked.parse(text, { renderer }) as string;\n}\n\nfunction formatExpandableOutput(lines: string[], maxLines: number, lang?: string): string {\n\tconst displayLines = lines.slice(0, maxLines);\n\tconst remaining = lines.length - maxLines;\n\n\t// If language is provided, highlight the entire code block\n\tif (lang) {\n\t\tconst code = lines.join(\"\\n\");\n\t\tconst highlighted = highlightCode(code, lang);\n\n\t\tif (remaining > 0) {\n\t\t\t// For expandable, we need preview and full versions\n\t\t\tconst previewCode = displayLines.join(\"\\n\");\n\t\t\tconst previewHighlighted = highlightCode(previewCode, lang);\n\n\t\t\tlet out = '<div class=\"tool-output expandable\" onclick=\"this.classList.toggle(\\'expanded\\')\">';\n\t\t\tout += `<div class=\"output-preview\"><pre><code class=\"hljs\">${previewHighlighted}</code></pre>`;\n\t\t\tout += `<div class=\"expand-hint\">... (${remaining} more lines) - click to expand</div>`;\n\t\t\tout += \"</div>\";\n\t\t\tout += `<div class=\"output-full\"><pre><code class=\"hljs\">${highlighted}</code></pre></div></div>`;\n\t\t\treturn out;\n\t\t}\n\n\t\treturn `<div class=\"tool-output\"><pre><code class=\"hljs\">${highlighted}</code></pre></div>`;\n\t}\n\n\t// No language - plain text output\n\tif (remaining > 0) {\n\t\tlet out = '<div class=\"tool-output expandable\" onclick=\"this.classList.toggle(\\'expanded\\')\">';\n\t\tout += '<div class=\"output-preview\">';\n\t\tfor (const line of displayLines) {\n\t\t\tout += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n\t\t}\n\t\tout += `<div class=\"expand-hint\">... (${remaining} more lines) - click to expand</div>`;\n\t\tout += \"</div>\";\n\t\tout += '<div class=\"output-full\">';\n\t\tfor (const line of lines) {\n\t\t\tout += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n\t\t}\n\t\tout += \"</div></div>\";\n\t\treturn out;\n\t}\n\n\tlet out = '<div class=\"tool-output\">';\n\tfor (const line of displayLines) {\n\t\tout += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n\t}\n\tout += \"</div>\";\n\treturn out;\n}\n\n// ============================================================================\n// Parsing functions\n// ============================================================================\n\nfunction parseSessionManagerFormat(lines: string[]): ParsedSessionData {\n\tconst data: ParsedSessionData = {\n\t\tsessionId: \"unknown\",\n\t\ttimestamp: new Date().toISOString(),\n\t\tmodelsUsed: new Set(),\n\t\tmessages: [],\n\t\ttoolResultsMap: new Map(),\n\t\tsessionEvents: [],\n\t\ttokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },\n\t\tcostStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },\n\t};\n\n\tfor (const line of lines) {\n\t\tlet entry: { type: string; [key: string]: unknown };\n\t\ttry {\n\t\t\tentry = JSON.parse(line) as { type: string; [key: string]: unknown };\n\t\t} catch {\n\t\t\tcontinue;\n\t\t}\n\n\t\tswitch (entry.type) {\n\t\t\tcase \"session\":\n\t\t\t\tdata.sessionId = (entry.id as string) || \"unknown\";\n\t\t\t\tdata.timestamp = (entry.timestamp as string) || data.timestamp;\n\t\t\t\tdata.systemPrompt = entry.systemPrompt as string | undefined;\n\t\t\t\tif (entry.modelId) {\n\t\t\t\t\tconst modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : (entry.modelId as string);\n\t\t\t\t\tdata.modelsUsed.add(modelInfo);\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"message\": {\n\t\t\t\tconst message = entry.message as Message;\n\t\t\t\tdata.messages.push(message);\n\t\t\t\tdata.sessionEvents.push({\n\t\t\t\t\ttype: \"message\",\n\t\t\t\t\tmessage,\n\t\t\t\t\ttimestamp: entry.timestamp as number | undefined,\n\t\t\t\t});\n\n\t\t\t\tif (message.role === \"toolResult\") {\n\t\t\t\t\tconst toolResult = message as ToolResultMessage;\n\t\t\t\t\tdata.toolResultsMap.set(toolResult.toolCallId, toolResult);\n\t\t\t\t} else if (message.role === \"assistant\") {\n\t\t\t\t\tconst assistantMsg = message as AssistantMessage;\n\t\t\t\t\tif (assistantMsg.usage) {\n\t\t\t\t\t\tdata.tokenStats.input += assistantMsg.usage.input || 0;\n\t\t\t\t\t\tdata.tokenStats.output += assistantMsg.usage.output || 0;\n\t\t\t\t\t\tdata.tokenStats.cacheRead += assistantMsg.usage.cacheRead || 0;\n\t\t\t\t\t\tdata.tokenStats.cacheWrite += assistantMsg.usage.cacheWrite || 0;\n\t\t\t\t\t\tif (assistantMsg.usage.cost) {\n\t\t\t\t\t\t\tdata.costStats.input += assistantMsg.usage.cost.input || 0;\n\t\t\t\t\t\t\tdata.costStats.output += assistantMsg.usage.cost.output || 0;\n\t\t\t\t\t\t\tdata.costStats.cacheRead += assistantMsg.usage.cost.cacheRead || 0;\n\t\t\t\t\t\t\tdata.costStats.cacheWrite += assistantMsg.usage.cost.cacheWrite || 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"model_change\":\n\t\t\t\tdata.sessionEvents.push({\n\t\t\t\t\ttype: \"model_change\",\n\t\t\t\t\tprovider: entry.provider as string,\n\t\t\t\t\tmodelId: entry.modelId as string,\n\t\t\t\t\ttimestamp: entry.timestamp as number | undefined,\n\t\t\t\t});\n\t\t\t\tif (entry.modelId) {\n\t\t\t\t\tconst modelInfo = entry.provider ? `${entry.provider}/${entry.modelId}` : (entry.modelId as string);\n\t\t\t\t\tdata.modelsUsed.add(modelInfo);\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"compaction\":\n\t\t\t\tdata.sessionEvents.push({\n\t\t\t\t\ttype: \"compaction\",\n\t\t\t\t\ttimestamp: entry.timestamp as string,\n\t\t\t\t\tsummary: entry.summary as string,\n\t\t\t\t\ttokensBefore: entry.tokensBefore as number,\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn data;\n}\n\nfunction parseStreamingEventFormat(lines: string[]): ParsedSessionData {\n\tconst data: ParsedSessionData = {\n\t\tsessionId: \"unknown\",\n\t\ttimestamp: new Date().toISOString(),\n\t\tmodelsUsed: new Set(),\n\t\tmessages: [],\n\t\ttoolResultsMap: new Map(),\n\t\tsessionEvents: [],\n\t\ttokenStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },\n\t\tcostStats: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },\n\t\tisStreamingFormat: true,\n\t};\n\n\tlet timestampSet = false;\n\n\tfor (const line of lines) {\n\t\tlet entry: { type: string; message?: Message };\n\t\ttry {\n\t\t\tentry = JSON.parse(line) as { type: string; message?: Message };\n\t\t} catch {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (entry.type === \"message_end\" && entry.message) {\n\t\t\tconst msg = entry.message;\n\t\t\tdata.messages.push(msg);\n\t\t\tdata.sessionEvents.push({\n\t\t\t\ttype: \"message\",\n\t\t\t\tmessage: msg,\n\t\t\t\ttimestamp: (msg as { timestamp?: number }).timestamp,\n\t\t\t});\n\n\t\t\tif (msg.role === \"toolResult\") {\n\t\t\t\tconst toolResult = msg as ToolResultMessage;\n\t\t\t\tdata.toolResultsMap.set(toolResult.toolCallId, toolResult);\n\t\t\t} else if (msg.role === \"assistant\") {\n\t\t\t\tconst assistantMsg = msg as AssistantMessage;\n\t\t\t\tif (assistantMsg.model) {\n\t\t\t\t\tconst modelInfo = assistantMsg.provider\n\t\t\t\t\t\t? `${assistantMsg.provider}/${assistantMsg.model}`\n\t\t\t\t\t\t: assistantMsg.model;\n\t\t\t\t\tdata.modelsUsed.add(modelInfo);\n\t\t\t\t}\n\t\t\t\tif (assistantMsg.usage) {\n\t\t\t\t\tdata.tokenStats.input += assistantMsg.usage.input || 0;\n\t\t\t\t\tdata.tokenStats.output += assistantMsg.usage.output || 0;\n\t\t\t\t\tdata.tokenStats.cacheRead += assistantMsg.usage.cacheRead || 0;\n\t\t\t\t\tdata.tokenStats.cacheWrite += assistantMsg.usage.cacheWrite || 0;\n\t\t\t\t\tif (assistantMsg.usage.cost) {\n\t\t\t\t\t\tdata.costStats.input += assistantMsg.usage.cost.input || 0;\n\t\t\t\t\t\tdata.costStats.output += assistantMsg.usage.cost.output || 0;\n\t\t\t\t\t\tdata.costStats.cacheRead += assistantMsg.usage.cost.cacheRead || 0;\n\t\t\t\t\t\tdata.costStats.cacheWrite += assistantMsg.usage.cost.cacheWrite || 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (!timestampSet && (msg as { timestamp?: number }).timestamp) {\n\t\t\t\tdata.timestamp = new Date((msg as { timestamp: number }).timestamp).toISOString();\n\t\t\t\ttimestampSet = true;\n\t\t\t}\n\t\t}\n\t}\n\n\tdata.sessionId = `stream-${data.timestamp.replace(/[:.]/g, \"-\")}`;\n\treturn data;\n}\n\nfunction detectFormat(lines: string[]): \"session-manager\" | \"streaming-events\" | \"unknown\" {\n\tfor (const line of lines) {\n\t\ttry {\n\t\t\tconst entry = JSON.parse(line) as { type: string };\n\t\t\tif (entry.type === \"session\") return \"session-manager\";\n\t\t\tif (entry.type === \"agent_start\" || entry.type === \"message_start\" || entry.type === \"turn_start\") {\n\t\t\t\treturn \"streaming-events\";\n\t\t\t}\n\t\t} catch {}\n\t}\n\treturn \"unknown\";\n}\n\nfunction parseSessionFile(content: string): ParsedSessionData {\n\tconst lines = content\n\t\t.trim()\n\t\t.split(\"\\n\")\n\t\t.filter((l) => l.trim());\n\n\tif (lines.length === 0) {\n\t\tthrow new Error(\"Empty session file\");\n\t}\n\n\tconst format = detectFormat(lines);\n\tif (format === \"unknown\") {\n\t\tthrow new Error(\"Unknown session file format\");\n\t}\n\n\treturn format === \"session-manager\" ? parseSessionManagerFormat(lines) : parseStreamingEventFormat(lines);\n}\n\n// ============================================================================\n// HTML formatting functions\n// ============================================================================\n\nfunction formatToolExecution(\n\ttoolName: string,\n\targs: Record<string, unknown>,\n\tresult: ToolResultMessage | undefined,\n\tcolors: ThemeColors,\n): { html: string; bgColor: string } {\n\tlet html = \"\";\n\tconst isError = result?.isError || false;\n\tconst bgColor = result ? (isError ? colors.toolErrorBg : colors.toolSuccessBg) : colors.toolPendingBg;\n\n\tconst getTextOutput = (): string => {\n\t\tif (!result) return \"\";\n\t\tconst textBlocks = result.content.filter((c) => c.type === \"text\");\n\t\treturn textBlocks.map((c) => (c as { type: \"text\"; text: string }).text).join(\"\\n\");\n\t};\n\n\tswitch (toolName) {\n\t\tcase \"bash\": {\n\t\t\tconst command = (args?.command as string) || \"\";\n\t\t\thtml = `<div class=\"tool-command\">$ ${escapeHtml(command || \"...\")}</div>`;\n\t\t\tif (result) {\n\t\t\t\tconst output = getTextOutput().trim();\n\t\t\t\tif (output) {\n\t\t\t\t\thtml += formatExpandableOutput(output.split(\"\\n\"), 5);\n\t\t\t\t}\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\n\t\tcase \"read\": {\n\t\t\tconst filePath = (args?.file_path as string) || (args?.path as string) || \"\";\n\t\t\tconst shortenedPath = shortenPath(filePath);\n\t\t\tconst offset = args?.offset as number | undefined;\n\t\t\tconst limit = args?.limit as number | undefined;\n\t\t\tconst lang = getLanguageFromPath(filePath);\n\n\t\t\t// Build path display with offset/limit suffix\n\t\t\tlet pathHtml = escapeHtml(shortenedPath || \"...\");\n\t\t\tif (offset !== undefined || limit !== undefined) {\n\t\t\t\tconst startLine = offset ?? 1;\n\t\t\t\tconst endLine = limit !== undefined ? startLine + limit - 1 : \"\";\n\t\t\t\tpathHtml += `<span class=\"line-numbers\">:${startLine}${endLine ? `-${endLine}` : \"\"}</span>`;\n\t\t\t}\n\n\t\t\thtml = `<div class=\"tool-header\"><span class=\"tool-name\">read</span> <span class=\"tool-path\">${pathHtml}</span></div>`;\n\t\t\tif (result) {\n\t\t\t\tconst output = getTextOutput();\n\t\t\t\tif (output) {\n\t\t\t\t\thtml += formatExpandableOutput(output.split(\"\\n\"), 10, lang);\n\t\t\t\t}\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\n\t\tcase \"write\": {\n\t\t\tconst filePath = (args?.file_path as string) || (args?.path as string) || \"\";\n\t\t\tconst shortenedPath = shortenPath(filePath);\n\t\t\tconst fileContent = (args?.content as string) || \"\";\n\t\t\tconst lines = fileContent ? fileContent.split(\"\\n\") : [];\n\t\t\tconst lang = getLanguageFromPath(filePath);\n\n\t\t\thtml = `<div class=\"tool-header\"><span class=\"tool-name\">write</span> <span class=\"tool-path\">${escapeHtml(shortenedPath || \"...\")}</span>`;\n\t\t\tif (lines.length > 10) {\n\t\t\t\thtml += ` <span class=\"line-count\">(${lines.length} lines)</span>`;\n\t\t\t}\n\t\t\thtml += \"</div>\";\n\n\t\t\tif (fileContent) {\n\t\t\t\thtml += formatExpandableOutput(lines, 10, lang);\n\t\t\t}\n\t\t\tif (result) {\n\t\t\t\tconst output = getTextOutput().trim();\n\t\t\t\tif (output) {\n\t\t\t\t\thtml += `<div class=\"tool-output\"><div>${escapeHtml(output)}</div></div>`;\n\t\t\t\t}\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\n\t\tcase \"edit\": {\n\t\t\tconst path = shortenPath((args?.file_path as string) || (args?.path as string) || \"\");\n\t\t\thtml = `<div class=\"tool-header\"><span class=\"tool-name\">edit</span> <span class=\"tool-path\">${escapeHtml(path || \"...\")}</span></div>`;\n\n\t\t\tif (result?.details?.diff) {\n\t\t\t\tconst diffLines = result.details.diff.split(\"\\n\");\n\t\t\t\thtml += '<div class=\"tool-diff\">';\n\t\t\t\tfor (const line of diffLines) {\n\t\t\t\t\tif (line.startsWith(\"+\")) {\n\t\t\t\t\t\thtml += `<div class=\"diff-line-new\">${escapeHtml(line)}</div>`;\n\t\t\t\t\t} else if (line.startsWith(\"-\")) {\n\t\t\t\t\t\thtml += `<div class=\"diff-line-old\">${escapeHtml(line)}</div>`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\thtml += `<div class=\"diff-line-context\">${escapeHtml(line)}</div>`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\thtml += \"</div>\";\n\t\t\t}\n\t\t\tif (result) {\n\t\t\t\tconst output = getTextOutput().trim();\n\t\t\t\tif (output) {\n\t\t\t\t\thtml += `<div class=\"tool-output\"><div>${escapeHtml(output)}</div></div>`;\n\t\t\t\t}\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\n\t\tdefault: {\n\t\t\thtml = `<div class=\"tool-header\"><span class=\"tool-name\">${escapeHtml(toolName)}</span></div>`;\n\t\t\thtml += `<div class=\"tool-output\"><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></div>`;\n\t\t\tif (result) {\n\t\t\t\tconst output = getTextOutput();\n\t\t\t\tif (output) {\n\t\t\t\t\thtml += `<div class=\"tool-output\"><div>${escapeHtml(output)}</div></div>`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn { html, bgColor };\n}\n\nfunction formatMessage(message: Message, toolResultsMap: Map<string, ToolResultMessage>, colors: ThemeColors): string {\n\tlet html = \"\";\n\tconst timestamp = (message as { timestamp?: number }).timestamp;\n\tconst timestampHtml = timestamp ? `<div class=\"message-timestamp\">${formatTimestamp(timestamp)}</div>` : \"\";\n\n\t// Handle bash execution messages (user-executed via ! command)\n\tif (isBashExecutionMessage(message)) {\n\t\tconst bashMsg = message as unknown as BashExecutionMessage;\n\t\tconst isError = bashMsg.cancelled || (bashMsg.exitCode !== 0 && bashMsg.exitCode !== null);\n\n\t\thtml += `<div class=\"tool-execution user-bash${isError ? \" user-bash-error\" : \"\"}\">`;\n\t\thtml += timestampHtml;\n\t\thtml += `<div class=\"tool-command\">$ ${escapeHtml(bashMsg.command)}</div>`;\n\n\t\tif (bashMsg.output) {\n\t\t\tconst lines = bashMsg.output.split(\"\\n\");\n\t\t\thtml += formatExpandableOutput(lines, 10);\n\t\t}\n\n\t\tif (bashMsg.cancelled) {\n\t\t\thtml += `<div class=\"bash-status warning\">(cancelled)</div>`;\n\t\t} else if (bashMsg.exitCode !== 0 && bashMsg.exitCode !== null) {\n\t\t\thtml += `<div class=\"bash-status error\">(exit ${bashMsg.exitCode})</div>`;\n\t\t}\n\n\t\tif (bashMsg.truncated && bashMsg.fullOutputPath) {\n\t\t\thtml += `<div class=\"bash-truncation warning\">Output truncated. Full output: ${escapeHtml(bashMsg.fullOutputPath)}</div>`;\n\t\t}\n\n\t\thtml += `</div>`;\n\t\treturn html;\n\t}\n\n\tif (message.role === \"user\") {\n\t\tconst userMsg = message as UserMessage;\n\t\tlet textContent = \"\";\n\t\tconst images: ImageContent[] = [];\n\n\t\tif (typeof userMsg.content === \"string\") {\n\t\t\ttextContent = userMsg.content;\n\t\t} else {\n\t\t\tfor (const block of userMsg.content) {\n\t\t\t\tif (block.type === \"text\") {\n\t\t\t\t\ttextContent += block.text;\n\t\t\t\t} else if (block.type === \"image\") {\n\t\t\t\t\timages.push(block as ImageContent);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\thtml += `<div class=\"user-message\">${timestampHtml}`;\n\n\t\t// Render images first\n\t\tif (images.length > 0) {\n\t\t\thtml += `<div class=\"message-images\">`;\n\t\t\tfor (const img of images) {\n\t\t\t\thtml += `<img src=\"data:${img.mimeType};base64,${img.data}\" alt=\"User uploaded image\" class=\"message-image\" />`;\n\t\t\t}\n\t\t\thtml += `</div>`;\n\t\t}\n\n\t\t// Render text as markdown (server-side)\n\t\tif (textContent.trim()) {\n\t\t\thtml += `<div class=\"markdown-content\">${renderMarkdown(textContent)}</div>`;\n\t\t}\n\n\t\thtml += `</div>`;\n\t} else if (message.role === \"assistant\") {\n\t\tconst assistantMsg = message as AssistantMessage;\n\t\thtml += timestampHtml ? `<div class=\"assistant-message\">${timestampHtml}` : \"\";\n\n\t\tfor (const content of assistantMsg.content) {\n\t\t\tif (content.type === \"text\" && content.text.trim()) {\n\t\t\t\t// Render markdown server-side\n\t\t\t\thtml += `<div class=\"assistant-text markdown-content\">${renderMarkdown(content.text)}</div>`;\n\t\t\t} else if (content.type === \"thinking\" && content.thinking.trim()) {\n\t\t\t\thtml += `<div class=\"thinking-text\">${escapeHtml(content.thinking.trim()).replace(/\\n/g, \"<br>\")}</div>`;\n\t\t\t}\n\t\t}\n\n\t\tfor (const content of assistantMsg.content) {\n\t\t\tif (content.type === \"toolCall\") {\n\t\t\t\tconst toolResult = toolResultsMap.get(content.id);\n\t\t\t\tconst { html: toolHtml, bgColor } = formatToolExecution(\n\t\t\t\t\tcontent.name,\n\t\t\t\t\tcontent.arguments as Record<string, unknown>,\n\t\t\t\t\ttoolResult,\n\t\t\t\t\tcolors,\n\t\t\t\t);\n\t\t\t\thtml += `<div class=\"tool-execution\" style=\"background-color: ${bgColor}\">${toolHtml}</div>`;\n\t\t\t}\n\t\t}\n\n\t\tconst hasToolCalls = assistantMsg.content.some((c) => c.type === \"toolCall\");\n\t\tif (!hasToolCalls) {\n\t\t\tif (assistantMsg.stopReason === \"aborted\") {\n\t\t\t\thtml += '<div class=\"error-text\">Aborted</div>';\n\t\t\t} else if (assistantMsg.stopReason === \"error\") {\n\t\t\t\thtml += `<div class=\"error-text\">Error: ${escapeHtml(assistantMsg.errorMessage || \"Unknown error\")}</div>`;\n\t\t\t}\n\t\t}\n\n\t\tif (timestampHtml) {\n\t\t\thtml += \"</div>\";\n\t\t}\n\t}\n\n\treturn html;\n}\n\nfunction formatModelChange(event: ModelChangeEvent): string {\n\tconst timestamp = formatTimestamp(event.timestamp);\n\tconst timestampHtml = timestamp ? `<div class=\"message-timestamp\">${timestamp}</div>` : \"\";\n\tconst modelInfo = `${event.provider}/${event.modelId}`;\n\treturn `<div class=\"model-change\">${timestampHtml}<div class=\"model-change-text\">Switched to model: <span class=\"model-name\">${escapeHtml(modelInfo)}</span></div></div>`;\n}\n\nfunction formatCompaction(event: CompactionEvent): string {\n\tconst timestamp = formatTimestamp(event.timestamp);\n\tconst timestampHtml = timestamp ? `<div class=\"message-timestamp\">${timestamp}</div>` : \"\";\n\tconst summaryHtml = escapeHtml(event.summary).replace(/\\n/g, \"<br>\");\n\n\treturn `<div class=\"compaction-container\">\n\t\t<div class=\"compaction-header\" onclick=\"this.parentElement.classList.toggle('expanded')\">\n\t\t\t${timestampHtml}\n\t\t\t<div class=\"compaction-header-row\">\n\t\t\t\t<span class=\"compaction-toggle\">▶</span>\n\t\t\t\t<span class=\"compaction-title\">Context compacted from ${event.tokensBefore.toLocaleString()} tokens</span>\n\t\t\t\t<span class=\"compaction-hint\">(click to expand summary)</span>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"compaction-content\">\n\t\t\t<div class=\"compaction-summary\">\n\t\t\t\t<div class=\"compaction-summary-header\">Summary sent to model</div>\n\t\t\t\t<div class=\"compaction-summary-content\">${summaryHtml}</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>`;\n}\n\n// ============================================================================\n// HTML generation\n// ============================================================================\n\nfunction generateHtml(data: ParsedSessionData, filename: string, colors: ThemeColors, isLight: boolean): string {\n\tconst userMessages = data.messages.filter((m) => m.role === \"user\").length;\n\tconst assistantMessages = data.messages.filter((m) => m.role === \"assistant\").length;\n\n\tlet toolCallsCount = 0;\n\tfor (const message of data.messages) {\n\t\tif (message.role === \"assistant\") {\n\t\t\ttoolCallsCount += (message as AssistantMessage).content.filter((c) => c.type === \"toolCall\").length;\n\t\t}\n\t}\n\n\tconst lastAssistantMessage = data.messages\n\t\t.slice()\n\t\t.reverse()\n\t\t.find((m) => m.role === \"assistant\" && (m as AssistantMessage).stopReason !== \"aborted\") as\n\t\t| AssistantMessage\n\t\t| undefined;\n\n\tconst contextTokens = lastAssistantMessage\n\t\t? lastAssistantMessage.usage.input +\n\t\t\tlastAssistantMessage.usage.output +\n\t\t\tlastAssistantMessage.usage.cacheRead +\n\t\t\tlastAssistantMessage.usage.cacheWrite\n\t\t: 0;\n\n\tconst lastModel = lastAssistantMessage?.model || \"unknown\";\n\tconst lastProvider = lastAssistantMessage?.provider || \"\";\n\tconst lastModelInfo = lastProvider ? `${lastProvider}/${lastModel}` : lastModel;\n\n\tconst contextWindow = data.contextWindow || 0;\n\tconst contextPercent = contextWindow > 0 ? ((contextTokens / contextWindow) * 100).toFixed(1) : null;\n\n\tlet messagesHtml = \"\";\n\tfor (const event of data.sessionEvents) {\n\t\tswitch (event.type) {\n\t\t\tcase \"message\":\n\t\t\t\tif (event.message.role !== \"toolResult\") {\n\t\t\t\t\tmessagesHtml += formatMessage(event.message, data.toolResultsMap, colors);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"model_change\":\n\t\t\t\tmessagesHtml += formatModelChange(event);\n\t\t\t\tbreak;\n\t\t\tcase \"compaction\":\n\t\t\t\tmessagesHtml += formatCompaction(event);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tconst systemPromptHtml = data.systemPrompt\n\t\t? `<div class=\"system-prompt\">\n            <div class=\"system-prompt-header\">System Prompt</div>\n            <div class=\"system-prompt-content\">${escapeHtml(data.systemPrompt)}</div>\n        </div>`\n\t\t: \"\";\n\n\tconst toolsHtml = data.tools\n\t\t? `<div class=\"tools-list\">\n            <div class=\"tools-header\">Available Tools</div>\n            <div class=\"tools-content\">\n                ${data.tools.map((tool) => `<div class=\"tool-item\"><span class=\"tool-item-name\">${escapeHtml(tool.name)}</span> - ${escapeHtml(tool.description)}</div>`).join(\"\")}\n            </div>\n        </div>`\n\t\t: \"\";\n\n\tconst streamingNotice = data.isStreamingFormat\n\t\t? `<div class=\"streaming-notice\">\n            <em>Note: This session was reconstructed from raw agent event logs, which do not contain system prompt or tool definitions.</em>\n        </div>`\n\t\t: \"\";\n\n\tconst contextUsageText = contextPercent\n\t\t? `${contextTokens.toLocaleString()} / ${contextWindow.toLocaleString()} tokens (${contextPercent}%) - ${escapeHtml(lastModelInfo)}`\n\t\t: `${contextTokens.toLocaleString()} tokens (last turn) - ${escapeHtml(lastModelInfo)}`;\n\n\t// Compute body background based on theme\n\tconst bodyBg = isLight ? \"rgb(248, 248, 248)\" : \"rgb(24, 24, 30)\";\n\tconst containerBg = isLight ? \"rgb(255, 255, 255)\" : \"rgb(30, 30, 36)\";\n\tconst compactionBg = isLight ? \"rgb(255, 248, 220)\" : \"rgb(60, 55, 35)\";\n\tconst systemPromptBg = isLight ? \"rgb(255, 250, 230)\" : \"rgb(60, 55, 40)\";\n\tconst streamingNoticeBg = isLight ? \"rgb(250, 245, 235)\" : \"rgb(50, 45, 35)\";\n\tconst modelChangeBg = isLight ? \"rgb(240, 240, 250)\" : \"rgb(40, 40, 50)\";\n\tconst userBashBg = isLight ? \"rgb(255, 250, 240)\" : \"rgb(50, 48, 35)\";\n\tconst userBashErrorBg = isLight ? \"rgb(255, 245, 235)\" : \"rgb(60, 45, 35)\";\n\n\treturn `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Session Export - ${escapeHtml(filename)}</title>\n    <style>\n        * { margin: 0; padding: 0; box-sizing: border-box; }\n        body {\n            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n            font-size: 12px;\n            line-height: 1.6;\n            color: ${colors.text};\n            background: ${bodyBg};\n            padding: 24px;\n        }\n        .container { max-width: 700px; margin: 0 auto; }\n        .header {\n            margin-bottom: 24px;\n            padding: 16px;\n            background: ${containerBg};\n            border-radius: 4px;\n        }\n        .header h1 {\n            font-size: 14px;\n            font-weight: bold;\n            margin-bottom: 12px;\n            color: ${colors.borderAccent};\n        }\n        .header-info { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }\n        .info-item { color: ${colors.dim}; display: flex; align-items: baseline; }\n        .info-label { font-weight: 600; margin-right: 8px; min-width: 100px; }\n        .info-value { color: ${colors.text}; flex: 1; }\n        .info-value.cost { font-family: 'SF Mono', monospace; }\n        .messages { display: flex; flex-direction: column; gap: 16px; }\n        .message-timestamp { font-size: 10px; color: ${colors.dim}; margin-bottom: 4px; opacity: 0.8; }\n        .user-message {\n            background: ${colors.userMessageBg};\n            color: ${colors.userMessageText};\n            padding: 12px 16px;\n            border-radius: 4px;\n        }\n        .assistant-message { padding: 0; }\n        .assistant-text, .thinking-text {\n            padding: 12px 16px;\n        }\n        .thinking-text { color: ${colors.dim}; font-style: italic; white-space: pre-wrap; }\n        .model-change { padding: 8px 16px; background: ${modelChangeBg}; border-radius: 4px; }\n        .model-change-text { color: ${colors.dim}; font-size: 11px; }\n        .model-name { color: ${colors.borderAccent}; font-weight: bold; }\n        .compaction-container { background: ${compactionBg}; border-radius: 4px; overflow: hidden; }\n        .compaction-header { padding: 12px 16px; cursor: pointer; }\n        .compaction-header:hover { background: rgba(${isLight ? \"0, 0, 0\" : \"255, 255, 255\"}, 0.05); }\n        .compaction-header-row { display: flex; align-items: center; gap: 8px; }\n        .compaction-toggle { color: ${colors.borderAccent}; font-size: 10px; transition: transform 0.2s; }\n        .compaction-container.expanded .compaction-toggle { transform: rotate(90deg); }\n        .compaction-title { color: ${colors.text}; font-weight: bold; }\n        .compaction-hint { color: ${colors.dim}; font-size: 11px; }\n        .compaction-content { display: none; padding: 0 16px 16px 16px; }\n        .compaction-container.expanded .compaction-content { display: block; }\n        .compaction-summary { background: rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 12px; }\n        .compaction-summary-header { font-weight: bold; color: ${colors.borderAccent}; margin-bottom: 8px; font-size: 11px; }\n        .compaction-summary-content { color: ${colors.text}; white-space: pre-wrap; word-wrap: break-word; }\n        .tool-execution { padding: 12px 16px; border-radius: 4px; margin-top: 8px; }\n        .tool-execution.user-bash { background: ${userBashBg}; }\n        .tool-execution.user-bash-error { background: ${userBashErrorBg}; }\n        .tool-header, .tool-name { font-weight: bold; }\n        .tool-path { color: ${colors.borderAccent}; word-break: break-all; }\n        .line-numbers { color: ${colors.warning}; }\n        .line-count { color: ${colors.dim}; }\n        .tool-command { font-weight: bold; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }\n        .tool-output {\n            margin-top: 12px;\n            color: ${colors.toolOutput};\n            white-space: pre-wrap;\n            word-wrap: break-word;\n            overflow-wrap: break-word;\n            word-break: break-word;\n            font-family: inherit;\n            overflow-x: auto;\n        }\n        .tool-output > div { line-height: 1.4; }\n        .tool-output pre { margin: 0; font-family: inherit; color: inherit; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }\n        .tool-output.expandable { cursor: pointer; }\n        .tool-output.expandable:hover { opacity: 0.9; }\n        .tool-output.expandable .output-full { display: none; }\n        .tool-output.expandable.expanded .output-preview { display: none; }\n        .tool-output.expandable.expanded .output-full { display: block; }\n        .expand-hint { color: ${colors.borderAccent}; font-style: italic; margin-top: 4px; }\n        .system-prompt, .tools-list { background: ${systemPromptBg}; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }\n        .system-prompt-header, .tools-header { font-weight: bold; color: ${colors.warning}; margin-bottom: 8px; }\n        .system-prompt-content, .tools-content { color: ${colors.dim}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; font-size: 11px; }\n        .tool-item { margin: 4px 0; }\n        .tool-item-name { font-weight: bold; color: ${colors.text}; }\n        .tool-diff { margin-top: 12px; font-size: 11px; font-family: inherit; overflow-x: auto; max-width: 100%; }\n        .diff-line-old { color: ${colors.toolDiffRemoved}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }\n        .diff-line-new { color: ${colors.toolDiffAdded}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }\n        .diff-line-context { color: ${colors.toolDiffContext}; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }\n        .error-text { color: ${colors.error}; padding: 12px 16px; }\n        .bash-status.warning { color: ${colors.warning}; }\n        .bash-status.error { color: ${colors.error}; }\n        .bash-truncation.warning { color: ${colors.warning}; }\n        .footer { margin-top: 48px; padding: 20px; text-align: center; color: ${colors.dim}; font-size: 10px; }\n        .streaming-notice { background: ${streamingNoticeBg}; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; color: ${colors.dim}; font-size: 11px; }\n\n        /* Image styles */\n        .message-images { margin-bottom: 12px; }\n        .message-image { max-width: 100%; max-height: 400px; border-radius: 4px; margin: 4px 0; }\n\n        /* Markdown styles */\n        .markdown-content h1, .markdown-content h2, .markdown-content h3,\n        .markdown-content h4, .markdown-content h5, .markdown-content h6 {\n            color: ${colors.mdHeading};\n            margin: 1em 0 0.5em 0;\n            font-weight: bold;\n        }\n        .markdown-content h1 { font-size: 1.4em; text-decoration: underline; }\n        .markdown-content h2 { font-size: 1.2em; }\n        .markdown-content h3 { font-size: 1.1em; }\n        .markdown-content p { margin: 0.5em 0; }\n        .markdown-content a { color: ${colors.mdLink}; text-decoration: underline; }\n        .markdown-content a:hover { opacity: 0.8; }\n        .markdown-content code {\n            background: rgba(${isLight ? \"0, 0, 0\" : \"255, 255, 255\"}, 0.1);\n            color: ${colors.mdCode};\n            padding: 2px 6px;\n            border-radius: 3px;\n            font-family: inherit;\n        }\n        .markdown-content pre {\n            background: transparent;\n            border: none;\n            border-radius: 0;\n            padding: 0;\n            margin: 0.5em 0;\n            overflow-x: auto;\n        }\n        .markdown-content pre code {\n            display: block;\n            background: none;\n            color: ${colors.mdCodeBlock};\n            padding: 8px 12px;\n        }\n        .code-block-wrapper {\n            margin: 0.5em 0;\n        }\n        .code-block-header {\n            color: ${colors.mdCodeBlockBorder};\n            font-size: 11px;\n        }\n        .code-block-footer {\n            color: ${colors.mdCodeBlockBorder};\n            font-size: 11px;\n        }\n        .markdown-content blockquote {\n            border-left: 3px solid ${colors.mdQuoteBorder};\n            padding-left: 12px;\n            margin: 0.5em 0;\n            color: ${colors.mdQuote};\n            font-style: italic;\n        }\n        .markdown-content ul, .markdown-content ol {\n            margin: 0.5em 0;\n            padding-left: 24px;\n        }\n        .markdown-content li { margin: 0.25em 0; }\n        .markdown-content li::marker { color: ${colors.mdListBullet}; }\n        .markdown-content hr {\n            border: none;\n            border-top: 1px solid ${colors.mdHr};\n            margin: 1em 0;\n        }\n        .markdown-content table {\n            border-collapse: collapse;\n            margin: 0.5em 0;\n            width: 100%;\n        }\n        .markdown-content th, .markdown-content td {\n            border: 1px solid ${colors.mdCodeBlockBorder};\n            padding: 6px 10px;\n            text-align: left;\n        }\n        .markdown-content th {\n            background: rgba(${isLight ? \"0, 0, 0\" : \"255, 255, 255\"}, 0.05);\n            font-weight: bold;\n        }\n        .markdown-content img {\n            max-width: 100%;\n            border-radius: 4px;\n        }\n\n        /* Syntax highlighting (highlight.js) */\n        .hljs { background: transparent; }\n        .hljs-comment, .hljs-quote { color: ${colors.syntaxComment}; }\n        .hljs-keyword, .hljs-selector-tag, .hljs-addition { color: ${colors.syntaxKeyword}; }\n        .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: ${colors.syntaxNumber}; }\n        .hljs-string, .hljs-doctag, .hljs-regexp { color: ${colors.syntaxString}; }\n        .hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: ${colors.syntaxFunction}; }\n        .hljs-type, .hljs-class, .hljs-built_in { color: ${colors.syntaxType}; }\n        .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-params { color: ${colors.syntaxVariable}; }\n        .hljs-attribute { color: ${colors.syntaxVariable}; }\n        .hljs-meta { color: ${colors.syntaxKeyword}; }\n        .hljs-formula { background: rgba(${isLight ? \"0, 0, 0\" : \"255, 255, 255\"}, 0.05); }\n        .hljs-deletion { color: ${colors.toolDiffRemoved}; }\n        .hljs-emphasis { font-style: italic; }\n        .hljs-strong { font-weight: bold; }\n        .hljs-link { color: ${colors.mdLink}; text-decoration: underline; }\n\n        @media print { body { background: white; color: black; } .tool-execution { border: 1px solid #ddd; } }\n    </style>\n</head>\n<body>\n    <div class=\"container\">\n        <div class=\"header\">\n            <h1>${APP_NAME} v${VERSION}</h1>\n            <div class=\"header-info\">\n                <div class=\"info-item\"><span class=\"info-label\">Session:</span><span class=\"info-value\">${escapeHtml(data.sessionId)}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Date:</span><span class=\"info-value\">${new Date(data.timestamp).toLocaleString()}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Models:</span><span class=\"info-value\">${\n\t\t\t\t\t\t\tArray.from(data.modelsUsed)\n\t\t\t\t\t\t\t\t.map((m) => escapeHtml(m))\n\t\t\t\t\t\t\t\t.join(\", \") || \"unknown\"\n\t\t\t\t\t\t}</span></div>\n            </div>\n        </div>\n\n        <div class=\"header\">\n            <h1>Messages</h1>\n            <div class=\"header-info\">\n                <div class=\"info-item\"><span class=\"info-label\">User:</span><span class=\"info-value\">${userMessages}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Assistant:</span><span class=\"info-value\">${assistantMessages}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Tool Calls:</span><span class=\"info-value\">${toolCallsCount}</span></div>\n            </div>\n        </div>\n\n        <div class=\"header\">\n            <h1>Tokens & Cost</h1>\n            <div class=\"header-info\">\n                <div class=\"info-item\"><span class=\"info-label\">Input:</span><span class=\"info-value\">${data.tokenStats.input.toLocaleString()} tokens</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Output:</span><span class=\"info-value\">${data.tokenStats.output.toLocaleString()} tokens</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Cache Read:</span><span class=\"info-value\">${data.tokenStats.cacheRead.toLocaleString()} tokens</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Cache Write:</span><span class=\"info-value\">${data.tokenStats.cacheWrite.toLocaleString()} tokens</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Total:</span><span class=\"info-value\">${(data.tokenStats.input + data.tokenStats.output + data.tokenStats.cacheRead + data.tokenStats.cacheWrite).toLocaleString()} tokens</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Input Cost:</span><span class=\"info-value cost\">$${data.costStats.input.toFixed(4)}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Output Cost:</span><span class=\"info-value cost\">$${data.costStats.output.toFixed(4)}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Cache Read Cost:</span><span class=\"info-value cost\">$${data.costStats.cacheRead.toFixed(4)}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Cache Write Cost:</span><span class=\"info-value cost\">$${data.costStats.cacheWrite.toFixed(4)}</span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Total Cost:</span><span class=\"info-value cost\"><strong>$${(data.costStats.input + data.costStats.output + data.costStats.cacheRead + data.costStats.cacheWrite).toFixed(4)}</strong></span></div>\n                <div class=\"info-item\"><span class=\"info-label\">Context Usage:</span><span class=\"info-value\">${contextUsageText}</span></div>\n            </div>\n        </div>\n\n        ${systemPromptHtml}\n        ${toolsHtml}\n        ${streamingNotice}\n\n        <div class=\"messages\">\n            ${messagesHtml}\n        </div>\n\n        <div class=\"footer\">\n            Generated by ${APP_NAME} coding-agent on ${new Date().toLocaleString()}\n        </div>\n    </div>\n</body>\n</html>`;\n}\n\n// ============================================================================\n// Public API\n// ============================================================================\n\nexport interface ExportOptions {\n\toutputPath?: string;\n\tthemeName?: string;\n}\n\n/**\n * Export session to HTML using SessionManager and AgentState.\n * Used by TUI's /export command.\n * @param sessionManager The session manager\n * @param state The agent state\n * @param options Export options including output path and theme name\n */\nexport function exportSessionToHtml(\n\tsessionManager: SessionManager,\n\tstate: AgentState,\n\toptions?: ExportOptions | string,\n): string {\n\t// Handle backwards compatibility: options can be just the output path string\n\tconst opts: ExportOptions = typeof options === \"string\" ? { outputPath: options } : options || {};\n\n\tconst sessionFile = sessionManager.getSessionFile();\n\tconst content = readFileSync(sessionFile, \"utf8\");\n\tconst data = parseSessionFile(content);\n\n\t// Enrich with data from AgentState (tools, context window)\n\tdata.tools = state.tools.map((t: { name: string; description: string }) => ({\n\t\tname: t.name,\n\t\tdescription: t.description,\n\t}));\n\tdata.contextWindow = state.model?.contextWindow;\n\tif (!data.systemPrompt) {\n\t\tdata.systemPrompt = state.systemPrompt;\n\t}\n\n\tlet outputPath = opts.outputPath;\n\tif (!outputPath) {\n\t\tconst sessionBasename = basename(sessionFile, \".jsonl\");\n\t\toutputPath = `${APP_NAME}-session-${sessionBasename}.html`;\n\t}\n\n\tconst colors = getThemeColors(opts.themeName);\n\tconst isLight = isLightTheme(opts.themeName);\n\tconst html = generateHtml(data, basename(sessionFile), colors, isLight);\n\twriteFileSync(outputPath, html, \"utf8\");\n\treturn outputPath;\n}\n\n/**\n * Export session file to HTML (standalone, without AgentState).\n * Auto-detects format: session manager format or streaming event format.\n * Used by CLI for exporting arbitrary session files.\n * @param inputPath Path to the session file\n * @param options Export options including output path and theme name\n */\nexport function exportFromFile(inputPath: string, options?: ExportOptions | string): string {\n\t// Handle backwards compatibility: options can be just the output path string\n\tconst opts: ExportOptions = typeof options === \"string\" ? { outputPath: options } : options || {};\n\n\tif (!existsSync(inputPath)) {\n\t\tthrow new Error(`File not found: ${inputPath}`);\n\t}\n\n\tconst content = readFileSync(inputPath, \"utf8\");\n\tconst data = parseSessionFile(content);\n\n\tlet outputPath = opts.outputPath;\n\tif (!outputPath) {\n\t\tconst inputBasename = basename(inputPath, \".jsonl\");\n\t\toutputPath = `${APP_NAME}-session-${inputBasename}.html`;\n\t}\n\n\tconst colors = getThemeColors(opts.themeName);\n\tconst isLight = isLightTheme(opts.themeName);\n\tconst html = generateHtml(data, basename(inputPath), colors, isLight);\n\twriteFileSync(outputPath, html, \"utf8\");\n\treturn outputPath;\n}\n"]}