larkup 0.1.14 → 0.1.21

package/components/data/upload-panel.tsx

@@ -1,36 +1,47 @@
-"use client";
-
-import { useRef, useState } from "react";
-import { toast } from "sonner";
-import { formatErrorMessage } from "@/lib/error-formatter";
-import { FileUp, Loader2, X, Settings2, Columns, Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-import Papa from "papaparse";
-import * as XLSX from "xlsx";
+'use client';
+
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { formatErrorMessage } from '@/lib/error-formatter';
+import {
+  FileUp,
+  Loader2,
+  X,
+  Settings2,
+  Columns,
+  Plus,
+  Database,
+  Image as ImageIcon,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { TabularPreview } from '@/components/data/tabular-preview';
+import Papa from 'papaparse';
+import * as XLSX from 'xlsx';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "@/components/ui/dialog";
+} from '@/components/ui/dialog';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Progress } from "@/components/ui/progress";
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
-const ACCEPT = ".txt,.md,.markdown,.json,.csv,.html,.htm,.log,.xlsx,.xls,.pdf,.doc,.docx";
+const ACCEPT = '.txt,.md,.markdown,.json,.csv,.html,.htm,.log,.xlsx,.xls,.pdf,.doc,.docx';
 
-type FileFormat = "plain" | "lines" | "structured";
+type FileFormat = 'plain' | 'lines' | 'structured';
 
 interface StagedFile {
   id: string;
@@ -46,14 +57,34 @@ interface StagedFile {
   contentSeparator?: string;
   metadataKeys?: string[];
   globalMetadata?: { key: string; value: string }[];
+  /** When true, structured data is also saved as a TabularDataset for analytics */
+  indexAsTabular?: boolean;
+  /** Expanded preview state */
+  showPreview?: boolean;
+  /** When true, images from PDF will be extracted and indexed */
+  indexImages?: boolean;
+  /** The original file object for client-side processing */
+  fileObject?: File;
 }
 
+let globalStagedFiles: StagedFile[] = [];
+
 export function UploadPanel({ onAdded }: { onAdded: () => void }) {
   const inputRef = useRef<HTMLInputElement>(null);
-  const [staged, setStaged] = useState<StagedFile[]>([]);
+  const [staged, setStagedState] = useState<StagedFile[]>(globalStagedFiles);
+  const [indexAllImages, setIndexAllImages] = useState(false);
+
+  const setStaged = (val: React.SetStateAction<StagedFile[]>) => {
+    setStagedState((prev) => {
+      const next = typeof val === 'function' ? (val as Function)(prev) : val;
+      globalStagedFiles = next;
+      return next;
+    });
+  };
   const [dragging, setDragging] = useState(false);
   const [saving, setSaving] = useState(false);
   const [progress, setProgress] = useState<{
+    message?: string;
     current: number;
     total: number;
   } | null>(null);
@@ -65,10 +96,19 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
   async function readFiles(files: FileList | File[]) {
     const next: StagedFile[] = [];
     for (const file of Array.from(files)) {
-      const ext = file.name.split(".").pop()?.toLowerCase();
+      const ext = file.name.split('.').pop()?.toLowerCase();
+
+      // Prevent dragging media into the documents tab
+      if (ext && !ACCEPT.includes(`.${ext}`)) {
+        toast.error(
+          `Unsupported file type: ${file.name}. Please upload media files in the Media tab.`,
+        );
+        continue;
+      }
+
       const id = Math.random().toString(36).slice(2);
       try {
-        if (ext === "csv") {
+        if (ext === 'csv') {
           const content = await file.text();
           const result = Papa.parse(content, {
             header: true,
@@ -80,59 +120,65 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
               id,
               name: file.name,
               size: file.size,
-              format: "structured",
+              format: 'structured',
               rows: result.data,
               keys,
               titleKey: keys[0],
               contentKeys: keys,
-              contentSeparator: ", ",
-              metadataKeys: [],
+              contentSeparator: ', ',
+              metadataKeys: keys.slice(1),
               globalMetadata: [],
+              indexAsTabular: true,
             });
           }
-        } else if (ext === "xlsx" || ext === "xls") {
+        } else if (ext === 'xlsx' || ext === 'xls') {
           const data = await file.arrayBuffer();
-          const workbook = XLSX.read(data, { type: "array" });
+          const workbook = XLSX.read(data, { type: 'array', cellDates: true });
           const sheet = workbook.Sheets[workbook.SheetNames[0]];
-          const rows = XLSX.utils.sheet_to_json(sheet);
+          const rawRows = XLSX.utils.sheet_to_json(sheet) as Record<string, any>[];
+          const rows = rawRows.map((row) => {
+            const out: Record<string, any> = {};
+            for (const [k, v] of Object.entries(row)) {
+              out[k] = v instanceof Date ? v.toISOString().split('T')[0] : v;
+            }
+            return out;
+          });
           if (rows.length > 0) {
             const keys = Object.keys(rows[0] as object);
             next.push({
               id,
               name: file.name,
               size: file.size,
-              format: "structured",
+              format: 'structured',
               rows,
               keys,
               titleKey: keys[0],
               contentKeys: keys,
-              contentSeparator: ", ",
-              metadataKeys: [],
+              contentSeparator: ', ',
+              metadataKeys: keys.slice(1),
               globalMetadata: [],
+              indexAsTabular: true,
             });
           }
-        } else if (ext === "json") {
+        } else if (ext === 'json') {
           const content = await file.text();
           try {
             const parsed = JSON.parse(content);
-            if (
-              Array.isArray(parsed) &&
-              parsed.length > 0 &&
-              typeof parsed[0] === "object"
-            ) {
+            if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === 'object') {
               const keys = Object.keys(parsed[0]);
               next.push({
                 id,
                 name: file.name,
                 size: file.size,
-                format: "structured",
+                format: 'structured',
                 rows: parsed,
                 keys,
                 titleKey: keys[0],
                 contentKeys: keys,
-                contentSeparator: ", ",
-                metadataKeys: [],
+                contentSeparator: ', ',
+                metadataKeys: keys.slice(1),
                 globalMetadata: [],
+                indexAsTabular: true,
               });
             } else {
               // fallback to plain
@@ -140,7 +186,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                 id,
                 name: file.name,
                 size: file.size,
-                format: "plain",
+                format: 'plain',
                 rawContent: content,
               });
             }
@@ -149,30 +195,32 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
               id,
               name: file.name,
               size: file.size,
-              format: "plain",
+              format: 'plain',
               rawContent: content,
             });
           }
-        } else if (ext === "pdf" || ext === "doc" || ext === "docx") {
+        } else if (ext === 'pdf' || ext === 'doc' || ext === 'docx') {
           const formData = new FormData();
-          formData.append("file", file);
-          
-          const res = await fetch("/api/parse-file", {
-            method: "POST",
+          formData.append('file', file);
+
+          const res = await fetch('/api/parse-file', {
+            method: 'POST',
             body: formData,
           });
-          
+
           if (!res.ok) {
             throw new Error(`Failed to parse ${file.name}`);
           }
-          
+
           const { text } = await res.json();
           next.push({
             id,
             name: file.name,
             size: file.size,
-            format: "plain",
+            format: 'plain',
             rawContent: text,
+            fileObject: file,
+            indexImages: !text || text.trim().length === 0,
           });
         } else {
           const content = await file.text();
@@ -180,7 +228,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
             id,
             name: file.name,
             size: file.size,
-            format: "plain",
+            format: 'plain',
             rawContent: content,
           });
         }
@@ -199,13 +247,151 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
     const payloads: any[] = [];
 
     for (const f of staged) {
-      if (f.format === "plain" && f.rawContent) {
-        payloads.push({
-          title: f.name,
-          content: f.rawContent,
-          source: "upload",
-        });
-      } else if (f.format === "lines" && f.rawContent) {
+      if (f.format === 'structured' && f.rows && f.indexAsTabular) {
+        try {
+          const res = await fetch('/api/tabular', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: f.name, rows: f.rows }),
+          });
+          if (res.ok) {
+            const result = await res.json();
+            toast.success(
+              `Saved "${f.name}" as tabular dataset (${result.rowCount} rows, ${result.columns.length} columns)`,
+            );
+          }
+        } catch {
+          /* continue — still add as documents */
+        }
+      }
+    }
+
+    // Then: create document payloads
+    for (const f of staged) {
+      if (f.format === 'plain' && (f.rawContent || f.name.toLowerCase().endsWith('.pdf'))) {
+        let fileUrl = undefined;
+        // Upload the physical file so chat can link to it
+        if (f.fileObject) {
+          try {
+            const formData = new FormData();
+            formData.append('file', f.fileObject);
+            const uploadRes = await fetch('/api/upload-file', {
+              method: 'POST',
+              body: formData,
+            });
+            if (uploadRes.ok) {
+              const { url } = await uploadRes.json();
+              fileUrl = url;
+            }
+          } catch (err) {
+            console.error('Failed to upload file for citation link', err);
+          }
+        }
+
+        const hasText = f.rawContent && f.rawContent.trim().length > 0;
+        const uploadedImages: any[] = [];
+
+        // Extract images if requested (for PDFs)
+        if (f.indexImages && f.fileObject && f.name.toLowerCase().endsWith('.pdf')) {
+          try {
+            setProgress({ message: `Extracting images from ${f.name}...`, current: 0, total: 100 });
+            const { extractImagesFromPDF } = await import('@/lib/pdf-images');
+            const images = await extractImagesFromPDF(f.fileObject);
+            const BATCH_SIZE = 5;
+            for (let i = 0; i < images.length; i += BATCH_SIZE) {
+              const batch = images.slice(i, i + BATCH_SIZE);
+
+              await Promise.all(
+                batch.map(async (img, batchIdx) => {
+                  const currentIdx = i + batchIdx;
+                  setProgress({
+                    message: `Analyzing image ${currentIdx + 1} of ${images.length} from ${
+                      f.name
+                    }...`,
+                    current: currentIdx,
+                    total: images.length || 1,
+                  });
+
+                  const res = await fetch(img.base64);
+                  const blob = await res.blob();
+                  const file = new File([blob], `image-${img.index}.png`, { type: 'image/png' });
+
+                  const formData = new FormData();
+                  formData.append('file', file);
+                  const uploadRes = await fetch('/api/upload-file', {
+                    method: 'POST',
+                    body: formData,
+                  });
+
+                  if (uploadRes.ok) {
+                    const { url } = await uploadRes.json();
+
+                    let description = '';
+                    try {
+                      const descRes = await fetch('/api/describe-image', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ base64: img.base64 }),
+                      });
+                      if (descRes.ok) {
+                        const descData = await descRes.json();
+                        if (descData.description) {
+                          description = descData.description;
+                        }
+                      }
+                    } catch (e) {
+                      console.error('Failed to describe image:', e);
+                    }
+
+                    uploadedImages.push({
+                      imageUrl: url,
+                      pageNumber: img.pageNumber,
+                      index: img.index,
+                      description,
+                    });
+                  }
+                }),
+              );
+            }
+            // Ensure images remain in original order after concurrent processing
+            uploadedImages.sort((a, b) => a.index - b.index);
+          } catch (err) {
+            console.error('Failed to extract images from PDF:', err);
+          }
+        }
+
+        if (hasText || uploadedImages.length > 0) {
+          let contentStr = hasText ? f.rawContent : `Images extracted from ${f.name}`;
+          if (uploadedImages.length > 0) {
+            const descriptions = uploadedImages
+              .map(
+                (img) =>
+                  `Image ${img.index + 1} (Page ${img.pageNumber}): ${
+                    img.description || 'No description'
+                  }`,
+              )
+              .join('\n');
+            contentStr += `\n\nImage Descriptions:\n${descriptions}`;
+          }
+
+          payloads.push({
+            title: f.name,
+            content: contentStr,
+            source: 'upload',
+            url: fileUrl,
+            metadata:
+              uploadedImages.length > 0
+                ? {
+                    images: uploadedImages.map((img) => ({
+                      imageUrl: img.imageUrl,
+                      pageNumber: img.pageNumber,
+                      index: img.index,
+                    })),
+                  }
+                : undefined,
+          });
+        }
+      } else if (f.format === 'lines' && f.rawContent) {
         const lines = f.rawContent
           .split(/\r?\n/)
           .map((l) => l.trim())
@@ -214,24 +400,24 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
           payloads.push({
             title: `${f.name} - Line ${i + 1}`,
             content: line,
-            source: "upload",
+            source: 'upload',
           });
         });
