@coldtea/abide 0.0.1

package/src/ui/components/RuleTable.tsx

@@ -0,0 +1,94 @@
+import type { Rule, RuleStatus } from "@coldtea/abide-schema";
+import { assertNever } from "@coldtea/abide-schema";
+import { Columns, type Cell, type Column, type Row } from "./Columns.js";
+import { glyph, meter, palette, scopeLabel } from "../theme.js";
+
+export type RuleStats = { checks: number; fired: number; flagged: number };
+
+const statusCell = (status: RuleStatus): Cell => {
+  switch (status) {
+    case "active":
+      return { text: `${glyph.dot} active`, color: palette.sage };
+    case "weak":
+      return { text: `${glyph.dot} weak`, color: palette.amber, bold: true };
+    case "noisy":
+      return { text: `${glyph.dot} noisy`, color: palette.rose, bold: true };
+    case "disabled":
+      return { text: `${glyph.ring} off`, color: palette.ash };
+    default:
+      return assertNever(status);
+  }
+};
+
+const checkCell = (rule: Rule): Cell => {
+  switch (rule.check.type) {
+    case "lint":
+      return { text: "linter", color: palette.sage };
+    case "model":
+      return { text: `jev ${rule.check.question.type}`, color: palette.indigo };
+    case "deferred":
+      return { text: "deferred", color: palette.ceramicWarm };
+    case "unenforceable":
+      return { text: "unenforceable", color: palette.ash };
+    default:
+      return assertNever(rule.check);
+  }
+};
+
+const whenCell = (rule: Rule): Cell => {
+  if (rule.check.type === "model")
+    return { text: rule.when ?? "", color: rule.when === "turn" ? palette.plum : palette.mist };
+  return { text: "", color: palette.ash };
+};
+
+const calibrationCell = (rule: Rule): Cell => {
+  const c = rule.calibration;
+  if (!c || c.verdict === "skipped") return { text: c ? "skipped" : "", color: palette.ash };
+  const color =
+    c.verdict === "decisive" ? palette.mist : c.verdict === "weak" ? palette.amber : palette.rose;
+  return { text: `${meter(c.median, 6)} ${c.median.toFixed(2)}`, color };
+};
+
+type RuleTableProps = {
+  rules: readonly Rule[];
+  stats?: ReadonlyMap<string, RuleStats>;
+  /** Only rules abide checks: the model ones. */
+  runnableOnly?: boolean;
+};
+
+export function RuleTable({ rules, stats, runnableOnly = false }: RuleTableProps) {
+  const shown = runnableOnly ? rules.filter((r) => r.check.type === "model") : rules;
+  const columns: Column[] = [
+    { key: "id", label: "rule", width: 30 },
+    { key: "check", label: "check", width: 12 },
+    { key: "when", label: "when", width: 4 },
+    { key: "status", label: "status", width: 9 },
+    ...(stats
+      ? [{ key: "fired", label: "fired / checks", width: 14, align: "right" as const }]
+      : []),
+    { key: "cal", label: "calibration", width: 12 },
+    { key: "scope", label: "scope" },
+  ];
+  const rows: Row[] = shown.map((rule) => {
+    const s = stats?.get(rule.id);
+    return {
+      id: {
+        text: rule.id,
+        color: rule.status === "active" ? palette.cloud : palette.mist,
+        bold: rule.status === "active",
+      },
+      check: checkCell(rule),
+      when: whenCell(rule),
+      status: statusCell(rule.status),
+      fired: s
+        ? {
+            text: `${s.fired} / ${s.checks}`,
+            color: s.fired > 0 ? palette.rose : s.checks > 0 ? palette.mist : palette.ash,
+          }
+        : { text: "", color: palette.ash },
+      cal: calibrationCell(rule),
+      scope: { text: scopeLabel(rule.scope), color: rule.scope ? palette.mist : palette.ash },
+    };
+  });
+  return <Columns columns={columns} rows={rows} indent={2} />;
+}

