diffing 0.2.0 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 A local-first code review tool and double-sided bridge designed for the modern AI coding agent workflow. Review AI-generated changes in a high-fidelity, GitHub-like web UI, leave inline comments, and hand them back to your coding agent to fix in real time — and review the agent's **plan** the same way *before* it writes any code, approving, rejecting, or requesting changes on specific lines and sections.
 
-<img width="1840" height="1196" alt="image" src="https://github.com/user-attachments/assets/767d42ed-a497-4b21-aca7-35be8b9a7006" />
+<img width="1667" height="1087" alt="image" src="https://github.com/user-attachments/assets/52dcd2af-fc85-44ba-a679-4609e667c6f4" />
 
 
 ---
@@ -22,6 +22,12 @@ diffing
 ```
 This instantly spins up a local server, establishes an active repository watcher, and opens your default browser to an interactive code review dashboard.
 
+### 3. Update
+Check if a new version is available on npm and upgrade instantly via the CLI:
+```bash
+diffing update
+```
+
 ---
 
 ## Web UI Review Dashboard
@@ -33,7 +39,9 @@ A local Hono-powered review server delivers a full-featured GitHub-like code rev
 - **Interactive File Tree** — Hierarchical file navigation sidebar with collapsible folders, viewed/unviewed tracking, and change-type indicators (added, modified, deleted).
 - **Status Dashboard (Comment Tracker)** — Bottom panel tracking open, replied, and resolved comments with filter tabs and click-to-navigate references to the relevant file and line.
 - **Git Diff Stats** — Toolbar displays repo name, branch, file count, and additions/deletions (`+X/-Y`) computed from the patch.
-- **Resizable Panels** — Drag-to-resize sidebar (240px–640px) and comment tracker panel (100px–600px). Widths and heights persist in localStorage.
+- **Server-Side State & Drafts Persistence** — No browser storage is used. All settings, UI panels sizing, session states, and comment drafts are securely stored and persisted server-side in the project's global `.diffing` directory (and global settings inside `~/.config/diffing/settings.json`).
+- **Dynamic Font Customization** — Dynamically load, cache, and apply any Google Fonts or local system fonts for both UI typography and monospace code rendering, easily configurable via the settings font picker.
+- **Resizable Panels** — Drag-to-resize sidebar (240px–640px) and comment tracker panel (100px–600px). Panel states are instantly saved server-side for absolute consistency across browser sessions.
 - **Skeleton Loading Screen** — Full shimmer placeholder UI for toolbar, sidebar, search, tree nodes, and file diffs during initial load.
 - **Image Diff Previews** — Visual side-by-side comparison for added, changed, and deleted image files (PNG, JPEG, GIF, WebP, SVG, BMP, ICO, AVIF).
 
@@ -61,7 +69,8 @@ A local Hono-powered review server delivers a full-featured GitHub-like code rev
 - **Instant Switching** — CSS transitions suppressed during theme changes for a snappy, lag-free experience.
 - **Persistent Setting** — Theme choice saved to `~/.config/diffing/settings.json` and restored on next launch.
 
-<img width="1840" height="1196" alt="image" src="https://github.com/user-attachments/assets/d4905604-e156-4c9b-998e-9015a7c36019" />
+<img width="1667" height="1087" alt="image" src="https://github.com/user-attachments/assets/6e4a4552-fef2-4002-8b8f-b544c95c4c26" />
+
 
 
 ---
@@ -122,6 +131,15 @@ A vim-style status bar at the bottom displays the current mode (NORMAL/INSERT),
 <img width="1840" height="1196" alt="image" src="https://github.com/user-attachments/assets/d230d020-4fb2-475a-a8a0-0ae11bb271ff" />
 
 
+---
+
+## Console Startup Animations & Quotes
+
+Every time you launch `diffing` in the terminal, it serves a highly polished, interactive greeting before the browser opens:
+- **256-Color Monochromatic Palettes** — Beautifully rendered box outlines across 6 monochromatic themes (Cyan, Green, Magenta, Yellow, Blue, Orange) with custom faint, base, glow, and text hues.
+- **Dynamic Startup Animations** — Instantly runs one of 6 terminal-based micro-animations (Typewriter, Wave Reveal, Slide-In, Pulse Border, Glitch Noise, Matrix Rain) underneath the local server URL.
+- **Motivational Developer Quotes** — Settles to display one of 30 curated, funny, philosophical, or motivational developer quotes to kick off your review session.
+
 ---
 
 ## Performance & Speed
@@ -295,6 +313,10 @@ self-documenting `<plan-review>` envelope:
 </plan-review>
 ```
 
