Full-width layout migration + project-view redesign reference

[TraderSamwise]

Why

Prep for the project-view redesign. The redesign target (a Linear/Cloudflare-style layout) assumes the content area spans the full window, but today every page is capped at 900–1100px via the shared Page primitive, leaving a large empty band on desktop. Before redesigning any single page, we unify the whole app onto one full-width layout so per-page facelift passes can follow.

What

1. Full-width Page migration (f9c370d)

• components/PageLayout.tsx: removed the PageWidth variants (standard 1100 / narrow 900 / full). Direct cutover — dropped the width prop and the PAGE_WIDTH_CLASS map; content now renders w-full with the same px-4 py-5 md:px-8 padding.
• Updated the only two callers passing width="narrow": settings.tsx, (dashboard)/index.tsx.
• Net effect: all 10 Page-based screens go edge-to-edge; detail/chat/service/plans screens were already full-bleed (flex-1), so they're unchanged. Pre-login auth screens keep their intentional centered forms.

2. Reference mockup (82e4125)

• docs/mockups/project-view.html — standalone HTML mockup of the upcoming project-view restyle (sidebar + full page), same information architecture. Reference target only; not wired into the app.

Verification

• yarn typecheck clean; the 3 changed files lint clean (the one remaining repo lint error is pre-existing in cli-auth.tsx, untouched here).
• Visual check on the running app — desktop (1440): dashboard cards, settings, and library two-column all fill width with no breakage. Mobile (390): shell collapses to hamburger + bottom tab bar, content fills correctly (mobile was always below the old caps, so the change is a no-op there).
• Mobile is functional, not pixel-perfect — per plan, each page still needs its own facelift pass next.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Layout Changes

  • Dashboard and Settings pages now use the Page component's default/full-width layout and updated spacing for consistent, responsive content presentation.

• Documentation

  • Added a static mockup illustrating the project/worktree view with sidebar, top bar, group/agent rows, and status/timing/action placeholders.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
app	Ready	Preview, Comment	Jun 7, 2026 8:11am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 72a6ec88-0064-4c13-984c-3fa16b60c7e2

📥 Commits

Reviewing files that changed from the base of the PR and between f9c370d and 36a2aa5.

📒 Files selected for processing (1)

• docs/mockups/project-view.html

✅ Files skipped from review due to trivial changes (1)

• docs/mockups/project-view.html

---

📝 Walkthrough

Walkthrough

Page's public API drops the width prop and always renders content in a full-width wrapper; Dashboard and Settings screens stop passing width="narrow". A new static dark-themed HTML mockup for a project/worktree view is added.

Changes

Page Layout Width Prop Removal

Layer / File(s)	Summary
Page component API simplification app/components/PageLayout.tsx	Page props removed width; the inner wrapper class changed from width-dependent logic to a fixed w-full.
Update Page usage in screens app/app/(main)/(tabs)/(dashboard)/index.tsx, app/app/(main)/(tabs)/(settings)/settings.tsx	Dashboard and Settings no longer pass width="narrow" to Page. AgentCard JSX opening tag was reformatted (no behavioral change).

Project View HTML Mockup

Layer / File(s)	Summary
Project/worktree view design mockup docs/mockups/project-view.html	New static HTML mockup with inline CSS: top bar, left sidebar with project/worktree entries, and main area with collapsible groups and agent/service rows (hardcoded content).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibbled width props down to none,
Now Page stretches wide beneath the sun.
Screens refreshed, no narrow plea,
A mockup shows what could yet be.
Hoppity hops — the UI's free!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 40.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 describes the two main changes: the full-width layout migration (removing the width prop from Page) and the addition of a project-view redesign reference mockup.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/project-view-redesign

---

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

[coderabbitai]

🧹 Nitpick comments (2)

docs/mockups/project-view.html (2)

3-5: ⚡ Quick win

Add viewport meta tag for proper mobile rendering.

The PR mentions mobile testing at 390px width, but the document lacks a viewport meta tag. Without it, mobile browsers will zoom out to fit the desktop layout rather than rendering at device width, breaking the responsive behavior.

📱 Add viewport meta tag

 <head>
 <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>aimux mock — linear recipe</title>

🤖 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 `@docs/mockups/project-view.html` around lines 3 - 5, The page is missing a
viewport meta tag which prevents accurate mobile rendering; inside the <head>
(near the existing <meta charset="utf-8" /> and <title> elements) add a viewport
meta tag (e.g., name="viewport" content="width=device-width, initial-scale=1")
so the layout will render at device width for mobile testing at 390px and
respect responsive styles.

