refactor(webapp): flatten the run inspector queue block and tab the task detail queue chart

The run inspector's "Waiting in queue" section now leads with two borderless
stat + last-30-minutes sparklines (backlog and scheduling delay), matching the
inspector's divider-and-rows layout instead of nested cards. On the task detail
page the queue backlog moves behind a tab in the activity card rather than
sitting beside the runs-by-status chart, so it does not crowd the agent-task
hero charts.

Author: ericallam

apps/webapp/app/components/primitives/UsageSparkline.tsx

@@ -33,6 +33,10 @@ export type UsageSparklineProps = {
   formatTotal?: (total: number) => string;
   /** Class for the trailing total label. */
   totalClassName?: string;
+  /** Size of the bar chart. Defaults to the list-cell size (`h-6 w-28`). */
+  chartClassName?: string;
+  /** Hide the trailing total (e.g. when the caller shows its own headline). */
+  hideTotal?: boolean;
 };
 
 /**
@@ -49,6 +53,8 @@ export function UsageSparkline({
   total: totalOverride,
   formatTotal,
   totalClassName = "text-blue-400",
+  chartClassName = "h-6 w-28",
+  hideTotal = false,
 }: UsageSparklineProps) {
   const hasTotalOverride = totalOverride !== undefined;
   if (!data || data.length === 0 || (data.every((v) => v === 0) && !hasTotalOverride)) {
@@ -70,7 +76,7 @@ export function UsageSparkline({
 
   return (
     <div className="flex items-start gap-2">
-      <div className="h-6 w-28 rounded-sm">
+      <div className={cn("rounded-sm", chartClassName)}>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
             <YAxis domain={[0, max || 1]} hide />
@@ -100,9 +106,11 @@ export function UsageSparkline({
           </BarChart>
         </ResponsiveContainer>
       </div>
-      <span className={cn("-mt-1 text-xs tabular-nums", totalClassName)}>
-        {formatTotal ? formatTotal(total) : total.toLocaleString()}
-      </span>
+      {hideTotal ? null : (
+        <span className={cn("-mt-1 text-xs tabular-nums", totalClassName)}>
+          {formatTotal ? formatTotal(total) : total.toLocaleString()}
+        </span>
+      )}
     </div>
   );
 }

apps/webapp/app/components/queues/QueueMetricCards.tsx

@@ -6,6 +6,7 @@ import {
   type ChartState,
 } from "~/components/primitives/charts/ChartCompound";
 import { ChartCard } from "~/components/primitives/charts/ChartCard";
+import { UsageSparkline } from "~/components/primitives/UsageSparkline";
 import {
   useMetricResourceQuery,
   type MetricResourceTimeRange,
@@ -79,19 +80,7 @@ export function formatWaitMs(ms: number): string {
 
 export type QueueMetricSeriesConfig = { key: string; label: string; color: string };
 
-export function QueueMetricChartCard({
-  title,
-  query,
-  series,
-  ids,
-  timeRange,
-  queueName,
-  valueFormat,
-  fillGaps,
-  defaultPeriod,
-  className,
-}: {
-  title: string;
+type QueueMetricChartProps = {
   query: string;
   series: QueueMetricSeriesConfig[];
   ids: QueueMetricIds;
@@ -100,8 +89,19 @@ export function QueueMetricChartCard({
   valueFormat?: (value: number) => string;
   fillGaps?: boolean;
   defaultPeriod?: string;
-  className?: string;
-}) {
+};
+
+// Bare chart (no card chrome) so it can live inside a shared card, e.g. a tabbed panel.
+export function QueueMetricChart({
+  query,
+  series,
+  ids,
+  timeRange,
+  queueName,
+  valueFormat,
+  fillGaps,
+  defaultPeriod,
+}: QueueMetricChartProps) {
   const { rows, showLoading, failed } = useQueueMetric(query, {
     ids,
     timeRange,
@@ -135,25 +135,35 @@ export function QueueMetricChartCard({
 
   const state: ChartState = showLoading ? "loading" : failed ? "invalid" : undefined;
 
+  return (
+    <Chart.Root
+      config={chartConfig}
+      data={data}
+      dataKey="bucket"
+      series={series.map((s) => s.key)}
+      state={state}
+      fillContainer
+    >
+      <Chart.Line
+        lineType="monotone"
+        xAxisProps={{ tickFormatter }}
+        yAxisProps={valueFormat ? { tickFormatter: (v: number) => valueFormat(v) } : undefined}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+        tooltipValueFormatter={valueFormat}
+      />
+    </Chart.Root>
+  );
+}
+
+export function QueueMetricChartCard({
+  title,
+  className,
+  ...chart
+}: QueueMetricChartProps & { title: string; className?: string }) {
   return (
     <div className={className ?? "h-64"}>
       <ChartCard title={title}>
-        <Chart.Root
-          config={chartConfig}
-          data={data}
-          dataKey="bucket"
-          series={series.map((s) => s.key)}
-          state={state}
-          fillContainer
-        >
-          <Chart.Line
-            lineType="monotone"
-            xAxisProps={{ tickFormatter }}
-            yAxisProps={valueFormat ? { tickFormatter: (v: number) => valueFormat(v) } : undefined}
-            tooltipLabelFormatter={tooltipLabelFormatter}
-            tooltipValueFormatter={valueFormat}
-          />
-        </Chart.Root>
+        <QueueMetricChart {...chart} />
       </ChartCard>
     </div>
   );
@@ -203,6 +213,76 @@ export function QueueSidebarStats({
   );
 }
 
+// A compact stat card with a recent trend sparkline underneath, for the run inspector.
+// The headline is a live "now" value from the loader; the sparkline pulls its own series.
+const SPARKLINE_PERIOD = "30m";
+
+export function QueueSparklineStat({
+  title,
+  headline,
+  headlineClassName,
+  query,
+  color,
+  ids,
+  queueName,
+  formatPeak,
+}: {
+  title: string;
+  headline: string;
+  headlineClassName?: string;
+  query: string;
+  color: string;
+  ids: QueueMetricIds;
+  queueName: string;
+  formatPeak?: (peak: number) => string;
+}) {
+  const timeRange: QueueMetricTimeRange = { period: SPARKLINE_PERIOD, from: null, to: null };
+  const { rows } = useQueueMetric(query, {
+    ids,
+    timeRange,
+    queueName,
+    fillGaps: true,
+    defaultPeriod: SPARKLINE_PERIOD,
+  });
+
+  const { data, bucketStartMs, bucketIntervalMs, peak } = useMemo(() => {
+    const points = rows
+      .map((r) => ({ bucket: clickhouseTimeToMs(r.t), v: toNumber(r.v) }))
+      .filter((p) => Number.isFinite(p.bucket))
+      .sort((a, b) => a.bucket - b.bucket);
+    return {
+      data: points.map((p) => p.v),
+      bucketStartMs: points[0]?.bucket,
+      bucketIntervalMs: points.length > 1 ? points[1]!.bucket - points[0]!.bucket : undefined,
+      peak: points.reduce((m, p) => Math.max(m, p.v), 0),
+    };
+  }, [rows]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-baseline justify-between gap-2">
+        <span className="text-xs uppercase tracking-wide text-text-dimmed">{title}</span>
+        {data.length > 0 && peak > 0 ? (
+          <span className="text-xs tabular-nums text-text-dimmed">
+            peak {formatPeak ? formatPeak(peak) : peak.toLocaleString()}
+          </span>
+        ) : null}
+      </div>
+      <div className={cn("text-xl tabular-nums text-text-bright", headlineClassName)}>
+        {headline}
+      </div>
+      <UsageSparkline
+        data={data}
+        bucketStartMs={bucketStartMs}
+        bucketIntervalMs={bucketIntervalMs}
+        color={color}
+        chartClassName="h-6 w-full"
+        hideTotal
+      />
+    </div>
+  );
+}
+
 export function QueueMetricStat({
   label,
   value,

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

@@ -13,6 +13,7 @@ export type RunQueueWaiting = {
   delayP50Ms: number | null;
   delayP95Ms: number | null;
   loadedAt: number;
+  ids: { organizationId: string; projectId: string; environmentId: string };
   concurrencyKey: {
     key: string;
     queued: number;
@@ -23,6 +24,7 @@ export type RunQueueWaiting = {
 
 export type RunQueueMetrics = {
   queueFriendlyId: string | null;
+  queueName: string;
   paused: boolean;
   waiting: RunQueueWaiting | null;
 };
@@ -64,6 +66,7 @@ export async function resolveRunQueueMetrics(options: {
 
     const base: RunQueueMetrics = {
       queueFriendlyId: taskQueue?.friendlyId ?? null,
+      queueName: run.queue.name,
       paused: taskQueue?.paused ?? false,
       waiting: null,
     };
@@ -106,6 +109,11 @@ export async function resolveRunQueueMetrics(options: {
         delayP50Ms: delays.p50,
         delayP95Ms: delays.p95,
         loadedAt,
+        ids: {
+          organizationId: project.organizationId,
+          projectId: project.id,
+          environmentId: environment.id,
+        },
         concurrencyKey: ck
           ? {
               key: ck,