code review fixes

mpcgrid · mpcgrid · commit 443f2a166f7c · 2026-01-12T00:21:06.000+02:00
diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -72,6 +72,12 @@ type CodeBlockProps = {
 const dimAmount = 0.5;
 const extraLinesWhenClipping = 0.35;
 
+const SEARCH_HIGHLIGHT_STYLES = {
+  backgroundColor: "#facc15",
+  color: "#000000",
+  fontWeight: "500",
+} as const;
+
 const defaultTheme: PrismTheme = {
   plain: {
     color: "#9C9AF2",
@@ -365,7 +371,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 )}
                 dir="ltr"
               >
-                {code}
+                {highlightSearchInText(code, searchTerm)}
               </pre>
             </div>
           )}
@@ -407,7 +413,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
               >
                 <pre className="relative mr-2 p-2 font-mono text-base leading-relaxed" dir="ltr">
-                  {code}
+                  {highlightSearchInText(code, searchTerm)}
                 </pre>
               </div>
             )}
@@ -420,6 +426,42 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
 
 CodeBlock.displayName = "CodeBlock";
 
+/**
+ * Highlights search term matches in plain text
+ */
+function highlightSearchInText(text: string, searchTerm: string | undefined): React.ReactNode {
+  if (!searchTerm || searchTerm.trim() === "") {
+    return text;
+  }
+
+  const escapedSearch = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp(escapedSearch, "gi");
+
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match;
+  let matchCount = 0;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.substring(lastIndex, match.index));
+    }
+    parts.push(
+      <span key={`match-${matchCount}`} style={SEARCH_HIGHLIGHT_STYLES}>
+        {match[0]}
+      </span>
+    );
+    lastIndex = regex.lastIndex;
+    matchCount++;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : text;
+}
+
 function Chrome({ title }: { title?: string }) {
   return (
     <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-charcoal-800 bg-charcoal-900">
@@ -582,11 +624,7 @@ function HighlightCode({
                             parts.push(
                               <span
                                 key={`match-${matchCount}`}
-                                style={{
-                                  backgroundColor: "#facc15",
-                                  color: "#000000",
-                                  fontWeight: "500",
-                                }}
+                                style={SEARCH_HIGHLIGHT_STYLES}
                               >
                                 {match[0]}
                               </span>
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -31,31 +31,10 @@ import { RunTag } from "~/components/runs/v3/RunTag";
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
 import type { TaskRunStatus } from "@trigger.dev/database";
 import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
+import type { RunContext } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run";
 
-// Types for the run context endpoint response
 type RunContextData = {
-  run: {
-    id: string;
-    friendlyId: string;
-    taskIdentifier: string;
-    status: string;
-    createdAt: string;
-    startedAt?: string;
-    completedAt?: string;
-    isTest: boolean;
-    tags: string[];
-    queue: string;
-    concurrencyKey: string | null;
-    usageDurationMs: number;
-    costInCents: number;
-    baseCostInCents: number;
-    machinePreset: string | null;
-    version?: string;
-    rootRun: { friendlyId: string; taskIdentifier: string } | null;
-    parentRun: { friendlyId: string; taskIdentifier: string } | null;
-    batch: { friendlyId: string } | null;
-    schedule: { friendlyId: string } | null;
-  } | null;
+  run: RunContext | null;
 };
 
 
@@ -308,10 +287,12 @@ function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: stri
   const showAttributes = beautifiedAttributes && beautifiedAttributes !== "{}";
 
   // Determine message to show
-  let message = log.message;
-
-  if (log.status === 'ERROR'){
-   message = (logWithExtras?.attributes?.error as any)?.message;
+  let message = log.message ?? "";
+  if (log.level === "ERROR") {
+    const maybeErrorMessage = (logWithExtras.attributes as any)?.error?.message;
+    if (typeof maybeErrorMessage === "string" && maybeErrorMessage.length > 0) {
+      message = maybeErrorMessage;
+    }
   }
 
   return (
@@ -354,17 +335,19 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
   const project = useProject();
   const environment = useEnvironment();
   const fetcher = useTypedFetcher<RunContextData>();
+  const [requested, setRequested] = useState(false);
 
   // Fetch run details when tab is active
   useEffect(() => {
     if (!log.runId) return;
 
+    setRequested(true);
     fetcher.load(
       `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/logs/${encodeURIComponent(log.id)}/run?runId=${encodeURIComponent(log.runId)}`
     );
   }, [organization.slug, project.slug, environment.slug, log.id, log.runId]);
 
-  const isLoading = fetcher.state === "loading";
+  const isLoading = !requested || fetcher.state === "loading";
   const runData = fetcher.data?.run;
 
   if (isLoading) {
@@ -522,7 +505,11 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
         <Property.Item>
           <Property.Label>Machine</Property.Label>
           <Property.Value className="-ml-0.5">
-            <MachineLabelCombo preset={runData.machinePreset as MachinePresetName} />
+            {runData.machinePreset ? (
+              <MachineLabelCombo preset={runData.machinePreset as MachinePresetName} />
+            ) : (
+              "–"
+            )}
           </Property.Value>
         </Property.Item>
 
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId.run.tsx
@@ -1,10 +1,73 @@
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { json } from "@remix-run/node";
+import { z } from "zod";
+import { MachinePresetName } from "@trigger.dev/core/v3";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { $replica } from "~/db.server";
+import type { TaskRunStatus } from "@trigger.dev/database";
+
+// Valid TaskRunStatus values
+const VALID_TASK_RUN_STATUSES = [
+  "PENDING",
+  "QUEUED",
+  "EXECUTING",
+  "WAITING_FOR_EXECUTION",
+  "WAITING",
+  "COMPLETED_SUCCESSFULLY",
+  "COMPLETED_WITH_ERRORS",
+  "SYSTEM_FAILURE",
+  "FAILURE",
+  "CANCELED",
+] as const;
+
+// Schema for validating run context data
+export const RunContextSchema = z.object({
+  id: z.string(),
+  friendlyId: z.string(),
+  taskIdentifier: z.string(),
+  status: z.enum(VALID_TASK_RUN_STATUSES).catch((ctx) => {
+    throw new Error(`Invalid TaskRunStatus: ${ctx.input}`);
+  }),
+  createdAt: z.string().datetime(),
+  startedAt: z.string().datetime().optional(),
+  completedAt: z.string().datetime().optional(),
+  isTest: z.boolean(),
+  tags: z.array(z.string()),
+  queue: z.string(),
+  concurrencyKey: z.string().nullable(),
+  usageDurationMs: z.number(),
+  costInCents: z.number(),
+  baseCostInCents: z.number(),
+  machinePreset: MachinePresetName.nullable(),
+  version: z.string().optional(),
+  rootRun: z
+    .object({
+      friendlyId: z.string(),
+      taskIdentifier: z.string(),
+    })
+    .nullable(),
+  parentRun: z
+    .object({
+      friendlyId: z.string(),
+      taskIdentifier: z.string(),
+    })
+    .nullable(),
+  batch: z
+    .object({
+      friendlyId: z.string(),
+    })
+    .nullable(),
+  schedule: z
+    .object({
+      friendlyId: z.string(),
+    })
+    .nullable(),
+});
+
+export type RunContext = z.infer<typeof RunContextSchema>;
 
 // Fetch run context for a log entry
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -99,38 +162,43 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     schedule = scheduleData;
   }
 
+  const runData = {
+    id: run.id,
+    friendlyId: run.friendlyId,
+    taskIdentifier: run.taskIdentifier,
+    status: run.status,
+    createdAt: run.createdAt.toISOString(),
+    startedAt: run.startedAt?.toISOString(),
+    completedAt: run.completedAt?.toISOString(),
+    isTest: run.isTest,
+    tags: run.runTags,
+    queue: run.queue,
+    concurrencyKey: run.concurrencyKey,
+    usageDurationMs: run.usageDurationMs,
+    costInCents: run.costInCents,
+    baseCostInCents: run.baseCostInCents,
+    machinePreset: run.machinePreset,
+    version: run.lockedToVersion?.version,
+    rootRun: run.rootTaskRun
+      ? {
+          friendlyId: run.rootTaskRun.friendlyId,
+          taskIdentifier: run.rootTaskRun.taskIdentifier,
+        }
+      : null,
+    parentRun: run.parentTaskRun
+      ? {
+          friendlyId: run.parentTaskRun.friendlyId,
+          taskIdentifier: run.parentTaskRun.taskIdentifier,
+        }
+      : null,
+    batch: run.batch ? { friendlyId: run.batch.friendlyId } : null,
+    schedule: schedule,
+  };
+
+  // Validate the run data
+  const validatedRun = RunContextSchema.parse(runData);
+
   return json({
-    run: {
-      id: run.id,
-      friendlyId: run.friendlyId,
-      taskIdentifier: run.taskIdentifier,
-      status: run.status,
-      createdAt: run.createdAt.toISOString(),
-      startedAt: run.startedAt?.toISOString(),
-      completedAt: run.completedAt?.toISOString(),
-      isTest: run.isTest,
-      tags: run.runTags,
-      queue: run.queue,
-      concurrencyKey: run.concurrencyKey,
-      usageDurationMs: run.usageDurationMs,
-      costInCents: run.costInCents,
-      baseCostInCents: run.baseCostInCents,
-      machinePreset: run.machinePreset,
-      version: run.lockedToVersion?.version,
-      rootRun: run.rootTaskRun
-        ? {
-            friendlyId: run.rootTaskRun.friendlyId,
-            taskIdentifier: run.rootTaskRun.taskIdentifier,
-          }
-        : null,
-      parentRun: run.parentTaskRun
-        ? {
-            friendlyId: run.parentTaskRun.friendlyId,
-            taskIdentifier: run.parentTaskRun.taskIdentifier,
-          }
-        : null,
-      batch: run.batch ? { friendlyId: run.batch.friendlyId } : null,
-      schedule: schedule,
-    },
+    run: validatedRun,
   });
 };
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -573,9 +573,11 @@ function RunBody({
                   <Property.Value>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="break-all">
-                          {run.idempotencyKey ? run.idempotencyKey : "–"}
-                        </div>
+                        {run.idempotencyKey ? (
+                          <CopyableText value={run.idempotencyKey} copyValue={run.idempotencyKey} asChild />
+                        ) : (
+                          <div className="break-all">–</div>
+                        )}
                         {run.idempotencyKey && (
                           <div>
                             Expires:{" "}