-      } else if (f.format === "structured" && f.rows) {
+      } else if (f.format === 'structured' && f.rows) {
         for (let i = 0; i < f.rows.length; i++) {
           const row = f.rows[i];
-          const title = f.titleKey
-            ? String(row[f.titleKey] || `Row ${i + 1}`)
-            : `Row ${i + 1}`;
+          const title = f.titleKey ? String(row[f.titleKey] || `Row ${i + 1}`) : `Row ${i + 1}`;
 
-          let content = "";
+          let content = '';
           if (f.contentKeys && f.contentKeys.length > 0) {
             content = f.contentKeys
-              .map((k) => String(row[k] || ""))
+              .map((k) => `${k}: ${String(row[k] || '')}`)
               .filter(Boolean)
-              .join(f.contentSeparator || " ");
+              .join(f.contentSeparator || ' | ');
           } else {
-            content = JSON.stringify(row);
+            content = Object.entries(row)
+              .map(([k, v]) => `${k}: ${v}`)
+              .join(' | ');
           }
 
           const metadata: Record<string, any> = {};
@@ -249,45 +435,62 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
           }
 
           if (content.trim()) {
-            payloads.push({ title, content, metadata, source: "upload" });
+            payloads.push({
+              title,
+              content,
+              metadata,
+              source: f.indexAsTabular ? 'tabular' : 'upload',
+            });
           }
         }
       }
     }
 
