fix(demo): one-screen desktop layout, phone flow, square board, per-tab skills

[siarheidudko]

Fixes for the demo's layout, reported on the live page. Only demo/ changes: the library and its version are untouched, so this deploys to Pages and publishes nothing.

What was wrong → what changed

• The tabs shrank as soon as the chat filled up. They are now flex: none. The sideways scroll for phones no longer lets them be squeezed.
• The chess chat didn't fit the screen. On desktop the app is now exactly one screen tall.
  • The model card folds to one line once a key is stored or a local model is loaded: "Model · Gemini 3.5 Flash · key stored ✓".
  • The model card and Agent settings, when opened, scroll inside at most half the column; the chat always keeps the rest.
  • The workspace column (board, servers, chess) scrolls on its own.
• The board jumped. The grid had only columns, so a rank with pieces was taller than an empty one.
  • Now eight equal rows and columns, and the board is square and sized to fit the screen.
  • Pieces scale from the board, not the window.
• Chess context on the MCP tab. Skills now belong to tabs:
  • chess-coach → chess, board-style → notes, precise-answers → MCP;
  • custom skills apply to every tab;
  • each agent gets only its tab's skills, and the settings list only those.
• Phone layout. One column in the page scroll, ordered per tab:
  • chess: the board, then the chat;
  • notes: the chat, then the board;
  • MCP: the servers, then the chat.
• Chess turns are one plan step without the replanner. That means fewer calls per move, and no second step that re-read the board, found White to move and "waited".

Checks

• Demo typecheck and prettier pass, the build passes, and npm run test:e2e is 12/12.
• Measured in Chromium at 1440×900, 1280×720 and 390×844 (phone):
  • the tab row is 39 px everywhere;
  • all 64 squares are equal (71 / 49 / 42 px);
  • on desktop the document is exactly the window height;
  • the MCP tab lists only precise-answers.

🤖 Generated with Claude Code

https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5

---

Generated by Claude Code