feat(stage): float panes as cards on a 4px gutter

[mxrsv]

Panes take a 4px gutter on every stage edge and between each other, a 6px corner and a 1px --seam-split border, so the work area reads as cards on the chrome the rail already paints instead of one ruled sheet.

• The split line goes: the divider element is the gap now and paints only its hover accent, at full --accent so it matches the sidebar grip.
• The document surface, the browser tab and the Agent Board take the same gutter and corner, so handing the stage over does not change the rectangle. The browser's corners stay square — its content is a native view the host paints over .browser-panel__view.
• Reverses the full-bleed grid of 2026-08-17. Ledger: DL-18.12 (new), DL-2.3, DL-18.9, DL-20.1.

Known gap before merging: DL-18.9's grip clause here describes the sidebar-side half of this change — the grip lighting the whole gutter and the shell's vertical hairline going away. That code lives in 02-shell.css on the local branch only (commit 7d84892, a concurrent session sharing the checkout), so it is not in this PR.

Verification: none run. npm test is already red on the local HEAD independently of this change; no gate was run for this branch.

https://claude.ai/code/session_01TPUA1o1Bc7wD6ZrqkXJDeA

Summary by CodeRabbit

• UI Updates
  • Updated the stage layout with rounded pane and document cards separated by a 4px gutter.
  • Replaced the full-bleed pane divider with card edges and a wider draggable gutter.
  • Updated pane and document surfaces with consistent corner rounding and borders.
  • Enhanced divider hover and drag states with the full accent color.
• Documentation
  • Updated the design language guidance to reflect the new card-and-gutter layout.

[vercel]

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

Project	Deployment	Actions	Updated
spacevibe-deck	Ready	Preview	Sep 18, 2026 5:17pm UTC

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 770e0be4-d25d-44b0-a2a3-3d0591bb09f7

📥 Commits

Reviewing files that changed from the base of the PR and between 623aa2d and e54b0de.

📒 Files selected for processing (3)

• docs/DESIGN-LANGUAGE.md
• src/styles/06-stage-panes.css
• src/styles/19-agent-board.css

 ________________________________________________________________
< This is the kind of code that makes on-call believe in ghosts. >
 ----------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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