App Preview

src/servers/api/dev-server/router.ts

@@ -0,0 +1,279 @@
+import type { Subprocess } from 'bun';
+import { join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { createServer } from 'node:net';
+import { createRouter } from '@@/create-router';
+import { getUserProjectsDir } from '@@/data-path';
+import { CustomError } from '@@/custom-errors';
+import * as errors from '@@/custom-errors';
+
+export const devServerRouter = createRouter();
+export const devServerProxyRouter = createRouter();
+
+export type ServerEntry = { proc: Subprocess; port: number; slug: string; logs: string[]; idleTimer: Timer | null };
+
+const IDLE_TIMEOUT_MS = 5 * 60 * 1000;
+
+const servers = new Map<string, ServerEntry>();
+
+const serverKey = (email: string, slug: string) => `${email}:${slug}`;
+
+export const findEntryBySlug = (slug: string): ServerEntry | undefined => {
+  for (const entry of servers.values()) {
+    if (entry.slug === slug) return entry;
+  }
+  return undefined;
+};
+
+export const touchEntry = (entry: ServerEntry) => {
+  if (entry.idleTimer) clearTimeout(entry.idleTimer);
+  entry.idleTimer = setTimeout(() => {
+    console.log(`[dev-server] ${entry.slug} idle for 5m, stopping`);
+    entry.proc.kill();
+  }, IDLE_TIMEOUT_MS);
+};
+
+const killEntry = (entry: ServerEntry, key: string) => {
+  if (entry.idleTimer) clearTimeout(entry.idleTimer);
+  entry.proc.kill();
+  servers.delete(key);
+};
+
+const findFreePort = (): Promise<number> =>
+  new Promise((resolve, reject) => {
+    const server = createServer();
+    server.listen(0, '127.0.0.1', () => {
+      const addr = server.address();
+      const port = typeof addr === 'object' && addr ? addr.port : 0;
+      server.close(() => resolve(port));
+    });
+    server.on('error', reject);
+  });
+
+const collectLogs = (entry: ServerEntry, stream: ReadableStream<Uint8Array> | null, prefix: string) => {
+  if (!stream) return;
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  const pump = async () => {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      const text = decoder.decode(value, { stream: true });
+      for (const line of text.split('\n').filter(Boolean)) {
+        entry.logs.push(`[${prefix}] ${line}`);
+        if (entry.logs.length > 200) entry.logs.shift();
+      }
+    }
+  };
+  pump().catch(() => {});
+};
+
+const waitForPort = async (port: number, timeoutMs = 8000) => {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const res = await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(500) });
+      await res.arrayBuffer();
+      return true;
+    } catch {
+      await Bun.sleep(300);
+    }
+  }
+  return false;
+};
+
+devServerRouter.post('/start', async (ctx) => {
+  const user = ctx.get('user');
+  const { slug } = ctx.get('body') as { slug: string };
+
+  if (!slug) throw errors.BAD_REQUEST('Missing slug');
+
+  const key = serverKey(user.email, slug);
+
+  const existing = servers.get(key);
+  if (existing) {
+    touchEntry(existing);
+    return ctx.json({ url: `/api/dev-server-proxy/${slug}/`, port: existing.port });
+  }
+
+  const projectDir = join(getUserProjectsDir(user.email), slug);
+  if (!existsSync(projectDir)) throw errors.BAD_REQUEST(`Project directory not found: ${slug}`);
+
+  const pkgPath = join(projectDir, 'package.json');
+  if (!existsSync(pkgPath)) throw errors.BAD_REQUEST('No package.json found in project');
+  try {
+    const pkg = JSON.parse(await Bun.file(pkgPath).text());
+    if (!pkg.scripts?.dev) throw errors.BAD_REQUEST('No "dev" script in package.json');
+  } catch (err) {
+    if (err instanceof CustomError) throw err;
+    throw errors.BAD_REQUEST('Failed to read package.json');
+  }
+
+  const port = await findFreePort();
+
+  const proc = Bun.spawn(['bun', 'dev'], {
+    cwd: projectDir,
+    env: { ...process.env, PORT: String(port) },
+    stdout: 'pipe',
+    stderr: 'pipe',
+  });
+  console.log(`[dev-server] started ${slug} on port ${port} (pid ${proc.pid})`);
+
+  const entry: ServerEntry = { proc, port, slug, logs: [], idleTimer: null };
+  servers.set(key, entry);
+  touchEntry(entry);
+
+  collectLogs(entry, proc.stdout, 'stdout');
+  collectLogs(entry, proc.stderr, 'stderr');
+
+  proc.exited.then((code) => {
+    console.log(`[dev-server] ${slug} exited with code ${code}`);
+    entry.logs.push(`[system] Process exited with code ${code}`);
+    if (entry.idleTimer) clearTimeout(entry.idleTimer);
+    servers.delete(key);
+  });
+
+  const ready = await waitForPort(port);
+  if (!ready) {
+    const exitCode = proc.exitCode;
+    if (exitCode !== null) {
+      if (entry.idleTimer) clearTimeout(entry.idleTimer);
+      servers.delete(key);
+      throw errors.BAD_REQUEST(`Dev server exited with code ${exitCode}. Logs:\n${entry.logs.slice(-20).join('\n')}`);
+    }
+  }
+
+  return ctx.json({ url: `/api/dev-server-proxy/${slug}/`, port });
+});
+
+devServerRouter.post('/stop', async (ctx) => {
+  const user = ctx.get('user');
+  const { slug } = ctx.get('body') as { slug: string };
+
+  if (!slug) throw errors.BAD_REQUEST('Missing slug');
+
+  const key = serverKey(user.email, slug);
+  const entry = servers.get(key);
+
+  if (entry) killEntry(entry, key);
+
+  return ctx.json({ ok: true });
+});
+
+devServerRouter.get('/status', async (ctx) => {
+  const user = ctx.get('user');
+  const slug = ctx.req.query('slug');
+
+  if (!slug) throw errors.BAD_REQUEST('Missing slug');
+
+  const key = serverKey(user.email, slug);
+  const entry = servers.get(key);
+
+  if (entry) {
+    return ctx.json({ running: true, url: `/api/dev-server-proxy/${slug}/`, port: entry.port });
+  }
+
+  return ctx.json({ running: false });
+});
+
+devServerRouter.get('/logs', async (ctx) => {
+  const user = ctx.get('user');
+  const slug = ctx.req.query('slug');
+
+  if (!slug) throw errors.BAD_REQUEST('Missing slug');
+
+  const key = serverKey(user.email, slug);
+  const entry = servers.get(key);
+
+  if (!entry) return ctx.json({ logs: [] });
+
+  return ctx.json({ logs: entry.logs.slice(-100) });
+});
+
+// Proxy router — mounted outside protected router (no auth needed for sub-resources).
+// Security: only proxies to ports that were started via authenticated /start calls.
+devServerProxyRouter.all('/:slug/*', async (ctx) => {
+  const slug = ctx.req.param('slug');
+  if (!slug) return ctx.text('Not found', 404);
+
+  const entry = findEntryBySlug(slug);
+  if (!entry) return ctx.text('No dev server running', 404);
+
+  touchEntry(entry);
+
+  const originalUrl = new URL(ctx.req.url);
+  const prefix = `/api/dev-server-proxy/${slug}`;
+  const proxyPath = originalUrl.pathname.replace(prefix, '') || '/';
+  const targetUrl = `http://localhost:${entry.port}${proxyPath}${originalUrl.search}`;
+
+  try {
+    const headers = new Headers(ctx.req.raw.headers);
+    headers.delete('host');
+    headers.delete('authorization');
+
+    const res = await fetch(targetUrl, {
+      method: ctx.req.method,
+      headers,
+      body: ctx.req.method !== 'GET' && ctx.req.method !== 'HEAD' ? ctx.req.raw.body : undefined,
+      redirect: 'manual',
+    });
+
+    const contentType = res.headers.get('content-type') ?? '';
+    const needsRewrite =
+      contentType.includes('text/html') ||
+      contentType.includes('javascript') ||
+      contentType.includes('text/css');
+
+    if (needsRewrite) {
+      const text = await res.text();
+      const rewritten = contentType.includes('text/html')
+        ? rewriteHtml(text, prefix)
+        : rewriteAssetPaths(text, prefix);
+      const newHeaders = new Headers(res.headers);
+      newHeaders.delete('content-length');
+      newHeaders.delete('content-encoding');
+      return new Response(rewritten, { status: res.status, headers: newHeaders });
+    }
+
+    return new Response(res.body, {
+      status: res.status,
+      headers: res.headers,
+    });
+  } catch {
+    return ctx.text('Dev server not reachable', 502);
+  }
+});
+
+// Injected into proxied HTML to intercept fetch/XHR so absolute paths (e.g. /api/hello)
+// go through the proxy instead of hitting the host server directly.
+// Handles string paths, URL objects, and Request objects.
+const proxyOverrideScript = (base: string) =>
+  `<script>(function(){` +
+  `var b=${JSON.stringify(base)},o=location.origin;` +
+  `function rw(u){` +
+  `if(typeof u==="string"){` +
+  `if(u.startsWith("/")&&!u.startsWith("//")&&!u.startsWith(b))return b+u;` +
+  `if(u.startsWith(o+"/")&&!u.startsWith(o+b))return o+b+u.slice(o.length);` +
+  `return u}` +
+  `if(u instanceof URL&&u.origin===o&&!u.pathname.startsWith(b))` +
+  `return new URL(o+b+u.pathname+u.search+u.hash);` +
+  `if(u instanceof Request){var p=new URL(u.url);` +
+  `if(p.origin===o&&!p.pathname.startsWith(b))` +
+  `return new Request(o+b+p.pathname+p.search+p.hash,u)}` +
+  `return u}` +
+  `var F=window.fetch;window.fetch=function(i,n){return F.call(this,rw(i),n)};` +
+  `var X=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(){` +
+  `arguments[1]=rw(arguments[1]);return X.apply(this,arguments)};` +
+  `})()</script>`;
+
+// HTML: rewrite src/href/action attributes with absolute paths + inject fetch/XHR override
+const rewriteHtml = (html: string, base: string) =>
+  html
+    .replace(/<head([^>]*)>/i, `<head$1>${proxyOverrideScript(base)}`)
+    .replace(/(href|src|action)="\/(?!\/)/g, `$1="${base}/`)
+    .replace(/(href|src|action)='\/(?!\/)/g, `$1='${base}/`)
+    .replace(/url\(\//g, `url(${base}/`);
+
+// JS/CSS: only rewrite /_bun/ asset paths (Bun dev server specific)
+const rewriteAssetPaths = (text: string, base: string) =>
+  text.replace(/\/_bun\//g, `${base}/_bun/`);

src/servers/hono.ts

@@ -18,6 +18,7 @@ import { workspacesRouter } from './api/workspaces';
 import { taskLogsRouter } from './api/task-logs/task-logs';
 import { router as fileBrowserRouter } from './api/file-browser/router';
 import { piRestRouter } from './api/pi/rest';
+import { devServerRouter, devServerProxyRouter } from './api/dev-server/router';
 import { CustomError } from './custom-errors';
 import { userMiddleware, bodyParser } from './_middlewares';
 
@@ -39,6 +40,7 @@ honoServer.get('/api', (ctx) => ctx.json({ officerAPI: 'ok' }));
 honoServer.route('/api/auth', authRouter);
 honoServer.route('/api/server-settings', serverSettingsRouter);
 honoServer.route('/api/landing-page-data', landingPageDataRouter);
+honoServer.route('/api/dev-server-proxy', devServerProxyRouter);
 
 const protectedRouter = createRouter();
 protectedRouter.use(bodyParser());
@@ -56,6 +58,7 @@ protectedRouter.route('/user', settingsRouter);
 protectedRouter.route('/workspaces', workspacesRouter);
 protectedRouter.route('/task-logs', taskLogsRouter);
 protectedRouter.route('/file-browser', fileBrowserRouter);
+protectedRouter.route('/dev-server', devServerRouter);
 protectedRouter.route('/', piRestRouter);
 
 honoServer.route('/api', protectedRouter);