confidence slider UI round: global ←/→, fraction positions, color ramp; plan-flank phantom fix

Owner UI round 2026-10-01, three rulings on the slider plus one en-route
bug:

- GLOBAL ←/→, the ↑/↓ pattern: confidence adjusts wherever focus sits
  (window keydown, typing-guarded), no click-in, no focus ring. The
  slider itself takes NO focus — tabIndex -1, mousedown prevented,
  removed from the Tab chain (rows → thinking directly again).
- Position = fraction: the thumb's scale is 0-100 with the rendered
  value the stop's own percent, so 50 sits halfway; onChange snaps to
  the nearest stop (magnet feel while dragged).
- Six-step ramp (owner pick over three bands): 0 red, 30 orange,
  50 yellow (the coin flip), 70 lime, 90 green, 100 emerald — fill AND
  handle wear the stop's color; taller 10px pill bar, custom track/thumb
  (webkit + moz), muted remainder via --muted.
- Plan-flank phantom: gating the marginalia button on a JSX element
  (always truthy) mounted an invisible clickable button in the
  bottom-right whenever a question was pending with no plan.
  planExists() now gates it (pinned in plan-window tests).
This commit is contained in:
amosblomqvist
2026-10-02 00:44:02 +03:00
parent 9b9f6372fa
commit 62cfb8112b
4 changed files with 103 additions and 33 deletions
+11
View File
@@ -30,6 +30,17 @@ import {
const MARGIN_PAD = GRAPH_PAD + 16;
/** True when the transcript holds a plan tree. Gates the marginalia's
* clickable flank (chat.tsx): PlanMarginalia renders null without a
* tree, but the WRAPPER button must unmount too — a JSX element is
* always truthy, so gating on it alone left a phantom click target in
* the bottom-right whenever a question was pending with no plan
* (owner report, UI round 2026-10-01). */
export function planExists(messages: readonly PopupMessage[]): boolean {
const tree = latestTree(messages);
return !!tree && tree.nodes.length > 0;
}
export function PlanMarginalia({ messages }: { messages: readonly PopupMessage[] }) {
const markerId = useId().replace(/[^a-zA-Z0-9-]/g, "");
const tree = useMemo(() => latestTree(messages), [messages]);