@insitue/sdk 0.1.0

package/dist/chunk-LGN4LKXD.js

@@ -0,0 +1,973 @@
+import {
+  A,
+  PROTOCOL_VERSION,
+  R,
+  beginPick,
+  buildBundle,
+  d,
+  installRuntimeCollectors,
+  k,
+  runtimeErrorCount,
+  y
+} from "./chunk-6SMY7D6U.js";
+
+// src/client.ts
+var CompanionClient = class {
+  constructor(port, events) {
+    this.port = port;
+    this.events = events;
+    this.base = `http://127.0.0.1:${port}`;
+    this.wsUrl = `ws://127.0.0.1:${port}`;
+  }
+  port;
+  events;
+  ws = null;
+  base;
+  wsUrl;
+  pending = /* @__PURE__ */ new Map();
+  async connect() {
+    this.events.onState("connecting");
+    let token;
+    try {
+      const res = await fetch(`${this.base}/insitu/handshake`);
+      if (!res.ok) throw new Error(`handshake ${res.status}`);
+      token = (await res.json()).token;
+    } catch (e) {
+      this.events.onState("error", `companion unreachable (run \`npx insitue\`)`);
+      return;
+    }
+    await new Promise((done) => {
+      const ws = new WebSocket(this.wsUrl);
+      this.ws = ws;
+      ws.onopen = () => ws.send(
+        JSON.stringify({ t: "hello", protocolVersion: PROTOCOL_VERSION, token })
+      );
+      ws.onmessage = (ev) => {
+        const msg = JSON.parse(ev.data);
+        if (msg.t === "hello-ok") {
+          this.events.onState("connected", `companion ${msg.companionVersion}`);
+          done();
+        } else if (msg.t === "pong") {
+          const cb = this.pending.get(msg.nonce);
+          if (cb) {
+            this.pending.delete(msg.nonce);
+            cb(performance.now() - Number(msg.nonce.split(":")[1]));
+          }
+        } else if (msg.t === "agent-status") {
+          this.events.onAgentStatus?.({
+            ready: msg.ready,
+            transport: msg.transport,
+            warnings: msg.warnings,
+            blockers: msg.blockers
+          });
+        } else if (msg.t === "agent-stream") {
+          this.events.onAgentEvent?.(msg.event);
+        } else if (msg.t === "changeset-proposed") {
+          this.events.onChangeset?.(msg.turnId, msg.files);
+        } else if (msg.t === "changeset-applied") {
+          this.events.onApplied?.(
+            msg.turnId,
+            msg.files,
+            msg.checkpointRef
+          );
+        } else if (msg.t === "agent-undone") {
+          this.events.onUndone?.(msg.turnId, msg.restored);
+        } else if (msg.t === "agent-session-undone") {
+          this.events.onSessionUndone?.(msg.restored);
+        } else if (msg.t === "agent-session-committed") {
+          this.events.onSessionCommitted?.(msg.commit, msg.files);
+        } else if (msg.t === "capture-resolved") {
+          this.events.onResolved?.(msg.id, msg.resolved, msg.note);
+        } else if (msg.t === "error") {
+          this.events.onState("error", `${msg.code}: ${msg.message}`);
+          done();
+        }
+      };
+      ws.onerror = () => {
+        this.events.onState("error", "websocket error");
+        done();
+      };
+      ws.onclose = () => {
+        if (this.ws === ws) this.events.onState("idle");
+      };
+    });
+  }
+  ping() {
+    return new Promise((resolve, reject) => {
+      const ws = this.ws;
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        reject(new Error("not connected"));
+        return;
+      }
+      const nonce = `n:${performance.now()}:${Math.random()}`;
+      this.pending.set(nonce, resolve);
+      ws.send(JSON.stringify({ t: "ping", nonce }));
+      setTimeout(() => {
+        if (this.pending.delete(nonce)) reject(new Error("ping timeout"));
+      }, 3e3);
+    });
+  }
+  submitCapture(bundle) {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(JSON.stringify({ t: "capture", bundle }));
+    return true;
+  }
+  sendTurn(turnId, bundleId, userMessage) {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+    ws.send(
+      JSON.stringify({ t: "agent-turn", turnId, bundleId, userMessage })
+    );
+    return true;
+  }
+  cancelTurn(turnId) {
+    this.ws?.send(JSON.stringify({ t: "agent-cancel", turnId }));
+  }
+  sendDecision(turnId, decision, files, reason) {
+    this.ws?.send(
+      JSON.stringify({ t: "agent-decision", turnId, decision, files, reason })
+    );
+  }
+  sendUndo(turnId) {
+    this.ws?.send(JSON.stringify({ t: "agent-undo", turnId }));
+  }
+  sendUndoSession() {
+    this.ws?.send(JSON.stringify({ t: "agent-undo-session" }));
+  }
+  sendCommitSession(message) {
+    this.ws?.send(JSON.stringify({ t: "agent-commit-session", message }));
+  }
+  dispose() {
+    this.ws?.close();
+    this.ws = null;
+  }
+};
+
+// src/overlay.ts
+var DOT = {
+  idle: "#888",
+  connecting: "#e0a30c",
+  connected: "#2fd16b",
+  error: "#ff6b6b"
+};
+var muted = "#8a8a93";
+var accent = "#ff6b00";
+var mono = "12px ui-monospace, SFMono-Regular, Menlo, monospace";
+var btn = "font:inherit;color:#ff6b00;background:transparent;border:1px solid #2e2e3c;border-radius:4px;padding:3px 8px;cursor:pointer";
+var card = "background:#0b0b0d;border:1px solid #232330;border-radius:4px";
+function row(label, value) {
+  return k("div", { style: "display:flex;gap:8px;margin:2px 0" }, [
+    k("span", { style: `color:${muted};min-width:96px` }, label),
+    k("span", { style: "color:#ececef;word-break:break-word" }, value)
+  ]);
+}
+function diffLines(diff) {
+  return diff.split("\n").map((ln) => {
+    let color = muted;
+    if (ln.startsWith("@@")) color = "#5fb3e0";
+    else if (ln.startsWith("+++") || ln.startsWith("---")) color = muted;
+    else if (ln.startsWith("+")) color = "#5fd18a";
+    else if (ln.startsWith("-")) color = "#ff7a7a";
+    else color = "#bfbfc6";
+    return k("div", { style: `color:${color};white-space:pre` }, ln || " ");
+  });
+}
+function diffBlock(changes) {
+  return changes.map(
+    (c) => k("div", { style: "margin:6px 0" }, [
+      k(
+        "div",
+        { style: "color:#ececef;margin-bottom:2px" },
+        `${c.file}  (${c.bytes}B)`
+      ),
+      k(
+        "div",
+        {
+          style: `overflow:auto;${card};padding:8px;max-height:200px;font-size:11px;line-height:1.45`
+        },
+        diffLines(c.diff)
+      )
+    ])
+  );
+}
+function App(props) {
+  const [state, setState] = d("idle");
+  const [detail, setDetail] = d("");
+  const [client, setClient] = d(null);
+  const [bundle, setBundle] = d(null);
+  const [resolved, setResolved] = d(null);
+  const [busy, setBusy] = d(false);
+  const [open, setOpen] = d(false);
+  const [showCtx, setShowCtx] = d(false);
+  const [showSettings, setShowSettings] = d(false);
+  const [autoApply, setAutoApply] = d(false);
+  const [agentReady, setAgentReady] = d(null);
+  const [agentNote, setAgentNote] = d("");
+  const [chatInput, setChatInput] = d("");
+  const [messages, setMessages] = d([]);
+  const [turnBusy, setTurnBusy] = d(false);
+  const [thinking, setThinking] = d("");
+  const [activity, setActivity] = d("");
+  const [elapsed, setElapsed] = d(0);
+  const [pulse, setPulse] = d(0);
+  const [changes, setChanges] = d([]);
+  const [changeTurnId, setChangeTurnId] = d("");
+  const [picked, setPicked] = d({});
+  const [rejectReason, setRejectReason] = d("");
+  const [history, setHistory] = d([]);
+  const [revisitId, setRevisitId] = d("");
+  const [commitMsg, setCommitMsg] = d("");
+  const [sessionNote, setSessionNote] = d("");
+  const [lastSel, setLastSel] = d(null);
+  const [activeTurn, setActiveTurn] = d(null);
+  const autoApplyRef = A(false);
+  const changesRef = A([]);
+  const activeTurnRef = A(null);
+  const threadRef = A(null);
+  autoApplyRef.current = autoApply;
+  changesRef.current = changes;
+  activeTurnRef.current = activeTurn;
+  const appendAgent = (delta) => setMessages((ms) => {
+    const last = ms[ms.length - 1];
+    if (last && last.role === "agent") {
+      return [...ms.slice(0, -1), { role: "agent", text: last.text + delta }];
+    }
+    return [...ms, { role: "agent", text: delta }];
+  });
+  y(() => {
+    installRuntimeCollectors();
+    const c = new CompanionClient(props.port, {
+      onState: (s, d2) => {
+        setState(s);
+        if (d2 !== void 0) setDetail(d2);
+      },
+      onResolved: (_id, r) => setResolved(r),
+      onAgentStatus: (s) => {
+        setAgentReady(s.ready);
+        setAgentNote(
+          s.blockers.length ? `blocked: ${s.blockers.join("; ")}` : s.warnings.join(" \xB7 ") || `agent ready (${s.transport})`
+        );
+      },
+      onAgentEvent: (e) => {
+        if (e.t === "agent-text") {
+          setThinking("");
+          setActivity("");
+          appendAgent(e.delta);
+        } else if (e.t === "agent-thinking") {
+          setThinking(e.note.slice(-160));
+        } else if (e.t === "agent-activity") {
+          setActivity(e.label);
+        } else if (e.t === "agent-turn-complete") {
+          setThinking("");
+          setActivity("");
+          setTurnBusy(false);
+        } else if (e.t === "agent-error") {
+          setThinking("");
+          setActivity("");
+          appendAgent(`
+
+[agent-error] ${e.message}`);
+          setTurnBusy(false);
+        }
+      },
+      onChangeset: (turnId, files) => {
+        setChangeTurnId(turnId);
+        setChanges(files);
+        setPicked(Object.fromEntries(files.map((f) => [f.file, true])));
+        setRejectReason("");
+        if (autoApplyRef.current) {
+          appendAgent(`
+[insitu] auto-apply on \u2014 writing without review`);
+          c.sendDecision(turnId, "approve");
+        }
+      },
+      onApplied: (turnId, files, ref) => {
+        const at = activeTurnRef.current;
+        const entry = {
+          turnId,
+          prompt: at && at.turnId === turnId ? at.prompt : "(applied change)",
+          sel: at && at.turnId === turnId ? at.sel : null,
+          files,
+          checkpointRef: ref,
+          diff: changesRef.current,
+          status: "applied",
+          note: "HMR reloading\u2026",
+          postError: false
+        };
+        setHistory((hs) => [entry, ...hs]);
+        setMessages((ms) => [
+          ...ms,
+          {
+            role: "agent",
+            text: `\u2713 applied ${files.length} file${files.length > 1 ? "s" : ""} \u2192 filed to Session (${ref})`
+          }
+        ]);
+        setChanges([]);
+        setChangeTurnId("");
+        setActiveTurn(null);
+        setSessionNote("");
+        const base = runtimeErrorCount();
+        let ticks = 0;
+        const iv = setInterval(() => {
+          ticks++;
+          const threw = runtimeErrorCount() > base;
+          if (threw || ticks >= 10) {
+            setHistory(
+              (hs) => hs.map(
+                (en) => en.turnId === turnId ? {
+                  ...en,
+                  note: threw ? "\u26A0 host threw after HMR" : "HMR settled clean",
+                  postError: threw
+                } : en
+              )
+            );
+            clearInterval(iv);
+          }
+        }, 500);
+      },
+      onUndone: (turnId) => setHistory(
+        (hs) => hs.map(
+          (en) => en.turnId === turnId ? { ...en, status: "undone", note: "undone \u2014 HMR reverting" } : en
+        )
+      ),
+      onSessionUndone: () => setHistory(
+        (hs) => hs.map(
+          (en) => en.status === "applied" ? { ...en, status: "undone" } : en
+        )
+      ),
+      onSessionCommitted: (commit) => {
+        setHistory(
+          (hs) => hs.map(
+            (en) => en.status === "applied" ? { ...en, status: "committed" } : en
+          )
+        );
+        setSessionNote(`committed as ${commit} (local only \u2014 not pushed)`);
+      }
+    });
+    setClient(c);
+    void c.connect();
+    return () => c.dispose();
+  }, [props.port]);
+  y(() => {
+    if (!turnBusy) {
+      setElapsed(0);
+      setPulse(0);
+      return;
+    }
+    const t0 = Date.now();
+    const a = setInterval(
+      () => setElapsed(Math.floor((Date.now() - t0) / 1e3)),
+      1e3
+    );
+    const b = setInterval(() => setPulse((p) => p + 1), 300);
+    return () => {
+      clearInterval(a);
+      clearInterval(b);
+    };
+  }, [turnBusy]);
+  y(() => {
+    const el = threadRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, changes, turnBusy, activity]);
+  const captureSel = async (sel) => {
+    setLastSel(sel);
+    const b = await buildBundle(sel);
+    setBundle(b);
+    setResolved(null);
+    setMessages([]);
+    setChanges([]);
+    setRevisitId("");
+    setOpen(true);
+    setShowCtx(false);
+    client?.submitCapture(b);
+    return b;
+  };
+  const pick = async (mode) => {
+    if (!client || state !== "connected") return;
+    setBusy(true);
+    try {
+      const sel = await beginPick(mode);
+      if (sel) await captureSel(sel);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const sendChat = () => {
+    if (!client || !bundle || !chatInput.trim() || turnBusy) return;
+    const turnId = bundle.id;
+    const text = chatInput.trim();
+    setActiveTurn({ turnId, prompt: text, sel: lastSel });
+    setMessages((ms) => [...ms, { role: "user", text }]);
+    setChatInput("");
+    setChanges([]);
+    setRevisitId("");
+    setActivity("starting");
+    setTurnBusy(true);
+    client.sendTurn(turnId, bundle.id, text);
+  };
+  const continueFrom = async (e) => {
+    if (!client || !e.sel || busy || turnBusy) return;
+    setBusy(true);
+    try {
+      await captureSel(e.sel);
+      setChatInput("");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const recaptureFix = async (e) => {
+    if (!client || !e.sel || busy || turnBusy) return;
+    setBusy(true);
+    try {
+      const b = await captureSel(e.sel);
+      if (b.runtime.errors.length > 0) {
+        const turnId = b.id;
+        const text = "fix the runtime error from the previous change";
+        setActiveTurn({ turnId, prompt: text, sel: e.sel });
+        setMessages([{ role: "user", text }]);
+        setActivity("starting");
+        setTurnBusy(true);
+        client.sendTurn(
+          turnId,
+          b.id,
+          "Your previous edit was applied but the running app now reports the runtime errors shown in the context above. Diagnose the cause and propose a corrected edit."
+        );
+      } else {
+        setMessages([
+          { role: "agent", text: "[insitu] re-captured \u2014 no runtime errors" }
+        ]);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+  const approve = () => {
+    const chosen = changes.map((c) => c.file).filter((f) => picked[f] !== false);
+    client?.sendDecision(
+      changeTurnId,
+      "approve",
+      chosen.length === changes.length ? void 0 : chosen
+    );
+  };
+  const reject = () => {
+    client?.sendDecision(
+      changeTurnId,
+      "reject",
+      void 0,
+      rejectReason.trim() || void 0
+    );
+    setChanges([]);
+    setMessages((ms) => [
+      ...ms,
+      { role: "agent", text: "[insitu] changes rejected" }
+    ]);
+  };
+  const t = bundle?.target;
+  const targetSummary = t ? `${t.componentStack[0]?.name ?? t.selector.split(">").pop()?.trim() ?? "selection"} \xB7 ${t.confidence}` : "no selection";
+  const appliedCount = history.filter((e) => e.status === "applied").length;
+  const revisit = history.find((e) => e.turnId === revisitId) || null;
+  const spin = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  const pill = {
+    position: "fixed",
+    bottom: "16px",
+    right: "16px",
+    zIndex: 2147483e3,
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "8px 12px",
+    font: mono,
+    color: "#ececef",
+    background: "rgba(15,15,18,0.94)",
+    border: "1px solid #2e2e3c",
+    borderRadius: "6px",
+    boxShadow: "0 6px 24px rgba(0,0,0,0.45)"
+  };
+  const ctx = bundle && showCtx ? k("div", { style: "margin:8px 0;color:#bfbfc6" }, [
+    row("confidence", t?.confidence ?? "\u2014"),
+    row("selector", t?.selector ?? "\u2014"),
+    row(
+      "components",
+      t?.componentStack.map((c) => c.name).join(" < ") || "\u2014"
+    ),
+    row("tailwind", bundle.tailwindClasses.join(" ") || "\u2014"),
+    row("styles", `${Object.keys(bundle.computedStyles).length} props`),
+    row(
+      "runtime",
+      `${bundle.runtime.console.length} log \xB7 ${bundle.runtime.network.length} net \xB7 ${bundle.runtime.errors.length} err`
+    ),
+    row(
+      "screenshot",
+      bundle.screenshot ? "captured" : bundle.screenshotUnavailable ? `unavailable \u2014 ${bundle.screenshotUnavailable}` : "\u2014"
+    ),
+    bundle.screenshot ? k("img", {
+      src: bundle.screenshot.dataUrl,
+      style: `max-width:100%;margin:8px 0;${card}`
+    }) : null,
+    resolved ? k(
+      "pre",
+      {
+        style: `white-space:pre;overflow:auto;${card};padding:10px;margin:6px 0 0;color:#bfbfc6;max-height:160px`
+      },
+      `${resolved.file}:${resolved.line}
+
+${resolved.snippet}`
+    ) : null
+  ]) : null;
+  const workingRow = turnBusy && k(
+    "div",
+    {
+      style: `display:flex;gap:8px;align-items:center;margin:6px 0 0;color:${accent}`
+    },
+    [
+      k("span", {}, spin[pulse % spin.length]),
+      k(
+        "span",
+        {
+          style: `color:${muted};overflow:hidden;text-overflow:ellipsis;white-space:nowrap`
+        },
+        `${activity || "working"} \xB7 ${elapsed}s`
+      ),
+      k(
+        "button",
+        {
+          style: `${btn};margin-left:auto`,
+          onClick: () => {
+            client?.cancelTurn("cur");
+            setTurnBusy(false);
+          }
+        },
+        "stop"
+      )
+    ]
+  );
+  const thread = k(
+    "div",
+    {
+      ref: threadRef,
+      style: `max-height:300px;overflow:auto;margin:6px 0;display:flex;flex-direction:column;gap:6px`
+    },
+    [
+      ...messages.map(
+        (m) => k(
+          "div",
+          {
+            style: m.role === "user" ? `align-self:flex-end;max-width:88%;${card};border-color:#2e2e3c;padding:6px 8px;color:#ececef;white-space:pre-wrap;word-break:break-word` : `align-self:flex-start;max-width:96%;padding:6px 8px;color:#ececef;white-space:pre-wrap;word-break:break-word`
+          },
+          m.text
+        )
+      ),
+      thinking && turnBusy ? k(
+        "div",
+        {
+          style: `align-self:flex-start;color:${muted};font-style:italic;white-space:pre-wrap;word-break:break-word`
+        },
+        `\u{1F4AD} ${thinking}`
+      ) : null
+    ]
+  );
+  const proposed = changes.length ? k("div", { style: "margin-top:8px" }, [
+    k(
+      "div",
+      {
+        style: `color:${accent};margin-bottom:4px;display:flex;justify-content:space-between;align-items:center`
+      },
+      [
+        k(
+          "span",
+          {},
+          `PROPOSED \xB7 ${changes.length} file${changes.length > 1 ? "s" : ""}`
+        ),
+        k(
+          "span",
+          { style: "display:flex;gap:6px;align-items:center" },
+          [
+            k(
+              "button",
+              { style: btn, onClick: approve },
+              "Approve & write"
+            ),
+            k(
+              "button",
+              { style: `${btn};color:${muted}`, onClick: reject },
+              "Reject"
+            )
+          ]
+        )
+      ]
+    ),
+    k("input", {
+      value: rejectReason,
+      placeholder: "reject reason (optional) \u2014 fed to the agent",
+      onInput: (ev) => setRejectReason(ev.target.value),
+      style: `width:100%;box-sizing:border-box;font:inherit;color:#ececef;${card};padding:5px 7px;margin:4px 0 6px`
+    }),
+    ...changes.map(
+      (c) => k("div", { style: "margin:6px 0" }, [
+        k(
+          "label",
+          {
+            style: "color:#ececef;margin-bottom:2px;display:flex;gap:6px;align-items:center;cursor:pointer"
+          },
+          [
+            k("input", {
+              type: "checkbox",
+              checked: picked[c.file] !== false,
+              onChange: (ev) => setPicked((p) => ({
+                ...p,
+                [c.file]: ev.target.checked
+              }))
+            }),
+            k("span", {}, `${c.file}  (${c.bytes}B)`)
+          ]
+        ),
+        k(
+          "div",
+          {
+            style: `overflow:auto;${card};padding:8px;max-height:200px;font-size:11px;line-height:1.45`
+          },
+          diffLines(c.diff)
+        )
+      ])
+    )
+  ]) : null;
+  const conversation = revisit ? k(
+    "div",
+    { style: `margin-top:8px;border-top:1px solid #232330;padding-top:8px` },
+    [
+      k(
+        "div",
+        {
+          style: `color:${accent};margin-bottom:6px;display:flex;justify-content:space-between;align-items:center`
+        },
+        [
+          k("span", {}, `REVISIT \xB7 ${revisit.prompt}`.slice(0, 52)),
+          k(
+            "button",
+            { style: btn, onClick: () => setRevisitId("") },
+            "close"
+          )
+        ]
+      ),
+      k(
+        "div",
+        { style: `color:${muted};margin-bottom:6px` },
+        `${revisit.status} \xB7 ${revisit.files.join(", ")} \xB7 ${revisit.checkpointRef}`
+      ),
+      ...diffBlock(revisit.diff)
+    ]
+  ) : bundle ? k(
+    "div",
+    {
+      style: `margin-top:8px;border-top:1px solid #232330;padding-top:8px`
+    },
+    [
+      k(
+        "div",
+        {
+          style: `color:${accent};margin-bottom:6px;display:flex;justify-content:space-between`
+        },
+        [
+          k("span", {}, "ASK"),
+          autoApply ? k("span", { style: `color:${accent}` }, "auto-apply ON") : null
+        ]
+      ),
+      agentReady === false ? k(
+        "div",
+        { style: "color:#ff6b6b;margin-bottom:6px" },
+        agentNote
+      ) : agentNote && !messages.length ? k(
+        "div",
+        { style: `color:${muted};margin-bottom:6px` },
+        agentNote
+      ) : null,
+      messages.length ? thread : null,
+      workingRow,
+      proposed,
+      k("textarea", {
+        value: chatInput,
+        placeholder: messages.length ? "reply\u2026 (the agent remembers this thread)" : "what does this do? \xB7 make the padding bigger \xB7 fix this bug",
+        rows: 2,
+        onInput: (ev) => setChatInput(ev.target.value),
+        onKeyDown: (ev) => {
+          if ((ev.metaKey || ev.ctrlKey) && ev.key === "Enter")
+            sendChat();
+        },
+        style: `width:100%;box-sizing:border-box;font:inherit;color:#ececef;${card};padding:8px;margin-top:8px;resize:vertical`
+      }),
+      k(
+        "div",
+        { style: "margin-top:6px" },
+        k(
+          "button",
+          {
+            style: btn,
+            disabled: turnBusy || !chatInput.trim() || agentReady === false,
+            onClick: sendChat
+          },
+          turnBusy ? `\u2026working ${elapsed}s` : "Send (\u2318\u21B5)"
+        )
+      )
+    ]
+  ) : null;
+  const timeline = history.length ? k(
+    "div",
+    { style: `margin-top:8px;border-top:1px solid #232330;padding-top:8px` },
+    [
+      k(
+        "div",
+        {
+          style: `color:${accent};margin-bottom:6px;display:flex;justify-content:space-between;align-items:center`
+        },
+        [
+          k("span", {}, `SESSION \xB7 ${appliedCount} live`),
+          appliedCount > 0 ? k(
+            "button",
+            {
+              style: `${btn};color:${muted}`,
+              onClick: () => client?.sendUndoSession()
+            },
+            "Undo all"
+          ) : null
+        ]
+      ),
+      ...history.map((e) => {
+        const glyph = e.status === "applied" ? "\u2713" : e.status === "committed" ? "\u25C6" : "\u293A";
+        const dim = e.status !== "applied";
+        return k(
+          "div",
+          {
+            style: `${card};padding:6px 8px;margin:4px 0;${dim ? "opacity:0.6;" : ""}`
+          },
+          [
+            k(
+              "div",
+              {
+                style: "display:flex;justify-content:space-between;gap:8px;align-items:center"
+              },
+              [
+                k(
+                  "span",
+                  {
+                    style: "color:#ececef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+                  },
+                  `${glyph} ${e.prompt}`
+                ),
+                k("span", { style: "display:flex;gap:6px;flex:none" }, [
+                  k(
+                    "button",
+                    { style: btn, onClick: () => setRevisitId(e.turnId) },
+                    "Revisit"
+                  ),
+                  e.sel ? k(
+                    "button",
+                    { style: btn, onClick: () => void continueFrom(e) },
+                    "Continue"
+                  ) : null,
+                  e.status === "applied" ? k(
+                    "button",
+                    {
+                      style: btn,
+                      onClick: () => client?.sendUndo(e.turnId)
+                    },
+                    "Undo"
+                  ) : null
+                ])
+              ]
+            ),
+            k(
+              "div",
+              { style: `color:${muted};margin-top:3px` },
+              `${e.files.join(", ")} \xB7 ${e.checkpointRef}`
+            ),
+            e.note ? k(
+              "div",
+              {
+                style: `margin-top:3px;color:${e.postError ? "#ff7a7a" : "#5fd18a"};display:flex;justify-content:space-between;align-items:center`
+              },
+              [
+                k("span", {}, e.note),
+                e.postError && e.sel ? k(
+                  "button",
+                  {
+                    style: `${btn};color:#0f0f12;background:${accent};border-color:${accent}`,
+                    onClick: () => void recaptureFix(e)
+                  },
+                  "\u26A0 Re-capture & fix"
+                ) : null
+              ]
+            ) : null
+          ]
+        );
+      }),
+      appliedCount > 0 ? k(
+        "div",
+        {
+          style: "display:flex;gap:6px;align-items:center;margin-top:6px"
+        },
+        [
+          k("input", {
+            value: commitMsg,
+            placeholder: "commit message (optional)",
+            onInput: (ev) => setCommitMsg(ev.target.value),
+            style: `flex:1;box-sizing:border-box;font:inherit;color:#ececef;${card};padding:5px 7px`
+          }),
+          k(
+            "button",
+            {
+              style: btn,
+              onClick: () => client?.sendCommitSession(
+                commitMsg.trim() || void 0
+              )
+            },
+            "Commit (local)"
+          )
+        ]
+      ) : null,
+      sessionNote ? k("div", { style: "color:#5fd18a;margin-top:6px" }, sessionNote) : null
+    ]
+  ) : null;
+  const settings = showSettings ? k("div", { style: `${card};padding:10px;margin:8px 0` }, [
+    k(
+      "label",
+      {
+        style: "display:flex;gap:8px;align-items:center;cursor:pointer;color:#ececef"
+      },
+      [
+        k("input", {
+          type: "checkbox",
+          checked: autoApply,
+          onChange: (ev) => setAutoApply(ev.target.checked)
+        }),
+        k("span", {}, "Auto-apply (skip review)")
+      ]
+    ),
+    k(
+      "div",
+      { style: `color:${muted};margin-top:4px` },
+      "Writes proposed changes immediately. Still checkpointed & undoable; no manual gate. Resets on reload."
+    )
+  ]) : null;
+  const panel = open ? k(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: "64px",
+        right: "16px",
+        width: "440px",
+        maxHeight: "82vh",
+        overflow: "auto",
+        zIndex: 2147483e3,
+        font: mono,
+        color: "#ececef",
+        background: "rgba(15,15,18,0.97)",
+        border: "1px solid #2e2e3c",
+        borderRadius: "8px",
+        padding: "12px 14px",
+        boxShadow: "0 10px 36px rgba(0,0,0,0.55)"
+      }
+    },
+    [
+      k(
+        "div",
+        {
+          style: "display:flex;justify-content:space-between;align-items:center;gap:8px"
+        },
+        [
+          k(
+            "span",
+            {
+              style: `color:${accent};overflow:hidden;text-overflow:ellipsis;white-space:nowrap`
+            },
+            targetSummary
+          ),
+          k("span", { style: "display:flex;gap:6px;flex:none" }, [
+            bundle ? k(
+              "button",
+              { style: btn, onClick: () => setShowCtx((v) => !v) },
+              showCtx ? "details \u25BE" : "details \u25B8"
+            ) : null,
+            k(
+              "button",
+              { style: btn, onClick: () => setShowSettings((v) => !v) },
+              "\u2699"
+            ),
+            k(
+              "button",
+              { style: btn, onClick: () => setOpen(false) },
+              "close"
+            )
+          ])
+        ]
+      ),
+      settings,
+      ctx,
+      conversation,
+      timeline,
+      !bundle && !history.length ? k(
+        "div",
+        { style: `color:${muted};margin-top:10px` },
+        "Pick an element to start."
+      ) : null
+    ]
+  ) : null;
+  return k("div", {}, [
+    panel,
+    k("div", { style: pill }, [
+      k("span", {
+        style: `width:8px;height:8px;border-radius:50%;background:${DOT[state]};display:inline-block`
+      }),
+      k("strong", { style: "letter-spacing:0.08em" }, "InSitue"),
+      k(
+        "span",
+        {
+          style: `color:${muted};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap`
+        },
+        turnBusy ? `${spin[pulse % spin.length]} ${activity || "working"}` : detail || state
+      ),
+      k(
+        "button",
+        {
+          disabled: state !== "connected" || busy,
+          onClick: () => pick("element"),
+          style: btn
+        },
+        busy ? "\u2026" : "Select"
+      ),
+      k(
+        "button",
+        {
+          disabled: state !== "connected" || busy,
+          onClick: () => pick("rect"),
+          style: btn
+        },
+        "Rect"
+      ),
+      bundle || history.length ? k(
+        "button",
+        { onClick: () => setOpen((v) => !v), style: btn },
+        open ? "hide" : "panel"
+      ) : null
+    ])
+  ]);
+}
+function mountInSitue(opts = {}) {
+  const host = document.createElement("div");
+  host.id = "insitu-root";
+  host.setAttribute("data-insitu", "");
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const mountPoint = document.createElement("div");
+  shadow.appendChild(mountPoint);
+  R(k(App, { port: opts.port ?? 5747 }), mountPoint);
+  return () => {
+    R(null, mountPoint);
+    host.remove();
+  };
+}
+
+export {
+  mountInSitue
+};