From 5c40d4423d774387a3aecee1076849b8cd506ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sun, 16 Aug 2026 00:21:42 +0000 Subject: [PATCH] app preview: a panel that points an iframe at a running app MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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//`. 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 --- src/servers/api/dashboards/dashboards.ts | 2 +- .../src/AppRegistry/AppRegistry.tsx | 2 + .../src/apps/Preview/PreviewApp.tsx | 58 ++++++++++++ .../src/apps/Preview/PreviewHeader.tsx | 91 +++++++++++++++++++ .../officerdev/src/apps/Preview/index.ts | 18 ++++ .../src/apps/Preview/use-preview.test.ts | 34 +++++++ .../src/apps/Preview/use-preview.ts | 84 +++++++++++++++++ 7 files changed, 288 insertions(+), 1 deletion(-) create mode 100644 src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx create mode 100644 src/workspaces/officerdev/src/apps/Preview/PreviewHeader.tsx create mode 100644 src/workspaces/officerdev/src/apps/Preview/index.ts create mode 100644 src/workspaces/officerdev/src/apps/Preview/use-preview.test.ts create mode 100644 src/workspaces/officerdev/src/apps/Preview/use-preview.ts diff --git a/src/servers/api/dashboards/dashboards.ts b/src/servers/api/dashboards/dashboards.ts index 3ccf6e15..673b6558 100644 --- a/src/servers/api/dashboards/dashboards.ts +++ b/src/servers/api/dashboards/dashboards.ts @@ -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 — diff --git a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx index 91de70a7..a384ddb7 100644 --- a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx +++ b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx @@ -5,6 +5,7 @@ import { appRegistryMetas as fileBrowserMetas } from '../apps/FileBrowser'; import { appRegistryMetas as terminalMetas } from '../apps/Terminal'; import { appRegistryMetas as codeEditorMetas } from '../apps/CodeEditor'; import { appRegistryMetas as chatMetas } from '../apps/Chat'; +import { appRegistryMetas as previewMetas } from '../apps/Preview'; import { appRegistryMetas as dashboardMetas } from '../apps/Dashboards'; import { appRegistryMetas as chatHistoryMetas } from '../apps/ChatHistory'; import { appRegistryMetas as widgetMetas } from '../apps/Widgets'; @@ -28,6 +29,7 @@ export const apps = [ ...terminalMetas, ...codeEditorMetas, ...chatMetas, + ...previewMetas, ...dashboardMetas, ...chatHistoryMetas, ...widgetMetas, diff --git a/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx b/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx new file mode 100644 index 00000000..6c717a6e --- /dev/null +++ b/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx @@ -0,0 +1,58 @@ +import { useState } from 'react'; +import { Globe } from 'lucide-react'; +import { useWorkspace } from '../../components/Workspace'; +import { normalizeUrl, usePreview } from './use-preview'; + +/** + * A live app, in a panel. + * + * The iframe is remounted by `key` on reload rather than reaching for `contentWindow.location.reload()`: + * the frame is a different origin, so touching its location object throws a cross-origin error. Replacing + * the element re-requests the URL, which is the same thing from the user's side and the only thing the + * parent is allowed to do. + * + * `allow-same-origin` is present, and has to be: without it the framed app gets an opaque origin, which + * means no `localStorage` — and it authenticates with a JWT it keeps there, so it could never stay logged + * in. It is combined with `allow-scripts`, which the two together do weaken — but the alternative is a + * panel that cannot run the app it exists to show, and the URL is one the owner typed. + */ +export const PreviewApp = ({ panelId }: { panelId: string }) => { + const { workspace } = useWorkspace(); + const { url, setUrl, reloadToken } = usePreview(panelId, workspace); + const [draft, setDraft] = useState(''); + + if (!url) { + return ( +
{ + ev.preventDefault(); + const next = normalizeUrl(draft); + if (next) setUrl(next); + }} + > + + Point this panel at a running app + setDraft(ev.target.value)} + placeholder="jesper.edge.pertento.ai" + className="w-full max-w-sm rounded-md border border-duck-dark/20 bg-transparent px-3 py-1.5 text-sm" + /> + +

+ Anything the browser can reach. It stays on this panel and survives a reload. +

+ + ); + } + + return