All files / web/src/components/practice SongFailureCard.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
148
149
150
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { css } from '../../../styled-system/css'
import { classifySongFailure } from '@/lib/session-song/classify-failure'
import type { SessionSongFailureKind } from '@/db/schema/session-songs'

interface SongFailureCardProps {
  /** Classified failure kind from the server. Null for legacy rows without a classification. */
  failureKind: SessionSongFailureKind | null
  /** Raw provider error — only present when the viewer is the account owner or admin. */
  errorDetail: string | null
  /** Whether to show the owner-actionable second line. */
  viewerIsOwner: boolean
}

/**
 * Soft-styled card shown in place of the song player when generation failed.
 *
 * Always shows a kid-safe top line. When the viewer owns the account (or is an
 * admin), an expandable second block surfaces the underlying problem and a
 * direct remediation link.
 */
export function SongFailureCard({
  failureKind,
  errorDetail,
  viewerIsOwner,
}: SongFailureCardProps) {
  // Use the classifier to rebuild the messages from the kind. We also pass any
  // raw error string so the classifier's defaults match what the server stored.
  const classified = classifySongFailure(errorDetail ?? failureKind ?? 'unknown')
  const showOwnerBlock = viewerIsOwner

  return (
    <div
      data-component="song-failure-card"
      data-failure-kind={failureKind ?? 'unknown'}
      className={css({
        mx: 'auto',
        maxW: '480px',
        p: 4,
        borderRadius: 'xl',
        bg: 'amber.50',
        border: '1px solid',
        borderColor: 'amber.200',
        _dark: {
          bg: 'amber.900/20',
          borderColor: 'amber.700/40',
        },
      })}
    >
      <div
        className={css({
          display: 'flex',
          alignItems: 'center',
          gap: 3,
        })}
      >
        <div
          aria-hidden
          className={css({
            fontSize: '2xl',
            lineHeight: 1,
            flexShrink: 0,
          })}
        >
          🎵
        </div>
        <p
          className={css({
            fontSize: 'md',
            color: 'amber.900',
            _dark: { color: 'amber.100' },
            margin: 0,
          })}
        >
          {classified.userMessage}
        </p>
      </div>

      {showOwnerBlock && (
        <div
          data-element="owner-remediation"
          className={css({
            mt: 3,
            pt: 3,
            borderTop: '1px solid',
            borderColor: 'amber.200',
            fontSize: 'sm',
            color: 'amber.800',
            _dark: { borderColor: 'amber.700/40', color: 'amber.200' },
          })}
        >
          <p className={css({ margin: 0 })}>{classified.ownerMessage}</p>
          {classified.remediation && (
            <a
              data-action="song-failure-remediation"
              href={classified.remediation.href}
              target="_blank"
              rel="noopener noreferrer"
              className={css({
                display: 'inline-block',
                mt: 2,
                px: 3,
                py: 1,
                borderRadius: 'md',
                bg: 'amber.600',
                color: 'white',
                textDecoration: 'none',
                fontSize: 'sm',
                fontWeight: 'medium',
                _hover: { bg: 'amber.700' },
              })}
            >
              {classified.remediation.label} →
            </a>
          )}
          {errorDetail && (
            <details
              data-element="error-detail"
              className={css({
                mt: 2,
                fontSize: 'xs',
                color: 'amber.700',
                _dark: { color: 'amber.300' },
              })}
            >
              <summary className={css({ cursor: 'pointer' })}>Provider error</summary>
              <code
                className={css({
                  display: 'block',
                  mt: 1,
                  p: 2,
                  borderRadius: 'sm',
                  bg: 'amber.100',
                  _dark: { bg: 'amber.900/40' },
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  fontSize: 'xs',
                })}
              >
                {errorDetail}
              </code>
            </details>
          )}
        </div>
      )}
    </div>
  )
}