@jeffreyjyz/mpc 0.0.0-stage → 0.1.0

package/src/view/columns/meta.ts

@@ -0,0 +1,41 @@
+import { SGR } from "~/constants/view.ts";
+import type { Column } from "~/view/schema.ts";
+import * as f from "~/view/text/index.ts";
+
+export const META_COLUMNS: Record<string, Column> = {
+	model: { header: "MODEL", value: (r) => r.name, style: () => SGR.bold },
+	win: { header: "WIN", value: f.winner, style: f.winnerStyle },
+	cost: {
+		header: "COST",
+		value: f.bestCost,
+		right: true,
+		style: f.costStyle,
+	},
+	ability: {
+		header: "ability",
+		value: f.fmtAbility,
+		right: true,
+		style: f.abilityStyle,
+	},
+	tps: {
+		header: "tps",
+		value: f.fmtTps,
+		right: true,
+		style: (r) => f.enabledStyle(r.oc?.tps ?? r.cc?.tps ?? null),
+		drop: 4,
+	},
+	deal: {
+		header: "DEAL",
+		// The badge alone: the expiry line would blow the column out, and it
+		// rides along in --json for the sidebar, which has room for it.
+		value: (r) => r.cc?.deal?.badge ?? "—",
+		style: (r) => (r.cc?.deal ? SGR.green : SGR.dim),
+		drop: 3,
+	},
+	val: {
+		header: "VAL",
+		value: f.bestValue,
+		right: true,
+		style: f.valueStyle,
+	},
+};

package/src/view/columns/oc.ts

@@ -0,0 +1,50 @@
+import type { Column } from "~/view/schema.ts";
+import * as f from "~/view/text/index.ts";
+
+export const OC_COLUMNS: Record<string, Column> = {
+	"oc-rates": {
+		header: "rates",
+		value: f.ocRates,
+		style: f.tintOrFree("oc-go"),
+		drop: 1,
+	},
+	"oc-allow": {
+		header: "allow",
+		value: (r) => f.fmtAllowance(r.oc),
+		right: true,
+		style: f.tintOrFree("oc-go"),
+	},
+	"oc-req5h": {
+		header: "5h",
+		drop: 3,
+		value: (r) => f.fmtRequests(r.oc?.requestsPerFiveHour, Boolean(r.oc)),
+		right: true,
+		style: f.tint("oc-go"),
+	},
+	"oc-reqwk": {
+		header: "wk",
+		drop: 3,
+		value: (r) => f.fmtRequests(r.oc?.requestsPerWeek, Boolean(r.oc)),
+		right: true,
+		style: f.tint("oc-go"),
+	},
+	"oc-reqmo": {
+		header: "mo",
+		value: (r) => f.fmtRequests(r.oc?.requestsPerMonth, Boolean(r.oc)),
+		right: true,
+		style: f.tint("oc-go"),
+	},
+	"oc-per1k": {
+		header: "$/1K",
+		value: (r) => f.fmtPerThousand(r.oc),
+		right: true,
+		style: f.sideStyle("oc"),
+	},
+	"oc-reqdollar": {
+		header: "req/$",
+		value: (r) => f.fmtPerDollar(r.oc),
+		right: true,
+		style: f.sideStyle("oc"),
+		drop: 2,
+	},
+};

package/src/view/footer.ts

