ui/jobs: add inline iframe viewer for execution detail files

Add an ExecutionDetailViewer modal component that renders viewable
execution detail files (html, txt) inline in an iframe using blob URLs.
This avoids the popup blocker issue entirely for the inline case and
provides a better UX than opening a new tab.

The View button is now shown only for viewable file types (html, txt).
Non-viewable files (zip, binpb) show only the Download button. The
viewer modal includes maximize and open-in-new-tab controls.

Epic: None
Release note: None

Author: dt

pkg/ui/ui.go

@@ -36,6 +36,7 @@ const (
 	cspHeader = "default-src 'self'; " +
 		"style-src 'self' 'unsafe-inline'; " +
 		"font-src 'self' data:; " +
+		"frame-src 'self' blob: https://cockroachdb.github.io; " +
 		"img-src 'self' data:; " +
 		"connect-src 'self' https://register.cockroachdb.com;"
 )

pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/executionDetailViewer.tsx

@@ -0,0 +1,66 @@
+// Copyright 2026 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import { Button, Icon } from "@cockroachlabs/ui-components";
+import classnames from "classnames/bind";
+import React, { useCallback } from "react";
+
+import styles from "./jobProfilerView.module.scss";
+
+const cx = classnames.bind(styles);
+
+interface ExecutionDetailViewerProps {
+  filename: string;
+  blobUrl: string;
+  onClose: () => void;
+}
+
+export const ExecutionDetailViewer: React.FC<ExecutionDetailViewerProps> = ({
+  filename,
+  blobUrl,
+  onClose,
+}) => {
+  const openInNewTab = useCallback(() => {
+    // Blob URL already exists so this is synchronous and won't
+    // trigger popup blockers.
+    window.open(blobUrl, "_blank");
+  }, [blobUrl]);
+
+  return (
+    <div className={cx("viewer-overlay")} onClick={onClose}>
+      <div className={cx("viewer-panel")} onClick={e => e.stopPropagation()}>
+        <div className={cx("viewer-header")}>
+          <span className={cx("viewer-filename")}>{filename}</span>
+          <span className={cx("viewer-actions")}>
+            <Button
+              as="a"
+              size="small"
+              intent="tertiary"
+              onClick={openInNewTab}
+              aria-label="Open in new tab"
+            >
+              <Icon iconName="Open" />
+            </Button>
+            <Button
+              as="a"
+              size="small"
+              intent="tertiary"
+              onClick={onClose}
+              aria-label="Close"
+            >
+              <Icon iconName="Cancel" />
+            </Button>
+          </span>
+        </div>
+        <iframe
+          src={blobUrl}
+          className={cx("viewer-iframe")}
+          sandbox="allow-same-origin allow-scripts"
+          title={filename}
+        />
+      </div>
+    </div>
+  );
+};

pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/jobProfilerView.module.scss

@@ -6,34 +6,96 @@
 @import "src/core/index.module";
 
 .crl-job-profiler-view {
-    &__actions-column {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-    }
+  &__actions-column {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
 }
 
 .column-size-medium {
-    width: 230px;
+  width: 230px;
 }
 
 .view-execution-detail-button {
-    white-space: nowrap;
+  white-space: nowrap;
 
-    >svg {
-        margin-right: $spacing-x-small;
-    }
+  > svg {
+    margin-right: $spacing-x-small;
+  }
 }
 
 .download-execution-detail-button {
-    white-space: nowrap;
+  white-space: nowrap;
 
-    >svg {
-        margin-right: $spacing-x-small;
-    }
+  > svg {
+    margin-right: $spacing-x-small;
+  }
 }
 
 .full-width {
   width: 100%;
 }
+
+// Execution detail viewer overlay and panel.
+.viewer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.viewer-panel {
+  background-color: white;
+  border: 0.5px solid $colors--neutral-2;
+  border-radius: 8px;
+  box-shadow: 0 0 4px rgba(154, 161, 171, 0.33);
+  width: 98vw;
+  height: 98vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.viewer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 0.5px solid $colors--neutral-2;
+}
+
+.viewer-filename {
+  font-family: $font-family--base;
+  font-weight: $font-weight--bold;
+  font-size: $font-size--small;
+  line-height: $line-height--small;
+  letter-spacing: 0.3px;
+  color: $colors--neutral-7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.viewer-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-left: 16px;
+}
+
+.viewer-iframe {
+  width: 100%;
+  border: none;
+  display: block;
+  flex: 1;
+  min-height: 0;
+}