cortico 0.1.0

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

@@ -0,0 +1,136 @@
+import { pick } from '../../core/language.ts';
+import type { EnvPromptOrigin } from '../../../../core/prefix.ts';
+
+const zh = {
+  // index.ts
+  title: '系统提示词',
+  introDesc: "Ctrl+S 保存模板，重载后更新当前 session 前缀。来自代码的段只读。",
+  reloadSession: '重载当前 session',
+  reloading: '正在重载…',
+  prefixReloaded: '前缀已重载',
+  leaveUnsaved: "未保存的修改将丢失。离开？",
+  saving: '保存中…',
+  saved: '已保存',
+  saveFailedFor: (title: string, msg: string) => `${title} 保存失败：${msg}`,
+  savedList: (names: string) => `✓ 已保存 ${names}；重载后生效`,
+  dirtyCount: (n: number) => `${n} 处改动还没保存（Ctrl+S）`,
+  fillNowMultiline: '此刻填入（多行块）',
+  fillNow: '此刻填入',
+  varUnreported: "未提供此变量；占位符将原样保留。",
+  varEmpty: '(此刻为空，会落到缺省文案)',
+  flagEditable: (key: string, origin: EnvPromptOrigin | undefined) =>
+    `可编辑：${key}${origin === 'deployment' ? '（本部署的覆盖）' : origin === 'package' ? '（bot 包覆盖；保存写入部署覆盖）' : origin === 'module' ? '（World 默认；保存后成为本部署的覆盖）' : ''}`,
+  flagReadonly: '来自代码，只读',
+  sourceMissing: (key: string) => `源「${key}」找不到`,
+  fromCode: '来自代码',
+  originDeployment: '本部署的覆盖',
+  originPackage: "bot 包覆盖",
+  originWorld: 'World 默认',
+  listSep: '、',
+  warnSep: '；',
+  prefixEmpty: '前缀现在是空的',
+  prefixUnavailable: "前缀预览不可用。",
+  prefixStats: (n: number, tok: string) => `${n} 块 · 渲染后约 ${tok} tokens`,
+  loadFailed: (msg: string) => `加载失败：${msg}`,
+
+  // view.ts
+  warnUnknownVars: (list: string) => `模板里的 ${list} 未提供值，占位符将原样保留`,
+  warnUnusedVars: (list: string) => `${list} 声明了但没用到`,
+  varPanelTitle: '这份模板的占位符',
+  multiline: '多行',
+  varUnreportedShort: "未提供此变量",
+  varEmptyShort: '(此刻为空,会落到缺省文案)',
+  leaveUnsavedNamed: (names: string) => `有未保存的模板改动（${names}）。离开并放弃？`,
+  editableTemplate: '可编辑模板',
+  cardDescDefault: '保存到源文件；重载系统前缀后对当前 session 生效。',
+  loadedFromDeployment: "已载入本部署覆盖文件。",
+  loadedFromPackage: "已载入 bot 包覆盖；保存写入本部署覆盖文件。",
+  loadedFromWorld: "已载入 World 默认模板；保存写入本部署覆盖文件。",
+  loadedFromSource: '已从源文件载入',
+  unsaved: '● 未保存',
+  saveToFile: '保存到文件',
+  resetToWorld: '移除部署覆盖',
+  savedResult: (result: string) => `✓ ${result}；重载前缀后生效`,
+  saveFailed: (msg: string) => `保存失败：${msg}`,
+  saveFailedToast: '保存失败',
+  resetTitle: (title: string) => `删除「${title}」的部署覆盖？`,
+  resetBody: '删除后使用 bot 包的覆盖版本；没有包覆盖时使用 World 默认版本。未保存的修改将丢失。',
+  resetting: '恢复中…',
+  resetDone: '已移除部署覆盖',
+  resetFailed: (msg: string) => `恢复失败：${msg}`,
+  resetFailedToast: '恢复失败',
+  noTemplatesScoped: '这个归属下没有可编辑的模板',
+  noTemplates: '没有可编辑的提示词模板',
+  templatesLoadFailed: (msg: string) => `模板加载失败：${msg}`,
+
+  // editor.ts
+  saveHintDirty: '按 Ctrl+S 保存',
+};
+
+const en: typeof zh = {
+  // index.ts
+  title: 'System prompt',
+  introDesc: "Ctrl+S saves templates; reload to update the current session prefix. Sections from code are read-only.",
+  reloadSession: 'Reload current session',
+  reloading: 'Reloading…',
+  prefixReloaded: 'Prefix reloaded',
+  leaveUnsaved: "Unsaved changes will be lost. Leave?",
+  saving: 'Saving…',
+  saved: 'Saved',
+  saveFailedFor: (title: string, msg: string) => `${title} failed to save: ${msg}`,
+  savedList: (names: string) => `✓ Saved ${names}; takes effect after reload`,
+  dirtyCount: (n: number) => `${n} unsaved changes (Ctrl+S)`,
+  fillNowMultiline: 'Filled in now (multi-line block)',
+  fillNow: 'Filled in now',
+  varUnreported: "Variable not provided; its placeholder remains unchanged.",
+  varEmpty: '(empty right now; falls back to the default text)',
+  flagEditable: (key: string, origin: EnvPromptOrigin | undefined) =>
+    `Editable: ${key}${origin === 'deployment' ? ' (this deployment\'s override)' : origin === 'package' ? ' (the package\'s override; saving makes it this deployment\'s override)' : origin === 'module' ? ' (World default; saving makes it this deployment\'s override)' : ''}`,
+  flagReadonly: 'From code, read-only',
+  sourceMissing: (key: string) => `Source "${key}" not found`,
+  fromCode: 'From code',
+  originDeployment: 'This deployment\'s override',
+  originPackage: "Bot package override",
+  originWorld: 'World default',
+  listSep: ', ',
+  warnSep: '; ',
+  prefixEmpty: 'The prefix is empty right now',
+  prefixUnavailable: "Prefix preview unavailable.",
+  prefixStats: (n: number, tok: string) => `${n} blocks · about ${tok} tokens rendered`,
+  loadFailed: (msg: string) => `Load failed: ${msg}`,
+
+  // view.ts
+  warnUnknownVars: (list: string) => `${list} has no provided value; placeholders remain unchanged`,
+  warnUnusedVars: (list: string) => `${list} declared but unused`,
+  varPanelTitle: 'Placeholders in this template',
+  multiline: 'multi-line',
+  varUnreportedShort: "Variable not provided",
+  varEmptyShort: '(empty right now; falls back to the default text)',
+  leaveUnsavedNamed: (names: string) => `There are unsaved template changes (${names}). Leave and discard them?`,
+  editableTemplate: 'editable template',
+  cardDescDefault: 'Saved to the source file; takes effect for the current session after a system prefix reload.',
+  loadedFromDeployment: "Loaded the deployment override.",
+  loadedFromPackage: "Loaded the bot package override; saving writes the deployment override.",
+  loadedFromWorld: "Loaded the World default; saving writes the deployment override.",
+  loadedFromSource: 'Loaded from the source file',
+  unsaved: '● Unsaved',
+  saveToFile: 'Save to file',
+  resetToWorld: 'Remove deployment override',
+  savedResult: (result: string) => `✓ ${result}; takes effect after a prefix reload`,
+  saveFailed: (msg: string) => `Save failed: ${msg}`,
+  saveFailedToast: 'Save failed',
+  resetTitle: (title: string) => `Delete the deployment override for "${title}"?`,
+  resetBody: 'Uses the bot package\'s override after deletion, or the World default if the package has no override. Unsaved changes will be lost.',
+  resetting: 'Restoring…',
+  resetDone: 'Deployment override removed',
+  resetFailed: (msg: string) => `Restore failed: ${msg}`,
+  resetFailedToast: 'Restore failed',
+  noTemplatesScoped: 'No editable templates under this owner',
+  noTemplates: 'No editable prompt templates',
+  templatesLoadFailed: (msg: string) => `Failed to load templates: ${msg}`,
+
+  // editor.ts
+  saveHintDirty: 'Ctrl+S to save',
+};
+
+export const S = pick({ zh, en });

