cortico 0.1.0

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

@@ -0,0 +1,254 @@
+/**
+ * core 的运行态、会话统计、事件流、日志、数据与配置页，不持有或显示人格前缀。
+ * 工具表不在这里:那是 Persona 页的框架页签。
+ * 子页状态由路由表达；未挂载的能力不显示页签。仅当前子页运行轮询，状态保存在挂载闭包，由调试帧或一次性 GET 填充。
+ */
+
+import type { Disposable } from '../../../shared/client-panel.ts';
+import type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { pageIntro } from '../../ui/page.ts';
+import { get } from '../../core/api.ts';
+import { browserSocketEnv, openFrameworkSocket, type SocketEnv } from '../../core/websocket.ts';
+import {
+  arr,
+  str,
+  type SessionStat,
+  type StatusSnapshot,
+} from '../live/protocol.ts';
+import { createEventsView } from './events.ts';
+import { createRunlogView } from './runlog.ts';
+import { createRunView } from './run.ts';
+import { createSessionTable } from './sessions.ts';
+import { S } from './strings.ts';
+import { createConfigView } from '../config/view.ts';
+import { createStorageView } from '../storage/view.ts';
+
+const CORE_ROUTE = 'core';
+const DEBUG_WS_PATH = '/ws/debug';
+
+/** 一个子页签。`need` 是它依赖的 capability(null = 永远有)。 */
+interface SubDef {
+  id: string;
+  label: string;
+  need: string | null;
+}
+
+const CORE_SUBS: readonly SubDef[] = [
+  { id: 'run', label: S.subRun, need: null },
+  { id: 'sessions', label: S.subSessions, need: 'sessions' },
+  { id: 'events', label: S.subEvents, need: null },
+  { id: 'runlog', label: S.subRunlog, need: null },
+  { id: 'data', label: S.subData, need: 'storage' },
+  { id: 'config', label: S.subConfig, need: 'config' },
+];
+
+export interface CoreFeatureOptions {
+  env?: SocketEnv;
+}
+
+export function createCoreFeature(opts: CoreFeatureOptions = {}): FrameworkFeature {
+  return {
+    route: CORE_ROUTE,
+    label: S.navLabel,
+    icon: 'activity',
+    navGroup: S.navGroup,
+    // 事件流与运行日志不依赖任何可选表面,所以这一页永远有意义。
+    mount(ctx) {
+      return mountHarness(ctx, opts.env ?? browserSocketEnv(window));
+    },
+  };
+}
+
+export const coreFeature: FrameworkFeature = createCoreFeature();
+
+function mountHarness(ctx: FeatureContext, env: SocketEnv): Disposable | void {
+  const { ui } = ctx;
+
+  const state = {
+    status: null as StatusSnapshot | null,
+    sessions: [] as SessionStat[],
+  };
+
+  const subs = CORE_SUBS.filter((s) => s.need === null || ctx.capabilities[s.need] === true);
+  const wanted = str(ctx.route.segments[1]);
+  let current = subs.some((s) => s.id === wanted) ? wanted : (subs[0]?.id ?? 'run');
+
+  // ── 页头 ─────────────────────────────────────────────────────────
+  const view = ui.h('div', 'coreview');
+  const head = pageIntro(ui, S.pageTitle);
+  head.className = 'featureintro pagehead';
+  const tabs = ui.segmented(
+    subs.map((s) => ({ value: s.id, label: s.label })),
+    { value: current, onSelect: (v) => show(v, true) },
+  );
+  const tabBar = ui.h('div', 'subtabs');
+  tabBar.appendChild(tabs.el);
+  const net = ui.msgline('');
+  tabBar.appendChild(net);
+  const scroll = ui.h('div', 'scroll');
+  const measure = ui.h('div', 'measure');
+  scroll.appendChild(measure);
+  view.append(head, tabBar, scroll);
+  ctx.root.appendChild(view);
+
+  const setNet = (online: boolean): void => {
+    net.className = online ? 'msgline' : 'msgline bad';
+    net.textContent = online ? '' : S.netOffline;
+  };
+
+  // ── 六个子页 ─────────────────────────────────────────────────────
+  const run = createRunView({ ui });
+  const sessions = createSessionTable(ui);
+  const events = createEventsView({
+    ui,
+    lifecycle: ctx.lifecycle,
+    signal: ctx.signal,
+    onNet: setNet,
+    onError: (err) => ctx.onError(err),
+  });
+  const runlog = createRunlogView({
+    ui,
+    signal: ctx.signal,
+    onNet: setNet,
+    onError: (err) => ctx.onError(err),
+  });
+  // Core 自己的存储项与配置组:按 owner 取,World / Persona / Memory 的各在自己页上。
+  const data = createStorageView({ ui, signal: ctx.signal, filter: (p) => p.owner === 'core', clearAll: true });
+  const dataSheet = ui.sheet({ title: S.dataTitle, en: 'core storage', desc: S.dataDesc });
+  dataSheet.body.appendChild(data.el);
+  const config = createConfigView({
+    ui,
+    lifecycle: ctx.lifecycle,
+    signal: ctx.signal,
+    filter: (group) => group.owner === 'core',
+    showOwner: false,
+    emptyText: S.configEmpty,
+  });
+  const configSheet = ui.sheet({ title: S.configTitle, en: 'core config', desc: S.configDesc });
+  configSheet.body.appendChild(config.el);
+
+  const panes: Record<string, HTMLElement> = {
+    run: run.el,
+    sessions: sessions.el,
+    events: events.el,
+    runlog: runlog.el,
+    data: dataSheet.el,
+    config: configSheet.el,
+  };
+
+  /** 每次进入某个子页要做的事。进来才拉数据——没打开的页不该占网络。 */
+  const enter: Record<string, () => void> = {
+    run: () => {
+      run.render(state.status);
+      if (!hasDebug) void refreshStatus();
+    },
+    sessions: () => {
+      sessions.render(state.sessions);
+      if (!hasDebug) void refreshSessions();
+    },
+    events: () => {
+      void events.init();
+      events.setPolling(!hasDebug);
+    },
+    runlog: () => {
+      void runlog.refresh();
+    },
+    data: () => {
+      void data.load();
+    },
+    config: () => {
+      void config.load();
+    },
+  };
+
+  function show(sub: string, navigate: boolean): void {
+    const next = subs.some((s) => s.id === sub) ? sub : (subs[0]?.id ?? 'run');
+    if (next !== current) {
+      // 离开事件流就停它的轮询:一个看不见的表不该继续问服务端要数据。
+      if (current === 'events') events.setPolling(false);
+      current = next;
+    }
+    tabs.setValue(current);
+    while (measure.children.length) measure.children[0].remove();
+    const pane = panes[current];
+    if (pane) measure.appendChild(pane);
+    enter[current]?.();
+    if (navigate) ctx.router.navigate([CORE_ROUTE, current]);
+  }
+
+  // 地址栏被别处改了(后退键、别的页跳过来)时跟上,不重建整页。
+  ctx.lifecycle.own(
+    ctx.router.onChange((route) => {
+      if (route.segments[0] !== CORE_ROUTE) return;
+      const sub = str(route.segments[1]) || (subs[0]?.id ?? 'run');
+      if (sub !== current) show(sub, false);
+    }),
+  );
+
+  // ── 数据 ─────────────────────────────────────────────────────────
+  async function refreshStatus(): Promise<void> {
+    try {
+      const st = await get<StatusSnapshot>('/api/status', { signal: ctx.signal });
+      state.status = st;
+      setNet(true);
+      if (current === 'run') run.render(st);
+    } catch (err) {
+      if ((err as { name?: string } | null)?.name === 'AbortError') return;
+      setNet(false);
+      ctx.onError(err);
+    }
+  }
+
+  async function refreshSessions(): Promise<void> {
+    try {
+      const d = await get<{ sessions?: SessionStat[] }>('/api/sessions', { signal: ctx.signal });
+      state.sessions = d?.sessions ?? [];
+      if (current === 'sessions') sessions.render(state.sessions);
+    } catch (err) {
+      if ((err as { name?: string } | null)?.name === 'AbortError') return;
+      ctx.onError(err);
+    }
+  }
+
+  const hasDebug = ctx.capabilities.debug === true;
+  if (hasDebug) {
+    openFrameworkSocket({
+      path: DEBUG_WS_PATH,
+      lifecycle: ctx.lifecycle,
+      env,
+      onNet: setNet,
+      onError: (err) => ctx.onError(err),
+      onFrame: (f) => {
+        switch (f.t) {
+          case 'hello':
+            state.sessions = arr<SessionStat>(f.sessions);
+            state.status = (f.status as StatusSnapshot | null) ?? null;
+            if (current === 'run') run.render(state.status);
+            if (current === 'sessions') sessions.render(state.sessions);
+            break;
+          case 'status':
+            state.status = (f.status as StatusSnapshot | null) ?? null;
+            if (current === 'run') run.render(state.status);
+            break;
+          case 'sessions':
+            state.sessions = arr<SessionStat>(f.sessions);
+            if (current === 'sessions') sessions.render(state.sessions);
+            break;
+          // 有推送就不必轮询:到了才追一次。
+          case 'event':
+            if (current === 'events') void events.poll();
+            break;
+          case 'runlog':
+            if (current === 'runlog') void runlog.refresh();
+            break;
+          default:
+            break;
+        }
+      },
+    });
+  } else {
+    void refreshStatus();
+  }
+
+  show(current, false);
+}

