Query: time limits, performance improvements, styling (#2953)

Summary
- Query: add time limits, performance improvements, and styling updates

Changes
- Add ClickHouse output_text and error_text columns with indexes
- Automatically use _text columns for JSON based on query pattern;
support JSON column data prefixes
- Add idempotency key and scope columns
- Add enforcedWhereClause for tenant and time restrictions, instead of
the old tenant stuff.
- Implement basic time filter limiting and set default time period based
on plan; show message when results are clipped
- UX: resizable code area (including vertical splits), collapsible
sidebar, fix table/chart vertical sizing, max height for chart legend in
fullscreen
- Styling and UI tweaks: improved chart legend styling, more chart
colours, thinner line chart stroke, pricing callout color, improved
layout for callouts
- Features: generate and save AI titles
<!-- devin-review-badge-begin -->

---

<a
href="https://app.devin.ai/review/triggerdotdev/trigger.dev/pull/2953">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

Author: matt-aitken

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -5,9 +5,10 @@ import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { Paragraph } from "../primitives/Paragraph";
 import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
 
-// Color palette for chart series
+// Color palette for chart series - 30 distinct colors for large datasets
 const CHART_COLORS = [
-  "#7655fd", // Primary purple
+  // Primary colors
+  "#7655fd", // Purple
   "#22c55e", // Green
   "#f59e0b", // Amber
   "#ef4444", // Red
@@ -17,6 +18,28 @@ const CHART_COLORS = [
   "#14b8a6", // Teal
   "#f97316", // Orange
   "#6366f1", // Indigo
+  // Extended palette
+  "#84cc16", // Lime
+  "#0ea5e9", // Sky
+  "#f43f5e", // Rose
+  "#a855f7", // Fuchsia
+  "#eab308", // Yellow
+  "#10b981", // Emerald
+  "#3b82f6", // Blue
+  "#d946ef", // Magenta
+  "#78716c", // Stone
+  "#facc15", // Gold
+  // Additional distinct colors
+  "#2dd4bf", // Turquoise
+  "#fb923c", // Light orange
+  "#a3e635", // Yellow-green
+  "#38bdf8", // Light blue
+  "#c084fc", // Light purple
+  "#4ade80", // Light green
+  "#fbbf24", // Light amber
+  "#f472b6", // Light pink
+  "#67e8f9", // Light cyan
+  "#818cf8", // Light indigo
 ];
 
 function getSeriesColor(index: number): string {
@@ -30,6 +53,8 @@ interface QueryResultsChartProps {
   fullLegend?: boolean;
   /** Callback when "View all" legend button is clicked */
   onViewAllLegendItems?: () => void;
+  /** When true, constrains legend to max 50% height with scrolling */
+  legendScrollable?: boolean;
 }
 
 interface TransformedData {
@@ -702,6 +727,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   config,
   fullLegend = false,
   onViewAllLegendItems,
+  legendScrollable = false,
 }: QueryResultsChartProps) {
   const {
     xAxisColumn,
@@ -872,6 +898,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         minHeight="300px"
         fillContainer
         onViewAllLegendItems={onViewAllLegendItems}
+        legendScrollable={legendScrollable}
       >
         <Chart.Bar
           xAxisProps={xAxisPropsForBar}
@@ -896,6 +923,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       minHeight="300px"
       fillContainer
       onViewAllLegendItems={onViewAllLegendItems}
+      legendScrollable={legendScrollable}
     >
       <Chart.Line
         xAxisProps={xAxisPropsForLine}

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -672,7 +672,9 @@ function EnvironmentCellValue({ value }: { value: string }) {
 }
 
 function JSONCellValue({ value }: { value: unknown }) {
-  const jsonString = JSON.stringify(value);
+  // If the value is already a string (e.g., from a textColumn optimization),
+  // use it directly without double-stringifying
+  const jsonString = typeof value === "string" ? value : JSON.stringify(value);
   const isTruncated = jsonString.length > MAX_STRING_DISPLAY_LENGTH;
 
   if (isTruncated) {
@@ -1137,6 +1139,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
             height: `${rowVirtualizer.getTotalSize()}px`,
             position: "relative",
           }}
+          className="bg-background-dimmed divide-y divide-charcoal-700"
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => {
             const row = tableRows[virtualRow.index];

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

@@ -1,9 +1,64 @@
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
-export function AnimatedNumber({ value, duration = 0.5 }: { value: number; duration?: number }) {
+/**
+ * Determines the number of decimal places to display based on the value.
+ * - For integers or large numbers (>=100), no decimals
+ * - For numbers >= 10, 1 decimal place
+ * - For numbers >= 1, 2 decimal places
+ * - For smaller numbers, up to 4 decimal places
+ */
+function getDecimalPlaces(value: number): number {
+  if (Number.isInteger(value)) return 0;
+
+  const absValue = Math.abs(value);
+  if (absValue >= 100) return 0;
+  if (absValue >= 10) return 1;
+  if (absValue >= 1) return 2;
+  if (absValue >= 0.1) return 3;
+  return 4;
+}
+
+/**
+ * Sanitizes a decimal places value to ensure it's valid for toLocaleString.
+ * - Coerces to a finite number (handles NaN, Infinity, -Infinity)
+ * - Rounds to an integer
+ * - Clamps to the valid 0-20 range for toLocaleString options
+ */
+function sanitizeDecimals(decimals: number): number {
+  if (!Number.isFinite(decimals)) {
+    return 0;
+  }
+  return Math.min(20, Math.max(0, Math.round(decimals)));
+}
+
+export function AnimatedNumber({
+  value,
+  duration = 0.5,
+  decimalPlaces,
+}: {
+  value: number;
+  duration?: number;
+  /** Number of decimal places to display. If not provided, auto-detects based on value. */
+  decimalPlaces?: number;
+}) {
   const motionValue = useMotionValue(value);
-  let display = useTransform(motionValue, (current) => Math.round(current).toLocaleString());
+
+  // Determine decimal places - use provided value or auto-detect, then sanitize
+  const safeDecimals = useMemo(() => {
+    const rawDecimals = decimalPlaces !== undefined ? decimalPlaces : getDecimalPlaces(value);
+    return sanitizeDecimals(rawDecimals);
+  }, [decimalPlaces, value]);
+
+  const display = useTransform(motionValue, (current) => {
+    if (safeDecimals === 0) {
+      return Math.round(current).toLocaleString();
+    }
+    return current.toLocaleString(undefined, {
+      minimumFractionDigits: safeDecimals,
+      maximumFractionDigits: safeDecimals,
+    });
+  });
 
   useEffect(() => {
     animate(motionValue, value, {

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

@@ -1,4 +1,5 @@
 import {
+  CreditCardIcon,
   ExclamationCircleIcon,
   ExclamationTriangleIcon,
   InformationCircleIcon,
@@ -60,10 +61,10 @@ export const variantClasses = {
     linkClassName: "transition hover:bg-blue-400/20",
   },
   pricing: {
-    className: "border-charcoal-700 bg-charcoal-800",
-    icon: <ChartBarIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
-    textColor: "text-text-bright",
-    linkClassName: "transition hover:bg-charcoal-750",
+    className: "border-indigo-400/20 bg-indigo-800/30",
+    icon: <CreditCardIcon className="h-5 w-5 shrink-0 text-indigo-400" />,
+    textColor: "text-indigo-300",
+    linkClassName: "transition hover:bg-indigo-400/20",
   },
 } as const;
 

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

@@ -26,19 +26,40 @@ const ResizableHandle = ({
 }) => (
   <PanelResizer
     className={cn(
-      "group relative flex w-0.75 items-center justify-center focus-custom after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      // Base styles
+      "group relative flex items-center justify-center focus-custom",
+      // Horizontal orientation (default)
+      "w-0.75 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+      // Vertical orientation
+      "data-[handle-orientation=vertical]:h-0.75 data-[handle-orientation=vertical]:w-full",
+      "data-[handle-orientation=vertical]:after:inset-x-0 data-[handle-orientation=vertical]:after:inset-y-auto",
+      "data-[handle-orientation=vertical]:after:top-1/2 data-[handle-orientation=vertical]:after:left-0",
+      "data-[handle-orientation=vertical]:after:h-1 data-[handle-orientation=vertical]:after:w-full",
+      "data-[handle-orientation=vertical]:after:-translate-y-1/2 data-[handle-orientation=vertical]:after:translate-x-0",
       className
     )}
     size="3px"
     {...props}
   >
-    <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
+    {/* Horizontal orientation line indicator */}
+    <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500 group-data-[handle-orientation=vertical]:hidden" />
+    {/* Vertical orientation line indicator */}
+    <div className="absolute left-0 top-[0.0625rem] hidden h-px w-full bg-grid-bright transition group-hover:top-0 group-hover:h-0.75 group-hover:bg-lavender-500 group-data-[handle-orientation=vertical]:block" />
     {withHandle && (
-      <div className="z-10 flex h-5 w-3 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden">
-        {Array.from({ length: 3 }).map((_, index) => (
-          <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
-        ))}
-      </div>
+      <>
+        {/* Horizontal orientation dots (vertical arrangement) */}
+        <div className="z-10 flex h-5 w-0.75 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:hidden">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
+          ))}
+        </div>
+        {/* Vertical orientation dots (horizontal arrangement) */}
+        <div className="z-10 hidden h-0.75 w-5 flex-row items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:flex">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <div key={index} className="h-0.75 w-[0.1875rem] rounded-full bg-charcoal-600" />
+          ))}
+        </div>
+      </>
     )}
   </PanelResizer>
 );

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

@@ -6,7 +6,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   return (
     <div
       className={cn(
-        "flex flex-col rounded-lg border border-grid-bright bg-background-bright pb-2 pt-4",
+        "flex flex-col rounded-lg border border-grid-bright bg-background-bright pb-1.5 pt-3",
         className
       )}
     >
@@ -17,7 +17,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
 
 const CardHeader = ({ children }: { children: ReactNode }) => {
   return (
-    <Header3 className="mb-4 flex items-center justify-between gap-2 px-4">{children}</Header3>
+    <Header3 className="mb-3 flex items-center justify-between gap-2 px-3">{children}</Header3>
   );
 };