feat(webapp): move Display control next to pagination and add it to task run lists

Move the Display button out of the runs filter row to sit just left of the pagination controls, and surface it on the per-task, scheduled, agent and error run lists (in each Runs toolbar next to pagination) so columns can be customized there too.

Author: ericallam

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

@@ -68,7 +68,6 @@ import { type loader as versionsLoader } from "~/routes/resources.orgs.$organiza
 import { makeFriendlyIdValidator } from "~/utils/friendlyId";
 import { Button } from "../../primitives/Buttons";
 import { AIFilterInput } from "./AIFilterInput";
-import { RunsDisplayOptions } from "./RunsDisplayOptions";
 import { BulkActionTypeCombo } from "./BulkAction";
 import { RegionLabel } from "./RegionLabel";
 import {
@@ -416,7 +415,6 @@ export function RunsFilters(props: RunFiltersProps) {
           />
         </Form>
       )}
-      <RunsDisplayOptions />
     </div>
   );
 }

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

@@ -128,7 +128,7 @@ export function RunsDisplayOptions() {
     <>
       <Popover>
         <PopoverTrigger asChild>
-          <Button variant="secondary/small" LeadingIcon={ViewColumnsIcon} className="ml-auto">
+          <Button variant="secondary/small" LeadingIcon={ViewColumnsIcon}>
             Display
           </Button>
         </PopoverTrigger>

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

@@ -39,6 +39,7 @@ import {
 } from "~/presenters/v3/AgentDetailPresenter.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
 import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
+import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
 import { SessionListPresenter } from "~/presenters/v3/SessionListPresenter.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { getResizableSnapshot } from "~/services/resizablePanel.server";
@@ -337,11 +338,14 @@ export default function Page() {
                     </TypedAwait>
                   </Suspense>
                 ) : (
-                  <Suspense fallback={null}>
-                    <TypedAwait resolve={runList} errorElement={null}>
-                      {(list) => (list ? <ListPagination list={list} /> : null)}
-                    </TypedAwait>
-                  </Suspense>
+                  <>
+                    <RunsDisplayOptions />
+                    <Suspense fallback={null}>
+                      <TypedAwait resolve={runList} errorElement={null}>
+                        {(list) => (list ? <ListPagination list={list} /> : null)}
+                      </TypedAwait>
+                    </Suspense>
+                  </>
                 )}
               </div>
             </TabContainer>

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

@@ -75,6 +75,7 @@ import {
 } from "~/presenters/v3/ErrorGroupPresenter.server";
 import { type NextRunList } from "~/presenters/v3/NextRunListPresenter.server";
 import { getRunColumnsForSelect } from "~/presenters/v3/runColumnsFromRequest.server";
+import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { rbac } from "~/services/rbac.server";
@@ -536,6 +537,7 @@ function ErrorGroupDetail({
                   >
                     Bulk replay…
                   </PermissionLink>
+                  <RunsDisplayOptions />
                   <ListPagination list={runList} />
                 </div>
               )}

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

@@ -39,6 +39,7 @@ import { StepNumber } from "~/components/primitives/StepNumber";
 import { TextLink } from "~/components/primitives/TextLink";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { RunsFilters, type TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
+import { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
 import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
 import { BULK_ACTION_RUN_LIMIT } from "~/consts";
 import { $replica } from "~/db.server";
@@ -404,6 +405,7 @@ function RunsList({
                         )}
                       </span>
                     </Button>
+                    <RunsDisplayOptions />
                     <ListPagination list={list} />
                   </div>
                 </div>

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

@@ -76,6 +76,7 @@ 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 { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
 import { ScheduleListPresenter } from "~/presenters/v3/ScheduleListPresenter.server";
 import {
   TaskDetailPresenter,
@@ -371,6 +372,7 @@ export default function Page() {
                           onClick={() => showNewRunsRef.current()}
                         />
                       ) : null}
+                      <RunsDisplayOptions />
                       <Suspense fallback={null}>
                         <TypedAwait resolve={runList} errorElement={null}>
                           {(list) => (list ? <ListPagination list={list} /> : null)}

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

@@ -47,6 +47,7 @@ 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 { RunsDisplayOptions } from "~/components/runs/v3/RunsDisplayOptions";
 import {
   TaskDetailPresenter,
   type TaskActivity,
@@ -268,6 +269,7 @@ export default function Page() {
                           onClick={() => showNewRunsRef.current()}
                         />
                       ) : null}
+                      <RunsDisplayOptions />
                       <Suspense fallback={null}>
                         <TypedAwait resolve={runList} errorElement={null}>
                           {(list) => (list ? <ListPagination list={list} /> : null)}