feat(header): move mobile reports into the More menu and compact the header by chriswritescode-dev · Pull Request #444 · chriswritescode-dev/opencode-manager

chriswritescode-dev · 2026-10-18T23:27:09Z

Summary

Mobile session headers carried a separate reports icon plus the full token-and-percentage context text, crowding the actions area. Reports now live behind the existing three-dots button, and context usage is percentage-only on mobile.

The reports bell is desktop-only; the desktop dropdown is unchanged.
The session three-dots button shows the unread report count (destructive when a run failed, capped at 9+) and announces it in its accessible label.
Opening the More drawer shows unread reports at the top, with mark-all-read, run rows, and an All runs link.
Context usage renders 42% below 768px and 12,345 (42%) above it. The token count still renders when no context limit is known.

Implementation notes

ScheduleReportsBadge is shared by the bell and the three-dots button.
ScheduleReportsList is exported and gained maxHeightClass, so the drawer list scrolls with the drawer instead of an inner scrollbar.
No backend or API changes.

Validation

vitest run focused suites: 29 passed.
vitest run full frontend: 247 files / 2951 passed.
ESLint on changed files: clean.
tsc -b --noEmit: clean.

Summary by CodeRabbit

New Features
- Unread scheduled reports now appear in the More menu, where you can mark all as read.
- The More button shows an unread-count badge, including a failure indicator when reports have failed. The notification bell displays report counts in a dropdown on larger screens.
Improvements
- Context usage displays the percentage on mobile when available, while other screen sizes show both the token count and percentage.

…header

coderabbitai · 2026-10-18T23:27:53Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI
Review profile: CHILL
Plan: Essentials
Run ID: 493cbb46-1071-4bc0-ad0c-82568010a924

📥 Commits

Reviewing files that changed from the base of the PR and between 7f5c242 and db40b71.

📒 Files selected for processing: 9

frontend/src/components/navigation/MoreDrawer.test.tsx
frontend/src/components/navigation/MoreDrawer.tsx
frontend/src/components/navigation/SessionMoreButton.test.tsx
frontend/src/components/navigation/SessionMoreButton.tsx
frontend/src/components/notifications/ScheduleReportsBadge.tsx
frontend/src/components/notifications/ScheduleReportsBell.test.tsx
frontend/src/components/notifications/ScheduleReportsBell.tsx
frontend/src/components/session/ContextUsageIndicator.test.tsx
frontend/src/components/session/ContextUsageIndicator.tsx

Included review availability: This review used your included allowance. Your plan provides up to 5 included reviews per hour; 1 remain after this review.

📝 Walkthrough

The pull request adds unread schedule-run counts and report actions to navigation, updates the schedule-report bell presentation, and adapts context-usage text for mobile screens.

Changes: Schedule report notifications

Layer / File(s)	Summary
Shared badge and bell presentation `frontend/src/components/notifications/ScheduleReportsBadge.tsx`, `frontend/src/components/notifications/ScheduleReportsBell.tsx`, `frontend/src/components/notifications/ScheduleReportsBell.test.tsx`	The bell uses a shared badge that caps displayed counts at `9+` and uses destructive styling when failures are present. `ScheduleReportsList` is exported with a configurable maximum height. The bell uses a dropdown trigger that is hidden below the medium breakpoint.
Navigation schedule reports `frontend/src/components/navigation/MoreDrawer.tsx`, `frontend/src/components/navigation/MoreDrawer.test.tsx`, `frontend/src/components/navigation/SessionMoreButton.tsx`, `frontend/src/components/navigation/SessionMoreButton.test.tsx`	`MoreDrawer` displays unread reports and provides a mark-all-viewed action. `SessionMoreButton` displays unread and failed counts and includes a positive unread total in its accessible label.

Context usage indicator

Layer / File(s)	Summary
Responsive context-usage text `frontend/src/components/session/ContextUsageIndicator.tsx`, `frontend/src/components/session/ContextUsageIndicator.test.tsx`	The indicator shows the percentage on mobile when available, token count when the percentage is unavailable, and token count with percentage on other devices. Tests cover these display cases.

Priority: ➖ Normal

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant MoreDrawer
  participant ScheduleReportsList
  participant MarkAllViewedMutation
  MoreDrawer->>ScheduleReportsList: Pass unread runs, total, and mark-all-viewed callback
  ScheduleReportsList->>MoreDrawer: Invoke callback when Mark all read is clicked
  MoreDrawer->>MarkAllViewedMutation: Mark all runs viewed

Merge Risk: ⚪ Minimal · up to db40b

The mobile reports and context-usage changes are ready to merge after normal checks.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 9 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly summarizes the main change: moving mobile reports into the More menu and compacting the header.
Description check		The description provides a detailed summary, implementation notes, validation results, and relevant behavior changes. It omits the template's Type of Change and Checklist sections, but the core inform…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description provides a detailed summary, implementation notes, validation results, and relevant behavior changes. It omits the template's Type of Change and Checklist sections, but the core information is complete.

Fix all pre-merge checks with AI

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

feat(header): move mobile reports into the More menu and compact the …

db40b71

…header

chriswritescode-dev merged commit c7a374a into main Oct 19, 2026
2 checks passed

Navigation Menu

Repository navigation

feat(header): move mobile reports into the More menu and compact the header - #444

feat(header): move mobile reports into the More menu and compact the header#444
chriswritescode-dev merged 1 commit into
mainfrom
fix/mobile-header-notifications

chriswritescode-dev commented Oct 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading

Sequence Diagram(s)

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

chriswritescode-dev commented Oct 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Implementation notes

Validation

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sequence Diagram(s)

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

chriswritescode-dev commented Oct 18, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading