# Decision: Auto-refresh Widget — add inline manual pause/play icon

**Date**: 2026-05-09
**Status**: Accepted
**Affected**: `MICROAPPS_PRODUCT_CONTEXT.md` §5 / §9, Figma file-local component `MicroApp Auto-refresh Widget` (`3274:1856`, 2 variants)

---

## Context

Current Auto-refresh widget shows: status dot · countdown text (e.g. "0:28") · progress bar · interval dropdown ("30s ▾").

To pause auto-refresh today, the only path is: open dropdown → pick `Off`. This is a **2-step interaction** with semantic baggage — `Off` reads as "long-term turn off" rather than "I want to inspect a row for a minute".

## Decision

Add an **inline pause/play icon** between the countdown text and the interval dropdown.

```
●  Refresh in 27s   ‖   30s ▾        ← Running variant
●  Paused           ▶   30s ▾        ← Paused variant (manual)
```

- **Running variant** → shows pause icon (`‖`); clicking switches to manual-paused state.
- **Paused variant** → shows play icon (`▶`); clicking resumes Running with the previously selected interval.
- **Dropdown `Off`** behavior unchanged — selecting `Off` still puts widget into Paused variant. Manual pause and dropdown-Off both land in the same Paused variant.

## Rationale

- **Two affordances, two semantics**:
  - Dropdown `Off` = "I want this off until I change it back" (long-term).
  - Inline icon = "I want to look at something for a few seconds without the table reshuffling under me" (transient).
- **One-click vs two-click**: Operators monitoring a critical broadcast shouldn't need to navigate a dropdown.
- **Universal pause/play affordance**: Mirrors media controls; instantly understood.
- **Manual pause vs dropdown-Off resume behavior**:
  - Resume from manual pause → restores previous interval.
  - Resume from dropdown-Off → user must pick a non-Off interval to resume (intentional: dropdown-Off is a deliberate state choice).

## Implementation

### Component edit (Figma)

Component: `MicroApp Auto-refresh Widget` (id `3274:1856`), 2 variants (`Running` / `Paused`).

**Layout change** (both variants):
```
[icon/load/refresh] [countdown text] [progress bar] → [icon/load/refresh] [countdown text] [progress bar] [PAUSE_OR_PLAY_ICON] [dropdown]
```

- Running variant: insert `icon/Video/Pause` (or library equivalent — verify) between progress bar and dropdown.
- Paused variant: insert `icon/Video/Play` between progress bar (which shows empty/halted) and dropdown.
- Both icons should be 16px naked icons matching the rest of the widget's gray palette. Hover brightens like other action icons.

### Spec update

- `MICROAPPS_PRODUCT_CONTEXT.md` §5 Master Console > Filter bar — add the pause/play icon to the widget description.
- `MICROAPPS_PRODUCT_CONTEXT.md` §9 — new decision row.

### UX delivery annotation

- A5 (Auto-refresh & Paused State): add a `MANUAL PAUSE` section explaining the inline icon vs the dropdown `Off`.

## Open Questions

- Confirm exact icon assets in TVU library for pause + play (likely `icon/Video/Pause` / `icon/Video/Play`). If pause is missing, log a library debt entry.
- Should manual pause persist across page reloads, or reset to Running on reload? **Suggest**: persist for the session (sessionStorage), reset on full sign-out.

## Source

User instruction, 2026-05-09 (with mockup screenshot showing `● Refresh in 27s ‖ 30s ▾`).