feat(webapp): compact column URL state

Column state is now delta-encoded: order is written only when it differs
from the default, and hidden columns are a single `hide` list. Removing
one column produces `?hide=ver` instead of the whole ordered list.

Author: ericallam

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

@@ -18,6 +18,7 @@ import { useSearchParams } from "~/hooks/useSearchParam";
 import { cn } from "~/utils/cn";
 import {
   encodeColumnLayout,
+  parseColumnParams,
   resolveColumnLayout,
   type LayoutColumn,
   type ResolvedColumn,
@@ -36,7 +37,7 @@ export function RunsDisplayOptions() {
   const environment = useEnvironment();
   const { isManagedCloud } = useFeatures();
   const location = useOptimisticLocation();
-  const { values, replace } = useSearchParams();
+  const { value, values, replace } = useSearchParams();
   const [addOpen, setAddOpen] = useState(false);
   const [editing, setEditing] = useState<SmartEditTarget | null>(null);
   const [dragKey, setDragKey] = useState<string | null>(null);
@@ -47,12 +48,13 @@ export function RunsDisplayOptions() {
     isDevelopment: environment.type === "DEVELOPMENT",
   };
 
-  const cols = values("cols");
+  const colsParam = value("cols");
+  const hideParam = value("hide");
   const sc = values("sc");
   const layout = useMemo(
-    () => resolveColumnLayout({ cols, sc }, runtime),
+    () => resolveColumnLayout(parseColumnParams(colsParam, sc, hideParam), runtime),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cols.join(" "), sc.join(" "), runtime.isManagedCloud, runtime.isDevelopment]
+    [colsParam, hideParam, sc.join(" "), runtime.isManagedCloud, runtime.isDevelopment]
   );
 
   const totalCount = layout.ordered.filter((o) => o.col.kind === "standard").length;
@@ -61,11 +63,14 @@ export function RunsDisplayOptions() {
   const applyLayout = (next: LayoutColumn[]) => {
     const encoded = encodeColumnLayout(next, runtime);
     replace({
-      cols: encoded.cols.length > 0 ? encoded.cols : undefined,
+      cols: encoded.cols.length > 0 ? encoded.cols.join(",") : undefined,
       sc: encoded.sc.length > 0 ? encoded.sc : undefined,
+      hide: encoded.hide.length > 0 ? encoded.hide.join(",") : undefined,
     });
   };
 
+  const reset = () => replace({ cols: undefined, sc: undefined, hide: undefined });
+
   const toggleHidden = (key: string) => {
     applyLayout(
       layout.ordered.map((o) => (keyFor(o.col) === key ? { ...o, hidden: !o.hidden } : o))
@@ -93,8 +98,6 @@ export function RunsDisplayOptions() {
     }
   };
 
-  const reset = () => replace({ cols: undefined, sc: undefined });
-
   const reorder = (fromKey: string, toKey: string) => {
     if (fromKey === toKey) return;
     const arr = [...layout.ordered];

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

@@ -66,6 +66,7 @@ import { useSearchParams } from "~/hooks/useSearchParam";
 import type { TaskTriggerSource } from "@trigger.dev/database";
 import { BeakerIcon } from "~/assets/icons/BeakerIcon";
 import {
+  parseColumnParams,
   resolveColumnLayout,
   visibleSmartSources,
   type ResolvedColumn,
@@ -655,15 +656,15 @@ export function TaskRunsTable({
   const tableStateParam = disableAdjacentRows ? "" : encodeURIComponent(search);
 
   const isDevelopment = environment.type === "DEVELOPMENT";
-  const colsFromUrl = values("cols");
+  const colsParam = value("cols");
+  const hideParam = value("hide");
   const scFromUrl = values("sc");
-  const colsKey = colsFromUrl.join(" ");
   const scKey = scFromUrl.join(" ");
   const layout = useMemo(() => {
     const runtime: RunColumnRuntime = { isManagedCloud, isDevelopment };
-    return resolveColumnLayout({ cols: colsFromUrl, sc: scFromUrl }, runtime);
+    return resolveColumnLayout(parseColumnParams(colsParam, scFromUrl, hideParam), runtime);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colsKey, scKey, isManagedCloud, isDevelopment]);
+  }, [colsParam, hideParam, scKey, isManagedCloud, isDevelopment]);
 
   const visibleColumns = layout.visible;
   const referencedSources = useMemo(() => visibleSmartSources(visibleColumns), [visibleColumns]);

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

@@ -88,47 +88,48 @@ const orderedIds = (layout: { ordered: { col: ResolvedColumn }[] }) =>
 const visibleIds = (layout: { visible: ResolvedColumn[] }) =>
   layout.visible.map((c) => (c.kind === "standard" ? c.def.id : c.def.label));
 
+const params = (over: Partial<{ cols: string[]; sc: string[]; hide: string[] }> = {}) => ({
+  cols: [],
+  sc: [],
+  hide: [],
+  ...over,
+});
+
 describe("resolveColumnLayout", () => {
-  it("returns the default layout when cols is absent", () => {
-    const layout = resolveColumnLayout({ cols: [], sc: [] }, cloud);
+  it("returns the default layout when no params are set", () => {
+    const layout = resolveColumnLayout(params(), cloud);
     expect(layout.isCustomized).toBe(false);
     expect(layout.ordered.every((o) => !o.hidden)).toBe(true);
     expect(layout.ordered[0].col).toMatchObject({ kind: "standard", def: { id: "id" } });
     expect(layout.visible).toHaveLength(availableStandardColumns(cloud).length);
   });
 
   it("keeps every column in the requested order (columns are reorderable)", () => {
-    const layout = resolveColumnLayout({ cols: ["task", "status", "id"], sc: [] }, cloud);
+    const layout = resolveColumnLayout(params({ cols: ["task", "status", "id"] }), cloud);
     expect(orderedIds(layout).slice(0, 3)).toEqual(["task", "status", "id"]);
   });
 
-  it("hides a `-`-prefixed column in place without dropping it from the order", () => {
-    const layout = resolveColumnLayout(
-      { cols: ["id", "task", "status", "ver", "-ttl", "tags"], sc: [] },
-      cloud
-    );
+  it("hides columns from the `hide` list in place, keeping the default order", () => {
+    const layout = resolveColumnLayout(params({ hide: ["ttl"] }), cloud);
     const ttl = layout.ordered.find((o) => o.col.kind === "standard" && o.col.def.id === "ttl");
     expect(ttl?.hidden).toBe(true);
     const ids = orderedIds(layout);
-    expect(ids.indexOf("ttl")).toBeGreaterThan(ids.indexOf("ver"));
     expect(ids.indexOf("ttl")).toBeLessThan(ids.indexOf("tags"));
     expect(visibleIds(layout)).not.toContain("ttl");
   });
 
-  it("never hides locked columns, even with a `-` prefix", () => {
-    const layout = resolveColumnLayout({ cols: ["id", "-task", "-status", "ver"], sc: [] }, cloud);
-    const locked = layout.ordered.filter(
-      (o) => o.col.kind === "standard" && o.col.def.locked
-    );
+  it("never hides locked columns even if the `hide` list names them", () => {
+    const layout = resolveColumnLayout(params({ hide: ["task", "status"] }), cloud);
+    const locked = layout.ordered.filter((o) => o.col.kind === "standard" && o.col.def.locked);
     expect(locked.every((o) => !o.hidden)).toBe(true);
   });
 
   it("reinserts standard columns missing from the URL as visible", () => {
-    const layout = resolveColumnLayout({ cols: ["id", "ver"], sc: [] }, cloud);
+    const layout = resolveColumnLayout(params({ cols: ["id", "ver"] }), cloud);
     expect(visibleIds(layout)).toEqual(expect.arrayContaining(["task", "status", "tags", "ttl"]));
   });
 
-  it("resolves smart-column refs positionally", () => {
+  it("resolves smart-column refs positionally, even without a cols order", () => {
     const sc = [
       encodeSmartColumn({
         source: "metadata",
@@ -137,28 +138,52 @@ describe("resolveColumnLayout", () => {
         displayAs: "number",
       }),
     ];
-    const layout = resolveColumnLayout({ cols: ["id", "sc1"], sc }, cloud);
+    const layout = resolveColumnLayout(params({ sc }), cloud);
     const smart = layout.visible.find((c) => c.kind === "smart");
     expect(smart).toMatchObject({ kind: "smart", def: { label: "Failed", source: "metadata" } });
   });
 
   it("drops gated columns referenced on a runtime that lacks them", () => {
-    const layout = resolveColumnLayout({ cols: ["id", "region", "compute", "task"], sc: [] }, dev);
+    const layout = resolveColumnLayout(params({ cols: ["id", "region", "compute", "task"] }), dev);
     expect(orderedIds(layout)).not.toContain("region");
     expect(orderedIds(layout)).not.toContain("compute");
     expect(orderedIds(layout).slice(0, 2)).toEqual(["id", "task"]);
   });
 });
 
-describe("encodeColumnLayout round-trip", () => {
+describe("encodeColumnLayout compactness + round-trip", () => {
   const std = (id: string) => ({
     kind: "standard" as const,
     def: availableStandardColumns(cloud).find((c) => c.id === id)!,
   });
 
   it("encodes the default layout to empty params", () => {
-    const layout = resolveColumnLayout({ cols: [], sc: [] }, cloud);
-    expect(encodeColumnLayout(layout.ordered, cloud)).toEqual({ cols: [], sc: [] });
+    const layout = resolveColumnLayout(params(), cloud);
+    expect(encodeColumnLayout(layout.ordered, cloud)).toEqual({ cols: [], sc: [], hide: [] });
+  });
+
+  it("hiding a column with the default order emits only a hide entry, no cols", () => {
+    const layout = resolveColumnLayout(params({ hide: ["ver"] }), cloud);
+    const encoded = encodeColumnLayout(layout.ordered, cloud);
+    expect(encoded.cols).toEqual([]);
+    expect(encoded.hide).toEqual(["ver"]);
+    expect(encoded.sc).toEqual([]);
+  });
+
+  it("appending a smart column with the default order emits only sc, no cols", () => {
+    const scDef: SmartColumnDef = {
+      source: "metadata",
+      path: "$.failed",
+      label: "Failed",
+      displayAs: "number",
+    };
+    const layout = resolveColumnLayout(params(), cloud);
+    const encoded = encodeColumnLayout(
+      [...layout.ordered, { col: { kind: "smart", index: 0, def: scDef }, hidden: false }],
+      cloud
+    );
+    expect(encoded.cols).toEqual([]);
+    expect(encoded.sc).toHaveLength(1);
   });
 
   it("round-trips a reordered, hidden, smart-augmented layout", () => {
@@ -177,7 +202,8 @@ describe("encodeColumnLayout round-trip", () => {
       ],
       cloud
     );
-    expect(encoded.cols).toEqual(["id", "status", "-ttl", "sc1"]);
+    expect(encoded.cols).toEqual(["id", "status", "ttl", "sc1"]);
+    expect(encoded.hide).toEqual(["ttl"]);
     expect(encoded.sc).toHaveLength(1);
 
     const layout = resolveColumnLayout(encoded, cloud);

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

@@ -268,58 +268,77 @@ export type ColumnLayout = {
   isCustomized: boolean;
 };
 
-/** A hidden column is written into `cols` with this prefix, keeping its slot. */
-const HIDDEN_PREFIX = "-";
+export type ColumnLayoutParams = { cols: string[]; sc: string[]; hide: string[] };
+export type EncodedColumnLayout = { cols: string[]; sc: string[]; hide: string[] };
 
 /**
- * Resolve the on-screen layout from the URL params and the runtime gates. `cols`
- * carries the full column order; a `-`-prefixed token is hidden but keeps its
- * position. When `cols` is absent the default layout (all available standard
- * columns in default order, nothing hidden) is returned and `sc` is ignored.
+ * The order columns take when `cols` is absent: standard columns in default
+ * order, then smart columns in their `sc` definition order.
+ */
+function canonicalOrder(available: StandardColumnDef[], smartCount: number): string[] {
+  return [
+    ...available.map((def) => def.id as string),
+    ...Array.from({ length: smartCount }, (_, i) => smartColumnRef(i)),
+  ];
+}
+
+/**
+ * Resolve the on-screen layout from the URL params and the runtime gates.
+ * `cols` is present only when the order differs from the default; otherwise the
+ * default order is used. `hide` lists the columns that are hidden but still
+ * occupy their slot, so hiding a column does not rewrite the whole order.
  */
 export function resolveColumnLayout(
-  params: { cols: string[]; sc: string[] },
+  params: ColumnLayoutParams,
   runtime: RunColumnRuntime
 ): ColumnLayout {
   const available = availableStandardColumns(runtime);
   const availableById = new Map(available.map((c) => [c.id, c] as const));
   const smartColumns = params.sc
     .map(decodeSmartColumn)
     .filter((c): c is SmartColumnDef => c !== undefined);
+  const hideSet = new Set(params.hide);
 
-  if (params.cols.length === 0) {
-    const ordered = available.map<LayoutColumn>((def) => ({
-      col: { kind: "standard", def },
-      hidden: false,
-    }));
-    return { ordered, visible: ordered.map((o) => o.col), smartColumns, isCustomized: false };
-  }
+  const baseTokens =
+    params.cols.length > 0 ? params.cols : canonicalOrder(available, smartColumns.length);
 
   const ordered: LayoutColumn[] = [];
   const seenStandard = new Set<RunColumnId>();
+  const seenSmart = new Set<number>();
 
-  for (const token of params.cols) {
-    const hidden = token.startsWith(HIDDEN_PREFIX);
-    const base = hidden ? token.slice(HIDDEN_PREFIX.length) : token;
-
-    const smartIndex = parseSmartColumnRef(base);
+  for (const token of baseTokens) {
+    const smartIndex = parseSmartColumnRef(token);
     if (smartIndex !== undefined) {
       const def = smartColumns[smartIndex];
-      if (def) ordered.push({ col: { kind: "smart", index: smartIndex, def }, hidden });
+      if (!def || seenSmart.has(smartIndex)) continue;
+      ordered.push({ col: { kind: "smart", index: smartIndex, def }, hidden: hideSet.has(token) });
+      seenSmart.add(smartIndex);
       continue;
     }
 
-    if (seenStandard.has(base as RunColumnId)) continue;
-    const def = availableById.get(base as RunColumnId);
+    if (seenStandard.has(token as RunColumnId)) continue;
+    const def = availableById.get(token as RunColumnId);
     if (!def) continue;
-    ordered.push({ col: { kind: "standard", def }, hidden: hidden && !def.locked });
+    ordered.push({
+      col: { kind: "standard", def },
+      hidden: hideSet.has(token) && !def.locked,
+    });
     seenStandard.add(def.id);
   }
 
   ensureAllStandardColumnsPresent(ordered, seenStandard, available);
 
+  for (let i = 0; i < smartColumns.length; i++) {
+    if (seenSmart.has(i)) continue;
+    ordered.push({
+      col: { kind: "smart", index: i, def: smartColumns[i] },
+      hidden: hideSet.has(smartColumnRef(i)),
+    });
+  }
+
   const visible = ordered.filter((o) => !o.hidden).map((o) => o.col);
-  return { ordered, visible, smartColumns, isCustomized: true };
+  const isCustomized = params.cols.length > 0 || params.hide.length > 0 || smartColumns.length > 0;
+  return { ordered, visible, smartColumns, isCustomized };
 }
 
 /**
@@ -349,25 +368,16 @@ function ensureAllStandardColumnsPresent(
 }
 
 /**
- * Serialize a layout back to `cols`/`sc` params. Returns empty arrays for the
- * default layout so the URL stays clean (the caller deletes both keys).
+ * Serialize a layout to compact `cols`/`sc`/`hide` params. `cols` is omitted
+ * whenever the order still matches the default, so hiding a column produces just
+ * a `hide` entry rather than the entire ordered list. All arrays empty means the
+ * default layout, and the caller deletes the keys.
  */
 export function encodeColumnLayout(
   ordered: LayoutColumn[],
   runtime: RunColumnRuntime
-): { cols: string[]; sc: string[] } {
+): EncodedColumnLayout {
   const available = availableStandardColumns(runtime);
-  const hasSmart = ordered.some((o) => o.col.kind === "smart");
-  const isDefault =
-    !hasSmart &&
-    ordered.length === available.length &&
-    ordered.every(
-      (o, i) => o.col.kind === "standard" && o.col.def.id === available[i]?.id && !o.hidden
-    );
-
-  if (isDefault) {
-    return { cols: [], sc: [] };
-  }
 
   const sc: string[] = [];
   const smartRefByIndex = new Map<number, string>();
@@ -379,12 +389,31 @@ export function encodeColumnLayout(
     }
   }
 
-  const cols = ordered.map(({ col, hidden }) => {
-    const base = col.kind === "standard" ? col.def.id : (smartRefByIndex.get(col.index) as string);
-    return hidden ? `${HIDDEN_PREFIX}${base}` : base;
-  });
+  const tokenFor = (col: ResolvedColumn) =>
+    col.kind === "standard" ? (col.def.id as string) : (smartRefByIndex.get(col.index) as string);
+
+  const baseTokens = ordered.map(({ col }) => tokenFor(col));
+  const hide = ordered.filter((o) => o.hidden).map(({ col }) => tokenFor(col));
+
+  const canonical = canonicalOrder(available, sc.length);
+  const orderIsDefault =
+    baseTokens.length === canonical.length && baseTokens.every((t, i) => t === canonical[i]);
 
-  return { cols, sc };
+  return { cols: orderIsDefault ? [] : baseTokens, sc, hide };
+}
+
+/**
+ * Parse the raw URL values into layout params. `cols` and `hide` are single
+ * comma-joined params; `sc` is repeated.
+ */
+export function parseColumnParams(
+  cols: string | null | undefined,
+  sc: string[],
+  hide: string | null | undefined
+): ColumnLayoutParams {
+  const split = (value: string | null | undefined) =>
+    value ? value.split(",").filter(Boolean) : [];
+  return { cols: split(cols), sc, hide: split(hide) };
 }
 
 /** The set of smart-column sources referenced by the visible layout. */