From b4cc25aa4e481fdc2fc88685e7fb003f6750122a Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Tue, 15 Jul 2025 17:50:04 +0100
Subject: [PATCH 1/3] Use sexy scrollbars for templates and recent runs popover
 content

@Nick this is for you!!1
---
 .../route.tsx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 b3bc0802bc..f104a4e545 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
@@ -1317,7 +1317,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
-        <div className="max-h-80 overflow-y-auto">
+        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="p-1">
             {runs.map((run) => (
               <button
@@ -1398,7 +1398,7 @@ function RunTemplatesPopover({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
-          <div className="max-h-80 overflow-y-auto">
+          <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <div className="p-1">
               {templates.map((template) => (
                 <div

From 1dadc8ed9d6261d812a4aef025730ffc5943e6d7 Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Tue, 15 Jul 2025 17:50:31 +0100
Subject: [PATCH 2/3] Fix TabButton component disabled state

---
 apps/webapp/app/components/primitives/Tabs.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/Tabs.tsx b/apps/webapp/app/components/primitives/Tabs.tsx
index 2a61062cae..e3d3183d94 100644
--- a/apps/webapp/app/components/primitives/Tabs.tsx
+++ b/apps/webapp/app/components/primitives/Tabs.tsx
@@ -94,7 +94,11 @@ export function TabButton({
 
   return (
     <button
-      className={cn("group flex flex-col items-center pt-1 focus-custom", props.className)}
+      className={cn(
+        "group flex flex-col items-center pt-1 focus-custom",
+        props.className,
+        props.disabled && "pointer-events-none opacity-50"
+      )}
       type="button"
       ref={ref}
       {...props}

From cf15a3a063a1ba215e7e9dd9347cad348ad33cfa Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Tue, 15 Jul 2025 17:52:09 +0100
Subject: [PATCH 3/3] Disable payload tab when replaying runs with large
 payloads

---
 .../app/components/runs/v3/PacketDisplay.tsx  |  2 +-
 .../components/runs/v3/ReplayRunDialog.tsx    | 37 ++++++++++++++-----
 .../app/v3/services/replayTaskRun.server.ts   |  7 ++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
index 4da733f2c0..5d5878a93d 100644
--- a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
+++ b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
@@ -16,7 +16,7 @@ export function PacketDisplay({
     case "application/store": {
       return (
         <div className="flex flex-col">
-          <Paragraph variant="base/bright" className="w-full border-b border-grid-dimmed py-2.5">
+          <Paragraph variant="base/bright" className="w-full py-2.5 text-sm">
             {title}
           </Paragraph>
           <LinkButton LeadingIcon={CloudArrowDownIcon} to={data} variant="tertiary/medium" download>
diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index e2e68a9038..83490aee11 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -34,6 +34,8 @@ import { RectangleStackIcon } from "@heroicons/react/20/solid";
 import { Badge } from "~/components/primitives/Badge";
 import { RunTagInput } from "./RunTagInput";
 import { MachinePresetName } from "@trigger.dev/core/v3";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
+import { divide } from "effect/Duration";
 
 type ReplayRunDialogProps = {
   runFriendlyId: string;
@@ -165,7 +167,7 @@ function ReplayForm({
     replayData.payloadType === "application/json" ||
     replayData.payloadType === "application/super+json";
 
-  const [tab, setTab] = useState<"payload" | "metadata">("payload");
+  const [tab, setTab] = useState<"payload" | "metadata">(editablePayload ? "payload" : "metadata");
 
   const { defaultTaskQueue } = replayData;
 
@@ -257,15 +259,30 @@ function ReplayForm({
               additionalActions={
                 <TabContainer className="flex grow items-baseline justify-between self-end border-none">
                   <div className="flex gap-5">
-                    <TabButton
-                      isActive={tab === "payload"}
-                      layoutId="replay-editor"
-                      onClick={() => {
-                        setTab("payload");
-                      }}
-                    >
-                      Payload
-                    </TabButton>
+                    <div className="flex items-center gap-1.5">
+                      <TabButton
+                        disabled={!editablePayload}
+                        isActive={tab === "payload"}
+                        layoutId="replay-editor"
+                        onClick={() => {
+                          setTab("payload");
+                        }}
+                      >
+                        Payload
+                      </TabButton>
+                      {!editablePayload && (
+                        <InfoIconTooltip
+                          content={
+                            <span className="text-sm">
+                              Payload is not editable for runs with{" "}
+                              <TextLink to={docsPath("triggering#large-payloads")}>
+                                large payloads.
+                              </TextLink>
+                            </span>
+                          }
+                        />
+                      )}
+                    </div>
                     <TabButton
                       isActive={tab === "metadata"}
                       layoutId="replay-editor"
diff --git a/apps/webapp/app/v3/services/replayTaskRun.server.ts b/apps/webapp/app/v3/services/replayTaskRun.server.ts
index dbcd26af90..e29b5d423a 100644
--- a/apps/webapp/app/v3/services/replayTaskRun.server.ts
+++ b/apps/webapp/app/v3/services/replayTaskRun.server.ts
@@ -122,6 +122,13 @@ export class ReplayTaskRunService extends BaseService {
     existingTaskRun: TaskRun,
     stringifiedPayloadOverride: string | undefined
   ) {
+    if (existingTaskRun.payloadType === "application/store") {
+      return conditionallyImportPacket({
+        data: existingTaskRun.payload,
+        dataType: existingTaskRun.payloadType,
+      });
+    }
+
     if (stringifiedPayloadOverride && existingTaskRun.payloadType === "application/super+json") {
       const newPayload = await replaceSuperJsonPayload(
         existingTaskRun.payload,