Merge syntax-highlighting branch: add syntax highlighting and intra-line diff

- Syntax highlighting for markdown code blocks, read/write tool output
- Intra-line diff highlighting for edit tool with word-level inverse
- VS Code-style syntax colors in themes
- Fix Google provider FinishReason handling
- Upgrade @google/genai to 1.34.0

packages/coding-agent/src/modes/interactive/components/diff.ts

@@ -0,0 +1,147 @@
+import * as Diff from "diff";
+import { theme } from "../theme/theme.js";
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Format: "+123 content" or "-123 content" or " 123 content" or "     ..."
+ */
+function parseDiffLine(line: string): { prefix: string; lineNum: string; content: string } | null {
+	const match = line.match(/^([+-\s])(\s*\d*)\s(.*)$/);
+	if (!match) return null;
+	return { prefix: match[1], lineNum: match[2], content: match[3] };
+}
+
+/**
+ * Replace tabs with spaces for consistent rendering.
+ */
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
+	const wordDiff = Diff.diffWords(oldContent, newContent);
+
+	let removedLine = "";
+	let addedLine = "";
+	let isFirstRemoved = true;
+	let isFirstAdded = true;
+
+	for (const part of wordDiff) {
+		if (part.removed) {
+			let value = part.value;
+			// Strip leading whitespace from the first removed part
+			if (isFirstRemoved) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				removedLine += leadingWs;
+				isFirstRemoved = false;
+			}
+			if (value) {
+				removedLine += theme.inverse(value);
+			}
+		} else if (part.added) {
+			let value = part.value;
+			// Strip leading whitespace from the first added part
+			if (isFirstAdded) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				addedLine += leadingWs;
+				isFirstAdded = false;
+			}
+			if (value) {
+				addedLine += theme.inverse(value);
+			}
+		} else {
+			removedLine += part.value;
+			addedLine += part.value;
+		}
+	}
+
+	return { removedLine, addedLine };
+}
+
+export interface RenderDiffOptions {
+	/** File path (unused, kept for API compatibility) */
+	filePath?: string;
+}
+
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+	const lines = diffText.split("\n");
+	const result: string[] = [];
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			result.push(theme.fg("toolDiffContext", line));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			// Collect consecutive removed lines
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Collect consecutive added lines
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Only do intra-line diffing when there's exactly one removed and one added line
+			// (indicating a single line modification). Otherwise, show lines as-is.
+			if (removedLines.length === 1 && addedLines.length === 1) {
+				const removed = removedLines[0];
+				const added = addedLines[0];
+
+				const { removedLine, addedLine } = renderIntraLineDiff(
+					replaceTabs(removed.content),
+					replaceTabs(added.content),
+				);
+
+				result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${removedLine}`));
+				result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${addedLine}`));
+			} else {
+				// Show all removed lines first, then all added lines
+				for (const removed of removedLines) {
+					result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+				}
+				for (const added of addedLines) {
+					result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+				}
+			}
+		} else if (parsed.prefix === "+") {
+			// Standalone added line
+			result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			i++;
+		} else {
+			// Context line
+			result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}

packages/coding-agent/src/modes/interactive/components/tool-execution.ts

