opencode-miniterm 1.0.2 → 1.0.4

package/AGENTS.md

@@ -1,8 +1,9 @@
-# OpenCode MiniTerm - Agent Guidelines
+# OpenCode Miniterm - Agent Guidelines
 
 ## Build & Development Commands
 
 ### Run the application
+
 ```bash
 bun run src/index.ts
 # Or just:
@@ -10,46 +11,55 @@ bun src/index.ts
 ```
 
 ### Build (when bundler is added)
+
 ```bash
 bun build src/index.ts --outdir dist
 ```
 
 ### Testing
+
 No test framework is currently configured. Add one of these to package.json:
+
 - **Bun Test**: `bun test` (recommended - built-in, fast)
 - **Jest**: `npm test` or `bun run test`
 - **Vitest**: `vitest`
 
 To run a single test (once configured):
+
 - Bun Test: `bun test --test-name-pattern "testName"`
 - Jest: `npm test -- testName`
 - Vitest: `vitest run testName`
 
 ### Linting & Formatting (recommended additions)
+
 Install and configure these tools:
+
 ```bash
 bun add -d eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier
 ```
 
 Commands to add to package.json:
+
 ```json
 {
-  "lint": "eslint src --ext .ts",
-  "lint:fix": "eslint src --ext .ts --fix",
-  "format": "prettier --write \"src/**/*.ts\"",
-  "format:check": "prettier --check \"src/**/*.ts\"",
-  "typecheck": "tsc --noEmit"
+	"lint": "eslint src --ext .ts",
+	"lint:fix": "eslint src --ext .ts --fix",
+	"format": "prettier --write \"src/**/*.ts\"",
+	"format:check": "prettier --check \"src/**/*.ts\"",
+	"typecheck": "tsc --noEmit"
 }
 ```
 
 ## Code Style Guidelines
 
 ### TypeScript Configuration
+
 - Use strict mode: `"strict": true` in tsconfig.json
 - Target ES2022+ for modern Node/Bun features
 - Use `moduleResolution: "bundler"` for Bun compatibility
 
 ### Imports
+
 - Use ES6 imports (ESM): `import { something } from 'module'`
 - Group imports in this order:
   1. Node/Bun built-ins
@@ -59,6 +69,7 @@ Commands to add to package.json:
 - Avoid default exports; prefer named exports for better tree-shaking
 
 ### Formatting
+
 - Use 2 spaces for indentation
 - Use single quotes for strings
 - Use semicolons at end of statements
@@ -67,6 +78,7 @@ Commands to add to package.json:
 - Spaces around operators: `a = b + c` not `a=b+c`
 
 ### Types & Type Safety
+
 - Always provide explicit return types for functions
 - Use `interface` for object shapes, `type` for unions/primitives
 - Avoid `any`; use `unknown` when type is truly unknown
@@ -74,6 +86,7 @@ Commands to add to package.json:
 - Leverage Bun's built-in type definitions (from `bun-types`)
 
 ### Naming Conventions
+
 - **Files**: kebab-case: `my-service.ts`
 - **Variables/Functions**: camelCase: `myFunction`
 - **Classes**: PascalCase: `MyService`
@@ -82,14 +95,18 @@ Commands to add to package.json:
 - **Types/Interfaces**: PascalCase, often with suffixes: `UserService`, `ConfigOptions`
 
 ### Error Handling
+
 - Use try/catch for async operations
 - Create custom error classes for domain-specific errors:
   ```ts
   class TerminalError extends Error {
-    constructor(message: string, public code: string) {
-      super(message);
-      this.name = 'TerminalError';
-    }
+  	constructor(
+  		message: string,
+  		public code: string,
+  	) {
+  		super(message);
+  		this.name = "TerminalError";
+  	}
   }
   ```
 - Always include error context in error messages
@@ -97,24 +114,28 @@ Commands to add to package.json:
 - Never swallow errors silently
 
 ### Async/Promise Handling
+
 - Use async/await over .then()/.catch()
 - Handle promise rejections: `process.on('unhandledRejection')`
 - Use Bun's optimized APIs where available (e.g., `Bun.file()`)
 - Implement timeouts for network requests
 
 ### Code Organization
+
 - Structure by feature/domain, not by file type
 - Keep files focused: one responsibility per file
 - Export at file end; avoid export分散
 - Use barrel files (`index.ts`) for cleaner imports
 
 ### Comments
+
 - Use JSDoc for public APIs: `/** @description ... */`
 - Comment WHY, not WHAT
 - Keep comments current with code changes
 - Avoid inline comments for obvious logic
 
 ### Performance (Bun-Specific)
+
 - Leverage Bun's fast I/O: `Bun.write()`, `Bun.file()`
 - Use `TextEncoder`/`TextDecoder` for encoding
 - Prefer native over polyfills
@@ -123,6 +144,7 @@ Commands to add to package.json:
 ## Project Context
 
 This is an alternative terminal UI for OpenCode. Focus on:
+
 - Fast, responsive terminal rendering
 - Clean CLI UX with good error messages
 - Efficient resource usage (memory/CPU)
@@ -138,6 +160,7 @@ This is an alternative terminal UI for OpenCode. Focus on:
 ## OpenCode Server Integration
 
 ### Starting the Server
+
 - Use `opencode serve` to start a headless HTTP server (not `opencode server`)
 - Default URL: `http://127.0.0.1:4096` (port may vary, can be 0/random)
 - Server requires 2-3 seconds to initialize before accepting requests
@@ -145,6 +168,7 @@ This is an alternative terminal UI for OpenCode. Focus on:
 - Always handle SIGINT to properly shut down the server process
 
 ### Authentication
+
 - Server may require HTTP Basic Auth if `OPENCODE_SERVER_PASSWORD` is set
 - Username: `OPENCODE_SERVER_USERNAME` env var (default: 'opencode')
 - Password: `OPENCODE_SERVER_PASSWORD` env var (required if server has password set)
