tinywebui 0.1.4 → 0.1.5

package/public/panels/model-editor.js

@@ -0,0 +1,336 @@
+/**
+ * The admin's draft of the connectors (endpoint + key) and the model catalog,
+ * and the editor page for one of each. Every entry is an editor element kept
+ * in memory, so its fields are the draft: switching pages detaches it, saving
+ * reads them all back. Keys are write-only: an editor shows whether one is set
+ * (and its last four characters), and a blank key field means "keep it".
+ */
+import { $, el } from '../core/dom.js';
+import { api } from '../core/api.js';
+
+const TAGS = ['vision', 'reasoning', 'tools'];
+
+/**
+ * The settings a model may override, as fields. Each one inherits the global
+ * value of the same id (on the "Defaults for all models" page) while blank;
+ * select options are copied from that global select.
+ */
+const OVERRIDES = [
+  { key: 'systemPrompt', section: 'Prompt', label: 'System prompt', type: 'textarea', note: 'Replaces the default prompt for this model.' },
+  { key: 'temperature', section: 'Sampling', label: 'Temperature', type: 'number', attrs: { step: 0.1, min: 0, max: 2 } },
+  { key: 'maxTokens', section: 'Sampling', label: 'Max output tokens', type: 'number', attrs: { min: 1 } },
+  { key: 'maxToolRounds', section: 'Tools', label: 'Max tool turns', type: 'number', attrs: { min: 1, max: 50 }, note: 'Tool calls allowed per reply.' },
+  { key: 'cacheMode', section: 'Caching', label: 'Cache style', type: 'select' },
+  { key: 'cacheTtl', section: 'Caching', label: 'Prompt cache lifetime', type: 'select' },
+  { key: 'reasoningReplay', section: 'Advanced', label: 'Replay past reasoning', type: 'select' },
+  { key: 'extraBody', section: 'Advanced', label: 'Extra request body (JSON)', type: 'json', note: 'Merged over the default body.' }
+];
+const SECTIONS = ['Prompt', 'Sampling', 'Tools', 'Caching', 'Advanced'];
+
+const connectorEditors = [];
+const modelEditors = [];
+let locked = false;
+// Whether the top-level endpoint serves anything (set in code or the
+// environment); otherwise every model belongs to a connector.
+let defaultEndpoint = false;
+
+function field(label, input, note) {
+  const wrap = el('div');
+  const l = el('label');
+  l.textContent = label;
+  wrap.append(l, input);
+  if (note) wrap.appendChild(Object.assign(el('small'), { textContent: note }));
+  return wrap;
+}
+
+const span2 = (node) => { node.classList.add('span-2'); return node; };
+const textInput = (value, placeholder) => Object.assign(el('input'), { value: value ?? '', placeholder: placeholder || '', spellcheck: false });
+
+function group(title, note, ...children) {
+  const g = el('section', 'set-group');
+  const h = el('header');
+  h.appendChild(Object.assign(el('h3'), { textContent: title }));
+  if (note) h.appendChild(Object.assign(el('p'), { textContent: note }));
+  g.append(h, ...children);
+  return g;
+}
+
+function grid(...children) {
+  const g = el('div', 'set-grid');
+  g.append(...children);
+  return g;
+}
+
+/* ---------- connectors ---------- */
+
+function connectorEditor(c = {}, { onRemove, onRename, onAddModel }) {
+  const id = textInput(c.id, 'local');
+  // An id is what models name; renaming a saved one would orphan them.
+  if (c.id) id.readOnly = true;
+  let lastId = c.id || '';
+  id.addEventListener('change', () => { onRename(lastId, id.value.trim()); lastId = id.value.trim(); });
+  const label = textInput(c.label, 'Local models');
+  const url = textInput(c.baseUrl, 'http://localhost:11434/v1');
+  const key = Object.assign(textInput('', c.hasApiKey ? `set (…${c.keyHint || ''}) — blank keeps it` : 'optional'), { type: 'password', autocomplete: 'off' });
+  const clear = Object.assign(el('input'), { type: 'checkbox' });
+  const test = Object.assign(el('button'), { type: 'button', textContent: 'Test connection' });
+  const msg = el('span', 'usage');
+  test.onclick = async () => {
+    msg.textContent = 'testing…';
+    try {
+      const out = await api.post('/api/connectors/test', { id: id.value.trim(), baseUrl: url.value.trim(), apiKey: key.value });
+      msg.textContent = out.ok ? `reachable${out.models != null ? ` · ${out.models} models` : ''}` : out.error || `status ${out.status}`;
+    } catch (err) { msg.textContent = err.message; }
+  };
+  const clearLabel = el('label', 'inline-check');
+  clearLabel.append(clear, ' remove stored key');
+  const remove = Object.assign(el('button'), { type: 'button', textContent: 'Remove connector', className: 'danger' });
+  const actions = el('div', 'cfg-actions span-2');
+  actions.append(test, msg);
+  // The second step of setting one up: the models people pick from it.
+  const addModel = Object.assign(el('button'), { type: 'button', textContent: 'Add a model →', className: 'primary' });
+  addModel.onclick = () => {
+    if (!id.value.trim()) { msg.textContent = 'give the connector an id first'; id.focus(); return; }
+    onAddModel(id.value.trim());
+  };
+
+  const page = el('div');
+  page.append(
+    group('Connector', 'An OpenAI-compatible API: its URL, and a key if it needs one. Its models are added under it.', grid(
+      field('Id', id, 'What a model names in its connector field.'),
+      field('Label', label),
+      span2(field('API URL', url)),
+      span2(field('API key', key, c.hasApiKey ? 'Write-only. Blank keeps the current key.' : 'Optional: leave blank for a server that needs none.')),
+      ...(c.hasApiKey ? [span2(clearLabel)] : []),
+      actions
+    )),
+    el('div', 'set-foot')
+  );
+  page.lastChild.append(remove, addModel);
+  remove.onclick = () => onRemove(page);
+  page.read = () => ({
+    id: id.value.trim(),
+    ...(label.value.trim() ? { label: label.value.trim() } : {}),
+    baseUrl: url.value.trim(),
+    // undefined keeps the stored key on the server; null clears it.
+    ...(key.value ? { apiKey: key.value } : clear.checked ? { apiKey: null } : {})
+  });
+  page.summary = () => ({ id: id.value.trim(), label: label.value.trim(), baseUrl: url.value.trim(), hasKey: Boolean(key.value || (c.hasApiKey && !clear.checked)) });
+  return page;
+}
+
+/* ---------- models ---------- */
+
+function overrideInput(spec, value) {
+  if (spec.type === 'select') {
+    const sel = el('select');
+    for (const o of $(spec.key).options) sel.appendChild(Object.assign(el('option'), { value: o.value, textContent: o.textContent }));
+    sel.prepend(Object.assign(el('option'), { value: '', textContent: 'Inherit' }));
+    sel.value = value ?? '';
+    // A value this page has no option for (set in the file) must survive a save.
+    if (value != null && sel.value !== value) {
+      sel.appendChild(Object.assign(el('option'), { value, textContent: value }));
+      sel.value = value;
+    }
+    return sel;
+  }
+  if (spec.type === 'textarea' || spec.type === 'json') {
+    const ta = Object.assign(el('textarea'), { rows: spec.type === 'json' ? 4 : 6, spellcheck: spec.type !== 'json', className: spec.type === 'json' ? 'mono' : '' });
+    ta.value = value == null ? '' : spec.type === 'json' ? JSON.stringify(value, null, 2) : value;
+    return ta;
+  }
+  const input = Object.assign(el('input'), { type: 'number', value: value ?? '' });
+  for (const [k, v] of Object.entries(spec.attrs || {})) input.setAttribute(k, v);
+  return input;
+}
+
+// What a blank override falls back to, read off the global field each time
+// the page is shown, so an edit on the defaults page is reflected at once.
+function inheritHint(spec, input) {
+  const global = $(spec.key);
+  if (spec.type === 'select') {
+    input.options[0].textContent = `Inherit (${global.selectedOptions[0]?.textContent || global.value})`;
+    return;
+  }
+  const v = global.value.trim();
+  input.placeholder = spec.key === 'systemPrompt' ? (v ? `Inherit the default prompt: ${v.slice(0, 120)}${v.length > 120 ? '…' : ''}` : 'Inherit (no default prompt)')
+    : spec.type === 'json' ? `Inherit: ${v || '{}'}`
+    : `Inherit: ${v || global.placeholder || 'provider default'}`;
+}
+
+function readOverride(spec, input, name) {
+  const raw = input.value.trim();
+  if (raw === '') return undefined;
+  if (spec.type === 'number') return Number(raw);
+  if (spec.type === 'json') {
+    let v;
+    try { v = JSON.parse(raw); } catch (err) { throw new Error(`model "${name}" ${spec.label}: ${err.message}`); }
+    if (!v || typeof v !== 'object' || Array.isArray(v)) throw new Error(`model "${name}" ${spec.label} must be a JSON object`);
+    return v;
+  }
+  return spec.key === 'systemPrompt' ? input.value : raw;
+}
+
+function connectorChoices(sel, current) {
+  const ids = connectorEditors.map((c) => c.summary().id).filter(Boolean);
+  const keepDefault = defaultEndpoint || (current === '' && !ids.length);
+  sel.replaceChildren(...(keepDefault ? [Object.assign(el('option'), { value: '', textContent: 'Default endpoint' })] : []),
+    ...[...new Set([...ids, ...(current && !ids.includes(current) ? [current] : [])])].map((cid) => Object.assign(el('option'), { value: cid, textContent: cid })));
+  sel.value = current || (keepDefault ? '' : ids[0] || '');
+}
+
+function modelEditor(m = {}, { onRemove, isDefault, makeDefault, renameDefault }) {
+  const id = textInput(m.id, 'fast');
+  let lastId = m.id || '';
+  id.addEventListener('input', () => { renameDefault(lastId, id.value.trim()); lastId = id.value.trim(); });
+  const label = textInput(m.label, 'Quick');
+  const description = textInput(m.description, 'Everyday questions');
+  const model = textInput(m.model, 'vendor/model-id');
+  const connector = el('select');
+  connectorChoices(connector, m.connector);
+  const enabled = Object.assign(el('input'), { type: 'checkbox', checked: m.enabled !== false });
+  const enabledLabel = el('label', 'inline-check');
+  enabledLabel.append(enabled, ' Enabled: people can pick it');
+  const tags = el('div', 'cfg-tags');
+  const tagBoxes = TAGS.map((t) => {
+    const cb = Object.assign(el('input'), { type: 'checkbox', checked: (m.tags || []).includes(t) });
+    const l = el('label');
+    l.append(cb, ` ${t}`);
+    tags.appendChild(l);
+    return [t, cb];
+  });
+  const defaultBtn = Object.assign(el('button'), { type: 'button' });
+  const showDefault = () => {
+    const on = isDefault(id.value.trim());
+    defaultBtn.textContent = on ? 'Default model' : 'Make default';
+    defaultBtn.disabled = on || locked;
+  };
+  defaultBtn.onclick = () => { makeDefault(id.value.trim()); showDefault(); };
+
+  const inputs = OVERRIDES.map((spec) => [spec, overrideInput(spec, m[spec.key])]);
+  const page = el('div');
+  page.appendChild(group('Model', 'Who people see and where it is served from.', grid(
+    field('Id', id, 'Stable handle: roles and preferences name this.'),
+    field('Label', label, 'What people see.'),
+    span2(field('Description', description)),
+    field('Provider model id', model, 'Blank: the id above.'),
+    field('Connector', connector),
+    span2(field('Capabilities', tags)),
+    span2(el('div', 'cfg-actions'))
+  )));
+  page.querySelector('.cfg-actions').append(enabledLabel, defaultBtn);
+  for (const section of SECTIONS) {
+    const mine = inputs.filter(([s]) => s.section === section);
+    page.appendChild(group(section, section === 'Prompt' ? 'Blank fields inherit the defaults for all models.' : null,
+      grid(...mine.map(([s, input]) => {
+        const f = field(s.label, input, s.note);
+        return s.type === 'textarea' || s.type === 'json' ? span2(f) : f;
+      }))));
+  }
+  const remove = Object.assign(el('button'), { type: 'button', textContent: 'Remove model', className: 'danger' });
+  remove.onclick = () => onRemove(page);
+  const foot = el('div', 'set-foot');
+  foot.appendChild(remove);
+  page.appendChild(foot);
+
+  page.refresh = () => {
+    connectorChoices(connector, connector.value);
+    for (const [spec, input] of inputs) inheritHint(spec, input);
+    showDefault();
+  };
+  page.read = () => {
+    const name = id.value.trim();
+    const out = {
+      id: name,
+      ...(label.value.trim() ? { label: label.value.trim() } : {}),
+      ...(description.value.trim() ? { description: description.value.trim() } : {}),
+      ...(model.value.trim() ? { model: model.value.trim() } : {}),
+      ...(connector.value ? { connector: connector.value } : {})
+    };
+    const chosen = tagBoxes.filter(([, cb]) => cb.checked).map(([t]) => t);
+    if (chosen.length) out.tags = chosen;
+    if (!enabled.checked) out.enabled = false;
+    for (const [spec, input] of inputs) {
+      const v = readOverride(spec, input, name);
+      if (v !== undefined) out[spec.key] = v;
+    }
+    return out;
+  };
+  page.summary = () => ({
+    id: id.value.trim(), label: label.value.trim(), model: model.value.trim(), connector: connector.value,
+    enabled: enabled.checked, tags: tagBoxes.filter(([, cb]) => cb.checked).map(([t]) => t)
+  });
+  page.setConnector = (cid) => { connectorChoices(connector, cid); };
+  return page;
+}
+
+/* ---------- the draft ---------- */
+
+let hooks = {};
+
+/**
+ * `deps`: { isDefault(id), makeDefault(id), renameDefault(from, to), removed(),
+ * addModel(connectorId) }
+ * -- the default model lives on the settings page, not in an entry.
+ */
+export function initModelEditor(deps) { hooks = deps; }
+
+const removeFrom = (list, page) => { const i = list.indexOf(page); if (i >= 0) list.splice(i, 1); hooks.removed?.(); };
+
+function addConnectorEditor(c) {
+  const page = connectorEditor(c, {
+    onRemove: (p) => removeFrom(connectorEditors, p),
+    // A connector still being named carries the models already added under it.
+    onRename: (from, to) => { if (from) for (const m of modelEditors) if (m.summary().connector === from) m.setConnector(to); },
+    onAddModel: (cid) => hooks.addModel(cid)
+  });
+  connectorEditors.push(page);
+  return page;
+}
+
+function addModelEditor(m) {
+  const page = modelEditor(m, {
+    onRemove: (p) => removeFrom(modelEditors, p),
+    isDefault: (id) => hooks.isDefault(id),
+    makeDefault: (id) => hooks.makeDefault(id),
+    renameDefault: (from, to) => hooks.renameDefault(from, to)
+  });
+  modelEditors.push(page);
+  return page;
+}
+
+/** Rebuilds the draft from /api/config. */
+export function renderCatalog(cfg) {
+  defaultEndpoint = Boolean(cfg.usesDefaultEndpoint);
+  connectorEditors.length = 0;
+  modelEditors.length = 0;
+  for (const c of cfg.connectors || []) addConnectorEditor(c);
+  for (const m of cfg.models || []) addModelEditor(m);
+  setLocked(locked);
+}
+
+export const newConnector = () => { const p = addConnectorEditor({}); setLocked(locked); return p; };
+export const newModel = (connector) => {
+  const cid = connector || (defaultEndpoint ? '' : connectorEditors[0]?.summary().id);
+  const p = addModelEditor(cid ? { connector: cid } : {});
+  setLocked(locked);
+  return p;
+};
+export const usesDefaultEndpoint = () => defaultEndpoint;
+export const connectorPages = () => [...connectorEditors];
+export const modelPages = () => [...modelEditors];
+
+/** What the draft holds, as the config patch to save. Throws on bad JSON. */
+export function collectCatalog() {
+  return {
+    connectors: connectorEditors.map((p) => p.read()),
+    models: modelEditors.map((p) => p.read())
+  };
+}
+
+/** Locks or unlocks every control in the catalog editors. */
+export function setLocked(on) {
+  locked = on;
+  for (const p of [...connectorEditors, ...modelEditors]) for (const n of p.querySelectorAll('input,select,textarea,button')) n.disabled = on;
+}
+export const isCatalogLocked = () => locked;

