fix(webapp): address PR review on runs-list column customization

- Import ResolvedColumn in runColumns.test.ts (typecheck).
- Populate payload/output smart columns on the per-task, scheduled, agent and error run lists by threading the column select through those loaders and ErrorGroupPresenter (previously only the main runs list did).
- Memoize per-row source parsing so payload/output are decoded once per run rather than on every render / live-poll tick.
- Support column reordering in Firefox (set drag data on dragstart, preventDefault on drop) and add keyboard reordering via the grip handle (arrow up/down), revealing row controls on focus.
- Show the tags cell placeholder for an empty tag list, and let a live update clear a source value instead of keeping stale data.
- Escape backslashes in bracket-notation sample paths.

Author: ericallam

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

@@ -109,6 +109,16 @@ export function RunsDisplayOptions() {
     applyLayout(arr);
   };
 
+  const move = (key: string, delta: number) => {
+    const arr = [...layout.ordered];
+    const from = arr.findIndex((o) => keyFor(o.col) === key);
+    const to = from + delta;
+    if (from < 0 || to < 0 || to >= arr.length) return;
+    const [moved] = arr.splice(from, 1);
+    arr.splice(to, 0, moved);
+    applyLayout(arr);
+  };
+
   const endDrag = () => {
     setDragKey(null);
     setOverKey(null);
@@ -148,6 +158,7 @@ export function RunsDisplayOptions() {
                     endDrag();
                   }}
                   onToggle={() => toggleHidden(key)}
