cortico 0.1.1 → 0.1.3

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);
@@ -159,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; }
@@ -221,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; }
@@ -639,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;
@@ -989,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);
@@ -1012,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 > * {
@@ -1035,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%;
@@ -1068,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,
@@ -1150,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;
@@ -1432,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));
@@ -1452,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); }
@@ -1590,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; }
@@ -1621,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; }
@@ -1724,5 +1741,100 @@
   .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-status,.connection-secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.connection-name{font:700 17px/1.25 var(--sans)}
+.connection-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-width:0}
+.connection-facts .kv{max-width:100%}.connection-facts .kv-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.kv-kind{--kv-line:color-mix(in srgb,var(--ink-blue) 60%,transparent)}.kv-model{--kv-line:color-mix(in srgb,var(--accent-2) 75%,transparent)}.kv-baseUrl{--kv-line:var(--line-strong)}
+.connection-status{font-size:12px;margin-top:14px}.connection-secondary{font-size:11px;color:var(--ink-dim)}
+.connection-detail{min-width:0}.connection-detail .sheet{margin-bottom:16px}
+.connection-identity{background:var(--paper-2);border-color:var(--line-2)}
+.connection-identity+.connection-flow{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line-2)}
+.connection-flow{counter-reset:step}.connection-step{counter-increment:step;min-width:0}
+.connection-step td.mono{white-space:normal;overflow-wrap:anywhere}
+.connection-step table.data .btn{white-space:nowrap}
+.connection-step>.sheet>h3::before,.connection-step>details.sheet>summary>h3::before{content:counter(step);display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font:600 11px/1 var(--mono);vertical-align:2px}
+.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))}}
+
+.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; padding-right:64px; }
+.connection-erase { position:absolute; bottom:13px; right:13px; display:flex; align-items:center; gap:0; height:28px; padding:0 4px; 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:20px; height:20px; 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-connect { position:absolute; top:12px; right:12px; width:32px; text-align:center; }
+.connection-connect[hidden] { display:none; }
+.connection-hub .btn.connection-activate { display:block; width:32px; height:28px; min-height:28px; padding:0; border:0; font-size:17px; line-height:28px; }
+.connection-connect-label { display:block; font-size:10px; line-height:14px; color:var(--muted-foreground); }
+.connection-index { scrollbar-width:none; }
+.connection-index::-webkit-scrollbar { display:none; }
+.required-mark { color:var(--danger); }
+.connection-test { gap:12px; align-items:center; }
+.connection-test .msgline { margin:0; }
+.connection-status[data-tone="active"] { color:var(--accent); }
+.connection-status[data-tone="ready"] { color:var(--ok); }
+.connection-status[data-tone="error"], .connection-secondary[data-tone="error"] { color:var(--danger); }
+.connection-status[data-tone="draft"], .connection-secondary[data-tone="draft"] { color:var(--foreground); }