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

.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}
       />
     );
   }