tinywebui 0.1.4 → 0.1.5

package/public/panels/settings.js

@@ -4,7 +4,8 @@ import { addError } from '../chat/transcript.js';
 import { whoami, loadAccess } from '../core/access.js';
 import { api } from '../core/api.js';
 import { PANEL, closePanel } from './panels.js';
-import { initConnectors, renderConnectors, collectConnectors, lockConnectors } from './connectors.js';
+import { initModelEditor, renderCatalog, collectCatalog, setLocked, newConnector, newModel, modelPages, usesDefaultEndpoint } from './model-editor.js';
+import { renderHome } from './settings-home.js';
 
 /**
  * The tools panel: built-ins first, then every MCP server with its own health
@@ -23,6 +24,10 @@ export const isReadOnly = () => readOnly;
 // The deployment's model as last loaded; the composer's model menu starts from it.
 let model = '';
 export const configuredModel = () => model;
+// An admin of an instance whose default model has no endpoint yet: the page
+// opens settings on load, since nothing else works until one is connected.
+let setupNeeded = false;
+export const needsSetup = () => setupNeeded;
 
 function renderToolPanel(data) {
   const box = $('tools');
@@ -231,11 +236,60 @@ export async function loadMcp() {
     : locked ? 'set in code (read-only)' : path;
 }
 
+/* ---------- pages ----------
+ * Settings is a home page (endpoints and their models) and a page per thing
+ * opened from it. Every page edits the same unsaved draft, so moving between
+ * them loses nothing and one Save writes it all. */
+
+let view = 'home';
+// Whether this person edits the deployment's endpoints and catalog.
+let admin = false;
+let defaultKey = { set: false, hint: '' };
+let modelField = null; // the default-model field, moved between its two homes
+
+function showView(name, page) {
+  view = name;
+  for (const v of document.querySelectorAll('#settings .set-view')) v.hidden = v.dataset.view !== name;
+  const current = document.querySelector(`#settings .set-view[data-view="${name}"]`);
+  let title = current.dataset.title;
+  if (name === 'connector' || name === 'model') {
+    $(`${name}Slot`).replaceChildren(page);
+    page.refresh?.();
+    const s = page.summary();
+    title = s.label || s.id || (name === 'model' ? 'New model' : 'New connector');
+  }
+  if (name === 'home' && admin) renderHome({ open: showView, defaultModel: $('model').value.trim(), defaultKey, defaultModelField: modelField });
+  // Off the home card (catalog not empty, or not an admin) the field lives on
+  // the defaults page; an admin with a catalog picks the default per model.
+  if (!modelField.isConnected || name !== 'home') $('defaultModelGroup').appendChild(modelField);
+  $('defaultModelGroup').hidden = admin;
+  $('setTitle').textContent = title;
+  $('setBack').hidden = name === 'home' || readOnly;
+  document.querySelector('#settings .settings-content').scrollTop = 0;
+}
+
+/** Esc and Back: one page up, or false when already at the top. */
+export function settingsBack() {
+  if (view === 'home' || readOnly) return false;
+  showView('home');
+  return true;
+}
+
 export function initSettings() {
   $('saveMcp').onclick = saveMcp;
   $('save').onclick = saveConfig;
   $('testDefault').onclick = testDefault;
-  initConnectors();
+  modelField = $('defaultModelField');
+  $('setBack').onclick = settingsBack;
+  for (const b of document.querySelectorAll('#settings [data-open]')) b.onclick = () => showView(b.dataset.open);
+  $('addConnector').onclick = () => showView('connector', newConnector());
+  initModelEditor({
+    isDefault: (id) => Boolean(id) && $('model').value.trim() === id,
+    makeDefault: (id) => { $('model').value = id; },
+    renameDefault: (from, to) => { if (from && $('model').value.trim() === from) $('model').value = to; },
+    removed: () => showView('home'),
+    addModel: (cid) => showView('model', newModel(cid))
+  });
 }
 
 async function testDefault() {
@@ -303,7 +357,7 @@ export async function loadConfig() {
   $('myInstructionsGroup').hidden = !mine.includes('instructions');
   $('myInstructions').value = whoami().instructions || '';
   $('themeGroup').hidden = readOnly && !mine.includes('theme');
-  $('myPrefsHead').hidden = readOnly ? !mine.length : false;
+  $('myPrefsLink').hidden = readOnly ? !mine.length : false;
   for (const id of FORM_KEYS) {
     const locked = readOnly || lockedKeys.has(id);
     $(id).disabled = locked;
@@ -332,9 +386,11 @@ export async function loadConfig() {
   $('timezone').value = cfg.timezone ?? '';
   $('toolApproval').value = cfg.toolApproval ?? 'writes';
   // The admin block is only sent to (and only meaningful for) the sole user or an admin.
-  const admin = Boolean(whoami().isAdmin) && !readOnly && cfg.baseUrl !== undefined;
-  $('adminSettings').hidden = !admin;
+  admin = Boolean(whoami().isAdmin) && !readOnly && cfg.baseUrl !== undefined;
+  $('adminConnection').hidden = !admin;
+  for (const n of document.querySelectorAll('#settings .admin-only')) n.hidden = !admin;
   if (admin) {
+    defaultKey = { set: Boolean(cfg.hasApiKey), hint: cfg.keyHint || '' };
     $('baseUrl').value = cfg.baseUrl ?? '';
     $('apiKey').value = '';
     $('apiKey').placeholder = cfg.hasApiKey ? `set (…${cfg.keyHint || ''}) — blank keeps it` : 'not set';
@@ -344,29 +400,25 @@ export async function loadConfig() {
     $('cache').value = String(cfg.cache !== false);
     $('reasoningReplay').value = cfg.reasoningReplay ?? 'auto';
     $('extraBody').value = Object.keys(cfg.extraBody || {}).length ? JSON.stringify(cfg.extraBody, null, 2) : '';
-    renderConnectors(cfg);
-    lockConnectors(Boolean(cfg.frozen) || lockedKeys.has('models') || lockedKeys.has('connectors'));
+    renderCatalog(cfg);
+    setLocked(Boolean(cfg.frozen) || lockedKeys.has('models') || lockedKeys.has('connectors'));
+    $('addConnector').hidden = Boolean(cfg.frozen) || lockedKeys.has('connectors');
   }
+  showView(readOnly ? 'prefs' : 'home');
+  saved = draftState();
   // The chip is the model picker's button now; the tool count lives in the
   // + menu, where the tools themselves are.
   // Tier 3 shows your own model; the configured one is only the default.
   const me = whoami();
-  const bits = [me.authMode === 'trusted-header' && me.model ? me.modelLabel || me.model : cfg.modelLabel || cfg.model];
-  if (!cfg.hasApiKey) bits.push('NO API KEY');
+  const bits = [['multiuser', 'trusted-header'].includes(me.authMode) && me.model ? me.modelLabel || me.model : cfg.modelLabel || cfg.model].filter(Boolean);
+  setupNeeded = admin && !cfg.ready;
+  if (!cfg.ready) bits.push('NO MODEL CONNECTED');
   if (cfg.mcpErrors?.length) bits.push(`${cfg.mcpErrors.length} mcp err`);
   $('status').textContent = bits.join(' · ');
 }
 
-async function saveConfig() {
-  // Personal instructions go to the person's own prefs, whatever else they may edit.
-  if (!$('myInstructionsGroup').hidden) {
-    try { await api.post('/api/me/prefs', { instructions: $('myInstructions').value.trim() || null }); } catch (err) {
-      $('saveMsg').textContent = `save failed (${err.message})`;
-      return;
-    }
-    await loadAccess();
-    if (readOnly) { $('saveMsg').textContent = 'saved'; closePanel(PANEL.SETTINGS); return; }
-  }
+/** The config patch the pages currently hold. Throws on bad JSON. */
+function buildPatch() {
   const patch = {
     systemPrompt: $('systemPrompt').value,
     model: $('model').value.trim(),
@@ -385,26 +437,61 @@ async function saveConfig() {
     timezone: $('timezone').value,
     toolApproval: $('toolApproval').value
   };
-  if (!$('adminSettings').hidden) {
-    try {
-      const apiKey = $('apiKey').value;
-      Object.assign(patch, {
-        baseUrl: $('baseUrl').value.trim(),
-        ...(apiKey ? { apiKey } : {}),
-        llmCompaction: $('llmCompaction').value === 'true',
-        compactionMaxTokens: Number($('compactionMaxTokens').value) || 8192,
-        expandCharBudget: Number($('expandCharBudget').value) || 0,
-        cache: $('cache').value === 'true',
-        reasoningReplay: $('reasoningReplay').value,
-        extraBody: $('extraBody').value.trim() ? JSON.parse($('extraBody').value) : {},
-        ...collectConnectors()
-      });
-    } catch (err) {
+  if (admin) {
+    const apiKey = $('apiKey').value;
+    const catalog = collectCatalog();
+    // A default that is no longer an enabled entry (renamed, removed, or none
+    // picked yet) becomes the first enabled one, as the server would read it.
+    const on = catalog.models.filter((m) => m.enabled !== false);
+    if (on.length && !on.some((m) => m.id === patch.model || (m.model || m.id) === patch.model)) patch.model = on[0].id;
+    Object.assign(patch, {
+      // The top-level endpoint only while it is shown; saving it otherwise
+      // would bring the card back with nothing on it.
+      ...(usesDefaultEndpoint() ? { baseUrl: $('baseUrl').value.trim(), ...(apiKey ? { apiKey } : {}) } : {}),
+      llmCompaction: $('llmCompaction').value === 'true',
+      compactionMaxTokens: Number($('compactionMaxTokens').value) || 8192,
+      expandCharBudget: Number($('expandCharBudget').value) || 0,
+      cache: $('cache').value === 'true',
+      reasoningReplay: $('reasoningReplay').value,
+      extraBody: $('extraBody').value.trim() ? JSON.parse($('extraBody').value) : {},
+      ...catalog
+    });
+  }
+  for (const k of lockedKeys) delete patch[k];
+  return patch;
+}
+
+// The draft as of the last load, to tell whether closing would lose edits.
+let saved = '';
+function draftState() {
+  if (readOnly) return $('myInstructions').value;
+  try { return JSON.stringify([buildPatch(), $('myInstructions').value]); } catch { return null; }
+}
+
+/** Whether closing now would drop unsaved edits; asks, and on yes reloads the saved settings. */
+export function settingsCanClose() {
+  const now = draftState();
+  if (now === saved) return true;
+  if (!window.confirm('Discard unsaved settings changes?')) return false;
+  loadConfig();
+  return true;
+}
+
+async function saveConfig() {
+  // Personal instructions go to the person's own prefs, whatever else they may edit.
+  if (!$('myInstructionsGroup').hidden) {
+    try { await api.post('/api/me/prefs', { instructions: $('myInstructions').value.trim() || null }); } catch (err) {
       $('saveMsg').textContent = `save failed (${err.message})`;
       return;
     }
+    await loadAccess();
+    if (readOnly) { $('saveMsg').textContent = 'saved'; saved = draftState(); closePanel(PANEL.SETTINGS, { force: true }); return; }
+  }
+  let patch;
+  try { patch = buildPatch(); } catch (err) {
+    $('saveMsg').textContent = `save failed (${err.message})`;
+    return;
   }
-  for (const k of lockedKeys) delete patch[k];
   try { await api.post('/api/config', patch); } catch (err) {
     $('saveMsg').textContent = `save failed (${err.message})`;
     return;
@@ -413,12 +500,13 @@ async function saveConfig() {
   await loadAccess(); // a changed model changes what it can take
   await loadTools(); // the per-tool "default" labels follow the global mode
   $('saveMsg').textContent = 'saved';
-  closePanel(PANEL.SETTINGS);
+  closePanel(PANEL.SETTINGS, { force: true });
 }
 
 /** The panel's onOpen: a stale "saved" would read as this visit's. */
 export function onSettingsOpen() {
   if (!$('save').disabled) $('saveMsg').textContent = '';
+  showView(readOnly ? 'prefs' : 'home');
 }
 
 /** The panel's onClose. */

package/public/shared/attachment_note.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * The inline note that tells the model a document's id ("read_document" needs
  * it). It lives in the stored message text, so the page strips it back out to
@@ -5,6 +6,7 @@
  * note, the transcript reads it, and they cannot drift apart.
  */
 
+/** @param {{ id: string, filename: string, char_len: number }} doc */
 export function attachmentNote(doc) {
   return `\n\n[Attached document: "${doc.filename}" (id: ${doc.id}, ${doc.char_len.toLocaleString('en-US')} chars). Use read_document to search or read it.]`;
 }
@@ -14,7 +16,11 @@ export function attachmentNote(doc) {
 const NOTES_AT_END = /(?:\n\n\[Attached document: ".*?" \(id: ([\w.-]+), [\d,]+ chars\)\. Use read_document to search or read it\.\])+$/;
 const ONE_NOTE = /\[Attached document: ".*?" \(id: ([\w.-]+), /g;
 
-/** A stored message's text without its notes, and the document ids they named. */
+/**
+ * A stored message's text without its notes, and the document ids they named.
+ * @param {unknown} content
+ * @returns {{ text: string, ids: string[] }}
+ */
 export function splitAttachmentNotes(content) {
   const text = String(content ?? '');
   const tail = NOTES_AT_END.exec(text);

package/public/shared/events.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * The events a running turn streams to the browser, as `data: {"type": ...}`
  * lines. Shared by both sides: the server imports this file to emit them

package/public/shared/features.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * Every feature a role can be granted (access.roles.*.features). Shared by
  * both sides: the server checks them on each API route (src/routes/*,

package/public/shared/origins.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * Where a stored message came from, when it was not typed by the user. The
  * server stamps it (src/automations/scheduler.js) and the page draws such a

package/public/shared/usage.js

@@ -1,3 +1,4 @@
+// @ts-check
 /**
  * Reading a provider's usage object. Shared by both sides so the transcript's
  * per-turn line and the Statistics panel count the same tokens.
@@ -11,15 +12,24 @@
  *   DeepSeek                     : prompt_cache_hit_tokens / prompt_cache_miss_tokens
  */
 
+/**
+ * A usage object as some provider sent it: any shape, every field optional.
+ * @typedef {{ [field: string]: any }} RawUsage
+ */
+
+/** @param {unknown} v @returns {number | null} */
 const num = (v) => {
   if (v == null) return null;
   const n = Number(v);
   return Number.isFinite(n) && n >= 0 ? n : null;
 };
 
+/** @param {RawUsage | null | undefined} u */
 export const inputTokens = (u) => num(u?.prompt_tokens ?? u?.input_tokens);
+/** @param {RawUsage | null | undefined} u */
 export const outputTokens = (u) => num(u?.completion_tokens ?? u?.output_tokens);
 
+/** @param {RawUsage | null | undefined} u */
 export const cacheReads = (u) => num(
   u?.prompt_tokens_details?.cached_tokens
   ?? u?.input_tokens_details?.cached_tokens
@@ -28,6 +38,7 @@ export const cacheReads = (u) => num(
   ?? u?.cached_tokens
 );
 
+/** @param {RawUsage | null | undefined} u */
 export const cacheWrites = (u) => num(
   u?.cache_creation_input_tokens
   ?? u?.cache_write_tokens
@@ -36,8 +47,12 @@ export const cacheWrites = (u) => num(
   ?? u?.input_tokens_details?.cache_write_tokens
 );
 
-/** Folds one or more raw usage objects into the numbers a turn displays. */
+/**
+ * Folds one or more raw usage objects into the numbers a turn displays.
+ * @param {RawUsage[]} raws
+ */
 export function tally(raws) {
+  /** @type {{ in: number, out: number, cached: number, written: number, discount: number, reported: boolean, raw: RawUsage[], provider: string | null, providers: string[] }} */
   const t = { in: 0, out: 0, cached: 0, written: 0, discount: 0, reported: false, raw: raws, provider: null, providers: [] };
   for (const u of raws) {
     if (u.provider) {

package/public/styles.css

@@ -84,7 +84,6 @@ header .grow { flex: 1; }
   font-size: var(--fs-meta); color: var(--muted); font-family: var(--mono);
   min-width: 3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
 }
-#menu { display: none; }
 
 /* One focus ring for everything, drawn outside the element so a dense row does
    not clip it. Keyboard only -- the mouse never sees it. */
@@ -108,6 +107,10 @@ input, textarea, select {
   background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-sm); resize: vertical;
   transition: border-color .12s, box-shadow .12s;
 }
+input[type="checkbox"] {
+  width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0;
+  flex: none; accent-color: var(--accent); cursor: pointer;
+}
 input:focus, textarea:focus, select:focus {
   outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
 }
@@ -295,7 +298,10 @@ main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height:
 #login[hidden] { display:none; }
 .login-card { width:min(22rem,100%); display:flex; flex-direction:column; gap:.6rem; padding:1.5rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--raise); }
 .login-card h2 { margin:0 0 .5rem; }
-#loginMsg:empty, .login-card[hidden] { display:none; }
+.invite-form { display:flex; flex-direction:column; gap:.5rem; padding:.75rem 0 1rem; }
+.invite-form > div:first-of-type { display:flex; gap:.5rem; }
+.invite-form input { flex:1 1 14rem; }
+#loginMsg:empty { display:none; }
 .admin-users { display:flex; flex-direction:column; gap:.4rem; }
 .admin-row { display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; padding:.5rem 0; border-top:1px solid var(--line); font-size:var(--fs-meta); }
 .admin-row:first-child { border-top:0; }
@@ -390,7 +396,7 @@ main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height:
 .automation-switch input:focus-visible + .switch-track { box-shadow:0 0 0 3px var(--accent-soft); }
 
 /* Inline create/edit form: one column, instructions full width. */
-.automation-editor { display:flex; flex-direction:column; align-items:stretch; gap:.75rem; margin:0; max-width:none; }
+.automation-editor { display:flex; flex-direction:column; gap:.75rem; }
 .automation-card .automation-editor { border-top:1px solid var(--line); padding-top:.75rem; }
 .automation-card > h3 + .automation-editor { border-top:0; padding-top:0; }
 .automation-row { display:flex; flex-wrap:wrap; gap:.75rem; }
@@ -530,13 +536,13 @@ details.tool.off .name, details.tool.off .desc { opacity: .6; }
 }
 .tool .params { margin-top: .5rem; }
 .tool .param {
-  display: flex; gap: .5rem; font-family: var(--mono);
+  display: flex; flex-wrap: wrap; gap: 0 .5rem; font-family: var(--mono);
   font-size: var(--fs-meta); padding: .125rem 0;
 }
 .tool .param b { color: var(--fg); font-weight: 500; }
 .tool .param .ty { color: var(--faint); }
 .tool .param .req { color: var(--err); }
-.tool .param .d { color: var(--muted); flex: 1; min-width: 0; }
+.tool .param .d { color: var(--muted); flex: 1 1 12rem; min-width: 0; }
 .row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
 .row > * { flex: 1 1 11rem; }
 
@@ -809,7 +815,7 @@ details.step > summary:hover { background: var(--panel); }
 /* The composer: one raised card holding attach, input and send, rather than
    three loose controls on a ruled strip. The page's one shadow lives here. */
 footer { padding: .5rem .875rem 1rem; flex-shrink: 0; }
-form {
+#form {
   max-width: var(--measure); margin: 0 auto;
   display: flex; gap: .5rem; align-items: flex-end;
 }
@@ -1181,11 +1187,14 @@ button.nav-item:active:not(:disabled) { transform: none; }
 .chat-folder-heading { background: var(--panel); padding: .5rem; }
 #side-resize { right: -.3125rem; }
 
-/* Collapsed: the sidebar leaves, and the same button that opens the mobile
-   drawer brings it back. */
-#menu { position: absolute; top: .25rem; left: .25rem; z-index: 8; display: none; }
+/* One sidebar toggle at every width: it collapses the desktop sidebar and
+   opens the mobile drawer. It sits above the full-column panels because the
+   sidebar is the way out of them -- they have no close buttons of their own --
+   so every header in the column leaves room for it. */
+#menu { position: absolute; top: .25rem; left: .25rem; z-index: 11; display: inline-flex; }
 body.side-collapsed #side { display: none; }
-body.side-collapsed #menu { display: inline-flex; }
+.automation-head { padding-left: 3rem; }
+#log { padding-top: 2.75rem; }
 
 /* Full-column panels clip themselves to this frame. Keeping main overflow
    visible lets focus rings and composer popovers extend where they need to. */
@@ -1381,7 +1390,11 @@ button.pop-item:active:not(:disabled) { transform: none; }
   width: min(46rem, 100%); margin: 0 auto 1rem; padding: 1.125rem 1.25rem 1.25rem;
   background: var(--raise); border: 1px solid var(--line); border-radius: var(--r-md);
 }
-.set-group > header { margin-bottom: .875rem; }
+.set-group > header {
+  /* Not the page's top bar: plain block, no bar height, padding or blur. */
+  display: block; height: auto; padding: 0; border: 0; background: none; backdrop-filter: none;
+  margin-bottom: .875rem;
+}
 .set-group h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }
 .set-group > header p { margin: .125rem 0 0; color: var(--muted); font-size: var(--fs-small); }
 .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1rem; }
@@ -1397,15 +1410,56 @@ button.pop-item:active:not(:disabled) { transform: none; }
 .policy-checks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
 .policy-checks label { display: inline-flex; gap: .3rem; align-items: center; }
 /* A person without the settings feature sees only what an admin lets them customise. */
-#settings.prefs-only .set-group:not(.mine), #settings.prefs-only .set-divider:not(.mine), #settings.prefs-only #adminSettings { display: none; }
-#settings .mine[hidden] { display: none; }
-/* Connector and model editors: one bordered row per entry. */
-.cfg-row { margin: 0 0 .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--r-sm, 6px); }
-.cfg-row .set-grid { gap: .75rem; }
-.cfg-row textarea { font-family: var(--mono, monospace); font-size: var(--fs-small); }
-.cfg-row .cfg-actions { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
-.cfg-row .cfg-tags { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
-.cfg-row .cfg-tags label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
+#settings.prefs-only .set-group:not(.mine), #settings.prefs-only .set-link:not(.mine), #settings.prefs-only #adminConnection { display: none; }
+.set-divider.set-first { margin-top: 0; padding-top: 0; border-top: 0; }
+#settings .mine[hidden], #settings .set-view[hidden], #settings .set-group[hidden] { display: none; }
+.automation-head .set-back { margin-left: -.375rem; }
+.automation-head .set-back + h2 { margin-right: auto; }
+
+/* Home: one card per endpoint with its models under it, then links to the other pages. */
+.ep-head { display: flex; align-items: flex-start; gap: .75rem; }
+.ep-head > div { flex: 1; min-width: 0; }
+.ep-head p { margin: .125rem 0 0; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
+.model-list { margin: .25rem -.5rem .5rem; display: flex; flex-direction: column; }
+.model-link {
+  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem; text-align: left;
+  background: none; border: 0; border-radius: var(--r-sm); color: var(--fg);
+}
+.model-link:hover { background: var(--accent-soft); }
+.model-link.off { opacity: .55; }
+.model-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.model-name { font-weight: 500; }
+.model-sub { color: var(--faint); font-size: var(--fs-meta); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-chips { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
+.chip { padding: .0625rem .5rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-meta); color: var(--muted); }
+.chip-default { border-color: currentColor; color: var(--fg); font-weight: 500; }
+.chev { color: var(--faint); font-size: 1.25rem; line-height: 1; }
+.add-model { margin-top: .25rem; }
+.ep-open { margin: .25rem 0 .75rem; }
+.ep-open small { display: block; }
+.ep-empty { margin: .25rem 0 .5rem; color: var(--muted); font-size: var(--fs-small); }
+/* A fresh instance: the first step of setting one up. */
+.ep-setup p { margin: .25rem 0 1rem; color: var(--muted); font-size: var(--fs-small); }
+.set-add { width: min(46rem, 100%); margin: 0 auto 1.5rem; }
+.set-nav { width: min(46rem, 100%); margin: 0 auto; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raise); overflow: hidden; }
+.set-link {
+  display: flex; align-items: center; width: 100%; padding: .875rem 1.25rem; text-align: left;
+  background: none; border: 0; border-radius: 0; color: var(--fg);
+}
+.set-link + .set-link { border-top: 1px solid var(--line); }
+.set-link:hover { background: var(--accent-soft); }
+.set-link::after { content: '›'; margin-left: auto; padding-left: .75rem; color: var(--faint); font-size: 1.25rem; }
+.set-link b { display: block; font-weight: 600; }
+.set-link small { display: block; color: var(--muted); font-size: var(--fs-small); }
+.set-link[hidden] { display: none; }
+.set-foot { width: min(46rem, 100%); margin: 0 auto 1rem; display: flex; justify-content: flex-end; gap: .5rem; }
+.danger { color: var(--err); }
+.inline-check { display: inline-flex !important; gap: .375rem; align-items: center; margin: 0 !important; font-weight: 400 !important; }
+/* Editor fields inside the model and connector pages. */
+#modelSlot textarea.mono { font-family: var(--mono, monospace); font-size: var(--fs-small); }
+.cfg-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
+.cfg-tags { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
+.cfg-tags label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; font-weight: 400; }
 
 .brand-home {
   flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem;
@@ -1447,7 +1501,6 @@ button.pop-item:active:not(:disabled) { transform: none; }
 .usage-composition-track { display: flex; height: .7rem; overflow: hidden; border-radius: var(--r-xs); margin: .5rem 0; }
 #statisticsFilter { margin-left: auto; min-width: 0; }
 #statisticsFilter select { max-width: 100%; }
-#statisticsFilter + button { margin-left: 0; }
 .task-card {
   max-width: var(--measure); margin: 0 auto .5rem; padding: .5rem .75rem;
   border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
@@ -1469,3 +1522,13 @@ button.pop-item:active:not(:disabled) { transform: none; }
 .task-completed { opacity: .6; }
 .task-completed span:last-child { text-decoration: line-through; }
 .no-shrink { flex: 0 0 auto; }
+
+/* Text from outside -- links, paths, emails, model and tool ids -- can be one
+   unbroken token wider than a phone. As a flex item it would set the item's
+   minimum width and push the row past the edge (or, centred, past the left
+   edge where nothing scrolls to it), so let it break anywhere instead. */
+#inviteResult, #mcpPath, .model-name, .policy-checks label, .policy-group b,
+.tool .name, .tool .doc, .tool .param b, .tool .param .d, .tool-group-h .name,
+.tool-group-h .meta, .sec-h .usage {
+  overflow-wrap: anywhere; min-width: 0;
+}