Created
January 1, 2026 11:26
-
-
Save badlogic/b119c0dd2d5926ba54866b71dc68d1a4 to your computer and use it in GitHub Desktop.
pi session export - export-html rewrite conversation
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Session 7609c215-fea3-4e26-af1e-44a78b432602 - pi</title> | |
| <style> | |
| :root { | |
| --accent: #8abeb7; | |
| --border: #5f87ff; | |
| --borderAccent: #00d7ff; | |
| --borderMuted: #505050; | |
| --success: #b5bd68; | |
| --error: #cc6666; | |
| --warning: #ffff00; | |
| --muted: #808080; | |
| --dim: #666666; | |
| --text: #e5e5e7; | |
| --thinkingText: #808080; | |
| --selectedBg: #3a3a4a; | |
| --userMessageBg: #343541; | |
| --userMessageText: #e5e5e7; | |
| --customMessageBg: #2d2838; | |
| --customMessageText: #e5e5e7; | |
| --customMessageLabel: #9575cd; | |
| --toolPendingBg: #282832; | |
| --toolSuccessBg: #283228; | |
| --toolErrorBg: #3c2828; | |
| --toolTitle: #e5e5e7; | |
| --toolOutput: #808080; | |
| --mdHeading: #f0c674; | |
| --mdLink: #81a2be; | |
| --mdLinkUrl: #666666; | |
| --mdCode: #8abeb7; | |
| --mdCodeBlock: #b5bd68; | |
| --mdCodeBlockBorder: #808080; | |
| --mdQuote: #808080; | |
| --mdQuoteBorder: #808080; | |
| --mdHr: #808080; | |
| --mdListBullet: #8abeb7; | |
| --toolDiffAdded: #b5bd68; | |
| --toolDiffRemoved: #cc6666; | |
| --toolDiffContext: #808080; | |
| --syntaxComment: #6A9955; | |
| --syntaxKeyword: #569CD6; | |
| --syntaxFunction: #DCDCAA; | |
| --syntaxVariable: #9CDCFE; | |
| --syntaxString: #CE9178; | |
| --syntaxNumber: #B5CEA8; | |
| --syntaxType: #4EC9B0; | |
| --syntaxOperator: #D4D4D4; | |
| --syntaxPunctuation: #D4D4D4; | |
| --thinkingOff: #505050; | |
| --thinkingMinimal: #6e6e6e; | |
| --thinkingLow: #5f87af; | |
| --thinkingMedium: #81a2be; | |
| --thinkingHigh: #b294bb; | |
| --thinkingXhigh: #d183e8; | |
| --bashMode: #b5bd68; | |
| --exportPageBg: rgb(36, 37, 46); | |
| --exportCardBg: rgb(44, 45, 55); | |
| --exportInfoBg: rgb(72, 68, 65); | |
| --body-bg: rgb(36, 37, 46); | |
| --container-bg: rgb(44, 45, 55); | |
| --info-bg: rgb(72, 68, 65); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| background: var(--body-bg); | |
| } | |
| #app { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar */ | |
| #sidebar { | |
| width: 400px; | |
| background: var(--container-bg); | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| border-right: 1px solid var(--dim); | |
| } | |
| .sidebar-header { | |
| padding: 8px 12px; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-controls { | |
| display: flex; | |
| gap: 6px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .sidebar-search { | |
| flex: 1; | |
| min-width: 120px; | |
| 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-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); | |
| } | |
| .tree-container { | |
| flex: 1; | |
| overflow: auto; | |
| padding: 4px 0; | |
| } | |
| .tree-node { | |
| padding: 2px 8px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: baseline; | |
| font-size: 11px; | |
| white-space: nowrap; | |
| } | |
| .tree-node:hover { | |
| background: var(--selectedBg); | |
| } | |
| .tree-node.active { | |
| background: var(--selectedBg); | |
| border-left: 2px solid var(--accent); | |
| padding-left: 6px; | |
| } | |
| .tree-node.active .tree-content { | |
| font-weight: bold; | |
| } | |
| .tree-node.in-path { | |
| border-left: 2px solid var(--dim); | |
| padding-left: 6px; | |
| } | |
| .tree-prefix { | |
| color: var(--dim); | |
| flex-shrink: 0; | |
| font-family: inherit; | |
| } | |
| .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-status { | |
| padding: 4px 12px; | |
| font-size: 10px; | |
| color: var(--muted); | |
| flex-shrink: 0; | |
| } | |
| /* Main content */ | |
| #content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 48px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #content > * { | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| /* Header */ | |
| .header { | |
| background: var(--container-bg); | |
| border-radius: 4px; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .header h1 { | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: var(--borderAccent); | |
| margin-bottom: 12px; | |
| } | |
| .header-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| font-size: 11px; | |
| } | |
| .info-item { | |
| color: var(--dim); | |
| display: flex; | |
| align-items: baseline; | |
| } | |
| .info-label { | |
| font-weight: 600; | |
| margin-right: 8px; | |
| min-width: 100px; | |
| } | |
| .info-value { | |
| color: var(--text); | |
| flex: 1; | |
| } | |
| /* Messages */ | |
| #messages { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .message-timestamp { | |
| font-size: 10px; | |
| color: var(--dim); | |
| margin-bottom: 4px; | |
| opacity: 0.8; | |
| } | |
| .user-message { | |
| background: var(--userMessageBg); | |
| color: var(--userMessageText); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| } | |
| .assistant-message { | |
| padding: 0; | |
| } | |
| .assistant-text { | |
| padding: 12px 16px; | |
| } | |
| .thinking-text { | |
| padding: 12px 16px; | |
| color: var(--thinkingText); | |
| font-style: italic; | |
| white-space: pre-wrap; | |
| } | |
| /* Tool execution */ | |
| .tool-execution { | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| margin-top: 8px; | |
| } | |
| .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(--borderAccent); | |
| 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: 12px; | |
| color: var(--toolOutput); | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| word-break: break-word; | |
| font-family: inherit; | |
| overflow-x: auto; | |
| } | |
| .tool-output > div { | |
| line-height: 1.4; | |
| } | |
| .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; | |
| } | |
| .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; | |
| } | |
| .expand-hint { | |
| color: var(--borderAccent); | |
| font-style: italic; | |
| margin-top: 4px; | |
| } | |
| /* Diff */ | |
| .tool-diff { | |
| margin-top: 12px; | |
| font-size: 11px; | |
| overflow-x: auto; | |
| } | |
| .diff-added { color: var(--toolDiffAdded); } | |
| .diff-removed { color: var(--toolDiffRemoved); } | |
| .diff-context { color: var(--toolDiffContext); } | |
| /* Model change */ | |
| .model-change { | |
| padding: 8px 16px; | |
| background: var(--info-bg); | |
| border-radius: 4px; | |
| color: var(--dim); | |
| font-size: 11px; | |
| } | |
| .model-name { | |
| color: var(--borderAccent); | |
| font-weight: bold; | |
| } | |
| /* Compaction */ | |
| .compaction { | |
| background: var(--info-bg); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .compaction-header { | |
| padding: 12px 16px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .compaction-header:hover { | |
| background: var(--selectedBg); | |
| } | |
| .compaction-toggle { | |
| color: var(--borderAccent); | |
| font-size: 10px; | |
| transition: transform 0.2s; | |
| } | |
| .compaction.expanded .compaction-toggle { | |
| transform: rotate(90deg); | |
| } | |
| .compaction-title { | |
| color: var(--text); | |
| font-weight: bold; | |
| } | |
| .compaction-content { | |
| display: none; | |
| padding: 0 16px 16px; | |
| } | |
| .compaction.expanded .compaction-content { | |
| display: block; | |
| } | |
| .compaction-summary { | |
| background: var(--selectedBg); | |
| border-radius: 4px; | |
| padding: 12px; | |
| white-space: pre-wrap; | |
| } | |
| /* System prompt */ | |
| .system-prompt { | |
| background: var(--info-bg); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| margin-bottom: 16px; | |
| } | |
| .system-prompt-header { | |
| font-weight: bold; | |
| color: var(--warning); | |
| margin-bottom: 8px; | |
| } | |
| .system-prompt-content { | |
| color: var(--dim); | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| font-size: 11px; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| /* Tools list */ | |
| .tools-list { | |
| background: var(--customMessageBg); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| margin-bottom: 16px; | |
| } | |
| .tools-header { | |
| font-weight: bold; | |
| color: var(--warning); | |
| margin-bottom: 8px; | |
| } | |
| .tool-item { | |
| margin: 4px 0; | |
| font-size: 11px; | |
| } | |
| .tool-item-name { | |
| font-weight: bold; | |
| color: var(--text); | |
| } | |
| .tool-item-desc { | |
| color: var(--dim); | |
| } | |
| /* Hook/custom messages */ | |
| .hook-message { | |
| background: var(--customMessageBg); | |
| color: var(--customMessageText); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| } | |
| .hook-type { | |
| color: var(--customMessageLabel); | |
| font-weight: bold; | |
| margin-bottom: 4px; | |
| } | |
| /* Branch summary */ | |
| .branch-summary { | |
| background: var(--customMessageBg); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| } | |
| .branch-summary-header { | |
| font-weight: bold; | |
| color: var(--borderAccent); | |
| margin-bottom: 8px; | |
| } | |
| /* Error */ | |
| .error-text { | |
| color: var(--error); | |
| padding: 12px 16px; | |
| } | |
| /* Images */ | |
| .message-images { | |
| margin-bottom: 12px; | |
| } | |
| .message-image { | |
| max-width: 100%; | |
| max-height: 400px; | |
| border-radius: 4px; | |
| margin: 4px 0; | |
| } | |
| /* Markdown content */ | |
| .markdown-content h1, | |
| .markdown-content h2, | |
| .markdown-content h3, | |
| .markdown-content h4, | |
| .markdown-content h5, | |
| .markdown-content h6 { | |
| color: var(--mdHeading); | |
| margin: 1em 0 0.5em 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.5em 0; } | |
| .markdown-content a { | |
| color: var(--mdLink); | |
| text-decoration: underline; | |
| } | |
| .markdown-content code { | |
| background: rgba(128, 128, 128, 0.2); | |
| color: var(--mdCode); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| font-family: inherit; | |
| } | |
| .markdown-content pre { | |
| background: transparent; | |
| margin: 0.5em 0; | |
| overflow-x: auto; | |
| } | |
| .markdown-content pre code { | |
| display: block; | |
| background: none; | |
| color: var(--mdCodeBlock); | |
| padding: 8px 12px; | |
| } | |
| .markdown-content blockquote { | |
| border-left: 3px solid var(--mdQuoteBorder); | |
| padding-left: 12px; | |
| margin: 0.5em 0; | |
| color: var(--mdQuote); | |
| font-style: italic; | |
| } | |
| .markdown-content ul, | |
| .markdown-content ol { | |
| margin: 0.5em 0; | |
| padding-left: 24px; | |
| } | |
| .markdown-content li { margin: 0.25em 0; } | |
| .markdown-content li::marker { color: var(--mdListBullet); } | |
| .markdown-content hr { | |
| border: none; | |
| border-top: 1px solid var(--mdHr); | |
| margin: 1em 0; | |
| } | |
| .markdown-content table { | |
| border-collapse: collapse; | |
| margin: 0.5em 0; | |
| width: 100%; | |
| } | |
| .markdown-content th, | |
| .markdown-content td { | |
| border: 1px solid var(--mdCodeBlockBorder); | |
| padding: 6px 10px; | |
| text-align: left; | |
| } | |
| .markdown-content th { | |
| background: rgba(128, 128, 128, 0.1); | |
| font-weight: bold; | |
| } | |
| .markdown-content img { | |
| max-width: 100%; | |
| border-radius: 4px; | |
| } | |
| /* Syntax highlighting */ | |
| .hljs { background: transparent; } | |
| .hljs-comment, .hljs-quote { color: var(--syntaxComment); } | |
| .hljs-keyword, .hljs-selector-tag { color: var(--syntaxKeyword); } | |
| .hljs-number, .hljs-literal { color: var(--syntaxNumber); } | |
| .hljs-string, .hljs-doctag { color: var(--syntaxString); } | |
| .hljs-title, .hljs-section, .hljs-name { color: var(--syntaxFunction); } | |
| .hljs-type, .hljs-class, .hljs-built_in { color: var(--syntaxType); } | |
| .hljs-attr, .hljs-variable, .hljs-params { color: var(--syntaxVariable); } | |
| .hljs-meta { color: var(--syntaxKeyword); } | |
| /* Footer */ | |
| .footer { | |
| margin-top: 48px; | |
| padding: 20px; | |
| text-align: center; | |
| color: var(--dim); | |
| font-size: 10px; | |
| } | |
| /* Mobile */ | |
| #sidebar-toggle { | |
| display: none; | |
| position: fixed; | |
| top: 10px; | |
| left: 10px; | |
| z-index: 100; | |
| background: var(--accent); | |
| color: var(--body-bg); | |
| border: none; | |
| padding: 8px 12px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| #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; | |
| } | |
| #sidebar-toggle { | |
| display: block; | |
| } | |
| #content { | |
| padding: 60px 16px 24px; | |
| } | |
| #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> | |
| </head> | |
| <body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment