@mseep/obsidian-agent-client 0.10.6

package/src/ui/ChangeDirectoryModal.ts

@@ -0,0 +1,137 @@
+/**
+ * Modal for selecting a working directory for a new chat session.
+ *
+ * Provides a text input for manual path entry and a Browse button
+ * that opens the native OS folder picker via Electron's dialog API.
+ * Calls onSelect callback with the chosen path when user clicks Start.
+ */
+
+import { Modal, App } from "obsidian";
+
+export class ChangeDirectoryModal extends Modal {
+	private currentPath: string;
+	private onSelect: (path: string) => void | Promise<void>;
+
+	constructor(
+		app: App,
+		currentPath: string,
+		onSelect: (path: string) => void | Promise<void>,
+	) {
+		super(app);
+		this.currentPath = currentPath;
+		this.onSelect = onSelect;
+	}
+
+	onOpen() {
+		const { contentEl } = this;
+		contentEl.empty();
+
+		contentEl.createEl("h2", { text: "New chat in directory" });
+
+		contentEl.createEl("p", {
+			text: "Start a new chat session with the agent working in the specified directory.",
+			cls: "agent-client-change-dir-description",
+		});
+
+		// Path input row (text input + browse button)
+		const inputRow = contentEl.createDiv({
+			cls: "agent-client-change-dir-input-row",
+		});
+
+		const inputEl = inputRow.createEl("input", {
+			type: "text",
+			cls: "agent-client-change-dir-input",
+			placeholder: "/path/to/directory",
+		});
+		inputEl.value = this.currentPath;
+
+		const browseButton = inputRow.createEl("button", {
+			text: "Browse...",
+		});
+		browseButton.addEventListener("click", () => {
+			void this.openFolderPicker().then((selectedPath) => {
+				if (selectedPath) {
+					inputEl.value = selectedPath;
+				}
+			});
+		});
+
+		// Focus and select all text
+		window.setTimeout(() => {
+			inputEl.focus();
+			inputEl.select();
+		}, 10);
+
+		// Enter key to start
+		inputEl.addEventListener("keydown", (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				this.selectAndClose(inputEl.value);
+			}
+		});
+
+		// Buttons
+		const buttonContainer = contentEl.createDiv({
+			cls: "agent-client-change-dir-buttons",
+		});
+
+		buttonContainer
+			.createEl("button", { text: "Cancel" })
+			.addEventListener("click", () => {
+				this.close();
+			});
+
+		buttonContainer
+			.createEl("button", {
+				text: "Start",
+				cls: "mod-cta",
+			})
+			.addEventListener("click", () => {
+				this.selectAndClose(inputEl.value);
+			});
+	}
+
+	private async openFolderPicker(): Promise<string | null> {
+		try {
+			// eslint-disable-next-line @typescript-eslint/no-require-imports -- electron is a runtime-only module provided by Obsidian's host environment
+			const { remote } = require("electron") as {
+				remote: {
+					dialog: {
+						showOpenDialog: (options: {
+							properties: string[];
+							title: string;
+							defaultPath?: string;
+						}) => Promise<{
+							canceled: boolean;
+							filePaths: string[];
+						}>;
+					};
+				};
+			};
+			const result = await remote.dialog.showOpenDialog({
+				properties: ["openDirectory"],
+				title: "Select working directory",
+				defaultPath: this.currentPath,
+			});
+			if (!result.canceled && result.filePaths.length > 0) {
+				return result.filePaths[0];
+			}
+		} catch {
+			// Electron remote not available — ignore silently
+			// User can still type the path manually
+		}
+		return null;
+	}
+
+	private selectAndClose(rawValue: string) {
+		const value = rawValue.trim();
+		if (!value) return;
+		this.close();
+		void this.onSelect(value);
+	}
+
+	onClose() {
+		const { contentEl } = this;
+		contentEl.empty();
+	}
+}

package/src/ui/ChatContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+import type AgentClientPlugin from "../plugin";
+import type { AcpClient } from "../acp/acp-client";
+import type { VaultService } from "../services/vault-service";
+import type { SettingsService } from "../services/settings-service";
+
+export interface ChatContextValue {
+	plugin: AgentClientPlugin;
+	acpClient: AcpClient;
+	vaultService: VaultService;
+	settingsService: SettingsService;
+}
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+export const ChatContextProvider = ChatContext.Provider;
+
+export function useChatContext(): ChatContextValue {
+	const ctx = useContext(ChatContext);
+	if (!ctx)
+		throw new Error(
+			"useChatContext must be used within ChatContextProvider",
+		);
+	return ctx;
+}

