From 8bd5f8c195420e6873f805e6de1402179aeed78c Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Mon, 17 Aug 2026 23:03:27 +0100
Subject: [PATCH] polish(webapp): tighten smart-column dialog copy and display
 popover layout

- Trim the Add smart column dialog copy: one-line display-only callout, example-only path hint, drop redundant field helpers, remove an em dash from the sample header.
- Move the sample header and run picker outside the box to match the Preview header, and collapse the doubled box into one panel.
- Clear the path and label fields when the source changes.
- Rework the Display popover smart-column row: labels stay flush-left, the bolt marker sits inline after the label, and the edit/remove/grip controls are a right-aligned group with larger hit targets.
---
 .../runs/v3/AddSmartColumnDialog.tsx          | 87 ++++++++++---------
 .../components/runs/v3/RunsDisplayOptions.tsx | 61 +++++++------
 .../components/runs/v3/SmartColumnSample.tsx  |  2 +-
 3 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx b/apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx
index cbf9efd23..1415cb9f8 100644
--- a/apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx
@@ -94,6 +94,14 @@ export function AddSmartColumnDialog({
     setSampleIndex(0);
   }, [source]);
 
+  const handleSourceChange = (next: SmartColumnSource) => {
+    if (next === source) return;
+    setSource(next);
+    setPath("");
+    setLabel("");
+    setLabelEdited(false);
+  };
+
   const effectiveLabel = labelEdited ? label : labelFromPath(path);
 
   const sampleLoaded = sample.data !== undefined && sample.state === "idle";
