All files / web/src/components/tutorial TutorialDebugPanel.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '../../../styled-system/css'
import { stack } from '../../../styled-system/patterns'
import type { TutorialEvent } from '../../types/tutorial'

interface TutorialDebugPanelProps {
  currentStepIndex: number
  totalSteps: number
  currentValue: number
  targetValue: number
  isStepCompleted: boolean
  stepStartTime: number
  events: TutorialEvent[]
}

export function TutorialDebugPanel({
  currentStepIndex,
  totalSteps,
  currentValue,
  targetValue,
  isStepCompleted,
  stepStartTime,
  events,
}: TutorialDebugPanelProps) {
  return (
    <div
      className={css({
        w: '400px',
        borderLeft: '1px solid',
        borderColor: 'gray.200',
        bg: 'gray.50',
        p: 4,
      })}
    >
      <div className={stack({ gap: 4 })}>
        <div>
          <h3>Step Debug Info</h3>
          <div
            className={css({
              fontSize: 'sm',
              fontFamily: 'mono',
              bg: 'white',
              p: 2,
              borderRadius: 'md',
            })}
          >
            <div>
              Step: {currentStepIndex + 1}/{totalSteps}
            </div>
            <div>Value: {currentValue}</div>
            <div>Target: {targetValue}</div>
            <div>Completed: {isStepCompleted ? 'Yes' : 'No'}</div>
            <div>Time: {Math.round((Date.now() - stepStartTime) / 1000)}s</div>
          </div>
        </div>

        <div>
          <h3>Event Log</h3>
          <div
            className={css({
              bg: 'white',
              borderRadius: 'md',
              maxH: '200px',
              overflowY: 'auto',
            })}
          >
            {events.slice(-10).map((event, index) => (
              <div
                key={index}
                className={css({
                  p: 2,
                  borderBottom: '1px solid',
                  borderColor: 'gray.100',
                })}
              >
                <div className={css({ fontWeight: 'bold', color: 'blue.600' })}>{event.type}</div>
                <div className={css({ color: 'gray.600' })}>
                  {new Date(event.timestamp).toLocaleTimeString()}
                </div>
                {event.type === 'VALUE_CHANGED' && (
                  <div>
                    {event.oldValue} → {event.newValue}
                  </div>
                )}
                {event.type === 'ERROR_OCCURRED' && (
                  <div className={css({ color: 'red.600' })}>{event.error}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}