@@ -0,0 +1,124 @@
+import { LEGEND, PROVIDER_COLOR, SGR } from "~/constants/view.ts";
+import type { CompareRow, PlanInfo, Workload } from "~/types.ts";
+import { tally } from "./layout/segments.ts";
+import type { ReportMeta } from "./schema.ts";
+import {
+	paint,
+	planTitle,
+	providerName,
+	shortProviderName,
+} from "./text/index.ts";
+
+/** One side's per-request token vector; fields with no measured signal stay out. */
+function shapeText(workload: Workload): string {
+	const parts = [
+		`${workload.input.toLocaleString("en-US")} input`,
+		`${workload.cacheRead.toLocaleString("en-US")} cache-read`,
+		`${workload.output.toLocaleString("en-US")} output`,
+	];
+	if (workload.reasoning > 0) {
+		parts.push(`${workload.reasoning.toLocaleString("en-US")} reasoning`);
+	}
+	if (workload.cacheWrite > 0) {
+		parts.push(
+			`${workload.cacheWrite.toLocaleString("en-US")} cache-write`,
+		);
+	}
+	return parts.join(" · ");
+}
+
+function planBlock(plan: PlanInfo): { title: string; rest: string } {
+	if (plan.provider === "oc-go") {
+		// Per-model limits, no shared pool, so the sum is only an upper bound.
+		return {
+			title: planTitle(plan),
+			rest: `$${plan.price}/mo · per-model limits (sum $${plan.credits})`,
+		};
+	}
+	const window =
+		plan.fiveHour !== null && plan.weekly !== null
+			? ` · 5h $${plan.fiveHour} / wk $${plan.weekly}`
+			: "";
+	return {
+		title: planTitle(plan),
+		rest: `$${plan.price}/mo · $${plan.credits} credits${window}`,
+	};
+}
+
+function windowPercents(plan: PlanInfo, override?: [number, number]): string {
+	if (override) {
+		return `${Math.round(override[0] * 100)}% / ${Math.round(override[1] * 100)}%`;
+	}
+	if (plan.provider === "oc-go") return "20% / 50%";
+	if (plan.fiveHour !== null && plan.weekly !== null && plan.credits > 0) {
+		return `${Math.round((plan.fiveHour / plan.credits) * 100)}% / ${Math.round(
+			(plan.weekly / plan.credits) * 100,
+		)}%`;
+	}
+	return "—";
+}
+
+export function footer(rows: CompareRow[], meta: ReportMeta): void {
+	// A key/value list: labels bold, values plain. It used to be SGR 2 end to
+	// end, which made every label as faint as its value and read as one grey
+	// block (the shape decision among it).
+	const label = (text: string): string => paint(SGR.bold, text.padEnd(10));
+	const line = (key: string, text: string): void =>
+		console.log(`${label(key)}${text}`);
+	const plans = [meta.ocPlan, meta.ccPlan].map(planBlock);
+	const planWidth = Math.max(...plans.map((p) => p.title.length));
+	const [ocBlock, ccBlock] = plans;
+
+	// A measured shape is one profile for both plans, so this reads as a single
+	// line; a second is printed only if the two sides ever diverge.
+	const ocWorkload = meta.workloads["oc-go"];
+	const ccWorkload = meta.workloads.cc;
+	const perSide = JSON.stringify(ocWorkload) !== JSON.stringify(ccWorkload);
+	line(
+		"workload",
+		`${perSide ? `${shortProviderName("oc-go")} ` : ""}${shapeText(ocWorkload)} tokens per request`,
+	);
+	if (perSide) {
+		line(
+			"",
+			`${shortProviderName("cc")} ${shapeText(ccWorkload)} tokens per request`,
+		);
+	}
+	if (meta.shapeNote) line("shape", meta.shapeNote);
+
+	console.log(
+		`${label("plans")}${paint(PROVIDER_COLOR["oc-go"], (ocBlock?.title ?? "").padEnd(planWidth))}  ${ocBlock?.rest ?? ""}`,
+	);
+	console.log(
+		`${label("")}${paint(PROVIDER_COLOR.cc, (ccBlock?.title ?? "").padEnd(planWidth))}  ${ccBlock?.rest ?? ""}`,
+	);
+	line(
+		"windows",
+		`rolling caps as % of monthly allowance: ${planTitle(meta.ocPlan)} ${windowPercents(meta.ocPlan, meta.window)} · ${planTitle(meta.ccPlan)} ${windowPercents(meta.ccPlan, meta.window)}`,
+	);
+	if (meta.abilityLabel) {
+		line(
+			"ability",
+			`${meta.abilityLabel}${meta.abilityNote ? ` · ${meta.abilityNote}` : ""}`,
+		);
+	}
+
+	const t = tally(rows);
+	const parts = [
+		`${providerName("oc-go")} ${t.ocWins}`,
+		`${providerName("cc")} ${t.ccWins}`,
+	];
+	if (t.ties > 0) parts.push(`tie ${t.ties}`);
+	line("wins", `head-to-head ${t.headToHead} shared: ${parts.join(" · ")}`);
+	line(
+		"",
+		`exclusive: ${providerName("oc-go")} ${t.ocOnly} · ${providerName("cc")} ${t.ccOnly}`,
+	);
+
+	LEGEND.forEach(([key, text], i) => {
+		line(
+			i === 0 ? "legend" : "",
+			`${paint(SGR.bold, (key ?? "").padEnd(9))}${text}`,
+		);
+	});
+}

