All files / web/src/components/practice LLMDebugPanel.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

/**
 * LLMDebugPanel - Debug panel showing LLM metadata for parsed worksheets
 *
 * Shows:
 * - Provider and model info
 * - Token usage
 * - Buttons to view prompt, response, and schema
 */

import type { ReactNode } from 'react'
import { css } from '../../../styled-system/css'
import type { LLMMetadata } from './PhotoViewerEditor'

export interface LLMDebugPanelProps {
  /** LLM metadata */
  llm: LLMMetadata
  /** Callback to open debug content in modal */
  onViewContent: (title: string, content: string, contentType: 'text' | 'json') => void
}

export function LLMDebugPanel({ llm, onViewContent }: LLMDebugPanelProps): ReactNode {
  return (
    <div
      data-element="debug-panel"
      className={css({
        borderTop: '1px solid',
        borderColor: 'gray.700',
        padding: 3,
        backgroundColor: 'gray.900',
      })}
    >
      <h3
        className={css({
          fontSize: 'xs',
          fontWeight: 'semibold',
          color: 'gray.500',
          textTransform: 'uppercase',
          letterSpacing: 'wide',
          marginBottom: 2,
        })}
      >
        LLM Debug Info
      </h3>
      <div
        className={css({
          display: 'grid',
          gridTemplateColumns: 'auto 1fr',
          gap: 1,
          fontSize: 'xs',
          fontFamily: 'mono',
        })}
      >
        <span className={css({ color: 'gray.500' })}>Provider:</span>
        <span className={css({ color: 'gray.300' })}>{llm.provider ?? 'unknown'}</span>

        <span className={css({ color: 'gray.500' })}>Model:</span>
        <span className={css({ color: 'gray.300' })}>{llm.model ?? 'unknown'}</span>

        <span className={css({ color: 'gray.500' })}>Image:</span>
        <span className={css({ color: 'gray.300' })}>{llm.imageSource ?? 'cropped'} ✓</span>

        <span className={css({ color: 'gray.500' })}>Attempts:</span>
        <span className={css({ color: 'gray.300' })}>{llm.attempts ?? 1}</span>

        <span className={css({ color: 'gray.500' })}>Tokens:</span>
        <span className={css({ color: 'gray.300' })}>
          {llm.usage?.totalTokens ?? '?'} ({llm.usage?.promptTokens ?? '?'} in /{' '}
          {llm.usage?.completionTokens ?? '?'} out)
        </span>
      </div>

      {/* Debug content buttons */}
      <div
        className={css({
          display: 'flex',
          gap: 2,
          marginTop: 2,
          borderTop: '1px solid',
          borderColor: 'gray.800',
          paddingTop: 2,
        })}
      >
        {llm.promptUsed && (
          <button
            type="button"
            onClick={() => onViewContent('LLM Prompt', llm.promptUsed!, 'text')}
            className={css({
              fontSize: 'xs',
              color: 'gray.400',
              backgroundColor: 'gray.800',
              border: 'none',
              borderRadius: 'sm',
              padding: '0.25rem 0.5rem',
              cursor: 'pointer',
              _hover: { backgroundColor: 'gray.700', color: 'white' },
            })}
          >
            View Prompt ({llm.promptUsed.length.toLocaleString()} chars)
          </button>
        )}
        {llm.rawResponse && (
          <button
            type="button"
            onClick={() => onViewContent('Raw LLM Response', llm.rawResponse!, 'json')}
            className={css({
              fontSize: 'xs',
              color: 'gray.400',
              backgroundColor: 'gray.800',
              border: 'none',
              borderRadius: 'sm',
              padding: '0.25rem 0.5rem',
              cursor: 'pointer',
              _hover: { backgroundColor: 'gray.700', color: 'white' },
            })}
          >
            View Response ({llm.rawResponse.length.toLocaleString()} chars)
          </button>
        )}
        {llm.jsonSchema && (
          <button
            type="button"
            onClick={() =>
              onViewContent('JSON Schema (with field descriptions)', llm.jsonSchema!, 'json')
            }
            className={css({
              fontSize: 'xs',
              color: 'gray.400',
              backgroundColor: 'gray.800',
              border: 'none',
              borderRadius: 'sm',
              padding: '0.25rem 0.5rem',
              cursor: 'pointer',
              _hover: { backgroundColor: 'gray.700', color: 'white' },
            })}
          >
            View Schema ({llm.jsonSchema.length.toLocaleString()} chars)
          </button>
        )}
      </div>
    </div>
  )
}

export default LLMDebugPanel