@mseep/obsidian-agent-client 0.10.6

package/src/ui/SuggestionPopup.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+const { useRef, useEffect } = React;
+import type { NoteMetadata } from "../services/vault-service";
+import type { SlashCommand } from "../types/session";
+
+/**
+ * Dropdown type for suggestion display.
+ */
+type DropdownType = "mention" | "slash-command";
+
+/**
+ * Props for the SuggestionPopup component.
+ *
+ * This component can display either note mentions or slash commands
+ * based on the `type` prop.
+ */
+interface SuggestionPopupProps {
+	/** Type of dropdown to display */
+	type: DropdownType;
+
+	/** Items to display (NoteMetadata for mentions, SlashCommand for commands) */
+	items: NoteMetadata[] | SlashCommand[];
+
+	/** Currently selected item index */
+	selectedIndex: number;
+
+	/** Callback when an item is selected */
+	onSelect: (item: NoteMetadata | SlashCommand) => void;
+
+	/** Callback to close the dropdown */
+	onClose: () => void;
+}
+
+/**
+ * Generic suggestion popup component.
+ *
+ * Displays either:
+ * - Note mentions (@[[note]])
+ * - Slash commands (/command)
+ *
+ * Handles keyboard navigation, mouse selection, and outside click detection.
+ */
+export function SuggestionPopup({
+	type,
+	items,
+	selectedIndex,
+	onSelect,
+	onClose,
+}: SuggestionPopupProps) {
+	const dropdownRef = useRef<HTMLDivElement>(null);
+
+	// Handle mouse clicks outside dropdown to close
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				dropdownRef.current &&
+				!dropdownRef.current.contains(event.target as Node)
+			) {
+				onClose();
+			}
+		};
+
+		const doc = activeDocument;
+		doc.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			doc.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [onClose]);
+
+	// Scroll selected item into view
+	useEffect(() => {
+		if (!dropdownRef.current) return;
+		const selectedElement = dropdownRef.current.children[selectedIndex] as
+			| HTMLElement
+			| undefined;
+		selectedElement?.scrollIntoView({ block: "nearest" });
+	}, [selectedIndex]);
+
+	if (items.length === 0) {
+		return null;
+	}
+
+	/**
+	 * Render a single dropdown item based on type.
+	 */
+	const renderItem = (item: NoteMetadata | SlashCommand, index: number) => {
+		const isSelected = index === selectedIndex;
+		const hasBorder = index < items.length - 1;
+
+		if (type === "mention") {
+			const note = item as NoteMetadata;
+			return (
+				<div
+					key={`mention-${index}`}
+					className={`agent-client-mention-dropdown-item ${isSelected ? "agent-client-selected" : ""} ${hasBorder ? "agent-client-has-border" : ""}`}
+					onClick={() => onSelect(note)}
+					onMouseEnter={() => {
+						// Could update selected index on hover
+					}}
+				>
+					<div className="agent-client-mention-dropdown-item-name">
+						{note.name}
+					</div>
+					<div className="agent-client-mention-dropdown-item-path">
+						{note.path}
+					</div>
+				</div>
+			);
+		} else {
+			// type === "slash-command"
+			const command = item as SlashCommand;
+			return (
+				<div
+					key={`command-${index}`}
+					className={`agent-client-mention-dropdown-item ${isSelected ? "agent-client-selected" : ""} ${hasBorder ? "agent-client-has-border" : ""}`}
+					onClick={() => onSelect(command)}
+					onMouseEnter={() => {
+						// Could update selected index on hover
+					}}
+				>
+					<div className="agent-client-mention-dropdown-item-name">
+						/{command.name}
+					</div>
+					<div className="agent-client-mention-dropdown-item-path">
+						{command.description}
+						{command.hint && ` (${command.hint})`}
+					</div>
+				</div>
+			);
+		}
+	};
+
+	return (
+		<div ref={dropdownRef} className="agent-client-mention-dropdown">
+			{items.map((item, index) => renderItem(item, index))}
+		</div>
+	);
+}

