@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/InteractionsPanel.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from "react";
-import clsx from "clsx";
+import { Button, Stack, Text, Badge, EmptyState, CodeBlock, Alert } from "@fragments/ui";
 import type { PlayFunction, PlayFunctionContext, SegmentVariant } from "../../core/index.js";
 import {
   PlayIcon,
@@ -63,6 +63,44 @@ interface InteractionsPanelProps {
   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"]',
@@ -80,6 +118,7 @@ export function InteractionsPanel({
     currentStepIndex: -1,
     breakpoints: new Set(),
   });
+  const [hoveredBreakpoint, setHoveredBreakpoint] = useState<number | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
   const resumeResolverRef = useRef<(() => void) | null>(null);
 
@@ -388,27 +427,24 @@ export function InteractionsPanel({
   // No play function available
   if (!hasPlayFunction) {
     return (
-      <div className="h-full flex flex-col">
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
-            <PlayIcon className="w-4 h-4" />
-            Interactions
-          </h3>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+          <Stack direction="row" align="center" gap="sm">
+            <PlayIcon style={{ width: 16, height: 16 }} />
+            <Text weight="medium">Interactions</Text>
+          </Stack>
         </div>
-        <div className="flex-1 flex items-center justify-center p-8 text-center">
-          <div className="max-w-md">
-            <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
-              <PlayIcon className="w-6 h-6 text-gray-400" />
-            </div>
-            <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">
-              No interactions defined
-            </h4>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
-              This variant doesn't have a play function. Add a <code className="px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs">play</code> function to your Storybook story to enable interaction testing.
-            </p>
-            <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-left">
-              <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
-{`export const Default = {
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+          <EmptyState>
+            <EmptyState.Icon>
+              <PlayIcon style={{ width: 24, height: 24 }} />
+            </EmptyState.Icon>
+            <EmptyState.Title>No interactions defined</EmptyState.Title>
+            <EmptyState.Description>
+              This variant doesn't have a play function. Add a <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>play</code> function to your Storybook story to enable interaction testing.
+            </EmptyState.Description>
+            <div style={{ marginTop: '16px', width: '100%' }}>
+              <CodeBlock language="typescript">{`export const Default = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
@@ -422,297 +458,314 @@ export function InteractionsPanel({
       canvas.getByText('Clicked!')
     ).toBeInTheDocument();
   }
-};`}
-              </pre>
+};`}</CodeBlock>
             </div>
-          </div>
+          </EmptyState>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-full flex flex-col" data-interactions-panel>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }} data-interactions-panel>
       {/* Header */}
-      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
-        <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
-          <PlayIcon className="w-4 h-4" />
-          Interactions
-        </h3>
-        <div className="flex items-center gap-2">
-          {result.duration !== undefined && (
-            <span className="text-xs text-gray-500 dark:text-gray-400">
-              {formatDuration(result.duration)}
-            </span>
-          )}
-
-          {/* Debug mode toggle */}
-          <button
-            onClick={toggleDebugMode}
-            className={clsx(
-              "p-1.5 rounded-md transition-colors",
-              debugState.mode === 'debug'
-                ? "bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400"
-                : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+      <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+        <Stack direction="row" align="center" justify="between">
+          <Stack direction="row" align="center" gap="sm">
+            <PlayIcon style={{ width: 16, height: 16 }} />
+            <Text weight="medium">Interactions</Text>
+          </Stack>
+          <Stack direction="row" align="center" gap="sm">
+            {result.duration !== undefined && (
+              <Text size="xs" color="tertiary">{formatDuration(result.duration)}</Text>
             )}
-            title={debugState.mode === 'debug' ? "Exit debug mode" : "Enable debug mode (F5 to run with debugger)"}
-          >
-            <BugIcon className="w-4 h-4" />
-          </button>
-
-          {/* Debug controls when paused */}
-          {debugState.isPaused && (
-            <>
-              <button
-                onClick={handleResume}
-                className="p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-md transition-colors"
-                title="Continue (F8)"
-              >
-                <ContinueIcon className="w-4 h-4" />
-              </button>
-              <button
-                onClick={handleStepOver}
-                className="p-1.5 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors"
-                title="Step over (F10)"
-              >
-                <StepOverIcon className="w-4 h-4" />
-              </button>
-            </>
-          )}
-
-          <button
-            onClick={() => runInteractions(debugState.mode === 'debug')}
-            disabled={result.status === "running"}
-            className={clsx(
-              "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
-              result.status === "running" || result.status === "paused"
-                ? "bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed"
-                : "bg-blue-600 hover:bg-blue-700 text-white"
-            )}
-          >
-            {result.status === "running" ? (
-              <>
-                <LoadingIcon className="w-4 h-4 animate-spin" />
-                Running...
-              </>
-            ) : result.status === "paused" ? (
-              <>
-                <PauseIcon className="w-4 h-4" />
-                Paused
-              </>
-            ) : result.status === "idle" ? (
-              <>
-                <PlayIcon className="w-4 h-4" />
-                {debugState.mode === 'debug' ? 'Debug' : 'Run'}
-              </>
-            ) : (
+
+            {/* 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 && (
               <>
-                <RefreshIcon className="w-4 h-4" />
-                Rerun
+                <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>
-        </div>
+
+            <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>
       </div>
 
       {/* Results */}
-      <div className="flex-1 overflow-y-auto">
+      <div style={{ flex: 1, overflowY: 'auto' }}>
         {result.status === "idle" ? (
-          <div className="p-8 text-center">
-            <p className="text-sm text-gray-500 dark:text-gray-400">
+          <div style={{ padding: '32px', textAlign: 'center' }}>
+            <Text size="sm" color="tertiary">
               Click "Run" to execute the interaction tests
-            </p>
+            </Text>
           </div>
         ) : (
-          <div className="p-4 space-y-2">
+          <Stack direction="column" gap="sm" style={{ padding: '16px' }}>
             {/* Overall status */}
-            <div
-              className={clsx(
-                "p-3 rounded-lg flex items-center justify-between",
-                result.status === "running" && "bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800",
-                result.status === "paused" && "bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800",
-                result.status === "passed" && "bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800",
-                result.status === "failed" && "bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800"
-              )}
-            >
-              <div className="flex items-center gap-2">
-                {result.status === "running" && (
-                  <LoadingIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" />
-                )}
-                {result.status === "paused" && (
-                  <PauseIcon className="w-5 h-5 text-orange-600 dark:text-orange-400" />
-                )}
-                {result.status === "passed" && (
-                  <CheckIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
-                )}
-                {result.status === "failed" && (
-                  <XIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
-                )}
-                <span
-                  className={clsx(
-                    "font-medium",
-                    result.status === "running" && "text-blue-700 dark:text-blue-300",
-                    result.status === "paused" && "text-orange-700 dark:text-orange-300",
-                    result.status === "passed" && "text-green-700 dark:text-green-300",
-                    result.status === "failed" && "text-red-700 dark:text-red-300"
-                  )}
-                >
-                  {result.status === "running" && "Running interactions..."}
-                  {result.status === "paused" && "Paused at breakpoint"}
-                  {result.status === "passed" && "All interactions passed"}
-                  {result.status === "failed" && "Interactions failed"}
-                </span>
-              </div>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {result.steps.filter((s) => s.status === "passed").length}/{result.steps.length} steps
-              </span>
-            </div>
+            {(() => {
+              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 && (
-              <div className="mt-4 space-y-1">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+              <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
-                  </h4>
+                  </Text>
                   {debugState.mode === 'debug' && (
-                    <span className="text-xs text-orange-600 dark:text-orange-400">
+                    <Text size="xs" style={{ color: '#ea580c' }}>
                       Debug mode - click gutter to set breakpoints
-                    </span>
+                    </Text>
                   )}
-                </div>
-                {result.steps.map((step, index) => (
-                  <div
-                    key={index}
-                    className={clsx(
-                      "rounded-lg border transition-colors flex",
-                      step.status === "pending" && "bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700",
-                      step.status === "running" && "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800",
-                      step.status === "paused" && "bg-orange-50 dark:bg-orange-950/30 border-orange-200 dark:border-orange-800",
-                      step.status === "passed" && "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
-                      step.status === "failed" && "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800",
-                      debugState.currentStepIndex === index && "ring-2 ring-orange-400 dark:ring-orange-500"
-                    )}
-                  >
-                    {/* Breakpoint gutter - only show in debug mode */}
-                    {debugState.mode === 'debug' && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleBreakpoint(index);
-                        }}
-                        className="w-6 flex-shrink-0 flex items-center justify-center border-r border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
-                        title={debugState.breakpoints.has(index) ? "Remove breakpoint (F9)" : "Add breakpoint (F9)"}
-                      >
-                        {debugState.breakpoints.has(index) ? (
-                          <BreakpointIcon className="w-3 h-3 text-red-500" />
-                        ) : (
-                          <BreakpointEmptyIcon className="w-3 h-3 text-gray-300 dark:text-gray-600 hover:text-red-400" />
-                        )}
-                      </button>
-                    )}
-
-                    <div className="flex-1">
-                      <button
-                        onClick={() => step.error && toggleStep(index)}
-                        className={clsx(
-                          "w-full p-3 flex items-center gap-2 text-left",
-                          step.error && "cursor-pointer"
-                        )}
-                        disabled={!step.error}
-                      >
-                        {/* Current step indicator */}
-                        {debugState.mode === 'debug' && debugState.currentStepIndex === index && (
-                          <span className="text-orange-500 font-bold">▶</span>
-                        )}
+                </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>
+                      )}
 
-                        {/* Status icon */}
-                        {step.status === "pending" && (
-                          <div className="w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600" />
-                        )}
-                        {step.status === "running" && (
-                          <LoadingIcon className="w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin" />
-                        )}
-                        {step.status === "paused" && (
-                          <PauseIcon className="w-4 h-4 text-orange-600 dark:text-orange-400" />
-                        )}
-                        {step.status === "passed" && (
-                          <CheckIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
-                        )}
-                        {step.status === "failed" && (
-                          <XIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
-                        )}
+                      <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>
+                          )}
 
-                        {/* Step name */}
-                        <span
-                          className={clsx(
-                            "flex-1 text-sm",
-                            step.status === "pending" && "text-gray-400 dark:text-gray-500",
-                            step.status === "running" && "text-blue-700 dark:text-blue-300",
-                            step.status === "paused" && "text-orange-700 dark:text-orange-300",
-                            step.status === "passed" && "text-gray-700 dark:text-gray-300",
-                            step.status === "failed" && "text-red-700 dark:text-red-300"
+                          {/* 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}
-                        </span>
-
-                        {/* Duration */}
-                        {step.duration !== undefined && (
-                          <span className="text-xs text-gray-400 dark:text-gray-500">
-                            {formatDuration(step.duration)}
-                          </span>
-                        )}
 
-                        {/* Expand icon for errors */}
-                        {step.error && (
-                          expandedSteps.has(index) ? (
-                            <ChevronDownIcon className="w-4 h-4 text-gray-400" />
-                          ) : (
-                            <ChevronRightIcon className="w-4 h-4 text-gray-400" />
-                          )
+                          {/* 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>
                         )}
-                      </button>
-
-                      {/* Error details */}
-                      {step.error && expandedSteps.has(index) && (
-                        <div className="px-3 pb-3 pl-9">
-                          <pre className="text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-950/50 p-2 rounded overflow-x-auto whitespace-pre-wrap">
-                            {step.error}
-                          </pre>
-                        </div>
-                      )}
+                      </div>
                     </div>
-                  </div>
-                ))}
-              </div>
+                  );
+                })}
+              </Stack>
             )}
 
             {/* Keyboard shortcuts help in debug mode */}
             {debugState.mode === 'debug' && (
-              <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-xs text-gray-500 dark:text-gray-400">
-                <div className="font-medium mb-1">Keyboard shortcuts:</div>
-                <div className="grid grid-cols-2 gap-1">
-                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F5</kbd> Run with debugger</span>
-                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F8</kbd> Continue</span>
-                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F9</kbd> Toggle breakpoint</span>
-                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F10</kbd> Step over</span>
+              <div style={{ marginTop: '16px', padding: '12px', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
+                <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>
               </div>
             )}
 
             {/* Top-level error (if no steps failed) */}
             {result.error && !result.steps.some((s) => s.status === "failed") && (
-              <div className="mt-4">
-                <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
+              <div style={{ marginTop: '16px' }}>
+                <Text size="xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '8px' }}>
                   Error
-                </h4>
-                <pre className="text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-950/50 p-3 rounded overflow-x-auto whitespace-pre-wrap">
+                </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>
               </div>
             )}
-          </div>
+          </Stack>
         )}
       </div>
     </div>