@codemation/next-host 0.0.1

package/src/features/workflows/components/workflowDetail/WorkflowExecutionInspectorPanes.tsx

@@ -0,0 +1,239 @@
+import { Pencil } from "lucide-react";
+import {
+  WorkflowInspectorBinaryView,
+  WorkflowInspectorErrorView,
+  WorkflowInspectorJsonView,
+  WorkflowInspectorPrettyView,
+} from "./WorkflowInspectorViews";
+import type {
+  WorkflowExecutionInspectorActions,
+  WorkflowExecutionInspectorFormatting,
+  WorkflowExecutionInspectorModel,
+  WorkflowExecutionInspectorPaneModel,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowExecutionInspectorPanes(
+  props: Readonly<{
+    panes: ReadonlyArray<WorkflowExecutionInspectorPaneModel>;
+    nodeActions: WorkflowExecutionInspectorModel["nodeActions"];
+    selectedPinnedOutput: WorkflowExecutionInspectorModel["selectedPinnedOutput"];
+    selectedNodeError: WorkflowExecutionInspectorModel["selectedNodeError"];
+    actions: Pick<
+      WorkflowExecutionInspectorActions,
+      "onClearPinnedOutput" | "onEditSelectedOutput" | "onSelectFormat" | "onSelectInputPort" | "onSelectOutputPort"
+    >;
+    formatting: Pick<
+      WorkflowExecutionInspectorFormatting,
+      "getErrorClipboardText" | "getErrorHeadline" | "getErrorStack"
+    >;
+  }>,
+) {
+  const { actions, formatting, nodeActions, panes, selectedNodeError, selectedPinnedOutput } = props;
+  const { onClearPinnedOutput, onEditSelectedOutput, onSelectFormat, onSelectInputPort, onSelectOutputPort } = actions;
+  const { getErrorClipboardText, getErrorHeadline, getErrorStack } = formatting;
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: panes.length === 2 ? "minmax(0, 1fr) minmax(0, 1fr)" : "minmax(0, 1fr)",
+        minHeight: 0,
+      }}
+    >
+      {panes.map((pane, index) => {
+        const isOutputPane = pane.tab === "output";
+        const availableFormats =
+          pane.attachments.length > 0 ? (["json", "pretty", "binary"] as const) : (["json", "pretty"] as const);
+        return (
+          <section
+            key={pane.tab}
+            data-testid={`workflow-inspector-pane-${pane.tab}`}
+            style={{
+              display: "grid",
+              gridTemplateRows: "auto auto 1fr",
+              minWidth: 0,
+              minHeight: 0,
+              borderLeft: index > 0 ? "1px solid #e5e7eb" : "none",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                flexWrap: "wrap",
+                gap: 12,
+                padding: "10px 12px",
+                borderBottom: "1px solid #e5e7eb",
+                background: "#f8fafc",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+                <div
+                  style={{
+                    fontSize: 11,
+                    fontWeight: 800,
+                    letterSpacing: 0.45,
+                    textTransform: "uppercase",
+                    opacity: 0.72,
+                  }}
+                >
+                  {pane.tab}
+                </div>
+                {isOutputPane && nodeActions.viewContext === "live-workflow" ? (
+                  <button
+                    type="button"
+                    data-testid="edit-output-button"
+                    onClick={onEditSelectedOutput}
+                    disabled={!nodeActions.canEditOutput}
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 6,
+                      border: "1px solid #d1d5db",
+                      background: "white",
+                      color: "#111827",
+                      padding: "5px 8px",
+                      fontWeight: 700,
+                      fontSize: 12,
+                      cursor: !nodeActions.canEditOutput ? "not-allowed" : "pointer",
+                      opacity: !nodeActions.canEditOutput ? 0.6 : 1,
+                    }}
+                  >
+                    <Pencil size={12} strokeWidth={2} />
+                    Edit
+                  </button>
+                ) : null}
+                {isOutputPane && nodeActions.viewContext === "live-workflow" && selectedPinnedOutput ? (
+                  <button
+                    type="button"
+                    onClick={onClearPinnedOutput}
+                    disabled={!nodeActions.canClearPinnedOutput}
+                    style={{
+                      border: "1px solid #d1d5db",
+                      background: "white",
+                      color: "#111827",
+                      padding: "5px 8px",
+                      fontWeight: 700,
+                      fontSize: 12,
+                      cursor: !nodeActions.canClearPinnedOutput ? "not-allowed" : "pointer",
+                      opacity: !nodeActions.canClearPinnedOutput ? 0.6 : 1,
+                    }}
+                  >
+                    Clear pin
+                  </button>
+                ) : null}
+                {isOutputPane && pane.showsError ? (
+                  <span
+                    style={{
+                      border: "1px solid #fecaca",
+                      background: "#fef2f2",
+                      color: "#991b1b",
+                      fontSize: 10,
+                      fontWeight: 800,
+                      letterSpacing: 0.3,
+                      textTransform: "uppercase",
+                      padding: "1px 5px",
+                    }}
+                  >
+                    Error
+                  </span>
+                ) : null}
+              </div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+                {availableFormats.map((format) => (
+                  <button
+                    key={format}
+                    data-testid={`inspector-format-${pane.tab}-${format}`}
+                    onClick={() => onSelectFormat(pane.tab, format)}
+                    aria-pressed={pane.format === format}
+                    style={{
+                      border: pane.format === format ? "1px solid #111827" : "1px solid #d1d5db",
+                      background: pane.format === format ? "#111827" : "white",
+                      color: pane.format === format ? "white" : "#111827",
+                      padding: "6px 10px",
+                      fontWeight: 700,
+                      fontSize: 12,
+                      cursor: "pointer",
+                    }}
+                  >
+                    {format[0]!.toUpperCase()}
+                    {format.slice(1)}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {pane.portEntries.length > 1 ? (
+              <div
+                style={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: 8,
+                  padding: "10px 12px",
+                  borderBottom: "1px solid #e5e7eb",
+                  background: "#ffffff",
+                  overflowX: "hidden",
+                  overflowY: "auto",
+                }}
+              >
+                {pane.portEntries.map(([portName]) => {
+                  const isSelected = pane.selectedPort === portName;
+                  return (
+                    <button
+                      key={portName}
+                      data-testid={`inspector-port-${pane.tab}-${portName}`}
+                      onClick={() => {
+                        if (pane.tab === "input") onSelectInputPort(portName);
+                        if (pane.tab === "output") onSelectOutputPort(portName);
+                      }}
+                      style={{
+                        whiteSpace: "nowrap",
+                        border: isSelected ? "1px solid #111827" : "1px solid #d1d5db",
+                        background: isSelected ? "#111827" : "white",
+                        color: isSelected ? "white" : "#111827",
+                        padding: "6px 10px",
+                        fontWeight: 700,
+                        fontSize: 12,
+                        cursor: "pointer",
+                      }}
+                    >
+                      {portName}
+                    </button>
+                  );
+                })}
+              </div>
+            ) : (
+              <div style={{ borderBottom: "1px solid #e5e7eb" }} />
+            )}
+
+            <div style={{ minWidth: 0, overflowX: "hidden", overflowY: "auto", padding: 12 }}>
+              {pane.showsError ? (
+                pane.format === "pretty" ? (
+                  <WorkflowInspectorErrorView
+                    error={selectedNodeError}
+                    emptyLabel={pane.emptyLabel}
+                    getErrorClipboardText={getErrorClipboardText}
+                    getErrorHeadline={getErrorHeadline}
+                    getErrorStack={getErrorStack}
+                  />
+                ) : (
+                  <WorkflowInspectorJsonView value={selectedNodeError} emptyLabel={pane.emptyLabel} />
+                )
+              ) : pane.format === "binary" ? (
+                <WorkflowInspectorBinaryView
+                  attachments={pane.attachments}
+                  emptyLabel="No binary attachments captured yet."
+                />
+              ) : pane.format === "pretty" ? (
+                <WorkflowInspectorPrettyView value={pane.value} emptyLabel={pane.emptyLabel} />
+              ) : (
+                <WorkflowInspectorJsonView value={pane.value} emptyLabel={pane.emptyLabel} />
+              )}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowExecutionInspectorSidebarResizer.tsx

@@ -0,0 +1,31 @@
+export function WorkflowExecutionInspectorSidebarResizer(
+  props: Readonly<{
+    widthPx: number;
+    isResizing: boolean;
+    onResizeStart: (clientX: number, currentWidth: number) => void;
+  }>,
+) {
+  const { isResizing, onResizeStart, widthPx } = props;
+  const TREE_RESIZE_HANDLE_WIDTH_PX = 8;
+  return (
+    <div
+      data-testid="workflow-execution-tree-resizer"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize execution tree"
+      onMouseDown={(event) => {
+        event.preventDefault();
+        onResizeStart(event.clientX, widthPx);
+      }}
+      style={{
+        position: "relative",
+        zIndex: 10,
+        width: TREE_RESIZE_HANDLE_WIDTH_PX,
+        cursor: "col-resize",
+        background: isResizing ? "#bfdbfe" : "#e5e7eb",
+        borderLeft: "1px solid #d1d5db",
+        borderRight: "1px solid #d1d5db",
+      }}
+    />
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowExecutionInspectorTreePanel.tsx

@@ -0,0 +1,133 @@
+import Tree from "rc-tree";
+import { WorkflowNodeIconResolver, WorkflowStatusIcon } from "./WorkflowDetailIcons";
+import type {
+  ExecutionTreeNode,
+  WorkflowExecutionInspectorFormatting,
+  WorkflowExecutionInspectorModel,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowExecutionInspectorTreePanel(
+  props: Readonly<{
+    model: Pick<
+      WorkflowExecutionInspectorModel,
+      "executionTreeData" | "executionTreeExpandedKeys" | "selectedExecutionTreeKey" | "viewContext"
+    >;
+    formatting: Pick<WorkflowExecutionInspectorFormatting, "formatDurationLabel" | "getNodeDisplayName">;
+    onSelectNode: (nodeId: string) => void;
+  }>,
+) {
+  const { executionTreeData, executionTreeExpandedKeys, selectedExecutionTreeKey, viewContext } = props.model;
+  const { formatDurationLabel, getNodeDisplayName } = props.formatting;
+  const { onSelectNode } = props;
+  return (
+    <div
+      data-testid="workflow-execution-tree-panel"
+      style={{
+        borderRight: "1px solid #d1d5db",
+        minWidth: 0,
+        overflowX: "hidden",
+        overflowY: "auto",
+        padding: 12,
+      }}
+    >
+      <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.45, opacity: 0.64, textTransform: "uppercase" }}>
+        {viewContext === "live-workflow" ? "Workflow nodes" : "Execution tree"}
+      </div>
+      <div style={{ marginTop: 10 }}>
+        {executionTreeData.length === 0 ? (
+          <div style={{ fontSize: 12, opacity: 0.7 }}>
+            {viewContext === "live-workflow"
+              ? "No workflow nodes available yet."
+              : "No node events yet for this execution."}
+          </div>
+        ) : (
+          <Tree<ExecutionTreeNode>
+            className="codemation-execution-tree"
+            treeData={executionTreeData as ExecutionTreeNode[]}
+            showLine
+            showIcon={false}
+            defaultExpandAll
+            expandedKeys={[...executionTreeExpandedKeys]}
+            selectable
+            selectedKeys={selectedExecutionTreeKey ? [selectedExecutionTreeKey] : []}
+            onSelect={(_keys, info) => {
+              const workflowNode = (info.node as ExecutionTreeNode).workflowNode;
+              onSelectNode(workflowNode?.id ?? String(info.node.key));
+            }}
+            titleRender={(treeNode) => {
+              const isSelected = treeNode.key === selectedExecutionTreeKey;
+              const snapshot = treeNode.snapshot;
+              const node = treeNode.workflowNode;
+              const status = snapshot?.status ?? "pending";
+              const durationLabel = formatDurationLabel(snapshot);
+              const FallbackIcon = WorkflowNodeIconResolver.resolveFallback(node?.type ?? "", node?.role, node?.icon);
+              return (
+                <div
+                  data-testid={`execution-tree-node-${String(treeNode.key)}`}
+                  onClick={() => {
+                    onSelectNode(node?.id ?? String(treeNode.key));
+                  }}
+                  style={{
+                    background: isSelected ? "#eff6ff" : "transparent",
+                    padding: "6px 10px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 10,
+                    minWidth: 0,
+                    boxShadow: isSelected ? "inset 2px 0 0 #2563eb" : "none",
+                  }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0, flex: "1 1 auto" }}>
+                    <div
+                      style={{
+                        width: 20,
+                        height: 20,
+                        display: "grid",
+                        placeItems: "center",
+                        color: "#111827",
+                        background: "#f8fafc",
+                        flex: "0 0 auto",
+                      }}
+                    >
+                      <FallbackIcon size={14} strokeWidth={1.9} />
+                    </div>
+                    <WorkflowStatusIcon status={status} size={15} />
+                    <div
+                      style={{
+                        minWidth: 0,
+                        fontSize: 13,
+                        fontWeight: 700,
+                        color: "#111827",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {getNodeDisplayName(node, snapshot?.nodeId ?? null)}
+                    </div>
+                  </div>
+                  {durationLabel ? (
+                    <div
+                      data-testid={`execution-tree-node-duration-${String(treeNode.key)}`}
+                      style={{
+                        flex: "0 0 auto",
+                        fontSize: 12,
+                        fontWeight: 700,
+                        color: "#6b7280",
+                        whiteSpace: "nowrap",
+                        textAlign: "right",
+                      }}
+                    >
+                      {durationLabel}
+                    </div>
+                  ) : null}
+                </div>
+              );
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowInspectorAttachmentGroupingPresenter.tsx

@@ -0,0 +1,31 @@
+import type {
+  WorkflowExecutionInspectorAttachmentModel,
+  WorkflowInspectorAttachmentGroup,
+} from "../../lib/workflowDetail/workflowDetailTypes";
+
+export class WorkflowInspectorAttachmentGroupingPresenter {
+  static buildGroups(attachments: ReadonlyArray<WorkflowExecutionInspectorAttachmentModel>): Readonly<{
+    groups: ReadonlyArray<WorkflowInspectorAttachmentGroup>;
+    shouldShowGroupHeadings: boolean;
+  }> {
+    const groupsByItemIndex = new Map<number, WorkflowExecutionInspectorAttachmentModel[]>();
+    for (const attachment of attachments) {
+      const existingGroup = groupsByItemIndex.get(attachment.itemIndex);
+      if (existingGroup) {
+        existingGroup.push(attachment);
+        continue;
+      }
+      groupsByItemIndex.set(attachment.itemIndex, [attachment]);
+    }
+    const groups = [...groupsByItemIndex.entries()]
+      .sort(([leftIndex], [rightIndex]) => leftIndex - rightIndex)
+      .map(([itemIndex, itemAttachments]) => ({
+        itemIndex,
+        attachments: itemAttachments,
+      }));
+    return {
+      groups,
+      shouldShowGroupHeadings: groups.length > 1,
+    };
+  }
+}

package/src/features/workflows/components/workflowDetail/WorkflowInspectorAttachmentList.tsx

@@ -0,0 +1,118 @@
+import { Download } from "lucide-react";
+
+import { WorkflowInspectorAttachmentGroupingPresenter } from "./WorkflowInspectorAttachmentGroupingPresenter";
+import type { WorkflowExecutionInspectorAttachmentModel } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowInspectorAttachmentList(
+  args: Readonly<{ attachments: ReadonlyArray<WorkflowExecutionInspectorAttachmentModel> }>,
+) {
+  if (args.attachments.length === 0) {
+    return null;
+  }
+
+  const groupedAttachments = WorkflowInspectorAttachmentGroupingPresenter.buildGroups(args.attachments);
+
+  return (
+    <div data-testid="workflow-inspector-attachments" style={{ display: "grid", gap: 10, marginBottom: 12 }}>
+      <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.45, textTransform: "uppercase", opacity: 0.72 }}>
+        Attachments
+      </div>
+      {groupedAttachments.groups.map((group) => (
+        <div
+          key={`attachment-group-${group.itemIndex}`}
+          data-testid={`workflow-inspector-attachment-group-item-${group.itemIndex + 1}`}
+          style={{ display: "grid", gap: 10 }}
+        >
+          {groupedAttachments.shouldShowGroupHeadings ? (
+            <div
+              data-testid={`workflow-inspector-attachment-group-label-item-${group.itemIndex + 1}`}
+              style={{
+                fontSize: 11,
+                fontWeight: 800,
+                letterSpacing: 0.35,
+                textTransform: "uppercase",
+                color: "#475569",
+              }}
+            >
+              {`Item ${group.itemIndex + 1}`}
+            </div>
+          ) : null}
+          {group.attachments.map((entry) => (
+            <div
+              key={entry.key}
+              data-testid={`workflow-inspector-attachment-${entry.attachment.id}`}
+              style={{ border: "1px solid #d1d5db", background: "#ffffff", padding: 12, display: "grid", gap: 10 }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 12,
+                  flexWrap: "wrap",
+                }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: "#111827" }}>{entry.name}</div>
+                  <div style={{ marginTop: 4, fontSize: 12, color: "#6b7280" }}>
+                    {`${groupedAttachments.shouldShowGroupHeadings ? "" : `Item ${entry.itemIndex + 1} · `}${entry.attachment.mimeType} · ${entry.attachment.size} bytes`}
+                  </div>
+                </div>
+                <a
+                  data-testid={`workflow-inspector-attachment-link-${entry.attachment.id}`}
+                  href={entry.contentUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                    border: "1px solid #d1d5db",
+                    background: "white",
+                    color: "#111827",
+                    padding: "6px 10px",
+                    fontWeight: 700,
+                    fontSize: 12,
+                    textDecoration: "none",
+                  }}
+                >
+                  <Download size={14} strokeWidth={2.1} />
+                  {entry.attachment.previewKind === "download" ? "Download" : "Open"}
+                </a>
+              </div>
+              {entry.attachment.previewKind === "image" ? (
+                <img
+                  data-testid={`workflow-inspector-image-preview-${entry.attachment.id}`}
+                  src={entry.contentUrl}
+                  alt={entry.attachment.filename ?? entry.name}
+                  style={{
+                    maxWidth: "100%",
+                    maxHeight: 260,
+                    objectFit: "contain",
+                    background: "#f8fafc",
+                    border: "1px solid #e5e7eb",
+                  }}
+                />
+              ) : null}
+              {entry.attachment.previewKind === "audio" ? (
+                <audio
+                  data-testid={`workflow-inspector-audio-preview-${entry.attachment.id}`}
+                  controls
+                  src={entry.contentUrl}
+                />
+              ) : null}
+              {entry.attachment.previewKind === "video" ? (
+                <video
+                  data-testid={`workflow-inspector-video-preview-${entry.attachment.id}`}
+                  controls
+                  src={entry.contentUrl}
+                  style={{ maxWidth: "100%", maxHeight: 260, background: "#020617" }}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/features/workflows/components/workflowDetail/WorkflowInspectorBinaryView.tsx

@@ -0,0 +1,15 @@
+import { WorkflowInspectorAttachmentList } from "./WorkflowInspectorAttachmentList";
+import type { WorkflowExecutionInspectorAttachmentModel } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowInspectorBinaryView(
+  args: Readonly<{ attachments: ReadonlyArray<WorkflowExecutionInspectorAttachmentModel>; emptyLabel: string }>,
+) {
+  if (args.attachments.length === 0) {
+    return (
+      <div data-testid="workflow-inspector-empty-state" className="text-sm text-muted-foreground opacity-80">
+        {args.emptyLabel}
+      </div>
+    );
+  }
+  return <WorkflowInspectorAttachmentList attachments={args.attachments} />;
+}

package/src/features/workflows/components/workflowDetail/WorkflowInspectorErrorView.tsx

@@ -0,0 +1,107 @@
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+import type { CopyState, NodeExecutionError } from "../../lib/workflowDetail/workflowDetailTypes";
+
+export function WorkflowInspectorErrorView(
+  args: Readonly<{
+    error: NodeExecutionError | undefined;
+    emptyLabel: string;
+    getErrorHeadline: (error: NodeExecutionError | undefined) => string;
+    getErrorStack: (error: NodeExecutionError | undefined) => string | null;
+    getErrorClipboardText: (error: NodeExecutionError | undefined) => string;
+  }>,
+) {
+  const { error, emptyLabel, getErrorClipboardText, getErrorHeadline, getErrorStack } = args;
+  const [copyState, setCopyState] = useState<CopyState>("idle");
+
+  if (!error) {
+    return (
+      <div data-testid="workflow-inspector-empty-state" style={{ opacity: 0.62, fontSize: 13 }}>
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const headline = getErrorHeadline(error);
+  const stack = getErrorStack(error);
+
+  return (
+    <div style={{ height: "100%", minHeight: 0, display: "grid", gridTemplateRows: "auto auto 1fr", gap: 10 }}>
+      <div style={{ display: "grid", gap: 8, border: "1px solid #fecaca", background: "#fef2f2", padding: 12 }}>
+        <div
+          style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.45, textTransform: "uppercase", color: "#991b1b" }}
+        >
+          Error
+        </div>
+        <div
+          data-testid="workflow-inspector-error-headline"
+          style={{
+            fontSize: 13,
+            lineHeight: 1.55,
+            color: "#111827",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          }}
+        >
+          {headline}
+        </div>
+      </div>
+      <div
+        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}
+      >
+        <div style={{ fontSize: 12, color: "#4b5563" }}>
+          {stack ? "Full stacktrace" : "No stacktrace was captured for this error."}
+        </div>
+        <button
+          onClick={() => {
+            const value = getErrorClipboardText(error);
+            if (!value) return;
+            void navigator.clipboard.writeText(value).then(() => {
+              setCopyState("copied");
+              window.setTimeout(() => setCopyState("idle"), 1500);
+            });
+          }}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "1px solid #d1d5db",
+            background: "white",
+            padding: "6px 10px",
+            cursor: "pointer",
+            fontWeight: 700,
+            fontSize: 12,
+            color: "#111827",
+          }}
+        >
+          {copyState === "copied" ? <Check size={14} strokeWidth={2.2} /> : <Copy size={14} strokeWidth={2.2} />}
+          {copyState === "copied" ? "Copied" : "Copy stacktrace"}
+        </button>
+      </div>
+      <div
+        style={{
+          minWidth: 0,
+          overflowX: "hidden",
+          overflowY: "auto",
+          border: "1px solid #d1d5db",
+          background: "#0f172a",
+          color: "#e2e8f0",
+          padding: 12,
+        }}
+      >
+        <pre
+          style={{
+            margin: 0,
+            fontSize: 12,
+            lineHeight: 1.65,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          }}
+        >
+          {stack ?? headline}
+        </pre>
+      </div>
+    </div>
+  );
+}