tinywebui 0.1.1 → 0.1.2

package/bin/tinywebui.js

@@ -16,7 +16,7 @@ if (configArg) process.env.TINYWEBUI_CONFIG = resolve(configArg);
 
 if (args.includes('--help') || args.includes('-h')) {
   console.log(`tinywebui [start] [--port 7777] [--host 127.0.0.1] [--config path]
-tinywebui set-password     turn on password login ("single" auth mode)
+tinywebui set-password     create or change the owner password
 tinywebui validate [path]  check the config files; prints the fingerprint, exits 1 on problems
 tinywebui migrate [--check]
                            bring the database to the current schema (--check: exit 1 if behind)
@@ -67,12 +67,6 @@ if (envPath && /\.[cm]?js$/.test(envPath)) {
   }
 }
 
-if (args[0] === 'set-password') {
-  const { setPassword } = await import('../src/set-password.js');
-  try { await setPassword(); process.exit(0); }
-  catch (err) { console.error(`[tinywebui] ${err.message}`); process.exit(1); }
-}
-
 try {
   let opts = {};
   if (jsPath && !existsSync(jsPath)) throw new Error(`config file not found: ${jsPath}`);
@@ -83,6 +77,11 @@ try {
     // stderr, so a command's stdout stays pure JSON for scripts.
     console.error(`[tinywebui] options: ${jsPath}`);
   }
+  if (args[0] === 'set-password') {
+    const { setPassword } = await import('../src/set-password.js');
+    await setPassword(opts);
+    process.exit(0);
+  }
   const COMMANDS = ['validate', 'effective', 'fingerprint', 'users', 'schema', 'migrate', 'doctor', 'config', 'models'];
   if (COMMANDS.includes(args[0])) {
     const { runCli } = await import('../src/cli.js');
@@ -92,6 +91,16 @@ try {
     console.error(`[tinywebui] unknown command "${args[0]}" (see --help)`);
     process.exit(1);
   }
+  const { createConfigSource } = await import('../src/config/config.js');
+  const initial = createConfigSource(opts).load({ persistSecret: false });
+  if (initial.authMode === 'single' && !initial.authPassword && !process.env.TINYWEBUI_PASSWORD) {
+    if (!process.stdin.isTTY || !process.stdout.isTTY) {
+      throw new Error('owner password required: run `tinywebui set-password` in a terminal, or set TINYWEBUI_PASSWORD before starting');
+    }
+    const { setPassword } = await import('../src/set-password.js');
+    console.log('[tinywebui] Set an owner password before the first start.');
+    await setPassword(opts);
+  }
   const { start } = await import('../src/server.js');
   // Command-line flags beat the file; the file beats the built-in defaults.
   await start({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywebui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A small, local-first chat workspace for any OpenAI-compatible model, with MCP tools.",
   "type": "module",
   "repository": {
@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "@jsquash/avif": "^2.1.1",
-    "@modelcontextprotocol/sdk": "^1.12.0",
+    "@modelcontextprotocol/sdk": "^1.32.1",
     "cron-parser": "^5.10.1",
     "heic-convert": "^2.1.0",
     "jpeg-js": "^0.4.4",
-    "mammoth": "^1.12.3",
+    "mammoth": "^1.13.0",
     "unpdf": "^1.8.1"
   },
   "license": "AGPL-3.0-or-later",

package/public/chat/attachments.js

@@ -5,7 +5,7 @@
  * it from the local queue; there is nothing server-side to clean up.
  */
 import { $, el } from '../core/dom.js';
-import { can } from '../core/access.js';
+import { can, modelAcceptsImages } from '../core/access.js';
 import { state } from '../core/state.js';
 import { addError } from './transcript.js';
 import { api } from '../core/api.js';
@@ -184,6 +184,10 @@ function stageAttachment(file) {
     addError(`attach "${file.name}": ${isImageFile(file) ? 'images are' : 'attachments are'} turned off for your account`);
     return;
   }
+  if (isImageFile(file) && !modelAcceptsImages()) {
+    addError(`attach "${file.name}": the current model does not take images`);
+    return;
+  }
   const entry = { file };
   if (isImageFile(file)) {
     entry.isImage = true;

package/public/chat/composer.js

@@ -25,6 +25,7 @@ let openMcp;
 
 function closeMenu() {
   if (!open) return;
+  open.watch.disconnect();
   open.pop.remove();
   open.btn.setAttribute('aria-expanded', 'false');
   open = null;
@@ -38,27 +39,35 @@ function openMenu(btn, side, build) {
   pop.setAttribute('role', 'menu');
   form.appendChild(pop);
   btn.setAttribute('aria-expanded', 'true');
-  open = { pop, btn };
+  // Menus fill in after a fetch and change height when a group expands, so
+  // refit whenever their contents change, not just once at open.
+  const watch = new MutationObserver(() => fitToViewport(pop));
+  watch.observe(pop, { childList: true, subtree: true, attributes: true, attributeFilter: ['open'] });
+  open = { pop, btn, watch };
   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).
+ * Opens the popover below the composer in a new chat, where the composer is
+ * centred, and in a conversation, where it is pinned to the bottom, below if
+ * the menu fits there and above otherwise. Its height is capped to the chosen
+ * side's room so it never hangs off the viewport (an open mobile keyboard).
  */
 function fitToViewport(pop) {
   const gap = 8;
+  pop.style.maxHeight = 'none';
+  const want = Math.min(pop.offsetHeight, 448);
   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;
+  const centred = !!form.closest('main:has(#wrap:empty)');
+  const up = !centred && below < want && 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`;
+  pop.style.maxHeight = `${Math.max(64, Math.min(want, up ? above : below))}px`;
 }
 
 /**
@@ -228,6 +237,7 @@ async function buildModelMenu(pop) {
       else await api.post('/api/config', { model: id });
     } catch (err) { return addError(err.message); }
     await config.load();
+    await loadAccess(); // the new model's capability tags
   };
 
   let models = [];

package/public/core/access.js

@@ -14,6 +14,9 @@ let features = new Set();
 export const can = (feature) => features.has(feature);
 export const whoami = () => me;
 
+/** False only when the catalog tags the current model and `vision` is not among them: untagged means unknown, so allowed. */
+export const modelAcceptsImages = () => !me.modelTags?.length || me.modelTags.includes('vision');
+
 // Nav items and controls that exist only for one feature.
 const GATED = {
   [FEATURE.SETTINGS]: ['toggle-settings'],
@@ -30,6 +33,8 @@ export async function loadAccess() {
   for (const [feature, ids] of Object.entries(GATED)) {
     for (const id of ids) { const node = $(id); if (node) node.hidden = !can(feature); }
   }
+  // Settings also opens for someone whose admin lets them customise their own experience.
+  $('toggle-settings').hidden = !(can(FEATURE.SETTINGS) || me.customize?.length);
   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.

package/public/index.html

@@ -132,7 +132,51 @@
       </div>
     </section>
 
+    <div id="adminSettings" hidden>
+    <div class="set-divider"><h2>Admin</h2><p id="adminSettingsNote">Deployment-wide: these apply to everyone and are stored in the config file, so copying it reproduces this setup.</p></div>
+
+    <section class="set-group">
+      <header><h3>Default endpoint</h3><p>The OpenAI-compatible API used by every model that does not name a connector.</p></header>
+      <div class="set-grid">
+        <div class="span-2"><label for="baseUrl">API URL</label><input id="baseUrl" spellcheck="false" placeholder="https://openrouter.ai/api/v1"></div>
+        <div class="span-2"><label for="apiKey">API key</label><input id="apiKey" type="password" autocomplete="off" spellcheck="false"><small id="apiKeyNote">Write-only: stored in the config file, never shown again. Leave blank to keep the current key.</small></div>
+        <div class="span-2"><button id="testDefault" type="button">Test connection</button> <span id="testDefaultMsg" class="usage"></span></div>
+      </div>
+    </section>
+
     <section class="set-group">
+      <header><h3>Connectors</h3><p>More endpoints, each with its own URL and key. A model picks one by name.</p></header>
+      <div id="connectorsBox"></div>
+      <button id="addConnector" type="button">Add connector</button>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Models</h3><p>The catalog. Once any model is listed, only listed models can be picked, and people see the label, never the provider id.</p></header>
+      <div id="modelsBox"></div>
+      <button id="addModel" type="button">Add model</button>
+    </section>
+
+    <section class="set-group">
+      <header><h3>Advanced model behaviour</h3><p>Rarely changed. Per-model values in the catalog override these.</p></header>
+      <div class="set-grid">
+        <div><label for="llmCompaction">Summarise dropped turns</label><select id="llmCompaction"><option value="true">Yes, with the chat's model</option><option value="false">No, just drop them</option></select></div>
+        <div><label for="compactionMaxTokens">Summary length cap</label><input id="compactionMaxTokens" type="number" min="256" step="256"><small>Output tokens for that summary request.</small></div>
+        <div><label for="expandCharBudget">Expand budget</label><input id="expandCharBudget" type="number" min="0" step="1000"><small>Characters one expand_context call may return.</small></div>
+        <div><label for="cache">Prompt caching</label><select id="cache"><option value="true">On</option><option value="false">Off</option></select></div>
+        <div><label for="reasoningReplay">Replay past reasoning</label><select id="reasoningReplay"><option value="auto">Automatic</option><option value="omit">Never</option><option value="reasoning_content">reasoning_content</option><option value="reasoning_details">reasoning_details</option></select></div>
+        <div class="span-2"><label for="extraBody">Extra request body (JSON)</label><textarea id="extraBody" rows="4" spellcheck="false" placeholder="{}"></textarea><small>Merged into every completion request, e.g. gateway routing.</small></div>
+      </div>
+    </section>
+    </div>
+
+    <div class="set-divider mine" id="myPrefsHead"><h2>My preferences</h2><p>Only for you.</p></div>
+
+    <section class="set-group mine" id="myInstructionsGroup" hidden>
+      <header><h3>My instructions</h3><p>Added after the system prompt on your chats only.</p></header>
+      <textarea id="myInstructions" rows="5" maxlength="4000" aria-label="My instructions"></textarea>
+    </section>
+
+    <section class="set-group mine" id="themeGroup">
       <header><h3>Appearance</h3></header>
       <div class="set-grid">
         <div><label for="theme">Theme</label><select id="theme"><option value="">Default</option></select></div>
@@ -204,6 +248,15 @@
         <div id="adminMsg" class="usage"></div>
         <div id="adminUsers" class="admin-users"></div>
       </section>
+      <section id="adminPolicy" class="statistics-block">
+        <div class="sec-h">what users can do <span id="policyMsg" class="usage"></span></div>
+        <div class="usage admin-note">Applies to everyone with the user role. Admins always have everything. Saved to the config file.</div>
+        <div class="policy-group"><b>Features</b><div id="policyFeatures" class="policy-checks"></div></div>
+        <div class="policy-group" id="policyModelsGroup"><b>Models they may pick</b><div id="policyModels" class="policy-checks"></div></div>
+        <div class="policy-group"><b>They may customise</b><div id="policyCustomize" class="policy-checks"></div></div>
+        <div class="policy-group"><b>New users start as</b> <select id="policyNewUsers"><option value="approved">approved</option><option value="pending">pending (an admin approves)</option></select></div>
+        <button id="policySave" class="primary" type="button">Save policy</button>
+      </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>

package/public/panels/admin.js

@@ -86,6 +86,7 @@ function showView(title, meta) {
   adminViewRequest++;
   stopPoll();
   $('adminUsers').parentElement.hidden = true;
+  $('adminPolicy').hidden = true;
   $('adminView').hidden = false;
   $('adminViewTitle').textContent = title;
   $('adminViewMeta').textContent = meta || '';
@@ -172,12 +173,53 @@ async function openChat(chatId, user) {
   if (out.running) pollTimer = setTimeout(() => { if (request === adminViewRequest && $('admin').classList.contains('open') && !$('adminView').hidden) openChat(chatId, user); }, 4000);
 }
 
+/* ---------- access policy: what the user role may do ---------- */
+
+function checks(box, name, options, chosen, label = (v) => v) {
+  box.replaceChildren(...options.map((v) => {
+    const cb = Object.assign(el('input'), { type: 'checkbox', value: v, checked: chosen.includes(v) });
+    const l = el('label');
+    l.append(cb, ` ${label(v)}`);
+    return l;
+  }));
+}
+const picked = (box) => [...box.querySelectorAll('input:checked')].map((i) => i.value);
+
+async function loadPolicy() {
+  let p;
+  try { p = await api.get('/api/admin/policy'); } catch (err) { $('policyMsg').textContent = err.message; return; }
+  const all = (v, list) => (v === '*' ? list : v || []);
+  checks($('policyFeatures'), 'features', p.features.filter((f) => f !== 'admin' && f !== 'oversight'), all(p.user.features, p.features));
+  $('policyModelsGroup').hidden = !p.models.length;
+  checks($('policyModels'), 'models', p.models, all(p.user.models, p.models));
+  checks($('policyCustomize'), 'customize', p.customizable, p.customize);
+  $('policyNewUsers').value = p.newUsers;
+  const locked = p.locked;
+  for (const n of $('adminPolicy').querySelectorAll('input,select,button')) n.disabled = locked;
+  $('policyMsg').textContent = locked ? 'set in code or frozen: change the files' : '';
+  $('policySave').onclick = async () => {
+    const models = picked($('policyModels'));
+    try {
+      await api.post('/api/admin/policy', {
+        features: picked($('policyFeatures')),
+        // Everything ticked means "no restriction", so a model added later is not silently excluded.
+        ...(p.models.length ? { models: models.length === p.models.length ? '*' : models } : {}),
+        customize: picked($('policyCustomize')),
+        newUsers: $('policyNewUsers').value
+      });
+      $('policyMsg').textContent = 'saved';
+    } catch (err) { $('policyMsg').textContent = err.message; }
+  };
+}
+
 export async function loadAdmin() {
   const request = ++adminLoadRequest;
   adminViewRequest++;
   stopPoll();
   $('adminView').hidden = true;
   $('adminUsers').parentElement.hidden = false;
+  $('adminPolicy').hidden = false;
+  loadPolicy();
   const box = $('adminUsers');
   $('adminMsg').textContent = '';
   let out;

package/public/panels/connectors.js

@@ -0,0 +1,184 @@
+/**
+ * The admin editors for connectors (endpoint + key) and the model catalog.
+ * Keys are write-only: a row shows whether one is set (and its last four
+ * characters), and a blank key field means "keep it". Everything is read back
+ * from the DOM on save, so the rows are the draft until then.
+ */
+import { $, el } from '../core/dom.js';
+import { api } from '../core/api.js';
+
+const TAGS = ['vision', 'reasoning', 'tools'];
+// Per-model settings with no field of their own; edited as one JSON object.
+const OVERRIDE_KEYS = ['systemPrompt', 'temperature', 'maxTokens', 'maxToolRounds', 'cacheMode', 'cacheTtl', 'extraBody', 'reasoningReplay'];
+
+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 textInput = (value, placeholder) => Object.assign(el('input'), { value: value ?? '', placeholder: placeholder || '', spellcheck: false });
+
+function removeButton(row) {
+  const b = Object.assign(el('button'), { type: 'button', textContent: 'Remove' });
+  b.onclick = () => row.remove();
+  return b;
+}
+
+/* ---------- connectors ---------- */
+
+function connectorRow(c = {}) {
+  const row = el('div', 'cfg-row');
+  row.dataset.kind = 'connector';
+  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;
+  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 || ''})` : 'none'), { type: 'password', autocomplete: 'off' });
+  const clear = Object.assign(el('input'), { type: 'checkbox' });
+  const grid = el('div', 'set-grid');
+  grid.append(
+    field('Id', id, 'What a model names in its connector field.'),
+    field('Label', label),
+    Object.assign(field('API URL', url), { className: 'span-2' }),
+    Object.assign(field('API key', key, 'Write-only. Blank keeps the current key.'), { className: 'span-2' })
+  );
+  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');
+  clearLabel.append(clear, ' remove stored key');
+  const actions = el('div', 'cfg-actions');
+  actions.append(test, msg, ...(c.hasApiKey ? [clearLabel] : []), removeButton(row));
+  row.append(grid, actions);
+  row.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 } : {})
+  });
+  return row;
+}
+
+/* ---------- model catalog ---------- */
+
+function modelRow(m = {}, connectorIds = []) {
+  const row = el('div', 'cfg-row');
+  row.dataset.kind = 'model';
+  const id = textInput(m.id, 'fast');
+  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');
+  connector.className = 'model-connector';
+  const none = Object.assign(el('option'), { value: '', textContent: 'Default endpoint' });
+  connector.appendChild(none);
+  for (const cid of connectorIds) connector.appendChild(Object.assign(el('option'), { value: cid, textContent: cid }));
+  if (m.connector && !connectorIds.includes(m.connector)) connector.appendChild(Object.assign(el('option'), { value: m.connector, textContent: m.connector }));
+  connector.value = m.connector || '';
+  const enabled = Object.assign(el('input'), { type: 'checkbox', checked: m.enabled !== false });
+  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 overrides = Object.assign(el('textarea'), { rows: 3, spellcheck: false, placeholder: '{ "temperature": 0.3 }' });
+  const kept = Object.fromEntries(OVERRIDE_KEYS.filter((k) => m[k] !== undefined).map((k) => [k, m[k]]));
+  overrides.value = Object.keys(kept).length ? JSON.stringify(kept, null, 2) : '';
+  const enabledLabel = el('label');
+  enabledLabel.append(enabled, ' enabled');
+
+  const grid = el('div', 'set-grid');
+  grid.append(
+    field('Id', id, 'Stable handle: roles and preferences name this.'),
+    field('Label', label, 'What people see.'),
+    Object.assign(field('Description', description), { className: 'span-2' }),
+    field('Provider model id', model, 'Blank: the id above.'),
+    field('Connector', connector),
+    Object.assign(field('Capabilities', tags), { className: 'span-2' }),
+    Object.assign(field('Overrides (JSON)', overrides, `Optional: ${OVERRIDE_KEYS.join(', ')}.`), { className: 'span-2' })
+  );
+  const actions = el('div', 'cfg-actions');
+  actions.append(enabledLabel, removeButton(row));
+  row.append(grid, actions);
+  row.read = () => {
+    let extra = {};
+    if (overrides.value.trim()) {
+      try { extra = JSON.parse(overrides.value); } catch (err) { throw new Error(`model "${id.value.trim()}" overrides: ${err.message}`); }
+      const bad = Object.keys(extra).filter((k) => !OVERRIDE_KEYS.includes(k));
+      if (bad.length || !extra || typeof extra !== 'object' || Array.isArray(extra)) throw new Error(`model "${id.value.trim()}" overrides must be an object of: ${OVERRIDE_KEYS.join(', ')}`);
+    }
+    const chosen = tagBoxes.filter(([, cb]) => cb.checked).map(([t]) => t);
+    return {
+      id: id.value.trim(),
+      ...(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 } : {}),
+      ...(chosen.length ? { tags: chosen } : {}),
+      ...(enabled.checked ? {} : { enabled: false }),
+      ...extra
+    };
+  };
+  return row;
+}
+
+const rows = (box) => [...box.children];
+const connectorIds = () => rows($('connectorsBox')).map((r) => r.read().id).filter(Boolean);
+
+/** Rebuilds both editors from /api/config. */
+export function renderConnectors(cfg) {
+  $('connectorsBox').replaceChildren(...(cfg.connectors || []).map((c) => connectorRow(c)));
+  const ids = (cfg.connectors || []).map((c) => c.id);
+  $('modelsBox').replaceChildren(...(cfg.models || []).map((m) => modelRow(m, ids)));
+}
+
+/** What the editors currently hold, as the config patch to save. Throws on bad JSON. */
+export function collectConnectors() {
+  return {
+    connectors: rows($('connectorsBox')).map((r) => r.read()),
+    models: rows($('modelsBox')).map((r) => r.read())
+  };
+}
+
+/** Locks or unlocks every control in the three admin editors. */
+export function lockConnectors(locked) {
+  for (const id of ['connectorsBox', 'modelsBox']) for (const n of $(id).querySelectorAll('input,select,textarea,button')) n.disabled = locked;
+  $('addConnector').disabled = locked;
+  $('addModel').disabled = locked;
+}
+
+export function initConnectors() {
+  $('addConnector').onclick = () => {
+    $('connectorsBox').appendChild(connectorRow());
+    // New connector ids become choices in every model row.
+    refreshConnectorChoices();
+  };
+  $('addModel').onclick = () => $('modelsBox').appendChild(modelRow({}, connectorIds()));
+  // Ids are typed after the row exists, so the model rows re-read them on focus.
+  $('modelsBox').addEventListener('focusin', (e) => { if (e.target.classList?.contains('model-connector')) refreshConnectorChoices(); });
+}
+
+function refreshConnectorChoices() {
+  const ids = connectorIds();
+  for (const sel of $('modelsBox').querySelectorAll('.model-connector')) {
+    const current = sel.value;
+    sel.replaceChildren(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;
+  }
+}

package/public/panels/settings.js

@@ -1,9 +1,10 @@
 /** The settings panel: model/runtime config, MCP servers, and the tools list. */
 import { $, el, num, installLink } from '../core/dom.js';
 import { addError } from '../chat/transcript.js';
-import { whoami } from '../core/access.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';
 
 /**
  * The tools panel: built-ins first, then every MCP server with its own health
@@ -233,6 +234,17 @@ export async function loadMcp() {
 export function initSettings() {
   $('saveMcp').onclick = saveMcp;
   $('save').onclick = saveConfig;
+  $('testDefault').onclick = testDefault;
+  initConnectors();
+}
+
+async function testDefault() {
+  const msg = $('testDefaultMsg');
+  msg.textContent = 'testing…';
+  try {
+    const out = await api.post('/api/connectors/test', { id: 'default', baseUrl: $('baseUrl').value.trim(), apiKey: $('apiKey').value });
+    msg.textContent = out.ok ? `reachable${out.models != null ? ` · ${out.models} models` : ''}` : out.error || `status ${out.status}`;
+  } catch (err) { msg.textContent = err.message; }
 }
 
 async function saveMcp() {
@@ -254,7 +266,8 @@ async function saveMcp() {
 
 const FORM_KEYS = ['systemPrompt', 'model', 'temperature', 'maxTokens', 'timezone', 'maxToolRounds', 'askUserTimeoutSeconds', 'cacheTtl',
   'cacheMode', 'compactThreshold', 'keepTurns', 'maxInlineChars', 'maxTurnChars', 'compactMinSaved',
-  'maxHistoryTokens', 'toolApproval'];
+  'maxHistoryTokens', 'toolApproval', 'baseUrl', 'apiKey', 'llmCompaction', 'compactionMaxTokens', 'expandCharBudget',
+  'cache', 'reasoningReplay', 'extraBody'];
 
 // The browser's IANA zones, plus whatever the config holds if the browser
 // doesn't list it, so a saved value is never silently swapped for another.
@@ -285,13 +298,19 @@ export async function loadConfig() {
   }
   lockedKeys = new Set(cfg.lockedKeys || []);
   readOnly = Boolean(cfg.readOnly);
+  const mine = whoami().customize || [];
+  $('settings').classList.toggle('prefs-only', readOnly);
+  $('myInstructionsGroup').hidden = !mine.includes('instructions');
+  $('myInstructions').value = whoami().instructions || '';
+  $('themeGroup').hidden = readOnly && !mine.includes('theme');
+  $('myPrefsHead').hidden = readOnly ? !mine.length : false;
   for (const id of FORM_KEYS) {
     const locked = readOnly || lockedKeys.has(id);
     $(id).disabled = locked;
     $(id).title = readOnly ? 'managed by your administrator' : locked ? 'set in code' : '';
   }
-  $('save').disabled = readOnly || Boolean(cfg.frozen);
-  if (readOnly) $('saveMsg').textContent = 'managed by your administrator';
+  $('save').disabled = readOnly ? !mine.includes('instructions') : Boolean(cfg.frozen);
+  if (readOnly) $('saveMsg').textContent = mine.length ? '' : 'managed by your administrator';
   else if (cfg.frozen) $('saveMsg').textContent = 'frozen deployment: settings are managed in its files';
   if (cfg.frozen) for (const id of FORM_KEYS) $(id).title = 'frozen deployment: change the config file';
   $('systemPrompt').value = cfg.systemPrompt;
@@ -312,6 +331,22 @@ export async function loadConfig() {
   fillTimezones(cfg.timezone);
   $('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;
+  if (admin) {
+    $('baseUrl').value = cfg.baseUrl ?? '';
+    $('apiKey').value = '';
+    $('apiKey').placeholder = cfg.hasApiKey ? `set (…${cfg.keyHint || ''}) — blank keeps it` : 'not set';
+    $('llmCompaction').value = String(cfg.llmCompaction !== false);
+    $('compactionMaxTokens').value = cfg.compactionMaxTokens ?? 8192;
+    $('expandCharBudget').value = cfg.expandCharBudget ?? 8000;
+    $('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'));
+  }
   // 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.
@@ -323,6 +358,15 @@ export async function loadConfig() {
 }
 
 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; }
+  }
   const patch = {
     systemPrompt: $('systemPrompt').value,
     model: $('model').value.trim(),
@@ -341,12 +385,32 @@ 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) {
+      $('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;
   }
   await loadConfig();
+  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);

package/public/styles.css

@@ -1390,6 +1390,22 @@ button.pop-item:active:not(:disabled) { transform: none; }
 .set-group small { display: block; margin-top: .3125rem; color: var(--faint); font-size: var(--fs-meta); line-height: 1.4; }
 .set-group textarea#systemPrompt { font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.55; }
 @media (max-width: 720px) { .set-grid { grid-template-columns: 1fr; } }
+.set-divider { width: min(46rem, 100%); margin: 1.5rem auto .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
+.set-divider h2 { margin: 0; font-size: 1.0625rem; }
+.set-divider p { margin: .125rem 0 0; color: var(--muted); font-size: var(--fs-small); }
+.policy-group { margin: .75rem 0; }
+.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; }
 
 .brand-home {
   flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem;