From daf336c2bc3d55648663e8517c8a4f769a0c8cc6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 01:04:03 +0000
Subject: [PATCH] Record fields: tap-anywhere-to-copy on primitive values

Each primitive field value (string/number/boolean) is now wrapped in a
CopyableValue: tapping the value anywhere copies the full text to the
clipboard. A faint Copy icon trails the text as the affordance; on copy
it briefly turns into a Check in the accent color.

Long strings are still truncated at 280 chars in the display, but the
copy grabs the full untruncated value. Null and the expand chips for
object/array values are unaffected.
---
 src/components/RecordPreview.tsx | 61 +++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/RecordPreview.tsx b/src/components/RecordPreview.tsx
index 0677a12..1c86cef 100644
--- a/src/components/RecordPreview.tsx
+++ b/src/components/RecordPreview.tsx
@@ -364,11 +364,64 @@ function FieldPrimitive({ value }: { value: unknown }) {
   if (value === null) {
     return <span style={{ color: 'var(--text-tertiary)' }}>null</span>;
   }
-  if (typeof value === 'string') {
-    const display = value.length > 280 ? `${value.substring(0, 280)}…` : value;
-    return <>{display}</>;
+  const full = typeof value === 'string' ? value : String(value);
+  const display =
+    typeof value === 'string' && value.length > 280
+      ? `${value.substring(0, 280)}…`
+      : full;
+  return <CopyableValue display={display} copy={full} />;
+}
+
+/**
+ * Tap-anywhere-to-copy wrapper for a primitive field value. Renders the
+ * text inline with a faint copy icon trailing it; clicking copies the
+ * full (untruncated) value to the clipboard and flashes a check mark.
+ */
+function CopyableValue({ display, copy }: { display: string; copy: string }) {
+  const [copied, setCopied] = useState(false);
+  async function onClick() {
+    await writeToClipboard(copy);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+  function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick();
+    }
   }
-  return <>{String(value)}</>;
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      aria-label={copied ? 'Copied' : 'Click to copy'}
+      title={copied ? 'Copied!' : 'Click to copy'}
+      style={{
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        outline: 'none',
+        transition: 'color 0.2s ease',
+        color: copied ? 'var(--text-accent)' : 'inherit',
+      }}
+    >
+      {display}
+      <span
+        style={{
+          marginLeft: '0.35rem',
+          display: 'inline-block',
+          verticalAlign: 'middle',
+          color: copied ? 'var(--text-accent)' : 'var(--text-tertiary)',
+          opacity: copied ? 1 : 0.35,
+          transition: 'opacity 0.2s ease, color 0.2s ease',
+        }}
+        aria-hidden
+      >
+        {copied ? <Check size={12} /> : <Copy size={12} />}
+      </span>
+    </div>
+  );
 }
 
 function isExpandable(v: unknown): boolean {
-- 
2.51.2