@opencode-cockpit/trust 0.0.0-stage → 0.8.0

package/dist/core/view/model.js

@@ -0,0 +1,193 @@
+/**
+ * What both Trust screens read: every command Trust has counted, once, with where each agent stands
+ * on it; the families they group into; and the three numbers that sum a project up.
+ *
+ * **One command, one place.** The ledger used to split a family by section, so `head -30` was under
+ * Answers while `head` was also under Learning and its details repeated. Here a command is one
+ * `Command` whatever its agents say about it — trusted for one, two of three for another — and a
+ * family one `Family`. The screens draw each once.
+ */
+
+import { familyOf, outside } from "../family.js";
+import { keyOf, standing } from "../ledger.js";
+
+/** Where one agent stands on one command. */
+
+export function standOf(entry, {
+  state,
+  settings,
+  now
+}) {
+  const where = standing(entry, entry.danger, settings, now);
+  if (where.trusted) return {
+    kind: "trusted"
+  };
+  const family = familyOf(entry.permission, entry.subject);
+  if (state.widened.has(keyOf(entry.permission, entry.agent, family)) && outside(entry.permission, entry.subject) === undefined) return {
+    kind: "widened",
+    family
+  };
+  return {
+    kind: "counting",
+    have: where.have,
+    need: where.need,
+    expired: where.expired
+  };
+}
+export const answers = stand => stand.kind !== "counting";
+
+/** Approvals still needed; an expired count is as far as it gets. Zero: it answers. */
+export const distance = stand => stand.kind !== "counting" ? 0 : stand.expired ? Number.MAX_SAFE_INTEGER : stand.need - stand.have;
+
+/** One agent's standing on a command. */
+
+/**
+ * Where a command is, all agents together:
+ * - `answering`: Trust answers it for at least one agent;
+ * - `learning`: counting, with approvals that matter (two in a row, or answered before);
+ * - `once`: approved once and never again — most never come back, so they are kept out of the way.
+ */
+
+export const commandKey = (permission, subject) => JSON.stringify([permission, subject]);
+
+/** The standing the command is drawn by: the one that answers, else the closest. */
+export const leadOf = command => command.standings[0];
+
+/** Approvals the closest agent still needs. */
+export const closeness = command => distance(leadOf(command).stand);
+function phaseOf(standings) {
+  if (standings.some(each => answers(each.stand))) return "answering";
+  const once = standings.every(each => each.stand.kind === "counting" && each.stand.have <= 1 && each.entry.autos === 0);
+  return once ? "once" : "learning";
+}
+
+/**
+ * Every command anyone approved or Trust answered, one each. A subject only ever rejected has
+ * nothing to show and is left out.
+ */
+export function commandsOf(reading) {
+  const byKey = new Map();
+  for (const entry of reading.state.entries.values()) {
+    if (entry.approvals === 0 && entry.autos === 0) continue;
+    const key = commandKey(entry.permission, entry.subject);
+    const list = byKey.get(key) ?? [];
+    list.push({
+      entry,
+      stand: standOf(entry, reading)
+    });
+    byKey.set(key, list);
+  }
+  const out = [];
+  for (const [key, standings] of byKey) {
+    standings.sort((a, b) => distance(a.stand) - distance(b.stand) || b.entry.lastAt - a.entry.lastAt);
+    const first = standings[0].entry;
+    const danger = standings.find(each => each.entry.danger)?.entry.danger;
+    out.push({
+      key,
+      permission: first.permission,
+      subject: first.subject,
+      family: familyOf(first.permission, first.subject),
+      standings,
+      phase: phaseOf(standings),
+      ...(danger ? {
+        danger
+      } : {}),
+      lastAt: Math.max(...standings.map(each => each.entry.lastAt))
+    });
+  }
+  return out;
+}
+
+/** Answering newest first; then learning closest first, a dangerous one after the rest; then once. */
+export function byPhase(a, b) {
+  const order = {
+    answering: 0,
+    learning: 1,
+    once: 2
+  };
+  return order[a.phase] - order[b.phase] || (a.phase === "learning" ? Number(a.danger !== undefined) - Number(b.danger !== undefined) || closeness(a) - closeness(b) : 0) || b.lastAt - a.lastAt;
+}
+export const familyKey = (permission, family) => JSON.stringify([permission, family]);
+
+/** Where a family sorts: what answers, then what learns, then what is dangerous, then what was seen once. */
+function familyRank(family) {
+  if (family.widened.length > 0) return 0;
+  const best = family.commands[0];
+  if (!best) return 4;
+  if (best.phase === "answering") return 0;
+  if (best.phase === "once") return 3;
+  return best.danger ? 2 : 1;
+}
+
+/**
+ * The commands grouped by family, with every widened family — even one with no command left. Families
+ * that answer first (newest first), then those learning (closest first), the dangerous ones after,
+ * and families seen only once last.
+ */
+export function familiesOf(reading, commands = commandsOf(reading)) {
+  const families = new Map();
+  const familyFor = (permission, family) => {
+    const key = familyKey(permission, family);
+    let found = families.get(key);
+    if (!found) {
+      found = {
+        key,
+        permission,
+        family,
+        commands: [],
+        widened: [],
+        lastAt: 0
+      };
+      families.set(key, found);
+    }
+    return found;
+  };
+  for (const command of commands) {
+    const family = familyFor(command.permission, command.family);
+    family.commands.push(command);
+    family.lastAt = Math.max(family.lastAt, command.lastAt);
+  }
+  for (const widened of reading.state.widened.values()) {
+    const family = familyFor(widened.permission, widened.family);
+    family.widened.push(widened);
+    family.lastAt = Math.max(family.lastAt, widened.at);
+  }
+  for (const family of families.values()) family.commands.sort(byPhase);
+  const closest = family => family.commands[0] ? closeness(family.commands[0]) : 0;
+  return [...families.values()].sort((a, b) => familyRank(a) - familyRank(b) || (familyRank(a) === 1 || familyRank(a) === 2 ? closest(a) - closest(b) : 0) || b.lastAt - a.lastAt);
+}
+
+/** The project in three numbers, one per command. */
+
+export function countsOf(commands) {
+  const counts = {
+    trusted: 0,
+    learning: 0,
+    once: 0
+  };
+  for (const command of commands) if (command.phase === "answering") counts.trusted++;else if (command.phase === "learning") counts.learning++;else counts.once++;
+  return counts;
+}
+
+/** OpenCode's own "always" approvals, one group per agent and permission, the newest first. */
+
+export function alwaysGroups(state) {
+  const groups = new Map();
+  for (const always of state.always) {
+    const key = JSON.stringify([always.permission, always.agent]);
+    const found = groups.get(key);
+    if (found) {
+      for (const pattern of always.patterns) if (!found.patterns.includes(pattern)) found.patterns.push(pattern);
+      found.at = Math.max(found.at, always.at);
+      found.approvals.push(always);
+    } else groups.set(key, {
+      key,
+      permission: always.permission,
+      agent: always.agent,
+      patterns: [...always.patterns],
+      at: always.at,
+      approvals: [always]
+    });
+  }
+  return [...groups.values()].sort((a, b) => b.at - a.at);
+}

