@mseep/obsidian-agent-client 0.10.6

package/src/ui/shared/AttachmentStrip.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { setIcon } from "obsidian";
+import type { AttachedFile } from "../../types/chat";
+
+interface AttachmentStripProps {
+	files: AttachedFile[];
+	onRemove: (id: string) => void;
+}
+
+/**
+ * Horizontal strip of attachment previews with remove buttons.
+ * - Images: show thumbnail
+ * - Files: show file icon with filename
+ */
+export function AttachmentStrip({ files, onRemove }: AttachmentStripProps) {
+	if (files.length === 0) return null;
+
+	return (
+		<div className="agent-client-attachment-preview-strip">
+			{files.map((file) => (
+				<div
+					key={file.id}
+					className="agent-client-attachment-preview-item"
+				>
+					{file.kind === "image" && file.data ? (
+						<img
+							src={`data:${file.mimeType};base64,${file.data}`}
+							alt="Attached image"
+							className="agent-client-attachment-preview-thumbnail"
+						/>
+					) : (
+						<div className="agent-client-attachment-preview-file">
+							<span
+								className="agent-client-attachment-preview-file-icon"
+								ref={(el) => {
+									if (el) setIcon(el, "file");
+								}}
+							/>
+							<span className="agent-client-attachment-preview-file-name">
+								{file.name ?? "file"}
+							</span>
+						</div>
+					)}
+					<button
+						className="agent-client-attachment-preview-remove"
+						onClick={() => onRemove(file.id)}
+						title="Remove attachment"
+						type="button"
+						ref={(el) => {
+							if (el) setIcon(el, "x");
+						}}
+					/>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/ui/shared/IconButton.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+const { useRef, useEffect, useImperativeHandle, forwardRef } = React;
+import { setIcon } from "obsidian";
+
+/**
+ * Renders an Obsidian Lucide icon via setIcon().
+ * Used as a replacement for emoji icons to match Obsidian's native UI.
+ */
+export function LucideIcon({
+	name,
+	className,
+}: {
+	name: string;
+	className?: string;
+}) {
+	const ref = useRef<HTMLSpanElement>(null);
+
+	useEffect(() => {
+		if (ref.current) {
+			setIcon(ref.current, name);
+		}
+	}, [name]);
+
+	return <span ref={ref} className={className} />;
+}
+
+interface HeaderButtonProps {
+	iconName: string;
+	tooltip: string;
+	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
+	function HeaderButton({ iconName, tooltip, onClick }, ref) {
+		const buttonRef = useRef<HTMLButtonElement>(null);
+
+		// Expose the button ref to parent components
+		useImperativeHandle(ref, () => buttonRef.current!, []);
+
+		useEffect(() => {
+			if (buttonRef.current) {
+				setIcon(buttonRef.current, iconName);
+			}
+		}, [iconName]);
+
+		return (
+			<button
+				ref={buttonRef}
+				title={tooltip}
+				onClick={onClick}
+				className="clickable-icon agent-client-header-button"
+			/>
+		);
+	},
+);

package/src/ui/shared/MarkdownRenderer.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+const { useRef, useEffect } = React;
+import {
+	Component,
+	FileSystemAdapter,
+	MarkdownRenderer as ObsidianMarkdownRenderer,
+	Platform,
+} from "obsidian";
+import { convertWslPathToWindows } from "../../utils/platform";
+import { isAbsolutePath } from "../../utils/paths";
+import type AgentClientPlugin from "../../plugin";
+
+interface MarkdownRendererProps {
+	text: string;
+	plugin: AgentClientPlugin;
+}
+
+export function MarkdownRenderer({ text, plugin }: MarkdownRendererProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		el.empty?.();
+		el.classList.add("markdown-rendered");
+
+		// Create a temporary component for the markdown renderer lifecycle
+		const component = new Component();
+		component.load();
+
+		// Render markdown
+		void ObsidianMarkdownRenderer.render(
+			plugin.app,
+			text,
+			el,
+			"",
+			component,
+		);
+
+		// Handle internal link clicks
+		const vaultBasePath =
+			plugin.app.vault.adapter instanceof FileSystemAdapter
+				? plugin.app.vault.adapter.getBasePath()
+				: null;
+
+		// Prepare normalized vault base path for comparison (forward slashes)
+		const isWslMode = Platform.isWin && plugin.settings.windowsWslMode;
+		const normalizedVaultBase = vaultBasePath
+			? vaultBasePath.replace(/\\/g, "/").replace(/\/+$/, "")
+			: null;
+
+		const handleInternalLinkClick = (e: MouseEvent) => {
+			const target = e.target as HTMLElement;
+			const link = target.closest("a.internal-link");
+			if (link) {
+				e.preventDefault();
+				const rawHref = link.getAttribute("data-href");
+				if (rawHref) {
+					let href = decodeURIComponent(rawHref);
+
+					// WSL mode: convert /mnt/c/... paths to Windows format
+					if (isWslMode && href.startsWith("/mnt/")) {
+						href = convertWslPathToWindows(href);
+					}
+
+					// Normalize for comparison (forward slashes)
+					const normalizedHref = href.replace(/\\/g, "/");
+
+					if (
+						normalizedVaultBase &&
+						normalizedHref.startsWith(normalizedVaultBase + "/")
+					) {
+						// Absolute vault path → convert to relative
+						const relativePath = normalizedHref.slice(
+							normalizedVaultBase.length + 1,
+						);
+						void plugin.app.workspace.openLinkText(
+							relativePath,
+							"",
+						);
+					} else if (!isAbsolutePath(href)) {
+						// Already relative or wiki-link style — pass through
+						void plugin.app.workspace.openLinkText(href, "");
+					}
+					// Absolute path outside vault — ignore
+				}
+			}
+		};
+		el.addEventListener("click", handleInternalLinkClick);
+
+		return () => {
+			el.removeEventListener("click", handleInternalLinkClick);
+			component.unload();
+		};
+	}, [text, plugin]);
+
+	return (
+		<div
+			ref={containerRef}
+			className="agent-client-markdown-text-renderer"
+		/>
+	);
+}

package/src/ui/view-host.ts

@@ -0,0 +1,56 @@
+/**
+ * Minimal view interface for chat components.
+ *
+ * This interface extracts the minimal set of methods that ChatMessages,
+ * ChatInput, and other components need from a view. By depending on this
+ * interface instead of ChatView directly, these components can work with
+ * both sidebar ChatView and FloatingChatView.
+ */
+
+import type { App } from "obsidian";
+
+/**
+ * Minimal interface for components that need view-level DOM event registration.
+ *
+ * ChatMessages, ChatInput, SuggestionPopup, and ErrorBanner use this
+ * for registering scroll and click-outside handlers.
+ *
+ * Note on `this: HTMLElement` in callback signatures:
+ * - This matches Obsidian's Component.registerDomEvent signature for compatibility
+ * - In practice, callbacks use arrow functions and don't reference `this`
+ * - We maintain this signature to allow ChatView to implement IChatViewHost
+ *   without type casting (ChatView extends Component which has this signature)
+ */
+export interface IChatViewHost {
+	/** Obsidian App instance for API access */
+	app: App;
+
+	/**
+	 * Register a DOM event listener that will be cleaned up when the view closes.
+	 *
+	 * In sidebar ChatView, this delegates to Obsidian's Component.registerDomEvent.
+	 * In floating views, this adds the listener and tracks it for cleanup on unmount.
+	 *
+	 * Note: Only Window, Document, and HTMLElement are supported as targets.
+	 * This matches the actual usage in components (document for click-outside,
+	 * HTMLElement for scroll handlers).
+	 */
+	registerDomEvent<K extends keyof WindowEventMap>(
+		el: Window,
+		type: K,
+		callback: (this: HTMLElement, ev: WindowEventMap[K]) => unknown,
+		options?: boolean | AddEventListenerOptions,
+	): void;
+	registerDomEvent<K extends keyof DocumentEventMap>(
+		el: Document,
+		type: K,
+		callback: (this: HTMLElement, ev: DocumentEventMap[K]) => unknown,
+		options?: boolean | AddEventListenerOptions,
+	): void;
+	registerDomEvent<K extends keyof HTMLElementEventMap>(
+		el: HTMLElement,
+		type: K,
+		callback: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown,
+		options?: boolean | AddEventListenerOptions,
+	): void;
+}

package/src/utils/error-utils.ts

@@ -0,0 +1,274 @@
+/**
+ * ACP Error Utilities
+ *
+ * Utilities for handling ACP protocol errors and converting them
+ * to user-friendly ErrorInfo for UI display.
+ *
+ * These functions extract error information from ACP JSON-RPC errors
+ * and provide appropriate titles and suggestions based on error codes.
+ */
+
+import { Platform } from "obsidian";
+import { AcpErrorCode, type AcpError, type ErrorInfo } from "../types/errors";
+
+// ============================================================================
+// Error Extraction Functions
+// ============================================================================
+
+/**
+ * Extract error code from unknown error object.
+ */
+export function extractErrorCode(error: unknown): number | undefined {
+	if (error && typeof error === "object" && "code" in error) {
+		const code = error.code;
+		if (typeof code === "number") return code;
+	}
+	return undefined;
+}
+
+/**
+ * Extract error message from ACP error object.
+ * Checks both `message` field and `data.details` for compatibility.
+ */
+export function extractErrorMessage(error: unknown): string {
+	if (!error || typeof error !== "object") {
+		return "An unexpected error occurred.";
+	}
+
+	// Check data.details first (some agents use this format)
+	if ("data" in error) {
+		const data = error.data;
+		if (data && typeof data === "object" && "details" in data) {
+			const details = data.details;
+			if (typeof details === "string") return details;
+		}
+	}
+
+	// Then check message
+	if ("message" in error) {
+		const msg = error.message;
+		if (typeof msg === "string") return msg;
+	}
+
+	return "An unexpected error occurred.";
+}
+
+/**
+ * Extract error data from ACP error object.
+ */
+export function extractErrorData(error: unknown): unknown {
+	if (error && typeof error === "object" && "data" in error) {
+		return error.data;
+	}
+	return undefined;
+}
+
+// ============================================================================
+// Error Classification Functions
+// ============================================================================
+
+/**
+ * Get user-friendly title for ACP error code.
+ */
+export function getErrorTitle(code: number | undefined): string {
+	switch (code) {
+		case AcpErrorCode.PARSE_ERROR:
+			return "Protocol Error";
+		case AcpErrorCode.INVALID_REQUEST:
+			return "Invalid Request";
+		case AcpErrorCode.METHOD_NOT_FOUND:
+			return "Method Not Supported";
+		case AcpErrorCode.INVALID_PARAMS:
+			return "Invalid Parameters";
+		case AcpErrorCode.INTERNAL_ERROR:
+			return "Internal Error";
+		case AcpErrorCode.AUTHENTICATION_REQUIRED:
+			return "Authentication Required";
+		case AcpErrorCode.RESOURCE_NOT_FOUND:
+			return "Resource Not Found";
+		default:
+			return "Agent Error";
+	}
+}
+
+/**
+ * Get suggestion for ACP error code.
+ * Uses error message content to provide more specific suggestions.
+ */
+export function getErrorSuggestion(
+	code: number | undefined,
+	message: string,
+): string {
+	// Check for context exhaustion in message (Internal Error)
+	if (code === AcpErrorCode.INTERNAL_ERROR) {
+		const lowerMsg = message.toLowerCase();
+		if (
+			lowerMsg.includes("context") ||
+			lowerMsg.includes("token") ||
+			lowerMsg.includes("max_tokens") ||
+			lowerMsg.includes("too long")
+		) {
+			return "The conversation is too long. Try using a compact command if available, or start a new chat.";
+		}
+		if (lowerMsg.includes("overloaded") || lowerMsg.includes("capacity")) {
+			return "The service is busy. Please wait a moment and try again.";
+		}
+	}
+
+	switch (code) {
+		case AcpErrorCode.PARSE_ERROR:
+		case AcpErrorCode.INVALID_REQUEST:
+		case AcpErrorCode.METHOD_NOT_FOUND:
+			return "Try restarting the agent session.";
+		case AcpErrorCode.INVALID_PARAMS:
+			return "Check your agent configuration in settings.";
+		case AcpErrorCode.INTERNAL_ERROR:
+			return "Try again or restart the agent session.";
+		case AcpErrorCode.AUTHENTICATION_REQUIRED:
+			return "Check if you are logged in or if your API key is set correctly.";
+		case AcpErrorCode.RESOURCE_NOT_FOUND:
+			return "Check if the file or resource exists.";
+		default:
+			return "Try again or restart the agent session.";
+	}
+}
+
+// ============================================================================
+// Error Conversion Functions
+// ============================================================================
+
+/**
+ * Convert unknown error to AcpError.
+ * The error's message field is used directly for user display.
+ */
+export function toAcpError(
+	error: unknown,
+	sessionId?: string | null,
+): AcpError {
+	const code = extractErrorCode(error) ?? -1;
+	const message = extractErrorMessage(error);
+	const data = extractErrorData(error);
+
+	return {
+		code,
+		message, // Agent's message is used directly
+		data,
+		sessionId,
+		originalError: error,
+		title: getErrorTitle(code),
+		suggestion: getErrorSuggestion(code, message),
+	};
+}
+
+/**
+ * Convert AcpError to ErrorInfo for UI display.
+ */
+export function toErrorInfo(acpError: AcpError): ErrorInfo {
+	return {
+		title: acpError.title,
+		message: acpError.message,
+		suggestion: acpError.suggestion,
+	};
+}
+
+// ============================================================================
+// Error Check Functions
+// ============================================================================
+
+/**
+ * Check if error is the "empty response text" error that should be ignored.
+ */
+export function isEmptyResponseError(error: unknown): boolean {
+	const code = extractErrorCode(error);
+	if (code !== AcpErrorCode.INTERNAL_ERROR) {
+		return false;
+	}
+
+	const message = extractErrorMessage(error);
+	return message.includes("empty response text");
+}
+
+/**
+ * Extract a user-friendly error hint from stderr output.
+ * Detects common failure patterns like missing API keys.
+ */
+export function extractStderrErrorHint(stderr: string): string | null {
+	if (!stderr) return null;
+
+	if (
+		stderr.includes("API key is missing") ||
+		stderr.includes("LoadAPIKeyError")
+	) {
+		return "The agent's API key may be missing. For custom agents, add the required API key (e.g., ANTHROPIC_API_KEY) in the agent's Environment Variables setting.";
+	}
+
+	if (
+		stderr.includes("authentication") ||
+		stderr.includes("unauthorized") ||
+		stderr.includes("401")
+	) {
+		return "The agent reported an authentication error. Check that your API key or credentials are valid.";
+	}
+
+	return null;
+}
+
+/**
+ * Check if error is a "user aborted" error that should be ignored.
+ */
+export function isUserAbortedError(error: unknown): boolean {
+	const code = extractErrorCode(error);
+	if (code !== AcpErrorCode.INTERNAL_ERROR) {
+		return false;
+	}
+
+	const message = extractErrorMessage(error);
+	return message.includes("user aborted");
+}
+
+// ============================================================================
+// Process Error Functions
+// ============================================================================
+
+/**
+ * Get error information for process spawn errors.
+ */
+export function getSpawnErrorInfo(
+	error: Error,
+	command: string,
+	agentLabel: string,
+	wslMode: boolean,
+): { title: string; message: string; suggestion: string } {
+	if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+		return {
+			title: "Command Not Found",
+			message: `The command "${command}" could not be found. Please check the path configuration for ${agentLabel}.`,
+			suggestion: getCommandNotFoundSuggestion(command, wslMode),
+		};
+	}
+
+	return {
+		title: "Agent Startup Error",
+		message: `Failed to start ${agentLabel}: ${error.message}`,
+		suggestion: "Please check the agent configuration in settings.",
+	};
+}
+
+/**
+ * Get platform-specific suggestions for command not found errors.
+ */
+export function getCommandNotFoundSuggestion(
+	command: string,
+	wslMode: boolean,
+): string {
+	const commandName =
+		command.split("/").pop()?.split("\\").pop() || "command";
+
+	if (Platform.isWin && wslMode) {
+		return `1. Verify the agent path: Use "which ${commandName}" in your WSL terminal to find the correct path. 2. If the agent requires Node.js, also check that Node.js path is correctly set in General Settings (use "which node" to find it).`;
+	} else if (Platform.isWin) {
+		return `1. Verify the agent path: Use "where ${commandName}" in Command Prompt to find the correct path. 2. If the agent requires Node.js, also check that Node.js path is correctly set in General Settings (use "where node" to find it).`;
+	} else {
+		return `1. Verify the agent path: Use "which ${commandName}" in Terminal to find the correct path. 2. If the agent requires Node.js, also check that Node.js path is correctly set in General Settings (use "which node" to find it).`;
+	}
+}

package/src/utils/logger.ts

@@ -0,0 +1,44 @@
+export interface LoggerConfig {
+	debugMode: boolean;
+}
+
+let globalLogger: Logger | null = null;
+
+export function initializeLogger(config: LoggerConfig): void {
+	globalLogger = new Logger(config);
+}
+
+export function getLogger(): Logger {
+	if (!globalLogger) {
+		return new Logger({ debugMode: false });
+	}
+	return globalLogger;
+}
+
+export class Logger {
+	constructor(private config: LoggerConfig) {}
+
+	log(...args: unknown[]): void {
+		if (this.config.debugMode) {
+			console.debug(...args);
+		}
+	}
+
+	error(...args: unknown[]): void {
+		if (this.config.debugMode) {
+			console.error(...args);
+		}
+	}
+
+	warn(...args: unknown[]): void {
+		if (this.config.debugMode) {
+			console.warn(...args);
+		}
+	}
+
+	info(...args: unknown[]): void {
+		if (this.config.debugMode) {
+			console.debug(...args);
+		}
+	}
+}