feat(webapp): customizable runs list with columns and smart columns (#4652)

## Summary

Makes the runs list customizable. A new **Display** control lets you
show, hide, and reorder columns, and add **smart columns** that pull a
single value out of a run's payload, metadata, or output by JSON path
(e.g. `$.failed`, `$.order.total`). Column choices live in the page URL,
so a view can be bookmarked or shared. Applies to the global runs list
and every per-task / scheduled / agent / webhook / error list, which all
share one table.

ID, Task, and Status can be reordered but not hidden. Smart columns are
display-only (no sort or filter, which would defeat the ClickHouse sort
key and cursor).

## How it works

Columns come from a shared registry; the Postgres `select` is derived
from the visible columns, so a run's large payload/output are only
hydrated when a smart column actually references them. All JSON parsing
for smart columns happens client-side, respecting the packet content
type, parsed once per source per row. Offloaded (too-large) values and
paths that aren't present render distinct placeholders rather than
fetching per row. The live poll carries the same sources so smart-column
values update in place.

Scalar columns stay always-selected for now: the shared list presenter
has a fixed output shape consumed by several routes and the live poll,
and narrowing individual scalar fields would add no real query cost
benefit on a single-row read. The select derivation is already
column-driven, so tightening this later is a one-line change.

## Screenshots

<img width="590" height="1028" alt="CleanShot 2026-08-21 at 16 48 17@2x"
src="https://github.com/user-attachments/assets/86b39856-bfcc-47c0-85ed-ee6ccddc3590"
/>
<img width="1924" height="1528" alt="CleanShot 2026-08-21 at 16 48
27@2x"
src="https://github.com/user-attachments/assets/6c766249-6d5b-45be-9330-c6caa75af7f7"
/>


<!-- conductor-workspace-link -->

---

[Open workspace in
Conductor](https://app.conductor.build/workspace/d6911080-2140-4de1-b88a-1b0623593caa)

---------

Co-authored-by: James Ritchie <james@trigger.dev>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: 3 people

.server-changes/runs-list-column-customization.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Customize the runs list: show, hide, and reorder columns, and add smart columns that pull a value straight out of a run's payload, metadata, or output. Your column choices are saved in the page URL, so you can share a view, bookmark it, or save it straight to your favorites.

apps/webapp/app/assets/icons/ColumnsIcon.tsx

@@ -0,0 +1,9 @@
+export function ColumnsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      <line x1="9" y1="19" x2="9" y2="5" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="19" x2="15" y2="5" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/ResetIcon.tsx

@@ -0,0 +1,20 @@
+export function ResetIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7 3L4 6L7 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 6H13.5C17.0899 6 20 8.91015 20 12.5C20 16.0899 17.0899 19 13.5 19H6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/SmartColumnIcon.tsx

@@ -0,0 +1,13 @@
+/** Marks a smart column: in the runs table header, the Columns popover, and the dialog preview. */
+export function SmartColumnIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.94723 12.4318L12.3011 3.53646C12.9468 2.63242 14.3689 3.24855 14.1511 4.33794L13.1543 9.32131C13.0905 9.64031 13.3346 9.93793 13.6599 9.93793H17.2138C18.0524 9.93793 18.5402 10.8859 18.0527 11.5682L11.6989 20.4636C11.0532 21.3676 9.63107 20.7515 9.84895 19.6621L10.8456 14.6788C10.9095 14.3598 10.6654 14.0621 10.3401 14.0621H6.78622C5.9476 14.0621 5.45978 13.1142 5.94723 12.4318Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/Shortcuts.tsx

@@ -6,6 +6,7 @@ import { ASK_AI_SHORTCUT, askAiCanOpen } from "~/components/dashboard-agent/ask-
 import { useDashboardAgentAvailable } from "~/components/dashboard-agent/dashboardAgentOpenRequest";
 import { NEW_CHAT_SHORTCUT } from "~/components/dashboard-agent/DashboardAgentHeader";
 import { TOGGLE_PANEL_SHORTCUT } from "~/components/dashboard-agent/dashboardAgentLauncher";
+import { COLUMNS_SHORTCUT } from "~/components/runs/v3/RunsDisplayOptions";
 import { useAskAiAvailability } from "~/hooks/useAskAiAvailability";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { Header3 } from "./primitives/Headers";
@@ -142,6 +143,9 @@ function ShortcutContent() {
           )}
           <div className="space-y-3">
             <Header3>Runs page</Header3>
+            <Shortcut name="Customize columns">
+              <ShortcutKey shortcut={COLUMNS_SHORTCUT} variant="medium/bright" />
+            </Shortcut>
             <Shortcut name="Bulk action: Cancel runs">
               <ShortcutKey shortcut={{ key: "c" }} variant="medium/bright" />
             </Shortcut>

apps/webapp/app/components/navigation/FavoritePageButton.tsx

@@ -1,23 +1,14 @@
 import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 import { StarIcon as StarIconSolid } from "@heroicons/react/20/solid";
-import { useFetcher, useLocation, useSearchParams } from "@remix-run/react";
+import { useLocation, useSearchParams } from "@remix-run/react";
 import { useEffect } from "react";
-import { useIsImpersonating } from "~/hooks/useOrganizations";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 import { Button } from "../primitives/Buttons";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { SimpleTooltip } from "../primitives/Tooltip";
-import {
-  buildFavoriteLabel,
-  canonicalFavoriteUrl,
-  FAVORITE_SEARCH_PARAM,
-  FAVORITES_ACTION_PATH,
-  favoritePageUrl,
-  resolvePageMeta,
-  useFavorites,
-} from "./favoritePages";
+import { FAVORITE_SEARCH_PARAM, useFavoritePageToggle, useFavorites } from "./favoritePages";
 
 /**
  * The star in the page header that favorites the current page (full URL, including filters and
@@ -31,15 +22,10 @@ export function FavoritePageButton({
   className?: string;
 }) {
   const user = useOptionalUser();
-  const isImpersonating = useIsImpersonating();
   const location = useLocation();
   const favorites = useFavorites();
-  const fetcher = useFetcher();
   const [, setSearchParams] = useSearchParams();
-
-  // The marker param and pagination position never count toward URL identity, so paging through
-  // a favorited view keeps the same favorite (and never saves a soon-stale cursor)
-  const url = favoritePageUrl(location.pathname, location.search);
+  const { isFavorited, pageName, canFavorite, toggle } = useFavoritePageToggle(pageTitle);
 
   // A marker that isn't one of this user's favorites came from a shared link (or a favorite
   // that's since been removed): clean it from the URL so the page behaves like a normal visit.
@@ -58,34 +44,8 @@ export function FavoritePageButton({
       { replace: true, preventScrollReset: true }
     );
   }, [hasForeignMarker, setSearchParams]);
-  const existing = favorites.find((favorite) => canonicalFavoriteUrl(favorite.url) === url);
-  const isFavorited = existing !== undefined;
-  // The tooltip names the favorite: its custom name once saved, else the label saving would use
-  // (which includes detail-page ids and filter summaries, e.g. "Runs: Completed, last 7d")
-  const pageName =
-    existing?.label ?? buildFavoriteLabel(location.pathname, location.search, pageTitle);
-
-  const toggle = () => {
-    if (existing) {
-      fetcher.submit(
-        { intent: "remove", id: existing.id },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    } else {
-      fetcher.submit(
-        {
-          intent: "add",
-          id: crypto.randomUUID(),
-          url,
-          label: buildFavoriteLabel(location.pathname, location.search, pageTitle),
-          icon: resolvePageMeta(location.pathname).icon,
-        },
-        { method: "POST", action: FAVORITES_ACTION_PATH }
-      );
-    }
-  };
 
-  const showButton = user !== undefined && !isImpersonating;
+  const showButton = canFavorite;
 
   // Option+F reports event.key "ƒ" on macOS, but the hotkeys matcher falls back to the physical
   // event.code ("KeyF"), so the standard hook captures it; exact modifier matching keeps the

apps/webapp/app/components/navigation/favoritePages.tsx

@@ -1,6 +1,6 @@
 import { BeakerIcon } from "@heroicons/react/24/outline";
 import { IconChartHistogram } from "@tabler/icons-react";
-import { useFetchers, useLocation } from "@remix-run/react";
+import { useFetcher, useFetchers, useLocation } from "@remix-run/react";
 import { ClockIcon } from "~/assets/icons/ClockIcon";
 import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
@@ -42,8 +42,10 @@ import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import { WebhookIcon } from "~/assets/icons/WebhookIcon";
 import { VercelLogo } from "~/components/integrations/VercelLogo";
+import { useIsImpersonating } from "~/hooks/useOrganizations";
 import { useOptionalUser } from "~/hooks/useUser";
 import { type FavoritePage } from "~/services/dashboardPreferences.server";
+import { RUN_COLUMN_SEARCH_PARAMS } from "../runs/v3/runColumns";
 import { type RenderIcon } from "../primitives/Icon";
 
 export const FAVORITES_ACTION_PATH = "/resources/preferences/favorites";
@@ -144,7 +146,7 @@ const PAGINATION_PARAMS = ["cursor", "direction", "page"];
  * marker (presentation-only) and the pagination position (cursors go stale, and page N of a view
  * is not a different view). A favorite pins filters and tabs, never a transient page of them.
  */
-export function favoritePageUrl(pathname: string, search: string): string {
+function favoritePageUrl(pathname: string, search: string): string {
   const params = new URLSearchParams(search);
   params.delete(FAVORITE_SEARCH_PARAM);
   for (const param of PAGINATION_PARAMS) {
@@ -156,7 +158,7 @@ export function favoritePageUrl(pathname: string, search: string): string {
 
 /** favoritePageUrl for an already-joined URL, e.g. a favorite's stored one (which may predate
  * pagination stripping). */
-export function canonicalFavoriteUrl(url: string): string {
+function canonicalFavoriteUrl(url: string): string {
   const [pathname, search = ""] = url.split("?");
   return favoritePageUrl(pathname, search);
 }
@@ -260,7 +262,7 @@ const ACCOUNT_PAGE_META: Record<string, PageMeta> = {
 };
 
 /** Best-effort icon + name for any dashboard page, derived from its URL shape. */
-export function resolvePageMeta(pathname: string): PageMeta {
+function resolvePageMeta(pathname: string): PageMeta {
   const envMatch = pathname.match(/^\/orgs\/[^/]+\/projects\/[^/]+\/env\/[^/]+(?:\/([^?]*))?$/);
   if (envMatch) {
     const segments = (envMatch[1] ?? "").split("/").filter(Boolean);
@@ -365,7 +367,14 @@ function humanizeValue(value: string): string {
 }
 
 /** Pagination/UI-state params that never describe what the user filtered. */
-const NON_FILTER_PARAMS = [FAVORITE_SEARCH_PARAM, ...PAGINATION_PARAMS, "span"];
+const NON_FILTER_PARAMS = [
+  FAVORITE_SEARCH_PARAM,
+  ...PAGINATION_PARAMS,
+  "span",
+  // The runs list stores its column layout in the URL; that's presentation, not a filter,
+  // so it must not count toward the tally ("Runs: 3 filters" for an unfiltered view).
+  ...RUN_COLUMN_SEARCH_PARAMS,
+];
 
 /**
  * Summarize a filtered view's search params into a short, selective descriptor for the favorite
@@ -425,7 +434,7 @@ function describeFilters(search: string): string | undefined {
  * id for friendly-id pages: "Run: 05hrqq9n"); filtered views summarize their filters ("Runs:
  * Completed successfully, last 7d"). Users can always rename.
  */
-export function buildFavoriteLabel(
+function buildFavoriteLabel(
   pathname: string,
   search: string,
   pageTitle: string | undefined
@@ -512,3 +521,53 @@ export function useFavorites(): FavoritePage[] {
 
   return favorites;
 }
+
+/**
+ * Shared favorite state + toggle for the current page (full URL, including filters and tabs).
+ * Backs both the page-header star and the runs list "Save to favorites" menu item, so the two
+ * always agree on what counts as favorited and produce identical favorites.
+ */
+export function useFavoritePageToggle(pageTitle?: string): {
+  isFavorited: boolean;
+  /** The favorite's custom name once saved, else the label saving would use. */
+  pageName: string;
+  /** False for logged-out and impersonating sessions, which must not mutate preferences. */
+  canFavorite: boolean;
+  toggle: () => void;
+} {
+  const user = useOptionalUser();
+  const isImpersonating = useIsImpersonating();
+  const location = useLocation();
+  const favorites = useFavorites();
+  const fetcher = useFetcher();
+
+  const url = favoritePageUrl(location.pathname, location.search);
+  const existing = favorites.find((favorite) => canonicalFavoriteUrl(favorite.url) === url);
+
+  const toggle = () => {
+    if (existing) {
+      fetcher.submit(
+        { intent: "remove", id: existing.id },
+        { method: "POST", action: FAVORITES_ACTION_PATH }
+      );
+    } else {
+      fetcher.submit(
+        {
+          intent: "add",
+          id: crypto.randomUUID(),
+          url,
+          label: buildFavoriteLabel(location.pathname, location.search, pageTitle),
+          icon: resolvePageMeta(location.pathname).icon,
+        },
+        { method: "POST", action: FAVORITES_ACTION_PATH }
+      );
+    }
+  };
+
+  return {
+    isFavorited: existing !== undefined,
+    pageName: existing?.label ?? buildFavoriteLabel(location.pathname, location.search, pageTitle),
+    canFavorite: user !== undefined && !isImpersonating,
+    toggle,
+  };
+}

apps/webapp/app/components/primitives/MiddleTruncate.tsx

@@ -5,19 +5,44 @@ import { SimpleTooltip } from "./Tooltip";
 type MiddleTruncateProps = {
   text: string;
   className?: string;
+  /** Hover delay before the full-text tooltip opens. Defaults to the tooltip default (0). */
+  tooltipDelay?: number;
+  /** Merged onto the tooltip body, for callers whose text needs a bigger or scrollable box. */
+  tooltipContentClassName?: string;
+  /**
+   * Roughly how many characters fit, used only for the very first render. Truncation needs
+   * layout, so the server (and the pre-hydration client) can only render the full string --
+   * long values visibly snapped shorter once React hydrated. Seeding from a character count
+   * is deterministic, so it matches on both sides and the measured pass just refines it.
+   */
+  initialCharBudget?: number;
 };
 
+/** Deterministic, layout-free middle truncation used to seed the first render. */
+function seedTruncation(text: string, budget: number | undefined): string {
+  if (budget === undefined || text.length <= budget) return text;
+  const keep = Math.max(1, Math.floor((budget - 1) / 2));
+  return `${text.slice(0, keep)}…${text.slice(-keep)}`;
+}
+
 /**
  * A component that truncates text in the middle, showing the beginning and end.
  * Shows the full text in a tooltip on hover when truncated.
  *
  * Example: "namespace:category:subcategory:task-name" becomes "namespace:cat…task-name"
  */
-export function MiddleTruncate({ text, className }: MiddleTruncateProps) {
+export function MiddleTruncate({
+  text,
+  className,
+  tooltipDelay,
+  tooltipContentClassName,
+  initialCharBudget,
+}: MiddleTruncateProps) {
+  const seed = seedTruncation(text, initialCharBudget);
   const containerRef = useRef<HTMLSpanElement>(null);
   const measureRef = useRef<HTMLSpanElement>(null);
-  const [displayText, setDisplayText] = useState(text);
-  const [isTruncated, setIsTruncated] = useState(false);
+  const [displayText, setDisplayText] = useState(seed);
+  const [isTruncated, setIsTruncated] = useState(seed !== text);
 
   const calculateTruncation = useCallback(() => {
     const container = containerRef.current;
@@ -151,9 +176,14 @@ export function MiddleTruncate({ text, className }: MiddleTruncateProps) {
     return (
       <SimpleTooltip
         button={content}
-        content={<span className="max-w-xs break-all font-mono text-xs">{text}</span>}
+        content={
+          <span className={cn("max-w-xs break-all font-mono text-xs", tooltipContentClassName)}>
+            {text}
+          </span>
+        }
         side="top"
         asChild
+        delayDuration={tooltipDelay}
       />
     );
   }