From 9c9af856bac42ef585ff8875ee53952f25c96f74 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Thu, 4 Dec 2025 13:58:27 -0800
Subject: [PATCH] Cleanup ExecutionDetails

---
 .../ExecutionDetails/ExecutionDetails.tsx     | 252 ------------------
 src/components/shared/TaskDetails/Details.tsx |   3 +-
 .../shared/TaskDetails/ExecutionDetails.tsx   | 208 +++++++++++++++
 3 files changed, 210 insertions(+), 253 deletions(-)
 delete mode 100644 src/components/shared/ExecutionDetails/ExecutionDetails.tsx
 create mode 100644 src/components/shared/TaskDetails/ExecutionDetails.tsx

diff --git a/src/components/shared/ExecutionDetails/ExecutionDetails.tsx b/src/components/shared/ExecutionDetails/ExecutionDetails.tsx
deleted file mode 100644
index 55eb03b32..000000000
--- a/src/components/shared/ExecutionDetails/ExecutionDetails.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { ChevronsUpDown, ExternalLink } from "lucide-react";
-
-import type { GetContainerExecutionStateResponse } from "@/api/types.gen";
-import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Link } from "@/components/ui/link";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useBackend } from "@/providers/BackendProvider";
-import { useFetchContainerExecutionState } from "@/services/executionService";
-import {
-  type ComponentSpec,
-  isGraphImplementation,
-} from "@/utils/componentSpec";
-import { EXIT_CODE_OOM } from "@/utils/constants";
-import { formatDate, formatDuration } from "@/utils/date";
-
-import { InfoBox } from "../InfoBox";
-
-interface ExecutionDetailsProps {
-  executionId: string;
-  componentSpec?: ComponentSpec;
-}
-
-export const ExecutionDetails = ({
-  executionId,
-  componentSpec,
-}: ExecutionDetailsProps) => {
-  const { backendUrl } = useBackend();
-
-  const isSubgraph =
-    componentSpec && isGraphImplementation(componentSpec.implementation);
-
-  const {
-    data: containerState,
-    isLoading: isLoadingContainerState,
-    error: containerStateError,
-  } = useFetchContainerExecutionState(executionId || "", backendUrl);
-
-  // Don't render if no execution data is available
-  const hasExecutionData =
-    executionId ||
-    containerState ||
-    isLoadingContainerState ||
-    containerStateError;
-  if (!hasExecutionData) {
-    return null;
-  }
-
-  const podName = executionPodName(containerState);
-  const executionJobLinks = getExecutionJobLinks(containerState);
-
-  return (
-    <div className="flex flex-col px-3 py-2">
-      <Collapsible defaultOpen>
-        <div className="font-medium text-sm text-foreground flex items-center gap-1">
-          Execution Details
-          <CollapsibleTrigger asChild>
-            <Button variant="ghost" size="sm">
-              <ChevronsUpDown className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-
-        <CollapsibleContent className="mt-2 space-y-2">
-          <div className="flex items-center gap-2">
-            <span className="font-medium text-xs text-foreground min-w-fit">
-              Execution ID:
-            </span>
-            <span className="text-xs text-muted-foreground font-mono truncate">
-              {executionId}
-            </span>
-          </div>
-
-          {!isSubgraph && (
-            <>
-              {isLoadingContainerState && (
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-3 w-12" />
-                    <Skeleton className="h-3 w-32" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-3 w-20" />
-                    <Skeleton className="h-3 w-24" />
-                    <Skeleton className="h-3 w-40" />
-                  </div>
-                </div>
-              )}
-
-              {containerStateError && (
-                <InfoBox title="Failed to load container state" variant="error">
-                  {containerStateError.message}
-                </InfoBox>
-              )}
-
-              {!!containerState?.exit_code && (
-                <div className="flex flex-wrap items-center gap-1">
-                  <span className="font-medium text-xs text-destructive">
-                    Exit Code:
-                  </span>
-                  <span className="text-xs text-destructive">
-                    {containerState.exit_code}
-                  </span>
-                  {containerState.exit_code === EXIT_CODE_OOM && (
-                    <span className="text-xs text-destructive">
-                      (Out of Memory)
-                    </span>
-                  )}
-                </div>
-              )}
-
-              {containerState?.started_at && (
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-xs text-foreground min-w-fit">
-                    Started:
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {formatDate(containerState.started_at)}
-                  </span>
-                </div>
-              )}
-
-              {containerState?.ended_at && containerState?.started_at && (
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-xs text-foreground min-w-fit">
-                    Completed in:
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {formatDuration(
-                      containerState.started_at,
-                      containerState.ended_at,
-                    )}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    ({formatDate(containerState.ended_at)})
-                  </span>
-                </div>
-              )}
-
-              {podName && (
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-xs text-foreground min-w-fit">
-                    Pod Name:
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {podName}
-                  </span>
-                </div>
-              )}
-              {executionJobLinks && (
-                <>
-                  {executionJobLinks.map((linkInfo) => (
-                    <div
-                      key={linkInfo.name}
-                      className="flex text-xs items-center gap-2"
-                    >
-                      <span className="font-medium text-foreground min-w-fit">
-                        {linkInfo.name}:
-                      </span>
-                      <Link
-                        href={linkInfo.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {linkInfo.value}
-                        <ExternalLink className="size-3 shrink-0" />
-                      </Link>
-                    </div>
-                  ))}
-                </>
-              )}
-
-              {!isLoadingContainerState &&
-                !containerState &&
-                !containerStateError && (
-                  <div className="text-xs text-muted-foreground">
-                    Container state not available
-                  </div>
-                )}
-            </>
-          )}
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  );
-};
-
-function executionPodName(
-  containerState?: GetContainerExecutionStateResponse,
-): string | null {
-  if (!containerState || !("debug_info" in containerState)) {
-    return null;
-  }
-
-  const debugInfo = containerState.debug_info as Record<string, any>;
-
-  if ("pod_name" in debugInfo && typeof debugInfo.pod_name === "string") {
-    return debugInfo.pod_name;
-  }
-
-  if (
-    "kubernetes" in debugInfo &&
-    debugInfo.kubernetes &&
-    typeof debugInfo.kubernetes === "object" &&
-    "pod_name" in debugInfo.kubernetes &&
-    typeof debugInfo.kubernetes.pod_name === "string"
-  ) {
-    return debugInfo.kubernetes.pod_name;
-  }
-
-  return null;
-}
-
-interface ExecutionLinkItem {
-  name: string;
-  value: string;
-  url?: string;
-}
-
-function getExecutionJobLinks(
-  containerState?: GetContainerExecutionStateResponse,
-): Array<ExecutionLinkItem> | null {
-  if (!containerState || !("debug_info" in containerState)) {
-    return null;
-  }
-
-  const debugInfo = containerState.debug_info as Record<string, any>;
-
-  const result = Array<ExecutionLinkItem>();
-
-  const huggingfaceJob = debugInfo.huggingface_job as Record<string, any>;
-  if (
-    huggingfaceJob &&
-    typeof huggingfaceJob === "object" &&
-    typeof huggingfaceJob.id === "string" &&
-    typeof huggingfaceJob.namespace === "string"
-  ) {
-    const url = `https://huggingface.co/jobs/${huggingfaceJob.namespace}/${huggingfaceJob.id}`;
-    result.push({
-      name: "HuggingFace Job",
-      value: huggingfaceJob.id,
-      url: url,
-    });
-  }
-
-  return result;
-}
diff --git a/src/components/shared/TaskDetails/Details.tsx b/src/components/shared/TaskDetails/Details.tsx
index 3a134ae01..83d0ff692 100644
--- a/src/components/shared/TaskDetails/Details.tsx
+++ b/src/components/shared/TaskDetails/Details.tsx
@@ -30,7 +30,7 @@ import {
 } from "@/utils/URL";
 import copyToYaml from "@/utils/yaml";
 
-import { ExecutionDetails } from "../ExecutionDetails/ExecutionDetails";
+import { ExecutionDetails } from "./ExecutionDetails";
 
 interface TaskDetailsProps {
   displayName: string;
@@ -169,6 +169,7 @@ const TaskDetails = ({
           <ExecutionDetails
             executionId={executionId}
             componentSpec={componentSpec}
+            className="px-3 py-2"
           />
         )}
 
diff --git a/src/components/shared/TaskDetails/ExecutionDetails.tsx b/src/components/shared/TaskDetails/ExecutionDetails.tsx
new file mode 100644
index 000000000..db2d6d474
--- /dev/null
+++ b/src/components/shared/TaskDetails/ExecutionDetails.tsx
@@ -0,0 +1,208 @@
+import type { GetContainerExecutionStateResponse } from "@/api/types.gen";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useBackend } from "@/providers/BackendProvider";
+import { useFetchContainerExecutionState } from "@/services/executionService";
+import {
+  type ComponentSpec,
+  isGraphImplementation,
+} from "@/utils/componentSpec";
+import { EXIT_CODE_OOM } from "@/utils/constants";
+import { formatDate, formatDuration } from "@/utils/date";
+
+import type { AttributeProps } from "../ContextPanel/Blocks/Attribute";
+import { ContentBlock } from "../ContextPanel/Blocks/ContentBlock";
+import { ListBlock } from "../ContextPanel/Blocks/ListBlock";
+import { InfoBox } from "../InfoBox";
+
+interface ExecutionDetailsProps {
+  executionId: string;
+  componentSpec?: ComponentSpec;
+  className?: string;
+}
+
+export const ExecutionDetails = ({
+  executionId,
+  componentSpec,
+  className,
+}: ExecutionDetailsProps) => {
+  const { backendUrl } = useBackend();
+
+  const isSubgraph =
+    componentSpec && isGraphImplementation(componentSpec.implementation);
+
+  const {
+    data: containerState,
+    isLoading: isLoadingContainerState,
+    error: containerStateError,
+  } = useFetchContainerExecutionState(executionId, backendUrl);
+
+  const getExecutionItems = () => {
+    const items: AttributeProps[] = [
+      { label: "Execution ID", value: executionId },
+    ];
+
+    if (isSubgraph) {
+      return items;
+    }
+
+    if (containerState?.exit_code && containerState.exit_code > 0) {
+      const exitCodeValue =
+        containerState.exit_code === EXIT_CODE_OOM
+          ? `${containerState.exit_code} (Out of Memory)`
+          : `${containerState.exit_code}`;
+
+      items.push({
+        label: "Exit Code",
+        value: exitCodeValue,
+        critical: true,
+      });
+    }
+
+    if (containerState?.started_at) {
+      items.push({
+        label: "Started",
+        value: formatDate(containerState.started_at),
+      });
+    }
+
+    if (containerState?.ended_at && containerState?.started_at) {
+      items.push({
+        label: "Completed in",
+        value: `${formatDuration(
+          containerState.started_at,
+          containerState.ended_at,
+        )} (${formatDate(containerState.ended_at)})`,
+      });
+    }
+
+    const podName = executionPodName(containerState);
+    if (podName) {
+      items.push({ label: "Pod Name", value: podName });
+    }
+
+    const executionJobLinks = getExecutionJobLinks(containerState);
+    if (executionJobLinks) {
+      executionJobLinks.forEach((linkInfo) => {
+        if (!linkInfo.url) {
+          return;
+        }
+
+        items.push({
+          label: linkInfo.name,
+          value: { text: linkInfo.value, href: linkInfo.url },
+        });
+      });
+    }
+
+    return items;
+  };
+
+  const executionItems = getExecutionItems();
+
+  return (
+    <ContentBlock
+      title="Execution Details"
+      collapsible
+      defaultOpen
+      className={className}
+    >
+      <BlockStack gap="2">
+        <ListBlock items={executionItems} marker="none" />
+
+        {!isSubgraph && isLoadingContainerState && (
+          <BlockStack gap="2">
+            <InlineStack gap="2" blockAlign="center">
+              <Skeleton className="h-3 w-12" />
+              <Skeleton className="h-3 w-32" />
+            </InlineStack>
+            <InlineStack gap="2" blockAlign="center">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-40" />
+            </InlineStack>
+          </BlockStack>
+        )}
+
+        {!isSubgraph && containerStateError && (
+          <InfoBox
+            title="Failed to load container state"
+            variant="error"
+            className="wrap-anywhere"
+          >
+            {containerStateError.message}
+          </InfoBox>
+        )}
+      </BlockStack>
+    </ContentBlock>
+  );
+};
+
+function executionPodName(
+  containerState?: GetContainerExecutionStateResponse,
+): string | null {
+  if (!containerState || !("debug_info" in containerState)) {
+    return null;
+  }
+
+  const debugInfo = containerState.debug_info;
+
+  if (!isRecord(debugInfo)) {
+    return null;
+  }
+
+  if (typeof debugInfo.pod_name === "string") {
+    return debugInfo.pod_name;
+  }
+
+  if (
+    isRecord(debugInfo.kubernetes) &&
+    typeof debugInfo.kubernetes.pod_name === "string"
+  ) {
+    return debugInfo.kubernetes.pod_name;
+  }
+
+  return null;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+interface ExecutionLinkItem {
+  name: string;
+  value: string;
+  url?: string;
+}
+
+function getExecutionJobLinks(
+  containerState?: GetContainerExecutionStateResponse,
+): Array<ExecutionLinkItem> | null {
+  if (!containerState || !("debug_info" in containerState)) {
+    return null;
+  }
+
+  const debugInfo = containerState.debug_info;
+
+  if (!isRecord(debugInfo)) {
+    return null;
+  }
+
+  const result = Array<ExecutionLinkItem>();
+
+  const huggingfaceJob = debugInfo.huggingface_job;
+  if (
+    isRecord(huggingfaceJob) &&
+    typeof huggingfaceJob.id === "string" &&
+    typeof huggingfaceJob.namespace === "string"
+  ) {
+    const url = `https://huggingface.co/jobs/${huggingfaceJob.namespace}/${huggingfaceJob.id}`;
+    result.push({
+      name: "HuggingFace Job",
+      value: huggingfaceJob.id,
+      url: url,
+    });
+  }
+
+  return result;
+}