tinywebui 0.1.0

package/public/chat/chat.js

@@ -0,0 +1,282 @@
+/**
+ * Owns which chat is open and the form that sends into it -- the orchestrator
+ * that ties the transcript, the attachment tray and the sidebar together.
+ */
+import { $ } from '../core/dom.js';
+import { state } from '../core/state.js';
+import { addUser, replay, addError, pinToBottom } from './transcript.js';
+import { consume } from './stream.js';
+import { commitAttachments, invalidAttachments, renderAttachments, renderChatDocs, resetChatDocsView } from './attachments.js';
+import { loadChats, clearSearch, closeSideDrawer } from './sidebar.js';
+import { resetOutline } from './outline.js';
+import { renderTasks, dropFinishedTasks } from './tasks.js';
+import { renderQueue, enqueue, reclaimQueue, holdFollowup } from './queue.js';
+import { api } from '../core/api.js';
+import { newId } from '../core/id.js';
+
+const input = $('input');
+let chatLoadCtrl = null;
+
+function cancelChatLoad() {
+  chatLoadCtrl?.abort();
+  chatLoadCtrl = null;
+}
+
+export function initChat() {
+  input.addEventListener('input', () => {
+    input.style.height = 'auto';
+    input.style.height = Math.min(input.scrollHeight, 190) + 'px';
+    if (state.busy) setBusy(true);
+  });
+  input.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' || e.shiftKey) return;
+    e.preventDefault();
+    // While a turn runs, Alt+Enter holds it for later; plain Enter steers it.
+    if (e.altKey && state.busy) holdInput();
+    else $('form').requestSubmit();
+  });
+  $('form').addEventListener('submit', onSubmit);
+
+  // A run is the server's, so the dot in the sidebar can change without this tab
+  // doing anything at all. Poll only while there is something to watch.
+  setInterval(async () => {
+    if (!state.busy && !state.chats.some((c) => c.running)) return;
+    await loadChats();
+    const id = state.chat?.id;
+    if (!state.busy && id && state.chats.some((chat) => chat.id === id && chat.running)) rejoin(id);
+  }, 4000);
+}
+
+/** Parks what is typed above the composer until its send button is clicked. */
+function holdInput() {
+  const text = input.value.trim();
+  if (!text || !state.chat.id) return;
+  input.value = '';
+  input.dispatchEvent(new Event('input'));
+  holdFollowup(text);
+}
+
+/** A held follow-up, confirmed: into the running turn, or as the next message. */
+export function sendHeld(text) {
+  if (!state.busy) input.value = [text, input.value.trim()].filter(Boolean).join('\n\n');
+  else input.value = text;
+  queueOrSend();
+}
+
+function queueOrSend() {
+  if (state.busy) queueInput('steer');
+  else $('form').requestSubmit();
+}
+
+/** Sends what is typed to the running turn instead of starting a new one. */
+async function queueInput(kind) {
+  const text = input.value.trim();
+  if (!text || !state.chat.id) return;
+  input.value = '';
+  input.dispatchEvent(new Event('input'));
+  // 409: the turn finished in the meantime, so this is just the next message.
+  if (!(await enqueue(kind, text))) {
+    input.value = text;
+    setBusy(false);
+    $('form').requestSubmit();
+  }
+}
+
+/** After a stream ends: follow the run a follow-up started, or take back what never went. */
+async function afterRun({ next } = {}, id) {
+  if (next && state.chat.id === id) return rejoin(id);
+  if (state.chat.id === id) await reclaimQueue();
+  return undefined;
+}
+
+/** Cancels whatever stream read the view currently on screen owns. */
+function leaveView() {
+  state.viewCtrl?.abort();
+  state.viewCtrl = null;
+  if (state.busy) setBusy(false);
+  renderQueue([]);
+}
+
+export function newChat() {
+  cancelChatLoad();
+  leaveView();
+  state.chat = { id: null, title: 'New chat' };
+  renderTasks();
+  $('wrap').innerHTML = '';
+  pinToBottom();
+  state.pendingAttachments = [];
+  renderAttachments();
+  state.chatDocuments = [];
+  state.chatImages = [];
+  resetChatDocsView();
+  renderChatDocs();
+  resetOutline();
+  // Starting fresh is a clear signal that browsing is done; a lingering
+  // search would otherwise still be sitting over the sidebar underneath it,
+  // and on mobile the drawer would otherwise still be covering the composer.
+  clearSearch();
+  closeSideDrawer();
+}
+
+export async function openChat(id) {
+  // A slower earlier click must never replace the chat selected most recently.
+  cancelChatLoad();
+  const ctrl = new AbortController();
+  chatLoadCtrl = ctrl;
+  let found;
+  try {
+    found = await api.get(`/api/chats/${id}`, { signal: ctrl.signal });
+  } catch (err) {
+    if (chatLoadCtrl === ctrl) {
+      chatLoadCtrl = null;
+      if (err.name !== 'AbortError') addError(`Could not open chat (${err.message})`);
+    }
+    return;
+  }
+  if (chatLoadCtrl !== ctrl) return;
+  chatLoadCtrl = null;
+  leaveView();
+  state.chat = { id: found.id, title: found.title };
+  renderTasks(found.tasks || []);
+  $('wrap').innerHTML = '';
+  pinToBottom();
+  state.pendingAttachments = [];
+  renderAttachments();
+  state.chatDocuments = found.documents || [];
+  // No dedicated images endpoint -- every image already rides inline on the
+  // user message that attached it, so the rail is built from the same
+  // history the transcript renders rather than a second round trip.
+  state.chatImages = (found.messages || [])
+    .filter((m) => m.role === 'user' && m.images?.length)
+    .flatMap((m) => m.images);
+  resetChatDocsView();
+  renderChatDocs();
+  resetOutline();
+  // Mid-turn, the server hands back only the settled part of the transcript;
+  // the rest arrives as events, exactly as it did for the tab that started it.
+  replay(found.messages, found.documents);
+  renderQueue(found.queued || []);
+  clearSearch();
+  closeSideDrawer();
+  if (found.running) rejoin(id);
+  else reclaimQueue();
+}
+
+/** Follows a turn already in flight, from the top of its event buffer. */
+async function rejoin(id) {
+  const ctrl = new AbortController();
+  state.viewCtrl = ctrl;
+  setBusy(true);
+  let outcome;
+  try {
+    const res = await fetch(`/api/chats/${id}/stream?from=0`, { signal: ctrl.signal });
+    if (res.ok) outcome = await consume(res);
+  } catch (err) {
+    // Navigating away aborts this on purpose; anything else just means the
+    // transcript is in the store and reopening picks it up.
+  }
+  // A later navigation already swapped in its own controller and reset
+  // `busy` for its own view -- stepping on either here would be wrong.
+  if (state.viewCtrl === ctrl) {
+    state.viewCtrl = null;
+    setBusy(false);
+    loadChats();
+    await afterRun(outcome, id);
+  }
+}
+
+const SVG = (d) => `<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">${d}</svg>`;
+const SEND_ICON = SVG('<path d="M12 19V5M5 12l7-7 7 7"/>');
+const STOP_ICON = SVG('<rect x="7" y="7" width="10" height="10" rx="1.5" fill="currentColor"/>');
+
+/**
+ * While a turn runs, send becomes stop -- the run outlives this tab either
+ * way -- unless something is typed, which the arrow then queues on the turn.
+ */
+function setBusy(on) {
+  const wasBusy = state.busy;
+  state.busy = on;
+  const stop = on && !input.value.trim();
+  // Icon-only button: the arrow sends, the square stops; the label says which.
+  $('send').innerHTML = stop ? STOP_ICON : SEND_ICON;
+  $('send').setAttribute('aria-label', stop ? 'Stop' : on ? 'Queue message (Alt+Enter: hold for later)' : 'Send');
+  $('send').title = on && !stop ? 'Enter: next step · Alt+Enter: hold for later' : '';
+  $('send').classList.toggle('stop', stop);
+  input.placeholder = on ? 'Add a message to this turn…' : 'Type a message…';
+  if (!on && wasBusy) input.focus();
+}
+
+async function onSubmit(e) {
+  e.preventDefault();
+  if (state.busy) {
+    if (input.value.trim()) return queueInput('steer');
+    // Closing the tab no longer stops a turn, so there has to be a way to
+    // actually mean it.
+    if (!state.chat.id) return;
+    try {
+      await api.post(`/api/chats/${state.chat.id}/stop`);
+    } catch (err) { addError(`couldn't stop: ${err.message}`); }
+    return;
+  }
+  const text = input.value.trim();
+  const hasAttachments = state.pendingAttachments.length > 0;
+  if (!text && !hasAttachments) return;
+  // A message must never go out without an attachment the user thinks is on
+  // it -- the model would act on the text alone.
+  const invalid = hasAttachments ? await invalidAttachments() : [];
+  if (invalid.length) {
+    addError(`remove ${invalid.map((a) => `"${a.file.name}"`).join(', ')} before sending`);
+    return;
+  }
+  input.value = '';
+  input.style.height = 'auto';
+  dropFinishedTasks();
+  setBusy(true);
+  const ctrl = new AbortController();
+  state.viewCtrl = ctrl;
+
+  // Assigned synchronously (before any await) so the upload below and the
+  // /api/chat call after it land on the same not-yet-created chat.
+  if (!state.chat.id) state.chat.id = newId();
+  // This is the first point anything staged is actually uploaded, extracted
+  // and written to the store -- removing a chip before now never touched it.
+  const { docs, images, failed } = await commitAttachments(state.chat.id);
+  if (failed.length) {
+    input.value = text;
+    setBusy(false);
+    return;
+  }
+  if (!text && !docs.length && !images.length) { setBusy(false); return; }
+
+  const placeholder = !text ? (images.length ? '(attached image)' : '(attached document)') : text;
+  addUser(placeholder, null, docs, images);
+
+  let outcome;
+  try {
+    // Only the new turn goes up. The server replays the rest from its own copy,
+    // so a page-sized tool result crosses the wire once rather than every turn.
+    const res = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        chatId: state.chat.id,
+        message: placeholder,
+        documentIds: docs.map((a) => a.id),
+        images
+      }),
+      signal: ctrl.signal
+    });
+    outcome = await consume(res);
+    loadChats();
+  } catch (err) {
+    if (err.name !== 'AbortError') addError(err.message);
+  } finally {
+    // A later navigation already swapped in its own controller and reset
+    // `busy` for its own view -- stepping on either here would be wrong.
+    if (state.viewCtrl === ctrl) {
+      state.viewCtrl = null;
+      setBusy(false);
+      afterRun(outcome, state.chat.id);
+    }
+  }
+}

