cortico 0.1.1 → 0.1.2

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,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/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)',

package/src/web/diagnostics.ts

@@ -0,0 +1,133 @@
+/**
+ * 诊断包:一次导出把排查一场跑要看的记录收进一个 JSON —— 运行指纹、状态快照、常驻 session
+ * 的上下文、事件、运行日志、工具调用、交接边界、用量与脱敏配置。
+ *
+ * 每段各有条数上限,取到上限的段名列在 `truncated` 里;配置里键名含 secret / token / key /
+ * password 的值在写出前抹掉。缺席的接缝(未挂载调试通道、未挂载用量)那一段为空。
+ */
+
+import { dirname, join } from 'node:path';
+import { existsSync, readFileSync } from 'node:fs';
+import type { ContextRecord } from '../protocol/open-responses/context.ts';
+import type { EventEnvelope, LogRecord } from '../core/types.ts';
+import type { SessionStats } from '../core/sessions.ts';
+import { redactSecrets } from '../core/util.ts';
+import { logPredicate, readRunsIndex, readTailRecordsWhere, type RunIndexRow } from './files.ts';
+
+/**
+ * 每段取最近多少条,与 `/api/log` 的缺省条数一致。事件段非它不可:`store.range` 不给 limit
+ * 会把事件库整份读出来。取到这个数的段名进 `truncated`,拿到包的人据此知道还有更早的记录。
+ */
+export const DIAGNOSTICS_TAIL = 200;
+
+export interface DiagnosticsToolSchema {
+  name: string;
+  description: string;
+  parameters: Record<string, unknown>;
+}
+
+/** 活数据由 WebApp 现取交进来;落盘记录由本模块按 `dataDir` 与 `runId` 自己读。 */
+export interface DiagnosticsSources {
+  dataDir: string;
+  runId: string | null;
+  exportedAt: Date;
+  status: Record<string, unknown>;
+  /** 常驻 session 的上下文与合成开头;没挂调试通道时为 null。 */
+  session: { messages: readonly ContextRecord[]; head: readonly ContextRecord[] } | null;
+  sessions: readonly SessionStats[];
+  toolSchemas: readonly DiagnosticsToolSchema[];
+  events: readonly EventEnvelope[];
+  latestCursor: number | null;
+  worlds: readonly unknown[];
+  /** `/api/usage` 那份聚合;没挂用量时为 null。 */
+  usage: unknown;
+}
+
+export interface DiagnosticsBundle {
+  kind: 'cortico-diagnostics';
+  version: 1;
+  exportedAt: string;
+  run: { id: string | null; index: RunIndexRow | null; manifest: unknown };
+  status: Record<string, unknown>;
+  worlds: readonly unknown[];
+  session: { messages: readonly ContextRecord[]; head: readonly ContextRecord[] } | null;
+  sessions: readonly SessionStats[];
+  toolSchemas: readonly DiagnosticsToolSchema[];
+  events: { latestCursor: number | null; items: readonly EventEnvelope[] };
+  /** `warn` 是 warn 及以上,`tail` 不论级别取最近几条。 */
+  log: { warn: LogRecord[]; tail: LogRecord[] };
+  toolcalls: unknown[];
+  /** transcript 里的 handoff / clear / prefix-reload 记号。 */
+  transcriptBoundaries: unknown[];
+  usage: { aggregate: unknown; rows: unknown[] };
+  config: unknown;
+  truncated: string[];
+}
+
+function readJson(file: string): unknown {
+  return existsSync(file) ? (JSON.parse(readFileSync(file, 'utf8')) as unknown) : null;
+}
+
+export function buildDiagnostics(sources: DiagnosticsSources): DiagnosticsBundle {
+  const { dataDir, runId } = sources;
+  const runDir = runId ? join(dataDir, 'runs', runId) : null;
+  const warn = runDir
+    ? readTailRecordsWhere<LogRecord>(join(runDir, 'log.jsonl'), DIAGNOSTICS_TAIL, logPredicate({ level: 'warn' }))
+    : [];
+  const tail = runDir
+    ? readTailRecordsWhere<LogRecord>(join(runDir, 'log.jsonl'), DIAGNOSTICS_TAIL, () => true)
+    : [];
+  const toolcalls = runDir
+    ? readTailRecordsWhere<unknown>(join(runDir, 'toolcalls.jsonl'), DIAGNOSTICS_TAIL, () => true)
+    : [];
+  const boundaries = runDir
+    ? readTailRecordsWhere<{ kind?: string }>(
+      join(runDir, 'transcript.jsonl'),
+      DIAGNOSTICS_TAIL,
+      (r) => r?.kind === 'boundary',
+    )
+    : [];
+  const usageRows = runId
+    ? readTailRecordsWhere<{ run?: string }>(
+      join(dataDir, 'usage.jsonl'),
+      DIAGNOSTICS_TAIL,
+      (r) => r?.run === runId,
+    )
+    : [];
+  const events = sources.events.slice(-DIAGNOSTICS_TAIL);
+
+  const truncated: string[] = [];
+  for (const [name, rows] of [
+    ['events', events],
+    ['log.warn', warn],
+    ['log.tail', tail],
+    ['toolcalls', toolcalls],
+    ['transcriptBoundaries', boundaries],
+    ['usage.rows', usageRows],
+  ] as const) {
+    if (rows.length >= DIAGNOSTICS_TAIL) truncated.push(name);
+  }
+
+  const index = runId
+    ? readRunsIndex(join(dataDir, 'runs', 'index.jsonl')).find((row) => row.run === runId) ?? null
+    : null;
+
+  return {
+    kind: 'cortico-diagnostics',
+    version: 1,
+    exportedAt: sources.exportedAt.toISOString(),
+    run: { id: runId, index, manifest: runDir ? readJson(join(runDir, 'run.json')) : null },
+    status: sources.status,
+    worlds: sources.worlds,
+    session: sources.session,
+    sessions: sources.sessions,
+    toolSchemas: sources.toolSchemas,
+    events: { latestCursor: sources.latestCursor, items: events },
+    log: { warn, tail },
+    toolcalls,
+    transcriptBoundaries: boundaries,
+    usage: { aggregate: sources.usage, rows: usageRows },
+    config: redactSecrets(readJson(join(dirname(dataDir), 'config.json'))),
+    truncated,
+  };
+}

