markui-cli 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# MarkUI
+
+Annotate your running localhost UI and generate structured prompts for Claude Code.
+
+## Install
+
+```bash
+npm install -g markui
+```
+
+## Usage
+
+Start your dev server, then in a new terminal:
+
+```bash
+markui
+```
+
+Open http://localhost:3131 in your browser.
+
+Click "Annotate", click elements, leave instructions, hit "Copy for Claude".
+
+## Options
+
+```bash
+markui --target 3000    # specify which port your app runs on
+markui --port 3131      # specify which port MarkUI runs on
+```
+
+## Works with
+
+React, Vue, Svelte, Next.js, Vite, plain HTML — anything that runs on localhost.

package/bin/markui.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+const net = require('net');
+const minimist = require('minimist');
+const { startProxy, startAssetServer } = require('../src/proxy');
+const { inject, eject } = require('../src/injector');
+
+const args = minimist(process.argv.slice(2), {
+  alias: { t: 'target', p: 'port', h: 'help' },
+  default: { port: 3131 }
+});
+
+const command = args._[0];
+
+if (args.help) {
+  console.log(`
+  markui — Annotate your localhost UI for Claude Code
+
+  Usage:
+    markui                          Start markui (auto-injects, open your normal dev URL)
+    markui inject                   Manually inject markui tags into index.html
+    markui eject                    Remove markui tags from index.html
+    markui --target 3000            Proxy mode for a specific port (use localhost:3131)
+    markui --port 4000              Change MarkUI's asset port (default: 3131)
+
+  How it works:
+    1. Start your dev server (npm run dev, etc.)
+    2. Run "markui" in your project directory
+    3. Open your normal dev server URL — the overlay is already there
+    4. Ctrl+C to stop (auto-cleans injected tags)
+
+  Options:
+    --target, -t   Proxy a specific port (fallback if no index.html found)
+    --port,   -p   Port MarkUI asset server runs on (default: 3131)
+    --help,   -h   Show this help message
+  `);
+  process.exit(0);
+}
+
+if (command === 'inject') {
+  inject(args.port);
+  process.exit(0);
+}
+
+if (command === 'eject') {
+  eject();
+  process.exit(0);
+}
+
+// Common dev server ports: React/Next (3000), Vite (5173), Angular (4200),
+// generic (8080/8000/8888), Flask/Django (5000), Parcel (1234), Astro (4321),
+// Svelte (5000), Nuxt (3000), Remix (3000), Gatsby (8000), Hugo (1313),
+// Rails (3000), Laravel (8000), Spring (8080), Express (3000/4000)
+const SCAN_PORTS = [3000, 5173, 4200, 8080, 8000, 8888, 5000, 4000, 1234, 4321, 1313, 3001, 3002, 5500];
+
+function checkPort(port) {
+  return new Promise((resolve) => {
+    const sock = new net.Socket();
+    sock.setTimeout(300);
+    sock.once('connect', () => {
+      sock.destroy();
+      resolve(true);
+    });
+    sock.once('timeout', () => {
+      sock.destroy();
+      resolve(false);
+    });
+    sock.once('error', () => {
+      sock.destroy();
+      resolve(false);
+    });
+    sock.connect(port, '127.0.0.1');
+  });
+}
+
+async function detectTarget() {
+  for (const port of SCAN_PORTS) {
+    if (await checkPort(port)) return port;
+  }
+  return null;
+}
+
+async function main() {
+  let targetPort = args.target;
+  const proxyPort = args.port;
+
+  // Try inject + asset server mode first (user keeps their normal URL)
+  const hasIndexHtml = (() => {
+    try { return inject(proxyPort, true); } catch(e) { return false; }
+  })();
+
+  if (hasIndexHtml) {
+    // Inject mode: tags added to index.html, start asset server
+    // User opens their normal dev server URL
+    inject(proxyPort);
+
+    // Clean up injected tags on exit
+    const cleanup = () => {
+      try { eject(); } catch(e) {}
+      process.exit(0);
+    };
+    process.on('SIGINT', cleanup);
+    process.on('SIGTERM', cleanup);
+
+    if (targetPort) {
+      console.log(`\n  Your dev server is on http://localhost:${targetPort} — open that URL.\n`);
+    } else {
+      targetPort = await detectTarget();
+      if (targetPort) {
+        console.log(`\n  Dev server detected on http://localhost:${targetPort} — open that URL.\n`);
+      }
+    }
+
+    startAssetServer({ port: proxyPort });
+    return;
+  }
+
+  // Fallback: proxy mode (no index.html found to inject into)
+  if (targetPort) {
+    const alive = await checkPort(targetPort);
+    if (!alive) {
+      console.error(
+        `\nNothing found on port ${targetPort}. Is your dev server running?\n`
+      );
+      process.exit(1);
+    }
+    if (targetPort === proxyPort) {
+      console.error(
+        `\nTarget port and MarkUI port are both ${proxyPort}. Use --port to pick a different MarkUI port.\n`
+      );
+      process.exit(1);
+    }
+    startProxy({ targetPort, proxyPort });
+  } else {
+    console.log('Auto-detecting dev server...');
+    targetPort = await detectTarget();
+
+    if (targetPort && targetPort !== proxyPort) {
+      startProxy({ targetPort, proxyPort });
+    } else {
+      startAssetServer({ port: proxyPort });
+    }
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "markui-cli",
+  "version": "0.1.0",
+  "description": "Annotate your localhost UI and generate prompts for Claude Code",
+  "bin": {
+    "markui": "bin/markui.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "prepublishOnly": "node -e \"require('./src/proxy'); console.log('Sanity check passed')\""
+  },
+  "dependencies": {
+    "http-proxy": "^1.18.1",
+    "minimist": "^1.2.8"
+  },
+  "keywords": [
+    "claude",
+    "ai",
+    "developer-tools",
+    "ui",
+    "annotation",
+    "llm"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adebolaali/markui.git"
+  },
+  "license": "MIT"
+}

package/src/injector.js

@@ -0,0 +1,107 @@
+const fs = require('fs');
+const path = require('path');
+
+const SEARCH_PATHS = [
+  'index.html',
+  'public/index.html',
+  'src/index.html',
+  'app/index.html',
+  'dist/index.html',
+  'build/index.html',
+  'static/index.html',
+  'www/index.html',
+  'templates/index.html',
+  'views/index.html'
+];
+
+const MARKER_START = '<!-- markui:start -->';
+const MARKER_END = '<!-- markui:end -->';
+
+function buildSnippet(port) {
+  return (
+    MARKER_START + '\n' +
+    `<script src="http://localhost:${port}/__markui__/overlay.js"></script>\n` +
+    `<link rel="stylesheet" href="http://localhost:${port}/__markui__/overlay.css">\n` +
+    MARKER_END
+  );
+}
+
+function findIndexHtml() {
+  const cwd = process.cwd();
+  for (const rel of SEARCH_PATHS) {
+    const full = path.join(cwd, rel);
+    if (fs.existsSync(full)) return full;
+  }
+  return null;
+}
+
+function inject(port, dryRun) {
+  const file = findIndexHtml();
+  if (!file) {
+    if (dryRun) return false;
+    console.error(
+      '\nCould not find index.html. Checked:\n' +
+      SEARCH_PATHS.map(p => '  ./' + p).join('\n') + '\n'
+    );
+    process.exit(1);
+  }
+  if (dryRun) return true;
+
+  let html = fs.readFileSync(file, 'utf8');
+
+  // Remove existing injection if present
+  const markerRe = new RegExp(
+    escapeRegExp(MARKER_START) + '[\\s\\S]*?' + escapeRegExp(MARKER_END) + '\\n?',
+    'g'
+  );
+  html = html.replace(markerRe, '');
+
+  const snippet = buildSnippet(port);
+
+  if (html.includes('</body>')) {
+    html = html.replace('</body>', snippet + '\n</body>');
+  } else if (html.includes('</html>')) {
+    html = html.replace('</html>', snippet + '\n</html>');
+  } else {
+    html += '\n' + snippet + '\n';
+  }
+
+  fs.writeFileSync(file, html);
+
+  const rel = path.relative(process.cwd(), file);
+  console.log(`Injected into ${rel} — run markui to start the asset server`);
+}
+
+function eject() {
+  const file = findIndexHtml();
+  if (!file) {
+    console.error(
+      '\nCould not find index.html. Checked:\n' +
+      SEARCH_PATHS.map(p => '  ./' + p).join('\n') + '\n'
+    );
+    process.exit(1);
+  }
+
+  let html = fs.readFileSync(file, 'utf8');
+
+  const markerRe = new RegExp(
+    escapeRegExp(MARKER_START) + '[\\s\\S]*?' + escapeRegExp(MARKER_END) + '\\n?',
+    'g'
+  );
+
+  if (!markerRe.test(html)) {
+    console.log('No markui tags found in ' + path.relative(process.cwd(), file));
+    return;
+  }
+
+  html = html.replace(markerRe, '');
+  fs.writeFileSync(file, html);
+
+  console.log('Removed markui from ' + path.relative(process.cwd(), file));
+}
+
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+module.exports = { inject, eject };