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">

frontend/src/styles.css

@@ -270,6 +270,147 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   width: 100%;
 }
 
+.student-screen {
+  height: 100vh;
+  background: #f5f7fb;
+}
+.student-home {
+  width: min(1040px, 100%);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+  overflow-y: auto;
+}
+.student-home-hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.student-home-hero h1,
+.student-info-card h2,
+.lesson-topbar h1,
+.progress-panel h2 {
+  margin: 0;
+}
+.eyebrow {
+  margin: 0 0 0.25rem;
+  color: #2563eb;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.student-home-actions,
+.lesson-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.student-home-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.student-info-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 180px;
+}
+.student-info-card p {
+  margin: 0;
+  line-height: 1.5;
+}
+.advice-card {
+  background: #eef6ff;
+  border: 1px solid #cfe4ff;
+}
+.visible-status {
+  display: block;
+  margin: 1rem 0 0;
+}
+.student-lesson {
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  overflow: hidden;
+}
+.lesson-topbar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  min-height: 0;
+}
+.lesson-topbar .avatar {
+  width: 92px;
+  height: 92px;
+  border-radius: 20px;
+}
+.lesson-topbar .avatar-caption {
+  display: none;
+}
+.lesson-topbar h1 {
+  font-size: 1.35rem;
+}
+.lesson-display {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  overflow: hidden;
+  background: #eef6ff;
+  border: 1px solid #cfe4ff;
+  border-radius: 18px;
+  padding: 1rem;
+}
+.lesson-display p {
+  margin: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  font-size: clamp(1rem, 2.2vw, 1.35rem);
+  line-height: 1.5;
+}
+.lesson-bubble {
+  min-height: 68px;
+}
+.lesson-composer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 150px 120px 110px;
+  gap: 0.6rem;
+}
+.lesson-status {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.progress-panel-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(15, 23, 42, 0.28);
+  padding: 1rem;
+  z-index: 10;
+}
+.progress-panel {
+  width: min(420px, 100%);
+  overflow-y: auto;
+}
+.progress-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
 @keyframes pulse {
   from { transform: scale(1); }
   to { transform: scale(1.05); }
@@ -325,6 +466,18 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     overflow: visible;
     font-size: 1.1rem;
   }
+
+  .student-home-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .lesson-composer {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .lesson-composer input {
+    grid-column: 1 / -1;
+  }
 }
 
 @media (max-width: 560px) {
@@ -384,4 +537,75 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   select {
     width: 100%;
   }
+
+  .student-home {
+    padding: 0.5rem;
+  }
+
+  .student-home-hero {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .student-home-actions {
+    flex-direction: column;
+  }
+
+  .student-info-card {
+    min-height: 150px;
+  }
+
+  .student-lesson {
+    gap: 0.55rem;
+    padding: 0.5rem;
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
+  }
+
+  .lesson-topbar {
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.75rem;
+  }
+
+  .lesson-topbar .avatar {
+    width: 72px;
+    height: 72px;
+    border-radius: 16px;
+  }
+
+  .lesson-topbar h1 {
+    font-size: 1.05rem;
+  }
+
+  .lesson-actions {
+    grid-column: 1 / -1;
+  }
+
+  .lesson-display {
+    padding: 0.85rem;
+    border-radius: 16px;
+  }
+
+  .lesson-display p {
+    font-size: 1rem;
+  }
+
+  .lesson-composer {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+
+  .lesson-composer input,
+  .lesson-composer select {
+    grid-column: 1 / -1;
+  }
+
+  .progress-panel-backdrop {
+    align-items: flex-end;
+    padding: 0.5rem;
+  }
+
+  .progress-panel {
+    max-height: 82dvh;
+    width: 100%;
+  }
 }