@macle-community/simulator-web 0.0.0-stage → 1.0.0

package/src/server.js

@@ -0,0 +1,334 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+const os = require('os');
+const { parseProject } = require('./project-parser');
+const { compileProject, findMacleCompiler } = require('./compiler');
+const { createMockBackend } = require('./mock-backend');
+const { LiveReloadManager } = require('./watcher');
+
+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',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf'
+};
+
+class MacleWebSimulatorServer {
+  constructor(options = {}) {
+    this.port = options.port || 30001;
+    this.host = options.host || '0.0.0.0';
+    this.sourceDir = options.source ? path.resolve(options.source) : null;
+    this.runtimeDir = path.resolve(__dirname, '../runtime');
+    this.webDir = path.resolve(__dirname, '../web');
+    this.projectInfo = null;
+    this.appDir = null;
+    this.mockBackend = null;
+    this.liveReload = new LiveReloadManager();
+    this.server = null;
+    this.isWatching = !!options.watch;
+  }
+
+  async init() {
+    // If no source path provided, search for default sample-project or opendoc
+    if (!this.sourceDir) {
+      const candidates = [
+        path.resolve(__dirname, '../../sample-project/dist'),
+        path.resolve(__dirname, '../../sample-project'),
+        path.resolve(__dirname, '../../opendoc/miniapp-taro/dist'),
+        path.resolve(__dirname, '../../opendoc/miniapp')
+      ];
+      this.sourceDir = candidates.find(c => fs.existsSync(c)) || path.resolve('.');
+    }
+
+    // Parse project
+    this.projectInfo = parseProject(this.sourceDir);
+    const projectName = this.projectInfo.projectName;
+
+    // Compile if necessary
+    const compileRes = await compileProject(this.sourceDir, projectName);
+    this.appDir = compileRes.outDir;
+
+    // Initialize mock backend for this app
+    this.mockBackend = createMockBackend(this.appDir);
+
+    // Setup watcher if requested
+    if (this.isWatching) {
+      this.liveReload.watchDirectory(this.sourceDir, async () => {
+        await compileProject(this.sourceDir, projectName);
+      });
+    }
+
+    return this;
+  }
+
+  start() {
+    this.server = http.createServer((req, res) => {
+      this.handleRequest(req, res);
+    });
+
+    return new Promise((resolve, reject) => {
+      this.server.listen(this.port, this.host, () => {
+        const localUrl = `http://localhost:${this.port}`;
+        const networkIp = getNetworkIp();
+        const networkUrl = networkIp ? `http://${networkIp}:${this.port}` : null;
+
+        console.log('\n======================================================');
+        console.log('   🚀 Macle Web Simulator (Standalone Edition)');
+        console.log('======================================================');
+        console.log(`  Project:     ${this.projectInfo.projectName}`);
+        console.log(`  Source:      ${this.sourceDir}`);
+        console.log(`  App Target:  ${this.appDir}`);
+        console.log(`  Local URL:   ${localUrl}`);
+        if (networkUrl) {
+          console.log(`  Network URL: ${networkUrl} (Scan on mobile)`);
+        }
+        console.log(`  Workbench:   ${localUrl}/`);
+        console.log(`  Dual-Thread: ${localUrl}/dist/root/debug/simulator/index.html`);
+        console.log('======================================================\n');
+
+        resolve({ localUrl, networkUrl, port: this.port });
+      });
+
+      this.server.on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+          console.warn(`[Simulator] Port ${this.port} is in use, trying ${this.port + 1}...`);
+          this.port++;
+          this.server.listen(this.port, this.host);
+        } else {
+          reject(err);
+        }
+      });
+    });
+  }
+
+  handleRequest(req, res) {
+    // Add CORS & iFrame permissions headers to all responses
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', '*');
+    res.setHeader('X-Frame-Options', 'ALLOWALL');
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204);
+      return res.end();
+    }
+
+    const parsedUrl = url.parse(req.url, true);
+    const reqPath = parsedUrl.pathname;
+
+    // 1. API: Live Reload SSE
+    if (reqPath === '/api/live-reload') {
+      return this.liveReload.addClient(res);
+    }
+
+    // 2. API: Project Info
+    if (reqPath === '/api/project-info') {
+      const info = {
+        projectName: this.projectInfo.projectName,
+        sourceDir: this.sourceDir,
+        appDir: this.appDir,
+        pages: this.projectInfo.pages,
+        entryPagePath: this.projectInfo.entryPagePath,
+        window: this.projectInfo.window,
+        tabBar: this.projectInfo.tabBar,
+        simulatorUrl: `/dist/root/debug/simulator/index.html`,
+        engineVersion: '26.6.0-LG0001',
+        runtimeVersion: '100.4.2'
+      };
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify(info));
+    }
+
+    // 3. API: Recompile
+    if (reqPath === '/api/recompile' && req.method === 'POST') {
+      compileProject(this.sourceDir, this.projectInfo.projectName).then(result => {
+        this.liveReload.notifyReload('manual-recompile');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify(result));
+      });
+      return;
+    }
+
+    // 4. MCSS Native Mock Backend (/mcss/simulate/*)
+    if (reqPath.startsWith('/mcss/simulate')) {
+      return this.handleMockBackend(req, res, parsedUrl);
+    }
+
+    // 5. Web Simulator Workbench Shell (/ and /__web)
+    if (reqPath === '/' || reqPath === '/__web' || reqPath === '/index.html') {
+      return this.serveStaticFile(path.join(this.webDir, 'index.html'), res);
+    }
+    if (reqPath === '/simulator.css') {
+      return this.serveStaticFile(path.join(this.webDir, 'simulator.css'), res);
+    }
+    if (reqPath === '/simulator.js') {
+      return this.serveStaticFile(path.join(this.webDir, 'simulator.js'), res);
+    }
+    if (reqPath === '/qrcode.js') {
+      return this.serveStaticFile(path.join(this.webDir, 'qrcode.js'), res);
+    }
+
+    // 6. Dual-thread Macle Runtime Routing:
+    // Resolve:
+    // - /dist/root/debug/framework/... or /framework/... -> runtimeDir/framework/...
+    // - /dist/root/debug/simulator/... or /simulator/... -> runtimeDir/simulator/...
+    // - /dist/root/debug/app/... or /app/... -> appDir/...
+    let diskPath = this.resolveRuntimePath(reqPath);
+    if (diskPath && fs.existsSync(diskPath)) {
+      const stat = fs.statSync(diskPath);
+      if (stat.isDirectory()) {
+        diskPath = path.join(diskPath, 'index.html');
+      }
+      if (fs.existsSync(diskPath)) {
+        return this.serveStaticFile(diskPath, res);
+      }
+    }
+
+    // 7. Check if file exists inside appDir directly (e.g. static assets, images)
+    const directAppPath = path.join(this.appDir, reqPath.replace(/^\//, ''));
+    if (fs.existsSync(directAppPath) && fs.statSync(directAppPath).isFile()) {
+      return this.serveStaticFile(directAppPath, res);
+    }
+
+    // 8. 404 Not Found
+    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    res.end(`404 Not Found: ${reqPath}`);
+  }
+
+  resolveRuntimePath(reqPath) {
+    // Strip project name or /dist prefix if present:
+    // e.g. /dist/root/debug/framework/... or /miniapp/root/debug/framework/... -> /root/debug/framework/...
+    const normalized = reqPath.replace(/^\/(dist|[a-zA-Z0-9_-]+)\/root\/debug\//, '/');
+
+    if (normalized.startsWith('/framework/')) {
+      const sub = normalized.replace(/^\/framework\//, '');
+      return path.join(this.runtimeDir, 'framework', sub);
+    }
+
+    if (normalized.startsWith('/simulator/')) {
+      const sub = normalized.replace(/^\/simulator\//, '');
+      return path.join(this.runtimeDir, 'simulator', sub);
+    }
+
+    if (normalized.startsWith('/remoteDebug/')) {
+      const sub = normalized.replace(/^\/remoteDebug\//, '');
+      return path.join(this.runtimeDir, 'remoteDebug', sub);
+    }
+
+    if (normalized.startsWith('/app/')) {
+      const sub = normalized.replace(/^\/app\//, '');
+      return path.join(this.appDir, sub);
+    }
+
+    // Fallbacks for direct relative references
+    if (reqPath.startsWith('/root/debug/framework/')) {
+      return path.join(this.runtimeDir, 'framework', reqPath.replace('/root/debug/framework/', ''));
+    }
+    if (reqPath.startsWith('/root/debug/simulator/')) {
+      return path.join(this.runtimeDir, 'simulator', reqPath.replace('/root/debug/simulator/', ''));
+    }
+    if (reqPath.startsWith('/root/debug/app/')) {
+      return path.join(this.appDir, reqPath.replace('/root/debug/app/', ''));
+    }
+
+    return null;
+  }
+
+  serveStaticFile(filePath, res) {
+    const ext = path.extname(filePath).toLowerCase();
+    const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(500, { 'Content-Type': 'text/plain' });
+        return res.end('Internal Server Error: ' + err.message);
+      }
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(data);
+    });
+  }
+
+  handleMockBackend(req, res, parsedUrl) {
+    const subRoute = parsedUrl.pathname.replace(/^\/mcss\/simulate/, '');
+
+    if (req.method === 'POST') {
+      let bodyStr = '';
+      req.on('data', chunk => bodyStr += chunk);
+      req.on('end', () => {
+        let body = {};
+        try {
+          body = JSON.parse(bodyStr);
+        } catch (e) {
+          body = { data: bodyStr };
+        }
+
+        if (subRoute === '/requestData') {
+          return this.mockBackend.handleRequestData(req, res, body);
+        }
+        if (subRoute === '/saveFile') {
+          return this.mockBackend.handleSaveFile(req, res, body);
+        }
+        if (subRoute === '/removeSaved') {
+          return this.mockBackend.handleRemoveSaved(req, res, body);
+        }
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ errMsg: `${subRoute.replace('/', '')}:ok` }));
+      });
+      return;
+    }
+
+    if (req.method === 'GET') {
+      if (subRoute === '/fileInfo') {
+        return this.mockBackend.handleFileInfo(req, res, parsedUrl.query);
+      }
+      if (subRoute === '/savedFileList') {
+        return this.mockBackend.handleSavedFileList(req, res);
+      }
+      if (subRoute === '/savedFileInfo') {
+        return this.mockBackend.handleSavedFileInfo(req, res, parsedUrl.query);
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ errMsg: `${subRoute.replace('/', '')}:ok` }));
+      return;
+    }
+
+    res.writeHead(405, { 'Content-Type': 'text/plain' });
+    res.end('Method Not Allowed');
+  }
+
+  close() {
+    this.liveReload.closeAll();
+    if (this.server) {
+      this.server.close();
+    }
+  }
+}
+
+function getNetworkIp() {
+  const nets = os.networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      if (net.family === 'IPv4' && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+  return null;
+}
+
+module.exports = { MacleWebSimulatorServer };

package/src/watcher.js

@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+const EventEmitter = require('events');
+
+class LiveReloadManager extends EventEmitter {
+  constructor() {
+    super();
+    this.clients = new Set();
+    this.watchers = [];
+    this.debounceTimer = null;
+  }
+
+  addClient(res) {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+      'Access-Control-Allow-Origin': '*'
+    });
+    res.write('data: connected\n\n');
+    this.clients.add(res);
+
+    res.on('close', () => {
+      this.clients.delete(res);
+    });
+  }
+
+  notifyReload(reason = 'file-change') {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      console.log(`[Watcher] Triggering simulator reload (reason: ${reason})...`);
+      for (const client of this.clients) {
+        try {
+          client.write('data: reload\n\n');
+        } catch (e) {
+          this.clients.delete(client);
+        }
+      }
+      this.emit('reload', reason);
+    }, 300);
+  }
+
+  watchDirectory(targetDir, onChangeCallback) {
+    if (!fs.existsSync(targetDir)) return;
+    try {
+      const watcher = fs.watch(targetDir, { recursive: true }, (eventType, filename) => {
+        if (!filename) return;
+        // Ignore dotfiles, temp files, node_modules, and git
+        if (filename.startsWith('.') || filename.includes('node_modules') || filename.includes('.git')) {
+          return;
+        }
+        if (onChangeCallback) {
+          onChangeCallback(eventType, filename);
+        }
+        this.notifyReload(filename);
+      });
+      this.watchers.push(watcher);
+      console.log(`[Watcher] Watching directory for live reload: ${targetDir}`);
+    } catch (err) {
+      console.warn(`[Watcher] Could not watch ${targetDir}:`, err.message);
+    }
+  }
+
+  closeAll() {
+    for (const w of this.watchers) {
+      try { w.close(); } catch (e) {}
+    }
+    this.watchers = [];
+    for (const c of this.clients) {
+      try { c.end(); } catch (e) {}
+    }
+    this.clients.clear();
+  }
+}
+
+module.exports = { LiveReloadManager };

