feat(webapp): Themes + contrast settings update

.changeset/vite-ignore-optional-imports.md

@@ -2,4 +2,4 @@
 "@trigger.dev/sdk": patch
 ---
 
-Suppress a build-time warning that could appear in Vite-based projects when the optional `@ai-sdk/otel` package is not installed.
+Annotate the optional `@ai-sdk/otel` dynamic import with `@vite-ignore` so Vite-based bundlers don't warn about an unanalyzable import.

.gitignore

@@ -76,3 +76,6 @@ apps/**/public/build
 ailogger-output.log
 # per-package vitest timing capture (transient; merged into root test-timings.json)
 .vitest-timing.json
+
+# local git worktree checkouts (not source) — keeps oxfmt/oxlint from descending into them
+.worktrees/

.server-changes/default-billing-alerts.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Organizations without billing alerts now get default spend alert thresholds, so you're notified before usage grows unexpectedly. The billing limit page no longer pre-selects an option before you've set a limit and prompts you to configure one. Alert previews now update immediately after you change your billing limit.

.server-changes/entrypoint-no-log-db-connection-strings.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Container startup no longer prints database and ClickHouse connection strings (with credentials) to the logs.

.server-changes/light-theme.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Adds an opt-in Interface theme setting on the account page behind a feature flag. Choose Classic (the default), System preference (follows your OS), Dark, or Light, and fine-tune the new themes with a contrast slider. System preference switches automatically when your OS appearance changes.

.server-changes/realtime-emission-fanout-metrics.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Add metrics to the realtime backend that measure how often a single changed run is served to multiple subscriptions in one batch.

.server-changes/supervisor-outbound-request-metrics.md

@@ -0,0 +1,6 @@
+---
+area: supervisor
+type: improvement
+---
+
+Improved supervisor observability: it now reports metrics for its outbound requests, making failed calls to upstream services easier to monitor.

apps/supervisor/src/index.ts

@@ -22,7 +22,7 @@ import {
   isKubernetesEnvironment,
 } from "@trigger.dev/core/v3/serverOnly";
 import { createK8sApi, createApiserverMetricsFetcher } from "./clients/kubernetes.js";
-import { collectDefaultMetrics, Gauge, Histogram } from "prom-client";
+import { collectDefaultMetrics, Counter, Gauge, Histogram } from "prom-client";
 import { register } from "./metrics.js";
 import { PodCleaner } from "./services/podCleaner.js";
 import { FailedPodHandler } from "./services/failedPodHandler.js";
@@ -60,6 +60,21 @@ const workloadCreateDuration = new Histogram({
   registers: [register],
 });
 
