Added warm start markers to the Run page and inspector

Author: matt-aitken

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

@@ -2,6 +2,7 @@ import {
   isWaitpointOutputTimeout,
   type MachinePresetName,
   prettyPrintPacket,
+  SemanticInternalAttributes,
   TaskRunError,
 } from "@trigger.dev/core/v3";
 import { getMaxDuration } from "@trigger.dev/core/v3/isomorphic";
@@ -455,7 +456,7 @@ export class SpanPresenter extends BasePresenter {
     };
 
     switch (span.entity.type) {
-      case "waitpoint":
+      case "waitpoint": {
         if (!span.entity.id) {
           logger.error(`SpanPresenter: No waitpoint id`, {
             spanId,
@@ -486,9 +487,29 @@ export class SpanPresenter extends BasePresenter {
             object: waitpoint,
           },
         };
-
+      }
+      case "attempt": {
+        return {
+          ...data,
+          entity: {
+            type: "attempt" as const,
+            object: {
+              isWarmStart: isWarmStart(span.properties),
+            },
+          },
+        };
+      }
       default:
         return { ...data, entity: null };
     }
   }
 }
+
+function isWarmStart(
+  attributes: string | number | boolean | Record<string, unknown> | null | undefined
+): boolean | undefined {
+  if (!attributes || typeof attributes !== "object") return undefined;
+  const attribute = attributes[SemanticInternalAttributes.WARM_START];
+  if (typeof attribute !== "boolean") return undefined;
+  return attribute;
+}

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

@@ -21,23 +21,18 @@ import {
   tryCatch,
 } from "@trigger.dev/core/v3";
 import { type RuntimeEnvironmentType } from "@trigger.dev/database";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
+import { redirect } from "remix-typedjson";
 import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
 import tileBgPath from "~/assets/images/[email protected]";
-import {
-  DevDisconnectedBanner,
-  useCrossEngineIsConnected,
-  useDevPresence,
-} from "~/components/DevPresence";
+import { DevDisconnectedBanner, useCrossEngineIsConnected } from "~/components/DevPresence";
+import { WarmStartIconWithTooltip } from "~/components/WarmStarts";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { PageBody } from "~/components/layout/AppLayout";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
-import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTimeShort } from "~/components/primitives/DateTime";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
@@ -100,8 +95,6 @@ import {
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
-import { redirectWithErrorMessage } from "~/models/message.server";
-import { redirect } from "remix-typedjson";
 
 const resizableSettings = {
   parent: {
@@ -1045,7 +1038,13 @@ function NodeText({ node }: { node: TraceEvent }) {
 
 function NodeStatusIcon({ node }: { node: TraceEvent }) {
   if (node.data.level !== "TRACE") return null;
-  if (node.data.style.variant !== "primary") return null;
+  if (!node.data.style.variant) return null;
+
+  if (node.data.style.variant === "warm") {
+    return <WarmStartIconWithTooltip isWarmStart={true} className="size-4" />;
+  } else if (node.data.style.variant === "cold") {
+    return <WarmStartIconWithTooltip isWarmStart={false} className="size-4" />;
+  }
 
   if (node.data.isCancelled) {
     return (

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

@@ -4,13 +4,13 @@ import {
   EnvelopeIcon,
   QueueListIcon,
 } from "@heroicons/react/20/solid";
-import { Link } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import {
   formatDurationMilliseconds,
   type TaskRunError,
   taskRunErrorEnhancer,
 } from "@trigger.dev/core/v3";
+import { assertNever } from "assert-never";
 import { useEffect } from "react";
 import { typedjson, useTypedFetcher } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
@@ -37,20 +37,23 @@ import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextLink } from "~/components/primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
 import { RunTimeline, RunTimelineEvent, SpanTimeline } from "~/components/run/RunTimeline";
+import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
 import { RunIcon } from "~/components/runs/v3/RunIcon";
 import { RunTag } from "~/components/runs/v3/RunTag";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { SpanTitle } from "~/components/runs/v3/SpanTitle";
 import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus";
 import { TaskRunStatusCombo, TaskRunStatusReason } from "~/components/runs/v3/TaskRunStatus";
+import { WaitpointDetailTable } from "~/components/runs/v3/WaitpointDetails";
+import { WarmStartCombo } from "~/components/WarmStarts";
+import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { useHasAdminAccess } from "~/hooks/useUser";
 import { redirectWithErrorMessage } from "~/models/message.server";
 import { type Span, SpanPresenter, type SpanRun } from "~/presenters/v3/SpanPresenter.server";
 import { logger } from "~/services/logger.server";
-import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
 import {
@@ -63,15 +66,8 @@ import {
   v3SchedulePath,
   v3SpanParamsSchema,
 } from "~/utils/pathBuilder";
-import {
-  CompleteWaitpointForm,
-  ForceTimeout,
-} from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
-import { useEnvironment } from "~/hooks/useEnvironment";
-import { WaitpointStatusCombo } from "~/components/runs/v3/WaitpointStatus";
-import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
-import { WaitpointDetailTable } from "~/components/runs/v3/WaitpointDetails";
 import { createTimelineSpanEventsFromSpanEvents } from "~/utils/timelineSpanEvents";
+import { CompleteWaitpointForm } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { projectParam, organizationSlug, envParam, runParam, spanParam } =
@@ -935,6 +931,40 @@ function SpanEntity({ span }: { span: Span }) {
   }
 
   switch (span.entity.type) {
+    case "attempt": {
+      return (
+        <div className="flex flex-col gap-4 p-3">
+          <div className="border-b border-grid-bright pb-3">
+            <TaskRunAttemptStatusCombo
+              status={
+                span.isCancelled
+                  ? "CANCELED"
+                  : span.isError
+                  ? "FAILED"
+                  : span.isPartial
+                  ? "EXECUTING"
+                  : "COMPLETED"
+              }
+              className="text-sm"
+            />
+          </div>
+          <SpanTimeline
+            startTime={new Date(span.startTime)}
+            duration={span.duration}
+            inProgress={span.isPartial}
+            isError={span.isError}
+            events={createTimelineSpanEventsFromSpanEvents(span.events, isAdmin)}
+          />
+          {span.entity.object.isWarmStart !== undefined ? (
+            <WarmStartCombo
+              isWarmStart={span.entity.object.isWarmStart}
+              showTooltip
+              className="mt-3"
+            />
+          ) : null}
+        </div>
+      );
+    }
     case "waitpoint": {
       return (
         <div className="grid h-full grid-rows-[1fr_auto]">
@@ -957,7 +987,7 @@ function SpanEntity({ span }: { span: Span }) {
       );
     }
     default: {
-      return <Paragraph variant="small">No span for {span.entity.type}</Paragraph>;
+      assertNever(span.entity);
     }
   }
 }