cortico 0.1.0

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

@@ -0,0 +1,164 @@
+import { pick } from '../../core/language.ts';
+
+const zh = {
+  navLabel: '扩展',
+  navGroup: 'Core',
+  introTitle: '扩展',
+  introDesc: '从 npm 安装第三方 World、LLM Provider 和 bot 包。安装、卸载后需重启进程才能生效。',
+
+  installedTitle: '已安装',
+  refresh: '↻ 刷新',
+  restartProcess: '重启进程',
+
+  stateLoaded: '已加载',
+  stateFailed: '加载失败',
+  statePendingRestart: '待重启',
+  stateRemoved: '已卸载,待重启',
+  stateIdle: '已装,本部署未用',
+
+  groupWorldDesc: '连接外部环境。',
+  groupProviderDesc: '连接模型服务。',
+  groupBotDesc: '提供 Persona 与 bot 装配。将包名填入 deployment.json 的 bot 字段；每个进程运行一个 bot。',
+  groupUnknownTitle: '未识别',
+  groupUnknownDesc: 'package.json 缺少有效的 cortico 声明。',
+
+  restartConfirmTitle: '重启进程?',
+  restartNoLoopTitle: '需要手动启动',
+  restartConfirmBody: '进程将重启。',
+  restartNoLoopBody: '进程将退出，需要手动重新启动。继续？',
+  finishingToast: '正在关闭…',
+  stepIncomplete: '未完成',
+  doneRestartSupervised: '已退出，等待重新启动',
+  doneRestart: '已退出',
+  resultDefault: '关闭步骤已执行。',
+  noReceipt: (msg: string) => `未收到关闭结果（${msg}）；进程可能已退出。`,
+
+  uninstallTitle: (name: string) => `卸载「${name}」?`,
+  uninstallBody: (name: string) => `从 extensions/ 卸载 ${name}，重启进程后生效。`,
+  uninstalling: '正在卸载…',
+  uninstalled: '已卸载',
+  uninstallFailed: (msg: string) => `卸载失败: ${msg}`,
+  uninstall: '卸载',
+
+  installing: '正在安装…',
+  installed: '已安装',
+  installFailed: (msg: string) => `安装失败: ${msg}`,
+  installedRestartTitle: '已安装,现在重启进程加载它?',
+  installedRestartNote: '进程将重启。',
+  installedNoLoopNote: '进程将退出，需要手动重新启动。',
+
+  panelLoaded: '自定义面板已加载',
+  noteIdle: '当前部署未引用此扩展。',
+  noteConsoleMissing: '缺少浏览器构建产物。请在扩展目录构建，再重启进程。',
+
+  sumLoaded: (n: number) => `已加载 ${n}`,
+  sumPending: (n: number) => `待重启 ${n}`,
+  sumFailed: (n: number) => `加载失败 ${n}`,
+  noExtensions: '还没装任何扩展',
+  listLoadFailed: (msg: string) => `扩展清单加载失败: ${msg}`,
+  loading: '加载中…',
+
+  searchTitle: '从 npm 安装',
+  searchDesc: '扩展拥有与框架相同的文件和网络权限。',
+  searchPlaceholder: '关键字;留空列出全部',
+  search: '搜索',
+  searchKeywordNote: (keyword: string) => `列出 npm 上带 ${keyword} 关键字的包。`,
+  searching: '搜索中…',
+  noHits: '没有匹配的包',
+  hitCount: (n: number) => `${n} 个包`,
+  searchFailed: (msg: string) => `搜索失败: ${msg}`,
+  hitMeta: (version: string, downloads: number, publisher?: string) =>
+    `${version} · 月下载 ${downloads}${publisher ? ` · ${publisher}` : ''}`,
+  linkRepo: '仓库',
+  linkHome: '主页',
+  install: '安装',
+  alreadyInstalled: '已安装',
+
+  manualTitle: '手动安装',
+  manualDesc: '包名（可带 @版本）或含 package.json 的本机目录。本机目录通过链接安装。',
+  manualPlaceholder: '@scope/name@1.2.0 或 ../my-module',
+  manualEmpty: '先填包名或目录',
+};
+
+const en: typeof zh = {
+  navLabel: 'Extensions',
+  navGroup: 'Core',
+  introTitle: 'Extensions',
+  introDesc: 'Install third-party Worlds, LLM providers and bot packages from npm. '
+    + 'Installations and removals take effect after restarting the process.',
+
+  installedTitle: 'Installed',
+  refresh: '↻ Refresh',
+  restartProcess: 'Restart process',
+
+  stateLoaded: 'Loaded',
+  stateFailed: 'Load failed',
+  statePendingRestart: 'Restart pending',
+  stateRemoved: 'Uninstalled, restart pending',
+  stateIdle: 'Installed, unused by this deployment',
+
+  groupWorldDesc: 'Connects to an external environment.',
+  groupProviderDesc: 'Connects to a model service.',
+  groupBotDesc: 'Provides a Persona and bot assembly. Set the package name in the bot field of deployment.json; each process runs one bot.',
+  groupUnknownTitle: 'Unrecognised',
+  groupUnknownDesc: 'package.json has no valid cortico declaration.',
+
+  restartConfirmTitle: 'Restart the process?',
+  restartNoLoopTitle: 'Manual startup required',
+  restartConfirmBody: 'The process will restart.',
+  restartNoLoopBody: 'The process will exit and must be restarted manually. Continue?',
+  finishingToast: 'Shutting down…',
+  stepIncomplete: 'incomplete',
+  doneRestartSupervised: 'Exited; waiting to restart',
+  doneRestart: 'Exited',
+  resultDefault: 'Shutdown steps executed.',
+  noReceipt: (msg: string) => `No shutdown result received (${msg}); the process may have exited.`,
+
+  uninstallTitle: (name: string) => `Uninstall "${name}"?`,
+  uninstallBody: (name: string) => `Uninstall ${name} from extensions/. Takes effect after restarting the process.`,
+  uninstalling: 'Uninstalling…',
+  uninstalled: 'Uninstalled',
+  uninstallFailed: (msg: string) => `Uninstall failed: ${msg}`,
+  uninstall: 'Uninstall',
+
+  installing: 'Installing…',
+  installed: 'Installed',
+  installFailed: (msg: string) => `Install failed: ${msg}`,
+  installedRestartTitle: 'Installed. Restart the process now to load it?',
+  installedRestartNote: 'The process will restart.',
+  installedNoLoopNote: 'The process will exit and must be restarted manually.',
+
+  panelLoaded: 'Custom panel loaded',
+  noteIdle: 'This deployment does not reference the extension.',
+  noteConsoleMissing: 'Browser bundle missing. Build in the extension directory and restart the process.',
+
+  sumLoaded: (n: number) => `${n} loaded`,
+  sumPending: (n: number) => `${n} restart pending`,
+  sumFailed: (n: number) => `${n} failed`,
+  noExtensions: 'No extensions installed yet',
+  listLoadFailed: (msg: string) => `Extension list failed to load: ${msg}`,
+  loading: 'Loading…',
+
+  searchTitle: 'Install from npm',
+  searchDesc: 'Extensions have the same file and network access as the framework.',
+  searchPlaceholder: 'Keyword; empty lists everything',
+  search: 'Search',
+  searchKeywordNote: (keyword: string) => `Lists npm packages carrying the ${keyword} keyword.`,
+  searching: 'Searching…',
+  noHits: 'No matching packages',
+  hitCount: (n: number) => `${n} packages`,
+  searchFailed: (msg: string) => `Search failed: ${msg}`,
+  hitMeta: (version: string, downloads: number, publisher?: string) =>
+    `${version} · ${downloads}/month${publisher ? ` · ${publisher}` : ''}`,
+  linkRepo: 'Repository',
+  linkHome: 'Homepage',
+  install: 'Install',
+  alreadyInstalled: 'Installed',
+
+  manualTitle: 'Manual install',
+  manualDesc: 'A package name (optionally @version) or a local directory containing package.json. Local directories are installed as links.',
+  manualPlaceholder: '@scope/name@1.2.0 or ../my-module',
+  manualEmpty: 'Fill in a package name or directory first',
+};
+
+export const S = pick({ zh, en });

