Run page links to tasks & replay run modal improvements (#1364)

* Removed the inline-code accessory from the logs when calling trigger or batchTrigger from a run

* Removed re2 from the v3 catalog

* Added a Root badge to the runs list

* Keep the side panel open when switching tasks & remove links from detail panel

* Root and parent task styling inspector

* Hide the root badge if the task isn’t the root

* margin between the dev not running message

* improved spacing of items

* Improved Root badge style

* Show a table of triggered runs in the inspector

* Add parentSpanId index to the TaskRun table

* Fix for the run inspector now opening when linked from another run/replay

* Triggered runs table has a max height

* Added a description to the replay run modal and improved the styling slightly

* Only include a bottom border when the triggered run table is more than 4 items

* Improved the triggered runs table borders

* Improved the tables so they can have an optional sticky header

* Added table types to storybook

* Fix for hover states on different backgrounds & runs table select cell

Author: samejr

.changeset/three-olives-love.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Removed the inline-code accessory from the logs when calling trigger or batchTrigger from a run

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

@@ -6,6 +6,8 @@ const variants = {
     "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-charcoal-750 text-text-bright uppercase whitespace-nowrap",
   small:
     "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap",
+  "extra-small":
+    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
   outline:
     "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap",
   "outline-rounded":

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

@@ -22,7 +22,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
           fullWidth && "w-full"
         )}
       >
-        <table ref={ref} className={cn("w-full divide-y", className)}>
+        <table ref={ref} className={cn("w-full", className)}>
           {children}
         </table>
       </div>
@@ -40,7 +40,10 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
     return (
       <thead
         ref={ref}
-        className={cn("rounded-t-md", "relative divide-y divide-grid-dimmed", className)}
+        className={cn(
+          "sticky top-0 z-10 divide-y divide-grid-dimmed rounded-t-md bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-dimmed",
+          className
+        )}
       >
         {children}
       </thead>
@@ -56,7 +59,10 @@ type TableBodyProps = {
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ className, children }, ref) => {
     return (
-      <tbody ref={ref} className={cn("relative divide-y divide-grid-dimmed", className)}>
+      <tbody
+        ref={ref}
+        className={cn("relative divide-y divide-grid-dimmed overflow-y-auto", className)}
+      >
         {children}
       </tbody>
     );
@@ -135,10 +141,17 @@ type TableCellProps = TableCellBasicProps & {
   hasAction?: boolean;
   isSticky?: boolean;
   actionClassName?: string;
+  rowHoverStyle?: keyof typeof rowHoverStyles;
+};
+
+const rowHoverStyles = {
+  default: "group-hover/table-row:bg-charcoal-800",
+  dimmed: "group-hover/table-row:bg-charcoal-850",
+  bright: "group-hover/table-row:bg-charcoal-750",
 };
 
 const stickyStyles =
-  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover/table-row:before:to-charcoal-900";
+  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]";
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
@@ -152,6 +165,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       onClick,
       hasAction = false,
       isSticky = false,
+      rowHoverStyle = "default",
     },
     ref
   ) => {
@@ -178,12 +192,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400",
-          to || onClick || hasAction
-            ? "cursor-pointer group-hover/table-row:bg-charcoal-900"
-            : "px-3 py-3 align-middle",
+          "text-xs text-charcoal-400 transition-colors",
+          to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
+          rowHoverStyles[rowHoverStyle],
           className
         )}
         colSpan={colSpan}

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

@@ -1,3 +1,4 @@
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation, useSubmit } from "@remix-run/react";
 import { useCallback, useEffect, useRef } from "react";
 import { UseDataFunctionReturn, useTypedFetcher } from "remix-typedjson";
@@ -8,6 +9,7 @@ import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { ButtonSpinner, Spinner } from "~/components/primitives/Spinner";
 import { type loader } from "~/routes/resources.taskruns.$runParam.replay";
