tep 0.11.0

data/examples/chatbot/assets/chat.js

@@ -0,0 +1,249 @@
+// chat.js -- Phase C: sidebar + multi-conversation + SSE streaming.
+// Vanilla JS, ~200 lines. Polls /api/conversations every 10s to
+// pick up titles set by TitleJob (background worker, server-side).
+
+(function () {
+  var chatEl     = document.getElementById('chat');
+  var messagesEl = document.getElementById('messages');
+  var formEl     = document.getElementById('composer');
+  var inputEl    = document.getElementById('composer-input');
+  var btnEl      = document.getElementById('send-btn');
+  var statusEl   = document.getElementById('status');
+  var convListEl = document.getElementById('conv-list');
+  var newBtnEl   = document.getElementById('new-conv-btn');
+
+  var currentConvId = parseInt(chatEl.dataset.convId || '0', 10);
+
+  // Boot from inline JSON the server embedded.
+  var bootMsgs, bootConvs;
+  try { bootMsgs = JSON.parse(document.getElementById('bootmsgs').textContent); }
+  catch (e) { bootMsgs = { messages: [] }; }
+  try { bootConvs = JSON.parse(document.getElementById('bootconvs').textContent); }
+  catch (e) { bootConvs = { conversations: [] }; }
+
+  bootMsgs.messages.forEach(appendMessage);
+  renderConvList(bootConvs.conversations);
+  scrollToEnd();
+
+  // ---------------- conversation sidebar ----------------
+
+  function renderConvList(convs) {
+    convListEl.innerHTML = '';
+    convs.forEach(function (c) {
+      var li = document.createElement('li');
+      var label = (c.title && c.title.length > 0) ? c.title : 'New chat';
+      li.textContent = label;
+      if (!c.title || c.title.length === 0) li.classList.add('untitled');
+      if (c.id === currentConvId) li.classList.add('active');
+      li.addEventListener('click', function () {
+        if (c.id !== currentConvId) {
+          window.location.href = '/c/' + c.id;
+        }
+      });
+      convListEl.appendChild(li);
+    });
+  }
+
+  function refreshConvList() {
+    fetch('/api/conversations')
+      .then(function (r) { return r.json(); })
+      .then(function (j) { renderConvList(j.conversations); })
+      .catch(function () { /* ignore transient errors */ });
+  }
+
+  newBtnEl.addEventListener('click', function () {
+    fetch('/api/conversations', { method: 'POST' })
+      .then(function (r) { return r.json(); })
+      .then(function (j) { window.location.href = '/c/' + j.id; })
+      .catch(function (err) { appendError('could not create: ' + err.message); });
+  });
+
+  // Sidebar refresh tick. TitleJob latency is ~5s (poll) + ~LLM
+  // round-trip; 10s is plenty.
+  setInterval(refreshConvList, 10000);
+
+  // ---------------- messages + streaming ----------------
+
+  function appendMessage(msg) {
+    var li = document.createElement('li');
+    li.className = 'msg ' + msg.role;
+    if (msg.role === 'assistant') {
+      li.dataset.raw = msg.content;
+      li.innerHTML = renderMarkdown(msg.content);
+    } else {
+      li.textContent = msg.content;
+    }
+    messagesEl.appendChild(li);
+  }
+
+  function appendError(text) {
+    var li = document.createElement('li');
+    li.className = 'msg error';
+    li.textContent = text;
+    messagesEl.appendChild(li);
+  }
+
+  function scrollToEnd() {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  }
+
+  function setSending(on) {
+    btnEl.disabled = on;
+    inputEl.disabled = on;
+    statusEl.textContent = on ? 'Thinking…' : '';
+  }
+
+  // WebSocket streaming (Phase F). Single long-lived WS to
+  // /api/c/ws; each user turn sends one TEXT frame
+  // {"conv_id":N,"content":"..."}; server sends back SSE-shaped
+  // chunks (`data: {...}\n\n`) per LLM delta, the same wire
+  // shape the SSE route uses -- so the parsing loop below is
+  // shared. Falls back to SSE if WebSocket isn't available or
+  // the upgrade fails.
+  var chatWs = null;
+  var chatWsLi = null;
+  var chatWsFinalize = null;
+  function openChatWs() {
+    if (chatWs && chatWs.readyState === WebSocket.OPEN) return chatWs;
+    var proto = location.protocol === 'https:' ? 'wss://' : 'ws://';
+    var ws = new WebSocket(proto + location.host + '/api/c/ws');
+    var buf = '';
+    ws.onmessage = function (evt) {
+      // Each frame is one SSE-shaped chunk: `data: {...}\n\n`.
+      buf += evt.data;
+      var sep;
+      while ((sep = buf.indexOf('\n\n')) >= 0) {
+        var ev = buf.slice(0, sep);
+        buf = buf.slice(sep + 2);
+        if (!ev.startsWith('data: ')) continue;
+        var data = ev.slice(6);
+        if (data === '[DONE]') {
+          if (chatWsFinalize) { chatWsFinalize(); chatWsFinalize = null; }
+          continue;
+        }
+        try {
+          var obj = JSON.parse(data);
+          if (obj.content && chatWsLi) {
+            chatWsLi.dataset.raw = (chatWsLi.dataset.raw || '') + obj.content;
+            chatWsLi.innerHTML = renderMarkdown(chatWsLi.dataset.raw);
+            scrollToEnd();
+          }
+        } catch (e) { /* ignore malformed */ }
+      }
+    };
+    ws.onclose = function () {
+      chatWs = null;
+      if (chatWsFinalize) { chatWsFinalize(); chatWsFinalize = null; }
+    };
+    ws.onerror = function () {
+      // Let onclose fire; the caller's finalize closes out the UI.
+    };
+    chatWs = ws;
+    return ws;
+  }
+
+  formEl.addEventListener('submit', function (ev) {
+    ev.preventDefault();
+    var content = inputEl.value.trim();
+    if (!content) return;
+
+    appendMessage({ role: 'user', content: content });
+    inputEl.value = '';
+    scrollToEnd();
+    setSending(true);
+
+    var assistantLi = document.createElement('li');
+    assistantLi.className = 'msg assistant';
+    assistantLi.dataset.raw = '';
+    messagesEl.appendChild(assistantLi);
+
+    chatWsLi = assistantLi;
+    chatWsFinalize = function () {
+      setSending(false);
+      inputEl.focus();
+      setTimeout(refreshConvList, 6000);
+      chatWsLi = null;
+    };
+
+    if ('WebSocket' in window) {
+      try {
+        var ws = openChatWs();
+        var sendIt = function () {
+          ws.send(JSON.stringify({ conv_id: currentConvId, content: content }));
+        };
+        if (ws.readyState === WebSocket.OPEN) {
+          sendIt();
+        } else {
+          ws.addEventListener('open', sendIt, { once: true });
+        }
+        return;
+      } catch (e) {
+        // fall through to SSE
+      }
+    }
+
+    // SSE fallback (also handles older browsers + when WS
+    // can't open).
+    var body = new URLSearchParams();
+    body.set('content', content);
+    fetch('/api/c/' + currentConvId + '/stream', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: body.toString()
+    })
+      .then(function (resp) {
+        if (!resp.ok) {
+          appendError('error: HTTP ' + resp.status);
+          return null;
+        }
+        var reader = resp.body.getReader();
+        var decoder = new TextDecoder();
+        return readChunk(reader, decoder, '', assistantLi);
+      })
+      .catch(function (err) {
+        appendError('network error: ' + err.message);
+      })
+      .finally(function () {
+        setSending(false);
+        inputEl.focus();
+        setTimeout(refreshConvList, 6000);
+      });
+  });
+
+  function readChunk(reader, decoder, buf, liEl) {
+    return reader.read().then(function (out) {
+      if (out.done) return;
+      buf += decoder.decode(out.value, { stream: true });
+      var sep;
+      while ((sep = buf.indexOf('\n\n')) >= 0) {
+        var ev = buf.slice(0, sep);
+        buf = buf.slice(sep + 2);
+        if (!ev.startsWith('data: ')) continue;
+        var data = ev.slice(6);
+        if (data === '[DONE]') {
+          buf = '';
+          continue;
+        }
+        try {
+          var obj = JSON.parse(data);
+          if (obj.content) {
+            liEl.dataset.raw = (liEl.dataset.raw || '') + obj.content;
+            liEl.innerHTML = renderMarkdown(liEl.dataset.raw);
+            scrollToEnd();
+          }
+        } catch (e) {
+          // ignore malformed
+        }
+      }
+      return readChunk(reader, decoder, buf, liEl);
+    });
+  }
+
+  // Cmd/Ctrl+Enter to send.
+  inputEl.addEventListener('keydown', function (ev) {
+    if ((ev.metaKey || ev.ctrlKey) && ev.key === 'Enter') {
+      ev.preventDefault();
+      formEl.requestSubmit();
+    }
+  });
+})();

