feat(webapp): stable column toggle and a clearer smart-column icon

Toggling a column now hides/shows it in place instead of moving it to a
separate section, so the list never reorders when you check a box (order
lives in the URL, hidden columns keep their slot). Marks smart columns
with a variable icon, and gives them an explicit remove action distinct
from hiding.

Author: ericallam

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

@@ -1,4 +1,4 @@
-import { CodeBracketIcon } from "@heroicons/react/20/solid";
+import { VariableIcon } from "@heroicons/react/20/solid";
 import { useEffect, useMemo, useState } from "react";
 import { useTypedFetcher } from "remix-typedjson";
 import { Button } from "~/components/primitives/Buttons";
@@ -253,7 +253,7 @@ function SmartColumnResolvedPreview({
   return (
     <div className="rounded border border-grid-dimmed">
       <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" />
+        <VariableIcon 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,9 +1,10 @@
 import {
   ArrowUturnLeftIcon,
-  CodeBracketIcon,
   PencilSquareIcon,
   PlusIcon,
+  VariableIcon,
   ViewColumnsIcon,
+  XMarkIcon,
 } from "@heroicons/react/20/solid";
 import { GripVerticalIcon } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -16,9 +17,9 @@ import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { cn } from "~/utils/cn";
 import {
-  availableStandardColumns,
   encodeColumnLayout,
   resolveColumnLayout,
+  type LayoutColumn,
   type ResolvedColumn,
   type RunColumnRuntime,
   type SmartColumnDef,
@@ -54,54 +55,55 @@ export function RunsDisplayOptions() {
     [cols.join(" "), sc.join(" "), runtime.isManagedCloud, runtime.isDevelopment]
   );
 
-  const available = availableStandardColumns(runtime);
-  const visibleStandardCount = layout.visible.filter((c) => c.kind === "standard").length;
+  const totalCount = layout.ordered.filter((o) => o.col.kind === "standard").length;
+  const shownCount = layout.ordered.filter((o) => o.col.kind === "standard" && !o.hidden).length;
 
-  const applyVisible = (nextVisible: ResolvedColumn[]) => {
-    const encoded = encodeColumnLayout(nextVisible, runtime);
+  const applyLayout = (next: LayoutColumn[]) => {
+    const encoded = encodeColumnLayout(next, runtime);
     replace({
       cols: encoded.cols.length > 0 ? encoded.cols : undefined,
       sc: encoded.sc.length > 0 ? encoded.sc : undefined,
     });
   };
 
-  const hideStandard = (id: string) => {
-    applyVisible(layout.visible.filter((c) => !(c.kind === "standard" && c.def.id === id)));
-  };
-
-  const showStandard = (id: string) => {
-    const def = available.find((c) => c.id === id);
-    if (!def) return;
-    applyVisible([...layout.visible, { kind: "standard", def }]);
+  const toggleHidden = (key: string) => {
+    applyLayout(
+      layout.ordered.map((o) => (keyFor(o.col) === key ? { ...o, hidden: !o.hidden } : o))
+    );
   };
 
   const removeSmart = (index: number) => {
-    applyVisible(layout.visible.filter((c) => !(c.kind === "smart" && c.index === index)));
+    applyLayout(layout.ordered.filter((o) => !(o.col.kind === "smart" && o.col.index === index)));
   };
 
   const submitSmart = (def: SmartColumnDef) => {
     if (editing) {
-      applyVisible(
-        layout.visible.map((c) =>
-          c.kind === "smart" && c.index === editing.index ? { ...c, def } : c
+      applyLayout(
+        layout.ordered.map((o) =>
+          o.col.kind === "smart" && o.col.index === editing.index
+            ? { ...o, col: { ...o.col, def } }
+            : o
         )
       );
     } else {
-      applyVisible([...layout.visible, { kind: "smart", index: layout.smartColumns.length, def }]);
+      applyLayout([
+        ...layout.ordered,
+        { col: { kind: "smart", index: layout.smartColumns.length, def }, hidden: false },
+      ]);
     }
   };
 
   const reset = () => replace({ cols: undefined, sc: undefined });
 
   const reorder = (fromKey: string, toKey: string) => {
     if (fromKey === toKey) return;
-    const arr = [...layout.visible];
-    const from = arr.findIndex((c) => keyFor(c) === fromKey);
-    const to = arr.findIndex((c) => keyFor(c) === toKey);
+    const arr = [...layout.ordered];
+    const from = arr.findIndex((o) => keyFor(o.col) === fromKey);
+    const to = arr.findIndex((o) => keyFor(o.col) === toKey);
     if (from < 0 || to < 0) return;
     const [moved] = arr.splice(from, 1);
     arr.splice(to, 0, moved);
-    applyVisible(arr);
+    applyLayout(arr);
   };
 
   const endDrag = () => {
@@ -121,49 +123,37 @@ export function RunsDisplayOptions() {
           <div className="flex items-center justify-between px-3 py-2">
             <span className="text-xs font-medium text-text-dimmed">Columns</span>
             <span className="text-xs text-text-dimmed">
-              {visibleStandardCount} of {available.length}
+              {shownCount} of {totalCount}
             </span>
           </div>
           <div className="max-h-80 overflow-y-auto border-y border-grid-dimmed">
-            {layout.visible.map((col) => (
-              <ColumnRow
-                key={keyFor(col)}
-                col={col}
-                checked
-                draggable
-                locked={col.kind === "standard" && !!col.def.locked}
-                dragging={dragKey === keyFor(col)}
-                isOver={overKey === keyFor(col) && dragKey !== keyFor(col)}
-                onDragStart={() => setDragKey(keyFor(col))}
-                onDragEnter={() => setOverKey(keyFor(col))}
-                onDragEnd={endDrag}
-                onDrop={() => {
-                  if (dragKey) reorder(dragKey, keyFor(col));
-                  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) => (
-              <ColumnRow
-                key={`std:${def.id}`}
-                col={{ kind: "standard", def }}
-                checked={false}
-                draggable={false}
-                locked={false}
-                dragging={false}
-                isOver={false}
-                onToggle={() => showStandard(def.id)}
-              />
-            ))}
+            {layout.ordered.map(({ col, hidden }) => {
+              const key = keyFor(col);
+              return (
+                <ColumnRow
+                  key={key}
+                  col={col}
+                  checked={!hidden}
+                  locked={col.kind === "standard" && !!col.def.locked}
+                  dragging={dragKey === key}
+                  isOver={overKey === key && dragKey !== key}
+                  onDragStart={() => setDragKey(key)}
+                  onDragEnter={() => setOverKey(key)}
+                  onDragEnd={endDrag}
+                  onDrop={() => {
+                    if (dragKey) reorder(dragKey, key);
+                    endDrag();
+                  }}
+                  onToggle={() => toggleHidden(key)}
+                  onEdit={
+                    col.kind === "smart"
+                      ? () => setEditing({ index: col.index, def: col.def })
+                      : undefined
+                  }
+                  onRemove={col.kind === "smart" ? () => removeSmart(col.index) : undefined}
+                />
+              );
+            })}
           </div>
           <div className="flex flex-col p-1">
             <button
@@ -205,29 +195,29 @@ export function RunsDisplayOptions() {
 function ColumnRow({
   col,
   checked,
-  draggable,
   locked,
   dragging,
   isOver,
   onToggle,
   onEdit,
+  onRemove,
   onDragStart,
   onDragEnter,
   onDragEnd,
   onDrop,
 }: {
   col: ResolvedColumn;
   checked: boolean;
-  draggable: boolean;
   locked: boolean;
   dragging: boolean;
   isOver: boolean;
   onToggle: () => void;
   onEdit?: () => void;
-  onDragStart?: () => void;
-  onDragEnter?: () => void;
-  onDragEnd?: () => void;
-  onDrop?: () => void;
+  onRemove?: () => void;
+  onDragStart: () => void;
+  onDragEnter: () => void;
+  onDragEnd: () => void;
+  onDrop: () => void;
 }) {
   const isSmart = col.kind === "smart";
 
@@ -237,18 +227,16 @@ function ColumnRow({
         "relative flex h-8 items-center gap-2 px-3 transition-colors hover:bg-charcoal-750",
         dragging && "opacity-40"
       )}
-      draggable={draggable}
+      draggable
       onDragStart={onDragStart}
       onDragEnter={onDragEnter}
       onDragEnd={onDragEnd}
-      onDragOver={(e) => {
-        if (draggable) e.preventDefault();
-      }}
+      onDragOver={(e) => e.preventDefault()}
       onDrop={onDrop}
     >
       {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" />}
+      {isSmart && <VariableIcon className="size-4 flex-none text-text-dimmed" />}
       <span
         className={cn("flex-1 truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}
       >
@@ -264,11 +252,17 @@ function ColumnRow({
           <PencilSquareIcon className="size-3.5" />
         </button>
       )}
-      {draggable ? (
-        <GripVerticalIcon className="size-4 cursor-grab text-text-dimmed active:cursor-grabbing" />
-      ) : (
-        <div className="size-4" />
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${col.def.label}`}
+          className="flex size-5 items-center justify-center rounded text-text-dimmed transition-colors hover:text-error focus-custom"
+        >
+          <XMarkIcon className="size-3.5" />
+        </button>
       )}
+      <GripVerticalIcon className="size-4 cursor-grab text-text-dimmed active:cursor-grabbing" />
     </div>
   );
 }

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

@@ -2,7 +2,7 @@ import {
   ArrowPathIcon,
   ArrowRightIcon,
   ClockIcon,
-  CodeBracketIcon,
+  VariableIcon,
   CpuChipIcon,
   NoSymbolIcon,
   RectangleStackIcon,
@@ -482,7 +482,7 @@ function SmartColumnHeader({ def }: { def: SmartColumnDef }) {
   return (
     <TableHeaderCell>
       <span className="flex items-center gap-1">
-        <CodeBracketIcon className="size-3.5 flex-none text-text-dimmed" />
+        <VariableIcon className="size-3.5 flex-none text-text-dimmed" />
         <span className="truncate">{def.label}</span>
       </span>
     </TableHeaderCell>