@comty.io/core 0.1.4 → 0.1.6

package/src/cursor.mjs

@@ -0,0 +1,49 @@
+import { realpathSync } from 'node:fs';
+import { openAgentProcess } from './agent-process.mjs';
+import { parseReceipt, receiptSchema, taskPrompt } from './codex.mjs';
+
+export async function runCursor({ cwd, task, signal, approve, progress, model, executable = 'agent', args = [] }) {
+  cwd = realpathSync(cwd);
+  let output = '';
+  const rpc = openAgentProcess({
+    executable, args: [...args, ...(model ? ['--model', model] : []), 'acp'], cwd, signal, label: 'Cursor',
+    async onRequest(method, params) {
+      if (method === 'session/request_permission') {
+        const allow = await approve({ type: method, details: params.toolCall });
+        const option = params.options?.find(option => option.kind === (allow ? 'allow_once' : 'reject_once'));
+        return { outcome: option ? { outcome: 'selected', optionId: option.optionId } : { outcome: 'cancelled' } };
+      }
+      if (method === 'cursor/create_plan') {
+        return { outcome: { outcome: await approve({ type: method, details: params }) ? 'accepted' : 'rejected' } };
+      }
+      throw new Error(`Cursor needs an unsupported interaction: ${method}. Create a new task with the missing details.`);
+    },
+    onNotification(method, params) {
+      if (method !== 'session/update' || params?.update?.sessionUpdate !== 'agent_message_chunk') return;
+      if (params.update.content?.type === 'text') {
+        output += params.update.content.text;
+        if (output.length > 1024 * 1024) throw new Error('Cursor response exceeded 1 MiB');
+        progress(output.slice(-4000));
+      }
+    },
+  });
+  try {
+    await rpc.request('initialize', {
+      protocolVersion: 1, clientInfo: { name: 'comty', version: '0.1.0' },
+      clientCapabilities: { fs: { readTextFile: false, writeTextFile: false }, terminal: false },
+    });
+    await rpc.request('authenticate', { methodId: 'cursor_login' });
+    const session = await rpc.request('session/new', { cwd, mcpServers: [] });
+    if (!session?.sessionId) throw new Error('Cursor did not create a session');
+    await rpc.request('session/set_mode', { sessionId: session.sessionId, modeId: 'agent' });
+    const result = await rpc.request('session/prompt', {
+      sessionId: session.sessionId,
+      prompt: [{ type: 'text', text: `${taskPrompt(task)}\n\nEnd your final response with <comty_result>JSON</comty_result>. The JSON must match this schema: ${JSON.stringify(receiptSchema)}. Write nothing after the closing tag.` }],
+    }, 0);
+    if (result?.stopReason !== 'end_turn') throw new Error(`Cursor stopped: ${result?.stopReason || 'unknown reason'}`);
+    const text = output.trim();
+    const start = text.lastIndexOf('<comty_result>');
+    if (start < 0 || !text.endsWith('</comty_result>')) throw new Error('Cursor did not return a completion receipt');
+    return parseReceipt(text.slice(start + '<comty_result>'.length, -'</comty_result>'.length));
+  } finally { await rpc.close(); }
+}