data/examples/chatbot/assets/compare.js

@@ -0,0 +1,93 @@
+// compare.js -- Phase E. POST prompt to /api/compare, render N
+// backend responses side-by-side. Vanilla JS, ~80 lines.
+
+(function () {
+  var gridEl   = document.getElementById('compare-grid');
+  var formEl   = document.getElementById('prompt-form');
+  var inputEl  = document.getElementById('prompt-input');
+  var btnEl    = document.getElementById('prompt-btn');
+  var statusEl = document.getElementById('compare-status');
+
+  // Initial render: empty cards keyed by (backend, model).
+  var backends = [];
+  try {
+    backends = JSON.parse(document.getElementById('bootbackends').textContent);
+  } catch (e) { backends = []; }
+  renderEmptyCards(backends);
+
+  function renderEmptyCards(list) {
+    gridEl.innerHTML = '';
+    list.forEach(function (b, i) {
+      var card = document.createElement('article');
+      card.className = 'compare-card';
+      card.dataset.index = i;
+      card.innerHTML =
+        '<header class="card-head">' +
+          '<strong>' + escapeHtml(b.model) + '</strong>' +
+          '<span class="card-backend">' + escapeHtml(b.backend) + '</span>' +
+        '</header>' +
+        '<div class="card-meta"><span class="card-time"></span></div>' +
+        '<div class="card-body"><em>Waiting…</em></div>';
+      gridEl.appendChild(card);
+    });
+  }
+
+  function renderResults(out) {
+    statusEl.textContent =
+      'fan-out done in ' + (out.total_ms / 1000).toFixed(1) + 's';
+    var cards = gridEl.querySelectorAll('.compare-card');
+    out.results.forEach(function (r, i) {
+      var card = cards[i];
+      if (!card) return;
+      card.querySelector('.card-time').textContent = r.took_s + 's';
+      var body = card.querySelector('.card-body');
+      if (r.content.length === 0) {
+        body.innerHTML = '<em class="card-empty">(empty reply — backend unreachable?)</em>';
+      } else {
+        body.innerHTML = renderMarkdown(r.content);
+      }
+    });
+  }
+
+  function setSending(on) {
+    btnEl.disabled = on;
+    inputEl.disabled = on;
+    statusEl.textContent = on ? 'fan-out running…' : '';
+  }
+
+  formEl.addEventListener('submit', function (ev) {
+    ev.preventDefault();
+    var prompt = inputEl.value.trim();
+    if (!prompt) return;
+    setSending(true);
+    renderEmptyCards(backends);  // reset to "Waiting…"
+
+    var body = new URLSearchParams();
+    body.set('prompt', prompt);
+    fetch('/api/compare', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: body.toString()
+    })
+      .then(function (r) { return r.json(); })
+      .then(renderResults)
+      .catch(function (err) {
+        statusEl.textContent = 'error: ' + err.message;
+      })
+      .finally(function () { setSending(false); });
+  });
+
+  // Cmd/Ctrl+Enter to send.
+  inputEl.addEventListener('keydown', function (ev) {
+    if ((ev.metaKey || ev.ctrlKey) && ev.key === 'Enter') {
+      ev.preventDefault();
+      formEl.requestSubmit();
+    }
+  });
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+})();