package/public/chat/composer.js

@@ -0,0 +1,289 @@
+/**
+ * The composer's two menus: + (attach files, turn tools and MCP servers on
+ * and off) and the model chip (switch model). Both are popovers anchored to
+ * the composer card and rebuilt from the server every time they open, so they
+ * never show a state the server has already moved past.
+ */
+import { $, el, installLink } from '../core/dom.js';
+import { can, whoami, loadAccess } from '../core/access.js';
+import { addError } from './transcript.js';
+import { pickFiles } from './attachments.js';
+import { openLibrary } from './library.js';
+import { FEATURE } from '../shared/features.js';
+import { api } from '../core/api.js';
+
+const form = $('form');
+const attachBtn = $('attach');
+const modelBtn = $('modelBtn');
+
+let open = null; // { pop, btn }
+
+// Handed in by initComposer: the deployment config lives in the settings
+// panel, and the MCP panel is what "Manage MCP servers" opens.
+let config;
+let openMcp;
+
+function closeMenu() {
+  if (!open) return;
+  open.pop.remove();
+  open.btn.setAttribute('aria-expanded', 'false');
+  open = null;
+}
+
+function openMenu(btn, side, build) {
+  const same = open?.btn === btn;
+  closeMenu();
+  if (same) return;
+  const pop = el('div', `popover popover-${side}`);
+  pop.setAttribute('role', 'menu');
+  form.appendChild(pop);
+  btn.setAttribute('aria-expanded', 'true');
+  open = { pop, btn };
+  build(pop);
+  fitToViewport(pop);
+}
+
+/**
+ * Opens the popover on whichever side of the composer has more room and caps
+ * its height to that room, so it never hangs off the viewport (short phone
+ * screens, the centred empty-chat composer, an open mobile keyboard).
+ */
+function fitToViewport(pop) {
+  const gap = 8;
+  const rect = form.getBoundingClientRect();
+  const vh = window.visualViewport?.height ?? window.innerHeight;
+  const above = rect.top - gap * 2;
+  const below = vh - rect.bottom - gap * 2;
+  const up = above >= below;
+  pop.style.top = up ? 'auto' : 'calc(100% + .5rem)';
+  pop.style.bottom = up ? 'calc(100% + .5rem)' : 'auto';
+  pop.style.transformOrigin = `${up ? 'bottom' : 'top'} ${pop.classList.contains('popover-right') ? 'right' : 'left'}`;
+  pop.style.maxHeight = `${Math.max(120, Math.min(448, up ? above : below))}px`;
+}
+
+/**
+ * `deps.config`: { load, loadTools, loadMcp, isLocked, isReadOnly, model } from
+ * the settings panel. `deps.openMcp()`: shows the MCP servers panel.
+ */
+export function initComposer(deps) {
+  ({ config, openMcp } = deps);
+  window.visualViewport?.addEventListener('resize', () => { if (open) fitToViewport(open.pop); });
+  document.addEventListener('pointerdown', (e) => {
+    if (open && !open.pop.contains(e.target) && !open.btn.contains(e.target)) closeMenu();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && open) { const b = open.btn; closeMenu(); b.focus(); }
+  });
+  attachBtn.addEventListener('click', () => openMenu(attachBtn, 'left', buildToolsMenu));
+  modelBtn.addEventListener('click', () => openMenu(modelBtn, 'right', buildModelMenu));
+}
+
+/** An on/off switch; `onToggle(next)` returns a promise, and the switch holds still until it settles. */
+function toggle(on, label, onToggle) {
+  const sw = el('button', 'switch');
+  sw.type = 'button';
+  sw.setAttribute('role', 'switch');
+  sw.setAttribute('aria-checked', String(on));
+  sw.setAttribute('aria-label', label);
+  // Tool and server switches are deployment config: admins only.
+  if (config.isReadOnly()) { sw.disabled = true; sw.title = 'Managed by your administrator'; }
+  sw.onclick = async (e) => {
+    e.stopPropagation();
+    sw.disabled = true;
+    try { await onToggle(!on); } catch (err) { addError(err.message); sw.disabled = false; }
+  };
+  return sw;
+}
+
+/* ---- + menu: attach and tools ---- */
+
+async function buildToolsMenu(pop) {
+  if (can(FEATURE.ATTACHMENTS) || can(FEATURE.IMAGES)) {
+  const attach = el('button', 'pop-item');
+  attach.type = 'button';
+  attach.setAttribute('role', 'menuitem');
+  attach.innerHTML = '<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="M21 11.5 12.5 20a5.5 5.5 0 0 1-7.8-7.8l8.9-8.9a3.7 3.7 0 0 1 5.2 5.2l-8.9 8.9a1.8 1.8 0 0 1-2.6-2.6L15.5 7"/></svg><span>Attach files</span>';
+  attach.onclick = () => { closeMenu(); pickFiles(); };
+  pop.appendChild(attach);
+  // Documents only: an image has no stored text to reuse.
+  if (can(FEATURE.ATTACHMENTS)) {
+    const earlier = el('button', 'pop-item');
+    earlier.type = 'button';
+    earlier.setAttribute('role', 'menuitem');
+    earlier.innerHTML = '<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 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg><span>Attach from earlier chats</span>';
+    earlier.onclick = () => { closeMenu(); openLibrary(); };
+    pop.appendChild(earlier);
+  }
+  if (!can(FEATURE.TOOLS)) return;
+  pop.appendChild(el('hr', 'pop-sep'));
+  }
+
+  const body = el('div', 'pop-scroll');
+  body.appendChild(Object.assign(el('div', 'pop-note'), { textContent: 'Loading tools…' }));
+  pop.appendChild(body);
+
+  const manage = el('button', 'pop-item pop-foot');
+  manage.type = 'button';
+  manage.textContent = 'Manage MCP servers';
+  manage.onclick = () => { closeMenu(); openMcp(); };
+  if (can(FEATURE.MCP)) pop.appendChild(manage);
+
+  let data;
+  try { data = await api.get('/api/tools'); } catch (err) {
+    body.firstChild.textContent = `Could not load tools: ${err.message}`;
+    return;
+  }
+  renderTools(body, data);
+}
+
+/** Groups: built-ins, then one per MCP server. A group's tools expand under it. */
+function renderTools(body, data) {
+  body.innerHTML = '';
+  const refresh = (out) => { renderTools(body, out); config.loadTools(); config.load(); };
+  const toggleTool = async (name, on) => refresh(await api.post('/api/tools/toggle', { name, disabled: !on }));
+
+  const group = ({ title, tools, status, error, install, serverName, serverOn }) => {
+    const box = el('details', 'pop-group');
+    const head = el('summary', 'pop-item');
+    const enabled = tools.filter((t) => !t.disabled).length;
+    const dot = el('span', `pop-dot ${status || 'ok'}`);
+    const name = Object.assign(el('span', 'pop-name'), { textContent: title });
+    const meta = Object.assign(el('span', 'pop-meta'), {
+      textContent: status === 'disabled' ? 'off'
+        : status === 'error' ? (install ? `needs ${install.name}` : 'not connected')
+        : `${enabled}/${tools.length}`
+    });
+    if (error) head.title = error;
+    head.append(dot, name, meta);
+    if (serverName) {
+      head.appendChild(toggle(serverOn, `${title} server`, async (next) => {
+        const out = await api.post(`/api/mcp/servers/${encodeURIComponent(serverName)}/toggle`, { disabled: !next });
+        refresh(out);
+        config.loadMcp();
+      }));
+    }
+    box.appendChild(head);
+    const list = el('div', 'pop-tools');
+    for (const t of tools) {
+      const row = el('div', 'pop-tool');
+      const n = Object.assign(el('span', 'pop-tool-name'), { textContent: t.name, title: t.description || '' });
+      row.append(n, toggle(!t.disabled, t.name, (next) => toggleTool(t.name, next)));
+      list.appendChild(row);
+    }
+    if (status === 'error' && error) {
+      const note = Object.assign(el('div', 'pop-note'), { textContent: error });
+      if (install) note.append(' ', installLink(install));
+      list.appendChild(note);
+    } else if (!tools.length) {
+      list.appendChild(Object.assign(el('div', 'pop-note'), { textContent: 'No tools' }));
+    }
+    box.appendChild(list);
+    return box;
+  };
+
+  const total = [...data.internal, ...data.servers.flatMap((s) => s.tools)];
+  const on = total.filter((t) => !t.disabled).length;
+  body.appendChild(Object.assign(el('div', 'pop-label'), { textContent: `Tools · ${on} of ${total.length} on` }));
+  if (data.internal.length) body.appendChild(group({ title: 'Built-in', tools: data.internal }));
+  for (const s of data.servers) {
+    body.appendChild(group({
+      title: s.name, tools: s.tools, status: s.status, error: s.error, install: s.install,
+      serverName: s.name, serverOn: s.status !== 'disabled'
+    }));
+  }
+  if (!data.servers.length) {
+    body.appendChild(Object.assign(el('div', 'pop-note'), { textContent: 'No MCP servers yet. Add them under MCP servers.' }));
+  }
+}
+
+/* ---- model menu ---- */
+
+async function buildModelMenu(pop) {
+  // Tier 3: the pill is a personal choice among your role's models, saved
+  // per user; it never changes anyone else's model.
+  const personal = whoami().authMode === 'trusted-header';
+  const current = personal ? whoami().model : config.model();
+  if (!personal && config.isLocked('model')) {
+    pop.appendChild(Object.assign(el('div', 'pop-note'), {
+      textContent: config.isReadOnly() ? 'The model is managed by your administrator.' : 'The model is set in code and cannot be switched here.'
+    }));
+    return;
+  }
+
+  const search = el('input', 'pop-search');
+  search.type = 'search';
+  search.placeholder = 'Search models or type an id';
+  search.setAttribute('aria-label', 'Search models');
+  pop.appendChild(search);
+  const list = el('div', 'pop-scroll');
+  list.appendChild(Object.assign(el('div', 'pop-note'), { textContent: 'Loading models…' }));
+  pop.appendChild(list);
+  search.focus();
+
+  const choose = async (id) => {
+    closeMenu();
+    if (!id || id === current) return;
+    try {
+      if (personal) { await api.post('/api/me/prefs', { model: id }); await loadAccess(); }
+      else await api.post('/api/config', { model: id });
+    } catch (err) { return addError(err.message); }
+    await config.load();
+  };
+
+  let models = [];
+  let supported = true;
+  // A configured catalog is closed: labels only, no typing arbitrary ids.
+  let closed = false;
+  try {
+    const out = await api.get('/api/models');
+    models = out.models || [];
+    supported = out.supported;
+    closed = Boolean(out.catalog);
+  } catch { supported = false; }
+  if (closed) search.placeholder = 'Search models';
+
+  const render = () => {
+    const q = search.value.trim().toLowerCase();
+    list.innerHTML = '';
+    const hits = models.filter((m) => !q || (!closed && m.id.toLowerCase().includes(q))
+      || (m.name || '').toLowerCase().includes(q) || (m.description || '').toLowerCase().includes(q));
+    for (const m of hits.slice(0, 200)) {
+      const b = el('button', 'pop-item pop-model');
+      b.type = 'button';
+      b.dataset.id = m.id;
+      b.setAttribute('role', 'menuitemradio');
+      b.setAttribute('aria-checked', String(m.id === current));
+      b.appendChild(Object.assign(el('span', 'pop-name'), { textContent: closed ? m.name : m.id }));
+      const meta = closed ? m.description : m.name;
+      if (meta) b.appendChild(Object.assign(el('span', 'pop-meta'), { textContent: meta }));
+      b.onclick = () => choose(m.id);
+      list.appendChild(b);
+    }
+    // Typing an exact id always works, listed or not -- local runtimes and
+    // private deployments often serve models /models never mentions.
+    const typed = search.value.trim();
+    if (typed && !closed && !models.some((m) => m.id === typed)) {
+      const b = el('button', 'pop-item');
+      b.type = 'button';
+      b.textContent = `Use "${typed}"`;
+      b.onclick = () => choose(typed);
+      list.appendChild(b);
+    }
+    if (!list.children.length) {
+      list.appendChild(Object.assign(el('div', 'pop-note'), {
+        textContent: supported ? 'No models match.' : 'This provider does not list its models. Type a model id and press Enter.'
+      }));
+    }
+  };
+  search.oninput = render;
+  search.onkeydown = (e) => {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    // Exact id first, then the top match, then whatever was typed.
+    const q = search.value.trim();
+    const first = list.querySelector('.pop-model')?.dataset.id;
+    if (closed) return first && choose(first);
+    choose(models.some((m) => m.id === q) ? q : first || q);
+  };
+  render();
+}

