cortico 0.1.1 → 0.1.3

package/src/web/client/features/providers/index.ts

@@ -1,100 +1,192 @@
-/**
- * 「语言模型」页 —— 模型供应模块的入口。
- *
- * 左侧次级菜单列出 manifest 里 kind 为 `llm` 的页(每个供应模块一条),右侧由
- * 嵌入的控制台页宿主渲染选中模块的面板:实例与模型、授权、托管、配置。这一页不认识
- * 任何具体模块——名字、灯、徽标与面板全部来自 manifest。
- *
- * 路由 `#/providers/<pageId>/<panelId>`:第二段选模块,第三段选面板;缺省取第一个
- * 模块及其第一个面板。面板页签由宿主渲染并指向同一前缀,所以切换留在本页内。
- */
-
-import { PROVIDERS_LAMP_ID } from '../../../shared/console-protocol.ts';
-import { lampRow, paintLamps, subscribeLamps } from '../../ui/lamp.ts';
 import { pageIntro } from '../../ui/page.ts';
-import type { Route } from '../../core/router.ts';
+import { icon } from '../../ui/icons.ts';
+import { NEW_DRAFT_ID, providerDrafts } from './drafts.ts';
 import type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { get, post } from '../../core/api.ts';
 import { S } from './strings.ts';
+import { connectionPath, type HubState, type Connection, type Module, type Detail, type Editing } from './types.ts';
+import { mountDetail, type DetailController } from './detail.ts';
 