@@ -153,6 +177,7 @@ This is an alternative terminal UI for OpenCode. Focus on:
 - Check env vars at startup: `echo $OPENCODE_SERVER_PASSWORD` to verify it's set
 
 ### Creating Sessions
+
 ```ts
 POST /session
 Headers: { "Content-Type": "application/json", "Authorization": "Basic <creds>" }
@@ -161,14 +186,17 @@ Response: { id: string, title?: string, ... }
 ```
 
 ### Getting Available Models
+
 ```ts
 GET /config/providers
 Headers: { "Authorization": "Basic <creds>" }
 Response: { providers: Provider[], default: { [key: string]: string } }
 ```
+
 Note: `/models` endpoint returns HTML documentation, not JSON. Use `/config/providers` for programmatic access.
 
 ### Sending Messages
+
 ```ts
 POST /session/:id/message
 Headers: { "Content-Type": "application/json", "Authorization": "Basic <creds>" }
@@ -183,6 +211,7 @@ Response: { info: Message, parts: Part[] }
 ```
 
 ### Getting Session Messages
+
 ```ts
 GET /session/:id/message
 Headers: { "Authorization": "Basic <creds>" }
@@ -190,20 +219,24 @@ Response: { info: Message, parts: Part[] }[]
 ```
 
 ### Undoing Messages (Revert)
+
 ```ts
 POST /session/:id/revert
 Headers: { "Content-Type": "application/json", "Authorization": "Basic <creds>" }
 Body: { messageID: string, partID?: string }
 Response: { id: string, revert: { messageID, snapshot, diff } }
 ```
+
 Typically used to undo the last assistant message by fetching messages first, then reverting the last one.
 
 **IMPORTANT**: The `model` field is required when sending messages. Without it, the request will hang indefinitely. Get available models from `GET /config/providers` or `GET /models`. Common models:
+
 - `big-pickle` (opencode provider) - default, high quality
 - `glm-5-free` (opencode provider) - free GLM model
 - `gpt-5-nano` (opencode provider) - fast GPT model
 
 ### Response Format
+
 - Response has `{ info, parts }` structure
 - Parts can be: `step-start`, `reasoning`, `text`, `step-finish`, `tool_use`, `tool_result`
 - `step-start` - Indicates beginning of a thinking/processing step
@@ -215,6 +248,7 @@ Typically used to undo the last assistant message by fetching messages first, th
 - Display reasoning and text parts to the user for transparency
 
 ### Server-Sent Events (SSE)
+
 - Connect to event stream at `/event` for real-time updates
 - Events include: `message.part.updated`, `session.status`, `session.updated`, `message.updated`, `session.diff`, `session.idle`
 - Event structure: `{ type: string, properties: {...} }`
@@ -224,6 +258,7 @@ Typically used to undo the last assistant message by fetching messages first, th
 - Delta updates allow streaming reasoning and text for better UX
 
 ### Error Handling
+
 - Server returns 401 Unauthorized when authentication is missing/invalid
 - Handle connection errors (server may not be ready yet)
 - Always parse error text from response for debugging
@@ -240,4 +275,4 @@ Typically used to undo the last assistant message by fetching messages first, th
 - Never commit API keys, tokens, or secrets
 - Validate all user inputs
 - Sanitize terminal output to prevent injection
-- Use environment variables for configuration
+- Use environment variables for configuration

package/bun.lock

@@ -47,7 +47,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@opencode-ai/sdk": ["@opencode-ai/sdk@1.2.14", "", {}, "sha512-nPkWAmzgPJYyfCJAV4NG7HTfN/iuO3B6fv8sT26NhPiR+EqD9i8sh4X1LwI7wEbbMOwWOX1PhrssW6gXQOOQZQ=="],
+    "@opencode-ai/sdk": ["@opencode-ai/sdk@1.2.15", "", {}, "sha512-NUJNlyBCdZ4R0EBLjJziEQOp2XbRPJosaMcTcWSWO5XJPKGUpz0u8ql+5cR8K+v2RJ+hp2NobtNwpjEYfe6BRQ=="],
 
     "@trivago/prettier-plugin-sort-imports": ["@trivago/prettier-plugin-sort-imports@6.0.2", "", { "dependencies": { "@babel/generator": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "javascript-natural-sort": "^0.7.1", "lodash-es": "^4.17.21", "minimatch": "^9.0.0", "parse-imports-exports": "^0.2.4" }, "peerDependencies": { "@vue/compiler-sfc": "3.x", "prettier": "2.x - 3.x", "prettier-plugin-ember-template-tag": ">= 2.0.0", "prettier-plugin-svelte": "3.x", "svelte": "4.x || 5.x" }, "optionalPeers": ["@vue/compiler-sfc", "prettier-plugin-ember-template-tag", "prettier-plugin-svelte", "svelte"] }, "sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA=="],
 
@@ -71,7 +71,7 @@
 
     "@typescript/native-preview-win32-x64": ["@typescript/native-preview-win32-x64@7.0.0-dev.20260122.2", "", { "os": "win32", "cpu": "x64" }, "sha512-TJH+sSn7vxcGvaSm+fhcpW//dfSGBZGHrxoy0edAbE7UpFf8ub/3cILL5V1pCsF7w3aLNNgVKRpUkowdUgYcPQ=="],
 
