# Design sweep — Agent › Overview & Posts

Files: `routes/agent/Overview.tsx` + `overview.css`; `routes/agent/Posts.tsx` +
`posts.css`. Neither is in `LEGACY_BASELINE` — both are swept, 0 legacy
markers enforced by `conformance.test.ts`. Reached via `AGENT_SUBNAV`
(AppShell.tsx:101/105) and `agentRouteChildren`; Overview is the `/agent`
index redirect (agentRoutes.tsx:50).

## Overview

Composition on the wire: `StatTiles` (4 tiles) → collapsed disclosure →
per-channel status `Card`s (gate pills + turns-today + Activity link, one per
channel) → `ChannelsTab` (WhatsApp/Instagram/Facebook cards, full gate
controls, absorbed from the retired Channels tab) → `ThresholdEditor`
(agentReview confidence knobs, absorbed pending the Moderation console).

- **IA/concepts**: 4 stacked concept-groups on one landing screen, two of
  them admittedly parked here by prior scopes ("until the Moderation console
  re-homes them", ChannelsTab "the better home AgentNav promised"). Worse: the
  per-channel status cards (gate pills + turns) and ChannelsTab's per-channel
  gate cards both render "channel" as a concept, with overlapping gate info —
  a `CLAUDE.md` "one concept, one surface" violation, not cosmetic.
- **Interaction**: no dead ends; every stat/pill links somewhere real
  (Activity, Settings). Disclosure (`<details>`) for the automation-rate
  explainer is a good honest affordance. `ChannelsTab`/`ThresholdEditor`
  controls (outside this file list) add several raw inputs to the page total.
- **Content/copy**: plain words throughout ("is the bot okay?", "waiting for
  you", "handled today"); no engineering vocabulary leaking into UI text.
- **Visual/tokens**: fully on `--cm-*`; zero legacy markers, zero raw hex in
  `overview.css`.
- **a11y+responsive**: labelled `Card`s (`aria-label`), focus-visible on the
  disclosure summary. The group note's "known 320px Canary-pill overflow" is
  **already fixed** — `overview.css:69-71` (`white-space: normal` scoped to
  `.cm-overview__chpills`) shipped in commit `00e0cca` ("fixes 320px pill
  overflow"). Stale flag; not a live issue. `cm-stats` grid
  (`minmax(118px,1fr)`) reflows to 2×2 at 320px, no overflow.

**VERDICT: redesign** — not for tokens or a11y (both clean), but for IA: three
previously-separate screens' content (Channels tab, agentReview thresholds)
were absorbed onto the landing page as stacked sections rather than merged or
re-homed, duplicating the channel concept. A design pass should decide where
each absorbed block actually lives, not keep parking them here.

### Forks
1. Merge the per-channel status card and ChannelsTab's per-channel gate card
   into one card per channel (they duplicate the same "channel" concept), or
   keep them visually separate for a reason I'm missing? **Recommend: merge.**
2. `ThresholdEditor` was explicitly parked here "until Moderation re-homes it"
   (agent-scope-3 Stage 1). Is that re-home scope now ready to claim it, or
   still parked? **Recommend: move it off Overview now** — Overview should
   answer "is the bot okay?", not host tuning knobs.

## Posts

Grid → detail master/detail pattern: channel tabs (Instagram/Facebook) →
organic/ads tabs → IG-style thumbnail grid → per-post detail (caption,
threaded comments, per-comment decision inset, interpretation editor,
triggers list).

- **IA/concepts**: one cohesive concept (browse posts → drill into a post's
  comments/decisions), not overloaded. Two tab rows (channel, then source) is
  a defensible two-axis filter, not a duplicate concept.
- **Interaction**: `role="tablist"`/`role="tab"` used for both tab rows
  (Posts.tsx:248, :266) but **without the accessible tab pattern** — no
  `aria-controls`/`tabpanel`, no arrow-key roving focus (WAI-ARIA APG expects
  Left/Right to move selection; here only Tab does, and every tab is in the
  Tab order). A screen reader announces "tab 1 of 2" and implies keyboard
  behavior that doesn't exist. Real a11y gap, not cosmetic.
- **Content/copy**: plain words ("open on Instagram", "no caption available",
  "seen here"); no jargon.
- **Visual/tokens**: on `--cm-*`; every raw-color use (photo scrims, avatar
  gradients, on-dark state dots) carries a `conformance-allow` justification —
  documented debt, not silent drift.
- **a11y+responsive**: grid drops 4→3 columns at 760px; comment thread indent
  shrinks at 760px. Detail-inset `xlabel` goes full-width at 760px. No
  dedicated 320px check but nothing here looks brittle at that width (single
  column flows already).

**VERDICT: polish** — fix the tab pattern (real `aria-controls`/tabpanel +
arrow-key nav, or drop the ARIA tab role for plain toggle buttons if the full
pattern isn't worth building); everything else already reads clean.

### Forks
1. Fix the tab semantics properly (full ARIA tabs: `aria-controls`, roving
   tabindex, arrow keys) or simplify to plain `<button>` toggles with no
   `role="tab"` at all? **Recommend: plain toggle buttons** — simpler, no
   half-built ARIA contract to maintain, same visual.