package/src/web/client/features/core/run.ts

@@ -0,0 +1,56 @@
+/**
+ * 运行态概览。只读——暂停/继续那颗按钮在顶栏,这里不重复一份。
+ */
+
+import type { ConsoleUi } from '../../../shared/client-panel.ts';
+import { loopOf, type StatusSnapshot } from '../live/protocol.ts';
+import { S } from './strings.ts';
+
+export interface RunViewDeps {
+  ui: ConsoleUi;
+}
+
+export interface RunView {
+  el: HTMLElement;
+  render(st: StatusSnapshot | null): void;
+}
+
+export function createRunView(deps: RunViewDeps): RunView {
+  const { ui } = deps;
+  const sheet = ui.sheet({
+    title: S.runTitle,
+    en: 'context · cache · batches',
+  });
+  const grid = ui.statgrid();
+  sheet.body.appendChild(grid);
+
+  return {
+    el: sheet.el,
+    render(st) {
+      while (grid.children.length) grid.children[0].remove();
+      if (!st) {
+        grid.appendChild(ui.placeholder(S.noStatus));
+        return;
+      }
+      const loop = loopOf(st);
+      const u = loop.lastUsage ?? {};
+      const cache =
+        u.promptTokens ? ui.fmt.percent((u.cacheHitTokens || 0) / u.promptTokens) : '—';
+      const cards = [
+        { k: S.statContext, v: ui.fmt.count(loop.estTokens), unit: 'tok', accent: true },
+        { k: S.statMessages, v: loop.messageCount ?? '—', unit: S.unitMsgs },
+        { k: S.statCache, v: cache },
+        { k: S.statRounds, v: loop.roundsLastBatch ?? '—' },
+        { k: S.statBatches, v: loop.batchesHandled ?? '—' },
+        { k: S.statEvents, v: st.eventCount ?? '—', unit: S.unitEvents },
+        { k: S.statOnline, v: st.terminalOnline ?? '—', unit: S.unitPeople },
+        {
+          k: S.statRun,
+          v: loop.paused ? S.runPaused : loop.scheduleBlocked ? S.runBlocked : S.runRunning,
+          accent: !!(loop.paused || loop.scheduleBlocked),
+        },
+      ];
+      for (const c of cards) grid.appendChild(ui.stat(c));
+    },
+  };
+}

