Files
openchamber/packages/web/server/lib/opencode/core-routes.js
T
bd9a91335c feat(preview): embedded dev-server preview pane + dev shutdown controls (#1062)
* feat: embedded preview proxy for local dev servers

Add a same-origin server proxy under /api/preview/proxy/:id and
matching UI surfaces so local dev servers (Vite, Next, etc.) can be
embedded inside OpenChamber.

Server (packages/web/server):
- New lib/preview/proxy-runtime.js: cookie-gated HTTP+WebSocket proxy
  to loopback hosts only, with TTL'd targets and SSRF allowlist.
- index.js wires the runtime alongside terminal/event-stream.

UI (packages/ui):
- ContextPanel preview tab with iframe, reload, and open-in-browser.
- Inline html code-block preview in MarkdownRenderer.
- Terminal auto-detects loopback URLs and offers to open them.
- i18n keys across en, es, pt-BR, uk, zh-CN.

* perf(preview): cache proxy targets across PreviewPane remounts

Module-scoped Map keyed by upstream URL so tab switches and component
remounts within the same page session reuse the existing proxy
registration instead of POSTing a fresh target each time.

In-memory only by design: the server holds the target map in memory
and the auth cookie is HttpOnly + scoped to the proxy id, so a stale
persisted entry would 404 after a server restart. Entries are evicted
on registration error and on a 30s safety margin before TTL expiry.

* feat(preview): surface dev-server-down state with retry overlay

Iframes don't expose HTTP status to the parent, so when the proxy
returns a 502 (upstream dev server is offline) the iframe just renders
the raw JSON error body. Probe the proxy URL out-of-band with HEAD
(falling back to GET on 404/405) and replace the iframe with a
friendly 'Dev server is not responding' overlay + retry button when
the upstream is unreachable.

Re-probes on reload, on URL change, and on proxy re-registration.

* feat(preview): strip frame-busting response headers

Many dev servers (Next.js, others) send X-Frame-Options: SAMEORIGIN
and/or a CSP with frame-ancestors that block embedding inside the
OpenChamber iframe. The proxy is same-origin and already
authenticated per-target, so embedding is otherwise safe.

- Drop X-Frame-Options outright on proxied responses.
- Surgically remove only the frame-ancestors directive from
  Content-Security-Policy and Content-Security-Policy-Report-Only,
  preserving every other directive. Drops the header entirely if no
  directives remain.
- Verified end-to-end: upstream sending both headers comes through
  with X-Frame-Options removed, CSP retaining default-src/script-src
  but no frame-ancestors, and unrelated headers untouched.

* docs(preview): design for remote-host relay agent

Design-only doc for the next phase of the embedded preview feature:
when OpenChamber runs remotely (cloud/shared/tunnel) and the user's
dev server runs on their local machine. Covers architecture (local
agent + outbound control WebSocket + server dispatch), pairing flow,
wire protocol, security model, failure modes, open questions, and
implementation milestones. No code changes.

* feat(preview): auto-open preview pane for loopback URLs in chat

Detect http(s) loopback URLs in incoming assistant messages and open the
preview pane automatically, deduped per (session, url) pair so re-renders
or repeated mentions do not steal focus. Add an inline Preview button
next to loopback links in chat markdown as a manual fallback when the
auto-open was dismissed or the URL appeared in an older message.

- url.ts: isLoopbackHttpUrl / extractLoopbackUrls helpers
- ChatContainer: module-level dedupe Set + effect on active session tail
- MarkdownRendererImpl: optional onPreviewLoopback in main renderer only
  (SimpleMarkdownRenderer for tool diffs is intentionally untouched)
- Reuses existing terminalView.preview.open i18n keys

* feat: preview enhancements, dev shutdown, and reliability fixes

Add preview start/stop UI in ContextPanel/Header, improve URL detection (Python HTTP server logs, trailing punctuation, IPv6 loopback), fix proxy path filtering to avoid disrupting non-preview WebSockets. Add dev-only /api/system/dev-shutdown endpoint and Header button to terminate local dev processes and orphaned preview servers. Improve terminal cleanup with process group killing, event pipeline reconnect backoff. Update file read APIs with optional flag and cache control. Add /api/system/free-port endpoint, detectDevServer.ts utility, and preview/shutdown i18n strings for 5 languages.

* fix: harden preview support

* fix: keep terminal toolbar interactive

* fix: keep expanded terminal below header

* fix: keep preview iframe under proxy path

* fix: respect project action preview urls

* fix: rewrite preview asset urls

* feat: capture preview console logs

* feat: annotate preview elements

* feat: attach preview annotation screenshots

* fix: improve proxied preview hmr

* feat: refine preview action UX

* fix: address preview review feedback

* fix: show auto-discover preview wait state

---------

Co-authored-by: William Biggers <will@Williams-MacBook-Pro.local>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-04-30 00:03:38 +03:00

493 lines
16 KiB
JavaScript

export const registerServerStatusRoutes = (app, dependencies) => {
const {
express,
process,
openchamberVersion,
runtimeName,
serverStartedAt,
gracefulShutdown,
getHealthSnapshot,
} = dependencies;
const allocateLoopbackPort = async () => {
const net = await import('node:net');
return await new Promise((resolve, reject) => {
const server = net.createServer();
server.on('error', reject);
server.listen(0, '127.0.0.1', () => {
try {
const address = server.address();
const port = address && typeof address === 'object' ? address.port : 0;
server.close(() => {
resolve(port);
});
} catch (error) {
try {
server.close();
} catch {
}
reject(error);
}
});
});
};
const isDevShutdownAllowed = () => {
// Dev-only escape hatch: allow terminating the whole dev process group.
// This should never be enabled in production runtimes.
return process.env.OPENCHAMBER_DEV_SHUTDOWN === 'true';
};
const isSameOriginRequest = (req) => {
const rawOrigin = typeof req.get === 'function' ? req.get('origin') : '';
const rawHost = typeof req.get === 'function' ? req.get('host') : '';
if (!rawOrigin || !rawHost) {
return false;
}
try {
const origin = new URL(rawOrigin);
return origin.host === rawHost;
} catch {
return false;
}
};
const resolveProcessGroupId = async (pid) => {
if (!pid || typeof pid !== 'number' || !Number.isFinite(pid) || pid <= 0) {
return null;
}
if (process.platform === 'win32') {
return null;
}
try {
const { execFile } = await import('node:child_process');
const { promisify } = await import('node:util');
const execFileAsync = promisify(execFile);
const result = await execFileAsync('ps', ['-o', 'pgid=', '-p', String(pid)]);
const raw = String(result.stdout || '').trim();
const pgid = Number.parseInt(raw, 10);
return Number.isFinite(pgid) && pgid > 0 ? pgid : null;
} catch {
return null;
}
};
const parseLoopbackPort = (rawUrl) => {
if (typeof rawUrl !== 'string') {
return null;
}
let url;
try {
url = new URL(rawUrl);
} catch {
return null;
}
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
return null;
}
const host = url.hostname;
if (host !== 'localhost' && host !== '127.0.0.1' && host !== '::1' && host !== '0.0.0.0') {
return null;
}
const port = url.port ? Number.parseInt(url.port, 10) : (url.protocol === 'https:' ? 443 : 80);
if (!Number.isFinite(port) || port <= 0 || port > 65535) {
return null;
}
return port;
};
const killListenPort = async (port) => {
if (!Number.isFinite(port) || port <= 0) {
return;
}
if (process.platform === 'win32') {
return;
}
try {
const { execFile } = await import('node:child_process');
const { promisify } = await import('node:util');
const execFileAsync = promisify(execFile);
const result = await execFileAsync('lsof', ['-nP', '-t', `-iTCP:${Math.trunc(port)}`, '-sTCP:LISTEN'], {
timeout: 2500,
});
const pids = String(result.stdout || '')
.split(/\s+/)
.map((value) => Number.parseInt(value, 10))
.filter((pid) => Number.isFinite(pid) && pid > 0 && pid !== process.pid);
for (const pid of pids) {
try {
process.kill(pid, 'SIGTERM');
} catch {
}
}
if (pids.length > 0) {
setTimeout(() => {
for (const pid of pids) {
try {
process.kill(pid, 'SIGKILL');
} catch {
}
}
}, 1200).unref?.();
}
} catch {
// ignore (no lsof, no permission, etc.)
}
};
app.get('/health', (_req, res) => {
res.json({
status: 'ok',
timestamp: new Date().toISOString(),
...getHealthSnapshot(),
});
});
app.post('/api/system/shutdown', (_req, res) => {
res.json({ ok: true });
gracefulShutdown({ exitProcess: true }).catch((error) => {
console.error('Shutdown request failed:', error?.message || error);
});
});
app.post('/api/system/dev-shutdown', express.json({ limit: '64kb' }), async (req, res) => {
if (!isDevShutdownAllowed()) {
return res.status(403).json({ ok: false, error: 'Dev shutdown is disabled' });
}
if (!isSameOriginRequest(req)) {
return res.status(403).json({ ok: false, error: 'Invalid origin' });
}
res.json({ ok: true });
// Terminate the entire dev process group so `bun run dev` leaves no orphans.
// We still run graceful shutdown to clean up OpenCode, terminals, websockets.
try {
const rawPreviewUrls = Array.isArray(req.body?.previewUrls) ? req.body.previewUrls : [];
const previewPorts = Array.from(new Set(
rawPreviewUrls
.map((value) => parseLoopbackPort(value))
.filter((port) => typeof port === 'number')
));
// Attempt to stop preview servers that may have daemonized away from the PTY.
// This is dev-only and limited to loopback ports supplied by the UI.
await Promise.all(previewPorts.map((port) => killListenPort(port)));
const pgid = await resolveProcessGroupId(process.pid);
const ppid = typeof process.ppid === 'number' ? process.ppid : null;
const parentPgid = ppid ? await resolveProcessGroupId(ppid) : null;
// Kick off shutdown cleanup first.
void gracefulShutdown({ exitProcess: false });
const pgidsToKill = Array.from(new Set([pgid, parentPgid].filter(Boolean)));
for (const id of pgidsToKill) {
try {
process.kill(-id, 'SIGTERM');
} catch {
}
}
setTimeout(() => {
for (const id of pgidsToKill) {
try {
process.kill(-id, 'SIGKILL');
} catch {
}
}
}, 1500).unref?.();
// Ensure the server process itself exits even if the group kill fails.
setTimeout(() => {
try {
process.exit(0);
} catch {
}
}, 2500).unref?.();
} catch (error) {
console.error('Dev shutdown request failed:', error?.message || error);
// As a last resort, exit.
try {
process.exit(0);
} catch {
}
}
});
app.get('/api/system/info', (_req, res) => {
res.json({
openchamberVersion,
runtime: runtimeName,
pid: process.pid,
startedAt: serverStartedAt,
});
});
// Allocates a best-effort free TCP port hint on 127.0.0.1.
// Another process can still claim it before the preview server binds.
app.get('/api/system/free-port', async (_req, res) => {
try {
const port = await allocateLoopbackPort();
if (!Number.isFinite(port) || port <= 0) {
return res.status(500).json({ error: 'Failed to allocate port' });
}
return res.json({ port });
} catch (error) {
return res.status(500).json({ error: (error && error.message) || 'Failed to allocate port' });
}
});
};
export const registerAuthAndAccessRoutes = (app, dependencies) => {
const {
tunnelAuthController,
uiAuthController,
readSettingsFromDiskMigrated,
normalizeTunnelSessionTtlMs,
} = dependencies;
app.get('/auth/session', async (req, res) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
const tunnelSession = tunnelAuthController.getTunnelSessionFromRequest(req);
if (tunnelSession) {
return res.json({ authenticated: true, scope: 'tunnel' });
}
tunnelAuthController.clearTunnelSessionCookie(req, res);
return res.status(401).json({ authenticated: false, locked: true, tunnelLocked: true });
}
try {
await uiAuthController.handleSessionStatus(req, res);
} catch {
res.status(500).json({ error: 'Internal server error' });
}
});
app.post('/auth/session', (req, res) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Password login is disabled for tunnel scope', tunnelLocked: true });
}
return uiAuthController.handleSessionCreate(req, res);
});
app.get('/auth/passkey/status', (req, res) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.json({ enabled: false, hasPasskeys: false, passkeyCount: 0, rpID: null, tunnelLocked: true });
}
return uiAuthController.handlePasskeyStatus(req, res);
});
app.post('/auth/passkey/authenticate/options', (req, res) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey login is disabled for tunnel scope', tunnelLocked: true });
}
return uiAuthController.handlePasskeyAuthenticationOptions(req, res);
});
app.post('/auth/passkey/authenticate/verify', (req, res) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey login is disabled for tunnel scope', tunnelLocked: true });
}
return uiAuthController.handlePasskeyAuthenticationVerify(req, res);
});
app.post('/auth/passkey/register/options', async (req, res, next) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey setup is disabled for tunnel scope', tunnelLocked: true });
}
try {
await uiAuthController.requireAuth(req, res, async () => {
await uiAuthController.handlePasskeyRegistrationOptions(req, res);
});
} catch (error) {
next(error);
}
});
app.post('/auth/passkey/register/verify', async (req, res, next) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey setup is disabled for tunnel scope', tunnelLocked: true });
}
try {
await uiAuthController.requireAuth(req, res, async () => {
await uiAuthController.handlePasskeyRegistrationVerify(req, res);
});
} catch (error) {
next(error);
}
});
app.get('/api/passkeys', async (req, res, next) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey management is disabled for tunnel scope', tunnelLocked: true });
}
try {
await uiAuthController.requireAuth(req, res, async () => {
await uiAuthController.handlePasskeyList(req, res);
});
} catch (error) {
next(error);
}
});
app.delete('/api/passkeys/:id', async (req, res, next) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Passkey management is disabled for tunnel scope', tunnelLocked: true });
}
try {
await uiAuthController.requireAuth(req, res, async () => {
await uiAuthController.handlePasskeyRevoke(req, res);
});
} catch (error) {
next(error);
}
});
app.post('/api/auth/reset', async (req, res, next) => {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return res.status(403).json({ error: 'Global sign-out is disabled for tunnel scope', tunnelLocked: true });
}
try {
await uiAuthController.requireAuth(req, res, async () => {
await uiAuthController.handleResetAuth(req, res);
});
} catch (error) {
next(error);
}
});
app.get('/connect', async (req, res) => {
try {
const token = typeof req.query?.t === 'string' ? req.query.t : '';
const settings = await readSettingsFromDiskMigrated();
const tunnelSessionTtlMs = normalizeTunnelSessionTtlMs(settings?.tunnelSessionTtlMs);
const exchange = tunnelAuthController.exchangeBootstrapToken({
req,
res,
token,
sessionTtlMs: tunnelSessionTtlMs,
});
res.setHeader('Cache-Control', 'no-store');
if (!exchange.ok) {
if (exchange.reason === 'rate-limited') {
res.setHeader('Retry-After', String(exchange.retryAfter || 60));
return res.status(429).type('text/plain').send('Too many attempts. Please try again later.');
}
return res.status(401).type('text/plain').send('Connection link is invalid or expired.');
}
return res.redirect(302, '/');
} catch {
return res.status(500).type('text/plain').send('Failed to process connect request.');
}
});
app.use('/api', async (req, res, next) => {
try {
const requestScope = tunnelAuthController.classifyRequestScope(req);
if (requestScope === 'tunnel' || requestScope === 'unknown-public') {
return tunnelAuthController.requireTunnelSession(req, res, next);
}
await uiAuthController.requireAuth(req, res, next);
} catch (err) {
next(err);
}
});
};
export const registerSettingsUtilityRoutes = (app, dependencies) => {
const {
readCustomThemesFromDisk,
refreshOpenCodeAfterConfigChange,
clientReloadDelayMs,
} = dependencies;
app.get('/api/config/themes', async (_req, res) => {
try {
const customThemes = await readCustomThemesFromDisk();
res.json({ themes: customThemes });
} catch (error) {
console.error('Failed to load custom themes:', error);
res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to load custom themes' });
}
});
app.post('/api/config/reload', async (_req, res) => {
try {
console.log('[Server] Manual configuration reload requested');
await refreshOpenCodeAfterConfigChange('manual configuration reload');
res.json({
success: true,
requiresReload: true,
message: 'Configuration reloaded successfully. Refreshing interface…',
reloadDelayMs: clientReloadDelayMs,
});
} catch (error) {
console.error('[Server] Failed to reload configuration:', error);
res.status(500).json({
error: error.message || 'Failed to reload configuration',
success: false,
});
}
});
};
export const registerCommonRequestMiddleware = (app, dependencies) => {
const { express } = dependencies;
app.use((req, res, next) => {
if (
req.path.startsWith('/api/config/agents') ||
req.path.startsWith('/api/config/commands') ||
req.path.startsWith('/api/config/mcp') ||
req.path.startsWith('/api/config/settings') ||
req.path.startsWith('/api/config/skills') ||
req.path.startsWith('/api/projects') ||
req.path.startsWith('/api/fs') ||
req.path.startsWith('/api/git') ||
req.path.startsWith('/api/magic-prompts') ||
req.path.startsWith('/api/prompts') ||
req.path.startsWith('/api/terminal') ||
req.path.startsWith('/api/opencode') ||
req.path.startsWith('/api/push') ||
req.path.startsWith('/api/notifications') ||
req.path.startsWith('/api/session-folders') ||
req.path.startsWith('/api/text') ||
req.path.startsWith('/api/voice') ||
req.path.startsWith('/api/tts') ||
req.path.startsWith('/api/openchamber/tunnel')
) {
express.json({ limit: '50mb' })(req, res, next);
} else if (req.path.startsWith('/api')) {
next();
} else {
express.json({ limit: '50mb' })(req, res, next);
}
});
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
app.use((req, _res, next) => {
console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
next();
});
};