feat(webapp): truncate long smart column values and polish the header

- Widen the smart column dialog by 70px (860 -> 930).
- Use the bolt icon for the "Add smart column" menu item.
- Fix long text escaping above the preview panel's header. The rows are
  h-8 with items-center, so wrapped text taller than the row was centred and
  half of it overflowed upwards past scroll-top, where it was unreachable and
  clipped, losing the start of the string. Rows are now single-line, so
  content starts under the header and flows down; the panel still scrolls
  horizontally.
- Say "sample payload" rather than "sample" in the intro.
- Middle-truncate long text cells at 600px via the existing MiddleTruncate,
  with the full value in a tooltip. MiddleTruncate gains an optional
  tooltipDelay (it defaulted to opening instantly, which fires while merely
  scanning rows) and the runs table passes 500ms. The dialog preview opts out
  and keeps scrolling instead.
- Move the smart column's bolt to the right of the header label at size-4, and
  give the header a tooltip naming the path, source and display type.

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

Author: samejr

apps/webapp/app/components/primitives/MiddleTruncate.tsx

@@ -5,6 +5,8 @@ import { SimpleTooltip } from "./Tooltip";
 type MiddleTruncateProps = {
   text: string;
   className?: string;
+  /** Hover delay before the full-text tooltip opens. Defaults to the tooltip default (0). */
+  tooltipDelay?: number;
 };
 
 /**
@@ -13,7 +15,7 @@ type MiddleTruncateProps = {
  *
  * Example: "namespace:category:subcategory:task-name" becomes "namespace:cat…task-name"
  */
