diff --git a/webui/src/locales/en-US/workspace.json b/webui/src/locales/en-US/workspace.json
index 599d18161..8fb2754b2 100644
--- a/webui/src/locales/en-US/workspace.json
+++ b/webui/src/locales/en-US/workspace.json
@@ -26,7 +26,14 @@
     "close": "Close",
     "uploading": "Uploading...",
     "binaryPreview": "Binary files cannot be previewed",
+    "unsupportedPreview": "This file type cannot be previewed. Please download to view.",
     "downloadFile": "Download File",
+    "readFailed": "Failed to load file content",
+    "retry": "Retry",
+    "previewTabs": {
+      "review": "Review",
+      "raw": "Raw"
+    },
     "toast": {
       "loadDirFailed": "Failed to load directory",
       "readFileFailed": "Failed to read file",
diff --git a/webui/src/locales/zh-CN/workspace.json b/webui/src/locales/zh-CN/workspace.json
index 8066f22d7..9c3ca3cee 100644
--- a/webui/src/locales/zh-CN/workspace.json
+++ b/webui/src/locales/zh-CN/workspace.json
@@ -26,7 +26,14 @@
     "close": "关闭",
     "uploading": "上传中...",
     "binaryPreview": "二进制文件无法预览",
+    "unsupportedPreview": "当前文件类型暂不支持预览，请下载查看",
     "downloadFile": "下载文件",
+    "readFailed": "文件内容加载失败",
+    "retry": "重试",
+    "previewTabs": {
+      "review": "预览",
+      "raw": "源码"
+    },
     "toast": {
       "loadDirFailed": "加载目录失败",
       "readFileFailed": "读取文件失败",
diff --git a/webui/src/pages/Workspace/filePreview.test.ts b/webui/src/pages/Workspace/filePreview.test.ts
new file mode 100644
index 000000000..b4831313c
--- /dev/null
+++ b/webui/src/pages/Workspace/filePreview.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import {
+  formatReviewContent, isJsonNode, isMarkdownNode, isRichPreviewNode, isTextPreviewNode,
+} from './filePreview';
+import type { WorkspaceNode } from '@/api/workspace';
+
+function fileNode(name: string): WorkspaceNode {
+  return { name, path: name, type: 'file', is_text_file: true };
+}
+
+describe('isMarkdownNode', () => {
+  it('returns true for .md and .markdown', () => {
+    expect(isMarkdownNode(fileNode('report.md'))).toBe(true);
+    expect(isMarkdownNode(fileNode('notes.MD'))).toBe(true);
+    expect(isMarkdownNode(fileNode('readme.markdown'))).toBe(true);
+  });
+
+  it('returns false for other file types and directories', () => {
+    expect(isMarkdownNode(fileNode('data.json'))).toBe(false);
+    expect(isMarkdownNode(fileNode('doc.pdf'))).toBe(false);
+    expect(isMarkdownNode(fileNode('sheet.xlsx'))).toBe(false);
+    expect(isMarkdownNode({ name: 'outputs', path: 'outputs', type: 'directory' })).toBe(false);
+  });
+});
+
+describe('json and rich preview helpers', () => {
+  it('recognizes json files as rich previewable', () => {
+    const json = fileNode('result.json');
+    expect(isJsonNode(json)).toBe(true);
+    expect(isRichPreviewNode(json)).toBe(true);
+    expect(isRichPreviewNode(fileNode('report.md'))).toBe(true);
+    expect(isRichPreviewNode(fileNode('doc.pdf'))).toBe(false);
+  });
+
+  it('returns content unchanged for review rendering', () => {
+    const node = fileNode('result.json');
+    const content = '{\n  "a": 1\n}';
+    expect(formatReviewContent(node, content)).toBe(content);
+  });
+});
+
+describe('isTextPreviewNode', () => {
+  it('uses backend text-file metadata to decide whether content can be read', () => {
+    expect(isTextPreviewNode(fileNode('script.py'))).toBe(true);
+    expect(isTextPreviewNode({ ...fileNode('image.png'), is_text_file: false })).toBe(false);
+    expect(isTextPreviewNode({ name: 'outputs', path: 'outputs', type: 'directory' })).toBe(false);
+  });
+});
diff --git a/webui/src/pages/Workspace/filePreview.ts b/webui/src/pages/Workspace/filePreview.ts
new file mode 100644
index 000000000..cad50ca63
--- /dev/null
+++ b/webui/src/pages/Workspace/filePreview.ts
@@ -0,0 +1,30 @@
+import type { WorkspaceNode } from '@/api/workspace';
+
+/** True when the node is a Markdown file eligible for rendered preview. */
+export function isMarkdownNode(node: WorkspaceNode): boolean {
+  if (node.type !== 'file') return false;
+  const ext = node.name.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'md' || ext === 'markdown';
+}
+
+/** True when the node is a JSON file eligible for code-block preview. */
+export function isJsonNode(node: WorkspaceNode): boolean {
+  if (node.type !== 'file') return false;
+  const ext = node.name.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'json';
+}
+
+/** Rich preview currently supports Markdown and JSON. */
+export function isRichPreviewNode(node: WorkspaceNode): boolean {
+  return isMarkdownNode(node) || isJsonNode(node);
+}
+
+/** True when the node can be read and edited as text. */
+export function isTextPreviewNode(node: WorkspaceNode): boolean {
+  return node.type === 'file' && Boolean(node.is_text_file);
+}
+
+/** Build content for Review tab rendering. */
+export function formatReviewContent(node: WorkspaceNode, content: string): string {
+  return content;
+}
diff --git a/webui/src/pages/Workspace/index.test.tsx b/webui/src/pages/Workspace/index.test.tsx
new file mode 100644
index 000000000..0e6fd0470
--- /dev/null
+++ b/webui/src/pages/Workspace/index.test.tsx
@@ -0,0 +1,237 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import WorkspacePage from './index';
+
+const { listMock, readFileMock, tMock, toastMock } = vi.hoisted(() => ({
+  listMock: vi.fn(),
+  readFileMock: vi.fn(),
+  tMock: vi.fn((key: string) => key),
+  toastMock: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: tMock }),
+}));
+
+vi.mock('@/components/common/Toast', () => ({
+  useToast: () => toastMock,
+}));
+
+vi.mock('@/components/common/ConfirmDialog', () => ({
+  useConfirm: () => vi.fn().mockResolvedValue(false),
+}));
+
+vi.mock('@/api/workspace', async () => {
+  const actual = await vi.importActual<typeof import('@/api/workspace')>('@/api/workspace');
+  return {
+    ...actual,
+    workspaceAPI: {
+      ...actual.workspaceAPI,
+      list: listMock,
+      readFile: readFileMock,
+      createDir: vi.fn(),
+      deleteFile: vi.fn(),
+      deleteDir: vi.fn(),
+      upload: vi.fn(),
+      writeFile: vi.fn(),
+    },
+  };
+});
+
+vi.mock('@/components/common/PageHeader', () => ({
+  default: ({ title }: { title: string }) => <h1>{title}</h1>,
+}));
+
+vi.mock('@/components/common/LoadingSpinner', () => ({
+  default: () => <div role="status">loading</div>,
+}));
+
+const mdNode = {
+  name: 'report.md',
+  path: 'outputs/report.md',
+  type: 'file' as const,
+  size: 1024,
+  modified_at: 1_700_000_000,
+  is_text_file: true,
+};
+
+const jsonNode = {
+  name: 'result.json',
+  path: 'outputs/result.json',
+  type: 'file' as const,
+  size: 512,
+  modified_at: 1_700_000_000,
+  is_text_file: true,
+};
+
+const textNode = {
+  name: 'notes.txt',
+  path: 'outputs/notes.txt',
+  type: 'file' as const,
+  size: 128,
+  modified_at: 1_700_000_000,
+  is_text_file: true,
+};
+
+const pdfNode = {
+  name: 'report.pdf',
+  path: 'outputs/report.pdf',
+  type: 'file' as const,
+  size: 2048,
+  modified_at: 1_700_000_000,
+  is_text_file: false,
+};
+
+describe('WorkspacePage files preview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    listMock.mockResolvedValue({ data: [mdNode, jsonNode, textNode, pdfNode] });
+    readFileMock.mockResolvedValue({ data: { path: mdNode.path, content: '# Hello Report\n\nBody text.' } });
+  });
+
+  function clickFileRow(filename: string) {
+    const cell = screen.getByText(filename, { selector: 'span' });
+    const row = cell.closest('tr');
+    if (!row) throw new Error(`row not found for ${filename}`);
+    return userEvent.setup().click(row);
+  }
+
+  it('opens markdown drawer with Review tab and renders heading by default', async () => {
+    render(<WorkspacePage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('report.md', { selector: 'span' })).toBeInTheDocument();
+    });
+
+    await clickFileRow('report.md');
+
+    await waitFor(() => {
+      expect(readFileMock).toHaveBeenCalledWith(mdNode.path);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('workspace-preview-drawer')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Hello Report' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'files.previewTabs.review' })).toHaveClass('border-slate-700');
+  });
+
+  it('switches to Raw tab and shows source markdown', async () => {
+    const user = userEvent.setup();
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('report.md', { selector: 'span' })).toBeInTheDocument());
+    await clickFileRow('report.md');
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Hello Report' })).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: 'files.previewTabs.raw' }));
+
+    expect(screen.getByText((content) => content.includes('# Hello Report'))).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Hello Report' })).not.toBeInTheDocument();
+  });
+
+  it('opens plain text files in the drawer as raw source', async () => {
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('notes.txt', { selector: 'span' })).toBeInTheDocument());
+    readFileMock.mockResolvedValueOnce({ data: { path: textNode.path, content: 'line 1\nline 2' } });
+
+    await clickFileRow('notes.txt');
+
+    await waitFor(() => {
+      expect(readFileMock).toHaveBeenCalledWith(textNode.path);
+    });
+    expect(screen.getByTestId('workspace-preview-drawer')).toBeInTheDocument();
+    expect(screen.getByText((content) => content.includes('line 1'))).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'files.previewTabs.review' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'files.previewTabs.raw' })).not.toBeInTheDocument();
+  });
+
+  it('does not read file content for non-text files', async () => {
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('report.pdf', { selector: 'span' })).toBeInTheDocument());
+    await clickFileRow('report.pdf');
+
+    await waitFor(() => {
+      expect(screen.getByTestId('workspace-download-panel')).toBeInTheDocument();
+    });
+
+    expect(readFileMock).not.toHaveBeenCalled();
+    expect(screen.queryByTestId('workspace-preview-drawer')).not.toBeInTheDocument();
+  });
+
+  it('opens drawer for json and renders json code block in review tab', async () => {
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('result.json', { selector: 'span' })).toBeInTheDocument());
+    readFileMock.mockResolvedValueOnce({ data: { path: jsonNode.path, content: '{\n  \"status\": \"ok\"\n}' } });
+
+    await clickFileRow('result.json');
+
+    await waitFor(() => {
+      expect(readFileMock).toHaveBeenCalledWith(jsonNode.path);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('workspace-preview-drawer')).toBeInTheDocument();
+    });
+
+    const codeEl = document.querySelector('pre code');
+    expect(codeEl).toBeTruthy();
+    expect(codeEl?.textContent).toContain('"status": "ok"');
+    expect(screen.queryByRole('button', { name: 'files.previewTabs.review' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'files.previewTabs.raw' })).not.toBeInTheDocument();
+    expect(screen.queryByTestId('workspace-download-panel')).not.toBeInTheDocument();
+  });
+
+  it('shows an error state when text file content fails to load', async () => {
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('notes.txt', { selector: 'span' })).toBeInTheDocument());
+    readFileMock.mockRejectedValueOnce(new Error('network down'));
+
+    await clickFileRow('notes.txt');
+
+    await waitFor(() => {
+      expect(screen.getByText('files.readFailed')).toBeInTheDocument();
+    });
+    expect(screen.getByText('network down')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'files.retry' })).toBeInTheDocument();
+  });
+
+  it('ignores stale file content responses after switching files', async () => {
+    let resolveMarkdown!: (value: { data: { path: string; content: string } }) => void;
+    let resolveText!: (value: { data: { path: string; content: string } }) => void;
+
+    readFileMock.mockImplementation((path: string) => new Promise<{ data: { path: string; content: string } }>((resolve) => {
+      if (path === mdNode.path) {
+        resolveMarkdown = resolve;
+        return;
+      }
+      resolveText = resolve;
+    }));
+
+    render(<WorkspacePage />);
+
+    await waitFor(() => expect(screen.getByText('report.md', { selector: 'span' })).toBeInTheDocument());
+    await clickFileRow('report.md');
+    await waitFor(() => expect(readFileMock).toHaveBeenCalledWith(mdNode.path));
+
+    await clickFileRow('notes.txt');
+    await waitFor(() => expect(readFileMock).toHaveBeenCalledWith(textNode.path));
+
+    resolveText({ data: { path: textNode.path, content: 'current file content' } });
+    await waitFor(() => expect(screen.getByText('current file content')).toBeInTheDocument());
+
+    resolveMarkdown({ data: { path: mdNode.path, content: '# stale markdown content' } });
+    await waitFor(() => expect(screen.getByText('current file content')).toBeInTheDocument());
+    expect(screen.queryByText((content) => content.includes('stale markdown content'))).not.toBeInTheDocument();
+  });
+});
diff --git a/webui/src/pages/Workspace/index.tsx b/webui/src/pages/Workspace/index.tsx
index 35af60cbd..374b29078 100644
--- a/webui/src/pages/Workspace/index.tsx
+++ b/webui/src/pages/Workspace/index.tsx
@@ -12,27 +12,34 @@ import { useConfirm } from '@/components/common/ConfirmDialog';
 import {
   workspaceAPI, WorkspaceNode, formatBytes, formatDate, fileIcon,
 } from '@/api/workspace';