package/src/ui/components/Section.tsx

@@ -0,0 +1,24 @@
+import { Box, Text } from "ink";
+import type { ReactNode } from "react";
+import { glyph, palette } from "../theme.js";
+
+type SectionProps = { title: string; children: ReactNode; aside?: string };
+
+/** A titled block with a thin teal rule down its left, so a long report scans in pieces. */
+export function Section({ title, aside, children }: SectionProps) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color={palette.teal}>{glyph.bar}</Text>
+        <Text color={palette.cloud} bold>
+          {" "}
+          {title}
+        </Text>
+        {aside ? <Text color={palette.mist}> {aside}</Text> : null}
+      </Box>
+      <Box flexDirection="column" paddingLeft={2}>
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/components/Verdicts.tsx

@@ -0,0 +1,40 @@
+import { Box, Text } from "ink";
+import type { Verdict } from "@coldtea/abide-schema";
+import { glyph, meter, palette } from "../theme.js";
+
+const bandColor = (band: Verdict["band"]): string =>
+  band === "act" ? palette.rose : band === "flag" ? palette.amber : palette.mist;
+
+type VerdictsProps = { verdicts: readonly Verdict[]; all?: boolean };
+
+/** Verdicts as meters, loudest first. Clear ones fold into one quiet line unless asked for. */
+export function Verdicts({ verdicts, all = false }: VerdictsProps) {
+  const sorted = [...verdicts].sort((a, b) => b.probability - a.probability);
+  const shown = all ? sorted : sorted.filter((v) => v.band !== "clear");
+  const hidden = sorted.length - shown.length;
+  return (
+    <Box flexDirection="column">
+      {shown.map((v) => (
+        <Box key={v.ruleId}>
+          <Text color={bandColor(v.band)}>{meter(v.probability)}</Text>
+          <Text color={bandColor(v.band)} bold={v.band === "act"}>
+            {" "}
+            {v.probability.toFixed(2)}
+          </Text>
+          <Text color={v.band === "clear" ? palette.mist : palette.cloud} bold={v.band === "act"}>
+            {"  "}
+            {v.ruleId}
+          </Text>
+          {v.answer ? <Text color={palette.ash}> {v.answer}</Text> : null}
+        </Box>
+      ))}
+      {hidden > 0 ? (
+        <Text color={palette.ash}>
+          {glyph.check} {hidden} {hidden === 1 ? "rule" : "rules"} clear
+        </Text>
+      ) : shown.length === 0 ? (
+        <Text color={palette.sage}>{glyph.check} nothing to report</Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/render.tsx

@@ -0,0 +1,51 @@
+import { render } from "ink";
+import type { ReactElement, ReactNode } from "react";
+import { Live, type Progress } from "./components/Live.js";
+import { ErrorView } from "./views/ErrorView.js";
+
+/**
+ * Draws a finished view once and leaves. Ink prints the final frame on a pipe
+ * too, so `abide report | less` still reads well. Nothing in the hooks goes
+ * through here: their stdout belongs to the host.
+ */
+export const showStatic = async (element: ReactElement): Promise<void> => {
+  const instance = render(element, { patchConsole: false, exitOnCtrlC: true });
+  instance.unmount();
+  await instance.waitUntilExit();
+};
+
+type LiveJob<T> = {
+  header: ReactNode;
+  run: (progress: Progress) => Promise<T>;
+  done: (result: T) => ReactNode;
+  /** Exit code once the result is drawn. */
+  code?: (result: T) => number;
+};
+
+/** Runs a job under a spinner, draws its result, and resolves to the exit code. */
+export const showLive = async <T,>(job: LiveJob<T>): Promise<number> => {
+  const outcome: { code: number; result?: { value: T } } = { code: 0 };
+  const instance = render(
+    <Live<T>
+      header={job.header}
+      run={job.run}
+      done={(result) => {
+        outcome.result = { value: result };
+        return job.done(result);
+      }}
+      failed={(error) => <ErrorView error={error} />}
+      onExit={(exitCode) => {
+        outcome.code = exitCode;
+      }}
+      animate={Boolean(process.stdout.isTTY)}
+    />,
+    { patchConsole: false, exitOnCtrlC: true },
+  );
+  await instance.waitUntilExit();
+  if (outcome.result !== undefined && job.code) return job.code(outcome.result.value);
+  return outcome.code;
+};
+
+export const showError = async (error: unknown): Promise<void> => {
+  await showStatic(<ErrorView error={error} />);
+};

package/src/ui/theme.ts

@@ -0,0 +1,65 @@
+/** Coldtea's palette, as a terminal can show it. Truecolor where available; chalk degrades the rest. */
+export const palette = {
+  teal: "#3da5a8",
+  tealLight: "#58c4c8",
+  sage: "#5cbd68",
+  ceramic: "#d8c4a0",
+  ceramicWarm: "#c4a46e",
+  amber: "#d49a50",
+  amberBright: "#e0ac62",
+  rose: "#c9627d",
+  plum: "#a468c2",
+  indigo: "#6876d8",
+  copper: "#b97b47",
+  mist: "#8d96a3",
+  ash: "#5a6370",
+  cloud: "#cdd3dc",
+  paper: "#f0ece6",
+} as const;
+
+export type Tone = "accent" | "ok" | "warn" | "bad" | "info" | "muted" | "text" | "highlight";
+
+export const toneColor: Record<Tone, string> = {
+  accent: palette.teal,
+  ok: palette.sage,
+  warn: palette.amber,
+  bad: palette.rose,
+  info: palette.indigo,
+  muted: palette.mist,
+  text: palette.cloud,
+  highlight: palette.ceramic,
+};
+
+export const glyph = {
+  dot: "●",
+  ring: "○",
+  check: "✓",
+  cross: "✗",
+  arrow: "→",
+  bar: "▎",
+  dotSep: "·",
+  ellipsis: "…",
+} as const;
+
+/** Cuts a string to fit, keeping the tail readable when the head is the boring part. */
+export const truncate = (value: string, max: number, keep: "head" | "tail" = "head"): string => {
+  if (max <= 1) return value.slice(0, Math.max(0, max));
+  if (value.length <= max) return value;
+  return keep === "head"
+    ? `${value.slice(0, max - 1)}${glyph.ellipsis}`
+    : `${glyph.ellipsis}${value.slice(value.length - max + 1)}`;
+};
+
+/** A probability as a small bar: filled tenths, in the band's colour. */
+export const meter = (probability: number, width = 10): string => {
+  const filled = Math.round(Math.min(1, Math.max(0, probability)) * width);
+  return `${"█".repeat(filled)}${"░".repeat(width - filled)}`;
+};
+
+/** Globs as a person reads them: a list of whole-tree extension globs becomes `ts, tsx`; anything else stays a glob. */
+export const scopeLabel = (scope: readonly string[] | undefined): string => {
+  if (scope === undefined) return "everywhere";
+  const extensions = scope.map((g) => /^\*\*\/\*\.([A-Za-z0-9]+)$/.exec(g)?.[1]);
+  if (extensions.every((e): e is string => e !== undefined)) return extensions.join(", ");
+  return scope.join(", ");
+};

package/src/ui/views/AuditView.tsx

@@ -0,0 +1,140 @@
+import { Box, Text } from "ink";
+import type { Verdict } from "@coldtea/abide-schema";
+import type { AuditFileResult, RuleTally } from "../../lib/audit.js";
+import { ms, usd } from "../../lib/ui.js";
+import { Callout } from "../components/Callout.js";
+import { Columns } from "../components/Columns.js";
+import { Header } from "../components/Header.js";
+import { Section } from "../components/Section.js";
+import { glyph, meter, palette } from "../theme.js";
+
+export type AuditData = {
+  root: string;
+  files: number;
+  skipped: { tooBig: string[]; outOfScope: number };
+  results: AuditFileResult[];
+  tallies: RuleTally[];
+  spendUsd: number;
+  elapsedMs: number;
+  all: boolean;
+};
+
+const worst = (r: AuditFileResult): Verdict | undefined =>
+  [...r.verdicts].sort((a, b) => b.probability - a.probability)[0];
+
+export function AuditView({ data }: { data: AuditData }) {
+  const broken = data.results.filter((r) => r.verdicts.some((v) => v.band === "act"));
+  const flaggedOnly = data.results.filter(
+    (r) => !r.verdicts.some((v) => v.band === "act") && r.verdicts.some((v) => v.band === "flag"),
+  );
+  const failed = data.results.filter((r) => r.error !== undefined);
+  const rows = data.tallies.filter((t) => data.all || t.broken.length + t.flagged.length > 0);
+  const fileRows = [...broken, ...(data.all ? flaggedOnly : [])].sort(
+    (a, b) => (worst(b)?.probability ?? 0) - (worst(a)?.probability ?? 0),
+  );
+  return (
+    <Box flexDirection="column">
+      <Header
+        command="audit"
+        where={data.root}
+        note={`${data.files} files judged ${glyph.dotSep} ${ms(data.elapsedMs)} ${glyph.dotSep} about ${usd(data.spendUsd)}`}
+      />
+      <Section
+        title="By rule"
+        aside={
+          rows.length === 0
+            ? "nothing broken"
+            : `${rows.length} ${rows.length === 1 ? "rule" : "rules"} with something to look at`
+        }
+      >
+        {rows.length === 0 ? (
+          <Text color={palette.sage}>{glyph.check} No file breaks a rule above the act line.</Text>
+        ) : (
+          <Columns
+            indent={2}
+            columns={[
+              { key: "rule", label: "rule", width: 34 },
+              { key: "broken", label: "broken", width: 7, align: "right" },
+              { key: "flagged", label: "uncertain", width: 9, align: "right" },
+              { key: "checked", label: "of", width: 5, align: "right" },
+              { key: "example", label: "for example", keep: "tail" },
+            ]}
+            rows={rows.map((t) => ({
+              rule: {
+                text: t.ruleId,
+                color: t.broken.length > 0 ? palette.cloud : palette.mist,
+                bold: t.broken.length > 0,
+              },
+              broken: {
+                text: String(t.broken.length),
+                color: t.broken.length > 0 ? palette.rose : palette.ash,
+                bold: t.broken.length > 0,
+              },
+              flagged: {
+                text: String(t.flagged.length),
+                color: t.flagged.length > 0 ? palette.amber : palette.ash,
+              },
+              checked: { text: String(t.checked), color: palette.ash },
+              example: { text: t.broken[0] ?? t.flagged[0] ?? "", color: palette.mist },
+            }))}
+          />
+        )}
+      </Section>
+      {fileRows.length > 0 ? (
+        <Section
+          title="By file"
+          aside={`${broken.length} ${broken.length === 1 ? "file breaks" : "files break"} a rule ${glyph.dotSep} ${flaggedOnly.length} uncertain only`}
+        >
+          {fileRows.slice(0, data.all ? fileRows.length : 40).map((r) => {
+            const top = worst(r);
+            const acts = r.verdicts.filter((v) => v.band === "act").map((v) => v.ruleId);
+            const flags = r.verdicts.filter((v) => v.band === "flag").map((v) => v.ruleId);
+            return (
+              <Box key={r.file} flexDirection="column">
+                <Box>
+                  <Text color={acts.length ? palette.rose : palette.amber}>
+                    {meter(top?.probability ?? 0, 6)}
+                  </Text>
+                  <Text color={palette.cloud} bold={acts.length > 0}>
+                    {"  "}
+                    {r.file}
+                  </Text>
+                </Box>
+                <Box paddingLeft={8}>
+                  <Text color={palette.ash} wrap="truncate-end">
+                    {acts.length ? acts.join(", ") : ""}
+                    {acts.length && flags.length ? "  " : ""}
+                    {flags.length ? `uncertain: ${flags.join(", ")}` : ""}
+                  </Text>
+                </Box>
+              </Box>
+            );
+          })}
+          {!data.all && fileRows.length > 40 ? (
+            <Text color={palette.ash}>{fileRows.length - 40} more. Pass --all to list them.</Text>
+          ) : null}
+        </Section>
+      ) : null}
+      {failed.length > 0 ? (
+        <Callout
+          tone="warn"
+          title={`${failed.length} ${failed.length === 1 ? "file was" : "files were"} judged only in part, or not at all`}
+        >
+          {failed.slice(0, 5).map((r) => (
+            <Text key={r.file} color={palette.mist}>
+              {r.file} <Text color={palette.ash}>{r.error}</Text>
+            </Text>
+          ))}
+        </Callout>
+      ) : null}
+      {data.skipped.tooBig.length + data.skipped.outOfScope > 0 ? (
+        <Text color={palette.ash}>
+          Skipped {data.skipped.outOfScope} {data.skipped.outOfScope === 1 ? "file" : "files"} no
+          rule applies to
+          {data.skipped.tooBig.length ? ` and ${data.skipped.tooBig.length} too big to send` : ""}.
+          Turn-phase rules do not apply to an audit.
+        </Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/views/BenchView.tsx

@@ -0,0 +1,87 @@
+import { Box, Text } from "ink";
+import { Columns } from "../components/Columns.js";
+import { Header } from "../components/Header.js";
+import { Section } from "../components/Section.js";
+import { ms, usd } from "../../lib/ui.js";
+import { glyph, palette } from "../theme.js";
+
+export type BenchRow = { what: string; median: number; p90: number };
+export type BenchData = {
+  root: string;
+  runs: number;
+  activeModelRules: number;
+  rows: BenchRow[];
+  tokens: { small: number; large: number };
+  cost: { small: number; large: number };
+  perTurn: { latencyMs: number; costUsd: number };
+  sessions: {
+    count: number;
+    medianChecks: number;
+    medianLatencyMs: number;
+    medianCostUsd: number;
+  } | null;
+};
+
+export function BenchView({ data }: { data: BenchData }) {
+  return (
+    <Box flexDirection="column">
+      <Header
+        command="bench"
+        where={data.root}
+        note={`${data.activeModelRules} active model rules ${glyph.dotSep} ${data.runs} runs each`}
+      />
+      <Section title="Latency">
+        <Columns
+          indent={2}
+          columns={[
+            { key: "what", label: "" },
+            { key: "median", label: "median", width: 8, align: "right" },
+            { key: "p90", label: "p90", width: 8, align: "right" },
+          ]}
+          rows={data.rows.map((r) => ({
+            what: { text: r.what, color: palette.cloud },
+            median: { text: ms(r.median), color: palette.ceramic, bold: true },
+            p90: { text: ms(r.p90), color: palette.mist },
+          }))}
+        />
+      </Section>
+      <Section title="Spend">
+        <Text color={palette.cloud}>
+          input tokens per edit <Text color={palette.ceramic}>{data.tokens.small}</Text> small{" "}
+          <Text color={palette.ash}>{glyph.dotSep}</Text>{" "}
+          <Text color={palette.ceramic}>{data.tokens.large}</Text> large
+        </Text>
+        <Text color={palette.cloud}>
+          per edit <Text color={palette.ceramic}>{usd(data.cost.small)}</Text> small{" "}
+          <Text color={palette.ash}>{glyph.dotSep}</Text>{" "}
+          <Text color={palette.ceramic}>{usd(data.cost.large)}</Text> large
+        </Text>
+        <Box marginTop={1}>
+          <Text color={palette.cloud}>
+            A 15 edit turn here: about{" "}
+            <Text color={palette.ceramic}>{ms(data.perTurn.latencyMs)}</Text> of waiting and{" "}
+            <Text color={palette.ceramic}>{usd(data.perTurn.costUsd)}</Text>, before repairs.
+          </Text>
+        </Box>
+      </Section>
+      <Section
+        title="Real sessions"
+        aside={data.sessions ? `${data.sessions.count} recorded` : "none yet"}
+      >
+        {data.sessions ? (
+          <Text color={palette.cloud}>
+            median per session <Text color={palette.ceramic}>{data.sessions.medianChecks}</Text>{" "}
+            checks <Text color={palette.ash}>{glyph.dotSep}</Text>{" "}
+            <Text color={palette.ceramic}>{ms(data.sessions.medianLatencyMs)}</Text> of hook time{" "}
+            <Text color={palette.ash}>{glyph.dotSep}</Text>{" "}
+            <Text color={palette.ceramic}>{usd(data.sessions.medianCostUsd)}</Text>
+          </Text>
+        ) : (
+          <Text color={palette.ash}>
+            The figures above are measured; per-session numbers appear once the hooks have run here.
+          </Text>
+        )}
+      </Section>
+    </Box>
+  );
+}

package/src/ui/views/CalibrateView.tsx

@@ -0,0 +1,108 @@
+import { Box, Text } from "ink";
+import type { CalibrationVerdict } from "@coldtea/abide-schema";
+import { Callout } from "../components/Callout.js";
+import { Columns } from "../components/Columns.js";
+import { Header } from "../components/Header.js";
+import { Section } from "../components/Section.js";
+import { usd } from "../../lib/ui.js";
+import { glyph, meter, palette } from "../theme.js";
+
+export type CalibrateRow = {
+  id: string;
+  when: string;
+  states: number;
+  median: number;
+  min: number;
+  max: number;
+  fired: number;
+  verdict: CalibrationVerdict;
+};
+export type CalibrateData = {
+  root: string;
+  file: string;
+  hunks: number;
+  commits: number;
+  calls: number;
+  spendUsd: number;
+  rows: CalibrateRow[];
+  weak: string[];
+  noisy: string[];
+};
+
+const verdictColor = (v: CalibrationVerdict): string =>
+  v === "decisive"
+    ? palette.sage
+    : v === "weak"
+      ? palette.amber
+      : v === "noisy"
+        ? palette.rose
+        : palette.ash;
+
+export function CalibrateView({ data }: { data: CalibrateData }) {
+  return (
+    <Box flexDirection="column">
+      <Header
+        command="calibrate"
+        where={data.root}
+        note={`${data.rows.length} rules ${glyph.dotSep} ${data.hunks} hunks and ${data.commits} commits from git history`}
+      />
+      <Section
+        title="Rules"
+        aside={`${data.calls} calls ${glyph.dotSep} about ${usd(data.spendUsd)}`}
+      >
+        <Columns
+          indent={2}
+          columns={[
+            { key: "id", label: "rule", width: 34 },
+            { key: "when", label: "when", width: 4 },
+            { key: "states", label: "states", width: 6, align: "right" },
+            { key: "median", label: "median", width: 12 },
+            { key: "range", label: "min  max", width: 11 },
+            { key: "fired", label: "fired", width: 5, align: "right" },
+            { key: "verdict", label: "verdict" },
+          ]}
+          rows={data.rows.map((r) => ({
+            id: { text: r.id, color: palette.cloud },
+            when: { text: r.when, color: r.when === "turn" ? palette.plum : palette.mist },
+            states: { text: String(r.states), color: palette.mist },
+            median: {
+              text: `${meter(r.median, 6)} ${r.median.toFixed(2)}`,
+              color: verdictColor(r.verdict),
+            },
+            range: { text: `${r.min.toFixed(2)} ${r.max.toFixed(2)}`, color: palette.ash },
+            fired: { text: String(r.fired), color: r.fired > 0 ? palette.rose : palette.ash },
+            verdict: {
+              text: r.verdict,
+              color: verdictColor(r.verdict),
+              bold: r.verdict !== "decisive" && r.verdict !== "skipped",
+            },
+          }))}
+        />
+      </Section>
+      {data.weak.length > 0 ? (
+        <Callout
+          tone="warn"
+          title={`${data.weak.length} ${data.weak.length === 1 ? "rule" : "rules"} never answered near 0 or near 1 and will not run`}
+        >
+          <Text color={palette.cloud}>{data.weak.join(", ")}</Text>
+          <Text color={palette.mist}>Likely badly worded. Run abide tune to rewrite them.</Text>
+        </Callout>
+      ) : null}
+      {data.noisy.length > 0 ? (
+        <Callout
+          tone="bad"
+          title={`${data.noisy.length} ${data.noisy.length === 1 ? "rule fired" : "rules fired"} on most historic hunks and will not run`}
+        >
+          <Text color={palette.cloud}>{data.noisy.join(", ")}</Text>
+          <Text color={palette.mist}>Too broad. Narrow the scope or the wording.</Text>
+        </Callout>
+      ) : null}
+      {data.weak.length + data.noisy.length === 0 ? (
+        <Text color={palette.sage}>
+          {glyph.check} Every rule is decisive on this repository's history.
+        </Text>
+      ) : null}
+      <Text color={palette.ash}>wrote {data.file}</Text>
+    </Box>
+  );
+}

package/src/ui/views/CheckView.tsx

@@ -0,0 +1,56 @@
+import { Box, Text } from "ink";
+import type { Verdict } from "@coldtea/abide-schema";
+import { Header } from "../components/Header.js";
+import { Section } from "../components/Section.js";
+import { Verdicts } from "../components/Verdicts.js";
+import { ms, usd } from "../../lib/ui.js";
+import { glyph, palette } from "../theme.js";
+
+export type CheckSection = {
+  phase: "edit" | "turn";
+  files: string[];
+  modelRules: number;
+  calls: number;
+  latencyMs: number;
+  verdicts: Verdict[];
+};
+
+export type CheckData = { root: string; sections: CheckSection[]; spendUsd: number; all: boolean };
+
+export function CheckView({ data }: { data: CheckData }) {
+  const acts = data.sections.flatMap((s) => s.verdicts).filter((v) => v.band === "act").length;
+  const flags = data.sections.flatMap((s) => s.verdicts).filter((v) => v.band === "flag").length;
+  return (
+    <Box flexDirection="column">
+      <Header command="check" where={data.root} />
+      {data.sections.map((s, i) => (
+        <Section
+          key={i}
+          title={
+            s.phase === "edit"
+              ? (s.files[0] ?? "")
+              : `turn ${glyph.dotSep} ${s.files.length} ${s.files.length === 1 ? "file" : "files"}`
+          }
+          aside={`${s.modelRules} rules ${glyph.dotSep} ${s.calls} ${s.calls === 1 ? "call" : "calls"} ${glyph.dotSep} ${ms(s.latencyMs)}`}
+        >
+          <Verdicts verdicts={s.verdicts} all={data.all} />
+        </Section>
+      ))}
+      <Box>
+        <Text color={acts > 0 ? palette.rose : palette.sage} bold>
+          {acts > 0 ? `${glyph.cross} ${acts} to repair` : `${glyph.check} nothing to repair`}
+        </Text>
+        {flags > 0 ? (
+          <Text color={palette.amber}>
+            {" "}
+            {glyph.dot} {flags} uncertain
+          </Text>
+        ) : null}
+        <Text color={palette.ash}>
+          {" "}
+          {glyph.dotSep} about {usd(data.spendUsd)}
+        </Text>
+      </Box>
+    </Box>
+  );
+}