The agent landing page chart now displays correct data per the chosen date/time range

Author: samejr

apps/webapp/app/components/primitives/charts/Chart.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
+import TooltipPortal from "../TooltipPortal";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
@@ -162,6 +163,7 @@ const ChartTooltipContent = React.forwardRef<
     const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
+      <TooltipPortal active={active}>
       <div
         ref={ref}
         className={cn(
@@ -239,6 +241,7 @@ const ChartTooltipContent = React.forwardRef<
           })}
         </div>
       </div>
+      </TooltipPortal>
     );
   }
 );

apps/webapp/app/components/primitives/charts/ChartBar.tsx

@@ -41,6 +41,8 @@ export type ChartBarRendererProps = {
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
   /** Optional formatter for numeric tooltip values (e.g. bytes, duration) */
   tooltipValueFormatter?: (value: number) => string;
+  /** Corner radius for the outermost bars in each stack (defaults to 2). Pass 0 for square corners. */
+  barRadius?: number;
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -66,6 +68,7 @@ export function ChartBarRenderer({
   referenceLine,
   tooltipLabelFormatter,
   tooltipValueFormatter,
+  barRadius = 2,
   width,
   height,
 }: ChartBarRendererProps) {
@@ -205,10 +208,10 @@ export function ChartBarRenderer({
             fill={config[key]?.color}
             radius={
               [
-                index === array.length - 1 ? 2 : 0,
-                index === array.length - 1 ? 2 : 0,
-                index === 0 ? 2 : 0,
-                index === 0 ? 2 : 0,
+                index === array.length - 1 ? barRadius : 0,
+                index === array.length - 1 ? barRadius : 0,
+                index === 0 ? barRadius : 0,
+                index === 0 ? barRadius : 0,
               ] as [number, number, number, number]
             }
             activeBar={false}

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

@@ -74,6 +74,7 @@ type RunsTableProps = {
   variant?: TableVariant;
   disableAdjacentRows?: boolean;
   additionalTableState?: Record<string, string>;
+  showTopBorder?: boolean;
 };
 
 export function TaskRunsTable({
@@ -87,6 +88,7 @@ export function TaskRunsTable({
   allowSelection = false,
   variant = "dimmed",
   additionalTableState,
+  showTopBorder = true,
 }: RunsTableProps) {
   const regions = useRegions();
   const regionByMasterQueue = new Map(regions.map((r) => [r.masterQueue, r] as const));
@@ -141,7 +143,7 @@ export function TaskRunsTable({
   );
 
   return (
-    <Table variant={variant} className="max-h-full overflow-y-auto">
+    <Table variant={variant} className="max-h-full overflow-y-auto" showTopBorder={showTopBorder}>
       <TableHeader>
         <TableRow>
           {allowSelection && (

apps/webapp/app/components/sessions/v1/SessionsTable.tsx

@@ -34,9 +34,15 @@ import {
   allSessionStatuses,
 } from "./SessionStatus";
 
-type SessionsTableProps = Pick<SessionList, "sessions" | "filters" | "hasFilters">;
+type SessionsTableProps = Pick<SessionList, "sessions" | "filters" | "hasFilters"> & {
+  showTopBorder?: boolean;
+};
 
-export function SessionsTable({ sessions, hasFilters }: SessionsTableProps) {
+export function SessionsTable({
+  sessions,
+  hasFilters,
+  showTopBorder = true,
+}: SessionsTableProps) {
   const navigation = useNavigation();
   const location = useLocation();
   const isLoading =
@@ -47,7 +53,7 @@ export function SessionsTable({ sessions, hasFilters }: SessionsTableProps) {
   const environment = useEnvironment();
 
   return (
-    <Table className="max-h-full overflow-y-auto">
+    <Table className="max-h-full overflow-y-auto" showTopBorder={showTopBorder}>
       <TableHeader>
         <TableRow>
           <TableHeaderCell>ID</TableHeaderCell>

apps/webapp/app/presenters/v3/AgentDetailPresenter.server.ts

@@ -127,6 +127,11 @@ export class AgentDetailPresenter {
         ? 6 * 60 * 60 // 6h buckets
         : 24 * 60 * 60; // 1d buckets
 
+    // NOTE: We intentionally don't filter by `task_kind = 'AGENT'` here:
+    // ClickHouse stores `task_kind = ""` for pre-migration rows and rows
+    // whose taskKind annotation was never set, even for AGENT tasks. We've
+    // already verified this task is an agent via `findAgent` (Postgres), so
+    // matching on environment_id + task_identifier is sufficient.
     const queryFn = this.clickhouse.reader.query({
       name: "agentRunStatusActivity",
       query: `SELECT
@@ -136,7 +141,6 @@ export class AgentDetailPresenter {
         FROM trigger_dev.task_runs_v2
         WHERE environment_id = {environmentId: String}
           AND task_identifier = {agentSlug: String}
-          AND task_kind = 'AGENT'
           AND created_at >= {fromTime: DateTime64(3, 'UTC')}
           AND created_at < {toTime: DateTime64(3, 'UTC')}
         GROUP BY bucket, status
@@ -159,8 +163,10 @@ export class AgentDetailPresenter {
       environmentId,
       agentSlug,
       bucketSeconds,
-      fromTime: from.toISOString(),
-      toTime: to.toISOString(),
+      // ClickHouse's DateTime64(3, 'UTC') parser rejects the trailing `Z` from
+      // JS toISOString() ("only 23 of 24 bytes was parsed"). Strip it.
+      fromTime: from.toISOString().slice(0, -1),
+      toTime: to.toISOString().slice(0, -1),
     });
 
     if (error) {
@@ -169,22 +175,22 @@ export class AgentDetailPresenter {
     }
 
     const bucketMap = new Map<number, Record<string, number>>();
-    const usedGroups = new Set<GroupLabel>();
     for (const row of rows) {
       const group = groupForStatus(row.status) ?? "RUNNING";
-      usedGroups.add(group);
       const ts = row.bucket * 1000;
       const existing = bucketMap.get(ts) ?? {};
       existing[group] = (existing[group] ?? 0) + row.val;
       bucketMap.set(ts, existing);
     }
 
-    // Build zero-filled time series
+    // Build zero-filled time series. We always emit every status group so
+    // the chart legend is stable across time ranges (even when a group has
+    // no runs in the current window).
     const bucketMs = bucketSeconds * 1000;
     const start = Math.floor(from.getTime() / bucketMs) * bucketMs;
     const end = Math.ceil(to.getTime() / bucketMs) * bucketMs;
     const points: AgentActivityPoint[] = [];
-    const orderedStatuses = GROUP_LABEL.filter((g) => usedGroups.has(g));
+    const orderedStatuses = [...GROUP_LABEL];
     for (let ts = start; ts < end; ts += bucketMs) {
       const existing = bucketMap.get(ts) ?? {};
       const point: AgentActivityPoint = { bucket: ts };

apps/webapp/app/presenters/v3/TaskDetailPresenter.server.ts

@@ -159,8 +159,10 @@ export class TaskDetailPresenter {
       environmentId,
       taskSlug,
       bucketSeconds,
-      fromTime: from.toISOString(),
-      toTime: to.toISOString(),
+      // ClickHouse's DateTime64(3, 'UTC') parser rejects the trailing `Z` from
+      // JS toISOString() ("only 23 of 24 bytes was parsed"). Strip it.
+      fromTime: from.toISOString().slice(0, -1),
+      toTime: to.toISOString().slice(0, -1),
     });
 
     if (error) {