feat(approval): make the approval card collapsible (#3007)

[rodboev]

Closes #3007

Thinking Path

• The approval card (static/index.html:454, role="alertdialog") slides up from behind the composer and occupies its full height whenever a tool-call approval is pending. Users reported that this obscures the tool-call rationale and context scrolled just above it. The request is to let them collapse the card to a thin header strip so the transcript remains readable.
• The clarify card already has a working collapse pattern (shipped in Release CM: v0.51.115 (stage-pr2731 — 1-PR — clarify prompt collapse/expand with chevron-icon polish, Telegram-approved) #2765): a chevron button in .clarify-header calls toggleClarifyCardCollapsed(), which toggles a .collapsed class, updates aria-expanded, rotates the chevron via _syncClarifyCollapseButton, and adjusts the .messages padding-bottom via _syncClarifyTranscriptSpace so the last message is not hidden behind the dock. The approval card has none of these pieces.
• Mirroring the clarify pattern exactly minimizes divergence and reviewer surface: the three clarify helpers (_syncClarifyCollapseButton, _syncClarifyTranscriptSpace, toggleClarifyCardCollapsed) have one-to-one approval equivalents. The CSS collapsed rules follow the same max-height approach.
• Two a11y constraints shape the implementation. First, role="alertdialog" requires that the heading stays visible when collapsed (the .approval-header containing the warning icon and "Approval required" span must never be hidden). Second, aria-expanded on the chevron button must flip on toggle so screen readers announce the state change. Both constraints are satisfied by hiding only .approval-desc, .approval-cmd, .approval-counter, and .approval-btns via display:none under .approval-card.collapsed, while leaving .approval-header untouched.
• The Enter shortcut for "Allow once" works via onceBtn.focus() in showApprovalCard (line 2757), not a document-level keydown. The button retains focus when the card opens, so the shortcut survives collapse without any special handling.
• hideApprovalCard must clear .collapsed so the next approval always opens expanded. The sameApproval guard in showApprovalCard (line 2730) compares .visible and _approvalSignature before any class changes; clearing .collapsed in hideApprovalCard (before .visible is removed) does not interfere with that guard.
• The transcript-space management (_syncApprovalTranscriptSpace) must be called from both showApprovalCard (to add approval-open to .messages) and hideApprovalCard (to remove it and approval-collapsed), mirroring how _syncClarifyTranscriptSpace is called from showClarifyCard / hideClarifyCard.

What Changed

• static/index.html (line 458, inside .approval-header): added <button type="button" class="approval-collapse" id="approvalCollapse" aria-expanded="true" aria-label="Collapse approval" aria-controls="approvalDesc approvalCmd approvalCounter approvalBtns" onclick="toggleApprovalCardCollapsed()" title="Collapse approval"> with a chevron SVG, mirroring the clarifyCollapse button at line 494.
• static/messages.js (after showApprovalCard): added _syncApprovalCollapseButton(card), _syncApprovalTranscriptSpace(card, opts), and toggleApprovalCardCollapsed(forceCollapsed) -- three helpers mirroring the clarify equivalents at lines 2949-3018.
• static/messages.js (hideApprovalCard): added card.classList.remove("collapsed") after removing .visible, and a _syncApprovalTranscriptSpace(null) call to remove approval-open / approval-collapsed from .messages when the card hides.
• static/messages.js (showApprovalCard): after card.classList.add("visible"), call _syncApprovalCollapseButton(card) then _syncApprovalTranscriptSpace(card, {immediate: true}), matching the order showClarifyCard uses. Ordering matters: _syncApprovalTranscriptSpace early-returns on a card that is not yet .visible, so syncing after the class is added is what actually adds approval-open to .messages and reserves transcript space on first paint.
• static/style.css (after .approval-header at line 1322): added .approval-collapse button styles mirroring .clarify-collapse; added .approval-card.collapsed max-height rules; added display:none for .approval-desc, .approval-cmd, .approval-counter, .approval-btns under .approval-card.collapsed; added .messages.approval-open and .messages.approval-collapsed padding-bottom rules alongside the clarify equivalents at line 1349.
• tests/test_3007_approval_card_collapse.py (new): static-assertion test confirming all structural invariants -- the three new JS functions are defined, .collapsed is cleared in hideApprovalCard, the CSS collapsed and transcript-space rules are present, and the approvalCollapse button appears in index.html with the correct aria-expanded and onclick attributes.

Why It Matters

When a tool triggers an approval request, the card can cover a significant portion of the transcript, hiding the tool-call output or rationale that informs the decision. A single-click collapse to a header strip lets users read the context without dismissing or responding to the approval, bringing the approval card to parity with the clarify card that shipped in #2765.

Verification

C:\Apps\hermes\hermes-agent\venv\Scripts\python.exe -m pytest tests/test_3007_approval_card_collapse.py -v --timeout=60
C:\Apps\hermes\hermes-agent\venv\Scripts\python.exe -m pytest tests/ -v --timeout=60

On Windows, if pytest fails to collect due to the pre-existing conftest symlink-privilege issue, retry with --noconftest. The new static-assertion test does not depend on conftest fixtures.

Manual verification steps:

1. Trigger a tool that requires approval; verify the chevron button appears in the approval card header.
2. Click the chevron; confirm the card collapses to a thin header strip showing only the warning icon and "Approval required" heading, and that the transcript above is scrollable.
3. Click the chevron again; confirm the card expands and "Allow once" is re-focusable via Tab or Enter.
4. Approve or deny; trigger a new approval; confirm the card opens expanded (not in the previously-collapsed state).
5. With a screen reader: confirm aria-expanded is announced as "false" when collapsed and "true" when expanded.

Risks / Follow-ups

• role="alertdialog" signals modal intent; the heading and warning icon remain visible when collapsed, satisfying the assistive-technology expectation that the alert context is not hidden.
• No browser-driven approval-UI tests exist in origin/master; the new test is a static-assertion test, consistent with the pattern in test_approval_card_layering.py and test_issue2883_clarify_padding.py. A Playwright-based test for the collapse toggle would be a useful follow-up.
• The sameApproval guard in showApprovalCard is unaffected: it evaluates .visible and _approvalSignature before any class changes, and .collapsed is cleared only in hideApprovalCard.
• If a future change adds an approval card max-height constraint (analogous to the clarify-card max-height:min(calc(100vh - 280px),420px)), the _syncApprovalTranscriptSpace measurement path would need updating too.
• Unlike the clarify card, this PR does not add an _ensureApprovalResizeListener equivalent, so the reserved --approval-card-height is not recomputed on a window resize while the card stays open. The CSS fallback (var(--approval-card-height,260px)) keeps space reserved in that window, and the value re-measures on the next show or collapse toggle. Adding a resize listener that mirrors the clarify one is a reasonable follow-up if it proves noticeable.

Model Used

Claude Opus 4.8 via Claude Code CLI

[greptile-apps]

Greptile Summary

This PR adds a collapsible header strip to the approval card, mirroring the existing collapse pattern from the clarify card (#2765). The three new JS helpers (_syncApprovalCollapseButton, _syncApprovalTranscriptSpace, toggleApprovalCardCollapsed) are faithful mirrors of their clarify equivalents, the CSS rules follow the same max-height/display-none approach, and hideApprovalCard correctly clears .collapsed so each new approval opens expanded.

• Collapse toggle: chevron button added to .approval-header; toggleApprovalCardCollapsed flips the class, syncs aria-expanded and the chevron direction, and re-measures transcript padding via _syncApprovalTranscriptSpace.
• Transcript-space reservation: .messages.approval-open / .messages.approval-collapsed CSS classes mirror .messages.clarify-open / .messages.clarify-collapsed; measurement runs immediately + in a rAF + after a 420 ms settle.
• State reset gap: showApprovalCard resets timing state inside if (!sameApproval) but does not remove .collapsed, so if a distinct new approval arrives via SSE while the card is still visible and collapsed, the new approval's description, command, and action buttons remain hidden.

Confidence Score: 4/5

Safe to merge with one targeted fix; the collapse feature works correctly in the normal respond→hide→show cycle but has a gap when a new approval arrives via SSE while the current card is still open and collapsed.

The implementation faithfully mirrors the clarify card collapse pattern and the normal user flow (respond → hideApprovalCard clears .collapsed → showApprovalCard opens expanded) is correct. The gap is in showApprovalCard's !sameApproval branch: it resets timing state but not .collapsed, so a distinct new approval arriving while the card is visible and collapsed will display its content hidden. A one-line fix inside the !sameApproval guard closes this.

static/messages.js — specifically the if (!sameApproval) block in showApprovalCard around line 2748

Important Files Changed

Filename	Overview
static/messages.js	Adds _syncApprovalCollapseButton, _syncApprovalTranscriptSpace, toggleApprovalCardCollapsed, and updates show/hide paths; showApprovalCard does not reset .collapsed for a new (different) approval while the card is still visible
static/index.html	Adds approval-collapse button with correct aria attributes; id="approvalBtns" added to fix aria-controls reference; mirrors clarify-collapse structure cleanly
static/style.css	Adds approval-collapse button styles and .approval-card.collapsed rules with display:none for content sections; approval-open/approval-collapsed transcript-space rules mirror clarify pattern correctly
tests/test_3007_approval_card_collapse.py	Static-assertion tests covering function presence, CSS rules, and HTML structure; consistent with existing test_approval_card_layering.py and test_issue2883_clarify_padding.py patterns

Sequence Diagram

sequenceDiagram
    participant BE as Backend (SSE)
    participant SC as showApprovalCard
    participant HC as hideApprovalCard
    participant TC as toggleApprovalCardCollapsed
    participant CSS as .messages classes

    BE->>SC: approval event (pending)
    SC->>CSS: add approval-open, measure --approval-card-height
    Note over SC: _syncApprovalCollapseButton sets aria-expanded=true

    Note over SC,TC: User clicks chevron
    TC->>CSS: toggle .collapsed on card
    TC->>CSS: swap approval-open → approval-collapsed padding
    TC->>TC: "_syncApprovalCollapseButton (aria-expanded=false)"

    Note over SC,HC: User clicks Allow once / Deny
    SC->>HC: respondApproval → hideApprovalCard(true)
    HC->>CSS: remove approval-open, approval-collapsed
    HC->>HC: card.classList.remove("collapsed") ✓

    BE->>SC: next approval event
    SC->>CSS: add approval-open (card starts expanded) ✓

Loading

_{Reviews (2): Last reviewed commit: "fix(approval): add missing approvalBtns ..." | Re-trigger Greptile}

[rodboev]

Added id="approvalBtns" to the approval buttons wrapper so aria-controls resolves correctly. Also cleaned up the focus rules: :hover gets the interactive styles on its own, :focus-visible gets the blue outline ring. The prior ordering had :focus after :focus-visible at the same specificity, making the :focus-visible outline:none dead. Pushed in c1e25b8.

[nesquena-hermes]

Shipped in v0.51.288 (Release JD, stage-r24) via #3697. 🎉 Closes #3007.

Thanks @rodboev — clean, well-built feature (full ARIA, chevron swap, transcript reflow that preserves near-bottom scroll). Nathan approved via screenshots (expanded + collapsed, desktop + mobile — the before/after nicely shows the transcript the collapsed strip reveals).

The regression gate (Codex) caught one edge worth noting: showApprovalCard's sameApproval signature didn't include approval_id and didn't clear .collapsed in the !sameApproval branch, so a NEW/parallel queued approval arriving while the card was collapsed could render collapsed with its command + buttons hidden. Fixed inline (added approval_id to the signature + clear .collapsed for a distinct approval, before the collapse-button/transcript sync) with 2 regression tests, so every fresh approval always opens expanded. Re-gated: full suite 7941 passed, Codex SAFE, Opus ship. 🙏