Merge branch 'main' into fix/tri-12817-sidebar-feedback-popover

Author: isshaddad

.changeset/chat-agent-preload-oom-recovery.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Fix a preloaded `chat.agent` run dropping an in-flight message when it retries after an out-of-memory error. The message being processed when the run hit the OOM is now recovered and re-run on the retry, instead of being skipped while the run waited for a new message.

.changeset/chat-handover-cursor-off-by-one.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Fix a chunk occasionally dropped when a chat.agent run takes over from the warm first turn. The realtime stream writer now reports the inclusive last-written position as the resume cursor, so the agent's first record after the handover is no longer skipped.

.changeset/chat-session-caught-up-resume.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/core": patch
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+---
+
+`AgentChat.reconnect()` now settles promptly when reconnecting to an idle chat instead of holding the connection open for the full long-poll window. Also upgrades the S2 streamstore client to 0.25 and moves realtime streams to S2's current hosts.

.github/workflows/e2e-webapp.yml

@@ -15,7 +15,7 @@ jobs:
   e2eTests:
     name: "🧪 E2E Tests: Webapp"
     runs-on: warp-ubuntu-latest-x64-16x
-    timeout-minutes: 20
+    timeout-minutes: 30
     env:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
     steps:
@@ -80,6 +80,8 @@ jobs:
           docker pull postgres:14
           docker pull redis:7.2
           docker pull testcontainers/ryuk:0.11.0
+          docker pull ghcr.io/s2-streamstore/s2:0.40.0@sha256:b26249e2ede0949755f5af8028185dc2bcfc3aa2db21eb9610543d144eb6ee9d
+          docker pull minio/minio:latest
           echo "Image pre-pull complete"
 
       - name: 📥 Download deps
@@ -91,6 +93,9 @@ jobs:
       - name: 🏗️ Build Webapp
         run: pnpm run build --filter webapp
 
+      - name: 🎭 Install Playwright Chromium
+        run: cd apps/webapp && pnpm exec playwright install chromium
+
       - name: 🧪 Run Webapp E2E Tests
         run: cd apps/webapp && pnpm exec vitest run --config vitest.e2e.config.ts --reporter=default
         env:

.server-changes/fix-runs-list-batch-drop-on-unparseable-json.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fixed a rare case where a single run or span carrying data that could not be ingested would make other runs or trace events in the same batch go missing from the runs list, traces, and logs. Now the rest of the batch is always kept: an affected run still appears with its status (only its un-ingestable output is dropped), and an affected trace event or payload is skipped instead of taking down everything around it.

.server-changes/worker-deployment-lookup-ordering.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Speeds up resolving the latest worker version and deployment for an environment, removing an occasional stall when triggering runs in projects that have accumulated many deployed versions.

apps/webapp/app/components/layout/MetricsLayout.tsx

