feat(chat): clickable file names on file-related tool call rows

Replace the standalone open-in-pane icon button with a hover-underline
treatment directly on the filename. Applies to Read, Check file, Write,
Edit, Delete, and Smart Edit tool call rows.

Extracts a shared ClickableFilePath component (span[role=button]) that
nests safely inside CollapsibleTrigger without invalid nested-button HTML.

Author: michalkopanski

apps/desktop/src/renderer/components/Chat/ChatInterface/components/ReadOnlyToolCall/ReadOnlyToolCall.tsx

@@ -1,14 +1,9 @@
+import { ClickableFilePath } from "@superset/ui/ai-elements/clickable-file-path";
 import { ReadFileTool } from "@superset/ui/ai-elements/read-file-tool";
 import { ToolInput, ToolOutput } from "@superset/ui/ai-elements/tool";
 import { ToolCallRow } from "@superset/ui/ai-elements/tool-call-row";
 import { getToolName } from "ai";
-import {
-	ExternalLinkIcon,
-	FileIcon,
-	FileSearchIcon,
-	FolderTreeIcon,
-	SearchIcon,
-} from "lucide-react";
+import { FileIcon, FileSearchIcon, FolderTreeIcon, SearchIcon } from "lucide-react";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import { detectLanguage } from "shared/detect-language";
 import type { BundledLanguage } from "shiki";
