feat: add visual feedback for AI thinking and tool usage

- Show thinking messages by default (not just verbose mode)
- Add animated spinner during AI processing and tool execution
- Improve tool call display with contextual input formatting
- Add activity indicator for task transitions
- Use emoji symbols for better visual hierarchy (💭 🔧 ▶)

Signed-off-by: leocavalcante <[email protected]>

Author: leocavalcante

src/builder.ts

@@ -219,6 +219,7 @@ export class Builder {
 		const { providerID, modelID } = parseModel(model)
 
 		this.logger.logVerbose(`${phase} with ${model}...`)
+		this.logger.startSpinner(`${phase}...`)
 
 		const result = await this.client.session.prompt({
 			path: { id: sessionId },
@@ -228,6 +229,8 @@ export class Builder {
 			},
 		})
 
+		this.logger.stopSpinner()
+
 		if (!result.data) {
 			throw new Error("No response from OpenCode")
 		}
@@ -280,6 +283,7 @@ export class Builder {
 				// Stream text output in real-time
 				const text = properties?.text
 				if (typeof text === "string") {
+					this.logger.stopSpinner()
 					this.logger.stream(text)
 				}
 				break
@@ -289,13 +293,16 @@ export class Builder {
 				const name = properties?.name
 				const input = properties?.input
 				if (typeof name === "string") {
+					this.logger.stopSpinner()
 					this.logger.streamEnd()
 					this.logger.toolCall(name, input)
+					this.logger.startSpinner(`Running ${name}...`)
 				}
 				break
 			}
 
 			case "message.part.tool.result": {
+				this.logger.stopSpinner()
 				const output = properties?.output
 				if (typeof output === "string" && output.length > 0) {
 					this.logger.toolResult(output)
@@ -306,12 +313,14 @@ export class Builder {
 			case "message.part.thinking": {
 				const text = properties?.text
 				if (typeof text === "string") {
+					this.logger.stopSpinner()
 					this.logger.thinking(text)
 				}
 				break
 			}
 
 			case "message.complete": {
+				this.logger.stopSpinner()
 				this.logger.streamEnd()
 				const usage = properties?.usage as { input?: number; output?: number } | undefined
 				if (usage?.input !== undefined && usage?.output !== undefined) {
@@ -321,6 +330,7 @@ export class Builder {
 			}
 
 			case "message.error": {
+				this.logger.stopSpinner()
 				const message = properties?.message
 				if (typeof message === "string") {
 					this.logger.logError(message)
@@ -331,6 +341,7 @@ export class Builder {
 			case "session.complete":
 			case "session.abort":
 				// Session ended
+				this.logger.stopSpinner()
 				this.logger.logVerbose(`Session ${type}`)
 				break
 

src/logger.ts

@@ -11,20 +11,38 @@ const ANSI = {
 	reset: "\x1b[0m",
 	bold: "\x1b[1m",
 	dim: "\x1b[2m",
+	italic: "\x1b[3m",
 	red: "\x1b[31m",
 	green: "\x1b[32m",
 	yellow: "\x1b[33m",
 	blue: "\x1b[34m",
+	magenta: "\x1b[35m",
 	cyan: "\x1b[36m",
+	gray: "\x1b[90m",
 	clearLine: "\r\x1b[K",
 }
 
+/** Symbols for visual indicators */
+const SYMBOLS = {
+	thinking: "💭",
+	tool: "🔧",
+	result: "  →",
+	success: "✓",
+	error: "✗",
+	arrow: "▶",
+	spinner: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+}
+
 export class Logger {
 	private paths: Paths
 	private verbose: boolean
 	private cycleLogFile?: string
 	private logBuffer: string[] = []
 	private readonly BUFFER_SIZE = 2048
+	private spinnerInterval?: ReturnType<typeof setInterval>
+	private spinnerIndex = 0
+	private currentSpinnerMessage = ""
+	private isSpinning = false
 
 	constructor(paths: Paths, verbose: boolean) {
 		this.paths = paths
@@ -145,28 +163,62 @@ export class Logger {
 	 * Log a tool call
 	 */
 	toolCall(name: string, input?: unknown): void {
-		const inputStr = input ? `: ${JSON.stringify(input)}` : ""
-		const truncated = inputStr.length > 100 ? `${inputStr.slice(0, 100)}...` : inputStr
-		console.log(`${ANSI.cyan}[TOOL] ${name}${truncated}${ANSI.reset}`)
+		this.stopSpinner()
+		const inputStr = input ? this.formatToolInput(input) : ""
+		console.log(
+			`${ANSI.cyan}${SYMBOLS.tool} ${ANSI.bold}${name}${ANSI.reset}${ANSI.dim}${inputStr}${ANSI.reset}`,
+		)
 		this.writeToBuffer(this.formatForFile(`[TOOL] ${name}${inputStr}`))
 	}
 
+	/**
+	 * Format tool input for display
+	 */
+	private formatToolInput(input: unknown): string {
+		if (typeof input === "string") {
+			return input.length > 80 ? ` ${input.slice(0, 80)}...` : ` ${input}`
+		}
+		if (typeof input === "object" && input !== null) {
+			const obj = input as Record<string, unknown>
+			// Show key parameters for common tools
+			if ("filePath" in obj) return ` ${obj.filePath}`
+			if ("path" in obj) return ` ${obj.path}`
+			if ("pattern" in obj) return ` ${obj.pattern}`
+			if ("command" in obj) {
+				const cmd = String(obj.command)
+				return cmd.length > 60 ? ` ${cmd.slice(0, 60)}...` : ` ${cmd}`
+			}
+			if ("query" in obj) return ` "${obj.query}"`
+			// Fallback: stringify and truncate
+			const str = JSON.stringify(input)
+			return str.length > 80 ? ` ${str.slice(0, 80)}...` : ` ${str}`
+		}
+		return ""
+	}
+
 	/**
 	 * Log a tool result
 	 */
 	toolResult(output: string): void {
-		const truncated = output.length > 200 ? `${output.slice(0, 200)}...` : output
-		console.log(`${ANSI.dim}[RESULT] ${truncated}${ANSI.reset}`)
+		// Only show tool results in verbose mode - they can be noisy
+		if (this.verbose) {
+			const truncated = output.length > 200 ? `${output.slice(0, 200)}...` : output
+			const firstLine = truncated.split("\n")[0] || truncated
+			console.log(`${ANSI.gray}${SYMBOLS.result} ${firstLine}${ANSI.reset}`)
+		}
 		this.writeToBuffer(this.formatForFile(`[RESULT] ${output}`))
 	}
 
 	/**
-	 * Log thinking/reasoning (only in verbose mode to console)
+	 * Log thinking/reasoning - shown by default for visibility
 	 */
 	thinking(text: string): void {
-		if (this.verbose) {
-			console.log(`${ANSI.dim}[THINKING] ${text}${ANSI.reset}`)
-		}
+		this.stopSpinner()
+		// Show thinking in a visually distinct way
+		const lines = text.split("\n")
+		const firstLine = lines[0] || text
+		const display = firstLine.length > 100 ? `${firstLine.slice(0, 100)}...` : firstLine
+		console.log(`${ANSI.magenta}${SYMBOLS.thinking} ${ANSI.italic}${display}${ANSI.reset}`)
 		this.writeToBuffer(this.formatForFile(`[THINKING] ${text}`))
 	}
 
@@ -181,6 +233,60 @@ export class Logger {
 		this.writeToBuffer(this.formatForFile(msg))
 	}
 
+	/**
+	 * Start a spinner with a message (for long-running operations)
+	 */
+	startSpinner(message: string): void {
+		if (this.isSpinning) {
+			this.stopSpinner()
+		}
+
+		this.isSpinning = true
+		this.currentSpinnerMessage = message
+		this.spinnerIndex = 0
+
+		this.spinnerInterval = setInterval(() => {
+			const frame = SYMBOLS.spinner[this.spinnerIndex % SYMBOLS.spinner.length]
+			process.stdout.write(
+				`${ANSI.clearLine}${ANSI.cyan}${frame}${ANSI.reset} ${this.currentSpinnerMessage}`,
+			)
+			this.spinnerIndex++
+		}, 80)
+	}
+
+	/**
+	 * Update spinner message without stopping it
+	 */
+	updateSpinner(message: string): void {
+		if (this.isSpinning) {
+			this.currentSpinnerMessage = message
+		}
+	}
+
+	/**
+	 * Stop the spinner and clear the line
+	 */
+	stopSpinner(): void {
+		if (this.spinnerInterval) {
+			clearInterval(this.spinnerInterval)
+			this.spinnerInterval = undefined
+		}
+		if (this.isSpinning) {
+			process.stdout.write(ANSI.clearLine)
+			this.isSpinning = false
+		}
+	}
+
+	/**
+	 * Log activity indicator (brief visual feedback)
+	 */
+	activity(action: string, detail?: string): void {
+		this.stopSpinner()
+		const detailStr = detail ? ` ${ANSI.dim}${detail}${ANSI.reset}` : ""
+		console.log(`${ANSI.blue}${SYMBOLS.arrow} ${action}${detailStr}${ANSI.reset}`)
+		this.writeToBuffer(this.formatForFile(`[ACTIVITY] ${action} ${detail || ""}`))
+	}
+
 	/**
 	 * Format message for file output with timestamp
 	 */

src/loop.ts

@@ -112,7 +112,7 @@ export async function runLoop(config: Config): Promise<void> {
 		// Cleanup
 		logger.flush()
 		await builder.shutdown()
-		logger.say("Opencoder stopped.")
+		logger.say("OpenCoder stopped.")
 	}
 }
 
@@ -123,7 +123,7 @@ function logStartupInfo(logger: Logger, config: Config): void {
 	// Get version from build-time define or package.json
 	const version = typeof VERSION !== "undefined" ? VERSION : "1.0.0"
 
-	logger.say(`\nOpencoder v${version}`)
+	logger.say(`\nOpenCoder v${version}`)
 	logger.say(`Project: ${config.projectDir}`)
 	logger.say(`Plan model: ${config.planModel}`)
 	logger.say(`Build model: ${config.buildModel}`)
@@ -277,6 +277,7 @@ async function runBuildPhase(
 	if (shutdownRequested) return
 
 	// Build the task
+	logger.activity("Building task", `${state.currentTaskNum}/${tasks.length}`)
 	const result = await builder.runTask(
 		nextTask.description,
 		state.cycle,