@@ -175,10 +175,12 @@ function MetricsLayoutMain({ children, scroll }: { children: ReactNode; scroll:
   return (
     <div className="flex h-full min-h-0 flex-col">
       {filters}
+      {/* overflow-x-clip: without it `overflow-y-auto` promotes x to auto and wide content drags
+          the charts sideways. Wide children must scroll in their own container. */}
       <div
         className={
           scroll === "page"
-            ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+            ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto overflow-x-clip py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             : "flex min-h-0 flex-1 flex-col overflow-hidden"
         }
       >
@@ -286,7 +288,7 @@ function MetricsLayoutFilters({
   return (
     <div
       className={cn(
-        "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3",
+        "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed px-2",
         className
       )}
     >

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

@@ -1,6 +1,6 @@
 import { cn } from "~/utils/cn";
 
-const headerVariants = {
+export const headerVariants = {
   header1: {
     text: "font-sans text-2xl leading-5 md:leading-6 lg:leading-7 font-semibold tracking-tight",
     spacing: "mb-2",

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

@@ -181,7 +181,7 @@ type TableCellBasicProps = {
 type TableHeaderCellProps = TableCellBasicProps & {
   hiddenLabel?: boolean;
   tooltip?: ReactNode;
-  /** Extra class merged onto the tooltip content — e.g. widen it past the default max-width. */
+  /** Extra class merged onto the tooltip content. */
   tooltipContentClassName?: string;
   disableTooltipHoverableContent?: boolean;
   /**

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

@@ -3,9 +3,19 @@ import { motion } from "framer-motion";
 import { type ReactNode, useRef } from "react";
 import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
+import { headerVariants } from "./Headers";
 import { ShortcutKey } from "./ShortcutKey";
 
-export type Variants = "underline" | "pipe-divider" | "segmented";
+/** `"title"` names the table below it: header2 text, filter-bar height, underline on the border. */
+export type Variants = "underline" | "pipe-divider" | "segmented" | "title";
+
+/** Shared with `TitleBar` so the tabbed and tab-less bars match. */
+export const TITLE_BAR_CHROME = "flex h-10 shrink-0 gap-x-6 border-b border-grid-bright";
+
+const titleTabLabel = cn(headerVariants.header2.text, "transition duration-200");
+const titleTabIndicator = "h-0.5 w-full bg-indigo-500";
+const titleTabIndicatorIdle =
+  "h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100";
 
 export type TabsProps = {
   tabs: {
@@ -58,6 +68,10 @@ export function TabContainer({
     );
   }
 
+  if (variant === "title") {
+    return <div className={cn(TITLE_BAR_CHROME, "items-stretch", className)}>{children}</div>;
+  }
+
   if (variant === "underline") {
     return (
       <div className={cn(`flex gap-x-6 border-b border-grid-bright`, className)}>{children}</div>
@@ -117,6 +131,39 @@ export function TabLink({
     );
   }
 
+  if (variant === "title") {
+    return (
+      <NavLink to={to} className="group flex h-full flex-col focus-custom" end={end}>
+        {({ isActive, isPending }) => {
+          const active = isActive || isPending;
+          return (
+            <>
+              <div className="flex flex-1 items-center">
+                <span
+                  className={cn(
+                    titleTabLabel,
+                    active ? "text-text-bright" : "text-text-dimmed group-hover:text-text-bright"
+                  )}
+                >
+                  {children}
+                </span>
+              </div>
+              {active ? (
+                <motion.div
+                  layoutId={layoutId}
+                  transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                  className={titleTabIndicator}
+                />
+              ) : (
+                <div className={titleTabIndicatorIdle} />
+              )}
+            </>
+          );
+        }}
+      </NavLink>
+    );
+  }
+
   if (variant === "pipe-divider") {
     return (
       <NavLink
@@ -177,11 +224,13 @@ export function TabButton({
   isActive,
   layoutId,
   shortcut,
+  variant = "underline",
   ...props
 }: {
   isActive: boolean;
   shortcut?: ShortcutDefinition;
   layoutId: string;
+  variant?: Variants;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -197,10 +246,13 @@ export function TabButton({
     });
   }
 
+  const title = variant === "title";
+
   return (
     <button
       className={cn(
-        "group flex flex-col items-center pt-1 focus-custom",
+        "group flex flex-col items-center focus-custom",
+        title ? "h-full" : "pt-1",
         props.className,
         props.disabled && "pointer-events-none opacity-50"
       )}
@@ -209,8 +261,18 @@ export function TabButton({
       {...props}
     >
       <>
-        <div className="flex items-center gap-1">
-          <span className={"text-sm transition duration-200 text-text-bright"}>
+        <div className={cn("flex items-center gap-1", title && "flex-1")}>
+          <span
+            className={cn(
+              "transition duration-200",
+              title
+                ? cn(
+                    headerVariants.header2.text,
+                    isActive ? "text-text-bright" : "text-text-dimmed group-hover:text-text-bright"
+                  )
+                : "text-sm text-text-bright"
+            )}
+          >
             {props.children}
           </span>
           {shortcut && <ShortcutKey className={cn("")} shortcut={shortcut} variant={"small"} />}
@@ -219,10 +281,15 @@ export function TabButton({
           <motion.div
             layoutId={layoutId}
             transition={{ type: "spring", stiffness: 500, damping: 30 }}
-            className="mt-1 h-0.5 w-full bg-indigo-500"
+            className={cn("h-0.5 w-full bg-indigo-500", !title && "mt-1")}
           />
         ) : (
-          <div className="mt-1 h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100" />
+          <div
+            className={cn(
+              "h-0.5 w-full bg-surface-control-active opacity-0 transition duration-200 group-hover:opacity-100",
+              !title && "mt-1"
+            )}
+          />
         )}
       </>
     </button>