gallery: the whole app on one page, one window and one live stage (app.html)

Merged
TE
2d ago
+840-2

Leo-ask: ask-75d3bcdeff

I want the mock web view of the app to be legit like "oh we can see the whole unified piece and it doesn't lag the f***ing computer/browser when I open it" and stuff

What changes

A new gallery page, app.html ("Whole app" in the shell header; /gallery/app.html on the live gallery and in the static build):

  • The whole window. One cmux window at its real size (MacBook Pro 14" by default; Air 13", 16:9 and 27" in the picker): the sidebar (window controls, the scene's chats as rows with their status dots, the scene's chat selected), a tab strip on each pane, a terminal in the other pane, and the live agent pane in its pane at exactly the size the app gives it (window.ts geometry from MetricTunables.swift, per density). One transform scales the finished window to the browser, so nothing reflows.
  • No lag on open. The shell starts every entry file's load when it opens (425 *.gallery.ts(x) files, about 2,300 modules, see test/support/galleryFrame.ts), and the browse view mounts up to 24 live stages. This page imports one entry file (scenes/AppWindow.gallery.ts) and mounts one stage, pinned to that file with entryPath and source. The chrome around it is static DOM on the app's --cmux-* tokens: no filters, blur or animation.
  • Scene (the five app.window scenes: New Tab, chat with Session Info, model menu, effort menu, environment picker), window size, panes (one, two, agent at the right), appearance and density are in the query, so a link reopens the same window. Every scene stays live to click, as in #29073.

The existing window mode, browse view and shell behave as before. The shell gains one header link.

Design note: #29073's window mode left the sidebar and tab strip undrawn ("no fake Swift UI parts", Lawrence 2026-10-07). Leo now asks to see "the whole unified piece", so this page draws them. They are drawn only on this page, from the same metrics and theme tokens, and the stage itself is unchanged.

Tests

  • test/gallery-app-model.test.ts: the scene's chat is the one selected row and the live pane's tab. New Tab selects no row. Pane frames equal windowGeometry's, so the live pane is the size window mode renders. Passed locally (3 pass).
  • test/gallery-app-browser.test.ts (real Chromium on the gallery dev server): sidebar rows, two panes, one iframe, the real agent pane renders in it, only src/gallery/scenes/AppWindow.gallery.ts is requested of the gallery entry files, and the controls update the window and query in place. Run with cmux-ci test at the head; the result is in a comment below.

Observed / Not run

  • Observed: scripts/web-lint.sh passed (Oxfmt, design tokens, type scale). The heavy vp lint and vp check are left to CI on this host. The model test passed.
  • Not run locally: the browser test and the type check (fleet/CI).

Changelog

none

risk: low (gallery dev tooling, nothing shipped in the app)

๐Ÿค– Generated with Claude Code
Agent session: agent session


Autofix with [code]smith
Open in [code]smith ยท Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Adds a new "Whole app" gallery page (/gallery/app.html) that draws the app as one complete cmux window โ€” sidebar, tab strips, terminal, and the live agent pane โ€” at its real size, scaled to fit the browser with one transform.

The existing window mode shows only the pane, and the shell warms every entry file (425 files, ~2,300 modules) on open, which drags the browser. This page loads one entry file and mounts one live stage; the chrome around it is static DOM.

  • Scene, window size, panes, appearance, and density live in the query, so a link reopens the same window.
  • Adds model and real-Chromium browser tests; the browser test asserts only AppWindow.gallery.ts is requested and the agent pane renders at its pane's size.
  • The window shadow uses the shared --elevation-2 token; pane children are sized with box-sizing: border-box so the live pane is exactly the content size the page promises.
  • The shell header links to the page; the browse view and existing window mode are unchanged.