app preview: a panel that points an iframe at a running app

A dashboard can now hold chat, the code editor, the file browser and the app
itself — the last piece of working on a project without leaving Officer.

── Why this is ~200 lines and not 560 ──

The version deleted on 2026-07-31 spawned `bun dev` in a project directory, found
a free port and proxied it under `/api/dev-server-proxy/<id>/`. That prefix is what
cost the money: HTML, JS and CSS rewritten; a script injected into the page to
monkey-patch fetch/XHR/WebSocket so runtime URLs got the prefix too; a Referer
fallback for chunks that resolved at the wrong depth; a websocket bridge for HMR.
All of it faking an origin.

On a machine with a proxy in front — nginx on edge.pertento.ai, wildcard
subdomains — the app is ALREADY served at the root of its own origin, and the
browser is already on the tailnet. So there is nothing to fake and no server side
at all: no route, no socket, and therefore no permission-registry entry.

The old code is not obsolete and is not being thrown away. An install with no
proxy in front still has an app on localhost that the browser cannot reach, and
that is exactly what it solves. It is at `188b45c1^`; the note is in TODO.md.

── What it does ──

Holds a URL per panel, renders it, reloads it, opens it in a real tab. The URL
lives in dashboard state so it survives a reload, and is shared LIVE between header
and body — the header writes and the body reads, so claim-once would mean typing a
URL changed the header and nothing else. The reload counter is deliberately not
persisted: it is a signal.

Reload remounts the iframe by key rather than calling `contentWindow.location
.reload()`, which throws cross-origin. Replacing the element re-requests the URL,
which is the same thing from the outside and the only move the parent is allowed.

`allow-same-origin` is set and has to be: without it the framed app gets an opaque
origin and no localStorage, and it authenticates with a JWT it keeps there.

`normalizeUrl` accepts a bare host as https and refuses javascript:, data: and
blob: — an iframe src with `javascript:` executes in the PARENT's context. The
owner typing in their own panel is not an attacker; it costs one line and removes
the category. 5 tests.

── Two iframe facts worth knowing before testing ──

Storage is PARTITIONED by top-level site, so the login inside the panel is separate
from the login in a tab: expect to sign in once, in the panel.

A page can refuse to be framed (X-Frame-Options, CSP frame-ancestors) and renders
blank with only a console error. If that happens it is nginx's config, not this
code — which is why "open in a new tab" is in the header rather than left to
copying the URL out.

tsgo clean, frontend builds, 851 pass / 7 fail — +5 new, same 7.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

This commit is contained in:

pastilhas

2026-08-16 00:21:42 +00:00

co-authored by

Claude Opus 5

parent 20aa0cc880

commit 5c40d4423d

7 changed files with 288 additions and 1 deletions

									
										src/servers/api/dashboards/dashboards.ts
									
		+1
		-1
	
												View File
												
				@@ -20,7 +20,7 @@ export const dashboardsRouter = createRouter();

				// `editor` joined 2026-08-15: which files a code-editor panel has open, and which is in front. Note an

				// unmatched key is a 400 rather than a silent 200 — so a new panel prefix MUST be added here or its state

				// vanishes loudly instead of quietly, which is the whole reason that branch exists.

				const PANEL_STATE_PREFIXES = ['tmux', 'nvim', 'claude-code', 'editor', 'files', 'chat'];

				const PANEL_STATE_PREFIXES = ['tmux', 'nvim', 'claude-code', 'editor', 'files', 'chat', 'preview'];

				// A `LayoutNode` is an object. Everything from the PATCH body down to jsonb is `unknown`, so without this

				// the only thing standing between a wrong-shaped body and the layout columns is the CHECK constraint —