@fragments-sdk/viewer 0.2.1

package/src/components/InteractionsPanel.tsx

@@ -0,0 +1,757 @@
+/**
+ * Interactions Panel - Storybook-style interaction testing
+ *
+ * Runs play functions from Storybook stories and displays:
+ * - Step-by-step progress
+ * - Assertion results (pass/fail)
+ * - Error messages with stack traces
+ * - Re-run capabilities
+ * - Step-through debugging with breakpoints
+ */
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Button, Stack, Text, Badge, CodeBlock, Alert, Box } from "@fragments-sdk/ui";
+import type { PlayFunction, PlayFunctionContext, FragmentVariant } from '@fragments-sdk/core';
+import { Play } from "@phosphor-icons/react";
+import {
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  LoadingIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  RefreshIcon,
+  BugIcon,
+  PauseIcon,
+  StepOverIcon,
+  ContinueIcon,
+  BreakpointIcon,
+  BreakpointEmptyIcon,
+} from "./Icons.js";
+import { PanelShell } from "./PanelShell.js";
+
+// Step execution state
+interface StepResult {
+  name: string;
+  status: "pending" | "running" | "passed" | "failed" | "paused";
+  error?: string;
+  duration?: number;
+}
+
+interface InteractionResult {
+  status: "idle" | "running" | "passed" | "failed" | "paused";
+  steps: StepResult[];
+  error?: string;
+  duration?: number;
+  startTime?: number;
+}
+
+// Debug state
+interface DebugState {
+  mode: "normal" | "debug";
+  isPaused: boolean;
+  currentStepIndex: number;
+  breakpoints: Set<number>;
+}
+
+interface InteractionsPanelProps {
+  /** The current variant being displayed */
+  variant: FragmentVariant | null;
+  /** Selector for the preview container element */
+  previewSelector?: string;
+  /** Key that changes when the preview updates */
+  previewKey?: number;
+  /** Args currently being used for the preview */
+  currentArgs?: Record<string, unknown>;
+}
+
+// Status color helpers
+const STATUS_COLORS: Record<string, { bg: string; border: string; text: string; icon: string }> = {
+  running: {
+    bg: 'color-mix(in srgb, #3b82f6 8%, transparent)',
+    border: '1px solid color-mix(in srgb, #3b82f6 25%, transparent)',
+    text: '#1d4ed8',
+    icon: '#2563eb',
+  },
+  paused: {
+    bg: 'color-mix(in srgb, #f97316 8%, transparent)',
+    border: '1px solid color-mix(in srgb, #f97316 25%, transparent)',
+    text: '#c2410c',
+    icon: '#ea580c',
+  },
+  passed: {
+    bg: 'color-mix(in srgb, #22c55e 8%, transparent)',
+    border: '1px solid color-mix(in srgb, #22c55e 25%, transparent)',
+    text: '#15803d',
+    icon: '#16a34a',
+  },
+  failed: {
+    bg: 'color-mix(in srgb, #ef4444 8%, transparent)',
+    border: '1px solid color-mix(in srgb, #ef4444 25%, transparent)',
+    text: '#b91c1c',
+    icon: '#dc2626',
+  },
+  pending: {
+    bg: 'var(--bg-secondary)',
+    border: '1px solid var(--border)',
+    text: 'var(--text-muted)',
+    icon: 'var(--text-muted)',
+  },
+};
+
+function getStatusColors(status: string) {
+  return STATUS_COLORS[status] || STATUS_COLORS.pending;
+}
+
+export function InteractionsPanel({
+  variant,
+  previewSelector = '[data-preview-container="true"]',
+  previewKey = 0,
+  currentArgs = {},
+}: InteractionsPanelProps) {
+  const [result, setResult] = useState<InteractionResult>({
+    status: "idle",
+    steps: [],
+  });
+  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set());
+  const [debugState, setDebugState] = useState<DebugState>({
+    mode: "normal",
+    isPaused: false,
+    currentStepIndex: -1,
+    breakpoints: new Set(),
+  });
+  const [hoveredBreakpoint, setHoveredBreakpoint] = useState<number | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const resumeResolverRef = useRef<(() => void) | null>(null);
+
+  // Reset state when variant changes
+  useEffect(() => {
+    setResult({ status: "idle", steps: [] });
+    setExpandedSteps(new Set());
+    setDebugState((prev) => ({
+      ...prev,
+      isPaused: false,
+      currentStepIndex: -1,
+    }));
+  }, [variant?.name, previewKey]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle if this panel is focused or no specific element is focused
+      if (document.activeElement && document.activeElement.tagName !== 'BODY') {
+        const isInteractionsPanelFocused = (document.activeElement as HTMLElement).closest('[data-interactions-panel]');
+        if (!isInteractionsPanelFocused) return;
+      }
+
+      switch (e.key) {
+        case 'F5':
+          e.preventDefault();
+          if (debugState.mode === 'debug' && !result.status.includes('running')) {
+            runInteractions(true);
+          }
+          break;
+        case 'F8':
+          e.preventDefault();
+          if (debugState.isPaused) {
+            handleResume();
+          }
+          break;
+        case 'F9':
+          e.preventDefault();
+          if (debugState.currentStepIndex >= 0) {
+            toggleBreakpoint(debugState.currentStepIndex);
+          }
+          break;
+        case 'F10':
+          e.preventDefault();
+          if (debugState.isPaused) {
+            handleStepOver();
+          }
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [debugState, result.status]);
+
+  const hasPlayFunction = variant?.hasPlayFunction && variant?.play;
+
+  const toggleBreakpoint = (index: number) => {
+    setDebugState((prev) => {
+      const next = new Set(prev.breakpoints);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return { ...prev, breakpoints: next };
+    });
+  };
+
+  const toggleDebugMode = () => {
+    setDebugState((prev) => ({
+      ...prev,
+      mode: prev.mode === 'normal' ? 'debug' : 'normal',
+    }));
+  };
+
+  const handleResume = () => {
+    if (resumeResolverRef.current) {
+      resumeResolverRef.current();
+      resumeResolverRef.current = null;
+    }
+    setDebugState((prev) => ({ ...prev, isPaused: false }));
+    setResult((prev) => ({ ...prev, status: 'running' }));
+  };
+
+  const handleStepOver = () => {
+    // Mark current step to not pause, then resume
+    if (resumeResolverRef.current) {
+      resumeResolverRef.current();
+      resumeResolverRef.current = null;
+    }
+    setDebugState((prev) => ({ ...prev, isPaused: false }));
+    setResult((prev) => ({ ...prev, status: 'running' }));
+  };
+
+  // Run the play function
+  const runInteractions = useCallback(async (withDebugger = false) => {
+    if (!variant?.play) return;
+
+    // Cancel any existing run
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
+    const startTime = performance.now();
+    const steps: StepResult[] = [];
+    const isDebugMode = withDebugger || debugState.mode === 'debug';
+    let stepIndex = 0;
+
+    setResult({
+      status: "running",
+      steps: [],
+      startTime,
+    });
+
+    setDebugState((prev) => ({
+      ...prev,
+      isPaused: false,
+      currentStepIndex: -1,
+    }));
+
+    // Find the preview container
+    const canvasElement = document.querySelector(previewSelector) as HTMLElement;
+    if (!canvasElement) {
+      setResult({
+        status: "failed",
+        steps: [],
+        error: `Preview container not found: ${previewSelector}`,
+        duration: performance.now() - startTime,
+      });
+      return;
+    }
+
+    // Create the step function that tracks execution
+    const step = async (name: string, fn: () => Promise<void>): Promise<void> => {
+      const currentIndex = stepIndex++;
+      const stepStartTime = performance.now();
+
+      // Check for breakpoint or debug mode pause
+      if (isDebugMode && (debugState.breakpoints.has(currentIndex) || currentIndex === 0)) {
+        // Pause at breakpoint
+        steps.push({ name, status: "paused" });
+        setResult((prev) => ({
+          ...prev,
+          status: "paused",
+          steps: [...steps],
+        }));
+        setDebugState((prev) => ({
+          ...prev,
+          isPaused: true,
+          currentStepIndex: currentIndex,
+        }));
+
+        // Wait for resume
+        await new Promise<void>((resolve) => {
+          resumeResolverRef.current = resolve;
+        });
+
+        // Update to running
+        steps[currentIndex] = { name, status: "running" };
+        setResult((prev) => ({
+          ...prev,
+          status: "running",
+          steps: [...steps],
+        }));
+      } else {
+        // Add step as running
+        steps.push({ name, status: "running" });
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+      }
+
+      setDebugState((prev) => ({
+        ...prev,
+        currentStepIndex: currentIndex,
+      }));
+
+      try {
+        await fn();
+        steps[currentIndex] = {
+          name,
+          status: "passed",
+          duration: performance.now() - stepStartTime,
+        };
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        steps[currentIndex] = {
+          name,
+          status: "failed",
+          error: errorMessage,
+          duration: performance.now() - stepStartTime,
+        };
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+        throw error; // Re-throw to stop execution
+      }
+
+      // In debug mode, pause after each step if stepping
+      if (isDebugMode && debugState.breakpoints.has(currentIndex + 1)) {
+        setResult((prev) => ({
+          ...prev,
+          status: "paused",
+        }));
+        setDebugState((prev) => ({
+          ...prev,
+          isPaused: true,
+        }));
+
+        await new Promise<void>((resolve) => {
+          resumeResolverRef.current = resolve;
+        });
+      }
+    };
+
+    // Create the context for the play function
+    const context: PlayFunctionContext = {
+      canvasElement,
+      args: currentArgs,
+      step,
+    };
+
+    try {
+      await variant.play(context);
+
+      // If no explicit steps were defined, the whole play function is one step
+      if (steps.length === 0) {
+        steps.push({
+          name: "Play function",
+          status: "passed",
+          duration: performance.now() - startTime,
+        });
+      }
+
+      setResult({
+        status: "passed",
+        steps: [...steps],
+        duration: performance.now() - startTime,
+      });
+
+      setDebugState((prev) => ({
+        ...prev,
+        isPaused: false,
+        currentStepIndex: -1,
+      }));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+
+      // If no steps failed explicitly, mark as failed at top level
+      if (steps.length === 0 || !steps.some((s) => s.status === "failed")) {
+        steps.push({
+          name: "Play function",
+          status: "failed",
+          error: errorMessage,
+          duration: performance.now() - startTime,
+        });
+      }
+
+      setResult({
+        status: "failed",
+        steps: [...steps],
+        error: errorMessage,
+        duration: performance.now() - startTime,
+      });
+
+      // Auto-expand failed steps
+      const failedIndices = steps
+        .map((s, i) => (s.status === "failed" ? i : -1))
+        .filter((i) => i >= 0);
+      setExpandedSteps(new Set(failedIndices));
+
+      setDebugState((prev) => ({
+        ...prev,
+        isPaused: false,
+        currentStepIndex: -1,
+      }));
+    }
+  }, [variant, previewSelector, currentArgs, debugState.mode, debugState.breakpoints]);
+
+  const toggleStep = (index: number) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const formatDuration = (ms?: number) => {
+    if (ms === undefined) return "";
+    if (ms < 1000) return `${Math.round(ms)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  // Empty state for no play function
+  const emptyConfig = !hasPlayFunction ? {
+    icon: <Play size={24} weight="regular" style={{ color: 'var(--text-tertiary)' }} />,
+    title: "No interactions defined",
+    description: (
+      <>
+        This variant doesn't have a play function. Add a <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>play</Box> function to your Storybook story to enable interaction testing.
+      </>
+    ),
+    action: (
+      <CodeBlock language="typescript">{`export const Default = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Click the button', async () => {
+      await userEvent.click(
+        canvas.getByRole('button')
+      );
+    });
+
+    await expect(
+      canvas.getByText('Clicked!')
+    ).toBeInTheDocument();
+  }
+};`}</CodeBlock>
+    ),
+  } : undefined;
+
+  // Toolbar with duration, debug controls, and run button
+  const toolbar = hasPlayFunction ? (
+    <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
+      <Stack direction="row" align="center" gap="sm">
+        {result.duration !== undefined && (
+          <Text size="xs" color="tertiary">{formatDuration(result.duration)}</Text>
+        )}
+      </Stack>
+      <Stack direction="row" align="center" gap="sm">
+        {/* Debug mode toggle */}
+        <Button
+          onClick={toggleDebugMode}
+          variant="ghost"
+          size="sm"
+          title={debugState.mode === 'debug' ? "Exit debug mode" : "Enable debug mode (F5 to run with debugger)"}
+          style={{
+            color: debugState.mode === 'debug' ? '#ea580c' : undefined,
+            background: debugState.mode === 'debug' ? 'color-mix(in srgb, #f97316 10%, transparent)' : undefined,
+          }}
+        >
+          <BugIcon style={{ width: 16, height: 16 }} />
+        </Button>
+
+        {/* Debug controls when paused */}
+        {debugState.isPaused && (
+          <>
+            <Button
+              onClick={handleResume}
+              variant="ghost"
+              size="sm"
+              title="Continue (F8)"
+              style={{ color: '#16a34a' }}
+            >
+              <ContinueIcon style={{ width: 16, height: 16 }} />
+            </Button>
+            <Button
+              onClick={handleStepOver}
+              variant="ghost"
+              size="sm"
+              title="Step over (F10)"
+              style={{ color: '#2563eb' }}
+            >
+              <StepOverIcon style={{ width: 16, height: 16 }} />
+            </Button>
+          </>
+        )}
+
+        <Button
+          onClick={() => runInteractions(debugState.mode === 'debug')}
+          disabled={result.status === "running"}
+          variant={result.status === "running" || result.status === "paused" ? "outline" : "solid"}
+          size="sm"
+          style={
+            result.status === "running" || result.status === "paused"
+              ? { background: 'var(--bg-secondary)', color: 'var(--text-muted)', cursor: 'not-allowed' }
+              : { background: 'var(--color-accent)', color: '#fff' }
+          }
+        >
+          {result.status === "running" ? (
+            <>
+              <LoadingIcon style={{ width: 16, height: 16, animation: 'spin 1s linear infinite' }} />
+              Running...
+            </>
+          ) : result.status === "paused" ? (
+            <>
+              <PauseIcon style={{ width: 16, height: 16 }} />
+              Paused
+            </>
+          ) : result.status === "idle" ? (
+            <>
+              <PlayIcon style={{ width: 16, height: 16 }} />
+              {debugState.mode === 'debug' ? 'Debug' : 'Run'}
+            </>
+          ) : (
+            <>
+              <RefreshIcon style={{ width: 16, height: 16 }} />
+              Rerun
+            </>
+          )}
+        </Button>
+      </Stack>
+    </Stack>
+  ) : undefined;
+
+  return (
+    <div data-interactions-panel style={{ height: '100%' }}>
+      <PanelShell toolbar={toolbar} empty={emptyConfig} bodyPadding="none">
+        {result.status === "idle" ? (
+          <Box padding="lg" style={{ textAlign: 'center' }}>
+            <Text size="sm" color="tertiary">
+              Click "Run" to execute the interaction tests
+            </Text>
+          </Box>
+        ) : (
+          <Stack direction="column" gap="sm" style={{ padding: '16px' }}>
+            {/* Overall status */}
+            {(() => {
+              const colors = getStatusColors(result.status);
+              const alertVariant = result.status === 'passed' ? 'success'
+                : result.status === 'failed' ? 'error'
+                : result.status === 'paused' ? 'warning'
+                : 'info';
+              return (
+                <Alert variant={alertVariant}>
+                  <Alert.Body>
+                    <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
+                      <Stack direction="row" align="center" gap="sm">
+                        {result.status === "running" && (
+                          <LoadingIcon style={{ width: 20, height: 20, animation: 'spin 1s linear infinite', color: colors.icon }} />
+                        )}
+                        {result.status === "paused" && (
+                          <PauseIcon style={{ width: 20, height: 20, color: colors.icon }} />
+                        )}
+                        {result.status === "passed" && (
+                          <CheckIcon style={{ width: 20, height: 20, color: colors.icon }} />
+                        )}
+                        {result.status === "failed" && (
+                          <XIcon style={{ width: 20, height: 20, color: colors.icon }} />
+                        )}
+                        <Text weight="medium" style={{ color: colors.text }}>
+                          {result.status === "running" && "Running interactions..."}
+                          {result.status === "paused" && "Paused at breakpoint"}
+                          {result.status === "passed" && "All interactions passed"}
+                          {result.status === "failed" && "Interactions failed"}
+                        </Text>
+                      </Stack>
+                      <Text size="xs" color="tertiary">
+                        {result.steps.filter((s) => s.status === "passed").length}/{result.steps.length} steps
+                      </Text>
+                    </Stack>
+                  </Alert.Body>
+                </Alert>
+              );
+            })()}
+
+            {/* Steps */}
+            {result.steps.length > 0 && (
+              <Stack direction="column" gap="xs" style={{ marginTop: '16px' }}>
+                <Stack direction="row" align="center" justify="between" style={{ marginBottom: '8px' }}>
+                  <Text size="xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    Steps
+                  </Text>
+                  {debugState.mode === 'debug' && (
+                    <Text size="xs" style={{ color: '#ea580c' }}>
+                      Debug mode - click gutter to set breakpoints
+                    </Text>
+                  )}
+                </Stack>
+                {result.steps.map((step, index) => {
+                  const stepColors = getStatusColors(step.status);
+                  return (
+                    <div
+                      key={index}
+                      style={{
+                        borderRadius: '8px',
+                        border: step.status === 'passed' ? '1px solid var(--border)' : stepColors.border,
+                        transition: 'background 0.15s',
+                        display: 'flex',
+                        background: step.status === 'passed' ? 'var(--bg-primary)' : stepColors.bg,
+                        outline: debugState.currentStepIndex === index ? '2px solid #f97316' : undefined,
+                        outlineOffset: debugState.currentStepIndex === index ? '0px' : undefined,
+                      }}
+                    >
+                      {/* Breakpoint gutter - only show in debug mode */}
+                      {debugState.mode === 'debug' && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleBreakpoint(index);
+                          }}
+                          style={{
+                            width: '24px',
+                            flexShrink: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            border: 'none',
+                            borderRight: '1px solid var(--border)',
+                            background: hoveredBreakpoint === index ? 'var(--bg-hover)' : 'transparent',
+                            transition: 'background 0.15s',
+                            cursor: 'pointer',
+                            padding: 0,
+                          }}
+                          onMouseEnter={() => setHoveredBreakpoint(index)}
+                          onMouseLeave={() => setHoveredBreakpoint(null)}
+                          title={debugState.breakpoints.has(index) ? "Remove breakpoint (F9)" : "Add breakpoint (F9)"}
+                        >
+                          {debugState.breakpoints.has(index) ? (
+                            <BreakpointIcon style={{ width: 12, height: 12, color: '#ef4444' }} />
+                          ) : (
+                            <BreakpointEmptyIcon style={{ width: 12, height: 12, color: hoveredBreakpoint === index ? '#f87171' : 'var(--text-muted)' }} />
+                          )}
+                        </button>
+                      )}
+
+                      <div style={{ flex: 1 }}>
+                        <button
+                          onClick={() => step.error && toggleStep(index)}
+                          style={{
+                            width: '100%',
+                            padding: '12px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                            textAlign: 'left',
+                            cursor: step.error ? 'pointer' : 'default',
+                            border: 'none',
+                            background: 'transparent',
+                            color: 'inherit',
+                          }}
+                          disabled={!step.error}
+                        >
+                          {/* Current step indicator */}
+                          {debugState.mode === 'debug' && debugState.currentStepIndex === index && (
+                            <span style={{ color: '#f97316', fontWeight: 700 }}>&#9654;</span>
+                          )}
+
+                          {/* Status icon */}
+                          {step.status === "pending" && (
+                            <div style={{ width: '16px', height: '16px', borderRadius: '9999px', border: '2px solid var(--text-muted)' }} />
+                          )}
+                          {step.status === "running" && (
+                            <LoadingIcon style={{ width: 16, height: 16, animation: 'spin 1s linear infinite', color: stepColors.icon }} />
+                          )}
+                          {step.status === "paused" && (
+                            <PauseIcon style={{ width: 16, height: 16, color: stepColors.icon }} />
+                          )}
+                          {step.status === "passed" && (
+                            <CheckIcon style={{ width: 16, height: 16, color: stepColors.icon }} />
+                          )}
+                          {step.status === "failed" && (
+                            <XIcon style={{ width: 16, height: 16, color: stepColors.icon }} />
+                          )}
+
+                          {/* Step name */}
+                          <Text size="sm" style={{ flex: 1, color: stepColors.text }}>
+                            {step.name}
+                          </Text>
+
+                          {/* Duration */}
+                          {step.duration !== undefined && (
+                            <Text size="xs" color="tertiary">
+                              {formatDuration(step.duration)}
+                            </Text>
+                          )}
+
+                          {/* Expand icon for errors */}
+                          {step.error && (
+                            expandedSteps.has(index) ? (
+                              <ChevronDownIcon style={{ width: 16, height: 16, color: 'var(--text-muted)' }} />
+                            ) : (
+                              <ChevronRightIcon style={{ width: 16, height: 16, color: 'var(--text-muted)' }} />
+                            )
+                          )}
+                        </button>
+
+                        {/* Error details */}
+                        {step.error && expandedSteps.has(index) && (
+                          <div style={{ padding: '0 12px 12px 36px' }}>
+                            <pre style={{ fontSize: '12px', color: '#dc2626', background: 'color-mix(in srgb, #ef4444 10%, transparent)', padding: '8px', borderRadius: '4px', overflowX: 'auto', whiteSpace: 'pre-wrap' }}>
+                              {step.error}
+                            </pre>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </Stack>
+            )}
+
+            {/* Keyboard shortcuts help in debug mode */}
+            {debugState.mode === 'debug' && (
+              <Box padding="sm" background="secondary" rounded="lg" style={{ marginTop: '16px' }}>
+                <Text size="xs" weight="medium" color="tertiary" style={{ marginBottom: '4px' }}>Keyboard shortcuts:</Text>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
+                  <Text size="xs" color="tertiary"><Badge size="sm" variant="default">F5</Badge> Run with debugger</Text>
+                  <Text size="xs" color="tertiary"><Badge size="sm" variant="default">F8</Badge> Continue</Text>
+                  <Text size="xs" color="tertiary"><Badge size="sm" variant="default">F9</Badge> Toggle breakpoint</Text>
+                  <Text size="xs" color="tertiary"><Badge size="sm" variant="default">F10</Badge> Step over</Text>
+                </div>
+              </Box>
+            )}
+
+            {/* Top-level error (if no steps failed) */}
+            {result.error && !result.steps.some((s) => s.status === "failed") && (
+              <Box style={{ marginTop: '16px' }}>
+                <Text size="xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '8px' }}>
+                  Error
+                </Text>
+                <pre style={{ fontSize: '12px', color: '#dc2626', background: 'color-mix(in srgb, #ef4444 10%, transparent)', padding: '12px', borderRadius: '4px', overflowX: 'auto', whiteSpace: 'pre-wrap' }}>
+                  {result.error}
+                </pre>
+              </Box>
+            )}
+          </Stack>
+        )}
+      </PanelShell>
+    </div>
+  );
+}