-    setProgress({ current: 0, total: payloads.length });
+    setProgress({ message: 'Uploading documents...', current: 0, total: payloads.length || 1 });
 
     for (const [index, p] of payloads.entries()) {
       try {
-        const res = await fetch("/api/documents", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
+        const res = await fetch('/api/documents', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(p),
         });
         if (res.ok) ok++;
       } catch {
         /* continue */
       }
-      setProgress({ current: index + 1, total: payloads.length });
+      setProgress({
+        message: 'Uploading documents...',
+        current: index + 1,
+        total: payloads.length || 1,
+      });
     }
 
+    const stagedCount = staged.length;
     setSaving(false);
     setProgress(null);
+    globalStagedFiles = [];
     setStaged([]);
+
+    // Also explicitly clear the input value just in case
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+
     if (ok > 0) {
       toast.success(
-        `Added ${ok} document${ok > 1 ? "s" : ""} from ${staged.length} file${staged.length > 1 ? "s" : ""}`,
+        `Added ${ok} document${ok > 1 ? 's' : ''} from ${stagedCount} file${
+          stagedCount > 1 ? 's' : ''
+        }`,
       );
       onAdded();
     } else {
-      toast.error("No documents could be added.");
+      toast.error('No text or images could be extracted from the uploaded files.');
     }
   }
 
   function updateEditingFile(patch: Partial<StagedFile>) {
-    setStaged((prev) =>
-      prev.map((f) => (f.id === editingFileId ? { ...f, ...patch } : f)),
-    );
+    setStaged((prev) => prev.map((f) => (f.id === editingFileId ? { ...f, ...patch } : f)));
   }
 
   return (
@@ -306,14 +509,12 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
           if (e.dataTransfer.files?.length) readFiles(e.dataTransfer.files);
         }}
         className={cn(
-          "flex w-full flex-col cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/40 px-6 py-10 text-center transition-colors hover:bg-muted/70",
-          dragging && "border-primary bg-accent",
+          'flex w-full flex-col cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/40 px-6 py-10 text-center transition-colors hover:bg-muted/70',
+          dragging && 'border-primary bg-accent',
         )}
       >
         <FileUp className="size-6 text-muted-foreground" />
