feat(webapp): use the shared form primitives in the smart column dialog

The dialog had reinvented two components the app already ships. Source and
Display as were a hand-rolled "SourceCard" button with a fake radio circle;
both now use RadioGroup/RadioGroupItem — the "description" variant for Source
(it takes a description) and "button/small" for Display as. The text fields
move to the canonical InputGroup + Label + Input + Hint composition instead of
a bespoke flex column with a raw Paragraph. SourceCard is deleted.

- Halve the gap between the three columns (gap-5 -> gap-2.5).
- Swap the smart column bolt for a custom SmartColumnIcon, in all three places
  it appears: the runs table header, the Columns popover, and the dialog
  preview (which is a preview of that same header, so they have to match).
- Cancel becomes secondary.
- Pad above the intro text to match the side padding, and make it a size larger
  and bright.
- Reword the intro to lead with what to do rather than what the feature is.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/assets/icons/SmartColumnIcon.tsx

@@ -0,0 +1,13 @@
+/** Marks a smart column: in the runs table header, the Columns popover, and the dialog preview. */
+export function SmartColumnIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.94723 12.4318L12.3011 3.53646C12.9468 2.63242 14.3689 3.24855 14.1511 4.33794L13.1543 9.32131C13.0905 9.64031 13.3346 9.93793 13.6599 9.93793H17.2138C18.0524 9.93793 18.5402 10.8859 18.0527 11.5682L11.6989 20.4636C11.0532 21.3676 9.63107 20.7515 9.84895 19.6621L10.8456 14.6788C10.9095 14.3598 10.6654 14.0621 10.3401 14.0621H6.78622C5.9476 14.0621 5.45978 13.1142 5.94723 12.4318Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx

