Console redesign stage 6: Activity and pages without renders

Start by reading the parent issue #1425 and the approved console plan, then inspect the named Activity entry points: ui/src/state/events.ts, ui/src/model/event-list.ts, and ui/src/screens/activity. The work also spans several screens, browser tests, render cases, and documentation, with shared ownership and review gates. Done means implementing stage 6’s specified Activity filters, history and visual updates, re-skinning the listed pages while preserving existing behavior, adding the required browser cases, and updating the owned documentation sections.

Part of #1425.

Scope

Deliver stage 6 of the approved console plan: Activity and pages without renders. This is a reviewable slice of the single feature stack, not permission to merge a partial console into main. The parent Shared values owns every cross-stage value/interface. No issue is claimed or ready until independent spec checking finishes.

In short

The operator gets activity and pages without renders in the approved visual style, with existing identity, session and action semantics. The parent defines render, holder and view-only behavior; quantities below are CSS pixels for layout and milliseconds for request waits unless explicitly stated otherwise.

flowchart LR
  O[Operator] --> P["Stage 6 page or shared UI — changed"]
  P --> S[Existing state hooks]
  S --> M[Pure view models]
  P --> D[Shared design components]
  S --> A[Existing API and live connection]

If this goes wrong, the operator sees a missing control, a misleading value or content that cannot be read at the selected window size.

Technical spec

Facts

Commit 3b8c44d104c88db7a5cdbf0abff40343642ff0b0.

#	Fact	Source
F1	Activity exposes subject, query, rows, chart, selection and history end in its hook.	ui/src/state/events.ts:67-87
F2	Existing subject choices omit explicit Queue and Baselines facets.	ui/src/model/event-list.ts:20-31
F3	Activity owns its history feed; recent drawer feeds have a separate shared hook.	ui/src/state/events.ts:35-59
F4	The browser lane checks both color schemes with WCAG tags and requires color-contrast to run.	e2e/console/views.spec.ts:349-379
F5	The lane has full-response stubs to avoid ETag 304 bodies.	e2e/console/stub-answers.ts:6-13
F6	Playwright has named Chromium, Firefox and WebKit projects and a bounded test timeout.	playwright.config.ts:8-22
F7	Read-resource mapping distinguishes loading, refusal, unsupported and retained data.	ui/src/state/resource.ts:22-46
F8	API requests use a 10000ms default timeout, counted from request setup.	ui/src/data/api.ts:1-10

Modules touched

Searches: rg -n 'useEvents|eventRows|SUBJECT_CHOICES|useRecentEvents' ui/src e2e/console src/contract returned 28 matching lines at the Facts commit. Opened the source surrounding the Facts rows and the stage's model/state/screen entry points. Scope is the explicit file ownership below, not a repository-wide redesign.

• ui/src/screens/activity
• ui/src/model/event-list.ts
• ui/src/state/events.ts (Activity hook only)
• ui/src/screens/inbox
• ui/src/screens/queue
• ui/src/screens/usage
• ui/src/screens/sign-in.tsx
• ui/src/screens/sign-in.css
• ui/src/screens/not-found.tsx
• e2e/console/activity.spec.ts
• e2e/console/render-cases/activity-and-other.ts (new)
• website/src/content/docs/docs/worker/console.mdx and other described website pages, only the owned sections below.

Changed callers follow screen → state → model/data and screen → ds. The In short diagram shows those arrows. The task adds no daemon module or new module factory. DS exports are React components with plain props; new hooks reuse the existing providers.

Implement PLAN stage 6 and render 8: 230px facets card (Kind, State, Worker counts), event-rate bars above the feed, search/range in header. Use plain foundation feed/log/chart controls. Keep selected-event deep links, inspectable payload, history loading and refusal/retry semantics. Facet taxonomy is Leases, Queue, Devices, Workers, Baselines plus Other for component/unknown events; prefix matching is lease., queue., device., worker., baseline.; map legacy ?subject=component to Other, legacy unknown subject to All. Multi-checkbox selection is OR within a facet, AND between facets/search/range. Unchecked Kind/Worker means All, State Problems only matches existing warn/error tones. Counts use events in the chosen range and search, applying other facets but excluding their own facet. Workers use stable workerIdOf identity, with unknown/gateway events under an explicit Other worker option, never dropped. The selected event remains inspectable even when filters exclude its row.

