feat: P1 풀빌드 — React 프론트 7화면 + 백엔드 상담루프·평가·음성·RAG

web (Vite+React19+TS, Cloudflare Pages 배포):
- 디자인토큰(세이지틸/테라코타 SSOT), 앱셸, 공통 UI 프리미티브
- 7화면: 로그인/학습자홈/상담세션/회기리뷰/교수자/관리자/설정
- ClientAvatar: SVG 반구상 흉상 4상태 + RMS 립싱크 + 6파라미터 정서
- 회기리뷰는 외부 레퍼런스 디자인을 Vignette 토큰으로 리스킨

api (FastAPI):
- 게이트웨이 /v1/generate·/v1/stream 어댑터(상주풀/EngineSession 보존)
- services: 페르소나 L0~L6 빌더 / 결정론 상태머신 / 가드레일 /
  턴 오케스트레이터 / 회기간 메모리 / 평가AI / 음성 / RAG
- store: DB off 폴백(in-memory), sessions 실구현

검증:
- web: node22 tsc+vite build 통과(node23 segfault 회피), Pages 배포 200
- api: app.main import 통과
- 핫픽스: Topbar initials undefined-safe (undefined.trim 크래시)
- E2E: 서연(P1) 상담 1턴 — 좋은/나쁜 상담에 차등 반응 실증

apps/web/src/components/shell/Topbar.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Icon } from "../ui/Icon";
+import { useAuth, roleLabel } from "../../lib/auth";
+
+/** Vignette 워드마크 — 비네트(조리개) inline SVG. dev_dashboard 마크 계승. */
+function BrandMark() {
+  return (
+    <svg viewBox="0 0 26 26" width={26} height={26} fill="none" aria-hidden="true">
+      <circle cx="13" cy="13" r="11" stroke="var(--accent)" strokeWidth="2" />
+      <path
+        d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5"
+        stroke="var(--accent)"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <circle cx="13" cy="9" r="1.6" fill="var(--clay)" />
+    </svg>
+  );
+}
+
+const THEME_KEY = "vignette.theme";
+
+/** 라이트/다크 토글 (data-theme 반영). 토큰만으로 전환. */
+function useTheme(): [boolean, () => void] {
+  const [dark, setDark] = useState<boolean>(() => {
+    try {
+      const saved = localStorage.getItem(THEME_KEY);
+      if (saved) return saved === "dark";
+    } catch {
+      /* 무시 */
+    }
+    return (
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    );
+  });
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) root.setAttribute("data-theme", "dark");
+    else root.removeAttribute("data-theme");
+    try {
+      localStorage.setItem(THEME_KEY, dark ? "dark" : "light");
+    } catch {
+      /* 무시 */
+    }
+  }, [dark]);
+  return [dark, () => setDark((d) => !d)];
+}
+
+function initials(name?: string | null): string {
+  const trimmed = (name ?? "").trim();
+  if (!trimmed) return "·";
+  // 한글이면 첫 글자, 영문이면 첫 글자 대문자
+  return trimmed.slice(0, 1);
+}
+
+export interface TopbarProps {
+  /** 역할 컨텍스트 라벨 오버라이드 (없으면 user.role 라벨) */
+  contextLabel?: string;
+}
+
+/** 공통 톱바 (56px). 브랜드 + 역할 라벨 + 테마/사용자/로그아웃. §6.3 */
+export function Topbar({ contextLabel }: TopbarProps) {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const [dark, toggleTheme] = useTheme();
+
+  const label = contextLabel ?? (user ? roleLabel(user.role) : null);
+
+  const onLogout = async () => {
+    await logout();
+    navigate("/login", { replace: true });
+  };
+
+  return (
+    <header className="vg-topbar">
+      <Link className="vg-topbar__brand" to={user ? "/" : "/login"}>
+        <span className="vg-topbar__mark">
+          <BrandMark />
+        </span>
+        <span className="vg-topbar__wm">
+          <span className="v">Vignette</span>
+        </span>
+      </Link>
+      {label ? <span className="vg-topbar__role">{label}</span> : null}
+
+      <span className="vg-topbar__spacer" />
+
+      <div className="vg-topbar__actions">
+        <button
+          type="button"
+          className="vg-iconbtn"
+          onClick={toggleTheme}
+          aria-label={dark ? "라이트 모드로" : "다크 모드로"}
+          title={dark ? "라이트 모드" : "다크 모드"}
+        >
+          <Icon name={dark ? "sun" : "moon"} size={18} />
+        </button>
+
+        {user ? (
+          <>
+            <span className="vg-topbar__user">
+              <span className="vg-topbar__avatar" aria-hidden="true">
+                {initials(user.name)}
+              </span>
+              <span className="vg-topbar__uname">{user.name}</span>
+            </span>
+            <button
+              type="button"
+              className="vg-iconbtn"
+              onClick={onLogout}
+              aria-label="로그아웃"
+              title="로그아웃"
+            >
+              <Icon name="logout" size={18} />
+            </button>
+          </>
+        ) : null}
+      </div>
+    </header>
+  );
+}