package/src/web/client/features/prompts/view.ts

@@ -0,0 +1,256 @@
+/** 可编辑提示词模板的共享视图。统一管理页、core 与 provider 归属页复用同一实现。 */
+
+import type { ConsoleUi, Disposable } from '../../../shared/client-panel.ts';
+import { get, post } from '../../core/api.ts';
+import type { Lifecycle } from '../../core/lifecycle.ts';
+import { S } from './strings.ts';
+import type { EnvPromptOrigin } from '../../../../core/prefix.ts';
+
+/** 一个占位符:声明 + 此刻的实际展开值。 */
+export interface PromptVar {
+  name: string;
+  description: string;
+  multiline?: boolean;
+  /** 缺席 = 没人报这个值(模板里用了它就会原样留在前缀里) */
+  value?: string;
+}
+
+export interface PromptDoc {
+  key: string;
+  title: string;
+  scope?: string;
+  description?: string;
+  content: string;
+  revision?: string;
+  role?: 'envPrompt' | 'prefix';
+  /** 当前模板来源：部署覆盖、bot 包覆盖或 World 默认。 */
+  origin?: EnvPromptOrigin;
+  vars?: PromptVar[];
+}
+
+export interface PromptsViewDeps {
+  ui: ConsoleUi;
+  lifecycle: Lifecycle;
+  signal: AbortSignal;
+  addLeaveGuard(fn: () => string | null): Disposable;
+  onError(err: unknown): void;
+  /** 只展示这些源；省略时展示全部。 */
+  keys?: readonly string[];
+}
+
+export interface PromptsView {
+  el: HTMLElement;
+  load(): Promise<void>;
+}
+
+/** 模板里用到的占位符名(与后端 templateVarNames 同一套语法)。 */
+export function usedVarNames(template: string): string[] {
+  const names: string[] = [];
+  const seen = new Set<string>();
+  for (const m of template.matchAll(/\{\{\s*([\w.]+)\s*(?:\|[^}]*)?\}\}/g)) {
+    if (!seen.has(m[1])) { seen.add(m[1]); names.push(m[1]); }
+  }
+  return names;
+}
+
+/**
+ * 模板与声明对不上的地方。**警告不阻止保存**——改坏了自己负责,是这套编辑器的
+ * 明确取舍;框架只把事实摆出来。
+ */
+export function varWarnings(template: string, vars: readonly PromptVar[]): string[] {
+  const declared = new Set(vars.map((v) => v.name));
+  const used = new Set(usedVarNames(template));
+  const out: string[] = [];
+  const unknown = [...used].filter((n) => !declared.has(n));
+  if (unknown.length) out.push(S.warnUnknownVars(unknown.map((n) => `{{${n}}}`).join(S.listSep)));
+  const unused = vars.filter((v) => !used.has(v.name)).map((v) => v.name);
+  if (unused.length) out.push(S.warnUnusedVars(unused.join(S.listSep)));
+  return out;
+}
+
+/** 占位符旁注:名字 + 说明 + **此刻会填进去的东西**(比说明直观)。 */
+function renderVarPanel(ui: ConsoleUi, vars: readonly PromptVar[], onInsert?: (name: string) => void): HTMLElement {
+  const box = ui.h('div', 'prompt-vars');
+  box.appendChild(ui.h('b', null, S.varPanelTitle));
+  for (const v of vars) {
+    const row = ui.h('div', 'prompt-var');
+    const head = ui.h('div', 'prompt-var-head');
+    const name = ui.button(`{{${v.name}}}`, {
+      size: 'sm',
+      onClick: () => onInsert?.(v.name),
+    });
+    name.className += ' prompt-var-name';
+    head.appendChild(name);
+    if (v.multiline) head.appendChild(ui.chip(S.multiline, 'plain'));
+    row.appendChild(head);
+    row.appendChild(ui.h('div', 'prompt-var-desc', v.description));
+    const now = ui.h('pre', 'mono prompt-var-value');
+    now.textContent = v.value === undefined
+      ? S.varUnreportedShort
+      : v.value === ''
+        ? S.varEmptyShort
+        : v.value;
+    row.appendChild(now);
+    box.appendChild(row);
+  }
+  return box;
+}
+
+export function createPromptsView(deps: PromptsViewDeps): PromptsView {
+  const { ui } = deps;
+  const el = ui.h('div', 'prompt-library');
+  const dirty = new Map<string, boolean>();
+  const wanted = deps.keys ? new Set(deps.keys) : null;
+
+  deps.lifecycle.own(
+    deps.addLeaveGuard(() => {
+      const names = [...dirty.entries()].filter(([, changed]) => changed).map(([name]) => name);
+      return names.length ? S.leaveUnsavedNamed(names.join(S.listSep)) : null;
+    }),
+  );
+
+  const card = (doc: PromptDoc): HTMLElement => {
+    const sheet = ui.sheet({
+      title: doc.title,
+      en: S.editableTemplate,
+      desc: doc.description || S.cardDescDefault,
+    });
+    sheet.el.className += ' prompt-card';
+    let revision = doc.revision;
+    /** World 的环境提示词多说一句此刻读的是哪一层:保存永远落到部署层,包与 World 那两份不动。 */
+    const loadedText = (): string => doc.origin === 'deployment'
+      ? S.loadedFromDeployment
+      : doc.origin === 'package'
+        ? S.loadedFromPackage
+        : doc.origin === 'module'
+          ? S.loadedFromWorld
+          : S.loadedFromSource;
+    const state = ui.msgline(loadedText());
+    state.className += ' prompt-state';
+    const warn = ui.msgline('');
+    warn.className += ' prompt-warn';
+    const area = ui.textarea({
+      value: doc.content,
+      rows: 16,
+      cls: 'mono',
+      onInput: () => {
+        const changed = area.value !== doc.content;
+        dirty.set(doc.title, changed);
+        state.textContent = changed ? S.unsaved : loadedText();
+        refreshWarn();
+      },
+      onCommit: () => void save(),
+    });
+    const saveBtn = ui.button(S.saveToFile, { variant: 'primary', onClick: () => void save() });
+    const resetBtn = ui.button(S.resetToWorld, { onClick: () => void reset() });
+    resetBtn.hidden = doc.origin !== 'deployment';
+
+    function refreshWarn(): void {
+      const msgs = varWarnings(area.value, doc.vars ?? []);
+      warn.textContent = msgs.join(S.warnSep);
+      warn.className = msgs.length ? 'msgline prompt-warn bad' : 'msgline prompt-warn';
+    }
+
+    async function save(): Promise<void> {
+      const off = ui.disable(saveBtn, area);
+      state.textContent = S.saving;
+      try {
+        const out = await post<{ error?: string; result?: string; revision?: string }>(
+          '/api/prompts',
+          { key: doc.key, content: area.value, baseRevision: revision },
+          { signal: deps.signal },
+        );
+        if (out?.error) throw new Error(out.error);
+        doc.content = area.value;
+        revision = out?.revision;
+        // 保存永远写部署层,所以存过一次之后这份就来自部署层了。
+        if (doc.origin && doc.origin !== 'deployment') {
+          doc.origin = 'deployment';
+          resetBtn.hidden = false;
+        }
+        dirty.set(doc.title, false);
+        state.textContent = S.savedResult(out?.result ?? S.saved);
+      } catch (err) {
+        if ((err as { name?: string } | null)?.name === 'AbortError') return;
+        deps.onError(err);
+        state.textContent = S.saveFailed(String((err as Error)?.message ?? err));
+        ui.toast(S.saveFailedToast, 'bad');
+      } finally {
+        off.dispose();
+      }
+    }
+
+    /** 删掉 bot 侧覆盖文件,整页重载:这份模板回到 World 自带的版本。 */
+    async function reset(): Promise<void> {
+      const yes = await ui.confirm({
+        title: S.resetTitle(doc.title),
+        body: S.resetBody,
+        danger: true,
+      });
+      if (!yes) return;
+      const off = ui.disable(saveBtn, resetBtn, area);
+      state.textContent = S.resetting;
+      try {
+        const out = await post<{ error?: string; result?: string }>(
+          '/api/prompts/reset',
+          { key: doc.key },
+          { signal: deps.signal },
+        );
+        if (out?.error) throw new Error(out.error);
+        dirty.set(doc.title, false);
+        ui.toast(out?.result ?? S.resetDone, 'ok');
+        await load();
+      } catch (err) {
+        if ((err as { name?: string } | null)?.name === 'AbortError') return;
+        deps.onError(err);
+        state.textContent = S.resetFailed(String((err as Error)?.message ?? err));
+        ui.toast(S.resetFailedToast, 'bad');
+      } finally {
+        off.dispose();
+      }
+    }
+
+    const bar = ui.actions();
+    bar.append(state, ui.h('span', 'grow'), resetBtn, saveBtn);
+    sheet.body.append(area, warn, bar);
+    if (doc.vars?.length) {
+      sheet.body.appendChild(renderVarPanel(ui, doc.vars, (name) => {
+        insertAtCursor(area, `{{${name}}}`);
+        dirty.set(doc.title, true);
+        state.textContent = S.unsaved;
+        refreshWarn();
+      }));
+    }
+    refreshWarn();
+    return sheet.el;
+  };
+
+  async function load(): Promise<void> {
+    el.replaceChildren();
+    dirty.clear();
+    try {
+      const data = await get<{ prompts?: PromptDoc[] }>('/api/prompts', { signal: deps.signal });
+      const docs = (data?.prompts ?? []).filter((doc) => !wanted || wanted.has(doc.key));
+      if (!docs.length) {
+        el.appendChild(ui.placeholder(wanted ? S.noTemplatesScoped : S.noTemplates));
+        return;
+      }
+      for (const doc of docs) el.appendChild(card(doc));
+    } catch (err) {
+      if ((err as { name?: string } | null)?.name === 'AbortError') return;
+      deps.onError(err);
+      el.appendChild(ui.placeholder(S.templatesLoadFailed(String((err as Error)?.message ?? err))));
+    }
+  }
+
+  return { el, load };
+}
+
+/** 在光标处插入文本(没有选区就追加到末尾)。 */
+function insertAtCursor(area: HTMLTextAreaElement, text: string): void {
+  const start = area.selectionStart ?? area.value.length;
+  const end = area.selectionEnd ?? start;
+  area.value = area.value.slice(0, start) + text + area.value.slice(end);
+  area.selectionStart = area.selectionEnd = start + text.length;
+  area.focus();
+}

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