package/src/web/client/features/feature.ts

@@ -0,0 +1,93 @@
+/**
+ * Framework Feature 是随控制台内核打包的页面，可调用框架端点。
+ * 控制台页扩展经 manifest 动态加载，使用仅开放本面板能力的 ConsolePanelContext。
+ * 两种上下文共享挂载生命周期：mount 创建 Lifecycle，离开时 abort 并 dispose。
+ */
+
+import type { ConsoleUi, Disposable } from '../../shared/client-panel.ts';
+import type { Lifecycle } from '../core/lifecycle.ts';
+import type { Route, Router } from '../core/router.ts';
+import type { ConsolePageHost } from '../console-pages/host.ts';
+import type { ConsoleIconName } from '../ui/icons.ts';
+
+/** 嵌在框架页里的控制台页宿主:manifest 与面板加载都由它管,页面只给容器与路由前缀。 */
+export type EmbeddedConsolePageHost = Pick<ConsolePageHost, 'load' | 'show' | 'unmount' | 'pages' | 'find'>;
+
+export interface FeatureContext {
+  /** 本页面的 DOM 根。离开时由 host 清空。 */
+  readonly root: HTMLElement;
+  /** 本次挂载的资源账本。`signal` / `interval` / `frame` / `own` 都从它拿。 */
+  readonly lifecycle: Lifecycle;
+  /** 等价于 `lifecycle.signal`，因为绝大多数用法只要这一个。 */
+  readonly signal: AbortSignal;
+  /** UI 原语，已绑本次挂载的 signal。 */
+  readonly ui: ConsoleUi;
+  /** 路由。跳转与离开拦截都经它，feature 不碰 `location.hash`。 */
+  readonly router: Router;
+  /** 进入本页时的路由（子页签靠 `segments[1]` 之类区分）。 */
+  readonly route: Route;
+  /**
+   * /api/capabilities 提供的框架能力挂载情况；未挂载能力不渲染。
+   */
+  readonly capabilities: Record<string, boolean>;
+  /** 出错上报。feature 不自己 `console.error`。 */
+  onError(err: unknown): void;
+  /**
+   * 在本页的某个容器里挂另一页的面板。`route` 给出面板页签该指向的路由,
+   * 所以页签切换留在本页内。只有内核装配的页面拿得到;缺席时页面只能给出入口链接。
+   */
+  consolePageHost?(opts: {
+    root: HTMLElement;
+    route(pageId: string, panelId: string): readonly string[];
+  }): EmbeddedConsolePageHost;
+  /**
+   * 重取控制台页清单并重排左栏，不动当前页。激活/停用 World 这类会改清单的
+   * 操作成功后调用。缺席时左栏保持旧清单。
+   */
+  refreshNav?(): Promise<void>;
+}
+
+export type FrameworkFeature = {
+  /**
+   * 路由第一段。`provider` **是保留字**（那一段归控制台页宿主），
+   * 其余由各 feature 认领，不得重复。
+   */
+  readonly route: string;
+  /** 左栏显示名。 */
+  readonly label: string;
+  /** 左栏图标。 World 那一页不走此字段。 */
+  readonly icon?: ConsoleIconName;
+  /** 状态灯表中的键；缺省时不声明状态灯。 */
+  readonly lampId?: string;
+  /** 列出的 capability 任一已挂载即显示导航项；省略或为空时始终显示。 */
+  readonly needsAny?: readonly string[];
+  /**
+   * 渲染。返回的 `Disposable` 在离开时被调用；用 `ctx.lifecycle` 登记过的
+   * 不必再返回。抛错只让这一页变成错误卡，不波及框架其余部分。
+   */
+  mount(ctx: FeatureContext): void | Disposable | Promise<void | Disposable>;
+} & (
+  | {
+      /** 带标题的常规分组；省略 navMode 时同样按分组显示。 */
+      readonly navMode?: 'group';
+      /** 相同值的页面共享一个导航区。 */
+      readonly navGroup: string;
+    }
+  | {
+      /**
+       * primary 是独立一级入口；world-root 是 World 实例树入口；persona 排进 Persona & Memory 组,
+       * 在贡献的页之后；hidden 只保留路由。
+       */
+      readonly navMode: 'primary' | 'world-root' | 'persona' | 'hidden';
+      readonly navGroup?: string;
+    }
+);
+
+/** `needsAny` 里任一 capability 已挂载,或根本没有要求。 */
+export function featureAvailable(
+  feature: FrameworkFeature,
+  capabilities: Record<string, boolean>,
+): boolean {
+  const wanted = feature.needsAny ?? [];
+  return wanted.length === 0 || wanted.some((k) => capabilities[k] === true);
+}

