@nimrobo/wand-web 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { mountWand } from "./runtime/index.js";
+export type { Adapter, AdapterDetection, AdapterInitResult, AdapterRuntimeContext, } from "./adapters/types.js";
+export { detectAdapter } from "./adapters/index.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { mountWand } from "./runtime/index.js";
+export { detectAdapter } from "./adapters/index.js";

package/dist/runtime/capture.d.ts

@@ -0,0 +1,20 @@
+export type ViewportCaptureMetrics = {
+    viewportWidth: number;
+    viewportHeight: number;
+    scrollX: number;
+    scrollY: number;
+    documentWidth: number;
+    documentHeight: number;
+};
+export declare function viewportCaptureOptions(metrics: ViewportCaptureMetrics): {
+    cacheBust: boolean;
+    width: number;
+    height: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    style: {
+        width: string;
+        height: string;
+        transform: string;
+    };
+};

package/dist/runtime/capture.js

@@ -0,0 +1,16 @@
+export function viewportCaptureOptions(metrics) {
+    const documentWidth = Math.max(metrics.documentWidth, metrics.viewportWidth);
+    const documentHeight = Math.max(metrics.documentHeight, metrics.viewportHeight);
+    return {
+        cacheBust: true,
+        width: metrics.viewportWidth,
+        height: metrics.viewportHeight,
+        canvasWidth: metrics.viewportWidth,
+        canvasHeight: metrics.viewportHeight,
+        style: {
+            width: `${documentWidth}px`,
+            height: `${documentHeight}px`,
+            transform: `translate(${-metrics.scrollX}px, ${-metrics.scrollY}px)`,
+        },
+    };
+}

package/dist/runtime/dom.d.ts

@@ -0,0 +1,7 @@
+import type { ReactOwnerHint } from "../server/types.js";
+export declare function pickElementAtPoint(x: number, y: number): HTMLElement | null;
+export declare function selectorFor(element: Element): string;
+export declare function domPathFor(element: Element): string[];
+export declare function attributesFor(element: Element): Record<string, string>;
+export declare function htmlFor(element: Element): string;
+export declare function reactOwnerHintsFor(element: Element): ReactOwnerHint[];

package/dist/runtime/dom.js