package/src/web/client/features/core/runlog.ts

@@ -0,0 +1,214 @@
+/**
+ * 运行日志不进入 agent 上下文。/api/log?run&level&area&grep&round&limit 按条件从
+ * log.jsonl 尾部查满 limit 条；run 默认当前运行，清单取自 /api/runs。
+ * 文本输入去抖 300 ms，Enter 立即查询。
+ */
+
+import type { ConsoleUi } from '../../../shared/client-panel.ts';
+import { get } from '../../core/api.ts';
+import { S } from './strings.ts';
+
+export interface RunlogEntry {
+  ts: string;
+  level: string;
+  area: string;
+  event?: string;
+  msg: string;
+  /** 折叠汇总行代表的重复条数 */
+  repeat?: number;
+  data?: unknown;
+  err?: { name: string; message: string };
+}
+
+interface RunRow {
+  run: string;
+  startedAt?: string;
+}
+
+interface RunsReply {
+  current: string | null;
+  runs: RunRow[];
+}
+
+const TAIL = 200;
+/** `data` 摘要最多印多少字。 */
+const DATA_MAX = 300;
+const DEBOUNCE_MS = 300;
+
+function truncate(s: string, n: number): string {
+  return s && s.length > n ? `${s.slice(0, n)}…` : s;
+}
+
+export interface RunlogViewDeps {
+  ui: ConsoleUi;
+  signal: AbortSignal;
+  onNet(online: boolean): void;
+  onError(err: unknown): void;
+}
+
+export interface RunlogView {
+  el: HTMLElement;
+  refresh(): Promise<void>;
+}
+
+export function createRunlogView(deps: RunlogViewDeps): RunlogView {
+  const { ui } = deps;
+  const q = { run: '', level: 'debug', area: '', grep: '', round: '' };
+  let runsLoaded = false;
+  let debounce: ReturnType<typeof setTimeout> | null = null;
+
+  const cancel = (): void => {
+    if (debounce !== null) clearTimeout(debounce);
+    debounce = null;
+  };
+  const later = (): void => {
+    cancel();
+    debounce = setTimeout(() => {
+      debounce = null;
+      void view.refresh();
+    }, DEBOUNCE_MS);
+  };
+  const now = (): void => {
+    cancel();
+    void view.refresh();
+  };
+  deps.signal.addEventListener('abort', cancel, { once: true });
+
+  const bar = ui.rowbar();
+  const runSel = ui.select({
+    cls: 'mono',
+    options: [{ value: '', label: S.currentRun }],
+    onChange: (v) => {
+      q.run = v;
+      now();
+    },
+  });
+  const levelSel = ui.select({
+    options: [
+      { value: 'debug', label: S.allLevels },
+      { value: 'info', label: 'info+' },
+      { value: 'warn', label: 'warn+' },
+      { value: 'error', label: 'error' },
+    ],
+    value: q.level,
+    onChange: (v) => {
+      q.level = v;
+      now();
+    },
+  });
+  const areaIn = ui.input({
+    type: 'search',
+    cls: 'mono',
+    placeholder: S.areaPlaceholder,
+    onInput: (v) => {
+      q.area = v.trim();
+      later();
+    },
+    onCommit: now,
+  });
+  const grepIn = ui.input({
+    type: 'search',
+    placeholder: S.grepPlaceholder,
+    onInput: (v) => {
+      q.grep = v.trim();
+      later();
+    },
+    onCommit: now,
+  });
+  const roundIn = ui.input({
+    type: 'number',
+    cls: 'mono',
+    placeholder: S.roundPlaceholder,
+    onInput: (v) => {
+      q.round = v.trim();
+      later();
+    },
+    onCommit: now,
+  });
+  const refreshBtn = ui.button(S.refresh, {
+    size: 'sm',
+    onClick: () => {
+      runsLoaded = false;
+      now();
+    },
+  });
+  bar.append(
+    ui.h('span', 'pagedesc grow', S.runlogDesc),
+    runSel,
+    levelSel,
+    areaIn,
+    grepIn,
+    ui.field(S.roundField, roundIn),
+    refreshBtn,
+  );
+
+  const table = ui.table({
+    head: [S.logHeadTime, S.logHeadLevel, S.logHeadArea, S.logHeadMsg],
+    maxHeight: 'calc(100vh - 300px)',
+  });
+  const el = ui.h('div');
+  el.append(bar, table.el);
+
+  const query = (): string => {
+    const p = new URLSearchParams({ limit: String(TAIL), level: q.level });
+    if (q.run) p.set('run', q.run);
+    if (q.area) p.set('area', q.area);
+    if (q.grep) p.set('grep', q.grep);
+    if (q.round) p.set('round', q.round);
+    return `/api/log?${p.toString()}`;
+  };
+
+  /** 重画 run 下拉;已选的 run 还在就保留,否则回到当前 run。 */
+  const loadRuns = async (): Promise<void> => {
+    const d = await get<RunsReply>('/api/runs', { signal: deps.signal });
+    const runs = [...(d?.runs ?? [])].reverse();
+    const options = runs.map((r) => {
+      const op = ui.h('option', null, r.startedAt ? `${r.run} · ${r.startedAt}` : r.run);
+      op.value = r.run;
+      return op;
+    });
+    runSel.replaceChildren(...options);
+    const keep = runs.some((r) => r.run === q.run) ? q.run : (d?.current ?? '');
+    q.run = runs.some((r) => r.run === keep) ? keep : '';
+    runSel.value = q.run;
+    runsLoaded = true;
+  };
+
+  /** 正文格:msg,折叠计数,`data` 摘要,err.message 走警示色。 */
+  const bodyCell = (en: RunlogEntry): HTMLElement => {
+    const box = ui.h('span');
+    box.appendChild(ui.h('span', null, en.msg));
+    if (en.repeat) box.appendChild(ui.h('span', 'data-extra', ` ×${en.repeat + 1}`));
+    if (en.data !== undefined) {
+      box.appendChild(ui.h('span', 'data-extra', ` ${truncate(JSON.stringify(en.data), DATA_MAX)}`));
+    }
+    if (en.err) box.appendChild(ui.h('span', 'lv-error', ` ${en.err.message}`));
+    return box;
+  };
+
+  const view: RunlogView = {
+    el,
+    async refresh() {
+      try {
+        if (!runsLoaded) await loadRuns();
+        const entries = await get<RunlogEntry[]>(query(), { signal: deps.signal });
+        const rows = Array.isArray(entries) ? entries : [];
+        table.clear(rows.length ? undefined : S.noLog);
+        for (const en of rows) {
+          table.addRow([
+            { text: ui.fmt.clock(en.ts), cls: 'mono' },
+            { text: en.level, cls: `lv lv-${en.level}` },
+            { text: en.event ? `${en.area}/${en.event}` : en.area, cls: 'mono' },
+            { el: bodyCell(en), cls: 'txt' },
+          ]);
+        }
+        deps.onNet(true);
+      } catch (err) {
+        if ((err as { name?: string } | null)?.name === 'AbortError') return;
+        deps.onNet(false);
+        deps.onError(err);
+      }
+    },
+  };
+  return view;
+}

