feat(webapp): put the smart column tooltip on the bolt, fix light mode actions

- The runs table header tooltip now hangs off the bolt itself rather than the
  info icon TableHeaderCell adds alongside it, and reads as one paragraph.
- Cap the full-value tooltip and let it scroll (max-w-sm / max-h-64); a whole
  payload string is unbounded, so the box could grow arbitrarily tall.
  MiddleTruncate gains an optional tooltipContentClassName for this.
- Wrap long preview text instead of forcing one line. Rows grow with their
  content now, so items-center no longer pushes overflow above the header --
  the reason the previous fix had to disable wrapping.
- Match the runs table in the preview header: label first, then the bolt.
- The row edit/remove/reorder actions were raw buttons with a hardcoded
  charcoal hover, so light mode got a dark background. They now use
  Button variant="minimal/small", whose hover is the bg-tertiary token
  (verified rgb(39,42,46) dark / rgb(238,240,243) light), still square at 24px.
  Button forwards no onKeyDown, so the reorder arrow keys listen on a wrapper
  and catch the event bubbling from the focused button.
- Even out the three footer icons at 1.15rem and give the outline star 2px
  strokes, matching the custom icons beside it (it defaults to 1.5px).
- Replace the reset arrow with a custom ResetIcon.

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

Author: samejr

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

@@ -0,0 +1,20 @@
+export function ResetIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 3L4 6L7 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 6H13.5C17.0899 6 20 8.91015 20 12.5C20 16.0899 17.0899 19 13.5 19H6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -7,6 +7,8 @@ type MiddleTruncateProps = {
   className?: string;
   /** Hover delay before the full-text tooltip opens. Defaults to the tooltip default (0). */
   tooltipDelay?: number;
+  /** Merged onto the tooltip body, for callers whose text needs a bigger or scrollable box. */
+  tooltipContentClassName?: string;
 };
 
 /**
@@ -15,7 +17,12 @@ type MiddleTruncateProps = {
  *
  * Example: "namespace:category:subcategory:task-name" becomes "namespace:cat…task-name"
  */