@@ -0,0 +1,78 @@
+const overlayAttribute = "data-wand-ui";
+export function pickElementAtPoint(x, y) {
+    for (const element of document.elementsFromPoint(x, y)) {
+        if (!(element instanceof HTMLElement))
+            continue;
+        if (element.closest(`[${overlayAttribute}]`))
+            continue;
+        return element;
+    }
+    return null;
+}
+export function selectorFor(element) {
+    if (element.id)
+        return `#${cssEscape(element.id)}`;
+    const segments = [];
+    for (let current = element; current && current !== document.body; current = current.parentElement) {
+        let segment = current.tagName.toLowerCase();
+        const siblings = current.parentElement
+            ? Array.from(current.parentElement.children).filter((child) => child.tagName === current.tagName)
+            : [];
+        if (siblings.length > 1) {
+            segment += `:nth-of-type(${siblings.indexOf(current) + 1})`;
+        }
+        segments.unshift(segment);
+    }
+    return segments.join(" > ");
+}
+export function domPathFor(element) {
+    const path = [];
+    for (let current = element; current; current = current.parentElement) {
+        path.unshift(selectorSegment(current));
+        if (current === document.documentElement)
+            break;
+    }
+    return path;
+}
+export function attributesFor(element) {
+    return Object.fromEntries(Array.from(element.attributes).map((attribute) => [attribute.name, attribute.value]));
+}
+export function htmlFor(element) {
+    const clone = element.cloneNode(true);
+    clone.querySelectorAll("[data-wand-root]").forEach((node) => node.remove());
+    return clone.outerHTML;
+}
+export function reactOwnerHintsFor(element) {
+    const fiberKey = Object.keys(element).find((key) => key.startsWith("__reactFiber$"));
+    const fiber = fiberKey ? element[fiberKey] : null;
+    const hints = [];
+    let cursor = asFiber(fiber);
+    while (cursor && hints.length < 6) {
+        const name = typeof cursor.type === "string"
+            ? cursor.type
+            : cursor.type?.displayName ?? cursor.type?.name ?? null;
+        const source = cursor._debugSource
+            ? `${cursor._debugSource.fileName}:${cursor._debugSource.lineNumber}`
+            : null;
+        if (name || source) {
+            hints.push({
+                name,
+                key: cursor.key ?? null,
+                source,
+            });
+        }
+        cursor = cursor.return ?? null;
+    }
+    return hints;
+}
+function selectorSegment(element) {
+    if (element.id)
+        return `#${cssEscape(element.id)}`;
+    return element.tagName.toLowerCase();
+}
+function cssEscape(value) {
+    return globalThis.CSS?.escape ? globalThis.CSS.escape(value) : value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+function asFiber(value) {
+    return value && typeof value === "object" ? value : null;
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,6 @@
+import type { SelectionCapture } from "../server/types.js";
+export type MountWandOptions = {
+    serverUrl?: string;
+};
+export declare function mountWand(options?: MountWandOptions): void;
+export declare function captureSelection(element: HTMLElement): Promise<SelectionCapture>;

package/dist/runtime/index.js

@@ -0,0 +1,480 @@
+import { toPng } from "html-to-image";
+import { attributesFor, domPathFor, htmlFor, pickElementAtPoint, reactOwnerHintsFor, selectorFor, } from "./dom.js";
+import { viewportCaptureOptions } from "./capture.js";
+import { formatJsonPreview, setComposerSending } from "./panel.js";
+import { styles } from "./styles.js";
+const defaultServerUrl = typeof process !== "undefined" && process.env.NEXT_PUBLIC_WAND_SERVER_URL
+    ? process.env.NEXT_PUBLIC_WAND_SERVER_URL
+    : "http://127.0.0.1:4711";
+export function mountWand(options = {}) {
+    if (typeof window === "undefined" || document.querySelector("[data-wand-root]"))
+        return;
+    const serverUrl = options.serverUrl ?? defaultServerUrl;
+    const state = {
+        active: false,
+        selected: null,
+        hovered: null,
+        runs: [],
+        queue: [],
+        agentConfig: {
+            availableAdapters: [],
+            selectedAdapter: null,
+        },
+        runsEventSource: null,
+        composerFor: null,
+        composerDraft: "",
+        composerFocused: false,
+        composerSelectionStart: null,
+        composerSelectionEnd: null,
+        composerSelectionDirection: null,
+    };
+    const root = document.createElement("div");
+    root.dataset.wandRoot = "true";
+    root.dataset.wandUi = "true";
+    const shadow = root.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>${styles}</style>`;
+    document.body.append(root);
+    const frame = document.createElement("div");
+    frame.className = "wand-frame";
+    frame.hidden = true;
+    frame.dataset.wandUi = "true";
+    const launcher = document.createElement("button");
+    launcher.type = "button";
+    launcher.className = "wand-launcher";
+    launcher.dataset.wandUi = "true";
+    launcher.setAttribute("aria-label", "Toggle Wand inspector");
+    launcher.innerHTML = inspectIcon();
+    shadow.append(frame, launcher);
+    launcher.addEventListener("click", async () => {
+        state.active = !state.active;
+        if (!state.active) {
+            state.selected = null;
+            state.hovered = null;
+            resetComposerState(state, null);
+            frame.hidden = true;
+            stopRunsStream(state);
+            renderPanel(shadow, state, serverUrl, frame);
+        }
+        else {
+            await Promise.all([
+                refreshQueue(state, serverUrl),
+                refreshRuns(state, serverUrl),
+                refreshAgentConfig(state, serverUrl),
+            ]);
+            renderPanel(shadow, state, serverUrl, frame);
+            syncRunsStream(shadow, state, serverUrl, frame);
+        }
+        launcher.innerHTML = state.active ? closeIcon() : inspectIcon();
+    });
+    window.addEventListener("pointermove", (event) => {
+        if (!state.active || state.selected)
+            return;
+        state.hovered = pickElementAtPoint(event.clientX, event.clientY);
+        renderFrame(frame, state.hovered);
+    }, true);
+    window.addEventListener("pointerdown", (event) => {
+        if (!state.active)
+            return;
+        if (event.button !== 0)
+            return;
+        if (event.target instanceof Element && event.target.closest("[data-wand-root]"))
+            return;
+        const target = pickElementAtPoint(event.clientX, event.clientY);
+        if (!target)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (state.selected !== target)
+            resetComposerState(state, target);
+        state.selected = target;
+        renderFrame(frame, target);
+        renderPanel(shadow, state, serverUrl, frame);
+    }, true);
+    window.addEventListener("click", (event) => {
+        if (!state.active)
+            return;
+        if (event.target instanceof Element && event.target.closest("[data-wand-root]"))
+            return;
+        if (!pickElementAtPoint(event.clientX, event.clientY))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }, true);
+    window.addEventListener("keydown", (event) => {
+        if (!state.active || event.key !== "Escape")
+            return;
+        state.active = false;
+        state.selected = null;
+        state.hovered = null;
+        resetComposerState(state, null);
+        frame.hidden = true;
+        stopRunsStream(state);
+        launcher.innerHTML = inspectIcon();
+        renderPanel(shadow, state, serverUrl, frame);
+    }, true);
+    window.addEventListener("resize", () => renderFrame(frame, state.selected ?? state.hovered));
+    window.addEventListener("scroll", () => renderFrame(frame, state.selected ?? state.hovered), true);
+}
+function renderPanel(shadow, state, serverUrl, frame) {
+    rememberComposerState(shadow, state);
+    shadow.querySelector(".wand-panel")?.remove();
+    if (!state.active)
+        return;
+    const panel = document.createElement("section");
+    panel.className = "wand-panel";
+    panel.dataset.wandUi = "true";
+    panel.innerHTML = `
+    <div class="wand-panel-header">
+      <span>${state.selected ? "Describe the change" : "Select an element"}</span>
+      <span class="wand-muted wand-run-count">${runCountText(state)}</span>
+    </div>
+    ${state.selected
+        ? `
+      <div class="wand-panel-section">
+        <textarea placeholder="What should change?"></textarea>
+        <div class="wand-actions">
+          <button type="button" data-action="send" ${state.agentConfig.selectedAdapter ? "" : "disabled"}>Send to agent</button>
+          <button type="button" data-action="queue">Queue it</button>
+        </div>
+        <label class="wand-agent-picker">
+          <span class="wand-muted">Agent</span>
+          <select data-action="select-adapter" ${state.agentConfig.availableAdapters.length === 0 ? "disabled" : ""}>
+            ${adapterOptionsHtml(state.agentConfig)}
+          </select>
+        </label>
+      </div>
+    `
+        : `<div class="wand-panel-section wand-muted">Move the cursor, then click a page element.</div>`}
+    <div class="wand-queue">
+      ${queueItemsHtml(state)}
+    </div>
+  `;
+    panel.addEventListener("change", async (event) => {
+        const target = event.target;
+        if (target.dataset.action !== "select-adapter")
+            return;
+        const adapter = target.value;
+        if (!state.agentConfig.availableAdapters.includes(adapter))
+            return;
+        try {
+            state.agentConfig = (await request(serverUrl, "/api/agent-config", {
+                method: "PUT",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ adapter }),
+            }));
+            renderPanel(shadow, state, serverUrl, frame);
+        }
+        catch (error) {
+            toast(shadow, error instanceof Error ? error.message : String(error));
+            await refreshAgentConfig(state, serverUrl);
+            renderPanel(shadow, state, serverUrl, frame);
+        }
+    });
+    panel.addEventListener("click", async (event) => {
+        const target = event.target;
+        const action = target.dataset.action;
+        if (!action)
+            return;
+        try {
+            if (action === "send" || action === "queue") {
+                const textarea = panel.querySelector("textarea");
+                const prompt = textarea.value.trim();
+                if (!prompt || !state.selected)
+                    return;
+                if (action === "send" && !state.agentConfig.selectedAdapter)
+                    return;
+                if (action === "send")
+                    setComposerSending(panel, true);
+                try {
+                    const capture = await captureSelection(state.selected);
+                    if (action === "send") {
+                        toast(shadow, "Sending to agent...");
+                        await post(serverUrl, "/api/send", {
+                            prompt,
+                            capture,
+                            adapter: state.agentConfig.selectedAdapter,
+                        });
+                        toast(shadow, "Agent started.");
+                        state.selected = null;
+                        resetComposerState(state, null);
+                        frame.hidden = true;
+                    }
+                    else {
+                        await post(serverUrl, "/api/queue", { prompt, capture });
+                        toast(shadow, "Queued.");
+                        state.selected = null;
+                        resetComposerState(state, null);
+                    }
+                    await Promise.all([refreshQueue(state, serverUrl), refreshRuns(state, serverUrl)]);
+                    renderPanel(shadow, state, serverUrl, frame);
+                    syncRunsStream(shadow, state, serverUrl, frame);
+                    return;
+                }
+                finally {
+                    if (action === "send" && panel.isConnected)
+                        setComposerSending(panel, false);
+                }
+            }
+            if (action === "stop-run") {
+                const item = target.closest("[data-run-id]");
+                const id = item?.dataset.runId;
+                if (!id)
+                    return;
+                await request(serverUrl, `/api/runs/${encodeURIComponent(id)}`, { method: "DELETE" });
+                await refreshRuns(state, serverUrl);
+                renderPanel(shadow, state, serverUrl, frame);
+                return;
+            }
+            const item = target.closest("[data-queue-id]");
+            const id = item?.dataset.queueId;
+            if (!id)
+                return;
+            const queued = state.queue.find((entry) => entry.id === id);
+            if (!queued)
+                return;
+            if (action === "send-queued") {
+                toast(shadow, "Sending queued request...");
+                await post(serverUrl, "/api/send", { prompt: queued.prompt, context: queued.context });
+                await request(serverUrl, `/api/queue/${encodeURIComponent(id)}`, { method: "DELETE" });
+                toast(shadow, "Queued request started.");
+            }
+            else if (action === "delete-queued") {
+                await request(serverUrl, `/api/queue/${encodeURIComponent(id)}`, { method: "DELETE" });
+            }
+            await Promise.all([refreshQueue(state, serverUrl), refreshRuns(state, serverUrl)]);
+            renderPanel(shadow, state, serverUrl, frame);
+        }
+        catch (error) {
+            toast(shadow, error instanceof Error ? error.message : String(error));
+        }
+    });
+    shadow.append(panel);
+    restoreComposerState(shadow, panel, state);
+}
+export async function captureSelection(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        id: crypto.randomUUID(),
+        createdAt: new Date().toISOString(),
+        url: window.location.href,
+        route: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+        title: document.title,
+        selector: selectorFor(element),
+        domPath: domPathFor(element),
+        tagName: element.tagName,
+        text: (element.textContent ?? "").trim().slice(0, 500),
+        attributes: attributesFor(element),
+        rect: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+        },
+        reactOwnerHints: reactOwnerHintsFor(element),
+        elementHtml: htmlFor(element),
+        viewportDataUrl: await toPng(document.documentElement, viewportCaptureOptions({
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            scrollX: window.scrollX,
+            scrollY: window.scrollY,
+            documentWidth: document.documentElement.scrollWidth,
+            documentHeight: document.documentElement.scrollHeight,
+        })),
+        elementDataUrl: await toPng(element, { cacheBust: true }),
+    };
+}
+function renderFrame(frame, target) {
+    if (!target) {
+        frame.hidden = true;
+        return;
+    }
+    const rect = target.getBoundingClientRect();
+    frame.hidden = false;
+    frame.style.left = `${rect.left}px`;
+    frame.style.top = `${rect.top}px`;
+    frame.style.width = `${rect.width}px`;
+    frame.style.height = `${rect.height}px`;
+}
+async function refreshQueue(state, serverUrl) {
+    try {
+        state.queue = (await request(serverUrl, "/api/queue"));
+    }
+    catch {
+        state.queue = [];
+    }
+}
+async function refreshRuns(state, serverUrl) {
+    try {
+        state.runs = (await request(serverUrl, "/api/runs"));
+    }
+    catch {
+        state.runs = [];
+    }
+}
+async function refreshAgentConfig(state, serverUrl) {
+    try {
+        state.agentConfig = (await request(serverUrl, "/api/agent-config"));
+    }
+    catch {
+        state.agentConfig = {
+            availableAdapters: [],
+            selectedAdapter: null,
+        };
+    }
+}
+function syncRunsStream(shadow, state, serverUrl, frame) {
+    if (!state.active || state.runsEventSource !== null)
+        return;
+    const source = new EventSource(`${serverUrl}/api/runs/events`);
+    source.addEventListener("runs", (event) => {
+        state.runs = JSON.parse(event.data);
+        if (state.active) {
+            renderQueue(shadow, state);
+            renderRunCount(shadow, state);
+        }
+    });
+    state.runsEventSource = source;
+}
+function stopRunsStream(state) {
+    state.runsEventSource?.close();
+    state.runsEventSource = null;
+}
+async function post(serverUrl, pathname, body) {
+    return request(serverUrl, pathname, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+    });
+}
+async function request(serverUrl, pathname, init) {
+    const response = await fetch(`${serverUrl}${pathname}`, init);
+    const payload = (await response.json());
+    if (!response.ok)
+        throw new Error(payload.error ?? `Request failed: ${response.status}`);
+    return payload;
+}
+function toast(shadow, message) {
+    shadow.querySelector(".wand-toast")?.remove();
+    const node = document.createElement("div");
+    node.className = "wand-toast";
+    node.textContent = message;
+    shadow.append(node);
+    window.setTimeout(() => node.remove(), 2400);
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+function renderQueue(shadow, state) {
+    const queue = shadow.querySelector(".wand-queue");
+    if (!queue)
+        return;
+    queue.innerHTML = queueItemsHtml(state);
+}
+function renderRunCount(shadow, state) {
+    const count = shadow.querySelector(".wand-run-count");
+    if (!count)
+        return;
+    count.textContent = runCountText(state);
+}
+function runCountText(state) {
+    return `${state.runs.length} running / ${state.queue.length} queued`;
+}
+function adapterOptionsHtml(config) {
+    const placeholder = config.selectedAdapter ? "" : `<option value="">Choose agent</option>`;
+    return `${placeholder}${config.availableAdapters
+        .map((adapter) => `<option value="${adapter}" ${adapter === config.selectedAdapter ? "selected" : ""}>${adapterLabel(adapter)}</option>`)
+        .join("")}`;
+}
+function adapterLabel(adapter) {
+    switch (adapter) {
+        case "claude-code":
+            return "Claude Code";
+        case "opencode":
+            return "OpenCode";
+        case "codex":
+            return "Codex";
+    }
+}
+function queueItemsHtml(state) {
+    return `
+    ${state.runs
+        .map((run) => `
+      <div class="wand-queue-item wand-agent-run" data-run-id="${run.id}">
+        <div class="wand-run-header">
+          <div class="wand-run-title">${escapeHtml(run.prompt)}</div>
+          <button type="button" data-action="stop-run">Stop</button>
+        </div>
+        <pre class="wand-run-message">${escapeHtml(formatJsonPreview(run.latestMessage))}</pre>
+      </div>
+    `)
+        .join("")}
+    ${state.queue
+        .map((item) => `
+      <div class="wand-queue-item" data-queue-id="${item.id}">
+        <div>${escapeHtml(item.prompt)}</div>
+        <div class="wand-muted">${new Date(item.createdAt).toLocaleString()}</div>
+        <div class="wand-queue-controls">
+          <button type="button" data-action="send-queued">Send</button>
+          <button type="button" data-action="delete-queued">Delete</button>
+        </div>
+      </div>
+    `)
+        .join("")}
+  `;
+}
+function rememberComposerState(shadow, state) {
+    const textarea = shadow.querySelector(".wand-panel textarea");
+    if (!textarea || state.composerFor !== state.selected)
+        return;
+    syncComposerState(shadow, textarea, state);
+}
+function restoreComposerState(shadow, panel, state) {
+    const textarea = panel.querySelector("textarea");
+    if (!textarea || !state.selected)
+        return;
+    if (state.composerFor !== state.selected)
+        resetComposerState(state, state.selected);
+    textarea.value = state.composerDraft;
+    const sync = () => syncComposerState(shadow, textarea, state);
+    textarea.addEventListener("input", sync);
+    textarea.addEventListener("focus", sync);
+    textarea.addEventListener("blur", sync);
+    textarea.addEventListener("select", sync);
+    textarea.addEventListener("keyup", sync);
+    textarea.addEventListener("click", sync);
+    if (!state.composerFocused)
+        return;
+    const selectionStart = state.composerSelectionStart;
+    const selectionEnd = state.composerSelectionEnd;
+    const selectionDirection = state.composerSelectionDirection;
+    textarea.focus();
+    if (selectionStart !== null && selectionEnd !== null) {
+        textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? "none");
+    }
+    sync();
+}
+function syncComposerState(shadow, textarea, state) {
+    state.composerDraft = textarea.value;
+    state.composerFocused = shadow.activeElement === textarea;
+    state.composerSelectionStart = textarea.selectionStart;
+    state.composerSelectionEnd = textarea.selectionEnd;
+    state.composerSelectionDirection = textarea.selectionDirection;
+}
+function resetComposerState(state, selected) {
+    state.composerFor = selected;
+    state.composerDraft = "";
+    state.composerFocused = false;
+    state.composerSelectionStart = null;
+    state.composerSelectionEnd = null;
+    state.composerSelectionDirection = null;
+}
+function inspectIcon() {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>`;
+}
+function closeIcon() {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>`;
+}

package/dist/runtime/panel.d.ts

@@ -0,0 +1,2 @@
+export declare function setComposerSending(panel: HTMLElement, sending: boolean): void;
+export declare function formatJsonPreview(value: unknown, maxLength?: number): string;

package/dist/runtime/panel.js

@@ -0,0 +1,26 @@
+export function setComposerSending(panel, sending) {
+    const sendButton = panel.querySelector('[data-action="send"]');
+    const queueButton = panel.querySelector('[data-action="queue"]');
+    if (!sendButton || !queueButton)
+        return;
+    sendButton.disabled = sending;
+    queueButton.disabled = sending;
+    sendButton.classList.toggle("wand-sending", sending);
+    sendButton.innerHTML = sending
+        ? `<span class="wand-spinner" aria-hidden="true"></span><span>Sending...</span>`
+        : "Send to agent";
+}
+export function formatJsonPreview(value, maxLength = 180) {
+    let json;
+    try {
+        json = JSON.stringify(value) ?? "null";
+    }
+    catch {
+        json = "[unserializable]";
+    }
+    if (json.length <= maxLength)
+        return json;
+    if (maxLength <= 3)
+        return ".".repeat(maxLength);
+    return `${json.slice(0, maxLength - 3)}...`;
+}

package/dist/runtime/styles.d.ts

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