Foundations & UI

UI Refinement Round

Five web-only refinements from on-device feedback: recall sources collapse behind a tap, suggested-reply chips become legible, Resolve hides on passive updates, the status dot becomes an activity/hat pill, and Intel/Loops/R&D converge on one hairline-list register.

Dated 2026-06-17Programme Foundations & UI

Situation

Alex's on-device review of the recall Sources feature, suggested-reply pills, the Updates screen, the home status dot, and the freshly-redesigned Intel/Loops/R&D surfaces surfaced five independent rough edges — none requiring a Worker or DB change.

The chips in particular were a real accessibility fail (oxblood text on oxblood border, roughly 2:1 contrast on the dark theme), and the three work surfaces (Intel, Loops, R&D) had each accumulated their own card/pill/label treatment despite being conceptually one family.

Key decisions

Sources behind a tap

Recall sources collapse behind a quiet "Sources · N" gold text-button footnote, collapsed by default, that toggles the existing SourcesFooter list.

Legible chips

Suggested-reply pills change from oxblood-on-dark (illegible, ~2:1) to a grey fill with white text, clearing WCAG AA (~13:1).

Resolve gated to actionable kinds

The Updates Resolve button shows only for kind ∈ {calendar, mention}; briefing/EOD items are informational and get no Resolve action.

Status dot → activity·hat pill

The bare status dot becomes a mono two-letter pill (e.g. W·MC) showing activity and hat; attention renders as an oxblood ring rather than changing the dot's fill, and it stays tappable to open the status sheet.

One hairline-list register

Intel, Loops, and R&D converge on transparent hairline-separated rows (R&D drops its card treatment), serif primary titles, outline status pills, and one shared CTA-button treatment.

Architecture

MessageView.svelte / SourcesFooter.svelte

Sources footnote toggle; chip fill/colour change.

UpdatesView.svelte

Resolve button gated on item kind.

+page.svelte / StatusPill.svelte (new, optional)

Status pill sourced from loadMode(), mapped via new ACTIVITY_ABBR/HAT_ABBR constants.

RndView.svelte, QConversation.svelte, TraySheet.svelte

Converge on the shared hairline-row / serif-title / outline-pill / CTA-button treatment.

Risks & guardrails

Wrong mode shown before load

The status pill shows a neutral placeholder before loadMode() resolves or if it fails — never a guessed/wrong activity-hat pair.

Abbreviations need full-word labels

The pill's aria-label spells out the full words (e.g. "Working, Maths Circle — open status") even though the visible text is abbreviated.

Contrast on new outline pills

Harmonized outline pill colours (amber/green/oxblood/muted per status) must clear the 3:1 graphic-object threshold, checked in the explicit design-consistency + a11y pass.

Delivery

Task 1

Sources behind a tap.

Task 2

Legible chips (grey fill, white text).

Task 3

Updates — Resolve only on actionable kinds.

Task 4

Status pill (activity · hat).

Task 5

Intel/Loops/R&D hairline-list harmonisation.

Task 6

Design-consistency + a11y pass + verify.

Out of scope

No Worker, DB, or migration changesNo change to the recall pipeline, nudge engine, mode-resolution logic, or Q delegation flowNot redesigning Intel/Loops content or the Q conversation structure — visual register onlyNo new icons beyond the small footnote/chevron disclosure affordance

spec · docs/superpowers/specs/2026-06-17-ui-refinement-round-design.md
plan · docs/superpowers/plans/2026-06-17-ui-refinement-round.md

Mallory · Estate briefing