package/dist/core/view/parts.js

@@ -0,0 +1,290 @@
+/**
+ * The pieces both Trust screens are built from: an agent's chip, a tinted badge, a button, a meter,
+ * the week's sparkline, the header and the key list.
+ *
+ * Colour came back to Trust as signal (docs/building/design-system.md): green is what answers, the
+ * warning what is close or needs a look, red what is dangerous. Each piece pairs its colour with a
+ * word or a shape — a meter beside `2 of 3`, a badge that says `dangerous` — so none of it is read
+ * by colour alone.
+ */
+
+import { fitHints, GLYPH, keyName } from "@opencode-cockpit/client/design";
+import { ago, fit, spread, widthOf } from "./rows.js";
+export const muted = text => ({
+  text,
+  tone: "muted"
+});
+export const plain = text => ({
+  text,
+  tone: "text"
+});
+export const key = name => ({
+  text: `[${keyName(name)}]`,
+  tone: "accent",
+  bold: true
+});
+
+/** An agent, as a chip: its name in the info tone on a faint fill of the same. */
+export const chip = agent => ({
+  text: ` ${agent} `,
+  tone: "info",
+  fill: "chip"
+});
+
+/** A word on a tint of its tone: ` ● answering `, ` dangerous `. */
+export const badge = (text, tone) => ({
+  text: ` ${text} `,
+  tone,
+  fill: tone === "success" ? "ok" : tone === "warning" ? "warn" : "err",
+  bold: true
+});
+
+/**
+ * A button: its key, then what it does, on a raised fill — a run you can click as well as a key you
+ * can press. `on`: focused, drawn solid in the accent. `off`: nothing to act on here; dimmed rather
+ * than removed, because a button that comes and goes cannot be learned.
+ */
+export function button(name, label, state = {}) {
+  if (state.on) return [{
+    text: ` ${name} `,
+    tone: "ink",
+    fill: "buttonOn",
+    bold: true
+  }, {
+    text: `${label} `,
+    tone: "ink",
+    fill: "buttonOn"
+  }];
+  return [{
+    text: ` ${name} `,
+    tone: state.off ? "muted" : "accent",
+    fill: "button",
+    bold: !state.off
+  }, {
+    text: `${label} `,
+    tone: state.off ? "muted" : "text",
+    fill: "button",
+    ...(state.off ? {
+      faint: true
+    } : {})
+  }];
+}
+
+/** How close: one `▰` per approval that counts, `▱` for each still to go. Dangerous ones in red. */
+export function meter(have, need, danger) {
+  const filled = Math.max(0, Math.min(have, need));
+  return [...(filled > 0 ? [{
+    text: "▰".repeat(filled),
+    tone: danger ? "error" : "success"
+  }] : []), ...(need > filled ? [{
+    text: "▱".repeat(need - filled),
+    tone: "border"
+  }] : [])];
+}
+const BARS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+
+/** A day per cell, scaled to the busiest: a day with none is the empty track, in the border tone. */
+export function sparkline(counts) {
+  const most = Math.max(0, ...counts);
+  return counts.map(count => count === 0 || most === 0 ? {
+    text: BARS[0],
+    tone: "border"
+  } : {
+    text: BARS[Math.max(0, Math.ceil(count / most * BARS.length) - 1)],
+    tone: "success"
+  });
+}
+
+/** `9h`, `2d`, `now`: a time in a column of times, where `ago` on every one says nothing. */
+export const since = ms => ago(ms).replace(/ ago$/, "");
+
+/** `just now`, `15m ago`. */
+export const when = ms => {
+  const said = ago(ms);
+  return said === "now" ? "just now" : said;
+};
+export const plural = (count, one, many = `${one}s`) => `${count} ${count === 1 ? one : many}`;
+export const agentsText = agents => agents.length <= 1 ? agents[0] ?? "" : `${agents.slice(0, -1).join(", ")} and ${agents.at(-1)}`;
+const pad2 = value => String(value).padStart(2, "0");
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+/** `09:41` today; `Tue 09:41` this week; `Sep 21` before that. Local time, as a clock on the wall. */
+export function clock(at, now) {
+  const then = new Date(at);
+  const time = `${pad2(then.getHours())}:${pad2(then.getMinutes())}`;
+  const today = new Date(now);
+  if (then.toDateString() === today.toDateString()) return time;
+  if (now - at < 6 * 86_400_000) return `${WEEKDAYS[then.getDay()]} ${time}`;
+  return `${MONTHS[then.getMonth()]} ${then.getDate()}`;
+}
+
+/** `today`, `yesterday`, `on Tue`, `on Sep 21`: when, as a day. */
+export function dayWord(at, now) {
+  const then = new Date(at);
+  const today = new Date(now);
+  if (then.toDateString() === today.toDateString()) return "today";
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (then.toDateString() === yesterday.toDateString()) return "yesterday";
+  if (now - at < 6 * 86_400_000) return `on ${WEEKDAYS[then.getDay()]}`;
+  return `on ${MONTHS[then.getMonth()]} ${then.getDate()}`;
+}
+
+/* ─── the header and the footer ──────────────────────────────────────────────────────────────── */
+
+/**
+ * `Trust · project` on the left; on the right whatever the screen adds, then whether Trust is
+ * answering — the first thing to know, so it is a badge: `● answering`, or `○ paused`.
+ */
+export function headerRow(project, paused, extra, width) {
+  const state = paused ? badge(`${GLYPH.ring} paused`, "warning") : badge(`${GLYPH.dot} answering`, "success");
+  const right = [...extra, ...(extra.length > 0 ? [{
+    text: "  "
+  }] : []), state, {
+    text: " "
+  }];
+  /** Narrow, the screen's own words give way before the state does. */
+  const fits = widthOf(right.map(run => run.text).join("")) + 10 <= width;
+  return spread([{
+    text: " Trust",
+    tone: "text",
+    bold: true
+  }, ...(project ? [muted(` · ${project}`)] : [])], fits ? right : [state, {
+    text: " "
+  }], width);
+}
+
+/** The keys row: a cell of margin at each end, the way out last and never dropped. */
+export function footerRow(hints, width) {
+  const fitted = fitHints(hints, Math.max(0, width - 2));
+  return fit([{
+    text: " "
+  }, ...fitted.runs], width);
+}
+
+/* ─── the key list ───────────────────────────────────────────────────────────────────────────── */
+
+/** `runs` wrapped at spaces into rows of `width`, at most `max`; the last says `…` when cut. */
+export function wrapRuns(runs, width, max = Number.POSITIVE_INFINITY) {
+  const words = [];
+  for (const run of runs) {
+    /** A command shown as an example is not broken across rows when it fits on one. */
+    if ((run.tone === "text" || run.fill !== undefined && run.fill !== "none") && widthOf(run.text) <= width) {
+      words.push(run);
+      continue;
+    }
+    for (const part of run.text.split(/(?<= )/)) if (part !== "") words.push({
+      ...run,
+      text: part
+    });
+  }
+  const lines = [[]];
+  let used = 0;
+  for (const word of words) {
+    const w = widthOf(word.text.trimEnd());
+    if (used > 0 && used + w > width) {
+      lines.push([]);
+      used = 0;
+    }
+    ;
+    lines.at(-1).push(word);
+    used += widthOf(word.text);
+  }
+  /** A row's last space is not part of it: counted, it pushed a word that fit exactly into `…`. */
+  for (const line of lines) {
+    const last = line.at(-1);
+    if (last && !last.fill) line[line.length - 1] = {
+      ...last,
+      text: last.text.trimEnd()
+    };
+  }
+  if (lines.length <= max) return lines.map(line => fit(line, width));
+  const kept = lines.slice(0, max);
+  const rest = lines.slice(max).flat();
+  /** The overflow joins the last row, which `fit` then cuts with `…`; the space its end lost goes back. */
+  kept[max - 1] = [...kept[max - 1], {
+    text: " "
+  }, ...rest];
+  return kept.map(line => fit(line, width));
+}
+
+/** Every key a screen takes, one line each, what each does wrapped under its column rather than cut. */
+export function keyListRows(list, width) {
+  const column = Math.max(...list.map(each => widthOf(each.keys.map(name => `[${keyName(name)}]`).join(" "))));
+  const indent = 1 + column + 3;
+  return list.map(each => {
+    const keys = each.keys.flatMap((name, at) => [...(at > 0 ? [{
+      text: " "
+    }] : []), key(name)]);
+    const pad = " ".repeat(column - widthOf(keys.map(run => run.text).join("")) + 3);
+    return wrapRuns([plain(each.does)], Math.max(1, width - indent - 1)).map((row, at) => fit([{
+      text: " "
+    }, ...(at === 0 ? [...keys, {
+      text: pad
+    }] : [{
+      text: " ".repeat(indent - 1)
+    }]), ...row], width));
+  });
+}
+
+/** As many key lines as fit in `room` rows; a list cut short says how many keys are below. */
+export function keyListBody(list, width, room) {
+  const each = keyListRows(list, width);
+  const rows = [];
+  let shown = 0;
+  for (const rowsOf of each) {
+    const last = shown === each.length - 1;
+    if (rows.length + rowsOf.length > (last ? room : room - 1)) break;
+    rows.push(...rowsOf);
+    shown++;
+  }
+  if (shown < each.length) rows.push(fit([muted(` ↓ ${plural(each.length - shown, "more key")} below`)], width));
+  while (rows.length < room) rows.push(fit([], width));
+  return rows.slice(0, room);
+}
+
+/* ─── where a click lands ────────────────────────────────────────────────────────────────────── */
+
+/** Something on screen a click acts on: a row to select, or a button to press. */
+
+/** The buttons in a row of runs, by where each starts and ends. `actions`: one per button, in order. */
+export function buttonHits(row, y, actions) {
+  const hits = [];
+  let x = 0;
+  let at = -1;
+  let open;
+  for (const run of row) {
+    const w = widthOf(run.text);
+    const isButton = run.fill === "button" || run.fill === "buttonOn";
+    if (isButton && !open) {
+      open = {
+        x0: x
+      };
+      at++;
+    }
+    if (!isButton && open) {
+      const action = actions[at];
+      if (action) hits.push({
+        kind: "button",
+        y,
+        x0: open.x0,
+        x1: x,
+        action
+      });
+      open = undefined;
+    }
+    x += w;
+  }
+  if (open) {
+    const action = actions[at];
+    if (action) hits.push({
+      kind: "button",
+      y,
+      x0: open.x0,
+      x1: x,
+      action
+    });
+  }
+  return hits;
+}