-const PROVIDERS_ROUTE = 'providers';
-/** 这一页只列供应模块;人格与 IO 各有自己的入口。 */
-const PROVIDER_KIND = 'llm';
-
+/** How often the card list re-reads other deployments' usage. */
+const USAGE_REFRESH_MS = 5000;
 export async function mountProviders(ctx: FeatureContext): Promise<void> {
   const { ui, root } = ctx;
+  root.append(pageIntro(ui, S.pageTitle));
+  const report = ui.msgline();
+  const layout = ui.h('div', 'connection-hub');
+  const index = ui.h('div', 'connection-index');
+  const cards = ui.h('div', 'connection-cards');
+  const detailRoot = ui.h('div', 'connection-detail');
+  layout.append(index, detailRoot); root.append(report, layout);
+  const opts = { signal: ctx.signal };
+  let state = await get<HubState>('/api/providers', opts);
+  state.providers.sort((a, b) => Number(b.name === state.active) - Number(a.name === state.active));
+  const modules = await get<Module[]>('/api/provider-modules', opts);
+  if (ctx.signal.aborted) return;
+  const drafts = providerDrafts(root.ownerDocument.defaultView!.localStorage, state.scope);
+  let selected = '';
+  let newDraft: Editing | null = drafts.get(NEW_DRAFT_ID);
+  const invalid = new Set<string>();
+  let controller: DetailController | null = null;
+  let renderId = 0;
+  interface CardNode {
+    el: HTMLElement; title: HTMLElement; model: HTMLElement; url: HTMLElement; status: HTMLElement; secondary: HTMLElement;
+    kind: HTMLElement; activate: HTMLButtonElement; erase: HTMLButtonElement;
+  }
+  const nodes = new Map<string, CardNode>();
+  const rows = new Map<string, Connection>();
   const doc = root.ownerDocument;
-  const intro = pageIntro(ui, S.pageTitle);
-  const layout = ui.h('div', 'settings-layout providerhub');
-  const index = ui.h('nav', 'settings-index');
-  index.setAttribute('aria-label', S.modulesAria);
-  index.setAttribute('role', 'tablist');
-  const content = ui.h('div', 'settings-content');
-  layout.append(index, content);
-  root.append(intro, layout);
-
-  if (!ctx.consolePageHost) {
-    content.appendChild(ui.placeholder(S.needHost));
-    return;
+  const run = (work: () => Promise<unknown>) => { void work().catch(error => { if (!ctx.signal.aborted) report.textContent = String(error); }); };
+  // 同时只有一张卡处在「确认删除」态。
+  let armed: (() => void) | null = null;
+  const disarm = () => { armed?.(); armed = null; };
+  const fallback = () => state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '';
+  function paint() {
+    report.textContent = state.active && !state.providers.some(item => item.name === state.active) ? S.missing + state.active : '';
+    const all: Array<Connection | { name: string; moduleTitle: string; model: string | null; baseUrl: string; readiness: { state: string } }> = [...state.providers];
+    if (newDraft) all.unshift({ name: NEW_DRAFT_ID, moduleTitle: moduleName(newDraft.entry.kind), model: newDraft.entry.spec?.model ?? null, baseUrl: newDraft.entry.baseUrl, readiness: { state: 'draft' } });
+    for (const [name, node] of nodes) if (!all.some(item => item.name === name)) { node.el.remove(); nodes.delete(name); }
+    for (const item of all) {
+      const identity = item.name;
+      let node = nodes.get(identity);
+      if (!node) {
+        const el = ui.h('article', 'connection-card'); el.dataset.provider = identity;
+        const title = ui.h('div', 'connection-name');
+        const facts = ui.h('div', 'connection-facts');
+        const fact = (key: string) => { const box = ui.h('span', `kv kv-${key}`); const value = ui.h('span', 'kv-v'); box.append(ui.h('span', 'kv-k', key), value); facts.append(box); return value; };
+        const kind = fact('kind'); const model = fact('model'); const url = fact('baseUrl');
+        const status = ui.h('div', 'connection-status'); const secondary = ui.h('div', 'connection-secondary');
+        const activate = ui.button('⇄', { size: 'sm', onClick: () => run(async () => {
+          activate.disabled = true;
+          try { await post(connectionPath(identity) + '/activate', {}, opts); state.active = identity; paint(); }
+          finally { activate.disabled = false; }
+        }) });
+        activate.classList.add('connection-activate');
+        activate.setAttribute('aria-label', S.activate); activate.title = S.activate;
+        const connect = ui.h('div', 'connection-connect'); connect.append(activate, ui.h('span', 'connection-connect-label', S.connect));
+        const erase = eraseButton(identity);
+        el.append(erase, title, facts, status, secondary, connect);
+        el.tabIndex = 0;
+        el.addEventListener('keydown', event => { if (event.target === el && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); run(() => select(identity)); } }, opts);
+        el.addEventListener('click', event => { if (!(event.target as Element).closest('button')) run(() => select(identity)); }, opts);
+        if (identity === NEW_DRAFT_ID) cards.prepend(el); else cards.append(el);
+        node = { el, title, kind, model, url, status, secondary, activate, erase }; nodes.set(identity, node);
+      }
+      const active = identity === state.active;
+      node.el.classList.toggle('is-active', active); node.el.classList.toggle('is-selected', identity === selected);
+      node.title.textContent = identity === NEW_DRAFT_ID ? newDraft?.name || S.newName : identity;
+      node.title.title = node.title.textContent;
+      const draft = identity === NEW_DRAFT_ID ? null : drafts.get(identity);
+      const model = draft?.entry.spec?.model || item.model || '—'; const url = draft?.entry.baseUrl || item.baseUrl || '—';
+      node.kind.textContent = item.moduleTitle; node.kind.title = item.moduleTitle;
+      node.model.textContent = model; node.url.textContent = url;
+      node.model.title = model; node.url.title = url;
+      const readiness = invalid.has(identity) && identity !== NEW_DRAFT_ID ? 'invalid' : item.readiness.state;
+      const users = 'usage' in item ? item.usage : [];
+      const running = users.filter(user => user.running).map(user => user.name);
+      const stopped = users.filter(user => !user.running).map(user => user.name);
+      const tone = active || running.length ? 'active' : readiness === 'draft' ? 'draft' : readiness === 'ready' ? 'ready' : 'error';
+      node.status.dataset.tone = tone;
+      node.status.textContent = `${{ active: '●', ready: '✓', error: '!', draft: '✎' }[tone]} ${active ? S.active : running.length ? S.inUse(running.join('、')) : S.readiness[readiness]}`;
+      const notes: string[] = [];
+      if ((active || running.length) && readiness !== 'ready') notes.push('! ' + S.readiness[readiness]);
+      if (identity !== NEW_DRAFT_ID && drafts.has(identity)) notes.push('✎ ' + S.readiness.draft);
+      if (active && running.length) notes.push(S.inUse(running.join('、')));
+      if (stopped.length) notes.push(S.selectedBy(stopped.join('、')));
+      node.secondary.textContent = notes.join(' · ');
+      node.secondary.dataset.tone = (active || running.length) && readiness !== 'ready' ? 'error' : 'draft';
+      node.activate.parentElement!.hidden = active || identity === NEW_DRAFT_ID || readiness !== 'ready' || running.length > 0;
+      if (identity === NEW_DRAFT_ID) rows.delete(identity); else rows.set(identity, item as Connection);
+    }
   }
-  const host = ctx.consolePageHost({
-    root: content,
-    route: (pageId, panelId) => [PROVIDERS_ROUTE, pageId, panelId],
-  });
-  ctx.lifecycle.own({ dispose: () => host.unmount() });
-  content.appendChild(ui.placeholder(S.loading));
-  await host.load();
-  if (ctx.signal.aborted) return;
-
-  const providers = host.pages.filter((p) => p.kind === PROVIDER_KIND);
-  if (!providers.length) {
-    content.replaceChildren(ui.placeholder(S.none));
-    return;
+  /** 删除按钮先伸成「确认删除」,第二次点击才动手;点别处或 Esc 收回。 */
+  function eraseButton(identity: string): HTMLButtonElement {
+    const el = ui.h('button', 'connection-erase') as HTMLButtonElement;
+    el.type = 'button';
+    const text = ui.h('span', 'connection-erase-text'); text.append(ui.h('span', '', S.eraseConfirm));
+    el.append(icon(doc, 'trash'), text);
+    const label = (armedNow: boolean) => { const name = armedNow ? S.eraseConfirm : S.remove; el.title = name; el.setAttribute('aria-label', name); };
+    label(false);
+    el.addEventListener('click', event => {
+      event.stopPropagation();
+      const wasArmed = el.classList.contains('is-armed');
+      disarm();
+      if (wasArmed) { run(() => remove(identity)); return; }
+      el.classList.add('is-armed'); label(true);
+      armed = () => { el.classList.remove('is-armed'); label(false); };
+    }, opts);
+    return el;
   }
-
-  const jumps = new Map<string, HTMLButtonElement>();
-  const lampNodes = new Map<string, HTMLSpanElement>();
-  for (const p of providers) {
-    const jump = ui.h('button', 'settings-jump providerhub-jump');
-    jump.type = 'button';
-    jump.setAttribute('role', 'tab');
-    jump.append(ui.h('span', 'lbl', p.label || p.id));
-    const lamps = lampRow(doc, p.lamps ?? []);
-    jump.appendChild(lamps);
-    lampNodes.set(p.id, lamps);
-    jump.addEventListener('click', () => {
-      try { ctx.router.navigate([PROVIDERS_ROUTE, p.id]); } catch (err) { ctx.onError(err); }
-    }, { signal: ctx.signal });
-    index.appendChild(jump);
-    jumps.set(p.id, jump);
+  async function remove(identity: string): Promise<void> {
+    if (identity === NEW_DRAFT_ID) {
+      drafts.remove(NEW_DRAFT_ID); newDraft = null; invalid.delete(identity);
+      if (selected === NEW_DRAFT_ID) await select(fallback(), true); else paint();
+      return;
+    }
+    await post(connectionPath(identity) + '/delete', { expectedRevision: rows.get(identity)?.revision }, opts);
+    drafts.remove(identity); invalid.delete(identity);
+    await refresh();
+    if (selected === identity) await select(fallback(), true);
   }
-  // 灯的活数据只改那几个点,不重排菜单(与左栏同一节拍)。
-  ctx.lifecycle.own(subscribeLamps(doc, (lamps) => {
-    for (const [id, el] of lampNodes) paintLamps(el, lamps[id] ?? []);
-  }));
-
-  const show = (route: Route): void => {
-    const wanted = route.segments[1];
-    const provider = providers.find((p) => p.id === wanted) ?? providers[0]!;
-    for (const [id, jump] of jumps) {
-      const on = id === provider.id;
-      jump.classList.toggle('active', on);
-      jump.setAttribute('aria-selected', String(on));
+  async function refresh() { state = await get<HubState>('/api/providers', opts); paint(); }
+  async function select(identity: string, force = false): Promise<void> {
+    if (!force && identity === selected) return;
+    const gen = ++renderId;
+    controller?.dispose(); controller = null;
+    selected = identity; paint(); detailRoot.replaceChildren();
+    if (!identity) {
+      detailRoot.append(ui.h('h3', '', S.empty), ui.msgline(S.emptyHint), ui.button(S.create, { onClick: () => run(create) }));
+      return;
     }
-    const panel = route.segments[2];
-    void host.show(provider.id, typeof panel === 'string' && panel !== '' ? panel : undefined);
-  };
-  show(ctx.route);
-  ctx.lifecycle.own(ctx.router.onChange((route) => {
-    if (route.segments[0] !== PROVIDERS_ROUTE) return;
-    show(route);
+    const saved = identity === NEW_DRAFT_ID ? null : await get<Detail>(connectionPath(identity), opts);
+    if (gen !== renderId || ctx.signal.aborted) return;
+    const detailView = ui.h('div'); detailRoot.replaceChildren(detailView);
+    const mounted = await mountDetail({ ctx, root: detailView, modules, saved, draft: identity === NEW_DRAFT_ID ? newDraft : drafts.get(identity),
+      // Edits persist as a browser draft as they happen; a form back at its saved state drops the draft.
+      changed: (editing, hasErrors, dirty) => {
+        if (hasErrors) invalid.add(identity); else invalid.delete(identity);
+        if (identity === NEW_DRAFT_ID) { newDraft = editing; drafts.set(editing); }
+        else if (dirty) drafts.set(editing); else drafts.remove(identity);
+        paint();
+      },
+      onSaved: async (name, show = true) => { drafts.remove(identity); invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = null; await refresh(); if (show) await select(name, true); },
+      cancelled: async () => { drafts.remove(identity); invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = null; await select(identity === NEW_DRAFT_ID ? state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '' : identity, true); },
+      deleted: async () => { drafts.remove(identity); invalid.delete(identity); await refresh(); await select(state.providers.find(item => item.name === state.active)?.name || state.providers[0]?.name || '', true); },
+      duplicate: async editing => {
+        if (newDraft) { await select(NEW_DRAFT_ID); return; }
+        const used = new Set(state.providers.map(item => item.name.toLowerCase()));
+        const base = editing.name.slice(0, 56); let candidate = base; let number = 2;
+        while (used.has(candidate.toLowerCase())) candidate = `${base}-${number++}`;
+        editing.name = candidate; newDraft = editing; await select(NEW_DRAFT_ID, true);
+      },
+    });
+    if (gen !== renderId || ctx.signal.aborted) mounted.dispose(); else controller = mounted;
+  }
+  async function create() {
+    if (newDraft) return select(NEW_DRAFT_ID);
+    newDraft = { original: null, name: '', entry: { kind: '', baseUrl: '' }, secretValue: '', raw: {} };
+    drafts.set(newDraft);
+    await select(NEW_DRAFT_ID, true);
+  }
+  const moduleName = (kind: string) => modules.find(module => module.id === kind)?.title ?? kind;
+  doc.addEventListener('click', event => { if (!(event.target as Element).closest('.connection-erase')) disarm(); }, opts);
+  doc.addEventListener('keydown', event => { if (event.key === 'Escape') disarm(); }, opts);
+  const creator = ui.h('div', 'connection-create');
+  creator.append(ui.button(S.create, { variant: 'primary', onClick: () => run(create) }), ui.h('p', 'connection-create-hint', S.createHint));
+  index.append(creator, cards);
+  ctx.lifecycle.own({ dispose: () => { renderId++; controller?.dispose(); } });
+  ctx.lifecycle.own(ctx.router.onChange(route => {
+    if (route.segments[0] === 'providers' && route.segments[1]) run(() => select(route.segments[1]));
   }));
+  // Other deployments' selections and liveness change without this page; the detail form is left alone.
+  let refreshing = false;
+  ctx.lifecycle.interval(() => {
+    if (refreshing) return;
+    refreshing = true;
+    run(async () => { try { await refresh(); } finally { refreshing = false; } });
+  }, USAGE_REFRESH_MS);
+  paint();
+  const wanted = ctx.route.segments[1] ?? (newDraft ? NEW_DRAFT_ID : undefined);
+  await select(wanted && (wanted === NEW_DRAFT_ID || state.providers.some(item => item.name === wanted)) ? wanted : state.providers.find(item => item.name === state.active)?.name ?? state.providers[0]?.name ?? '', true);
 }
-
-export const providersFeature: FrameworkFeature = {
-  route: PROVIDERS_ROUTE,
-  label: S.navLabel,
-  icon: 'cpu',
-  lampId: PROVIDERS_LAMP_ID,
-  navGroup: S.navGroup,
-  mount: mountProviders,
-};
+export const providersFeature: FrameworkFeature = { route: 'providers', label: S.navLabel, icon: 'cpu', navGroup: S.navGroup, mount: mountProviders };

package/src/web/client/features/providers/strings.ts

@@ -1,23 +1,54 @@
 import { pick } from '../../core/language.ts';
-
 const zh = {
-  pageTitle: '模型提供商',
-  modulesAria: '供应模块',
-  needHost: "模型提供商设置不可用。",
-  loading: '读取供应模块…',
-  none: '没有已注册的供应模块。',
-  navLabel: '模型提供商',
-  navGroup: 'Core',
+  pageTitle: '模型供应商', navLabel: '模型供应商', navGroup: 'Core', create: '+ 新建供应商实例', newName: '未命名实例',
+  createHint: '实例 = 填一组供应商配置保存成卡片',
+  empty: '还没有模型供应商', emptyHint: '添加一条模型连接后，Cortico 才能进行模型推理。',
+  eraseConfirm: '确认删除',
+  connect: '连接', activate: '设为当前供应商', active: '当前模型', missing: '当前模型供应商不存在，配置中引用：',
+  inUse: (names: string) => `其他实例使用中：${names}`, selectedBy: (names: string) => `已被 ${names} 选用（未运行）`,
+  readiness: { ready: '可连接', 'needs-setup': '需要完善配置', 'runtime-unavailable': '运行环境未就绪', invalid: '配置错误', 'module-missing': '模块不可用', draft: '草稿' } as Record<string, string>,
+  basic: '基本信息', connection: '连接', modelSection: '模型与生成', moduleSection: '模块设置', pricing: '成本与计价', advanced: '高级协议',
+  name: '供应商名称', module: '供应商类型', url: 'API 地址', key: 'API Key', model: '模型',
+  nameHint: '英文字母、数字、- 或 _，以字母或数字开头，不允许空格或系统保留名。',
+  fixedModule: '供应商类型保存后不可更改。使用其他类型需新建供应商。',
+  test: '测试连接', testOk: '测试成功', testFailed: '测试失败',
+  keyEmpty: '输入 API Key', fetchModels: '获取模型列表',
+  reasoning: '推理强度', thinking: '开启推理', temperature: '温度', maxTokens: '最大输出 token', context: '上下文上限', tier: '服务档位', images: '接受图片',
+  catalogNoWindow: '目录没有给出这个模型的上下文上限；请按服务商文档手填。',
+  advancedHint: '仅在使用自定义 API 网关或兼容服务时调整。', secret: '密钥环境变量名',
+  extraHeaders: '附加请求头（JSON object）', extraBody: '附加请求体（JSON object）', priceRules: '完整计价规则（JSON array）',
+  shared: '共享配置：此供应商可被多个 Bot 使用。修改会改变这份共享配置；若需要不同参数，建议新建一个供应商。',
+  remove: '删除供应商', duplicate: '复制供应商', cancel: '放弃更改', save: '保存', saved: '已保存',
+  draftNote: '改动暂存在此浏览器，保存后才写入配置。API Key 不进暂存。',
+  chooseModule: '请选择供应商类型。', invalidNumber: '请输入有效范围内的数值。',
+  required: '此项必填。', jsonObject: '请输入合法 JSON 对象。', jsonArray: '请输入合法 JSON 数组。',
+  unsaved: '已暂存；保存后写入配置。',
+  deleteConfirm: '删除供应商及其目录中的全部文件？', referenced: '此供应商正在被以下 Bot 使用，不能删除：', reload: '重新加载',
 };
-
 const en: typeof zh = {
-  pageTitle: 'LLM Provider',
-  modulesAria: 'Provider modules',
-  needHost: "LLM provider settings unavailable.",
-  loading: 'Loading provider modules…',
-  none: 'No provider modules registered.',
-  navLabel: 'LLM Provider',
-  navGroup: 'Core',
+  pageTitle: 'Model connections', navLabel: 'Model connections', navGroup: 'Core', create: '+ New connection instance', newName: 'Unnamed instance',
+  createHint: 'An instance is one set of provider settings saved as a card.',
+  empty: 'No model connections yet', emptyHint: 'Add a model connection to enable inference.',
+  eraseConfirm: 'Confirm delete',
+  connect: 'Connect', activate: 'Set current connection', active: 'Current model', missing: 'Current model connection is missing: ',
+  inUse: (names: string) => `In use by: ${names}`, selectedBy: (names: string) => `Selected by ${names} (not running)`,
+  readiness: { ready: 'Ready to connect', 'needs-setup': 'Needs setup', 'runtime-unavailable': 'Runtime unavailable', invalid: 'Invalid configuration', 'module-missing': 'Module unavailable', draft: 'Draft' },
+  basic: 'Basic information', connection: 'Connection', modelSection: 'Model and generation', moduleSection: 'Module settings', pricing: 'Pricing', advanced: 'Advanced protocol',
+  name: 'Connection name', module: 'Connection type', url: 'API URL', key: 'API Key', model: 'Model',
+  nameHint: 'English letters, digits, - or _; start with a letter or digit. No spaces or reserved system names.',
+  fixedModule: 'The connection type cannot change after saving. Create a connection to use another type.',
+  test: 'Test connection', testOk: 'Test successful', testFailed: 'Test failed',
+  keyEmpty: 'Enter API Key', fetchModels: 'Fetch model list',
+  reasoning: 'Reasoning effort', thinking: 'Enable reasoning', temperature: 'Temperature', maxTokens: 'Max output tokens', context: 'Context limit', tier: 'Service tier', images: 'Accept images',
+  catalogNoWindow: 'The model list states no context window for this model; fill it in from the provider\'s documentation.',
+  advancedHint: 'Adjust only for custom API gateways or compatible services.', secret: 'Credential environment variable',
+  extraHeaders: 'Extra headers (JSON object)', extraBody: 'Extra request body (JSON object)', priceRules: 'Full pricing rules (JSON array)',
+  shared: 'Shared configuration: multiple bots can use this connection. Changes update this shared configuration; create another connection if you need different settings.',
+  remove: 'Delete connection', duplicate: 'Duplicate connection', cancel: 'Discard changes', save: 'Save', saved: 'Saved',
+  draftNote: 'Edits are kept in this browser and written to the configuration on save. API Keys are never kept.',
+  chooseModule: 'Choose a connection type.', invalidNumber: 'Enter a number within the allowed range.',
+  required: 'Required.', jsonObject: 'Enter a valid JSON object.', jsonArray: 'Enter a valid JSON array.',
+  unsaved: 'Kept as a draft; written on save.',
+  deleteConfirm: 'Delete this connection and all files in its directory?', referenced: 'This connection is used by these bots and cannot be deleted: ', reload: 'Reload',
 };
-
 export const S = pick({ zh, en });

package/src/web/client/features/providers/types.ts

@@ -0,0 +1,15 @@
+import type { ProviderHubApi } from '../../../../providers/hub-api.ts';
+export type HubState = ReturnType<ProviderHubApi['list']>;
+export type Connection = HubState['providers'][number];
+export type Detail = ReturnType<ProviderHubApi['detail']>;
+export type Module = ReturnType<ProviderHubApi['moduleList']>[number];
+export interface Editing {
+  original: string | null;
+  copyFrom?: { name: string; revision: string };
+  name: string;
+  entry: Detail['entry'];
+  revision?: string;
+  secretValue: string;
+  raw: Record<string, string>;
+}
+export const connectionPath = (name: string) => `/api/providers/${encodeURIComponent(name)}`;

package/src/web/client/features/settings/general.ts

@@ -1,4 +1,5 @@
 import { LANGUAGE, saveLanguage, type Language } from '../../core/language.ts';
+import { post } from '../../core/api.ts';
 import type { FeatureContext } from '../feature.ts';
 import { S } from './strings.ts';
 
@@ -21,6 +22,17 @@ export function mountGeneral(ctx: FeatureContext): void {
     group.append(button);
   }
 
+  if (ctx.capabilities.auth) {
+    const access = ui.sheet({ title: S.access, en: 'access', desc: S.accessDesc });
+    const signOut = ui.h('button', 'btn', S.signOut);
+    signOut.type = 'button';
+    signOut.addEventListener('click', () => {
+      void post('/api/auth/logout', {}, { signal }).then(() => win.location.reload()).catch(ctx.onError);
+    }, { signal });
+    access.body.appendChild(signOut);
+    root.append(access.el);
+  }
+
   async function changeLanguage(language: Language): Promise<void> {
     if (!await ui.confirm({ title: S.reloadTitle, body: S.reloadBody }) || signal.aborted) return;
     saveLanguage(language, win.localStorage);

package/src/web/client/features/settings/strings.ts

@@ -7,6 +7,9 @@ const zh = {
   languageDesc: '仅保存在当前浏览器，刷新页面后生效。',
   reloadTitle: '切换界面语言？',
   reloadBody: '页面将刷新，未保存的编辑会丢失。Bot 将继续运行。',
+  access: '访问',
+  accessDesc: '这个控制台设置了访问密码;登录态保存在当前浏览器的 Cookie 里。',
+  signOut: '退出登录',
   appearance: '外观',
   appearanceDesc: '控制台主题、明暗模式与自定义配色。',
 
@@ -22,6 +25,9 @@ const en: typeof zh = {
   languageDesc: 'Saved in this browser; takes effect after reloading.',
   reloadTitle: 'Change interface language?',
   reloadBody: 'The page will reload and unsaved edits will be lost. The bot will keep running.',
+  access: 'Access',
+  accessDesc: 'This console is protected by an access password; the sign-in is kept in a cookie in this browser.',
+  signOut: 'Sign out',
   appearance: 'Appearance',
   appearanceDesc: 'Console theme, light/dark mode and custom palettes.',
 

package/src/web/client/main.ts

@@ -215,6 +215,10 @@ export function boot(doc: Document = document): { dispose(): void } {
     }
     const head = route.segments[0];
 
+    if (head === PROVIDER_ROUTE && route.segments[1]?.startsWith('llm:')) {
+      router.replace(['providers']);
+      return;
+    }
     if (head === PROVIDER_ROUTE) {
       unmountFeature();
       const pageId = route.segments[1];

package/src/web/client/shell/index.ts

@@ -360,7 +360,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
 
     // 只列已装配的:左栏是"能去的地方",不是全量清单。未装配的仍由各自的
     // 总览页负责露面(那里才有"为什么没装上"的位置)。供应模块(kind `llm`)不在
-    // 这里逐个列出:它们的入口是框架的「语言模型」页,模块清单是那一页里的次级菜单。
+    // 这里逐个列出:它们的入口是框架的「模型提供商」页,模块清单是那一页里的次级菜单。
     const listed = consolePages.filter((p) => p.availability === 'active');
     // Persona 页在前,它的 Memory 页跟在后面,再是归这一组的框架页(系统提示词),同一组。
     const personas = [

package/src/web/client/ui/fields.ts

@@ -138,7 +138,9 @@ export function checkbox(
  */
 export function field(doc: Document, label: string, control: HTMLElement): HTMLLabelElement {
   const el = h(doc, 'label', 'fieldrow');
-  el.append(h(doc, 'span', 'fieldlabel', label), control);
+  const caption = h(doc, 'span', 'fieldlabel', label.replace(/\s*\*$/, ''));
+  if (/\*$/.test(label)) caption.append(h(doc, 'span', 'required-mark', ' *'));
+  el.append(caption, control);
   return el;
 }
 

package/src/web/client/ui/icons.ts

@@ -18,7 +18,8 @@ export type ConsoleIconName =
   | 'eye'
   | 'eye-off'
   | 'pencil'
-  | 'refresh';
+  | 'refresh'
+  | 'trash';
 
 type Shape = readonly [tag: 'path' | 'circle' | 'rect' | 'line', attrs: Readonly<Record<string, string>>];
 
@@ -102,6 +103,13 @@ const SHAPES: Readonly<Record<ConsoleIconName, readonly Shape[]>> = {
     ['path', { d: 'M21 12a9 9 0 1 1-2.6-6.4' }],
     ['path', { d: 'M21 3v6h-6' }],
   ],
+  trash: [
+    ['path', { d: 'M4 7h16' }],
+    ['path', { d: 'M9.5 7V5h5v2' }],
+    ['path', { d: 'M6.5 7v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7' }],
+    ['path', { d: 'M10 11v6' }],
+    ['path', { d: 'M14 11v6' }],
+  ],
 };
 
 /**

package/src/web/client/ui/prompt-input.tsx

@@ -44,7 +44,7 @@ const TEXTAREA_CLASS =
 
 /** 两枚圆形图标钮共用的底:尺寸、焦点环、禁用态。 */
 const ICON_BUTTON =
-  'inline-flex size-8 shrink-0 items-center justify-center rounded-full p-0 outline-none transition-[background-color,color,opacity,transform] duration-150 disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring/40 [&_svg]:pointer-events-none [&_svg]:size-4';
+  'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 outline-none transition-[background-color,color,opacity,transform] duration-150 disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring/40 [&_svg]:pointer-events-none [&_svg]:size-4';
 
 /** 发送钮:实底,是这一栏唯一的主动作。 */
 const SEND_CLASS = `${ICON_BUTTON} self-end bg-foreground text-background hover:bg-foreground/90 active:translate-y-px focus-visible:ring-offset-2 focus-visible:ring-offset-background`;
@@ -124,6 +124,7 @@ const PromptComposer = React.forwardRef<ComposerHandle, { opts: ConsolePromptInp
     const [placeholder, setPlaceholder] = React.useState<string | null>(null);
     const textarea = React.useRef<HTMLTextAreaElement>(null);
     const tools = React.useRef<HTMLSpanElement>(null);
+    const leading = React.useRef<HTMLSpanElement>(null);
     const picker = React.useRef<HTMLInputElement>(null);
     const nextId = React.useRef(1);
     const imagesOpts = opts.images;
@@ -137,6 +138,14 @@ const PromptComposer = React.forwardRef<ComposerHandle, { opts: ConsolePromptInp
       return () => node.remove();
     }, [opts.tools]);
 
+    React.useLayoutEffect(() => {
+      const node = opts.leading;
+      const host = leading.current;
+      if (!node || !host) return;
+      host.appendChild(node);
+      return () => node.remove();
+    }, [opts.leading]);
+
     React.useImperativeHandle(ref, () => ({
       focus: () => textarea.current?.focus(),
       setDisabled,
@@ -237,10 +246,13 @@ const PromptComposer = React.forwardRef<ComposerHandle, { opts: ConsolePromptInp
           />
         </div>
         <div className="flex min-h-9 items-center justify-between gap-2 px-1">
-          <span className="truncate px-2 text-xs text-muted-foreground">
-            {note ? <span className="text-danger">{note}</span>
-              : pending > 0 ? S.processingImages(pending)
-              : opts.hint ?? S.enterToSend}
+          <span className="flex min-w-0 items-center gap-1">
+            <span ref={leading} className="flex items-center" />
+            <span className="truncate px-1 text-xs text-muted-foreground">
+              {note ? <span className="text-danger">{note}</span>
+                : pending > 0 ? S.processingImages(pending)
+                : opts.hint}
+            </span>
           </span>
           <div className="flex items-center gap-1">
             {imagesOpts && (

package/src/web/client/ui/strings.ts

@@ -27,7 +27,6 @@ const zh = {
   messageInput: '消息输入',
   typeMessage: '输入消息…',
   processingImages: (count: number) => `处理 ${count} 张图片…`,
-  enterToSend: 'Enter 发送 · Shift+Enter 换行',
   sendMessage: '发送消息',
   addImage: '添加图片',
   addImageHint: '添加图片（也可粘贴或拖入）',
@@ -61,7 +60,6 @@ const en: typeof zh = {
   messageInput: 'Message input',
   typeMessage: 'Type a message…',
   processingImages: (count: number) => `Processing ${count} image(s)…`,
-  enterToSend: 'Enter to send · Shift+Enter for newline',
   sendMessage: 'Send message',
   addImage: 'Add image',
   addImageHint: 'Add image (paste or drop also works)',