style(agent): redesign AgentPane and MarkdownPane for polished readable UI
Tribunal-elected design (S-3-R4, 88% confidence). AgentPane: sans-serif root font, tool call/result pairing via $derived.by, hook message collapsing, context window meter, minimal cost bar, session summary styling, two-phase scroll anchoring, tool-aware truncation, color-mix() softening, container query responsive margins. MarkdownPane: container query wrapper. Shared --bterminal-pane-padding-inline CSS variable in catppuccin.css.
This commit is contained in:
parent
28f7867dc6
commit
4674a4779d
3 changed files with 463 additions and 191 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -78,8 +78,10 @@
|
||||||
{#if error}
|
{#if error}
|
||||||
<div class="error">{error}</div>
|
<div class="error">{error}</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="markdown-body">
|
<div class="markdown-pane-scroll">
|
||||||
{@html renderedHtml}
|
<div class="markdown-body">
|
||||||
|
{@html renderedHtml}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="file-path">{filePath}</div>
|
<div class="file-path">{filePath}</div>
|
||||||
|
|
@ -94,10 +96,14 @@
|
||||||
color: var(--ctp-text);
|
color: var(--ctp-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body {
|
.markdown-pane-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 1.75rem 2rem;
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body {
|
||||||
|
padding: 1.5rem var(--bterminal-pane-padding-inline, 2rem);
|
||||||
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
|
|
@ -226,6 +232,8 @@
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 1.25em 0;
|
margin: 1.25em 0;
|
||||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ctp-surface1) 20%, transparent);
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ctp-surface1) 20%, transparent);
|
||||||
|
direction: ltr;
|
||||||
|
unicode-bidi: embed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body :global(pre code) {
|
.markdown-body :global(pre code) {
|
||||||
|
|
|
||||||
|
|
@ -55,4 +55,7 @@
|
||||||
--pane-header-height: 32px;
|
--pane-header-height: 32px;
|
||||||
--pane-gap: 2px;
|
--pane-gap: 2px;
|
||||||
--border-radius: 4px;
|
--border-radius: 4px;
|
||||||
|
|
||||||
|
/* Pane content padding — shared between AgentPane and MarkdownPane */
|
||||||
|
--bterminal-pane-padding-inline: clamp(0.75rem, 3.5cqi, 2rem);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue