cortico 0.1.0

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

@@ -0,0 +1,125 @@
+/** 渲染贡献方自报的四态灯；导航、World 总览与页头共用非重叠轮询，隐藏页面跳过取数。 */
+
+import { get } from '../core/api.ts';
+import { toDisposable, type Disposable } from '../../shared/client-panel.ts';
+import {
+  CONSOLE_LAMPS_ROUTE,
+  type ConsoleLamp,
+  type ConsoleLampsResponse,
+} from '../../shared/console-protocol.ts';
+import { h } from './dom.ts';
+import { S } from './strings.ts';
+
+/** 灯多久重取一次。它标的是"这一刻"，慢一拍就成了另一个时刻的事实。 */
+const LAMP_POLL_MS = 500;
+
+/** state → class。`offline` 不加修饰，就是 `.navdot` 本体那个灰。 */
+const LAMP_CLASS: Record<ConsoleLamp['state'], string> = {
+  online: 'navdot on',
+  loading: 'navdot warn',
+  error: 'navdot bad',
+  offline: 'navdot',
+};
+
+/** 悬停时的状态词。 */
+const LAMP_WORD: Record<ConsoleLamp['state'], string> = {
+  online: S.lamp.online,
+  loading: S.lamp.loading,
+  error: S.lamp.error,
+  offline: S.lamp.offline,
+};
+
+/**
+ * 一颗灯的悬停说明：链路名在最前面。
+ *
+ * 导航上只有这一处读得到 `label`，所以它必须先回答"这是谁"，再回答"它怎么了"
+ * ——一排七个同样大小的点，颜色说得清严重程度，说不清是哪条链路。
+ */
+function lampTitle(lamp: ConsoleLamp): string {
+  const head = `${lamp.label} ${LAMP_WORD[lamp.state]}`;
+  return lamp.hint ? `${head} · ${lamp.hint}` : head;
+}
+
+function paintDot(el: HTMLElement, lamp: ConsoleLamp): void {
+  el.className = LAMP_CLASS[lamp.state];
+  el.title = lampTitle(lamp);
+  el.setAttribute('aria-label', el.title);
+}
+
+function makeDot(doc: Document, lamp: ConsoleLamp): HTMLSpanElement {
+  const el = h(doc, 'span', 'navdot');
+  el.setAttribute('role', 'img');
+  paintDot(el, lamp);
+  return el;
+}
+
+/**
+ * 把一排灯画进既有容器。**空数组就是藏起来的空容器**，不画占位灰点：灰是"这条
+ * 链路关着"，拿它当"没报灯"讲，等于替 provider 说了一句它没说过的话。
+ *
+ * 数目没变就地改颜色，变了才重排子节点——这是每半秒一次的操作，没必要每次重建。
+ */
+export function paintLamps(host: HTMLElement, lamps: readonly ConsoleLamp[]): void {
+  const dots = [...host.children] as HTMLElement[];
+  if (dots.length === lamps.length) {
+    lamps.forEach((lamp, i) => paintDot(dots[i], lamp));
+  } else {
+    host.replaceChildren(...lamps.map((lamp) => makeDot(host.ownerDocument, lamp)));
+  }
+  host.hidden = lamps.length === 0;
+}
+
+/** 新造一排灯。给不出灯就得到一个藏起来的空容器（之后轮询可以点亮它）。 */
+export function lampRow(doc: Document, lamps: readonly ConsoleLamp[]): HTMLSpanElement {
+  const host = h(doc, 'span', 'navlamps');
+  paintLamps(host, lamps);
+  return host;
+}
+
+// ---------------------------------------------------------------------------
+// 取数
+// ---------------------------------------------------------------------------
+
+type LampListener = (lamps: Record<string, ConsoleLamp[]>) => void;
+
+const listeners = new Set<LampListener>();
+let timer: ReturnType<typeof setInterval> | null = null;
+let doc: Document | null = null;
+/** 是否有尚未完成的轮询请求。 */
+let pending = false;
+
+function tick(): void {
+  if (pending || doc?.hidden !== false) return; // 后台标签页里没人看那排灯
+  pending = true;
+  void get<ConsoleLampsResponse>(CONSOLE_LAMPS_ROUTE)
+    .then(
+      (out) => {
+        const lamps = out?.lamps ?? {};
+        for (const cb of [...listeners]) cb(lamps);
+      },
+      () => { /* 取不到灯不等于灯灭了：留上一拍的读数 */ },
+    )
+    .finally(() => { pending = false; });
+}
+
+/**
+ * 订阅状态灯。第一个订阅者把轮询打开，最后一个走掉时关掉——控制台整页没有一颗
+ * 灯在看的时候，不该还有一个定时器在敲后端。
+ *
+ * `ownerDoc` 只用来问"页面还看得见吗"，第一个订阅者带进来的那份作数。
+ */
+export function subscribeLamps(ownerDoc: Document, cb: LampListener): Disposable {
+  listeners.add(cb);
+  if (timer === null) {
+    doc = ownerDoc;
+    timer = setInterval(tick, LAMP_POLL_MS);
+  }
+  return toDisposable(() => {
+    listeners.delete(cb);
+    if (listeners.size > 0 || timer === null) return;
+    clearInterval(timer);
+    timer = null;
+    doc = null;
+    pending = false;
+  });
+}

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

@@ -0,0 +1,98 @@
+/** 有行数上限的滚动日志；超出时删除最早行。仅在贴底时随新增内容滚动，上翻后暂停，返回底部后恢复。 */
+
+import type {
+  ConsoleLog,
+  ConsoleLogOptions,
+  ConsoleLogTone,
+} from '../../shared/client-panel.ts';
+import { h } from './dom.ts';
+
+/** 缺省上限。四百行足够翻一阵子，又不至于让布局开始喘。 */
+const LOG_MAX_LINES = 400;
+
+/** 缺省的粘滞容差（像素）。 */
+export const LOG_STICK_PX = 24;
+
+/** 缺省高度。给了限高才会滚，粘滞也才有意义。 */
+const LOG_MAX_HEIGHT = '240px';
+
+/** scrollTop 可能含小数，使用容差判断是否贴底。未溢出或缺少有效读数时返回 true；负容差按 0 处理。 */
+export function shouldStick(
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+  threshold: number = LOG_STICK_PX,
+): boolean {
+  const rest = scrollHeight - clientHeight - scrollTop;
+  if (!Number.isFinite(rest)) return true;
+  return rest <= Math.max(0, threshold);
+}
+
+/** tone → class。`plain` 与不给一样落中性 `.logline`。 */
+function lineClass(tone?: ConsoleLogTone): string {
+  return tone && tone !== 'plain' ? 'logline ' + tone : 'logline';
+}
+
+export function log(doc: Document, signal: AbortSignal, opts?: ConsoleLogOptions): ConsoleLog {
+  const o = opts ?? {};
+  const max = Math.max(1, Math.floor(o.max ?? LOG_MAX_LINES));
+  const threshold = o.stickThreshold ?? LOG_STICK_PX;
+  const el = h(doc, 'div', o.variant === 'conversation' ? 'logview conversation' : 'logview');
+  el.setAttribute('style', 'max-height:' + (o.maxHeight ?? LOG_MAX_HEIGHT));
+
+  // 空态是一个独立节点、且在第一行进来时就摘掉:留着它当孩子的话,环形裁剪
+  // 从头摘的第一个就是它,行数从此少算一行。
+  let empty: HTMLElement | null = null;
+  const showEmpty = (): void => {
+    if (!o.empty || empty) return;
+    empty = h(doc, 'div', 'placeholder', o.empty);
+    el.appendChild(empty);
+  };
+  const hideEmpty = (): void => {
+    empty?.remove();
+    empty = null;
+  };
+  showEmpty();
+
+  // 初值 true:刚建出来的日志本来就在底部,第一批行必须跟着走
+  let stuck = true;
+  const scrollToEnd = (): void => {
+    el.scrollTop = el.scrollHeight;
+    stuck = true;
+  };
+  // 唯一的一条监听,随面板 signal 摘。程序化地设 scrollTop 也会派发 scroll,
+  // 那一发照样走这里重算——算出来仍是"贴着底",所以不必特意去屏蔽它。
+  el.addEventListener(
+    'scroll',
+    () => {
+      stuck = shouldStick(el.scrollTop, el.scrollHeight, el.clientHeight, threshold);
+    },
+    { signal },
+  );
+
+  return {
+    el,
+    append(line, tone) {
+      hideEmpty();
+      const row = h(doc, 'div', lineClass(tone), line);
+      el.appendChild(row);
+      while (el.children.length > max) el.children[0].remove();
+      if (stuck) scrollToEnd();
+      return row;
+    },
+    clear() {
+      while (el.children.length) el.children[0].remove();
+      empty = null;
+      showEmpty();
+      // 清空之后重新粘住:一个空的日志框谈不上"用户正在往上翻"
+      stuck = true;
+    },
+    get count(): number {
+      return empty ? 0 : el.children.length;
+    },
+    get stuck(): boolean {
+      return stuck;
+    },
+    scrollToEnd,
+  };
+}

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

@@ -0,0 +1,184 @@
+/** 浮层挂载到调用方提供的 host，并随面板 signal 关闭。confirm 取消或 abort 时返回 false；abort 后不显示新浮层。 */
+
+import type { Disposable } from '../../shared/client-panel.ts';
+import { h } from './dom.ts';
+import { button, rowbar } from './sheet.ts';
+import { S } from './strings.ts';
+
+/** 浮层的生存环境：文档、挂载点、面板生命周期。 */
+export interface OverlayEnv {
+  doc: Document;
+  /** 浮层挂在这里。**不能是面板的 `root`**——那个在 unmount 时会被清空。 */
+  host: HTMLElement;
+  /** 面板的 `ctx.signal`。abort = 面板没了，浮层必须跟着消失。 */
+  signal: AbortSignal;
+}
+
+/**
+ * 一层浮层。`close()` 幂等。
+ * `dispose` 与 `close` 是同一个函数：对外（扩展手里的 `Disposable`）叫 dispose，
+ * 对内叫 close——不为了统一名字去改契约里那个通用的资源名。
+ */
+export interface Overlay extends Disposable {
+  el: HTMLElement;
+  close(): void;
+  /** 本层的生命周期：`close()` 即 abort。层内的监听全挂它。 */
+  signal: AbortSignal;
+}
+
+/** 面板已经 abort 之后的调用返回它：拿到的是个不会爆的空句柄。 */
+export const noopDisposable: Disposable = { dispose() {} };
+
+/**
+ * 铺一层浮层：进 DOM，接上"面板 abort 就关"。
+ *
+ * 面板那条 abort 监听自己也挂着本层的 signal（`once` + `signal`），所以浮层先被关掉时
+ * 它当场摘掉——不会在面板的 signal 上攒一串已经没用的闭包（那是个真泄漏：一个面板
+ * 弹一百次 toast 就攒一百条）。
+ */
+function openLayer(env: OverlayEnv, el: HTMLElement, onClose?: () => void): Overlay {
+  const ac = new AbortController();
+  const close = (): void => {
+    if (ac.signal.aborted) return;
+    ac.abort();
+    el.remove();
+    onClose?.();
+  };
+  env.signal.addEventListener('abort', close, { once: true, signal: ac.signal });
+  env.host.appendChild(el);
+  return { el, close, signal: ac.signal, dispose: close };
+}
+
+/**
+ * 铺一层 `.modal` 遮罩，接好"点遮罩 / 按 Esc 关闭"。
+ * `onClose` 只会被调一次；重复调用 `close()` 是安全的。
+ */
+function openModal(env: OverlayEnv, onClose: () => void): Overlay {
+  const el = h(env.doc, 'div', 'modal');
+  el.setAttribute('role', 'dialog');
+  el.setAttribute('aria-modal', 'true');
+  const layer = openLayer(env, el, onClose);
+
+  env.doc.addEventListener(
+    'keydown',
+    (ev: KeyboardEvent) => {
+      if (ev.key === 'Escape') layer.close();
+    },
+    { signal: layer.signal },
+  );
+  // 按下位置决定是否关闭，卡片内开始的拖选不关闭弹窗。
+  el.addEventListener(
+    'mousedown',
+    (ev: MouseEvent) => {
+      if (ev.target === el) layer.close();
+    },
+    { signal: layer.signal },
+  );
+  return layer;
+}
+
+/** toast 停留多久（与 `@keyframes toast` 的 1.9s 对齐，留一点余量再摘节点）。 */
+const TOAST_MS = 2000;
+
+/**
+ * 瞬时提示。`prev` 是上一条 toast（同一个 ui 实例只留一条，后来的顶掉前面的，
+ * 与既有前端 `sendToast` 的行为一致）。返回新的一层，面板 abort 后返回 `null`。
+ */
+export function toast(
+  env: OverlayEnv,
+  text: string,
+  tone: 'ok' | 'bad' | undefined,
+  prev: Overlay | null,
+): Overlay | null {
+  prev?.close();
+  if (env.signal.aborted) return null;
+  const el = h(env.doc, 'div', tone === 'bad' ? 'toast bad' : 'toast', text);
+  const layer = openLayer(env, el);
+  const timer = setTimeout(() => layer.close(), TOAST_MS);
+  // 提前关掉(被下一条顶掉、或面板卸载)时把定时器也撤了,免得留一个空转的回调
+  layer.signal.addEventListener('abort', () => clearTimeout(timer), { once: true });
+  return layer;
+}
+
+/** 模态确认。resolve 之后 DOM 与监听都已清干净。 */
+export function confirm(
+  env: OverlayEnv,
+  opts: { title: string; body?: string; danger?: boolean },
+): Promise<boolean> {
+  // 面板已经卸了:不弹窗,直接按"没答应"收场
+  if (env.signal.aborted) return Promise.resolve(false);
+  return new Promise<boolean>((resolve) => {
+    // 默认答案就是 false,所以**任何**关闭路径(取消键 / Esc / 点遮罩 / 面板 abort)
+    // 都会 resolve false,不必各自记得去 settle。
+    let answer = false;
+    const modal = openModal(env, () => resolve(answer));
+    const settle = (v: boolean): void => {
+      answer = v;
+      modal.close();
+    };
+
+    const doc = env.doc;
+    const card = h(doc, 'div', 'modalcard');
+    card.setAttribute('style', 'width:min(460px,92vw)');
+    const head = h(doc, 'div', 'modalhead');
+    head.appendChild(h(doc, 'span', 'modaltitle', opts.title));
+    const body = h(doc, 'div', 'modalbody');
+    if (opts.body) body.appendChild(h(doc, 'div', null, opts.body));
+
+    const bar = rowbar(doc);
+    bar.appendChild(h(doc, 'span', 'grow'));
+    bar.appendChild(
+      button(doc, modal.signal, S.cancel, { size: 'sm', onClick: () => settle(false) }),
+    );
+    const ok = button(doc, modal.signal, opts.danger ? S.proceedAnyway : S.confirm, {
+      size: 'sm',
+      variant: opts.danger ? 'danger' : 'primary',
+      onClick: () => settle(true),
+    });
+    bar.appendChild(ok);
+    body.appendChild(bar);
+
+    card.append(head, body);
+    modal.el.appendChild(card);
+    ok.focus?.();
+  });
+}
+
+/** busy 不响应 Esc、遮罩或关闭按钮；由返回的 Disposable 或面板 abort 关闭。 */
+export function busy(env: OverlayEnv, title: string, text?: string): Disposable {
+  if (env.signal.aborted) return noopDisposable;
+  const doc = env.doc;
+  const el = h(doc, 'div', 'modal busy');
+  el.setAttribute('role', 'dialog');
+  el.setAttribute('aria-modal', 'true');
+  el.setAttribute('aria-busy', 'true');
+  const layer = openLayer(env, el);
+  const card = h(doc, 'div', 'modalcard');
+  card.setAttribute('style', 'width:min(460px,92vw)');
+  const head = h(doc, 'div', 'modalhead');
+  head.appendChild(h(doc, 'span', 'modaltitle', title));
+  const body = h(doc, 'div', 'modalbody');
+  if (text) body.appendChild(h(doc, 'div', 'busytext', text));
+  card.append(head, body);
+  el.appendChild(card);
+  return layer;
+}
+
+/** 可关闭的抽屉；字符串正文显示为 pre.mono，节点正文直接挂入 modalbody。 */
+export function drawer(env: OverlayEnv, title: string, body: string | HTMLElement): Disposable {
+  if (env.signal.aborted) return noopDisposable;
+  const doc = env.doc;
+  const modal = openModal(env, () => {});
+  const card = h(doc, 'div', 'modalcard');
+  const head = h(doc, 'div', 'modalhead');
+  head.append(
+    h(doc, 'span', 'modaltitle', title),
+    button(doc, modal.signal, S.close, { size: 'sm', onClick: () => modal.close() }),
+  );
+  const bodyEl = h(doc, 'div', 'modalbody');
+  // 字符串走 pre.mono 保持现状观感;节点直接进,抽屉不必知道里面是什么
+  bodyEl.appendChild(typeof body === 'string' ? h(doc, 'pre', 'mono', body) : body);
+  card.append(head, bodyEl);
+  modal.el.appendChild(card);
+  return modal;
+}

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

@@ -0,0 +1,8 @@
+import type { ConsoleUi } from '../../shared/client-panel.ts';
+
+export function pageIntro(ui: Pick<ConsoleUi, 'h'>, title: string, description?: string): HTMLElement {
+  const intro = ui.h('header', 'featureintro');
+  intro.appendChild(ui.h('h1', 'pagetitle', title));
+  if (description) intro.appendChild(ui.h('p', 'pagedesc', description));
+  return intro;
+}