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:
Hibryda 2026-03-09 02:31:04 +01:00
parent 28f7867dc6
commit 4674a4779d
3 changed files with 463 additions and 191 deletions

File diff suppressed because it is too large Load diff

View file

@ -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) {

View file

@ -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);
} }