cc-agents 0.1.0

package/dist/token-tracker/public/app.js

@@ -0,0 +1,230 @@
+"use strict";
+
+const POLL_MS = 3000;
+
+const ROLE_COLORS = {
+	engineer: "#79c0ff",
+	genius: "#d2a8ff",
+	judge: "#ffa657",
+};
+
+const state = {
+	currentSessionId: null,
+	chart: null,
+	pollTimer: null,
+};
+
+function fmtTs(ms) {
+	const d = new Date(ms);
+	const pad = (n) => String(n).padStart(2, "0");
+	return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+function fmtDate(ms) {
+	const d = new Date(ms);
+	const pad = (n) => String(n).padStart(2, "0");
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function fmtTokens(n) {
+	if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+	return `${n}`;
+}
+
+function fmtDuration(ms) {
+	if (ms < 60_000) return `${Math.round(ms / 1000)}s`;
+	const min = Math.floor(ms / 60_000);
+	const sec = Math.round((ms % 60_000) / 1000);
+	return `${min}m${sec}s`;
+}
+
+async function fetchJson(url, opts) {
+	const res = await fetch(url, opts);
+	if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+	return res.json();
+}
+
+async function loadSessions() {
+	const sessions = await fetchJson("/api/sessions");
+	const list = document.getElementById("sessions-list");
+	list.innerHTML = "";
+	for (const s of sessions) {
+		const li = document.createElement("li");
+		li.className = "session-item";
+		if (s.id === state.currentSessionId) li.classList.add("active");
+		const total = s.totalInput + s.totalOutput;
+		const dur = s.endedAt ? s.endedAt - s.startedAt : Date.now() - s.startedAt;
+		li.innerHTML = `
+			<div class="session-row">
+				<span class="session-when">${fmtDate(s.startedAt)}</span>
+				<span class="session-tokens">${fmtTokens(total)} tok</span>
+			</div>
+			<div class="session-meta">
+				<span>${s.id.slice(0, 8)}…</span>
+				<span>${fmtDuration(dur)}</span>
+			</div>
+			<div class="session-actions">
+				<button class="btn danger" data-action="delete">delete</button>
+			</div>
+		`;
+		li.addEventListener("click", (e) => {
+			if (e.target instanceof HTMLButtonElement) return;
+			selectSession(s.id);
+		});
+		li.querySelector('[data-action="delete"]').addEventListener("click", async (e) => {
+			e.stopPropagation();
+			if (!confirm(`Delete session ${s.id.slice(0, 8)}…?`)) return;
+			await fetchJson(`/api/sessions/${s.id}`, { method: "DELETE" });
+			if (state.currentSessionId === s.id) {
+				state.currentSessionId = null;
+				document.getElementById("current-session").textContent = "no session";
+				clearEvents();
+				clearChart();
+			}
+			await loadSessions();
+		});
+		list.appendChild(li);
+	}
+
+	if (!state.currentSessionId && sessions.length > 0) {
+		await selectSession(sessions[0].id);
+	} else if (state.currentSessionId) {
+		const cur = sessions.find((s) => s.id === state.currentSessionId);
+		if (!cur) {
+			state.currentSessionId = null;
+			clearEvents();
+			clearChart();
+		}
+	}
+}
+
+function clearEvents() {
+	document.getElementById("events-body").innerHTML = "";
+	document.getElementById("events-empty").style.display = "block";
+}
+
+function clearChart() {
+	if (state.chart) {
+		state.chart.destroy();
+		state.chart = null;
+	}
+	document.getElementById("byrole-table").innerHTML = "";
+}
+
+async function selectSession(id) {
+	state.currentSessionId = id;
+	document.getElementById("current-session").textContent = `session: ${id.slice(0, 8)}…`;
+	await Promise.all([loadByRole(id), loadEvents(id)]);
+	document.querySelectorAll(".session-item").forEach((el) => el.classList.remove("active"));
+	for (const el of document.querySelectorAll(".session-item")) {
+		if (el.querySelector(".session-meta span")?.textContent?.startsWith(id.slice(0, 8))) {
+			el.classList.add("active");
+		}
+	}
+}
+
+async function loadByRole(id) {
+	const rows = await fetchJson(`/api/sessions/${id}/by-role`);
+	const byRole = { engineer: { input: 0, output: 0, calls: 0 }, genius: { input: 0, output: 0, calls: 0 }, judge: { input: 0, output: 0, calls: 0 } };
+	for (const r of rows) byRole[r.role] = r;
+
+	renderChart(byRole);
+	renderByRoleTable(byRole);
+}
+
+function renderChart(byRole) {
+	const canvas = document.getElementById("chart-byrole");
+	const ctx = canvas.getContext("2d");
+	if (state.chart) state.chart.destroy();
+
+	const labels = ["engineer", "genius", "judge"];
+	const inputs = labels.map((r) => byRole[r].input);
+	const outputs = labels.map((r) => byRole[r].output);
+
+	state.chart = new Chart(ctx, {
+		type: "bar",
+		data: {
+			labels,
+			datasets: [
+				{ label: "input", data: inputs, backgroundColor: "#58a6ff" },
+				{ label: "output", data: outputs, backgroundColor: "#3fb950" },
+			],
+		},
+		options: {
+			indexAxis: "y",
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: { legend: { labels: { color: "#8b949e" } } },
+			scales: {
+				x: { stacked: true, ticks: { color: "#8b949e" }, grid: { color: "#30363d" } },
+				y: { stacked: true, ticks: { color: "#e6edf3" }, grid: { display: false } },
+			},
+		},
+	});
+}
+
+function renderByRoleTable(byRole) {
+	const tbody = document.getElementById("byrole-table");
+	tbody.innerHTML = "";
+	for (const role of ["engineer", "genius", "judge"]) {
+		const r = byRole[role];
+		const tr = document.createElement("tr");
+		tr.innerHTML = `
+			<td><span class="role-pill ${role}">${role}</span></td>
+			<td>${fmtTokens(r.input)} in / ${fmtTokens(r.output)} out · ${r.calls} calls</td>
+		`;
+		tbody.appendChild(tr);
+	}
+}
+
+async function loadEvents(id) {
+	const events = await fetchJson(`/api/sessions/${id}/events`);
+	const body = document.getElementById("events-body");
+	const empty = document.getElementById("events-empty");
+	body.innerHTML = "";
+	if (events.length === 0) {
+		empty.style.display = "block";
+		return;
+	}
+	empty.style.display = "none";
+	for (const e of events) {
+		const tr = document.createElement("tr");
+		tr.innerHTML = `
+			<td>${fmtTs(e.ts)}</td>
+			<td><span class="role-pill ${e.role}">${e.role}</span></td>
+			<td>${e.command}</td>
+			<td>${e.messagesCount}</td>
+			<td>${e.hasTools ? "✓" : "—"}</td>
+			<td class="num">${fmtTokens(e.inputTokens)}</td>
+			<td class="num">${fmtTokens(e.outputTokens)}</td>
+			<td class="num">${fmtTokens(e.lastInputTokens)}</td>
+			<td class="num">${e.durationMs}</td>
+		`;
+		body.appendChild(tr);
+	}
+}
+
+async function poll() {
+	try {
+		await loadSessions();
+		if (state.currentSessionId) {
+			await Promise.all([loadByRole(state.currentSessionId), loadEvents(state.currentSessionId)]);
+		}
+	} catch (err) {
+		console.warn("poll failed:", err);
+	}
+}
+
+function startPolling() {
+	if (state.pollTimer) return;
+	state.pollTimer = setInterval(poll, POLL_MS);
+}
+
+(async function init() {
+	try {
+		await poll();
+		startPolling();
+	} catch (err) {
+		console.error("init failed:", err);
+	}
+})();

package/dist/token-tracker/public/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>token-tracker</title>
+	<link rel="stylesheet" href="/style.css">
+	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.js"></script>
+</head>
+<body>
+	<header class="top">
+		<h1>token-tracker</h1>
+		<div class="session-info">
+			<span id="current-session" class="dim">no session</span>
+			<span id="live-dot" class="dot live"></span>
+		</div>
+	</header>
+
+	<main class="grid">
+		<section class="panel" id="panel-sessions">
+			<h2>sessions</h2>
+			<ol id="sessions-list" class="sessions-list"></ol>
+		</section>
+
+		<section class="panel" id="panel-byrole">
+			<h2>by role</h2>
+			<div class="chart-wrap"><canvas id="chart-byrole"></canvas></div>
+			<table id="byrole-table" class="kv-table"></table>
+		</section>
+
+		<section class="panel" id="panel-events">
+			<h2>events</h2>
+			<table id="events-table" class="data-table">
+				<thead>
+					<tr>
+						<th>ts</th>
+						<th>role</th>
+						<th>cmd</th>
+						<th>msg</th>
+						<th>tools</th>
+						<th class="num">in</th>
+						<th class="num">out</th>
+						<th class="num">ctx</th>
+						<th class="num">dur ms</th>
+					</tr>
+				</thead>
+				<tbody id="events-body"></tbody>
+			</table>
+			<div id="events-empty" class="dim empty">no events</div>
+		</section>
+	</main>
+
+	<script src="/app.js"></script>
+</body>
+</html>

package/dist/token-tracker/public/style.css

@@ -0,0 +1,233 @@
+:root {
+	color-scheme: dark;
+	--bg: #0d1117;
+	--panel: #161b22;
+	--border: #30363d;
+	--fg: #e6edf3;
+	--dim: #8b949e;
+	--accent: #58a6ff;
+	--engineer: #79c0ff;
+	--genius: #d2a8ff;
+	--judge: #ffa657;
+	--danger: #f85149;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background: var(--bg);
+	color: var(--fg);
+	font: 13px/1.4 -apple-system, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--border);
+	background: var(--panel);
+}
+
+.top h1 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+	letter-spacing: 0.02em;
+}
+
+.session-info {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.dim {
+	color: var(--dim);
+}
+
+.dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--dim);
+	display: inline-block;
+}
+
+.dot.live {
+	background: #3fb950;
+	box-shadow: 0 0 6px #3fb950aa;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: 280px 320px 1fr;
+	gap: 1px;
+	background: var(--border);
+	height: calc(100vh - 41px);
+}
+
+.panel {
+	background: var(--panel);
+	padding: 12px 14px;
+	overflow: auto;
+}
+
+.panel h2 {
+	margin: 0 0 10px;
+	font-size: 11px;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--dim);
+	font-weight: 600;
+}
+
+.sessions-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.session-item {
+	padding: 8px 10px;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	margin-bottom: 8px;
+	cursor: pointer;
+	transition: background 0.1s;
+}
+
+.session-item:hover {
+	background: #1f242c;
+}
+
+.session-item.active {
+	border-color: var(--accent);
+	background: #1f2733;
+}
+
+.session-item.current {
+	border-color: #3fb950;
+}
+
+.session-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+
+.session-when {
+	font-weight: 600;
+}
+
+.session-tokens {
+	color: var(--dim);
+	font-variant-numeric: tabular-nums;
+}
+
+.session-meta {
+	display: flex;
+	justify-content: space-between;
+	font-size: 11px;
+	color: var(--dim);
+	margin-top: 2px;
+}
+
+.session-actions {
+	display: flex;
+	gap: 6px;
+	margin-top: 6px;
+}
+
+.btn {
+	background: transparent;
+	border: 1px solid var(--border);
+	color: var(--fg);
+	padding: 2px 8px;
+	border-radius: 4px;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+.btn:hover {
+	border-color: var(--accent);
+}
+
+.btn.danger:hover {
+	border-color: var(--danger);
+	color: var(--danger);
+}
+
+.chart-wrap {
+	height: 180px;
+	margin-bottom: 12px;
+}
+
+.kv-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-variant-numeric: tabular-nums;
+}
+
+.kv-table td {
+	padding: 4px 0;
+	border-bottom: 1px dashed var(--border);
+}
+
+.kv-table td:last-child {
+	text-align: right;
+}
+
+.role-pill {
+	display: inline-block;
+	padding: 1px 6px;
+	border-radius: 3px;
+	font-size: 11px;
+	font-weight: 600;
+}
+
+.role-pill.engineer { background: #1f3a5a; color: var(--engineer); }
+.role-pill.genius   { background: #3a2a4a; color: var(--genius); }
+.role-pill.judge    { background: #4a3a1f; color: var(--judge); }
+
+.data-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-variant-numeric: tabular-nums;
+	font-size: 12px;
+}
+
+.data-table th {
+	text-align: left;
+	font-weight: 600;
+	color: var(--dim);
+	font-size: 11px;
+	padding: 4px 6px;
+	border-bottom: 1px solid var(--border);
+	position: sticky;
+	top: 0;
+	background: var(--panel);
+}
+
+.data-table th.num { text-align: right; }
+
+.data-table td {
+	padding: 4px 6px;
+	border-bottom: 1px solid #1f242c22;
+}
+
+.data-table td.num { text-align: right; }
+
+.data-table tr:hover td {
+	background: #1f242c44;
+}
+
+.empty {
+	padding: 12px;
+	text-align: center;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+	"name": "cc-agents",
+	"version": "0.1.0",
+	"description": "Three-role AI deliberation CLI: engineer proposes, genius challenges, judge points the next question.",
+	"private": false,
+	"license": "MIT",
+	"type": "module",
+	"bin": {
+		"cc-agents": "./bin/cc-agents.mjs"
+	},
+	"files": [
+		"dist",
+		"bin",
+		"README.md"
+	],
+	"scripts": {
+		"start": "tsx src/index.ts",
+		"build": "tsc --noEmit && node scripts/build.mjs",
+		"check": "biome check --write .",
+		"typecheck": "tsc --noEmit",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"get-east-asian-width": "1.6.0",
+		"marked": "15.0.12"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.3.5",
+		"@types/node": "22.19.19",
+		"esbuild": "^0.28.1",
+		"tsx": "4.22.1",
+		"typescript": "5.9.3"
+	},
+	"engines": {
+		"node": ">=22.19.0"
+	}
+}