Add a more prominent button to copy JSON (#186)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: stanch

ui/src/components/CopyButton.tsx

@@ -4,9 +4,10 @@ import { Button } from '@/components/ui/button'
 
 type CopyButtonProps = {
   value: any
+  alwaysVisible?: boolean
 }
 
-export function CopyButton({ value }: CopyButtonProps) {
+export function CopyButton({ value, alwaysVisible = false }: CopyButtonProps) {
   const [copied, setCopied] = useState(false)
 
   const handleCopy = () => {
@@ -20,7 +21,7 @@ export function CopyButton({ value }: CopyButtonProps) {
       variant="ghost"
       size="sm"
       onClick={handleCopy}
-      className="h-4 w-4 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+      className={`h-4 w-4 p-0 transition-opacity ${alwaysVisible ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
       title="Copy to clipboard"
     >
       {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}

ui/src/components/JsonSidePanel.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button'
 import { JsonViewer } from '@/components/JsonViewer'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { TruncatedColumnName } from '@/components/TruncatedColumnName'
+import { CopyButton } from '@/components/CopyButton'
 import { createColumnMetadata } from '@/utils/column-metadata'
 
 const STORAGE_KEY = 'snowplow-micro-json-panel-width'
@@ -110,11 +111,14 @@ export function JsonSidePanel({
         {/* Header with title and close button */}
         <div className="bg-background">
           <div className="flex items-center justify-between">
-            <TruncatedColumnName
-              columnMetadata={createColumnMetadata(title)}
-              iconSize="md"
-              className="text-lg font-light truncate"
-            />
+            <div className="flex items-center gap-2">
+              <TruncatedColumnName
+                columnMetadata={createColumnMetadata(title)}
+                iconSize="md"
+                className="text-lg font-light truncate"
+              />
+              <CopyButton value={value} alwaysVisible />
+            </div>
             <Button
               variant="ghost"
               size="sm"