From 7f3994b4d1db0920baa3d331974d2d094a821ac1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 10:49:30 +0000
Subject: [PATCH 01/34] reduces the thickness of the focus-visible

---
 apps/webapp/tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index b7c505964f..54a5769d10 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -212,7 +212,7 @@ module.exports = {
         prod: prodEnv,
       },
       focusStyles: {
-        outline: "2px solid",
+        outline: "1px solid",
         outlineOffset: "0px",
         outlineColor: textLink,
         borderRadius: "2px",

From 7020df3f20d7c101dc53c16d339b772ada0e47a9 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 10:49:48 +0000
Subject: [PATCH 02/34] More subtle Input style

---
 apps/webapp/app/components/primitives/Input.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
index a78d11ed3c..7cb4b8a32d 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
 import { Icon, RenderIcon } from "./Icon";
 
 const containerBase =
-  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-text-link has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
+  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
 
 const inputBase =
   "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";
@@ -17,27 +17,27 @@ const variants = {
     container:
       "px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
     input: "px-2 text-sm",
-    iconSize: "h-4 w-4 ml-1",
+    iconSize: "size-4 ml-1",
     shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
   },
   medium: {
     container:
       "px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
     input: "px-1.5 rounded text-sm",
-    iconSize: "h-4 w-4 ml-0.5",
+    iconSize: "size-4 ml-0.5",
     shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
   },
   small: {
     container:
       "px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
     input: "px-1 rounded text-xs",
-    iconSize: "h-3 w-3 ml-0.5",
+    iconSize: "size-3 ml-0.5",
     shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
   },
   tertiary: {
     container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
     input: "px-1 rounded text-xs",
-    iconSize: "h-3 w-3 ml-0.5",
+    iconSize: "size-3 ml-0.5",
     shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
   },
 };

From dc2e0632225f16dd3f12b871c7a42b783627446a Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 10:52:38 +0000
Subject: [PATCH 03/34] Updates focus-visible styles for the SimpleSelect

---
 apps/webapp/app/components/primitives/SimpleSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/SimpleSelect.tsx b/apps/webapp/app/components/primitives/SimpleSelect.tsx
index 61ea34133f..d7b9e4cccb 100644
--- a/apps/webapp/app/components/primitives/SimpleSelect.tsx
+++ b/apps/webapp/app/components/primitives/SimpleSelect.tsx
@@ -29,7 +29,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "ring-offset-background focus-visible:ring-ring group flex items-center justify-between gap-x-1 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:bg-tertiary focus-visible:text-text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background group flex items-center justify-between gap-x-1 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:focus-custom disabled:cursor-not-allowed disabled:opacity-50",
         width === "full" ? "w-full" : "w-min",
         sizeClassName,
         className

From b87bb11fb191d196f1966fb390acaf3658bacf66 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 11:32:55 +0000
Subject: [PATCH 04/34] Tables tab through rows and action cells only

