cortico 0.1.0 → 0.1.2

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

@@ -13,24 +13,13 @@ const zh = {
   settingsTitle: '设置',
   finishing: '正在关闭…',
   shutdownTitle: '关机',
-  restartAria: '重启',
-  restartTitleSupervised: '重启',
-  restartTitleUnsupervised: '退出后需手动启动',
   shutdownBody: '进程将退出，控制台连接将断开。',
   confirmShutdownTitle: '⚠ 关机',
-  confirmRestartTitle: '⚠ 重启',
-  restartSupervisedNote: '进程将重启。',
-  restartUnsupervisedNote: '进程将退出，需要手动重新启动。',
   confirmShutdownAgainTitle: '⚠⚠ 确认关机?',
   confirmShutdownAgainBody: '停止运行并退出进程？',
-  confirmRestartAgainTitle: '⚠⚠ 确认重启?',
-  confirmRestartAgainSupervised: '退出并重新启动进程？',
-  confirmRestartAgainUnsupervised: '退出进程？退出后需手动启动。',
   finishingToast: '正在关闭…',
   stepIncomplete: '未完成',
   doneShutdown: '已关机',
-  doneRestartSupervised: '已退出，等待重新启动',
-  doneRestart: '已退出',
   resultLocalIncomplete: '本地关闭步骤未全部完成',
   resultExternalUnverified: '本地已关机,外部状态未确认',
   resultUnverified: '关闭步骤已执行，状态未确认',
@@ -56,24 +45,13 @@ const en: typeof zh = {
   settingsTitle: 'Settings',
   finishing: 'Shutting down…',
   shutdownTitle: 'Shut down',
-  restartAria: 'Restart',
-  restartTitleSupervised: 'Restart',
-  restartTitleUnsupervised: 'Manual startup required after exit',
   shutdownBody: 'The process will exit and disconnect the console.',
   confirmShutdownTitle: '⚠ Shut down',
-  confirmRestartTitle: '⚠ Restart',
-  restartSupervisedNote: 'The process will restart.',
-  restartUnsupervisedNote: 'The process will exit and must be restarted manually.',
   confirmShutdownAgainTitle: '⚠⚠ Confirm shutdown?',
   confirmShutdownAgainBody: 'Stop running and exit the process?',
-  confirmRestartAgainTitle: '⚠⚠ Confirm restart?',
-  confirmRestartAgainSupervised: 'Exit and restart the process?',
-  confirmRestartAgainUnsupervised: 'Exit the process? You must start it manually afterwards.',
   finishingToast: 'Shutting down…',
   stepIncomplete: 'incomplete',
   doneShutdown: 'Shut down',
-  doneRestartSupervised: 'Exited; waiting to restart',
-  doneRestart: 'Exited',
   resultLocalIncomplete: 'Local shutdown steps incomplete',
   resultExternalUnverified: 'Shut down locally; external state unverified',
   resultUnverified: 'Shutdown steps executed; state unverified',

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

@@ -17,7 +17,9 @@ export type ConsoleIconName =
   | 'text'
   | 'eye'
   | 'eye-off'
-  | 'refresh';
+  | 'pencil'
+  | 'refresh'
+  | 'trash';
 
 type Shape = readonly [tag: 'path' | 'circle' | 'rect' | 'line', attrs: Readonly<Record<string, string>>];
 
@@ -93,10 +95,21 @@ const SHAPES: Readonly<Record<ConsoleIconName, readonly Shape[]>> = {
     ['path', { d: 'M6.6 6.6C3.8 8.5 2 12 2 12s3.5 7 10 7c1.6 0 3-.4 4.3-1' }],
     ['path', { d: 'M9.9 9.9a3 3 0 0 0 4.2 4.2' }],
   ],
+  pencil: [
+    ['path', { d: 'M4 20h4.2L19.4 8.8a2.3 2.3 0 0 0-3.2-3.2L5 16.8V20Z' }],
+    ['path', { d: 'm12.6 6.5 4.9 4.9' }],
+  ],
   refresh: [
     ['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/console-pages.ts

@@ -318,7 +318,7 @@ export class ConsolePageRegistry {
   ): Promise<{ ok: true; value: unknown } | { ok: false; failure: InvokeFailure }> {
     const found = await this.resolvePanel(pageId, panelId, language);
     if (!found.ok) return found;
-    // GET 只允许 getMethods 声明的方法。
+    // GET 不过写请求的同源闸门,任何站点凭 <img src> 就能发出;只放行面板点名的方法。
     if (transport === 'get' && !(found.panel.getMethods ?? []).includes(method)) {
       return {
         ok: false,

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>

package/src/web/public/styles.css

@@ -54,8 +54,8 @@
     --shadow-soft: color-mix(in srgb, var(--ink) 7%, transparent);
     --shadow-strong: color-mix(in srgb, var(--ink) 20%, transparent);
     --overlay: color-mix(in srgb, var(--ink) 44%, transparent);
-    --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
-    --mono: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
+    --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+    --mono: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", Consolas, monospace;
     --background: var(--paper);
     --surface: var(--sheet);
     --surface-hover: var(--sheet-2);
@@ -135,9 +135,21 @@
   .navdot.warn { background: var(--warn); }
   .navdot.bad { background: var(--danger); }
 
-  .railfoot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-dim); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
-  .rail-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
-  .rail-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink); }
+  /* 头像、名字、那几个键在同一行:名字吃掉中间的余量,放不下就省略号。 */
+  .railfoot { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
+  .rail-who { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
+  .rail-name {
+    display: flex; align-items: center; gap: 5px; min-width: 0;
+    padding: 3px 6px; border: 0; border-radius: 7px; background: transparent;
+    font: 600 13px/1.35 var(--sans); color: var(--ink); cursor: pointer; text-align: left;
+  }
+  .rail-name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  /* 铅笔平时不占视线,悬停/聚焦才露出来——名字可点这件事只在那时才需要说。 */
+  .rail-name-edit { display: grid; place-items: center; flex: none; opacity: 0; transition: opacity .15s ease; }
+  .rail-name-edit .icon { width: 13px; height: 13px; }
+  .rail-name:hover { background: var(--sheet-2); }
+  .rail-name:hover .rail-name-edit, .rail-name:focus-visible .rail-name-edit { opacity: .75; }
+  .rail-rename { flex: 1; min-width: 0; }
 
 
   .pagehead {
@@ -147,7 +159,7 @@
   .pagedesc { font-size: 13px; color: var(--ink-soft); max-width: 68ch; }
 
   .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 30px 40px; }
-  .measure { max-width: 1080px; }
+  .measure { max-width: var(--content-width); }
 
 
   .subtabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 12px 30px 0; flex: none; }
@@ -209,12 +221,14 @@
   }
   .btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--sheet); }
   .btn:disabled { opacity: .45; cursor: default; }
-  .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
-  .btn.primary:hover { filter: brightness(1.06); color: var(--on-accent); }
+  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+  .btn.primary:hover { filter: brightness(1.06); color: #fff; }
   .btn.warn:hover { color: var(--warn); border-color: var(--warn); }
   .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
   .btn.danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: var(--danger); }
   .btn.sm { padding: 4px 11px; font-size: var(--text-detail); }
+  .btn-ico { display: inline-flex; align-items: center; gap: 6px; }
+  .btn-ico .icon { width: 14px; height: 14px; }
 
   .msgline { font: var(--text-detail)/1.45 var(--sans); min-height: 16px; color: var(--ok); }
   .msgline:empty { display: none; }
@@ -627,7 +641,7 @@
     min-height: 36px;
     transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
   }
-  .btn.primary, .seg.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .btn.primary, .seg.active { background: var(--accent); border-color: var(--accent); color: #fff; }
   input.field, select.field, textarea.field { min-height: 40px; }
   input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px;
@@ -887,7 +901,7 @@
     background: color-mix(in srgb, var(--border) 84%, transparent);
   }
   .navdot { width: 6px; height: 6px; }
-  .railfoot { min-height: 62px; padding: 10px 16px 14px; border: 0; gap: 9px; }
+  .railfoot { min-height: 62px; padding: 10px 12px 14px; border: 0; gap: 8px; }
   .rail-avatar-wrap {
     display: grid;
     flex: none;
@@ -924,11 +938,12 @@
   }
   .rail-avatar-edit .icon { width: 15px; height: 15px; }
   .rail-avatar:hover .rail-avatar-edit { opacity: 1; }
-  .rail-actions { display: flex; gap: 3px; }
-  .rail-name { color: var(--foreground); }
+  .rail-actions { display: flex; flex: none; gap: 2px; }
+  .rail-name { color: var(--foreground); font: 600 13.5px/1.35 var(--sans); }
+  .rail-name:hover { background: var(--hover); }
   .rail-action {
-    width: 34px;
-    height: 34px;
+    width: 30px;
+    height: 30px;
     display: grid;
     place-items: center;
     padding: 0;
@@ -976,17 +991,19 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 30px var(--page-gutter) 56px;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: stable both-edges;
   }
   .providerchrome {
+    overflow: hidden;
+    scrollbar-gutter: stable both-edges;
     flex: none;
     min-width: 0;
     padding: 30px var(--page-gutter) 0;
   }
   .panelslot { padding-top: 8px; }
-  .featureslot > :not(.viewport-overlay),
+  .featureslot > :where(:not(.viewport-overlay)),
   .providerchrome > *,
-  .panelslot > :not(.viewport-overlay) {
+  .panelslot > :where(:not(.viewport-overlay)) {
     flex: none;
     width: 100%;
     max-width: var(--content-width);
@@ -999,9 +1016,8 @@
     padding: 0;
   }
   .coreview .measure {
-    width: min(100%, var(--conversation-width));
-    margin-right: auto;
-    margin-left: 0;
+    width: min(100%, var(--content-width));
+    margin-inline: auto;
   }
   .featureslot-live > *,
   .featureslot-core > * {
@@ -1022,7 +1038,7 @@
   .providerintro .msgline { margin-top: 10px; }
   .pagetitle { margin-top: 7px; font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
   .pagedesc { margin-top: 5px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
-  .scroll { padding: 22px var(--page-gutter) 48px; scrollbar-gutter: stable; }
+  .scroll { padding: 22px var(--page-gutter) 48px; scrollbar-gutter: stable both-edges; }
   .measure { width: min(100%, var(--content-width)); margin-inline: auto; }
   .subtabs {
     width: 100%;
@@ -1055,6 +1071,11 @@
   details.sheet.fold { margin-bottom: 10px; }
   details.sheet.fold > summary { padding: 0; }
   details.sheet.fold > .foldbody { padding: 14px 0 0; }
+  /* 整张点开详细页的卡(npm 搜索结果)。取值与 .connection-card 一致。 */
+  .iocard-open { cursor: pointer; transition: background .15s, border-color .15s; }
+  .iocard-open:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); }
+  .iocard-open:focus-visible { outline: 2px solid var(--ink-dim); outline-offset: 1px; }
+  .iocard-open.is-installed { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); }
   .featureslot > :not(.sheet) + .sheet,
   .featureslot > .sheet + .sheet,
   .panelslot > :not(.sheet) + .sheet,
@@ -1137,7 +1158,7 @@
   }
   .prompt-toolbar .msgline { min-width: 0; overflow-wrap: anywhere; }
   .featureslot-prompts > .prompt-library,
-  .panelslot > .prompt-library { margin-top: 28px; }
+  .panelslot > .prompt-library { margin-top: 0; }
   .prompt-card textarea.field {
     width: 100%;
     min-height: 300px;
@@ -1419,7 +1440,7 @@
     box-shadow: none;
   }
   .btn:hover { background: var(--hover); color: var(--foreground); border-color: transparent; box-shadow: none; }
-  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
   .btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, var(--ink)); filter: none; }
   :root[data-theme-scheme="mint"] .btn.primary {
     background: color-mix(in srgb, var(--accent) 78%, var(--sheet-2));
@@ -1439,6 +1460,15 @@
     font-family: var(--sans);
     font-size: 13px;
   }