package/src/dev.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+import { createServer, request as httpRequest } from 'node:http';
+import { spawn } from 'node:child_process';
+import { readFile } from 'node:fs/promises';
+import { realpathSync } from 'node:fs';
+import { resolve, delimiter } from 'node:path';
+import { parseArgs } from 'node:util';
+import { pathToFileURL } from 'node:url';
+import { createCompanion, isLoopback } from './companion.mjs';
+
+export async function startDev({ cwd = process.cwd(), target = 'http://127.0.0.1:5173', port = 4387, provider = 'codex', model, projectKey, apiUrl, command = [] } = {}) {
+  const upstream = new URL(target);
+  if (upstream.protocol !== 'http:' || !isLoopback(upstream.hostname) || upstream.username || upstream.password || upstream.pathname !== '/' || upstream.search || upstream.hash) {
+    throw new Error('--target must be a loopback HTTP origin, e.g. http://127.0.0.1:5173');
+  }
+  if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error('Invalid --port');
+  const runtime = await readFile(new URL('./browser.js', import.meta.url));
+  const style = await readFile(new URL('./style.js', import.meta.url));
+  const anchors = await readFile(new URL('./anchors.js', import.meta.url));
+  const capture = await readFile(new URL('./capture.js', import.meta.url));
+  const captureEngine = await readFile(new URL('./capture-engine.js', import.meta.url));
+  const captureResources = await readFile(new URL('./capture-resources.js', import.meta.url));
+  const comments = await readFile(new URL('./comments.js', import.meta.url));
+  const measurements = await readFile(new URL('./measurements.js', import.meta.url));
+  let companion, origin, child, closing, finished;
+  const sockets = new Set();
+  const proxies = new Set();
+  const server = createServer((request, response) => {
+    if (!origin || request.headers.host !== new URL(origin).host) {
+      response.writeHead(403); response.end('Comty is available on its loopback URL only'); return;
+    }
+    let url;
+    try { url = new URL(request.url, origin); }
+    catch { response.writeHead(400); response.end('Invalid request target'); return; }
+    if (url.origin !== origin) { response.writeHead(400); response.end('Invalid request target'); return; }
+    if (url.pathname.startsWith('/__comty/')) {
+      if (request.headers.origin && request.headers.origin !== origin) {
+        response.writeHead(403); response.end(); return;
+      }
+      if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/capture-engine.js', '/__comty/capture-resources.js', '/__comty/comments.js', '/__comty/measurements.js', '/__comty/start.js'].includes(url.pathname)) {
+        response.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'no-store', 'X-Content-Type-Options': 'nosniff' });
+        response.end(url.pathname.endsWith('/browser.js') ? runtime : url.pathname.endsWith('/style.js') ? style : url.pathname.endsWith('/anchors.js') ? anchors : url.pathname.endsWith('/capture.js') ? capture : url.pathname.endsWith('/capture-engine.js') ? captureEngine : url.pathname.endsWith('/capture-resources.js') ? captureResources : url.pathname.endsWith('/comments.js') ? comments : url.pathname.endsWith('/measurements.js') ? measurements :
+          `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey, apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`);
+        return;
+      }
+      void companion.handle(request, response); return;
+    }
+    const destination = new URL(upstream);
+    destination.pathname = url.pathname; destination.search = url.search;
+    const proxy = httpRequest(destination, {
+      method: request.method,
+      headers: { ...request.headers, host: upstream.host, 'accept-encoding': 'identity' },
+    }, incoming => {
+      const headers = { ...incoming.headers };
+      if (headers.location?.startsWith(upstream.origin)) headers.location = headers.location.replace(upstream.origin, origin);
+      if (!headers['content-type']?.includes('text/html') || request.method === 'HEAD') {
+        response.writeHead(incoming.statusCode, headers); incoming.pipe(response); return;
+      }
+      // ponytail: buffer development HTML for injection; use the Vite integration for streamed HTML.
+      const chunks = []; let length = 0;
+      incoming.on('data', chunk => {
+        length += chunk.length;
+        if (length > 8 * 1024 * 1024) incoming.destroy(new Error('HTML exceeds the 8 MiB development limit'));
+        else chunks.push(chunk);
+      });
+      incoming.on('error', error => { if (!response.headersSent) response.writeHead(502); response.end(error.message); });
+      incoming.on('end', () => {
+        if (incoming.headers['content-encoding'] && incoming.headers['content-encoding'] !== 'identity') {
+          response.writeHead(502); response.end('Comty requires uncompressed development HTML'); return;
+        }
+        const html = Buffer.concat(chunks).toString('utf8');
+        const script = '<script type="module" src="/__comty/start.js"></script>';
+        const injected = /<head(?:\s[^>]*)?>/i.test(html) ? html.replace(/<head(?:\s[^>]*)?>/i, match => match + script) : script + html;
+        delete headers['content-length']; delete headers.etag; delete headers['content-encoding'];
+        headers['cache-control'] = 'no-store';
+        response.writeHead(incoming.statusCode, headers); response.end(injected);
+      });
+    });
+    proxies.add(proxy); proxy.on('close', () => proxies.delete(proxy));
+    proxy.on('error', () => {
+      if (!response.headersSent) response.writeHead(502, { 'Content-Type': 'text/plain' });
+      response.end(`Development server unavailable at ${upstream.origin}. Check its terminal output and reload.`);
+    });
+    request.on('aborted', () => proxy.destroy());
+    response.on('close', () => proxy.destroy());
+    request.pipe(proxy);
+  });
+  server.on('connection', socket => { sockets.add(socket); socket.on('close', () => sockets.delete(socket)); });
+  server.on('upgrade', (request, socket, head) => {
+    if (request.headers.host !== new URL(origin).host || (request.headers.origin && request.headers.origin !== origin)) return socket.destroy();
+    let url;
+    try { url = new URL(request.url, origin); } catch { return socket.destroy(); }
+    if (url.origin !== origin || url.pathname.startsWith('/__comty/')) return socket.destroy();
+    const destination = new URL(upstream);
+    destination.pathname = url.pathname; destination.search = url.search;
+    const proxy = httpRequest(destination, { headers: { ...request.headers, host: upstream.host } });
+    proxies.add(proxy); proxy.on('close', () => proxies.delete(proxy));
+    proxy.on('upgrade', (response, upstreamSocket, upstreamHead) => {
+      sockets.add(upstreamSocket); upstreamSocket.on('close', () => sockets.delete(upstreamSocket));
+      socket.write(`HTTP/1.1 ${response.statusCode} ${response.statusMessage}\r\n${response.rawHeaders.reduce((text, value, index, all) => index % 2 ? text : text + value + ': ' + all[index + 1] + '\r\n', '')}\r\n`);
+      if (upstreamHead.length) socket.write(upstreamHead);
+      if (head.length) upstreamSocket.write(head);
+      socket.pipe(upstreamSocket).pipe(socket);
+      socket.on('error', () => upstreamSocket.destroy());
+      upstreamSocket.on('error', () => socket.destroy());
+      socket.on('close', () => upstreamSocket.destroy());
+      upstreamSocket.on('close', () => socket.destroy());
+    });
+    proxy.on('response', response => { response.resume(); socket.destroy(); });
+    proxy.on('error', () => socket.destroy());
+    proxy.end();
+  });
+  await new Promise((resolve, reject) => { server.once('error', reject); server.listen(port, '127.0.0.1', resolve); });
+  origin = `http://127.0.0.1:${server.address().port}`;
+  if (new URL(origin).port === upstream.port) { server.close(); throw new Error('Comty and the application must use different ports'); }
+  try { companion = createCompanion({ cwd, origin, provider, model }); }
+  catch (error) { server.close(); throw error; }
+  async function close() {
+    if (closing) return closing;
+    closing = (async () => {
+      const kill = signal => {
+        if (!child?.pid) return;
+        try {
+          if (process.platform === 'win32') child.kill(signal);
+          else process.kill(-child.pid, signal);
+        } catch (error) { if (error.code !== 'ESRCH') throw error; }
+      };
+      kill('SIGTERM');
+      const force = setTimeout(() => kill('SIGKILL'), 2000);
+      for (const proxy of proxies) proxy.destroy();
+      for (const socket of sockets) socket.destroy();
+      await Promise.all([companion.close(), new Promise(resolve => server.close(resolve)),
+        child && child.exitCode === null && child.signalCode === null ? new Promise(resolve => child.once('close', resolve)) : Promise.resolve()]);
+      clearTimeout(force);
+    })();
+    return closing;
+  }
+  if (command.length) {
+    child = spawn(command[0], command.slice(1), {
+      cwd, stdio: 'inherit', detached: process.platform !== 'win32', env: { ...process.env, PATH: `${resolve(cwd, 'node_modules/.bin')}${delimiter}${process.env.PATH || ''}` },
+    });
+    child.on('error', error => { console.error(`Comty could not start ${command[0]}: ${error.message}`); });
+    finished = new Promise(resolve => child.once('close', code => resolve(Number.isInteger(code) && code >= 0 ? code : 1))).then(async code => {
+      await close();
+      return code;
+    });
+    finished.catch(error => console.error(`Comty shutdown failed: ${error.message}`));
+  }
+  return { origin, close, finished };
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  if (!args.length || args.includes('--help')) {
+    console.log('Usage: comty dev [--agent codex|claude|cursor|gemini|grok] [--model MODEL] [--target http://127.0.0.1:5173] [--port 4387] [--project-key KEY --api-url URL] -- vite --strictPort'); return;
+  }
+  if (args.shift() !== 'dev') throw new Error('Expected comty dev. Use --help for usage.');
+  const split = args.indexOf('--');
+  const { values } = parseArgs({ args: split < 0 ? args : args.slice(0, split), options: {
+    target: { type: 'string' }, port: { type: 'string' }, agent: { type: 'string' }, model: { type: 'string' }, 'project-key': { type: 'string' }, 'api-url': { type: 'string' },
+  } });
+  const session = await startDev({ target: values.target, port: values.port === undefined ? 4387 : Number(values.port), provider: values.agent, model: values.model,
+    projectKey: values['project-key'], apiUrl: values['api-url'], command: split < 0 ? [] : args.slice(split + 1) });
+  console.log(`Comty: ${session.origin} — open this URL to annotate with the local agent.`);
+  for (const signal of ['SIGINT', 'SIGTERM']) process.once(signal, () => { void session.close().catch(console.error); });
+  if (session.finished) process.exitCode = await session.finished;
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(realpathSync(process.argv[1])).href) {
+  main().catch(error => { console.error(`Comty: ${error.message}`); process.exitCode = 1; });
+}

