otterly 0.3.0 → 0.3.1

package/dist/server/playground.js

@@ -0,0 +1,1227 @@
+// Interactive API playground — self-contained HTML served at GET /playground.
+// Zero external dependencies. Dark mode. GitHub-dark palette.
+function playgroundCSS() {
+    return `
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --surface-raised: #1c2129;
+      --border: #30363d;
+      --text: #e6edf3;
+      --text-muted: #8b949e;
+      --accent: #58a6ff;
+      --accent-hover: #79c0ff;
+      --success: #3fb950;
+      --error: #f85149;
+      --warning: #d29922;
+      --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      --radius: 6px;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-sans);
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.5;
+      min-height: 100vh;
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--border);
+      background: var(--surface);
+    }
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .api-key-input {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      color: var(--text);
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      width: 220px;
+    }
+    .api-key-input:focus { outline: none; border-color: var(--accent); }
+
+    /* Tabs */
+    .tabs {
+      display: flex;
+      gap: 0;
+      border-bottom: 1px solid var(--border);
+      background: var(--surface);
+      padding: 0 20px;
+      overflow-x: auto;
+    }
+    .tab {
+      padding: 10px 16px;
+      cursor: pointer;
+      color: var(--text-muted);
+      font-size: 13px;
+      font-weight: 500;
+      border-bottom: 2px solid transparent;
+      transition: color 0.15s, border-color 0.15s;
+      white-space: nowrap;
+      background: none;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      font-family: var(--font-sans);
+    }
+    .tab:hover { color: var(--text); }
+    .tab.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+
+    /* Main */
+    .main {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .panel { display: none; }
+    .panel.active { display: block; }
+
+    /* Request panel */
+    .endpoint {
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--accent);
+      margin-bottom: 16px;
+    }
+    .endpoint .method {
+      background: var(--accent);
+      color: var(--bg);
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-weight: 700;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+
+    .section-header {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .section-header::before {
+      content: '\\25B6';
+      display: inline-block;
+      margin-right: 6px;
+      font-size: 10px;
+      transition: transform 0.15s;
+    }
+    .section-header.open::before {
+      transform: rotate(90deg);
+    }
+
+    .collapsible { display: none; margin-bottom: 16px; }
+    .collapsible.open { display: block; }
+
+    .header-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .header-row input {
+      flex: 1;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      color: var(--text);
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+    }
+    .header-row input:focus { outline: none; border-color: var(--accent); }
+    .header-row .label {
+      min-width: 110px;
+      font-size: 12px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 200px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      color: var(--text);
+      padding: 12px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      line-height: 1.5;
+      resize: vertical;
+      tab-size: 2;
+    }
+    textarea:focus { outline: none; border-color: var(--accent); }
+
+    .btn-row {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .btn {
+      padding: 8px 20px;
+      border: none;
+      border-radius: var(--radius);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: var(--font-sans);
+      transition: opacity 0.15s;
+    }
+    .btn:hover { opacity: 0.85; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn-primary {
+      background: var(--accent);
+      color: var(--bg);
+    }
+    .btn-secondary {
+      background: var(--surface-raised);
+      color: var(--text);
+      border: 1px solid var(--border);
+    }
+
+    /* Response */
+    .response-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 24px;
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+    .response-bar .status-badge {
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-weight: 600;
+      font-size: 12px;
+      font-family: var(--font-mono);
+    }
+    .response-bar .status-badge.ok { background: var(--success); color: var(--bg); }
+    .response-bar .status-badge.err { background: var(--error); color: #fff; }
+    .response-bar .duration { color: var(--text-muted); }
+
+    .response-tabs {
+      display: flex;
+      gap: 0;
+      margin-bottom: 0;
+    }
+    .response-tab {
+      padding: 6px 14px;
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-muted);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-bottom: none;
+      border-radius: var(--radius) var(--radius) 0 0;
+      font-family: var(--font-sans);
+    }
+    .response-tab.active {
+      color: var(--text);
+      background: var(--bg);
+    }
+
+    .response-body {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 0 var(--radius) var(--radius) var(--radius);
+      padding: 16px;
+      font-family: var(--font-mono);
+      font-size: 13px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 500px;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    /* Streaming */
+    .stream-output {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 16px;
+      font-family: var(--font-mono);
+      font-size: 13px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 500px;
+      overflow-y: auto;
+      margin-top: 16px;
+      position: relative;
+    }
+
+    .cursor-blink {
+      display: inline-block;
+      width: 8px;
+      height: 16px;
+      background: var(--accent);
+      animation: blink 1s step-end infinite;
+      vertical-align: text-bottom;
+    }
+    @keyframes blink {
+      50% { opacity: 0; }
+    }
+
+    .tool-call-block {
+      border-left: 3px solid var(--warning);
+      margin: 8px 0;
+      padding: 8px 12px;
+      background: var(--surface);
+      border-radius: 0 var(--radius) var(--radius) 0;
+    }
+    .tool-call-header {
+      font-weight: 600;
+      font-size: 12px;
+      color: var(--warning);
+      cursor: pointer;
+      user-select: none;
+    }
+    .tool-call-header::before {
+      content: '\\25B6 ';
+      font-size: 10px;
+    }
+    .tool-call-block.open .tool-call-header::before {
+      content: '\\25BC ';
+    }
+    .tool-call-body {
+      display: none;
+      margin-top: 6px;
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .tool-call-block.open .tool-call-body { display: block; }
+
+    .tool-result-ok { border-left-color: var(--success); }
+    .tool-result-err { border-left-color: var(--error); }
+
+    .summary-bar {
+      display: flex;
+      gap: 16px;
+      margin-top: 12px;
+      padding: 8px 12px;
+      background: var(--surface);
+      border-radius: var(--radius);
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    .summary-bar span { font-family: var(--font-mono); }
+
+    .jump-bottom {
+      position: sticky;
+      bottom: 8px;
+      float: right;
+      padding: 4px 12px;
+      font-size: 11px;
+      background: var(--accent);
+      color: var(--bg);
+      border: none;
+      border-radius: var(--radius);
+      cursor: pointer;
+      display: none;
+    }
+
+    /* Status dashboard */
+    .status-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+    .status-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 16px;
+    }
+    .status-card h3 {
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+    .status-card .value {
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+    }
+    .status-card .sub {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 4px;
+    }
+    .cb-closed { color: var(--success); }
+    .cb-open { color: var(--error); }
+    .cb-half-open { color: var(--warning); }
+
+    /* WebSocket */
+    .ws-controls {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      align-items: center;
+    }
+    .ws-status {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--error);
+      display: inline-block;
+    }
+    .ws-status.connected { background: var(--success); }
+    .ws-status.connecting { background: var(--warning); }
+
+    .ws-log {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 12px;
+      font-family: var(--font-mono);
+      font-size: 13px;
+      max-height: 400px;
+      overflow-y: auto;
+      margin-bottom: 12px;
+    }
+    .ws-msg { margin-bottom: 6px; }
+    .ws-msg.sent { color: var(--accent); }
+    .ws-msg.received { color: var(--success); }
+    .ws-msg.system { color: var(--text-muted); font-style: italic; }
+
+    .ws-input-row {
+      display: flex;
+      gap: 8px;
+    }
+    .ws-input-row textarea {
+      min-height: 60px;
+    }
+
+    /* Utilities */
+    .hidden { display: none !important; }
+    .mt-16 { margin-top: 16px; }
+    .mb-8 { margin-bottom: 8px; }
+  `;
+}
+function playgroundJS(port) {
+    return `
+(function() {
+  const PORT = ${port};
+  const BASE = location.origin;
+  const WS_BASE = BASE.replace(/^http/, 'ws');
+
+  // Request templates per tab
+  const TEMPLATES = {
+    run: JSON.stringify({ prompt: "What is 2 + 2?", options: { maxTurns: 1 } }, null, 2),
+    stream: JSON.stringify({ prompt: "Write a haiku about coding", options: { maxTurns: 1 } }, null, 2),
+    chat: JSON.stringify({
+      model: "claude-sonnet-4-20250514",
+      messages: [{ role: "user", content: "Hello! What can you do?" }],
+      stream: false
+    }, null, 2),
+    ws: JSON.stringify({ type: "start", prompt: "Hello from WebSocket" }, null, 2)
+  };
+
+  // Endpoints per tab
+  const ENDPOINTS = {
+    status: { method: 'GET', path: '/api/status' },
+    run: { method: 'POST', path: '/api/run' },
+    stream: { method: 'POST', path: '/api/stream' },
+    chat: { method: 'POST', path: '/v1/chat/completions' },
+  };
+
+  // State
+  const state = {
+    activeTab: 'status',
+    apiKey: localStorage.getItem('otterly_api_key') || '',
+    sessionId: '',
+    ws: null,
+    wsConnected: false,
+    activeAbort: null,
+    statusInterval: null,
+    autoScroll: true,
+    responseMode: 'formatted', // 'formatted' | 'raw'
+    history: [],
+  };
+
+  // DOM refs
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => document.querySelectorAll(sel);
+
+  // Init
+  document.addEventListener('DOMContentLoaded', () => {
+    // Restore API key
+    const keyInput = $('#api-key');
+    keyInput.value = state.apiKey;
+    keyInput.addEventListener('input', (e) => {
+      state.apiKey = e.target.value;
+      localStorage.setItem('otterly_api_key', state.apiKey);
+    });
+
+    // Tab switching
+    $$('.tab').forEach((tab) => {
+      tab.addEventListener('click', () => switchTab(tab.dataset.tab));
+    });
+
+    // Section headers (collapsible)
+    $$('.section-header').forEach((h) => {
+      h.addEventListener('click', () => {
+        h.classList.toggle('open');
+        const target = h.nextElementSibling;
+        if (target) target.classList.toggle('open');
+      });
+    });
+
+    // Send buttons
+    $('#send-run')?.addEventListener('click', () => sendRequest('run'));
+    $('#send-stream')?.addEventListener('click', () => sendStream());
+    $('#send-chat')?.addEventListener('click', () => sendChat());
+
+    // Cancel buttons
+    $$('.btn-cancel').forEach((btn) => {
+      btn.addEventListener('click', cancelRequest);
+    });
+
+    // Response tab switching
+    $$('.response-tab').forEach((t) => {
+      t.addEventListener('click', (e) => {
+        const panel = e.target.closest('.panel');
+        panel.querySelectorAll('.response-tab').forEach((rt) => rt.classList.remove('active'));
+        e.target.classList.add('active');
+        state.responseMode = e.target.dataset.mode;
+        // Re-render if we have data
+        const formatted = panel.querySelector('.response-formatted');
+        const raw = panel.querySelector('.response-raw');
+        if (formatted && raw) {
+          formatted.classList.toggle('hidden', state.responseMode !== 'formatted');
+          raw.classList.toggle('hidden', state.responseMode !== 'raw');
+        }
+      });
+    });
+
+    // WebSocket controls
+    $('#ws-connect')?.addEventListener('click', wsConnect);
+    $('#ws-disconnect')?.addEventListener('click', wsDisconnect);
+    $('#ws-send')?.addEventListener('click', wsSend);
+
+    // Jump to bottom
+    $$('.jump-bottom').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const container = btn.closest('.stream-output') || btn.closest('.ws-log');
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+          state.autoScroll = true;
+          btn.style.display = 'none';
+        }
+      });
+    });
+
+    // Auto-scroll detection for stream outputs
+    $$('.stream-output, .ws-log').forEach((el) => {
+      el.addEventListener('scroll', () => {
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 30;
+        state.autoScroll = atBottom;
+        const jumpBtn = el.querySelector('.jump-bottom');
+        if (jumpBtn) jumpBtn.style.display = atBottom ? 'none' : 'block';
+      });
+    });
+
+    // Start with status tab
+    switchTab('status');
+  });
+
+  function switchTab(tab) {
+    state.activeTab = tab;
+    $$('.tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === tab));
+    $$('.panel').forEach((p) => p.classList.toggle('active', p.id === 'panel-' + tab));
+
+    // Start/stop status polling
+    if (tab === 'status') {
+      fetchStatus();
+      state.statusInterval = setInterval(fetchStatus, 5000);
+    } else if (state.statusInterval) {
+      clearInterval(state.statusInterval);
+      state.statusInterval = null;
+    }
+  }
+
+  function getHeaders() {
+    const h = { 'Content-Type': 'application/json' };
+    if (state.apiKey) h['Authorization'] = 'Bearer ' + state.apiKey;
+    const sid = $('#session-id-' + state.activeTab);
+    if (sid && sid.value) h['X-Session-Id'] = sid.value;
+    return h;
+  }
+
+  // ── Status ──
+  async function fetchStatus() {
+    try {
+      const res = await fetch(BASE + '/api/status');
+      const data = await res.json();
+      renderStatus(data);
+    } catch (err) {
+      $('#status-content').innerHTML = '<div style="color:var(--error)">Failed to connect: ' + escHtml(err.message) + '</div>';
+    }
+  }
+
+  function renderStatus(data) {
+    const cb = data.circuitBreaker || 'closed';
+    const cbClass = cb === 'closed' ? 'cb-closed' : cb === 'open' ? 'cb-open' : 'cb-half-open';
+    const q = data.queue || {};
+    $('#status-content').innerHTML =
+      '<div class="status-grid">' +
+        '<div class="status-card"><h3>Status</h3><div class="value" style="color:var(--success)">' + escHtml(data.status) + '</div></div>' +
+        '<div class="status-card"><h3>Version</h3><div class="value">' + escHtml(data.version) + '</div></div>' +
+        '<div class="status-card"><h3>Active Sessions</h3><div class="value">' + data.activeSessions + '</div></div>' +
+        '<div class="status-card"><h3>Circuit Breaker</h3><div class="value ' + cbClass + '">' + escHtml(cb) + '</div></div>' +
+        '<div class="status-card"><h3>Queue Active</h3><div class="value">' + (q.active || 0) + '</div>' +
+          '<div class="sub">Max concurrent: ' + (q.maxConcurrent || '-') + '</div></div>' +
+        '<div class="status-card"><h3>Queue Waiting</h3><div class="value">' + (q.queued || 0) + '</div>' +
+          '<div class="sub">Max size: ' + (q.maxQueueSize || '-') + '</div></div>' +
+      '</div>';
+  }
+
+  // ── Run (one-shot) ──
+  async function sendRequest(tab) {
+    const bodyEl = $('#body-' + tab);
+    const resBar = $('#res-bar-' + tab);
+    const resFormatted = $('#res-formatted-' + tab);
+    const resRaw = $('#res-raw-' + tab);
+    const sendBtn = $('#send-' + tab);
+
+    let body;
+    try {
+      body = JSON.parse(bodyEl.value);
+    } catch (e) {
+      resBar.innerHTML = '<span class="status-badge err">JSON Error</span> <span>' + escHtml(e.message) + '</span>';
+      return;
+    }
+
+    sendBtn.disabled = true;
+    resBar.innerHTML = '<span class="status-badge" style="background:var(--warning);color:var(--bg)">Pending</span>';
+    resFormatted.textContent = '';
+    resRaw.textContent = '';
+
+    const startTime = Date.now();
+    const controller = new AbortController();
+    state.activeAbort = controller;
+
+    try {
+      const ep = ENDPOINTS[tab];
+      const res = await fetch(BASE + ep.path, {
+        method: ep.method,
+        headers: getHeaders(),
+        body: JSON.stringify(body),
+        signal: controller.signal,
+      });
+
+      const duration = Date.now() - startTime;
+      const raw = await res.text();
+      let parsed;
+      try { parsed = JSON.parse(raw); } catch { parsed = raw; }
+
+      const ok = res.status >= 200 && res.status < 300;
+      resBar.innerHTML =
+        '<span class="status-badge ' + (ok ? 'ok' : 'err') + '">' + res.status + ' ' + (res.statusText || '') + '</span>' +
+        '<span class="duration">' + duration + 'ms</span>';
+
+      resFormatted.textContent = typeof parsed === 'object' ? JSON.stringify(parsed, null, 2) : raw;
+      resRaw.textContent = raw;
+
+      // Update session ID from response
+      const newSid = res.headers.get('X-Session-Id');
+      const sidInput = $('#session-id-' + tab);
+      if (newSid && sidInput) sidInput.value = newSid;
+    } catch (err) {
+      if (err.name === 'AbortError') {
+        resBar.innerHTML = '<span class="status-badge" style="background:var(--text-muted);color:var(--bg)">Cancelled</span>';
+      } else {
+        resBar.innerHTML = '<span class="status-badge err">Error</span> <span>' + escHtml(err.message) + '</span>';
+      }
+    } finally {
+      sendBtn.disabled = false;
+      state.activeAbort = null;
+    }
+  }
+
+  // ── Stream (NDJSON) ──
+  async function sendStream() {
+    const bodyEl = $('#body-stream');
+    const output = $('#stream-output');
+    const textArea = $('#stream-text');
+    const rawArea = $('#stream-raw');
+    const summary = $('#stream-summary');
+    const sendBtn = $('#send-stream');
+    const rawToggle = $('#stream-raw-toggle');
+
+    let body;
+    try {
+      body = JSON.parse(bodyEl.value);
+    } catch (e) {
+      output.classList.remove('hidden');
+      textArea.textContent = 'JSON parse error: ' + e.message;
+      return;
+    }
+
+    sendBtn.disabled = true;
+    output.classList.remove('hidden');
+    textArea.innerHTML = '<span class="cursor-blink"></span>';
+    rawArea.textContent = '';
+    summary.classList.add('hidden');
+    state.autoScroll = true;
+
+    const controller = new AbortController();
+    state.activeAbort = controller;
+    let showRaw = false;
+    rawToggle.textContent = 'Raw';
+    rawToggle.onclick = () => {
+      showRaw = !showRaw;
+      rawToggle.textContent = showRaw ? 'Formatted' : 'Raw';
+      textArea.classList.toggle('hidden', showRaw);
+      rawArea.classList.toggle('hidden', !showRaw);
+    };
+    rawArea.classList.add('hidden');
+
+    let fullText = '';
+
+    try {
+      const res = await fetch(BASE + '/api/stream', {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify(body),
+        signal: controller.signal,
+      });
+
+      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(); // keep incomplete line
+
+        for (const line of lines) {
+          if (!line.trim()) continue;
+          rawArea.textContent += line + '\\n';
+
+          let event;
+          try { event = JSON.parse(line); } catch { continue; }
+
+          if (event.type === 'text_delta') {
+            fullText += event.text || '';
+            textArea.innerHTML = escHtml(fullText) + '<span class="cursor-blink"></span>';
+          } else if (event.type === 'tool_use') {
+            const block = document.createElement('div');
+            block.className = 'tool-call-block';
+            block.innerHTML =
+              '<div class="tool-call-header">' + escHtml(event.name || 'tool_use') + '</div>' +
+              '<div class="tool-call-body"><pre>' + escHtml(JSON.stringify(event.input || {}, null, 2)) + '</pre></div>';
+            block.querySelector('.tool-call-header').onclick = () => block.classList.toggle('open');
+            textArea.insertBefore(block, textArea.querySelector('.cursor-blink'));
+          } else if (event.type === 'tool_result') {
+            const block = document.createElement('div');
+            block.className = 'tool-call-block ' + (event.isError ? 'tool-result-err' : 'tool-result-ok');
+            block.innerHTML =
+              '<div class="tool-call-header">Result' + (event.isError ? ' (error)' : '') + '</div>' +
+              '<div class="tool-call-body"><pre>' + escHtml(typeof event.content === 'string' ? event.content : JSON.stringify(event.content, null, 2)) + '</pre></div>';
+            block.querySelector('.tool-call-header').onclick = () => block.classList.toggle('open');
+            textArea.insertBefore(block, textArea.querySelector('.cursor-blink'));
+          } else if (event.type === 'result') {
+            // Remove cursor
+            const cur = textArea.querySelector('.cursor-blink');
+            if (cur) cur.remove();
+            // Show summary
+            summary.classList.remove('hidden');
+            summary.innerHTML =
+              '<span>Cost: $' + (event.cost || 0).toFixed(4) + '</span>' +
+              '<span>Duration: ' + (event.duration || 0) + 'ms</span>' +
+              (event.usage ? '<span>Tokens: ' + (event.usage.inputTokens || 0) + ' in / ' + (event.usage.outputTokens || 0) + ' out</span>' : '');
+
+            // Update session ID
+            const sidInput = $('#session-id-stream');
+            if (event.sessionId && sidInput) sidInput.value = event.sessionId;
+          } else if (event.type === 'session_init' && event.sessionId) {
+            const sidInput = $('#session-id-stream');
+            if (sidInput) sidInput.value = event.sessionId;
+          }
+
+          if (state.autoScroll) output.scrollTop = output.scrollHeight;
+        }
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        textArea.innerHTML = fullText + '\\n<span style="color:var(--error)">Error: ' + escHtml(err.message) + '</span>';
+      } else {
+        const cur = textArea.querySelector('.cursor-blink');
+        if (cur) cur.remove();
+        textArea.innerHTML += '\\n<span style="color:var(--text-muted)">[Cancelled]</span>';
+      }
+    } finally {
+      sendBtn.disabled = false;
+      state.activeAbort = null;
+      // Remove cursor if still present
+      const cur = textArea.querySelector('.cursor-blink');
+      if (cur) cur.remove();
+    }
+  }
+
+  // ── Chat (OpenAI) ──
+  async function sendChat() {
+    const bodyEl = $('#body-chat');
+    const sendBtn = $('#send-chat');
+
+    let body;
+    try {
+      body = JSON.parse(bodyEl.value);
+    } catch (e) {
+      $('#res-bar-chat').innerHTML = '<span class="status-badge err">JSON Error</span> <span>' + escHtml(e.message) + '</span>';
+      return;
+    }
+
+    const isStream = body.stream === true;
+
+    if (isStream) {
+      await sendChatStream(body, sendBtn);
+    } else {
+      // Non-streaming: reuse sendRequest-style logic
+      sendBtn.disabled = true;
+      const resBar = $('#res-bar-chat');
+      const resFormatted = $('#res-formatted-chat');
+      const resRaw = $('#res-raw-chat');
+      resBar.innerHTML = '<span class="status-badge" style="background:var(--warning);color:var(--bg)">Pending</span>';
+      resFormatted.textContent = '';
+      resRaw.textContent = '';
+
+      // Show standard response, hide streaming
+      $('#chat-response-standard').classList.remove('hidden');
+      $('#chat-stream-output').classList.add('hidden');
+
+      const startTime = Date.now();
+      const controller = new AbortController();
+      state.activeAbort = controller;
+
+      try {
+        const res = await fetch(BASE + '/v1/chat/completions', {
+          method: 'POST',
+          headers: getHeaders(),
+          body: JSON.stringify(body),
+          signal: controller.signal,
+        });
+
+        const duration = Date.now() - startTime;
+        const raw = await res.text();
+        let parsed;
+        try { parsed = JSON.parse(raw); } catch { parsed = raw; }
+
+        const ok = res.status >= 200 && res.status < 300;
+        resBar.innerHTML =
+          '<span class="status-badge ' + (ok ? 'ok' : 'err') + '">' + res.status + ' ' + (res.statusText || '') + '</span>' +
+          '<span class="duration">' + duration + 'ms</span>';
+
+        resFormatted.textContent = typeof parsed === 'object' ? JSON.stringify(parsed, null, 2) : raw;
+        resRaw.textContent = raw;
+      } catch (err) {
+        if (err.name === 'AbortError') {
+          resBar.innerHTML = '<span class="status-badge" style="background:var(--text-muted);color:var(--bg)">Cancelled</span>';
+        } else {
+          resBar.innerHTML = '<span class="status-badge err">Error</span> <span>' + escHtml(err.message) + '</span>';
+        }
+      } finally {
+        sendBtn.disabled = false;
+        state.activeAbort = null;
+      }
+    }
+  }
+
+  async function sendChatStream(body, sendBtn) {
+    const output = $('#chat-stream-output');
+    const textArea = $('#chat-stream-text');
+    const summary = $('#chat-stream-summary');
+
+    sendBtn.disabled = true;
+    // Hide standard response, show streaming
+    $('#chat-response-standard').classList.add('hidden');
+    output.classList.remove('hidden');
+    textArea.innerHTML = '<span class="cursor-blink"></span>';
+    summary.classList.add('hidden');
+    state.autoScroll = true;
+
+    const controller = new AbortController();
+    state.activeAbort = controller;
+    let fullText = '';
+    const startTime = Date.now();
+
+    try {
+      const res = await fetch(BASE + '/v1/chat/completions', {
+        method: 'POST',
+        headers: getHeaders(),
+        body: JSON.stringify(body),
+        signal: controller.signal,
+      });
+
+      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();
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const data = line.slice(6);
+          if (data === '[DONE]') {
+            const cur = textArea.querySelector('.cursor-blink');
+            if (cur) cur.remove();
+            const duration = Date.now() - startTime;
+            summary.classList.remove('hidden');
+            summary.innerHTML = '<span>Duration: ' + duration + 'ms</span><span>Stream complete</span>';
+            continue;
+          }
+
+          let event;
+          try { event = JSON.parse(data); } catch { continue; }
+
+          const delta = event.choices?.[0]?.delta;
+          if (delta?.content) {
+            fullText += delta.content;
+            textArea.innerHTML = escHtml(fullText) + '<span class="cursor-blink"></span>';
+          }
+          // Tool calls in streaming
+          if (delta?.tool_calls) {
+            for (const tc of delta.tool_calls) {
+              if (tc.function?.name) {
+                const block = document.createElement('div');
+                block.className = 'tool-call-block';
+                block.innerHTML =
+                  '<div class="tool-call-header">' + escHtml(tc.function.name) + '</div>' +
+                  '<div class="tool-call-body"><pre>' + escHtml(tc.function.arguments || '') + '</pre></div>';
+                block.querySelector('.tool-call-header').onclick = () => block.classList.toggle('open');
+                textArea.insertBefore(block, textArea.querySelector('.cursor-blink'));
+              }
+            }
+          }
+
+          if (state.autoScroll) output.scrollTop = output.scrollHeight;
+        }
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        textArea.innerHTML = fullText + '\\n<span style="color:var(--error)">Error: ' + escHtml(err.message) + '</span>';
+      } else {
+        const cur = textArea.querySelector('.cursor-blink');
+        if (cur) cur.remove();
+        textArea.innerHTML += '\\n<span style="color:var(--text-muted)">[Cancelled]</span>';
+      }
+    } finally {
+      sendBtn.disabled = false;
+      state.activeAbort = null;
+      const cur = textArea.querySelector('.cursor-blink');
+      if (cur) cur.remove();
+    }
+  }
+
+  // ── WebSocket ──
+  function wsConnect() {
+    if (state.ws) return;
+    const log = $('#ws-log');
+    const dot = $('#ws-dot');
+
+    dot.className = 'ws-status connecting';
+    wsLog('Connecting to ' + WS_BASE + '/ws ...', 'system');
+
+    const ws = new WebSocket(WS_BASE + '/ws');
+    state.ws = ws;
+
+    ws.onopen = () => {
+      state.wsConnected = true;
+      dot.className = 'ws-status connected';
+      wsLog('Connected', 'system');
+      $('#ws-connect').disabled = true;
+      $('#ws-disconnect').disabled = false;
+      $('#ws-send').disabled = false;
+    };
+
+    ws.onmessage = (e) => {
+      let display;
+      try {
+        const parsed = JSON.parse(e.data);
+        display = JSON.stringify(parsed, null, 2);
+      } catch {
+        display = e.data;
+      }
+      wsLog(display, 'received');
+    };
+
+    ws.onerror = () => {
+      wsLog('Connection error', 'system');
+    };
+
+    ws.onclose = (e) => {
+      state.ws = null;
+      state.wsConnected = false;
+      dot.className = 'ws-status';
+      wsLog('Disconnected (code: ' + e.code + ')', 'system');
+      $('#ws-connect').disabled = false;
+      $('#ws-disconnect').disabled = true;
+      $('#ws-send').disabled = true;
+    };
+  }
+
+  function wsDisconnect() {
+    if (state.ws) {
+      state.ws.close();
+    }
+  }
+
+  function wsSend() {
+    if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+    const input = $('#ws-input');
+    const msg = input.value.trim();
+    if (!msg) return;
+
+    state.ws.send(msg);
+    wsLog(msg, 'sent');
+  }
+
+  function wsLog(text, type) {
+    const log = $('#ws-log');
+    const div = document.createElement('div');
+    div.className = 'ws-msg ' + type;
+    const prefix = type === 'sent' ? '\\u25B6 ' : type === 'received' ? '\\u25C0 ' : '\\u2022 ';
+    div.textContent = prefix + text;
+    log.appendChild(div);
+    log.scrollTop = log.scrollHeight;
+  }
+
+  // ── Utilities ──
+  function cancelRequest() {
+    if (state.activeAbort) {
+      state.activeAbort.abort();
+      state.activeAbort = null;
+    }
+  }
+
+  function escHtml(str) {
+    if (typeof str !== 'string') str = String(str);
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+})();
+`;
+}
+function playgroundHTML() {
+    return `
+  <div class="header">
+    <div class="header-left">
+      <span>\u{1F9A6}</span>
+      <span>otterly playground</span>
+    </div>
+    <div class="header-right">
+      <input type="password" id="api-key" class="api-key-input" placeholder="API Key (optional)">
+    </div>
+  </div>
+
+  <div class="tabs">
+    <button class="tab active" data-tab="status">Status</button>
+    <button class="tab" data-tab="run">Run</button>
+    <button class="tab" data-tab="stream">Stream</button>
+    <button class="tab" data-tab="chat">Chat (OpenAI)</button>
+    <button class="tab" data-tab="ws">WebSocket</button>
+  </div>
+
+  <div class="main">
+    <!-- Status Panel -->
+    <div class="panel active" id="panel-status">
+      <div class="endpoint"><span class="method">GET</span>/api/status</div>
+      <div id="status-content"><div style="color:var(--text-muted)">Loading...</div></div>
+    </div>
+
+    <!-- Run Panel -->
+    <div class="panel" id="panel-run">
+      <div class="endpoint"><span class="method">POST</span>/api/run</div>
+
+      <div class="section-header">Headers</div>
+      <div class="collapsible">
+        <div class="header-row">
+          <span class="label">X-Session-Id</span>
+          <input type="text" id="session-id-run" placeholder="auto-populated from response">
+        </div>
+      </div>
+
+      <div class="mb-8" style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Request Body</div>
+      <textarea id="body-run"></textarea>
+
+      <div class="btn-row">
+        <button class="btn btn-primary" id="send-run">Send</button>
+        <button class="btn btn-secondary btn-cancel">Cancel</button>
+      </div>
+
+      <div class="response-bar" id="res-bar-run"></div>
+      <div class="response-tabs">
+        <button class="response-tab active" data-mode="formatted">Formatted</button>
+        <button class="response-tab" data-mode="raw">Raw</button>
+      </div>
+      <div class="response-body">
+        <pre id="res-formatted-run"></pre>
+        <pre id="res-raw-run" class="hidden"></pre>
+      </div>
+    </div>
+
+    <!-- Stream Panel -->
+    <div class="panel" id="panel-stream">
+      <div class="endpoint"><span class="method">POST</span>/api/stream</div>
+
+      <div class="section-header">Headers</div>
+      <div class="collapsible">
+        <div class="header-row">
+          <span class="label">X-Session-Id</span>
+          <input type="text" id="session-id-stream" placeholder="auto-populated from response">
+        </div>
+      </div>
+
+      <div class="mb-8" style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Request Body</div>
+      <textarea id="body-stream"></textarea>
+
+      <div class="btn-row">
+        <button class="btn btn-primary" id="send-stream">Send</button>
+        <button class="btn btn-secondary btn-cancel">Cancel</button>
+        <button class="btn btn-secondary" id="stream-raw-toggle">Raw</button>
+      </div>
+
+      <div class="stream-output hidden" id="stream-output">
+        <div id="stream-text"></div>
+        <pre id="stream-raw" class="hidden"></pre>
+        <button class="jump-bottom">Jump to bottom</button>
+      </div>
+      <div class="summary-bar hidden" id="stream-summary"></div>
+    </div>
+
+    <!-- Chat (OpenAI) Panel -->
+    <div class="panel" id="panel-chat">
+      <div class="endpoint"><span class="method">POST</span>/v1/chat/completions</div>
+
+      <div class="section-header">Headers</div>
+      <div class="collapsible">
+        <div class="header-row">
+          <span class="label">X-Session-Id</span>
+          <input type="text" id="session-id-chat" placeholder="auto-populated from response">
+        </div>
+      </div>
+
+      <div class="mb-8" style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Request Body</div>
+      <textarea id="body-chat"></textarea>
+
+      <div class="btn-row">
+        <button class="btn btn-primary" id="send-chat">Send</button>
+        <button class="btn btn-secondary btn-cancel">Cancel</button>
+      </div>
+
+      <!-- Standard (non-streaming) response -->
+      <div id="chat-response-standard">
+        <div class="response-bar" id="res-bar-chat"></div>
+        <div class="response-tabs">
+          <button class="response-tab active" data-mode="formatted">Formatted</button>
+          <button class="response-tab" data-mode="raw">Raw</button>
+        </div>
+        <div class="response-body">
+          <pre id="res-formatted-chat"></pre>
+          <pre id="res-raw-chat" class="hidden"></pre>
+        </div>
+      </div>
+
+      <!-- Streaming response -->
+      <div class="stream-output hidden" id="chat-stream-output">
+        <div id="chat-stream-text"></div>
+        <button class="jump-bottom">Jump to bottom</button>
+      </div>
+      <div class="summary-bar hidden" id="chat-stream-summary"></div>
+    </div>
+
+    <!-- WebSocket Panel -->
+    <div class="panel" id="panel-ws">
+      <div class="endpoint"><span class="method" style="background:var(--success)">WS</span>/ws</div>
+
+      <div class="ws-controls">
+        <span class="ws-status" id="ws-dot"></span>
+        <button class="btn btn-primary" id="ws-connect" style="padding:6px 14px;">Connect</button>
+        <button class="btn btn-secondary" id="ws-disconnect" disabled style="padding:6px 14px;">Disconnect</button>
+      </div>
+
+      <div class="ws-log" id="ws-log"></div>
+
+      <div class="ws-input-row">
+        <textarea id="ws-input"></textarea>
+        <button class="btn btn-primary" id="ws-send" disabled style="align-self:flex-end;">Send</button>
+      </div>
+    </div>
+  </div>
+  `;
+}
+export function getPlaygroundHtml(port) {
+    // Fill in templates via inline script
+    const templateScript = `
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  var TEMPLATES = {
+    run: ${JSON.stringify(JSON.stringify({ prompt: "What is 2 + 2?", options: { maxTurns: 1 } }, null, 2))},
+    stream: ${JSON.stringify(JSON.stringify({ prompt: "Write a haiku about coding", options: { maxTurns: 1 } }, null, 2))},
+    chat: ${JSON.stringify(JSON.stringify({ model: "claude-sonnet-4-20250514", messages: [{ role: "user", content: "Hello! What can you do?" }], stream: false }, null, 2))},
+    ws: ${JSON.stringify(JSON.stringify({ type: "start", prompt: "Hello from WebSocket" }, null, 2))}
+  };
+  var el;
+  el = document.getElementById('body-run'); if (el) el.value = TEMPLATES.run;
+  el = document.getElementById('body-stream'); if (el) el.value = TEMPLATES.stream;
+  el = document.getElementById('body-chat'); if (el) el.value = TEMPLATES.chat;
+  el = document.getElementById('ws-input'); if (el) el.value = TEMPLATES.ws;
+});
+</script>`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>otterly playground</title>
+<style>${playgroundCSS()}</style>
+</head>
+<body>
+${playgroundHTML()}
+<script>${playgroundJS(port)}</script>
+${templateScript}
+</body>
+</html>`;
+}