Merge branch 'feat/system-preference-theme' into feat/light-theme

# Conflicts:
#	apps/webapp/app/routes/account._index/route.tsx

Author: kathiekiwi

.server-changes/agent-detail-metrics-layout.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The agent detail page now matches the shared metrics-page layout: the time filter and pagination sit in a filter row at the top, the activity charts form a tile row beneath it, and the tabs and table flow below in a single page scroll, with the agent config panel as a resizable sidebar on the right.

.server-changes/light-theme.md

@@ -3,4 +3,4 @@ area: webapp
 type: feature
 ---
 
-Adds an opt-in light theme behind a feature flag. When enabled, an Interface theme setting appears on the account page (dark stays the default). Code editors and syntax highlighting use the trigger.light palette.
+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/queue-metrics-dashboard.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Queue metrics and health on the Queues page: per-queue depth, throughput, concurrency, throttling, and scheduling-delay charts, plus a per-queue detail view, live queue stats and a backlog chart on the task detail page, and a waiting-in-queue explainer in the run inspector for runs that have not started yet. Off by default; enabled per organization.

.server-changes/queue-override-reject-above-limit.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: breaking
+---
+
+Setting a queue's concurrency limit above the environment limit is now rejected with a clear error instead of being silently capped. Existing overrides are unaffected.

.server-changes/queue-pages-live-and-clarity.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Queue pages now refresh their live numbers automatically, and the charts are clearer: better axis labels, hover explanations for the headline stats, and the busiest concurrency key named on the chart.

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/assets/images/blurred-dashboard-background-menu-bottom-light.jpg

@@ -1,42 +1,72 @@
 import { type ReactNode } from "react";
 import blurredDashboardBackgroundMenuTop from "~/assets/images/blurred-dashboard-background-menu-top.jpg";
+import blurredDashboardBackgroundMenuTopLight from "~/assets/images/blurred-dashboard-background-menu-top-light.jpg";
 import blurredDashboardBackgroundMenuBottom from "~/assets/images/blurred-dashboard-background-menu-bottom.jpg";
+import blurredDashboardBackgroundMenuBottomLight from "~/assets/images/blurred-dashboard-background-menu-bottom-light.jpg";
 import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-background-table.jpg";
+import blurredDashboardBackgroundTableLight from "~/assets/images/blurred-dashboard-background-table-light.jpg";
+
+/* Blurred dashboard screenshots; the -light set is the same artwork with the
+   lightness inverted for the light theme. */
+const BACKDROPS = [
+  {
+    images: {
+      menuTop: blurredDashboardBackgroundMenuTop,
+      menuBottom: blurredDashboardBackgroundMenuBottom,
+      table: blurredDashboardBackgroundTable,
+    },
+    tableFill: "#101214",
+    className: "hidden lg:block light:lg:hidden",
+  },
+  {
+    images: {
+      menuTop: blurredDashboardBackgroundMenuTopLight,
+      menuBottom: blurredDashboardBackgroundMenuBottomLight,
+      table: blurredDashboardBackgroundTableLight,
+    },
+    tableFill: "#f4f5f7",
+    className: "hidden light:lg:block",
+  },
+];
 
 export function BackgroundWrapper({ children }: { children: ReactNode }) {
   return (
     <div className="relative h-full w-full overflow-hidden bg-background-dimmed lg:bg-transparent">
-      <div
-        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-top-left bg-no-repeat lg:block"
-        style={{
-          backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
-          aspectRatio: "auto",
-          height: "100vh",
-          backgroundSize: "260px auto",
-        }}
-      />
+      {BACKDROPS.map(({ images, tableFill, className }) => (
+        <div key={tableFill} className={className}>
+          <div
+            className="absolute left-0 top-0 w-[260px] bg-contain bg-top-left bg-no-repeat"
+            style={{
+              backgroundImage: `url(${images.menuTop})`,
+              aspectRatio: "auto",
+              height: "100vh",
+              backgroundSize: "260px auto",
+            }}
+          />
 
-      <div
-        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-bottom-left bg-no-repeat lg:block"
-        style={{
-          backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
-          aspectRatio: "auto",
-          height: "100vh",
-          backgroundSize: "260px auto",
-        }}
-      />
+          <div
+            className="absolute bottom-0 left-0 w-[260px] bg-contain bg-bottom-left bg-no-repeat"
+            style={{
+              backgroundImage: `url(${images.menuBottom})`,
+              aspectRatio: "auto",
+              height: "100vh",
+              backgroundSize: "260px auto",
+            }}
+          />
 
-      <div
-        className="absolute top-0 hidden bg-top-left bg-no-repeat lg:block"
-        style={{
-          left: "260px",
-          backgroundImage: `url(${blurredDashboardBackgroundTable})`,
-          width: "100%",
-          height: "100vh",
-          backgroundSize: "1200px auto",
-          backgroundColor: "#101214",
-        }}
-      />
+          <div
+            className="absolute top-0 bg-top-left bg-no-repeat"
+            style={{
+              left: "260px",
+              backgroundImage: `url(${images.table})`,
+              width: "100%",
+              height: "100vh",
+              backgroundSize: "1200px auto",
+              backgroundColor: tableFill,
+            }}
+          />
+        </div>
+      ))}
 
       <div className="relative z-10 h-full w-full">{children}</div>
     </div>