package/src/gemini.mjs

@@ -0,0 +1,3 @@
+import { runAcp } from './acp.mjs';
+
+export const runGemini = options => runAcp({ ...options, provider: 'gemini' });

package/src/grok.mjs

@@ -0,0 +1,3 @@
+import { runAcp } from './acp.mjs';
+
+export const runGrok = options => runAcp({ ...options, provider: 'grok' });

package/src/style.js

@@ -1,7 +1,7 @@
 export function getComtyStyle() {
     const toolbarSurface = "#2b2d2f";
     const toolbarMuted = "#b8babb";
-    const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
+    const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
     const typographyCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="8" y="8" width="23" height="23" rx="7" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width=".75"/><path d="m14 25 5.5-12L25 25m-8.5-4h6M13 25h4m5 0h4" fill="none" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 2 2 15 4-5 6-3Z" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
     return `
       #comty-root {
@@ -11,7 +11,7 @@ export function getComtyStyle() {
         --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-error: #ef7676;
-        --comty-outline: var(--comty-toolbar-muted);
+        --comty-outline: var(--comty-accent);
         --comty-comment-focus: var(--comty-toolbar-muted);
         --comty-paper: #fff;
         --comty-ink: #171717;
@@ -58,6 +58,8 @@ export function getComtyStyle() {
         --comty-dialog-width: 32rem;
         --comty-dialog-shadow: 0 1.5rem 4rem rgb(0 0 0 / .16);
         --comty-motion-duration: 220ms;
+        --comty-working-dot-size: .25em;
+        --comty-working-dot-gap: .125em;
         --comty-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
         --comty-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
         position: fixed;
@@ -69,13 +71,73 @@ export function getComtyStyle() {
         font-family: var(--comty-font);
         color-scheme: dark;
       }
-
+      #comty-root :is(button, .comty-comment-avatar) { user-select: none; -webkit-user-select: none; }
+      #comty-root .comty-comment-avatar img { -webkit-user-drag: none; }
+      #comty-root .comty-pin .comty-comment-avatar { pointer-events: none; }
+      #comty-root > .comty-agent-panel { position: fixed; right: 1rem; bottom: 5rem; z-index: 2147483647; width: min(22rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 6rem)); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; border: .0625rem solid var(--comty-border); border-radius: 1rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; transform: translateY(0); opacity: 1; transition: transform var(--comty-motion-duration) var(--comty-ease-out), opacity var(--comty-motion-duration) ease; color-scheme: dark; }
+      #comty-root > .comty-agent-panel[data-side="left"] { left: 1rem; right: auto; }
+      #comty-root > .comty-agent-panel[data-closed] { transform: translateY(.5rem); opacity: 0; pointer-events: none; }
+      #comty-root > .comty-agent-panel[hidden] { display: none; }
+      .comty-agent-panel *, .comty-agent-panel *::before { box-sizing: border-box; }
+      .comty-agent-panel-header { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-brand { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; flex-shrink: 0; border-radius: .6875rem; color: var(--comty-accent); background: var(--comty-hover-surface); }
+      .comty-agent-brand.comty-agent-avatar { width: 2.375rem; height: 2.375rem; border-radius: 0; background: transparent; }
+      .comty-agent-panel svg { display: block; width: 1rem; height: 1rem; flex-shrink: 0; }
+      .comty-agent-brand svg { width: 1.25rem; height: 1.25rem; }
+      .comty-agent-brand.comty-agent-avatar svg { width: 100%; height: 100%; }
+      .comty-agent-answer { display: flex; align-items: flex-start; gap: .5rem; padding: .375rem .5rem .875rem; }
+      .comty-agent-answer .comty-agent-brand { width: 1.5rem; height: 1.5rem; }
+      .comty-agent-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--comty-foreground); }
+      .comty-agent-heading { flex: 1; min-width: 0; }
+      .comty-agent-heading strong { display: block; font-weight: 600; font-size: .875rem; }
+      .comty-agent-panel-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--comty-hover-surface) transparent; padding: .375rem .5rem 2rem; }
+      .comty-agent-item { padding: .375rem .25rem; overflow-wrap: anywhere; }
+      .comty-agent-item + .comty-agent-item { border-top: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-item h3 { margin: 0 0 .25rem; color: var(--comty-foreground); font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; }
+      .comty-agent-list { display: grid; gap: .125rem; }
+      .comty-agent-row { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2rem; padding: .25rem .5rem; border-radius: .5rem; color: var(--comty-foreground); }
+      .comty-agent-row:hover { background: var(--comty-hover-surface); }
+      .comty-agent-dot { width: .4375rem; height: .4375rem; flex: 0 0 auto; border-radius: 50%; background: var(--comty-muted); }
+      .comty-working-indicator { display: inline-grid; grid-template-columns: repeat(3, var(--comty-working-dot-size)); gap: var(--comty-working-dot-gap); flex: 0 0 auto; color: var(--comty-foreground); }
+      .comty-working-indicator > i { display: block; width: var(--comty-working-dot-size); height: var(--comty-working-dot-size); border-radius: 50%; background: currentColor; opacity: .25; transition: opacity 150ms linear; }
+      .comty-working-indicator > i[data-active] { opacity: 1; }
+      .comty-agent-dot[data-status="success"] { background: var(--comty-agent-success); }
+      .comty-agent-dot[data-status="error"] { background: var(--comty-agent-error); }
+      .comty-agent-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+      .comty-agent-row-state { flex: 0 0 auto; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-row-actions { position: absolute; top: 50%; right: .25rem; display: flex; gap: .25rem; border-radius: .25rem; background: var(--comty-hover-surface); opacity: 0; pointer-events: none; transform: translateY(-50%); }
+      .comty-agent-row:hover .comty-agent-row-actions, .comty-agent-row-actions:has(.comty-agent-action:focus-visible) { opacity: 1; pointer-events: auto; }
+      @media (hover: none) { .comty-agent-row-actions { position: static; opacity: 1; pointer-events: auto; transform: none; background: transparent; } }
+      .comty-agent-panel .comty-agent-row-actions .comty-agent-action { min-height: 1.5rem; padding: .125rem .375rem; border-radius: .25rem; background: transparent; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-panel .comty-agent-row-actions .comty-agent-action:hover { color: var(--comty-foreground); background: var(--comty-surface); }
+      .comty-agent-error-popover { position: fixed; z-index: 2147483647; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: .75rem .875rem; border: 0; border-radius: .625rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; pointer-events: none; color-scheme: dark; }
+      .comty-agent-error-popover strong { display: block; font-weight: 600; }
+      .comty-agent-error-popover p { margin: .375rem 0 0; color: var(--comty-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+      .comty-agent-panel p { margin: .5rem 0 0; font: inherit; color: var(--comty-muted); }
+      .comty-agent-error { margin-top: .75rem; }
+      .comty-agent-error strong { display: block; font-weight: 500; color: var(--comty-foreground); }
+      .comty-agent-error p { margin-top: .25rem; }
+      .comty-agent-banner { margin-bottom: 1rem; }
+      .comty-agent-banner .comty-agent-error { margin-top: 0; }
+      .comty-agent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
+      .comty-agent-panel .comty-agent-action { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; margin: 0; padding: .375rem .625rem; border: 0; border-radius: .5rem; font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; color: var(--comty-foreground); background: var(--comty-hover-surface); transition: background-color 150ms ease; }
+      .comty-agent-panel .comty-agent-action:hover { background: color-mix(in srgb, var(--comty-foreground) 12%, var(--comty-hover-surface)); }
+      .comty-agent-panel .comty-agent-action[data-primary] { color: var(--comty-paper); background: var(--comty-accent); }
+      .comty-agent-panel .comty-agent-action:disabled { opacity: .5; cursor: wait; }
+      .comty-agent-panel .comty-agent-close { width: 1.5rem; min-height: 1.5rem; padding: 0; background: transparent; color: var(--comty-muted); }
+      .comty-agent-panel :is(button, summary):focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .1875rem; }
+      .comty-agent-details { margin-top: .625rem; }
+      .comty-agent-panel summary { cursor: pointer; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-panel pre { margin: .5rem 0 0; padding: .625rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; border-radius: .5rem; background: var(--comty-surface); color: var(--comty-muted); font: .875rem/1.4 ui-monospace, monospace; }
+      .comty-agent-working { position: fixed; z-index: 1; box-sizing: border-box; border: 2px solid var(--comty-accent); border-radius: 0; pointer-events: none; }
+      .comty-agent-working-badge { position: absolute; left: -.125rem; bottom: 100%; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-surface); color: var(--comty-foreground); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
+      .comty-agent-working[data-badge-below] .comty-agent-working-badge { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
       #comty-root { cursor: default; }
       #comty-root::backdrop { background: transparent; pointer-events: none; }
       html.comty-comment-placement,
       html.comty-comment-placement body,
       html.comty-comment-placement body *:not(#comty-root):not(#comty-root *) {
-        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 20 20, crosshair !important;
+        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 16 16, crosshair !important;
       }
       #comty-root > .comty-sidepanel-open, #comty-root > .comty-pin, #comty-root > .comty-bubble, #comty-root > .comty-create-bubble, #comty-root > .comty-popover, #comty-root > .comty-auth-backdrop, #comty-root > .comty-auth-toast { pointer-events: auto; }
       .comty-toolbar {
@@ -142,7 +204,7 @@ export function getComtyStyle() {
       #comty-root [hidden] { display: none !important; }
       [data-comty-anchor-hidden] { visibility: hidden !important; pointer-events: none !important; }
       @media (prefers-reduced-motion: reduce) {
-        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble { transition: none !important; animation: none !important; }
+        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-working-indicator > i { transition: none !important; animation: none !important; }
       }
 
       .comty-sidepanel {
@@ -324,6 +386,16 @@ export function getComtyStyle() {
         white-space: nowrap;
       }
 
+      .comty-anchor-badge {
+        display: inline-block;
+        margin-top: .375rem;
+        padding: .125rem .375rem;
+        border: 1px solid var(--comty-border);
+        border-radius: 999rem;
+        color: var(--comty-muted);
+        font: .6875rem/1.4 sans-serif;
+      }
+
       .comty-pin {
         position: fixed;
         z-index: 2147483645;
@@ -605,6 +677,8 @@ export function getComtyStyle() {
         height: 100%;
         object-fit: cover;
       }
+      .comty-comment-avatar.comty-agent-avatar { overflow: visible; border-radius: 0; background: transparent; color: var(--comty-paper); }
+      .comty-comment-avatar.comty-agent-avatar svg { display: block; width: 100%; height: 100%; }
 
       .comty-pin-avatar {
         width: 24px;
@@ -719,12 +793,12 @@ export function getComtyStyle() {
       }
 
       .comty-popover-item.comty-popover-item-destructive {
-        color: var(--comty-error);
+        color: var(--comty-agent-error);
       }
 
       .comty-popover-item.comty-popover-item-destructive:hover,
       .comty-popover-item.comty-popover-item-destructive:focus-visible {
-        background: color-mix(in srgb, var(--comty-error) 12%, var(--comty-surface));
+        background: color-mix(in srgb, var(--comty-agent-error) 12%, var(--comty-surface));
         outline: none;
       }
 
@@ -1095,15 +1169,15 @@ export function getComtyStyle() {
         margin: 4px 0;
       }
 
-      html.comty-comments-active .comty-pin {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin {
         display: grid;
       }
 
-      html.comty-comments-active .comty-pin.comty-filtered-out {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin.comty-filtered-out {
         display: none;
       }
 
-      html.comty-comments-active .comty-bubble {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-bubble {
         display: block;
       }
 
@@ -1213,10 +1287,10 @@ export function getComtyStyle() {
         position: fixed;
         box-sizing: border-box;
         border: .0625rem solid var(--comty-outline);
-        background: color-mix(in oklch, var(--comty-outline) 8%, transparent);
+        background: transparent;
+        border-radius: 0;
         pointer-events: none;
       }
-      .comty-inspection-box[data-selected] { background: color-mix(in oklch, var(--comty-outline) 5%, transparent); }
       .comty-inspect-spacing { position: fixed; pointer-events: none; background: var(--comty-spacing-color); }
       .comty-inspect-margin { --comty-spacing-color: var(--comty-margin-fill); }
       .comty-inspect-padding { --comty-spacing-color: var(--comty-padding-fill); }
@@ -1270,6 +1344,15 @@ export function getComtyStyle() {
         height: 5.75rem;
         border-radius: .75rem;
       }
+      .comty-agent-scope { display: inline-flex; align-items: center; gap: .375rem; color: var(--comty-muted); font: .6875rem/1.25 var(--comty-font); white-space: nowrap; cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; }
+      .comty-create-expanded .comty-agent-scope { opacity: 1; visibility: visible; }
+      .comty-agent-scope input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+      .comty-agent-scope-track { position: relative; width: 1.5rem; height: .875rem; flex: 0 0 auto; border-radius: 999rem; background: var(--comty-border); transition: background-color 160ms ease; }
+      .comty-agent-scope-track::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--comty-paper); transition: transform 160ms ease; }
+      .comty-agent-scope input:checked + .comty-agent-scope-track { background: var(--comty-accent); }
+      .comty-agent-scope input:checked + .comty-agent-scope-track::after { transform: translateX(.625rem); }
+      .comty-agent-scope input:focus-visible + .comty-agent-scope-track { outline: .125rem solid var(--comty-comment-focus); outline-offset: .125rem; }
+      .comty-agent-thread-error { grid-column: 2; margin: .25rem 0 0; color: var(--comty-agent-error); font: .6875rem/1.3 var(--comty-font); }
 
       .comty-create-bubble.comty-create-has-attachment { height: 7.5rem; }
       .comty-create-bubble.comty-bubble-left { transform-origin: top right; }

package/src/vite.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+import type { ComtyOptions } from './browser.js';
+
+/** Development only: leaves production builds untouched. */
+export function comty(options?: Pick<ComtyOptions, 'projectKey' | 'apiUrl'> & { agent?: 'codex' | 'claude' | 'cursor' | 'gemini' | 'grok'; model?: string }): Plugin;

package/src/vite.mjs

@@ -0,0 +1,68 @@
+import { readFile } from 'node:fs/promises';
+import { createCompanion, isLoopback } from './companion.mjs';
+
+/** Starts the local companion on Vite's own origin, without a second port. */
+export function comty(options = {}) {
+  let companion, origin, start;
+  return {
+    name: 'comty', apply: 'serve',
+    configureServer(server) {
+      const host = server.config.server.host;
+      if (host === true || (typeof host === 'string' && !isLoopback(host))) {
+        throw new Error('Comty Agent requires Vite to bind localhost or 127.0.0.1');
+      }
+      if (!server.httpServer) throw new Error('Comty requires a Vite HTTP server (middleware mode is unsupported)');
+      const runtime = new URL('./browser.js', import.meta.url);
+      const style = new URL('./style.js', import.meta.url);
+      const anchors = new URL('./anchors.js', import.meta.url);
+      const capture = new URL('./capture.js', import.meta.url);
+      const captureEngine = new URL('./capture-engine.js', import.meta.url);
+      const captureResources = new URL('./capture-resources.js', import.meta.url);
+      const comments = new URL('./comments.js', import.meta.url);
+      const measurements = new URL('./measurements.js', import.meta.url);
+      start = new Promise((resolve, reject) => {
+        const onError = error => {
+          // Vite retries the next port after EADDRINUSE unless strictPort is set.
+          if (error.code !== 'EADDRINUSE' || server.config.server.strictPort) reject(error);
+        };
+        server.httpServer.on('error', onError);
+        server.httpServer.once('listening', () => {
+          server.httpServer.off('error', onError);
+          try {
+            const address = server.httpServer.address();
+            const hostname = typeof host === 'string' ? host : 'localhost';
+            origin = `${server.config.server.https ? 'https' : 'http'}://${hostname}:${address.port}`;
+            companion = createCompanion({ cwd: server.config.root, origin, provider: options.agent, model: options.model });
+            server.httpServer.once('close', () => { void companion.close().catch(error => server.config.logger.error(`Comty: ${error.message}`)); });
+            resolve();
+          } catch (error) { reject(error); }
+        });
+      });
+      start.catch(error => server.config.logger.error(`Comty: ${error.message}`));
+      server.middlewares.use(async (request, response, next) => {
+        if (!request.url?.startsWith('/__comty/')) return next();
+        try {
+          await start;
+          if (request.headers.host !== new URL(origin).host || (request.headers.origin && request.headers.origin !== origin)) {
+            response.writeHead(403); response.end(); return;
+          }
+          const path = new URL(request.url, origin).pathname;
+          if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/capture-engine.js', '/__comty/capture-resources.js', '/__comty/comments.js', '/__comty/measurements.js', '/__comty/start.js'].includes(path)) {
+            response.setHeader('Content-Type', 'text/javascript'); response.setHeader('Cache-Control', 'no-store');
+            response.setHeader('X-Content-Type-Options', 'nosniff');
+            response.end(path.endsWith('/browser.js') ? await readFile(runtime) : path.endsWith('/style.js') ? await readFile(style) : path.endsWith('/anchors.js') ? await readFile(anchors) : path.endsWith('/capture.js') ? await readFile(capture) : path.endsWith('/capture-engine.js') ? await readFile(captureEngine) : path.endsWith('/capture-resources.js') ? await readFile(captureResources) : path.endsWith('/comments.js') ? await readFile(comments) : path.endsWith('/measurements.js') ? await readFile(measurements) :
+              `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey: options.projectKey, apiUrl: options.apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`);
+          } else await companion.handle(request, response);
+        } catch (error) { next(error); }
+      });
+    },
+    transformIndexHtml: {
+      order: 'pre',
+      async handler() {
+        await start;
+        return [{ tag: 'script', attrs: { type: 'module', src: '/__comty/start.js', 'vite-ignore': '' }, injectTo: 'head-prepend' }];
+      },
+    },
+    async closeBundle() { await companion?.close(); },
+  };
+}