+import { StreamingMarkdown } from '@/components/common/StreamingMarkdown';
+import {
+  formatReviewContent, isJsonNode, isMarkdownNode, isTextPreviewNode,
+} from './filePreview';
 
 // ─── Types ────────────────────────────────────────────────────────────────
 
 type Tab = 'files' | 'memory';
+type PreviewTab = 'review' | 'raw';
 
 // Preview/edit panel state consolidated into a single object
 interface PanelState {
   node: WorkspaceNode | null;
   content: string | null;
+  contentError: string | null;
   editContent: string | null;
   editing: boolean;
   saving: boolean;
 }
 
 const PANEL_INIT: PanelState = {
-  node: null, content: null, editContent: null, editing: false, saving: false,
+  node: null, content: null, contentError: null, editContent: null, editing: false, saving: false,
 };
 
 type PanelAction =
   | { type: 'select'; node: WorkspaceNode }
-  | { type: 'content_loaded'; content: string }
+  | { type: 'content_loaded'; path: string; content: string }
+  | { type: 'content_failed'; path: string; error: string }
   | { type: 'start_edit' }
   | { type: 'edit_change'; text: string }
   | { type: 'save_start' }
@@ -45,7 +52,11 @@ function panelReducer(state: PanelState, action: PanelAction): PanelState {
     case 'select':
       return { ...PANEL_INIT, node: action.node };
     case 'content_loaded':
-      return { ...state, content: action.content };
+      if (state.node?.path !== action.path) return state;
+      return { ...state, content: action.content, contentError: null };
+    case 'content_failed':
+      if (state.node?.path !== action.path) return state;
+      return { ...state, contentError: action.error };
     case 'start_edit':
       return { ...state, editing: true, editContent: state.content ?? '' };
     case 'edit_change':
@@ -89,6 +100,24 @@ export default function WorkspacePage() {
   );
 }
 
