feat(webapp): editable smart columns and display-options polish

Smart columns can now be edited in place from the Display popover. Marks
smart columns with a code-bracket icon instead of a source-colored dot,
shows a drop indicator while reordering columns, drops the redundant
Duration cell-count label, and keeps the Display button label constant.

Author: ericallam

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

@@ -1,3 +1,4 @@
+import { CodeBracketIcon } from "@heroicons/react/20/solid";
 import { useEffect, useMemo, useState } from "react";
 import { useTypedFetcher } from "remix-typedjson";
 import { Button } from "~/components/primitives/Buttons";
@@ -11,26 +12,22 @@ import { Switch } from "~/components/primitives/Switch";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { cn } from "~/utils/cn";
 import {
   SMART_COLUMN_DISPLAYS,
   SMART_COLUMN_SOURCES,
   type SmartColumnDef,
   type SmartColumnDisplay,
   type SmartColumnSource,
 } from "./runColumns";
-import {
-  extractSmartValue,
-  labelFromPath,
-  parseSource,
-  SMART_SOURCE_DOT_COLOR,
-} from "./smartColumnData";
+import { extractSmartValue, labelFromPath, parseSource } from "./smartColumnData";
 import type { loader as sampleLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.smart-column-sample";
 
 type AddSmartColumnDialogProps = {
   open: boolean;
+  /** When set, the dialog edits this existing column instead of adding a new one. */
+  editing: SmartColumnDef | null;
   onOpenChange: (open: boolean) => void;
-  onAdd: (def: SmartColumnDef) => void;
+  onSubmit: (def: SmartColumnDef) => void;
   currentSearch: string;
 };
 
@@ -46,8 +43,9 @@ const DISPLAY_OPTIONS = SMART_COLUMN_DISPLAYS.map((display) => ({
 
 export function AddSmartColumnDialog({
   open,
+  editing,
   onOpenChange,
-  onAdd,
+  onSubmit,
   currentSearch,
 }: AddSmartColumnDialogProps) {
   const organization = useOrganization();
@@ -61,6 +59,15 @@ export function AddSmartColumnDialog({
   const [labelEdited, setLabelEdited] = useState(false);
   const [displayAs, setDisplayAs] = useState<SmartColumnDisplay>("text");
 
+  useEffect(() => {
+    if (!open) return;
+    setSource(editing?.source ?? "metadata");
+    setPath(editing?.path ?? "");
+    setLabel(editing?.label ?? "");
+    setLabelEdited(editing !== null);
+    setDisplayAs(editing?.displayAs ?? "text");
+  }, [open, editing]);
+
   const sampleUrl = useMemo(() => {
     const base = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/runs/smart-column-sample`;
     return currentSearch ? `${base}?${currentSearch.replace(/^\?/, "")}` : base;
@@ -105,33 +112,18 @@ export function AddSmartColumnDialog({
     return extractSmartValue(parsed, path);
   }, [parsed, path]);
 
-  const canAdd = path.trim().length > 0;
+  const canSubmit = path.trim().length > 0;
 
-  const reset = () => {
-    setSource("metadata");
-    setPath("");
-    setLabel("");
-    setLabelEdited(false);
-    setDisplayAs("text");
-  };
-
-  const handleAdd = () => {
-    if (!canAdd) return;
-    onAdd({ source, path: path.trim(), label: effectiveLabel.trim() || path.trim(), displayAs });
-    reset();
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onSubmit({ source, path: path.trim(), label: effectiveLabel.trim() || path.trim(), displayAs });
     onOpenChange(false);
   };
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(next) => {
-        if (!next) reset();
-        onOpenChange(next);
-      }}
-    >
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl">
-        <DialogHeader>Add smart column</DialogHeader>
+        <DialogHeader>{editing ? "Edit smart column" : "Add smart column"}</DialogHeader>
         <div className="flex flex-col gap-4 p-1">
           <div className="flex flex-col gap-1.5">
             <Label>Source</Label>
@@ -208,11 +200,7 @@ export function AddSmartColumnDialog({
             </div>
             <div className="flex flex-col gap-1.5">
               <Paragraph variant="extra-extra-small/dimmed/caps">Resolves to</Paragraph>
-              <SmartColumnResolvedPreview
-                source={source}
-                label={effectiveLabel}
-                resolved={resolved}
-              />
+              <SmartColumnResolvedPreview label={effectiveLabel} resolved={resolved} />
               {sampleRun && (
                 <Paragraph variant="extra-small" className="text-text-dimmed">
                   Against {sampleRun.friendlyId}
@@ -239,8 +227,8 @@ export function AddSmartColumnDialog({
           <Button variant="tertiary/medium" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button variant="primary/medium" disabled={!canAdd} onClick={handleAdd}>
-            Add column
+          <Button variant="primary/medium" disabled={!canSubmit} onClick={handleSubmit}>
+            {editing ? "Save changes" : "Add column"}
           </Button>
         </div>
       </DialogContent>
@@ -249,11 +237,9 @@ export function AddSmartColumnDialog({
 }
 
 function SmartColumnResolvedPreview({
-  source,
   label,
   resolved,
 }: {
-  source: SmartColumnSource;
   label: string;
   resolved: ReturnType<typeof extractSmartValue> | undefined;
 }) {
@@ -266,8 +252,8 @@ function SmartColumnResolvedPreview({
 
   return (
     <div className="rounded border border-grid-dimmed">
-      <div className="flex items-center gap-1.5 border-b border-grid-dimmed px-2 py-1">
-        <span className={cn("size-2 rounded-full", SMART_SOURCE_DOT_COLOR[source])} />
+      <div className="flex items-center gap-1 border-b border-grid-dimmed px-2 py-1">
+        <CodeBracketIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate text-xs text-text-bright">{label || "Column"}</span>
       </div>
       <div className="px-2 py-1.5 text-right text-sm tabular-nums text-text-bright">{value}</div>

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

@@ -1,4 +1,10 @@
-import { ArrowUturnLeftIcon, PlusIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowUturnLeftIcon,
+  CodeBracketIcon,
+  PencilSquareIcon,
+  PlusIcon,
+  ViewColumnsIcon,
+} from "@heroicons/react/20/solid";
 import { GripVerticalIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
@@ -18,19 +24,22 @@ import {
   type SmartColumnDef,
 } from "./runColumns";
 import { AddSmartColumnDialog } from "./AddSmartColumnDialog";
-import { SMART_SOURCE_DOT_COLOR } from "./smartColumnData";
 
 function keyFor(col: ResolvedColumn): string {
   return col.kind === "standard" ? `std:${col.def.id}` : `smart:${col.index}`;
 }
 
+type SmartEditTarget = { index: number; def: SmartColumnDef };
+
 export function RunsDisplayOptions() {
   const environment = useEnvironment();
   const { isManagedCloud } = useFeatures();
   const location = useOptimisticLocation();
   const { values, replace } = useSearchParams();
   const [addOpen, setAddOpen] = useState(false);
+  const [editing, setEditing] = useState<SmartEditTarget | null>(null);
   const [dragKey, setDragKey] = useState<string | null>(null);
+  const [overKey, setOverKey] = useState<string | null>(null);
 
   const runtime: RunColumnRuntime = {
     isManagedCloud,
@@ -47,7 +56,6 @@ export function RunsDisplayOptions() {
 
   const available = availableStandardColumns(runtime);
   const visibleStandardCount = layout.visible.filter((c) => c.kind === "standard").length;
-  const smartCount = layout.visible.filter((c) => c.kind === "smart").length;
 
   const applyVisible = (nextVisible: ResolvedColumn[]) => {
     const encoded = encodeColumnLayout(nextVisible, runtime);
@@ -71,9 +79,16 @@ export function RunsDisplayOptions() {
     applyVisible(layout.visible.filter((c) => !(c.kind === "smart" && c.index === index)));
   };
 
-  const addSmart = (def: SmartColumnDef) => {
-    const nextIndex = layout.smartColumns.length;
-    applyVisible([...layout.visible, { kind: "smart", index: nextIndex, def }]);
+  const submitSmart = (def: SmartColumnDef) => {
+    if (editing) {
+      applyVisible(
+        layout.visible.map((c) =>
+          c.kind === "smart" && c.index === editing.index ? { ...c, def } : c
+        )
+      );
+    } else {
+      applyVisible([...layout.visible, { kind: "smart", index: layout.smartColumns.length, def }]);
+    }
   };
 
   const reset = () => replace({ cols: undefined, sc: undefined });
@@ -89,17 +104,17 @@ export function RunsDisplayOptions() {
     applyVisible(arr);
   };
 
+  const endDrag = () => {
+    setDragKey(null);
+    setOverKey(null);
+  };
+
   return (
     <>
       <Popover>
         <PopoverTrigger asChild>
           <Button variant="secondary/small" LeadingIcon={ViewColumnsIcon} className="ml-auto">
-            <span className="flex items-center gap-1.5">
-              Display
-              {smartCount > 0 && (
-                <span className="text-xs text-text-dimmed">{smartCount} smart</span>
-              )}
-            </span>
+            Display
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-64 p-0">
@@ -118,16 +133,23 @@ export function RunsDisplayOptions() {
                 draggable
                 locked={col.kind === "standard" && !!col.def.locked}
                 dragging={dragKey === keyFor(col)}
+                isOver={overKey === keyFor(col) && dragKey !== keyFor(col)}
                 onDragStart={() => setDragKey(keyFor(col))}
-                onDragEnd={() => setDragKey(null)}
+                onDragEnter={() => setOverKey(keyFor(col))}
+                onDragEnd={endDrag}
                 onDrop={() => {
                   if (dragKey) reorder(dragKey, keyFor(col));
-                  setDragKey(null);
+                  endDrag();
                 }}
                 onToggle={() => {
                   if (col.kind === "smart") removeSmart(col.index);
                   else if (!col.def.locked) hideStandard(col.def.id);
                 }}
+                onEdit={
+                  col.kind === "smart"
+                    ? () => setEditing({ index: col.index, def: col.def })
+                    : undefined
+                }
               />
             ))}
             {layout.hiddenStandard.map((def) => (
@@ -138,6 +160,7 @@ export function RunsDisplayOptions() {
                 draggable={false}
                 locked={false}
                 dragging={false}
+                isOver={false}
                 onToggle={() => showStandard(def.id)}
               />
             ))}
@@ -164,9 +187,15 @@ export function RunsDisplayOptions() {
         </PopoverContent>
       </Popover>
       <AddSmartColumnDialog
-        open={addOpen}
-        onOpenChange={setAddOpen}
-        onAdd={addSmart}
+        open={addOpen || editing !== null}
+        editing={editing?.def ?? null}
+        onOpenChange={(next) => {
+          if (!next) {
+            setAddOpen(false);
+            setEditing(null);
+          }
+        }}
+        onSubmit={submitSmart}
         currentSearch={location.search}
       />
     </>
@@ -179,8 +208,11 @@ function ColumnRow({
   draggable,
   locked,
   dragging,
+  isOver,
   onToggle,
+  onEdit,
   onDragStart,
+  onDragEnter,
   onDragEnd,
   onDrop,
 }: {
@@ -189,45 +221,49 @@ function ColumnRow({
   draggable: boolean;
   locked: boolean;
   dragging: boolean;
+  isOver: boolean;
   onToggle: () => void;
+  onEdit?: () => void;
   onDragStart?: () => void;
+  onDragEnter?: () => void;
   onDragEnd?: () => void;
   onDrop?: () => void;
 }) {
   const isSmart = col.kind === "smart";
-  const label = col.def.label;
-  const isDuration = col.kind === "standard" && col.def.id === "dur";
 
   return (
     <div
       className={cn(
-        "flex h-8 items-center gap-2 px-3 transition-colors hover:bg-charcoal-750",
+        "relative flex h-8 items-center gap-2 px-3 transition-colors hover:bg-charcoal-750",
         dragging && "opacity-40"
       )}
       draggable={draggable}
       onDragStart={onDragStart}
+      onDragEnter={onDragEnter}
       onDragEnd={onDragEnd}
       onDragOver={(e) => {
         if (draggable) e.preventDefault();
       }}
       onDrop={onDrop}
     >
-      {locked ? (
-        <Checkbox checked disabled />
-      ) : (
-        <Checkbox checked={checked} onChange={onToggle} />
-      )}
-      {isSmart && (
-        <span
-          className={cn("size-2 flex-none rounded-full", SMART_SOURCE_DOT_COLOR[col.def.source])}
-        />
-      )}
+      {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 && <CodeBracketIcon className="size-4 flex-none text-text-dimmed" />}
       <span
         className={cn("flex-1 truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}
       >
-        {label}
+        {col.def.label}
       </span>
-      {isDuration && <span className="text-xs text-text-dimmed">3 cells</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 transition-colors hover:text-text-bright focus-custom"
+        >
+          <PencilSquareIcon className="size-3.5" />
+        </button>
+      )}
       {draggable ? (
         <GripVerticalIcon className="size-4 cursor-grab text-text-dimmed active:cursor-grabbing" />
       ) : (