@nimrobo/wand-web 0.1.0

package/dist/runtime/styles.js

@@ -0,0 +1,191 @@
+export const styles = `
+.wand-launcher,
+.wand-panel,
+.wand-frame,
+.wand-toast {
+  box-sizing: border-box;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.wand-launcher {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 2147483647;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(17, 24, 39, 0.15);
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.94);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+.wand-launcher svg { width: 18px; height: 18px; }
+.wand-frame {
+  position: fixed;
+  z-index: 2147483645;
+  pointer-events: none;
+  border: 2px solid #3c7ce6;
+  background: rgba(60, 124, 230, 0.08);
+  box-shadow: 0 0 0 1px rgba(60, 124, 230, 0.28);
+  transition: left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out;
+}
+.wand-panel {
+  position: fixed;
+  right: 18px;
+  bottom: 72px;
+  z-index: 2147483647;
+  width: min(360px, calc(100vw - 36px));
+  border: 1px solid rgba(17, 24, 39, 0.14);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.98);
+  color: #111827;
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+.wand-panel-header,
+.wand-panel-section {
+  padding: 12px;
+}
+.wand-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
+  font-size: 13px;
+  font-weight: 600;
+}
+.wand-panel textarea {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-height: 92px;
+  resize: vertical;
+  border: 1px solid rgba(17, 24, 39, 0.16);
+  border-radius: 6px;
+  padding: 9px 10px;
+  color: #111827;
+  background: white;
+  font: inherit;
+}
+.wand-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.wand-agent-picker {
+  display: grid;
+  gap: 5px;
+  margin-top: 10px;
+}
+.wand-agent-picker select {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid rgba(17, 24, 39, 0.16);
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: #111827;
+  background: white;
+  font: inherit;
+}
+.wand-agent-picker select:disabled {
+  color: rgba(17, 24, 39, 0.42);
+  background: #f8fafc;
+}
+.wand-actions button,
+.wand-queue-item button {
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+.wand-actions button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+.wand-actions button:first-child {
+  background: #111827;
+  color: white;
+}
+.wand-actions button:last-child,
+.wand-queue-item button {
+  background: #eef2f7;
+  color: #111827;
+}
+.wand-queue {
+  border-top: 1px solid rgba(17, 24, 39, 0.08);
+}
+.wand-queue-item {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid rgba(17, 24, 39, 0.06);
+  font-size: 12px;
+}
+.wand-queue-item:first-child { border-top: 0; }
+.wand-queue-controls { display: flex; gap: 8px; }
+.wand-agent-run {
+  background: rgba(60, 124, 230, 0.08);
+}
+.wand-run-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wand-run-title {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.wand-run-header button {
+  flex: none;
+}
+.wand-run-message {
+  overflow: hidden;
+  margin: 0;
+  color: rgba(17, 24, 39, 0.76);
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wand-sending {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.wand-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.38);
+  border-top-color: currentColor;
+  border-radius: 999px;
+  animation: wand-spin 700ms linear infinite;
+}
+@keyframes wand-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wand-spinner { animation: none; }
+}
+.wand-muted {
+  color: rgba(17, 24, 39, 0.58);
+  font-size: 12px;
+}
+.wand-toast {
+  position: fixed;
+  right: 18px;
+  bottom: 72px;
+  z-index: 2147483647;
+  max-width: min(320px, calc(100vw - 36px));
+  border-radius: 6px;
+  background: rgba(17, 24, 39, 0.94);
+  color: white;
+  padding: 9px 11px;
+  font-size: 12px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+`;

package/dist/server/agent-config.d.ts

@@ -0,0 +1,7 @@
+import { type AdapterKind } from "@nimrobo/superconnector";
+export type AgentAdapterConfig = {
+    availableAdapters: AdapterKind[];
+    selectedAdapter: AdapterKind | null;
+};
+export declare function getAgentAdapterConfig(projectRoot: string): AgentAdapterConfig;
+export declare function savePreferredAdapter(projectRoot: string, adapter: AdapterKind): AgentAdapterConfig;

package/dist/server/agent-config.js