-        <span className="text-sm font-medium">
-          Drop files here or click to browse
-        </span>
+        <span className="text-sm font-medium">Drop files here or click to browse</span>
         <span className="text-xs text-muted-foreground">
           Text, JSON, CSV, Excel, PDF, and Word files
         </span>
@@ -326,61 +527,174 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
         className="sr-only"
         onChange={(e) => {
           if (e.target.files?.length) readFiles(e.target.files);
-          e.target.value = "";
+          e.target.value = '';
         }}
       />
 
       {staged.length > 0 && (
-        <ul className="space-y-1.5">
-          {staged.map((f) => (
-            <li
-              key={f.id}
-              className="flex items-center justify-between gap-3 rounded-md border border-border bg-card px-3 py-2 text-sm"
-            >
-              <div className="min-w-0 flex-1 flex flex-col gap-0.5">
-                <span className="truncate font-mono text-xs">{f.name}</span>
-                <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
-                  {f.format === "structured"
-                    ? "STRUCTURED"
-                    : f.format === "lines"
-                      ? "SPLIT BY LINE"
-                      : "PLAIN TEXT"}
-                  {f.format === "structured" && ` • ${f.rows?.length} ROWS`}
-                </span>
-              </div>
-              <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-                {(f.size / 1024).toFixed(1)} KB
-              </span>
-
-              <div className="flex items-center gap-1 shrink-0">
-                <button
-                  type="button"
-                  aria-label={`Configure ${f.name}`}
-                  onClick={() => setEditingFileId(f.id)}
-                  className="p-1.5 bg-secondary cursor-pointer border text-muted-foreground hover:bg-muted/50 hover:text-foreground rounded-md transition-colors"
-                >
-                  <Settings2 className="size-3.5" />
-                </button>
-                <button
-                  type="button"
-                  aria-label={`Remove ${f.name}`}
-                  onClick={() =>
-                    setStaged((p) => p.filter((item) => item.id !== f.id))
-                  }
-                  className="p-1.5 border bg-muted hover:bg-muted/50 cursor-pointer text-muted-foreground hover:text-foreground rounded-md transition-colors"
-                >
-                  <X className="size-3.5 text-red-500" />
-                </button>
-              </div>
-            </li>
-          ))}
-        </ul>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between px-1">
+            <span className="text-[13px] font-medium text-foreground">
+              {staged.length} file{staged.length !== 1 ? 's' : ''} staged
+            </span>
+            <div className="flex items-center gap-4">
+              {staged.some((f) => f.name.toLowerCase().endsWith('.pdf')) && (
+                <div className="flex items-center gap-1.5">
+                  <Switch
+                    checked={indexAllImages}
+                    onCheckedChange={(val) => {
+                      setIndexAllImages(val);
+                      setStaged((p) =>
+                        p.map((item) =>
+                          item.name.toLowerCase().endsWith('.pdf')
+                            ? { ...item, indexImages: val }
+                            : item,
+                        ),
+                      );
+                    }}
+                    id="global-index-images"
+                    className="scale-75 origin-right"
+                  />
+                  <Label
+                    htmlFor="global-index-images"
+                    className="text-[11px] text-muted-foreground cursor-pointer"
+                  >
+                    Index all PDF images
+                  </Label>
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => setStaged([])}
+                className="text-[11px] text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+              >
+                Clear All
+              </button>
+            </div>
+          </div>
+          <ul className="space-y-1.5 max-h-[350px] overflow-y-auto pr-1">
+            {staged.map((f) => (
+              <li
+                key={f.id}
+                className="flex flex-col gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0 flex-1 flex flex-col gap-0.5">
+                    <span className="truncate font-mono text-xs">{f.name}</span>
+                    <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
+                      {f.format === 'structured'
+                        ? 'STRUCTURED'
+                        : f.format === 'lines'
+                        ? 'SPLIT BY LINE'
+                        : 'PLAIN TEXT'}
+                      {f.format === 'structured' && ` • ${f.rows?.length} ROWS`}
+                      {f.indexAsTabular && ' • TABULAR'}
+                    </span>
+                  </div>
+                  <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                    {(f.size / 1024).toFixed(1)} KB
+                  </span>
+
+                  <div className="flex items-center gap-1 shrink-0">
+                    {/* Tabular indexing toggle for structured files */}
+                    {f.format === 'structured' && (
+                      <button
+                        type="button"
+                        aria-label="Toggle tabular indexing"
+                        title={
+                          f.indexAsTabular
+                            ? 'Tabular indexing ON'
+                            : 'Enable tabular indexing for data analysis'
+                        }
+                        onClick={() =>
+                          setStaged((p) =>
+                            p.map((item) =>
+                              item.id === f.id
+                                ? { ...item, indexAsTabular: !item.indexAsTabular }
+                                : item,
+                            ),
+                          )
+                        }
+                        className={cn(
+                          'p-1.5 border rounded-md transition-colors cursor-pointer',
+                          f.indexAsTabular
+                            ? 'bg-primary/10 border-primary/30 text-primary'
+                            : 'bg-secondary text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+                        )}
+                      >
+                        <Database className="size-3.5" />
+                      </button>
+                    )}
+                    {/* Image indexing toggle for PDF files */}
+                    {f.name.toLowerCase().endsWith('.pdf') && (
+                      <TooltipProvider delay={0}>
+                        <Tooltip>
+                          <TooltipTrigger
+                            type="button"
+                            aria-label="Toggle image indexing"
+                            onClick={() =>
+                              setStaged((p) =>
+                                p.map((item) =>
+                                  item.id === f.id
+                                    ? { ...item, indexImages: !item.indexImages }
+                                    : item,
+                                ),
+                              )
+                            }
+                            className={cn(
+                              'p-1.5 border rounded-md transition-colors cursor-pointer',
+                              f.indexImages
+                                ? 'bg-blue-100 border-blue-300 text-blue-600 dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-400'
+                                : 'bg-secondary text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+                            )}
+                          >
+                            <ImageIcon className="size-3.5" />
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            <p className="text-xs">
+                              {f.indexImages
+                                ? 'Image indexing ON'
+                                : 'Extract and index images from PDF'}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                    <button
+                      type="button"
+                      aria-label={`Configure ${f.name}`}
+                      onClick={() => setEditingFileId(f.id)}
+                      className="p-1.5 bg-secondary cursor-pointer border text-muted-foreground hover:bg-muted/50 hover:text-foreground rounded-md transition-colors"
+                    >
+                      <Settings2 className="size-3.5" />
+                    </button>
+                    <button
+                      type="button"
+                      aria-label={`Remove ${f.name}`}
+                      onClick={() => setStaged((p) => p.filter((item) => item.id !== f.id))}
+                      className="p-1.5 border bg-muted hover:bg-muted/50 cursor-pointer text-muted-foreground hover:text-foreground rounded-md transition-colors"
+                    >
+                      <X className="size-3.5 text-red-500" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Tabular preview for structured files with tabular indexing */}
+                {f.format === 'structured' && f.indexAsTabular && f.rows && (
+                  <div className="min-w-0 w-full mt-1">
+                    <TabularPreview rows={f.rows} maxPreviewRows={5} />
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
       )}
 
       {progress && (
         <div className="space-y-2">
           <div className="flex items-center justify-between text-xs text-muted-foreground">
-            <span>Uploading documents...</span>
+            <span>{progress.message || 'Processing...'}</span>
             <span className="tabular-nums font-mono">
               {progress.current} / {progress.total}
             </span>
@@ -390,21 +704,16 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
       )}
 
       <Button onClick={ingest} disabled={saving || staged.length === 0}>
-        {saving ? (
-          <Loader2 className="size-4 animate-spin" />
-        ) : (
-          <FileUp className="size-4" />
-        )}
+        {saving ? <Loader2 className="size-4 animate-spin" /> : <FileUp className="size-4" />}
         {saving && progress
           ? `Adding ${progress.current} of ${progress.total}`
-          : `Add ${staged.length > 0 ? staged.length : ""} file${staged.length === 1 ? "" : "s"} to corpus`}
+          : `Add ${staged.length > 0 ? staged.length : ''} file${
+              staged.length === 1 ? '' : 's'
+            } to corpus`}
       </Button>
 
       {/* Mapping Dialog */}
-      <Dialog
-        open={!!editingFile}
-        onOpenChange={(open) => !open && setEditingFileId(null)}
-      >
+      <Dialog open={!!editingFile} onOpenChange={(open) => !open && setEditingFileId(null)}>
         <DialogContent className="sm:max-w-xl max-h-[80%]">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
@@ -414,17 +723,18 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
           </DialogHeader>
 
           {editingFile && (
-            <div className="py-4 space-y-6 overflow-y-auto pr-2" style={{ maxHeight: "calc(80vh - 120px)" }}>
-              {editingFile.format === "structured" ? (
+            <div
+              className="py-4 space-y-6 overflow-y-auto pr-2"
+              style={{ maxHeight: 'calc(80vh - 120px)' }}
+            >
+              {editingFile.format === 'structured' ? (
                 <>
                   <div className="space-y-4">
                     <div className="space-y-2">
                       <Label>Title Column</Label>
                       <Select
                         value={editingFile.titleKey}
-                        onValueChange={(val) =>
-                          updateEditingFile({ titleKey: val || undefined })
-                        }
+                        onValueChange={(val) => updateEditingFile({ titleKey: val || undefined })}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select column" />
@@ -450,8 +760,8 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                             type="button"
                             className="text-[10px] uppercase font-medium text-primary hover:underline cursor-pointer"
                             onClick={() => {
-                              updateEditingFile({ 
-                                contentKeys: editingFile.keys || []
+                              updateEditingFile({
+                                contentKeys: editingFile.keys || [],
                               });
                             }}
                           >
@@ -470,18 +780,13 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                         </div>
                       </div>
                       <p className="text-[11px] text-muted-foreground mb-2 -mt-1">
-                        Selected columns will be combined to form the searchable
-                        content.
+                        Selected columns will be combined to form the searchable content.
                       </p>
                       <div className="max-h-[120px] overflow-y-auto space-y-2 pr-2">
                         {editingFile.keys?.map((k) => {
-                          const isSelected =
-                            editingFile.contentKeys?.includes(k);
+                          const isSelected = editingFile.contentKeys?.includes(k);
                           return (
-                            <div
-                              key={k}
-                              className="flex items-center space-x-2"
-                            >
+                            <div key={k} className="flex items-center space-x-2">
                               <Checkbox
                                 id={`content-${k}`}
                                 checked={isSelected}
@@ -493,9 +798,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                                     });
                                   } else {
                                     updateEditingFile({
-                                      contentKeys: current.filter(
-                                        (x) => x !== k,
-                                      ),
+                                      contentKeys: current.filter((x) => x !== k),
                                     });
                                   }
                                 }}
@@ -511,30 +814,29 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                         })}
                       </div>
 
-                      {editingFile.contentKeys &&
-                        editingFile.contentKeys.length > 1 && (
-                          <div className="pt-2">
-                            <Label className="mb-2 block">Separator</Label>
-                            <Select
-                              value={editingFile.contentSeparator || " "}
-                              onValueChange={(val) =>
-                                updateEditingFile({
-                                  contentSeparator: val || undefined,
-                                })
-                              }
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="Select separator" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value=" ">Space</SelectItem>
-                                <SelectItem value=", ">Comma</SelectItem>
-                                <SelectItem value="\n">Newline</SelectItem>
-                                <SelectItem value=" - ">Hyphen</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-                        )}
+                      {editingFile.contentKeys && editingFile.contentKeys.length > 1 && (
+                        <div className="pt-2">
+                          <Label className="mb-2 block">Separator</Label>
+                          <Select
+                            value={editingFile.contentSeparator || ' '}
+                            onValueChange={(val) =>
+                              updateEditingFile({
+                                contentSeparator: val || undefined,
+                              })
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select separator" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value=" ">Space</SelectItem>
+                              <SelectItem value=", ">Comma</SelectItem>
+                              <SelectItem value="\n">Newline</SelectItem>
+                              <SelectItem value=" - ">Hyphen</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      )}
                     </div>
 
                     <div className="space-y-3 pt-2 border-t border-border">
@@ -545,9 +847,10 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                             type="button"
                             className="text-[10px] uppercase font-medium text-primary hover:underline cursor-pointer"
                             onClick={() => {
-                              const availableKeys = editingFile.keys?.filter(k => k !== editingFile.titleKey) || [];
-                              updateEditingFile({ 
-                                metadataKeys: availableKeys
+                              const availableKeys =
+                                editingFile.keys?.filter((k) => k !== editingFile.titleKey) || [];
+                              updateEditingFile({
+                                metadataKeys: availableKeys,
                               });
                             }}
                           >
@@ -570,30 +873,23 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                       </p>
                       <div className="max-h-[120px] overflow-y-auto space-y-2 pr-2">
                         {editingFile.keys?.map((k) => {
-                          const isSelected =
-                            editingFile.metadataKeys?.includes(k);
+                          const isSelected = editingFile.metadataKeys?.includes(k);
                           const disabled = k === editingFile.titleKey;
                           return (
-                            <div
-                              key={k}
-                              className="flex items-center space-x-2"
-                            >
+                            <div key={k} className="flex items-center space-x-2">
                               <Checkbox
                                 id={`meta-${k}`}
                                 checked={isSelected}
                                 disabled={disabled}
                                 onCheckedChange={(checked) => {
-                                  const current =
-                                    editingFile.metadataKeys || [];
+                                  const current = editingFile.metadataKeys || [];
                                   if (checked) {
                                     updateEditingFile({
                                       metadataKeys: [...current, k],
                                     });
                                   } else {
                                     updateEditingFile({
-                                      metadataKeys: current.filter(
-                                        (x) => x !== k,
-                                      ),
+                                      metadataKeys: current.filter((x) => x !== k),
                                     });
                                   }
                                 }}
@@ -601,11 +897,11 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                               <label
                                 htmlFor={`meta-${k}`}
                                 className={cn(
-                                  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-                                  disabled && "text-muted-foreground",
+                                  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+                                  disabled && 'text-muted-foreground',
                                 )}
                               >
-                                {k} {disabled && "(used)"}
+                                {k} {disabled && '(used)'}
                               </label>
                             </div>
                           );
@@ -624,10 +920,10 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                       </p>
                     </div>
                     <Switch
-                      checked={editingFile.format === "lines"}
+                      checked={editingFile.format === 'lines'}
                       onCheckedChange={(checked) =>
                         updateEditingFile({
-                          format: checked ? "lines" : "plain",
+                          format: checked ? 'lines' : 'plain',
                         })
                       }
                     />
@@ -645,7 +941,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                     onClick={() => {
                       const current = editingFile.globalMetadata || [];
                       updateEditingFile({
-                        globalMetadata: [...current, { key: "", value: "" }],
+                        globalMetadata: [...current, { key: '', value: '' }],
                       });
                     }}
                   >
@@ -653,8 +949,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                   </Button>
                 </div>
                 <p className="text-[11px] text-muted-foreground mb-2">
-                  Apply custom key-value pairs to every document generated from
-                  this file.
+                  Apply custom key-value pairs to every document generated from this file.
                 </p>
                 <div className="space-y-2">
                   {(editingFile.globalMetadata || []).map((gm, i) => (
@@ -693,8 +988,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
                       </Button>
                     </div>
                   ))}
-                  {(!editingFile.globalMetadata ||
-                    editingFile.globalMetadata.length === 0) && (
+                  {(!editingFile.globalMetadata || editingFile.globalMetadata.length === 0) && (
                     <p className="text-xs text-muted-foreground italic text-center py-2">
                       No custom metadata.
                     </p>
@@ -704,7 +998,7 @@ export function UploadPanel({ onAdded }: { onAdded: () => void }) {
             </div>
           )}
 
-          <DialogFooter>
+          <DialogFooter className="pb-2! bg-muted ">
             <Button onClick={() => setEditingFileId(null)}>Done</Button>
           </DialogFooter>
         </DialogContent>