Web composer stats detail row and input-zone polish

Stats line moves into the InputBar's new footer slot (sharing the card's
width column) and expands to the design's grouped detail row: turns/steps,
LLM and tool wall time, cache hit, and input/output token split, all
derived client-side from the snapshot. The composer stack owns one 8px
rhythm, the seat fades the transcript through a fixed 36px gradient band,
back-to-bottom follows a live --dsh-composer-height, and goal/todo strips
share one 752px tip-fill column.
This commit is contained in:
Yif
2026-07-30 10:22:44 +08:00
parent 2a53806275
commit 04f6dfdc29
18 changed files with 273 additions and 57 deletions

View File

@@ -1,11 +1,12 @@
/* GoalBar: the goal strip docked above the composer card. The dock mirrors
InputBar's horizontal geometry (32px side padding, 776px centered cap)
plus the mock's 12px inset, so the bar's edges land 12px inside the
composer card's edges in both the capped and the squeezed regimes. The
negative bottom margin eats InputBar's 8px top padding and tucks the
/* GoalBar: the goal strip docked above the composer card. The dock's 44px
side padding and the bar's 752px cap match the todo strip's column
(TodoPanel.module.css), 24px inside the composer card's edges. The
negative bottom margin cancels the composer stack's 8px gap and tucks the
bar's square bottom edge 2px under the composer card's top edge (the
card, later in DOM order, paints over it). All states share one fixed
38px height so switching between them never resizes the strip. */
card, later in DOM order, paints over it). Surface matches the todo
strip: tip fill, l1 border — no bottom edge where it disappears under the
card. All states share one fixed 38px height so switching between them
never resizes the strip. */
.dock {
padding: 0 44px;
@@ -20,10 +21,10 @@
height: 38px;
margin: 0 auto -10px;
padding: 0 14px;
border: 1px solid var(--dsw-alias-border-l1);
border-bottom: none;
border-radius: 14px 14px 0 0;
/* Translucent hover gray doubles as the mock's #F5F6F7 over the white
base and lifts the strip off the composer card in dark mode. */
background: var(--dsw-alias-interactive-bg-hover);
background: var(--dsw-specific-tip);
}
.sparkle {