+  select.field:not([multiple]):not([size]) {
+    appearance: none;
+    padding-right: 36px;
+    background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+      linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+    background-position: right 18px center, right 14px center;
+    background-size: 4px 4px;
+    background-repeat: no-repeat;
+  }
   input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--border-strong); }
   .fieldrow .fieldlabel { margin-bottom: 6px; color: var(--muted-foreground); font-size: 11px; letter-spacing: 0; text-transform: none; }
   .segwrap { gap: 2px; padding: 2px; background: var(--surface-hover); border: 0; border-radius: var(--radius-md); }
@@ -1577,7 +1607,7 @@
   .providerhub .panelslot { display: block; flex: none; padding: 0; overflow: visible; container: none; }
   .providerhub .panelslot { margin-top: 22px; }
   .providerhub .providerchrome > *,
-  .providerhub .panelslot > :not(.viewport-overlay) { max-width: none; }
+  .providerhub .panelslot > :where(:not(.viewport-overlay)) { max-width: none; }
   .providerhub .providerintro .pagetitle { margin: 0; font-size: 18px; }
   .providerhub .providerintro .pagedesc { margin-top: 4px; }
   .providerhub .providerintro .rowbar { margin-top: 10px; }
@@ -1608,7 +1638,7 @@
 
   @media (max-width: 900px) {
     #rail { width: 232px; }
-    .pagehead, .scroll, .subtabs, .liveband, .tlscroll { padding-left: 20px; padding-right: 20px; }
+    :root { --page-gutter: 20px; }
     .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
     .settings-index { position: static; flex-direction: row; overflow-x: auto; }
     .settings-jump { width: auto; white-space: nowrap; }
@@ -1711,5 +1741,92 @@
   .ob-btn:hover:not(:disabled) { background: var(--hover); }
   .ob-btn .icon { width: 14px; height: 14px; }
   .ob-btn:disabled { opacity: .55; cursor: not-allowed; }
-  .ob-btn.ob-go { background: var(--accent); color: var(--on-accent); }
+  .ob-btn.ob-go { background: var(--accent); color: #fff; }
   .ob-btn.ob-go:hover:not(:disabled) { filter: brightness(1.06); }
+.connection-hub{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:24px;align-items:start}
+.connection-index{position:sticky;top:16px;min-width:0;max-height:calc(100vh - 140px);overflow:auto;padding:4px}
+.connection-cards{display:grid;gap:12px;padding:3px}
+.connection-card{min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s}
+.connection-card.is-active{border-color:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}
+.connection-card.is-selected{background:color-mix(in srgb,var(--ink) 5%,var(--paper));outline:2px solid var(--ink-dim);outline-offset:1px}
+.connection-name,.connection-kind,.connection-model,.connection-url,.connection-status,.connection-secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.connection-name{font:700 17px/1.25 var(--sans)}.connection-kind{margin-top:4px;font:600 11.5px/1.3 var(--sans);color:var(--muted-foreground)}.connection-model{margin-top:9px;font-size:13px}.connection-url{font-size:11px;color:var(--ink-dim);margin-top:3px}
+.connection-status{font-size:12px;margin-top:14px}.connection-secondary{font-size:11px;color:var(--ink-dim)}
+.connection-card .rowbar{margin-top:12px;justify-content:space-between;gap:4px}
+.connection-detail{min-width:0}.connection-detail .sheet{margin-bottom:16px}
+.connection-detail .connection-field{margin-bottom:15px}.connection-detail input:not([type=checkbox]),.connection-detail select,.connection-detail textarea{max-width:100%;width:100%}
+.connection-detail .field-error{color:var(--danger,#b43c38);font-size:12px;min-height:0}.connection-shared{color:var(--ink-dim);font-size:12px;line-height:1.7;margin:20px 0 12px}
+.connection-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.connection-actions .grow{flex:1}
+@media(max-width:760px){.connection-hub{grid-template-columns:1fr}.connection-index{position:static;max-height:320px}.connection-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
+.connection-guard{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--paper);color:var(--ink);max-width:560px;box-shadow:0 12px 60px #0003}
+.connection-guard::backdrop{background:#0005}.connection-guard h3{margin-bottom:20px}
+
+.live-summary { flex-wrap:wrap; }
+.live-connection { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:48%; background:none; border:0; color:var(--ink-soft); cursor:pointer; padding:0; font:11.5px/1 var(--sans); }
+.live-connection-label { flex-shrink:0; }
+.live-connection-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 8px; border-radius:7px; background:var(--hover); border:1px solid var(--border); color:var(--ink-blue); font-weight:600; }
+.live-connection:hover .live-connection-value { border-color:var(--accent); }
+.live-connection:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:7px; }
+@media(max-width:760px) { .live-connection { max-width:100%; margin-left:auto; } }
+
+.connection-detail .msgline:not(.bad) { color:var(--ink-soft); }
+.connection-detail .tdesc { margin:6px 0 12px; }
+
+/* Page headings stay above the shared content origin while each page scrolls. */
+.featureslot:has(> .featureintro) { padding-top:0; }
+.featureintro { padding-bottom:16px; border-bottom:1px solid var(--border); }
+.featureslot > .featureintro { position:sticky; top:0; z-index:20; padding-top:30px; margin-bottom:24px; background:var(--background); }
+.featureslot > .featureintro + * { margin-top:0; }
+.featureslot > .featureintro + .sheet { margin-top:0; }
+.providerchrome { padding-bottom:0; }
+.providerchrome + .panelslot { padding-top:24px; }
+.coreview > .pagehead { padding-bottom:16px; }
+.connection-index { padding-top:0; top:100px; }
+.connection-detail > div > div:first-child > .sheet:first-child { padding-top:0; }
+.connection-hub .btn { border:1px solid var(--border-strong); }
+.connection-hub .btn:hover { border-color:var(--ink-soft); }
+.connection-hub .btn.danger { border-color:currentColor; }
+.connection-hub .btn.primary, .connection-hub .btn.primary:hover { color:#fff; border-color:var(--accent); }
+.connection-module-readonly:disabled { opacity:1; background-color:var(--surface); color:var(--foreground); cursor:default; }
+.field-note, .tdesc, .trow .tdesc, .sheet .sh-desc, .pagedesc, p.muted, small.muted,
+.connection-detail .msgline:not(.bad), .connection-shared {
+  font:var(--text-detail)/1.55 var(--sans); color:var(--muted-foreground);
+}
+.field-note { margin:10px 0; }
+.field-note:empty { display:none; }
+.pricing-rules, .pricing-snapshot { margin-top:16px; }
+.pricing-rules > textarea, .pricing-snapshot > pre { margin-top:10px; }
+
+.coreview > .pagehead { position:relative; border-bottom:0; }
+.coreview > .pagehead::after { content:''; position:absolute; bottom:0; left:var(--page-gutter); right:var(--page-gutter); height:1px; background:var(--border); }
+.coreview > .subtabs { margin-top:24px; }
+
+.providerchrome > .featureintro + * { margin-top: 24px; }
+.providerchrome > .pagedesc { margin-bottom: 10px; }
+.providerchrome > .rowbar { margin-bottom: 10px; }
+.coreview > .scroll { scrollbar-gutter: auto; }
+.panelslot > :first-child > .sheet:first-child { padding-top: 0; }
+
+/* 卡片上的删除与探活。 */
+.connection-create { margin-bottom:16px; }
+.connection-create-hint { margin:7px 2px 0; font:var(--text-detail)/1.5 var(--sans); color:var(--muted-foreground); }
+.connection-create > .btn { width:100%; }
+.connection-card { position:relative; }
+.connection-erase { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:0; height:26px; padding:0 6px; border:1px solid transparent; border-radius:8px; background:none; color:var(--ink-dim); cursor:pointer; transition:color .14s ease, background .14s ease, border-color .14s ease, gap .18s ease; }
+.connection-erase .icon { width:14px; height:14px; flex:none; }
+.connection-erase:hover { color:var(--danger,#b43c38); background:var(--hover); }
+.connection-erase-text { display:grid; grid-template-columns:0fr; overflow:hidden; font:600 12px/1 var(--sans); white-space:nowrap; transition:grid-template-columns .18s ease; }
+.connection-erase-text > span { overflow:hidden; }
+.connection-erase.is-armed { gap:6px; color:var(--danger,#b43c38); border-color:currentColor; background:var(--paper); }
+.connection-erase.is-armed .connection-erase-text { grid-template-columns:1fr; }
+.connection-name { padding-right:34px; }
+.connection-probe-btn .connection-spin { display:none; width:12px; height:12px; margin-left:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:connection-spin .7s linear infinite; }
+.connection-probe-btn.is-busy .connection-spin { display:inline-block; }
+@keyframes connection-spin { to { transform:rotate(360deg); } }
+.connection-probe { display:grid; grid-template-rows:0fr; margin-top:0; transition:grid-template-rows .2s ease, margin-top .2s ease, opacity .2s ease; opacity:0; }
+.connection-probe.is-open { grid-template-rows:1fr; margin-top:12px; opacity:1; }
+.connection-probe-body { overflow:hidden; }
+.connection-probe .sheet { margin:0; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
+.connection-probe .kvtable td { padding:3px 0; font-size:11.5px; word-break:break-word; }
+.connection-probe .kvtable td:first-child { padding-right:8px; color:var(--muted-foreground); white-space:nowrap; }
+.connection-probe > .connection-probe-body > .btn { margin-top:8px; }