Revert removing/fix CSV exports

src/components/Table.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { VendorInfo } from "../dataFormat";
 import { clearState, useStateItem } from "../state";
 import { useMultiColumnSync, type CustomTdProps } from "./utils/useMultiColumnSync";
-import { PlusIcon, XIcon } from "lucide-react";
+import { CopyIcon, PlusIcon, XIcon } from "lucide-react";
 import RunQueryButton from "./RunQueryButton";
 import CurrencyPicker from "./CurrencyPicker";
 import AddButton from "./AddButton";
@@ -56,11 +56,13 @@ function Toolbar({
     addQueryOpen,
     setAddQueryOpen,
     scrapedAt,
+    onCopyCSV,
 }: {
     isLlm: boolean;
     addQueryOpen: boolean;
     setAddQueryOpen: (open: boolean) => void;
     scrapedAt?: string;
+    onCopyCSV: () => void;
 }) {
     const formattedDate = scrapedAt
         ? new Date(scrapedAt).toLocaleDateString("en-US", {
@@ -96,6 +98,15 @@ function Toolbar({
                         Refreshed {formattedDate}
                     </span>
                 )}
+                {/* Copy table as CSV */}
+                <button
+                    onClick={onCopyCSV}
+                    title="Copy visible table data as CSV"
+                    className="flex items-center gap-1 px-2 py-1.5 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                    <CopyIcon className="w-3.5 h-3.5" />
+                    CSV
+                </button>
                 <RunQueryButton />
                 <button
                     onClick={() => setAddQueryOpen(!addQueryOpen)}
@@ -309,6 +320,89 @@ export default function Table({
         models[0]?.id
     );
 
+    // Copy visible table as CSV
+    const handleCopyCSV = React.useCallback(() => {
+        try {
+            const table = document.querySelector("table");
+            if (!table) return;
+
+            const isElementVisible = (el: HTMLElement): boolean => {
+                const style = window.getComputedStyle(el);
+                if (
+                    style.display === "none" ||
+                    style.visibility === "hidden" ||
+                    style.opacity === "0"
+                ) {
+                    return false;
+                }
+                return el.getClientRects().length > 0;
+            };
+
+            const getVisibleCellText = (cell: HTMLElement): string => {
+                const overlaySelector = [
+                    "[hidden]",
+                    '[aria-hidden="true"]',
+                    '[role="tooltip"]',
+                    '[role="dialog"]',
+                    '[aria-modal="true"]',
+                    '[data-state="closed"]',
+                    '[data-headlessui-state="closed"]',
+                ].join(",");
+                const controlSelector =
+                    "button, input, select, textarea, svg, [contenteditable='true']";
+
+                const pieces: string[] = [];
+                const walker = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT);
+                let node = walker.nextNode();
+
+                while (node) {
+                    const raw = node.textContent ?? "";
+                    const text = raw.replace(/\s+/g, " ").trim();
+                    if (text) {
+                        const parent = node.parentElement;
+                        if (
+                            parent &&
+                            !parent.closest(overlaySelector) &&
+                            !parent.closest(controlSelector) &&
+                            isElementVisible(parent)
+                        ) {
+                            pieces.push(text);
+                        }
+                    }
+                    node = walker.nextNode();
+                }
+
+                return pieces.join(" ").replace(/\s+/g, " ").trim();
+            };
+
+            const rows = Array.from(
+                table.querySelectorAll(
+                    ":scope > thead > tr, :scope > tbody > tr, :scope > tfoot > tr"
+                )
+            ).filter((row) => isElementVisible(row as HTMLElement));
+            const csvLines = rows
+                .map((row) => {
+                    const cells = Array.from(row.querySelectorAll(":scope > th, :scope > td"));
+                    return cells
+                        .map((cell) => {
+                            const text = getVisibleCellText(cell as HTMLElement).replace(
+                                /"/g,
+                                '""'
+                            );
+                            return `"${text}"`;
+                        })
+                        .join(",");
+                })
+                .filter((line) => line.replace(/["\s,]/g, "") !== "");
+            navigator.clipboard.writeText(csvLines.join("\n")).then(() => {
+                setCsvCopied(true);
+                setTimeout(() => setCsvCopied(false), 2000);
+            });
+        } catch {
+            // clipboard not available
+        }
+    }, []);
+
     return (
         <React.StrictMode>
             <div className="flex flex-col h-full">
@@ -317,6 +411,7 @@ export default function Table({
                     addQueryOpen={addQueryOpen}
                     setAddQueryOpen={setAddQueryOpen}
                     scrapedAt={scrapedAt}
+                    onCopyCSV={handleCopyCSV}
                 />
                 {csvCopied && (
                     <div className="px-4 py-1 text-xs text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-950 border-b border-green-200 dark:border-green-800">