+function PreviewTabButton({ active, label, onClick }: {
+  active: boolean; label: string; onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-3 py-1.5 text-sm font-medium rounded-t-md border-b-2 -mb-px transition-colors ${
+        active
+          ? 'border-slate-700 text-slate-800'
+          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
 function TabButton({ active, onClick, icon, label }: {
   active: boolean; onClick: () => void; icon: React.ReactNode; label: string;
 }) {
@@ -119,6 +148,7 @@ function FilesTab() {
 
   // Preview/edit panel — consolidated into a reducer
   const [panel, dispatchPanel] = useReducer(panelReducer, PANEL_INIT);
+  const [previewTab, setPreviewTab] = useState<PreviewTab>('review');
 
   // Upload / new-dir state
   const [uploading, setUploading] = useState(false);
@@ -127,15 +157,20 @@ function FilesTab() {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const closePanel = useCallback(() => {
+    dispatchPanel({ type: 'close' });
+    setPreviewTab('review');
+  }, []);
+
   const loadFileContent = useCallback(async (path: string) => {
     const res = await workspaceAPI.readFile(path);
-    dispatchPanel({ type: 'content_loaded', content: res.data.content });
+    dispatchPanel({ type: 'content_loaded', path, content: res.data.content });
   }, []);
 
   const loadDir = useCallback(async (path: string, options?: { preservePanel?: boolean }) => {
     setLoading(true);
     if (!options?.preservePanel) {
-      dispatchPanel({ type: 'close' });
+      closePanel();
     }
     try {
       const res = await workspaceAPI.list(path);
@@ -146,23 +181,39 @@ function FilesTab() {
     } finally {
       setLoading(false);
     }
-  }, [toast, t]);
+  }, [toast, t, closePanel]);
+
+  useEffect(() => {
+    void loadDir('');
+    // Mount-only: avoid re-fetching (and closing the preview panel) when callback identity changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const textPreviewDrawerOpen = Boolean(panel.node && isTextPreviewNode(panel.node));
 
   useEffect(() => {
-    loadDir('');
-  }, [loadDir]);
+    if (!textPreviewDrawerOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [textPreviewDrawerOpen]);
 
   const handleSelectNode = useCallback(async (node: WorkspaceNode) => {
     if (node.type === 'directory') {
       loadDir(node.path);
       return;
     }
+    setPreviewTab('review');
     dispatchPanel({ type: 'select', node });
-    if (node.is_text_file) {
+    if (isTextPreviewNode(node)) {
       try {
         await loadFileContent(node.path);
       } catch (e: any) {
-        toast.error(t('files.toast.readFileFailed'), e?.response?.data?.detail ?? e.message);
+        const message = e?.response?.data?.detail ?? e.message;
+        dispatchPanel({ type: 'content_failed', path: node.path, error: message });
+        toast.error(t('files.toast.readFileFailed'), message);
       }
     }
   }, [loadDir, loadFileContent, toast, t]);
@@ -170,28 +221,42 @@ function FilesTab() {
   const handleRefresh = useCallback(async () => {
     await loadDir(currentPath, { preservePanel: true });
 
-    if (panel.node?.is_text_file) {
+    if (panel.node && isTextPreviewNode(panel.node)) {
       try {
         await loadFileContent(panel.node.path);
       } catch (e: any) {
-        toast.error(t('files.toast.readFileFailed'), e?.response?.data?.detail ?? e.message);
+        const message = e?.response?.data?.detail ?? e.message;
+        dispatchPanel({ type: 'content_failed', path: panel.node.path, error: message });
+        toast.error(t('files.toast.readFileFailed'), message);
       }
     }
   }, [currentPath, loadDir, loadFileContent, panel.node, toast, t]);
 
+  const handleRetryContent = useCallback(async () => {
+    if (!panel.node || !isTextPreviewNode(panel.node)) return;
+    try {
+      await loadFileContent(panel.node.path);
+    } catch (e: any) {
+      const message = e?.response?.data?.detail ?? e.message;
+      dispatchPanel({ type: 'content_failed', path: panel.node.path, error: message });
+      toast.error(t('files.toast.readFileFailed'), message);
+    }
+  }, [loadFileContent, panel.node, toast, t]);
+
   const handleSave = useCallback(async () => {
     if (!panel.node || panel.editContent === null) return;
     dispatchPanel({ type: 'save_start' });
     try {
       await workspaceAPI.writeFile(panel.node.path, panel.editContent);
       dispatchPanel({ type: 'save_done', content: panel.editContent });
+      setPreviewTab('review');
       toast.success(t('files.toast.saveSuccess'));
-      loadDir(currentPath);
+      loadDir(currentPath, { preservePanel: true });
     } catch (e: any) {
       dispatchPanel({ type: 'cancel_edit' });
       toast.error(t('files.toast.saveFailed'), e?.response?.data?.detail ?? e.message);
     }
-  }, [panel.node, panel.editContent, currentPath, loadDir, toast]);
+  }, [panel.node, panel.editContent, currentPath, loadDir, toast, t]);
 
   const handleDelete = useCallback(async (node: WorkspaceNode) => {
     const ok = await confirm({
@@ -208,12 +273,12 @@ function FilesTab() {
         await workspaceAPI.deleteDir(node.path);
       }
       toast.success(t('files.toast.deleteSuccess'));
-      if (panel.node?.path === node.path) dispatchPanel({ type: 'close' });
+      if (panel.node?.path === node.path) closePanel();
       loadDir(currentPath);
     } catch (e: any) {
       toast.error(t('files.toast.deleteFailed'), e?.response?.data?.detail ?? e.message);
     }
-  }, [confirm, panel.node, currentPath, loadDir, toast]);
+  }, [confirm, panel.node, currentPath, loadDir, toast, closePanel, t]);
 
   const handleUpload = useCallback(async (files: FileList | null) => {
     if (!files || files.length === 0) return;
@@ -400,32 +465,121 @@ function FilesTab() {
         )}
       </div>
 
-      {/* Right: preview / edit panel */}
-      {panel.node && (
-        <div className="w-96 flex-shrink-0 bg-white rounded-xl border border-gray-200 flex flex-col overflow-hidden">
+      {/* Text preview: 2/3 overlay drawer */}
+      {panel.node && isTextPreviewNode(panel.node) && (
+        <>
+          <div className="fixed inset-0 bg-black/40 z-40" onClick={closePanel} aria-hidden />
+          <div
+            className="fixed right-0 top-0 bottom-0 z-50 w-2/3 max-w-full flex flex-col bg-white shadow-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-label={panel.node.name}
+            data-testid="workspace-preview-drawer"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center gap-2 px-4 py-2.5 border-b border-gray-100 flex-shrink-0">
+              <span className="text-sm flex-shrink-0">{fileIcon(panel.node)}</span>
+              <span className="flex-1 text-sm font-medium text-gray-800 truncate">{panel.node.name}</span>
+              <div className="flex items-center gap-1 flex-shrink-0">
+                {!panel.editing && (
+                  <button onClick={() => dispatchPanel({ type: 'start_edit' })} title={t('files.edit')} className="p-1.5 text-gray-400 hover:text-slate-700 hover:bg-slate-100 rounded">
+                    <Edit3 className="w-4 h-4" />
+                  </button>
+                )}
+                {panel.editing && (
+                  <>
+                    <button onClick={handleSave} disabled={panel.saving} title={t('files.save')} className="p-1.5 text-green-600 hover:bg-green-50 rounded">
+                      <Save className="w-4 h-4" />
+                    </button>
+                    <button onClick={() => dispatchPanel({ type: 'cancel_edit' })} title={t('files.cancel')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                      <X className="w-4 h-4" />
+                    </button>
+                  </>
+                )}
+                <a href={workspaceAPI.downloadUrl(panel.node.path)} download={panel.node.name} title={t('files.download')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  <Download className="w-4 h-4" />
+                </a>
+                <button onClick={closePanel} title={t('files.close')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="px-4 py-1.5 bg-gray-50 border-b border-gray-100 flex gap-4 text-xs text-gray-400 flex-shrink-0">
+              <span>{formatBytes(panel.node.size ?? 0)}</span>
+              <span>{formatDate(panel.node.modified_at)}</span>
+            </div>
+
+            {!panel.editing && isMarkdownNode(panel.node) && (
+              <div className="flex gap-1 px-4 pt-2 border-b border-gray-100 flex-shrink-0">
+                <PreviewTabButton
+                  active={previewTab === 'review'}
+                  label={t('files.previewTabs.review')}
+                  onClick={() => setPreviewTab('review')}
+                />
+                <PreviewTabButton
+                  active={previewTab === 'raw'}
+                  label={t('files.previewTabs.raw')}
+                  onClick={() => setPreviewTab('raw')}
+                />
+              </div>
+            )}
+
+            <div className="flex-1 min-h-0 overflow-hidden">
+              {panel.editing ? (
+                <textarea
+                  value={panel.editContent ?? ''}
+                  onChange={(e) => dispatchPanel({ type: 'edit_change', text: e.target.value })}
+                  className="w-full h-full resize-none p-4 text-sm font-mono text-gray-800 border-none outline-none bg-white"
+                  spellCheck={false}
+                />
+              ) : panel.contentError ? (
+                <div className="flex flex-col items-center justify-center h-full gap-3 text-gray-400 p-6">
+                  <AlertTriangle className="w-10 h-10 text-orange-300" />
+                  <p className="text-sm text-center">{t('files.readFailed')}</p>
+                  <p className="text-xs text-center text-gray-400 max-w-md break-words">{panel.contentError}</p>
+                  <button
+                    type="button"
+                    onClick={handleRetryContent}
+                    className="px-3 py-1.5 text-sm text-sky-700 hover:underline"
+                  >
+                    {t('files.retry')}
+                  </button>
+                </div>
+              ) : panel.content == null ? (
+                <div className="flex items-center justify-center h-32"><LoadingSpinner /></div>
+              ) : isMarkdownNode(panel.node) && previewTab === 'review' ? (
+                <div className="h-full overflow-auto p-4">
+                  <StreamingMarkdown content={formatReviewContent(panel.node, panel.content)} isStreaming={false} />
+                </div>
+              ) : isJsonNode(panel.node) ? (
+                <pre className="w-full h-full overflow-auto p-4 text-sm font-mono text-gray-700 whitespace-pre-wrap break-words bg-white">
+                  <code>{panel.content}</code>
+                </pre>
+              ) : (
+                <pre className="w-full h-full overflow-auto p-4 text-sm font-mono text-gray-700 whitespace-pre-wrap break-words bg-white">
+                  {panel.content}
+                </pre>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Other files: compact download panel */}
+      {panel.node && panel.node.type === 'file' && !isTextPreviewNode(panel.node) && (
+        <div
+          className="w-96 flex-shrink-0 bg-white rounded-xl border border-gray-200 flex flex-col overflow-hidden"
+          data-testid="workspace-download-panel"
+        >
           <div className="flex items-center gap-2 px-4 py-2.5 border-b border-gray-100 flex-shrink-0">
             <span className="text-sm flex-shrink-0">{fileIcon(panel.node)}</span>
             <span className="flex-1 text-sm font-medium text-gray-800 truncate">{panel.node.name}</span>
             <div className="flex items-center gap-1 flex-shrink-0">
-              {panel.node.is_text_file && !panel.editing && (
-                <button onClick={() => dispatchPanel({ type: 'start_edit' })} title={t('files.edit')} className="p-1.5 text-gray-400 hover:text-slate-700 hover:bg-slate-100 rounded">
-                  <Edit3 className="w-4 h-4" />
-                </button>
-              )}
-              {panel.editing && (
-                <>
-                  <button onClick={handleSave} disabled={panel.saving} title={t('files.save')} className="p-1.5 text-green-600 hover:bg-green-50 rounded">
-                    <Save className="w-4 h-4" />
-                  </button>
-                  <button onClick={() => dispatchPanel({ type: 'cancel_edit' })} title={t('files.cancel')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
-                    <X className="w-4 h-4" />
-                  </button>
-                </>
-              )}
               <a href={workspaceAPI.downloadUrl(panel.node.path)} download={panel.node.name} title={t('files.download')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                 <Download className="w-4 h-4" />
               </a>
-              <button onClick={() => dispatchPanel({ type: 'close' })} title={t('files.close')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+              <button onClick={closePanel} title={t('files.close')} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                 <X className="w-4 h-4" />
               </button>
             </div>
@@ -436,34 +590,17 @@ function FilesTab() {
             <span>{formatDate(panel.node.modified_at)}</span>
           </div>
 
-          <div className="flex-1 min-h-0 overflow-hidden">
-            {panel.node.is_text_file ? (
-              panel.editing ? (
-                <textarea
-                  value={panel.editContent ?? ''}
-                  onChange={(e) => dispatchPanel({ type: 'edit_change', text: e.target.value })}
-                  className="w-full h-full resize-none p-4 text-sm font-mono text-gray-800 border-none outline-none bg-white"
-                  spellCheck={false}
-                />
-              ) : (
-                <pre className="w-full h-full overflow-auto p-4 text-sm font-mono text-gray-700 whitespace-pre-wrap break-words bg-white">
-                  {panel.content ?? <LoadingSpinner />}
-                </pre>
-              )
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full gap-3 text-gray-400 p-6">
-                <AlertTriangle className="w-10 h-10 text-orange-300" />
-                <p className="text-sm text-center">{t('files.binaryPreview')}</p>
-                <a
-                  href={workspaceAPI.downloadUrl(panel.node.path)}
-                  download={panel.node.name}
-                  className="flex items-center gap-2 px-4 py-2 bg-slate-700 text-white text-sm rounded-lg hover:bg-slate-800"
-                >
-                  <Download className="w-4 h-4" />
-                  {t('files.downloadFile')}
-                </a>
-              </div>
-            )}
+          <div className="flex flex-col items-center justify-center flex-1 gap-3 text-gray-400 p-6 min-h-[12rem]">
+            <AlertTriangle className="w-10 h-10 text-orange-300" />
+            <p className="text-sm text-center">{t('files.unsupportedPreview')}</p>
+            <a
+              href={workspaceAPI.downloadUrl(panel.node.path)}
+              download={panel.node.name}
+              className="flex items-center gap-2 px-4 py-2 bg-slate-700 text-white text-sm rounded-lg hover:bg-slate-800"
+            >
+              <Download className="w-4 h-4" />
+              {t('files.downloadFile')}
+            </a>
           </div>
         </div>
       )}