diff --git a/app/(main)/text-to-speech/page.tsx b/app/(main)/text-to-speech/page.tsx
index e68f9766..ed774b9a 100644
--- a/app/(main)/text-to-speech/page.tsx
+++ b/app/(main)/text-to-speech/page.tsx
@@ -15,8 +15,7 @@ import { useToast } from "@/app/hooks/useToast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import DatasetsTab from "@/app/components/text-to-speech/DatasetsTab";
-import EvaluationsTab from "@/app/components/text-to-speech/EvaluationsTab";
+import { DatasetsTab, EvaluationsTab } from "@/app/components/text-to-speech";
 import {
   TTSTab,
   TextSample,
diff --git a/app/api/document/[document_id]/preview/route.ts b/app/api/document/[document_id]/preview/route.ts
new file mode 100644
index 00000000..84e7ead0
--- /dev/null
+++ b/app/api/document/[document_id]/preview/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+import { DocumentDetailEnvelope } from "@/app/lib/types/document";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ document_id: string }> },
+) {
+  const { document_id } = await params;
+  try {
+    const { data } = await apiClient(
+      request,
+      `/api/v1/documents/${document_id}?include_url=true`,
+    );
+    const detail = (data as DocumentDetailEnvelope) || {};
+    const signedUrl = detail.data?.signed_url || detail.signed_url;
+    if (!signedUrl) {
+      return NextResponse.json(
+        { error: "Document has no signed URL" },
+        { status: 404 },
+      );
+    }
+
+    const upstream = await fetch(signedUrl);
+    if (!upstream.ok) {
+      return NextResponse.json(
+        { error: `Failed to fetch document (status ${upstream.status})` },
+        { status: upstream.status },
+      );
+    }
+
+    const contentType =
+      upstream.headers.get("Content-Type") || "application/octet-stream";
+    return new Response(upstream.body, {
+      status: 200,
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "private, max-age=300",
+      },
+    });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/analytics/BreakdownPanel.tsx b/app/components/analytics/BreakdownPanel.tsx
index 1a8d0f3a..8f694d88 100644
--- a/app/components/analytics/BreakdownPanel.tsx
+++ b/app/components/analytics/BreakdownPanel.tsx
@@ -138,7 +138,7 @@ export default function BreakdownPanel({
             {groupHeader}-wise {metricLabel}
           </h4>
         </header>
-        <div className="flex-1 min-h-0 max-h-80 overflow-y-auto custom-scroll-accent">
+        <div className="flex-1 min-h-0 max-h-80 overflow-y-auto">
           <table className="w-full text-sm">
             <thead className="sticky top-0 bg-accent-primary/10 backdrop-blur-3xl">
               <tr className="text-[11px] uppercase tracking-wide text-black">
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index cb2ec9bc..676e0300 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -8,6 +8,7 @@ import { DatabaseIcon, PlusIcon } from "@/app/components/icons";
 import { Button, Modal } from "@/app/components/ui";
 import { useToast } from "@/app/hooks/useToast";
 import { DatasetListSkeleton } from "@/app/components";
+import { parseCsvRow } from "@/app/lib/utils/csv";
 import DatasetCard from "./DatasetCard";
 import CreateDatasetForm from "./CreateDatasetForm";
 import ViewDatasetModal from "./ViewDatasetModal";
@@ -34,29 +35,6 @@ export interface DatasetsTabProps {
   toast: ReturnType<typeof useToast>;
 }
 
-const parseCsvRow = (line: string): string[] => {
-  const result: string[] = [];
-  let current = "";
-  let inQuotes = false;
-  for (let i = 0; i < line.length; i++) {
-    if (line[i] === '"') {
-      if (inQuotes && line[i + 1] === '"') {
-        current += '"';
-        i++;
-      } else {
-        inQuotes = !inQuotes;
-      }
-    } else if (line[i] === "," && !inQuotes) {
-      result.push(current.trim());
-      current = "";
-    } else {
-      current += line[i];
-    }
-  }
-  result.push(current.trim());
-  return result;
-};
-
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
diff --git a/app/components/knowledge-base/CollectionDetail.tsx b/app/components/knowledge-base/CollectionDetail.tsx
index 4ad6190c..4c42fb6c 100644
--- a/app/components/knowledge-base/CollectionDetail.tsx
+++ b/app/components/knowledge-base/CollectionDetail.tsx
@@ -125,7 +125,7 @@ export default function CollectionDetail({
           </h3>
           {documents.length > 0 && (
             <Button
-              variant="outline"
+              variant="primary"
               size="sm"
               onClick={() => onPreviewDocument(documents[0])}
             >
diff --git a/app/components/knowledge-base/CsvPreview.tsx b/app/components/knowledge-base/CsvPreview.tsx
new file mode 100644
index 00000000..d93bfa5f
--- /dev/null
+++ b/app/components/knowledge-base/CsvPreview.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader } from "@/app/components/ui";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { apiFetchResponse } from "@/app/lib/apiClient";
+import { parseCsv } from "@/app/lib/utils/csv";
+import { CsvPreviewProps, ParsedCsv } from "@/app/lib/types/document";
+
+export default function CsvPreview({ url }: CsvPreviewProps) {
+  const { activeKey } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const [data, setData] = useState<ParsedCsv | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setData(null);
+    apiFetchResponse(url, apiKey)
+      .then((r) => {
+        if (!r.ok) throw new Error(`Server returned ${r.status}`);
+        return r.text();
+      })
+      .then((text) => {
+        if (!cancelled) setData(parseCsv(text));
+      })
+      .catch((e: Error) => {
+        if (!cancelled) setError(e.message || "Couldn't load CSV");
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, apiKey]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader size="md" message="Loading CSV…" />
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
+        <p className="text-sm text-text-secondary">
+          Couldn&apos;t load CSV preview.
+        </p>
+        <p className="text-xs text-text-secondary">{error}</p>
+      </div>
+    );
+  }
+  if (!data || data.headers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-text-secondary">CSV is empty.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-bg-primary">
+      <table className="w-full text-sm border-collapse">
+        <thead className="sticky top-0 z-10 bg-bg-secondary border-b border-border">
+          <tr>
+            {data.headers.map((h, i) => (
+              <th
+                key={i}
+                className="text-left px-3 py-2 font-semibold text-text-primary border-r border-border last:border-r-0 whitespace-nowrap"
+              >
+                {h || `Column ${i + 1}`}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.rows.map((row, ri) => (
+            <tr
+              key={ri}
+              className="border-b border-border last:border-b-0 hover:bg-bg-secondary/40"
+            >
+              {data.headers.map((_, ci) => (
+                <td
+                  key={ci}
+                  className="px-3 py-2 text-text-secondary border-r border-border last:border-r-0 align-top"
+                >
+                  {row[ci] ?? ""}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/app/components/knowledge-base/DocumentPreviewModal.tsx b/app/components/knowledge-base/DocumentPreviewModal.tsx
index 3fea31ec..c9d92e51 100644
--- a/app/components/knowledge-base/DocumentPreviewModal.tsx
+++ b/app/components/knowledge-base/DocumentPreviewModal.tsx
@@ -1,18 +1,27 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Loader, Modal } from "@/app/components/ui";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Loader, Modal } from "@/app/components/ui";
+import { DownloadIcon } from "@/app/components/icons";
 import { formatDate } from "@/app/components/utils";
-import { Document } from "@/app/lib/types/document";
+import {
+  Document,
+  DocumentPreviewKind,
+  DocumentPreviewModalProps,
+  DocumentSidebarProps,
+  PreviewPaneProps,
+} from "@/app/lib/types/document";
+import { getDocumentPreviewSource } from "@/app/lib/utils/documentPreview";
+import CsvPreview from "@/app/components/knowledge-base/CsvPreview";
 
-interface DocumentPreviewModalProps {
-  open: boolean;
-  onClose: () => void;
-  documents: Document[];
-  previewDoc: Document | null;
-  isLoading?: boolean;
-  onSelectDocument: (doc: Document) => void;
-}
+// Native iframes are likely to silently fail (cancelled download, bad MIME);
+const IFRAME_TIMEOUT_MS: Record<DocumentPreviewKind, number> = {
+  native: 12000,
+  office: 25000,
+  google: 25000,
+  csv: 0,
+  unsupported: 0,
+};
 
 export default function DocumentPreviewModal({
   open,
@@ -23,16 +32,33 @@ export default function DocumentPreviewModal({
   onSelectDocument,
 }: DocumentPreviewModalProps) {
   const [isFrameLoading, setIsFrameLoading] = useState(false);
+  const [frameTimedOut, setFrameTimedOut] = useState(false);
+
+  const previewSource = useMemo(
+    () => getDocumentPreviewSource(previewDoc),
+    [previewDoc],
+  );
+  const { kind, url: previewUrl } = previewSource;
+  const usesIframe =
+    kind === "native" || kind === "office" || kind === "google";
 
   useEffect(() => {
-    if (!previewDoc?.signed_url) return;
+    setFrameTimedOut(false);
+    if (!usesIframe || !previewUrl) {
+      setIsFrameLoading(false);
+      return;
+    }
     setIsFrameLoading(true);
-    // Fallback: iframe `onLoad` doesn't fire reliably when the browser
-    const timer = setTimeout(() => setIsFrameLoading(false), 6000);
+    const timer = setTimeout(() => {
+      setIsFrameLoading(false);
+      setFrameTimedOut(true);
+    }, IFRAME_TIMEOUT_MS[kind]);
     return () => clearTimeout(timer);
-  }, [previewDoc?.id, previewDoc?.signed_url]);
+  }, [previewDoc?.id, previewUrl, usesIframe, kind]);
+
+  const renderIframe = usesIframe && !!previewUrl && !frameTimedOut;
+  const showLoader = (isLoading || isFrameLoading) && usesIframe;
 
-  const showLoader = isLoading || isFrameLoading;
   return (
     <Modal
       open={open}
@@ -42,74 +68,186 @@ export default function DocumentPreviewModal({
       maxHeight="h-[80vh]"
     >
       <div className="flex flex-1 min-h-0 h-full">
-        <div className="w-56 shrink-0 border-r border-border overflow-y-auto bg-bg-secondary">
-          {documents.map((doc) => {
-            const isSelected = previewDoc?.id === doc.id;
-            return (
-              <button
-                key={doc.id}
-                onClick={() => onSelectDocument(doc)}
-                className={`relative w-full text-left px-4 py-3 transition-colors cursor-pointer ${
-                  isSelected
-                    ? "bg-accent-primary/5"
-                    : "hover:bg-accent-primary/5"
-                }`}
-              >
-                {isSelected && (
-                  <span className="absolute left-0 top-0 bottom-0 w-1 bg-accent-primary" />
-                )}
-                <p
-                  className={`text-sm truncate ${
-                    isSelected
-                      ? "font-semibold text-accent-primary"
-                      : "font-medium text-text-primary"
-                  }`}
-                >
-                  {doc.fname}
-                </p>
-                {doc.inserted_at && (
-                  <p className="text-xs text-text-secondary mt-0.5">
-                    {formatDate(doc.inserted_at)}
-                  </p>
-                )}
-              </button>
-            );
-          })}
+        <DocumentSidebar
+          documents={documents}
+          previewDoc={previewDoc}
+          onSelectDocument={onSelectDocument}
+        />
+        <div className="flex-1 min-h-0 flex flex-col">
+          <PreviewHeader previewDoc={previewDoc} />
+          <PreviewPane
+            previewDoc={previewDoc}
+            previewUrl={previewUrl}
+            kind={kind}
+            renderIframe={renderIframe}
+            showLoader={showLoader}
+            frameTimedOut={frameTimedOut}
+            onFrameLoad={() => setIsFrameLoading(false)}
+          />
         </div>
+      </div>
+    </Modal>
+  );
+}
 
-        <div className="flex-1 min-h-0 bg-neutral-50 relative">
-          {previewDoc?.signed_url ? (
-            <iframe
-              key={previewDoc.id}
-              src={previewDoc.signed_url}
-              title={previewDoc.fname}
-              onLoad={() => setIsFrameLoading(false)}
-              className="w-full h-full border-none"
-            />
-          ) : !showLoader ? (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-sm text-text-secondary">
-                {previewDoc
-                  ? "No preview available for this document"
-                  : "Select a document to preview"}
+function DocumentSidebar({
+  documents,
+  previewDoc,
+  onSelectDocument,
+}: DocumentSidebarProps) {
+  return (
+    <div className="w-56 shrink-0 border-r border-border overflow-y-auto bg-bg-secondary">
+      {documents.map((doc) => {
+        const isSelected = previewDoc?.id === doc.id;
+        return (
+          <button
+            key={doc.id}
+            onClick={() => onSelectDocument(doc)}
+            className={`relative w-full text-left px-4 py-3 transition-colors cursor-pointer ${
+              isSelected ? "bg-accent-primary/5" : "hover:bg-accent-primary/5"
+            }`}
+          >
+            {isSelected && (
+              <span className="absolute left-0 top-0 bottom-0 w-1 bg-accent-primary" />
+            )}
+            <p
+              className={`text-sm truncate ${
+                isSelected
+                  ? "font-semibold text-accent-primary"
+                  : "font-medium text-text-primary"
+              }`}
+            >
+              {doc.fname}
+            </p>
+            {doc.inserted_at && (
+              <p className="text-xs text-text-secondary mt-0.5">
+                {formatDate(doc.inserted_at)}
               </p>
-            </div>
-          ) : null}
-
-          {showLoader && (
-            <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary/80 backdrop-blur-[1px] pointer-events-none">
-              <Loader
-                size="md"
-                message={
-                  previewDoc?.fname
-                    ? `Loading ${previewDoc.fname}…`
-                    : "Loading document…"
-                }
-              />
-            </div>
-          )}
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function triggerDownload(url: string, filename: string) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.target = "_blank";
+  a.rel = "noopener noreferrer";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+function PreviewHeader({ previewDoc }: { previewDoc: Document | null }) {
+  if (!previewDoc) return null;
+  return (
+    <div className="shrink-0 flex items-center justify-between gap-3 px-4 py-2 border-b border-border bg-bg-primary">
+      <p className="text-sm font-medium text-text-primary truncate">
+        {previewDoc.fname}
+      </p>
+      {previewDoc.signed_url && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() =>
+            triggerDownload(previewDoc.signed_url!, previewDoc.fname)
+          }
+          title="Download file"
+        >
+          <DownloadIcon className="w-3.5 h-3.5" />
+          Download
+        </Button>
+      )}
+    </div>
+  );
+}
+
+function PreviewPane({
+  previewDoc,
+  previewUrl,
+  kind,
+  renderIframe,
+  showLoader,
+  frameTimedOut,
+  onFrameLoad,
+}: PreviewPaneProps) {
+  const showCsv = kind === "csv" && !!previewUrl;
+  const showFallback = !showLoader && !renderIframe && !showCsv;
+
+  return (
+    <div className="flex-1 min-h-0 bg-neutral-50 relative">
+      {renderIframe && (
+        <iframe
+          key={`${previewDoc!.id}-${kind}`}
+          src={previewUrl!}
+          title={previewDoc!.fname}
+          onLoad={onFrameLoad}
+          className="w-full h-full border-none"
+        />
+      )}
+
+      {showCsv && <CsvPreview url={previewUrl!} />}
+
+      {showFallback && (
+        <PreviewFallback
+          previewDoc={previewDoc}
+          frameTimedOut={frameTimedOut}
+        />
+      )}
+
+      {showLoader && (
+        <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary/80 backdrop-blur-[1px] pointer-events-none">
+          <Loader
+            size="md"
+            message={
+              previewDoc?.fname
+                ? `Loading ${previewDoc.fname}…`
+                : "Loading document…"
+            }
+          />
         </div>
+      )}
+    </div>
+  );
+}
+
+interface PreviewFallbackProps {
+  previewDoc: Document | null;
+  frameTimedOut: boolean;
+}
+
+function PreviewFallback({ previewDoc, frameTimedOut }: PreviewFallbackProps) {
+  if (!previewDoc) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-sm text-text-secondary">
+          Select a document to preview
+        </p>
       </div>
-    </Modal>
+    );
+  }
+  const message = frameTimedOut
+    ? "The preview didn't load. Please download the file to view it."
+    : "Inline preview isn't available for this file format.";
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+      <p className="text-sm text-text-secondary">{message}</p>
+      {previewDoc.signed_url && (
+        <Button
+          variant="primary"
+          size="md"
+          onClick={() =>
+            triggerDownload(previewDoc.signed_url!, previewDoc.fname)
+          }
+        >
+          <DownloadIcon className="w-4 h-4" />
+          Download {previewDoc.fname}
+        </Button>
+      )}
+    </div>
   );
 }
diff --git a/app/components/text-to-speech/DatasetsTab.tsx b/app/components/text-to-speech/DatasetsTab.tsx
index 04bab29f..22b09f4f 100644
--- a/app/components/text-to-speech/DatasetsTab.tsx
+++ b/app/components/text-to-speech/DatasetsTab.tsx
@@ -14,6 +14,7 @@ import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
 import { DatabaseIcon } from "@/app/components/icons";
 import { DatasetListSkeleton } from "@/app/components";
+import { parseCsvRow } from "@/app/lib/utils/csv";
 import TTSDatasetCard from "./TTSDatasetCard";
 import CreateTTSDatasetForm from "./CreateTTSDatasetForm";
 import TTSViewDatasetModal from "./TTSViewDatasetModal";
@@ -64,29 +65,6 @@ const splitCSVRecords = (text: string): string[] => {
   return records;
 };
 
-const parseCsvRow = (line: string): string[] => {
-  const result: string[] = [];
-  let current = "";
-  let inQuotes = false;
-  for (let i = 0; i < line.length; i++) {
-    if (line[i] === '"') {
-      if (inQuotes && line[i + 1] === '"') {
-        current += '"';
-        i++;
-      } else {
-        inQuotes = !inQuotes;
-      }
-    } else if (line[i] === "," && !inQuotes) {
-      result.push(current.trim());
-      current = "";
-    } else {
-      current += line[i];
-    }
-  }
-  result.push(current.trim());
-  return result;
-};
-
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
diff --git a/app/components/text-to-speech/TTSDatasetCard.tsx b/app/components/text-to-speech/TTSDatasetCard.tsx
index 20eee810..0f1f1f64 100644
--- a/app/components/text-to-speech/TTSDatasetCard.tsx
+++ b/app/components/text-to-speech/TTSDatasetCard.tsx
@@ -2,7 +2,7 @@
 
 import { TTSDataset } from "@/app/lib/types/textToSpeech";
 import { Button } from "@/app/components/ui";
-import TTSDatasetDescription from "@/app/components/text-to-speech/DatasetDescription";
+import TTSDatasetDescription from "./DatasetDescription";
 
 interface TTSDatasetCardProps {
   dataset: TTSDataset;
diff --git a/app/components/text-to-speech/index.ts b/app/components/text-to-speech/index.ts
new file mode 100644
index 00000000..6945b7a8
--- /dev/null
+++ b/app/components/text-to-speech/index.ts
@@ -0,0 +1,13 @@
+export { default as AudioPlayerFromUrl } from "./AudioPlayerFromUrl";
+export { default as CreateTTSDatasetForm } from "./CreateTTSDatasetForm";
+export { default as DatasetDescription } from "./DatasetDescription";
+export { default as DatasetsTab } from "./DatasetsTab";
+export { default as EvaluationsTab } from "./EvaluationsTab";
+export { default as RunTTSEvaluationForm } from "./RunTTSEvaluationForm";
+export { default as TTSDatasetCard } from "./TTSDatasetCard";
+export { default as TTSResultRow } from "./TTSResultRow";
+export { default as TTSResultsTable } from "./TTSResultsTable";
+export { default as TTSRunCard } from "./TTSRunCard";
+export { default as TTSRunsList } from "./TTSRunsList";
+export { default as TTSScoreInfoTooltip } from "./TTSScoreInfoTooltip";
+export { default as TTSViewDatasetModal } from "./TTSViewDatasetModal";
diff --git a/app/globals.css b/app/globals.css
index 66fb0d6f..d8355ba2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -251,25 +251,28 @@ a {
 }
 
 /**
- * Accent-colored thin scrollbar for compact data tables.
- * Applied via className="custom-scroll-accent" on a scroll container.
+ * Global scrollbar styling — applies the accent-primary colour to every scrollable container
  */
-.custom-scroll-accent::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.custom-scroll-accent::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   background: transparent;
 }
-.custom-scroll-accent::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, var(--color-accent-primary) 60%, white);
-  border-radius: 3px;
+::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--color-accent-primary) 50%, white);
+  border-radius: 4px;
 }
-.custom-scroll-accent::-webkit-scrollbar-thumb:hover {
+::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-accent-primary);
 }
-.custom-scroll-accent {
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+html {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 60%, white)
+  scrollbar-color: color-mix(in srgb, var(--color-accent-primary) 50%, white)
     transparent;
 }
diff --git a/app/hooks/useSttData.ts b/app/hooks/useSttData.ts
index e7af5ac0..a9b7dd92 100644
--- a/app/hooks/useSttData.ts
+++ b/app/hooks/useSttData.ts
@@ -14,30 +14,9 @@ import {
   DatasetsResponse,
   RunsResponse,
   RunDetailResponse,
+  UseSttDataResult,
 } from "@/app/lib/types/speechToText";
 
-interface UseSttDataResult {
-  languages: Language[];
-  datasets: Dataset[];
-  runs: STTRun[];
-  results: STTResult[];
-  selectedRunId: number | null;
-  setSelectedRunId: (id: number | null) => void;
-  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
-  isLoadingDatasets: boolean;
-  isLoadingRuns: boolean;
-  isLoadingResults: boolean;
-  loadDatasets: () => Promise<void>;
-  loadRuns: () => Promise<void>;
-  loadResults: (runId: number) => Promise<void>;
-}
-
-/**
- * Owns the read-side state for the speech-to-text page: the list of
- * languages, datasets, runs, and the currently-loaded results, plus the
- * loaders that populate them. The page passes the active tab so we only
- * fetch runs when it's relevant.
- */
 export function useSttData(
   activeTab: "datasets" | "evaluations",
 ): UseSttDataResult {
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index ba7233a8..a1952bfd 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -4,7 +4,6 @@ import { AUTH_EXPIRED_EVENT } from "@/app/lib/constants";
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
 export type UploadPhase = "uploading" | "processing" | "done";
 
-/** Coalesces concurrent refresh calls into a single request. */
 let refreshPromise: Promise<boolean> | null = null;
 
 /**
@@ -224,7 +223,6 @@ export async function apiFetch<T>(
     throw new Error(message);
   }
 
-  // Auth endpoints (login, register, etc.) — never auto-refresh, just throw
   if (url.startsWith("/api/auth/")) {
     throw new Error(message);
   }
@@ -252,3 +250,38 @@ export async function apiFetch<T>(
   dispatchAuthExpired();
   throw new Error("Session expired. Please log in again.");
 }
+
+/**
+ * Authenticated fetch that returns the raw `Response`, with the same
+ * X-API-KEY + cookie + silent-refresh-on-401 behaviour as `apiFetch`.
+ */
+export async function apiFetchResponse(
+  url: string,
+  apiKey: string,
+  options: RequestInit = {},
+): Promise<Response> {
+  const buildHeaders = () => {
+    const headers = new Headers(options.headers);
+    if (apiKey) headers.set("X-API-KEY", apiKey);
+    return headers;
+  };
+
+  const doFetch = () =>
+    fetch(url, {
+      ...options,
+      headers: buildHeaders(),
+      credentials: "include",
+    });
+
+  const res = await doFetch();
+  if (res.ok || res.status !== 401) return res;
+
+  // Auth endpoints — never auto-refresh.
+  if (url.startsWith("/api/auth/")) return res;
+
+  const refreshed = await tryRefreshToken();
+  if (refreshed) return doFetch();
+
+  dispatchAuthExpired();
+  return res;
+}
diff --git a/app/lib/types/document.ts b/app/lib/types/document.ts
index 3cd64a2f..37cb1160 100644
--- a/app/lib/types/document.ts
+++ b/app/lib/types/document.ts
@@ -8,6 +8,15 @@ export interface Document {
   updated_at?: string;
 }
 
+export interface DocumentDetail {
+  signed_url?: string;
+  fname?: string;
+}
+
+export interface DocumentDetailEnvelope extends DocumentDetail {
+  data?: DocumentDetail;
+}
+
 export interface Collection {
   id: string;
   name?: string;
@@ -19,3 +28,50 @@ export interface Collection {
   job_id?: string;
   documents?: Document[];
 }
+
+export interface CsvPreviewProps {
+  url: string;
+}
+
+export interface DocumentPreviewModalProps {
+  open: boolean;
+  onClose: () => void;
+  documents: Document[];
+  previewDoc: Document | null;
+  isLoading?: boolean;
+  onSelectDocument: (doc: Document) => void;
+}
+
+export type DocumentPreviewKind =
+  | "native"
+  | "office"
+  | "google"
+  | "csv"
+  | "unsupported";
+
+export interface DocumentPreviewSource {
+  kind: DocumentPreviewKind;
+  url: string | null;
+  ext?: string;
+}
+
+export interface PreviewPaneProps {
+  previewDoc: Document | null;
+  previewUrl: string | null;
+  kind: DocumentPreviewKind;
+  renderIframe: boolean;
+  showLoader: boolean;
+  frameTimedOut: boolean;
+  onFrameLoad: () => void;
+}
+
+export interface DocumentSidebarProps {
+  documents: Document[];
+  previewDoc: Document | null;
+  onSelectDocument: (doc: Document) => void;
+}
+
+export interface ParsedCsv {
+  headers: string[];
+  rows: string[][];
+}
diff --git a/app/lib/types/speechToText.ts b/app/lib/types/speechToText.ts
index 758bb72d..8b316f5a 100644
--- a/app/lib/types/speechToText.ts
+++ b/app/lib/types/speechToText.ts
@@ -150,3 +150,19 @@ export interface STTViewDatasetModalData {
   datasetId: number;
   samples: STTSample[];
 }
+
+export interface UseSttDataResult {
+  languages: Language[];
+  datasets: Dataset[];
+  runs: STTRun[];
+  results: STTResult[];
+  selectedRunId: number | null;
+  setSelectedRunId: (id: number | null) => void;
+  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
+  isLoadingDatasets: boolean;
+  isLoadingRuns: boolean;
+  isLoadingResults: boolean;
+  loadDatasets: () => Promise<void>;
+  loadRuns: () => Promise<void>;
+  loadResults: (runId: number) => Promise<void>;
+}
diff --git a/app/lib/utils/csv.ts b/app/lib/utils/csv.ts
new file mode 100644
index 00000000..88741420
--- /dev/null
+++ b/app/lib/utils/csv.ts
@@ -0,0 +1,37 @@
+import { ParsedCsv } from "@/app/lib/types/document";
+
+/**
+ * Parse a single CSV line. Handles quoted fields and escaped quotes ("")
+ **/
+export const parseCsvRow = (line: string): string[] => {
+  const result: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] === '"') {
+      if (inQuotes && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if (line[i] === "," && !inQuotes) {
+      result.push(current.trim());
+      current = "";
+    } else {
+      current += line[i];
+    }
+  }
+  result.push(current.trim());
+  return result;
+};
+
+/**
+ * Parse a CSV file into headers + rows. First non-empty line is treated as the header row.
+ **/
+export const parseCsv = (text: string): ParsedCsv => {
+  const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+  const headers = lines.length > 0 ? parseCsvRow(lines[0]) : [];
+  const rows = lines.slice(1).map(parseCsvRow);
+  return { headers, rows };
+};
diff --git a/app/lib/utils/documentPreview.ts b/app/lib/utils/documentPreview.ts
new file mode 100644
index 00000000..6c304d30
--- /dev/null
+++ b/app/lib/utils/documentPreview.ts
@@ -0,0 +1,77 @@
+import { Document, DocumentPreviewSource } from "@/app/lib/types/document";
+
+const NATIVE_EXTS = new Set([
+  "pdf",
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+  "txt",
+  "md",
+  "html",
+  "htm",
+  "json",
+]);
+
+const OFFICE_EXTS = new Set([
+  "doc",
+  "docx",
+  "xls",
+  "xlsx",
+  "ppt",
+  "pptx",
+  "odt",
+  "ods",
+  "odp",
+]);
+
+const GOOGLE_EXTS = new Set(["tsv"]);
+
+const CSV_EXTS = new Set(["csv"]);
+
+function getExtension(filename: string): string {
+  const dot = filename.lastIndexOf(".");
+  return dot === -1 ? "" : filename.slice(dot + 1).toLowerCase();
+}
+
+export function getDocumentPreviewSource(
+  doc: Document | null,
+): DocumentPreviewSource {
+  if (!doc?.signed_url) return { kind: "unsupported", url: null };
+
+  const ext = getExtension(doc.fname || "");
+
+  if (!ext) return { kind: "unsupported", url: doc.signed_url, ext };
+
+  if (CSV_EXTS.has(ext)) {
+    // Route through our same-origin proxy — signed URLs typically can't be
+    // fetched directly from the browser (CORS + Content-Disposition: attachment).
+    return { kind: "csv", url: `/api/document/${doc.id}/preview`, ext };
+  }
+
+  if (NATIVE_EXTS.has(ext)) {
+    return { kind: "native", url: doc.signed_url, ext };
+  }
+
+  if (OFFICE_EXTS.has(ext)) {
+    return {
+      kind: "office",
+      url: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(doc.signed_url)}`,
+      ext,
+    };
+  }
+
+  if (GOOGLE_EXTS.has(ext)) {
+    return {
+      kind: "google",
+      url: `https://docs.google.com/gview?url=${encodeURIComponent(doc.signed_url)}&embedded=true`,
+      ext,
+    };
+  }
+
+  return { kind: "unsupported", url: doc.signed_url, ext };
+}