tinywebui 0.1.0

package/public/core/access.js

@@ -0,0 +1,42 @@
+/**
+ * What the signed-in person may use, from /api/auth/me. The server enforces
+ * every feature on its own routes; this only keeps the UI from offering
+ * what would be refused. Hidden, not greyed out: a chat-only user should see
+ * a chat app, not a settings app with the settings locked.
+ */
+import { $ } from './dom.js';
+import { FEATURE } from '../shared/features.js';
+import { api } from './api.js';
+
+let me = { features: [], models: '*' };
+let features = new Set();
+
+export const can = (feature) => features.has(feature);
+export const whoami = () => me;
+
+// Nav items and controls that exist only for one feature.
+const GATED = {
+  [FEATURE.SETTINGS]: ['toggle-settings'],
+  [FEATURE.MCP]: ['toggle-mcp'],
+  [FEATURE.AUTOMATIONS]: ['toggle-automations'],
+  [FEATURE.STATISTICS]: ['toggle-statistics'],
+  [FEATURE.ADMIN]: ['toggle-admin'],
+  [FEATURE.FOLDERS]: ['newFolder']
+};
+
+export async function loadAccess() {
+  try { me = await api.get('/api/auth/me'); } catch { /* offline: show nothing extra */ }
+  features = new Set(me.features || []);
+  for (const [feature, ids] of Object.entries(GATED)) {
+    for (const id of ids) { const node = $(id); if (node) node.hidden = !can(feature); }
+  }
+  const search = $('chatSearch')?.closest('.search-row');
+  if (search) search.hidden = !can(FEATURE.SEARCH);
+  // The + button opens attach and tools; with neither there is nothing in it.
+  $('attach').hidden = !(can(FEATURE.ATTACHMENTS) || can(FEATURE.IMAGES) || can(FEATURE.TOOLS));
+  // The model pill still says which model answers; it just stops being a menu.
+  const pill = $('modelBtn');
+  pill.disabled = !can(FEATURE.MODEL_PICKER);
+  pill.classList.toggle('static', !can(FEATURE.MODEL_PICKER));
+  return me;
+}

package/public/core/api.js

@@ -0,0 +1,27 @@
+/**
+ * The page's one way to call the JSON API. A non-2xx reply throws an Error
+ * carrying the server's `error` text (or the bare status), plus `.status` for
+ * the few callers that treat a particular code as fine.
+ *
+ * Streaming endpoints (/api/chat, /api/chats/:id/stream) are read as streams
+ * and still use fetch directly.
+ */
+
+async function request(method, url, body, { signal } = {}) {
+  const init = { method, signal };
+  if (body !== undefined) {
+    init.headers = { 'content-type': 'application/json' };
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(url, init);
+  const out = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(out.error || String(res.status)), { status: res.status });
+  return out;
+}
+
+export const api = {
+  get: (url, opts) => request('GET', url, undefined, opts),
+  post: (url, body, opts) => request('POST', url, body, opts),
+  patch: (url, body, opts) => request('PATCH', url, body, opts),
+  del: (url, opts) => request('DELETE', url, undefined, opts)
+};

package/public/core/dom.js

@@ -0,0 +1,13 @@
+/** Tiny DOM helpers shared by every module. */
+
+export const $ = (id) => document.getElementById(id);
+export const el = (tag, cls) => { const n = document.createElement(tag); if (cls) n.className = cls; return n; };
+export const num = (v) => (v.trim() === '' ? null : Number(v));
+
+/** "Install uv" for a server whose launcher is missing (`install` from /api/tools). */
+export const installLink = ({ name, url }) => Object.assign(el('a', 'install-link'), {
+  textContent: `Install ${name}`,
+  href: /^https:\/\//.test(url) ? url : '#',
+  target: '_blank',
+  rel: 'noopener noreferrer'
+});

package/public/core/id.js

@@ -0,0 +1,7 @@
+/**
+ * A random id for things the page names before the server has seen them (a
+ * new chat, a queued message). randomUUID needs a secure context (https or
+ * localhost); getRandomValues works on plain-http LAN installs too.
+ */
+export const newId = () => crypto.randomUUID?.()
+  ?? [...crypto.getRandomValues(new Uint8Array(16))].map((b) => b.toString(16).padStart(2, '0')).join('');

package/public/core/md.js