+                  onMove={(delta) => move(key, delta)}
                   onEdit={
                     col.kind === "smart"
                       ? () => setEditing({ index: col.index, def: col.def })
@@ -199,10 +210,10 @@ function ColumnRow({
   col,
   checked,
   locked,
-  reserveIcon,
   dragging,
   isOver,
   onToggle,
+  onMove,
   onEdit,
   onRemove,
   onDragStart,
@@ -216,6 +227,7 @@ function ColumnRow({
   dragging: boolean;
   isOver: boolean;
   onToggle: () => void;
+  onMove: (delta: number) => void;
   onEdit?: () => void;
   onRemove?: () => void;
   onDragStart: () => void;
@@ -232,11 +244,18 @@ function ColumnRow({
         dragging && "opacity-40"
       )}
       draggable
-      onDragStart={onDragStart}
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", "");
+        onDragStart();
+      }}
       onDragEnter={onDragEnter}
       onDragEnd={onDragEnd}
       onDragOver={(e) => e.preventDefault()}
-      onDrop={onDrop}
+      onDrop={(e) => {
+        e.preventDefault();
+        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} />}
@@ -254,7 +273,7 @@ function ColumnRow({
             type="button"
             onClick={onEdit}
             aria-label={`Edit ${col.def.label}`}
-            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom group-hover:opacity-100"
+            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom group-hover:opacity-100 group-focus-within:opacity-100"
           >
             <PencilSquareIcon className="size-4" />
           </button>
@@ -264,14 +283,27 @@ function ColumnRow({
             type="button"
             onClick={onRemove}
             aria-label={`Remove ${col.def.label}`}
-            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-error focus-custom group-hover:opacity-100"
+            className="flex size-6 items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-error focus-custom group-hover:opacity-100 group-focus-within:opacity-100"
           >
             <XMarkIcon className="size-4" />
           </button>
         )}
-        <span className="flex size-6 cursor-grab items-center justify-center text-text-dimmed opacity-0 transition group-hover:opacity-100 active:cursor-grabbing">
+        <button
+          type="button"
+          aria-label={`Reorder ${col.def.label} (use arrow up and down)`}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              onMove(-1);
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              onMove(1);
+            }
+          }}
+          className="flex size-6 cursor-grab items-center justify-center rounded text-text-dimmed opacity-0 transition hover:bg-charcoal-700 hover:text-text-bright focus-custom group-hover:opacity-100 group-focus-within:opacity-100 active:cursor-grabbing"
+        >
           <GripVerticalIcon className="size-4" />
-        </span>
+        </button>
       </div>
     </div>
   );

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

@@ -35,7 +35,7 @@ export function SmartColumnSample({
 function childPath(parentPath: string, key: string | number): string {
   if (typeof key === "number") return `${parentPath}[${key}]`;
   if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) return `${parentPath}.${key}`;
-  return `${parentPath}['${key.replace(/'/g, "\\'")}']`;
+  return `${parentPath}['${key.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`;
 }
 
 function JsonNode({

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

@@ -472,7 +472,7 @@ const STANDARD_RENDERERS: Record<string, StandardColumnRenderer> = {
     cell: ({ run, path }) => (
       <TableCell to={path} actionClassName="py-1" className="pr-16">
         <div className="flex gap-1">
-          {run.tags.map((tag) => <RunTag key={tag} tag={tag} />) || "–"}
+          {run.tags.length > 0 ? run.tags.map((tag) => <RunTag key={tag} tag={tag} />) : "–"}
         </div>
       </TableCell>
     ),
@@ -511,6 +511,8 @@ function SmartColumnCell({
   );
 }
 
+const EMPTY_SOURCES: Partial<Record<SmartColumnSource, ParsedSource>> = {};
+
 function buildRowSources(
   run: NextRunListItem,
   sources: SmartColumnSource[]
@@ -611,6 +613,15 @@ export function TaskRunsTable({
   const visibleColumns = layout.visible;
   const referencedSources = useMemo(() => visibleSmartSources(visibleColumns), [visibleColumns]);
 
+  const sourcesByRunId = useMemo(() => {
+    const map = new Map<string, Partial<Record<SmartColumnSource, ParsedSource>>>();
+    if (referencedSources.length === 0) return map;
+    for (const run of runs) {
+      map.set(run.id, buildRowSources(run, referencedSources));
+    }
+    return map;
+  }, [runs, referencedSources]);
+
   const dataColSpan = visibleColumns.reduce(
     (sum, col) => sum + (col.kind === "standard" ? (STANDARD_RENDERERS[col.def.id]?.span ?? 1) : 1),
     0
@@ -705,7 +716,7 @@ export function TaskRunsTable({
               },
               searchParams
             );
-            const sources = buildRowSources(run, referencedSources);
+            const sources = sourcesByRunId.get(run.id) ?? EMPTY_SOURCES;
             return (
               <TableRow key={run.id}>
                 {allowSelection && (

apps/webapp/app/components/runs/v3/runColumns.test.ts

@@ -6,6 +6,7 @@ import {
   encodeColumnLayout,
   encodeSmartColumn,
   resolveColumnLayout,
+  type ResolvedColumn,
   type RunColumnRuntime,
   type SmartColumnDef,
 } from "./runColumns";

apps/webapp/app/presenters/v3/ErrorGroupPresenter.server.ts

@@ -13,6 +13,12 @@ import {
   type NextRunList,
 } from "~/presenters/v3/NextRunListPresenter.server";
 import { sortVersionsDescending } from "~/utils/semver";
+import type { RunColumnId, SmartColumnSource } from "~/components/runs/v3/runColumns";
+
+type RunColumnsSelect = {
+  visibleStandardIds: RunColumnId[];
+  smartSources: SmartColumnSource[];
+};
 
 const errorGroupGranularity = new TimeGranularity([
   { max: "1h", granularity: "1m" },
@@ -34,6 +40,7 @@ export type ErrorGroupOptions = {
   to?: number;
   cursor?: string;
   direction?: Direction;
+  columns?: RunColumnsSelect;
 };
 
 export const ErrorGroupOptionsSchema = z.object({
@@ -115,6 +122,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       to,
       cursor,
       direction,
+      columns,
     }: ErrorGroupOptions
   ) {
     const displayableEnvironment = await findDisplayableEnvironment(environmentId, userId);
@@ -144,6 +152,7 @@ export class ErrorGroupPresenter extends BasePresenter {
         to: time.to.getTime(),
         cursor,
         direction,
+        columns,
       }),
       this.getState(environmentId, summary?.taskIdentifier, fingerprint),
     ]);
@@ -413,6 +422,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       to?: number;
       cursor?: string;
       direction?: Direction;
+      columns?: RunColumnsSelect;
     }
   ): Promise<NextRunList | undefined> {
     const runListPresenter = new NextRunListPresenter(this.replica, this.clickhouse);
@@ -428,6 +438,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       to: options.to,
       cursor: options.cursor,
       direction: options.direction,
+      columns: options.columns,
     });
 
     if (result.runs.length === 0) {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx

@@ -38,6 +38,7 @@ import {
   type AgentDetail,
 } from "~/presenters/v3/AgentDetailPresenter.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
+import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
 import { SessionListPresenter } from "~/presenters/v3/SessionListPresenter.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { getResizableSnapshot } from "~/services/resizablePanel.server";
@@ -162,6 +163,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       to,
       cursor,
       direction,
+      columns: getRunColumnsForSelect(request),
     })
     .catch(() => null);
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx

@@ -74,6 +74,7 @@ import {
   type ErrorGroupSummary,
 } from "~/presenters/v3/ErrorGroupPresenter.server";
 import { type NextRunList } from "~/presenters/v3/NextRunListPresenter.server";
+import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { rbac } from "~/services/rbac.server";
@@ -268,6 +269,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       to,
       cursor,
       direction,
+      columns: getRunColumnsForSelect(request),
     })
     .catch((error) => {
       if (error instanceof ServiceValidationError) {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/useRunsLiveReload.ts

@@ -87,12 +87,12 @@ function patchVisibleRunsWithLiveUpdates(currentRuns: ListedRun[], liveRuns: Liv
       usageDurationMs: update.usageDurationMs,
       costInCents: update.costInCents,
       baseCostInCents: update.baseCostInCents,
-      metadata: update.metadata ?? run.metadata,
-      metadataType: update.metadataType ?? run.metadataType,
-      payload: update.payload ?? run.payload,
-      payloadType: update.payloadType ?? run.payloadType,
-      output: update.output ?? run.output,
-      outputType: update.outputType ?? run.outputType,
+      metadata: update.metadata !== undefined ? update.metadata : run.metadata,
+      metadataType: update.metadataType !== undefined ? update.metadataType : run.metadataType,
+      payload: update.payload !== undefined ? update.payload : run.payload,
+      payloadType: update.payloadType !== undefined ? update.payloadType : run.payloadType,
+      output: update.output !== undefined ? update.output : run.output,
+      outputType: update.outputType !== undefined ? update.outputType : run.outputType,
     };
   });
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx

@@ -75,6 +75,7 @@ import { useZoomToTimeFilter } from "~/hooks/useZoomToTimeFilter";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
+import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
 import { ScheduleListPresenter } from "~/presenters/v3/ScheduleListPresenter.server";
 import {
   TaskDetailPresenter,
@@ -219,6 +220,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       cursor,
       direction,
       includeHasAnyRuns: true,
+      columns: getRunColumnsForSelect(request),
     })
     .catch(() => null);
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx

@@ -46,6 +46,7 @@ import { useSearchParams } from "~/hooks/useSearchParam";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
+import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
 import {
   TaskDetailPresenter,
   type TaskActivity,
@@ -163,6 +164,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       cursor,
       direction,
       includeHasAnyRuns: true,
+      columns: getRunColumnsForSelect(request),
     })
     .catch(() => null);