@seqyuan/annodex 0.1.10 → 0.1.12

package/components/FileViewer.tsx

@@ -0,0 +1,1273 @@
+"use client";
+
+import { useEffect, useState, useRef, useCallback } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useTheme } from "@/hooks/useTheme";
+import { encodeFilePathForApi, getFileName, getRelativeFilePath } from "@/lib/file-paths";
+import { PdfViewer } from "@/components/viewers/PdfViewer";
+import { DocxViewer } from "@/components/viewers/DocxViewer";
+import { XlsxViewer } from "@/components/viewers/XlsxViewer";
+import { PptxViewer } from "@/components/viewers/PptxViewer";
+import { CodeMirrorEditor } from "@/components/CodeMirrorEditor";
+import { MarkdownRenderer } from "@/components/MarkdownRenderer";
+import { DataTableViewer } from "@/components/DataTableViewer";
+import { resolveCodeTheme } from "@/lib/code-theme";
+
+interface Props {
+  filePath: string;
+  cwd?: string;
+  onOpenFile?: (filePath: string, fileName: string) => void;
+}
+
+interface FileData {
+  content: string;
+  language: string;
+  size: number;
+  mtime?: string;
+}
+
+const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp", "ico", "avif"]);
+const AUDIO_EXTS = new Set(["mp3", "wav", "ogg", "oga", "opus", "m4a", "aac", "flac", "weba", "webm"]);
+const DOC_EXTS = new Set(["pdf", "docx", "xlsx", "pptx", "doc", "xls", "ppt"]);
+
+function isDocPath(filePath: string): boolean {
+  const base = getFileName(filePath);
+  const ext = base.toLowerCase().split(".").pop() ?? "";
+  return DOC_EXTS.has(ext);
+}
+
+function isImagePath(filePath: string): boolean {
+  const base = getFileName(filePath);
+  const ext = base.toLowerCase().split(".").pop() ?? "";
+  return IMAGE_EXTS.has(ext);
+}
+
+function isAudioPath(filePath: string): boolean {
+  const base = getFileName(filePath);
+  const ext = base.toLowerCase().split(".").pop() ?? "";
+  return AUDIO_EXTS.has(ext);
+}
+
+function getTableDelimiter(filePath: string): "," | "\t" | null {
+  const base = getFileName(filePath);
+  const ext = base.toLowerCase().split(".").pop() ?? "";
+  if (ext === "csv") return ",";
+  if (ext === "tsv") return "\t";
+  return null;
+}
+
+type DiffLine =
+  | { type: "unchanged"; text: string; lineNo: number }
+  | { type: "removed"; text: string; lineNo: number }
+  | { type: "added"; text: string; lineNo: number };
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// Myers diff — returns line-level unified diff
+function diffLines(oldLines: string[], newLines: string[]): DiffLine[] {
+  const m = oldLines.length;
+  const n = newLines.length;
+  const max = m + n;
+  const v: number[] = new Array(2 * max + 1).fill(0);
+  const trace: number[][] = [];
+
+  for (let d = 0; d <= max; d++) {
+    trace.push([...v]);
+    for (let k = -d; k <= d; k += 2) {
+      let x: number;
+      if (k === -d || (k !== d && v[k - 1 + max] < v[k + 1 + max])) {
+        x = v[k + 1 + max];
+      } else {
+        x = v[k - 1 + max] + 1;
+      }
+      let y = x - k;
+      while (x < m && y < n && oldLines[x] === newLines[y]) {
+        x++;
+        y++;
+      }
+      v[k + max] = x;
+      if (x >= m && y >= n) {
+        // backtrack
+        const result: DiffLine[] = [];
+        let cx = m, cy = n;
+        for (let dd = d; dd > 0; dd--) {
+          const pv = trace[dd - 1];
+          const pk = cx - cy;
+          let prevK: number;
+          if (pk === -dd || (pk !== dd && pv[pk - 1 + max] < pv[pk + 1 + max])) {
+            prevK = pk + 1;
+          } else {
+            prevK = pk - 1;
+          }
+          const prevX = pv[prevK + max];
+          const prevY = prevX - prevK;
+          while (cx > prevX && cy > prevY) {
+            cx--;
+            cy--;
+            result.unshift({ type: "unchanged", text: oldLines[cx], lineNo: cx + 1 });
+          }
+          if (dd > 0) {
+            if (cx > prevX) {
+              cx--;
+              result.unshift({ type: "removed", text: oldLines[cx], lineNo: cx + 1 });
+            } else {
+              cy--;
+              result.unshift({ type: "added", text: newLines[cy], lineNo: cy + 1 });
+            }
+          }
+        }
+        while (cx > 0 && cy > 0) {
+          cx--;
+          cy--;
+          result.unshift({ type: "unchanged", text: oldLines[cx], lineNo: cx + 1 });
+        }
+        return result;
+      }
+    }
+  }
+  // Fallback: treat all as replaced
+  return [
+    ...oldLines.map((t, i) => ({ type: "removed" as const, text: t, lineNo: i + 1 })),
+    ...newLines.map((t, i) => ({ type: "added" as const, text: t, lineNo: i + 1 })),
+  ];
+}
+
+function DiffView({ oldContent, newContent }: { oldContent: string; newContent: string; language: string }) {
+  const oldLines = oldContent.split("\n");
+  const newLines = newContent.split("\n");
+  const diff = diffLines(oldLines, newLines);
+
+  const hasChanges = diff.some((l) => l.type !== "unchanged");
+  if (!hasChanges) {
+    return (
+      <div style={{ padding: "12px 16px", fontSize: 12, color: "var(--text-dim)", fontFamily: "var(--font-mono)" }}>
+        No changes
+      </div>
+    );
+  }
+
+  // Render with context: show 3 lines around each change, collapse the rest
+  const CONTEXT = 3;
+  const changed = new Set(diff.flatMap((l, i) => (l.type !== "unchanged" ? [i] : [])));
+  const visible = new Set<number>();
+  for (const ci of changed) {
+    for (let j = Math.max(0, ci - CONTEXT); j <= Math.min(diff.length - 1, ci + CONTEXT); j++) {
+      visible.add(j);
+    }
+  }
+
+  const segments: Array<{ hidden: true; count: number } | { hidden: false; lines: DiffLine[] }> = [];
+  let i = 0;
+  while (i < diff.length) {
+    if (visible.has(i)) {
+      const block: DiffLine[] = [];
+      while (i < diff.length && visible.has(i)) {
+        block.push(diff[i]);
+        i++;
+      }
+      segments.push({ hidden: false, lines: block });
+    } else {
+      let count = 0;
+      while (i < diff.length && !visible.has(i)) {
+        count++;
+        i++;
+      }
+      segments.push({ hidden: true, count });
+    }
+  }
+
+  // Track running line number for added/unchanged lines
+  const newLineNos: number[] = [];
+  let nlo = 1;
+  for (const line of diff) {
+    if (line.type === "removed") {
+      newLineNos.push(0);
+    } else {
+      newLineNos.push(nlo++);
+    }
+  }
+
+  let diffIdx = 0;
+
+  return (
+    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.6 }}>
+      {segments.map((seg, si) => {
+        if (seg.hidden) {
+          const result = (
+            <div
+              key={si}
+              style={{
+                padding: "2px 16px",
+                color: "var(--text-dim)",
+                background: "var(--bg-panel)",
+                fontSize: 11,
+                borderTop: "1px solid var(--border)",
+                borderBottom: "1px solid var(--border)",
+              }}
+            >
+              ... {seg.count} unchanged lines ...
+            </div>
+          );
+          diffIdx += seg.count;
+          return result;
+        }
+        const lines = seg.lines.map((line, li) => {
+          const idx = diffIdx + li;
+          const newLno = newLineNos[idx];
+          const bg =
+            line.type === "added"
+              ? "rgba(0,200,80,0.12)"
+              : line.type === "removed"
+              ? "rgba(240,60,60,0.14)"
+              : "transparent";
+          const prefix =
+            line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";
+          const prefixColor =
+            line.type === "added" ? "#4ade80" : line.type === "removed" ? "#f87171" : "var(--text-dim)";
+
+          return (
+            <div
+              key={li}
+              style={{
+                display: "flex",
+                background: bg,
+                borderLeft: line.type === "added"
+                  ? "3px solid #4ade80"
+                  : line.type === "removed"
+                  ? "3px solid #f87171"
+                  : "3px solid transparent",
+              }}
+            >
+              <span
+                style={{
+                  minWidth: 44,
+                  padding: "0 8px 0 16px",
+                  textAlign: "right",
+                  color: "var(--text-dim)",
+                  userSelect: "none",
+                  fontSize: 11,
+                  lineHeight: 1.6,
+                  borderRight: "1px solid var(--border)",
+                  background: "var(--bg-panel)",
+                  flexShrink: 0,
+                }}
+              >
+                {line.type === "removed" ? line.lineNo : newLno || ""}
+              </span>
+              <span
+                style={{
+                  minWidth: 16,
+                  padding: "0 6px",
+                  color: prefixColor,
+                  userSelect: "none",
+                  flexShrink: 0,
+                  fontWeight: 600,
+                }}
+              >
+                {prefix}
+              </span>
+              <span
+                style={{
+                  flex: 1,
+                  padding: "0 8px 0 0",
+                  whiteSpace: "pre",
+                  color: "var(--text)",
+                  overflowX: "auto",
+                }}
+              >
+                {line.text || "\u00a0"}
+              </span>
+            </div>
+          );
+        });
+        diffIdx += seg.lines.length;
+        return <div key={si}>{lines}</div>;
+      })}
+    </div>
+  );
+}
+
+function ImageViewer({ filePath, cwd }: { filePath: string; cwd?: string }) {
+  const [watching, setWatching] = useState(false);
+  const [bust, setBust] = useState(0);
+  const [size, setSize] = useState<number | null>(null);
+  const [naturalSize, setNaturalSize] = useState<{ w: number; h: number } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [zoom, setZoom] = useState(100);
+  const esRef = useRef<EventSource | null>(null);
+
+  const ext = getFileName(filePath).toLowerCase().split(".").pop() ?? "";
+
+  useEffect(() => {
+    setBust(0);
+    setSize(null);
+    setNaturalSize(null);
+    setError(null);
+    setWatching(false);
+    setZoom(100);
+
+    if (esRef.current) {
+      esRef.current.close();
+      esRef.current = null;
+    }
+
+    const encoded = encodeFilePathForApi(filePath);
+    const es = new EventSource(`/api/files/${encoded}?type=watch`);
+    esRef.current = es;
+
+    es.addEventListener("connected", () => setWatching(true));
+    es.addEventListener("change", (e) => {
+      try {
+        const d = JSON.parse((e as MessageEvent).data) as { size?: number };
+        if (typeof d.size === "number") setSize(d.size);
+      } catch { /* ignore */ }
+      setBust((b) => b + 1);
+    });
+    es.addEventListener("error", () => setWatching(false));
+    es.onerror = () => setWatching(false);
+
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [filePath]);
+
+  const encoded = encodeFilePathForApi(filePath);
+  const src = `/api/files/${encoded}?type=read${bust ? `&v=${bust}` : ""}`;
+
+  const formatSizeStr = size != null ? formatSize(size) : null;
+  const zoomOptions = [25, 50, 75, 100, 125, 150, 200, 300];
+  const setClampedZoom = (value: number) => setZoom(Math.max(10, Math.min(500, value)));
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "4px 16px",
+          borderBottom: "1px solid var(--border)",
+          fontSize: 11,
+          color: "var(--text-dim)",
+          background: "var(--bg)",
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-mono)" }}
+          title={filePath}
+        >
+          {getRelativeFilePath(filePath, cwd)}
+        </span>
+        <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+          <button
+            onClick={() => setClampedZoom(zoom - 25)}
+            title="Zoom out"
+            style={{
+              width: 24,
+              height: 22,
+              border: "1px solid var(--border)",
+              borderRadius: 5,
+              background: "var(--bg-panel)",
+              color: "var(--text-muted)",
+              cursor: "pointer",
+              fontSize: 13,
+              lineHeight: 1,
+            }}
+          >
+            -
+          </button>
+          <select
+            value={zoom}
+            onChange={(e) => setClampedZoom(Number(e.target.value))}
+            title="Image zoom"
+            style={{
+              height: 22,
+              border: "1px solid var(--border)",
+              borderRadius: 5,
+              background: "var(--bg-panel)",
+              color: "var(--text)",
+              fontSize: 11,
+              fontFamily: "var(--font-mono)",
+              outline: "none",
+              cursor: "pointer",
+            }}
+          >
+            {zoomOptions.map((value) => (
+              <option key={value} value={value}>{value}%</option>
+            ))}
+          </select>
+          <button
+            onClick={() => setClampedZoom(zoom + 25)}
+            title="Zoom in"
+            style={{
+              width: 24,
+              height: 22,
+              border: "1px solid var(--border)",
+              borderRadius: 5,
+              background: "var(--bg-panel)",
+              color: "var(--text-muted)",
+              cursor: "pointer",
+              fontSize: 13,
+              lineHeight: 1,
+            }}
+          >
+            +
+          </button>
+        </div>
+        <span style={{ flexShrink: 0 }}>{ext || "image"}</span>
+        {naturalSize && <span>{naturalSize.w} × {naturalSize.h}</span>}
+        {formatSizeStr && <span>{formatSizeStr}</span>}
+        <span
+          title={watching ? "Live sync active" : "Not watching"}
+          style={{ display: "flex", alignItems: "center", gap: 4, color: watching ? "#4ade80" : "var(--text-dim)" }}
+        >
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: watching ? "#4ade80" : "var(--border)",
+              display: "inline-block",
+              boxShadow: watching ? "0 0 4px #4ade80" : "none",
+            }}
+          />
+          {watching ? "live" : "static"}
+        </span>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          overflow: "auto",
+          background: "var(--bg-panel)",
+          WebkitOverflowScrolling: "touch",
+          overscrollBehavior: "contain",
+          backgroundImage:
+            "linear-gradient(45deg, var(--bg) 25%, transparent 25%), linear-gradient(-45deg, var(--bg) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg) 75%), linear-gradient(-45deg, transparent 75%, var(--bg) 75%)",
+          backgroundSize: "16px 16px",
+          backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
+        }}
+      >
+        {error ? (
+          <div style={{ minWidth: "100%", minHeight: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#f87171", fontSize: 13 }}>
+            {error}
+          </div>
+        ) : (
+          <div
+            style={{
+              minWidth: "100%",
+              minHeight: "100%",
+              width: "max-content",
+              height: "max-content",
+              boxSizing: "border-box",
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+              padding: 16,
+            }}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={src}
+              alt={filePath}
+              onLoad={(e) => {
+                const img = e.currentTarget;
+                setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+              }}
+              onError={() => setError("Failed to load image")}
+              style={{
+                width: naturalSize ? Math.max(1, Math.round(naturalSize.w * zoom / 100)) : "auto",
+                height: naturalSize ? Math.max(1, Math.round(naturalSize.h * zoom / 100)) : "auto",
+                maxWidth: "none",
+                maxHeight: "none",
+                objectFit: "contain",
+                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatDuration(seconds: number): string {
+  if (!Number.isFinite(seconds)) return "";
+  const totalSeconds = Math.round(seconds);
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return `${mins}:${String(secs).padStart(2, "0")}`;
+}
+
+function AudioViewer({ filePath, cwd }: { filePath: string; cwd?: string }) {
+  const [watching, setWatching] = useState(false);
+  const [bust, setBust] = useState(0);
+  const [size, setSize] = useState<number | null>(null);
+  const [duration, setDuration] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const esRef = useRef<EventSource | null>(null);
+
+  const ext = getFileName(filePath).toLowerCase().split(".").pop() ?? "";
+
+  useEffect(() => {
+    setBust(0);
+    setSize(null);
+    setDuration(null);
+    setError(null);
+    setWatching(false);
+
+    if (esRef.current) {
+      esRef.current.close();
+      esRef.current = null;
+    }
+
+    const encoded = encodeFilePathForApi(filePath);
+    const es = new EventSource(`/api/files/${encoded}?type=watch`);
+    esRef.current = es;
+
+    es.addEventListener("connected", () => setWatching(true));
+    es.addEventListener("change", (e) => {
+      try {
+        const d = JSON.parse((e as MessageEvent).data) as { size?: number };
+        if (typeof d.size === "number") setSize(d.size);
+      } catch { /* ignore */ }
+      setDuration(null);
+      setError(null);
+      setBust((b) => b + 1);
+    });
+    es.addEventListener("error", () => setWatching(false));
+    es.onerror = () => setWatching(false);
+
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [filePath]);
+
+  const encoded = encodeFilePathForApi(filePath);
+  const src = `/api/files/${encoded}?type=read${bust ? `&v=${bust}` : ""}`;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "4px 16px",
+          borderBottom: "1px solid var(--border)",
+          fontSize: 11,
+          color: "var(--text-dim)",
+          background: "var(--bg)",
+          flexShrink: 0,
+        }}
+      >
+        <span style={{ fontFamily: "var(--font-mono)" }} title={filePath}>
+          {getRelativeFilePath(filePath, cwd)}
+        </span>
+        <span style={{ marginLeft: "auto" }}>{ext || "audio"}</span>
+        {duration != null && <span>{formatDuration(duration)}</span>}
+        {size != null && <span>{formatSize(size)}</span>}
+        <span
+          title={watching ? "Live sync active" : "Not watching"}
+          style={{ display: "flex", alignItems: "center", gap: 4, color: watching ? "#4ade80" : "var(--text-dim)" }}
+        >
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: watching ? "#4ade80" : "var(--border)",
+              display: "inline-block",
+              boxShadow: watching ? "0 0 4px #4ade80" : "none",
+            }}
+          />
+          {watching ? "live" : "static"}
+        </span>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24,
+          background: "var(--bg-panel)",
+        }}
+      >
+        <div style={{ width: "min(680px, 100%)" }}>
+          {error && (
+            <div style={{ color: "#f87171", fontSize: 13, marginBottom: 12, textAlign: "center" }}>
+              {error}
+            </div>
+          )}
+          <audio
+            key={src}
+            controls
+            preload="metadata"
+            src={src}
+            onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
+            onError={() => setError("Failed to load audio")}
+            style={{ width: "100%" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FileViewer({ filePath, cwd, onOpenFile }: Props) {
+  if (isImagePath(filePath)) {
+    return <ImageViewer filePath={filePath} cwd={cwd} />;
+  }
+  if (isAudioPath(filePath)) {
+    return <AudioViewer filePath={filePath} cwd={cwd} />;
+  }
+  if (isDocPath(filePath)) {
+    return <DocumentFileViewer filePath={filePath} cwd={cwd} />;
+  }
+  return <TextFileViewer filePath={filePath} cwd={cwd} onOpenFile={onOpenFile} />;
+}
+
+function getDocType(filePath: string): "pdf" | "docx" | "xlsx" | "pptx" | "other" {
+  const ext = getFileName(filePath).toLowerCase().split(".").pop() ?? "";
+  if (ext === "pdf") return "pdf";
+  if (ext === "docx" || ext === "doc") return "docx";
+  if (ext === "xlsx" || ext === "xls") return "xlsx";
+  if (ext === "pptx" || ext === "ppt") return "pptx";
+  return "other";
+}
+
+function DocumentFileViewer({ filePath, cwd }: { filePath: string; cwd?: string }) {
+  const [arrayBuffer, setArrayBuffer] = useState<ArrayBuffer | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const esRef = useRef<EventSource | null>(null);
+  const bustRef = useRef(0);
+
+  const docType = getDocType(filePath);
+  const ext = getFileName(filePath).toLowerCase().split(".").pop() ?? "";
+
+  const loadDocument = useCallback(async (filePath: string) => {
+    try {
+      const encoded = encodeFilePathForApi(filePath);
+      const bust = bustRef.current ? `&v=${bustRef.current}` : "";
+      const resp = await fetch(`/api/files/${encoded}?type=read${bust}`);
+      if (!resp.ok) {
+        const body = await resp.json().catch(() => ({ error: String(resp.status) }));
+        setError((body as { error?: string }).error ?? `HTTP ${resp.status}`);
+        return;
+      }
+      const buf = await resp.arrayBuffer();
+      setArrayBuffer(buf);
+      setError(null);
+    } catch (err: unknown) {
+      setError(String(err));
+    }
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setArrayBuffer(null);
+    bustRef.current = 0;
+
+    if (esRef.current) {
+      esRef.current.close();
+      esRef.current = null;
+    }
+
+    loadDocument(filePath).finally(() => setLoading(false));
+
+    const encoded = encodeFilePathForApi(filePath);
+    const es = new EventSource(`/api/files/${encoded}?type=watch`);
+    esRef.current = es;
+
+    es.addEventListener("connected", () => {});
+    es.addEventListener("change", () => {
+      bustRef.current += 1;
+      loadDocument(filePath);
+    });
+    es.addEventListener("error", () => {});
+    es.onerror = () => {};
+
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [filePath, loadDocument]);
+
+  if (loading && !arrayBuffer) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 13 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  if (error && !arrayBuffer) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#f87171", fontSize: 13 }}>
+        {error}
+      </div>
+    );
+  }
+
+  if (!arrayBuffer) return null;
+
+  const fileName = getRelativeFilePath(filePath, cwd);
+
+  // Wrap with status bar
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      {docType === "pdf" && <PdfViewer arrayBuffer={arrayBuffer} fileName={fileName} />}
+      {docType === "docx" && <DocxViewer arrayBuffer={arrayBuffer} fileName={fileName} />}
+      {docType === "xlsx" && <XlsxViewer arrayBuffer={arrayBuffer} fileName={fileName} />}
+      {docType === "pptx" && <PptxViewer arrayBuffer={arrayBuffer} fileName={fileName} />}
+      {docType === "other" && (
+        <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 13 }}>
+          Unsupported document format: .{ext}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TextFileViewer({ filePath, cwd, onOpenFile }: Props) {
+  const { isDark } = useTheme();
+  const [data, setData] = useState<FileData | null>(null);
+  const [prevContent, setPrevContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [previewMode, setPreviewMode] = useState(false);
+  const [viewMode, setViewMode] = useState<"source" | "diff">("source");
+  const [wrapLines, setWrapLines] = useState(false);
+  const [watching, setWatching] = useState(false);
+  const [changeCount, setChangeCount] = useState(0);
+  const [editing, setEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [externalChangeWhileEditing, setExternalChangeWhileEditing] = useState(false);
+  const [saveConflict, setSaveConflict] = useState(false);
+  const [editBaseMtime, setEditBaseMtime] = useState<string | null>(null);
+  const esRef = useRef<EventSource | null>(null);
+  const editingRef = useRef(false);
+  editingRef.current = editing;
+  const dataRef = useRef<FileData | null>(null);
+  dataRef.current = data;
+
+  const fetchContent = useCallback((filePath: string, isRefresh = false) => {
+    const encoded = encodeFilePathForApi(filePath);
+    return fetch(`/api/files/${encoded}?type=read`)
+      .then((r) => r.json())
+      .then((d: FileData & { error?: string }) => {
+        if (d.error) {
+          setError(d.error);
+          return null;
+        }
+        if (isRefresh) {
+          setData((prev) => {
+            if (prev) setPrevContent(prev.content);
+            return d;
+          });
+          setChangeCount((c) => c + 1);
+        } else {
+          setData(d);
+        }
+        setError(null);
+        return d;
+      })
+      .catch((e) => {
+        setError(String(e));
+        return null;
+      });
+  }, []);
+
+  // Initial load + SSE watch setup
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setData(null);
+    setPrevContent(null);
+    setPreviewMode(false);
+    setViewMode("source");
+    setWrapLines(false);
+    setChangeCount(0);
+    setWatching(false);
+
+    if (esRef.current) {
+      esRef.current.close();
+      esRef.current = null;
+    }
+
+    fetchContent(filePath).then((d) => {
+      if (d?.language === "markdown" || getTableDelimiter(filePath)) setPreviewMode(true);
+    }).finally(() => setLoading(false));
+
+    // Set up SSE watch
+    const encoded = encodeFilePathForApi(filePath);
+    const es = new EventSource(`/api/files/${encoded}?type=watch`);
+    esRef.current = es;
+
+    es.addEventListener("connected", () => {
+      setWatching(true);
+    });
+
+    es.addEventListener("change", () => {
+      // During editing, don't auto-refresh — flag external change instead
+      if (editingRef.current) {
+        setExternalChangeWhileEditing(true);
+      } else {
+        fetchContent(filePath, true);
+      }
+    });
+
+    es.addEventListener("error", () => {
+      setWatching(false);
+    });
+
+    es.onerror = () => {
+      setWatching(false);
+    };
+
+    return () => {
+      es.close();
+      esRef.current = null;
+    };
+  }, [filePath, fetchContent]);
+
+  const handleStartEdit = useCallback(() => {
+    if (!data) return;
+    setEditing(true);
+    setEditedContent(data.content);
+    setEditBaseMtime(data.mtime ?? null);
+    setSaveConflict(false);
+    setSaveError(null);
+    setExternalChangeWhileEditing(false);
+    setPreviewMode(false);
+    setViewMode("source");
+  }, [data]);
+
+  const handleSave = useCallback(async (force = false) => {
+    const encoded = encodeFilePathForApi(filePath);
+    setSaving(true);
+    setSaveConflict(false);
+    setSaveError(null);
+    try {
+      const res = await fetch(`/api/files/${encoded}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          content: editedContent,
+          ...(force || !editBaseMtime ? {} : { baseMtime: editBaseMtime }),
+        }),
+      });
+      if (res.status === 409) {
+        const body = await res.json().catch(() => ({ error: "File changed on disk since it was opened" }));
+        setSaveConflict(true);
+        setExternalChangeWhileEditing(true);
+        throw new Error((body as { error?: string }).error ?? "File changed on disk since it was opened");
+      }
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: String(res.status) }));
+        throw new Error((body as { error?: string }).error ?? `HTTP ${res.status}`);
+      }
+      // Refresh data from file to get updated size & content
+      const refreshed = await fetchContent(filePath, true);
+      setEditBaseMtime(refreshed?.mtime ?? null);
+      setEditing(false);
+      setExternalChangeWhileEditing(false);
+      setSaveConflict(false);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }, [filePath, editedContent, editBaseMtime, fetchContent]);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditing(false);
+    setExternalChangeWhileEditing(false);
+    setSaveConflict(false);
+    setSaveError(null);
+    setEditBaseMtime(null);
+  }, []);
+
+  // Handle external change accepted — reload and continue editing
+  const handleAcceptExternalChange = useCallback(async () => {
+    const fresh = await fetchContent(filePath, true);
+    if (!fresh) return;
+    setEditedContent(fresh.content);
+    setEditBaseMtime(fresh.mtime ?? null);
+    setExternalChangeWhileEditing(false);
+    setSaveConflict(false);
+    setSaveError(null);
+    setError(null);
+  }, [fetchContent, filePath]);
+
+  if (loading) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 13 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#f87171", fontSize: 13 }}>
+        {error}
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const isHtml = data.language === "html";
+  const isMarkdown = data.language === "markdown";
+  const tableDelimiter = getTableDelimiter(filePath);
+  const isTable = tableDelimiter !== null;
+  const lines = data.content.split("\n");
+  const hasDiff = prevContent !== null && prevContent !== data.content;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      {/* Status bar */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "4px 16px",
+          borderBottom: "1px solid var(--border)",
+          fontSize: 11,
+          color: "var(--text-dim)",
+          background: "var(--bg)",
+          flexShrink: 0,
+        }}
+      >
+        <span style={{ fontFamily: "var(--font-mono)" }} title={filePath}>
+          {getRelativeFilePath(filePath, cwd)}
+        </span>
+        <span style={{ marginLeft: "auto" }}>{data.language}</span>
+        {viewMode === "source" && <span>{lines.length} lines</span>}
+        <span>{formatSize(data.size)}</span>
+
+        {/* Live watch indicator */}
+        <span
+          title={watching ? "Live sync active" : "Not watching"}
+          style={{ display: "flex", alignItems: "center", gap: 4, color: watching ? "#4ade80" : "var(--text-dim)" }}
+        >
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: watching ? "#4ade80" : "var(--border)",
+              display: "inline-block",
+              boxShadow: watching ? "0 0 4px #4ade80" : "none",
+            }}
+          />
+          {watching ? "live" : "static"}
+        </span>
+
+        {/* Edit / Save / Cancel buttons */}
+        {!editing ? (
+          <button
+            onClick={handleStartEdit}
+            title="Edit file"
+            style={{
+              padding: "2px 10px", fontSize: 11, cursor: "pointer",
+              background: "var(--bg-hover)", color: "var(--text-muted)",
+              border: "1px solid var(--border)", borderRadius: 5,
+              fontWeight: 600,
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "var(--accent)"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text-muted)"; e.currentTarget.style.borderColor = "var(--border)"; }}
+          >
+            Edit
+          </button>
+        ) : (
+          <>
+            {(externalChangeWhileEditing || saveConflict || saveError) && (
+              <span
+                title="File changed on disk while editing"
+                style={{
+                  padding: "2px 8px", fontSize: 11,
+                  background: "rgba(234,179,8,0.1)", color: "#b8860b",
+                  border: "1px solid rgba(234,179,8,0.3)", borderRadius: 5,
+                  display: "flex", alignItems: "center", gap: 4,
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+                {saveError ?? "External change"}
+                {(externalChangeWhileEditing || saveConflict) && (
+                  <button
+                    onClick={handleAcceptExternalChange}
+                    style={{
+                      marginLeft: 4, padding: "1px 6px", fontSize: 10, cursor: "pointer",
+                      background: "rgba(234,179,8,0.2)", color: "#b8860b",
+                      border: "1px solid rgba(234,179,8,0.3)", borderRadius: 3,
+                      fontWeight: 600,
+                    }}
+                  >
+                    Reload
+                  </button>
+                )}
+                {saveConflict && (
+                  <button
+                    onClick={() => void handleSave(true)}
+                    disabled={saving}
+                    style={{
+                      marginLeft: 4, padding: "1px 6px", fontSize: 10, cursor: saving ? "not-allowed" : "pointer",
+                      background: "rgba(239,68,68,0.12)", color: "#ef4444",
+                      border: "1px solid rgba(239,68,68,0.3)", borderRadius: 3,
+                      fontWeight: 600,
+                    }}
+                  >
+                    Overwrite
+                  </button>
+                )}
+              </span>
+            )}
+            <button
+              onClick={() => void handleSave()}
+              disabled={saving}
+              title="Save file (Ctrl+S)"
+              style={{
+                padding: "2px 10px", fontSize: 11, cursor: saving ? "not-allowed" : "pointer",
+                background: "var(--accent)", color: "#fff",
+                border: "1px solid var(--accent)", borderRadius: 5,
+                fontWeight: 600, opacity: saving ? 0.6 : 1,
+              }}
+            >
+              {saving ? "Saving…" : "Save"}
+            </button>
+            <button
+              onClick={handleCancelEdit}
+              title="Cancel editing"
+              style={{
+                padding: "2px 10px", fontSize: 11, cursor: "pointer",
+                background: "var(--bg-hover)", color: "var(--text-muted)",
+                border: "1px solid var(--border)", borderRadius: 5,
+                fontWeight: 600,
+              }}
+              onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(239,68,68,0.1)"; e.currentTarget.style.color = "#ef4444"; e.currentTarget.style.borderColor = "rgba(239,68,68,0.3)"; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text-muted)"; e.currentTarget.style.borderColor = "var(--border)"; }}
+            >
+              Cancel
+            </button>
+          </>
+        )}
+
+        {/* Diff / Source toggle — shown only when there are changes */}
+        {hasDiff && (
+          <div style={{ display: "flex", borderRadius: 5, overflow: "hidden", border: "1px solid var(--border)" }}>
+            <button
+              onClick={() => setViewMode("source")}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", cursor: "pointer",
+                background: viewMode === "source" ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: viewMode === "source" ? "var(--text)" : "var(--text-muted)",
+                fontWeight: viewMode === "source" ? 600 : 400,
+              }}
+            >
+              Source
+            </button>
+            <button
+              onClick={() => setViewMode("diff")}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", borderLeft: "1px solid var(--border)", cursor: "pointer",
+                background: viewMode === "diff" ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: viewMode === "diff" ? "var(--text)" : "var(--text-muted)",
+                fontWeight: viewMode === "diff" ? 600 : 400,
+              }}
+            >
+              Diff {changeCount > 0 && <span style={{ color: "#4ade80", marginLeft: 2 }}>+{changeCount}</span>}
+            </button>
+          </div>
+        )}
+
+        {/* Word wrap toggle */}
+        {viewMode === "source" && !previewMode && (
+          <button
+            onClick={() => setWrapLines((v) => !v)}
+            title={wrapLines ? "Disable word wrap" : "Enable word wrap"}
+            style={{
+              padding: "2px 8px", fontSize: 11, cursor: "pointer",
+              background: wrapLines ? "var(--bg-selected)" : "var(--bg-hover)",
+              color: wrapLines ? "var(--text)" : "var(--text-muted)",
+              border: "1px solid var(--border)", borderRadius: 5,
+              fontWeight: wrapLines ? 600 : 400,
+            }}
+          >
+            wrap
+          </button>
+        )}
+
+        {/* HTML source/preview toggle */}
+        {isHtml && viewMode === "source" && (
+          <div style={{ display: "flex", borderRadius: 5, overflow: "hidden", border: "1px solid var(--border)" }}>
+            <button
+              onClick={() => setPreviewMode(false)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", cursor: "pointer",
+                background: !previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: !previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: !previewMode ? 600 : 400,
+              }}
+            >
+              Code
+            </button>
+            <button
+              onClick={() => setPreviewMode(true)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", borderLeft: "1px solid var(--border)", cursor: "pointer",
+                background: previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: previewMode ? 600 : 400,
+              }}
+            >
+              Preview
+            </button>
+          </div>
+        )}
+
+        {/* Markdown preview/raw toggle */}
+        {isMarkdown && viewMode === "source" && (
+          <div style={{ display: "flex", borderRadius: 5, overflow: "hidden", border: "1px solid var(--border)" }}>
+            <button
+              onClick={() => setPreviewMode(true)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", cursor: "pointer",
+                background: previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: previewMode ? 600 : 400,
+              }}
+            >
+              Preview
+            </button>
+            <button
+              onClick={() => setPreviewMode(false)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", borderLeft: "1px solid var(--border)", cursor: "pointer",
+                background: !previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: !previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: !previewMode ? 600 : 400,
+              }}
+            >
+              {editing ? "Edit" : "Raw"}
+            </button>
+          </div>
+        )}
+
+        {/* CSV/TSV table/raw toggle */}
+        {isTable && viewMode === "source" && (
+          <div style={{ display: "flex", borderRadius: 5, overflow: "hidden", border: "1px solid var(--border)" }}>
+            <button
+              onClick={() => setPreviewMode(true)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", cursor: "pointer",
+                background: previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: previewMode ? 600 : 400,
+              }}
+            >
+              Table
+            </button>
+            <button
+              onClick={() => setPreviewMode(false)}
+              style={{
+                padding: "2px 8px", fontSize: 11, border: "none", borderLeft: "1px solid var(--border)", cursor: "pointer",
+                background: !previewMode ? "var(--bg-selected)" : "var(--bg-hover)",
+                color: !previewMode ? "var(--text)" : "var(--text-muted)",
+                fontWeight: !previewMode ? 600 : 400,
+              }}
+            >
+              Raw
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Content area */}
+      <div style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
+        {editing && !(isMarkdown && previewMode) ? (
+          <CodeMirrorEditor
+            initialContent={editedContent}
+            language={data.language}
+            isDark={isDark}
+            onChange={setEditedContent}
+            onSave={() => void handleSave()}
+          />
+        ) : editing && isMarkdown && previewMode ? (
+          <MarkdownRenderer
+            content={editedContent}
+            className="markdown-body markdown-file-preview"
+            codeBlockVariant="file"
+            baseFilePath={filePath}
+            onOpenLocalFile={onOpenFile}
+            style={{ padding: "28px 36px", maxWidth: 920, margin: "0 auto" }}
+          />
+        ) : viewMode === "diff" && hasDiff ? (
+          <DiffView oldContent={prevContent!} newContent={data.content} language={data.language} />
+        ) : isHtml && previewMode ? (
+          <iframe
+            srcDoc={data.content}
+            sandbox="allow-scripts"
+            style={{ width: "100%", height: "100%", border: "none", background: "var(--bg)" }}
+            title="HTML preview"
+          />
+        ) : isMarkdown && previewMode ? (
+          <MarkdownRenderer
+            content={data.content}
+            className="markdown-body markdown-file-preview"
+            codeBlockVariant="file"
+            baseFilePath={filePath}
+            onOpenLocalFile={onOpenFile}
+            style={{ padding: "28px 36px", maxWidth: 920, margin: "0 auto" }}
+          />
+        ) : isTable && previewMode && tableDelimiter ? (
+          <DataTableViewer
+            content={data.content}
+            delimiter={tableDelimiter}
+            fileName={getFileName(filePath)}
+          />
+        ) : (
+          <SyntaxHighlighter
+            language={data.language === "text" || data.language === "csv" || data.language === "tsv" ? "plaintext" : data.language}
+            style={resolveCodeTheme(isDark)}
+            showLineNumbers
+            lineNumberStyle={{
+              color: "var(--text-dim)",
+              fontStyle: "normal",
+              minWidth: "3em",
+              paddingRight: "1em",
+            }}
+            customStyle={{
+              margin: 0,
+              padding: "12px 0",
+              background: "var(--bg)",
+              fontSize: 13,
+              lineHeight: 1.6,
+              fontFamily: "var(--font-mono)",
+              minHeight: "100%",
+            }}
+            codeTagProps={{ style: { fontFamily: "var(--font-mono)" } }}
+            wrapLongLines={wrapLines}
+          >
+            {data.content}
+          </SyntaxHighlighter>
+        )}
+      </div>
+    </div>
+  );
+}