Skip to content

panel: P6.2 live ops — monitor phone layout, staleness vocabulary, tab-bar attention dot - #108

Merged
thevladbog merged 12 commits into
mainfrom
feature/panel-p6.2-live-ops
Jul 23, 2026
Merged

panel: P6.2 live ops — monitor phone layout, staleness vocabulary, tab-bar attention dot#108
thevladbog merged 12 commits into
mainfrom
feature/panel-p6.2-live-ops

Conversation

@thevladbog

@thevladbog thevladbog commented Jul 23, 2026

Copy link
Copy Markdown
Owner

Summary

Second phase of the P6 mobile companion (spec §6, plan, design boards Idento Panel Mobile.dc.html 8d/8f/8p): the live monitor becomes a first-class phone surface with an honest staleness vocabulary, plus a promised PR #106 follow-up. Zero backend/OpenAPI changes.

  • STEP_LABEL_KEYS → shared/lib: promised follow-up from PR panel: P6.1 mobile companion foundations — bottom TabBar nav, Tier-3 gates, phone shell #106's review — the readiness label vocabulary moved out of the home feature into a cross-cutting module, unblocking the workspace-to-home dependency CodeRabbit flagged.
  • Staleness vocabulary (board 8p): the monitor body dims to 60% opacity whenever the SSE stream isn't live (verified via computed style, not just class presence); the "Updated Ns ago" counter turns amber with a clock icon; a polite aria-live region announces the current stream state — explicitly silent during the transient "connecting" state on every page load, never falsely claiming a stream error.
  • Monitor phone header + typography (board 8f): compact truncating header, Exit button hidden below md (the tab bar owns phone nav), XXL glanceable totals number, rate/peak/est stats as a spread row.
  • TabBar Monitor attention dot (board 8a): the workspace tab bar's Monitor tab lights up when the cached snapshot reports a stale station — strictly cache-only (enabled: false), the tab bar never triggers monitor network traffic itself. Uses the existing sr-only badge API from P6.1.
  • LiveStrip phone polish (board 8d): larger headline number and full-width progress bar on phone, reverting to desktop sizing at md.

Verification

  • Full gates green: packages/ui 335/335; panel 1536/1536; typecheck; lint (via rtk proxy); build.
  • Per-task spec+quality reviews on all 5 tasks (2 needed a fix round — a false "tests pass" claim that skipped typecheck, and a monitor announcer bug conflating "connecting" with "error", both caught by reviewers and fixed) + final whole-branch review: 0 Critical / 0 Important.
  • Live degraded-stream walk against a real stack (docker db + Go backend, seeded): confirmed board 8f/8p in both light and dark themes; killed the backend process and confirmed the Reconnecting badge, 60%-dimmed body (verified via getComputedStyle), amber counter, and live-region announcement all appear correctly; confirmed full recovery on restart; confirmed the Monitor tab's attention dot lights end-to-end from a genuinely stale seeded station.

Follow-ups (queued for P6.3 first commit)

  • A regression test asserting the tab-bar dot's enabled: false never fires a fetch (currently verified by manual/reviewer inspection of the underlying query-client mechanism, not a dedicated test).
  • Consider clamping the attention dot's "now" to the cache's dataUpdatedAt so it reflects real station staleness rather than time-since-last-visited-monitor.
  • MonitorPage's eventQuery doesn't get the same retain-last-known-good/SSE-revival treatment as snapshotQuery — noted from the live walk, pre-existing from an earlier phase, not introduced by this branch.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Monitor content now dims during reconnecting or degraded streams and shows a clock indicator with an updated-ago status.
    • Added accessible live announcements for stream status changes.
    • The Monitor tab displays an attention indicator when cached station data is stale.
    • Improved phone layouts for monitor totals, headers, progress bars, and check-in counts.
  • Bug Fixes

    • Improved responsive visibility and typography across monitoring views.
    • Added English and Russian labels for monitor attention states.

Copilot AI review requested due to automatic review settings July 23, 2026 10:54

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions github-actions Bot added documentation Improvements or additions to documentation panel labels Jul 23, 2026
@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@thevladbog, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 30 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 493275fc-29e4-4e24-8685-3f96e64b3a1b

📥 Commits

Reviewing files that changed from the base of the PR and between c095b59 and f7467f2.

📒 Files selected for processing (3)
  • .superpowers/sdd/progress.md
  • panel/src/features/workspace/EventTabBar.test.tsx
  • panel/src/features/workspace/EventTabBar.tsx
📝 Walkthrough

Walkthrough

P6.2 centralizes readiness labels, adds responsive monitor stream-state and totals UI, introduces cached station-staleness attention badges, and polishes LiveStrip phone styling. Tests and progress documentation cover the new behavior and verification steps.

Changes

Live Ops interface