package/src/ui/ChatHeader.tsx

@@ -0,0 +1,295 @@
+import * as React from "react";
+const { useRef, useEffect } = React;
+import { setIcon, DropdownComponent } from "obsidian";
+import { HeaderButton } from "./shared/IconButton";
+import type { AgentDisplayInfo } from "../services/session-helpers";
+
+// ============================================================================
+// Props Types
+// ============================================================================
+
+/**
+ * Props for the sidebar variant of ChatHeader
+ */
+export interface SidebarHeaderProps {
+	variant: "sidebar";
+	/** Display name of the active agent */
+	agentLabel: string;
+	/** Whether a plugin update is available */
+	isUpdateAvailable: boolean;
+	/** Callback to create a new chat session */
+	onNewChat: () => void;
+	/** Callback to export the chat */
+	onExportChat: () => void;
+	/** Callback to show the header menu at the click position */
+	onShowMenu: (e: React.MouseEvent<HTMLDivElement>) => void;
+	/** Callback to open session history */
+	onOpenHistory?: () => void;
+}
+
+/**
+ * Props for the floating variant of ChatHeader
+ */
+export interface FloatingHeaderProps {
+	variant: "floating";
+	/** Display name of the active agent */
+	agentLabel: string;
+	/** Available agents for switching */
+	availableAgents: AgentDisplayInfo[];
+	/** Current agent ID */
+	currentAgentId: string;
+	/** Whether a plugin update is available */
+	isUpdateAvailable: boolean;
+	/** Callback to switch agent */
+	onAgentChange: (agentId: string) => void;
+	/** Callback to show the More menu at the click position */
+	onShowMenu: (e: React.MouseEvent<HTMLElement>) => void;
+	/** Callback to minimize window (floating only) */
+	onMinimize?: () => void;
+	/** Callback to close and terminate window (floating only) */
+	onClose?: () => void;
+}
+
+/**
+ * Union type for ChatHeader props - dispatches based on variant
+ */
+export type ChatHeaderProps = SidebarHeaderProps | FloatingHeaderProps;
+
+// ============================================================================
+// Internal Components
+// ============================================================================
+
+/**
+ * A single action button matching Obsidian's nav-action-button pattern.
+ * Uses setIcon() to render Lucide icons identically to native sidebar buttons.
+ */
+function NavActionButton({
+	icon,
+	label,
+	onClick,
+}: {
+	icon: string;
+	label: string;
+	onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}) {
+	const ref = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (ref.current) {
+			setIcon(ref.current, icon);
+		}
+	}, [icon]);
+
+	return (
+		<div
+			ref={ref}
+			className="clickable-icon nav-action-button"
+			aria-label={label}
+			onClick={onClick}
+		/>
+	);
+}
+
+// ============================================================================
+// Sidebar Header
+// ============================================================================
+
+/**
+ * Header component for the sidebar chat view.
+ *
+ * Uses Obsidian's native .nav-header + .nav-buttons-container pattern
+ * to match the look of File Explorer, Bookmarks, and other sidebar panes.
+ */
+function SidebarHeader({
+	agentLabel,
+	isUpdateAvailable,
+	onNewChat,
+	onExportChat,
+	onShowMenu,
+	onOpenHistory,
+}: SidebarHeaderProps) {
+	return (
+		<div className="nav-header agent-client-chat-view-header">
+			<div className="nav-buttons-container">
+				<span className="agent-client-chat-view-header-title">
+					{agentLabel}
+				</span>
+				{isUpdateAvailable && (
+					<span className="agent-client-chat-view-header-update">
+						Plugin update available!
+					</span>
+				)}
+				<NavActionButton
+					icon="plus"
+					label="New chat"
+					onClick={onNewChat}
+				/>
+				{onOpenHistory && (
+					<NavActionButton
+						icon="history"
+						label="Session history"
+						onClick={onOpenHistory}
+					/>
+				)}
+				<NavActionButton
+					icon="save"
+					label="Export chat to Markdown"
+					onClick={onExportChat}
+				/>
+				<NavActionButton
+					icon="more-vertical"
+					label="More"
+					onClick={onShowMenu}
+				/>
+			</div>
+		</div>
+	);
+}
+
+// ============================================================================
+// Floating Header
+// ============================================================================
+
+/**
+ * Inline header component for Floating and CodeBlock chat views.
+ *
+ * Features:
+ * - Agent selector
+ * - Update notification (if available)
+ * - Action buttons with Lucide icons (new chat, history, export, restart)
+ * - Minimize and close buttons (floating variant only)
+ */
+function FloatingHeader({
+	agentLabel,
+	availableAgents,
+	currentAgentId,
+	isUpdateAvailable,
+	onAgentChange,
+	onShowMenu,
+	onMinimize,
+	onClose,
+}: FloatingHeaderProps) {
+	// Refs for agent dropdown
+	const agentDropdownRef = useRef<HTMLDivElement>(null);
+	const agentDropdownInstance = useRef<DropdownComponent | null>(null);
+
+	// Stable ref for onAgentChange callback
+	const onAgentChangeRef = useRef(onAgentChange);
+	onAgentChangeRef.current = onAgentChange;
+
+	// Initialize agent dropdown
+	useEffect(() => {
+		const containerEl = agentDropdownRef.current;
+		if (!containerEl) return;
+
+		// Only show dropdown if there are multiple agents
+		if (availableAgents.length <= 1) {
+			if (agentDropdownInstance.current) {
+				containerEl.empty();
+				agentDropdownInstance.current = null;
+			}
+			return;
+		}
+
+		// Create dropdown if not exists
+		if (!agentDropdownInstance.current) {
+			const dropdown = new DropdownComponent(containerEl);
+			agentDropdownInstance.current = dropdown;
+
+			// Add options
+			for (const agent of availableAgents) {
+				dropdown.addOption(agent.id, agent.displayName);
+			}
+
+			// Set initial value
+			if (currentAgentId) {
+				dropdown.setValue(currentAgentId);
+			}
+
+			// Handle change
+			dropdown.onChange((value) => {
+				onAgentChangeRef.current?.(value);
+			});
+		}
+
+		// Cleanup on unmount or when availableAgents change
+		return () => {
+			if (agentDropdownInstance.current) {
+				containerEl.empty();
+				agentDropdownInstance.current = null;
+			}
+		};
+	}, [availableAgents]);
+
+	// Update dropdown value when currentAgentId changes
+	useEffect(() => {
+		if (agentDropdownInstance.current && currentAgentId) {
+			agentDropdownInstance.current.setValue(currentAgentId);
+		}
+	}, [currentAgentId]);
+
+	return (
+		<div
+			className={`agent-client-inline-header agent-client-inline-header-floating`}
+		>
+			<div className="agent-client-inline-header-main">
+				{availableAgents.length > 1 ? (
+					<div className="agent-client-agent-selector">
+						<div ref={agentDropdownRef} />
+						<span
+							className="agent-client-agent-selector-icon"
+							ref={(el) => {
+								if (el) setIcon(el, "chevron-down");
+							}}
+						/>
+					</div>
+				) : (
+					<span className="agent-client-agent-label">
+						{agentLabel}
+					</span>
+				)}
+			</div>
+			{isUpdateAvailable && (
+				<p className="agent-client-chat-view-header-update">
+					Plugin update available!
+				</p>
+			)}
+			<div className="agent-client-inline-header-actions">
+				<HeaderButton
+					iconName="more-vertical"
+					tooltip="More"
+					onClick={onShowMenu}
+				/>
+				{onMinimize && (
+					<HeaderButton
+						iconName="minimize-2"
+						tooltip="Minimize"
+						onClick={onMinimize}
+					/>
+				)}
+				{onClose && (
+					<HeaderButton
+						iconName="x"
+						tooltip="Close"
+						onClick={onClose}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+// ============================================================================
+// Exported ChatHeader (Dispatcher)
+// ============================================================================
+
+/**
+ * ChatHeader component that dispatches to SidebarHeader or FloatingHeader
+ * based on the `variant` prop.
+ */
+export function ChatHeader(props: ChatHeaderProps) {
+	if (props.variant === "floating") {
+		return <FloatingHeader {...props} />;
+	}
+	return <SidebarHeader {...props} />;
+}