devglide 0.1.2 → 0.1.4

package/src/routers/shell/shell-config.ts

@@ -0,0 +1,38 @@
+import fs from 'fs';
+import type { ShellConfig } from '../../apps/shell/src/shell-types.js';
+
+export type { ShellConfig };
+
+// ── Env helpers ──────────────────────────────────────────────────────────────
+
+const ENV_ALLOWLIST: string[] = ['HOME', 'PATH', 'USER', 'SHELL', 'LANG', 'LC_ALL', 'SSH_AUTH_SOCK'];
+
+export function safeEnv(extra: Record<string, string> = {}): Record<string, string> {
+  const env: Record<string, string> = { TERM: 'xterm-256color' };
+  for (const key of ENV_ALLOWLIST) {
+    if (process.env[key] !== undefined) env[key] = process.env[key]!;
+  }
+  return { ...env, ...extra };
+}
+
+// ── Shell configs ────────────────────────────────────────────────────────────
+
+/** Resolve the user's default shell from $SHELL, falling back to bash. */
+function resolveDefaultShell(): string {
+  const userShell = process.env.SHELL;
+  if (userShell && fs.existsSync(userShell)) return userShell;
+  return 'bash';
+}
+
+export const SHELL_CONFIGS: Record<string, ShellConfig> = {
+  default: {
+    get command(): string { return resolveDefaultShell(); },
+    args: [],
+    env: safeEnv()
+  },
+  bash: {
+    command: 'bash',
+    args: [],
+    env: safeEnv()
+  },
+};

package/src/routers/shell/shell-routes.ts

