Merge pull request #3371 from Kilo-Org/cli-json-renderer

CLI: Add --json flag to complement --auto

Author: RSO

.changeset/happy-bananas-notice.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Add a --json flag to render a stream of JSON objects while in --auto mode

cli/src/cli.ts

@@ -19,6 +19,7 @@ export interface CLIOptions {
 	mode?: string
 	workspace?: string
 	ci?: boolean
+	json?: boolean
 	prompt?: string
 	timeout?: number
 }
@@ -161,6 +162,7 @@ export class CLI {
 					mode: this.options.mode || "code",
 					workspace: this.options.workspace || process.cwd(),
 					ci: this.options.ci || false,
+					json: this.options.json || false,
 					prompt: this.options.prompt || "",
 					...(this.options.timeout !== undefined && { timeout: this.options.timeout }),
 				},

cli/src/index.ts

@@ -27,6 +27,7 @@ program
 	.option("-m, --mode <mode>", `Set the mode of operation (${validModes.join(", ")})`)
 	.option("-w, --workspace <path>", "Path to the workspace directory", process.cwd())
 	.option("-a, --auto", "Run in autonomous mode (non-interactive)", false)
+	.option("-j, --json", "Output messages as JSON (requires --auto)", false)
 	.option("-t, --timeout <seconds>", "Timeout in seconds for autonomous mode (requires --auto)", parseInt)
 	.argument("[prompt]", "The prompt or command to execute")
 	.action(async (prompt, options) => {
@@ -48,6 +49,12 @@ program
 			process.exit(1)
 		}
 
+		// Validate that JSON mode requires autonomous mode
+		if (options.json && !options.auto) {
+			console.error("Error: --json option requires --auto flag to be enabled")
+			process.exit(1)
+		}
+
 		// Read from stdin if no prompt argument is provided and stdin is piped
 		let finalPrompt = prompt
 		if (!finalPrompt && !process.stdin.isTTY) {
@@ -92,6 +99,7 @@ program
 			mode: options.mode,
 			workspace: options.workspace,
 			ci: options.auto,
+			json: options.json,
 			prompt: finalPrompt,
 			timeout: options.timeout,
 		})

cli/src/ui/App.tsx

@@ -9,6 +9,7 @@ export interface AppOptions {
 	mode?: string
 	workspace?: string
 	ci?: boolean
+	json?: boolean
 	prompt?: string
 	timeout?: number
 }

cli/src/ui/JsonRenderer.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react"
+import { useAtomValue } from "jotai"
+import { mergedMessagesAtom, type UnifiedMessage } from "../state/atoms/ui.js"
+import { outputJsonMessage } from "./utils/jsonOutput.js"
+
+function getMessageKey(message: UnifiedMessage): string {
+	const baseKey = `${message.source}-${message.message.ts}`
+	const content = message.source === "cli" ? message.message.content : message.message.text || ""
+	const partial = message.message.partial ? "partial" : "complete"
+	return `${baseKey}-${content.length}-${partial}`
+}
+
+export function JsonRenderer() {
+	const messages = useAtomValue(mergedMessagesAtom)
+	const lastOutputKeysRef = useRef<string[]>([])
+
+	useEffect(() => {
+		const currentKeys = messages.map(getMessageKey)
+
+		for (let i = 0; i < messages.length; i++) {
+			const message = messages[i]
+			const currentKey = currentKeys[i]
+			const lastKey = lastOutputKeysRef.current[i]
+
+			if (!message || !currentKey) continue
+
+			if (currentKey !== lastKey) {
+				outputJsonMessage(message)
+			}
+		}
+
+		lastOutputKeysRef.current = currentKeys
+	}, [messages])
+
+	return null
+}

cli/src/ui/UI.tsx

@@ -11,6 +11,7 @@ import { setCIModeAtom } from "../state/atoms/ci.js"
 import { configValidationAtom } from "../state/atoms/config.js"
 import { addToHistoryAtom, resetHistoryNavigationAtom, exitHistoryModeAtom } from "../state/atoms/history.js"
 import { MessageDisplay } from "./messages/MessageDisplay.js"
+import { JsonRenderer } from "./JsonRenderer.js"
 import { CommandInput } from "./components/CommandInput.js"
 import { StatusBar } from "./components/StatusBar.js"
 import { StatusIndicator } from "./components/StatusIndicator.js"
@@ -201,6 +202,11 @@ export const UI: React.FC<UIAppProps> = ({ options, onExit }) => {
 		}
 	}, [configValidation])
 
+	// If JSON mode is enabled, use JSON renderer instead of UI components
+	if (options.json && options.ci) {
+		return <JsonRenderer />
+	}
+
 	return (
 		// Using stdout.rows causes layout shift during renders
 		<Box key={resetCounter} flexDirection="column">

cli/src/ui/utils/jsonOutput.ts

@@ -0,0 +1,70 @@
+/**
+ * JSON output utilities for CI mode
+ * Converts messages to JSON format for non-interactive output
+ */
+
+import type { UnifiedMessage } from "../../state/atoms/ui.js"
+import type { ExtensionChatMessage } from "../../types/messages.js"
+import type { CliMessage } from "../../types/cli.js"
+
+/**
+ * Convert a CLI message to JSON output format
+ */
+function formatCliMessage(message: CliMessage) {
+	const { ts, ...restOfMessage } = message
+	return {
+		timestamp: ts,
+		source: "cli",
+		...restOfMessage,
+	}
+}
+
+/**
+ * Convert an extension message to JSON output format
+ */
+function formatExtensionMessage(message: ExtensionChatMessage) {
+	const { ts, text, ...restOfMessage } = message
+
+	const output: Record<string, unknown> = {
+		timestamp: ts,
+		source: "extension",
+		...restOfMessage,
+	}
+
+	try {
+		output.metadata = JSON.parse(text || "")
+	} catch {
+		if (text) {
+			output.content = text
+		}
+	}
+
+	return output
+}
+
+/**
+ * Convert a unified message to JSON output format
+ */
+export function formatMessageAsJson(unifiedMessage: UnifiedMessage) {
+	if (unifiedMessage.source === "cli") {
+		return formatCliMessage(unifiedMessage.message)
+	} else {
+		return formatExtensionMessage(unifiedMessage.message)
+	}
+}
+
+/**
+ * Output a message as JSON to stdout
+ */
+export function outputJsonMessage(unifiedMessage: UnifiedMessage): void {
+	const jsonOutput = formatMessageAsJson(unifiedMessage)
+	console.log(JSON.stringify(jsonOutput))
+}
+
+/**
+ * Output multiple messages as JSON array to stdout
+ */
+export function outputJsonMessages(messages: UnifiedMessage[]): void {
+	const jsonOutputs = messages.map(formatMessageAsJson)
+	console.log(JSON.stringify(jsonOutputs))
+}