@fragments-sdk/cli 0.10.0 → 0.11.1

package/src/viewer/components/InteractionsPanel.tsx

@@ -1,757 +0,0 @@
-/**
- * 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 "../../core/index.js";
-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>
-  );
-}