package/src/web/public/login.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>登录 · Cortico</title>
+<style>
+  :root { color-scheme: light dark; --bg: #f4f5f4; --card: #fff; --ink: #1d2321; --dim: #66706c; --line: #d5dad7; --accent: #2f7d62; --bad: #b3261e; }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg: #141716; --card: #1d2120; --ink: #e6ebe8; --dim: #98a39e; --line: #333a37; --accent: #5fc29f; --bad: #f2867f; }
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
+  form { width: min(360px, calc(100vw - 32px)); padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
+  h1 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
+  p { margin: 0 0 20px; color: var(--dim); font-size: 13px; }
+  label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--dim); }
+  input { width: 100%; padding: 9px 11px; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
+  input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+  button { width: 100%; margin-top: 16px; padding: 9px 11px; font: inherit; font-weight: 600; color: var(--card); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
+  button:disabled { opacity: .6; cursor: default; }
+  #error { min-height: 20px; margin: 12px 0 0; color: var(--bad); font-size: 13px; }
+</style>
+</head>
+<body>
+<form id="login" autocomplete="on">
+  <h1 data-t="title"></h1>
+  <p data-t="hint"></p>
+  <label for="password" data-t="label"></label>
+  <input id="password" name="password" type="password" autocomplete="current-password" required autofocus>
+  <button type="submit" data-t="submit"></button>
+  <div id="error" role="alert"></div>
+</form>
+<script>
+(() => {
+  const en = document.documentElement.lang === 'en';
+  const T = en
+    ? { title: 'Cortico console', hint: 'This console is protected by an access password.', label: 'Password', submit: 'Sign in', wrong: 'Wrong password.', failed: 'Sign-in failed: ' }
+    : { title: 'Cortico 控制台', hint: '这个控制台设置了访问密码。', label: '密码', submit: '登录', wrong: '密码不对。', failed: '登录失败:' };
+  document.title = (en ? 'Sign in' : '登录') + ' · Cortico';
+  for (const el of document.querySelectorAll('[data-t]')) el.textContent = T[el.dataset.t];
+  const form = document.getElementById('login');
+  const input = document.getElementById('password');
+  const button = form.querySelector('button');
+  const error = document.getElementById('error');
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    button.disabled = true;
+    error.textContent = '';
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password: input.value }),
+      });
+      if (res.ok) { location.reload(); return; }
+      error.textContent = res.status === 401 ? T.wrong : T.failed + 'HTTP ' + res.status;
+    } catch (err) {
+      error.textContent = T.failed + String(err);
+    }
+    button.disabled = false;
+    input.select();
+  });
+})();
+</script>
+</body>
+</html>