Range choices use the existing shared 1h/6h/24h/7d parser; filter the held events by time, preserving honest coverage text when history has not reached that range. Keep history cursor behavior and one live feed, no second replay implementation. The chart counts the range-filtered feed in minute buckets; scroll-back may enrich coverage but never fabricate missing buckets as observed counts. Export the shared recent feed hook unchanged; stages 3/4 use it concurrently.

Re-skin Inbox, Queue, Usage, sign-in and not found using stage-0 components without changing their structures or action/session/refresh semantics. Give each a separate render case and both-theme screenshot, despite no reference image. Keep no-render structural assertions in their existing browser tests. Stage 3 owns LeaseDrawer internals even when Inbox uses it; stage 6 does not copy or edit that component.

Contract and event changes

None. Search: rg -n 'baselineEntrySchema|requesterIdSchema|stream|baseline.save' src/contract src/http and the stage symbol search above. No daemon wire shape, operation, input socket or business event is added. Reuse existing route paths and validation; no protocol bump. The parent Baselines amendment uses only ready/stale list data and a documentation link; no baseline-saving workflow or progress field is added.

Other code on the same state

Searches: rg -n 'subject|query|streamEvent|useRecentEvents' ui/src e2e/console returned 223 matching lines at the Facts commit. Existing readers/writers are the route-query cache and live invalidation in state/live.tsx and state/queries.ts, session/API connection classification, state/actions.ts per-item in-flight guard, state/router.ts navigation and shared recent feed in state/events.ts. New presentation consumes these owners, never replaces their persistence, timers or duplicate-write rules.

Component or parallel stage	Interaction and winner
Live events and polling	Query/cache remains authoritative; server facts update the view, never fixture or screenshot values in production. Renewal changes use the existing renewal path.
Row, inspector, Inbox and search actions	One state/actions runner shares the item key; the first active action wins, later clicks stay disabled until completion. No screen sends its own write.
Browser history, page selection and disappearance	URL and latest loaded server identity decide selection; missing subject renders the existing missing/refused state, with no stale action target.
Shared recent feed and Activity	Existing recent feed owns drawer/inspector subscriptions; Activity owns its own feed, and stage 6 changes only its hook body. Navigation releases the consumer.
Stages 0–7	Parent Shared values is the ownership contract. Stage 0 APIs are frozen at reviewed baseline; stages 1–6 use disjoint page files/hunks/cases/docs sections; stage 7 integrates serially. A necessary shared API change goes back to the foundation owner and is merged forward before consumers continue.
External device/settings drafts and Screens PR	Parent Shared values and Tasks schedule redesign first on the current committed baseline. Redesign owns overlapping DevicesTab/actions, Warm pool and DeviceDrawer hunks throughout this feature; external drafts adapt afterward through normal merge-forward resolution. Stage 4 rechecks actual Screens PR merge-base/head and preserves compatible capture APIs; foundation changes only its owned shell docs. No external task is a prerequisite, claimed, edited or imported.

Failure modes

Call	Outcome	What happens	Limit, counted from
Existing route query → API	ok, 200/304	Render mapped data; 304 retains cached identity. Visual/functional Tests below cover the changed presentation.	Existing default 10000ms from request setup; no new wait
Same	error reply / malformed reply	Existing LoadView refusal/unsupported or cached data plus refusal is rendered; no success counts fabricated. Visual Tests include refused/unavailable data.	Same request bound
Same	absent worker/device/lease	Existing missing-subject view; clear actionable selection and avoid stale target. Functional cases below cover missing identity where applicable; shared foundation behavior is exercised by existing workers/leases specs.	After bounded request settles, no additional wait
Same	network unavailable / throws / no answer	Preserve cache and connection/session handling; do not show connection loss as a page-specific business failure. Existing queries/live/session tests own transport classification; this task adds no transport branch.	Existing API timeout from request setup
Existing action runner	ok / refused / no answer / concurrent click	Keep confirm, cancel, daemon message and shared in-flight behavior. Existing actions.spec.ts owns unchanged runner behavior; changed presentation cases below extend that seam, not duplicate it.	Existing action timeoutMs or API default from send; task adds no write