package/src/view/layout/fit.ts

@@ -0,0 +1,58 @@
+import { BAR } from "~/constants/view.ts";
+import type { Column, FitResult, Row } from "~/view/schema.ts";
+import { columns } from "~/view/schema.ts";
+import { buildSegments } from "./segments.ts";
+
+function measure(
+	rows: Row[],
+	ids: string[],
+): { cols: Column[]; widths: number[] } {
+	const cols = columns(ids);
+	const widths = cols.map((c) => c.header.length);
+	for (const row of rows) {
+		cols.forEach((c, i) => {
+			const len = c.value(row).length;
+			if (len > (widths[i] ?? 0)) widths[i] = len;
+		});
+	}
+	return { cols, widths };
+}
+
+/** Printed width of the whole table, in characters (ANSI colour not counted). */
+export function tableWidth(rows: Row[], ids: string[]): number {
+	const { cols, widths } = measure(rows, ids);
+	const segs = buildSegments(ids, cols, widths);
+	if (segs.length === 0) return 0;
+	return (
+		segs.reduce((sum, seg) => sum + seg.width, 0) +
+		BAR.length * (segs.length - 1)
+	);
+}
+
+/**
+ * Drop optional columns, widest-first, until the table fits `limit`. Columns
+ * with the same `drop` value are removed together, so both providers stay
+ * symmetric.
+ */
+export function fitColumns(
+	rows: Row[],
+	ids: string[],
+	limit: number,
+): FitResult {
+	let current = [...ids];
+	const dropped: string[] = [];
+	while (limit > 0 && tableWidth(rows, current) > limit) {
+		const levels = current
+			.map((id) => columns([id])[0]?.drop)
+			.filter((drop): drop is number => drop !== undefined);
+		if (levels.length === 0) break;
+		const lowest = Math.min(...levels);
+		const remove = new Set(
+			current.filter((id) => columns([id])[0]?.drop === lowest),
+		);
+		if (remove.size === 0) break;
+		current = current.filter((id) => !remove.has(id));
+		dropped.push(...remove);
+	}
+	return { ids: current, dropped, width: tableWidth(rows, current) };
+}

package/src/view/layout/segments.ts

@@ -0,0 +1,98 @@
+import { GAP } from "~/constants/view.ts";
+import type { Column, GroupKey, Segment } from "~/view/schema.ts";
+import { paint } from "~/view/text/index.ts";
+
+function groupOf(id: string): GroupKey {
+	if (id === "model") return "model";
+	if (id.startsWith("oc-")) return "oc";
+	if (id.startsWith("cc-")) return "cc";
+	return "misc";
+}
+
+export function buildSegments(
+	ids: string[],
+	cols: Column[],
+	widths: number[],
+): Segment[] {
+	const segs: Segment[] = [];
+	ids.forEach((id, i) => {
+		const column = cols[i];
+		if (!column) return;
+		const key = groupOf(id);
+		const last = segs[segs.length - 1];
+		if (!last || last.key !== key) {
+			segs.push({
+				key,
+				columns: [column],
+				widths: [widths[i] ?? 0],
+				width: 0,
+			});
+		} else {
+			last.columns.push(column);
+			last.widths.push(widths[i] ?? 0);
+		}
+	});
+	for (const seg of segs) {
+		seg.width =
+			seg.widths.reduce((a, b) => a + b, 0) +
+			GAP.length * (seg.widths.length - 1);
+	}
+	return segs;
+}
+
+function cellText(
+	col: Column,
+	text: string,
+	width: number,
+	alignRight: boolean,
+): string {
+	if (col.pad === false) return text;
+	return alignRight && col.right ? text.padStart(width) : text.padEnd(width);
+}
+
+export function renderSegment(
+	seg: Segment,
+	cells: string[],
+	alignRight: boolean,
+	styles?: (string | undefined)[],
+): string {
+	return seg.columns
+		.map((col, i) => {
+			const text = cellText(
+				col,
+				cells[i] ?? "",
+				seg.widths[i] ?? 0,
+				alignRight,
+			);
+			const code = styles?.[i];
+			return code ? paint(code, text) : text;
+		})
+		.join(GAP);
+}
+
+import type { Row, Tally } from "~/view/schema.ts";
+
+export function tally(rows: Row[]): Tally {
+	const result: Tally = {
+		headToHead: 0,
+		ocWins: 0,
+		ccWins: 0,
+		ties: 0,
+		ocOnly: 0,
+		ccOnly: 0,
+	};
+	for (const row of rows) {
+		if (row.oc && row.cc) {
+			result.headToHead++;
+			if (row.oc.payPerRequest === row.cc.payPerRequest) result.ties++;
+			else if (row.oc.payPerRequest < row.cc.payPerRequest)
+				result.ocWins++;
+			else result.ccWins++;
+		} else if (row.oc) {
+			result.ocOnly++;
+		} else if (row.cc) {
+			result.ccOnly++;
+		}
+	}
+	return result;
+}

