Vibe step 2a: chat, code and live preview side by side, hideable code, phone tabs

[AVADSA25]

What

Vibe step 2a from docs/VIBE-PROJECTS-DESIGN.md. The part you can see; nothing here runs a program.

• Wide screen: chat | code (file tabs, line numbers) | live preview. A Hide code / Show code button gives the room to the preview (remembered). The preview pane is open from the start with an empty-state line, and has its own refresh, inspect and close buttons.
• Phone: one pane at a time from three tabs, Chat | Preview | Code; the Preview tab gets a dot when it changed while another tab was open. An AI change does not pull the phone away from the chat.
• The preview follows the files: after an AI change, an undo, a restore, an opened project and about 1.5 s after typing stops. Silent when there is no page; back to the empty state when every page was undone.
• Fix found while testing: an editor that cannot be seen (code hidden, phone on another tab) was scrolled to its end by the AI typing; it now stays put and is laid out again when shown.

Step 2b (localhost preview server and Run project, Mac only) follows in its own PR; the design doc is updated with how the command is confirmed.

Checked

• 5 new page tests; every test file that reads the Vibe page, routes or shared assets passes; ruff check . clean.
• Browser, fake AI stream, scratch folders at 1280 and 412 px: two-file reply, hand edit refreshing the preview, Hide code surviving a reload, opening a saved project, undo back to the empty state, three phone tabs with the dot, no sideways scroll. Two real bugs found and fixed there.
• Projects switched off (or an older server answering 404): the page falls back to single-file Vibe, checked in the browser.
• Not done: nothing tried on a real phone.

Rollback

Revert this PR. No data, config or API change.

🤖 Generated with Claude Code