panel: P6.1 mobile companion foundations — bottom TabBar nav, Tier-3 gates, phone shell - #106
Conversation
…oards 8a/8n, P6.1 T6)
…s, viewport-fit=cover (P6.1 T7)
…sion tag, truncating org name (P6.1 T10 walk finding)
github-actions
Bot
added
documentation
|
Warning Review limit reached
Next review available in: 50 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (15)
📝 WalkthroughWalkthroughAdds the Panel P6.1 mobile foundation: responsive layouts, phone workspace navigation, desktop-only route gates, safe-area support, mobile readiness UI, localization, tests, and implementation documentation. ChangesPanel mobile foundations
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant PanelRoute
participant DesktopOnly
participant DesktopOnlyGate
participant Navigator
PanelRoute->>DesktopOnly: render routed page
DesktopOnly->>DesktopOnlyGate: render gate below md
DesktopOnlyGate->>Navigator: copy current deep link or navigate back
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (2)
panel/src/features/workspace/ReadinessStrip.tsx (1)
4-4: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAvoid a workspace-to-home feature dependency.
ReadinessStripis a workspace feature but importsSTEP_LABEL_KEYSfromfeatures/home/ReadinessCell. Move this shared readiness vocabulary to a cross-cutting module so workspace changes do not depend on the Home feature implementation.As per coding guidelines, cross-cutting code belongs in
src/shared, while screen-level features remain isolated.🤖 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/ReadinessStrip.tsx` at line 4, Move the shared STEP_LABEL_KEYS vocabulary out of features/home/ReadinessCell into an appropriate src/shared module, update ReadinessCell and workspace ReadinessStrip to import it from there, and remove the workspace-to-home dependency while preserving existing behavior.Source: Coding guidelines
panel/src/features/workspace/ReadinessStrip.test.tsx (1)
5-9: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep the readiness fixture type-checked.
as neverbypasses validation ofkey,status, andcount, so fixture typos can compile unnoticed. Import the generatedReadinessSteptype and annotate the fixture asReadinessStep[]instead.🤖 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/ReadinessStrip.test.tsx` around lines 5 - 9, Replace the unchecked `as never` assertion on the `STEPS` fixture with the generated `ReadinessStep[]` type, importing `ReadinessStep` from its existing source. Keep the fixture values unchanged while ensuring `key`, `status`, and optional `count` are validated by TypeScript.
🤖 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 `@packages/ui/src/components/desktop-only-gate.tsx`:
- Around line 50-55: Update the desktop-only gate’s clipboard handler to await
navigator.clipboard.writeText, catch rejected or unavailable writes, set copied
state only after success, and receive localized failure feedback through props.
In packages/ui/src/components/desktop-only-gate.test.tsx lines 38-46, add a
rejected-write test verifying no success announcement and the provided failure
feedback. Update the pseudocode in
docs/superpowers/plans/2026-07-22-panel-p6.1-mobile-foundations.md lines 438-443
to reflect the awaited failure handling.
In `@packages/ui/src/components/sheet.tsx`:
- Around line 18-19: Update the SheetContent close control sizing so the
bottom-sheet variant uses size-11 when side === "bottom", while retaining size-6
for all other sheet sides.
In `@packages/ui/src/components/tab-bar.tsx`:
- Around line 49-55: Update the tab bar component’s badge API to require a
localized badgeLabel, then expose that label to assistive technologies and as a
visible non-color indicator alongside the warning dot. Remove aria-hidden from
the badge presentation and preserve the existing color styling while ensuring
the attention state is communicated through icon/text and color.
In `@panel/src/app/shell/AppShell.tsx`:
- Line 29: Update the version tag span in AppShell to use the md breakpoint
instead of sm, keeping it hidden below 768px and inline only when the desktop
header layout begins.
In `@panel/src/features/workspace/EventTabBar.tsx`:
- Around line 74-76: Add aria-expanded={moreOpen} to the button controlling the
More sheet in EventTabBar, preserving the existing click behavior and TabBarItem
rendering.
In `@panel/src/features/workspace/ReadinessStrip.tsx`:
- Around line 36-39: Update the icon rendering in ReadinessStrip’s step status
display so skipped steps use a distinct icon such as MinusCircle, while
completed steps continue using Check and not_done steps continue using Circle.
Preserve the existing labels, count rendering, and statusText accessibility
content.
In `@panel/src/features/workspace/WorkspaceOverview.tsx`:
- Line 70: Update the error branch in WorkspaceOverview’s readiness rendering to
require both readiness.isError and the absence of readiness.data before
replacing the “What’s next” card. Preserve cached readiness content during
background refetch failures while still showing the error state when no data is
available.
---
Nitpick comments:
In `@panel/src/features/workspace/ReadinessStrip.test.tsx`:
- Around line 5-9: Replace the unchecked `as never` assertion on the `STEPS`
fixture with the generated `ReadinessStep[]` type, importing `ReadinessStep`
from its existing source. Keep the fixture values unchanged while ensuring
`key`, `status`, and optional `count` are validated by TypeScript.
In `@panel/src/features/workspace/ReadinessStrip.tsx`:
- Line 4: Move the shared STEP_LABEL_KEYS vocabulary out of
features/home/ReadinessCell into an appropriate src/shared module, update
ReadinessCell and workspace ReadinessStrip to import it from there, and remove
the workspace-to-home dependency while preserving 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: 96691664-51b7-47ed-8ce8-6e723c44f4c1
📒 Files selected for processing (32)
.superpowers/sdd/progress.mddocs/design-briefs/customer-web-panel-mobile.mddocs/superpowers/plans/2026-07-22-panel-p6.1-mobile-foundations.mddocs/superpowers/specs/2026-07-20-panel-p6-mobile-companion-design.mdpackages/ui/src/components/desktop-only-gate.test.tsxpackages/ui/src/components/desktop-only-gate.tsxpackages/ui/src/components/sheet.tsxpackages/ui/src/components/tab-bar.test.tsxpackages/ui/src/components/tab-bar.tsxpackages/ui/src/index.tspanel/AGENTS.mdpanel/index.htmlpanel/src/app/router.tsxpanel/src/app/shell/AppShell.tsxpanel/src/app/shell/OrgSwitcher.tsxpanel/src/features/home/HomePage.tsxpanel/src/features/monitor/MonitorPage.tsxpanel/src/features/workspace/EventTabBar.test.tsxpanel/src/features/workspace/EventTabBar.tsxpanel/src/features/workspace/EventWorkspaceLayout.test.tsxpanel/src/features/workspace/EventWorkspaceLayout.tsxpanel/src/features/workspace/MoreSheet.tsxpanel/src/features/workspace/ReadinessStrip.test.tsxpanel/src/features/workspace/ReadinessStrip.tsxpanel/src/features/workspace/WorkspaceOverview.tsxpanel/src/features/workspace/WorkspaceRail.tsxpanel/src/shared/hooks/useIsMobile.test.tspanel/src/shared/hooks/useIsMobile.tspanel/src/shared/i18n/en.jsonpanel/src/shared/i18n/ru.jsonpanel/src/shared/ui/DesktopOnly.test.tsxpanel/src/shared/ui/DesktopOnly.tsx
…bottom-sheet close, sr-only badge label, md version-tag cutoff, aria-expanded, MinusCircle skipped, retain cached readiness
|
Nitpicks: the |
…bile-foundations # Conflicts: # .superpowers/sdd/progress.md
…b-bar attention dot (#108) * docs: P6.2 live-ops plan * panel: move STEP_LABEL_KEYS to shared/lib (PR #106 follow-up, P6.2 T1) * panel: remove dead ReadinessStep type alias left by STEP_LABEL_KEYS move (P6.2 T1 fix) * panel: monitor staleness vocabulary — dim stale body, amber counter, live-region announcer (board 8p, P6.2 T2) * panel: monitor announcer stays silent while connecting instead of falsely claiming stream error (P6.2 T2 fix) * panel: monitor phone header + XXL totals typography (board 8f, P6.2 T3) * panel: Monitor tab attention dot from cached station staleness (board 8a, P6.2 T4) * panel: LiveStrip phone polish (board 8d, P6.2 T5 code) * panel: P6.2 ledger entry (live ops complete) * panel: P6.2 final review record (ready to merge) * panel: recheck the tab-bar attention dot on a timer so pure clock drift 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. * panel: ledger — PR #108 review round 1 resolved --------- Co-authored-by: CI Bot <ci@example.com>
Summary
First phase of the P6 mobile companion (spec, plan, design boards `Idento Panel Mobile.dc.html` 8a–8t): every panel route is now honest at phone width — adapted or gated, zero horizontal scrolling at 390px. Same SPA, same URLs, render-time adaptation only; zero backend/OpenAPI changes.
Verification
Follow-ups (queued for P6.2 first commit)
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes
Tests