@seqyuan/annodex 0.1.12 → 0.1.13

package/components/FileViewer.tsx

@@ -1,1273 +0,0 @@
-"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>
-  );
-}