From f389eadcf4f527df3a6fe292d437c64ed9105d67 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 11:35:19 +0100
Subject: [PATCH 01/15] Change the color to indigo

---
 .../resources.orgs.$organizationSlug.select-plan.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 1d96293d0d..e98f6bd2a7 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -801,7 +801,7 @@ function TierContainer({
     <div
       className={cn(
         "flex w-full min-w-[16rem] flex-col p-6",
-        isHighlighted ? "border border-primary" : "border border-grid-dimmed",
+        isHighlighted ? "border border-indigo-500" : "border border-grid-dimmed",
         className
       )}
     >
@@ -832,7 +832,10 @@ function PricingHeader({
   return (
     <div className="flex flex-col gap-2">
       <h2
-        className={cn("text-xl font-medium", isHighlighted ? "text-primary" : "text-text-dimmed")}
+        className={cn(
+          "text-xl font-medium",
+          isHighlighted ? "text-indigo-500" : "text-text-dimmed"
+        )}
       >
         {title}
       </h2>

From 5e2aa4d828aaa84f91b533bc9fecc55293c97ff7 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 11:58:03 +0100
Subject: [PATCH 02/15] Pro tier pricing information now matches the marketing
 site

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 143 +++++++++++++-----
 1 file changed, 107 insertions(+), 36 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index e98f6bd2a7..30d2266dd5 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -168,6 +168,10 @@ const pricingDefinitions = {
     title: "Concurrent runs",
     content: "The number of runs that can be executed at the same time.",
   },
+  additionalConcurrency: {
+    title: "Additional concurrency",
+    content: "Then $50/month per 50",
+  },
   taskRun: {
     title: "Task runs",
     content: "A single execution of a task.",
@@ -185,6 +189,10 @@ const pricingDefinitions = {
     title: "Schedules",
     content: "You can attach recurring schedules to tasks using cron syntax.",
   },
+  additionalSchedules: {
+    title: "Additional schedules",
+    content: "Then $10/month per 1,000",
+  },
   alerts: {
     title: "Alert destination",
     content:
@@ -195,6 +203,14 @@ const pricingDefinitions = {
     content:
       "Realtime allows you to send the live status and data from your runs to your frontend. This is the number of simultaneous Realtime connections that can be made.",
   },
+  additionalRealtimeConnections: {
+    title: "Additional Realtime connections",
+    content: "Then $10/month per 100",
+  },
+  additionalSeats: {
+    title: "Additional seats",
+    content: "Then $20/month per seat",
+  },
 };
 
 type PricingPlansProps = {
@@ -499,7 +515,7 @@ export function TierFree({
             <LogRetention limits={plan.limits} />
             <SupportLevel limits={plan.limits} />
             <Alerts limits={plan.limits} />
-            <RealtimeConnecurrency limits={plan.limits} />
+            <RealtimeConcurrency limits={plan.limits} />
           </ul>
         </>
       )}
@@ -614,7 +630,7 @@ export function TierHobby({
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits} />
       </ul>
     </TierContainer>
   );
@@ -713,7 +729,7 @@ export function TierPro({
           )}
         </div>
       </Form>
-      <ul className="flex flex-col gap-2.5">
+      {/* <ul className="flex flex-col gap-2.5">
         <ConcurrentRuns limits={plan.limits} />
         <FeatureItem checked>
           Unlimited{" "}
@@ -731,6 +747,29 @@ export function TierPro({
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
         <RealtimeConnecurrency limits={plan.limits} />
+      </ul> */}
+      <ul className="flex flex-col gap-2.5">
+        <ConcurrentRuns limits={plan.limits}>
+          {pricingDefinitions.additionalConcurrency.content}
+        </ConcurrentRuns>
+        <FeatureItem checked>
+          Unlimited{" "}
+          <DefinitionTip
+            title={pricingDefinitions.tasks.title}
+            content={pricingDefinitions.tasks.content}
+          >
+            tasks
+          </DefinitionTip>
+        </FeatureItem>
+        <TeamMembers limits={plan.limits}>{pricingDefinitions.additionalSeats.content}</TeamMembers>
+        <Environments limits={plan.limits} />
+        <Schedules limits={plan.limits}>{pricingDefinitions.additionalSchedules.content}</Schedules>
+        <LogRetention limits={plan.limits} />
+        <SupportLevel limits={plan.limits} />
+        <Alerts limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits}>
+          {pricingDefinitions.additionalRealtimeConnections.content}
+        </RealtimeConcurrency>
       </ul>
     </TierContainer>
   );
@@ -891,16 +930,16 @@ function FeatureItem({
   children: React.ReactNode;
 }) {
   return (
-    <li className="flex items-center gap-2">
+    <li className="flex items-start gap-2">
       {checked ? (
         <CheckIcon
           className={cn(
-            "size-4 min-w-4",
+            "mt-0.5 size-4 min-w-4",
             checkedColor === "primary" ? "text-primary" : "text-text-bright"
           )}
         />
       ) : (
-        <XMarkIcon className="size-4 min-w-4 text-charcoal-500" />
+        <XMarkIcon className="size-4 text-charcoal-500" />
       )}
       <div
         className={cn(
@@ -914,26 +953,42 @@ function FeatureItem({
   );
 }
 
-function ConcurrentRuns({ limits }: { limits: Limits }) {
+function ConcurrentRuns({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.concurrentRuns.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.concurrentRuns.title}
-        content={pricingDefinitions.concurrentRuns.content}
-      >
-        concurrent runs
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.concurrentRuns.canExceed ? (
+            <>
+              {limits.concurrentRuns.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.concurrentRuns.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.concurrentRuns.title}
+            content={pricingDefinitions.concurrentRuns.content}
+          >
+            concurrent runs
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
 
-function TeamMembers({ limits }: { limits: Limits }) {
+function TeamMembers({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.teamMembers.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""} team members
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.teamMembers.number}
+          {limits.teamMembers.canExceed ? "+" : ""} team members
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -952,17 +1007,22 @@ function Environments({ limits }: { limits: Limits }) {
   );
 }
 
-function Schedules({ limits }: { limits: Limits }) {
+function Schedules({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.schedules.number}
-      {limits.schedules.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.schedules.title}
-        content={pricingDefinitions.schedules.content}
-      >
-        schedules
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.schedules.number}
+          {limits.schedules.canExceed ? "+" : ""}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.schedules.title}
+            content={pricingDefinitions.schedules.content}
+          >
+            schedules
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -1007,17 +1067,28 @@ function Alerts({ limits }: { limits: Limits }) {
   );
 }
 
-function RealtimeConnecurrency({ limits }: { limits: Limits }) {
+function RealtimeConcurrency({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.realtimeConcurrentConnections.number}
-      {limits.realtimeConcurrentConnections.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.realtime.title}
-        content={pricingDefinitions.realtime.content}
-      >
-        concurrent Realtime connections
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-start gap-1">
+          {limits.realtimeConcurrentConnections.canExceed ? (
+            <>
+              {limits.realtimeConcurrentConnections.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.realtimeConcurrentConnections.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.realtime.title}
+            content={pricingDefinitions.realtime.content}
+          >
+            concurrent Realtime connections
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }

From 05a0f4f25d3dad1690341e9540a91e49ace50345 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 12:15:37 +0100
Subject: [PATCH 03/15] Update the button styles to secondary

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 30d2266dd5..2b105d5be1 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -393,7 +393,7 @@ export function TierFree({
             <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} key="cancel">
               <DialogTrigger asChild>
                 <div className="my-6">
-                  <Button variant="tertiary/large" fullWidth className="text-md font-medium">
+                  <Button variant="secondary/large" fullWidth className="text-md font-medium">
                     {`Downgrade to ${plan.title}`}
                   </Button>
                 </div>
@@ -592,7 +592,7 @@ export function TierHobby({
           </Dialog>
         ) : (
           <Button
-            variant={isHighlighted ? "primary/large" : "tertiary/large"}
+            variant={isHighlighted ? "primary/large" : "secondary/large"}
             fullWidth
             className="text-md font-medium"
             form="subscribe-hobby"
@@ -704,7 +704,7 @@ export function TierPro({
             </Dialog>
           ) : (
             <Button
-              variant="tertiary/large"
+              variant="secondary/large"
               fullWidth
               form="subscribe-pro"
               className="text-md font-medium"
@@ -729,25 +729,6 @@ export function TierPro({
           )}
         </div>
       </Form>
-      {/* <ul className="flex flex-col gap-2.5">
-        <ConcurrentRuns limits={plan.limits} />
-        <FeatureItem checked>
-          Unlimited{" "}
-          <DefinitionTip
-            title={pricingDefinitions.tasks.title}
-            content={pricingDefinitions.tasks.content}
-          >
-            tasks
-          </DefinitionTip>
-        </FeatureItem>
-        <TeamMembers limits={plan.limits} />
-        <Environments limits={plan.limits} />
-        <Schedules limits={plan.limits} />
-        <LogRetention limits={plan.limits} />
-        <SupportLevel limits={plan.limits} />
-        <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
-      </ul> */}
       <ul className="flex flex-col gap-2.5">
         <ConcurrentRuns limits={plan.limits}>
           {pricingDefinitions.additionalConcurrency.content}
@@ -816,7 +797,7 @@ export function TierEnterprise() {
           <Feedback
             defaultValue="enterprise"
             button={
-              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded bg-tertiary px-8 text-base font-medium transition hover:bg-charcoal-600">
+              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-charcoal-600 bg-tertiary text-base font-medium transition hover:border-charcoal-550 hover:bg-charcoal-600">
                 <span className="text-center text-text-bright">Contact us</span>
               </div>
             }

From a22e189427080c42685e147e8230593ea723fa96 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 15:28:39 +0100
Subject: [PATCH 04/15] WIP adding separate links to Parent and Root runs

---
 .../route.tsx                                 | 139 +++++++++++-------
 1 file changed, 86 insertions(+), 53 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index a733a2b9b5..8c2d5b0828 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -95,6 +95,7 @@ import {
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
+import { TextLink } from "~/components/primitives/TextLink";
 
 const resizableSettings = {
   parent: {
@@ -587,16 +588,31 @@ function TasksTreeView({
         >
           <div className="grid h-full grid-rows-[2rem_1fr] overflow-hidden">
             <div className="flex items-center pr-2">
-              {rootRun ? (
-                <ShowParentLink
-                  runFriendlyId={rootRun.friendlyId}
-                  isRoot={true}
-                  spanId={rootRun.spanId}
+              {rootRun || parentRunFriendlyId ? (
+                <ShowParentOrRootLinks
+                  relationships={{
+                    root: rootRun
+                      ? {
+                          friendlyId: rootRun.friendlyId,
+                          taskIdentifier: rootRun.taskIdentifier,
+                          spanId: rootRun.spanId,
+                          isParent: parentRunFriendlyId
+                            ? rootRun.friendlyId === parentRunFriendlyId
+                            : true,
+                        }
+                      : undefined,
+                    parent:
+                      parentRunFriendlyId && rootRun?.friendlyId !== parentRunFriendlyId
+                        ? {
+                            friendlyId: parentRunFriendlyId,
+                            taskIdentifier: "",
+                            spanId: "",
+                          }
+                        : undefined,
+                  }}
                 />
-              ) : parentRunFriendlyId ? (
-                <ShowParentLink runFriendlyId={parentRunFriendlyId} isRoot={false} />
               ) : (
-                <Paragraph variant="small" className="flex-1 text-charcoal-500">
+                <Paragraph variant="extra-small" className="flex-1 text-charcoal-500">
                   This is the root task
                 </Paragraph>
               )}
@@ -1126,60 +1142,77 @@ function TaskLine({ isError, isSelected }: { isError: boolean; isSelected: boole
   return <div className={cn("h-8 w-2 border-r border-grid-bright")} />;
 }
 
-function ShowParentLink({
-  runFriendlyId,
-  spanId,
-  isRoot,
+function ShowParentOrRootLinks({
+  relationships,
 }: {
-  runFriendlyId: string;
-  spanId?: string;
-  isRoot: boolean;
+  relationships: {
+    root?: {
+      friendlyId: string;
+      taskIdentifier: string;
+      spanId: string;
+      isParent?: boolean;
+    };
+    parent?: {
+      friendlyId: string;
+      taskIdentifier: string;
+      spanId: string;
+    };
+  };
 }) {
-  const [mouseOver, setMouseOver] = useState(false);
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-  const { spanParam } = useParams();
 
-  const span = spanId ? spanId : spanParam;
+  // Case 1: Root is also the parent
+  if (relationships.root?.isParent === true) {
+    return (
+      <TextLink
+        to={v3RunSpanPath(
+          organization,
+          project,
+          environment,
+          { friendlyId: relationships.root.friendlyId },
+          { spanId: relationships.root.spanId }
+        )}
+        className="text-xs"
+      >
+        Show Root & Parent run
+      </TextLink>
+    );
+  }
 
+  // Case 2: Root and Parent are different runs
   return (
-    <LinkButton
-      variant="minimal/medium"
-      to={
-        span
-          ? v3RunSpanPath(
-              organization,
-              project,
-              environment,
-              {
-                friendlyId: runFriendlyId,
-              },
-              { spanId: span }
-            )
-          : v3RunPath(organization, project, environment, {
-              friendlyId: runFriendlyId,
-            })
-      }
-      onMouseEnter={() => setMouseOver(true)}
-      onMouseLeave={() => setMouseOver(false)}
-      fullWidth
-      textAlignLeft
-      shortcut={{ key: "p" }}
-      className="flex-1"
-    >
-      {mouseOver ? (
-        <ShowParentIconSelected className="h-4 w-4 text-indigo-500" />
-      ) : (
-        <ShowParentIcon className="h-4 w-4 text-charcoal-650" />
+    <div className="flex flex-1 items-center gap-2">
+      {relationships.root && (
+        <TextLink
+          to={v3RunSpanPath(
+            organization,
+            project,
+            environment,
+            { friendlyId: relationships.root.friendlyId },
+            { spanId: relationships.root.spanId }
+          )}
+          className="text-xs"
+        >
+          Show Root run
+        </TextLink>
       )}
-      <Paragraph
-        variant="small"
-        className={cn(mouseOver ? "text-indigo-500" : "text-charcoal-500")}
-      >
-        {isRoot ? "Show root run" : "Show parent run"}
-      </Paragraph>
-    </LinkButton>
+      {relationships.parent && (
+        <TextLink
+          to={v3RunSpanPath(
+            organization,
+            project,
+            environment,
+            { friendlyId: relationships.parent.friendlyId },
+            { spanId: relationships.parent.spanId }
+          )}
+          className="text-xs"
+        >
+          Show Parent run
+        </TextLink>
+      )}
+    </div>
   );
 }
 

From ec9131b3bb3ce882fab4c4dcacfcf8808b1a4bb7 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 15:44:39 +0100
Subject: [PATCH 05/15] TextLink now supports optional shortcuts

---
 .../app/components/primitives/TextLink.tsx    | 58 +++++++++++++++++--
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/TextLink.tsx b/apps/webapp/app/components/primitives/TextLink.tsx
index 38fd1525c5..d0186268c0 100644
--- a/apps/webapp/app/components/primitives/TextLink.tsx
+++ b/apps/webapp/app/components/primitives/TextLink.tsx
@@ -1,6 +1,10 @@
 import { Link } from "@remix-run/react";
 import { cn } from "~/utils/cn";
 import { Icon, type RenderIcon } from "./Icon";
+import { useRef } from "react";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { ShortcutKey } from "./ShortcutKey";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 
 const variations = {
   primary:
@@ -17,6 +21,9 @@ type TextLinkProps = {
   trailingIconClassName?: string;
   variant?: keyof typeof variations;
   children: React.ReactNode;
+  shortcut?: ShortcutDefinition;
+  hideShortcutKey?: boolean;
+  tooltip?: React.ReactNode;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export function TextLink({
@@ -27,20 +34,61 @@ export function TextLink({
   trailingIcon,
   trailingIconClassName,
   variant = "primary",
+  shortcut,
+  hideShortcutKey,
+  tooltip,
   ...props
 }: TextLinkProps) {
+  const innerRef = useRef<HTMLAnchorElement>(null);
   const classes = variations[variant];
-  return to ? (
-    <Link to={to} className={cn(classes, className)} {...props}>
+
+  if (shortcut) {
+    useShortcutKeys({
+      shortcut: shortcut,
+      action: () => {
+        if (innerRef.current) {
+          innerRef.current.click();
+        }
+      },
+    });
+  }
+
+  const renderShortcutKey = () =>
+    shortcut &&
+    !hideShortcutKey && <ShortcutKey className="ml-1.5" shortcut={shortcut} variant="small" />;
+
+  const linkContent = (
+    <>
       {children}{" "}
       {trailingIcon && <Icon icon={trailingIcon} className={cn("size-4", trailingIconClassName)} />}
+      {shortcut && !tooltip && renderShortcutKey()}
+    </>
+  );
+
+  const linkElement = to ? (
+    <Link ref={innerRef} to={to} className={cn(classes, className)} {...props}>
+      {linkContent}
     </Link>
   ) : href ? (
-    <a href={href} className={cn(classes, className)} {...props}>
-      {children}{" "}
-      {trailingIcon && <Icon icon={trailingIcon} className={cn("size-4", trailingIconClassName)} />}
+    <a ref={innerRef} href={href} className={cn(classes, className)} {...props}>
+      {linkContent}
     </a>
   ) : (
     <span>Need to define a path or href</span>
   );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{linkElement}</TooltipTrigger>
+          <TooltipContent className="text-dimmed flex items-center gap-3 py-1.5 pl-2.5 pr-3 text-xs">
+            {tooltip} {shortcut && renderShortcutKey()}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return linkElement;
 }

From fe0055f2fea85dd913a943b1b425b5edbcf2e7f3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 15:45:11 +0100
Subject: [PATCH 06/15] Adds shortcut keys to the root and parent links + the
 shortcut help panel

---
 apps/webapp/app/components/Shortcuts.tsx                 | 6 ++++++
 .../route.tsx                                            | 9 ++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index 8349ed970f..bf64b4c5f3 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -147,6 +147,12 @@ function ShortcutContent() {
               </Paragraph>
               <ShortcutKey shortcut={{ key: "9" }} variant="medium/bright" />
             </Shortcut>
+            <Shortcut name="Jump to root run">
+              <ShortcutKey shortcut={{ key: "t" }} variant="medium/bright" />
+            </Shortcut>
+            <Shortcut name="Jump to parent run">
+              <ShortcutKey shortcut={{ key: "p" }} variant="medium/bright" />
+            </Shortcut>
           </div>
           <div className="space-y-3">
             <Header3>Schedules page</Header3>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 8c2d5b0828..16290ffe9c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1174,9 +1174,10 @@ function ShowParentOrRootLinks({
           { friendlyId: relationships.root.friendlyId },
           { spanId: relationships.root.spanId }
         )}
+        shortcut={{ key: "t" }}
         className="text-xs"
       >
-        Show Root & Parent run
+        Jump to Root & Parent
       </TextLink>
     );
   }
@@ -1193,9 +1194,10 @@ function ShowParentOrRootLinks({
             { friendlyId: relationships.root.friendlyId },
             { spanId: relationships.root.spanId }
           )}
+          shortcut={{ key: "t" }}
           className="text-xs"
         >
-          Show Root run
+          Jump to Root
         </TextLink>
       )}
       {relationships.parent && (
@@ -1207,9 +1209,10 @@ function ShowParentOrRootLinks({
             { friendlyId: relationships.parent.friendlyId },
             { spanId: relationships.parent.spanId }
           )}
+          shortcut={{ key: "p" }}
           className="text-xs"
         >
-          Show Parent run
+          Jump to Parent
         </TextLink>
       )}
     </div>

From 6f4d71398afba1463707110043d0f17b225e3693 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 18:43:33 +0100
Subject: [PATCH 07/15] Adds new icons for root and parent

---
 .../webapp/app/assets/icons/MoveToTopIcon.tsx | 62 +++++++++++++++++++
 apps/webapp/app/assets/icons/MoveUpIcon.tsx   | 55 ++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 apps/webapp/app/assets/icons/MoveToTopIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/MoveUpIcon.tsx

diff --git a/apps/webapp/app/assets/icons/MoveToTopIcon.tsx b/apps/webapp/app/assets/icons/MoveToTopIcon.tsx
new file mode 100644
index 0000000000..14bd9f2ae2
--- /dev/null
+++ b/apps/webapp/app/assets/icons/MoveToTopIcon.tsx
@@ -0,0 +1,62 @@
+export function MoveToTopIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_17186_103975)">
+        <path
+          d="M12 21L12 9"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 3L21 3"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 7L6 7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 11L4 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18 7L21 7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M20 11L21 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5 10.5L12 7L8.5 10.5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_17186_103975">
+          <rect width="24" height="24" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/assets/icons/MoveUpIcon.tsx b/apps/webapp/app/assets/icons/MoveUpIcon.tsx
new file mode 100644
index 0000000000..dfc3580489
--- /dev/null
+++ b/apps/webapp/app/assets/icons/MoveUpIcon.tsx
@@ -0,0 +1,55 @@
+export function MoveUpIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_17177_110851)">
+        <path
+          d="M12 21L12 13"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 3L21 3"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 7L21 7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 11L5 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M19 11L21 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5 14.5L12 11L8.5 14.5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_17177_110851">
+          <rect width="24" height="24" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

From cf410723984afc3f3bed148e5e913ea9b983b78c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 18:44:13 +0100
Subject: [PATCH 08/15] root friendlyId works

---
 .../app/presenters/v3/RunPresenter.server.ts  | 11 ++-
 .../route.tsx                                 | 83 ++++++++++++-------
 2 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/apps/webapp/app/presenters/v3/RunPresenter.server.ts b/apps/webapp/app/presenters/v3/RunPresenter.server.ts
index b235dacded..b97ed627f4 100644
--- a/apps/webapp/app/presenters/v3/RunPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/RunPresenter.server.ts
@@ -61,6 +61,14 @@ export class RunPresenter {
             createdAt: true,
           },
         },
+        parentTaskRun: {
+          select: {
+            friendlyId: true,
+            taskIdentifier: true,
+            spanId: true,
+            createdAt: true,
+          },
+        },
         runtimeEnvironment: {
           select: {
             id: true,
@@ -109,6 +117,7 @@ export class RunPresenter {
       completedAt: run.completedAt,
       logsDeletedAt: showDeletedLogs ? null : run.logsDeletedAt,
       rootTaskRun: run.rootTaskRun,
+      parentTaskRun: run.parentTaskRun,
       environment: {
         id: run.runtimeEnvironment.id,
         organizationId: run.runtimeEnvironment.organizationId,
@@ -199,8 +208,6 @@ export class RunPresenter {
       trace: {
         rootSpanStatus,
         events: events,
-        parentRunFriendlyId:
-          tree?.id === traceSummary.rootSpan.id ? undefined : traceSummary.rootSpan.runId,
         duration: totalDuration,
         rootStartedAt: tree?.data.startTime,
         startedAt: run.startedAt,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 16290ffe9c..4db8a9f228 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -11,7 +11,7 @@ import {
   MagnifyingGlassPlusIcon,
   StopCircleIcon,
 } from "@heroicons/react/20/solid";
-import { useLoaderData, useParams, useRevalidator } from "@remix-run/react";
+import { useLoaderData, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs, type SerializeFrom, json } from "@remix-run/server-runtime";
 import { type Virtualizer } from "@tanstack/react-virtual";
 import {
@@ -25,7 +25,8 @@ import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { redirect } from "remix-typedjson";
-import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
+import { MoveToTopIcon } from "~/assets/icons/MoveToTopIcon";
+import { MoveUpIcon } from "~/assets/icons/MoveUpIcon";
 import tileBgPath from "~/assets/images/error-banner-tile@2x.png";
 import { DevDisconnectedBanner, useCrossEngineIsConnected } from "~/components/DevPresence";
 import { WarmStartIconWithTooltip } from "~/components/WarmStarts";
@@ -87,7 +88,6 @@ import {
   docsPath,
   v3BillingPath,
   v3RunParamsSchema,
-  v3RunPath,
   v3RunRedirectPath,
   v3RunSpanPath,
   v3RunStreamingPath,
@@ -95,7 +95,6 @@ import {
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
-import { TextLink } from "~/components/primitives/TextLink";
 
 const resizableSettings = {
   parent: {
@@ -297,8 +296,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
     return <></>;
   }
 
-  const { events, parentRunFriendlyId, duration, rootSpanStatus, rootStartedAt, queuedDuration } =
-    trace;
+  const { events, duration, rootSpanStatus, rootStartedAt, queuedDuration } = trace;
   const shouldLiveReload = events.length <= maximumLiveReloadingSetting;
 
   const changeToSpan = useDebounce((selectedSpan: string) => {
@@ -335,7 +333,6 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
             selectedId={selectedSpanId}
             key={events[0]?.id ?? "-"}
             events={events}
-            parentRunFriendlyId={parentRunFriendlyId}
             onSelectedIdChanged={(selectedSpan) => {
               //instantly close the panel if no span is selected
               if (!selectedSpan) {
@@ -353,6 +350,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
             shouldLiveReload={shouldLiveReload}
             maximumLiveReloadingSetting={maximumLiveReloadingSetting}
             rootRun={run.rootTaskRun}
+            parentRun={run.parentTaskRun}
             isCompleted={run.completedAt !== null}
           />
         </ResizablePanel>
@@ -471,7 +469,6 @@ function NoLogsView({ run, resizable }: LoaderData) {
 type TasksTreeViewProps = {
   events: TraceEvent[];
   selectedId?: string;
-  parentRunFriendlyId?: string;
   onSelectedIdChanged: (selectedId: string | undefined) => void;
   totalDuration: number;
   rootSpanStatus: "executing" | "completed" | "failed";
@@ -485,13 +482,17 @@ type TasksTreeViewProps = {
     taskIdentifier: string;
     spanId: string;
   } | null;
+  parentRun: {
+    friendlyId: string;
+    taskIdentifier: string;
+    spanId: string;
+  } | null;
   isCompleted: boolean;
 };
 
 function TasksTreeView({
   events,
   selectedId,
-  parentRunFriendlyId,
   onSelectedIdChanged,
   totalDuration,
   rootSpanStatus,
@@ -501,6 +502,7 @@ function TasksTreeView({
   shouldLiveReload,
   maximumLiveReloadingSetting,
   rootRun,
+  parentRun,
   isCompleted,
 }: TasksTreeViewProps) {
   const isAdmin = useHasAdminAccess();
@@ -584,11 +586,10 @@ function TasksTreeView({
           id={resizableSettings.tree.tree.id}
           default={resizableSettings.tree.tree.default}
           min={resizableSettings.tree.tree.min}
-          className="pl-3"
         >
           <div className="grid h-full grid-rows-[2rem_1fr] overflow-hidden">
-            <div className="flex items-center pr-2">
-              {rootRun || parentRunFriendlyId ? (
+            <div className="flex items-center pl-1 pr-2">
+              {rootRun || parentRun ? (
                 <ShowParentOrRootLinks
                   relationships={{
                     root: rootRun
@@ -596,15 +597,13 @@ function TasksTreeView({
                           friendlyId: rootRun.friendlyId,
                           taskIdentifier: rootRun.taskIdentifier,
                           spanId: rootRun.spanId,
-                          isParent: parentRunFriendlyId
-                            ? rootRun.friendlyId === parentRunFriendlyId
-                            : true,
+                          isParent: parentRun ? rootRun.friendlyId === parentRun.friendlyId : true,
                         }
                       : undefined,
                     parent:
-                      parentRunFriendlyId && rootRun?.friendlyId !== parentRunFriendlyId
+                      parentRun && rootRun?.friendlyId !== parentRun.friendlyId
                         ? {
-                            friendlyId: parentRunFriendlyId,
+                            friendlyId: parentRun.friendlyId,
                             taskIdentifier: "",
                             spanId: "",
                           }
@@ -612,7 +611,7 @@ function TasksTreeView({
                   }}
                 />
               ) : (
-                <Paragraph variant="extra-small" className="flex-1 text-charcoal-500">
+                <Paragraph variant="extra-small" className="flex-1 pl-3 text-charcoal-500">
                   This is the root task
                 </Paragraph>
               )}
@@ -631,6 +630,7 @@ function TasksTreeView({
               nodes={nodes}
               getNodeProps={getNodeProps}
               getTreeProps={getTreeProps}
+              parentClassName="pl-3"
               renderNode={({ node, state, index }) => (
                 <>
                   <div
@@ -1166,7 +1166,8 @@ function ShowParentOrRootLinks({
   // Case 1: Root is also the parent
   if (relationships.root?.isParent === true) {
     return (
-      <TextLink
+      <LinkButton
+        variant="minimal/small"
         to={v3RunSpanPath(
           organization,
           project,
@@ -1174,19 +1175,28 @@ function ShowParentOrRootLinks({
           { friendlyId: relationships.root.friendlyId },
           { spanId: relationships.root.spanId }
         )}
+        LeadingIcon={MoveToTopIcon}
         shortcut={{ key: "t" }}
+        hideShortcutKey
+        tooltip={
+          <div className="-mr-1 flex items-center gap-1">
+            <Paragraph variant="extra-small">Jump to root/parent run</Paragraph>
+            <ShortcutKey shortcut={{ key: "t" }} variant="small" />
+          </div>
+        }
         className="text-xs"
       >
-        Jump to Root & Parent
-      </TextLink>
+        Root/parent
+      </LinkButton>
     );
   }
 
   // Case 2: Root and Parent are different runs
   return (
-    <div className="flex flex-1 items-center gap-2">
+    <div className="flex items-center">
       {relationships.root && (
-        <TextLink
+        <LinkButton
+          variant="minimal/small"
           to={v3RunSpanPath(
             organization,
             project,
@@ -1194,14 +1204,23 @@ function ShowParentOrRootLinks({
             { friendlyId: relationships.root.friendlyId },
             { spanId: relationships.root.spanId }
           )}
+          LeadingIcon={MoveToTopIcon}
           shortcut={{ key: "t" }}
+          hideShortcutKey
+          tooltip={
+            <div className="-mr-1 flex items-center gap-1">
+              <Paragraph variant="extra-small">Jump to root run</Paragraph>
+              <ShortcutKey shortcut={{ key: "t" }} variant="small" />
+            </div>
+          }
           className="text-xs"
         >
-          Jump to Root
-        </TextLink>
+          Root
+        </LinkButton>
       )}
       {relationships.parent && (
-        <TextLink
+        <LinkButton
+          variant="minimal/small"
           to={v3RunSpanPath(
             organization,
             project,
@@ -1209,11 +1228,19 @@ function ShowParentOrRootLinks({
             { friendlyId: relationships.parent.friendlyId },
             { spanId: relationships.parent.spanId }
           )}
+          LeadingIcon={MoveUpIcon}
           shortcut={{ key: "p" }}
+          hideShortcutKey
+          tooltip={
+            <div className="-mr-1 flex items-center gap-1">
+              <Paragraph variant="extra-small">Jump to parent run</Paragraph>
+              <ShortcutKey shortcut={{ key: "p" }} variant="small" />
+            </div>
+          }
           className="text-xs"
         >
-          Jump to Parent
-        </TextLink>
+          Parent
+        </LinkButton>
       )}
     </div>
   );

From 35a9e418b4635d6f813515246de1eb8d0e2c9d7b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 17 May 2025 10:08:17 +0100
Subject: [PATCH 09/15] Updates icons for jump to root and parent

---
 .../webapp/app/assets/icons/MoveToTopIcon.tsx | 30 +------------------
 apps/webapp/app/assets/icons/MoveUpIcon.tsx   | 16 +---------
 .../route.tsx                                 |  3 ++
 3 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/apps/webapp/app/assets/icons/MoveToTopIcon.tsx b/apps/webapp/app/assets/icons/MoveToTopIcon.tsx
index 14bd9f2ae2..46938fd391 100644
--- a/apps/webapp/app/assets/icons/MoveToTopIcon.tsx
+++ b/apps/webapp/app/assets/icons/MoveToTopIcon.tsx
@@ -17,35 +17,7 @@ export function MoveToTopIcon({ className }: { className?: string }) {
           strokeLinejoin="round"
         />
         <path
-          d="M3 7L6 7"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M3 11L4 11"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M18 7L21 7"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M20 11L21 11"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M15.5 10.5L12 7L8.5 10.5"
+          d="M16.5 11.5L12 7L7.5 11.5"
           stroke="currentColor"
           strokeWidth="2"
           strokeLinecap="round"
diff --git a/apps/webapp/app/assets/icons/MoveUpIcon.tsx b/apps/webapp/app/assets/icons/MoveUpIcon.tsx
index dfc3580489..6e5d8a84ba 100644
--- a/apps/webapp/app/assets/icons/MoveUpIcon.tsx
+++ b/apps/webapp/app/assets/icons/MoveUpIcon.tsx
@@ -24,21 +24,7 @@ export function MoveUpIcon({ className }: { className?: string }) {
           strokeLinejoin="round"
         />
         <path
-          d="M3 11L5 11"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M19 11L21 11"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M15.5 14.5L12 11L8.5 14.5"
+          d="M16.5 15.5L12 11L7.5 15.5"
           stroke="currentColor"
           strokeWidth="2"
           strokeLinecap="round"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 4db8a9f228..b1c1b5b23e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1176,6 +1176,7 @@ function ShowParentOrRootLinks({
           { spanId: relationships.root.spanId }
         )}
         LeadingIcon={MoveToTopIcon}
+        leadingIconClassName="gap-x-2"
         shortcut={{ key: "t" }}
         hideShortcutKey
         tooltip={
@@ -1205,6 +1206,7 @@ function ShowParentOrRootLinks({
             { spanId: relationships.root.spanId }
           )}
           LeadingIcon={MoveToTopIcon}
+          leadingIconClassName="gap-x-2"
           shortcut={{ key: "t" }}
           hideShortcutKey
           tooltip={
@@ -1229,6 +1231,7 @@ function ShowParentOrRootLinks({
             { spanId: relationships.parent.spanId }
           )}
           LeadingIcon={MoveUpIcon}
+          leadingIconClassName="gap-x-2"
           shortcut={{ key: "p" }}
           hideShortcutKey
           tooltip={

From 0e0b8d73213addf45d6d1bb723a1753df2fac4ee Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 19 May 2025 17:29:43 +0100
Subject: [PATCH 10/15] Copy tweak

---
 .../route.tsx                                                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index b1c1b5b23e..655bba95b7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1181,7 +1181,7 @@ function ShowParentOrRootLinks({
         hideShortcutKey
         tooltip={
           <div className="-mr-1 flex items-center gap-1">
-            <Paragraph variant="extra-small">Jump to root/parent run</Paragraph>
+            <Paragraph variant="extra-small">Jump to root and parent run</Paragraph>
             <ShortcutKey shortcut={{ key: "t" }} variant="small" />
           </div>
         }

From fb91c87b867272239bb29a37237431ff8ba7c6cb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 28 May 2025 13:17:35 +0100
Subject: [PATCH 11/15] Improve how the Free tier shows no preview branches

---
 .../resources.orgs.$organizationSlug.select-plan.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index c7dc2207fb..4932a39a9e 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -1085,13 +1085,17 @@ function RealtimeConcurrency({ limits, children }: { limits: Limits; children?:
 function Branches({ limits }: { limits: Limits }) {
   return (
     <FeatureItem checked={limits.branches.number > 0}>
-      {limits.branches.number}
-      {limits.branches.canExceed ? "+ " : " "}
+      {limits.branches.number > 0 && (
+        <>
+          {limits.branches.number}
+          {limits.branches.canExceed ? "+ " : " "}
+        </>
+      )}
       <DefinitionTip
         title={pricingDefinitions.branches.title}
         content={pricingDefinitions.branches.content}
       >
-        preview branches
+        {limits.branches.number > 0 ? "preview" : "Preview"} branches
       </DefinitionTip>
     </FeatureItem>
   );

From 19e8673795e2ff8a6ec08dd21ddbd669991dd480 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 28 May 2025 13:17:46 +0100
Subject: [PATCH 12/15] Improve the wording in the tooltip

---
 .../routes/resources.orgs.$organizationSlug.select-plan.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 4932a39a9e..fe1e8bc7c3 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -213,7 +213,8 @@ const pricingDefinitions = {
   },
   branches: {
     title: "Branches",
-    content: "The number of preview branches that can be active (you can archive old ones).",
+    content:
+      "Preview branches allow you to test changes before deploying to production. You can have a limited number active at once (but can archive old ones).",
   },
 };
 

From 9626eb6d83b3616f9f3e0e2e417231d7814da0b6 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 28 May 2025 13:17:55 +0100
Subject: [PATCH 13/15] Align the x icon better

---
 .../app/routes/resources.orgs.$organizationSlug.select-plan.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index fe1e8bc7c3..78a7ad6610 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -929,7 +929,7 @@ function FeatureItem({
           )}
         />
       ) : (
-        <XMarkIcon className="size-4 text-charcoal-500" />
+        <XMarkIcon className="mt-0.5 size-4 min-w-4 text-charcoal-500" />
       )}
       <div
         className={cn(

From d5880318f38b19a425356dde53c5ff3aa1a060f8 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 28 May 2025 13:54:58 +0100
Subject: [PATCH 14/15] Show price for additional preview branches

---
 ...ces.orgs.$organizationSlug.select-plan.tsx | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 78a7ad6610..98ffecb50b 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -216,6 +216,10 @@ const pricingDefinitions = {
     content:
       "Preview branches allow you to test changes before deploying to production. You can have a limited number active at once (but can archive old ones).",
   },
+  additionalBranches: {
+    title: "Additional branches",
+    content: "Then $10/month per branch",
+  },
 };
 
 type PricingPlansProps = {
@@ -752,7 +756,7 @@ export function TierPro({
         </FeatureItem>
         <TeamMembers limits={plan.limits}>{pricingDefinitions.additionalSeats.content}</TeamMembers>
         <Environments limits={plan.limits} />
-        <Branches limits={plan.limits} />
+        <Branches limits={plan.limits}>{pricingDefinitions.additionalBranches.content}</Branches>
         <Schedules limits={plan.limits}>{pricingDefinitions.additionalSchedules.content}</Schedules>
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
@@ -1083,21 +1087,26 @@ function RealtimeConcurrency({ limits, children }: { limits: Limits; children?:
   );
 }
 
-function Branches({ limits }: { limits: Limits }) {
+function Branches({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked={limits.branches.number > 0}>
-      {limits.branches.number > 0 && (
-        <>
-          {limits.branches.number}
-          {limits.branches.canExceed ? "+ " : " "}
-        </>
-      )}
-      <DefinitionTip
-        title={pricingDefinitions.branches.title}
-        content={pricingDefinitions.branches.content}
-      >
-        {limits.branches.number > 0 ? "preview" : "Preview"} branches
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.branches.number > 0 && (
+            <>
+              {limits.branches.number}
+              {limits.branches.canExceed ? "+ " : " "}
+            </>
+          )}
+          <DefinitionTip
+            title={pricingDefinitions.branches.title}
+            content={pricingDefinitions.branches.content}
+          >
+            {limits.branches.number > 0 ? "preview" : "Preview"} branches
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }

From 6e99c58f04bbeaf89718980202820abbcc26000d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 28 May 2025 15:25:23 +0100
Subject: [PATCH 15/15] Change the shortcut key

---
 .../route.tsx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 1a31f07cdb..e3b4ea1971 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -1189,12 +1189,12 @@ function ShowParentOrRootLinks({
         )}
         LeadingIcon={MoveToTopIcon}
         leadingIconClassName="gap-x-2"
-        shortcut={{ key: "t" }}
+        shortcut={{ key: "p" }}
         hideShortcutKey
         tooltip={
           <div className="-mr-1 flex items-center gap-1">
             <Paragraph variant="extra-small">Jump to root and parent run</Paragraph>
-            <ShortcutKey shortcut={{ key: "t" }} variant="small" />
+            <ShortcutKey shortcut={{ key: "p" }} variant="small" />
           </div>
         }
         className="text-xs"