liteagents 2.5.3 → 2.6.0

package/packages/claude/plugins/live-canvas-marketplace/plugins/live-canvas-channel/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "live-canvas-channel",
+  "version": "0.1.0",
+  "description": "MCP channel server: bridges Live Canvas HTTP overlay events into the Claude Code session.",
+  "main": "server.js",
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0"
+  },
+  "license": "MIT"
+}

package/packages/claude/plugins/live-canvas-marketplace/plugins/live-canvas-channel/schema.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "LiveCanvasFeedback",
+  "description": "Payload shape posted by the Live Canvas overlay to POST /feedback. Wire-compatible with the v1.0 schema produced by overlay-vanilla.js and the upstream React FeedbackOverlay.",
+  "type": "object",
+  "required": ["version", "target", "comment"],
+  "properties": {
+    "version": { "type": "string", "enum": ["1.0"] },
+    "target": { "type": "string" },
+    "comment": {
+      "type": "object",
+      "required": ["id", "variant", "element", "text"],
+      "properties": {
+        "id": { "type": "string" },
+        "variant": { "type": "string", "enum": ["A", "B", "C", "D", "E", "F"] },
+        "element": {
+          "type": "object",
+          "required": ["selector", "tagName"],
+          "properties": {
+            "selector": { "type": "string" },
+            "readablePath": { "type": "string" },
+            "tagName": { "type": "string" },
+            "textContent": { "type": "string" },
+            "className": { "type": "string" },
+            "attributes": { "type": "object", "additionalProperties": { "type": "string" } }
+          }
+        },
+        "coordinates": {
+          "type": "object",
+          "properties": { "x": { "type": "number" }, "y": { "type": "number" } }
+        },
+        "text": { "type": "string" },
+        "timestamp": { "type": "number" }
+      }
+    }
+  }
+}

package/packages/claude/plugins/live-canvas-marketplace/plugins/live-canvas-channel/server.js

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+/**
+ * live-canvas-channel — MCP channel server for Claude Code.
+ *
+ * Two concurrent duties:
+ *   1. HTTP listener (LIVE_CANVAS_PORT, default 8788) — accepts feedback
+ *      POSTs from the Live Canvas overlay running in the browser. The
+ *      overlay probes GET /health to decide Live vs Batch mode.
+ *   2. MCP stdio server — declares the `experimental: claude/channel`
+ *      capability and, on each valid POST, emits a
+ *      `notifications/claude/channel` notification so the feedback lands
+ *      in the active Claude turn.
+ *
+ * Protocol reference: https://code.claude.com/docs/en/channels-reference
+ */
+
+'use strict';
+
+const http = require('http');
+const { Server } = require('@modelcontextprotocol/sdk/server/index.js');
+const { StdioServerTransport } = require('@modelcontextprotocol/sdk/server/stdio.js');
+
+const PORT = Number(process.env.LIVE_CANVAS_PORT || 8788);
+const SERVER_NAME = 'live-canvas';
+const SERVER_VERSION = '0.1.0';
+
+// ---------- MCP server ----------
+
+const mcp = new Server(
+  { name: SERVER_NAME, version: SERVER_VERSION },
+  {
+    capabilities: { experimental: { 'claude/channel': {} } },
+    instructions: [
+      'Events from the live-canvas channel arrive as <channel source="live-canvas" ...> tags.',
+      'Each event is a single click-to-annotate comment made by the user on a UI variant in their browser.',
+      'Tag attributes: target (component name), variant (A-F), selector (CSS selector of the clicked element),',
+      'tagName (HTML tag), commentId (unique id). The body is the user\'s feedback text.',
+      'When one arrives: acknowledge the feedback briefly, then edit the corresponding variant file',
+      'in .claude-design/lab/ using the selector to locate the element. This is a one-way channel —',
+      'no reply tool; respond to the user in chat as you would any normal message.',
+    ].join(' '),
+  }
+);
+
+async function emitChannel(content, meta) {
+  await mcp.notification({
+    method: 'notifications/claude/channel',
+    params: { content, meta },
+  });
+}
+
+// ---------- HTTP helpers ----------
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let data = '';
+    req.on('data', (c) => {
+      data += c;
+      if (data.length > 1e6) { req.destroy(); reject(new Error('payload too large')); }
+    });
+    req.on('end', () => resolve(data));
+    req.on('error', reject);
+  });
+}
+
+function cors(res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'content-type');
+}
+
+function validate(payload) {
+  if (!payload || payload.version !== '1.0') return 'version must be "1.0"';
+  if (typeof payload.target !== 'string') return 'target required';
+  const c = payload.comment;
+  if (!c || typeof c !== 'object') return 'comment required';
+  if (!c.variant || !/^[A-F]$/.test(c.variant)) return 'invalid variant';
+  if (!c.element || typeof c.element.selector !== 'string') return 'element.selector required';
+  if (typeof c.text !== 'string') return 'comment.text required';
+  return null;
+}
+
+// Human-readable body the assistant will see inside the Claude turn.
+function formatContent(target, comment) {
+  const { variant, element, text } = comment;
+  const label = element.textContent ? `, ${element.tagName} with "${element.textContent}"` : '';
+  return [
+    `[LIVE-CANVAS ${variant} · ${target}] ${text}`,
+    `  selector: \`${element.selector}\`${label}`,
+    `  comment_id: ${comment.id}`,
+  ].join('\n');
+}
+
+// All values in `meta` must be strings per the claude/channel contract.
+function buildMeta(target, comment) {
+  return {
+    source: 'live-canvas',
+    target,
+    variant: comment.variant,
+    selector: comment.element.selector,
+    tagName: comment.element.tagName,
+    commentId: comment.id,
+  };
+}
+
+// ---------- HTTP server ----------
+
+const server = http.createServer(async (req, res) => {
+  cors(res);
+
+  if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
+
+  if (req.method === 'GET' && req.url === '/health') {
+    res.writeHead(200, { 'content-type': 'application/json' });
+    res.end(JSON.stringify({ ok: true, channel: SERVER_NAME, port: PORT }));
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/feedback') {
+    try {
+      const raw = await readBody(req);
+      const payload = JSON.parse(raw);
+      const err = validate(payload);
+      if (err) {
+        res.writeHead(400, { 'content-type': 'application/json' });
+        res.end(JSON.stringify({ error: err }));
+        return;
+      }
+
+      try {
+        await emitChannel(
+          formatContent(payload.target, payload.comment),
+          buildMeta(payload.target, payload.comment)
+        );
+      } catch (e) {
+        // MCP transport not yet connected or closed — still ack the HTTP
+        // caller so the overlay doesn't false-negative.
+        process.stderr.write(`[live-canvas] notify failed: ${e.message || e}\n`);
+      }
+
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ ok: true }));
+    } catch (e) {
+      res.writeHead(400, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ error: String(e.message || e) }));
+    }
+    return;
+  }
+
+  res.writeHead(404); res.end();
+});
+
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    process.stderr.write(`[live-canvas] port ${PORT} in use — another session likely owns it; exiting.\n`);
+    process.exit(0);
+  }
+  process.stderr.write(`[live-canvas] http error: ${err}\n`);
+  process.exit(1);
+});
+
+// ---------- startup ----------
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await mcp.connect(transport);
+
+  server.listen(PORT, '127.0.0.1', () => {
+    process.stderr.write(`[live-canvas] listening on 127.0.0.1:${PORT}\n`);
+  });
+}
+
+process.on('SIGTERM', () => { server.close(() => process.exit(0)); });
+process.on('SIGINT',  () => { server.close(() => process.exit(0)); });
+
+main().catch((err) => {
+  process.stderr.write(`[live-canvas] fatal: ${err}\n`);
+  process.exit(1);
+});