package/public/chat/library.js

@@ -0,0 +1,76 @@
+/**
+ * "Attach from earlier chats": a picker over every file the user has already
+ * uploaded, so a document used once can be used again without finding the
+ * original on disk. Picking only stages it; the copy into this chat is made
+ * when the message is sent (see attachments.js).
+ */
+import { $, el } from '../core/dom.js';
+import { api } from '../core/api.js';
+import { stageExisting } from './attachments.js';
+import { addError } from './transcript.js';
+
+const dialog = $('libraryDialog');
+const list = $('libraryList');
+const filter = $('libraryFilter');
+const confirm = $('libraryAttach');
+
+let docs = [];
+const picked = new Set();
+
+const extOf = (name) => (name.includes('.') ? name.slice(name.lastIndexOf('.') + 1).toUpperCase() : 'FILE');
+const when =(ms) => new Date(ms).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+
+function render() {
+  const q = filter.value.trim().toLowerCase();
+  list.innerHTML = '';
+  const shown = docs.filter((d) => !q || d.filename.toLowerCase().includes(q));
+  if (!shown.length) {
+    list.appendChild(Object.assign(el('div', 'empty'), { textContent: docs.length ? 'No file matches.' : 'Nothing uploaded in earlier chats yet.' }));
+  }
+  for (const d of shown) {
+    const row = el('label', 'library-row');
+    const box = el('input');
+    box.type = 'checkbox';
+    box.checked = picked.has(d.id);
+    box.onchange = () => { box.checked ? picked.add(d.id) : picked.delete(d.id); sync(); };
+    const name = el('span', 'library-name');
+    name.textContent = d.filename;
+    const type = el('span', 'library-meta');
+    type.textContent = extOf(d.filename);
+    const date = el('span', 'library-meta');
+    date.textContent = when(d.created_at);
+    row.append(box, name, type, date);
+    list.appendChild(row);
+  }
+}
+
+function sync() {
+  confirm.disabled = picked.size === 0;
+  confirm.textContent = picked.size ? `attach ${picked.size}` : 'attach';
+}
+
+export async function openLibrary() {
+  picked.clear();
+  filter.value = '';
+  sync();
+  list.innerHTML = '';
+  list.appendChild(Object.assign(el('div', 'empty'), { textContent: 'Loading…' }));
+  dialog.showModal();
+  try {
+    docs = (await api.get('/api/documents')).documents;
+    render();
+  } catch (err) {
+    dialog.close();
+    addError(`could not list earlier files: ${err.message}`);
+  }
+}
+
+export function initLibrary() {
+  filter.addEventListener('input', render);
+  $('libraryCancel').addEventListener('click', () => dialog.close());
+  $('libraryForm').addEventListener('submit', (e) => {
+    e.preventDefault();
+    for (const d of docs) if (picked.has(d.id)) stageExisting(d);
+    dialog.close();
+  });
+}

package/public/chat/outline.js

@@ -0,0 +1,39 @@
+/**
+ * The conversation minimap: one flat tick per question, vertically centered
+ * on the right edge -- ChatGPT-nav style. At rest it's just marks; hovering
+ * (or focusing) a tick reveals that question's text and clicking it jumps
+ * the transcript there.
+ */
+import { $, el } from '../core/dom.js';
+
+let items = []; // { target: Element, text: string }
+
+export function resetOutline() {
+  items = [];
+  render();
+}
+
+/** Called once per user turn as it's added to the transcript. */
+export function addQuestion(target, text) {
+  items.push({ target, text: text || '(attached document)' });
+  render();
+}
+
+function render() {
+  const box = $('chatOutline');
+  box.innerHTML = '';
+  box.hidden = items.length === 0;
+  if (!items.length) return;
+
+  for (const it of items) {
+    const btn = el('button', 'outline-tick');
+    btn.type = 'button';
+    btn.setAttribute('aria-label', it.text);
+    const bar = el('span', 'bar');
+    const tip = el('span', 'tip');
+    tip.textContent = it.text.replace(/\s+/g, ' ').trim();
+    btn.append(tip, bar);
+    btn.onclick = () => it.target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    box.appendChild(btn);
+  }
+}