package/web/index.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Macle MiniProgram Web Simulator</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📱</text></svg>">
+  <link rel="stylesheet" href="simulator.css">
+  <script src="qrcode.js"></script>
+</head>
+<body>
+
+  <!-- Top Toolbar -->
+  <header class="toolbar">
+    <div class="toolbar-left">
+      <div class="logo-badge">
+        <div class="logo-icon">M</div>
+        <span>Macle Simulator</span>
+        <span class="logo-tag">Web Edition</span>
+      </div>
+
+      <div class="control-group">
+        <span class="control-label">Device</span>
+        <select id="device-select" class="control-select"></select>
+      </div>
+
+      <div class="control-group">
+        <span class="control-label">Page</span>
+        <select id="page-select" class="control-select">
+          <option value="pages/index/index">pages/index/index</option>
+        </select>
+      </div>
+
+      <div class="control-group">
+        <span class="control-label">Zoom</span>
+        <select id="scale-select" class="control-select">
+          <option value="1.0" selected>100%</option>
+          <option value="0.85">85%</option>
+          <option value="0.75">75%</option>
+          <option value="0.5">50%</option>
+          <option value="1.25">125%</option>
+          <option value="fit">Fit Screen</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="toolbar-center">
+      <button id="rotate-btn" class="tool-btn" title="Toggle Orientation (Portrait / Landscape)">
+        <svg viewBox="0 0 24 24"><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zM7.52 21.48C4.25 19.93 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zM7 7h10v10H7z"/></svg>
+        Rotate
+      </button>
+
+      <button id="touch-btn" class="tool-btn" title="Toggle Touch Simulation">
+        <svg viewBox="0 0 24 24"><path d="M9 11.24V7.5a2.5 2.5 0 0 1 5 0v3.74c1.21-.81 2-2.18 2-3.74a4.5 4.5 0 0 0-9 0c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26a1.53 1.53 0 0 0-1.8.34l-.87.87 5.48 5.48c.39.39 1.02.39 1.41 0l.32-.32c1.7-1.7 1.7-4.43 0-6.11zM11.5 1a6.5 6.5 0 0 1 6.5 6.5c0 1.63-.6 3.12-1.6 4.26l.72.36a3.5 3.5 0 0 1 1.7 4.54c-.16.39-.39.75-.68 1.04l-.32.32a3.5 3.5 0 0 1-4.95 0L8.2 13.34c-.87-.87-.87-2.27 0-3.14l1.3-.8V7.5A4.5 4.5 0 0 1 14 3a4.5 4.5 0 0 1 4 2.45c.48-.3 1.04-.45 1.62-.45 1.66 0 3 1.34 3 3 0 .73-.26 1.4-.7 1.93.9.7 1.48 1.79 1.48 3.01 0 1.94-1.4 3.55-3.26 3.88l-4.66 2.33a3.5 3.5 0 0 1-3.13 0l-4.73-2.37A6.98 6.98 0 0 1 5 11.5 6.5 6.5 0 0 1 11.5 1z"/></svg>
+        Touch
+      </button>
+
+      <div class="control-group">
+        <span class="control-label">Network</span>
+        <select id="network-select" class="control-select">
+          <option value="wifi" selected>WiFi</option>
+          <option value="5g">5G</option>
+          <option value="4g">4G</option>
+          <option value="3g">3G</option>
+          <option value="none">Offline</option>
+        </select>
+      </div>
+
+      <button id="refresh-btn" class="tool-btn" title="Refresh MiniProgram">
+        <svg viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+        Refresh
+      </button>
+    </div>
+
+    <div class="toolbar-right">
+      <button id="qr-btn" class="tool-btn" title="Preview on Mobile Device via QR Code">
+        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm13-2h3v2h-3zm-5 0h2v3h-2zm2 3h3v2h-3zm-2 2h2v3h-2zm3 0h3v3h-3z"/></svg>
+        Mobile Preview
+      </button>
+
+      <button id="devtools-btn" class="tool-btn" title="Toggle Developer Tools Console">
+        <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
+        DevTools
+      </button>
+    </div>
+  </header>
+
+  <!-- Canvas -->
+  <main class="canvas">
+    <div id="device-wrapper" class="device-wrapper">
+      <div id="device-frame" class="device-frame">
+        <div id="device-notch" class="device-notch">
+          <div class="notch-sensor"></div>
+          <div class="notch-camera"></div>
+        </div>
+
+        <div class="device-screen">
+          <iframe id="simulator-iframe" class="simulator-iframe" allow="geolocation; microphone; camera"></iframe>
+          <div class="touch-overlay"></div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- Touch Cursor Overlay -->
+  <div id="touch-cursor" class="touch-cursor"></div>
+
+  <!-- Status Bar Footer -->
+  <footer class="statusbar">
+    <div class="statusbar-left">
+      <div class="status-badge">
+        <span class="status-dot"></span>
+        <span>Connected</span>
+      </div>
+      <div class="path-display">
+        <span>Page:</span>
+        <strong id="page-path">-</strong>
+        <button id="copy-path-btn" class="copy-btn" title="Copy Path">
+          <svg style="width:12px;height:12px;fill:currentColor" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="statusbar-right">
+      <span>Auto-Reload: <strong style="color:var(--success-color)">Active</strong></span>
+      <span>Engine: <strong>Macle 26.6.0-LG0001 (100.4.2)</strong></span>
+    </div>
+  </footer>
+
+  <!-- DevTools Drawer -->
+  <div id="devtools-drawer" class="devtools-drawer">
+    <div class="devtools-header">
+      <div class="devtools-tabs">
+        <div class="devtools-tab active" data-tab="console">Console</div>
+        <div class="devtools-tab" data-tab="storage">Storage</div>
+        <div class="devtools-tab" data-tab="network">Network</div>
+        <div class="devtools-tab" data-tab="app-info">App Info</div>
+      </div>
+      <div class="devtools-actions">
+        <input type="text" id="filter-logs" class="filter-input" placeholder="Filter console logs...">
+        <button id="clear-logs" class="tool-btn" style="padding:2px 8px;font-size:11px">Clear</button>
+        <button id="close-devtools" class="tool-btn" style="padding:2px 8px;font-size:11px">✕</button>
+      </div>
+    </div>
+
+    <!-- Console Tab -->
+    <div id="tab-console" class="tab-pane active" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
+      <div id="logs-container" class="devtools-content">
+        <div class="log-entry">
+          <span class="log-time">--:--:--</span>
+          <span class="log-level info">info</span>
+          <span class="log-msg">Macle Web Simulator DevTools initialized. Logs from the miniprogram logic and view threads appear here.</span>
+        </div>
+      </div>
+
+      <form id="eval-form" class="devtools-eval">
+        <span class="eval-prompt">&gt;</span>
+        <input type="text" id="eval-input" class="eval-input" placeholder="Execute JavaScript in miniprogram window...">
+      </form>
+    </div>
+
+    <!-- Storage Tab -->
+    <div id="tab-storage" class="tab-pane" style="display:none;flex:1;overflow-y:auto;padding:12px;background:#090d16;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+        <span style="font-size:12px;font-weight:600;color:var(--text-secondary)">Local / MiniProgram Storage Keys</span>
+        <button id="refresh-storage-btn" class="tool-btn" style="padding:2px 8px;font-size:11px">Refresh</button>
+      </div>
+      <table id="storage-table" style="width:100%;border-collapse:collapse;font-size:12px;font-family:monospace;">
+        <thead>
+          <tr style="border-bottom:1px solid var(--border-color);color:var(--text-muted);text-align:left;">
+            <th style="padding:6px;">Key</th>
+            <th style="padding:6px;">Value</th>
+            <th style="padding:6px;width:60px;">Action</th>
+          </tr>
+        </thead>
+        <tbody id="storage-body">
+          <tr><td colspan="3" style="padding:10px;text-align:center;color:var(--text-muted);">No storage items found</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Network Tab -->
+    <div id="tab-network" class="tab-pane" style="display:none;flex:1;overflow-y:auto;padding:12px;background:#090d16;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+        <span style="font-size:12px;font-weight:600;color:var(--text-secondary)">Network Requests (ma.request)</span>
+        <button id="clear-network-btn" class="tool-btn" style="padding:2px 8px;font-size:11px">Clear</button>
+      </div>
+      <table id="network-table" style="width:100%;border-collapse:collapse;font-size:12px;font-family:monospace;">
+        <thead>
+          <tr style="border-bottom:1px solid var(--border-color);color:var(--text-muted);text-align:left;">
+            <th style="padding:6px;width:60px;">Method</th>
+            <th style="padding:6px;width:60px;">Status</th>
+            <th style="padding:6px;">URL</th>
+            <th style="padding:6px;width:80px;">Time</th>
+          </tr>
+        </thead>
+        <tbody id="network-body">
+          <tr><td colspan="4" style="padding:10px;text-align:center;color:var(--text-muted);">No network requests recorded</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- App Info Tab -->
+    <div id="tab-app-info" class="tab-pane" style="display:none;flex:1;overflow-y:auto;padding:16px;background:#090d16;font-size:12px;">
+      <div id="app-info-container" style="display:flex;flex-direction:column;gap:12px;">
+        <div><strong>Project Name:</strong> <span id="info-project-name">-</span></div>
+        <div><strong>Engine Version:</strong> <span id="info-engine-version">26.6.0-LG0001</span></div>
+        <div><strong>Runtime Framework:</strong> <span id="info-runtime-version">100.4.2</span></div>
+        <div><strong>Entry Route:</strong> <span id="info-entry-page">-</span></div>
+        <div><strong>Registered Pages:</strong> <ul id="info-pages-list" style="margin-left:20px;margin-top:4px;"></ul></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- QR Code Modal -->
+  <div id="qr-modal" class="modal-backdrop">
+    <div class="modal-dialog">
+      <h3 class="modal-title">Mobile Preview</h3>
+      <p class="modal-subtitle">Scan this QR code with your mobile phone connected to the same Wi-Fi network.</p>
+
+      <div id="qrcode-container" class="qrcode-box"></div>
+
+      <div id="qr-url" class="url-box">http://...</div>
+
+      <div style="display:flex;gap:10px;width:100%">
+        <button id="copy-qr-url-btn" class="tool-btn" style="flex:1;justify-content:center">Copy URL</button>
+        <button id="close-qr-modal" class="tool-btn" style="flex:1;justify-content:center">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="simulator.js"></script>
+</body>
+</html>