package/src/ui/TerminalBlock.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+const { useState, useRef, useEffect } = React;
+import type { AcpClient } from "../acp/acp-client";
+import { getLogger } from "../utils/logger";
+interface TerminalBlockProps {
+	terminalId: string;
+	terminalClient: AcpClient | null;
+}
+
+export const TerminalBlock = React.memo(function TerminalBlock({
+	terminalId,
+	terminalClient,
+}: TerminalBlockProps) {
+	const logger = getLogger();
+	const [output, setOutput] = useState("");
+	const [exitStatus, setExitStatus] = useState<{
+		exitCode: number | null;
+		signal: string | null;
+	} | null>(null);
+	const [isRunning, setIsRunning] = useState(true);
+	const intervalRef = useRef<number | null>(null);
+
+	logger.log(
+		`[TerminalBlock] Component rendered for terminal ${terminalId}, terminalClient: ${!!terminalClient}`,
+	);
+
+	useEffect(() => {
+		logger.log(
+			`[TerminalBlock] useEffect triggered for ${terminalId}, terminalClient: ${!!terminalClient}`,
+		);
+		if (!terminalId || !terminalClient) return;
+
+		const pollOutput = async () => {
+			try {
+				const result =
+					await terminalClient.getTerminalOutput(terminalId);
+				logger.log(
+					`[TerminalBlock] Poll result for ${terminalId}:`,
+					result,
+				);
+				setOutput(result.output);
+				if (result.exitStatus) {
+					setExitStatus({
+						exitCode: result.exitStatus.exitCode ?? null,
+						signal: result.exitStatus.signal ?? null,
+					});
+					setIsRunning(false);
+					if (intervalRef.current) {
+						window.clearInterval(intervalRef.current);
+						intervalRef.current = null;
+					}
+				}
+			} catch (error) {
+				const errorMessage =
+					error instanceof Error ? error.message : String(error);
+
+				logger.log(
+					`[TerminalBlock] Polling error for terminal ${terminalId}: ${errorMessage}`,
+				);
+
+				setIsRunning(false);
+				if (intervalRef.current) {
+					window.clearInterval(intervalRef.current);
+					intervalRef.current = null;
+				}
+			}
+		};
+
+		// Start polling immediately
+		void pollOutput();
+
+		// Set up polling interval with shorter interval to catch fast commands
+		intervalRef.current = window.setInterval(() => {
+			void pollOutput();
+		}, 100);
+
+		return () => {
+			if (intervalRef.current) {
+				window.clearInterval(intervalRef.current);
+				intervalRef.current = null;
+			}
+		};
+	}, [terminalId, terminalClient, logger]);
+
+	// Separate effect to stop polling when no longer running
+	useEffect(() => {
+		if (!isRunning && intervalRef.current) {
+			window.clearInterval(intervalRef.current);
+			intervalRef.current = null;
+		}
+	}, [isRunning]);
+
+	return (
+		<div className="agent-client-terminal-renderer">
+			{output || (isRunning ? "Waiting for output..." : "No output")}
+
+			{exitStatus && (
+				<div
+					className={`agent-client-terminal-renderer-exit ${exitStatus.exitCode === 0 ? "agent-client-success" : "agent-client-error"}`}
+				>
+					Exit Code: {exitStatus.exitCode}
+					{exitStatus.signal && ` | Signal: ${exitStatus.signal}`}
+				</div>
+			)}
+		</div>
+	);
+});

package/src/ui/ToolCallBlock.tsx

