+
+ );
+}
+
+function PreviewBody(props: {
+ preview: LoadedPreview;
+ spreadsheet: SpreadsheetTable | null;
+ activeSheetName: string;
+ onActiveSheetNameChange: (sheetName: string) => void;
+ onRenderError: (message: string | null) => void;
+}) {
+ const { preview, spreadsheet, activeSheetName, onActiveSheetNameChange, onRenderError } = props;
+ const { t } = useLocale();
+ const docxContainerRef = useRef
+
+
+ {error || renderError || spreadsheet?.error ? (
+
+
+
+ {t("workspaceFilePreview.title")}
+
+ {activePath}
+
+ {canOpenEditor && openRequest ? (
+
+ ) : null}
+
+
+
+
+
+ ) : null}
+
+
+ {error ?? renderError ?? spreadsheet?.error}
+
+
+ {loading ? (
+
+
+
+
+ ) : preview ? (
+
+
+ )}
+
+ {activePath}
+ {preview ? (
+
+ {preview.mimeType} · {formatBytes(preview.sizeBytes)}
+
+ ) : null}
+
+
+ 
+
+ );
+ }
+
+ if (preview.kind === "pdf") {
+ return (
+
+ );
+ }
+
+ if (preview.kind === "html") {
+ return (
+
+ );
+ }
+
+ if (preview.kind === "markdown") {
+ return (
+
+
+ );
+ }
+
+ if (preview.kind === "document") {
+ return (
+
+
+
+ );
+ }
+
+ if (preview.kind === "spreadsheet") {
+ return (
+
+ {spreadsheet && spreadsheet.sheetNames.length > 1 ? (
+
+ );
+ }
+
+ if (preview.kind === "audio") {
+ return (
+
+ {spreadsheet.sheetNames.map((sheetName) => (
+
+ ))}
+
+ ) : null}
+
+ {spreadsheet?.rows.length ? (
+
+
+ {spreadsheet.rows.map((row, rowIndex) => (
+
+ ) : (
+
+ {spreadsheet?.truncatedRows || spreadsheet?.truncatedColumns ? (
+ | + {cell.value} + | + ))} +
+ {t("workspaceFilePreview.emptySheet")}
+
+ )}
+
+ {t("workspaceFilePreview.truncated")}
+
+ ) : null}
+
+ {/* biome-ignore lint/a11y/useMediaCaption: Workspace media previews do not have a separate caption track available. */}
+
+
+ );
+ }
+
+ if (preview.kind === "video") {
+ return (
+
+ {/* biome-ignore lint/a11y/useMediaCaption: Workspace media previews do not have a separate caption track available. */}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/crates/agent-gateway/web/src/components/workspace-editor/workspaceImagePreview.ts b/crates/agent-gateway/web/src/components/workspace-editor/workspaceImagePreview.ts
index d407f0e6..07d3156d 100644
--- a/crates/agent-gateway/web/src/components/workspace-editor/workspaceImagePreview.ts
+++ b/crates/agent-gateway/web/src/components/workspace-editor/workspaceImagePreview.ts
@@ -1,4 +1,5 @@
const WORKSPACE_IMAGE_EXTENSIONS = new Set([
+ "avif",
"bmp",
"gif",
"ico",
@@ -9,10 +10,81 @@ const WORKSPACE_IMAGE_EXTENSIONS = new Set([
"webp",
]);
-export function isWorkspaceImagePath(path: string) {
+const WORKSPACE_PDF_EXTENSIONS = new Set(["pdf"]);
+
+const WORKSPACE_HTML_EXTENSIONS = new Set(["html", "htm"]);
+
+const WORKSPACE_MARKDOWN_EXTENSIONS = new Set(["md", "mdx"]);
+
+const WORKSPACE_DOCUMENT_EXTENSIONS = new Set(["doc", "docx", "rtf"]);
+
+const WORKSPACE_SPREADSHEET_EXTENSIONS = new Set([
+ "csv",
+ "ods",
+ "tsv",
+ "xls",
+ "xlsm",
+ "xlsx",
+ "xltm",
+ "xltx",
+]);
+
+const WORKSPACE_AUDIO_EXTENSIONS = new Set(["flac", "m4a", "mp3", "oga", "ogg", "wav"]);
+
+const WORKSPACE_VIDEO_EXTENSIONS = new Set(["m4v", "mov", "mp4", "ogv", "webm"]);
+
+const WORKSPACE_TEXT_EXTENSIONS = new Set(["log", "txt"]);
+
+export type WorkspacePreviewKind =
+ | "audio"
+ | "document"
+ | "html"
+ | "image"
+ | "markdown"
+ | "pdf"
+ | "spreadsheet"
+ | "text"
+ | "video";
+
+export function workspacePathExtension(path: string) {
const normalized = path.trim().replace(/\\/g, "/");
const name = normalized.slice(normalized.lastIndexOf("/") + 1);
const extensionIndex = name.lastIndexOf(".");
- if (extensionIndex < 0) return false;
- return WORKSPACE_IMAGE_EXTENSIONS.has(name.slice(extensionIndex + 1).toLowerCase());
+ if (extensionIndex < 0) return "";
+ return name.slice(extensionIndex + 1).toLowerCase();
+}
+
+export function isWorkspaceImagePath(path: string) {
+ return WORKSPACE_IMAGE_EXTENSIONS.has(workspacePathExtension(path));
+}
+
+export function getWorkspacePreviewKind(path: string): WorkspacePreviewKind | null {
+ const extension = workspacePathExtension(path);
+ if (!extension) return null;
+ if (WORKSPACE_IMAGE_EXTENSIONS.has(extension)) return "image";
+ if (WORKSPACE_PDF_EXTENSIONS.has(extension)) return "pdf";
+ if (WORKSPACE_HTML_EXTENSIONS.has(extension)) return "html";
+ if (WORKSPACE_MARKDOWN_EXTENSIONS.has(extension)) return "markdown";
+ if (WORKSPACE_DOCUMENT_EXTENSIONS.has(extension)) return "document";
+ if (WORKSPACE_SPREADSHEET_EXTENSIONS.has(extension)) return "spreadsheet";
+ if (WORKSPACE_AUDIO_EXTENSIONS.has(extension)) return "audio";
+ if (WORKSPACE_VIDEO_EXTENSIONS.has(extension)) return "video";
+ if (WORKSPACE_TEXT_EXTENSIONS.has(extension)) return "text";
+ return null;
+}
+
+export function isWorkspacePreviewPath(path: string) {
+ return getWorkspacePreviewKind(path) !== null;
+}
+
+export function isWorkspaceEditablePreviewPath(path: string) {
+ const extension = workspacePathExtension(path);
+ if (!extension) return false;
+ return (
+ WORKSPACE_HTML_EXTENSIONS.has(extension) ||
+ WORKSPACE_MARKDOWN_EXTENSIONS.has(extension) ||
+ WORKSPACE_TEXT_EXTENSIONS.has(extension) ||
+ extension === "csv" ||
+ extension === "tsv"
+ );
}
diff --git a/crates/agent-gateway/web/src/i18n/config.ts b/crates/agent-gateway/web/src/i18n/config.ts
index 08998d9e..83f5f7dd 100644
--- a/crates/agent-gateway/web/src/i18n/config.ts
+++ b/crates/agent-gateway/web/src/i18n/config.ts
@@ -531,6 +531,7 @@ export const translations: Record
+ {preview.text ?? ""}
+
+ Hello
".as_slice()), + ("docs/readme.md", "text/markdown", b"# Hello".as_slice()), + ("docs/file.pdf", "application/pdf", b"%PDF-1.7\n".as_slice()), + ]; + + for (path, _mime_type, bytes) in files { + fs::write(workdir.join(path), bytes).expect("write preview file"); + } + + for (path, mime_type, bytes) in files { + let response = + fs_read_workspace_image_sync(workdir.display().to_string(), path.to_string()) + .expect("workspace preview should read"); + assert_eq!(response.kind, "preview"); + assert_eq!(response.path, path); + assert_eq!(response.mime_type.as_deref(), Some(mime_type)); + assert_eq!(response.size_bytes, Some(bytes.len())); + assert_eq!( + response.data.as_deref(), + Some(BASE64_STANDARD.encode(bytes).as_str()) + ); + } + + let _ = fs::remove_dir_all(workdir); + } + + #[cfg(target_os = "macos")] + #[test] + fn workspace_preview_converts_rtf_to_html_on_macos() { + let workdir = unique_test_workdir("workspace-preview-rtf"); + fs::create_dir_all(workdir.join("docs")).expect("create workdir"); + let target_path = workdir.join("docs/report.rtf"); + let rtf = r#"{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard Hello RTF\par}"#; + fs::write(&target_path, rtf).expect("write rtf"); + let target = fs::canonicalize(&target_path).expect("canonical rtf path"); + + let response = fs_read_workspace_image_sync( + workdir.display().to_string(), + "docs/report.rtf".to_string(), + ) + .expect("rtf preview should convert to html"); + + assert_eq!(response.kind, "preview"); + assert_eq!(response.path, "docs/report.rtf"); + assert_eq!(response.mime_type.as_deref(), Some("text/html")); + assert_eq!(response.size_bytes, Some(rtf.len())); + let html = String::from_utf8( + BASE64_STANDARD + .decode(response.data.expect("preview html data")) + .expect("decode html data"), + ) + .expect("html should be utf-8"); + assert!(html.contains("Hello RTF"), "unexpected html: {html}"); + + let source_bytes = fs::read(&target).expect("read source rtf"); + let source_md = fs::metadata(&target).expect("source metadata"); + let cache_path = document_preview_cache_path( + &target, + metadata_mtime_ms(&source_md), + source_bytes.len(), + &hash_bytes(&source_bytes), + ); + assert!(cache_path.exists(), "expected document preview cache file"); + + let cached_html = "Cached RTF Preview"; + fs::write(&cache_path, cached_html).expect("overwrite cache file"); + let cached_response = fs_read_workspace_image_sync( + workdir.display().to_string(), + "docs/report.rtf".to_string(), + ) + .expect("rtf preview should use cached html"); + let cached = String::from_utf8( + BASE64_STANDARD + .decode(cached_response.data.expect("cached preview html data")) + .expect("decode cached html data"), + ) + .expect("cached html should be utf-8"); + assert!( + cached.contains("Cached RTF Preview"), + "unexpected cached html: {cached}" + ); + + let updated_rtf = r#"{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard Updated RTF\par}"#; + fs::write(&target, updated_rtf).expect("update rtf"); + let updated_response = fs_read_workspace_image_sync( + workdir.display().to_string(), + "docs/report.rtf".to_string(), + ) + .expect("rtf preview should refresh after source change"); + let updated = String::from_utf8( + BASE64_STANDARD + .decode(updated_response.data.expect("updated preview html data")) + .expect("decode updated html data"), + ) + .expect("updated html should be utf-8"); + assert!( + updated.contains("Updated RTF"), + "unexpected html: {updated}" + ); + assert!( + !updated.contains("Cached RTF Preview"), + "source change should not reuse stale cache: {updated}" + ); + + let _ = fs::remove_dir_all(workdir); + } + #[test] fn read_docx_extracts_word_text() { let workdir = unique_test_workdir("read-docx"); diff --git a/crates/agent-gui/src-tauri/src/lib.rs b/crates/agent-gui/src-tauri/src/lib.rs index d678fac7..b02479b8 100644 --- a/crates/agent-gui/src-tauri/src/lib.rs +++ b/crates/agent-gui/src-tauri/src/lib.rs @@ -66,6 +66,7 @@ macro_rules! app_invoke_handler { commands::fs::fs_write_text, commands::fs::fs_edit_text, commands::fs::fs_delete, + commands::fs::fs_open_workspace_path, commands::fs::fs_create_dir, commands::fs::fs_rename, commands::fs::fs_roots, diff --git a/crates/agent-gui/src-tauri/src/services/gateway_bridge.rs b/crates/agent-gui/src-tauri/src/services/gateway_bridge.rs index 1f1bede9..ef893c3d 100644 --- a/crates/agent-gui/src-tauri/src/services/gateway_bridge.rs +++ b/crates/agent-gui/src-tauri/src/services/gateway_bridge.rs @@ -438,16 +438,16 @@ pub async fn handle_fs_read_workspace_image( fs_read_workspace_image_sync(request.workdir, request.path) }) .await - .map_err(|e| format!("gateway fs read workspace image join failed: {e}"))? + .map_err(|e| format!("gateway fs read workspace preview join failed: {e}"))? .and_then(|response| { Ok(proto::FsReadWorkspaceImageResponse { path: response.path, mime_type: response .mime_type - .ok_or_else(|| "workspace image response is missing mime type".to_string())?, + .ok_or_else(|| "workspace preview response is missing mime type".to_string())?, data: response .data - .ok_or_else(|| "workspace image response is missing data".to_string())?, + .ok_or_else(|| "workspace preview response is missing data".to_string())?, size_bytes: u64::try_from(response.size_bytes.unwrap_or_default()).unwrap_or(u64::MAX), mtime_ms: response.mtime_ms, content_hash: response.content_hash, diff --git a/crates/agent-gui/src/components/Markdown.tsx b/crates/agent-gui/src/components/Markdown.tsx index 2e9edc89..5fc5abe6 100644 --- a/crates/agent-gui/src/components/Markdown.tsx +++ b/crates/agent-gui/src/components/Markdown.tsx @@ -22,12 +22,14 @@ type MarkdownProps = { content: string; className?: string; isAnimating?: boolean; + readOnly?: boolean; }; const streamdownPlugins = { code, math, mermaid, cjk }; const remarkPlugins = [...Object.values(defaultRemarkPlugins), remarkBreaks]; type MarkdownImageFallbackProps = ComponentProps<"img"> & ExtraProps; +type MarkdownAnchorFallbackProps = ComponentProps<"a"> & ExtraProps; function MarkdownImageFallback(props: MarkdownImageFallbackProps) { const { alt, title } = props; @@ -53,6 +55,29 @@ export const markdownComponents: Components = { img: MarkdownImageFallback, }; +function MarkdownReadOnlyLink(props: MarkdownAnchorFallbackProps) { + const { children, href, title } = props; + const label = + typeof title === "string" && title.trim() + ? title.trim() + : typeof href === "string" && href.trim() + ? href.trim() + : undefined; + return ( + + {children} + + ); +} + +export const markdownReadOnlyComponents: Components = { + ...markdownComponents, + a: MarkdownReadOnlyLink, +}; + const codeBlockSelector = '[data-streamdown="code-block"]'; const codeCopyButtonSelector = '[data-streamdown="code-block"] [data-streamdown="code-block-copy-button"]'; @@ -257,8 +282,8 @@ export function ExternalLinkModal({ isOpen, onClose, onConfirm, url }: LinkSafet } export const Markdown = memo(function Markdown(props: MarkdownProps) { - const { content, className, isAnimating = false } = props; - const codeCopyRootRef = useEnabledCodeCopyButtons(isAnimating); + const { content, className, isAnimating = false, readOnly = false } = props; + const codeCopyRootRef = useEnabledCodeCopyButtons(!readOnly && isAnimating); return (
@@ -270,7 +295,7 @@ export const Markdown = memo(function Markdown(props: MarkdownProps) {
)}
plugins={streamdownPlugins}
remarkPlugins={remarkPlugins}
- components={markdownComponents}
+ components={readOnly ? markdownReadOnlyComponents : markdownComponents}
mode={isAnimating ? "streaming" : "static"}
dir="auto"
parseIncompleteMarkdown
@@ -279,14 +304,14 @@ export const Markdown = memo(function Markdown(props: MarkdownProps) {
caret={isAnimating ? "block" : undefined}
animated={false}
linkSafety={{
- enabled: true,
+ enabled: !readOnly,
renderModal: (modalProps) => = {
kts: FileTypeKotlin,
dart: FileTypeDart,
log: FileTypeLog,
+ csv: FileTypeExcel,
+ tsv: FileTypeExcel,
xls: FileTypeExcel,
xlsx: FileTypeExcel,
doc: FileTypeWord,
@@ -267,6 +269,8 @@ const EXT_ICON_SVG = {
kts: FileTypeKotlinSvg,
dart: FileTypeDartSvg,
log: FileTypeLogSvg,
+ csv: FileTypeExcelSvg,
+ tsv: FileTypeExcelSvg,
xls: FileTypeExcelSvg,
xlsx: FileTypeExcelSvg,
doc: FileTypeWordSvg,
diff --git a/crates/agent-gui/src/components/project-tools/ProjectFileTreePanel.tsx b/crates/agent-gui/src/components/project-tools/ProjectFileTreePanel.tsx
index f408e34f..11f6852f 100644
--- a/crates/agent-gui/src/components/project-tools/ProjectFileTreePanel.tsx
+++ b/crates/agent-gui/src/components/project-tools/ProjectFileTreePanel.tsx
@@ -9,10 +9,11 @@ import {
ChevronRight,
Copy,
Edit3,
+ ExternalLink,
+ Eye,
FilePenLine,
Folder,
FolderOpen,
- ImageIcon,
Loader2,
Plus,
RefreshCw,
@@ -23,7 +24,10 @@ import {
import { Button } from "../ui/button";
import { useConfirmDialog } from "../ui/confirm-dialog";
import { Input } from "../ui/input";
-import { isWorkspaceImagePath } from "../workspace-editor/workspaceImagePreview";
+import {
+ isWorkspaceEditablePreviewPath,
+ isWorkspacePreviewPath,
+} from "../workspace-editor/workspaceImagePreview";
type FileTreeKind = "file" | "dir";
@@ -66,6 +70,7 @@ type ContextMenuState = {
const ROOT_PATH = "";
const DEFAULT_MAX_RESULTS = 1000;
const SEARCH_MAX_RESULTS = 80;
+const FILE_TREE_AUTO_REFRESH_MS = 3000;
function basename(path: string) {
const normalized = path.replace(/\\/g, "/").replace(/\/+$/, "");
@@ -184,11 +189,21 @@ export function ProjectFileTreePanel(props: {
const selectedNode = state.nodes[state.selectedPath] ?? state.nodes[ROOT_PATH];
const selectedPath = selectedNode?.path ?? ROOT_PATH;
const canMutate = initialized && Boolean(projectPathKey && cwd);
+ const stateRef = useRef(state);
+ const queryRef = useRef(query);
useEffect(() => {
onSyncStateChangeRef.current = onSyncStateChange;
}, [onSyncStateChange]);
+ useEffect(() => {
+ stateRef.current = state;
+ }, [state]);
+
+ useEffect(() => {
+ queryRef.current = query;
+ }, [query]);
+
const setProjectState = useCallback(
(updater: (state: FileTreeState) => FileTreeState) => {
if (!projectPathKey) return;
@@ -208,7 +223,7 @@ export function ProjectFileTreePanel(props: {
}, []);
const loadChildren = useCallback(
- async (path: string, options?: { force?: boolean }) => {
+ async (path: string, options?: { force?: boolean; silent?: boolean }) => {
if (!projectPathKey || !cwd.trim()) return;
let shouldLoad = true;
setProjectState((current) => {
@@ -217,6 +232,10 @@ export function ProjectFileTreePanel(props: {
shouldLoad = false;
return current;
}
+ if (node.loading && options?.silent) {
+ shouldLoad = false;
+ return current;
+ }
if ((node.loaded || node.loading) && !options?.force) {
shouldLoad = false;
return current;
@@ -226,7 +245,11 @@ export function ProjectFileTreePanel(props: {
initialized: true,
nodes: {
...current.nodes,
- [path]: { ...node, loading: true, error: undefined },
+ [path]: {
+ ...node,
+ loading: options?.silent ? node.loading : true,
+ error: options?.silent ? node.error : undefined,
+ },
},
};
});
@@ -281,7 +304,9 @@ export function ProjectFileTreePanel(props: {
[path]: {
...node,
loading: false,
- error: toErrorMessage(error, t("projectTools.fileTree.readFailed")),
+ error: options?.silent
+ ? node.error
+ : toErrorMessage(error, t("projectTools.fileTree.readFailed")),
},
},
};
@@ -345,6 +370,26 @@ export function ProjectFileTreePanel(props: {
void loadChildren(ROOT_PATH);
}, [initialized, loadChildren, projectPathKey]);
+ useEffect(() => {
+ if (!initialized || !projectPathKey || !cwd.trim()) return;
+ const interval = window.setInterval(() => {
+ const snapshot = stateRef.current;
+ const pathsToReload = Array.from(new Set([ROOT_PATH, ...snapshot.expanded])).filter(
+ (path) => {
+ const node = snapshot.nodes[path];
+ return node?.kind === "dir" && node.loaded;
+ },
+ );
+ for (const path of pathsToReload) {
+ void loadChildren(path, { force: true, silent: true });
+ }
+ if (queryRef.current.trim()) {
+ setSearchRefreshKey((current) => current + 1);
+ }
+ }, FILE_TREE_AUTO_REFRESH_MS);
+ return () => window.clearInterval(interval);
+ }, [cwd, initialized, loadChildren, projectPathKey]);
+
useEffect(() => {
void projectPathKey;
setContextMenu(null);
@@ -468,7 +513,7 @@ export function ProjectFileTreePanel(props: {
syncFileTreeState({ selectedPath: targetPath, bumpStateVersion: true });
const rect = panelRef.current?.getBoundingClientRect();
const menuWidth = 220;
- const menuHeight = targetKind === "file" ? 292 : 260;
+ const menuHeight = targetKind === "file" ? 360 : 294;
const panelLeft = rect?.left ?? 0;
const panelTop = rect?.top ?? 0;
const panelWidth = rect?.width ?? window.innerWidth;
@@ -675,6 +720,42 @@ export function ProjectFileTreePanel(props: {
[selectedPath],
);
+ const openContainingDirectory = useCallback(
+ async (targetPath = selectedPath) => {
+ if (!targetPath) return;
+ setActionError(null);
+ try {
+ await invoke("fs_open_workspace_path", {
+ workdir: cwd,
+ path: targetPath,
+ mode: "reveal",
+ });
+ } catch (error) {
+ setActionError(
+ toErrorMessage(error, t("projectTools.fileTree.openContainingDirectoryFailed")),
+ );
+ }
+ },
+ [cwd, selectedPath, t],
+ );
+
+ const openExternalFile = useCallback(
+ async (targetPath = selectedPath) => {
+ if (!targetPath) return;
+ setActionError(null);
+ try {
+ await invoke("fs_open_workspace_path", {
+ workdir: cwd,
+ path: targetPath,
+ mode: "open",
+ });
+ } catch (error) {
+ setActionError(toErrorMessage(error, t("projectTools.fileTree.openExternalFailed")));
+ }
+ },
+ [cwd, selectedPath, t],
+ );
+
const insertMention = useCallback(
(targetPath = selectedPath) => {
const targetNode = state.nodes[targetPath];
@@ -964,17 +1045,32 @@ export function ProjectFileTreePanel(props: {
setContextMenu(null);
}}
>
- {isWorkspaceImagePath(contextPath) ? (
-
}
>
-