drafted 1.0.0

package/mcp/server.mjs

@@ -0,0 +1,1024 @@
+#!/usr/bin/env node
+
+/**
+ * Drafted MCP Server
+ * Filesystem-style tools for agents to read/write/edit frames on the canvas.
+ * Calls the Drafted HTTP API directly (no CLI subprocess).
+ */
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { execFile } from 'child_process';
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname, basename, extname, resolve } from 'path';
+import { homedir } from 'os';
+import { fileURLToPath } from 'url';
+import { z } from 'zod';
+import { LAYERS } from '../shared/constants.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const server = new McpServer({
+  name: 'drafted',
+  version: '2.3.0',
+  description: `Multi-tenant design workspace. Structure: Organization → Projects → Layers → Lanes → Frames.
+
+An org contains projects. Each project has a zoomable canvas with frames (HTML files) organized as /{layer}/{lane}/{filename}. Layers are predefined categories (wireframes, designs, brand-assets, etc.), lanes are groups within a layer, and frames are the individual design files.
+
+WORKFLOW: list_projects → open_project → ls / → read/write/edit. Every response includes a "project" field showing which project you're operating on — always verify it matches your intent before writing.
+
+IMPORTANT: Any URL containing /f/{uuid} is a Drafted frame link — ALWAYS use read(path=URL) to get frame content, focus(target=URL) to pan the canvas to it. Never curl or WebFetch Drafted URLs.`,
+});
+
+const layerKeys = Object.keys(LAYERS);
+
+// ── Config ────────────────────────────────────────────────────────
+
+const AUTH_FILE = process.env.DRAFTED_AUTH_FILE || join(homedir(), '.drafted', 'auth.json');
+
+function getServerUrl() {
+  if (process.env.DRAFTED_SERVER) return process.env.DRAFTED_SERVER.replace(/\/$/, '');
+  // Read from config.json next to auth.json (written by install-mcp.sh)
+  try {
+    const cfgPath = join(homedir(), '.drafted', 'config.json');
+    if (existsSync(cfgPath)) {
+      const cfg = JSON.parse(readFileSync(cfgPath, 'utf8'));
+      if (cfg.server) return cfg.server.replace(/\/$/, '');
+    }
+  } catch { /* fall through */ }
+  return `http://localhost:${process.env.DRAFTED_PORT || 3477}`;
+}
+
+// ── Per-instance session ──────────────────────────────────────────
+// Each MCP instance clones its own session from the bootstrap session in auth.json.
+// This ensures multiple Claude Code instances don't share state.
+
+let instanceSessionId = null; // cloned session, in-memory only
+let agentActiveProjectId = null; // in-memory only, never persisted
+
+function getBootstrapSessionId() {
+  try {
+    if (existsSync(AUTH_FILE)) {
+      const auth = JSON.parse(readFileSync(AUTH_FILE, 'utf8'));
+      return auth.sessionId || null;
+    }
+  } catch { /* no auth */ }
+  return null;
+}
+
+function getAuthHeaders() {
+  const sid = instanceSessionId || getBootstrapSessionId();
+  if (sid) return { Cookie: `gc_session=${sid}` };
+  return {};
+}
+
+async function cloneSession() {
+  const bootstrapId = getBootstrapSessionId();
+  if (!bootstrapId) return;
+
+  try {
+    const url = `${getServerUrl()}/auth/session/clone`;
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { Cookie: `gc_session=${bootstrapId}` },
+    });
+    if (!res.ok) return;
+    const data = await res.json();
+    if (data.sessionId) {
+      instanceSessionId = data.sessionId;
+    }
+  } catch { /* server may not be ready yet, will retry on first API call */ }
+}
+
+async function ensureSession() {
+  if (instanceSessionId) return;
+  await cloneSession();
+}
+
+async function api(method, path, body, _retried) {
+  await ensureSession();
+  const pid = agentActiveProjectId;
+  const sep = path.includes('?') ? '&' : '?';
+  const scopedPath = pid ? `${path}${sep}projectId=${pid}` : path;
+  const url = `${getServerUrl()}${scopedPath}`;
+  const headers = { ...getAuthHeaders() };
+  const opts = { method, headers };
+
+  if (body !== undefined) {
+    headers['Content-Type'] = 'application/json';
+    opts.body = JSON.stringify(body);
+  }
+
+  const res = await fetch(url, opts);
+  const text = await res.text();
+
+  // Session expired after server restart — re-clone and retry once
+  if (res.status === 401 && !_retried) {
+    instanceSessionId = null;
+    await cloneSession();
+    return api(method, path, body, true);
+  }
+
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${text.slice(0, 200)}`);
+    data = { text };
+  }
+
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
+function ok(text) {
+  return { content: [{ type: 'text', text: typeof text === 'string' ? text : JSON.stringify(text, null, 2) }] };
+}
+
+// ── Agent WebSocket presence ──────────────────────────────────────
+import WebSocket from 'ws';
+
+let agentWs = null;
+let agentWsReconnectTimer = null;
+
+function setMcpActiveProject(projectId) {
+  agentActiveProjectId = projectId;
+}
+
+async function connectAgentWs() {
+  await ensureSession();
+  const auth = getAuthHeaders();
+  if (!auth.Cookie) return;
+
+  const serverUrl = getServerUrl().replace(/^http/, 'ws');
+  try {
+    agentWs = new WebSocket(serverUrl, { headers: auth });
+  } catch { return; }
+
+  agentWs.on('open', () => {
+    console.error('[MCP-WS] Connected');
+    if (agentActiveProjectId) {
+      agentWs.send(JSON.stringify({ type: 'join', projectId: agentActiveProjectId, agent: true }));
+    }
+  });
+
+  agentWs.on('close', () => {
+    console.error('[MCP-WS] Disconnected, reconnecting in 5s...');
+    agentWs = null;
+    // Server may have restarted — invalidate session so ensureSession re-clones
+    instanceSessionId = null;
+    clearTimeout(agentWsReconnectTimer);
+    agentWsReconnectTimer = setTimeout(() => {
+      connectAgentWs().catch((e) => {
+        console.error('[MCP-WS] Reconnect failed:', e?.message || e);
+      });
+    }, 5000);
+  });
+
+  agentWs.on('error', () => {
+    // close handler will fire after this
+  });
+}
+
+function joinAgentWsRoom(projectId) {
+  if (!agentWs) return;
+  const msg = JSON.stringify({ type: 'join', projectId, agent: true });
+  if (agentWs.readyState === WebSocket.OPEN) {
+    agentWs.send(msg);
+  } else if (agentWs.readyState === WebSocket.CONNECTING) {
+    agentWs.once('open', () => agentWs.send(msg));
+  }
+}
+
+// Clone session and connect WebSocket on startup (delayed to let server be ready)
+setTimeout(() => {
+  cloneSession().then(() => connectAgentWs()).catch(() => {});
+}, 1000);
+
+function err(error) {
+  return { content: [{ type: 'text', text: error.message || String(error) }], isError: true };
+}
+
+// ── Anchor enforcement ────────────────────────────────────────────
+// Track which frames this session has fully read (no line range = full read)
+const readFrameIds = new Set();
+
+// Cache anchored frames (refreshed on each check)
+let anchoredCache = null;
+let anchoredCacheTime = 0;
+
+async function getAnchoredFrames() {
+  // Cache for 10 seconds to avoid hammering the API
+  if (anchoredCache && Date.now() - anchoredCacheTime < 10000) return anchoredCache;
+  try {
+    anchoredCache = await api('GET', '/api/designs/anchored');
+    anchoredCacheTime = Date.now();
+    return anchoredCache;
+  } catch {
+    return [];
+  }
+}
+
+function parseLayer(path) {
+  return path.replace(/^\/+/, '').split('/')[0];
+}
+
+async function checkAnchors(layer) {
+  const anchored = await getAnchoredFrames();
+  if (!Array.isArray(anchored)) return null;
+
+  const layerAnchors = anchored.filter(f => f.layer === layer);
+  if (layerAnchors.length === 0) return null;
+
+  const unread = layerAnchors.filter(f => !readFrameIds.has(f.id));
+  if (unread.length === 0) return null;
+
+  const paths = unread.map(f => `/${f.layer}/${f.lane}/${f.label}`);
+  return `This layer has ${layerAnchors.length} anchored frame(s) that must be read before making changes. ` +
+    `Unread anchors:\n${paths.map(p => '  read path="' + p + '"').join('\n')}\n\n` +
+    `Read all anchored frames first, then retry your operation.`;
+}
+
+// ── CLI passthrough (for login/start/stop only) ───────────────────
+
+function runCLI(command, args = [], options = {}) {
+  const timeout = options.timeout || 30000;
+  return new Promise((resolve, reject) => {
+    execFile('drafted', [command, ...args, '--json'], { timeout }, (error, stdout, stderr) => {
+      if (error) {
+        if (error.code === 'ENOENT') return reject(new Error('drafted CLI not found on PATH'));
+        if (error.killed) return reject(new Error('Command timed out'));
+        try {
+          const result = JSON.parse(stdout);
+          return reject(new Error(result.error || 'Command failed'));
+        } catch {
+          return reject(new Error(stderr || error.message));
+        }
+      }
+      try { resolve(JSON.parse(stdout)); }
+      catch { reject(new Error('Failed to parse CLI output')); }
+    });
+  });
+}
+
+// ── Server management tools (still via CLI) ───────────────────────
+
+// ── Login tools ─────────────────────────────────────────────────────
+
+// Shared pending device code — get_login_link stores it, login reuses it
+let pendingDeviceCode = null;
+
+server.tool('get_login_link', 'Get a sign-in URL without blocking. Use this before login when the browser may not open (SSH, headless, tmux). Returns the URL immediately for the user to open manually. Then call login to complete the flow.', {}, async () => {
+  try {
+    const codeRes = await fetch(`${getServerUrl()}/auth/device/code`, { method: 'POST' });
+    if (!codeRes.ok) throw new Error(`Failed to start device authorization (HTTP ${codeRes.status})`);
+    const data = await codeRes.json();
+    pendingDeviceCode = data;
+    return ok(data.verificationUrl);
+  } catch (error) { return err(error); }
+});
+
+server.tool('login', 'Authenticate with Drafted. Opens a browser for the user to sign in. Run this if other tools return auth errors or "fetch failed". If get_login_link was called first, polls for that approval instead of opening a new browser.', {}, async () => {
+  try {
+    // Check if already authenticated
+    const existing = getBootstrapSessionId();
+    if (existing) {
+      try {
+        const res = await fetch(`${getServerUrl()}/auth/me`, {
+          headers: { Cookie: `gc_session=${existing}` },
+        });
+        if (res.ok) {
+          const me = await res.json();
+          return ok({ status: 'already_authenticated', userId: me.userId, email: me.userEmail, org: me.currentOrg?.name });
+        }
+      } catch { /* session invalid, proceed with login */ }
+    }
+
+    let deviceCode, verificationUrl, expiresIn;
+    let reusingPending = false;
+
+    // Reuse pending device code from get_login_link if available
+    if (pendingDeviceCode) {
+      ({ deviceCode, verificationUrl, expiresIn } = pendingDeviceCode);
+      pendingDeviceCode = null;
+      reusingPending = true;
+    } else {
+      // Request a new device code
+      const codeRes = await fetch(`${getServerUrl()}/auth/device/code`, { method: 'POST' });
+      if (!codeRes.ok) throw new Error(`Failed to start device authorization (HTTP ${codeRes.status})`);
+      ({ deviceCode, verificationUrl, expiresIn } = await codeRes.json());
+    }
+
+    // Generate QR code for the verification URL
+    let qrText = '';
+    try {
+      const qrcode = await import('qrcode-terminal');
+      qrText = await new Promise((resolve) => {
+        qrcode.default.generate(verificationUrl, { small: true }, (code) => resolve(code));
+      });
+    } catch { /* QR generation failed, continue without it */ }
+
+    // Log the URL to stderr so it's visible even if MCP response is delayed
+    console.error(`\n[MCP] Sign in at: ${verificationUrl}\n${qrText ? qrText + '\n' : ''}[MCP] Waiting for approval...`);
+
+    // Open browser only if we're not reusing a pending code (user already has the URL)
+    if (!reusingPending) {
+      const { exec } = await import('child_process');
+      const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+      exec(`${cmd} ${JSON.stringify(verificationUrl)}`);
+    }
+
+    // Poll for approval
+    const deadline = Date.now() + (expiresIn * 1000);
+    while (Date.now() < deadline) {
+      await new Promise(r => setTimeout(r, 4000));
+      const res = await fetch(`${getServerUrl()}/auth/device/token`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ deviceCode }),
+      });
+      if (!res.ok) throw new Error(`Token poll failed (HTTP ${res.status})`);
+      const data = await res.json();
+
+      if (data.status === 'approved') {
+        // Write auth file
+        const { writeFileSync, mkdirSync } = await import('fs');
+        const { dirname } = await import('path');
+        mkdirSync(dirname(AUTH_FILE), { recursive: true });
+        writeFileSync(AUTH_FILE, JSON.stringify({
+          sessionId: data.sessionId,
+          userId: data.userId || null,
+          orgId: data.orgId || null,
+          server: getServerUrl(),
+          updatedAt: new Date().toISOString(),
+        }, null, 2));
+
+        // Re-clone session for this instance
+        instanceSessionId = null;
+        await cloneSession();
+        connectAgentWs();
+
+        return ok({ status: 'logged_in', sessionId: data.sessionId, userId: data.userId });
+      }
+
+      if (data.status === 'expired') throw new Error('Device code expired. Try again.');
+    }
+
+    throw new Error(`Login timed out. If the browser didn't open, visit: ${verificationUrl}`);
+  } catch (error) { return err(error); }
+});
+
+// ── Project management tools (direct HTTP) ────────────────────────
+
+server.tool('list_projects', 'START HERE. Lists all projects in the org. Use this first to find the project you need, then open_project to switch to it.', {}, async () => {
+  try {
+    const data = await api('GET', '/api/projects');
+    data.agentProject = agentActiveProjectId || null;
+    return ok(data);
+  } catch (error) { return err(error); }
+});
+
+server.tool('create_project', {
+  name: z.string().describe('Project name'),
+  description: z.string().optional().describe('Project description'),
+  templateSlug: z.string().optional().describe('Template slug (e.g. "web-design", "mobile-app", "landing-page")'),
+}, async ({ name, description, templateSlug }) => {
+  try {
+    const body = { name };
+    if (description) body.description = description;
+    if (templateSlug) body.templateSlug = templateSlug;
+    return ok(await api('POST', '/api/projects', body));
+  } catch (error) { return err(error); }
+});
+
+server.tool('list_templates', {}, async () => {
+  try { return ok(await api('GET', '/api/templates')); }
+  catch (error) { return err(error); }
+});
+
+server.tool('create_template', {
+  name: z.string().describe('Template name'),
+  description: z.string().describe('Template description'),
+  layers: z.array(z.object({}).passthrough()).describe('Array of layer definitions'),
+  visibility: z.string().optional().describe('Visibility: "org" or "public"'),
+}, async ({ name, description, layers, visibility }) => {
+  try {
+    const body = { name, description, layers };
+    if (visibility) body.visibility = visibility;
+    return ok(await api('POST', '/api/templates', body));
+  } catch (error) { return err(error); }
+});
+
+server.tool('update_template', {
+  templateId: z.string().describe('Template ID to update'),
+  name: z.string().optional().describe('Template name'),
+  description: z.string().optional().describe('Template description'),
+  layers: z.array(z.object({}).passthrough()).optional().describe('Array of layer definitions'),
+  visibility: z.string().optional().describe('Visibility: "org" or "public"'),
+}, async ({ templateId, name, description, layers, visibility }) => {
+  try {
+    const body = {};
+    if (name) body.name = name;
+    if (description) body.description = description;
+    if (layers) body.layers = layers;
+    if (visibility) body.visibility = visibility;
+    return ok(await api('PUT', `/api/templates/${templateId}`, body));
+  } catch (error) { return err(error); }
+});
+
+server.tool('delete_template', {
+  templateId: z.string().describe('Template ID to delete'),
+}, async ({ templateId }) => {
+  try { return ok(await api('DELETE', `/api/templates/${templateId}`)); }
+  catch (error) { return err(error); }
+});
+
+server.tool('fork_template', {
+  templateId: z.string().describe('Template ID to fork'),
+  name: z.string().optional().describe('Name for the forked copy'),
+}, async ({ templateId, name }) => {
+  try {
+    const body = {};
+    if (name) body.name = name;
+    return ok(await api('POST', `/api/templates/${templateId}/fork`, body));
+  } catch (error) { return err(error); }
+});
+
+server.tool('open_project', 'Switch active project. REQUIRED before reading or writing — all fs tools (ls, read, write, edit, rm, mv, batch) operate on the active project. Get project IDs from list_projects.', {
+  projectId: z.string().describe('Project ID to switch to and open in browser'),
+}, async ({ projectId }) => {
+  try {
+    const result = await api('POST', '/api/project/switch', { projectId });
+    setMcpActiveProject(projectId);
+    joinAgentWsRoom(projectId);
+    const base = getServerUrl();
+    // Resolve project slug for URL
+    let projectSlug = projectId;
+    try {
+      const data = await api('GET', '/api/projects');
+      const proj = (data.projects || []).find(p => p.id === projectId);
+      if (proj?.slug) projectSlug = proj.slug;
+    } catch { /* fall back to projectId */ }
+    const url = `${base}/project/${projectSlug}`;
+    const { exec } = await import('child_process');
+    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+    exec(`${cmd} ${JSON.stringify(url)}`);
+    return ok({ ...result, url, opened: true });
+  } catch (error) { return err(error); }
+});
+
+server.tool('focus', {
+  target: z.string().describe('Frame URL (any URL containing /f/{uuid}), frame ID (UUID), or file path (/{layer}/{lane}/{filename}) to pan the canvas viewport to. When a user shares a Drafted frame link, pass it directly here.'),
+}, async ({ target }) => {
+  try {
+    // Resolve target to a frame ID
+    const frameUrlMatch = target.match(/\/f\/([a-f0-9-]{36})/);
+    const uuidMatch = target.match(/^[a-f0-9-]{36}$/);
+    let frameId = frameUrlMatch?.[1] || (uuidMatch ? target : null);
+
+    if (!frameId) {
+      // Path — resolve via read to get the frame ID
+      const parts = target.replace(/^\/+/, '').split('/');
+      if (parts.length !== 3) throw new Error('Target must be a frame URL, frame ID, or path /{layer}/{lane}/{filename}');
+      const frame = await api('GET', `/api/fs/${parts[0]}/${parts[1]}/${parts[2]}`);
+      if (!frame.id) throw new Error('Frame not found');
+      frameId = frame.id;
+    }
+
+    const result = await api('POST', `/api/focus/${frameId}`);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('screenshot', {
+  target: z.string().describe('Frame URL (any URL containing /f/{uuid}), frame ID (UUID), or file path (/{layer}/{lane}/{filename}) to screenshot.'),
+  width: z.number().optional().default(1440).describe('Viewport width in pixels (default 1440)'),
+  height: z.number().optional().default(900).describe('Viewport height in pixels (default 900)'),
+  fullPage: z.boolean().optional().default(true).describe('Capture full page or just viewport (default true)'),
+}, async ({ target, width, height, fullPage }) => {
+  try {
+    // Resolve target to a frame ID
+    const frameUrlMatch = target.match(/\/f\/([a-f0-9-]{36})/);
+    const uuidMatch = target.match(/^[a-f0-9-]{36}$/);
+    let frameId = frameUrlMatch?.[1] || (uuidMatch ? target : null);
+
+    if (!frameId) {
+      const parts = target.replace(/^\/+/, '').split('/');
+      if (parts.length !== 3) throw new Error('Target must be a frame URL, frame ID, or path /{layer}/{lane}/{filename}');
+      const frame = await api('GET', `/api/fs/${parts[0]}/${parts[1]}/${parts[2]}`);
+      if (!frame.id) throw new Error('Frame not found');
+      frameId = frame.id;
+    }
+
+    const url = `${getServerUrl()}/api/screenshot/${frameId}?width=${width}&height=${height}&fullPage=${fullPage}`;
+    const res = await fetch(url, { headers: getAuthHeaders() });
+    if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
+
+    const buffer = await res.arrayBuffer();
+    const base64 = Buffer.from(buffer).toString('base64');
+
+    return {
+      content: [{
+        type: 'image',
+        data: base64,
+        mimeType: 'image/png',
+      }],
+    };
+  } catch (error) { return err(error); }
+});
+
+server.tool('update_project', {
+  projectId: z.string().describe('Project ID to update'),
+  name: z.string().optional().describe('New project name'),
+  folder: z.string().nullable().optional().describe('Folder name (null to remove from folder)'),
+  description: z.string().nullable().optional().describe('Project description'),
+  layers: z.array(z.object({}).passthrough()).optional().describe('Full layers array replacement. Use ls / to read current layers first.'),
+}, async ({ projectId, name, folder, description, layers }) => {
+  try {
+    const body = {};
+    if (name !== undefined) body.name = name;
+    if (folder !== undefined) body.folder = folder;
+    if (description !== undefined) body.description = description;
+    if (layers) body.layers = layers;
+    if (Object.keys(body).length === 0) throw new Error('At least one field (name, folder, description, layers) is required');
+    return ok(await api('PATCH', `/api/project/${projectId}`, body));
+  } catch (error) { return err(error); }
+});
+
+server.tool('add_layer', {
+  projectId: z.string().describe('Project ID to add the layer to'),
+  key: z.string().describe('Unique layer key (e.g. "research", "prototypes")'),
+  label: z.string().describe('Display label for the layer'),
+  type: z.string().describe('Layer type (e.g. "html", "image", "text")'),
+  width: z.number().describe('Default frame width in pixels'),
+  height: z.number().describe('Default frame height in pixels'),
+  description: z.string().optional().describe('Layer description'),
+  prompt: z.string().optional().describe('Prompt hint for AI agents working in this layer'),
+}, async ({ projectId, key, label, type, width, height, description, prompt }) => {
+  try {
+    const project = await api('GET', `/api/project/${projectId}`);
+    const layers = project.layers || [];
+    if (layers.some(l => l.key === key)) {
+      throw new Error(`Layer with key "${key}" already exists in this project`);
+    }
+    const newLayer = { key, label, type, width, height };
+    if (description !== undefined) newLayer.description = description;
+    if (prompt !== undefined) newLayer.prompt = prompt;
+    layers.push(newLayer);
+    return ok(await api('PATCH', `/api/project/${projectId}`, { layers }));
+  } catch (error) { return err(error); }
+});
+
+server.tool('remove_layer', {
+  projectId: z.string().describe('Project ID to remove the layer from'),
+  key: z.string().describe('Layer key to remove (e.g. "research", "prototypes")'),
+  force: z.boolean().optional().default(false).describe('Force removal even if the layer contains frames'),
+}, async ({ projectId, key, force }) => {
+  try {
+    const project = await api('GET', `/api/project/${projectId}`);
+    const layers = project.layers || [];
+    if (!layers.some(l => l.key === key)) {
+      throw new Error(`Layer with key "${key}" does not exist in this project`);
+    }
+    // Check for existing frames in the layer
+    if (!force) {
+      const listing = await api('GET', `/api/fs?path=/${key}&projectId=${projectId}&recursive=true`);
+      const entries = listing.entries || [];
+      const frames = entries.filter(e => e.type === 'frame');
+      // Don't count the auto-generated _context.md as real content
+      const realFrames = frames.filter(f => !f.path.endsWith('/_meta/_context.md'));
+      const frameCount = realFrames.length;
+      if (frameCount > 0) {
+        throw new Error(`Layer "${key}" contains ${frameCount} frame(s). Use force: true to confirm deletion.`);
+      }
+    }
+    const filtered = layers.filter(l => l.key !== key);
+    return ok(await api('PATCH', `/api/project/${projectId}`, { layers: filtered }));
+  } catch (error) { return err(error); }
+});
+
+server.tool('reorder_layers', {
+  projectId: z.string().describe('Project ID to reorder layers for'),
+  keys: z.array(z.string()).describe('Ordered array of ALL layer keys. Must contain exactly the same keys as current layers — no additions, removals, or duplicates.'),
+}, async ({ projectId, keys }) => {
+  try {
+    const project = await api('GET', `/api/project/${projectId}`);
+    const currentLayers = project.layers || [];
+    const currentKeys = currentLayers.map(l => l.key);
+
+    // Check for duplicates
+    const uniqueKeys = new Set(keys);
+    if (uniqueKeys.size !== keys.length) {
+      const dupes = keys.filter((k, i) => keys.indexOf(k) !== i);
+      throw new Error(`Duplicate keys: ${[...new Set(dupes)].join(', ')}`);
+    }
+
+    // Check for missing keys
+    const missing = currentKeys.filter(k => !uniqueKeys.has(k));
+    if (missing.length > 0) {
+      throw new Error(`Missing keys: ${missing.join(', ')}. You must include all existing layer keys.`);
+    }
+
+    // Check for extra keys
+    const currentSet = new Set(currentKeys);
+    const extra = keys.filter(k => !currentSet.has(k));
+    if (extra.length > 0) {
+      throw new Error(`Unknown keys: ${extra.join(', ')}. Only existing layer keys are allowed.`);
+    }
+
+    const reorderedLayers = keys.map(k => currentLayers.find(l => l.key === k));
+    return ok(await api('PATCH', `/api/project/${projectId}`, { layers: reorderedLayers }));
+  } catch (error) { return err(error); }
+});
+
+server.tool('update_layer', {
+  projectId: z.string().describe('Project ID containing the layer'),
+  key: z.string().describe('Layer key to update (e.g. "wireframes", "designs")'),
+  label: z.string().optional().describe('Display label'),
+  type: z.string().optional().describe('Layer type'),
+  width: z.number().optional().describe('Default frame width'),
+  height: z.number().optional().describe('Default frame height'),
+  description: z.string().optional().describe('Layer description'),
+  prompt: z.string().optional().describe('Layer prompt'),
+}, async ({ projectId, key, label, type, width, height, description, prompt }) => {
+  try {
+    const project = await api('GET', `/api/project/${projectId}`);
+    const layers = project.layers || project.project?.layers;
+    if (!Array.isArray(layers)) throw new Error('Project has no layers array');
+
+    const idx = layers.findIndex(l => l.key === key);
+    if (idx === -1) throw new Error(`Layer with key "${key}" not found`);
+
+    const updates = { label, type, width, height, description, prompt };
+    const filtered = Object.fromEntries(Object.entries(updates).filter(([, v]) => v !== undefined));
+    if (Object.keys(filtered).length === 0) throw new Error('At least one field (label, type, width, height, description, prompt) is required');
+
+    layers[idx] = { ...layers[idx], ...filtered };
+    return ok(await api('PATCH', `/api/project/${projectId}`, { layers }));
+  } catch (error) { return err(error); }
+});
+
+server.tool('get_org', {}, async () => {
+  try {
+    const data = await api('GET', '/api/orgs');
+    const orgs = data.orgs || data || [];
+    // Get members for the active org
+    const auth = JSON.parse(readFileSync(AUTH_FILE, 'utf8'));
+    let members = [];
+    let activeOrg = null;
+    if (auth.sessionId) {
+      // Find the active org from the session
+      const projectData = await api('GET', '/api/projects');
+      const orgId = projectData.projects?.[0]?.orgId;
+      if (orgId) {
+        activeOrg = orgs.find(o => (o.orgId || o.id) === orgId);
+        try {
+          const memberData = await api('GET', `/api/orgs/${orgId}/members`);
+          members = memberData.members || memberData || [];
+        } catch { /* no members */ }
+      }
+    }
+    return ok({
+      activeOrg: activeOrg ? { id: activeOrg.orgId || activeOrg.id, name: activeOrg.orgName || activeOrg.name } : null,
+      orgs: orgs.map(o => ({ id: o.orgId || o.id, name: o.orgName || o.name })),
+      members: members.map(m => ({ id: m.userId, name: m.username, email: m.email, role: m.role })),
+    });
+  } catch (error) { return err(error); }
+});
+
+server.tool('search', {
+  query: z.string().describe('Search term to match against frame names'),
+  projectId: z.string().optional().describe('Limit search to a specific project (optional)'),
+}, async ({ query, projectId }) => {
+  try {
+    const params = new URLSearchParams({ q: query });
+    if (projectId) params.set('projectId', projectId);
+    await ensureSession();
+    const url = `${getServerUrl()}/api/search?${params.toString()}`;
+    const res = await fetch(url, { headers: getAuthHeaders() });
+    if (!res.ok) throw new Error(`Search failed: ${res.status}`);
+    const results = await res.json();
+    return ok(results.map(r => ({
+      id: r.id,
+      path: `/${r.layer}/${r.lane}/${r.label}`,
+      project: r.projectName,
+      projectId: r.projectId,
+      frameUrl: `${getServerUrl()}/f/${r.id}`,
+      contentType: r.contentType,
+      updatedAt: r.updatedAt,
+    })));
+  } catch (error) { return err(error); }
+});
+
+// ── Filesystem tools (direct HTTP to /api/fs) ─────────────────────
+
+server.tool('write', 'Write a frame to the ACTIVE PROJECT. Check the "project" field in the response to confirm it went to the right place. Use open_project first if needed.\n\n**Content or file:** Provide `content` (HTML/markdown/text) OR `file_path` (absolute path to a local file like a PNG screenshot). For binary files (images, PDFs), use `file_path` — the file is uploaded to storage and displayed as an asset frame.\n\n**Dimensions:** By default, frames use the layer\'s default size (e.g., 1440×900 for designs, 1440×3000 for wireframes). This is often too large for small content like a brief or a single component. Use `autoSize: true` to automatically measure the HTML content and size the frame to fit. You can also pass explicit `width`/`height` for precise control. Choose dimensions that match your content — a short text document should be ~800×400, not 1440×3000.', {
+  path: z.string().describe('File path: /{layer}/{lane}/{filename} (e.g. /wireframes/analyse/variant-a.html, /images/tests/login.png). To write MULTIPLE files at once, use the batch tool instead. Returns frameUrl (canvas deep link to view the frame in the browser) and id (frame UUID).'),
+  content: z.string().optional().describe('File content (HTML, markdown, or text). Mutually exclusive with file_path — provide one or the other.'),
+  file_path: z.string().optional().describe('Absolute path to a local file to upload (e.g. /tmp/screenshot.png). The file is read from disk and uploaded to storage. Mutually exclusive with content.'),
+  autoSize: z.boolean().optional().describe('Automatically measure HTML content and size the frame to fit. Recommended for most content. Only applies to content, not file_path.'),
+  width: z.number().optional().describe('Explicit frame width in pixels. Overrides layer default. Ignored if autoSize is true.'),
+  height: z.number().optional().describe('Explicit frame height in pixels. Overrides layer default. Ignored if autoSize is true.'),
+  color: z.string().optional().describe('CSS color for frame border (e.g. #ff0000, red)'),
+}, async ({ path, content, file_path, autoSize, width, height, color }) => {
+  try {
+    // Validate: exactly one of content or file_path
+    if (content != null && file_path) throw new Error('Provide content OR file_path, not both');
+    if (content == null && !file_path) throw new Error('Provide content or file_path');
+
+    const anchorErr = await checkAnchors(parseLayer(path));
+    if (anchorErr) return err(new Error(anchorErr));
+    const parts = path.replace(/^\/+/, '').split('/');
+    if (parts.length !== 3) throw new Error('Path must be /{layer}/{lane}/{filename}');
+
+    let body;
+    if (file_path) {
+      // Binary upload: read file from disk, send as base64
+      const resolved = resolve(file_path);
+      if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
+      const buffer = readFileSync(resolved);
+      const ext = extname(resolved).toLowerCase();
+      const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml', '.pdf': 'application/pdf' };
+      body = { base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+    } else {
+      body = { content };
+      if (autoSize) body.autoSize = true;
+    }
+    if (width) body.width = width;
+    if (height) body.height = height;
+    if (color) body.color = color;
+    const result = await api('PUT', `/api/fs/${parts[0]}/${parts[1]}/${parts[2]}`, body);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('read', 'Read a frame from the ACTIVE PROJECT. Response includes "project" field confirming which project was read.', {
+  path: z.string().describe('File path /{layer}/{lane}/{filename}, frame URL (any URL containing /f/{uuid}), or bare frame ID (UUID). When a user shares a Drafted frame link, pass it directly here. Use ls to discover paths.'),
+  lines: z.string().optional().describe('Line range (e.g. "1-50", "80-120"). Omit to read all.'),
+}, async ({ path, lines }) => {
+  try {
+    const query = lines ? `?lines=${encodeURIComponent(lines)}` : '';
+
+    // Detect frame URL (e.g. http://host/f/{uuid}) or bare UUID
+    const frameUrlMatch = path.match(/\/f\/([a-f0-9-]{36})/);
+    const uuidMatch = path.match(/^[a-f0-9-]{36}$/);
+    const frameId = frameUrlMatch?.[1] || (uuidMatch ? path : null);
+
+    let result;
+    if (frameId) {
+      result = await api('GET', `/api/fs/by-id/${frameId}${query}`);
+    } else {
+      const parts = path.replace(/^\/+/, '').split('/');
+      if (parts.length !== 3) throw new Error('Path must be /{layer}/{lane}/{filename}, a frame URL, or a frame ID');
+      result = await api('GET', `/api/fs/${parts[0]}/${parts[1]}/${parts[2]}${query}`);
+    }
+
+    // Track full reads (no line range) for anchor enforcement
+    if (!lines && result.ok && result.id) {
+      readFrameIds.add(result.id);
+    }
+
+    return ok(result.content || result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('edit', 'Edit a frame in the ACTIVE PROJECT using hashline operations. Response includes "project" field. Use open_project first if needed.', {
+  path: z.string().describe('File path: /{layer}/{lane}/{filename}. To edit MULTIPLE files at once, use the batch tool instead — it sends one notification instead of many.'),
+  operations: z.array(z.object({
+    type: z.enum(['replace', 'delete', 'insertAfter', 'insertBefore']).describe('Edit type'),
+    lineHash: z.string().describe('4-char hash of the target line (from read output). Each line has a unique hash — even identical lines get different hashes.'),
+    newContent: z.string().optional().describe('New content (for replace, insertAfter, insertBefore)'),
+  })).describe('Hashline edit operations'),
+}, async ({ path, operations }) => {
+  try {
+    const anchorErr = await checkAnchors(parseLayer(path));
+    if (anchorErr) return err(new Error(anchorErr));
+    const result = await api('POST', '/api/fs/edit', { path, operations });
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('ls', 'List contents of the ACTIVE PROJECT. Use ls / after open_project to see layers, workflow, and confirm you\'re in the right project.', {
+  path: z.string().optional().default('/').describe('Directory path: / (layers), /{layer} (lanes), /{layer}/{lane} (frames). Frame entries include frameUrl (canvas deep link) and id (frame UUID).'),
+  recursive: z.boolean().optional().describe('List contents of subdirectories'),
+  summary: z.boolean().optional().describe('Include size, updatedAt, title for frames'),
+  pattern: z.string().optional().describe('Glob pattern to filter filenames (e.g. "*.html")'),
+}, async ({ path, recursive, summary, pattern }) => {
+  try {
+    const params = new URLSearchParams();
+    params.set('path', path);
+    if (recursive) params.set('recursive', 'true');
+    if (summary) params.set('summary', 'true');
+    if (pattern) params.set('pattern', pattern);
+    const result = await api('GET', `/api/fs/?${params.toString()}`);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('anchor', 'Mark a frame as a context anchor. Anchored frames MUST be read before writing or editing any frame in the same layer. Use this for briefs, style guides, or constraints that should inform all work in this layer.', {
+  path: z.string().describe('File path: /{layer}/{lane}/{filename}'),
+  anchored: z.boolean().describe('true to anchor, false to unanchor'),
+}, async ({ path, anchored }) => {
+  try {
+    const result = await api('POST', '/api/fs/anchor', { path, anchored });
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('rm', 'Delete a frame or lane from the ACTIVE PROJECT. Response includes "project" field.', {
+  path: z.string().describe('Path to delete: /{layer}/{lane}/{filename} or /{layer}/{lane} (deletes entire lane). To delete MULTIPLE files, use the batch tool instead.'),
+}, async ({ path }) => {
+  try {
+    const anchorErr = await checkAnchors(parseLayer(path));
+    if (anchorErr) return err(new Error(anchorErr));
+    const clean = path.replace(/^\/+|\/+$/g, '');
+    const result = await api('DELETE', `/api/fs/${clean}`);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('mv', 'Move/rename a frame within the ACTIVE PROJECT. Response includes "project" field.', {
+  from: z.string().describe('Source path: /{layer}/{lane}/{filename}'),
+  to: z.string().describe('Destination path: /{layer}/{lane}/{filename}'),
+}, async ({ from, to }) => {
+  try {
+    const fromErr = await checkAnchors(parseLayer(from));
+    if (fromErr) return err(new Error(fromErr));
+    const toErr = await checkAnchors(parseLayer(to));
+    if (toErr) return err(new Error(toErr));
+    const result = await api('POST', '/api/fs/mv', { from, to });
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('batch', 'Batch operations on the ACTIVE PROJECT. Response includes "project" field. Use open_project first if needed.', {
+  operations: z.array(z.object({
+    tool: z.enum(['write', 'rm', 'mv', 'edit']).describe('Tool to execute'),
+    path: z.string().optional().describe('Path (for write, rm, edit)'),
+    content: z.string().optional().describe('Content (for write). Mutually exclusive with file_path.'),
+    file_path: z.string().optional().describe('Absolute path to a local file to upload (for write). Mutually exclusive with content.'),
+    color: z.string().optional().describe('CSS color for frame border (for write)'),
+    from: z.string().optional().describe('Source path (for mv)'),
+    to: z.string().optional().describe('Destination path (for mv)'),
+    operations: z.array(z.object({
+      type: z.enum(['replace', 'delete', 'insertAfter', 'insertBefore']),
+      lineHash: z.string(),
+      newContent: z.string().optional(),
+    })).optional().describe('Edit operations (for edit). Always include lineNum.'),
+  })).describe('ALWAYS use batch instead of multiple individual tool calls. Applies the same change to many files, writes multiple frames, or combines writes+edits+deletes. One canvas refresh instead of many. Example: editing 5 wireframes to remove a section = one batch with 5 edit operations.'),
+}, async ({ operations }) => {
+  try {
+    // Collect all layers involved in the batch
+    const layers = new Set();
+    for (const op of operations) {
+      if (op.path) layers.add(parseLayer(op.path));
+      if (op.from) layers.add(parseLayer(op.from));
+      if (op.to) layers.add(parseLayer(op.to));
+    }
+    for (const layer of layers) {
+      const anchorErr = await checkAnchors(layer);
+      if (anchorErr) return err(new Error(anchorErr));
+    }
+
+    // Resolve file_path → base64 for write operations before sending to server
+    const resolvedOps = operations.map(op => {
+      if (op.tool === 'write' && op.file_path) {
+        const resolved = resolve(op.file_path);
+        if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
+        const buffer = readFileSync(resolved);
+        const ext = extname(resolved).toLowerCase();
+        const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml', '.pdf': 'application/pdf' };
+        const { file_path: _, ...rest } = op;
+        return { ...rest, base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+      }
+      return op;
+    });
+
+    const result = await api('POST', '/api/fs/batch', { operations: resolvedOps });
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+// ── Connector tools ───────────────────────────────────────────────
+
+server.tool('connect', 'Create a connector (arrow) between two frames on the surface.', {
+  source: z.string().describe('Source frame path or ID'),
+  target: z.string().describe('Target frame path or ID'),
+  label: z.string().optional().describe('Connector label text'),
+  type: z.string().optional().default('arrow-forward').describe('Connector type (default: arrow-forward)'),
+  color: z.string().optional().describe('Connector color (CSS color string)'),
+}, async ({ source, target, label, type, color }) => {
+  try {
+    const body = { source, target };
+    if (label) body.label = label;
+    if (type) body.type = type;
+    if (color) body.color = color;
+    const result = await api('POST', '/api/connectors', body);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('disconnect', 'Remove a connector between frames. Provide either connectorId directly, or source+target to find and remove it.', {
+  source: z.string().optional().describe('Source frame path or ID'),
+  target: z.string().optional().describe('Target frame path or ID'),
+  connectorId: z.string().optional().describe('Connector ID to delete directly'),
+}, async ({ source, target, connectorId }) => {
+  try {
+    if (connectorId) {
+      const result = await api('DELETE', `/api/connectors/${connectorId}`);
+      return ok(result);
+    }
+    if (source && target) {
+      // Resolve source/target paths to frame IDs
+      const sourceFrame = await api('GET', `/api/fs/${source.replace(/^\/+/, '')}`);
+      const targetFrame = await api('GET', `/api/fs/${target.replace(/^\/+/, '')}`);
+      const sourceId = sourceFrame.id;
+      const targetId = targetFrame.id;
+      if (!sourceId || !targetId) throw new Error('Could not resolve source or target frame');
+
+      const connectors = await api('GET', '/api/connectors');
+      const match = (connectors.connectors || connectors || []).find(
+        c => c.sourceDesignId === sourceId && c.targetDesignId === targetId
+      );
+      if (!match) throw new Error(`No connector found from ${source} to ${target}`);
+      const result = await api('DELETE', `/api/connectors/${match.id}`);
+      return ok(result);
+    }
+    throw new Error('Provide either connectorId, or both source and target');
+  } catch (error) { return err(error); }
+});
+
+// ── Layout tools ──────────────────────────────────────────────────
+
+server.tool('layout', 'Auto-arrange frames using graph layout algorithm. Positions connected frames as a directed graph.', {
+  direction: z.enum(['TB', 'LR', 'BT', 'RL']).optional().default('TB').describe('Layout direction: TB (top-bottom), LR (left-right), BT (bottom-top), RL (right-left)')
+}, async ({ direction }) => {
+  try {
+    const result = await api('POST', '/api/layout', { direction });
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+// ── Resource: canvas info ─────────────────────────────────────────
+
+server.resource('info', 'drafted://info', {
+  description: 'Canvas vocabulary: layers with default dimensions',
+  mimeType: 'application/json',
+}, async (uri) => {
+  return {
+    contents: [{
+      uri: uri.href,
+      mimeType: 'application/json',
+      text: JSON.stringify({
+        layers: LAYERS,
+        pathFormat: '/{layer}/{lane}/{filename}',
+        tools: ['write', 'read', 'edit', 'ls', 'rm', 'mv', 'batch'],
+      }, null, 2),
+    }],
+  };
+});
+
+// ── Transport ─────────────────────────────────────────────────────
+
+const args = process.argv.slice(2);
+
+async function main() {
+  if (args.includes('--http')) {
+    const { createServer } = await import('node:http');
+    const { StreamableHTTPServerTransport } = await import('@modelcontextprotocol/sdk/server/streamableHttp.js');
+    const { randomUUID } = await import('node:crypto');
+
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: () => randomUUID(),
+    });
+
+    await server.connect(transport);
+
+    const httpServer = createServer((req, res) => {
+      if (req.url === '/mcp') {
+        transport.handleRequest(req, res);
+      } else {
+        res.writeHead(404);
+        res.end('Not found');
+      }
+    });
+
+    const port = parseInt(process.env.MCP_HTTP_PORT || '3100', 10);
+    httpServer.listen(port, () => {
+      console.error(`MCP HTTP server listening on port ${port}`);
+    });
+  } else {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+  }
+}
+
+// Prevent unhandled rejections from killing the stdio transport
+process.on('unhandledRejection', (err) => {
+  console.error('[MCP] Unhandled rejection:', err?.message || err);
+});
+
+main().catch((err) => {
+  console.error('Fatal:', err.message);
+  process.exit(1);
+});