@@ -0,0 +1,131 @@
+// The page's only producers of HTML from outside text. A small, dependency-free
+// Markdown renderer that covers what chat models actually emit -- headings,
+// emphasis, code, lists, tables, quotes, links -- and nothing else, plus the
+// search-snippet highlighter. Everything is HTML-escaped before any tag is
+// produced, so model output can never inject markup.
+
+const esc = (s) => s.replace(/[&<>"']/g, (c) => (
+  { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+));
+
+// A private-use character: stands in for a stashed span while the inline rules run.
+const MARK = '\uE000';
+
+function inline(src) {
+  // A MARK typed into the text would otherwise read as a reference to a stash slot.
+  let out = esc(src).replaceAll(MARK, '');
+  const spans = [];
+  const stash = (html) => `${MARK}${spans.push(html) - 1}${MARK}`;
+
+  // Code spans first: nothing inside them should be interpreted further.
+  out = out.replace(/`([^`\n]+)`/g, (_, code) => stash(`<code>${code}</code>`));
+
+  // Only http(s)/mailto/anchor/same-site links become anchors; anything else
+  // (javascript:, data:, a protocol-relative //host) degrades to its link text.
+  out = out.replace(/\[([^\]]+)\]\(([^)\s]+)[^)]*\)/g, (_, text, href) =>
+    /^(https?:|mailto:|#|\/(?!\/))/i.test(href)
+      ? stash(`<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`)
+      : text);
+  out = out.replace(/(^|[\s(])(https?:\/\/[^\s<)]+)/g, (_, pre, href) =>
+    pre + stash(`<a href="${href}" target="_blank" rel="noopener noreferrer">${href}</a>`));
+
+  out = out
+    .replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|\W)\*([^*\n]+)\*(?=\W|$)/g, '$1<em>$2</em>')
+    .replace(/(^|\W)_([^_\n]+)_(?=\W|$)/g, '$1<em>$2</em>')
+    .replace(/~~([^~]+)~~/g, '<del>$1</del>');
+
+  return out.replace(new RegExp(`${MARK}(\\d+)${MARK}`, 'g'), (_, i) => spans[i]);
+}
+
+const cells = (line) => line.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+
+export function renderMarkdown(src) {
+  const lines = String(src).replace(/\r\n/g, '\n').split('\n');
+  const html = [];
+  let i = 0;
+
+  const listBlock = (ordered) => {
+    const items = [];
+    const marker = ordered ? /^\s*\d+[.)]\s+(.*)$/ : /^\s*[-*+]\s+(.*)$/;
+    while (i < lines.length) {
+      const m = lines[i].match(marker);
+      if (m) { items.push(m[1]); i++; continue; }
+      // A wrapped continuation line belongs to the item above it.
+      if (items.length && /^\s+\S/.test(lines[i])) {
+        items[items.length - 1] += ' ' + lines[i].trim();
+        i++;
+        continue;
+      }
+      break;
+    }
+    const tag = ordered ? 'ol' : 'ul';
+    html.push(`<${tag}>${items.map((t) => `<li>${inline(t)}</li>`).join('')}</${tag}>`);
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (/^\s*```/.test(line)) {
+      const lang = line.replace(/^\s*```/, '').trim();
+      const body = [];
+      i++;
+      while (i < lines.length && !/^\s*```/.test(lines[i])) body.push(lines[i++]);
+      i++; // closing fence, or the end of a stream still being written
+      html.push(`<pre data-lang="${esc(lang)}"><code>${esc(body.join('\n'))}</code></pre>`);
+      continue;
+    }
+
+    if (!line.trim()) { i++; continue; }
+
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      html.push(`<h${heading[1].length}>${inline(heading[2])}</h${heading[1].length}>`);
+      i++;
+      continue;
+    }
+
+    if (/^\s*([-*_])\s*\1\s*\1[\s\-*_]*$/.test(line)) { html.push('<hr>'); i++; continue; }
+
+    if (/^\s*>/.test(line)) {
+      const body = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ''));
+      html.push(`<blockquote>${renderMarkdown(body.join('\n'))}</blockquote>`);
+      continue;
+    }
+
+    if (/^\s*[-*+]\s+/.test(line)) { listBlock(false); continue; }
+    if (/^\s*\d+[.)]\s+/.test(line)) { listBlock(true); continue; }
+
+    if (line.includes('|') && /^\s*\|?[\s:|-]+\|[\s:|-]*$/.test(lines[i + 1] || '')) {
+      const head = cells(line);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].includes('|')) rows.push(cells(lines[i++]));
+      html.push(
+        `<table><thead><tr>${head.map((c) => `<th>${inline(c)}</th>`).join('')}</tr></thead>` +
+        `<tbody>${rows.map((r) => `<tr>${r.map((c) => `<td>${inline(c)}</td>`).join('')}</tr>`).join('')}</tbody></table>`
+      );
+      continue;
+    }
+
+    const para = [];
+    while (i < lines.length && lines[i].trim() && !/^\s*(#{1,6}\s|>|```|[-*+]\s|\d+[.)]\s)/.test(lines[i])) {
+      para.push(lines[i++]);
+    }
+    html.push(`<p>${inline(para.join('\n')).replace(/\n/g, '<br>')}</p>`);
+  }
+
+  return html.join('\n');
+}
+
+/** Turns the search index's ‹...› markers into <mark>, escaping everything else. */
+export function markSnippet(raw) {
+  return String(raw).split('‹').map((chunk, i) => {
+    if (i === 0) return esc(chunk);
+    const at = chunk.indexOf('›');
+    if (at === -1) return esc('‹' + chunk); // an unmatched marker -- show it plainly rather than eat it
+    return `<mark>${esc(chunk.slice(0, at))}</mark>${esc(chunk.slice(at + 1))}`;
+  }).join('');
+}

package/public/core/state.js