package/public/panels/panels.js

@@ -1,10 +1,14 @@
 /**
  * The side panels: one open at a time, each toggled by its nav button and
- * closed by its close button or Escape. This is the only code that opens or
- * closes one; everything else calls openPanel/closePanel.
+ * closed by Escape or by going back to a chat from the sidebar
+ * (closeAllPanels, wired in app.js). Chats are the app; a panel is a detour
+ * from them, so the way out is the sidebar toggle that is always on screen,
+ * not a close button per panel. This is the only code that opens
+ * or closes one; everything else calls openPanel/closePanel/closeAllPanels.
  *
  * Element ids follow the name: the panel is #<name>, its nav button
- * #toggle-<name>, its close button #close-<name> unless the panel names another.
+ * #toggle-<name>. A panel with its own dismiss button (Settings' Close, which
+ * also discards edits) names it as closeId.
  */
 import { $ } from '../core/dom.js';
 
@@ -16,7 +20,8 @@ export const PANEL = Object.freeze({
   ADMIN: 'admin'
 });
 
-const panels = new Map(); // name -> { onOpen?, onClose?, closeId? }
+const panels = new Map(); // name -> { onOpen?, onClose?, canClose?, onEscape?, closeId? }
+let onAnyOpen = () => {};
 
 const isOpen = (name) => $(name).classList.contains('open');
 