-export function MiddleTruncate({ text, className }: MiddleTruncateProps) {
+export function MiddleTruncate({ text, className, tooltipDelay }: MiddleTruncateProps) {
   const containerRef = useRef<HTMLSpanElement>(null);
   const measureRef = useRef<HTMLSpanElement>(null);
   const [displayText, setDisplayText] = useState(text);
@@ -154,6 +156,7 @@ export function MiddleTruncate({ text, className }: MiddleTruncateProps) {
         content={<span className="max-w-xs break-all font-mono text-xs">{text}</span>}
         side="top"
         asChild
+        delayDuration={tooltipDelay}
       />
     );
   }

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

@@ -169,12 +169,12 @@ export function AddSmartColumnDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {/* Bounded height with the columns absorbing it, so the stacked form can't push the
           header or footer off a short screen. */}
-      <DialogContent className="max-h-[90vh] grid-rows-[auto_minmax(0,1fr)_auto] sm:max-w-[860px]!">
+      <DialogContent className="max-h-[90vh] grid-rows-[auto_minmax(0,1fr)_auto] sm:max-w-[930px]!">
         <DialogHeader>{editing ? "Edit smart column" : "Add smart column"}</DialogHeader>
         <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, so you can't sort or filter by them.
+            Pick a source, then click a value in the sample payload to turn it into a column. Smart
+            columns are display only, so you can't sort or filter by them.
           </Paragraph>
 
           <div className="grid min-h-0 grid-cols-1 items-stretch gap-2.5 md:grid-cols-3">
@@ -375,7 +375,7 @@ function SmartColumnPreview({
               <div
                 key={index}
                 className={cn(
-                  "flex h-8 items-center border-b border-grid-dimmed/60 px-2.5 text-sm last:border-b-0",
+                  "flex h-8 items-center whitespace-nowrap border-b border-grid-dimmed/60 px-2.5 text-sm last:border-b-0",
                   alignClass
                 )}
               >

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

@@ -1,7 +1,6 @@
 import {
   ArrowUturnLeftIcon,
   PencilSquareIcon,
-  PlusIcon,
   StarIcon as StarIconSolid,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
@@ -237,7 +236,7 @@ export function RunsDisplayOptions({
           </div>
           <div className="flex flex-col p-1">
             <PopoverMenuItem
-              icon={PlusIcon}
+              icon={SmartColumnIcon}
               title="Add smart column…"
               onClick={() => setAddOpen(true)}
               className="h-8"

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

@@ -486,12 +486,33 @@ const STANDARD_RENDERERS: Record<string, StandardColumnRenderer> = {
   },
 };
 
+const SMART_SOURCE_LABELS: Record<SmartColumnSource, string> = {
+  payload: "payload",
+  metadata: "metadata",
+  output: "output",
+};
+
 function SmartColumnHeader({ def }: { def: SmartColumnDef }) {
   return (
-    <TableHeaderCell>
+    <TableHeaderCell
+      tooltip={
+        <div className="flex max-w-xs flex-col gap-1 p-1">
+          <Paragraph variant="small" className="text-text-bright">
+            Smart column
+          </Paragraph>
+          <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
+            Reads <span className="font-mono text-text-bright">{def.path}</span> from each run's{" "}
+            {SMART_SOURCE_LABELS[def.source]}, shown as {def.displayAs}.
+          </Paragraph>
+          <Paragraph variant="extra-small" className="text-wrap! text-text-dimmed">
+            Display only, so this column can't be sorted or filtered.
+          </Paragraph>
+        </div>
+      }
+    >
       <span className="flex items-center gap-1">
-        <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate">{def.label}</span>
+        <SmartColumnIcon className="size-4 flex-none text-text-dimmed" />
       </span>
     </TableHeaderCell>
   );
@@ -513,7 +534,7 @@ function SmartColumnCell({
 
   return (
     <TableCell to={path} className={numeric ? "text-right tabular-nums" : undefined}>
-      <SmartCellContent cell={cell} def={def} provisional={!run.hasFinished} />
+      <SmartCellContent cell={cell} def={def} provisional={!run.hasFinished} truncate />
     </TableCell>
   );
 }

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

@@ -1,5 +1,6 @@
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import { Badge } from "~/components/primitives/Badge";
+import { MiddleTruncate } from "~/components/primitives/MiddleTruncate";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { cn } from "~/utils/cn";
 import type { SmartColumnDef } from "./runColumns";
@@ -32,7 +33,16 @@ function toFiniteNumber(value: unknown): number {
   return NaN;
 }
 
-function renderSmartValue(value: unknown, displayAs: SmartColumnDef["displayAs"]): React.ReactNode {
+/** How wide a truncated text cell may get before the middle is elided. */
+const TEXT_CELL_MAX_WIDTH = "max-w-[600px]";
+/** Long values are common enough that an instant tooltip would fire while just scanning rows. */
+const TEXT_CELL_TOOLTIP_DELAY_MS = 500;
+
+function renderSmartValue(
+  value: unknown,
+  displayAs: SmartColumnDef["displayAs"],
+  truncate: boolean
+): React.ReactNode {
   switch (displayAs) {
     case "number": {
       const n = toFiniteNumber(value);
@@ -46,8 +56,16 @@ function renderSmartValue(value: unknown, displayAs: SmartColumnDef["displayAs"]
     }
     case "badge":
       return <Badge variant="extra-small">{stringifySmartValue(value)}</Badge>;
-    default:
-      return stringifySmartValue(value);
+    default: {
+      const text = stringifySmartValue(value);
+      if (!truncate) return text;
+      // MiddleTruncate measures against its parent, so it needs the width cap around it.
+      return (
+        <span className={cn("block min-w-0", TEXT_CELL_MAX_WIDTH)}>
+          <MiddleTruncate text={text} tooltipDelay={TEXT_CELL_TOOLTIP_DELAY_MS} />
+        </span>
+      );
+    }
   }
 }
 
@@ -61,10 +79,13 @@ export function SmartCellContent({
   cell,
   def,
   provisional,
+  truncate = false,
 }: {
   cell: SmartCellValue;
   def: SmartColumnDef;
   provisional: boolean;
+  /** Middle-truncate long text to a fixed cap. On for the table; the preview scrolls instead. */
+  truncate?: boolean;
 }) {
   if (cell.state === "offloaded") {
     return (
@@ -86,7 +107,7 @@ export function SmartCellContent({
 
   return (
     <span className={cn(provisional && "border-b border-dotted border-text-dimmed/50")}>
-      {renderSmartValue(cell.value, def.displayAs)}
+      {renderSmartValue(cell.value, def.displayAs, truncate)}
     </span>
   );
 }