package/src/view/layout/table.ts

@@ -0,0 +1,85 @@
+import { BAR, BAR_RULE, SGR } from "~/constants/view.ts";
+import type { Column, GroupKey, GroupLabel, Row } from "~/view/schema.ts";
+import { columns } from "~/view/schema.ts";
+import { paint } from "~/view/text/index.ts";
+import { buildSegments, renderSegment } from "./segments.ts";
+
+function measure(
+	rows: Row[],
+	ids: string[],
+): { cols: Column[]; widths: number[] } {
+	const cols = columns(ids);
+	const widths = cols.map((c) => c.header.length);
+	for (const row of rows) {
+		cols.forEach((c, i) => {
+			const len = c.value(row).length;
+			if (len > (widths[i] ?? 0)) widths[i] = len;
+		});
+	}
+	return { cols, widths };
+}
+
+export function printTable(
+	rows: Row[],
+	columnIds: string[],
+	labels: Partial<Record<GroupKey, GroupLabel>>,
+): void {
+	const { cols, widths } = measure(rows, columnIds);
+	const segs = buildSegments(columnIds, cols, widths);
+	const bar = paint(SGR.dim, BAR);
+
+	if (segs.some((seg) => labels[seg.key])) {
+		console.log(
+			segs
+				.map((seg) => {
+					const label = labels[seg.key];
+					if (!label) return " ".repeat(seg.width);
+					const left = Math.max(
+						0,
+						Math.floor((seg.width - label.title.length) / 2),
+					);
+					return paint(
+						label.color,
+						label.title
+							.padStart(left + label.title.length)
+							.padEnd(seg.width),
+					);
+				})
+				.join(bar),
+		);
+	}
+
+	console.log(
+		segs
+			.map((seg) =>
+				// Each provider block's headers take that provider's colour, so a
+				// column's side reads from the header, not only the banner above.
+				paint(
+					labels[seg.key]?.color ?? SGR.bold,
+					renderSegment(
+						seg,
+						seg.columns.map((c) => c.header),
+						false,
+					),
+				),
+			)
+			.join(bar),
+	);
+	console.log(
+		segs.map((seg) => "─".repeat(seg.width)).join(paint(SGR.dim, BAR_RULE)),
+	);
+	for (const row of rows) {
+		console.log(
+			segs
+				.map((seg) =>
+					renderSegment(
+						seg,
+						seg.columns.map((c) => c.value(row)),
+						true,
+						seg.columns.map((c) => c.style?.(row)),
+					),
+				)
+				.join(bar),
+		);
+	}
+}

package/src/view/layout/usage.ts