@@ -12,7 +12,8 @@ import {
 import stripAnsi from "strip-ansi";
 import type { CustomAgentTool } from "../../../core/custom-tools/types.js";
 import { DEFAULT_MAX_BYTES, DEFAULT_MAX_LINES, formatSize } from "../../../core/tools/truncate.js";
-import { theme } from "../theme/theme.js";
+import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
+import { renderDiff } from "./diff.js";
 
 /**
  * Convert absolute path to tilde notation if it's in home directory
@@ -280,13 +281,19 @@ export class ToolExecutionComponent extends Container {
 
 			if (this.result) {
 				const output = this.getTextOutput();
-				const lines = output.split("\n");
+				const rawPath = this.args?.file_path || this.args?.path || "";
+				const lang = getLanguageFromPath(rawPath);
+				const lines = lang ? highlightCode(replaceTabs(output), lang) : output.split("\n");
 
 				const maxLines = this.expanded ? lines.length : 10;
 				const displayLines = lines.slice(0, maxLines);
 				const remaining = lines.length - maxLines;
 
-				text += "\n\n" + displayLines.map((line: string) => theme.fg("toolOutput", replaceTabs(line))).join("\n");
+				text +=
+					"\n\n" +
+					displayLines
+						.map((line: string) => (lang ? replaceTabs(line) : theme.fg("toolOutput", replaceTabs(line))))
+						.join("\n");
 				if (remaining > 0) {
 					text += theme.fg("toolOutput", `\n... (${remaining} more lines)`);
 				}
@@ -318,9 +325,15 @@ export class ToolExecutionComponent extends Container {
 				}
 			}
 		} else if (this.toolName === "write") {
-			const path = shortenPath(this.args?.file_path || this.args?.path || "");
+			const rawPath = this.args?.file_path || this.args?.path || "";
+			const path = shortenPath(rawPath);
 			const fileContent = this.args?.content || "";
-			const lines = fileContent ? fileContent.split("\n") : [];
+			const lang = getLanguageFromPath(rawPath);
+			const lines = fileContent
+				? lang
+					? highlightCode(replaceTabs(fileContent), lang)
+					: fileContent.split("\n")
+				: [];
 			const totalLines = lines.length;
 
 			text =
@@ -336,13 +349,18 @@ export class ToolExecutionComponent extends Container {
 				const displayLines = lines.slice(0, maxLines);
 				const remaining = lines.length - maxLines;
 
-				text += "\n\n" + displayLines.map((line: string) => theme.fg("toolOutput", replaceTabs(line))).join("\n");
+				text +=
+					"\n\n" +
+					displayLines
+						.map((line: string) => (lang ? replaceTabs(line) : theme.fg("toolOutput", replaceTabs(line))))
+						.join("\n");
 				if (remaining > 0) {
 					text += theme.fg("toolOutput", `\n... (${remaining} more lines)`);
 				}
 			}
 		} else if (this.toolName === "edit") {
-			const path = shortenPath(this.args?.file_path || this.args?.path || "");
+			const rawPath = this.args?.file_path || this.args?.path || "";
+			const path = shortenPath(rawPath);
 			text =
 				theme.fg("toolTitle", theme.bold("edit")) +
 				" " +
@@ -355,17 +373,7 @@ export class ToolExecutionComponent extends Container {
 						text += "\n\n" + theme.fg("error", errorText);
 					}
 				} else if (this.result.details?.diff) {
-					const diffLines = this.result.details.diff.split("\n");
-					const coloredLines = diffLines.map((line: string) => {
-						if (line.startsWith("+")) {
-							return theme.fg("toolDiffAdded", line);
-						} else if (line.startsWith("-")) {
-							return theme.fg("toolDiffRemoved", line);
-						} else {
-							return theme.fg("toolDiffContext", line);
-						}
-					});
-					text += "\n\n" + coloredLines.join("\n");
+					text += "\n\n" + renderDiff(this.result.details.diff, { filePath: rawPath });
 				}
 			}
 		} else if (this.toolName === "ls") {

packages/coding-agent/src/modes/interactive/theme/dark.json

@@ -51,15 +51,15 @@
 		"toolDiffRemoved": "red",
 		"toolDiffContext": "gray",
 
-		"syntaxComment": "gray",
-		"syntaxKeyword": "cyan",
-		"syntaxFunction": "blue",
-		"syntaxVariable": "",
-		"syntaxString": "green",
-		"syntaxNumber": "yellow",
-		"syntaxType": "cyan",
-		"syntaxOperator": "",
-		"syntaxPunctuation": "gray",
+		"syntaxComment": "#6A9955",
+		"syntaxKeyword": "#569CD6",
+		"syntaxFunction": "#DCDCAA",
+		"syntaxVariable": "#9CDCFE",
+		"syntaxString": "#CE9178",
+		"syntaxNumber": "#B5CEA8",
+		"syntaxType": "#4EC9B0",
+		"syntaxOperator": "#D4D4D4",
+		"syntaxPunctuation": "#D4D4D4",
 
 		"thinkingOff": "darkGray",
 		"thinkingMinimal": "#6e6e6e",

packages/coding-agent/src/modes/interactive/theme/light.json

@@ -50,15 +50,15 @@
 		"toolDiffRemoved": "red",
 		"toolDiffContext": "mediumGray",
 
-		"syntaxComment": "mediumGray",
-		"syntaxKeyword": "teal",
-		"syntaxFunction": "blue",
-		"syntaxVariable": "",
-		"syntaxString": "green",
-		"syntaxNumber": "yellow",
-		"syntaxType": "teal",
-		"syntaxOperator": "",
-		"syntaxPunctuation": "mediumGray",
+		"syntaxComment": "#008000",
+		"syntaxKeyword": "#0000FF",
+		"syntaxFunction": "#795E26",
+		"syntaxVariable": "#001080",
+		"syntaxString": "#A31515",
+		"syntaxNumber": "#098658",
+		"syntaxType": "#267F99",
+		"syntaxOperator": "#000000",
+		"syntaxPunctuation": "#000000",
 
 		"thinkingOff": "lightGray",
 		"thinkingMinimal": "#9e9e9e",

packages/coding-agent/src/modes/interactive/theme/theme.ts

@@ -4,6 +4,7 @@ import type { EditorTheme, MarkdownTheme, SelectListTheme } from "@mariozechner/
 import { type Static, Type } from "@sinclair/typebox";
 import { TypeCompiler } from "@sinclair/typebox/compiler";
 import chalk from "chalk";
+import { highlight } from "cli-highlight";
 import { getCustomThemesDir, getThemesDir } from "../../../config.js";
 
 // ============================================================================
@@ -350,6 +351,10 @@ export class Theme {
 		return chalk.underline(text);
 	}
 
+	inverse(text: string): string {
+		return chalk.inverse(text);
+	}
+
 	getFgAnsi(color: ThemeColor): string {
 		const ansi = this.fgColors.get(color);
 		if (!ansi) throw new Error(`Unknown theme color: ${color}`);
@@ -630,6 +635,127 @@ export function stopThemeWatcher(): void {
 // TUI Helpers
 // ============================================================================
 
+type CliHighlightTheme = Record<string, (s: string) => string>;
+
+let cachedHighlightThemeFor: Theme | undefined;
+let cachedCliHighlightTheme: CliHighlightTheme | undefined;
+
+function buildCliHighlightTheme(t: Theme): CliHighlightTheme {
+	return {
+		keyword: (s: string) => t.fg("syntaxKeyword", s),
+		built_in: (s: string) => t.fg("syntaxType", s),
+		literal: (s: string) => t.fg("syntaxNumber", s),
+		number: (s: string) => t.fg("syntaxNumber", s),
+		string: (s: string) => t.fg("syntaxString", s),
+		comment: (s: string) => t.fg("syntaxComment", s),
+		function: (s: string) => t.fg("syntaxFunction", s),
+		title: (s: string) => t.fg("syntaxFunction", s),
+		class: (s: string) => t.fg("syntaxType", s),
+		type: (s: string) => t.fg("syntaxType", s),
+		attr: (s: string) => t.fg("syntaxVariable", s),
+		variable: (s: string) => t.fg("syntaxVariable", s),
+		params: (s: string) => t.fg("syntaxVariable", s),
+		operator: (s: string) => t.fg("syntaxOperator", s),
+		punctuation: (s: string) => t.fg("syntaxPunctuation", s),
+	};
+}
+
+function getCliHighlightTheme(t: Theme): CliHighlightTheme {
+	if (cachedHighlightThemeFor !== t || !cachedCliHighlightTheme) {
+		cachedHighlightThemeFor = t;
+		cachedCliHighlightTheme = buildCliHighlightTheme(t);
+	}
+	return cachedCliHighlightTheme;
+}
+
+/**
+ * Highlight code with syntax coloring based on file extension or language.
+ * Returns array of highlighted lines.
+ */
+export function highlightCode(code: string, lang?: string): string[] {
+	const opts = {
+		language: lang,
+		ignoreIllegals: true,
+		theme: getCliHighlightTheme(theme),
+	};
+	try {
+		return highlight(code, opts).split("\n");
+	} catch {
+		return code.split("\n");
+	}
+}
+
+/**
+ * Get language identifier from file path extension.
+ */
+export function getLanguageFromPath(filePath: string): string | undefined {
+	const ext = filePath.split(".").pop()?.toLowerCase();
+	if (!ext) return undefined;
+
+	const extToLang: Record<string, string> = {
+		ts: "typescript",
+		tsx: "typescript",
+		js: "javascript",
+		jsx: "javascript",
+		mjs: "javascript",
+		cjs: "javascript",
+		py: "python",
+		rb: "ruby",
+		rs: "rust",
+		go: "go",
+		java: "java",
+		kt: "kotlin",
+		swift: "swift",
+		c: "c",
+		h: "c",
+		cpp: "cpp",
+		cc: "cpp",
+		cxx: "cpp",
+		hpp: "cpp",
+		cs: "csharp",
+		php: "php",
+		sh: "bash",
+		bash: "bash",
+		zsh: "bash",
+		fish: "fish",
+		ps1: "powershell",
+		sql: "sql",
+		html: "html",
+		htm: "html",
+		css: "css",
+		scss: "scss",
+		sass: "sass",
+		less: "less",
+		json: "json",
+		yaml: "yaml",
+		yml: "yaml",
+		toml: "toml",
+		xml: "xml",
+		md: "markdown",
+		markdown: "markdown",
+		dockerfile: "dockerfile",
+		makefile: "makefile",
+		cmake: "cmake",
+		lua: "lua",
+		perl: "perl",
+		r: "r",
+		scala: "scala",
+		clj: "clojure",
+		ex: "elixir",
+		exs: "elixir",
+		erl: "erlang",
+		hs: "haskell",
+		ml: "ocaml",
+		vim: "vim",
+		graphql: "graphql",
+		proto: "protobuf",
+		tf: "hcl",
+		hcl: "hcl",
+	};
+
+	return extToLang[ext];
+}
+
 export function getMarkdownTheme(): MarkdownTheme {
 	return {
 		heading: (text: string) => theme.fg("mdHeading", text),
@@ -646,6 +772,18 @@ export function getMarkdownTheme(): MarkdownTheme {
 		italic: (text: string) => theme.italic(text),
 		underline: (text: string) => theme.underline(text),
 		strikethrough: (text: string) => chalk.strikethrough(text),
+		highlightCode: (code: string, lang?: string): string[] => {
+			const opts = {
+				language: lang,
+				ignoreIllegals: true,
+				theme: getCliHighlightTheme(theme),
+			};
+			try {
+				return highlight(code, opts).split("\n");
+			} catch {
+				return code.split("\n").map((line) => theme.fg("mdCodeBlock", line));
+			}
+		},
 	};
 }