Layer / File(s) Summary
Shared readiness labels
panel/src/shared/lib/readinessLabels.ts, panel/src/features/home/ReadinessCell.tsx, panel/src/features/workspace/*, docs/superpowers/plans/...
STEP_LABEL_KEYS moves to shared code and is imported by home and workspace readiness components.
Monitor stream and phone layout
panel/src/features/monitor/MonitorPage.tsx, panel/src/features/monitor/MonitorPage.test.tsx, panel/src/features/monitor/TotalsCard.tsx, panel/src/features/monitor/TotalsCard.test.tsx, docs/superpowers/plans/...
Monitor content dims while not live, announces stream states accessibly, displays degraded staleness styling, hides Exit on phones, and updates totals typography and rate-row markup.
Cached monitor attention badge
panel/src/features/workspace/EventTabBar.tsx, panel/src/features/workspace/EventTabBar.test.tsx, panel/src/shared/i18n/*.json, docs/superpowers/plans/...
The Monitor tab derives an attention badge only from cached snapshots containing stale stations, with localized screen-reader text and coverage for cached and absent data.
LiveStrip phone polish and verification
panel/src/features/home/LiveStrip.tsx, .superpowers/sdd/progress.md, docs/superpowers/plans/...
LiveStrip typography and progress width become responsive, while the plan and progress ledger record verification and completion status.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant MonitorStream
  participant MonitorPage
  participant MonitorBody
  participant StreamAnnouncer
  MonitorStream->>MonitorPage: stream status update
  MonitorPage->>MonitorBody: apply live or degraded opacity
  MonitorPage->>StreamAnnouncer: publish polite status announcement
Loading
sequenceDiagram
  participant EventTabBar
  participant MonitorSnapshotCache
  participant stationStaleness
  participant MonitorTab
  EventTabBar->>MonitorSnapshotCache: read cached snapshot
  EventTabBar->>stationStaleness: evaluate station timestamps
  stationStaleness-->>EventTabBar: stale station result
  EventTabBar->>MonitorTab: render or omit attention badge
Loading

Possibly related PRs

  • thevladbog/idento#59: Provides the cn utility used by the updated MonitorPage.
  • thevladbog/idento#64: Earlier changes to the readiness label mapping continued here through shared-module extraction.
  • thevladbog/idento#106: Earlier EventTabBar work is extended with cached monitor staleness attention logic.

Suggested labels: documentation, panel, shared-ui

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main PR themes: monitor phone layout, staleness wording, and the tab-bar attention dot.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/panel-p6.2-live-ops

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
panel/src/features/workspace/EventTabBar.tsx (1)

7-8: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider moving stationStaleness/STATION_STALE_MS to shared/lib.

EventTabBar (workspace feature) reaches into ../monitor/liveness for cross-cutting staleness logic. This is the same cohesion issue this very PR already fixed for STEP_LABEL_KEYS (moved to shared/lib "as a follow-up to PR #106" per the plan). Since staleness detection is now consumed by two features (monitor + workspace), it fits the shared-lib precedent better than living under features/monitor.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@panel/src/features/workspace/EventTabBar.tsx` around lines 7 - 8, Move the
shared staleness symbols `stationStaleness` and `STATION_STALE_MS` from the
monitor feature’s `liveness` module into `shared/lib`, then update both monitor
and `EventTabBar` imports to use the new shared location while preserving their
existing behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/superpowers/plans/2026-07-23-panel-p6.2-live-ops.md`:
- Around line 377-389: The cache-only EventTabBar staleness indicator must
re-evaluate when STATION_STALE_MS elapses, without enabling network fetching.
Add a local timeout/state tick scheduled for the next station staleness
deadline, use that tick when computing Date.now() and hasStaleStation, and clean
up the timer appropriately; add a test that advances Date.now() while keeping
the cached snapshot unchanged and verifies the attention dot appears.

---

Nitpick comments:
In `@panel/src/features/workspace/EventTabBar.tsx`:
- Around line 7-8: Move the shared staleness symbols `stationStaleness` and
`STATION_STALE_MS` from the monitor feature’s `liveness` module into
`shared/lib`, then update both monitor and `EventTabBar` imports to use the new
shared location while preserving their existing behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4dc5090a-4c84-48bb-8069-fc4228f651b5

📥 Commits

Reviewing files that changed from the base of the PR and between 1e62b86 and c095b59.

📒 Files selected for processing (16)
  • .superpowers/sdd/progress.md
  • docs/superpowers/plans/2026-07-23-panel-p6.2-live-ops.md
  • panel/src/features/home/LiveStrip.tsx
  • panel/src/features/home/ReadinessCell.tsx
  • panel/src/features/monitor/MonitorPage.test.tsx
  • panel/src/features/monitor/MonitorPage.tsx
  • panel/src/features/monitor/TotalsCard.test.tsx
  • panel/src/features/monitor/TotalsCard.tsx
  • panel/src/features/workspace/EventTabBar.test.tsx
  • panel/src/features/workspace/EventTabBar.tsx
  • panel/src/features/workspace/ReadinessStrip.tsx
  • panel/src/features/workspace/WorkspaceOverview.tsx
  • panel/src/features/workspace/WorkspaceRail.tsx
  • panel/src/shared/i18n/en.json
  • panel/src/shared/i18n/ru.json
  • panel/src/shared/lib/readinessLabels.ts

Comment thread docs/superpowers/plans/2026-07-23-panel-p6.2-live-ops.md
CI Bot added 2 commits July 23, 2026 14:22
…ft lights it (PR #108 review)

The cache-only Monitor-tab dot only recomputed Date.now() at render time, so a
station could cross STATION_STALE_MS with no cache update and no other
re-render — the dot would stay off indefinitely on a page like Overview where
nothing else triggers a re-render. Added a 10s local recheck tick (no network,
enabled:false untouched) and a regression test that advances fake time past
the staleness threshold with the cache held fixed.
@thevladbog
thevladbog merged commit a6f369e into main Jul 23, 2026
34 checks passed
@thevladbog
thevladbog deleted the feature/panel-p6.2-live-ops branch July 23, 2026 11:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation panel

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants