diff --git a/apps/webapp/app/components/layout/MetricsLayout.tsx b/apps/webapp/app/components/layout/MetricsLayout.tsx
index 12d0fcd743c..9a41c4b2613 100644
--- a/apps/webapp/app/components/layout/MetricsLayout.tsx
+++ b/apps/webapp/app/components/layout/MetricsLayout.tsx
@@ -175,10 +175,12 @@ function MetricsLayoutMain({ children, scroll }: { children: ReactNode; scroll:
   return (
     <div className="flex h-full min-h-0 flex-col">
       {filters}
+      {/* overflow-x-clip: without it `overflow-y-auto` promotes x to auto and wide content drags
+          the charts sideways. Wide children must scroll in their own container. */}
       <div
         className={
           scroll === "page"
-            ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+            ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto overflow-x-clip py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             : "flex min-h-0 flex-1 flex-col overflow-hidden"
         }
       >
@@ -286,7 +288,7 @@ function MetricsLayoutFilters({
   return (
     <div
       className={cn(
-        "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3",
+        "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed px-2",
         className
       )}
     >
diff --git a/apps/webapp/app/components/primitives/Headers.tsx b/apps/webapp/app/components/primitives/Headers.tsx
index 53c9d822994..5cd3ec84559 100644
--- a/apps/webapp/app/components/primitives/Headers.tsx
+++ b/apps/webapp/app/components/primitives/Headers.tsx
@@ -1,6 +1,6 @@
 import { cn } from "~/utils/cn";
 
-const headerVariants = {
+export const headerVariants = {
   header1: {
     text: "font-sans text-2xl leading-5 md:leading-6 lg:leading-7 font-semibold tracking-tight",
     spacing: "mb-2",
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index dccb26df454..55dd2e4e200 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -181,7 +181,7 @@ type TableCellBasicProps = {
 type TableHeaderCellProps = TableCellBasicProps & {
   hiddenLabel?: boolean;
   tooltip?: ReactNode;
-  /** Extra class merged onto the tooltip content — e.g. widen it past the default max-width. */
+  /** Extra class merged onto the tooltip content. */
   tooltipContentClassName?: string;
   disableTooltipHoverableContent?: boolean;
   /**
diff --git a/apps/webapp/app/components/primitives/Tabs.tsx b/apps/webapp/app/components/primitives/Tabs.tsx
index 1128a9c267f..569e271434f 100644
--- a/apps/webapp/app/components/primitives/Tabs.tsx
+++ b/apps/webapp/app/components/primitives/Tabs.tsx
@@ -3,9 +3,19 @@ import { motion } from "framer-motion";
 import { type ReactNode, useRef } from "react";
 import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
+import { headerVariants } from "./Headers";
 import { ShortcutKey } from "./ShortcutKey";
 
-export type Variants = "underline" | "pipe-divider" | "segmented";
+/** `"title"` names the table below it: header2 text, filter-bar height, underline on the border. */
+export type Variants = "underline" | "pipe-divider" | "segmented" | "title";
+
+/** Shared with `TitleBar` so the tabbed and tab-less bars match. */
+export const TITLE_BAR_CHROME = "flex h-10 shrink-0 gap-x-6 border-b border-grid-bright";
+
+const titleTabLabel = cn(headerVariants.header2.text, "transition duration-200");
+const titleTabIndicator = "h-0.5 w-full bg-indigo-500";
+const titleTabIndicatorIdle =
+  "h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100";
 
 export type TabsProps = {
   tabs: {
@@ -58,6 +68,10 @@ export function TabContainer({
     );
   }
 
+  if (variant === "title") {
+    return <div className={cn(TITLE_BAR_CHROME, "items-stretch", className)}>{children}</div>;
+  }
+
   if (variant === "underline") {
     return (
       <div className={cn(`flex gap-x-6 border-b border-grid-bright`, className)}>{children}</div>
@@ -117,6 +131,39 @@ export function TabLink({
     );
   }
 
+  if (variant === "title") {
+    return (
+      <NavLink to={to} className="group flex h-full flex-col focus-custom" end={end}>
+        {({ isActive, isPending }) => {
+          const active = isActive || isPending;
+          return (
+            <>
+              <div className="flex flex-1 items-center">
+                <span
+                  className={cn(
+                    titleTabLabel,
+                    active ? "text-text-bright" : "text-text-dimmed group-hover:text-text-bright"
+                  )}
+                >
+                  {children}
+                </span>
+              </div>
+              {active ? (
+                <motion.div
+                  layoutId={layoutId}
+                  transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                  className={titleTabIndicator}
+                />
+              ) : (
+                <div className={titleTabIndicatorIdle} />
+              )}
+            </>
+          );
+        }}
+      </NavLink>
+    );
+  }
+
   if (variant === "pipe-divider") {
     return (
       <NavLink
@@ -177,11 +224,13 @@ export function TabButton({
   isActive,
   layoutId,
   shortcut,
+  variant = "underline",
   ...props
 }: {
   isActive: boolean;
   shortcut?: ShortcutDefinition;
   layoutId: string;
+  variant?: Variants;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -197,10 +246,13 @@ export function TabButton({
     });
   }
 
+  const title = variant === "title";
+
   return (
     <button
       className={cn(
-        "group flex flex-col items-center pt-1 focus-custom",
+        "group flex flex-col items-center focus-custom",
+        title ? "h-full" : "pt-1",
         props.className,
         props.disabled && "pointer-events-none opacity-50"
       )}
@@ -209,8 +261,18 @@ export function TabButton({
       {...props}
     >
       <>
-        <div className="flex items-center gap-1">
-          <span className={"text-sm transition duration-200 text-text-bright"}>
+        <div className={cn("flex items-center gap-1", title && "flex-1")}>
+          <span
+            className={cn(
+              "transition duration-200",
+              title
+                ? cn(
+                    headerVariants.header2.text,
+                    isActive ? "text-text-bright" : "text-text-dimmed group-hover:text-text-bright"
+                  )
+                : "text-sm text-text-bright"
+            )}
+          >
             {props.children}
           </span>
           {shortcut && <ShortcutKey className={cn("")} shortcut={shortcut} variant={"small"} />}
@@ -219,10 +281,15 @@ export function TabButton({
           <motion.div
             layoutId={layoutId}
             transition={{ type: "spring", stiffness: 500, damping: 30 }}
-            className="mt-1 h-0.5 w-full bg-indigo-500"
+            className={cn("h-0.5 w-full bg-indigo-500", !title && "mt-1")}
           />
         ) : (
-          <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
+          <div
+            className={cn(
+              "h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100",
+              !title && "mt-1"
+            )}
+          />
         )}
       </>
     </button>
diff --git a/apps/webapp/app/components/primitives/TitleBar.tsx b/apps/webapp/app/components/primitives/TitleBar.tsx
new file mode 100644
index 00000000000..8b935093b02
--- /dev/null
+++ b/apps/webapp/app/components/primitives/TitleBar.tsx
@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { cn } from "~/utils/cn";
+import { Header2 } from "./Headers";
+import { TITLE_BAR_CHROME } from "./Tabs";
+
+/**
+ * Names the table below it. Bottom rule only — it doubles as the table's top edge, so render the
+ * table with `showTopBorder={false}`. Use `TabContainer variant="title"` for the tabbed form.
+ */
+export function TitleBar({
+  title,
+  children,
+  className,
+}: {
+  title: ReactNode;
+  /** Right-aligned controls. */
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn(TITLE_BAR_CHROME, "items-center justify-between pl-2.5 pr-1.5", className)}>
+      <Header2>{title}</Header2>
+      {children ? <div className="flex items-center gap-1.5">{children}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 6f12e408c7f..cb9eaf0364d 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -42,7 +42,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-w-[230px] overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
+        "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
         variantClasses[variant],
         className
       )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
index 76beaf297f3..5d9a86e4a25 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents.$agentParam/route.tsx
@@ -234,28 +234,10 @@ export default function Page() {
         </PageAccessories>
       </NavBar>
       <MetricsLayout.Root>
-        {/* Filters — the pinned bar under the NavBar: the TimeFilter and pagination that used to
-            be fused with the tabs now live here, above the charts (Queues list pattern). Left and
-            right clusters are child divs; the slot's baked justify-between spreads them. */}
         <MetricsLayout.Filters>
           <div className="flex items-center gap-2">
             <TimeFilter defaultPeriod="7d" labelName={tabLabel} />
           </div>
-          <div className="flex items-center gap-2">
-            {tab === "sessions" ? (
-              <Suspense fallback={null}>
-                <TypedAwait resolve={sessionList} errorElement={null}>
-                  {(list) => (list ? <ListPagination list={list} /> : null)}
-                </TypedAwait>
-              </Suspense>
-            ) : (
-              <Suspense fallback={null}>
-                <TypedAwait resolve={runList} errorElement={null}>
-                  {(list) => (list ? <ListPagination list={list} /> : null)}
-                </TypedAwait>
-              </Suspense>
-            )}
-          </div>
         </MetricsLayout.Filters>
 
         {/* Activity / LLM spend / Token charts as a fixed-height chart row (three-up), synced +
@@ -315,23 +297,45 @@ export default function Page() {
 
         {/* Tabs alone on their row (Queue detail pattern), then the table below them. */}
         <MetricsLayout.Content>
-          <TabContainer className="px-3">
-            <TabButton
-              isActive={tab === "sessions"}
-              layoutId="agent-page-tabs"
-              onClick={() => setTab("sessions")}
-            >
-              Sessions
-            </TabButton>
-            <TabButton
-              isActive={tab === "runs"}
-              layoutId="agent-page-tabs"
-              onClick={() => setTab("runs")}
-            >
-              Runs
-            </TabButton>
-          </TabContainer>
-          <AgentContentArea tab={tab} sessionList={sessionList} runList={runList} />
+          {/* Single child so Content's gap-2.5 can't separate the bar from the table. */}
+          <div className="flex flex-col">
+            <TabContainer variant="title" className="justify-between border-y px-2">
+              <div className="flex items-stretch gap-x-6">
+                <TabButton
+                  isActive={tab === "sessions"}
+                  layoutId="agent-page-tabs"
+                  variant="title"
+                  onClick={() => setTab("sessions")}
+                >
+                  Sessions
+                </TabButton>
+                <TabButton
+                  isActive={tab === "runs"}
+                  layoutId="agent-page-tabs"
+                  variant="title"
+                  onClick={() => setTab("runs")}
+                >
+                  Runs
+                </TabButton>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {tab === "sessions" ? (
+                  <Suspense fallback={null}>
+                    <TypedAwait resolve={sessionList} errorElement={null}>
+                      {(list) => (list ? <ListPagination list={list} /> : null)}
+                    </TypedAwait>
+                  </Suspense>
+                ) : (
+                  <Suspense fallback={null}>
+                    <TypedAwait resolve={runList} errorElement={null}>
+                      {(list) => (list ? <ListPagination list={list} /> : null)}
+                    </TypedAwait>
+                  </Suspense>
+                )}
+              </div>
+            </TabContainer>
+            <AgentContentArea tab={tab} sessionList={sessionList} runList={runList} />
+          </div>
         </MetricsLayout.Content>
 
         <MetricsLayout.Sidebar
@@ -356,8 +360,7 @@ function AgentContentArea({
   sessionList,
   runList,
 }: { tab: AgentTab } & Pick<LoaderData, "sessionList" | "runList">) {
-  // The table flows in the page-level scroll (MetricsLayout.Root scroll="page"); a sticky header
-  // keeps the column labels pinned as the whole column scrolls.
+  // No `stickyHeader` — it drops the table's own overflow-x-auto and the charts scroll with it.
   return tab === "sessions" ? (
     <Suspense fallback={<TableLoading />}>
       <TypedAwait resolve={sessionList} errorElement={<TableLoading />}>
@@ -367,7 +370,7 @@ function AgentContentArea({
               sessions={list.sessions}
               filters={list.filters}
               hasFilters={list.hasFilters}
-              stickyHeader
+              showTopBorder={false}
             />
           ) : (
             <TableLoading />
@@ -386,7 +389,7 @@ function AgentContentArea({
               filters={list.filters}
               runs={list.runs}
               variant="dimmed"
-              stickyHeader
+              showTopBorder={false}
             />
           ) : (
             <TableLoading />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx
index f6723ddebaa..9c8c2c8fa5c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx
@@ -1,10 +1,6 @@
 import { Outlet } from "@remix-run/react";
-import { PageContainer } from "~/components/layout/AppLayout";
 
+// No PageContainer — the child pages render their own; nesting two collapses the inner one's height.
 export default function Page() {
-  return (
-    <PageContainer>
-      <Outlet />
-    </PageContainer>
-  );
+  return <Outlet />;
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
index 6d81de239fe..b3a2b852ed9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.scheduled.$taskParam/route.tsx
@@ -28,6 +28,7 @@ import {
   DialogTrigger,
 } from "~/components/primitives/Dialog";
 import { Header2 } from "~/components/primitives/Headers";
+import { TitleBar } from "~/components/primitives/TitleBar";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { PaginationControls } from "~/components/primitives/Pagination";
@@ -292,31 +293,15 @@ export default function Page() {
         <ResizablePanelGroup orientation="horizontal" className="max-h-full">
           <ResizablePanel id="scheduled-task-main" min="300px">
             <div className="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden">
-              {/* Top bar — title on the left; actions + TimeFilter + pagination on the right.
-                  h-10 matches the right-hand sidebar header height. */}
-              <div className="flex min-h-10 items-center gap-2 border-b border-grid-dimmed bg-background-bright py-2 pl-3 pr-2">
-                <Header2>Runs</Header2>
+              <div className="flex min-h-10 items-center gap-2 border-b border-grid-dimmed bg-background-bright px-2 py-2">
+                <TimeFilter defaultPeriod="7d" labelName="Runs" />
                 <div className="ml-auto flex flex-wrap items-center justify-end gap-1.5">
-                  <CreateScheduleButton
-                    isAtLimit={isAtLimit}
-                    limits={limits}
-                    canUpgrade={canUpgrade}
-                    canPurchaseSchedules={scheduleList?.canPurchaseSchedules ?? false}
-                    extraSchedules={scheduleList?.extraSchedules ?? 0}
-                    maxScheduleQuota={scheduleList?.maxScheduleQuota ?? 0}
-                    planScheduleLimit={scheduleList?.planScheduleLimit ?? 0}
-                    schedulePricing={scheduleList?.schedulePricing ?? null}
-                    onCreate={openCreateSchedule}
-                    disabled={isCreatingSchedule}
-                  />
-                  {newRunsCount > 0 ? (
-                    <NewRunsButton count={newRunsCount} onClick={() => showNewRunsRef.current()} />
-                  ) : null}
-                  <TimeFilter defaultPeriod="7d" labelName="Runs" />
                   <LinkButton
                     variant="secondary/small"
                     to={v3RunsPath(organization, project, environment, filters)}
                     LeadingIcon={RunsIcon}
+                    // -7px halves the icon's default 6px of space on each side.
+                    leadingIconClassName="-mx-[7px]"
                   >
                     View all runs
                   </LinkButton>
@@ -335,11 +320,18 @@ export default function Page() {
                   >
                     Bulk replay…
                   </LinkButton>
-                  <Suspense fallback={null}>
-                    <TypedAwait resolve={runList} errorElement={null}>
-                      {(list) => (list ? <ListPagination list={list} /> : null)}
-                    </TypedAwait>
-                  </Suspense>
+                  <CreateScheduleButton
+                    isAtLimit={isAtLimit}
+                    limits={limits}
+                    canUpgrade={canUpgrade}
+                    canPurchaseSchedules={scheduleList?.canPurchaseSchedules ?? false}
+                    extraSchedules={scheduleList?.extraSchedules ?? 0}
+                    maxScheduleQuota={scheduleList?.maxScheduleQuota ?? 0}
+                    planScheduleLimit={scheduleList?.planScheduleLimit ?? 0}
+                    schedulePricing={scheduleList?.schedulePricing ?? null}
+                    onCreate={openCreateSchedule}
+                    disabled={isCreatingSchedule}
+                  />
                 </div>
               </div>
 
@@ -363,23 +355,39 @@ export default function Page() {
 
                 {/* Runs table */}
                 <ResizablePanel id="scheduled-task-content" min="160px">
-                  <div className="h-full overflow-hidden">
-                    <Suspense fallback={<TableLoading />}>
-                      <TypedAwait resolve={runList} errorElement={<TableLoading />}>
-                        {(list) =>
-                          list ? (
-                            <TaskRunsList
-                              list={list}
-                              taskSlug={task.slug}
-                              onNewRunsCountChange={setNewRunsCount}
-                              showNewRunsRef={showNewRunsRef}
-                            />
-                          ) : (
-                            <TableLoading />
-                          )
-                        }
-                      </TypedAwait>
-                    </Suspense>
+                  <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
+                    {/* -mt-px absorbs the spare pixel below the handle's rule, centring the title. */}
+                    <TitleBar title="Runs" className="-mt-px">
+                      {newRunsCount > 0 ? (
+                        <NewRunsButton
+                          count={newRunsCount}
+                          onClick={() => showNewRunsRef.current()}
+                        />
+                      ) : null}
+                      <Suspense fallback={null}>
+                        <TypedAwait resolve={runList} errorElement={null}>
+                          {(list) => (list ? <ListPagination list={list} /> : null)}
+                        </TypedAwait>
+                      </Suspense>
+                    </TitleBar>
+                    <div className="min-h-0 overflow-hidden">
+                      <Suspense fallback={<TableLoading />}>
+                        <TypedAwait resolve={runList} errorElement={<TableLoading />}>
+                          {(list) =>
+                            list ? (
+                              <TaskRunsList
+                                list={list}
+                                taskSlug={task.slug}
+                                onNewRunsCountChange={setNewRunsCount}
+                                showNewRunsRef={showNewRunsRef}
+                              />
+                            ) : (
+                              <TableLoading />
+                            )
+                          }
+                        </TypedAwait>
+                      </Suspense>
+                    </div>
                   </div>
                 </ResizablePanel>
               </ResizablePanelGroup>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
index 12227dd66fd..15df31370d2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.tasks.standard.$taskParam/route.tsx
@@ -20,6 +20,7 @@ import { statusColor } from "~/components/primitives/charts/statusColors";
 import { CopyableText } from "~/components/primitives/CopyableText";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header2 } from "~/components/primitives/Headers";
+import { TitleBar } from "~/components/primitives/TitleBar";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
@@ -234,21 +235,8 @@ export default function Page() {
         <ResizablePanelGroup orientation="horizontal" className="max-h-full">
           <ResizablePanel id="task-main" min="300px">
             <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
-              {/* Top bar — title on the left; TimeFilter + pagination on the right.
-                  h-10 matches the right-hand sidebar header height. */}
-              <div className="flex h-10 items-center border-b border-grid-dimmed bg-background-bright pl-3 pr-2">
-                <Header2>Runs</Header2>
-                <div className="ml-auto flex items-center gap-1.5">
-                  {newRunsCount > 0 ? (
-                    <NewRunsButton count={newRunsCount} onClick={() => showNewRunsRef.current()} />
-                  ) : null}
-                  <TimeFilter defaultPeriod="7d" labelName="Runs" />
-                  <Suspense fallback={null}>
-                    <TypedAwait resolve={runList} errorElement={null}>
-                      {(list) => (list ? <ListPagination list={list} /> : null)}
-                    </TypedAwait>
-                  </Suspense>
-                </div>
+              <div className="flex h-10 items-center border-b border-grid-dimmed bg-background-bright px-2">
+                <TimeFilter defaultPeriod="7d" labelName="Runs" />
               </div>
 
               <ResizablePanelGroup orientation="vertical" className="max-h-full">
@@ -263,23 +251,39 @@ export default function Page() {
 
                 {/* Runs table */}
                 <ResizablePanel id="task-content" min="160px">
-                  <div className="h-full overflow-hidden">
-                    <Suspense fallback={<TableLoading />}>
-                      <TypedAwait resolve={runList} errorElement={<TableLoading />}>
-                        {(list) =>
-                          list ? (
-                            <TaskRunsList
-                              list={list}
-                              taskSlug={task.slug}
-                              onNewRunsCountChange={setNewRunsCount}
-                              showNewRunsRef={showNewRunsRef}
-                            />
-                          ) : (
-                            <TableLoading />
-                          )
-                        }
-                      </TypedAwait>
-                    </Suspense>
+                  <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
+                    {/* -mt-px absorbs the spare pixel below the handle's rule, centring the title. */}
+                    <TitleBar title="Runs" className="-mt-px">
+                      {newRunsCount > 0 ? (
+                        <NewRunsButton
+                          count={newRunsCount}
+                          onClick={() => showNewRunsRef.current()}
+                        />
+                      ) : null}
+                      <Suspense fallback={null}>
+                        <TypedAwait resolve={runList} errorElement={null}>
+                          {(list) => (list ? <ListPagination list={list} /> : null)}
+                        </TypedAwait>
+                      </Suspense>
+                    </TitleBar>
+                    <div className="min-h-0 overflow-hidden">
+                      <Suspense fallback={<TableLoading />}>
+                        <TypedAwait resolve={runList} errorElement={<TableLoading />}>
+                          {(list) =>
+                            list ? (
+                              <TaskRunsList
+                                list={list}
+                                taskSlug={task.slug}
+                                onNewRunsCountChange={setNewRunsCount}
+                                showNewRunsRef={showNewRunsRef}
+                              />
+                            ) : (
+                              <TableLoading />
+                            )
+                          }
+                        </TypedAwait>
+                      </Suspense>
+                    </div>
                   </div>
                 </ResizablePanel>
               </ResizablePanelGroup>