Add manual refresh buttons to file preview (#2680)

## Summary
Adds refresh icon buttons to all file preview types, allowing users to
reload file content from disk without closing and reopening the preview.

## Problem
When files are modified externally (by another editor, git operations,
build tools), the Wave Terminal file preview doesn't automatically
update. Users had to close and reopen the preview to see changes.

## Solution
- Added refresh button (rotating arrows icon) to preview header
- Appears for: code files, markdown, PDFs, images, videos, audio
- Clicking refresh reloads the file from disk
- Uses existing refreshCallback pattern (already used by directory
preview)

## Implementation
- Modified preview-model.tsx to add refresh button to endIconButtons
- Made fullFileAtom reactive to refreshVersion changes
- Implemented refreshCallback in all preview components:
  - preview-edit.tsx (code editor)
  - preview-markdown.tsx (markdown files)
  - preview-streaming.tsx (PDFs, images, videos, audio)

## Test Plan
- [x] Open code file in preview
- [x] Modify file externally
- [x] Click refresh button -> sees updated content
- [x] Test with markdown, PDF, image files
- [x] Verify button appears in header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: stevenvo

frontend/app/view/preview/preview-edit.tsx

@@ -63,9 +63,13 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
 
     useEffect(() => {
         model.codeEditKeyDownHandler = codeEditKeyDownHandler;
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
         return () => {
             model.codeEditKeyDownHandler = null;
             model.monacoRef.current = null;
+            model.refreshCallback = null;
         };
     }, []);
 

frontend/app/view/preview/preview-markdown.tsx

@@ -2,12 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Markdown } from "@/element/markdown";
-import { getOverrideConfigAtom } from "@/store/global";
+import { getOverrideConfigAtom, globalStore } from "@/store/global";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import type { SpecializedViewProps } from "./preview";
 
 function MarkdownPreview({ model }: SpecializedViewProps) {
+    useEffect(() => {
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
+        return () => {
+            model.refreshCallback = null;
+        };
+    }, []);
     const connName = useAtomValue(model.connection);
     const fileInfo = useAtomValue(model.statFile);
     const fontSizeOverride = useAtomValue(getOverrideConfigAtom(model.blockId, "markdown:fontsize"));

frontend/app/view/preview/preview-model.tsx

@@ -350,6 +350,22 @@ export class PreviewModel implements ViewModel {
                         title: "Table of Contents",
                         click: () => this.markdownShowTocToggle(),
                     },
+                    {
+                        elemtype: "iconbutton",
+                        icon: "arrows-rotate",
+                        title: "Refresh",
+                        click: () => this.refreshCallback?.(),
+                    },
+                ] as IconButtonDecl[];
+            } else if (!isCeView && mimeType) {
+                // For all other file types (text, code, etc.), add refresh button
+                return [
+                    {
+                        elemtype: "iconbutton",
+                        icon: "arrows-rotate",
+                        title: "Refresh",
+                        click: () => this.refreshCallback?.(),
+                    },
                 ] as IconButtonDecl[];
             }
             return null;
@@ -408,6 +424,7 @@ export class PreviewModel implements ViewModel {
         this.goParentDirectory = this.goParentDirectory.bind(this);
 
         const fullFileAtom = atom<Promise<FileData>>(async (get) => {
+            get(this.refreshVersion); // Subscribe to refreshVersion to trigger re-fetch
             const fileName = get(this.metaFilePath);
             const path = await this.formatRemoteUri(fileName, get);
             if (fileName == null) {

frontend/app/view/preview/preview-streaming.tsx

@@ -3,9 +3,11 @@
 
 import { Button } from "@/app/element/button";
 import { CenteredDiv } from "@/app/element/quickelems";
+import { globalStore } from "@/store/global";
 import { getWebServerEndpoint } from "@/util/endpoints";
 import { formatRemoteUri } from "@/util/waveutil";
 import { useAtomValue } from "jotai";
+import { useEffect } from "react";
 import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
 import type { SpecializedViewProps } from "./preview";
 
@@ -45,6 +47,14 @@ function StreamingImagePreview({ url }: { url: string }) {
 }
 
 function StreamingPreview({ model }: SpecializedViewProps) {
+    useEffect(() => {
+        model.refreshCallback = () => {
+            globalStore.set(model.refreshVersion, (v) => v + 1);
+        };
+        return () => {
+            model.refreshCallback = null;
+        };
+    }, []);
     const conn = useAtomValue(model.connection);
     const fileInfo = useAtomValue(model.statFile);
     const filePath = fileInfo.path;