@@ -0,0 +1,163 @@
+import type { UsageProjection, UsageRow } from "~/cli/engine/project.ts";
+import { HEADERS, SGR } from "~/constants/view.ts";
+import type { PlanInfo, ProviderId } from "~/types.ts";
+import { fmtCount, fmtUsd, paint, planTitle } from "~/view/text/index.ts";
+
+export interface UsageMeta {
+	label: string;
+	window: string;
+	account?: { requests: number; cost: number };
+	months: number;
+	plans: Record<ProviderId, PlanInfo>;
+}
+
+function money(value: number | undefined): string {
+	if (value === undefined || value === 0) return "—";
+	return fmtUsd(value);
+}
+
+function perReq(value: number | undefined): string {
+	if (value === undefined) return "—";
+	return fmtUsd(value);
+}
+
+function cells(row: UsageRow): string[] {
+	const oc = row.oc;
+	const cc = row.cc;
+	const cheaper =
+		oc && cc
+			? oc.payPerRequest === cc.payPerRequest
+				? "tie"
+				: oc.payPerRequest < cc.payPerRequest
+					? "OC"
+					: "CC"
+			: oc
+				? "OC only"
+				: "CC only";
+	return [
+		row.name,
+		fmtCount(row.requests),
+		money(row.listCost),
+		perReq(row.cc?.payPerRequest),
+		money(row.cc?.monthly),
+		perReq(row.oc?.payPerRequest),
+		money(row.oc?.monthly),
+		cheaper,
+		row.cc?.overCap || row.oc?.overCap ? "over cap" : "",
+	];
+}
+
+export interface HeadToHead {
+	/** Rows priced on both sides — the only ones a head-to-head can use. */
+	shared: number;
+	total: number;
+	cc: number;
+	oc: number;
+	winner: "OpenCode" | "CommandCode" | "tie" | "none";
+}
+
+/**
+ * Compare the plans on the models both of them price. Summing every row lets a
+ * CC-only model add to CC's total and nothing to OpenCode's, which then "proves"
+ * OpenCode cheaper on traffic it cannot serve at all — the artefact that made a
+ * mix of one tied model plus two CC-only ones read as "OpenCode cheaper by 45%".
+ */
+export function headToHead(rows: UsageRow[]): HeadToHead {
+	const shared = rows.filter((row) => row.oc && row.cc);
+	const cc = shared.reduce((sum, row) => sum + (row.cc?.monthly ?? 0), 0);
+	const oc = shared.reduce((sum, row) => sum + (row.oc?.monthly ?? 0), 0);
+	if (shared.length === 0) {
+		return { shared: 0, total: rows.length, cc: 0, oc: 0, winner: "none" };
+	}
+	return {
+		shared: shared.length,
+		total: rows.length,
+		cc,
+		oc,
+		winner: cc > oc ? "OpenCode" : cc < oc ? "CommandCode" : "tie",
+	};
+}
+
+function headToHeadLine(report: UsageProjection): string {
+	const head = headToHead(report.rows);
+	if (head.winner === "none") {
+		return "        head-to-head  no model is priced on both sides — nothing to compare";
+	}
+	const excluded = head.total - head.shared;
+	const note =
+		excluded > 0
+			? ` (${excluded} one-sided row${excluded === 1 ? "" : "s"} excluded)`
+			: "";
+	const delta = Math.abs(head.cc - head.oc);
+	const pct = head.cc > 0 ? (delta / head.cc) * 100 : 0;
+	const verdict =
+		head.winner === "tie"
+			? "tie"
+			: `cheaper ${head.winner} by ${fmtUsd(delta)} (${pct.toFixed(0)}%)`;
+	return `        head-to-head  ${head.shared} of ${head.total} models${note} · CC ${fmtUsd(head.cc)}/mo · OpenCode ${fmtUsd(head.oc)}/mo · ${verdict}`;
+}
+
+export function renderUsage(report: UsageProjection, meta: UsageMeta): void {
+	const dim = (text: string): string => paint("2", text);
+	const scale = meta.months === 1 ? "" : ` · scaled to ${meta.months} months`;
+	console.log(
+		paint(
+			"1",
+			`USAGE  your logged mix · ${meta.window}${scale} · list value ${fmtUsd(report.ccListCost)}${meta.months === 1 ? "" : "/mo"}`,
+		),
+	);
+	console.log(`${paint(SGR.bold, "source")}  ${meta.label}`);
+	const local = report.rows.reduce((sum, row) => sum + row.requests, 0);
+	if (meta.account && meta.account.requests > 0) {
+		const pct = (local / meta.account.requests) * 100;
+		console.log(
+			`${paint(SGR.bold, "cover")}   local usage ${fmtCount(local)} of ${fmtCount(meta.account.requests)} account requests (${pct.toFixed(0)}%)`,
+		);
+		if (pct < 90) {
+			console.log(
+				dim(
+					"        partial: other machines/harnesses are missing — point --usage-log at the provider log, or use --usage-file",
+				),
+			);
+		}
+	}
+
+	const rows = report.rows.map(cells);
+	const widths = HEADERS.map((h, i) =>
+		Math.max(h.length, ...rows.map((r) => (r[i] ?? "").length)),
+	);
+	const line = (values: string[], rightSet: Set<number>): string =>
+		values
+			.map((v, i) =>
+				rightSet.has(i)
+					? v.padStart(widths[i] ?? 0)
+					: v.padEnd(widths[i] ?? 0),
+			)
+			.join("  ");
+	const right = new Set([1, 2, 3, 4, 5, 6]);
+
+	console.log();
+	console.log(paint("1", line(HEADERS, right)));
+	console.log(widths.map((w) => "─".repeat(w)).join("  "));
+	for (const row of rows) console.log(line(row, right));
+
+	console.log();
+	console.log(
+		`${paint(SGR.bold, "totals")}  your mix · CC ${fmtUsd(report.ccMonthly)}/mo · OpenCode ${fmtUsd(report.ocMonthly)}/mo`,
+	);
+	console.log(headToHeadLine(report));
+	console.log(
+		`${paint(SGR.bold, "plans")}   ${planTitle(meta.plans["oc-go"])} $${meta.plans["oc-go"].price}/mo · ${planTitle(meta.plans.cc)} $${meta.plans.cc.price}/mo`,
+	);
+	const over = report.rows
+		.filter((r) => r.cc?.overCap || r.oc?.overCap)
+		.map((r) => r.name);
+	if (over.length > 0) {
+		console.log(dim(`over cap for at least one plan: ${over.join(", ")}`));
+	}
+	if (report.unmatched.length > 0) {
+		console.log(
+			dim(`unmatched models (excluded): ${report.unmatched.join(", ")}`),
+		);
+	}
+}