data/examples/chatbot/assets/markdown.js

@@ -0,0 +1,84 @@
+// markdown.js -- ~60 lines, vanilla. Subset chosen to match what
+// LLM assistants actually emit; not a full CommonMark implementation.
+//
+// Supported:
+//   - Fenced code blocks: ```lang\n...\n```
+//   - Inline code: `code`
+//   - Bold: **text**
+//   - Italic: *text*
+//   - Links: [label](url)
+//   - Paragraph breaks: double newline
+//   - Newlines preserved inside paragraphs
+//
+// Not supported (escape-and-pass-through):
+//   - Headings, lists, blockquotes, tables, images, HTML
+
+(function (global) {
+  function escapeHtml(s) {
+    return s
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function renderInline(s) {
+    // Inline code first (so its contents are not further processed).
+    var parts = [];
+    var i = 0;
+    while (i < s.length) {
+      var tick = s.indexOf('`', i);
+      if (tick < 0) { parts.push(['text', s.slice(i)]); break; }
+      var close = s.indexOf('`', tick + 1);
+      if (close < 0) { parts.push(['text', s.slice(i)]); break; }
+      if (tick > i) parts.push(['text', s.slice(i, tick)]);
+      parts.push(['code', s.slice(tick + 1, close)]);
+      i = close + 1;
+    }
+    return parts.map(function (p) {
+      if (p[0] === 'code') return '<code>' + escapeHtml(p[1]) + '</code>';
+      var t = escapeHtml(p[1]);
+      // Links [label](url)
+      t = t.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g,
+        function (_, lbl, url) { return '<a href="' + url + '" rel="noopener">' + lbl + '</a>'; });
+      // Bold **text** (before italic so doubled asterisks bind tighter)
+      t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      // Italic *text*
+      t = t.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+      return t;
+    }).join('');
+  }
+
+  function renderMarkdown(src) {
+    // Split off fenced code blocks first; they're not subject to
+    // inline processing.
+    var out = [];
+    var rest = src;
+    while (true) {
+      var open = rest.indexOf('```');
+      if (open < 0) { out.push(['md', rest]); break; }
+      if (open > 0) out.push(['md', rest.slice(0, open)]);
+      var afterOpen = open + 3;
+      var nlAfterOpen = rest.indexOf('\n', afterOpen);
+      if (nlAfterOpen < 0) { out.push(['md', rest.slice(open)]); break; }
+      var close = rest.indexOf('```', nlAfterOpen + 1);
+      if (close < 0) { out.push(['md', rest.slice(open)]); break; }
+      out.push(['code', rest.slice(nlAfterOpen + 1, close)]);
+      rest = rest.slice(close + 3);
+    }
+    return out.map(function (chunk) {
+      if (chunk[0] === 'code') {
+        return '<pre><code>' + escapeHtml(chunk[1]) + '</code></pre>';
+      }
+      // Split on double-newline paragraphs.
+      var paragraphs = chunk[1].split(/\n{2,}/);
+      return paragraphs
+        .filter(function (p) { return p.length > 0; })
+        .map(function (p) { return '<p>' + renderInline(p) + '</p>'; })
+        .join('');
+    }).join('');
+  }
+
+  global.renderMarkdown = renderMarkdown;
+})(window);