@@ -145,8 +153,7 @@ export function AddSmartColumnDialog({
         <DialogHeader>{editing ? "Edit smart column" : "Add smart column"}</DialogHeader>
         <div className="flex flex-col gap-5 p-1">
           <Callout variant="info">
-            Display only. A smart column shows you a value from a run, but you can't sort or filter
-            the list by it. To narrow the list, use tags or the query editor.
+            Smart columns are display only. You can't sort or filter by them.
           </Callout>
 
           <div className="grid grid-cols-1 gap-5 md:grid-cols-[minmax(0,1fr)_260px_220px]">
@@ -160,7 +167,7 @@ export function AddSmartColumnDialog({
                       label={card.label}
                       description={card.description}
                       selected={source === card.value}
-                      onSelect={() => setSource(card.value)}
+                      onSelect={() => handleSourceChange(card.value)}
                     />
                   ))}
                 </div>
@@ -175,10 +182,9 @@ export function AddSmartColumnDialog({
                     placeholder="$.order.total"
                     spellCheck={false}
                   />
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    Dot and bracket notation, e.g. <code>$.order.total</code> or{" "}
-                    <code>$.items[0].sku</code>. Use <code>.length</code> for an array, string, or
-                    key count.
+                  <Paragraph variant="extra-small" className="text-balance text-text-dimmed">
+                    e.g. <code>$.order.total</code>, <code>$.items[0].sku</code>,{" "}
+                    <code>$.items.length</code>
                   </Paragraph>
                 </div>
                 <div className="flex flex-col gap-1.5">
@@ -191,9 +197,6 @@ export function AddSmartColumnDialog({
                     }}
                     placeholder={labelFromPath(path)}
                   />
-                  <Paragraph variant="extra-small" className="text-text-dimmed">
-                    Defaults to the last part of the path.
-                  </Paragraph>
                 </div>
               </div>
 
@@ -216,16 +219,12 @@ export function AddSmartColumnDialog({
                     </button>
                   ))}
                 </div>
-                <Paragraph variant="extra-small" className="text-text-dimmed">
-                  Number right-aligns the column and uses tabular figures. Anything that doesn't
-                  parse falls back to text.
-                </Paragraph>
               </div>
             </div>
 
-            <div className="flex flex-col gap-1.5 self-start rounded-lg border border-grid-dimmed bg-background-dimmed p-3">
-              <div className="flex items-center justify-between gap-2">
-                <Paragraph variant="extra-extra-small/dimmed/caps">Sample — {source}</Paragraph>
+            <div className="flex flex-col gap-1.5 self-start">
+              <div className="flex h-5 items-center justify-between gap-2">
+                <Paragraph variant="extra-extra-small/dimmed/caps">Sample {source}</Paragraph>
                 {usable.length > 1 && (
                   <SampleRunPicker
                     index={activeIndex}
@@ -235,33 +234,37 @@ export function AddSmartColumnDialog({
                   />
                 )}
               </div>
-              {!sampleLoaded ? (
-                <Paragraph variant="extra-small" className="text-text-dimmed">
-                  Loading…
-                </Paragraph>
-              ) : activeSample ? (
-                <SmartColumnSample
-                  value={activeSample.value}
-                  activePath={path.trim()}
-                  onSelectPath={setPath}
-                />
-              ) : runCount === 0 ? (
-                <Paragraph variant="extra-small" className="text-text-dimmed">
-                  No runs to sample.
-                </Paragraph>
-              ) : anyOffloaded ? (
-                <Paragraph variant="extra-small" className="text-text-dimmed">
-                  Recent {source}s are offloaded to object storage, too large to sample here.
-                </Paragraph>
-              ) : (
-                <Paragraph variant="extra-small" className="text-text-dimmed">
-                  No recent run has a {source} value to sample.
-                </Paragraph>
-              )}
+              <div className="overflow-hidden rounded-lg border border-grid-dimmed bg-charcoal-900 p-3">
+                {!sampleLoaded ? (
+                  <Paragraph variant="extra-small" className="text-text-dimmed">
+                    Loading…
+                  </Paragraph>
+                ) : activeSample ? (
+                  <SmartColumnSample
+                    value={activeSample.value}
+                    activePath={path.trim()}
+                    onSelectPath={setPath}
+                  />
+                ) : runCount === 0 ? (
+                  <Paragraph variant="extra-small" className="text-text-dimmed">
+                    No runs to sample yet.
+                  </Paragraph>
+                ) : anyOffloaded ? (
+                  <Paragraph variant="extra-small" className="text-text-dimmed">
+                    Recent {source}s are too large to sample here.
+                  </Paragraph>
+                ) : (
+                  <Paragraph variant="extra-small" className="text-text-dimmed">
+                    No recent run has a {source} to sample.
+                  </Paragraph>
+                )}
+              </div>
             </div>
 
             <div className="flex flex-col gap-1.5 self-start">
-              <Paragraph variant="extra-extra-small/dimmed/caps">Preview</Paragraph>
+              <div className="flex h-5 items-center">
+                <Paragraph variant="extra-extra-small/dimmed/caps">Preview</Paragraph>
+              </div>
               <SmartColumnPreview rows={perRun} def={previewDef} loaded={sampleLoaded} />
             </div>
           </div>
@@ -377,7 +380,7 @@ function SmartColumnPreview({
         {!loaded ? (
           <div className="px-2.5 py-2 text-xs text-text-dimmed">Loading…</div>
         ) : rows.length === 0 ? (
-          <div className="px-2.5 py-2 text-xs text-text-dimmed">No runs</div>
+          <div className="px-2.5 py-2 text-xs text-text-dimmed">No runs yet</div>
         ) : (
           rows.map((row, index) => {
             const cell = def.path
diff --git a/apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx b/apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx
index 95b4e2403..0e2dd1062 100644
--- a/apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx
+++ b/apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx
@@ -199,6 +199,7 @@ function ColumnRow({
   col,
   checked,
   locked,
+  reserveIcon,
   dragging,
   isOver,
   onToggle,
@@ -227,7 +228,7 @@ function ColumnRow({
   return (
     <div
       className={cn(
-        "group relative flex h-8 items-center gap-2 px-3 transition-colors hover:bg-charcoal-750",
+        "group relative flex h-8 items-center gap-2 pl-3 pr-1.5 transition-colors hover:bg-charcoal-750",
         dragging && "opacity-40"
       )}
       draggable
@@ -239,33 +240,39 @@ function ColumnRow({
     >
       {isOver && <div className="absolute inset-x-0 top-0 h-0.5 bg-blue-500" />}
       {locked ? <Checkbox checked disabled /> : <Checkbox checked={checked} onChange={onToggle} />}
-      {isSmart && <BoltIcon className="size-4 flex-none text-text-dimmed" />}
-      <span
-        className={cn("flex-1 truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}
-      >
-        {col.def.label}
+      <span className="flex min-w-0 flex-1 items-center gap-1.5">
+        <span
+          className={cn("truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}
+        >
+          {col.def.label}
+        </span>
+        {isSmart && <BoltIcon className="size-3.5 flex-none text-text-dimmed" />}
       </span>
-      {onEdit && (
-        <button
-          type="button"
-          onClick={onEdit}
-          aria-label={`Edit ${col.def.label}`}
-          className="flex size-5 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:text-text-bright focus-custom group-hover:opacity-100"
-        >
-          <PencilSquareIcon className="size-3.5" />
-        </button>
-      )}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={onRemove}
-          aria-label={`Remove ${col.def.label}`}
-          className="flex size-5 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:text-error focus-custom group-hover:opacity-100"
-        >
-          <XMarkIcon className="size-3.5" />
-        </button>
-      )}
-      <GripVerticalIcon className="size-4 flex-none cursor-grab text-text-dimmed opacity-0 transition group-hover:opacity-100 active:cursor-grabbing" />
+      <div className="flex flex-none items-center gap-0.5">
+        {onEdit && (
+          <button
+            type="button"
+            onClick={onEdit}
+            aria-label={`Edit ${col.def.label}`}
+            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom group-hover:opacity-100"
+          >
+            <PencilSquareIcon className="size-4" />
+          </button>
+        )}
+        {onRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            aria-label={`Remove ${col.def.label}`}
+            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-error focus-custom group-hover:opacity-100"
+          >
+            <XMarkIcon className="size-4" />
+          </button>
+        )}
+        <span className="flex size-6 cursor-grab items-center justify-center text-text-dimmed opacity-0 transition group-hover:opacity-100 active:cursor-grabbing">
+          <GripVerticalIcon className="size-4" />
+        </span>
+      </div>
     </div>
   );
 }
diff --git a/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx b/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
index 2b88a9665..20084f6e1 100644
--- a/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
+++ b/apps/webapp/app/components/runs/v3/SmartColumnSample.tsx
@@ -20,7 +20,7 @@ export function SmartColumnSample({
   onSelectPath: (path: string) => void;
 }) {
   return (
-    <div className="max-h-80 overflow-auto rounded bg-charcoal-900 p-2 font-mono text-xs leading-relaxed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+    <div className="max-h-80 overflow-auto font-mono text-xs leading-relaxed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
       <JsonNode
         name={undefined}
         path="$"