From c2085e6cc67fa83fddebc59bde942836b6eac99a Mon Sep 17 00:00:00 2001
From: nicktrn <55853254+nicktrn@users.noreply.github.com>
Date: Thu, 12 Feb 2026 15:31:52 +0000
Subject: [PATCH 01/25] feat(dashboard): link git sha and ref to GitHub on
 settings page (#3034)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the git SHA and git ref in the org settings sidebar clickable links
to GitHub — SHA links to the commit, ref links to the branch/tag.
---
 .../OrganizationSettingsSideMenu.tsx           | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
index 8758e181f..9069620c9 100644
--- a/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
@@ -141,7 +141,14 @@ export function OrganizationSettingsSideMenu({
           <div className="flex flex-col gap-1">
             <SideMenuHeader title="Git ref" />
             <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
-              {buildInfo.gitRefName}
+              <a
+                href={`https://github.com/triggerdotdev/trigger.dev/tree/${buildInfo.gitRefName}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="transition hover:text-text-bright"
+              >
+                {buildInfo.gitRefName}
+              </a>
             </Paragraph>
           </div>
         )}
@@ -149,7 +156,14 @@ export function OrganizationSettingsSideMenu({
           <div className="flex flex-col gap-1">
             <SideMenuHeader title="Git sha" />
             <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
-              {buildInfo.gitSha.slice(0, 9)}
+              <a
+                href={`https://github.com/triggerdotdev/trigger.dev/commit/${buildInfo.gitSha}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="transition hover:text-text-bright"
+              >
+                {buildInfo.gitSha.slice(0, 9)}
+              </a>
             </Paragraph>
           </div>
         )}

From 062bcaece8ad7f1046097977efab18c1fcc0ee42 Mon Sep 17 00:00:00 2001
From: Eric Allam <eric@trigger.dev>
Date: Thu, 12 Feb 2026 16:14:25 +0000
Subject: [PATCH 02/25] feat(mcp): add timeout parameter to
 wait_for_run_to_complete tool (#3035)

## Summary

- Adds an optional `timeoutInSeconds` parameter (default 60s) to the
`wait_for_run_to_complete` MCP tool
- If the run doesn't complete within the timeout, returns the current
run state instead of blocking indefinitely
- Uses `AbortSignal.timeout()` combined with the existing MCP signal

Fixes #3032
---
 .changeset/mcp-wait-timeout.md        |  5 +++
 packages/cli-v3/src/mcp/config.ts     |  2 +-
 packages/cli-v3/src/mcp/schemas.ts    | 11 +++++++
 packages/cli-v3/src/mcp/tools/runs.ts | 45 +++++++++++++++++++--------
 4 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/mcp-wait-timeout.md

diff --git a/.changeset/mcp-wait-timeout.md b/.changeset/mcp-wait-timeout.md
new file mode 100644
index 000000000..02d6c9823
--- /dev/null
+++ b/.changeset/mcp-wait-timeout.md
@@ -0,0 +1,5 @@
+---
+"trigger.dev": patch
+---
+
+Add optional `timeoutInSeconds` parameter to the `wait_for_run_to_complete` MCP tool. Defaults to 60 seconds. If the run doesn't complete within the timeout, the current state of the run is returned instead of waiting indefinitely.
diff --git a/packages/cli-v3/src/mcp/config.ts b/packages/cli-v3/src/mcp/config.ts
index 206b5910f..5a1ec45cb 100644
--- a/packages/cli-v3/src/mcp/config.ts
+++ b/packages/cli-v3/src/mcp/config.ts
@@ -68,7 +68,7 @@ export const toolsMetadata = {
     name: "wait_for_run_to_complete",
     title: "Wait for Run to Complete",
     description:
-      "Wait for a run to complete. The run ID is the ID of the run that was triggered. It starts with run_",
+      "Wait for a run to complete. The run ID is the ID of the run that was triggered. It starts with run_. Has an optional timeoutInSeconds parameter (default 60s) - if the run doesn't complete within that time, the current state of the run will be returned.",
   },
   cancel_run: {
     name: "cancel_run",
diff --git a/packages/cli-v3/src/mcp/schemas.ts b/packages/cli-v3/src/mcp/schemas.ts
index b98faca0d..8afb10f38 100644
--- a/packages/cli-v3/src/mcp/schemas.ts
+++ b/packages/cli-v3/src/mcp/schemas.ts
@@ -123,6 +123,17 @@ export const CommonRunsInput = CommonProjectsInput.extend({
 
 export type CommonRunsInput = z.output<typeof CommonRunsInput>;
 
+export const WaitForRunInput = CommonRunsInput.extend({
+  timeoutInSeconds: z
+    .number()
+    .describe(
+      "The maximum time in seconds to wait for the run to complete. If the run doesn't complete within this time, the current state of the run will be returned. Defaults to 60 seconds."
+    )
+    .default(60),
+});
+
+export type WaitForRunInput = z.output<typeof WaitForRunInput>;
+
 export const GetRunDetailsInput = CommonRunsInput.extend({
   maxTraceLines: z
     .number()
diff --git a/packages/cli-v3/src/mcp/tools/runs.ts b/packages/cli-v3/src/mcp/tools/runs.ts
index 13fe601da..056544e3c 100644
--- a/packages/cli-v3/src/mcp/tools/runs.ts
+++ b/packages/cli-v3/src/mcp/tools/runs.ts
@@ -1,7 +1,7 @@
 import { AnyRunShape } from "@trigger.dev/core/v3";
 import { toolsMetadata } from "../config.js";
 import { formatRun, formatRunList, formatRunShape, formatRunTrace } from "../formatters.js";
-import { CommonRunsInput, GetRunDetailsInput, ListRunsInput } from "../schemas.js";
+import { CommonRunsInput, GetRunDetailsInput, ListRunsInput, WaitForRunInput } from "../schemas.js";
 import { respondWithError, toolHandler } from "../utils.js";
 
 export const getRunDetailsTool = {
@@ -65,8 +65,8 @@ export const waitForRunToCompleteTool = {
   name: toolsMetadata.wait_for_run_to_complete.name,
   title: toolsMetadata.wait_for_run_to_complete.title,
   description: toolsMetadata.wait_for_run_to_complete.description,
-  inputSchema: CommonRunsInput.shape,
-  handler: toolHandler(CommonRunsInput.shape, async (input, { ctx, signal }) => {
+  inputSchema: WaitForRunInput.shape,
+  handler: toolHandler(WaitForRunInput.shape, async (input, { ctx, signal }) => {
     ctx.logger?.log("calling wait_for_run_to_complete", { input });
 
     if (ctx.options.devOnly && input.environment !== "dev") {
@@ -87,20 +87,35 @@ export const waitForRunToCompleteTool = {
       branch: input.branch,
     });
 
-    const runSubscription = apiClient.subscribeToRun(input.runId, { signal });
+    const timeoutMs = input.timeoutInSeconds * 1000;
+    const timeoutSignal = AbortSignal.timeout(timeoutMs);
+    const combinedSignal = signal
+      ? AbortSignal.any([signal, timeoutSignal])
+      : timeoutSignal;
+
+    const runSubscription = apiClient.subscribeToRun(input.runId, { signal: combinedSignal });
     const readableStream = runSubscription.getReader();
 
     let run: AnyRunShape | null = null;
+    let timedOut = false;
 
-    while (true) {
-      const { done, value } = await readableStream.read();
-      if (done) {
-        break;
+    try {
+      while (true) {
+        const { done, value } = await readableStream.read();
+        if (done) {
+          break;
+        }
+        run = value;
+
+        if (value.isCompleted) {
+          break;
+        }
       }
-      run = value;
-
-      if (value.isCompleted) {
-        break;
+    } catch (error) {
+      if (timeoutSignal.aborted) {
+        timedOut = true;
+      } else {
+        throw error;
       }
     }
 
@@ -108,8 +123,12 @@ export const waitForRunToCompleteTool = {
       return respondWithError("Run not found");
     }
 
+    const prefix = timedOut
+      ? `Timed out after ${input.timeoutInSeconds}s. Returning current run state:\n\n`
+      : "";
+
     return {
-      content: [{ type: "text", text: formatRunShape(run) }],
+      content: [{ type: "text", text: prefix + formatRunShape(run) }],
     };
   }),
 };

From bc0d1ff59a8152b303ca7f30fa7b2be0b98646c5 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 12 Feb 2026 17:48:02 +0000
Subject: [PATCH 03/25] Metrics dashboards (#3019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
- Implemented metrics dashboards with a built-in dashboard and custom
dashboards
- Added a "Big number” display type

What changed
- New data format for metric layouts and saving/editing layouts
(editing, saving, cancel revert)
  - QueryWidget usable on Query page and Metrics dashboards
  - Time filtering, auto-reloading and timeBucket() auto-bin support
- Filters added to metrics; widget popover/improved history and blank
states
- Side menu:
- Metrics/Insights section with icons, colors, padding, collapsible
behavior and reordering of custom dashboards
- Move action logic into service for reuse and API querying; refactor
reordering for reuse
<!-- devin-review-badge-begin -->

---

<a
href="https://app.devin.ai/review/triggerdotdev/trigger.dev/pull/3019"
target="_blank">
  <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 -->

---------

Co-authored-by: James Ritchie <james@trigger.dev>
---
 .vscode/settings.json                         |    1 -
 apps/webapp/app/components/AlphaBadge.tsx     |   29 +
 .../app/components/code/AIQueryInput.tsx      |  149 +-
 .../app/components/code/ChartConfigPanel.tsx  |  206 ++-
 .../app/components/code/QueryResultsChart.tsx |  359 ++--
 .../webapp/app/components/code/TSQLEditor.tsx |   43 +-
 .../app/components/code/TSQLResultsTable.tsx  |  124 +-
 .../webapp/app/components/code/chartColors.ts |  183 +++
 .../components/code/tsql/tsqlCompletion.ts    |   10 +
 .../app/components/layout/AppLayout.tsx       |    2 +-
 .../app/components/logs/LogsTaskFilter.tsx    |    4 +-
 .../app/components/metrics/QueryWidget.tsx    |  496 ++++++
 .../app/components/metrics/QueuesFilter.tsx   |  212 +++
 .../metrics/SaveToDashboardDialog.tsx         |  177 ++
 .../app/components/metrics/ScopeFilter.tsx    |   64 +
 .../app/components/metrics/TitleWidget.tsx    |  125 ++
 .../navigation/DashboardDialogs.tsx           |  255 +++
 .../components/navigation/DashboardList.tsx   |  123 ++
 .../app/components/navigation/SideMenu.tsx    |  691 ++++----
 .../components/navigation/SideMenuItem.tsx    |  112 +-
 .../components/navigation/SideMenuSection.tsx |   28 +-
 .../components/navigation/TreeConnectors.tsx  |   29 +
 .../components/navigation/sideMenuTypes.ts    |    7 +
 .../navigation/useReorderableList.ts          |  129 ++
 .../components/primitives/AppliedFilter.tsx   |   16 +-
 .../app/components/primitives/ClientTabs.tsx  |    3 +-
 .../app/components/primitives/FormButtons.tsx |    4 +-
 .../primitives/LoadingBarDivider.tsx          |    6 +-
 .../app/components/primitives/Popover.tsx     |   27 +-
 .../app/components/primitives/Resizable.tsx   |    6 +-
 .../app/components/primitives/Tooltip.tsx     |    2 +-
 .../primitives/charts/BigNumber.tsx           |   46 -
 .../primitives/charts/BigNumberCard.tsx       |  171 ++
 .../app/components/primitives/charts/Card.tsx |   17 +-
 .../components/primitives/charts/ChartBar.tsx |   41 +-
 .../primitives/charts/ChartLegendCompound.tsx |   56 +-
 .../primitives/charts/ChartLine.tsx           |   28 +-
 .../app/components/query/QueryEditor.tsx      | 1457 +++++++++++++++++
 .../app/components/runs/v3/SharedFilters.tsx  |  103 +-
 .../app/components/runs/v3/TaskRunStatus.tsx  |   39 +
 apps/webapp/app/env.server.ts                 |    4 +
 apps/webapp/app/hooks/useDashboardEditor.ts   |  515 ++++++
 apps/webapp/app/hooks/useElementVisibility.ts |   35 +
 apps/webapp/app/hooks/useInterval.ts          |   63 +
 apps/webapp/app/hooks/useOrganizations.ts     |   26 +
 apps/webapp/app/hooks/useRevalidateOnParam.ts |   57 +
 .../app/models/runtimeEnvironment.server.ts   |   23 +
 .../presenters/v3/BuiltInDashboards.server.ts |  225 +++
 .../presenters/v3/LimitsPresenter.server.ts   |   45 +
 .../v3/MetricDashboardPresenter.server.ts     |  123 ++
 .../route.tsx                                 |   24 +-
 .../route.tsx                                 |  295 ++++
 .../route.tsx                                 |  772 +++++++++
 .../AITabContent.tsx                          |   14 +-
 .../ExamplesContent.tsx                       |   13 +
 .../QueryHistoryPopover.tsx                   |   51 +-
 .../TRQLGuideContent.tsx                      |    5 +
 .../route.tsx                                 |  960 +----------
 .../_app.orgs.$organizationSlug/route.tsx     |   51 +-
 apps/webapp/app/routes/resources.metric.tsx   |  283 ++++
 ...vParam.dashboards.$dashboardId.widgets.tsx |  492 ++++++
 ...tParam.env.$envParam.dashboards.create.tsx |   84 +
 ...ces.orgs.$organizationSlug.select-plan.tsx |   69 +-
 .../routes/resources.preferences.sidemenu.tsx |   47 +-
 .../app/routes/storybook.charts/route.tsx     |    8 +-
 .../app/services/clickhouseInstance.server.ts |   30 +-
 .../services/dashboardPreferences.server.ts   |   95 +-
 .../app/services/queryService.server.ts       |  194 ++-
 apps/webapp/app/tailwind.css                  |   40 +
 apps/webapp/app/utils/pathBuilder.ts          |   22 +-
 apps/webapp/app/v3/querySchemas.ts            |    5 +
 .../app/v3/services/aiQueryService.server.ts  |   57 +-
 apps/webapp/package.json                      |    4 +-
 apps/webapp/tailwind.config.js                |    6 +
 .../clickhouse/src/client/tsql.ts             |   10 +-
 .../migration.sql                             |   25 +
 .../migration.sql                             |    3 +
 .../migration.sql                             |    5 +
 .../migration.sql                             |    2 +
 .../database/prisma/schema.prisma             |  147 +-
 internal-packages/tsql/src/index.ts           |   42 +-
 .../tsql/src/query/printer.test.ts            |  285 +++-
 internal-packages/tsql/src/query/printer.ts   |  117 +-
 .../tsql/src/query/printer_context.ts         |   47 +-
 internal-packages/tsql/src/query/schema.ts    |   18 +
 .../tsql/src/query/time_buckets.test.ts       |  181 ++
 .../tsql/src/query/time_buckets.ts            |   86 +
 internal-packages/tsql/src/query/validator.ts |    7 +-
 pnpm-lock.yaml                                |   64 +-
 89 files changed, 9408 insertions(+), 1948 deletions(-)
 create mode 100644 apps/webapp/app/components/code/chartColors.ts
 create mode 100644 apps/webapp/app/components/metrics/QueryWidget.tsx
 create mode 100644 apps/webapp/app/components/metrics/QueuesFilter.tsx
 create mode 100644 apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
 create mode 100644 apps/webapp/app/components/metrics/ScopeFilter.tsx
 create mode 100644 apps/webapp/app/components/metrics/TitleWidget.tsx
 create mode 100644 apps/webapp/app/components/navigation/DashboardDialogs.tsx
 create mode 100644 apps/webapp/app/components/navigation/DashboardList.tsx
 create mode 100644 apps/webapp/app/components/navigation/TreeConnectors.tsx
 create mode 100644 apps/webapp/app/components/navigation/sideMenuTypes.ts
 create mode 100644 apps/webapp/app/components/navigation/useReorderableList.ts
 delete mode 100644 apps/webapp/app/components/primitives/charts/BigNumber.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
 create mode 100644 apps/webapp/app/components/query/QueryEditor.tsx
 create mode 100644 apps/webapp/app/hooks/useDashboardEditor.ts
 create mode 100644 apps/webapp/app/hooks/useElementVisibility.ts
 create mode 100644 apps/webapp/app/hooks/useInterval.ts
 create mode 100644 apps/webapp/app/hooks/useRevalidateOnParam.ts
 create mode 100644 apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
 create mode 100644 apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx
 create mode 100644 apps/webapp/app/routes/resources.metric.tsx
 create mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx
 create mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.create.tsx
 create mode 100644 internal-packages/database/prisma/migrations/20260201130503_metrics_dashboard_table_created/migration.sql
 create mode 100644 internal-packages/database/prisma/migrations/20260202044337_metrics_dashboard_description/migration.sql
 create mode 100644 internal-packages/database/prisma/migrations/20260202100000_add_friendlyid_to_metrics_dashboard/migration.sql
 create mode 100644 internal-packages/database/prisma/migrations/20260211120000_make_metrics_dashboard_owner_nullable/migration.sql
 create mode 100644 internal-packages/tsql/src/query/time_buckets.test.ts
 create mode 100644 internal-packages/tsql/src/query/time_buckets.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 382a5ae62..fd9f3dcde 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,5 @@
     "packages/cli-v3/e2e": true
   },
   "vitest.disableWorkspaceWarning": true,
-  "typescript.experimental.useTsgo": true,
   "chat.agent.maxRequests": 10000
 }
diff --git a/apps/webapp/app/components/AlphaBadge.tsx b/apps/webapp/app/components/AlphaBadge.tsx
index 58da1a994..0a1c4a7fc 100644
--- a/apps/webapp/app/components/AlphaBadge.tsx
+++ b/apps/webapp/app/components/AlphaBadge.tsx
@@ -30,3 +30,32 @@ export function AlphaTitle({ children }: { children: React.ReactNode }) {
     </>
   );
 }
+
+export function BetaBadge({
+  inline = false,
+  className,
+}: {
+  inline?: boolean;
+  className?: string;
+}) {
+  return (
+    <SimpleTooltip
+      button={
+        <Badge variant="extra-small" className={cn(inline ? "inline-grid" : "", className)}>
+          Beta
+        </Badge>
+      }
+      content="This feature is in Beta."
+      disableHoverableContent
+    />
+  );
+}
+
+export function BetaTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <span>{children}</span>
+      <BetaBadge />
+    </>
+  );
+}
diff --git a/apps/webapp/app/components/code/AIQueryInput.tsx b/apps/webapp/app/components/code/AIQueryInput.tsx
index 38d0c9b21..0775ec2c2 100644
--- a/apps/webapp/app/components/code/AIQueryInput.tsx
+++ b/apps/webapp/app/components/code/AIQueryInput.tsx
@@ -1,7 +1,13 @@
-import { PencilSquareIcon, PlusIcon, SparklesIcon } from "@heroicons/react/20/solid";
+import { CheckIcon, PencilSquareIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { AnimatePresence, motion } from "framer-motion";
 import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
-import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { Spinner } from "~/components/primitives/Spinner";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import type { AITimeFilter } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/types";
+import { cn } from "~/utils/cn";
 
 // Lazy load streamdown components to avoid SSR issues
 const StreamdownRenderer = lazy(() =>
@@ -13,13 +19,6 @@ const StreamdownRenderer = lazy(() =>
     ),
   }))
 );
-import { Button } from "~/components/primitives/Buttons";
-import { Spinner } from "~/components/primitives/Spinner";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { useOrganization } from "~/hooks/useOrganizations";
-import { useProject } from "~/hooks/useProject";
-import type { AITimeFilter } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/types";
-import { cn } from "~/utils/cn";
 
 type StreamEventType =
   | { type: "thinking"; content: string }
@@ -179,21 +178,7 @@ export function AIQueryInput({
           setThinking((prev) => prev + event.content);
           break;
         case "tool_call":
-          if (event.tool === "setTimeFilter") {
-            setThinking((prev) => {
-              if (prev.trimEnd().endsWith("Setting time filter...")) {
-                return prev;
-              }
-              return prev + `\nSetting time filter...\n`;
-            });
-          } else {
-            setThinking((prev) => {
-              if (prev.trimEnd().endsWith("Validating query...")) {
-                return prev;
-              }
-              return prev + `\nValidating query...\n`;
-            });
-          }
+          // Tool calls are handled silently — no UI text needed
           break;
         case "time_filter":
           // Apply time filter immediately when the AI sets it
@@ -262,13 +247,13 @@ export function AIQueryInput({
   }, [error]);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col">
       {/* Gradient border wrapper like the schedules AI input */}
       <div
-        className="rounded-md p-px"
+        className="overflow-hidden rounded-md p-px"
         style={{ background: "linear-gradient(to bottom right, #E543FF, #286399)" }}
       >
-        <div className="overflow-hidden rounded-[5px] bg-background-bright">
+        <div className="overflow-hidden rounded-md bg-background-bright">
           <form onSubmit={handleSubmit}>
             <textarea
               ref={textareaRef}
@@ -297,10 +282,10 @@ export function AIQueryInput({
                   variant="tertiary/small"
                   disabled={true}
                   LeadingIcon={Spinner}
-                  className="pl-1.5"
+                  className="pl-2"
                   iconSpacing="gap-1.5"
                 >
-                  {mode === "edit" ? "Editing..." : "Generating..."}
+                  {mode === "edit" ? "Editing…" : "Generating…"}
                 </Button>
               ) : (
                 <>
@@ -366,64 +351,60 @@ export function AIQueryInput({
             transition={{ duration: 0.2 }}
             className="overflow-hidden"
           >
-            <div className="rounded-md border border-grid-dimmed bg-charcoal-850 p-3">
-              <div className="mb-2 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  {isLoading ? (
-                    <Spinner
-                      color={{
-                        background: "rgba(99, 102, 241, 0.3)",
-                        foreground: "rgba(99, 102, 241, 1)",
-                      }}
-                      className="size-3"
-                    />
-                  ) : lastResult === "success" ? (
-                    <div className="size-3 rounded-full bg-success" />
-                  ) : lastResult === "error" ? (
-                    <div className="size-3 rounded-full bg-error" />
-                  ) : null}
-                  <span className="text-xs font-medium text-text-dimmed">
-                    {isLoading
-                      ? "AI is thinking..."
-                      : lastResult === "success"
+            <div className="px-1">
+              <div className="rounded-b-lg border-x border-b border-grid-dimmed bg-charcoal-850 p-3 pb-1">
+                <div className="mb-1 flex items-center justify-between">
+                  <div className="flex items-center gap-1">
+                    {isLoading ? (
+                      <Spinner className="size-4" />
+                    ) : lastResult === "success" ? (
+                      <CheckIcon className="size-4 text-success" />
+                    ) : lastResult === "error" ? (
+                      <XMarkIcon className="size-4 text-error" />
+                    ) : null}
+                    <span className="text-xs font-medium text-text-dimmed">
+                      {isLoading
+                        ? "AI is thinking…"
+                        : lastResult === "success"
                         ? "Query generated"
                         : lastResult === "error"
-                          ? "Generation failed"
-                          : "AI response"}
-                  </span>
+                        ? "Generation failed"
+                        : "AI response"}
+                    </span>
+                  </div>
+                  {isLoading ? (
+                    <Button
+                      variant="minimal/small"
+                      onClick={() => {
+                        if (abortControllerRef.current) {
+                          abortControllerRef.current.abort();
+                        }
+                        setIsLoading(false);
+                        setShowThinking(false);
+                        setThinking("");
+                      }}
+                      className="text-xs"
+                    >
+                      Cancel
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="minimal/small"
+                      onClick={() => {
+                        setShowThinking(false);
+                        setThinking("");
+                      }}
+                      className="text-xs"
+                    >
+                      Dismiss
+                    </Button>
+                  )}
+                </div>
+                <div className="streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                  <Suspense fallback={<p className="whitespace-pre-wrap">{thinking}</p>}>
+                    <StreamdownRenderer isAnimating={isLoading}>{thinking}</StreamdownRenderer>
+                  </Suspense>
                 </div>
-                {isLoading ? (
-                  <Button
-                    variant="minimal/small"
-                    onClick={() => {
-                      if (abortControllerRef.current) {
-                        abortControllerRef.current.abort();
-                      }
-                      setIsLoading(false);
-                      setShowThinking(false);
-                      setThinking("");
-                    }}
-                    className="text-xs"
-                  >
-                    Cancel
-                  </Button>
-                ) : (
-                  <Button
-                    variant="minimal/small"
-                    onClick={() => {
-                      setShowThinking(false);
-                      setThinking("");
-                    }}
-                    className="text-xs"
-                  >
-                    Dismiss
-                  </Button>
-                )}
-              </div>
-              <div className="streamdown-container max-h-96 overflow-y-auto text-xs text-text-dimmed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <Suspense fallback={<p className="whitespace-pre-wrap">{thinking}</p>}>
-                  <StreamdownRenderer isAnimating={isLoading}>{thinking}</StreamdownRenderer>
-                </Suspense>
               </div>
             </div>
           </motion.div>
diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 7d563e781..93f27dff0 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -1,27 +1,18 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
-import { BarChart, LineChart, Plus, XIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { BarChart, CheckIcon, LineChart, Plus, XIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
-import { Header3 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
 import { Select, SelectItem } from "../primitives/Select";
 import { Switch } from "../primitives/Switch";
 import { Button } from "../primitives/Buttons";
-
-export type ChartType = "bar" | "line";
-export type SortDirection = "asc" | "desc";
-export type AggregationType = "sum" | "avg" | "count" | "min" | "max";
-
-export interface ChartConfiguration {
-  chartType: ChartType;
-  xAxisColumn: string | null;
-  yAxisColumns: string[];
-  groupByColumn: string | null;
-  stacked: boolean;
-  sortByColumn: string | null;
-  sortDirection: SortDirection;
-  aggregation: AggregationType;
-}
+import {
+  type AggregationType,
+  type ChartConfiguration,
+  type SortDirection,
+} from "../metrics/QueryWidget";
+import { CHART_COLORS_BY_HUE, getSeriesColor } from "./chartColors";
 
 export const defaultChartConfig: ChartConfiguration = {
   chartType: "bar",
@@ -32,6 +23,7 @@ export const defaultChartConfig: ChartConfiguration = {
   sortByColumn: null,
   sortDirection: "asc",
   aggregation: "sum",
+  seriesColors: {},
 };
 
 interface ChartConfigPanelProps {
@@ -329,60 +321,86 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
           ) : (
             <div className="flex flex-col gap-1.5">
               {/* Always show at least one dropdown, even if yAxisColumns is empty */}
-              {(config.yAxisColumns.length === 0 ? [""] : config.yAxisColumns).map(
-                (col, index) => (
-                  <div key={index} className="flex items-center gap-1">
-                    <Select
-                      value={col}
-                      setValue={(value) => {
-                        const newColumns = [...config.yAxisColumns];
-                        if (value) {
-                          // If this is a new slot (empty string), add it
-                          if (index >= config.yAxisColumns.length) {
-                            newColumns.push(value);
-                          } else {
-                            newColumns[index] = value;
-                          }
-                        } else if (index < config.yAxisColumns.length) {
-                          newColumns.splice(index, 1);
-                        }
-                        updateConfig({ yAxisColumns: newColumns });
+              {(config.yAxisColumns.length === 0 ? [""] : config.yAxisColumns).map((col, index) => (
+                <div key={index} className="flex items-center gap-1">
+                  {col && !config.groupByColumn && (
+                    <SeriesColorPicker
+                      color={config.seriesColors?.[col] ?? getSeriesColor(index)}
+                      onColorChange={(color) => {
+                        updateConfig({
+                          seriesColors: { ...config.seriesColors, [col]: color },
+                        });
                       }}
-                      variant="tertiary/small"
-                      placeholder="Select column"
-                      items={yAxisOptions.filter(
-                        (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
-                      )}
-                      dropdownIcon
-                      className="min-w-[140px] flex-1"
-                    >
-                      {(items) =>
-                        items.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            <span className="flex items-center gap-2">
-                              <span>{item.label}</span>
-                              <TypeBadge type={item.type} />
-                            </span>
-                          </SelectItem>
-                        ))
+                    />
+                  )}
+                  <Select
+                    value={col}
+                    setValue={(value) => {
+                      const newColumns = [...config.yAxisColumns];
+                      const updates: Partial<ChartConfiguration> = {};
+                      if (value) {
+                        // If this is a new slot (empty string), add it
+                        if (index >= config.yAxisColumns.length) {
+                          newColumns.push(value);
+                        } else {
+                          // If the column name changed, migrate the color
+                          const oldCol = newColumns[index];
+                          if (oldCol && oldCol !== value && config.seriesColors?.[oldCol]) {
+                            const newSeriesColors = { ...config.seriesColors };
+                            newSeriesColors[value] = newSeriesColors[oldCol];
+                            delete newSeriesColors[oldCol];
+                            updates.seriesColors = newSeriesColors;
+                          }
+                          newColumns[index] = value;
+                        }
+                      } else if (index < config.yAxisColumns.length) {
+                        newColumns.splice(index, 1);
                       }
-                    </Select>
-                    {index > 0 && (
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
-                          updateConfig({ yAxisColumns: newColumns });
-                        }}
-                        className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-                        title="Remove series"
-                      >
-                        <XIcon className="h-3.5 w-3.5" />
-                      </button>
+                      updateConfig({ ...updates, yAxisColumns: newColumns });
+                    }}
+                    variant="tertiary/small"
+                    placeholder="Select column"
+                    items={yAxisOptions.filter(
+                      (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
                     )}
-                  </div>
-                )
-              )}
+                    dropdownIcon
+                    className="min-w-[140px] flex-1"
+                  >
+                    {(items) =>
+                      items.map((item) => (
+                        <SelectItem key={item.value} value={item.value}>
+                          <span className="flex items-center gap-2">
+                            <span>{item.label}</span>
+                            <TypeBadge type={item.type} />
+                          </span>
+                        </SelectItem>
+                      ))
+                    }
+                  </Select>
+
+                  {index > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const removedCol = config.yAxisColumns[index];
+                        const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
+                        const updates: Partial<ChartConfiguration> = { yAxisColumns: newColumns };
+                        // Clean up the color entry for the removed series
+                        if (removedCol && config.seriesColors?.[removedCol]) {
+                          const newSeriesColors = { ...config.seriesColors };
+                          delete newSeriesColors[removedCol];
+                          updates.seriesColors = newSeriesColors;
+                        }
+                        updateConfig(updates);
+                      }}
+                      className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                      title="Remove series"
+                    >
+                      <XIcon className="h-3.5 w-3.5" />
+                    </button>
+                  )}
+                </div>
+              ))}
 
               {/* Add another series button - only show when we have at least one series and not grouped */}
               {config.yAxisColumns.length > 0 &&
@@ -439,9 +457,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
         {/* Group By - disabled when multiple series are selected */}
         <ConfigField label="Group by">
           {config.yAxisColumns.length > 1 ? (
-            <span className="text-xs text-text-dimmed">
-              Not available with multiple series
-            </span>
+            <span className="text-xs text-text-dimmed">Not available with multiple series</span>
           ) : (
             <Select
               value={config.groupByColumn ?? "__none__"}
@@ -569,6 +585,52 @@ function SortDirectionToggle({
   );
 }
 
+function SeriesColorPicker({
+  color,
+  onColorChange,
+}: {
+  color: string;
+  onColorChange: (color: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="flex-shrink-0 rounded p-0.5 hover:bg-charcoal-700"
+          title="Change series color"
+        >
+          <span
+            className="block h-4 w-4 rounded-full border border-white/30"
+            style={{ backgroundColor: color }}
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto p-2">
+        <div className="grid grid-cols-6 gap-1.5">
+          {CHART_COLORS_BY_HUE.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => {
+                onColorChange(c);
+                setOpen(false);
+              }}
+              className="group/swatch flex h-6 w-6 items-center justify-center rounded-full border border-white/30"
+              style={{ backgroundColor: c }}
+              title={c}
+            >
+              {c === color && <CheckIcon className="h-3.5 w-3.5 text-white drop-shadow-md" />}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 function TypeBadge({ type }: { type: string }) {
   // Simplify type for display
   let displayType = type;
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 26a34722d..17fba0383 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -3,58 +3,22 @@ import { memo, useMemo } from "react";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { Paragraph } from "../primitives/Paragraph";
-import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
-
-// Color palette for chart series - 30 distinct colors for large datasets
-const CHART_COLORS = [
-  // Primary colors
-  "#7655fd", // Purple
-  "#22c55e", // Green
-  "#f59e0b", // Amber
-  "#ef4444", // Red
-  "#06b6d4", // Cyan
-  "#ec4899", // Pink
-  "#8b5cf6", // Violet
-  "#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 {
-  return CHART_COLORS[index % CHART_COLORS.length];
-}
+import { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
+import { getRunStatusHexColor } from "~/components/runs/v3/TaskRunStatus";
+import { getSeriesColor } from "./chartColors";
 
 interface QueryResultsChartProps {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   config: ChartConfiguration;
+  /** The effective time range from the query filter (used to show the full x-axis period) */
+  timeRange?: { from: string; to: string };
   fullLegend?: boolean;
   /** Callback when "View all" legend button is clicked */
   onViewAllLegendItems?: () => void;
   /** When true, constrains legend to max 50% height with scrolling */
   legendScrollable?: boolean;
+  isLoading?: boolean;
 }
 
 interface TransformedData {
@@ -153,12 +117,41 @@ function formatDateByGranularity(date: Date, granularity: TimeGranularity): stri
   }
 }
 
+/**
+ * Snap a millisecond value up to the nearest "nice" interval
+ */
+function snapToNiceInterval(ms: number): number {
+  const SECOND = 1000;
+  const MINUTE = 60 * SECOND;
+  const HOUR = 60 * MINUTE;
+  const DAY = 24 * HOUR;
+
+  if (ms <= SECOND) return SECOND;
+  if (ms <= 5 * SECOND) return 5 * SECOND;
+  if (ms <= 10 * SECOND) return 10 * SECOND;
+  if (ms <= 15 * SECOND) return 15 * SECOND;
+  if (ms <= 30 * SECOND) return 30 * SECOND;
+  if (ms <= MINUTE) return MINUTE;
+  if (ms <= 5 * MINUTE) return 5 * MINUTE;
+  if (ms <= 10 * MINUTE) return 10 * MINUTE;
+  if (ms <= 15 * MINUTE) return 15 * MINUTE;
+  if (ms <= 30 * MINUTE) return 30 * MINUTE;
+  if (ms <= HOUR) return HOUR;
+  if (ms <= 2 * HOUR) return 2 * HOUR;
+  if (ms <= 4 * HOUR) return 4 * HOUR;
+  if (ms <= 6 * HOUR) return 6 * HOUR;
+  if (ms <= 12 * HOUR) return 12 * HOUR;
+  if (ms <= DAY) return DAY;
+
+  return ms;
+}
+
 /**
  * Detect the most common interval between consecutive data points
  * This helps us understand the natural granularity of the data
  */
 function detectDataInterval(timestamps: number[]): number {
-  if (timestamps.length < 2) return 60 * 1000; // Default to 1 minute
+  if (timestamps.length < 2) return 24 * 60 * 60 * 1000; // Default to 1 day
 
   const sorted = [...timestamps].sort((a, b) => a - b);
   const gaps: number[] = [];
@@ -176,25 +169,7 @@ function detectDataInterval(timestamps: number[]): number {
   // We use the minimum gap as a heuristic for the data interval
   const minGap = Math.min(...gaps);
 
-  // Round to a nice interval
-  const MINUTE = 60 * 1000;
-  const HOUR = 60 * MINUTE;
-  const DAY = 24 * HOUR;
-
-  // Snap to common intervals
-  if (minGap <= MINUTE) return MINUTE;
-  if (minGap <= 5 * MINUTE) return 5 * MINUTE;
-  if (minGap <= 10 * MINUTE) return 10 * MINUTE;
-  if (minGap <= 15 * MINUTE) return 15 * MINUTE;
-  if (minGap <= 30 * MINUTE) return 30 * MINUTE;
-  if (minGap <= HOUR) return HOUR;
-  if (minGap <= 2 * HOUR) return 2 * HOUR;
-  if (minGap <= 4 * HOUR) return 4 * HOUR;
-  if (minGap <= 6 * HOUR) return 6 * HOUR;
-  if (minGap <= 12 * HOUR) return 12 * HOUR;
-  if (minGap <= DAY) return DAY;
-
-  return minGap;
+  return snapToNiceInterval(minGap);
 }
 
 /**
@@ -218,20 +193,7 @@ function fillTimeGaps(
   // If filling would create too many points, increase the interval to stay within limits
   let effectiveInterval = interval;
   if (estimatedPoints > maxPoints) {
-    effectiveInterval = Math.ceil(range / maxPoints);
-    // Round up to a nice interval
-    const MINUTE = 60 * 1000;
-    const HOUR = 60 * MINUTE;
-    if (effectiveInterval < 5 * MINUTE) effectiveInterval = 5 * MINUTE;
-    else if (effectiveInterval < 10 * MINUTE) effectiveInterval = 10 * MINUTE;
-    else if (effectiveInterval < 15 * MINUTE) effectiveInterval = 15 * MINUTE;
-    else if (effectiveInterval < 30 * MINUTE) effectiveInterval = 30 * MINUTE;
-    else if (effectiveInterval < HOUR) effectiveInterval = HOUR;
-    else if (effectiveInterval < 2 * HOUR) effectiveInterval = 2 * HOUR;
-    else if (effectiveInterval < 4 * HOUR) effectiveInterval = 4 * HOUR;
-    else if (effectiveInterval < 6 * HOUR) effectiveInterval = 6 * HOUR;
-    else if (effectiveInterval < 12 * HOUR) effectiveInterval = 12 * HOUR;
-    else effectiveInterval = 24 * HOUR;
+    effectiveInterval = snapToNiceInterval(Math.ceil(range / maxPoints));
   }
 
   // Create a map to collect values for each bucket (for aggregation)
@@ -390,22 +352,32 @@ function generateTimeTicks(minTime: number, maxTime: number, maxTicks = 8): numb
 }
 
 /**
- * Formats a date for tooltips (always shows full precision)
+ * Formats a date for tooltips and legend headers.
+ * Always includes time when the data point has a non-midnight time,
+ * so hovering a specific bar at e.g. 14:00 shows the full timestamp
+ * even when the axis labels only show the day.
+ * Seconds are shown whenever the granularity is "seconds" or the
+ * specific data point has non-zero seconds.
  */
 function formatDateForTooltip(date: Date, granularity: TimeGranularity): string {
-  // For shorter time ranges, include time
-  if (granularity === "seconds" || granularity === "minutes" || granularity === "hours") {
+  const hasTime = date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0;
+  const hasSeconds = date.getSeconds() !== 0;
+
+  if (
+    granularity === "seconds" ||
+    (hasTime && granularity !== "months" && granularity !== "years")
+  ) {
     return date.toLocaleString("en-US", {
       month: "short",
       day: "numeric",
       year: "numeric",
       hour: "2-digit",
       minute: "2-digit",
-      second: granularity === "seconds" ? "2-digit" : undefined,
+      second: granularity === "seconds" || hasSeconds ? "2-digit" : undefined,
       hour12: false,
     });
   }
-  // For longer ranges, just show date
+
   return date.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
@@ -463,7 +435,8 @@ function tryParseDate(value: unknown): Date | null {
  */
 function transformDataForChart(
   rows: Record<string, unknown>[],
-  config: ChartConfiguration
+  config: ChartConfiguration,
+  timeRange?: { from: string; to: string }
 ): TransformedData {
   const { xAxisColumn, yAxisColumns, groupByColumn, aggregation } = config;
 
@@ -489,24 +462,37 @@ function transformDataForChart(
   }
 
   // Determine if X-axis is date-based (most values should be parseable as dates)
-  const isDateBased = dateValues.length >= rows.length * 0.8; // At least 80% are dates
-  const granularity = isDateBased ? detectTimeGranularity(dateValues) : "days";
+  // When there are no results but a timeRange is provided, treat as date-based
+  const isDateBased =
+    rows.length === 0 && timeRange ? true : dateValues.length >= rows.length * 0.8; // At least 80% are dates
+
+  // Detect granularity from the full time range when available, otherwise from data
+  const granularity = isDateBased
+    ? timeRange
+      ? detectTimeGranularity([new Date(timeRange.from), new Date(timeRange.to)])
+      : detectTimeGranularity(dateValues)
+    : "days";
 
   // For date-based axes, use a special key for the timestamp
   const xDataKey = isDateBased ? "__timestamp" : xAxisColumn;
 
   // Calculate time domain and ticks for date-based axes
+  // When a timeRange is provided (from the query filter), use it so the chart
+  // shows the full requested period rather than just the range of returned data.
   let timeDomain: [number, number] | null = null;
   let timeTicks: number[] | null = null;
-  if (isDateBased && dateValues.length > 0) {
-    const timestamps = dateValues.map((d) => d.getTime());
-    const minTime = Math.min(...timestamps);
-    const maxTime = Math.max(...timestamps);
+  // Raw min/max used for gap filling (without padding)
+  let rawMinTime = 0;
+  let rawMaxTime = 0;
+  if (isDateBased && (dateValues.length > 0 || timeRange)) {
+    const dataTimestamps = dateValues.map((d) => d.getTime());
+    rawMinTime = timeRange ? new Date(timeRange.from).getTime() : Math.min(...dataTimestamps);
+    rawMaxTime = timeRange ? new Date(timeRange.to).getTime() : Math.max(...dataTimestamps);
     // Add a small padding (2% on each side) so points aren't at the very edge
-    const padding = (maxTime - minTime) * 0.02;
-    timeDomain = [minTime - padding, maxTime + padding];
+    const padding = (rawMaxTime - rawMinTime) * 0.02;
+    timeDomain = [rawMinTime - padding, rawMaxTime + padding];
     // Generate evenly-spaced ticks across the entire range using nice intervals
-    timeTicks = generateTimeTicks(minTime, maxTime);
+    timeTicks = generateTimeTicks(rawMinTime, rawMaxTime);
   }
 
   // Helper to format X value for categorical axes (non-date)
@@ -564,13 +550,27 @@ function transformDataForChart(
     if (isDateBased && timeDomain) {
       const timestamps = dateValues.map((d) => d.getTime());
       const dataInterval = detectDataInterval(timestamps);
+      // When filling across a full time range, ensure the interval is appropriate
+      // for the range size (target ~150 points) so we don't create overly dense charts
+      const rangeMs = rawMaxTime - rawMinTime;
+      const minRangeInterval = timeRange ? snapToNiceInterval(rangeMs / 150) : 0;
+      // Also cap the interval so we get enough data points to visually represent
+      // the full time range. Without this, limited data (e.g. 1 point) defaults
+      // to a 1-day interval which can be far too coarse for shorter ranges,
+      // producing too few bars/points and potentially buckets outside the domain.
+      const maxRangeInterval =
+        timeRange && rangeMs > 0 ? snapToNiceInterval(rangeMs / 8) : Infinity;
+      const effectiveInterval = Math.min(
+        Math.max(dataInterval, minRangeInterval),
+        maxRangeInterval
+      );
       data = fillTimeGaps(
         data,
         xDataKey,
         yAxisColumns,
-        timeDomain[0],
-        timeDomain[1],
-        dataInterval,
+        rawMinTime,
+        rawMaxTime,
+        effectiveInterval,
         granularity,
         aggregation
       );
@@ -633,13 +633,27 @@ function transformDataForChart(
   if (isDateBased && timeDomain) {
     const timestamps = dateValues.map((d) => d.getTime());
     const dataInterval = detectDataInterval(timestamps);
+    // When filling across a full time range, ensure the interval is appropriate
+    // for the range size (target ~150 points) so we don't create overly dense charts
+    const rangeMs = rawMaxTime - rawMinTime;
+    const minRangeInterval = timeRange ? snapToNiceInterval(rangeMs / 150) : 0;
+    // Also cap the interval so we get enough data points to visually represent
+    // the full time range. Without this, limited data (e.g. 1 point) defaults
+    // to a 1-day interval which can be far too coarse for shorter ranges,
+    // producing too few bars/points and potentially buckets outside the domain.
+    const maxRangeInterval =
+      timeRange && rangeMs > 0 ? snapToNiceInterval(rangeMs / 8) : Infinity;
+    const effectiveInterval = Math.min(
+      Math.max(dataInterval, minRangeInterval),
+      maxRangeInterval
+    );
     data = fillTimeGaps(
       data,
       xDataKey,
       series,
-      timeDomain[0],
-      timeDomain[1],
-      dataInterval,
+      rawMinTime,
+      rawMaxTime,
+      effectiveInterval,
       granularity,
       aggregation
     );
@@ -725,8 +739,10 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   rows,
   columns,
   config,
+  timeRange,
   fullLegend = false,
   onViewAllLegendItems,
+  isLoading = false,
   legendScrollable = false,
 }: QueryResultsChartProps) {
   const {
@@ -748,7 +764,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     xDataKey,
     timeDomain,
     timeTicks,
-  } = useMemo(() => transformDataForChart(rows, config), [rows, config]);
+  } = useMemo(() => transformDataForChart(rows, config, timeRange), [rows, config, timeRange]);
 
   // Apply sorting (for date-based, sort by timestamp to ensure correct order)
   const data = useMemo(() => {
@@ -759,13 +775,19 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     return sortData(unsortedData, sortByColumn, sortDirection, xDataKey);
   }, [unsortedData, sortByColumn, sortDirection, isDateBased, xDataKey]);
 
-  // Detect time granularity for the data
-  const timeGranularity = useMemo(
-    () => (dateValues.length > 0 ? detectTimeGranularity(dateValues) : null),
-    [dateValues]
-  );
+  // Detect time granularity — use the full time range when available so tick
+  // labels are appropriate for the period (e.g. "Jan 5" for a 7-day range
+  // instead of just "16:00:00" when data is sparse)
+  const timeGranularity = useMemo(() => {
+    if (timeRange) {
+      return detectTimeGranularity([new Date(timeRange.from), new Date(timeRange.to)]);
+    }
+    return dateValues.length > 0 ? detectTimeGranularity(dateValues) : null;
+  }, [dateValues, timeRange]);
 
-  // X-axis tick formatter for date-based axes
+  // X-axis tick formatter for date-based axes (pure – no deduplication).
+  // Label deduplication is handled inside dateAxisTick below so that the
+  // mutable "lastLabel" state is correctly reset on each Recharts render pass.
   const xAxisTickFormatter = useMemo(() => {
     if (!isDateBased || !timeGranularity) return undefined;
     return (value: number) => {
@@ -777,17 +799,25 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   // Create dynamic Y-axis formatter based on data range
   const yAxisFormatter = useMemo(() => createYAxisFormatter(data, series), [data, series]);
 
+  // Check if the group-by column has a runStatus customRenderType
+  const groupByIsRunStatus = useMemo(() => {
+    if (!groupByColumn) return false;
+    const col = columns.find((c) => c.name === groupByColumn);
+    return col?.customRenderType === "runStatus";
+  }, [groupByColumn, columns]);
+
   // Build chart config for colors/labels
   const chartConfig = useMemo(() => {
     const cfg: ChartConfig = {};
     series.forEach((s, i) => {
+      const statusColor = groupByIsRunStatus ? getRunStatusHexColor(s) : undefined;
       cfg[s] = {
         label: s,
-        color: getSeriesColor(i),
+        color: statusColor ?? config.seriesColors?.[s] ?? getSeriesColor(i),
       };
     });
     return cfg;
-  }, [series]);
+  }, [series, groupByIsRunStatus, config.seriesColors]);
 
   // Custom tooltip label formatter for better date display
   const tooltipLabelFormatter = useMemo(() => {
@@ -831,7 +861,91 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     return [min, "auto"] as [number, string];
   }, [data, series]);
 
-  // Validation
+  // Angle all date-based labels for consistent appearance and to avoid overlap
+  const xAxisAngle = isDateBased ? -45 : 0;
+  const xAxisHeight = xAxisAngle !== 0 ? 65 : undefined;
+
+  // Check if the data would produce duplicate labels at the current granularity.
+  // Only use the custom tick renderer (with interval:0) when duplicates exist,
+  // otherwise let Recharts handle label spacing to avoid collisions.
+  const hasDuplicateLabels = useMemo(() => {
+    if (!isDateBased || !timeGranularity || data.length === 0) return false;
+    const labels = new Set<string>();
+    for (const point of data) {
+      const ts = point.__timestamp ?? point[xDataKey];
+      if (typeof ts === "number") {
+        labels.add(formatDateByGranularity(new Date(ts), timeGranularity));
+      }
+    }
+    return labels.size < data.length;
+  }, [isDateBased, timeGranularity, data, xDataKey]);
+
+  // Custom tick renderer for date-based axes: renders a tick mark alongside
+  // each label, and for unlabelled points (de-duplicated) just a subtle tick mark.
+  // De-duplication lives here (not in xAxisTickFormatter) so that the mutable
+  // lastLabel is reset when Recharts starts a new render pass (index === 0).
+  const dateAxisTick = useMemo(() => {
+    if (!isDateBased || !xAxisTickFormatter) return undefined;
+    let lastLabel = "";
+    return (props: Record<string, unknown>) => {
+      const { x, y, payload, index } = props as {
+        x: number;
+        y: number;
+        payload: { value: number };
+        index: number;
+      };
+
+      // Reset dedup state at the start of each Recharts render pass
+      if (index === 0) lastLabel = "";
+
+      const formatted = xAxisTickFormatter(payload.value);
+      const label = formatted === lastLabel ? "" : formatted;
+      lastLabel = formatted;
+      // y is the tick text position, offset from the axis by tickMargin + internal padding
+      const axisY = (y as number) - 12;
+      if (label) {
+        return (
+          <g>
+            <line
+              x1={x as number}
+              y1={axisY}
+              x2={x as number}
+              y2={axisY - 3}
+              stroke="#878C99"
+              strokeWidth={1}
+            />
+            <text
+              x={x}
+              y={axisY}
+              dy={10}
+              fill="#878C99"
+              fontSize={11}
+              textAnchor={xAxisAngle !== 0 ? "end" : "middle"}
+              style={{ fontVariantNumeric: "tabular-nums" }}
+              transform={
+                xAxisAngle !== 0 ? `rotate(${xAxisAngle}, ${x}, ${axisY + 10})` : undefined
+              }
+            >
+              {label}
+            </text>
+          </g>
+        );
+      }
+      // Small tick mark sitting on the axis baseline, pointing upward
+      return (
+        <line
+          x1={x as number}
+          y1={axisY}
+          x2={x as number}
+          y2={axisY - 3}
+          stroke="#272A2E"
+          strokeWidth={1}
+        />
+      );
+    };
+  }, [isDateBased, xAxisTickFormatter, xAxisAngle]);
+
+  // Validation — all hooks must be above this point
   if (!xAxisColumn) {
     return <EmptyState message="Select an X-axis column to display the chart" />;
   }
@@ -848,13 +962,18 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     return <EmptyState message="Unable to transform data for chart" />;
   }
 
-  // Determine appropriate angle for X-axis labels based on granularity
-  const xAxisAngle = timeGranularity === "hours" || timeGranularity === "seconds" ? -45 : 0;
-  const xAxisHeight = xAxisAngle !== 0 ? 60 : undefined;
-
   // Base x-axis props shared by all chart types
   const baseXAxisProps = {
-    tickFormatter: xAxisTickFormatter,
+    ...(dateAxisTick
+      ? {
+          tick: dateAxisTick,
+          tickLine: false,
+          tickFormatter: undefined,
+          // Only force every tick to render when there are duplicates to de-duplicate;
+          // otherwise let Recharts auto-space to avoid label collisions
+          ...(hasDuplicateLabels ? { interval: 0 } : {}),
+        }
+      : { tickFormatter: xAxisTickFormatter }),
     angle: xAxisAngle,
     textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
     height: xAxisHeight,
@@ -864,13 +983,13 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   // This properly represents time gaps between data points
   const xAxisPropsForLine = isDateBased
     ? {
-      type: "number" as const,
-      domain: timeDomain ?? (["auto", "auto"] as [string, string]),
-      scale: "time" as const,
-      // Explicitly specify tick positions so labels appear across the entire range
-      ticks: timeTicks ?? undefined,
-      ...baseXAxisProps,
-    }
+        type: "number" as const,
+        domain: timeDomain ?? (["auto", "auto"] as [string, string]),
+        scale: "time" as const,
+        // Explicitly specify tick positions so labels appear across the entire range
+        ticks: timeTicks ?? undefined,
+        ...baseXAxisProps,
+      }
     : baseXAxisProps;
 
   // Bar charts always use categorical axis positioning
@@ -899,6 +1018,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         fillContainer
         onViewAllLegendItems={onViewAllLegendItems}
         legendScrollable={legendScrollable}
+        state={isLoading ? "loading" : "loaded"}
       >
         <Chart.Bar
           xAxisProps={xAxisPropsForBar}
@@ -924,6 +1044,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       fillContainer
       onViewAllLegendItems={onViewAllLegendItems}
       legendScrollable={legendScrollable}
+      state={isLoading ? "loading" : "loaded"}
     >
       <Chart.Line
         xAxisProps={xAxisPropsForLine}
diff --git a/apps/webapp/app/components/code/TSQLEditor.tsx b/apps/webapp/app/components/code/TSQLEditor.tsx
index 1641d9c3d..1fa56a2ce 100644
--- a/apps/webapp/app/components/code/TSQLEditor.tsx
+++ b/apps/webapp/app/components/code/TSQLEditor.tsx
@@ -284,7 +284,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
         }}
       />
       {showButtons && (
-        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-900/80 p-0.5">
+        <div className="absolute right-0 top-0 z-10 flex items-center justify-end bg-charcoal-900/80 p-1.5">
           {additionalActions && additionalActions}
           {showFormatButton && (
             <Button
@@ -338,11 +338,50 @@ export function TSQLEditor(opts: TSQLEditorProps) {
   );
 }
 
+// SQL keywords that legitimately appear before parentheses with a space
+const SQL_KEYWORDS_BEFORE_PAREN = new Set([
+  "IN",
+  "NOT",
+  "EXISTS",
+  "OVER",
+  "USING",
+  "VALUES",
+  "BETWEEN",
+  "LIKE",
+  "AND",
+  "OR",
+  "ON",
+  "SET",
+  "INTO",
+  "TABLE",
+  "CASE",
+  "WHEN",
+  "THEN",
+  "ELSE",
+  "AS",
+  "FROM",
+  "WHERE",
+  "HAVING",
+  "JOIN",
+  "SELECT",
+]);
+
 export function autoFormatSQL(sql: string) {
-  return formatSQL(sql, {
+  let formatted = formatSQL(sql, {
     language: "sql",
     keywordCase: "upper",
     indentStyle: "standard",
     linesBetweenQueries: 2,
   });
+
+  // sql-formatter adds a space before ( for unknown/custom functions (e.g. timeBucket ())
+  // Remove that space for anything that isn't a SQL keyword
+  formatted = formatted.replace(/(\b\w+)\s+\(/g, (match, name) => {
+    if (SQL_KEYWORDS_BEFORE_PAREN.has(name.toUpperCase())) {
+      return match;
+    }
+    return `${name}(`;
+  });
+
+  return formatted;
 }
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 9b5d9215c..951e84823 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -1,19 +1,21 @@
+import { ChevronDownIcon, ChevronUpDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { IconFilter2, IconFilter2X } from "@tabler/icons-react";
 import { rankItem } from "@tanstack/match-sorter-utils";
 import {
-  useReactTable,
+  flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
-  flexRender,
-  type ColumnDef,
+  useReactTable,
   type CellContext,
-  type ColumnResizeMode,
-  type ColumnFiltersState,
-  type FilterFn,
   type Column,
-  type SortingState,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type ColumnResizeMode,
+  type FilterFn,
   type SortDirection,
+  type SortingState,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
@@ -39,12 +41,6 @@ import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "../primitives/Tooltip";
 import { QueueName } from "../runs/v3/QueueName";
-import {
-  FunnelIcon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  ChevronUpDownIcon,
-} from "@heroicons/react/20/solid";
 
 const MAX_STRING_DISPLAY_LENGTH = 64;
 const ROW_HEIGHT = 33; // Estimated row height in pixels
@@ -54,7 +50,7 @@ const MIN_COLUMN_WIDTH = 60;
 const MAX_COLUMN_WIDTH = 400;
 const CHAR_WIDTH_PX = 7.5; // Approximate width of a monospace character at text-xs (12px)
 const CELL_PADDING_PX = 40; // px-2 (8px) on each side + buffer for copy button
-const HEADER_ICONS_WIDTH_PX = 72; // Sort icon (16px) + filter icon (12px) + info icon (16px) + gaps (12px) + header padding (16px)
+const HEADER_ICONS_WIDTH_PX = 80; // Sort icon (16px) + filter icon (12px) + info icon (16px) + gaps (12px) + header padding (24px)
 const SAMPLE_SIZE = 100; // Number of rows to sample for width calculation
 
 // Type for row data
@@ -160,10 +156,10 @@ const fuzzyFilter: FilterFn<RowData> = (row, columnId, value, addMeta) => {
     cellValue === null
       ? "NULL"
       : cellValue === undefined
-        ? ""
-        : typeof cellValue === "object"
-          ? JSON.stringify(cellValue)
-          : String(cellValue);
+      ? ""
+      : typeof cellValue === "object"
+      ? JSON.stringify(cellValue)
+      : String(cellValue);
 
   // Build searchable strings - formatted value (if we have column metadata)
   const formattedValue = meta?.outputColumn
@@ -462,6 +458,7 @@ function CellValue({
             </pre>
           }
           button={<pre className="font-mono text-xs">{truncateString(plainValue)}</pre>}
+          disableHoverableContent
         />
       );
     }
@@ -482,7 +479,14 @@ function CellValue({
     switch (column.customRenderType) {
       case "runId": {
         if (typeof value === "string") {
-          return <TextLink to={v3RunPathFromFriendlyId(value)}>{value}</TextLink>;
+          return (
+            <SimpleTooltip
+              content="Jump to run"
+              disableHoverableContent
+              hidden={!hovered}
+              button={<TextLink to={v3RunPathFromFriendlyId(value)}>{value}</TextLink>}
+            />
+          );
         }
         break;
       }
@@ -490,19 +494,17 @@ function CellValue({
         const status = isTaskRunStatus(value)
           ? value
           : isRunFriendlyStatus(value)
-            ? runStatusFromFriendlyTitle(value)
-            : undefined;
+          ? runStatusFromFriendlyTitle(value)
+          : undefined;
         if (status) {
-          if (hovered) {
-            return (
-              <SimpleTooltip
-                content={descriptionForTaskRunStatus(status)}
-                disableHoverableContent
-                button={<TaskRunStatusCombo status={status} />}
-              />
-            );
-          }
-          return <TaskRunStatusCombo status={status} />;
+          return (
+            <SimpleTooltip
+              content={descriptionForTaskRunStatus(status)}
+              disableHoverableContent
+              hidden={!hovered}
+              button={<TaskRunStatusCombo status={status} />}
+            />
+          );
         }
         break;
       }
@@ -607,6 +609,7 @@ function CellValue({
               {truncateString(arrayString)}
             </span>
           }
+          disableHoverableContent
         />
       );
     }
@@ -642,6 +645,7 @@ function CellValue({
           </pre>
         }
         button={<span>{truncateString(stringValue)}</span>}
+        disableHoverableContent
       />
     );
   }
@@ -688,6 +692,7 @@ function JSONCellValue({ value }: { value: unknown }) {
         button={
           <span className="font-mono text-xs text-text-dimmed">{truncateString(jsonString)}</span>
         }
+        disableHoverableContent
       />
     );
   }
@@ -714,14 +719,14 @@ function CopyableCell({
     <div
       className={cn(
         "relative flex w-full items-center overflow-hidden px-2 py-1.5",
-        "bg-background-dimmed group-hover/row:bg-charcoal-800",
+        "bg-background-bright group-hover/row:bg-charcoal-750",
         "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
         alignment === "right" && "justify-end"
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <span className="truncate">{children}</span>
+      <span className="flex h-4 items-center truncate">{children}</span>
       {isHovered && (
         <span
           onClick={(e) => {
@@ -781,18 +786,21 @@ function HeaderCellContent({
   onSortClick?: (event: React.MouseEvent) => void;
   canSort?: boolean;
 }) {
-  const [isHovered, setIsHovered] = useState(false);
+  const [isCellHovered, setIsCellHovered] = useState(false);
+  const [isFilterHovered, setIsFilterHovered] = useState(false);
+
+  const sortHighlighted = isCellHovered && !isFilterHovered;
 
   return (
     <div
       className={cn(
-        "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed py-1.5 pl-2 pr-1",
+        "flex w-full items-center gap-1 overflow-hidden bg-background-bright py-2 pl-2 pr-3",
         "font-mono text-xs font-medium text-text-bright",
         alignment === "right" && "justify-end",
         canSort && "cursor-pointer select-none"
       )}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={() => setIsCellHovered(true)}
+      onMouseLeave={() => setIsCellHovered(false)}
       onClick={onSortClick}
     >
       {tooltip ? (
@@ -802,11 +810,14 @@ function HeaderCellContent({
           })}
         >
           <span className="truncate text-left">{children}</span>
-          <InfoIconTooltip
-            content={tooltip}
-            contentClassName="normal-case tracking-normal"
-            enabled={isHovered}
-          />
+          <span className="flex flex-shrink-0">
+            <InfoIconTooltip
+              content={tooltip}
+              contentClassName="normal-case tracking-normal"
+              enabled={isCellHovered}
+              disableHoverableContent
+            />
+          </span>
         </div>
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
@@ -814,7 +825,10 @@ function HeaderCellContent({
       {/* Sort indicator */}
       {canSort && (
         <span
-          className={cn("flex-shrink-0", sortDirection ? "text-text-bright" : "text-text-dimmed")}
+          className={cn(
+            "flex-shrink-0 transition-colors",
+            sortHighlighted ? "text-text-bright" : "text-text-dimmed"
+          )}
         >
           {sortDirection === "asc" ? (
             <ChevronUpIcon className="size-4" />
@@ -831,10 +845,12 @@ function HeaderCellContent({
             e.stopPropagation();
             onFilterClick();
           }}
-          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
+          onMouseEnter={() => setIsFilterHovered(true)}
+          onMouseLeave={() => setIsFilterHovered(false)}
+          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:text-text-bright"
           title="Toggle column filters"
         >
-          <FunnelIcon className="size-3" />
+          {showFilters ? <IconFilter2X className="size-4" /> : <IconFilter2 className="size-4" />}
         </button>
       )}
     </div>
@@ -866,7 +882,7 @@ function FilterCell({
   }, [shouldFocus, onFocused]);
 
   return (
-    <div className="flex items-center bg-background-dimmed px-1.5 pb-1" style={{ width }}>
+    <div className="flex items-center bg-background-bright px-1.5 pb-2" style={{ width }}>
       <DebouncedInput
         ref={inputRef}
         value={columnFilterValue ?? ""}
@@ -886,10 +902,12 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   rows,
   columns,
   prettyFormatting = true,
+  sorting: defaultSorting = [],
 }: {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   prettyFormatting?: boolean;
+  sorting?: SortingState;
 }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
@@ -899,7 +917,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   // Track which column's filter should be focused
   const [focusFilterColumn, setFocusFilterColumn] = useState<string | null>(null);
   // State for column sorting
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>(defaultSorting);
 
   // Create TanStack Table column definitions from OutputColumnMetadata
   // Calculate column widths based on content
@@ -966,7 +984,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
       >
         <table style={{ display: "grid" }}>
           <thead
-            className="bg-background-dimmed"
+            className="border-t border-grid-bright bg-background-bright"
             style={{
               display: "grid",
               position: "sticky",
@@ -1038,7 +1056,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
               </tr>
             )}
           </thead>
-          <tbody style={{ display: "grid" }}>
+          <tbody className="border-b border-grid-bright" style={{ display: "grid" }}>
             <tr style={{ display: "flex" }}>
               <td>
                 <Paragraph variant="extra-small" className="p-4 text-text-dimmed">
@@ -1060,7 +1078,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
     >
       <table style={{ display: "grid" }}>
         <thead
-          className="bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright"
+          className="border-t border-grid-bright bg-background-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright"
           style={{
             display: "grid",
             position: "sticky",
@@ -1107,7 +1125,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       onMouseDown={header.getResizeHandler()}
                       onTouchStart={header.getResizeHandler()}
                       className={cn(
-                        "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
+                        "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
                         "opacity-0 group-hover/header:opacity-100",
                         "bg-charcoal-600 hover:bg-indigo-500",
                         header.column.getIsResizing() && "bg-indigo-500 opacity-100"
@@ -1139,7 +1157,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
             height: `${rowVirtualizer.getTotalSize()}px`,
             position: "relative",
           }}
-          className="bg-background-dimmed divide-y divide-charcoal-700"
+          className="divide-y divide-charcoal-700 bg-background-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:z-[1] after:h-px after:bg-grid-bright"
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => {
             const row = tableRows[virtualRow.index];
@@ -1147,7 +1165,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
               <tr
                 key={row.id}
                 data-index={virtualRow.index}
-                className="group/row hover:bg-charcoal-800"
+                className="group/row hover:bg-charcoal-750"
                 style={{
                   display: "flex",
                   position: "absolute",
diff --git a/apps/webapp/app/components/code/chartColors.ts b/apps/webapp/app/components/code/chartColors.ts
new file mode 100644
index 000000000..26bcc487a
--- /dev/null
+++ b/apps/webapp/app/components/code/chartColors.ts
@@ -0,0 +1,183 @@
+/**
+ * Chart color palette defined in HSL (Hue, Saturation, Lightness).
+ *
+ * HSL is a human-friendly color model:
+ *   h: 0–360  (hue — position on the color wheel: 0=red, 120=green, 240=blue)
+ *   s: 0–100  (saturation — 0 is gray, 100 is full color)
+ *   l: 0–100  (lightness — 0 is black, 50 is pure color, 100 is white)
+ */
+
+interface HSLColor {
+  h: number;
+  s: number;
+  l: number;
+}
+
+interface ChartColorDef {
+  name: string;
+  hsl: HSLColor;
+}
+
+// ---------------------------------------------------------------------------
+// Palette — 30 distinct colors for chart series, defined in HSL
+// ---------------------------------------------------------------------------
+const CHART_COLOR_DEFS: ChartColorDef[] = [
+  // Primary colors (high contrast, spread across hue wheel)
+  { name: "Purple", hsl: { h: 252, s: 98, l: 66 } },
+  { name: "Green", hsl: { h: 142, s: 71, l: 45 } },
+  { name: "Amber", hsl: { h: 38, s: 92, l: 50 } },
+  { name: "Red", hsl: { h: 0, s: 84, l: 60 } },
+  { name: "Cyan", hsl: { h: 189, s: 95, l: 43 } },
+  { name: "Pink", hsl: { h: 330, s: 81, l: 60 } },
+  { name: "Violet", hsl: { h: 258, s: 90, l: 66 } },
+  { name: "Teal", hsl: { h: 173, s: 80, l: 40 } },
+  { name: "Orange", hsl: { h: 25, s: 95, l: 53 } },
+  { name: "Indigo", hsl: { h: 239, s: 84, l: 67 } },
+  // Extended palette
+  { name: "Lime", hsl: { h: 84, s: 81, l: 44 } },
+  { name: "Sky", hsl: { h: 199, s: 89, l: 48 } },
+  { name: "Rose", hsl: { h: 350, s: 89, l: 60 } },
+  { name: "Fuchsia", hsl: { h: 271, s: 91, l: 65 } },
+  { name: "Yellow", hsl: { h: 45, s: 93, l: 47 } },
+  { name: "Emerald", hsl: { h: 160, s: 84, l: 39 } },
+  { name: "Blue", hsl: { h: 217, s: 91, l: 60 } },
+  { name: "Magenta", hsl: { h: 292, s: 84, l: 61 } },
+  { name: "Stone", hsl: { h: 25, s: 5, l: 45 } },
+  { name: "Gold", hsl: { h: 48, s: 96, l: 53 } },
+  // Additional distinct colors (lighter variants)
+  { name: "Turquoise", hsl: { h: 173, s: 66, l: 50 } },
+  { name: "Light Orange", hsl: { h: 27, s: 96, l: 61 } },
+  { name: "Yellow-Green", hsl: { h: 83, s: 78, l: 55 } },
+  { name: "Light Blue", hsl: { h: 198, s: 93, l: 60 } },
+  { name: "Light Purple", hsl: { h: 270, s: 95, l: 75 } },
+  { name: "Light Green", hsl: { h: 142, s: 69, l: 58 } },
+  { name: "Light Amber", hsl: { h: 43, s: 96, l: 56 } },
+  { name: "Light Pink", hsl: { h: 329, s: 86, l: 70 } },
+  { name: "Light Cyan", hsl: { h: 187, s: 92, l: 69 } },
+  { name: "Light Indigo", hsl: { h: 235, s: 89, l: 74 } },
+];
+
+// ---------------------------------------------------------------------------
+// HSL ↔ Hex conversion
+// ---------------------------------------------------------------------------
+
+/** Convert an HSL color (h: 0–360, s: 0–100, l: 0–100) to a hex string */
+function hslToHex({ h, s, l }: HSLColor): string {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const hPrime = h / 60;
+  const x = c * (1 - Math.abs((hPrime % 2) - 1));
+  const m = lNorm - c / 2;
+
+  let r1: number, g1: number, b1: number;
+
+  if (hPrime < 1) {
+    r1 = c;
+    g1 = x;
+    b1 = 0;
+  } else if (hPrime < 2) {
+    r1 = x;
+    g1 = c;
+    b1 = 0;
+  } else if (hPrime < 3) {
+    r1 = 0;
+    g1 = c;
+    b1 = x;
+  } else if (hPrime < 4) {
+    r1 = 0;
+    g1 = x;
+    b1 = c;
+  } else if (hPrime < 5) {
+    r1 = x;
+    g1 = 0;
+    b1 = c;
+  } else {
+    r1 = c;
+    g1 = 0;
+    b1 = x;
+  }
+
+  const toHex = (v: number) =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${toHex(r1)}${toHex(g1)}${toHex(b1)}`;
+}
+
+/** Convert a hex string to HSL (h: 0–360, s: 0–100, l: 0–100) */
+function hexToHsl(hex: string): HSLColor {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const l = (max + min) / 2;
+
+  if (delta === 0) {
+    return { h: 0, s: 0, l: Math.round(l * 100) };
+  }
+
+  const s = delta / (1 - Math.abs(2 * l - 1));
+
+  let h: number;
+  if (max === r) {
+    h = 60 * (((g - b) / delta + 6) % 6);
+  } else if (max === g) {
+    h = 60 * ((b - r) / delta + 2);
+  } else {
+    h = 60 * ((r - g) / delta + 4);
+  }
+
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Derived hex palette (for consumers that need plain hex strings)
+// ---------------------------------------------------------------------------
+
+/** Color palette for chart series — 30 distinct hex colors derived from HSL definitions */
+const CHART_COLORS: string[] = CHART_COLOR_DEFS.map((def) => hslToHex(def.hsl));
+
+/** Get the hex color for a series by its index (wraps around) */
+export function getSeriesColor(index: number): string {
+  return CHART_COLORS[index % CHART_COLORS.length];
+}
+
+// ---------------------------------------------------------------------------
+// Hue-sorted palette (rainbow order for color pickers)
+// ---------------------------------------------------------------------------
+
+const SATURATION_THRESHOLD = 10;
+
+/**
+ * Chart colors sorted by perceived hue — the natural rainbow order
+ * that humans expect: red -> orange -> yellow -> green -> cyan -> blue -> purple -> pink.
+ *
+ * Very desaturated colors (like grays) are placed at the end since they don't
+ * have a strong hue.
+ */
+export const CHART_COLORS_BY_HUE: string[] = [...CHART_COLOR_DEFS]
+  .sort((a, b) => {
+    const aIsGray = a.hsl.s < SATURATION_THRESHOLD;
+    const bIsGray = b.hsl.s < SATURATION_THRESHOLD;
+
+    // Push desaturated colors to the end
+    if (aIsGray && !bIsGray) return 1;
+    if (!aIsGray && bIsGray) return -1;
+    if (aIsGray && bIsGray) return a.hsl.l - b.hsl.l;
+
+    // Sort by hue, then by saturation (more vivid first), then by lightness
+    if (a.hsl.h !== b.hsl.h) return a.hsl.h - b.hsl.h;
+    if (a.hsl.s !== b.hsl.s) return b.hsl.s - a.hsl.s;
+    return a.hsl.l - b.hsl.l;
+  })
+  .map((def) => hslToHex(def.hsl));
diff --git a/apps/webapp/app/components/code/tsql/tsqlCompletion.ts b/apps/webapp/app/components/code/tsql/tsqlCompletion.ts
index 047496dde..b53c551a4 100644
--- a/apps/webapp/app/components/code/tsql/tsqlCompletion.ts
+++ b/apps/webapp/app/components/code/tsql/tsqlCompletion.ts
@@ -123,6 +123,16 @@ function createFunctionCompletions(): Completion[] {
     });
   }
 
+  // Add special TSQL functions not in the ClickHouse function registry
+  functions.push({
+    label: "timeBucket",
+    type: "function",
+    detail: "auto time bucket (0 args)",
+    apply: "timeBucket()",
+    boost: 1.5,
+    info: "Automatically bucket by time using the table's time column. Interval is chosen based on the query's time range.",
+  });
+
   return functions;
 }
 
diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx
index 0793c52ca..e0b58ed71 100644
--- a/apps/webapp/app/components/layout/AppLayout.tsx
+++ b/apps/webapp/app/components/layout/AppLayout.tsx
@@ -21,7 +21,7 @@ export function MainBody({ children }: { children: React.ReactNode }) {
 
 /** This container should be placed around the content on a page */
 export function PageContainer({ children }: { children: React.ReactNode }) {
-  return <div className="grid grid-rows-[auto_1fr] overflow-hidden">{children}</div>;
+  return <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">{children}</div>;
 }
 
 export function PageBody({
diff --git a/apps/webapp/app/components/logs/LogsTaskFilter.tsx b/apps/webapp/app/components/logs/LogsTaskFilter.tsx
index 3f95e0741..fa64eff7b 100644
--- a/apps/webapp/app/components/logs/LogsTaskFilter.tsx
+++ b/apps/webapp/app/components/logs/LogsTaskFilter.tsx
@@ -43,7 +43,7 @@ export function LogsTaskFilter({ possibleTasks }: LogsTaskFilterProps) {
                 shortcut={shortcut}
                 tooltipTitle="Filter by task"
               >
-                Tasks
+                <span className="ml-0.5">Tasks</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -114,7 +114,7 @@ function TasksDropdown({
     <SelectProvider value={values("tasks")} setValue={handleChange} virtualFocus={true}>
       {trigger}
       <SelectPopover
-        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
         hideOnEscape={() => {
           if (onClose) {
             onClose();
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
new file mode 100644
index 000000000..7e49259f8
--- /dev/null
+++ b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -0,0 +1,496 @@
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { ClipboardIcon } from "@heroicons/react/24/outline";
+import { ChartBarIcon } from "@heroicons/react/24/solid";
+import { type OutputColumnMetadata } from "@internal/tsql";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { IconBraces, IconChartHistogram, IconFileTypeCsv } from "@tabler/icons-react";
+import { assertNever } from "assert-never";
+import { Maximize2 } from "lucide-react";
+import { useCallback, useState, type ReactNode } from "react";
+import { z } from "zod";
+import { Card } from "~/components/primitives/charts/Card";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { cn } from "~/utils/cn";
+import { rowsToCSV, rowsToJSON } from "~/utils/dataExport";
+import { QueryResultsChart } from "../code/QueryResultsChart";
+import { TSQLResultsTable } from "../code/TSQLResultsTable";
+import { Button } from "../primitives/Buttons";
+import { Callout } from "../primitives/Callout";
+import { BigNumberCard } from "../primitives/charts/BigNumberCard";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+import { LoadingBarDivider } from "../primitives/LoadingBarDivider";
+import {
+  Popover,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverVerticalEllipseTrigger,
+} from "../primitives/Popover";
+
+const ChartType = z.union([z.literal("bar"), z.literal("line")]);
+export type ChartType = z.infer<typeof ChartType>;
+
+const SortDirection = z.union([z.literal("asc"), z.literal("desc")]);
+export type SortDirection = z.infer<typeof SortDirection>;
+
+const AggregationType = z.union([
+  z.literal("sum"),
+  z.literal("avg"),
+  z.literal("count"),
+  z.literal("min"),
+  z.literal("max"),
+]);
+export type AggregationType = z.infer<typeof AggregationType>;
+
+const chartConfigOptions = {
+  chartType: ChartType,
+  xAxisColumn: z.string().nullable(),
+  yAxisColumns: z.string().array(),
+  groupByColumn: z.string().nullable(),
+  stacked: z.boolean(),
+  sortByColumn: z.string().nullable(),
+  sortDirection: SortDirection,
+  aggregation: AggregationType,
+  seriesColors: z.record(z.string()).optional(),
+};
+
+const ChartConfiguration = z.object({ ...chartConfigOptions });
+export type ChartConfiguration = z.infer<typeof ChartConfiguration>;
+
+const BigNumberAggregationType = z.union([
+  z.literal("sum"),
+  z.literal("avg"),
+  z.literal("count"),
+  z.literal("min"),
+  z.literal("max"),
+  z.literal("first"),
+  z.literal("last"),
+]);
+export type BigNumberAggregationType = z.infer<typeof BigNumberAggregationType>;
+
+const BigNumberSortDirection = z.union([z.literal("asc"), z.literal("desc")]);
+
+const bigNumberConfigOptions = {
+  column: z.string(),
+  aggregation: BigNumberAggregationType,
+  sortDirection: BigNumberSortDirection.optional(),
+  abbreviate: z.boolean().default(false),
+  prefix: z.string().optional(),
+  suffix: z.string().optional(),
+};
+
+const BigNumberConfiguration = z.object({ ...bigNumberConfigOptions });
+export type BigNumberConfiguration = z.infer<typeof BigNumberConfiguration>;
+
+export const QueryWidgetConfig = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("table"),
+    prettyFormatting: z.boolean().default(true),
+    sorting: z
+      .array(
+        z.object({
+          desc: z.boolean(),
+          id: z.string(),
+        })
+      )
+      .default([]),
+  }),
+  z.object({
+    type: z.literal("chart"),
+    ...chartConfigOptions,
+  }),
+  z.object({
+    type: z.literal("bignumber"),
+    ...bigNumberConfigOptions,
+  }),
+  z.object({
+    type: z.literal("title"),
+  }),
+]);
+
+export type QueryWidgetConfig = z.infer<typeof QueryWidgetConfig>;
+
+/** Result data containing rows and column metadata */
+export type QueryWidgetData = {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+};
+
+/** Widget configuration with optional result data (used for edit callbacks) */
+export type WidgetData = {
+  title: string;
+  query: string;
+  display: QueryWidgetConfig;
+  /** The current result data from the widget */
+  resultData?: QueryWidgetData;
+};
+
+export type QueryWidgetProps = {
+  title: ReactNode;
+  /** String title for rename dialog (optional - if not provided, rename won't be available) */
+  titleString?: string;
+  /** The TSQL query string (used for "Copy query" in the menu) */
+  query?: string;
+  isLoading?: boolean;
+  error?: string;
+  data: QueryWidgetData;
+  config: QueryWidgetConfig;
+  /** The effective time range for the query (used to show full x-axis on time-based charts) */
+  timeRange?: { from: string; to: string };
+  accessory?: ReactNode;
+  isResizing?: boolean;
+  isDraggable?: boolean;
+  /** Callback when edit is clicked. Receives the current data. */
+  onEdit?: (data: QueryWidgetData) => void;
+  /** Callback when rename is clicked. Receives the new title. */
+  onRename?: (newTitle: string) => void;
+  /** Callback when delete is clicked. */
+  onDelete?: () => void;
+  /** Callback when duplicate is clicked. Receives the current data. */
+  onDuplicate?: (data: QueryWidgetData) => void;
+};
+
+export function QueryWidget({
+  title,
+  titleString,
+  query,
+  accessory,
+  isLoading,
+  error,
+  isResizing,
+  isDraggable,
+  onEdit,
+  onRename,
+  onDelete,
+  onDuplicate,
+  ...props
+}: QueryWidgetProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(titleString ?? "");
+
+  const hasEditActions = onEdit || onRename || onDelete || onDuplicate;
+  const hasData = props.data.rows.length > 0;
+
+  const copyToClipboard = useCallback((text: string) => {
+    navigator.clipboard.writeText(text);
+  }, []);
+
+  const copyQuery = useCallback(() => {
+    if (query) {
+      copyToClipboard(query);
+    }
+  }, [query, copyToClipboard]);
+
+  const copyJSON = useCallback(() => {
+    copyToClipboard(rowsToJSON(props.data.rows));
+  }, [props.data.rows, copyToClipboard]);
+
+  const copyCSV = useCallback(() => {
+    copyToClipboard(rowsToCSV(props.data.rows, props.data.columns));
+  }, [props.data, copyToClipboard]);
+
+  return (
+    <div className="group h-full">
+      <Card className="h-full overflow-hidden px-0 pb-0">
+        <Card.Header draggable={isDraggable}>
+          <div className="flex items-center gap-1.5">{title}</div>
+          <Card.Accessory>
+            <SimpleTooltip
+              button={
+                <span className="opacity-0 transition-opacity group-hover:opacity-100">
+                  <Button
+                    variant="minimal/small"
+                    LeadingIcon={Maximize2}
+                    leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
+                    onClick={() => setIsFullscreen(true)}
+                    className="!px-1"
+                  />
+                </span>
+              }
+              content="Maximize"
+              asChild
+            />
+            {accessory}
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <PopoverVerticalEllipseTrigger
+                isOpen={isMenuOpen}
+                className={cn(
+                  "transition-opacity",
+                  isMenuOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+                )}
+              />
+              <PopoverContent align="end" className="p-0">
+                <div className="flex flex-col gap-1 p-1">
+                  {hasEditActions && (
+                    <>
+                      {onEdit && (
+                        <PopoverMenuItem
+                          icon={IconChartHistogram}
+                          title="Edit chart"
+                          onClick={() => {
+                            onEdit(props.data);
+                            setIsMenuOpen(false);
+                          }}
+                          leadingIconClassName="-ml-0.5 -mr-1"
+                        />
+                      )}
+                      {onRename && (
+                        <PopoverMenuItem
+                          icon={PencilSquareIcon}
+                          title="Rename"
+                          onClick={() => {
+                            setRenameValue(titleString ?? "");
+                            setIsRenameDialogOpen(true);
+                            setIsMenuOpen(false);
+                          }}
+                        />
+                      )}
+                      {onDuplicate && (
+                        <PopoverMenuItem
+                          icon={DocumentDuplicateIcon}
+                          title="Duplicate chart"
+                          onClick={() => {
+                            onDuplicate(props.data);
+                            setIsMenuOpen(false);
+                          }}
+                          className="pr-4"
+                        />
+                      )}
+                    </>
+                  )}
+                  {query && (
+                    <PopoverMenuItem
+                      icon={ClipboardIcon}
+                      title="Copy query"
+                      onClick={() => {
+                        copyQuery();
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                  <PopoverMenuItem
+                    icon={IconBraces}
+                    title="Copy JSON"
+                    disabled={!hasData}
+                    onClick={() => {
+                      copyJSON();
+                      setIsMenuOpen(false);
+                    }}
+                    leadingIconClassName="-ml-0.5 -mr-1"
+                  />
+                  <PopoverMenuItem
+                    icon={IconFileTypeCsv}
+                    title="Copy CSV"
+                    disabled={!hasData}
+                    onClick={() => {
+                      copyCSV();
+                      setIsMenuOpen(false);
+                    }}
+                    leadingIconClassName="-ml-0.5 -mr-1"
+                  />
+                  {onDelete && (
+                    <PopoverMenuItem
+                      icon={TrashIcon}
+                      title="Delete chart"
+                      leadingIconClassName="text-error"
+                      className="text-error hover:!bg-error/10"
+                      onClick={() => {
+                        onDelete();
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </Card.Accessory>
+        </Card.Header>
+        <LoadingBarDivider isLoading={isLoading ?? false} className="bg-transparent" />
+        <Card.Content className="min-h-0 flex-1 overflow-hidden p-0">
+          {isResizing ? (
+            <div className="flex h-full flex-1 items-center justify-center p-3">
+              <div className="flex flex-col items-center gap-1 text-text-dimmed">
+                <ChartBarIcon className="size-10 text-text-dimmed" />{" "}
+                <span className="text-base font-medium">Resizing...</span>
+              </div>
+            </div>
+          ) : error ? (
+            <div className="p-3">
+              <Callout variant="error">{error}</Callout>
+            </div>
+          ) : (
+            <QueryWidgetBody
+              {...props}
+              title={title}
+              isFullscreen={isFullscreen}
+              setIsFullscreen={setIsFullscreen}
+              isLoading={isLoading ?? false}
+            />
+          )}
+        </Card.Content>
+      </Card>
+
+      {/* Rename Dialog */}
+      {onRename && (
+        <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>Rename chart</DialogHeader>
+            <form
+              className="space-y-4 pt-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (renameValue.trim()) {
+                  onRename(renameValue.trim());
+                  setIsRenameDialogOpen(false);
+                }
+              }}
+            >
+              <InputGroup>
+                <Label>Title</Label>
+                <Input
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  placeholder="Chart title"
+                  autoFocus
+                />
+              </InputGroup>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="tertiary/medium">Cancel</Button>
+                </DialogClose>
+                <Button type="submit" variant="primary/medium" disabled={!renameValue.trim()}>
+                  Save
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}
+
+type QueryWidgetBodyProps = {
+  title: ReactNode;
+  data: QueryWidgetData;
+  config: QueryWidgetConfig;
+  timeRange?: { from: string; to: string };
+  isFullscreen: boolean;
+  setIsFullscreen: (open: boolean) => void;
+  isLoading: boolean;
+};
+
+function QueryWidgetBody({
+  title,
+  data,
+  config,
+  timeRange,
+  isFullscreen,
+  setIsFullscreen,
+  isLoading,
+}: QueryWidgetBodyProps) {
+  const type = config.type;
+
+  // Only show the loading state if we have no data yet (initial load).
+  // During a reload with existing data, keep showing the current data
+  // while the loading bar in the header indicates a refresh is in progress.
+  const hasData = data.rows.length > 0;
+  const showLoading = isLoading && !hasData;
+
+  switch (type) {
+    case "table": {
+      return (
+        <>
+          <TSQLResultsTable
+            rows={data.rows}
+            columns={data.columns}
+            prettyFormatting={config.prettyFormatting}
+            sorting={config.sorting}
+          />
+          <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
+            <DialogContent
+              fullscreen
+              className="flex flex-col gap-0 bg-background-bright px-0 pb-0"
+            >
+              <DialogHeader className="px-4">{title}</DialogHeader>
+              <div className="min-h-0 w-full flex-1 pt-2.5">
+                <TSQLResultsTable
+                  rows={data.rows}
+                  columns={data.columns}
+                  prettyFormatting={config.prettyFormatting}
+                  sorting={config.sorting}
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+    }
+    case "chart": {
+      return (
+        <>
+          <QueryResultsChart
+            rows={data.rows}
+            columns={data.columns}
+            config={config}
+            timeRange={timeRange}
+            onViewAllLegendItems={() => setIsFullscreen(true)}
+            isLoading={showLoading}
+          />
+          <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
+            <DialogContent fullscreen className="flex flex-col bg-background-bright">
+              <DialogHeader>{title}</DialogHeader>
+              <div className="min-h-0 w-full flex-1 overflow-hidden pt-4">
+                <QueryResultsChart
+                  rows={data.rows}
+                  columns={data.columns}
+                  config={config}
+                  timeRange={timeRange}
+                  fullLegend
+                  legendScrollable
+                  isLoading={showLoading}
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+    }
+    case "bignumber": {
+      return (
+        <>
+          <BigNumberCard
+            rows={data.rows}
+            columns={data.columns}
+            config={config}
+            isLoading={showLoading}
+          />
+          <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
+            <DialogContent fullscreen className="flex flex-col bg-background-bright">
+              <DialogHeader>{title}</DialogHeader>
+              <div className="flex min-h-0 w-full flex-1 items-center justify-center pt-4">
+                <BigNumberCard
+                  rows={data.rows}
+                  columns={data.columns}
+                  config={config}
+                  isLoading={showLoading}
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+    }
+    case "title": {
+      // Title widgets are rendered by TitleWidget, not QueryWidget
+      return null;
+    }
+    default: {
+      assertNever(type);
+    }
+  }
+}
diff --git a/apps/webapp/app/components/metrics/QueuesFilter.tsx b/apps/webapp/app/components/metrics/QueuesFilter.tsx
new file mode 100644
index 000000000..87d7a6125
--- /dev/null
+++ b/apps/webapp/app/components/metrics/QueuesFilter.tsx
@@ -0,0 +1,212 @@
+import * as Ariakit from "@ariakit/react";
+import { RectangleStackIcon } from "@heroicons/react/20/solid";
+import { useFetcher } from "@remix-run/react";
+import { matchSorter } from "match-sorter";
+import { type ReactNode, useMemo } from "react";
+import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import {
+  ComboBox,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { Spinner } from "~/components/primitives/Spinner";
+import { useDebounceEffect } from "~/hooks/useDebounce";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { type loader as queuesLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+
+const shortcut = { key: "q" };
+
+export function QueuesFilter() {
+  const { values, replace, del } = useSearchParams();
+  const selectedQueues = values("queues");
+
+  if (selectedQueues.length === 0 || selectedQueues.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <QueuesDropdown
+            trigger={
+              <SelectTrigger
+                icon={<RectangleStackIcon className="size-4" />}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by queue"
+              >
+                <span className="ml-1">Queues</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <QueuesDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Queues"
+                icon={<RectangleStackIcon className="size-4" />}
+                value={appliedSummary(selectedQueues.map((v) => v.replace("task/", "")))}
+                onRemove={() => del(["queues"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function QueuesDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({
+      queues: values.length > 0 ? values : undefined,
+    });
+  };
+
+  const queueValues = values("queues").filter((v) => v !== "");
+  const selected = queueValues.length > 0 ? queueValues : undefined;
+
+  const fetcher = useFetcher<typeof queuesLoader>();
+
+  useDebounceEffect(
+    searchValue,
+    (s) => {
+      const searchParams = new URLSearchParams();
+      searchParams.set("per_page", "25");
+      if (searchValue) {
+        searchParams.set("query", s);
+      }
+      fetcher.load(
+        `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+          environment.slug
+        }/queues?${searchParams.toString()}`
+      );
+    },
+    250
+  );
+
+  const filtered = useMemo(() => {
+    // Use a Map to deduplicate by value
+    const itemsMap = new Map<string, { name: string; type: "custom" | "task"; value: string }>();
+
+    // Add selected items first (for items not yet loaded from fetcher)
+    for (const queueName of selected ?? []) {
+      const queueItem = fetcher.data?.queues.find((q) => q.name === queueName);
+      if (!queueItem) {
+        if (queueName.startsWith("task/")) {
+          itemsMap.set(queueName, {
+            name: queueName.replace("task/", ""),
+            type: "task",
+            value: queueName,
+          });
+        } else {
+          itemsMap.set(queueName, {
+            name: queueName,
+            type: "custom",
+            value: queueName,
+          });
+        }
+      }
+    }
+
+    // Add items from fetcher data
+    if (fetcher.data !== undefined) {
+      for (const q of fetcher.data.queues) {
+        const value = q.type === "task" ? `task/${q.name}` : q.name;
+        itemsMap.set(value, {
+          name: q.name,
+          type: q.type,
+          value,
+        });
+      }
+    }
+
+    const items = Array.from(itemsMap.values());
+    return matchSorter(items, searchValue, {
+      keys: ["name"],
+    });
+  }, [searchValue, fetcher.data, selected]);
+
+  return (
+    <SelectProvider value={selected ?? []} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox
+          value={searchValue}
+          render={(props) => (
+            <div className="flex items-center justify-stretch">
+              <input {...props} placeholder={"Filter by queues..."} />
+              {fetcher.state === "loading" && <Spinner color="muted" />}
+            </div>
+          )}
+        />
+        <SelectList>
+          {filtered.length > 0
+            ? filtered.map((queue) => (
+                <SelectItem
+                  key={queue.value}
+                  value={queue.value}
+                  icon={
+                    queue.type === "task" ? (
+                      <TaskIcon className="size-4 shrink-0 text-blue-500" />
+                    ) : (
+                      <RectangleStackIcon className="size-4 shrink-0 text-purple-500" />
+                    )
+                  }
+                >
+                  {queue.name}
+                </SelectItem>
+              ))
+            : null}
+          {filtered.length === 0 && fetcher.state !== "loading" && (
+            <SelectItem disabled>No queues found</SelectItem>
+          )}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
diff --git a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
new file mode 100644
index 000000000..1e2c1232e
--- /dev/null
+++ b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
@@ -0,0 +1,177 @@
+import { DialogClose } from "@radix-ui/react-dialog";
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { IconChartHistogram } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import {
+  useCustomDashboards,
+  useOrganization,
+  useWidgetLimitPerDashboard,
+} from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { cn } from "~/utils/cn";
+import { v3CustomDashboardPath } from "~/utils/pathBuilder";
+import { Button } from "../primitives/Buttons";
+import { Dialog, DialogContent, DialogHeader } from "../primitives/Dialog";
+import { FormButtons } from "../primitives/FormButtons";
+import { Paragraph } from "../primitives/Paragraph";
+import type { QueryWidgetConfig } from "./QueryWidget";
+
+export type SaveToDashboardDialogProps = {
+  title: string;
+  query: string;
+  config: QueryWidgetConfig;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function SaveToDashboardDialog({
+  title,
+  query,
+  config,
+  isOpen,
+  onOpenChange,
+}: SaveToDashboardDialogProps) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const customDashboards = useCustomDashboards();
+  const widgetLimit = useWidgetLimitPerDashboard();
+  const fetcher = useFetcher<{ success: boolean }>();
+  const navigate = useNavigate();
+
+  // Find the first dashboard that isn't at the widget limit
+  const firstAvailableDashboard = customDashboards.find((d) => d.widgetCount < widgetLimit);
+
+  const [selectedDashboardId, setSelectedDashboardId] = useState<string | null>(
+    firstAvailableDashboard?.friendlyId ?? customDashboards[0]?.friendlyId ?? null
+  );
+
+  // Build the form action URL
+  const formAction = selectedDashboardId
+    ? `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboards/${selectedDashboardId}/widgets`
+    : "";
+
+  const isLoading = fetcher.state === "submitting";
+
+  // Check if selected dashboard is at widget limit
+  const selectedDashboard = customDashboards.find((d) => d.friendlyId === selectedDashboardId);
+  const isSelectedAtLimit = selectedDashboard
+    ? selectedDashboard.widgetCount >= widgetLimit
+    : false;
+
+  // Navigate to the dashboard when the fetcher completes successfully
+  useEffect(() => {
+    if (fetcher.state === "idle" && fetcher.data?.success && selectedDashboardId) {
+      onOpenChange(false);
+      navigate(
+        v3CustomDashboardPath(
+          { slug: organization.slug },
+          { slug: project.slug },
+          { slug: environment.slug },
+          { friendlyId: selectedDashboardId }
+        )
+      );
+    }
+  }, [fetcher.state, fetcher.data, selectedDashboardId, onOpenChange, navigate, organization.slug, project.slug, environment.slug]);
+
+  // Update selection if dashboards change
+  useEffect(() => {
+    if (customDashboards.length > 0 && !selectedDashboardId) {
+      const available = customDashboards.find((d) => d.widgetCount < widgetLimit);
+      setSelectedDashboardId(available?.friendlyId ?? customDashboards[0].friendlyId);
+    }
+  }, [customDashboards, selectedDashboardId, widgetLimit]);
+
+  if (customDashboards.length === 0) {
+    return (
+      <Dialog open={isOpen} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>Add to dashboard</DialogHeader>
+          <div className="!mt-1 space-y-4">
+            <Paragraph variant="small" className="text-text-dimmed">
+              You don't have any custom dashboards yet. Create one first from the sidebar menu.
+            </Paragraph>
+            <FormButtons
+              className="justify-end"
+              cancelButton={
+                <DialogClose asChild>
+                  <Button variant="secondary/medium">Close</Button>
+                </DialogClose>
+              }
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>Add to dashboard</DialogHeader>
+        <fetcher.Form method="post" action={formAction} className="space-y-4">
+          <input type="hidden" name="action" value="add" />
+          <input type="hidden" name="title" value={title} />
+          <input type="hidden" name="query" value={query} />
+          <input type="hidden" name="config" value={JSON.stringify(config)} />
+
+          <div className="!mt-1 space-y-2">
+            <Paragraph variant="small" className="text-text-dimmed">
+              Select a dashboard to add this chart to:
+            </Paragraph>
+            <div className="max-h-64 space-y-1 overflow-y-auto">
+              {customDashboards.map((dashboard) => {
+                const isAtLimit = dashboard.widgetCount >= widgetLimit;
+                return (
+                  <button
+                    key={dashboard.friendlyId}
+                    type="button"
+                    onClick={() => !isAtLimit && setSelectedDashboardId(dashboard.friendlyId)}
+                    disabled={isAtLimit}
+                    className={cn(
+                      "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition",
+                      isAtLimit
+                        ? "cursor-not-allowed opacity-50"
+                        : selectedDashboardId === dashboard.friendlyId
+                        ? "bg-charcoal-700 text-text-bright"
+                        : "text-text-dimmed hover:bg-charcoal-750 hover:text-text-bright"
+                    )}
+                  >
+                    <IconChartHistogram className="size-4 shrink-0 text-text-dimmed" />
+                    <span className="flex-1 truncate">{dashboard.title}</span>
+                    <span
+                      className={cn(
+                        "shrink-0 text-xs",
+                        isAtLimit ? "text-error" : "text-text-dimmed"
+                      )}
+                    >
+                      {dashboard.widgetCount}/{widgetLimit}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <FormButtons
+            confirmButton={
+              <Button
+                type="submit"
+                variant="primary/medium"
+                disabled={isLoading || !selectedDashboardId || isSelectedAtLimit}
+              >
+                {isLoading ? "Saving..." : "Save"}
+              </Button>
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="secondary/medium">Cancel</Button>
+              </DialogClose>
+            }
+          />
+        </fetcher.Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/webapp/app/components/metrics/ScopeFilter.tsx b/apps/webapp/app/components/metrics/ScopeFilter.tsx
new file mode 100644
index 000000000..1bf6b6856
--- /dev/null
+++ b/apps/webapp/app/components/metrics/ScopeFilter.tsx
@@ -0,0 +1,64 @@
+import * as Ariakit from "@ariakit/react";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { SelectItem, SelectPopover, SelectProvider } from "~/components/primitives/Select";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import type { QueryScope } from "~/services/queryService.server";
+import { CubeTransparentIcon, GlobeAltIcon } from "@heroicons/react/20/solid";
+import { IconListLetters } from "@tabler/icons-react";
+
+const scopeOptions = [
+  { value: "environment", label: "Environment" },
+  { value: "project", label: "Project" },
+  { value: "organization", label: "Organization" },
+] as const;
+
+export function ScopeFilter() {
+  const { value, replace } = useSearchParams();
+  const scope = (value("scope") as QueryScope) ?? "environment";
+
+  const handleChange = (newScope: string) => {
+    replace({ scope: newScope === "environment" ? undefined : newScope });
+  };
+
+  return (
+    <SelectProvider value={scope} setValue={handleChange}>
+      <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+        <AppliedFilter
+          label="Scope"
+          icon={<CubeTransparentIcon className="size-4" />}
+          value={<ScopeItem scope={scope} />}
+          removable={false}
+          variant="secondary/small"
+        />
+      </Ariakit.Select>
+      <SelectPopover className="min-w-0 max-w-[min(240px,var(--popover-available-width))]">
+        {scopeOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            <ScopeItem scope={option.value} />
+          </SelectItem>
+        ))}
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function ScopeItem({ scope }: { scope: QueryScope }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  switch (scope) {
+    case "organization":
+      return `Org: ${organization.title}`;
+    case "project":
+      return `Project: ${project.name}`;
+    case "environment":
+      return <EnvironmentLabel environment={environment} />;
+    default:
+      return scope;
+  }
+}
diff --git a/apps/webapp/app/components/metrics/TitleWidget.tsx b/apps/webapp/app/components/metrics/TitleWidget.tsx
new file mode 100644
index 000000000..0a5a7590e
--- /dev/null
+++ b/apps/webapp/app/components/metrics/TitleWidget.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { PencilIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
+import { Button } from "../primitives/Buttons";
+import {
+  Popover,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverVerticalEllipseTrigger,
+} from "../primitives/Popover";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+
+export type TitleWidgetProps = {
+  title: string;
+  isDraggable?: boolean;
+  isResizing?: boolean;
+  /** Callback when rename is clicked. Receives the new title. */
+  onRename?: (newTitle: string) => void;
+  /** Callback when delete is clicked. */
+  onDelete?: () => void;
+};
+
+export function TitleWidget({
+  title,
+  isDraggable,
+  isResizing,
+  onRename,
+  onDelete,
+}: TitleWidgetProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(title);
+
+  const hasMenu = onRename || onDelete;
+
+  return (
+    <div className="h-full">
+      <div
+        className={cn(
+          "group flex h-full items-center gap-2 rounded-lg border border-grid-bright bg-background-bright px-4",
+          isDraggable && "drag-handle cursor-grab active:cursor-grabbing"
+        )}
+      >
+        <span className="min-w-0 flex-1 truncate text-lg font-medium text-text-bright">
+          {title}
+        </span>
+        {hasMenu && (
+          <div className="flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <PopoverVerticalEllipseTrigger isOpen={isMenuOpen} />
+              <PopoverContent align="end" className="p-0">
+                <div className="flex flex-col gap-1 p-1">
+                  {onRename && (
+                    <PopoverMenuItem
+                      icon={PencilIcon}
+                      title="Rename"
+                      onClick={() => {
+                        setRenameValue(title);
+                        setIsRenameDialogOpen(true);
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                  {onDelete && (
+                    <PopoverMenuItem
+                      icon={TrashIcon}
+                      title="Delete"
+                      leadingIconClassName="text-error"
+                      className="text-error hover:!bg-error/10"
+                      onClick={() => {
+                        onDelete();
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
+
+      {/* Rename Dialog */}
+      {onRename && (
+        <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>Rename title</DialogHeader>
+            <form
+              className="space-y-4 pt-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (renameValue.trim()) {
+                  onRename(renameValue.trim());
+                  setIsRenameDialogOpen(false);
+                }
+              }}
+            >
+              <InputGroup>
+                <Label>Title</Label>
+                <Input
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  placeholder="Section title"
+                  autoFocus
+                />
+              </InputGroup>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="tertiary/medium">Cancel</Button>
+                </DialogClose>
+                <Button type="submit" variant="primary/medium" disabled={!renameValue.trim()}>
+                  Save
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/DashboardDialogs.tsx b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
new file mode 100644
index 000000000..a14681361
--- /dev/null
+++ b/apps/webapp/app/components/navigation/DashboardDialogs.tsx
@@ -0,0 +1,255 @@
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Form, useNavigation } from "@remix-run/react";
+import { motion } from "framer-motion";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/20/solid";
+import { useEffect, useState } from "react";
+import { type MatchedOrganization, useDashboardLimits } from "~/hooks/useOrganizations";
+import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
+import { Feedback } from "~/components/Feedback";
+import { Button, LinkButton } from "../primitives/Buttons";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "../primitives/Dialog";
+import { FormButtons } from "../primitives/FormButtons";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+import { Paragraph } from "../primitives/Paragraph";
+import { TextLink } from "../primitives/TextLink";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { v3BillingPath } from "~/utils/pathBuilder";
+import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
+
+export function CreateDashboardButton({
+  organization,
+  project,
+  environment,
+  isCollapsed,
+}: {
+  organization: MatchedOrganization;
+  project: SideMenuProject;
+  environment: SideMenuEnvironment;
+  isCollapsed: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const navigation = useNavigation();
+  const limits = useDashboardLimits();
+  const plan = useCurrentPlan();
+
+  const isAtLimit = limits.used >= limits.limit;
+  const planLimits = (plan?.v3Subscription?.plan?.limits as any)?.metricDashboards;
+  const canExceed = typeof planLimits === "object" && planLimits.canExceed === true;
+  const canUpgrade = plan?.v3Subscription?.plan && !canExceed;
+
+  const formAction = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboards/create`;
+
+  // Close dialog when form submission starts (redirect is happening)
+  useEffect(() => {
+    if (navigation.formAction === formAction && navigation.state === "loading") {
+      setIsOpen(false);
+    }
+  }, [navigation.formAction, navigation.state, formAction]);
+
+  if (isCollapsed) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <TooltipProvider disableHoverableContent>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <button
+                type="button"
+                className="flex h-full w-full items-center justify-center rounded text-text-dimmed transition focus-custom hover:bg-charcoal-600 hover:text-text-bright"
+              >
+                <PlusIcon className="size-4" />
+              </button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right" className="text-xs">
+            Create dashboard
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {isAtLimit ? (
+        <CreateDashboardUpgradeDialog
+          limits={limits}
+          canUpgrade={!!canUpgrade}
+          isFreePlan={plan?.v3Subscription?.isPaying === false}
+          organization={organization}
+        />
+      ) : (
+        <CreateDashboardDialog formAction={formAction} limits={limits} />
+      )}
+    </Dialog>
+  );
+}
+
+const PROGRESS_RING_R = 27.5;
+const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_R;
+const PROGRESS_COLOR_SUCCESS = "#28BF5C"; // mint-500 / success
+const PROGRESS_COLOR_ERROR = "#E11D48"; // rose-600 / error
+
+function CreateDashboardUpgradeDialog({
+  limits,
+  canUpgrade,
+  isFreePlan,
+  organization,
+}: {
+  limits: { used: number; limit: number };
+  canUpgrade: boolean;
+  isFreePlan: boolean;
+  organization: MatchedOrganization;
+}) {
+
+  if (isFreePlan) {
+    return (
+      <DialogContent>
+        <DialogHeader>Upgrade to unlock dashboards</DialogHeader>
+        <div className="flex items-center gap-4 pt-3">
+          <ArrowUpCircleIcon className="ml-1 size-14 shrink-0 text-indigo-500" />
+          <DialogDescription className="pt-0">
+            Custom metric dashboards are available on paid plans. Upgrade to create dashboards and
+            track your task metrics.
+          </DialogDescription>
+        </div>
+        <DialogFooter className="flex justify-between">
+          <DialogClose asChild>
+            <Button variant="secondary/medium">Cancel</Button>
+          </DialogClose>
+          <LinkButton variant="primary/medium" to={v3BillingPath(organization)}>
+            Upgrade plan
+          </LinkButton>
+        </DialogFooter>
+      </DialogContent>
+    );
+  }
+
+  const percentage = Math.min(limits.used / limits.limit, 1);
+  const filled = percentage * PROGRESS_RING_CIRCUMFERENCE;
+
+  return (
+    <DialogContent>
+      <DialogHeader>Dashboard limit reached</DialogHeader>
+      <div className="flex items-center gap-4 pt-3">
+        <div className="relative ml-1 mt-2 shrink-0" style={{ width: 60, height: 60 }}>
+          <svg className="h-full w-full -rotate-90 overflow-visible">
+            <circle
+              className="fill-none stroke-grid-bright"
+              strokeWidth="5"
+              r={PROGRESS_RING_R}
+              cx="30"
+              cy="30"
+            />
+            <motion.circle
+              className="fill-none"
+              strokeWidth="5"
+              r={PROGRESS_RING_R}
+              cx="30"
+              cy="30"
+              strokeLinecap="round"
+              initial={{
+                strokeDasharray: `0 ${PROGRESS_RING_CIRCUMFERENCE}`,
+                stroke: PROGRESS_COLOR_SUCCESS,
+              }}
+              animate={{
+                strokeDasharray: `${filled} ${PROGRESS_RING_CIRCUMFERENCE}`,
+                stroke: PROGRESS_COLOR_ERROR,
+              }}
+              transition={{ duration: 1.2, ease: "easeInOut" }}
+            />
+          </svg>
+          <span className="absolute inset-0 flex items-center justify-center text-lg text-text-dimmed">
+            {limits.limit}
+          </span>
+        </div>
+        <DialogDescription className="pt-0">
+          {canUpgrade ? (
+            <>
+              {limits.limit === 1
+                ? "Your plan includes 1 custom dashboard and it's already in use."
+                : `You've used all ${limits.limit} of your custom dashboards.`}{" "}
+              Upgrade your plan to create more.
+            </>
+          ) : (
+            <>
+              {limits.limit === 1
+                ? "Your plan includes 1 custom dashboard and it's already in use."
+                : `You've used all ${limits.limit} of your custom dashboards.`}{" "}
+              To create more, request a limit increase or visit the{" "}
+              <TextLink to={v3BillingPath(organization)}>billing page</TextLink> for pricing
+              details.
+            </>
+          )}
+        </DialogDescription>
+      </div>
+      <DialogFooter className="flex justify-between">
+        <DialogClose asChild>
+          <Button variant="secondary/medium">Cancel</Button>
+        </DialogClose>
+        {canUpgrade ? (
+          <LinkButton variant="primary/medium" to={v3BillingPath(organization)}>
+            Upgrade plan
+          </LinkButton>
+        ) : (
+          <Feedback
+            button={<Button variant="primary/medium">Request more…</Button>}
+            defaultValue="help"
+          />
+        )}
+      </DialogFooter>
+    </DialogContent>
+  );
+}
+
+function CreateDashboardDialog({
+  formAction,
+  limits,
+}: {
+  formAction: string;
+  limits: { used: number; limit: number };
+}) {
+  const navigation = useNavigation();
+  const [title, setTitle] = useState("");
+
+  const isLoading = navigation.formAction === formAction;
+
+  return (
+    <DialogContent className="sm:max-w-sm">
+      <DialogHeader>Create dashboard</DialogHeader>
+      <Form method="post" action={formAction} className="space-y-4 pt-3">
+        <InputGroup>
+          <Label>Title</Label>
+          <Input
+            name="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="My Dashboard"
+            required
+          />
+        </InputGroup>
+        <Paragraph variant="extra-small" className="text-text-dimmed">
+          {limits.used}/{limits.limit} dashboards used
+        </Paragraph>
+        <FormButtons
+          confirmButton={
+            <Button type="submit" variant="primary/medium" disabled={isLoading || !title.trim()}>
+              {isLoading ? "Creating..." : "Create"}
+            </Button>
+          }
+          cancelButton={
+            <DialogClose asChild>
+              <Button variant="secondary/medium">Cancel</Button>
+            </DialogClose>
+          }
+        />
+      </Form>
+    </DialogContent>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/DashboardList.tsx b/apps/webapp/app/components/navigation/DashboardList.tsx
new file mode 100644
index 000000000..132dc0268
--- /dev/null
+++ b/apps/webapp/app/components/navigation/DashboardList.tsx
@@ -0,0 +1,123 @@
+import { IconChartHistogram } from "@tabler/icons-react";
+import { GripVerticalIcon, LineChartIcon } from "lucide-react";
+import ReactGridLayout from "react-grid-layout";
+import { type MatchedOrganization, useCustomDashboards } from "~/hooks/useOrganizations";
+import { type UserWithDashboardPreferences } from "~/models/user.server";
+import { v3CustomDashboardPath } from "~/utils/pathBuilder";
+import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
+import { SideMenuItem } from "./SideMenuItem";
+import { TreeConnectorBranch, TreeConnectorEnd } from "./TreeConnectors";
+import { useReorderableList } from "./useReorderableList";
+
+type SideMenuUser = Pick<UserWithDashboardPreferences, "dashboardPreferences"> & {
+  isImpersonating: boolean;
+};
+
+export function DashboardList({
+  organization,
+  project,
+  environment,
+  isCollapsed,
+  user,
+}: {
+  organization: MatchedOrganization;
+  project: SideMenuProject;
+  environment: SideMenuEnvironment;
+  isCollapsed: boolean;
+  user: SideMenuUser;
+}) {
+  const customDashboards = useCustomDashboards();
+  const initialOrder =
+    user.dashboardPreferences.sideMenu?.organizations?.[organization.id]?.orderedItems?.[
+      "customDashboards"
+    ];
+
+  const {
+    orderedItems: orderedDashboards,
+    layout,
+    containerRef,
+    gridWidth,
+    canReorder,
+    handleDrag,
+    handleDragStop,
+    getIsLast,
+  } = useReorderableList({
+    organizationId: organization.id,
+    listId: "customDashboards",
+    items: customDashboards,
+    itemKey: (d) => d.friendlyId,
+    initialOrder,
+    isImpersonating: user.isImpersonating,
+  });
+
+  return (
+    <div ref={containerRef}>
+      {canReorder ? (
+        <ReactGridLayout
+          layout={layout}
+          width={gridWidth}
+          gridConfig={{
+            cols: 1,
+            rowHeight: 32,
+            margin: [0, 0] as const,
+            containerPadding: [0, 0] as const,
+          }}
+          resizeConfig={{ enabled: false }}
+          dragConfig={{ enabled: !isCollapsed, handle: ".sidebar-drag-handle" }}
+          onDrag={handleDrag}
+          onDragStop={handleDragStop}
+          className="sidebar-reorder-grid"
+          autoSize
+        >
+          {orderedDashboards.map((dashboard, index) => {
+            const isLast = getIsLast(dashboard.friendlyId, index);
+            return (
+              <div key={dashboard.friendlyId}>
+                <SideMenuItem
+                  name={dashboard.title}
+                  icon={
+                    isCollapsed
+                      ? IconChartHistogram
+                      : isLast
+                      ? TreeConnectorEnd
+                      : TreeConnectorBranch
+                  }
+                  activeIconColor={isCollapsed ? "text-customDashboards" : undefined}
+                  inactiveIconColor={isCollapsed ? "text-customDashboards" : undefined}
+                  to={v3CustomDashboardPath(organization, project, environment, dashboard)}
+                  isCollapsed={isCollapsed}
+                  action={
+                    <div className="sidebar-drag-handle flex h-full w-full cursor-grab items-center justify-center rounded text-text-dimmed opacity-0 transition group-hover/menuitem:opacity-100 hover:text-text-bright active:cursor-grabbing">
+                      <GripVerticalIcon className="size-3.5" />
+                    </div>
+                  }
+                />
+              </div>
+            );
+          })}
+        </ReactGridLayout>
+      ) : (
+        orderedDashboards.map((dashboard, index) => {
+          const isLast = index === orderedDashboards.length - 1;
+          return (
+            <SideMenuItem
+              key={dashboard.friendlyId}
+              name={dashboard.title}
+              icon={
+                isCollapsed
+                  ? LineChartIcon
+                  : isLast
+                  ? TreeConnectorEnd
+                  : TreeConnectorBranch
+              }
+              activeIconColor={isCollapsed ? "text-customDashboards" : "text-charcoal-700"}
+              inactiveIconColor={isCollapsed ? "text-customDashboards" : "text-charcoal-700"}
+              to={v3CustomDashboardPath(organization, project, environment, dashboard)}
+              isCollapsed={isCollapsed}
+            />
+          );
+        })
+      )}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 95282f15f..241bb8aea 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -20,11 +20,11 @@ import {
   ServerStackIcon,
   Squares2X2Icon,
   TableCellsIcon,
-  UsersIcon
+  UsersIcon,
 } from "@heroicons/react/20/solid";
 import { Link, useFetcher, useNavigation } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import simplur from "simplur";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
@@ -40,9 +40,8 @@ import { useFeatureFlags } from "~/hooks/useFeatureFlags";
 import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
-import { useHasAdminAccess } from "~/hooks/useUser";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
-import { ShortcutKey } from "../primitives/ShortcutKey";
+import { useHasAdminAccess } from "~/hooks/useUser";
 import { type UserWithDashboardPreferences } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
@@ -65,6 +64,7 @@ import {
   v3ApiKeysPath,
   v3BatchesPath,
   v3BillingPath,
+  v3BuiltInDashboardPath,
   v3BulkActionsPath,
   v3DeploymentsPath,
   v3EnvironmentPath,
@@ -88,23 +88,39 @@ import { ImpersonationBanner } from "../ImpersonationBanner";
 import { Button, ButtonContent, LinkButton } from "../primitives/Buttons";
 import { Dialog, DialogTrigger } from "../primitives/Dialog";
 import { Paragraph } from "../primitives/Paragraph";
-import {
-  Popover,
-  PopoverContent,
-  PopoverMenuItem,
-  PopoverTrigger
-} from "../primitives/Popover";
+import { Popover, PopoverContent, PopoverMenuItem, PopoverTrigger } from "../primitives/Popover";
+import { ShortcutKey } from "../primitives/ShortcutKey";
 import { TextLink } from "../primitives/TextLink";
-import { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import {
+  SimpleTooltip,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { UserProfilePhoto } from "../UserProfilePhoto";
+import { CreateDashboardButton } from "./DashboardDialogs";
+import { DashboardList } from "./DashboardList";
 import { EnvironmentSelector } from "./EnvironmentSelector";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
+import { type SideMenuSectionId } from "./sideMenuTypes";
 
-type SideMenuUser = Pick<UserWithDashboardPreferences, "email" | "admin" | "dashboardPreferences"> & {
+/** Get the collapsed state for a specific side menu section from user preferences */
+function getSectionCollapsed(
+  sideMenu: { collapsedSections?: Record<string, boolean> } | undefined,
+  sectionId: SideMenuSectionId
+): boolean {
+  return sideMenu?.collapsedSections?.[sectionId] ?? false;
+}
+
+type SideMenuUser = Pick<
+  UserWithDashboardPreferences,
+  "email" | "admin" | "dashboardPreferences"
+> & {
   isImpersonating: boolean;
 };
 export type SideMenuProject = Pick<
@@ -138,7 +154,8 @@ export function SideMenu({
   const preferencesFetcher = useFetcher();
   const pendingPreferencesRef = useRef<{
     isCollapsed?: boolean;
-    manageSectionCollapsed?: boolean;
+    sectionId?: SideMenuSectionId;
+    sectionCollapsed?: boolean;
   }>({});
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const currentPlan = useCurrentPlan();
@@ -149,7 +166,11 @@ export function SideMenu({
   const featureFlags = useFeatureFlags();
 
   const persistSideMenuPreferences = useCallback(
-    (data: { isCollapsed?: boolean; manageSectionCollapsed?: boolean }) => {
+    (data: {
+      isCollapsed?: boolean;
+      sectionId?: SideMenuSectionId;
+      sectionCollapsed?: boolean;
+    }) => {
       if (user.isImpersonating) return;
 
       // Merge with any pending changes
@@ -170,8 +191,9 @@ export function SideMenu({
         if (pending.isCollapsed !== undefined) {
           formData.append("isCollapsed", String(pending.isCollapsed));
         }
-        if (pending.manageSectionCollapsed !== undefined) {
-          formData.append("manageSectionCollapsed", String(pending.manageSectionCollapsed));
+        if (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined) {
+          formData.append("sectionId", pending.sectionId);
+          formData.append("sectionCollapsed", String(pending.sectionCollapsed));
         }
         preferencesFetcher.submit(formData, {
           method: "POST",
@@ -191,13 +213,18 @@ export function SideMenu({
       }
       if (user.isImpersonating) return;
       const pending = pendingPreferencesRef.current;
-      if (pending.isCollapsed !== undefined || pending.manageSectionCollapsed !== undefined) {
+      const hasPendingChanges =
+        pending.isCollapsed !== undefined ||
+        (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined);
+
+      if (hasPendingChanges) {
         const formData = new FormData();
         if (pending.isCollapsed !== undefined) {
           formData.append("isCollapsed", String(pending.isCollapsed));
         }
-        if (pending.manageSectionCollapsed !== undefined) {
-          formData.append("manageSectionCollapsed", String(pending.manageSectionCollapsed));
+        if (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined) {
+          formData.append("sectionId", pending.sectionId);
+          formData.append("sectionCollapsed", String(pending.sectionCollapsed));
         }
         preferencesFetcher.submit(formData, {
           method: "POST",
@@ -214,9 +241,10 @@ export function SideMenu({
     persistSideMenuPreferences({ isCollapsed: newIsCollapsed });
   };
 
-  const handleManageSectionToggle = useCallback(
-    (collapsed: boolean) => {
-      persistSideMenuPreferences({ manageSectionCollapsed: collapsed });
+  /** Generic handler for any collapsible section - just pass the section ID */
+  const handleSectionToggle = useCallback(
+    (sectionId: SideMenuSectionId) => (collapsed: boolean) => {
+      persistSideMenuPreferences({ sectionId, sectionCollapsed: collapsed });
     },
     [persistSideMenuPreferences]
   );
@@ -255,294 +283,340 @@ export function SideMenu({
             showHeaderDivider || isCollapsed ? "border-grid-bright" : "border-transparent"
           )}
         >
-        <div className={cn("min-w-0", !isCollapsed && "flex-1")}>
-          <ProjectSelector
-            organizations={organizations}
-            organization={organization}
-            project={project}
-            user={user}
-            isCollapsed={isCollapsed}
-          />
+          <div className={cn("min-w-0", !isCollapsed && "flex-1")}>
+            <ProjectSelector
+              organizations={organizations}
+              organization={organization}
+              project={project}
+              user={user}
+              isCollapsed={isCollapsed}
+            />
+          </div>
+          {isAdmin && !user.isImpersonating ? (
+            <CollapsibleElement isCollapsed={isCollapsed}>
+              <TooltipProvider disableHoverableContent={true}>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <LinkButton
+                      variant="minimal/medium"
+                      to={adminPath()}
+                      TrailingIcon={UsersIcon}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className={"text-xs"}>
+                    Admin dashboard
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </CollapsibleElement>
+          ) : isAdmin && user.isImpersonating ? (
+            <CollapsibleElement isCollapsed={isCollapsed}>
+              <ImpersonationBanner />
+            </CollapsibleElement>
+          ) : null}
         </div>
-        {isAdmin && !user.isImpersonating ? (
-          <CollapsibleElement isCollapsed={isCollapsed}>
-            <TooltipProvider disableHoverableContent={true}>
-              <Tooltip>
-                <TooltipTrigger>
-                  <LinkButton variant="minimal/medium" to={adminPath()} TrailingIcon={UsersIcon} />
-                </TooltipTrigger>
-                <TooltipContent side="bottom" className={"text-xs"}>
-                  Admin dashboard
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </CollapsibleElement>
-        ) : isAdmin && user.isImpersonating ? (
-          <CollapsibleElement isCollapsed={isCollapsed}>
-            <ImpersonationBanner />
-          </CollapsibleElement>
-        ) : null}
-      </div>
-      <div
-        className={cn(
-          "min-h-0 overflow-y-auto pt-2",
-          isCollapsed
-            ? "scrollbar-none"
-            : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        )}
-        ref={borderRef}
-      >
-        <div className="mb-6 flex w-full flex-col gap-4 overflow-hidden px-1">
-          <div className="w-full space-y-1">
-            <SideMenuHeader title={"Environment"} isCollapsed={isCollapsed} collapsedTitle="Env" />
-            <div className="flex items-center">
-              <EnvironmentSelector
-                organization={organization}
-                project={project}
-                environment={environment}
-                className="w-full"
+        <div
+          className={cn(
+            "min-h-0 overflow-y-auto pt-2",
+            isCollapsed
+              ? "scrollbar-none"
+              : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          )}
+          ref={borderRef}
+        >
+          <div className="mb-6 flex w-full flex-col gap-4 overflow-hidden px-1">
+            <div className="w-full space-y-1">
+              <SideMenuHeader
+                title={"Environment"}
                 isCollapsed={isCollapsed}
+                collapsedTitle="Env"
               />
-              {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
-                <CollapsibleElement isCollapsed={isCollapsed}>
-                  <Dialog>
-                    <TooltipProvider disableHoverableContent={true}>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <div className="inline-flex">
-                            <DialogTrigger asChild>
-                              <Button
-                                variant="minimal/small"
-                                className="aspect-square h-7 p-1"
-                                LeadingIcon={<ConnectionIcon isConnected={isConnected} />}
-                              />
-                            </DialogTrigger>
-                          </div>
-                        </TooltipTrigger>
-                        <TooltipContent side="right" className={"text-xs"}>
-                          {isConnected === undefined
-                            ? "Checking connection..."
-                            : isConnected
-                            ? "Your dev server is connected"
-                            : "Your dev server is not connected"}
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                    <DevPresencePanel isConnected={isConnected} />
-                  </Dialog>
-                </CollapsibleElement>
-              )}
+              <div className="flex items-center">
+                <EnvironmentSelector
+                  organization={organization}
+                  project={project}
+                  environment={environment}
+                  className="w-full"
+                  isCollapsed={isCollapsed}
+                />
+                {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
+                  <CollapsibleElement isCollapsed={isCollapsed}>
+                    <Dialog>
+                      <TooltipProvider disableHoverableContent={true}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div className="inline-flex">
+                              <DialogTrigger asChild>
+                                <Button
+                                  variant="minimal/small"
+                                  className="aspect-square h-7 p-1"
+                                  LeadingIcon={<ConnectionIcon isConnected={isConnected} />}
+                                />
+                              </DialogTrigger>
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent side="right" className={"text-xs"}>
+                            {isConnected === undefined
+                              ? "Checking connection..."
+                              : isConnected
+                              ? "Your dev server is connected"
+                              : "Your dev server is not connected"}
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      <DevPresencePanel isConnected={isConnected} />
+                    </Dialog>
+                  </CollapsibleElement>
+                )}
+              </div>
             </div>
-          </div>
 
-          <div className="w-full">
-            <SideMenuItem
-              name="Tasks"
-              icon={TaskIconSmall}
-              activeIconColor="text-tasks"
-              inactiveIconColor="text-tasks"
-              to={v3EnvironmentPath(organization, project, environment)}
-              data-action="tasks"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Runs"
-              icon={RunsIconExtraSmall}
-              activeIconColor="text-runs"
-              inactiveIconColor="text-runs"
-              to={v3RunsPath(organization, project, environment)}
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Batches"
-              icon={Squares2X2Icon}
-              activeIconColor="text-batches"
-              inactiveIconColor="text-batches"
-              to={v3BatchesPath(organization, project, environment)}
-              data-action="batches"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Schedules"
-              icon={ClockIcon}
-              activeIconColor="text-schedules"
-              inactiveIconColor="text-schedules"
-              to={v3SchedulesPath(organization, project, environment)}
-              data-action="schedules"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Queues"
-              icon={RectangleStackIcon}
-              activeIconColor="text-queues"
-              inactiveIconColor="text-queues"
-              to={v3QueuesPath(organization, project, environment)}
-              data-action="queues"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Waitpoint tokens"
-              icon={WaitpointTokenIcon}
-              activeIconColor="text-sky-500"
-              inactiveIconColor="text-sky-500"
-              to={v3WaitpointTokensPath(organization, project, environment)}
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Deployments"
-              icon={ServerStackIcon}
-              activeIconColor="text-deployments"
-              inactiveIconColor="text-deployments"
-              to={v3DeploymentsPath(organization, project, environment)}
-              data-action="deployments"
-              isCollapsed={isCollapsed}
-            />
-            {(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
+            <div className="w-full">
               <SideMenuItem
-                name="Logs"
-                icon={LogsIcon}
-                activeIconColor="text-logs"
-                inactiveIconColor="text-logs"
-                to={v3LogsPath(organization, project, environment)}
-                data-action="logs"
-                badge={<AlphaBadge />}
+                name="Tasks"
+                icon={TaskIconSmall}
+                activeIconColor="text-tasks"
+                inactiveIconColor="text-tasks"
+                to={v3EnvironmentPath(organization, project, environment)}
+                data-action="tasks"
                 isCollapsed={isCollapsed}
               />
-            )}
-            <SideMenuItem
-              name="Test"
-              icon={BeakerIcon}
-              activeIconColor="text-tests"
-              inactiveIconColor="text-tests"
-              to={v3TestPath(organization, project, environment)}
-              data-action="test"
-              isCollapsed={isCollapsed}
-            />
+              <SideMenuItem
+                name="Runs"
+                icon={RunsIconExtraSmall}
+                activeIconColor="text-runs"
+                inactiveIconColor="text-runs"
+                to={v3RunsPath(organization, project, environment)}
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Batches"
+                icon={Squares2X2Icon}
+                activeIconColor="text-batches"
+                inactiveIconColor="text-batches"
+                to={v3BatchesPath(organization, project, environment)}
+                data-action="batches"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Schedules"
+                icon={ClockIcon}
+                activeIconColor="text-schedules"
+                inactiveIconColor="text-schedules"
+                to={v3SchedulesPath(organization, project, environment)}
+                data-action="schedules"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Queues"
+                icon={RectangleStackIcon}
+                activeIconColor="text-queues"
+                inactiveIconColor="text-queues"
+                to={v3QueuesPath(organization, project, environment)}
+                data-action="queues"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Waitpoint tokens"
+                icon={WaitpointTokenIcon}
+                activeIconColor="text-sky-500"
+                inactiveIconColor="text-sky-500"
+                to={v3WaitpointTokensPath(organization, project, environment)}
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Deployments"
+                icon={ServerStackIcon}
+                activeIconColor="text-deployments"
+                inactiveIconColor="text-deployments"
+                to={v3DeploymentsPath(organization, project, environment)}
+                data-action="deployments"
+                isCollapsed={isCollapsed}
+              />
+              {(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
+                <SideMenuItem
+                  name="Logs"
+                  icon={LogsIcon}
+                  activeIconColor="text-logs"
+                  inactiveIconColor="text-logs"
+                  to={v3LogsPath(organization, project, environment)}
+                  data-action="logs"
+                  badge={<AlphaBadge />}
+                  isCollapsed={isCollapsed}
+                />
+              )}
+              <SideMenuItem
+                name="Test"
+                icon={BeakerIcon}
+                activeIconColor="text-tests"
+                inactiveIconColor="text-tests"
+                to={v3TestPath(organization, project, environment)}
+                data-action="test"
+                isCollapsed={isCollapsed}
+              />
+            </div>
+
             {(user.admin || user.isImpersonating || featureFlags.hasQueryAccess) && (
-              <SideMenuItem
-                name="Query"
-                icon={TableCellsIcon}
-                activeIconColor="text-purple-500"
-                inactiveIconColor="text-purple-500"
-                to={queryPath(organization, project, environment)}
-                data-action="query"
-                badge={<AlphaBadge />}
-                isCollapsed={isCollapsed}
-              />
+              <SideMenuSection
+                title="Insights"
+                isSideMenuCollapsed={isCollapsed}
+                itemSpacingClassName="space-y-0"
+                initialCollapsed={getSectionCollapsed(
+                  user.dashboardPreferences.sideMenu,
+                  "metrics"
+                )}
+                onCollapseToggle={handleSectionToggle("metrics")}
+              >
+                <SideMenuItem
+                  name="Query"
+                  icon={TableCellsIcon}
+                  activeIconColor="text-query"
+                  inactiveIconColor="text-query"
+                  to={queryPath(organization, project, environment)}
+                  data-action="query"
+                  isCollapsed={isCollapsed}
+                />
+                <SideMenuItem
+                  name="Metrics"
+                  icon={ChartBarIcon}
+                  activeIconColor="text-metrics"
+                  inactiveIconColor="text-metrics"
+                  to={v3BuiltInDashboardPath(organization, project, environment, "overview")}
+                  data-action="metrics-overview"
+                  isCollapsed={isCollapsed}
+                  action={
+                    <CreateDashboardButton
+                      organization={organization}
+                      project={project}
+                      environment={environment}
+                      isCollapsed={isCollapsed}
+                    />
+                  }
+                />
+                <DashboardList
+                  organization={organization}
+                  project={project}
+                  environment={environment}
+                  isCollapsed={isCollapsed}
+                  user={user}
+                />
+              </SideMenuSection>
             )}
-          </div>
 
-          <SideMenuSection
-            title="Manage"
-            isSideMenuCollapsed={isCollapsed}
-            itemSpacingClassName="space-y-0"
-            initialCollapsed={user.dashboardPreferences.sideMenu?.manageSectionCollapsed ?? false}
-            onCollapseToggle={handleManageSectionToggle}
-          >
-            <SideMenuItem
-              name="Bulk actions"
-              icon={ListCheckedIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={v3BulkActionsPath(organization, project, environment)}
-              data-action="bulk actions"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="API keys"
-              icon={KeyIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={v3ApiKeysPath(organization, project, environment)}
-              data-action="api keys"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Environment variables"
-              icon={IdentificationIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={v3EnvironmentVariablesPath(organization, project, environment)}
-              data-action="environment variables"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Alerts"
-              icon={BellAlertIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={v3ProjectAlertsPath(organization, project, environment)}
-              data-action="alerts"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Preview branches"
-              icon={BranchEnvironmentIconSmall}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={branchesPath(organization, project, environment)}
-              data-action="preview-branches"
-              isCollapsed={isCollapsed}
-            />
-            {isManagedCloud && (
+            <SideMenuSection
+              title="Manage"
+              isSideMenuCollapsed={isCollapsed}
+              itemSpacingClassName="space-y-0"
+              initialCollapsed={getSectionCollapsed(user.dashboardPreferences.sideMenu, "manage")}
+              onCollapseToggle={handleSectionToggle("manage")}
+            >
               <SideMenuItem
-                name="Concurrency"
-                icon={ConcurrencyIcon}
+                name="Bulk actions"
+                icon={ListCheckedIcon}
                 activeIconColor="text-text-bright"
                 inactiveIconColor="text-text-dimmed"
-                to={concurrencyPath(organization, project, environment)}
-                data-action="concurrency"
+                to={v3BulkActionsPath(organization, project, environment)}
+                data-action="bulk actions"
                 isCollapsed={isCollapsed}
               />
-            )}
-            <SideMenuItem
-              name="Regions"
-              icon={GlobeAmericasIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={regionsPath(organization, project, environment)}
-              data-action="regions"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Limits"
-              icon={AdjustmentsHorizontalIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={limitsPath(organization, project, environment)}
-              data-action="limits"
-              isCollapsed={isCollapsed}
-            />
-            <SideMenuItem
-              name="Project settings"
-              icon={Cog8ToothIcon}
-              activeIconColor="text-text-bright"
-              inactiveIconColor="text-text-dimmed"
-              to={v3ProjectSettingsPath(organization, project, environment)}
-              data-action="project-settings"
-              isCollapsed={isCollapsed}
-            />
-          </SideMenuSection>
-        </div>
-      </div>
-      <div>
-        <IncidentStatusPanel isCollapsed={isCollapsed} />
-        <motion.div
-          layout
-          transition={{ duration: 0.2, ease: "easeInOut" }}
-          className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}
-        >
-          <HelpAndAI isCollapsed={isCollapsed} />
-          {isFreeUser && (
-            <CollapsibleHeight isCollapsed={isCollapsed}>
-              <FreePlanUsage
-                to={v3BillingPath(organization)}
-                percentage={currentPlan.v3Usage.usagePercentage}
+              <SideMenuItem
+                name="API keys"
+                icon={KeyIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={v3ApiKeysPath(organization, project, environment)}
+                data-action="api keys"
+                isCollapsed={isCollapsed}
               />
-            </CollapsibleHeight>
-          )}
-        </motion.div>
-      </div>
+              <SideMenuItem
+                name="Environment variables"
+                icon={IdentificationIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={v3EnvironmentVariablesPath(organization, project, environment)}
+                data-action="environment variables"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Alerts"
+                icon={BellAlertIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={v3ProjectAlertsPath(organization, project, environment)}
+                data-action="alerts"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Preview branches"
+                icon={BranchEnvironmentIconSmall}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={branchesPath(organization, project, environment)}
+                data-action="preview-branches"
+                isCollapsed={isCollapsed}
+              />
+              {isManagedCloud && (
+                <SideMenuItem
+                  name="Concurrency"
+                  icon={ConcurrencyIcon}
+                  activeIconColor="text-text-bright"
+                  inactiveIconColor="text-text-dimmed"
+                  to={concurrencyPath(organization, project, environment)}
+                  data-action="concurrency"
+                  isCollapsed={isCollapsed}
+                />
+              )}
+              <SideMenuItem
+                name="Regions"
+                icon={GlobeAmericasIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={regionsPath(organization, project, environment)}
+                data-action="regions"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Limits"
+                icon={AdjustmentsHorizontalIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={limitsPath(organization, project, environment)}
+                data-action="limits"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="Project settings"
+                icon={Cog8ToothIcon}
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
+                to={v3ProjectSettingsPath(organization, project, environment)}
+                data-action="project-settings"
+                isCollapsed={isCollapsed}
+              />
+            </SideMenuSection>
+          </div>
+        </div>
+        <div>
+          <IncidentStatusPanel isCollapsed={isCollapsed} />
+          <motion.div
+            layout
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className={cn(
+              "flex flex-col gap-1 border-t border-grid-bright p-1",
+              isCollapsed && "items-center"
+            )}
+          >
+            <HelpAndAI isCollapsed={isCollapsed} />
+            {isFreeUser && (
+              <CollapsibleHeight isCollapsed={isCollapsed}>
+                <FreePlanUsage
+                  to={v3BillingPath(organization)}
+                  percentage={currentPlan.v3Usage.usagePercentage}
+                />
+              </CollapsibleHeight>
+            )}
+          </motion.div>
+        </div>
       </div>
     </div>
   );
@@ -890,7 +964,12 @@ function CollapsibleHeight({
 function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
   return (
     <LayoutGroup>
-      <div className={cn("flex w-full", isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between")}>
+      <div
+        className={cn(
+          "flex w-full",
+          isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between"
+        )}
+      >
         <ShortcutsAutoOpen />
         <HelpAndFeedback isCollapsed={isCollapsed} />
         <AskAI isCollapsed={isCollapsed} />
@@ -909,7 +988,7 @@ function AnimatedChevron({
   // When hovering and expanded: left chevron (pointing left to collapse)
   // When hovering and collapsed: right chevron (pointing right to expand)
   // When not hovering: straight vertical line
-  
+
   const getRotation = () => {
     if (!isHovering) return { top: 0, bottom: 0 };
     if (isCollapsed) {
@@ -922,7 +1001,7 @@ function AnimatedChevron({
   };
 
   const { top, bottom } = getRotation();
-  
+
   // Calculate horizontal offset to keep chevron centered when rotated
   // Left chevron: translate left (-1.5px)
   // Right chevron: translate right (+1.5px)
@@ -938,7 +1017,7 @@ function AnimatedChevron({
       viewBox="0 0 4 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="pointer-events-none relative z-10 overflow-visible text-charcoal-600 group-hover:text-text-bright transition-colors"
+      className="pointer-events-none relative z-10 overflow-visible text-charcoal-600 transition-colors group-hover:text-text-bright"
       initial={false}
       animate={{
         x: getTranslateX(),
@@ -981,22 +1060,18 @@ function AnimatedChevron({
   );
 }
 
-function CollapseToggle({
-  isCollapsed,
-  onToggle,
-}: {
-  isCollapsed: boolean;
-  onToggle: () => void;
-}) {
+function CollapseToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onToggle: () => void }) {
   const [isHovering, setIsHovering] = useState(false);
 
   return (
     <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
       {/* Vertical line to mask the side menu border */}
-      <div className={cn(
-        "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
-        isHovering ? "bg-charcoal-750" : "bg-background-bright"
-      )} />
+      <div
+        className={cn(
+          "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
+          isHovering ? "bg-charcoal-750" : "bg-background-bright"
+        )}
+      />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index a89765ad4..844782ed6 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -17,6 +17,7 @@ export function SideMenuItem({
   badge,
   target,
   isCollapsed = false,
+  action,
 }: {
   icon?: RenderIcon;
   activeIconColor?: string;
@@ -28,59 +29,84 @@ export function SideMenuItem({
   badge?: ReactNode;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
   isCollapsed?: boolean;
+  action?: ReactNode;
 }) {
   const pathName = usePathName();
   const isActive = pathName === to;
 
-  return (
-    <SimpleTooltip
-      button={
-        <Link
-          to={to}
-          target={target}
-          className={cn(
-            "flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-charcoal-750",
-            isActive ? "bg-tertiary" : ""
-          )}
-        >
-          <Icon
-            icon={icon}
-            className={cn(
-              "size-5 shrink-0",
-              isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
-            )}
-          />
+  const link = (
+    <Link
+      to={to}
+      target={target}
+      className={cn(
+        "flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-charcoal-750 group-hover/menuitem:bg-charcoal-750",
+        isActive ? "bg-tertiary" : ""
+      )}
+    >
+      <Icon
+        icon={icon}
+        className={cn(
+          "size-5 shrink-0",
+          isActive ? activeIconColor : inactiveIconColor ?? "text-text-dimmed"
+        )}
+      />
+      <motion.div
+        className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
+        initial={false}
+        animate={{
+          width: isCollapsed ? 0 : "auto",
+          opacity: isCollapsed ? 0 : 1,
+        }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+      >
+        <span className="truncate select-none text-2sm">{name}</span>
+        {badge && !isCollapsed && (
           <motion.div
-            className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
+            className="ml-1 flex shrink-0 items-center gap-1"
             initial={false}
             animate={{
-              width: isCollapsed ? 0 : "auto",
-              opacity: isCollapsed ? 0 : 1,
+              opacity: 1,
             }}
-            transition={{ duration: 0.2, ease: "easeOut" }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
           >
-            <span className="truncate text-2sm">{name}</span>
-            {badge && !isCollapsed && (
-              <motion.div
-                className="ml-1 flex shrink-0 items-center gap-1"
-                initial={false}
-                animate={{
-                  opacity: 1,
-                }}
-                transition={{ duration: 0.15, ease: "easeOut" }}
-              >
-                {badge}
-              </motion.div>
-            )}
-            {trailingIcon && !isCollapsed && (
-              <Icon
-                icon={trailingIcon}
-                className={cn("ml-1 size-4 shrink-0", trailingIconClassName)}
-              />
-            )}
+            {badge}
           </motion.div>
-        </Link>
-      }
+        )}
+        {trailingIcon && !isCollapsed && (
+          <Icon
+            icon={trailingIcon}
+            className={cn("ml-1 size-4 shrink-0", trailingIconClassName)}
+          />
+        )}
+      </motion.div>
+    </Link>
+  );
+
+  if (action) {
+    return (
+      <div className="group/menuitem relative h-8 w-full">
+        <SimpleTooltip
+          button={link}
+          content={name}
+          side="right"
+          sideOffset={8}
+          buttonClassName="!h-8 block w-full"
+          hidden={!isCollapsed}
+          asChild
+          disableHoverableContent
+        />
+        {!isCollapsed && (
+          <div className="absolute top-1 right-1 bottom-1 flex aspect-square items-center justify-center rounded group-hover/menuitem:bg-charcoal-750">
+            {action}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <SimpleTooltip
+      button={link}
       content={name}
       side="right"
       sideOffset={8}
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 1f19ffe48..156471651 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -10,6 +10,8 @@ type Props = {
   /** When true, hides the section header and shows only children */
   isSideMenuCollapsed?: boolean;
   itemSpacingClassName?: string;
+  /** Optional action element (e.g., + button) to render on the right side of the header */
+  headerAction?: React.ReactNode;
 };
 
 /** A collapsible section for the side menu
@@ -22,6 +24,7 @@ export function SideMenuSection({
   children,
   isSideMenuCollapsed = false,
   itemSpacingClassName = "space-y-px",
+  headerAction,
 }: Props) {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
 
@@ -37,23 +40,26 @@ export function SideMenuSection({
       <div className="relative w-full">
         {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
-          onClick={isSideMenuCollapsed ? undefined : handleToggle}
-          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
+          className="group/section flex cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 transition hover:bg-charcoal-750"
           initial={false}
           animate={{
             opacity: isSideMenuCollapsed ? 0 : 1,
           }}
           transition={{ duration: 0.15, ease: "easeOut" }}
+          onClick={isSideMenuCollapsed ? undefined : handleToggle}
+          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
         >
-          <h2 className="text-xs whitespace-nowrap">{title}</h2>
-          <motion.div
-            initial={isCollapsed}
-            animate={{ rotate: isCollapsed ? -90 : 0 }}
-            transition={{ duration: 0.2 }}
-          >
-            <ToggleArrowIcon className="size-2" />
-          </motion.div>
+          <div className="flex items-center gap-1 text-text-dimmed transition group-hover/section:text-text-bright">
+            <h2 className="whitespace-nowrap text-xs">{title}</h2>
+            <motion.div
+              initial={isCollapsed}
+              animate={{ rotate: isCollapsed ? -90 : 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              <ToggleArrowIcon className="size-2" />
+            </motion.div>
+          </div>
+          {headerAction && <div className="flex items-center">{headerAction}</div>}
         </motion.div>
         {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
         <motion.div
diff --git a/apps/webapp/app/components/navigation/TreeConnectors.tsx b/apps/webapp/app/components/navigation/TreeConnectors.tsx
new file mode 100644
index 000000000..8479179a4
--- /dev/null
+++ b/apps/webapp/app/components/navigation/TreeConnectors.tsx
@@ -0,0 +1,29 @@
+import { cn } from "~/utils/cn";
+
+// Tree connector icons for sub-items. The SVG viewBox is 20x20 matching the size-5 icon area.
+// Lines extend to y=-6 and y=26 to fill the full 32px row height (6px gap above/below the 20px icon).
+export function TreeConnectorBranch({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("overflow-visible", className, "text-charcoal-600")}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <line x1="10" y1="-6" x2="10" y2="26" stroke="currentColor" strokeWidth="1" />
+      <line x1="10" y1="10" x2="20" y2="10" stroke="currentColor" strokeWidth="1" />
+    </svg>
+  );
+}
+
+export function TreeConnectorEnd({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("overflow-visible", className, "text-charcoal-600")}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <line x1="10" y1="-6" x2="10" y2="10" stroke="currentColor" strokeWidth="1" />
+      <line x1="10" y1="10" x2="20" y2="10" stroke="currentColor" strokeWidth="1" />
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/sideMenuTypes.ts b/apps/webapp/app/components/navigation/sideMenuTypes.ts
new file mode 100644
index 000000000..64afdf58e
--- /dev/null
+++ b/apps/webapp/app/components/navigation/sideMenuTypes.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+// Valid section IDs that can have their collapsed state toggled
+export const SideMenuSectionIdSchema = z.enum(["manage", "metrics"]);
+
+// Inferred type from the schema
+export type SideMenuSectionId = z.infer<typeof SideMenuSectionIdSchema>;
diff --git a/apps/webapp/app/components/navigation/useReorderableList.ts b/apps/webapp/app/components/navigation/useReorderableList.ts
new file mode 100644
index 000000000..b73a054ae
--- /dev/null
+++ b/apps/webapp/app/components/navigation/useReorderableList.ts
@@ -0,0 +1,129 @@
+import { useFetcher } from "@remix-run/react";
+import { type Ref, useCallback, useEffect, useMemo, useState } from "react";
+import { type Layout, useContainerWidth } from "react-grid-layout";
+
+/**
+ * Generic hook for managing a reorderable list in the side menu.
+ *
+ * Handles order state, sorting, grid layout, drag callbacks, and persistence
+ * via the `/resources/preferences/sidemenu` resource route.
+ *
+ * @param organizationId - Organization ID for scoping the persisted order
+ * @param listId - Identifier for this list (e.g. "customDashboards")
+ * @param items - The items to reorder
+ * @param itemKey - Extract a stable string key from each item
+ * @param initialOrder - Initial order from stored preferences (if any)
+ * @param isImpersonating - Skip persistence when impersonating
+ */
+export function useReorderableList<T>({
+  organizationId,
+  listId,
+  items,
+  itemKey,
+  initialOrder,
+  isImpersonating,
+}: {
+  organizationId: string;
+  listId: string;
+  items: T[];
+  itemKey: (item: T) => string;
+  initialOrder: string[] | undefined;
+  isImpersonating: boolean;
+}) {
+  const orderFetcher = useFetcher();
+
+  const [order, setOrder] = useState<string[]>(
+    () => initialOrder ?? items.map(itemKey)
+  );
+
+  // Sync order when organizationId changes (component may not remount)
+  useEffect(() => {
+    setOrder(initialOrder ?? items.map(itemKey));
+  }, [organizationId]);
+
+  // Sort items by stored order, new items go to end
+  const orderedItems = useMemo(() => {
+    const orderMap = new Map(order.map((id, i) => [id, i]));
+    return [...items].sort((a, b) => {
+      const aIdx = orderMap.get(itemKey(a)) ?? Infinity;
+      const bIdx = orderMap.get(itemKey(b)) ?? Infinity;
+      return aIdx - bIdx;
+    });
+  }, [items, order, itemKey]);
+
+  // Layout for ReactGridLayout (1-column vertical list, each item h=1 row)
+  const layout = useMemo(
+    () =>
+      orderedItems.map((item, i) => ({
+        i: itemKey(item),
+        x: 0,
+        y: i,
+        w: 1,
+        h: 1,
+      })),
+    [orderedItems, itemKey]
+  );
+
+  // Width measurement for ReactGridLayout
+  const {
+    width: gridWidth,
+    containerRef,
+    mounted: gridMounted,
+  } = useContainerWidth({ initialWidth: 216 });
+
+  const canReorder = orderedItems.length >= 2;
+
+  // Track layout during drag for real-time visual updates
+  const [dragLayout, setDragLayout] = useState<Layout | null>(null);
+
+  const handleDrag = useCallback((layout: Layout) => {
+    setDragLayout(layout);
+  }, []);
+
+  // Handle drag stop - extract new order from layout y-positions
+  const handleDragStop = useCallback(
+    (layout: Layout) => {
+      setDragLayout(null);
+      const sorted = [...layout].sort((a, b) => a.y - b.y);
+      const newOrder = sorted.map((item) => item.i);
+      if (JSON.stringify(newOrder) === JSON.stringify(order)) return;
+      setOrder(newOrder);
+      // Persist immediately
+      if (!isImpersonating) {
+        const formData = new FormData();
+        formData.append("organizationId", organizationId);
+        formData.append("listId", listId);
+        formData.append("itemOrder", JSON.stringify(newOrder));
+        orderFetcher.submit(formData, {
+          method: "POST",
+          action: "/resources/preferences/sidemenu",
+        });
+      }
+    },
+    [order, organizationId, listId, isImpersonating, orderFetcher]
+  );
+
+  // Compute which item is visually last (during drag or at rest)
+  const getIsLast = useCallback(
+    (key: string, index: number) => {
+      if (dragLayout) {
+        const maxY = Math.max(...dragLayout.map((l) => l.y));
+        return dragLayout.find((l) => l.i === key)?.y === maxY;
+      }
+      return index === orderedItems.length - 1;
+    },
+    [dragLayout, orderedItems.length]
+  );
+
+  return {
+    orderedItems,
+    layout,
+    containerRef: containerRef as Ref<HTMLDivElement>,
+    gridWidth,
+    gridMounted,
+    canReorder,
+    handleDrag,
+    handleDragStop,
+    getIsLast,
+  };
+}
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
index f540c4f35..a7a27f410 100644
--- a/apps/webapp/app/components/primitives/AppliedFilter.tsx
+++ b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -27,6 +27,7 @@ type AppliedFilterProps = {
   onRemove?: () => void;
   variant?: Variant;
   className?: string;
+  valueClassName?: string;
 };
 
 export function AppliedFilter({
@@ -37,6 +38,7 @@ export function AppliedFilter({
   onRemove,
   variant = "secondary/small",
   className,
+  valueClassName,
 }: AppliedFilterProps) {
   const variantClassName = variants[variant];
   return (
@@ -48,14 +50,18 @@ export function AppliedFilter({
         className
       )}
     >
-      <div className={cn("flex items-start leading-4", label === undefined ? "gap-1.5" : "gap-0.5")}>
+      <div
+        className={cn("flex items-start leading-4", label === undefined ? "gap-1.5" : "gap-0.5")}
+      >
         <div className="-mt-[0.5px] flex items-center gap-1">
           {icon}
-          {label && <div className="text-text-bright">
-            <span>{label}</span>:
-          </div>}
+          {label && (
+            <div className="text-text-bright">
+              <span>{label}</span>:
+            </div>
+          )}
         </div>
-        <div className="text-text-dimmed">
+        <div className={cn("text-text-dimmed", valueClassName)}>
           <div>{value}</div>
         </div>
       </div>
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index bc3943e82..737f37bcd 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -190,7 +190,8 @@ const ClientTabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "ring-offset-background focus-visible:ring-ring mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      className
+      className,
+      "data-[state=inactive]:hidden"
     )}
     {...props}
   />
diff --git a/apps/webapp/app/components/primitives/FormButtons.tsx b/apps/webapp/app/components/primitives/FormButtons.tsx
index f3e4d93e8..ab4e07df4 100644
--- a/apps/webapp/app/components/primitives/FormButtons.tsx
+++ b/apps/webapp/app/components/primitives/FormButtons.tsx
@@ -7,7 +7,7 @@ export function FormButtons({
   className,
 }: {
   cancelButton?: React.ReactNode;
-  confirmButton: React.ReactNode;
+  confirmButton?: React.ReactNode;
   defaultAction?: { name: string; value: string; disabled?: boolean };
   className?: string;
 }) {
@@ -29,7 +29,7 @@ export function FormButtons({
           aria-hidden="true"
         />
       )}
-      {cancelButton ? cancelButton : <div />} {confirmButton}
+      {cancelButton ? cancelButton : <div />} {confirmButton ?? null}
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
index ee64ac4fc..52b4ff1da 100644
--- a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
+++ b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
@@ -1,13 +1,15 @@
 import { AnimatePresence, useAnimate, usePresence } from "framer-motion";
 import { useEffect } from "react";
+import { cn } from "~/utils/cn";
 
 type LoadingBarDividerProps = {
   isLoading: boolean;
+  className?: string;
 };
 
-export function LoadingBarDivider({ isLoading }: LoadingBarDividerProps) {
+export function LoadingBarDivider({ isLoading, className }: LoadingBarDividerProps) {
   return (
-    <div className="relative h-px w-full overflow-hidden bg-grid-bright">
+    <div className={cn("relative h-px w-full overflow-hidden bg-grid-bright", className)}>
       <AnimationDivider isLoading={isLoading} />
     </div>
   );
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 864bdce17..63ba99f6d 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -243,20 +243,41 @@ function PopoverArrowTrigger({
   );
 }
 
+const popoverVerticalEllipseVariants = {
+  minimal: {
+    trigger:
+      "size-6 rounded-[3px] text-text-dimmed hover:bg-tertiary hover:text-text-bright",
+    icon: "size-5",
+  },
+  secondary: {
+    trigger:
+      "size-6 rounded border border-charcoal-600 bg-secondary text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550",
+    icon: "size-4",
+  },
+} as const;
+
+type PopoverVerticalEllipseVariant = keyof typeof popoverVerticalEllipseVariants;
+
 function PopoverVerticalEllipseTrigger({
   isOpen,
+  variant = "minimal",
   className,
   ...props
-}: { isOpen?: boolean } & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
+}: {
+  isOpen?: boolean;
+  variant?: PopoverVerticalEllipseVariant;
+} & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
+  const styles = popoverVerticalEllipseVariants[variant];
   return (
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded-[3px] p-0.5 text-text-dimmed transition focus-custom hover:bg-tertiary hover:text-text-bright",
+        "group flex items-center justify-center transition focus-custom",
+        styles.trigger,
         className
       )}
     >
-      <EllipsisVerticalIcon className={cn("size-5 transition group-hover:text-text-bright")} />
+      <EllipsisVerticalIcon className={cn(styles.icon, "transition")} />
     </PopoverTrigger>
   );
 }
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index 830cd0118..df0bd88e0 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -33,7 +33,7 @@ const ResizableHandle = ({
       // 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:left-0 data-[handle-orientation=vertical]:after:top-1/2",
       "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
@@ -42,9 +42,9 @@ const ResizableHandle = ({
     {...props}
   >
     {/* 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" />
+    <div className="absolute left-[0.0625rem] top-0 z-20 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-indigo-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" />
+    <div className="absolute left-0 top-[0.0625rem] z-20 hidden h-px w-full bg-grid-bright transition group-hover:top-0 group-hover:h-0.75 group-hover:bg-indigo-500 group-data-[handle-orientation=vertical]:block" />
     {withHandle && (
       <>
         {/* Horizontal orientation dots (vertical arrangement) */}
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 9c9467389..c03492abc 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -87,7 +87,7 @@ function SimpleTooltip({
         <TooltipTrigger
           type="button"
           tabIndex={-1}
-          className={cn("h-fit", buttonClassName)}
+          className={cn(!asChild && "h-fit", buttonClassName)}
           style={buttonStyle}
           asChild={asChild}
         >
diff --git a/apps/webapp/app/components/primitives/charts/BigNumber.tsx b/apps/webapp/app/components/primitives/charts/BigNumber.tsx
deleted file mode 100644
index ab12e9326..000000000
--- a/apps/webapp/app/components/primitives/charts/BigNumber.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { cn } from "~/utils/cn";
-import { AnimatedNumber } from "../AnimatedNumber";
-import { Spinner } from "../Spinner";
-
-interface BigNumberProps {
-  animate?: boolean;
-  loading?: boolean;
-  value?: number;
-  valueClassName?: string;
-  defaultValue?: number;
-  suffix?: string;
-  suffixClassName?: string;
-}
-
-export function BigNumber({
-  value,
-  defaultValue,
-  valueClassName,
-  suffix,
-  suffixClassName,
-  animate = false,
-  loading = false,
-}: BigNumberProps) {
-  const v = value ?? defaultValue;
-  return (
-    <div
-      className={cn(
-        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
-        valueClassName
-      )}
-    >
-      {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
-      ) : v !== undefined ? (
-        <div className="flex items-baseline gap-1">
-          {animate ? <AnimatedNumber value={v} /> : v}
-          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
-        </div>
-      ) : (
-        "–"
-      )}
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
new file mode 100644
index 000000000..f9d428041
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
@@ -0,0 +1,171 @@
+import type { OutputColumnMetadata } from "@internal/tsql";
+import { useMemo } from "react";
+import type {
+  BigNumberAggregationType,
+  BigNumberConfiguration,
+} from "~/components/metrics/QueryWidget";
+import { AnimatedNumber } from "../AnimatedNumber";
+import { Spinner } from "../Spinner";
+import { Paragraph } from "../Paragraph";
+
+interface BigNumberCardProps {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+  config: BigNumberConfiguration;
+  isLoading?: boolean;
+}
+
+/**
+ * Extracts numeric values from a specific column across all rows,
+ * optionally sorting them first.
+ */
+function extractColumnValues(
+  rows: Record<string, unknown>[],
+  column: string,
+  sortDirection?: "asc" | "desc"
+): number[] {
+  const values: number[] = [];
+  const sortedRows = sortDirection
+    ? [...rows].sort((a, b) => {
+        const aVal = toNumber(a[column]);
+        const bVal = toNumber(b[column]);
+        return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+      })
+    : rows;
+
+  for (const row of sortedRows) {
+    const val = row[column];
+    if (typeof val === "number") {
+      values.push(val);
+    } else if (typeof val === "string") {
+      const parsed = parseFloat(val);
+      if (!isNaN(parsed)) {
+        values.push(parsed);
+      }
+    }
+  }
+  return values;
+}
+
+function toNumber(value: unknown): number {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+}
+
+/**
+ * Aggregate an array of numbers using the specified aggregation function
+ */
+function aggregateValues(values: number[], aggregation: BigNumberAggregationType): number {
+  if (values.length === 0) return 0;
+  switch (aggregation) {
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "avg":
+      return values.reduce((a, b) => a + b, 0) / values.length;
+    case "count":
+      return values.length;
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+    case "first":
+      return values[0];
+    case "last":
+      return values[values.length - 1];
+  }
+}
+
+/**
+ * Computes the display value and unit suffix for abbreviated display.
+ * Returns the divided-down number (e.g. 1.5 for 1500) and the suffix (e.g. "K"),
+ * along with the appropriate decimal places for formatting.
+ */
+function abbreviateValue(value: number): {
+  displayValue: number;
+  unitSuffix?: string;
+  decimalPlaces: number;
+} {
+  if (Math.abs(value) >= 1_000_000_000) {
+    const v = value / 1_000_000_000;
+    return { displayValue: v, unitSuffix: "B", decimalPlaces: v % 1 === 0 ? 0 : 1 };
+  }
+  if (Math.abs(value) >= 1_000_000) {
+    const v = value / 1_000_000;
+    return { displayValue: v, unitSuffix: "M", decimalPlaces: v % 1 === 0 ? 0 : 1 };
+  }
+  if (Math.abs(value) >= 1_000) {
+    const v = value / 1_000;
+    return { displayValue: v, unitSuffix: "K", decimalPlaces: v % 1 === 0 ? 0 : 1 };
+  }
+  return { displayValue: value, decimalPlaces: getDecimalPlaces(value) };
+}
+
+/**
+ * Determines decimal places for plain (non-abbreviated) display.
+ */
+function getDecimalPlaces(value: number): number {
+  if (Number.isInteger(value)) return 0;
+  const abs = Math.abs(value);
+  if (abs >= 100) return 0;
+  if (abs >= 10) return 1;
+  if (abs >= 1) return 2;
+  if (abs >= 0.01) return 3;
+  return 4;
+}
+
+export function BigNumberCard({ rows, columns, config, isLoading = false }: BigNumberCardProps) {
+  const { column, aggregation, sortDirection, abbreviate = true, prefix, suffix } = config;
+
+  const result = useMemo(() => {
+    if (rows.length === 0) return null;
+
+    const values = extractColumnValues(rows, column, sortDirection);
+    if (values.length === 0) return null;
+
+    return aggregateValues(values, aggregation);
+  }, [rows, column, aggregation, sortDirection]);
+
+  if (isLoading) {
+    return (
+      <div className="grid h-full place-items-center [container-type:size]">
+        <Spinner className="size-6" />
+      </div>
+    );
+  }
+
+  if (result === null) {
+    return (
+      <div className="grid h-full place-items-center [container-type:size]">
+        <Paragraph variant="small" className="text-text-dimmed">
+          No data to display
+        </Paragraph>
+      </div>
+    );
+  }
+
+  const { displayValue, unitSuffix, decimalPlaces } = abbreviate
+    ? abbreviateValue(result)
+    : { displayValue: result, unitSuffix: undefined, decimalPlaces: getDecimalPlaces(result) };
+
+  return (
+    <div className="h-full w-full [container-type:size]">
+      <div className="grid h-full w-full place-items-center">
+        <div className="flex items-baseline gap-[0.15em] whitespace-nowrap font-normal tabular-nums leading-none text-text-bright text-[clamp(24px,12cqw,96px)]">
+          {prefix && <span>{prefix}</span>}
+          <AnimatedNumber value={displayValue} decimalPlaces={decimalPlaces} />
+          {(unitSuffix || suffix) && (
+            <span className="text-[0.4em] text-text-dimmed">
+              {unitSuffix}
+              {unitSuffix && suffix ? " " : ""}
+              {suffix}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index c618b51d0..9249832b5 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -15,9 +15,22 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   );
 };
 
-const CardHeader = ({ children }: { children: ReactNode }) => {
+const CardHeader = ({
+  children,
+  draggable,
+}: {
+  children: ReactNode;
+  draggable?: boolean;
+}) => {
   return (
-    <Header3 className="mb-3 flex items-center justify-between gap-2 px-3">{children}</Header3>
+    <Header3
+      className={cn(
+        "drag-handle mb-3 flex items-center justify-between gap-2 px-3",
+        draggable && "cursor-grab active:cursor-grabbing"
+      )}
+    >
+      {children}
+    </Header3>
   );
 };
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index d71b72287..a34ce6675 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -162,26 +162,27 @@ export function ChartBarRenderer({
         domain={["auto", (dataMax: number) => dataMax * 1.15]}
         {...yAxisPropsProp}
       />
-      {/* Hide tooltip when legend is shown - legend displays hover data instead */}
-      {!showLegend && (
-        <ChartTooltip
-          cursor={{ fill: "#2C3034" }}
-          content={
-            tooltipLabelFormatter ? (
-              <ChartTooltipContent />
-            ) : (
-              <ZoomTooltip
-                isSelecting={zoom?.isSelecting}
-                refAreaLeft={zoom?.refAreaLeft}
-                refAreaRight={zoom?.refAreaRight}
-                invalidSelection={zoom?.invalidSelection}
-              />
-            )
-          }
-          labelFormatter={tooltipLabelFormatter}
-          allowEscapeViewBox={{ x: false, y: true }}
-        />
-      )}
+      {/* When legend is shown below the chart, render tooltip with cursor only (no content popup).
+          Otherwise render the full tooltip with zoom instructions. */}
+      <ChartTooltip
+        cursor={{ fill: "rgba(255, 255, 255, 0.06)" }}
+        content={
+          showLegend ? (
+            () => null
+          ) : tooltipLabelFormatter ? (
+            <ChartTooltipContent />
+          ) : (
+            <ZoomTooltip
+              isSelecting={zoom?.isSelecting}
+              refAreaLeft={zoom?.refAreaLeft}
+              refAreaRight={zoom?.refAreaRight}
+              invalidSelection={zoom?.invalidSelection}
+            />
+          )
+        }
+        labelFormatter={tooltipLabelFormatter}
+        allowEscapeViewBox={{ x: false, y: true }}
+      />
 
       {/* Zoom selection area - rendered before bars to appear behind them */}
       {enableZoom && zoom?.refAreaLeft !== null && zoom?.refAreaRight !== null && (
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 1ab1bb855..8d525aa1a 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -1,8 +1,6 @@
 import React, { useMemo } from "react";
 import { useChartContext } from "./ChartContext";
 import { useSeriesTotal } from "./ChartRoot";
-import { Button } from "../Buttons";
-import { Paragraph } from "../Paragraph";
 import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
 
@@ -132,11 +130,7 @@ export function ChartLegendCompound({
 
   return (
     <div
-      className={cn(
-        "flex flex-col pt-4 text-sm",
-        scrollable && "max-h-[50%] min-h-0",
-        className
-      )}
+      className={cn("flex flex-col pt-4 text-sm", scrollable && "max-h-[50%] min-h-0", className)}
     >
       {/* Total row */}
       <div
@@ -155,7 +149,13 @@ export function ChartLegendCompound({
       <div className="mx-2 my-1 shrink-0 border-t border-charcoal-750" />
 
       {/* Legend items - scrollable when scrollable prop is true */}
-      <div className={cn("flex flex-col", scrollable && "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600")}>
+      <div
+        className={cn(
+          "flex flex-col",
+          scrollable &&
+            "min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        )}
+      >
         {legendItems.visible.map((item) => {
           const total = currentData[item.dataKey] ?? 0;
           const isActive = highlight.activeBarKey === item.dataKey;
@@ -211,7 +211,10 @@ export function ChartLegendCompound({
               remainingCount={legendItems.remaining - 1}
             />
           ) : (
-            <ViewAllDataRow remainingCount={legendItems.remaining} onViewAll={onViewAllLegendItems} />
+            <ViewAllDataRow
+              remainingCount={legendItems.remaining}
+              onViewAll={onViewAllLegendItems}
+            />
           ))}
       </div>
     </div>
@@ -225,23 +228,26 @@ type ViewAllDataRowProps = {
 
 function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
   return (
-    <Button
-      variant="minimal/small"
-      fullWidth
-      iconSpacing="justify-between"
-      className="px-2 py-1"
+    <div
+      className="relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-charcoal-850"
       onClick={onViewAll}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onViewAll?.();
+        }
+      }}
     >
-      <div className="flex items-center gap-1.5 text-text-dimmed">
-        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
-        <Paragraph variant="extra-small" className="tabular-nums">
-          {remainingCount} more…
-        </Paragraph>
+      <div className="relative flex w-full items-center justify-between gap-3">
+        <div className="flex items-center gap-1.5">
+          <div className="w-1 shrink-0 self-stretch rounded-[2px] border border-charcoal-600" />
+          <span className="text-text-dimmed tabular-nums">{remainingCount} more…</span>
+        </div>
+        <span className="self-start text-indigo-500">View all</span>
       </div>
-      <Paragraph variant="extra-small" className="text-indigo-500">
-        View all
-      </Paragraph>
-    </Button>
+    </div>
   );
 }
 
@@ -261,11 +267,11 @@ function HoveredHiddenItemRow({ item, value, remainingCount }: HoveredHiddenItem
           style={{ backgroundColor: item.color }}
         />
       )}
-      <div className="relative flex w-full items-center justify-between gap-2">
+      <div className="relative flex w-full items-center justify-between gap-3">
         <div className="flex items-center gap-1.5">
           {item.color && (
             <div
-              className="h-3 w-1 shrink-0 rounded-[2px]"
+              className="w-1 shrink-0 self-stretch rounded-[2px]"
               style={{ backgroundColor: item.color }}
             />
           )}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 9148727ca..50803fd5c 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -155,14 +155,12 @@ export function ChartLineRenderer({
         <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
         <XAxis {...xAxisConfig} />
         <YAxis {...yAxisConfig} />
-        {/* Hide tooltip when legend is shown - legend displays hover data instead */}
-        {!showLegend && (
-          <ChartTooltip
-            cursor={false}
-            content={<ChartTooltipContent indicator="line" />}
-            labelFormatter={tooltipLabelFormatter}
-          />
-        )}
+        {/* When legend is shown below, render tooltip with cursor only (no content popup) */}
+        <ChartTooltip
+          cursor={{ stroke: "rgba(255, 255, 255, 0.1)", strokeWidth: 1 }}
+          content={showLegend ? () => null : <ChartTooltipContent indicator="line" />}
+          labelFormatter={tooltipLabelFormatter}
+        />
         {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
         {dataKeys.map((key) => (
           <Area
@@ -205,14 +203,12 @@ export function ChartLineRenderer({
       <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
       <XAxis {...xAxisConfig} />
       <YAxis {...yAxisConfig} />
-      {/* Hide tooltip when legend is shown - legend displays hover data instead */}
-      {!showLegend && (
-        <ChartTooltip
-          cursor={false}
-          content={<ChartTooltipContent />}
-          labelFormatter={tooltipLabelFormatter}
-        />
-      )}
+      {/* When legend is shown below, render tooltip with cursor only (no content popup) */}
+      <ChartTooltip
+        cursor={{ stroke: "rgba(255, 255, 255, 0.1)", strokeWidth: 1 }}
+        content={showLegend ? () => null : <ChartTooltipContent />}
+        labelFormatter={tooltipLabelFormatter}
+      />
       {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
       {dataKeys.map((key) => (
         <Line
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
new file mode 100644
index 000000000..321f4a449
--- /dev/null
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -0,0 +1,1457 @@
+import {
+  ArrowDownTrayIcon,
+  BookmarkIcon,
+  CalendarIcon,
+  ClipboardIcon,
+  PencilIcon,
+  PencilSquareIcon,
+} from "@heroicons/react/20/solid";
+import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { useFetcher } from "@remix-run/react";
+import { IconChartHistogram } from "@tabler/icons-react";
+import { formatDurationNanoseconds } from "@trigger.dev/core/v3";
+import { Clipboard } from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { flushSync } from "react-dom";
+import { useTypedFetcher } from "remix-typedjson";
+import simplur from "simplur";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import { ChartConfigPanel, defaultChartConfig } from "~/components/code/ChartConfigPanel";
+import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import {
+  QueryWidget,
+  type BigNumberConfiguration,
+  type ChartConfiguration,
+  type QueryWidgetConfig,
+  type QueryWidgetData,
+} from "~/components/metrics/QueryWidget";
+import { SaveToDashboardDialog } from "~/components/metrics/SaveToDashboardDialog";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
+import {
+  ClientTabs,
+  ClientTabsContent,
+  ClientTabsList,
+  ClientTabsTrigger,
+} from "~/components/primitives/ClientTabs";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "~/components/primitives/Dialog";
+import { Header3 } from "~/components/primitives/Headers";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import {
+  Popover,
+  PopoverArrowTrigger,
+  PopoverContent,
+  PopoverMenuItem,
+} from "~/components/primitives/Popover";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
+import { Select, SelectItem } from "~/components/primitives/Select";
+import { Spinner } from "~/components/primitives/Spinner";
+import { Switch } from "~/components/primitives/Switch";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { TimeFilter } from "~/components/runs/v3/SharedFilters";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
+import { QueryHelpSidebar } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar";
+import { QueryHistoryPopover } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover";
+import type { AITimeFilter } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/types";
+import type { action as titleAction } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-title";
+import type { QueryScope } from "~/services/queryService.server";
+import { downloadFile, rowsToCSV, rowsToJSON } from "~/utils/dataExport";
+import { organizationBillingPath } from "~/utils/pathBuilder";
+import { querySchemas } from "~/v3/querySchemas";
+
+/** Convert a Date or ISO string to ISO string format */
+function toISOString(value: Date | string): string {
+  if (typeof value === "string") {
+    return value;
+  }
+  return value.toISOString();
+}
+
+const scopeOptions = [
+  { value: "environment", label: "Environment" },
+  { value: "project", label: "Project" },
+  { value: "organization", label: "Organization" },
+] as const;
+
+// Type for the query action response
+type QueryActionResponse = {
+  error: string | null;
+  rows: Record<string, unknown>[] | null;
+  columns: OutputColumnMetadata[] | null;
+  stats: { elapsed_ns: string } | null;
+  hiddenColumns: string[] | null;
+  reachedMaxRows: boolean | null;
+  explainOutput: string | null;
+  generatedSql: string | null;
+  queryId?: string | null;
+  periodClipped: number | null;
+  maxQueryPeriod?: number;
+};
+
+export type QueryEditorMode =
+  | { type: "standalone" }
+  | { type: "dashboard-add"; dashboardId: string; dashboardName: string }
+  | {
+      type: "dashboard-edit";
+      dashboardId: string;
+      dashboardName: string;
+      widgetId: string;
+      widgetName: string;
+    };
+
+/** Data passed to the save render prop */
+export type QueryEditorSaveData = {
+  title: string;
+  query: string;
+  config: QueryWidgetConfig;
+};
+
+export type QueryEditorProps = {
+  // Default values - used to initialize state
+  defaultQuery: string;
+  defaultScope: QueryScope;
+  defaultPeriod: string;
+  defaultTimeFilter?: { period?: string; from?: string; to?: string };
+  defaultResultsView?: "table" | "graph" | "bignumber";
+  defaultChartConfig?: ChartConfiguration;
+  defaultBigNumberConfig?: BigNumberConfiguration;
+  /** Initial result data to display (e.g., when editing an existing widget) */
+  defaultData?: QueryWidgetData;
+
+  // Other required data
+  history: QueryHistoryItem[];
+  isAdmin: boolean;
+  maxRows: number;
+
+  // The URL to post query execution requests to
+  queryActionUrl: string;
+
+  // Mode determines NavBar and save behavior
+  mode: QueryEditorMode;
+
+  // Max period days (from plan)
+  maxPeriodDays?: number;
+
+  // Render prop for save functionality - receives current data, returns ReactNode
+  save?: (data: QueryEditorSaveData) => ReactNode;
+  onClose?: () => void;
+};
+
+/** Handle for imperatively setting the query from outside */
+interface QueryEditorFormHandle {
+  setQuery: (query: string) => void;
+  setScope: (scope: QueryScope) => void;
+  getQuery: () => string;
+  setTimeFilter: (filter: { period?: string; from?: string; to?: string }) => void;
+}
+
+/** Self-contained query editor with form - isolates query state from parent */
+const QueryEditorForm = forwardRef<
+  QueryEditorFormHandle,
+  {
+    defaultPeriod: string;
+    defaultQuery: string;
+    defaultScope: QueryScope;
+    defaultTimeFilter?: { period?: string; from?: string; to?: string };
+    history: QueryHistoryItem[];
+    fetcher: ReturnType<typeof useTypedFetcher<QueryActionResponse>>;
+    isAdmin: boolean;
+    queryActionUrl: string;
+    maxPeriodDays?: number;
+    onQuerySubmit?: () => void;
+    onHistorySelected?: (item: QueryHistoryItem) => void;
+  }
+>(function QueryEditorForm(
+  {
+    defaultPeriod,
+    defaultQuery,
+    defaultScope,
+    defaultTimeFilter,
+    history,
+    fetcher,
+    isAdmin,
+    queryActionUrl,
+    maxPeriodDays,
+    onQuerySubmit,
+    onHistorySelected,
+  },
+  ref
+) {
+  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
+  const [query, setQuery] = useState(defaultQuery);
+  const [scope, setScope] = useState<QueryScope>(defaultScope);
+  const formRef = useRef<HTMLFormElement>(null);
+  const prevFetcherState = useRef(fetcher.state);
+
+  // Notify parent when query is submitted (for title generation)
+  useEffect(() => {
+    if (prevFetcherState.current !== "submitting" && fetcher.state === "submitting") {
+      onQuerySubmit?.();
+    }
+    prevFetcherState.current = fetcher.state;
+  }, [fetcher.state, onQuerySubmit]);
+
+  // Get time filter values - initialize from props (which may come from history)
+  const [period, setPeriod] = useState<string | undefined>(defaultTimeFilter?.period);
+  const [from, setFrom] = useState<string | undefined>(defaultTimeFilter?.from);
+  const [to, setTo] = useState<string | undefined>(defaultTimeFilter?.to);
+
+  // Check if the query contains triggered_at in a WHERE clause
+  // This disables the time filter UI since the user is filtering in their query
+  const queryHasTriggeredAt = /\bWHERE\b[\s\S]*\btriggered_at\b/i.test(query);
+
+  // Expose methods to parent for external query setting (history, AI, examples)
+  useImperativeHandle(
+    ref,
+    () => ({
+      setQuery,
+      setScope,
+      getQuery: () => query,
+      setTimeFilter: (filter: { period?: string; from?: string; to?: string }) => {
+        setPeriod(filter.period);
+        setFrom(filter.from);
+        setTo(filter.to);
+      },
+    }),
+    [query]
+  );
+
+  const handleHistorySelected = useCallback(
+    (item: QueryHistoryItem) => {
+      setQuery(item.query);
+      setScope(item.scope);
+      // Apply time filter from history item
+      // Note: filterFrom/filterTo might be Date objects or ISO strings depending on serialization
+      setPeriod(item.filterPeriod ?? undefined);
+      setFrom(item.filterFrom ? toISOString(item.filterFrom) : undefined);
+      setTo(item.filterTo ? toISOString(item.filterTo) : undefined);
+      // Notify parent about history selection (for title)
+      onHistorySelected?.(item);
+    },
+    [onHistorySelected]
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-2 bg-charcoal-900 pb-2">
+      <TSQLEditor
+        defaultValue={query}
+        onChange={setQuery}
+        schema={querySchemas}
+        linterEnabled={true}
+        showCopyButton={true}
+        showClearButton={true}
+        className="min-h-0 flex-1"
+      />
+      <fetcher.Form
+        ref={formRef}
+        method="post"
+        action={queryActionUrl}
+        className="flex items-center justify-between gap-2 px-2"
+      >
+        <input type="hidden" name="query" value={query} />
+        <input type="hidden" name="scope" value={scope} />
+        {/* Pass time filter values to action */}
+        <input type="hidden" name="period" value={period ?? ""} />
+        <input type="hidden" name="from" value={from ?? ""} />
+        <input type="hidden" name="to" value={to ?? ""} />
+        <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
+        <div className="flex items-center gap-1">
+          {isAdmin && (
+            <Button
+              type="submit"
+              name="explain"
+              value="true"
+              variant="minimal/small"
+              disabled={isLoading || !query.trim()}
+            >
+              Explain
+            </Button>
+          )}
+          <Select
+            value={scope}
+            setValue={(value) => setScope(value as QueryScope)}
+            variant="secondary/small"
+            dropdownIcon={true}
+            items={[...scopeOptions]}
+            text={(value) => {
+              return <ScopeItem scope={value as QueryScope} />;
+            }}
+          >
+            {(items) =>
+              items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  <ScopeItem scope={item.value as QueryScope} />
+                </SelectItem>
+              ))
+            }
+          </Select>
+          {queryHasTriggeredAt ? (
+            <SimpleTooltip
+              asChild
+              button={
+                <span>
+                  <Button
+                    variant="secondary/small"
+                    disabled={true}
+                    type="button"
+                    LeadingIcon={CalendarIcon}
+                    leadingIconClassName="text-text-dimmed/70"
+                  >
+                    Set in query
+                  </Button>
+                </span>
+              }
+              className="max-w-48"
+              content="Your query includes a WHERE clause with triggered_at so this filter is disabled."
+            />
+          ) : (
+            <TimeFilter
+              defaultPeriod={defaultPeriod}
+              labelName="Triggered"
+              hideLabel
+              valueClassName="text-text-bright"
+              period={period}
+              from={from}
+              to={to}
+              applyShortcut={{ key: "enter", enabledOnInputElements: true }}
+              onValueChange={(values) => {
+                flushSync(() => {
+                  setPeriod(values.period);
+                  setFrom(values.from);
+                  setTo(values.to);
+                });
+                if (formRef.current) {
+                  fetcher.submit(formRef.current);
+                }
+              }}
+              maxPeriodDays={maxPeriodDays}
+            />
+          )}
+          <Button
+            type="submit"
+            variant="primary/small"
+            disabled={isLoading || !query.trim()}
+            shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }}
+            LeadingIcon={isLoading ? <Spinner className="size-4" color="white" /> : undefined}
+          >
+            {isLoading ? "Querying..." : "Query"}
+          </Button>
+        </div>
+      </fetcher.Form>
+    </div>
+  );
+});
+
+export function QueryEditor({
+  defaultQuery,
+  defaultScope,
+  defaultPeriod,
+  defaultTimeFilter,
+  defaultResultsView = "table",
+  defaultChartConfig: initialChartConfig,
+  defaultBigNumberConfig: initialBigNumberConfig,
+  defaultData,
+  history,
+  isAdmin,
+  maxRows,
+  queryActionUrl,
+  mode,
+  maxPeriodDays,
+  save,
+  onClose,
+}: QueryEditorProps) {
+  const fetcher = useTypedFetcher<QueryActionResponse>();
+
+  // Use defaultData as initial results, then switch to fetcher data once a query is run
+  const fetcherResults = fetcher.data;
+  const results =
+    fetcherResults ??
+    (defaultData
+      ? {
+          error: null,
+          rows: defaultData.rows,
+          columns: defaultData.columns,
+          stats: null,
+          hiddenColumns: null,
+          reachedMaxRows: false,
+          explainOutput: null,
+          generatedSql: null,
+          queryId: null,
+          periodClipped: null,
+        }
+      : null);
+
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const editorRef = useRef<QueryEditorFormHandle>(null);
+  const [prettyFormatting, setPrettyFormatting] = useState(true);
+  const [resultsView, setResultsView] = useState<"table" | "graph" | "bignumber">(
+    defaultResultsView
+  );
+  const [chartConfig, setChartConfig] = useState<ChartConfiguration>(
+    initialChartConfig ?? defaultChartConfig
+  );
+  const [bigNumberConfig, setBigNumberConfig] = useState<BigNumberConfiguration>(
+    initialBigNumberConfig ?? { column: "", aggregation: "sum", abbreviate: true }
+  );
+  const [sidebarTab, setSidebarTab] = useState<string>("ai");
+  const [aiFixRequest, setAiFixRequest] = useState<{ prompt: string; key: number } | null>(null);
+
+  // Save to dashboard dialog state (only for standalone mode)
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+
+  // Title generation state
+  const titleFetcher = useFetcher<typeof titleAction>();
+  const isTitleLoading = titleFetcher.state !== "idle";
+  const generatedTitle = titleFetcher.data?.title;
+  const [historyTitle, setHistoryTitle] = useState<string | null>(
+    history.length > 0 ? history[0].title ?? null : null
+  );
+
+  // For edit mode, use the widget name as initial title
+  const initialTitle = mode.type === "dashboard-edit" ? mode.widgetName : null;
+  const [editModeTitle, setEditModeTitle] = useState<string | null>(initialTitle);
+
+  // User-set title (takes priority, and disables AI regeneration)
+  const [userTitle, setUserTitle] = useState<string | null>(null);
+
+  // Effective title: user title > edit mode title > history title > generated title
+  const queryTitle =
+    userTitle ??
+    (mode.type === "dashboard-edit"
+      ? editModeTitle ?? historyTitle ?? generatedTitle ?? null
+      : historyTitle ?? generatedTitle ?? null);
+
+  // Track if user has manually set a title (disables AI regeneration)
+  const hasUserTitle = userTitle !== null;
+
+  // Track whether we should generate a title for the current results
+  const [shouldGenerateTitle, setShouldGenerateTitle] = useState(false);
+
+  // Trigger title generation when query succeeds (only for new queries, not history, not if user set title)
+  useEffect(() => {
+    if (
+      results?.rows &&
+      !results.error &&
+      results.queryId &&
+      shouldGenerateTitle &&
+      !historyTitle &&
+      !hasUserTitle &&
+      titleFetcher.state === "idle"
+    ) {
+      const currentQuery = editorRef.current?.getQuery();
+      if (currentQuery) {
+        titleFetcher.submit(
+          { query: currentQuery, queryId: results.queryId },
+          {
+            method: "POST",
+            action: `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/query/ai-title`,
+            encType: "application/json",
+          }
+        );
+        setShouldGenerateTitle(false);
+      }
+    }
+  }, [
+    results,
+    shouldGenerateTitle,
+    historyTitle,
+    hasUserTitle,
+    titleFetcher,
+    organization.slug,
+    project.slug,
+    environment.slug,
+  ]);
+
+  const handleTryFixError = useCallback((errorMessage: string) => {
+    setSidebarTab("ai");
+    setAiFixRequest((prev) => ({
+      prompt: `Fix this query error: ${errorMessage}`,
+      key: (prev?.key ?? 0) + 1,
+    }));
+  }, []);
+
+  // Handle time filter changes from AI
+  const handleTimeFilterChange = useCallback((filter: AITimeFilter) => {
+    editorRef.current?.setTimeFilter({
+      period: filter.period,
+      from: filter.from,
+      to: filter.to,
+    });
+  }, []);
+
+  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
+
+  // Create a stable key from columns to detect schema changes
+  const columnsKey = results?.columns
+    ? results.columns.map((c) => `${c.name}:${c.type}`).join(",")
+    : "";
+
+  // Reset chart config only when column schema actually changes
+  // This allows re-running queries with different WHERE clauses without losing config
+  useEffect(() => {
+    if (columnsKey && !initialChartConfig) {
+      setChartConfig(defaultChartConfig);
+    }
+  }, [columnsKey, initialChartConfig]);
+
+  const handleChartConfigChange = useCallback((config: ChartConfiguration) => {
+    setChartConfig(config);
+  }, []);
+
+  // Handle query submission - prepare for title generation
+  const handleQuerySubmit = useCallback(() => {
+    setHistoryTitle(null); // Clear history title when running a new query
+    setEditModeTitle(null); // Clear edit mode title when running a new query
+    // Only enable title generation if user hasn't manually set a title
+    // userTitle persists across query edits once set
+    setShouldGenerateTitle(!hasUserTitle);
+  }, [hasUserTitle]);
+
+  // Handle history selection - use existing title if available
+  const handleHistorySelected = useCallback((item: QueryHistoryItem) => {
+    setHistoryTitle(item.title ?? null);
+    setEditModeTitle(null);
+    setUserTitle(null); // Clear user title when selecting from history
+    setShouldGenerateTitle(false); // Don't generate title for history items
+  }, []);
+
+  // Handle user renaming the title
+  const handleRenameTitle = useCallback((newTitle: string) => {
+    setUserTitle(newTitle);
+    // Clear other title sources since user has explicitly set the title
+    setHistoryTitle(null);
+    setEditModeTitle(null);
+  }, []);
+
+  // Compute current save data for the save render prop
+  const currentQuery = editorRef.current?.getQuery() ?? "";
+  const saveData: QueryEditorSaveData = {
+    title: queryTitle ?? "Untitled Query",
+    query: currentQuery,
+    config:
+      resultsView === "table"
+        ? { type: "table", prettyFormatting, sorting: [] }
+        : resultsView === "bignumber"
+        ? { type: "bignumber", ...bigNumberConfig }
+        : { type: "chart", ...chartConfig },
+  };
+
+  // Render NavBar based on mode
+  const renderNavBar = () => {
+    switch (mode.type) {
+      case "standalone":
+        return (
+          <NavBar>
+            <PageTitle title="Query" />
+          </NavBar>
+        );
+      case "dashboard-add":
+        return (
+          <NavBar>
+            <PageTitle title={`Add chart to ${mode.dashboardName}`} />
+            <PageAccessories>
+              <Button
+                variant="secondary/small"
+                onClick={onClose}
+                shortcut={{ key: "esc" }}
+                shortcutPosition="before-trailing-icon"
+                // className="pl-1"
+              >
+                Cancel
+              </Button>
+            </PageAccessories>
+          </NavBar>
+        );
+      case "dashboard-edit":
+        return (
+          <NavBar>
+            <PageTitle title={`Editing "${mode.widgetName}"`} />
+            <PageAccessories>
+              <Button
+                variant="secondary/small"
+                onClick={onClose}
+                shortcut={{ key: "esc" }}
+                shortcutPosition="before-trailing-icon"
+                // className="pl-1"
+              >
+                Cancel
+              </Button>
+            </PageAccessories>
+          </NavBar>
+        );
+    }
+  };
+
+  return (
+    <PageContainer>
+      {renderNavBar()}
+      <PageBody scrollable={false}>
+        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
+          <ResizablePanel id="query-main" className="h-full">
+            <ResizablePanelGroup orientation="vertical" className="h-full overflow-hidden">
+              {/* Query editor - isolated component to prevent re-renders */}
+              <ResizablePanel
+                id="query-editor"
+                min="100px"
+                default="300px"
+                className="overflow-hidden"
+              >
+                <QueryEditorForm
+                  ref={editorRef}
+                  defaultPeriod={defaultPeriod}
+                  defaultQuery={defaultQuery}
+                  defaultScope={defaultScope}
+                  defaultTimeFilter={defaultTimeFilter}
+                  history={history}
+                  fetcher={fetcher}
+                  isAdmin={isAdmin}
+                  queryActionUrl={queryActionUrl}
+                  maxPeriodDays={maxPeriodDays}
+                  onQuerySubmit={handleQuerySubmit}
+                  onHistorySelected={handleHistorySelected}
+                />
+              </ResizablePanel>
+              <ResizableHandle id="query-editor-handle" />
+              {/* Results */}
+              <ResizablePanel
+                id="query-results"
+                min="200px"
+                className="overflow-hidden bg-charcoal-800"
+              >
+                <ClientTabs
+                  value={resultsView}
+                  onValueChange={(v) => setResultsView(v as "table" | "graph" | "bignumber")}
+                  className="grid h-full max-h-full min-h-0 grid-rows-[auto_1fr] overflow-hidden"
+                >
+                  <ClientTabsList
+                    variant="underline"
+                    className="shrink-0 overflow-hidden pl-3 pr-1"
+                  >
+                    <ClientTabsTrigger value="table" variant="underline" layoutId="results-tabs">
+                      Table
+                    </ClientTabsTrigger>
+                    <ClientTabsTrigger
+                      value="graph"
+                      variant="underline"
+                      layoutId="results-tabs"
+                      disabled={!results?.rows || results.rows.length === 0}
+                    >
+                      Graph
+                    </ClientTabsTrigger>
+                    <ClientTabsTrigger
+                      value="bignumber"
+                      variant="underline"
+                      layoutId="results-tabs"
+                      disabled={!results?.rows || results.rows.length === 0}
+                    >
+                      Big number
+                    </ClientTabsTrigger>
+                    {results?.rows ? (
+                      <div className="flex flex-1 items-center justify-end gap-2 overflow-hidden border-b border-grid-dimmed pl-3">
+                        <div className="flex items-center gap-2 overflow-hidden truncate">
+                          {results.reachedMaxRows ? (
+                            <SimpleTooltip
+                              buttonClassName="text-warning text-xs"
+                              button={`${results.rows.length.toLocaleString()} Results`}
+                              content={`Results are limited to ${maxRows.toLocaleString()} rows maximum.`}
+                            />
+                          ) : (
+                            <span className="text-xs text-text-dimmed">
+                              {results.rows.length > 0
+                                ? `${results.rows.length.toLocaleString()} Results`
+                                : "Results"}
+                            </span>
+                          )}
+                          {results?.stats && (
+                            <span className="text-xs text-text-dimmed">
+                              {formatDurationNanoseconds(parseInt(results.stats.elapsed_ns, 10))}
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-1">
+                          {results?.rows && results?.columns && results.rows.length > 0 && (
+                            <ExportResultsButton rows={results.rows} columns={results.columns} />
+                          )}
+                          {resultsView === "table" && (
+                            <Switch
+                              variant="tertiary/small"
+                              label="Pretty formatting"
+                              checked={prettyFormatting}
+                              onCheckedChange={setPrettyFormatting}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    ) : null}
+                  </ClientTabsList>
+                  <ClientTabsContent value="table" className="m-0 min-h-0 overflow-y-hidden">
+                    {isLoading ? (
+                      <div className="flex items-center gap-2 p-4 text-sm text-text-dimmed">
+                        <Spinner className="size-4" />
+                        <span>Executing query…</span>
+                      </div>
+                    ) : results?.error ? (
+                      <div className="p-4">
+                        <pre className="whitespace-pre-wrap text-sm text-red-400">
+                          {results.error}
+                        </pre>
+                        <Button
+                          variant="tertiary/small"
+                          className="mt-3"
+                          LeadingIcon={AISparkleIcon}
+                          onClick={() => handleTryFixError(results.error!)}
+                        >
+                          Try fix error
+                        </Button>
+                      </div>
+                    ) : results?.explainOutput ? (
+                      <div className="flex h-full flex-col gap-4 overflow-auto p-3">
+                        {results.generatedSql && (
+                          <div>
+                            <Header3 className="mb-2">Generated ClickHouse SQL</Header3>
+                            <div className="overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
+                              <pre className="whitespace-pre font-mono text-xs text-text-bright">
+                                {results.generatedSql}
+                              </pre>
+                            </div>
+                          </div>
+                        )}
+                        <div className="flex min-h-0 flex-1 flex-col">
+                          <Header3 className="mb-2">Query Execution Plan</Header3>
+                          <div className="min-h-0 flex-1 overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
+                            <pre className="whitespace-pre font-mono text-xs text-text-bright">
+                              {results.explainOutput}
+                            </pre>
+                          </div>
+                        </div>
+                      </div>
+                    ) : results?.rows && results?.columns ? (
+                      <div
+                        className={`grid h-full max-h-full overflow-hidden bg-charcoal-900 ${
+                          hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
+                            ? "grid-rows-[auto_1fr]"
+                            : "grid-rows-[1fr]"
+                        }`}
+                      >
+                        <QueryResultsCallouts
+                          hiddenColumns={results.hiddenColumns}
+                          periodClipped={results.periodClipped}
+                          organizationSlug={organization.slug}
+                        />
+                        <div className="overflow-hidden p-2">
+                          <QueryWidget
+                            title={
+                              <QueryTitle
+                                isTitleLoading={isTitleLoading}
+                                title={queryTitle}
+                                onRename={handleRenameTitle}
+                              />
+                            }
+                            query={editorRef.current?.getQuery() ?? defaultQuery}
+                            data={{
+                              rows: results.rows,
+                              columns: results.columns,
+                            }}
+                            config={{
+                              type: "table",
+                              prettyFormatting,
+                              sorting: [],
+                            }}
+                            accessory={
+                              mode.type === "standalone" ? (
+                                <Button
+                                  variant="primary/small"
+                                  onClick={() => setIsSaveDialogOpen(true)}
+                                >
+                                  Add to dashboard
+                                </Button>
+                              ) : save ? (
+                                save(saveData)
+                              ) : undefined
+                            }
+                          />
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex h-full flex-col items-center justify-center gap-3">
+                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <Paragraph className="max-w-48 text-center text-text-dimmed">
+                          Run a query to visualize the results.
+                        </Paragraph>
+                      </div>
+                    )}
+                  </ClientTabsContent>
+                  <ClientTabsContent
+                    value="graph"
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                      results?.rows &&
+                      results.rows.length > 0 &&
+                      hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
+                        ? "grid-rows-[auto_1fr]"
+                        : "grid-rows-[1fr]"
+                    }`}
+                  >
+                    {results?.rows && results?.columns && results.rows.length > 0 ? (
+                      <>
+                        <QueryResultsCallouts
+                          hiddenColumns={results.hiddenColumns}
+                          periodClipped={results.periodClipped}
+                          organizationSlug={organization.slug}
+                        />
+                        <ResultsChart
+                          rows={results.rows}
+                          columns={results.columns}
+                          query={editorRef.current?.getQuery() ?? defaultQuery}
+                          chartConfig={chartConfig}
+                          onChartConfigChange={handleChartConfigChange}
+                          queryTitle={queryTitle}
+                          isTitleLoading={isTitleLoading}
+                          onRenameTitle={handleRenameTitle}
+                          accessory={
+                            mode.type === "standalone" ? (
+                              <Button
+                                variant="primary/small"
+                                onClick={() => setIsSaveDialogOpen(true)}
+                              >
+                                Add to dashboard
+                              </Button>
+                            ) : save ? (
+                              save(saveData)
+                            ) : undefined
+                          }
+                        />
+                      </>
+                    ) : (
+                      <div className="flex h-full flex-col items-center justify-center gap-3">
+                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <Paragraph className="max-w-48 text-center text-text-dimmed">
+                          Run a query to visualize the results.
+                        </Paragraph>
+                      </div>
+                    )}
+                  </ClientTabsContent>
+                  <ClientTabsContent
+                    value="bignumber"
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                      results?.rows &&
+                      results.rows.length > 0 &&
+                      hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
+                        ? "grid-rows-[auto_1fr]"
+                        : "grid-rows-[1fr]"
+                    }`}
+                  >
+                    {results?.rows && results?.columns && results.rows.length > 0 ? (
+                      <>
+                        <QueryResultsCallouts
+                          hiddenColumns={results.hiddenColumns}
+                          periodClipped={results.periodClipped}
+                          organizationSlug={organization.slug}
+                        />
+                        <ResultsBigNumber
+                          rows={results.rows}
+                          columns={results.columns}
+                          query={editorRef.current?.getQuery() ?? defaultQuery}
+                          bigNumberConfig={bigNumberConfig}
+                          onBigNumberConfigChange={setBigNumberConfig}
+                          queryTitle={queryTitle}
+                          isTitleLoading={isTitleLoading}
+                          onRenameTitle={handleRenameTitle}
+                          accessory={
+                            mode.type === "standalone" ? (
+                              <Button
+                                variant="primary/small"
+                                onClick={() => setIsSaveDialogOpen(true)}
+                              >
+                                Add to dashboard
+                              </Button>
+                            ) : save ? (
+                              save(saveData)
+                            ) : undefined
+                          }
+                        />
+                      </>
+                    ) : (
+                      <div className="flex h-full flex-col items-center justify-center gap-3">
+                        <IconChartHistogram className="size-16 text-charcoal-650" />
+                        <Paragraph className="max-w-48 text-center text-text-dimmed">
+                          Run a query to visualize the results.
+                        </Paragraph>
+                      </div>
+                    )}
+                  </ClientTabsContent>
+                </ClientTabs>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+          <ResizableHandle id="query-handle" />
+          <ResizablePanel
+            id="query-help"
+            min="200px"
+            collapsible
+            collapsedSize="20px"
+            default="400px"
+            max="500px"
+            className="w-full"
+          >
+            <QueryHelpSidebar
+              onTryExample={(exampleQuery, exampleScope) => {
+                editorRef.current?.setQuery(exampleQuery);
+                editorRef.current?.setScope(exampleScope);
+              }}
+              onQueryGenerated={(query) => {
+                const formatted = autoFormatSQL(query);
+                editorRef.current?.setQuery(formatted);
+              }}
+              onTimeFilterChange={handleTimeFilterChange}
+              getCurrentQuery={() => editorRef.current?.getQuery() ?? ""}
+              activeTab={sidebarTab}
+              onTabChange={setSidebarTab}
+              aiFixRequest={aiFixRequest}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </PageBody>
+      {mode.type === "standalone" && (
+        <SaveToDashboardDialog
+          title={queryTitle ?? "Untitled Query"}
+          query={editorRef.current?.getQuery() ?? ""}
+          config={
+            resultsView === "table"
+              ? { type: "table", prettyFormatting, sorting: [] }
+              : resultsView === "bignumber"
+              ? { type: "bignumber", ...bigNumberConfig }
+              : { type: "chart", ...chartConfig }
+          }
+          isOpen={isSaveDialogOpen}
+          onOpenChange={setIsSaveDialogOpen}
+        />
+      )}
+    </PageContainer>
+  );
+}
+
+function QueryTitle({
+  isTitleLoading,
+  title,
+  onRename,
+}: {
+  isTitleLoading: boolean;
+  title: string | null;
+  onRename?: (newTitle: string) => void;
+}) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(title ?? "");
+
+  // Update rename value when title changes
+  useEffect(() => {
+    setRenameValue(title ?? "");
+  }, [title]);
+
+  if (isTitleLoading)
+    return (
+      <span className="flex items-center gap-2 text-text-dimmed">
+        <Spinner className="size-3" /> Generating title…
+      </span>
+    );
+
+  return (
+    <>
+      <span className="group flex items-center gap-1">
+        {title ?? "Results"}
+        {onRename && title && (
+          <Button
+            variant="minimal/small"
+            LeadingIcon={PencilSquareIcon}
+            leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => {
+              setRenameValue(title);
+              setIsDialogOpen(true);
+            }}
+          />
+        )}
+      </span>
+      {onRename && (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>Rename chart</DialogHeader>
+            <form
+              className="space-y-4 pt-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (renameValue.trim()) {
+                  onRename(renameValue.trim());
+                  setIsDialogOpen(false);
+                }
+              }}
+            >
+              <InputGroup>
+                <Label>Title</Label>
+                <Input
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  placeholder="Chart title"
+                  autoFocus
+                />
+              </InputGroup>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="secondary/medium">Cancel</Button>
+                </DialogClose>
+                <Button type="submit" variant="primary/medium" disabled={!renameValue.trim()}>
+                  Save
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+function ExportResultsButton({
+  rows,
+  columns,
+}: {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleCopyCSV = () => {
+    const csv = rowsToCSV(rows, columns);
+    navigator.clipboard.writeText(csv);
+    setIsOpen(false);
+  };
+
+  const handleExportCSV = () => {
+    const csv = rowsToCSV(rows, columns);
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, "");
+    downloadFile(csv, `query-results-${timestamp}.csv`, "text/csv");
+    setIsOpen(false);
+  };
+
+  const handleCopyJSON = () => {
+    const json = rowsToJSON(rows);
+    navigator.clipboard.writeText(json);
+    setIsOpen(false);
+  };
+
+  const handleExportJSON = () => {
+    const json = rowsToJSON(rows);
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, "");
+    downloadFile(json, `query-results-${timestamp}.json`, "application/json");
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverArrowTrigger variant="minimal" isOpen={isOpen}>
+        Export
+      </PopoverArrowTrigger>
+      <PopoverContent className="min-w-[10rem] p-1" align="end">
+        <div className="flex flex-col gap-1">
+          <PopoverMenuItem
+            icon={Clipboard}
+            title="Copy CSV"
+            onClick={handleCopyCSV}
+            className="pl-1"
+          />
+          <PopoverMenuItem icon={ArrowDownTrayIcon} title="Export CSV" onClick={handleExportCSV} />
+          <PopoverMenuItem
+            icon={Clipboard}
+            title="Copy JSON"
+            onClick={handleCopyJSON}
+            className="pl-1"
+          />
+          <PopoverMenuItem
+            icon={ArrowDownTrayIcon}
+            title="Export JSON"
+            onClick={handleExportJSON}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ScopeItem({ scope }: { scope: QueryScope }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  switch (scope) {
+    case "organization":
+      return <span className="text-text-bright">{`Org: ${organization.title}`}</span>;
+    case "project":
+      return <span className="text-text-bright">{`Project: ${project.name}`}</span>;
+    case "environment":
+      return (
+        <span className="text-text-bright">
+          Env: <EnvironmentLabel environment={environment} />
+        </span>
+      );
+    default:
+      return <span className="text-text-bright">{scope}</span>;
+  }
+}
+
+function QueryResultsCallouts({
+  hiddenColumns,
+  periodClipped,
+  organizationSlug,
+}: {
+  hiddenColumns: string[] | null | undefined;
+  periodClipped: number | null;
+  organizationSlug: string;
+}) {
+  const hasCallouts = (hiddenColumns && hiddenColumns.length > 0) || periodClipped;
+
+  if (!hasCallouts) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-2 pt-2">
+      {hiddenColumns && hiddenColumns.length > 0 && (
+        <Callout variant="warning" className="shrink-0 text-sm">
+          <code>SELECT *</code> doesn't return all columns because it's slow. The following columns
+          are not shown: <span className="font-mono text-xs">{hiddenColumns.join(", ")}</span>.
+          Specify them explicitly to include them.
+        </Callout>
+      )}
+      {periodClipped && (
+        <Callout
+          variant="pricing"
+          cta={
+            <LinkButton
+              variant="primary/small"
+              to={organizationBillingPath({ slug: organizationSlug })}
+            >
+              Upgrade
+            </LinkButton>
+          }
+          className="items-center"
+        >
+          {simplur`Results are limited to the last ${periodClipped} day[|s] based on your plan.`}
+        </Callout>
+      )}
+    </div>
+  );
+}
+
+function hasQueryResultsCallouts(
+  hiddenColumns: string[] | null | undefined,
+  periodClipped: number | null
+): boolean {
+  return (hiddenColumns && hiddenColumns.length > 0) || !!periodClipped;
+}
+
+function ResultsChart({
+  rows,
+  columns,
+  query,
+  chartConfig,
+  onChartConfigChange,
+  queryTitle,
+  isTitleLoading,
+  onRenameTitle,
+  accessory,
+}: {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+  query?: string;
+  chartConfig: ChartConfiguration;
+  onChartConfigChange: (config: ChartConfiguration) => void;
+  queryTitle: string | null;
+  isTitleLoading: boolean;
+  onRenameTitle?: (newTitle: string) => void;
+  accessory?: ReactNode;
+}) {
+  return (
+    <>
+      <ResizablePanelGroup className="overflow-hidden">
+        <ResizablePanel id="chart-results">
+          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+            <QueryWidget
+              title={
+                <QueryTitle
+                  isTitleLoading={isTitleLoading}
+                  title={queryTitle}
+                  onRename={onRenameTitle}
+                />
+              }
+              query={query}
+              data={{
+                rows,
+                columns,
+              }}
+              config={{
+                type: "chart",
+                ...chartConfig,
+              }}
+              accessory={accessory}
+            />
+          </div>
+        </ResizablePanel>
+        <ResizableHandle id="chart-split" />
+        <ResizablePanel id="chart-config" min="50px" default="200px">
+          <ChartConfigPanel columns={columns} config={chartConfig} onChange={onChartConfigChange} />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </>
+  );
+}
+
+function isNumericColumnType(type: string): boolean {
+  return (
+    type.startsWith("Int") ||
+    type.startsWith("UInt") ||
+    type.startsWith("Float") ||
+    type.startsWith("Decimal") ||
+    type.startsWith("Nullable(Int") ||
+    type.startsWith("Nullable(UInt") ||
+    type.startsWith("Nullable(Float") ||
+    type.startsWith("Nullable(Decimal")
+  );
+}
+
+function ResultsBigNumber({
+  rows,
+  columns,
+  query,
+  bigNumberConfig,
+  onBigNumberConfigChange,
+  queryTitle,
+  isTitleLoading,
+  onRenameTitle,
+  accessory,
+}: {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+  query?: string;
+  bigNumberConfig: BigNumberConfiguration;
+  onBigNumberConfigChange: (config: BigNumberConfiguration) => void;
+  queryTitle: string | null;
+  isTitleLoading: boolean;
+  onRenameTitle?: (newTitle: string) => void;
+  accessory?: ReactNode;
+}) {
+  // Auto-select first numeric column if none selected
+  const numericColumns = columns.filter((c) => isNumericColumnType(c.type));
+
+  useEffect(() => {
+    if (!bigNumberConfig.column && numericColumns.length > 0) {
+      onBigNumberConfigChange({ ...bigNumberConfig, column: numericColumns[0].name });
+    }
+  }, [columns]);
+
+  return (
+    <>
+      <ResizablePanelGroup className="overflow-hidden">
+        <ResizablePanel id="bignumber-results">
+          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+            <QueryWidget
+              title={
+                <QueryTitle
+                  isTitleLoading={isTitleLoading}
+                  title={queryTitle}
+                  onRename={onRenameTitle}
+                />
+              }
+              query={query}
+              data={{
+                rows,
+                columns,
+              }}
+              config={{
+                type: "bignumber",
+                ...bigNumberConfig,
+              }}
+              accessory={accessory}
+            />
+          </div>
+        </ResizablePanel>
+        <ResizableHandle id="bignumber-split" />
+        <ResizablePanel id="bignumber-config" min="50px" default="200px">
+          <BigNumberConfigPanel
+            columns={columns}
+            config={bigNumberConfig}
+            onChange={onBigNumberConfigChange}
+          />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </>
+  );
+}
+
+const bigNumberAggregationOptions = [
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "count", label: "Count" },
+  { value: "min", label: "Min" },
+  { value: "max", label: "Max" },
+  { value: "first", label: "First" },
+  { value: "last", label: "Last" },
+] as const;
+
+const bigNumberSortOptions = [
+  { value: "", label: "Unsorted" },
+  { value: "asc", label: "Ascending" },
+  { value: "desc", label: "Descending" },
+] as const;
+
+function BigNumberConfigPanel({
+  columns,
+  config,
+  onChange,
+}: {
+  columns: OutputColumnMetadata[];
+  config: BigNumberConfiguration;
+  onChange: (config: BigNumberConfiguration) => void;
+}) {
+  const numericColumns = columns.filter((c) => isNumericColumnType(c.type));
+  const allColumns = columns;
+
+  // For count aggregation, any column works; for others, prefer numeric
+  const availableColumns = config.aggregation === "count" ? allColumns : numericColumns;
+
+  return (
+    <div className="flex h-full flex-col gap-2 overflow-y-auto p-2">
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Column
+          </Paragraph>
+          <Select
+            value={config.column || ""}
+            setValue={(value) => onChange({ ...config, column: value })}
+            variant="tertiary/small"
+            dropdownIcon={true}
+            items={availableColumns.map((c) => ({ value: c.name, label: c.name }))}
+            text={(value) => value || "Select column"}
+            placeholder="Select column"
+          >
+            {(items) =>
+              items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))
+            }
+          </Select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Sort order
+          </Paragraph>
+          <Select
+            value={config.sortDirection ?? ""}
+            setValue={(value) =>
+              onChange({
+                ...config,
+                sortDirection: value === "" ? undefined : (value as "asc" | "desc"),
+              })
+            }
+            variant="tertiary/small"
+            dropdownIcon={true}
+            items={[...bigNumberSortOptions]}
+            text={(value) =>
+              bigNumberSortOptions.find((o) => o.value === value)?.label ?? "Unsorted"
+            }
+          >
+            {(items) =>
+              items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))
+            }
+          </Select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Aggregation
+          </Paragraph>
+          <Select
+            value={config.aggregation}
+            setValue={(value) =>
+              onChange({ ...config, aggregation: value as BigNumberConfiguration["aggregation"] })
+            }
+            variant="tertiary/small"
+            dropdownIcon={true}
+            items={[...bigNumberAggregationOptions]}
+            text={(value) =>
+              bigNumberAggregationOptions.find((o) => o.value === value)?.label ?? value
+            }
+          >
+            {(items) =>
+              items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))
+            }
+          </Select>
+        </div>
+        <div className="flex items-center justify-between">
+          <Switch
+            label="Abbreviate large values"
+            labelPosition="right"
+            variant="small"
+            checked={config.abbreviate ?? false}
+            onCheckedChange={(checked) => onChange({ ...config, abbreviate: checked })}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Prefix
+          </Paragraph>
+          <Input
+            value={config.prefix ?? ""}
+            onChange={(e) => onChange({ ...config, prefix: e.target.value || undefined })}
+            placeholder="e.g. $"
+            variant="small"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Suffix
+          </Paragraph>
+          <Input
+            value={config.suffix ?? ""}
+            onChange={(e) => onChange({ ...config, suffix: e.target.value || undefined })}
+            placeholder="e.g. ms"
+            variant="small"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index b7675eb83..3ccda692c 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -8,7 +8,7 @@ import {
   startOfMonth,
   startOfWeek,
   subDays,
-  subWeeks
+  subWeeks,
 } from "date-fns";
 import parse from "parse-duration";
 import { startTransition, useCallback, useEffect, useState, type ReactNode } from "react";
@@ -105,7 +105,7 @@ const timePeriods = [
   {
     label: "30 days",
     value: "30d",
-  }
+  },
 ];
 
 const timeUnits = [
@@ -214,6 +214,44 @@ export const timeFilters = ({
   };
 };
 
+export function timeFilterFromTo(props: {
+  period?: string;
+  from?: string | number;
+  to?: string | number;
+  defaultPeriod: string;
+}): { from: Date; to: Date } {
+  const time = timeFilters(props);
+
+  const periodMs = time.period ? parse(time.period) : undefined;
+
+  if (periodMs) {
+    return {
+      from: new Date(Date.now() - periodMs),
+      to: new Date(),
+    };
+  }
+
+  if (time.from && time.to) {
+    return {
+      from: time.from,
+      to: time.to,
+    };
+  }
+
+  if (time.from) {
+    return {
+      from: time.from,
+      to: new Date(),
+    };
+  }
+
+  const defaultPeriodMs = parse(props.defaultPeriod) ?? 24 * 60 * 60 * 1_000;
+  return {
+    from: new Date(Date.now() - defaultPeriodMs),
+    to: time.to ?? new Date(),
+  };
+}
+
 export function timeFilterRenderValues({
   from,
   to,
@@ -257,7 +295,12 @@ export function timeFilterRenderValues({
     case "range":
       {
         //If the day is the same, only show the time for the `to` date
-        const isSameDay = from && to && from.getDate() === to.getDate() && from.getMonth() === to.getMonth() && from.getFullYear() === to.getFullYear();
+        const isSameDay =
+          from &&
+          to &&
+          from.getDate() === to.getDate() &&
+          from.getMonth() === to.getMonth() &&
+          from.getFullYear() === to.getFullYear();
 
         valueLabel = (
           <span>
@@ -279,8 +322,8 @@ export function timeFilterRenderValues({
     rangeType === "range" || rangeType === "period"
       ? labelName
       : rangeType === "from"
-        ? `${labelName} after`
-        : `${labelName} before`;
+      ? `${labelName} after`
+      : `${labelName} before`;
 
   return { label, valueLabel, rangeType };
 }
@@ -305,6 +348,8 @@ export interface TimeFilterProps {
   onValueChange?: (values: TimeFilterApplyValues) => void;
   /** When set an upgrade message will be shown if you select a period further back than this number of days */
   maxPeriodDays?: number;
+  /** Optional className override for the value text in the filter pill */
+  valueClassName?: string;
 }
 
 export function TimeFilter({
@@ -317,6 +362,7 @@ export function TimeFilter({
   applyShortcut,
   onValueChange,
   maxPeriodDays,
+  valueClassName,
 }: TimeFilterProps = {}) {
   const { value } = useSearchParams();
   const periodValue = period ?? value("period");
@@ -343,6 +389,7 @@ export function TimeFilter({
                 value={constrained.valueLabel}
                 removable={false}
                 variant="secondary/small"
+                valueClassName={valueClassName}
               />
             </Ariakit.Select>
           }
@@ -443,7 +490,8 @@ export function TimeDropdown({
     if (!maxPeriodDays) return false;
 
     if (activeSection === "duration") {
-      const periodToCheck = selectedPeriod === "custom" ? `${customValue}${customUnit}` : selectedPeriod;
+      const periodToCheck =
+        selectedPeriod === "custom" ? `${customValue}${customUnit}` : selectedPeriod;
       if (!periodToCheck) return false;
       return periodToDays(periodToCheck) > maxPeriodDays;
     } else {
@@ -456,7 +504,9 @@ export function TimeDropdown({
     setValidationError(null);
 
     if (exceedsMaxPeriod) {
-      setValidationError(`Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`);
+      setValidationError(
+        `Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`
+      );
       return;
     }
 
@@ -472,7 +522,11 @@ export function TimeDropdown({
         periodToApply = `${customValue}${customUnit}`;
       }
 
-      const values: TimeFilterApplyValues = { period: periodToApply, from: undefined, to: undefined };
+      const values: TimeFilterApplyValues = {
+        period: periodToApply,
+        from: undefined,
+        to: undefined,
+      };
 
       if (onValueChange) {
         // Controlled mode - just call the handler
@@ -538,7 +592,7 @@ export function TimeDropdown({
     onApply,
     onValueChange,
     exceedsMaxPeriod,
-    maxPeriodDays
+    maxPeriodDays,
   ]);
 
   return (
@@ -579,9 +633,9 @@ export function TimeDropdown({
                       ? "border-indigo-500 "
                       : "border-charcoal-650 hover:border-charcoal-600",
                     validationError &&
-                    activeSection === "duration" &&
-                    selectedPeriod === "custom" &&
-                    "border-error"
+                      activeSection === "duration" &&
+                      selectedPeriod === "custom" &&
+                      "border-error"
                   )}
                   onClick={(e) => e.stopPropagation()}
                 >
@@ -800,7 +854,14 @@ export function TimeDropdown({
           {exceedsMaxPeriod && organization && (
             <Callout
               variant="pricing"
-              cta={<LinkButton variant="primary/small" to={organizationBillingPath({ slug: organization.slug })}>Upgrade</LinkButton>}
+              cta={
+                <LinkButton
+                  variant="primary/small"
+                  to={organizationBillingPath({ slug: organization.slug })}
+                >
+                  Upgrade
+                </LinkButton>
+              }
               className="items-center"
             >
               {simplur`Your plan allows a maximum of ${maxPeriodDays} day[|s].`}
@@ -810,7 +871,7 @@ export function TimeDropdown({
           {/* Action buttons */}
           <div className="flex justify-between gap-1 border-t border-grid-bright px-0 pt-3">
             <Button
-              variant="tertiary/small"
+              variant="secondary/small"
               onClick={(e) => {
                 e.preventDefault();
                 setFromValue(from);
@@ -824,11 +885,15 @@ export function TimeDropdown({
             </Button>
             <Button
               variant="primary/small"
-              shortcut={applyShortcut ? applyShortcut : {
-                modifiers: ["mod"],
-                key: "Enter",
-                enabledOnInputElements: true,
-              }}
+              shortcut={
+                applyShortcut
+                  ? applyShortcut
+                  : {
+                      modifiers: ["mod"],
+                      key: "Enter",
+                      enabledOnInputElements: true,
+                    }
+              }
               onClick={(e) => {
                 e.preventDefault();
                 applySelection();
diff --git a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
index 542ff59a9..fd39ce15d 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
@@ -304,3 +304,42 @@ export const runStatusTitleFromStatus: Record<TaskRunStatus, RunFriendlyStatus>
 };
 
 const titlesStatusesArray = Object.entries(runStatusTitleFromStatus);
+
+/**
+ * Hex color for each TaskRunStatus, mirroring `runStatusClassNameColor` but as
+ * concrete hex values for non-CSS contexts (e.g. chart series colors).
+ */
+const RUN_STATUS_HEX_COLORS: Record<TaskRunStatus, string> = {
+  PENDING: "#5F6570", // charcoal-500
+  DELAYED: "#6B7580", // charcoal ~450
+  PENDING_VERSION: "#f59e0b", // amber-500
+  WAITING_FOR_DEPLOY: "#d97706", // amber-600
+  EXECUTING: "#3b82f6", // blue-500
+  RETRYING_AFTER_FAILURE: "#2f6fec", // blue ~550
+  DEQUEUED: "#4D8EF5", // blue ~475
+  WAITING_TO_RESUME: "#555D67", // charcoal ~550
+  PAUSED: "#fbbf24", // amber-400
+  CANCELED: "#78828C", // charcoal ~400
+  EXPIRED: "#848D96", // charcoal ~350
+  INTERRUPTED: "#D52C4D", // rose — evenly spaced (error)
+  COMPLETED_SUCCESSFULLY: "#28BF5C", // mint-500 (success)
+  COMPLETED_WITH_ERRORS: "#DE405C", // rose — evenly spaced (error)
+  SYSTEM_FAILURE: "#E7536C", // rose — evenly spaced (error)
+  CRASHED: "#cc193d", // rose — darkest (error)
+  TIMED_OUT: "#F0667B", // rose — lightest (error)
+};
+
+/**
+ * Get the hex color for a run status value. Accepts either a raw TaskRunStatus
+ * (e.g. "COMPLETED_SUCCESSFULLY") or a friendly name (e.g. "Completed").
+ * Returns `undefined` when the value is not a recognised status.
+ */
+export function getRunStatusHexColor(value: string): string | undefined {
+  if (isTaskRunStatus(value)) {
+    return RUN_STATUS_HEX_COLORS[value];
+  }
+  if (isRunFriendlyStatus(value)) {
+    return RUN_STATUS_HEX_COLORS[runStatusFromFriendlyTitle(value)];
+  }
+  return undefined;
+}
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
index 829cf3c68..a6d8905f2 100644
--- a/apps/webapp/app/env.server.ts
+++ b/apps/webapp/app/env.server.ts
@@ -1199,6 +1199,10 @@ const EnvironmentSchema = z
     QUERY_FEATURE_ENABLED: z.string().default("1"),
 
     // Query page ClickHouse limits (for TSQL queries)
+    QUERY_CLICKHOUSE_URL: z
+      .string()
+      .optional()
+      .transform((v) => v ?? process.env.CLICKHOUSE_URL),
     QUERY_CLICKHOUSE_MAX_EXECUTION_TIME: z.coerce.number().int().default(10),
     QUERY_CLICKHOUSE_MAX_MEMORY_USAGE: z.coerce.number().int().default(1_073_741_824), // 1GB in bytes
     QUERY_CLICKHOUSE_MAX_AST_ELEMENTS: z.coerce.number().int().default(4_000_000),
diff --git a/apps/webapp/app/hooks/useDashboardEditor.ts b/apps/webapp/app/hooks/useDashboardEditor.ts
new file mode 100644
index 000000000..65b2ccca6
--- /dev/null
+++ b/apps/webapp/app/hooks/useDashboardEditor.ts
@@ -0,0 +1,515 @@
+import { useReducer, useCallback, useRef, useEffect } from "react";
+import { nanoid } from "nanoid";
+import type {
+  DashboardLayout,
+  LayoutItem,
+  Widget,
+} from "~/presenters/v3/MetricDashboardPresenter.server";
+import type { WidgetData, QueryWidgetConfig } from "~/components/metrics/QueryWidget";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type EditorMode =
+  | null
+  | { type: "add" }
+  | { type: "edit"; widgetId: string; widget: WidgetData };
+
+type DashboardState = {
+  /** The layout items (positions/sizes) */
+  layout: LayoutItem[];
+  /** The widget configurations keyed by widget ID */
+  widgets: Record<string, Widget>;
+  /** Current editor mode (add/edit/closed) */
+  editorMode: EditorMode;
+};
+
+// ============================================================================
+// Actions
+// ============================================================================
+
+type DashboardAction =
+  | { type: "ADD_WIDGET"; payload: { id: string; widget: Widget; layoutItem: LayoutItem } }
+  | { type: "UPDATE_WIDGET"; payload: { id: string; widget: Widget } }
+  | { type: "RENAME_WIDGET"; payload: { id: string; title: string } }
+  | { type: "DELETE_WIDGET"; payload: { id: string } }
+  | { type: "DUPLICATE_WIDGET"; payload: { id: string; newId: string } }
+  | { type: "UPDATE_LAYOUT"; payload: { layout: LayoutItem[] } }
+  | { type: "RESET_STATE"; payload: { layout: LayoutItem[]; widgets: Record<string, Widget> } }
+  | { type: "OPEN_ADD_EDITOR" }
+  | { type: "OPEN_EDIT_EDITOR"; payload: { widgetId: string; widget: WidgetData } }
+  | { type: "CLOSE_EDITOR" };
+
+// ============================================================================
+// Reducer
+// ============================================================================
+
+function dashboardReducer(state: DashboardState, action: DashboardAction): DashboardState {
+  switch (action.type) {
+    case "ADD_WIDGET":
+      return {
+        ...state,
+        layout: [...state.layout, action.payload.layoutItem],
+        widgets: {
+          ...state.widgets,
+          [action.payload.id]: action.payload.widget,
+        },
+        editorMode: null,
+      };
+
+    case "UPDATE_WIDGET":
+      return {
+        ...state,
+        widgets: {
+          ...state.widgets,
+          [action.payload.id]: action.payload.widget,
+        },
+        editorMode: null,
+      };
+
+    case "RENAME_WIDGET": {
+      const existingWidget = state.widgets[action.payload.id];
+      if (!existingWidget) return state;
+      return {
+        ...state,
+        widgets: {
+          ...state.widgets,
+          [action.payload.id]: {
+            ...existingWidget,
+            title: action.payload.title,
+          },
+        },
+      };
+    }
+
+    case "DELETE_WIDGET": {
+      const { [action.payload.id]: _, ...remainingWidgets } = state.widgets;
+      return {
+        ...state,
+        layout: state.layout.filter((item) => item.i !== action.payload.id),
+        widgets: remainingWidgets,
+      };
+    }
+
+    case "DUPLICATE_WIDGET": {
+      const original = state.widgets[action.payload.id];
+      const originalLayout = state.layout.find((l) => l.i === action.payload.id);
+      if (!original || !originalLayout) return state;
+
+      const maxBottom = Math.max(0, ...state.layout.map((l) => l.y + l.h));
+
+      // Deep copy the widget to ensure no shared references
+      // This prevents edits to one widget from affecting the duplicate
+      const duplicatedWidget: Widget = {
+        title: `${original.title} (Copy)`,
+        query: original.query,
+        display: JSON.parse(JSON.stringify(original.display)) as QueryWidgetConfig,
+      };
+
+      return {
+        ...state,
+        layout: [
+          ...state.layout,
+          { ...originalLayout, i: action.payload.newId, y: maxBottom, x: 0 },
+        ],
+        widgets: {
+          ...state.widgets,
+          [action.payload.newId]: duplicatedWidget,
+        },
+      };
+    }
+
+    case "UPDATE_LAYOUT":
+      return { ...state, layout: action.payload.layout };
+
+    case "RESET_STATE":
+      return {
+        ...state,
+        layout: action.payload.layout,
+        widgets: action.payload.widgets,
+      };
+
+    case "OPEN_ADD_EDITOR":
+      return { ...state, editorMode: { type: "add" } };
+
+    case "OPEN_EDIT_EDITOR":
+      return {
+        ...state,
+        editorMode: { type: "edit", widgetId: action.payload.widgetId, widget: action.payload.widget },
+      };
+
+    case "CLOSE_EDITOR":
+      return { ...state, editorMode: null };
+
+    default:
+      return state;
+  }
+}
+
+// ============================================================================
+// Hook Options
+// ============================================================================
+
+export type UseDashboardEditorOptions = {
+  /** Initial dashboard layout data from the server */
+  initialData: DashboardLayout;
+  /** URL for widget actions (add, update, delete, duplicate) */
+  widgetActionUrl: string;
+  /** URL for layout updates. If empty or not provided, uses current page URL. */
+  layoutActionUrl?: string;
+  /** Maximum number of widgets allowed per dashboard. If not provided, no limit is enforced. */
+  widgetLimit?: number;
+  /** Callback when a sync error occurs */
+  onSyncError?: (error: Error, action: string) => void;
+  /** Callback when a widget action is blocked by the limit */
+  onWidgetLimitReached?: () => void;
+};
+
+// ============================================================================
+// Sync Queue Types
+// ============================================================================
+
+type WidgetSyncTask = {
+  type: "widget";
+  action: string;
+  data: Record<string, string>;
+};
+
+type LayoutSyncTask = {
+  type: "layout";
+  layout: LayoutItem[];
+};
+
+type SyncTask = WidgetSyncTask | LayoutSyncTask;
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useDashboardEditor({
+  initialData,
+  widgetActionUrl,
+  layoutActionUrl,
+  widgetLimit,
+  onSyncError,
+  onWidgetLimitReached,
+}: UseDashboardEditorOptions) {
+  const [state, dispatch] = useReducer(dashboardReducer, {
+    layout: initialData.layout,
+    widgets: initialData.widgets,
+    editorMode: null,
+  });
+
+  // Refs for debouncing and tracking initialization
+  const layoutDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isInitializedRef = useRef(false);
+  const currentLayoutJsonRef = useRef<string>(JSON.stringify(initialData.layout));
+
+  // Sync queue to prevent race conditions
+  const syncQueueRef = useRef<SyncTask[]>([]);
+  const isSyncingRef = useRef(false);
+
+  // Reset state when initialData changes (e.g., navigating to different dashboard)
+  const initialDataJson = JSON.stringify({ layout: initialData.layout, widgets: initialData.widgets });
+  useEffect(() => {
+    // Cancel any pending layout save
+    if (layoutDebounceRef.current) {
+      clearTimeout(layoutDebounceRef.current);
+      layoutDebounceRef.current = null;
+    }
+
+    // Clear the sync queue when switching dashboards
+    syncQueueRef.current = [];
+
+    // Reset state to new initial data
+    dispatch({
+      type: "RESET_STATE",
+      payload: { layout: initialData.layout, widgets: initialData.widgets },
+    });
+
+    // Update refs
+    currentLayoutJsonRef.current = JSON.stringify(initialData.layout);
+    isInitializedRef.current = false;
+
+    // Allow saves after a short delay to skip initial mount callbacks
+    const initTimeout = setTimeout(() => {
+      isInitializedRef.current = true;
+    }, 100);
+
+    return () => {
+      clearTimeout(initTimeout);
+      if (layoutDebounceRef.current) {
+        clearTimeout(layoutDebounceRef.current);
+      }
+    };
+  }, [initialDataJson]);
+
+  // -------------------------------------------------------------------------
+  // Sync queue processor - ensures only one sync runs at a time
+  // -------------------------------------------------------------------------
+
+  const processNextSync = useCallback(async () => {
+    // If already syncing or queue is empty, do nothing
+    if (isSyncingRef.current || syncQueueRef.current.length === 0) {
+      return;
+    }
+
+    isSyncingRef.current = true;
+    const task = syncQueueRef.current.shift()!;
+
+    try {
+      if (task.type === "widget") {
+        const formData = new FormData();
+        formData.set("action", task.action);
+        Object.entries(task.data).forEach(([k, v]) => formData.set(k, v));
+
+        const response = await fetch(widgetActionUrl, {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Failed to ${task.action} widget: ${errorText}`);
+        }
+      } else if (task.type === "layout") {
+        const formData = new FormData();
+        formData.set("action", "layout");
+        formData.set("layout", JSON.stringify(task.layout));
+
+        // Use current page URL if layoutActionUrl is not provided
+        const url = layoutActionUrl || window.location.pathname;
+
+        const response = await fetch(url, {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error("Failed to update layout: " + errorText);
+        }
+      }
+    } catch (error) {
+      console.error(`Dashboard sync error:`, error);
+      const actionName = task.type === "widget" ? task.action : "layout";
+      onSyncError?.(error instanceof Error ? error : new Error(String(error)), actionName);
+    } finally {
+      isSyncingRef.current = false;
+      // Process next item in queue
+      processNextSync();
+    }
+  }, [widgetActionUrl, layoutActionUrl, onSyncError]);
+
+  // -------------------------------------------------------------------------
+  // Queue helpers
+  // -------------------------------------------------------------------------
+
+  const queueWidgetSync = useCallback(
+    (action: string, data: Record<string, string>) => {
+      syncQueueRef.current.push({ type: "widget", action, data });
+      processNextSync();
+    },
+    [processNextSync]
+  );
+
+  const queueLayoutSync = useCallback(
+    (layout: LayoutItem[]) => {
+      // For layout syncs, we only care about the latest state
+      // Remove any pending layout syncs and add the new one
+      syncQueueRef.current = syncQueueRef.current.filter((task) => task.type !== "layout");
+      syncQueueRef.current.push({ type: "layout", layout });
+      processNextSync();
+    },
+    [processNextSync]
+  );
+
+  // -------------------------------------------------------------------------
+  // Action handlers
+  // -------------------------------------------------------------------------
+
+  // Count only non-title widgets for limit checks (title widgets are free)
+  const countedWidgets = Object.values(state.widgets).filter(
+    (w) => w.display.type !== "title"
+  ).length;
+
+  const addWidget = useCallback(
+    (title: string, query: string, config: QueryWidgetConfig) => {
+      // Guard: check widget limit (title widgets don't count)
+      if (widgetLimit !== undefined && countedWidgets >= widgetLimit) {
+        onWidgetLimitReached?.();
+        return;
+      }
+
+      const id = nanoid(8);
+      const maxBottom = Math.max(0, ...state.layout.map((l) => l.y + l.h));
+      const layoutItem: LayoutItem = { i: id, x: 0, y: maxBottom, w: 12, h: 15 };
+      const widget: Widget = { title, query, display: config };
+
+      // Update local state immediately
+      dispatch({ type: "ADD_WIDGET", payload: { id, widget, layoutItem } });
+
+      // Queue sync to server (processed sequentially)
+      // Send the client-generated ID so the server uses the same ID
+      queueWidgetSync("add", {
+        widgetId: id,
+        title,
+        query,
+        config: JSON.stringify(config),
+      });
+    },
+    [state.layout, countedWidgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
+  );
+
+  const addTitleWidget = useCallback(
+    (title: string) => {
+      const id = nanoid(8);
+      const maxBottom = Math.max(0, ...state.layout.map((l) => l.y + l.h));
+      // Title widgets are fixed at h=2 and full width
+      const layoutItem: LayoutItem = { i: id, x: 0, y: maxBottom, w: 12, h: 2 };
+      const config: QueryWidgetConfig = { type: "title" };
+      const widget: Widget = { title, query: "", display: config };
+
+      // Update local state immediately
+      dispatch({ type: "ADD_WIDGET", payload: { id, widget, layoutItem } });
+
+      // Queue sync to server (processed sequentially)
+      // Send the client-generated ID so the server uses the same ID
+      queueWidgetSync("add", {
+        widgetId: id,
+        title,
+        query: "",
+        config: JSON.stringify(config),
+      });
+    },
+    [state.layout, queueWidgetSync]
+  );
+
+  const updateWidget = useCallback(
+    (widgetId: string, title: string, query: string, config: QueryWidgetConfig) => {
+      const widget: Widget = { title, query, display: config };
+
+      // Update local state immediately
+      dispatch({ type: "UPDATE_WIDGET", payload: { id: widgetId, widget } });
+
+      // Queue sync to server (processed sequentially)
+      queueWidgetSync("update", {
+        widgetId,
+        title,
+        query,
+        config: JSON.stringify(config),
+      });
+    },
+    [queueWidgetSync]
+  );
+
+  const deleteWidget = useCallback(
+    (widgetId: string) => {
+      // Update local state immediately
+      dispatch({ type: "DELETE_WIDGET", payload: { id: widgetId } });
+
+      // Queue sync to server (processed sequentially)
+      queueWidgetSync("delete", { widgetId });
+    },
+    [queueWidgetSync]
+  );
+
+  const duplicateWidget = useCallback(
+    (widgetId: string) => {
+      // Guard: check widget limit (title widgets don't count)
+      if (widgetLimit !== undefined && countedWidgets >= widgetLimit) {
+        onWidgetLimitReached?.();
+        return;
+      }
+
+      const newId = nanoid(8);
+
+      // Update local state immediately
+      dispatch({ type: "DUPLICATE_WIDGET", payload: { id: widgetId, newId } });
+
+      // Queue sync to server (processed sequentially)
+      // Send the client-generated newId so the server uses the same ID for the duplicate
+      queueWidgetSync("duplicate", { widgetId, newId });
+    },
+    [countedWidgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
+  );
+
+  const renameWidget = useCallback(
+    (widgetId: string, title: string) => {
+      // Update local state immediately
+      dispatch({ type: "RENAME_WIDGET", payload: { id: widgetId, title } });
+
+      // Queue sync to server (processed sequentially)
+      queueWidgetSync("rename", { widgetId, title });
+    },
+    [queueWidgetSync]
+  );
+
+  const updateLayout = useCallback(
+    (newLayout: LayoutItem[]) => {
+      // Skip if not yet initialized (prevents saving during mount/navigation)
+      if (!isInitializedRef.current) {
+        return;
+      }
+
+      const newLayoutJson = JSON.stringify(newLayout);
+
+      // Skip if layout hasn't actually changed
+      if (newLayoutJson === currentLayoutJsonRef.current) {
+        return;
+      }
+
+      // Update local state immediately
+      dispatch({ type: "UPDATE_LAYOUT", payload: { layout: newLayout } });
+
+      // Clear existing debounce timeout
+      if (layoutDebounceRef.current) {
+        clearTimeout(layoutDebounceRef.current);
+      }
+
+      // Debounce before queueing - this ensures rapid layout changes
+      // (like dragging) don't queue up many requests
+      layoutDebounceRef.current = setTimeout(() => {
+        currentLayoutJsonRef.current = newLayoutJson;
+        // Queue layout sync (replaces any pending layout sync in queue)
+        queueLayoutSync(newLayout);
+      }, 500);
+    },
+    [queueLayoutSync]
+  );
+
+  const openAddEditor = useCallback(() => {
+    dispatch({ type: "OPEN_ADD_EDITOR" });
+  }, []);
+
+  const openEditEditor = useCallback((widgetId: string, widget: WidgetData) => {
+    dispatch({ type: "OPEN_EDIT_EDITOR", payload: { widgetId, widget } });
+  }, []);
+
+  const closeEditor = useCallback(() => {
+    dispatch({ type: "CLOSE_EDITOR" });
+  }, []);
+
+  // -------------------------------------------------------------------------
+  // Return value
+  // -------------------------------------------------------------------------
+
+  return {
+    /** Current dashboard state */
+    state,
+    /** Action dispatchers */
+    actions: {
+      addWidget,
+      addTitleWidget,
+      updateWidget,
+      renameWidget,
+      deleteWidget,
+      duplicateWidget,
+      updateLayout,
+      openAddEditor,
+      openEditEditor,
+      closeEditor,
+    },
+  };
+}
diff --git a/apps/webapp/app/hooks/useElementVisibility.ts b/apps/webapp/app/hooks/useElementVisibility.ts
new file mode 100644
index 000000000..3e01cb99c
--- /dev/null
+++ b/apps/webapp/app/hooks/useElementVisibility.ts
@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+type UseElementVisibilityOptions = {
+  onVisibilityChange?: (isVisible: boolean) => void;
+};
+
+export function useElementVisibility({
+  onVisibilityChange,
+}: UseElementVisibilityOptions = {}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisibleRef = useRef(false);
+  const callbackRef = useRef(onVisibilityChange);
+  callbackRef.current = onVisibilityChange;
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const nowVisible = entry.isIntersecting;
+        if (isVisibleRef.current !== nowVisible) {
+          isVisibleRef.current = nowVisible;
+          callbackRef.current?.(nowVisible);
+        }
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return { ref, isVisibleRef };
+}
diff --git a/apps/webapp/app/hooks/useInterval.ts b/apps/webapp/app/hooks/useInterval.ts
new file mode 100644
index 000000000..4d5413e97
--- /dev/null
+++ b/apps/webapp/app/hooks/useInterval.ts
@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+
+type UseIntervalOptions = {
+  /** If passed, will refresh every interval MS */
+  interval?: number;
+  onLoad?: boolean;
+  onFocus?: boolean;
+  disabled?: boolean;
+  callback: () => void;
+};
+
+export function useInterval({
+  interval,
+  onLoad = true,
+  onFocus = true,
+  disabled = false,
+  callback,
+}: UseIntervalOptions) {
+  // Always keep the latest callback in a ref so the effects below
+  // never close over a stale version.
+  const latestCallback = useRef(callback);
+  useEffect(() => {
+    latestCallback.current = callback;
+  }, [callback]);
+
+  // On interval
+  useEffect(() => {
+    if (!interval || interval <= 0 || disabled) return;
+
+    const intervalId = setInterval(() => {
+      latestCallback.current();
+    }, interval);
+
+    return () => clearInterval(intervalId);
+  }, [interval, disabled]);
+
+  // On focus
+  useEffect(() => {
+    if (!onFocus || disabled) return;
+
+    const handleFocus = () => {
+      if (document.visibilityState === "visible") {
+        latestCallback.current();
+      }
+    };
+
+    // Revalidate when the page becomes visible
+    document.addEventListener("visibilitychange", handleFocus);
+    // Revalidate when the window gains focus
+    window.addEventListener("focus", handleFocus);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleFocus);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [onFocus, disabled]);
+
+  // On load
+  useEffect(() => {
+    if (disabled || !onLoad) return;
+    latestCallback.current();
+  }, [disabled, onLoad]);
+}
diff --git a/apps/webapp/app/hooks/useOrganizations.ts b/apps/webapp/app/hooks/useOrganizations.ts
index 877605b95..1aa81b110 100644
--- a/apps/webapp/app/hooks/useOrganizations.ts
+++ b/apps/webapp/app/hooks/useOrganizations.ts
@@ -61,3 +61,29 @@ export function useIsImpersonating(matches?: UIMatch[]) {
   });
   return data?.isImpersonating === true;
 }
+
+export type CustomDashboard = UseDataFunctionReturn<typeof orgLoader>["customDashboards"][number];
+
+export function useCustomDashboards(matches?: UIMatch[]) {
+  const data = useTypedMatchesData<typeof orgLoader>({
+    id: "routes/_app.orgs.$organizationSlug",
+    matches,
+  });
+  return data?.customDashboards ?? [];
+}
+
+export function useDashboardLimits(matches?: UIMatch[]) {
+  const data = useTypedMatchesData<typeof orgLoader>({
+    id: "routes/_app.orgs.$organizationSlug",
+    matches,
+  });
+  return data?.dashboardLimits ?? { used: 0, limit: 3 };
+}
+
+export function useWidgetLimitPerDashboard(matches?: UIMatch[]) {
+  const data = useTypedMatchesData<typeof orgLoader>({
+    id: "routes/_app.orgs.$organizationSlug",
+    matches,
+  });
+  return data?.widgetLimitPerDashboard ?? 16;
+}
diff --git a/apps/webapp/app/hooks/useRevalidateOnParam.ts b/apps/webapp/app/hooks/useRevalidateOnParam.ts
new file mode 100644
index 000000000..de05141d9
--- /dev/null
+++ b/apps/webapp/app/hooks/useRevalidateOnParam.ts
@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import { useRevalidator, useSearchParams } from "@remix-run/react";
+
+type UseRevalidateOnParamOptions = {
+  /** The query param(s) that trigger revalidation */
+  param: string | string[];
+  /** Callback fired when revalidation is triggered */
+  onRevalidate?: () => void;
+};
+
+/**
+ * Hook that triggers revalidation when specific query params are present,
+ * then removes those params from the URL.
+ *
+ * Usage:
+ * ```ts
+ * // Revalidate when ?_revalidate is present
+ * useRevalidateOnParam({ param: "_revalidate" });
+ *
+ * // With callback to close a modal
+ * useRevalidateOnParam({
+ *   param: "_revalidate",
+ *   onRevalidate: () => setEditorMode(null),
+ * });
+ * ```
+ *
+ * The redirect should include the param:
+ * ```ts
+ * return redirect(`${dashboardPath}?_revalidate=${Date.now()}`);
+ * ```
+ */
+export function useRevalidateOnParam({ param, onRevalidate }: UseRevalidateOnParamOptions) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const revalidator = useRevalidator();
+
+  const paramArray = Array.isArray(param) ? param : [param];
+
+  useEffect(() => {
+    // Check if any of the trigger params are present
+    const hasParam = paramArray.some((p) => searchParams.has(p));
+
+    if (hasParam) {
+      // Trigger revalidation
+      revalidator.revalidate();
+
+      // Call the callback if provided
+      onRevalidate?.();
+
+      // Remove the trigger params from the URL
+      const newParams = new URLSearchParams(searchParams);
+      paramArray.forEach((p) => newParams.delete(p));
+
+      // Update URL without the params (replace to avoid adding to history)
+      setSearchParams(newParams, { replace: true });
+    }
+  }, [searchParams, setSearchParams, revalidator, paramArray, onRevalidate]);
+}
diff --git a/apps/webapp/app/models/runtimeEnvironment.server.ts b/apps/webapp/app/models/runtimeEnvironment.server.ts
index dc092b7dc..f65112b71 100644
--- a/apps/webapp/app/models/runtimeEnvironment.server.ts
+++ b/apps/webapp/app/models/runtimeEnvironment.server.ts
@@ -308,3 +308,26 @@ export async function findDisplayableEnvironment(
 
   return displayableEnvironment(environment, userId);
 }
+
+export async function hasAccessToEnvironment({
+  environmentId,
+  projectId,
+  organizationId,
+  userId,
+}: {
+  environmentId: string;
+  projectId: string;
+  organizationId: string;
+  userId: string;
+}): Promise<boolean> {
+  const environment = await $replica.runtimeEnvironment.findFirst({
+    where: {
+      id: environmentId,
+      projectId: projectId,
+      organizationId: organizationId,
+      organization: { members: { some: { userId } } },
+    },
+  });
+
+  return environment !== null;
+}
diff --git a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
new file mode 100644
index 000000000..961cf9911
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
@@ -0,0 +1,225 @@
+import { type BuiltInDashboard } from "./MetricDashboardPresenter.server";
+import { z } from "zod";
+
+const overviewDashboard: BuiltInDashboard = {
+  key: "overview",
+  title: "Metrics",
+  layout: {
+    version: "1",
+    layout: [
+      { i: "9lDDdebQ", x: 3, y: 0, w: 3, h: 4 },
+      { i: "VhAgNlB0", x: 0, y: 0, w: 3, h: 4 },
+      { i: "iI5EnhJW", x: 6, y: 0, w: 3, h: 4 },
+      { i: "HtSgJEmp", x: 0, y: 17, w: 12, h: 2, minH: 2, maxH: 2 },
+      { i: "rRbzv-Aq", x: 6, y: 4, w: 6, h: 13 },
+      { i: "j3yFSxLM", x: 0, y: 33, w: 6, h: 11 },
+      { i: "IKB8cENo", x: 6, y: 33, w: 6, h: 11 },
+      { i: "-fHz3CyQ", x: 0, y: 56, w: 12, h: 2, minH: 2, maxH: 2 },
+      { i: "hnKsN482", x: 0, y: 58, w: 12, h: 15 },
+      { i: "if6dds8T", x: 0, y: 19, w: 12, h: 14 },
+      { i: "i3q1Awfz", x: 0, y: 4, w: 6, h: 13 },
+      { i: "Kh0w0fjy", x: 6, y: 44, w: 6, h: 12 },
+      { i: "zybRTAdz", x: 0, y: 44, w: 6, h: 12 },
+      { i: "ff2nVxxt", x: 0, y: 73, w: 12, h: 15 },
+      { i: "Dib0ywb4", x: 0, y: 88, w: 12, h: 2, minH: 2, maxH: 2 },
+      { i: "YsWiQENd", x: 0, y: 90, w: 12, h: 15 },
+      { i: "lc-guCvo", x: 0, y: 105, w: 12, h: 15 },
+      { i: "xyQl3FAd", x: 9, y: 0, w: 3, h: 4 },
+    ],
+    widgets: {
+      "9lDDdebQ": {
+        title: "Total runs",
+        query: "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs\r\nLIMIT\r\n  100",
+        display: { type: "bignumber", column: "total_runs", aggregation: "sum", abbreviate: false },
+      },
+      VhAgNlB0: {
+        title: "Success %",
+        query:
+          "SELECT\r\n  round(countIf (status = 'Completed') * 100.0 / countIf (is_finished = 1), 2) AS success_percentage\r\nFROM\r\n  runs\r\nLIMIT\r\n  100",
+        display: {
+          type: "bignumber",
+          column: "success_percentage",
+          aggregation: "sum",
+          abbreviate: true,
+          suffix: "%",
+        },
+      },
+      iI5EnhJW: {
+        title: "Failed runs",
+        query:
+          "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'System failure', 'Crashed')\r\nLIMIT\r\n  100",
+        display: { type: "bignumber", column: "total_runs", aggregation: "sum", abbreviate: false },
+      },
+      HtSgJEmp: { title: "Failed runs", query: "", display: { type: "title" } },
+      "rRbzv-Aq": {
+        title: "Runs by status",
+        query:
+          "SELECT\r\n  timeBucket (),\r\n  status,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nGROUP BY\r\n  timeBucket,\r\n  status\r\nORDER BY\r\n  timeBucket\r\nLIMIT\r\n  100",
+        display: {
+          type: "chart",
+          chartType: "bar",
+          xAxisColumn: "timebucket",
+          yAxisColumns: ["run_count"],
+          groupByColumn: "status",
+          stacked: true,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+        },
+      },
+      j3yFSxLM: {
+        title: "Top failing tasks",
+        query:
+          "SELECT\r\n  task_identifier AS task,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  task_identifier\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC\r\nLIMIT\r\n  100;",
+        display: { type: "table", prettyFormatting: true, sorting: [] },
+      },
+      IKB8cENo: {
+        title: "Top failing tags",
+        query:
+          "SELECT\r\n  arrayJoin(tags) AS tag,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  tag\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC\r\nLIMIT\r\n  100;",
+        display: { type: "table", prettyFormatting: true, sorting: [] },
+      },
+      "-fHz3CyQ": { title: "Usage and cost", query: "", display: { type: "title" } },
+      hnKsN482: {
+        title: "Cost by task",
+        query:
+          "SELECT\r\n  timeBucket() as time_period,\r\n  task_identifier,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+        display: {
+          type: "chart",
+          chartType: "line",
+          xAxisColumn: "time_period",
+          yAxisColumns: ["total_cost"],
+          groupByColumn: "task_identifier",
+          stacked: true,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+        },
+      },
+      if6dds8T: {
+        title: "Failed runs by task",
+        query:
+          "SELECT\r\n  timeBucket () as time_period,\r\n  task_identifier,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'Crashed', 'System failure')\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+        display: {
+          type: "chart",
+          chartType: "bar",
+          xAxisColumn: "time_period",
+          yAxisColumns: ["run_count"],
+          groupByColumn: "task_identifier",
+          stacked: true,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+        },
+      },
+      i3q1Awfz: {
+        title: "Run success",
+        query:
+          "SELECT\r\n  timeBucket (),\r\n  count() as total,\r\n  countIf (status = 'Completed') / total * 100 AS completed,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) / total * 100 AS failed,\r\nFROM\r\n  runs\r\nGROUP BY\r\n  timeBucket\r\nORDER BY\r\n  timeBucket",
+        display: {
+          type: "chart",
+          chartType: "line",
+          xAxisColumn: "timebucket",
+          yAxisColumns: ["failed", "completed"],
+          groupByColumn: null,
+          stacked: false,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+          seriesColors: { failed: "#f43f5e" },
+        },
+      },
+      Kh0w0fjy: {
+        title: "Top errors",
+        query:
+          "SELECT\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  error\r\nORDER BY\r\n  count DESC\r\nLIMIT\r\n  100",
+        display: { type: "table", prettyFormatting: true, sorting: [] },
+      },
+      zybRTAdz: {
+        title: "Top errors over time",
+        query:
+          "SELECT\r\n  timeBucket(),\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  timeBucket,\r\n  error\r\nORDER BY\r\n  count DESC\r\nLIMIT\r\n  100",
+        display: {
+          type: "chart",
+          chartType: "bar",
+          xAxisColumn: "timebucket",
+          yAxisColumns: ["count"],
+          groupByColumn: "error",
+          stacked: true,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+          seriesColors: { count: "#ef4343" },
+        },
+      },
+      ff2nVxxt: {
+        title: "Cost by machine",
+        query:
+          "SELECT\r\n  timeBucket() as time_period,\r\n  machine,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nWHERE machine != ''\r\nGROUP BY\r\n  time_period,\r\n  machine\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+        display: {
+          type: "chart",
+          chartType: "line",
+          xAxisColumn: "time_period",
+          yAxisColumns: ["total_cost"],
+          groupByColumn: "machine",
+          stacked: true,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+        },
+      },
+      Dib0ywb4: { title: "Versions", query: "", display: { type: "title" } },
+      YsWiQENd: {
+        title: "Runs by version",
+        query:
+          "SELECT\r\n  timeBucket (),\r\n  task_version,\r\n  count() as runs\r\nFROM\r\n  runs\r\nWHERE task_version != ''\r\nGROUP BY\r\n  timeBucket,\r\n  task_version\r\nORDER BY\r\n  timeBucket",
+        display: {
+          type: "chart",
+          chartType: "line",
+          xAxisColumn: "timebucket",
+          yAxisColumns: ["runs"],
+          groupByColumn: "task_version",
+          stacked: false,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+          seriesColors: {},
+        },
+      },
+      "lc-guCvo": {
+        title: "Version success %",
+        query:
+          "SELECT\r\n  timeBucket (),\r\n  task_version,\r\n  count() as total,\r\n  countIf (status = 'Completed') / total * 100 AS success\r\nFROM\r\n  runs\r\nWHERE task_version != ''\r\nGROUP BY\r\n  timeBucket,\r\n  task_version\r\nORDER BY\r\n  timeBucket",
+        display: {
+          type: "chart",
+          chartType: "line",
+          xAxisColumn: "timebucket",
+          yAxisColumns: ["success"],
+          groupByColumn: "task_version",
+          stacked: false,
+          sortByColumn: null,
+          sortDirection: "asc",
+          aggregation: "sum",
+          seriesColors: {},
+        },
+      },
+      xyQl3FAd: {
+        title: "Queued",
+        query:
+          "SELECT\r\n  count() AS queued\r\nFROM\r\n  runs\r\nWHERE status IN ('Dequeued', 'Queued')\r\nLIMIT\r\n  100",
+        display: { type: "bignumber", column: "queued", aggregation: "sum", abbreviate: false },
+      },
+    },
+  },
+};
+
+const builtInDashboards: BuiltInDashboard[] = [overviewDashboard];
+
+export function builtInDashboard(key: string): BuiltInDashboard {
+  const dashboard = builtInDashboards.find((d) => d.key === key);
+  if (!dashboard) {
+    throw new Error(`No built-in dashboard "${key}"`);
+  }
+
+  return dashboard;
+}
diff --git a/apps/webapp/app/presenters/v3/LimitsPresenter.server.ts b/apps/webapp/app/presenters/v3/LimitsPresenter.server.ts
index 11b66d6c0..f7ece24e7 100644
--- a/apps/webapp/app/presenters/v3/LimitsPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/LimitsPresenter.server.ts
@@ -68,6 +68,9 @@ export type LimitsResult = {
     batchProcessingConcurrency: QuotaInfo;
     devQueueSize: QuotaInfo;
     deployedQueueSize: QuotaInfo;
+    metricDashboards: QuotaInfo | null;
+    metricWidgetsPerDashboard: QuotaInfo | null;
+    queryPeriodDays: QuotaInfo | null;
   };
   features: {
     hasStagingEnvironment: FeatureInfo;
@@ -155,6 +158,11 @@ export class LimitsPresenter extends BasePresenter {
       },
     });
 
+    // Get metric dashboard count for this org
+    const metricDashboardCount = await this._replica.metricsDashboard.count({
+      where: { organizationId },
+    });
+
     // Get current rate limit tokens for this environment's API key
     const apiRateLimitTokens = await getRateLimitRemainingTokens(
       "api",
@@ -174,6 +182,9 @@ export class LimitsPresenter extends BasePresenter {
     const branchesLimit = limits?.branches?.number ?? null;
     const logRetentionDaysLimit = limits?.logRetentionDays?.number ?? null;
     const realtimeConnectionsLimit = limits?.realtimeConcurrentConnections?.number ?? null;
+    const metricDashboardsLimit = limits?.metricDashboards?.number ?? null;
+    const metricWidgetsPerDashboardLimit = limits?.metricWidgetsPerDashboard?.number ?? null;
+    const queryPeriodDaysLimit = limits?.queryPeriodDays?.number ?? null;
     const includedUsage = limits?.includedUsage ?? null;
     const hasStagingEnvironment = limits?.hasStagingEnvironment ?? false;
     const supportLevel = limits?.support ?? "community";
@@ -296,6 +307,40 @@ export class LimitsPresenter extends BasePresenter {
           currentUsage: 0, // Would need to query Redis for this
           source: organization.maximumDeployedQueueSize ? "override" : "default",
         },
+        metricDashboards:
+          metricDashboardsLimit !== null
+            ? {
+                name: "Metric dashboards",
+                description: "Maximum number of custom metric dashboards per organization",
+                limit: metricDashboardsLimit,
+                currentUsage: metricDashboardCount,
+                source: "plan",
+                canExceed: limits?.metricDashboards?.canExceed,
+                isUpgradable: true,
+              }
+            : null,
+        metricWidgetsPerDashboard:
+          metricWidgetsPerDashboardLimit !== null
+            ? {
+                name: "Charts per dashboard",
+                description: "Maximum number of charts per metrics dashboard",
+                limit: metricWidgetsPerDashboardLimit,
+                currentUsage: 0, // Varies per dashboard
+                source: "plan",
+                canExceed: limits?.metricWidgetsPerDashboard?.canExceed,
+                isUpgradable: true,
+              }
+            : null,
+        queryPeriodDays:
+          queryPeriodDaysLimit !== null
+            ? {
+                name: "Query period",
+                description: "Maximum number of days a query can look back",
+                limit: queryPeriodDaysLimit,
+                currentUsage: 0, // Not applicable - this is a duration, not a count
+                source: "plan",
+              }
+            : null,
       },
       features: {
         hasStagingEnvironment: {
diff --git a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
new file mode 100644
index 000000000..d5363ddb9
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
@@ -0,0 +1,123 @@
+import { BasePresenter } from "./basePresenter.server";
+import { type QueryScope } from "~/services/queryService.server";
+import { getLimit } from "~/services/platform.v3.server";
+import { z } from "zod";
+import { fromZodError } from "zod-validation-error";
+import { builtInDashboard } from "./BuiltInDashboards.server";
+import { QueryWidgetConfig } from "~/components/metrics/QueryWidget";
+
+export type MetricFilters = {
+  /** Org, project, environment */
+  scope: QueryScope;
+  /** Time filter settings */
+  filterPeriod: string | null;
+  filterFrom: Date | null;
+  filterTo: Date | null;
+  /** Tasks */
+  taskIdentifiers?: string[];
+  /** Queues */
+  queues?: string[];
+  /** Tags */
+  tags?: string[];
+};
+
+export const LayoutItem = z.object({
+  i: z.string(),
+  x: z.number(),
+  y: z.number(),
+  w: z.number(),
+  h: z.number(),
+  minH: z.number().optional(),
+  maxH: z.number().optional(),
+});
+
+export type LayoutItem = z.infer<typeof LayoutItem>;
+
+export const Widget = z.object({
+  title: z.string(),
+  query: z.string().default(""),
+  display: QueryWidgetConfig,
+});
+
+export type Widget = z.infer<typeof Widget>;
+
+export const DashboardLayout = z.discriminatedUnion("version", [
+  z.object({
+    version: z.literal("1"),
+    layout: z.array(LayoutItem),
+    widgets: z.record(Widget),
+  }),
+]);
+
+export type DashboardLayout = z.infer<typeof DashboardLayout>;
+
+export type CustomDashboard = {
+  friendlyId: string;
+  title: string;
+  layout: DashboardLayout;
+  defaultPeriod: string;
+};
+
+export type BuiltInDashboard = {
+  key: string;
+  title: string;
+  layout: DashboardLayout;
+};
+
+/** Returns the dashboard layout */
+export class MetricDashboardPresenter extends BasePresenter {
+  public async customDashboard({
+    friendlyId,
+    organizationId,
+  }: {
+    friendlyId: string;
+    organizationId: string;
+  }): Promise<CustomDashboard> {
+    const dashboard = await this._replica.metricsDashboard.findFirst({
+      where: { friendlyId, organizationId },
+    });
+    if (!dashboard) {
+      throw new Error("No dashboard found");
+    }
+
+    const layout = this.#getLayout(dashboard.layout);
+
+    const defaultPeriod = await getDashboardDefaultPeriod(organizationId);
+
+    return {
+      friendlyId: dashboard.friendlyId,
+      title: dashboard.title,
+      layout,
+      defaultPeriod,
+    };
+  }
+
+  public async builtInDashboard({ organizationId, key }: { organizationId: string; key: string }) {
+    const defaultPeriod = await getDashboardDefaultPeriod(organizationId);
+    const dashboard = builtInDashboard(key);
+    return {
+      ...dashboard,
+      defaultPeriod,
+    };
+  }
+
+  #getLayout(layoutData: string): DashboardLayout {
+    const json = JSON.parse(layoutData);
+    const parsedLayout = DashboardLayout.safeParse(json);
+    if (!parsedLayout.success) {
+      throw fromZodError(parsedLayout.error);
+    }
+
+    return parsedLayout.data;
+  }
+}
+
+/** Dashboard-specific default period (1 day), capped to the org's max query period */
+async function getDashboardDefaultPeriod(organizationId: string): Promise<string> {
+  const idealDefaultPeriodDays = 1;
+  const maxQueryPeriod = await getLimit(organizationId, "queryPeriodDays", 30);
+  if (maxQueryPeriod < idealDefaultPeriodDays) {
+    return `${maxQueryPeriod}d`;
+  }
+  return `${idealDefaultPeriodDays}d`;
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx
index dfaffe993..1806703bb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx
@@ -511,6 +511,11 @@ function QuotasSection({
   if (quotas.devQueueSize.limit !== null) quotaRows.push(quotas.devQueueSize);
   if (quotas.deployedQueueSize.limit !== null) quotaRows.push(quotas.deployedQueueSize);
 
+  // Metric & query quotas
+  if (quotas.metricDashboards) quotaRows.push(quotas.metricDashboards);
+  if (quotas.metricWidgetsPerDashboard) quotaRows.push(quotas.metricWidgetsPerDashboard);
+  if (quotas.queryPeriodDays) quotaRows.push(quotas.queryPeriodDays);
+
   return (
     <div className="flex flex-col gap-3">
       <Header2 className="flex items-center gap-1">
@@ -555,13 +560,16 @@ function QuotaRow({
   isOnTopPlan: boolean;
   billingPath: string;
 }) {
-  // For log retention, we don't show current usage as it's a duration, not a count
-  const isRetentionQuota = quota.name === "Log retention";
+  // For log retention and query period, we don't show current usage as it's a duration, not a count
+  // For widgets per dashboard, the usage varies per dashboard so we don't show a single number
+  const isDurationQuota = quota.name === "Log retention" || quota.name === "Query period";
+  const isPerItemQuota = quota.name === "Charts per dashboard";
+  const isRetentionQuota = isDurationQuota || isPerItemQuota;
   const percentage =
     !isRetentionQuota && quota.limit && quota.limit > 0 ? quota.currentUsage / quota.limit : null;
 
-  // Special handling for Log retention
-  if (quota.name === "Log retention") {
+  // Special handling for duration-based quotas (Log retention, Query period)
+  if (isDurationQuota) {
     const canUpgrade = !isOnTopPlan;
     return (
       <TableRow>
@@ -570,7 +578,9 @@ function QuotaRow({
           <InfoIconTooltip content={quota.description} disableHoverableContent />
         </TableCell>
         <TableCell alignment="right" className="font-medium tabular-nums">
-          {quota.limit !== null ? `${formatNumber(quota.limit)} days` : "Unlimited"}
+          {quota.limit !== null
+              ? `${formatNumber(quota.limit)} ${quota.limit === 1 ? "day" : "days"}`
+              : "Unlimited"}
         </TableCell>
         <TableCell alignment="right" className="tabular-nums text-text-dimmed">
           –
@@ -648,8 +658,8 @@ function QuotaRow({
       </TableCell>
       <TableCell alignment="right" className="font-medium tabular-nums">
         {quota.limit !== null
-          ? isRetentionQuota
-            ? `${formatNumber(quota.limit)} days`
+          ? isDurationQuota
+            ? `${formatNumber(quota.limit)} ${quota.limit === 1 ? "day" : "days"}`
             : formatNumber(quota.limit)
           : "Unlimited"}
       </TableCell>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
new file mode 100644
index 000000000..974f7805b
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
@@ -0,0 +1,295 @@
+import type { TaskTriggerSource } from "@trigger.dev/database";
+import { $replica } from "~/db.server";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { getAllTaskIdentifiers } from "~/models/task.server";
+import { requireUser } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import {
+  type LayoutItem,
+  type Widget,
+  MetricDashboardPresenter,
+} from "~/presenters/v3/MetricDashboardPresenter.server";
+import { type LoaderFunctionArgs } from "@remix-run/node";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { z } from "zod";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "~/utils/cn";
+import ReactGridLayout from "react-grid-layout";
+import { MetricWidget } from "../resources.metric";
+import { TitleWidget } from "~/components/metrics/TitleWidget";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { TimeFilter } from "~/components/runs/v3/SharedFilters";
+import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
+import { ScopeFilter } from "~/components/metrics/ScopeFilter";
+import { QueuesFilter } from "~/components/metrics/QueuesFilter";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { type WidgetData } from "~/components/metrics/QueryWidget";
+import { QueryScopeSchema } from "~/v3/querySchemas";
+
+const ParamSchema = EnvironmentParamSchema.extend({
+  dashboardKey: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const user = await requireUser(request);
+  const { projectParam, organizationSlug, envParam, dashboardKey } = ParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
+  if (!project) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Project not found",
+    });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
+  if (!environment) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Environment not found",
+    });
+  }
+
+  const presenter = new MetricDashboardPresenter();
+  const [dashboard, possibleTasks] = await Promise.all([
+    presenter.builtInDashboard({
+      organizationId: project.organizationId,
+      key: dashboardKey,
+    }),
+    getAllTaskIdentifiers($replica, environment.id),
+  ]);
+
+  return typedjson({
+    ...dashboard,
+    possibleTasks: possibleTasks
+      .map((task) => ({ slug: task.slug, triggerSource: task.triggerSource }))
+      .sort((a, b) => a.slug.localeCompare(b.slug)),
+  });
+};
+
+export default function Page() {
+  const {
+    key,
+    title,
+    layout: dashboardLayout,
+    defaultPeriod,
+    possibleTasks,
+  } = useTypedLoaderData<typeof loader>();
+
+  return (
+    <PageContainer>
+      <NavBar>
+        <PageTitle title={title} />
+      </NavBar>
+      <PageBody scrollable={false}>
+        <div className="h-full">
+          <MetricDashboard
+            key={key}
+            layout={dashboardLayout.layout}
+            widgets={dashboardLayout.widgets}
+            defaultPeriod={defaultPeriod}
+            editable={false}
+            possibleTasks={possibleTasks}
+          />
+        </div>
+      </PageBody>
+    </PageContainer>
+  );
+}
+
+export function MetricDashboard({
+  layout,
+  widgets,
+  defaultPeriod,
+  editable,
+  possibleTasks,
+  onLayoutChange,
+  onEditWidget,
+  onRenameWidget,
+  onDeleteWidget,
+  onDuplicateWidget,
+}: {
+  /** The layout items (positions/sizes) - fully controlled from parent */
+  layout: LayoutItem[];
+  /** The widget configurations keyed by widget ID - fully controlled from parent */
+  widgets: Record<string, Widget>;
+  defaultPeriod: string;
+  editable: boolean;
+  /** Possible tasks for filtering */
+  possibleTasks?: { slug: string; triggerSource: TaskTriggerSource }[];
+  onLayoutChange?: (layout: LayoutItem[]) => void;
+  onEditWidget?: (widgetId: string, widget: WidgetData) => void;
+  onRenameWidget?: (widgetId: string, newTitle: string) => void;
+  onDeleteWidget?: (widgetId: string) => void;
+  onDuplicateWidget?: (widgetId: string, widget: WidgetData) => void;
+}) {
+  const { value, values } = useSearchParams();
+  const { width, containerRef, mounted } = useContainerWidth();
+  const [resizingItemId, setResizingItemId] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isInteracting = resizingItemId !== null || isDragging;
+
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const plan = useCurrentPlan();
+  const maxPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
+
+  const period = value("period");
+  const from = value("from");
+  const to = value("to");
+  const parsedScope = QueryScopeSchema.safeParse(value("scope") ?? "environment");
+  const scope = parsedScope.success ? parsedScope.data : "environment";
+  const tasks = values("tasks").filter((v) => v !== "");
+  const queues = values("queues").filter((v) => v !== "");
+
+  const handleLayoutChange = useCallback(
+    (newLayout: readonly LayoutItem[]) => {
+      const mutableLayout = [...newLayout];
+      onLayoutChange?.(mutableLayout);
+    },
+    [onLayoutChange]
+  );
+
+  // Apply constraints for title widgets: fixed height of 2, allow horizontal resize only
+  const constrainedLayout = useMemo(
+    () =>
+      layout.map((item) => {
+        const widget = widgets[item.i];
+        if (widget?.display.type === "title") {
+          return { ...item, h: 2, minH: 2, maxH: 2 };
+        }
+        return item;
+      }),
+    [layout, widgets]
+  );
+
+  return (
+    <div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
+      <div className="flex items-center gap-1 border-b border-b-grid-bright py-2 pl-2 pr-3">
+        <ScopeFilter />
+        <LogsTaskFilter possibleTasks={possibleTasks ?? []} />
+        <QueuesFilter />
+        <TimeFilter
+          defaultPeriod={defaultPeriod}
+          labelName="Period"
+          hideLabel
+          maxPeriodDays={maxPeriodDays}
+          valueClassName="text-text-bright"
+        />
+      </div>
+      <div
+        ref={containerRef}
+        className={cn(
+          "overflow-y-auto scrollbar-thin scrollbar-track-charcoal-800 scrollbar-thumb-charcoal-700",
+          isInteracting && "select-none"
+        )}
+      >
+        {mounted && (
+          <ReactGridLayout
+            layout={constrainedLayout}
+            width={width}
+            gridConfig={{ cols: 12, rowHeight: 30 }}
+            resizeConfig={{
+              enabled: editable,
+              handles: ["se"],
+            }}
+            dragConfig={{ enabled: editable, handle: ".drag-handle" }}
+            onLayoutChange={handleLayoutChange}
+            onResizeStart={(_layout, oldItem) => setResizingItemId(oldItem?.i ?? null)}
+            onResizeStop={() => setResizingItemId(null)}
+            onDragStart={() => setIsDragging(true)}
+            onDragStop={() => setIsDragging(false)}
+          >
+            {Object.entries(widgets).map(([key, widget]) => (
+              <div key={key}>
+                {widget.display.type === "title" ? (
+                  <TitleWidget
+                    title={widget.title}
+                    isDraggable={editable}
+                    isResizing={resizingItemId === key}
+                    onRename={
+                      onRenameWidget ? (newTitle) => onRenameWidget(key, newTitle) : undefined
+                    }
+                    onDelete={onDeleteWidget ? () => onDeleteWidget(key) : undefined}
+                  />
+                ) : (
+                  <MetricWidget
+                    widgetKey={key}
+                    title={widget.title}
+                    query={widget.query}
+                    scope={scope}
+                    period={period ?? null}
+                    from={from ?? null}
+                    to={to ?? null}
+                    taskIdentifiers={tasks.length > 0 ? tasks : undefined}
+                    queues={queues.length > 0 ? queues : undefined}
+                    config={widget.display}
+                    organizationId={organization.id}
+                    projectId={project.id}
+                    environmentId={environment.id}
+                    refreshIntervalMs={60_000}
+                    isResizing={resizingItemId === key}
+                    isDraggable={editable}
+                    onEdit={
+                      onEditWidget
+                        ? (resultData) => onEditWidget(key, { ...widget, resultData })
+                        : undefined
+                    }
+                    onRename={
+                      onRenameWidget ? (newTitle) => onRenameWidget(key, newTitle) : undefined
+                    }
+                    onDelete={onDeleteWidget ? () => onDeleteWidget(key) : undefined}
+                    onDuplicate={
+                      onDuplicateWidget
+                        ? (resultData) => onDuplicateWidget(key, { ...widget, resultData })
+                        : undefined
+                    }
+                  />
+                )}
+              </div>
+            ))}
+          </ReactGridLayout>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function useContainerWidth(initialWidth = 1280) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(initialWidth);
+  const [mounted, setMounted] = useState(false);
+
+  const measureWidth = useCallback(() => {
+    if (containerRef.current) {
+      setWidth(containerRef.current.offsetWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    measureWidth();
+    setMounted(true);
+
+    const element = containerRef.current;
+    if (!element) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [measureWidth]);
+
+  return { width, containerRef, mounted };
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx
new file mode 100644
index 000000000..ce32bec0a
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx
@@ -0,0 +1,772 @@
+import { ArrowUpCircleIcon, PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
+import { Form, useNavigation } from "@remix-run/react";
+import { IconChartHistogram, IconEdit, IconTypography } from "@tabler/icons-react";
+import { useCallback, useEffect, useState } from "react";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { toast } from "sonner";
+import { z } from "zod";
+import { defaultChartConfig } from "~/components/code/ChartConfigPanel";
+import { Feedback } from "~/components/Feedback";
+import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Header3 } from "~/components/primitives/Headers";
+import { InfoPanel } from "~/components/primitives/InfoPanel";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import {
+  Popover,
+  PopoverContent,
+  PopoverVerticalEllipseTrigger,
+} from "~/components/primitives/Popover";
+import { Sheet, SheetContent } from "~/components/primitives/SheetV3";
+import { ToastUI } from "~/components/primitives/Toast";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { QueryEditor, type QueryEditorSaveData } from "~/components/query/QueryEditor";
+import { $replica, prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { useDashboardEditor } from "~/hooks/useDashboardEditor";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization, useWidgetLimitPerDashboard } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { redirectWithSuccessMessage } from "~/models/message.server";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { getAllTaskIdentifiers } from "~/models/task.server";
+import { MetricDashboardPresenter } from "~/presenters/v3/MetricDashboardPresenter.server";
+import { QueryPresenter } from "~/presenters/v3/QueryPresenter.server";
+import { requireUser, requireUserId } from "~/services/session.server";
+import {
+  EnvironmentParamSchema,
+  queryPath,
+  v3BillingPath,
+  v3BuiltInDashboardPath,
+} from "~/utils/pathBuilder";
+import { MetricDashboard } from "../_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route";
+import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { Type } from "lucide-react";
+
+const ParamSchema = EnvironmentParamSchema.extend({
+  dashboardId: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const user = await requireUser(request);
+  const { projectParam, organizationSlug, envParam, dashboardId } = ParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
+  if (!project) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Project not found",
+    });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
+  if (!environment) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Environment not found",
+    });
+  }
+
+  const dashboardPresenter = new MetricDashboardPresenter();
+  const queryPresenter = new QueryPresenter();
+
+  const [dashboard, { defaultQuery, history }, possibleTasks] = await Promise.all([
+    dashboardPresenter.customDashboard({
+      friendlyId: dashboardId,
+      organizationId: project.organizationId,
+    }),
+    queryPresenter.call({
+      organizationId: project.organizationId,
+    }),
+    getAllTaskIdentifiers($replica, environment.id),
+  ]);
+
+  // Admins and impersonating users can use EXPLAIN
+  const isAdmin = user.admin || user.isImpersonating;
+
+  // Compute widget count from dashboard layout
+  const widgetCount = Object.keys(dashboard.layout.widgets).length;
+
+  return typedjson({
+    ...dashboard,
+    // Query editor data
+    queryDefaultQuery: defaultQuery,
+    queryHistory: history,
+    isAdmin,
+    maxRows: env.QUERY_CLICKHOUSE_MAX_RETURNED_ROWS,
+    possibleTasks: possibleTasks
+      .map((task) => ({ slug: task.slug, triggerSource: task.triggerSource }))
+      .sort((a, b) => a.slug.localeCompare(b.slug)),
+    widgetCount,
+  });
+};
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { projectParam, organizationSlug, envParam, dashboardId } = ParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response("Project not found", { status: 404 });
+  }
+
+  // Load the dashboard
+  const dashboard = await prisma.metricsDashboard.findFirst({
+    where: {
+      friendlyId: dashboardId,
+      organizationId: project.organizationId,
+    },
+  });
+
+  if (!dashboard) {
+    throw new Response("Dashboard not found", { status: 404 });
+  }
+
+  const formData = await request.formData();
+  const action = formData.get("action");
+
+  switch (action) {
+    case "delete": {
+      await prisma.metricsDashboard.delete({
+        where: { id: dashboard.id },
+      });
+
+      return redirectWithSuccessMessage(
+        v3BuiltInDashboardPath(
+          { slug: organizationSlug },
+          { slug: projectParam },
+          { slug: envParam },
+          "overview"
+        ),
+        request,
+        `Deleted "${dashboard.title}" dashboard`
+      );
+    }
+    case "rename": {
+      const newTitle = formData.get("title");
+      if (typeof newTitle !== "string" || newTitle.trim().length === 0) {
+        throw new Response("Title is required", { status: 400 });
+      }
+
+      await prisma.metricsDashboard.update({
+        where: { id: dashboard.id },
+        data: { title: newTitle.trim() },
+      });
+
+      return typedjson({ success: true });
+    }
+    default: {
+      throw new Response("Invalid action", { status: 400 });
+    }
+  }
+};
+
+export default function Page() {
+  const {
+    friendlyId,
+    title,
+    layout: dashboardLayout,
+    defaultPeriod,
+    queryDefaultQuery,
+    queryHistory,
+    isAdmin,
+    maxRows,
+    possibleTasks,
+    widgetCount: initialWidgetCount,
+  } = useTypedLoaderData<typeof loader>();
+
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const plan = useCurrentPlan();
+  const maxPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
+
+  // Widget limits
+  const widgetLimitPerDashboard = useWidgetLimitPerDashboard();
+  const planLimits = (plan?.v3Subscription?.plan?.limits as any)?.metricWidgetsPerDashboard;
+  const canExceedWidgets = typeof planLimits === "object" && planLimits.canExceed === true;
+
+  // Build the action URLs - both use the resource route to avoid full page renders on POST
+  const widgetActionUrl = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dashboards/${friendlyId}/widgets`;
+  const layoutActionUrl = widgetActionUrl;
+
+  // Handle sync errors by showing a toast
+  const handleSyncError = useCallback((error: Error, action: string) => {
+    const actionMessages: Record<string, string> = {
+      add: "Failed to add widget",
+      update: "Failed to update widget",
+      delete: "Failed to delete widget",
+      duplicate: "Failed to duplicate widget",
+      layout: "Failed to save layout",
+    };
+
+    const message = actionMessages[action] || "Failed to save changes";
+
+    toast.custom((t) => (
+      <ToastUI
+        variant="error"
+        message={`${message}. Your changes may not be saved.`}
+        t={t as string}
+        title="Sync Error"
+      />
+    ));
+  }, []);
+
+  // Add title dialog state
+  const [showAddTitleDialog, setShowAddTitleDialog] = useState(false);
+  const [newTitleValue, setNewTitleValue] = useState("");
+
+  // Widget limit dialog state (triggered when hook blocks add/duplicate)
+  const [showWidgetLimitDialog, setShowWidgetLimitDialog] = useState(false);
+
+  const handleWidgetLimitReached = useCallback(() => {
+    setShowWidgetLimitDialog(true);
+  }, []);
+
+  // Use the dashboard editor hook for all state management
+  const { state, actions } = useDashboardEditor({
+    initialData: dashboardLayout,
+    widgetActionUrl,
+    layoutActionUrl,
+    widgetLimit: canExceedWidgets ? undefined : widgetLimitPerDashboard,
+    onSyncError: handleSyncError,
+    onWidgetLimitReached: handleWidgetLimitReached,
+  });
+
+  // Reactive widget count from editor state (title widgets don't count against limits)
+  const currentWidgetCount = Object.values(state.widgets).filter(
+    (w) => w.display.type !== "title"
+  ).length;
+  const totalWidgetCount = Object.keys(state.widgets).length;
+  const widgetLimits = { used: currentWidgetCount, limit: widgetLimitPerDashboard };
+  const widgetIsAtLimit = currentWidgetCount >= widgetLimitPerDashboard;
+  const widgetLimitRatio =
+    widgetLimits.limit > 0 ? widgetLimits.used / widgetLimits.limit : widgetLimits.used > 0 ? 1 : 0;
+  const widgetLimitPercent = Math.min(100, Math.max(0, Math.round(widgetLimitRatio * 100)));
+  const widgetCanUpgrade = plan?.v3Subscription?.plan && !canExceedWidgets;
+
+  // Build the query action URL for the editor
+  const queryActionUrl = queryPath(
+    { slug: organization.slug },
+    { slug: project.slug },
+    { slug: environment.slug }
+  );
+
+  // Handle save from the QueryEditor
+  const handleSave = useCallback(
+    (data: QueryEditorSaveData) => {
+      if (state.editorMode?.type === "add") {
+        actions.addWidget(data.title, data.query, data.config);
+      } else if (state.editorMode?.type === "edit") {
+        actions.updateWidget(state.editorMode.widgetId, data.title, data.query, data.config);
+      }
+    },
+    [state.editorMode, actions]
+  );
+
+  // Render save button for the QueryEditor
+  const renderSaveForm = useCallback(
+    (data: QueryEditorSaveData) => {
+      const isAdd = state.editorMode?.type === "add";
+
+      return (
+        <Button
+          type="button"
+          variant="primary/small"
+          disabled={!data.query}
+          onClick={() => handleSave(data)}
+        >
+          {isAdd ? "Add to dashboard" : "Save changes"}
+        </Button>
+      );
+    },
+    [state.editorMode, handleSave]
+  );
+
+  // Prepare editor props when in editor mode
+  const editorProps = state.editorMode
+    ? (() => {
+        const mode =
+          state.editorMode.type === "add"
+            ? { type: "dashboard-add" as const, dashboardId: friendlyId, dashboardName: title }
+            : {
+                type: "dashboard-edit" as const,
+                dashboardId: friendlyId,
+                dashboardName: title,
+                widgetId: state.editorMode.widgetId,
+                widgetName: state.editorMode.widget.title,
+              };
+
+        // For edit mode, use the widget's existing values as defaults
+        const editorDefaultQuery =
+          state.editorMode.type === "edit" ? state.editorMode.widget.query : queryDefaultQuery;
+        const editorDefaultChartConfig =
+          state.editorMode.type === "edit" && state.editorMode.widget.display.type === "chart"
+            ? {
+                chartType: state.editorMode.widget.display.chartType,
+                xAxisColumn: state.editorMode.widget.display.xAxisColumn,
+                yAxisColumns: state.editorMode.widget.display.yAxisColumns,
+                groupByColumn: state.editorMode.widget.display.groupByColumn,
+                stacked: state.editorMode.widget.display.stacked,
+                sortByColumn: state.editorMode.widget.display.sortByColumn,
+                sortDirection: state.editorMode.widget.display.sortDirection,
+                aggregation: state.editorMode.widget.display.aggregation,
+                seriesColors: state.editorMode.widget.display.seriesColors,
+              }
+            : defaultChartConfig;
+        const editorDefaultBigNumberConfig =
+          state.editorMode.type === "edit" && state.editorMode.widget.display.type === "bignumber"
+            ? {
+                column: state.editorMode.widget.display.column,
+                aggregation: state.editorMode.widget.display.aggregation,
+                sortDirection: state.editorMode.widget.display.sortDirection,
+                abbreviate: state.editorMode.widget.display.abbreviate,
+                prefix: state.editorMode.widget.display.prefix,
+                suffix: state.editorMode.widget.display.suffix,
+              }
+            : undefined;
+        const editorDefaultResultsView =
+          state.editorMode.type === "edit" ? state.editorMode.widget.display.type : "table";
+        // Pass the existing result data when editing
+        const editorDefaultData =
+          state.editorMode.type === "edit" ? state.editorMode.widget.resultData : undefined;
+
+        return {
+          mode,
+          editorDefaultQuery,
+          editorDefaultChartConfig,
+          editorDefaultBigNumberConfig,
+          editorDefaultResultsView,
+          editorDefaultData,
+        };
+      })()
+    : null;
+
+  return (
+    <PageContainer>
+      <NavBar>
+        <PageTitle title={title} />
+        <PageAccessories>
+          {totalWidgetCount > 0 &&
+            (widgetIsAtLimit ? (
+              <>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button variant="primary/small" LeadingIcon={PlusIcon}>
+                      Add chart
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>You've exceeded your widget limit</DialogHeader>
+                    <DialogDescription>
+                      You've used {widgetLimits.used}/{widgetLimits.limit} widgets on this
+                      dashboard.
+                    </DialogDescription>
+                    <DialogFooter>
+                      {widgetCanUpgrade ? (
+                        <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+                          Upgrade
+                        </LinkButton>
+                      ) : (
+                        <Feedback
+                          button={<Button variant="primary/small">Request more</Button>}
+                          defaultValue="help"
+                        />
+                      )}
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+                <Button
+                  variant="secondary/small"
+                  LeadingIcon={Type}
+                  className="pl-1.5"
+                  iconSpacing="gap-x-1"
+                  onClick={() => {
+                    setNewTitleValue("");
+                    setShowAddTitleDialog(true);
+                  }}
+                >
+                  Add title
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button
+                  variant="primary/small"
+                  LeadingIcon={IconChartHistogram}
+                  className="pl-1.5"
+                  iconSpacing="gap-x-1.5"
+                  onClick={actions.openAddEditor}
+                >
+                  Add chart
+                </Button>
+                <Button
+                  variant="secondary/small"
+                  LeadingIcon={Type}
+                  className="pl-1.5"
+                  iconSpacing="gap-x-1"
+                  onClick={() => {
+                    setNewTitleValue("");
+                    setShowAddTitleDialog(true);
+                  }}
+                >
+                  Add title
+                </Button>
+              </>
+            ))}
+          <Popover>
+            <PopoverVerticalEllipseTrigger variant="secondary" />
+            <PopoverContent className="w-fit min-w-[10rem] p-1" align="end">
+              <div className="flex flex-col gap-1">
+                <RenameDashboardDialog title={title} />
+                <DeleteDashboardDialog title={title} />
+              </div>
+            </PopoverContent>
+          </Popover>
+        </PageAccessories>
+      </NavBar>
+      <PageBody scrollable={false}>
+        <div className="flex h-full flex-col">
+          <div className="min-h-0 flex-1">
+            {totalWidgetCount === 0 ? (
+              <MainCenteredContainer className="max-w-md">
+                <InfoPanel
+                  icon={IconChartHistogram}
+                  iconClassName="text-metrics"
+                  panelClassName="max-full"
+                  title="Add your first chart"
+                  accessory={
+                    <Button
+                      variant="primary/small"
+                      LeadingIcon={PlusIcon}
+                      onClick={actions.openAddEditor}
+                    >
+                      Add chart
+                    </Button>
+                  }
+                >
+                  <Paragraph variant="small">
+                    Charts let you visualize your task metrics. Write a query to pull data from your
+                    runs, then choose how to display it on this dashboard.
+                  </Paragraph>
+                </InfoPanel>
+              </MainCenteredContainer>
+            ) : (
+              <MetricDashboard
+                key={friendlyId}
+                layout={state.layout}
+                widgets={state.widgets}
+                defaultPeriod={defaultPeriod}
+                editable={true}
+                possibleTasks={possibleTasks}
+                onLayoutChange={actions.updateLayout}
+                onEditWidget={actions.openEditEditor}
+                onRenameWidget={actions.renameWidget}
+                onDeleteWidget={actions.deleteWidget}
+                onDuplicateWidget={actions.duplicateWidget}
+              />
+            )}
+          </div>
+          <div className="flex w-full items-start justify-between">
+            <div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
+              <SimpleTooltip
+                button={
+                  <div className="size-6">
+                    <svg className="h-full w-full -rotate-90 overflow-visible">
+                      <circle
+                        className="fill-none stroke-grid-bright"
+                        strokeWidth="4"
+                        r="10"
+                        cx="12"
+                        cy="12"
+                      />
+                      <circle
+                        className={`fill-none ${
+                          widgetIsAtLimit ? "stroke-error" : "stroke-success"
+                        }`}
+                        strokeWidth="4"
+                        r="10"
+                        cx="12"
+                        cy="12"
+                        strokeDasharray={`${widgetLimitRatio * 62.8} 62.8`}
+                        strokeDashoffset="0"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  </div>
+                }
+                content={`${widgetLimitPercent}%`}
+              />
+              <div className="flex w-full items-center justify-between gap-6">
+                {widgetIsAtLimit ? (
+                  <Header3 className="text-error">
+                    You've used all {widgetLimits.limit} of your available widgets. Upgrade your
+                    plan to enable more.
+                  </Header3>
+                ) : (
+                  <Header3>
+                    You've used {widgetLimits.used}/{widgetLimits.limit} of your charts
+                  </Header3>
+                )}
+                {widgetCanUpgrade ? (
+                  <LinkButton
+                    to={v3BillingPath(organization)}
+                    variant="secondary/small"
+                    LeadingIcon={ArrowUpCircleIcon}
+                    leadingIconClassName="text-indigo-500"
+                  >
+                    Upgrade
+                  </LinkButton>
+                ) : (
+                  <Feedback
+                    button={<Button variant="secondary/small">Request more…</Button>}
+                    defaultValue="help"
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </PageBody>
+
+      {/* Query Editor Sheet - opens on top of the dashboard */}
+      <Sheet open={!!state.editorMode} onOpenChange={(open) => !open && actions.closeEditor()}>
+        <SheetContent
+          side="right"
+          className="w-[90vw] max-w-none rounded-l-lg border-l border-grid-dimmed p-0 sm:max-w-none"
+        >
+          {editorProps && (
+            <QueryEditor
+              defaultQuery={editorProps.editorDefaultQuery}
+              defaultScope="environment"
+              defaultPeriod={defaultPeriod}
+              defaultResultsView={
+                editorProps.editorDefaultResultsView === "chart"
+                  ? "graph"
+                  : editorProps.editorDefaultResultsView === "bignumber"
+                  ? "bignumber"
+                  : "table"
+              }
+              defaultChartConfig={editorProps.editorDefaultChartConfig}
+              defaultBigNumberConfig={editorProps.editorDefaultBigNumberConfig}
+              defaultData={editorProps.editorDefaultData}
+              history={queryHistory}
+              isAdmin={isAdmin}
+              maxRows={maxRows}
+              queryActionUrl={queryActionUrl}
+              mode={editorProps.mode}
+              maxPeriodDays={maxPeriodDays}
+              save={renderSaveForm}
+              onClose={actions.closeEditor}
+            />
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* Add title dialog */}
+      <Dialog open={showAddTitleDialog} onOpenChange={setShowAddTitleDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>Add title</DialogHeader>
+          <form
+            className="space-y-4 pt-3"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (newTitleValue.trim()) {
+                actions.addTitleWidget(newTitleValue.trim());
+                setShowAddTitleDialog(false);
+              }
+            }}
+          >
+            <InputGroup>
+              <Label>Title</Label>
+              <Input
+                value={newTitleValue}
+                onChange={(e) => setNewTitleValue(e.target.value)}
+                placeholder="Section title"
+                autoFocus
+              />
+            </InputGroup>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="tertiary/medium">Cancel</Button>
+              </DialogClose>
+              <Button type="submit" variant="primary/medium" disabled={!newTitleValue.trim()}>
+                Add
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Widget limit dialog - triggered by hook when add/duplicate is blocked */}
+      <Dialog open={showWidgetLimitDialog} onOpenChange={setShowWidgetLimitDialog}>
+        <DialogContent>
+          <DialogHeader>You've exceeded your widget limit</DialogHeader>
+          <DialogDescription>
+            You've used {widgetLimits.used}/{widgetLimits.limit} widgets on this dashboard.
+          </DialogDescription>
+          <DialogFooter>
+            {widgetCanUpgrade ? (
+              <LinkButton variant="primary/small" to={v3BillingPath(organization)}>
+                Upgrade
+              </LinkButton>
+            ) : (
+              <Feedback
+                button={<Button variant="primary/small">Request more</Button>}
+                defaultValue="help"
+              />
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </PageContainer>
+  );
+}
+
+function RenameDashboardDialog({ title }: { title: string }) {
+  const navigation = useNavigation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [newTitle, setNewTitle] = useState(title);
+
+  const isRenaming =
+    navigation.state !== "idle" &&
+    navigation.formMethod === "post" &&
+    navigation.formData?.get("action") === "rename";
+
+  // Close dialog when navigation completes
+  useEffect(() => {
+    if (navigation.state === "idle") {
+      setIsOpen(false);
+    }
+  }, [navigation.state]);
+
+  // Sync newTitle state when title changes (after successful rename)
+  useEffect(() => {
+    setNewTitle(title);
+  }, [title]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="small-menu-item"
+          LeadingIcon={IconEdit}
+          fullWidth
+          textAlignLeft
+          className="pl-0.5 pr-3"
+          leadingIconClassName="gap-x-0"
+        >
+          Rename dashboard
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>Rename dashboard</DialogHeader>
+        <Form method="post" className="space-y-4">
+          <input type="hidden" name="action" value="rename" />
+          <InputGroup>
+            <Label>Title</Label>
+            <Input
+              name="title"
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              placeholder="Dashboard title"
+              required
+              autoFocus
+            />
+          </InputGroup>
+          <FormButtons
+            confirmButton={
+              <Button
+                type="submit"
+                variant="primary/medium"
+                disabled={isRenaming || !newTitle.trim()}
+              >
+                {isRenaming ? "Saving…" : "Save"}
+              </Button>
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="tertiary/medium">Cancel</Button>
+              </DialogClose>
+            }
+          />
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DeleteDashboardDialog({ title }: { title: string }) {
+  const navigation = useNavigation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const isDeleting =
+    navigation.state !== "idle" &&
+    navigation.formMethod === "post" &&
+    navigation.formData?.get("action") === "delete";
+
+  // Close dialog when navigation completes
+  useEffect(() => {
+    if (navigation.state === "idle") {
+      setIsOpen(false);
+    }
+  }, [navigation.state]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="small-menu-item"
+          LeadingIcon={TrashIcon}
+          leadingIconClassName="text-rose-500"
+          fullWidth
+          textAlignLeft
+        >
+          Delete dashboard
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>Delete dashboard</DialogHeader>
+        <div className="mb-2 mt-4 flex flex-col gap-2">
+          <Paragraph>
+            Are you sure you want to delete <strong>"{title}"</strong>? This action cannot be undone
+            and all widgets on this dashboard will be permanently removed.
+          </Paragraph>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary/medium">Cancel</Button>
+          </DialogClose>
+          <Form method="post">
+            <Button
+              type="submit"
+              name="action"
+              value="delete"
+              variant="danger/medium"
+              LeadingIcon={TrashIcon}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting…" : "Delete"}
+            </Button>
+          </Form>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
index b66c66841..0f3d4042b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
+import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
 import { AIQueryInput } from "~/components/code/AIQueryInput";
 import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import type { AITimeFilter } from "./types";
 
 export function AITabContent({
@@ -41,8 +43,8 @@ export function AITabContent({
       />
 
       <div className="pt-4">
-        <Header3 className="mb-2 text-text-bright">Example prompts</Header3>
-        <div className="space-y-2">
+        <Header3 className="mb-3 text-text-bright">Example prompts</Header3>
+        <div className="flex flex-wrap gap-2">
           {examplePrompts.map((example) => (
             <button
               key={example}
@@ -53,9 +55,12 @@ export function AITabContent({
                   key: (prev?.key ?? 0) + 1,
                 }));
               }}
-              className="block w-full rounded-md border border-grid-dimmed bg-charcoal-800 px-3 py-2 text-left text-sm text-text-dimmed transition-colors hover:border-grid-bright hover:bg-charcoal-750 hover:text-text-bright"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
             >
-              {example}
+              <SparkleListIcon className="size-4 shrink-0 text-text-dimmed transition group-hover:text-indigo-500" />
+              <Paragraph variant="small" className="text-left transition group-hover:text-text-bright">
+                {example}
+              </Paragraph>
             </button>
           ))}
         </div>
@@ -63,4 +68,3 @@ export function AITabContent({
     </div>
   );
 }
-
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
index 0238efd5b..6373f0205 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
@@ -38,6 +38,19 @@ ORDER BY p50_duration_ms DESC
 LIMIT 20`,
     scope: "environment",
   },
+  {
+    title: "Runs over time",
+    description:
+      "Count of runs bucketed over time. The bucket size adjusts automatically to the time range.",
+    query: `SELECT
+  timeBucket(),
+  count() AS run_count
+FROM runs
+GROUP BY timeBucket
+ORDER BY timeBucket
+LIMIT 1000`,
+    scope: "environment",
+  },
   {
     title: "Most expensive 100 runs (past 7d)",
     description: "Top 100 runs by cost over the last 7 days.",
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
index 66492ca94..65c10f3f9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
@@ -1,9 +1,12 @@
 import { useState } from "react";
 import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
-import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { Popover, PopoverTrigger } from "~/components/primitives/Popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
 import { timeFilterRenderValues } from "~/components/runs/v3/SharedFilters";
+import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
 
 const SQL_KEYWORDS = [
   "SELECT",
@@ -91,23 +94,32 @@ export function QueryHistoryPopover({
       <PopoverTrigger asChild>
         <Button
           type="button"
-          variant="tertiary/small"
+          variant="secondary/small"
           LeadingIcon={ClockRotateLeftIcon}
+          leadingIconClassName="-mr-1.5"
+          TrailingIcon={ChevronUpDownIcon}
           disabled={history.length === 0}
         >
           History
         </Button>
       </PopoverTrigger>
-      <PopoverContent
-        className="w-[400px] min-w-0 overflow-hidden p-0"
+      <PopoverPrimitive.Content
+        className={cn(
+          "z-50 w-[400px] min-w-0 overflow-hidden rounded border border-charcoal-700 bg-background-bright p-0 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        )}
         align="start"
         sideOffset={6}
+        style={{ maxHeight: "var(--radix-popover-content-available-height)" }}
       >
-        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="max-h-[40rem] overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="p-1">
             {history.map((item) => {
               // Format time filter display
-              const { valueLabel } = timeFilterRenderValues({ period: item.filterPeriod ?? undefined, from: item.filterFrom ?? undefined, to: item.filterTo ?? undefined });
+              const { valueLabel } = timeFilterRenderValues({
+                period: item.filterPeriod ?? undefined,
+                from: item.filterFrom ?? undefined,
+                to: item.filterTo ?? undefined,
+              });
 
               return (
                 <button
@@ -117,21 +129,16 @@ export function QueryHistoryPopover({
                     onQuerySelected(item);
                     setIsOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
+                  className="flex w-full flex-col gap-1 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-750"
                 >
-                  <div className="flex flex-1 flex-col items-start gap-0.5 overflow-hidden">
+                  <div className="flex w-full flex-col items-start">
                     {item.title ? (
-                      <>
-                        <p className="w-full truncate text-left text-sm font-medium text-text-bright">
-                          {item.title}
-                        </p>
-                        <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
-                          {highlightSQL(item.query)}
-                        </p>
-                      </>
+                      <p className="mb-1 truncate text-left text-sm font-medium text-text-bright">
+                        {item.title}
+                      </p>
                     ) : (
-                      <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-[#9b99ff]">
-                        {highlightSQL(item.query)}
+                      <p className="mb-1 truncate text-left font-mono text-xs text-text-bright">
+                        {item.query.split("\n")[0].slice(0, 60)}
                       </p>
                     )}
                     <div className="flex items-center gap-1.5 text-xs text-text-dimmed">
@@ -140,13 +147,17 @@ export function QueryHistoryPopover({
                       {item.userName && <span>· {item.userName}</span>}
                     </div>
                   </div>
+                  <div className="w-full border-l-2 border-charcoal-600 pl-2.5">
+                    <p className="line-clamp-4 w-full whitespace-pre-wrap text-left font-mono text-xs text-text-dimmed">
+                      {highlightSQL(item.query)}
+                    </p>
+                  </div>
                 </button>
               );
             })}
           </div>
         </div>
-      </PopoverContent>
+      </PopoverPrimitive.Content>
     </Popover>
   );
 }
-
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
index 49cbe26bc..35acfd266 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
@@ -488,6 +488,11 @@ ORDER BY run_count DESC`,
           <FunctionCategory
             title="Date/time functions"
             functions={[
+              {
+                name: "timeBucket()",
+                desc: "Auto-bucket by time period. Uses the table's time column with an interval based on the query's time range.",
+                example: "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket",
+              },
               { name: "now()", desc: "Current date and time", example: "now()" },
               { name: "today()", desc: "Current date", example: "today()" },
               { name: "yesterday()", desc: "Yesterday's date", example: "yesterday()" },
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 72020d8ad..d518f75e4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,87 +1,19 @@
-import {
-  ArrowDownTrayIcon,
-  ArrowsPointingOutIcon,
-  ArrowTrendingUpIcon,
-  ClipboardIcon,
-  TableCellsIcon,
-} from "@heroicons/react/20/solid";
-import type { OutputColumnMetadata } from "@internal/clickhouse";
-import { type WhereClauseCondition } from "@internal/tsql";
-import { useFetcher } from "@remix-run/react";
-import {
-  redirect,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from "@remix-run/server-runtime";
-import parse from "parse-duration";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { typedjson, useTypedFetcher, useTypedLoaderData } from "remix-typedjson";
-import simplur from "simplur";
+import { redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
-import { AlphaTitle } from "~/components/AlphaBadge";
-import {
-  ChartConfigPanel,
-  defaultChartConfig,
-  type ChartConfiguration,
-} from "~/components/code/ChartConfigPanel";
-import { QueryResultsChart } from "~/components/code/QueryResultsChart";
-import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
-import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
-import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
-import { Card } from "~/components/primitives/charts/Card";
-import {
-  ClientTabs,
-  ClientTabsContent,
-  ClientTabsList,
-  ClientTabsTrigger,
-} from "~/components/primitives/ClientTabs";
-import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
-import { Header3 } from "~/components/primitives/Headers";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
-import { Paragraph } from "~/components/primitives/Paragraph";
-import {
-  Popover,
-  PopoverArrowTrigger,
-  PopoverContent,
-  PopoverMenuItem,
-} from "~/components/primitives/Popover";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "~/components/primitives/Resizable";
-import { Select, SelectItem } from "~/components/primitives/Select";
-import { Spinner } from "~/components/primitives/Spinner";
-import { Switch } from "~/components/primitives/Switch";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
-import { TimeFilter, timeFilters } from "~/components/runs/v3/SharedFilters";
-import { prisma } from "~/db.server";
+import { QueryEditor } from "~/components/query/QueryEditor";
 import { env } from "~/env.server";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { useOrganization } from "~/hooks/useOrganizations";
-import { useProject } from "~/hooks/useProject";
-import { useSearchParams } from "~/hooks/useSearchParam";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
-import { QueryPresenter, type QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
-import type { action as titleAction } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-title";
-import { getLimit } from "~/services/platform.v3.server";
-import { executeQuery, type QueryScope } from "~/services/queryService.server";
+import { QueryPresenter } from "~/presenters/v3/QueryPresenter.server";
+import { executeQuery, getDefaultPeriod } from "~/services/queryService.server";
 import { requireUser } from "~/services/session.server";
-import { downloadFile, rowsToCSV, rowsToJSON } from "~/utils/dataExport";
-import { EnvironmentParamSchema, organizationBillingPath } from "~/utils/pathBuilder";
+import { EnvironmentParamSchema, queryPath } from "~/utils/pathBuilder";
 import { canAccessQuery } from "~/v3/canAccessQuery.server";
-import { querySchemas } from "~/v3/querySchemas";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
-import { QueryHelpSidebar } from "./QueryHelpSidebar";
-import { QueryHistoryPopover } from "./QueryHistoryPopover";
-import type { AITimeFilter } from "./types";
-import { formatDurationNanoseconds } from "@trigger.dev/core/v3";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useEnvironment } from "~/hooks/useEnvironment";
 
 /** Convert a Date or ISO string to ISO string format */
 function toISOString(value: Date | string): string {
@@ -91,12 +23,6 @@ function toISOString(value: Date | string): string {
   return value.toISOString();
 }
 
-const scopeOptions = [
-  { value: "environment", label: "Environment" },
-  { value: "project", label: "Project" },
-  { value: "organization", label: "Organization" },
-] as const;
-
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
   const { projectParam, organizationSlug, envParam } = EnvironmentParamSchema.parse(params);
@@ -144,15 +70,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-async function getDefaultPeriod(organizationId: string): Promise<string> {
-  const idealDefaultPeriodDays = 7;
-  const maxQueryPeriod = await getLimit(organizationId, "queryPeriodDays", 30);
-  if (maxQueryPeriod < idealDefaultPeriodDays) {
-    return `${maxQueryPeriod}d`;
-  }
-  return `${idealDefaultPeriodDays}d`;
-}
-
 const ActionSchema = z.object({
   query: z.string().min(1, "Query is required"),
   scope: z.enum(["environment", "project", "organization"]),
@@ -257,87 +174,29 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   const isAdmin = user.admin || user.isImpersonating;
   const explain = explainParam === "true" && isAdmin;
 
-  // Build time filter fallback for triggered_at column
-  const defaultPeriod = await getDefaultPeriod(project.organizationId);
-  const timeFilter = timeFilters({
-    period: period ?? undefined,
-    from: from ?? undefined,
-    to: to ?? undefined,
-    defaultPeriod,
-  });
-
-  // Calculate the effective "from" date the user is requesting (for period clipping check)
-  // This is null only when the user specifies just a "to" date (rare case)
-  let requestedFromDate: Date | null = null;
-  if (timeFilter.from) {
-    requestedFromDate = new Date(timeFilter.from);
-  } else if (!timeFilter.to) {
-    // Period specified (or default) - calculate from now
-    const periodMs = parse(timeFilter.period ?? defaultPeriod) ?? 7 * 24 * 60 * 60 * 1000;
-    requestedFromDate = new Date(Date.now() - periodMs);
-  }
-
-  // Build the fallback WHERE condition based on what the user specified
-  let triggeredAtFallback: WhereClauseCondition;
-  if (timeFilter.from && timeFilter.to) {
-    triggeredAtFallback = { op: "between", low: timeFilter.from, high: timeFilter.to };
-  } else if (timeFilter.from) {
-    triggeredAtFallback = { op: "gte", value: timeFilter.from };
-  } else if (timeFilter.to) {
-    triggeredAtFallback = { op: "lte", value: timeFilter.to };
-  } else {
-    triggeredAtFallback = { op: "gte", value: requestedFromDate! };
-  }
-
-  const maxQueryPeriod = await getLimit(project.organizationId, "queryPeriodDays", 30);
-  const maxQueryPeriodDate = new Date(Date.now() - maxQueryPeriod * 24 * 60 * 60 * 1000);
-
-  // Check if the requested time period exceeds the plan limit
-  const periodClipped = requestedFromDate !== null && requestedFromDate < maxQueryPeriodDate;
-
-  // Force tenant isolation and time period limits
-  const enforcedWhereClause = {
-    organization_id: { op: "eq", value: project.organizationId },
-    project_id:
-      scope === "project" || scope === "environment" ? { op: "eq", value: project.id } : undefined,
-    environment_id: scope === "environment" ? { op: "eq", value: environment.id } : undefined,
-    triggered_at: { op: "gte", value: maxQueryPeriodDate },
-  } satisfies Record<string, WhereClauseCondition | undefined>;
-
   try {
-    const [error, result, queryId] = await executeQuery({
+    const queryResult = await executeQuery({
       name: "query-page",
       query,
-      schema: z.record(z.any()),
-      tableSchema: querySchemas,
-      transformValues: true,
       scope,
       organizationId: project.organizationId,
       projectId: project.id,
       environmentId: environment.id,
       explain,
-      enforcedWhereClause,
-      whereClauseFallback: {
-        triggered_at: triggeredAtFallback,
-      },
+      period,
+      from,
+      to,
       history: {
         source: "DASHBOARD",
         userId: user.id,
         skip: user.isImpersonating,
-        timeFilter: {
-          // Save the effective period used for the query (timeFilters() handles defaults)
-          // Only save period if no custom from/to range was specified
-          period: timeFilter.from || timeFilter.to ? undefined : timeFilter.period,
-          from: timeFilter.from,
-          to: timeFilter.to,
-        },
       },
     });
 
-    if (error) {
+    if (!queryResult.success) {
       return typedjson(
         {
-          error: error.message,
+          error: queryResult.error.message,
           rows: null,
           columns: null,
           stats: null,
@@ -354,15 +213,16 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
     return typedjson({
       error: null,
-      rows: result.rows,
-      columns: result.columns,
-      stats: result.stats,
-      hiddenColumns: result.hiddenColumns ?? null,
-      reachedMaxRows: result.reachedMaxRows,
-      explainOutput: result.explainOutput ?? null,
-      generatedSql: result.generatedSql ?? null,
-      queryId,
-      periodClipped: periodClipped ? maxQueryPeriod : null,
+      rows: queryResult.result.rows,
+      columns: queryResult.result.columns,
+      stats: queryResult.result.stats,
+      hiddenColumns: queryResult.result.hiddenColumns ?? null,
+      reachedMaxRows: queryResult.result.reachedMaxRows,
+      explainOutput: queryResult.result.explainOutput ?? null,
+      generatedSql: queryResult.result.generatedSql ?? null,
+      queryId: queryResult.queryId,
+      periodClipped: queryResult.periodClipped,
+      maxQueryPeriod: queryResult.maxQueryPeriod,
     });
   } catch (err) {
     const errorMessage = err instanceof Error ? err.message : "Unknown error executing query";
@@ -384,777 +244,47 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   }
 };
 
-/** Handle for imperatively setting the query from outside */
-interface QueryEditorFormHandle {
-  setQuery: (query: string) => void;
-  setScope: (scope: QueryScope) => void;
-  getQuery: () => string;
-  setTimeFilter: (filter: { period?: string; from?: string; to?: string }) => void;
-}
-
-/** Self-contained query editor with form - isolates query state from parent */
-const QueryEditorForm = forwardRef<
-  QueryEditorFormHandle,
-  {
-    defaultPeriod: string;
-    defaultQuery: string;
-    defaultScope: QueryScope;
-    defaultTimeFilter?: { period?: string; from?: string; to?: string };
-    history: QueryHistoryItem[];
-    fetcher: ReturnType<typeof useTypedFetcher<typeof action>>;
-    isAdmin: boolean;
-    onQuerySubmit?: () => void;
-    onHistorySelected?: (item: QueryHistoryItem) => void;
-  }
->(function QueryEditorForm(
-  {
-    defaultPeriod,
-    defaultQuery,
-    defaultScope,
-    defaultTimeFilter,
-    history,
-    fetcher,
-    isAdmin,
-    onQuerySubmit,
-    onHistorySelected,
-  },
-  ref
-) {
-  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
-  const [query, setQuery] = useState(defaultQuery);
-  const [scope, setScope] = useState<QueryScope>(defaultScope);
-  const formRef = useRef<HTMLFormElement>(null);
-  const prevFetcherState = useRef(fetcher.state);
-  const plan = useCurrentPlan();
-  const maxPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
-
-  // Notify parent when query is submitted (for title generation)
-  useEffect(() => {
-    if (prevFetcherState.current !== "submitting" && fetcher.state === "submitting") {
-      onQuerySubmit?.();
-    }
-    prevFetcherState.current = fetcher.state;
-  }, [fetcher.state, onQuerySubmit]);
-
-  // Get time filter values - initialize from props (which may come from history)
-  const [period, setPeriod] = useState<string | undefined>(defaultTimeFilter?.period);
-  const [from, setFrom] = useState<string | undefined>(defaultTimeFilter?.from);
-  const [to, setTo] = useState<string | undefined>(defaultTimeFilter?.to);
-
-  // Check if the query contains triggered_at in a WHERE clause
-  // This disables the time filter UI since the user is filtering in their query
-  const queryHasTriggeredAt = /\bWHERE\b[\s\S]*\btriggered_at\b/i.test(query);
-
-  // Expose methods to parent for external query setting (history, AI, examples)
-  useImperativeHandle(
-    ref,
-    () => ({
-      setQuery,
-      setScope,
-      getQuery: () => query,
-      setTimeFilter: (filter: { period?: string; from?: string; to?: string }) => {
-        setPeriod(filter.period);
-        setFrom(filter.from);
-        setTo(filter.to);
-      },
-    }),
-    [query]
-  );
-
-  const handleHistorySelected = useCallback(
-    (item: QueryHistoryItem) => {
-      setQuery(item.query);
-      setScope(item.scope);
-      // Apply time filter from history item
-      // Note: filterFrom/filterTo might be Date objects or ISO strings depending on serialization
-      setPeriod(item.filterPeriod ?? undefined);
-      setFrom(item.filterFrom ? toISOString(item.filterFrom) : undefined);
-      setTo(item.filterTo ? toISOString(item.filterTo) : undefined);
-      // Notify parent about history selection (for title)
-      onHistorySelected?.(item);
-    },
-    [onHistorySelected]
-  );
-
-  return (
-    <div className="flex h-full flex-col gap-2 bg-charcoal-900 pb-2">
-      <TSQLEditor
-        defaultValue={query}
-        onChange={setQuery}
-        schema={querySchemas}
-        linterEnabled={true}
-        showCopyButton={true}
-        showClearButton={true}
-        className="min-h-0 flex-1"
-      />
-      <fetcher.Form
-        ref={formRef}
-        method="post"
-        className="flex items-center justify-between gap-2 px-2"
-      >
-        <input type="hidden" name="query" value={query} />
-        <input type="hidden" name="scope" value={scope} />
-        {/* Pass time filter values to action */}
-        <input type="hidden" name="period" value={period ?? ""} />
-        <input type="hidden" name="from" value={from ?? ""} />
-        <input type="hidden" name="to" value={to ?? ""} />
-        <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
-        <div className="flex items-center gap-1">
-          {isAdmin && (
-            <Button
-              type="submit"
-              name="explain"
-              value="true"
-              variant="minimal/small"
-              disabled={isLoading || !query.trim()}
-            >
-              Explain
-            </Button>
-          )}
-          <Select
-            value={scope}
-            setValue={(value) => setScope(value as QueryScope)}
-            variant="tertiary/small"
-            dropdownIcon={true}
-            items={[...scopeOptions]}
-            text={(value) => {
-              return <ScopeItem scope={value as QueryScope} />;
-            }}
-          >
-            {(items) =>
-              items.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  <ScopeItem scope={item.value as QueryScope} />
-                </SelectItem>
-              ))
-            }
-          </Select>
-          {queryHasTriggeredAt ? (
-            <SimpleTooltip
-              button={
-                <Button variant="tertiary/small" disabled={true} type="button">
-                  Set in query
-                </Button>
-              }
-              content="Your query includes a WHERE clause with triggered_at so this filter is disabled."
-            />
-          ) : (
-            <TimeFilter
-              defaultPeriod={defaultPeriod}
-              labelName="Triggered"
-              hideLabel
-              period={period}
-              from={from}
-              to={to}
-              applyShortcut={{ key: "enter", enabledOnInputElements: true }}
-              onValueChange={(values) => {
-                flushSync(() => {
-                  setPeriod(values.period);
-                  setFrom(values.from);
-                  setTo(values.to);
-                });
-                if (formRef.current) {
-                  fetcher.submit(formRef.current);
-                }
-              }}
-              maxPeriodDays={maxPeriodDays}
-            />
-          )}
-          <Button
-            type="submit"
-            variant="primary/small"
-            disabled={isLoading || !query.trim()}
-            shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }}
-            LeadingIcon={isLoading ? <Spinner className="size-4" color="white" /> : undefined}
-          >
-            {isLoading ? "Querying..." : "Query"}
-          </Button>
-        </div>
-      </fetcher.Form>
-    </div>
-  );
-});
-
 export default function Page() {
   const { defaultPeriod, defaultQuery, history, isAdmin, maxRows } =
     useTypedLoaderData<typeof loader>();
-  const fetcher = useTypedFetcher<typeof action>();
-  const results = fetcher.data;
-  const { replace: replaceSearchParams } = useSearchParams();
 
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
+  const plan = useCurrentPlan();
+  const maxPeriodDays = plan?.v3Subscription?.plan?.limits?.queryPeriodDays?.number;
 
   // Use most recent history item if available, otherwise fall back to defaults
   const initialQuery = history.length > 0 ? history[0].query : defaultQuery;
-  const initialScope: QueryScope = history.length > 0 ? history[0].scope : "environment";
+  const initialScope = history.length > 0 ? history[0].scope : "environment";
   const initialTimeFilter =
     history.length > 0
       ? {
           period: history[0].filterPeriod ?? undefined,
-          // Note: filterFrom/filterTo might be Date objects or ISO strings depending on serialization
           from: history[0].filterFrom ? toISOString(history[0].filterFrom) : undefined,
           to: history[0].filterTo ? toISOString(history[0].filterTo) : undefined,
         }
       : undefined;
 
-  const editorRef = useRef<QueryEditorFormHandle>(null);
-  const [prettyFormatting, setPrettyFormatting] = useState(true);
-  const [resultsView, setResultsView] = useState<"table" | "graph">("table");
-  const [chartConfig, setChartConfig] = useState<ChartConfiguration>(defaultChartConfig);
-  const [sidebarTab, setSidebarTab] = useState<string>("ai");
-  const [aiFixRequest, setAiFixRequest] = useState<{ prompt: string; key: number } | null>(null);
-
-  // Title generation state
-  const titleFetcher = useFetcher<typeof titleAction>();
-  const isTitleLoading = titleFetcher.state !== "idle";
-  const generatedTitle = titleFetcher.data?.title;
-  const [historyTitle, setHistoryTitle] = useState<string | null>(
-    history.length > 0 ? history[0].title ?? null : null
-  );
-
-  // Effective title: history title takes precedence, then generated
-  const queryTitle = historyTitle ?? generatedTitle ?? null;
-
-  // Track whether we should generate a title for the current results
-  const [shouldGenerateTitle, setShouldGenerateTitle] = useState(false);
-
-  // Trigger title generation when query succeeds (only for new queries, not history)
-  useEffect(() => {
-    if (
-      results?.rows &&
-      !results.error &&
-      results.queryId &&
-      shouldGenerateTitle &&
-      !historyTitle &&
-      titleFetcher.state === "idle"
-    ) {
-      const currentQuery = editorRef.current?.getQuery();
-      if (currentQuery) {
-        titleFetcher.submit(
-          { query: currentQuery, queryId: results.queryId },
-          {
-            method: "POST",
-            action: `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/query/ai-title`,
-            encType: "application/json",
-          }
-        );
-        setShouldGenerateTitle(false);
-      }
-    }
-  }, [
-    results,
-    shouldGenerateTitle,
-    historyTitle,
-    titleFetcher,
-    organization.slug,
-    project.slug,
-    environment.slug,
-  ]);
-
-  const handleTryFixError = useCallback((errorMessage: string) => {
-    setSidebarTab("ai");
-    setAiFixRequest((prev) => ({
-      prompt: `Fix this query error: ${errorMessage}`,
-      key: (prev?.key ?? 0) + 1,
-    }));
-  }, []);
-
-  // Handle time filter changes from AI
-  const handleTimeFilterChange = useCallback(
-    (filter: AITimeFilter) => {
-      replaceSearchParams({
-        period: filter.period,
-        from: filter.from,
-        to: filter.to,
-        // Clear cursor/direction when time filter changes
-        cursor: undefined,
-        direction: undefined,
-      });
-    },
-    [replaceSearchParams]
-  );
-
-  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
-
-  // Create a stable key from columns to detect schema changes
-  const columnsKey = results?.columns
-    ? results.columns.map((c) => `${c.name}:${c.type}`).join(",")
-    : "";
-
-  // Reset chart config only when column schema actually changes
-  // This allows re-running queries with different WHERE clauses without losing config
-  useEffect(() => {
-    if (columnsKey) {
-      setChartConfig(defaultChartConfig);
-    }
-  }, [columnsKey]);
-
-  const handleChartConfigChange = useCallback((config: ChartConfiguration) => {
-    setChartConfig(config);
-  }, []);
-
-  // Handle query submission - prepare for title generation
-  const handleQuerySubmit = useCallback(() => {
-    setHistoryTitle(null); // Clear history title when running a new query
-    setShouldGenerateTitle(true); // Enable title generation for new results
-  }, []);
-
-  // Handle history selection - use existing title if available
-  const handleHistorySelected = useCallback((item: QueryHistoryItem) => {
-    setHistoryTitle(item.title ?? null);
-    setShouldGenerateTitle(false); // Don't generate title for history items
-  }, []);
-
-  return (
-    <PageContainer>
-      <NavBar>
-        <PageTitle title={<AlphaTitle>Query</AlphaTitle>} />
-      </NavBar>
-      <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
-          <ResizablePanel id="query-main" className="h-full">
-            <ResizablePanelGroup orientation="vertical" className="h-full overflow-hidden">
-              {/* Query editor - isolated component to prevent re-renders */}
-              <ResizablePanel
-                id="query-editor"
-                min="100px"
-                default="300px"
-                className="overflow-hidden"
-              >
-                <QueryEditorForm
-                  ref={editorRef}
-                  defaultPeriod={defaultPeriod}
-                  defaultQuery={initialQuery}
-                  defaultScope={initialScope}
-                  defaultTimeFilter={initialTimeFilter}
-                  history={history}
-                  fetcher={fetcher}
-                  isAdmin={isAdmin}
-                  onQuerySubmit={handleQuerySubmit}
-                  onHistorySelected={handleHistorySelected}
-                />
-              </ResizablePanel>
-              <ResizableHandle id="query-editor-handle" />
-              {/* Results */}
-              <ResizablePanel
-                id="query-results"
-                min="200px"
-                className="overflow-hidden bg-charcoal-800"
-              >
-                <ClientTabs
-                  value={resultsView}
-                  onValueChange={(v) => setResultsView(v as "table" | "graph")}
-                  className="grid h-full max-h-full min-h-0 grid-rows-[auto_1fr] overflow-hidden"
-                >
-                  <ClientTabsList
-                    variant="underline"
-                    className="shrink-0 overflow-hidden pl-3 pr-1"
-                  >
-                    <ClientTabsTrigger value="table" variant="underline" layoutId="results-tabs">
-                      Table
-                    </ClientTabsTrigger>
-                    <ClientTabsTrigger
-                      value="graph"
-                      variant="underline"
-                      layoutId="results-tabs"
-                      disabled={!results?.rows || results.rows.length === 0}
-                    >
-                      Graph
-                    </ClientTabsTrigger>
-                    {results?.rows ? (
-                      <div className="flex flex-1 items-center justify-end gap-2 overflow-hidden border-b border-grid-dimmed pl-3">
-                        <div className="flex items-center gap-2 overflow-hidden truncate">
-                          {results.reachedMaxRows ? (
-                            <SimpleTooltip
-                              buttonClassName="text-warning text-xs"
-                              button={`${results.rows.length.toLocaleString()} Results`}
-                              content={`Results are limited to ${maxRows.toLocaleString()} rows maximum.`}
-                            />
-                          ) : (
-                            <span className="text-xs text-text-dimmed">
-                              {results.rows.length > 0
-                                ? `${results.rows.length.toLocaleString()} Results`
-                                : "Results"}
-                            </span>
-                          )}
-                          {results?.stats && (
-                            <span className="text-xs text-text-dimmed">
-                              {formatDurationNanoseconds(parseInt(results.stats.elapsed_ns, 10))}
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-1">
-                          {results?.rows && results?.columns && results.rows.length > 0 && (
-                            <ExportResultsButton rows={results.rows} columns={results.columns} />
-                          )}
-                          {resultsView === "table" && (
-                            <Switch
-                              variant="secondary/small"
-                              label="Pretty formatting"
-                              checked={prettyFormatting}
-                              onCheckedChange={setPrettyFormatting}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    ) : null}
-                  </ClientTabsList>
-                  <ClientTabsContent value="table" className="min-h-0 overflow-y-hidden">
-                    {isLoading ? (
-                      <div className="flex items-center gap-2 p-4 text-sm text-text-dimmed">
-                        <Spinner className="size-4" />
-                        <span>Executing query...</span>
-                      </div>
-                    ) : results?.error ? (
-                      <div className="p-4">
-                        <pre className="whitespace-pre-wrap text-sm text-red-400">
-                          {results.error}
-                        </pre>
-                        <Button
-                          variant="tertiary/small"
-                          className="mt-3"
-                          LeadingIcon={AISparkleIcon}
-                          onClick={() => handleTryFixError(results.error!)}
-                        >
-                          Try fix error
-                        </Button>
-                      </div>
-                    ) : results?.explainOutput ? (
-                      <div className="flex h-full flex-col gap-4 overflow-auto p-3">
-                        {results.generatedSql && (
-                          <div>
-                            <Header3 className="mb-2">Generated ClickHouse SQL</Header3>
-                            <div className="overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
-                              <pre className="whitespace-pre font-mono text-xs text-text-bright">
-                                {results.generatedSql}
-                              </pre>
-                            </div>
-                          </div>
-                        )}
-                        <div className="flex min-h-0 flex-1 flex-col">
-                          <Header3 className="mb-2">Query Execution Plan</Header3>
-                          <div className="min-h-0 flex-1 overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
-                            <pre className="whitespace-pre font-mono text-xs text-text-bright">
-                              {results.explainOutput}
-                            </pre>
-                          </div>
-                        </div>
-                      </div>
-                    ) : results?.rows && results?.columns ? (
-                      <div
-                        className={`grid h-full max-h-full overflow-hidden bg-charcoal-900 ${
-                          hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
-                            ? "grid-rows-[auto_1fr]"
-                            : "grid-rows-[1fr]"
-                        }`}
-                      >
-                        <QueryResultsCallouts
-                          hiddenColumns={results.hiddenColumns}
-                          periodClipped={results.periodClipped}
-                          organizationSlug={organization.slug}
-                        />
-                        <div className="overflow-hidden p-2">
-                          <Card className="h-full overflow-hidden px-0 pb-0">
-                            <Card.Header>
-                              <div className="flex items-center gap-1.5">
-                                <TableCellsIcon className="size-5 text-indigo-500" />
-                                {isTitleLoading ? (
-                                  <span className="flex items-center gap-2 text-text-dimmed">
-                                    <Spinner className="size-3" /> Generating title...
-                                  </span>
-                                ) : (
-                                  queryTitle ?? "Results"
-                                )}
-                              </div>
-                            </Card.Header>
-                            <Card.Content className="min-h-0 flex-1 overflow-hidden p-0">
-                              <TSQLResultsTable
-                                rows={results.rows}
-                                columns={results.columns}
-                                prettyFormatting={prettyFormatting}
-                              />
-                            </Card.Content>
-                          </Card>
-                        </div>
-                      </div>
-                    ) : (
-                      <Paragraph variant="small" className="p-4 text-text-dimmed">
-                        Run a query to see results here.
-                      </Paragraph>
-                    )}
-                  </ClientTabsContent>
-                  <ClientTabsContent
-                    value="graph"
-                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
-                      results?.rows &&
-                      results.rows.length > 0 &&
-                      hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
-                        ? "grid-rows-[auto_1fr]"
-                        : "grid-rows-[1fr]"
-                    }`}
-                  >
-                    {results?.rows && results?.columns && results.rows.length > 0 ? (
-                      <>
-                        <QueryResultsCallouts
-                          hiddenColumns={results.hiddenColumns}
-                          periodClipped={results.periodClipped}
-                          organizationSlug={organization.slug}
-                        />
-                        <ResultsChart
-                          rows={results.rows}
-                          columns={results.columns}
-                          chartConfig={chartConfig}
-                          onChartConfigChange={handleChartConfigChange}
-                          queryTitle={queryTitle}
-                          isTitleLoading={isTitleLoading}
-                        />
-                      </>
-                    ) : (
-                      <Paragraph variant="small" className="p-4 text-text-dimmed">
-                        Run a query to visualize results.
-                      </Paragraph>
-                    )}
-                  </ClientTabsContent>
-                </ClientTabs>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </ResizablePanel>
-          <ResizableHandle id="query-handle" />
-          <ResizablePanel
-            id="query-help"
-            min="200px"
-            collapsible
-            collapsedSize="20px"
-            default="400px"
-            max="500px"
-            className="w-full"
-          >
-            <QueryHelpSidebar
-              onTryExample={(exampleQuery, exampleScope) => {
-                editorRef.current?.setQuery(exampleQuery);
-                editorRef.current?.setScope(exampleScope);
-              }}
-              onQueryGenerated={(query) => {
-                const formatted = autoFormatSQL(query);
-                editorRef.current?.setQuery(formatted);
-              }}
-              onTimeFilterChange={handleTimeFilterChange}
-              getCurrentQuery={() => editorRef.current?.getQuery() ?? ""}
-              activeTab={sidebarTab}
-              onTabChange={setSidebarTab}
-              aiFixRequest={aiFixRequest}
-            />
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </PageBody>
-    </PageContainer>
-  );
-}
-
-function ExportResultsButton({
-  rows,
-  columns,
-}: {
-  rows: Record<string, unknown>[];
-  columns: OutputColumnMetadata[];
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleCopyCSV = () => {
-    const csv = rowsToCSV(rows, columns);
-    navigator.clipboard.writeText(csv);
-    setIsOpen(false);
-  };
-
-  const handleExportCSV = () => {
-    const csv = rowsToCSV(rows, columns);
-    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, "");
-    downloadFile(csv, `query-results-${timestamp}.csv`, "text/csv");
-    setIsOpen(false);
-  };
-
-  const handleCopyJSON = () => {
-    const json = rowsToJSON(rows);
-    navigator.clipboard.writeText(json);
-    setIsOpen(false);
-  };
-
-  const handleExportJSON = () => {
-    const json = rowsToJSON(rows);
-    const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, "");
-    downloadFile(json, `query-results-${timestamp}.json`, "application/json");
-    setIsOpen(false);
-  };
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverArrowTrigger variant="tertiary" isOpen={isOpen}>
-        Export
-      </PopoverArrowTrigger>
-      <PopoverContent className="min-w-[10rem] p-1" align="end">
-        <div className="flex flex-col gap-1">
-          <PopoverMenuItem icon={ClipboardIcon} title="Copy CSV" onClick={handleCopyCSV} />
-          <PopoverMenuItem icon={ArrowDownTrayIcon} title="Export CSV" onClick={handleExportCSV} />
-          <PopoverMenuItem icon={ClipboardIcon} title="Copy JSON" onClick={handleCopyJSON} />
-          <PopoverMenuItem
-            icon={ArrowDownTrayIcon}
-            title="Export JSON"
-            onClick={handleExportJSON}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function ScopeItem({ scope }: { scope: QueryScope }) {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
-
-  switch (scope) {
-    case "organization":
-      return `Org: ${organization.title}`;
-    case "project":
-      return `Project: ${project.name}`;
-    case "environment":
-      return (
-        <>
-          Env: <EnvironmentLabel environment={environment} />
-        </>
-      );
-    default:
-      return scope;
-  }
-}
-
-function QueryResultsCallouts({
-  hiddenColumns,
-  periodClipped,
-  organizationSlug,
-}: {
-  hiddenColumns: string[] | null | undefined;
-  periodClipped: number | null | undefined;
-  organizationSlug: string;
-}) {
-  const hasCallouts = (hiddenColumns && hiddenColumns.length > 0) || periodClipped;
-
-  if (!hasCallouts) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col gap-2 px-2 pt-2">
-      {hiddenColumns && hiddenColumns.length > 0 && (
-        <Callout variant="warning" className="shrink-0 text-sm">
-          <code>SELECT *</code> doesn't return all columns because it's slow. The following columns
-          are not shown: <span className="font-mono text-xs">{hiddenColumns.join(", ")}</span>.
-          Specify them explicitly to include them.
-        </Callout>
-      )}
-      {periodClipped && (
-        <Callout
-          variant="pricing"
-          cta={
-            <LinkButton
-              variant="primary/small"
-              to={organizationBillingPath({ slug: organizationSlug })}
-            >
-              Upgrade
-            </LinkButton>
-          }
-          className="items-center"
-        >
-          {simplur`Results are limited to the last ${periodClipped} day[|s] based on your plan.`}
-        </Callout>
-      )}
-    </div>
-  );
-}
-
-function hasQueryResultsCallouts(
-  hiddenColumns: string[] | null | undefined,
-  periodClipped: number | null | undefined
-): boolean {
-  return (hiddenColumns && hiddenColumns.length > 0) || !!periodClipped;
-}
-
-function ResultsChart({
-  rows,
-  columns,
-  chartConfig,
-  onChartConfigChange,
-  queryTitle,
-  isTitleLoading,
-}: {
-  rows: Record<string, unknown>[];
-  columns: OutputColumnMetadata[];
-  chartConfig: ChartConfiguration;
-  onChartConfigChange: (config: ChartConfiguration) => void;
-  queryTitle: string | null;
-  isTitleLoading: boolean;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const titleContent = isTitleLoading ? (
-    <span className="flex items-center gap-2 text-text-dimmed">
-      <Spinner className="size-3" /> Generating title...
-    </span>
-  ) : (
-    queryTitle ?? "Chart"
+  // Build the query action URL for this page
+  const queryActionUrl = queryPath(
+    { slug: organization.slug },
+    { slug: project.slug },
+    { slug: environment.slug }
   );
 
   return (
-    <>
-      <ResizablePanelGroup className="overflow-hidden">
-        <ResizablePanel id="chart-results">
-          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
-            <Card className="h-full">
-              <Card.Header>
-                <div className="flex items-center gap-1.5">
-                  <ArrowTrendingUpIcon className="size-5 text-indigo-500" />
-                  {titleContent}
-                </div>
-                <Card.Accessory>
-                  <Button
-                    variant="minimal/small"
-                    LeadingIcon={ArrowsPointingOutIcon}
-                    onClick={() => setIsOpen(true)}
-                  />
-                </Card.Accessory>
-              </Card.Header>
-              <Card.Content className="h-full min-h-0 flex-1">
-                <QueryResultsChart
-                  rows={rows}
-                  columns={columns}
-                  config={chartConfig}
-                  onViewAllLegendItems={() => setIsOpen(true)}
-                />
-              </Card.Content>
-            </Card>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle id="chart-split" />
-        <ResizablePanel id="chart-config" min="50px" default="200px">
-          <ChartConfigPanel columns={columns} config={chartConfig} onChange={onChartConfigChange} />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent fullscreen>
-          <DialogHeader>{queryTitle ?? "Chart"}</DialogHeader>
-          <div className="h-full min-h-0 w-full flex-1 overflow-hidden pt-4">
-            <QueryResultsChart
-              rows={rows}
-              columns={columns}
-              config={chartConfig}
-              fullLegend={true}
-              legendScrollable={true}
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+    <QueryEditor
+      defaultQuery={initialQuery}
+      defaultScope={initialScope}
+      defaultPeriod={defaultPeriod}
+      defaultTimeFilter={initialTimeFilter}
+      history={history}
+      isAdmin={isAdmin}
+      maxRows={maxRows}
+      queryActionUrl={queryActionUrl}
+      mode={{ type: "standalone" }}
+      maxPeriodDays={maxPeriodDays}
+    />
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
index 8a22bdefc..6fea018af 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
@@ -3,6 +3,7 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
+import { prisma } from "~/db.server";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
@@ -87,9 +88,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   firstDayOfNextMonth.setUTCDate(1);
   firstDayOfNextMonth.setUTCHours(0, 0, 0, 0);
 
-  const [plan, usage] = await Promise.all([
+  const [plan, usage, customDashboards] = await Promise.all([
     getCurrentPlan(organization.id),
     getCachedUsage(organization.id, { from: firstDayOfMonth, to: firstDayOfNextMonth }),
+    prisma.metricsDashboard.findMany({
+      where: { organizationId: organization.id },
+      select: {
+        friendlyId: true,
+        title: true,
+        layout: true,
+      },
+      orderBy: { createdAt: "desc" },
+    }),
   ]);
 
   let hasExceededFreeTier = false;
@@ -99,6 +109,39 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     usagePercentage = usage.cents / plan.v3Subscription.plan.limits.includedUsage;
   }
 
+  // Derive metric dashboard limit from plan, fallback to 3
+  const metricDashboardsLimitValue = plan?.v3Subscription?.plan?.limits?.metricDashboards;
+  const dashboardLimit =
+    typeof metricDashboardsLimitValue === "number"
+      ? metricDashboardsLimitValue
+      : metricDashboardsLimitValue?.number ?? 3;
+
+  // Derive widget-per-dashboard limit from plan, fallback to 16
+  const metricWidgetsLimitValue = plan?.v3Subscription?.plan?.limits?.metricWidgetsPerDashboard;
+  const widgetLimitPerDashboard =
+    typeof metricWidgetsLimitValue === "number"
+      ? metricWidgetsLimitValue
+      : metricWidgetsLimitValue?.number ?? 16;
+
+  // Compute widget counts per dashboard from layout JSON
+  const customDashboardsWithWidgetCount = customDashboards.map((d) => {
+    let widgetCount = 0;
+    try {
+      const layout = JSON.parse(String(d.layout)) as Record<string, unknown>;
+      const widgets = layout.widgets;
+      if (widgets && typeof widgets === "object") {
+        widgetCount = Object.keys(widgets as Record<string, unknown>).length;
+      }
+    } catch {
+      // ignore parse errors
+    }
+    return {
+      friendlyId: d.friendlyId,
+      title: d.title,
+      widgetCount,
+    };
+  });
+
   return typedjson({
     organizations,
     organization,
@@ -106,6 +149,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     environment,
     isImpersonating: !!impersonationId,
     currentPlan: { ...plan, v3Usage: { ...usage, hasExceededFreeTier, usagePercentage } },
+    customDashboards: customDashboardsWithWidgetCount,
+    dashboardLimits: {
+      used: customDashboards.length,
+      limit: dashboardLimit,
+    },
+    widgetLimitPerDashboard,
   });
 };
 
diff --git a/apps/webapp/app/routes/resources.metric.tsx b/apps/webapp/app/routes/resources.metric.tsx
new file mode 100644
index 000000000..ffee45a03
--- /dev/null
+++ b/apps/webapp/app/routes/resources.metric.tsx
@@ -0,0 +1,283 @@
+import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { z } from "zod";
+import { requireUserId } from "~/services/session.server";
+import { hasAccessToEnvironment } from "~/models/runtimeEnvironment.server";
+import { executeQuery } from "~/services/queryService.server";
+import {
+  QueryWidget,
+  type QueryWidgetConfig,
+  type QueryWidgetData,
+} from "~/components/metrics/QueryWidget";
+import { useElementVisibility } from "~/hooks/useElementVisibility";
+import { useInterval } from "~/hooks/useInterval";
+
+const Scope = z.union([z.literal("environment"), z.literal("organization"), z.literal("project")]);
+
+// Response type for the action
+type MetricWidgetActionResponse =
+  | { success: false; error: string }
+  | {
+      success: true;
+      data: {
+        rows: Record<string, unknown>[];
+        columns: OutputColumnMetadata[];
+        stats: { elapsed_ns: string } | null;
+        hiddenColumns: string[] | null;
+        reachedMaxRows: boolean;
+        periodClipped: number | null;
+        maxQueryPeriod: number | undefined;
+        timeRange: { from: string; to: string };
+      };
+    };
+
+const MetricWidgetQuery = z.object({
+  query: z.string(),
+  organizationId: z.string(),
+  projectId: z.string(),
+  environmentId: z.string(),
+  scope: Scope,
+  period: z.string().nullable(),
+  from: z.string().nullable(),
+  to: z.string().nullable(),
+  taskIdentifiers: z.array(z.string()).optional(),
+  queues: z.array(z.string()).optional(),
+  tags: z.array(z.string()).optional(),
+});
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const userId = await requireUserId(request);
+
+  const data = await request.json();
+  const submission = MetricWidgetQuery.safeParse(data);
+
+  if (!submission.success) {
+    return json(
+      {
+        success: false as const,
+        error: "Invalid input",
+      },
+      { status: 400 }
+    );
+  }
+
+  const {
+    query,
+    organizationId,
+    projectId,
+    environmentId,
+    scope,
+    period,
+    from,
+    to,
+    taskIdentifiers,
+    queues,
+    tags,
+  } = submission.data;
+
+  // Check they should be able to access it
+  const hasAccess = await hasAccessToEnvironment({
+    environmentId,
+    projectId,
+    organizationId,
+    userId,
+  });
+
+  if (!hasAccess) {
+    return json(
+      {
+        success: false as const,
+        error: "You don't have permission for this resource",
+      },
+      { status: 400 }
+    );
+  }
+
+  const queryResult = await executeQuery({
+    name: "query-page",
+    query,
+    scope,
+    organizationId,
+    projectId,
+    environmentId,
+    period,
+    from,
+    to,
+    taskIdentifiers,
+    queues,
+    // Set higher concurrency if many widgets are on screen at once
+    customOrgConcurrencyLimit: 15,
+  });
+
+  if (!queryResult.success) {
+    return json(
+      {
+        success: false as const,
+        error: queryResult.error.message,
+      },
+      { status: 400 }
+    );
+  }
+
+  return json({
+    success: true as const,
+    data: {
+      rows: queryResult.result.rows,
+      columns: queryResult.result.columns,
+      stats: queryResult.result.stats,
+      hiddenColumns: queryResult.result.hiddenColumns ?? null,
+      reachedMaxRows: queryResult.result.reachedMaxRows,
+      periodClipped: queryResult.periodClipped,
+      maxQueryPeriod: queryResult.maxQueryPeriod,
+      timeRange: {
+        from: queryResult.timeRange.from.toISOString(),
+        to: queryResult.timeRange.to.toISOString(),
+      },
+    },
+  });
+};
+
+type MetricWidgetProps = {
+  /** Unique key for this widget - used to identify the fetcher */
+  widgetKey: string;
+  title: string;
+  config: QueryWidgetConfig;
+  refreshIntervalMs?: number;
+  isResizing?: boolean;
+  isDraggable?: boolean;
+  /** Callback when edit button is clicked - receives current data */
+  onEdit?: (data: QueryWidgetData) => void;
+  /** Callback when rename is clicked - receives new title */
+  onRename?: (newTitle: string) => void;
+  /** Callback when delete is clicked */
+  onDelete?: () => void;
+  /** Callback when duplicate is clicked - receives current data */
+  onDuplicate?: (data: QueryWidgetData) => void;
+} & z.infer<typeof MetricWidgetQuery>;
+
+export function MetricWidget({
+  widgetKey,
+  title,
+  config,
+  refreshIntervalMs,
+  isResizing,
+  isDraggable,
+  onEdit,
+  onRename,
+  onDelete,
+  onDuplicate,
+  ...props
+}: MetricWidgetProps) {
+  const [response, setResponse] = useState<MetricWidgetActionResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Track the latest props so the submit callback always uses fresh values
+  // without needing to be recreated (which would cause useInterval to re-register listeners).
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
+  const submit = useCallback(() => {
+    // Skip fetching if the widget is not visible on screen
+    if (!isVisibleRef.current) return;
+
+    // Abort any in-flight request for this widget
+    abortControllerRef.current?.abort();
+
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    setIsLoading(true);
+
+    fetch(`/resources/metric`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(propsRef.current),
+      signal: controller.signal,
+    })
+      .then(async (res) => {
+        try {
+          return (await res.json()) as MetricWidgetActionResponse;
+        } catch {
+          throw new Error(`Request failed (${res.status})`);
+        }
+      })
+      .then((data) => {
+        if (!controller.signal.aborted) {
+          setResponse(data);
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        if (!controller.signal.aborted) {
+          // Only surface the error if there's no existing successful data to preserve
+          setResponse((prev) =>
+            prev?.success ? prev : { success: false, error: err.message || "Network error" }
+          );
+          setIsLoading(false);
+        }
+      });
+  }, []);
+
+  // Track visibility so we only fetch for on-screen widgets.
+  // When a widget scrolls into view and has no data yet, trigger a load.
+  const { ref: visibilityRef, isVisibleRef } = useElementVisibility({
+    onVisibilityChange: (visible) => {
+      if (visible && !response) {
+        submit();
+      }
+    },
+  });
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  // Reload periodically and on focus (onLoad: false — the useEffect below handles initial load)
+  useInterval({ interval: refreshIntervalMs, callback: submit, onLoad: false });
+
+  // Reload on mount and when query, time period, or filters change
+  useEffect(() => {
+    submit();
+  }, [
+    submit,
+    props.query,
+    props.from,
+    props.to,
+    props.period,
+    props.scope,
+    JSON.stringify(props.taskIdentifiers),
+    JSON.stringify(props.queues),
+  ]);
+
+  const data = response?.success
+    ? { rows: response.data.rows, columns: response.data.columns }
+    : { rows: [], columns: [] };
+
+  const timeRange = response?.success ? response.data.timeRange : undefined;
+
+  return (
+    <div ref={visibilityRef} className="h-full">
+      <QueryWidget
+        title={title}
+        titleString={title}
+        query={props.query}
+        config={config}
+        isLoading={isLoading}
+        data={data}
+        timeRange={timeRange}
+        error={response?.success === false ? response.error : undefined}
+        isResizing={isResizing}
+        isDraggable={isDraggable}
+        onEdit={onEdit}
+        onRename={onRename}
+        onDelete={onDelete}
+        onDuplicate={onDuplicate}
+      />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx
new file mode 100644
index 000000000..51bbded59
--- /dev/null
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx
@@ -0,0 +1,492 @@
+import { type ActionFunctionArgs } from "@remix-run/node";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+import { typedjson } from "remix-typedjson";
+import { prisma } from "~/db.server";
+import { QueryWidgetConfig } from "~/components/metrics/QueryWidget";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import {
+  DashboardLayout,
+  LayoutItem,
+} from "~/presenters/v3/MetricDashboardPresenter.server";
+import { getCurrentPlan } from "~/services/platform.v3.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+
+// Schemas for each action type
+const AddWidgetSchema = z.object({
+  widgetId: z.string().min(1, "Widget ID is required").nullish(),
+  title: z.string().min(1, "Title is required"),
+  query: z.string().default(""),
+  config: z.string().transform((str, ctx) => {
+    try {
+      const parsed = JSON.parse(str);
+      const result = QueryWidgetConfig.safeParse(parsed);
+      if (!result.success) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid widget config",
+        });
+        return z.NEVER;
+      }
+      return result.data;
+    } catch {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid JSON",
+      });
+      return z.NEVER;
+    }
+  }),
+});
+
+const UpdateWidgetSchema = z.object({
+  widgetId: z.string().min(1, "Widget ID is required"),
+  title: z.string().min(1, "Title is required"),
+  query: z.string().min(1, "Query is required"),
+  config: z.string().transform((str, ctx) => {
+    try {
+      const parsed = JSON.parse(str);
+      const result = QueryWidgetConfig.safeParse(parsed);
+      if (!result.success) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid widget config",
+        });
+        return z.NEVER;
+      }
+      return result.data;
+    } catch {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid JSON",
+      });
+      return z.NEVER;
+    }
+  }),
+});
+
+const RenameWidgetSchema = z.object({
+  widgetId: z.string().min(1, "Widget ID is required"),
+  title: z.string().min(1, "Title is required"),
+});
+
+const DeleteWidgetSchema = z.object({
+  widgetId: z.string().min(1, "Widget ID is required"),
+});
+
+const DuplicateWidgetSchema = z.object({
+  widgetId: z.string().min(1, "Widget ID is required"),
+  newId: z.string().min(1, "New widget ID is required").nullish(),
+});
+
+const SaveLayoutSchema = z.object({
+  layout: z.string().transform((str, ctx) => {
+    try {
+      const parsed = JSON.parse(str);
+      const result = z.array(LayoutItem).safeParse(parsed);
+      if (!result.success) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid layout format",
+        });
+        return z.NEVER;
+      }
+      return result.data;
+    } catch {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid JSON",
+      });
+      return z.NEVER;
+    }
+  }),
+});
+
+const ParamsSchema = EnvironmentParamSchema.extend({
+  dashboardId: z.string(),
+});
+
+// Check widget limit for add/duplicate actions (title widgets don't count)
+async function checkWidgetLimit(
+  existingLayout: z.infer<typeof DashboardLayout>,
+  organizationId: string
+) {
+  const currentWidgetCount = Object.values(existingLayout.widgets).filter(
+    (w) => w.display.type !== "title"
+  ).length;
+  const plan = await getCurrentPlan(organizationId);
+  const metricWidgetsLimitValue = (plan?.v3Subscription?.plan?.limits as any)
+    ?.metricWidgetsPerDashboard;
+  const widgetLimit =
+    typeof metricWidgetsLimitValue === "number"
+      ? metricWidgetsLimitValue
+      : (metricWidgetsLimitValue?.number ?? 16);
+
+  if (currentWidgetCount >= widgetLimit) {
+    throw new Response("Widget limit reached", { status: 403 });
+  }
+}
+
+// Optimistic concurrency save: uses updateMany so we can include updatedAt
+// in the where clause. If another request modified the dashboard between our
+// read and this write, updatedAt won't match and count will be 0.
+async function saveDashboardLayout(
+  dashboardId: string,
+  expectedUpdatedAt: Date,
+  updatedLayout: z.infer<typeof DashboardLayout>
+) {
+  const result = await prisma.metricsDashboard.updateMany({
+    where: { id: dashboardId, updatedAt: expectedUpdatedAt },
+    data: {
+      layout: JSON.stringify(updatedLayout),
+    },
+  });
+
+  if (result.count === 0) {
+    throw new Response(
+      "Dashboard was modified by another request. Please refresh and try again.",
+      { status: 409 }
+    );
+  }
+}
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam, dashboardId } = ParamsSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response("Project not found", { status: 404 });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response("Environment not found", { status: 404 });
+  }
+
+  // Load the dashboard
+  const dashboard = await prisma.metricsDashboard.findFirst({
+    where: {
+      friendlyId: dashboardId,
+      organizationId: project.organizationId,
+    },
+  });
+
+  if (!dashboard) {
+    throw new Response("Dashboard not found", { status: 404 });
+  }
+
+  const formData = await request.formData();
+  const action = formData.get("action");
+
+  // Parse existing layout (shared across all actions)
+  let existingLayout: z.infer<typeof DashboardLayout>;
+  try {
+    const parsed = JSON.parse(dashboard.layout);
+    const layoutResult = DashboardLayout.safeParse(parsed);
+    if (!layoutResult.success) {
+      // For add action, we can start with empty layout
+      if (action === "add") {
+        existingLayout = {
+          version: "1",
+          layout: [],
+          widgets: {},
+        };
+      } else {
+        throw new Response("Invalid dashboard layout", { status: 500 });
+      }
+    } else {
+      existingLayout = layoutResult.data;
+    }
+  } catch (e) {
+    if (e instanceof Response) throw e;
+    if (action === "add") {
+      existingLayout = {
+        version: "1",
+        layout: [],
+        widgets: {},
+      };
+    } else {
+      throw new Response("Failed to parse dashboard layout", { status: 500 });
+    }
+  }
+
+  switch (action) {
+    case "add": {
+      const rawData = {
+        widgetId: formData.get("widgetId"),
+        title: formData.get("title"),
+        query: formData.get("query"),
+        config: formData.get("config"),
+      };
+
+      const result = AddWidgetSchema.safeParse(rawData);
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      const { title, query, config } = result.data;
+
+      // Validate that non-title widgets have a query
+      if (config.type !== "title" && !query) {
+        throw new Response("Query is required for chart widgets", { status: 400 });
+      }
+
+      // Title widgets don't count against the limit
+      if (config.type !== "title") {
+        await checkWidgetLimit(existingLayout, project.organizationId);
+      }
+
+      // Use client-provided widget ID if available, otherwise generate one
+      // Using the client's ID ensures optimistic UI state stays in sync with the server
+      const widgetId = result.data.widgetId || nanoid(8);
+
+      // Calculate position at the bottom
+      let maxBottom = 0;
+      for (const item of existingLayout.layout) {
+        const itemBottom = item.y + item.h;
+        if (itemBottom > maxBottom) {
+          maxBottom = itemBottom;
+        }
+      }
+
+      // Add new layout item (full width, height depends on widget type)
+      const newLayoutItem = {
+        i: widgetId,
+        x: 0,
+        y: maxBottom,
+        w: 12,
+        h: config.type === "title" ? 2 : 15,
+      };
+
+      // Add new widget
+      const newWidget = {
+        title,
+        query,
+        display: config,
+      };
+
+      // Update the layout
+      const updatedLayout = {
+        ...existingLayout,
+        layout: [...existingLayout.layout, newLayoutItem],
+        widgets: {
+          ...existingLayout.widgets,
+          [widgetId]: newWidget,
+        },
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true, widgetId });
+    }
+
+    case "update": {
+      const rawData = {
+        widgetId: formData.get("widgetId"),
+        title: formData.get("title"),
+        query: formData.get("query"),
+        config: formData.get("config"),
+      };
+
+      const result = UpdateWidgetSchema.safeParse(rawData);
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      const { widgetId, title, query, config } = result.data;
+
+      // Check if widget exists
+      if (!existingLayout.widgets[widgetId]) {
+        throw new Response("Widget not found", { status: 404 });
+      }
+
+      // Update the widget
+      const updatedWidget = {
+        title,
+        query,
+        display: config,
+      };
+
+      // Update the layout
+      const updatedLayout = {
+        ...existingLayout,
+        widgets: {
+          ...existingLayout.widgets,
+          [widgetId]: updatedWidget,
+        },
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true, updatedTitle: title });
+    }
+
+    case "rename": {
+      const rawData = {
+        widgetId: formData.get("widgetId"),
+        title: formData.get("title"),
+      };
+
+      const result = RenameWidgetSchema.safeParse(rawData);
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      const { widgetId, title } = result.data;
+
+      // Check if widget exists
+      if (!existingLayout.widgets[widgetId]) {
+        throw new Response("Widget not found", { status: 404 });
+      }
+
+      // Update just the title
+      const updatedLayout = {
+        ...existingLayout,
+        widgets: {
+          ...existingLayout.widgets,
+          [widgetId]: {
+            ...existingLayout.widgets[widgetId],
+            title,
+          },
+        },
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true, renamedTitle: title });
+    }
+
+    case "delete": {
+      const rawData = {
+        widgetId: formData.get("widgetId"),
+      };
+
+      const result = DeleteWidgetSchema.safeParse(rawData);
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      const { widgetId } = result.data;
+
+      // Get widget title before deleting (for the success message)
+      const widget = existingLayout.widgets[widgetId];
+      const widgetTitle = widget?.title ?? "Widget";
+
+      // Remove widget from layout and widgets
+      const updatedLayout = {
+        ...existingLayout,
+        layout: existingLayout.layout.filter((item) => item.i !== widgetId),
+        widgets: Object.fromEntries(
+          Object.entries(existingLayout.widgets).filter(([key]) => key !== widgetId)
+        ),
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true, deletedTitle: widgetTitle });
+    }
+
+    case "duplicate": {
+      await checkWidgetLimit(existingLayout, project.organizationId);
+
+      const rawData = {
+        widgetId: formData.get("widgetId"),
+        newId: formData.get("newId"),
+      };
+
+      const result = DuplicateWidgetSchema.safeParse(rawData);
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      const { widgetId } = result.data;
+
+      // Find the original widget
+      const originalWidget = existingLayout.widgets[widgetId];
+      if (!originalWidget) {
+        throw new Response("Widget not found", { status: 404 });
+      }
+
+      // Find the original layout item
+      const originalLayoutItem = existingLayout.layout.find((item) => item.i === widgetId);
+      if (!originalLayoutItem) {
+        throw new Response("Widget layout not found", { status: 404 });
+      }
+
+      // Use client-provided ID if available, otherwise generate one
+      // Using the client's ID ensures optimistic UI state stays in sync with the server
+      const newWidgetId = result.data.newId || nanoid(8);
+
+      // Calculate position at the bottom
+      let maxBottom = 0;
+      for (const item of existingLayout.layout) {
+        const itemBottom = item.y + item.h;
+        if (itemBottom > maxBottom) {
+          maxBottom = itemBottom;
+        }
+      }
+
+      // Create new layout item with same dimensions but at the bottom
+      const newLayoutItem = {
+        i: newWidgetId,
+        x: 0,
+        y: maxBottom,
+        w: originalLayoutItem.w,
+        h: originalLayoutItem.h,
+      };
+
+      // Create new widget with "(Copy)" suffix
+      const newWidget = {
+        ...originalWidget,
+        title: `${originalWidget.title} (Copy)`,
+      };
+
+      // Update the layout
+      const updatedLayout = {
+        ...existingLayout,
+        layout: [...existingLayout.layout, newLayoutItem],
+        widgets: {
+          ...existingLayout.widgets,
+          [newWidgetId]: newWidget,
+        },
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true, duplicatedTitle: originalWidget.title });
+    }
+
+    case "layout": {
+      const result = SaveLayoutSchema.safeParse({
+        layout: formData.get("layout"),
+      });
+
+      if (!result.success) {
+        throw new Response("Invalid form data: " + result.error.message, { status: 400 });
+      }
+
+      // Update layout positions while preserving widgets
+      const updatedLayout = {
+        ...existingLayout,
+        layout: result.data.layout,
+      };
+
+      // Save to database (with optimistic concurrency check)
+      await saveDashboardLayout(dashboard.id, dashboard.updatedAt, updatedLayout);
+
+      return typedjson({ success: true });
+    }
+
+    default: {
+      throw new Response("Invalid action", { status: 400 });
+    }
+  }
+};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.create.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.create.tsx
new file mode 100644
index 000000000..1e33b3b68
--- /dev/null
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.create.tsx
@@ -0,0 +1,84 @@
+import { redirect, type ActionFunctionArgs } from "@remix-run/node";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { findProjectBySlug } from "~/models/project.server";
+import { getCurrentPlan } from "~/services/platform.v3.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema, v3CustomDashboardPath } from "~/utils/pathBuilder";
+import { generateFriendlyId } from "~/v3/friendlyIdentifiers";
+
+const CreateDashboardSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string().optional().default(""),
+});
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response("Project not found", { status: 404 });
+  }
+
+  // Check dashboard limit
+  const [plan, existingCount] = await Promise.all([
+    getCurrentPlan(project.organizationId),
+    prisma.metricsDashboard.count({
+      where: { organizationId: project.organizationId },
+    }),
+  ]);
+
+  const metricDashboardsLimitValue = (plan?.v3Subscription?.plan?.limits as any)
+    ?.metricDashboards;
+  const dashboardLimit =
+    typeof metricDashboardsLimitValue === "number"
+      ? metricDashboardsLimitValue
+      : (metricDashboardsLimitValue?.number ?? 3);
+
+  if (existingCount >= dashboardLimit) {
+    throw new Response("Dashboard limit reached", { status: 403 });
+  }
+
+  const formData = await request.formData();
+  const rawData = {
+    title: formData.get("title"),
+    description: formData.get("description") ?? "",
+  };
+
+  const result = CreateDashboardSchema.safeParse(rawData);
+  if (!result.success) {
+    throw new Response("Invalid form data", { status: 400 });
+  }
+
+  const { title, description } = result.data;
+
+  // Create empty default layout
+  const defaultLayout = JSON.stringify({
+    version: "1",
+    layout: [],
+    widgets: {},
+  });
+
+  const dashboard = await prisma.metricsDashboard.create({
+    data: {
+      friendlyId: generateFriendlyId("dashboard"),
+      title,
+      description,
+      organizationId: project.organizationId,
+      projectId: project.id,
+      ownerId: userId,
+      layout: defaultLayout,
+    },
+  });
+
+  // Redirect to the new dashboard
+  return redirect(
+    v3CustomDashboardPath(
+      { slug: organizationSlug },
+      { slug: projectParam },
+      { slug: envParam },
+      { friendlyId: dashboard.friendlyId }
+    )
+  );
+};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 4e1c5ce40..b08cc63ff 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -11,7 +11,7 @@ import { type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { uiComponent } from "@team-plain/typescript-sdk";
 import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import {
-  AddOnPricing,
+  type AddOnPricing,
   type FreePlanDefinition,
   type Limits,
   type PaidPlanDefinition,
@@ -225,6 +225,18 @@ const pricingDefinitions = {
     title: "Additional branches",
     content: "Then $10/month per branch",
   },
+  metricDashboards: {
+    title: "Custom dashboards",
+    content: "Custom metric dashboards for monitoring and visualizing your task data.",
+  },
+  additionalDashboards: {
+    title: "Additional dashboards",
+    content: "Then $10/month per dashboard",
+  },
+  queryPeriod: {
+    title: "Query period",
+    content: "The maximum number of days a query can look back when analyzing your task data.",
+  },
 };
 
 type PricingPlansProps = {
@@ -534,8 +546,10 @@ export function TierFree({
             <TeamMembers limits={plan.limits} />
             <Environments limits={plan.limits} />
             <Branches limits={plan.limits} />
+            <MetricDashboards limits={plan.limits} />
             <Schedules limits={plan.limits} />
             <LogRetention limits={plan.limits} />
+            <QueryPeriod limits={plan.limits} />
             <SupportLevel limits={plan.limits} />
             <Alerts limits={plan.limits} />
             <RealtimeConcurrency limits={plan.limits} />
@@ -651,8 +665,10 @@ export function TierHobby({
         <TeamMembers limits={plan.limits} />
         <Environments limits={plan.limits} />
         <Branches limits={plan.limits} />
+        <MetricDashboards limits={plan.limits} />
         <Schedules limits={plan.limits} />
         <LogRetention limits={plan.limits} />
+        <QueryPeriod limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
         <RealtimeConcurrency limits={plan.limits} />
@@ -774,8 +790,12 @@ export function TierPro({
         <TeamMembers limits={plan.limits}>{pricingDefinitions.additionalSeats.content}</TeamMembers>
         <Environments limits={plan.limits} />
         <Branches limits={plan.limits}>{pricingDefinitions.additionalBranches.content}</Branches>
+        <MetricDashboards limits={plan.limits}>
+          {pricingDefinitions.additionalDashboards.content}
+        </MetricDashboards>
         <Schedules limits={plan.limits}>{pricingDefinitions.additionalSchedules.content}</Schedules>
         <LogRetention limits={plan.limits} />
+        <QueryPeriod limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
         <RealtimeConcurrency limits={plan.limits}>
@@ -1139,6 +1159,53 @@ function RealtimeConcurrency({ limits, children }: { limits: Limits; children?:
   );
 }
 
+function MetricDashboards({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
+  if (limits.metricDashboards.number === 0) {
+    return (
+      <FeatureItem>
+        <DefinitionTip
+          title={pricingDefinitions.metricDashboards.title}
+          content={pricingDefinitions.metricDashboards.content}
+        >
+          Custom dashboards
+        </DefinitionTip>
+      </FeatureItem>
+    );
+  }
+
+  return (
+    <FeatureItem checked>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.metricDashboards.number}
+          {limits.metricDashboards.canExceed ? "+" : ""}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.metricDashboards.title}
+            content={pricingDefinitions.metricDashboards.content}
+          >
+            custom {limits.metricDashboards.number === 1 ? "dashboard" : "dashboards"}
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
+    </FeatureItem>
+  );
+}
+
+function QueryPeriod({ limits }: { limits: Limits }) {
+  return (
+    <FeatureItem checked>
+      {limits.queryPeriodDays.number} {limits.queryPeriodDays.number === 1 ? "day" : "days"}{" "}
+      <DefinitionTip
+        title={pricingDefinitions.queryPeriod.title}
+        content={pricingDefinitions.queryPeriod.content}
+      >
+        query period
+      </DefinitionTip>
+    </FeatureItem>
+  );
+}
+
 function Branches({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked={limits.branches.number > 0}>
diff --git a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
index 9c3edc66b..13f442aa6 100644
--- a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
+++ b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
@@ -1,6 +1,13 @@
 import { json, type ActionFunctionArgs } from "@remix-run/node";
 import { z } from "zod";
-import { updateSideMenuPreferences } from "~/services/dashboardPreferences.server";
+import {
+  SideMenuSectionIdSchema,
+  type SideMenuSectionId,
+} from "~/components/navigation/sideMenuTypes";
+import {
+  updateItemOrder,
+  updateSideMenuPreferences,
+} from "~/services/dashboardPreferences.server";
 import { requireUser } from "~/services/session.server";
 
 // Transforms form data string "true"/"false" to boolean, or undefined if not present
@@ -11,7 +18,12 @@ const booleanFromFormData = z
 
 const RequestSchema = z.object({
   isCollapsed: booleanFromFormData,
-  manageSectionCollapsed: booleanFromFormData,
+  sectionId: SideMenuSectionIdSchema.optional(),
+  sectionCollapsed: booleanFromFormData,
+  // Generic item order fields
+  organizationId: z.string().optional(),
+  listId: z.string().optional(),
+  itemOrder: z.string().optional(), // JSON-encoded string[]
 });
 
 export async function action({ request }: ActionFunctionArgs) {
@@ -25,10 +37,39 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ success: false, error: "Invalid request data" }, { status: 400 });
   }
 
+  // Handle item order update
+  if (result.data.organizationId && result.data.listId && result.data.itemOrder) {
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(result.data.itemOrder);
+    } catch {
+      parsed = [];
+    }
+    const orderResult = z.array(z.string()).safeParse(parsed);
+    if (orderResult.success) {
+      await updateItemOrder({
+        user,
+        organizationId: result.data.organizationId,
+        listId: result.data.listId,
+        order: orderResult.data,
+      });
+    }
+    return json({ success: true });
+  }
+
+  // Build sectionCollapsed parameter if both sectionId and sectionCollapsed are provided
+  const sectionCollapsed =
+    result.data.sectionId !== undefined && result.data.sectionCollapsed !== undefined
+      ? {
+          sectionId: result.data.sectionId as SideMenuSectionId,
+          collapsed: result.data.sectionCollapsed,
+        }
+      : undefined;
+
   await updateSideMenuPreferences({
     user,
     isCollapsed: result.data.isCollapsed,
-    manageSectionCollapsed: result.data.manageSectionCollapsed,
+    sectionCollapsed,
   });
 
   return json({ success: true });
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 5c2be023b..3f7290462 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -2,7 +2,7 @@ import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
 import { IconTimeline } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
-import { BigNumber } from "~/components/primitives/charts/BigNumber";
+import { BigNumberCard } from "~/components/primitives/charts/BigNumberCard";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig, type ChartState } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
@@ -256,7 +256,11 @@ function ChartsDashboard() {
             </Card.Accessory>
           </Card.Header>
           <Card.Content>
-            <BigNumber value={101} suffix="USD" />
+            <BigNumberCard
+              rows={[{ amount: 101 }]}
+              columns={[{ name: "amount", type: "Float64" }]}
+              config={{ column: "amount", aggregation: "sum", abbreviate: true }}
+            />
           </Card.Content>
         </Card>
       </div>
diff --git a/apps/webapp/app/services/clickhouseInstance.server.ts b/apps/webapp/app/services/clickhouseInstance.server.ts
index 156448c00..7818129b4 100644
--- a/apps/webapp/app/services/clickhouseInstance.server.ts
+++ b/apps/webapp/app/services/clickhouseInstance.server.ts
@@ -16,7 +16,8 @@ function initializeClickhouseClient() {
   const logsQuerySettings = {
     list: {
       max_memory_usage: env.CLICKHOUSE_LOGS_LIST_MAX_MEMORY_USAGE.toString(),
-      max_bytes_before_external_sort: env.CLICKHOUSE_LOGS_LIST_MAX_BYTES_BEFORE_EXTERNAL_SORT.toString(),
+      max_bytes_before_external_sort:
+        env.CLICKHOUSE_LOGS_LIST_MAX_BYTES_BEFORE_EXTERNAL_SORT.toString(),
       max_threads: env.CLICKHOUSE_LOGS_LIST_MAX_THREADS,
       ...(env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ && {
         max_rows_to_read: env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ.toString(),
@@ -51,3 +52,30 @@ function initializeClickhouseClient() {
 
   return clickhouse;
 }
+
+export const queryClickhouseClient = singleton(
+  "queryClickhouseClient",
+  initializeQueryClickhouseClient
+);
+
+function initializeQueryClickhouseClient() {
+  if (!env.QUERY_CLICKHOUSE_URL) {
+    throw new Error("QUERY_CLICKHOUSE_URL is not set");
+  }
+
+  const url = new URL(env.QUERY_CLICKHOUSE_URL);
+
+  return new ClickHouse({
+    url: url.toString(),
+    name: "query-clickhouse",
+    keepAlive: {
+      enabled: env.CLICKHOUSE_KEEP_ALIVE_ENABLED === "1",
+      idleSocketTtl: env.CLICKHOUSE_KEEP_ALIVE_IDLE_SOCKET_TTL_MS,
+    },
+    logLevel: env.CLICKHOUSE_LOG_LEVEL,
+    compression: {
+      request: true,
+    },
+    maxOpenConnections: env.CLICKHOUSE_MAX_OPEN_CONNECTIONS,
+  });
+}
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index 323b96fa8..7af007dc3 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -5,11 +5,24 @@ import { type UserFromSession } from "./session.server";
 
 const SideMenuPreferences = z.object({
   isCollapsed: z.boolean().default(false),
-  manageSectionCollapsed: z.boolean().default(false),
+  // Map for section collapsed states - keys are section identifiers
+  collapsedSections: z.record(z.string(), z.boolean()).optional(),
+  /** Organization-specific settings */
+  organizations: z
+    .record(
+      z.string(),
+      z.object({
+        orderedItems: z.record(z.string(), z.array(z.string())),
+      })
+    )
+    .optional(),
 });
 
 export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
 
+import { type SideMenuSectionId } from "~/components/navigation/sideMenuTypes";
+export type { SideMenuSectionId };
+
 const DashboardPreferences = z.object({
   version: z.literal("1"),
   currentProjectId: z.string().optional(),
@@ -111,11 +124,12 @@ export async function clearCurrentProject({ user }: { user: UserFromSession }) {
 export async function updateSideMenuPreferences({
   user,
   isCollapsed,
-  manageSectionCollapsed,
+  sectionCollapsed,
 }: {
   user: UserFromSession;
   isCollapsed?: boolean;
-  manageSectionCollapsed?: boolean;
+  /** Update a specific section's collapsed state */
+  sectionCollapsed?: { sectionId: SideMenuSectionId; collapsed: boolean };
 }) {
   if (user.isImpersonating) {
     return;
@@ -123,17 +137,26 @@ export async function updateSideMenuPreferences({
 
   // Parse with schema to apply defaults, then overlay any new values
   const currentSideMenu = SideMenuPreferences.parse(user.dashboardPreferences.sideMenu ?? {});
+
+  // Build the updated collapsedSections map
+  let updatedCollapsedSections = { ...currentSideMenu.collapsedSections };
+
+  if (sectionCollapsed) {
+    updatedCollapsedSections[sectionCollapsed.sectionId] = sectionCollapsed.collapsed;
+  }
+
   const updatedSideMenu = SideMenuPreferences.parse({
     ...currentSideMenu,
     ...(isCollapsed !== undefined && { isCollapsed }),
-    ...(manageSectionCollapsed !== undefined && { manageSectionCollapsed }),
+    collapsedSections: updatedCollapsedSections,
   });
 
   // Only update if something changed
-  if (
-    updatedSideMenu.isCollapsed === currentSideMenu.isCollapsed &&
-    updatedSideMenu.manageSectionCollapsed === currentSideMenu.manageSectionCollapsed
-  ) {
+  const hasCollapsedSectionsChanged =
+    JSON.stringify(updatedSideMenu.collapsedSections) !==
+    JSON.stringify(currentSideMenu.collapsedSections);
+
+  if (updatedSideMenu.isCollapsed === currentSideMenu.isCollapsed && !hasCollapsedSectionsChanged) {
     return;
   }
 
@@ -151,3 +174,59 @@ export async function updateSideMenuPreferences({
     },
   });
 }
+
+/** Get the stored item order for a specific list within an organization */
+export function getItemOrder(
+  sideMenu: SideMenuPreferences | undefined,
+  organizationId: string,
+  listId: string
+): string[] | undefined {
+  return sideMenu?.organizations?.[organizationId]?.orderedItems?.[listId];
+}
+
+export async function updateItemOrder({
+  user,
+  organizationId,
+  listId,
+  order,
+}: {
+  user: UserFromSession;
+  organizationId: string;
+  listId: string;
+  order: string[];
+}) {
+  if (user.isImpersonating) {
+    return;
+  }
+
+  const currentSideMenu = SideMenuPreferences.parse(user.dashboardPreferences.sideMenu ?? {});
+  const currentOrg = currentSideMenu.organizations?.[organizationId];
+
+  const updatedSideMenu = SideMenuPreferences.parse({
+    ...currentSideMenu,
+    organizations: {
+      ...currentSideMenu.organizations,
+      [organizationId]: {
+        ...currentOrg,
+        orderedItems: {
+          ...currentOrg?.orderedItems,
+          [listId]: order,
+        },
+      },
+    },
+  });
+
+  const updatedPreferences: DashboardPreferences = {
+    ...user.dashboardPreferences,
+    sideMenu: updatedSideMenu,
+  };
+
+  return prisma.user.update({
+    where: {
+      id: user.id,
+    },
+    data: {
+      dashboardPreferences: updatedPreferences,
+    },
+  });
+}
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 1d5af9e00..66cec330a 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -8,19 +8,22 @@ import {
 } from "@internal/clickhouse";
 import type { CustomerQuerySource } from "@trigger.dev/database";
 import type { TableSchema, WhereClauseCondition } from "@internal/tsql";
-import { type z } from "zod";
+import { z } from "zod";
 import { prisma } from "~/db.server";
 import { env } from "~/env.server";
-import { clickhouseClient } from "./clickhouseInstance.server";
+import { queryClickhouseClient } from "./clickhouseInstance.server";
 import {
   queryConcurrencyLimiter,
   DEFAULT_ORG_CONCURRENCY_LIMIT,
   GLOBAL_CONCURRENCY_LIMIT,
 } from "./queryConcurrencyLimiter.server";
+import { getLimit } from "./platform.v3.server";
+import { timeFilters, timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
+import parse from "parse-duration";
+import { querySchemas, QueryScopeSchema, type QueryScope } from "~/v3/querySchemas";
 
-export type { TableSchema, TSQLQueryResult };
-
-export type QueryScope = "organization" | "project" | "environment";
+export { QueryScopeSchema };
+export type { TableSchema, TSQLQueryResult, QueryScope };
 
 const scopeToEnum = {
   organization: "ORGANIZATION",
@@ -56,14 +59,20 @@ function getDefaultClickhouseSettings(): ClickHouseSettings {
 
 export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
   ExecuteTSQLOptions<TOut>,
-  "tableSchema" | "fieldMappings"
+  "tableSchema" | "fieldMappings" | "enforcedWhereClause" | "whereClauseFallback" | "schema"
 > & {
   organizationId: string;
-  projectId?: string;
-  environmentId?: string;
-  tableSchema: TableSchema[];
+  projectId: string;
+  environmentId: string;
   /** The scope of the query - determines tenant isolation */
   scope: QueryScope;
+  period?: string | null;
+  from?: string | null;
+  to?: string | null;
+  /** Filter to specific task identifiers */
+  taskIdentifiers?: string[];
+  /** Filter to specific queues */
+  queues?: string[];
   /** History options for saving query to billing/audit */
   history?: {
     /** Where the query originated from */
@@ -72,15 +81,6 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
     userId?: string | null;
     /** Skip saving to history (e.g., when impersonating) */
     skip?: boolean;
-    /** Time filter settings to save with the query */
-    timeFilter?: {
-      /** Period like "7d", "24h", etc. */
-      period?: string;
-      /** Custom start date */
-      from?: Date;
-      /** Custom end date */
-      to?: Date;
-    };
   };
   /** Custom per-org concurrency limit (overrides default) */
   customOrgConcurrencyLimit?: number;
@@ -90,8 +90,24 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
  * Extended result type that includes the optional queryId when saved to history
  */
 export type ExecuteQueryResult<T> =
-  | [error: Error, result: null, queryId: null]
-  | [error: null, result: T, queryId: string | null];
+  | {
+      success: true;
+      result: T;
+      queryId: string | null;
+      periodClipped: number | null;
+      maxQueryPeriod: number;
+      timeRange: { from: Date; to: Date };
+    }
+  | { success: false; error: Error };
+
+export async function getDefaultPeriod(organizationId: string): Promise<string> {
+  const idealDefaultPeriodDays = 7;
+  const maxQueryPeriod = await getLimit(organizationId, "queryPeriodDays", 30);
+  if (maxQueryPeriod < idealDefaultPeriodDays) {
+    return `${maxQueryPeriod}d`;
+  }
+  return `${idealDefaultPeriodDays}d`;
+}
 
 /**
  * Execute a TSQL query against ClickHouse with tenant isolation
@@ -102,14 +118,17 @@ export async function executeQuery<TOut extends z.ZodSchema>(
   options: ExecuteQueryOptions<TOut>
 ): Promise<ExecuteQueryResult<Exclude<TSQLQueryResult<z.output<TOut>>[1], null>>> {
   const {
+    period,
+    from,
+    to,
     scope,
     organizationId,
     projectId,
     environmentId,
-    enforcedWhereClause,
+    taskIdentifiers,
+    queues,
     history,
     customOrgConcurrencyLimit,
-    whereClauseFallback,
     ...baseOptions
   } = options;
 
@@ -118,20 +137,81 @@ export async function executeQuery<TOut extends z.ZodSchema>(
   const orgLimit = customOrgConcurrencyLimit ?? DEFAULT_ORG_CONCURRENCY_LIMIT;
 
   // Acquire concurrency slot
-    const acquireResult = await queryConcurrencyLimiter.acquire({
-      key: organizationId,
-      requestId,
-      keyLimit: orgLimit,
-      globalLimit: GLOBAL_CONCURRENCY_LIMIT,
-    });
+  const acquireResult = await queryConcurrencyLimiter.acquire({
+    key: organizationId,
+    requestId,
+    keyLimit: orgLimit,
+    globalLimit: GLOBAL_CONCURRENCY_LIMIT,
+  });
 
-    if (!acquireResult.success) {
-      const errorMessage =
-        acquireResult.reason === "key_limit"
-          ? `You've exceeded your query concurrency of ${orgLimit} for this organization. Please try again later.`
-          : "We're experiencing a lot of queries at the moment. Please try again later.";
-      return [new QueryError(errorMessage, { query: options.query }), null, null];
-    }
+  if (!acquireResult.success) {
+    const errorMessage =
+      acquireResult.reason === "key_limit"
+        ? `You've exceeded your query concurrency of ${orgLimit} for this organization. Please try again later.`
+        : "We're experiencing a lot of queries at the moment. Please try again later.";
+    return { success: false, error: new QueryError(errorMessage, { query: options.query }) };
+  }
+
+  // Build time filter fallback for triggered_at column
+  const defaultPeriod = await getDefaultPeriod(organizationId);
+  const timeFilter = timeFilters({
+    period: period ?? undefined,
+    from: from ?? undefined,
+    to: to ?? undefined,
+    defaultPeriod,
+  });
+
+  // Calculate the effective "from" date the user is requesting (for period clipping check)
+  // This is null only when the user specifies just a "to" date (rare case)
+  let requestedFromDate: Date | null = null;
+  if (timeFilter.from) {
+    requestedFromDate = new Date(timeFilter.from);
+  } else if (!timeFilter.to) {
+    // Period specified (or default) - calculate from now
+    const periodMs = parse(timeFilter.period ?? defaultPeriod) ?? 7 * 24 * 60 * 60 * 1000;
+    requestedFromDate = new Date(Date.now() - periodMs);
+  }
+
+  // Build the fallback WHERE condition based on what the user specified
+  let triggeredAtFallback: WhereClauseCondition;
+  if (timeFilter.from && timeFilter.to) {
+    triggeredAtFallback = { op: "between", low: timeFilter.from, high: timeFilter.to };
+  } else if (timeFilter.from) {
+    triggeredAtFallback = { op: "gte", value: timeFilter.from };
+  } else if (timeFilter.to) {
+    triggeredAtFallback = { op: "lte", value: timeFilter.to };
+  } else {
+    triggeredAtFallback = { op: "gte", value: requestedFromDate! };
+  }
+
+  const maxQueryPeriod = await getLimit(organizationId, "queryPeriodDays", 30);
+  const maxQueryPeriodDate = new Date(Date.now() - maxQueryPeriod * 24 * 60 * 60 * 1000);
+
+  // Check if the requested time period exceeds the plan limit
+  const periodClipped = requestedFromDate !== null && requestedFromDate < maxQueryPeriodDate;
+
+  // Force tenant isolation and time period limits
+  const enforcedWhereClause = {
+    organization_id: { op: "eq", value: organizationId },
+    project_id:
+      scope === "project" || scope === "environment" ? { op: "eq", value: projectId } : undefined,
+    environment_id: scope === "environment" ? { op: "eq", value: environmentId } : undefined,
+    triggered_at: { op: "gte", value: maxQueryPeriodDate },
+    // Optional filters for tasks and queues
+    task_identifier:
+      taskIdentifiers && taskIdentifiers.length > 0
+        ? { op: "in", values: taskIdentifiers }
+        : undefined,
+    queue: queues && queues.length > 0 ? { op: "in", values: queues } : undefined,
+  } satisfies Record<string, WhereClauseCondition | undefined>;
+
+  // Compute the effective time range for timeBucket() interval calculation
+  const timeRange = timeFilterFromTo({
+    period: period ?? undefined,
+    from: from ?? undefined,
+    to: to ?? undefined,
+    defaultPeriod,
+  });
 
   try {
     // Build field mappings for project_ref → project_id and environment_id → slug translation
@@ -150,11 +230,17 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       environment: Object.fromEntries(environments.map((e) => [e.id, e.slug])),
     };
 
-    const result = await executeTSQL(clickhouseClient.reader, {
+    const result = await executeTSQL(queryClickhouseClient.reader, {
       ...baseOptions,
+      schema: z.record(z.any()),
+      tableSchema: querySchemas,
+      transformValues: true,
       enforcedWhereClause,
       fieldMappings,
-      whereClauseFallback,
+      whereClauseFallback: {
+        triggered_at: triggeredAtFallback,
+      },
+      timeRange,
       clickhouseSettings: {
         ...getDefaultClickhouseSettings(),
         ...baseOptions.clickhouseSettings, // Allow caller overrides if needed
@@ -167,7 +253,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
 
     // If query failed, return early with no queryId
     if (result[0] !== null) {
-      return [result[0], null, null];
+      return { success: false, error: result[0] };
     }
 
     let queryId: string | null = null;
@@ -183,10 +269,23 @@ export async function executeQuery<TOut extends z.ZodSchema>(
           userId: history.userId ?? null,
         },
         orderBy: { createdAt: "desc" },
-        select: { id: true, query: true, scope: true, filterPeriod: true, filterFrom: true, filterTo: true },
+        select: {
+          id: true,
+          query: true,
+          scope: true,
+          filterPeriod: true,
+          filterFrom: true,
+          filterTo: true,
+        },
       });
 
-      const timeFilter = history.timeFilter;
+      // Save the effective period used for the query (timeFilters() handles defaults)
+      // Only save period if no custom from/to range was specified
+      const historyTimeFilter = {
+        period: timeFilter.from || timeFilter.to ? undefined : timeFilter.period,
+        from: timeFilter.from,
+        to: timeFilter.to,
+      };
       const isDuplicate =
         lastQuery &&
         lastQuery.query === options.query &&
@@ -209,16 +308,23 @@ export async function executeQuery<TOut extends z.ZodSchema>(
             projectId: scope === "project" || scope === "environment" ? projectId : null,
             environmentId: scope === "environment" ? environmentId : null,
             userId: history.userId ?? null,
-            filterPeriod: history.timeFilter?.period ?? null,
-            filterFrom: history.timeFilter?.from ?? null,
-            filterTo: history.timeFilter?.to ?? null,
+            filterPeriod: historyTimeFilter?.period ?? null,
+            filterFrom: historyTimeFilter?.from ?? null,
+            filterTo: historyTimeFilter?.to ?? null,
           },
         });
         queryId = created.id;
       }
     }
 
-    return [null, result[1], queryId];
+    return {
+      success: true,
+      result: result[1],
+      queryId,
+      periodClipped: periodClipped ? maxQueryPeriod : null,
+      maxQueryPeriod,
+      timeRange,
+    };
   } finally {
     // Always release the concurrency slot
     await queryConcurrencyLimiter.release({
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 99e73c598..2e435a032 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -1,6 +1,38 @@
 @import url("non.geist");
 @import url("non.geist/mono");
 
+@import "react-grid-layout/css/styles.css";
+@import "react-resizable/css/styles.css";
+
+/* Override react-grid-layout placeholder color (default is red) */
+.react-grid-item.react-grid-placeholder {
+  background: rgb(99 102 241) !important; /* indigo-500 */
+  border-radius: 0.375rem !important; /* rounded-md */
+}
+
+/* Sidebar reorder grid: subtle placeholder */
+.sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
+  background: rgb(39 42 46) !important; /* charcoal-700 */
+  border-radius: 0.25rem;
+  opacity: 1 !important;
+}
+
+/* Sidebar reorder grid: only animate transform (vertical position), not width/height */
+.sidebar-reorder-grid .react-grid-item {
+  transition: transform 200ms ease !important;
+}
+
+/* Override resize handle icon to white */
+.react-resizable-handle {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+') !important;
+}
+.react-resizable-handle::after {
+  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
+  border-right-color: rgba(255, 255, 255, 0.4) !important;
+  border-top-color: rgba(255, 255, 255, 0.4) !important;
+  border-left-color: rgba(255, 255, 255, 0.4) !important;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -121,6 +153,14 @@
   --foreground: 210 20% 90%;
   --border: 217 19% 27%;
 
+  /* Code block styling */
+  & [data-code-block-container] {
+    @apply rounded border-charcoal-650 my-0;
+  }
+  & [data-code-block] {
+    border-top: none;
+  }
+
   & p {
     @apply my-1;
   }
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index d030243f2..4f1c03d8d 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -274,6 +274,26 @@ export function queryPath(
   return `${v3EnvironmentPath(organization, project, environment)}/query`;
 }
 
+export function v3CustomDashboardPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  environment: EnvironmentForPath,
+  dashboard: { friendlyId: string }
+) {
+  return `${v3EnvironmentPath(organization, project, environment)}/metrics/custom/${
+    dashboard.friendlyId
+  }`;
+}
+
+export function v3BuiltInDashboardPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  environment: EnvironmentForPath,
+  key: string
+) {
+  return `${v3EnvironmentPath(organization, project, environment)}/metrics/${key}`;
+}
+
 export function v3TestTaskPath(
   organization: OrgForPath,
   project: ProjectForPath,
@@ -482,7 +502,7 @@ export function v3ProjectSettingsPath(
 export function v3LogsPath(
   organization: OrgForPath,
   project: ProjectForPath,
-  environment: EnvironmentForPath,
+  environment: EnvironmentForPath
 ) {
   return `${v3EnvironmentPath(organization, project, environment)}/logs`;
 }
diff --git a/apps/webapp/app/v3/querySchemas.ts b/apps/webapp/app/v3/querySchemas.ts
index fe7005974..33a75a4fe 100644
--- a/apps/webapp/app/v3/querySchemas.ts
+++ b/apps/webapp/app/v3/querySchemas.ts
@@ -1,8 +1,12 @@
 import { column, type TableSchema } from "@internal/tsql";
+import { z } from "zod";
 import { autoFormatSQL } from "~/components/code/TSQLEditor";
 import { runFriendlyStatus, runStatusTitleFromStatus } from "~/components/runs/v3/TaskRunStatus";
 import { logger } from "~/services/logger.server";
 
+export const QueryScopeSchema = z.enum(["organization", "project", "environment"]);
+export type QueryScope = z.infer<typeof QueryScopeSchema>;
+
 /**
  * Environment type values
  */
@@ -28,6 +32,7 @@ export const runsSchema: TableSchema = {
   name: "runs",
   clickhouseName: "trigger_dev.task_runs_v2",
   description: "Task runs - stores all task execution records",
+  timeConstraint: "triggered_at",
   tenantColumns: {
     organizationId: "organization_id",
     projectId: "project_id",
diff --git a/apps/webapp/app/v3/services/aiQueryService.server.ts b/apps/webapp/app/v3/services/aiQueryService.server.ts
index bfad3e7ce..d397215c8 100644
--- a/apps/webapp/app/v3/services/aiQueryService.server.ts
+++ b/apps/webapp/app/v3/services/aiQueryService.server.ts
@@ -414,6 +414,7 @@ HAVING cnt > 10
 \`\`\`
 
 ### Date/Time Functions
+- timeBucket() - automatically bucket by time. Uses the table's time column and picks the best interval based on the query's time range. Use in SELECT and reference as \`timeBucket\` in GROUP BY / ORDER BY.
 - now() - current timestamp
 - today() - current date
 - toDate(datetime) - extract date
@@ -421,6 +422,20 @@ HAVING cnt > 10
 - dateDiff('unit', start, end) - difference in units (second, minute, hour, day, week, month, year)
 - INTERVAL n unit - time interval (e.g., INTERVAL 7 DAY)
 
+### Time Bucketing
+When the user wants to see data "over time", "by hour", "by day", or any time-series aggregation, prefer \`timeBucket()\` over manual \`toStartOfHour\`/\`toStartOfDay\` calls. \`timeBucket()\` automatically picks the right interval for the current time range.
+
+\`\`\`sql
+-- Runs over time (bucket size auto-selected)
+SELECT timeBucket(), count() AS run_count
+FROM runs
+GROUP BY timeBucket
+ORDER BY timeBucket
+LIMIT 1000
+\`\`\`
+
+Only use explicit \`toStartOfHour\`/\`toStartOfDay\` etc. if the user specifically requests a particular bucket size (e.g., "group by hour", "bucket by day").
+
 ### Common Patterns
 - Status filter: WHERE status = 'Failed' or WHERE status IN ('Failed', 'Crashed')
 - Time filtering: Use the \`setTimeFilter\` tool (NOT triggered_at in WHERE clause)
@@ -432,13 +447,14 @@ HAVING cnt > 10
 3. When column selection is ambiguous, use the core columns marked [CORE] in the schema
 4. **TIME FILTERING**: When the user wants to filter by time (e.g., "last 7 days", "past hour", "yesterday"), ALWAYS use the \`setTimeFilter\` tool instead of adding \`triggered_at\` conditions to the query. The UI has a time filter that will apply this automatically.
 5. Do NOT add \`triggered_at\` to WHERE clauses - use \`setTimeFilter\` tool instead. If the user doesn't specify a time period, do NOT add any time filter (the UI defaults to 7 days).
-6. ALWAYS use the validateTSQLQuery tool to check your query before returning it
-7. If validation fails, fix the issues and try again (up to 3 attempts)
-8. Use column names exactly as defined in the schema (case-sensitive)
-9. For enum columns like status, use the allowed values shown in the schema
-10. Always include a LIMIT clause (default to 100 if not specified)
-11. Use meaningful column aliases with AS for aggregations
-12. Format queries with proper indentation for readability
+6. **TIME BUCKETING**: When the user wants to see data over time or in time buckets, use \`timeBucket()\` in SELECT and reference it as \`timeBucket\` in GROUP BY / ORDER BY. Only use manual bucketing functions (toStartOfHour, toStartOfDay, etc.) when the user explicitly requests a specific bucket size.
+7. ALWAYS use the validateTSQLQuery tool to check your query before returning it
+8. If validation fails, fix the issues and try again (up to 3 attempts)
+9. Use column names exactly as defined in the schema (case-sensitive)
+10. For enum columns like status, use the allowed values shown in the schema
+11. Always include a LIMIT clause (default to 100 if not specified)
+12. Use meaningful column aliases with AS for aggregations
+13. Format queries with proper indentation for readability
 
 ## Response Format
 
@@ -504,6 +520,7 @@ HAVING cnt > 10
 \`\`\`
 
 ### Date/Time Functions
+- timeBucket() - automatically bucket by time. Uses the table's time column and picks the best interval based on the query's time range. Use in SELECT and reference as \`timeBucket\` in GROUP BY / ORDER BY.
 - now() - current timestamp
 - today() - current date
 - toDate(datetime) - extract date
@@ -511,18 +528,30 @@ HAVING cnt > 10
 - dateDiff('unit', start, end) - difference in units (second, minute, hour, day, week, month, year)
 - INTERVAL n unit - time interval (e.g., INTERVAL 7 DAY)
 
+### Time Bucketing
+When the user wants to see data "over time", "by hour", "by day", or any time-series aggregation, prefer \`timeBucket()\` over manual \`toStartOfHour\`/\`toStartOfDay\` calls unless the user specifically requests a particular bucket size.
+
+\`\`\`sql
+SELECT timeBucket(), count() AS run_count
+FROM runs
+GROUP BY timeBucket
+ORDER BY timeBucket
+LIMIT 1000
+\`\`\`
+
 ## Important Rules
 
 1. NEVER use SELECT * - ClickHouse is a columnar database where SELECT * has very poor performance
 2. If the existing query uses SELECT *, replace it with specific columns (use core columns marked [CORE] as defaults)
 3. **TIME FILTERING**: When the user wants to change time filtering (e.g., "change to last 30 days"), use the \`setTimeFilter\` tool instead of modifying \`triggered_at\` conditions. If the existing query has \`triggered_at\` in WHERE, consider removing it and using \`setTimeFilter\` instead.
-4. ALWAYS use the validateTSQLQuery tool to check your modified query before returning it
-5. If validation fails, fix the issues and try again (up to 3 attempts)
-6. Use column names exactly as defined in the schema (case-sensitive)
-7. For enum columns like status, use the allowed values shown in the schema
-8. Always include a LIMIT clause (default to 100 if not specified)
-9. Preserve the user's existing query structure and style where possible
-10. Only make the changes specifically requested by the user
+4. **TIME BUCKETING**: When adding time-series grouping, use \`timeBucket()\` in SELECT and reference it as \`timeBucket\` in GROUP BY / ORDER BY. Only use manual bucketing functions (toStartOfHour, toStartOfDay, etc.) when the user explicitly requests a specific bucket size.
+5. ALWAYS use the validateTSQLQuery tool to check your modified query before returning it
+6. If validation fails, fix the issues and try again (up to 3 attempts)
+7. Use column names exactly as defined in the schema (case-sensitive)
+8. For enum columns like status, use the allowed values shown in the schema
+9. Always include a LIMIT clause (default to 100 if not specified)
+10. Preserve the user's existing query structure and style where possible
+11. Only make the changes specifically requested by the user
 
 ## Response Format
 
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index e2ea2cd5e..661795ba0 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -121,7 +121,7 @@
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@trigger.dev/otlp-importer": "workspace:*",
-    "@trigger.dev/platform": "1.0.22",
+    "@trigger.dev/platform": "1.0.23",
     "@trigger.dev/redis-worker": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
     "@types/pg": "8.6.6",
@@ -186,8 +186,10 @@
     "react-collapse": "^5.1.1",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "^2.2.2",
     "react-hotkeys-hook": "^4.4.1",
     "react-popper": "^2.3.0",
+    "react-resizable": "^3.1.3",
     "react-resizable-panels": "^2.0.9",
     "react-stately": "^3.29.1",
     "react-use": "17.5.1",
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index d7ee33569..f17eb04c1 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -159,6 +159,9 @@ const runs = colors.indigo[500];
 const batches = colors.pink[500];
 const schedules = colors.yellow[500];
 const queues = colors.purple[500];
+const query = colors.blue[500];
+const metrics = colors.green[500];
+const customDashboards = charcoal[400];
 const deployments = colors.green[500];
 const concurrency = colors.amber[500];
 const limits = colors.purple[500];
@@ -240,6 +243,7 @@ module.exports = {
         schedules,
         concurrency,
         queues,
+        query,
         regions,
         limits,
         deployments,
@@ -252,6 +256,8 @@ module.exports = {
         orgSettings,
         docs,
         bulkActions,
+        metrics,
+        customDashboards,
       },
       focusStyles: {
         outline: "1px solid",
diff --git a/internal-packages/clickhouse/src/client/tsql.ts b/internal-packages/clickhouse/src/client/tsql.ts
index 61868b610..0a8367e71 100644
--- a/internal-packages/clickhouse/src/client/tsql.ts
+++ b/internal-packages/clickhouse/src/client/tsql.ts
@@ -14,6 +14,7 @@ import {
   type TableSchema,
   type QuerySettings,
   type FieldMappings,
+  type TimeRange,
   type WhereClauseCondition
 } from "@internal/tsql";
 import type { ClickhouseReader, QueryStats } from "./types.js";
@@ -25,7 +26,7 @@ const logger = new Logger("tsql", "info");
 
 export type { QueryStats };
 
-export type { TableSchema, QuerySettings, FieldMappings, WhereClauseCondition };
+export type { TableSchema, QuerySettings, FieldMappings, TimeRange, WhereClauseCondition };
 
 /**
  * Options for executing a TSQL query
@@ -101,6 +102,12 @@ export interface ExecuteTSQLOptions<TOut extends z.ZodSchema> {
    * ```
    */
   whereClauseFallback?: Record<string, WhereClauseCondition>;
+  /**
+   * Time range for `timeBucket()` interval calculation.
+   * When provided, `timeBucket()` uses this to determine the appropriate bucket size
+   * based on the span of the time range.
+   */
+  timeRange?: TimeRange;
 }
 
 /**
@@ -183,6 +190,7 @@ export async function executeTSQL<TOut extends z.ZodSchema>(
       settings: compiledSettings,
       fieldMappings: options.fieldMappings,
       whereClauseFallback: options.whereClauseFallback,
+      timeRange: options.timeRange,
     });
 
     generatedSql = sql;
diff --git a/internal-packages/database/prisma/migrations/20260201130503_metrics_dashboard_table_created/migration.sql b/internal-packages/database/prisma/migrations/20260201130503_metrics_dashboard_table_created/migration.sql
new file mode 100644
index 000000000..321b3148c
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260201130503_metrics_dashboard_table_created/migration.sql
@@ -0,0 +1,25 @@
+-- CreateTable
+CREATE TABLE
+    "public"."MetricsDashboard" (
+        "id" TEXT NOT NULL,
+        "title" TEXT NOT NULL,
+        "organizationId" TEXT NOT NULL,
+        "projectId" TEXT,
+        "ownerId" TEXT NOT NULL,
+        "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+        "updatedAt" TIMESTAMP(3) NOT NULL,
+        "layout" TEXT NOT NULL,
+        CONSTRAINT "MetricsDashboard_pkey" PRIMARY KEY ("id")
+    );
+
+-- CreateIndex
+CREATE INDEX "MetricsDashboard_projectId_createdAt_idx" ON "public"."MetricsDashboard" ("projectId", "createdAt" DESC);
+
+-- AddForeignKey
+ALTER TABLE "public"."MetricsDashboard" ADD CONSTRAINT "MetricsDashboard_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "public"."Organization" ("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."MetricsDashboard" ADD CONSTRAINT "MetricsDashboard_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "public"."Project" ("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."MetricsDashboard" ADD CONSTRAINT "MetricsDashboard_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "public"."User" ("id") ON DELETE SET NULL ON UPDATE CASCADE;
\ No newline at end of file
diff --git a/internal-packages/database/prisma/migrations/20260202044337_metrics_dashboard_description/migration.sql b/internal-packages/database/prisma/migrations/20260202044337_metrics_dashboard_description/migration.sql
new file mode 100644
index 000000000..d7c25db8b
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260202044337_metrics_dashboard_description/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "public"."MetricsDashboard"
+ADD COLUMN "description" TEXT NOT NULL DEFAULT '';
\ No newline at end of file
diff --git a/internal-packages/database/prisma/migrations/20260202100000_add_friendlyid_to_metrics_dashboard/migration.sql b/internal-packages/database/prisma/migrations/20260202100000_add_friendlyid_to_metrics_dashboard/migration.sql
new file mode 100644
index 000000000..6e48faf18
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260202100000_add_friendlyid_to_metrics_dashboard/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "public"."MetricsDashboard" ADD COLUMN "friendlyId" TEXT NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "MetricsDashboard_friendlyId_key" ON "public"."MetricsDashboard"("friendlyId");
diff --git a/internal-packages/database/prisma/migrations/20260211120000_make_metrics_dashboard_owner_nullable/migration.sql b/internal-packages/database/prisma/migrations/20260211120000_make_metrics_dashboard_owner_nullable/migration.sql
new file mode 100644
index 000000000..5ea906c4e
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260211120000_make_metrics_dashboard_owner_nullable/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable: make ownerId nullable to match ON DELETE SET NULL foreign key
+ALTER TABLE "public"."MetricsDashboard" ALTER COLUMN "ownerId" DROP NOT NULL;
diff --git a/internal-packages/database/prisma/schema.prisma b/internal-packages/database/prisma/schema.prisma
index a62980cde..e28b951f0 100644
--- a/internal-packages/database/prisma/schema.prisma
+++ b/internal-packages/database/prisma/schema.prisma
@@ -63,6 +63,7 @@ model User {
   impersonationsPerformed ImpersonationAuditLog[] @relation("ImpersonationAdmin")
   impersonationsReceived  ImpersonationAuditLog[] @relation("ImpersonationTarget")
   customerQueries         CustomerQuery[]
+  metricsDashboards       MetricsDashboard[]
 }
 
 model MfaBackupCode {
@@ -223,6 +224,7 @@ model Organization {
   workerInstances          WorkerInstance[]
   githubAppInstallations   GithubAppInstallation[]
   customerQueries          CustomerQuery[]
+  metricsDashboards        MetricsDashboard[]
 }
 
 model OrgMember {
@@ -384,32 +386,33 @@ model Project {
   /// The master queues they are allowed to use (impacts what they can set as default and trigger runs with)
   allowedWorkerQueues String[] @default([]) @map("allowedMasterQueues")
 
-  environments                    RuntimeEnvironment[]
-  backgroundWorkers               BackgroundWorker[]
-  backgroundWorkerTasks           BackgroundWorkerTask[]
-  taskRuns                        TaskRun[]
-  runTags                         TaskRunTag[]
-  taskQueues                      TaskQueue[]
-  environmentVariables            EnvironmentVariable[]
-  checkpoints                     Checkpoint[]
-  WorkerDeployment                WorkerDeployment[]
-  CheckpointRestoreEvent          CheckpointRestoreEvent[]
-  taskSchedules                   TaskSchedule[]
-  alertChannels                   ProjectAlertChannel[]
-  alerts                          ProjectAlert[]
-  alertStorages                   ProjectAlertStorage[]
-  bulkActionGroups                BulkActionGroup[]
-  BackgroundWorkerFile            BackgroundWorkerFile[]
-  waitpoints                      Waitpoint[]
-  taskRunWaitpoints               TaskRunWaitpoint[]
-  taskRunCheckpoints              TaskRunCheckpoint[]
-  waitpointTags                   WaitpointTag[]
-  connectedGithubRepository       ConnectedGithubRepository?
-  organizationProjectIntegration  OrganizationProjectIntegration[]
-  customerQueries                 CustomerQuery[]
+  environments                   RuntimeEnvironment[]
+  backgroundWorkers              BackgroundWorker[]
+  backgroundWorkerTasks          BackgroundWorkerTask[]
+  taskRuns                       TaskRun[]
+  runTags                        TaskRunTag[]
+  taskQueues                     TaskQueue[]
+  environmentVariables           EnvironmentVariable[]
+  checkpoints                    Checkpoint[]
+  WorkerDeployment               WorkerDeployment[]
+  CheckpointRestoreEvent         CheckpointRestoreEvent[]
+  taskSchedules                  TaskSchedule[]
+  alertChannels                  ProjectAlertChannel[]
+  alerts                         ProjectAlert[]
+  alertStorages                  ProjectAlertStorage[]
+  bulkActionGroups               BulkActionGroup[]
+  BackgroundWorkerFile           BackgroundWorkerFile[]
+  waitpoints                     Waitpoint[]
+  taskRunWaitpoints              TaskRunWaitpoint[]
+  taskRunCheckpoints             TaskRunCheckpoint[]
+  waitpointTags                  WaitpointTag[]
+  connectedGithubRepository      ConnectedGithubRepository?
+  organizationProjectIntegration OrganizationProjectIntegration[]
+  customerQueries                CustomerQuery[]
 
   buildSettings         Json?
   taskScheduleInstances TaskScheduleInstance[]
+  metricsDashboards     MetricsDashboard[]
 }
 
 enum ProjectVersion {
@@ -1713,7 +1716,7 @@ model EnvironmentVariableValue {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  version       Int                    @default(1)
+  version       Int   @default(1)
   lastUpdatedBy Json?
 
   @@unique([variableId, environmentId])
@@ -1829,10 +1832,10 @@ model WorkerDeployment {
   worker   BackgroundWorker? @relation(fields: [workerId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   workerId String?           @unique
 
-  triggeredBy             User?   @relation(fields: [triggeredById], references: [id], onDelete: SetNull, onUpdate: Cascade)
-  triggeredById           String?
-  triggeredVia            String?
-  commitSHA               String?
+  triggeredBy   User?   @relation(fields: [triggeredById], references: [id], onDelete: SetNull, onUpdate: Cascade)
+  triggeredById String?
+  triggeredVia  String?
+  commitSHA     String?
 
   startedAt   DateTime?
   installedAt DateTime?
@@ -1851,10 +1854,10 @@ model WorkerDeployment {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  promotions              WorkerDeploymentPromotion[]
-  alerts                  ProjectAlert[]
-  workerInstance          WorkerInstance[]
-  integrationDeployments  IntegrationDeployment[]
+  promotions             WorkerDeploymentPromotion[]
+  alerts                 ProjectAlert[]
+  workerInstance         WorkerInstance[]
+  integrationDeployments IntegrationDeployment[]
 
   @@unique([projectId, shortCode])
   @@unique([environmentId, version])
@@ -2095,8 +2098,8 @@ model OrganizationIntegration {
 
   friendlyId String @unique
 
-  service                 IntegrationService
-  externalOrganizationId  String? /// Identifier for external, integration's organization (e.g. Vercel's team)
+  service                IntegrationService
+  externalOrganizationId String? /// Identifier for external, integration's organization (e.g. Vercel's team)
 
   integrationData Json
 
@@ -2106,33 +2109,33 @@ model OrganizationIntegration {
   organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   organizationId String
 
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
   deletedAt DateTime?
 
-  alertChannels                   ProjectAlertChannel[]
-  organizationProjectIntegration  OrganizationProjectIntegration[]
+  alertChannels                  ProjectAlertChannel[]
+  organizationProjectIntegration OrganizationProjectIntegration[]
 
   @@index([externalOrganizationId])
 }
 
 model OrganizationProjectIntegration {
-	id String @id @default(cuid())
-	
-	organizationIntegration     OrganizationIntegration @relation(fields: [organizationIntegrationId], references: [id], onDelete: Cascade, onUpdate: Cascade)
-	organizationIntegrationId   String
-	
-	project     Project @relation(fields: [projectId], references: [id], onDelete: Cascade, onUpdate: Cascade)
-  projectId   String
-  
-  externalEntityId  String /// Identifier for webhooks, for example Vercel's projectId
-  integrationData   Json /// Save useful data like config or external entity name
-  installedBy       String? /// UserId who installed the integration
+  id String @id @default(cuid())
 
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  organizationIntegration   OrganizationIntegration @relation(fields: [organizationIntegrationId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  organizationIntegrationId String
+
+  project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  projectId String
+
+  externalEntityId String /// Identifier for webhooks, for example Vercel's projectId
+  integrationData  Json /// Save useful data like config or external entity name
+  installedBy      String? /// UserId who installed the integration
+
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
   deletedAt DateTime?
-  
+
   @@index([projectId])
   @@index([projectId, organizationIntegrationId])
   @@index([externalEntityId])
@@ -2523,19 +2526,49 @@ model CustomerQuery {
 }
 
 model IntegrationDeployment {
-  id                      String @id @default(cuid())
-  
+  id String @id @default(cuid())
+
   integrationName         String /// For example Vercel
   integrationDeploymentId String /// External ID
   commitSHA               String
   deploymentId            String?
   status                  String? /// External deployment status
 
-  workerDeployment        WorkerDeployment? @relation(fields: [deploymentId], references: [id], onDelete: SetNull, onUpdate: Cascade)
+  workerDeployment WorkerDeployment? @relation(fields: [deploymentId], references: [id], onDelete: SetNull, onUpdate: Cascade)
 
-  createdAt               DateTime @default(now())
-  updatedAt               DateTime @updatedAt
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
   @@index([commitSHA])
   @@index([deploymentId])
 }
+
+/// A user-defined metrics dashboard
+model MetricsDashboard {
+  id String @id @default(cuid())
+
+  friendlyId String @unique
+
+  title       String
+  description String @default("")
+
+  organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  organizationId String
+
+  project   Project? @relation(fields: [projectId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  projectId String?
+
+  /// Who created the dashboard
+  owner   User?   @relation(fields: [ownerId], references: [id], onDelete: SetNull, onUpdate: Cascade)
+  ownerId String?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  /// JSON that defines the config, queries, layout and config of all widgets. 
+  /// There will be a version field for the format.
+  layout String
+
+  /// Fast lookup for the list
+  @@index([projectId, createdAt(sort: Desc)])
+}
diff --git a/internal-packages/tsql/src/index.ts b/internal-packages/tsql/src/index.ts
index e0f061eef..f4ac1ea6b 100644
--- a/internal-packages/tsql/src/index.ts
+++ b/internal-packages/tsql/src/index.ts
@@ -18,6 +18,7 @@ import type {
   Or,
   SelectQuery,
   SelectSetQuery,
+  Tuple,
 } from "./query/ast.js";
 import { CompareOperationOp } from "./query/ast.js";
 import { SyntaxError as TSQLSyntaxError } from "./query/errors.js";
@@ -28,6 +29,7 @@ import {
   type BetweenCondition,
   type QuerySettings,
   type SimpleComparisonCondition,
+  type TimeRange,
   type WhereClauseCondition,
 } from "./query/printer_context.js";
 import { createSchemaRegistry, type FieldMappings, type TableSchema } from "./query/schema.js";
@@ -120,13 +122,21 @@ export {
   DEFAULT_QUERY_SETTINGS,
   PrinterContext,
   type BetweenCondition,
+  type InCondition,
   type PrinterContextOptions,
   type QueryNotice,
   type QuerySettings,
   type SimpleComparisonCondition,
+  type TimeRange,
   type WhereClauseCondition,
 } from "./query/printer_context.js";
 
+// Re-export time bucket utilities
+export {
+  calculateTimeBucketInterval,
+  type TimeBucketInterval,
+} from "./query/time_buckets.js";
+
 // Re-export printer
 export { ClickHousePrinter, printToClickHouse, type PrintResult } from "./query/printer.js";
 
@@ -356,6 +366,21 @@ export function createFallbackExpression(
     return betweenExpr;
   }
 
+  if (fallback.op === "in") {
+    // Create a tuple of values for the IN clause
+    const tupleExpr: Tuple = {
+      expression_type: "tuple",
+      exprs: fallback.values.map((value) => createValueExpression(value)),
+    };
+    const inExpr: CompareOperation = {
+      expression_type: "compare_operation",
+      left: fieldExpr,
+      right: tupleExpr,
+      op: CompareOperationOp.In,
+    };
+    return inExpr;
+  }
+
   // Simple comparison
   const compareExpr: CompareOperation = {
     expression_type: "compare_operation",
@@ -443,7 +468,6 @@ export function injectFallbackConditions(
   };
 }
 
-
 /**
  * Options for compiling a TSQL query to ClickHouse SQL
  */
@@ -501,6 +525,20 @@ export interface CompileTSQLOptions {
    * ```
    */
   whereClauseFallback?: Record<string, WhereClauseCondition>;
+  /**
+   * Time range for `timeBucket()` interval calculation.
+   * When provided, `timeBucket()` uses this to determine the appropriate bucket size
+   * based on the span of the time range.
+   *
+   * @example
+   * ```typescript
+   * {
+   *   from: new Date('2024-01-01'),
+   *   to: new Date('2024-01-08'),
+   * }
+   * ```
+   */
+  timeRange?: TimeRange;
 }
 
 /**
@@ -547,7 +585,6 @@ export function compileTSQL(query: string, options: CompileTSQLOptions): PrintRe
   // 3. Create schema registry from table schemas
   const schemaRegistry = createSchemaRegistry(options.tableSchema);
 
-
   // 4. Strip undefined values from enforcedWhereClause
   const enforcedWhereClause = Object.fromEntries(
     Object.entries(options.enforcedWhereClause).filter(([_, value]) => value !== undefined)
@@ -559,6 +596,7 @@ export function compileTSQL(query: string, options: CompileTSQLOptions): PrintRe
     settings: options.settings,
     fieldMappings: options.fieldMappings,
     enforcedWhereClause,
+    timeRange: options.timeRange,
   });
 
   // 6. Print the AST to ClickHouse SQL (enforced conditions applied at printer level)
diff --git a/internal-packages/tsql/src/query/printer.test.ts b/internal-packages/tsql/src/query/printer.test.ts
index 6c5cda6e6..585f695fa 100644
--- a/internal-packages/tsql/src/query/printer.test.ts
+++ b/internal-packages/tsql/src/query/printer.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from "vitest";
-import { parseTSQLSelect, parseTSQLExpr } from "../index.js";
+import { parseTSQLSelect, parseTSQLExpr, compileTSQL } from "../index.js";
 import { ClickHousePrinter, printToClickHouse, type PrintResult } from "./printer.js";
 import { createPrinterContext, PrinterContext } from "./printer_context.js";
 import { createSchemaRegistry, column, type TableSchema, type SchemaRegistry } from "./schema.js";
@@ -3288,3 +3288,286 @@ describe("Required Filters", () => {
     expect(sql).toContain("cost_in_cents"); // total_cost is a virtual column
   });
 });
+
+// ============================================================
+// timeBucket() Tests
+// ============================================================
+
+describe("timeBucket()", () => {
+  /**
+   * Schema with timeConstraint for timeBucket() tests.
+   * Uses column mapping: TSQL "triggered_at" → ClickHouse "created_at"
+   */
+  const timeBucketSchema: TableSchema = {
+    name: "runs",
+    clickhouseName: "trigger_dev.task_runs_v2",
+    timeConstraint: "triggered_at",
+    columns: {
+      id: { name: "id", ...column("String") },
+      status: { name: "status", ...column("String") },
+      triggered_at: {
+        name: "triggered_at",
+        clickhouseName: "created_at",
+        ...column("DateTime64"),
+      },
+      organization_id: { name: "organization_id", ...column("String") },
+      project_id: { name: "project_id", ...column("String") },
+      environment_id: { name: "environment_id", ...column("String") },
+    },
+    tenantColumns: {
+      organizationId: "organization_id",
+      projectId: "project_id",
+      environmentId: "environment_id",
+    },
+  };
+
+  /**
+   * Schema without timeConstraint (for error tests)
+   */
+  const noTimeConstraintSchema: TableSchema = {
+    name: "events",
+    clickhouseName: "trigger_dev.events_v1",
+    columns: {
+      id: { name: "id", ...column("String") },
+      event_type: { name: "event_type", ...column("String") },
+      organization_id: { name: "organization_id", ...column("String") },
+      project_id: { name: "project_id", ...column("String") },
+      environment_id: { name: "environment_id", ...column("String") },
+    },
+    tenantColumns: {
+      organizationId: "organization_id",
+      projectId: "project_id",
+      environmentId: "environment_id",
+    },
+  };
+
+  /** 7-day time range: should produce 6 HOUR buckets */
+  const sevenDayRange = {
+    from: new Date("2024-01-01T00:00:00Z"),
+    to: new Date("2024-01-08T00:00:00Z"),
+  };
+
+  /** 1-hour time range: should produce 1 MINUTE buckets */
+  const oneHourRange = {
+    from: new Date("2024-01-01T00:00:00Z"),
+    to: new Date("2024-01-01T01:00:00Z"),
+  };
+
+  function createTimeBucketContext(
+    overrides: Partial<Parameters<typeof createPrinterContext>[0]> = {}
+  ): PrinterContext {
+    const schema = createSchemaRegistry([timeBucketSchema]);
+    return createPrinterContext({
+      schema,
+      enforcedWhereClause: {
+        organization_id: { op: "eq", value: "org_test123" },
+        project_id: { op: "eq", value: "proj_test456" },
+        environment_id: { op: "eq", value: "env_test789" },
+      },
+      timeRange: sevenDayRange,
+      ...overrides,
+    });
+  }
+
+  function printTimeBucketQuery(query: string, context?: PrinterContext) {
+    const ast = parseTSQLSelect(query);
+    const ctx = context ?? createTimeBucketContext();
+    return printToClickHouse(ast, ctx);
+  }
+
+  describe("SELECT with timeBucket()", () => {
+    it("should compile timeBucket() to toStartOfInterval with correct column and interval", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket"
+      );
+
+      // Should use ClickHouse column name (created_at), not TSQL name (triggered_at)
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+      expect(sql).toContain("count()");
+    });
+
+    it("should use 1 MINUTE interval for 1-hour time range", () => {
+      const ctx = createTimeBucketContext({ timeRange: oneHourRange });
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket",
+        ctx
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 1 MINUTE)");
+    });
+
+    it("should work with other selected columns", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), status, count() FROM runs GROUP BY timeBucket, status"
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+      expect(sql).toContain("status");
+      expect(sql).toContain("count()");
+    });
+  });
+
+  describe("GROUP BY with timeBucket alias", () => {
+    it("should allow GROUP BY timeBucket (bare identifier, matching implicit alias)", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket"
+      );
+
+      // The GROUP BY should reference the alias, not re-expand
+      expect(sql).toContain("GROUP BY");
+      // The SELECT should have the toStartOfInterval call
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+    });
+
+    it("should allow GROUP BY timebucket (all lowercase)", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timebucket"
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+    });
+
+    it("should allow GROUP BY TIMEBUCKET (all uppercase)", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY TIMEBUCKET"
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+    });
+  });
+
+  describe("ORDER BY with timeBucket alias", () => {
+    it("should allow ORDER BY timeBucket", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket ORDER BY timeBucket"
+      );
+
+      expect(sql).toContain("ORDER BY timebucket");
+    });
+
+    it("should allow ORDER BY timeBucket DESC", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket ORDER BY timeBucket DESC"
+      );
+
+      expect(sql).toContain("ORDER BY timebucket DESC");
+    });
+  });
+
+  describe("error handling", () => {
+    it("should throw when timeBucket() is called with arguments", () => {
+      expect(() =>
+        printTimeBucketQuery("SELECT timeBucket(triggered_at) FROM runs")
+      ).toThrow("timeBucket() does not accept arguments");
+    });
+
+    it("should throw when table has no timeConstraint", () => {
+      const schema = createSchemaRegistry([noTimeConstraintSchema]);
+      const ctx = createPrinterContext({
+        schema,
+        enforcedWhereClause: {
+          organization_id: { op: "eq", value: "org_test123" },
+          project_id: { op: "eq", value: "proj_test456" },
+          environment_id: { op: "eq", value: "env_test789" },
+        },
+        timeRange: sevenDayRange,
+      });
+
+      expect(() =>
+        printTimeBucketQuery("SELECT timeBucket(), count() FROM events GROUP BY timeBucket", ctx)
+      ).toThrow("timeConstraint");
+    });
+
+    it("should throw when no timeRange is provided", () => {
+      const ctx = createTimeBucketContext({ timeRange: undefined });
+
+      expect(() =>
+        printTimeBucketQuery("SELECT timeBucket(), count() FROM runs GROUP BY timeBucket", ctx)
+      ).toThrow("time range");
+    });
+  });
+
+  describe("column name mapping", () => {
+    it("should resolve timeConstraint through column mapping (TSQL → ClickHouse)", () => {
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket"
+      );
+
+      // timeConstraint is "triggered_at" which maps to CH "created_at"
+      expect(sql).toContain("created_at");
+      expect(sql).not.toContain("triggered_at");
+    });
+
+    it("should work with timeConstraint column that has no clickhouseName mapping", () => {
+      const schemaNoMapping: TableSchema = {
+        name: "logs",
+        clickhouseName: "trigger_dev.logs_v1",
+        timeConstraint: "timestamp",
+        columns: {
+          id: { name: "id", ...column("String") },
+          timestamp: { name: "timestamp", ...column("DateTime64") },
+          organization_id: { name: "organization_id", ...column("String") },
+          project_id: { name: "project_id", ...column("String") },
+          environment_id: { name: "environment_id", ...column("String") },
+        },
+        tenantColumns: {
+          organizationId: "organization_id",
+          projectId: "project_id",
+          environmentId: "environment_id",
+        },
+      };
+
+      const schema = createSchemaRegistry([schemaNoMapping]);
+      const ctx = createPrinterContext({
+        schema,
+        enforcedWhereClause: {
+          organization_id: { op: "eq", value: "org_test123" },
+          project_id: { op: "eq", value: "proj_test456" },
+          environment_id: { op: "eq", value: "env_test789" },
+        },
+        timeRange: sevenDayRange,
+      });
+
+      const { sql } = printTimeBucketQuery(
+        "SELECT timeBucket(), count() FROM logs GROUP BY timeBucket",
+        ctx
+      );
+
+      // No clickhouseName, so uses the TSQL name "timestamp" directly
+      expect(sql).toContain("toStartOfInterval(timestamp, INTERVAL 6 HOUR)");
+    });
+  });
+
+  describe("case insensitivity", () => {
+    it("should handle timeBucket() case-insensitively in SELECT", () => {
+      // The parser preserves case, but visitCall checks case-insensitively
+      const { sql } = printTimeBucketQuery(
+        "SELECT TIMEBUCKET(), count() FROM runs GROUP BY timeBucket"
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+    });
+  });
+
+  describe("integration with compileTSQL", () => {
+    it("should work through the full compileTSQL pipeline", () => {
+      const { sql, params } = compileTSQL(
+        "SELECT timeBucket(), count() FROM runs GROUP BY timeBucket",
+        {
+          tableSchema: [timeBucketSchema],
+          enforcedWhereClause: {
+            organization_id: { op: "eq", value: "org_test123" },
+            project_id: { op: "eq", value: "proj_test456" },
+            environment_id: { op: "eq", value: "env_test789" },
+          },
+          timeRange: sevenDayRange,
+        }
+      );
+
+      expect(sql).toContain("toStartOfInterval(created_at, INTERVAL 6 HOUR)");
+      expect(sql).toContain("count()");
+      // Tenant isolation should still be applied
+      expect(Object.values(params)).toContain("org_test123");
+    });
+  });
+});
diff --git a/internal-packages/tsql/src/query/printer.ts b/internal-packages/tsql/src/query/printer.ts
index 789f1836e..ff3c60843 100644
--- a/internal-packages/tsql/src/query/printer.ts
+++ b/internal-packages/tsql/src/query/printer.ts
@@ -47,6 +47,7 @@ import {
   validateFunctionArgs,
 } from "./functions";
 import { PrinterContext, WhereClauseCondition } from "./printer_context";
+import { calculateTimeBucketInterval } from "./time_buckets";
 import {
   findTable,
   validateTable,
@@ -119,10 +120,12 @@ export class ClickHousePrinter {
   /** Columns hidden when SELECT * is expanded to core columns only */
   private hiddenColumns: string[] = [];
   /**
-   * Set of column aliases defined in the current SELECT clause.
+   * Map of column aliases defined in the current SELECT clause.
+   * Key is the lowercase alias (for case-insensitive lookup),
+   * value is the canonical form (as it appears in the generated SQL).
    * Used to allow ORDER BY/HAVING to reference aliased columns.
    */
-  private selectAliases: Set<string> = new Set();
+  private selectAliases: Map<string, string> = new Map();
   /**
    * Set of internal ClickHouse column names that are allowed (e.g., tenant columns).
    * These are populated from tableSchema.tenantColumns when processing joins.
@@ -387,7 +390,7 @@ export class ClickHousePrinter {
     // Extract SELECT column aliases BEFORE visiting columns
     // This allows ORDER BY/HAVING to reference aliased columns
     const savedAliases = this.selectAliases;
-    this.selectAliases = new Set();
+    this.selectAliases = new Map();
     if (node.select) {
       for (const col of node.select) {
         this.extractSelectAlias(col);
@@ -569,20 +572,25 @@ export class ClickHousePrinter {
    */
   private extractSelectAlias(expr: Expression): void {
     // Handle explicit Alias: SELECT ... AS name
+    // Key is lowercase for case-insensitive lookup, value is the original casing
+    // so that ORDER BY/GROUP BY output matches the alias in the generated SQL.
     if ((expr as Alias).expression_type === "alias") {
-      this.selectAliases.add((expr as Alias).alias);
+      const alias = (expr as Alias).alias;
+      this.selectAliases.set(alias.toLowerCase(), alias);
       return;
     }
 
     // Handle implicit names from function calls (e.g., COUNT() → 'count')
+    // ClickHouse generates implicit aliases as lowercase
     if ((expr as Call).expression_type === "call") {
       const call = expr as Call;
-      // Aggregations and functions get implicit lowercase names
-      this.selectAliases.add(call.name.toLowerCase());
+      const canonicalName = call.name.toLowerCase();
+      this.selectAliases.set(canonicalName, canonicalName);
       return;
     }
 
     // Handle implicit names from arithmetic operations (e.g., a + b → 'plus')
+    // ClickHouse generates these as lowercase
     if ((expr as ArithmeticOperation).expression_type === "arithmetic_operation") {
       const op = expr as ArithmeticOperation;
       const opNames: Record<ArithmeticOperationOp, string> = {
@@ -592,7 +600,8 @@ export class ClickHousePrinter {
         [ArithmeticOperationOp.Div]: "divide",
         [ArithmeticOperationOp.Mod]: "modulo",
       };
-      this.selectAliases.add(opNames[op.op]);
+      const canonicalName = opNames[op.op];
+      this.selectAliases.set(canonicalName, canonicalName);
       return;
     }
 
@@ -1691,6 +1700,21 @@ export class ClickHousePrinter {
       return betweenExpr;
     }
 
+    if (condition.op === "in") {
+      // Create a tuple of values for the IN clause
+      const tupleExpr: Tuple = {
+        expression_type: "tuple",
+        exprs: condition.values.map((value) => this.createValueExpression(value)),
+      };
+      const inExpr: CompareOperation = {
+        expression_type: "compare_operation",
+        left: fieldExpr,
+        right: tupleExpr,
+        op: CompareOperationOp.In,
+      };
+      return inExpr;
+    }
+
     // Simple comparison
     const compareExpr: CompareOperation = {
       expression_type: "compare_operation",
@@ -2613,8 +2637,11 @@ export class ClickHousePrinter {
     }
 
     // Check if it's a SELECT alias (e.g., from COUNT() or explicit AS)
-    if (this.selectAliases.has(columnName)) {
-      return chain; // Valid alias reference
+    // Case-insensitive lookup: map key is lowercase, value is the canonical form
+    // that matches the alias as it appears in the generated SQL
+    const canonicalAlias = this.selectAliases.get(columnName.toLowerCase());
+    if (canonicalAlias !== undefined) {
+      return [canonicalAlias, ...chain.slice(1)];
     }
 
     // Check if this is an internal-only column being accessed in a user projection context
@@ -2770,6 +2797,11 @@ export class ClickHousePrinter {
   private visitCall(node: Call): string {
     const name = node.name;
 
+    // Handle timeBucket() - special TSQL function for automatic time bucketing
+    if (name.toLowerCase() === "timebucket") {
+      return this.visitTimeBucket(node);
+    }
+
     // Check if this is a comparison function
     if (name in TSQL_COMPARISON_MAPPING) {
       const op = TSQL_COMPARISON_MAPPING[name];
@@ -2901,6 +2933,73 @@ export class ClickHousePrinter {
     return `SAMPLE ${sample}`;
   }
 
+  // ============================================================
+  // timeBucket() Support
+  // ============================================================
+
+  /**
+   * Handle the `timeBucket()` TSQL function.
+   *
+   * Resolves the table's timeConstraint column to its ClickHouse name,
+   * calculates an appropriate interval from the query's time range,
+   * and emits `toStartOfInterval(column, INTERVAL N UNIT)`.
+   *
+   * @throws QueryError if timeBucket() is called with arguments, or if the table
+   *   has no timeConstraint, or if no timeRange is provided in the context.
+   */
+  private visitTimeBucket(node: Call): string {
+    // Validate: timeBucket() takes no arguments
+    if (node.args.length > 0) {
+      throw new QueryError(
+        "timeBucket() does not accept arguments. It automatically uses the table's time constraint column."
+      );
+    }
+
+    // Find the table with a timeConstraint
+    const tableWithConstraint = this.findTimeConstraintTable();
+    if (!tableWithConstraint) {
+      throw new QueryError(
+        "timeBucket() requires a table with a timeConstraint defined in its schema."
+      );
+    }
+
+    const { tableSchema, clickhouseColumnName } = tableWithConstraint;
+
+    // Get the time range from context
+    const timeRange = this.context.timeRange;
+    if (!timeRange) {
+      throw new QueryError(
+        "timeBucket() requires a time range to be provided. Pass a timeRange option when compiling the query."
+      );
+    }
+
+    // Calculate the appropriate interval
+    const interval = calculateTimeBucketInterval(timeRange.from, timeRange.to);
+
+    // Emit toStartOfInterval(column, INTERVAL N UNIT)
+    return `toStartOfInterval(${escapeClickHouseIdentifier(clickhouseColumnName)}, INTERVAL ${interval.value} ${interval.unit})`;
+  }
+
+  /**
+   * Find a table in the current query context that has a timeConstraint defined.
+   * Returns the table schema and the resolved ClickHouse column name for the constraint.
+   */
+  private findTimeConstraintTable(): {
+    tableSchema: TableSchema;
+    clickhouseColumnName: string;
+  } | null {
+    for (const tableSchema of this.tableContexts.values()) {
+      if (tableSchema.timeConstraint) {
+        const columnSchema = tableSchema.columns[tableSchema.timeConstraint];
+        if (columnSchema) {
+          const clickhouseColumnName = columnSchema.clickhouseName || columnSchema.name;
+          return { tableSchema, clickhouseColumnName };
+        }
+      }
+    }
+    return null;
+  }
+
   // ============================================================
   // Helper Methods
   // ============================================================
diff --git a/internal-packages/tsql/src/query/printer_context.ts b/internal-packages/tsql/src/query/printer_context.ts
index 2956e660d..54203cfa2 100644
--- a/internal-packages/tsql/src/query/printer_context.ts
+++ b/internal-packages/tsql/src/query/printer_context.ts
@@ -41,10 +41,30 @@ export interface BetweenCondition {
 }
 
 /**
- * A WHERE clause condition that can be either a simple comparison or a BETWEEN.
+ * An IN condition (e.g., column IN ('a', 'b', 'c'))
+ */
+export interface InCondition {
+  /** The in operator */
+  op: "in";
+  /** The values to check against */
+  values: (string | number)[];
+}
+
+/**
+ * A WHERE clause condition that can be either a simple comparison, a BETWEEN, or an IN.
  * Used for both enforcedWhereClause (always applied) and whereClauseFallback (default when user doesn't filter).
  */
-export type WhereClauseCondition = SimpleComparisonCondition | BetweenCondition;
+export type WhereClauseCondition = SimpleComparisonCondition | BetweenCondition | InCondition;
+
+/**
+ * A time range used by `timeBucket()` to determine the appropriate bucket interval.
+ */
+export interface TimeRange {
+  /** Start of the time range (inclusive) */
+  from: Date;
+  /** End of the time range (inclusive) */
+  to: Date;
+}
 
 /**
  * Default query settings
@@ -99,6 +119,12 @@ export class PrinterContext {
    */
   readonly enforcedWhereClause: Record<string, WhereClauseCondition>;
 
+  /**
+   * Time range for `timeBucket()` interval calculation.
+   * When provided, `timeBucket()` uses this to determine the appropriate bucket size.
+   */
+  readonly timeRange?: TimeRange;
+
   constructor(
     /** Schema registry containing allowed tables and columns */
     public readonly schema: SchemaRegistry,
@@ -110,12 +136,15 @@ export class PrinterContext {
      * Enforced WHERE conditions that are ALWAYS applied at the table level.
      * Must include tenant columns (e.g., organization_id) for multi-tenant tables.
      */
-    enforcedWhereClause: Record<string, WhereClauseCondition> = {}
+    enforcedWhereClause: Record<string, WhereClauseCondition> = {},
+    /** Time range for timeBucket() interval calculation */
+    timeRange?: TimeRange
   ) {
     // Initialize with default settings
     this.settings = { ...DEFAULT_QUERY_SETTINGS, ...settings };
     this.fieldMappings = fieldMappings;
     this.enforcedWhereClause = enforcedWhereClause;
+    this.timeRange = timeRange;
   }
 
   /**
@@ -195,7 +224,8 @@ export class PrinterContext {
       this.schema,
       this.settings,
       this.fieldMappings,
-      this.enforcedWhereClause
+      this.enforcedWhereClause,
+      this.timeRange
     );
     // Share the same values map so parameters are unified
     child.values = this.values;
@@ -241,6 +271,11 @@ export interface PrinterContextOptions {
    * ```
    */
   enforcedWhereClause: Record<string, WhereClauseCondition>;
+  /**
+   * Time range for `timeBucket()` interval calculation.
+   * When provided, `timeBucket()` uses this to determine the appropriate bucket size.
+   */
+  timeRange?: TimeRange;
 }
 
 /**
@@ -251,7 +286,7 @@ export function createPrinterContext(options: PrinterContextOptions): PrinterCon
     options.schema,
     options.settings,
     options.fieldMappings,
-    options.enforcedWhereClause
+    options.enforcedWhereClause,
+    options.timeRange
   );
 }
-
diff --git a/internal-packages/tsql/src/query/schema.ts b/internal-packages/tsql/src/query/schema.ts
index 21bc9ec95..fd8a7add1 100644
--- a/internal-packages/tsql/src/query/schema.ts
+++ b/internal-packages/tsql/src/query/schema.ts
@@ -336,6 +336,24 @@ export interface TableSchema {
    * These are injected into the WHERE clause automatically, similar to tenant isolation.
    */
   requiredFilters?: RequiredFilter[];
+  /**
+   * The TSQL column name used as the time constraint for `timeBucket()`.
+   *
+   * When set, `timeBucket()` resolves to `toStartOfInterval(clickhouse_column, INTERVAL ...)`,
+   * using the ClickHouse column name mapped from this TSQL column.
+   *
+   * @example
+   * ```typescript
+   * {
+   *   name: "runs",
+   *   timeConstraint: "triggered_at", // TSQL column name; maps to CH column "created_at"
+   *   columns: {
+   *     triggered_at: { name: "triggered_at", clickhouseName: "created_at", ...column("DateTime64") },
+   *   },
+   * }
+   * ```
+   */
+  timeConstraint?: string;
 }
 
 /**
diff --git a/internal-packages/tsql/src/query/time_buckets.test.ts b/internal-packages/tsql/src/query/time_buckets.test.ts
new file mode 100644
index 000000000..451e74bcc
--- /dev/null
+++ b/internal-packages/tsql/src/query/time_buckets.test.ts
@@ -0,0 +1,181 @@
+import { describe, it, expect } from "vitest";
+import { calculateTimeBucketInterval, type TimeBucketInterval } from "./time_buckets.js";
+
+/**
+ * Helper to create a Date range from a start date and a duration
+ */
+function makeRange(from: Date, durationMs: number): { from: Date; to: Date } {
+  return { from, to: new Date(from.getTime() + durationMs) };
+}
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+describe("calculateTimeBucketInterval", () => {
+  describe("small ranges (seconds-level buckets)", () => {
+    it("should return 5 SECOND for a 1-minute range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 1 * MINUTE);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 5,
+        unit: "SECOND",
+      });
+    });
+
+    it("should return 5 SECOND for a 4-minute range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 4 * MINUTE);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 5,
+        unit: "SECOND",
+      });
+    });
+
+    it("should return 30 SECOND for a 10-minute range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 10 * MINUTE);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 30,
+        unit: "SECOND",
+      });
+    });
+
+    it("should return 30 SECOND for a 29-minute range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 29 * MINUTE);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 30,
+        unit: "SECOND",
+      });
+    });
+  });
+
+  describe("medium ranges (minute-level buckets)", () => {
+    it("should return 1 MINUTE for a 45-minute range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 45 * MINUTE);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "MINUTE",
+      });
+    });
+
+    it("should return 1 MINUTE for a 1-hour range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 1 * HOUR);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "MINUTE",
+      });
+    });
+
+    it("should return 5 MINUTE for a 3-hour range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 3 * HOUR);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 5,
+        unit: "MINUTE",
+      });
+    });
+
+    it("should return 15 MINUTE for a 12-hour range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 12 * HOUR);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 15,
+        unit: "MINUTE",
+      });
+    });
+  });
+
+  describe("large ranges (hour/day-level buckets)", () => {
+    it("should return 1 HOUR for a 2-day range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 2 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "HOUR",
+      });
+    });
+
+    it("should return 6 HOUR for a 7-day range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 7 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 6,
+        unit: "HOUR",
+      });
+    });
+
+    it("should return 1 DAY for a 30-day range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 30 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "DAY",
+      });
+    });
+
+    it("should return 1 WEEK for a 90-day range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 90 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "WEEK",
+      });
+    });
+  });
+
+  describe("very large ranges (month-level buckets)", () => {
+    it("should return 1 MONTH for a 365-day range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 365 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "MONTH",
+      });
+    });
+
+    it("should return 1 MONTH for a 2-year range", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 730 * DAY);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "MONTH",
+      });
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle zero-length range (from === to)", () => {
+      const date = new Date("2024-01-01T00:00:00Z");
+      const result = calculateTimeBucketInterval(date, date);
+      // Zero range is under 5 minutes, so 5 SECOND
+      expect(result).toEqual<TimeBucketInterval>({ value: 5, unit: "SECOND" });
+    });
+
+    it("should handle reversed dates (to < from) using absolute difference", () => {
+      const from = new Date("2024-01-08T00:00:00Z");
+      const to = new Date("2024-01-01T00:00:00Z");
+      // 7 days reversed → same as 7 days forward
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 6,
+        unit: "HOUR",
+      });
+    });
+
+    it("should handle boundary exactly at 5 minutes", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 5 * MINUTE);
+      // Exactly 5 minutes is NOT under 5 minutes, so should be 30 SECOND
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 30,
+        unit: "SECOND",
+      });
+    });
+
+    it("should handle boundary exactly at 24 hours", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 24 * HOUR);
+      // Exactly 24 hours is NOT under 24 hours, so should be 1 HOUR
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 1,
+        unit: "HOUR",
+      });
+    });
+
+    it("should handle very small range (1 second)", () => {
+      const { from, to } = makeRange(new Date("2024-01-01T00:00:00Z"), 1 * SECOND);
+      expect(calculateTimeBucketInterval(from, to)).toEqual<TimeBucketInterval>({
+        value: 5,
+        unit: "SECOND",
+      });
+    });
+  });
+});
diff --git a/internal-packages/tsql/src/query/time_buckets.ts b/internal-packages/tsql/src/query/time_buckets.ts
new file mode 100644
index 000000000..fe7bd7efe
--- /dev/null
+++ b/internal-packages/tsql/src/query/time_buckets.ts
@@ -0,0 +1,86 @@
+/**
+ * Time bucket interval calculation for the `timeBucket()` TSQL function.
+ *
+ * Given a time range, determines the most appropriate bucket interval
+ * to produce a reasonable number of data points (~50-100 buckets).
+ */
+
+/**
+ * A time bucket interval with a numeric value and time unit.
+ * Used to generate ClickHouse `INTERVAL N UNIT` syntax.
+ */
+export interface TimeBucketInterval {
+  /** The numeric value of the interval (e.g., 5 for "5 MINUTE") */
+  value: number;
+  /** The time unit */
+  unit: "SECOND" | "MINUTE" | "HOUR" | "DAY" | "WEEK" | "MONTH";
+}
+
+/**
+ * Time bucket thresholds: each entry defines a maximum time range duration (in seconds)
+ * and the corresponding bucket interval to use.
+ *
+ * The intervals are chosen to produce roughly 50-100 data points for the given range.
+ * Entries are ordered from smallest to largest range.
+ */
+const BUCKET_THRESHOLDS: Array<{ maxRangeSeconds: number; interval: TimeBucketInterval }> = [
+  // Under 5 minutes → 5 second buckets (max 60 buckets)
+  { maxRangeSeconds: 5 * 60, interval: { value: 5, unit: "SECOND" } },
+  // Under 30 minutes → 30 second buckets (max 60 buckets)
+  { maxRangeSeconds: 30 * 60, interval: { value: 30, unit: "SECOND" } },
+  // Under 2 hours → 1 minute buckets (max 120 buckets)
+  { maxRangeSeconds: 2 * 60 * 60, interval: { value: 1, unit: "MINUTE" } },
+  // Under 6 hours → 5 minute buckets (max 72 buckets)
+  { maxRangeSeconds: 6 * 60 * 60, interval: { value: 5, unit: "MINUTE" } },
+  // Under 24 hours → 15 minute buckets (max 96 buckets)
+  { maxRangeSeconds: 24 * 60 * 60, interval: { value: 15, unit: "MINUTE" } },
+  // Under 3 days → 1 hour buckets (max 72 buckets)
+  { maxRangeSeconds: 3 * 24 * 60 * 60, interval: { value: 1, unit: "HOUR" } },
+  // Under 14 days → 6 hour buckets (max 56 buckets)
+  { maxRangeSeconds: 14 * 24 * 60 * 60, interval: { value: 6, unit: "HOUR" } },
+  // Under 60 days → 1 day buckets (max 60 buckets)
+  { maxRangeSeconds: 60 * 24 * 60 * 60, interval: { value: 1, unit: "DAY" } },
+  // Under 365 days → 1 week buckets (max ~52 buckets)
+  { maxRangeSeconds: 365 * 24 * 60 * 60, interval: { value: 1, unit: "WEEK" } },
+];
+
+/** Default interval for very large ranges (365+ days) */
+const DEFAULT_LARGE_INTERVAL: TimeBucketInterval = { value: 1, unit: "MONTH" };
+
+/**
+ * Calculate the most appropriate time bucket interval for a given time range.
+ *
+ * The interval is chosen to produce a reasonable number of data points (~50-100 buckets).
+ * For very small ranges (< 5 minutes), uses 5-second buckets.
+ * For very large ranges (> 365 days), uses 1-month buckets.
+ *
+ * @param from - Start of the time range
+ * @param to - End of the time range
+ * @returns The recommended bucket interval
+ *
+ * @example
+ * ```typescript
+ * // 1 hour range → 1 minute buckets
+ * calculateTimeBucketInterval(
+ *   new Date("2024-01-01T00:00:00Z"),
+ *   new Date("2024-01-01T01:00:00Z"),
+ * ); // { value: 1, unit: "MINUTE" }
+ *
+ * // 7 day range → 6 hour buckets
+ * calculateTimeBucketInterval(
+ *   new Date("2024-01-01"),
+ *   new Date("2024-01-08"),
+ * ); // { value: 6, unit: "HOUR" }
+ * ```
+ */
+export function calculateTimeBucketInterval(from: Date, to: Date): TimeBucketInterval {
+  const rangeSeconds = Math.abs(to.getTime() - from.getTime()) / 1000;
+
+  for (const threshold of BUCKET_THRESHOLDS) {
+    if (rangeSeconds < threshold.maxRangeSeconds) {
+      return threshold.interval;
+    }
+  }
+
+  return DEFAULT_LARGE_INTERVAL;
+}
diff --git a/internal-packages/tsql/src/query/validator.ts b/internal-packages/tsql/src/query/validator.ts
index 5d708500c..eb8591c85 100644
--- a/internal-packages/tsql/src/query/validator.ts
+++ b/internal-packages/tsql/src/query/validator.ts
@@ -230,8 +230,8 @@ function validateSelectQuery(node: SelectQuery, context: ValidationContext): voi
   if (node.select) {
     for (const expr of node.select) {
       if ((expr as Alias).expression_type === "alias") {
-        // Explicit alias: SELECT ... AS name
-        context.selectAliases.add((expr as Alias).alias);
+        // Explicit alias: SELECT ... AS name (stored lowercase for case-insensitive lookup)
+        context.selectAliases.add((expr as Alias).alias.toLowerCase());
       } else {
         // Check for implicit aliases from expressions without AS
         const implicitName = getImplicitName(expr);
@@ -439,7 +439,8 @@ function validateField(field: Field, context: ValidationContext): void {
   const columnName = firstPart;
 
   // Check if it's a SELECT alias (e.g., from "count(*) as count")
-  if (context.selectAliases.has(columnName)) {
+  // Case-insensitive: aliases are stored lowercase
+  if (context.selectAliases.has(columnName.toLowerCase())) {
     return;
   }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c88884a5..f504496dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -498,8 +498,8 @@ importers:
         specifier: workspace:*
         version: link:../../internal-packages/otlp-importer
       '@trigger.dev/platform':
-        specifier: 1.0.22
-        version: 1.0.22
+        specifier: 1.0.23
+        version: 1.0.23
       '@trigger.dev/redis-worker':
         specifier: workspace:*
         version: link:../../packages/redis-worker
@@ -692,12 +692,18 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-grid-layout:
+        specifier: ^2.2.2
+        version: 2.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-hotkeys-hook:
         specifier: ^4.4.1
         version: 4.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-popper:
         specifier: ^2.3.0
         version: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-resizable:
+        specifier: ^3.1.3
+        version: 3.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-resizable-panels:
         specifier: ^2.0.9
         version: 2.0.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -10488,8 +10494,8 @@ packages:
       react: ^18.2.0
       react-dom: 18.2.0
 
-  '@trigger.dev/platform@1.0.22':
-    resolution: {integrity: sha512-tvPf40wqEDcQCZsHt/9A+WoQ08z+uObSWQ+oahqCgp3dSgKOUH8NdzZ/2ISSRiCkN2jURixNiUyDJmgsZipExg==}
+  '@trigger.dev/platform@1.0.23':
+    resolution: {integrity: sha512-/fHMOKHdqRv6t70h0weUorOeVOkX+8WGWwPlzdq+uGDqkf8ZrcwBDuBSyoG9KkyvIsA8Tw64zVbWK94CbVlznw==}
 
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
@@ -13804,6 +13810,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@4.0.3:
+    resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==}
+
   fast-equals@5.0.1:
     resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
     engines: {node: '>=6.0.0'}
@@ -17616,6 +17625,12 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-draggable@4.5.0:
+    resolution: {integrity: sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+
   react-email@2.1.2:
     resolution: {integrity: sha512-HBHhpzEE5es9YUoo7VSj6qy1omjwndxf3/Sb44UJm/uJ2AjmqALo2yryux0CjW9QAVfitc9rxHkLvIb9H87QQw==}
     engines: {node: '>=18.0.0'}
@@ -17624,6 +17639,12 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-grid-layout@2.2.2:
+    resolution: {integrity: sha512-yNo9pxQWoxHWRAwHGSVT4DEGELYPyQ7+q9lFclb5jcqeFzva63/2F72CryS/jiTIr/SBIlTaDdyjqH+ODg8oBw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+
   react-hotkeys-hook@4.4.1:
     resolution: {integrity: sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==}
     peerDependencies:
@@ -17682,6 +17703,12 @@ packages:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
 
+  react-resizable@3.1.3:
+    resolution: {integrity: sha512-liJBNayhX7qA4tBJiBD321FDhJxgGTJ07uzH5zSORXoE8h7PyEZ8mLqmosST7ppf6C4zUsbd2gzDMmBCfFp9Lw==}
+    peerDependencies:
+      react: '>= 16.3'
+      react-dom: '>= 16.3'
+
   react-router-dom@6.17.0:
     resolution: {integrity: sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==}
     engines: {node: '>=14.0.0'}
@@ -30641,7 +30668,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@trigger.dev/platform@1.0.22':
+  '@trigger.dev/platform@1.0.23':
     dependencies:
       zod: 3.23.8
 
@@ -34677,6 +34704,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@4.0.3: {}
+
   fast-equals@5.0.1: {}
 
   fast-fifo@1.3.2: {}
@@ -39128,6 +39157,13 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-draggable@4.5.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   react-email@2.1.2(@opentelemetry/api@1.9.0)(@swc/helpers@0.5.15)(eslint@8.31.0):
     dependencies:
       '@babel/parser': 7.24.1
@@ -39189,6 +39225,17 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-grid-layout@2.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      clsx: 2.1.1
+      fast-equals: 4.0.3
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-draggable: 4.5.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-resizable: 3.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+
   react-hotkeys-hook@4.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -39307,6 +39354,13 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  react-resizable@3.1.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-draggable: 4.5.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+
   react-router-dom@6.17.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@remix-run/router': 1.10.0

From ba320a4bdb1136c39d59076cb22f201bdce98611 Mon Sep 17 00:00:00 2001
From: Eric Allam <eric@trigger.dev>
Date: Thu, 12 Feb 2026 22:27:14 +0000
Subject: [PATCH 04/25] chore(vouch): vouch for gautamsi (#3039)

---
 .github/VOUCHED.td | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/VOUCHED.td b/.github/VOUCHED.td
index a9f276737..b1aee9f20 100644
--- a/.github/VOUCHED.td
+++ b/.github/VOUCHED.td
@@ -10,4 +10,6 @@ mpcgrid
 myftija
 nicktrn
 samejr
-isshaddad
\ No newline at end of file
+isshaddad
+# Outside contributors
+gautamsi
\ No newline at end of file

From bfe417f67937b39d182dd1a2db07e097ed346cff Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 13 Feb 2026 10:07:06 +0000
Subject: [PATCH 05/25] docs: add note about single-issue PRs to contributing
 guide (#3044)

Add a prominent notice at the top of CONTRIBUTING.md clarifying that we
only accept PRs addressing a single issue, not multiple fixes.

https://claude.ai/code/session_011ZNQd5zkf38piSMhWbgiWt

Co-authored-by: Claude <noreply@anthropic.com>
---
 CONTRIBUTING.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 754ad017b..b4b280bda 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,6 +6,8 @@ Please take some time to read this guide to understand contributing best practic
 
 Thank you for helping us make Trigger.dev even better! 🤩
 
+> **Important:** We only accept PRs that address a single issue. Please do not submit PRs containing multiple unrelated fixes or features. If you have multiple contributions, open a separate PR for each one.
+
 ## Getting vouched (required before opening a PR)
 
 We use [vouch](https://github.com/mitchellh/vouch) to manage contributor trust. **PRs from unvouched users are automatically closed.**

From 4b7f67604aaa2ccc7b9774a487dcc651dcba46cb Mon Sep 17 00:00:00 2001
From: Oskar Otwinowski <oskar.otwinowski@gmail.com>
Date: Fri, 13 Feb 2026 14:06:22 +0100
Subject: [PATCH 06/25] feat(webapp/deployments): Vercel improvements & fixes
 (#3037)

---
 .vscode/launch.json                           |   9 ++
 .../integrations/VercelOnboardingModal.tsx    |  91 +++++++++--
 apps/webapp/app/hooks/usePostHog.ts           |  17 ++-
 ...i.v1.deployments.$deploymentId.progress.ts |   1 +
 .../app/v3/services/deployment.server.ts      |  56 ++++++-
 .../services/initializeDeployment.server.ts   |   4 +-
 packages/core/src/v3/schemas/api-type.test.ts | 141 ++++++++++++++++++
 packages/core/src/v3/schemas/api.ts           | 104 +++++++------
 8 files changed, 360 insertions(+), 63 deletions(-)
 create mode 100644 packages/core/src/v3/schemas/api-type.test.ts

diff --git a/.vscode/launch.json b/.vscode/launch.json
index d135aa70a..71a76904a 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -31,6 +31,15 @@
       "cwd": "${workspaceFolder}/apps/webapp",
       "sourceMaps": true
     },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug opened test file",
+      "command": "pnpm run test -- ./${relativeFile}",
+      "envFile": "${workspaceFolder}/.env",
+      "cwd": "${workspaceFolder}",
+      "sourceMaps": true
+    },
     {
       "type": "chrome",
       "request": "launch",
diff --git a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
index c2a5bfec4..dc6996dab 100644
--- a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
+++ b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
@@ -47,6 +47,7 @@ import { type VercelOnboardingData } from "~/presenters/v3/VercelSettingsPresent
 import { vercelAppInstallPath, v3ProjectSettingsPath, githubAppInstallPath, vercelResourcePath } from "~/utils/pathBuilder";
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { useEffect, useState, useCallback, useRef } from "react";
+import { usePostHogTracking } from "~/hooks/usePostHog";
 
 function safeRedirectUrl(url: string): string | null {
   try {
@@ -114,6 +115,7 @@ export function VercelOnboardingModal({
   nextUrl?: string;
   onDataReload?: (vercelStagingEnvironment?: string) => void;
 }) {
+  const { capture, startSessionRecording } = usePostHogTracking();
   const navigation = useNavigation();
   const fetcher = useTypedFetcher<typeof loader>();
   const envMappingFetcher = useFetcher();
@@ -172,6 +174,33 @@ export function VercelOnboardingModal({
     prevIsOpenRef.current = isOpen;
   }, [isOpen, state, computeInitialState]);
 
+  const trackOnboarding = useCallback(
+    (eventName: string, extraProperties?: Record<string, unknown>) => {
+      capture(eventName, {
+        origin: fromMarketplaceContext ? "marketplace" : "dashboard",
+        step: state,
+        organization_slug: organizationSlug,
+        project_slug: projectSlug,
+        ...extraProperties,
+      });
+    },
+    [capture, fromMarketplaceContext, state, organizationSlug, projectSlug]
+  );
+
+  const hasTrackedStartRef = useRef(false);
+  const hasTrackedCompletionRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && state === "project-selection" && !hasTrackedStartRef.current) {
+      hasTrackedStartRef.current = true;
+      startSessionRecording();
+      trackOnboarding("vercel onboarding started");
+    }
+    if (!isOpen) {
+      hasTrackedStartRef.current = false;
+      hasTrackedCompletionRef.current = false;
+    }
+  }, [isOpen, state, trackOnboarding, startSessionRecording]);
+
   const [selectedVercelProject, setSelectedVercelProject] = useState<{
     id: string;
     name: string;
@@ -337,6 +366,9 @@ export function VercelOnboardingModal({
 
   useEffect(() => {
     if (state === "project-selection" && fetcher.data && "success" in fetcher.data && fetcher.data.success && fetcher.state === "idle") {
+      trackOnboarding("vercel onboarding project selected", {
+        vercel_project_name: selectedVercelProject?.name,
+      });
       setState("loading-env-mapping");
       if (onDataReload) {
         onDataReload();
@@ -344,7 +376,7 @@ export function VercelOnboardingModal({
     } else if (fetcher.data && "error" in fetcher.data && typeof fetcher.data.error === "string") {
       setProjectSelectionError(fetcher.data.error);
     }
-  }, [state, fetcher.data, fetcher.state, onDataReload]);
+  }, [state, fetcher.data, fetcher.state, onDataReload, trackOnboarding, selectedVercelProject?.name]);
 
   // For marketplace origin, skip env-mapping step
   useEffect(() => {
@@ -449,14 +481,23 @@ export function VercelOnboardingModal({
       method: "post",
       action: actionUrl,
     });
-  }, [actionUrl, fetcher, onClose, nextUrl, fromMarketplaceContext]);
+  }, [actionUrl, fetcher, onClose, fromMarketplaceContext]);
 
   const handleSkipEnvMapping = useCallback(() => {
+    trackOnboarding("vercel onboarding env mapping completed", {
+      skipped: true,
+      staging_environment: null,
+    });
     setVercelStagingEnvironment(null);
     setState("loading-env-vars");
-  }, []);
+  }, [trackOnboarding]);
 
   const handleUpdateEnvMapping = useCallback(() => {
+    trackOnboarding("vercel onboarding env mapping completed", {
+      skipped: false,
+      staging_environment: vercelStagingEnvironment?.displayName ?? null,
+    });
+
     if (!vercelStagingEnvironment) {
       setState("loading-env-vars");
       return;
@@ -471,9 +512,11 @@ export function VercelOnboardingModal({
       action: actionUrl,
     });
 
-  }, [vercelStagingEnvironment, envMappingFetcher, actionUrl]);
+  }, [vercelStagingEnvironment, envMappingFetcher, actionUrl, trackOnboarding]);
 
   const handleBuildSettingsNext = useCallback(() => {
+    trackOnboarding("vercel onboarding build settings completed");
+
     if (nextUrl && fromMarketplaceContext && isGitHubConnectedForOnboarding) {
       setIsRedirecting(true);
     }
@@ -501,7 +544,7 @@ export function VercelOnboardingModal({
     if (!isGitHubConnectedForOnboarding) {
       setState("github-connection");
     }
-  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl]);
+  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl, trackOnboarding]);
 
   const handleFinishOnboarding = useCallback((e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -530,10 +573,14 @@ export function VercelOnboardingModal({
   }, [completeOnboardingFetcher.data, completeOnboardingFetcher.state, state]);
 
   useEffect(() => {
-    if (state === "completed") {
+    if (state === "completed" && !hasTrackedCompletionRef.current) {
+      hasTrackedCompletionRef.current = true;
+      trackOnboarding("vercel onboarding completed", {
+        github_connected: isGitHubConnectedForOnboarding,
+      });
       onClose();
     }
-  }, [state, onClose]);
+  }, [state, onClose, trackOnboarding, isGitHubConnectedForOnboarding]);
 
   useEffect(() => {
     if (state === "installing") {
@@ -565,6 +612,12 @@ export function VercelOnboardingModal({
     }
   }, [state, customEnvironments, vercelStagingEnvironment]);
 
+  useEffect(() => {
+    if (state === "project-selection" && availableProjects.length > 0 && !selectedVercelProject) {
+      setSelectedVercelProject(availableProjects[0]);
+    }
+  }, [state, availableProjects, selectedVercelProject]);
+
   if (!isOpen || onboardingData?.authInvalid) {
     return null;
   }
@@ -578,7 +631,14 @@ export function VercelOnboardingModal({
 
   if (isLoadingState) {
     return (
-      <Dialog open={isOpen} onOpenChange={(open) => !open && !fromMarketplaceContext && onClose()}>
+      <Dialog open={isOpen} onOpenChange={(open) => {
+        if (!open && !fromMarketplaceContext) {
+          if (state as string !== "completed") {
+            trackOnboarding("vercel onboarding abandoned");
+          }
+          onClose();
+        }
+      }}>
         <DialogContent className="max-w-lg">
           <DialogHeader>
             <div className="flex items-center gap-2">
@@ -601,7 +661,14 @@ export function VercelOnboardingModal({
   const showGitHubConnection = state === "github-connection";
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && !fromMarketplaceContext && onClose()}>
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open && !fromMarketplaceContext) {
+        if (state !== "completed") {
+          trackOnboarding("vercel onboarding abandoned");
+        }
+        onClose();
+      }
+    }}>
       <DialogContent className="max-w-lg">
         <DialogHeader>
           <div className="flex items-center gap-2">
@@ -625,6 +692,7 @@ export function VercelOnboardingModal({
                 </Callout>
               ) : (
                 <Select
+                  disabled={availableProjects.length === 1}
                   value={selectedVercelProject?.id || ""}
                   setValue={(value) => {
                     if (!Array.isArray(value)) {
@@ -634,6 +702,7 @@ export function VercelOnboardingModal({
                     }
                   }}
                   items={availableProjects}
+                  filter={availableProjects.length > 5 ? { keys: ["name"] } : undefined}
                   variant="tertiary/medium"
                   placeholder="Select a Vercel project"
                   dropdownIcon
@@ -894,6 +963,10 @@ export function VercelOnboardingModal({
                   <Button
                     variant="primary/medium"
                     onClick={() => {
+                      trackOnboarding("vercel onboarding env vars configured", {
+                        env_vars_enabled: enabledEnvVars.length,
+                        env_vars_total: syncableEnvVars.length,
+                      });
                       if (fromMarketplaceContext) {
                         handleBuildSettingsNext();
                       } else {
diff --git a/apps/webapp/app/hooks/usePostHog.ts b/apps/webapp/app/hooks/usePostHog.ts
index 99e2597df..f52663ec0 100644
--- a/apps/webapp/app/hooks/usePostHog.ts
+++ b/apps/webapp/app/hooks/usePostHog.ts
@@ -1,6 +1,6 @@
 import { useLocation } from "@remix-run/react";
 import posthog from "posthog-js";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useOrganizationChanged } from "./useOrganizations";
 import { useOptionalUser, useUserChanged } from "./useUser";
 import { useProjectChanged } from "./useProject";
@@ -68,3 +68,18 @@ export const usePostHog = (apiKey?: string, logging = false, debug = false): voi
     posthog.capture("$pageview");
   }, [location, logging]);
 };
+
+export function usePostHogTracking() {
+  const capture = useCallback(
+    (eventName: string, properties?: Record<string, unknown>) => {
+      posthog.capture(eventName, properties);
+    },
+    []
+  );
+
+  const startSessionRecording = useCallback(() => {
+    posthog.startSessionRecording();
+  }, []);
+
+  return { capture, startSessionRecording };
+}
diff --git a/apps/webapp/app/routes/api.v1.deployments.$deploymentId.progress.ts b/apps/webapp/app/routes/api.v1.deployments.$deploymentId.progress.ts
index 64f20f4f6..2c78c59f5 100644
--- a/apps/webapp/app/routes/api.v1.deployments.$deploymentId.progress.ts
+++ b/apps/webapp/app/routes/api.v1.deployments.$deploymentId.progress.ts
@@ -48,6 +48,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
       contentHash: body.data.contentHash,
       git: body.data.gitMeta,
       runtime: body.data.runtime,
+      buildServerMetadata: body.data.buildServerMetadata,
     })
     .match(
       () => {
diff --git a/apps/webapp/app/v3/services/deployment.server.ts b/apps/webapp/app/v3/services/deployment.server.ts
index 848c06c45..56888284b 100644
--- a/apps/webapp/app/v3/services/deployment.server.ts
+++ b/apps/webapp/app/v3/services/deployment.server.ts
@@ -2,7 +2,12 @@ import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { BaseService } from "./baseService.server";
 import { errAsync, fromPromise, okAsync, type ResultAsync } from "neverthrow";
 import { type WorkerDeployment, type Project } from "@trigger.dev/database";
-import { BuildServerMetadata, logger, type GitMeta, type DeploymentEvent } from "@trigger.dev/core/v3";
+import {
+  BuildServerMetadata,
+  logger,
+  type GitMeta,
+  type DeploymentEvent,
+} from "@trigger.dev/core/v3";
 import { TimeoutDeploymentService } from "./timeoutDeployment.server";
 import { env } from "~/env.server";
 import { createRemoteImageBuild } from "../remoteImageBuilder.server";
@@ -38,9 +43,20 @@ export class DeploymentService extends BaseService {
   public progressDeployment(
     authenticatedEnv: AuthenticatedEnvironment,
     friendlyId: string,
-    updates: Partial<Pick<WorkerDeployment, "contentHash" | "runtime"> & { git: GitMeta }>
+    updates: Partial<
+      Pick<WorkerDeployment, "contentHash" | "runtime"> & {
+        git: GitMeta;
+        buildServerMetadata: BuildServerMetadata;
+      }
+    >
   ) {
-    const validateDeployment = (deployment: Pick<WorkerDeployment, "id" | "status"> & { buildServerMetadata?: BuildServerMetadata }) => {
+    const { buildServerMetadata: newBuildServerMetadata, ...restUpdates } = updates;
+
+    const validateDeployment = (
+      deployment: Pick<WorkerDeployment, "id" | "status"> & {
+        buildServerMetadata?: BuildServerMetadata;
+      }
+    ) => {
       if (deployment.status !== "PENDING" && deployment.status !== "INSTALLING") {
         logger.warn(
           "Attempted progressing deployment that is not in PENDING or INSTALLING status",
@@ -54,12 +70,24 @@ export class DeploymentService extends BaseService {
       return okAsync(deployment);
     };
 
-    const progressToInstalling = (deployment: Pick<WorkerDeployment, "id">) =>
-      fromPromise(
+    const progressToInstalling = (
+      deployment: Pick<WorkerDeployment, "id"> & { buildServerMetadata?: BuildServerMetadata }
+    ) => {
+      const existingBuildServerMetadata = deployment.buildServerMetadata;
+
+      return fromPromise(
         this._prisma.workerDeployment.updateMany({
           where: { id: deployment.id, status: "PENDING" }, // status could've changed in the meantime, we're not locking the row
           data: {
-            ...updates,
+            ...restUpdates,
+            ...(newBuildServerMetadata
+              ? {
+                  buildServerMetadata: {
+                    ...(existingBuildServerMetadata ?? {}),
+                    ...newBuildServerMetadata,
+                  },
+                }
+              : {}),
             status: "INSTALLING",
             startedAt: new Date(),
           },
@@ -74,6 +102,7 @@ export class DeploymentService extends BaseService {
         }
         return okAsync({ id: deployment.id, status: "INSTALLING" as const });
       });
+    };
 
     const progressToBuilding = (
       deployment: Pick<WorkerDeployment, "id"> & { buildServerMetadata?: BuildServerMetadata }
@@ -85,13 +114,26 @@ export class DeploymentService extends BaseService {
           cause: error,
         }));
 
+      const existingBuildServerMetadata = deployment.buildServerMetadata as
+        | BuildServerMetadata
+        | null
+        | undefined;
+
       return createRemoteBuildIfNeeded
         .andThen((externalBuildData) =>
           fromPromise(
             this._prisma.workerDeployment.updateMany({
               where: { id: deployment.id, status: "INSTALLING" }, // status could've changed in the meantime, we're not locking the row
               data: {
-                ...updates,
+                ...restUpdates,
+                ...(newBuildServerMetadata
+                  ? {
+                      buildServerMetadata: {
+                        ...(existingBuildServerMetadata ?? {}),
+                        ...newBuildServerMetadata,
+                      },
+                    }
+                  : {}),
                 externalBuildData,
                 status: "BUILDING",
                 installedAt: new Date(),
diff --git a/apps/webapp/app/v3/services/initializeDeployment.server.ts b/apps/webapp/app/v3/services/initializeDeployment.server.ts
index 96439d94d..939cfd7e6 100644
--- a/apps/webapp/app/v3/services/initializeDeployment.server.ts
+++ b/apps/webapp/app/v3/services/initializeDeployment.server.ts
@@ -200,6 +200,7 @@ export class InitializeDeploymentService extends BaseService {
                     artifactKey: payload.artifactKey,
                     skipPromotion: payload.skipPromotion,
                     configFilePath: payload.configFilePath,
+                    skipEnqueue: payload.skipEnqueue,
                   }
                 : {}),
             }
@@ -238,7 +239,8 @@ export class InitializeDeploymentService extends BaseService {
         new Date(Date.now() + timeoutMs)
       );
 
-      if (payload.isNativeBuild) {
+      // For github integration there is no artifactKey, hence we skip it here
+      if (payload.isNativeBuild && payload.artifactKey && !payload.skipEnqueue) {
         const result = await deploymentService
           .enqueueBuild(environment, deployment, payload.artifactKey, {
             skipPromotion: payload.skipPromotion,
diff --git a/packages/core/src/v3/schemas/api-type.test.ts b/packages/core/src/v3/schemas/api-type.test.ts
new file mode 100644
index 000000000..c936b3c76
--- /dev/null
+++ b/packages/core/src/v3/schemas/api-type.test.ts
@@ -0,0 +1,141 @@
+import { describe, it, expect } from "vitest";
+import { InitializeDeploymentRequestBody } from "./api.js";
+import type { InitializeDeploymentRequestBody as InitializeDeploymentRequestBodyType } from "./api.js";
+
+describe("InitializeDeploymentRequestBody", () => {
+  const base = { contentHash: "abc123" };
+
+  describe("non-native build variant (isNativeBuild omitted or false)", () => {
+    it("parses with only required fields", () => {
+      const result = InitializeDeploymentRequestBody.safeParse(base);
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data.isNativeBuild).toBe(false);
+      }
+    });
+
+    it("parses with isNativeBuild explicitly false", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({ ...base, isNativeBuild: false });
+      expect(result.success).toBe(true);
+    });
+
+    it("parses with optional base fields", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        userId: "user_1",
+        type: "MANAGED",
+        runtime: "node",
+        initialStatus: "PENDING",
+      });
+      expect(result.success).toBe(true);
+    });
+
+    it("strips native-only fields when isNativeBuild is false", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        isNativeBuild: false,
+        skipPromotion: true,
+      });
+      // Zod discriminatedUnion matches the non-native branch and strips unknown keys
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect("skipPromotion" in result.data).toBe(false);
+      }
+    });
+  });
+
+  describe("native build variant (isNativeBuild: true)", () => {
+    it("parses with isNativeBuild true", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        isNativeBuild: true,
+      });
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data.isNativeBuild).toBe(true);
+      }
+    });
+
+    it("parses with native-specific optional fields", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        isNativeBuild: true,
+        skipPromotion: true,
+        artifactKey: "artifact_abc",
+        configFilePath: "trigger.config.ts",
+        skipEnqueue: true,
+      });
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data.skipPromotion).toBe(true);
+        expect(result.data.artifactKey).toBe("artifact_abc");
+        expect(result.data.configFilePath).toBe("trigger.config.ts");
+        expect(result.data.skipEnqueue).toBe(true);
+      }
+    });
+
+    it("skipEnqueue defaults to false when omitted", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        isNativeBuild: true,
+      });
+      expect(result.success).toBe(true);
+      if (result.success) {
+        expect(result.data.skipEnqueue).toBe(false);
+      }
+    });
+  });
+
+  describe("rejects invalid inputs", () => {
+    it("rejects missing contentHash", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({});
+      expect(result.success).toBe(false);
+    });
+
+    it("rejects invalid type enum value", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        type: "INVALID",
+      });
+      expect(result.success).toBe(false);
+    });
+
+    it("rejects invalid initialStatus enum value", () => {
+      const result = InitializeDeploymentRequestBody.safeParse({
+        ...base,
+        initialStatus: "RUNNING",
+      });
+      expect(result.success).toBe(false);
+    });
+  });
+
+  describe("type-level checks", () => {
+    it("native variant exposes native-specific fields", () => {
+      const result = InitializeDeploymentRequestBody.parse({
+        ...base,
+        isNativeBuild: true,
+        skipPromotion: true,
+      });
+
+      if (result.isNativeBuild === true) {
+        const _skipPromotion: boolean | undefined = result.skipPromotion;
+        const _artifactKey: string | undefined = result.artifactKey;
+        const _configFilePath: string | undefined = result.configFilePath;
+        expect(_skipPromotion).toBe(true);
+        expect(_artifactKey).toBeUndefined();
+        expect(_configFilePath).toBeUndefined();
+      }
+    });
+
+    it("non-native variant narrows correctly", () => {
+      const result: InitializeDeploymentRequestBodyType =
+        InitializeDeploymentRequestBody.parse(base);
+
+      if (!result.isNativeBuild) {
+        // Should only have base fields — native-specific fields should not exist
+        const narrowed: { isNativeBuild?: false; contentHash: string } = result;
+        expect(narrowed.contentHash).toBe("abc123");
+      }
+    });
+  });
+});
diff --git a/packages/core/src/v3/schemas/api.ts b/packages/core/src/v3/schemas/api.ts
index 4cb5c9650..76f93af3f 100644
--- a/packages/core/src/v3/schemas/api.ts
+++ b/packages/core/src/v3/schemas/api.ts
@@ -485,10 +485,22 @@ export const FinalizeDeploymentRequestBody = z.object({
 
 export type FinalizeDeploymentRequestBody = z.infer<typeof FinalizeDeploymentRequestBody>;
 
+export const BuildServerMetadata = z.object({
+  buildId: z.string().optional(),
+  isNativeBuild: z.boolean().optional(),
+  artifactKey: z.string().optional(),
+  skipPromotion: z.boolean().optional(),
+  configFilePath: z.string().optional(),
+  skipEnqueue: z.boolean().optional(),
+});
+
+export type BuildServerMetadata = z.infer<typeof BuildServerMetadata>;
+
 export const ProgressDeploymentRequestBody = z.object({
   contentHash: z.string().optional(),
   gitMeta: GitMeta.optional(),
   runtime: z.string().optional(),
+  buildServerMetadata: BuildServerMetadata.optional(),
 });
 
 export type ProgressDeploymentRequestBody = z.infer<typeof ProgressDeploymentRequestBody>;
@@ -528,16 +540,6 @@ export const DeploymentTriggeredVia = z
 
 export type DeploymentTriggeredVia = z.infer<typeof DeploymentTriggeredVia>;
 
-export const BuildServerMetadata = z.object({
-  buildId: z.string().optional(),
-  isNativeBuild: z.boolean().optional(),
-  artifactKey: z.string().optional(),
-  skipPromotion: z.boolean().optional(),
-  configFilePath: z.string().optional(),
-});
-
-export type BuildServerMetadata = z.infer<typeof BuildServerMetadata>;
-
 export const UpsertBranchRequestBody = z.object({
   git: GitMeta.optional(),
   env: z.enum(["preview"]),
@@ -590,41 +592,53 @@ export const InitializeDeploymentResponseBody = z.object({
 
 export type InitializeDeploymentResponseBody = z.infer<typeof InitializeDeploymentResponseBody>;
 
-export const InitializeDeploymentRequestBody = z
-  .object({
-    contentHash: z.string(),
-    userId: z.string().optional(),
-    /** @deprecated This is now determined by the webapp. This is only used to warn users with old CLI versions. */
-    selfHosted: z.boolean().optional(),
-    gitMeta: GitMeta.optional(),
-    type: z.enum(["MANAGED", "UNMANAGED", "V1"]).optional(),
-    runtime: z.string().optional(),
-    initialStatus: z.enum(["PENDING", "BUILDING"]).optional(),
-    triggeredVia: DeploymentTriggeredVia.optional(),
-    buildId: z.string().optional(),
-  })
-  .and(
-    z.preprocess(
-      (val) => {
-        const obj = val as any;
-        if (!obj || !obj.isNativeBuild) {
-          return { ...obj, isNativeBuild: false };
-        }
-        return obj;
-      },
-      z.discriminatedUnion("isNativeBuild", [
-        z.object({
-          isNativeBuild: z.literal(true),
-          skipPromotion: z.boolean(),
-          artifactKey: z.string(),
-          configFilePath: z.string().optional(),
-        }),
-        z.object({
-          isNativeBuild: z.literal(false),
-        }),
-      ])
-    )
-  );
+const InitializeDeploymentRequestBodyBase = z.object({
+  contentHash: z.string(),
+  userId: z.string().optional(),
+  /** @deprecated This is now determined by the webapp. This is only used to warn users with old CLI versions. */
+  selfHosted: z.boolean().optional(),
+  gitMeta: GitMeta.optional(),
+  type: z.enum(["MANAGED", "UNMANAGED", "V1"]).optional(),
+  runtime: z.string().optional(),
+  initialStatus: z.enum(["PENDING", "BUILDING"]).optional(),
+  triggeredVia: DeploymentTriggeredVia.optional(),
+  buildId: z.string().optional()
+});
+type BaseOutput = z.output<typeof InitializeDeploymentRequestBodyBase>;
+
+type NativeBuildOutput = BaseOutput & {
+  isNativeBuild: true;
+  skipPromotion?: boolean;
+  artifactKey?: string;
+  configFilePath?: string;
+  skipEnqueue?: boolean;
+};
+
+type NonNativeBuildOutput = BaseOutput & {
+  isNativeBuild: false;
+  skipPromotion?: never;
+  artifactKey?: never;
+  configFilePath?: never;
+  skipEnqueue?: never;
+};
+
+const InitializeDeploymentRequestBodyFull = InitializeDeploymentRequestBodyBase.extend({
+  isNativeBuild: z.boolean().default(false),
+  skipPromotion: z.boolean().optional(),
+  artifactKey: z.string().optional(),
+  configFilePath: z.string().optional(),
+  skipEnqueue: z.boolean().optional().default(false),
+});
+
+export const InitializeDeploymentRequestBody = InitializeDeploymentRequestBodyFull.transform(
+  (data): NativeBuildOutput | NonNativeBuildOutput => {
+    if (data.isNativeBuild) {
+      return { ...data, isNativeBuild: true as const };
+    }
+    const { skipPromotion, artifactKey, configFilePath, skipEnqueue, ...rest } = data;
+    return { ...rest, isNativeBuild: false as const };
+  }
+);
 
 export type InitializeDeploymentRequestBody = z.infer<typeof InitializeDeploymentRequestBody>;
 

From a8f9a902804cbeae4b709fa1c7acf8216e38fb5e Mon Sep 17 00:00:00 2001
From: Mihai Popescu <mihai.popescu.dev@gmail.com>
Date: Fri, 13 Feb 2026 16:28:14 +0200
Subject: [PATCH 07/25] improv(webapp): Add new table for optimized logs search
 (#3036)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## ✅ Checklist

- [X] I have followed every step in the [contributing
guide](https://github.com/triggerdotdev/trigger.dev/blob/main/CONTRIBUTING.md)
- [X] The PR title follows the convention.
- [X] I ran and tested the code works

---

## Testing

Tested the migration on test env and locally.
Tested query and merge performance.
Generated tasks and observed the ingested data and searches.

---

## Changelog

* New ClickHouse table & MV (task_events_search_v1): A search-optimized
materialized view that filters out debug events, partial spans, and
empty span events at ingestion time.
* ClickHouse client updates: New getLogsSearchListQueryBuilder and
taskEventsSearch accessor on the ClickHouse class.
* LogsListPresenter: Switches to the new search table, uses
triggered_timestamp for cursor pagination instead of unixTimestamp.
  *  Spans route: Also switches to the new search query builder.
* Seed spanSpammer task: Adds a 10s trace with events and metadata
operations for testing.
---
 .../app/components/logs/LogDetailView.tsx     |   2 +-
 apps/webapp/app/components/logs/LogsTable.tsx |   2 +-
 .../v3/LogDetailPresenter.server.ts           |   5 +
 .../presenters/v3/LogsListPresenter.server.ts |  89 ++++------------
 .../route.tsx                                 |  42 +-------
 ...tParam.env.$envParam.logs.$logId.spans.tsx | 100 ------------------
 ...ojects.$projectParam.env.$envParam.logs.ts |   3 -
 .../schema/016_add_task_events_search_v1.sql  |  63 +++++++++++
 internal-packages/clickhouse/src/index.ts     |   9 +-
 .../clickhouse/src/taskEvents.ts              |  22 ++--
 references/seed/src/trigger/spanSpammer.ts    |  26 ++++-
 11 files changed, 139 insertions(+), 224 deletions(-)
 delete mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.spans.tsx
 create mode 100644 internal-packages/clickhouse/schema/016_add_task_events_search_v1.sql

diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
index 6b3a76b8a..a5cbb15ae 100644
--- a/apps/webapp/app/components/logs/LogDetailView.tsx
+++ b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -234,7 +234,7 @@ function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: stri
       <div className="mb-6">
         <Header3 className="mb-2">Timestamp</Header3>
         <div className="text-sm text-text-dimmed">
-          <DateTimeAccurate date={log.startTime} />
+          <DateTimeAccurate date={log.triggeredTimestamp} />
         </div>
       </div>
 
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index a361d95c5..2f6894a03 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -162,7 +162,7 @@ export function LogsTable({
                       boxShadow: getLevelBoxShadow(log.level),
                     }}
                   >
-                    <DateTimeAccurate date={log.startTime} />
+                    <DateTimeAccurate date={log.triggeredTimestamp} />
                   </TableCell>
                   <TableCell className="min-w-24">
                     <TruncatedCopyableValue value={log.runId} />
diff --git a/apps/webapp/app/presenters/v3/LogDetailPresenter.server.ts b/apps/webapp/app/presenters/v3/LogDetailPresenter.server.ts
index e23e2f552..d354018b8 100644
--- a/apps/webapp/app/presenters/v3/LogDetailPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/LogDetailPresenter.server.ts
@@ -81,12 +81,17 @@ export class LogDetailPresenter {
       // Ignore parse errors
     }
 
+    const durationMs = (typeof log.duration === "number" ? log.duration : Number(log.duration)) / 1_000_000;
+
     return {
       // Use :: separator to match LogsListPresenter format
       id: `${log.trace_id}::${log.span_id}::${log.run_id}::${log.start_time}`,
       runId: log.run_id,
       taskIdentifier: log.task_identifier,
       startTime: convertClickhouseDateTime64ToJsDate(log.start_time).toISOString(),
+      triggeredTimestamp: new Date(
+        convertClickhouseDateTime64ToJsDate(log.start_time).getTime() + durationMs
+      ).toISOString(),
       traceId: log.trace_id,
       spanId: log.span_id,
       parentSpanId: log.parent_span_id || null,
diff --git a/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts b/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
index b1c03f8b7..545bca5cc 100644
--- a/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
@@ -50,7 +50,6 @@ export type LogsListOptions = {
   retentionLimitDays?: number;
   // search
   search?: string;
-  includeDebugLogs?: boolean;
   // pagination
   direction?: Direction;
   cursor?: string;
@@ -69,7 +68,6 @@ export const LogsListOptionsSchema = z.object({
   defaultPeriod: z.string().optional(),
   retentionLimitDays: z.number().int().positive().optional(),
   search: z.string().max(1000).optional(),
-  includeDebugLogs: z.boolean().optional(),
   direction: z.enum(["forward", "backward"]).optional(),
   cursor: z.string().optional(),
   pageSize: z.number().int().positive().max(1000).optional(),
@@ -83,14 +81,16 @@ export type LogsListAppliedFilters = LogsList["filters"];
 
 // Cursor is a base64 encoded JSON of the pagination keys
 type LogCursor = {
+  organizationId: string;
   environmentId: string;
-  unixTimestamp: number;
+  triggeredTimestamp: string; // DateTime64(9) string
   traceId: string;
 };
 
 const LogCursorSchema = z.object({
+  organizationId: z.string(),
   environmentId: z.string(),
-  unixTimestamp: z.number(),
+  triggeredTimestamp: z.string(),
   traceId: z.string(),
 });
 
@@ -116,33 +116,16 @@ function decodeCursor(cursor: string): LogCursor | null {
 function levelToKindsAndStatuses(level: LogLevel): { kinds?: string[]; statuses?: string[] } {
   switch (level) {
     case "DEBUG":
-      return { kinds: ["DEBUG_EVENT", "LOG_DEBUG"] };
+      return { kinds: ["LOG_DEBUG"] };
     case "INFO":
-      return { kinds: ["LOG_INFO", "LOG_LOG"] };
+      return { kinds: ["LOG_INFO", "LOG_LOG", "SPAN"] };
     case "WARN":
       return { kinds: ["LOG_WARN"] };
     case "ERROR":
-      return { kinds: ["LOG_ERROR"], statuses: ["ERROR"] };
+      return { kinds: ["LOG_ERROR", "SPAN_EVENT"], statuses: ["ERROR"] };
   }
 }
 
-function convertDateToNanoseconds(date: Date): bigint {
-  return BigInt(date.getTime()) * 1_000_000n;
-}
-
-function formatNanosecondsForClickhouse(ns: bigint): string {
-  const nsString = ns.toString();
-  // Handle negative numbers (dates before 1970-01-01)
-  if (nsString.startsWith("-")) {
-    const absString = nsString.slice(1);
-    const padded = absString.padStart(19, "0");
-    return "-" + padded.slice(0, 10) + "." + padded.slice(10);
-  }
-  // Pad positive numbers to 19 digits to ensure correct slicing
-  const padded = nsString.padStart(19, "0");
-  return padded.slice(0, 10) + "." + padded.slice(10);
-}
-
 export class LogsListPresenter extends BasePresenter {
   constructor(
     private readonly replica: PrismaClientOrTransaction,
@@ -166,7 +149,6 @@ export class LogsListPresenter extends BasePresenter {
       to,
       cursor,
       pageSize = DEFAULT_PAGE_SIZE,
-      includeDebugLogs = true,
       defaultPeriod,
       retentionLimitDays,
     }: LogsListOptions
@@ -252,7 +234,7 @@ export class LogsListPresenter extends BasePresenter {
       );
     }
 
-    const queryBuilder = this.clickhouse.taskEventsV2.logsListQueryBuilder();
+    const queryBuilder = this.clickhouse.taskEventsSearch.logsListQueryBuilder();
 
     queryBuilder.where("environment_id = {environmentId: String}", {
       environmentId,
@@ -265,27 +247,16 @@ export class LogsListPresenter extends BasePresenter {
 
 
     if (effectiveFrom) {
-      const fromNs = convertDateToNanoseconds(effectiveFrom);
-
-        queryBuilder.where("inserted_at >= {insertedAtStart: DateTime64(3)}", {
-          insertedAtStart: convertDateToClickhouseDateTime(effectiveFrom),
+        queryBuilder.where("triggered_timestamp >= {triggeredAtStart: DateTime64(3)}", {
+          triggeredAtStart: convertDateToClickhouseDateTime(effectiveFrom),
         });
-
-      queryBuilder.where("start_time >= {fromTime: String}", {
-        fromTime: formatNanosecondsForClickhouse(fromNs),
-      });
     }
 
     if (effectiveTo) {
       const clampedTo = effectiveTo > new Date() ? new Date() : effectiveTo;
-      const toNs = convertDateToNanoseconds(clampedTo);
 
-      queryBuilder.where("inserted_at <= {insertedAtEnd: DateTime64(3)}", {
-        insertedAtEnd: convertDateToClickhouseDateTime(clampedTo),
-      });
-
-      queryBuilder.where("start_time <= {toTime: String}", {
-        toTime: formatNanosecondsForClickhouse(toNs),
+      queryBuilder.where("triggered_timestamp <= {triggeredAtEnd: DateTime64(3)}", {
+        triggeredAtEnd: convertDateToClickhouseDateTime(clampedTo),
       });
     }
 
@@ -349,39 +320,20 @@ export class LogsListPresenter extends BasePresenter {
       }
     }
 
-    // Debug logs are available only to admins
-    if (includeDebugLogs === false) {
-      queryBuilder.where("kind NOT IN {debugKinds: Array(String)}", {
-        debugKinds: ["DEBUG_EVENT"],
-      });
-
-      queryBuilder.where("NOT ((kind = 'LOG_INFO') AND (attributes_text = '{}'))");
-    }
-
-    queryBuilder.where("kind NOT IN {debugSpans: Array(String)}", {
-      debugSpans: ["SPAN", "ANCESTOR_OVERRIDE", "SPAN_EVENT"],
-    });
-
-    // kindCondition += ` `;
-    // params["excluded_statuses"] = ["SPAN", "ANCESTOR_OVERRIDE", "SPAN_EVENT"];
-
-
-    queryBuilder.where("NOT (kind = 'SPAN' AND status = 'PARTIAL')");
-
-    // Cursor pagination
+    // Cursor pagination using explicit lexicographic comparison
+    // Must mirror the ORDER BY columns: (organization_id, environment_id, triggered_timestamp, trace_id)
     const decodedCursor = cursor ? decodeCursor(cursor) : null;
     if (decodedCursor) {
       queryBuilder.where(
-        "(environment_id, toUnixTimestamp(start_time), trace_id) < ({cursorEnvId: String}, {cursorUnixTimestamp: Int64}, {cursorTraceId: String})",
+        `(triggered_timestamp < {cursorTriggeredTimestamp: String} OR (triggered_timestamp = {cursorTriggeredTimestamp: String} AND trace_id < {cursorTraceId: String}))`,
         {
-          cursorEnvId: decodedCursor.environmentId,
-          cursorUnixTimestamp: decodedCursor.unixTimestamp,
+          cursorTriggeredTimestamp: decodedCursor.triggeredTimestamp,
           cursorTraceId: decodedCursor.traceId,
         }
       );
     }
 
-    queryBuilder.orderBy("environment_id DESC, toUnixTimestamp(start_time) DESC, trace_id DESC");
+    queryBuilder.orderBy("triggered_timestamp DESC, trace_id DESC");
     // Limit + 1 to check if there are more results
     queryBuilder.limit(pageSize + 1);
 
@@ -399,10 +351,10 @@ export class LogsListPresenter extends BasePresenter {
     let nextCursor: string | undefined;
     if (hasMore && logs.length > 0) {
       const lastLog = logs[logs.length - 1];
-      const unixTimestamp = Math.floor(new Date(lastLog.start_time).getTime() / 1000);
       nextCursor = encodeCursor({
+        organizationId,
         environmentId,
-        unixTimestamp,
+        triggeredTimestamp: lastLog.triggered_timestamp,
         traceId: lastLog.trace_id,
       });
     }
@@ -430,6 +382,9 @@ export class LogsListPresenter extends BasePresenter {
         runId: log.run_id,
         taskIdentifier: log.task_identifier,
         startTime: convertClickhouseDateTime64ToJsDate(log.start_time).toISOString(),
+        triggeredTimestamp: convertClickhouseDateTime64ToJsDate(
+          log.triggered_timestamp
+        ).toISOString(),
         traceId: log.trace_id,
         spanId: log.span_id,
         parentSpanId: log.parent_span_id || null,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
index 84dbc2ded..9c2eccc8e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
@@ -36,7 +36,6 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
-import { Switch } from "~/components/primitives/Switch";
 import { Button } from "~/components/primitives/Buttons";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags.server";
 
@@ -95,7 +94,6 @@ async function hasLogsPageAccess(
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
   const userId = user.id;
-  const isAdmin = user.admin || user.isImpersonating;
 
   const { projectParam, organizationSlug, envParam } = EnvironmentParamSchema.parse(params);
 
@@ -126,7 +124,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const runId = url.searchParams.get("runId") ?? undefined;
   const search = url.searchParams.get("search") ?? undefined;
   const levels = parseLevelsFromUrl(url);
-  const showDebug = url.searchParams.get("showDebug") === "true";
   const period = url.searchParams.get("period") ?? undefined;
   const fromStr = url.searchParams.get("from");
   const toStr = url.searchParams.get("to");
@@ -150,7 +147,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       period,
       from,
       to,
-      includeDebugLogs: isAdmin && showDebug,
       defaultPeriod: "1h",
       retentionLimitDays
     })
@@ -163,15 +159,13 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   return typeddefer({
     data: listPromise,
-    isAdmin,
-    showDebug,
     defaultPeriod: "1h",
     retentionLimitDays,
   });
 };
 
 export default function Page() {
-  const { data, isAdmin, showDebug, defaultPeriod, retentionLimitDays } =
+  const { data, defaultPeriod, retentionLimitDays } =
     useTypedLoaderData<typeof loader>();
 
   return (
@@ -199,8 +193,6 @@ export default function Page() {
             errorElement={
               <div className="grid h-full max-h-full grid-rows-[2.5rem_auto_1fr] overflow-hidden">
                 <FiltersBar
-                  isAdmin={isAdmin}
-                  showDebug={showDebug}
                   defaultPeriod={defaultPeriod}
                   retentionLimitDays={retentionLimitDays}
                 />
@@ -218,8 +210,6 @@ export default function Page() {
                 return (
                   <div className="grid h-full max-h-full grid-rows-[2.5rem_auto_1fr] overflow-hidden">
                     <FiltersBar
-                      isAdmin={isAdmin}
-                      showDebug={showDebug}
                       defaultPeriod={defaultPeriod}
                       retentionLimitDays={retentionLimitDays}
                     />
@@ -235,15 +225,11 @@ export default function Page() {
                 <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden">
                   <FiltersBar
                     list={result}
-                    isAdmin={isAdmin}
-                    showDebug={showDebug}
                     defaultPeriod={defaultPeriod}
                     retentionLimitDays={retentionLimitDays}
                   />
                   <LogsList
                     list={result}
-                    isAdmin={isAdmin}
-                    showDebug={showDebug}
                     defaultPeriod={defaultPeriod}
                   />
                 </div>
@@ -258,14 +244,10 @@ export default function Page() {
 
 function FiltersBar({
   list,
-  isAdmin,
-  showDebug,
   defaultPeriod,
   retentionLimitDays,
 }: {
   list?: Exclude<Awaited<UseDataFunctionReturn<typeof loader>["data"]>, { error: string }>;
-  isAdmin: boolean;
-  showDebug: boolean;
   defaultPeriod?: string;
   retentionLimitDays: number;
 }) {
@@ -280,16 +262,6 @@ function FiltersBar({
     searchParams.has("from") ||
     searchParams.has("to");
 
-  const handleDebugToggle = useCallback((checked: boolean) => {
-    const url = new URL(window.location.href);
-    if (checked) {
-      url.searchParams.set("showDebug", "true");
-    } else {
-      url.searchParams.delete("showDebug");
-    }
-    window.location.href = url.toString();
-  }, []);
-
   return (
     <div className="flex items-start justify-between gap-x-2 border-b border-grid-bright p-2">
       <div className="flex flex-row flex-wrap items-center gap-1">
@@ -329,16 +301,6 @@ function FiltersBar({
           </>
         )}
       </div>
-      <div className="flex items-center gap-2">
-        {isAdmin && (
-          <Switch
-            variant="small"
-            label="Debug"
-            checked={showDebug}
-            onCheckedChange={handleDebugToggle}
-          />
-        )}
-      </div>
     </div>
   );
 }
@@ -347,8 +309,6 @@ function LogsList({
   list,
 }: {
   list: Exclude<Awaited<UseDataFunctionReturn<typeof loader>["data"]>, { error: string }>; //exclude error, it is handled
-  isAdmin: boolean;
-  showDebug: boolean;
   defaultPeriod?: string;
 }) {
   const navigation = useNavigation();
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.spans.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.spans.tsx
deleted file mode 100644
index 53bc655a0..000000000
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.spans.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { json } from "@remix-run/node";
-import { requireUserId } from "~/services/session.server";
-import { EnvironmentParamSchema } from "~/utils/pathBuilder";
-import { findProjectBySlug } from "~/models/project.server";
-import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
-import { clickhouseClient } from "~/services/clickhouseInstance.server";
-
-// Convert ClickHouse kind to display level
-function kindToLevel(
-  kind: string
-): "TRACE" | "DEBUG" | "INFO" | "WARN" | "ERROR" | "LOG" {
-  switch (kind) {
-    case "DEBUG_EVENT":
-    case "LOG_DEBUG":
-      return "DEBUG";
-    case "LOG_INFO":
-      return "INFO";
-    case "LOG_WARN":
-      return "WARN";
-    case "LOG_ERROR":
-      return "ERROR";
-    case "LOG_LOG":
-      return "LOG";
-    case "SPAN":
-    case "ANCESTOR_OVERRIDE":
-    case "SPAN_EVENT":
-    default:
-      return "TRACE";
-  }
-}
-
-// Fetch related spans for a log entry from the same trace
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { projectParam, organizationSlug, envParam, logId } = {
-    ...EnvironmentParamSchema.parse(params),
-    logId: params.logId,
-  };
-
-  if (!logId) {
-    throw new Response("Log ID is required", { status: 400 });
-  }
-
-  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
-  if (!project) {
-    throw new Response("Project not found", { status: 404 });
-  }
-
-  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
-  if (!environment) {
-    throw new Response("Environment not found", { status: 404 });
-  }
-
-  // Get trace ID and run ID from query params
-  const url = new URL(request.url);
-  const traceId = url.searchParams.get("traceId");
-  const runId = url.searchParams.get("runId");
-  const currentSpanId = url.searchParams.get("spanId");
-
-  if (!traceId || !runId) {
-    throw new Response("Trace ID and Run ID are required", { status: 400 });
-  }
-
-  // Query ClickHouse for related spans in the same trace
-  const queryBuilder = clickhouseClient.taskEventsV2.logsListQueryBuilder();
-
-  queryBuilder.where("environment_id = {environmentId: String}", {
-    environmentId: environment.id,
-  });
-  queryBuilder.where("trace_id = {traceId: String}", { traceId });
-  queryBuilder.where("run_id = {runId: String}", { runId });
-
-  // Order by start time to show spans in chronological order
-  queryBuilder.orderBy("start_time ASC");
-  queryBuilder.limit(50);
-
-  const [queryError, records] = await queryBuilder.execute();
-
-  if (queryError) {
-    throw queryError;
-  }
-
-  const results = records || [];
-
-  const spans = results.map((row) => ({
-    id: `${row.trace_id}::${row.span_id}::${row.run_id}::${row.start_time}`,
-    spanId: row.span_id,
-    parentSpanId: row.parent_span_id || null,
-    message: row.message.substring(0, 200), // Truncate for list view
-    kind: row.kind,
-    level: kindToLevel(row.kind),
-    status: row.status,
-    startTime: new Date(Number(row.start_time) / 1_000_000).toISOString(),
-    duration: Number(row.duration),
-    isCurrent: row.span_id === currentSpanId,
-  }));
-
-  return json({ spans });
-};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
index 656e20472..cac4c0f70 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
@@ -21,7 +21,6 @@ function parseLevelsFromUrl(url: URL): LogLevel[] | undefined {
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
   const userId = user.id;
-  const isAdmin = user?.admin || user?.isImpersonating;
 
   const { projectParam, organizationSlug, envParam } = EnvironmentParamSchema.parse(params);
 
@@ -46,7 +45,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const search = url.searchParams.get("search") ?? undefined;
   const cursor = url.searchParams.get("cursor") ?? undefined;
   const levels = parseLevelsFromUrl(url);
-  const showDebug = url.searchParams.get("showDebug") === "true";
   const period = url.searchParams.get("period") ?? undefined;
   const fromStr = url.searchParams.get("from");
   const toStr = url.searchParams.get("to");
@@ -67,7 +65,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     from,
     to,
     levels,
-    includeDebugLogs: isAdmin && showDebug,
     defaultPeriod: "1h",
     retentionLimitDays,
   }) as any; // Validated by LogsListOptionsSchema at runtime
diff --git a/internal-packages/clickhouse/schema/016_add_task_events_search_v1.sql b/internal-packages/clickhouse/schema/016_add_task_events_search_v1.sql
new file mode 100644
index 000000000..60ed1eb1f
--- /dev/null
+++ b/internal-packages/clickhouse/schema/016_add_task_events_search_v1.sql
@@ -0,0 +1,63 @@
+-- +goose Up
+CREATE TABLE IF NOT EXISTS trigger_dev.task_events_search_v1
+(
+  environment_id String,
+  organization_id String,
+  project_id String,
+  triggered_timestamp DateTime64(9) CODEC(Delta(8), ZSTD(1)),
+  trace_id String CODEC(ZSTD(1)),
+  span_id String CODEC(ZSTD(1)),
+  run_id String CODEC(ZSTD(1)),
+  task_identifier String CODEC(ZSTD(1)),
+  start_time DateTime64(9) CODEC(Delta(8), ZSTD(1)),
+  inserted_at DateTime64(3),
+  message String CODEC(ZSTD(1)),
+  kind LowCardinality(String) CODEC(ZSTD(1)),
+  status LowCardinality(String) CODEC(ZSTD(1)),
+  duration UInt64 CODEC(ZSTD(1)),
+  parent_span_id String CODEC(ZSTD(1)),
+  attributes_text String CODEC(ZSTD(1)),
+
+  INDEX idx_run_id run_id TYPE bloom_filter(0.001) GRANULARITY 1,
+  INDEX idx_message_text_search lower(message) TYPE ngrambf_v1(3, 32768, 2, 0) GRANULARITY 1,
+  INDEX idx_attributes_text_search lower(attributes_text) TYPE ngrambf_v1(3, 32768, 2, 0) GRANULARITY 1
+)
+ENGINE = MergeTree
+PARTITION BY toDate(triggered_timestamp)
+ORDER BY (organization_id, environment_id, triggered_timestamp, trace_id)
+--Right now we have maximum retention of up to 30 days based on plan.
+--We put a logical limit for now, the 90 DAY TTL is just a backup
+--This might need to be updated for longer retention periods
+TTL toDateTime(triggered_timestamp) + INTERVAL 90 DAY
+SETTINGS ttl_only_drop_parts = 1;
+
+CREATE MATERIALIZED VIEW IF NOT EXISTS trigger_dev.task_events_search_mv_v1
+TO trigger_dev.task_events_search_v1 AS
+SELECT
+  environment_id,
+  organization_id,
+  project_id,
+  trace_id,
+  span_id,
+  run_id,
+  task_identifier,
+  start_time,
+  inserted_at,
+  message,
+  kind,
+  status,
+  duration,
+  parent_span_id,
+  attributes_text,
+  fromUnixTimestamp64Nano(toUnixTimestamp64Nano(start_time) + toInt64(duration)) AS triggered_timestamp
+FROM trigger_dev.task_events_v2
+WHERE
+    kind != 'DEBUG_EVENT'
+    AND status != 'PARTIAL'
+    AND NOT (kind = 'SPAN_EVENT' AND attributes_text = '{}')
+    AND kind != 'ANCESTOR_OVERRIDE'
+    AND message != 'trigger.dev/start';
+
+-- +goose Down
+DROP VIEW IF EXISTS trigger_dev.task_events_search_mv_v1;
+DROP TABLE IF EXISTS trigger_dev.task_events_search_v1;
diff --git a/internal-packages/clickhouse/src/index.ts b/internal-packages/clickhouse/src/index.ts
index 50b39d35a..47c2f34f2 100644
--- a/internal-packages/clickhouse/src/index.ts
+++ b/internal-packages/clickhouse/src/index.ts
@@ -23,8 +23,8 @@ import {
   getTraceSummaryQueryBuilderV2,
   insertTaskEvents,
   insertTaskEventsV2,
-  getLogsListQueryBuilderV2,
   getLogDetailQueryBuilderV2,
+  getLogsSearchListQueryBuilder,
 } from "./taskEvents.js";
 import { Logger, type LogLevel } from "@trigger.dev/core/logger";
 import type { Agent as HttpAgent } from "http";
@@ -220,8 +220,13 @@ export class ClickHouse {
       traceSummaryQueryBuilder: getTraceSummaryQueryBuilderV2(this.reader),
       traceDetailedSummaryQueryBuilder: getTraceDetailedSummaryQueryBuilderV2(this.reader),
       spanDetailsQueryBuilder: getSpanDetailsQueryBuilderV2(this.reader),
-      logsListQueryBuilder: getLogsListQueryBuilderV2(this.reader, this.logsQuerySettings?.list),
       logDetailQueryBuilder: getLogDetailQueryBuilderV2(this.reader, this.logsQuerySettings?.detail),
     };
   }
+
+  get taskEventsSearch() {
+    return {
+      logsListQueryBuilder: getLogsSearchListQueryBuilder(this.reader, this.logsQuerySettings?.list),
+    };
+  }
 }
diff --git a/internal-packages/clickhouse/src/taskEvents.ts b/internal-packages/clickhouse/src/taskEvents.ts
index 890eab9cc..73e2d8344 100644
--- a/internal-packages/clickhouse/src/taskEvents.ts
+++ b/internal-packages/clickhouse/src/taskEvents.ts
@@ -231,11 +231,12 @@ export function getSpanDetailsQueryBuilderV2(
   });
 }
 
+
 // ============================================================================
-// Logs List Query Builders (for aggregated logs page)
+// Search Table Query Builders (for logs page, using task_events_search_v1)
 // ============================================================================
 
-export const LogsListResult = z.object({
+export const LogsSearchListResult = z.object({
   environment_id: z.string(),
   organization_id: z.string(),
   project_id: z.string(),
@@ -250,14 +251,18 @@ export const LogsListResult = z.object({
   status: z.string(),
   duration: z.number().or(z.string()),
   attributes_text: z.string(),
+  triggered_timestamp: z.string(),
 });
 
-export type LogsListResult = z.output<typeof LogsListResult>;
+export type LogsSearchListResult = z.output<typeof LogsSearchListResult>;
 
-export function getLogsListQueryBuilderV2(ch: ClickhouseReader, settings?: ClickHouseSettings) {
-  return ch.queryBuilderFast<LogsListResult>({
-    name: "getLogsList",
-    table: "trigger_dev.task_events_v2",
+export function getLogsSearchListQueryBuilder(
+  ch: ClickhouseReader,
+  settings?: ClickHouseSettings
+) {
+  return ch.queryBuilderFast<LogsSearchListResult>({
+    name: "getLogsSearchList",
+    table: "trigger_dev.task_events_search_v1",
     columns: [
       "environment_id",
       "organization_id",
@@ -272,7 +277,8 @@ export function getLogsListQueryBuilderV2(ch: ClickhouseReader, settings?: Click
       "kind",
       "status",
       "duration",
-      "attributes_text"
+      "attributes_text",
+      "triggered_timestamp",
     ],
     settings,
   });
diff --git a/references/seed/src/trigger/spanSpammer.ts b/references/seed/src/trigger/spanSpammer.ts
index b16f00c4c..dc79ce93b 100644
--- a/references/seed/src/trigger/spanSpammer.ts
+++ b/references/seed/src/trigger/spanSpammer.ts
@@ -1,4 +1,4 @@
-import { logger, task, wait } from "@trigger.dev/sdk/v3";
+import { logger, task, wait, metadata } from "@trigger.dev/sdk/v3";
 
 const CONFIG = {
   delayBetweenBatchesSeconds: 0.2,
@@ -14,6 +14,22 @@ export const SpanSpammerTask = task({
     const context = { payload, ctx };
     let logCount = 0;
 
+    // 30s trace with events every 5s
+    await logger.trace("10s-span", async () => {
+      const totalSeconds = 10;
+      const intervalSeconds = 2;
+      const totalEvents = totalSeconds / intervalSeconds;
+
+      logger.info("Starting 30s span", context);
+
+      for (let i = 1; i <= totalEvents; i++) {
+        await wait.for({ seconds: intervalSeconds });
+        logger.info(`Inner event ${i}/${totalEvents} at ${i * intervalSeconds}s`, context);
+      }
+
+      logger.info("Completed 30s span", context);
+    });
+
     logger.info("Starting span spammer task", context);
     logger.warn("This will generate a lot of logs", context);
 
@@ -36,6 +52,14 @@ export const SpanSpammerTask = task({
       emitBatch("This is a test log!!! Log number: ");
     }
 
+    metadata.parent.set("childStatus", "running");
+    metadata.parent.increment("completedChildren", 1);
+
+    // Update the root run's metadata (top-level run in the chain)
+    metadata.root.set("deepChildStatus", "done");
+    metadata.root.append("completedTasks", "child-task");
+
+
     logger.info("Completed span spammer task", context);
     return { message: `Created ${logCount} logs` };
   },

From 2462c80c8ad60fb0f73d020988b6f1bd743418cd Mon Sep 17 00:00:00 2001
From: Eric Allam <eric@trigger.dev>
Date: Fri, 13 Feb 2026 14:56:05 +0000
Subject: [PATCH 08/25] chore(vouch): vouch for capaj (#3048)

---
 .github/VOUCHED.td | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/VOUCHED.td b/.github/VOUCHED.td
index b1aee9f20..8e06c770a 100644
--- a/.github/VOUCHED.td
+++ b/.github/VOUCHED.td
@@ -12,4 +12,5 @@ nicktrn
 samejr
 isshaddad
 # Outside contributors
-gautamsi
\ No newline at end of file
+gautamsi
+capaj
\ No newline at end of file

From 9030e943622c6ab682653908ae162e559466bf3c Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 13 Feb 2026 15:57:11 +0000
Subject: [PATCH 09/25] Metrics improvements (#3046)

Summary
- Remove LIMIT from built-in dashboard queries
- Make concurrency configurable per project via environment variables
- Fix widget fallback period to Metrics default (1d) instead of 7d
- Handle concurrency at the project level
- Sort series for graphs so largest is displayed at the bottom (legend
shows largest at top)
- Use average aggregation for some built-in charts
- Improve aggregation handling for the legend
- Only render chart points when there is data; render dots on line
charts
- Truncate legend items and show tooltip on hover
- Better preserve chart configuration when the underlying query changes
---
 .../app/components/code/ChartConfigPanel.tsx  |   7 +-
 .../app/components/code/QueryResultsChart.tsx |  63 +++----
 .../primitives/charts/ChartLegendCompound.tsx | 157 ++++++++++++------
 .../primitives/charts/ChartLine.tsx           |   3 +-
 .../primitives/charts/ChartRoot.tsx           |  85 +++++++++-
 .../primitives/charts/aggregation.ts          |  23 +++
 .../app/components/query/QueryEditor.tsx      |  35 +++-
 apps/webapp/app/env.server.ts                 |   5 +-
 .../presenters/v3/BuiltInDashboards.server.ts |  32 ++--
 .../route.tsx                                 |   2 +-
 .../route.tsx                                 |   7 +-
 apps/webapp/app/routes/resources.metric.tsx   |   3 +-
 .../app/services/queryService.server.ts       |   6 +-
 13 files changed, 308 insertions(+), 120 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/aggregation.ts

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 93f27dff0..d4b64682e 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -147,8 +147,11 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
     if (needsUpdate) {
       onChangeRef.current({ ...currentConfig, ...updates });
     }
-    // Only re-run when the actual column structure changes, not on every config change
-  }, [columnsKey, columns, dateTimeColumns, categoricalColumns, numericColumns]);
+    // Only re-run when the actual column structure changes, not on every config change.
+    // columnsKey (a string) is stable when columns match, so this won't re-fire
+    // unnecessarily when the same query is re-run with identical columns.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columnsKey]);
 
   const updateConfig = useCallback(
     (updates: Partial<ChartConfiguration>) => {
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 17fba0383..4f7899a74 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -3,7 +3,8 @@ import { memo, useMemo } from "react";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { Paragraph } from "../primitives/Paragraph";
-import { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
+import type { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
+import { aggregateValues } from "../primitives/charts/aggregation";
 import { getRunStatusHexColor } from "~/components/runs/v3/TaskRunStatus";
 import { getSeriesColor } from "./chartColors";
 
@@ -243,17 +244,18 @@ function fillTimeGaps(
       }
       filledData.push(point);
     } else {
-      // Create a zero-filled data point
-      const zeroPoint: Record<string, unknown> = {
+      // Create a null-filled data point so gaps appear in line/bar charts
+      // and legend aggregations (avg/min/max) skip these slots
+      const gapPoint: Record<string, unknown> = {
         [xDataKey]: t,
         __rawDate: new Date(t),
         __granularity: granularity,
         __originalX: new Date(t).toISOString(),
       };
       for (const s of series) {
-        zeroPoint[s] = 0;
+        gapPoint[s] = null;
       }
-      filledData.push(zeroPoint);
+      filledData.push(gapPoint);
     }
   }
 
@@ -671,25 +673,6 @@ function toNumber(value: unknown): number {
   return 0;
 }
 
-/**
- * Aggregate an array of numbers using the specified aggregation function
- */
-function aggregateValues(values: number[], aggregation: AggregationType): number {
-  if (values.length === 0) return 0;
-  switch (aggregation) {
-    case "sum":
-      return values.reduce((a, b) => a + b, 0);
-    case "avg":
-      return values.reduce((a, b) => a + b, 0) / values.length;
-    case "count":
-      return values.length;
-    case "min":
-      return Math.min(...values);
-    case "max":
-      return Math.max(...values);
-  }
-}
-
 /**
  * Sort data array by a specified column
  */
@@ -775,6 +758,24 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     return sortData(unsortedData, sortByColumn, sortDirection, xDataKey);
   }, [unsortedData, sortByColumn, sortDirection, isDateBased, xDataKey]);
 
+  // Sort series by descending total sum so largest appears at bottom of
+  // stacked charts and first in the legend
+  const sortedSeries = useMemo(() => {
+    if (series.length <= 1) return series;
+    const totals = new Map<string, number>();
+    for (const s of series) {
+      let total = 0;
+      for (const point of data) {
+        const val = point[s];
+        if (typeof val === "number" && isFinite(val)) {
+          total += Math.abs(val);
+        }
+      }
+      totals.set(s, total);
+    }
+    return [...series].sort((a, b) => (totals.get(b) ?? 0) - (totals.get(a) ?? 0));
+  }, [series, data]);
+
   // Detect time granularity — use the full time range when available so tick
   // labels are appropriate for the period (e.g. "Jan 5" for a 7-day range
   // instead of just "16:00:00" when data is sparse)
@@ -809,7 +810,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   // Build chart config for colors/labels
   const chartConfig = useMemo(() => {
     const cfg: ChartConfig = {};
-    series.forEach((s, i) => {
+    sortedSeries.forEach((s, i) => {
       const statusColor = groupByIsRunStatus ? getRunStatusHexColor(s) : undefined;
       cfg[s] = {
         label: s,
@@ -817,7 +818,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       };
     });
     return cfg;
-  }, [series, groupByIsRunStatus, config.seriesColors]);
+  }, [sortedSeries, groupByIsRunStatus, config.seriesColors]);
 
   // Custom tooltip label formatter for better date display
   const tooltipLabelFormatter = useMemo(() => {
@@ -1002,7 +1003,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     domain: yAxisDomain,
   };
 
-  const showLegend = series.length > 0;
+  const showLegend = sortedSeries.length > 0;
 
   if (chartType === "bar") {
     return (
@@ -1010,10 +1011,11 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         config={chartConfig}
         data={data}
         dataKey={xDataKey}
-        series={series}
+        series={sortedSeries}
         labelFormatter={legendLabelFormatter}
         showLegend={showLegend}
         maxLegendItems={fullLegend ? Infinity : 5}
+        legendAggregation={config.aggregation}
         minHeight="300px"
         fillContainer
         onViewAllLegendItems={onViewAllLegendItems}
@@ -1036,10 +1038,11 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       config={chartConfig}
       data={data}
       dataKey={xDataKey}
-      series={series}
+      series={sortedSeries}
       labelFormatter={legendLabelFormatter}
       showLegend={showLegend}
       maxLegendItems={fullLegend ? Infinity : 5}
+      legendAggregation={config.aggregation}
       minHeight="300px"
       fillContainer
       onViewAllLegendItems={onViewAllLegendItems}
@@ -1049,7 +1052,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       <Chart.Line
         xAxisProps={xAxisPropsForLine}
         yAxisProps={yAxisProps}
-        stacked={stacked && series.length > 1}
+        stacked={stacked && sortedSeries.length > 1}
         tooltipLabelFormatter={tooltipLabelFormatter}
         lineType="linear"
       />
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 8d525aa1a..54d725a28 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -1,8 +1,19 @@
 import React, { useMemo } from "react";
+import type { AggregationType } from "~/components/metrics/QueryWidget";
 import { useChartContext } from "./ChartContext";
 import { useSeriesTotal } from "./ChartRoot";
+import { aggregateValues } from "./aggregation";
 import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
+import { SimpleTooltip } from "../Tooltip";
+
+const aggregationLabels: Record<AggregationType, string> = {
+  sum: "Sum",
+  avg: "Average",
+  count: "Count",
+  min: "Min",
+  max: "Max",
+};
 
 export type ChartLegendCompoundProps = {
   /** Maximum number of legend items to show before collapsing */
@@ -11,8 +22,10 @@ export type ChartLegendCompoundProps = {
   hidden?: boolean;
   /** Additional className */
   className?: string;
-  /** Label for the total row */
+  /** Label for the total row (derived from aggregation when not provided) */
   totalLabel?: string;
+  /** Aggregation method – controls the header label and how totals are computed */
+  aggregation?: AggregationType;
   /** Callback when "View all" button is clicked */
   onViewAllLegendItems?: () => void;
   /** When true, constrains legend to max 50% height with scrolling */
@@ -35,57 +48,81 @@ export function ChartLegendCompound({
   maxItems = Infinity,
   hidden = false,
   className,
-  totalLabel = "Total",
+  totalLabel,
+  aggregation,
   onViewAllLegendItems,
   scrollable = false,
 }: ChartLegendCompoundProps) {
   const { config, dataKey, dataKeys, highlight, labelFormatter } = useChartContext();
-  const totals = useSeriesTotal();
+  const totals = useSeriesTotal(aggregation);
 
-  // Calculate grand total (sum of all series totals)
+  // Derive the effective label from the aggregation type when no explicit label is provided
+  const effectiveTotalLabel = totalLabel ?? (aggregation ? aggregationLabels[aggregation] : "Total");
+
+  // Calculate grand total by aggregating across all per-series values
   const grandTotal = useMemo(() => {
-    return dataKeys.reduce((sum, key) => sum + (totals[key] || 0), 0);
-  }, [totals, dataKeys]);
+    const values = dataKeys.map((key) => totals[key] || 0);
+    if (!aggregation) {
+      // Default: sum
+      return values.reduce((a, b) => a + b, 0);
+    }
+    return aggregateValues(values, aggregation);
+  }, [totals, dataKeys, aggregation]);
 
-  // Calculate current total based on hover state
-  const currentTotal = useMemo(() => {
+  // Calculate current total based on hover state (null when hovering a gap-filled point)
+  const currentTotal = useMemo((): number | null => {
     if (!highlight.activePayload?.length) return grandTotal;
 
-    // Sum all values from the hovered data point
-    return highlight.activePayload.reduce((sum, item) => {
-      if (item.value !== undefined && dataKeys.includes(item.dataKey as string)) {
-        return sum + (Number(item.value) || 0);
-      }
-      return sum;
-    }, 0);
-  }, [highlight.activePayload, grandTotal, dataKeys]);
+    // Collect all series values from the hovered data point, preserving nulls
+    const rawValues = highlight.activePayload
+      .filter((item) => item.value !== undefined && dataKeys.includes(item.dataKey as string))
+      .map((item) => item.value);
 
-  // Get the label for the total row - x-axis value when hovering, totalLabel otherwise
+    // Filter to non-null values only
+    const values = rawValues
+      .filter((v): v is number => v != null)
+      .map((v) => Number(v) || 0);
+
+    // All null → gap-filled point, return null to show dash
+    if (values.length === 0) return null;
+
+    if (!aggregation) {
+      // Default: sum
+      return values.reduce((a, b) => a + b, 0);
+    }
+    return aggregateValues(values, aggregation);
+  }, [highlight.activePayload, grandTotal, dataKeys, aggregation]);
+
+  // Get the label for the total row - x-axis value when hovering, effectiveTotalLabel otherwise
   const currentTotalLabel = useMemo(() => {
-    if (!highlight.activePayload?.length) return totalLabel;
+    if (!highlight.activePayload?.length) return effectiveTotalLabel;
 
     // Get the x-axis label from the payload's original data
     const firstPayloadItem = highlight.activePayload[0];
     const xAxisValue = firstPayloadItem?.payload?.[dataKey];
 
-    if (xAxisValue === undefined) return totalLabel;
+    if (xAxisValue === undefined) return effectiveTotalLabel;
 
     // Apply the formatter if provided, otherwise just stringify the value
     const stringValue = String(xAxisValue);
     return labelFormatter ? labelFormatter(stringValue) : stringValue;
-  }, [highlight.activePayload, dataKey, totalLabel, labelFormatter]);
+  }, [highlight.activePayload, dataKey, effectiveTotalLabel, labelFormatter]);
 
-  // Get current data for the legend based on hover state
-  const currentData = useMemo(() => {
+  // Get current data for the legend based on hover state (values may be null for gap-filled points)
+  const currentData = useMemo((): Record<string, number | null> => {
     if (!highlight.activePayload?.length) return totals;
 
-    // If we have activePayload data from hovering over a bar
-    const hoverData = highlight.activePayload.reduce((acc, item) => {
-      if (item.dataKey && item.value !== undefined) {
-        acc[item.dataKey] = Number(item.value) || 0;
-      }
-      return acc;
-    }, {} as Record<string, number>);
+    // If we have activePayload data from hovering over a bar/line
+    const hoverData = highlight.activePayload.reduce(
+      (acc, item) => {
+        if (item.dataKey && item.value !== undefined) {
+          // Preserve null for gap-filled points instead of coercing to 0
+          acc[item.dataKey] = item.value != null ? Number(item.value) || 0 : null;
+        }
+        return acc;
+      },
+      {} as Record<string, number | null>
+    );
 
     // Return a merged object - totals for keys not in the hover data
     return {
@@ -141,7 +178,11 @@ export function ChartLegendCompound({
       >
         <span className="font-medium">{currentTotalLabel}</span>
         <span className="font-medium tabular-nums">
-          <AnimatedNumber value={currentTotal} duration={0.25} />
+          {currentTotal != null ? (
+            <AnimatedNumber value={currentTotal} duration={0.25} />
+          ) : (
+            "\u2013"
+          )}
         </span>
       </div>
 
@@ -157,15 +198,15 @@ export function ChartLegendCompound({
         )}
       >
         {legendItems.visible.map((item) => {
-          const total = currentData[item.dataKey] ?? 0;
+          const total = currentData[item.dataKey] ?? null;
           const isActive = highlight.activeBarKey === item.dataKey;
 
           return (
             <div
               key={item.dataKey}
               className={cn(
-                "relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition",
-                total === 0 && "opacity-50"
+                "relative flex w-full cursor-default items-center justify-between gap-2 rounded px-2 py-1 transition",
+                (total == null || total === 0) && "opacity-50"
               )}
               onMouseEnter={() => highlight.setHoveredLegendItem(item.dataKey)}
               onMouseLeave={() => highlight.reset()}
@@ -177,25 +218,43 @@ export function ChartLegendCompound({
                   style={{ backgroundColor: item.color }}
                 />
               )}
-              <div className="relative flex w-full items-center justify-between gap-3">
-                <div className="flex items-center gap-1.5">
-                  {item.color && (
-                    <div
-                      className="w-1 shrink-0 self-stretch rounded-[2px]"
-                      style={{ backgroundColor: item.color }}
-                    />
-                  )}
-                  <span className={isActive ? "text-text-bright" : "text-text-dimmed"}>
-                    {item.label}
-                  </span>
-                </div>
+              <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+                <SimpleTooltip
+                  button={
+                    <div className="flex min-w-0 items-center gap-1.5">
+                      {item.color && (
+                        <div
+                          className="w-1 shrink-0 self-stretch rounded-[2px]"
+                          style={{ backgroundColor: item.color }}
+                        />
+                      )}
+                      <span
+                        className={cn(
+                          "truncate",
+                          isActive ? "text-text-bright" : "text-text-dimmed"
+                        )}
+                      >
+                        {item.label}
+                      </span>
+                    </div>
+                  }
+                  content={item.label}
+                  side="top"
+                  disableHoverableContent
+                  className="max-w-xs break-words"
+                  buttonClassName="cursor-default min-w-0"
+                />
                 <span
                   className={cn(
                     "self-start tabular-nums",
                     isActive ? "text-text-bright" : "text-text-dimmed"
                   )}
                 >
-                  <AnimatedNumber value={total} duration={0.25} />
+                  {total != null ? (
+                    <AnimatedNumber value={total} duration={0.25} />
+                  ) : (
+                    "\u2013"
+                  )}
                 </span>
               </div>
             </div>
@@ -207,7 +266,7 @@ export function ChartLegendCompound({
           (legendItems.hoveredHiddenItem ? (
             <HoveredHiddenItemRow
               item={legendItems.hoveredHiddenItem}
-              value={currentData[legendItems.hoveredHiddenItem.dataKey] ?? 0}
+              value={currentData[legendItems.hoveredHiddenItem.dataKey] ?? null}
               remainingCount={legendItems.remaining - 1}
             />
           ) : (
@@ -253,7 +312,7 @@ function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
 
 type HoveredHiddenItemRowProps = {
   item: { dataKey: string; color?: string; label: React.ReactNode };
-  value: number;
+  value: number | null;
   remainingCount: number;
 };
 
@@ -279,7 +338,7 @@ function HoveredHiddenItemRow({ item, value, remainingCount }: HoveredHiddenItem
           {remainingCount > 0 && <span className="text-text-dimmed">+{remainingCount} more</span>}
         </div>
         <span className="tabular-nums text-text-bright">
-          <AnimatedNumber value={value} duration={0.25} />
+          {value != null ? <AnimatedNumber value={value} duration={0.25} /> : "\u2013"}
         </span>
       </div>
     </div>
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 50803fd5c..7bfd9090c 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -186,6 +186,7 @@ export function ChartLineRenderer({
       width={width}
       height={height}
       margin={{
+        top: 5,
         left: 12,
         right: 12,
       }}
@@ -217,7 +218,7 @@ export function ChartLineRenderer({
           type={lineType}
           stroke={config[key]?.color}
           strokeWidth={1}
-          dot={false}
+          dot={{ r: 1.5, fill: config[key]?.color, strokeWidth: 0 }}
           activeDot={{ r: 4 }}
           isAnimationActive={false}
         />
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index d1496a2ff..9b5eb3ccb 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import type * as RechartsPrimitive from "recharts";
+import type { AggregationType } from "~/components/metrics/QueryWidget";
 import { ChartContainer, type ChartConfig, type ChartState } from "./Chart";
 import { ChartProvider, useChartContext, type LabelFormatter } from "./ChartContext";
 import { ChartLegendCompound } from "./ChartLegendCompound";
@@ -29,6 +30,8 @@ export type ChartRootProps = {
   maxLegendItems?: number;
   /** Label for the total row in the legend */
   legendTotalLabel?: string;
+  /** Aggregation method used by the legend to compute totals (defaults to sum behavior) */
+  legendAggregation?: AggregationType;
   /** Callback when "View all" legend button is clicked */
   onViewAllLegendItems?: () => void;
   /** When true, constrains legend to max 50% height with scrolling */
@@ -73,6 +76,7 @@ export function ChartRoot({
   showLegend = false,
   maxLegendItems = 5,
   legendTotalLabel,
+  legendAggregation,
   onViewAllLegendItems,
   legendScrollable = false,
   fillContainer = false,
@@ -96,6 +100,7 @@ export function ChartRoot({
         showLegend={showLegend}
         maxLegendItems={maxLegendItems}
         legendTotalLabel={legendTotalLabel}
+        legendAggregation={legendAggregation}
         onViewAllLegendItems={onViewAllLegendItems}
         legendScrollable={legendScrollable}
         fillContainer={fillContainer}
@@ -112,6 +117,7 @@ type ChartRootInnerProps = {
   showLegend?: boolean;
   maxLegendItems?: number;
   legendTotalLabel?: string;
+  legendAggregation?: AggregationType;
   onViewAllLegendItems?: () => void;
   legendScrollable?: boolean;
   fillContainer?: boolean;
@@ -124,6 +130,7 @@ function ChartRootInner({
   showLegend = false,
   maxLegendItems = 5,
   legendTotalLabel,
+  legendAggregation,
   onViewAllLegendItems,
   legendScrollable = false,
   fillContainer = false,
@@ -165,6 +172,7 @@ function ChartRootInner({
         <ChartLegendCompound
           maxItems={maxLegendItems}
           totalLabel={legendTotalLabel}
+          aggregation={legendAggregation}
           onViewAllLegendItems={onViewAllLegendItems}
           scrollable={legendScrollable}
         />
@@ -194,18 +202,79 @@ export function useHasNoData(): boolean {
 }
 
 /**
- * Hook to calculate totals for each series across all data points.
+ * Hook to calculate aggregated values for each series across all data points.
+ * When no aggregation is provided, defaults to sum (original behavior).
  * Useful for legend displays.
  */
-export function useSeriesTotal(): Record<string, number> {
+export function useSeriesTotal(aggregation?: AggregationType): Record<string, number> {
   const { data, dataKeys } = useChartContext();
 
   return useMemo(() => {
-    return data.reduce((acc, item) => {
-      for (const seriesKey of dataKeys) {
-        acc[seriesKey] = (acc[seriesKey] || 0) + Number(item[seriesKey] || 0);
+    // Sum (default) and count use additive accumulation
+    if (!aggregation || aggregation === "sum" || aggregation === "count") {
+      return data.reduce(
+        (acc, item) => {
+          for (const seriesKey of dataKeys) {
+            acc[seriesKey] = (acc[seriesKey] || 0) + Number(item[seriesKey] || 0);
+          }
+          return acc;
+        },
+        {} as Record<string, number>
+      );
+    }
+
+    if (aggregation === "avg") {
+      const sums: Record<string, number> = {};
+      const counts: Record<string, number> = {};
+      for (const item of data) {
+        for (const seriesKey of dataKeys) {
+          const rawVal = item[seriesKey];
+          if (rawVal == null) continue; // skip gap-filled nulls
+          const val = Number(rawVal);
+          sums[seriesKey] = (sums[seriesKey] || 0) + val;
+          counts[seriesKey] = (counts[seriesKey] || 0) + 1;
+        }
       }
-      return acc;
-    }, {} as Record<string, number>);
-  }, [data, dataKeys]);
+      const result: Record<string, number> = {};
+      for (const key of dataKeys) {
+        result[key] = counts[key] ? sums[key]! / counts[key]! : 0;
+      }
+      return result;
+    }
+
+    if (aggregation === "min") {
+      const result: Record<string, number> = {};
+      for (const item of data) {
+        for (const seriesKey of dataKeys) {
+          if (item[seriesKey] == null) continue; // skip gap-filled nulls
+          const val = Number(item[seriesKey]);
+          if (result[seriesKey] === undefined || val < result[seriesKey]) {
+            result[seriesKey] = val;
+          }
+        }
+      }
+      // Default to 0 for series with no data
+      for (const key of dataKeys) {
+        if (result[key] === undefined) result[key] = 0;
+      }
+      return result;
+    }
+
+    // aggregation === "max"
+    const result: Record<string, number> = {};
+    for (const item of data) {
+      for (const seriesKey of dataKeys) {
+        if (item[seriesKey] == null) continue; // skip gap-filled nulls
+        const val = Number(item[seriesKey]);
+        if (result[seriesKey] === undefined || val > result[seriesKey]) {
+          result[seriesKey] = val;
+        }
+      }
+    }
+    // Default to 0 for series with no data
+    for (const key of dataKeys) {
+      if (result[key] === undefined) result[key] = 0;
+    }
+    return result;
+  }, [data, dataKeys, aggregation]);
 }
diff --git a/apps/webapp/app/components/primitives/charts/aggregation.ts b/apps/webapp/app/components/primitives/charts/aggregation.ts
new file mode 100644
index 000000000..48269833d
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/aggregation.ts
@@ -0,0 +1,23 @@
+import type { AggregationType } from "~/components/metrics/QueryWidget";
+
+/**
+ * Aggregate an array of numbers using the specified aggregation function.
+ *
+ * Shared utility so both QueryResultsChart (data transformation) and chart
+ * legend components can reuse the same logic without circular imports.
+ */
+export function aggregateValues(values: number[], aggregation: AggregationType): number {
+  if (values.length === 0) return 0;
+  switch (aggregation) {
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "avg":
+      return values.reduce((a, b) => a + b, 0) / values.length;
+    case "count":
+      return values.length;
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+  }
+}
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 321f4a449..3ffe889cc 100644
--- a/apps/webapp/app/components/query/QueryEditor.tsx
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -506,18 +506,39 @@ export function QueryEditor({
 
   const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
 
-  // Create a stable key from columns to detect schema changes
-  const columnsKey = results?.columns
-    ? results.columns.map((c) => `${c.name}:${c.type}`).join(",")
+  // Stable string key of result column names (types excluded — they can vary between runs)
+  const columnNamesKey = results?.columns
+    ? results.columns.map((c) => c.name).join(",")
     : "";
 
-  // Reset chart config only when column schema actually changes
-  // This allows re-running queries with different WHERE clauses without losing config
+  // Use a ref so the effect can read chartConfig without re-firing on every config tweak
+  const chartConfigRef = useRef(chartConfig);
+  chartConfigRef.current = chartConfig;
+
+  // Reset chart config only when a column referenced by the current config is no
+  // longer present in the results. This means:
+  // - Re-running the same query preserves all settings
+  // - Adding new columns preserves settings (existing config columns still exist)
+  // - Removing/renaming a column used in the config triggers a reset
   useEffect(() => {
-    if (columnsKey && !initialChartConfig) {
+    if (!columnNamesKey || initialChartConfig) return;
+
+    const config = chartConfigRef.current;
+    const configColumns = [
+      config.xAxisColumn,
+      ...config.yAxisColumns,
+      config.groupByColumn,
+      config.sortByColumn,
+    ].filter((col): col is string => col != null);
+
+    // Nothing configured yet — ChartConfigPanel will auto-select defaults
+    if (configColumns.length === 0) return;
+
+    const availableColumns = new Set(columnNamesKey.split(","));
+    if (configColumns.some((col) => !availableColumns.has(col))) {
       setChartConfig(defaultChartConfig);
     }
-  }, [columnsKey, initialChartConfig]);
+  }, [columnNamesKey, initialChartConfig]);
 
   const handleChartConfigChange = useCallback((config: ChartConfiguration) => {
     setChartConfig(config);
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
index a6d8905f2..5a321c58b 100644
--- a/apps/webapp/app/env.server.ts
+++ b/apps/webapp/app/env.server.ts
@@ -1212,7 +1212,10 @@ const EnvironmentSchema = z
 
     // Query page concurrency limits
     QUERY_DEFAULT_ORG_CONCURRENCY_LIMIT: z.coerce.number().int().default(3),
-    QUERY_GLOBAL_CONCURRENCY_LIMIT: z.coerce.number().int().default(50),
+    QUERY_GLOBAL_CONCURRENCY_LIMIT: z.coerce.number().int().default(100),
+
+    // Metric widget concurrency limits
+    METRIC_WIDGET_DEFAULT_ORG_CONCURRENCY_LIMIT: z.coerce.number().int().default(30),
 
     EVENTS_CLICKHOUSE_URL: z
       .string()
diff --git a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
index 961cf9911..da95eeacc 100644
--- a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
+++ b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
@@ -29,17 +29,17 @@ const overviewDashboard: BuiltInDashboard = {
     widgets: {
       "9lDDdebQ": {
         title: "Total runs",
-        query: "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs\r\nLIMIT\r\n  100",
+        query: "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs",
         display: { type: "bignumber", column: "total_runs", aggregation: "sum", abbreviate: false },
       },
       VhAgNlB0: {
         title: "Success %",
         query:
-          "SELECT\r\n  round(countIf (status = 'Completed') * 100.0 / countIf (is_finished = 1), 2) AS success_percentage\r\nFROM\r\n  runs\r\nLIMIT\r\n  100",
+          "SELECT\r\n  round(countIf (status = 'Completed') * 100.0 / countIf (is_finished = 1), 2) AS success_percentage\r\nFROM\r\n  runs",
         display: {
           type: "bignumber",
           column: "success_percentage",
-          aggregation: "sum",
+          aggregation: "avg",
           abbreviate: true,
           suffix: "%",
         },
@@ -47,14 +47,14 @@ const overviewDashboard: BuiltInDashboard = {
       iI5EnhJW: {
         title: "Failed runs",
         query:
-          "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'System failure', 'Crashed')\r\nLIMIT\r\n  100",
+          "SELECT\r\n  count() AS total_runs\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'System failure', 'Crashed')",
         display: { type: "bignumber", column: "total_runs", aggregation: "sum", abbreviate: false },
       },
       HtSgJEmp: { title: "Failed runs", query: "", display: { type: "title" } },
       "rRbzv-Aq": {
         title: "Runs by status",
         query:
-          "SELECT\r\n  timeBucket (),\r\n  status,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nGROUP BY\r\n  timeBucket,\r\n  status\r\nORDER BY\r\n  timeBucket\r\nLIMIT\r\n  100",
+          "SELECT\r\n  timeBucket (),\r\n  status,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nGROUP BY\r\n  timeBucket,\r\n  status\r\nORDER BY\r\n  timeBucket",
         display: {
           type: "chart",
           chartType: "bar",
@@ -70,20 +70,20 @@ const overviewDashboard: BuiltInDashboard = {
       j3yFSxLM: {
         title: "Top failing tasks",
         query:
-          "SELECT\r\n  task_identifier AS task,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  task_identifier\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC\r\nLIMIT\r\n  100;",
+          "SELECT\r\n  task_identifier AS task,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  task_identifier\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC;",
         display: { type: "table", prettyFormatting: true, sorting: [] },
       },
       IKB8cENo: {
         title: "Top failing tags",
         query:
-          "SELECT\r\n  arrayJoin(tags) AS tag,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  tag\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC\r\nLIMIT\r\n  100;",
+          "SELECT\r\n  arrayJoin(tags) AS tag,\r\n  count() AS runs,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) AS failures,\r\n  concat(round((countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) * 100, 2), '%') AS failure_rate,\r\n  avg(attempt_count - 1) AS avg_retries\r\nFROM\r\n  runs\r\nGROUP BY\r\n  tag\r\nORDER BY\r\n  (countIf (status IN ('Failed', 'Crashed', 'System failure')) / count()) DESC;",
         display: { type: "table", prettyFormatting: true, sorting: [] },
       },
       "-fHz3CyQ": { title: "Usage and cost", query: "", display: { type: "title" } },
       hnKsN482: {
         title: "Cost by task",
         query:
-          "SELECT\r\n  timeBucket() as time_period,\r\n  task_identifier,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+          "SELECT\r\n  timeBucket() as time_period,\r\n  task_identifier,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period",
         display: {
           type: "chart",
           chartType: "line",
@@ -99,7 +99,7 @@ const overviewDashboard: BuiltInDashboard = {
       if6dds8T: {
         title: "Failed runs by task",
         query:
-          "SELECT\r\n  timeBucket () as time_period,\r\n  task_identifier,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'Crashed', 'System failure')\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+          "SELECT\r\n  timeBucket () as time_period,\r\n  task_identifier,\r\n  count() AS run_count\r\nFROM\r\n  runs\r\nWHERE status IN ('Failed', 'Crashed', 'System failure')\r\nGROUP BY\r\n  time_period,\r\n  task_identifier\r\nORDER BY\r\n  time_period",
         display: {
           type: "chart",
           chartType: "bar",
@@ -113,7 +113,7 @@ const overviewDashboard: BuiltInDashboard = {
         },
       },
       i3q1Awfz: {
-        title: "Run success",
+        title: "Run success %",
         query:
           "SELECT\r\n  timeBucket (),\r\n  count() as total,\r\n  countIf (status = 'Completed') / total * 100 AS completed,\r\n  countIf (status IN ('Failed', 'Crashed', 'System failure')) / total * 100 AS failed,\r\nFROM\r\n  runs\r\nGROUP BY\r\n  timeBucket\r\nORDER BY\r\n  timeBucket",
         display: {
@@ -125,20 +125,20 @@ const overviewDashboard: BuiltInDashboard = {
           stacked: false,
           sortByColumn: null,
           sortDirection: "asc",
-          aggregation: "sum",
+          aggregation: "avg",
           seriesColors: { failed: "#f43f5e" },
         },
       },
       Kh0w0fjy: {
         title: "Top errors",
         query:
-          "SELECT\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  error\r\nORDER BY\r\n  count DESC\r\nLIMIT\r\n  100",
+          "SELECT\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  error\r\nORDER BY\r\n  count DESC",
         display: { type: "table", prettyFormatting: true, sorting: [] },
       },
       zybRTAdz: {
         title: "Top errors over time",
         query:
-          "SELECT\r\n  timeBucket(),\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  timeBucket,\r\n  error\r\nORDER BY\r\n  count DESC\r\nLIMIT\r\n  100",
+          "SELECT\r\n  timeBucket(),\r\n  concat(error.name, '(\"', error.message, '\")') AS error,\r\n  count() AS count\r\nFROM\r\n  runs\r\nWHERE\r\n  runs.error != NULL\r\n  AND runs.error.name != NULL\r\nGROUP BY\r\n  timeBucket,\r\n  error\r\nORDER BY\r\n  count DESC",
         display: {
           type: "chart",
           chartType: "bar",
@@ -155,7 +155,7 @@ const overviewDashboard: BuiltInDashboard = {
       ff2nVxxt: {
         title: "Cost by machine",
         query:
-          "SELECT\r\n  timeBucket() as time_period,\r\n  machine,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nWHERE machine != ''\r\nGROUP BY\r\n  time_period,\r\n  machine\r\nORDER BY\r\n  time_period\r\nLIMIT\r\n  100",
+          "SELECT\r\n  timeBucket() as time_period,\r\n  machine,\r\n  sum(total_cost) AS total_cost\r\nFROM\r\n  runs\r\nWHERE machine != ''\r\nGROUP BY\r\n  time_period,\r\n  machine\r\nORDER BY\r\n  time_period",
         display: {
           type: "chart",
           chartType: "line",
@@ -199,14 +199,14 @@ const overviewDashboard: BuiltInDashboard = {
           stacked: false,
           sortByColumn: null,
           sortDirection: "asc",
-          aggregation: "sum",
+          aggregation: "avg",
           seriesColors: {},
         },
       },
       xyQl3FAd: {
         title: "Queued",
         query:
-          "SELECT\r\n  count() AS queued\r\nFROM\r\n  runs\r\nWHERE status IN ('Dequeued', 'Queued')\r\nLIMIT\r\n  100",
+          "SELECT\r\n  count() AS queued\r\nFROM\r\n  runs\r\nWHERE status IN ('Dequeued', 'Queued')",
         display: { type: "bignumber", column: "queued", aggregation: "sum", abbreviate: false },
       },
     },
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
index 974f7805b..4429e0c06 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
@@ -226,7 +226,7 @@ export function MetricDashboard({
                     title={widget.title}
                     query={widget.query}
                     scope={scope}
-                    period={period ?? null}
+                    period={period ?? defaultPeriod}
                     from={from ?? null}
                     to={to ?? null}
                     taskIdentifiers={tasks.length > 0 ? tasks : undefined}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index d518f75e4..848546a51 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,4 +1,8 @@
-import { redirect, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import {
+  redirect,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+} from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { QueryEditor } from "~/components/query/QueryEditor";
@@ -89,6 +93,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     isImpersonating: user.isImpersonating,
     organizationSlug,
   });
+
   if (!canAccess) {
     return typedjson(
       {
diff --git a/apps/webapp/app/routes/resources.metric.tsx b/apps/webapp/app/routes/resources.metric.tsx
index ffee45a03..a037fb788 100644
--- a/apps/webapp/app/routes/resources.metric.tsx
+++ b/apps/webapp/app/routes/resources.metric.tsx
@@ -12,6 +12,7 @@ import {
 } from "~/components/metrics/QueryWidget";
 import { useElementVisibility } from "~/hooks/useElementVisibility";
 import { useInterval } from "~/hooks/useInterval";
+import { env } from "~/env.server";
 
 const Scope = z.union([z.literal("environment"), z.literal("organization"), z.literal("project")]);
 
@@ -107,7 +108,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     taskIdentifiers,
     queues,
     // Set higher concurrency if many widgets are on screen at once
-    customOrgConcurrencyLimit: 15,
+    customOrgConcurrencyLimit: env.METRIC_WIDGET_DEFAULT_ORG_CONCURRENCY_LIMIT,
   });
 
   if (!queryResult.success) {
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 66cec330a..676be9f2f 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -138,7 +138,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
 
   // Acquire concurrency slot
   const acquireResult = await queryConcurrencyLimiter.acquire({
-    key: organizationId,
+    key: projectId,
     requestId,
     keyLimit: orgLimit,
     globalLimit: GLOBAL_CONCURRENCY_LIMIT,
@@ -147,7 +147,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
   if (!acquireResult.success) {
     const errorMessage =
       acquireResult.reason === "key_limit"
-        ? `You've exceeded your query concurrency of ${orgLimit} for this organization. Please try again later.`
+        ? `You've exceeded your query concurrency of ${orgLimit} for this project. Please try again later.`
         : "We're experiencing a lot of queries at the moment. Please try again later.";
     return { success: false, error: new QueryError(errorMessage, { query: options.query }) };
   }
@@ -328,7 +328,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
   } finally {
     // Always release the concurrency slot
     await queryConcurrencyLimiter.release({
-      key: organizationId,
+      key: projectId,
       requestId,
     });
   }

From 35e11e09a3dfc563714160c16382932b77c2904d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 13 Feb 2026 16:52:04 +0000
Subject: [PATCH 10/25] Fix(webapp): Show an error to the user when their
 add-on upgrade payment fails (#3050)

A customer experienced a bug where their subscription downgraded to the
free plan unintentionally. This was due to a concurrency upgrade payment
attempt that failed a card check. We auto retry the payment across 2
weeks of attempts. When the final attempt failed, the whole subscription
downgraded.

Now we check if the payment is successful and if not, return an error
immediately so the subscription isn't modified until a successful
payment is made for an upgrade.
---
 .../route.tsx                                          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
index f3773df76..1c96b8c64 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
@@ -291,7 +291,7 @@ function Upgradable({
 }: ConcurrencyResult) {
   const lastSubmission = useActionData();
   const [form, { environments: formEnvironments }] = useForm({
-    id: "purchase-concurrency",
+    id: "allocate-concurrency",
     // TODO: type this
     lastSubmission: lastSubmission as any,
     onValidate({ formData }) {
@@ -446,7 +446,9 @@ function Upgradable({
               </TableRow>
             </TableBody>
           </Table>
-          <FormError id={formEnvironments.id}>{formEnvironments.error}</FormError>
+          <FormError id={formEnvironments.id}>
+            {formEnvironments.error ?? formEnvironments.initialError?.[""]?.[0]}
+          </FormError>
         </div>
         <Form className="flex flex-col gap-2" method="post" {...form.props} id="allocate">
           <input type="hidden" name="action" value="allocate" />
@@ -664,7 +666,9 @@ function PurchaseConcurrencyModal({
                   onChange={(e) => setAmountValue(Number(e.target.value))}
                   disabled={isLoading}
                 />
-                <FormError id={amount.errorId}>{amount.error}</FormError>
+                <FormError id={amount.errorId}>
+                  {amount.error ?? amount.initialError?.[""]?.[0]}
+                </FormError>
                 <FormError>{form.error}</FormError>
               </InputGroup>
             </Fieldset>

From a3d3b17df43177229e8ba2ed9e4e523695028d23 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 13 Feb 2026 17:34:43 +0000
Subject: [PATCH 11/25] TRQL: always add FINAL keyword (#3051)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For now we’re going to always add FINAL to TRQL queries for data
correctness.

In the future we will implement an automated optimization where we use
`SELECT argMax(column, _version)` and `WHERE _is_deleted = 0`. But this
is a more complex change and needs more investigation of downsides.
---
 internal-packages/tsql/src/query/printer.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/internal-packages/tsql/src/query/printer.ts b/internal-packages/tsql/src/query/printer.ts
index ff3c60843..4ac85b559 100644
--- a/internal-packages/tsql/src/query/printer.ts
+++ b/internal-packages/tsql/src/query/printer.ts
@@ -1559,9 +1559,14 @@ export class ClickHousePrinter {
       joinStrings.push(`AS ${this.printIdentifier(node.alias)}`);
     }
 
-    // Add FINAL
-    if (node.table_final) {
-      joinStrings.push("FINAL");
+    // Always add FINAL for direct table references to ensure deduplicated results
+    // from ReplacingMergeTree tables in ClickHouse
+    if (node.table) {
+      const tableExpr = node.table;
+      const isDirectTable = (tableExpr as Field).expression_type === "field";
+      if (isDirectTable) {
+        joinStrings.push("FINAL");
+      }
     }
 
     // Add SAMPLE

From 1d744fa3c67fdfcab38d648ec6de548ae6433e1b Mon Sep 17 00:00:00 2001
From: nicktrn <55853254+nicktrn@users.noreply.github.com>
Date: Fri, 13 Feb 2026 18:35:39 +0000
Subject: [PATCH 12/25] fix(dashboard): apply time filter preset periods
 immediately on click (#3053)

Extract `applyPeriod` callback from `applySelection` so preset period
buttons ("Created in the last X") apply immediately when clicked,
instead of only updating the selection state and requiring a separate
apply step.

Also validates `maxPeriodDays` on instant-apply so the upgrade prompt
still works correctly for plan-limited periods.
---
 .../app/components/runs/v3/SharedFilters.tsx  | 72 +++++++++++--------
 1 file changed, 42 insertions(+), 30 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 3ccda692c..7a5c4fdba 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -500,6 +500,43 @@ export function TimeDropdown({
     }
   })();
 
+  const applyPeriod = useCallback(
+    (periodToApply: string) => {
+      setValidationError(null);
+
+      if (maxPeriodDays && periodToDays(periodToApply) > maxPeriodDays) {
+        setValidationError(
+          `Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`
+        );
+        return;
+      }
+
+      const values: TimeFilterApplyValues = {
+        period: periodToApply,
+        from: undefined,
+        to: undefined,
+      };
+
+      if (onValueChange) {
+        onValueChange(values);
+      } else {
+        replace({
+          period: periodToApply,
+          cursor: undefined,
+          direction: undefined,
+          from: undefined,
+          to: undefined,
+        });
+      }
+
+      setFromValue(undefined);
+      setToValue(undefined);
+      setOpen(false);
+      onApply?.(values);
+    },
+    [maxPeriodDays, onValueChange, replace, onApply]
+  );
+
   const applySelection = useCallback(() => {
     setValidationError(null);
 
@@ -517,35 +554,9 @@ export function TimeDropdown({
         return;
       }
 
-      let periodToApply = selectedPeriod;
-      if (selectedPeriod === "custom") {
-        periodToApply = `${customValue}${customUnit}`;
-      }
-
-      const values: TimeFilterApplyValues = {
-        period: periodToApply,
-        from: undefined,
-        to: undefined,
-      };
-
-      if (onValueChange) {
-        // Controlled mode - just call the handler
-        onValueChange(values);
-      } else {
-        // URL mode - navigate
-        replace({
-          period: periodToApply,
-          cursor: undefined,
-          direction: undefined,
-          from: undefined,
-          to: undefined,
-        });
-      }
-
-      setFromValue(undefined);
-      setToValue(undefined);
-      setOpen(false);
-      onApply?.(values);
+      const periodToApply =
+        selectedPeriod === "custom" ? `${customValue}${customUnit}` : selectedPeriod;
+      applyPeriod(periodToApply);
     } else {
       // Validate date range
       if (!fromValue && !toValue) {
@@ -593,6 +604,7 @@ export function TimeDropdown({
     onValueChange,
     exceedsMaxPeriod,
     maxPeriodDays,
+    applyPeriod,
   ]);
 
   return (
@@ -703,7 +715,7 @@ export function TimeDropdown({
                           setCustomValue(parsed.value.toString());
                           setCustomUnit(parsed.unit);
                         }
-                        setValidationError(null);
+                        applyPeriod(p.value);
                       }}
                       fullWidth
                       type="button"

From 5d6085dcffb037edd231bb6ae21bb737c30f731b Mon Sep 17 00:00:00 2001
From: Iss <74388823+isshaddad@users.noreply.github.com>
Date: Sat, 14 Feb 2026 14:02:00 -0500
Subject: [PATCH 13/25] docs: Realtime skipColumns and Bun indexing
 troubleshooting (#3054)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Documents the skipColumns option on useRealtimeRun and
useRealtimeRunsWithTag for status-only subscriptions (smaller payloads,
e.g. for progress/completion UI). Adds a troubleshooting section for the
“Failed to index deployment” source-map error when using the Bun
runtime, with a pnpm patch workaround and link to the GitHub issue
---
 docs/realtime/react-hooks/subscribe.mdx | 26 +++++++++++++++++++++++++
 docs/troubleshooting.mdx                |  4 ++++
 2 files changed, 30 insertions(+)

diff --git a/docs/realtime/react-hooks/subscribe.mdx b/docs/realtime/react-hooks/subscribe.mdx
index 4cf0a79da..41ef2b61f 100644
--- a/docs/realtime/react-hooks/subscribe.mdx
+++ b/docs/realtime/react-hooks/subscribe.mdx
@@ -93,6 +93,32 @@ export function MyComponent({
 }
 ```
 
+When you only need run status (for example, a progress bar or completion badge), you can omit large fields like `payload` and `output` by passing `skipColumns`. This reduces the data sent over the wire and avoids issues such as "Large HTTP Payload" warnings in tools like Sentry.
+
+```tsx
+import { useRealtimeRun } from "@trigger.dev/react-hooks";
+
+export function RunStatusBadge({
+  runId,
+  publicAccessToken,
+}: {
+  runId: string;
+  publicAccessToken: string;
+}) {
+  const { run, error } = useRealtimeRun(runId, {
+    accessToken: publicAccessToken,
+    skipColumns: ["payload", "output"],
+  });
+
+  if (error) return <span>Error</span>;
+  if (!run) return <span>Loading…</span>;
+
+  return <span>Status: {run.status}</span>;
+}
+```
+
+You can skip any of: `payload`, `output`, `metadata`, `startedAt`, `delayUntil`, `queuedAt`, `expiredAt`, `completedAt`, `number`, `isTest`, `usageDurationMs`, `costInCents`, `baseCostInCents`, `ttl`, `payloadType`, `outputType`, `runTags`, `error`. The `useRealtimeRunsWithTag` hook also accepts a `skipColumns` option in the same way.
+
 See our [run object reference](/realtime/run-object) for the complete schema and [How it Works documentation](/realtime/how-it-works) for more technical details.
 
 ### useRealtimeRunsWithTag
diff --git a/docs/troubleshooting.mdx b/docs/troubleshooting.mdx
index 13d9216f8..bd612110e 100644
--- a/docs/troubleshooting.mdx
+++ b/docs/troubleshooting.mdx
@@ -97,6 +97,10 @@ export default defineConfig({
 
 If you see this error, add pino (and any other associated packages) to your `external` build settings in your `trigger.config.ts` file. Learn more about the `external` setting in the [config docs](/config/config-file#external).
 
+### `Failed to index deployment` with `Column must be greater than or equal to 0, got -1`
+
+This can occur when using `runtime: "bun"` during the indexing phase (we load and execute your task files to discover exports). A short-term workaround is to [pnpm patch](https://pnpm.io/cli/patch) the `source-map` package. See [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues/3045) for the patch details.
+
 ### `reactDOMServer.renderToPipeableStream is not a function` when using react-email
 
 If you see this error when using `@react-email/render`:

From b4e08bddeced568a215de67c26ce8d095e9ab336 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 14 Feb 2026 21:26:25 +0000
Subject: [PATCH 14/25] Fix(webapp): metrics UI improvements (#3063)

- Lots of small UI improvements
- Toggle full screen charts with "V" shortcut

<img width="3504" height="2286" alt="CleanShot 2026-02-14 at 20 06
30@2x"
src="https://github.com/user-attachments/assets/32403661-06b3-4f6c-a074-243b3f43197d"
/>

<img width="362" height="222" alt="CleanShot 2026-02-14 at 20 06 58@2x"
src="https://github.com/user-attachments/assets/ee4f5859-4b71-482e-9636-5abd78d9f623"
/>

<img width="434" height="360" alt="CleanShot 2026-02-14 at 20 06 53@2x"
src="https://github.com/user-attachments/assets/44339348-f3f3-425b-bbf3-bb41ed6a8e59"
/>

<img width="460" height="310" alt="CleanShot 2026-02-14 at 20 06 48@2x"
src="https://github.com/user-attachments/assets/eb3b6af6-b88a-4677-8a48-acfa6b768770"
/>

<img width="502" height="332" alt="CleanShot 2026-02-14 at 20 06 45@2x"
src="https://github.com/user-attachments/assets/b788d78b-8f4a-4b18-94c8-487673f3ec7b"
/>

<img width="370" height="257" alt="CleanShot 2026-02-14 at 20 10 29@2x"
src="https://github.com/user-attachments/assets/a81e8b14-b2eb-402c-bf3b-affd0d4fde26"
/>
---
 apps/webapp/app/components/Shortcuts.tsx      |   6 +
 .../app/components/code/ChartConfigPanel.tsx  | 137 +++++++-----------
 .../app/components/code/QueryResultsChart.tsx |  22 +--
 .../app/components/code/TSQLResultsTable.tsx  |  84 ++++-------
 .../app/components/metrics/QueryWidget.tsx    |  37 ++++-
 .../metrics/SaveToDashboardDialog.tsx         |   8 +-
 .../app/components/primitives/ClientTabs.tsx  |  11 +-
 .../primitives/SegmentedControl.tsx           |   3 +-
 .../app/components/primitives/ShortcutKey.tsx |  15 +-
 .../primitives/charts/BigNumberCard.tsx       |  11 +-
 .../app/components/primitives/charts/Card.tsx |  10 +-
 .../components/primitives/charts/ChartBar.tsx |  15 +-
 .../primitives/charts/ChartBlankState.tsx     |  23 +++
 .../primitives/charts/ChartLegendCompound.tsx |   2 +-
 .../app/components/query/QueryEditor.tsx      |  30 ++--
 .../AITabContent.tsx                          |   2 +-
 16 files changed, 201 insertions(+), 215 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartBlankState.tsx

diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index df76bdc52..2decc82c9 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -193,6 +193,12 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ key: "v" }} variant="medium/bright" />
             </Shortcut>
           </div>
+          <div className="space-y-3">
+            <Header3>Metrics page</Header3>
+            <Shortcut name="Toggle fullscreen chart">
+              <ShortcutKey shortcut={{ key: "v" }} variant="medium/bright" />
+            </Shortcut>
+          </div>
           <div className="space-y-3">
             <Header3>Schedules page</Header3>
             <Shortcut name="New schedule">
diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index d4b64682e..3032795c1 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -1,4 +1,5 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { IconSortAscending, IconSortDescending } from "@tabler/icons-react";
 import { BarChart, CheckIcon, LineChart, Plus, XIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
@@ -6,6 +7,7 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
 import { Select, SelectItem } from "../primitives/Select";
 import { Switch } from "../primitives/Switch";
+import SegmentedControl from "../primitives/SegmentedControl";
 import { Button } from "../primitives/Buttons";
 import {
   type AggregationType,
@@ -234,54 +236,38 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
   }
 
   return (
-    <div className={cn("flex flex-col gap-2 p-2", className)}>
+    <div className={cn("flex flex-col gap-3 p-2", className)}>
       {/* Chart Type */}
       <div className="flex flex-col gap-3">
         <ConfigField label="Type">
-          <div className="flex items-center">
-            <Button
-              type="button"
-              variant="tertiary/small"
-              className={cn(
-                "rounded-r-none border-b pl-1 pr-2",
-                config.chartType === "bar" ? "border-indigo-500" : "border-transparent"
-              )}
-              iconSpacing="gap-x-1"
-              onClick={() => updateConfig({ chartType: "bar" })}
-              LeadingIcon={BarChart}
-              leadingIconClassName={
-                config.chartType === "bar" ? "text-indigo-500" : "text-text-dimmed"
-              }
-            >
-              <span className={config.chartType === "bar" ? "text-indigo-500" : "text-text-dimmed"}>
-                Bar
-              </span>
-            </Button>
-            <Button
-              type="button"
-              variant="tertiary/small"
-              className={cn(
-                "rounded-l-none border-b pl-1 pr-2",
-                config.chartType === "line" ? "border-indigo-500" : "border-transparent"
-              )}
-              iconSpacing="gap-x-1"
-              onClick={() => updateConfig({ chartType: "line" })}
-              LeadingIcon={LineChart}
-              leadingIconClassName={
-                config.chartType === "line" ? "text-indigo-500" : "text-text-dimmed"
-              }
-            >
-              <span
-                className={config.chartType === "line" ? "text-indigo-500" : "text-text-dimmed"}
-              >
-                Line
-              </span>
-            </Button>
-          </div>
+          <SegmentedControl
+            name="chartType"
+            value={config.chartType}
+            variant="secondary/small"
+            options={[
+              {
+                label: (
+                  <span className="flex items-center gap-1">
+                    <BarChart className="size-3" /> Bar
+                  </span>
+                ),
+                value: "bar",
+              },
+              {
+                label: (
+                  <span className="flex items-center gap-1">
+                    <LineChart className="size-3" /> Line
+                  </span>
+                ),
+                value: "line",
+              },
+            ]}
+            onChange={(value) => updateConfig({ chartType: value as "bar" | "line" })}
+          />
         </ConfigField>
       </div>
 
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-3">
         {/* X-Axis */}
         <ConfigField label="X-Axis">
           <Select
@@ -529,9 +515,29 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
         {/* Sort Direction (only when sorting) */}
         {config.sortByColumn && (
           <ConfigField label="Sort direction">
-            <SortDirectionToggle
-              direction={config.sortDirection}
-              onChange={(direction) => updateConfig({ sortDirection: direction })}
+            <SegmentedControl
+              name="sortDirection"
+              value={config.sortDirection}
+              variant="secondary/small"
+              options={[
+                {
+                  label: (
+                    <span className="flex items-center gap-1">
+                      <IconSortAscending className="size-3" /> Asc
+                    </span>
+                  ),
+                  value: "asc",
+                },
+                {
+                  label: (
+                    <span className="flex items-center gap-1">
+                      <IconSortDescending className="size-3" /> Desc
+                    </span>
+                  ),
+                  value: "desc",
+                },
+              ]}
+              onChange={(value) => updateConfig({ sortDirection: value as SortDirection })}
             />
           </ConfigField>
         )}
@@ -543,51 +549,12 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 function ConfigField({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex flex-col gap-1">
-      {label && <span className="text-xs text-text-dimmed">{label}</span>}
+      {label && <span className="text-xs text-text-bright">{label}</span>}
       {children}
     </div>
   );
 }
 
-function SortDirectionToggle({
-  direction,
-  onChange,
-}: {
-  direction: SortDirection;
-  onChange: (direction: SortDirection) => void;
-}) {
-  return (
-    <div className="flex gap-1">
-      <button
-        type="button"
-        onClick={() => onChange("asc")}
-        className={cn(
-          "rounded px-2 py-1 text-xs transition-colors",
-          direction === "asc"
-            ? "bg-charcoal-700 text-text-bright"
-            : "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
-        )}
-        title="Ascending"
-      >
-        Asc
-      </button>
-      <button
-        type="button"
-        onClick={() => onChange("desc")}
-        className={cn(
-          "rounded px-2 py-1 text-xs transition-colors",
-          direction === "desc"
-            ? "bg-charcoal-700 text-text-bright"
-            : "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
-        )}
-        title="Descending"
-      >
-        Desc
-      </button>
-    </div>
-  );
-}
-
 function SeriesColorPicker({
   color,
   onColorChange,
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 4f7899a74..c66db5a8f 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -1,8 +1,9 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { BarChart3, LineChart } from "lucide-react";
 import { memo, useMemo } from "react";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
-import { Paragraph } from "../primitives/Paragraph";
+import { ChartBlankState } from "../primitives/charts/ChartBlankState";
 import type { AggregationType, ChartConfiguration } from "../metrics/QueryWidget";
 import { aggregateValues } from "../primitives/charts/aggregation";
 import { getRunStatusHexColor } from "~/components/runs/v3/TaskRunStatus";
@@ -947,20 +948,22 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   }, [isDateBased, xAxisTickFormatter, xAxisAngle]);
 
   // Validation — all hooks must be above this point
+  const chartIcon = chartType === "bar" ? BarChart3 : LineChart;
+
   if (!xAxisColumn) {
-    return <EmptyState message="Select an X-axis column to display the chart" />;
+    return <ChartBlankState icon={chartIcon} message="Select an X-axis column to display the chart" />;
   }
 
   if (yAxisColumns.length === 0) {
-    return <EmptyState message="Select a Y-axis column to display the chart" />;
+    return <ChartBlankState icon={chartIcon} message="Select a Y-axis column to display the chart" />;
   }
 
   if (rows.length === 0) {
-    return <EmptyState message="No data to display" />;
+    return <ChartBlankState icon={chartIcon} message="No data to display" />;
   }
 
   if (data.length === 0) {
-    return <EmptyState message="Unable to transform data for chart" />;
+    return <ChartBlankState icon={chartIcon} message="Unable to transform data for chart" />;
   }
 
   // Base x-axis props shared by all chart types
@@ -1113,12 +1116,3 @@ function createYAxisFormatter(data: Record<string, unknown>[], series: string[])
   };
 }
 
-function EmptyState({ message }: { message: string }) {
-  return (
-    <div className="flex h-full min-h-[300px] items-center justify-center">
-      <Paragraph variant="small" className="text-text-dimmed">
-        {message}
-      </Paragraph>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 951e84823..36ae3a290 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -1,6 +1,6 @@
 import { ChevronDownIcon, ChevronUpDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata } from "@internal/clickhouse";
-import { IconFilter2, IconFilter2X } from "@tabler/icons-react";
+import { IconFilter2, IconFilter2X, IconTable } from "@tabler/icons-react";
 import { rankItem } from "@tanstack/match-sorter-utils";
 import {
   flexRender,
@@ -19,7 +19,7 @@ import {
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
-import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { AlertCircle, ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
 import { forwardRef, memo, useEffect, useMemo, useRef, useState } from "react";
 import { EnvironmentLabel, EnvironmentSlug } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
@@ -37,7 +37,9 @@ import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { formatCurrencyAccurate, formatNumber } from "~/utils/numberFormatter";
 import { v3ProjectPath, v3RunPathFromFriendlyId } from "~/utils/pathBuilder";
+import { ChartBlankState } from "../primitives/charts/ChartBlankState";
 import { Paragraph } from "../primitives/Paragraph";
+
 import { TextLink } from "../primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "../primitives/Tooltip";
 import { QueueName } from "../runs/v3/QueueName";
@@ -412,7 +414,7 @@ function CellValueWrapper({
 
   return (
     <span
-      className="flex-1"
+      className="flex flex-1 items-center"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
@@ -718,15 +720,16 @@ function CopyableCell({
   return (
     <div
       className={cn(
-        "relative flex w-full items-center overflow-hidden px-2 py-1.5",
+        "relative flex h-full w-full items-center overflow-hidden px-2",
         "bg-background-bright group-hover/row:bg-charcoal-750",
         "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
+        "[&_a:focus-visible]:underline [&_a:focus-visible]:underline-offset-[3px] [&_a:focus-visible]:outline-none",
         alignment === "right" && "justify-end"
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <span className="flex h-4 items-center truncate">{children}</span>
+      <span className="flex items-center truncate">{children}</span>
       {isHovered && (
         <span
           onClick={(e) => {
@@ -847,7 +850,7 @@ function HeaderCellContent({
           }}
           onMouseEnter={() => setIsFilterHovered(true)}
           onMouseLeave={() => setIsFilterHovered(false)}
-          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:text-text-bright"
+          className="flex-shrink-0 rounded text-text-dimmed transition-colors focus-custom hover:text-text-bright"
           title="Toggle column filters"
         >
           {showFilters ? <IconFilter2X className="size-4" /> : <IconFilter2 className="size-4" />}
@@ -903,11 +906,14 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   columns,
   prettyFormatting = true,
   sorting: defaultSorting = [],
+  showHeaderOnEmpty = false,
 }: {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   prettyFormatting?: boolean;
   sorting?: SortingState;
+  /** When true, show column headers + "No results" on empty data. When false, show a blank state icon. */
+  showHeaderOnEmpty?: boolean;
 }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
@@ -977,6 +983,10 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
 
   // Empty state
   if (rows.length === 0) {
+    if (!showHeaderOnEmpty) {
+      return <ChartBlankState icon={IconTable} message="No data to display" />;
+    }
+
     return (
       <div
         className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
@@ -984,7 +994,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
       >
         <table style={{ display: "grid" }}>
           <thead
-            className="border-t border-grid-bright bg-background-bright"
+            className="border-t border-grid-bright bg-background-bright after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright"
             style={{
               display: "grid",
               position: "sticky",
@@ -1005,63 +1015,24 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                         width: header.getSize(),
                       }}
                     >
-                      <HeaderCellContent
-                        alignment={meta?.alignment ?? "left"}
-                        tooltip={meta?.outputColumn.description}
-                        onFilterClick={() => {
-                          if (!showFilters) {
-                            setFocusFilterColumn(header.id);
-                          } else {
-                            setColumnFilters([]);
-                          }
-                          setShowFilters(!showFilters);
-                        }}
-                        showFilters={showFilters}
-                        hasActiveFilter={!!header.column.getFilterValue()}
-                        sortDirection={header.column.getIsSorted()}
-                        onSortClick={header.column.getToggleSortingHandler()}
-                        canSort={header.column.getCanSort()}
-                      >
+                      <HeaderCellContent alignment={meta?.alignment ?? "left"}>
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </HeaderCellContent>
-                      {/* Column resizer */}
-                      <div
-                        onDoubleClick={() => header.column.resetSize()}
-                        onMouseDown={header.getResizeHandler()}
-                        onTouchStart={header.getResizeHandler()}
-                        className={cn(
-                          "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
-                          "opacity-0 group-hover/header:opacity-100",
-                          "bg-charcoal-600 hover:bg-indigo-500",
-                          header.column.getIsResizing() && "bg-indigo-500 opacity-100"
-                        )}
-                      />
                     </th>
                   );
                 })}
               </tr>
             ))}
-            {/* Filter row - shown when filters are toggled */}
-            {showFilters && (
-              <tr style={{ display: "flex", width: "100%" }}>
-                {table.getHeaderGroups()[0]?.headers.map((header) => (
-                  <FilterCell
-                    key={`filter-${header.id}`}
-                    column={header.column}
-                    width={header.getSize()}
-                    shouldFocus={focusFilterColumn === header.id}
-                    onFocused={() => setFocusFilterColumn(null)}
-                  />
-                ))}
-              </tr>
-            )}
           </thead>
-          <tbody className="border-b border-grid-bright" style={{ display: "grid" }}>
-            <tr style={{ display: "flex" }}>
-              <td>
-                <Paragraph variant="extra-small" className="p-4 text-text-dimmed">
-                  No results
-                </Paragraph>
+          <tbody style={{ display: "grid" }}>
+            <tr style={{ display: "flex", width: "100%" }}>
+              <td className="w-full px-3 py-6" colSpan={columns.length}>
+                <div className="flex items-center justify-center gap-1.5">
+                  <AlertCircle className="size-5 text-text-dimmed/50" />
+                  <Paragraph variant="small" className="text-text-dimmed">
+                    This query returned no results
+                  </Paragraph>
+                </div>
               </td>
             </tr>
           </tbody>
@@ -1171,6 +1142,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                   position: "absolute",
                   transform: `translateY(${virtualRow.start}px)`,
                   width: "100%",
+                  height: `${virtualRow.size}px`,
                 }}
               >
                 {row.getVisibleCells().map((cell) => {
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
index 7e49259f8..1dcf17039 100644
--- a/apps/webapp/app/components/metrics/QueryWidget.tsx
+++ b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -6,10 +6,12 @@ import { DialogClose } from "@radix-ui/react-dialog";
 import { IconBraces, IconChartHistogram, IconFileTypeCsv } from "@tabler/icons-react";
 import { assertNever } from "assert-never";
 import { Maximize2 } from "lucide-react";
-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
 import { z } from "zod";
 import { Card } from "~/components/primitives/charts/Card";
+import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { rowsToCSV, rowsToJSON } from "~/utils/dataExport";
 import { QueryResultsChart } from "../code/QueryResultsChart";
@@ -142,6 +144,8 @@ export type QueryWidgetProps = {
   accessory?: ReactNode;
   isResizing?: boolean;
   isDraggable?: boolean;
+  /** Additional className applied to the Card wrapper */
+  className?: string;
   /** Callback when edit is clicked. Receives the current data. */
   onEdit?: (data: QueryWidgetData) => void;
   /** Callback when rename is clicked. Receives the new title. */
@@ -150,6 +154,8 @@ export type QueryWidgetProps = {
   onDelete?: () => void;
   /** Callback when duplicate is clicked. Receives the current data. */
   onDuplicate?: (data: QueryWidgetData) => void;
+  /** When true, show table column headers even when there are no rows */
+  showTableHeaderOnEmpty?: boolean;
 };
 
 export function QueryWidget({
@@ -161,6 +167,7 @@ export function QueryWidget({
   error,
   isResizing,
   isDraggable,
+  className,
   onEdit,
   onRename,
   onDelete,
@@ -171,10 +178,21 @@ export function QueryWidget({
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const [renameValue, setRenameValue] = useState(titleString ?? "");
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const hasEditActions = onEdit || onRename || onDelete || onDuplicate;
   const hasData = props.data.rows.length > 0;
 
+  // "v" to toggle fullscreen on hovered widget
+  useShortcutKeys({
+    shortcut: { key: "v" },
+    action: useCallback(() => {
+      const isHovered = containerRef.current?.matches(":hover");
+      if (!isFullscreen && !isHovered) return;
+      setIsFullscreen((prev) => !prev);
+    }, [isFullscreen]),
+  });
+
   const copyToClipboard = useCallback((text: string) => {
     navigator.clipboard.writeText(text);
   }, []);
@@ -194,8 +212,8 @@ export function QueryWidget({
   }, [props.data, copyToClipboard]);
 
   return (
-    <div className="group h-full">
-      <Card className="h-full overflow-hidden px-0 pb-0">
+    <div ref={containerRef} className="group h-full">
+      <Card className={cn("h-full overflow-hidden px-0 pb-0", className)}>
         <Card.Header draggable={isDraggable}>
           <div className="flex items-center gap-1.5">{title}</div>
           <Card.Accessory>
@@ -211,10 +229,14 @@ export function QueryWidget({
                   />
                 </span>
               }
-              content="Maximize"
+              content={
+                <span className="flex items-center gap-1">
+                  Maximize
+                  <ShortcutKey shortcut={{ key: "v" }} variant="small/bright" />
+                </span>
+              }
               asChild
             />
-            {accessory}
             <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
               <PopoverVerticalEllipseTrigger
                 isOpen={isMenuOpen}
@@ -307,6 +329,7 @@ export function QueryWidget({
                 </div>
               </PopoverContent>
             </Popover>
+            {accessory}
           </Card.Accessory>
         </Card.Header>
         <LoadingBarDivider isLoading={isLoading ?? false} className="bg-transparent" />
@@ -382,6 +405,7 @@ type QueryWidgetBodyProps = {
   isFullscreen: boolean;
   setIsFullscreen: (open: boolean) => void;
   isLoading: boolean;
+  showTableHeaderOnEmpty?: boolean;
 };
 
 function QueryWidgetBody({
@@ -392,6 +416,7 @@ function QueryWidgetBody({
   isFullscreen,
   setIsFullscreen,
   isLoading,
+  showTableHeaderOnEmpty,
 }: QueryWidgetBodyProps) {
   const type = config.type;
 
@@ -410,6 +435,7 @@ function QueryWidgetBody({
             columns={data.columns}
             prettyFormatting={config.prettyFormatting}
             sorting={config.sorting}
+            showHeaderOnEmpty={showTableHeaderOnEmpty}
           />
           <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
             <DialogContent
@@ -423,6 +449,7 @@ function QueryWidgetBody({
                   columns={data.columns}
                   prettyFormatting={config.prettyFormatting}
                   sorting={config.sorting}
+                  showHeaderOnEmpty={showTableHeaderOnEmpty}
                 />
               </div>
             </DialogContent>
diff --git a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
index 1e2c1232e..828ff2b91 100644
--- a/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
+++ b/apps/webapp/app/components/metrics/SaveToDashboardDialog.tsx
@@ -1,6 +1,6 @@
 import { DialogClose } from "@radix-ui/react-dialog";
 import { useFetcher, useNavigate } from "@remix-run/react";
-import { IconChartHistogram } from "@tabler/icons-react";
+import { IconCheck } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import {
@@ -138,7 +138,11 @@ export function SaveToDashboardDialog({
                         : "text-text-dimmed hover:bg-charcoal-750 hover:text-text-bright"
                     )}
                   >
-                    <IconChartHistogram className="size-4 shrink-0 text-text-dimmed" />
+                    {selectedDashboardId === dashboard.friendlyId ? (
+                      <IconCheck className="size-4 shrink-0 text-green-500" />
+                    ) : (
+                      <span className="size-4 shrink-0" />
+                    )}
                     <span className="flex-1 truncate">{dashboard.title}</span>
                     <span
                       className={cn(
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index 737f37bcd..aef45fe0c 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -51,6 +51,7 @@ const ClientTabs = React.forwardRef<
     <ClientTabsContext.Provider value={contextValue}>
       <TabsPrimitive.Root
         ref={ref}
+        activationMode="manual"
         onValueChange={handleValueChange}
         {...controlledProps}
         {...props}
@@ -96,6 +97,7 @@ const ClientTabsTrigger = React.forwardRef<
     return (
       <TabsPrimitive.Trigger
         ref={ref}
+        tabIndex={0}
         className={cn(
           "group relative flex h-full grow items-center justify-center focus-custom disabled:pointer-events-none disabled:opacity-50",
           "flex-1 basis-0",
@@ -134,6 +136,7 @@ const ClientTabsTrigger = React.forwardRef<
     return (
       <TabsPrimitive.Trigger
         ref={ref}
+        tabIndex={0}
         className={cn(
           "group flex flex-col items-center pt-1 focus-custom disabled:pointer-events-none disabled:opacity-50",
           className
@@ -143,7 +146,7 @@ const ClientTabsTrigger = React.forwardRef<
         <span
           className={cn(
             "text-sm transition duration-200",
-            isActive ? "text-text-bright" : "text-text-dimmed hover:text-text-bright"
+            isActive ? "text-text-bright" : "text-text-dimmed group-hover:text-text-bright"
           )}
         >
           {children}
@@ -170,8 +173,9 @@ const ClientTabsTrigger = React.forwardRef<
   return (
     <TabsPrimitive.Trigger
       ref={ref}
+      tabIndex={0}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap border-r border-charcoal-700 px-2 text-sm transition-all first:pl-0 last:border-none data-[state=active]:text-indigo-500 data-[state=inactive]:text-text-dimmed data-[state=inactive]:hover:text-text-bright focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex items-center justify-center whitespace-nowrap border-r border-charcoal-700 px-2 text-sm transition-all first:pl-0 last:border-none focus-custom data-[state=active]:text-indigo-500 data-[state=inactive]:text-text-dimmed data-[state=inactive]:hover:text-text-bright disabled:pointer-events-none disabled:opacity-50",
         className
       )}
       {...props}
@@ -188,8 +192,9 @@ const ClientTabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
+    tabIndex={-1}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "mt-1 outline-none",
       className,
       "data-[state=inactive]:hidden"
     )}
diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index f87863a45..98561e412 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -1,5 +1,6 @@
 import { RadioGroup } from "@headlessui/react";
 import { motion } from "framer-motion";
+import type { ReactNode } from "react";
 import { cn } from "~/utils/cn";
 
 const sizes = {
@@ -63,7 +64,7 @@ const variants = {
 type VariantType = keyof typeof variants;
 
 type Options = {
-  label: string;
+  label: ReactNode;
   value: string;
 };
 
diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx
index 567cf68d6..72d77c70d 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -8,12 +8,15 @@ import { cn } from "~/utils/cn";
 import { useOperatingSystem } from "./OperatingSystemProvider";
 import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
 
+const small =
+  "justify-center text-[0.6rem] font-mono font-medium min-w-[1rem] min-h-[1rem] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border transition uppercase";
+
 const medium =
   "justify-center min-w-[1.25rem] min-h-[1.25rem] text-[0.65rem] font-mono font-medium rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
 
 export const variants = {
-  small:
-    "justify-center text-[0.6rem] font-mono font-medium min-w-[1rem] min-h-[1rem] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
+  small: cn(small, "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60"),
+  "small/bright": cn(small, "bg-charcoal-750 text-text-bright border-charcoal-650"),
   medium: cn(medium, "group-hover:border-charcoal-550"),
   "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"),
 };
@@ -54,10 +57,10 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps)
   );
 }
 
-function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "medium/bright") {
+function keyString(key: string, isMac: boolean, variant: ShortcutKeyVariant) {
   key = key.toLowerCase();
 
-  const className = variant === "small" ? "w-2.5 h-4" : "w-2.5 h-4.5";
+  const className = variant.startsWith("small") ? "w-2.5 h-4" : "w-2.5 h-4.5";
 
   switch (key) {
     case "enter":
@@ -86,9 +89,9 @@ function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "m
 function modifierString(
   modifier: Modifier,
   isMac: boolean,
-  variant: "small" | "medium" | "medium/bright"
+  variant: ShortcutKeyVariant
 ): string | JSX.Element {
-  const className = variant === "small" ? "w-2.5 h-4" : "w-3.5 h-5";
+  const className = variant.startsWith("small") ? "w-2.5 h-4" : "w-3.5 h-5";
 
   switch (modifier) {
     case "alt":
diff --git a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
index f9d428041..1ed3b50a6 100644
--- a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
+++ b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
@@ -1,12 +1,13 @@
 import type { OutputColumnMetadata } from "@internal/tsql";
+import { Hash } from "lucide-react";
 import { useMemo } from "react";
 import type {
   BigNumberAggregationType,
   BigNumberConfiguration,
 } from "~/components/metrics/QueryWidget";
 import { AnimatedNumber } from "../AnimatedNumber";
+import { ChartBlankState } from "./ChartBlankState";
 import { Spinner } from "../Spinner";
-import { Paragraph } from "../Paragraph";
 
 interface BigNumberCardProps {
   rows: Record<string, unknown>[];
@@ -138,13 +139,7 @@ export function BigNumberCard({ rows, columns, config, isLoading = false }: BigN
   }
 
   if (result === null) {
-    return (
-      <div className="grid h-full place-items-center [container-type:size]">
-        <Paragraph variant="small" className="text-text-dimmed">
-          No data to display
-        </Paragraph>
-      </div>
-    );
+    return <ChartBlankState icon={Hash} message="No data to display" />;
   }
 
   const { displayValue, unitSuffix, decimalPlaces } = abbreviate
diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index 9249832b5..f4fb13b51 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -15,17 +15,11 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   );
 };
 
-const CardHeader = ({
-  children,
-  draggable,
-}: {
-  children: ReactNode;
-  draggable?: boolean;
-}) => {
+const CardHeader = ({ children, draggable }: { children: ReactNode; draggable?: boolean }) => {
   return (
     <Header3
       className={cn(
-        "drag-handle mb-3 flex items-center justify-between gap-2 px-3",
+        "drag-handle mb-3 flex items-center justify-between gap-2 pl-4 pr-3",
         draggable && "cursor-grab active:cursor-grabbing"
       )}
     >
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index a34ce6675..7ab3299e2 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import {
   Bar,
   BarChart,
@@ -11,20 +11,13 @@ import {
   type XAxisProps,
   type YAxisProps,
 } from "recharts";
-import {
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-  type ChartState,
-} from "~/components/primitives/charts/Chart";
-import { cn } from "~/utils/cn";
-import { ChartBarLoading, ChartBarInvalid, ChartBarNoData } from "./ChartLoading";
+import { ChartTooltip, ChartTooltipContent } from "~/components/primitives/charts/Chart";
 import { useChartContext } from "./ChartContext";
-import { ChartRoot, useHasNoData } from "./ChartRoot";
+import { ChartBarInvalid, ChartBarLoading, ChartBarNoData } from "./ChartLoading";
+import { useHasNoData } from "./ChartRoot";
 // Legend is now rendered by ChartRoot outside the chart container
 import { ZoomTooltip, useZoomHandlers } from "./ChartZoom";
 import { getBarOpacity } from "./hooks/useHighlightState";
-import type { ZoomRange } from "./hooks/useZoomSelection";
 
 //TODO: fix the first and last bars in a stack not having rounded corners
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx b/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
new file mode 100644
index 000000000..9a093254e
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartBlankState.tsx
@@ -0,0 +1,23 @@
+import { cn } from "~/utils/cn";
+import { Paragraph } from "../Paragraph";
+
+export function ChartBlankState({
+  icon: Icon,
+  message,
+  className,
+}: {
+  icon?: React.ComponentType<{ className?: string }>;
+  message: string;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex h-full w-full items-center justify-center", className)}>
+      <div className="-mt-3 flex flex-col items-center gap-2">
+        {Icon && <Icon className="size-12 text-charcoal-700" />}
+        <Paragraph variant="small" className="text-text-dimmed/70">
+          {message}
+        </Paragraph>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 54d725a28..7e9cf2c87 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -167,7 +167,7 @@ export function ChartLegendCompound({
 
   return (
     <div
-      className={cn("flex flex-col pt-4 text-sm", scrollable && "max-h-[50%] min-h-0", className)}
+      className={cn("flex flex-col px-2 pb-2 pt-4 text-sm", scrollable && "max-h-[50%] min-h-0", className)}
     >
       {/* Total row */}
       <div
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 3ffe889cc..6a986b49f 100644
--- a/apps/webapp/app/components/query/QueryEditor.tsx
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -507,9 +507,7 @@ export function QueryEditor({
   const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
 
   // Stable string key of result column names (types excluded — they can vary between runs)
-  const columnNamesKey = results?.columns
-    ? results.columns.map((c) => c.name).join(",")
-    : "";
+  const columnNamesKey = results?.columns ? results.columns.map((c) => c.name).join(",") : "";
 
   // Use a ref so the effect can read chartConfig without re-firing on every config tweak
   const chartConfigRef = useRef(chartConfig);
@@ -773,7 +771,7 @@ export function QueryEditor({
                       </div>
                     ) : results?.rows && results?.columns ? (
                       <div
-                        className={`grid h-full max-h-full overflow-hidden bg-charcoal-900 ${
+                        className={`grid h-full max-h-full overflow-hidden bg-background-bright ${
                           hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
                             ? "grid-rows-[auto_1fr]"
                             : "grid-rows-[1fr]"
@@ -784,8 +782,10 @@ export function QueryEditor({
                           periodClipped={results.periodClipped}
                           organizationSlug={organization.slug}
                         />
-                        <div className="overflow-hidden p-2">
+                        <div className="overflow-hidden">
                           <QueryWidget
+                            className="border-0"
+                            showTableHeaderOnEmpty
                             title={
                               <QueryTitle
                                 isTitleLoading={isTitleLoading}
@@ -829,7 +829,7 @@ export function QueryEditor({
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="graph"
-                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-background-bright ${
                       results?.rows &&
                       results.rows.length > 0 &&
                       hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
@@ -878,7 +878,7 @@ export function QueryEditor({
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="bignumber"
-                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-charcoal-900 ${
+                    className={`m-0 grid h-full max-h-full min-h-0 overflow-hidden bg-background-bright ${
                       results?.rows &&
                       results.rows.length > 0 &&
                       hasQueryResultsCallouts(results.hiddenColumns, results.periodClipped)
@@ -1219,8 +1219,9 @@ function ResultsChart({
     <>
       <ResizablePanelGroup className="overflow-hidden">
         <ResizablePanel id="chart-results">
-          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+          <div className="h-full overflow-hidden bg-background-bright">
             <QueryWidget
+              className="border-0"
               title={
                 <QueryTitle
                   isTitleLoading={isTitleLoading}
@@ -1297,8 +1298,9 @@ function ResultsBigNumber({
     <>
       <ResizablePanelGroup className="overflow-hidden">
         <ResizablePanel id="bignumber-results">
-          <div className="h-full overflow-hidden bg-charcoal-900 p-2">
+          <div className="h-full overflow-hidden bg-background-bright">
             <QueryWidget
+              className="border-0"
               title={
                 <QueryTitle
                   isTitleLoading={isTitleLoading}
@@ -1367,7 +1369,7 @@ function BigNumberConfigPanel({
     <div className="flex h-full flex-col gap-2 overflow-y-auto p-2">
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-1">
-          <Paragraph variant="extra-small" className="text-text-dimmed">
+          <Paragraph variant="extra-small" className="text-text-bright">
             Column
           </Paragraph>
           <Select
@@ -1389,7 +1391,7 @@ function BigNumberConfigPanel({
           </Select>
         </div>
         <div className="flex flex-col gap-1">
-          <Paragraph variant="extra-small" className="text-text-dimmed">
+          <Paragraph variant="extra-small" className="text-text-bright">
             Sort order
           </Paragraph>
           <Select
@@ -1417,7 +1419,7 @@ function BigNumberConfigPanel({
           </Select>
         </div>
         <div className="flex flex-col gap-1">
-          <Paragraph variant="extra-small" className="text-text-dimmed">
+          <Paragraph variant="extra-small" className="text-text-bright">
             Aggregation
           </Paragraph>
           <Select
@@ -1451,7 +1453,7 @@ function BigNumberConfigPanel({
           />
         </div>
         <div className="flex flex-col gap-1">
-          <Paragraph variant="extra-small" className="text-text-dimmed">
+          <Paragraph variant="extra-small" className="text-text-bright">
             Prefix
           </Paragraph>
           <Input
@@ -1462,7 +1464,7 @@ function BigNumberConfigPanel({
           />
         </div>
         <div className="flex flex-col gap-1">
-          <Paragraph variant="extra-small" className="text-text-dimmed">
+          <Paragraph variant="extra-small" className="text-text-bright">
             Suffix
           </Paragraph>
           <Input
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
index 0f3d4042b..999eab3e8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -55,7 +55,7 @@ export function AITabContent({
                   key: (prev?.key ?? 0) + 1,
                 }));
               }}
-              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500 focus-custom focus-visible:!rounded-full"
             >
               <SparkleListIcon className="size-4 shrink-0 text-text-dimmed transition group-hover:text-indigo-500" />
               <Paragraph variant="small" className="text-left transition group-hover:text-text-bright">

From 796ad29386e79d3d05bdf16c214fd2615d95f62e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 16 Feb 2026 10:49:37 +0000
Subject: [PATCH 15/25] Fix(webapp): consistent query button width (#3067)

Prevents layout shift by keeping the button width the same when
isLoading

Normal state
<img width="423" height="186" alt="CleanShot 2026-02-16 at 10 31 23"
src="https://github.com/user-attachments/assets/232bc14f-dc2c-4092-9b46-f6d652568633"
/>

isLoading
<img width="403" height="137" alt="CleanShot 2026-02-16 at 10 31 43"
src="https://github.com/user-attachments/assets/e9215b48-c2cc-4ede-91ff-08bbdb2382a0"
/>
---
 .../app/components/query/QueryEditor.tsx      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
index 6a986b49f..df7a4bd59 100644
--- a/apps/webapp/app/components/query/QueryEditor.tsx
+++ b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -354,9 +354,22 @@ const QueryEditorForm = forwardRef<
             variant="primary/small"
             disabled={isLoading || !query.trim()}
             shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }}
-            LeadingIcon={isLoading ? <Spinner className="size-4" color="white" /> : undefined}
+            className={
+              isLoading
+                ? "relative !text-transparent [&_*]:!border-transparent [&_*]:!text-transparent"
+                : undefined
+            }
           >
-            {isLoading ? "Querying..." : "Query"}
+            {isLoading ? (
+              <>
+                Query
+                <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                  <Spinner className="size-4 opacity-50" color="white" />
+                </span>
+              </>
+            ) : (
+              "Query"
+            )}
           </Button>
         </div>
       </fetcher.Form>
@@ -996,7 +1009,7 @@ function QueryTitle({
   if (isTitleLoading)
     return (
       <span className="flex items-center gap-2 text-text-dimmed">
-        <Spinner className="size-3" /> Generating title…
+        <Spinner className="size-4" /> Generating title…
       </span>
     );
 

From d4cd34094ec5f259867ea8d3e8a9575958873ea7 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Mon, 16 Feb 2026 10:53:41 +0000
Subject: [PATCH 16/25] Query API and SDK (#3060)

Summary
- Add API endpoint to run TRQL queries
- Implement SDK function for executing queries

## SDK
Added `query.execute()` which lets you query your Trigger.dev data using
TRQL (Trigger Query Language) and returns results as typed JSON rows or
CSV. It supports configurable scope (environment, project, or
organization), time filtering via `period` or `from`/`to` ranges, and a
`format` option for JSON or CSV output.

```typescript
import { query } from "@trigger.dev/sdk";
import type { QueryTable } from "@trigger.dev/sdk";

// Basic untyped query
const result = await query.execute("SELECT run_id, status FROM runs LIMIT 10");

// Type-safe query using QueryTable to pick specific columns
const typedResult = await query.execute<QueryTable<"runs", "run_id" | "status" | "triggered_at">>(
  "SELECT run_id, status, triggered_at FROM runs LIMIT 10"
);
typedResult.results.forEach(row => {
  console.log(row.run_id, row.status); // Fully typed
});

// Aggregation query with inline types
const stats = await query.execute<{ status: string; count: number }>(
  "SELECT status, COUNT(*) as count FROM runs GROUP BY status",
  { scope: "project", period: "30d" }
);

// CSV export
const csv = await query.execute(
  "SELECT run_id, status FROM runs",
  { format: "csv", period: "7d" }
);
console.log(csv.results); // Raw CSV string
```
---
 .changeset/afraid-gorillas-jump.md            |  34 +++
 .../webapp/app/components/runs/v3/RunIcon.tsx |   7 +-
 .../app/components/runs/v3/TaskRunStatus.tsx  |  24 +-
 apps/webapp/app/routes/api.v1.query.ts        |  77 +++++++
 packages/core/src/v3/apiClient/index.ts       |  35 +++
 packages/core/src/v3/schemas/index.ts         |   1 +
 packages/core/src/v3/schemas/query.ts         | 209 ++++++++++++++++++
 packages/trigger-sdk/src/v3/index.ts          |   1 +
 packages/trigger-sdk/src/v3/query.ts          | 184 +++++++++++++++
 references/hello-world/src/trigger/query.ts   | 183 +++++++++++++++
 10 files changed, 732 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/afraid-gorillas-jump.md
 create mode 100644 apps/webapp/app/routes/api.v1.query.ts
 create mode 100644 packages/core/src/v3/schemas/query.ts
 create mode 100644 packages/trigger-sdk/src/v3/query.ts
 create mode 100644 references/hello-world/src/trigger/query.ts

diff --git a/.changeset/afraid-gorillas-jump.md b/.changeset/afraid-gorillas-jump.md
new file mode 100644
index 000000000..1734f0534
--- /dev/null
+++ b/.changeset/afraid-gorillas-jump.md
@@ -0,0 +1,34 @@
+---
+"@trigger.dev/sdk": minor
+---
+
+Added `query.execute()` which lets you query your Trigger.dev data using TRQL (Trigger Query Language) and returns results as typed JSON rows or CSV. It supports configurable scope (environment, project, or organization), time filtering via `period` or `from`/`to` ranges, and a `format` option for JSON or CSV output.
+
+```typescript
+import { query } from "@trigger.dev/sdk";
+import type { QueryTable } from "@trigger.dev/sdk";
+
+// Basic untyped query
+const result = await query.execute("SELECT run_id, status FROM runs LIMIT 10");
+
+// Type-safe query using QueryTable to pick specific columns
+const typedResult = await query.execute<QueryTable<"runs", "run_id" | "status" | "triggered_at">>(
+  "SELECT run_id, status, triggered_at FROM runs LIMIT 10"
+);
+typedResult.results.forEach(row => {
+  console.log(row.run_id, row.status); // Fully typed
+});
+
+// Aggregation query with inline types
+const stats = await query.execute<{ status: string; count: number }>(
+  "SELECT status, COUNT(*) as count FROM runs GROUP BY status",
+  { scope: "project", period: "30d" }
+);
+
+// CSV export
+const csv = await query.execute(
+  "SELECT run_id, status FROM runs",
+  { format: "csv", period: "7d" }
+);
+console.log(csv.results); // Raw CSV string
+```
diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx
index 615def59c..846d7cae0 100644
--- a/apps/webapp/app/components/runs/v3/RunIcon.tsx
+++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx
@@ -4,6 +4,7 @@ import {
   InformationCircleIcon,
   RectangleStackIcon,
   Squares2X2Icon,
+  TableCellsIcon,
   TagIcon,
 } from "@heroicons/react/20/solid";
 import { AttemptIcon } from "~/assets/icons/AttemptIcon";
@@ -47,8 +48,6 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
     ) {
       return <TablerIcon name={spanNameIcon.iconName} className={className} />;
     }
-
-    <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
   }
 
   if (!name) return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
@@ -81,6 +80,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
       return <WaitpointTokenIcon className={cn(className, "text-sky-500")} />;
     case "function":
       return <FunctionIcon className={cn(className, "text-text-dimmed")} />;
+    case "query":
+      return <TableCellsIcon className={cn(className, "text-query")} />;
     //log levels
     case "debug":
     case "log":
@@ -110,7 +111,7 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
     case "task-hook-catchError":
       return <FunctionIcon className={cn(className, "text-error")} />;
     case "streams":
-        return <StreamsIcon className={cn(className, "text-text-dimmed")} />;
+      return <StreamsIcon className={cn(className, "text-text-dimmed")} />;
   }
 
   return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
diff --git a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
index fd39ce15d..73363e0da 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
@@ -12,6 +12,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import type { TaskRunStatus } from "@trigger.dev/database";
+import { runFriendlyStatus, type RunFriendlyStatus } from "@trigger.dev/core/v3";
 import assertNever from "assert-never";
 import { HourglassIcon } from "lucide-react";
 import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
@@ -248,26 +249,9 @@ export function runStatusFromFriendlyTitle(friendly: RunFriendlyStatus): TaskRun
   return result[0] as TaskRunStatus;
 }
 
-export const runFriendlyStatus = [
-  "Delayed",
-  "Queued",
-  "Pending version",
-  "Dequeued",
-  "Executing",
-  "Waiting",
-  "Reattempting",
-  "Paused",
-  "Canceled",
-  "Interrupted",
-  "Completed",
-  "Failed",
-  "System failure",
-  "Crashed",
-  "Expired",
-  "Timed out",
-] as const;
-
-export type RunFriendlyStatus = (typeof runFriendlyStatus)[number];
+// runFriendlyStatus and RunFriendlyStatus are imported from @trigger.dev/core/v3
+// and re-exported here for backward compatibility.
+export { runFriendlyStatus, type RunFriendlyStatus } from "@trigger.dev/core/v3";
 
 /**
  * Check if a value is a valid TaskRunStatus
diff --git a/apps/webapp/app/routes/api.v1.query.ts b/apps/webapp/app/routes/api.v1.query.ts
new file mode 100644
index 000000000..f2a792ce4
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.query.ts
@@ -0,0 +1,77 @@
+import { json } from "@remix-run/server-runtime";
+import { QueryError } from "@internal/clickhouse";
+import { z } from "zod";
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { executeQuery, type QueryScope } from "~/services/queryService.server";
+import { logger } from "~/services/logger.server";
+import { rowsToCSV } from "~/utils/dataExport";
+
+const BodySchema = z.object({
+  query: z.string(),
+  scope: z.enum(["organization", "project", "environment"]).default("environment"),
+  period: z.string().nullish(),
+  from: z.string().nullish(),
+  to: z.string().nullish(),
+  format: z.enum(["json", "csv"]).default("json"),
+});
+
+const { action, loader } = createActionApiRoute(
+  {
+    body: BodySchema,
+    corsStrategy: "all",
+  },
+  async ({ body, authentication }) => {
+    const { query, scope, period, from, to, format } = body;
+    const env = authentication.environment;
+
+    const queryResult = await executeQuery({
+      name: "api-query",
+      query,
+      scope: scope as QueryScope,
+      organizationId: env.organization.id,
+      projectId: env.project.id,
+      environmentId: env.id,
+      period,
+      from,
+      to,
+      history: {
+        source: "API",
+      },
+    });
+
+    if (!queryResult.success) {
+      const message =
+        queryResult.error instanceof QueryError
+          ? queryResult.error.message
+          : "An unexpected error occurred while executing the query.";
+
+      logger.error("Query API error", {
+        error: queryResult.error,
+        query,
+      });
+
+      return json(
+        { error: message },
+        { status: queryResult.error instanceof QueryError ? 400 : 500 }
+      );
+    }
+
+    const { result, periodClipped, maxQueryPeriod } = queryResult;
+
+    if (format === "csv") {
+      const csv = rowsToCSV(result.rows, result.columns);
+
+      return json({
+        format: "csv",
+        results: csv,
+      });
+    }
+
+    return json({
+      format: "json",
+      results: result.rows,
+    });
+  }
+);
+
+export { action, loader };
diff --git a/packages/core/src/v3/apiClient/index.ts b/packages/core/src/v3/apiClient/index.ts
index 8efbc762a..428493b71 100644
--- a/packages/core/src/v3/apiClient/index.ts
+++ b/packages/core/src/v3/apiClient/index.ts
@@ -30,6 +30,9 @@ import {
   ListScheduleOptions,
   QueueItem,
   QueueTypeName,
+  QueryExecuteRequestBody,
+  QueryExecuteResponseBody,
+  QueryExecuteCSVResponseBody,
   ReplayRunResponse,
   RescheduleRunRequestBody,
   ResetIdempotencyKeyResponse,
@@ -1406,6 +1409,38 @@ export class ApiClient {
     );
   }
 
+  async executeQuery(
+    query: string,
+    options?: {
+      scope?: "environment" | "project" | "organization";
+      period?: string;
+      from?: string;
+      to?: string;
+      format?: "json" | "csv";
+    },
+    requestOptions?: ZodFetchOptions
+  ): Promise<QueryExecuteResponseBody> {
+    const body = {
+      query,
+      scope: options?.scope ?? "environment",
+      period: options?.period,
+      from: options?.from,
+      to: options?.to,
+      format: options?.format ?? "json",
+    };
+
+    return zodfetch(
+      QueryExecuteResponseBody,
+      `${this.baseUrl}/api/v1/query`,
+      {
+        method: "POST",
+        headers: this.#getHeaders(false),
+        body: JSON.stringify(body),
+      },
+      mergeRequestOptions(this.defaultRequestOptions, requestOptions)
+    );
+  }
+
   #getHeaders(spanParentAsLink: boolean, additionalHeaders?: Record<string, string | undefined>) {
     const headers: Record<string, string> = {
       "Content-Type": "application/json",
diff --git a/packages/core/src/v3/schemas/index.ts b/packages/core/src/v3/schemas/index.ts
index c2b17a72b..11857d619 100644
--- a/packages/core/src/v3/schemas/index.ts
+++ b/packages/core/src/v3/schemas/index.ts
@@ -15,3 +15,4 @@ export * from "./webhooks.js";
 export * from "./checkpoints.js";
 export * from "./warmStart.js";
 export * from "./queues.js";
+export * from "./query.js";
diff --git a/packages/core/src/v3/schemas/query.ts b/packages/core/src/v3/schemas/query.ts
new file mode 100644
index 000000000..44b771e5f
--- /dev/null
+++ b/packages/core/src/v3/schemas/query.ts
@@ -0,0 +1,209 @@
+import { TypeOf, z } from "zod";
+import type { MachinePresetName } from "./common.js";
+import type { RuntimeEnvironmentType } from "./common.js";
+import type { IdempotencyKeyScope } from "../idempotency-key-catalog/catalog.js";
+
+/**
+ * Request body schema for executing a query
+ */
+export const QueryExecuteRequestBody = z.object({
+  query: z.string(),
+  scope: z.enum(["organization", "project", "environment"]).default("environment"),
+  period: z.string().nullish(),
+  from: z.string().nullish(),
+  to: z.string().nullish(),
+  format: z.enum(["json", "csv"]).default("json"),
+});
+
+export type QueryExecuteRequestBody = z.infer<typeof QueryExecuteRequestBody>;
+
+/**
+ * Response body schema for JSON format queries
+ */
+export const QueryExecuteJSONResponseBody = z.object({
+  format: z.literal("json"),
+  results: z.array(z.record(z.any())),
+});
+
+export type QueryExecuteJSONResponseBody = z.infer<typeof QueryExecuteJSONResponseBody>;
+
+/**
+ * Response body type for CSV format queries
+ */
+export const QueryExecuteCSVResponseBody = z.object({
+  format: z.literal("csv"),
+  results: z.string(),
+});
+
+export type QueryExecuteCSVResponseBody = z.infer<typeof QueryExecuteCSVResponseBody>;
+
+export const QueryExecuteResponseBody = z.discriminatedUnion("format", [
+  QueryExecuteJSONResponseBody,
+  QueryExecuteCSVResponseBody,
+]);
+export type QueryExecuteResponseBody = z.infer<typeof QueryExecuteResponseBody>;
+
+// ---------------------------------------------------------------------------
+// Query table row types
+// ---------------------------------------------------------------------------
+
+/**
+ * User-facing friendly run status values returned by the query system.
+ */
+export const runFriendlyStatus = [
+  "Delayed",
+  "Queued",
+  "Pending version",
+  "Dequeued",
+  "Executing",
+  "Waiting",
+  "Reattempting",
+  "Paused",
+  "Canceled",
+  "Interrupted",
+  "Completed",
+  "Failed",
+  "System failure",
+  "Crashed",
+  "Expired",
+  "Timed out",
+] as const;
+
+export type RunFriendlyStatus = (typeof runFriendlyStatus)[number];
+
+/**
+ * Full row type for the `runs` query table.
+ *
+ * Each property corresponds to a column available in TSQL queries against the
+ * `runs` table. Types are mapped from the underlying ClickHouse column types:
+ *
+ * - `String` → `string`
+ * - `UInt8` / `UInt32` / `Int64` / `Float64` → `number`
+ * - `DateTime64` → `string`
+ * - `Nullable(X)` → `X | null`
+ * - `Array(String)` → `string[]`
+ * - `JSON` → `Record<string, unknown>`
+ * - `LowCardinality(String)` with constrained values → narrow union type
+ */
+export interface RunsTableRow {
+  /** Unique run ID (e.g. `run_cm1a2b3c4d5e6f7g8h9i`) */
+  run_id: string;
+  /** Environment slug */
+  environment: string;
+  /** Project reference (e.g. `proj_howcnaxbfxdmwmxazktx`) */
+  project: string;
+  /** Environment type */
+  environment_type: RuntimeEnvironmentType;
+  /** Number of attempts (starts at 1) */
+  attempt_count: number;
+  /** Run status (friendly name) */
+  status: RunFriendlyStatus;
+  /** Whether the run is finished (0 or 1) */
+  is_finished: number;
+  /** Task identifier/slug */
+  task_identifier: string;
+  /** Queue name */
+  queue: string;
+  /** Batch ID (if part of a batch), or `null` */
+  batch_id: string | null;
+  /** Root run ID (for child runs), or `null` */
+  root_run_id: string | null;
+  /** Parent run ID (for child runs), or `null` */
+  parent_run_id: string | null;
+  /** Nesting depth (0 for root runs) */
+  depth: number;
+  /** Whether this is a root run (0 or 1) */
+  is_root_run: number;
+  /** Whether this is a child run (0 or 1) */
+  is_child_run: number;
+  /** Idempotency key */
+  idempotency_key: string;
+  /** Idempotency key scope (empty string means no idempotency key is set) */
+  idempotency_key_scope: IdempotencyKeyScope | "";
+  /** Region, or `null` */
+  region: string | null;
+  /** When the run was triggered (ISO 8601) */
+  triggered_at: string;
+  /** When the run was queued, or `null` */
+  queued_at: string | null;
+  /** When the run was dequeued, or `null` */
+  dequeued_at: string | null;
+  /** When execution began, or `null` */
+  executed_at: string | null;
+  /** When the run completed, or `null` */
+  completed_at: string | null;
+  /** Delayed execution until this time, or `null` */
+  delay_until: string | null;
+  /** Whether the run had a delay (0 or 1) */
+  has_delay: number;
+  /** When the run expired, or `null` */
+  expired_at: string | null;
+  /** TTL string for expiration (e.g. `"10m"`) */
+  ttl: string;
+  /** Time from execution start to completion in ms, or `null` */
+  execution_duration: number | null;
+  /** Time from trigger to completion in ms, or `null` */
+  total_duration: number | null;
+  /** Time from queued to dequeued in ms, or `null` */
+  queued_duration: number | null;
+  /** Compute usage duration in ms */
+  usage_duration: number;
+  /** Compute cost in dollars */
+  compute_cost: number;
+  /** Invocation cost in dollars */
+  invocation_cost: number;
+  /** Total cost in dollars (compute + invocation) */
+  total_cost: number;
+  /** The data returned from the task */
+  output: Record<string, unknown>;
+  /** Error data if the run failed */
+  error: Record<string, unknown>;
+  /** Tags added to the run */
+  tags: string[];
+  /** Code version in reverse date format (e.g. `"20240115.1"`) */
+  task_version: string;
+  /** SDK package version */
+  sdk_version: string;
+  /** CLI package version */
+  cli_version: string;
+  /** Machine preset the run executed on */
+  machine: MachinePresetName;
+  /** Whether this is a test run (0 or 1) */
+  is_test: number;
+  /** Concurrency key passed when triggering */
+  concurrency_key: string;
+  /** Max allowed compute duration in seconds, or `null` */
+  max_duration: number | null;
+  /** Bulk action group IDs that operated on this run */
+  bulk_action_group_ids: string[];
+}
+
+/** @internal Map of query table names to their full row types */
+type QueryTableMap = {
+  runs: RunsTableRow;
+};
+
+/**
+ * Type helper for Query results.
+ *
+ * @example
+ * ```typescript
+ * // All columns from the runs table
+ * type AllRuns = QueryTable<"runs">;
+ *
+ * // Only specific columns
+ * type MyResult = QueryTable<"runs", "status" | "run_id">;
+ *
+ * // Access a single field type
+ * type Status = QueryTable<"runs">["status"]; // RunFriendlyStatus
+ *
+ * // Use with query.execute
+ * const result = await query.execute<QueryTable<"runs", "status" | "run_id">>(
+ *   "SELECT status, run_id FROM runs"
+ * );
+ * ```
+ */
+export type QueryTable<
+  TTable extends keyof QueryTableMap,
+  TColumns extends keyof QueryTableMap[TTable] = keyof QueryTableMap[TTable],
+> = Pick<QueryTableMap[TTable], TColumns>;
diff --git a/packages/trigger-sdk/src/v3/index.ts b/packages/trigger-sdk/src/v3/index.ts
index b2d624769..43ee41e6e 100644
--- a/packages/trigger-sdk/src/v3/index.ts
+++ b/packages/trigger-sdk/src/v3/index.ts
@@ -17,6 +17,7 @@ export * from "./otel.js";
 export * from "./schemas.js";
 export * from "./heartbeats.js";
 export * from "./streams.js";
+export * from "./query.js";
 export type { Context };
 
 import type { Context } from "./shared.js";
diff --git a/packages/trigger-sdk/src/v3/query.ts b/packages/trigger-sdk/src/v3/query.ts
new file mode 100644
index 000000000..8d86416b2
--- /dev/null
+++ b/packages/trigger-sdk/src/v3/query.ts
@@ -0,0 +1,184 @@
+import type {
+  ApiRequestOptions,
+  Prettify,
+  QueryExecuteResponseBody,
+  QueryExecuteCSVResponseBody,
+} from "@trigger.dev/core/v3";
+import { apiClientManager, mergeRequestOptions } from "@trigger.dev/core/v3";
+import { tracer } from "./tracer.js";
+
+export type { QueryTable, RunsTableRow, RunFriendlyStatus } from "@trigger.dev/core/v3";
+
+export type QueryScope = "environment" | "project" | "organization";
+export type QueryFormat = "json" | "csv";
+
+/**
+ * Options for executing a TRQL query
+ */
+export type QueryOptions = {
+  /**
+   * The scope of the query - determines what data is accessible
+   * - "environment": Current environment only (default)
+   * - "project": All environments in the project
+   * - "organization": All projects in the organization
+   *
+   * @default "environment"
+   */
+  scope?: QueryScope;
+
+  /**
+   * Time period to query (e.g., "7d", "30d", "1h")
+   * Cannot be used with `from` or `to`
+   */
+  period?: string;
+
+  /**
+   * Start of time range as a Date object or Unix timestamp in milliseconds.
+   * Must be used with `to`.
+   */
+  from?: Date | number;
+
+  /**
+   * End of time range as a Date object or Unix timestamp in milliseconds.
+   * Must be used with `from`.
+   */
+  to?: Date | number;
+
+  /**
+   * Response format
+   * - "json": Returns structured data (default)
+   * - "csv": Returns CSV string
+   *
+   * @default "json"
+   */
+  format?: QueryFormat;
+};
+
+/**
+ * Execute a TRQL query and get the results as a CSV string.
+ *
+ * @param {string} query - The TRQL query string to execute
+ * @param {QueryOptions & { format: "csv" }} options - Query options with `format: "csv"`
+ * @param {ApiRequestOptions} [requestOptions] - Optional API request configuration
+ * @returns A promise resolving to `{ format: "csv", results: string }` where `results` is the raw CSV text
+ *
+ * @example
+ * ```typescript
+ * const csvResult = await query.execute(
+ *   "SELECT run_id, status, triggered_at FROM runs",
+ *   { format: "csv", period: "7d" }
+ * );
+ * const lines = csvResult.results.split('\n');
+ * ```
+ */
+function execute(
+  query: string,
+  options: QueryOptions & { format: "csv" },
+  requestOptions?: ApiRequestOptions
+): Promise<{ format: "csv"; results: string }>;
+
+/**
+ * Execute a TRQL query and return typed JSON rows.
+ *
+ * @template TRow - The shape of each row in the result set. Use {@link QueryTable} for type-safe column access (e.g. `QueryTable<"runs", "status" | "run_id">`)
+ * @param {string} query - The TRQL query string to execute
+ * @param {QueryOptions} [options] - Optional query configuration
+ * @param {ApiRequestOptions} [requestOptions] - Optional API request configuration
+ * @returns A promise resolving to `{ format: "json", results: Array<TRow> }`
+ *
+ * @example
+ * ```typescript
+ * // Basic query with defaults (environment scope, json format)
+ * const result = await query.execute("SELECT run_id, status FROM runs LIMIT 10");
+ * console.log(result.results); // Array<Record<string, any>>
+ *
+ * // Type-safe query using QueryTable with specific columns
+ * const typedResult = await query.execute<QueryTable<"runs", "run_id" | "status" | "triggered_at">>(
+ *   "SELECT run_id, status, triggered_at FROM runs LIMIT 10"
+ * );
+ * typedResult.results.forEach(row => {
+ *   console.log(row.run_id, row.status); // Fully typed!
+ * });
+ *
+ * // Inline type for aggregation queries
+ * const stats = await query.execute<{ status: string; count: number }>(
+ *   "SELECT status, COUNT(*) as count FROM runs GROUP BY status"
+ * );
+ * stats.results.forEach(row => {
+ *   console.log(row.status, row.count); // Fully type-safe
+ * });
+ *
+ * // Query with a custom time period
+ * const recent = await query.execute(
+ *   "SELECT COUNT(*) as count FROM runs",
+ *   { period: "3d" }
+ * );
+ * console.log(recent.results[0].count);
+ * ```
+ */
+function execute<TRow extends Record<string, any> = Record<string, any>>(
+  query: string,
+  options?: Omit<QueryOptions, "format"> | (QueryOptions & { format?: "json" }),
+  requestOptions?: ApiRequestOptions
+): Promise<{ format: "json"; results: Array<Prettify<TRow>> }>;
+
+// Implementation
+function execute<TRow extends Record<string, any> = Record<string, any>>(
+  query: string,
+  options?: QueryOptions,
+  requestOptions?: ApiRequestOptions
+): Promise<{ format: "json"; results: Array<TRow> } | { format: "csv"; results: string }> {
+  const apiClient = apiClientManager.clientOrThrow();
+
+  const from = dateToISOString(options?.from);
+  const to = dateToISOString(options?.to);
+
+  const $requestOptions = mergeRequestOptions(
+    {
+      tracer,
+      name: "query.execute()",
+      icon: "query",
+      attributes: {
+        scope: options?.scope ?? "environment",
+        format: options?.format ?? "json",
+        query,
+        period: options?.period,
+        from,
+        to,
+      },
+    },
+    requestOptions
+  );
+
+  return apiClient
+    .executeQuery(
+      query,
+      {
+        scope: options?.scope,
+        period: options?.period,
+        from,
+        to,
+        format: options?.format,
+      },
+      $requestOptions
+    )
+    .then((response) => {
+      return response;
+    }) as Promise<{ format: "json"; results: Array<TRow> } | { format: "csv"; results: string }>;
+}
+
+function dateToISOString(date: Date | number | undefined): string | undefined {
+  if (date === undefined) {
+    return undefined;
+  }
+
+  if (date instanceof Date) {
+    return date.toISOString();
+  }
+
+  return new Date(date).toISOString();
+}
+
+export const query = {
+  execute,
+};
diff --git a/references/hello-world/src/trigger/query.ts b/references/hello-world/src/trigger/query.ts
new file mode 100644
index 000000000..bad268470
--- /dev/null
+++ b/references/hello-world/src/trigger/query.ts
@@ -0,0 +1,183 @@
+import { logger, query, task } from "@trigger.dev/sdk";
+import type { QueryTable } from "@trigger.dev/sdk";
+
+// Simple query example - tests different from/to formats
+export const simpleQueryTask = task({
+  id: "simple-query",
+  run: async () => {
+    logger.info("Running simple query example");
+
+    // 1. Default: no from/to, uses default period
+    const defaultResult = await query.execute("SELECT * FROM runs LIMIT 5");
+    logger.info("Default (no from/to)", {
+      rowCount: defaultResult.results.length,
+      firstRow: defaultResult.results[0],
+    });
+
+    // 2. Using Date objects for from/to
+    const withDates = await query.execute<
+      QueryTable<"runs", "run_id" | "status" | "triggered_at">
+    >("SELECT run_id, status, triggered_at FROM runs LIMIT 5", {
+      from: new Date("2025-01-01T00:00:00Z"),
+      to: new Date(),
+    });
+    logger.info("With Date objects", {
+      rowCount: withDates.results.length,
+      firstRow: withDates.results[0],
+    });
+
+    // 3. Using Unix timestamps in milliseconds (Date.now() returns ms)
+    const now = Date.now();
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000;
+    const withTimestamps = await query.execute<
+      QueryTable<"runs", "run_id" | "status" | "triggered_at">
+    >("SELECT run_id, status, triggered_at FROM runs LIMIT 5", {
+      from: sevenDaysAgo,
+      to: now,
+    });
+    logger.info("With Unix timestamps (ms)", {
+      rowCount: withTimestamps.results.length,
+      firstRow: withTimestamps.results[0],
+    });
+
+    // 4. Mixing Date and number
+    const mixed = await query.execute<
+      QueryTable<"runs", "run_id" | "status" | "triggered_at">
+    >("SELECT run_id, status, triggered_at FROM runs LIMIT 5", {
+      from: new Date("2025-01-01"),
+      to: Date.now(),
+    });
+    logger.info("Mixed Date + timestamp", {
+      rowCount: mixed.results.length,
+      firstRow: mixed.results[0],
+    });
+
+    return {
+      defaultRows: defaultResult.results.length,
+      dateRows: withDates.results.length,
+      timestampRows: withTimestamps.results.length,
+      mixedRows: mixed.results.length,
+    };
+  },
+});
+
+// JSON query with all options - aggregation queries use inline types
+export const fullJsonQueryTask = task({
+  id: "full-json-query",
+  run: async () => {
+    logger.info("Running full JSON query example with all options");
+
+    // For aggregation queries, use inline types since the result shape
+    // doesn't match a table row. For non-aggregated queries, use QueryTable.
+    const result = await query.execute<{
+      status: string;
+      count: number;
+      avg_duration: number;
+    }>(
+      `SELECT
+        status,
+        COUNT(*) as count,
+        AVG(total_duration) as avg_duration
+      FROM runs
+      WHERE status IN ('Completed', 'Failed')
+      GROUP BY status`,
+      {
+        scope: "environment", // Query current environment only
+        period: "30d", // Last 30 days of data
+        // format defaults to "json"
+      }
+    );
+
+    logger.info("Query completed", {
+      format: result.format,
+      rowCount: result.results.length,
+    });
+
+    // Log the aggregated results - now fully type-safe!
+    result.results.forEach((row) => {
+      logger.info("Status breakdown", {
+        status: row.status, // string
+        count: row.count, // number
+        averageDuration: row.avg_duration, // number
+      });
+    });
+
+    return {
+      summary: result.results,
+    };
+  },
+});
+
+// CSV export example
+export const csvQueryTask = task({
+  id: "csv-query",
+  run: async () => {
+    logger.info("Running CSV query example");
+
+    // Query with CSV format - automatically typed as discriminated union!
+    const result = await query.execute(
+      "SELECT run_id, status, triggered_at, total_duration FROM runs LIMIT 10",
+      {
+        scope: "project", // Query all environments in the project
+        period: "7d", // Last 7 days
+        format: "csv", // CSV format
+      }
+    );
+
+    // result.format is "csv" and result.results is automatically typed as string!
+    logger.info("CSV query completed", {
+      format: result.format,
+      dataLength: result.results.length,
+      results: result.results,
+    });
+
+    return {
+      format: result.format,
+      csv: result.results,
+    };
+  },
+});
+
+// Organization-wide query with QueryTable for full row access
+export const orgQueryTask = task({
+  id: "org-query",
+  run: async () => {
+    logger.info("Running organization-wide query");
+
+    // Use QueryTable to get typed rows for specific columns
+    const result = await query.execute<
+      QueryTable<"runs", "run_id" | "project" | "environment" | "status" | "task_identifier" | "machine">
+    >(
+      `SELECT run_id, project, environment, status, task_identifier, machine
+      FROM runs
+      ORDER BY triggered_at DESC
+      LIMIT 50`,
+      {
+        scope: "organization", // Query across all projects
+        from: new Date("2025-02-01T00:00:00Z"), // Custom date range
+        to: new Date("2025-02-11T23:59:59Z"),
+      }
+    );
+
+    logger.info("Organization query completed", {
+      format: result.format,
+      runCount: result.results.length,
+    });
+
+    // Fully typed - status is RunFriendlyStatus, machine is MachinePresetName
+    result.results.forEach((row) => {
+      logger.info("Run info", {
+        runId: row.run_id, // string
+        project: row.project, // string
+        environment: row.environment, // string
+        status: row.status, // "Completed" | "Failed" | "Executing" | ...
+        task: row.task_identifier, // string
+        machine: row.machine, // "micro" | "small-1x" | "small-2x" | ...
+      });
+    });
+
+    return {
+      runs: result.results,
+    };
+  },
+});

From 4dfa65809ac2e843cfa3fe7a643c435fe2c86871 Mon Sep 17 00:00:00 2001
From: DKP <8297864+D-K-P@users.noreply.github.com>
Date: Mon, 16 Feb 2026 11:31:02 +0000
Subject: [PATCH 17/25] Dropped bracket highlight and border by 50% (#3068)

---
 .../app/components/code/codeMirrorTheme.ts    | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/code/codeMirrorTheme.ts b/apps/webapp/app/components/code/codeMirrorTheme.ts
index ed14ea0ac..2faed6eaa 100644
--- a/apps/webapp/app/components/code/codeMirrorTheme.ts
+++ b/apps/webapp/app/components/code/codeMirrorTheme.ts
@@ -67,9 +67,10 @@ export function darkTheme(): Extension {
       },
 
       ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
-      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
-        backgroundColor: selection,
-      },
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+        {
+          backgroundColor: selection,
+        },
 
       ".cm-panels": { backgroundColor: darkBackground, color: ivory },
       ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
@@ -87,8 +88,8 @@ export function darkTheme(): Extension {
       ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
 
       "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-        backgroundColor: "#bad0f847",
-        outline: "1px solid #515a6b",
+        backgroundColor: "rgba(18, 19, 23, 0.9)",
+        outline: "1px solid rgba(81, 90, 107, 0.5)",
       },
 
       ".cm-gutters": {
@@ -166,14 +167,20 @@ export function darkTheme(): Extension {
         backgroundColor: scrollbarBg,
       },
     },
-    { dark: true }
+    { dark: true },
   );
 
   /// The highlighting style for code in the JSON Hero theme.
   const jsonHeroHighlightStyle = HighlightStyle.define([
     { tag: tags.keyword, color: violet },
     {
-      tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+      tag: [
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+      ],
       color: lilac,
     },
     { tag: [tags.function(tags.variableName), tags.labelName], color: malibu },

From 667a93ca3c50ece1aac0f665b95771eeba9e743a Mon Sep 17 00:00:00 2001
From: Iss <74388823+isshaddad@users.noreply.github.com>
Date: Mon, 16 Feb 2026 06:41:31 -0500
Subject: [PATCH 18/25] docs: add ClickHouse migration troubleshooting tip
 (#3011)

Adds troubleshooting tip for when ClickHouse migrations report "no
migrations to run" but the schema is missing. This happens when the
goose migration tracker is out of sync with the actual schema state.

<!-- devin-review-badge-begin -->

---

<a
href="https://app.devin.ai/review/triggerdotdev/trigger.dev/pull/3011"
target="_blank">
  <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 -->
---
 docs/self-hosting/docker.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/self-hosting/docker.mdx b/docs/self-hosting/docker.mdx
index add4e06ba..df9ae246c 100644
--- a/docs/self-hosting/docker.mdx
+++ b/docs/self-hosting/docker.mdx
@@ -356,6 +356,12 @@ TRIGGER_IMAGE_TAG=v4.0.0
 
 - **Deploy fails with `ERROR: schema "graphile_worker" does not exist`.** This error occurs when Graphile Worker migrations fail to run during webapp startup. Check the webapp logs for certificate-related errors like `self-signed certificate in certificate chain`. This is often caused by PostgreSQL SSL certificate issues when using an external PostgreSQL instance with SSL enabled. Ensure that both the webapp and supervisor containers have access to the same CA certificate used by your PostgreSQL instance. You can configure this by mounting the certificate file and setting the `NODE_EXTRA_CA_CERTS` environment variable to point to the certificate path. Once the certificate issue is resolved, the migrations will complete and create the required `graphile_worker` schema.
 
+- **ClickHouse migrations say "no migrations to run" but schema is missing.** The goose migration tracker is out of sync. Exec into the webapp container, set the GOOSE env vars (from webapp startup logs), and run `goose reset && goose up`.
+
+  <Warning>
+    **Data Loss Warning:** The `goose reset` command is destructive and will drop the entire schema. Make sure to backup your data and confirm you are running this in a non-production environment before executing this command.
+  </Warning>
+
 ## CLI usage
 
 This section highlights some of the CLI commands and options that are useful when self-hosting. Please check the [CLI reference](/cli-introduction) for more in-depth documentation.

From 921285ca32762264f3e70c1af3bccc6bc6dd9e14 Mon Sep 17 00:00:00 2001
From: Pramod Dhungana <86797688+dhunganapramod9@users.noreply.github.com>
Date: Mon, 16 Feb 2026 06:42:26 -0500
Subject: [PATCH 19/25] add friendly messages for common http error codes
 (#3001)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #<issue>

## ✅ Checklist

- [ x] I have followed every step in the [contributing
guide](https://github.com/triggerdotdev/trigger.dev/blob/main/CONTRIBUTING.md)
- [x ] The PR title follows the convention.
- [ x] I ran and tested the code works

---

## Testing

Verified the error message mapping logic locally and ensured existing
behavior remains unchanged.


---

## Changelog

Added friendly messages for HTTP 401, 403, and 429 errors.





<!-- devin-review-badge-begin -->

---

<a
href="https://app.devin.ai/review/triggerdotdev/trigger.dev/pull/3001">
  <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 -->
---
 apps/webapp/app/utils/httpErrors.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/webapp/app/utils/httpErrors.ts b/apps/webapp/app/utils/httpErrors.ts
index 637b6bf4b..5131730e3 100644
--- a/apps/webapp/app/utils/httpErrors.ts
+++ b/apps/webapp/app/utils/httpErrors.ts
@@ -5,11 +5,26 @@ export function friendlyErrorDisplay(statusCode: number, statusText?: string) {
         title: "400: Bad request",
         message: statusText ?? "The request was invalid.",
       };
+    case 401:
+      return {
+        title: "401: Unauthorized",
+        message: statusText ?? "Please sign in to continue.",
+      };
+    case 403:
+      return {
+        title: "403: Forbidden",
+        message: statusText ?? "You don't have permission to access this resource.",
+      };
     case 404:
       return {
         title: "404: Page not found",
         message: statusText ?? "The page you're looking for doesn't exist.",
       };
+    case 429:
+      return {
+        title: "429: Too many requests",
+        message: statusText ?? "Please wait a moment and try again.",
+      };
     case 500:
       return {
         title: "500: Server error",

From 72ce6a8300656ec000936378059b415a16b583f9 Mon Sep 17 00:00:00 2001
From: Oskar Otwinowski <oskar.otwinowski@gmail.com>
Date: Mon, 16 Feb 2026 18:51:33 +0100
Subject: [PATCH 20/25] fix(vercel): Keep search params for OAuth redirects
 (#3071)

---
 apps/webapp/app/routes/login._index/route.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx
index 8878ffc88..592ecd3f7 100644
--- a/apps/webapp/app/routes/login._index/route.tsx
+++ b/apps/webapp/app/routes/login._index/route.tsx
@@ -128,7 +128,7 @@ export default function LoginPage() {
               <div className="relative w-full">
                 {data.lastAuthMethod === "github" && <LastUsedBadge />}
                 <Form
-                  action={`/auth/github${data.redirectTo ? `?redirectTo=${data.redirectTo}` : ""}`}
+                  action={`/auth/github${data.redirectTo ? `?redirectTo=${encodeURIComponent(data.redirectTo)}` : ""}`}
                   method="post"
                   className="w-full"
                 >
@@ -148,7 +148,7 @@ export default function LoginPage() {
               <div className="relative w-full">
                 {data.lastAuthMethod === "google" && <LastUsedBadge />}
                 <Form
-                  action={`/auth/google${data.redirectTo ? `?redirectTo=${data.redirectTo}` : ""}`}
+                  action={`/auth/google${data.redirectTo ? `?redirectTo=${encodeURIComponent(data.redirectTo)}` : ""}`}
                   method="post"
                   className="w-full"
                 >

From 7af789bc3e56db89255744de4544c09bc32758d5 Mon Sep 17 00:00:00 2001
From: Saadi Myftija <saadi@myftija.com>
Date: Mon, 16 Feb 2026 19:05:40 +0100
Subject: [PATCH 21/25] fix(deployments): external build token generation issue
 (#3070)

Fixes an issue introduced in #3024.

The behavior for local builds in older CLI versions relies on
`externalBuildData` to be defined to distinguish from the self-hosting
local build path, even though it doesn't actually use the token.
---
 .changeset/tricky-suits-design.md             |  7 +++++
 .../app/v3/services/deployment.server.ts      | 28 ++++++++++---------
 .../services/initializeDeployment.server.ts   | 24 +++++++++++-----
 packages/cli-v3/src/commands/deploy.ts        | 28 +++++++++++++------
 packages/core/src/v3/schemas/api.ts           |  3 +-
 5 files changed, 61 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/tricky-suits-design.md

diff --git a/.changeset/tricky-suits-design.md b/.changeset/tricky-suits-design.md
new file mode 100644
index 000000000..d00603c07
--- /dev/null
+++ b/.changeset/tricky-suits-design.md
@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Fixed a minor issue in the deployment command on distinguishing between local builds for the cloud vs local builds for self-hosting setups.
diff --git a/apps/webapp/app/v3/services/deployment.server.ts b/apps/webapp/app/v3/services/deployment.server.ts
index 56888284b..985e0e475 100644
--- a/apps/webapp/app/v3/services/deployment.server.ts
+++ b/apps/webapp/app/v3/services/deployment.server.ts
@@ -110,9 +110,9 @@ export class DeploymentService extends BaseService {
       const createRemoteBuildIfNeeded = deployment.buildServerMetadata?.isNativeBuild
         ? okAsync(undefined)
         : fromPromise(createRemoteImageBuild(authenticatedEnv.project), (error) => ({
-          type: "failed_to_create_remote_build" as const,
-          cause: error,
-        }));
+            type: "failed_to_create_remote_build" as const,
+            cause: error,
+          }));
 
       const existingBuildServerMetadata = deployment.buildServerMetadata as
         | BuildServerMetadata
@@ -134,7 +134,7 @@ export class DeploymentService extends BaseService {
                       },
                     }
                   : {}),
-                externalBuildData,
+                ...(externalBuildData ? { externalBuildData } : {}),
                 status: "BUILDING",
                 installedAt: new Date(),
               },
@@ -496,14 +496,16 @@ export class DeploymentService extends BaseService {
         type: "other" as const,
         cause: error,
       })
-    ).andThen((deployment) => {
-      if (!deployment) {
-        return errAsync({ type: "deployment_not_found" as const });
-      }
-      return okAsync(deployment);
-    }).map((deployment) => ({
-      ...deployment,
-      buildServerMetadata: BuildServerMetadata.safeParse(deployment.buildServerMetadata).data,
-    }));
+    )
+      .andThen((deployment) => {
+        if (!deployment) {
+          return errAsync({ type: "deployment_not_found" as const });
+        }
+        return okAsync(deployment);
+      })
+      .map((deployment) => ({
+        ...deployment,
+        buildServerMetadata: BuildServerMetadata.safeParse(deployment.buildServerMetadata).data,
+      }));
   }
 }
diff --git a/apps/webapp/app/v3/services/initializeDeployment.server.ts b/apps/webapp/app/v3/services/initializeDeployment.server.ts
index 939cfd7e6..987925aa7 100644
--- a/apps/webapp/app/v3/services/initializeDeployment.server.ts
+++ b/apps/webapp/app/v3/services/initializeDeployment.server.ts
@@ -1,4 +1,8 @@
-import { BuildServerMetadata, type InitializeDeploymentRequestBody } from "@trigger.dev/core/v3";
+import {
+  BuildServerMetadata,
+  type InitializeDeploymentRequestBody,
+  type ExternalBuildData,
+} from "@trigger.dev/core/v3";
 import { customAlphabet } from "nanoid";
 import { env } from "~/env.server";
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
@@ -89,12 +93,18 @@ export class InitializeDeploymentService extends BaseService {
         );
       }
 
-      // For the `PENDING` initial status, defer the creation of the Depot build until the deployment is started.
-      // This helps avoid Depot token expiration issues.
-      const externalBuildData =
-        payload.initialStatus === "PENDING" || payload.isNativeBuild
-          ? undefined
-          : await createRemoteImageBuild(environment.project);
+      // For the `PENDING` initial status, defer the creation of the Depot build until the deployment is started to avoid token expiration issues.
+      // For local and native builds we don't need to generate the Depot tokens. We still need to create an empty object sadly due to a bug in older CLI versions.
+      const generateExternalBuildToken =
+        payload.initialStatus === "PENDING" || payload.isNativeBuild || payload.isLocalBuild;
+
+      const externalBuildData = generateExternalBuildToken
+        ? ({
+            projectId: "-",
+            buildToken: "-",
+            buildId: "-",
+          } satisfies ExternalBuildData)
+        : await createRemoteImageBuild(environment.project);
 
       const triggeredBy = payload.userId
         ? await this._prisma.user.findFirst({
diff --git a/packages/cli-v3/src/commands/deploy.ts b/packages/cli-v3/src/commands/deploy.ts
index f4de03281..7c71b4566 100644
--- a/packages/cli-v3/src/commands/deploy.ts
+++ b/packages/cli-v3/src/commands/deploy.ts
@@ -197,11 +197,18 @@ export function configureDeployCommand(program: Command) {
       )
       // Local build options
       .addOption(
-        new CommandOption("--force-local-build", "Deprecated alias for --local-build").implies({
-          localBuild: true,
-        })
+        new CommandOption("--force-local-build", "Deprecated alias for --local-build")
+          .implies({
+            localBuild: true,
+          })
+          .conflicts("nativeBuildServer")
+          .hideHelp()
+      )
+      .addOption(
+        new CommandOption("--local-build", "Build the deployment image locally").conflicts(
+          "nativeBuildServer"
+        )
       )
-      .addOption(new CommandOption("--local-build", "Build the deployment image locally"))
       .addOption(new CommandOption("--push", "Push the image after local builds").hideHelp())
       .addOption(
         new CommandOption("--no-push", "Do not push the image after local builds").hideHelp()
@@ -420,14 +427,19 @@ async function _deployCommand(dir: string, options: DeployCommandOptions) {
       gitMeta,
       type: features.run_engine_v2 ? "MANAGED" : "V1",
       runtime: buildManifest.runtime,
+      isLocalBuild: options.localBuild,
       isNativeBuild: false,
       triggeredVia: getTriggeredVia(),
     },
     envVars.TRIGGER_EXISTING_DEPLOYMENT_ID
   );
+
+  // When `externalBuildData` is not present the deployment implicitly goes into the local build path
+  // which is used in self-hosted setups. There are a few subtle differences between local builds for the cloud
+  // and local builds for self-hosted setups. We need to make the separation of the two paths clearer to avoid confusion.
   const isLocalBuild = options.localBuild || !deployment.externalBuildData;
-  // Would be best to actually store this separately in the deployment object. This is an okay proxy for now.
-  const remoteBuildExplicitlySkipped = options.localBuild && !!deployment.externalBuildData;
+  const authenticateToTriggerRegistry = options.localBuild;
+  const skipServerSideRegistryPush = options.localBuild;
 
   // Fail fast if we know local builds will fail
   if (isLocalBuild) {
@@ -559,7 +571,7 @@ async function _deployCommand(dir: string, options: DeployCommandOptions) {
     network: options.network,
     builder: options.builder,
     push: options.push,
-    authenticateToRegistry: remoteBuildExplicitlySkipped,
+    authenticateToRegistry: authenticateToTriggerRegistry,
   });
 
   logger.debug("Build result", buildResult);
@@ -657,7 +669,7 @@ async function _deployCommand(dir: string, options: DeployCommandOptions) {
     {
       imageDigest: buildResult.digest,
       skipPromotion: options.skipPromotion,
-      skipPushToRegistry: remoteBuildExplicitlySkipped,
+      skipPushToRegistry: skipServerSideRegistryPush,
     },
     (logMessage) => {
       if (options.plain || isCI) {
diff --git a/packages/core/src/v3/schemas/api.ts b/packages/core/src/v3/schemas/api.ts
index 76f93af3f..2a7bcb965 100644
--- a/packages/core/src/v3/schemas/api.ts
+++ b/packages/core/src/v3/schemas/api.ts
@@ -601,8 +601,9 @@ const InitializeDeploymentRequestBodyBase = z.object({
   type: z.enum(["MANAGED", "UNMANAGED", "V1"]).optional(),
   runtime: z.string().optional(),
   initialStatus: z.enum(["PENDING", "BUILDING"]).optional(),
+  isLocalBuild: z.boolean().optional(),
   triggeredVia: DeploymentTriggeredVia.optional(),
-  buildId: z.string().optional()
+  buildId: z.string().optional(),
 });
 type BaseOutput = z.output<typeof InitializeDeploymentRequestBodyBase>;
 

From 4c986ad1ebd1ce3d45589ccd7d82701952402775 Mon Sep 17 00:00:00 2001
From: Eric Allam <eric@trigger.dev>
Date: Tue, 17 Feb 2026 12:52:58 +0000
Subject: [PATCH 22/25] fix(docs): Fix loop to iterate over results.runs
 (#3077)

To get access to the runs from `batch.triggerAndWait` use `results.runs`
---
 docs/triggering.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/triggering.mdx b/docs/triggering.mdx
index 602838e4f..874779de6 100644
--- a/docs/triggering.mdx
+++ b/docs/triggering.mdx
@@ -541,7 +541,7 @@ export const parentTask = task({
       { id: "child-task-2", payload: { bar: 42 } }, // 👈 The payload is typed correctly based on the task `id`
     ]);
 
-    for (const result of results) {
+    for (const result of results.runs) {
       if (result.ok) {
         // 👇 Narrow the type of the result based on the taskIdentifier
         switch (result.taskIdentifier) {

From 6e0b54b081a5129ad1df83fa18f72422e99dfe56 Mon Sep 17 00:00:00 2001
From: Oskar Otwinowski <oskar.otwinowski@gmail.com>
Date: Tue, 17 Feb 2026 18:19:00 +0100
Subject: [PATCH 23/25] docs(vercel): add comprehensive Vercel integration docs
 (#3081)

Expand documentation for the Vercel integration with detailed usage,
installation, environment variable sync, atomic deployments, and
environment mapping. Replace the previous "coming soon" placeholder with
complete instructions and UI flow for connecting via the Trigger.dev
dashboard or the Vercel Marketplace. Explain required GitHub
integration,
how env vars sync in both directions, which vars are excluded, and how
to control sync behavior. Describe atomic deployments (default for
production), how they gate Vercel deployments to ensure task/app
consistency, and note related configuration changes. Add tips and notes
to guide setup and troubleshooting.

This provides users with actionable guidance to connect Vercel, map
environments, and keep app and tasks in sync without custom CI scripts.
---
 docs/vercel-integration.mdx | 139 +++++++++++++++++++++++++++++++++++-
 1 file changed, 136 insertions(+), 3 deletions(-)

diff --git a/docs/vercel-integration.mdx b/docs/vercel-integration.mdx
index 36b769c23..5511b7f4b 100644
--- a/docs/vercel-integration.mdx
+++ b/docs/vercel-integration.mdx
@@ -1,8 +1,141 @@
 ---
 title: "Vercel integration"
-description: "When you deploy to Vercel, automatically deploy your associated tasks."
+description: "Automatically deploy your tasks whenever you deploy to Vercel."
 ---
 
-import ComingSoon from "/snippets/coming-soon-in-review.mdx"
+## How it works
 
-<ComingSoon />
+The Vercel integration connects your Vercel project to your Trigger.dev project so that every Vercel deployment automatically triggers a Trigger.dev deployment. It also syncs environment variables from Vercel into Trigger.dev and supports atomic deployments to keep your app and tasks in sync.
+
+This eliminates the need to manually run the `trigger.dev deploy` command or maintain custom CI/CD workflows for Vercel-based projects.
+
+<Note>
+  The Vercel integration requires the [GitHub integration](/github-integration) to be connected as well, since Trigger.dev builds your tasks from your GitHub repository.
+</Note>
+
+## Installation
+
+You can connect Vercel from two entry points:
+
+### From the Trigger.dev dashboard
+
+<Steps>
+
+<Step title="Connect Vercel">
+  Go to your project's **Settings** page and click **Connect Vercel**. This will redirect you to Vercel to authorize the Trigger.dev app.
+</Step>
+
+<Step title="Select a Vercel project">
+  Choose which Vercel project to connect to your Trigger.dev project.
+</Step>
+
+<Step title="Map environments">
+  If your Vercel project has custom environments, choose which one maps to your Trigger.dev staging environment.
+</Step>
+
+<Step title="Sync environment variables">
+  Review the environment variables that will be pulled from Vercel into Trigger.dev. You can deselect any variables you don't want to sync.
+</Step>
+
+<Step title="Configure build settings">
+  Optionally adjust [build settings](#build-settings) for atomic deployments, env var pulling, and new env var discovery.
+</Step>
+
+<Step title="Connect GitHub">
+  If your GitHub repository isn't already connected, you'll be prompted to connect it.
+</Step>
+
+</Steps>
+
+### From the Vercel Marketplace
+
+<Steps>
+
+<Step title="Install the integration">
+  Find Trigger.dev on the Vercel Marketplace and install it. This will redirect you to Trigger.dev to complete setup.
+</Step>
+
+<Step title="Select your Trigger.dev organization and project">
+  Choose which Trigger.dev organization and project to connect. If you're new to Trigger.dev, you'll be guided through creating an organization and project.
+</Step>
+
+<Step title="Connect GitHub">
+  If your GitHub repository isn't already connected, you'll be prompted to connect it.
+</Step>
+
+</Steps>
+
+<Note>
+  When installing from the Vercel Marketplace, default build settings are applied automatically. You can adjust them later in your project settings.
+</Note>
+
+## Environment variable sync
+
+The integration syncs environment variables in both directions:
+
+**Vercel → Trigger.dev**: Environment variables from your Vercel project are pulled into Trigger.dev. This happens during the initial setup and optionally before each build. Variables are synced per-environment (production, staging, preview).
+
+**Trigger.dev → Vercel**: Trigger.dev syncs API keys (like `TRIGGER_SECRET_KEY`) to your Vercel project so your app can communicate with Trigger.dev.
+
+The following variables are excluded from the Vercel → Trigger.dev sync:
+- `TRIGGER_SECRET_KEY`, `TRIGGER_VERSION`, `TRIGGER_PREVIEW_BRANCH` (managed by Trigger.dev)
+- Sensitive/secret-type variables (Vercel API limitation)
+
+You can control sync behavior per-variable from your project's Vercel settings. Deselecting a variable prevents its value from being updated during future syncs.
+
+<Tip>
+  For dynamic environment variables (e.g., from NeonDB branching), use the `syncEnvVars` build extension instead. Learn more about [environment variables](/deploy-environment-variables).
+</Tip>
+
+## Atomic deployments
+
+Atomic deployments ensure your Vercel app and Trigger.dev tasks are deployed in sync. When enabled, Trigger.dev gates your Vercel deployment until the task build completes, then triggers a Vercel redeployment with the correct `TRIGGER_VERSION` set. This guarantees your app always uses the matching version of your tasks.
+
+Atomic deployments are enabled for the production environment by default.
+
+<Note>
+  When atomic deployments are enabled, the integration automatically disables `Auto-assign Custom Production Domains` on your Vercel project. This is required so that Vercel doesn't promote a deployment before the Trigger.dev build is ready.
+</Note>
+
+Previously, setting up atomic deployments with Vercel required custom GitHub Actions workflows. The Vercel integration automates this entirely. For more details on how atomic deployments work, see [Atomic deploys](/deployment/atomic-deployment).
+
+## Environment mapping
+
+The integration maps Vercel environments to Trigger.dev environments:
+
+| Vercel environment | Trigger.dev environment |
+| --- | --- |
+| Production | Production |
+| Custom environment | Staging (you choose which one) |
+| Preview | Preview |
+| Development | Development |
+
+If your Vercel project has a custom environment, you can select which one maps to your Trigger.dev staging environment during setup or in your project settings.
+
+<Note>
+  Preview deployments require the preview environment to be enabled on your project. Learn more about [preview branches](/deployment/preview-branches).
+</Note>
+
+## Build settings
+
+You can configure the following settings per-environment from your project's Vercel settings:
+
+- **Atomic deployments**: Controls whether Trigger.dev and Vercel deployments are synchronized. Enabled for production by default.
+- **Pull env vars before build**: When enabled, Trigger.dev pulls the latest environment variables from Vercel before each build. Enabled for production, staging, and preview by default.
+- **Discover new env vars**: When enabled, new environment variables found in Vercel that don't yet exist in Trigger.dev are created automatically during builds. Only available for environments that also have env var pulling enabled. Enabled for production, staging, and preview by default.
+
+## Disconnecting
+
+You can disconnect the Vercel integration from either side:
+
+- **From Trigger.dev**: Go to your project **Settings** and disconnect Vercel.
+- **From Vercel**: Uninstall the Trigger.dev integration from your Vercel dashboard. This is automatically detected and the connection is removed on the Trigger.dev side.
+
+Disconnecting stops automatic deployments, environment variable syncing, and deployment checks. Your existing deployments and environment variables are not affected.
+
+## Related
+
+- [GitHub integration](/github-integration)
+- [Atomic deploys](/deployment/atomic-deployment)
+- [Environment variables](/deploy-environment-variables)
+- [Preview branches](/deployment/preview-branches)

From b793f33e59f89f58fef4cf49b2c6df5d9b618b9d Mon Sep 17 00:00:00 2001
From: Mihai Popescu <mihai.popescu.dev@gmail.com>
Date: Wed, 18 Feb 2026 11:48:52 +0200
Subject: [PATCH 24/25] Logs: new materialized view and some UI improvements
 (#3069)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This will prevent internal logs to be added to the
task_events_search_table

Closes #<issue>

## ✅ Checklist

- [x] I have followed every step in the [contributing
guide](https://github.com/triggerdotdev/trigger.dev/blob/main/CONTRIBUTING.md)
- [x] The PR title follows the convention.
- [x] I ran and tested the code works

---

## Testing

Ran the migration, deleted the old invalid rows and ran new tasks.
The undesired logs are not added to the table.

---

## Changelog

Updated the MATERIALIZED VIEW to also filter for `trace_id != ''`

---------

Co-authored-by: Matt Aitken <matt@mattaitken.com>
---
 .../app/components/LogLevelTooltipInfo.tsx    |  41 +-
 apps/webapp/app/components/code/CodeBlock.tsx |   6 +-
 .../app/components/logs/LogDetailView.tsx     | 479 +++++-------------
 apps/webapp/app/components/logs/LogLevel.tsx  |  16 +
 .../app/components/logs/LogsLevelFilter.tsx   |   3 +
 .../app/components/logs/LogsSearchInput.tsx   |  67 ++-
 apps/webapp/app/components/logs/LogsTable.tsx |  38 +-
 .../app/components/navigation/SideMenu.tsx    |  25 +-
 .../app/components/primitives/DateTime.tsx    |  40 +-
 .../app/components/runs/v3/PacketDisplay.tsx  |   4 +
 .../app/components/runs/v3/SharedFilters.tsx  |   6 +-
 apps/webapp/app/env.server.ts                 |  13 +-
 .../presenters/v3/LogsListPresenter.server.ts | 103 ++--
 .../route.tsx                                 |  16 +-
 ...ectParam.env.$envParam.logs.$logId.run.tsx | 202 --------
 ...projectParam.env.$envParam.logs.$logId.tsx |  20 +-
 ...ojects.$projectParam.env.$envParam.logs.ts |   6 +-
 .../app/services/clickhouseInstance.server.ts |  66 ++-
 apps/webapp/app/utils/logUtils.ts             |   7 +-
 apps/webapp/tailwind.config.js                |   2 +-
 ...ed_conditions_to_task_events_search_v1.sql |  62 +++
 ...018_drop_unused_task_events_v2_indexes.sql |  22 +
 .../clickhouse/src/client/queryBuilder.ts     |  33 ++
 internal-packages/clickhouse/src/index.ts     |  12 +-
 .../clickhouse/src/taskEvents.ts              |   9 +-
 25 files changed, 516 insertions(+), 782 deletions(-)
 create mode 100644 apps/webapp/app/components/logs/LogLevel.tsx
 delete mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx
 create mode 100644 internal-packages/clickhouse/schema/017_update_materialized_conditions_to_task_events_search_v1.sql
 create mode 100644 internal-packages/clickhouse/schema/018_drop_unused_task_events_v2_indexes.sql

diff --git a/apps/webapp/app/components/LogLevelTooltipInfo.tsx b/apps/webapp/app/components/LogLevelTooltipInfo.tsx
index 6f967af70..2a8093af0 100644
--- a/apps/webapp/app/components/LogLevelTooltipInfo.tsx
+++ b/apps/webapp/app/components/LogLevelTooltipInfo.tsx
@@ -1,7 +1,6 @@
-import { BookOpenIcon } from "@heroicons/react/20/solid";
-import { LinkButton } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
+import { LogLevel } from "./logs/LogLevel";
 
 export function LogLevelTooltipInfo() {
   return (
@@ -13,51 +12,45 @@ export function LogLevelTooltipInfo() {
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-blue-400">Info</Header3>
+        <div className="mb-1">
+          <LogLevel level="TRACE" />
+        </div>
+        <Paragraph variant="small" className="text-text-dimmed">
+          Traces and spans representing the execution flow of your tasks.
+        </Paragraph>
+      </div>
+      <div>
+        <div className="mb-1">
+          <LogLevel level="INFO" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           General informational messages about task execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-warning">Warn</Header3>
+        <div className="mb-1">
+          <LogLevel level="WARN" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Warning messages indicating potential issues that don't prevent execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-error">Error</Header3>
+        <div className="mb-1">
+          <LogLevel level="ERROR" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Error messages for failures and exceptions during task execution.
         </Paragraph>
       </div>
       <div>
-        <div className="mb-0.5">
-          <Header3 className="text-charcoal-400">Debug</Header3>
+        <div className="mb-1">
+          <LogLevel level="DEBUG" />
         </div>
         <Paragraph variant="small" className="text-text-dimmed">
           Detailed diagnostic information for development and debugging.
         </Paragraph>
       </div>
-      <div className="border-t border-charcoal-700 pt-4">
-        <Header3>Tracing & Spans</Header3>
-        <Paragraph variant="small" className="text-text-dimmed">
-          Automatically track the flow of your code through task triggers, attempts, and HTTP
-          requests. Create custom traces to monitor specific operations.
-        </Paragraph>
-      </div>
-      <LinkButton
-        to="https://trigger.dev/docs/logging#tracing-and-spans"
-        variant="docs/small"
-        LeadingIcon={BookOpenIcon}
-      >
-        Read docs
-      </LinkButton>
     </div>
   );
 }
diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 431a02ba3..8757acc32 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -68,6 +68,9 @@ type CodeBlockProps = {
 
   /** Search term to highlight in the code */
   searchTerm?: string;
+
+  /** Whether to wrap the code */
+  wrap?: boolean;
 };
 
 const dimAmount = 0.5;
@@ -207,6 +210,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
       fileName,
       rowTitle,
       searchTerm,
+      wrap = false,
       ...props
     }: CodeBlockProps,
     ref
@@ -215,7 +219,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     const [copied, setCopied] = useState(false);
     const [modalCopied, setModalCopied] = useState(false);
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const [isWrapped, setIsWrapped] = useState(false);
+    const [isWrapped, setIsWrapped] = useState(wrap);
 
     const onCopied = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
index a5cbb15ae..dae58a7b4 100644
--- a/apps/webapp/app/components/logs/LogDetailView.tsx
+++ b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -1,43 +1,30 @@
-import { XMarkIcon, ArrowTopRightOnSquareIcon, CheckIcon } from "@heroicons/react/20/solid";
-import { Link } from "@remix-run/react";
-import {
-  type MachinePresetName,
-  formatDurationMilliseconds,
-} from "@trigger.dev/core/v3";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import type { TaskRunStatus } from "@trigger.dev/database";
 import { useEffect, useState } from "react";
 import { useTypedFetcher } from "remix-typedjson";
-import { cn } from "~/utils/cn";
-import { Button } from "~/components/primitives/Buttons";
-import { DateTimeAccurate } from "~/components/primitives/DateTime";
-import { Header2, Header3 } from "~/components/primitives/Headers";
-import { Paragraph } from "~/components/primitives/Paragraph";
-import { Spinner } from "~/components/primitives/Spinner";
-import { TabButton, TabContainer } from "~/components/primitives/Tabs";
-import * as Property from "~/components/primitives/PropertyTable";
-import { TextLink } from "~/components/primitives/TextLink";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { CopyableText } from "~/components/primitives/CopyableText";
-import { SimpleTooltip, InfoIconTooltip } from "~/components/primitives/Tooltip";
+import { DateTimeAccurate } from "~/components/primitives/DateTime";
+import { Header2 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+import { Spinner } from "~/components/primitives/Spinner";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
+import {
+  TaskRunStatusCombo,
+  descriptionForTaskRunStatus,
+} from "~/components/runs/v3/TaskRunStatus";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
-import { getLevelColor } from "~/utils/logUtils";
-import { v3RunSpanPath, v3RunsPath, v3DeploymentVersionPath } from "~/utils/pathBuilder";
 import type { loader as logDetailLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId";
-import { TaskRunStatusCombo, descriptionForTaskRunStatus } from "~/components/runs/v3/TaskRunStatus";
-import { MachineLabelCombo } from "~/components/MachineLabelCombo";
-import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
-import { RunTag } from "~/components/runs/v3/RunTag";
-import { formatCurrencyAccurate } from "~/utils/numberFormatter";
-import type { TaskRunStatus } from "@trigger.dev/database";
-import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
-import type { RunContext } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run";
-
-type RunContextData = {
-  run: RunContext | null;
-};
-
-
+import { cn } from "~/utils/cn";
+import { getLevelColor } from "~/utils/logUtils";
+import { v3RunSpanPath } from "~/utils/pathBuilder";
+import { LogLevel } from "./LogLevel";
+import { ExitIcon } from "~/assets/icons/ExitIcon";
 type LogDetailViewProps = {
   logId: string;
   // If we have the log entry from the list, we can display it immediately
@@ -46,27 +33,38 @@ type LogDetailViewProps = {
   searchTerm?: string;
 };
 
-type TabType = "details" | "run";
-
 type LogAttributes = Record<string, unknown> & {
   error?: {
     message?: string;
   };
 };
 
+function getDisplayMessage(log: {
+  message: string;
+  level: string;
+  attributes?: LogAttributes;
+}): string {
+  let message = log.message ?? "";
+  if (log.level === "ERROR") {
+    const maybeErrorMessage = log.attributes?.error?.message;
+    if (typeof maybeErrorMessage === "string" && maybeErrorMessage.length > 0) {
+      message = maybeErrorMessage;
+    }
+  }
+  return message;
+}
+
 function formatStringJSON(str: string): string {
   return str
     .replace(/\\n/g, "\n") // Converts literal "\n" to newline
     .replace(/\\t/g, "\t"); // Converts literal "\t" to tab
 }
 
-
 export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDetailViewProps) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
   const fetcher = useTypedFetcher<typeof logDetailLoader>();
-  const [activeTab, setActiveTab] = useState<TabType>("details");
   const [error, setError] = useState<string | null>(null);
 
   // Fetch full log details when logId changes
@@ -75,7 +73,9 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
 
     setError(null);
     fetcher.load(
-      `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/logs/${encodeURIComponent(logId)}`
+      `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+        environment.slug
+      }/logs/${encodeURIComponent(logId)}`
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [organization.slug, project.slug, environment.slug, logId]);
@@ -93,6 +93,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
 
   const isLoading = fetcher.state === "loading";
   const log = fetcher.data ?? initialLog;
+  const runStatus = fetcher.data?.runStatus;
 
   const runPath = v3RunSpanPath(
     organization,
@@ -102,27 +103,6 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
     { spanId: log?.spanId ?? "" }
   );
 
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
-      if (target && (
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.tagName === "SELECT" ||
-        target.contentEditable === "true"
-      )) {
-        return;
-      }
-
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onClose, log, runPath, isLoading]);
-
   if (isLoading && !log) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -134,11 +114,16 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
   if (!log) {
     return (
       <div className="flex h-full flex-col">
-        <div className="flex items-center justify-between border-b border-grid-dimmed p-4">
+        <div className="flex items-center justify-between border-b border-grid-dimmed py-2 pl-3 pr-2">
           <Header2>Log Details</Header2>
-          <Button variant="minimal/small" onClick={onClose}>
-            <XMarkIcon className="size-5" />
-          </Button>
+          <Button
+            onClick={onClose}
+            variant="minimal/small"
+            TrailingIcon={ExitIcon}
+            shortcut={{ key: "esc" }}
+            shortcutPosition="before-trailing-icon"
+            className="pl-1"
+          />
         </div>
         <div className="flex flex-1 items-center justify-center">
           <Paragraph className="text-text-dimmed">{error ?? "Log not found"}</Paragraph>
@@ -148,103 +133,112 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
   }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-grid-dimmed px-2 py-2">
-        <span
-          className={cn(
-            "inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase tracking-wider",
-            getLevelColor(log.level)
-          )}
-        >
-          {log.level}
-        </span>
-        <Button variant="minimal/small" onClick={onClose} shortcut={{ key: "esc" }}>
-          <XMarkIcon className="size-5" />
-        </Button>
+      <div className="flex items-center justify-between overflow-hidden border-b border-grid-dimmed py-2 pl-3 pr-2">
+        <Header2 className="truncate">{getDisplayMessage(log)}</Header2>
+        <Button
+          onClick={onClose}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
+          shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
+          className="pl-1"
+        />
       </div>
-
-      {/* Tabs */}
-      <div className="flex items-center justify-between border-b border-grid-dimmed px-4">
-        <TabContainer>
-          <TabButton
-            isActive={activeTab === "details"}
-            layoutId="log-detail-tabs"
-            onClick={() => setActiveTab("details")}
-            shortcut={{ key: "d" }}
-          >
-            Details
-          </TabButton>
-          <TabButton
-            isActive={activeTab === "run"}
-            layoutId="log-detail-tabs"
-            onClick={() => setActiveTab("run")}
-            shortcut={{ key: "r" }}
-          >
-            Run
-          </TabButton>
-        </TabContainer>
-        <Link to={runPath} target="_blank" rel="noopener noreferrer">
-          <Button variant="minimal/small" LeadingIcon={ArrowTopRightOnSquareIcon} shortcut={{ key: "v" }}>
-            View full run
-          </Button>
-        </Link>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4">
-        {activeTab === "details" && (
-          <DetailsTab log={log} runPath={runPath} searchTerm={searchTerm} />
-        )}
-        {activeTab === "run" && (
-          <RunTab log={log} runPath={runPath} />
-        )}
+      <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <DetailsTab log={log} runPath={runPath} runStatus={runStatus} searchTerm={searchTerm} />
       </div>
     </div>
   );
 }
 
-function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: string; searchTerm?: string }) {
-  const logWithExtras = log as LogEntry & {
+function DetailsTab({
+  log,
+  runPath,
+  runStatus,
+  searchTerm,
+}: {
+  log: LogEntry & {
     attributes?: LogAttributes;
   };
-
-
+  runPath: string;
+  runStatus?: TaskRunStatus;
+  searchTerm?: string;
+}) {
   let beautifiedAttributes: string | null = null;
 
-  if (logWithExtras.attributes) {
-    beautifiedAttributes = JSON.stringify(logWithExtras.attributes, null, 2);
+  if (log.attributes) {
+    beautifiedAttributes = JSON.stringify(log.attributes, null, 2);
     beautifiedAttributes = formatStringJSON(beautifiedAttributes);
   }
 
   const showAttributes = beautifiedAttributes && beautifiedAttributes !== "{}";
 
-  // Determine message to show
-  let message = log.message ?? "";
-  if (log.level === "ERROR") {
-    const maybeErrorMessage = logWithExtras.attributes?.error?.message;
-    if (typeof maybeErrorMessage === "string" && maybeErrorMessage.length > 0) {
-      message = maybeErrorMessage;
-    }
-  }
+  const message = getDisplayMessage(log);
 
   return (
     <>
-      {/* Time */}
-      <div className="mb-6">
-        <Header3 className="mb-2">Timestamp</Header3>
-        <div className="text-sm text-text-dimmed">
-          <DateTimeAccurate date={log.triggeredTimestamp} />
-        </div>
-      </div>
+      <Property.Table>
+        <Property.Item>
+          <Property.Label>Run ID</Property.Label>
+          <Property.Value>
+            <CopyableText value={log.runId} copyValue={log.runId} asChild />
+            <LinkButton
+              to={runPath}
+              variant="tertiary/small"
+              shortcut={{ key: "v" }}
+              className="mt-2"
+            >
+              View full run
+            </LinkButton>
+          </Property.Value>
+        </Property.Item>
+
+        {runStatus && (
+          <Property.Item>
+            <Property.Label>Status</Property.Label>
+            <Property.Value>
+              <SimpleTooltip
+                button={<TaskRunStatusCombo status={runStatus} />}
+                content={descriptionForTaskRunStatus(runStatus)}
+                disableHoverableContent
+                className="mt-1"
+              />
+            </Property.Value>
+          </Property.Item>
+        )}
+
+        <Property.Item>
+          <Property.Label>Task</Property.Label>
+          <Property.Value>
+            <CopyableText value={log.taskIdentifier} copyValue={log.taskIdentifier} asChild />
+          </Property.Value>
+        </Property.Item>
+
+        <Property.Item>
+          <Property.Label>Level</Property.Label>
+          <Property.Value>
+            <LogLevel level={log.level} />
+          </Property.Value>
+        </Property.Item>
+
+        <Property.Item>
+          <Property.Label>Timestamp</Property.Label>
+          <Property.Value>
+            <DateTimeAccurate date={log.triggeredTimestamp} />
+          </Property.Value>
+        </Property.Item>
+      </Property.Table>
 
       {/* Message */}
-      <div className="mb-6">
+      <div className="mb-6 mt-3">
         <PacketDisplay
           data={message}
           dataType="application/json"
           title="Message"
           searchTerm={searchTerm}
+          wrap={true}
         />
       </div>
 
@@ -262,222 +256,3 @@ function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: stri
     </>
   );
 }
-
-function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
-  const fetcher = useTypedFetcher<RunContextData>();
-
-  // Fetch run details when tab is active
-  useEffect(() => {
-    if (!log.runId) return;
-
-    fetcher.load(
-      `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/logs/${encodeURIComponent(log.id)}/run?runId=${encodeURIComponent(log.runId)}`
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [organization.slug, project.slug, environment.slug, log.id, log.runId]);
-
-  const isLoading = fetcher.state === "loading";
-  const runData = fetcher.data?.run;
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (!runData) {
-    return (
-      <div className="flex flex-col items-center justify-center py-8">
-        <Paragraph className="text-text-dimmed">Run not found in database.</Paragraph>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 py-3">
-      <Property.Table>
-        <Property.Item>
-          <Property.Label>Run ID</Property.Label>
-          <Property.Value>
-            <CopyableText value={runData.friendlyId} copyValue={runData.friendlyId} asChild />
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Status</Property.Label>
-          <Property.Value>
-            <SimpleTooltip
-              button={<TaskRunStatusCombo status={runData.status as TaskRunStatus} />}
-              content={descriptionForTaskRunStatus(runData.status as TaskRunStatus)}
-              disableHoverableContent
-            />
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Task</Property.Label>
-          <Property.Value>
-            <CopyableText
-              value={runData.taskIdentifier}
-              copyValue={runData.taskIdentifier}
-              asChild
-            />
-          </Property.Value>
-        </Property.Item>
-
-        {runData.rootRun && (
-          <Property.Item>
-            <Property.Label>Root and parent run</Property.Label>
-            <Property.Value>
-              <CopyableText
-                value={runData.rootRun.taskIdentifier}
-                copyValue={runData.rootRun.taskIdentifier}
-                asChild
-              />
-            </Property.Value>
-          </Property.Item>
-        )}
-
-        {runData.batch && (
-          <Property.Item>
-            <Property.Label>Batch</Property.Label>
-            <Property.Value>
-              <CopyableText
-                value={runData.batch.friendlyId}
-                copyValue={runData.batch.friendlyId}
-                asChild
-              />
-            </Property.Value>
-          </Property.Item>
-        )}
-
-        <Property.Item>
-          <Property.Label>Version</Property.Label>
-          <Property.Value>
-            {runData.version ? (
-              environment.type === "DEVELOPMENT" ? (
-                <CopyableText value={runData.version} copyValue={runData.version} asChild />
-              ) : (
-                <SimpleTooltip
-                  button={
-                    <TextLink
-                      to={v3DeploymentVersionPath(
-                        organization,
-                        project,
-                        environment,
-                        runData.version
-                      )}
-                      className="group flex flex-wrap items-center gap-x-1 gap-y-0"
-                    >
-                      <CopyableText value={runData.version} copyValue={runData.version} asChild />
-                    </TextLink>
-                  }
-                  content={"Jump to deployment"}
-                />
-              )
-            ) : (
-              <span className="flex items-center gap-1">
-                <span>Never started</span>
-                <InfoIconTooltip
-                  content={"Runs get locked to the latest version when they start."}
-                  contentClassName="normal-case tracking-normal"
-                />
-              </span>
-            )}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Test run</Property.Label>
-          <Property.Value>
-            {runData.isTest ? <CheckIcon className="size-4 text-text-dimmed" /> : "–"}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Environment</Property.Label>
-          <Property.Value>
-            <EnvironmentCombo environment={environment} />
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Queue</Property.Label>
-          <Property.Value>
-            <div>Name: {runData.queue}</div>
-            <div>Concurrency key: {runData.concurrencyKey ? runData.concurrencyKey : "–"}</div>
-          </Property.Value>
-        </Property.Item>
-
-        {runData.tags && runData.tags.length > 0 && (
-          <Property.Item>
-            <Property.Label>Tags</Property.Label>
-            <Property.Value>
-              <div className="mt-1 flex flex-wrap items-center gap-1 text-xs">
-                {runData.tags.map((tag: string) => (
-                  <RunTag
-                    key={tag}
-                    tag={tag}
-                    to={v3RunsPath(organization, project, environment, { tags: [tag] })}
-                    tooltip={`Filter runs by ${tag}`}
-                  />
-                ))}
-              </div>
-            </Property.Value>
-          </Property.Item>
-        )}
-
-        <Property.Item>
-          <Property.Label>Machine</Property.Label>
-          <Property.Value className="-ml-0.5">
-            {runData.machinePreset ? (
-              <MachineLabelCombo preset={runData.machinePreset as MachinePresetName} />
-            ) : (
-              "–"
-            )}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Run invocation cost</Property.Label>
-          <Property.Value>
-            {runData.baseCostInCents > 0
-              ? formatCurrencyAccurate(runData.baseCostInCents / 100)
-              : "–"}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Compute cost</Property.Label>
-          <Property.Value>
-            {runData.costInCents > 0 ? formatCurrencyAccurate(runData.costInCents / 100) : "–"}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Total cost</Property.Label>
-          <Property.Value>
-            {runData.costInCents > 0 || runData.baseCostInCents > 0
-              ? formatCurrencyAccurate((runData.baseCostInCents + runData.costInCents) / 100)
-              : "–"}
-          </Property.Value>
-        </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Usage duration</Property.Label>
-          <Property.Value>
-            {runData.usageDurationMs > 0
-              ? formatDurationMilliseconds(runData.usageDurationMs, { style: "short" })
-              : "–"}
-          </Property.Value>
-        </Property.Item>
-      </Property.Table>
-    </div>
-  );
-}
-
diff --git a/apps/webapp/app/components/logs/LogLevel.tsx b/apps/webapp/app/components/logs/LogLevel.tsx
new file mode 100644
index 000000000..3c2c38301
--- /dev/null
+++ b/apps/webapp/app/components/logs/LogLevel.tsx
@@ -0,0 +1,16 @@
+import { cn } from "~/utils/cn";
+import { getLevelColor } from "~/utils/logUtils";
+import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
+
+export function LogLevel({ level }: { level: LogEntry["level"] }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
+        getLevelColor(level)
+      )}
+    >
+      {level}
+    </span>
+  );
+}
diff --git a/apps/webapp/app/components/logs/LogsLevelFilter.tsx b/apps/webapp/app/components/logs/LogsLevelFilter.tsx
index 8c2abf64f..947bef88f 100644
--- a/apps/webapp/app/components/logs/LogsLevelFilter.tsx
+++ b/apps/webapp/app/components/logs/LogsLevelFilter.tsx
@@ -16,6 +16,7 @@ import type { LogLevel } from "~/presenters/v3/LogsListPresenter.server";
 import { cn } from "~/utils/cn";
 
 const allLogLevels: { level: LogLevel; label: string; color: string }[] = [
+  { level: "TRACE", label: "Trace", color: "text-purple-400" },
   { level: "INFO", label: "Info", color: "text-blue-400" },
   { level: "WARN", label: "Warning", color: "text-warning" },
   { level: "ERROR", label: "Error", color: "text-error" },
@@ -33,6 +34,8 @@ function getLevelBadgeColor(level: LogLevel): string {
       return "text-error bg-error/10 border-error/20";
     case "WARN":
       return "text-warning bg-warning/10 border-warning/20";
+    case "TRACE":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
     case "DEBUG":
       return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
     case "INFO":
diff --git a/apps/webapp/app/components/logs/LogsSearchInput.tsx b/apps/webapp/app/components/logs/LogsSearchInput.tsx
index fd539f66a..58316cead 100644
--- a/apps/webapp/app/components/logs/LogsSearchInput.tsx
+++ b/apps/webapp/app/components/logs/LogsSearchInput.tsx
@@ -1,55 +1,49 @@
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/20/solid";
-import { useNavigate } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input } from "~/components/primitives/Input";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { cn } from "~/utils/cn";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { useSearchParams } from "~/hooks/useSearchParam";
 
 export function LogsSearchInput() {
   const location = useOptimisticLocation();
-  const navigate = useNavigate();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const { value, replace, del } = useSearchParams();
+
   // Get initial search value from URL
-  const searchParams = new URLSearchParams(location.search);
-  const initialSearch = searchParams.get("search") ?? "";
+  const initialSearch = value("search") ?? "";
 
   const [text, setText] = useState(initialSearch);
   const [isFocused, setIsFocused] = useState(false);
 
   // Update text when URL search param changes (only when not focused to avoid overwriting user input)
   useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const urlSearch = params.get("search") ?? "";
+    const urlSearch = value("search") ?? "";
     if (urlSearch !== text && !isFocused) {
       setText(urlSearch);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.search]);
+  }, [value, text, isFocused]);
 
   const handleSubmit = useCallback(() => {
-    const params = new URLSearchParams(location.search);
     if (text.trim()) {
-      params.set("search", text.trim());
+      replace({ search: text.trim() });
     } else {
-      params.delete("search");
+      del("search");
     }
-    // Reset cursor when searching
-    params.delete("cursor");
-    params.delete("direction");
-    navigate(`${location.pathname}?${params.toString()}`, { replace: true });
-  }, [text, location.pathname, location.search, navigate]);
+  }, [text, replace, del]);
 
-  const handleClear = useCallback(() => {
-    setText("");
-    const params = new URLSearchParams(location.search);
-    params.delete("search");
-    params.delete("cursor");
-    params.delete("direction");
-    navigate(`${location.pathname}?${params.toString()}`, { replace: true });
-  }, [location.pathname, location.search, navigate]);
+  const handleClear = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setText("");
+      del(["search", "cursor", "direction"]);
+    },
+    [del]
+  );
 
   return (
     <div className="flex items-center gap-1">
@@ -71,7 +65,7 @@ export function LogsSearchInput() {
           value={text}
           onChange={(e) => setText(e.target.value)}
           fullWidth
-          className={cn(isFocused && "placeholder:text-text-dimmed/70")}
+          className={cn("", isFocused && "placeholder:text-text-dimmed/70")}
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -86,22 +80,21 @@ export function LogsSearchInput() {
           icon={<MagnifyingGlassIcon className="size-4" />}
           accessory={
             text.length > 0 ? (
-              <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
+              <div className="-mr-1 flex items-center gap-1">
+                <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
+                <button
+                  type="button"
+                  onClick={handleClear}
+                  className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                  title="Clear search"
+                >
+                  <XMarkIcon className="size-3" />
+                </button>
+              </div>
             ) : undefined
           }
         />
       </motion.div>
-
-      {text.length > 0 && (
-        <button
-          type="button"
-          onClick={handleClear}
-          className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-          title="Clear search"
-        >
-          <XMarkIcon className="size-4" />
-        </button>
-      )}
     </div>
   );
 }
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index 2f6894a03..0aedc4d70 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -2,16 +2,17 @@ import { ArrowPathIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/20/so
 import { Link } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
-import { Button } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
-import { getLevelColor, highlightSearchText } from "~/utils/logUtils";
+import { highlightSearchText } from "~/utils/logUtils";
 import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { DateTimeAccurate } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
 import { Spinner } from "../primitives/Spinner";
+import { LogLevel } from "./LogLevel";
 import { TruncatedCopyableValue } from "../primitives/TruncatedCopyableValue";
 import { LogLevelTooltipInfo } from "~/components/LogLevelTooltipInfo";
 import {
@@ -48,14 +49,14 @@ function getLevelBoxShadow(level: LogEntry["level"]): string {
       return "inset 2px 0 0 0 rgb(234, 179, 8)";
     case "INFO":
       return "inset 2px 0 0 0 rgb(59, 130, 246)";
+    case "TRACE":
+      return "inset 2px 0 0 0 rgb(168, 85, 247)";
     case "DEBUG":
     default:
       return "none";
   }
 }
 
-
-
 export function LogsTable({
   logs,
   searchTerm,
@@ -162,7 +163,7 @@ export function LogsTable({
                       boxShadow: getLevelBoxShadow(log.level),
                     }}
                   >
-                    <DateTimeAccurate date={log.triggeredTimestamp} />
+                    <DateTimeAccurate date={log.triggeredTimestamp} hour12={false} />
                   </TableCell>
                   <TableCell className="min-w-24">
                     <TruncatedCopyableValue value={log.runId} />
@@ -171,14 +172,7 @@ export function LogsTable({
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>
-                    <span
-                      className={cn(
-                        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
-                        getLevelColor(log.level)
-                      )}
-                    >
-                      {log.level}
-                    </span>
+                    <LogLevel level={log.level} />
                   </TableCell>
                   <TableCell className="max-w-0 truncate" onClick={handleRowClick} hasAction>
                     <span className="block truncate font-mono text-xs" title={log.message}>
@@ -188,11 +182,13 @@ export function LogsTable({
                   <TableCellMenu
                     className="pl-32"
                     hiddenButtons={
-                      <Link to={runPath} target="_blank" rel="noopener noreferrer">
-                        <Button variant="minimal/small" TrailingIcon={ArrowTopRightOnSquareIcon}>
-                          View run
-                        </Button>
-                      </Link>
+                      <LinkButton
+                        to={runPath}
+                        variant="minimal/small"
+                        TrailingIcon={ArrowTopRightOnSquareIcon}
+                      >
+                        View run
+                      </LinkButton>
                     }
                   />
                 </TableRow>
@@ -233,11 +229,7 @@ function BlankState({ isLoading, onRefresh }: { isLoading?: boolean; onRefresh?:
           No logs match your filters. Try refreshing or modifying your filters.
         </Paragraph>
         <div className="flex items-center gap-2">
-          <Button
-            LeadingIcon={ArrowPathIcon}
-            variant="tertiary/medium"
-            onClick={handleRefresh}
-          >
+          <Button LeadingIcon={ArrowPathIcon} variant="tertiary/medium" onClick={handleRefresh}>
             Refresh
           </Button>
         </div>
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 241bb8aea..adedf7b58 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -433,18 +433,7 @@ export function SideMenu({
                 data-action="deployments"
                 isCollapsed={isCollapsed}
               />
-              {(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
-                <SideMenuItem
-                  name="Logs"
-                  icon={LogsIcon}
-                  activeIconColor="text-logs"
-                  inactiveIconColor="text-logs"
-                  to={v3LogsPath(organization, project, environment)}
-                  data-action="logs"
-                  badge={<AlphaBadge />}
-                  isCollapsed={isCollapsed}
-                />
-              )}
+
               <SideMenuItem
                 name="Test"
                 icon={BeakerIcon}
@@ -467,6 +456,18 @@ export function SideMenu({
                 )}
                 onCollapseToggle={handleSectionToggle("metrics")}
               >
+                {(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess) && (
+                  <SideMenuItem
+                    name="Logs"
+                    icon={LogsIcon}
+                    activeIconColor="text-logs"
+                    inactiveIconColor="text-logs"
+                    to={v3LogsPath(organization, project, environment)}
+                    data-action="logs"
+                    badge={<AlphaBadge />}
+                    isCollapsed={isCollapsed}
+                  />
+                )}
                 <SideMenuItem
                   name="Query"
                   icon={TableCellsIcon}
diff --git a/apps/webapp/app/components/primitives/DateTime.tsx b/apps/webapp/app/components/primitives/DateTime.tsx
index 906bbf8b2..5241a976e 100644
--- a/apps/webapp/app/components/primitives/DateTime.tsx
+++ b/apps/webapp/app/components/primitives/DateTime.tsx
@@ -196,7 +196,11 @@ export const SmartDateTime = ({ date, previousDate = null, hour12 = true }: Date
     ? formatSmartDateTime(realDate, userTimeZone, locales, hour12)
     : formatTimeOnly(realDate, userTimeZone, locales, hour12);
 
-  return <span suppressHydrationWarning>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</span>;
+  return (
+    <span suppressHydrationWarning>
+      {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+    </span>
+  );
 };
 
 // Helper function to check if two dates are on the same day
@@ -270,14 +274,18 @@ const DateTimeAccurateInner = ({
     return hideDate
       ? formatTimeOnly(realDate, displayTimeZone, locales, hour12)
       : realPrevDate
-        ? isSameDay(realDate, realPrevDate)
-          ? formatTimeOnly(realDate, displayTimeZone, locales, hour12)
-          : formatDateTimeAccurate(realDate, displayTimeZone, locales, hour12)
-        : formatDateTimeAccurate(realDate, displayTimeZone, locales, hour12);
+      ? isSameDay(realDate, realPrevDate)
+        ? formatTimeOnly(realDate, displayTimeZone, locales, hour12)
+        : formatDateTimeAccurate(realDate, displayTimeZone, locales, hour12)
+      : formatDateTimeAccurate(realDate, displayTimeZone, locales, hour12);
   }, [realDate, displayTimeZone, locales, hour12, hideDate, previousDate]);
 
   if (!showTooltip)
-    return <span suppressHydrationWarning>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</span>;
+    return (
+      <span suppressHydrationWarning>
+        {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+      </span>
+    );
 
   const tooltipContent = (
     <TooltipContent
@@ -290,7 +298,11 @@ const DateTimeAccurateInner = ({
 
   return (
     <SimpleTooltip
-      button={<span suppressHydrationWarning>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</span>}
+      button={
+        <span suppressHydrationWarning>
+          {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+        </span>
+      }
       content={tooltipContent}
       side="right"
       asChild={true}
@@ -326,9 +338,13 @@ function formatDateTimeAccurate(
   locales: string[],
   hour12: boolean = true
 ): string {
-  const formattedDateTime = new Intl.DateTimeFormat(locales, {
+  const datePart = new Intl.DateTimeFormat(locales, {
     month: "short",
     day: "numeric",
+    timeZone,
+  }).format(date);
+
+  const timePart = new Intl.DateTimeFormat(locales, {
     hour: "numeric",
     minute: "numeric",
     second: "numeric",
@@ -338,7 +354,7 @@ function formatDateTimeAccurate(
     hour12,
   }).format(date);
 
-  return formattedDateTime;
+  return `${datePart} ${timePart}`;
 }
 
 export const DateTimeShort = ({ date, hour12 = true }: DateTimeProps) => {
@@ -347,7 +363,11 @@ export const DateTimeShort = ({ date, hour12 = true }: DateTimeProps) => {
   const realDate = typeof date === "string" ? new Date(date) : date;
   const formattedDateTime = formatDateTimeShort(realDate, userTimeZone, locales, hour12);
 
-  return <span suppressHydrationWarning>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</span>;
+  return (
+    <span suppressHydrationWarning>
+      {formattedDateTime.replace(/\s/g, String.fromCharCode(32))}
+    </span>
+  );
 };
 
 function formatDateTimeShort(
diff --git a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
index 2d6b6e65b..82deae8a1 100644
--- a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
+++ b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
@@ -12,11 +12,13 @@ export function PacketDisplay({
   dataType,
   title,
   searchTerm,
+  wrap,
 }: {
   data: string;
   dataType: string;
   title: string;
   searchTerm?: string;
+  wrap?: boolean;
 }) {
   switch (dataType) {
     case "application/store": {
@@ -54,6 +56,7 @@ export function PacketDisplay({
           showLineNumbers={false}
           showTextWrapping
           searchTerm={searchTerm}
+          wrap={wrap}
         />
       );
     }
@@ -67,6 +70,7 @@ export function PacketDisplay({
           showLineNumbers={false}
           showTextWrapping
           searchTerm={searchTerm}
+          wrap={wrap}
         />
       );
     }
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 7a5c4fdba..5538c6281 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -219,7 +219,7 @@ export function timeFilterFromTo(props: {
   from?: string | number;
   to?: string | number;
   defaultPeriod: string;
-}): { from: Date; to: Date } {
+}): { from: Date; to: Date; isDefault: boolean } {
   const time = timeFilters(props);
 
   const periodMs = time.period ? parse(time.period) : undefined;
@@ -228,6 +228,7 @@ export function timeFilterFromTo(props: {
     return {
       from: new Date(Date.now() - periodMs),
       to: new Date(),
+      isDefault: time.isDefault,
     };
   }
 
@@ -235,6 +236,7 @@ export function timeFilterFromTo(props: {
     return {
       from: time.from,
       to: time.to,
+      isDefault: time.isDefault,
     };
   }
 
@@ -242,6 +244,7 @@ export function timeFilterFromTo(props: {
     return {
       from: time.from,
       to: new Date(),
+      isDefault: time.isDefault,
     };
   }
 
@@ -249,6 +252,7 @@ export function timeFilterFromTo(props: {
   return {
     from: new Date(Date.now() - defaultPeriodMs),
     to: time.to ?? new Date(),
+    isDefault: time.isDefault,
   };
 }
 
diff --git a/apps/webapp/app/env.server.ts b/apps/webapp/app/env.server.ts
index 5a321c58b..6d3e6fbe3 100644
--- a/apps/webapp/app/env.server.ts
+++ b/apps/webapp/app/env.server.ts
@@ -1180,7 +1180,7 @@ const EnvironmentSchema = z
     CLICKHOUSE_LOG_LEVEL: z.enum(["log", "error", "warn", "info", "debug"]).default("info"),
     CLICKHOUSE_COMPRESSION_REQUEST: z.string().default("1"),
 
-    // Logs List Query Settings (for paginated log views)
+    // Logs Query Settings
     CLICKHOUSE_LOGS_LIST_MAX_MEMORY_USAGE: z.coerce.number().int().default(1_000_000_000),
     CLICKHOUSE_LOGS_LIST_MAX_BYTES_BEFORE_EXTERNAL_SORT: z.coerce
       .number()
@@ -1190,14 +1190,15 @@ const EnvironmentSchema = z
     CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ: z.coerce.number().int().default(10_000_000),
     CLICKHOUSE_LOGS_LIST_MAX_EXECUTION_TIME: z.coerce.number().int().default(120),
 
-    // Logs Detail Query Settings (for single log views)
-    CLICKHOUSE_LOGS_DETAIL_MAX_MEMORY_USAGE: z.coerce.number().int().default(64_000_000),
-    CLICKHOUSE_LOGS_DETAIL_MAX_THREADS: z.coerce.number().int().default(2),
-    CLICKHOUSE_LOGS_DETAIL_MAX_EXECUTION_TIME: z.coerce.number().int().default(60),
-
     // Query feature flag
     QUERY_FEATURE_ENABLED: z.string().default("1"),
 
+    // Logs page ClickHouse URL (for logs queries)
+    LOGS_CLICKHOUSE_URL: z
+      .string()
+      .optional()
+      .transform((v) => v ?? process.env.CLICKHOUSE_URL),
+
     // Query page ClickHouse limits (for TSQL queries)
     QUERY_CLICKHOUSE_URL: z
       .string()
diff --git a/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts b/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
index 545bca5cc..8a3bf692b 100644
--- a/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/LogsListPresenter.server.ts
@@ -1,13 +1,11 @@
 import { z } from "zod";
-import { type ClickHouse } from "@internal/clickhouse";
-import {
-  type PrismaClientOrTransaction,
-} from "@trigger.dev/database";
+import { type ClickHouse, type WhereCondition } from "@internal/clickhouse";
+import { type PrismaClientOrTransaction } from "@trigger.dev/database";
 import { EVENT_STORE_TYPES, getConfiguredEventRepository } from "~/v3/eventRepository/index.server";
 
 import parseDuration from "parse-duration";
 import { type Direction } from "~/components/ListPagination";
-import { timeFilters } from "~/components/runs/v3/SharedFilters";
+import { timeFilterFromTo, timeFilters } from "~/components/runs/v3/SharedFilters";
 import { findDisplayableEnvironment } from "~/models/runtimeEnvironment.server";
 import { getAllTaskIdentifiers } from "~/models/task.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
@@ -28,14 +26,9 @@ type ErrorAttributes = {
 };
 
 function escapeClickHouseString(val: string): string {
-  return val
-    .replace(/\\/g, "\\\\")
-    .replace(/\//g, "\\/")
-    .replace(/%/g, "\\%")
-    .replace(/_/g, "\\_");
+  return val.replace(/\\/g, "\\\\").replace(/\//g, "\\/").replace(/%/g, "\\%").replace(/_/g, "\\_");
 }
 
-
 export type LogsListOptions = {
   userId?: string;
   projectId: string;
@@ -115,10 +108,12 @@ function decodeCursor(cursor: string): LogCursor | null {
 // Convert display level to ClickHouse kinds and statuses
 function levelToKindsAndStatuses(level: LogLevel): { kinds?: string[]; statuses?: string[] } {
   switch (level) {
+    case "TRACE":
+      return { kinds: ["SPAN"] };
     case "DEBUG":
       return { kinds: ["LOG_DEBUG"] };
     case "INFO":
-      return { kinds: ["LOG_INFO", "LOG_LOG", "SPAN"] };
+      return { kinds: ["LOG_INFO", "LOG_LOG"] };
     case "WARN":
       return { kinds: ["LOG_WARN"] };
     case "ERROR":
@@ -153,24 +148,16 @@ export class LogsListPresenter extends BasePresenter {
       retentionLimitDays,
     }: LogsListOptions
   ) {
-    const time = timeFilters({
+    const time = timeFilterFromTo({
       period,
       from,
       to,
-      defaultPeriod,
+      defaultPeriod: defaultPeriod ?? "1h",
     });
 
     let effectiveFrom = time.from;
     let effectiveTo = time.to;
 
-    if (!effectiveFrom && !effectiveTo && time.period) {
-      const periodMs = parseDuration(time.period);
-      if (periodMs) {
-        effectiveFrom = new Date(Date.now() - periodMs);
-        effectiveTo = new Date();
-      }
-    }
-
     // Apply retention limit if provided
     let wasClampedByRetention = false;
     if (retentionLimitDays !== undefined && effectiveFrom) {
@@ -236,6 +223,11 @@ export class LogsListPresenter extends BasePresenter {
 
     const queryBuilder = this.clickhouse.taskEventsSearch.logsListQueryBuilder();
 
+    // This should be removed once we clear the old inserts, 30 DAYS, the materialized view excludes events without trace_id)
+    queryBuilder.where("trace_id != ''", {
+      environmentId,
+    });
+
     queryBuilder.where("environment_id = {environmentId: String}", {
       environmentId,
     });
@@ -245,11 +237,10 @@ export class LogsListPresenter extends BasePresenter {
     });
     queryBuilder.where("project_id = {projectId: String}", { projectId });
 
-
     if (effectiveFrom) {
-        queryBuilder.where("triggered_timestamp >= {triggeredAtStart: DateTime64(3)}", {
-          triggeredAtStart: convertDateToClickhouseDateTime(effectiveFrom),
-        });
+      queryBuilder.where("triggered_timestamp >= {triggeredAtStart: DateTime64(3)}", {
+        triggeredAtStart: convertDateToClickhouseDateTime(effectiveFrom),
+      });
     }
 
     if (effectiveTo) {
@@ -278,50 +269,43 @@ export class LogsListPresenter extends BasePresenter {
       queryBuilder.where(
         "(lower(message) like {searchPattern: String} OR lower(attributes_text) like {searchPattern: String})",
         {
-          searchPattern: `%${searchTerm}%`
+          searchPattern: `%${searchTerm}%`,
         }
       );
     }
 
     if (levels && levels.length > 0) {
-      const conditions: string[] = [];
-      const params: Record<string, string[]> = {};
+      const conditions: WhereCondition[] = [];
 
-      for (const level of levels) {
-        const filter = levelToKindsAndStatuses(level);
-        const levelConditions: string[] = [];
+      for (let i = 0; i < levels.length; i++) {
+        const filter = levelToKindsAndStatuses(levels[i]);
 
         if (filter.kinds && filter.kinds.length > 0) {
-          const kindsKey = `kinds_${level}`;
-          let kindCondition = `kind IN {${kindsKey}: Array(String)}`;
-
-
-          kindCondition += ` AND status NOT IN {excluded_statuses: Array(String)}`;
-          params["excluded_statuses"] = ["ERROR", "CANCELLED"];
-
-
-          levelConditions.push(kindCondition);
-          params[kindsKey] = filter.kinds;
+          conditions.push({
+            clause: `kind IN {kinds_${i}: Array(String)} AND status NOT IN {excluded_statuses: Array(String)}`,
+            params: {
+              [`kinds_${i}`]: filter.kinds,
+              excluded_statuses: ["ERROR", "CANCELLED"],
+            },
+          });
         }
 
         if (filter.statuses && filter.statuses.length > 0) {
-          const statusesKey = `statuses_${level}`;
-          levelConditions.push(`status IN {${statusesKey}: Array(String)}`);
-          params[statusesKey] = filter.statuses;
-        }
-
-        if (levelConditions.length > 0) {
-          conditions.push(`(${levelConditions.join(" OR ")})`);
+          conditions.push({
+            clause: `status IN {statuses_${i}: Array(String)}`,
+            params: { [`statuses_${i}`]: filter.statuses },
+          });
         }
       }
 
-      if (conditions.length > 0) {
-        queryBuilder.where(`(${conditions.join(" OR ")})`, params);
-      }
+      queryBuilder.whereOr(conditions);
     }
 
-    // Cursor pagination using explicit lexicographic comparison
-    // Must mirror the ORDER BY columns: (organization_id, environment_id, triggered_timestamp, trace_id)
+    // Cursor-based pagination using lexicographic comparison on (triggered_timestamp, trace_id).
+    // Since ORDER BY is DESC, "next page" means rows that sort *after* the cursor, i.e. less-than.
+    // The OR handles the tiebreaker: rows with an earlier timestamp always qualify, and rows
+    // with the *same* timestamp only qualify if their trace_id is also smaller.
+    // Equivalent to: WHERE (triggered_timestamp, trace_id) < (cursor.triggered_timestamp, cursor.trace_id)
     const decodedCursor = cursor ? decodeCursor(cursor) : null;
     if (decodedCursor) {
       queryBuilder.where(
@@ -423,10 +407,13 @@ export class LogsListPresenter extends BasePresenter {
       hasFilters,
       hasAnyLogs: transformedLogs.length > 0,
       searchTerm: search,
-      retention: retentionLimitDays !== undefined ? {
-        limitDays: retentionLimitDays,
-        wasClamped: wasClampedByRetention,
-      } : undefined,
+      retention:
+        retentionLimitDays !== undefined
+          ? {
+              limitDays: retentionLimitDays,
+              wasClamped: wasClampedByRetention,
+            }
+          : undefined,
     };
   }
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
index 9c2eccc8e..325df8b38 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
@@ -16,7 +16,7 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { LogsListPresenter, LogEntry } from "~/presenters/v3/LogsListPresenter.server";
 import type { LogLevel } from "~/utils/logUtils";
 import { $replica, prisma } from "~/db.server";
-import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { logsClickhouseClient } from "~/services/clickhouseInstance.server";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState, useTransition } from "react";
@@ -40,7 +40,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags.server";
 
 // Valid log levels for filtering
-const validLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR"];
+const validLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 function parseLevelsFromUrl(url: URL): LogLevel[] | undefined {
   const levelParams = url.searchParams.getAll("levels").filter((v) => v.length > 0);
@@ -134,7 +134,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const plan = await getCurrentPlan(project.organizationId);
   const retentionLimitDays = plan?.v3Subscription?.plan?.limits.logRetentionDays.number ?? 30;
 
-  const presenter = new LogsListPresenter($replica, clickhouseClient);
+  const presenter = new LogsListPresenter($replica, logsClickhouseClient);
 
   const listPromise = presenter
     .call(project.organizationId, environment.id, {
@@ -322,7 +322,10 @@ function LogsList({
   const [nextCursor, setNextCursor] = useState<string | undefined>(list.pagination.next);
 
   // Selected log state - managed locally to avoid triggering navigation
-  const [selectedLogId, setSelectedLogId] = useState<string | undefined>();
+  const [selectedLogId, setSelectedLogId] = useState<string | undefined>(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get("log") ?? undefined;
+  });
 
   // Track which filter state (search params) the current fetcher request corresponds to
   const fetcherFilterStateRef = useRef<string>(location.search);
@@ -333,8 +336,9 @@ function LogsList({
   useEffect(() => {
     setAccumulatedLogs([]);
     setNextCursor(undefined);
-    // Close side panel when filters change to avoid showing a log that's no longer visible
-    setSelectedLogId(undefined);
+    // Preserve log selection from URL param, clear if not present
+    const params = new URLSearchParams(location.search);
+    setSelectedLogId(params.get("log") ?? undefined);
   }, [location.search]);
 
   // Populate accumulated logs when new data arrives
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx
deleted file mode 100644
index 15986c305..000000000
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { json } from "@remix-run/node";
-import { z } from "zod";
-import { MachinePresetName } from "@trigger.dev/core/v3";
-import { requireUserId } from "~/services/session.server";
-import { EnvironmentParamSchema } from "~/utils/pathBuilder";
-import { findProjectBySlug } from "~/models/project.server";
-import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
-import { $replica } from "~/db.server";
-import type { TaskRunStatus } from "@trigger.dev/database";
-
-// Valid TaskRunStatus values
-const VALID_TASK_RUN_STATUSES = [
-  "PENDING",
-  "QUEUED",
-  "EXECUTING",
-  "WAITING_FOR_EXECUTION",
-  "WAITING",
-  "COMPLETED_SUCCESSFULLY",
-  "COMPLETED_WITH_ERRORS",
-  "SYSTEM_FAILURE",
-  "FAILURE",
-  "CANCELED",
-] as const;
-
-// Schema for validating run context data
-export const RunContextSchema = z.object({
-  id: z.string(),
-  friendlyId: z.string(),
-  taskIdentifier: z.string(),
-  status: z.enum(VALID_TASK_RUN_STATUSES),
-  createdAt: z.string().datetime(),
-  startedAt: z.string().datetime().optional(),
-  completedAt: z.string().datetime().optional(),
-  isTest: z.boolean(),
-  tags: z.array(z.string()),
-  queue: z.string(),
-  concurrencyKey: z.string().nullable(),
-  usageDurationMs: z.number(),
-  costInCents: z.number(),
-  baseCostInCents: z.number(),
-  machinePreset: MachinePresetName.nullable(),
-  version: z.string().optional(),
-  rootRun: z
-    .object({
-      friendlyId: z.string(),
-      taskIdentifier: z.string(),
-    })
-    .nullable(),
-  parentRun: z
-    .object({
-      friendlyId: z.string(),
-      taskIdentifier: z.string(),
-    })
-    .nullable(),
-  batch: z
-    .object({
-      friendlyId: z.string(),
-    })
-    .nullable(),
-  schedule: z
-    .object({
-      friendlyId: z.string(),
-    })
-    .nullable(),
-});
-
-export type RunContext = z.infer<typeof RunContextSchema>;
-
-// Fetch run context for a log entry
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { projectParam, organizationSlug, envParam, logId } = {
-    ...EnvironmentParamSchema.parse(params),
-    logId: params.logId,
-  };
-
-  if (!logId) {
-    throw new Response("Log ID is required", { status: 400 });
-  }
-
-  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
-  if (!project) {
-    throw new Response("Project not found", { status: 404 });
-  }
-
-  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
-  if (!environment) {
-    throw new Response("Environment not found", { status: 404 });
-  }
-
-  // Parse the logId to extract runId
-  // Log ID format: traceId::spanId::runId::startTime (base64 encoded or plain)
-  const url = new URL(request.url);
-  const runId = url.searchParams.get("runId");
-
-  if (!runId) {
-    throw new Response("Run ID is required", { status: 400 });
-  }
-
-  // Fetch run details from Postgres
-  const run = await $replica.taskRun.findFirst({
-    select: {
-      id: true,
-      friendlyId: true,
-      taskIdentifier: true,
-      status: true,
-      createdAt: true,
-      startedAt: true,
-      completedAt: true,
-      isTest: true,
-      runTags: true,
-      queue: true,
-      concurrencyKey: true,
-      usageDurationMs: true,
-      costInCents: true,
-      baseCostInCents: true,
-      machinePreset: true,
-      scheduleId: true,
-      lockedToVersion: {
-        select: {
-          version: true,
-        },
-      },
-      rootTaskRun: {
-        select: {
-          friendlyId: true,
-          taskIdentifier: true,
-        },
-      },
-      parentTaskRun: {
-        select: {
-          friendlyId: true,
-          taskIdentifier: true,
-        },
-      },
-      batch: {
-        select: {
-          friendlyId: true,
-        },
-      },
-    },
-    where: {
-      friendlyId: runId,
-      runtimeEnvironmentId: environment.id,
-    },
-  });
-
-  if (!run) {
-    return json({ run: null });
-  }
-
-  // Fetch schedule if scheduleId exists
-  let schedule: { friendlyId: string } | null = null;
-  if (run.scheduleId) {
-    const scheduleData = await $replica.taskSchedule.findFirst({
-      select: { friendlyId: true },
-      where: { id: run.scheduleId },
-    });
-    schedule = scheduleData;
-  }
-
-  const runData = {
-    id: run.id,
-    friendlyId: run.friendlyId,
-    taskIdentifier: run.taskIdentifier,
-    status: run.status,
-    createdAt: run.createdAt.toISOString(),
-    startedAt: run.startedAt?.toISOString(),
-    completedAt: run.completedAt?.toISOString(),
-    isTest: run.isTest,
-    tags: run.runTags,
-    queue: run.queue,
-    concurrencyKey: run.concurrencyKey,
-    usageDurationMs: run.usageDurationMs,
-    costInCents: run.costInCents,
-    baseCostInCents: run.baseCostInCents,
-    machinePreset: run.machinePreset,
-    version: run.lockedToVersion?.version,
-    rootRun: run.rootTaskRun
-      ? {
-          friendlyId: run.rootTaskRun.friendlyId,
-          taskIdentifier: run.rootTaskRun.taskIdentifier,
-        }
-      : null,
-    parentRun: run.parentTaskRun
-      ? {
-          friendlyId: run.parentTaskRun.friendlyId,
-          taskIdentifier: run.parentTaskRun.taskIdentifier,
-        }
-      : null,
-    batch: run.batch ? { friendlyId: run.batch.friendlyId } : null,
-    schedule: schedule,
-  };
-
-  // Validate the run data
-  const validatedRun = RunContextSchema.parse(runData);
-
-  return json({
-    run: validatedRun,
-  });
-};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.tsx
index f04e706d4..f862ced6b 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.tsx
@@ -1,13 +1,14 @@
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { z } from "zod";
-import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { logsClickhouseClient } from "~/services/clickhouseInstance.server";
 import { requireUserId } from "~/services/session.server";
 import { LogDetailPresenter } from "~/presenters/v3/LogDetailPresenter.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { $replica } from "~/db.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
+import type { TaskRunStatus } from "@trigger.dev/database";
 
 const LogIdParamsSchema = z.object({
   organizationSlug: z.string(),
@@ -42,7 +43,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   const [traceId, spanId, , startTime] = parts;
 
-  const presenter = new LogDetailPresenter($replica, clickhouseClient);
+  const presenter = new LogDetailPresenter($replica, logsClickhouseClient);
 
   let result;
   try {
@@ -65,5 +66,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     throw new Response("Log not found", { status: 404 });
   }
 
-  return typedjson(result);
+  // Look up the run status from Postgres
+  let runStatus: TaskRunStatus | undefined;
+  if (result.runId) {
+    const run = await $replica.taskRun.findFirst({
+      select: { status: true },
+      where: {
+        friendlyId: result.runId,
+        runtimeEnvironmentId: environment.id,
+      },
+    });
+    runStatus = run?.status;
+  }
+
+  return typedjson({ ...result, runStatus });
 };
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
index cac4c0f70..66ddebe4e 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts
@@ -6,11 +6,11 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { LogsListPresenter, type LogLevel, LogsListOptionsSchema } from "~/presenters/v3/LogsListPresenter.server";
 import { $replica } from "~/db.server";
-import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { logsClickhouseClient } from "~/services/clickhouseInstance.server";
 import { getCurrentPlan } from "~/services/platform.v3.server";
 
 // Valid log levels for filtering
-const validLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR"];
+const validLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 function parseLevelsFromUrl(url: URL): LogLevel[] | undefined {
   const levelParams = url.searchParams.getAll("levels").filter((v) => v.length > 0);
@@ -69,7 +69,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     retentionLimitDays,
   }) as any; // Validated by LogsListOptionsSchema at runtime
 
-  const presenter = new LogsListPresenter($replica, clickhouseClient);
+  const presenter = new LogsListPresenter($replica, logsClickhouseClient);
   const result = await presenter.call(project.organizationId, environment.id, options);
 
   return json({
diff --git a/apps/webapp/app/services/clickhouseInstance.server.ts b/apps/webapp/app/services/clickhouseInstance.server.ts
index 7818129b4..f88b3baaa 100644
--- a/apps/webapp/app/services/clickhouseInstance.server.ts
+++ b/apps/webapp/app/services/clickhouseInstance.server.ts
@@ -12,29 +12,6 @@ function initializeClickhouseClient() {
 
   console.log(`🗃️  Clickhouse service enabled to host ${url.host}`);
 
-  // Build logs query settings from environment variables
-  const logsQuerySettings = {
-    list: {
-      max_memory_usage: env.CLICKHOUSE_LOGS_LIST_MAX_MEMORY_USAGE.toString(),
-      max_bytes_before_external_sort:
-        env.CLICKHOUSE_LOGS_LIST_MAX_BYTES_BEFORE_EXTERNAL_SORT.toString(),
-      max_threads: env.CLICKHOUSE_LOGS_LIST_MAX_THREADS,
-      ...(env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ && {
-        max_rows_to_read: env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ.toString(),
-      }),
-      ...(env.CLICKHOUSE_LOGS_LIST_MAX_EXECUTION_TIME && {
-        max_execution_time: env.CLICKHOUSE_LOGS_LIST_MAX_EXECUTION_TIME,
-      }),
-    },
-    detail: {
-      max_memory_usage: env.CLICKHOUSE_LOGS_DETAIL_MAX_MEMORY_USAGE.toString(),
-      max_threads: env.CLICKHOUSE_LOGS_DETAIL_MAX_THREADS,
-      ...(env.CLICKHOUSE_LOGS_DETAIL_MAX_EXECUTION_TIME && {
-        max_execution_time: env.CLICKHOUSE_LOGS_DETAIL_MAX_EXECUTION_TIME,
-      }),
-    },
-  };
-
   const clickhouse = new ClickHouse({
     url: url.toString(),
     name: "clickhouse-instance",
@@ -47,12 +24,53 @@ function initializeClickhouseClient() {
       request: true,
     },
     maxOpenConnections: env.CLICKHOUSE_MAX_OPEN_CONNECTIONS,
-    logsQuerySettings,
   });
 
   return clickhouse;
 }
 
+export const logsClickhouseClient = singleton(
+  "logsClickhouseClient",
+  initializeLogsClickhouseClient
+);
+
+function initializeLogsClickhouseClient() {
+  if (!env.LOGS_CLICKHOUSE_URL) {
+    throw new Error("LOGS_CLICKHOUSE_URL is not set");
+  }
+
+  const url = new URL(env.LOGS_CLICKHOUSE_URL);
+
+  // Remove secure param
+  url.searchParams.delete("secure");
+
+  return new ClickHouse({
+    url: url.toString(),
+    name: "logs-clickhouse",
+    keepAlive: {
+      enabled: env.CLICKHOUSE_KEEP_ALIVE_ENABLED === "1",
+      idleSocketTtl: env.CLICKHOUSE_KEEP_ALIVE_IDLE_SOCKET_TTL_MS,
+    },
+    logLevel: env.CLICKHOUSE_LOG_LEVEL,
+    compression: {
+      request: true,
+    },
+    maxOpenConnections: env.CLICKHOUSE_MAX_OPEN_CONNECTIONS,
+    clickhouseSettings: {
+      max_memory_usage: env.CLICKHOUSE_LOGS_LIST_MAX_MEMORY_USAGE.toString(),
+      max_bytes_before_external_sort:
+        env.CLICKHOUSE_LOGS_LIST_MAX_BYTES_BEFORE_EXTERNAL_SORT.toString(),
+      max_threads: env.CLICKHOUSE_LOGS_LIST_MAX_THREADS,
+      ...(env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ && {
+        max_rows_to_read: env.CLICKHOUSE_LOGS_LIST_MAX_ROWS_TO_READ.toString(),
+      }),
+      ...(env.CLICKHOUSE_LOGS_LIST_MAX_EXECUTION_TIME && {
+        max_execution_time: env.CLICKHOUSE_LOGS_LIST_MAX_EXECUTION_TIME,
+      }),
+    },
+  });
+}
+
 export const queryClickhouseClient = singleton(
   "queryClickhouseClient",
   initializeQueryClickhouseClient
diff --git a/apps/webapp/app/utils/logUtils.ts b/apps/webapp/app/utils/logUtils.ts
index cad9bbc90..71ec44534 100644
--- a/apps/webapp/app/utils/logUtils.ts
+++ b/apps/webapp/app/utils/logUtils.ts
@@ -1,10 +1,10 @@
 import { createElement, Fragment, type ReactNode } from "react";
 import { z } from "zod";
 
-export const LogLevelSchema = z.enum(["DEBUG", "INFO", "WARN", "ERROR"]);
+export const LogLevelSchema = z.enum(["TRACE", "DEBUG", "INFO", "WARN", "ERROR"]);
 export type LogLevel = z.infer<typeof LogLevelSchema>;
 
-export const validLogLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR",];
+export const validLogLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 // Default styles for search highlighting
 const DEFAULT_HIGHLIGHT_STYLES: React.CSSProperties = {
@@ -87,6 +87,7 @@ export function kindToLevel(kind: string, status: string): LogLevel {
     case "LOG_LOG":
       return "INFO"; // Changed from "LOG"
     case "SPAN":
+      return "TRACE";
     case "ANCESTOR_OVERRIDE":
     case "SPAN_EVENT":
     default:
@@ -101,6 +102,8 @@ export function getLevelColor(level: LogLevel): string {
       return "text-error bg-error/10 border-error/20";
     case "WARN":
       return "text-warning bg-warning/10 border-warning/20";
+    case "TRACE":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
     case "DEBUG":
       return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
     case "INFO":
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index f17eb04c1..b3d6e2b23 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -166,7 +166,7 @@ const deployments = colors.green[500];
 const concurrency = colors.amber[500];
 const limits = colors.purple[500];
 const regions = colors.green[500];
-const logs = colors.blue[500];
+const logs = colors.pink[500];
 const tests = colors.lime[500];
 const apiKeys = colors.amber[500];
 const environmentVariables = colors.pink[500];
diff --git a/internal-packages/clickhouse/schema/017_update_materialized_conditions_to_task_events_search_v1.sql b/internal-packages/clickhouse/schema/017_update_materialized_conditions_to_task_events_search_v1.sql
new file mode 100644
index 000000000..3f84cf555
--- /dev/null
+++ b/internal-packages/clickhouse/schema/017_update_materialized_conditions_to_task_events_search_v1.sql
@@ -0,0 +1,62 @@
+-- +goose Up
+-- We drop the existing MV and recreate it with the new filter condition
+DROP VIEW IF EXISTS trigger_dev.task_events_search_mv_v1;
+
+CREATE MATERIALIZED VIEW IF NOT EXISTS trigger_dev.task_events_search_mv_v1
+TO trigger_dev.task_events_search_v1 AS
+SELECT
+    environment_id,
+    organization_id,
+    project_id,
+    trace_id,
+    span_id,
+    run_id,
+    task_identifier,
+    start_time,
+    inserted_at,
+    message,
+    kind,
+    status,
+    duration,
+    parent_span_id,
+    attributes_text,
+    fromUnixTimestamp64Nano(toUnixTimestamp64Nano(start_time) + toInt64(duration)) AS triggered_timestamp
+FROM trigger_dev.task_events_v2
+WHERE
+    trace_id != '' -- New condition added here
+    AND kind != 'DEBUG_EVENT'
+    AND status != 'PARTIAL'
+    AND NOT (kind = 'SPAN_EVENT' AND attributes_text = '{}')
+    AND kind != 'ANCESTOR_OVERRIDE'
+    AND message != 'trigger.dev/start';
+
+-- +goose Down
+-- In the down migration, we revert to the previous filter set
+DROP VIEW IF EXISTS trigger_dev.task_events_search_mv_v1;
+
+CREATE MATERIALIZED VIEW IF NOT EXISTS trigger_dev.task_events_search_mv_v1
+TO trigger_dev.task_events_search_v1 AS
+SELECT
+    environment_id,
+    organization_id,
+    project_id,
+    trace_id,
+    span_id,
+    run_id,
+    task_identifier,
+    start_time,
+    inserted_at,
+    message,
+    kind,
+    status,
+    duration,
+    parent_span_id,
+    attributes_text,
+    fromUnixTimestamp64Nano(toUnixTimestamp64Nano(start_time) + toInt64(duration)) AS triggered_timestamp
+FROM trigger_dev.task_events_v2
+WHERE
+    kind != 'DEBUG_EVENT'
+    AND status != 'PARTIAL'
+    AND NOT (kind = 'SPAN_EVENT' AND attributes_text = '{}')
+    AND kind != 'ANCESTOR_OVERRIDE'
+    AND message != 'trigger.dev/start';
\ No newline at end of file
diff --git a/internal-packages/clickhouse/schema/018_drop_unused_task_events_v2_indexes.sql b/internal-packages/clickhouse/schema/018_drop_unused_task_events_v2_indexes.sql
new file mode 100644
index 000000000..81e3dbab6
--- /dev/null
+++ b/internal-packages/clickhouse/schema/018_drop_unused_task_events_v2_indexes.sql
@@ -0,0 +1,22 @@
+-- +goose Up
+
+-- These indexes are not used in any WHERE clause.
+-- idx_duration: duration is only written/read as a column, never filtered on.
+-- idx_attributes_text: search queries use the task_events_search_v1 table instead.
+ALTER TABLE trigger_dev.task_events_v2
+    DROP INDEX IF EXISTS idx_duration;
+
+ALTER TABLE trigger_dev.task_events_v2
+    DROP INDEX IF EXISTS idx_attributes_text;
+
+-- +goose Down
+
+ALTER TABLE trigger_dev.task_events_v2
+    ADD INDEX IF NOT EXISTS idx_duration duration
+    TYPE minmax
+    GRANULARITY 1;
+
+ALTER TABLE trigger_dev.task_events_v2
+    ADD INDEX IF NOT EXISTS idx_attributes_text attributes_text
+    TYPE tokenbf_v1(32768, 3, 0)
+    GRANULARITY 8;
diff --git a/internal-packages/clickhouse/src/client/queryBuilder.ts b/internal-packages/clickhouse/src/client/queryBuilder.ts
index 30aad9848..e802fc11b 100644
--- a/internal-packages/clickhouse/src/client/queryBuilder.ts
+++ b/internal-packages/clickhouse/src/client/queryBuilder.ts
@@ -4,6 +4,11 @@ import { ClickHouseSettings } from "@clickhouse/client";
 export type QueryParamValue = string | number | boolean | Array<string | number | boolean> | null;
 export type QueryParams = Record<string, QueryParamValue>;
 
+export type WhereCondition = {
+  clause: string;
+  params?: QueryParams;
+};
+
 export class ClickhouseQueryBuilder<TOutput> {
   private name: string;
   private baseQuery: string;
@@ -45,6 +50,20 @@ export class ClickhouseQueryBuilder<TOutput> {
     return this;
   }
 
+  whereOr(conditions: WhereCondition[]): this {
+    if (conditions.length === 0) {
+      return this;
+    }
+    const combinedClause = conditions.map((c) => `(${c.clause})`).join(" OR ");
+    this.whereClauses.push(`(${combinedClause})`);
+    for (const condition of conditions) {
+      if (condition.params) {
+        Object.assign(this.params, condition.params);
+      }
+    }
+    return this;
+  }
+
   groupBy(clause: string): this {
     this.groupByClause = clause;
     return this;
@@ -153,6 +172,20 @@ export class ClickhouseQueryFastBuilder<TOutput extends Record<string, any>> {
     return this;
   }
 
+  whereOr(conditions: WhereCondition[]): this {
+    if (conditions.length === 0) {
+      return this;
+    }
+    const combinedClause = conditions.map((c) => `(${c.clause})`).join(" OR ");
+    this.whereClauses.push(`(${combinedClause})`);
+    for (const condition of conditions) {
+      if (condition.params) {
+        Object.assign(this.params, condition.params);
+      }
+    }
+    return this;
+  }
+
   groupBy(clause: string): this {
     this.groupByClause = clause;
     return this;
diff --git a/internal-packages/clickhouse/src/index.ts b/internal-packages/clickhouse/src/index.ts
index 47c2f34f2..de6bbb44e 100644
--- a/internal-packages/clickhouse/src/index.ts
+++ b/internal-packages/clickhouse/src/index.ts
@@ -61,11 +61,6 @@ export type { OutputColumnMetadata } from "@internal/tsql";
 // Errors
 export { QueryError } from "./client/errors.js";
 
-export type LogsQuerySettings = {
-  list?: ClickHouseSettings;
-  detail?: ClickHouseSettings;
-};
-
 export type ClickhouseCommonConfig = {
   keepAlive?: {
     enabled?: boolean;
@@ -80,7 +75,6 @@ export type ClickhouseCommonConfig = {
     response?: boolean;
   };
   maxOpenConnections?: number;
-  logsQuerySettings?: LogsQuerySettings;
 };
 
 export type ClickHouseConfig =
@@ -104,11 +98,9 @@ export class ClickHouse {
   public readonly writer: ClickhouseWriter;
   private readonly logger: Logger;
   private _splitClients: boolean;
-  private readonly logsQuerySettings?: LogsQuerySettings;
 
   constructor(config: ClickHouseConfig) {
     this.logger = config.logger ?? new Logger("ClickHouse", config.logLevel ?? "debug");
-    this.logsQuerySettings = config.logsQuerySettings;
 
     if (config.url) {
       const url = new URL(config.url);
@@ -220,13 +212,13 @@ export class ClickHouse {
       traceSummaryQueryBuilder: getTraceSummaryQueryBuilderV2(this.reader),
       traceDetailedSummaryQueryBuilder: getTraceDetailedSummaryQueryBuilderV2(this.reader),
       spanDetailsQueryBuilder: getSpanDetailsQueryBuilderV2(this.reader),
-      logDetailQueryBuilder: getLogDetailQueryBuilderV2(this.reader, this.logsQuerySettings?.detail),
+      logDetailQueryBuilder: getLogDetailQueryBuilderV2(this.reader),
     };
   }
 
   get taskEventsSearch() {
     return {
-      logsListQueryBuilder: getLogsSearchListQueryBuilder(this.reader, this.logsQuerySettings?.list),
+      logsListQueryBuilder: getLogsSearchListQueryBuilder(this.reader),
     };
   }
 }
diff --git a/internal-packages/clickhouse/src/taskEvents.ts b/internal-packages/clickhouse/src/taskEvents.ts
index 73e2d8344..2109c4980 100644
--- a/internal-packages/clickhouse/src/taskEvents.ts
+++ b/internal-packages/clickhouse/src/taskEvents.ts
@@ -256,10 +256,7 @@ export const LogsSearchListResult = z.object({
 
 export type LogsSearchListResult = z.output<typeof LogsSearchListResult>;
 
-export function getLogsSearchListQueryBuilder(
-  ch: ClickhouseReader,
-  settings?: ClickHouseSettings
-) {
+export function getLogsSearchListQueryBuilder(ch: ClickhouseReader) {
   return ch.queryBuilderFast<LogsSearchListResult>({
     name: "getLogsSearchList",
     table: "trigger_dev.task_events_search_v1",
@@ -280,7 +277,6 @@ export function getLogsSearchListQueryBuilder(
       "attributes_text",
       "triggered_timestamp",
     ],
-    settings,
   });
 }
 
@@ -304,7 +300,7 @@ export const LogDetailV2Result = z.object({
 
 export type LogDetailV2Result = z.output<typeof LogDetailV2Result>;
 
-export function getLogDetailQueryBuilderV2(ch: ClickhouseReader, settings?: ClickHouseSettings) {
+export function getLogDetailQueryBuilderV2(ch: ClickhouseReader) {
   return ch.queryBuilderFast<LogDetailV2Result>({
     name: "getLogDetail",
     table: "trigger_dev.task_events_v2",
@@ -324,6 +320,5 @@ export function getLogDetailQueryBuilderV2(ch: ClickhouseReader, settings?: Clic
       "duration",
       "attributes_text",
     ],
-    settings,
   });
 }
\ No newline at end of file

From 59b6eb9a3e843809ffd5dba37775edc6e852592f Mon Sep 17 00:00:00 2001
From: nicktrn <55853254+nicktrn@users.noreply.github.com>
Date: Wed, 18 Feb 2026 10:39:38 +0000
Subject: [PATCH 25/25] feat(webapp): add region selector to test and replay
 task (#3082)

Adds a region selector to the Test task page and Replay run dialog, so
users can override the region from the dashboard. Disabled with a
placeholder for dev environments.

Closes #3016
---
 .../components/runs/v3/ReplayRunDialog.tsx    |  30 ++++
 .../route.tsx                                 | 146 ++++++++++++++++--
 .../resources.taskruns.$runParam.replay.ts    |  20 ++-
 .../app/v3/services/replayTaskRun.server.ts   |   2 +-
 .../webapp/app/v3/services/testTask.server.ts |   2 +
 apps/webapp/app/v3/testTask.ts                |   1 +
 6 files changed, 183 insertions(+), 18 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index 9192020e1..e42a2122a 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -201,6 +201,7 @@ function ReplayForm({
       tags,
       version,
       machine,
+      region,
       prioritySeconds,
     },
   ] = useForm({
@@ -357,6 +358,35 @@ function ReplayForm({
                 )}
                 <FormError id={version.errorId}>{version.error}</FormError>
               </InputGroup>
+              {replayData.regions.length > 1 && (
+                <InputGroup>
+                  <Label htmlFor={region.id} variant="small">
+                    Region
+                  </Label>
+                  <Select
+                    {...conform.select(region)}
+                    variant="tertiary/small"
+                    placeholder={replayData.disableVersionSelection ? "–" : undefined}
+                    dropdownIcon
+                    items={replayData.regions}
+                    defaultValue={replayData.region ?? undefined}
+                    disabled={replayData.disableVersionSelection}
+                  >
+                    {replayData.regions.map((r) => (
+                      <SelectItem key={r.name} value={r.name}>
+                        {r.description ? `${r.name} — ${r.description}` : r.name}
+                        {r.isDefault ? " (default)" : ""}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                  {replayData.disableVersionSelection ? (
+                    <Hint>Region is not available in the development environment.</Hint>
+                  ) : (
+                    <Hint>Overrides the region for this run.</Hint>
+                  )}
+                  <FormError id={region.errorId}>{region.error}</FormError>
+                </InputGroup>
+              )}
               <InputGroup>
                 <Label htmlFor={queue.id} variant="small">
                   Queue
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index d452a7571..a87cc4530 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -54,7 +54,7 @@ import {
   TestTaskPresenter,
 } from "~/presenters/v3/TestTaskPresenter.server";
 import { logger } from "~/services/logger.server";
-import { requireUserId } from "~/services/session.server";
+import { requireUser } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils/pathBuilder";
 import { TestTaskService } from "~/v3/services/testTask.server";
@@ -75,14 +75,15 @@ import { DialogClose, DialogDescription } from "@radix-ui/react-dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { $replica } from "~/db.server";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { RegionsPresenter, type Region } from "~/presenters/v3/RegionsPresenter.server";
 
 type FormAction = "create-template" | "delete-template" | "run-scheduled" | "run-standard";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
+  const user = await requireUser(request);
   const { projectParam, organizationSlug, envParam, taskParam } = v3TaskParamsSchema.parse(params);
 
-  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
   if (!project) {
     throw new Response(undefined, {
       status: 404,
@@ -90,7 +91,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     });
   }
 
-  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
   if (!environment) {
     throw new Response(undefined, {
       status: 404,
@@ -100,14 +101,21 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   const presenter = new TestTaskPresenter($replica, clickhouseClient);
   try {
-    const result = await presenter.call({
-      userId,
-      projectId: project.id,
-      taskIdentifier: taskParam,
-      environment: environment,
-    });
+    const [result, regionsResult] = await Promise.all([
+      presenter.call({
+        userId: user.id,
+        projectId: project.id,
+        taskIdentifier: taskParam,
+        environment: environment,
+      }),
+      new RegionsPresenter().call({
+        userId: user.id,
+        projectSlug: projectParam,
+        isAdmin: user.admin || user.isImpersonating,
+      }),
+    ]);
 
-    return typedjson(result);
+    return typedjson({ ...result, regions: regionsResult.regions });
   } catch (error) {
     return redirectWithErrorMessage(
       v3TestPath({ slug: organizationSlug }, { slug: projectParam }, environment),
@@ -118,15 +126,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export const action: ActionFunction = async ({ request, params }) => {
-  const userId = await requireUserId(request);
+  const user = await requireUser(request);
   const { organizationSlug, projectParam, envParam } = v3TaskParamsSchema.parse(params);
 
-  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
   if (!project) {
     return redirectBackWithErrorMessage(request, "Project not found");
   }
 
-  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
 
   if (!environment) {
     return redirectBackWithErrorMessage(request, "Environment not found");
@@ -290,6 +298,7 @@ export default function Page() {
           templates={result.taskRunTemplates}
           disableVersionSelection={result.disableVersionSelection}
           allowArbitraryQueues={result.allowArbitraryQueues}
+          regions={result.regions}
         />
       );
     }
@@ -304,6 +313,7 @@ export default function Page() {
           possibleTimezones={result.possibleTimezones}
           disableVersionSelection={result.disableVersionSelection}
           allowArbitraryQueues={result.allowArbitraryQueues}
+          regions={result.regions}
         />
       );
     }
@@ -324,6 +334,7 @@ function StandardTaskForm({
   templates,
   disableVersionSelection,
   allowArbitraryQueues,
+  regions,
 }: {
   task: StandardTaskResult["task"];
   queues: Required<StandardTaskResult>["queue"][];
@@ -332,6 +343,7 @@ function StandardTaskForm({
   templates: RunTemplate[];
   disableVersionSelection: boolean;
   allowArbitraryQueues: boolean;
+  regions: Region[];
 }) {
   const environment = useEnvironment();
   const { value, replace } = useSearchParams();
@@ -373,6 +385,12 @@ function StandardTaskForm({
   );
   const [queueValue, setQueueValue] = useState<string | undefined>(lastRun?.queue);
   const [machineValue, setMachineValue] = useState<string | undefined>(lastRun?.machinePreset);
+  const isDev = environment.type === "DEVELOPMENT";
+  const defaultRegion = regions.find((r) => r.isDefault);
+  const [regionValue, setRegionValue] = useState<string | undefined>(
+    isDev ? undefined : defaultRegion?.name
+  );
+
   const [maxAttemptsValue, setMaxAttemptsValue] = useState<number | undefined>(
     lastRun?.maxAttempts
   );
@@ -381,6 +399,12 @@ function StandardTaskForm({
   );
   const [tagsValue, setTagsValue] = useState<string[]>(lastRun?.runTags ?? []);
 
+  const regionItems = regions.map((r) => ({
+    value: r.name,
+    label: r.description ? `${r.name} — ${r.description}` : r.name,
+    isDefault: r.isDefault,
+  }));
+
   const queueItems = queues.map((q) => ({
     value: q.type === "task" ? `task/${q.name}` : q.name,
     label: q.name,
@@ -409,6 +433,7 @@ function StandardTaskForm({
       tags,
       version,
       machine,
+      region,
       prioritySeconds,
     },
   ] = useForm({
@@ -580,6 +605,45 @@ function StandardTaskForm({
                 )}
                 <FormError id={version.errorId}>{version.error}</FormError>
               </InputGroup>
+              {regionItems.length > 1 && (
+                <InputGroup>
+                  <Label htmlFor={region.id} variant="small">
+                    Region
+                  </Label>
+                  {/* Our Select primitive uses Ariakit under the hood, which treats
+                      value={undefined} as uncontrolled, keeping stale internal state when
+                      switching environments. The key forces a remount so it reinitializes
+                      with the correct defaultValue. */}
+                  <Select
+                    key={`region-${environment.id}`}
+                    {...conform.select(region)}
+                    variant="tertiary/small"
+                    placeholder={isDev ? "–" : undefined}
+                    dropdownIcon
+                    items={regionItems}
+                    defaultValue={isDev ? undefined : defaultRegion?.name}
+                    value={isDev ? undefined : regionValue}
+                    setValue={isDev ? undefined : (e) => {
+                      if (Array.isArray(e)) return;
+                      setRegionValue(e);
+                    }}
+                    disabled={isDev}
+                  >
+                    {regionItems.map((r) => (
+                      <SelectItem key={r.value} value={r.value}>
+                        {r.label}
+                        {r.isDefault ? " (default)" : ""}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                  {isDev ? (
+                    <Hint>Region is not available in the development environment.</Hint>
+                  ) : (
+                    <Hint>Overrides the region for this run.</Hint>
+                  )}
+                  <FormError id={region.errorId}>{region.error}</FormError>
+                </InputGroup>
+              )}
               <InputGroup>
                 <Label htmlFor={queue.id} variant="small">
                   Queue
@@ -803,6 +867,7 @@ function ScheduledTaskForm({
   templates,
   disableVersionSelection,
   allowArbitraryQueues,
+  regions,
 }: {
   task: ScheduledTaskResult["task"];
   runs: ScheduledRun[];
@@ -812,6 +877,7 @@ function ScheduledTaskForm({
   templates: RunTemplate[];
   disableVersionSelection: boolean;
   allowArbitraryQueues: boolean;
+  regions: Region[];
 }) {
   const environment = useEnvironment();
 
@@ -833,6 +899,12 @@ function ScheduledTaskForm({
   );
   const [queueValue, setQueueValue] = useState<string | undefined>(lastRun?.queue);
   const [machineValue, setMachineValue] = useState<string | undefined>(lastRun?.machinePreset);
+  const isDev = environment.type === "DEVELOPMENT";
+  const defaultRegion = regions.find((r) => r.isDefault);
+  const [regionValue, setRegionValue] = useState<string | undefined>(
+    isDev ? undefined : defaultRegion?.name
+  );
+
   const [maxAttemptsValue, setMaxAttemptsValue] = useState<number | undefined>(
     lastRun?.maxAttempts
   );
@@ -843,6 +915,12 @@ function ScheduledTaskForm({
 
   const [showTemplateCreatedSuccessMessage, setShowTemplateCreatedSuccessMessage] = useState(false);
 
+  const regionItems = regions.map((r) => ({
+    value: r.name,
+    label: r.description ? `${r.name} — ${r.description}` : r.name,
+    isDefault: r.isDefault,
+  }));
+
   const queueItems = queues.map((q) => ({
     value: q.type === "task" ? `task/${q.name}` : q.name,
     label: q.name,
@@ -879,6 +957,7 @@ function ScheduledTaskForm({
       tags,
       version,
       machine,
+      region,
       prioritySeconds,
     },
   ] = useForm({
@@ -1101,6 +1180,45 @@ function ScheduledTaskForm({
             )}
             <FormError id={version.errorId}>{version.error}</FormError>
           </InputGroup>
+          {regionItems.length > 1 && (
+            <InputGroup>
+              <Label htmlFor={region.id} variant="small">
+                Region
+              </Label>
+              {/* Our Select primitive uses Ariakit under the hood, which treats
+                  value={undefined} as uncontrolled, keeping stale internal state when
+                  switching environments. The key forces a remount so it reinitializes
+                  with the correct defaultValue. */}
+              <Select
+                key={`region-${environment.id}`}
+                {...conform.select(region)}
+                variant="tertiary/small"
+                placeholder={isDev ? "–" : undefined}
+                dropdownIcon
+                items={regionItems}
+                defaultValue={isDev ? undefined : defaultRegion?.name}
+                value={isDev ? undefined : regionValue}
+                setValue={isDev ? undefined : (e) => {
+                  if (Array.isArray(e)) return;
+                  setRegionValue(e);
+                }}
+                disabled={isDev}
+              >
+                {regionItems.map((r) => (
+                  <SelectItem key={r.value} value={r.value}>
+                    {r.label}
+                    {r.isDefault ? " (default)" : ""}
+                  </SelectItem>
+                ))}
+              </Select>
+              {isDev ? (
+                <Hint>Region is not available in the development environment.</Hint>
+              ) : (
+                <Hint>Overrides the region for this run.</Hint>
+              )}
+              <FormError id={region.errorId}>{region.error}</FormError>
+            </InputGroup>
+          )}
           <InputGroup>
             <Label htmlFor={queue.id} variant="small">
               Queue
diff --git a/apps/webapp/app/routes/resources.taskruns.$runParam.replay.ts b/apps/webapp/app/routes/resources.taskruns.$runParam.replay.ts
index 5448a9948..eba924f40 100644
--- a/apps/webapp/app/routes/resources.taskruns.$runParam.replay.ts
+++ b/apps/webapp/app/routes/resources.taskruns.$runParam.replay.ts
@@ -7,7 +7,7 @@ import { $replica, prisma } from "~/db.server";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { displayableEnvironment } from "~/models/runtimeEnvironment.server";
 import { logger } from "~/services/logger.server";
-import { requireUserId } from "~/services/session.server";
+import { requireUser } from "~/services/session.server";
 import { sortEnvironments } from "~/utils/environmentSort";
 import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { ReplayTaskRunService } from "~/v3/services/replayTaskRun.server";
@@ -15,6 +15,7 @@ import parseDuration from "parse-duration";
 import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
 import { queueTypeFromType } from "~/presenters/v3/QueueRetrievePresenter.server";
 import { ReplayRunData } from "~/v3/replayTask";
+import { RegionsPresenter } from "~/presenters/v3/RegionsPresenter.server";
 
 const ParamSchema = z.object({
   runParam: z.string(),
@@ -25,7 +26,8 @@ const QuerySchema = z.object({
 });
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
-  const userId = await requireUserId(request);
+  const user = await requireUser(request);
+  const userId = user.id;
   const { runParam } = ParamSchema.parse(params);
   const { environmentIdOverride } = QuerySchema.parse(
     Object.fromEntries(new URL(request.url).searchParams)
@@ -42,6 +44,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       maxAttempts: true,
       maxDurationInSeconds: true,
       machinePreset: true,
+      workerQueue: true,
       ttl: true,
       idempotencyKey: true,
       runTags: true,
@@ -49,6 +52,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       taskIdentifier: true,
       project: {
         select: {
+          slug: true,
           environments: {
             select: {
               id: true,
@@ -108,13 +112,22 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const disableVersionSelection = environment.type === "DEVELOPMENT";
   const allowArbitraryQueues = backgroundWorkers.at(0)?.engine === "V1";
 
-  const payload = await prettyPrintPacket(run.payload, run.payloadType);
+  const [payload, regionsResult] = await Promise.all([
+    prettyPrintPacket(run.payload, run.payloadType),
+    new RegionsPresenter().call({
+      userId,
+      projectSlug: run.project.slug,
+      isAdmin: user.admin || user.isImpersonating,
+    }),
+  ]);
 
   return typedjson({
     concurrencyKey: run.concurrencyKey,
     maxAttempts: run.maxAttempts,
     maxDurationSeconds: run.maxDurationInSeconds,
     machinePreset: run.machinePreset,
+    region: environment.type === "DEVELOPMENT" ? undefined : run.workerQueue,
+    regions: regionsResult.regions,
     ttlSeconds: run.ttl ? parseDuration(run.ttl, "s") ?? undefined : undefined,
     idempotencyKey: run.idempotencyKey,
     runTags: run.runTags,
@@ -194,6 +207,7 @@ export const action: ActionFunction = async ({ request, params }) => {
       maxAttempts: submission.value.maxAttempts,
       maxDurationSeconds: submission.value.maxDurationSeconds,
       machine: submission.value.machine,
+      region: submission.value.region,
       delaySeconds: submission.value.delaySeconds,
       idempotencyKey: submission.value.idempotencyKey,
       idempotencyKeyTTLSeconds: submission.value.idempotencyKeyTTLSeconds,
diff --git a/apps/webapp/app/v3/services/replayTaskRun.server.ts b/apps/webapp/app/v3/services/replayTaskRun.server.ts
index ceaae9539..a5018f51c 100644
--- a/apps/webapp/app/v3/services/replayTaskRun.server.ts
+++ b/apps/webapp/app/v3/services/replayTaskRun.server.ts
@@ -64,7 +64,7 @@ export class ReplayTaskRunService extends BaseService {
       existingTaskRun.engine === "V1" ||
       existingEnvironment.type === "DEVELOPMENT" ||
       authenticatedEnvironment.type === "DEVELOPMENT";
-    const region = ignoreRegion ? undefined : existingTaskRun.workerQueue;
+    const region = ignoreRegion ? undefined : overrideOptions.region ?? existingTaskRun.workerQueue;
 
     try {
       const taskQueue = await this._prisma.taskQueue.findFirst({
diff --git a/apps/webapp/app/v3/services/testTask.server.ts b/apps/webapp/app/v3/services/testTask.server.ts
index d999fed04..0b64367f6 100644
--- a/apps/webapp/app/v3/services/testTask.server.ts
+++ b/apps/webapp/app/v3/services/testTask.server.ts
@@ -28,6 +28,7 @@ export class TestTaskService extends BaseService {
             maxDuration: data.maxDurationSeconds,
             tags: data.tags,
             machine: data.machine,
+            region: data.region,
             lockToVersion: data.version === "latest" ? undefined : data.version,
             priority: data.prioritySeconds,
           },
@@ -66,6 +67,7 @@ export class TestTaskService extends BaseService {
               maxDuration: data.maxDurationSeconds,
               tags: data.tags,
               machine: data.machine,
+              region: data.region,
               lockToVersion: data.version === "latest" ? undefined : data.version,
               priority: data.prioritySeconds,
             },
diff --git a/apps/webapp/app/v3/testTask.ts b/apps/webapp/app/v3/testTask.ts
index bf167ed17..54db301cd 100644
--- a/apps/webapp/app/v3/testTask.ts
+++ b/apps/webapp/app/v3/testTask.ts
@@ -22,6 +22,7 @@ export const RunOptionsData = z.object({
   concurrencyKey: z.string().optional(),
   maxAttempts: z.number().min(1).optional(),
   machine: MachinePresetName.optional(),
+  region: z.string().optional(),
   maxDurationSeconds: z
     .number()
     .min(0)