워크시트 검수 UI와 세션 다크톤 정리

apps/web/src/pages/Session.tsx

@@ -1611,6 +1611,33 @@ export default function Session() {
     sending;
   const textTurnBlocked = sending || voiceStatus === "thinking";
   const elapsedLabel = formatElapsed(elapsed);
+  const recommendedSessionSeconds = 30 * 60;
+  const remainingLabel = formatElapsed(Math.max(0, recommendedSessionSeconds - elapsed));
+  const turnCount = utterances.filter((utterance) => !utterance.partial).length;
+  const latestClientUtterance = [...utterances]
+    .reverse()
+    .find((utterance) => utterance.speaker === "client" && utterance.text.trim());
+  const stageClientLine =
+    latestClientUtterance?.text ??
+    primaryContext?.v ??
+    `${clientName}님이 당신의 첫 질문을 기다리고 있습니다.`;
+  const voiceInputStatus =
+    voiceAvailable === false
+      ? "음성 미설정"
+      : micOn
+        ? "수신 중"
+        : voiceStatus === "requesting"
+          ? "권한 요청"
+          : "대기";
+  const responseStatus =
+    sending || clientReplyPending
+      ? "응답 대기"
+      : voiceStatus === "thinking"
+        ? "전사 중"
+        : voiceStatus === "speaking"
+          ? "재생 중"
+          : "안정";
+  const safetyStatusText = safety ? "확인 필요" : "안전";
   const personaIsUsable = personaSummary ? isUsablePersona(personaSummary) : false;
   const consentRequired = user?.role === "learner" && user.consentAt == null;
   const canStartSession = personaLoadState === "ready" && personaIsUsable && !consentRequired;
@@ -2370,23 +2397,20 @@ export default function Session() {
                   </div>
                 </section>
 
-                {/* 안전 점검(있을 때만, warn 톤 — 빨강 아님) */}
-                {safety ? (
-                  <section className="sx-safety">
-                    <span className="sx-safety__ico">
-                      <Icon name="alert" size={17} />
-                    </span>
-                    <span className="sx-safety__text">
-                      <b>안전 점검</b> · {safety}
-                      {crisisResource ? (
-                        <span className="sx-crisis-resource">
-                          <strong>{crisisResource.title}</strong>
-                          <a href={`tel:${crisisResource.number}`}>{crisisResource.number}</a>
-                        </span>
-                      ) : null}
-                    </span>
-                  </section>
-                ) : null}
+                <section className={"sx-safety" + (safety ? "" : " sx-safety--ok")}>
+                  <span className="sx-safety__ico">
+                    <Icon name={safety ? "alert" : "shield"} size={17} />
+                  </span>
+                  <span className="sx-safety__text">
+                    <b>안전 점검</b> · {safety ?? "현재 감지된 위기 신호 없음"}
+                    {crisisResource ? (
+                      <span className="sx-crisis-resource">
+                        <strong>{crisisResource.title}</strong>
+                        <a href={`tel:${crisisResource.number}`}>{crisisResource.number}</a>
+                      </span>
+                    ) : null}
+                  </span>
+                </section>
               </div>
             </div>
 
@@ -2530,7 +2554,7 @@ export default function Session() {
                           }
                         >
                           <div className="sx-coach-history__item-top">
-                            <span>{event.turn_seq}번 턴 · {event.stage}</span>
+                            <span>{event.turn_seq}번 턴 · {event.stage ?? "단계 미상"}</span>
                             <time dateTime={event.created_at}>
                               {formatCoachTimestamp(event.created_at)}
                             </time>