@@ -0,0 +1,63 @@
+import { accessSync, constants, statSync } from "node:fs";
+import { delimiter, isAbsolute, join } from "node:path";
+import { ADAPTER_KINDS, detectAdapter, } from "@nimrobo/superconnector";
+import { localConfigPath, readConfig, resolveConfig, writeConfig, } from "@nimrobo/superconnector/config";
+const adapterCommands = {
+    "claude-code": { env: "CLAUDE_BIN", fallback: "claude" },
+    opencode: { env: "OPENCODE_BIN", fallback: "opencode" },
+    codex: { env: "CODEX_BIN", fallback: "codex" },
+};
+export function getAgentAdapterConfig(projectRoot) {
+    const availableAdapters = ADAPTER_KINDS.filter((adapter) => adapterBinaryAvailable(adapter));
+    const preferredAdapter = resolveConfig(projectRoot).merged.preferredAdapter;
+    const resolvedAdapter = preferredAdapter ?? detectAdapter(projectRoot);
+    return {
+        availableAdapters: [...availableAdapters],
+        selectedAdapter: resolvedAdapter && availableAdapters.includes(resolvedAdapter) ? resolvedAdapter : null,
+    };
+}
+export function savePreferredAdapter(projectRoot, adapter) {
+    if (!ADAPTER_KINDS.includes(adapter)) {
+        throw new Error(`Unsupported adapter: ${adapter}`);
+    }
+    if (!adapterBinaryAvailable(adapter)) {
+        throw new Error(`Adapter binary is not available: ${adapter}`);
+    }
+    const path = localConfigPath(projectRoot);
+    const current = readConfig(path) ?? {};
+    writeConfig(path, { ...current, preferredAdapter: adapter });
+    return getAgentAdapterConfig(projectRoot);
+}
+function adapterBinaryAvailable(adapter) {
+    const spec = adapterCommands[adapter];
+    const command = process.env[spec.env] ?? spec.fallback;
+    return isExecutableAvailable(command);
+}
+function isExecutableAvailable(command) {
+    if (!command)
+        return false;
+    if (isPathLike(command))
+        return canExecute(command);
+    const path = process.env.PATH ?? "";
+    for (const dir of path.split(delimiter)) {
+        if (!dir)
+            continue;
+        if (canExecute(join(dir, command)))
+            return true;
+    }
+    return false;
+}
+function isPathLike(command) {
+    return isAbsolute(command) || command.includes("/") || command.includes("\\");
+}
+function canExecute(filePath) {
+    try {
+        if (!statSync(filePath).isFile())
+            return false;
+        accessSync(filePath, constants.X_OK);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/server/agent.d.ts

@@ -0,0 +1,12 @@
+import { type AdapterKind, type AgentMessage } from "@nimrobo/superconnector";
+import type { PersistedSelectionCapture } from "./types.js";
+export type AgentSendResult = {
+    sessionId: string | null;
+};
+export type AgentSendOptions = {
+    adapter?: AdapterKind;
+    signal?: AbortSignal;
+    onMessage?(message: AgentMessage): void;
+};
+export declare function sendToAgent(projectRoot: string, prompt: string, context: PersistedSelectionCapture, options?: AgentSendOptions): Promise<AgentSendResult>;
+export declare function buildAgentPrompt(prompt: string, context: PersistedSelectionCapture): string;

package/dist/server/agent.js

@@ -0,0 +1,35 @@
+import { createSuperconnector, } from "@nimrobo/superconnector";
+export async function sendToAgent(projectRoot, prompt, context, options = {}) {
+    const connector = createSuperconnector(options.adapter !== undefined ? { adapter: options.adapter } : {});
+    let sessionId = null;
+    const generatedPrompt = buildAgentPrompt(prompt, context);
+    for await (const message of connector.spawn({
+        prompt: generatedPrompt,
+        appId: "wand-web",
+        permissionMode: "acceptEdits",
+        signal: options.signal,
+    })) {
+        if (message.sessionId)
+            sessionId = message.sessionId;
+        options.onMessage?.(message);
+    }
+    return { sessionId };
+}
+export function buildAgentPrompt(prompt, context) {
+    return [
+        "The user selected a UI element in their running web app and requested a code change.",
+        "",
+        `User request: ${prompt}`,
+        "",
+        "Read these local files before editing:",
+        `- Selection context JSON: ${context.contextPath}`,
+        `- Selected element HTML: ${context.elementHtmlPath}`,
+        `- Viewport screenshot: ${context.viewportScreenshotPath}`,
+        `- Selected element crop: ${context.elementScreenshotPath}`,
+        "",
+        `Current page: ${context.url}`,
+        `Selected element: <${context.tagName.toLowerCase()}> ${context.selector}`,
+        "",
+        "Use the selection context and screenshots to identify the relevant source and make the requested edit.",
+    ].join("\n");
+}

package/dist/server/http.d.ts

@@ -0,0 +1,9 @@
+import { type AgentRunner } from "./runs.js";
+export type WandServer = {
+    url: string;
+    close(): Promise<void>;
+};
+export type StartWandServerOptions = {
+    agentRunner?: AgentRunner;
+};
+export declare function startWandServer(projectRoot: string, port?: number, options?: StartWandServerOptions): Promise<WandServer>;

package/dist/server/http.js

@@ -0,0 +1,166 @@
+import { createServer } from "node:http";
+import { access, readFile } from "node:fs/promises";
+import { isAdapterKind } from "@nimrobo/superconnector";
+import { getAgentAdapterConfig, savePreferredAdapter } from "./agent-config.js";
+import { sendToAgent } from "./agent.js";
+import { ActiveRunManager } from "./runs.js";
+import { WandStorage } from "./storage.js";
+export async function startWandServer(projectRoot, port = 0, options = {}) {
+    const storage = new WandStorage(projectRoot);
+    const runs = new ActiveRunManager(projectRoot, options.agentRunner ?? sendToAgent);
+    const closeRunStreams = new Set();
+    await storage.ensure();
+    const server = createServer(async (req, res) => {
+        try {
+            setCors(res);
+            if (req.method === "OPTIONS") {
+                res.writeHead(204);
+                res.end();
+                return;
+            }
+            const url = new URL(req.url ?? "/", "http://localhost");
+            if (req.method === "GET" && url.pathname === "/health") {
+                json(res, 200, { ok: true });
+                return;
+            }
+            if (req.method === "GET" && url.pathname === "/client.js") {
+                javascript(res, 200, await readClientBundle());
+                return;
+            }
+            if (req.method === "GET" && url.pathname === "/api/queue") {
+                json(res, 200, await storage.listQueue());
+                return;
+            }
+            if (req.method === "GET" && url.pathname === "/api/agent-config") {
+                json(res, 200, getAgentAdapterConfig(projectRoot));
+                return;
+            }
+            if (req.method === "GET" && url.pathname === "/api/runs") {
+                json(res, 200, runs.list());
+                return;
+            }
+            if (req.method === "GET" && url.pathname === "/api/runs/events") {
+                res.writeHead(200, {
+                    "content-type": "text/event-stream",
+                    "cache-control": "no-cache",
+                    connection: "keep-alive",
+                });
+                res.write("retry: 1000\n\n");
+                let closed = false;
+                const unsubscribe = runs.subscribe((activeRuns) => writeRunEvent(res, activeRuns));
+                const close = () => {
+                    if (closed)
+                        return;
+                    closed = true;
+                    unsubscribe();
+                    closeRunStreams.delete(close);
+                    res.end();
+                };
+                closeRunStreams.add(close);
+                req.on("close", close);
+                return;
+            }
+            if (req.method === "POST" && url.pathname === "/api/queue") {
+                const body = await readJson(req);
+                const context = await storage.persistCapture(body.capture);
+                json(res, 201, await storage.queue(body.prompt, context));
+                return;
+            }
+            if (req.method === "PUT" && url.pathname === "/api/agent-config") {
+                const body = await readJson(req);
+                json(res, 200, savePreferredAdapter(projectRoot, body.adapter));
+                return;
+            }
+            if (req.method === "DELETE" && url.pathname.startsWith("/api/queue/")) {
+                const id = decodeURIComponent(url.pathname.split("/").pop() ?? "");
+                await storage.removeQueued(id);
+                json(res, 200, { ok: true });
+                return;
+            }
+            if (req.method === "DELETE" && url.pathname.startsWith("/api/runs/")) {
+                const id = decodeURIComponent(url.pathname.split("/").pop() ?? "");
+                json(res, 200, { ok: await runs.stop(id) });
+                return;
+            }
+            if (req.method === "POST" && url.pathname === "/api/send") {
+                const body = await readJson(req);
+                const context = body.context ?? (await storage.persistCapture(required(body.capture)));
+                json(res, 202, await runs.start(body.prompt, context, optionalAdapter(body.adapter)));
+                return;
+            }
+            json(res, 404, { error: "not_found" });
+        }
+        catch (error) {
+            json(res, 500, {
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    await new Promise((resolve) => server.listen(port, "127.0.0.1", resolve));
+    const address = server.address();
+    return {
+        url: `http://127.0.0.1:${address.port}`,
+        close: async () => {
+            for (const close of closeRunStreams)
+                close();
+            await runs.stopAll();
+            await new Promise((resolve, reject) => server.close((error) => (error ? reject(error) : resolve())));
+        },
+    };
+}
+function required(value) {
+    if (value === undefined)
+        throw new Error("Missing required capture payload.");
+    return value;
+}
+function optionalAdapter(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== "string" || !isAdapterKind(value)) {
+        throw new Error(`Unsupported adapter: ${String(value)}`);
+    }
+    return value;
+}
+async function readJson(req) {
+    const chunks = [];
+    for await (const chunk of req)
+        chunks.push(Buffer.from(chunk));
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+}
+function setCors(res) {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Headers", "content-type");
+    res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+}
+function json(res, status, payload) {
+    res.writeHead(status, { "content-type": "application/json" });
+    res.end(`${JSON.stringify(payload)}\n`);
+}
+function javascript(res, status, source) {
+    res.writeHead(status, {
+        "content-type": "text/javascript; charset=utf-8",
+        "cache-control": "no-store",
+    });
+    res.end(source);
+}
+function writeRunEvent(res, runs) {
+    res.write(`event: runs\ndata: ${JSON.stringify(runs)}\n\n`);
+}
+async function readClientBundle() {
+    for (const url of clientBundleCandidates()) {
+        try {
+            await access(url);
+            return await readFile(url, "utf8");
+        }
+        catch {
+            // Try the next runtime layout.
+        }
+    }
+    throw new Error('Missing Wand client bundle. Run "npm run build" before "wand run dev".');
+}
+function clientBundleCandidates() {
+    return [
+        new URL("../client.js", import.meta.url),
+        new URL("../../dist/client.js", import.meta.url),
+    ];
+}

package/dist/server/runs.d.ts

@@ -0,0 +1,21 @@
+import { type AgentSendOptions, type AgentSendResult } from "./agent.js";
+import type { AdapterKind } from "@nimrobo/superconnector";
+import type { ActiveAgentRun, PersistedSelectionCapture } from "./types.js";
+export type AgentRunner = (projectRoot: string, prompt: string, context: PersistedSelectionCapture, options?: AgentSendOptions) => Promise<AgentSendResult>;
+type ActiveRunsListener = (runs: ActiveAgentRun[]) => void;
+export declare class ActiveRunManager {
+    private readonly projectRoot;
+    private readonly runner;
+    private readonly entries;
+    private readonly listeners;
+    constructor(projectRoot: string, runner?: AgentRunner);
+    start(prompt: string, context: PersistedSelectionCapture, adapter?: AdapterKind): Promise<ActiveAgentRun>;
+    list(): ActiveAgentRun[];
+    subscribe(listener: ActiveRunsListener): () => void;
+    stop(id: string): Promise<boolean>;
+    stopAll(): Promise<void>;
+    private execute;
+    private markStarted;
+    private notify;
+}
+export {};

package/dist/server/runs.js

@@ -0,0 +1,119 @@
+import { randomUUID } from "node:crypto";
+import { sendToAgent } from "./agent.js";
+export class ActiveRunManager {
+    projectRoot;
+    runner;
+    entries = new Map();
+    listeners = new Set();
+    constructor(projectRoot, runner = sendToAgent) {
+        this.projectRoot = projectRoot;
+        this.runner = runner;
+    }
+    async start(prompt, context, adapter) {
+        const run = {
+            id: randomUUID(),
+            createdAt: new Date().toISOString(),
+            prompt,
+            context,
+            ...(adapter !== undefined ? { adapter } : {}),
+            sessionId: null,
+            latestMessage: null,
+        };
+        const controller = new AbortController();
+        const startup = deferred();
+        const entry = {
+            run,
+            controller,
+            done: Promise.resolve(),
+            started: false,
+            startup: startup.promise,
+            resolveStartup: startup.resolve,
+            rejectStartup: startup.reject,
+        };
+        this.entries.set(run.id, entry);
+        entry.done = this.execute(entry);
+        await entry.startup;
+        return snapshot(run);
+    }
+    list() {
+        return Array.from(this.entries.values())
+            .filter(({ started }) => started)
+            .map(({ run }) => snapshot(run))
+            .sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener(this.list());
+        return () => this.listeners.delete(listener);
+    }
+    async stop(id) {
+        const entry = this.entries.get(id);
+        if (!entry)
+            return false;
+        entry.controller.abort();
+        await entry.done;
+        return true;
+    }
+    async stopAll() {
+        await Promise.all(Array.from(this.entries.keys(), (id) => this.stop(id)));
+    }
+    async execute(entry) {
+        try {
+            const result = await this.runner(this.projectRoot, entry.run.prompt, entry.run.context, {
+                ...(entry.run.adapter !== undefined ? { adapter: entry.run.adapter } : {}),
+                signal: entry.controller.signal,
+                onMessage: (message) => {
+                    if (message.sessionId)
+                        entry.run.sessionId = message.sessionId;
+                    entry.run.latestMessage = message.content;
+                    const alreadyStarted = entry.started;
+                    this.markStarted(entry);
+                    if (alreadyStarted)
+                        this.notify();
+                },
+            });
+            entry.run.sessionId = result.sessionId ?? entry.run.sessionId;
+            this.markStarted(entry);
+        }
+        catch (error) {
+            if (!entry.started)
+                entry.rejectStartup(error);
+            // The live row is removed for both failures and user-initiated stops.
+        }
+        finally {
+            this.entries.delete(entry.run.id);
+            if (entry.started)
+                this.notify();
+        }
+    }
+    markStarted(entry) {
+        if (entry.started)
+            return;
+        entry.started = true;
+        entry.resolveStartup();
+        this.notify();
+    }
+    notify() {
+        const runs = this.list();
+        for (const listener of this.listeners) {
+            try {
+                listener(runs);
+            }
+            catch {
+                // Stream clients are isolated from run execution.
+            }
+        }
+    }
+}
+function snapshot(run) {
+    return { ...run };
+}
+function deferred() {
+    let resolve;
+    let reject;
+    const promise = new Promise((resolvePromise, rejectPromise) => {
+        resolve = resolvePromise;
+        reject = rejectPromise;
+    });
+    return { promise, resolve, reject };
+}

package/dist/server/storage.d.ts

@@ -0,0 +1,13 @@
+import type { PersistedSelectionCapture, QueuedRequest, SelectionCapture } from "./types.js";
+export declare class WandStorage {
+    readonly root: string;
+    readonly contextDir: string;
+    readonly queueDir: string;
+    readonly tmpDir: string;
+    constructor(projectRoot: string);
+    ensure(): Promise<void>;
+    persistCapture(capture: SelectionCapture): Promise<PersistedSelectionCapture>;
+    queue(prompt: string, context: PersistedSelectionCapture): Promise<QueuedRequest>;
+    listQueue(): Promise<QueuedRequest[]>;
+    removeQueued(id: string): Promise<void>;
+}