feat(grid): copy a long cell value without opening the viewer

src/components/grid/CellViewerModal.tsx

@@ -3,7 +3,7 @@ import { Check, Copy, Download, Lock, Pencil, X } from "lucide-react";
 import type { editor } from "monaco-editor";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { format } from "sql-formatter";
-import { detectMime, formatBytes } from "../../lib/blob";
+import { detectMime, formatBytes, toHex } from "../../lib/blob";
 import { useThemeStore } from "../../stores/themeStore";
 import { BlobViewer } from "./BlobViewer";
 
@@ -162,12 +162,8 @@ export function CellViewerModal({
   if (!isOpen) return null;
 
   const handleCopy = async () => {
-    // Bytes go to the clipboard as hex rather than as `137,80,78,71`. Pasting
-    // a byte array into anything is useless; hex at least round-trips through
-    // UNHEX() (#401).
-    await navigator.clipboard.writeText(
-      bytes ? bytes.map((b) => b.toString(16).padStart(2, "0")).join("") : viewerContent,
-    );
+    // Bytes go to the clipboard as hex rather than as `137,80,78,71` (#401).
+    await navigator.clipboard.writeText(bytes ? toHex(bytes) : viewerContent);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };

src/components/grid/TruncatedCell.tsx

@@ -1,6 +1,6 @@
-import { Maximize2 } from "lucide-react";
+import { Check, Copy, Maximize2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { describeBlob, isBytes } from "../../lib/blob";
+import { describeBlob, isBytes, toHex } from "../../lib/blob";
 import { isLongTextSqlType } from "../../lib/sql-types";
 
 interface Props {
@@ -101,6 +101,27 @@ export function TruncatedCell({
     onViewFull(value === null || value === undefined ? null : formatted, columnName);
   };
 
+  // Copy sits beside the expand button, so a long value — a SHOW CREATE TABLE
+  // statement, say — can be taken without opening the viewer first (#739).
+  // It copies the stored text as-is, not the viewer's reformatted version;
+  // bytes go as hex, the same as the viewer's Copy.
+  const [copied, setCopied] = useState(false);
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => {
+    if (copyTimer.current) clearTimeout(copyTimer.current);
+  }, []);
+  const copyValue = () => {
+    const text = binary ? toHex(binary) : formatted;
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), 1500);
+    }, () => {});
+  };
+
+  const iconButton =
+    "shrink-0 rounded p-0.5 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)] focus-visible:opacity-100 group-hover:opacity-100";
+
   return (
     <div className="group flex min-w-0 items-center gap-1">
       <div
@@ -111,14 +132,28 @@ export function TruncatedCell({
       >
         {formatted}
       </div>
+      {showIcon && !isNull && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            copyValue();
+          }}
+          className={copied ? iconButton.replace("opacity-0", "opacity-100") : iconButton}
+          title={copied ? "Copied" : "Copy value"}
+          aria-label={copied ? "Copied" : "Copy value"}
+        >
+          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+        </button>
+      )}
       {showIcon && (
         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             openViewer();
           }}
-          className="shrink-0 rounded p-0.5 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)] focus-visible:opacity-100 group-hover:opacity-100"
+          className={iconButton}
           title="View full content"
           aria-label="View full content"
         >

src/components/grid/__tests__/TruncatedCell.test.tsx

@@ -342,3 +342,62 @@ describe("binary cells (#401)", () => {
     expect(onViewFull).toHaveBeenCalledWith(null, "avatar", PNG);
   });
 });
+
+describe("TruncatedCell copy (#739)", () => {
+  function stubClipboard() {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    return writeText;
+  }
+  const getCopyButton = (container: HTMLElement) => container.querySelector("button[aria-label=\"Copy value\"]");
+
+  it("copies a long value as stored, without opening the viewer", async () => {
+    const writeText = stubClipboard();
+    const onViewFull = vi.fn();
+    const ddl = "CREATE TABLE `t` (\n  `id` int NOT NULL,\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB";
+    const { container } = render(
+      <TruncatedCell value={ddl} columnName="Create Table" dataType="text" onViewFull={onViewFull} />,
+    );
+    const copy = getCopyButton(container);
+    expect(copy).not.toBeNull();
+    await act(async () => {
+      fireEvent.click(copy!);
+    });
+    expect(writeText).toHaveBeenCalledWith(ddl);
+    expect(onViewFull).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+  });
+
+  it("copies bytes as hex, the same as the viewer", async () => {
+    const writeText = stubClipboard();
+    const { container } = render(
+      <TruncatedCell value={[0x89, 0x50, 0x0a]} columnName="data" onViewFull={vi.fn()} />,
+    );
+    await act(async () => {
+      fireEvent.click(getCopyButton(container)!);
+    });
+    expect(writeText).toHaveBeenCalledWith("89500a");
+  });
+
+  it("is offered only where the expand button is", () => {
+    const { container } = render(
+      <TruncatedCell value="short" columnName="col" dataType="varchar" onViewFull={vi.fn()} />,
+    );
+    expect(getCopyButton(container)).toBeNull();
+    expect(getIconButton(container)).toBeNull();
+  });
+
+  it("copying does not also click the row", async () => {
+    stubClipboard();
+    const onRowClick = vi.fn();
+    const { container } = render(
+      <div onClick={onRowClick}>
+        <TruncatedCell value={"x".repeat(40)} columnName="col" dataType="text" onViewFull={vi.fn()} />
+      </div>,
+    );
+    await act(async () => {
+      fireEvent.click(getCopyButton(container)!);
+    });
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+});

src/lib/blob.ts

@@ -22,6 +22,14 @@ export function isBytes(value: unknown): value is number[] {
   return Array.isArray(value) && value.every((b) => typeof b === "number");
 }
 
+/**
+ * Bytes as one lowercase hex string, the form a BLOB is copied in. A byte
+ * array pasted anywhere is useless; hex round-trips through UNHEX() (#401).
+ */
+export function toHex(bytes: number[]): string {
+  return bytes.map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
 const UNITS = ["B", "KB", "MB", "GB"];
 
 /** A byte count someone can read at a glance. */