fix: restore legacy tool card visuals
This commit is contained in:
@@ -3,6 +3,10 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Changed
|
||||
|
||||
- Restored the legacy compact tool-call card chrome by removing the persistent "Tool output" badge and returning the left rail to the muted border treatment. This keeps tool activity visually quieter while preserving the existing collapsible tool details.
|
||||
|
||||
## [v0.51.171] — 2026-05-30 — Release EQ (stage-batch53 — tool-output card badge + Neon opt-in skin)
|
||||
|
||||
### Added
|
||||
|
||||
@@ -2624,12 +2624,12 @@ body.resizing .sidebar{transition:none!important;}
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.tool-card{background:var(--surface-subtle);border:1px solid var(--border-muted);border-left:3px solid var(--accent-bg-strong);border-radius:var(--radius-card);margin:2px 0;overflow:hidden;transition:border-color .15s,background-color .15s;}
|
||||
.tool-card{background:var(--surface-subtle);border:1px solid var(--border-muted);border-left:2px solid var(--border-muted);border-radius:var(--radius-card);margin:2px 0;overflow:hidden;transition:border-color .15s,background-color .15s;}
|
||||
.tool-card:hover{border-color:var(--border2);background:var(--surface-subtle-hover);}
|
||||
.tool-card-running{border-color:var(--accent-bg-strong);background:var(--accent-bg);}
|
||||
.tool-card-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);cursor:pointer;user-select:none;}
|
||||
.tool-card-icon{font-size:13px;flex-shrink:0;opacity:.65;}
|
||||
.tool-card-badge{flex-shrink:0;font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.045em;font-weight:700;color:var(--accent-text);background:var(--accent-bg);border:1px solid var(--accent-bg-strong);border-radius:999px;padding:1px 6px;}
|
||||
|
||||
.tool-card-name{font-size:var(--font-size-xs);font-weight:600;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;flex-shrink:0;}
|
||||
.tool-card-preview{font-size:var(--font-size-xs);color:var(--muted);opacity:.62;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.tool-card-toggle{font-size:10px;color:var(--muted);opacity:.45;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;}
|
||||
|
||||
@@ -6987,7 +6987,6 @@ function buildToolCard(tc){
|
||||
<div class="tool-card-header" onclick="this.closest('.tool-card').classList.toggle('open')">
|
||||
${runIndicator}
|
||||
<span class="tool-card-icon">${icon}</span>
|
||||
<span class="tool-card-badge">Tool output</span>
|
||||
<span class="tool-card-name">${esc(displayName)}</span>
|
||||
<span class="tool-card-preview">${esc(previewText)}</span>
|
||||
${hasDetail?`<span class="tool-card-toggle">${li('chevron-right',12)}</span>`:''}
|
||||
|
||||
@@ -5,29 +5,23 @@ UI_JS = (ROOT / "static" / "ui.js").read_text(encoding="utf-8")
|
||||
STYLE_CSS = (ROOT / "static" / "style.css").read_text(encoding="utf-8")
|
||||
|
||||
|
||||
def test_tool_cards_render_persistent_tool_output_badge():
|
||||
"""Tool output must remain distinguishable without relying on hover state."""
|
||||
def test_tool_cards_use_legacy_compact_header_without_tool_output_badge():
|
||||
"""Tool cards keep the legacy compact header: icon, tool name, preview."""
|
||||
build_start = UI_JS.index('function buildToolCard(tc){')
|
||||
build_end = UI_JS.index('function _syncToolCallGroupSummary', build_start)
|
||||
build_tool_card = UI_JS[build_start:build_end]
|
||||
|
||||
assert '<span class="tool-card-badge">Tool output</span>' in build_tool_card
|
||||
assert 'tool-card-badge' not in build_tool_card
|
||||
assert 'Tool output' not in build_tool_card
|
||||
assert '<span class="tool-card-name">${esc(displayName)}</span>' in build_tool_card
|
||||
assert build_tool_card.index('class="tool-card-badge"') < build_tool_card.index('class="tool-card-name"')
|
||||
|
||||
|
||||
def test_tool_card_badge_style_is_not_hover_only():
|
||||
badge_rule_start = STYLE_CSS.index('.tool-card-badge{')
|
||||
badge_rule_end = STYLE_CSS.index('}', badge_rule_start)
|
||||
badge_rule = STYLE_CSS[badge_rule_start:badge_rule_end]
|
||||
|
||||
def test_tool_card_badge_style_is_absent():
|
||||
assert '.tool-card-badge{' not in STYLE_CSS
|
||||
assert '.tool-card:hover .tool-card-badge' not in STYLE_CSS
|
||||
assert 'text-transform:uppercase' in badge_rule
|
||||
assert 'background:var(--accent-bg)' in badge_rule
|
||||
assert 'border:1px solid var(--accent-bg-strong)' in badge_rule
|
||||
assert 'color:var(--accent-text)' in badge_rule
|
||||
|
||||
|
||||
def test_tool_cards_have_persistent_accent_rail():
|
||||
def test_tool_cards_use_legacy_muted_rail():
|
||||
assert '.tool-card{background:var(--surface-subtle);' in STYLE_CSS
|
||||
assert 'border-left:3px solid var(--accent-bg-strong)' in STYLE_CSS
|
||||
assert 'border-left:2px solid var(--border-muted)' in STYLE_CSS
|
||||
assert 'border-left:3px solid var(--accent-bg-strong)' not in STYLE_CSS
|
||||
|
||||
Reference in New Issue
Block a user