-    "allmark": ["allmark@1.0.0", "", { "bin": { "allmark": "dist/bin/index.mjs" } }, "sha512-Stsjcu2cLPBwPlbfba/iMaDGVhJcm6pYU8hNtyTIlYHhckBvCOtiHhyBujl6PltcFnpvG0VQpwyBXWjwY1e6ZA=="],
+    "allmark": ["allmark@1.0.1", "", { "bin": { "allmark": "dist/bin/index.mjs" } }, "sha512-r4eeGshglWb3G99D4anWSPpieZ9kw9zXHeGd6NXjBbsbq+aCq/7W9hkrqYq0ywlf43ync2KKfmjeTHJum0AHEQ=="],
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencode-miniterm",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "A small front-end terminal UI for OpenCode",
 	"main": "src/index.ts",
 	"bin": {
@@ -28,7 +28,7 @@
 		"typescript": "^5"
 	},
 	"dependencies": {
-		"@opencode-ai/sdk": "^1.2.14",
-		"allmark": "^1.0.0"
+		"@opencode-ai/sdk": "^1.2.15",
+		"allmark": "^1.0.1"
 	}
 }

package/src/ansi.ts

@@ -9,12 +9,16 @@ export const CURSOR_UP = (lines: number) => `\x1b[${lines}A`;
 export const RESET = "\x1b[0m";
 export const BRIGHT_WHITE = "\x1b[97m";
 export const BRIGHT_BLACK = "\x1b[90m";
+export const BOLD_BRIGHT_BLACK = "\x1b[1;90m";
 export const RED = "\x1b[31m";
 export const GREEN = "\x1b[32m";
 export const BLUE = "\x1b[34m";
 export const CYAN = "\x1b[36m";
 export const BOLD_MAGENTA = "\x1b[1;35m";
 export const STRIKETHROUGH = "\x1b[9m";
