fix: restore legacy tool card visuals

This commit is contained in:
ai-ag2026
2026-05-30 10:26:03 +02:00
parent 7dc4273a21
commit 97dde9a48e
4 changed files with 15 additions and 18 deletions

View File

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

View File

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

View File

@@ -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>`:''}

View File

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