@@ -0,0 +1,100 @@
+/**
+ * 「语言模型」页 —— 模型供应模块的入口。
+ *
+ * 左侧次级菜单列出 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 type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { S } from './strings.ts';
+
+const PROVIDERS_ROUTE = 'providers';
+/** 这一页只列供应模块;人格与 IO 各有自己的入口。 */
+const PROVIDER_KIND = 'llm';
+
+export async function mountProviders(ctx: FeatureContext): Promise<void> {
+  const { ui, root } = ctx;
+  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 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;
+  }
+
+  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);
+  }
+  // 灯的活数据只改那几个点,不重排菜单(与左栏同一节拍)。
+  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));
+    }
+    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);
+  }));
+}
+
+export const providersFeature: FrameworkFeature = {
+  route: PROVIDERS_ROUTE,
+  label: S.navLabel,
+  icon: 'cpu',
+  lampId: PROVIDERS_LAMP_ID,
+  navGroup: S.navGroup,
+  mount: mountProviders,
+};

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

@@ -0,0 +1,23 @@
+import { pick } from '../../core/language.ts';
+
+const zh = {
+  pageTitle: '模型提供商',
+  modulesAria: '供应模块',
+  needHost: "模型提供商设置不可用。",
+  loading: '读取供应模块…',
+  none: '没有已注册的供应模块。',
+  navLabel: '模型提供商',
+  navGroup: 'Core',
+};
+
+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',
+};
+
+export const S = pick({ zh, en });

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