+<img width="1667" height="1087" alt="image" src="https://github.com/user-attachments/assets/00e884b5-4c90-4a9a-9e24-9ae57d80f3f2" />
+
+
+
 ---
 
 ## Inline Comment System
@@ -304,7 +326,7 @@ Rich, real-time comment threads directly on diff lines:
 - **Inline Threads** — Hover and click the `+` button on any addition or deletion line to start a thread. Supports markdown (GFM + line breaks) with syntax-highlighted fenced code blocks.
 - **Multi-Line Comments** — Select a line range to comment on an entire block of code.
 - **File-Level Comments** — Add general comments scoped to the entire file without targeting a specific line.
-- **Comment Drafts** — LocalStorage-based draft system (`diffing-draft-*` keys) with 7-day TTL, so drafts survive page refreshes.
+- **Comment Drafts** — Draft system (`diffing-draft-*` keys) with 7-day TTL, stored in the global `.diffing` folder so drafts survive page refreshes without any browser storage footprint.
 - **Agent Attribution** — Replies carry `role` (`user`/`agent`) and the agent's `model` name for clear attribution.
 - **Suggestion Application** — Parse `` ```suggestion `` code blocks from comment bodies and apply them to the file in one click via `POST /api/comments/:id/apply-suggestion`.
 - **Full CRUD API** — REST endpoints for creating, reading, updating, and deleting comments and replies.
@@ -324,6 +346,8 @@ Fine-grained control over how diffs are rendered:
 | **Hunk Separators** | `simple`, `metadata`, `line-info`, `line-info-basic` | Style of the separator bar between diff hunks |
 | **Line Hover Highlight** | `both`, `line`, `number`, `disabled` | Which element highlights on hover |
 | **Font Size** | 11px – 16px | Configure globally |
+| **UI Font** | Any system or Google font (default Geist Mono) | Customize typography for the Web UI layout |
+| **Mono Font** | Any system or Google font (default JetBrains Mono) | Customize typography for code/diff block displays |
 | **Tab Size** | 2 / 4 / 8 | Default tab width (overridden per-file by EditorConfig) |
 | **Expandable Context** | `expandContextByDefault`, `collapsedContextThreshold` (default 10 lines), `expansionLineCount` (default 20) | Control how collapsed context regions behave |
 | **Haptic & Sound Feedback** | on / off | Tactile feedback via `web-haptics` and synthesized audio cues (click, toggle, navigate, open, close, resolve, send, error) |

package/dist/cli-agent-BLPX3oOP.mjs

@@ -0,0 +1,443 @@
+import { c as formatComments, n as readServerLock, o as formatPlanReview, t as isLockAlive } from "./server-lock-B4crz9-_.mjs";
+import { parseArgs } from "node:util";
+import { readFile } from "node:fs/promises";
+//#region src/cli-agent.ts
+/**
+* Agent-facing `diffing` subcommands. These make the user→agent handoff
+* port-agnostic: each resolves the running server via the per-repo lockfile
+* (`server.json`) so any agent with a shell — or a human — can drive the loop
+* without being told a port.
+*
+*   diffing await-review   block until the human clicks "Send to agent"
+*   diffing reply <id>     post an agent reply to a comment
+*   diffing resolve <id>   mark a comment resolved
+*   diffing comments       dump the current comments (XML or JSON)
+*/
+const EXIT_OK = 0;
+const EXIT_AWAIT_TIMEOUT = 2;
+const EXIT_NO_SERVER = 3;
+const EXIT_NOT_FOUND = 4;
+const EXIT_USAGE = 5;
+/** Resolve the running server's base URL from the lockfile, or exit cleanly. */
+function baseUrl() {
+	const lock = readServerLock();
+	if (!lock || !isLockAlive(lock)) {
+		console.error("No diffing server running for this repo. Start one with `diffing`.");
+		process.exit(EXIT_NO_SERVER);
+	}
+	return `http://${lock.host === "0.0.0.0" || lock.host === "::" ? "127.0.0.1" : lock.host}:${lock.port}`;
+}
+async function readStdin() {
+	const chunks = [];
+	for await (const chunk of process.stdin) chunks.push(chunk);
+	return Buffer.concat(chunks).toString("utf-8");
+}
+async function awaitReview(args) {
+	const { values } = parseArgs({
+		args,
+		options: {
+			timeout: {
+				type: "string",
+				short: "t"
+			},
+			since: { type: "string" }
+		},
+		allowPositionals: false
+	});
+	const totalBudgetMs = (values.timeout ? Number(values.timeout) : 570) * 1e3;
+	const base = baseUrl();
+	let sinceRound = 0;
+	try {
+		sinceRound = (await fetch(`${base}/api/review/status`).then((r) => r.json())).round ?? 0;
+	} catch {}
+	const deadline = Date.now() + totalBudgetMs;
+	while (Date.now() < deadline) {
+		let res;
+		try {
+			res = await fetch(`${base}/api/review/await?timeoutMs=25000&sinceRound=${sinceRound}`, { signal: AbortSignal.timeout(3e4) });
+		} catch (err) {
+			if (err?.name === "TimeoutError") continue;
+			console.error(`Failed to reach diffing server: ${err?.message ?? err}`);
+			return EXIT_NO_SERVER;
+		}
+		const result = await res.json();
+		if (result.status === "released") {
+			process.stdout.write(result.payload.commentXml + "\n");
+			console.error(`DIFFING_REVIEW_ROUND=${result.payload.round}`);
+			return EXIT_OK;
+		}
+		sinceRound = result.round ?? sinceRound;
+	}
+	console.error("DIFFING_AWAIT_TIMEOUT");
+	console.error("No review sent within the timeout. Run `diffing await-review` again to keep waiting.");
+	return EXIT_AWAIT_TIMEOUT;
+}
+async function reply(args) {
+	const { values, positionals } = parseArgs({
+		args,
+		options: {
+			body: {
+				type: "string",
+				short: "b"
+			},
+			model: {
+				type: "string",
+				short: "m"
+			}
+		},
+		allowPositionals: true
+	});
+	const commentId = positionals[0];
+	if (!commentId) {
+		console.error("Usage: diffing reply <commentId> --body <text> [--model <name>]");
+		return EXIT_USAGE;
+	}
+	let body = values.body;
+	if (body === "-" || body === void 0) body = (await readStdin()).trim();
+	if (!body) {
+		console.error("A reply body is required (--body <text> or pipe via stdin).");
+		return EXIT_USAGE;
+	}
+	const res = await fetch(`${baseUrl()}/api/comments/${commentId}/replies`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			body,
+			role: "agent",
+			model: values.model
+		})
+	});
+	if (res.status === 404) {
+		console.error(`Comment ${commentId} not found.`);
+		return EXIT_NOT_FOUND;
+	}
+	if (!res.ok) {
+		console.error(`Failed to reply: HTTP ${res.status}`);
+		return 1;
+	}
+	console.error(`Replied to ${commentId}.`);
+	return EXIT_OK;
+}
+async function resolve(args) {
+	const { positionals } = parseArgs({
+		args,
+		allowPositionals: true,
+		options: {}
+	});
+	const commentId = positionals[0];
+	if (!commentId) {
+		console.error("Usage: diffing resolve <commentId>");
+		return EXIT_USAGE;
+	}
+	const res = await fetch(`${baseUrl()}/api/comments/${commentId}`, {
+		method: "PUT",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ status: "resolved" })
+	});
+	if (res.status === 404) {
+		console.error(`Comment ${commentId} not found.`);
+		return EXIT_NOT_FOUND;
+	}
+	if (!res.ok) {
+		console.error(`Failed to resolve: HTTP ${res.status}`);
+		return 1;
+	}
+	console.error(`Resolved ${commentId}.`);
+	return EXIT_OK;
+}
+async function url() {
+	process.stdout.write(baseUrl() + "\n");
+	return EXIT_OK;
+}
+async function comments(args) {
+	const { values } = parseArgs({
+		args,
+		options: {
+			open: { type: "boolean" },
+			json: { type: "boolean" }
+		},
+		allowPositionals: false
+	});
+	const all = await fetch(`${baseUrl()}/api/comments`).then((r) => r.json());
+	const selected = values.open ? all.filter((c) => c.status === "open") : all;
+	if (values.json) process.stdout.write(JSON.stringify(selected, null, 2) + "\n");
+	else process.stdout.write(formatComments(selected) + "\n");
+	return EXIT_OK;
+}
+/** Derive a human title from a plan's first heading or non-empty line. */
+function deriveTitle(body) {
+	for (const raw of body.split("\n")) {
+		const line = raw.trim();
+		if (!line) continue;
+		const heading = /^#{1,6}\s+(.*)$/.exec(line);
+		return (heading ? heading[1] : line).slice(0, 120);
+	}
+	return "Untitled plan";
+}
+/** Long-poll the plan-review handoff until a decision arrives or time runs out. */
+async function pollPlanDecision(base, totalBudgetMs, seedSince) {
+	let sinceRound = seedSince ?? 0;
+	if (seedSince === void 0) try {
+		sinceRound = (await fetch(`${base}/api/plan-review/status`).then((r) => r.json())).round ?? 0;
+	} catch {}
+	const deadline = Date.now() + totalBudgetMs;
+	while (Date.now() < deadline) {
+		let res;
+		try {
+			res = await fetch(`${base}/api/plan-review/await?timeoutMs=25000&sinceRound=${sinceRound}`, { signal: AbortSignal.timeout(3e4) });
+		} catch (err) {
+			if (err?.name === "TimeoutError") continue;
+			console.error(`Failed to reach diffing server: ${err?.message ?? err}`);
+			return EXIT_NO_SERVER;
+		}
+		const result = await res.json();
+		if (result.status === "released") {
+			process.stdout.write(result.payload.reviewXml + "\n");
+			console.error(`DIFFING_PLAN_DECISION=${result.payload.decision}`);
+			console.error(`DIFFING_PLAN_ROUND=${result.payload.round}`);
+			return EXIT_OK;
+		}
+		sinceRound = result.round ?? sinceRound;
+	}
+	console.error("DIFFING_PLAN_AWAIT_TIMEOUT");
+	console.error("No plan decision within the timeout. Run `diffing plan await` again to keep waiting.");
+	return EXIT_AWAIT_TIMEOUT;
+}
+async function planSubmit(args) {
+	const { values, positionals } = parseArgs({
+		args,
+		options: {
+			title: { type: "string" },
+			source: {
+				type: "string",
+				short: "s"
+			},
+			model: {
+				type: "string",
+				short: "m"
+			},
+			id: { type: "string" },
+			wait: {
+				type: "boolean",
+				short: "w"
+			},
+			timeout: {
+				type: "string",
+				short: "t"
+			}
+		},
+		allowPositionals: true
+	});
+	const file = positionals[0];
+	let body;
+	if (!file || file === "-") body = await readStdin();
+	else try {
+		body = await readFile(file, "utf-8");
+	} catch (err) {
+		console.error(`Failed to read plan file ${file}: ${err?.message ?? err}`);
+		return EXIT_USAGE;
+	}
+	body = body.replace(/\r\n/g, "\n");
+	if (!body.trim()) {
+		console.error("A plan body is required (pass a markdown file path or pipe via stdin).");
+		return EXIT_USAGE;
+	}
+	const title = values.title || deriveTitle(body);
+	const base = baseUrl();
+	let sinceRound = 0;
+	if (values.wait) try {
+		sinceRound = (await fetch(`${base}/api/plan-review/status`).then((r) => r.json())).round ?? 0;
+	} catch {}
+	const res = await fetch(`${base}/api/plans`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			id: values.id,
+			title,
+			body,
+			source: values.source,
+			model: values.model
+		})
+	});
+	if (!res.ok) {
+		console.error(`Failed to submit plan: HTTP ${res.status}`);
+		return 1;
+	}
+	const plan = await res.json();
+	console.error(`Submitted plan ${plan.id} (v${plan.version}) — review at ${base}/plan/${plan.id}`);
+	if (!values.wait) {
+		process.stdout.write(plan.id + "\n");
+		return EXIT_OK;
+	}
+	return pollPlanDecision(base, (values.timeout ? Number(values.timeout) : 570) * 1e3, sinceRound);
+}
+async function planAwait(args) {
+	const { values } = parseArgs({
+		args,
+		options: { timeout: {
+			type: "string",
+			short: "t"
+		} },
+		allowPositionals: false
+	});
+	const totalBudgetMs = (values.timeout ? Number(values.timeout) : 570) * 1e3;
+	return pollPlanDecision(baseUrl(), totalBudgetMs);
+}
+async function planList(args) {
+	const { values } = parseArgs({
+		args,
+		options: { json: { type: "boolean" } },
+		allowPositionals: false
+	});
+	const all = await fetch(`${baseUrl()}/api/plans`).then((r) => r.json());
+	if (values.json) {
+		process.stdout.write(JSON.stringify(all, null, 2) + "\n");
+		return EXIT_OK;
+	}
+	if (all.length === 0) {
+		console.error("No plans submitted yet.");
+		return EXIT_OK;
+	}
+	for (const p of all) {
+		const open = (p.comments ?? []).filter((c) => c.status === "open").length;
+		process.stdout.write(`${p.id}\t[${p.decision}]\tv${p.version}\t${open} open comment(s)\t${p.title}\n`);
+	}
+	return EXIT_OK;
+}
+async function planShow(args) {
+	const { values, positionals } = parseArgs({
+		args,
+		options: { json: { type: "boolean" } },
+		allowPositionals: true
+	});
+	const base = baseUrl();
+	let planId = positionals[0];
+	if (!planId) {
+		const all = await fetch(`${base}/api/plans`).then((r) => r.json());
+		if (all.length === 0) {
+			console.error("No plans submitted yet.");
+			return EXIT_NOT_FOUND;
+		}
+		planId = all[all.length - 1].id;
+	}
+	const res = await fetch(`${base}/api/plans/${planId}`);
+	if (res.status === 404) {
+		console.error(`Plan ${planId} not found.`);
+		return EXIT_NOT_FOUND;
+	}
+	const plan = await res.json();
+	if (values.json) process.stdout.write(JSON.stringify(plan, null, 2) + "\n");
+	else process.stdout.write(formatPlanReview(plan) + "\n");
+	return EXIT_OK;
+}
+/** Locate which plan owns a given comment id (comment ids are globally unique). */
+async function findCommentPlan(base, commentId) {
+	return (await fetch(`${base}/api/plans`).then((r) => r.json())).find((p) => (p.comments ?? []).some((c) => c.id === commentId)) ?? null;
+}
+async function planReply(args) {
+	const { values, positionals } = parseArgs({
+		args,
+		options: {
+			body: {
+				type: "string",
+				short: "b"
+			},
+			model: {
+				type: "string",
+				short: "m"
+			}
+		},
+		allowPositionals: true
+	});
+	const commentId = positionals[0];
+	if (!commentId) {
+		console.error("Usage: diffing plan reply <commentId> --body <text> [--model <name>]");
+		return EXIT_USAGE;
+	}
+	let body = values.body;
+	if (body === "-" || body === void 0) body = (await readStdin()).trim();
+	if (!body) {
+		console.error("A reply body is required (--body <text> or pipe via stdin).");
+		return EXIT_USAGE;
+	}
+	const base = baseUrl();
+	const plan = await findCommentPlan(base, commentId);
+	if (!plan) {
+		console.error(`Plan comment ${commentId} not found.`);
+		return EXIT_NOT_FOUND;
+	}
+	const res = await fetch(`${base}/api/plans/${plan.id}/comments/${commentId}/replies`, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			body,
+			role: "agent",
+			model: values.model
+		})
+	});
+	if (!res.ok) {
+		console.error(`Failed to reply: HTTP ${res.status}`);
+		return 1;
+	}
+	console.error(`Replied to plan comment ${commentId}.`);
+	return EXIT_OK;
+}
+async function planResolve(args) {
+	const { positionals } = parseArgs({
+		args,
+		allowPositionals: true,
+		options: {}
+	});
+	const commentId = positionals[0];
+	if (!commentId) {
+		console.error("Usage: diffing plan resolve <commentId>");
+		return EXIT_USAGE;
+	}
+	const base = baseUrl();
+	const plan = await findCommentPlan(base, commentId);
+	if (!plan) {
+		console.error(`Plan comment ${commentId} not found.`);
+		return EXIT_NOT_FOUND;
+	}
+	const res = await fetch(`${base}/api/plans/${plan.id}/comments/${commentId}`, {
+		method: "PUT",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ status: "resolved" })
+	});
+	if (!res.ok) {
+		console.error(`Failed to resolve: HTTP ${res.status}`);
+		return 1;
+	}
+	console.error(`Resolved plan comment ${commentId}.`);
+	return EXIT_OK;
+}
+async function plan(args) {
+	const action = args[0];
+	const rest = args.slice(1);
+	switch (action) {
+		case "submit": return planSubmit(rest);
+		case "await": return planAwait(rest);
+		case "list": return planList(rest);
+		case "show": return planShow(rest);
+		case "reply": return planReply(rest);
+		case "resolve": return planResolve(rest);
+		default:
+			console.error("Usage: diffing plan <submit|await|list|show|reply|resolve> [...]");
+			return EXIT_USAGE;
+	}
+}
+async function runSubcommand(name, args) {
+	switch (name) {
+		case "await-review": return awaitReview(args);
+		case "reply": return reply(args);
+		case "resolve": return resolve(args);
+		case "comments": return comments(args);
+		case "url": return url();
+		case "plan": return plan(args);
+		default:
+			console.error(`Unknown subcommand: ${name}`);
+			return EXIT_USAGE;
+	}
+}
+//#endregion
+export { runSubcommand };