data/examples/chatbot/assets/style.css

@@ -0,0 +1,215 @@
+/* tep chatbot — Phase C: sidebar + chat panel layout. ~200 lines,
+ * vanilla CSS, no framework. */
+
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  height: 100%;
+  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: #f7f7f8;
+  color: #111;
+}
+
+/* ---------------- auth pages ---------------- */
+.auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.auth-card {
+  width: 360px;
+  background: #fff;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
+}
+.auth-card h1     { margin: 0 0 1rem; font-size: 1.25rem; }
+.auth-card .hint  { font-size: 0.9rem; color: #666; margin: 0 0 1rem; }
+.auth-card .error {
+  background: #fee; border: 1px solid #fcc; color: #c33;
+  padding: 0.5rem 0.75rem; border-radius: 6px; margin: 0 0 1rem;
+  font-size: 0.9rem;
+}
+.auth-card label  { display: block; margin: 0 0 1rem; font-size: 0.9rem; color: #444; }
+.auth-card input  {
+  display: block; width: 100%; margin-top: 0.25rem;
+  padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; font: inherit;
+}
+.auth-card button {
+  width: 100%; padding: 0.6rem; background: #111; color: #fff;
+  border: none; border-radius: 6px; font: inherit; cursor: pointer;
+}
+.auth-card button:hover { background: #333; }
+
+/* ---------------- app layout: sidebar + main ---------------- */
+.app {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  height: 100vh;
+}
+
+/* ---- sidebar ---- */
+.sidebar {
+  background: #1f1f23;
+  color: #ddd;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.sidebar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid #2c2c30;
+}
+.sidebar-head strong { color: #fff; font-size: 1rem; }
+.sidebar-head button {
+  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.7rem;
+  background: #2c2c30; color: #ddd;
+  border: 1px solid #3a3a3f; border-radius: 6px; cursor: pointer;
+}
+.sidebar-head button:hover { background: #38383d; color: #fff; }
+
+.conv-list {
+  list-style: none; margin: 0; padding: 0.5rem;
+  flex: 1; overflow-y: auto;
+}
+.conv-list li {
+  padding: 0.5rem 0.75rem; margin-bottom: 0.25rem;
+  border-radius: 6px; cursor: pointer;
+  font-size: 0.9rem; color: #ccc;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.conv-list li:hover    { background: #2c2c30; color: #fff; }
+.conv-list li.active   { background: #3a3a3f; color: #fff; }
+.conv-list li.untitled { color: #888; font-style: italic; }
+
+.sidebar-foot {
+  padding: 1rem; border-top: 1px solid #2c2c30;
+}
+.logout-form { margin: 0; }
+.logout-form button {
+  width: 100%; font: inherit; font-size: 0.85rem; padding: 0.4rem;
+  background: transparent; border: 1px solid #3a3a3f; color: #ddd;
+  border-radius: 6px; cursor: pointer;
+}
+.logout-form button:hover { background: #2c2c30; color: #fff; }
+
+/* ---- chat main ---- */
+#chat {
+  display: flex; flex-direction: column;
+  height: 100vh; overflow: hidden;
+}
+.topbar {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: #fff; border-bottom: 1px solid #e5e5e5;
+  font-size: 0.85rem; color: #666;
+}
+.topbar .model   { font-weight: 600; color: #333; }
+.topbar .backend { font-family: ui-monospace, monospace; font-size: 0.75rem; }
+
+.messages {
+  list-style: none; margin: 0; padding: 1rem;
+  flex: 1; overflow-y: auto;
+  max-width: 760px; width: 100%;
+  margin-left: auto; margin-right: auto;
+}
+
+.msg {
+  margin: 0 0 1rem; padding: 0.75rem 1rem;
+  border-radius: 12px; max-width: 85%;
+  white-space: pre-wrap; word-wrap: break-word;
+}
+.msg.user      { background: #d8e9fb; margin-left: auto; }
+.msg.assistant { background: #fff; border: 1px solid #e5e5e5; }
+.msg.error     { background: #fee; color: #c33; border: 1px solid #fcc; }
+
+.msg.assistant p              { margin: 0 0 0.5rem; }
+.msg.assistant p:last-child   { margin-bottom: 0; }
+.msg.assistant code           { background: #f3f3f3; padding: 0.05em 0.3em; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.9em; }
+.msg.assistant pre            { background: #f3f3f3; padding: 0.75rem; border-radius: 6px; overflow-x: auto; }
+.msg.assistant pre code       { background: transparent; padding: 0; }
+.msg.assistant a              { color: #0366d6; }
+
+.composer {
+  display: flex; gap: 0.5rem; align-items: flex-end;
+  padding: 1rem; border-top: 1px solid #e5e5e5; background: #fafafa;
+  max-width: 760px; width: 100%; margin: 0 auto;
+}
+.composer textarea {
+  flex: 1; padding: 0.6rem; border: 1px solid #ccc; border-radius: 8px;
+  font: inherit; resize: vertical;
+}
+.composer button {
+  padding: 0.6rem 1.2rem; background: #111; color: #fff;
+  border: none; border-radius: 8px; font: inherit; cursor: pointer;
+}
+.composer button:disabled { background: #888; cursor: wait; }
+
+.status {
+  margin: 0 1rem 0.5rem; font-size: 0.85rem; color: #888;
+  min-height: 1.5em;
+}
+
+/* ---- compare page ---- */
+.back-link {
+  font-size: 0.85rem; color: #ccc; text-decoration: none;
+  padding: 0.3rem 0.6rem; border: 1px solid #3a3a3f; border-radius: 6px;
+}
+.back-link:hover { background: #2c2c30; color: #fff; }
+.sidebar-section { padding: 0.5rem 1rem; font-size: 0.75rem;
+                   text-transform: uppercase; letter-spacing: 0.05em;
+                   color: #777; }
+.sidebar-blurb { padding: 0 1rem; font-size: 0.85rem; color: #aaa;
+                 line-height: 1.4; }
+.sidebar-blurb code { background: #2c2c30; padding: 0 0.2em;
+                      border-radius: 3px; }
+
+#compare {
+  display: flex; flex-direction: column;
+  height: 100vh; overflow: hidden;
+}
+.compare-prompt {
+  display: flex; gap: 0.5rem; padding: 1rem;
+  background: #fff; border-bottom: 1px solid #e5e5e5;
+}
+.compare-prompt textarea {
+  flex: 1; padding: 0.6rem; border: 1px solid #ccc; border-radius: 8px;
+  font: inherit; resize: vertical;
+}
+.compare-prompt button {
+  padding: 0.6rem 1.2rem; background: #111; color: #fff;
+  border: none; border-radius: 8px; font: inherit; cursor: pointer;
+}
+.compare-prompt button:disabled { background: #888; cursor: wait; }
+
+.compare-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem; padding: 1rem; flex: 1; overflow-y: auto;
+}
+.compare-card {
+  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
+  display: flex; flex-direction: column; max-height: 100%;
+}
+.card-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e5e5;
+}
+.card-head strong { font-size: 0.9rem; }
+.card-backend { font-family: ui-monospace, monospace;
+                font-size: 0.7rem; color: #666; }
+.card-meta { padding: 0.25rem 0.75rem; font-size: 0.75rem; color: #888; }
+.card-body { padding: 0.75rem; flex: 1; overflow-y: auto;
+             white-space: pre-wrap; word-wrap: break-word;
+             font-size: 0.9rem; }
+.card-body p              { margin: 0 0 0.5rem; }
+.card-body p:last-child   { margin-bottom: 0; }
+.card-body code           { background: #f3f3f3; padding: 0.05em 0.3em;
+                            border-radius: 3px; font-family: ui-monospace, monospace;
+                            font-size: 0.85em; }
+.card-body pre            { background: #f3f3f3; padding: 0.5rem;
+                            border-radius: 4px; overflow-x: auto; }
+.card-empty { color: #aaa; }

data/examples/chatbot/schema.sql

@@ -0,0 +1,25 @@
+-- app_config: single-row k/v store. Holds password_hash (set on
+-- first boot via /setup) and any future per-install settings.
+CREATE TABLE IF NOT EXISTS app_config (
+  k TEXT PRIMARY KEY,
+  v TEXT
+);
+
+-- conversations + messages: the chat history. Phase A uses one
+-- conversation per database (the first row), so the sidebar UI
+-- can stay deferred until Phase C without changing the schema.
+CREATE TABLE IF NOT EXISTS conversations (
+  id         INTEGER PRIMARY KEY AUTOINCREMENT,
+  title      TEXT,
+  created_at INTEGER
+);
+
+CREATE TABLE IF NOT EXISTS messages (
+  id              INTEGER PRIMARY KEY AUTOINCREMENT,
+  conversation_id INTEGER NOT NULL,
+  role            TEXT NOT NULL,    -- "user" | "assistant" | "system"
+  content         TEXT NOT NULL,
+  created_at      INTEGER NOT NULL
+);
+
+CREATE INDEX IF NOT EXISTS messages_by_conv ON messages (conversation_id, id);