@@ -157,18 +152,6 @@ export function ReadOnlyToolCall({
 	const filePath = getWorkspaceToolFilePath({ toolName, args });
 	const canOpenFile = Boolean(filePath && onOpenFileInPane);
 
-	const headerExtra =
-		canOpenFile && filePath ? (
-			<button
-				type="button"
-				aria-label={`Open ${filePath} in file pane`}
-				className="mr-1 flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
-				onClick={() => onOpenFileInPane?.(filePath)}
-			>
-				<ExternalLinkIcon className="h-3 w-3" />
-			</button>
-		) : undefined;
-
 	// Prevent a flash of raw output while the disk read is in flight
 	if (
 		isReadFileTool &&
@@ -207,10 +190,22 @@ export function ReadOnlyToolCall({
 		);
 	}
 
+	// For file-path tools (e.g. file_stat), make the filename clickable.
+	// Search queries and directory listings stay as plain text.
+	const descriptionNode =
+		canOpenFile && filePath && subtitle ? (
+			<ClickableFilePath
+				path={filePath}
+				display={subtitle}
+				onOpen={() => onOpenFileInPane?.(filePath)}
+			/>
+		) : (
+			subtitle || undefined
+		);
+
 	return (
 		<ToolCallRow
-			description={subtitle || undefined}
-			headerExtra={headerExtra}
+			description={descriptionNode}
 			icon={Icon}
 			isError={isError || displayState === "output-error"}
 			isPending={isPending}

apps/desktop/src/renderer/components/Chat/components/SubagentInnerToolCall/SubagentInnerToolCall.tsx

@@ -1,4 +1,5 @@
 import { BashTool } from "@superset/ui/ai-elements/bash-tool";
+import { ClickableFilePath } from "@superset/ui/ai-elements/clickable-file-path";
 import { ReadFileTool } from "@superset/ui/ai-elements/read-file-tool";
 import { ToolCallRow } from "@superset/ui/ai-elements/tool-call-row";
 import {
@@ -62,6 +63,28 @@ function getToolMeta(toolName: string): ToolMeta {
 	);
 }
 
+/** Tools where the description is a file path (not a search query or URL). */
+const FILE_PATH_TOOLS = new Set([
+	"mastra_workspace_write_file",
+	"mastra_workspace_edit_file",
+	"mastra_workspace_file_stat",
+	"mastra_workspace_delete",
+	"ast_smart_edit",
+]);
+
+function getRawFilePath(
+	toolName: string,
+	args: Record<string, unknown>,
+): string | null {
+	if (FILE_PATH_TOOLS.has(toolName)) {
+		const raw = String(
+			args.path ?? args.filePath ?? args.file_path ?? args.file ?? "",
+		);
+		return raw || null;
+	}
+	return null;
+}
+
 function getDescription(
 	toolName: string,
 	args: Record<string, unknown> | null,
@@ -261,13 +284,33 @@ export function SubagentInnerToolCall({
 		}
 	}
 
+	// For file-path tools, make the filename in the description clickable.
+	const rawFilePath = getRawFilePath(normalized, args ?? {});
+	const resolvedFilePath = rawFilePath
+		? (normalizeWorkspaceFilePath({
+				filePath: rawFilePath,
+				workspaceRoot: workspaceCwd,
+			}) ?? rawFilePath)
+		: null;
+
+	const descriptionNode =
+		resolvedFilePath && onOpenFileInPane && description ? (
+			<ClickableFilePath
+				path={resolvedFilePath}
+				display={description}
+				onOpen={() => onOpenFileInPane(resolvedFilePath)}
+			/>
+		) : (
+			description
+		);
+
 	return (
 		<ToolCallRow
 			icon={icon}
 			isError={isError}
 			isPending={isPending}
 			title={label}
-			description={description}
+			description={descriptionNode}
 		>
 			{hasResult ? (
 				<div className="pl-2 py-1.5">

packages/ui/src/components/ai-elements/clickable-file-path.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+export type ClickableFilePathProps = {
+	/** Full file path, used for the aria-label. */
+	path: string;
+	/** Display text. Defaults to the basename of `path`. */
+	display?: string;
+	/** When provided, renders as an interactive element that calls this on click. */
+	onOpen?: () => void;
+	className?: string;
+};
+
+/**
+ * Displays a file path (or its basename) with a hover highlight when clickable.
+ *
+ * Uses `<span role="button">` so it safely nests inside a `<button>` element
+ * (e.g. CollapsibleTrigger) without producing invalid HTML.
+ * stopPropagation prevents the outer CollapsibleTrigger from toggling.
+ */
+export function ClickableFilePath({
+	path,
+	display,
+	onOpen,
+	className,
+}: ClickableFilePathProps) {
+	const label =
+		display ?? (path.includes("/") ? (path.split("/").pop() ?? path) : path);
+
+	if (!onOpen) {
+		return <span className={className}>{label}</span>;
+	}
+
+	return (
+		<span
+			role="button"
+			tabIndex={0}
+			aria-label={`Open ${path} in file pane`}
+			className={`cursor-pointer underline-offset-2 transition-colors hover:text-foreground hover:underline ${className ?? ""}`}
+			onClick={(e) => {
+				e.stopPropagation();
+				onOpen();
+			}}
+			onKeyDown={(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.stopPropagation();
+					onOpen();
+				}
+			}}
+		>
+			{label}
+		</span>
+	);
+}

packages/ui/src/components/ai-elements/read-file-tool.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { ExternalLinkIcon, FileIcon } from "lucide-react";
+import { FileIcon } from "lucide-react";
 import type { BundledLanguage } from "shiki";
+import { ClickableFilePath } from "./clickable-file-path";
 import { CodeBlock } from "./code-block";
 import { ToolCallRow } from "./tool-call-row";
 
@@ -16,7 +17,7 @@ export type ReadFileToolProps = {
 	language?: BundledLanguage;
 	isError?: boolean;
 	isPending?: boolean;
-	/** When provided, renders an "open in pane" icon button in the header. */
+	/** When provided, makes the filename clickable to open in pane. */
 	onOpenInPane?: () => void;
 	className?: string;
 };
@@ -35,22 +36,12 @@ export function ReadFileTool({
 	onOpenInPane,
 	className,
 }: ReadFileToolProps) {
-	const headerExtra = onOpenInPane ? (
-		<button
-			type="button"
-			aria-label={`Open ${filename} in file pane`}
-			className="mr-1 flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
-			onClick={onOpenInPane}
-		>
-			<ExternalLinkIcon className="h-3 w-3" />
-		</button>
-	) : undefined;
-
 	return (
 		<ToolCallRow
 			className={className}
-			description={filename}
-			headerExtra={headerExtra}
+			description={
+				<ClickableFilePath path={filename} onOpen={onOpenInPane} />
+			}
 			icon={FileIcon}
 			isError={isError}
 			isPending={isPending}
@@ -59,7 +50,11 @@ export function ReadFileTool({
 			<div className="py-1.5 pl-2">
 				<div className="overflow-hidden rounded-md border border-border">
 					<div className="flex items-center gap-2 border-b border-border bg-muted/50 px-3 py-1.5 font-mono text-xs">
-						<span className="text-foreground">{filename}</span>
+						<ClickableFilePath
+							path={filename}
+							onOpen={onOpenInPane}
+							className="text-foreground"
+						/>
 						{lineRange && (
 							<span className="text-muted-foreground">{lineRange}</span>
 						)}