feat(web): unify tool-row expand interaction with IN/OUT card and trajectory Inspect

Every expandable tool row shares one interaction (whole-row toggle,
icon-to-chevron hover preview) and one expanded body: an IN/OUT
gutter-labeled card with per-section 150px scroll caps and sticky labels.
toolRowModel derives result output and the error first line, terminalFailed
surfaces a failing exit as the collapsed row's red dot, a hover Inspect
pill jumps to the call's trajectory record through a one-shot store
handoff, and the chat view keeps its scroll offset across view switches.
This commit is contained in:
Yif
2026-07-30 21:21:29 +08:00
parent 86fa88a012
commit 78e4d36214
38 changed files with 1241 additions and 268 deletions

View File

@@ -139,7 +139,11 @@
.option {
display: flex;
align-items: center;
/* flex-start, not center: with a wrapped description the indicator must
stay on the FIRST line (centering drifts it down the taller copy block).
The 8px padding makes a single-line row 40px exactly, so nothing reads
as top-heavy; .number/.checkbox re-center against the first line box. */
align-items: flex-start;
gap: 8px;
width: 100%;
min-height: 40px;
@@ -148,7 +152,7 @@
intrinsic height, and centered content then paints outside the row box —
over the title and the next row. Overflow belongs to .options. */
flex-shrink: 0;
padding: 6px 12px 6px 8px;
padding: 8px 12px 8px 8px;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
@@ -180,6 +184,9 @@
flex: 0 0 20px;
width: 20px;
height: 20px;
/* (24px first-line box 20px indicator) / 2: centers the indicator against
the first text line under the row's flex-start alignment. */
margin-top: 2px;
border-radius: 6px;
background: var(--dsw-alias-bg-overlay);
color: var(--dsw-alias-label-secondary);
@@ -197,6 +204,8 @@
flex: 0 0 20px;
width: 20px;
height: 20px;
/* Same first-line centering as .number under flex-start alignment. */
margin-top: 2px;
}
.checkbox::before {
@@ -263,14 +272,16 @@
inline text input; focus or a typed draft lifts it to the selected look. */
.customRow {
display: flex;
align-items: center;
/* Same first-line alignment as .option — the indicator seat carries the
2px re-centering margin. */
align-items: flex-start;
gap: 8px;
width: 100%;
min-height: 40px;
/* Same reason as .option: the custom row is scroll content, and shrinking
it pushes the inline input past the footer. */
flex-shrink: 0;
padding: 6px 12px 6px 8px;
padding: 8px 12px 8px 8px;
border: 1px solid transparent;
border-radius: 12px;
transition: background-color 120ms ease, border-color 120ms ease;
@@ -378,9 +389,7 @@
.option,
.customRow {
align-items: flex-start;
gap: 8px;
padding: 6px;
padding: 8px 6px;
}
.footer {