package/src/view/render.ts

@@ -0,0 +1,62 @@
+import { PROVIDER_COLOR, SGR } from "~/constants/view.ts";
+import type { CompareRow } from "~/types.ts";
+import { footer } from "./footer.ts";
+import { tally } from "./layout/segments.ts";
+import { printTable } from "./layout/table.ts";
+import type { ReportMeta } from "./schema.ts";
+import { paint, planTitle, setColor, setColorMode } from "./text/index.ts";
+import { setAbilityRange, setThresholds } from "./text/styles.ts";
+
+export { fitColumns, tableWidth } from "./layout/fit.ts";
+export { tally } from "./layout/segments.ts";
+export { columns } from "./schema.ts";
+export { renderCsv, renderMarkdown } from "./text/export.ts";
+export {
+	fmtUsd,
+	planTitle,
+	providerName,
+	shortProviderName,
+} from "./text/index.ts";
+export { setAbilityRange, setColor, setColorMode, setThresholds };
+
+export function renderText(
+	rows: CompareRow[],
+	meta: ReportMeta,
+	columnIds: string[],
+	dropped: string[] = [],
+): void {
+	// The ability column ranks across the rows on screen, like COST/VAL.
+	const abilities = rows
+		.map((row) => row.oc?.ability ?? row.cc?.ability)
+		.filter((value): value is number => typeof value === "number");
+	if (abilities.length > 0) {
+		setAbilityRange(Math.min(...abilities), Math.max(...abilities));
+	}
+	printTable(rows, columnIds, {
+		oc: { title: planTitle(meta.ocPlan), color: PROVIDER_COLOR["oc-go"] },
+		cc: { title: planTitle(meta.ccPlan), color: PROVIDER_COLOR.cc },
+	});
+	if (dropped.length > 0) {
+		console.log(
+			paint(
+				SGR.dim,
+				`\ndropped for width: ${[...new Set(dropped)].join(", ")} (use --columns to force, --width <n> to widen)`,
+			),
+		);
+	}
+	console.log();
+	footer(rows, meta);
+}
+
+export function renderJson(rows: CompareRow[], meta: ReportMeta): string {
+	return JSON.stringify(
+		{
+			workloads: meta.workloads,
+			plans: { "oc-go": meta.ocPlan, cc: meta.ccPlan },
+			tally: tally(rows),
+			rows,
+		},
+		null,
+		2,
+	);
+}