@@ -19,7 +21,7 @@ type ReplayRunDialogProps = {
 
 export function ReplayRunDialog({ runFriendlyId, failedRedirect }: ReplayRunDialogProps) {
   return (
-    <DialogContent key={`replay`} className="md:max-w-3xl">
+    <DialogContent key={`replay`} className="md:max-w-xl">
       <ReplayContent runFriendlyId={runFriendlyId} failedRedirect={failedRedirect} />
     </DialogContent>
   );
@@ -95,8 +97,12 @@ function ReplayForm({
     <Form action={formAction} method="post" onSubmit={(e) => submitForm(e)} className="pt-2">
       {editablePayload ? (
         <>
+          <Paragraph className="mb-3">
+            Replaying will create a new run using the same or modified payload, executing against
+            the latest version in your selected environment.
+          </Paragraph>
           <Header3 spacing>Payload</Header3>
-          <div className="mb-3 max-h-[70vh] overflow-y-auto rounded-sm border border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="mb-3 max-h-[70vh] min-h-40 overflow-y-auto rounded-sm border border-grid-dimmed bg-charcoal-900 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <JSONEditor
               autoFocus
               defaultValue={currentJson.current}
@@ -123,8 +129,8 @@ function ReplayForm({
           defaultValue={environment.id}
           items={environments}
           dropdownIcon
-          variant="tertiary/medium"
-          className="w-fit pl-2"
+          variant="tertiary/small"
+          className="w-fit pl-1"
           text={(value) => {
             const env = environments.find((env) => env.id === value)!;
             return (
@@ -144,16 +150,20 @@ function ReplayForm({
         </Select>
       </InputGroup>
       <input type="hidden" name="failedRedirect" value={failedRedirect} />
-      <Button
-        type="submit"
-        variant="primary/medium"
-        LeadingIcon={isSubmitting ? ButtonSpinner : undefined}
-        disabled={isSubmitting}
-        shortcut={{ modifiers: ["meta"], key: "enter", enabledOnInputElements: true }}
-        className="mt-5"
-      >
-        {isSubmitting ? "Replaying..." : "Replay run"}
-      </Button>
+      <div className="mt-3 flex items-center justify-between gap-2 border-t border-grid-dimmed pt-3.5">
+        <DialogClose asChild>
+          <Button variant="tertiary/small">Cancel</Button>
+        </DialogClose>
+        <Button
+          type="submit"
+          variant="primary/small"
+          LeadingIcon={isSubmitting ? ButtonSpinner : undefined}
+          disabled={isSubmitting}
+          shortcut={{ modifiers: ["meta"], key: "enter", enabledOnInputElements: true }}
+        >
+          {isSubmitting ? "Replaying..." : "Replay run"}
+        </Button>
+      </div>
     </Form>
   );
 }

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

@@ -41,6 +41,7 @@ import { LiveTimer } from "./LiveTimer";
 import { ReplayRunDialog } from "./ReplayRunDialog";
 import { TaskRunStatusCombo } from "./TaskRunStatus";
 import { RunTag } from "./RunTag";
+import { Badge } from "~/components/primitives/Badge";
 
 type RunsTableProps = {
   total: number;
@@ -123,7 +124,7 @@ export function TaskRunsTable({
           )}
           <TableHeaderCell alignment="right">Run #</TableHeaderCell>
           <TableHeaderCell>Env</TableHeaderCell>
-          <TableHeaderCell>Task ID</TableHeaderCell>
+          <TableHeaderCell>Task</TableHeaderCell>
           <TableHeaderCell>Version</TableHeaderCell>
           <TableHeaderCell>Status</TableHeaderCell>
           <TableHeaderCell>Started</TableHeaderCell>
@@ -278,7 +279,12 @@ export function TaskRunsTable({
                     userName={run.environment.userName}
                   />
                 </TableCell>
-                <TableCell to={path}>{run.taskIdentifier}</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 to={path}>{run.version ?? "–"}</TableCell>
                 <TableCell to={path}>
                   <TaskRunStatusCombo status={run.status} />

apps/webapp/app/hooks/useReplaceLocation.ts

@@ -0,0 +1,22 @@
+import { useSearchParams } from "@remix-run/react";
+import { useCallback } from "react";
+
+export function useReplaceSearchParams() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const replaceSearchParam = useCallback(
+    (key: string, value?: string) => {
+      setSearchParams((s) => {
+        if (value) {
+          s.set(key, value);
+        } else {
+          s.delete(key);
+        }
+        return s;
+      });
+    },
+    [searchParams]
+  );
+
+  return { searchParams, setSearchParams, replaceSearchParam };
+}

apps/webapp/app/hooks/useReplaceSearchParams.ts

@@ -168,6 +168,7 @@ export class RunListPresenter extends BasePresenter {
         usageDurationMs: BigInt;
         tags: string[];
         depth: number;
+        rootTaskRunId: string | null;
       }[]
     >`
     SELECT
@@ -192,6 +193,7 @@ export class RunListPresenter extends BasePresenter {
     tr."costInCents" AS "costInCents",
     tr."usageDurationMs" AS "usageDurationMs",
     tr."depth" AS "depth",
+    tr."rootTaskRunId" AS "rootTaskRunId",
     array_remove(array_agg(tag.name), NULL) AS "tags"
 FROM
     ${sqlDatabaseSchema}."TaskRun" tr
@@ -336,6 +338,7 @@ WHERE
           usageDurationMs: Number(run.usageDurationMs),
           tags: run.tags.sort((a, b) => a.localeCompare(b)),
           depth: run.depth,
+          rootTaskRunId: run.rootTaskRunId,
         };
       }),
       pagination: {

apps/webapp/app/presenters/v3/RunListPresenter.server.ts

@@ -37,6 +37,13 @@ export class RunPresenter {
         status: true,
         completedAt: true,
         logsDeletedAt: true,
+        rootTaskRun: {
+          select: {
+            friendlyId: true,
+            taskIdentifier: true,
+            spanId: true,
+          },
+        },
         runtimeEnvironment: {
           select: {
             id: true,
@@ -80,6 +87,7 @@ export class RunPresenter {
           isFinished: isFinalRunStatus(run.status),
           completedAt: run.completedAt,
           logsDeletedAt: run.logsDeletedAt,
+          rootTaskRun: run.rootTaskRun,
           environment: {
             id: run.runtimeEnvironment.id,
             organizationId: run.runtimeEnvironment.organizationId,
@@ -141,6 +149,7 @@ export class RunPresenter {
         isFinished: isFinalRunStatus(run.status),
         completedAt: run.completedAt,
         logsDeletedAt: run.logsDeletedAt,
+        rootTaskRun: run.rootTaskRun,
         environment: {
           id: run.runtimeEnvironment.id,
           organizationId: run.runtimeEnvironment.organizationId,

apps/webapp/app/presenters/v3/RunPresenter.server.ts

@@ -132,6 +132,21 @@ export class SpanPresenter extends BasePresenter {
             exportName: true,
           },
         },
+        //relationships
+        rootTaskRun: {
+          select: {
+            taskIdentifier: true,
+            friendlyId: true,
+            spanId: true,
+          },
+        },
+        parentTaskRun: {
+          select: {
+            taskIdentifier: true,
+            friendlyId: true,
+            spanId: true,
+          },
+        },
       },
       where: {
         spanId,
@@ -281,7 +296,15 @@ export class SpanPresenter extends BasePresenter {
       output,
       outputType: finishedAttempt?.outputType ?? "application/json",
       error,
-      links: span?.links,
+      relationships: {
+        root: run.rootTaskRun
+          ? {
+              ...run.rootTaskRun,
+              isParent: run.parentTaskRun?.friendlyId === run.rootTaskRun.friendlyId,
+            }
+          : undefined,
+        parent: run.parentTaskRun ?? undefined,
+      },
       context: JSON.stringify(context, null, 2),
       metadata,
     };
@@ -307,10 +330,29 @@ export class SpanPresenter extends BasePresenter {
       return;
     }
 
+    const triggeredRuns = await this._replica.taskRun.findMany({
+      select: {
+        friendlyId: true,
+        taskIdentifier: true,
+        spanId: true,
+        createdAt: true,
+        number: true,
+        lockedToVersion: {
+          select: {
+            version: true,
+          },
+        },
+      },
+      where: {
+        parentSpanId: spanId,
+      },
+    });
+
     return {
       ...span,
       events: span.events,
       properties: span.properties ? JSON.stringify(span.properties, null, 2) : undefined,
+      triggeredRuns,
       showActionBar: span.show?.actions === true,
     };
   }