@@ -1,11 +1,15 @@
-import { BoltIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { useEffect, useMemo, useState } from "react";
 import { useTypedFetcher } from "remix-typedjson";
+import { SmartColumnIcon } from "~/assets/icons/SmartColumnIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "~/components/primitives/Dialog";
+import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -167,44 +171,49 @@ export function AddSmartColumnDialog({
           header or footer off a short screen. */}
       <DialogContent className="max-h-[90vh] grid-rows-[auto_minmax(0,1fr)_auto] sm:max-w-[860px]!">
         <DialogHeader>{editing ? "Edit smart column" : "Add smart column"}</DialogHeader>
-        <div className="flex min-h-0 flex-col gap-5">
-          <Paragraph variant="small/dimmed">
-            Pull a single value out of a run's payload, metadata, or output by JSON path. Smart
-            columns are display only — you can't sort or filter by them.
+        <div className="flex min-h-0 flex-col gap-5 pt-3">
+          <Paragraph variant="base/bright">
+            Pick a source, then click a value in the sample to turn it into a column. Smart columns
+            are display only — you can't sort or filter by them.
           </Paragraph>
 
-          <div className="grid min-h-0 grid-cols-1 items-stretch gap-5 md:grid-cols-3">
+          <div className="grid min-h-0 grid-cols-1 items-stretch gap-2.5 md:grid-cols-3">
             <div className="flex flex-col gap-4 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
-              <div className="flex flex-col gap-1.5">
+              <InputGroup fullWidth>
                 <Label>Source</Label>
-                <div className="flex flex-col gap-2">
+                <RadioGroup
+                  className="flex flex-col gap-2"
+                  value={source}
+                  onValueChange={(next) => handleSourceChange(next as SmartColumnSource)}
+                >
                   {SOURCE_CARDS.map((card) => (
-                    <SourceCard
+                    <RadioGroupItem
                       key={card.value}
+                      id={`smart-source-${card.value}`}
+                      value={card.value}
+                      variant="description"
                       label={card.label}
                       description={card.description}
-                      selected={source === card.value}
-                      onSelect={() => handleSourceChange(card.value)}
                     />
                   ))}
-                </div>
-              </div>
+                </RadioGroup>
+              </InputGroup>
 
-              <div className="flex flex-col gap-1.5">
+              <InputGroup fullWidth>
                 <Label>JSON path</Label>
                 <Input
                   value={path}
                   onChange={(e) => setPath(e.target.value)}
                   placeholder="$.order.total"
                   spellCheck={false}
                 />
-                <Paragraph variant="extra-small" className="text-balance text-text-dimmed">
+                <Hint className="text-balance">
                   e.g. <code>$.order.total</code>, <code>$.items[0].sku</code>,{" "}
                   <code>$.items.length</code>
-                </Paragraph>
-              </div>
+                </Hint>
+              </InputGroup>
 
-              <div className="flex flex-col gap-1.5">
+              <InputGroup fullWidth>
                 <Label>Column label</Label>
                 <Input
                   value={effectiveLabel}
@@ -214,21 +223,27 @@ export function AddSmartColumnDialog({
                   }}
                   placeholder={labelFromPath(path)}
                 />
-              </div>
+              </InputGroup>
 
-              <div className="flex flex-col gap-1.5">
+              <InputGroup fullWidth>
                 <Label>Display as</Label>
-                <div className="grid grid-cols-2 gap-2">
+                <RadioGroup
+                  className="grid grid-cols-2 gap-2"
+                  value={displayAs}
+                  onValueChange={(next) => setDisplayAs(next as SmartColumnDisplay)}
+                >
                   {DISPLAY_OPTIONS.map((option) => (
-                    <SourceCard
+                    <RadioGroupItem
                       key={option.value}
+                      id={`smart-display-${option.value}`}
+                      value={option.value}
+                      variant="button/small"
                       label={option.label}
-                      selected={displayAs === option.value}
-                      onSelect={() => setDisplayAs(option.value)}
+                      className="w-full"
                     />
                   ))}
-                </div>
-              </div>
+                </RadioGroup>
+              </InputGroup>
             </div>
 
             <div className="flex min-h-0 flex-col gap-1.5">
@@ -279,7 +294,7 @@ export function AddSmartColumnDialog({
           </div>
         </div>
         <DialogFooter>
-          <Button variant="tertiary/medium" onClick={() => onOpenChange(false)}>
+          <Button variant="secondary/medium" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button variant="primary/medium" disabled={!canSubmit} onClick={handleSubmit}>
@@ -326,46 +341,6 @@ function SampleRunPicker({
   );
 }
 
-/** Radio card used for both Source (with a description) and Display as (without). */
-function SourceCard({
-  label,
-  description,
-  selected,
-  onSelect,
-}: {
-  label: string;
-  description?: string;
-  selected: boolean;
-  onSelect: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onSelect}
-      aria-pressed={selected}
-      className={cn(
-        "flex cursor-pointer flex-col gap-1 rounded-lg border p-2.5 text-left transition",
-        selected
-          ? "border-blue-500 bg-blue-500/10"
-          : "border-grid-bright bg-background-dimmed hover:border-text-dimmed"
-      )}
-    >
-      <span className="flex items-center gap-1.5 text-sm font-medium text-text-bright">
-        <span
-          className={cn(
-            "grid size-3.5 flex-none place-items-center rounded-full border",
-            selected ? "border-blue-500" : "border-text-dimmed"
-          )}
-        >
-          {selected && <span className="size-1.5 rounded-full bg-blue-500" />}
-        </span>
-        {label}
-      </span>
-      {description && <span className="text-xs text-text-dimmed">{description}</span>}
-    </button>
-  );
-}
-
 function SmartColumnPreview({
   rows,
   def,
@@ -381,7 +356,7 @@ function SmartColumnPreview({
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-grid-dimmed">
       <div className="flex flex-none items-center gap-1 border-b border-grid-dimmed bg-background-dimmed px-2.5 py-1.5">
-        <BoltIcon className="size-3.5 flex-none text-text-dimmed" />
+        <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate text-xs font-medium text-text-bright">
           {def.label || "Column"}
         </span>

apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx

@@ -2,14 +2,14 @@ import {
   ArrowUturnLeftIcon,
   PencilSquareIcon,
   PlusIcon,
-  BoltIcon,
   StarIcon as StarIconSolid,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
 import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 import { GripVerticalIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { ColumnsIcon } from "~/assets/icons/ColumnsIcon";
+import { SmartColumnIcon } from "~/assets/icons/SmartColumnIcon";
 import { useFavoritePageToggle } from "~/components/navigation/favoritePages";
 import { Button } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
@@ -355,7 +355,7 @@ function ColumnRow({
         >
           {col.def.label}
         </span>
-        {isSmart && <BoltIcon className="size-3.5 flex-none text-text-dimmed" />}
+        {isSmart && <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />}
       </label>
       <div className="flex flex-none items-center gap-0.5 pr-1">
         {onEdit && (

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -2,7 +2,6 @@ import {
   ArrowPathIcon,
   ArrowRightIcon,
   ClockIcon,
-  BoltIcon,
   CpuChipIcon,
   NoSymbolIcon,
   RectangleStackIcon,
@@ -64,6 +63,7 @@ import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import type { TaskTriggerSource } from "@trigger.dev/database";
 import { BeakerIcon } from "~/assets/icons/BeakerIcon";
+import { SmartColumnIcon } from "~/assets/icons/SmartColumnIcon";
 import {
   parseColumnParams,
   resolveColumnLayout,
@@ -490,7 +490,7 @@ function SmartColumnHeader({ def }: { def: SmartColumnDef }) {
   return (
     <TableHeaderCell>
       <span className="flex items-center gap-1">
-        <BoltIcon className="size-3.5 flex-none text-text-dimmed" />
+        <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate">{def.label}</span>
       </span>
     </TableHeaderCell>

apps/webapp/app/routes/storybook.icons/route.tsx

@@ -118,6 +118,7 @@ import { SideMenuRightClosedIcon } from "~/assets/icons/SideMenuRightClosed";
 import { SlackIcon } from "~/assets/icons/SlackIcon";
 import { SlackMonoIcon } from "~/assets/icons/SlackMonoIcon";
 import { SlidersIcon } from "~/assets/icons/SlidersIcon";
+import { SmartColumnIcon } from "~/assets/icons/SmartColumnIcon";
 import { SnakedArrowIcon } from "~/assets/icons/SnakedArrowIcon";
 import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
 import { StarIcon } from "~/assets/icons/StarIcon";
@@ -266,6 +267,7 @@ const icons: IconEntry[] = [
   { name: "SlackIcon", render: simple(SlackIcon) },
   { name: "SlackMonoIcon", render: simple(SlackMonoIcon) },
   { name: "SlidersIcon", render: simple(SlidersIcon) },
+  { name: "SmartColumnIcon", render: simple(SmartColumnIcon) },
   { name: "SnakedArrowIcon", render: simple(SnakedArrowIcon) },
   { name: "SparkleListIcon", render: simple(SparkleListIcon) },
   { name: "StarIcon", render: simple(StarIcon) },