package/packages/claude/plugins/live-canvas-marketplace/setup.sh

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+# Live Canvas channel — one-time setup helper.
+#
+# Run this once from a shell, then follow the printed manual steps in Claude Code.
+# Safe to re-run; `npm install` is idempotent.
+
+set -e
+HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PLUGIN_DIR="$HERE/plugins/live-canvas-channel"
+MARKETPLACE_PATH="$HERE"
+
+bold() { printf '\033[1m%s\033[0m\n' "$*"; }
+ok()   { printf '\033[32m✓\033[0m %s\n' "$*"; }
+warn() { printf '\033[33m!\033[0m %s\n' "$*"; }
+
+if ! command -v node >/dev/null 2>&1; then
+  warn "Node.js not found. Install Node >= 18 first: https://nodejs.org"
+  exit 1
+fi
+
+NODE_MAJOR="$(node -p 'process.versions.node.split(".")[0]')"
+if [ "$NODE_MAJOR" -lt 18 ]; then
+  warn "Node >= 18 required (found $(node -v))."
+  exit 1
+fi
+
+if ! command -v npm >/dev/null 2>&1; then
+  warn "npm not found. Usually ships with Node."
+  exit 1
+fi
+
+bold "Installing channel plugin dependencies…"
+cd "$PLUGIN_DIR"
+npm install --silent
+ok "Dependencies installed in $PLUGIN_DIR"
+
+echo
+bold "Next steps (run these inside Claude Code):"
+cat <<EOF
+
+  1. Register this marketplace:
+       /plugin marketplace add $MARKETPLACE_PATH
+
+  2. Install the plugin from it:
+       /plugin install live-canvas-channel@live-canvas-marketplace
+
+  3. Close this session and start a new one with the dev-channels flag:
+       claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace
+
+  4. Confirm the one-time safety prompt. Channel is now listening on
+     port 8788 for overlay feedback events.
+
+  5. Run /live-canvas to generate variants in any project. The skill will
+     auto-detect the channel and use Live mode.
+
+Tip — save yourself typing with a shell alias in ~/.zshrc or ~/.bashrc:
+  alias claude-live='claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace'
+
+EOF
+
+ok "Setup complete."