---
 apps/webapp/app/components/primitives/Table.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 045d54b4e9..d7e8cad749 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -78,8 +78,9 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     return (
       <tr
         ref={ref}
+        tabIndex={0}
         className={cn(
-          "group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          "group/table-row relative w-full outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus:focus-custom",
           disabled && "opacity-50",
           isSelected && isSelectedStyle,
           className
@@ -216,11 +217,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         colSpan={colSpan}
       >
         {to ? (
-          <Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
+          <Link to={to} tabIndex={-1} className={cn(flexClasses, actionClassName)}>
             {children}
           </Link>
         ) : onClick ? (
-          <button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
+          <button onClick={onClick} tabIndex={-1} className={cn(flexClasses, actionClassName)}>
             {children}
           </button>
         ) : (

From 5dc8d7f5d2c33acbc55593f5038bb22dc275752d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 11:33:06 +0000
Subject: [PATCH 05/34] Refined focus visible style

---
 apps/webapp/tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index 54a5769d10..e57368fb3c 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -215,7 +215,7 @@ module.exports = {
         outline: "1px solid",
         outlineOffset: "0px",
         outlineColor: textLink,
-        borderRadius: "2px",
+        borderRadius: "3px",
       },
       borderRadius: {
         lg: radius,

From a1c37d669509d4e79a1877608b061b10a8087e5e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 11:39:35 +0000
Subject: [PATCH 06/34] Adds the custom focus visible to the TextLink

---
 apps/webapp/app/components/primitives/TextLink.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/primitives/TextLink.tsx b/apps/webapp/app/components/primitives/TextLink.tsx
index 984edbf610..e5c8e7d487 100644
--- a/apps/webapp/app/components/primitives/TextLink.tsx
+++ b/apps/webapp/app/components/primitives/TextLink.tsx
@@ -4,9 +4,9 @@ import { cn } from "~/utils/cn";
 
 const variations = {
   primary:
-    "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group",
+    "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group focus-visible:focus-custom",
   secondary:
-    "text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group",
+    "text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group focus-visible:focus-custom",
 } as const;
 
 type TextLinkProps = {
@@ -34,14 +34,14 @@ export function TextLink({
     <Link to={to} className={cn(classes, className)} {...props}>
       {children}{" "}
       {trailingIcon && (
-        <NamedIcon name={trailingIcon} className={cn("h-4 w-4", trailingIconClassName)} />
+        <NamedIcon name={trailingIcon} className={cn("size-4", trailingIconClassName)} />
       )}
     </Link>
   ) : href ? (
     <a href={href} className={cn(classes, className)} {...props}>
       {children}{" "}
       {trailingIcon && (
-        <NamedIcon name={trailingIcon} className={cn("h-4 w-4", trailingIconClassName)} />
+        <NamedIcon name={trailingIcon} className={cn("size-4", trailingIconClassName)} />
       )}
     </a>
   ) : (

From 687ead4a5f6f238d6ed9634f659cf487d63fad67 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 18 Dec 2024 13:34:30 +0000
Subject: [PATCH 07/34] Moves the onClick handling to the table row rather than
 the cell

---
 .../app/components/primitives/Table.tsx       | 72 +++++++++++--------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index d7e8cad749..76cc612d59 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
-import { Link } from "@remix-run/react";
-import { ReactNode, forwardRef, useState } from "react";
+import { useNavigate } from "@remix-run/react";
+import React, { ReactNode, forwardRef, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
 import { InfoIconTooltip } from "./Tooltip";
@@ -44,6 +44,7 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
           "sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
           className
         )}
+        tabIndex={-1}
       >
         {children}
       </thead>
@@ -71,16 +72,49 @@ type TableRowProps = {
   children: ReactNode;
   disabled?: boolean;
   isSelected?: boolean;
+  to?: string;
+  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
 };
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ className, disabled, isSelected, children }, ref) => {
+  ({ className, disabled, isSelected, children, to, onClick }, ref) => {
+    const navigate = useNavigate();
+
+    const handleInteraction = (event: React.KeyboardEvent | React.MouseEvent) => {
+      if ((event.target as HTMLElement).closest('button, a, [role="button"]')) {
+        return;
+      }
+
+      const firstCellWithTo = React.Children.toArray(children).find((child) => {
+        if (React.isValidElement(child) && child.type === TableCell) {
+          return child.props.to;
+        }
+        return false;
+      }) as React.ReactElement | undefined;
+
+      if (firstCellWithTo?.props.to) {
+        navigate(firstCellWithTo.props.to);
+      } else if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        handleInteraction(event);
+      }
+    };
+
     return (
       <tr
         ref={ref}
-        tabIndex={0}
+        tabIndex={disabled ? -1 : 0}
+        onClick={handleInteraction}
+        onKeyDown={handleKeyDown}
         className={cn(
-          "group/table-row relative w-full outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus:focus-custom",
+          "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus-visible:bg-background-bright",
           disabled && "opacity-50",
           isSelected && isSelectedStyle,
           className
@@ -126,6 +160,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
           className
         )}
         colSpan={colSpan}
+        tabIndex={-1}
       >
         {hiddenLabel ? (
           <span className="sr-only">{children}</span>
@@ -154,7 +189,7 @@ type TableCellProps = TableCellBasicProps & {
 
 const rowHoverStyles = {
   default:
-    "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
+    "group-hover/table-row:bg-charcoal-800 group-focus-visible/table-row:bg-background-bright group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
   dimmed:
     "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
   bright:
@@ -193,22 +228,13 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         break;
     }
 
-    const flexClasses = cn(
-      "flex w-full whitespace-nowrap px-3 py-3 text-xs text-text-dimmed",
-      alignment === "left"
-        ? "justify-start text-left"
-        : alignment === "center"
-        ? "justify-center text-center"
-        : "justify-end text-right"
-    );
-
     return (
       <td
         ref={ref}
         className={cn(
           "text-xs text-charcoal-400",
-          to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
-          !to && !onClick && alignmentClassName,
+          hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
+          alignmentClassName,
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
@@ -216,17 +242,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         )}
         colSpan={colSpan}
       >
-        {to ? (
-          <Link to={to} tabIndex={-1} className={cn(flexClasses, actionClassName)}>
-            {children}
-          </Link>
-        ) : onClick ? (
-          <button onClick={onClick} tabIndex={-1} className={cn(flexClasses, actionClassName)}>
-            {children}
-          </button>
-        ) : (
-          <>{children}</>
-        )}
+        {children}
       </td>
     );
   }

From 758a96d21d7ab0ad62004469e6fe482ddf72c1fb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 19 Dec 2024 12:00:25 +0000
Subject: [PATCH 08/34] Makes table row heights consistent

---
 apps/webapp/app/components/primitives/Table.tsx              | 5 ++---
 .../route.tsx                                                | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 76cc612d59..a3c4002fd6 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -209,8 +209,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       alignment = "left",
       children,
       colSpan,
-      to,
-      onClick,
       hasAction = false,
       isSticky = false,
       rowHoverStyle = "default",
@@ -233,8 +231,9 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         ref={ref}
         className={cn(
           "text-xs text-charcoal-400",
-          hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
+          hasAction ? "cursor-pointer" : "h-10 min-h-10 px-3 align-middle",
           alignmentClassName,
+          actionClassName,
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
index 29876d96dc..496c270f69 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
@@ -460,6 +460,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           label={"Email"}
           description={alertChannel.properties.email}
           boxClassName="group-hover/table-row:bg-charcoal-800"
+          className="h-12"
         />
       );
     }

From 8fd2948d6713264053e6750bacef2e8f8e683546 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 19 Dec 2024 12:12:58 +0000
Subject: [PATCH 09/34] Adds gap between task search bar and button

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index 74d5ca966c..ca6f902ace 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -224,7 +224,7 @@ export default function Page() {
                 <div className="flex min-w-0 max-w-full flex-col">
                   {!userHasTasks && <UserHasNoTasks />}
                   <div className="max-h-full overflow-hidden">
-                    <div className="flex items-center p-2">
+                    <div className="flex items-center gap-1 p-2">
                       <Input
                         placeholder="Search tasks"
                         variant="tertiary"

From 1daafa3a59f18682ef0faf158b0200520613481b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 19 Dec 2024 12:15:30 +0000
Subject: [PATCH 10/34] Prevents long tag values from wrapping

---
 apps/webapp/app/components/runs/v3/RunTag.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 875457dc2e..014bb15fa2 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -22,7 +22,7 @@ export function RunTag({ tag }: { tag: string }) {
         <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
           {tagResult.key}
         </span>
-        <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
+        <span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
           {tagResult.value}
         </span>
       </span>

From 9f577c7259e16970bdfd785ab448d79857969f35 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 23 Dec 2024 10:23:42 +0000
Subject: [PATCH 11/34] Removes unnecessary rows from table header

---
 .../app/components/runs/v3/TaskRunsTable.tsx  | 310 +++++++++---------
 .../route.tsx                                 |  28 +-
 .../route.tsx                                 |  10 +-
 3 files changed, 171 insertions(+), 177 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 957be45dc1..bf344a0c4c 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -106,173 +106,171 @@ export function TaskRunsTable({
   return (
     <Table className="max-h-full overflow-y-auto">
       <TableHeader>
-        <TableRow>
-          {allowSelection && (
-            <TableHeaderCell className="pl-3 pr-0">
-              {runs.length > 0 && (
-                <Checkbox
-                  checked={hasAll(runs.map((r) => r.id))}
-                  onChange={(element) => {
-                    const ids = runs.map((r) => r.id);
-                    const checked = element.currentTarget.checked;
-                    if (checked) {
-                      select(ids);
-                    } else {
-                      deselect(ids);
-                    }
-                  }}
-                  ref={(r) => {
-                    checkboxes.current[0] = r;
-                  }}
-                  onKeyDown={(event) => navigateCheckboxes(event, 0)}
-                />
-              )}
-            </TableHeaderCell>
-          )}
-          <TableHeaderCell alignment="right">Run #</TableHeaderCell>
-          <TableHeaderCell>Env</TableHeaderCell>
-          <TableHeaderCell>Task</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="flex flex-col divide-y divide-grid-dimmed">
-                {filterableTaskRunStatuses.map((status) => (
-                  <div
-                    key={status}
-                    className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
-                  >
-                    <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
-                      <TaskRunStatusCombo status={status} />
-                    </div>
-                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
-                      {descriptionForTaskRunStatus(status)}
-                    </Paragraph>
-                  </div>
-                ))}
-              </div>
-            }
-          >
-            Status
+        {allowSelection && (
+          <TableHeaderCell className="pl-3 pr-0">
+            {runs.length > 0 && (
+              <Checkbox
+                checked={hasAll(runs.map((r) => r.id))}
+                onChange={(element) => {
+                  const ids = runs.map((r) => r.id);
+                  const checked = element.currentTarget.checked;
+                  if (checked) {
+                    select(ids);
+                  } else {
+                    deselect(ids);
+                  }
+                }}
+                ref={(r) => {
+                  checkboxes.current[0] = r;
+                }}
+                onKeyDown={(event) => navigateCheckboxes(event, 0)}
+              />
+            )}
           </TableHeaderCell>
-          <TableHeaderCell>Started</TableHeaderCell>
-          <TableHeaderCell
-            colSpan={3}
-            tooltip={
-              <div className="flex max-w-xs flex-col gap-4 p-1">
-                <div>
-                  <div className="mb-0.5 flex items-center gap-1.5">
-                    <RectangleStackIcon className="size-4 text-text-dimmed" />
-                    <Header3>Queued duration</Header3>
-                  </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
-                    The amount of time from when the run was created to it starting to run.
-                  </Paragraph>
-                </div>
-                <div>
-                  <div className="mb-0.5 flex items-center gap-1.5">
-                    <ClockIcon className="size-4 text-blue-500" /> <Header3>Run duration</Header3>
+        )}
+        <TableHeaderCell alignment="right">Run #</TableHeaderCell>
+        <TableHeaderCell>Env</TableHeaderCell>
+        <TableHeaderCell>Task</TableHeaderCell>
+        <TableHeaderCell>Version</TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="flex flex-col divide-y divide-grid-dimmed">
+              {filterableTaskRunStatuses.map((status) => (
+                <div
+                  key={status}
+                  className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                >
+                  <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                    <TaskRunStatusCombo status={status} />
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
-                    The total amount of time from the run starting to it finishing. This includes
-                    all time spent waiting.
+                  <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                    {descriptionForTaskRunStatus(status)}
                   </Paragraph>
                 </div>
-                <div>
-                  <div className="mb-0.5 flex items-center gap-1.5">
-                    <CpuChipIcon className="size-4 text-success" />
-                    <Header3>Compute duration</Header3>
-                  </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
-                    The amount of compute time used in the run. This does not include time spent
-                    waiting.
-                  </Paragraph>
+              ))}
+            </div>
+          }
+        >
+          Status
+        </TableHeaderCell>
+        <TableHeaderCell>Started</TableHeaderCell>
+        <TableHeaderCell
+          colSpan={3}
+          tooltip={
+            <div className="flex max-w-xs flex-col gap-4 p-1">
+              <div>
+                <div className="mb-0.5 flex items-center gap-1.5">
+                  <RectangleStackIcon className="size-4 text-text-dimmed" />
+                  <Header3>Queued duration</Header3>
                 </div>
-              </div>
-            }
-          >
-            Duration
-          </TableHeaderCell>
-          {showCompute && (
-            <>
-              <TableHeaderCell>Compute</TableHeaderCell>
-            </>
-          )}
-          <TableHeaderCell>Test</TableHeaderCell>
-          <TableHeaderCell>Created at</TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  When you want to trigger a task now, but have it run at a later time, you can use
-                  the delay option.
+                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  The amount of time from when the run was created to it starting to run.
                 </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  Runs that are delayed and have not been enqueued yet will display in the dashboard
-                  with a “Delayed” status.
-                </Paragraph>
-                <LinkButton
-                  to={docsPath("v3/triggering")}
-                  variant="docs/small"
-                  LeadingIcon={BookOpenIcon}
-                  className="mt-3"
-                >
-                  Read docs
-                </LinkButton>
               </div>
-            }
-          >
-            Delayed until
-          </TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  You can set a TTL (time to live) when triggering a task, which will automatically
-                  expire the run if it hasn’t started within the specified time.
-                </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  All runs in development have a default ttl of 10 minutes. You can disable this by
-                  setting the ttl option.
+              <div>
+                <div className="mb-0.5 flex items-center gap-1.5">
+                  <ClockIcon className="size-4 text-blue-500" /> <Header3>Run duration</Header3>
+                </div>
+                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  The total amount of time from the run starting to it finishing. This includes all
+                  time spent waiting.
                 </Paragraph>
-                <LinkButton
-                  to={docsPath("v3/triggering")}
-                  variant="docs/small"
-                  LeadingIcon={BookOpenIcon}
-                  className="mt-3"
-                >
-                  Read docs
-                </LinkButton>
               </div>
-            }
-          >
-            TTL
-          </TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="max-w-xs p-1">
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  You can add tags to a run and then filter runs using them.
-                </Paragraph>
-                <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
-                  You can add tags when triggering a run or inside the run function.
+              <div>
+                <div className="mb-0.5 flex items-center gap-1.5">
+                  <CpuChipIcon className="size-4 text-success" />
+                  <Header3>Compute duration</Header3>
+                </div>
+                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  The amount of compute time used in the run. This does not include time spent
+                  waiting.
                 </Paragraph>
-                <LinkButton
-                  to={docsPath("v3/tags")}
-                  variant="docs/small"
-                  LeadingIcon={BookOpenIcon}
-                  className="mt-3"
-                >
-                  Read docs
-                </LinkButton>
               </div>
-            }
-          >
-            Tags
-          </TableHeaderCell>
-          <TableHeaderCell>
-            <span className="sr-only">Go to page</span>
-          </TableHeaderCell>
-        </TableRow>
+            </div>
+          }
+        >
+          Duration
+        </TableHeaderCell>
+        {showCompute && (
+          <>
+            <TableHeaderCell>Compute</TableHeaderCell>
+          </>
+        )}
+        <TableHeaderCell>Test</TableHeaderCell>
+        <TableHeaderCell>Created at</TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="max-w-xs p-1">
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                When you want to trigger a task now, but have it run at a later time, you can use
+                the delay option.
+              </Paragraph>
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                Runs that are delayed and have not been enqueued yet will display in the dashboard
+                with a “Delayed” status.
+              </Paragraph>
+              <LinkButton
+                to={docsPath("v3/triggering")}
+                variant="docs/small"
+                LeadingIcon={BookOpenIcon}
+                className="mt-3"
+              >
+                Read docs
+              </LinkButton>
+            </div>
+          }
+        >
+          Delayed until
+        </TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="max-w-xs p-1">
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                You can set a TTL (time to live) when triggering a task, which will automatically
+                expire the run if it hasn’t started within the specified time.
+              </Paragraph>
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                All runs in development have a default ttl of 10 minutes. You can disable this by
+                setting the ttl option.
+              </Paragraph>
+              <LinkButton
+                to={docsPath("v3/triggering")}
+                variant="docs/small"
+                LeadingIcon={BookOpenIcon}
+                className="mt-3"
+              >
+                Read docs
+              </LinkButton>
+            </div>
+          }
+        >
+          TTL
+        </TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="max-w-xs p-1">
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                You can add tags to a run and then filter runs using them.
+              </Paragraph>
+              <Paragraph variant="small" className="!text-wrap text-text-dimmed" spacing>
+                You can add tags when triggering a run or inside the run function.
+              </Paragraph>
+              <LinkButton
+                to={docsPath("v3/tags")}
+                variant="docs/small"
+                LeadingIcon={BookOpenIcon}
+                className="mt-3"
+              >
+                Read docs
+              </LinkButton>
+            </div>
+          }
+        >
+          Tags
+        </TableHeaderCell>
+        <TableHeaderCell>
+          <span className="sr-only">Go to page</span>
+        </TableHeaderCell>
       </TableHeader>
       <TableBody>
         {total === 0 && !hasFilters ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index ca6f902ace..c2f1319bdc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -245,16 +245,14 @@ export default function Page() {
                     </div>
                     <Table containerClassName="max-h-full pb-[2.5rem]">
                       <TableHeader>
-                        <TableRow>
-                          <TableHeaderCell>Task ID</TableHeaderCell>
-                          <TableHeaderCell>Task</TableHeaderCell>
-                          <TableHeaderCell>Running</TableHeaderCell>
-                          <TableHeaderCell>Queued</TableHeaderCell>
-                          <TableHeaderCell>Activity (7d)</TableHeaderCell>
-                          <TableHeaderCell>Avg. duration</TableHeaderCell>
-                          <TableHeaderCell>Environments</TableHeaderCell>
-                          <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                        </TableRow>
+                        <TableHeaderCell>Task ID</TableHeaderCell>
+                        <TableHeaderCell>Task</TableHeaderCell>
+                        <TableHeaderCell>Running</TableHeaderCell>
+                        <TableHeaderCell>Queued</TableHeaderCell>
+                        <TableHeaderCell>Activity (7d)</TableHeaderCell>
+                        <TableHeaderCell>Avg. duration</TableHeaderCell>
+                        <TableHeaderCell>Environments</TableHeaderCell>
+                        <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
                       </TableHeader>
                       <TableBody>
                         {filteredItems.length > 0 ? (
@@ -291,13 +289,13 @@ export default function Page() {
                                     <span>{task.slug}</span>
                                   </div>
                                 </TableCell>
-                                <TableCell to={path} className="py-0" actionClassName="py-0">
+                                <TableCell to={path}>
                                   <TaskFunctionName
                                     functionName={task.exportName}
                                     variant="extra-extra-small"
                                   />
                                 </TableCell>
-                                <TableCell to={path} className="p-0">
+                                <TableCell to={path}>
                                   <Suspense
                                     fallback={
                                       <>
@@ -313,7 +311,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path} className="p-0">
+                                <TableCell to={path}>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={runningStats}>
                                       {(data) => {
@@ -323,7 +321,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path} className="p-0" actionClassName="py-0">
+                                <TableCell to={path}>
                                   <Suspense fallback={<TaskActivityBlankState />}>
                                     <TypedAwait resolve={activity}>
                                       {(data) => {
@@ -343,7 +341,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path} className="p-0">
+                                <TableCell to={path}>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={durations}>
                                       {(data) => {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
index 57c10df9ff..9c19dadf4a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
@@ -210,12 +210,10 @@ function TaskSelector({
       )}
       <Table>
         <TableHeader>
-          <TableRow>
-            <TableHeaderCell className="pl-3" colSpan={2}>
-              Task
-            </TableHeaderCell>
-            <TableHeaderCell className="px-2">File path</TableHeaderCell>
-          </TableRow>
+          <TableHeaderCell className="pl-3" colSpan={2}>
+            Task
+          </TableHeaderCell>
+          <TableHeaderCell className="px-2">File path</TableHeaderCell>
         </TableHeader>
         <TableBody>
           {filteredItems.length > 0 ? (

From 6028ef301856fa06ac2f5bb1c82de54b4951538e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 23 Dec 2024 10:42:50 +0000
Subject: [PATCH 12/34] Added gap between search and filters

---
 apps/webapp/app/components/runs/v3/ScheduleFilters.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
index 66f6743938..7cbb182e76 100644
--- a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
@@ -93,7 +93,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
   }, []);
 
   return (
-    <div className="flex w-full flex-row">
+    <div className="flex w-full">
       <Input
         name="search"
         placeholder="Search schedule id, external id, deduplication id or CRON pattern"
@@ -103,7 +103,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
         defaultValue={search}
         onChange={(e) => handleSearchChange(e.target.value)}
       />
-      <SelectGroup>
+      <SelectGroup className="ml-2">
         <Select name="type" value={type ?? "ALL"} onValueChange={handleTypeChange}>
           <SelectTrigger size="minimal" width="full">
             <SelectValue placeholder={"Select type"} className="ml-2 whitespace-nowrap p-0" />

From f97c60d3847ce610e9f789f8e87d705e66d8d6e6 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 23 Dec 2024 11:21:32 +0000
Subject: [PATCH 13/34] Fixes the schedules table pagination staying fixed to
 the bottom of the page

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
index 7a47613a8f..85915e1594 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
@@ -65,6 +65,7 @@ import {
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { cn } from "~/utils/cn";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -210,9 +211,19 @@ export default function Page() {
                     </div>
                   </div>
 
-                  <div className="h-fit max-h-full overflow-x-auto">
+                  <div
+                    className={cn(
+                      "grid h-fit max-h-full min-h-full overflow-x-auto",
+                      totalPages > 1 ? "grid-rows-[1fr_auto]" : "grid-rows-[1fr]"
+                    )}
+                  >
                     <SchedulesTable schedules={schedules} hasFilters={hasFilters} />
-                    <div className="flex justify-end py-3">
+                    <div
+                      className={cn(
+                        "flex min-h-full",
+                        totalPages > 1 && "justify-end border-t border-grid-dimmed px-2 py-3"
+                      )}
+                    >
                       <PaginationControls currentPage={currentPage} totalPages={totalPages} />
                     </div>
                   </div>

From 3b0e6d477ac0c1b0cc2ddf6dc4db6a4d6d24eeb1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 23 Dec 2024 11:48:04 +0000
Subject: [PATCH 14/34] Removed more unnecessary header table rows to prevent
 them being selectable

---
 .../route.tsx                                 |  14 +--
 .../route.tsx                                 |  14 +--
 .../route.tsx                                 |  10 +-
 .../route.tsx                                 |  62 +++++------
 .../route.tsx                                 |  16 ++-
 .../route.tsx                                 | 104 +++++++++---------
 .../route.tsx                                 |  14 +--
 7 files changed, 110 insertions(+), 124 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
index 496c270f69..ca8a3d5717 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
@@ -187,14 +187,12 @@ export default function Page() {
           </div>
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHeaderCell>Name</TableHeaderCell>
-                <TableHeaderCell>Alert types</TableHeaderCell>
-                <TableHeaderCell>Environments</TableHeaderCell>
-                <TableHeaderCell>Channel</TableHeaderCell>
-                <TableHeaderCell>Enabled</TableHeaderCell>
-                <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
-              </TableRow>
+              <TableHeaderCell>Name</TableHeaderCell>
+              <TableHeaderCell>Alert types</TableHeaderCell>
+              <TableHeaderCell>Environments</TableHeaderCell>
+              <TableHeaderCell>Channel</TableHeaderCell>
+              <TableHeaderCell>Enabled</TableHeaderCell>
+              <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
             </TableHeader>
             <TableBody>
               {alertChannels.length > 0 ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
index ea9c9c4e2e..cea798a085 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
@@ -85,14 +85,12 @@ export default function Page() {
         <div className="flex flex-col">
           <Table containerClassName="border-t-0">
             <TableHeader>
-              <TableRow>
-                <TableHeaderCell>Environment</TableHeaderCell>
-                <TableHeaderCell>Secret key</TableHeaderCell>
-                <TableHeaderCell>Key generated</TableHeaderCell>
-                <TableHeaderCell>Latest version</TableHeaderCell>
-                <TableHeaderCell>Env vars</TableHeaderCell>
-                <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
-              </TableRow>
+              <TableHeaderCell>Environment</TableHeaderCell>
+              <TableHeaderCell>Secret key</TableHeaderCell>
+              <TableHeaderCell>Key generated</TableHeaderCell>
+              <TableHeaderCell>Latest version</TableHeaderCell>
+              <TableHeaderCell>Env vars</TableHeaderCell>
+              <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
             </TableHeader>
             <TableBody>
               {environments.map((environment) => (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
index b4ef617d52..86d72566b8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
@@ -80,12 +80,10 @@ export default function Page() {
         <div className="flex flex-col">
           <Table containerClassName="border-t-0">
             <TableHeader>
-              <TableRow>
-                <TableHeaderCell>Environment</TableHeaderCell>
-                <TableHeaderCell alignment="right">Queued</TableHeaderCell>
-                <TableHeaderCell alignment="right">Running</TableHeaderCell>
-                <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
-              </TableRow>
+              <TableHeaderCell>Environment</TableHeaderCell>
+              <TableHeaderCell alignment="right">Queued</TableHeaderCell>
+              <TableHeaderCell alignment="right">Running</TableHeaderCell>
+              <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
             </TableHeader>
             <TableBody>
               <Suspense fallback={<Spinner />}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
index 411698cdb6..c0ee8e0a9a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
@@ -120,39 +120,37 @@ export default function Page() {
               <div className="grid max-h-full grid-rows-[1fr_auto]">
                 <Table containerClassName="border-t-0">
                   <TableHeader>
-                    <TableRow>
-                      <TableHeaderCell>Deploy</TableHeaderCell>
-                      <TableHeaderCell>Env</TableHeaderCell>
-                      <TableHeaderCell>Version</TableHeaderCell>
-                      <TableHeaderCell
-                        tooltip={
-                          <div className="flex flex-col divide-y divide-grid-dimmed">
-                            {deploymentStatuses.map((status) => (
-                              <div
-                                key={status}
-                                className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
-                              >
-                                <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
-                                  <DeploymentStatus status={status} isBuilt={false} />
-                                </div>
-                                <Paragraph
-                                  variant="extra-small"
-                                  className="!text-wrap text-text-dimmed"
-                                >
-                                  {deploymentStatusDescription(status)}
-                                </Paragraph>
+                    <TableHeaderCell>Deploy</TableHeaderCell>
+                    <TableHeaderCell>Env</TableHeaderCell>
+                    <TableHeaderCell>Version</TableHeaderCell>
+                    <TableHeaderCell
+                      tooltip={
+                        <div className="flex flex-col divide-y divide-grid-dimmed">
+                          {deploymentStatuses.map((status) => (
+                            <div
+                              key={status}
+                              className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                            >
+                              <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                                <DeploymentStatus status={status} isBuilt={false} />
                               </div>
-                            ))}
-                          </div>
-                        }
-                      >
-                        Status
-                      </TableHeaderCell>
-                      <TableHeaderCell>Tasks</TableHeaderCell>
-                      <TableHeaderCell>Deployed at</TableHeaderCell>
-                      <TableHeaderCell>Deployed by</TableHeaderCell>
-                      <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                    </TableRow>
+                              <Paragraph
+                                variant="extra-small"
+                                className="!text-wrap text-text-dimmed"
+                              >
+                                {deploymentStatusDescription(status)}
+                              </Paragraph>
+                            </div>
+                          ))}
+                        </div>
+                      }
+                    >
+                      Status
+                    </TableHeaderCell>
+                    <TableHeaderCell>Tasks</TableHeaderCell>
+                    <TableHeaderCell>Deployed at</TableHeaderCell>
+                    <TableHeaderCell>Deployed by</TableHeaderCell>
+                    <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
                   </TableHeader>
                   <TableBody>
                     {deployments.length > 0 ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
index 9b3d2aa566..f937e63046 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
@@ -214,15 +214,13 @@ export default function Page() {
           )}
           <Table containerClassName={cn(environmentVariables.length === 0 && "border-t-0")}>
             <TableHeader>
-              <TableRow>
-                <TableHeaderCell>Key</TableHeaderCell>
-                {environments.map((environment) => (
-                  <TableHeaderCell key={environment.id}>
-                    <EnvironmentLabel environment={environment} />
-                  </TableHeaderCell>
-                ))}
-                <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
-              </TableRow>
+              <TableHeaderCell>Key</TableHeaderCell>
+              {environments.map((environment) => (
+                <TableHeaderCell key={environment.id}>
+                  <EnvironmentLabel environment={environment} />
+                </TableHeaderCell>
+              ))}
+              <TableHeaderCell hiddenLabel>Actions</TableHeaderCell>
             </TableHeader>
             <TableBody>
               {environmentVariables.length > 0 ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
index 85915e1594..920b58584f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
@@ -385,64 +385,62 @@ function SchedulesTable({
   return (
     <Table>
       <TableHeader>
-        <TableRow>
-          <TableHeaderCell>ID</TableHeaderCell>
-          <TableHeaderCell>Task ID</TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="flex max-w-xs flex-col gap-4 p-1">
-                <div>
-                  <div className="mb-0.5 flex items-center gap-1.5 text-sm">
-                    <div className={"flex items-center space-x-1"}>
-                      <ScheduleTypeIcon type={"DECLARATIVE"} className="text-sky-500" />
-                      <span className="font-medium">{scheduleTypeName("DECLARATIVE")}</span>
-                    </div>
+        <TableHeaderCell>ID</TableHeaderCell>
+        <TableHeaderCell>Task ID</TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="flex max-w-xs flex-col gap-4 p-1">
+              <div>
+                <div className="mb-0.5 flex items-center gap-1.5 text-sm">
+                  <div className={"flex items-center space-x-1"}>
+                    <ScheduleTypeIcon type={"DECLARATIVE"} className="text-sky-500" />
+                    <span className="font-medium">{scheduleTypeName("DECLARATIVE")}</span>
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
-                    Declarative schedules are defined in a{" "}
-                    <InlineCode variant="extra-small">schedules.task</InlineCode> with the{" "}
-                    <InlineCode variant="extra-small">cron</InlineCode>
-                    property. They sync when you update your{" "}
-                    <InlineCode variant="extra-small">schedules.task</InlineCode> definition and run
-                    the CLI dev or deploy commands.
-                  </Paragraph>
                 </div>
-                <div>
-                  <div className="mb-0.5 flex items-center gap-1.5 text-sm">
-                    <div className={"flex items-center space-x-1"}>
-                      <ScheduleTypeIcon type={"IMPERATIVE"} className="text-teal-500" />
-                      <span className="font-medium">{scheduleTypeName("IMPERATIVE")}</span>
-                    </div>
+                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  Declarative schedules are defined in a{" "}
+                  <InlineCode variant="extra-small">schedules.task</InlineCode> with the{" "}
+                  <InlineCode variant="extra-small">cron</InlineCode>
+                  property. They sync when you update your{" "}
+                  <InlineCode variant="extra-small">schedules.task</InlineCode> definition and run
+                  the CLI dev or deploy commands.
+                </Paragraph>
+              </div>
+              <div>
+                <div className="mb-0.5 flex items-center gap-1.5 text-sm">
+                  <div className={"flex items-center space-x-1"}>
+                    <ScheduleTypeIcon type={"IMPERATIVE"} className="text-teal-500" />
+                    <span className="font-medium">{scheduleTypeName("IMPERATIVE")}</span>
                   </div>
-                  <Paragraph variant="small" className="!text-wrap text-text-dimmed">
-                    Imperative schedules are defined here in the dashboard or by using the SDK
-                    functions to create or delete them. They can be created, updated, disabled, and
-                    deleted from the dashboard or using the SDK.
-                  </Paragraph>
                 </div>
-                <LinkButton
-                  variant="docs/small"
-                  to={docsPath("v3/tasks-scheduled")}
-                  LeadingIcon={BookOpenIcon}
-                  className="mb-1"
-                >
-                  View the docs
-                </LinkButton>
+                <Paragraph variant="small" className="!text-wrap text-text-dimmed">
+                  Imperative schedules are defined here in the dashboard or by using the SDK
+                  functions to create or delete them. They can be created, updated, disabled, and
+                  deleted from the dashboard or using the SDK.
+                </Paragraph>
               </div>
-            }
-          >
-            Type
-          </TableHeaderCell>
-          <TableHeaderCell>External ID</TableHeaderCell>
-          <TableHeaderCell>CRON</TableHeaderCell>
-          <TableHeaderCell hiddenLabel>CRON description</TableHeaderCell>
-          <TableHeaderCell>Timezone</TableHeaderCell>
-          <TableHeaderCell>Next run</TableHeaderCell>
-          <TableHeaderCell>Last run</TableHeaderCell>
-          <TableHeaderCell>Deduplication key</TableHeaderCell>
-          <TableHeaderCell>Environments</TableHeaderCell>
-          <TableHeaderCell>Enabled</TableHeaderCell>
-        </TableRow>
+              <LinkButton
+                variant="docs/small"
+                to={docsPath("v3/tasks-scheduled")}
+                LeadingIcon={BookOpenIcon}
+                className="mb-1"
+              >
+                View the docs
+              </LinkButton>
+            </div>
+          }
+        >
+          Type
+        </TableHeaderCell>
+        <TableHeaderCell>External ID</TableHeaderCell>
+        <TableHeaderCell>CRON</TableHeaderCell>
+        <TableHeaderCell hiddenLabel>CRON description</TableHeaderCell>
+        <TableHeaderCell>Timezone</TableHeaderCell>
+        <TableHeaderCell>Next run</TableHeaderCell>
+        <TableHeaderCell>Last run</TableHeaderCell>
+        <TableHeaderCell>Deduplication key</TableHeaderCell>
+        <TableHeaderCell>Environments</TableHeaderCell>
+        <TableHeaderCell>Enabled</TableHeaderCell>
       </TableHeader>
       <TableBody>
         {schedules.length === 0 ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
index b509a9728f..0c0a22c6ca 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
@@ -207,14 +207,12 @@ export default function Page() {
                     <>
                       <Table>
                         <TableHeader>
-                          <TableRow>
-                            <TableHeaderCell>Task</TableHeaderCell>
-                            <TableHeaderCell alignment="right">Runs</TableHeaderCell>
-                            <TableHeaderCell alignment="right">Average duration</TableHeaderCell>
-                            <TableHeaderCell alignment="right">Average cost</TableHeaderCell>
-                            <TableHeaderCell alignment="right">Total duration</TableHeaderCell>
-                            <TableHeaderCell alignment="right">Total cost</TableHeaderCell>
-                          </TableRow>
+                          <TableHeaderCell>Task</TableHeaderCell>
+                          <TableHeaderCell alignment="right">Runs</TableHeaderCell>
+                          <TableHeaderCell alignment="right">Average duration</TableHeaderCell>
+                          <TableHeaderCell alignment="right">Average cost</TableHeaderCell>
+                          <TableHeaderCell alignment="right">Total duration</TableHeaderCell>
+                          <TableHeaderCell alignment="right">Total cost</TableHeaderCell>
                         </TableHeader>
                         <TableBody>
                           {tasks.length === 0 ? (

From 4ab3f3c6b87ec4c86993f55dfff2359366457820 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 23 Dec 2024 12:30:31 +0000
Subject: [PATCH 15/34] Removed isSelected styles (not working)

---
 apps/webapp/app/components/primitives/Table.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index a3c4002fd6..a598ea4d6f 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -313,10 +313,7 @@ export const TableCellMenu = forwardRef<
         <div className="relative h-full p-1">
           <div
             className={cn(
-              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright",
-              isSelected && isSelectedStyle,
-              isSelected &&
-                "group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/50"
+              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright"
             )}
           >
             {/* Hidden buttons that show on hover */}

From f9caa9f0ab36cca3d65e1f8d14141cba137d9bcd Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 31 Dec 2024 14:30:54 +0000
Subject: [PATCH 16/34] Added <tr> back to the main Table compontent

---
 .../app/components/primitives/Table.tsx       |  3 +-
 .../route.tsx                                 | 60 +++++++++----------
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index a598ea4d6f..abe38a81c3 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -44,9 +44,8 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
           "sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
           className
         )}
-        tabIndex={-1}
       >
-        {children}
+        <tr tabIndex={-1}>{children}</tr>
       </thead>
     );
   }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
index ceb620624f..cb03cdfbae 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
@@ -134,38 +134,36 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) {
   return (
     <Table className="max-h-full overflow-y-auto">
       <TableHeader>
-        <TableRow>
-          <TableHeaderCell>ID</TableHeaderCell>
-          <TableHeaderCell>Env</TableHeaderCell>
-          <TableHeaderCell
-            tooltip={
-              <div className="flex flex-col divide-y divide-grid-dimmed">
-                {allBatchStatuses.map((status) => (
-                  <div
-                    key={status}
-                    className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
-                  >
-                    <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
-                      <BatchStatusCombo status={status} />
-                    </div>
-                    <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
-                      {descriptionForBatchStatus(status)}
-                    </Paragraph>
+        <TableHeaderCell>ID</TableHeaderCell>
+        <TableHeaderCell>Env</TableHeaderCell>
+        <TableHeaderCell
+          tooltip={
+            <div className="flex flex-col divide-y divide-grid-dimmed">
+              {allBatchStatuses.map((status) => (
+                <div
+                  key={status}
+                  className="grid grid-cols-[8rem_1fr] gap-x-2 py-2 first:pt-1 last:pb-1"
+                >
+                  <div className="mb-0.5 flex items-center gap-1.5 whitespace-nowrap">
+                    <BatchStatusCombo status={status} />
                   </div>
-                ))}
-              </div>
-            }
-          >
-            Status
-          </TableHeaderCell>
-          <TableHeaderCell>Runs</TableHeaderCell>
-          <TableHeaderCell>Duration</TableHeaderCell>
-          <TableHeaderCell>Created</TableHeaderCell>
-          <TableHeaderCell>Finished</TableHeaderCell>
-          <TableHeaderCell>
-            <span className="sr-only">Go to batch</span>
-          </TableHeaderCell>
-        </TableRow>
+                  <Paragraph variant="extra-small" className="!text-wrap text-text-dimmed">
+                    {descriptionForBatchStatus(status)}
+                  </Paragraph>
+                </div>
+              ))}
+            </div>
+          }
+        >
+          Status
+        </TableHeaderCell>
+        <TableHeaderCell>Runs</TableHeaderCell>
+        <TableHeaderCell>Duration</TableHeaderCell>
+        <TableHeaderCell>Created</TableHeaderCell>
+        <TableHeaderCell>Finished</TableHeaderCell>
+        <TableHeaderCell>
+          <span className="sr-only">Go to batch</span>
+        </TableHeaderCell>
       </TableHeader>
       <TableBody>
         {batches.length === 0 && !hasFilters ? (

From b2394741fa2ed6b908e00673b1a395ae89ca7146 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 3 Jan 2025 17:16:55 +0000
Subject: [PATCH 17/34] Table row handles modifier keys

---
 .../app/components/primitives/Table.tsx       | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index abe38a81c3..02809dbae3 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -79,20 +79,45 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   ({ className, disabled, isSelected, children, to, onClick }, ref) => {
     const navigate = useNavigate();
 
-    const handleInteraction = (event: React.KeyboardEvent | React.MouseEvent) => {
-      if ((event.target as HTMLElement).closest('button, a, [role="button"]')) {
+    const handleNavigation = (event: React.KeyboardEvent | React.MouseEvent) => {
+      // Don't trigger navigation if clicking on interactive elements
+      if ((event.target as HTMLElement).closest('button, a, [role="button"], [role="menu"]')) {
         return;
       }
 
-      const firstCellWithTo = React.Children.toArray(children).find((child) => {
-        if (React.isValidElement(child) && child.type === TableCell) {
-          return child.props.to;
+      // For mouse events
+      if ("button" in event) {
+        // Handle middle mouse button click
+        if (event.button === 1) {
+          return; // Let default behavior handle middle click
         }
-        return false;
-      }) as React.ReactElement | undefined;
 
-      if (firstCellWithTo?.props.to) {
-        navigate(firstCellWithTo.props.to);
+        // Handle CMD/CTRL + Click
+        if (event.metaKey || event.ctrlKey) {
+          if (to) {
+            window.open(to, "_blank");
+          }
+          return;
+        }
+      }
+
+      // For keyboard events
+      if ("key" in event) {
+        if (event.key === "Enter") {
+          if (event.metaKey || event.ctrlKey) {
+            if (to) {
+              window.open(to, "_blank");
+            }
+            return;
+          }
+        } else {
+          return; // Only handle Enter key for keyboard events
+        }
+      }
+
+      // Default navigation behavior
+      if (to) {
+        navigate(to);
       } else if (onClick) {
         onClick(event);
       }
@@ -102,22 +127,24 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
       if (event.key === "Enter") {
         event.preventDefault();
         event.stopPropagation();
-        handleInteraction(event);
+        handleNavigation(event);
       }
     };
 
     return (
       <tr
         ref={ref}
+        role="link"
         tabIndex={disabled ? -1 : 0}
-        onClick={handleInteraction}
+        onClick={handleNavigation}
         onKeyDown={handleKeyDown}
         className={cn(
           "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus-visible:bg-background-bright",
-          disabled && "opacity-50",
+          disabled && "cursor-not-allowed opacity-50",
           isSelected && isSelectedStyle,
           className
         )}
+        aria-disabled={disabled}
       >
         {children}
       </tr>
@@ -236,6 +263,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
+          "child:pointer-events-none [&>[role=button]]:pointer-events-auto [&>[role=menu]]:pointer-events-auto [&>a]:pointer-events-auto [&>button]:pointer-events-auto",
           className
         )}
         colSpan={colSpan}

From 8a814d434ff85b8ab9c2305d336074f659d86094 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 3 Jan 2025 17:28:28 +0000
Subject: [PATCH 18/34] Adds to={path} to the TableRow only

---
 .../app/components/runs/v3/TaskRunsTable.tsx  | 40 ++++++++-----------
 .../route.tsx                                 | 16 ++++----
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index bf344a0c4c..18b7906aef 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -283,7 +283,7 @@ export function TaskRunsTable({
           runs.map((run, index) => {
             const path = v3RunSpanPath(organization, project, run, { spanId: run.spanId });
             return (
-              <TableRow key={run.id}>
+              <TableRow to={path} key={run.id}>
                 {allowSelection && (
                   <TableCell className="pl-3 pr-0">
                     <Checkbox
@@ -298,33 +298,29 @@ export function TaskRunsTable({
                     />
                   </TableCell>
                 )}
-                <TableCell to={path} alignment="right">
-                  {formatNumber(run.number)}
-                </TableCell>
-                <TableCell to={path}>
+                <TableCell alignment="right">{formatNumber(run.number)}</TableCell>
+                <TableCell>
                   <EnvironmentLabel
                     environment={run.environment}
                     userName={run.environment.userName}
                   />
                 </TableCell>
-                <TableCell to={path}>
+                <TableCell>
                   <span className="flex items-center gap-x-1">
                     {run.taskIdentifier}
                     {run.rootTaskRunId === null ? <Badge variant="extra-small">Root</Badge> : null}
                   </span>
                 </TableCell>
-                <TableCell to={path}>{run.version ?? "–"}</TableCell>
-                <TableCell to={path}>
+                <TableCell>{run.version ?? "–"}</TableCell>
+                <TableCell>
                   <SimpleTooltip
                     content={descriptionForTaskRunStatus(run.status)}
                     disableHoverableContent
                     button={<TaskRunStatusCombo status={run.status} />}
                   />
                 </TableCell>
-                <TableCell to={path}>
-                  {run.startedAt ? <DateTime date={run.startedAt} /> : "–"}
-                </TableCell>
-                <TableCell to={path} className="w-[1%]" actionClassName="pr-0 tabular-nums">
+                <TableCell>{run.startedAt ? <DateTime date={run.startedAt} /> : "–"}</TableCell>
+                <TableCell className="w-[1%]" actionClassName="pr-0 tabular-nums">
                   <div className="flex items-center gap-1">
                     <RectangleStackIcon className="size-4 text-text-dimmed" />
                     {run.startedAt ? (
@@ -340,7 +336,7 @@ export function TaskRunsTable({
                     )}
                   </div>
                 </TableCell>
-                <TableCell to={path} className="w-[1%]" actionClassName="px-4 tabular-nums">
+                <TableCell className="w-[1%]" actionClassName="px-4 tabular-nums">
                   <div className="flex items-center gap-1">
                     <ClockIcon className="size-4 text-blue-500" />
                     {run.startedAt && run.finishedAt ? (
@@ -354,7 +350,7 @@ export function TaskRunsTable({
                     )}
                   </div>
                 </TableCell>
-                <TableCell to={path} actionClassName="pl-0 tabular-nums">
+                <TableCell actionClassName="pl-0 tabular-nums">
                   <div className="flex items-center gap-1">
                     <CpuChipIcon className="size-4 text-success" />
                     {run.usageDurationMs > 0
@@ -365,21 +361,17 @@ export function TaskRunsTable({
                   </div>
                 </TableCell>
                 {showCompute && (
-                  <TableCell to={path} className="tabular-nums">
+                  <TableCell className="tabular-nums">
                     {run.costInCents > 0 ? formatCurrencyAccurate(run.costInCents / 100) : "–"}
                   </TableCell>
                 )}
-                <TableCell to={path}>
+                <TableCell>
                   {run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
                 </TableCell>
-                <TableCell to={path}>
-                  {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
-                </TableCell>
-                <TableCell to={path}>
-                  {run.delayUntil ? <DateTime date={run.delayUntil} /> : "–"}
-                </TableCell>
-                <TableCell to={path}>{run.ttl ?? "–"}</TableCell>
-                <TableCell to={path} actionClassName="py-1">
+                <TableCell>{run.createdAt ? <DateTime date={run.createdAt} /> : "–"}</TableCell>
+                <TableCell>{run.delayUntil ? <DateTime date={run.delayUntil} /> : "–"}</TableCell>
+                <TableCell>{run.ttl ?? "–"}</TableCell>
+                <TableCell actionClassName="py-1">
                   <div className="flex gap-1">
                     {run.tags.map((tag) => <RunTag key={tag} tag={tag} />) || "–"}
                   </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index c2f1319bdc..c289e25956 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -279,8 +279,8 @@ export default function Page() {
                               : v3TestPath(organization, project);
 
                             return (
-                              <TableRow key={task.slug} className="group">
-                                <TableCell to={path}>
+                              <TableRow to={path} key={task.slug} className="group">
+                                <TableCell>
                                   <div className="flex items-center gap-2">
                                     <SimpleTooltip
                                       button={<TaskTriggerSourceIcon source={task.triggerSource} />}
@@ -289,13 +289,13 @@ export default function Page() {
                                     <span>{task.slug}</span>
                                   </div>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <TaskFunctionName
                                     functionName={task.exportName}
                                     variant="extra-extra-small"
                                   />
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <Suspense
                                     fallback={
                                       <>
@@ -311,7 +311,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={runningStats}>
                                       {(data) => {
@@ -321,7 +321,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <Suspense fallback={<TaskActivityBlankState />}>
                                     <TypedAwait resolve={activity}>
                                       {(data) => {
@@ -341,7 +341,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={durations}>
                                       {(data) => {
@@ -355,7 +355,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell>
                                   <EnvironmentLabels environments={task.environments} />
                                 </TableCell>
                                 <TableCellMenu

From f2bdc649cf47b29445482d5f57f46e5dfba50a14 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 15:26:02 +0000
Subject: [PATCH 19/34] Revert "Adds to={path} to the TableRow only"

This reverts commit 8a814d434ff85b8ab9c2305d336074f659d86094.
---
 .../app/components/runs/v3/TaskRunsTable.tsx  | 40 +++++++++++--------
 .../route.tsx                                 | 16 ++++----
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 18b7906aef..bf344a0c4c 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -283,7 +283,7 @@ export function TaskRunsTable({
           runs.map((run, index) => {
             const path = v3RunSpanPath(organization, project, run, { spanId: run.spanId });
             return (
-              <TableRow to={path} key={run.id}>
+              <TableRow key={run.id}>
                 {allowSelection && (
                   <TableCell className="pl-3 pr-0">
                     <Checkbox
@@ -298,29 +298,33 @@ export function TaskRunsTable({
                     />
                   </TableCell>
                 )}
-                <TableCell alignment="right">{formatNumber(run.number)}</TableCell>
-                <TableCell>
+                <TableCell to={path} alignment="right">
+                  {formatNumber(run.number)}
+                </TableCell>
+                <TableCell to={path}>
                   <EnvironmentLabel
                     environment={run.environment}
                     userName={run.environment.userName}
                   />
                 </TableCell>
-                <TableCell>
+                <TableCell to={path}>
                   <span className="flex items-center gap-x-1">
                     {run.taskIdentifier}
                     {run.rootTaskRunId === null ? <Badge variant="extra-small">Root</Badge> : null}
                   </span>
                 </TableCell>
-                <TableCell>{run.version ?? "–"}</TableCell>
-                <TableCell>
+                <TableCell to={path}>{run.version ?? "–"}</TableCell>
+                <TableCell to={path}>
                   <SimpleTooltip
                     content={descriptionForTaskRunStatus(run.status)}
                     disableHoverableContent
                     button={<TaskRunStatusCombo status={run.status} />}
                   />
                 </TableCell>
-                <TableCell>{run.startedAt ? <DateTime date={run.startedAt} /> : "–"}</TableCell>
-                <TableCell className="w-[1%]" actionClassName="pr-0 tabular-nums">
+                <TableCell to={path}>
+                  {run.startedAt ? <DateTime date={run.startedAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path} className="w-[1%]" actionClassName="pr-0 tabular-nums">
                   <div className="flex items-center gap-1">
                     <RectangleStackIcon className="size-4 text-text-dimmed" />
                     {run.startedAt ? (
@@ -336,7 +340,7 @@ export function TaskRunsTable({
                     )}
                   </div>
                 </TableCell>
-                <TableCell className="w-[1%]" actionClassName="px-4 tabular-nums">
+                <TableCell to={path} className="w-[1%]" actionClassName="px-4 tabular-nums">
                   <div className="flex items-center gap-1">
                     <ClockIcon className="size-4 text-blue-500" />
                     {run.startedAt && run.finishedAt ? (
@@ -350,7 +354,7 @@ export function TaskRunsTable({
                     )}
                   </div>
                 </TableCell>
-                <TableCell actionClassName="pl-0 tabular-nums">
+                <TableCell to={path} actionClassName="pl-0 tabular-nums">
                   <div className="flex items-center gap-1">
                     <CpuChipIcon className="size-4 text-success" />
                     {run.usageDurationMs > 0
@@ -361,17 +365,21 @@ export function TaskRunsTable({
                   </div>
                 </TableCell>
                 {showCompute && (
-                  <TableCell className="tabular-nums">
+                  <TableCell to={path} className="tabular-nums">
                     {run.costInCents > 0 ? formatCurrencyAccurate(run.costInCents / 100) : "–"}
                   </TableCell>
                 )}
-                <TableCell>
+                <TableCell to={path}>
                   {run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
                 </TableCell>
-                <TableCell>{run.createdAt ? <DateTime date={run.createdAt} /> : "–"}</TableCell>
-                <TableCell>{run.delayUntil ? <DateTime date={run.delayUntil} /> : "–"}</TableCell>
-                <TableCell>{run.ttl ?? "–"}</TableCell>
-                <TableCell actionClassName="py-1">
+                <TableCell to={path}>
+                  {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {run.delayUntil ? <DateTime date={run.delayUntil} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>{run.ttl ?? "–"}</TableCell>
+                <TableCell to={path} actionClassName="py-1">
                   <div className="flex gap-1">
                     {run.tags.map((tag) => <RunTag key={tag} tag={tag} />) || "–"}
                   </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index c289e25956..c2f1319bdc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -279,8 +279,8 @@ export default function Page() {
                               : v3TestPath(organization, project);
 
                             return (
-                              <TableRow to={path} key={task.slug} className="group">
-                                <TableCell>
+                              <TableRow key={task.slug} className="group">
+                                <TableCell to={path}>
                                   <div className="flex items-center gap-2">
                                     <SimpleTooltip
                                       button={<TaskTriggerSourceIcon source={task.triggerSource} />}
@@ -289,13 +289,13 @@ export default function Page() {
                                     <span>{task.slug}</span>
                                   </div>
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <TaskFunctionName
                                     functionName={task.exportName}
                                     variant="extra-extra-small"
                                   />
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <Suspense
                                     fallback={
                                       <>
@@ -311,7 +311,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={runningStats}>
                                       {(data) => {
@@ -321,7 +321,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <Suspense fallback={<TaskActivityBlankState />}>
                                     <TypedAwait resolve={activity}>
                                       {(data) => {
@@ -341,7 +341,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <Suspense fallback={<></>}>
                                     <TypedAwait resolve={durations}>
                                       {(data) => {
@@ -355,7 +355,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell>
+                                <TableCell to={path}>
                                   <EnvironmentLabels environments={task.environments} />
                                 </TableCell>
                                 <TableCellMenu

From 47a560b7f8fedaba83fc484a919f830b25a39b13 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 15:26:15 +0000
Subject: [PATCH 20/34] Revert "Table row handles modifier keys"

This reverts commit b2394741fa2ed6b908e00673b1a395ae89ca7146.
---
 .../app/components/primitives/Table.tsx       | 52 +++++--------------
 1 file changed, 12 insertions(+), 40 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 02809dbae3..abe38a81c3 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -79,45 +79,20 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   ({ className, disabled, isSelected, children, to, onClick }, ref) => {
     const navigate = useNavigate();
 
-    const handleNavigation = (event: React.KeyboardEvent | React.MouseEvent) => {
-      // Don't trigger navigation if clicking on interactive elements
-      if ((event.target as HTMLElement).closest('button, a, [role="button"], [role="menu"]')) {
+    const handleInteraction = (event: React.KeyboardEvent | React.MouseEvent) => {
+      if ((event.target as HTMLElement).closest('button, a, [role="button"]')) {
         return;
       }
 
-      // For mouse events
-      if ("button" in event) {
-        // Handle middle mouse button click
-        if (event.button === 1) {
-          return; // Let default behavior handle middle click
+      const firstCellWithTo = React.Children.toArray(children).find((child) => {
+        if (React.isValidElement(child) && child.type === TableCell) {
+          return child.props.to;
         }
+        return false;
+      }) as React.ReactElement | undefined;
 
-        // Handle CMD/CTRL + Click
-        if (event.metaKey || event.ctrlKey) {
-          if (to) {
-            window.open(to, "_blank");
-          }
-          return;
-        }
-      }
-
-      // For keyboard events
-      if ("key" in event) {
-        if (event.key === "Enter") {
-          if (event.metaKey || event.ctrlKey) {
-            if (to) {
-              window.open(to, "_blank");
-            }
-            return;
-          }
-        } else {
-          return; // Only handle Enter key for keyboard events
-        }
-      }
-
-      // Default navigation behavior
-      if (to) {
-        navigate(to);
+      if (firstCellWithTo?.props.to) {
+        navigate(firstCellWithTo.props.to);
       } else if (onClick) {
         onClick(event);
       }
@@ -127,24 +102,22 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
       if (event.key === "Enter") {
         event.preventDefault();
         event.stopPropagation();
-        handleNavigation(event);
+        handleInteraction(event);
       }
     };
 
     return (
       <tr
         ref={ref}
-        role="link"
         tabIndex={disabled ? -1 : 0}
-        onClick={handleNavigation}
+        onClick={handleInteraction}
         onKeyDown={handleKeyDown}
         className={cn(
           "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus-visible:bg-background-bright",
-          disabled && "cursor-not-allowed opacity-50",
+          disabled && "opacity-50",
           isSelected && isSelectedStyle,
           className
         )}
-        aria-disabled={disabled}
       >
         {children}
       </tr>
@@ -263,7 +236,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
-          "child:pointer-events-none [&>[role=button]]:pointer-events-auto [&>[role=menu]]:pointer-events-auto [&>a]:pointer-events-auto [&>button]:pointer-events-auto",
           className
         )}
         colSpan={colSpan}

From 8ad74430290f876cbeddbc2aa39d7235fc3853c5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 17:08:18 +0000
Subject: [PATCH 21/34] Table reverted to use linked cells rather than rows

---
 .../app/components/primitives/Table.tsx       | 63 ++++++++-----------
 1 file changed, 26 insertions(+), 37 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index abe38a81c3..8e1be1d576 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
-import { useNavigate } from "@remix-run/react";
+import { Link, useNavigate } from "@remix-run/react";
 import React, { ReactNode, forwardRef, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
@@ -76,42 +76,11 @@ type TableRowProps = {
 };
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ className, disabled, isSelected, children, to, onClick }, ref) => {
-    const navigate = useNavigate();
-
-    const handleInteraction = (event: React.KeyboardEvent | React.MouseEvent) => {
-      if ((event.target as HTMLElement).closest('button, a, [role="button"]')) {
-        return;
-      }
-
-      const firstCellWithTo = React.Children.toArray(children).find((child) => {
-        if (React.isValidElement(child) && child.type === TableCell) {
-          return child.props.to;
-        }
-        return false;
-      }) as React.ReactElement | undefined;
-
-      if (firstCellWithTo?.props.to) {
-        navigate(firstCellWithTo.props.to);
-      } else if (onClick) {
-        onClick(event);
-      }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        event.stopPropagation();
-        handleInteraction(event);
-      }
-    };
-
+  ({ className, disabled, isSelected, children }, ref) => {
     return (
       <tr
         ref={ref}
         tabIndex={disabled ? -1 : 0}
-        onClick={handleInteraction}
-        onKeyDown={handleKeyDown}
         className={cn(
           "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus-visible:bg-background-bright",
           disabled && "opacity-50",
@@ -208,6 +177,8 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       alignment = "left",
       children,
       colSpan,
+      to,
+      onClick,
       hasAction = false,
       isSticky = false,
       rowHoverStyle = "default",
@@ -225,14 +196,22 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         break;
     }
 
+    const flexClasses = cn(
+      "flex w-full whitespace-nowrap px-3 py-3 items-center text-xs text-text-dimmed",
+      alignment === "left"
+        ? "justify-start text-left"
+        : alignment === "center"
+        ? "justify-center text-center"
+        : "justify-end text-right"
+    );
+
     return (
       <td
         ref={ref}
         className={cn(
           "text-xs text-charcoal-400",
-          hasAction ? "cursor-pointer" : "h-10 min-h-10 px-3 align-middle",
-          alignmentClassName,
-          actionClassName,
+          to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
+          !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
@@ -240,7 +219,17 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         )}
         colSpan={colSpan}
       >
-        {children}
+        {to ? (
+          <Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
+            {children}
+          </Link>
+        ) : onClick ? (
+          <button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
+            {children}
+          </button>
+        ) : (
+          <>{children}</>
+        )}
       </td>
     );
   }

From 796e0d348c83c1e0a27c773c7d974bd1ad5f5e58 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 17:49:32 +0000
Subject: [PATCH 22/34] Set the tab index of a cell and style the table row
 when tabbed

---
 .../webapp/app/components/primitives/Table.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 8e1be1d576..ea316f4065 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -80,9 +80,9 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     return (
       <tr
         ref={ref}
-        tabIndex={disabled ? -1 : 0}
         className={cn(
-          "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed focus-visible:bg-background-bright",
+          "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          "has-[[tabindex='0']:focus]:bg-background-bright",
           disabled && "opacity-50",
           isSelected && isSelectedStyle,
           className
@@ -153,6 +153,7 @@ type TableCellProps = TableCellBasicProps & {
   actionClassName?: string;
   rowHoverStyle?: keyof typeof rowHoverStyles;
   isSelected?: boolean;
+  isTabbableCell?: boolean;
 };
 
 const rowHoverStyles = {
@@ -183,6 +184,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       isSticky = false,
       rowHoverStyle = "default",
       isSelected,
+      isTabbableCell = false,
     },
     ref
   ) => {
@@ -220,11 +222,19 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         colSpan={colSpan}
       >
         {to ? (
-          <Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
+          <Link
+            to={to}
+            className={cn("focus:outline-none", flexClasses, actionClassName)}
+            tabIndex={isTabbableCell ? 0 : -1}
+          >
             {children}
           </Link>
         ) : onClick ? (
-          <button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
+          <button
+            onClick={onClick}
+            className={cn("focus:outline-none", flexClasses, actionClassName)}
+            tabIndex={isTabbableCell ? 0 : -1}
+          >
             {children}
           </button>
         ) : (

From 17302b84f5d5478f650f292a7681d46b99b45dac Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 18:50:49 +0000
Subject: [PATCH 23/34] Tabbed row style applied to the sticky cells

---
 apps/webapp/app/components/primitives/Table.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index ea316f4065..17da458968 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -166,7 +166,7 @@ const rowHoverStyles = {
 };
 
 const stickyStyles =
-  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto";
+  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 [&:has(.group-hover\\/table-row\\:block)]:w-auto group-has-[[tabindex='0']:focus]:bg-background-bright";
 
 const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";
 
@@ -212,7 +212,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         ref={ref}
         className={cn(
           "text-xs text-charcoal-400",
-          to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
+          to || onClick || hasAction ? "cursor-pointer" : "cursor-default px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
@@ -311,7 +311,7 @@ export const TableCellMenu = forwardRef<
         <div className="relative h-full p-1">
           <div
             className={cn(
-              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright"
+              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]:bg-background-bright"
             )}
           >
             {/* Hidden buttons that show on hover */}

From 9edd0e2c1a46638bc7df30c276d9f62629b58147 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 18:52:07 +0000
Subject: [PATCH 24/34] Adds isTabbableCell to each table

---
 apps/webapp/app/components/runs/v3/TaskRunsTable.tsx        | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 6 ++++--
 .../route.tsx                                               | 6 ++----
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 1 +
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index bf344a0c4c..32bfbd1f74 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -298,7 +298,7 @@ export function TaskRunsTable({
                     />
                   </TableCell>
                 )}
-                <TableCell to={path} alignment="right">
+                <TableCell to={path} alignment="right" isTabbableCell>
                   {formatNumber(run.number)}
                 </TableCell>
                 <TableCell to={path}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index c2f1319bdc..945ee803d6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -280,7 +280,7 @@ export default function Page() {
 
                             return (
                               <TableRow key={task.slug} className="group">
-                                <TableCell to={path}>
+                                <TableCell to={path} isTabbableCell>
                                   <div className="flex items-center gap-2">
                                     <SimpleTooltip
                                       button={<TaskTriggerSourceIcon source={task.triggerSource} />}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
index cb03cdfbae..ebf23664cd 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx
@@ -185,7 +185,9 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) {
             const path = v3BatchRunsPath(organization, project, batch);
             return (
               <TableRow key={batch.id}>
-                <TableCell to={path}>{batch.friendlyId}</TableCell>
+                <TableCell to={path} isTabbableCell>
+                  {batch.friendlyId}
+                </TableCell>
                 <TableCell to={path}>
                   <EnvironmentLabel
                     environment={batch.environment}
@@ -199,7 +201,7 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) {
                       disableHoverableContent
                       button={
                         <span className="flex items-center gap-1">
-                          <ExclamationCircleIcon className="size-4 text-slate-500" />
+                          <ExclamationCircleIcon className="size-4 text-text-dimmed" />
                           <span>Legacy batch</span>
                         </span>
                       }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
index 7678f53633..1ec85e3aa4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
@@ -210,10 +210,8 @@ export default function Page() {
             <div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
               <Table>
                 <TableHeader>
-                  <TableRow>
-                    <TableHeaderCell className="px-2">Task</TableHeaderCell>
-                    <TableHeaderCell className="px-2">File path</TableHeaderCell>
-                  </TableRow>
+                  <TableHeaderCell className="px-2">Task</TableHeaderCell>
+                  <TableHeaderCell className="px-2">File path</TableHeaderCell>
                 </TableHeader>
                 <TableBody>
                   {deployment.tasks.map((t) => {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
index c0ee8e0a9a..c3ee4779b1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
@@ -168,7 +168,7 @@ export default function Page() {
                         const isSelected = deploymentParam === deployment.shortCode;
                         return (
                           <TableRow key={deployment.id} className="group" isSelected={isSelected}>
-                            <TableCell to={path} isSelected={isSelected}>
+                            <TableCell to={path} isTabbableCell isSelected={isSelected}>
                               <div className="flex items-center gap-2">
                                 <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
                                 {deployment.label && (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
index 920b58584f..182a4f91c5 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
@@ -452,7 +452,7 @@ function SchedulesTable({
             const cellClass = schedule.active ? "" : "opacity-50";
             return (
               <TableRow key={schedule.id} className={isSelected ? "bg-grid-dimmed" : undefined}>
-                <TableCell to={path} className={cellClass}>
+                <TableCell to={path} isTabbableCell className={cellClass}>
                   {schedule.friendlyId}
                 </TableCell>
                 <TableCell to={path} className={cellClass}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
index 9c19dadf4a..e6e946467a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
@@ -264,6 +264,7 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
       </TableCell>
       <TableCell
         to={path}
+        isTabbableCell
         actionClassName="pl-1 pr-2 py-1.5"
         className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
       >

From 5b11f5cbec4b66a48dc36f5a71ae532b34e7d72c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 19:02:12 +0000
Subject: [PATCH 25/34] Improves the spcificity of the row highlighting

---
 apps/webapp/app/components/primitives/Table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 17da458968..856779a934 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -166,7 +166,7 @@ const rowHoverStyles = {
 };
 
 const stickyStyles =
-  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 [&:has(.group-hover\\/table-row\\:block)]:w-auto group-has-[[tabindex='0']:focus]:bg-background-bright";
+  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 [&:has(.group-hover\\/table-row\\:block)]:w-auto group-has-[[tabindex='0']:focus]/table-row:bg-background-bright";
 
 const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";
 
@@ -311,7 +311,7 @@ export const TableCellMenu = forwardRef<
         <div className="relative h-full p-1">
           <div
             className={cn(
-              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]:bg-background-bright"
+              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright"
             )}
           >
             {/* Hidden buttons that show on hover */}

From 2219abc03351bafb6293827ca65c9dc3c5082818 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sat, 4 Jan 2025 19:19:50 +0000
Subject: [PATCH 26/34] Reduces the height of the task rows to match the other
 tables

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index 945ee803d6..7ff742f6eb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -321,7 +321,7 @@ export default function Page() {
                                     </TypedAwait>
                                   </Suspense>
                                 </TableCell>
-                                <TableCell to={path}>
+                                <TableCell to={path} actionClassName="py-1.5">
                                   <Suspense fallback={<TaskActivityBlankState />}>
                                     <TypedAwait resolve={activity}>
                                       {(data) => {

From ab32e4d097fabbee272913dbce60679c6ae9dcd8 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Sun, 5 Jan 2025 12:52:44 +0000
Subject: [PATCH 27/34] Adds tab styles to fill in row dividers top and bottom

---
 apps/webapp/app/components/primitives/Table.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 856779a934..ac115eb5ad 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -168,6 +168,9 @@ const rowHoverStyles = {
 const stickyStyles =
   "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 [&:has(.group-hover\\/table-row\\:block)]:w-auto group-has-[[tabindex='0']:focus]/table-row:bg-background-bright";
 
+const tabFocusRowDividerStyles =
+  "has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed";
+
 const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
@@ -217,6 +220,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           isSticky && stickyStyles,
           isSelected && isSelectedStyle,
           !isSelected && rowHoverStyles[rowHoverStyle],
+          tabFocusRowDividerStyles,
           className
         )}
         colSpan={colSpan}

From 2d46781ea5822991b06f8e7f28f9350c62b4343f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 10:08:07 +0000
Subject: [PATCH 28/34] Removed old row onClick and to props

---
 apps/webapp/app/components/primitives/Table.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index ac115eb5ad..2ff7e73918 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
-import { Link, useNavigate } from "@remix-run/react";
+import { Link } from "@remix-run/react";
 import React, { ReactNode, forwardRef, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
@@ -71,8 +71,6 @@ type TableRowProps = {
   children: ReactNode;
   disabled?: boolean;
   isSelected?: boolean;
-  to?: string;
-  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
 };
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(

From 399896152871933f3df8bad1b81ce92e4e2d3288 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 10:08:17 +0000
Subject: [PATCH 29/34] Removed duplicate table header row

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
index a246a32ab3..5456cf4db7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
@@ -303,10 +303,8 @@ export default function Page() {
               <Header3>Next 5 runs</Header3>
               <Table>
                 <TableHeader>
-                  <TableRow>
-                    {!isUtc && <TableHeaderCell>{schedule.timezone}</TableHeaderCell>}
-                    <TableHeaderCell>UTC</TableHeaderCell>
-                  </TableRow>
+                  {!isUtc && <TableHeaderCell>{schedule.timezone}</TableHeaderCell>}
+                  <TableHeaderCell>UTC</TableHeaderCell>
                 </TableHeader>
                 <TableBody>
                   {schedule.active ? (

From e7fd0c7a6942549c8a5c667cff27f185f9cf5157 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 17:03:10 +0000
Subject: [PATCH 30/34] Creates table style variants so tables look good in the
 inspector panels

---
 .../app/components/primitives/Table.tsx       | 124 +++++++++++-------
 .../app/components/runs/v3/TaskRunsTable.tsx  |   5 +-
 .../route.tsx                                 |   4 +-
 3 files changed, 83 insertions(+), 50 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 2ff7e73918..d01c0c6c15 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -1,10 +1,33 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Link } from "@remix-run/react";
-import React, { ReactNode, forwardRef, useState } from "react";
+import React, { ReactNode, forwardRef, useState, useContext, createContext } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
 import { InfoIconTooltip } from "./Tooltip";
 
+const variants = {
+  bright: {
+    header: "bg-background-bright",
+    cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
+    stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
+    menuButton:
+      "bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
+    menuButtonDivider: "group-hover/table-row:border-charcoal-600/70",
+    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+  },
+  dimmed: {
+    header: "bg-background-dimmed",
+    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    menuButton:
+      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    menuButtonDivider: "group-hover/table-row:border-grid-dimmed",
+    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+  },
+} as const;
+
+export type TableVariant = keyof typeof variants;
+
 type TableProps = {
   containerClassName?: string;
   className?: string;
@@ -12,20 +35,25 @@ type TableProps = {
   fullWidth?: boolean;
 };
 
-export const Table = forwardRef<HTMLTableElement, TableProps>(
-  ({ className, containerClassName, children, fullWidth }, ref) => {
+// Add TableContext
+const TableContext = createContext<{ variant: TableVariant }>({ variant: "dimmed" });
+
+export const Table = forwardRef<HTMLTableElement, TableProps & { variant?: TableVariant }>(
+  ({ className, containerClassName, children, fullWidth, variant = "dimmed" }, ref) => {
     return (
-      <div
-        className={cn(
-          "overflow-x-auto whitespace-nowrap border-t border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
-          containerClassName,
-          fullWidth && "w-full"
-        )}
-      >
-        <table ref={ref} className={cn("w-full", className)}>
-          {children}
-        </table>
-      </div>
+      <TableContext.Provider value={{ variant }}>
+        <div
+          className={cn(
+            "overflow-x-auto whitespace-nowrap border-t scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+            containerClassName,
+            fullWidth && "w-full"
+          )}
+        >
+          <table ref={ref} className={cn("w-full", className)}>
+            {children}
+          </table>
+        </div>
+      </TableContext.Provider>
     );
   }
 );
@@ -33,15 +61,18 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
 type TableHeaderProps = {
   className?: string;
   children: ReactNode;
+  variant?: TableVariant;
 };
 
-export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+export const TableHeader = forwardRef<HTMLTableSectionElement, Omit<TableHeaderProps, "variant">>(
   ({ className, children }, ref) => {
+    const { variant } = useContext(TableContext);
     return (
       <thead
         ref={ref}
         className={cn(
-          "sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
+          "sticky top-0 z-10 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
+          variants[variant].header,
           className
         )}
       >
@@ -71,18 +102,19 @@ type TableRowProps = {
   children: ReactNode;
   disabled?: boolean;
   isSelected?: boolean;
+  variant?: TableVariant;
 };
 
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+export const TableRow = forwardRef<HTMLTableRowElement, Omit<TableRowProps, "variant">>(
   ({ className, disabled, isSelected, children }, ref) => {
+    const { variant } = useContext(TableContext);
     return (
       <tr
         ref={ref}
         className={cn(
           "group/table-row relative w-full cursor-pointer outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
-          "has-[[tabindex='0']:focus]:bg-background-bright",
+          isSelected && variants[variant].rowSelected,
           disabled && "opacity-50",
-          isSelected && isSelectedStyle,
           className
         )}
       >
@@ -95,7 +127,7 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
 type TableCellBasicProps = {
   className?: string;
   alignment?: "left" | "center" | "right";
-  children: ReactNode;
+  children?: ReactNode;
   colSpan?: number;
 };
 
@@ -149,29 +181,14 @@ type TableCellProps = TableCellBasicProps & {
   hasAction?: boolean;
   isSticky?: boolean;
   actionClassName?: string;
-  rowHoverStyle?: keyof typeof rowHoverStyles;
+  rowHoverStyle?: string;
   isSelected?: boolean;
   isTabbableCell?: boolean;
+  variant?: TableVariant;
+  children?: ReactNode;
 };
 
-const rowHoverStyles = {
-  default:
-    "group-hover/table-row:bg-charcoal-800 group-focus-visible/table-row:bg-background-bright group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
-  dimmed:
-    "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
-  bright:
-    "group-hover/table-row:bg-charcoal-750 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-700 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-700 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
-};
-
-const stickyStyles =
-  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 [&:has(.group-hover\\/table-row\\:block)]:w-auto group-has-[[tabindex='0']:focus]/table-row:bg-background-bright";
-
-const tabFocusRowDividerStyles =
-  "has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed";
-
-const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";
-
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+export const TableCell = forwardRef<HTMLTableCellElement, Omit<TableCellProps, "variant">>(
   (
     {
       className,
@@ -183,7 +200,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       onClick,
       hasAction = false,
       isSticky = false,
-      rowHoverStyle = "default",
       isSelected,
       isTabbableCell = false,
     },
@@ -207,18 +223,22 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         ? "justify-center text-center"
         : "justify-end text-right"
     );
+    const { variant } = useContext(TableContext);
 
     return (
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400",
+          "text-xs text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
+          variants[variant].cell,
           to || onClick || hasAction ? "cursor-pointer" : "cursor-default px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
-          isSticky && stickyStyles,
-          isSelected && isSelectedStyle,
-          !isSelected && rowHoverStyles[rowHoverStyle],
-          tabFocusRowDividerStyles,
+          isSticky &&
+            "[&:has(.group-hover/table-row:block)]:w-auto sticky right-0 bg-background-dimmed",
+          isSticky && variants[variant].stickyCell,
+          isSelected && variants[variant].rowSelected,
+          !isSelected &&
+            "group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-charcoal-750 group-focus-visible/table-row:bg-background-bright",
           className
         )}
         colSpan={colSpan}
@@ -274,7 +294,7 @@ export const TableCellChevron = forwardRef<
 
 export const TableCellMenu = forwardRef<
   HTMLTableCellElement,
-  {
+  Omit<TableCellProps, "variant"> & {
     className?: string;
     isSticky?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -283,6 +303,7 @@ export const TableCellMenu = forwardRef<
     popoverContent?: ReactNode;
     children?: ReactNode;
     isSelected?: boolean;
+    variant?: TableVariant;
   }
 >(
   (
@@ -299,6 +320,7 @@ export const TableCellMenu = forwardRef<
     ref
   ) => {
     const [isOpen, setIsOpen] = useState(false);
+    const { variant } = useContext(TableContext);
 
     return (
       <TableCell
@@ -313,12 +335,18 @@ export const TableCellMenu = forwardRef<
         <div className="relative h-full p-1">
           <div
             className={cn(
-              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright"
+              "absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] p-0.5 group-hover/table-row:ring-1",
+              variants[variant].menuButton
             )}
           >
             {/* Hidden buttons that show on hover */}
             {hiddenButtons && (
-              <div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">
+              <div
+                className={cn(
+                  "hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r",
+                  variants[variant].menuButtonDivider
+                )}
+              >
                 {hiddenButtons}
               </div>
             )}
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 32bfbd1f74..003817da07 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -39,6 +39,7 @@ import {
   TableHeader,
   TableHeaderCell,
   TableRow,
+  TableVariant,
 } from "../../primitives/Table";
 import { CancelRunDialog } from "./CancelRunDialog";
 import { LiveTimer } from "./LiveTimer";
@@ -58,6 +59,7 @@ type RunsTableProps = {
   runs: RunListItem[];
   isLoading?: boolean;
   allowSelection?: boolean;
+  variant?: TableVariant;
 };
 
 export function TaskRunsTable({
@@ -67,6 +69,7 @@ export function TaskRunsTable({
   runs,
   isLoading = false,
   allowSelection = false,
+  variant = "dimmed",
 }: RunsTableProps) {
   const user = useUser();
   const organization = useOrganization();
@@ -104,7 +107,7 @@ export function TaskRunsTable({
   );
 
   return (
-    <Table className="max-h-full overflow-y-auto">
+    <Table variant={variant} className="max-h-full overflow-y-auto">
       <TableHeader>
         {allowSelection && (
           <TableHeaderCell className="pl-3 pr-0">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
index 5456cf4db7..0bfcb85ad2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
@@ -220,6 +220,7 @@ export default function Page() {
           TrailingIcon={ExitIcon}
           shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
+          className="pl-1"
         />
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
@@ -297,11 +298,12 @@ export default function Page() {
                 }}
                 runs={schedule.runs}
                 isLoading={false}
+                variant="bright"
               />
             </div>
             <div className="flex flex-col gap-1">
               <Header3>Next 5 runs</Header3>
-              <Table>
+              <Table variant="bright">
                 <TableHeader>
                   {!isUtc && <TableHeaderCell>{schedule.timezone}</TableHeaderCell>}
                   <TableHeaderCell>UTC</TableHeaderCell>

From 176541bd2f2add8477daec3fc6695462aa8bce45 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 17:19:28 +0000
Subject: [PATCH 31/34] Full width tables on the schedules inspector panel

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
index 0bfcb85ad2..126f7202cc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
@@ -224,8 +224,8 @@ export default function Page() {
         />
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-        <div className="p-3">
-          <div className="space-y-3">
+        <div className="space-y-3">
+          <div className="p-3">
             <Property.Table>
               <Property.Item>
                 <Property.Label>Schedule ID</Property.Label>
@@ -283,60 +283,62 @@ export default function Page() {
                 </>
               )}
             </Property.Table>
-            <div className="flex flex-col gap-1">
-              <Header3>Last 5 runs</Header3>
-              <TaskRunsTable
-                total={schedule.runs.length}
-                hasFilters={false}
-                filters={{
-                  tasks: [],
-                  versions: [],
-                  statuses: [],
-                  environments: [],
-                  from: undefined,
-                  to: undefined,
-                }}
-                runs={schedule.runs}
-                isLoading={false}
-                variant="bright"
-              />
-            </div>
-            <div className="flex flex-col gap-1">
-              <Header3>Next 5 runs</Header3>
-              <Table variant="bright">
-                <TableHeader>
-                  {!isUtc && <TableHeaderCell>{schedule.timezone}</TableHeaderCell>}
-                  <TableHeaderCell>UTC</TableHeaderCell>
-                </TableHeader>
-                <TableBody>
-                  {schedule.active ? (
-                    schedule.nextRuns.length ? (
-                      schedule.nextRuns.map((run, index) => (
-                        <TableRow key={index}>
-                          {!isUtc && (
-                            <TableCell>
-                              <DateTime date={run} timeZone={schedule.timezone} />
-                            </TableCell>
-                          )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <Header3 className="pb-1 pl-3">Last 5 runs</Header3>
+            <TaskRunsTable
+              total={schedule.runs.length}
+              hasFilters={false}
+              filters={{
+                tasks: [],
+                versions: [],
+                statuses: [],
+                environments: [],
+                from: undefined,
+                to: undefined,
+              }}
+              runs={schedule.runs}
+              isLoading={false}
+              variant="bright"
+            />
+          </div>
+          <div className="flex flex-col gap-1 pt-2">
+            <Header3 className="pb-1 pl-3">Next 5 runs</Header3>
+            <Table variant="bright">
+              <TableHeader>
+                {!isUtc && <TableHeaderCell>{schedule.timezone}</TableHeaderCell>}
+                <TableHeaderCell>UTC</TableHeaderCell>
+              </TableHeader>
+              <TableBody>
+                {schedule.active ? (
+                  schedule.nextRuns.length ? (
+                    schedule.nextRuns.map((run, index) => (
+                      <TableRow key={index}>
+                        {!isUtc && (
                           <TableCell>
-                            <DateTime date={run} timeZone="UTC" />
+                            <DateTime date={run} timeZone={schedule.timezone} />
                           </TableCell>
-                        </TableRow>
-                      ))
-                    ) : (
-                      <TableBlankRow colSpan={isUtc ? 1 : 2}>
-                        <PlaceholderText title="You found a bug" />
-                      </TableBlankRow>
-                    )
+                        )}
+                        <TableCell>
+                          <DateTime date={run} timeZone="UTC" />
+                        </TableCell>
+                      </TableRow>
+                    ))
                   ) : (
                     <TableBlankRow colSpan={isUtc ? 1 : 2}>
-                      <PlaceholderText title="Schedule disabled" />
+                      <PlaceholderText title="You found a bug" />
                     </TableBlankRow>
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-            {!isImperative && (
+                  )
+                ) : (
+                  <TableBlankRow colSpan={isUtc ? 1 : 2}>
+                    <PlaceholderText title="Schedule disabled" />
+                  </TableBlankRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {!isImperative && (
+            <div className="p-3">
               <InfoPanel
                 title="Editing declarative schedules"
                 icon={BookOpenIcon}
@@ -349,8 +351,8 @@ export default function Page() {
                 You can only edit a declarative schedule by updating your schedules.task and then
                 running the CLI dev and deploy commands.
               </InfoPanel>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       </div>
       {isImperative && (

From 46b979e07036486e052d757476b5066e8068f818 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 17:19:41 +0000
Subject: [PATCH 32/34] Reduce padding on Alerts page table rows

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
index ca8a3d5717..42dba07567 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
@@ -214,7 +214,7 @@ export default function Page() {
                         />
                       ))}
                     </TableCell>
-                    <TableCell className={alertChannel.enabled ? "" : "opacity-50"}>
+                    <TableCell className={cn("py-1", alertChannel.enabled ? "" : "opacity-50")}>
                       <AlertChannelDetails alertChannel={alertChannel} />
                     </TableCell>
                     <TableCell className={alertChannel.enabled ? "" : "opacity-50"}>

From 3c0639e1da098bf870027e2ccb82b488855a75a0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 17:31:39 +0000
Subject: [PATCH 33/34] Updates the Deploy page inspector table to the new
 style

---
 .../route.tsx                                 | 202 +++++++++---------
 1 file changed, 106 insertions(+), 96 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
index 1ec85e3aa4..4fb4db5b81 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx
@@ -4,7 +4,6 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { UserAvatar } from "~/components/UserProfilePhoto";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
-import { CodeBlock } from "~/components/code/CodeBlock";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Badge } from "~/components/primitives/Badge";
 import { LinkButton } from "~/components/primitives/Buttons";
@@ -108,107 +107,118 @@ export default function Page() {
 
         <LinkButton
           to={`${v3DeploymentsPath(organization, project)}${page ? `?page=${page}` : ""}`}
-          variant="minimal/medium"
-          LeadingIcon={ExitIcon}
+          variant="minimal/small"
+          TrailingIcon={ExitIcon}
           shortcut={{ key: "esc" }}
+          shortcutPosition="before-trailing-icon"
+          className="pl-1"
         />
       </div>
-      <div className="overflow-y-auto px-3 pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-        <div className="flex flex-col gap-4">
-          <Property.Table>
-            <Property.Item>
-              <Property.Label>Deploy</Property.Label>
-              <Property.Value className="flex items-center gap-2">
-                <span>{deployment.shortCode}</span>
-                {deployment.label && <Badge variant="outline-rounded">{deployment.label}</Badge>}
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Environment</Property.Label>
-              <Property.Value>
-                <EnvironmentLabel environment={deployment.environment} userName={usernameForEnv} />
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Version</Property.Label>
-              <Property.Value>{deployment.version}</Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Status</Property.Label>
-              <Property.Value>
-                <DeploymentStatus
-                  status={deployment.status}
-                  isBuilt={deployment.isBuilt}
-                  className="text-sm"
-                />
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Tasks</Property.Label>
-              <Property.Value>{deployment.tasks ? deployment.tasks.length : "–"}</Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>SDK Version</Property.Label>
-              <Property.Value>{deployment.sdkVersion ? deployment.sdkVersion : "–"}</Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>CLI Version</Property.Label>
-              <Property.Value>{deployment.cliVersion ? deployment.cliVersion : "–"}</Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Started at</Property.Label>
-              <Property.Value>
-                <DateTimeAccurate date={deployment.createdAt} /> UTC
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Built at</Property.Label>
-              <Property.Value>
-                {deployment.builtAt ? (
-                  <>
-                    <DateTimeAccurate date={deployment.builtAt} /> UTC
-                  </>
-                ) : (
-                  "–"
-                )}
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Deployed at</Property.Label>
-              <Property.Value>
-                {deployment.deployedAt ? (
-                  <>
-                    <DateTimeAccurate date={deployment.deployedAt} /> UTC
-                  </>
-                ) : (
-                  "–"
-                )}
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Deployed by</Property.Label>
-              <Property.Value>
-                {deployment.deployedBy ? (
-                  <div className="flex items-center gap-1">
-                    <UserAvatar
-                      avatarUrl={deployment.deployedBy.avatarUrl}
-                      name={deployment.deployedBy.name ?? deployment.deployedBy.displayName}
-                      className="h-4 w-4"
-                    />
-                    <Paragraph variant="small">
-                      {deployment.deployedBy.name ?? deployment.deployedBy.displayName}
-                    </Paragraph>
-                  </div>
-                ) : (
-                  "–"
-                )}
-              </Property.Value>
-            </Property.Item>
-          </Property.Table>
+      <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="flex flex-col">
+          <div className="p-3">
+            <Property.Table>
+              <Property.Item>
+                <Property.Label>Deploy</Property.Label>
+                <Property.Value className="flex items-center gap-2">
+                  <span>{deployment.shortCode}</span>
+                  {deployment.label && <Badge variant="outline-rounded">{deployment.label}</Badge>}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Environment</Property.Label>
+                <Property.Value>
+                  <EnvironmentLabel
+                    environment={deployment.environment}
+                    userName={usernameForEnv}
+                  />
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Version</Property.Label>
+                <Property.Value>{deployment.version}</Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Status</Property.Label>
+                <Property.Value>
+                  <DeploymentStatus
+                    status={deployment.status}
+                    isBuilt={deployment.isBuilt}
+                    className="text-sm"
+                  />
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Tasks</Property.Label>
+                <Property.Value>{deployment.tasks ? deployment.tasks.length : "–"}</Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>SDK Version</Property.Label>
+                <Property.Value>
+                  {deployment.sdkVersion ? deployment.sdkVersion : "–"}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>CLI Version</Property.Label>
+                <Property.Value>
+                  {deployment.cliVersion ? deployment.cliVersion : "–"}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Started at</Property.Label>
+                <Property.Value>
+                  <DateTimeAccurate date={deployment.createdAt} /> UTC
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Built at</Property.Label>
+                <Property.Value>
+                  {deployment.builtAt ? (
+                    <>
+                      <DateTimeAccurate date={deployment.builtAt} /> UTC
+                    </>
+                  ) : (
+                    "–"
+                  )}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Deployed at</Property.Label>
+                <Property.Value>
+                  {deployment.deployedAt ? (
+                    <>
+                      <DateTimeAccurate date={deployment.deployedAt} /> UTC
+                    </>
+                  ) : (
+                    "–"
+                  )}
+                </Property.Value>
+              </Property.Item>
+              <Property.Item>
+                <Property.Label>Deployed by</Property.Label>
+                <Property.Value>
+                  {deployment.deployedBy ? (
+                    <div className="flex items-center gap-1">
+                      <UserAvatar
+                        avatarUrl={deployment.deployedBy.avatarUrl}
+                        name={deployment.deployedBy.name ?? deployment.deployedBy.displayName}
+                        className="h-4 w-4"
+                      />
+                      <Paragraph variant="small">
+                        {deployment.deployedBy.name ?? deployment.deployedBy.displayName}
+                      </Paragraph>
+                    </div>
+                  ) : (
+                    "–"
+                  )}
+                </Property.Value>
+              </Property.Item>
+            </Property.Table>
+          </div>
 
           {deployment.tasks ? (
             <div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-              <Table>
+              <Table variant="bright">
                 <TableHeader>
                   <TableHeaderCell className="px-2">Task</TableHeaderCell>
                   <TableHeaderCell className="px-2">File path</TableHeaderCell>

From 2be75bfcf62fbe6499b7184f51c1094805f23932 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 6 Jan 2025 17:49:04 +0000
Subject: [PATCH 34/34] Removes the duplicate Table Row from the table headers
 in v2

---
 .../app/components/events/EventsTable.tsx     | 24 ++++++++--------
 apps/webapp/app/components/jobs/JobsTable.tsx | 16 +++++------
 apps/webapp/app/components/runs/RunsTable.tsx | 28 +++++++++----------
 .../route.tsx                                 | 14 ++++------
 .../route.tsx                                 | 12 ++++----
 .../route.tsx                                 | 14 ++++------
 6 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/apps/webapp/app/components/events/EventsTable.tsx b/apps/webapp/app/components/events/EventsTable.tsx
index c80de1d96a..fd54902855 100644
--- a/apps/webapp/app/components/events/EventsTable.tsx
+++ b/apps/webapp/app/components/events/EventsTable.tsx
@@ -52,19 +52,17 @@ export function EventsTable({
   return (
     <Table>
       <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Event</TableHeaderCell>
-          <TableHeaderCell>Env</TableHeaderCell>
-          <TableHeaderCell>Received Time</TableHeaderCell>
-          <TableHeaderCell>Delivery Time</TableHeaderCell>
-          <TableHeaderCell>Delivered</TableHeaderCell>
-          <TableHeaderCell>Canceled Time</TableHeaderCell>
-          <TableHeaderCell>Test</TableHeaderCell>
-          <TableHeaderCell>Runs</TableHeaderCell>
-          <TableHeaderCell>
-            <span className="sr-only">Go to page</span>
-          </TableHeaderCell>
-        </TableRow>
+        <TableHeaderCell>Event</TableHeaderCell>
+        <TableHeaderCell>Env</TableHeaderCell>
+        <TableHeaderCell>Received Time</TableHeaderCell>
+        <TableHeaderCell>Delivery Time</TableHeaderCell>
+        <TableHeaderCell>Delivered</TableHeaderCell>
+        <TableHeaderCell>Canceled Time</TableHeaderCell>
+        <TableHeaderCell>Test</TableHeaderCell>
+        <TableHeaderCell>Runs</TableHeaderCell>
+        <TableHeaderCell>
+          <span className="sr-only">Go to page</span>
+        </TableHeaderCell>
       </TableHeader>
       <TableBody>
         {total === 0 && !hasFilters ? (
diff --git a/apps/webapp/app/components/jobs/JobsTable.tsx b/apps/webapp/app/components/jobs/JobsTable.tsx
index 451fa9b868..fa42e667fd 100644
--- a/apps/webapp/app/components/jobs/JobsTable.tsx
+++ b/apps/webapp/app/components/jobs/JobsTable.tsx
@@ -31,15 +31,13 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul
   return (
     <Table containerClassName="mb-4">
       <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Job</TableHeaderCell>
-          <TableHeaderCell>ID</TableHeaderCell>
-          <TableHeaderCell>Integrations</TableHeaderCell>
-          <TableHeaderCell>Properties</TableHeaderCell>
-          <TableHeaderCell>Last run</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-          <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-        </TableRow>
+        <TableHeaderCell>Job</TableHeaderCell>
+        <TableHeaderCell>ID</TableHeaderCell>
+        <TableHeaderCell>Integrations</TableHeaderCell>
+        <TableHeaderCell>Properties</TableHeaderCell>
+        <TableHeaderCell>Last run</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
       </TableHeader>
       <TableBody>
         {jobs.length > 0 ? (
diff --git a/apps/webapp/app/components/runs/RunsTable.tsx b/apps/webapp/app/components/runs/RunsTable.tsx
index c194da9532..535727525f 100644
--- a/apps/webapp/app/components/runs/RunsTable.tsx
+++ b/apps/webapp/app/components/runs/RunsTable.tsx
@@ -58,21 +58,19 @@ export function RunsTable({
   return (
     <Table>
       <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Run</TableHeaderCell>
-          {showJob && <TableHeaderCell>Job</TableHeaderCell>}
-          <TableHeaderCell>Env</TableHeaderCell>
-          <TableHeaderCell>Status</TableHeaderCell>
-          <TableHeaderCell>Started</TableHeaderCell>
-          <TableHeaderCell>Duration</TableHeaderCell>
-          <TableHeaderCell>Exec Time</TableHeaderCell>
-          <TableHeaderCell>Test</TableHeaderCell>
-          <TableHeaderCell>Version</TableHeaderCell>
-          <TableHeaderCell>Created at</TableHeaderCell>
-          <TableHeaderCell>
-            <span className="sr-only">Go to page</span>
-          </TableHeaderCell>
-        </TableRow>
+        <TableHeaderCell>Run</TableHeaderCell>
+        {showJob && <TableHeaderCell>Job</TableHeaderCell>}
+        <TableHeaderCell>Env</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+        <TableHeaderCell>Started</TableHeaderCell>
+        <TableHeaderCell>Duration</TableHeaderCell>
+        <TableHeaderCell>Exec Time</TableHeaderCell>
+        <TableHeaderCell>Test</TableHeaderCell>
+        <TableHeaderCell>Version</TableHeaderCell>
+        <TableHeaderCell>Created at</TableHeaderCell>
+        <TableHeaderCell>
+          <span className="sr-only">Go to page</span>
+        </TableHeaderCell>
       </TableHeader>
       <TableBody>
         {total === 0 && !hasFilters ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
index b8c9a1bb8b..332a6cc820 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
@@ -114,14 +114,12 @@ export default function Page() {
                   <div className="mb-8">
                     <Table fullWidth>
                       <TableHeader>
-                        <TableRow>
-                          <TableHeaderCell>Environment</TableHeaderCell>
-                          <TableHeaderCell>Endpoint URL</TableHeaderCell>
-                          <TableHeaderCell>Secret</TableHeaderCell>
-                          <TableHeaderCell>Source</TableHeaderCell>
-                          <TableHeaderCell>Respond to request?</TableHeaderCell>
-                          <TableHeaderCell alignment="right">Updated</TableHeaderCell>
-                        </TableRow>
+                        <TableHeaderCell>Environment</TableHeaderCell>
+                        <TableHeaderCell>Endpoint URL</TableHeaderCell>
+                        <TableHeaderCell>Secret</TableHeaderCell>
+                        <TableHeaderCell>Source</TableHeaderCell>
+                        <TableHeaderCell>Respond to request?</TableHeaderCell>
+                        <TableHeaderCell alignment="right">Updated</TableHeaderCell>
                       </TableHeader>
                       <TableBody>
                         {httpEndpoint.httpEndpointEnvironments.map((httpEnvironment) => {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
index 5887a111fa..d05197a014 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
@@ -67,13 +67,11 @@ export default function Page() {
                 <div className="mb-8">
                   <Table fullWidth>
                     <TableHeader>
-                      <TableRow>
-                        <TableHeaderCell>ID</TableHeaderCell>
-                        <TableHeaderCell>Title</TableHeaderCell>
-                        <TableHeaderCell>Updated</TableHeaderCell>
-                        <TableHeaderCell alignment="right">Environments</TableHeaderCell>
-                        <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                      </TableRow>
+                      <TableHeaderCell>ID</TableHeaderCell>
+                      <TableHeaderCell>Title</TableHeaderCell>
+                      <TableHeaderCell>Updated</TableHeaderCell>
+                      <TableHeaderCell alignment="right">Environments</TableHeaderCell>
+                      <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
                     </TableHeader>
                     <TableBody>
                       {httpEndpoints.length > 0 ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
index 8903add2e8..6025b0dc20 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
@@ -49,14 +49,12 @@ export default function Integrations() {
       </Paragraph>
       <Table containerClassName="mt-4">
         <TableHeader>
-          <TableRow>
-            <TableHeaderCell>Integration</TableHeaderCell>
-            <TableHeaderCell>Dynamic</TableHeaderCell>
-            <TableHeaderCell>Properties</TableHeaderCell>
-            <TableHeaderCell>Environment</TableHeaderCell>
-            <TableHeaderCell>Active</TableHeaderCell>
-            <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-          </TableRow>
+          <TableHeaderCell>Integration</TableHeaderCell>
+          <TableHeaderCell>Dynamic</TableHeaderCell>
+          <TableHeaderCell>Properties</TableHeaderCell>
+          <TableHeaderCell>Environment</TableHeaderCell>
+          <TableHeaderCell>Active</TableHeaderCell>
+          <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
         </TableHeader>
         <TableBody>
           {triggers.length > 0 ? (