From 036f3d120911d8f92b239361cfe84b4659d9365d Mon Sep 17 00:00:00 2001
From: egeoztass <egeoztas@sabanciuniv.edu>
Date: Fri, 14 Aug 2026 18:14:21 +0300
Subject: [PATCH 1/2] fix: make truncated KeyValueGrid values readable and
 copyable

Long values in the event details popup are truncated with no way to read or
copy the rest. Two gaps:

- The title tooltip was only set for string values, so objects (rendered as
  JSON) and numbers got no tooltip at all.
- The popup's two grids never passed `copyable`, so no copy button rendered.

Adds a shared toStringValue() used for both the tooltip and the clipboard,
replacing the inline stringify in the copy handler. Booleans and 0 now
stringify rather than being dropped, and circular objects degrade to no
tooltip instead of throwing.

Closes #381
---
 .../src/components/ui/key-value-grid.tsx      | 44 +++++++++++++------
 apps/start/src/modals/event-details.tsx       |  2 +
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/apps/start/src/components/ui/key-value-grid.tsx b/apps/start/src/components/ui/key-value-grid.tsx
index 213ac9736..da3df7850 100644
--- a/apps/start/src/components/ui/key-value-grid.tsx
+++ b/apps/start/src/components/ui/key-value-grid.tsx
@@ -28,6 +28,35 @@ interface KeyValueGridProps {
   copyable?: boolean;
 }
 
+/**
+ * The value cell truncates, so the full value is only reachable through the native
+ * tooltip and the copy button. Both need a string, and objects render as JSON here,
+ * so stringify them rather than leaving the value unreadable.
+ */
+export function toStringValue(value: unknown): string | undefined {
+  if (value === null || value === undefined) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return undefined;
+    }
+  }
+
+  return String(value);
+}
+
 export function KeyValueGrid({
   data,
   columns = 1,
@@ -102,18 +131,7 @@ export function KeyValueGrid({
             <button
               onClick={(e) => {
                 e.stopPropagation();
-                if (typeof item.value === 'object') {
-                  try {
-                    const value = JSON.stringify(item.value);
-                    clipboard(value);
-                  }
-                  catch {
-                    clipboard(item.value);
-                  }
-                }
-                else {
-                  clipboard(item.value);
-                }
+                clipboard(toStringValue(item.value) ?? item.value);
               }}
               type="button"
               className="absolute left-2 top-1/2 -translate-y-1/2 -translate-x-full opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-200 ease-out bg-background border border-border rounded p-1 shadow-sm z-10"
@@ -129,7 +147,7 @@ export function KeyValueGrid({
               'text-right text-sm font-mono truncate min-w-0 max-w-[60%]',
               valueClassName,
             )}
-            title={typeof item.value === 'string' ? item.value : undefined}
+            title={toStringValue(item.value)}
           >
             {renderValue ? renderValue(item) : defaultRenderValue(item)}
           </div>
diff --git a/apps/start/src/modals/event-details.tsx b/apps/start/src/modals/event-details.tsx
index 5b0833096..31d8875c1 100644
--- a/apps/start/src/modals/event-details.tsx
+++ b/apps/start/src/modals/event-details.tsx
@@ -286,6 +286,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
             {propertiesMode === 'table' && (
             <KeyValueGrid
               columns={1}
+              copyable
               data={properties}
               onItemClick={(item) => {
                 popModal();
@@ -310,6 +311,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
           </div>
           <KeyValueGrid
             columns={1}
+            copyable
             data={data}
             onItemClick={(item) => {
               const isFilterable = item.value && (filterable as any)[item.name];

From 1244bb5bb7b4fe27dd8de4d8ff1db9b64a8a37a6 Mon Sep 17 00:00:00 2001
From: egeoztass <egeoztas@sabanciuniv.edu>
Date: Sat, 15 Aug 2026 01:29:31 +0300
Subject: [PATCH 2/2] fix: don't hand a nullish value to clipboard()

clipboard() calls value.toString() unguarded, so the `?? item.value`
fallback threw on null and undefined rows. Previously those took the
JSON.stringify path (typeof null === 'object') and copied "null".

Compute the string once per row and only render the copy button when
there is something to copy, so the button is never dead and never throws.
---
 apps/start/src/components/ui/key-value-grid.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/start/src/components/ui/key-value-grid.tsx b/apps/start/src/components/ui/key-value-grid.tsx
index da3df7850..01180dd42 100644
--- a/apps/start/src/components/ui/key-value-grid.tsx
+++ b/apps/start/src/components/ui/key-value-grid.tsx
@@ -109,7 +109,10 @@ export function KeyValueGrid({
     <div
       className={cn('grid card overflow-hidden', gridCols[columns], className)}
     >
-      {data.map((item, index) => (
+      {data.map((item, index) => {
+        const stringValue = toStringValue(item.value);
+
+        return (
         <div
           key={`${item.name}-${index}`}
           className={cn(
@@ -127,11 +130,11 @@ export function KeyValueGrid({
           tabIndex={onItemClick ? 0 : undefined}
           role={onItemClick ? 'button' : undefined}
         >
-          {copyable && (
+          {copyable && stringValue !== undefined && (
             <button
               onClick={(e) => {
                 e.stopPropagation();
-                clipboard(toStringValue(item.value) ?? item.value);
+                clipboard(stringValue);
               }}
               type="button"
               className="absolute left-2 top-1/2 -translate-y-1/2 -translate-x-full opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-200 ease-out bg-background border border-border rounded p-1 shadow-sm z-10"
@@ -147,12 +150,13 @@ export function KeyValueGrid({
               'text-right text-sm font-mono truncate min-w-0 max-w-[60%]',
               valueClassName,
             )}
-            title={toStringValue(item.value)}
+            title={stringValue}
           >
             {renderValue ? renderValue(item) : defaultRenderValue(item)}
           </div>
         </div>
-      ))}
+        );
+      })}
 
       {data.length === 0 && (
         <div className="text-center text-muted-foreground py-8 col-span-full">