cyrus-studio 1.0.7 → 1.1.0

package/bin/dev-server.mjs

@@ -0,0 +1,692 @@
+#!/usr/bin/env node
+
+/**
+ * Cyrus Studio — Universal 1-Command Dev Bridge Server
+ * 
+ * Serves the standalone local Cyrus visual studio environment on localhost
+ * and syncs all canvas edits directly to local project files in real time.
+ * Zero external cloud dependencies required.
+ */
+
+import http from 'node:http';
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { exec } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { parseHtmlToCyrusProject } from './htmlParser.mjs';
+
+// ─── RESOLVE APP DIRECTORY ──────────────────────────────────────────
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Check both packages/cyrus-sdk/app and root dist/
+let appDir = path.resolve(__dirname, '../app');
+if (!fs.existsSync(path.join(appDir, 'index.html'))) {
+  const rootDist = path.resolve(__dirname, '../../../dist');
+  if (fs.existsSync(path.join(rootDist, 'index.html'))) {
+    appDir = rootDist;
+  }
+}
+
+// ─── CONFIG & ENVIRONMENT DETECTION ─────────────────────────────────
+const DB_DIR = path.join(os.homedir(), '.cyrus-studio');
+const CONFIG_FILE = path.join(DB_DIR, 'config.json');
+const LOCAL_CONFIG_DIR = path.join(process.cwd(), '.cyrus');
+const LOCAL_CONFIG_FILE = path.join(LOCAL_CONFIG_DIR, 'config.json');
+const PROJECT_SAVE_FILE = path.join(process.cwd(), '.cyrus', 'project.json');
+const GLOBAL_PROJECT_SAVE_FILE = path.join(os.homedir(), '.cyrus-studio', 'last-project.json');
+
+const DEFAULT_CONFIG = {
+  theme: 'dark',
+  framework: 'auto',
+};
+
+function loadCyrusConfig() {
+  let config = { ...DEFAULT_CONFIG };
+  try {
+    if (fs.existsSync(CONFIG_FILE)) {
+      const globalCfg = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+      config = { ...config, ...globalCfg };
+    }
+  } catch {}
+
+  try {
+    if (fs.existsSync(LOCAL_CONFIG_FILE)) {
+      const localCfg = JSON.parse(fs.readFileSync(LOCAL_CONFIG_FILE, 'utf8'));
+      config = { ...config, ...localCfg };
+    }
+  } catch {}
+
+  return config;
+}
+
+// ─── PROJECT STATE PERSISTENCE ───────────────────────────────────────
+/** Load the saved full project JSON from disk. Checks local .cyrus/ first, then global ~/.cyrus-studio/ */
+function loadSavedProject() {
+  // 1. Try local project-specific save
+  if (fs.existsSync(PROJECT_SAVE_FILE)) {
+    try {
+      const raw = fs.readFileSync(PROJECT_SAVE_FILE, 'utf8');
+      const project = JSON.parse(raw);
+      if (project && project.id && project.pages) {
+        return project;
+      }
+    } catch {}
+  }
+  // 2. Fallback to global last-used save
+  if (fs.existsSync(GLOBAL_PROJECT_SAVE_FILE)) {
+    try {
+      const raw = fs.readFileSync(GLOBAL_PROJECT_SAVE_FILE, 'utf8');
+      const project = JSON.parse(raw);
+      if (project && project.id && project.pages) {
+        return project;
+      }
+    } catch {}
+  }
+  return null;
+}
+
+/** Save the full project JSON to .cyrus/project.json and the global fallback */
+function saveProjectToDisk(project) {
+  try {
+    const localDir = path.dirname(PROJECT_SAVE_FILE);
+    if (!fs.existsSync(localDir)) fs.mkdirSync(localDir, { recursive: true });
+    fs.writeFileSync(PROJECT_SAVE_FILE, JSON.stringify(project, null, 2), 'utf8');
+  } catch (err) {
+    // Non-fatal: silently ignore write errors
+  }
+  try {
+    const globalDir = path.dirname(GLOBAL_PROJECT_SAVE_FILE);
+    if (!fs.existsSync(globalDir)) fs.mkdirSync(globalDir, { recursive: true });
+    fs.writeFileSync(GLOBAL_PROJECT_SAVE_FILE, JSON.stringify(project, null, 2), 'utf8');
+  } catch {}
+}
+
+
+
+// ─── AUTOMATIC FRAMEWORK DETECTION ───────────────────────────────────
+function detectProjectFramework() {
+  const cwd = process.cwd();
+  
+  if (fs.existsSync(path.join(cwd, 'pubspec.yaml'))) return 'flutter';
+  if (fs.existsSync(path.join(cwd, 'Package.swift'))) return 'swiftui';
+  
+  try {
+    const files = fs.readdirSync(cwd);
+    if (files.some(f => f.endsWith('.xcodeproj') || f.endsWith('.xcworkspace'))) return 'swiftui';
+  } catch {}
+
+  if (fs.existsSync(path.join(cwd, 'package.json'))) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf8'));
+      const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+      if (deps['next'] || deps['react'] || deps['vite'] || deps['tailwindcss']) return 'react';
+      if (deps['vue'] || deps['svelte']) return 'html';
+    } catch {}
+    return 'react';
+  }
+
+  try {
+    const files = fs.readdirSync(cwd);
+    if (files.some(f => f.endsWith('.html') || f.endsWith('.htm'))) {
+      return 'html';
+    }
+  } catch {}
+
+  return 'react';
+}
+
+// ─── CLI ARGUMENTS ──────────────────────────────────────────────────
+const rawArgs = process.argv.slice(2);
+const args = rawArgs.filter(a => a !== 'dev' && a !== 'start' && a !== 'open');
+
+const getArg = (key) => {
+  const match = args.find(a => a.startsWith(`--${key}=`));
+  if (match) return match.split('=').slice(1).join('=');
+  const index = args.indexOf(`--${key}`);
+  if (index !== -1 && args[index + 1]) return args[index + 1];
+  return null;
+};
+
+const config = loadCyrusConfig();
+const detectedFramework = detectProjectFramework();
+
+// Positional file argument support (e.g. `cyrus luck.html` or `cyrus ./src/App.tsx`)
+const positionalFile = args.find(a => !a.startsWith('-') && (a.includes('.') || fs.existsSync(path.resolve(process.cwd(), a))));
+const outPath = getArg('out') || positionalFile || null;
+
+// Infer framework from file extension if target file is provided
+function inferFrameworkFromFile(file) {
+  if (!file) return null;
+  const ext = path.extname(file).toLowerCase();
+  if (ext === '.html' || ext === '.htm') return 'html';
+  if (ext === '.dart') return 'flutter';
+  if (ext === '.swift') return 'swiftui';
+  if (ext === '.tsx' || ext === '.jsx' || ext === '.js' || ext === '.ts') return 'react';
+  return null;
+}
+
+const inferredFw = inferFrameworkFromFile(outPath);
+const framework = getArg('framework') || inferredFw || (config.framework !== 'auto' ? config.framework : detectedFramework) || 'react';
+const port      = parseInt(getArg('port') || '4799', 10);
+const projectId = getArg('project') || 'env';
+const theme     = getArg('theme') || config.theme || 'dark';
+const noOpen    = args.includes('--no-open');
+
+// ─── RESOLVE OUTPUT FILES ───────────────────────────────────────────
+function getOutputFiles() {
+  const cwd = process.cwd();
+
+  if (outPath) {
+    return { [framework]: path.resolve(cwd, outPath) };
+  }
+
+  const outputs = {};
+  const hasSrc = fs.existsSync(path.join(cwd, 'src'));
+  const hasLib = fs.existsSync(path.join(cwd, 'lib'));
+  const hasApp = fs.existsSync(path.join(cwd, 'app'));
+
+  if (framework === 'react') {
+    if (hasSrc) outputs.react = path.join(cwd, 'src', 'CyrusApp.tsx');
+    else if (hasApp) outputs.react = path.join(cwd, 'app', 'CyrusApp.tsx');
+    else outputs.react = path.join(cwd, 'App.jsx');
+  } else if (framework === 'flutter') {
+    outputs.flutter = hasLib ? path.join(cwd, 'lib', 'cyrus_ui.dart') : path.join(cwd, 'cyrus_ui.dart');
+  } else if (framework === 'swiftui') {
+    outputs.swiftui = path.join(cwd, 'ContentView.swift');
+  } else if (framework === 'html') {
+    if (fs.existsSync(path.join(cwd, 'index.html'))) {
+      outputs.html = path.join(cwd, 'index.html');
+    } else {
+      try {
+        const files = fs.readdirSync(cwd);
+        const firstHtml = files.find(f => f.endsWith('.html') || f.endsWith('.htm'));
+        outputs.html = firstHtml ? path.join(cwd, firstHtml) : path.join(cwd, 'index.html');
+      } catch {
+        outputs.html = path.join(cwd, 'index.html');
+      }
+    }
+  }
+
+  const cyrusDir = path.join(cwd, '.cyrus');
+  if (!fs.existsSync(cyrusDir)) fs.mkdirSync(cyrusDir, { recursive: true });
+
+  return {
+    ...outputs,
+    react: outputs.react || path.join(cyrusDir, 'App.jsx'),
+    html: outputs.html || path.join(cyrusDir, 'index.html'),
+    flutter: outputs.flutter || path.join(cyrusDir, 'app.dart'),
+    swiftui: outputs.swiftui || path.join(cyrusDir, 'ContentView.swift'),
+  };
+}
+
+// ─── MIME TYPES ─────────────────────────────────────────────────────
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.js':   'application/javascript; charset=utf-8',
+  '.mjs':  'application/javascript; charset=utf-8',
+  '.css':  'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg':  'image/svg+xml',
+  '.png':  'image/png',
+  '.jpg':  'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.ico':  'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2':'font/woff2',
+  '.ttf':  'font/ttf',
+};
+
+// ─── FILE SYNC ENGINE ───────────────────────────────────────────────
+function writeCodeFiles(payload) {
+  const outputFiles = getOutputFiles();
+  const written = [];
+
+  for (const [fw, filePath] of Object.entries(outputFiles)) {
+    const code = payload[fw];
+    if (!code) continue;
+    if (outPath && fw !== framework) continue;
+
+    try {
+      const dir = path.dirname(filePath);
+      if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+      fs.writeFileSync(filePath, code, 'utf8');
+      written.push(filePath);
+    } catch (err) {
+      console.error(`  ✗ Failed to write ${filePath}:`, err.message);
+    }
+  }
+
+  if (written.length > 0) {
+    console.log(`  \x1b[32m✓\x1b[0m ${new Date().toLocaleTimeString()} — Synced visual edits to disk:`);
+    written.forEach(f => console.log(`      \x1b[36m${path.relative(process.cwd(), f)}\x1b[0m`));
+  }
+}
+
+// ─── ZERO-DEPENDENCY RFC 6455 WEBSOCKET ENGINE ───────────────────────
+const wsClients = new Set();
+
+function broadcastWs(msgObj) {
+  const data = JSON.stringify(msgObj);
+  const payload = Buffer.from(data, 'utf8');
+  const len = payload.length;
+
+  let header;
+  if (len < 126) {
+    header = Buffer.from([0x81, len]);
+  } else if (len <= 0xFFFF) {
+    header = Buffer.alloc(4);
+    header[0] = 0x81;
+    header[1] = 126;
+    header.writeUInt16BE(len, 2);
+  } else {
+    header = Buffer.alloc(10);
+    header[0] = 0x81;
+    header[1] = 127;
+    header.writeBigUInt64BE(BigInt(len), 2);
+  }
+
+  const frame = Buffer.concat([header, payload]);
+  for (const client of wsClients) {
+    try { client.socket.write(frame); } catch {}
+  }
+}
+
+function handleWsUpgrade(req, socket, head) {
+  const key = req.headers['sec-websocket-key'];
+  if (!key) {
+    socket.destroy();
+    return;
+  }
+
+  const acceptKey = crypto.createHash('sha1')
+    .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
+    .digest('base64');
+
+  const headers = [
+    'HTTP/1.1 101 Switching Protocols',
+    'Upgrade: websocket',
+    'Connection: Upgrade',
+    `Sec-WebSocket-Accept: ${acceptKey}`,
+    '', ''
+  ];
+  socket.write(headers.join('\r\n'));
+
+  const client = { socket };
+  wsClients.add(client);
+  console.log(`  \x1b[32m●\x1b[0m Canvas connected to live disk sync bridge`);
+
+  // ── Immediately restore last saved project state to this canvas ──
+  const savedProject = loadSavedProject();
+  if (savedProject) {
+    try {
+      const restoreMsg = JSON.stringify({ type: 'RESTORE_PROJECT', payload: savedProject });
+      const restorePayload = Buffer.from(restoreMsg, 'utf8');
+      const len = restorePayload.length;
+      let header;
+      if (len < 126) {
+        header = Buffer.from([0x81, len]);
+      } else if (len <= 0xFFFF) {
+        header = Buffer.alloc(4);
+        header[0] = 0x81; header[1] = 126;
+        header.writeUInt16BE(len, 2);
+      } else {
+        header = Buffer.alloc(10);
+        header[0] = 0x81; header[1] = 127;
+        header.writeBigUInt64BE(BigInt(len), 2);
+      }
+      socket.write(Buffer.concat([header, restorePayload]));
+    } catch {}
+  }
+
+  let buffer = Buffer.alloc(0);
+
+  socket.on('data', (chunk) => {
+    buffer = Buffer.concat([buffer, chunk]);
+    while (buffer.length >= 2) {
+      const byte1 = buffer[0];
+      const byte2 = buffer[1];
+      const opcode = byte1 & 0x0f;
+      const isMasked = (byte2 & 0x80) !== 0;
+      let payloadLength = byte2 & 0x7f;
+      let offset = 2;
+
+      if (payloadLength === 126) {
+        if (buffer.length < offset + 2) break;
+        payloadLength = buffer.readUInt16BE(offset);
+        offset += 2;
+      } else if (payloadLength === 127) {
+        if (buffer.length < offset + 8) break;
+        payloadLength = Number(buffer.readBigUInt64BE(offset));
+        offset += 8;
+      }
+
+      let mask = null;
+      if (isMasked) {
+        if (buffer.length < offset + 4) break;
+        mask = buffer.subarray(offset, offset + 4);
+        offset += 4;
+      }
+
+      if (buffer.length < offset + payloadLength) break;
+
+      const payload = buffer.subarray(offset, offset + payloadLength);
+      buffer = buffer.subarray(offset + payloadLength);
+
+      if (isMasked && mask) {
+        for (let i = 0; i < payload.length; i++) {
+          payload[i] ^= mask[i % 4];
+        }
+      }
+
+      if (opcode === 0x8) {
+        socket.end();
+        break;
+      }
+
+      if (opcode === 0x1) {
+        try {
+          const text = payload.toString('utf8');
+          const msg = JSON.parse(text);
+
+          if (msg.type === 'CODE_SYNC') {
+            writeCodeFiles(msg.payload);
+          }
+
+          // Full project state save — persists canvas between sessions
+          if (msg.type === 'SAVE_PROJECT' && msg.payload && msg.payload.id) {
+            saveProjectToDisk(msg.payload);
+          }
+
+          if (msg.type === 'STATE_CHANGED') {
+            const stateFile = path.resolve(process.cwd(), '.cyrus', 'state.json');
+            try {
+              if (!fs.existsSync(path.dirname(stateFile))) {
+                fs.mkdirSync(path.dirname(stateFile), { recursive: true });
+              }
+              fs.writeFileSync(stateFile, JSON.stringify(msg.payload, null, 2), 'utf8');
+            } catch {}
+          }
+        } catch {}
+      }
+    }
+  });
+
+  socket.on('close', () => {
+    wsClients.delete(client);
+    console.log('  ○ Canvas disconnected from bridge');
+  });
+
+  socket.on('error', () => {
+    wsClients.delete(client);
+  });
+}
+
+
+// ─── PARSE EXISTING CODE FROM DISK ON STARTUP ───────────────────────
+function getInitialProjectFromDisk() {
+  // 1. Check if we have a persisted project from a previous session
+  const saved = loadSavedProject();
+  if (saved) return saved;
+
+  // 2. Parse from disk target file (e.g. HTML or React component)
+  const outputs = getOutputFiles();
+  const targetFile = outPath ? path.resolve(process.cwd(), outPath) : (outputs.html || outputs.react);
+
+  if (targetFile && fs.existsSync(targetFile)) {
+    try {
+      const content = fs.readFileSync(targetFile, 'utf8');
+      if (content.trim()) {
+        const ext = path.extname(targetFile).toLowerCase();
+        if (ext === '.html' || ext === '.htm') {
+          return parseHtmlToCyrusProject(content, path.basename(targetFile));
+        }
+      }
+    } catch (err) {
+      console.error('  ✗ Error parsing existing file from disk:', err.message);
+    }
+  }
+  return null;
+}
+
+// ─── START LOCAL SDK HTTP SERVER ────────────────────────────────────
+function startServer() {
+  const httpServer = http.createServer((req, res) => {
+    const parsedUrl = new URL(req.url, 'http://localhost');
+    let pathname = decodeURIComponent(parsedUrl.pathname);
+
+    // API Initial project from disk
+    if (pathname === '/api/initial-project') {
+      const project = getInitialProjectFromDisk();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(project || {}));
+      return;
+    }
+
+    // API: serve the raw source file content for iframe rendering
+    if (pathname === '/api/raw-file') {
+      const outputs = getOutputFiles();
+      const targetFile = outPath ? path.resolve(process.cwd(), outPath) : (outputs.html || outputs.react);
+      if (targetFile && fs.existsSync(targetFile)) {
+        try {
+          let content = fs.readFileSync(targetFile, 'utf8');
+          // Inject live-reload script so the canvas iframe auto-refreshes on disk changes
+          const liveReloadScript = `<script>
+(function(){
+  var lastCheck = Date.now();
+  setInterval(function(){
+    fetch('/api/file-mtime').then(r=>r.json()).then(function(d){
+      if(d.mtime && d.mtime > lastCheck){ lastCheck = d.mtime; location.reload(); }
+    }).catch(function(){});
+  }, 800);
+})();
+</script>`;
+          content = content.replace('</body>', liveReloadScript + '</body>') ||
+                    content + liveReloadScript;
+          res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'X-Frame-Options': 'SAMEORIGIN' });
+          res.end(content);
+        } catch (err) {
+          res.writeHead(500);
+          res.end('Error reading file: ' + err.message);
+        }
+      } else {
+        res.writeHead(404);
+        res.end('No target file found');
+      }
+      return;
+    }
+
+    // API: file modification time for live-reload
+    if (pathname === '/api/file-mtime') {
+      const outputs = getOutputFiles();
+      const targetFile = outPath ? path.resolve(process.cwd(), outPath) : (outputs.html || outputs.react);
+      if (targetFile && fs.existsSync(targetFile)) {
+        const stat = fs.statSync(targetFile);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ mtime: stat.mtimeMs, file: path.basename(targetFile) }));
+      } else {
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ mtime: 0 }));
+      }
+      return;
+    }
+
+    // API: file info (name, framework, path)
+    if (pathname === '/api/file-info') {
+      const outputs = getOutputFiles();
+      const targetFile = outPath ? path.resolve(process.cwd(), outPath) : (outputs.html || outputs.react);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        file: targetFile ? path.basename(targetFile) : null,
+        path: targetFile || null,
+        framework,
+        hasFile: !!(targetFile && fs.existsSync(targetFile)),
+      }));
+      return;
+    }
+
+    // API Health check
+    if (pathname === '/health') {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ status: 'ok', framework, version: '1.1.0' }));
+      return;
+    }
+
+    // Default root path: Serve Cyrus SPA (which routes to /#/embed/env)
+    if (pathname === '/' || pathname === '/index.html' || pathname === '') {
+      pathname = '/index.html';
+    }
+
+    const filePath = path.join(appDir, pathname);
+
+    // Security check: stay within appDir
+    if (!filePath.startsWith(appDir)) {
+      res.writeHead(403);
+      res.end('Forbidden');
+      return;
+    }
+
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+      const ext = path.extname(filePath).toLowerCase();
+      const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+      
+      // If serving index.html, inject the WebSocket bridge script and initial project
+      if (ext === '.html') {
+        let html = fs.readFileSync(filePath, 'utf8');
+        const initialProject = getInitialProjectFromDisk();
+        const initialProjectScript = initialProject ? `\n<script>window.__CYRUS_INITIAL_PROJECT__ = ${JSON.stringify(initialProject)};</script>` : '';
+        const bridgeScript = `
+<script>
+  (function() {
+    try {
+      var ws = new WebSocket('ws://' + window.location.host + '/');
+      window.__CYRUS_DEV_WS__ = ws;
+      ws.onmessage = function(e) {
+        try {
+          var msg = JSON.parse(e.data);
+          if (msg.type === 'RESTORE_PROJECT' && msg.payload) {
+            window.dispatchEvent(new CustomEvent('cyrus-restore-project', { detail: msg.payload }));
+          }
+        } catch(err) {}
+      };
+      window.addEventListener('message', function(e) {
+        if (e.data && e.data.type === 'CYRUS_CODE_SYNC' && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'CODE_SYNC', payload: e.data.payload }));
+        }
+      });
+    } catch(err) {}
+  })();
+</script>`;
+        if (html.includes('</head>')) {
+          html = html.replace('</head>', initialProjectScript + '</head>');
+        } else {
+          html = initialProjectScript + html;
+        }
+        html = html.replace('</body>', bridgeScript + '</body>');
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(html);
+        return;
+      }
+
+      res.writeHead(200, { 'Content-Type': contentType });
+      fs.createReadStream(filePath).pipe(res);
+    } else {
+      // Fallback for SPA routing to index.html
+      const indexFile = path.join(appDir, 'index.html');
+      if (fs.existsSync(indexFile)) {
+        let html = fs.readFileSync(indexFile, 'utf8');
+        const initialProject = getInitialProjectFromDisk();
+        const initialProjectScript = initialProject ? `\n<script>window.__CYRUS_INITIAL_PROJECT__ = ${JSON.stringify(initialProject)};</script>` : '';
+        const bridgeScript = `
+<script>
+  (function() {
+    try {
+      var ws = new WebSocket('ws://' + window.location.host + '/');
+      window.__CYRUS_DEV_WS__ = ws;
+      ws.onmessage = function(e) {
+        try {
+          var msg = JSON.parse(e.data);
+          if (msg.type === 'RESTORE_PROJECT' && msg.payload) {
+            window.dispatchEvent(new CustomEvent('cyrus-restore-project', { detail: msg.payload }));
+          }
+        } catch(err) {}
+      };
+      window.addEventListener('message', function(e) {
+        if (e.data && e.data.type === 'CYRUS_CODE_SYNC' && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'CODE_SYNC', payload: e.data.payload }));
+        }
+      });
+    } catch(err) {}
+  })();
+</script>`;
+        if (html.includes('</head>')) {
+          html = html.replace('</head>', initialProjectScript + '</head>');
+        } else {
+          html = initialProjectScript + html;
+        }
+        html = html.replace('</body>', bridgeScript + '</body>');
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        res.end(html);
+      } else {
+        res.writeHead(404);
+        res.end('Not found');
+      }
+    }
+  });
+
+  httpServer.on('upgrade', handleWsUpgrade);
+
+  function tryListen(currentPort, attemptsLeft = 5) {
+    httpServer.listen(currentPort, '127.0.0.1', () => {
+      const localUrl = `http://localhost:${currentPort}`;
+      const embedUrl = localUrl;
+      const outputFiles = getOutputFiles();
+
+      console.log(`
+╔════════════════════════════════════════════════════════════════════╗
+║             🎨 CYRUS STUDIO — STANDALONE LOCAL SDK                 ║
+║           Visual Canvas & Instant Bi-directional Code Sync         ║
+╚════════════════════════════════════════════════════════════════════╝
+
+  ⚡ Command Ran   : \x1b[33mcyrus\x1b[0m
+  🌐 Studio Canvas : \x1b[32m${localUrl}\x1b[0m
+  🛠️  Detected Stack: \x1b[35m${framework.toUpperCase()}\x1b[0m
+
+  📂 Sync Target:
+${Object.entries(outputFiles)
+  .filter(([fw]) => !outPath || fw === framework)
+  .map(([fw, f]) => `    • [${fw.toUpperCase().padEnd(7)}] -> \x1b[33m${path.relative(process.cwd(), f)}\x1b[0m`)
+  .join('\n')}
+
+  ✨ Editing on the visual canvas automatically updates code in your project!
+  💡 To exit: Press Ctrl+C
+`);
+
+      if (!noOpen) {
+        const platform = process.platform;
+        const cmd =
+          platform === 'win32'  ? `start "" "${embedUrl}"` :
+          platform === 'darwin' ? `open "${embedUrl}"` :
+                                  `xdg-open "${embedUrl}"`;
+        exec(cmd, (err) => {
+          if (err) console.log(`  Open in browser manually: ${embedUrl}`);
+        });
+      }
+    });
+
+    httpServer.once('error', (err) => {
+      if (err.code === 'EADDRINUSE' && attemptsLeft > 0) {
+        tryListen(currentPort + 1, attemptsLeft - 1);
+      } else {
+        console.error('\n  ✗ Server error:', err.message, '\n');
+        process.exit(1);
+      }
+    });
+  }
+
+  tryListen(port);
+}
+
+startServer();