@@ -0,0 +1,456 @@
+import * as React from "react";
+const { useState, useMemo } = React;
+import { FileSystemAdapter } from "obsidian";
+import type { MessageContent } from "../types/chat";
+import type { AcpClient } from "../acp/acp-client";
+import type AgentClientPlugin from "../plugin";
+import { TerminalBlock } from "./TerminalBlock";
+import { PermissionBanner } from "./PermissionBanner";
+import { LucideIcon } from "./shared/IconButton";
+import { toRelativePath } from "../utils/paths";
+import * as Diff from "diff";
+// import { MarkdownRenderer } from "./shared/MarkdownRenderer";
+
+interface ToolCallBlockProps {
+	content: Extract<MessageContent, { type: "tool_call" }>;
+	plugin: AgentClientPlugin;
+	terminalClient?: AcpClient;
+	/** Callback to approve a permission request */
+	onApprovePermission?: (
+		requestId: string,
+		optionId: string,
+	) => Promise<void>;
+}
+
+export const ToolCallBlock = React.memo(function ToolCallBlock({
+	content,
+	plugin,
+	terminalClient,
+	onApprovePermission,
+}: ToolCallBlockProps) {
+	const {
+		kind,
+		title,
+		status,
+		permissionRequest,
+		locations,
+		rawInput,
+		content: toolContent,
+	} = content;
+
+	// Local state for selected option (for immediate UI feedback)
+	const [selectedOptionId, setSelectedOptionId] = useState<
+		string | undefined
+	>(permissionRequest?.selectedOptionId);
+
+	// Update selectedOptionId when permissionRequest changes
+	React.useEffect(() => {
+		if (permissionRequest?.selectedOptionId !== selectedOptionId) {
+			setSelectedOptionId(permissionRequest?.selectedOptionId);
+		}
+	}, [permissionRequest?.selectedOptionId]);
+
+	// Get vault path for relative path display
+	const vaultPath = useMemo(() => {
+		const adapter = plugin.app.vault.adapter;
+		if (adapter instanceof FileSystemAdapter) {
+			return adapter.getBasePath();
+		}
+		return "";
+	}, [plugin]);
+
+	// Get showEmojis setting
+	const showEmojis = plugin.settings.displaySettings.showEmojis;
+
+	// Get Lucide icon name based on tool kind
+	const getKindIconName = (kind?: string): string => {
+		switch (kind) {
+			case "read":
+				return "book-open";
+			case "edit":
+				return "pencil";
+			case "delete":
+				return "trash";
+			case "move":
+				return "folder-open";
+			case "search":
+				return "search";
+			case "execute":
+				return "square-terminal";
+			case "think":
+				return "message-circle-more";
+			case "fetch":
+				return "globe";
+			case "switch_mode":
+				return "arrow-left-right";
+			default:
+				return "hammer";
+		}
+	};
+
+	return (
+		<div className="agent-client-message-tool-call">
+			{/* Header */}
+			<div className="agent-client-message-tool-call-header">
+				<div className="agent-client-message-tool-call-title">
+					{showEmojis && (
+						<LucideIcon
+							name={getKindIconName(kind)}
+							className="agent-client-message-tool-call-icon"
+						/>
+					)}
+					<span className="agent-client-message-tool-call-title-text">
+						{title}
+					</span>
+					{status !== "completed" && (
+						<LucideIcon
+							name={status === "failed" ? "x" : "ellipsis"}
+							className={`agent-client-message-tool-call-status-icon agent-client-status-${status}`}
+						/>
+					)}
+				</div>
+				{kind === "execute" &&
+					rawInput &&
+					typeof rawInput.command === "string" && (
+						<div className="agent-client-message-tool-call-command">
+							<code>
+								{rawInput.command}
+								{Array.isArray(rawInput.args) &&
+									rawInput.args.length > 0 &&
+									` ${(rawInput.args as string[]).join(" ")}`}
+							</code>
+						</div>
+					)}
+				{locations && locations.length > 0 && (
+					<div className="agent-client-message-tool-call-locations">
+						{locations.map((loc, idx) => (
+							<span
+								key={idx}
+								className="agent-client-message-tool-call-location"
+							>
+								{toRelativePath(loc.path, vaultPath)}
+								{loc.line != null && `:${loc.line}`}
+							</span>
+						))}
+					</div>
+				)}
+			</div>
+
+			{/* Tool call content (diffs, terminal output, etc.) */}
+			{toolContent &&
+				toolContent.map((item, index) => {
+					if (item.type === "terminal") {
+						return (
+							<TerminalBlock
+								key={index}
+								terminalId={item.terminalId}
+								terminalClient={terminalClient || null}
+							/>
+						);
+					}
+					if (item.type === "diff") {
+						return (
+							<DiffRenderer
+								key={index}
+								diff={item}
+								plugin={plugin}
+								autoCollapse={
+									plugin.settings.displaySettings
+										.autoCollapseDiffs
+								}
+								collapseThreshold={
+									plugin.settings.displaySettings
+										.diffCollapseThreshold
+								}
+							/>
+						);
+					}
+					return null;
+				})}
+
+			{/* Permission request section */}
+			{permissionRequest && (
+				<PermissionBanner
+					permissionRequest={{
+						...permissionRequest,
+						selectedOptionId: selectedOptionId,
+					}}
+					onApprovePermission={onApprovePermission}
+					onOptionSelected={setSelectedOptionId}
+				/>
+			)}
+		</div>
+	);
+});
+
+// ============================================================
+// Diff renderer component
+// ============================================================
+interface DiffRendererProps {
+	diff: {
+		type: "diff";
+		path: string;
+		oldText?: string | null;
+		newText: string;
+	};
+	plugin: AgentClientPlugin;
+	autoCollapse?: boolean;
+	collapseThreshold?: number;
+}
+
+/**
+ * Represents a single line in a diff view
+ * @property type - The type of change: added, removed, or unchanged context
+ * @property oldLineNumber - Line number in the old file (undefined for added lines)
+ * @property newLineNumber - Line number in the new file (undefined for removed lines)
+ * @property content - The text content of the line
+ * @property wordDiff - Optional word-level diff for lines that were modified (adjacent removed+added pairs)
+ */
+interface DiffLine {
+	type: "added" | "removed" | "context";
+	oldLineNumber?: number;
+	newLineNumber?: number;
+	content: string;
+	wordDiff?: { type: "added" | "removed" | "context"; value: string }[];
+}
+
+/**
+ * Check if the diff represents a new file (no old content)
+ */
+function isNewFile(diff: DiffRendererProps["diff"]): boolean {
+	return (
+		diff.oldText === null ||
+		diff.oldText === undefined ||
+		diff.oldText === ""
+	);
+}
+
+// Helper function to map diff parts to our internal format
+function mapDiffParts(
+	parts: Diff.Change[],
+): { type: "added" | "removed" | "context"; value: string }[] {
+	return parts.map((part) => ({
+		type: part.added ? "added" : part.removed ? "removed" : "context",
+		value: part.value,
+	}));
+}
+
+// Helper function to render word-level diffs
+function renderWordDiff(
+	wordDiff: { type: "added" | "removed" | "context"; value: string }[],
+	lineType: "added" | "removed",
+) {
+	// Filter parts based on line type to avoid rendering null elements
+	const filteredParts = wordDiff.filter((part) => {
+		// For removed lines, skip added parts
+		if (lineType === "removed" && part.type === "added") {
+			return false;
+		}
+		// For added lines, skip removed parts
+		if (lineType === "added" && part.type === "removed") {
+			return false;
+		}
+		return true;
+	});
+
+	return (
+		<>
+			{filteredParts.map((part, partIdx) => {
+				if (part.type === "added") {
+					return (
+						<span
+							key={partIdx}
+							className="agent-client-diff-word-added"
+						>
+							{part.value}
+						</span>
+					);
+				} else if (part.type === "removed") {
+					return (
+						<span
+							key={partIdx}
+							className="agent-client-diff-word-removed"
+						>
+							{part.value}
+						</span>
+					);
+				}
+				return <span key={partIdx}>{part.value}</span>;
+			})}
+		</>
+	);
+}
+
+// Number of context lines to show around changes
+const CONTEXT_LINES = 3;
+
+function DiffRenderer({
+	diff,
+	autoCollapse = false,
+	collapseThreshold = 10,
+}: DiffRendererProps) {
+	// Generate diff using the diff library
+	const diffLines = useMemo(() => {
+		if (isNewFile(diff)) {
+			// New file - all lines are added
+			const lines = diff.newText.split("\n");
+			return lines.map(
+				(line, idx): DiffLine => ({
+					type: "added",
+					newLineNumber: idx + 1,
+					content: line,
+				}),
+			);
+		}
+
+		// Use structuredPatch to get a proper unified diff
+		// At this point, oldText is guaranteed to be a non-empty string (checked by isNewFile)
+		const oldText = diff.oldText || "";
+		const patch = Diff.structuredPatch(
+			"old",
+			"new",
+			oldText,
+			diff.newText,
+			"",
+			"",
+			{ context: CONTEXT_LINES },
+		);
+
+		const result: DiffLine[] = [];
+		let oldLineNum = 0;
+		let newLineNum = 0;
+
+		// Process hunks
+		for (const hunk of patch.hunks) {
+			// Add hunk header only if there are multiple hunks
+			// (helps users see gaps between different sections of changes)
+			if (patch.hunks.length > 1) {
+				result.push({
+					type: "context",
+					content: `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`,
+				});
+			}
+
+			oldLineNum = hunk.oldStart;
+			newLineNum = hunk.newStart;
+
+			for (const line of hunk.lines) {
+				const marker = line[0];
+				const content = line.substring(1);
+
+				if (marker === "+") {
+					result.push({
+						type: "added",
+						newLineNumber: newLineNum++,
+						content,
+					});
+				} else if (marker === "-") {
+					result.push({
+						type: "removed",
+						oldLineNumber: oldLineNum++,
+						content,
+					});
+				} else {
+					// Context line (unchanged)
+					result.push({
+						type: "context",
+						oldLineNumber: oldLineNum++,
+						newLineNumber: newLineNum++,
+						content,
+					});
+				}
+			}
+		}
+
+		// Add word-level diff for modified lines that are adjacent
+		for (let i = 0; i < result.length - 1; i++) {
+			const current = result[i];
+			const next = result[i + 1];
+
+			// If we have a removed line followed by an added line, compute word diff
+			if (current.type === "removed" && next.type === "added") {
+				const wordDiff = Diff.diffWords(current.content, next.content);
+				const mappedDiff = mapDiffParts(wordDiff);
+				current.wordDiff = mappedDiff;
+				next.wordDiff = mappedDiff;
+			}
+		}
+
+		return result;
+	}, [diff.oldText, diff.newText]);
+
+	const renderLine = (line: DiffLine, idx: number) => {
+		const isHunkHeader =
+			line.type === "context" && line.content.startsWith("@@");
+
+		if (isHunkHeader) {
+			return (
+				<div key={idx} className="agent-client-diff-hunk-header">
+					{line.content}
+				</div>
+			);
+		}
+
+		let lineClass = "agent-client-diff-line";
+
+		if (line.type === "added") {
+			lineClass += " agent-client-diff-line-added";
+		} else if (line.type === "removed") {
+			lineClass += " agent-client-diff-line-removed";
+		} else {
+			lineClass += " agent-client-diff-line-context";
+		}
+
+		return (
+			<div key={idx} className={lineClass}>
+				<span className="agent-client-diff-line-content">
+					{line.wordDiff &&
+					(line.type === "added" || line.type === "removed")
+						? renderWordDiff(line.wordDiff, line.type)
+						: line.content}
+				</span>
+			</div>
+		);
+	};
+
+	// Determine if collapsing is needed (only when exceeding threshold)
+	const shouldCollapse = autoCollapse && diffLines.length > collapseThreshold;
+
+	// Collapse state (initially collapsed if shouldCollapse is true)
+	const [isCollapsed, setIsCollapsed] = useState(shouldCollapse);
+
+	// Lines to display (threshold lines when collapsed)
+	const visibleLines = isCollapsed
+		? diffLines.slice(0, collapseThreshold)
+		: diffLines;
+
+	// Remaining lines count
+	const remainingLines = diffLines.length - collapseThreshold;
+
+	return (
+		<div className="agent-client-tool-call-diff">
+			{isNewFile(diff) ? (
+				<div className="agent-client-diff-line-info">New file</div>
+			) : null}
+			<div className="agent-client-tool-call-diff-content">
+				{visibleLines.map((line, idx) => renderLine(line, idx))}
+			</div>
+			{shouldCollapse && (
+				<div
+					className="agent-client-diff-expand-bar"
+					onClick={() => setIsCollapsed(!isCollapsed)}
+				>
+					<span className="agent-client-diff-expand-text">
+						{isCollapsed
+							? `${remainingLines} more lines`
+							: "Collapse"}
+					</span>
+					<LucideIcon
+						name={isCollapsed ? "chevron-right" : "chevron-up"}
+						className="agent-client-diff-expand-icon"
+					/>
+				</div>
+			)}
+		</div>
+	);
+}