Something went wrong. Try again.
fork of prime agent with changes i want but are not upstreamable probqbly (and some fixes)
Something went wrong. Try again.
22 kB · 1020 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021 :root { {{THEME_VARS}} --body-bg: {{BODY_BG}}; --container-bg: {{CONTAINER_BG}}; --info-bg: {{INFO_BG}}; }
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --line-height: 18px; /* 12px font * 1.5 */ --sidebar-width: 400px; --sidebar-min-width: 240px; --sidebar-max-width: 840px; --sidebar-resizer-width: 6px; }
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); }
body.sidebar-resizing { cursor: col-resize; user-select: none; }
#app { display: flex; min-height: 100vh; } #sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); max-width: var(--sidebar-width); 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-resizer { width: var(--sidebar-resizer-width); flex-shrink: 0; position: sticky; top: 0; height: 100vh; cursor: col-resize; touch-action: none; background: transparent; border-right: 1px solid transparent; }
#sidebar-resizer:hover, body.sidebar-resizing #sidebar-resizer { background: var(--selectedBg); border-right-color: 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-skill { color: var(--customMessageLabel); }
.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; min-width: 0; 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); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.help-hint { flex: 1 1 240px; }
.help-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.header-toggle-btn, .download-json-btn { font-size: 10px; padding: 2px 8px; background: var(--container-bg); border: 1px solid var(--border); border-radius: 3px; color: var(--text); cursor: pointer; font-family: inherit; }
.header-toggle-btn:hover, .download-json-btn:hover { background: var(--hover); border-color: var(--borderAccent); } .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, .skill-user-entry: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); }
.assistant-text + .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 > div, .output-full > div { margin: 0; padding: 0; line-height: var(--line-height); }
.tool-output > div:not(.output-preview):not(.output-full), .output-preview > div:not(.expand-hint), .output-full > div:not(.expand-hint) { white-space: pre-wrap; }
.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; }
.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; } .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.expandable { cursor: pointer; }
.system-prompt-header { font-weight: bold; color: var(--customMessageLabel); }
.system-prompt-preview { color: var(--customMessageText); white-space: pre-wrap; word-wrap: break-word; font-size: 11px; margin-top: var(--line-height); }
.system-prompt-expand-hint { color: var(--muted); font-style: italic; margin-top: 4px; }
.system-prompt-full { display: none; color: var(--customMessageText); white-space: pre-wrap; word-wrap: break-word; font-size: 11px; margin-top: var(--line-height); }
.system-prompt.expanded .system-prompt-preview, .system-prompt.expanded .system-prompt-expand-hint { display: none; }
.system-prompt.expanded .system-prompt-full { display: block; }
.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(--customMessageLabel); 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); }
.tool-params-hint { color: var(--muted); font-style: italic; }
.tool-item:has(.tool-params-hint) { cursor: pointer; }
.tool-params-hint::after { content: '[click to show parameters]'; }
.tool-item.params-expanded .tool-params-hint::after { content: '[hide parameters]'; }
.tool-params-content { display: none; margin-top: 4px; margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--dim); }
.tool-item.params-expanded .tool-params-content { display: block; }
.tool-param { margin-bottom: 4px; font-size: 11px; }
.tool-param-name { font-weight: bold; color: var(--text); }
.tool-param-type { color: var(--dim); font-style: italic; }
.tool-param-required { color: var(--warning, #e8a838); font-size: 10px; }
.tool-param-optional { color: var(--dim); font-size: 10px; }
.tool-param-desc { color: var(--dim); margin-left: 8px; } .hook-message { background: var(--customMessageBg); color: var(--customMessageText); padding: var(--line-height); border-radius: 4px; }
.hook-type { color: var(--customMessageLabel); font-weight: bold; } .skill-invocation { background: var(--customMessageBg); border-radius: 4px; padding: var(--line-height); cursor: pointer; }
.skill-invocation-label { color: var(--customMessageLabel); font-weight: bold; }
.skill-invocation-collapsed { color: var(--customMessageText); }
.skill-invocation-content { display: none; color: var(--customMessageText); margin-top: var(--line-height); }
.skill-invocation.expanded .skill-invocation-collapsed { display: none; }
.skill-invocation.expanded .skill-invocation-content { display: block; }
.skill-invocation + .user-message { margin-top: var(--line-height); }
.skill-user-entry { position: relative; } .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: 0; width: min(var(--sidebar-width), 100vw); min-width: min(var(--sidebar-width), 100vw); max-width: min(var(--sidebar-width), 100vw); top: 0; bottom: 0; height: 100vh; z-index: 99; transform: translateX(-100%); transition: transform 0.3s; }
#sidebar.open { transform: translateX(0); }
#sidebar-resizer { display: none; }
#sidebar-overlay.open { display: block; }
#hamburger { display: block; }
.sidebar-close { display: block; }
#content { padding: var(--line-height) 16px; }
#content > * { max-width: 100%; } }
@media print { #sidebar, #sidebar-resizer, #sidebar-toggle { display: none !important; } body { background: white; color: black; } #content { max-width: none; } }