-export function MiddleTruncate({ text, className, tooltipDelay }: MiddleTruncateProps) {
+export function MiddleTruncate({
+  text,
+  className,
+  tooltipDelay,
+  tooltipContentClassName,
+}: MiddleTruncateProps) {
   const containerRef = useRef<HTMLSpanElement>(null);
   const measureRef = useRef<HTMLSpanElement>(null);
   const [displayText, setDisplayText] = useState(text);
@@ -153,7 +160,11 @@ export function MiddleTruncate({ text, className, tooltipDelay }: MiddleTruncate
     return (
       <SimpleTooltip
         button={content}
-        content={<span className="max-w-xs break-all font-mono text-xs">{text}</span>}
+        content={
+          <span className={cn("max-w-xs break-all font-mono text-xs", tooltipContentClassName)}>
+            {text}
+          </span>
+        }
         side="top"
         asChild
         delayDuration={tooltipDelay}

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

@@ -356,10 +356,10 @@ 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">
-        <SmartColumnIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate text-xs font-medium text-text-bright">
           {def.label || "Column"}
         </span>
+        <SmartColumnIcon className="size-4 flex-none text-text-dimmed" />
       </div>
       <div className="flex-1 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         {!loaded ? (
@@ -375,7 +375,7 @@ function SmartColumnPreview({
               <div
                 key={index}
                 className={cn(
-                  "flex h-8 items-center whitespace-nowrap border-b border-grid-dimmed/60 px-2.5 text-sm last:border-b-0",
+                  "flex min-h-8 items-center break-all border-b border-grid-dimmed/60 px-2.5 py-1.5 text-sm last:border-b-0",
                   alignClass
                 )}
               >

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

@@ -1,13 +1,9 @@
-import {
-  ArrowUturnLeftIcon,
-  PencilSquareIcon,
-  StarIcon as StarIconSolid,
-  XMarkIcon,
-} from "@heroicons/react/20/solid";
+import { PencilSquareIcon, 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 { ResetIcon } from "~/assets/icons/ResetIcon";
 import { SmartColumnIcon } from "~/assets/icons/SmartColumnIcon";
 import { useFavoritePageToggle } from "~/components/navigation/favoritePages";
 import { Button } from "~/components/primitives/Buttons";
@@ -43,6 +39,9 @@ function keyFor(col: ResolvedColumn): string {
 
 type SmartEditTarget = { index: number; def: SmartColumnDef };
 
+/** The three footer actions share one icon size so the mixed icon sets line up. */
+const FOOTER_ICON_CLASS = "size-[1.15rem]";
+
 /** Opens the Columns popover. "l" is free on every list this control appears on. */
 export const COLUMNS_SHORTCUT = { key: "l" as const };
 
@@ -240,14 +239,17 @@ export function RunsDisplayOptions({
               title="Add smart column…"
               onClick={() => setAddOpen(true)}
               className="h-8"
+              leadingIconClassName={FOOTER_ICON_CLASS}
             />
             {canFavorite && (
               <PopoverMenuItem
                 icon={
                   isFavorited ? (
-                    <StarIconSolid className="size-4 text-yellow-500" />
+                    <StarIconSolid className={cn(FOOTER_ICON_CLASS, "text-yellow-500")} />
                   ) : (
-                    <StarIconOutline className="size-4" />
+                    // The outline star is 1.5px by default, noticeably thinner than the
+                    // custom 2px icons beside it.
+                    <StarIconOutline className={FOOTER_ICON_CLASS} strokeWidth={2} />
                   )
                 }
                 title={isFavorited ? "Remove from favorites" : "Save to favorites"}
@@ -258,7 +260,7 @@ export function RunsDisplayOptions({
             {/* Wrapper carries the cursor: the disabled button has pointer-events-none. */}
             <div className={cn("flex", !layout.isCustomized && "cursor-not-allowed")}>
               <PopoverMenuItem
-                icon={ArrowUturnLeftIcon}
+                icon={ResetIcon}
                 title="Reset to default"
                 onClick={reset}
                 disabled={!layout.isCustomized}
@@ -285,6 +287,13 @@ export function RunsDisplayOptions({
   );
 }
 
+/**
+ * The row's hover-revealed actions. Square, and hidden until the row is hovered or the
+ * control itself takes keyboard focus (a checkbox click must not reveal them).
+ */
+const ROW_ACTION_CLASS =
+  "aspect-square h-6 p-1 opacity-0 transition group-hover:opacity-100 group-focus-visible/button:opacity-100";
+
 function ColumnRow({
   col,
   checked,
@@ -358,28 +367,27 @@ function ColumnRow({
       </label>
       <div className="flex flex-none items-center gap-0.5 pr-1">
         {onEdit && (
-          <button
-            type="button"
+          <Button
+            variant="minimal/small"
             onClick={onEdit}
             aria-label={`Edit ${col.def.label}`}
-            className="flex size-6 cursor-pointer items-center justify-center rounded-sm text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom focus-visible:opacity-100 group-hover:opacity-100"
-          >
-            <PencilSquareIcon className="size-4" />
-          </button>
+            LeadingIcon={<PencilSquareIcon className="size-4" />}
+            className={ROW_ACTION_CLASS}
+          />
         )}
         {onRemove && (
-          <button
-            type="button"
+          <Button
+            variant="minimal/small"
             onClick={onRemove}
             aria-label={`Remove ${col.def.label}`}
-            className="flex size-6 cursor-pointer items-center justify-center rounded-sm text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-error focus-custom focus-visible:opacity-100 group-hover:opacity-100"
-          >
-            <XMarkIcon className="size-4" />
-          </button>
+            LeadingIcon={<XMarkIcon className="size-4" />}
+            className={cn(ROW_ACTION_CLASS, "group-hover/button:text-error")}
+          />
         )}
-        <button
-          type="button"
-          aria-label={`Reorder ${col.def.label} (use arrow up and down)`}
+        {/* Button forwards no onKeyDown, so the arrow-key reorder listens on the wrapper
+            and catches the event bubbling up from the focused button. */}
+        <span
+          role="presentation"
           onKeyDown={(e) => {
             if (e.key === "ArrowUp") {
               e.preventDefault();
@@ -389,10 +397,14 @@ function ColumnRow({
               onMove(1);
             }
           }}
-          className="flex size-6 cursor-grab items-center justify-center rounded-sm text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom focus-visible:opacity-100 group-hover:opacity-100 active:cursor-grabbing"
         >
-          <GripVerticalIcon className="size-4" />
-        </button>
+          <Button
+            variant="minimal/small"
+            aria-label={`Reorder ${col.def.label} (use arrow up and down)`}
+            LeadingIcon={<GripVerticalIcon className="size-4" />}
+            className={cn(ROW_ACTION_CLASS, "cursor-grab active:cursor-grabbing")}
+          />
+        </span>
       </div>
     </div>
   );

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

@@ -494,25 +494,24 @@ const SMART_SOURCE_LABELS: Record<SmartColumnSource, string> = {
 
 function SmartColumnHeader({ def }: { def: SmartColumnDef }) {
   return (
-    <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>
-      }
-    >
+    <TableHeaderCell>
       <span className="flex items-center gap-1">
         <span className="truncate">{def.label}</span>
-        <SmartColumnIcon className="size-4 flex-none text-text-dimmed" />
+        {/* The bolt is the tooltip trigger, so the cell doesn't also get an info icon. */}
+        <SimpleTooltip
+          disableHoverableContent
+          button={<SmartColumnIcon className="size-4 flex-none text-text-dimmed" />}
+          content={
+            <Paragraph
+              variant="extra-small"
+              className="max-w-xs text-wrap! normal-case tracking-normal 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}. Display only, so this
+              column can't be sorted or filtered.
+            </Paragraph>
+          }
+        />
       </span>
     </TableHeaderCell>
   );

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

@@ -37,6 +37,9 @@ function toFiniteNumber(value: unknown): number {
 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;
+/** A whole payload string can be arbitrarily long, so the tooltip is capped and scrolls. */
+const TEXT_CELL_TOOLTIP_CLASS =
+  "block max-w-sm max-h-64 overflow-y-auto whitespace-pre-wrap scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control";
 
 function renderSmartValue(
   value: unknown,
@@ -62,7 +65,11 @@ function renderSmartValue(
       // 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} />
+          <MiddleTruncate
+            text={text}
+            tooltipDelay={TEXT_CELL_TOOLTIP_DELAY_MS}
+            tooltipContentClassName={TEXT_CELL_TOOLTIP_CLASS}
+          />
         </span>
       );
     }

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

@@ -105,6 +105,7 @@ import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
 import { QueuesIcon } from "~/assets/icons/QueuesIcon";
 import { RadarPulseIcon } from "~/assets/icons/RadarPulseIcon";
 import { FlagEurope, FlagUSA } from "~/assets/icons/RegionIcons";
+import { ResetIcon } from "~/assets/icons/ResetIcon";
 import { RightSideMenuIcon } from "~/assets/icons/RightSideMenuIcon";
 import { RolesIcon } from "~/assets/icons/RolesIcon";
 import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
@@ -251,6 +252,7 @@ const icons: IconEntry[] = [
   { name: "QuestionMarkIcon", render: simple(QuestionMarkIcon) },
   { name: "QueuesIcon", render: simple(QueuesIcon) },
   { name: "RadarPulseIcon", render: simple(RadarPulseIcon) },
+  { name: "ResetIcon", render: simple(ResetIcon) },
   { name: "RightSideMenuIcon", render: simple(RightSideMenuIcon) },
   { name: "RolesIcon", render: simple(RolesIcon) },
   { name: "RunFunctionIcon", render: simple(RunFunctionIcon) },