@oh-my-pi/pi-coding-agent 11.2.3 → 11.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/examples/extensions/plan-mode.ts +1 -1
  3. package/examples/hooks/qna.ts +1 -1
  4. package/examples/hooks/status-line.ts +1 -1
  5. package/examples/sdk/11-sessions.ts +1 -1
  6. package/package.json +8 -8
  7. package/src/cli/args.ts +9 -6
  8. package/src/cli/update-cli.ts +2 -2
  9. package/src/commands/index/index.ts +2 -5
  10. package/src/commit/agentic/agent.ts +1 -1
  11. package/src/commit/changelog/index.ts +2 -2
  12. package/src/config/keybindings.ts +16 -1
  13. package/src/config/model-registry.ts +25 -20
  14. package/src/config/model-resolver.ts +8 -8
  15. package/src/config/resolve-config-value.ts +92 -0
  16. package/src/config/settings-schema.ts +9 -0
  17. package/src/config.ts +14 -1
  18. package/src/export/html/template.css +7 -0
  19. package/src/export/html/template.generated.ts +1 -1
  20. package/src/export/html/template.js +33 -16
  21. package/src/extensibility/custom-commands/bundled/review/index.ts +1 -1
  22. package/src/extensibility/extensions/index.ts +18 -0
  23. package/src/extensibility/extensions/loader.ts +15 -0
  24. package/src/extensibility/extensions/runner.ts +78 -1
  25. package/src/extensibility/extensions/types.ts +131 -5
  26. package/src/extensibility/extensions/wrapper.ts +1 -1
  27. package/src/extensibility/plugins/git-url.ts +270 -0
  28. package/src/extensibility/plugins/index.ts +2 -0
  29. package/src/extensibility/slash-commands.ts +45 -0
  30. package/src/index.ts +7 -0
  31. package/src/lsp/render.ts +50 -43
  32. package/src/lsp/utils.ts +2 -2
  33. package/src/main.ts +11 -10
  34. package/src/mcp/transports/stdio.ts +3 -5
  35. package/src/modes/components/custom-message.ts +0 -8
  36. package/src/modes/components/diff.ts +1 -7
  37. package/src/modes/components/footer.ts +4 -4
  38. package/src/modes/components/model-selector.ts +4 -0
  39. package/src/modes/components/todo-display.ts +13 -3
  40. package/src/modes/components/tool-execution.ts +30 -16
  41. package/src/modes/components/tree-selector.ts +50 -19
  42. package/src/modes/controllers/event-controller.ts +1 -0
  43. package/src/modes/controllers/extension-ui-controller.ts +34 -2
  44. package/src/modes/controllers/input-controller.ts +47 -33
  45. package/src/modes/controllers/selector-controller.ts +10 -15
  46. package/src/modes/interactive-mode.ts +50 -38
  47. package/src/modes/print-mode.ts +6 -0
  48. package/src/modes/rpc/rpc-client.ts +4 -4
  49. package/src/modes/rpc/rpc-mode.ts +17 -2
  50. package/src/modes/rpc/rpc-types.ts +2 -2
  51. package/src/modes/types.ts +1 -0
  52. package/src/modes/utils/ui-helpers.ts +3 -1
  53. package/src/patch/applicator.ts +2 -3
  54. package/src/patch/fuzzy.ts +1 -1
  55. package/src/patch/shared.ts +74 -61
  56. package/src/prompts/system/system-prompt.md +1 -0
  57. package/src/prompts/tools/task.md +6 -0
  58. package/src/sdk.ts +15 -11
  59. package/src/session/agent-session.ts +72 -23
  60. package/src/session/auth-storage.ts +2 -1
  61. package/src/session/blob-store.ts +105 -0
  62. package/src/session/session-manager.ts +107 -44
  63. package/src/task/executor.ts +19 -9
  64. package/src/task/render.ts +80 -58
  65. package/src/tools/ask.ts +28 -5
  66. package/src/tools/bash.ts +47 -39
  67. package/src/tools/browser.ts +248 -26
  68. package/src/tools/calculator.ts +42 -23
  69. package/src/tools/fetch.ts +33 -16
  70. package/src/tools/find.ts +57 -22
  71. package/src/tools/grep.ts +54 -25
  72. package/src/tools/index.ts +5 -5
  73. package/src/tools/notebook.ts +19 -6
  74. package/src/tools/path-utils.ts +26 -1
  75. package/src/tools/python.ts +20 -14
  76. package/src/tools/read.ts +21 -8
  77. package/src/tools/render-utils.ts +5 -45
  78. package/src/tools/ssh.ts +59 -53
  79. package/src/tools/submit-result.ts +2 -2
  80. package/src/tools/todo-write.ts +32 -14
  81. package/src/tools/truncate.ts +1 -1
  82. package/src/tools/write.ts +39 -24
  83. package/src/tui/output-block.ts +61 -3
  84. package/src/tui/tree-list.ts +4 -4
  85. package/src/tui/utils.ts +71 -1
  86. package/src/utils/frontmatter.ts +1 -1
  87. package/src/utils/title-generator.ts +1 -1
  88. package/src/utils/tools-manager.ts +18 -2
  89. package/src/web/scrapers/osv.ts +4 -1
  90. package/src/web/scrapers/youtube.ts +1 -1
  91. package/src/web/search/index.ts +1 -1
  92. package/src/web/search/render.ts +96 -90