@@ -0,0 +1,108 @@
+import { Router } from 'express';
+import type { Request, Response, NextFunction } from 'express';
+import path from 'path';
+import fs from 'fs';
+import { getActiveProject } from '../../project-context.js';
+
+// ── Preview helpers ──────────────────────────────────────────────────────────
+
+const PREVIEW_ENTRY_POINTS: string[] = [
+  'public/index.html',
+  'dist/index.html',
+  'index.html',
+  'build/index.html',
+  'src/index.html',
+];
+
+export function detectEntryPoint(projectPath: string): { file: string; base: string } | null {
+  for (const entry of PREVIEW_ENTRY_POINTS) {
+    const full = path.join(projectPath, entry);
+    if (fs.existsSync(full)) return { file: entry, base: path.dirname(entry) };
+  }
+  return null;
+}
+
+// ── Proxy SSRF protection ────────────────────────────────────────────────────
+
+const BLOCKED_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '0.0.0.0', 'metadata.google.internal']);
+
+function isBlockedUrl(urlStr: string): string | null {
+  let parsed: URL;
+  try { parsed = new URL(urlStr); } catch { return 'Invalid URL'; }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return 'Only HTTP/HTTPS allowed';
+  const hostname = parsed.hostname.toLowerCase();
+  if (BLOCKED_HOSTS.has(hostname)) return 'Blocked host';
+  // Block private/internal IP ranges
+  const parts = hostname.split('.').map(Number);
+  if (parts.length === 4 && parts.every((n) => !isNaN(n))) {
+    const [a, b] = parts;
+    if (a === 10) return 'Private IP blocked';
+    if (a === 172 && b >= 16 && b <= 31) return 'Private IP blocked';
+    if (a === 192 && b === 168) return 'Private IP blocked';
+    if (a === 169 && b === 254) return 'Link-local IP blocked';
+    if (a === 127) return 'Loopback IP blocked';
+    if (a === 0) return 'Invalid IP blocked';
+  }
+  return null;
+}
+
+// ── HTTP Router ──────────────────────────────────────────────────────────────
+
+export const router: Router = Router();
+
+// ── Preview route — serve static files from active project ─────────────────
+
+router.use('/preview', (req: Request, res: Response, next: NextFunction) => {
+  const projectPath = getActiveProject()?.path;
+  if (!projectPath) return res.status(404).json({ error: 'No active project' });
+
+  const reqPath = decodeURIComponent(req.path).replace(/^\//, '') || 'index.html';
+  if (reqPath.includes('\0') || /\.\.[\\/]/.test(reqPath)) {
+    return res.status(400).json({ error: 'Invalid path' });
+  }
+
+  let resolved = path.resolve(projectPath, reqPath);
+  if (!resolved.startsWith(projectPath)) {
+    return res.status(403).json({ error: 'Path traversal denied' });
+  }
+
+  // Directory requests: try serving index.html from within
+  try {
+    if (fs.statSync(resolved).isDirectory()) {
+      resolved = path.join(resolved, 'index.html');
+    }
+  } catch {}
+
+  res.sendFile(resolved, (err: Error | null) => {
+    if (err) next();
+  });
+});
+
+// ── Proxy route — fetch relay for browser pane ──────────────────────────────
+// Minimal fetch relay — client uses srcdoc to render HTML (bypasses X-Frame-Options).
+
+router.get('/proxy', async (req: Request, res: Response) => {
+  const targetUrl = req.query.url as string | undefined;
+  if (!targetUrl) return res.status(400).json({ error: 'Missing url parameter' });
+
+  const blocked = isBlockedUrl(targetUrl);
+  if (blocked) return res.status(403).json({ error: blocked });
+
+  try {
+    const upstream = await fetch(targetUrl, {
+      headers: {
+        'User-Agent': (req.headers['user-agent'] as string) || 'Mozilla/5.0',
+        'Accept': 'text/html,*/*',
+        'Accept-Language': (req.headers['accept-language'] as string) || 'en-US,en;q=0.9',
+      },
+      redirect: 'follow',
+    });
+
+    const html: string = await upstream.text();
+    res.setHeader('X-Final-URL', upstream.url);
+    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+    res.send(html);
+  } catch (err: unknown) {
+    res.status(502).json({ error: (err as Error).message });
+  }
+});

package/src/routers/shell/shell-socket.ts

@@ -0,0 +1,321 @@
+import type { Namespace } from 'socket.io';
+import path from 'path';
+import fs from 'fs';
+import { getActiveProject } from '../../project-context.js';
+import type { PaneInfo, ShellConfig } from '../../apps/shell/src/shell-types.js';
+import {
+  globalPtys,
+  dashboardState,
+  MAX_PANES,
+  nextPaneId,
+  panesForProject,
+  nextNumForProject,
+  renumberPanes,
+  paneActiveSocket,
+  socketDimensions,
+  setShellNsp,
+} from './shell-state.js';
+import { SHELL_CONFIGS, safeEnv } from './shell-config.js';
+import { spawnGlobalPty, killPty } from './pty-manager.js';
+import { detectEntryPoint } from './shell-routes.js';
+
+// ── Socket.io namespace initializer ──────────────────────────────────────────
+
+export function initShell(nsp: Namespace): void {
+  setShellNsp(nsp);
+
+  nsp.on('connection', (socket) => {
+    console.log(`[shell:connect] ${socket.id}`);
+
+    // Send full state snapshot to every newly connected client
+    const scrollbacks: Record<string, string> = {};
+    for (const [id, entry] of globalPtys) {
+      scrollbacks[id] = entry.chunks.join('');
+      socket.join(`pane:${id}`);
+    }
+    // Also join rooms for browser panes (no PTY)
+    for (const p of dashboardState.panes) {
+      if (!globalPtys.has(p.id)) socket.join(`pane:${p.id}`);
+    }
+    socket.emit('state:snapshot', { ...dashboardState, scrollbacks, activeProject: getActiveProject() || null });
+
+    // Re-send snapshot on demand (for SPA page modules that mount after socket is already connected)
+    socket.on('state:request-snapshot', () => {
+      const sb: Record<string, string> = {};
+      for (const [id, entry] of globalPtys) {
+        sb[id] = entry.chunks.join('');
+        socket.join(`pane:${id}`);
+      }
+      for (const p of dashboardState.panes) {
+        if (!globalPtys.has(p.id)) socket.join(`pane:${p.id}`);
+      }
+      socket.emit('state:snapshot', { ...dashboardState, scrollbacks: sb, activeProject: getActiveProject() || null });
+    });
+
+    // ── Create browser pane ─────────────────────────────────────────────────
+    socket.on('browser:create', ({ url, currentTab }: { url?: string; currentTab?: string }) => {
+      const currentProjectId = getActiveProject()?.id || null;
+      if (panesForProject(currentProjectId) >= MAX_PANES) {
+        socket.emit('terminal:error', { message: `Maximum pane limit (${MAX_PANES}) per project reached` });
+        return;
+      }
+
+      // Auto-detect index.html in active project when no URL is provided
+      let resolvedUrl: string = url || '';
+      if (!resolvedUrl && getActiveProject()?.path) {
+        const entry = detectEntryPoint(getActiveProject().path);
+        if (entry) {
+          resolvedUrl = `/api/shell/preview/${entry.file}`;
+        }
+      }
+
+      const id: string    = nextPaneId();
+      const projectId: string | null = getActiveProject()?.id || null;
+      const num: number   = nextNumForProject(projectId);
+      const title: string = String(num);
+
+      const paneInfo: PaneInfo = { id, shellType: 'browser', title, num, cwd: null, url: resolvedUrl, projectId };
+      const switchTab: boolean = currentTab !== 'grid';
+
+      dashboardState.panes.push(paneInfo);
+      dashboardState.activePaneId = id;
+      if (switchTab) dashboardState.activeTab = id;
+
+      nsp.emit('state:pane-added', paneInfo);
+      if (switchTab) nsp.emit('state:active-tab', { tabId: id });
+      nsp.emit('state:active-pane', { paneId: id });
+    });
+
+    // ── Create terminal ───────────────────────────────────────────────────────
+    socket.on('terminal:create', ({ shellType, cwd, cols, rows, currentTab }: { shellType: string; cwd?: string; cols?: number; rows?: number; currentTab?: string }) => {
+      const currentProjectId = getActiveProject()?.id || null;
+      if (panesForProject(currentProjectId) >= MAX_PANES) {
+        socket.emit('terminal:error', { message: `Maximum pane limit (${MAX_PANES}) per project reached` });
+        return;
+      }
+
+      const id: string    = nextPaneId();
+      const num: number   = nextNumForProject(currentProjectId);
+      const title: string = String(num);
+      const config: ShellConfig = SHELL_CONFIGS[shellType] || SHELL_CONFIGS.default;
+      let args: string[]     = config.args;
+      let startCwd: string = getActiveProject()?.path || process.env.HOME || '/';
+
+      if (cwd) {
+        if (!path.isAbsolute(cwd) || cwd.includes('\0') || /\.\.[\\/]/.test(cwd)) {
+          socket.emit('terminal:error', { message: 'Invalid CWD path: must be absolute without traversal' });
+          return;
+        }
+        if (!fs.existsSync(cwd) || !fs.statSync(cwd).isDirectory()) {
+          socket.emit('terminal:error', { message: 'CWD path does not exist or is not a directory' });
+          return;
+        }
+        startCwd = cwd;
+      }
+
+      try {
+        // Join all connected sockets to the new pane room BEFORE spawning the PTY.
+        // The PTY emits data on the next event-loop tick via nsp.to(`pane:${id}`),
+        // so sockets must already be in the room to receive the initial prompt.
+        nsp.socketsJoin(`pane:${id}`);
+
+        spawnGlobalPty(id, config.command, args, config.env, cols ?? 80, rows ?? 24,
+          true, false, startCwd);
+
+        const paneInfo: PaneInfo = { id, shellType, title, num, cwd: startCwd, projectId: getActiveProject()?.id || null };
+        const switchTab: boolean = currentTab !== 'grid';
+
+        paneActiveSocket.set(id, socket.id);
+        dashboardState.panes.push(paneInfo);
+        dashboardState.activePaneId = id;
+        if (switchTab) dashboardState.activeTab = id;
+
+        nsp.emit('state:pane-added', paneInfo);
+        if (switchTab) nsp.emit('state:active-tab', { tabId: id });
+        nsp.emit('state:active-pane', { paneId: id });
+      } catch (err: unknown) {
+        socket.emit('terminal:data', { id, data: `\r\nFailed to start ${shellType}: ${(err as Error).message}\r\n` });
+        socket.emit('terminal:exit', { id, code: 1 });
+      }
+    });
+
+    // ── SSH ──────────────────────────────────────────────────────────────────
+    socket.on('ssh:connect', ({ host, user, port, keyPath: kp, cols, rows }: { host: string; user: string; port?: number; keyPath?: string; cols?: number; rows?: number }) => {
+      const currentProjectId = getActiveProject()?.id || null;
+      if (panesForProject(currentProjectId) >= MAX_PANES) {
+        socket.emit('terminal:error', { message: `Maximum pane limit (${MAX_PANES}) per project reached` });
+        return;
+      }
+
+      if (typeof host !== 'string' || !host || typeof user !== 'string' || !user) {
+        socket.emit('terminal:error', { message: 'SSH requires valid host and user' });
+        return;
+      }
+      // Validate hostname (RFC 952) and username format
+      if (!/^[a-zA-Z0-9]([a-zA-Z0-9\-\.]*[a-zA-Z0-9])?$/.test(host) || host.length > 253) {
+        socket.emit('terminal:error', { message: 'Invalid hostname format' });
+        return;
+      }
+      if (!/^[a-zA-Z_][a-zA-Z0-9_\-\.]*$/.test(user) || user.length > 64) {
+        socket.emit('terminal:error', { message: 'Invalid username format' });
+        return;
+      }
+      const sshPort: number = Number(port);
+      if (port !== undefined && (!Number.isInteger(sshPort) || sshPort < 1 || sshPort > 65535)) {
+        socket.emit('terminal:error', { message: 'Invalid SSH port' });
+        return;
+      }
+      if (kp !== undefined && (typeof kp !== 'string' || kp.includes('..') || kp.includes('\0'))) {
+        socket.emit('terminal:error', { message: 'Invalid key path' });
+        return;
+      }
+
+      const id: string = nextPaneId();
+      const num: number = nextNumForProject(currentProjectId);
+      const title: string = `${num}: ${user}@${host}`;
+
+      const sshArgs: string[] = ['-tt'];
+      if (port)  sshArgs.push('-p', String(port));
+      if (kp)    sshArgs.push('-i', kp);
+      sshArgs.push(`${user}@${host}`);
+
+      try {
+        spawnGlobalPty(id, 'ssh', sshArgs, safeEnv(), cols ?? 80, rows ?? 24, false, false, null);
+
+        const paneInfo: PaneInfo = { id, shellType: 'ssh', title, num, cwd: null, projectId: getActiveProject()?.id || null };
+        paneActiveSocket.set(id, socket.id);
+        dashboardState.panes.push(paneInfo);
+        dashboardState.activePaneId = id;
+
+        nsp.emit('state:pane-added', paneInfo);
+        nsp.emit('state:active-pane', { paneId: id });
+      } catch (err: unknown) {
+        socket.emit('terminal:data', { id, data: `\r\nSSH failed: ${(err as Error).message}\r\n` });
+        socket.emit('terminal:exit', { id, code: 1 });
+      }
+    });
+
+    // ── Subscribe / unsubscribe ──────────────────────────────────────────────
+    socket.on('terminal:subscribe', ({ id }: { id: string }) => {
+      if (globalPtys.has(id) || dashboardState.panes.some((p: PaneInfo) => p.id === id)) {
+        socket.join(`pane:${id}`);
+      }
+    });
+
+    socket.on('terminal:unsubscribe', ({ id }: { id: string }) => {
+      socket.leave(`pane:${id}`);
+    });
+
+    // ── Input ────────────────────────────────────────────────────────────────
+    socket.on('terminal:input', ({ id, data }: { id: string; data: string }) => {
+      if (typeof data !== 'string' || data.length > 65536) return;
+
+      const entry = globalPtys.get(id);
+      if (!entry) return;
+
+      // Auto-join room on first interaction
+      socket.join(`pane:${id}`);
+
+      // If this socket wasn't the active typer, take ownership and resize PTY
+      // to its own dimensions first — prevents SIGWINCH corruption on the prev device
+      if (paneActiveSocket.get(id) !== socket.id) {
+        paneActiveSocket.set(id, socket.id);
+        const dims = socketDimensions.get(socket.id)?.get(id);
+        if (dims) {
+          try { entry.ptyProcess.resize(dims.cols, dims.rows); } catch (e: unknown) { console.warn(`[resize] ${id}:`, (e as Error).message); }
+        }
+      }
+
+      try { entry.ptyProcess.write(data); } catch (e: unknown) { console.warn(`[write] ${id}:`, (e as Error).message); }
+    });
+
+    // ── Resize ───────────────────────────────────────────────────────────────
+    socket.on('terminal:resize', ({ id, cols, rows }: { id: string; cols: number; rows: number }) => {
+      if (!Number.isInteger(cols) || !Number.isInteger(rows)) return;
+      cols = Math.max(1, Math.min(500, cols));
+      rows = Math.max(1, Math.min(500, rows));
+
+      // Always record this socket's current dimensions
+      if (!socketDimensions.has(socket.id)) socketDimensions.set(socket.id, new Map());
+      socketDimensions.get(socket.id)!.set(id, { cols, rows });
+
+      // Only apply to PTY if this socket is the active typer (or pane is brand new)
+      const active = paneActiveSocket.get(id);
+      if (!active || active === socket.id) {
+        const entry = globalPtys.get(id);
+        if (entry) {
+          try { entry.ptyProcess.resize(cols, rows); } catch (e: unknown) { console.warn(`[resize] ${id}:`, (e as Error).message); }
+        }
+      }
+    });
+
+    // ── Close terminal ────────────────────────────────────────────────────────
+    socket.on('terminal:close', ({ id }: { id: string }) => {
+      const entry = globalPtys.get(id);
+      const existed: boolean = dashboardState.panes.some((p: PaneInfo) => p.id === id);
+      if (!entry && !existed) return;  // unknown pane — ignore
+
+      if (entry) {
+        killPty(entry.ptyProcess);
+        globalPtys.delete(id);
+      }
+
+      // Find index of closing pane before removal so we can select the previous one
+      const closedIdx: number = dashboardState.panes.findIndex((p: PaneInfo) => p.id === id);
+
+      dashboardState.panes = dashboardState.panes.filter((p: PaneInfo) => p.id !== id);
+      nsp.emit('state:pane-removed', { id });
+
+      // Clean up resize arbitration state for this pane
+      paneActiveSocket.delete(id);
+      for (const dims of socketDimensions.values()) dims.delete(id);
+
+      // Renumber remaining panes per-project (1-based sequential within each project)
+      renumberPanes();
+      if (dashboardState.panes.length > 0) {
+        nsp.emit('state:panes-renumbered', dashboardState.panes.map(({ id: pid, num }: { id: string; num: number }) => ({ id: pid, num })));
+      }
+
+      // Select the previous pane (or next if closing the first one)
+      const prevIdx: number = Math.max(0, closedIdx - 1);
+      const nextPane: string | null = dashboardState.panes.length > 0 ? dashboardState.panes[prevIdx].id : null;
+
+      if (dashboardState.activeTab === id) {
+        // The closed pane was the focused tab — navigate to previous pane or back to grid
+        const next: string = nextPane ?? 'grid';
+        dashboardState.activeTab    = next;
+        dashboardState.activePaneId = nextPane;
+        nsp.emit('state:active-tab',  { tabId: next });
+      }
+
+      // Always update active pane highlight (covers both tab view and grid/dashboard view)
+      dashboardState.activePaneId = nextPane;
+      nsp.emit('state:active-pane', { paneId: nextPane });
+    });
+
+    // ── Active tab / pane sync ────────────────────────────────────────────────
+    // Use socket.broadcast so the sender (who already applied locally) is excluded.
+    socket.on('state:set-active-tab', ({ tabId }: { tabId: string }) => {
+      if (tabId !== 'grid' && !dashboardState.panes.some((p: PaneInfo) => p.id === tabId)) return;
+      dashboardState.activeTab = tabId;
+      socket.broadcast.emit('state:active-tab', { tabId });
+    });
+
+    socket.on('state:set-active-pane', ({ paneId }: { paneId: string | null }) => {
+      if (paneId !== null && !dashboardState.panes.some((p: PaneInfo) => p.id === paneId)) return;
+      dashboardState.activePaneId = paneId;
+      socket.broadcast.emit('state:active-pane', { paneId });
+    });
+
+    // ── Disconnect ────────────────────────────────────────────────────────────
+    socket.on('disconnect', () => {
+      console.log(`[shell:disconnect] ${socket.id}`);
+      // PTY processes outlive individual socket connections.
+      // Release resize ownership so the next active socket can take over.
+      socketDimensions.delete(socket.id);
+      for (const [paneId, activeSocketId] of paneActiveSocket) {
+        if (activeSocketId === socket.id) paneActiveSocket.delete(paneId);
+      }
+    });
+  });
+}

package/src/routers/shell/shell-state.ts

@@ -0,0 +1,59 @@
+import type { Namespace } from 'socket.io';
+import type { PtyEntry, PaneInfo, DashboardState } from '../../apps/shell/src/shell-types.js';
+
+export type { PtyEntry, PaneInfo, DashboardState };
+
+// ── Global shared state (survives individual socket disconnects) ────────────
+
+export const globalPtys: Map<string, PtyEntry> = new Map();
+
+export const dashboardState: DashboardState = {
+  panes: [],
+  activeTab: 'grid',
+  activePaneId: null,
+};
+
+let paneIdCounter: number = 0;
+export function nextPaneId(): string { return `pane-${++paneIdCounter}`; }
+
+export const SCROLLBACK_LIMIT: number = 200_000;
+export const MAX_PANES: number = 9; // per project context
+
+/** Count panes belonging to the given project (null = no project). */
+export function panesForProject(projectId: string | null): number {
+  return dashboardState.panes.filter((p: PaneInfo) => p.projectId === projectId).length;
+}
+
+/** Next sequential number for a pane within its project context. */
+export function nextNumForProject(projectId: string | null): number {
+  return panesForProject(projectId) + 1;
+}
+
+/** Renumber panes per-project (1-based sequential within each project). */
+export function renumberPanes(): void {
+  const counters = new Map<string, number>();
+  for (const p of dashboardState.panes) {
+    const key = p.projectId || '__none__';
+    const next = (counters.get(key) || 0) + 1;
+    counters.set(key, next);
+    p.num = next;
+    p.title = String(next);
+  }
+}
+
+// ── Multi-client resize arbitration ─────────────────────────────────────────
+// Each PTY has one "active" socket — the one that last sent input.
+// Only that socket's resize events are forwarded to the PTY.
+// When a different socket starts typing it takes over and immediately
+// resizes the PTY to its own dimensions, preventing SIGWINCH corruption.
+export const paneActiveSocket: Map<string, string> = new Map();   // paneId -> socketId
+export const socketDimensions: Map<string, Map<string, { cols: number; rows: number }>> = new Map(); // socketId -> Map<paneId, {cols, rows}>
+
+// ── Module-level namespace reference (set by initShell) ─────────────────────
+let shellNsp: Namespace | null = null;
+
+export function getShellNsp(): Namespace | null { return shellNsp; }
+
+export function setShellNsp(nsp: Namespace): void {
+  shellNsp = nsp;
+}