package/src/web/client/features/live/context.ts

@@ -0,0 +1,280 @@
+/** 使用运行时 token 估算口径，将标准 Item 按显示类别汇总。 */
+
+import { itemText, type ContextRecord } from '../../../../protocol/open-responses/context.ts';
+import type { ConsoleUi } from '../../../shared/client-panel.ts';
+import { estimateMessagesTokens } from '../../../../protocol/open-responses/tokens.ts';
+import {
+  contextOf,
+  loopOf,
+  type StatusSnapshot,
+  type ToolSchemaDoc,
+} from './protocol.ts';
+import { S } from './strings.ts';
+
+/**
+ * 字数 → token 估算。与服务端 `estimateTokens` 同一口径:中日韩与全角标点按 0.6,
+ * 其余按 0.3。**不是账单**,只求与截断判据同源。
+ */
+export function estTok(text: unknown): number {
+  let cjk = 0;
+  let other = 0;
+  for (const ch of String(text ?? '')) {
+    const c = ch.codePointAt(0) ?? 0;
+    if ((c >= 0x4e00 && c <= 0x9fff) || (c >= 0x3000 && c <= 0x30ff) || (c >= 0xff00 && c <= 0xffef)) {
+      cjk++;
+    } else {
+      other++;
+    }
+  }
+  return Math.ceil(cjk * 0.6 + other * 0.3);
+}
+
+/** 一个 JSON 值折算成 token(工具参数、工具表 schema 都这么算)。 */
+export function jsonTok(v: unknown): number {
+  return v ? estTok(JSON.stringify(v)) : 0;
+}
+
+/** 分类词表。`color` 直接取主题里的图表色变量,随主题走。 */
+export interface ContextCategoryDef {
+  key: string;
+  group: string;
+  label: string;
+  color: string;
+}
+
+const CTX_CATS: readonly ContextCategoryDef[] = [
+  { key: 'orient', group: S.groupPrefix, label: S.catOrient, color: 'var(--chart-1)' },
+  { key: 'constitution', group: S.groupPrefix, label: S.catConstitution, color: 'var(--chart-5)' },
+  { key: 'env', group: S.groupPrefix, label: S.catEnv, color: 'var(--chart-miss)' },
+  { key: 'toolsUsage', group: S.groupPrefix, label: S.catToolsUsage, color: 'var(--chart-3)' },
+  { key: 'memory', group: S.groupPrefix, label: S.catMemory, color: 'var(--chart-6)' },
+  { key: 'prefixMisc', group: S.groupPrefix, label: S.catPrefixMisc, color: 'var(--chart-7)' },
+  { key: 'toolsSchema', group: S.groupTools, label: S.catToolsSchema, color: 'var(--chart-hit)' },
+  { key: 'head', group: S.groupDialogue, label: S.catHead, color: 'var(--chart-8)' },
+  { key: 'reasoning', group: S.groupDialogue, label: S.catReasoning, color: 'var(--chart-3)' },
+  { key: 'dialogue', group: S.groupDialogue, label: S.catDialogue, color: 'var(--chart-2)' },
+  { key: 'toolIO', group: S.groupDialogue, label: S.catToolIO, color: 'var(--chart-4)' },
+];
+
+const CTX_GROUPS: readonly string[] = [S.groupPrefix, S.groupTools, S.groupDialogue];
+
+/** 按 ━━━ 段名 ━━━ 拆分前缀；未匹配的文本归入前言。上下文与提示词页共用。 */
+export function parsePrefixSegments(systemText: string): Record<string, string> {
+  const map: Record<string, string> = {};
+  if (!systemText) return map;
+  for (const part of systemText.split(/(?=━━━ .+? ━━━)/)) {
+    const m = part.match(/━━━ (.+?) ━━━/);
+    const title = m ? m[1].trim() : '(前言)';
+    map[title] = part.replace(/━━━ .+? ━━━/, '').trim();
+  }
+  return map;
+}
+
+/** 消息里第一条 system 的正文(没有就是空串)。 */
+function systemTextOf(messages: readonly ContextRecord[]): string {
+  const first = messages[0];
+  return first?.item.type === 'message' && first.item.role === 'system' ? itemText(first.item) : '';
+}
+
+export interface ContextCategory extends ContextCategoryDef {
+  tok: number;
+}
+
+export interface ContextBreakdown {
+  /** 分类占用,按 core 报的总数等比缩放(上游只给总数,分类只能本地估) */
+  cats: ContextCategory[];
+  /** core 报的下一次请求输入数;没报时本地估算之和 */
+  total: number;
+  /** total 里上游数过的部分;0 = 整份估算 */
+  countedTokens: number;
+  /** 圈的分母:Persona的阶段预算,没报时模型物理上限;两者都没有则 null */
+  maxTokens: number | null;
+  /** 软预警线比例;Persona没报则 null(不画黄线) */
+  softRatio: number | null;
+  keepOn: boolean;
+  /** 摘除历史思维链省掉的量(只用于脚注) */
+  strippedThinking: number;
+  /** 工具表里有几个工具(脚注里印) */
+  toolCount: number;
+}
+
+export interface ContextInput {
+  messages: readonly ContextRecord[];
+  /** messages 之外的合成开头；估算包含其 reasoning，不应用历史思维链摘除规则。 */
+  head?: readonly ContextRecord[];
+  toolSchemas: readonly ToolSchemaDoc[];
+  status: StatusSnapshot | null;
+}
+
+/** 每条消息的结构开销,与服务端 `estimateMessagesTokens` 一致。 */
+const PER_MESSAGE_OVERHEAD = 8;
+
+/** 分类占用。没有消息时返回 null(调试通道还没连上,不是"占用为 0")。 */
+export function computeCtx(input: ContextInput): ContextBreakdown | null {
+  const msgs = input.messages;
+  if (!msgs.length) return null;
+  const cx = contextOf(input.status);
+  const maxTokens = cx.maxTokens ?? cx.hardTokens ?? null;
+  const softRatio = cx.softRatio ?? null;
+  const keepOn = cx.keepPastThinking !== false;
+  const tok: Record<string, number> = {};
+  for (const c of CTX_CATS) tok[c.key] = 0;
+
+  // 1) 系统前缀按段拆;prefixMisc 兜住分隔线、前言与结构开销。
+  const sys = systemTextOf(msgs);
+  if (msgs[0].item.type === 'message' && msgs[0].item.role === 'system') {
+    const seg = parsePrefixSegments(sys);
+    tok.orient = estTok(seg['ORIENTATION'] || '');
+    tok.constitution = estTok(seg['宪法'] || '');
+    tok.toolsUsage = estTok(seg['Using your tools'] || '');
+    tok.memory = estTok(seg['记忆'] || '');
+    for (const k of Object.keys(seg)) if (/^环境/.test(k)) tok.env += estTok(seg[k]);
+    const sysTotal = PER_MESSAGE_OVERHEAD + estTok(sys);
+    tok.prefixMisc = Math.max(
+      0,
+      sysTotal - tok.orient - tok.constitution - tok.env - tok.toolsUsage - tok.memory,
+    );
+  }
+
+  // 合成开头单独计入估算，包含其中的 reasoning。
+  for (const m of input.head ?? []) {
+    tok.head += estimateMessagesTokens([m]);
+  }
+
+  // 2) 工具表 schema:作为 tools 参数随每次调用发送,与消息分开计。
+  tok.toolsSchema = input.toolSchemas.reduce(
+    (s, t) => s + estTok(t.name) + estTok(t.description) + jsonTok(t.parameters),
+    0,
+  );
+
+  const first = msgs[0].item;
+  const rest = first.type === 'message' && first.role === 'system' ? msgs.slice(1) : msgs;
+  let strippedThinking = 0;
+  for (const entry of rest) {
+    const tokens = estimateMessagesTokens([entry]);
+    if (entry.context.head) tok.head += tokens;
+    else if (entry.item.type === 'reasoning') {
+      if (keepOn) tok.reasoning += tokens;
+      else strippedThinking += tokens;
+    } else if (entry.item.type === 'function_call' || entry.item.type === 'function_call_output') {
+      tok.toolIO += tokens;
+    } else tok.dialogue += tokens;
+  }
+
+  const local = CTX_CATS.map((c) => ({ ...c, tok: tok[c.key] }));
+  const localTotal = local.reduce((s, c) => s + c.tok, 0);
+  const reported = loopOf(input.status).estTokens;
+  const total = typeof reported === 'number' ? reported : localTotal;
+  const scale = localTotal > 0 ? total / localTotal : 0;
+  const cats: ContextCategory[] = local.map((c) => ({ ...c, tok: Math.round(c.tok * scale) }));
+  return {
+    cats,
+    total,
+    countedTokens: cx.countedTokens ?? 0,
+    maxTokens,
+    softRatio,
+    keepOn,
+    strippedThinking,
+    toolCount: input.toolSchemas.length,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// 画面
+// ---------------------------------------------------------------------------
+
+/** 一行脚注:纯文本片段与要加粗的片段交替。 */
+function footLine(ui: ConsoleUi, parts: readonly (string | { b: string })[]): HTMLDivElement {
+  const line = ui.h('div');
+  line.appendChild(ui.h('span', null, '· '));
+  for (const p of parts) {
+    if (typeof p === 'string') line.appendChild(ui.h('span', null, p));
+    else line.appendChild(ui.h('b', null, p.b));
+  }
+  return line;
+}
+
+/**
+ * 分类分布面板。定位由终端输入器里的 `.ctxanchor` 提供。
+ */
+export function buildCtxPanel(ui: ConsoleUi, d: ContextBreakdown | null): HTMLElement {
+  const box = ui.h('div', 'ctxpanel');
+  if (!d || !d.total) {
+    box.appendChild(ui.h('div', 'cx-sub', S.ctxNone));
+    return box;
+  }
+  const head = ui.h('div', 'cx-head');
+  head.appendChild(ui.h('div', 'cx-title', S.ctxUsage));
+  const total = ui.h('div', 'cx-total');
+  total.appendChild(ui.h('b', null, `${d.countedTokens > 0 ? '' : '~'}${ui.fmt.count(d.total)}`));
+  total.appendChild(ui.h('span', null, d.maxTokens === null ? ' tok' : ` / ${ui.fmt.count(d.maxTokens)} tok`));
+  head.appendChild(total);
+  box.appendChild(head);
+  box.appendChild(
+    ui.h(
+      'div',
+      'cx-sub',
+      S.ctxSub(d.maxTokens === null ? null : ui.fmt.percent(d.total / d.maxTokens), d.keepOn),
+    ),
+  );
+
+  const bar = ui.h('div', 'cx-bar');
+  for (const c of d.cats) {
+    if (c.tok <= 0) continue;
+    const sp = ui.h('span');
+    sp.setAttribute('style', `width:${(c.tok / d.total) * 100}%;background:${c.color}`);
+    sp.title = `${c.label} · ${ui.fmt.count(c.tok)}`;
+    bar.appendChild(sp);
+  }
+  box.appendChild(bar);
+
+  for (const g of CTX_GROUPS) {
+    const inG = d.cats.filter((c) => c.group === g && c.tok > 0);
+    if (!inG.length) continue;
+    box.appendChild(ui.h('div', 'cx-grp', g));
+    for (const c of inG) {
+      const row = ui.h('div', 'cx-row');
+      const sw = ui.h('span', 'cx-sw');
+      sw.setAttribute('style', `background:${c.color}`);
+      row.appendChild(sw);
+      const lbl = ui.h('span', 'cx-lbl', c.label);
+      if (c.key === 'toolsSchema') lbl.appendChild(ui.h('span', 'cx-note', S.toolCount(d.toolCount)));
+      row.appendChild(lbl);
+      row.appendChild(ui.h('span', 'cx-pctcol', ui.fmt.percent(c.tok / d.total)));
+      row.appendChild(ui.h('span', 'cx-val', ui.fmt.count(c.tok)));
+      box.appendChild(row);
+    }
+  }
+
+  const foot = ui.h('div', 'cx-foot');
+  foot.appendChild(
+    footLine(
+      ui,
+      d.countedTokens > 0
+        ? [S.footCountedPre, { b: ui.fmt.count(d.countedTokens) }, S.footCountedPost]
+        : [S.footEstimated],
+    ),
+  );
+  foot.appendChild(footLine(ui, [{ b: S.footSchemaB }, S.footSchemaPost]));
+  if (!d.keepOn && d.strippedThinking > 0) {
+    foot.appendChild(
+      footLine(ui, [
+        S.footStrippedPre,
+        { b: ui.fmt.count(d.strippedThinking) },
+        S.footStrippedPost,
+      ]),
+    );
+  }
+  if (d.maxTokens !== null) {
+    foot.appendChild(
+      footLine(
+        ui,
+        d.softRatio === null
+          ? [S.footHardPre, { b: ui.fmt.count(d.maxTokens) }, S.footHardPost]
+          : [S.footSoftPre, { b: ui.fmt.count(Math.round(d.maxTokens * d.softRatio)) }, S.footSoftPost(ui.fmt.count(d.maxTokens))],
+      ),
+    );
+  }
+  box.appendChild(foot);
+  return box;
+}

package/src/web/client/features/live/fork.ts

@@ -0,0 +1,156 @@
+import type { ContextRecord } from '../../../../protocol/open-responses/context.ts';
+/**
+ * fork 视图选择当前显示的 session。主 session 使用调试推送；其他 session 通过 GET /api/sessions/messages?id= 轮询。
+ * 轮询受 lifecycle 管理，session 结束或离开视图时停止；内容变化才重画，并保留用户滚动位置。
+ */
+
+import type { ConsoleUi, Disposable } from '../../../shared/client-panel.ts';
+import { get } from '../../core/api.ts';
+import type { Lifecycle } from '../../core/lifecycle.ts';
+import type { SessionStat } from './protocol.ts';
+import { S } from './strings.ts';
+import type { TimelineView } from './timeline.ts';
+
+/** 主 session 的固定 id 与显示名(服务端 `/ws/debug` 推的就是这一份)。 */
+export const MAIN_ID = 'main';
+export const MAIN_LABEL = S.mainLabel;
+
+const FORK_POLL_MS = 3000;
+
+/** 同一 Response 的多个 Item 可以交错增长。 */
+function messageRevision(messages: readonly ContextRecord[]): string {
+  return JSON.stringify(messages);
+}
+
+export interface ForkDeps {
+  ui: ConsoleUi;
+  lifecycle: Lifecycle;
+  signal: AbortSignal;
+  timeline: TimelineView;
+  /** 主 session 的消息(切回主视图时重画用) */
+  mainMessages(): readonly ContextRecord[];
+  /** 主 session 的合成开头(切回主视图时把标注块画回来) */
+  mainHead?(): readonly ContextRecord[];
+  /** 当前 session 列表(判断 fork 是否已结束) */
+  sessions(): readonly SessionStat[];
+  /** 当前观察目标变了(卡条要重画选中态) */
+  onChange(): void;
+  onError(err: unknown): void;
+}
+
+export interface ForkView {
+  readonly id: string;
+  readonly label: string;
+  /** 切去看某个 session。`MAIN_ID` 回主视图。 */
+  switchTo(id: string, label: string): void;
+  /** 主 session 的消息变了(实时帧):在主视图时才需要动。 */
+  isMain(): boolean;
+  /** session 列表更新后调一次:目标已结束就停轮询。 */
+  noteSessions(): void;
+}
+
+export function createForkView(deps: ForkDeps): ForkView {
+  const { ui, timeline } = deps;
+  let id = MAIN_ID;
+  let label = MAIN_LABEL;
+  let lastRevision = '';
+  let poll: Disposable | null = null;
+
+  const stopPolling = (): void => {
+    poll?.dispose();
+    poll = null;
+  };
+
+  /** 目标 session 已结束就不必再轮。 */
+  const maybeStop = (): void => {
+    const st = deps.sessions().find((x) => x.id === id);
+    if (st && st.endedAt != null) stopPolling();
+  };
+
+  const banner = (count: number, estTokens: number): HTMLElement => {
+    const bar = ui.h('div', 'forkbanner');
+    const st = deps.sessions().find((x) => x.id === id);
+    const ended = !!st && st.endedAt != null;
+    const info = ui.h('span');
+    info.appendChild(ui.h('span', null, S.forkViewing));
+    info.appendChild(ui.h('b', null, label));
+    info.appendChild(ui.h('span', 'meta2', ` (${id})`));
+    info.appendChild(
+      ui.h(
+        'span',
+        null,
+        S.forkInfo(count, ui.fmt.count(estTokens || 0), ended, Math.round(FORK_POLL_MS / 1000)),
+      ),
+    );
+    const back = ui.button(S.forkBack, {
+      size: 'sm',
+      onClick: () => view.switchTo(MAIN_ID, MAIN_LABEL),
+    });
+    bar.append(info, back);
+    return bar;
+  };
+
+  const refresh = async (force: boolean): Promise<void> => {
+    const asked = id;
+    if (asked === MAIN_ID) return;
+    try {
+      const data = await get<{ messages: ContextRecord[]; estTokens?: number }>(
+        `/api/sessions/messages?id=${encodeURIComponent(asked)}`,
+        { signal: deps.signal },
+      );
+      if (id !== asked) return; // 期间用户又切了,这份回应已经过期
+      const messages = Array.isArray(data?.messages) ? data.messages : [];
+      const revision = messageRevision(messages);
+      if (!force && revision === lastRevision) {
+        maybeStop();
+        return;
+      }
+      lastRevision = revision;
+      timeline.rebuild(messages, {
+        banner: banner(messages.length, data?.estTokens ?? 0),
+        empty: S.forkEmpty,
+        keepScroll: !force,
+      });
+      maybeStop();
+    } catch (err) {
+      if ((err as { name?: string } | null)?.name === 'AbortError') return; // 页面走了,不是失败
+      if (id !== asked) return;
+      deps.onError(err);
+      timeline.rebuild([], {
+        banner: banner(0, 0),
+        empty: S.forkFetchFailed(String((err as Error)?.message ?? err)),
+      });
+      stopPolling();
+    }
+  };
+
+  const view: ForkView = {
+    get id(): string {
+      return id;
+    },
+    get label(): string {
+      return label;
+    },
+    switchTo(next, nextLabel) {
+      if (id === next) return;
+      stopPolling();
+      id = next;
+      label = nextLabel;
+      lastRevision = '';
+      deps.onChange();
+      if (next === MAIN_ID) {
+        timeline.rebuild(deps.mainMessages(), { head: deps.mainHead?.() ?? null });
+        return;
+      }
+      void refresh(true);
+      poll = deps.lifecycle.interval(() => void refresh(false), FORK_POLL_MS);
+    },
+    isMain() {
+      return id === MAIN_ID;
+    },
+    noteSessions() {
+      maybeStop();
+    },
+  };
+  return view;
+}