package/src/export/html/template.generated.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  // Auto-generated by scripts/generate-template.ts - DO NOT EDIT
2
- export const TEMPLATE = "<!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</title>\n <style>*{margin:0;padding:0;box-sizing:border-box;}:root{--line-height:18px;}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{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{background:color-mix(in srgb,var(--accent) 10%,transparent);}.tree-node:not(.in-path){opacity:0.5;}.tree-node:not(.in-path):hover{opacity:1;}.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;}#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{font-size:11px;color:var(--warning);margin-bottom:var(--line-height);}.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{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;position:relative;}.assistant-message{padding:0;position:relative;}.copy-link-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:6px;background:var(--container-bg);border:1px solid var(--dim);border-radius:4px;color:var(--muted);cursor:pointer;opacity:0;transition:opacity 0.15s,background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:center;z-index:10;}.user-message:hover .copy-link-btn,.assistant-message:hover .copy-link-btn{opacity:1;}.copy-link-btn:hover{background:var(--accent);color:var(--body-bg);border-color:var(--accent);}.copy-link-btn.copied{background:var(--success,#22c55e);color:white;border-color:var(--success,#22c55e);}.user-message.highlight,.assistant-message.highlight{animation:highlight-pulse 2s ease-out;}@keyframes highlight-pulse{0%{box-shadow:0 0 0 3px var(--accent);}100%{box-shadow:0 0 0 0 transparent;}}.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{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);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;font-family:inherit;overflow-x:auto;}.tool-output > div,.output-preview,.output-full{margin:0;padding:0;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);}.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{padding:0 var(--line-height);color:var(--dim);font-size:11px;}.model-name{color:var(--borderAccent);font-weight:bold;}.codex-bridge-toggle{color:var(--muted);cursor:pointer;text-decoration:underline;font-size:10px;}.codex-bridge-toggle:hover{color:var(--accent);}.codex-bridge-content{display:none;margin-top:8px;padding:8px;background:var(--exportCardBg,var(--container-bg));border-radius:4px;font-size:11px;max-height:300px;overflow:auto;}.codex-bridge-content pre{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--muted);}.model-change.show-bridge .codex-bridge-content{display:block;}.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{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);}.system-prompt.provider-prompt{border-left:3px solid var(--warning);}.system-prompt-note{font-size:10px;font-style:italic;color:var(--muted);margin-top:4px;}.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);margin-bottom:var(--line-height);}.tool-item{font-size:11px;}.tool-item-name{font-weight:bold;color:var(--text);}.tool-item-desc{color:var(--dim);}.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{background:var(--customMessageBg);padding:var(--line-height);border-radius:4px;}.branch-summary-header{font-weight:bold;color:var(--borderAccent);}.error-text{color:var(--error);padding:0 var(--line-height);}.message-images{margin-bottom:12px;}.message-image{max-width:100%;max-height:400px;border-radius:4px;margin:var(--line-height) 0;}.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(--text);}.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;}.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-function,.hljs-title,.hljs-title.function_,.hljs-section,.hljs-name{color:var(--syntaxFunction);}.hljs-type,.hljs-class,.hljs-title.class_,.hljs-built_in{color:var(--syntaxType);}.hljs-attr,.hljs-variable,.hljs-variable.language_,.hljs-params,.hljs-property{color:var(--syntaxVariable);}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:var(--syntaxKeyword);}.hljs-operator{color:var(--syntaxOperator);}.hljs-punctuation{color:var(--syntaxPunctuation);}.hljs-subst{color:var(--text);}.footer{margin-top:48px;padding:20px;text-align:center;color:var(--dim);font-size:10px;}#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;}}</style>\n <theme-vars/>\n</head>\n<body>\n <button id=\"hamburger\" title=\"Open sidebar\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><circle cx=\"6\" cy=\"6\" r=\"2.5\"/><circle cx=\"6\" cy=\"18\" r=\"2.5\"/><circle cx=\"18\" cy=\"12\" r=\"2.5\"/><rect x=\"5\" y=\"6\" width=\"2\" height=\"12\"/><path d=\"M6 12h10c1 0 2 0 2-2V8\"/></svg></button>\n <div id=\"sidebar-overlay\"></div>\n <div id=\"app\">\n <aside id=\"sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-controls\">\n <input type=\"text\" class=\"sidebar-search\" id=\"tree-search\" placeholder=\"Search...\">\n </div>\n <div class=\"sidebar-filters\">\n <button class=\"filter-btn active\" data-filter=\"default\" title=\"Hide settings entries\">Default</button>\n <button class=\"filter-btn\" data-filter=\"no-tools\" title=\"Default minus tool results\">No-tools</button>\n <button class=\"filter-btn\" data-filter=\"user-only\" title=\"Only user messages\">User</button>\n <button class=\"filter-btn\" data-filter=\"labeled-only\" title=\"Only labeled entries\">Labeled</button>\n <button class=\"filter-btn\" data-filter=\"all\" title=\"Show everything\">All</button>\n <button class=\"sidebar-close\" id=\"sidebar-close\" title=\"Close\">✕</button>\n </div>\n </div>\n <div class=\"tree-container\" id=\"tree-container\"></div>\n <div class=\"tree-status\" id=\"tree-status\"></div>\n </aside>\n <main id=\"content\">\n <div id=\"header-container\"></div>\n <div id=\"messages\"></div>\n </main>\n <div id=\"image-modal\" class=\"image-modal\">\n <img id=\"modal-image\" src=\"\" alt=\"\">\n </div>\n </div>\n\n <script id=\"session-data\" type=\"application/json\">{{SESSION_DATA}}</script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.4/marked.min.js\" integrity=\"sha512-VmLxPVdDGeR+F0DzUHVqzHwaR4ZSSh1g/7aYXwKT1PAGVxunOEcysta+4H5Utvmpr2xExEPybZ8q+iM9F1tGdw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\" integrity=\"sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n <script> (function() {\n 'use strict';\n\n // ============================================================\n // DATA LOADING\n // ============================================================\n\n const base64 = document.getElementById('session-data').textContent;\n const binary = atob(base64);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) {\n bytes[i] = binary.charCodeAt(i);\n }\n const data = JSON.parse(new TextDecoder('utf-8').decode(bytes));\n const { header, entries, leafId: defaultLeafId, systemPrompt, codexInjectionInfo, tools } = data;\n\n // ============================================================\n // URL PARAMETER HANDLING\n // ============================================================\n\n // Parse URL parameters for deep linking: leafId and targetId\n // Check for injected params (when loaded in iframe via srcdoc) or use window.location\n const injectedParams = document.querySelector('meta[name=\"pi-url-params\"]');\n const searchString = injectedParams ? injectedParams.content : window.location.search.substring(1);\n const urlParams = new URLSearchParams(searchString);\n const urlLeafId = urlParams.get('leafId');\n const urlTargetId = urlParams.get('targetId');\n // Use URL leafId if provided, otherwise fall back to session default\n const leafId = urlLeafId || defaultLeafId;\n\n // ============================================================\n // DATA STRUCTURES\n // ============================================================\n\n // Entry lookup by ID\n const byId = new Map();\n for (const entry of entries) {\n byId.set(entry.id, entry);\n }\n\n // Tool call lookup (toolCallId -> {name, arguments})\n const toolCallMap = new Map();\n for (const entry of entries) {\n if (entry.type === 'message' && entry.message.role === 'assistant') {\n const content = entry.message.content;\n if (Array.isArray(content)) {\n for (const block of content) {\n if (block.type === 'toolCall') {\n toolCallMap.set(block.id, { name: block.name, arguments: block.arguments });\n }\n }\n }\n }\n }\n\n // Label lookup (entryId -> label string)\n // Labels are stored in 'label' entries that reference their target via parentId\n const labelMap = new Map();\n for (const entry of entries) {\n if (entry.type === 'label' && entry.parentId && entry.label) {\n labelMap.set(entry.parentId, entry.label);\n }\n }\n\n // ============================================================\n // TREE DATA PREPARATION (no DOM, pure data)\n // ============================================================\n\n /**\n * Build tree structure from flat entries.\n * Returns array of root nodes, each with { entry, children, label }.\n */\n function buildTree() {\n const nodeMap = new Map();\n const roots = [];\n\n // Create nodes\n for (const entry of entries) {\n nodeMap.set(entry.id, { \n entry, \n children: [],\n label: labelMap.get(entry.id)\n });\n }\n\n // Build parent-child relationships\n for (const entry of entries) {\n const node = nodeMap.get(entry.id);\n if (entry.parentId === null || entry.parentId === undefined || entry.parentId === entry.id) {\n roots.push(node);\n } else {\n const parent = nodeMap.get(entry.parentId);\n if (parent) {\n parent.children.push(node);\n } else {\n roots.push(node);\n }\n }\n }\n\n // Sort children by timestamp\n function sortChildren(node) {\n node.children.sort((a, b) =>\n new Date(a.entry.timestamp).getTime() - new Date(b.entry.timestamp).getTime()\n );\n node.children.forEach(sortChildren);\n }\n roots.forEach(sortChildren);\n\n return roots;\n }\n\n /**\n * Build set of entry IDs on path from root to target.\n */\n function buildActivePathIds(targetId) {\n const ids = new Set();\n let current = byId.get(targetId);\n while (current) {\n ids.add(current.id);\n // Stop if no parent or self-referencing (root)\n if (!current.parentId || current.parentId === current.id) {\n break;\n }\n current = byId.get(current.parentId);\n }\n return ids;\n }\n\n /**\n * Get array of entries from root to target (the conversation path).\n */\n function getPath(targetId) {\n const path = [];\n let current = byId.get(targetId);\n while (current) {\n path.unshift(current);\n // Stop if no parent or self-referencing (root)\n if (!current.parentId || current.parentId === current.id) {\n break;\n }\n current = byId.get(current.parentId);\n }\n return path;\n }\n\n /**\n * Flatten tree into list with indentation and connector info.\n * Returns array of { node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots }.\n * Matches tree-selector.ts logic exactly.\n */\n function flattenTree(roots, activePathIds) {\n const result = [];\n const multipleRoots = roots.length > 1;\n\n // Mark which subtrees contain the active leaf\n const containsActive = new Map();\n function markActive(node) {\n let has = activePathIds.has(node.entry.id);\n for (const child of node.children) {\n if (markActive(child)) has = true;\n }\n containsActive.set(node, has);\n return has;\n }\n roots.forEach(markActive);\n\n // Stack: [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild]\n const stack = [];\n\n // Add roots (prioritize branch containing active leaf)\n const orderedRoots = [...roots].sort((a, b) => \n Number(containsActive.get(b)) - Number(containsActive.get(a))\n );\n for (let i = orderedRoots.length - 1; i >= 0; i--) {\n const isLast = i === orderedRoots.length - 1;\n stack.push([orderedRoots[i], multipleRoots ? 1 : 0, multipleRoots, multipleRoots, isLast, [], multipleRoots]);\n }\n\n while (stack.length > 0) {\n const [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild] = stack.pop();\n\n result.push({ node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots });\n\n const children = node.children;\n const multipleChildren = children.length > 1;\n\n // Order children (active branch first)\n const orderedChildren = [...children].sort((a, b) => \n Number(containsActive.get(b)) - Number(containsActive.get(a))\n );\n\n // Calculate child indent (matches tree-selector.ts)\n let childIndent;\n if (multipleChildren) {\n // Parent branches: children get +1\n childIndent = indent + 1;\n } else if (justBranched && indent > 0) {\n // First generation after a branch: +1 for visual grouping\n childIndent = indent + 1;\n } else {\n // Single-child chain: stay flat\n childIndent = indent;\n }\n\n // Build gutters for children\n const connectorDisplayed = showConnector && !isVirtualRootChild;\n const currentDisplayIndent = multipleRoots ? Math.max(0, indent - 1) : indent;\n const connectorPosition = Math.max(0, currentDisplayIndent - 1);\n const childGutters = connectorDisplayed\n ? [...gutters, { position: connectorPosition, show: !isLast }]\n : gutters;\n\n // Add children in reverse order for stack\n for (let i = orderedChildren.length - 1; i >= 0; i--) {\n const childIsLast = i === orderedChildren.length - 1;\n stack.push([orderedChildren[i], childIndent, multipleChildren, multipleChildren, childIsLast, childGutters, false]);\n }\n }\n\n return result;\n }\n\n /**\n * Build ASCII prefix string for tree node.\n */\n function buildTreePrefix(flatNode) {\n const { indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots } = flatNode;\n const displayIndent = multipleRoots ? Math.max(0, indent - 1) : indent;\n const connector = showConnector && !isVirtualRootChild ? (isLast ? '└─ ' : '├─ ') : '';\n const connectorPosition = connector ? displayIndent - 1 : -1;\n\n const totalChars = displayIndent * 3;\n const prefixChars = [];\n for (let i = 0; i < totalChars; i++) {\n const level = Math.floor(i / 3);\n const posInLevel = i % 3;\n\n const gutter = gutters.find(g => g.position === level);\n if (gutter) {\n prefixChars.push(posInLevel === 0 ? (gutter.show ? '│' : ' ') : ' ');\n } else if (connector && level === connectorPosition) {\n if (posInLevel === 0) {\n prefixChars.push(isLast ? '└' : '├');\n } else if (posInLevel === 1) {\n prefixChars.push('─');\n } else {\n prefixChars.push(' ');\n }\n } else {\n prefixChars.push(' ');\n }\n }\n return prefixChars.join('');\n }\n\n // ============================================================\n // FILTERING (pure data)\n // ============================================================\n\n let filterMode = 'default';\n let searchQuery = '';\n\n function hasTextContent(content) {\n if (typeof content === 'string') return content.trim().length > 0;\n if (Array.isArray(content)) {\n for (const c of content) {\n if (c.type === 'text' && c.text && c.text.trim().length > 0) return true;\n }\n }\n return false;\n }\n\n function extractContent(content) {\n if (typeof content === 'string') return content;\n if (Array.isArray(content)) {\n return content\n .filter(c => c.type === 'text' && c.text)\n .map(c => c.text)\n .join('');\n }\n return '';\n }\n\n function getSearchableText(entry, label) {\n const parts = [];\n if (label) parts.push(label);\n\n switch (entry.type) {\n case 'message': {\n const msg = entry.message;\n parts.push(msg.role);\n if (msg.content) parts.push(extractContent(msg.content));\n if (msg.role === 'bashExecution' && msg.command) parts.push(msg.command);\n break;\n }\n case 'custom_message':\n parts.push(entry.customType);\n parts.push(typeof entry.content === 'string' ? entry.content : extractContent(entry.content));\n break;\n case 'compaction':\n parts.push('compaction');\n break;\n case 'branch_summary':\n parts.push('branch summary', entry.summary);\n break;\n case 'model_change':\n parts.push('model', entry.modelId);\n break;\n case 'thinking_level_change':\n parts.push('thinking', entry.thinkingLevel);\n break;\n }\n\n return parts.join(' ').toLowerCase();\n }\n\n /**\n * Filter flat nodes based on current filterMode and searchQuery.\n */\n function filterNodes(flatNodes, currentLeafId) {\n const searchTokens = searchQuery.toLowerCase().split(/\\s+/).filter(Boolean);\n\n return flatNodes.filter(flatNode => {\n const entry = flatNode.node.entry;\n const label = flatNode.node.label;\n const isCurrentLeaf = entry.id === currentLeafId;\n\n // Always show current leaf\n if (isCurrentLeaf) return true;\n\n // Hide assistant messages with only tool calls (no text) unless error/aborted\n if (entry.type === 'message' && entry.message.role === 'assistant') {\n const msg = entry.message;\n const hasText = hasTextContent(msg.content);\n const isErrorOrAborted = msg.stopReason && msg.stopReason !== 'stop' && msg.stopReason !== 'toolUse';\n if (!hasText && !isErrorOrAborted) return false;\n }\n\n // Apply filter mode\n const isSettingsEntry = ['label', 'custom', 'model_change', 'thinking_level_change'].includes(entry.type);\n let passesFilter = true;\n\n switch (filterMode) {\n case 'user-only':\n passesFilter = entry.type === 'message' && entry.message.role === 'user';\n break;\n case 'no-tools':\n passesFilter = !isSettingsEntry && !(entry.type === 'message' && entry.message.role === 'toolResult');\n break;\n case 'labeled-only':\n passesFilter = label !== undefined;\n break;\n case 'all':\n passesFilter = true;\n break;\n default: // 'default'\n passesFilter = !isSettingsEntry;\n break;\n }\n\n if (!passesFilter) return false;\n\n // Apply search filter\n if (searchTokens.length > 0) {\n const nodeText = getSearchableText(entry, label);\n if (!searchTokens.every(t => nodeText.includes(t))) return false;\n }\n\n return true;\n });\n }\n\n // ============================================================\n // TREE DISPLAY TEXT (pure data -> string)\n // ============================================================\n\n function shortenPath(p) {\n if (p.startsWith('/Users/')) {\n const parts = p.split('/');\n if (parts.length > 2) return '~' + p.slice(('/Users/' + parts[2]).length);\n }\n if (p.startsWith('/home/')) {\n const parts = p.split('/');\n if (parts.length > 2) return '~' + p.slice(('/home/' + parts[2]).length);\n }\n return p;\n }\n\n function formatToolCall(name, args) {\n switch (name) {\n case 'read': {\n const path = shortenPath(String(args.path || args.file_path || ''));\n const offset = args.offset;\n const limit = args.limit;\n let display = path;\n if (offset !== undefined || limit !== undefined) {\n const start = offset ?? 1;\n const end = limit !== undefined ? start + limit - 1 : '';\n display += `:${start}${end ? `-${end}` : ''}`;\n }\n return `[read: ${display}]`;\n }\n case 'write':\n return `[write: ${shortenPath(String(args.path || args.file_path || ''))}]`;\n case 'edit':\n return `[edit: ${shortenPath(String(args.path || args.file_path || ''))}]`;\n case 'bash': {\n const rawCmd = String(args.command || '');\n const cmd = rawCmd.replace(/[\\n\\t]/g, ' ').trim().slice(0, 50);\n return `[bash: ${cmd}${rawCmd.length > 50 ? '...' : ''}]`;\n }\n case 'grep':\n return `[grep: /${args.pattern || ''}/ in ${shortenPath(String(args.path || '.'))}]`;\n case 'find':\n return `[find: ${args.pattern || ''} in ${shortenPath(String(args.path || '.'))}]`;\n case 'ls':\n return `[ls: ${shortenPath(String(args.path || '.'))}]`;\n default: {\n const argsStr = JSON.stringify(args).slice(0, 40);\n return `[${name}: ${argsStr}${JSON.stringify(args).length > 40 ? '...' : ''}]`;\n }\n }\n }\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Truncate string to maxLen chars, append \"...\" if truncated.\n */\n function truncate(s, maxLen = 100) {\n if (s.length <= maxLen) return s;\n return s.slice(0, maxLen) + '...';\n }\n\n /**\n * Get display text for tree node (returns HTML string).\n */\n function getTreeNodeDisplayHtml(entry, label) {\n const normalize = s => s.replace(/[\\n\\t]/g, ' ').trim();\n const labelHtml = label ? `<span class=\"tree-label\">[${escapeHtml(label)}]</span> ` : '';\n\n switch (entry.type) {\n case 'message': {\n const msg = entry.message;\n if (msg.role === 'user') {\n const content = truncate(normalize(extractContent(msg.content)));\n return labelHtml + `<span class=\"tree-role-user\">user:</span> ${escapeHtml(content)}`;\n }\n if (msg.role === 'assistant') {\n const textContent = truncate(normalize(extractContent(msg.content)));\n if (textContent) {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> ${escapeHtml(textContent)}`;\n }\n if (msg.stopReason === 'aborted') {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-muted\">(aborted)</span>`;\n }\n if (msg.errorMessage) {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-error\">${escapeHtml(truncate(msg.errorMessage))}</span>`;\n }\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-muted\">(no text)</span>`;\n }\n if (msg.role === 'toolResult') {\n const toolCall = msg.toolCallId ? toolCallMap.get(msg.toolCallId) : null;\n if (toolCall) {\n return labelHtml + `<span class=\"tree-role-tool\">${escapeHtml(formatToolCall(toolCall.name, toolCall.arguments))}</span>`;\n }\n return labelHtml + `<span class=\"tree-role-tool\">[${msg.toolName || 'tool'}]</span>`;\n }\n if (msg.role === 'bashExecution') {\n const cmd = truncate(normalize(msg.command || ''));\n return labelHtml + `<span class=\"tree-role-tool\">[bash]:</span> ${escapeHtml(cmd)}`;\n }\n return labelHtml + `<span class=\"tree-muted\">[${msg.role}]</span>`;\n }\n case 'compaction':\n return labelHtml + `<span class=\"tree-compaction\">[compaction: ${Math.round(entry.tokensBefore/1000)}k tokens]</span>`;\n case 'branch_summary': {\n const summary = truncate(normalize(entry.summary || ''));\n return labelHtml + `<span class=\"tree-branch-summary\">[branch summary]:</span> ${escapeHtml(summary)}`;\n }\n case 'custom_message': {\n const content = typeof entry.content === 'string' ? entry.content : extractContent(entry.content);\n return labelHtml + `<span class=\"tree-custom\">[${escapeHtml(entry.customType)}]:</span> ${escapeHtml(truncate(normalize(content)))}`;\n }\n case 'model_change':\n return labelHtml + `<span class=\"tree-muted\">[model: ${entry.modelId}]</span>`;\n case 'thinking_level_change':\n return labelHtml + `<span class=\"tree-muted\">[thinking: ${entry.thinkingLevel}]</span>`;\n default:\n return labelHtml + `<span class=\"tree-muted\">[${entry.type}]</span>`;\n }\n }\n\n // ============================================================\n // TREE RENDERING (DOM manipulation)\n // ============================================================\n\n let currentLeafId = leafId;\n let currentTargetId = urlTargetId || leafId;\n let treeRendered = false;\n\n function renderTree() {\n const tree = buildTree();\n const activePathIds = buildActivePathIds(currentLeafId);\n const flatNodes = flattenTree(tree, activePathIds);\n const filtered = filterNodes(flatNodes, currentLeafId);\n const container = document.getElementById('tree-container');\n\n // Full render only on first call or when filter/search changes\n if (!treeRendered) {\n container.innerHTML = '';\n\n for (const flatNode of filtered) {\n const entry = flatNode.node.entry;\n const isOnPath = activePathIds.has(entry.id);\n const isTarget = entry.id === currentTargetId;\n\n const div = document.createElement('div');\n div.className = 'tree-node';\n if (isOnPath) div.classList.add('in-path');\n if (isTarget) div.classList.add('active');\n div.dataset.id = entry.id;\n\n const prefix = buildTreePrefix(flatNode);\n const prefixSpan = document.createElement('span');\n prefixSpan.className = 'tree-prefix';\n prefixSpan.textContent = prefix;\n\n const marker = document.createElement('span');\n marker.className = 'tree-marker';\n marker.textContent = isOnPath ? '•' : ' ';\n\n const content = document.createElement('span');\n content.className = 'tree-content';\n content.innerHTML = getTreeNodeDisplayHtml(entry, flatNode.node.label);\n\n div.appendChild(prefixSpan);\n div.appendChild(marker);\n div.appendChild(content);\n div.addEventListener('click', () => navigateTo(entry.id));\n\n container.appendChild(div);\n }\n\n treeRendered = true;\n } else {\n // Just update markers and classes\n const nodes = container.querySelectorAll('.tree-node');\n for (const node of nodes) {\n const id = node.dataset.id;\n const isOnPath = activePathIds.has(id);\n const isTarget = id === currentTargetId;\n\n node.classList.toggle('in-path', isOnPath);\n node.classList.toggle('active', isTarget);\n\n const marker = node.querySelector('.tree-marker');\n if (marker) {\n marker.textContent = isOnPath ? '•' : ' ';\n }\n }\n }\n\n document.getElementById('tree-status').textContent = `${filtered.length} / ${flatNodes.length} entries`;\n\n // Scroll active node into view after layout\n setTimeout(() => {\n const activeNode = container.querySelector('.tree-node.active');\n if (activeNode) {\n activeNode.scrollIntoView({ block: 'nearest' });\n }\n }, 0);\n }\n\n function forceTreeRerender() {\n treeRendered = false;\n renderTree();\n }\n\n // ============================================================\n // MESSAGE RENDERING\n // ============================================================\n\n function formatTokens(count) {\n if (count < 1000) return count.toString();\n if (count < 10000) return (count / 1000).toFixed(1) + 'k';\n if (count < 1000000) return Math.round(count / 1000) + 'k';\n return (count / 1000000).toFixed(1) + 'M';\n }\n\n function formatTimestamp(ts) {\n if (!ts) return '';\n const date = new Date(ts);\n return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n }\n\n function replaceTabs(text) {\n return text.replace(/\\t/g, ' ');\n }\n\n function getLanguageFromPath(filePath) {\n const ext = filePath.split('.').pop()?.toLowerCase();\n const extToLang = {\n ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',\n py: 'python', rb: 'ruby', rs: 'rust', go: 'go', java: 'java',\n c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp', cs: 'csharp',\n php: 'php', sh: 'bash', bash: 'bash', zsh: 'bash',\n sql: 'sql', html: 'html', css: 'css', scss: 'scss',\n json: 'json', yaml: 'yaml', yml: 'yaml', xml: 'xml',\n md: 'markdown', dockerfile: 'dockerfile'\n };\n return extToLang[ext];\n }\n\n function findToolResult(toolCallId) {\n for (const entry of entries) {\n if (entry.type === 'message' && entry.message.role === 'toolResult') {\n if (entry.message.toolCallId === toolCallId) {\n return entry.message;\n }\n }\n }\n return null;\n }\n\n function formatExpandableOutput(text, maxLines, lang) {\n text = replaceTabs(text);\n const lines = text.split('\\n');\n const displayLines = lines.slice(0, maxLines);\n const remaining = lines.length - maxLines;\n\n if (lang) {\n let highlighted;\n try {\n highlighted = hljs.highlight(text, { language: lang }).value;\n } catch {\n highlighted = escapeHtml(text);\n }\n\n if (remaining > 0) {\n const previewCode = displayLines.join('\\n');\n let previewHighlighted;\n try {\n previewHighlighted = hljs.highlight(previewCode, { language: lang }).value;\n } catch {\n previewHighlighted = escapeHtml(previewCode);\n }\n\n return `<div class=\"tool-output expandable\" onclick=\"this.classList.toggle('expanded')\">\n <div class=\"output-preview\"><pre><code class=\"hljs\">${previewHighlighted}</code></pre>\n <div class=\"expand-hint\">... (${remaining} more lines)</div></div>\n <div class=\"output-full\"><pre><code class=\"hljs\">${highlighted}</code></pre></div></div>`;\n }\n\n return `<div class=\"tool-output\"><pre><code class=\"hljs\">${highlighted}</code></pre></div>`;\n }\n\n // Plain text output\n if (remaining > 0) {\n let out = '<div class=\"tool-output expandable\" onclick=\"this.classList.toggle(\\'expanded\\')\">';\n out += '<div class=\"output-preview\">';\n for (const line of displayLines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += `<div class=\"expand-hint\">... (${remaining} more lines)</div></div>`;\n out += '<div class=\"output-full\">';\n for (const line of lines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += '</div></div>';\n return out;\n }\n\n let out = '<div class=\"tool-output\">';\n for (const line of displayLines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += '</div>';\n return out;\n }\n\n function renderToolCall(call) {\n const result = findToolResult(call.id);\n const isError = result?.isError || false;\n const statusClass = result ? (isError ? 'error' : 'success') : 'pending';\n\n const getResultText = () => {\n if (!result) return '';\n const textBlocks = result.content.filter(c => c.type === 'text');\n return textBlocks.map(c => c.text).join('\\n');\n };\n\n const getResultImages = () => {\n if (!result) return [];\n return result.content.filter(c => c.type === 'image');\n };\n\n const renderResultImages = () => {\n const images = getResultImages();\n if (images.length === 0) return '';\n return '<div class=\"tool-images\">' + \n images.map(img => `<img src=\"data:${img.mimeType};base64,${img.data}\" class=\"tool-image\" />`).join('') + \n '</div>';\n };\n\n let html = `<div class=\"tool-execution ${statusClass}\">`;\n const args = call.arguments || {};\n const name = call.name;\n\n switch (name) {\n case 'bash': {\n const command = args.command || '';\n html += `<div class=\"tool-command\">$ ${escapeHtml(command)}</div>`;\n if (result) {\n const output = getResultText().trim();\n if (output) html += formatExpandableOutput(output, 5);\n }\n break;\n }\n case 'read': {\n const filePath = args.file_path || args.path || '';\n const offset = args.offset;\n const limit = args.limit;\n const lang = getLanguageFromPath(filePath);\n\n let pathHtml = escapeHtml(shortenPath(filePath));\n if (offset !== undefined || limit !== undefined) {\n const startLine = offset ?? 1;\n const endLine = limit !== undefined ? startLine + limit - 1 : '';\n pathHtml += `<span class=\"line-numbers\">:${startLine}${endLine ? '-' + endLine : ''}</span>`;\n }\n\n html += `<div class=\"tool-header\"><span class=\"tool-name\">read</span> <span class=\"tool-path\">${pathHtml}</span></div>`;\n if (result) {\n html += renderResultImages();\n const output = getResultText();\n if (output) html += formatExpandableOutput(output, 10, lang);\n }\n break;\n }\n case 'write': {\n const filePath = args.file_path || args.path || '';\n const content = args.content || '';\n const lines = content.split('\\n');\n const lang = getLanguageFromPath(filePath);\n\n html += `<div class=\"tool-header\"><span class=\"tool-name\">write</span> <span class=\"tool-path\">${escapeHtml(shortenPath(filePath))}</span>`;\n if (lines.length > 10) html += ` <span class=\"line-count\">(${lines.length} lines)</span>`;\n html += '</div>';\n\n if (content) html += formatExpandableOutput(content, 10, lang);\n if (result) {\n const output = getResultText().trim();\n if (output) html += `<div class=\"tool-output\"><div>${escapeHtml(output)}</div></div>`;\n }\n break;\n }\n case 'edit': {\n const filePath = args.file_path || args.path || '';\n html += `<div class=\"tool-header\"><span class=\"tool-name\">edit</span> <span class=\"tool-path\">${escapeHtml(shortenPath(filePath))}</span></div>`;\n\n if (result?.details?.diff) {\n const diffLines = result.details.diff.split('\\n');\n html += '<div class=\"tool-diff\">';\n for (const line of diffLines) {\n const cls = line.match(/^\\+/) ? 'diff-added' : line.match(/^-/) ? 'diff-removed' : 'diff-context';\n html += `<div class=\"${cls}\">${escapeHtml(replaceTabs(line))}</div>`;\n }\n html += '</div>';\n } else if (result) {\n const output = getResultText().trim();\n if (output) html += `<div class=\"tool-output\"><pre>${escapeHtml(output)}</pre></div>`;\n }\n break;\n }\n default: {\n html += `<div class=\"tool-header\"><span class=\"tool-name\">${escapeHtml(name)}</span></div>`;\n html += `<div class=\"tool-output\"><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></div>`;\n if (result) {\n const output = getResultText();\n if (output) html += formatExpandableOutput(output, 10);\n }\n }\n }\n\n html += '</div>';\n return html;\n }\n\n /**\n * Build a shareable URL for a specific message.\n * URL format: base?gistId&leafId=<leafId>&targetId=<entryId>\n */\n function buildShareUrl(entryId) {\n // Check for injected base URL (used when loaded in iframe via srcdoc)\n const baseUrlMeta = document.querySelector('meta[name=\"pi-share-base-url\"]');\n const baseUrl = baseUrlMeta ? baseUrlMeta.content : window.location.href.split('?')[0];\n\n const url = new URL(window.location.href);\n // Find the gist ID (first query param without value, e.g., ?abc123)\n const gistId = Array.from(url.searchParams.keys()).find(k => !url.searchParams.get(k));\n\n // Build the share URL\n const params = new URLSearchParams();\n params.set('leafId', currentLeafId);\n params.set('targetId', entryId);\n\n // If we have an injected base URL (iframe context), use it directly\n if (baseUrlMeta) {\n return `${baseUrl}&${params.toString()}`;\n }\n\n // Otherwise build from current location (direct file access)\n url.search = gistId ? `?${gistId}&${params.toString()}` : `?${params.toString()}`;\n return url.toString();\n }\n\n /**\n * Copy text to clipboard with visual feedback.\n * Uses navigator.clipboard with fallback to execCommand for HTTP contexts.\n */\n async function copyToClipboard(text, button) {\n let success = false;\n try {\n if (navigator.clipboard && navigator.clipboard.writeText) {\n await navigator.clipboard.writeText(text);\n success = true;\n }\n } catch {\n // Clipboard API failed, try fallback\n }\n\n // Fallback for HTTP or when Clipboard API is unavailable\n if (!success) {\n try {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.opacity = '0';\n document.body.appendChild(textarea);\n textarea.select();\n success = document.execCommand('copy');\n document.body.removeChild(textarea);\n } catch {\n }\n }\n\n if (success && button) {\n const originalHtml = button.innerHTML;\n button.innerHTML = '✓';\n button.classList.add('copied');\n setTimeout(() => {\n button.innerHTML = originalHtml;\n button.classList.remove('copied');\n }, 1500);\n }\n }\n\n /**\n * Render the copy-link button HTML for a message.\n */\n function renderCopyLinkButton(entryId) {\n return `<button class=\"copy-link-btn\" data-entry-id=\"${entryId}\" title=\"Copy link to this message\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>\n </svg>\n </button>`;\n }\n\n function renderEntry(entry) {\n const ts = formatTimestamp(entry.timestamp);\n const tsHtml = ts ? `<div class=\"message-timestamp\">${ts}</div>` : '';\n const entryId = `entry-${entry.id}`;\n const copyBtnHtml = renderCopyLinkButton(entry.id);\n\n if (entry.type === 'message') {\n const msg = entry.message;\n\n if (msg.role === 'user') {\n let html = `<div class=\"user-message\" id=\"${entryId}\">${copyBtnHtml}${tsHtml}`;\n const content = msg.content;\n\n if (Array.isArray(content)) {\n const images = content.filter(c => c.type === 'image');\n if (images.length > 0) {\n html += '<div class=\"message-images\">';\n for (const img of images) {\n html += `<img src=\"data:${img.mimeType};base64,${img.data}\" class=\"message-image\" />`;\n }\n html += '</div>';\n }\n }\n\n const text = typeof content === 'string' ? content : \n content.filter(c => c.type === 'text').map(c => c.text).join('\\n');\n if (text.trim()) {\n html += `<div class=\"markdown-content\">${safeMarkedParse(text)}</div>`;\n }\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'assistant') {\n let html = `<div class=\"assistant-message\" id=\"${entryId}\">${copyBtnHtml}${tsHtml}`;\n\n for (const block of msg.content) {\n if (block.type === 'text' && block.text.trim()) {\n html += `<div class=\"assistant-text markdown-content\">${safeMarkedParse(block.text)}</div>`;\n } else if (block.type === 'thinking' && block.thinking.trim()) {\n html += `<div class=\"thinking-block\">\n <div class=\"thinking-text\">${escapeHtml(block.thinking)}</div>\n <div class=\"thinking-collapsed\">Thinking ...</div>\n </div>`;\n }\n }\n\n for (const block of msg.content) {\n if (block.type === 'toolCall') {\n html += renderToolCall(block);\n }\n }\n\n if (msg.stopReason === 'aborted') {\n html += '<div class=\"error-text\">Aborted</div>';\n } else if (msg.stopReason === 'error') {\n html += `<div class=\"error-text\">Error: ${escapeHtml(msg.errorMessage || 'Unknown error')}</div>`;\n }\n\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'bashExecution') {\n const isError = msg.cancelled || (msg.exitCode !== 0 && msg.exitCode !== null);\n let html = `<div class=\"tool-execution ${isError ? 'error' : 'success'}\" id=\"${entryId}\">${tsHtml}`;\n html += `<div class=\"tool-command\">$ ${escapeHtml(msg.command)}</div>`;\n if (msg.output) html += formatExpandableOutput(msg.output, 10);\n if (msg.cancelled) {\n html += '<div style=\"color: var(--warning)\">(cancelled)</div>';\n } else if (msg.exitCode !== 0 && msg.exitCode !== null) {\n html += `<div style=\"color: var(--error)\">(exit ${msg.exitCode})</div>`;\n }\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'toolResult') return '';\n }\n\n if (entry.type === 'model_change') {\n let html = `<div class=\"model-change\" id=\"${entryId}\">${tsHtml}Switched to model: <span class=\"model-name\">${escapeHtml(entry.provider)}/${escapeHtml(entry.modelId)}</span>`;\n\n if (entry.provider === 'openai-codex' && codexInjectionInfo) {\n const fullContent = `# Codex Instructions\\n${codexInjectionInfo.instructions}\\n\\n# Codex-Pi Bridge\\n${codexInjectionInfo.bridge}`;\n html += ` <span class=\"codex-bridge-toggle\" onclick=\"event.stopPropagation(); this.parentElement.classList.toggle('show-bridge')\">[bridge prompt]</span>`;\n html += `<div class=\"codex-bridge-content\"><pre>${escapeHtml(fullContent)}</pre></div>`;\n }\n\n html += '</div>';\n return html;\n }\n\n if (entry.type === 'compaction') {\n return `<div class=\"compaction\" id=\"${entryId}\" onclick=\"this.classList.toggle('expanded')\">\n <div class=\"compaction-label\">[compaction]</div>\n <div class=\"compaction-collapsed\">Compacted from ${entry.tokensBefore.toLocaleString()} tokens</div>\n <div class=\"compaction-content\"><strong>Compacted from ${entry.tokensBefore.toLocaleString()} tokens</strong>\\n\\n${escapeHtml(entry.summary)}</div>\n </div>`;\n }\n\n if (entry.type === 'branch_summary') {\n return `<div class=\"branch-summary\" id=\"${entryId}\">${tsHtml}\n <div class=\"branch-summary-header\">Branch Summary</div>\n <div class=\"markdown-content\">${safeMarkedParse(entry.summary)}</div>\n </div>`;\n }\n\n if (entry.type === 'custom_message' && entry.display) {\n return `<div class=\"hook-message\" id=\"${entryId}\">${tsHtml}\n <div class=\"hook-type\">[${escapeHtml(entry.customType)}]</div>\n <div class=\"markdown-content\">${safeMarkedParse(typeof entry.content === 'string' ? entry.content : JSON.stringify(entry.content))}</div>\n </div>`;\n }\n\n return '';\n }\n\n // ============================================================\n // HEADER / STATS\n // ============================================================\n\n function computeStats(entryList) {\n let userMessages = 0, assistantMessages = 0, toolResults = 0;\n let customMessages = 0, compactions = 0, branchSummaries = 0, toolCalls = 0;\n const tokens = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };\n const cost = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };\n const models = new Set();\n\n for (const entry of entryList) {\n if (entry.type === 'message') {\n const msg = entry.message;\n if (msg.role === 'user') userMessages++;\n if (msg.role === 'assistant') {\n assistantMessages++;\n if (msg.model) models.add(msg.provider ? `${msg.provider}/${msg.model}` : msg.model);\n if (msg.usage) {\n tokens.input += msg.usage.input || 0;\n tokens.output += msg.usage.output || 0;\n tokens.cacheRead += msg.usage.cacheRead || 0;\n tokens.cacheWrite += msg.usage.cacheWrite || 0;\n if (msg.usage.cost) {\n cost.input += msg.usage.cost.input || 0;\n cost.output += msg.usage.cost.output || 0;\n cost.cacheRead += msg.usage.cost.cacheRead || 0;\n cost.cacheWrite += msg.usage.cost.cacheWrite || 0;\n }\n }\n toolCalls += msg.content.filter(c => c.type === 'toolCall').length;\n }\n if (msg.role === 'toolResult') toolResults++;\n } else if (entry.type === 'compaction') {\n compactions++;\n } else if (entry.type === 'branch_summary') {\n branchSummaries++;\n } else if (entry.type === 'custom_message') {\n customMessages++;\n }\n }\n\n return { userMessages, assistantMessages, toolResults, customMessages, compactions, branchSummaries, toolCalls, tokens, cost, models: Array.from(models) };\n }\n\n const globalStats = computeStats(entries);\n\n function renderHeader() {\n const totalCost = globalStats.cost.input + globalStats.cost.output + globalStats.cost.cacheRead + globalStats.cost.cacheWrite;\n\n const tokenParts = [];\n if (globalStats.tokens.input) tokenParts.push(`↑${formatTokens(globalStats.tokens.input)}`);\n if (globalStats.tokens.output) tokenParts.push(`↓${formatTokens(globalStats.tokens.output)}`);\n if (globalStats.tokens.cacheRead) tokenParts.push(`R${formatTokens(globalStats.tokens.cacheRead)}`);\n if (globalStats.tokens.cacheWrite) tokenParts.push(`W${formatTokens(globalStats.tokens.cacheWrite)}`);\n\n const msgParts = [];\n if (globalStats.userMessages) msgParts.push(`${globalStats.userMessages} user`);\n if (globalStats.assistantMessages) msgParts.push(`${globalStats.assistantMessages} assistant`);\n if (globalStats.toolResults) msgParts.push(`${globalStats.toolResults} tool results`);\n if (globalStats.customMessages) msgParts.push(`${globalStats.customMessages} custom`);\n if (globalStats.compactions) msgParts.push(`${globalStats.compactions} compactions`);\n if (globalStats.branchSummaries) msgParts.push(`${globalStats.branchSummaries} branch summaries`);\n\n let html = `\n <div class=\"header\">\n <h1>Session: ${escapeHtml(header?.id || 'unknown')}</h1>\n <div class=\"help-bar\">Ctrl+T toggle thinking · Ctrl+O toggle tools</div>\n <div class=\"header-info\">\n <div class=\"info-item\"><span class=\"info-label\">Date:</span><span class=\"info-value\">${header?.timestamp ? new Date(header.timestamp).toLocaleString() : 'unknown'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Models:</span><span class=\"info-value\">${globalStats.models.join(', ') || 'unknown'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Messages:</span><span class=\"info-value\">${msgParts.join(', ') || '0'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Tool Calls:</span><span class=\"info-value\">${globalStats.toolCalls}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Tokens:</span><span class=\"info-value\">${tokenParts.join(' ') || '0'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Cost:</span><span class=\"info-value\">${totalCost.toFixed(3)}</span></div>\n </div>\n </div>`;\n\n if (systemPrompt) {\n html += `<div class=\"system-prompt\">\n <div class=\"system-prompt-header\">System Prompt</div>\n <div class=\"system-prompt-content\">${escapeHtml(systemPrompt)}</div>\n </div>`;\n }\n\n if (tools && tools.length > 0) {\n html += `<div class=\"tools-list\">\n <div class=\"tools-header\">Available Tools</div>\n <div class=\"tools-content\">\n ${tools.map(t => `<div class=\"tool-item\"><span class=\"tool-item-name\">${escapeHtml(t.name)}</span> - <span class=\"tool-item-desc\">${escapeHtml(t.description)}</span></div>`).join('')}\n </div>\n </div>`;\n }\n\n return html;\n }\n\n // ============================================================\n // NAVIGATION\n // ============================================================\n\n // Cache for rendered entry DOM nodes\n const entryCache = new Map();\n\n function renderEntryToNode(entry) {\n // Check cache first\n if (entryCache.has(entry.id)) {\n return entryCache.get(entry.id).cloneNode(true);\n }\n\n // Render to HTML string, then parse to node\n const html = renderEntry(entry);\n if (!html) return null;\n\n const template = document.createElement('template');\n template.innerHTML = html;\n const node = template.content.firstElementChild;\n\n // Cache the node\n if (node) {\n entryCache.set(entry.id, node.cloneNode(true));\n }\n return node;\n }\n\n function navigateTo(targetId, scrollMode = 'target', scrollToEntryId = null) {\n currentLeafId = targetId;\n currentTargetId = scrollToEntryId || targetId;\n const path = getPath(targetId);\n\n renderTree();\n\n document.getElementById('header-container').innerHTML = renderHeader();\n\n // Build messages using cached DOM nodes\n const messagesEl = document.getElementById('messages');\n const fragment = document.createDocumentFragment();\n\n for (const entry of path) {\n const node = renderEntryToNode(entry);\n if (node) {\n fragment.appendChild(node);\n }\n }\n\n messagesEl.innerHTML = '';\n messagesEl.appendChild(fragment);\n\n // Attach click handlers for copy-link buttons\n messagesEl.querySelectorAll('.copy-link-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n const entryId = btn.dataset.entryId;\n const shareUrl = buildShareUrl(entryId);\n copyToClipboard(shareUrl, btn);\n });\n });\n\n // Use setTimeout(0) to ensure DOM is fully laid out before scrolling\n setTimeout(() => {\n const content = document.getElementById('content');\n if (scrollMode === 'bottom') {\n content.scrollTop = content.scrollHeight;\n } else if (scrollMode === 'target') {\n const scrollTargetId = scrollToEntryId || targetId;\n const targetEl = document.getElementById(`entry-${scrollTargetId}`);\n if (targetEl) {\n targetEl.scrollIntoView({ block: 'center' });\n if (scrollToEntryId) {\n targetEl.classList.add('highlight');\n setTimeout(() => targetEl.classList.remove('highlight'), 2000);\n }\n }\n }\n }, 0);\n }\n\n // ============================================================\n // INITIALIZATION\n // ============================================================\n\n // Escape HTML tags in text (but not code blocks)\n function escapeHtmlTags(text) {\n return text.replace(/<(?=[a-zA-Z\\/])/g, '&lt;');\n }\n\n // Configure marked with syntax highlighting and HTML escaping for text\n marked.use({\n breaks: true,\n gfm: true,\n renderer: {\n // Code blocks: syntax highlight, no HTML escaping\n code(token) {\n const code = token.text;\n const lang = token.lang;\n let highlighted;\n if (lang && hljs.getLanguage(lang)) {\n try {\n highlighted = hljs.highlight(code, { language: lang }).value;\n } catch {\n highlighted = escapeHtml(code);\n }\n } else {\n // Auto-detect language if not specified\n try {\n highlighted = hljs.highlightAuto(code).value;\n } catch {\n highlighted = escapeHtml(code);\n }\n }\n return `<pre><code class=\"hljs\">${highlighted}</code></pre>`;\n },\n // Text content: escape HTML tags\n text(token) {\n return escapeHtmlTags(escapeHtml(token.text));\n },\n // Inline code: escape HTML\n codespan(token) {\n return `<code>${escapeHtml(token.text)}</code>`;\n }\n }\n });\n\n // Simple marked parse (escaping handled in renderers)\n function safeMarkedParse(text) {\n return marked.parse(text);\n }\n\n // Search input\n const searchInput = document.getElementById('tree-search');\n searchInput.addEventListener('input', (e) => {\n searchQuery = e.target.value;\n forceTreeRerender();\n });\n\n // Filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n filterMode = btn.dataset.filter;\n forceTreeRerender();\n });\n });\n\n // Sidebar toggle\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('sidebar-overlay');\n const hamburger = document.getElementById('hamburger');\n\n hamburger.addEventListener('click', () => {\n sidebar.classList.add('open');\n overlay.classList.add('open');\n hamburger.style.display = 'none';\n });\n\n const closeSidebar = () => {\n sidebar.classList.remove('open');\n overlay.classList.remove('open');\n hamburger.style.display = '';\n };\n\n overlay.addEventListener('click', closeSidebar);\n document.getElementById('sidebar-close').addEventListener('click', closeSidebar);\n\n // Toggle states\n let thinkingExpanded = true;\n let toolOutputsExpanded = false;\n\n const toggleThinking = () => {\n thinkingExpanded = !thinkingExpanded;\n document.querySelectorAll('.thinking-text').forEach(el => {\n el.style.display = thinkingExpanded ? '' : 'none';\n });\n document.querySelectorAll('.thinking-collapsed').forEach(el => {\n el.style.display = thinkingExpanded ? 'none' : 'block';\n });\n };\n\n const toggleToolOutputs = () => {\n toolOutputsExpanded = !toolOutputsExpanded;\n document.querySelectorAll('.tool-output.expandable').forEach(el => {\n el.classList.toggle('expanded', toolOutputsExpanded);\n });\n document.querySelectorAll('.compaction').forEach(el => {\n el.classList.toggle('expanded', toolOutputsExpanded);\n });\n };\n\n // Keyboard shortcuts\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n searchInput.value = '';\n searchQuery = '';\n navigateTo(leafId, 'bottom');\n }\n if (e.ctrlKey && e.key === 't') {\n e.preventDefault();\n toggleThinking();\n }\n if (e.ctrlKey && e.key === 'o') {\n e.preventDefault();\n toggleToolOutputs();\n }\n });\n\n // Initial render\n // If URL has targetId, scroll to that specific message; otherwise stay at top\n if (leafId) {\n if (urlTargetId && byId.has(urlTargetId)) {\n navigateTo(leafId, 'target', urlTargetId);\n } else {\n navigateTo(leafId, 'none');\n }\n } else if (entries.length > 0) {\n // Fallback: use last entry if no leafId\n navigateTo(entries[entries.length - 1].id, 'none');\n }\n })();\n</script>\n</body>\n</html>\n";
2
+ export const TEMPLATE = "<!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</title>\n <style>*{margin:0;padding:0;box-sizing:border-box;}:root{--line-height:18px;}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{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{background:color-mix(in srgb,var(--accent) 10%,transparent);}.tree-node:not(.in-path){opacity:0.5;}.tree-node:not(.in-path):hover{opacity:1;}.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;}#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{font-size:11px;color:var(--warning);margin-bottom:var(--line-height);}.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{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;position:relative;}.assistant-message{padding:0;position:relative;}.copy-link-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:6px;background:var(--container-bg);border:1px solid var(--dim);border-radius:4px;color:var(--muted);cursor:pointer;opacity:0;transition:opacity 0.15s,background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:center;z-index:10;}.user-message:hover .copy-link-btn,.assistant-message:hover .copy-link-btn{opacity:1;}.copy-link-btn:hover{background:var(--accent);color:var(--body-bg);border-color:var(--accent);}.copy-link-btn.copied{background:var(--success,#22c55e);color:white;border-color:var(--success,#22c55e);}.user-message.highlight,.assistant-message.highlight{animation:highlight-pulse 2s ease-out;}@keyframes highlight-pulse{0%{box-shadow:0 0 0 3px var(--accent);}100%{box-shadow:0 0 0 0 transparent;}}.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{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);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;font-family:inherit;overflow-x:auto;}.tool-output > div,.output-preview,.output-full{margin:0;padding:0;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;}.ansi-line{white-space:pre-wrap;}.tool-images{}.tool-image{max-width:100%;max-height:500px;border-radius:4px;margin:var(--line-height) 0;}.expand-hint{color:var(--toolOutput);}.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{padding:0 var(--line-height);color:var(--dim);font-size:11px;}.model-name{color:var(--borderAccent);font-weight:bold;}.codex-bridge-toggle{color:var(--muted);cursor:pointer;text-decoration:underline;font-size:10px;}.codex-bridge-toggle:hover{color:var(--accent);}.codex-bridge-content{display:none;margin-top:8px;padding:8px;background:var(--exportCardBg,var(--container-bg));border-radius:4px;font-size:11px;max-height:300px;overflow:auto;}.codex-bridge-content pre{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--muted);}.model-change.show-bridge .codex-bridge-content{display:block;}.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{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);}.system-prompt.provider-prompt{border-left:3px solid var(--warning);}.system-prompt-note{font-size:10px;font-style:italic;color:var(--muted);margin-top:4px;}.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);margin-bottom:var(--line-height);}.tool-item{font-size:11px;}.tool-item-name{font-weight:bold;color:var(--text);}.tool-item-desc{color:var(--dim);}.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{background:var(--customMessageBg);padding:var(--line-height);border-radius:4px;}.branch-summary-header{font-weight:bold;color:var(--borderAccent);}.error-text{color:var(--error);padding:0 var(--line-height);}.tool-error{color:var(--error);}.message-images{margin-bottom:12px;}.message-image{max-width:100%;max-height:400px;border-radius:4px;margin:var(--line-height) 0;}.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(--text);}.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;}.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-function,.hljs-title,.hljs-title.function_,.hljs-section,.hljs-name{color:var(--syntaxFunction);}.hljs-type,.hljs-class,.hljs-title.class_,.hljs-built_in{color:var(--syntaxType);}.hljs-attr,.hljs-variable,.hljs-variable.language_,.hljs-params,.hljs-property{color:var(--syntaxVariable);}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:var(--syntaxKeyword);}.hljs-operator{color:var(--syntaxOperator);}.hljs-punctuation{color:var(--syntaxPunctuation);}.hljs-subst{color:var(--text);}.footer{margin-top:48px;padding:20px;text-align:center;color:var(--dim);font-size:10px;}#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;}}</style>\n <theme-vars/>\n</head>\n<body>\n <button id=\"hamburger\" title=\"Open sidebar\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><circle cx=\"6\" cy=\"6\" r=\"2.5\"/><circle cx=\"6\" cy=\"18\" r=\"2.5\"/><circle cx=\"18\" cy=\"12\" r=\"2.5\"/><rect x=\"5\" y=\"6\" width=\"2\" height=\"12\"/><path d=\"M6 12h10c1 0 2 0 2-2V8\"/></svg></button>\n <div id=\"sidebar-overlay\"></div>\n <div id=\"app\">\n <aside id=\"sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-controls\">\n <input type=\"text\" class=\"sidebar-search\" id=\"tree-search\" placeholder=\"Search...\">\n </div>\n <div class=\"sidebar-filters\">\n <button class=\"filter-btn active\" data-filter=\"default\" title=\"Hide settings entries\">Default</button>\n <button class=\"filter-btn\" data-filter=\"no-tools\" title=\"Default minus tool results\">No-tools</button>\n <button class=\"filter-btn\" data-filter=\"user-only\" title=\"Only user messages\">User</button>\n <button class=\"filter-btn\" data-filter=\"labeled-only\" title=\"Only labeled entries\">Labeled</button>\n <button class=\"filter-btn\" data-filter=\"all\" title=\"Show everything\">All</button>\n <button class=\"sidebar-close\" id=\"sidebar-close\" title=\"Close\">✕</button>\n </div>\n </div>\n <div class=\"tree-container\" id=\"tree-container\"></div>\n <div class=\"tree-status\" id=\"tree-status\"></div>\n </aside>\n <main id=\"content\">\n <div id=\"header-container\"></div>\n <div id=\"messages\"></div>\n </main>\n <div id=\"image-modal\" class=\"image-modal\">\n <img id=\"modal-image\" src=\"\" alt=\"\">\n </div>\n </div>\n\n <script id=\"session-data\" type=\"application/json\">{{SESSION_DATA}}</script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.4/marked.min.js\" integrity=\"sha512-VmLxPVdDGeR+F0DzUHVqzHwaR4ZSSh1g/7aYXwKT1PAGVxunOEcysta+4H5Utvmpr2xExEPybZ8q+iM9F1tGdw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\" integrity=\"sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n <script> (function() {\n 'use strict';\n\n // ============================================================\n // DATA LOADING\n // ============================================================\n\n const base64 = document.getElementById('session-data').textContent;\n const binary = atob(base64);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) {\n bytes[i] = binary.charCodeAt(i);\n }\n const data = JSON.parse(new TextDecoder('utf-8').decode(bytes));\n const { header, entries, leafId: defaultLeafId, systemPrompt, codexInjectionInfo, tools } = data;\n\n // ============================================================\n // URL PARAMETER HANDLING\n // ============================================================\n\n // Parse URL parameters for deep linking: leafId and targetId\n // Check for injected params (when loaded in iframe via srcdoc) or use window.location\n const injectedParams = document.querySelector('meta[name=\"pi-url-params\"]');\n const searchString = injectedParams ? injectedParams.content : window.location.search.substring(1);\n const urlParams = new URLSearchParams(searchString);\n const urlLeafId = urlParams.get('leafId');\n const urlTargetId = urlParams.get('targetId');\n // Use URL leafId if provided, otherwise fall back to session default\n const leafId = urlLeafId || defaultLeafId;\n\n // ============================================================\n // DATA STRUCTURES\n // ============================================================\n\n // Entry lookup by ID\n const byId = new Map();\n for (const entry of entries) {\n byId.set(entry.id, entry);\n }\n\n // Tool call lookup (toolCallId -> {name, arguments})\n const toolCallMap = new Map();\n for (const entry of entries) {\n if (entry.type === 'message' && entry.message.role === 'assistant') {\n const content = entry.message.content;\n if (Array.isArray(content)) {\n for (const block of content) {\n if (block.type === 'toolCall') {\n toolCallMap.set(block.id, { name: block.name, arguments: block.arguments });\n }\n }\n }\n }\n }\n\n // Label lookup (entryId -> label string)\n // Labels are stored in 'label' entries that reference their target via parentId\n const labelMap = new Map();\n for (const entry of entries) {\n if (entry.type === 'label' && entry.parentId && entry.label) {\n labelMap.set(entry.parentId, entry.label);\n }\n }\n\n // ============================================================\n // TREE DATA PREPARATION (no DOM, pure data)\n // ============================================================\n\n /**\n * Build tree structure from flat entries.\n * Returns array of root nodes, each with { entry, children, label }.\n */\n function buildTree() {\n const nodeMap = new Map();\n const roots = [];\n\n // Create nodes\n for (const entry of entries) {\n nodeMap.set(entry.id, { \n entry, \n children: [],\n label: labelMap.get(entry.id)\n });\n }\n\n // Build parent-child relationships\n for (const entry of entries) {\n const node = nodeMap.get(entry.id);\n if (entry.parentId === null || entry.parentId === undefined || entry.parentId === entry.id) {\n roots.push(node);\n } else {\n const parent = nodeMap.get(entry.parentId);\n if (parent) {\n parent.children.push(node);\n } else {\n roots.push(node);\n }\n }\n }\n\n // Sort children by timestamp\n function sortChildren(node) {\n node.children.sort((a, b) =>\n new Date(a.entry.timestamp).getTime() - new Date(b.entry.timestamp).getTime()\n );\n node.children.forEach(sortChildren);\n }\n roots.forEach(sortChildren);\n\n return roots;\n }\n\n /**\n * Build set of entry IDs on path from root to target.\n */\n function buildActivePathIds(targetId) {\n const ids = new Set();\n let current = byId.get(targetId);\n while (current) {\n ids.add(current.id);\n // Stop if no parent or self-referencing (root)\n if (!current.parentId || current.parentId === current.id) {\n break;\n }\n current = byId.get(current.parentId);\n }\n return ids;\n }\n\n /**\n * Get array of entries from root to target (the conversation path).\n */\n function getPath(targetId) {\n const path = [];\n let current = byId.get(targetId);\n while (current) {\n path.unshift(current);\n // Stop if no parent or self-referencing (root)\n if (!current.parentId || current.parentId === current.id) {\n break;\n }\n current = byId.get(current.parentId);\n }\n return path;\n }\n\n /**\n * Flatten tree into list with indentation and connector info.\n * Returns array of { node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots }.\n * Matches tree-selector.ts logic exactly.\n */\n function flattenTree(roots, activePathIds) {\n const result = [];\n const multipleRoots = roots.length > 1;\n\n // Mark which subtrees contain the active leaf\n const containsActive = new Map();\n function markActive(node) {\n let has = activePathIds.has(node.entry.id);\n for (const child of node.children) {\n if (markActive(child)) has = true;\n }\n containsActive.set(node, has);\n return has;\n }\n roots.forEach(markActive);\n\n // Stack: [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild]\n const stack = [];\n\n // Add roots (prioritize branch containing active leaf)\n const orderedRoots = [...roots].sort((a, b) => \n Number(containsActive.get(b)) - Number(containsActive.get(a))\n );\n for (let i = orderedRoots.length - 1; i >= 0; i--) {\n const isLast = i === orderedRoots.length - 1;\n stack.push([orderedRoots[i], multipleRoots ? 1 : 0, multipleRoots, multipleRoots, isLast, [], multipleRoots]);\n }\n\n while (stack.length > 0) {\n const [node, indent, justBranched, showConnector, isLast, gutters, isVirtualRootChild] = stack.pop();\n\n result.push({ node, indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots });\n\n const children = node.children;\n const multipleChildren = children.length > 1;\n\n // Order children (active branch first)\n const orderedChildren = [...children].sort((a, b) => \n Number(containsActive.get(b)) - Number(containsActive.get(a))\n );\n\n // Calculate child indent (matches tree-selector.ts)\n let childIndent;\n if (multipleChildren) {\n // Parent branches: children get +1\n childIndent = indent + 1;\n } else if (justBranched && indent > 0) {\n // First generation after a branch: +1 for visual grouping\n childIndent = indent + 1;\n } else {\n // Single-child chain: stay flat\n childIndent = indent;\n }\n\n // Build gutters for children\n const connectorDisplayed = showConnector && !isVirtualRootChild;\n const currentDisplayIndent = multipleRoots ? Math.max(0, indent - 1) : indent;\n const connectorPosition = Math.max(0, currentDisplayIndent - 1);\n const childGutters = connectorDisplayed\n ? [...gutters, { position: connectorPosition, show: !isLast }]\n : gutters;\n\n // Add children in reverse order for stack\n for (let i = orderedChildren.length - 1; i >= 0; i--) {\n const childIsLast = i === orderedChildren.length - 1;\n stack.push([orderedChildren[i], childIndent, multipleChildren, multipleChildren, childIsLast, childGutters, false]);\n }\n }\n\n return result;\n }\n\n /**\n * Build ASCII prefix string for tree node.\n */\n function buildTreePrefix(flatNode) {\n const { indent, showConnector, isLast, gutters, isVirtualRootChild, multipleRoots } = flatNode;\n const displayIndent = multipleRoots ? Math.max(0, indent - 1) : indent;\n const connector = showConnector && !isVirtualRootChild ? (isLast ? '└─ ' : '├─ ') : '';\n const connectorPosition = connector ? displayIndent - 1 : -1;\n\n const totalChars = displayIndent * 3;\n const prefixChars = [];\n for (let i = 0; i < totalChars; i++) {\n const level = Math.floor(i / 3);\n const posInLevel = i % 3;\n\n const gutter = gutters.find(g => g.position === level);\n if (gutter) {\n prefixChars.push(posInLevel === 0 ? (gutter.show ? '│' : ' ') : ' ');\n } else if (connector && level === connectorPosition) {\n if (posInLevel === 0) {\n prefixChars.push(isLast ? '└' : '├');\n } else if (posInLevel === 1) {\n prefixChars.push('─');\n } else {\n prefixChars.push(' ');\n }\n } else {\n prefixChars.push(' ');\n }\n }\n return prefixChars.join('');\n }\n\n // ============================================================\n // FILTERING (pure data)\n // ============================================================\n\n let filterMode = 'default';\n let searchQuery = '';\n\n function hasTextContent(content) {\n if (typeof content === 'string') return content.trim().length > 0;\n if (Array.isArray(content)) {\n for (const c of content) {\n if (c.type === 'text' && c.text && c.text.trim().length > 0) return true;\n }\n }\n return false;\n }\n\n function extractContent(content) {\n if (typeof content === 'string') return content;\n if (Array.isArray(content)) {\n return content\n .filter(c => c.type === 'text' && c.text)\n .map(c => c.text)\n .join('');\n }\n return '';\n }\n\n function getSearchableText(entry, label) {\n const parts = [];\n if (label) parts.push(label);\n\n switch (entry.type) {\n case 'message': {\n const msg = entry.message;\n parts.push(msg.role);\n if (msg.content) parts.push(extractContent(msg.content));\n if (msg.role === 'bashExecution' && msg.command) parts.push(msg.command);\n break;\n }\n case 'custom_message':\n parts.push(entry.customType);\n parts.push(typeof entry.content === 'string' ? entry.content : extractContent(entry.content));\n break;\n case 'compaction':\n parts.push('compaction');\n break;\n case 'branch_summary':\n parts.push('branch summary', entry.summary);\n break;\n case 'model_change':\n parts.push('model', entry.modelId);\n break;\n case 'thinking_level_change':\n parts.push('thinking', entry.thinkingLevel);\n break;\n }\n\n return parts.join(' ').toLowerCase();\n }\n\n /**\n * Filter flat nodes based on current filterMode and searchQuery.\n */\n function filterNodes(flatNodes, currentLeafId) {\n const searchTokens = searchQuery.toLowerCase().split(/\\s+/).filter(Boolean);\n\n return flatNodes.filter(flatNode => {\n const entry = flatNode.node.entry;\n const label = flatNode.node.label;\n const isCurrentLeaf = entry.id === currentLeafId;\n\n // Always show current leaf\n if (isCurrentLeaf) return true;\n\n // Hide assistant messages with only tool calls (no text) unless error/aborted\n if (entry.type === 'message' && entry.message.role === 'assistant') {\n const msg = entry.message;\n const hasText = hasTextContent(msg.content);\n const isErrorOrAborted = msg.stopReason && msg.stopReason !== 'stop' && msg.stopReason !== 'toolUse';\n if (!hasText && !isErrorOrAborted) return false;\n }\n\n // Apply filter mode\n const isSettingsEntry = ['label', 'custom', 'model_change', 'thinking_level_change', 'mode_change'].includes(entry.type);\n let passesFilter = true;\n\n switch (filterMode) {\n case 'user-only':\n passesFilter = entry.type === 'message' && entry.message.role === 'user';\n break;\n case 'no-tools':\n passesFilter = !isSettingsEntry && !(entry.type === 'message' && entry.message.role === 'toolResult');\n break;\n case 'labeled-only':\n passesFilter = label !== undefined;\n break;\n case 'all':\n passesFilter = true;\n break;\n default: // 'default'\n passesFilter = !isSettingsEntry;\n break;\n }\n\n if (!passesFilter) return false;\n\n // Apply search filter\n if (searchTokens.length > 0) {\n const nodeText = getSearchableText(entry, label);\n if (!searchTokens.every(t => nodeText.includes(t))) return false;\n }\n\n return true;\n });\n }\n\n // ============================================================\n // TREE DISPLAY TEXT (pure data -> string)\n // ============================================================\n\n function shortenPath(p) {\n if (typeof p !== 'string') return '';\n if (p.startsWith('/Users/')) {\n const parts = p.split('/');\n if (parts.length > 2) return '~' + p.slice(('/Users/' + parts[2]).length);\n }\n if (p.startsWith('/home/')) {\n const parts = p.split('/');\n if (parts.length > 2) return '~' + p.slice(('/home/' + parts[2]).length);\n }\n return p;\n }\n\n function formatToolCall(name, args) {\n switch (name) {\n case 'read': {\n const path = shortenPath(String(args.path || args.file_path || ''));\n const offset = args.offset;\n const limit = args.limit;\n let display = path;\n if (offset !== undefined || limit !== undefined) {\n const start = offset ?? 1;\n const end = limit !== undefined ? start + limit - 1 : '';\n display += `:${start}${end ? `-${end}` : ''}`;\n }\n return `[read: ${display}]`;\n }\n case 'write':\n return `[write: ${shortenPath(String(args.path || args.file_path || ''))}]`;\n case 'edit':\n return `[edit: ${shortenPath(String(args.path || args.file_path || ''))}]`;\n case 'bash': {\n const rawCmd = String(args.command || '');\n const cmd = rawCmd.replace(/[\\n\\t]/g, ' ').trim().slice(0, 50);\n return `[bash: ${cmd}${rawCmd.length > 50 ? '...' : ''}]`;\n }\n case 'grep':\n return `[grep: /${args.pattern || ''}/ in ${shortenPath(String(args.path || '.'))}]`;\n case 'find':\n return `[find: ${args.pattern || ''} in ${shortenPath(String(args.path || '.'))}]`;\n case 'ls':\n return `[ls: ${shortenPath(String(args.path || '.'))}]`;\n default: {\n const argsStr = JSON.stringify(args).slice(0, 40);\n return `[${name}: ${argsStr}${JSON.stringify(args).length > 40 ? '...' : ''}]`;\n }\n }\n }\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Truncate string to maxLen chars, append \"...\" if truncated.\n */\n function truncate(s, maxLen = 100) {\n if (s.length <= maxLen) return s;\n return s.slice(0, maxLen) + '...';\n }\n\n /**\n * Get display text for tree node (returns HTML string).\n */\n function getTreeNodeDisplayHtml(entry, label) {\n const normalize = s => s.replace(/[\\n\\t]/g, ' ').trim();\n const labelHtml = label ? `<span class=\"tree-label\">[${escapeHtml(label)}]</span> ` : '';\n\n switch (entry.type) {\n case 'message': {\n const msg = entry.message;\n if (msg.role === 'user') {\n const content = truncate(normalize(extractContent(msg.content)));\n return labelHtml + `<span class=\"tree-role-user\">user:</span> ${escapeHtml(content)}`;\n }\n if (msg.role === 'assistant') {\n const textContent = truncate(normalize(extractContent(msg.content)));\n if (textContent) {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> ${escapeHtml(textContent)}`;\n }\n if (msg.stopReason === 'aborted') {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-muted\">(aborted)</span>`;\n }\n if (msg.errorMessage) {\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-error\">${escapeHtml(truncate(msg.errorMessage))}</span>`;\n }\n return labelHtml + `<span class=\"tree-role-assistant\">assistant:</span> <span class=\"tree-muted\">(no text)</span>`;\n }\n if (msg.role === 'toolResult') {\n const toolCall = msg.toolCallId ? toolCallMap.get(msg.toolCallId) : null;\n if (toolCall) {\n return labelHtml + `<span class=\"tree-role-tool\">${escapeHtml(formatToolCall(toolCall.name, toolCall.arguments))}</span>`;\n }\n return labelHtml + `<span class=\"tree-role-tool\">[${msg.toolName || 'tool'}]</span>`;\n }\n if (msg.role === 'bashExecution') {\n const cmd = truncate(normalize(msg.command || ''));\n return labelHtml + `<span class=\"tree-role-tool\">[bash]:</span> ${escapeHtml(cmd)}`;\n }\n return labelHtml + `<span class=\"tree-muted\">[${msg.role}]</span>`;\n }\n case 'compaction':\n return labelHtml + `<span class=\"tree-compaction\">[compaction: ${Math.round(entry.tokensBefore/1000)}k tokens]</span>`;\n case 'branch_summary': {\n const summary = truncate(normalize(entry.summary || ''));\n return labelHtml + `<span class=\"tree-branch-summary\">[branch summary]:</span> ${escapeHtml(summary)}`;\n }\n case 'custom_message': {\n const content = typeof entry.content === 'string' ? entry.content : extractContent(entry.content);\n return labelHtml + `<span class=\"tree-custom\">[${escapeHtml(entry.customType)}]:</span> ${escapeHtml(truncate(normalize(content)))}`;\n }\n case 'model_change':\n return labelHtml + `<span class=\"tree-muted\">[model: ${entry.modelId}]</span>`;\n case 'thinking_level_change':\n return labelHtml + `<span class=\"tree-muted\">[thinking: ${entry.thinkingLevel}]</span>`;\n default:\n return labelHtml + `<span class=\"tree-muted\">[${entry.type}]</span>`;\n }\n }\n\n // ============================================================\n // TREE RENDERING (DOM manipulation)\n // ============================================================\n\n let currentLeafId = leafId;\n let currentTargetId = urlTargetId || leafId;\n let treeRendered = false;\n\n function renderTree() {\n const tree = buildTree();\n const activePathIds = buildActivePathIds(currentLeafId);\n const flatNodes = flattenTree(tree, activePathIds);\n const filtered = filterNodes(flatNodes, currentLeafId);\n const container = document.getElementById('tree-container');\n\n // Full render only on first call or when filter/search changes\n if (!treeRendered) {\n container.innerHTML = '';\n\n for (const flatNode of filtered) {\n const entry = flatNode.node.entry;\n const isOnPath = activePathIds.has(entry.id);\n const isTarget = entry.id === currentTargetId;\n\n const div = document.createElement('div');\n div.className = 'tree-node';\n if (isOnPath) div.classList.add('in-path');\n if (isTarget) div.classList.add('active');\n div.dataset.id = entry.id;\n\n const prefix = buildTreePrefix(flatNode);\n const prefixSpan = document.createElement('span');\n prefixSpan.className = 'tree-prefix';\n prefixSpan.textContent = prefix;\n\n const marker = document.createElement('span');\n marker.className = 'tree-marker';\n marker.textContent = isOnPath ? '•' : ' ';\n\n const content = document.createElement('span');\n content.className = 'tree-content';\n content.innerHTML = getTreeNodeDisplayHtml(entry, flatNode.node.label);\n\n div.appendChild(prefixSpan);\n div.appendChild(marker);\n div.appendChild(content);\n div.addEventListener('click', () => navigateTo(entry.id));\n\n container.appendChild(div);\n }\n\n treeRendered = true;\n } else {\n // Just update markers and classes\n const nodes = container.querySelectorAll('.tree-node');\n for (const node of nodes) {\n const id = node.dataset.id;\n const isOnPath = activePathIds.has(id);\n const isTarget = id === currentTargetId;\n\n node.classList.toggle('in-path', isOnPath);\n node.classList.toggle('active', isTarget);\n\n const marker = node.querySelector('.tree-marker');\n if (marker) {\n marker.textContent = isOnPath ? '•' : ' ';\n }\n }\n }\n\n document.getElementById('tree-status').textContent = `${filtered.length} / ${flatNodes.length} entries`;\n\n // Scroll active node into view after layout\n setTimeout(() => {\n const activeNode = container.querySelector('.tree-node.active');\n if (activeNode) {\n activeNode.scrollIntoView({ block: 'nearest' });\n }\n }, 0);\n }\n\n function forceTreeRerender() {\n treeRendered = false;\n renderTree();\n }\n\n // ============================================================\n // MESSAGE RENDERING\n // ============================================================\n\n function formatTokens(count) {\n if (count < 1000) return count.toString();\n if (count < 10000) return (count / 1000).toFixed(1) + 'k';\n if (count < 1000000) return Math.round(count / 1000) + 'k';\n return (count / 1000000).toFixed(1) + 'M';\n }\n\n function formatTimestamp(ts) {\n if (!ts) return '';\n const date = new Date(ts);\n return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n }\n\n function replaceTabs(text) {\n return text.replace(/\\t/g, ' ');\n }\n\n /** Safely coerce value to string for display. Returns null if invalid type. */\n function str(value) {\n if (typeof value === 'string') return value;\n if (value == null) return '';\n return null;\n }\n\n function getLanguageFromPath(filePath) {\n const ext = filePath.split('.').pop()?.toLowerCase();\n const extToLang = {\n ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',\n py: 'python', rb: 'ruby', rs: 'rust', go: 'go', java: 'java',\n c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp', cs: 'csharp',\n php: 'php', sh: 'bash', bash: 'bash', zsh: 'bash',\n sql: 'sql', html: 'html', css: 'css', scss: 'scss',\n json: 'json', yaml: 'yaml', yml: 'yaml', xml: 'xml',\n md: 'markdown', dockerfile: 'dockerfile'\n };\n return extToLang[ext];\n }\n\n function findToolResult(toolCallId) {\n for (const entry of entries) {\n if (entry.type === 'message' && entry.message.role === 'toolResult') {\n if (entry.message.toolCallId === toolCallId) {\n return entry.message;\n }\n }\n }\n return null;\n }\n\n function formatExpandableOutput(text, maxLines, lang) {\n text = replaceTabs(text);\n const lines = text.split('\\n');\n const displayLines = lines.slice(0, maxLines);\n const remaining = lines.length - maxLines;\n\n if (lang) {\n let highlighted;\n try {\n highlighted = hljs.highlight(text, { language: lang }).value;\n } catch {\n highlighted = escapeHtml(text);\n }\n\n if (remaining > 0) {\n const previewCode = displayLines.join('\\n');\n let previewHighlighted;\n try {\n previewHighlighted = hljs.highlight(previewCode, { language: lang }).value;\n } catch {\n previewHighlighted = escapeHtml(previewCode);\n }\n\n return `<div class=\"tool-output expandable\" onclick=\"this.classList.toggle('expanded')\">\n <div class=\"output-preview\"><pre><code class=\"hljs\">${previewHighlighted}</code></pre>\n <div class=\"expand-hint\">... (${remaining} more lines)</div></div>\n <div class=\"output-full\"><pre><code class=\"hljs\">${highlighted}</code></pre></div></div>`;\n }\n\n return `<div class=\"tool-output\"><pre><code class=\"hljs\">${highlighted}</code></pre></div>`;\n }\n\n // Plain text output\n if (remaining > 0) {\n let out = '<div class=\"tool-output expandable\" onclick=\"this.classList.toggle(\\'expanded\\')\">';\n out += '<div class=\"output-preview\">';\n for (const line of displayLines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += `<div class=\"expand-hint\">... (${remaining} more lines)</div></div>`;\n out += '<div class=\"output-full\">';\n for (const line of lines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += '</div></div>';\n return out;\n }\n\n let out = '<div class=\"tool-output\">';\n for (const line of displayLines) {\n out += `<div>${escapeHtml(replaceTabs(line))}</div>`;\n }\n out += '</div>';\n return out;\n }\n\n function renderToolCall(call) {\n const result = findToolResult(call.id);\n const isError = result?.isError || false;\n const statusClass = result ? (isError ? 'error' : 'success') : 'pending';\n\n const getResultText = () => {\n if (!result) return '';\n const textBlocks = result.content.filter(c => c.type === 'text');\n return textBlocks.map(c => c.text).join('\\n');\n };\n\n const getResultImages = () => {\n if (!result) return [];\n return result.content.filter(c => c.type === 'image');\n };\n\n const renderResultImages = () => {\n const images = getResultImages();\n if (images.length === 0) return '';\n return '<div class=\"tool-images\">' + \n images.map(img => `<img src=\"data:${img.mimeType};base64,${img.data}\" class=\"tool-image\" />`).join('') + \n '</div>';\n };\n\n let html = `<div class=\"tool-execution ${statusClass}\">`;\n const args = call.arguments || {};\n const name = call.name;\n\n const invalidArg = '<span class=\"tool-error\">[invalid arg]</span>';\n\n switch (name) {\n case 'bash': {\n const command = str(args.command);\n const cmdDisplay = command === null ? invalidArg : escapeHtml(command || '...');\n html += `<div class=\"tool-command\">$ ${cmdDisplay}</div>`;\n if (result) {\n const output = getResultText().trim();\n if (output) html += formatExpandableOutput(output, 5);\n }\n break;\n }\n case 'read': {\n const filePath = str(args.file_path ?? args.path);\n const offset = args.offset;\n const limit = args.limit;\n\n let pathHtml = filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''));\n if (filePath !== null && (offset !== undefined || limit !== undefined)) {\n const startLine = offset ?? 1;\n const endLine = limit !== undefined ? startLine + limit - 1 : '';\n pathHtml += `<span class=\"line-numbers\">:${startLine}${endLine ? '-' + endLine : ''}</span>`;\n }\n\n html += `<div class=\"tool-header\"><span class=\"tool-name\">read</span> <span class=\"tool-path\">${pathHtml}</span></div>`;\n if (result) {\n html += renderResultImages();\n const output = getResultText();\n const lang = filePath ? getLanguageFromPath(filePath) : null;\n if (output) html += formatExpandableOutput(output, 10, lang);\n }\n break;\n }\n case 'write': {\n const filePath = str(args.file_path ?? args.path);\n const content = str(args.content);\n\n html += `<div class=\"tool-header\"><span class=\"tool-name\">write</span> <span class=\"tool-path\">${filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''))}</span>`;\n if (content !== null && content) {\n const lines = content.split('\\n');\n if (lines.length > 10) html += ` <span class=\"line-count\">(${lines.length} lines)</span>`;\n }\n html += '</div>';\n\n if (content === null) {\n html += `<div class=\"tool-error\">[invalid content arg - expected string]</div>`;\n } else if (content) {\n const lang = filePath ? getLanguageFromPath(filePath) : null;\n html += formatExpandableOutput(content, 10, lang);\n }\n if (result) {\n const output = getResultText().trim();\n if (output) html += `<div class=\"tool-output\"><div>${escapeHtml(output)}</div></div>`;\n }\n break;\n }\n case 'edit': {\n const filePath = str(args.file_path ?? args.path);\n html += `<div class=\"tool-header\"><span class=\"tool-name\">edit</span> <span class=\"tool-path\">${filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''))}</span></div>`;\n\n if (result?.details?.diff) {\n const diffLines = result.details.diff.split('\\n');\n html += '<div class=\"tool-diff\">';\n for (const line of diffLines) {\n const cls = line.match(/^\\+/) ? 'diff-added' : line.match(/^-/) ? 'diff-removed' : 'diff-context';\n html += `<div class=\"${cls}\">${escapeHtml(replaceTabs(line))}</div>`;\n }\n html += '</div>';\n } else if (result) {\n const output = getResultText().trim();\n if (output) html += `<div class=\"tool-output\"><pre>${escapeHtml(output)}</pre></div>`;\n }\n break;\n }\n default: {\n html += `<div class=\"tool-header\"><span class=\"tool-name\">${escapeHtml(name)}</span></div>`;\n html += `<div class=\"tool-output\"><pre>${escapeHtml(JSON.stringify(args, null, 2))}</pre></div>`;\n if (result) {\n const output = getResultText();\n if (output) html += formatExpandableOutput(output, 10);\n }\n }\n }\n\n html += '</div>';\n return html;\n }\n\n /**\n * Build a shareable URL for a specific message.\n * URL format: base?gistId&leafId=<leafId>&targetId=<entryId>\n */\n function buildShareUrl(entryId) {\n // Check for injected base URL (used when loaded in iframe via srcdoc)\n const baseUrlMeta = document.querySelector('meta[name=\"pi-share-base-url\"]');\n const baseUrl = baseUrlMeta ? baseUrlMeta.content : window.location.href.split('?')[0];\n\n const url = new URL(window.location.href);\n // Find the gist ID (first query param without value, e.g., ?abc123)\n const gistId = Array.from(url.searchParams.keys()).find(k => !url.searchParams.get(k));\n\n // Build the share URL\n const params = new URLSearchParams();\n params.set('leafId', currentLeafId);\n params.set('targetId', entryId);\n\n // If we have an injected base URL (iframe context), use it directly\n if (baseUrlMeta) {\n return `${baseUrl}&${params.toString()}`;\n }\n\n // Otherwise build from current location (direct file access)\n url.search = gistId ? `?${gistId}&${params.toString()}` : `?${params.toString()}`;\n return url.toString();\n }\n\n /**\n * Copy text to clipboard with visual feedback.\n * Uses navigator.clipboard with fallback to execCommand for HTTP contexts.\n */\n async function copyToClipboard(text, button) {\n let success = false;\n try {\n if (navigator.clipboard && navigator.clipboard.writeText) {\n await navigator.clipboard.writeText(text);\n success = true;\n }\n } catch {\n // Clipboard API failed, try fallback\n }\n\n // Fallback for HTTP or when Clipboard API is unavailable\n if (!success) {\n try {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.opacity = '0';\n document.body.appendChild(textarea);\n textarea.select();\n success = document.execCommand('copy');\n document.body.removeChild(textarea);\n } catch {\n }\n }\n\n if (success && button) {\n const originalHtml = button.innerHTML;\n button.innerHTML = '✓';\n button.classList.add('copied');\n setTimeout(() => {\n button.innerHTML = originalHtml;\n button.classList.remove('copied');\n }, 1500);\n }\n }\n\n /**\n * Render the copy-link button HTML for a message.\n */\n function renderCopyLinkButton(entryId) {\n return `<button class=\"copy-link-btn\" data-entry-id=\"${entryId}\" title=\"Copy link to this message\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/>\n </svg>\n </button>`;\n }\n\n function renderEntry(entry) {\n const ts = formatTimestamp(entry.timestamp);\n const tsHtml = ts ? `<div class=\"message-timestamp\">${ts}</div>` : '';\n const entryId = `entry-${entry.id}`;\n const copyBtnHtml = renderCopyLinkButton(entry.id);\n\n if (entry.type === 'message') {\n const msg = entry.message;\n\n if (msg.role === 'user') {\n let html = `<div class=\"user-message\" id=\"${entryId}\">${copyBtnHtml}${tsHtml}`;\n const content = msg.content;\n\n if (Array.isArray(content)) {\n const images = content.filter(c => c.type === 'image');\n if (images.length > 0) {\n html += '<div class=\"message-images\">';\n for (const img of images) {\n html += `<img src=\"data:${img.mimeType};base64,${img.data}\" class=\"message-image\" />`;\n }\n html += '</div>';\n }\n }\n\n const text = typeof content === 'string' ? content : \n content.filter(c => c.type === 'text').map(c => c.text).join('\\n');\n if (text.trim()) {\n html += `<div class=\"markdown-content\">${safeMarkedParse(text)}</div>`;\n }\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'assistant') {\n let html = `<div class=\"assistant-message\" id=\"${entryId}\">${copyBtnHtml}${tsHtml}`;\n\n for (const block of msg.content) {\n if (block.type === 'text' && block.text.trim()) {\n html += `<div class=\"assistant-text markdown-content\">${safeMarkedParse(block.text)}</div>`;\n } else if (block.type === 'thinking' && block.thinking.trim()) {\n html += `<div class=\"thinking-block\">\n <div class=\"thinking-text\">${escapeHtml(block.thinking)}</div>\n <div class=\"thinking-collapsed\">Thinking ...</div>\n </div>`;\n }\n }\n\n for (const block of msg.content) {\n if (block.type === 'toolCall') {\n html += renderToolCall(block);\n }\n }\n\n if (msg.stopReason === 'aborted') {\n html += '<div class=\"error-text\">Aborted</div>';\n } else if (msg.stopReason === 'error') {\n html += `<div class=\"error-text\">Error: ${escapeHtml(msg.errorMessage || 'Unknown error')}</div>`;\n }\n\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'bashExecution') {\n const isError = msg.cancelled || (msg.exitCode !== 0 && msg.exitCode !== null);\n let html = `<div class=\"tool-execution ${isError ? 'error' : 'success'}\" id=\"${entryId}\">${tsHtml}`;\n html += `<div class=\"tool-command\">$ ${escapeHtml(msg.command)}</div>`;\n if (msg.output) html += formatExpandableOutput(msg.output, 10);\n if (msg.cancelled) {\n html += '<div style=\"color: var(--warning)\">(cancelled)</div>';\n } else if (msg.exitCode !== 0 && msg.exitCode !== null) {\n html += `<div style=\"color: var(--error)\">(exit ${msg.exitCode})</div>`;\n }\n html += '</div>';\n return html;\n }\n\n if (msg.role === 'toolResult') return '';\n }\n\n if (entry.type === 'model_change') {\n let html = `<div class=\"model-change\" id=\"${entryId}\">${tsHtml}Switched to model: <span class=\"model-name\">${escapeHtml(entry.provider)}/${escapeHtml(entry.modelId)}</span>`;\n\n if (entry.provider === 'openai-codex' && codexInjectionInfo) {\n const fullContent = `# Codex Instructions\\n${codexInjectionInfo.instructions}\\n\\n# Codex-Pi Bridge\\n${codexInjectionInfo.bridge}`;\n html += ` <span class=\"codex-bridge-toggle\" onclick=\"event.stopPropagation(); this.parentElement.classList.toggle('show-bridge')\">[bridge prompt]</span>`;\n html += `<div class=\"codex-bridge-content\"><pre>${escapeHtml(fullContent)}</pre></div>`;\n }\n\n html += '</div>';\n return html;\n }\n\n if (entry.type === 'compaction') {\n return `<div class=\"compaction\" id=\"${entryId}\" onclick=\"this.classList.toggle('expanded')\">\n <div class=\"compaction-label\">[compaction]</div>\n <div class=\"compaction-collapsed\">Compacted from ${entry.tokensBefore.toLocaleString()} tokens</div>\n <div class=\"compaction-content\"><strong>Compacted from ${entry.tokensBefore.toLocaleString()} tokens</strong>\\n\\n${escapeHtml(entry.summary)}</div>\n </div>`;\n }\n\n if (entry.type === 'branch_summary') {\n return `<div class=\"branch-summary\" id=\"${entryId}\">${tsHtml}\n <div class=\"branch-summary-header\">Branch Summary</div>\n <div class=\"markdown-content\">${safeMarkedParse(entry.summary)}</div>\n </div>`;\n }\n\n if (entry.type === 'custom_message' && entry.display) {\n return `<div class=\"hook-message\" id=\"${entryId}\">${tsHtml}\n <div class=\"hook-type\">[${escapeHtml(entry.customType)}]</div>\n <div class=\"markdown-content\">${safeMarkedParse(typeof entry.content === 'string' ? entry.content : JSON.stringify(entry.content))}</div>\n </div>`;\n }\n\n return '';\n }\n\n // ============================================================\n // HEADER / STATS\n // ============================================================\n\n function computeStats(entryList) {\n let userMessages = 0, assistantMessages = 0, toolResults = 0;\n let customMessages = 0, compactions = 0, branchSummaries = 0, toolCalls = 0;\n const tokens = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };\n const cost = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };\n const models = new Set();\n\n for (const entry of entryList) {\n if (entry.type === 'message') {\n const msg = entry.message;\n if (msg.role === 'user') userMessages++;\n if (msg.role === 'assistant') {\n assistantMessages++;\n if (msg.model) models.add(msg.provider ? `${msg.provider}/${msg.model}` : msg.model);\n if (msg.usage) {\n tokens.input += msg.usage.input || 0;\n tokens.output += msg.usage.output || 0;\n tokens.cacheRead += msg.usage.cacheRead || 0;\n tokens.cacheWrite += msg.usage.cacheWrite || 0;\n if (msg.usage.cost) {\n cost.input += msg.usage.cost.input || 0;\n cost.output += msg.usage.cost.output || 0;\n cost.cacheRead += msg.usage.cost.cacheRead || 0;\n cost.cacheWrite += msg.usage.cost.cacheWrite || 0;\n }\n }\n toolCalls += msg.content.filter(c => c.type === 'toolCall').length;\n }\n if (msg.role === 'toolResult') toolResults++;\n } else if (entry.type === 'compaction') {\n compactions++;\n } else if (entry.type === 'branch_summary') {\n branchSummaries++;\n } else if (entry.type === 'custom_message') {\n customMessages++;\n }\n }\n\n return { userMessages, assistantMessages, toolResults, customMessages, compactions, branchSummaries, toolCalls, tokens, cost, models: Array.from(models) };\n }\n\n const globalStats = computeStats(entries);\n\n function renderHeader() {\n const totalCost = globalStats.cost.input + globalStats.cost.output + globalStats.cost.cacheRead + globalStats.cost.cacheWrite;\n\n const tokenParts = [];\n if (globalStats.tokens.input) tokenParts.push(`↑${formatTokens(globalStats.tokens.input)}`);\n if (globalStats.tokens.output) tokenParts.push(`↓${formatTokens(globalStats.tokens.output)}`);\n if (globalStats.tokens.cacheRead) tokenParts.push(`R${formatTokens(globalStats.tokens.cacheRead)}`);\n if (globalStats.tokens.cacheWrite) tokenParts.push(`W${formatTokens(globalStats.tokens.cacheWrite)}`);\n\n const msgParts = [];\n if (globalStats.userMessages) msgParts.push(`${globalStats.userMessages} user`);\n if (globalStats.assistantMessages) msgParts.push(`${globalStats.assistantMessages} assistant`);\n if (globalStats.toolResults) msgParts.push(`${globalStats.toolResults} tool results`);\n if (globalStats.customMessages) msgParts.push(`${globalStats.customMessages} custom`);\n if (globalStats.compactions) msgParts.push(`${globalStats.compactions} compactions`);\n if (globalStats.branchSummaries) msgParts.push(`${globalStats.branchSummaries} branch summaries`);\n\n let html = `\n <div class=\"header\">\n <h1>Session: ${escapeHtml(header?.id || 'unknown')}</h1>\n <div class=\"help-bar\">Ctrl+T toggle thinking · Ctrl+O toggle tools</div>\n <div class=\"header-info\">\n <div class=\"info-item\"><span class=\"info-label\">Date:</span><span class=\"info-value\">${header?.timestamp ? new Date(header.timestamp).toLocaleString() : 'unknown'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Models:</span><span class=\"info-value\">${globalStats.models.join(', ') || 'unknown'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Messages:</span><span class=\"info-value\">${msgParts.join(', ') || '0'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Tool Calls:</span><span class=\"info-value\">${globalStats.toolCalls}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Tokens:</span><span class=\"info-value\">${tokenParts.join(' ') || '0'}</span></div>\n <div class=\"info-item\"><span class=\"info-label\">Cost:</span><span class=\"info-value\">${totalCost.toFixed(3)}</span></div>\n </div>\n </div>`;\n\n if (systemPrompt) {\n html += `<div class=\"system-prompt\">\n <div class=\"system-prompt-header\">System Prompt</div>\n <div class=\"system-prompt-content\">${escapeHtml(systemPrompt)}</div>\n </div>`;\n }\n\n if (tools && tools.length > 0) {\n html += `<div class=\"tools-list\">\n <div class=\"tools-header\">Available Tools</div>\n <div class=\"tools-content\">\n ${tools.map(t => `<div class=\"tool-item\"><span class=\"tool-item-name\">${escapeHtml(t.name)}</span> - <span class=\"tool-item-desc\">${escapeHtml(t.description)}</span></div>`).join('')}\n </div>\n </div>`;\n }\n\n return html;\n }\n\n // ============================================================\n // NAVIGATION\n // ============================================================\n\n // Cache for rendered entry DOM nodes\n const entryCache = new Map();\n\n function renderEntryToNode(entry) {\n // Check cache first\n if (entryCache.has(entry.id)) {\n return entryCache.get(entry.id).cloneNode(true);\n }\n\n // Render to HTML string, then parse to node\n const html = renderEntry(entry);\n if (!html) return null;\n\n const template = document.createElement('template');\n template.innerHTML = html;\n const node = template.content.firstElementChild;\n\n // Cache the node\n if (node) {\n entryCache.set(entry.id, node.cloneNode(true));\n }\n return node;\n }\n\n function navigateTo(targetId, scrollMode = 'target', scrollToEntryId = null) {\n currentLeafId = targetId;\n currentTargetId = scrollToEntryId || targetId;\n const path = getPath(targetId);\n\n renderTree();\n\n document.getElementById('header-container').innerHTML = renderHeader();\n\n // Build messages using cached DOM nodes\n const messagesEl = document.getElementById('messages');\n const fragment = document.createDocumentFragment();\n\n for (const entry of path) {\n const node = renderEntryToNode(entry);\n if (node) {\n fragment.appendChild(node);\n }\n }\n\n messagesEl.innerHTML = '';\n messagesEl.appendChild(fragment);\n\n // Attach click handlers for copy-link buttons\n messagesEl.querySelectorAll('.copy-link-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n const entryId = btn.dataset.entryId;\n const shareUrl = buildShareUrl(entryId);\n copyToClipboard(shareUrl, btn);\n });\n });\n\n // Use setTimeout(0) to ensure DOM is fully laid out before scrolling\n setTimeout(() => {\n const content = document.getElementById('content');\n if (scrollMode === 'bottom') {\n content.scrollTop = content.scrollHeight;\n } else if (scrollMode === 'target') {\n const scrollTargetId = scrollToEntryId || targetId;\n const targetEl = document.getElementById(`entry-${scrollTargetId}`);\n if (targetEl) {\n targetEl.scrollIntoView({ block: 'center' });\n if (scrollToEntryId) {\n targetEl.classList.add('highlight');\n setTimeout(() => targetEl.classList.remove('highlight'), 2000);\n }\n }\n }\n }, 0);\n }\n\n // ============================================================\n // INITIALIZATION\n // ============================================================\n\n // Escape HTML tags in text (but not code blocks)\n function escapeHtmlTags(text) {\n return text.replace(/<(?=[a-zA-Z\\/])/g, '&lt;');\n }\n\n // Configure marked with syntax highlighting and HTML escaping for text\n marked.use({\n breaks: true,\n gfm: true,\n renderer: {\n // Code blocks: syntax highlight, no HTML escaping\n code(token) {\n const code = token.text;\n const lang = token.lang;\n let highlighted;\n if (lang && hljs.getLanguage(lang)) {\n try {\n highlighted = hljs.highlight(code, { language: lang }).value;\n } catch {\n highlighted = escapeHtml(code);\n }\n } else {\n // Auto-detect language if not specified\n try {\n highlighted = hljs.highlightAuto(code).value;\n } catch {\n highlighted = escapeHtml(code);\n }\n }\n return `<pre><code class=\"hljs\">${highlighted}</code></pre>`;\n },\n // Text content: escape HTML tags\n text(token) {\n return escapeHtmlTags(escapeHtml(token.text));\n },\n // Inline code: escape HTML\n codespan(token) {\n return `<code>${escapeHtml(token.text)}</code>`;\n }\n }\n });\n\n // Simple marked parse (escaping handled in renderers)\n function safeMarkedParse(text) {\n return marked.parse(text);\n }\n\n // Search input\n const searchInput = document.getElementById('tree-search');\n searchInput.addEventListener('input', (e) => {\n searchQuery = e.target.value;\n forceTreeRerender();\n });\n\n // Filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n filterMode = btn.dataset.filter;\n forceTreeRerender();\n });\n });\n\n // Sidebar toggle\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('sidebar-overlay');\n const hamburger = document.getElementById('hamburger');\n\n hamburger.addEventListener('click', () => {\n sidebar.classList.add('open');\n overlay.classList.add('open');\n hamburger.style.display = 'none';\n });\n\n const closeSidebar = () => {\n sidebar.classList.remove('open');\n overlay.classList.remove('open');\n hamburger.style.display = '';\n };\n\n overlay.addEventListener('click', closeSidebar);\n document.getElementById('sidebar-close').addEventListener('click', closeSidebar);\n\n // Toggle states\n let thinkingExpanded = true;\n let toolOutputsExpanded = false;\n\n const toggleThinking = () => {\n thinkingExpanded = !thinkingExpanded;\n document.querySelectorAll('.thinking-text').forEach(el => {\n el.style.display = thinkingExpanded ? '' : 'none';\n });\n document.querySelectorAll('.thinking-collapsed').forEach(el => {\n el.style.display = thinkingExpanded ? 'none' : 'block';\n });\n };\n\n const toggleToolOutputs = () => {\n toolOutputsExpanded = !toolOutputsExpanded;\n document.querySelectorAll('.tool-output.expandable').forEach(el => {\n el.classList.toggle('expanded', toolOutputsExpanded);\n });\n document.querySelectorAll('.compaction').forEach(el => {\n el.classList.toggle('expanded', toolOutputsExpanded);\n });\n };\n\n // Keyboard shortcuts\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n searchInput.value = '';\n searchQuery = '';\n navigateTo(leafId, 'bottom');\n }\n if (e.ctrlKey && e.key === 't') {\n e.preventDefault();\n toggleThinking();\n }\n if (e.ctrlKey && e.key === 'o') {\n e.preventDefault();\n toggleToolOutputs();\n }\n });\n\n // Initial render\n // If URL has targetId, scroll to that specific message; otherwise stay at top\n if (leafId) {\n if (urlTargetId && byId.has(urlTargetId)) {\n navigateTo(leafId, 'target', urlTargetId);\n } else {\n navigateTo(leafId, 'none');\n }\n } else if (entries.length > 0) {\n // Fallback: use last entry if no leafId\n navigateTo(entries[entries.length - 1].id, 'none');\n }\n })();\n</script>\n</body>\n</html>\n";
package/src/export/html/template.js CHANGED
@@ -338,7 +338,7 @@
338
338
  }
