How should accept/deny affordances appear on autocode-proposed badges?
The current inline ✓/✗ grows badge width on hover, bounces siblings, and
uses a different pattern from the floating-circle delete on other badges. These
variations explore floating circles as external commentary, not inline content.
Current (production) — inline ✓/✗
REF
Current: inline actions grow badge width
✓/✗ are display: inline-flex on hover
Badge width grows ~20px, pushing siblings right
Not consistent with floating-circle pattern on other badges
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
✓ at top-right (same position as delete ×)
✗ immediately left of ✓ (3px gap)
Tinted backgrounds: green (#dcfce7), red (#fef2f2)
Same 14.5px circle size as existing badge-delete
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
B
Diagonal: ✓ top-right, ✗ top-left
Mirrors left/right spatial decision
Risk: ✗ on left may overlap adjacent badge's ✓
when badges are closely spaced in the row
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
C
Progressive: ✓ prominent, ✗ faded
Accept (✓) is the primary action — green circle
Deny (✗) is muted (40% opacity), reveals on ✓ hover
Assumes accept is the 80-90% action for good proposals
Deny becomes vivid red on its own hover
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
D
Larger circles (16px), scale on hover
16px diameter (vs 14.5px production delete circles)
Better Fitts' law compliance, easier touch targets transform: scale(1.15) on hover for feedback
Risk: may feel oversized relative to 0.72rem badge text
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
E
Floating pill bar above badge
Single pill-shaped element centred above badge
Two compartments: ✓ left, ✗ right, divided by line
Visually distinct from the floating circle pattern
Good: clear "toolbar" feel. Risk: feels like a different UI
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
F
Click badge = accept, ✗ circle = deny
Clicking the badge itself accepts (green outline on hover)
Only one floating circle needed (red ✗ for deny)
Simplest affordance: matches "click to keep" mental model
Risk: no visible accept button — discoverability depends
on the green outline being understood as "click me"
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
G
Pill at delete position, ✓ hangs right recommended
Pill-shaped bar: ✗ left, ✓ right, 16px compartments
✗ anchored at top-right (same position as delete ×)
✓ extends past badge's right edge
Consistent red ✗ colour across delete and deny actions
"I kept clicking the back button but nothing happened, so I just gave up and closed the tab."
[p3] — Sarah, 2:45
frustrationnavigationerror recovery
abandonment
+
Analysis
Layout shift: All variations (A–F) use absolute positioning, so zero layout shift on hover. The + add-tag button stays put. This alone is a major improvement over the current inline approach.
Consistency: Variations A, B, C, D extend the existing floating-circle vocabulary. E introduces a new "pill bar" element. F reduces to a single circle (most consistent with the delete pattern but sacrifices explicit accept affordance).
Two-circle spacing: With 8px badge gap in flexbox, two 14.5px circles side-by-side above a badge extend ~17px to the left — this can overlap with an adjacent badge's circles. The 8px gap between badges is the limiting factor. Var B (diagonal) makes this worse by putting circles on both sides.
Recommendation:Var G combines the best of D (16px targets) and E (pill bar) with A's positioning. The ✗ occupies the exact same position as the existing delete ×, so deny "looks like delete" — which it semantically is. The ✓ hangs right, giving both actions equal hit-target area without overlapping adjacent badges. Pill shape groups the binary choice into one element. Using red ✗ consistently across all badge delete/deny actions unifies the interaction vocabulary.
Rationale tooltip: The tooltip (hovering over the badge text for LLM explanation) still works with all floating-circle variants since the circles are at the top edge and the tooltip appears above via absolute positioning. May need z-index coordination if tooltip and circles overlap.
Dark mode: The tinted circle backgrounds (#dcfce7, #fef2f2) need dark-mode equivalents. The existing badge.css already has dark-mode overrides for the action colours; the same pattern applies to circle backgrounds.