+export const WHITE_BACKGROUND = "\x1b[47m";
+export const BRIGHT_BLACK_BACKGROUND = "\x1b[0;100m";
+export const BOLD_BLACK = "\x1b[1;30m";
 export const ANSI_CODE_PATTERN = /^\x1b\[[0-9;]*m/;
 
 export function stripAnsiCodes(str: string): string {

package/src/commands/page.ts

@@ -1,5 +1,6 @@
 import type { OpencodeClient } from "@opencode-ai/sdk";
 import type { Key } from "node:readline";
+import * as ansi from "../ansi";
 import type { State } from "../index";
 import { wrapText } from "../render";
 import type { Command } from "../types";
@@ -24,18 +25,16 @@ function run(client: OpencodeClient, state: State): void {
 		if (!part || !part.text.trim()) continue;
 
 		if (part.title === "thinking") {
-			pages.push(`💭 \x1b[90m${part.text.trimStart()}\x1b[0m`);
+			pages.push(`💭 ${ansi.BRIGHT_BLACK}${part.text.trimStart()}${ansi.RESET}`);
 		} else if (part.title === "response") {
-			pages.push(`💬 ${part.text.trimStart()}`);
-		} else if (part.title === "tool") {
-			pages.push(part.text);
-		} else if (part.title === "files") {
+			pages.push(`💭 ${part.text.trimStart()}`);
+		} else {
 			pages.push(part.text);
 		}
 	}
 
 	if (pages.length === 0) {
-		console.log("\n\x1b[90mNo parts to display yet.\x1b[0m\n");
+		console.log(`${ansi.BRIGHT_BLACK}No parts to display yet.${ansi.RESET}\n`);
 		return;
 	}
 

package/src/index.ts

@@ -50,6 +50,7 @@ let client: ReturnType<typeof createOpencodeClient>;
 
 let processing = true;
 let retryInterval: ReturnType<typeof setInterval> | null = null;
+let isRequestActive = false;
 
 interface AccumulatedPart {
 	key: string;
@@ -134,6 +135,8 @@ async function main() {
 
 		await updateSessionTitle();
 
+		const sessionHistory = await loadSessionHistory();
+
 		const activeDisplay = await getActiveDisplay(client);
 
 		process.stdout.write(`${ansi.CLEAR_SCREEN_UP}${ansi.CLEAR_FROM_CURSOR}`);
@@ -158,11 +161,13 @@ async function main() {
 		let inputBuffer = "";
 		let cursorPosition = 0;
 		let completions: string[] = [];
-		let history: string[] = [];
-		let historyIndex = -1;
+		let history: string[] = sessionHistory;
+		let historyIndex = history.length;
 		let selectedCompletion = 0;
 		let showCompletions = false;
 		let completionCycling = false;
+		let lastSpaceTime = 0;
+		let currentInputBuffer: string | null = null;
 
 		const getCompletions = async (text: string): Promise<string[]> => {
 			if (text.startsWith("/")) {
@@ -249,6 +254,7 @@ async function main() {
 			showCompletions = false;
 			completionCycling = false;
 			completions = [];
+			currentInputBuffer = null;
 
 			if (input) {
 				if (history[history.length - 1] !== input) {
@@ -281,13 +287,16 @@ async function main() {
 						return;
 					}
 
+					isRequestActive = true;
 					process.stdout.write(ansi.CURSOR_HIDE);
 					startAnimation();
 					if (isLoggingEnabled()) {
 						console.log(`📝 ${ansi.BRIGHT_BLACK}Logging to ${getLogDir()}\n${ansi.RESET}`);
 					}
 					await sendMessage(state.sessionID, input);
+					isRequestActive = false;
 				} catch (error: any) {
+					isRequestActive = false;
 					if (error.message !== "Request cancelled") {
 						stopAnimation();
 						console.error("Error:", error.message);
@@ -310,11 +319,17 @@ async function main() {
 
 			switch (key.name) {
 				case "up": {
+					if (historyIndex === history.length) {
+						currentInputBuffer = inputBuffer;
+					}
 					if (history.length > 0) {
 						if (historyIndex > 0) {
 							historyIndex--;
+							inputBuffer = history[historyIndex]!;
+						} else {
+							historyIndex = Math.max(-1, historyIndex - 1);
+							inputBuffer = "";
 						}
-						inputBuffer = history[historyIndex]!;
 						cursorPosition = inputBuffer.length;
 						renderLine();
 					}
@@ -324,9 +339,11 @@ async function main() {
 					if (history.length > 0) {
 						if (historyIndex < history.length - 1) {
 							historyIndex++;
+							inputBuffer = history[historyIndex]!;
 						} else {
 							historyIndex = history.length;
-							inputBuffer = "";
+							inputBuffer = currentInputBuffer || "";
+							currentInputBuffer = null;
 						}
 						cursorPosition = inputBuffer.length;
 						renderLine();
@@ -343,13 +360,21 @@ async function main() {
 					return;
 				}
 				case "escape": {
-					if (state.sessionID) {
-						client.session.abort({ path: { id: state.sessionID } }).catch(() => {});
+					if (isRequestActive) {
+						if (state.sessionID) {
+							client.session.abort({ path: { id: state.sessionID } }).catch(() => {});
+						}
+						stopAnimation();
+						process.stdout.write(ansi.CURSOR_SHOW);
+						process.stdout.write(`\r  ${ansi.BRIGHT_BLACK}Cancelled request${ansi.RESET}\n`);
+						writePrompt();
+						isRequestActive = false;
+					} else {
+						inputBuffer = "";
+						cursorPosition = 0;
+						currentInputBuffer = null;
+						renderLine();
 					}
-					stopAnimation();
-					process.stdout.write(ansi.CURSOR_SHOW);
-					process.stdout.write(`\r${ansi.BRIGHT_BLACK}Cancelled request${ansi.RESET}\n`);
-					writePrompt();
 					return;
 				}
 				case "return": {
@@ -361,6 +386,7 @@ async function main() {
 						inputBuffer =
 							inputBuffer.slice(0, cursorPosition - 1) + inputBuffer.slice(cursorPosition);
 						cursorPosition--;
+						currentInputBuffer = null;
 					}
 					break;
 				}
@@ -368,6 +394,7 @@ async function main() {
 					if (cursorPosition < inputBuffer.length) {
 						inputBuffer =
 							inputBuffer.slice(0, cursorPosition) + inputBuffer.slice(cursorPosition + 1);
+						currentInputBuffer = null;
 					}
 					break;
 				}
@@ -389,9 +416,30 @@ async function main() {
 				}
 				default: {
 					if (str) {
-						inputBuffer =
-							inputBuffer.slice(0, cursorPosition) + str + inputBuffer.slice(cursorPosition);
-						cursorPosition += str.length;
+						if (str === " ") {
+							const now = Date.now();
+							if (
+								now - lastSpaceTime < 500 &&
+								cursorPosition > 0 &&
+								inputBuffer[cursorPosition - 1] === " "
+							) {
+								inputBuffer =
+									inputBuffer.slice(0, cursorPosition - 1) +
+									". " +
+									inputBuffer.slice(cursorPosition);
+								cursorPosition += 1;
+							} else {
+								inputBuffer =
+									inputBuffer.slice(0, cursorPosition) + str + inputBuffer.slice(cursorPosition);
+								cursorPosition += str.length;
+							}
+							lastSpaceTime = now;
+						} else {
+							inputBuffer =
+								inputBuffer.slice(0, cursorPosition) + str + inputBuffer.slice(cursorPosition);
+							cursorPosition += str.length;
+						}
+						currentInputBuffer = null;
 					}
 				}
 			}
@@ -459,6 +507,34 @@ async function updateSessionTitle(): Promise<void> {
 	}
 }
 
+async function loadSessionHistory(): Promise<string[]> {
+	try {
+		const result = await client.session.messages({
+			path: { id: state.sessionID },
+		});
+		if (result.error || !result.data) {
+			return [];
+		}
+
+		const history: string[] = [];
+		for (const msg of result.data) {
+			if (msg.info.role === "user") {
+				const textParts = msg.parts
+					.filter((p: Part) => p.type === "text")
+					.map((p: Part) => (p as any).text || "")
+					.filter(Boolean);
+				const text = textParts.join("").trim();
+				if (text && !text.startsWith("/")) {
+					history.push(text);
+				}
+			}
+		}
+		return history;
+	} catch {
+		return [];
+	}
+}
+
 async function startEventListener(): Promise<void> {
 	try {
 		const { stream } = await client.event.subscribe({
@@ -525,7 +601,7 @@ async function sendMessage(sessionID: string, message: string) {
 
 		const duration = Date.now() - requestStartTime;
 		const durationText = formatDuration(duration);
-		console.log(`${ansi.BRIGHT_BLACK}Completed in ${durationText}${ansi.RESET}\n`);
+		console.log(`  ${ansi.BRIGHT_BLACK}Completed in ${durationText}${ansi.RESET}\n`);
 
 		writePrompt();
 
@@ -589,6 +665,7 @@ async function processEvent(event: Event): Promise<void> {
 		case "session.status":
 			if (event.type === "session.status" && event.properties.status.type === "idle") {
 				stopAnimation();
+				isRequestActive = false;
 				process.stdout.write(ansi.CURSOR_SHOW);
 				if (retryInterval) {
 					clearInterval(retryInterval);
@@ -697,7 +774,7 @@ async function processReasoning(part: Part) {
 
 	const text = (part as any).text || "";
 	const cleanText = ansi.stripAnsiCodes(text.trimStart());
-	await writeToLog(`💭 Thinking...\n\n${cleanText}\n\n`);
+	await writeToLog(`Thinking:\n\n${cleanText}\n\n`);
 
 	render(state);
 }
@@ -713,7 +790,7 @@ async function processText(part: Part) {
 
 	const text = (part as any).text || "";
 	const cleanText = ansi.stripAnsiCodes(text.trimStart());
-	await writeToLog(`💬 Response:\n\n${cleanText}\n\n`);
+	await writeToLog(`Response:\n\n${cleanText}\n\n`);
 
 	render(state);
 }
@@ -722,7 +799,7 @@ async function processToolUse(part: Part) {
 	const toolPart = part as ToolPart;
 	const toolName = toolPart.tool || "unknown";
 	const toolInput = toolPart.state.input["description"] || toolPart.state.input["filePath"] || {};
-	const toolText = `🔧 ${toolName}: ${ansi.BRIGHT_BLACK}${toolInput}${ansi.RESET}`;
+	const toolText = `${ansi.BRIGHT_BLACK}$${ansi.RESET} ${toolName}: ${ansi.BRIGHT_BLACK}${toolInput}${ansi.RESET}`;
 
 	if (state.accumulatedResponse[state.accumulatedResponse.length - 1]?.title === "tool") {
 		state.accumulatedResponse[state.accumulatedResponse.length - 1]!.text = toolText;
@@ -731,7 +808,7 @@ async function processToolUse(part: Part) {
 	}
 
 	const cleanToolText = ansi.stripAnsiCodes(toolText);
-	await writeToLog(`${cleanToolText}\n\n`);
+	await writeToLog(`$ ${cleanToolText}\n\n`);
 
 	render(state);
 }
@@ -746,28 +823,26 @@ function processDelta(partID: string, delta: string) {
 }
 
 async function processDiff(diff: FileDiff[]) {
-	let hasChanges = false;
 	const parts: string[] = [];
 	for (const file of diff) {
-		const status = !file.before ? "added" : !file.after ? "deleted" : "modified";
-		const statusIcon = status === "added" ? "A" : status === "modified" ? "M" : "D";
-		const statusLabel =
-			status === "added" ? "added" : status === "modified" ? "modified" : "deleted";
-		const addStr = file.additions > 0 ? `${ansi.GREEN}+${file.additions}${ansi.RESET}` : "";
-		const delStr = file.deletions > 0 ? `${ansi.RED}-${file.deletions}${ansi.RESET}` : "";
-		const stats = [addStr, delStr].filter(Boolean).join(" ");
-		const line = `  ${ansi.BLUE}${statusIcon}${ansi.RESET} ${file.file} (${statusLabel}) ${stats}`;
-		parts.push(line);
-
 		const newAfter = file.after ?? "";
 		const oldAfter = state.lastFileAfter.get(file.file);
 		if (newAfter !== oldAfter) {
-			hasChanges = true;
+			const status = !file.before ? "added" : !file.after ? "deleted" : "modified";
+			const statusIcon = status === "added" ? "A" : status === "modified" ? "M" : "D";
+			const statusLabel =
+				status === "added" ? "added" : status === "modified" ? "modified" : "deleted";
+			const addStr = file.additions > 0 ? `${ansi.GREEN}+${file.additions}${ansi.RESET}` : "";
+			const delStr = file.deletions > 0 ? `${ansi.RED}-${file.deletions}${ansi.RESET}` : "";
+			const stats = [addStr, delStr].filter(Boolean).join(" ");
+			const line = `${ansi.BLUE}${statusIcon}${ansi.RESET} ${file.file} (${statusLabel}) ${stats}`;
+			parts.push(line);
+
 			state.lastFileAfter.set(file.file, newAfter);
 		}
 	}
 
-	if (hasChanges) {
+	if (parts.length > 0) {
 		state.accumulatedResponse.push({ key: "diff", title: "files", text: parts.join("\n") });
 
 		const diffText = ansi.stripAnsiCodes(parts.join("\n"));
@@ -783,15 +858,11 @@ async function processTodos(todos: Todo[]) {
 	for (let todo of todos) {
 		let todoText = "";
 		if (todo.status === "completed") {
-			todoText += ansi.STRIKETHROUGH;
 			todoText += "- [✓] ";
 		} else {
 			todoText += "- [ ] ";
 		}
 		todoText += todo.content;
-		if (todo.status === "completed") {
-			todoText += ansi.RESET;
-		}
 		todoListText += todoText + "\n";
 	}
 

package/src/render.ts

@@ -12,11 +12,7 @@ export function render(state: State, details = false): void {
 	}
 
 	// Only show the last (i.e. active) thinking part
-	// Only show the last (i.e. active) tool use
-	// Only show the last files part between parts
 	let foundPart = false;
-	let foundFiles = false;
-	let foundTodo = false;
 	for (let i = state.accumulatedResponse.length - 1; i >= 0; i--) {
 		const part = state.accumulatedResponse[i];
 		if (!part) continue;
@@ -26,41 +22,52 @@ export function render(state: State, details = false): void {
 		}
 
 		if (part.title === "thinking") {
+			if (part.active === false) {
+				// We've already checked all the parts before here
+				break;
+			}
 			part.active = !foundPart;
 			foundPart = true;
-		} else if (part.title === "tool") {
-			part.active = !foundPart;
-		} else if (part.title === "files") {
-			part.active = !foundFiles;
-			foundFiles = true;
-		} else if (part.title === "todo") {
-			part.active = !foundTodo;
-			foundTodo = true;
-		} else {
+		} else if (part.title === "response") {
+			part.active = true;
 			foundPart = true;
+		} else {
 			part.active = true;
 		}
 	}
 
+	let lastPartWasTool = false;
 	for (let i = 0; i < state.accumulatedResponse.length; i++) {
 		const part = state.accumulatedResponse[i];
 		if (!part || !part.active) continue;
 		if (!part.text.trim()) continue;
 
 		if (part.title === "thinking") {
+			// Show max 10 thinking lines
 			const partText = details ? part.text.trimStart() : lastThinkingLines(part.text.trimStart());
-			output += `💭 ${ansi.BRIGHT_BLACK}${partText}${ansi.RESET}\n\n`;
+			output += "<ocmt-thinking>\n";
+			output += `💭 ${partText}\n\n`;
+			output += "</ocmt-thinking>\n";
 		} else if (part.title === "response") {
+			// Show all response lines
 			const doc = parse(part.text.trimStart(), gfm);
 			const partText = renderToConsole(doc);
 			output += `💬 ${partText}\n\n`;
 		} else if (part.title === "tool") {
+			// TODO: Show max 10 tool/file lines?
+			if (lastPartWasTool && output.endsWith("\n\n")) {
+				output = output.substring(0, output.length - 1);
+			}
 			output += part.text + "\n\n";
 		} else if (part.title === "files") {
+			// TODO: Show max 10 tool/file lines?
 			output += part.text + "\n\n";
 		} else if (part.title === "todo") {
+			// Show the whole todo list
 			output += part.text + "\n\n";
 		}
+
+		lastPartWasTool = part.title === "tool";
 	}
 
 	if (output) {
@@ -84,6 +91,9 @@ export function render(state: State, details = false): void {
 		}
 
 		state.renderedLines = lines;
+	} else if (state.renderedLines.length > 0) {
+		clearRenderedLines(state, state.renderedLines.length);
+		state.renderedLines = [];
 	}
 }
 
@@ -130,15 +140,27 @@ function clearRenderedLines(state: State, linesToClear: number): void {
 }
 
 export function wrapText(text: string, width: number): string[] {
+	const INDENT = "  ";
+	const indentLength = INDENT.length;
 	const lines: string[] = [];
-	let currentLine = "";
-	let visibleLength = 0;
+	let currentLine = INDENT;
+	let visibleLength = indentLength;
 	let i = 0;
 
+	let inThinking = false;
+
 	const pushLine = () => {
-		lines.push(currentLine);
-		currentLine = "";
-		visibleLength = 0;
+		if (currentLine === "  <ocmt-thinking>") {
+			inThinking = true;
+		} else if (currentLine === "  </ocmt-thinking>") {
+			inThinking = false;
+		} else {
+			let text = inThinking ? `${ansi.BRIGHT_BLACK}${currentLine}${ansi.RESET}` : currentLine;
+			lines.push(text);
+		}
+
+		currentLine = INDENT;
+		visibleLength = indentLength;
 	};
 
 	const addWord = (word: string, wordVisibleLength: number) => {
@@ -150,21 +172,21 @@ export function wrapText(text: string, width: number): string[] {
 				: visibleLength + 1 + wordVisibleLength <= width;
 
 		if (wouldFit) {
-			if (visibleLength > 0) {
+			if (visibleLength > indentLength) {
 				currentLine += " ";
 				visibleLength++;
 			}
 			currentLine += word;
 			visibleLength += wordVisibleLength;
-		} else if (visibleLength > 0) {
+		} else if (visibleLength > indentLength) {
 			pushLine();
-			currentLine = word;
-			visibleLength = wordVisibleLength;
+			currentLine = INDENT + word;
+			visibleLength = indentLength + wordVisibleLength;
 		} else if (wordVisibleLength <= width) {
-			currentLine = word;
-			visibleLength = wordVisibleLength;
+			currentLine = INDENT + word;
+			visibleLength = indentLength + wordVisibleLength;
 		} else {
-			const wordWidth = width;
+			const wordWidth = width - indentLength;
 			for (let w = 0; w < word.length; ) {
 				let segment = "";
 				let segmentVisible = 0;
@@ -192,8 +214,8 @@ export function wrapText(text: string, width: number): string[] {
 					if (currentLine) {
 						pushLine();
 					}
-					currentLine = segment;
-					visibleLength = segmentVisible;
+					currentLine = INDENT + segment;
+					visibleLength = indentLength + segmentVisible;
 				}
 			}
 		}
@@ -237,7 +259,7 @@ export function wrapText(text: string, width: number): string[] {
 		}
 	}
 
-	if (currentLine || lines.length === 0) {
+	if (currentLine.trim() || lines.length === 0) {
 		pushLine();
 	}
 
@@ -252,18 +274,40 @@ export function writePrompt(): void {
 
 const ANIMATION_CHARS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇"];
 let animationInterval: ReturnType<typeof setInterval> | null = null;
+let requestStartTime: number | null = null;
 
-export function startAnimation(): void {
+export function startAnimation(startTime?: number): void {
 	if (animationInterval) return;
 
+	requestStartTime = startTime || Date.now();
+
 	let index = 0;
 	animationInterval = setInterval(() => {
-		process.stdout.write(`\r${ansi.BOLD_MAGENTA}`);
-		process.stdout.write(`${ANIMATION_CHARS[index]}${ansi.RESET}`);
+		const elapsed = Date.now() - requestStartTime!;
+		const elapsedText = formatDuration(elapsed);
+
+		process.stdout.write(
+			`\r${ansi.BOLD_MAGENTA}${ANIMATION_CHARS[index]} ${ansi.RESET}${ansi.BRIGHT_BLACK}Running for ${elapsedText}${ansi.RESET}`,
+		);
 		index = (index + 1) % ANIMATION_CHARS.length;
 	}, 100);
 }
 
+function formatDuration(ms: number): string {
+	const seconds = ms / 1000;
+	if (seconds < 60) {
+		return `${Math.round(seconds)}s`;
+	}
+	const minutes = Math.floor(seconds / 60);
+	const remainingSeconds = Math.round(seconds % 60);
+	if (minutes < 60) {
+		return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+	}
+	const hours = Math.floor(minutes / 60);
+	const remainingMinutes = minutes % 60;
+	return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+}
+
 export function stopAnimation(): void {
 	if (animationInterval) {
 		clearInterval(animationInterval);

package/test/render.test.ts

@@ -1,5 +1,7 @@
+import { stripANSI } from "bun";
 import { describe, expect, it, vi } from "bun:test";
 import { type State } from "../src";
+import * as ansi from "../src/ansi";
 import { render, wrapText } from "../src/render";
 
 describe("render", () => {
@@ -61,7 +63,7 @@ describe("render", () => {
 			const calls = write.mock.calls.map((c) => c[0]);
 			expect(calls.some((c) => c.includes("\u001B[2A"))).toBe(true);
 			const outputCall = calls.find((c) => c.includes("i've done it"));
-			expect(outputCall).toContain("💬");
+			expect(outputCall).toContain(`💬`);
 		});
 	});
 
@@ -76,8 +78,7 @@ describe("render", () => {
 			render(state);
 
 			const output = write.mock.calls.map((c) => c[0]).join("");
-			expect(output).toContain("💭");
-			expect(output).toContain("分析问题");
+			expect(output).toContain(`${ansi.BRIGHT_BLACK}  💭 分析问题${ansi.RESET}`);
 		});
 
 		it("should only show thinking indicator for last thinking part", () => {
@@ -93,9 +94,8 @@ describe("render", () => {
 			render(state);
 
 			const output = write.mock.calls.map((c) => c[0]).join("");
-			expect(output).toContain("💭");
-			expect(output).toContain("second");
-			expect(output).not.toMatch(/first.*Thinking/);
+			expect(output).toContain(`${ansi.BRIGHT_BLACK}  💭 second${ansi.RESET}`);
+			expect(output).not.toContain("first");
 		});
 
 		it("should skip parts with empty text", () => {
@@ -121,6 +121,31 @@ describe("render", () => {
 
 			expect(write).toHaveBeenCalled();
 		});
+
+		it("all thinking lines should be gray", () => {
+			const write = vi.fn();
+			const state = createMockState({
+				accumulatedResponse: [
+					{
+						key: "xxx",
+						title: "thinking",
+						text: "Cookware and bakeware is food preparation equipment, such as cooking pots, pans, baking sheets etc. used in kitchens. Cookware is used on a stove or range cooktop, while bakeware is used in an oven. Some utensils are considered both cookware and bakeware.",
+					},
+				],
+				write,
+			});
+
+			render(state);
+
+			const output = write.mock.calls.map((c) => c[0]).join("");
+			expect(output).toContain(
+				`${ansi.BRIGHT_BLACK}  💭 Cookware and bakeware is food preparation equipment, such as cooking pots, pans, baking sheets etc. used in kitchens. Cookware is used on a stove${ansi.RESET}`,
+			);
+			expect(output).toContain(
+				`${ansi.BRIGHT_BLACK}  or range cooktop, while bakeware is used in an oven. Some utensils are considered both cookware and bakeware.${ansi.RESET}`,
+			);
+			expect(output).not.toContain("first");
+		});
 	});
 
 	describe("response parts", () => {
@@ -134,23 +159,43 @@ describe("render", () => {
 			render(state);
 
 			const output = write.mock.calls.map((c) => c[0]).join("");
-			expect(output).toContain("💬");
-			expect(output).toContain("Hello world");
+			expect(output).toContain(`💬 Hello world`);
 		});
 	});
 
 	describe("tool parts", () => {
-		it("should render tool part without indicator", () => {
+		it("should render tool part with indicator", () => {
 			const write = vi.fn();
 			const state = createMockState({
-				accumulatedResponse: [{ key: "xxx", title: "tool", text: "🔧 bash: ls -la" }],
+				accumulatedResponse: [{ key: "xxx", title: "tool", text: "bash: ls -la" }],
 				write,
 			});
 
 			render(state);
 
 			const output = write.mock.calls.map((c) => c[0]).join("");
-			expect(output).toContain("🔧 bash: ls -la");
+			expect(output).toContain("bash: ls -la");
+		});
+
+		it("multiple tool parts separated by inactive parts shouldn't have a blank line", () => {
+			const write = vi.fn();
+			const state = createMockState({
+				accumulatedResponse: [
+					{ key: "xxx", title: "tool", text: "foo" },
+					{ key: "xxx", title: "thinking", text: "need to do the stuff" },
+					{ key: "xxx", title: "tool", text: "bar" },
+					{ key: "xxx", title: "thinking", text: "ok, more stuff" },
+					{ key: "xxx", title: "tool", text: "baz" },
+				],
+				write,
+			});
+
+			render(state);
+
+			const output = stripANSI(write.mock.calls.map((c) => c[0]).join("")).replaceAll("  ", "");
+			console.log(output);
+			expect(output).toContain("foo\nbar\n\n💭 ok");
+			expect(output).toContain("stuff\n\nbaz");
 		});
 	});
 
@@ -238,7 +283,7 @@ describe("render", () => {
 			const state = createMockState({
 				accumulatedResponse: [
 					{ key: "xxx", title: "thinking", text: "分析中" },
-					{ key: "xxx", title: "tool", text: "🔧 bash: npm test" },
+					{ key: "xxx", title: "tool", text: "bash: npm test" },
 					{ key: "xxx", title: "response", text: "Test results: 5 passed" },
 				],
 				write,
@@ -247,10 +292,9 @@ describe("render", () => {
 			render(state);
 
 			const output = write.mock.calls.map((c) => c[0]).join("");
-			expect(output).not.toContain("💭");
-			expect(output).not.toContain("🔧 bash: npm test");
-			expect(output).toContain("💬");
-			expect(output).toContain("Test results: 5 passed");
+			expect(output).not.toContain(`分析中`);
+			expect(output).toContain(`bash: npm test`);
+			expect(output).toContain(`💬 Test results: 5 passed`);
 		});
 	});
 });
@@ -259,115 +303,123 @@ describe("wrapText", () => {
 	describe("basic wrapping", () => {
 		it("should return single line for text shorter than width", () => {
 			const result = wrapText("hello", 20);
-			expect(result).toEqual(["hello"]);
+			expect(result).toEqual(["  hello"]);
 		});
 
 		it("should wrap text longer than width", () => {
 			const result = wrapText("hello world this is a long text", 10);
-			expect(result).toEqual(["hello", "world this", "is a long", "text"]);
+			expect(result).toEqual(["  hello", "  world", "  this is", "  a long", "  text"]);
 		});
 
 		it("should handle text exactly at width", () => {
 			const result = wrapText("1234567890", 10);
-			expect(result).toEqual(["1234567890"]);
+			expect(result).toEqual(["  1234567890"]);
 		});
 
 		it("should break long word that exceeds width", () => {
 			const result = wrapText("12345678901", 10);
-			expect(result).toEqual(["1234567890", "1"]);
+			expect(result).toEqual(["  ", "  12345678", "  901"]);
 		});
 	});
 
 	describe("multiple lines", () => {
 		it("should preserve existing newlines", () => {
 			const result = wrapText("line1\nline2\nline3", 20);
-			expect(result).toEqual(["line1", "line2", "line3"]);
+			expect(result).toEqual(["  line1", "  line2", "  line3"]);
 		});
 
 		it("should wrap lines that are too long", () => {
 			const result = wrapText("very long line1\nshort\nvery long line2", 10);
-			expect(result).toEqual(["very long", "line1", "short", "very long", "line2"]);
+			expect(result).toEqual([
+				"  very",
+				"  long",
+				"  line1",
+				"  short",
+				"  very",
+				"  long",
+				"  line2",
+			]);
 		});
 
 		it("should handle empty lines", () => {
 			const result = wrapText("line1\n\nline3", 20);
-			expect(result).toEqual(["line1", "", "line3"]);
+			expect(result).toEqual(["  line1", "  ", "  line3"]);
 		});
 	});
 
 	describe("ANSI codes", () => {
 		it("should preserve ANSI codes in output", () => {
 			const result = wrapText("\x1b[31mred\x1b[0m text", 20);
-			expect(result).toEqual(["\x1b[31mred\x1b[0m text"]);
+			expect(result).toEqual(["  \x1b[31mred\x1b[0m text"]);
 		});
 
 		it("should not count ANSI codes toward visible width", () => {
 			const result = wrapText("\x1b[31mred\x1b[0m text", 8);
-			expect(result).toEqual(["\x1b[31mred\x1b[0m text"]);
+			expect(result).toEqual(["  \x1b[31mred\x1b[0m", "  text"]);
 		});
 
 		it("should handle multiple ANSI codes", () => {
 			const result = wrapText("\x1b[31m\x1b[1mbold red\x1b[0m\x1b[32m green\x1b[0m", 10);
-			expect(result).toEqual(["\x1b[31m\x1b[1mbold red\x1b[0m\x1b[32m", "green\x1b[0m"]);
+			expect(result).toEqual(["  \x1b[31m\x1b[1mbold red\x1b[0m\x1b[32m", "  green\x1b[0m"]);
 		});
 
 		it("should handle ANSI codes at wrap boundary", () => {
 			const result = wrapText("12345\x1b[31m67890\x1b[0m", 10);
-			expect(result).toEqual(["12345\x1b[31m67890\x1b[0m"]);
+			expect(result).toEqual(["  12345\x1b[31m67890\x1b[0m"]);
 		});
 	});
 
 	describe("edge cases", () => {
 		it("should handle empty string", () => {
 			const result = wrapText("", 20);
-			expect(result).toEqual([""]);
+			expect(result).toEqual(["  "]);
 		});
 
 		it("should handle single character", () => {
 			const result = wrapText("a", 20);
-			expect(result).toEqual(["a"]);
+			expect(result).toEqual(["  a"]);
 		});
 
 		it("should handle width of 1", () => {
 			const result = wrapText("a b c", 1);
-			expect(result).toEqual(["a", "b", "c"]);
+			expect(result).toEqual(["  a", "  b", "  c"]);
 		});
 
 		it("should handle carriage return characters", () => {
 			const result = wrapText("hello\r\nworld", 20);
-			expect(result).toEqual(["hello", "world"]);
+			expect(result).toEqual(["  hello", "  world"]);
 		});
 
 		it("should handle trailing newline", () => {
 			const result = wrapText("hello\n", 20);
-			expect(result).toEqual(["hello"]);
+			expect(result).toEqual(["  hello"]);
 		});
 
 		it("should handle multiple trailing newlines", () => {
 			const result = wrapText("hello\n\n", 20);
-			expect(result).toEqual(["hello", ""]);
+			expect(result).toEqual(["  hello", "  "]);
 		});
 
 		it("should handle leading newline", () => {
 			const result = wrapText("\nhello", 20);
-			expect(result).toEqual(["", "hello"]);
+			expect(result).toEqual(["  ", "  hello"]);
 		});
 	});
 
 	describe("real-world scenarios", () => {
-		it("should wrap thinking output with emoji", () => {
+		it("should wrap thinking output with indicator", () => {
 			const result = wrapText(
-				"💭 Let me analyze this problem step by step to find the best solution",
-				40,
+				"Let me analyze this problem step by step to find the best solution",
+				36,
 			);
 			expect(result.length).toBeGreaterThan(1);
-			expect(result[0]).toBe("💭 Let me analyze this problem step by");
+			expect(result[0]).toBe("  Let me analyze this problem step");
 		});
 
-		it("should wrap response output with emoji", () => {
+		it("should wrap response output with indicator", () => {
 			const result = wrapText(
-				"💬 Here is the solution:\nWe need to implement the fix by updating the wrapText function",
-				30,
+				"Here is the solution:\nWe need to implement the fix by updating the wrapText function",
+				26,
 			);
 			expect(result.length).toBeGreaterThan(1);
 		});