package/src/web/client/features/core/sessions.ts

@@ -0,0 +1,53 @@
+/**
+ * 主 session 与 fork 本次运行的 token、缓存统计。数据来自 /ws/debug 的 sessions 帧或 /api/sessions；表格经 ui.table.addRow 写入文本，不将 session label 解析为 HTML。
+ */
+
+import type { ConsoleUi } from '../../../shared/client-panel.ts';
+import type { SessionStat } from '../live/protocol.ts';
+import { S } from './strings.ts';
+
+export interface SessionTable {
+  el: HTMLElement;
+  render(list: readonly SessionStat[]): void;
+}
+
+export function createSessionTable(ui: ConsoleUi): SessionTable {
+  const sheet = ui.sheet({
+    title: S.sessionsTitle,
+    en: 'usage / cache',
+    desc: S.sessionsDesc,
+  });
+  const table = ui.table({
+    head: [
+      'session',
+      S.sesHeadStatus,
+      S.sesHeadCalls,
+      S.sesHeadInput,
+      S.sesHeadCache,
+      S.sesHeadOutput,
+      S.sesHeadMsgs,
+    ],
+  });
+  sheet.body.appendChild(table.el);
+
+  return {
+    el: sheet.el,
+    render(list) {
+      table.clear(list.length ? undefined : S.noSessions);
+      for (const s of list) {
+        const name = ui.h('span');
+        name.appendChild(ui.h('b', null, s.label));
+        name.appendChild(ui.h('span', 'data-extra', ` ${s.id}`));
+        table.addRow([
+          name,
+          { text: s.endedAt == null ? S.running : S.ended, cls: 'mono' },
+          { text: s.calls, cls: 'mono' },
+          { text: ui.fmt.count(s.promptTokens), cls: 'mono' },
+          { text: ui.fmt.percent(s.cacheHitRate), cls: 'mono' },
+          { text: ui.fmt.count(s.completionTokens), cls: 'mono' },
+          { text: s.messageCount, cls: 'mono' },
+        ]);
+      }
+    },
+  };
+}