---

102-106: 💤 Low value

Consider adding accessibility attributes as a reference pattern.

Interactive elements use div with cursor:pointer but lack semantic button roles or keyboard accessibility. Since this is a reference mockup that may inform the actual implementation, adding role="button" and tabindex="0" to interactive elements, plus aria-label attributes for status dots and chevrons, would demonstrate accessible patterns.

♿ Example accessibility enhancements

-        <div class="sgrp"><span class="chev">▾</span><span class="dot run"></span><span class="nm">Main Checkout</span><span class="br">master</span></div>
+        <div class="sgrp" role="button" tabindex="0" aria-expanded="true"><span class="chev" aria-hidden="true">▾</span><span class="dot run" aria-label="Running"></span><span class="nm">Main Checkout</span><span class="br">master</span></div>
-        <div class="schild sel"><span class="dot run"></span><span class="nm">codex-poymed</span><span class="m">codex</span></div>
+        <div class="schild sel" role="button" tabindex="0"><span class="dot run" aria-label="Running"></span><span class="nm">codex-poymed</span><span class="m">codex</span></div>

🤖 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 `@docs/mockups/project-view.html` around lines 102 - 106, The interactive
mockup uses non-semantic clickable blocks like the divs with class "sgrp" and
"schild" and decorative spans "chev", "dot", and action span "a"; update those
elements to include accessibility attributes: add role="button" and tabindex="0"
to the interactive divs (sgrp/schild), and add descriptive aria-label attributes
to the chevron (span.chev), status dot (span.dot with run/off), and action span
(span.a) so assistive tech can convey purpose; ensure the interactive container
and actionable spans have consistent labels (e.g., "Expand branch", "Status:
running", "Delete checkout") to serve as a reference pattern for implementation.

🤖 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.

Nitpick comments:
In `@docs/mockups/project-view.html`:
- Around line 3-5: The page is missing a viewport meta tag which prevents
accurate mobile rendering; inside the <head> (near the existing <meta
charset="utf-8" /> and <title> elements) add a viewport meta tag (e.g.,
name="viewport" content="width=device-width, initial-scale=1") so the layout
will render at device width for mobile testing at 390px and respect responsive
styles.
- Around line 102-106: The interactive mockup uses non-semantic clickable blocks
like the divs with class "sgrp" and "schild" and decorative spans "chev", "dot",
and action span "a"; update those elements to include accessibility attributes:
add role="button" and tabindex="0" to the interactive divs (sgrp/schild), and
add descriptive aria-label attributes to the chevron (span.chev), status dot
(span.dot with run/off), and action span (span.a) so assistive tech can convey
purpose; ensure the interactive container and actionable spans have consistent
labels (e.g., "Expand branch", "Status: running", "Delete checkout") to serve as
a reference pattern for implementation.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e8c65b75-5185-48fc-bade-330496fc2975

📥 Commits

Reviewing files that changed from the base of the PR and between cd8d6ac and f9c370d.

📒 Files selected for processing (4)

• app/app/(main)/(tabs)/(dashboard)/index.tsx
• app/app/(main)/(tabs)/(settings)/settings.tsx
• app/components/PageLayout.tsx
• docs/mockups/project-view.html

[TraderSamwise]

@coderabbitai addressed your two nitpicks on docs/mockups/project-view.html:

1. Viewport meta tag — Fixed in 36a2aa5. Added <meta name="viewport" content="width=device-width, initial-scale=1.0" />.
2. Accessibility attributes (role/tabindex/aria-label) — Intentionally skipped. This file is a throwaway static visual reference for a restyle, not shipped UI. The real surface is React Native (ProjectSidebar.tsx + the dashboard screen), where Pressable/accessibility props live; adding ARIA to the HTML mock wouldn't carry over and would just add noise. Accessibility will be handled in the actual component implementation.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@TraderSamwise: Thanks for the follow-up!

1. Viewport meta tag — Confirmed, the fix in 36a2aa5 looks good.
2. Accessibility attributes — That's a fair call. A static HTML visual reference doesn't need to mirror the ARIA/accessibility props that will live on the React Native Pressable/AccessibilityInfo layer, and keeping the mockup lean makes sense. Noted that the real accessibility work will land in ProjectSidebar.tsx and the dashboard screen when those components are built.

Both items considered addressed. ✅

(ᵔᴥᵔ)