From 772b70e151484079ea0186042fab0cabc55a0334 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Thu, 18 Sep 2025 21:31:31 +0530
Subject: [PATCH 1/2] feat: add terminal, searchCode, openUrl tool

---
 src/pages/aiAssistant/tools/index.js      |   7 +
 src/pages/aiAssistant/tools/openUrl.js    |  58 +++
 src/pages/aiAssistant/tools/searchCode.js | 430 ++++++++++++++++++++++
 src/pages/aiAssistant/tools/terminal.js   | 283 ++++++++++++++
 4 files changed, 778 insertions(+)
 create mode 100644 src/pages/aiAssistant/tools/openUrl.js
 create mode 100644 src/pages/aiAssistant/tools/searchCode.js
 create mode 100644 src/pages/aiAssistant/tools/terminal.js

diff --git a/src/pages/aiAssistant/tools/index.js b/src/pages/aiAssistant/tools/index.js
index d3e055c06..787f32f45 100644
--- a/src/pages/aiAssistant/tools/index.js
+++ b/src/pages/aiAssistant/tools/index.js
@@ -2,7 +2,10 @@ import { createDir } from "./createDir";
 import { editFile } from "./editFile";
 import { fetchTool } from "./fetch";
 import { listDirectory } from "./listDirectory";
+import { openUrl } from "./openUrl";
 import { readFile } from "./readFile";
