cortico 0.1.0 → 0.1.2

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

@@ -1,100 +1,186 @@
-/**
- * 「语言模型」页 —— 模型供应模块的入口。
- *
- * 左侧次级菜单列出 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 { LANGUAGE } from '../../core/language.ts';
+import { panel } from '../../console-pages/builtins/llm-settings/strings.ts';
+import { probeCard, type ProbeResult } from '../../console-pages/builtins/llm-settings/panel.ts';
 import { S } from './strings.ts';
-
-const PROVIDERS_ROUTE = 'providers';
-/** 这一页只列供应模块;人格与 IO 各有自己的入口。 */
-const PROVIDER_KIND = 'llm';
+import { connectionPath, type HubState, type Connection, type Module, type Detail, type Editing } from './types.ts';
+import { mountDetail, type DetailController } from './detail.ts';
 
 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; probe: HTMLButtonElement; probePanel: HTMLElement; probeBody: HTMLElement;
+  }
+  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 kind = ui.h('div', 'connection-kind');
+        const model = ui.h('div', 'connection-model'); const url = ui.h('div', 'connection-url');
+        const status = ui.h('div', 'connection-status'); const secondary = ui.h('div', 'connection-secondary');
+        const actions = ui.rowbar();
+        const configure = ui.button(S.configure, { size: 'sm', onClick: () => run(() => select(identity)) });
+        const activate = ui.button(S.activate, { size: 'sm', onClick: () => run(async () => {
+          activate.disabled = true;
+          try { await post(connectionPath(identity) + '/activate', {}, opts); state.active = identity; paint(); }
+          finally { activate.disabled = false; }
+        }) });
+        const probePanel = ui.h('div', 'connection-probe');
+        const probeBody = ui.h('div', 'connection-probe-body');
+        probePanel.append(probeBody);
+        const probe = ui.button(S.probe, { size: 'sm', onClick: () => run(() => runProbe(identity)) });
+        probe.classList.add('connection-probe-btn'); probe.append(ui.h('span', 'connection-spin'));
+        const erase = eraseButton(identity);
+        actions.append(configure, probe, activate); el.append(erase, title, kind, model, url, status, secondary, actions, probePanel);
+        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, probe, probePanel, probeBody }; 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;
+      node.kind.textContent = item.moduleTitle; node.kind.title = item.moduleTitle;
+      node.model.textContent = item.model || '—'; node.url.textContent = item.baseUrl || '—';
+      node.model.title = item.model ?? ''; node.url.title = item.baseUrl ?? '';
+      const readiness = invalid.has(identity) && identity !== NEW_DRAFT_ID ? 'invalid' : item.readiness.state;
+      node.status.textContent = active ? S.active : S.readiness[readiness];
+      node.secondary.textContent = active && readiness !== 'ready' ? S.readiness[readiness] : identity !== NEW_DRAFT_ID && drafts.has(identity) ? S.readiness.draft : '';
+      node.activate.hidden = active || identity === NEW_DRAFT_ID;
+      node.activate.disabled = item.readiness.state !== 'ready';
+      node.probe.hidden = identity === NEW_DRAFT_ID;
+      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 runProbe(identity: string): Promise<void> {
+    const node = nodes.get(identity);
+    if (!node || node.probe.disabled) return;
+    node.probe.disabled = true; node.probe.classList.add('is-busy');
+    try {
+      const result = await post<ProbeResult>(connectionPath(identity) + '/test', {}, opts);
+      if (ctx.signal.aborted) return;
+      const close = ui.button(S.probeClose, { size: 'sm', onClick: () => node.probePanel.classList.remove('is-open') });
+      node.probeBody.replaceChildren(probeCard(ui, LANGUAGE === 'en' ? panel.en : panel.zh, result), close);
+      node.probePanel.classList.add('is-open');
+    } finally { node.probe.disabled = false; node.probe.classList.remove('is-busy'); }
+  }
+  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;
+    if (!force && controller && !(await controller.leave())) 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),
+      discarded: () => { invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = drafts.get(NEW_DRAFT_ID); paint(); },
+      saveDraft: editing => { drafts.set(editing); paint(); },
+      changed: (editing, hasErrors) => { if (hasErrors) invalid.add(identity); else invalid.delete(identity); if (identity === NEW_DRAFT_ID) newDraft = editing; 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);
+    if (controller && !(await controller.leave())) return;
+    newDraft = { original: null, name: '', entry: { kind: '', baseUrl: '' }, secretValue: '', raw: {} };
+    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.addLeaveDecision(async () => controller ? controller.leave() : true));
+  ctx.lifecycle.own(ctx.router.onChange(route => {
+    if (route.segments[0] === 'providers' && route.segments[1]) run(() => select(route.segments[1]));
   }));