@@ -27,26 +32,46 @@ function show(name, on) {
 
 export async function openPanel(name) {
   if (isOpen(name)) return;
-  for (const other of panels.keys()) if (other !== name) closePanel(other, { swapping: true });
+  for (const other of panels.keys()) if (other !== name && !closePanel(other, { swapping: true })) return;
   show(name, true);
+  onAnyOpen();
   await panels.get(name).onOpen?.();
 }
 
-/** `swapping`: another panel is taking its place, so focus belongs there. */
-export function closePanel(name, { swapping = false } = {}) {
-  if (!isOpen(name)) return;
+/**
+ * `swapping`: another panel is taking its place, so focus belongs there.
+ * `force` skips the panel's canClose (it is closing after a save). False when
+ * the panel refused, e.g. unsaved edits the person chose to keep.
+ */
+export function closePanel(name, { swapping = false, force = false } = {}) {
+  if (!isOpen(name)) return true;
+  if (!force && panels.get(name).canClose?.() === false) return false;
   show(name, false);
   panels.get(name).onClose?.({ swapping });
+  return true;
+}
+
+/** False when an open panel refused to close (unsaved edits kept). */
+export function closeAllPanels() {
+  for (const name of panels.keys()) if (!closePanel(name)) return false;
+  return true;
 }
 
-/** `defs`: { [PANEL.*]: { onOpen?, onClose?({ swapping }), closeId? } } */
-export function initPanels(defs) {
+/**
+ * `defs`: { [PANEL.*]: { onOpen?, onClose?({ swapping }), canClose?() -> bool,
+ * onEscape?() -> bool (true: handled, stay open), closeId? } }
+ * `opts.onAnyOpen()` runs whenever a panel opens -- on mobile the nav buttons
+ * live in the drawer, which would otherwise stay over the panel just opened.
+ */
+export function initPanels(defs, opts = {}) {
+  if (opts.onAnyOpen) onAnyOpen = opts.onAnyOpen;
   for (const [name, def] of Object.entries(defs)) {
     panels.set(name, def);
     $(`toggle-${name}`).onclick = () => (isOpen(name) ? closePanel(name) : openPanel(name));
-    $(def.closeId || `close-${name}`).onclick = () => closePanel(name);
+    if (def.closeId) $(def.closeId).onclick = () => closePanel(name);
   }
   document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') for (const name of panels.keys()) closePanel(name);
+    if (event.key !== 'Escape') return;
+    for (const [name, def] of panels) if (isOpen(name) && !def.onEscape?.()) closePanel(name);
   });
 }

package/public/panels/settings-home.js

@@ -0,0 +1,125 @@
+/**
+ * The settings home page: one card per connector with the models it serves
+ * listed under it, and the top-level endpoint first only while it serves
+ * anything (code or the environment set it). With none of them it is the
+ * first step of setting up: connect an endpoint, then add its models.
+ * Rebuilt from the draft every time it is shown, so it always reflects
+ * unsaved edits.
+ */
+import { $, el } from '../core/dom.js';
+import { connectorPages, modelPages, newModel, newConnector, isCatalogLocked, usesDefaultEndpoint } from './model-editor.js';
+
+function modelLink(page, { open, defaultModel }) {
+  const s = page.summary();
+  const b = el('button', 'model-link');
+  b.type = 'button';
+  if (!s.enabled) b.classList.add('off');
+  const name = el('span', 'model-name');
+  name.textContent = s.label || s.id || 'Untitled model';
+  const sub = el('span', 'model-sub');
+  sub.textContent = [s.model || s.id, s.enabled ? '' : 'disabled'].filter(Boolean).join(' · ');
+  const chips = el('span', 'model-chips');
+  if (s.id && s.id === defaultModel) chips.appendChild(Object.assign(el('span', 'chip chip-default'), { textContent: 'default' }));
+  for (const t of s.tags) chips.appendChild(Object.assign(el('span', 'chip'), { textContent: t }));
+  const text = el('span', 'model-text');
+  text.append(name, sub);
+  b.append(text, chips, Object.assign(el('span', 'chev'), { textContent: '›', ariaHidden: 'true' }));
+  b.onclick = () => open('model', page);
+  return b;
+}
+
+function card({ title, detail, onEdit, connectorId, models, deps, extra }) {
+  const c = el('section', 'set-group ep-card');
+  const head = el('div', 'ep-head');
+  const t = el('div');
+  t.appendChild(Object.assign(el('h3'), { textContent: title }));
+  t.appendChild(Object.assign(el('p'), { textContent: detail }));
+  const edit = Object.assign(el('button'), { type: 'button', textContent: 'Edit' });
+  edit.onclick = onEdit;
+  head.append(t, ...(onEdit ? [edit] : []));
+  c.appendChild(head);
+  if (models.length) {
+    const list = el('div', 'model-list');
+    for (const p of models) list.appendChild(modelLink(p, deps));
+    c.appendChild(list);
+  }
+  if (extra) c.appendChild(extra);
+  if (connectorId !== null && !models.length) {
+    c.appendChild(Object.assign(el('p', 'ep-empty'), { textContent: 'No models yet: add the ones people can pick.' }));
+  }
+  if (connectorId !== null && !isCatalogLocked()) {
+    const add = Object.assign(el('button', 'add-model'), { type: 'button', textContent: '+ Add model' });
+    add.onclick = () => deps.open('model', newModel(connectorId));
+    c.appendChild(add);
+  }
+  return c;
+}
+
+const host = (url) => { try { return new URL(url).host || url; } catch { return url; } };
+
+/**
+ * `deps`: { open(view, page?), defaultModel, defaultKey: { set, hint },
+ * defaultModelField } -- the field is shown on the default card while the
+ * catalog is empty, since any model id goes then.
+ */
+export function renderHome(deps) {
+  const models = modelPages();
+  const connectors = connectorPages();
+  const ids = new Set(connectors.map((p) => p.summary().id));
+  const under = (cid) => models.filter((p) => (p.summary().connector || '') === cid);
+  const baseUrl = $('baseUrl').value.trim();
+  const cards = [];
+
+  if (usesDefaultEndpoint()) {
+    let extra = null;
+    if (!models.length) {
+      extra = el('div', 'ep-open');
+      extra.appendChild(deps.defaultModelField);
+      extra.appendChild(Object.assign(el('small'), { textContent: 'No models are listed, so any model id goes. Add one to choose exactly which models people can pick.' }));
+    }
+    cards.push(card({
+      title: 'Default endpoint',
+      detail: `${baseUrl ? host(baseUrl) : 'no URL set'} · ${deps.defaultKey.set ? `key …${deps.defaultKey.hint || ''}` : 'no key'}`,
+      onEdit: () => deps.open('endpoint'),
+      connectorId: '',
+      models: under(''),
+      deps,
+      extra
+    }));
+  }
+  for (const p of connectors) {
+    const s = p.summary();
+    cards.push(card({
+      title: s.label || s.id || 'New connector',
+      detail: `${s.id ? `${s.id} · ` : ''}${s.baseUrl ? host(s.baseUrl) : 'no URL set'} · ${s.hasKey ? 'key set' : 'no key'}`,
+      onEdit: () => deps.open('connector', p),
+      connectorId: s.id,
+      models: under(s.id),
+      deps
+    }));
+  }
+  // Models naming a connector that no longer exists still need a way in.
+  const orphans = models.filter((p) => { const c = p.summary().connector; return c && !ids.has(c); });
+  if (orphans.length) {
+    cards.push(card({ title: 'Unknown connector', detail: 'These models name a connector that is not defined.', connectorId: null, models: orphans, deps }));
+  }
+  const empty = !cards.length;
+  if (empty) cards.push(setupCard(deps));
+  // The setup card has its own button; a second one under it would only repeat it.
+  $('addConnector').parentElement.hidden = empty;
+  $('endpointCards').replaceChildren(...cards);
+}
+
+function setupCard(deps) {
+  const c = el('section', 'set-group ep-card ep-setup');
+  c.appendChild(Object.assign(el('h3'), { textContent: 'Connect a model endpoint' }));
+  c.appendChild(Object.assign(el('p'), {
+    textContent: 'Any OpenAI-compatible API: its URL, and an API key if it needs one. Then add the models people can pick from it.'
+  }));
+  if (!isCatalogLocked()) {
+    const add = Object.assign(el('button', 'primary'), { type: 'button', textContent: 'Add a connector' });
+    add.onclick = () => deps.open('connector', newConnector());
+    c.appendChild(add);
+  }
+  return c;
+}