339
339
 
340
340
  // Apply filter mode
341
- const isSettingsEntry = ['label', 'custom', 'model_change', 'thinking_level_change'].includes(entry.type);
341
+ const isSettingsEntry = ['label', 'custom', 'model_change', 'thinking_level_change', 'mode_change'].includes(entry.type);
342
342
  let passesFilter = true;
343
343
 
344
344
  switch (filterMode) {
@@ -376,6 +376,7 @@
376
376
  // ============================================================
377
377
 
378
378
  function shortenPath(p) {
379
+ if (typeof p !== 'string') return '';
379
380
  if (p.startsWith('/Users/')) {
380
381
  const parts = p.split('/');
381
382
  if (parts.length > 2) return '~' + p.slice(('/Users/' + parts[2]).length);
@@ -603,6 +604,13 @@
603
604
  return text.replace(/\t/g, ' ');
604
605
  }
605
606
 
607
+ /** Safely coerce value to string for display. Returns null if invalid type. */
608
+ function str(value) {
609
+ if (typeof value === 'string') return value;
610
+ if (value == null) return '';
611
+ return null;
612
+ }
613
+
606
614
  function getLanguageFromPath(filePath) {
607
615
  const ext = filePath.split('.').pop()?.toLowerCase();
608
616
  const extToLang = {
@@ -712,10 +720,13 @@
712
720
  const args = call.arguments || {};
713
721
  const name = call.name;
714
722
 
723
+ const invalidArg = '<span class="tool-error">[invalid arg]</span>';
724
+
715
725
  switch (name) {
716
726
  case 'bash': {
717
- const command = args.command || '';
718
- html += `<div class="tool-command">$ ${escapeHtml(command)}</div>`;
727
+ const command = str(args.command);
728
+ const cmdDisplay = command === null ? invalidArg : escapeHtml(command || '...');
729
+ html += `<div class="tool-command">$ ${cmdDisplay}</div>`;
719
730
  if (result) {
720
731
  const output = getResultText().trim();
721
732
  if (output) html += formatExpandableOutput(output, 5);
@@ -723,13 +734,12 @@
723
734
  break;
724
735
  }
725
736
  case 'read': {
726
- const filePath = args.file_path || args.path || '';
737
+ const filePath = str(args.file_path ?? args.path);
727
738
  const offset = args.offset;
728
739
  const limit = args.limit;
729
- const lang = getLanguageFromPath(filePath);
730
740
 
731
- let pathHtml = escapeHtml(shortenPath(filePath));
732
- if (offset !== undefined || limit !== undefined) {
741
+ let pathHtml = filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''));
742
+ if (filePath !== null && (offset !== undefined || limit !== undefined)) {
733
743
  const startLine = offset ?? 1;
734
744
  const endLine = limit !== undefined ? startLine + limit - 1 : '';
735
745
  pathHtml += `<span class="line-numbers">:${startLine}${endLine ? '-' + endLine : ''}</span>`;
@@ -739,21 +749,28 @@
739
749
  if (result) {
740
750
  html += renderResultImages();
741
751
  const output = getResultText();
752
+ const lang = filePath ? getLanguageFromPath(filePath) : null;
742
753
  if (output) html += formatExpandableOutput(output, 10, lang);
743
754
  }
744
755
  break;
745
756
  }
746
757
  case 'write': {
747
- const filePath = args.file_path || args.path || '';
748
- const content = args.content || '';
749
- const lines = content.split('\n');
750
- const lang = getLanguageFromPath(filePath);
758
+ const filePath = str(args.file_path ?? args.path);
759
+ const content = str(args.content);
751
760
 
752
- html += `<div class="tool-header"><span class="tool-name">write</span> <span class="tool-path">${escapeHtml(shortenPath(filePath))}</span>`;
753
- if (lines.length > 10) html += ` <span class="line-count">(${lines.length} lines)</span>`;
761
+ html += `<div class="tool-header"><span class="tool-name">write</span> <span class="tool-path">${filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''))}</span>`;
762
+ if (content !== null && content) {
763
+ const lines = content.split('\n');
764
+ if (lines.length > 10) html += ` <span class="line-count">(${lines.length} lines)</span>`;
765
+ }
754
766
  html += '</div>';
755
767
 
756
- if (content) html += formatExpandableOutput(content, 10, lang);
768
+ if (content === null) {
769
+ html += `<div class="tool-error">[invalid content arg - expected string]</div>`;
770
+ } else if (content) {
771
+ const lang = filePath ? getLanguageFromPath(filePath) : null;
772
+ html += formatExpandableOutput(content, 10, lang);
773
+ }
757
774
  if (result) {
758
775
  const output = getResultText().trim();
759
776
  if (output) html += `<div class="tool-output"><div>${escapeHtml(output)}</div></div>`;
@@ -761,8 +778,8 @@
761
778
  break;
762
779
  }
763
780
  case 'edit': {
764
- const filePath = args.file_path || args.path || '';
765
- html += `<div class="tool-header"><span class="tool-name">edit</span> <span class="tool-path">${escapeHtml(shortenPath(filePath))}</span></div>`;
781
+ const filePath = str(args.file_path ?? args.path);
782
+ html += `<div class="tool-header"><span class="tool-name">edit</span> <span class="tool-path">${filePath === null ? invalidArg : escapeHtml(shortenPath(filePath || ''))}</span></div>`;
766
783
 
767
784
  if (result?.details?.diff) {
768
785
  const diffLines = result.details.diff.split('\n');
package/src/extensibility/custom-commands/bundled/review/index.ts CHANGED
@@ -361,7 +361,7 @@ export class ReviewCommand implements CustomCommand {
361
361
  const stats = parseDiff(diffResult.stdout);
362
362
  // Even if all files filtered, include the custom instructions
363
363
  return `${buildReviewPrompt(
364
- `Custom review: ${instructions.split("\n")[0].slice(0, 60)}...`,
364
+ `Custom review: ${instructions.split("\n")[0].slice(0, 60)}…`,
365
365
  stats,
366
366
  diffResult.stdout,
367
367
  )}\n\n### Additional Instructions\n\n${instructions}`;
package/src/extensibility/extensions/index.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  * Extension system for lifecycle events and custom tools.
3
3
  */
4
4
 
5
+ export type { SlashCommandInfo, SlashCommandLocation, SlashCommandSource } from "../slash-commands";
5
6
  export { discoverAndLoadExtensions, ExtensionRuntime, loadExtensionFromFactory, loadExtensions } from "./loader";
6
7
  export type {
7
8
  BranchHandler,
@@ -9,6 +10,7 @@ export type {
9
10
  NavigateTreeHandler,
10
11
  NewSessionHandler,
11
12
  ShutdownHandler,
13
+ SwitchSessionHandler,
12
14
  } from "./runner";
13
15
  export { ExtensionRunner } from "./runner";
14
16
  export type {
@@ -19,6 +21,8 @@ export type {
19
21
  AgentToolUpdateCallback,
20
22
  AppAction,
21
23
  AppendEntryHandler,
24
+ // Events - Tool (ToolCallEvent types)
25
+ BashToolCallEvent,
22
26
  BashToolResultEvent,
23
27
  BeforeAgentStartEvent,
24
28
  BeforeAgentStartEventResult,
@@ -26,7 +30,10 @@ export type {
26
30
  ContextEvent,
27
31
  // Event Results
28
32
  ContextEventResult,
33
+ ContextUsage,
34
+ CustomToolCallEvent,
29
35
  CustomToolResultEvent,
36
+ EditToolCallEvent,
30
37
  EditToolResultEvent,
31
38
  ExecOptions,
32
39
  ExecResult,
@@ -47,11 +54,15 @@ export type {
47
54
  ExtensionShortcut,
48
55
  ExtensionUIContext,
49
56
  ExtensionUIDialogOptions,
57
+ FindToolCallEvent,
50
58
  FindToolResultEvent,
51
59
  GetActiveToolsHandler,
52
60
  GetAllToolsHandler,
61
+ GetCommandsHandler,
53
62
  GetThinkingLevelHandler,
63
+ GrepToolCallEvent,
54
64
  GrepToolResultEvent,
65
+ // Events - Input
55
66
  InputEvent,
56
67
  InputEventResult,
57
68
  KeybindingsManager,
@@ -59,10 +70,14 @@ export type {
59
70
  // Message Rendering
60
71
  MessageRenderer,
61
72
  MessageRenderOptions,
73
+ ReadToolCallEvent,
62
74
  ReadToolResultEvent,
63
75
  // Commands
64
76
  RegisteredCommand,
65
77
  RegisteredTool,
78
+ // Events - Resources
79
+ ResourcesDiscoverEvent,
80
+ ResourcesDiscoverResult,
66
81
  SendMessageHandler,
67
82
  SendUserMessageHandler,
68
83
  SessionBeforeBranchEvent,
@@ -101,6 +116,9 @@ export type {
101
116
  UserBashEventResult,
102
117
  UserPythonEvent,
103
118
  UserPythonEventResult,
119
+ WriteToolCallEvent,
104
120
  WriteToolResultEvent,
105
121
  } from "./types";
122
+ // Type guards
123
+ export { isToolCallEventType } from "./types";
106
124
  export { ExtensionToolWrapper, RegisteredToolAdapter, wrapRegisteredTool, wrapRegisteredTools } from "./wrapper";
package/src/extensibility/extensions/loader.ts CHANGED
@@ -81,6 +81,10 @@ export class ExtensionRuntime implements IExtensionRuntime {
81
81
  throw new ExtensionRuntimeNotInitializedError();
82
82
  }
83
83
 
84
+ getCommands(): never {
85
+ throw new ExtensionRuntimeNotInitializedError();
86
+ }
87
+
84
88
  setModel(): Promise<boolean> {
85
89
  throw new ExtensionRuntimeNotInitializedError();
86
90
  }
@@ -203,6 +207,10 @@ class ConcreteExtensionAPI implements ExtensionAPI, IExtensionRuntime {
203
207
  return this.runtime.setActiveTools(toolNames);
204
208
  }
205
209
 
210
+ getCommands() {
211
+ return this.runtime.getCommands();
212
+ }
213
+
206
214
  setModel(model: Model): Promise<boolean> {
207
215
  return this.runtime.setModel(model);
208
216
  }
@@ -396,6 +404,13 @@ async function resolveExtensionEntries(dir: string): Promise<string[] | null> {
396
404
  async function discoverExtensionsInDir(dir: string): Promise<string[]> {
397
405
  const discovered: string[] = [];
398
406
 
407
+ // First check if this directory itself has explicit extension entries (package.json or index)
408
+ const rootEntries = await resolveExtensionEntries(dir);
409
+ if (rootEntries) {
410
+ return rootEntries;
411
+ }
412
+
413
+ // Otherwise, discover extensions from directory contents
399
414
  let entries: fs1.Dirent[];
400
415
  try {
401
416
  entries = await fs.readdir(dir, { withFileTypes: true });