@@ -0,0 +1,31 @@
+/**
+ * State shared across the split-up UI modules.
+ *
+ * A single mutable object rather than several exported `let`s: every module
+ * that needs to read or write `state.chat` (or `.busy`, `.viewCtrl`, ...) just
+ * imports this one object, and since its identity never changes, plain
+ * property assignment from any module is visible to all the others -- no
+ * setter functions or live-binding subtleties to keep track of.
+ */
+export const state = {
+  chat: null,       // { id, title } -- the conversation currently on screen
+  busy: false,      // a turn is streaming into the view right now
+  // The fetch reading a run's stream belongs to whichever view started it.
+  // Switching chats aborts it -- see leaveView() in chat.js.
+  viewCtrl: null,
+  chats: [],        // the sidebar's chronological chat list
+  queue: [],        // input queued on the running turn: [{id, kind, content}]
+  folders: [],      // every known folder name, including empty ones
+
+  // Uploaded before the message that references them is sent, so a slow
+  // upload doesn't block typing. Cleared once that turn is sent.
+  pendingAttachments: [], // [{id, filename, char_len, pending}]
+
+  // Every document ever attached to the chat currently open, shown in the
+  // artifacts strip above the transcript. Not the same list as
+  // pendingAttachments, which is only what hasn't been sent yet.
+  chatDocuments: [],      // [{id, filename, char_len}]
+  // Every image ever attached to the chat currently open, shown in the same
+  // strip. Derived from message history rather than stored separately.
+  chatImages: []          // [{filename, mime, data}]
+};

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 300 300"
+     role="img"
+     aria-labelledby="title description">
+  <title id="title">TinyWebUI mark</title>
+  <desc id="description">TinyWebUI bunny mark with centered chat bubble.</desc>
+  <path d="M 119.38 40.83 L 119.10 39.79 L 118.77 38.76 L 118.39 37.75 L 117.96 36.76 L 117.49 35.79 L 116.96 34.84 L 116.39 33.93 L 115.78 33.04 L 115.12 32.18 L 114.42 31.36 L 113.68 30.57 L 112.91 29.82 L 112.10 29.11 L 111.25 28.44 L 110.37 27.81 L 109.46 27.22 L 108.53 26.68 L 107.57 26.19 L 106.58 25.74 L 105.58 25.35 L 104.56 25.00 L 103.52 24.70 L 102.47 24.46 L 101.41 24.27 L 100.34 24.12 L 99.26 24.04 L 98.18 24.00 L 97.10 24.02 L 96.02 24.09 L 94.95 24.21 L 93.88 24.39 L 92.83 24.62 L 91.79 24.90 L 90.76 25.23 L 89.75 25.61 L 88.76 26.04 L 87.79 26.51 L 86.84 27.04 L 85.93 27.61 L 85.04 28.22 L 84.18 28.88 L 83.36 29.58 L 82.57 30.32 L 81.82 31.09 L 81.11 31.90 L 80.44 32.75 L 79.81 33.63 L 79.22 34.54 L 78.68 35.47 L 78.19 36.43 L 77.74 37.42 L 77.35 38.42 L 77.00 39.44 L 76.70 40.48 L 76.46 41.53 L 76.27 42.59 L 76.12 43.66 L 76.04 44.74 L 76.00 45.82 L 76.02 46.90 L 76.09 47.98 L 76.21 49.05 L 85.40 114.68 L 85.24 114.74 L 82.03 116.12 L 78.92 117.65 L 75.93 119.36 L 73.11 121.26 L 70.49 123.36 L 68.09 125.66 L 65.94 128.13 L 64.04 130.75 L 62.37 133.50 L 60.92 136.34 L 59.66 139.24 L 58.54 142.17 L 57.52 145.10 L 56.55 148.00 L 55.59 150.87 L 54.60 153.70 L 53.55 156.49 L 52.41 159.25 L 51.19 161.98 L 49.89 164.72 L 48.53 167.47 L 47.15 170.24 L 45.80 173.07 L 44.52 175.95 L 43.38 178.89 L 42.42 181.88 L 41.70 184.92 L 41.26 188.00 L 41.12 191.09 L 41.29 194.18 L 41.78 197.25 L 42.57 200.28 L 43.63 203.24 L 44.92 206.14 L 46.39 208.97 L 47.99 211.72 L 49.65 214.42 L 51.34 217.07 L 53.00 219.69 L 54.60 222.30 L 56.13 224.92 L 57.57 227.56 L 58.93 230.25 L 60.24 232.98 L 61.52 235.75 L 62.81 238.56 L 64.15 241.39 L 65.60 244.21 L 67.18 246.99 L 68.95 249.69 L 70.92 252.29 L 73.11 254.74 L 75.53 257.01 L 78.17 259.09 L 81.01 260.96 L 84.04 262.61 L 87.20 264.06 L 90.48 265.31 L 93.82 266.41 L 97.19 267.38 L 100.57 268.27 L 103.92 269.11 L 107.22 269.94 L 110.48 270.80 L 113.70 271.71 L 116.87 272.70 L 120.03 273.76 L 123.17 274.89 L 126.34 276.07 L 129.54 277.27 L 132.80 278.44 L 136.11 279.55 L 139.50 280.54 L 142.95 281.37 L 146.45 281.99 L 150.00 282.38 L 153.56 282.50 L 157.13 282.35 L 160.66 281.93 L 164.14 281.24 L 167.56 280.32 L 170.90 279.20 L 174.16 277.92 L 177.33 276.54 L 180.44 275.10 L 183.49 273.63 L 186.51 272.19 L 189.52 270.80 L 192.53 269.47 L 195.58 268.22 L 198.68 267.04 L 201.82 265.90 L 205.02 264.79 L 208.26 263.68 L 211.52 262.51 L 214.76 261.26 L 217.97 259.88 L 221.08 258.35 L 224.07 256.64 L 226.89 254.74 L 229.51 252.64 L 231.91 250.34 L 234.06 247.87 L 235.96 245.25 L 237.63 242.50 L 239.08 239.66 L 240.34 236.76 L 241.46 233.83 L 242.48 230.90 L 243.45 228.00 L 244.41 225.13 L 245.40 222.30 L 246.45 219.51 L 247.59 216.75 L 248.81 214.02 L 250.11 211.28 L 251.47 208.53 L 252.85 205.76 L 254.20 202.93 L 255.48 200.05 L 256.62 197.11 L 257.58 194.12 L 258.30 191.08 L 258.74 188.00 L 258.88 184.91 L 258.71 181.82 L 258.22 178.75 L 257.43 175.72 L 256.37 172.76 L 255.08 169.86 L 253.61 167.03 L 252.01 164.28 L 250.35 161.58 L 248.66 158.93 L 247.00 156.31 L 245.40 153.70 L 243.87 151.08 L 242.43 148.44 L 241.07 145.75 L 239.76 143.02 L 238.48 140.25 L 237.19 137.44 L 235.85 134.61 L 234.40 131.79 L 232.82 129.01 L 231.05 126.31 L 229.08 123.71 L 226.89 121.26 L 224.47 118.99 L 221.83 116.91 L 218.99 115.04 L 215.96 113.39 L 214.85 112.88 L 223.79 49.05 L 223.91 47.98 L 223.98 46.90 L 224.00 45.82 L 223.96 44.74 L 223.88 43.66 L 223.73 42.59 L 223.54 41.53 L 223.30 40.48 L 223.00 39.44 L 222.65 38.42 L 222.26 37.42 L 221.81 36.43 L 221.32 35.47 L 220.78 34.54 L 220.19 33.63 L 219.56 32.75 L 218.89 31.90 L 218.18 31.09 L 217.43 30.32 L 216.64 29.58 L 215.82 28.88 L 214.96 28.22 L 214.07 27.61 L 213.16 27.04 L 212.21 26.51 L 211.24 26.04 L 210.25 25.61 L 209.24 25.23 L 208.21 24.90 L 207.17 24.62 L 206.12 24.39 L 205.05 24.21 L 203.98 24.09 L 202.90 24.02 L 201.82 24.00 L 200.74 24.04 L 199.66 24.12 L 198.59 24.27 L 197.53 24.46 L 196.48 24.70 L 195.44 25.00 L 194.42 25.35 L 193.42 25.74 L 192.43 26.19 L 191.47 26.68 L 190.54 27.22 L 189.63 27.81 L 188.75 28.44 L 187.90 29.11 L 187.09 29.82 L 186.32 30.57 L 185.58 31.36 L 184.88 32.18 L 184.22 33.04 L 183.61 33.93 L 183.04 34.84 L 182.51 35.79 L 182.04 36.76 L 181.61 37.75 L 181.23 38.76 L 180.90 39.79 L 180.62 40.83 L 180.39 41.88 L 180.21 42.95 L 172.31 99.42 L 170.46 98.73 L 167.20 97.56 L 163.89 96.45 L 160.50 95.46 L 157.05 94.63 L 153.55 94.01 L 150.00 93.62 L 146.44 93.50 L 142.87 93.65 L 139.34 94.07 L 135.86 94.76 L 132.44 95.68 L 129.10 96.80 L 127.42 97.46 L 119.79 42.95 L 119.61 41.88 L 119.38 40.83 Z M 106.60 241.86 L 106.62 241.62 L 106.66 241.38 L 109.05 228.23 L 109.10 227.92 L 109.12 227.68 L 109.14 227.43 L 109.14 227.19 L 109.13 226.94 L 109.11 226.69 L 109.07 226.45 L 109.02 226.21 L 108.96 225.97 L 108.89 225.73 L 108.81 225.50 L 108.72 225.27 L 108.61 225.04 L 108.50 224.83 L 108.37 224.61 L 108.24 224.41 L 108.09 224.21 L 107.93 224.02 L 107.77 223.83 L 107.59 223.66 L 107.41 223.49 L 107.22 223.34 L 107.02 223.19 L 106.71 222.98 L 106.71 222.98 L 106.57 222.88 L 105.80 222.35 L 105.61 222.20 L 104.87 221.63 L 104.68 221.47 L 103.98 220.86 L 103.79 220.70 L 103.12 220.06 L 102.94 219.88 L 102.30 219.21 L 102.14 219.02 L 101.53 218.32 L 101.37 218.13 L 100.80 217.39 L 100.65 217.20 L 100.12 216.43 L 99.98 216.23 L 99.48 215.44 L 99.35 215.23 L 98.89 214.42 L 98.78 214.20 L 98.36 213.37 L 98.25 213.15 L 97.88 212.30 L 97.78 212.07 L 97.45 211.20 L 97.36 210.97 L 97.07 210.08 L 97.00 209.85 L 96.75 208.95 L 96.69 208.71 L 96.49 207.80 L 96.44 207.56 L 96.28 206.64 L 96.24 206.40 L 96.13 205.47 L 96.11 205.23 L 96.04 204.30 L 96.03 204.05 L 96.00 203.06 L 96.00 202.94 L 96.00 167.06 L 96.00 166.94 L 96.03 165.95 L 96.04 165.70 L 96.11 164.77 L 96.13 164.53 L 96.24 163.60 L 96.28 163.36 L 96.44 162.44 L 96.49 162.20 L 96.69 161.29 L 96.75 161.05 L 97.00 160.15 L 97.07 159.92 L 97.36 159.03 L 97.45 158.80 L 97.78 157.93 L 97.88 157.70 L 98.25 156.85 L 98.36 156.63 L 98.78 155.80 L 98.89 155.58 L 99.35 154.77 L 99.48 154.56 L 99.98 153.77 L 100.12 153.57 L 100.65 152.80 L 100.80 152.61 L 101.37 151.87 L 101.53 151.68 L 102.14 150.98 L 102.30 150.79 L 102.94 150.12 L 103.12 149.94 L 103.79 149.30 L 103.98 149.14 L 104.68 148.53 L 104.87 148.37 L 105.61 147.80 L 105.80 147.65 L 106.57 147.12 L 106.77 146.98 L 107.56 146.48 L 107.77 146.35 L 108.58 145.89 L 108.80 145.78 L 109.63 145.36 L 109.85 145.25 L 110.70 144.88 L 110.93 144.78 L 111.80 144.45 L 112.03 144.36 L 112.92 144.07 L 113.15 144.00 L 114.05 143.75 L 114.29 143.69 L 115.20 143.49 L 115.44 143.44 L 116.36 143.28 L 116.60 143.24 L 117.53 143.13 L 117.77 143.11 L 118.70 143.04 L 118.95 143.03 L 119.94 143.00 L 120.06 143.00 L 179.94 143.00 L 180.06 143.00 L 181.05 143.03 L 181.30 143.04 L 182.23 143.11 L 182.47 143.13 L 183.40 143.24 L 183.64 143.28 L 184.56 143.44 L 184.80 143.49 L 185.71 143.69 L 185.95 143.75 L 186.85 144.00 L 187.08 144.07 L 187.97 144.36 L 188.20 144.45 L 189.07 144.78 L 189.30 144.88 L 190.15 145.25 L 190.37 145.36 L 191.20 145.78 L 191.42 145.89 L 192.23 146.35 L 192.44 146.48 L 193.23 146.98 L 193.43 147.12 L 194.20 147.65 L 194.39 147.80 L 195.13 148.37 L 195.32 148.53 L 196.02 149.14 L 196.21 149.30 L 196.88 149.94 L 197.06 150.12 L 197.70 150.79 L 197.86 150.98 L 198.47 151.68 L 198.63 151.87 L 199.20 152.61 L 199.35 152.80 L 199.88 153.57 L 200.02 153.77 L 200.52 154.56 L 200.65 154.77 L 201.11 155.58 L 201.22 155.80 L 201.64 156.63 L 201.75 156.85 L 202.12 157.70 L 202.22 157.93 L 202.55 158.80 L 202.64 159.03 L 202.93 159.92 L 203.00 160.15 L 203.25 161.05 L 203.31 161.29 L 203.51 162.20 L 203.56 162.44 L 203.72 163.36 L 203.76 163.60 L 203.87 164.53 L 203.89 164.77 L 203.96 165.70 L 203.97 165.95 L 204.00 166.94 L 204.00 167.06 L 204.00 202.94 L 204.00 203.06 L 203.97 204.05 L 203.96 204.30 L 203.89 205.23 L 203.87 205.47 L 203.76 206.40 L 203.72 206.64 L 203.56 207.56 L 203.51 207.80 L 203.31 208.71 L 203.25 208.95 L 203.00 209.85 L 202.93 210.08 L 202.64 210.97 L 202.55 211.20 L 202.22 212.07 L 202.12 212.30 L 201.75 213.15 L 201.64 213.37 L 201.22 214.20 L 201.11 214.42 L 200.65 215.23 L 200.52 215.44 L 200.02 216.23 L 199.88 216.43 L 199.35 217.20 L 199.20 217.39 L 198.63 218.13 L 198.47 218.32 L 197.86 219.02 L 197.70 219.21 L 197.06 219.88 L 196.88 220.06 L 196.21 220.70 L 196.02 220.86 L 195.32 221.47 L 195.13 221.63 L 194.39 222.20 L 194.20 222.35 L 193.43 222.88 L 193.23 223.02 L 192.44 223.52 L 192.23 223.65 L 191.42 224.11 L 191.20 224.22 L 190.37 224.64 L 190.15 224.75 L 189.30 225.12 L 189.07 225.22 L 188.20 225.55 L 187.97 225.64 L 187.08 225.93 L 186.85 226.00 L 185.95 226.25 L 185.71 226.31 L 184.80 226.51 L 184.56 226.56 L 183.64 226.72 L 183.40 226.76 L 182.47 226.87 L 182.23 226.89 L 181.30 226.96 L 181.05 226.97 L 180.06 227.00 L 179.94 227.00 L 137.64 227.00 L 137.33 227.01 L 137.09 227.03 L 136.84 227.06 L 136.60 227.10 L 136.36 227.15 L 136.12 227.22 L 135.88 227.30 L 135.65 227.39 L 135.43 227.49 L 135.21 227.60 L 134.99 227.72 L 134.79 227.86 L 134.58 228.00 L 134.39 228.15 L 134.16 228.36 L 114.96 245.96 L 114.77 246.12 L 114.58 246.27 L 114.38 246.41 L 114.18 246.54 L 113.96 246.66 L 113.75 246.78 L 113.52 246.88 L 113.30 246.97 L 113.07 247.04 L 112.83 247.11 L 112.59 247.17 L 112.35 247.21 L 112.11 247.24 L 111.87 247.26 L 111.62 247.27 L 111.38 247.27 L 111.13 247.25 L 110.89 247.22 L 110.65 247.18 L 110.41 247.13 L 110.18 247.07 L 109.94 247.00 L 109.71 246.91 L 109.49 246.81 L 109.27 246.71 L 109.06 246.59 L 108.85 246.46 L 108.65 246.32 L 108.45 246.17 L 108.27 246.02 L 108.09 245.85 L 107.92 245.67 L 107.75 245.49 L 107.60 245.30 L 107.46 245.10 L 107.32 244.90 L 107.20 244.69 L 107.09 244.47 L 106.99 244.25 L 106.89 244.02 L 106.81 243.79 L 106.75 243.56 L 106.69 243.32 L 106.64 243.08 L 106.61 242.84 L 106.59 242.59 L 106.58 242.35 L 106.58 242.10 L 106.60 241.86 Z M 123.00 158.00 L 122.41 158.01 L 121.82 158.06 L 121.24 158.13 L 120.66 158.23 L 120.08 158.36 L 119.52 158.52 L 118.96 158.70 L 118.41 158.91 L 117.87 159.15 L 117.34 159.42 L 116.83 159.71 L 116.33 160.02 L 115.85 160.36 L 115.39 160.72 L 114.94 161.11 L 114.51 161.51 L 114.11 161.94 L 113.72 162.39 L 113.36 162.85 L 113.02 163.33 L 112.71 163.83 L 112.42 164.34 L 112.15 164.87 L 111.91 165.41 L 111.70 165.96 L 111.52 166.52 L 111.36 167.08 L 111.23 167.66 L 111.13 168.24 L 111.06 168.82 L 111.01 169.41 L 111.00 170.00 L 111.00 200.00 L 111.01 200.59 L 111.06 201.18 L 111.13 201.76 L 111.23 202.34 L 111.36 202.92 L 111.52 203.48 L 111.70 204.04 L 111.91 204.59 L 112.15 205.13 L 112.42 205.66 L 112.71 206.17 L 113.02 206.67 L 113.36 207.15 L 113.72 207.61 L 114.11 208.06 L 114.51 208.49 L 114.94 208.89 L 115.39 209.28 L 115.85 209.64 L 116.33 209.98 L 116.83 210.29 L 117.34 210.58 L 117.87 210.85 L 118.41 211.09 L 118.96 211.30 L 119.52 211.48 L 120.08 211.64 L 120.66 211.77 L 121.24 211.87 L 121.82 211.94 L 122.41 211.99 L 123.00 212.00 L 177.00 212.00 L 177.59 211.99 L 178.18 211.94 L 178.76 211.87 L 179.34 211.77 L 179.92 211.64 L 180.48 211.48 L 181.04 211.30 L 181.59 211.09 L 182.13 210.85 L 182.66 210.58 L 183.17 210.29 L 183.67 209.98 L 184.15 209.64 L 184.61 209.28 L 185.06 208.89 L 185.49 208.49 L 185.89 208.06 L 186.28 207.61 L 186.64 207.15 L 186.98 206.67 L 187.29 206.17 L 187.58 205.66 L 187.85 205.13 L 188.09 204.59 L 188.30 204.04 L 188.48 203.48 L 188.64 202.92 L 188.77 202.34 L 188.87 201.76 L 188.94 201.18 L 188.99 200.59 L 189.00 200.00 L 189.00 170.00 L 188.99 169.41 L 188.94 168.82 L 188.87 168.24 L 188.77 167.66 L 188.64 167.08 L 188.48 166.52 L 188.30 165.96 L 188.09 165.41 L 187.85 164.87 L 187.58 164.34 L 187.29 163.83 L 186.98 163.33 L 186.64 162.85 L 186.28 162.39 L 185.89 161.94 L 185.49 161.51 L 185.06 161.11 L 184.61 160.72 L 184.15 160.36 L 183.67 160.02 L 183.17 159.71 L 182.66 159.42 L 182.13 159.15 L 181.59 158.91 L 181.04 158.70 L 180.48 158.52 L 179.92 158.36 L 179.34 158.23 L 178.76 158.13 L 178.18 158.06 L 177.59 158.01 L 177.00 158.00 L 123.00 158.00 Z M 134.99 184.61 L 135.00 185.00 L 134.99 185.39 L 134.96 185.78 L 134.91 186.17 L 134.85 186.56 L 134.76 186.94 L 134.66 187.32 L 134.53 187.70 L 134.39 188.06 L 134.23 188.42 L 134.06 188.77 L 133.86 189.11 L 133.65 189.44 L 133.43 189.77 L 133.18 190.08 L 132.93 190.37 L 132.66 190.66 L 132.37 190.93 L 132.08 191.18 L 131.77 191.43 L 131.44 191.65 L 131.11 191.86 L 130.77 192.06 L 130.42 192.23 L 130.06 192.39 L 129.70 192.53 L 129.32 192.66 L 128.94 192.76 L 128.56 192.85 L 128.17 192.91 L 127.78 192.96 L 127.39 192.99 L 127.00 193.00 L 126.61 192.99 L 126.22 192.96 L 125.83 192.91 L 125.44 192.85 L 125.06 192.76 L 124.68 192.66 L 124.30 192.53 L 123.94 192.39 L 123.58 192.23 L 123.23 192.06 L 122.89 191.86 L 122.56 191.65 L 122.23 191.43 L 121.92 191.18 L 121.63 190.93 L 121.34 190.66 L 121.07 190.37 L 120.82 190.08 L 120.57 189.77 L 120.35 189.44 L 120.14 189.11 L 119.94 188.77 L 119.77 188.42 L 119.61 188.06 L 119.47 187.70 L 119.34 187.32 L 119.24 186.94 L 119.15 186.56 L 119.09 186.17 L 119.04 185.78 L 119.01 185.39 L 119.00 185.00 L 119.01 184.61 L 119.04 184.22 L 119.09 183.83 L 119.15 183.44 L 119.24 183.06 L 119.34 182.68 L 119.47 182.30 L 119.61 181.94 L 119.77 181.58 L 119.94 181.23 L 120.14 180.89 L 120.35 180.56 L 120.57 180.23 L 120.82 179.92 L 121.07 179.63 L 121.34 179.34 L 121.63 179.07 L 121.92 178.82 L 122.23 178.57 L 122.56 178.35 L 122.89 178.14 L 123.23 177.94 L 123.58 177.77 L 123.94 177.61 L 124.30 177.47 L 124.68 177.34 L 125.06 177.24 L 125.44 177.15 L 125.83 177.09 L 126.22 177.04 L 126.61 177.01 L 127.00 177.00 L 127.39 177.01 L 127.78 177.04 L 128.17 177.09 L 128.56 177.15 L 128.94 177.24 L 129.32 177.34 L 129.70 177.47 L 130.06 177.61 L 130.42 177.77 L 130.77 177.94 L 131.11 178.14 L 131.44 178.35 L 131.77 178.57 L 132.08 178.82 L 132.37 179.07 L 132.66 179.34 L 132.93 179.63 L 133.18 179.92 L 133.43 180.23 L 133.65 180.56 L 133.86 180.89 L 134.06 181.23 L 134.23 181.58 L 134.39 181.94 L 134.53 182.30 L 134.66 182.68 L 134.76 183.06 L 134.85 183.44 L 134.91 183.83 L 134.96 184.22 L 134.99 184.61 Z M 157.99 184.61 L 158.00 185.00 L 157.99 185.39 L 157.96 185.78 L 157.91 186.17 L 157.85 186.56 L 157.76 186.94 L 157.66 187.32 L 157.53 187.70 L 157.39 188.06 L 157.23 188.42 L 157.06 188.77 L 156.86 189.11 L 156.65 189.44 L 156.43 189.77 L 156.18 190.08 L 155.93 190.37 L 155.66 190.66 L 155.37 190.93 L 155.08 191.18 L 154.77 191.43 L 154.44 191.65 L 154.11 191.86 L 153.77 192.06 L 153.42 192.23 L 153.06 192.39 L 152.70 192.53 L 152.32 192.66 L 151.94 192.76 L 151.56 192.85 L 151.17 192.91 L 150.78 192.96 L 150.39 192.99 L 150.00 193.00 L 149.61 192.99 L 149.22 192.96 L 148.83 192.91 L 148.44 192.85 L 148.06 192.76 L 147.68 192.66 L 147.30 192.53 L 146.94 192.39 L 146.58 192.23 L 146.23 192.06 L 145.89 191.86 L 145.56 191.65 L 145.23 191.43 L 144.92 191.18 L 144.63 190.93 L 144.34 190.66 L 144.07 190.37 L 143.82 190.08 L 143.57 189.77 L 143.35 189.44 L 143.14 189.11 L 142.94 188.77 L 142.77 188.42 L 142.61 188.06 L 142.47 187.70 L 142.34 187.32 L 142.24 186.94 L 142.15 186.56 L 142.09 186.17 L 142.04 185.78 L 142.01 185.39 L 142.00 185.00 L 142.01 184.61 L 142.04 184.22 L 142.09 183.83 L 142.15 183.44 L 142.24 183.06 L 142.34 182.68 L 142.47 182.30 L 142.61 181.94 L 142.77 181.58 L 142.94 181.23 L 143.14 180.89 L 143.35 180.56 L 143.57 180.23 L 143.82 179.92 L 144.07 179.63 L 144.34 179.34 L 144.63 179.07 L 144.92 178.82 L 145.23 178.57 L 145.56 178.35 L 145.89 178.14 L 146.23 177.94 L 146.58 177.77 L 146.94 177.61 L 147.30 177.47 L 147.68 177.34 L 148.06 177.24 L 148.44 177.15 L 148.83 177.09 L 149.22 177.04 L 149.61 177.01 L 150.00 177.00 L 150.39 177.01 L 150.78 177.04 L 151.17 177.09 L 151.56 177.15 L 151.94 177.24 L 152.32 177.34 L 152.70 177.47 L 153.06 177.61 L 153.42 177.77 L 153.77 177.94 L 154.11 178.14 L 154.44 178.35 L 154.77 178.57 L 155.08 178.82 L 155.37 179.07 L 155.66 179.34 L 155.93 179.63 L 156.18 179.92 L 156.43 180.23 L 156.65 180.56 L 156.86 180.89 L 157.06 181.23 L 157.23 181.58 L 157.39 181.94 L 157.53 182.30 L 157.66 182.68 L 157.76 183.06 L 157.85 183.44 L 157.91 183.83 L 157.96 184.22 L 157.99 184.61 Z M 180.99 184.61 L 181.00 185.00 L 180.99 185.39 L 180.96 185.78 L 180.91 186.17 L 180.85 186.56 L 180.76 186.94 L 180.66 187.32 L 180.53 187.70 L 180.39 188.06 L 180.23 188.42 L 180.06 188.77 L 179.86 189.11 L 179.65 189.44 L 179.43 189.77 L 179.18 190.08 L 178.93 190.37 L 178.66 190.66 L 178.37 190.93 L 178.08 191.18 L 177.77 191.43 L 177.44 191.65 L 177.11 191.86 L 176.77 192.06 L 176.42 192.23 L 176.06 192.39 L 175.70 192.53 L 175.32 192.66 L 174.94 192.76 L 174.56 192.85 L 174.17 192.91 L 173.78 192.96 L 173.39 192.99 L 173.00 193.00 L 172.61 192.99 L 172.22 192.96 L 171.83 192.91 L 171.44 192.85 L 171.06 192.76 L 170.68 192.66 L 170.30 192.53 L 169.94 192.39 L 169.58 192.23 L 169.23 192.06 L 168.89 191.86 L 168.56 191.65 L 168.23 191.43 L 167.92 191.18 L 167.63 190.93 L 167.34 190.66 L 167.07 190.37 L 166.82 190.08 L 166.57 189.77 L 166.35 189.44 L 166.14 189.11 L 165.94 188.77 L 165.77 188.42 L 165.61 188.06 L 165.47 187.70 L 165.34 187.32 L 165.24 186.94 L 165.15 186.56 L 165.09 186.17 L 165.04 185.78 L 165.01 185.39 L 165.00 185.00 L 165.01 184.61 L 165.04 184.22 L 165.09 183.83 L 165.15 183.44 L 165.24 183.06 L 165.34 182.68 L 165.47 182.30 L 165.61 181.94 L 165.77 181.58 L 165.94 181.23 L 166.14 180.89 L 166.35 180.56 L 166.57 180.23 L 166.82 179.92 L 167.07 179.63 L 167.34 179.34 L 167.63 179.07 L 167.92 178.82 L 168.23 178.57 L 168.56 178.35 L 168.89 178.14 L 169.23 177.94 L 169.58 177.77 L 169.94 177.61 L 170.30 177.47 L 170.68 177.34 L 171.06 177.24 L 171.44 177.15 L 171.83 177.09 L 172.22 177.04 L 172.61 177.01 L 173.00 177.00 L 173.39 177.01 L 173.78 177.04 L 174.17 177.09 L 174.56 177.15 L 174.94 177.24 L 175.32 177.34 L 175.70 177.47 L 176.06 177.61 L 176.42 177.77 L 176.77 177.94 L 177.11 178.14 L 177.44 178.35 L 177.77 178.57 L 178.08 178.82 L 178.37 179.07 L 178.66 179.34 L 178.93 179.63 L 179.18 179.92 L 179.43 180.23 L 179.65 180.56 L 179.86 180.89 L 180.06 181.23 L 180.23 181.58 L 180.39 181.94 L 180.53 182.30 L 180.66 182.68 L 180.76 183.06 L 180.85 183.44 L 180.91 183.83 L 180.96 184.22 L 180.99 184.61 Z" fill="#8C94A3" fill-rule="evenodd"/>
+</svg>