+const outboundRequestsTotal = new Counter({
+  name: "supervisor_outbound_request_total",
+  help: "Count of outbound HTTP requests from the supervisor, by target name, method, response status, and outcome (ok, http_error, invalid_response, network_error).",
+  labelNames: ["name", "method", "status", "outcome"],
+  registers: [register],
+});
+
+const outboundRequestDuration = new Histogram({
+  name: "supervisor_outbound_request_duration_seconds",
+  help: "Duration of outbound HTTP requests from the supervisor, by target name and outcome. Includes the HTTP client's internal retries and backoff.",
+  labelNames: ["name", "outcome"],
+  buckets: [0.005, 0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1, 2, 5, 10, 11, 12.5, 15, 20, 30, 60],
+  registers: [register],
+});
+
 class ManagedSupervisor {
   private readonly workerSession: SupervisorSession;
   private readonly metricsServer?: HttpServer;
@@ -322,6 +337,10 @@ class ManagedSupervisor {
       runNotificationsEnabled: env.TRIGGER_WORKLOAD_API_ENABLED,
       heartbeatIntervalSeconds: env.TRIGGER_WORKER_HEARTBEAT_INTERVAL_SECONDS,
       sendRunDebugLogs: env.SEND_RUN_DEBUG_LOGS,
+      onHttpRequestComplete: ({ name, method, status, outcome, durationMs }) => {
+        outboundRequestsTotal.inc({ name, method, status, outcome });
+        outboundRequestDuration.observe({ name, outcome }, durationMs / 1000);
+      },
       preDequeue: async () => {
         // Synchronous, hot-path-safe cached read; false when no monitors are active.
         const skipForBackpressure = this.backpressureMonitors.some((m) => m.shouldSkipDequeue());
@@ -692,6 +711,18 @@ class ManagedSupervisor {
       headers.traceparent = traceparent;
     }
 
+    const requestStart = performance.now();
+    const record = (
+      status: string,
+      outcome: "ok" | "http_error" | "invalid_response" | "network_error"
+    ) => {
+      outboundRequestsTotal.inc({ name: "warm_start", method: "POST", status, outcome });
+      outboundRequestDuration.observe(
+        { name: "warm_start", outcome },
+        (performance.now() - requestStart) / 1000
+      );
+    };
+
     try {
       const res = await fetch(warmStartUrlWithPath.href, {
         method: "POST",
@@ -700,8 +731,10 @@ class ManagedSupervisor {
       });
 
       if (!res.ok) {
+        record(String(res.status), "http_error");
         this.logger.error("Warm start failed", {
           runId: dequeuedMessage.run.id,
+          statusCode: res.status,
         });
         return false;
       }
@@ -710,15 +743,19 @@ class ManagedSupervisor {
       const parsedData = z.object({ didWarmStart: z.boolean() }).safeParse(data);
 
       if (!parsedData.success) {
+        record(String(res.status), "invalid_response");
         this.logger.error("Warm start response invalid", {
           runId: dequeuedMessage.run.id,
           data,
         });
         return false;
       }
 
+      record(String(res.status), "ok");
+
       return parsedData.data.didWarmStart;
     } catch (error) {
+      record("none", "network_error");
       this.logger.error("Warm start error", {
         runId: dequeuedMessage.run.id,
         error,

apps/supervisor/src/workloadToken.ts

@@ -4,7 +4,7 @@ import {
   type WorkloadDeploymentTokenClaims,
   type WorkloadDeploymentTokenInput,
 } from "@trigger.dev/core/v3";
-import { Counter } from "prom-client";
+import { Counter, Gauge } from "prom-client";
 import { env } from "./env.js";
 import { register } from "./metrics.js";
 
@@ -37,6 +37,16 @@ const verifyCounter = new Counter({
   registers: [register],
 });
 
+// Exports the active mode (value 1 for the current WORKLOAD_TOKEN_ENFORCEMENT) so dashboards can show
+// disabled/log/enforce at a glance — the counters alone don't distinguish log from enforce.
+const enforcementModeGauge = new Gauge({
+  name: "workload_token_enforcement_mode",
+  help: "Active runner-boundary auth mode: value 1 for the label matching WORKLOAD_TOKEN_ENFORCEMENT",
+  labelNames: ["mode"] as const,
+  registers: [register],
+});
+enforcementModeGauge.set({ mode: env.WORKLOAD_TOKEN_ENFORCEMENT }, 1);
+
 export async function mintDeploymentToken(
   claims: WorkloadDeploymentTokenInput
 ): Promise<string | undefined> {

apps/webapp/app/assets/icons/MachineIcon.tsx

@@ -48,28 +48,33 @@ export function MachineDefaultIcon({ className }: { className?: string }) {
 
 function MachineIconNoMachine({ className }: { className?: string }) {
   return (
-    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={cn("text-[#D7D9DD] light:text-charcoal-500", className)}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H6.18945C6.25882 16.9453 6.32663 16.8872 6.39062 16.8232L10.2139 13H16.1875Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M4.84961 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H8.84961L4.84961 12ZM16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H11.2139L15.2139 8H16.1875Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M9.85059 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H13.8506L9.85059 7Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <line
         x1="3"
         y1="16.9998"
         x2="17.0018"
         y2="2.99805"
-        stroke="#D7D9DD"
+        stroke="currentColor"
         strokeOpacity="0.4"
         strokeWidth="2"
         strokeLinecap="round"
@@ -83,17 +88,17 @@ function MachineIconMicro({ className }: { className?: string }) {
     <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -109,12 +114,12 @@ function MachineIconSmall1x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -130,12 +135,12 @@ function MachineIconSmall2x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -155,7 +160,7 @@ function MachineIconMedium1x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>
@@ -175,7 +180,7 @@ function MachineIconMedium2x({ className }: { className?: string }) {
       />
       <path
         d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
-        fill="#D7D9DD"
+        fill="currentColor"
         fillOpacity="0.4"
       />
     </svg>

apps/webapp/app/components/AskAI.tsx

@@ -458,7 +458,7 @@ function ChatMessages({
         <div className="flex flex-col">
           <Callout variant="error" className="mb-4">
             <Paragraph className="font-semibold text-error">Error generating answer:</Paragraph>
-            <Paragraph className="text-rose-300">
+            <Paragraph className="text-rose-500 dark:text-rose-300">
               {error} If the problem persists after retrying, please contact support.
             </Paragraph>
           </Callout>