feat(webapp): fix agent overview page scroll bug + layout fixes on task and agent pages

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
  )}
  >

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",

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;
  /**

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>

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>
+ );
+}

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
  )}

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 />

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