markui-cli 0.1.0

package/src/prompt-builder.js

@@ -0,0 +1,24 @@
+/**
+ * Formats annotations into a structured prompt for Claude Code.
+ * Used server-side if needed; the client-side overlay also builds prompts directly.
+ */
+
+function buildPrompt(annotations) {
+  if (!annotations || annotations.length === 0) {
+    return '';
+  }
+
+  var lines = ['Please make the following UI changes:'];
+
+  for (var i = 0; i < annotations.length; i++) {
+    var a = annotations[i];
+    lines.push('');
+    lines.push((i + 1) + '. Element: <' + a.tagName + '> \u2014 ' + a.selector);
+    lines.push('   Selector: ' + a.selector);
+    lines.push('   Change: ' + a.instruction);
+  }
+
+  return lines.join('\n') + '\n';
+}
+
+module.exports = { buildPrompt };

package/src/proxy.js

@@ -0,0 +1,250 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+const httpProxy = require('http-proxy');
+
+// In-memory annotation store keyed by page pathname
+const annotations = {};
+
+const OVERLAY_DIR = path.join(__dirname, 'overlay');
+
+function readAsset(filename) {
+  return fs.readFileSync(path.join(OVERLAY_DIR, filename), 'utf8');
+}
+
+const INJECT_SNIPPET = `
+<link rel="stylesheet" href="/__markui__/overlay.css">
+<script src="/__markui__/overlay.js"></script>
+`;
+
+function startProxy({ targetPort, proxyPort }) {
+  const target = `http://127.0.0.1:${targetPort}`;
+
+  const proxy = httpProxy.createProxyServer({
+    target,
+    selfHandleResponse: true,
+    ws: true
+  });
+
+  proxy.on('error', (err, req, res) => {
+    if (res && res.writeHead && !res.headersSent) {
+      res.writeHead(502, { 'content-type': 'text/plain' });
+      res.end(`MarkUI proxy error: ${err.message}`);
+    }
+  });
+
+  proxy.on('proxyRes', (proxyRes, req, res) => {
+    // Copy status and headers, stripping CSP
+    const headers = { ...proxyRes.headers };
+    delete headers['content-security-policy'];
+    delete headers['content-security-policy-report-only'];
+    delete headers['x-content-security-policy'];
+
+    const isHtml = (headers['content-type'] || '').includes('text/html');
+
+    if (!isHtml) {
+      // Non-HTML: stream through directly
+      // Remove content-length since we're streaming
+      res.writeHead(proxyRes.statusCode, headers);
+      proxyRes.pipe(res);
+      return;
+    }
+
+    // HTML: buffer, decompress if needed, inject, and send
+    const chunks = [];
+    proxyRes.on('data', (chunk) => chunks.push(chunk));
+    proxyRes.on('end', () => {
+      const raw = Buffer.concat(chunks);
+      const encoding = (proxyRes.headers['content-encoding'] || '').toLowerCase();
+
+      // Decompress if needed
+      let decompress;
+      if (encoding === 'gzip') {
+        decompress = zlib.gunzipSync;
+      } else if (encoding === 'br') {
+        decompress = zlib.brotliDecompressSync;
+      } else if (encoding === 'deflate') {
+        decompress = zlib.inflateSync;
+      }
+
+      let body;
+      try {
+        body = decompress ? decompress(raw).toString('utf8') : raw.toString('utf8');
+      } catch (e) {
+        // If decompression fails, pass through unchanged
+        res.writeHead(proxyRes.statusCode, headers);
+        res.end(raw);
+        return;
+      }
+
+      // Inject before </body> if present, otherwise append
+      if (body.includes('</body>')) {
+        body = body.replace('</body>', INJECT_SNIPPET + '</body>');
+      } else if (body.includes('</html>')) {
+        body = body.replace('</html>', INJECT_SNIPPET + '</html>');
+      } else {
+        body += INJECT_SNIPPET;
+      }
+
+      // Send uncompressed (simpler, avoids re-compression)
+      delete headers['content-length'];
+      delete headers['transfer-encoding'];
+      delete headers['content-encoding'];
+      const buf = Buffer.from(body, 'utf8');
+      headers['content-length'] = buf.length;
+
+      res.writeHead(proxyRes.statusCode, headers);
+      res.end(buf);
+    });
+  });
+
+  const server = http.createServer((req, res) => {
+    // Serve MarkUI's own assets and API
+    if (req.url.startsWith('/__markui__/')) {
+      return handleMarkuiRequest(req, res);
+    }
+
+    // Request uncompressed HTML from target so injection is simpler
+    delete req.headers['accept-encoding'];
+
+    // Proxy everything else
+    proxy.web(req, res);
+  });
+
+  // WebSocket passthrough
+  server.on('upgrade', (req, socket, head) => {
+    proxy.ws(req, socket, head);
+  });
+
+  server.listen(proxyPort, () => {
+    console.log(`
+  MarkUI running at http://localhost:${proxyPort}
+  Proxying → http://localhost:${targetPort}
+  Assets served at http://localhost:${proxyPort}/__markui__/overlay.js
+
+  Open http://localhost:${proxyPort} in your browser to start annotating.
+  Or use "markui inject" to add tags to your index.html and open localhost:${targetPort} directly.
+`);
+  });
+
+  // Graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\nShutting down MarkUI...');
+    server.close();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    server.close();
+    process.exit(0);
+  });
+}
+
+function handleMarkuiRequest(req, res) {
+  const url = req.url.split('?')[0];
+
+  const cors = {
+    'access-control-allow-origin': '*',
+    'access-control-allow-methods': 'GET, POST, OPTIONS',
+    'access-control-allow-headers': 'content-type'
+  };
+
+  // Static assets
+  if (url === '/__markui__/overlay.js') {
+    res.writeHead(200, { 'content-type': 'application/javascript; charset=utf-8', ...cors });
+    res.end(readAsset('overlay.js'));
+    return;
+  }
+
+  if (url === '/__markui__/overlay.css') {
+    res.writeHead(200, { 'content-type': 'text/css; charset=utf-8', ...cors });
+    res.end(readAsset('overlay.css'));
+    return;
+  }
+
+  // Annotations API
+  if (url === '/__markui__/annotations') {
+    if (req.method === 'GET') {
+      res.writeHead(200, {
+        'content-type': 'application/json',
+        'access-control-allow-origin': '*'
+      });
+      res.end(JSON.stringify(annotations));
+      return;
+    }
+
+    if (req.method === 'POST') {
+      let body = '';
+      req.on('data', (chunk) => { body += chunk; });
+      req.on('end', () => {
+        try {
+          const data = JSON.parse(body);
+          const page = data.page || '/';
+          annotations[page] = data.annotations || [];
+          res.writeHead(200, {
+            'content-type': 'application/json',
+            'access-control-allow-origin': '*'
+          });
+          res.end(JSON.stringify({ ok: true }));
+        } catch (e) {
+          res.writeHead(400, { 'content-type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Invalid JSON' }));
+        }
+      });
+      return;
+    }
+
+    // CORS preflight
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204, {
+        'access-control-allow-origin': '*',
+        'access-control-allow-methods': 'GET, POST, OPTIONS',
+        'access-control-allow-headers': 'content-type'
+      });
+      res.end();
+      return;
+    }
+  }
+
+  res.writeHead(404, { 'content-type': 'text/plain' });
+  res.end('Not found');
+}
+
+function startAssetServer({ port }) {
+  const server = http.createServer((req, res) => {
+    if (req.url.startsWith('/__markui__/')) {
+      return handleMarkuiRequest(req, res);
+    }
+
+    res.writeHead(200, { 'content-type': 'text/html' });
+    res.end(
+      '<html><body style="font-family:system-ui;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#666">' +
+      '<div style="text-align:center"><h2>MarkUI Asset Server</h2>' +
+      '<p>Assets are being served. Open your app to use MarkUI.</p></div></body></html>'
+    );
+  });
+
+  server.listen(port, () => {
+    console.log(`
+  MarkUI asset server running at http://localhost:${port}
+  Assets served at http://localhost:${port}/__markui__/overlay.js
+
+  Use "markui inject" to add markui to your index.html,
+  then open your app directly (e.g. http://localhost:3000).
+`);
+  });
+
+  process.on('SIGINT', () => {
+    console.log('\nShutting down MarkUI...');
+    server.close();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    server.close();
+    process.exit(0);
+  });
+}
+
+module.exports = { startProxy, startAssetServer };