+  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,50 @@
 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 才能进行模型推理。',
+  configure: '⚙ 配置', activate: '⇄ 设为当前', active: '当前模型', missing: '当前模型供应商不存在，配置中引用：',
+  eraseConfirm: '确认删除', probe: '测试可用性', probeClose: '收起',
+  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: '模型',
+  moduleNote: (description: string, id: string) => `${description} 模块标识：${id}`,
+  nameHint: '英文字母、数字、- 或 _，以字母或数字开头，不允许空格或系统保留名。',
+  fixedModule: '供应商类型保存后不可更改。使用其他类型需新建供应商。',
+  test: '测试连接', testOk: '测试成功', testFailed: '测试失败', savedFirst: '请先保存配置，再执行此操作。',
+  keySet: '已配置；留空保留现有密钥', keyEmpty: '输入 API Key', fetchModels: '获取模型列表',
+  reasoning: '推理强度', thinking: '开启推理', temperature: '温度', maxTokens: '最大输出 token', context: '上下文上限', tier: '服务档位', images: '接受图片',
+  advancedHint: '仅在使用自定义 API 网关或兼容服务时调整。', secret: '密钥环境变量名',
+  extraHeaders: '附加请求头（JSON object）', extraBody: '附加请求体（JSON object）', priceRules: '完整计价规则（JSON array）',
+  shared: '共享配置：此供应商可被多个 Bot 使用。修改会改变这份共享配置；若需要不同参数，建议新建一个供应商。',
+  remove: '删除供应商', duplicate: '复制供应商', cancel: '取消', draft: '保存草稿', save: '保存', saved: '已保存', drafted: '草稿已保存到此浏览器。API Key 不保存在浏览器草稿中。',
+  chooseModule: '请选择供应商类型。', invalidNumber: '请输入有效范围内的数值。',
+  required: '此项必填。', jsonObject: '请输入合法 JSON 对象。', jsonArray: '请输入合法 JSON 数组。',
+  unsaved: '你有未保存的更改。', stay: '留在这里', discard: '放弃更改并切换',
+  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: 'New 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.',
+  configure: '⚙ Configure', activate: '⇄ Set current', active: 'Current model', missing: 'Current model connection is missing: ',
+  eraseConfirm: 'Confirm delete', probe: 'Test endpoint', probeClose: 'Hide',
+  readiness: { ready: 'Configured', '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',
+  moduleNote: (description: string, id: string) => `${description} Module ID: ${id}`,
+  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', savedFirst: 'Save the configuration before this operation.',
+  keySet: 'Configured; leave blank to keep the current key', 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',
+  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: 'Cancel', draft: 'Save draft', save: 'Save', saved: 'Saved', drafted: 'Draft saved in this browser. API Keys are not stored in browser drafts.',
+  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: 'You have unsaved changes.', stay: 'Stay here', discard: 'Discard and switch',
+  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,10 +1,12 @@
 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';
 
 export function mountGeneral(ctx: FeatureContext): void {
   const { ui, root, signal } = ctx;
   const win = root.ownerDocument.defaultView!;
+  // 同页别处都是档案卡:标题与说明的字体从卡片来,这里自己写 h3/p 会与它们对不齐。
   const sheet = ui.sheet({ title: S.language, en: 'language', desc: S.languageDesc });
   const group = ui.h('div', 'rowbar');
   group.setAttribute('role', 'group');
@@ -20,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/index.ts

@@ -73,6 +73,7 @@ export function mountSettings(ctx: FeatureContext): void {
   if (visible[0]) select(visible[0].id);
 }
 
+// 入口是底栏那颗齿轮,不占左栏一行;`hidden` 只保留路由。
 export const settingsFeature: FrameworkFeature = {
   route: 'settings',
   label: S.navLabel,

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/features/worlds/index.ts

@@ -179,6 +179,7 @@ export function mountWorlds(ctx: FeatureContext): void {
       );
       if (ctx.signal.aborted) return;
       setMsg(out?.result || (wantEnabled ? S.activated : S.deactivated));
+      // 左栏重排失败只是导航旧了一拍,激活本身已经成功,不进上面那行的失败文案。
       void ctx.refreshNav?.().catch(ctx.onError);
       await load();
     } catch (err) {

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

@@ -117,6 +117,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
   const el = ui.h('div');
   el.id = 'rail';
 
+  // 左上角只有框架字标。这个 bot 叫什么写在底栏头像旁边——那才是这一台的名字。
   const brand = ui.h('div', 'brand');
   brand.setAttribute('role', 'img');
   brand.setAttribute('aria-label', FRAMEWORK_NAME);
@@ -127,8 +128,14 @@ export function createShell(deps: ShellDeps): ConsoleShell {
 
   const foot = ui.h('div', 'railfoot');
   const avatar = createAvatarControl({ doc, ui, signal, onError });
-  const botName = ui.h('button', 'rail-name', DEFAULT_BRAND);
+  const botName = ui.h('button', 'rail-name');
   botName.type = 'button';
+  // 名字自己是按钮(点了就地改名);铅笔只在悬停时露出来,不占额外宽度。
+  const botNameText = ui.h('span', 'rail-name-text', DEFAULT_BRAND);
+  const botNameEdit = ui.h('span', 'rail-name-edit');
+  botNameEdit.setAttribute('aria-hidden', 'true');
+  botNameEdit.appendChild(icon(doc, 'pencil'));
+  botName.append(botNameText, botNameEdit);
   const who = ui.h('div', 'rail-who');
   who.append(avatar.el, botName);
   const footActions = ui.h('div', 'rail-actions');
@@ -137,16 +144,12 @@ export function createShell(deps: ShellDeps): ConsoleShell {
   const shutdownButton = ui.h('button', 'rail-action rail-shutdown');
   shutdownButton.type = 'button';
   shutdownButton.appendChild(icon(doc, 'power'));
-  // 重启 = 同一套收尾 + 退出前落重启标志,启动器循环把进程拉起来。
-  const restartButton = ui.h('button', 'rail-action rail-restart');
-  restartButton.type = 'button';
-  restartButton.appendChild(icon(doc, 'refresh'));
   const settingsButton = ui.h('button', 'rail-action');
   settingsButton.type = 'button';
   settingsButton.setAttribute('aria-label', S.settingsAria);
   settingsButton.title = S.settingsTitle;
   settingsButton.appendChild(icon(doc, 'settings'));
-  footActions.append(runButton, settingsButton, restartButton, shutdownButton);
+  footActions.append(runButton, settingsButton, shutdownButton);
   foot.append(who, footActions);
 
   let paused = false;
@@ -161,7 +164,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
   };
   renderRun();
 
-  /** 关机和重启共用请求锁，等待请求完成后释放。 */
+  /** 关机请求的锁，等待请求完成后释放。 */
   let shuttingDown = false;
   const renderPower = (): void => {
     const canShutdown = capabilities.shutdown === true;
@@ -169,45 +172,23 @@ export function createShell(deps: ShellDeps): ConsoleShell {
     shutdownButton.disabled = !canShutdown || shuttingDown;
     shutdownButton.setAttribute('aria-label', S.shutdownAria);
     shutdownButton.title = shuttingDown ? S.finishing : S.shutdownTitle;
-    const canRestart = capabilities.restart === true;
-    restartButton.hidden = !canRestart;
-    restartButton.disabled = !canRestart || shuttingDown;
-    restartButton.setAttribute('aria-label', S.restartAria);
-    restartButton.title = shuttingDown
-      ? S.finishing
-      : capabilities.supervised === true
-        ? S.restartTitleSupervised
-        : S.restartTitleUnsupervised;
   };
   renderPower();
 
-  const powerAction = async (kind: 'shutdown' | 'restart'): Promise<void> => {
+  const powerAction = async (): Promise<void> => {
     if (shuttingDown) return;
-    if (kind === 'shutdown' ? capabilities.shutdown !== true : capabilities.restart !== true) return;
-    const supervised = capabilities.supervised === true;
-    const first = await ui.confirm(kind === 'shutdown'
-      ? {
-          title: S.confirmShutdownTitle,
-          body: S.shutdownBody,
-          danger: true,
-        }
-      : {
-          title: S.confirmRestartTitle,
-          body: supervised ? S.restartSupervisedNote : S.restartUnsupervisedNote,
-          danger: true,
-        });
+    if (capabilities.shutdown !== true) return;
+    const first = await ui.confirm({
+      title: S.confirmShutdownTitle,
+      body: S.shutdownBody,
+      danger: true,
+    });
     if (!first || signal.aborted) return;
-    const second = await ui.confirm(kind === 'shutdown'
-      ? {
-          title: S.confirmShutdownAgainTitle,
-          body: S.confirmShutdownAgainBody,
-          danger: true,
-        }
-      : {
-          title: S.confirmRestartAgainTitle,
-          body: supervised ? S.confirmRestartAgainSupervised : S.confirmRestartAgainUnsupervised,
-          danger: true,
-        });
+    const second = await ui.confirm({
+      title: S.confirmShutdownAgainTitle,
+      body: S.confirmShutdownAgainBody,
+      danger: true,
+    });
     if (!second || signal.aborted) return;
     shuttingDown = true;
     renderPower();
@@ -217,7 +198,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
         ok?: boolean; localComplete?: boolean; result?: string; error?: string;
         steps?: Array<{ label: string; ok: boolean; ms: number; detail?: string }>;
         externalChecks?: Array<{ status: 'verified-ended' | 'still-live' | 'unknown' }>;
-      }>(kind === 'shutdown' ? '/api/run/shutdown' : '/api/run/restart', undefined, { signal });
+      }>('/api/run/shutdown', undefined, { signal });
       if (out?.error) throw new Error(out.error);
       const steps = out?.steps ?? [];
       const localComplete = out?.localComplete ?? steps.every((step) => step.ok);
@@ -225,13 +206,12 @@ export function createShell(deps: ShellDeps): ConsoleShell {
         .some((check) => check.status !== 'verified-ended');
       const lines = steps.map((s) =>
         `${s.ok ? '✓' : '✗'} ${s.label} · ${(s.ms / 1000).toFixed(1)}s${s.ok ? '' : ` — ${s.detail ?? S.stepIncomplete}`}`);
-      const done = kind === 'shutdown' ? S.doneShutdown : supervised ? S.doneRestartSupervised : S.doneRestart;
       void ui.confirm({
         title: !localComplete
           ? S.resultLocalIncomplete
           : externalUnverified
             ? S.resultExternalUnverified
-            : out?.ok === false ? S.resultUnverified : done,
+            : out?.ok === false ? S.resultUnverified : S.doneShutdown,
         body: [out?.result ?? S.resultDefault, '', ...lines].join('\n'),
       });
     } catch (err) {
@@ -246,8 +226,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
       renderPower();
     }
   };
-  shutdownButton.addEventListener('click', () => { void powerAction('shutdown'); }, { signal });
-  restartButton.addEventListener('click', () => { void powerAction('restart'); }, { signal });
+  shutdownButton.addEventListener('click', () => { void powerAction(); }, { signal });
 
   runButton.addEventListener('click', () => {
     if (runPending || capabilities.run !== true) return;
@@ -381,7 +360,7 @@ export function createShell(deps: ShellDeps): ConsoleShell {
 
     // 只列已装配的:左栏是"能去的地方",不是全量清单。未装配的仍由各自的
     // 总览页负责露面(那里才有"为什么没装上"的位置)。供应模块(kind `llm`)不在
-    // 这里逐个列出:它们的入口是框架的「语言模型」页,模块清单是那一页里的次级菜单。
+    // 这里逐个列出:它们的入口是框架的「模型提供商」页,模块清单是那一页里的次级菜单。
     const listed = consolePages.filter((p) => p.availability === 'active');
     // Persona 页在前,它的 Memory 页跟在后面,再是归这一组的框架页(系统提示词),同一组。
     const personas = [
@@ -456,7 +435,8 @@ export function createShell(deps: ShellDeps): ConsoleShell {
   const setBrand = (name: string | null | undefined): void => {
     const shown = typeof name === 'string' && name.trim() !== '' ? name.trim() : DEFAULT_BRAND;
     shownName = shown;
-    botName.textContent = shown;
+    botNameText.textContent = shown;
+    // 悬停说的是这一下能做什么;全名在改名框里看得到。
     botName.title = S.renameTitle;
     avatar.setLabel(shown);
     doc.title = S.docTitle(shown);