@@ -0,0 +1,28 @@
+import { LANGUAGE, saveLanguage, type Language } from '../../core/language.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!;
+  const sheet = ui.sheet({ title: S.language, en: 'language', desc: S.languageDesc });
+  const group = ui.h('div', 'rowbar');
+  group.setAttribute('role', 'group');
+  group.setAttribute('aria-label', S.language);
+  sheet.body.appendChild(group);
+  root.append(sheet.el);
+  for (const [language, label] of [['zh', '简体中文'], ['en', 'English']] as const) {
+    const button = ui.h('button', 'btn', label);
+    button.type = 'button';
+    button.setAttribute('aria-pressed', String(language === LANGUAGE));
+    button.disabled = language === LANGUAGE;
+    button.addEventListener('click', () => { void changeLanguage(language).catch(ctx.onError); }, { signal });
+    group.append(button);
+  }
+
+  async function changeLanguage(language: Language): Promise<void> {
+    if (!await ui.confirm({ title: S.reloadTitle, body: S.reloadBody }) || signal.aborted) return;
+    saveLanguage(language, win.localStorage);
+    win.location.reload();
+  }
+}

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

@@ -0,0 +1,82 @@
+import { pageIntro } from '../../ui/page.ts';
+import { mountAppearance } from '../appearance/index.ts';
+import type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { mountGeneral } from './general.ts';
+import { S } from './strings.ts';
+
+interface SettingSection {
+  id: string;
+  label: string;
+  description: string;
+  need?: string;
+  mount(ctx: FeatureContext): void | Promise<void>;
+}
+
+const SECTIONS: readonly SettingSection[] = [
+  {
+    id: 'general',
+    label: S.general,
+    description: S.generalDesc,
+    mount: mountGeneral,
+  },
+  {
+    id: 'appearance',
+    label: S.appearance,
+    description: S.appearanceDesc,
+    mount: (ctx) => mountAppearance(ctx, { embedded: true }),
+  },
+];
+
+export function mountSettings(ctx: FeatureContext): void {
+  const { ui } = ctx;
+  const intro = pageIntro(ui, S.pageTitle);
+  const layout = ui.h('div', 'settings-layout');
+  const index = ui.h('nav', 'settings-index');
+  index.setAttribute('aria-label', S.sectionsAria);
+  index.setAttribute('role', 'tablist');
+  const content = ui.h('div', 'settings-content');
+  const visible = SECTIONS.filter((section) => !section.need || ctx.capabilities[section.need] === true);
+  const mounted: Array<{ button: HTMLButtonElement; section: HTMLElement }> = [];
+
+  const select = (id: string): void => {
+    for (const item of mounted) {
+      const active = item.section.id === `settings-${id}`;
+      item.section.classList.toggle('active', active);
+      item.button.classList.toggle('active', active);
+      item.button.setAttribute('aria-selected', String(active));
+    }
+  };
+
+  for (const spec of visible) {
+    const section = ui.h('section', 'settings-section');
+    section.id = `settings-${spec.id}`;
+    const heading = ui.h('div', 'settings-section-head');
+    heading.append(ui.h('h2', null, spec.label), ui.h('p', null, spec.description));
+    const body = ui.h('div', 'settings-section-body');
+    section.append(heading, body);
+    content.appendChild(section);
+
+    const jump = ui.h('button', 'settings-jump', spec.label);
+    jump.type = 'button';
+    jump.setAttribute('role', 'tab');
+    jump.setAttribute('aria-controls', section.id);
+    jump.addEventListener('click', () => select(spec.id), { signal: ctx.signal });
+    index.appendChild(jump);
+    mounted.push({ button: jump, section });
+
+    const child = { ...ctx, root: body };
+    void Promise.resolve(spec.mount(child)).catch(ctx.onError);
+  }
+
+  layout.append(index, content);
+  ctx.root.append(intro, layout);
+  if (visible[0]) select(visible[0].id);
+}
+
+export const settingsFeature: FrameworkFeature = {
+  route: 'settings',
+  label: S.navLabel,
+  icon: 'settings',
+  navMode: 'hidden',
+  mount: mountSettings,
+};

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

@@ -0,0 +1,33 @@
+import { pick } from '../../core/language.ts';
+
+const zh = {
+  general: '通用',
+  generalDesc: '控制台语言偏好。',
+  language: '界面语言 / Language',
+  languageDesc: '仅保存在当前浏览器，刷新页面后生效。',
+  reloadTitle: '切换界面语言？',
+  reloadBody: '页面将刷新，未保存的编辑会丢失。Bot 将继续运行。',
+  appearance: '外观',
+  appearanceDesc: '控制台主题、明暗模式与自定义配色。',
+
+  pageTitle: '设置',
+  sectionsAria: '设置分区',
+  navLabel: '设置',
+};
+
+const en: typeof zh = {
+  general: 'General',
+  generalDesc: 'Console language preferences.',
+  language: '界面语言 / Language',
+  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.',
+  appearance: 'Appearance',
+  appearanceDesc: 'Console theme, light/dark mode and custom palettes.',
+
+  pageTitle: 'Settings',
+  sectionsAria: 'Settings sections',
+  navLabel: 'Settings',
+};
+
+export const S = pick({ zh, en });

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

@@ -0,0 +1 @@
+export { createStorageView, type StoragePartView, type StorageView, type StorageViewDeps } from './view.ts';