fix(webapp): drag-drop index, length-key sample path, live-poll payload, formatting

- Insert a downward-dragged column before the hovered row (adjust the target index after removal) so it lands where the drop indicator showed.
- Emit bracket notation for a sample key named 'length' so the column reads that property instead of a computed count.
- Stop re-selecting the immutable payload on the 3s live poll; only metadata/output can change while a run is in flight, and the merge preserves the existing payload.
- Apply oxfmt formatting.

Author: ericallam

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

@@ -105,7 +105,7 @@ export function RunsDisplayOptions() {
     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);
+    arr.splice(from < to ? to - 1 : to, 0, moved);
     applyLayout(arr);
   };
 
@@ -260,9 +260,7 @@ function ColumnRow({
       {isOver && <div className="absolute inset-x-0 top-0 h-0.5 bg-blue-500" />}
       {locked ? <Checkbox checked disabled /> : <Checkbox checked={checked} onChange={onToggle} />}
       <span className="flex min-w-0 flex-1 items-center gap-1.5">
-        <span
-          className={cn("truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}
-        >
+        <span className={cn("truncate text-sm", checked ? "text-text-bright" : "text-text-dimmed")}>
           {col.def.label}
         </span>
         {isSmart && <BoltIcon className="size-3.5 flex-none text-text-dimmed" />}

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

@@ -34,7 +34,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}`;
+  if (key !== "length" && /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) return `${parentPath}.${key}`;
   return `${parentPath}['${key.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`;
 }
 

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

@@ -1,11 +1,6 @@
 import superjson from "superjson";
 import { describe, expect, it } from "vitest";
-import {
-  extractSmartValue,
-  getAtPath,
-  labelFromPath,
-  parseSource,
-} from "./smartColumnData";
+import { extractSmartValue, getAtPath, labelFromPath, parseSource } from "./smartColumnData";
 
 describe("parseSource", () => {
   it("reports empty for missing data", () => {

apps/webapp/app/components/runs/v3/smartColumnData.ts

@@ -95,8 +95,10 @@ export function getAtPath(root: unknown, path: string): unknown {
 
     if (match[1] !== undefined) tokens.push({ kind: "dot", key: match[1] });
     else if (match[2] !== undefined) tokens.push({ kind: "index", index: Number(match[2]) });
-    else if (match[3] !== undefined) tokens.push({ kind: "key", key: unescapeBracketKey(match[3]) });
-    else if (match[4] !== undefined) tokens.push({ kind: "key", key: unescapeBracketKey(match[4]) });
+    else if (match[3] !== undefined)
+      tokens.push({ kind: "key", key: unescapeBracketKey(match[3]) });
+    else if (match[4] !== undefined)
+      tokens.push({ kind: "key", key: unescapeBracketKey(match[4]) });
   }
   if (lastIndex !== normalized.length) return undefined;
 

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.live.ts

@@ -48,7 +48,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             projectId: project.id,
             environmentId: environment.id,
             runId: runIds,
-            runSelect: deriveRunSelect(columns.visibleStandardIds, columns.smartSources),
+            runSelect: deriveRunSelect(
+              columns.visibleStandardIds,
+              columns.smartSources.filter((source) => source !== "payload")
+            ),
             page: { size: 100 },
           })
           .then(({ runs: listedRuns }) => listedRuns.map(mapRunToLiveFields))

apps/webapp/app/services/runsRepository/clickhouseRunsRepository.server.ts

@@ -308,18 +308,20 @@ export class ClickHouseRunsRepository implements IRunsRepository {
       ? { ...options.runSelect, id: true }
       : LIST_RUN_DEFAULT_SELECT;
 
-    let runs = await this.#hydrateRunsByIds<ListedRun>(runIds, (client, ids) =>
-      store.findRuns(
-        {
-          where: {
-            id: {
-              in: boundedIn(ids),
+    let runs = await this.#hydrateRunsByIds<ListedRun>(
+      runIds,
+      (client, ids) =>
+        store.findRuns(
+          {
+            where: {
+              id: {
+                in: boundedIn(ids),
+              },
             },
+            select,
           },
-          select,
-        },
-        client
-      ) as Promise<ListedRun[]>
+          client
+        ) as Promise<ListedRun[]>
     );
 
     // ClickHouse is slightly delayed, so we're going to do in-memory status filtering too