Improves large output messaging (#2341)

* Adds more information to the large payloads/outputs

* Changes the Download logs button to secondary

Author: samejr

apps/webapp/app/components/runs/v3/PacketDisplay.tsx

@@ -1,7 +1,11 @@
 import { CloudArrowDownIcon } from "@heroicons/react/20/solid";
 import { CodeBlock } from "~/components/code/CodeBlock";
+import { InlineCode } from "~/components/code/InlineCode";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { TextLink } from "~/components/primitives/TextLink";
+import { docsPath } from "~/utils/pathBuilder";
 
 export function PacketDisplay({
   data,
@@ -15,13 +19,26 @@ export function PacketDisplay({
   switch (dataType) {
     case "application/store": {
       return (
-        <div className="flex flex-col">
-          <Paragraph variant="base/bright" className="w-full py-2.5 text-sm">
-            {title}
+        <div className="mt-2 flex flex-col">
+          <Header3>{title}</Header3>
+          <Paragraph variant="small" className="mb-2">
+            This {title.toLowerCase()} exceeded the size limit and was automatically offloaded to
+            object storage. You can retrieve it using{" "}
+            <InlineCode variant="extra-small">runs.retrieve</InlineCode> or download it directly
+            below. <TextLink to={docsPath("limits#task-payloads-and-outputs")}>Learn more</TextLink>
+            .
           </Paragraph>
-          <LinkButton LeadingIcon={CloudArrowDownIcon} to={data} variant="tertiary/medium" download>
-            Download
-          </LinkButton>
+          <div>
+            <LinkButton
+              LeadingIcon={CloudArrowDownIcon}
+              to={data}
+              variant="secondary/small"
+              download
+              className="inline-flex text-text-bright"
+            >
+              Download {title.toLowerCase()}
+            </LinkButton>
+          </div>
         </div>
       );
     }

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -7,7 +7,6 @@ import {
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import {
   formatDurationMilliseconds,
-  MachinePresetName,
   type TaskRunError,
   taskRunErrorEnhancer,
 } from "@trigger.dev/core/v3";
@@ -804,14 +803,15 @@ function RunBody({
               {run.isCached ? "Jump to original run" : "Focus on run"}
             </LinkButton>
           )}
+          <AdminDebugRun friendlyId={run.friendlyId} />
         </div>
-        <AdminDebugRun friendlyId={run.friendlyId} />
         <div className="flex items-center gap-4">
           {run.logsDeletedAt === null ? (
             <LinkButton
               to={v3RunDownloadLogsPath({ friendlyId: runParam })}
               LeadingIcon={CloudArrowDownIcon}
-              variant="tertiary/medium"
+              leadingIconClassName="text-indigo-400"
+              variant="secondary/medium"
               target="_blank"
               download
             >