New front end

frontend/src/App.jsx

@@ -208,6 +208,7 @@ function TutorApp({ currentUser, onLogout }) {
   const [audioDebug, setAudioDebug] = useState([])
   const [voiceProfiles, setVoiceProfiles] = useState([])
   const [selectedVoiceProfileId, setSelectedVoiceProfileId] = useState('')
+  const [progressPanelOpen, setProgressPanelOpen] = useState(false)
   const mediaRecorderRef = useRef(null)
   const mediaStreamRef = useRef(null)
   const recordedChunksRef = useRef([])
@@ -491,6 +492,7 @@ function TutorApp({ currentUser, onLogout }) {
     stopSpeechPlayback()
     deactivateAutoListening(false)
     setSessionActive(false)
+    setProgressPanelOpen(false)
     setCurrentInstruction('')
     setAssessment(null)
     setAssessmentAnswer('')
@@ -871,6 +873,151 @@ function TutorApp({ currentUser, onLogout }) {
     }
   }
 
+  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === 'assistant')
+  const lastUserMessage = [...messages].reverse().find((message) => message.role === 'user')
+  const lessonSummary = lastAssistantMessage?.content || 'Aucune ancienne seance trouvee pour le moment. Professeur TOP commencera par une reprise courte.'
+  const lastStudentWork = lastUserMessage?.content || 'Aucune reponse recente enregistree.'
+  const nextLessonAdvice = lessonFocus
+    ? `Conseil: reprendre ${lessonFocus.label}, puis lancer un exercice court pour equilibrer la progression.`
+    : 'Conseil: demarrer une seance pour laisser Professeur TOP choisir la prochaine lecon.'
+
+  if (isStudentUser) {
+    return (
+      <div className={`student-screen ${sessionActive ? 'lesson-active' : 'lesson-ready'}`}>
+        {!sessionActive ? (
+          <main className="student-home">
+            <section className="student-home-hero card">
+              <div>
+                <p className="eyebrow">Bonjour</p>
+                <h1>{selectedStudent?.first_name || currentUser.username}</h1>
+                <p className="muted">{selectedStudent?.grade || 'Classe non renseignee'}</p>
+              </div>
+              <div className="student-home-actions">
+                <button onClick={toggleSession} disabled={!selectedStudentId}>
+                  Demarrer la lecon
+                </button>
+                <button type="button" className="secondary-button" onClick={onLogout}>
+                  Deconnexion
+                </button>
+              </div>
+            </section>
+
+            <section className="student-home-grid">
+              <article className="student-info-card card">
+                <span className="stage-label">Derniere seance</span>
+                <p>{lessonSummary}</p>
+              </article>
+
+              <article className="student-info-card card">
+                <span className="stage-label">Derniere reponse</span>
+                <p>{lastStudentWork}</p>
+              </article>
+
+              <article className="student-info-card card">
+                <div className="today-card-head">
+                  <span className="stage-label">Avancement</span>
+                  <strong>{lessonPercent}%</strong>
+                </div>
+                <h2>{lessonFocus?.label || 'Programme a definir'}</h2>
+                <div className="progress-bar">
+                  <div className="progress-fill" style={{ width: `${lessonPercent}%` }} />
+                </div>
+              </article>
+
+              <article className="student-info-card card advice-card">
+                <span className="stage-label">Prochaine lecon conseillee</span>
+                <p>{nextLessonAdvice}</p>
+              </article>
+            </section>
+
+            {voiceStatus && <p className="muted voice-status visible-status">{voiceStatus}</p>}
+            {errorMessage && <p className="muted voice-status visible-status">{errorMessage}</p>}
+          </main>
+        ) : (
+          <main className="student-lesson">
+            <header className="lesson-topbar">
+              <Avatar speaking={speaking} />
+              <div>
+                <p className="eyebrow">Lecon en cours</p>
+                <h1>{lessonFocus?.label || 'Cours du jour'}</h1>
+              </div>
+              <div className="lesson-actions">
+                <button type="button" className="secondary-button" onClick={() => setProgressPanelOpen(true)}>
+                  Progression
+                </button>
+                <button type="button" className="secondary-button" onClick={endSession}>
+                  Fin
+                </button>
+              </div>
+            </header>
+
+            <section className="lesson-display">
+              <span className="stage-label">Professeur TOP</span>
+              {currentInstruction ? (
+                <p>{currentInstruction}</p>
+              ) : (
+                <p className="muted">Professeur TOP prepare la suite de la lecon.</p>
+              )}
+            </section>
+
+            <section className="student-transmission lesson-bubble">
+              <span>Ta reponse</span>
+              <p>{lastStudentTransmission || 'Dicte ou ecris ta reponse quand tu es pret.'}</p>
+            </section>
+
+            <form onSubmit={assessment ? submitAssessment : sendMessage} className="lesson-composer">
+              <input
+                value={assessment ? assessmentAnswer : input}
+                onChange={(event) =>
+                  assessment ? setAssessmentAnswer(event.target.value) : setInput(event.target.value)
+                }
+                placeholder={assessment ? 'Ta reponse au mini-test...' : 'Ecris ta reponse...'}
+              />
+              <select
+                value={selectedVoiceProfileId}
+                onChange={(event) => setSelectedVoiceProfileId(event.target.value)}
+                title="Choisir la voix de Professeur TOP"
+              >
+                <option value="">Voix</option>
+                {voiceProfiles.map((profile) => (
+                  <option key={profile.id} value={profile.id}>
+                    {formatVoiceLabel(profile)}
+                  </option>
+                ))}
+              </select>
+              <button type="button" onClick={startVoiceInput} disabled={isTranscribing}>
+                {isAutoListening ? 'Stop micro' : isTranscribing ? 'Transcription...' : 'Dicter'}
+              </button>
+              <button type="submit">Envoyer</button>
+            </form>
+
+            {(voiceStatus || errorMessage || isAutoListening) && (
+              <p className="lesson-status">
+                {errorMessage || voiceStatus || `Niveau micro: ${Math.round(Math.min(micLevel * 1200, 100))}%`}
+              </p>
+            )}
+
+            {progressPanelOpen && (
+              <div className="progress-panel-backdrop" role="presentation" onClick={() => setProgressPanelOpen(false)}>
+                <aside className="progress-panel card" role="dialog" aria-label="Progression" onClick={(event) => event.stopPropagation()}>
+                  <div className="progress-panel-head">
+                    <h2>Progression</h2>
+                    <button type="button" className="secondary-button" onClick={() => setProgressPanelOpen(false)}>
+                      Fermer
+                    </button>
+                  </div>
+                  <div className="stack small-gap">
+                    {progress.map((item) => <ProgressCard key={item.code} item={item} />)}
+                  </div>
+                </aside>
+              </div>
+            )}
+          </main>
+        )}
+      </div>
+    )
+  }
+
   return (
     <div className={`layout ${isStudentUser ? 'student-layout' : 'admin-layout'}`}>
       <aside className="sidebar card">