Presentation/filter/selection state is tab-local; a reload rebuilds from URL and server data. Two tabs read independently and share no new mutable store. The daemon resolves conflicting writes; UI uses the existing runner. A process restart creates no new durable partial state. Existing session/connection tests cover unchanged restart behavior; page Tests exercise remount and selection where changed.

Rules in play

• coding rule 1, “body is the spec”: implement this stage and parent shared decisions, apply the recorded pending-maintainer delivery decisions.
• delivery rules 7/14/15, “checked before it is ready” and “one stack”: independent spec/review gates, reviewed foundation baseline and merge-forward integration, no early main merge.
• documentation rule 9, “same change”: update the owned website section and every other page describing the changed behavior.
• ui/AGENTS.md Layers, “A screen never fetches”: state hooks expose view models; DS receives plain values, no screen-to-screen imports in final code.
• ADR 0011 §§1–5, “No inline script and no <style> element”: bundle assets, retain CSP provider and existing session.
• ADR 0037 §§3–5, “One list of actions per kind of item”: reuse runner, model availability, confirmation, errors and toast semantics.
• ADR 0044 §§1–3, “One query cache”: consume existing keys, clock and feed; no new independent polling.
• ADR 0045 §§1,3–6, “route names a worker and a device”: keep identity/lifetime and existing policy, view-only console.

Tests

Seam: signed-in console browser, model pure exports where explicitly named; extend e2e/console/activity.spec.ts, e2e/console/inbox.spec.ts, e2e/console/queue.spec.ts, e2e/console/usage.spec.ts, e2e/console/sign-in.spec.ts and model the screenshots on e2e/console/views.spec.ts. Do not duplicate unchanged transport or action-runner tests. Copy these parent Behaviours rows, one test per line with cases in a table.

• An operator filters Activity and sees facet counts, minute bars and matching feed rows: cases every kind including unknown, Problems only, worker id or unknown worker, multiple checks, no checks, search, 1h/6h/24h/7d and empty result.
• An operator opens Activity history or a linked event and retains the selected event and live updates: cases legacy subject links, replay duplicates, older history, partial range, unavailable history, retry, selection hidden by filters and navigation cleanup.
• An operator opens Inbox, Queue, Usage, sign-in or not found and sees the existing structure with the new controls: cases empty/populated/refused page, token rejection, proxy session, action confirmation and keyboard navigation; extend each page existing spec.
• A reviewer inspects stage 6 pages and sees the approved shape with no overflow or accessibility violations: cases 8-activity.png, 1440×900, 1280×800, 390×844, dark and light; compare each dark reference and current PNG, run both-theme axe and list data differences and only the explicit Baselines/Fleet amendments recorded in PLAN.

Done when

• Every Tests line is covered at its named seam; relevant model/unit tests and touched Chromium page specs pass. The browser lane uses faked drivers, not native hardware.
• Capture this stage's pages through pnpm test:console --project=chromium e2e/console/renders.spec.ts (page-specific --grep permitted). Compare current PNGs to 8-activity.png; inspect every non-data difference, fix/rerun until none remain except the explicit Baselines/Fleet amendments recorded in PLAN. The PR includes paired images for each reference page and lists remaining data differences; no-render pages include current images. Do not commit generated current/ or prototype/screens/.
• Check the same pages at 1440×900, 1280×800 and 390×844: no horizontal page scroll, card escape or text collision. Axe in both light and dark has no WCAG AA violations and actually evaluates color contrast. Per-page verification is required in this stage, not deferred to stage 7.
• Update website pages describing this stage in the same change. Ownership: Own Activity, Inbox, Queue, Usage and sign-in text in worker/console.mdx, corresponding gateway sections and any affected sign-in guide; preserve other stage sections. Run pnpm --dir website install && pnpm --dir website build && node website/scripts/check-openapi.mjs when the website changes.

Out of scope

Other stages' owned files/hunks; new device management, warm-target editing, Settings or multi-device Screens behavior; backend/protocol/native capture changes; new input sockets. Apply the parent delivery decisions and document the explicit Baselines amendment; preserve every other reference requirement.

Depends on

• #1426

Written by an agent.