konsul-ai 0.2.4

package/dist/web/app.js

@@ -0,0 +1,760 @@
+const state = {
+  preset: "balanced",
+  web: false,
+  verbose: false,
+  query: "",
+  activeQuery: "",
+  running: false,
+  logs: [],
+  synthText: "",
+  streaming: false,
+  result: null,
+  error: null,
+  showOpinions: false,
+  history: [],
+  pastRuns: [],
+  presets: null,
+};
+
+const LOGO_SVG_LARGE = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="25 25 140 120">
+  <defs>
+    <linearGradient id="wn1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f472b6"/><stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+    <linearGradient id="wn2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0ea5e9"/>
+    </linearGradient>
+    <linearGradient id="wn3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a78bfa"/><stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+    <linearGradient id="wc" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#fbbf24"/><stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <line x1="95" y1="48" x2="55" y2="118" stroke="#f472b6" stroke-width="1.5" opacity="0.3"/>
+  <line x1="95" y1="48" x2="135" y2="118" stroke="#a78bfa" stroke-width="1.5" opacity="0.3"/>
+  <line x1="55" y1="118" x2="135" y2="118" stroke="#38bdf8" stroke-width="1.5" opacity="0.3"/>
+  <line x1="95" y1="48" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <line x1="55" y1="118" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <line x1="135" y1="118" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <circle cx="95" cy="48" r="16" fill="url(#wn1)"/>
+  <circle cx="55" cy="118" r="16" fill="url(#wn2)"/>
+  <circle cx="135" cy="118" r="16" fill="url(#wn3)"/>
+  <circle cx="95" cy="48" r="20" fill="none" stroke="#f472b6" stroke-width="1" opacity="0.25"/>
+  <circle cx="55" cy="118" r="20" fill="none" stroke="#38bdf8" stroke-width="1" opacity="0.25"/>
+  <circle cx="135" cy="118" r="20" fill="none" stroke="#a78bfa" stroke-width="1" opacity="0.25"/>
+  <circle cx="95" cy="88" r="12" fill="url(#wc)"/>
+  <circle cx="95" cy="88" r="16" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.3"/>
+  <text x="95" y="53" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">A</text>
+  <text x="55" y="123" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">B</text>
+  <text x="135" y="123" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">C</text>
+  <text x="95" y="93" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">&#9733;</text>
+</svg>`;
+
+const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="25 25 140 120">
+  <defs>
+    <linearGradient id="node1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f472b6"/><stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+    <linearGradient id="node2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0ea5e9"/>
+    </linearGradient>
+    <linearGradient id="node3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a78bfa"/><stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+    <linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#fbbf24"/><stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <line x1="95" y1="48" x2="55" y2="118" stroke="#f472b6" stroke-width="1.5" opacity="0.3"/>
+  <line x1="95" y1="48" x2="135" y2="118" stroke="#a78bfa" stroke-width="1.5" opacity="0.3"/>
+  <line x1="55" y1="118" x2="135" y2="118" stroke="#38bdf8" stroke-width="1.5" opacity="0.3"/>
+  <line x1="95" y1="48" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <line x1="55" y1="118" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <line x1="135" y1="118" x2="95" y2="88" stroke="#fbbf24" stroke-width="1.5" opacity="0.4"/>
+  <circle cx="95" cy="48" r="16" fill="url(#node1)"/>
+  <circle cx="55" cy="118" r="16" fill="url(#node2)"/>
+  <circle cx="135" cy="118" r="16" fill="url(#node3)"/>
+  <circle cx="95" cy="48" r="20" fill="none" stroke="#f472b6" stroke-width="1" opacity="0.25"/>
+  <circle cx="55" cy="118" r="20" fill="none" stroke="#38bdf8" stroke-width="1" opacity="0.25"/>
+  <circle cx="135" cy="118" r="20" fill="none" stroke="#a78bfa" stroke-width="1" opacity="0.25"/>
+  <circle cx="95" cy="88" r="12" fill="url(#center)"/>
+  <circle cx="95" cy="88" r="16" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.3"/>
+  <text x="95" y="53" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">A</text>
+  <text x="55" y="123" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">B</text>
+  <text x="135" y="123" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">C</text>
+  <text x="95" y="93" text-anchor="middle" font-family="ui-monospace,monospace" font-size="13" font-weight="bold" fill="#0f172a">&#9733;</text>
+</svg>`;
+
+let root = null;
+let renderQueued = false;
+let lastScrolledText = "";
+let lastRenderedLogCount = 0;
+
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function boolAttr(value, name) {
+  return value ? ` ${name}` : "";
+}
+
+export function safeLinkHref(value) {
+  try {
+    const url = new URL(String(value ?? "").trim());
+    if (url.protocol === "http:" || url.protocol === "https:") return url.toString();
+  } catch {}
+  return null;
+}
+
+export function shouldSubmitFromKeyDown(event) {
+  if (!event) return false;
+  if (event.isComposing || event.keyCode === 229) return false;
+  if (event.key !== "Enter" || event.shiftKey) return false;
+  return true;
+}
+
+function tokenStore() {
+  const tokens = [];
+  return {
+    stash(html) {
+      const key = `\u0000${tokens.length}\u0000`;
+      tokens.push(html);
+      return key;
+    },
+    restore(text) {
+      return text.replace(/\u0000(\d+)\u0000/g, (_match, index) => tokens[Number(index)] ?? "");
+    },
+  };
+}
+
+function renderInline(text) {
+  const store = tokenStore();
+  let html = String(text ?? "");
+
+  html = html.replace(/`([^`]+)`/g, (_match, code) => store.stash(`<code>${escapeHtml(code)}</code>`));
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, url) => {
+    const href = safeLinkHref(url);
+    if (!href) return match;
+    return store.stash(`<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`);
+  });
+
+  html = escapeHtml(html);
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/(^|[^\*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>");
+
+  return store.restore(html);
+}
+
+function renderCodeBlock(lines, language) {
+  const cls = language ? ` class="language-${escapeHtml(language)}"` : "";
+  return `<pre><code${cls}>${escapeHtml(lines.join("\n"))}</code></pre>`;
+}
+
+export function renderMarkdown(text) {
+  if (!text) return "";
+
+  const lines = String(text).replace(/\r\n?/g, "\n").split("\n");
+  const blocks = [];
+  let paragraph = [];
+  let list = null;
+  let codeBlock = null;
+
+  const flushParagraph = () => {
+    if (!paragraph.length) return;
+    blocks.push(`<p>${paragraph.map(renderInline).join("<br>")}</p>`);
+    paragraph = [];
+  };
+
+  const flushList = () => {
+    if (!list) return;
+    blocks.push(`<${list.type}>${list.items.map((item) => `<li>${renderInline(item)}</li>`).join("")}</${list.type}>`);
+    list = null;
+  };
+
+  const flushCodeBlock = () => {
+    if (!codeBlock) return;
+    blocks.push(renderCodeBlock(codeBlock.lines, codeBlock.language));
+    codeBlock = null;
+  };
+
+  for (const line of lines) {
+    if (codeBlock) {
+      if (/^```/.test(line)) {
+        flushCodeBlock();
+      } else {
+        codeBlock.lines.push(line);
+      }
+      continue;
+    }
+
+    const codeFence = line.match(/^```([\w-]*)\s*$/);
+    if (codeFence) {
+      flushParagraph();
+      flushList();
+      codeBlock = { language: codeFence[1], lines: [] };
+      continue;
+    }
+
+    if (!line.trim()) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      const level = heading[1].length;
+      blocks.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+      continue;
+    }
+
+    const unordered = line.match(/^[-*+]\s+(.*)$/);
+    if (unordered) {
+      flushParagraph();
+      if (!list || list.type !== "ul") {
+        flushList();
+        list = { type: "ul", items: [] };
+      }
+      list.items.push(unordered[1]);
+      continue;
+    }
+
+    const ordered = line.match(/^\d+\.\s+(.*)$/);
+    if (ordered) {
+      flushParagraph();
+      if (!list || list.type !== "ol") {
+        flushList();
+        list = { type: "ol", items: [] };
+      }
+      list.items.push(ordered[1]);
+      continue;
+    }
+
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  flushList();
+  flushCodeBlock();
+
+  return blocks.join("");
+}
+
+function renderMarkdownBlock(text, cls = "") {
+  const classes = cls ? `md-content ${cls}` : "md-content";
+  return `<div class="${classes}">${renderMarkdown(text)}</div>`;
+}
+
+async function runCouncil(query, preset, web, history, callbacks) {
+  const { onLog, onStream, onResult, onError, onDone } = callbacks;
+  const res = await fetch("/api/council", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ query, preset, web, history }),
+  });
+
+  const contentType = res.headers.get("content-type") || "";
+  if (!res.ok) {
+    let message = `${res.status} ${res.statusText}`.trim();
+    if (contentType.includes("application/json")) {
+      try {
+        const data = await res.json();
+        message = data.error || data.message || message;
+      } catch {}
+    } else {
+      const raw = await res.text();
+      if (raw.trim()) message = raw.trim();
+    }
+    throw new Error(message);
+  }
+  if (!contentType.includes("text/event-stream")) {
+    throw new Error(`Unexpected response type: ${contentType || "unknown"}`);
+  }
+  if (!res.body) {
+    throw new Error("Missing response body");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+
+    const lines = buffer.split("\n");
+    buffer = lines.pop() || "";
+
+    let currentEvent = null;
+    for (const line of lines) {
+      if (line.startsWith("event: ")) {
+        currentEvent = line.slice(7);
+      } else if (line.startsWith("data: ") && currentEvent) {
+        try {
+          const data = JSON.parse(line.slice(6));
+          if (currentEvent === "log") onLog(data.message);
+          else if (currentEvent === "stream") onStream(data.text);
+          else if (currentEvent === "result") onResult(data);
+          else if (currentEvent === "error") onError(data.message);
+        } catch {}
+        currentEvent = null;
+      } else if (line === "") {
+        currentEvent = null;
+      }
+    }
+  }
+  onDone();
+}
+
+function parseLog(logs) {
+  let activeStage = 0;
+  const stages = [
+    { title: "Opinions", models: [], done: false },
+    { title: "Peer Review", models: [], done: false },
+    { title: "Synthesis", models: [], done: false },
+  ];
+
+  for (const msg of logs) {
+    if (msg.includes("Stage 1")) {
+      activeStage = 1;
+      stages[0].done = false;
+    } else if (msg.includes("Stage 2")) {
+      activeStage = 2;
+      stages[0].done = true;
+    } else if (msg.includes("Stage 3")) {
+      activeStage = 3;
+      stages[1].done = true;
+    } else if (msg.includes("Synthesis complete")) {
+      stages[2].done = true;
+    }
+
+    const okMatch = msg.match(/✓\s+(.+?)\s+(?:responded|reviewed|complete)/);
+    if (okMatch) {
+      const name = okMatch[1];
+      const stageIdx = activeStage - 1;
+      if (stageIdx >= 0 && stageIdx < 3) {
+        const existing = stages[stageIdx].models.find((model) => model.name === name);
+        if (existing) existing.status = "ok";
+        else stages[stageIdx].models.push({ name, status: "ok" });
+      }
+    }
+
+    const failMatch = msg.match(/✗\s+(.+?):/);
+    if (failMatch) {
+      const name = failMatch[1];
+      const stageIdx = activeStage - 1;
+      if (stageIdx >= 0 && stageIdx < 3) {
+        stages[stageIdx].models.push({ name, status: "fail" });
+      }
+    }
+  }
+
+  return { stages, activeStage };
+}
+
+function fmtMs(ms) {
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+function renderStageBar() {
+  const { stages, activeStage } = parseLog(state.logs);
+  if (activeStage === 0) return "";
+
+  return `
+    <div class="stages">
+      ${stages.map((stage, index) => {
+        const cls = stage.done ? "stage done" : (index + 1 === activeStage ? "stage active" : "stage");
+        return `
+          <div class="${cls}">
+            <div class="title">${index + 1}. ${escapeHtml(stage.title)}</div>
+            <div class="models">
+              ${stage.models.map((model) => `
+                <span class="model-status">
+                  <span class="dot ${model.status}"></span>${escapeHtml(model.name)}
+                </span>
+              `).join("")}
+              ${!stage.done && index + 1 === activeStage && stage.models.length === 0
+                ? '<span class="model-status"><span class="dot pending"></span>waiting...</span>'
+                : ""}
+            </div>
+          </div>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
+function renderResultMeta(result) {
+  if (!result) return "";
+  return `
+    <div class="result-meta">
+      <div class="rankings">
+        ${(result.scores || []).map((score, index) => `
+          <span class="rank-item"><span class="rank-num">${index + 1}.</span> ${escapeHtml(score.label)} (${score.avgRank.toFixed(1)})</span>
+        `).join("")}
+      </div>
+      <div>${fmtMs(result.totalLatencyMs)} · ~${escapeHtml(result.tokenEstimate)} tokens</div>
+    </div>
+  `;
+}
+
+function renderOpinions() {
+  if (!(state.showOpinions || state.verbose) || !state.result?.opinions?.length) return "";
+
+  return `
+    <div>
+      ${state.result.opinions.map((opinion) => `
+        <div class="opinion">
+          <div class="opinion-header">${escapeHtml(opinion.model.label)}</div>
+          <div class="opinion-body">${renderMarkdownBlock(opinion.content)}</div>
+        </div>
+      `).join("")}
+    </div>
+  `;
+}
+
+function renderPastRuns() {
+  return state.pastRuns.map((run) => `
+    <div class="history-entry">
+      <div class="user-query">${escapeHtml(run.query)}</div>
+      <div class="synthesis">${renderMarkdownBlock(run.synthesis)}</div>
+      <div class="result-meta">
+        <div class="rankings">
+          ${(run.scores || []).map((score, index) => `
+            <span class="rank-item"><span class="rank-num">${index + 1}.</span> ${escapeHtml(score.label)} (${score.avgRank.toFixed(1)})</span>
+          `).join("")}
+        </div>
+        <div>${fmtMs(run.totalLatencyMs)} · ~${escapeHtml(run.tokenEstimate)} tokens</div>
+      </div>
+    </div>
+  `).join("");
+}
+
+function renderSynthesis() {
+  if (!state.synthText && !state.streaming) return "";
+
+  return `
+    <div class="synthesis">
+      <div id="synth-content" class="md-content">${renderMarkdown(state.synthText)}</div>
+      ${state.streaming ? '<span class="cursor"></span>' : ""}
+    </div>
+  `;
+}
+
+function hasContent() {
+  return state.pastRuns.length > 0 || state.activeQuery || state.running || state.result || state.error;
+}
+
+function renderWelcome() {
+  return `
+    <div class="welcome">
+      ${LOGO_SVG_LARGE}
+      <div class="welcome-title">Konsul</div>
+      <div class="welcome-subtitle">Multi-LLM council. Ask a question and multiple AI models will debate, review, and synthesize the best answer.</div>
+    </div>
+  `;
+}
+
+function renderApp() {
+  const presetMeta = state.presets?.[state.preset];
+  const teamInfo = presetMeta
+    ? `${presetMeta.members.join(", ")} · chair: ${presetMeta.chair} · ${presetMeta.rounds} round${presetMeta.rounds > 1 ? "s" : ""}`
+    : "";
+
+  return `
+    <header>
+      <div class="logo">${LOGO_SVG}<span>Konsul</span></div>
+      <div class="controls">
+        <select id="preset-select">
+          <option value="free"${state.preset === "free" ? " selected" : ""}>Free</option>
+          <option value="budget"${state.preset === "budget" ? " selected" : ""}>Budget</option>
+          <option value="balanced"${state.preset === "balanced" ? " selected" : ""}>Balanced</option>
+          <option value="premium"${state.preset === "premium" ? " selected" : ""}>Premium</option>
+        </select>
+        <label class="toggle">
+          <input id="web-toggle" type="checkbox"${boolAttr(state.web, "checked")}>
+          Web
+        </label>
+        <label class="toggle">
+          <input id="verbose-toggle" type="checkbox"${boolAttr(state.verbose, "checked")}>
+          Verbose
+        </label>
+      </div>
+    </header>
+
+    ${teamInfo ? `<div class="team-info">${escapeHtml(teamInfo)}</div>` : ""}
+
+    <div class="messages" id="messages">
+      ${hasContent() ? `
+        ${renderPastRuns()}
+        ${state.activeQuery ? `<div class="user-query">${escapeHtml(state.activeQuery)}</div>` : ""}
+        ${renderStageBar()}
+        ${state.error ? `<div class="error-msg">${escapeHtml(state.error)}</div>` : ""}
+        ${renderSynthesis()}
+        ${renderResultMeta(state.result)}
+        ${state.result ? `
+          <button class="opinions-toggle" data-action="toggle-opinions">
+            ${state.showOpinions ? "Hide" : "Show"} individual opinions (${state.result.opinions?.length || 0})
+          </button>
+          ${renderOpinions()}
+        ` : ""}
+      ` : renderWelcome()}
+    </div>
+
+    <div class="query-box">
+      <div class="input-wrapper">
+        <textarea
+          id="query-input"
+          placeholder="Ask the council..."
+          ${boolAttr(state.running, "disabled")}
+        >${escapeHtml(state.query)}</textarea>
+        <button
+          class="send-btn"
+          data-action="submit"
+          aria-label="Send"
+          ${boolAttr(state.running || !state.query.trim(), "disabled")}
+        >${state.running ? "\u2026" : "\u2191"}</button>
+      </div>
+    </div>
+  `;
+}
+
+function autoResizeTextarea(textarea) {
+  textarea.style.height = "0px";
+  textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+}
+
+function scrollMessages() {
+  const messagesEl = root?.querySelector("#messages");
+  if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+export function captureMessagesScrollState(messagesEl, options = {}) {
+  if (options.running) return { top: 0, stickToBottom: true };
+  if (!messagesEl) return { top: 0, stickToBottom: true };
+  const maxScrollTop = Math.max(messagesEl.scrollHeight - messagesEl.clientHeight, 0);
+  return {
+    top: messagesEl.scrollTop,
+    stickToBottom: maxScrollTop - messagesEl.scrollTop <= 8,
+  };
+}
+
+export function restoreMessagesScrollState(messagesEl, scrollState) {
+  if (!messagesEl || !scrollState) return;
+  if (scrollState.stickToBottom) {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+    return;
+  }
+  const maxScrollTop = Math.max(messagesEl.scrollHeight - messagesEl.clientHeight, 0);
+  messagesEl.scrollTop = Math.min(scrollState.top, maxScrollTop);
+}
+
+function render() {
+  if (!root) return;
+  const scrollState = captureMessagesScrollState(root.querySelector("#messages"), { running: state.running });
+  const hadFocus = document.activeElement?.id === "query-input";
+  const selStart = hadFocus ? document.activeElement.selectionStart : null;
+  const selEnd = hadFocus ? document.activeElement.selectionEnd : null;
+
+  root.innerHTML = renderApp();
+
+  const textarea = root.querySelector("#query-input");
+  if (textarea) {
+    autoResizeTextarea(textarea);
+    if (hadFocus) {
+      textarea.focus();
+      if (selStart !== null) textarea.setSelectionRange(selStart, selEnd);
+    }
+  }
+
+  lastRenderedLogCount = state.logs.length;
+  restoreMessagesScrollState(root.querySelector("#messages"), scrollState);
+  if (state.synthText !== lastScrolledText && scrollState.stickToBottom) {
+    scrollMessages();
+    lastScrolledText = state.synthText;
+  }
+}
+
+function renderStreamUpdate() {
+  if (!root) return;
+  const synthEl = root.querySelector("#synth-content");
+  if (!synthEl) {
+    render();
+    return;
+  }
+  const messagesEl = root.querySelector("#messages");
+  const scrollState = captureMessagesScrollState(messagesEl);
+  synthEl.innerHTML = renderMarkdown(state.synthText);
+
+  if (state.synthText !== lastScrolledText && scrollState.stickToBottom) {
+    scrollMessages();
+    lastScrolledText = state.synthText;
+  }
+}
+
+function scheduleRender() {
+  if (renderQueued) return;
+  renderQueued = true;
+  queueMicrotask(() => {
+    renderQueued = false;
+    if (state.streaming && root?.querySelector("#synth-content") && state.logs.length === lastRenderedLogCount) {
+      renderStreamUpdate();
+    } else {
+      render();
+    }
+  });
+}
+
+async function submit() {
+  const q = state.query.trim();
+  if (!q || state.running) return;
+
+  if (state.result) {
+    state.pastRuns = [
+      ...state.pastRuns,
+      {
+        query: state.result.query,
+        synthesis: state.result.synthesis,
+        scores: state.result.scores,
+        totalLatencyMs: state.result.totalLatencyMs,
+        tokenEstimate: state.result.tokenEstimate,
+      },
+    ];
+  }
+
+  state.running = true;
+  state.activeQuery = q;
+  state.logs = [];
+  state.synthText = "";
+  state.streaming = false;
+  state.result = null;
+  state.error = null;
+  state.showOpinions = false;
+  state.query = "";
+  render();
+
+  const synthBuf = { text: "" };
+  try {
+    await runCouncil(q, state.preset, state.web, state.history, {
+      onLog(message) {
+        state.logs = [...state.logs, message];
+        scheduleRender();
+      },
+      onStream(text) {
+        synthBuf.text += text;
+        state.synthText = synthBuf.text;
+        state.streaming = true;
+        scheduleRender();
+      },
+      onResult(data) {
+        state.result = data;
+        state.synthText = data.synthesis;
+        state.streaming = false;
+        state.activeQuery = "";
+        state.history = [
+          ...state.history,
+          { role: "user", content: q },
+          { role: "assistant", content: data.synthesis },
+        ];
+        scheduleRender();
+      },
+      onError(message) {
+        state.error = message;
+        state.streaming = false;
+        scheduleRender();
+      },
+      onDone() {
+        state.running = false;
+        state.streaming = false;
+        state.activeQuery = "";
+        scheduleRender();
+      },
+    });
+  } catch (err) {
+    state.error = err instanceof Error ? err.message : "Network error";
+    state.running = false;
+    state.streaming = false;
+    state.activeQuery = "";
+    render();
+  }
+}
+
+async function loadPresets() {
+  try {
+    const res = await fetch("/api/presets");
+    state.presets = await res.json();
+    render();
+  } catch {}
+}
+
+function onChange(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+
+  if (target.id === "preset-select") {
+    state.preset = target.value;
+    render();
+  } else if (target.id === "web-toggle") {
+    state.web = target.checked;
+    render();
+  } else if (target.id === "verbose-toggle") {
+    state.verbose = target.checked;
+    render();
+  }
+}
+
+function onInput(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement) || target.id !== "query-input") return;
+  state.query = target.value;
+  autoResizeTextarea(target);
+  const submitButton = root?.querySelector('[data-action="submit"]');
+  if (submitButton) submitButton.disabled = state.running || !state.query.trim();
+}
+
+function onKeyDown(event) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement) || target.id !== "query-input") return;
+  if (!shouldSubmitFromKeyDown(event)) return;
+  event.preventDefault();
+  void submit();
+}
+
+function onClick(event) {
+  const element = event.target instanceof HTMLElement ? event.target.closest("[data-action]") : null;
+  if (!element) return;
+
+  const action = element.getAttribute("data-action");
+  if (action === "submit") {
+    void submit();
+  } else if (action === "toggle-opinions") {
+    state.showOpinions = !state.showOpinions;
+    render();
+  }
+}
+
+function bootstrap() {
+  root = document.getElementById("app");
+  if (!root) return;
+
+  root.addEventListener("change", onChange);
+  root.addEventListener("input", onInput);
+  root.addEventListener("keydown", onKeyDown);
+  root.addEventListener("click", onClick);
+
+  render();
+  void loadPresets();
+}
+
+if (typeof document !== "undefined") {
+  bootstrap();
+}