+import { searchCode } from "./searchCode";
+import { interactiveTerminal, terminal } from "./terminal";
 
 // Export all tools as a single object
 export const allTools = {
@@ -11,4 +14,8 @@ export const allTools = {
 	listDirectory,
 	editFile,
 	createDir,
+	terminal,
+	interactiveTerminal,
+	searchCode,
+	openUrl,
 };
diff --git a/src/pages/aiAssistant/tools/openUrl.js b/src/pages/aiAssistant/tools/openUrl.js
new file mode 100644
index 000000000..2865b5cdf
--- /dev/null
+++ b/src/pages/aiAssistant/tools/openUrl.js
@@ -0,0 +1,58 @@
+import { StructuredTool } from "@langchain/core/tools";
+import browser from "plugins/browser";
+import { z } from "zod";
+
+const SUPPORTED_PROTOCOL = /^https?:\/\//i;
+
+function normalizeTarget(target) {
+	if (!target) return "inApp";
+	if (target === "in-app" || target === "inapp") return "inApp";
+	return target;
+}
+
+class OpenUrlTool extends StructuredTool {
+	name = "openUrl";
+	description =
+		"Opens a URL in the system browser or the in-app browser. " +
+		"Use this to hand off documentation, dashboards, or other web resources to the user.";
+
+	schema = z.object({
+		url: z
+			.string()
+			.min(1)
+			.describe("Full URL including scheme (http or https)."),
+		target: z
+			.enum(["external", "inApp"])
+			.default("inApp")
+			.describe(
+				"Destination: external (system browser) or inApp (Acode's built-in browser). Default inApp.",
+			),
+	});
+
+	async _call({ url, target = "inApp" }) {
+		const trimmedUrl = url.trim();
+		if (!SUPPORTED_PROTOCOL.test(trimmedUrl)) {
+			return "Error: Only http and https URLs are supported.";
+		}
+
+		const normalizedTarget = normalizeTarget(target);
+
+		try {
+			if (normalizedTarget === "inApp") {
+				browser.open(trimmedUrl);
+				return `Opened ${trimmedUrl} in the in-app browser.`;
+			}
+
+			if (typeof window.system.openInBrowser !== "function") {
+				return "Error: External browser integration is unavailable.";
+			}
+
+			window.system.openInBrowser(trimmedUrl);
+			return `Opened ${trimmedUrl} in the system browser.`;
+		} catch (error) {
+			return `Error opening URL: ${error.message}`;
+		}
+	}
+}
+
+export const openUrl = new OpenUrlTool();
diff --git a/src/pages/aiAssistant/tools/searchCode.js b/src/pages/aiAssistant/tools/searchCode.js
new file mode 100644
index 000000000..7764eb4b7
--- /dev/null
+++ b/src/pages/aiAssistant/tools/searchCode.js
@@ -0,0 +1,430 @@
+import fsOperation from "fileSystem";
+import { StructuredTool } from "@langchain/core/tools";
+import { addedFolder } from "lib/openFolder";
+import { z } from "zod";
+
+const DEFAULT_MAX_RESULTS = 50;
+const DEFAULT_CONTEXT_LINES = 2;
+const MAX_RESULTS_LIMIT = 200;
+const MAX_FILE_SIZE_BYTES = 1024 * 1024; // Skip files over 1MB to avoid heavy reads
+const DEFAULT_EXCLUDED_DIRS = new Set([
+	".git",
+	".svn",
+	".hg",
+	"node_modules",
+	"build",
+	"dist",
+	".gradle",
+	".idea",
+	"Pods",
+	".expo",
+	".turbo",
+	".cache",
+	".output",
+	"android/app/build",
+	"ios/Pods",
+	"www/build",
+]);
+
+function shellSafePreview(text) {
+	if (!text) return "";
+	const trimmed = text.replace(/\t/g, "    ").replace(/\r/g, "");
+	return trimmed.length > 160 ? `${trimmed.slice(0, 159)}…` : trimmed;
+}
+
+function formatContext(lines, matchIndex, contextLines) {
+	const start = Math.max(0, matchIndex - contextLines);
+	const end = Math.min(lines.length - 1, matchIndex + contextLines);
+	const formatted = [];
+	for (let i = start; i <= end; i++) {
+		const prefix = i === matchIndex ? ">" : " ";
+		const lineNo = String(i + 1).padStart(4, " ");
+		formatted.push(`${prefix}${lineNo} ${lines[i]}`);
+	}
+	return formatted.join("\n");
+}
+
+function normalizePathForFilters(path) {
+	return path.replace(/\\/g, "/");
+}
+
+function matchesIncludeExclude(
+	path,
+	includePatterns,
+	excludePatterns,
+	{ treatAsDirectory = false } = {},
+) {
+	const normalized = normalizePathForFilters(path);
+	if (excludePatterns?.some((pattern) => normalized.includes(pattern))) {
+		return false;
+	}
+	if (includePatterns && includePatterns.length > 0) {
+		if (treatAsDirectory) {
+			return includePatterns.some(
+				(pattern) =>
+					normalized.includes(pattern) || pattern.includes(normalized),
+			);
+		}
+		return includePatterns.some((pattern) => normalized.includes(pattern));
+	}
+	return true;
+}
+
+async function listDirectorySafe(url) {
+	try {
+		return await fsOperation(url).lsDir();
+	} catch (error) {
+		console.error("searchCode: failed to list directory", url, error);
+		return [];
+	}
+}
+
+async function readFileSafe(url) {
+	try {
+		return await fsOperation(url).readFile("utf8");
+	} catch (error) {
+		return null;
+	}
+}
+
+function shouldSkipDirectory(relPath) {
+	if (!relPath) return false;
+	const normalized = normalizePathForFilters(relPath);
+	for (const dir of DEFAULT_EXCLUDED_DIRS) {
+		if (normalized === dir || normalized.endsWith(`/${dir}`)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function buildRegex(query, caseSensitive) {
+	const flags = caseSensitive ? "g" : "gi";
+	return new RegExp(query, flags);
+}
+
+function findMatchesInLine({
+	line,
+	lineIndex,
+	query,
+	regex,
+	caseSensitive,
+	path,
+	results,
+	maxResults,
+}) {
+	if (results.length >= maxResults) return;
+	if (typeof line !== "string" || line.length === 0) return;
+
+	if (regex) {
+		regex.lastIndex = 0;
+		let match = regex.exec(line);
+		while (match && results.length < maxResults) {
+			const column = match.index + 1;
+			results.push({
+				path,
+				line: lineIndex + 1,
+				column,
+				lineText: line,
+				matchIndex: lineIndex,
+			});
+			match = regex.exec(line);
+		}
+		return;
+	}
+
+	const haystack = caseSensitive ? line : line.toLowerCase();
+	const needle = caseSensitive ? query : query.toLowerCase();
+	let startIndex = haystack.indexOf(needle);
+	while (startIndex !== -1 && results.length < maxResults) {
+		results.push({
+			path,
+			line: lineIndex + 1,
+			column: startIndex + 1,
+			lineText: line,
+			matchIndex: lineIndex,
+		});
+		startIndex = haystack.indexOf(needle, startIndex + needle.length);
+	}
+}
+
+async function searchFile({
+	fileUrl,
+	relativePath,
+	query,
+	regex,
+	caseSensitive,
+	contextLines,
+	maxResults,
+	results,
+}) {
+	if (results.length >= maxResults) return;
+
+	const content = await readFileSafe(fileUrl);
+	if (content === null) return;
+
+	const lines = content.split(/\r?\n/);
+	const re = regex ? regex : null;
+	const startLength = results.length;
+
+	for (let i = 0; i < lines.length && results.length < maxResults; i++) {
+		findMatchesInLine({
+			line: lines[i],
+			lineIndex: i,
+			query,
+			regex: re,
+			caseSensitive,
+			path: relativePath,
+			results,
+			maxResults,
+		});
+	}
+
+	for (let idx = startLength; idx < results.length; idx++) {
+		const match = results[idx];
+		if (!match.lineText) continue;
+		match.preview = shellSafePreview(match.lineText);
+		match.context = formatContext(lines, match.matchIndex, contextLines);
+		delete match.lineText;
+	}
+}
+
+async function traverse({
+	project,
+	currentUrl,
+	relativePath,
+	query,
+	regex,
+	caseSensitive,
+	contextLines,
+	maxResults,
+	results,
+	includePatterns,
+	excludePatterns,
+}) {
+	if (results.length >= maxResults) return;
+
+	const entries = await listDirectorySafe(currentUrl);
+	if (!entries || entries.length === 0) return;
+
+	for (const entry of entries) {
+		if (results.length >= maxResults) break;
+		if (!entry || entry.name === "." || entry.name === "..") continue;
+
+		const relPath = relativePath
+			? `${relativePath}/${entry.name}`
+			: `${project.title}/${entry.name}`;
+		const childUrl = entry.url || `${currentUrl}/${entry.name}`;
+
+		if (entry.isDirectory) {
+			const directoryAllowed = matchesIncludeExclude(
+				relPath,
+				includePatterns,
+				excludePatterns,
+				{ treatAsDirectory: true },
+			);
+			if (shouldSkipDirectory(relPath) || !directoryAllowed) {
+				continue;
+			}
+			await traverse({
+				project,
+				currentUrl: childUrl,
+				relativePath: relPath,
+				query,
+				regex,
+				caseSensitive,
+				contextLines,
+				maxResults,
+				results,
+				includePatterns,
+				excludePatterns,
+			});
+		} else if (entry.isFile) {
+			if (!matchesIncludeExclude(relPath, includePatterns, excludePatterns)) {
+				continue;
+			}
+			if (
+				typeof entry.length === "number" &&
+				entry.length > MAX_FILE_SIZE_BYTES
+			) {
+				continue;
+			}
+			await searchFile({
+				fileUrl: childUrl,
+				relativePath: relPath,
+				query,
+				regex,
+				caseSensitive,
+				contextLines,
+				maxResults,
+				results,
+			});
+		}
+	}
+}
+
+class SearchCodeTool extends StructuredTool {
+	name = "searchCode";
+	description =
+		"Searches files in the current project using a plain string or regular expression." +
+		" Returns the path, line, column, and a short preview for each match.";
+	schema = z.object({
+		query: z
+			.string()
+			.min(1)
+			.describe("Search term or regex pattern depending on 'isRegex'."),
+		path: z
+			.string()
+			.optional()
+			.describe(
+				"Optional relative path to scope the search. Start with the project root name as shown in the sidebar (e.g. 'project/src').",
+			),
+		maxResults: z
+			.number()
+			.int()
+			.min(1)
+			.max(MAX_RESULTS_LIMIT)
+			.optional()
+			.describe("Maximum number of matches to return (default 50, cap 200)."),
+		caseSensitive: z
+			.boolean()
+			.optional()
+			.describe("Perform a case-sensitive search when true."),
+		isRegex: z
+			.boolean()
+			.optional()
+			.describe("Interpret the query as a regular expression when true."),
+		contextLines: z
+			.number()
+			.int()
+			.min(0)
+			.max(5)
+			.optional()
+			.describe(
+				"Number of context lines to include before and after each match (default 2).",
+			),
+		include: z
+			.array(z.string())
+			.optional()
+			.describe(
+				"Optional list of path substrings to include (any match qualifies).",
+			),
+		exclude: z
+			.array(z.string())
+			.optional()
+			.describe("Optional list of path substrings to exclude."),
+	});
+
+	resolvePath(inputPath) {
+		if (
+			!inputPath ||
+			inputPath === "." ||
+			inputPath === "*" ||
+			inputPath === "./"
+		) {
+			return null;
+		}
+		const parts = inputPath.split("/").filter(Boolean);
+		const projectName = parts[0];
+		const project = addedFolder.find((folder) => folder.title === projectName);
+		if (!project) {
+			return {
+				error: `Error: Project '${projectName}' not found in opened folders.`,
+			};
+		}
+		const subPath = parts.slice(1).join("/");
+		const targetUrl = subPath ? `${project.url}/${subPath}` : project.url;
+		const relativeBase = subPath ? `${projectName}/${subPath}` : projectName;
+		return { project, targetUrl, relativeBase };
+	}
+
+	async _call(options) {
+		const {
+			query,
+			path,
+			maxResults = DEFAULT_MAX_RESULTS,
+			caseSensitive = false,
+			isRegex = false,
+			contextLines = DEFAULT_CONTEXT_LINES,
+			include,
+			exclude,
+		} = options;
+
+		try {
+			const results = [];
+			let roots = [];
+
+			if (path) {
+				const resolved = this.resolvePath(path.trim());
+				if (resolved?.error) {
+					return resolved.error;
+				}
+				if (!resolved) {
+					// Path pointed to root wildcard; fall back to all projects
+					roots = addedFolder.slice();
+				} else {
+					roots = [resolved];
+				}
+			} else {
+				roots = addedFolder.map((folder) => ({
+					project: folder,
+					targetUrl: folder.url,
+					relativeBase: folder.title,
+				}));
+			}
+
+			if (!roots || roots.length === 0) {
+				return "No open folders to search.";
+			}
+
+			let compiledRegex = null;
+			if (isRegex) {
+				try {
+					compiledRegex = buildRegex(query, caseSensitive);
+				} catch (error) {
+					return `Invalid regular expression: ${error.message}`;
+				}
+			}
+
+			for (const root of roots) {
+				if (results.length >= maxResults) break;
+				const projectInfo = root.project
+					? root
+					: { project: root, targetUrl: root.url, relativeBase: root.title };
+				await traverse({
+					project: projectInfo.project,
+					currentUrl: projectInfo.targetUrl,
+					relativePath: projectInfo.relativeBase,
+					query,
+					regex: compiledRegex,
+					caseSensitive,
+					contextLines,
+					maxResults,
+					results,
+					includePatterns: include,
+					excludePatterns: exclude,
+				});
+			}
+
+			if (results.length === 0) {
+				return `No matches for "${query}"${path ? ` in ${path}` : ""}.`;
+			}
+
+			const formatted = results.slice(0, maxResults).map((match) => {
+				const header = `${match.path}:${match.line}:${match.column}`;
+				return `${header}\n${match.context}`;
+			});
+
+			if (results.length > maxResults) {
+				formatted.push(`\n… truncated after ${maxResults} matches.`);
+			}
+
+			return formatted.join("\n\n");
+		} catch (error) {
+			console.error("searchCode tool error", error);
+			return `Error during search: ${error.message}`;
+		}
+	}
+}
+
+export const searchCode = new SearchCodeTool();
diff --git a/src/pages/aiAssistant/tools/terminal.js b/src/pages/aiAssistant/tools/terminal.js
new file mode 100644
index 000000000..87eef2f29
--- /dev/null
+++ b/src/pages/aiAssistant/tools/terminal.js
@@ -0,0 +1,283 @@
+import { StructuredTool } from "@langchain/core/tools";
+import terminalManager from "components/terminal/terminalManager";
+import confirm from "dialogs/confirm";
+import { z } from "zod";
+
+const executor = () => {
+	const ref = window.Executor;
+	if (!ref) {
+		throw new Error(
+			"Terminal subsystem is unavailable. Ensure the terminal plugin is installed.",
+		);
+	}
+	return ref;
+};
+
+const DEFAULT_CWD = "/home";
+const REMOTE_PROTOCOL_REGEX = /^(?:content|ftp|sftp|smb):\/\//i;
+const BLOCKED_PATTERNS = [
+	/\b(npm|pnpm|yarn)\s+(run\s+)?(dev|start|serve)\b/i,
+	/\b(vite|expo|nx|next|nuxt|astro|svelte-kit|webpack)\b.*\b(dev|start|serve)\b/i,
+	/\b(pnpm|npm|yarn)\s+watch\b/i,
+	/\bnode\b.*\b(--watch|-w)\b/i,
+	/\bpython\b.*-m\s+http\.server\b/i,
+	/\btail\b\s+-f\b/i,
+];
+
+function waitForTerminalConnection(component, timeoutMs = 10000) {
+	if (!component || component.isConnected) {
+		return Promise.resolve();
+	}
+
+	return new Promise((resolve, reject) => {
+		const start = Date.now();
+		const interval = setInterval(() => {
+			if (component.isConnected) {
+				clearInterval(interval);
+				resolve();
+				return;
+			}
+
+			if (Date.now() - start > timeoutMs) {
+				clearInterval(interval);
+				reject(new Error("Timed out waiting for terminal to become ready."));
+			}
+		}, 150);
+	});
+}
+
+function resolvePosixPath(base, target) {
+	const raw = target.startsWith("/")
+		? target
+		: `${base.replace(/\/$/, "")}/${target}`;
+	const parts = raw.split("/");
+	const stack = [];
+	for (const part of parts) {
+		if (!part || part === ".") continue;
+		if (part === "..") {
+			stack.pop();
+		} else {
+			stack.push(part);
+		}
+	}
+	return `/${stack.join("/")}` || "/";
+}
+
+function toShellPreview(output) {
+	if (!output) return "";
+	return output.length > 4000
+		? `${output.slice(0, 4000)}\n… (truncated)`
+		: output;
+}
+
+class TerminalTool extends StructuredTool {
+	name = "terminal";
+	description =
+		"Runs a single shell command inside Acode's Alpine proot environment. " +
+		"Long-running dev servers or watch tasks are blocked; use the interactive terminal instead.";
+
+	schema = z.object({
+		command: z
+			.string()
+			.min(1)
+			.describe(
+				"Shell command to execute. Avoid long-running dev/watch tasks.",
+			),
+		cwd: z
+			.string()
+			.optional()
+			.describe(
+				"Optional working directory. Defaults to the last directory (initially /home). Accepts absolute or relative POSIX paths.",
+			),
+		requireConfirmation: z
+			.boolean()
+			.default(true)
+			.describe("Prompt the user for confirmation before executing."),
+	});
+
+	constructor() {
+		super();
+		this.currentWorkingDirectory = DEFAULT_CWD;
+	}
+
+	isSessionAlive() {
+		return Promise.resolve(false);
+	}
+
+	getCurrentWorkingDirectory() {
+		return this.currentWorkingDirectory;
+	}
+
+	async resetSession() {
+		this.currentWorkingDirectory = DEFAULT_CWD;
+	}
+
+	async stopCurrentProcess() {
+		await this.resetSession();
+	}
+
+	validateCommand(command) {
+		for (const pattern of BLOCKED_PATTERNS) {
+			if (pattern.test(command)) {
+				throw new Error(
+					"This command starts a long-running process. Please use the interactive terminal instead.",
+				);
+			}
+		}
+	}
+
+	normalizeCwd(input) {
+		if (!input || !input.trim()) {
+			return this.currentWorkingDirectory;
+		}
+
+		let path = input.trim();
+
+		if (REMOTE_PROTOCOL_REGEX.test(path)) {
+			throw new Error(
+				"Remote or SAF paths are not accessible from the terminal tool. Only local paths are supported.",
+			);
+		}
+
+		if (path.startsWith("~")) {
+			path = path.replace(/^~(?=\/|$)/, DEFAULT_CWD);
+		}
+
+		const resolved = resolvePosixPath(this.currentWorkingDirectory, path);
+		return resolved || DEFAULT_CWD;
+	}
+
+	async confirmExecution({ command, cwd }) {
+		const message =
+			`Environment: <strong>Alpine proot sandbox</strong><br>` +
+			`Working directory: <code>${cwd}</code><br><br>` +
+			`Command:<br><pre style="background:#1f1f1f;color:#fff;padding:12px;border-radius:6px;white-space:pre-wrap;">${command}</pre>` +
+			`<br><span style="color:#ffa726;">Please confirm before executing.</span>`;
+
+		const userConfirmed = await confirm("Run Terminal Command", message, true);
+		return Boolean(userConfirmed);
+	}
+
+	async runExecutor(command) {
+		try {
+			const stdout = await executor().execute(
+				`sh -c "${command.replace(/"/g, '\\"')}"`,
+				true,
+			);
+			return { success: true, stdout: stdout || "" };
+		} catch (error) {
+			const message =
+				typeof error === "string" ? error : error?.message || String(error);
+			return { success: false, stderr: message };
+		}
+	}
+
+	async _call({ command, cwd, requireConfirmation = true }) {
+		try {
+			const trimmedCommand = command.trim();
+			if (!trimmedCommand) {
+				return "Error: Empty command provided.";
+			}
+
+			this.validateCommand(trimmedCommand);
+
+			const normalizedCwd = this.normalizeCwd(cwd);
+
+			if (requireConfirmation) {
+				const consent = await this.confirmExecution({
+					command: trimmedCommand,
+					cwd: normalizedCwd,
+				});
+				if (!consent) {
+					return "Command cancelled by user.";
+				}
+			}
+
+			const wrappedCommand = `cd "${normalizedCwd.replace(/"/g, '\\"')}" && ${trimmedCommand}`;
+
+			const result = await this.runExecutor(wrappedCommand);
+
+			if (result.success) {
+				this.currentWorkingDirectory = normalizedCwd;
+			}
+
+			const lines = [
+				"Environment: Alpine proot sandbox",
+				`Working directory: ${normalizedCwd}`,
+				`Command: ${trimmedCommand}`,
+				result.success ? "Status: SUCCESS" : "Status: FAILED",
+			];
+
+			const body = [];
+			if (result.success && result.stdout) {
+				body.push(`STDOUT:\n${toShellPreview(result.stdout)}`);
+			} else if (result.success) {
+				body.push("STDOUT:\n(no output)\n");
+			}
+
+			if (!result.success && result.stderr) {
+				body.push(`STDERR:\n${toShellPreview(result.stderr)}`);
+			}
+
+			if (!result.success) {
+				body.push(
+					"Hint: Use the interactive terminal tool for commands that need an ongoing session.",
+				);
+			}
+
+			return [...lines, "", ...body].join("\n");
+		} catch (error) {
+			return `Error: ${error.message}`;
+		}
+	}
+}
+
+class InteractiveTerminalTool extends StructuredTool {
+	name = "interactiveTerminal";
+	description =
+		"Opens a dedicated terminal tab in the UI (server-backed) for manual interaction. " +
+		"Use this for long-running or interactive workflows.";
+
+	schema = z.object({
+		name: z.string().optional().describe("Optional custom tab title."),
+		command: z
+			.string()
+			.optional()
+			.describe(
+				"Optional command to send once the terminal is ready (a newline is appended automatically).",
+			),
+	});
+
+	async _call({ name, command }) {
+		try {
+			const terminal = await terminalManager.createTerminal({
+				name: name || "AI Assistant Terminal",
+				serverMode: true,
+			});
+
+			if (!terminal) {
+				return "Failed to create terminal session.";
+			}
+
+			try {
+				await waitForTerminalConnection(terminal.component);
+			} catch (connectionError) {
+				return `Terminal tab opened, but the backend did not become ready: ${connectionError.message}`;
+			}
+
+			if (command && command.trim()) {
+				terminalManager.writeToTerminal(terminal.id, `${command.trim()}\r\n`);
+				return `Interactive terminal "${terminal.name}" opened and command sent.`;
+			}
+
+			return `Interactive terminal "${terminal.name}" opened. You can find it in the tab bar.`;
+		} catch (error) {
+			return `Error creating terminal: ${error.message}`;
+		}
+	}
+}
+
+const terminalToolInstance = new TerminalTool();
+
+export const terminal = terminalToolInstance;
+export const interactiveTerminal = new InteractiveTerminalTool();

From 5aad9bba3d8185e677ea49098325d17dd536c2d8 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Thu, 18 Sep 2025 21:32:58 +0530
Subject: [PATCH 2/2] refactor: ai agent behaviour and logic with lots of fixes

- organise the logics
- show tool call on ui
- fix ui issues
- and a lot more
---
 AGENTS.md                                     |  40 +
 src/pages/aiAssistant/agent/sessionManager.js | 202 ++++
 src/pages/aiAssistant/assistant.js            | 982 ++++++------------
 src/pages/aiAssistant/assistant.m.scss        | 266 +++++
 src/pages/aiAssistant/state/chatStore.js      | 198 ++++
 src/pages/aiAssistant/ui/messageRenderer.js   | 545 ++++++++++
 6 files changed, 1583 insertions(+), 650 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 src/pages/aiAssistant/agent/sessionManager.js
 create mode 100644 src/pages/aiAssistant/state/chatStore.js
 create mode 100644 src/pages/aiAssistant/ui/messageRenderer.js

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 000000000..1807794e6
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,40 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- Source: `src/` (ES modules, SCSS). Key areas: `src/components/`, `src/pages/`, `src/lib/`, `src/plugins/` (Cordova plugins), `src/styles/`.
+- Web assets: `www/` (entry `index.html`, build output in `www/build/`, css/js subfolders).
+- Config: `webpack.config.js`, `.babelrc`, `biome.json`, `config.xml`.
+- Utilities: `utils/` (build, start, setup scripts; language and tooling helpers).
+
+## Build, Test, and Development Commands
+- `pnpm run setup`: Install deps, add Android platform, create build dirs, add plugins.
+- `pnpm run start -- android d`: Build and run on device/emulator (default dev). For release-like: `pnpm run start -- android p`.
+- `pnpm run build`: Build app (defaults to dev). Production example: `pnpm run build -- paid prod`. F-Droid variant: `pnpm run build -- paid prod fdroid`.
+- `pnpm run clean -- android android`: Recreate Android platform.
+- `pnpm run plugin -- <id> [path]`: Reinstall a Cordova plugin.
+- Linting/format: `pnpm run lint`, `pnpm run format`, `pnpm run check` (Biome).
+
+## Coding Style & Naming Conventions
+- Formatting: Biome enforced; indent with tabs (`biome.json`). Run `npm run format` before commits.
+- Language: ESM JavaScript, SCSS; prefer imports from `src` root (webpack `resolve.modules: ["node_modules", "src"]`).
+- Naming: camelCase for files/dirs (e.g., `fileSystem`, `quickTools`), PascalCase for classes/components, kebab-case for SCSS partials when applicable.
+
+## Testing Guidelines
+- No formal test runner configured. Provide clear manual verification steps for Android (device/emulator), including affected screens, repro steps, and expected/actual behavior.
+- Attach logs when relevant (see issue templates mention of `Acode.log`). Screenshots or screen recordings are encouraged for UI changes.
+
+## Commit & Pull Request Guidelines
+- Commits: Follow conventional style when possible (`feat:`, `fix:`, `chore(scope):`, etc.), reference issues (`(#123)`).
+- PRs: Include a concise summary, linked issues, screenshots for UI, and test/verification steps. Note any Cordova plugin or config changes.
+- Keep diffs focused; run `npm run lint` and ensure `www/build/` is generated by the pipeline, not committed.
+
+## Security & Configuration Tips
+- Building for F-Droid: pass `fdroid` as the third arg to `build` to toggle plugin set.
+- Do not commit secrets/keystores. Android signing is handled outside the repo; keep `keystore.jks` private.
+
+# When you need to call tools from the shell, use this rubric:
+
+- Find Files: `fd`
+- Find Text: `rg` (ripgrep)
+- Select among matches: pipe to `fzf`
+- JSON: `jq`
\ No newline at end of file
diff --git a/src/pages/aiAssistant/agent/sessionManager.js b/src/pages/aiAssistant/agent/sessionManager.js
new file mode 100644
index 000000000..cafbf246a
--- /dev/null
+++ b/src/pages/aiAssistant/agent/sessionManager.js
@@ -0,0 +1,202 @@
+import {
+	isAIMessageChunk,
+	isToolMessage,
+	isToolMessageChunk,
+} from "@langchain/core/messages";
+
+function extractText(contentLike) {
+	if (!contentLike) return "";
+	if (typeof contentLike === "string") return contentLike;
+	if (Array.isArray(contentLike)) {
+		return contentLike
+			.map((item) => {
+				if (!item) return "";
+				if (typeof item === "string") return item;
+				if (typeof item === "object" && "text" in item) return item.text ?? "";
+				if (typeof item === "object" && "content" in item)
+					return extractText(item.content);
+				return "";
+			})
+			.join("");
+	}
+	if (typeof contentLike === "object" && "text" in contentLike) {
+		return contentLike.text ?? "";
+	}
+	return "";
+}
+
+function ensureToolState(toolStates, toolCallId, defaults = {}) {
+	if (!toolStates.has(toolCallId)) {
+		toolStates.set(toolCallId, {
+			id: toolCallId,
+			name: defaults.name || "Tool",
+			argsBuffer: "",
+			argsObject: undefined,
+			output: "",
+			status: "running",
+			isNew: true,
+			stage: "start",
+		});
+	}
+	const state = toolStates.get(toolCallId);
+	Object.assign(state, defaults);
+	return state;
+}
+
+export function createSessionManager(agent) {
+	return {
+		async runTurn({
+			conversationId,
+			userMessage,
+			signal,
+			assistantMessageId,
+			onStart,
+			onToken,
+			onToolEvent,
+		}) {
+			const toolStates = new Map();
+			let accumulatedText = "";
+
+			const emitToolState = (state) => {
+				if (!onToolEvent) return;
+				state.parentMessageId = assistantMessageId;
+				onToolEvent({
+					id: state.id,
+					name: state.name,
+					argsText: state.argsBuffer,
+					argsObject: state.argsObject,
+					output: state.output,
+					status: state.status,
+					stage: state.stage,
+					isNew: state.isNew,
+					parentMessageId: assistantMessageId,
+				});
+				state.isNew = false;
+			};
+
+			try {
+				const stream = await agent.stream(
+					{ messages: [userMessage] },
+					{
+						streamMode: "messages",
+						signal,
+						configurable: {
+							thread_id: conversationId,
+						},
+					},
+				);
+
+				onStart?.();
+
+				for await (const event of stream) {
+					const payload = Array.isArray(event) ? event[0] : event;
+					if (!payload) continue;
+
+					if (isToolMessageChunk(payload) || isToolMessage(payload)) {
+						const toolCallId =
+							payload.tool_call_id || payload.id || `tool_${toolStates.size}`;
+						const state = ensureToolState(toolStates, toolCallId);
+						const chunkText = extractText(payload.content ?? payload);
+						if (chunkText) {
+							state.output = `${state.output || ""}${chunkText}`;
+						}
+						if (payload.status) {
+							state.status = payload.status === "error" ? "error" : "success";
+						}
+						state.stage = "output";
+						emitToolState(state);
+						continue;
+					}
+
+					if (isAIMessageChunk(payload)) {
+						const { tool_call_chunks: toolCallChunks, tool_calls: toolCalls } =
+							payload;
+
+						if (Array.isArray(toolCallChunks) && toolCallChunks.length) {
+							for (const chunk of toolCallChunks) {
+								const toolCallId =
+									chunk.id ||
+									chunk.tool_call_id ||
+									chunk.name ||
+									`tool_${toolStates.size}`;
+								const state = ensureToolState(toolStates, toolCallId, {
+									name:
+										chunk.name || toolStates.get(toolCallId)?.name || "Tool",
+								});
+								if (chunk.args) {
+									state.argsBuffer = `${state.argsBuffer || ""}${chunk.args}`;
+								}
+								state.stage = "args-delta";
+								emitToolState(state);
+							}
+						}
+
+						if (Array.isArray(toolCalls) && toolCalls.length) {
+							for (const call of toolCalls) {
+								const toolCallId =
+									call.id || call.name || `tool_${toolStates.size}`;
+								const state = ensureToolState(toolStates, toolCallId, {
+									name: call.name || toolStates.get(toolCallId)?.name || "Tool",
+								});
+								state.argsObject = call.args;
+								try {
+									state.argsBuffer = JSON.stringify(call.args, null, 2);
+								} catch (error) {
+									state.argsBuffer = String(call.args);
+								}
+								state.stage = "args-final";
+								emitToolState(state);
+							}
+						}
+					}
+
+					const chunkText = extractText(payload?.content ?? payload);
+					if (chunkText) {
+						accumulatedText += chunkText;
+						onToken?.({
+							fullText: accumulatedText,
+							delta: chunkText,
+						});
+					}
+				}
+
+				const toolRuns = Array.from(toolStates.values()).map((state) => {
+					if (!state.status || state.status === "running") {
+						state.status = "success";
+					}
+					state.stage = "complete";
+					emitToolState(state);
+					return {
+						id: state.id,
+						name: state.name,
+						status: state.status,
+						argsText: state.argsBuffer,
+						argsObject: state.argsObject,
+						output: state.output,
+						timestamp: Date.now(),
+						parentMessageId: assistantMessageId,
+					};
+				});
+
+				return {
+					content: accumulatedText,
+					toolRuns,
+				};
+			} catch (error) {
+				if (toolStates.size) {
+					error.toolRuns = Array.from(toolStates.values()).map((state) => ({
+						id: state.id,
+						name: state.name,
+						status: state.status,
+						argsText: state.argsBuffer,
+						argsObject: state.argsObject,
+						output: state.output,
+						timestamp: Date.now(),
+						parentMessageId: assistantMessageId,
+					}));
+				}
+				throw error;
+			}
+		},
+	};
+}
diff --git a/src/pages/aiAssistant/assistant.js b/src/pages/aiAssistant/assistant.js
index da148c31a..c2d40e93e 100644
--- a/src/pages/aiAssistant/assistant.js
+++ b/src/pages/aiAssistant/assistant.js
@@ -1,25 +1,18 @@
-import { isAIMessageChunk, isToolMessageChunk } from "@langchain/core/messages";
-import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
 import { createReactAgent } from "@langchain/langgraph/prebuilt";
+import { ChatOpenAI } from "@langchain/openai";
 import confirm from "dialogs/confirm";
 import select from "dialogs/select";
 import Ref from "html-tag-js/ref";
 import EditorFile from "lib/editorFile";
-import settings from "lib/settings";
-import markdownIt from "markdown-it";
+import { createSessionManager } from "./agent/sessionManager";
 import styles from "./assistant.m.scss";
-import {
-	addConversation,
-	addMessageToDB,
-	deleteConversation,
-	getAllConversations,
-	getConversation,
-	getMessagesForConversation,
-	updateConversation,
-} from "./db";
 import { CordovaSqliteSaver } from "./memory";
+import { createChatStore } from "./state/chatStore";
 import { SYSTEM_PROMPT } from "./system_prompt";
 import { allTools } from "./tools";
+import { createMessageRenderer } from "./ui/messageRenderer";
+
+const GEMINI_API_KEY = ""; // Replace
 
 export default function openAIAssistantPage() {
 	// References
@@ -31,21 +24,26 @@ export default function openAIAssistantPage() {
 	const stopBtnRef = Ref();
 
 	let currentProfile = "ask";
-	let currentConversationId = null;
-	let currentConversation = null;
-	let chatHistory = [];
 	let currentController = null;
 	let aiTabInstance;
 
-	const GEMINI_API_KEY = ""; // Replace
+	const chatStore = createChatStore();
+
+	const messageRenderer = createMessageRenderer({
+		messageContainerRef,
+		onUserEdit: handleEditMessage,
+	});
 
 	const agentCheckpointer = new CordovaSqliteSaver();
-	const model = new ChatGoogleGenerativeAI({
-		model: "gemini-2.0-flash",
+	const model = new ChatOpenAI({
+		model: "openrouter/sonoma-sky-alpha",
 		apiKey: GEMINI_API_KEY,
+		streaming: true,
+		configuration: {
+			baseURL: "https://openrouter.ai/api/v1",
+		},
 	});
 
-	// Get all tools as an array for the agent including search
 	const toolsArray = Object.values(allTools);
 
 	const agent = createReactAgent({
@@ -55,296 +53,34 @@ export default function openAIAssistantPage() {
 		stateModifier: SYSTEM_PROMPT,
 	});
 
-	const generateConversationId = () =>
-		`conv_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
-	const generateMessageId = (() => {
-		let counter = 0;
-		return () => `msg_${Date.now()}_${++counter}`;
-	})();
-
-	const formatTime = (timestamp) =>
-		new Date(timestamp).toLocaleTimeString([], {
-			hour: "2-digit",
-			minute: "2-digit",
-		});
-
-	const copyToClipboard = (text) => {
-		cordova.plugins.clipboard.copy(text || "");
-	};
-
-	const scrollToBottom = () => {
-		messageContainerRef.el.scrollTop = messageContainerRef.el.scrollHeight;
-	};
-
-	// Format code blocks with custom UI elements
-	const formatCodeBlocks = (contentElement, content) => {
-		if (!contentElement) return;
-
-		const md = markdownIt({
-			html: true,
-			linkify: true,
-			typographer: true,
-		});
-
-		contentElement.innerHTML = md.render(content);
-
-		contentElement.innerHTML = contentElement.innerHTML.replace(
-			/<pre><code(?: class="language-(\w+)")?>([\s\S]*?)<\/code><\/pre>/g,
-			(match, language, code) => {
-				language = language || "plaintext";
-				return `
-					<div class="code-block">
-						<div class="code-header">
-							<div class="code-language">
-								<i class="icon code"></i>
-								<span>${language}</span>
-							</div>
-							<div class="code-actions">
-								<button class="btn btn-icon code-copy" title="Copy code">
-									<i class="icon copy"></i>
-								</button>
-							</div>
-						</div>
-						<div class="code-content">
-							<pre><code class="language-${language}">${code}</code></pre>
-						</div>
-						<div class="code-expand">
-							<i class="icon keyboard_arrow_down"></i>
-							<span>Show more</span>
-						</div>
-					</div>
-				`;
-			},
-		);
+	const sessionManager = createSessionManager(agent);
 
-		contentElement.querySelectorAll(".code-block").forEach((codeBlock) => {
-			const codeContent = codeBlock.querySelector(".code-content");
-			const codeElement = codeBlock.querySelector("pre code");
-			const copyButton = codeBlock.querySelector(".code-copy");
-			const expandButton = codeBlock.querySelector(".code-expand");
-
-			// Apply Ace highlighting
-			if (codeElement) {
-				const langMatch = codeElement.className.match(/language-(\w+)/);
-				if (langMatch) {
-					const langMap = {
-						bash: "sh",
-						shell: "sh",
-					};
-					const lang = langMatch[1];
-					const mappedLang = langMap[lang] || lang;
-					const highlight = ace.require("ace/ext/static_highlight");
-					highlight.render(
-						codeElement.textContent,
-						`ace/mode/${mappedLang}`,
-						settings.value.editorTheme.startsWith("ace/theme/")
-							? settings.value.editorTheme
-							: "ace/theme/" + settings.value.editorTheme,
-						1,
-						true,
-						(highlighted) => {
-							aiTabInstance?.addStyle(highlighted.css);
-							codeElement.innerHTML = highlighted.html;
-						},
-					);
-				}
-			}
+	function getActiveConversationId() {
+		return chatStore.getConversationId();
+	}
 
-			// copy functionality
-			copyButton.addEventListener("click", async () => {
-				const code = codeElement?.textContent || "";
-				try {
-					cordova.plugins.clipboard.copy(code);
-					copyButton.querySelector("i").className = "icon check";
-					setTimeout(() => {
-						copyButton.querySelector("i").className = "icon copy";
-					}, 2000);
-				} catch (err) {
-					copyButton.querySelector("i").className =
-						"icon warningreport_problem";
-					setTimeout(() => {
-						copyButton.querySelector("i").className = "icon copy";
-					}, 2000);
-				}
-			});
+	function handleProfileSwitch(profile, { updateStore = true } = {}) {
+		const iconEl = profileBtnRef.el?.querySelector("i:first-child");
+		const textEl = profileBtnRef.el?.querySelector("span");
 
-			// expand/collapse functionality
-			expandButton.addEventListener("click", () => {
-				const isExpanded = codeContent.classList.contains("expanded");
-				codeContent.classList.toggle("expanded", !isExpanded);
-				expandButton.innerHTML = isExpanded
-					? `<i class="icon keyboard_arrow_down"></i> <span>Show more</span>`
-					: `<i class="icon keyboard_arrow_up"></i> <span>Show less</span>`;
-			});
+		currentProfile = profile;
 
-			// Only show expand button if content overflows
-			if (codeContent.scrollHeight <= codeContent.clientHeight) {
-				expandButton.style.display = "none";
+		if (iconEl && textEl) {
+			if (profile === "ask") {
+				iconEl.className = "icon help";
+				textEl.textContent = "Ask";
+			} else {
+				iconEl.className = "icon edit";
+				textEl.textContent = "Write";
 			}
-		});
-	};
-
-	const addMessage = (message) => {
-		const messageEl = tag("div", {
-			className: `message ${message.role === "user" ? "user" : ""}`,
-			id: `message-${message.id}`,
-		});
-		const messageHeader = tag("div", {
-			className: "message-header",
-		});
-		const messageSender = tag("div", {
-			className: `message-sender ${message.role === "user" ? "user" : "ai"}`,
-			textContent: message.role === "user" ? "You" : "AI",
-		});
-		const messageActions = tag("div", {
-			className: "message-actions",
-		});
-		const messageTime = tag("div", {
-			className: "message-time",
-			textContent: formatTime(message.timestamp),
-		});
-		messageActions.appendChild(messageTime);
-
-		if (message.role === "assistant") {
-			const copyBtn = tag("button", {
-				className: "btn btn-icon",
-				title: "Copy message",
-				child: tag("i", {
-					className: "icon copy",
-				}),
-				onclick: () => copyToClipboard(message.content),
-			});
-			messageActions.appendChild(copyBtn);
 		}
 
-		if (message.role === "user") {
-			const editBtn = tag("button", {
-				className: "btn btn-icon",
-				title: "Edit message",
-				child: tag("i", {
-					className: "icon edit",
-				}),
-				onclick: () => editMessage(message.id),
-			});
-			messageActions.appendChild(editBtn);
-		}
-
-		messageHeader.appendChild(messageSender);
-		messageHeader.appendChild(messageActions);
-
-		const messageContent = tag("div", {
-			className: "message-content md",
-		});
-
-		if (message.role === "user") {
-			messageContent.textContent = message.content;
-		} else {
-			const md = markdownIt({
-				html: true,
-				linkify: true,
-				typographer: true,
-			});
-			messageContent.innerHTML = md.render(message.content);
-		}
-
-		messageEl.appendChild(messageHeader);
-		messageEl.appendChild(messageContent);
-		messageContainerRef.el.appendChild(messageEl);
-		scrollToBottom();
-	};
-
-	const editMessage = (messageId) => {
-		const message = chatHistory.find((msg) => msg.id === messageId);
-		if (!message) return;
-
-		const messageEl = messageContainerRef.el.querySelector(
-			`#message-${message.id}`,
-		);
-		const messageContent = messageEl.querySelector(".message-content");
-
-		const editContainer = <div className="edit-container"></div>;
-
-		const textarea = (
-			<textarea
-				className="edit-textarea"
-				defaultValue={message.content}
-				placeholder="Edit your message..."
-				onkeydown={(e) => {
-					if (e.key === "Enter" && e.ctrlKey) {
-						e.preventDefault();
-						// TODO: save edit
-					} else if (e.key === "Escape") {
-						e.preventDefault();
-						// TODO: cancel edit
-					}
-				}}
-			/>
-		);
-
-		const editActions = <div className="edit-actions"></div>;
-
-		const editInfo = (
-			<div className="edit-info">
-				Press Ctrl+Enter to save, Escape to cancel
-			</div>
-		);
-
-		const editButtons = (
-			<div className="edit-buttons">
-				<button
-					className="btn btn-sm btn-outline"
-					onclick={() => {
-						const md = markdownIt({
-							html: true,
-							linkify: true,
-							typographer: true,
-						});
-						messageContent.innerHTML = md.render(message.content);
-					}}
-				>
-					<i className="icon clearclose"></i>{" "}
-					<span className="btn-text">Cancel</span>
-				</button>
-				<button className="btn btn-sm btn-primary">
-					<i className="icon check"></i> <span className="btn-text">Save</span>
-				</button>
-			</div>
-		);
-
-		editActions.append(editInfo, editButtons);
-		editContainer.append(textarea, editActions);
-
-		messageContent.innerHTML = "";
-		messageContent.appendChild(editContainer);
-
-		textarea.focus();
-		textarea.select();
-	};
-
-	/**
-	 * Updates the profile button appearance and state
-	 * @param {string} profile - Profile type ("ask" or "write")
-	 */
-	const handleProfileSwitch = (profile) => {
-		const iconEl = profileBtnRef.el.querySelector("i:first-child");
-		const textEl = profileBtnRef.el.querySelector("span");
-
-		currentProfile = profile;
-
-		// Update button appearance based on selected profile
-		if (profile === "ask") {
-			iconEl.className = "icon help";
-			textEl.textContent = "Ask";
-		} else {
-			iconEl.className = "icon edit";
-			textEl.textContent = "Write";
+		if (updateStore) {
+			void chatStore.setProfile(profile);
 		}
-	};
+	}
 
-	/**
-	 * Shows profile selection menu
-	 */
-	const showProfileMenu = async (e) => {
+	async function showProfileMenu(e) {
 		e.preventDefault();
 		const profile = await select("Select Profile", [
 			{
@@ -358,68 +94,44 @@ export default function openAIAssistantPage() {
 				icon: "edit",
 			},
 		]);
-		handleProfileSwitch(profile);
-	};
-	const toggleHistorySidebar = () => {
-		historySidebarRef.classList.toggle("hidden");
-	};
-
-	const showLoading = () => {
-		const loadingEl = tag("div", {
-			className: "ai_loading",
-			id: "loading-indicator",
-		});
-		const loadingDots = tag("div", {
-			className: "loading-dots",
-		});
-
-		for (let i = 0; i < 3; i++) {
-			const dot = tag("div", {
-				className: "loading-dot",
-			});
-			loadingDots.appendChild(dot);
-		}
-
-		const text = tag("span", {
-			textContent: "AI is thinking...",
-		});
-
-		loadingEl.appendChild(loadingDots);
-		loadingEl.appendChild(text);
+		if (profile) handleProfileSwitch(profile);
+	}
 
-		messageContainerRef.el.appendChild(loadingEl);
-		scrollToBottom();
-	};
+	function toggleHistorySidebar() {
+		if (!historySidebarRef.el) return;
+		historySidebarRef.el.classList.toggle("hidden");
+	}
 
-	const removeLoading = () => {
-		const loadingEl =
-			messageContainerRef.el.querySelector("#loading-indicator");
-		if (loadingEl) {
-			messageContainerRef.el.removeChild(loadingEl);
+	function handleChatInput() {
+		if (!chatInputRef.el) return;
+		const value = chatInputRef.el.value || "";
+		if (sendBtnRef.el) {
+			sendBtnRef.el.disabled = value.trim().length === 0;
 		}
-	};
-
-	const handleChatInput = () => {
-		sendBtnRef.el.disabled = chatInputRef.value.trim().length === 0;
 		chatInputRef.el.style.height = "auto";
 		chatInputRef.el.style.height =
 			Math.min(chatInputRef.el.scrollHeight, 120) + `px`;
-	};
+	}
 
 	async function updateHistorySidebar() {
 		if (!historySidebarRef.el) return;
-		const conversations = await getAllConversations();
+		const conversations = await chatStore.listConversations();
 		const historyItemsContainer =
 			historySidebarRef.el.querySelector(".chat-history");
 		if (!historyItemsContainer) return;
+
 		historyItemsContainer.innerHTML = "";
+		const activeConversationId = getActiveConversationId();
+
 		conversations.forEach((conv) => {
 			const item = (
 				<div
-					className={`history-item ${conv.id === currentConversationId ? "active" : ""}`}
+					className={`history-item ${
+						conv.id === activeConversationId ? "active" : ""
+					}`}
 					onclick={() => {
-						if (conv.id !== currentConversationId) {
-							loadOrCreateConversation(conv.id);
+						if (conv.id !== activeConversationId) {
+							loadConversation(conv.id);
 							toggleHistorySidebar();
 						}
 					}}
@@ -433,390 +145,363 @@ export default function openAIAssistantPage() {
 					></i>
 				</div>
 			);
-
-			const text = (
-				<div className="history-text">{conv.title || "Untitled Chat"}</div>
+			const textWrapper = (
+				<div className="history-text">{conv.title || "Untitled"}</div>
 			);
-
 			const deleteBtn = (
-				<button className="btn btn-icon history-delete" title="Delete chat">
+				<button
+					className="btn btn-icon history-delete"
+					title="Delete conversation"
+					onclick={async (e) => {
+						e.stopPropagation();
+						const confirmed = await confirm(
+							"Delete conversation?",
+							"This will delete the conversation permanently.",
+						);
+						if (!confirmed) return;
+						const previousActiveId = getActiveConversationId();
+						await chatStore.deleteConversationById(conv.id);
+						if (conv.id === previousActiveId) {
+							await reloadOrCreateConversation(null);
+						}
+						updateHistorySidebar();
+					}}
+				>
 					<i className="icon delete"></i>
 				</button>
 			);
-			deleteBtn.onclick = async (e) => {
-				e.stopPropagation();
-				const confirmation = await confirm(
-					"Delete Chat",
-					`Are you sure you want to delete "<strong>${conv.title || "Untitled Chat"}</strong>"? This action cannot be undone.`,
-					true,
-				);
-				if (!confirmation) return;
-				await deleteConversation(conv.id);
-				if (conv.id === currentConversationId) {
-					await loadOrCreateConversation(null);
-				}
-				await updateHistorySidebar();
-			};
 
-			item.append(iconWrapper, text, deleteBtn);
+			item.append(iconWrapper, textWrapper, deleteBtn);
 			historyItemsContainer.appendChild(item);
 		});
 	}
 
-	async function loadOrCreateConversation(conversationIdToLoad) {
-		if (currentController) currentController.abort();
+	async function loadConversation(conversationId) {
+		currentController?.abort();
 		currentController = null;
 
-		if (conversationIdToLoad) {
-			const conversation = await getConversation(conversationIdToLoad);
-			if (conversation) {
-				currentConversation = conversation;
-				currentConversationId = conversation.id;
-				handleProfileSwitch(currentConversation.profile || "ask");
-				const messagesFromDB = await getMessagesForConversation(
-					currentConversationId,
-				);
-				if (messageContainerRef.el) messageContainerRef.el.innerHTML = "";
-				chatHistory = [];
-				messagesFromDB.forEach((msg) => {
-					addMessage(msg);
-					if (msg.role === "assistant") {
-						formatCodeBlocks(
-							messageContainerRef.el.querySelector(
-								`#message-${msg.id} .message-content`,
-							),
-							msg.content,
-						);
+		messageRenderer.clearMessages();
+
+		if (conversationId) {
+			const loaded = await chatStore.loadConversation(conversationId);
+			if (loaded) {
+				currentProfile = chatStore.getProfile();
+				handleProfileSwitch(currentProfile, { updateStore: false });
+
+				loaded.messages.forEach((msg) => {
+					if (msg.role === "tool") {
+						try {
+							const toolPayload = JSON.parse(msg.content);
+							const toolState = {
+								id: toolPayload.id || msg.id,
+								name: toolPayload.name,
+								status: toolPayload.status,
+								argsText:
+									typeof toolPayload.args === "string"
+										? toolPayload.args
+										: undefined,
+								argsObject:
+									typeof toolPayload.args === "object"
+										? toolPayload.args
+										: undefined,
+								output: toolPayload.output,
+								stage: "complete",
+								isNew: true,
+								parentMessageId: toolPayload.parentMessageId,
+							};
+							messageRenderer.renderToolEvent(toolState, {
+								targetMessageId: toolPayload.parentMessageId,
+								fallbackToStandalone: true,
+							});
+						} catch (error) {
+							console.error("Failed to parse tool message", error);
+						}
+					} else {
+						messageRenderer.renderMessage(msg);
 					}
-					chatHistory.push({
-						id: msg.id,
-						role: msg.role,
-						content: msg.content,
-					});
 				});
-			} else {
-				console.warn(
-					`Conversation ${conversationIdToLoad} not found. Starting new one.`,
-				);
-				conversationIdToLoad = null;
 			}
 		}
 
-		if (!conversationIdToLoad) {
-			currentConversationId = generateConversationId();
-			const now = Date.now();
-			currentConversation = {
-				id: currentConversationId,
-				title: "New Chat",
-				createdAt: now,
-				lastModifiedAt: now,
-				profile: currentProfile,
-			};
-			await addConversation(currentConversation);
-			chatHistory = [];
-			if (messageContainerRef.el) messageContainerRef.el.innerHTML = "";
+		if (!chatStore.getConversation()) {
+			await chatStore.startNewConversation(currentProfile);
 		}
+
 		updateHistorySidebar();
-		if (chatInputRef.el) chatInputRef.el.focus();
+		chatInputRef.el?.focus();
 	}
 
-	async function saveUserMessageAndUpdateConversation(
-		userMessage,
-		currentConv,
-		isFirstUIMessage,
-	) {
-		if (isFirstUIMessage && currentConv && currentConv.title === "New Chat") {
-			currentConv.title =
-				userMessage.content.substring(0, 30) +
-				(userMessage.content.length > 30 ? "..." : "");
-		}
-		if (currentConv) {
-			currentConv.lastModifiedAt = Date.now();
-			await updateConversation(currentConv);
+	async function reloadOrCreateConversation(conversationId) {
+		if (conversationId) {
+			await loadConversation(conversationId);
+			return;
 		}
-		await addMessageToDB(userMessage);
+		await chatStore.startNewConversation(currentProfile);
+		messageRenderer.clearMessages();
+		updateHistorySidebar();
+		chatInputRef.el?.focus();
 	}
 
-	const handleSendBtn = async () => {
-		const userInput = chatInputRef.value.trim();
+	async function handleSendBtn() {
+		const inputEl = chatInputRef.el;
+		if (!inputEl) return;
 
+		const userInput = (inputEl.value || "").trim();
 		if (!userInput) return;
-		if (!currentConversationId) {
-			alert("Error: No active conversation. Please start a new chat.");
-			return;
-		}
 
-		const userMsgId = {
-			id: generateMessageId(),
-			conversationId: currentConversationId,
-			role: "user",
-			content: userInput,
-			timestamp: Date.now(),
-		};
-		addMessage(userMsgId);
-
-		const userMessageForAgent = {
-			role: "user",
-			content: userInput,
-		};
-		chatHistory.push({
-			...userMessageForAgent,
-			id: userMsgId.id,
-		});
+		const userMessage = await chatStore.prepareMessage("user", userInput);
+		messageRenderer.renderMessage(userMessage, { renderMarkdown: false });
 
-		chatInputRef.el.value = "";
+		inputEl.value = "";
 		handleChatInput();
-		saveUserMessageAndUpdateConversation(
-			userMsgId,
-			currentConversation,
-			chatHistory.filter((msg) => msg.role === "user").length === 1,
-		);
 
-		showLoading();
+		messageRenderer.showLoadingIndicator();
 
-		let messagesForAgentTurn;
-		if (chatHistory.filter((msg) => msg.role === "user").length === 1) {
-			messagesForAgentTurn = [userMessageForAgent];
-		} else {
-			messagesForAgentTurn = [userMessageForAgent];
-		}
+		const { isFirstUserMessage } =
+			await chatStore.commitUserMessage(userMessage);
+
+		updateHistorySidebar();
+
+		const assistantMessageId = chatStore.generateMessageId();
+		const assistantTimestamp = Date.now();
+		const assistantMessage = await chatStore.prepareMessage("assistant", "", {
+			id: assistantMessageId,
+			timestamp: assistantTimestamp,
+		});
 
 		currentController = new AbortController();
-		sendBtnRef.el.style.display = "none";
-		stopBtnRef.el.style.display = "block";
+		if (sendBtnRef.el) sendBtnRef.el.style.display = "none";
+		if (stopBtnRef.el) stopBtnRef.el.style.display = "block";
 
-		const assistantMsgId = generateMessageId();
 		let streamedContent = "";
-		let wasError = false;
-		let finalTimestamp = Date.now();
-		const md = markdownIt({
-			html: true,
-			linkify: true,
-			typographer: true,
-		});
+		let assistantMessageRendered = false;
 
 		try {
-			//Chat history not passed anymore, memory saver and checkpoint will handle context
-			const inputsForAgent = {
-				messages: messagesForAgentTurn,
-			};
-
-			const stream = await agent.stream(inputsForAgent, {
-				streamMode: "messages",
+			const result = await sessionManager.runTurn({
+				conversationId: getActiveConversationId(),
+				userMessage: { role: "user", content: userInput },
 				signal: currentController.signal,
-				//thread_id is the checkpoint marker
-				configurable: {
-					thread_id: currentConversationId,
+				assistantMessageId,
+				onStart: () => {
+					messageRenderer.removeLoadingIndicator();
+					messageRenderer.renderAssistantPlaceholder(assistantMessage);
+					assistantMessageRendered = true;
+				},
+				onToken: ({ fullText }) => {
+					streamedContent = fullText;
+					messageRenderer.updateAssistantStreaming(
+						assistantMessageId,
+						fullText,
+						{ showCursor: true },
+					);
+				},
+				onToolEvent: (toolState) => {
+					messageRenderer.renderToolEvent(toolState, {
+						targetMessageId: assistantMessageId,
+					});
 				},
 			});
 
-			// Remove loading indicator
-			removeLoading();
-
-			const assistantPlaceholderMsg = {
-				id: assistantMsgId,
-				conversationId: currentConversationId,
-				role: "assistant",
-				content: "▌",
-				timestamp: Date.now(),
-			};
-			addMessage(assistantPlaceholderMsg);
+			streamedContent = result.content;
 
-			const messageElContent = messageContainerRef.el.querySelector(
-				`#message-${assistantMsgId} .message-content`,
+			messageRenderer.updateAssistantStreaming(
+				assistantMessageId,
+				streamedContent,
+				{ showCursor: false },
 			);
 
-			for await (const eventData of stream) {
-				let messageChunkPayload = null;
-				if (
-					Array.isArray(eventData) &&
-					eventData.length > 0 &&
-					eventData[0] &&
-					typeof eventData[0].content !== "undefined"
-				) {
-					messageChunkPayload = eventData[0];
-				} else if (eventData && typeof eventData.content !== "undefined") {
-					messageChunkPayload = eventData;
-				}
+			const finalTimestamp = Date.now();
+			assistantMessage.content = streamedContent;
+			assistantMessage.timestamp = finalTimestamp;
+			messageRenderer.finalizeAssistantMessage(
+				assistantMessageId,
+				streamedContent,
+				finalTimestamp,
+			);
 
-				let chunkText = "";
-				if (messageChunkPayload) {
-					if (isToolMessageChunk(messageChunkPayload)) {
-						console.log("tool call", messageChunkPayload);
-					} else if (
-						isAIMessageChunk(messageChunkPayload) &&
-						messageChunkPayload.tool_call_chunks?.length
-					) {
-						chunkText = messageChunkPayload.tool_call_chunks
-							.map((tc) => (tc.args ? JSON.stringify(tc.args) : ""))
-							.join("\n");
-					} else if (typeof messageChunkPayload.content === "string") {
-						chunkText = messageChunkPayload.content;
-					} else if (typeof messageChunkPayload === "string") {
-						chunkText = messageChunkPayload;
-					}
-				}
+			await chatStore.commitAssistantMessage(assistantMessage, {
+				wasError: false,
+			});
 
-				if (chunkText) {
-					streamedContent += chunkText;
-					if (messageElContent) {
-						messageElContent.innerHTML = md.render(streamedContent + " ▌");
-						scrollToBottom();
-					}
+			if (Array.isArray(result.toolRuns) && result.toolRuns.length) {
+				for (const toolRun of result.toolRuns) {
+					await chatStore.commitToolMessage(toolRun);
 				}
 			}
-			finalTimestamp = Date.now();
-			if (messageElContent) {
-				messageElContent.innerHTML = md.render(streamedContent);
-			}
-		} catch (err) {
-			removeLoading();
-			wasError = true;
-			finalTimestamp = Date.now();
+
+			updateHistorySidebar();
+		} catch (error) {
+			messageRenderer.removeLoadingIndicator();
+
 			const isAbort =
-				err.name === "AbortError" ||
-				(err.message && /abort/i.test(err.message));
+				error.name === "AbortError" ||
+				(error.message && /abort/i.test(error.message));
 
 			const errorContent = isAbort
 				? `<span class="badge badge-yellow">Streaming cancelled by user.</span>`
-				: `<span class="badge badge-red">Error: ${err.message || "Unknown error."}</span>`;
+				: `<span class="badge badge-red">Error: ${error.message || "Unknown error."}</span>`;
 
-			streamedContent += errorContent;
+			if (!assistantMessageRendered) {
+				messageRenderer.renderAssistantPlaceholder(assistantMessage);
+				assistantMessageRendered = true;
+			}
 
-			const targetMessageElContent = messageContainerRef.el.querySelector(
-				`#message-${assistantMsgId} .message-content`,
+			assistantMessage.content = `${streamedContent}${errorContent}`;
+			assistantMessage.timestamp = Date.now();
+			messageRenderer.updateAssistantStreaming(
+				assistantMessageId,
+				assistantMessage.content,
 			);
-			if (targetMessageElContent) {
-				targetMessageElContent.innerHTML += errorContent;
-			} else {
-				const assistantErrorMsg = {
-					id: assistantMsgId,
-					conversationId: currentConversationId,
-					role: "assistant",
-					content: errorContent,
-					timestamp: Date.now(),
-				};
-				addMessage(assistantErrorMsg);
+			messageRenderer.finalizeAssistantMessage(
+				assistantMessageId,
+				assistantMessage.content,
+				assistantMessage.timestamp,
+			);
+
+			await chatStore.commitAssistantMessage(assistantMessage, {
+				wasError: !isAbort,
+			});
+
+			if (error.toolRuns) {
+				for (const toolRun of error.toolRuns) {
+					await chatStore.commitToolMessage(toolRun);
+				}
 			}
+
+			updateHistorySidebar();
 		} finally {
 			currentController = null;
 			if (sendBtnRef.el) sendBtnRef.el.style.display = "block";
 			if (stopBtnRef.el) stopBtnRef.el.style.display = "none";
 			handleChatInput();
+		}
 
-			const assistantFinalData = {
-				id: assistantMsgId,
-				conversationId: currentConversationId,
-				role: "assistant",
-				content: streamedContent,
-				timestamp: finalTimestamp,
-			};
-			await addMessageToDB(assistantFinalData);
-			if (currentConversation && !wasError) {
-				currentConversation.lastModifiedAt = finalTimestamp;
-				await updateConversation(currentConversation);
-			}
-
-			if (!wasError) {
-				chatHistory.push({
-					id: assistantFinalData.id,
-					role: "assistant",
-					content: streamedContent,
-				});
-			}
+		if (isFirstUserMessage) {
 			updateHistorySidebar();
-
-			const messageContentElToFinalize = messageContainerRef.el?.querySelector(
-				`#message-${assistantMsgId} .message-content`,
-			);
-			if (messageContentElToFinalize && !wasError) {
-				const timeEl = messageContainerRef.el.querySelector(
-					`#message-${assistantMsgId} .message-actions .message-time`,
-				);
-				if (timeEl) timeEl.textContent = formatTime(finalTimestamp);
-
-				formatCodeBlocks(messageContentElToFinalize, streamedContent);
-			}
 		}
-	};
+	}
 
-	const handleStopBtn = () => {
+	function handleStopBtn() {
 		if (currentController) {
-			currentController?.abort();
+			currentController.abort();
 			currentController = null;
-			stopBtnRef.el.style.display = "none";
-			sendBtnRef.el.style.display = "block";
+			if (stopBtnRef.el) stopBtnRef.el.style.display = "none";
+			if (sendBtnRef.el) sendBtnRef.el.style.display = "block";
 		}
-	};
+	}
+
+	function handleEditMessage(message) {
+		if (!message || !messageContainerRef.el) return;
+		const messageEl = messageContainerRef.el.querySelector(
+			`#message-${message.id}`,
+		);
+		if (!messageEl) return;
+
+		const messageContent = messageEl.querySelector(".message-content");
+		if (!messageContent) return;
+
+		const editContainer = <div className="edit-container"></div>;
+
+		const textarea = (
+			<textarea
+				className="edit-textarea"
+				defaultValue={message.content}
+				placeholder="Edit your message..."
+				onkeydown={(e) => {
+					if (e.key === "Enter" && e.ctrlKey) {
+						e.preventDefault();
+						// TODO: save edit
+					} else if (e.key === "Escape") {
+						e.preventDefault();
+						messageContent.textContent = message.content;
+					}
+				}}
+			/>
+		);
+
+		const editActions = <div className="edit-actions"></div>;
+
+		const editInfo = (
+			<div className="edit-info">
+				Press Ctrl+Enter to save, Escape to cancel
+			</div>
+		);
+
+		const editButtons = (
+			<div className="edit-buttons">
+				<button
+					className="btn btn-sm btn-outline"
+					onclick={() => {
+						messageContent.textContent = message.content;
+					}}
+				>
+					<i className="icon clearclose"></i>{" "}
+					<span className="btn-text">Cancel</span>
+				</button>
+				<button className="btn btn-sm btn-primary">
+					<i className="icon check"></i> <span className="btn-text">Save</span>
+				</button>
+			</div>
+		);
+
+		editActions.append(editInfo, editButtons);
+		editContainer.append(textarea, editActions);
+
+		messageContent.innerHTML = "";
+		messageContent.appendChild(editContainer);
+
+		textarea.focus();
+		textarea.select();
+	}
 
 	const aiAssistantContainer = (
 		<div className="chat-container">
-			{/* Header */}
 			<div className="chat-header">
 				<div className="header-left">
 					<button
-						className="btn btn-sm btn-outline"
-						id="new-chat-btn"
-						onclick={() => loadOrCreateConversation(null)}
+						className="btn btn-icon"
+						title="Toggle chat history"
+						onclick={toggleHistorySidebar}
 					>
-						<i className="icon add"></i>
-						<span className="btn-text">New Chat</span>
+						<i className="icon menu"></i>
 					</button>
 					<div className="separator"></div>
 					<button
-						onclick={toggleHistorySidebar}
-						className="btn btn-sm btn-outline"
-						id="toggle-history-btn"
+						className="btn btn-secondary"
+						onclick={() => reloadOrCreateConversation(null)}
 					>
-						<i className="icon historyrestore"></i>
-						<span className="btn-text">History</span>
+						<i className="icon add"></i>
+						<span>New Chat</span>
 					</button>
-					<div className="separator"></div>
-					<div className="profile-switcher">
-						<button
-							className="profile-button"
-							id="profile-btn"
-							ref={profileBtnRef}
-							onclick={showProfileMenu}
-						>
-							<i className="icon help"></i>
-							<span>Ask</span>
-							<i className="icon keyboard_arrow_down"></i>
-						</button>
-					</div>
 				</div>
 				<div className="header-right">
 					<button
-						className="btn btn-icon btn-outline"
-						id="settings-btn"
-						title="Settings"
+						className="btn btn-secondary"
+						onclick={showProfileMenu}
+						ref={profileBtnRef}
 					>
-						<i className="icon settings"></i>
-						{/* onclick for settings TODO: e.g. onclick={openSettingsPage} */}
+						<i className="icon help"></i>
+						<span>Ask</span>
+						<i className="icon keyboard_arrow_down"></i>
 					</button>
 				</div>
 			</div>
 
-			{/* Main content */}
 			<div className="chat-main">
-				<div
-					className="chat-sidebar hidden"
-					id="chat-sidebar"
-					ref={historySidebarRef}
-				>
+				<div className="chat-sidebar hidden" ref={historySidebarRef}>
 					<div className="sidebar-header">
-						<h3 className="sidebar-title">CHAT HISTORY</h3>
-						<button
-							className="btn btn-icon"
-							title="New Chat from Sidebar"
-							onclick={() => loadOrCreateConversation(null)}
-						>
-							<i className="icon add"></i>
-						</button>
-					</div>
-					<div className="chat-history">
-						{/* Populated by updateHistorySidebar */}
+						<div className="sidebar-title">History</div>
+						<div className="sidebar-actions">
+							<button
+								className="btn btn-icon"
+								title="New Chat from Sidebar"
+								onclick={() => reloadOrCreateConversation(null)}
+							>
+								<i className="icon add"></i>
+							</button>
+						</div>
 					</div>
+					<div className="chat-history"></div>
 				</div>
 
 				<div className="messages-wrapper" id="messages-wrapper">
@@ -824,18 +509,14 @@ export default function openAIAssistantPage() {
 						className="messages-container"
 						id="messages-container"
 						ref={messageContainerRef}
-					>
-						{/* Messages are added by addMessage function */}
-					</div>
+					></div>
 				</div>
 			</div>
 
-			{/* Input area */}
 			<div className="input-area">
 				<div className="input-container">
 					<button className="attach-btn" title="Attach file">
 						<i className="icon attach_file"></i>
-						{/* onclick for attach file: e.g. onclick={handleAttachFile} */}
 					</button>
 					<textarea
 						className="chat-input"
@@ -865,7 +546,7 @@ export default function openAIAssistantPage() {
 							title="Stop"
 							style={{ display: "none" }}
 						>
-							<i className="icon block"></i> {/* Upstream icon */}
+							<i className="icon block"></i>
 						</button>
 						<button
 							className="action-btn send-btn"
@@ -873,7 +554,7 @@ export default function openAIAssistantPage() {
 							ref={sendBtnRef}
 							onclick={handleSendBtn}
 							title="Send"
-							disabled // Start disabled
+							disabled
 						>
 							<svg
 								width="16"
@@ -895,11 +576,11 @@ export default function openAIAssistantPage() {
 
 	(async () => {
 		try {
-			const conversations = await getAllConversations();
+			const conversations = await chatStore.listConversations();
 			if (conversations.length > 0) {
-				await loadOrCreateConversation(conversations[0].id);
+				await loadConversation(conversations[0].id);
 			} else {
-				await loadOrCreateConversation(null);
+				await reloadOrCreateConversation(null);
 			}
 		} catch (error) {
 			console.error(
@@ -908,7 +589,6 @@ export default function openAIAssistantPage() {
 			);
 			const errDiv = `<div class="error-message acode-error">Failed to initialize AI Assistant: ${error.message}. Ensure SQLite plugin is functional.</div>`;
 			if (messageContainerRef.el) {
-				// Check after potential rendering by EditorFile
 				messageContainerRef.el.innerHTML = errDiv;
 			} else {
 				alert(
@@ -934,4 +614,6 @@ export default function openAIAssistantPage() {
 		stylesheets: [styles],
 		hideQuickTools: true,
 	});
+
+	messageRenderer.setEditorInstance(aiTabInstance);
 }
diff --git a/src/pages/aiAssistant/assistant.m.scss b/src/pages/aiAssistant/assistant.m.scss
index 9ebe00e85..52ff0c752 100644
--- a/src/pages/aiAssistant/assistant.m.scss
+++ b/src/pages/aiAssistant/assistant.m.scss
@@ -258,6 +258,272 @@
       );
     }
 
+    .message.tool {
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 35%,
+        transparent
+      );
+    }
+
+    .tool-card {
+      border-radius: 0.5rem;
+      border: 1px solid var(--border-color);
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 10%,
+        transparent
+      );
+      overflow: hidden;
+    }
+
+    .assistant-tools {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin: 0.75rem 0 0.5rem;
+    }
+
+    .assistant-tool {
+      border-radius: 0.5rem;
+      border: 1px solid color-mix(
+        in srgb,
+        var(--border-color) 80%,
+        transparent
+      );
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 15%,
+        transparent
+      );
+      overflow: hidden;
+    }
+
+    .assistant-tool__summary {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      cursor: pointer;
+      background: color-mix(
+        in srgb,
+        var(--popup-background-color) 25%,
+        transparent
+      );
+      transition: background 0.15s ease;
+    }
+
+    .assistant-tool__summary:hover {
+      background: color-mix(
+        in srgb,
+        var(--popup-background-color) 35%,
+        transparent
+      );
+    }
+
+    .assistant-tool__summary.expanded {
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .assistant-tool__title {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.15rem;
+      max-width: 70%;
+    }
+
+    .assistant-tool__name {
+      font-size: 0.8rem;
+      font-weight: 600;
+      color: var(--primary-text-color);
+    }
+
+    .assistant-tool__preview {
+      font-size: 0.7rem;
+      color: color-mix(in srgb, var(--secondary-text-color) 85%, transparent);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 100%;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    .assistant-tool__preview.visible {
+      opacity: 1;
+    }
+
+    .assistant-tool__status {
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 0.2rem 0.5rem;
+      border-radius: 999px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 45%,
+        transparent
+      );
+    }
+
+    .assistant-tool__status.status-running {
+      color: var(--yellow-primary);
+    }
+
+    .assistant-tool__status.status-success {
+      color: var(--green-primary);
+    }
+
+    .assistant-tool__status.status-error {
+      color: var(--red-primary);
+    }
+
+    .assistant-tool__caret {
+      font-size: 1rem;
+      color: color-mix(in srgb, var(--secondary-text-color) 80%, transparent);
+      margin-left: 0.5rem;
+    }
+
+    .assistant-tool__body {
+      display: none;
+      padding: 0.75rem;
+      background: color-mix(
+        in srgb,
+        var(--popup-background-color) 15%,
+        transparent
+      );
+    }
+
+    .assistant-tool__body.visible {
+      display: block;
+    }
+
+    .assistant-tool__section {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .assistant-tool__section:last-child {
+      margin-bottom: 0;
+    }
+
+    .assistant-tool__section-title {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: color-mix(
+        in srgb,
+        var(--secondary-text-color) 80%,
+        transparent
+      );
+    }
+
+    .assistant-tool__section-content {
+      margin: 0;
+      padding: 0.5rem;
+      border-radius: 0.35rem;
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 25%,
+        transparent
+      );
+      font-size: 0.75rem;
+      max-height: 200px;
+      overflow: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .tool-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--border-color);
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 30%,
+        transparent
+      );
+    }
+
+    .tool-card-title {
+      font-size: 0.8rem;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+      color: var(--primary-text-color);
+    }
+
+    .tool-status {
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 0.2rem 0.5rem;
+      border-radius: 999px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 40%,
+        transparent
+      );
+    }
+
+    .tool-status.status-running {
+      color: var(--yellow-primary);
+    }
+
+    .tool-status.status-success {
+      color: var(--green-primary);
+    }
+
+    .tool-status.status-error {
+      color: var(--red-primary);
+    }
+
+    .tool-card-body {
+      padding: 0.75rem;
+      display: grid;
+      gap: 0.75rem;
+    }
+
+    .tool-section-title {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: color-mix(
+        in srgb,
+        var(--secondary-text-color) 80%,
+        transparent
+      );
+      margin-bottom: 0.25rem;
+    }
+
+    .tool-section-content {
+      margin: 0;
+      padding: 0.5rem;
+      border-radius: 0.4rem;
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 20%,
+        transparent
+      );
+      font-size: 0.75rem;
+      max-height: 180px;
+      overflow: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
     .message-header {
       display: flex;
       align-items: center;
diff --git a/src/pages/aiAssistant/state/chatStore.js b/src/pages/aiAssistant/state/chatStore.js
new file mode 100644
index 000000000..961f01de2
--- /dev/null
+++ b/src/pages/aiAssistant/state/chatStore.js
@@ -0,0 +1,198 @@
+import {
+	addConversation,
+	addMessageToDB,
+	deleteConversation,
+	getAllConversations,
+	getConversation as getConversationById,
+	getMessagesForConversation,
+	updateConversation,
+} from "../db";
+
+function createConversationId() {
+	return `conv_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function createChatStore() {
+	let currentConversation = null;
+	let currentConversationId = null;
+	let currentProfile = "ask";
+	let chatHistory = [];
+	let messageCounter = 0;
+
+	const getCurrentConversation = () => currentConversation;
+	const getConversationId = () => currentConversationId;
+	const getProfile = () => currentProfile;
+	const getHistory = () => [...chatHistory];
+
+	const generateMessageId = () => `msg_${Date.now()}_${++messageCounter}`;
+
+	async function listConversations() {
+		return getAllConversations();
+	}
+
+	async function ensureConversation() {
+		if (currentConversation) return currentConversation;
+		return startNewConversation(currentProfile);
+	}
+
+	async function startNewConversation(profile = currentProfile) {
+		const now = Date.now();
+		currentConversationId = createConversationId();
+		currentConversation = {
+			id: currentConversationId,
+			title: "New Chat",
+			createdAt: now,
+			lastModifiedAt: now,
+			profile: profile,
+		};
+		currentProfile = profile;
+		chatHistory = [];
+		messageCounter = 0;
+		await addConversation(currentConversation);
+		return currentConversation;
+	}
+
+	async function loadConversation(conversationId) {
+		const conversation = await getConversationById(conversationId);
+		if (!conversation) return null;
+
+		const messages = await getMessagesForConversation(conversationId);
+
+		currentConversation = conversation;
+		currentConversationId = conversation.id;
+		currentProfile = conversation.profile || currentProfile;
+		chatHistory = messages.map((msg) => ({
+			id: msg.id,
+			role: msg.role,
+			content: msg.content,
+			timestamp: msg.timestamp,
+		}));
+		messageCounter = 0;
+
+		return { conversation, messages };
+	}
+
+	async function setProfile(profile) {
+		currentProfile = profile;
+		if (currentConversation) {
+			currentConversation.profile = profile;
+			await updateConversation(currentConversation);
+		}
+	}
+
+	async function deleteConversationById(conversationId) {
+		await deleteConversation(conversationId);
+		if (conversationId === currentConversationId) {
+			currentConversation = null;
+			currentConversationId = null;
+			chatHistory = [];
+		}
+	}
+
+	async function prepareMessage(role, content = "", overrides = {}) {
+		await ensureConversation();
+		return {
+			id: overrides.id || generateMessageId(),
+			conversationId: currentConversationId,
+			role,
+			content,
+			timestamp: overrides.timestamp || Date.now(),
+			...overrides,
+		};
+	}
+
+	async function commitUserMessage(message) {
+		if (!currentConversation) {
+			throw new Error("Cannot save user message without active conversation.");
+		}
+
+		const isFirstUserMessage =
+			chatHistory.findIndex((msg) => msg.role === "user") === -1;
+
+		if (isFirstUserMessage && currentConversation.title === "New Chat") {
+			const trimmed = message.content.trim();
+			currentConversation.title =
+				trimmed.substring(0, 30) + (trimmed.length > 30 ? "..." : "");
+		}
+
+		currentConversation.lastModifiedAt = message.timestamp;
+		await addMessageToDB(message);
+		await updateConversation(currentConversation);
+
+		chatHistory.push({
+			id: message.id,
+			role: message.role,
+			content: message.content,
+			timestamp: message.timestamp,
+		});
+
+		return { isFirstUserMessage };
+	}
+
+	async function commitAssistantMessage(message, { wasError = false } = {}) {
+		if (!currentConversation) {
+			throw new Error(
+				"Cannot save assistant message without active conversation.",
+			);
+		}
+
+		currentConversation.lastModifiedAt = message.timestamp;
+		await addMessageToDB(message);
+		await updateConversation(currentConversation);
+
+		if (!wasError) {
+			chatHistory.push({
+				id: message.id,
+				role: message.role,
+				content: message.content,
+				timestamp: message.timestamp,
+			});
+		}
+	}
+
+	async function commitToolMessage(toolRun) {
+		if (!currentConversation) return;
+
+		const messageId = toolRun.id || generateMessageId();
+		const payload = {
+			id: toolRun.id || messageId,
+			name: toolRun.name,
+			status: toolRun.status,
+			args: toolRun.argsObject ?? toolRun.argsText ?? null,
+			output: toolRun.output ?? "",
+			parentMessageId: toolRun.parentMessageId ?? null,
+		};
+		const message = {
+			id: messageId,
+			conversationId: currentConversationId,
+			role: "tool",
+			content: JSON.stringify(payload),
+			timestamp: toolRun.timestamp || Date.now(),
+		};
+
+		await addMessageToDB(message);
+		chatHistory.push({
+			id: message.id,
+			role: message.role,
+			content: message.content,
+			timestamp: message.timestamp,
+		});
+	}
+
+	return {
+		getConversation: getCurrentConversation,
+		getConversationId,
+		getProfile,
+		getHistory,
+		listConversations,
+		loadConversation,
+		startNewConversation,
+		setProfile,
+		deleteConversationById,
+		prepareMessage,
+		commitUserMessage,
+		commitAssistantMessage,
+		commitToolMessage,
+		generateMessageId,
+	};
+}
diff --git a/src/pages/aiAssistant/ui/messageRenderer.js b/src/pages/aiAssistant/ui/messageRenderer.js
new file mode 100644
index 000000000..633c133d7
--- /dev/null
+++ b/src/pages/aiAssistant/ui/messageRenderer.js
@@ -0,0 +1,545 @@
+import tag from "html-tag-js";
+import settings from "lib/settings";
+import markdownIt from "markdown-it";
+
+const md = markdownIt({
+	html: true,
+	linkify: true,
+	typographer: true,
+});
+
+function formatTime(timestamp) {
+	return new Date(timestamp).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+}
+
+function copyToClipboard(text = "") {
+	try {
+		cordova.plugins.clipboard.copy(text);
+	} catch (error) {
+		console.error("Clipboard copy failed", error);
+	}
+}
+
+function normalizeToolStatus(status) {
+	switch (status) {
+		case "error":
+		case "failed":
+			return "error";
+		case "success":
+		case "completed":
+			return "success";
+		default:
+			return "running";
+	}
+}
+
+function prettifyArgs({ argsObject, argsText }) {
+	if (argsObject) {
+		try {
+			return JSON.stringify(argsObject, null, 2);
+		} catch (error) {
+			console.warn("Failed to stringify tool args object", error);
+		}
+	}
+	if (argsText && argsText.trim().length) {
+		return argsText;
+	}
+	return "—";
+}
+
+export function createMessageRenderer({ messageContainerRef, onUserEdit }) {
+	let aiTabInstance = null;
+	const toolWidgets = new Map();
+	const toolContainers = new Map();
+	const pendingToolEvents = new Map();
+	const standaloneToolWidgets = new Map();
+
+	function setEditorInstance(instance) {
+		aiTabInstance = instance;
+	}
+
+	function scrollToBottom() {
+		const container = messageContainerRef.el;
+		if (!container) return;
+		container.scrollTop = container.scrollHeight;
+	}
+
+	function renderMarkdownInto(element, content) {
+		if (!element) return;
+		element.innerHTML = md.render(content);
+	}
+
+	function enhanceCodeBlocks(messageContentEl) {
+		if (!messageContentEl) return;
+
+		messageContentEl.querySelectorAll("pre code").forEach((codeElement) => {
+			const languageMatch = codeElement.className.match(/language-(\w+)/);
+			let language = languageMatch ? languageMatch[1] : "plaintext";
+			const langMap = {
+				bash: "sh",
+				shell: "sh",
+			};
+			language = langMap[language] || language;
+
+			const highlight = ace.require("ace/ext/static_highlight");
+			highlight.render(
+				codeElement.textContent,
+				`ace/mode/${language}`,
+				settings.value.editorTheme.startsWith("ace/theme/")
+					? settings.value.editorTheme
+					: `ace/theme/${settings.value.editorTheme}`,
+				1,
+				true,
+				(highlighted) => {
+					if (aiTabInstance) {
+						aiTabInstance.addStyle(highlighted.css);
+					}
+					codeElement.innerHTML = highlighted.html;
+				},
+			);
+		});
+
+		messageContentEl.querySelectorAll("pre").forEach((preEl) => {
+			preEl.classList.add("code-block-native");
+		});
+	}
+
+	function buildMessageHeader(message, messageEl) {
+		const header = tag("div", { className: "message-header" });
+		const sender = tag("div", {
+			className: `message-sender ${message.role === "user" ? "user" : "ai"}`,
+			textContent: message.role === "user" ? "You" : "AI",
+		});
+		const actions = tag("div", { className: "message-actions" });
+		const time = tag("div", {
+			className: "message-time",
+			textContent: formatTime(message.timestamp),
+		});
+
+		actions.appendChild(time);
+
+		if (message.role === "assistant") {
+			const copyBtn = tag("button", {
+				className: "btn btn-icon",
+				title: "Copy message",
+				onclick: () => copyToClipboard(message.content),
+			});
+			copyBtn.appendChild(tag("i", { className: "icon copy" }));
+			actions.appendChild(copyBtn);
+		}
+
+		if (message.role === "user" && typeof onUserEdit === "function") {
+			const editBtn = tag("button", {
+				className: "btn btn-icon",
+				title: "Edit message",
+				onclick: () => onUserEdit(message),
+			});
+			editBtn.appendChild(tag("i", { className: "icon edit" }));
+			actions.appendChild(editBtn);
+		}
+
+		header.appendChild(sender);
+		header.appendChild(actions);
+		messageEl.appendChild(header);
+	}
+
+	function buildMessageContent(message, { renderMarkdown = true } = {}) {
+		const contentEl = tag("div", { className: "message-content md" });
+
+		if (message.role === "user" || !renderMarkdown) {
+			contentEl.textContent = message.content || "";
+		} else if (message.role === "assistant" && message.content) {
+			renderMarkdownInto(contentEl, message.content);
+			enhanceCodeBlocks(contentEl);
+		}
+
+		return contentEl;
+	}
+
+	function renderMessage(message, { renderMarkdown = true } = {}) {
+		const roleClass =
+			message.role === "user"
+				? "user"
+				: message.role === "tool"
+					? "tool"
+					: "assistant";
+		const messageEl = tag("div", {
+			className: `message ${roleClass}`,
+			id: `message-${message.id}`,
+		});
+
+		buildMessageHeader(message, messageEl);
+
+		let toolContainer = null;
+		if (message.role === "assistant") {
+			toolContainer = tag("div", {
+				className: "assistant-tools",
+				id: `assistant-tools-${message.id}`,
+			});
+			toolContainers.set(message.id, toolContainer);
+			messageEl.appendChild(toolContainer);
+		}
+
+		const contentEl = buildMessageContent(message, { renderMarkdown });
+		messageEl.appendChild(contentEl);
+
+		messageContainerRef.el.appendChild(messageEl);
+
+		if (message.role === "assistant" && pendingToolEvents.has(message.id)) {
+			const queued = pendingToolEvents.get(message.id) || [];
+			pendingToolEvents.delete(message.id);
+			queued.forEach((queuedEvent) => {
+				renderToolEvent(queuedEvent.state, {
+					targetMessageId: message.id,
+					queueIfMissing: false,
+					fallbackToStandalone: queuedEvent.fallbackToStandalone,
+				});
+			});
+		}
+
+		scrollToBottom();
+		return messageEl;
+	}
+
+	function renderAssistantPlaceholder(message) {
+		const placeholderMessage = { ...message, content: "" };
+		const messageEl = renderMessage(placeholderMessage, {
+			renderMarkdown: false,
+		});
+		const contentEl = messageEl.querySelector(".message-content");
+		if (contentEl) {
+			contentEl.innerHTML = '<span class="assistant-caret">▌</span>';
+		}
+		return messageEl;
+	}
+
+	function updateAssistantStreaming(
+		messageId,
+		content,
+		{ showCursor = false } = {},
+	) {
+		const messageEl = messageContainerRef.el?.querySelector(
+			`#message-${messageId} .message-content`,
+		);
+		if (!messageEl) return;
+
+		const suffix = showCursor ? " ▌" : "";
+		renderMarkdownInto(messageEl, `${content}${suffix}`);
+	}
+
+	function finalizeAssistantMessage(messageId, content, timestamp) {
+		const messageEl = messageContainerRef.el?.querySelector(
+			`#message-${messageId}`,
+		);
+		if (!messageEl) return;
+
+		const contentEl = messageEl.querySelector(".message-content");
+		if (contentEl) {
+			renderMarkdownInto(contentEl, content);
+			enhanceCodeBlocks(contentEl);
+		}
+
+		const timeEl = messageEl.querySelector(".message-time");
+		if (timeEl) {
+			timeEl.textContent = formatTime(timestamp);
+		}
+	}
+
+	function clearMessages() {
+		if (messageContainerRef.el) {
+			messageContainerRef.el.innerHTML = "";
+		}
+		toolWidgets.clear();
+		toolContainers.clear();
+		pendingToolEvents.clear();
+		standaloneToolWidgets.clear();
+	}
+
+	function showLoadingIndicator() {
+		const loadingEl = tag("div", {
+			className: "ai_loading",
+			id: "loading-indicator",
+		});
+		const loadingDots = tag("div", { className: "loading-dots" });
+
+		for (let i = 0; i < 3; i++) {
+			loadingDots.appendChild(tag("div", { className: "loading-dot" }));
+		}
+
+		loadingEl.appendChild(loadingDots);
+		loadingEl.appendChild(tag("span", { textContent: "AI is thinking..." }));
+
+		messageContainerRef.el.appendChild(loadingEl);
+		scrollToBottom();
+	}
+
+	function removeLoadingIndicator() {
+		const loadingEl =
+			messageContainerRef.el?.querySelector("#loading-indicator");
+		if (loadingEl) {
+			loadingEl.remove();
+		}
+	}
+
+	function statusLabel(normalizedStatus) {
+		switch (normalizedStatus) {
+			case "error":
+				return "Failed";
+			case "success":
+				return "Completed";
+			default:
+				return "Running";
+		}
+	}
+
+	function truncate(text, max = 80) {
+		if (!text) return "";
+		const trimmed = text.trim();
+		return trimmed.length > max ? `${trimmed.slice(0, max - 1)}…` : trimmed;
+	}
+
+	function createToolSection(label) {
+		const section = tag("div", { className: "assistant-tool__section" });
+		section.appendChild(
+			tag("div", {
+				className: "assistant-tool__section-title",
+				textContent: label,
+			}),
+		);
+		const content = tag("pre", {
+			className: "assistant-tool__section-content",
+		});
+		section.appendChild(content);
+		return { section, content };
+	}
+
+	function createAttachedToolWidget(state) {
+		const wrapper = tag("div", {
+			className: "assistant-tool",
+			id: `tool-${state.id}`,
+		});
+		wrapper.dataset.toolId = state.id || "";
+		wrapper.dataset.parentMessageId = state.parentMessageId || "";
+
+		const summary = tag("button", {
+			className: "assistant-tool__summary",
+			type: "button",
+		});
+
+		const titleGroup = tag("div", { className: "assistant-tool__title" });
+		const nameEl = tag("span", {
+			className: "assistant-tool__name",
+			textContent: state.name || "Tool",
+		});
+		const previewEl = tag("span", { className: "assistant-tool__preview" });
+		titleGroup.appendChild(nameEl);
+		titleGroup.appendChild(previewEl);
+
+		const statusValue = normalizeToolStatus(state.status);
+		const statusEl = tag("span", {
+			className: `assistant-tool__status status-${statusValue}`,
+			textContent: statusLabel(statusValue),
+		});
+
+		const caretEl = tag("i", {
+			className: "icon keyboard_arrow_down assistant-tool__caret",
+		});
+
+		summary.appendChild(titleGroup);
+		summary.appendChild(statusEl);
+		summary.appendChild(caretEl);
+
+		const body = tag("div", { className: "assistant-tool__body" });
+		const argsSection = createToolSection("Arguments");
+		const outputSection = createToolSection("Output");
+		body.appendChild(argsSection.section);
+		body.appendChild(outputSection.section);
+
+		summary.onclick = () => {
+			const expanded = body.classList.toggle("visible");
+			summary.classList.toggle("expanded", expanded);
+			caretEl.className = expanded
+				? "icon keyboard_arrow_up assistant-tool__caret"
+				: "icon keyboard_arrow_down assistant-tool__caret";
+		};
+
+		wrapper.appendChild(summary);
+		wrapper.appendChild(body);
+
+		wrapper._statusEl = statusEl;
+		wrapper._previewEl = previewEl;
+		wrapper._argsEl = argsSection.content;
+		wrapper._outputEl = outputSection.content;
+		wrapper._bodyEl = body;
+		wrapper._summaryEl = summary;
+		wrapper._caretEl = caretEl;
+
+		return wrapper;
+	}
+
+	function updateAttachedToolWidget(widget, state) {
+		if (!widget) return;
+		widget.dataset.parentMessageId =
+			state.parentMessageId || widget.dataset.parentMessageId || "";
+
+		const normalized = normalizeToolStatus(state.status);
+		if (widget._statusEl) {
+			widget._statusEl.textContent = statusLabel(normalized);
+			widget._statusEl.className = `assistant-tool__status status-${normalized}`;
+		}
+
+		if (widget._argsEl && (state.isNew || state.stage?.startsWith("args"))) {
+			widget._argsEl.textContent = prettifyArgs(state);
+		}
+
+		if (widget._outputEl) {
+			if (state.output && state.output.trim().length) {
+				widget._outputEl.textContent = state.output;
+			} else if (normalized === "running") {
+				widget._outputEl.textContent = "Pending...";
+			}
+		}
+
+		if (widget._previewEl) {
+			const previewSource =
+				state.output?.trim() ||
+				state.argsText?.trim() ||
+				(state.argsObject ? JSON.stringify(state.argsObject) : "");
+			const previewText = truncate(previewSource, 80);
+			widget._previewEl.textContent = previewText ? `• ${previewText}` : "";
+			widget._previewEl.classList.toggle("visible", Boolean(previewText));
+		}
+	}
+
+	function createStandaloneToolWidget(state) {
+		const wrapper = tag("div", {
+			className: "message tool",
+			id: `tool-${state.id}`,
+		});
+
+		const card = tag("div", { className: "tool-card" });
+		const header = tag("div", { className: "tool-card-header" });
+		const title = tag("div", {
+			className: "tool-card-title",
+			textContent: state.name || "Tool",
+		});
+		const statusValue = normalizeToolStatus(state.status);
+		const status = tag("span", {
+			className: `tool-status status-${statusValue}`,
+			textContent: statusLabel(statusValue),
+		});
+		header.appendChild(title);
+		header.appendChild(status);
+
+		const body = tag("div", { className: "tool-card-body" });
+		const argsSection = createToolSection("Arguments");
+		argsSection.content.textContent = prettifyArgs(state);
+
+		const outputSection = createToolSection("Output");
+		outputSection.content.textContent = state.output?.trim()?.length
+			? state.output
+			: "Pending...";
+
+		body.appendChild(argsSection.section);
+		body.appendChild(outputSection.section);
+		card.appendChild(header);
+		card.appendChild(body);
+		wrapper.appendChild(card);
+
+		wrapper._statusEl = status;
+		wrapper._argsEl = argsSection.content;
+		wrapper._outputEl = outputSection.content;
+
+		return wrapper;
+	}
+
+	function updateStandaloneToolWidget(widget, state) {
+		if (!widget) return;
+		const statusValue = normalizeToolStatus(state.status);
+		widget._statusEl.textContent = statusLabel(statusValue);
+		widget._statusEl.className = `tool-status status-${statusValue}`;
+		if (state.isNew || state.stage?.startsWith("args")) {
+			widget._argsEl.textContent = prettifyArgs(state);
+		}
+		if (widget._outputEl) {
+			if (state.output && state.output.trim().length) {
+				widget._outputEl.textContent = state.output;
+			} else if (statusValue === "running") {
+				widget._outputEl.textContent = "Pending...";
+			}
+		}
+	}
+
+	function attachStandaloneWidget(widget) {
+		messageContainerRef.el.appendChild(widget);
+		scrollToBottom();
+	}
+
+	function renderToolEvent(
+		state,
+		{
+			targetMessageId,
+			fallbackToStandalone = false,
+			queueIfMissing = true,
+		} = {},
+	) {
+		const toolId = state.id || `tool-${toolWidgets.size + 1}`;
+		state.id = toolId;
+
+		if (targetMessageId) {
+			const container = toolContainers.get(targetMessageId);
+			if (!container) {
+				if (queueIfMissing) {
+					const existingQueue = pendingToolEvents.get(targetMessageId) || [];
+					existingQueue.push({ state, fallbackToStandalone });
+					pendingToolEvents.set(targetMessageId, existingQueue);
+				} else if (fallbackToStandalone) {
+					renderToolEvent(state, {
+						targetMessageId: null,
+						fallbackToStandalone: true,
+						queueIfMissing: false,
+					});
+				}
+				return;
+			}
+
+			let widget = toolWidgets.get(toolId);
+			if (!widget || !container.contains(widget)) {
+				widget = createAttachedToolWidget(state);
+				toolWidgets.set(toolId, widget);
+				container.appendChild(widget);
+			}
+			updateAttachedToolWidget(widget, state);
+			scrollToBottom();
+			return;
+		}
+
+		if (!fallbackToStandalone) {
+			return;
+		}
+
+		let fallbackWidget = standaloneToolWidgets.get(toolId);
+		if (!fallbackWidget) {
+			fallbackWidget = createStandaloneToolWidget(state);
+			standaloneToolWidgets.set(toolId, fallbackWidget);
+			attachStandaloneWidget(fallbackWidget);
+		}
+		updateStandaloneToolWidget(fallbackWidget, state);
+	}
+
+	return {
+		setEditorInstance,
+		scrollToBottom,
+		renderMessage,
+		renderAssistantPlaceholder,
+		updateAssistantStreaming,
+		finalizeAssistantMessage,
+		clearMessages,
+		showLoadingIndicator,
+		removeLoadingIndicator,
+		renderToolEvent,
+	};
+}