package/dist/core/view/rows.js

@@ -0,0 +1,165 @@
+/**
+ * Rows of styled runs — every Trust surface, pure so a test can measure it.
+ *
+ * Tones name a meaning, never a colour; `tui/render.ts` is the only place that knows what a tone
+ * looks like, so the preview CLI and OpenCode draw the same rows (docs/building/terminal-ui.md).
+ * The helpers are Subagents' (`core/view/rows.ts`), copied rather than imported: bays never import
+ * each other.
+ */
+
+/**
+ * What sits behind a run. Two cover a whole row — the row under the cursor and the card's raised
+ * panel — and the rest a few cells: an agent's chip, a button, a focused button, and the tinted
+ * badges that say success, warning and error. A tint is the tone's colour faded into the dialog's
+ * own, so it follows the theme (`TINTS`; `tui/render.ts` mixes it).
+ */
+
+/** The fills that belong to a row rather than a run: what a row is padded with, and what a cursor replaces. */
+const ROW_FILLS = new Set(["selected", "panel"]);
+const isRowFill = fill => fill !== undefined && ROW_FILLS.has(fill);
+
+/**
+ * The tinted fills: which tone each is made of, and how much of it is mixed into the dialog's
+ * background. Little enough that the tone's own text on it stays legible; enough to be seen.
+ */
+export const TINTS = {
+  chip: {
+    tone: "info",
+    amount: 0.12
+  },
+  ok: {
+    tone: "success",
+    amount: 0.16
+  },
+  warn: {
+    tone: "warning",
+    amount: 0.16
+  },
+  err: {
+    tone: "error",
+    amount: 0.16
+  }
+};
+export const rowText = row => row.map(run => run.text).join("");
+
+/** Columns a string takes. Wide characters (CJK, most emoji) take two. */
+export function widthOf(text, limit = Number.POSITIVE_INFINITY) {
+  let width = 0;
+  for (const char of text) {
+    if (width > limit) return width;
+    const code = char.codePointAt(0) ?? 0;
+    width += code >= 0x1100 && (code <= 0x115f || code >= 0x2e80 && code <= 0xa4cf || code >= 0xac00 && code <= 0xd7a3 || code >= 0xf900 && code <= 0xfaff || code >= 0xfe30 && code <= 0xfe4f || code >= 0xff00 && code <= 0xff60 || code >= 0xffe0 && code <= 0xffe6 || code >= 0x1f300 && code <= 0x1faff || code >= 0x20000 && code <= 0x3fffd) ? 2 : 1;
+  }
+  return width;
+}
+
+/** `text` in at most `width` columns, ending in `…` when cut. */
+export function cut(text, width) {
+  if (width <= 0) return "";
+  if (widthOf(text, width) <= width) return text;
+  let out = "";
+  let used = 0;
+  for (const char of text) {
+    const w = widthOf(char);
+    if (used + w > width - 1) break;
+    out += char;
+    used += w;
+  }
+  return `${out}…`;
+}
+
+/**
+ * A row exactly `width` columns wide: runs cut where they overflow, padded in the last run's fill
+ * where they fall short. Every row every surface draws goes through here; the grid test holds it.
+ */
+export function fit(row, width) {
+  const out = [];
+  let used = 0;
+  for (const run of row) {
+    if (used >= width) break;
+    const room = width - used;
+    const w = widthOf(run.text, room);
+    if (w <= room) {
+      out.push(run);
+      used += w;
+    } else {
+      const text = cut(run.text, room);
+      out.push({
+        ...run,
+        text
+      });
+      used += widthOf(text);
+      break;
+    }
+  }
+  if (used < width) {
+    const fill = rowFillOf(out);
+    out.push({
+      text: " ".repeat(width - used),
+      ...(fill ? {
+        fill
+      } : {})
+    });
+  }
+  return out;
+}
+
+/** The fill a row is drawn on: the last row-wide fill among its runs. A chip at its end is not one. */
+export function rowFillOf(row) {
+  for (let i = row.length - 1; i >= 0; i--) {
+    const fill = row[i]?.fill;
+    if (isRowFill(fill)) return fill;
+  }
+  return undefined;
+}
+
+/** Left and right parts on one row, the right part flush against the edge; the left gives way. */
+export function spread(left, right, width) {
+  const rightWidth = widthOf(rowText(right));
+  if (rightWidth >= width) return fit(right, width);
+  const leftRoom = width - rightWidth - 1;
+  const shown = fit(left, leftRoom);
+  const fill = rowFillOf([...left, ...right]);
+  return [...shown, {
+    text: " ",
+    ...(fill ? {
+      fill
+    } : {})
+  }, ...right];
+}
+
+/**
+ * A row on one surface — the row under the cursor, the card's panel. A run with a fill of its own
+ * (a chip, a badge, a button) keeps it: the surface is what is behind them.
+ */
+export const filled = (row, fill) => row.map(run => run.fill === undefined || run.fill === "none" || isRowFill(run.fill) ? {
+  ...run,
+  fill
+} : run);
+
+/**
+ * The row under the cursor: `▌` in its first cell — the margin every row keeps for it — and the
+ * selected fill to both edges (docs/building/design-system.md: `▌` is the cursor and nothing else).
+ */
+export function cursorRow(row, width) {
+  const [first, ...rest] = row;
+  const trimmed = !first ? [] : widthOf(first.text) > 1 ? [{
+    ...first,
+    text: [...first.text].slice(1).join("")
+  }, ...rest] : rest;
+  return filled(fit([{
+    text: "▌",
+    tone: "accent"
+  }, ...trimmed], width), "selected");
+}
+
+/** How long ago, in the fewest characters that still read: `now`, `5m`, `2h`, `3d`. */
+export function ago(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  if (s < 60) return "now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 48) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}