package/public/index.html

@@ -0,0 +1,261 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>TinyWebUI</title>
+<link rel="icon" href="favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<div id="shell">
+
+<div id="side-backdrop"></div>
+
+<aside id="side" aria-label="Chat history">
+  <div class="brand">
+    <button id="brandHome" class="brand-home" type="button" title="New chat" aria-label="TinyWebUI, start a new chat">
+      <img class="logo" src="favicon.svg" alt="" aria-hidden="true">
+      <span class="brand-name">TinyWebUI</span>
+    </button>
+    <button id="sideCollapse" class="icon-btn" type="button" aria-label="Hide sidebar" title="Hide sidebar"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></button>
+  </div>
+  <div class="side-scroll">
+  <nav class="nav">
+    <button id="new" class="nav-item" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.4 2.6a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg><span>New chat</span></button>
+    <div class="search-row nav-item">
+      <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input id="chatSearch" type="search" placeholder="Search" aria-label="Search chats" autocomplete="off" spellcheck="false">
+      <button id="chatSearchClear" class="x" type="button" aria-label="Clear search" hidden>×</button>
+    </div>
+    <button id="toggle-automations" class="nav-item" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4l2.5 1.5"/><path d="M19 3.5 21.5 6"/><path d="M5 3.5 2.5 6"/><circle cx="12" cy="13" r="8"/></svg><span>Automations</span></button>
+    <button id="toggle-mcp" class="nav-item" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg><span>MCP servers</span></button>
+    <button id="toggle-settings" class="nav-item" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg><span>Settings</span></button>
+    <button id="toggle-statistics" class="nav-item" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg><span>Statistics</span></button>
+    <button id="toggle-admin" class="nav-item" type="button" hidden><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span>Admin</span></button>
+    <button id="logout" class="nav-item" type="button" hidden><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg><span>Log out</span></button>
+  </nav>
+  <div class="side-label"><span>Recent conversations</span><button id="newFolder" class="icon-btn" type="button" aria-label="New folder" title="New folder"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M12 11v4M10 13h4"/></svg></button></div>
+  <div id="chats"></div>
+  </div>
+  <div id="side-resize" role="separator" aria-orientation="vertical" tabindex="0"
+       aria-label="Resize chat history" title="Drag to resize, double-click to reset"></div>
+</aside>
+
+<dialog id="organizeDialog" aria-labelledby="organizeTitle">
+  <form id="organizeForm">
+    <h2 id="organizeTitle">Chat options</h2>
+    <label for="organizeFolder">folder</label>
+    <select id="organizeFolder">
+      <option value="">(no folder)</option>
+    </select>
+    <div id="organizeError" class="organize-error" role="alert" hidden></div>
+    <div class="dialog-actions">
+      <button type="button" id="organizeDelete" class="danger">delete chat</button>
+      <button type="button" id="organizeCancel">cancel</button>
+      <button type="submit" class="primary">save</button>
+    </div>
+  </form>
+</dialog>
+
+<dialog id="newFolderDialog" aria-labelledby="newFolderTitle">
+  <form id="newFolderForm">
+    <h2 id="newFolderTitle">New folder</h2>
+    <label for="newFolderName">name</label>
+    <input id="newFolderName" maxlength="40" autocomplete="off" placeholder="Folder name">
+    <div id="newFolderError" class="organize-error" role="alert" hidden></div>
+    <div class="dialog-actions">
+      <button type="button" id="newFolderCancel">cancel</button>
+      <button type="submit" class="primary">create</button>
+    </div>
+  </form>
+</dialog>
+
+<dialog id="libraryDialog" aria-labelledby="libraryTitle">
+  <form id="libraryForm">
+    <h2 id="libraryTitle">Attach from earlier chats</h2>
+    <input id="libraryFilter" type="search" autocomplete="off" placeholder="Filter by file name" aria-label="Filter files">
+    <div id="libraryList" class="library-list"></div>
+    <div class="dialog-actions">
+      <button type="button" id="libraryCancel">cancel</button>
+      <button type="submit" id="libraryAttach" class="primary" disabled>attach</button>
+    </div>
+  </form>
+</dialog>
+
+<main>
+  <button id="menu" class="icon-btn" type="button" aria-label="Show sidebar" aria-expanded="false" aria-controls="side"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg></button>
+  <section id="settings">
+    <div class="automation-head">
+      <h2>Settings</h2>
+      <span id="saveMsg" class="usage"></span>
+      <button id="cancel">Close</button>
+      <button class="primary" id="save">Save changes</button>
+    </div>
+    <div class="settings-content">
+    <section class="set-group">
+      <header><h3>Model</h3><p>Which model answers, and how it samples.</p></header>
+      <div class="set-grid">
+        <div class="span-2"><label for="model">Model id</label><input id="model" spellcheck="false"><small>Also switchable from the model pill in the message box.</small></div>
+        <div><label for="temperature">Temperature</label><input id="temperature" type="number" step="0.1" min="0" max="2" placeholder="Provider default"></div>
+        <div><label for="maxTokens">Max output tokens</label><input id="maxTokens" type="number" min="1" placeholder="No limit"></div>
+        <div class="span-2"><label for="timezone">Timezone</label><select id="timezone"><option value="">Server's timezone</option></select><small>The zone the model is told today's date in.</small></div>
+      </div>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Instructions</h3><p>The system prompt sent at the start of every chat.</p></header>
+      <textarea id="systemPrompt" rows="10" aria-label="System prompt"></textarea>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Tools</h3><p>How far the model can go on its own before handing back.</p></header>
+      <div class="set-grid">
+        <div><label for="maxToolRounds">Max tool turns</label><input id="maxToolRounds" type="number" min="1" max="50"><small>Tool calls allowed per reply.</small></div>
+        <div><label for="askUserTimeoutSeconds">Question timeout (s)</label><input id="askUserTimeoutSeconds" type="number" min="0" max="86400"><small>How long a question from the model waits before it continues on its own. 0: wait until answered.</small></div>
+        <div><label for="toolApproval">Ask before running</label><select id="toolApproval"><option value="writes">MCP tools that write</option><option value="all">Every MCP tool call</option><option value="off">Never ask</option></select><small>Built-in tools never ask. Scheduled runs refuse calls that would.</small></div>
+      </div>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Context &amp; caching</h3><p>Keeps long chats fast and cheap by trimming old tool output.</p></header>
+      <div class="set-grid">
+        <div><label for="compactThreshold">Compact history above</label><input id="compactThreshold" type="number" min="0" step="1000"><small>Tokens. Old tool results are stubbed past this. 0 turns it off.</small></div>
+        <div><label for="keepTurns">Always keep last</label><input id="keepTurns" type="number" min="1" max="20"><small>Recent turns whose tool results stay in full.</small></div>
+        <div><label for="maxInlineChars">Stub single results above</label><input id="maxInlineChars" type="number" min="0" step="1000"><small>Characters. The turn that fetched it still reads it whole.</small></div>
+        <div><label for="maxTurnChars">Stub even this turn above</label><input id="maxTurnChars" type="number" min="0" step="10000"><small>Characters. A result this big is stubbed right away, even for the turn that fetched it.</small></div>
+        <div><label for="compactMinSaved">Only compact if it saves</label><input id="compactMinSaved" type="number" min="0" step="1000"><small>Characters. Compacting costs one cache miss, so small savings are skipped.</small></div>
+        <div><label for="maxHistoryTokens">Hard history limit</label><input id="maxHistoryTokens" type="number" min="0" step="10000"><small>Tokens. Past this, the oldest turns stop being sent (they stay visible). 0 turns it off.</small></div>
+        <div><label for="cacheTtl">Prompt cache lifetime</label><select id="cacheTtl"><option value="5m">5 minutes</option><option value="1h">1 hour</option></select><small>Anthropic models. 1 hour costs more to write, survives longer pauses.</small></div>
+        <div><label for="cacheMode">Cache style</label><select id="cacheMode"><option value="auto">Automatic</option><option value="implicit">Stable prefix only</option><option value="explicit">Anthropic cache_control</option><option value="rolling">OpenRouter automatic</option><option value="off">Off</option></select><small>Automatic is right for OpenRouter and local models; set it for other gateways.</small></div>
+      </div>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Appearance</h3></header>
+      <div class="set-grid">
+        <div><label for="theme">Theme</label><select id="theme"><option value="">Default</option></select></div>
+      </div>
+    </section>
+    </div>
+  </section>
+
+  <section id="mcp" aria-label="MCP servers">
+    <div class="automation-head"><h2>MCP servers</h2><button id="close-mcp">close</button></div>
+    <div class="settings-content">
+    <div class="sec">
+      <div class="sec-h">config file <span id="mcpPath" class="usage"></span></div>
+      <textarea id="mcpText" rows="9" spellcheck="false"></textarea>
+      <div class="row">
+        <div id="mcpMsg" class="usage"></div>
+        <div class="no-shrink"><button id="saveMcp">save &amp; reconnect</button></div>
+      </div>
+      <div>
+        <label>tools <span id="toolCount" class="usage"></span></label>
+        <div id="tools" class="tool-list"></div>
+      </div>
+    </div>
+    </div>
+  </section>
+
+  <section id="statistics" aria-label="Statistics">
+    <div class="automation-head"><h2>Statistics</h2><span id="statisticsFilter"></span><button id="close-statistics">close</button></div>
+    <div class="statistics-content">
+      <section class="statistics-block">
+        <div class="sec-h">cost and averages <span class="usage">provider-reported costs only</span></div>
+        <div id="statisticsSummary" class="row"></div>
+        <div id="statisticsCoverage" class="usage"></div>
+        <div id="statisticsCosts" class="statistics-costs"></div>
+      </section>
+      <section class="statistics-block">
+        <div class="sec-h">token usage <span id="usageRange" class="usage"></span></div>
+        <div id="usageStats" class="row"></div>
+        <div id="usageDistribution"></div>
+        <div id="usageModels" class="usage-models"></div>
+        <div id="usageBars" class="usage-bars"></div>
+      </section>
+      <section class="statistics-block">
+        <div class="sec-h">agentic <span class="usage">tool calls across all rounds</span></div>
+        <div id="statisticsTools" class="statistics-costs"></div>
+      </section>
+      <section class="statistics-block">
+        <div class="sec-h">cache misses <span id="statisticsMissesSummary" class="usage"></span></div>
+        <div id="statisticsMisses" class="statistics-costs"></div>
+      </section>
+    </div>
+  </section>
+
+  <div id="login" hidden>
+    <form id="loginForm" class="login-card">
+      <h2>TinyWebUI</h2>
+      <label for="loginPassword">Password</label>
+      <input id="loginPassword" type="password" autocomplete="current-password" required>
+      <button class="primary" type="submit">Sign in</button>
+      <div id="loginMsg" class="usage" role="alert"></div>
+    </form>
+  </div>
+
+  <section id="admin" aria-label="Admin">
+    <div class="automation-head"><h2>Admin</h2><button id="close-admin">close</button></div>
+    <div class="statistics-content">
+      <section class="statistics-block">
+        <div class="sec-h">users <span id="adminCount" class="usage"></span></div>
+        <div id="adminMsg" class="usage"></div>
+        <div id="adminUsers" class="admin-users"></div>
+      </section>
+      <section id="adminView" class="statistics-block" hidden>
+        <div class="sec-h"><button id="adminBack" type="button">← back</button> <span id="adminViewTitle"></span><span id="adminViewMeta" class="usage"></span></div>
+        <div class="usage admin-note">Read-only admin view. Every view is recorded in the audit log.</div>
+        <div id="adminViewBody"></div>
+      </section>
+    </div>
+  </section>
+
+  <section id="automations" aria-label="Automations">
+    <div class="automation-head"><h2>Automations</h2><button id="new-automation" class="primary" type="button">New automation</button><button id="close-automations">close</button></div>
+    <div class="automation-content">
+      <div id="automation-create-slot"></div>
+      <div id="automation-list" class="automation-list"></div>
+    </div>
+  </section>
+
+  <div id="log"><div class="wrap" id="wrap"></div></div>
+
+  <aside id="rightRail" class="right-rail">
+    <div id="chatDocs" class="rail-card" hidden></div>
+  </aside>
+
+  <aside id="chatOutline" class="outline-rail" hidden></aside>
+
+  <div id="hello" aria-hidden="true">
+    <h2>Hello there</h2>
+    <p>Type a message or attach files to get started</p>
+  </div>
+
+  <footer>
+    <details id="chatTasks" class="task-card" open hidden>
+      <summary class="task-heading"><strong>Tasks</strong><span id="taskCount"></span></summary>
+      <ol id="taskItems" class="task-items"></ol>
+    </details>
+    <div id="attachments" class="attachments" hidden></div>
+    <form id="form">
+      <input type="file" id="fileInput" multiple hidden>
+      <div id="queue" class="queue" hidden></div>
+      <textarea id="input" rows="1" placeholder="Type a message…" aria-label="Message"></textarea>
+      <div class="composer-bar">
+        <button type="button" id="attach" class="icon-btn" title="Attach files and tools" aria-label="Attach files and tools" aria-haspopup="menu" aria-expanded="false"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+        <span class="grow"></span>
+        <button type="button" id="modelBtn" class="model-chip" aria-haspopup="menu" aria-expanded="false" title="Switch model"><span id="status" role="status" aria-live="polite"></span><svg class="ic chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="primary" id="send" type="submit" aria-label="Send"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
+      </div>
+    </form>
+  </footer>
+</main>
+
+</div>
+
+<script type="module" src="themes/theme-loader.js"></script>
+<script type="module" src="app.js"></script>
+</body>
+</html>