Rename to mirror., scroll reveal animations, waveform logo, deployment config

- Renamed app from Behavioral Mirror to mirror. throughout
- Added waveform SVG logo (option 2A) to all pages replacing emoji placeholders
- Added scroll reveal animations (Reveal/RevealItem) to all pages
- Cleaned requirements.txt: removed unused anthropic, openai-whisper, whisperx, sqlalchemy
- Added Dockerfile with CPU-only torch and ffmpeg for Railway deployment
- Updated CORS to allow chrome-extension:// origins via regex + FRONTEND_URL env var
- Added .env.example template

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/.env.example

@@ -0,0 +1,6 @@
+GROQ_API_KEY=
+HF_TOKEN=
+SUPABASE_URL=
+SUPABASE_ANON_KEY=
+SUPABASE_SERVICE_KEY=
+FRONTEND_URL=

backend/Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10-slim
+
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libsndfile1 \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install CPU-only torch first so pip doesn't pull the 2 GB CUDA build
+RUN pip install --no-cache-dir torch --index-url https://download.pytorch.org/whl/cpu
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["sh", "-c", "uvicorn main:app --host 0.0.0.0 --port ${PORT:-8000}"]

backend/main.py

@@ -19,18 +19,27 @@ from pipeline.dimension_scorer import DimensionScorer
 from pipeline.voiceprint import VoiceprintMatcher
 from pipeline.context_detector import ContextDetector
 from pipeline.personality_synthesizer import PersonalitySynthesizer
+from pipeline.mirror_feed_synthesizer import MirrorFeedSynthesizer
 from db.database import supabase_admin
 
 app = FastAPI()
 
+_ALLOWED_ORIGINS = [o for o in [
+    "http://localhost:5173",
+    "http://localhost:5174",
+    os.getenv("FRONTEND_URL", ""),
+] if o]
+
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:5173"],
+    allow_origins=_ALLOWED_ORIGINS,
+    allow_origin_regex=r"chrome-extension://.*",
+    allow_credentials=True,
     allow_methods=["*"],
-    allow_headers=["*"]
+    allow_headers=["*"],
 )
 
-UPLOAD_DIR = "/tmp/behavioral_mirror"
+UPLOAD_DIR = "/tmp/mirror"
 os.makedirs(UPLOAD_DIR, exist_ok=True)
 
 # In-memory store for prepare → finalize handoff.
@@ -56,18 +65,20 @@ def _cleanup_stale_cache():
         del _prepare_cache[sid]
 
 
-print("Loading models... this may take a minute on first run.")
-transcriber = Transcriber(model_size="small")
+print("Loading models...")
+transcriber = Transcriber(api_key=os.getenv("GROQ_API_KEY"))
 diarizer = Diarizer(hf_token=os.getenv("HF_TOKEN"))
 insight_gen = InsightGenerator(api_key=os.getenv("GROQ_API_KEY"))
 context_detector = ContextDetector(api_key=os.getenv("GROQ_API_KEY"))
 dimension_scorer = DimensionScorer()
 voiceprint_matcher = VoiceprintMatcher(hf_token=os.getenv("HF_TOKEN"))
 personality_synth = PersonalitySynthesizer(api_key=os.getenv("GROQ_API_KEY"))
+mirror_feed_synth = MirrorFeedSynthesizer(api_key=os.getenv("GROQ_API_KEY"))
 print("All models loaded. Server ready.")
 
-# In-memory personality cache: key = "{user_id}:{session_count}"
-_personality_cache: dict = {}
+# In-memory caches — cleared on server restart, Supabase is the durable layer
+_personality_cache: dict = {}   # key = "{user_id}:{session_count}:v{version}"
+_mirror_feed_cache: dict = {}   # key = "{user_id}:{session_count}"
 
 
 CONTEXT_POPULATION_NORMS: dict = {
@@ -155,33 +166,33 @@ def _compute_dim_averages(parsed: list) -> dict:
 
 
 _CONTEXT_BLIND_SPOTS: dict = {
-    "evaluative":    (1, "High-stakes settings",
-        "You've never uploaded an interview, presentation, or review. Your confidence and "
-        "composure scores are based on lower-stakes conversations — they may look very "
-        "different when you're being assessed."),
-    "adversarial":   (2, "Conflict & pushback",
+    "evaluative":    (1, "Interview & Review · High Stakes",
+        "No interview, presentation, or review recordings yet. Your confidence and "
+        "composure scores are built from lower-stakes conversations — they may shift "
+        "significantly when you're being assessed."),
+    "adversarial":   (2, "Conflict & Friction",
         "No conflict or disagreement recordings yet. We can't tell how you respond when "
         "challenged or when there's real friction in the room."),
-    "collaborative": (3, "Group & team dynamics",
+    "collaborative": (3, "Collaborative",
         "No team meetings or brainstorming sessions uploaded. Your listening and "
         "assertiveness scores come from 1-on-1 conversations only."),
-    "influential":   (4, "Persuasion & pitching",
-        "No pitch or sales conversations yet. We can't see how you hold an argument or "
-        "move someone toward a decision."),
+    "influential":   (4, "Persuading & Pitching",
+        "No pitch or persuasion conversations yet. We can't see how you hold an argument "
+        "or move someone toward a decision."),
     "negotiation":   (5, "Negotiation",
-        "No negotiation recordings. How your composure and assertiveness hold under "
+        "No negotiation recordings yet. How your composure and assertiveness hold under "
         "competing interests is still unmeasured."),
-    "developmental": (6, "Giving feedback",
+    "developmental": (6, "Coaching & Feedback",
         "No coaching or feedback sessions recorded. We can't see how you structure or "
-        "deliver criticism."),
-    "support":       (7, "Empathy-led listening",
+        "deliver guidance to others."),
+    "support":       (7, "Supportive Listening",
         "No support conversations yet. Your empathy dimension has no direct evidence."),
-    "intimate":      (8, "Deep personal conversations",
-        "No emotionally intimate conversations uploaded. Your expressiveness score may "
-        "be incomplete."),
-    "social":        (9, "Casual & social",
-        "No casual social conversations recorded. We can't see your natural, low-stakes "
-        "communication style yet."),
+    "intimate":      (8, "Deep Personal",
+        "No emotionally open conversations uploaded. Your expressiveness and warmth "
+        "scores may be incomplete."),
+    "social":        (9, "Casual & Low-Stakes",
+        "No casual social conversations recorded. We can't see your natural, "
+        "low-pressure communication style yet."),
 }
 
 
@@ -219,28 +230,6 @@ def _compute_session_delta(old: dict, new: dict) -> dict | None:
     return {"changes": changes[:3]}
 
 
-def _extract_mirror_highlights(insights: dict, n: int = 3) -> list:
-    """Pull the N most significant observations from a session's insights."""
-    highlights = []
-
-    if insights.get("notable_pattern"):
-        highlights.append(insights["notable_pattern"])
-
-    for s in insights.get("coaching_suggestions", []):
-        if len(highlights) >= n:
-            break
-        issue = (s.get("issue") or "").strip()
-        if issue and issue not in highlights:
-            highlights.append(issue)
-
-    for obs in insights.get("observations", []):
-        if len(highlights) >= n:
-            break
-        text = (obs.get("observation") or "").strip()
-        if text and text not in highlights:
-            highlights.append(text)
-
-    return highlights[:n]
 
 
 def _build_sessions_data(parsed: list, dim_paths: dict) -> list:
@@ -259,23 +248,6 @@ def _build_sessions_data(parsed: list, dim_paths: dict) -> list:
             except (KeyError, TypeError):
                 pass
 
-        # Extract 2-3 sample user quotes (5-20 words, spread across the conversation)
-        sample_quotes = []
-        merged = p.get("merged", [])
-        detected_speaker = p.get("detected_speaker", "SPEAKER_00")
-        if merged:
-            user_turns = [
-                seg.get("text", "").strip()
-                for seg in merged
-                if seg.get("speaker") == detected_speaker
-                and 5 <= len(seg.get("text", "").split()) <= 20
-            ]
-            if len(user_turns) >= 3:
-                mid = len(user_turns) // 2
-                sample_quotes = [user_turns[0], user_turns[mid], user_turns[-1]]
-            elif user_turns:
-                sample_quotes = user_turns[:3]
-
         sessions.append({
             "date":            date_str,
             "context":         p["context"],
@@ -283,7 +255,7 @@ def _build_sessions_data(parsed: list, dim_paths: dict) -> list:
             "filler_rate":     p["sig"]["filler_words"]["rate_per_100_words"],
             "talk_ratio_pct":  round(p["sig"]["talk_ratio"]["user_ratio"] * 100),
             "notable_pattern": p["ins"].get("notable_pattern", ""),
-            "sample_quotes":   sample_quotes,
+            "fingerprint":     p.get("fingerprint") or "",
         })
     return sessions
 
@@ -291,7 +263,7 @@ def _build_sessions_data(parsed: list, dim_paths: dict) -> list:
 def _get_or_synthesize_personality(user_id: str, session_count: int,
                                    profile_data: dict, dim_averages: dict,
                                    sessions_data: list = None) -> dict:
-    _SYNTHESIS_VERSION = 4  # bump when prompt changes to invalidate old cache
+    _SYNTHESIS_VERSION = 5  # bump when prompt changes to invalidate old cache
     cache_key = f"{user_id}:{session_count}:v{_SYNTHESIS_VERSION}"
 
     if cache_key in _personality_cache:
@@ -306,13 +278,17 @@ def _get_or_synthesize_personality(user_id: str, session_count: int,
             .eq("user_id", user_id).execute()
         if result.data:
             row = result.data[0]
-            if row["session_count_at_synthesis"] == session_count * _SYNTHESIS_VERSION:
-                personality = json.loads(row["personality_json"])
+            raw_pj = row.get("personality_json")
+            if raw_pj and row.get("session_count_at_synthesis") == session_count * _SYNTHESIS_VERSION:
+                personality = json.loads(raw_pj)
                 _personality_cache[cache_key] = personality
                 return personality
-            else:
-                # Session count changed — preserve old synthesis for delta
-                old_personality = json.loads(row["personality_json"])
+            elif raw_pj:
+                # Session count changed — preserve old synthesis for delta calculation
+                try:
+                    old_personality = json.loads(raw_pj)
+                except Exception:
+                    pass
     except Exception:
         pass
 
@@ -356,7 +332,7 @@ async def get_current_user(authorization: Optional[str] = Header(None)) -> str:
 
 @app.get("/")
 def root():
-    return {"status": "Behavioral Mirror API is running"}
+    return {"status": "mirror. API is running"}
 
 
 # ── SSE Step 1: Start prepare job ────────────────────────────────
@@ -383,6 +359,16 @@ async def start_prepare_session(
     )
     os.remove(temp_path)
 
+    import wave
+    with wave.open(audio_path, "r") as _wf:
+        _duration_s = _wf.getnframes() / _wf.getframerate()
+    if _duration_s > 1200:
+        os.remove(audio_path)
+        raise HTTPException(
+            status_code=400,
+            detail="Recording exceeds the 20-minute limit. Please trim and re-upload."
+        )
+
     job_q: stdlib_queue.Queue = stdlib_queue.Queue()
     _jobs[session_id] = job_q
 
@@ -627,31 +613,34 @@ def _run_finalize_job(session_id, confirmed_speaker):
         if signals is None:
             signals = SignalExtractor(audio_path, merged, confirmed_speaker).extract_all()
 
-        baseline = _get_context_baseline(user_id, primary_context)
-        session_history = _get_user_session_history(user_id)
-        resonance_calibration = _get_resonance_calibration(user_id)
-
         print(f"[{session_id}] Scoring dimensions...")
         emit("scoring", "Scoring behavioral dimensions…")
         dimensions = dimension_scorer.score_all(signals)
 
         print(f"[{session_id}] Detecting conversation type and generating insights...")
         emit("generating", "Generating insights with AI…")
-        transcript_text = _sample_transcript(merged)
-        conversation_types = context_detector.detect(transcript_text)
+        sample_text = _sample_transcript(merged)
+        full_text = _full_transcript(merged)
+        conversation_types = context_detector.detect(sample_text)
         primary_context = conversation_types[0]
         print(f"[{session_id}] Detected conversation types: {conversation_types}")
 
+        baseline = _get_context_baseline(user_id, primary_context)
+        session_history = _get_user_session_history(user_id)
+        resonance_calibration = _get_resonance_calibration(user_id)
+
         insights = insight_gen.generate(
-            signals, primary_context, baseline, transcript_text, dimensions,
+            signals, primary_context, baseline, full_text, dimensions,
             session_history=session_history,
             resonance_calibration=resonance_calibration,
             conversation_types=conversation_types,
         )
 
+        fingerprint = insights.pop("fingerprint", None)
+
         emit("reflecting", "Generating reflection questions…")
         reflection_questions = insight_gen.generate_reflection_questions(
-            signals, insights, transcript_text, primary_context
+            signals, insights, full_text, primary_context
         )
         if reflection_questions:
             insights["reflection_questions"] = reflection_questions
@@ -661,10 +650,25 @@ def _run_finalize_job(session_id, confirmed_speaker):
             session_id, user_id, signals, insights, dimensions,
             primary_context, filename, confirmed_speaker,
             speaker_confirmed=True,
-            merged=merged,
+            fingerprint=fingerprint,
             all_speakers_signals=all_speakers_signals
         )
 
+        # Trigger background consolidation if user has enough sessions
+        try:
+            count_res = supabase_admin.table("sessions").select(
+                "id", count="exact"
+            ).eq("user_id", user_id).execute()
+            session_count = count_res.count or 0
+            if session_count >= 12:
+                threading.Thread(
+                    target=_maybe_consolidate,
+                    args=(user_id, session_count),
+                    daemon=True
+                ).start()
+        except Exception:
+            pass
+
         if os.path.exists(audio_path):
             os.remove(audio_path)
         del _prepare_cache[session_id]
@@ -680,7 +684,6 @@ def _run_finalize_job(session_id, confirmed_speaker):
             "speaker_confirmed": True,
             "available_speakers": all_speaker_ids,
             "voiceprint_confidence": voiceprint_confidence,
-            "transcript": merged,
         }
 
         if job_key in _jobs:
@@ -764,11 +767,10 @@ async def reanalyze_session(
     resonance_calibration = _get_resonance_calibration(user_id)
     dimensions = dimension_scorer.score_all(signals)
 
-    merged = json.loads(session["merged_json"]) if session.get("merged_json") else []
-    transcript_text = " ".join(
-        f"{s.get('speaker', 'UNKNOWN')}: {s.get('text', '')}"
-        for s in merged[:60]
-    )
+    # Re-analysis uses existing fingerprint as transcript context if no merged_json
+    existing_fingerprint = json.loads(session["fingerprint_json"]) if session.get("fingerprint_json") else None
+    transcript_text = existing_fingerprint or ""
+
     insights = insight_gen.generate(
         signals, primary_context, baseline, transcript_text, dimensions,
         session_history=session_history,
@@ -776,6 +778,8 @@ async def reanalyze_session(
         conversation_types=conversation_types,
     )
 
+    fingerprint = insights.pop("fingerprint", existing_fingerprint)
+
     reflection_questions = insight_gen.generate_reflection_questions(
         signals, insights, transcript_text, primary_context
     )
@@ -788,6 +792,7 @@ async def reanalyze_session(
         "signals_json": json.dumps(signals),
         "insights_json": json.dumps(insights),
         "dimensions_json": json.dumps(dimensions),
+        "fingerprint_json": json.dumps(fingerprint) if fingerprint else None,
     }).eq("id", session_id).execute()
 
     print(f"[{session_id}] Re-analysis done.")
@@ -800,7 +805,6 @@ async def reanalyze_session(
         "detected_speaker": confirmed_speaker,
         "speaker_confirmed": True,
         "available_speakers": list(all_speakers_signals.keys()),
-        "transcript": merged,
     }
 
 
@@ -825,7 +829,7 @@ def get_sessions(user_id: str = Depends(get_current_user)):
             "dimensions": json.loads(s["dimensions_json"]) if s.get("dimensions_json") else {},
             "available_speakers": list(json.loads(s["all_speakers_signals_json"]).keys())
                 if s.get("all_speakers_signals_json") else [],
-            "transcript": json.loads(s["merged_json"]) if s.get("merged_json") else [],
+            "fingerprint": json.loads(s["fingerprint_json"]) if s.get("fingerprint_json") else None,
         }
         for s in res.data
     ]
@@ -873,14 +877,13 @@ def get_trends(user_id: str = Depends(get_current_user)):
 @app.get("/api/profile")
 def get_profile(user_id: str = Depends(get_current_user)):
     res = supabase_admin.table("sessions").select(
-        "id, context, created_at, signals_json, dimensions_json, insights_json, merged_json, detected_speaker"
+        "id, context, created_at, signals_json, dimensions_json, insights_json, fingerprint_json, detected_speaker"
     ).eq("user_id", user_id).order("created_at", desc=False).execute()
 
-    if len(res.data) < 3:
+    if len(res.data) < 1:
         return {
             "insufficient_data": True,
-            "session_count": len(res.data),
-            "sessions_needed": 3,
+            "session_count": 0,
         }
 
     parsed = []
@@ -889,11 +892,11 @@ def get_profile(user_id: str = Depends(get_current_user)):
             sig = json.loads(s["signals_json"])
             dims = json.loads(s["dimensions_json"]) if s.get("dimensions_json") else {}
             ins = json.loads(s["insights_json"])
-            merged = json.loads(s["merged_json"]) if s.get("merged_json") else []
+            fingerprint = json.loads(s["fingerprint_json"]) if s.get("fingerprint_json") else None
             parsed.append({
                 "context": s["context"], "date": s["created_at"],
                 "sig": sig, "dims": dims, "ins": ins,
-                "merged": merged,
+                "fingerprint": fingerprint,
                 "detected_speaker": s.get("detected_speaker") or "SPEAKER_00",
             })
         except Exception:
@@ -931,29 +934,30 @@ def get_profile(user_id: str = Depends(get_current_user)):
                 "filler_rate": round(sum(p["sig"]["filler_words"]["rate_per_100_words"] for p in items) / len(items), 2),
             }
 
-    # Pattern detection
+    # Pattern detection (needs 2+ sessions to establish consistency)
     patterns = []
-    talk_ratios = [p["sig"]["talk_ratio"]["user_ratio"] * 100 for p in parsed]
-    high_talk = sum(1 for r in talk_ratios if r > 60)
-    low_talk  = sum(1 for r in talk_ratios if r < 40)
-    if high_talk >= n * 0.7:
-        patterns.append({"signal": "talk_ratio", "type": "consistently_high",
-                          "detail": f"You speak over 60% of the time in {high_talk}/{n} sessions."})
-    elif low_talk >= n * 0.7:
-        patterns.append({"signal": "talk_ratio", "type": "consistently_low",
-                          "detail": f"You speak under 40% of the time in {low_talk}/{n} sessions."})
-
-    filler_rates = [p["sig"]["filler_words"]["rate_per_100_words"] for p in parsed]
-    avg_filler = sum(filler_rates) / len(filler_rates)
-    if avg_filler > 5:
-        patterns.append({"signal": "filler_words", "type": "consistently_high",
-                          "detail": f"Average filler rate {round(avg_filler, 1)}/100 words across all sessions."})
-
-    interruption_counts = [p["sig"]["interruptions"]["user_interrupted_other"] for p in parsed]
-    avg_interrupts = sum(interruption_counts) / len(interruption_counts)
-    if avg_interrupts >= 3:
-        patterns.append({"signal": "interruptions", "type": "consistently_high",
-                          "detail": f"You average {round(avg_interrupts, 1)} interruptions per session."})
+    if n >= 2:
+        talk_ratios = [p["sig"]["talk_ratio"]["user_ratio"] * 100 for p in parsed]
+        high_talk = sum(1 for r in talk_ratios if r > 60)
+        low_talk  = sum(1 for r in talk_ratios if r < 40)
+        if high_talk >= n * 0.7:
+            patterns.append({"signal": "talk_ratio", "type": "consistently_high",
+                              "detail": f"You speak over 60% of the time in {high_talk}/{n} sessions."})
+        elif low_talk >= n * 0.7:
+            patterns.append({"signal": "talk_ratio", "type": "consistently_low",
+                              "detail": f"You speak under 40% of the time in {low_talk}/{n} sessions."})
+
+        filler_rates = [p["sig"]["filler_words"]["rate_per_100_words"] for p in parsed]
+        avg_filler = sum(filler_rates) / len(filler_rates)
+        if avg_filler > 5:
+            patterns.append({"signal": "filler_words", "type": "consistently_high",
+                              "detail": f"Average filler rate {round(avg_filler, 1)}/100 words across all sessions."})
+
+        interruption_counts = [p["sig"]["interruptions"]["user_interrupted_other"] for p in parsed]
+        avg_interrupts = sum(interruption_counts) / len(interruption_counts)
+        if avg_interrupts >= 3:
+            patterns.append({"signal": "interruptions", "type": "consistently_high",
+                              "detail": f"You average {round(avg_interrupts, 1)} interruptions per session."})
 
     # Trend detection across first vs last third (needs 6+ sessions)
     trends = []
@@ -1027,21 +1031,46 @@ def get_profile(user_id: str = Depends(get_current_user)):
     elif completeness < 90: completeness_label = "Established"
     else:                   completeness_label = "Deep mirror"
 
-    # Mirror Feed: 3 highlights per session, last 7 sessions newest-first
-    session_highlights = []
-    for p in reversed(parsed[-7:]):
+    _MF_VERSION = 3  # bump when tip field or prompt changes to invalidate old cache
+    mf_cache_key = f"{user_id}:{n}:v{_MF_VERSION}"
+    mirror_feed = _mirror_feed_cache.get(mf_cache_key)
+
+    if mirror_feed is None:
+        # Try Supabase cache
         try:
-            from datetime import datetime as _dt2
-            date_str = _dt2.fromisoformat(p["date"].replace("Z", "+00:00")).strftime("%b %d")
+            mf_res = supabase_admin.table("user_profiles").select(
+                "mirror_feed_json, mirror_feed_session_count"
+            ).eq("user_id", user_id).execute()
+            if mf_res.data:
+                row = mf_res.data[0]
+                if row.get("mirror_feed_session_count") == n * _MF_VERSION and row.get("mirror_feed_json"):
+                    mirror_feed = json.loads(row["mirror_feed_json"])
         except Exception:
-            date_str = "recent"
-        hl = _extract_mirror_highlights(p["ins"])
-        if hl:
-            session_highlights.append({
-                "date": date_str,
+            pass
+
+    if mirror_feed is None:
+        feed_sessions = [
+            {
                 "context": p["context"],
-                "highlights": hl,
-            })
+                "date": p["date"][:10],
+                "fingerprint": p.get("fingerprint") or "",
+                "notable_pattern": p["ins"].get("notable_pattern", ""),
+            }
+            for p in parsed
+        ]
+        user_summary = _get_user_summary(user_id)
+        mirror_feed = mirror_feed_synth.synthesize(feed_sessions, user_summary=user_summary)
+        try:
+            supabase_admin.table("user_profiles").upsert({
+                "user_id": user_id,
+                "mirror_feed_json": json.dumps(mirror_feed),
+                "mirror_feed_session_count": n * _MF_VERSION,
+                "updated_at": _utcnow(),
+            }).execute()
+        except Exception:
+            pass
+
+    _mirror_feed_cache[mf_cache_key] = mirror_feed
 
     return {
         "insufficient_data": False,
@@ -1055,7 +1084,7 @@ def get_profile(user_id: str = Depends(get_current_user)):
         "blind_spots": blind_spots,
         "completeness": completeness,
         "completeness_label": completeness_label,
-        "session_highlights": session_highlights,
+        "mirror_feed": mirror_feed,
     }
 
 
@@ -1069,6 +1098,15 @@ async def delete_session(
     ).execute()
     if not res.data:
         raise HTTPException(status_code=404, detail="Session not found.")
+
+    # Evict all cached profile data for this user — session count has changed
+    for key in list(_personality_cache.keys()):
+        if key.startswith(f"{user_id}:"):
+            del _personality_cache[key]
+    for key in list(_mirror_feed_cache.keys()):
+        if key.startswith(f"{user_id}:"):
+            del _mirror_feed_cache[key]
+
     return {"status": "deleted"}
 
 
@@ -1296,37 +1334,40 @@ def _get_context_baseline(user_id: str, context: str) -> dict | None:
     return None
 
 
-def _get_user_session_history(user_id: str, limit: int = 10) -> list:
-    """Return last N sessions in chronological order for cross-session prompting."""
+def _get_user_session_history(user_id: str, limit: int = 8) -> list:
+    """Return session history for cross-session context.
+    If a consolidated summary exists (12+ sessions), returns it + last 3 individual fingerprints.
+    Otherwise returns last N individual fingerprints.
+    """
+    user_summary = _get_user_summary(user_id)
+
+    fetch_limit = 3 if user_summary else limit
     res = supabase_admin.table("sessions").select(
-        "id, context, created_at, signals_json, insights_json, dimensions_json"
-    ).eq("user_id", user_id).order("created_at", desc=True).limit(limit).execute()
+        "context, created_at, fingerprint_json, insights_json"
+    ).eq("user_id", user_id).order("created_at", desc=True).limit(fetch_limit).execute()
 
-    history = []
+    recent = []
     for s in reversed(res.data):  # oldest first
         try:
-            signals = json.loads(s["signals_json"])
-            insights = json.loads(s["insights_json"])
-            dimensions = json.loads(s["dimensions_json"]) if s.get("dimensions_json") else {}
-            history.append({
-                "context": s["context"],
-                "date": s["created_at"][:10],
-                "summary": insights.get("summary_sentence", ""),
-                "signals": {
-                    "talk_ratio_pct": round(signals["talk_ratio"]["user_ratio"] * 100, 1),
-                    "wpm": signals["speech_rate"]["overall_wpm"],
-                    "filler_rate": signals["filler_words"]["rate_per_100_words"],
-                    "interruptions_given": signals["interruptions"]["user_interrupted_other"],
-                    "silence_ratio_pct": round(signals["silence_ratio"]["silence_ratio"] * 100, 1),
-                },
-                "top_coaching_areas": [
-                    c.get("area") for c in insights.get("coaching_suggestions", [])[:2]
-                    if c.get("area")
-                ],
-            })
+            fingerprint = None
+            if s.get("fingerprint_json"):
+                fingerprint = json.loads(s["fingerprint_json"])
+            if not fingerprint and s.get("insights_json"):
+                ins = json.loads(s["insights_json"])
+                fingerprint = ins.get("summary_sentence") or ins.get("conversation_summary")
+            if fingerprint:
+                recent.append({
+                    "context": s["context"],
+                    "date": s["created_at"][:10],
+                    "fingerprint": fingerprint,
+                })
         except Exception:
             continue
-    return history
+
+    if user_summary:
+        return [{"context": "profile", "date": "consolidated",
+                 "fingerprint": f"CONSOLIDATED BEHAVIORAL PROFILE:\n{user_summary}"}] + recent
+    return recent
 
 
 def _get_resonance_calibration(user_id: str) -> dict:
@@ -1352,9 +1393,131 @@ def _get_resonance_calibration(user_id: str) -> dict:
     return {"avoid": avoid, "emphasize": emphasize}
 
 
+# ── User summary consolidation ────────────────────────────────────────
+
+def _generate_user_summary(fingerprints: list) -> str:
+    """LLM call: consolidate all session fingerprints into one behavioral summary."""
+    ctx_map: dict = {}
+    for fp in fingerprints:
+        ctx_map.setdefault(fp["context"], []).append(fp)
+
+    blocks = []
+    for ctx, items in ctx_map.items():
+        label = ctx.replace("_", " ").title()
+        block = f"{label} ({len(items)} sessions):\n"
+        for item in items:
+            block += f"  {item['date']}: {item['fingerprint']}\n"
+        blocks.append(block)
+
+    prompt = f"""You are building a consolidated behavioral profile from {len(fingerprints)} recorded conversations.
+
+SESSIONS BY CONTEXT:
+{''.join(blocks)}
+
+TASK: Write a single comprehensive behavioral summary of this person — 400–600 words.
+
+Cover:
+- Their core behavioral tendencies that appear regardless of context
+- How they show up differently across different types of conversations (if multiple contexts exist)
+- Recurring strengths — what they do consistently well
+- Recurring blind spots or development areas that appear across multiple sessions
+- How their behavior has evolved from their earliest sessions to their most recent ones
+
+RULES:
+1. Be specific — reference what was actually observed, not generic descriptions
+2. Write in third person ("this person", "they", "their") — this is a reference document, not a direct address
+3. Do not use raw numbers — translate signals into behavioral descriptions
+4. Be honest about both strengths and gaps
+5. Output plain text only — no JSON, no markdown headers, no bullet points"""
+
+    try:
+        response = personality_synth.client.chat.completions.create(
+            model="llama-3.3-70b-versatile",
+            messages=[{"role": "user", "content": prompt}],
+            temperature=0.3,
+            max_tokens=900,
+        )
+        return response.choices[0].message.content.strip()
+    except Exception:
+        return ""
+
+
+def _maybe_consolidate(user_id: str, session_count: int) -> None:
+    """Run in background thread. Consolidates fingerprints into user_summary_json
+    at 12+ sessions, then refreshes every 5 new sessions."""
+    if session_count < 12:
+        return
+    try:
+        profile_res = supabase_admin.table("user_profiles").select(
+            "user_summary_json, summary_session_count"
+        ).eq("user_id", user_id).execute()
+
+        existing = profile_res.data[0] if profile_res.data else {}
+        last_count = existing.get("summary_session_count") or 0
+
+        # Skip if summary is recent enough (within 5 sessions)
+        if existing.get("user_summary_json") and (session_count - last_count) < 5:
+            return
+
+        fp_res = supabase_admin.table("sessions").select(
+            "context, created_at, fingerprint_json"
+        ).eq("user_id", user_id).order("created_at", desc=False).execute()
+
+        fingerprints = []
+        for s in fp_res.data:
+            if s.get("fingerprint_json"):
+                try:
+                    fp = json.loads(s["fingerprint_json"])
+                    if fp:
+                        fingerprints.append({
+                            "context": s["context"],
+                            "date": s["created_at"][:10],
+                            "fingerprint": fp,
+                        })
+                except Exception:
+                    continue
+
+        if len(fingerprints) < 10:
+            return
+
+        summary = _generate_user_summary(fingerprints)
+        if not summary:
+            return
+
+        supabase_admin.table("user_profiles").upsert({
+            "user_id": user_id,
+            "user_summary_json": summary,
+            "summary_session_count": session_count,
+        }).execute()
+        print(f"[consolidation] Updated user summary for {user_id} at {session_count} sessions.")
+    except Exception as e:
+        print(f"[consolidation] Failed for {user_id}: {e}")
+
+
+def _get_user_summary(user_id: str) -> str | None:
+    """Return consolidated behavioral summary if it exists."""
+    try:
+        res = supabase_admin.table("user_profiles").select(
+            "user_summary_json"
+        ).eq("user_id", user_id).execute()
+        if res.data and res.data[0].get("user_summary_json"):
+            return res.data[0]["user_summary_json"]
+    except Exception:
+        pass
+    return None
+
+
+def _full_transcript(merged: list) -> str:
+    """Format complete diarized transcript as speaker-labeled lines."""
+    return "\n".join(
+        f"{s.get('speaker', 'UNKNOWN')}: {s.get('text', '').strip()}"
+        for s in merged
+        if s.get("text", "").strip()
+    )
+
+
 def _sample_transcript(merged: list, max_segments: int = 60) -> str:
-    """Return a transcript string covering the full conversation.
-    If <= max_segments, use all. Otherwise take evenly-spaced thirds with no overlap."""
+    """Short transcript sample — used only for context detection."""
     n = len(merged)
     if n <= max_segments:
         selected = merged
@@ -1379,7 +1542,7 @@ def _sample_transcript(merged: list, max_segments: int = 60) -> str:
 def _save_session(
     session_id, user_id, signals, insights, dimensions,
     context, filename="recording", detected_speaker="SPEAKER_00",
-    speaker_confirmed=True, merged=None, all_speakers_signals=None
+    speaker_confirmed=True, fingerprint=None, all_speakers_signals=None
 ):
     supabase_admin.table("sessions").insert({
         "id": session_id,
@@ -1391,6 +1554,6 @@ def _save_session(
         "signals_json": json.dumps(signals),
         "insights_json": json.dumps(insights),
         "dimensions_json": json.dumps(dimensions),
-        "merged_json": json.dumps(merged) if merged else None,
+        "fingerprint_json": json.dumps(fingerprint) if fingerprint else None,
         "all_speakers_signals_json": json.dumps(all_speakers_signals) if all_speakers_signals else None,
     }).execute()

backend/pipeline/insight_generator.py

@@ -1,60 +1,44 @@
 import json
 from groq import Groq
 
+
 CONTEXT_COACHING_GUIDE = {
     "social": (
-        "This is a casual, low-stakes social conversation. There are no strict norms to measure "
-        "against. Focus on what was genuinely notable — rapport, warmth, and reciprocal engagement "
-        "matter most. Avoid applying professional communication standards."
+        "Casual, low-stakes social conversation. Focus on rapport, warmth, and reciprocal "
+        "engagement. Avoid applying professional communication standards."
     ),
     "collaborative": (
-        "This is a collaborative working conversation (meeting, brainstorming, planning). "
-        "Prioritize: balanced airtime, turn-taking, question quality, and whether one person "
-        "dominated. Mutual engagement and shared goal orientation matter. Long silences may "
-        "indicate disengagement."
+        "Collaborative working conversation (meeting, brainstorming, planning). "
+        "Balanced airtime, turn-taking, and mutual engagement matter most."
     ),
     "evaluative": (
-        "This is an evaluative conversation — interview, presentation, performance review, or "
-        "assessment. Prioritize: confidence signals, response latency, conciseness. Flag long "
-        "monologues — evaluators expect dialogue, not lectures. Low filler rate matters here "
-        "more than in casual contexts. Concise, direct answers signal competence."
+        "Evaluative conversation — interview, presentation, or assessment. "
+        "Confidence, directness, and concise responses signal competence. "
+        "Evaluators expect dialogue, not lectures."
     ),
     "influential": (
-        "This is a persuasion or influence conversation (sales, pitch, convincing someone). "
-        "Prioritize: whether the other person was engaged or passive, question quality (do "
-        "questions draw out needs?), and clarity of the core argument. Monologuing is a red "
-        "flag — real influence requires dialogue, not broadcasting."
+        "Persuasion or influence conversation (sales, pitch). Real influence "
+        "requires dialogue — monologuing is a red flag. Questions should draw out needs."
     ),
     "negotiation": (
-        "This is a negotiation — competing interests seeking compromise. Prioritize: balance of "
-        "airtime, interruption patterns, response latency (strategic pauses matter here), and "
-        "whether both parties had space to present their position. High interruptions and rushed "
-        "responses signal a power struggle rather than a deal-making mindset."
+        "Negotiation — competing interests seeking compromise. Balanced airtime, "
+        "strategic pauses, and space for both sides to present their position matter."
     ),
     "adversarial": (
-        "This is a conflict or disagreement conversation. Prioritize: listening quality, "
-        "interruption patterns, talk ratio balance, response latency. A very high talk ratio "
-        "by one person usually signals the other isn't being heard. Frequent interruptions "
-        "escalate tension. Long response latency can indicate careful processing or withdrawal."
+        "Conflict or disagreement. Listening quality and interruption patterns are "
+        "critical. High talk ratio by one person usually means the other isn't being heard."
     ),
     "developmental": (
-        "This is a coaching, mentoring, or feedback conversation. Prioritize: question quality "
-        "(do questions provoke genuine reflection?), listening-to-talking balance, and whether "
-        "the person being developed had space to think. The coach or mentor should talk less, "
-        "not more — high talk ratio by the coach is often a red flag."
+        "Coaching, mentoring, or feedback conversation. The coach should talk less, "
+        "not more. Question quality and space for reflection matter most."
     ),
     "support": (
-        "This is an emotional support or empathy-led conversation. A high talk ratio by the "
-        "listener is a red flag — support requires presence, not performance. Prioritize: "
-        "listening ratio, response latency (rushing to respond prevents real empathy), question "
-        "quality (open vs. closed), and whether the supported person felt genuinely heard."
+        "Emotional support conversation. Presence over performance — rushing to respond "
+        "prevents real empathy. Listening ratio and open questions are key."
     ),
     "intimate": (
-        "This is a psychologically intimate conversation — deep personal sharing, mutual "
-        "vulnerability, or emotional connection. Prioritize: balance of vulnerability between "
-        "both speakers, response latency (thoughtful pauses signal processing, not disengagement), "
-        "interruption patterns (interruptions feel like ruptures here), and whether both people "
-        "had equal space to go deep."
+        "Psychologically intimate conversation. Balance of vulnerability between both "
+        "speakers, thoughtful pauses, and no interruptions matter deeply."
     ),
 }
 
@@ -71,22 +55,18 @@ class InsightGenerator:
         prompt = self._build_prompt(
             structured_input,
             transcript_text,
-            signals.get("notable_signals", []),
-            dimensions or {},
             context,
             user_baseline,
             session_history or [],
             resonance_calibration or {},
             conversation_types or [context],
         )
-
         response = self.client.chat.completions.create(
             model="llama-3.3-70b-versatile",
             messages=[{"role": "user", "content": prompt}],
             temperature=0.3,
-            max_tokens=2500
+            max_tokens=3000,
         )
-
         return self._parse_output(response.choices[0].message.content)
 
     def _prepare_input(self, signals: dict, context: str, baseline: dict) -> dict:
@@ -95,24 +75,14 @@ class InsightGenerator:
             "session_duration_minutes": round(signals["session_duration_s"] / 60, 1),
             "talk_ratio_user": signals["talk_ratio"]["user_ratio"],
             "speech_rate_wpm": signals["speech_rate"]["overall_wpm"],
-            "speech_rate_variability": signals["speech_rate"]["variability"],
-            "avg_response_latency_s": signals["pauses"]["response_latency"]["mean_s"],
-            "within_turn_pause_count": signals["pauses"]["within_turn_pauses"]["count"],
-            "user_interrupted_other": signals["interruptions"]["user_interrupted_other"],
-            "user_was_interrupted": signals["interruptions"]["user_was_interrupted"],
             "filler_rate_per_100_words": signals["filler_words"]["rate_per_100_words"],
             "top_filler_words": list(signals["filler_words"]["breakdown"].keys())[:3],
-            "pitch_mean_hz": signals["pitch_features"].get("mean_hz"),
-            "pitch_std_hz": signals["pitch_features"].get("std_hz"),
-            "vocal_energy_trend": signals["vocal_energy"].get("trend"),
-            "speech_acceleration_trend": signals["speech_acceleration"].get("trend"),
-            "speech_delta_wpm": signals["speech_acceleration"].get("delta_wpm"),
+            "user_interrupted_other": signals["interruptions"]["user_interrupted_other"],
+            "user_was_interrupted": signals["interruptions"]["user_was_interrupted"],
+            "longest_monologue_s": signals["monologue"]["longest_turn_s"],
             "user_questions_asked": signals["questions"]["user_questions_asked"],
             "other_questions_asked": signals["questions"]["other_questions_asked"],
-            "longest_monologue_s": signals["monologue"]["longest_turn_s"],
-            "vocabulary_richness_ttr": signals["vocabulary_richness"]["type_token_ratio"],
-            "silence_ratio": signals["silence_ratio"]["silence_ratio"],
-            "crosstalk_ratio": signals["crosstalk"]["crosstalk_ratio"],
+            "avg_response_latency_s": signals["pauses"]["response_latency"]["mean_s"],
         }
 
         if baseline:
@@ -138,18 +108,12 @@ class InsightGenerator:
                         "context_avg": round(baseline["avg_filler_rate"], 2),
                         "delta_pct": _delta_pct(prepared["filler_rate_per_100_words"], baseline["avg_filler_rate"]),
                     },
-                    "response_latency": {
-                        "current": prepared["avg_response_latency_s"],
-                        "context_avg": round(baseline["avg_response_latency_s"], 2),
-                        "delta_pct": _delta_pct(prepared["avg_response_latency_s"], baseline["avg_response_latency_s"]),
-                    },
                     "talk_ratio": {
                         "current": prepared["talk_ratio_user"],
                         "context_avg": round(baseline["avg_talk_ratio"], 3),
                         "delta_pp": round(prepared["talk_ratio_user"] - baseline["avg_talk_ratio"], 3),
                     },
                 }
-
             elif source == "population_norm":
                 norms = baseline["norms"]
 
@@ -159,192 +123,160 @@ class InsightGenerator:
                     lo, hi, note = norms[key]
                     return (lo <= val <= hi), (round(lo * scale), round(hi * scale)), note
 
-                tr_in, tr_range, tr_note = _norm_check(prepared["talk_ratio_user"], "avg_talk_ratio", scale=100)
-                fr_in, fr_range, fr_note = _norm_check(prepared["filler_rate_per_100_words"], "avg_filler_rate")
-                rl_in, rl_range, rl_note = _norm_check(prepared["avg_response_latency_s"], "avg_response_latency_s")
-                wpm_in, wpm_range, wpm_note = _norm_check(prepared["speech_rate_wpm"], "avg_speech_rate_wpm")
+                tr_in, tr_range, _ = _norm_check(prepared["talk_ratio_user"], "avg_talk_ratio", scale=100)
+                fr_in, fr_range, _ = _norm_check(prepared["filler_rate_per_100_words"], "avg_filler_rate")
 
                 prepared["baseline_comparison"] = {
                     "type": "population_norm",
                     "context": baseline["context"],
-                    "talk_ratio":       {"current_pct": round(prepared["talk_ratio_user"] * 100), "expected_range": tr_range,  "within_norm": tr_in,  "note": tr_note},
-                    "filler_rate":      {"current": prepared["filler_rate_per_100_words"],         "expected_range": fr_range,  "within_norm": fr_in,  "note": fr_note},
-                    "response_latency": {"current": prepared["avg_response_latency_s"],            "expected_range": rl_range,  "within_norm": rl_in,  "note": rl_note},
-                    "speech_rate":      {"current": prepared["speech_rate_wpm"],                   "expected_range": wpm_range, "within_norm": wpm_in, "note": wpm_note},
+                    "talk_ratio": {"current_pct": round(prepared["talk_ratio_user"] * 100),
+                                   "expected_range": tr_range, "within_norm": tr_in},
+                    "filler_rate": {"current": prepared["filler_rate_per_100_words"],
+                                    "expected_range": fr_range, "within_norm": fr_in},
                 }
 
         return prepared
 
     def _build_prompt(self, data: dict, transcript_text: str,
-                      notable_signals: list, dimensions: dict,
                       context: str, baseline: dict,
-                      session_history: list = None,
-                      resonance_calibration: dict = None,
-                      conversation_types: list = None) -> str:
+                      session_history: list,
+                      resonance_calibration: dict,
+                      conversation_types: list) -> str:
+
+        coaching_guide = CONTEXT_COACHING_GUIDE.get(context, CONTEXT_COACHING_GUIDE["social"])
+
+        # ── Transcript (PRIMARY) ──────────────────────────────────────
+        transcript_section = ""
+        if transcript_text:
+            transcript_section = f"""
+CONVERSATION TRANSCRIPT:
+{transcript_text}
+
+"""
+
+        # ── Supporting signals ────────────────────────────────────────
+        fillers_str = ", ".join(data["top_filler_words"]) if data["top_filler_words"] else "none detected"
+        signals_section = f"""SUPPORTING DATA (use to ground observations — do not lead with these):
+  You spoke: {round(data['talk_ratio_user'] * 100)}% of the time
+  Speech rate: {data['speech_rate_wpm']} wpm
+  Filler words: {data['filler_rate_per_100_words']}/100 words (top: {fillers_str})
+  Interruptions you gave: {data['user_interrupted_other']} | received: {data['user_was_interrupted']}
+  Longest unbroken stretch: {data['longest_monologue_s']}s
+  Questions you asked: {data['user_questions_asked']} | they asked: {data['other_questions_asked']}
+  Response latency: {data['avg_response_latency_s']}s avg
+  Duration: {data['session_duration_minutes']} minutes
+"""
 
-        # ── Baseline section ──────────────────────────────────────
+        # ── Baseline ──────────────────────────────────────────────────
         baseline_section = ""
         if "baseline_comparison" in data:
             b = data["baseline_comparison"]
             btype = b.get("type")
-
-            def _fmt_delta(delta, unit=""):
-                if delta is None:
-                    return "no change"
-                sign = "+" if delta > 0 else ""
-                return f"{sign}{delta}{unit}"
-
             if btype == "personal_context":
                 n = b["session_count"]
                 ctx = b["context"].replace("_", " ")
-                sr, fr, rl, tr = b["speech_rate"], b["filler_rate"], b["response_latency"], b["talk_ratio"]
+                sr, fr, tr = b["speech_rate"], b["filler_rate"], b["talk_ratio"]
+
+                def _fmt(delta, unit=""):
+                    if delta is None:
+                        return "no change"
+                    return f"{'+'if delta > 0 else ''}{delta}{unit}"
+
                 baseline_section = f"""
-YOUR {ctx.upper()} BASELINE (from your {n} previous {ctx} sessions):
-REQUIRED: reference at least 2 of these comparisons in your observations or coaching.
-  Speech rate:      {sr['current']} wpm    vs your {ctx} avg {sr['context_avg']} wpm    ({_fmt_delta(sr['delta_pct'], '%')})
-  Filler rate:      {fr['current']}/100w   vs your {ctx} avg {fr['context_avg']}/100w   ({_fmt_delta(fr['delta_pct'], '%')})
-  Response latency: {rl['current']}s       vs your {ctx} avg {rl['context_avg']}s       ({_fmt_delta(rl['delta_pct'], '%')})
-  Talk ratio:       {round(tr['current']*100)}%          vs your {ctx} avg {round(tr['context_avg']*100)}%          ({_fmt_delta(tr['delta_pp']*100, 'pp')})
+YOUR {ctx.upper()} BASELINE ({n} previous sessions):
+  Speech rate: {sr['current']} wpm vs your avg {sr['context_avg']} wpm ({_fmt(sr['delta_pct'], '%')})
+  Filler rate: {fr['current']}/100w vs your avg {fr['context_avg']}/100w ({_fmt(fr['delta_pct'], '%')})
+  Talk ratio: {round(tr['current']*100)}% vs your avg {round(tr['context_avg']*100)}% ({_fmt(tr['delta_pp']*100, 'pp')})
 """
-
             elif btype == "population_norm":
                 ctx = b["context"].replace("_", " ")
-                tr, fr, rl, sr = b["talk_ratio"], b["filler_rate"], b["response_latency"], b["speech_rate"]
-
-                def _norm_line(label, val_str, entry, range_unit=""):
-                    if entry["expected_range"] is None:
-                        return ""
-                    lo, hi = entry["expected_range"]
-                    mark = "✓" if entry["within_norm"] else "✗"
-                    note = f"  — {entry['note']}" if entry["note"] else ""
-                    return f"  {label}: {val_str} (expected {lo}–{hi}{range_unit}) {mark}{note}"
-
-                lines = [
-                    _norm_line("Talk ratio",       f"{tr['current_pct']}%",    tr, "%"),
-                    _norm_line("Filler rate",       f"{fr['current']}/100w",    fr, "/100w"),
-                    _norm_line("Response latency",  f"{rl['current']}s",        rl, "s"),
-                    _norm_line("Speech rate",       f"{sr['current']} wpm",     sr, " wpm"),
-                ]
-                lines = [l for l in lines if l]
-
-                baseline_section = f"""
-CONTEXT NORMS FOR {ctx.upper()} CONVERSATIONS:
-IMPORTANT: Do NOT flag ✓ signals as issues — they are within the expected range for this context.
-Coach only on ✗ signals. Adjust all observations and suggestions accordingly.
+                tr, fr = b["talk_ratio"], b["filler_rate"]
+                mark = lambda v: "✓" if v else "✗"
+                lines = []
+                if tr["expected_range"]:
+                    lo, hi = tr["expected_range"]
+                    lines.append(f"  Talk ratio: {tr['current_pct']}% (expected {lo}–{hi}%) {mark(tr['within_norm'])}")
+                if fr["expected_range"]:
+                    lo, hi = fr["expected_range"]
+                    lines.append(f"  Filler rate: {fr['current']}/100w (expected {lo}–{hi}/100w) {mark(fr['within_norm'])}")
+                if lines:
+                    baseline_section = f"""
+CONTEXT NORMS FOR {ctx.upper()}:
+Do NOT flag ✓ signals as issues. Coach only on ✗ signals.
 {chr(10).join(lines)}
 """
 
-        # ── Session history ───────────────────────────────────────
+        # ── Session history (fingerprints) ────────────────────────────
         history_section = ""
         if session_history:
             n = len(session_history)
-            lines = [
-                f"  Session {i+1} ({s['date']}, {s['context'].replace('_',' ')}): "
-                f"talk={s['signals']['talk_ratio_pct']}%, "
-                f"wpm={s['signals']['wpm']}, "
-                f"fillers={s['signals']['filler_rate']}/100w, "
-                f"interruptions={s['signals']['interruptions_given']} — "
-                f"\"{s['summary']}\""
-                + (f" | coached on: {', '.join(s['top_coaching_areas'])}" if s['top_coaching_areas'] else "")
-                for i, s in enumerate(session_history)
-            ]
-            from collections import Counter
-            all_areas = [a for s in session_history for a in s.get("top_coaching_areas", [])]
-            repeated = [area for area, cnt in Counter(all_areas).most_common() if cnt >= 2]
-            repeat_note = (
-                f"\n  RECURRING ISSUES (flagged in multiple sessions): {', '.join(repeated)}"
-                if repeated else ""
-            )
-            history_section = f"""
-SESSION HISTORY — this is session {n + 1} for this user.
-REQUIRED: mention at least one thing that changed or stayed the same vs previous sessions.
-{chr(10).join(lines)}{repeat_note}
+            lines = []
+            for i, s in enumerate(session_history):
+                ctx = s["context"].replace("_", " ")
+                fp = s.get("fingerprint") or s.get("summary", "")
+                if fp:
+                    lines.append(f"  Session {i+1} ({s['date']}, {ctx}):\n  {fp}")
+            if lines:
+                history_section = f"""
+PAST SESSION FINGERPRINTS — this is session {n + 1} for this user.
+Use these to identify what's recurring vs what's new in this conversation.
+{chr(10).join(lines)}
 """
 
-        # ── Resonance calibration ─────────────────────────────────
+        # ── Resonance calibration ─────────────────────────────────────
         resonance_section = ""
         if resonance_calibration:
             avoid = resonance_calibration.get("avoid", [])
             emphasize = resonance_calibration.get("emphasize", [])
             parts = []
             if avoid:
-                parts.append(f"  AVOID making strong claims about: {', '.join(avoid)}")
+                parts.append(f"  AVOID strong claims about: {', '.join(avoid)}")
             if emphasize:
                 parts.append(f"  PRIORITIZE observations about: {', '.join(emphasize)}")
             if parts:
                 resonance_section = "\nUSER FEEDBACK CALIBRATION:\n" + "\n".join(parts) + "\n"
 
-        # ── Context-specific coaching guide ───────────────────────
-        coaching_guide = CONTEXT_COACHING_GUIDE.get(context, CONTEXT_COACHING_GUIDE["social"])
-
-        # ── Notable signals ───────────────────────────────────────
-        notable_section = ""
-        if notable_signals:
-            notable_section = f"""
-MOST NOTABLE SIGNALS (build your observations around these first):
-{json.dumps(notable_signals, indent=2)}
-"""
-
-        # ── Dimensions ────────────────────────────────────────────
-        dimensions_section = ""
-        if dimensions:
-            dimensions_section = f"""
-BEHAVIORAL DIMENSION SCORES (1=lowest, 5=highest):
-{json.dumps(dimensions, indent=2)}
-"""
-
-        # ── Transcript ────────────────────────────────────────────
-        transcript_section = ""
-        if transcript_text:
-            transcript_section = f"""
-CONVERSATION TRANSCRIPT (partial — quote from this where relevant):
-{transcript_text}
-"""
-
-        types_str = ", ".join(conversation_types or [context])
-
-        return f"""You are a behavioral communication coach analyzing a real conversation.
-Generate a specific, honest coaching report. Write directly to the user ("you", "your").
-
-CONVERSATION TYPES: {types_str}
-DURATION: {data['session_duration_minutes']} minutes
-{baseline_section}{history_section}{resonance_section}{notable_section}{dimensions_section}
-ALL SESSION DATA:
-{json.dumps({k: v for k, v in data.items() if k != "baseline_comparison"}, indent=2)}
-{transcript_section}
-CONTEXT-SPECIFIC COACHING GUIDE (primary type: {context}):
-{coaching_guide}
-
-LANGUAGE RULES — follow these precisely:
-1. FACTS (measurements) → always direct, no hedging.
-2. BEHAVIORAL INTERPRETATIONS → hedge roughly half the time for genuinely uncertain inferences.
-3. PSYCHOLOGICAL / EMOTIONAL CLAIMS → always hedge.
-4. COACHING SUGGESTIONS → always direct. No hedging.
-5. Do not default to talk_ratio, speech_rate, or pauses unless they appear in MOST NOTABLE SIGNALS.
-6. Every observation must reference a specific value from the data.
-7. Quote from the transcript when it illustrates your point.
-8. Never use "SPEAKER_00" or "SPEAKER_01" — always "you" and "the other person".
-9. Output valid JSON only — no markdown, no code fences, no extra text.
+        types_str = ", ".join(conversation_types)
+
+        return f"""You are a behavioral communication coach. Read the conversation transcript below and provide a deep, specific analysis.
+
+CONTEXT: {types_str} — {coaching_guide}
+{transcript_section}{signals_section}{baseline_section}{history_section}{resonance_section}
+WHAT TO LOOK FOR (search the transcript specifically for these):
+1. Questions the other person asked that you didn't fully or directly answer
+2. Opinions, concerns, or points they raised that you talked past or didn't acknowledge
+3. Moments where you spoke for an extended stretch without giving them space to respond
+4. Interruptions — where you cut in before they finished their thought
+5. Moments where you seemed to misread what was being asked and answered something else
+
+RULES:
+1. Ground every observation in something that actually happened in the transcript
+2. Quote directly (in "quotes") when it makes the point concrete — be specific about where in the conversation
+3. Never refer to speakers as SPEAKER_00 or SPEAKER_01 — use "you" and "the other person"
+4. Write directly to the user ("you", "your")
+5. Be specific and honest — no vague generalities
+6. Don't flag signals that are within normal range for this context type
+7. If session history exists, explicitly note what's recurring vs what's different this time
+8. Output valid JSON only — no markdown, no code fences
 
 Output this exact JSON:
 {{
-  "conversation_types": {json.dumps(conversation_types or [context])},
-  "conversation_summary": "3-4 sentences. What was this conversation actually about? What happened? Reference specific things said. What was the overall tone and dynamic?",
-  "summary_sentence": "One direct sentence on the overall communication pattern.",
+  "conversation_summary": "3-4 sentences. What was this conversation actually about? What happened? What was the tone and dynamic? Reference specific things said.",
+  "summary_sentence": "One direct sentence capturing the dominant behavioral pattern in this conversation.",
   "observations": [
     {{
       "signal": "signal_name",
-      "observation": "Specific observation grounded in an actual value.",
-      "resonance_prompt": "A genuine reflective question."
+      "observation": "Specific observation grounded in what actually happened. Quote from transcript where it makes the point. Reference where in the conversation it occurred.",
+      "resonance_prompt": "A genuine reflective question specific to this moment — not generic."
     }},
     {{
-      "signal": "different_signal_name",
-      "observation": "Different observation on a different signal.",
-      "resonance_prompt": "Different reflective question."
+      "signal": "different_signal",
+      "observation": "Second observation on a different aspect of the conversation.",
+      "resonance_prompt": "Second reflective question."
     }},
     {{
-      "signal": "another_signal_name",
-      "observation": "Third observation on a third signal.",
+      "signal": "third_signal",
+      "observation": "Third observation.",
       "resonance_prompt": "Third reflective question."
     }}
   ],
@@ -352,14 +284,14 @@ Output this exact JSON:
     {{
       "priority": 1,
       "area": "area name",
-      "issue": "Specific issue with actual values.",
+      "issue": "What specifically happened in this conversation — quote or reference the moment.",
       "suggestion": "Exactly what to do differently next time.",
-      "why_it_matters": "Why this change improves communication in this type of conversation."
+      "why_it_matters": "Why this matters in this type of conversation."
     }},
     {{
       "priority": 2,
       "area": "different area",
-      "issue": "Second issue.",
+      "issue": "Second specific issue from this conversation.",
       "suggestion": "Second actionable suggestion.",
       "why_it_matters": "Why it matters."
     }},
@@ -371,19 +303,14 @@ Output this exact JSON:
       "why_it_matters": "Why it matters."
     }}
   ],
-  "dimension_narrative": {{
-    "emotional_state": "2 sentences on emotional state scores for this person in this conversation.",
-    "relational_dynamics": "2 sentences on how the two speakers connected or didn't.",
-    "communication_effectiveness": "2 sentences on how effectively they communicated.",
-    "conversation_arc": "2 sentences on how the conversation evolved."
-  }},
-  "notable_pattern": "The single most interesting behavioral pattern from this session. One sentence.",
+  "notable_pattern": "The single most interesting or surprising behavioral pattern from this session. One sentence.",
+  "fingerprint": "200-300 words. Describe what was observed in this {context.replace('_', ' ')} conversation: how the person engaged, how they handled questions directed at them, what they avoided, how they responded under pressure or when challenged, their listening patterns, whether they gave the other person space. Write in behavioral terms — no raw numbers. This will be used as context in future AI sessions to understand this person's patterns.",
   "data_confidence": "high"
 }}"""
 
     def generate_reflection_questions(self, signals: dict, insights: dict,
                                       transcript_text: str, context: str) -> list:
-        prompt = self._build_reflection_prompt(signals, insights, transcript_text, context)
+        prompt = self._build_reflection_prompt(insights, transcript_text, context)
         try:
             response = self.client.chat.completions.create(
                 model="llama-3.3-70b-versatile",
@@ -395,48 +322,45 @@ Output this exact JSON:
         except Exception:
             return []
 
-    def _build_reflection_prompt(self, signals: dict, insights: dict,
-                                  transcript_text: str, context: str) -> str:
-        coaching_areas = [c.get("area", "") for c in insights.get("coaching_suggestions", [])[:3]]
+    def _build_reflection_prompt(self, insights: dict, transcript_text: str, context: str) -> str:
         observations_text = "\n".join(
             f"- {o['observation']}" for o in insights.get("observations", [])[:3]
         )
-        talkpct = round(signals.get("talk_ratio", {}).get("user_ratio", 0.5) * 100)
-        fillers = signals.get("filler_words", {}).get("rate_per_100_words", 0)
+        coaching_areas = [c.get("area") for c in insights.get("coaching_suggestions", [])[:2] if c.get("area")]
+        summary = insights.get("conversation_summary", "")
 
-        return f"""You are a behavioral coach. A person just finished a {context.replace("_", " ")} conversation.
-Generate 3 reflection questions grounded in what actually happened in this session.
+        return f"""You are a behavioral coach. A person just finished a {context.replace('_', ' ')} conversation.
+Generate 3 reflection questions grounded in what actually happened.
 
-Session data:
-- Talk ratio: {talkpct}% (you spoke)
-- Filler rate: {fillers}/100 words
-- Coaching areas flagged: {", ".join(coaching_areas)}
+Conversation summary: {summary}
 
 Key observations:
 {observations_text}
 
+Coaching areas flagged: {", ".join(coaching_areas) if coaching_areas else "none"}
+
 Transcript sample:
-{transcript_text[:600] if transcript_text else "Not available"}
+{transcript_text[:800] if transcript_text else "Not available"}
 
 Rules:
-1. Each question must be specific to THIS conversation — not generic self-improvement advice.
-2. The answer explains what the data reveals and what it might mean. 2-3 sentences.
-3. Reference specific moments or patterns from the data/transcript where possible.
-4. Write directly to the person ("you", "your").
+1. Each question must be specific to THIS conversation — not generic self-improvement advice
+2. The answer explains what was observed and what it might mean. 2-3 sentences.
+3. Reference specific moments or patterns from the transcript where possible
+4. Write directly to the person ("you", "your")
+5. Output valid JSON only — no markdown, no code fences
 
-Output valid JSON only — no markdown, no code fences:
 [
   {{
-    "question": "A specific, non-generic reflection question grounded in this conversation.",
-    "answer": "2-3 sentences explaining what the data shows and what it might mean. Reference something specific."
+    "question": "Specific reflective question grounded in this conversation.",
+    "answer": "2-3 sentences on what was observed and what it might mean."
   }},
   {{
-    "question": "Second reflection question addressing a different aspect.",
-    "answer": "2-3 sentences on what the data reveals."
+    "question": "Second question addressing a different aspect.",
+    "answer": "2-3 sentences."
   }},
   {{
     "question": "Third question — surface something they might not have noticed.",
-    "answer": "2-3 sentences on the insight."
+    "answer": "2-3 sentences."
   }}
 ]"""
 
@@ -464,12 +388,11 @@ Output valid JSON only — no markdown, no code fences:
             return json.loads(clean.strip())
         except Exception:
             return {
-                "conversation_types": ["social"],
-                "conversation_summary": "Session analyzed successfully.",
-                "summary_sentence": "Session analyzed successfully.",
+                "conversation_summary": "Session analyzed.",
+                "summary_sentence": "Session analyzed.",
                 "observations": [],
                 "coaching_suggestions": [],
-                "dimension_narrative": {},
                 "notable_pattern": None,
-                "data_confidence": "low"
+                "fingerprint": None,
+                "data_confidence": "low",
             }

backend/pipeline/mirror_feed_synthesizer.py

@@ -0,0 +1,204 @@
+import json
+from groq import Groq
+
+VALID_TYPES = {"pattern", "context_contrast", "trend_up", "trend_down"}
+
+
+class MirrorFeedSynthesizer:
+    def __init__(self, api_key: str):
+        self.client = Groq(api_key=api_key)
+
+    def synthesize(self, sessions: list, user_summary: str = None) -> list:
+        """
+        sessions: list of dicts with keys:
+          context, date, fingerprint (str), notable_pattern (str)
+        user_summary: consolidated behavioral summary (present after 12+ sessions)
+        Returns list of mirror feed insight dicts, empty if < 2 usable sessions.
+        """
+        usable = [
+            s for s in sessions
+            if s.get("fingerprint") or s.get("notable_pattern")
+        ]
+        if not user_summary and len(usable) < 2:
+            return []
+
+        prompt = (
+            self._build_consolidated_prompt(user_summary, usable)
+            if user_summary
+            else self._build_prompt(usable)
+        )
+        try:
+            response = self.client.chat.completions.create(
+                model="llama-3.3-70b-versatile",
+                messages=[{"role": "user", "content": prompt}],
+                temperature=0.3,
+                max_tokens=1200,
+            )
+            return self._parse(response.choices[0].message.content)
+        except Exception:
+            return []
+
+    def _build_consolidated_prompt(self, user_summary: str, recent_sessions: list) -> str:
+        recent_block = ""
+        if recent_sessions:
+            recent_block = "\nMOST RECENT SESSIONS:\n"
+            for s in recent_sessions:
+                content = (s.get("fingerprint") or s.get("notable_pattern") or "").strip()
+                ctx = s["context"].replace("_", " ")
+                if content:
+                    recent_block += f"  {s['date']} ({ctx}): {content}\n"
+
+        return f"""You are identifying behavioral patterns for a person with an established behavioral history.
+
+CONSOLIDATED BEHAVIORAL PROFILE (built from all past sessions):
+{user_summary}
+{recent_block}
+TASK: Write 2–4 cross-session insights that reflect this person's established patterns and any recent shifts.
+
+BEHAVIORAL DIMENSIONS TO DRAW FROM (pick different ones for each insight):
+- Airtime & talk ratio — how much space they take vs. give
+- Listening & acknowledgment — whether they receive and respond to what was said
+- Emotional tone & composure — nervousness, reactivity, warmth
+- Clarity & structure — how organized and clear their speech is
+- Filler words & delivery confidence
+- Adaptability — how they adjust when the context or conversation shifts
+- Turn-taking & interruptions — how they manage conversation flow
+- Trend over time — how early sessions compare to recent ones
+- Context-specific vs universal tendencies
+
+RULES:
+1. Ground every insight in what the behavioral profile actually shows — no generic observations
+2. CRITICAL — each insight must address a DIFFERENT behavioral dimension from the list above. If one insight covers communication dominance, the others must come from genuinely different dimensions (emotional tone, clarity, adaptation, trend over time, etc.). Never rephrase the same root behavior as multiple separate insights.
+3. If only one or two strong patterns exist, write 2 insights — a focused feed beats padded repetition
+4. If recent sessions differ from the established profile, name the shift explicitly
+5. Write directly to the person ("you", "your")
+6. Be specific and honest — the person has enough history for direct, confident observations
+7. Output valid JSON only — no markdown, no code fences
+
+Output a JSON array of 2–4 objects:
+[
+  {{
+    "type": "pattern",
+    "text": "2-3 sentences. Specific observation grounded in the behavioral history.",
+    "tip": "One sentence. A concrete, actionable thing to try — include a brief example scenario so the person can picture it.",
+    "signal": "short_unique_slug"
+  }}
+]
+
+type must be exactly one of:
+- "pattern" — behavior consistent across the history
+- "context_contrast" — clear difference in behavior between contexts
+- "trend_up" — something that has improved over time or in recent sessions
+- "trend_down" — something that has declined or worsened"""
+
+    def _build_prompt(self, sessions: list) -> str:
+        n = len(sessions)
+
+        if n <= 3:
+            depth_note = (
+                "you have limited data — keep observations tentative. "
+                "Describe what you have noticed so far, not established patterns."
+            )
+        elif n <= 7:
+            depth_note = "patterns are beginning to emerge. Describe them with moderate confidence."
+        else:
+            depth_note = (
+                "you have enough data to describe established behavioral tendencies "
+                "with confidence."
+            )
+
+        ctx_map: dict = {}
+        for s in sessions:
+            ctx_map.setdefault(s["context"], []).append(s)
+
+        n_contexts = len(ctx_map)
+
+        blocks = []
+        for ctx, ctx_sessions in ctx_map.items():
+            label = ctx.replace("_", " ").title()
+            block = f"{label} ({len(ctx_sessions)} session{'s' if len(ctx_sessions) > 1 else ''}):\n"
+            for s in ctx_sessions:
+                content = (s.get("fingerprint") or s.get("notable_pattern") or "").strip()
+                if content:
+                    block += f"  {s['date']}: {content}\n"
+            blocks.append(block)
+
+        context_diff_line = (
+            f"- How their behavior differs between the {n_contexts} contexts they have recorded in\n"
+            if n_contexts >= 2 else ""
+        )
+
+        return f"""You are identifying behavioral patterns across {n} conversations recorded by the same person.
+
+SESSIONS BY CONTEXT:
+{''.join(blocks)}
+TASK: Write 2–4 cross-session insights. With {n} sessions, {depth_note}
+
+BEHAVIORAL DIMENSIONS TO DRAW FROM (pick different ones for each insight):
+- Airtime & talk ratio — how much space they take vs. give
+- Listening & acknowledgment — whether they receive and respond to what was said
+- Emotional tone & composure — nervousness, reactivity, warmth
+- Clarity & structure — how organized and clear their speech is
+- Filler words & delivery confidence
+- Adaptability — how they adjust when the context or conversation shifts
+- Turn-taking & interruptions — how they manage conversation flow
+- Trend over time — how early sessions compare to recent ones
+{context_diff_line}
+RULES:
+1. Every insight must require multiple sessions to observe — nothing you could say from one conversation alone
+2. CRITICAL — each insight must address a DIFFERENT behavioral dimension from the list above. If airtime/dominance is one insight, the others must come from different dimensions (e.g. emotional tone, clarity, trend over time). Never write two insights that are both about the same root behavior rephrased differently.
+3. If you can only find one strong pattern, write 2 insights total — a focused feed beats padded repetition
+4. Be specific — reference what was actually observed, not generic advice
+5. Write directly to the person ("you", "your")
+6. With few sessions, be honest about uncertainty — say "across your sessions so far" not "you always"
+7. Never refer to SPEAKER_00 or SPEAKER_01 — use "you" and "the other person"
+8. Output valid JSON only — no markdown, no code fences, no extra text
+
+Output a JSON array of 2–4 objects:
+[
+  {{
+    "type": "pattern",
+    "text": "2-3 sentences. Specific cross-session observation written directly to the person. Ground it in what was actually observed across multiple sessions.",
+    "tip": "One sentence. A concrete, actionable thing to try — include a brief example scenario so the person can picture it.",
+    "signal": "short_unique_slug"
+  }}
+]
+
+type must be exactly one of:
+- "pattern" — behavior that is consistent across multiple sessions
+- "context_contrast" — behavior that noticeably differs between contexts (only use if 2+ contexts exist with a clear, observable difference)
+- "trend_up" — something that has clearly improved from early sessions to recent ones
+- "trend_down" — something that has declined or worsened from early to recent sessions"""
+
+    def _parse(self, raw: str) -> list:
+        try:
+            clean = raw.strip()
+            if "```" in clean:
+                clean = clean.split("```")[1]
+                if clean.startswith("json"):
+                    clean = clean[4:]
+            data = json.loads(clean.strip())
+            if not isinstance(data, list):
+                return []
+            result, seen = [], set()
+            for item in data:
+                if not isinstance(item, dict):
+                    continue
+                t = item.get("type", "pattern")
+                if t not in VALID_TYPES:
+                    t = "pattern"
+                text = str(item.get("text", "")).strip()
+                tip = str(item.get("tip", "")).strip()
+                signal = str(item.get("signal", f"insight_{len(result)}")).strip()
+                if not text or signal in seen:
+                    continue
+                seen.add(signal)
+                entry = {"type": t, "text": text, "signal": signal}
+                if tip:
+                    entry["tip"] = tip
+                result.append(entry)
+                if len(result) >= 4:
+                    break
+            return result
+        except Exception:
+            return []

backend/pipeline/personality_synthesizer.py

@@ -24,7 +24,6 @@ class PersonalitySynthesizer:
         patterns = profile_data.get("patterns", [])
         trends = profile_data.get("trends", [])
 
-        # Paragraph depth instruction scales with session count
         if n <= 5:
             depth_note = (
                 "You have limited data (few sessions). Keep the portrait observational — "
@@ -63,23 +62,19 @@ class PersonalitySynthesizer:
         for k, v in dim_avgs.items():
             dim_lines += f"  {k}: {v}\n"
 
-        # Per-session log for grounding narratives in specific conversations
         session_log = ""
         if sessions_data:
-            session_log = "\nSESSION LOG (use these to ground dimension narratives — reference by context type):\n"
+            session_log = "\nSESSION LOG (reference by context type when writing the shape narrative):\n"
             for i, s in enumerate(sessions_data[-10:], 1):
                 scores = ", ".join(f"{k}={v}" for k, v in s.get("dim_scores", {}).items())
                 notable = s.get("notable_pattern", "")
                 notable_str = f' | pattern: "{notable}"' if notable else ""
-                quotes = s.get("sample_quotes", [])
-                quotes_str = ""
-                if quotes:
-                    q_list = "  /  ".join(f'"{q}"' for q in quotes[:2])
-                    quotes_str = f'\n     quotes: {q_list}'
+                fingerprint = s.get("fingerprint", "")
+                fp_str = f'\n     behavioral summary: {fingerprint[:200]}…' if fingerprint else ""
                 session_log += (
                     f"  {i}. {s['context']} | {scores} "
                     f"| fillers={s['filler_rate']}/100w | talk={s['talk_ratio_pct']}%"
-                    f"{notable_str}{quotes_str}\n"
+                    f"{notable_str}{fp_str}\n"
                 )
 
         return f"""You are building a behavioral personality portrait from {n} recorded conversations.
@@ -87,7 +82,7 @@ class PersonalitySynthesizer:
 {depth_note}
 {context_lines}{pattern_lines}{trend_lines}{dim_lines}{session_log}
 
-TASK: Write a personality portrait paragraph and 5 dimension narratives.
+TASK: Write a personality portrait paragraph, 5 dimension scores with labels, and one shape narrative.
 
 PARAGRAPH RULES:
 1. 3–4 sentences maximum. Write as if describing this person to someone who knows them.
@@ -98,17 +93,13 @@ PARAGRAPH RULES:
 5. Use "you" / "your" — address the person directly.
 6. Never write "seems to" or "appears to" — be direct about observed patterns.
 
-DIMENSION NARRATIVE RULES:
-1. Each narrative must be 2–3 sentences.
-2. Reference context types to ground the narrative — not specific dates.
-   Format: "In your [context type] conversations, ..." or "When you're in [context type] settings, ..."
-   If only one context type exists, describe the pattern within it.
-3. Explain what behavioural pattern drives the score — what actually happens in those settings.
-4. Do not repeat the score number in the narrative. The score is shown separately.
-5. Keep it human — write like a perceptive coach, not an analyst.
-6. If a session quote from the log illustrates the pattern, embed it inline using curly quotes — e.g.
-   'You tend to take charge — "let me explain how this works" is characteristic of how you steer conversations.'
-   Use at most one quote per narrative. Only use it if it genuinely supports the point.
+SHAPE NARRATIVE RULES (one paragraph shown below all 5 scores):
+1. 3–4 sentences. Synthesize what the COMBINATION of all 5 scores reveals — not a summary of each one individually.
+2. Focus on what the pattern of scores means together. High assertiveness + high listening together is unusual and worth naming. High composure + low confidence is a tension worth surfacing.
+3. If one score is notably higher or lower than the others, explain what that asymmetry likely means behaviourally.
+4. End with one concrete thing worth paying attention to, grounded in the overall score pattern.
+5. Write directly to the person ("you", "your"). Sound like a perceptive coach, not an analyst.
+6. Never list the dimension names. Synthesize them into a flowing, human observation.
 
 SCORING — derive dimension scores (integers 0–100) from the averages:
 - confidence: map confidence avg (1–5) → (avg-1)/4*100, reduce by 5pts per filler point above 3.0/100w
@@ -125,38 +116,34 @@ Output valid JSON only — no markdown, no code fences, no extra text:
       "key": "confidence",
       "name": "Confidence",
       "score": <integer 0-100>,
-      "label": "1–3 word label matching the score",
-      "narrative": "2–3 sentences. References a specific session from the log. Explains what happened."
+      "label": "1–3 word label matching the score"
     }},
     {{
       "key": "assertiveness",
       "name": "Assertiveness",
       "score": <integer 0-100>,
-      "label": "short label",
-      "narrative": "2–3 sentences referencing specific session(s)."
+      "label": "short label"
     }},
     {{
       "key": "listening",
       "name": "Listening Quality",
       "score": <integer 0-100>,
-      "label": "short label",
-      "narrative": "2–3 sentences referencing specific session(s)."
+      "label": "short label"
     }},
     {{
       "key": "composure",
       "name": "Composure",
       "score": <integer 0-100>,
-      "label": "short label",
-      "narrative": "2–3 sentences referencing specific session(s)."
+      "label": "short label"
     }},
     {{
       "key": "clarity",
       "name": "Communication Clarity",
       "score": <integer 0-100>,
-      "label": "short label",
-      "narrative": "2–3 sentences referencing specific session(s)."
+      "label": "short label"
     }}
-  ]
+  ],
+  "shape_narrative": "3–4 sentences on what the combination of these 5 scores reveals. Name tensions, unusual pairings, and what the overall pattern means for how this person shows up."
 }}"""
 
     def _parse(self, raw: str, dim_avgs: dict) -> dict:
@@ -176,11 +163,12 @@ Output valid JSON only — no markdown, no code fences, no extra text:
 
             return {
                 "paragraph": "Your behavioral profile is being built. Upload more sessions for deeper insights.",
+                "shape_narrative": "",
                 "dimensions": [
-                    {"key": "confidence",    "name": "Confidence",           "score": _scale("confidence"),                "label": "Moderate", "narrative": ""},
-                    {"key": "assertiveness", "name": "Assertiveness",        "score": _scale("assertiveness"),             "label": "Moderate", "narrative": ""},
-                    {"key": "listening",     "name": "Listening Quality",    "score": _scale("listening_quality"),         "label": "Moderate", "narrative": ""},
-                    {"key": "composure",     "name": "Composure",            "score": _scale("nervousness", invert=True),  "label": "Moderate", "narrative": ""},
-                    {"key": "clarity",       "name": "Communication Clarity","score": _scale("clarity"),                   "label": "Moderate", "narrative": ""},
+                    {"key": "confidence",    "name": "Confidence",            "score": _scale("confidence"),               "label": "Moderate"},
+                    {"key": "assertiveness", "name": "Assertiveness",         "score": _scale("assertiveness"),            "label": "Moderate"},
+                    {"key": "listening",     "name": "Listening Quality",     "score": _scale("listening_quality"),        "label": "Moderate"},
+                    {"key": "composure",     "name": "Composure",             "score": _scale("nervousness", invert=True), "label": "Moderate"},
+                    {"key": "clarity",       "name": "Communication Clarity", "score": _scale("clarity"),                  "label": "Moderate"},
                 ],
             }

backend/pipeline/transcriber.py

@@ -1,109 +1,77 @@
-import whisper
-import subprocess
 import os
+import subprocess
+from groq import Groq
 
-class Transcriber:
-    def __init__(self, model_size="base"):
-        print(f"Loading Whisper model: {model_size}")
-        self.model = whisper.load_model(model_size)
-        print("Whisper model loaded.")
-
-    def convert_to_wav(self, audio_path: str) -> str:
-        """Convert any audio format to WAV using ffmpeg."""
-        wav_path = audio_path.replace(".m4a", ".wav").replace(".mp3", ".wav").replace(".mp4", ".wav")
-        if wav_path == audio_path:
-            wav_path = audio_path + ".wav"
-
-        subprocess.run([
-            "ffmpeg", "-i", audio_path,
-            "-ar", "16000",
-            "-ac", "1",
-            "-y", wav_path
-        ], capture_output=True)
 
-        return wav_path
+class Transcriber:
+    def __init__(self, api_key: str):
+        self.client = Groq(api_key=api_key)
+        print("Groq Whisper transcriber ready.")
 
     def transcribe(self, audio_path: str) -> dict:
-        print(f"Transcribing: {audio_path}")
-
-        # Convert to WAV if needed
-        if not audio_path.endswith(".wav"):
-            print("Converting to WAV...")
-            wav_path = self.convert_to_wav(audio_path)
-        else:
-            wav_path = audio_path
-
-        result = self.model.transcribe(
-            wav_path,
-            word_timestamps=True,
-            verbose=False
+        print(f"Transcribing via Groq Whisper large-v3: {audio_path}")
+
+        # WAV at 16kHz mono can be ~37MB for a 20-min session, exceeding Groq's 25MB limit.
+        # Convert to MP3 at 64kbps (~9MB for 20 min) before uploading.
+        mp3_path = audio_path.rsplit(".", 1)[0] + "_upload.mp3"
+        subprocess.run(
+            ["ffmpeg", "-i", audio_path, "-ar", "16000", "-ac", "1",
+             "-b:a", "64k", "-y", mp3_path],
+            capture_output=True
         )
 
-        # Clean up converted file
-        if wav_path != audio_path and os.path.exists(wav_path):
-            os.remove(wav_path)
+        try:
+            with open(mp3_path, "rb") as f:
+                response = self.client.audio.transcriptions.create(
+                    file=(os.path.basename(mp3_path), f),
+                    model="whisper-large-v3",
+                    response_format="verbose_json",
+                    timestamp_granularities=["word", "segment"],
+                    temperature=0.0,
+                )
+        finally:
+            if os.path.exists(mp3_path):
+                os.remove(mp3_path)
+
+        # Groq verbose_json returns words at top level (not nested in segments).
+        # Map each word into its parent segment by timestamp overlap.
+        raw_words = getattr(response, "words", None) or []
+        if raw_words and isinstance(raw_words[0], dict):
+            word_list = [
+                {"word": w["word"], "start": round(w["start"], 3),
+                 "end": round(w["end"], 3), "score": 1.0}
+                for w in raw_words
+            ]
+        else:
+            word_list = [
+                {"word": w.word, "start": round(w.start, 3),
+                 "end": round(w.end, 3), "score": 1.0}
+                for w in raw_words
+            ]
 
+        raw_segments = getattr(response, "segments", None) or []
         segments = []
-        for seg in result["segments"]:
-            words = []
-            for w in seg.get("words", []):
-                words.append({
-                    "word": w["word"].strip(),
-                    "start": round(w["start"], 3),
-                    "end": round(w["end"], 3),
-                    "score": round(w.get("probability", 0), 3)
-                })
-
+        for seg in raw_segments:
+            if isinstance(seg, dict):
+                s_start, s_end, s_text = seg["start"], seg["end"], seg["text"]
+            else:
+                s_start, s_end, s_text = seg.start, seg.end, seg.text
+
+            seg_words = [
+                w for w in word_list
+                if w["start"] >= s_start - 0.05 and w["start"] < s_end + 0.05
+            ]
             segments.append({
-                "start": round(seg["start"], 3),
-                "end": round(seg["end"], 3),
-                "text": seg["text"].strip(),
-                "words": words
+                "start": round(s_start, 3),
+                "end": round(s_end, 3),
+                "text": s_text.strip(),
+                "words": seg_words,
             })
 
+        detected_language = getattr(response, "language", "unknown")
+        print(f"Detected language: {detected_language}")
+
         return {
             "segments": segments,
-            "language": result.get("language", "en")
+            "language": detected_language,
         }
-
-
-
-# import whisper
-# import json
-
-# class Transcriber:
-#     def __init__(self, model_size="base"):
-#         print(f"Loading Whisper model: {model_size}")
-#         self.model = whisper.load_model(model_size)
-#         print("Whisper model loaded.")
-
-#     def transcribe(self, audio_path: str) -> dict:
-#         print(f"Transcribing: {audio_path}")
-#         result = self.model.transcribe(
-#             audio_path,
-#             word_timestamps=True,
-#             verbose=False
-#         )
-
-#         segments = []
-#         for seg in result["segments"]:
-#             words = []
-#             for w in seg.get("words", []):
-#                 words.append({
-#                     "word": w["word"].strip(),
-#                     "start": round(w["start"], 3),
-#                     "end": round(w["end"], 3),
-#                     "score": round(w.get("probability", 0), 3)
-#                 })
-
-#             segments.append({
-#                 "start": round(seg["start"], 3),
-#                 "end": round(seg["end"], 3),
-#                 "text": seg["text"].strip(),
-#                 "words": words
-#             })
-
-#         return {
-#             "segments": segments,
-#             "language": result.get("language", "en")
-#         }

backend/requirements.txt

@@ -1,14 +1,12 @@
 fastapi
-uvicorn
+uvicorn[standard]
 python-multipart
-anthropic
-sqlalchemy
+groq
+supabase
 pydantic
 python-dotenv
 pydub
 librosa
 numpy
 scipy
-openai-whisper
 pyannote.audio
-whisperx

frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Behavioural Mirror</title>
+    <title>mirror.</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "mirror",
   "private": true,
   "version": "0.0.0",
   "type": "module",

frontend/src/App.jsx

@@ -8,8 +8,7 @@ import UploadView from "./components/UploadView"
 import ResultsView from "./components/ResultsView"
 import HistoryView from "./components/HistoryView"
 import ProfileView from "./components/ProfileView"
-
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+import HowItWorksView from "./components/HowItWorksView"
 
 export default function App() {
   const [session, setSession] = useState(null)
@@ -25,6 +24,16 @@ export default function App() {
   const [deleting, setDeleting] = useState(false)
   const [showReenroll, setShowReenroll] = useState(false)
 
+  // Each key tracks how many times we've navigated TO that view — re-mounting
+  // the wrapper div causes the .view-enter animation to fire every tab switch.
+  const [viewKeys, setViewKeys] = useState({ profile: 0, upload: 0, history: 0 })
+
+  useEffect(() => {
+    if (view === "profile" || view === "upload" || view === "history") {
+      setViewKeys(k => ({ ...k, [view]: k[view] + 1 }))
+    }
+  }, [view])
+
   const handleDeleteAccount = async () => {
     setDeleting(true)
     try {
@@ -54,14 +63,12 @@ export default function App() {
     api.get("/api/voiceprint/status")
       .then(res => setEnrollState(res.data.enrolled ? "done" : "needed"))
       .catch((e) => {
-        // Network error = backend offline → let user through to main app
-        // API error (4xx) = backend up but not enrolled → show enrollment
         setEnrollState(e.response ? "needed" : "done")
       })
   }, [session])
 
   if (authLoading || (session && enrollState === "checking")) return (
-    <div style={{ textAlign: "center", padding: 80, color: "#4a4865" }}>
+    <div style={{ textAlign: "center", padding: 80, color: "#2e3464" }}>
       Loading…
     </div>
   )
@@ -74,35 +81,80 @@ export default function App() {
 
   if (enrollState === "needed") return (
     <div style={{ maxWidth: 780, margin: "0 auto", padding: 24 }}>
-      <div style={{ marginBottom: 28 }}>
-        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: "#f0eeff",
-          letterSpacing: "-0.3px" }}>
-          🪞 Behavioural Mirror
+      <div style={{ marginBottom: 28, display: "flex", alignItems: "center", gap: 10 }}>
+        <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
+          <defs>
+            <linearGradient id="enr-g" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+            </linearGradient>
+          </defs>
+          <rect x="2"  y="12" width="4" height="4"  rx="2" fill="url(#enr-g)" opacity=".4"/>
+          <rect x="8"  y="8"  width="4" height="8"  rx="2" fill="url(#enr-g)" opacity=".65"/>
+          <rect x="14" y="4"  width="4" height="12" rx="2" fill="url(#enr-g)"/>
+          <rect x="20" y="8"  width="4" height="8"  rx="2" fill="url(#enr-g)" opacity=".65"/>
+          <rect x="26" y="12" width="4" height="4"  rx="2" fill="url(#enr-g)" opacity=".4"/>
+          <line x1="0" y1="17.5" x2="32" y2="17.5" stroke="#1e2438" strokeWidth="1"/>
+          <rect x="2"  y="18" width="4" height="4"  rx="2" fill="url(#enr-g)" opacity=".18"/>
+          <rect x="8"  y="18" width="4" height="8"  rx="2" fill="url(#enr-g)" opacity=".3"/>
+          <rect x="14" y="18" width="4" height="12" rx="2" fill="url(#enr-g)" opacity=".38"/>
+          <rect x="20" y="18" width="4" height="8"  rx="2" fill="url(#enr-g)" opacity=".3"/>
+          <rect x="26" y="18" width="4" height="4"  rx="2" fill="url(#enr-g)" opacity=".18"/>
+        </svg>
+        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.3px", color: "#f0eeff" }}>
+          mirror<span style={{ color: "#1d4ed8" }}>.</span>
         </h1>
-        <p style={{ color: "#4a4865", fontSize: 13, margin: "4px 0 0" }}>
-          Reflective insights from your conversations
-        </p>
       </div>
       <EnrollView onEnrolled={() => setEnrollState("done")} onSkip={() => setEnrollState("done")} />
     </div>
   )
 
   return (
-    <div style={{ maxWidth: 780, margin: "0 auto", padding: 24 }}>
+    <>
+    {/* Ambient background blobs */}
+    <div style={{ position: "fixed", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
+      <div style={{
+        position: "absolute", top: "-15%", right: "-8%",
+        width: 650, height: 650, borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(29,78,216,0.09) 0%, transparent 68%)",
+        filter: "blur(1px)",
+        animation: "blobDrift1 22s ease-in-out infinite",
+      }} />
+      <div style={{
+        position: "absolute", bottom: "-12%", left: "-6%",
+        width: 550, height: 550, borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(8,145,178,0.07) 0%, transparent 68%)",
+        filter: "blur(1px)",
+        animation: "blobDrift2 28s ease-in-out infinite",
+      }} />
+    </div>
+
+    <div style={{ maxWidth: 780, margin: "0 auto", padding: 24, position: "relative", zIndex: 1 }}>
 
       {/* Header */}
       <div style={{ marginBottom: 28, display: "flex",
         justifyContent: "space-between", alignItems: "flex-start" }}>
-        <div>
-          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.3px" }}>
-            <span style={{ background: G, WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
-              mirror
-            </span>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
+            <defs>
+              <linearGradient id="hdr-g" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="12" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".4"/>
+            <rect x="8"  y="8"  width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".65"/>
+            <rect x="14" y="4"  width="4" height="12" rx="2" fill="url(#hdr-g)"/>
+            <rect x="20" y="8"  width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".65"/>
+            <rect x="26" y="12" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".4"/>
+            <line x1="0" y1="17.5" x2="32" y2="17.5" stroke="#1e2438" strokeWidth="1"/>
+            <rect x="2"  y="18" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".18"/>
+            <rect x="8"  y="18" width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".3"/>
+            <rect x="14" y="18" width="4" height="12" rx="2" fill="url(#hdr-g)" opacity=".38"/>
+            <rect x="20" y="18" width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".3"/>
+            <rect x="26" y="18" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".18"/>
+          </svg>
+          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.3px", color: "#f0eeff" }}>
+            mirror<span style={{ color: "#1d4ed8" }}>.</span>
           </h1>
-          <p style={{ color: "#4a4865", fontSize: 13, margin: "4px 0 0" }}>
-            Reflective insights from your conversations
-          </p>
         </div>
 
         <div style={{ position: "relative" }}>
@@ -126,21 +178,24 @@ export default function App() {
           ) : (
             <>
               <button onClick={() => setShowAccountMenu(v => !v)}
-                style={{ background: "#14141f", border: "1px solid #2a2a42", borderRadius: 7,
+                style={{ background: "#151922", border: "1px solid #1e2438", borderRadius: 7,
                   padding: "6px 14px", cursor: "pointer", fontSize: 13, color: "#8b89aa" }}>
                 Account ▾
               </button>
               {showAccountMenu && (
                 <div style={{ position: "absolute", right: 0, top: "110%",
-                  background: "#14141f", border: "1px solid #2a2a42", borderRadius: 10,
-                  boxShadow: "0 8px 40px rgba(0,0,0,0.6)", zIndex: 20,
+                  background: "#151922", border: "1px solid #1e2438", borderRadius: 10,
+                  boxShadow: "0 8px 40px rgba(0,0,0,0.7)", zIndex: 20,
                   minWidth: 200, overflow: "hidden" }}>
                   <div style={{ padding: "8px 14px 6px", fontSize: 11,
-                    color: "#4a4865", borderBottom: "1px solid #2a2a42",
+                    color: "#4a4d6a", borderBottom: "1px solid #1e2438",
                     textTransform: "uppercase", letterSpacing: 0.5 }}>
                     Voice — {enrollState === "done" ? "enrolled" : "not enrolled"}
                   </div>
                   {[
+                    { label: "How it works",
+                      onClick: () => { setView("howItWorks"); setShowAccountMenu(false) },
+                      color: "#f0eeff" },
                     { label: enrollState === "done" ? "Retrain your voice" : "Enroll your voice",
                       onClick: () => { setShowReenroll(true); setShowAccountMenu(false) },
                       color: "#f0eeff" },
@@ -154,7 +209,7 @@ export default function App() {
                     <button key={label} onClick={onClick}
                       style={{ display: "block", width: "100%", padding: "10px 14px",
                         textAlign: "left", background: "none", border: "none",
-                        borderBottom: "1px solid #2a2a42",
+                        borderBottom: "1px solid #1e2438",
                         cursor: "pointer", fontSize: 13, color }}>
                       {label}
                     </button>
@@ -168,18 +223,18 @@ export default function App() {
 
       {/* Nav */}
       <nav style={{ display: "flex", gap: 0, marginBottom: 32,
-        borderBottom: "1px solid #2a2a42" }}>
+        borderBottom: "1px solid #1e2438" }}>
         {[
           { key: "profile", label: "Profile" },
           { key: "upload", label: "Upload" },
           { key: "history", label: "History" },
         ].map(({ key, label }) => (
           <button key={key} onClick={() => setView(key)}
+            className={`nav-tab${view === key ? " active" : ""}`}
             style={{ background: "none", border: "none", cursor: "pointer",
               fontWeight: view === key ? 600 : 400, fontSize: 14,
-              color: view === key ? "#e879f9" : "#8b89aa",
-              borderBottom: view === key ? "2px solid #e879f9" : "2px solid transparent",
-              padding: "0 16px 12px", transition: "color 0.15s" }}>
+              color: view === key ? "#5b9cf6" : "#8b89aa",
+              padding: "0 16px 12px" }}>
             {label}
           </button>
         ))}
@@ -187,9 +242,9 @@ export default function App() {
 
       {/* Re-enroll modal */}
       {showReenroll && (
-        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.8)",
+        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
           zIndex: 50, display: "flex", alignItems: "center", justifyContent: "center" }}>
-          <div style={{ background: "#14141f", border: "1px solid #2a2a42",
+          <div style={{ background: "#151922", border: "1px solid #1e2438",
             borderRadius: 16, maxWidth: 500, width: "90%", maxHeight: "90vh",
             overflowY: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.7)" }}>
             <div style={{ display: "flex", justifyContent: "space-between",
@@ -199,7 +254,7 @@ export default function App() {
               </span>
               <button onClick={() => setShowReenroll(false)}
                 style={{ background: "none", border: "none", cursor: "pointer",
-                  fontSize: 20, color: "#4a4865", lineHeight: 1 }}>×</button>
+                  fontSize: 20, color: "#4a4d6a", lineHeight: 1 }}>×</button>
             </div>
             <EnrollView
               onEnrolled={() => { setShowReenroll(false); setEnrollState("done") }}
@@ -209,22 +264,37 @@ export default function App() {
         </div>
       )}
 
+      {view === "howItWorks" && (
+        <HowItWorksView onBack={() => setView("profile")} />
+      )}
+
+      {/* Persistent views — kept mounted, but wrapper remounts each tab visit
+          so .view-enter animation fires every time you switch to that tab */}
       <div style={{ display: view === "profile" ? "block" : "none" }}>
-        <ProfileView active={view === "profile"} onUpload={() => setView("upload")} />
+        <div key={`profile-${viewKeys.profile}`} className="view-enter">
+          <ProfileView active={view === "profile"} onUpload={() => setView("upload")} />
+        </div>
       </div>
       <div style={{ display: view === "upload" ? "block" : "none" }}>
-        <UploadView
-          onResults={(r) => { setResults(r); setView("results") }}
-          onActivate={() => setView("upload")}
-        />
+        <div key={`upload-${viewKeys.upload}`} className="view-enter">
+          <UploadView
+            onResults={(r) => { setResults(r); setView("results") }}
+            onActivate={() => setView("upload")}
+          />
+        </div>
       </div>
       {view === "results" && results && (
-        <ResultsView results={results} onBack={() => setView("history")} />
+        <div className="view-enter">
+          <ResultsView results={results} onBack={() => setView("history")} />
+        </div>
       )}
       <div style={{ display: view === "history" ? "block" : "none" }}>
-        <HistoryView active={view === "history"}
-          onSelect={(r) => { setResults(r); setView("results") }} />
+        <div key={`history-${viewKeys.history}`} className="view-enter">
+          <HistoryView active={view === "history"}
+            onSelect={(r) => { setResults(r); setView("results") }} />
+        </div>
       </div>
     </div>
+    </>
   )
 }

frontend/src/components/AuthView.jsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from "react"
 import { supabase } from "../lib/supabase"
 
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
 export default function AuthView({ onAuth }) {
   const [mode, setMode] = useState("login")
@@ -46,19 +46,47 @@ export default function AuthView({ onAuth }) {
     }
   }
 
+  const handleGoogle = async () => {
+    setLoading(true)
+    setError("")
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: { redirectTo: window.location.origin },
+    })
+    if (error) {
+      setError(error.message)
+      setLoading(false)
+    }
+  }
+
   return (
     <div style={{ minHeight: "100vh", display: "flex", alignItems: "center",
       justifyContent: "center", padding: 24 }}>
-      <div style={{ width: "100%", maxWidth: 360 }}>
+      <div style={{ width: "100%", maxWidth: 360 }} className="view-enter">
 
         {/* Logo */}
         <div style={{ textAlign: "center", marginBottom: 36 }}>
-          <div style={{ fontSize: 44, marginBottom: 14 }}>🪞</div>
+          <svg width="48" height="48" viewBox="0 0 52 52" fill="none" style={{ marginBottom: 14 }}>
+            <defs>
+              <linearGradient id="auth-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#auth-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#auth-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".15"/>
+          </svg>
           <h1 style={{ fontSize: 24, fontWeight: 700, margin: "0 0 6px",
-            letterSpacing: "-0.5px", background: G,
-            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
-            backgroundClip: "text" }}>
-            mirror
+            letterSpacing: "-0.5px", color: "#f0eeff" }}>
+            mirror<span style={{ color: "#1d4ed8" }}>.</span>
           </h1>
           <p style={{ color: "#4a4865", fontSize: 13, margin: 0 }}>
             {mode === "login"
@@ -68,9 +96,12 @@ export default function AuthView({ onAuth }) {
         </div>
 
         {/* Card */}
-        <div style={{ background: "#14141f", border: "1px solid #2a2a42",
+        <div style={{
+          background: "linear-gradient(#151922, #151922) padding-box, linear-gradient(135deg, rgba(29,78,216,0.35), rgba(34,211,238,0.35)) border-box",
+          border: "1px solid transparent",
           borderRadius: 16, padding: 28,
-          boxShadow: "0 8px 40px rgba(0,0,0,0.5)" }}>
+          boxShadow: "0 8px 40px rgba(0,0,0,0.5)"
+        }}>
 
           <form onSubmit={handleSubmit}>
             <div style={{ marginBottom: 16 }}>
@@ -118,18 +149,44 @@ export default function AuthView({ onAuth }) {
             )}
 
             <button type="submit" disabled={loading}
+              className={loading ? "" : "btn-grad"}
               style={{ width: "100%", padding: "13px 24px",
-                background: loading ? "#1a1a2e" : G,
+                background: loading ? "#151922" : G,
                 color: loading ? "#4a4865" : "white",
-                border: loading ? "1px solid #2a2a42" : "none",
+                border: loading ? "1px solid #1e2438" : "none",
                 borderRadius: 8, fontSize: 15,
                 cursor: loading ? "not-allowed" : "pointer", fontWeight: 600,
-                boxShadow: loading ? "none" : "0 0 24px rgba(217,70,239,0.3)",
-                transition: "all 0.15s" }}>
+                boxShadow: loading ? "none" : "0 0 24px rgba(29,78,216,0.3)" }}>
               {loading ? "…" : mode === "login" ? "Sign in" : "Create account"}
             </button>
           </form>
 
+          {/* Divider */}
+          <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "20px 0" }}>
+            <div style={{ flex: 1, height: 1, background: "#1e2438" }} />
+            <span style={{ fontSize: 12, color: "#4a4865" }}>or</span>
+            <div style={{ flex: 1, height: 1, background: "#1e2438" }} />
+          </div>
+
+          {/* Google OAuth */}
+          <button type="button" onClick={handleGoogle} disabled={loading}
+            style={{ width: "100%", padding: "11px 24px", fontSize: 14, fontWeight: 500,
+              cursor: loading ? "not-allowed" : "pointer",
+              background: "#0e1320", color: "#d4d2e8",
+              border: "1px solid #1e2438", borderRadius: 8,
+              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
+              transition: "border-color 0.15s", opacity: loading ? 0.5 : 1 }}
+            onMouseEnter={e => e.currentTarget.style.borderColor = "#4a4865"}
+            onMouseLeave={e => e.currentTarget.style.borderColor = "#1e2438"}>
+            <svg width="17" height="17" viewBox="0 0 24 24">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+            </svg>
+            Continue with Google
+          </button>
+
           <div style={{ textAlign: "center", marginTop: 20 }}>
             <button
               onClick={() => { setMode(mode === "login" ? "signup" : "login"); setError(""); setMessage("") }}

frontend/src/components/EnrollView.jsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from "react"
 import api from "../lib/api"
 
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 const MIN_SECONDS = 20
 const MAX_SECONDS = 60
 
@@ -114,7 +114,7 @@ export default function EnrollView({ onEnrolled, onSkip }) {
         <button onClick={onEnrolled}
           style={{ padding: "12px 40px", background: G, color: "white",
             border: "none", borderRadius: 8, fontSize: 15, cursor: "pointer",
-            fontWeight: 600, boxShadow: "0 0 24px rgba(217,70,239,0.3)" }}>
+            fontWeight: 600, boxShadow: "0 0 24px rgba(29,78,216,0.3)" }}>
           Continue to app
         </button>
       </div>
@@ -138,8 +138,8 @@ export default function EnrollView({ onEnrolled, onSkip }) {
             {[1, 2, 3].map(r => (
               <div key={r} style={{
                 width: 10, height: 10, borderRadius: "50%",
-                background: r < round ? G : r === round ? "rgba(217,70,239,0.35)" : "#2a2a42",
-                boxShadow: r <= round ? "0 0 6px rgba(217,70,239,0.35)" : "none",
+                background: r < round ? G : r === round ? "rgba(29,78,216,0.35)" : "#1e2438",
+                boxShadow: r <= round ? "0 0 6px rgba(29,78,216,0.35)" : "none",
                 transition: "all 0.3s",
               }} />
             ))}
@@ -151,15 +151,15 @@ export default function EnrollView({ onEnrolled, onSkip }) {
       </div>
 
       {/* Round content */}
-      <div style={{ background: "#14141f", borderRadius: 12, padding: 20,
-        marginBottom: 14, border: "1px solid #2a2a42" }}>
+      <div style={{ background: "#151922", borderRadius: 12, padding: 20,
+        marginBottom: 14, border: "1px solid #1e2438" }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
           <span style={{ fontSize: 11, fontWeight: 700, color: "#8b89aa",
             textTransform: "uppercase", letterSpacing: 0.5 }}>
             Round {round}
           </span>
-          <span style={{ fontSize: 11, background: "rgba(217,70,239,0.1)",
-            color: "#e879f9", border: "1px solid rgba(217,70,239,0.25)",
+          <span style={{ fontSize: 11, background: "rgba(29,78,216,0.1)",
+            color: "#5b9cf6", border: "1px solid rgba(29,78,216,0.25)",
             borderRadius: 20, padding: "2px 8px", fontWeight: 600 }}>
             {roundConfig.badge}
           </span>
@@ -178,7 +178,7 @@ export default function EnrollView({ onEnrolled, onSkip }) {
           ))
         ) : (
           <p style={{ margin: "0 0 4px", fontSize: 14, color: "#8b89aa", lineHeight: 1.7,
-            background: "#1a1a2e", border: "1px solid #2a2a42", borderRadius: 8,
+            background: "#131827", border: "1px solid #1e2438", borderRadius: 8,
             padding: "12px 14px" }}>
             {roundConfig.content}
           </p>
@@ -188,14 +188,14 @@ export default function EnrollView({ onEnrolled, onSkip }) {
       </div>
 
       {/* Recording area */}
-      <div style={{ background: "#14141f", borderRadius: 14, padding: 28,
-        marginBottom: 18, textAlign: "center", border: "1px solid #2a2a42" }}>
+      <div style={{ background: "#151922", borderRadius: 14, padding: 28,
+        marginBottom: 18, textAlign: "center", border: "1px solid #1e2438" }}>
 
         {state === "idle" && (
           <>
             <div style={{ fontSize: 44, marginBottom: 12 }}>🎤</div>
             <p style={{ fontSize: 13, color: "#8b89aa", margin: 0, lineHeight: 1.6 }}>
-              Click <strong style={{ color: "#e879f9" }}>Start recording</strong>,
+              Click <strong style={{ color: "#5b9cf6" }}>Start recording</strong>,
               then read the sentences above clearly.
             </p>
           </>
@@ -208,13 +208,13 @@ export default function EnrollView({ onEnrolled, onSkip }) {
               fontVariantNumeric: "tabular-nums" }}>
               {elapsed}s
             </div>
-            <div style={{ height: 5, background: "#2a2a42", borderRadius: 3,
+            <div style={{ height: 5, background: "#1e2438", borderRadius: 3,
               margin: "14px 0 10px", overflow: "hidden" }}>
               <div style={{
                 height: "100%", borderRadius: 3,
                 background: canStop ? "#34d399" : G,
                 boxShadow: canStop ? "0 0 8px rgba(52,211,153,0.5)"
-                  : "0 0 8px rgba(217,70,239,0.4)",
+                  : "0 0 8px rgba(29,78,216,0.4)",
                 width: `${progressPct}%`,
                 transition: "width 0.8s linear, background 0.4s",
               }} />
@@ -265,7 +265,7 @@ export default function EnrollView({ onEnrolled, onSkip }) {
           style={{ width: "100%", padding: "13px 24px", background: G,
             color: "white", border: "none", borderRadius: 8, fontSize: 15,
             cursor: "pointer", fontWeight: 600, marginBottom: 10,
-            boxShadow: "0 0 24px rgba(217,70,239,0.3)" }}>
+            boxShadow: "0 0 24px rgba(29,78,216,0.3)" }}>
           Start recording
         </button>
       )}
@@ -273,13 +273,13 @@ export default function EnrollView({ onEnrolled, onSkip }) {
       {state === "recording" && (
         <button onClick={stopRecording} disabled={!canStop}
           style={{ width: "100%", padding: "13px 24px",
-            background: canStop ? G : "#14141f",
-            color: canStop ? "white" : "#2a2a42",
-            border: canStop ? "none" : "1px solid #2a2a42",
+            background: canStop ? G : "#151922",
+            color: canStop ? "white" : "#1e2438",
+            border: canStop ? "none" : "1px solid #1e2438",
             borderRadius: 8, fontSize: 15,
             cursor: canStop ? "pointer" : "not-allowed",
             fontWeight: 600, marginBottom: 10,
-            boxShadow: canStop ? "0 0 24px rgba(217,70,239,0.3)" : "none",
+            boxShadow: canStop ? "0 0 24px rgba(29,78,216,0.3)" : "none",
             transition: "all 0.3s" }}>
           {canStop ? `Stop — save round ${round}` : `Stop (${MIN_SECONDS - elapsed}s left)`}
         </button>
@@ -290,7 +290,7 @@ export default function EnrollView({ onEnrolled, onSkip }) {
           style={{ width: "100%", padding: "13px 24px", background: G,
             color: "white", border: "none", borderRadius: 8, fontSize: 15,
             cursor: "pointer", fontWeight: 600, marginBottom: 10,
-            boxShadow: "0 0 24px rgba(217,70,239,0.3)" }}>
+            boxShadow: "0 0 24px rgba(29,78,216,0.3)" }}>
           {round < 3 ? `Continue to Round ${round + 1} →` : "Submit voice enrollment"}
         </button>
       )}
@@ -298,7 +298,7 @@ export default function EnrollView({ onEnrolled, onSkip }) {
       {(state === "idle" || state === "recording") && (
         <button onClick={onSkip} disabled={state === "recording"}
           style={{ width: "100%", padding: "10px 24px", background: "none",
-            color: state === "recording" ? "#2a2a42" : "#4a4865",
+            color: state === "recording" ? "#1e2438" : "#4a4865",
             border: "none", fontSize: 13,
             cursor: state === "recording" ? "not-allowed" : "pointer" }}>
           Skip for now — analysis will still work, speaker detection may be less accurate

frontend/src/components/HistoryView.jsx

@@ -1,14 +1,17 @@
 import { useState, useEffect } from "react"
 import api from "../lib/api"
+import Reveal from "./Reveal"
 
 const CONTEXT_LABELS = {
-  social: "Social", collaborative: "Collaborative", evaluative: "Evaluative",
-  influential: "Influential", negotiation: "Negotiation", adversarial: "Adversarial",
-  developmental: "Developmental", support: "Support", intimate: "Intimate",
-  casual: "Casual", meeting: "Meeting", job_interview: "Job Interview",
-  disagreement: "Disagreement", presentation: "Presentation",
-  sales_call: "Sales Call", feedback_conversation: "Feedback",
-  coaching_call: "Coaching", first_date: "First Date",
+  social: "Casual & Low-Stakes", collaborative: "Collaborative",
+  evaluative: "Interview & Review · High Stakes", influential: "Persuading & Pitching",
+  negotiation: "Negotiation", adversarial: "Conflict & Friction",
+  developmental: "Coaching & Feedback", support: "Supportive Listening",
+  intimate: "Deep Personal", casual: "Casual & Low-Stakes", meeting: "Meeting",
+  job_interview: "Interview & Review · High Stakes", disagreement: "Conflict & Friction",
+  presentation: "Interview & Review · High Stakes", sales_call: "Persuading & Pitching",
+  feedback_conversation: "Coaching & Feedback", coaching_call: "Coaching & Feedback",
+  first_date: "Deep Personal",
 }
 
 const SCORE_COLORS = ["#f87171", "#fb923c", "#f59e0b", "#34d399", "#10b981"]
@@ -21,7 +24,7 @@ function MiniScoreBar({ score }) {
       {Array.from({ length: 5 }).map((_, i) => (
         <div key={i} style={{
           width: 10, height: 4, borderRadius: 2,
-          background: i < score ? color : "#2a2a42",
+          background: i < score ? color : "#1e2438",
         }} />
       ))}
     </div>
@@ -94,9 +97,9 @@ export default function HistoryView({ onSelect, active = false }) {
               <button key={ctx} onClick={() => setContextFilter(ctx)}
                 style={{ padding: "4px 12px", borderRadius: 20, fontSize: 11,
                   cursor: "pointer", fontWeight: isActive ? 600 : 400,
-                  background: isActive ? "rgba(217,70,239,0.12)" : "#14141f",
-                  color: isActive ? "#e879f9" : "#8b89aa",
-                  border: isActive ? "1px solid rgba(217,70,239,0.3)" : "1px solid #2a2a42",
+                  background: isActive ? "rgba(29,78,216,0.12)" : "#151922",
+                  color: isActive ? "#5b9cf6" : "#8b89aa",
+                  border: isActive ? "1px solid rgba(29,78,216,0.3)" : "1px solid #1e2438",
                   transition: "all 0.15s" }}>
                 {ctx === "all" ? "All" : (CONTEXT_LABELS[ctx] || ctx)}
               </button>
@@ -106,7 +109,7 @@ export default function HistoryView({ onSelect, active = false }) {
       </div>
 
       <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        {filtered.map(s => {
+        {filtered.map((s, i) => {
           const dims = s.dimensions || {}
           const dimSummary = [
             { label: "Emotional", score: dims.emotional_state?.confidence?.score },
@@ -116,17 +119,10 @@ export default function HistoryView({ onSelect, active = false }) {
           const sessionTypes = getTypes(s)
 
           return (
-            <div key={s.session_id}
-              style={{ border: "1px solid #2a2a42", borderRadius: 12, padding: 16,
-                background: "#14141f", transition: "border-color 0.15s, background 0.15s" }}
-              onMouseEnter={e => {
-                e.currentTarget.style.borderColor = "#3d3d60"
-                e.currentTarget.style.background = "#1a1a2e"
-              }}
-              onMouseLeave={e => {
-                e.currentTarget.style.borderColor = "#2a2a42"
-                e.currentTarget.style.background = "#14141f"
-              }}>
+            <Reveal key={s.session_id} delay={Math.min(i * 80, 280)}>
+            <div className="card"
+              style={{ border: "1px solid #1e2438", borderRadius: 12, padding: 16,
+                background: "#151922", boxShadow: "0 2px 16px rgba(0,0,0,0.3)" }}>
 
               <div onClick={() => onSelect({
                 signals: s.signals, insights: s.insights,
@@ -136,7 +132,7 @@ export default function HistoryView({ onSelect, active = false }) {
                 speaker_confirmed: s.speaker_confirmed || false,
                 session_id: s.session_id,
                 available_speakers: s.available_speakers || [],
-                transcript: s.transcript || [],
+                fingerprint: s.fingerprint || null,
               })} style={{ cursor: "pointer" }}>
 
                 {/* Top row */}
@@ -146,10 +142,10 @@ export default function HistoryView({ onSelect, active = false }) {
                     {sessionTypes.map((t, i) => (
                       <span key={t} style={{
                         fontSize: 11, fontWeight: i === 0 ? 700 : 500,
-                        color: i === 0 ? "#e879f9" : "#8b89aa",
+                        color: i === 0 ? "#5b9cf6" : "#8b89aa",
                         textTransform: "uppercase", letterSpacing: 0.4,
-                        background: i === 0 ? "rgba(217,70,239,0.1)" : "#1a1a2e",
-                        border: `1px solid ${i === 0 ? "rgba(217,70,239,0.25)" : "#2a2a42"}`,
+                        background: i === 0 ? "rgba(29,78,216,0.1)" : "#131827",
+                        border: `1px solid ${i === 0 ? "rgba(29,78,216,0.25)" : "#1e2438"}`,
                         padding: "2px 8px", borderRadius: 4,
                       }}>
                         {CONTEXT_LABELS[t] || t}
@@ -188,7 +184,7 @@ export default function HistoryView({ onSelect, active = false }) {
                 {/* Dimension score bars */}
                 {dimSummary.length > 0 && (
                   <div style={{ display: "flex", gap: 18, paddingTop: 10,
-                    borderTop: "1px solid #2a2a42" }}>
+                    borderTop: "1px solid #1e2438" }}>
                     {dimSummary.map(({ label, score }) => (
                       <div key={label} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                         <span style={{ fontSize: 10, color: "#4a4865" }}>{label}</span>
@@ -200,7 +196,7 @@ export default function HistoryView({ onSelect, active = false }) {
               </div>
 
               {/* Delete controls */}
-              <div style={{ marginTop: 10, paddingTop: 8, borderTop: "1px solid #2a2a42",
+              <div style={{ marginTop: 10, paddingTop: 8, borderTop: "1px solid #1e2438",
                 display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 8 }}>
                 {confirmDeleteId === s.session_id ? (
                   <>
@@ -227,18 +223,21 @@ export default function HistoryView({ onSelect, active = false }) {
                 )}
               </div>
             </div>
+            </Reveal>
           )
         })}
       </div>
 
       {sessions.length >= 3 && (
-        <div style={{ marginTop: 20, padding: 14,
-          background: "rgba(52,211,153,0.06)",
-          border: "1px solid rgba(52,211,153,0.2)",
-          borderRadius: 10, fontSize: 13, color: "#34d399" }}>
-          ✨ {sessions.length} sessions recorded — your behavioral profile is active.
-          Check the Profile tab.
-        </div>
+        <Reveal>
+          <div style={{ marginTop: 20, padding: 14,
+            background: "rgba(52,211,153,0.06)",
+            border: "1px solid rgba(52,211,153,0.2)",
+            borderRadius: 10, fontSize: 13, color: "#34d399" }}>
+            ✨ {sessions.length} sessions recorded — your behavioral profile is active.
+            Check the Profile tab.
+          </div>
+        </Reveal>
       )}
     </div>
   )

frontend/src/components/HowItWorksView.jsx

@@ -0,0 +1,275 @@
+import Reveal, { RevealItem } from "./Reveal"
+
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
+
+const FEATURES = [
+  {
+    icon: "🎤",
+    color: "#5b9cf6",
+    title: "Real Conversation Analysis",
+    body: "We read what was actually said, not just extracted numbers. The AI identifies missed questions, interrupted thoughts, and moments you talked past each other.",
+  },
+  {
+    icon: "🔄",
+    color: "#34d399",
+    title: "Mirror Feed",
+    body: "Patterns that only emerge across multiple sessions. After a few conversations, the mirror starts noticing what you consistently do — and don't do.",
+  },
+  {
+    icon: "🎯",
+    color: "#f59e0b",
+    title: "Context-Aware Insights",
+    body: "An interview is not a casual chat. We detect the type of conversation automatically and calibrate what good looks like for that specific setting.",
+  },
+  {
+    icon: "📊",
+    color: "#818cf8",
+    title: "Your Behavioral Shape",
+    body: "Five dimensions tracked across all your sessions — Confidence, Assertiveness, Listening Quality, Composure, and Clarity — shown as a radar you can watch shift.",
+  },
+  {
+    icon: "🎙️",
+    color: "#fb923c",
+    title: "Voice Recognition",
+    body: "Enroll your voice once. We identify which speaker is you across all future sessions automatically — no manual tagging needed.",
+  },
+  {
+    icon: "🔒",
+    color: "#5b9cf6",
+    title: "Privacy by Design",
+    body: "Your audio is processed and discarded. Transcripts are analyzed and never stored. Only your behavioral patterns are kept — never your actual words.",
+  },
+]
+
+const CONTEXT_TYPES = [
+  { label: "Interview & Review · High Stakes", desc: "Job interviews, performance reviews, presentations" },
+  { label: "Conflict & Friction",              desc: "Disagreements, pushback, difficult conversations" },
+  { label: "Collaborative",                    desc: "Team meetings, brainstorming, joint problem-solving" },
+  { label: "Persuading & Pitching",            desc: "Sales calls, pitches, convincing others" },
+  { label: "Negotiation",                      desc: "Deals, salary discussions, competing interests" },
+  { label: "Coaching & Feedback",              desc: "Mentoring, giving criticism, guiding others" },
+  { label: "Supportive Listening",             desc: "Emotional support, being there for someone" },
+  { label: "Deep Personal",                    desc: "Vulnerable, emotionally open conversations" },
+  { label: "Casual & Low-Stakes",              desc: "Everyday chat, catching up, informal exchanges" },
+]
+
+function Section({ label, title, subtitle, children }) {
+  return (
+    <div style={{ marginBottom: 64 }}>
+      {label && (
+        <div style={{ fontSize: 11, fontWeight: 700, color: "#5b9cf6",
+          textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 10,
+          textAlign: "center" }}>
+          {label}
+        </div>
+      )}
+      {title && (
+        <h2 style={{ fontSize: 24, fontWeight: 800, color: "#f0eeff",
+          margin: "0 0 10px", letterSpacing: "-0.5px", textAlign: "center",
+          lineHeight: 1.25 }}>
+          {title}
+        </h2>
+      )}
+      {subtitle && (
+        <p style={{ fontSize: 14, color: "#6b6888", textAlign: "center",
+          margin: "0 0 32px", lineHeight: 1.75, maxWidth: 520, marginInline: "auto" }}>
+          {subtitle}
+        </p>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default function HowItWorksView({ onBack }) {
+  return (
+    <div style={{ paddingBottom: 80 }} className="view-enter">
+
+      {/* Back */}
+      <button onClick={onBack}
+        style={{ background: "none", border: "none", cursor: "pointer",
+          color: "#4a4865", fontSize: 13, padding: 0, marginBottom: 40,
+          display: "flex", alignItems: "center", gap: 5 }}>
+        ← Back
+      </button>
+
+      {/* ── Hero ── */}
+      <Reveal>
+      <div style={{ textAlign: "center", marginBottom: 72 }}>
+        <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
+          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+            <defs>
+              <linearGradient id="hiw-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#hiw-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#hiw-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".15"/>
+          </svg>
+        </div>
+        <h1 style={{ fontSize: 30, fontWeight: 800, margin: "0 0 6px",
+          letterSpacing: "-0.7px", lineHeight: 1.2, color: "#f0eeff" }}>
+          Your conversations,
+        </h1>
+        <h1 style={{ fontSize: 30, fontWeight: 800, margin: "0 0 20px",
+          letterSpacing: "-0.7px", lineHeight: 1.2,
+          background: G, WebkitBackgroundClip: "text",
+          WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
+          reflected back.
+        </h1>
+        <p style={{ fontSize: 14, color: "#6b6888", lineHeight: 1.85,
+          maxWidth: 460, margin: "0 auto" }}>
+          Most people go through hundreds of conversations without ever seeing their
+          own patterns. mirror changes that — not by telling you what to say,
+          but by showing you how you actually show up.
+        </p>
+      </div>
+      </Reveal>
+
+      {/* ── The Problem ── */}
+      <Reveal>
+      <Section label="The Problem" title="You can't see yourself clearly in the moment.">
+        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+          {[
+            <>In every conversation you're focused on what to say next. Nobody tells you that you interrupted four times, spoke for 70% of the conversation, or always go quiet when you're challenged.</>,
+            <><span style={{ color: "#c4c2d8", fontWeight: 600 }}>Good coaches cost hundreds per hour.</span> Therapy takes years. Most feedback from the people around you is filtered through politeness or filtered out entirely.</>,
+            <><span style={{ color: "#c4c2d8", fontWeight: 600 }}>That's why mirror exists.</span> Upload a recording and we show you exactly what's happening — not what you think is happening.</>,
+          ].map((text, i) => (
+            <p key={i} style={{ margin: 0, fontSize: 14, color: "#8b89aa",
+              lineHeight: 1.85, textAlign: "center", maxWidth: 540, marginInline: "auto" }}>
+              {text}
+            </p>
+          ))}
+        </div>
+      </Section>
+      </Reveal>
+
+      {/* ── How It Works ── */}
+      <Reveal>
+      <Section label="How It Works" title="It gets smarter with every session.">
+        <div style={{ display: "flex", flexDirection: "column",
+          maxWidth: 520, margin: "0 auto" }}>
+          {[
+            {
+              num: "1",
+              title: "Upload a recording",
+              body: "Any conversation — a meeting, a call, a catch-up. 2 to 20 minutes. Hindi or English. What you talked about doesn't matter. How you showed up does.",
+            },
+            {
+              num: "2",
+              title: "AI reads what was actually said",
+              body: "Not just numbers — the actual conversation. We find what you missed, what you repeated, how you listened, and where you lost the thread.",
+            },
+            {
+              num: "3",
+              title: "Your profile builds over time",
+              body: "One session gives immediate feedback. Three sessions reveals patterns. Ten sessions and the mirror knows your behavioral tendencies better than most people who know you.",
+            },
+          ].map(({ num, title, body }, i, arr) => (
+            <div key={num} style={{ display: "flex", gap: 20, position: "relative",
+              paddingBottom: i < arr.length - 1 ? 34 : 0 }}>
+              {i < arr.length - 1 && (
+                <div style={{ position: "absolute", left: 17, top: 42,
+                  width: 2, height: "calc(100% - 14px)",
+                  background: "linear-gradient(to bottom, rgba(29,78,216,0.25), transparent)" }} />
+              )}
+              <div style={{ width: 36, height: 36, borderRadius: "50%", flexShrink: 0,
+                background: "rgba(29,78,216,0.1)", border: "1.5px solid rgba(29,78,216,0.3)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: 14, fontWeight: 700, color: "#5b9cf6", zIndex: 1 }}>
+                {num}
+              </div>
+              <div style={{ paddingTop: 5 }}>
+                <div style={{ fontSize: 14, fontWeight: 700, color: "#f0eeff",
+                  marginBottom: 6 }}>{title}</div>
+                <div style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.7 }}>{body}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+      </Reveal>
+
+      {/* ── Features Grid ── */}
+      <Reveal>
+      <Section label="What You Get" title="Everything the mirror sees."
+        subtitle="Each session adds signal. Here's what we track and what it builds into.">
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+          {FEATURES.map(({ icon, color, title, body }, idx) => (
+            <RevealItem key={title} index={idx}>
+            <div className="card"
+              style={{ background: "#151922",
+              border: "1px solid #1e2438", borderRadius: 14, padding: "20px 18px" }}>
+              <div style={{ width: 42, height: 42, borderRadius: 11,
+                background: `${color}12`, border: `1px solid ${color}28`,
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: 20, marginBottom: 14 }}>
+                {icon}
+              </div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff",
+                marginBottom: 7, lineHeight: 1.35 }}>
+                {title}
+              </div>
+              <div style={{ fontSize: 12, color: "#6b6888", lineHeight: 1.65 }}>
+                {body}
+              </div>
+            </div>
+            </RevealItem>
+          ))}
+        </div>
+      </Section>
+      </Reveal>
+
+      {/* ── Context Types ── */}
+      <Reveal>
+      <Section label="Context Types" title="Every setting is different."
+        subtitle="We automatically detect what kind of conversation you had and adjust the feedback. The more types you record in, the fuller the picture.">
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {CONTEXT_TYPES.map(({ label, desc }) => (
+            <div key={label} style={{ display: "flex", justifyContent: "space-between",
+              alignItems: "center", padding: "11px 16px",
+              background: "#151922", border: "1px solid #1e2438", borderRadius: 10,
+              gap: 12 }}>
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#c4c2d8",
+                flexShrink: 0 }}>
+                {label}
+              </span>
+              <span style={{ fontSize: 12, color: "#4a4865", textAlign: "right" }}>
+                {desc}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Section>
+      </Reveal>
+
+      {/* ── Privacy ── */}
+      <Reveal>
+      <div style={{ background: "#151922", border: "1px solid #1e2438",
+        borderRadius: 14, padding: "28px 24px", textAlign: "center" }}>
+        <div style={{ fontSize: 32, marginBottom: 14 }}>🔒</div>
+        <h3 style={{ fontSize: 17, fontWeight: 700, color: "#f0eeff",
+          margin: "0 0 10px" }}>
+          Privacy by design
+        </h3>
+        <p style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.8, margin: 0,
+          maxWidth: 420, marginInline: "auto" }}>
+          Your audio is processed and immediately discarded. Transcripts are analyzed
+          and never stored. The only thing we keep is a behavioral summary —
+          never your actual words.
+        </p>
+      </div>
+      </Reveal>
+
+    </div>
+  )
+}

frontend/src/components/OnboardingView.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
 const MOCK_DIMENSIONS = [
   { name: "Confidence",           score: 68, label: "Assured"   },
@@ -23,7 +23,7 @@ function MockDimBar({ name, score, label }) {
           {score}
         </span>
       </div>
-      <div style={{ height: 4, background: "#2a2a42", borderRadius: 2 }}>
+      <div style={{ height: 4, background: "#1e2438", borderRadius: 2 }}>
         <div style={{ height: "100%", borderRadius: 2,
           width: `${score}%`, background: G }} />
       </div>
@@ -34,7 +34,26 @@ function MockDimBar({ name, score, label }) {
 function StepConcept() {
   return (
     <div>
-      <div style={{ fontSize: 44, textAlign: "center", marginBottom: 18 }}>🪞</div>
+      <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}>
+        <svg width="48" height="48" viewBox="0 0 52 52" fill="none">
+          <defs>
+            <linearGradient id="onb-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+            </linearGradient>
+          </defs>
+          <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".35"/>
+          <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".6"/>
+          <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#onb-g)"/>
+          <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".6"/>
+          <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".35"/>
+          <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+          <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".15"/>
+          <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".27"/>
+          <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#onb-g)" opacity=".33"/>
+          <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".27"/>
+          <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".15"/>
+        </svg>
+      </div>
       <h1 style={{ fontSize: 26, fontWeight: 700, color: "#f0eeff",
         margin: "0 0 14px", lineHeight: 1.25, textAlign: "center",
         letterSpacing: "-0.4px" }}>
@@ -43,7 +62,7 @@ function StepConcept() {
       <p style={{ fontSize: 14, color: "#8b89aa", lineHeight: 1.8,
         margin: "0 0 28px", textAlign: "center" }}>
         Most people go through hundreds of conversations without ever seeing their
-        own patterns. Behavioural Mirror changes that — not by telling you what to
+        own patterns. mirror. changes that — not by telling you what to
         say, but by reflecting how you actually show up.
       </p>
       <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
@@ -56,7 +75,7 @@ function StepConcept() {
            "Most people only get this from years of therapy or a very honest coach. This is a faster mirror."],
         ].map(([title, body]) => (
           <div key={title} style={{ display: "flex", gap: 14, padding: "14px 16px",
-            background: "#14141f", border: "1px solid #2a2a42", borderRadius: 10 }}>
+            background: "#151922", border: "1px solid #1e2438", borderRadius: 10 }}>
             <div style={{ width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
               background: G, marginTop: 5 }} />
             <div>
@@ -104,13 +123,13 @@ function StepHow() {
             {i < arr.length - 1 && (
               <div style={{ position: "absolute", left: 16, top: 38,
                 width: 2, height: "calc(100% - 12px)",
-                background: "#2a2a42", zIndex: 0 }} />
+                background: "#1e2438", zIndex: 0 }} />
             )}
             <div style={{ width: 34, height: 34, borderRadius: "50%", flexShrink: 0,
-              background: "rgba(217,70,239,0.1)",
-              border: "1px solid rgba(217,70,239,0.3)",
+              background: "rgba(29,78,216,0.1)",
+              border: "1px solid rgba(29,78,216,0.3)",
               display: "flex", alignItems: "center", justifyContent: "center",
-              fontSize: 13, fontWeight: 700, color: "#e879f9", zIndex: 1 }}>
+              fontSize: 13, fontWeight: 700, color: "#5b9cf6", zIndex: 1 }}>
               {num}
             </div>
             <div style={{ paddingBottom: i < arr.length - 1 ? 26 : 0 }}>
@@ -137,7 +156,7 @@ function StepPreview() {
         not generic advice.
       </p>
 
-      <div style={{ background: "#14141f", border: "1px solid #2a2a42",
+      <div style={{ background: "#151922", border: "1px solid #1e2438",
         borderRadius: 12, padding: "18px 20px", position: "relative" }}>
         <div style={{ position: "absolute", top: 12, right: 14, fontSize: 10,
           color: "#3a3a52", textTransform: "uppercase", letterSpacing: 0.6,
@@ -146,12 +165,29 @@ function StepPreview() {
         </div>
 
         <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
-          <span style={{ fontSize: 14 }}>🪞</span>
+          <svg width="14" height="14" viewBox="0 0 32 32" fill="none" style={{ flexShrink: 0 }}>
+            <defs>
+              <linearGradient id="onb-sm-g" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="12" width="4" height="4"  rx="2" fill="url(#onb-sm-g)" opacity=".4"/>
+            <rect x="8"  y="8"  width="4" height="8"  rx="2" fill="url(#onb-sm-g)" opacity=".65"/>
+            <rect x="14" y="4"  width="4" height="12" rx="2" fill="url(#onb-sm-g)"/>
+            <rect x="20" y="8"  width="4" height="8"  rx="2" fill="url(#onb-sm-g)" opacity=".65"/>
+            <rect x="26" y="12" width="4" height="4"  rx="2" fill="url(#onb-sm-g)" opacity=".4"/>
+            <line x1="0" y1="17.5" x2="32" y2="17.5" stroke="#1e2438" strokeWidth="1"/>
+            <rect x="2"  y="18" width="4" height="4"  rx="2" fill="url(#onb-sm-g)" opacity=".18"/>
+            <rect x="8"  y="18" width="4" height="8"  rx="2" fill="url(#onb-sm-g)" opacity=".3"/>
+            <rect x="14" y="18" width="4" height="12" rx="2" fill="url(#onb-sm-g)" opacity=".38"/>
+            <rect x="20" y="18" width="4" height="8"  rx="2" fill="url(#onb-sm-g)" opacity=".3"/>
+            <rect x="26" y="18" width="4" height="4"  rx="2" fill="url(#onb-sm-g)" opacity=".18"/>
+          </svg>
           <span style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff" }}>The Mirror</span>
         </div>
 
         <p style={{ fontSize: 13, color: "#c4c2d8", lineHeight: 1.85,
-          margin: "0 0 18px", borderLeft: "2px solid rgba(217,70,239,0.35)",
+          margin: "0 0 18px", borderLeft: "2px solid rgba(29,78,216,0.35)",
           paddingLeft: 12 }}>
           You lead conversations confidently in collaborative settings, but pull back
           noticeably when you're being assessed. Your listening quality is consistently
@@ -164,7 +200,7 @@ function StepPreview() {
         </div>
 
         <div style={{ marginTop: 14, padding: "12px 14px",
-          background: "#0e0e1a", border: "1px dashed #2a2a42", borderRadius: 8,
+          background: "#0e1320", border: "1px dashed #1e2438", borderRadius: 8,
           display: "flex", gap: 12, alignItems: "flex-start" }}>
           <div style={{ fontSize: 13, color: "#4a4865", flexShrink: 0 }}>?</div>
           <div>
@@ -201,7 +237,7 @@ export default function OnboardingView({ onDone }) {
 
   return (
     <div style={{ minHeight: "100vh", display: "flex", alignItems: "center",
-      justifyContent: "center", padding: "32px 24px", background: "#09090f" }}>
+      justifyContent: "center", padding: "32px 24px", background: "#0f1117" }}>
       <div style={{ maxWidth: 500, width: "100%" }}>
 
         {/* Step indicators */}
@@ -213,7 +249,7 @@ export default function OnboardingView({ onDone }) {
               width: i === step ? 24 : 8,
               background: i <= step
                 ? G
-                : "#2a2a42",
+                : "#1e2438",
               transition: "all 0.3s ease",
             }} />
           ))}
@@ -241,7 +277,7 @@ export default function OnboardingView({ onDone }) {
             onClick={step < STEPS.length - 1 ? () => setStep(s => s + 1) : finish}
             style={{ padding: "12px 28px", background: G, color: "white",
               border: "none", borderRadius: 8, fontSize: 14, cursor: "pointer",
-              fontWeight: 600, boxShadow: "0 0 24px rgba(217,70,239,0.25)" }}>
+              fontWeight: 600, boxShadow: "0 0 24px rgba(29,78,216,0.25)" }}>
             {step < STEPS.length - 1 ? "Next →" : "Get started →"}
           </button>
         </div>

frontend/src/components/ProfileView.jsx

@@ -1,20 +1,24 @@
 import { useState, useEffect } from "react"
 import {
+  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
   LineChart, Line, XAxis, YAxis, Tooltip,
   ResponsiveContainer, CartesianGrid,
 } from "recharts"
 import api from "../lib/api"
+import Reveal, { RevealItem } from "./Reveal"
 
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
 const CONTEXT_LABELS = {
-  social: "Social", collaborative: "Collaborative", evaluative: "Evaluative",
-  influential: "Influential", negotiation: "Negotiation", adversarial: "Adversarial",
-  developmental: "Developmental", support: "Support", intimate: "Intimate",
-  casual: "Casual", meeting: "Meeting", job_interview: "Job Interview",
-  disagreement: "Disagreement", presentation: "Presentation",
-  sales_call: "Sales Call", feedback_conversation: "Feedback",
-  coaching_call: "Coaching", first_date: "First Date",
+  social: "Casual & Low-Stakes", collaborative: "Collaborative",
+  evaluative: "Interview & Review · High Stakes", influential: "Persuading & Pitching",
+  negotiation: "Negotiation", adversarial: "Conflict & Friction",
+  developmental: "Coaching & Feedback", support: "Supportive Listening",
+  intimate: "Deep Personal", casual: "Casual & Low-Stakes", meeting: "Meeting",
+  job_interview: "Interview & Review · High Stakes", disagreement: "Conflict & Friction",
+  presentation: "Interview & Review · High Stakes", sales_call: "Persuading & Pitching",
+  feedback_conversation: "Coaching & Feedback", coaching_call: "Coaching & Feedback",
+  first_date: "Deep Personal",
 }
 
 const SIGNAL_OPTIONS = [
@@ -26,193 +30,390 @@ const SIGNAL_OPTIONS = [
   { key: "response_latency",    label: "Response Latency", unit: "s" },
 ]
 
-const CONTEXT_COLORS = {
-  social: "#818cf8", collaborative: "#a78bfa", evaluative: "#f87171",
-  influential: "#f59e0b", negotiation: "#22d3ee", adversarial: "#fb923c",
-  developmental: "#34d399", support: "#2dd4bf", intimate: "#f472b6",
-  casual: "#818cf8", meeting: "#a78bfa", job_interview: "#f87171",
-  disagreement: "#fb923c", presentation: "#34d399",
-  sales_call: "#f59e0b", feedback_conversation: "#818cf8",
-  coaching_call: "#2dd4bf", first_date: "#f472b6",
+const TALK_RATIO_NORMS = {
+  evaluative: [55, 80], collaborative: [30, 55], social: [35, 65],
+  influential: [48, 68], negotiation: [35, 55], adversarial: [35, 55],
+  developmental: [25, 45], support: [15, 40], intimate: [35, 60],
 }
 
-const PATTERN_ICONS = {
-  consistently_high: "↑", consistently_low: "↓",
-  trending_improved: "↗", trending_declined: "↘",
+const DIMENSION_KEYWORDS = {
+  confidence:    s => s >= 65 ? "Confident"  : s >= 40 ? "Measured"   : "Cautious",
+  assertiveness: s => s >= 65 ? "Direct"     : s >= 40 ? "Balanced"   : "Reserved",
+  listening:     s => s >= 65 ? "Present"    : s >= 40 ? "Attentive"  : "Directive",
+  composure:     s => s >= 65 ? "Composed"   : s >= 40 ? "Steady"     : "Reactive",
+  clarity:       s => s >= 65 ? "Clear"      : s >= 40 ? "Articulate" : "Complex",
 }
 
-function DimensionCard({ dim }) {
-  const [expanded, setExpanded] = useState(false)
+function deriveKeywords(dimensions) {
+  if (!dimensions?.length) return []
+  return [...dimensions]
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 3)
+    .map(d => DIMENSION_KEYWORDS[d.key]?.(d.score))
+    .filter(Boolean)
+}
+
+function useCountUp(target, duration = 900) {
+  const [value, setValue] = useState(0)
+  useEffect(() => {
+    if (!target) return
+    const start = Date.now()
+    const tick = () => {
+      const elapsed = Date.now() - start
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+      setValue(Math.round(eased * target))
+      if (progress < 1) requestAnimationFrame(tick)
+    }
+    requestAnimationFrame(tick)
+  }, [target])
+  return value
+}
+
+// ── Section label ─────────────────────────────────────────────────
+
+function SectionLabel({ children }) {
   return (
-    <div style={{ background: "#0e0e1a", border: "1px solid #2a2a42",
-      borderRadius: 10, padding: "14px 16px", transition: "border-color 0.15s",
-      borderColor: expanded ? "rgba(217,70,239,0.35)" : "#2a2a42" }}>
-      <div onClick={() => setExpanded(!expanded)}
-        style={{ display: "flex", justifyContent: "space-between",
-          alignItems: "center", cursor: "pointer", userSelect: "none" }}>
-        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff" }}>{dim.name}</span>
-          <span style={{ fontSize: 11, color: "#4a4865" }}>{dim.label}</span>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-          <span style={{ fontSize: 15, fontWeight: 700,
-            background: G, WebkitBackgroundClip: "text",
-            WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
-            {dim.score}
-          </span>
-          <span style={{ fontSize: 10, color: "#4a4865" }}>{expanded ? "▲" : "▼"}</span>
-        </div>
-      </div>
-      <div style={{ height: 4, background: "#2a2a42", borderRadius: 2, margin: "10px 0 0" }}>
-        <div style={{
-          height: "100%", borderRadius: 2,
-          width: `${dim.score}%`,
-          background: G,
-          transition: "width 0.6s ease",
-          boxShadow: "0 0 6px rgba(217,70,239,0.3)",
-        }} />
-      </div>
-      {expanded && dim.narrative && (
-        <div style={{ fontSize: 13, color: "#8b89aa", lineHeight: 1.75,
-          marginTop: 12, borderTop: "1px solid #2a2a42", paddingTop: 12 }}>
-          {dim.narrative}
-        </div>
-      )}
+    <div style={{
+      fontSize: 10, fontWeight: 700, letterSpacing: 1.4,
+      textTransform: "uppercase", marginBottom: 4,
+      background: G, WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent", backgroundClip: "text",
+    }}>
+      {children}
     </div>
   )
 }
 
-function MirrorFeed({ sessions }) {
-  const [expanded, setExpanded] = useState(false)
-  if (!sessions || sessions.length === 0) return null
-  const latest = sessions[0]
+// ── Mirror Feed ───────────────────────────────────────────────────
+
+const FEED_TYPE_CONFIG = {
+  context_contrast: { color: "#818cf8", label: "Context contrast", icon: "↕" },
+  trend_up:         { color: "#34d399", label: "Improving",         icon: "↑" },
+  trend_down:       { color: "#fb923c", label: "Declining",         icon: "↓" },
+  pattern:          { color: "#f59e0b", label: "Consistent pattern", icon: "●" },
+}
+
+function MirrorFeed({ insights }) {
+  if (!insights) return null
+
+  if (!insights.length) {
+    return (
+      <p style={{ fontSize: 13, color: "#4a4d6a", margin: 0, lineHeight: 1.7 }}>
+        Upload conversations across different contexts — patterns that span multiple
+        sessions will appear here.
+      </p>
+    )
+  }
 
   return (
-    <div style={{ background: "#14141f", border: "1px solid #2a2a42",
-      borderRadius: 12, overflow: "hidden" }}>
+    <div style={{ background: "#151922", border: "1px solid #1e2438",
+      borderRadius: 12, overflow: "hidden",
+      boxShadow: "0 2px 16px rgba(0,0,0,0.3)" }}>
+      {insights.map((insight, i) => {
+        const cfg = FEED_TYPE_CONFIG[insight.type] || FEED_TYPE_CONFIG.pattern
+        return (
+          <RevealItem key={i} index={i}>
+          <div style={{
+            display: "flex", gap: 14, padding: "14px 18px",
+            borderBottom: i < insights.length - 1 ? "1px solid #131827" : "none",
+            alignItems: "flex-start",
+          }}>
+            <div style={{
+              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
+              background: `${cfg.color}18`,
+              border: `1px solid ${cfg.color}30`,
+              display: "flex", alignItems: "center", justifyContent: "center",
+              fontSize: 14, color: cfg.color, fontWeight: 700, marginTop: 1,
+            }}>
+              {cfg.icon}
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: cfg.color,
+                textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 5 }}>
+                {cfg.label}
+              </div>
+              <p style={{ margin: 0, fontSize: 13, color: "#c4c2d8", lineHeight: 1.75 }}>
+                {insight.text}
+              </p>
+              {insight.tip && (
+                <p style={{
+                  margin: "10px 0 0", fontSize: 12, color: "#6b6888", lineHeight: 1.65,
+                  paddingTop: 10, borderTop: "1px solid #131827",
+                }}>
+                  <span style={{ color: "#4a4865", fontWeight: 600 }}>— </span>
+                  {insight.tip}
+                </p>
+              )}
+            </div>
+          </div>
+          </RevealItem>
+        )
+      })}
+    </div>
+  )
+}
 
-      {/* Header */}
-      <div onClick={() => setExpanded(v => !v)}
-        style={{ padding: "14px 18px", display: "flex", justifyContent: "space-between",
-          alignItems: "center", cursor: "pointer",
-          borderBottom: expanded ? "1px solid #2a2a42" : "none" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff" }}>Mirror Feed</span>
-          <span style={{ fontSize: 11, color: "#4a4865", background: "#1a1a2e",
-            border: "1px solid #2a2a42", borderRadius: 10, padding: "1px 7px" }}>
-            {sessions.length} session{sessions.length > 1 ? "s" : ""}
-          </span>
-        </div>
-        <span style={{ fontSize: 11, color: "#4a4865" }}>
-          {expanded ? "▲ close" : "▼ expand"}
-        </span>
+// ── Flat dimension bar ─────────────────────────────��──────────────
+
+function FlatBar({ d }) {
+  const score = useCountUp(d.score)
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 14,
+      padding: "10px 0", borderBottom: "1px solid #131827" }}>
+      <span style={{ fontSize: 13, fontWeight: 500, color: "#c4c2d8",
+        minWidth: 130, flexShrink: 0 }}>{d.name}</span>
+      <div style={{ flex: 1, height: 4, background: "#1e2438", borderRadius: 2 }}>
+        <div style={{ height: "100%", borderRadius: 2, width: `${score}%`,
+          background: G, transition: "width 0.5s ease",
+          boxShadow: "0 0 8px rgba(59,130,246,0.4)" }} />
       </div>
+      <span style={{ fontSize: 14, fontWeight: 700, minWidth: 30, textAlign: "right",
+        background: G, WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
+        {score}
+      </span>
+    </div>
+  )
+}
 
-      {!expanded ? (
-        /* Collapsed: most recent session — 2 full + 3rd fading */
-        <div style={{ padding: "14px 18px 16px" }}>
-          <div style={{ fontSize: 11, marginBottom: 12,
-            display: "flex", alignItems: "center", gap: 6 }}>
-            <span style={{ color: "#4a4865" }}>{latest.date}</span>
-            <span style={{ color: "#2a2a42" }}>·</span>
-            <span style={{ color: CONTEXT_COLORS[latest.context] || "#8b89aa", fontWeight: 500 }}>
-              {CONTEXT_LABELS[latest.context] || latest.context}
-            </span>
-          </div>
+// ── Pentagon radar chart ──────────────────────────────────────────
 
-          {latest.highlights[0] && (
-            <div style={{ display: "flex", gap: 10, marginBottom: 10, alignItems: "flex-start" }}>
-              <span style={{ color: "#3a3a52", fontSize: 13, marginTop: 2, flexShrink: 0 }}>—</span>
-              <span style={{ fontSize: 13, color: "#c4c2d8", lineHeight: 1.6 }}>
-                {latest.highlights[0]}
-              </span>
-            </div>
-          )}
+function PentagonChart({ dimensions }) {
+  if (!dimensions?.length) return null
 
-          {latest.highlights[1] && (
-            <div style={{ display: "flex", gap: 10, marginBottom: 10, alignItems: "flex-start" }}>
-              <span style={{ color: "#3a3a52", fontSize: 13, marginTop: 2, flexShrink: 0 }}>—</span>
-              <span style={{ fontSize: 13, color: "#c4c2d8", lineHeight: 1.6 }}>
-                {latest.highlights[1]}
-              </span>
-            </div>
-          )}
+  const SHORT = {
+    "Listening Quality": "Listening",
+    "Communication Clarity": "Clarity",
+  }
 
-          {/* 3rd pointer — partial fade peek */}
-          {latest.highlights[2] && (
-            <div style={{ maxHeight: 22, overflow: "hidden",
-              maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%)",
-              WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%)" }}>
-              <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
-                <span style={{ color: "#3a3a52", fontSize: 13, marginTop: 2, flexShrink: 0 }}>—</span>
-                <span style={{ fontSize: 13, color: "#c4c2d8", lineHeight: 1.6 }}>
-                  {latest.highlights[2]}
-                </span>
-              </div>
+  const radarData = dimensions.map(d => ({
+    subject: SHORT[d.name] || d.name,
+    score: d.score,
+    fullMark: 100,
+  }))
+
+  return (
+    <div style={{
+      background: "#151922", border: "1px solid #1e2438",
+      borderRadius: 12, padding: "8px 0",
+      boxShadow: "0 2px 16px rgba(0,0,0,0.3)"
+    }}>
+      <ResponsiveContainer width="100%" height={220}>
+        <RadarChart data={radarData} cx="50%" cy="50%" outerRadius="66%">
+          <PolarGrid stroke="#1e2438" />
+          <PolarAngleAxis dataKey="subject" tick={{ fill: "#8b89aa", fontSize: 11 }} />
+          <PolarRadiusAxis domain={[0, 100]} tick={false} axisLine={false} />
+          <Radar dataKey="score"
+            stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.18} strokeWidth={2.5} />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// ── You Across Contexts ───────────────────────────────────────────
+
+function ContextComparison({ byContext }) {
+  const contexts = Object.keys(byContext || {})
+  const [activeCtx, setActiveCtx] = useState(contexts[0] || null)
+  if (!contexts.length || !activeCtx) return null
+
+  const data = byContext[activeCtx]
+  const norm = TALK_RATIO_NORMS[activeCtx]
+  const withinNorm = norm ? (data.talk_ratio >= norm[0] && data.talk_ratio <= norm[1]) : null
+  const normColor = withinNorm === null ? "#8b89aa" : withinNorm ? "#34d399" : "#f59e0b"
+
+  return (
+    <div>
+      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
+        {contexts.map(ctx => (
+          <button key={ctx} onClick={() => setActiveCtx(ctx)}
+            style={{ padding: "5px 12px", borderRadius: 20, fontSize: 12,
+              cursor: "pointer", border: "1px solid", transition: "all 0.15s",
+              background: activeCtx === ctx ? "rgba(59,130,246,0.12)" : "#151922",
+              color: activeCtx === ctx ? "#60a5fa" : "#8b89aa",
+              borderColor: activeCtx === ctx ? "rgba(59,130,246,0.3)" : "#1e2438" }}>
+            {CONTEXT_LABELS[ctx] || ctx}
+            <span style={{ opacity: 0.5, marginLeft: 5, fontSize: 10 }}>
+              {byContext[ctx].count}×
+            </span>
+          </button>
+        ))}
+      </div>
+
+      <div style={{ background: "#151922", border: "1px solid #1e2438",
+        borderRadius: 10, padding: "16px 18px" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
+          <div>
+            <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 5 }}>Talk ratio</div>
+            <div style={{ fontSize: 22, fontWeight: 700, color: "#f0eeff", lineHeight: 1 }}>
+              {data.talk_ratio}<span style={{ fontSize: 13, color: "#8b89aa" }}>%</span>
             </div>
-          )}
-        </div>
-      ) : (
-        /* Expanded: scrollable across all sessions */
-        <div style={{ maxHeight: 440, overflowY: "auto", padding: "16px 18px",
-          scrollbarWidth: "thin", scrollbarColor: "#2a2a42 transparent" }}>
-          {sessions.map((s, si) => (
-            <div key={si} style={{ marginBottom: si < sessions.length - 1 ? 20 : 0 }}>
-              <div style={{ fontSize: 11, marginBottom: 10,
-                display: "flex", alignItems: "center", gap: 6 }}>
-                <span style={{ color: "#4a4865" }}>{s.date}</span>
-                <span style={{ color: "#2a2a42" }}>·</span>
-                <span style={{ color: CONTEXT_COLORS[s.context] || "#8b89aa", fontWeight: 500 }}>
-                  {CONTEXT_LABELS[s.context] || s.context}
-                </span>
+            {norm && (
+              <div style={{ fontSize: 11, color: normColor, marginTop: 4 }}>
+                {withinNorm ? "✓" : "↑"} norm {norm[0]}–{norm[1]}%
               </div>
-              {s.highlights.map((h, hi) => (
-                <div key={hi} style={{ display: "flex", gap: 10, marginBottom: 10,
-                  alignItems: "flex-start" }}>
-                  <span style={{ color: "#3a3a52", fontSize: 13, marginTop: 2, flexShrink: 0 }}>—</span>
-                  <span style={{ fontSize: 13, color: "#c4c2d8", lineHeight: 1.6 }}>{h}</span>
-                </div>
-              ))}
-              {si < sessions.length - 1 && (
-                <div style={{ height: 1, background: "#1e1e2e", margin: "0 0 0" }} />
-              )}
+            )}
+          </div>
+          <div>
+            <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 5 }}>Speech rate</div>
+            <div style={{ fontSize: 22, fontWeight: 700, color: "#f0eeff", lineHeight: 1 }}>
+              {data.wpm}<span style={{ fontSize: 13, color: "#8b89aa" }}> wpm</span>
             </div>
-          ))}
+          </div>
+          <div>
+            <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 5 }}>Filler rate</div>
+            <div style={{ fontSize: 22, fontWeight: 700, color: "#f0eeff", lineHeight: 1 }}>
+              {data.filler_rate}<span style={{ fontSize: 13, color: "#8b89aa" }}>/100w</span>
+            </div>
+          </div>
         </div>
-      )}
+      </div>
     </div>
   )
 }
 
-function StatCard({ label, value, unit, sub }) {
+// ── What's Changed ────────────────────────────────────────────────
+
+function WhatsChanged({ trendLines, lastDelta }) {
+  const dimChanges = lastDelta?.changes || []
+  const signalTrends = trendLines || []
+  if (!dimChanges.length && !signalTrends.length) return null
+
   return (
-    <div style={{ textAlign: "center", padding: "16px 10px",
-      border: "1px solid #2a2a42", borderRadius: 10, background: "#14141f" }}>
-      <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 5 }}>{label}</div>
-      <div style={{ fontSize: 22, fontWeight: 700,
-        background: G, WebkitBackgroundClip: "text",
-        WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
-        {value}<span style={{ fontSize: 13, fontWeight: 500 }}>{unit}</span>
+    <div>
+      <div style={{ marginBottom: 12 }}>
+        <SectionLabel>Trends</SectionLabel>
+        <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
+          What's Changed
+        </h2>
+        <p style={{ fontSize: 12, color: "#4a4d6a", margin: "4px 0 0" }}>
+          Movement detected across your sessions
+        </p>
+      </div>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+        {dimChanges.map((c, i) => (
+          <div key={i} style={{
+            display: "flex", alignItems: "center", gap: 5,
+            padding: "7px 13px", borderRadius: 20, fontSize: 12, fontWeight: 600,
+            background: c.direction === "up" ? "rgba(52,211,153,0.08)" : "rgba(248,113,113,0.08)",
+            border: `1px solid ${c.direction === "up" ? "rgba(52,211,153,0.25)" : "rgba(248,113,113,0.25)"}`,
+            color: c.direction === "up" ? "#34d399" : "#f87171",
+          }}>
+            {c.direction === "up" ? "↑" : "↓"} {c.dimension}
+            <span style={{ opacity: 0.7 }}>
+              {" "}{c.direction === "up" ? "+" : ""}{c.diff}pts
+            </span>
+          </div>
+        ))}
+        {signalTrends.map((t, i) => (
+          <div key={`t${i}`} style={{
+            display: "flex", alignItems: "center", gap: 5,
+            padding: "7px 13px", borderRadius: 20, fontSize: 12, fontWeight: 600,
+            background: t.direction === "improved" ? "rgba(52,211,153,0.08)" : "rgba(248,113,113,0.08)",
+            border: `1px solid ${t.direction === "improved" ? "rgba(52,211,153,0.25)" : "rgba(248,113,113,0.25)"}`,
+            color: t.direction === "improved" ? "#34d399" : "#f87171",
+          }}>
+            {t.direction === "improved" ? "↗" : "↘"}
+            {" "}{t.signal.replace(/_/g, " ")}
+            <span style={{ opacity: 0.7 }}>
+              {" "}{t.old}{t.unit} → {t.new}{t.unit}
+            </span>
+          </div>
+        ))}
       </div>
-      {sub && <div style={{ fontSize: 11, color: "#4a4865", marginTop: 3 }}>{sub}</div>}
     </div>
   )
 }
 
-function SectionHeader({ title, sub }) {
+// ── Signal Trends (collapsible) ───────────────────────────────────
+
+function SignalTrends({ chartData, trendLines }) {
+  const [open, setOpen] = useState(false)
+  const [activeSignal, setActiveSignal] = useState("talk_ratio")
+  if (chartData.length < 2) return null
+
+  const signalConfig = SIGNAL_OPTIONS.find(s => s.key === activeSignal)
+
   return (
-    <div style={{ marginBottom: 12 }}>
-      <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>{title}</h2>
-      {sub && <p style={{ fontSize: 12, color: "#4a4865", margin: "4px 0 0" }}>{sub}</p>}
+    <div className="card" style={{ border: "1px solid #1e2438", borderRadius: 12,
+      background: "#151922", overflow: "hidden" }}>
+      <div onClick={() => setOpen(v => !v)}
+        style={{ padding: "14px 18px", display: "flex", justifyContent: "space-between",
+          alignItems: "center", cursor: "pointer",
+          borderBottom: open ? "1px solid #1e2438" : "none" }}>
+        <span style={{ fontSize: 13, fontWeight: 700, color: "#f0eeff" }}>Signal Trends</span>
+        <span style={{ fontSize: 11, color: "#4a4865" }}>{open ? "▲ close" : "▼ expand"}</span>
+      </div>
+
+      {open && (
+        <div style={{ padding: "16px 18px" }}>
+          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
+            {SIGNAL_OPTIONS.map(s => {
+              const isActive = activeSignal === s.key
+              return (
+                <button key={s.key} onClick={() => setActiveSignal(s.key)}
+                  style={{ padding: "5px 12px", borderRadius: 20, fontSize: 12,
+                    cursor: "pointer", fontWeight: isActive ? 600 : 400,
+                    background: isActive ? "rgba(59,130,246,0.12)" : "#0e1320",
+                    color: isActive ? "#60a5fa" : "#8b89aa",
+                    border: isActive ? "1px solid rgba(59,130,246,0.3)" : "1px solid #1e2438",
+                    transition: "all 0.15s" }}>
+                  {s.label}
+                </button>
+              )
+            })}
+          </div>
+
+          {trendLines?.filter(t => t.signal === activeSignal).map((t, i) => (
+            <div key={i} style={{
+              display: "inline-flex", alignItems: "center", gap: 6,
+              padding: "4px 12px", borderRadius: 20, fontSize: 12, marginBottom: 10,
+              background: t.direction === "improved" ? "rgba(52,211,153,0.08)" : "rgba(248,113,113,0.08)",
+              border: `1px solid ${t.direction === "improved" ? "rgba(52,211,153,0.25)" : "rgba(248,113,113,0.25)"}`,
+              color: t.direction === "improved" ? "#34d399" : "#f87171",
+            }}>
+              {t.direction === "improved" ? "↗" : "↘"}
+              {" "}{signalConfig?.label} {t.direction}: {t.old}{signalConfig?.unit} → {t.new}{signalConfig?.unit}
+            </div>
+          ))}
+
+          <div style={{ borderRadius: 8, padding: "12px 0" }}>
+            <ResponsiveContainer width="100%" height={180}>
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#1e2438" />
+                <XAxis dataKey="label" fontSize={11} tick={{ fill: "#8b89aa" }}
+                  axisLine={{ stroke: "#1e2438" }} tickLine={{ stroke: "#1e2438" }} />
+                <YAxis fontSize={11} tick={{ fill: "#8b89aa" }} width={38}
+                  axisLine={{ stroke: "#1e2438" }} tickLine={{ stroke: "#1e2438" }}
+                  tickFormatter={v => `${v}${signalConfig?.unit || ""}`} />
+                <Tooltip
+                  contentStyle={{ background: "#151922", border: "1px solid #1e2438", borderRadius: 8 }}
+                  labelStyle={{ color: "#8b89aa" }} itemStyle={{ color: "#f0eeff" }}
+                  formatter={v => [`${v}${signalConfig?.unit || ""}`, signalConfig?.label]}
+                  labelFormatter={(_, p) => p?.[0]?.payload?.date || ""}
+                />
+                <Line type="monotone" dataKey={activeSignal}
+                  stroke="#3b82f6" strokeWidth={2.5}
+                  dot={{ r: 4, fill: "#3b82f6", strokeWidth: 0 }}
+                  activeDot={{ r: 6, fill: "#22d3ee" }} />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
+// ── Main ProfileView ──────────────────────────────────────────────
+
 export default function ProfileView({ active, onUpload }) {
   const [profile, setProfile] = useState(null)
   const [trends, setTrends] = useState([])
   const [loading, setLoading] = useState(true)
-  const [activeSignal, setActiveSignal] = useState("talk_ratio")
+  const [blindSpotsOpen, setBlindSpotsOpen] = useState(false)
 
   useEffect(() => {
     if (!active) return
@@ -233,46 +434,48 @@ export default function ProfileView({ active, onUpload }) {
   )
 
   if (!profile || profile.insufficient_data) {
-    const count = profile?.session_count || 0
-    const needed = 3 - count
     return (
       <div style={{ textAlign: "center", padding: "60px 20px" }}>
-        <div style={{ fontSize: 52, marginBottom: 16 }}>🪞</div>
+        <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
+          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+            <defs>
+              <linearGradient id="pv-empty-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#pv-empty-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#pv-empty-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".15"/>
+          </svg>
+        </div>
         <h2 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 10px", color: "#f0eeff" }}>
-          Your mirror is warming up
+          Your mirror is waiting
         </h2>
-        <p style={{ fontSize: 14, color: "#8b89aa", margin: "0 0 6px", lineHeight: 1.6 }}>
-          {count === 0
-            ? "Upload your first conversation to get started."
-            : `${count} session${count > 1 ? "s" : ""} recorded. Upload ${needed} more to unlock your behavioral profile.`}
+        <p style={{ fontSize: 14, color: "#8b89aa", margin: "0 0 24px", lineHeight: 1.6 }}>
+          Upload your first conversation to see your behavioral profile.
         </p>
-        {count > 0 && (
-          <div style={{ display: "flex", justifyContent: "center", gap: 10,
-            margin: "20px 0 28px" }}>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} style={{
-                width: 12, height: 12, borderRadius: "50%",
-                background: i < count ? G : "#2a2a42",
-                boxShadow: i < count ? "0 0 8px rgba(217,70,239,0.4)" : "none",
-              }} />
-            ))}
-          </div>
-        )}
-        <button onClick={onUpload}
+        <button onClick={onUpload} className="btn-grad"
           style={{ padding: "12px 28px", background: G, color: "white",
             border: "none", borderRadius: 8, fontSize: 14, cursor: "pointer",
-            fontWeight: 600, boxShadow: "0 0 24px rgba(217,70,239,0.3)" }}>
+            fontWeight: 600, boxShadow: "0 0 24px rgba(59,130,246,0.3)" }}>
           Upload a conversation
         </button>
       </div>
     )
   }
 
-  const { overall, by_context, patterns, trends: trendLines,
-          recurring_coaching, session_count, personality, blind_spots,
-          completeness, completeness_label, session_highlights } = profile
+  const { by_context, trends: trendLines, session_count, personality,
+          blind_spots, completeness, completeness_label, mirror_feed } = profile
 
-  const signalConfig = SIGNAL_OPTIONS.find(s => s.key === activeSignal)
+  const keywords = deriveKeywords(personality?.dimensions)
 
   const chartData = trends.map((point, i) => ({
     ...point,
@@ -280,355 +483,202 @@ export default function ProfileView({ active, onUpload }) {
     date: new Date(point.date).toLocaleDateString("en-IN", { day: "numeric", month: "short" }),
   }))
 
+  const hasContextData = by_context && Object.keys(by_context).length > 0
+
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
 
       {/* Header */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <div>
+      <Reveal>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
           <h2 style={{ fontSize: 16, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
             Your Behavioral Profile
           </h2>
-          <p style={{ fontSize: 12, color: "#4a4865", margin: "4px 0 0" }}>
-            Based on {session_count} session{session_count > 1 ? "s" : ""}
-          </p>
+
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6 }}>
+            <span style={{ fontSize: 12, color: "#4a4865" }}>
+              {session_count} session{session_count > 1 ? "s" : ""}
+            </span>
+            {completeness_label && (
+              <>
+                <span style={{ color: "#1e2438", fontSize: 12 }}>·</span>
+                <span style={{ fontSize: 12, color: "#4a4865" }}>{completeness_label}</span>
+                <div style={{ width: 60, height: 3, background: "#1e2438",
+                  borderRadius: 2, overflow: "hidden" }}>
+                  <div style={{ height: "100%", borderRadius: 2,
+                    width: `${completeness}%`, background: G,
+                    transition: "width 0.6s ease" }} />
+                </div>
+              </>
+            )}
+          </div>
+
+          {blind_spots?.length > 0 && (
+            <div style={{ marginTop: 10 }}>
+              <button
+                onClick={() => setBlindSpotsOpen(v => !v)}
+                style={{ background: "none", border: "none", padding: 0, cursor: "pointer",
+                  display: "flex", alignItems: "center", gap: 5 }}>
+                <span style={{ fontSize: 10, color: "#3a3a52", display: "inline-block",
+                  transform: blindSpotsOpen ? "rotate(90deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s" }}>▶</span>
+                <span style={{ fontSize: 12, color: "#4a4865" }}>
+                  {blind_spots.length} context{blind_spots.length > 1 ? "s" : ""} missing
+                </span>
+              </button>
+              {blindSpotsOpen && (
+                <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
+                  {blind_spots.map((spot, i) => (
+                    <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
+                      <span style={{ fontSize: 11, color: "#3a3a52", marginTop: 1, flexShrink: 0 }}>·</span>
+                      <div>
+                        <span style={{ fontSize: 12, fontWeight: 600, color: "#6b6888" }}>{spot.label}</span>
+                        <span style={{ fontSize: 12, color: "#4a4865" }}> — {spot.message}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
         </div>
-        <button onClick={onUpload}
+
+        <button onClick={onUpload} className="btn-grad"
           style={{ padding: "8px 18px", background: G, color: "white",
             border: "none", borderRadius: 7, fontSize: 13, cursor: "pointer",
-            fontWeight: 600, boxShadow: "0 0 18px rgba(217,70,239,0.25)" }}>
+            fontWeight: 600, boxShadow: "0 0 18px rgba(59,130,246,0.25)", flexShrink: 0,
+            marginLeft: 16 }}>
           + Upload
         </button>
       </div>
+      </Reveal>
 
-      {/* Completeness bar */}
-      {completeness != null && (
-        <div style={{ padding: "14px 16px", background: "#14141f",
-          border: "1px solid #2a2a42", borderRadius: 10 }}>
-          <div style={{ display: "flex", justifyContent: "space-between",
-            alignItems: "baseline", marginBottom: 8 }}>
-            <span style={{ fontSize: 12, fontWeight: 600, color: "#8b89aa" }}>
-              Mirror depth — {completeness_label}
-            </span>
-            <span style={{ fontSize: 13, fontWeight: 700,
-              background: G, WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
-              {completeness}%
-            </span>
-          </div>
-          <div style={{ height: 5, background: "#2a2a42", borderRadius: 3 }}>
-            <div style={{
-              height: "100%", borderRadius: 3,
-              width: `${completeness}%`,
-              background: G,
-              boxShadow: "0 0 8px rgba(217,70,239,0.3)",
-              transition: "width 0.6s ease",
-            }} />
-          </div>
-          <div style={{ fontSize: 11, color: "#4a4865", marginTop: 7 }}>
-            {completeness < 100
-              ? "Add more sessions and cover different conversation types to deepen the model."
-              : "The mirror has a strong picture of who you are across contexts."}
-          </div>
+      {/* Mirror Feed */}
+      <Reveal delay={80}>
+      <div>
+        <div style={{ marginBottom: 12 }}>
+          <SectionLabel>Cross-Session</SectionLabel>
+          <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
+            Mirror Feed
+          </h2>
         </div>
-      )}
+        <MirrorFeed insights={mirror_feed} />
+      </div>
+      </Reveal>
 
-      {/* The Mirror */}
+      {/* Your Portrait */}
       {personality && (
-        <div style={{ background: "#14141f", border: "1px solid #2a2a42",
-          borderRadius: 12, padding: "20px 22px" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
-            <span style={{ fontSize: 15 }}>🪞</span>
-            <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
-              The Mirror
-            </h2>
-          </div>
-          <p style={{ fontSize: 14, color: "#c4c2d8", lineHeight: 1.85, margin: "0 0 20px",
-            borderLeft: "2px solid rgba(217,70,239,0.35)", paddingLeft: 14 }}>
-            {personality.paragraph}
-          </p>
-
-          {/* Session delta */}
-          {personality.last_delta?.changes?.length > 0 && (
-            <div style={{ marginBottom: 18, padding: "10px 14px",
-              background: "rgba(217,70,239,0.06)", border: "1px solid rgba(217,70,239,0.2)",
-              borderRadius: 8 }}>
-              <div style={{ fontSize: 11, fontWeight: 600, color: "#a855f7",
-                textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 8 }}>
-                What changed after your last session
-              </div>
-              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-                {personality.last_delta.changes.map((c, i) => (
-                  <div key={i} style={{
-                    display: "flex", alignItems: "center", gap: 5,
-                    padding: "4px 10px", borderRadius: 20, fontSize: 12, fontWeight: 600,
-                    background: c.direction === "up"
-                      ? "rgba(52,211,153,0.08)" : "rgba(248,113,113,0.08)",
-                    border: `1px solid ${c.direction === "up"
-                      ? "rgba(52,211,153,0.25)" : "rgba(248,113,113,0.25)"}`,
-                    color: c.direction === "up" ? "#34d399" : "#f87171",
-                  }}>
-                    <span>{c.direction === "up" ? "↑" : "↓"}</span>
-                    <span>{c.dimension}</span>
-                    <span style={{ opacity: 0.7 }}>
-                      {c.direction === "up" ? "+" : ""}{c.diff} pts
+        <Reveal>
+        <div>
+          <SectionLabel>Your Portrait</SectionLabel>
+          <div style={{
+            borderLeft: "3px solid rgba(59,130,246,0.65)",
+            paddingLeft: 16, marginTop: 10,
+          }}>
+            <div style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
+              <p style={{ flex: 1, fontSize: 14, color: "#c4c2d8",
+                lineHeight: 1.9, margin: 0 }}>
+                {personality.paragraph}
+              </p>
+              {keywords.length > 0 && (
+                <div style={{ display: "flex", flexDirection: "column", gap: 6, flexShrink: 0 }}>
+                  {keywords.map((kw, i) => (
+                    <span key={i} style={{
+                      fontSize: 12, fontWeight: 600, padding: "5px 14px",
+                      borderRadius: 6, letterSpacing: 0.2,
+                      background: "linear-gradient(#151922, #151922) padding-box, linear-gradient(135deg, rgba(59,130,246,0.5), rgba(34,211,238,0.5)) border-box",
+                      border: "1px solid transparent",
+                      color: "#60a5fa", whiteSpace: "nowrap",
+                    }}>
+                      {kw}
                     </span>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
+              )}
             </div>
-          )}
-
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {personality.dimensions?.map(dim => (
-              <DimensionCard key={dim.key} dim={dim} />
-            ))}
           </div>
         </div>
+        </Reveal>
       )}
 
-      {/* Mirror Feed */}
-      <MirrorFeed sessions={session_highlights} />
-
-      {/* Averages */}
-      <div>
-        <SectionHeader title="Your Averages" sub="Across all sessions" />
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
-          <StatCard label="Talk Ratio" value={overall.talk_ratio} unit="%" sub="avg across sessions" />
-          <StatCard label="Speech Rate" value={overall.wpm} unit=" wpm" sub="words per minute" />
-          <StatCard label="Filler Rate" value={overall.filler_rate} unit="/100w" sub="avg filler words" />
-          <StatCard label="Interruptions" value={overall.interruptions_given} unit="x" sub="per session avg" />
-          <StatCard label="Response Latency" value={overall.response_latency} unit="s" sub="avg pause before reply" />
-          <StatCard label="Silence" value={overall.silence_ratio} unit="%" sub="of conversation" />
-        </div>
-      </div>
-
-      {/* Consistent patterns */}
-      {patterns?.length > 0 && (
+      {/* You Across Contexts */}
+      {hasContextData && (
+        <Reveal>
         <div>
-          <SectionHeader title="Consistent Patterns"
-            sub="Behaviors that show up repeatedly across your sessions" />
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {patterns.map((p, i) => (
-              <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start",
-                padding: "12px 14px", background: "#14141f",
-                border: "1px solid #2a2a42", borderRadius: 10 }}>
-                <span style={{ fontSize: 18, lineHeight: 1, marginTop: 1,
-                  background: G, WebkitBackgroundClip: "text",
-                  WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
-                  {PATTERN_ICONS[p.type] || "•"}
-                </span>
-                <div>
-                  <div style={{ fontSize: 12, fontWeight: 600, color: "#8b89aa",
-                    textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 3 }}>
-                    {p.signal.replace(/_/g, " ")}
-                  </div>
-                  <div style={{ fontSize: 13, color: "#f0eeff" }}>{p.detail}</div>
-                </div>
-              </div>
-            ))}
+          <div style={{ marginBottom: 16 }}>
+            <SectionLabel>Context Breakdown</SectionLabel>
+            <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
+              You Across Contexts
+            </h2>
+            <p style={{ fontSize: 12, color: "#4a4d6a", margin: "4px 0 0" }}>
+              How your patterns shift depending on the room
+            </p>
           </div>
+          <ContextComparison byContext={by_context} />
         </div>
+        </Reveal>
       )}
 
-      {/* Signal trends */}
-      {chartData.length >= 2 && (
+      {/* Your Shape — pentagon + bars */}
+      {personality?.dimensions?.length > 0 && (
+        <Reveal>
         <div>
-          <SectionHeader title="Signal Trends"
-            sub="How your communication patterns change over time" />
-
-          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
-            {SIGNAL_OPTIONS.map(s => {
-              const isActive = activeSignal === s.key
-              return (
-                <button key={s.key} onClick={() => setActiveSignal(s.key)}
-                  style={{ padding: "5px 12px", borderRadius: 20, fontSize: 12,
-                    cursor: "pointer", fontWeight: isActive ? 600 : 400,
-                    background: isActive ? "rgba(217,70,239,0.12)" : "#14141f",
-                    color: isActive ? "#e879f9" : "#8b89aa",
-                    border: isActive ? "1px solid rgba(217,70,239,0.3)" : "1px solid #2a2a42",
-                    transition: "all 0.15s" }}>
-                  {s.label}
-                </button>
-              )
-            })}
+          <div style={{ marginBottom: 16 }}>
+            <SectionLabel>5 Dimensions</SectionLabel>
+            <h2 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: "#f0eeff" }}>
+              Your Shape
+            </h2>
+            <p style={{ fontSize: 12, color: "#4a4d6a", margin: "4px 0 0" }}>
+              How you show up across five behavioral axes
+            </p>
           </div>
 
-          {trendLines?.length > 0 && (
-            <div style={{ marginBottom: 10 }}>
-              {trendLines.filter(t => t.signal === activeSignal).map((t, i) => (
-                <div key={i} style={{
-                  display: "inline-flex", alignItems: "center", gap: 6,
-                  padding: "4px 12px", borderRadius: 20, fontSize: 12, marginBottom: 8,
-                  background: t.direction === "improved"
-                    ? "rgba(52,211,153,0.08)" : "rgba(248,113,113,0.08)",
-                  border: `1px solid ${t.direction === "improved"
-                    ? "rgba(52,211,153,0.25)" : "rgba(248,113,113,0.25)"}`,
-                  color: t.direction === "improved" ? "#34d399" : "#f87171",
-                }}>
-                  {t.direction === "improved" ? "↗" : "↘"}
-                  {signalConfig?.label} {t.direction}: {t.old}{signalConfig?.unit} → {t.new}{signalConfig?.unit}
-                </div>
-              ))}
-            </div>
-          )}
+          {/* Pentagon chart */}
+          <PentagonChart dimensions={personality.dimensions} />
 
-          <div style={{ background: "#14141f", border: "1px solid #2a2a42",
-            borderRadius: 10, padding: 16 }}>
-            <ResponsiveContainer width="100%" height={200}>
-              <LineChart data={chartData}>
-                <CartesianGrid strokeDasharray="3 3" stroke="#2a2a42" />
-                <XAxis dataKey="label" fontSize={11} tick={{ fill: "#8b89aa" }}
-                  axisLine={{ stroke: "#2a2a42" }} tickLine={{ stroke: "#2a2a42" }} />
-                <YAxis fontSize={11} tick={{ fill: "#8b89aa" }} width={38}
-                  axisLine={{ stroke: "#2a2a42" }} tickLine={{ stroke: "#2a2a42" }}
-                  tickFormatter={v => `${v}${signalConfig?.unit || ""}`} />
-                <Tooltip
-                  contentStyle={{ background: "#14141f", border: "1px solid #2a2a42",
-                    borderRadius: 8 }}
-                  labelStyle={{ color: "#8b89aa" }}
-                  itemStyle={{ color: "#f0eeff" }}
-                  formatter={(v) => [`${v}${signalConfig?.unit || ""}`, signalConfig?.label]}
-                  labelFormatter={(_, payload) => payload?.[0]?.payload?.date || ""}
-                />
-                <Line type="monotone" dataKey={activeSignal}
-                  stroke="#d946ef" strokeWidth={2.5}
-                  dot={{ r: 4, fill: "#d946ef", strokeWidth: 0 }}
-                  activeDot={{ r: 6, fill: "#f97316" }}
-                />
-              </LineChart>
-            </ResponsiveContainer>
+          {/* All 5 flat bars */}
+          <div style={{ marginTop: 20 }}>
+            {personality.dimensions.map((d, i) => (
+              <RevealItem key={d.key} index={i}>
+                <FlatBar d={d} />
+              </RevealItem>
+            ))}
           </div>
-        </div>
-      )}
 
-      {/* You across contexts */}
-      {by_context && Object.keys(by_context).length > 0 && (
-        <div>
-          <SectionHeader title="You Across Contexts"
-            sub="Your averages broken down by conversation type" />
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {Object.entries(by_context).map(([ctx, data]) => (
-              <div key={ctx} style={{ padding: "14px 16px", background: "#14141f",
-                border: "1px solid #2a2a42", borderRadius: 10 }}>
-                <div style={{ display: "flex", justifyContent: "space-between",
-                  alignItems: "center", marginBottom: 10 }}>
-                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                    <div style={{ width: 8, height: 8, borderRadius: "50%",
-                      background: CONTEXT_COLORS[ctx] || "#8b89aa",
-                      boxShadow: `0 0 6px ${CONTEXT_COLORS[ctx] || "#8b89aa"}60` }} />
-                    <span style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff" }}>
-                      {CONTEXT_LABELS[ctx] || ctx}
-                    </span>
-                  </div>
-                  <span style={{ fontSize: 11, color: "#4a4865" }}>
-                    {data.count} session{data.count > 1 ? "s" : ""}
-                  </span>
-                </div>
-                <div style={{ display: "flex", gap: 24 }}>
-                  {[
-                    { label: "Talk", value: `${data.talk_ratio}%` },
-                    { label: "WPM",  value: `${data.wpm}` },
-                    { label: "Fillers", value: `${data.filler_rate}/100w` },
-                  ].map(({ label, value }) => (
-                    <div key={label}>
-                      <div style={{ fontSize: 11, color: "#4a4865" }}>{label}</div>
-                      <div style={{ fontSize: 14, fontWeight: 600, color: "#f0eeff" }}>{value}</div>
-                    </div>
-                  ))}
-                </div>
+          {/* Shape narrative */}
+          {personality.shape_narrative && (
+            <div style={{ marginTop: 14, padding: "14px 16px",
+              background: "#0e1320", border: "1px solid #1e2438",
+              borderLeft: "3px solid rgba(29,78,216,0.4)",
+              borderRadius: 10 }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: "#4a4865",
+                textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 8 }}>
+                What this shape means
               </div>
-            ))}
-          </div>
+              <p style={{ margin: 0, fontSize: 13, color: "#8b89aa", lineHeight: 1.75 }}>
+                {personality.shape_narrative}
+              </p>
+            </div>
+          )}
         </div>
+        </Reveal>
       )}
 
-      {/* Growth tracking */}
-      {recurring_coaching?.length > 0 && (
-        <div>
-          <SectionHeader title="Growth Tracking"
-            sub="Areas that keep coming up in your coaching — watch these" />
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {recurring_coaching.map((item, i) => {
-              const intensity = Math.min(item.count / session_count, 1)
-              const barColor = intensity > 0.6 ? "#f87171" : intensity > 0.3 ? "#f59e0b" : "#34d399"
-              return (
-                <div key={i} style={{ padding: "12px 16px", background: "#14141f",
-                  border: "1px solid #2a2a42", borderRadius: 10,
-                  borderLeft: `3px solid ${barColor}` }}>
-                  <div style={{ display: "flex", justifyContent: "space-between",
-                    alignItems: "center", marginBottom: 10 }}>
-                    <span style={{ fontSize: 13, fontWeight: 600, color: "#f0eeff" }}>
-                      {item.area}
-                    </span>
-                    <span style={{ fontSize: 11, color: "#4a4865" }}>
-                      flagged in {item.count}/{session_count} sessions
-                    </span>
-                  </div>
-                  <div style={{ height: 4, background: "#2a2a42",
-                    borderRadius: 2, overflow: "hidden" }}>
-                    <div style={{
-                      height: "100%", borderRadius: 2,
-                      width: `${Math.round(intensity * 100)}%`,
-                      background: barColor,
-                      boxShadow: `0 0 6px ${barColor}60`,
-                    }} />
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
+      {/* What's Changed */}
+      {((personality?.last_delta?.changes?.length ?? 0) > 0 || (trendLines?.length ?? 0) > 0) && (
+        <Reveal>
+          <WhatsChanged trendLines={trendLines} lastDelta={personality?.last_delta} />
+        </Reveal>
       )}
 
-      {(!patterns || patterns.length === 0) &&
-       (!recurring_coaching || recurring_coaching.length === 0) && (
-        <div style={{ background: "#14141f", borderRadius: 10, padding: 20,
-          textAlign: "center", border: "1px solid #2a2a42" }}>
-          <p style={{ fontSize: 13, color: "#8b89aa", margin: 0, lineHeight: 1.6 }}>
-            Patterns will appear as you add more sessions.
-            Keep uploading conversations to build a richer picture.
-          </p>
-        </div>
+      {/* Signal Trends — collapsible */}
+      {chartData.length >= 2 && (
+        <Reveal>
+          <SignalTrends chartData={chartData} trendLines={trendLines} />
+        </Reveal>
       )}
 
-      {/* Blind spots */}
-      {blind_spots?.length > 0 && (
-        <div>
-          <SectionHeader title="What the mirror can't see yet"
-            sub="Upload these conversation types to fill in the gaps" />
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {blind_spots.map((spot, i) => (
-              <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start",
-                padding: "14px 16px", background: "#14141f",
-                border: "1px solid #2a2a42", borderRadius: 10 }}>
-                <div style={{ width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
-                  border: "1.5px dashed #3a3a52",
-                  display: "flex", alignItems: "center", justifyContent: "center",
-                  fontSize: 13, color: "#4a4865", marginTop: 1 }}>
-                  ?
-                </div>
-                <div>
-                  <div style={{ fontSize: 12, fontWeight: 600, color: "#8b89aa",
-                    textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 4 }}>
-                    {spot.label}
-                  </div>
-                  <div style={{ fontSize: 13, color: "#6b6888", lineHeight: 1.65 }}>
-                    {spot.message}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <button onClick={onUpload}
-            style={{ marginTop: 12, width: "100%", padding: "10px 0",
-              background: "transparent", color: "#8b89aa",
-              border: "1px dashed #3a3a52", borderRadius: 8,
-              fontSize: 13, cursor: "pointer", fontWeight: 500 }}>
-            Upload a conversation →
-          </button>
-        </div>
-      )}
     </div>
   )
 }

frontend/src/components/ResultsView.jsx

@@ -1,8 +1,9 @@
 import { useState } from "react"
+import Reveal, { RevealItem } from "./Reveal"
 import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
 import api from "../lib/api"
 
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
 const SCORE_COLORS = ["#f87171", "#fb923c", "#f59e0b", "#34d399", "#10b981"]
 
@@ -13,7 +14,7 @@ function ScoreBar({ score, max = 5 }) {
       {Array.from({ length: max }).map((_, i) => (
         <div key={i} style={{
           width: 20, height: 7, borderRadius: 4,
-          background: i < score ? color : "#2a2a42",
+          background: i < score ? color : "#1e2438",
           boxShadow: i < score ? `0 0 6px ${color}50` : "none",
           transition: "all 0.2s",
         }} />
@@ -26,8 +27,8 @@ function DimensionCard({ title, icon, items, narrative }) {
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div style={{ border: "1px solid #2a2a42", borderRadius: 12,
-      background: "#14141f", marginBottom: 10, overflow: "hidden" }}>
+    <div style={{ border: "1px solid #1e2438", borderRadius: 12,
+      background: "#151922", marginBottom: 10, overflow: "hidden" }}>
       <div onClick={() => setExpanded(!expanded)}
         style={{ padding: "14px 16px", cursor: "pointer",
           display: "flex", justifyContent: "space-between", alignItems: "center" }}>
@@ -52,8 +53,8 @@ function DimensionCard({ title, icon, items, narrative }) {
       </div>
 
       {expanded && narrative && (
-        <div style={{ padding: "14px 16px", borderTop: "1px solid #2a2a42",
-          background: "#1a1a2e", fontSize: 13, color: "#8b89aa", lineHeight: 1.7 }}>
+        <div style={{ padding: "14px 16px", borderTop: "1px solid #1e2438",
+          background: "#131827", fontSize: 13, color: "#8b89aa", lineHeight: 1.7 }}>
           {narrative}
         </div>
       )}
@@ -66,8 +67,8 @@ function CoachingCard({ suggestion }) {
   const color = priorityColors[suggestion.priority] || "#8b89aa"
 
   return (
-    <div style={{ border: "1px solid #2a2a42", borderRadius: 12,
-      padding: 16, background: "#14141f", borderLeft: `3px solid ${color}` }}>
+    <div style={{ border: "1px solid #1e2438", borderRadius: 12,
+      padding: 16, background: "#151922", borderLeft: `3px solid ${color}` }}>
       <span style={{ fontSize: 11, fontWeight: 700, color,
         textTransform: "uppercase", letterSpacing: 0.5 }}>
         #{suggestion.priority} — {suggestion.area}
@@ -81,7 +82,7 @@ function CoachingCard({ suggestion }) {
         💡 {suggestion.suggestion}
       </div>
       <div style={{ fontSize: 12, color: "#8b89aa", lineHeight: 1.5,
-        padding: "10px 12px", background: "#1a1a2e", borderRadius: 8 }}>
+        padding: "10px 12px", background: "#131827", borderRadius: 8 }}>
         <strong style={{ color: "#f0eeff" }}>Why it matters:</strong> {suggestion.why_it_matters}
       </div>
     </div>
@@ -91,18 +92,18 @@ function CoachingCard({ suggestion }) {
 function ObservationCard({ obs, sessionId }) {
   const [resonance, setResonance] = useState(null)
   const signalColors = {
-    talk_ratio: "#818cf8", speech_rate: "#a78bfa",
+    talk_ratio: "#818cf8", speech_rate: "#5b9cf6",
     speech_acceleration: "#f472b6", pauses: "#f59e0b",
     interruptions: "#f87171", filler_words: "#fb923c",
-    vocal_energy: "#22d3ee", questions: "#34d399",
+    vocal_energy: "#0891b2", questions: "#34d399",
     monologue: "#818cf8", vocabulary_richness: "#a3e635",
-    silence_ratio: "#8b89aa", pitch: "#c084fc", engagement: "#2dd4bf"
+    silence_ratio: "#8b89aa", pitch: "#0891b2", engagement: "#5b9cf6"
   }
   const color = signalColors[obs.signal] || "#8b89aa"
 
   return (
-    <div style={{ border: "1px solid #2a2a42", borderRadius: 10,
-      padding: 16, background: "#14141f", borderLeft: `3px solid ${color}` }}>
+    <div style={{ border: "1px solid #1e2438", borderRadius: 10,
+      padding: 16, background: "#151922", borderLeft: `3px solid ${color}` }}>
       <div style={{ fontSize: 11, color, fontWeight: 600,
         textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 }}>
         {obs.signal.replace(/_/g, " ")}
@@ -132,8 +133,8 @@ function ObservationCard({ obs, sessionId }) {
                   } catch {}
                 }
               }}
-                style={{ padding: "5px 14px", border: "1px solid #2a2a42",
-                  borderRadius: 20, background: "#1a1a2e", cursor: "pointer",
+                style={{ padding: "5px 14px", border: "1px solid #1e2438",
+                  borderRadius: 20, background: "#131827", cursor: "pointer",
                   fontSize: 12, color: "#8b89aa" }}>
                 {label}
               </button>
@@ -149,10 +150,10 @@ function ObservationCard({ obs, sessionId }) {
 
 function ReflectCard({ item, index }) {
   const [open, setOpen] = useState(false)
-  const accent = ["#818cf8", "#a78bfa", "#c084fc"][index % 3]
+  const accent = ["#818cf8", "#5b9cf6", "#0891b2"][index % 3]
   return (
-    <div style={{ border: "1px solid #2a2a42", borderRadius: 12,
-      background: "#14141f", overflow: "hidden", cursor: "pointer" }}
+    <div style={{ border: "1px solid #1e2438", borderRadius: 12,
+      background: "#151922", overflow: "hidden", cursor: "pointer" }}
       onClick={() => setOpen(v => !v)}>
       <div style={{ padding: "16px 18px", display: "flex",
         justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
@@ -169,8 +170,8 @@ function ReflectCard({ item, index }) {
         </span>
       </div>
       {open && (
-        <div style={{ padding: "14px 18px", borderTop: "1px solid #2a2a42",
-          background: "#1a1a2e" }}>
+        <div style={{ padding: "14px 18px", borderTop: "1px solid #1e2438",
+          background: "#131827" }}>
           <p style={{ margin: 0, fontSize: 13, color: "#8b89aa", lineHeight: 1.7 }}>
             {item.answer}
           </p>
@@ -202,7 +203,7 @@ export default function ResultsView({ results, onBack }) {
   const [activeTab, setActiveTab] = useState("overview")
 
   const { signals, insights, dimensions, filename, detected_speaker,
-          session_id, voiceprint_confidence, transcript } = liveResults
+          session_id, voiceprint_confidence, fingerprint } = liveResults
 
   const confPct = voiceprint_confidence != null ? Math.round(voiceprint_confidence * 100) : null
   const confLabel = confPct == null ? null : confPct >= 55 ? "high" : confPct >= 40 ? "medium" : "low"
@@ -232,7 +233,7 @@ export default function ResultsView({ results, onBack }) {
     }
   }
 
-  const tabs = ["overview", "dimensions", "coaching", "reflect", "signals", "transcript"]
+  const tabs = ["overview", "dimensions", "coaching", "reflect", "signals", "summary"]
   const otherSpeakers = (liveResults.available_speakers || []).filter(s => s !== detected_speaker)
 
   return (
@@ -258,21 +259,21 @@ export default function ResultsView({ results, onBack }) {
         {otherSpeakers.length > 0 && (
           <div style={{ position: "relative" }}>
             <button onClick={() => setShowSpeakerSwitch(v => !v)}
-              style={{ fontSize: 12, color: "#8b89aa", background: "#14141f",
-                border: "1px solid #2a2a42", borderRadius: 20,
+              style={{ fontSize: 12, color: "#8b89aa", background: "#151922",
+                border: "1px solid #1e2438", borderRadius: 20,
                 padding: "3px 12px", cursor: "pointer" }}>
               {reanalyzing ? "Switching…" : "Not you?"}
             </button>
             {showSpeakerSwitch && !reanalyzing && (
               <div style={{ position: "absolute", right: 0, top: "110%",
-                background: "#14141f", border: "1px solid #2a2a42", borderRadius: 10,
+                background: "#151922", border: "1px solid #1e2438", borderRadius: 10,
                 boxShadow: "0 8px 24px rgba(0,0,0,0.6)", zIndex: 10,
                 minWidth: 160, overflow: "hidden" }}>
                 {otherSpeakers.map(s => (
                   <button key={s} onClick={() => handleReanalyze(s)}
                     style={{ display: "block", width: "100%", padding: "10px 14px",
                       textAlign: "left", background: "none", border: "none",
-                      borderBottom: "1px solid #2a2a42",
+                      borderBottom: "1px solid #1e2438",
                       cursor: "pointer", fontSize: 13, color: "#f0eeff" }}>
                     Switch to {speakerLabel(s)}
                   </button>
@@ -304,15 +305,14 @@ export default function ResultsView({ results, onBack }) {
       )}
 
       {/* Tabs */}
-      <div style={{ display: "flex", marginBottom: 20, borderBottom: "1px solid #2a2a42" }}>
+      <div style={{ display: "flex", marginBottom: 20, borderBottom: "1px solid #1e2438" }}>
         {tabs.map(tab => (
           <button key={tab} onClick={() => setActiveTab(tab)}
+            className={`nav-tab${activeTab === tab ? " active" : ""}`}
             style={{ background: "none", border: "none", cursor: "pointer",
               padding: "8px 14px", fontSize: 13, textTransform: "capitalize",
               fontWeight: activeTab === tab ? 600 : 400,
-              color: activeTab === tab ? "#e879f9" : "#8b89aa",
-              borderBottom: activeTab === tab ? "2px solid #e879f9" : "2px solid transparent",
-              transition: "color 0.15s" }}>
+              color: activeTab === tab ? "#5b9cf6" : "#8b89aa" }}>
             {tab}
           </button>
         ))}
@@ -320,7 +320,7 @@ export default function ResultsView({ results, onBack }) {
 
       {/* ── OVERVIEW TAB ── */}
       {activeTab === "overview" && (
-        <div>
+        <Reveal>
           {/* Type chips */}
           {(() => {
             const types = insights.conversation_types || []
@@ -332,9 +332,9 @@ export default function ResultsView({ results, onBack }) {
                   <span key={t} style={{
                     fontSize: 11, fontWeight: i === 0 ? 700 : 500,
                     padding: "3px 10px", borderRadius: 20,
-                    background: i === 0 ? "rgba(217,70,239,0.12)" : "#1a1a2e",
-                    color: i === 0 ? "#e879f9" : "#8b89aa",
-                    border: `1px solid ${i === 0 ? "rgba(217,70,239,0.3)" : "#2a2a42"}`,
+                    background: i === 0 ? "rgba(29,78,216,0.12)" : "#131827",
+                    color: i === 0 ? "#5b9cf6" : "#8b89aa",
+                    border: `1px solid ${i === 0 ? "rgba(29,78,216,0.3)" : "#1e2438"}`,
                     textTransform: "uppercase", letterSpacing: 0.4,
                   }}>
                     {LABELS[t] || t}
@@ -362,11 +362,11 @@ export default function ResultsView({ results, onBack }) {
 
           {/* Notable pattern — promoted to headline position */}
           {insights.notable_pattern && (
-            <div style={{ background: "rgba(217,70,239,0.06)",
-              border: "1px solid rgba(217,70,239,0.2)",
+            <div style={{ background: "rgba(29,78,216,0.06)",
+              border: "1px solid rgba(29,78,216,0.2)",
               borderRadius: 10, padding: 16, marginBottom: 14 }}>
               <div style={{ fontSize: 11, fontWeight: 600,
-                color: "#e879f9", marginBottom: 6,
+                color: "#5b9cf6", marginBottom: 6,
                 textTransform: "uppercase", letterSpacing: 0.5 }}>
                 Notable Pattern
               </div>
@@ -377,9 +377,9 @@ export default function ResultsView({ results, onBack }) {
           )}
 
           {/* Communication Pattern */}
-          <div style={{ background: "#14141f", borderRadius: 12,
-            padding: 18, marginBottom: 16, borderLeft: "3px solid #d946ef" }}>
-            <div style={{ fontSize: 11, fontWeight: 600, color: "#e879f9",
+          <div style={{ background: "#151922", borderRadius: 12,
+            padding: 18, marginBottom: 16, borderLeft: "3px solid #1d4ed8" }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: "#5b9cf6",
               marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.5 }}>
               Communication Pattern
             </div>
@@ -413,7 +413,7 @@ export default function ResultsView({ results, onBack }) {
               { label: "Fillers", value: `${signals.filler_words.rate_per_100_words}`, unit: "/100w" },
             ].map(({ label, value, unit }) => (
               <div key={label} style={{ textAlign: "center", padding: "16px 8px",
-                border: "1px solid #2a2a42", borderRadius: 10, background: "#14141f" }}>
+                border: "1px solid #1e2438", borderRadius: 10, background: "#151922" }}>
                 <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 6 }}>{label}</div>
                 <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1,
                   background: G, WebkitBackgroundClip: "text",
@@ -436,7 +436,7 @@ export default function ResultsView({ results, onBack }) {
                   ? "—" : signals.vocal_energy.trend },
             ].map(({ label, value }) => (
               <div key={label} style={{ textAlign: "center", padding: "14px 8px",
-                border: "1px solid #2a2a42", borderRadius: 10, background: "#14141f" }}>
+                border: "1px solid #1e2438", borderRadius: 10, background: "#151922" }}>
                 <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 5 }}>{label}</div>
                 <div style={{ fontSize: 18, fontWeight: 700, color: "#f0eeff",
                   textTransform: "capitalize" }}>{value}</div>
@@ -444,15 +444,15 @@ export default function ResultsView({ results, onBack }) {
             ))}
           </div>
 
-        </div>
+        </Reveal>
       )}
 
       {/* ── DIMENSIONS TAB ── */}
       {activeTab === "dimensions" && dimensions && (
-        <div>
+        <Reveal>
           <p style={{ fontSize: 13, color: "#8b89aa", marginBottom: 16, lineHeight: 1.6 }}>
             Scores are probabilistic proxies based on behavioral signals —
-            not psychological diagnoses. Tap any card to read the interpretation.
+            not psychological diagnoses. Expand any card to read the interpretation.
           </p>
           {dimensions.emotional_state && (
             <DimensionCard title="Your Emotional State" icon="🧠"
@@ -490,8 +490,8 @@ export default function ResultsView({ results, onBack }) {
 
           {/* Conversation Arc — moved from Overview */}
           {dimensions?.conversation_arc && (
-            <div style={{ border: "1px solid #2a2a42", borderRadius: 12,
-              padding: 16, background: "#14141f" }}>
+            <div style={{ border: "1px solid #1e2438", borderRadius: 12,
+              padding: 16, background: "#151922" }}>
               <div style={{ fontSize: 12, fontWeight: 600, color: "#8b89aa",
                 marginBottom: 14, textTransform: "uppercase", letterSpacing: 0.5 }}>
                 Conversation Arc
@@ -512,7 +512,7 @@ export default function ResultsView({ results, onBack }) {
               </div>
               {dimensions.conversation_arc.turning_point?.detected && (
                 <div style={{ marginTop: 12, fontSize: 12, color: "#8b89aa",
-                  background: "#1a1a2e", padding: "8px 12px", borderRadius: 8 }}>
+                  background: "#131827", padding: "8px 12px", borderRadius: 8 }}>
                   ⚡ {dimensions.conversation_arc.turning_point.detail}
                 </div>
               )}
@@ -524,19 +524,21 @@ export default function ResultsView({ results, onBack }) {
               )}
             </div>
           )}
-        </div>
+        </Reveal>
       )}
 
       {/* ── COACHING TAB ── */}
       {activeTab === "coaching" && (
-        <div>
+        <Reveal>
           <p style={{ fontSize: 13, color: "#8b89aa", marginBottom: 16, lineHeight: 1.6 }}>
             Specific suggestions based on patterns observed in this conversation.
             Ranked by potential impact.
           </p>
           <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
             {insights.coaching_suggestions?.map((s, i) => (
-              <CoachingCard key={i} suggestion={s} />
+              <RevealItem key={i} index={i}>
+                <CoachingCard suggestion={s} />
+              </RevealItem>
             ))}
             {(!insights.coaching_suggestions || insights.coaching_suggestions.length === 0) && (
               <div style={{ textAlign: "center", padding: 32, color: "#4a4865" }}>
@@ -544,12 +546,12 @@ export default function ResultsView({ results, onBack }) {
               </div>
             )}
           </div>
-        </div>
+        </Reveal>
       )}
 
       {/* ── REFLECT TAB ── */}
       {activeTab === "reflect" && (
-        <div>
+        <Reveal>
           <p style={{ fontSize: 13, color: "#8b89aa", marginBottom: 20, lineHeight: 1.6 }}>
             Questions grounded in what happened in this conversation. Tap any to read the insight.
           </p>
@@ -566,39 +568,41 @@ export default function ResultsView({ results, onBack }) {
           ) : (
             <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
               {insights.reflection_questions.map((item, i) => (
-                <ReflectCard key={i} item={item} index={i} />
+                <RevealItem key={i} index={i}>
+                  <ReflectCard item={item} index={i} />
+                </RevealItem>
               ))}
             </div>
           )}
-        </div>
+        </Reveal>
       )}
 
       {/* ── SIGNALS TAB ── */}
       {activeTab === "signals" && (
-        <div>
+        <Reveal>
           {signals.timeline?.length > 1 && (
             <div style={{ marginBottom: 24 }}>
               <h3 style={{ fontSize: 14, fontWeight: 600, marginBottom: 12, color: "#f0eeff" }}>
                 Speech Rate Over Time
               </h3>
-              <div style={{ background: "#14141f", border: "1px solid #2a2a42",
+              <div style={{ background: "#151922", border: "1px solid #1e2438",
                 borderRadius: 10, padding: 16 }}>
                 <ResponsiveContainer width="100%" height={150}>
                   <LineChart data={signals.timeline}>
                     <XAxis dataKey="window_start_s" tickFormatter={formatTime} fontSize={11}
-                      tick={{ fill: "#8b89aa" }} axisLine={{ stroke: "#2a2a42" }}
-                      tickLine={{ stroke: "#2a2a42" }} />
+                      tick={{ fill: "#8b89aa" }} axisLine={{ stroke: "#1e2438" }}
+                      tickLine={{ stroke: "#1e2438" }} />
                     <YAxis domain={["auto", "auto"]} fontSize={11} width={35}
-                      tick={{ fill: "#8b89aa" }} axisLine={{ stroke: "#2a2a42" }}
-                      tickLine={{ stroke: "#2a2a42" }} />
+                      tick={{ fill: "#8b89aa" }} axisLine={{ stroke: "#1e2438" }}
+                      tickLine={{ stroke: "#1e2438" }} />
                     <Tooltip
-                      contentStyle={{ background: "#14141f", border: "1px solid #2a2a42",
+                      contentStyle={{ background: "#151922", border: "1px solid #1e2438",
                         borderRadius: 8 }}
                       labelStyle={{ color: "#8b89aa" }} itemStyle={{ color: "#f0eeff" }}
                       labelFormatter={v => `At ${formatTime(v)}`}
                       formatter={v => [`${Math.round(v)} wpm`, "Speech rate"]} />
                     <Line type="monotone" dataKey="speech_rate_wpm"
-                      stroke="#d946ef" strokeWidth={2} dot={false} />
+                      stroke="#1d4ed8" strokeWidth={2} dot={false} />
                   </LineChart>
                 </ResponsiveContainer>
               </div>
@@ -624,62 +628,51 @@ export default function ResultsView({ results, onBack }) {
               { label: "Within-turn pauses", value: signals.pauses.within_turn_pauses.count },
               { label: "Your turns", value: signals.turn_dynamics.user_turns },
             ].map(({ label, value }) => (
-              <div key={label} style={{ padding: 12, border: "1px solid #2a2a42",
-                borderRadius: 8, background: "#14141f" }}>
+              <div key={label} style={{ padding: 12, border: "1px solid #1e2438",
+                borderRadius: 8, background: "#151922" }}>
                 <div style={{ fontSize: 11, color: "#4a4865", marginBottom: 4 }}>{label}</div>
                 <div style={{ fontSize: 16, fontWeight: 600, color: "#f0eeff" }}>{value}</div>
               </div>
             ))}
           </div>
-        </div>
+        </Reveal>
       )}
 
-      {/* ── TRANSCRIPT TAB ── */}
-      {activeTab === "transcript" && (
-        <div>
-          {(!transcript || transcript.length === 0) ? (
+      {/* ── SUMMARY TAB ── */}
+      {activeTab === "summary" && (
+        <Reveal>
+          <p style={{ fontSize: 13, color: "#8b89aa", marginBottom: 16, lineHeight: 1.6 }}>
+            A compact behavioral summary of this session — used to build your cross-session profile over time.
+          </p>
+          {fingerprint ? (
+            <div style={{ background: "#151922", border: "1px solid #1e2438",
+              borderRadius: 12, padding: 20 }}>
+              <div style={{ fontSize: 11, fontWeight: 600, color: "#4a4865",
+                textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 12 }}>
+                Behavioral Fingerprint
+              </div>
+              <p style={{ margin: 0, fontSize: 14, color: "#d4d2e8", lineHeight: 1.85 }}>
+                {fingerprint}
+              </p>
+            </div>
+          ) : (
             <div style={{ textAlign: "center", padding: 48, color: "#4a4865" }}>
               <div style={{ fontSize: 32, marginBottom: 12 }}>📄</div>
               <p style={{ fontSize: 14, color: "#8b89aa" }}>
-                Transcript not available for this session.
+                Summary not available for this session.
+              </p>
+              <p style={{ fontSize: 12, color: "#4a4865", marginTop: 4 }}>
+                New sessions will include this automatically.
               </p>
-            </div>
-          ) : (
-            <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
-              {transcript.map((seg, i) => {
-                const isUser = seg.speaker === detected_speaker
-                return (
-                  <div key={i} style={{
-                    display: "flex", gap: 12, padding: "8px 12px", borderRadius: 8,
-                    background: isUser ? "rgba(217,70,239,0.06)" : "#14141f",
-                    border: `1px solid ${isUser ? "rgba(217,70,239,0.18)" : "#2a2a42"}`,
-                  }}>
-                    <div style={{ minWidth: 72, flexShrink: 0 }}>
-                      <div style={{ fontSize: 11, fontWeight: 600,
-                        color: isUser ? "#e879f9" : "#8b89aa" }}>
-                        {isUser ? "You" : speakerLabel(seg.speaker)}
-                      </div>
-                      <div style={{ fontSize: 10, color: "#4a4865", marginTop: 1 }}>
-                        {seg.start != null
-                          ? `${Math.floor(seg.start / 60)}:${String(Math.round(seg.start % 60)).padStart(2, "0")}`
-                          : ""}
-                      </div>
-                    </div>
-                    <p style={{ margin: 0, fontSize: 13, color: "#f0eeff", lineHeight: 1.6 }}>
-                      {seg.text}
-                    </p>
-                  </div>
-                )
-              })}
             </div>
           )}
-        </div>
+        </Reveal>
       )}
 
       {/* Disclaimer */}
       <div style={{ fontSize: 11, color: "#4a4865", padding: 14, marginTop: 20,
-        background: "#14141f", borderRadius: 8, lineHeight: 1.7,
-        border: "1px solid #2a2a42" }}>
+        background: "#151922", borderRadius: 8, lineHeight: 1.7,
+        border: "1px solid #1e2438" }}>
         <strong style={{ color: "#8b89aa" }}>Note:</strong> All scores and observations are
         probabilistic proxies based on acoustic and linguistic patterns. They are not validated
         psychological assessments. Use as prompts for self-reflection only.

frontend/src/components/Reveal.jsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react"
+
+const RevealCtx = createContext(false)
+
+// Used inside a <Reveal> to stagger child elements.
+// Opacity-only so it works safely inside overflow:hidden containers.
+export function RevealItem({ children, index = 0, style }) {
+  const visible = useContext(RevealCtx)
+  return (
+    <div style={{
+      opacity: visible ? 1 : 0,
+      transition: `opacity 0.4s ease ${index * 70}ms`,
+      ...style,
+    }}>
+      {children}
+    </div>
+  )
+}
+
+export default function Reveal({ children, delay = 0, style }) {
+  const ref = useRef(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.12 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <RevealCtx.Provider value={visible}>
+      <div
+        ref={ref}
+        style={{
+          opacity: visible ? 1 : 0,
+          transform: visible ? "translateY(0)" : "translateY(44px)",
+          transition: `opacity 0.65s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.65s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
+          ...style,
+        }}
+      >
+        {children}
+      </div>
+    </RevealCtx.Provider>
+  )
+}

frontend/src/components/UploadView.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef } from "react"
 import api from "../lib/api"
+import Reveal from "./Reveal"
 
 const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000"
-const G = "linear-gradient(135deg, #d946ef 0%, #f97316 100%)"
+const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
 const PREPARE_STEPS = [
   { key: "transcribing", label: "Transcribing audio" },
@@ -36,14 +37,14 @@ function StepProgress({ steps, currentStep, title, onCancel }) {
             <div key={step.key} style={{ display: "flex", alignItems: "center", gap: 14 }}>
               <div style={{
                 width: 28, height: 28, borderRadius: "50%", flexShrink: 0,
-                background: isDone ? G : isCurrent ? "rgba(217,70,239,0.1)" : "#14141f",
-                border: `2px solid ${isDone ? "transparent" : isCurrent ? "#d946ef" : "#2a2a42"}`,
+                background: isDone ? G : isCurrent ? "rgba(29,78,216,0.1)" : "#151922",
+                border: `2px solid ${isDone ? "transparent" : isCurrent ? "#1d4ed8" : "#1e2438"}`,
                 display: "flex", alignItems: "center", justifyContent: "center",
-                boxShadow: isCurrent ? "0 0 16px rgba(217,70,239,0.4)" : "none",
+                boxShadow: isCurrent ? "0 0 16px rgba(29,78,216,0.4)" : "none",
                 transition: "all 0.3s",
               }}>
                 {isDone && <span style={{ color: "white", fontSize: 12, fontWeight: 700 }}>✓</span>}
-                {isCurrent && <div style={{ width: 8, height: 8, background: "#d946ef",
+                {isCurrent && <div style={{ width: 8, height: 8, background: "#1d4ed8",
                   borderRadius: "50%" }} />}
               </div>
               <div>
@@ -55,7 +56,7 @@ function StepProgress({ steps, currentStep, title, onCancel }) {
                   {step.label}
                 </span>
                 {isCurrent && (
-                  <span style={{ fontSize: 12, color: "#e879f9", marginLeft: 6 }}>
+                  <span style={{ fontSize: 12, color: "#5b9cf6", marginLeft: 6 }}>
                     — in progress…
                   </span>
                 )}
@@ -69,7 +70,7 @@ function StepProgress({ steps, currentStep, title, onCancel }) {
       </p>
       {onCancel && (
         <button onClick={onCancel}
-          style={{ marginTop: 12, background: "none", border: "1px solid #2a2a42",
+          style={{ marginTop: 12, background: "none", border: "1px solid #1e2438",
             borderRadius: 6, padding: "6px 18px", fontSize: 12, color: "#4a4865",
             cursor: "pointer" }}>
           Cancel
@@ -287,17 +288,17 @@ export default function UploadView({ onResults, onActivate }) {
   const hasFile = !!file
 
   return (
-    <div>
+    <Reveal>
       {/* Drop zone */}
       <div
         onClick={() => document.getElementById("file-input").click()}
         style={{
-          border: `2px dashed ${hasFile ? "#d946ef" : "#2a2a42"}`,
+          border: `2px dashed ${hasFile ? "#1d4ed8" : "#1e2438"}`,
           borderRadius: 16, padding: "52px 32px",
           textAlign: "center", marginBottom: 20, cursor: "pointer",
-          background: hasFile ? "rgba(217,70,239,0.04)" : "#14141f",
+          background: hasFile ? "rgba(29,78,216,0.04)" : "#151922",
           transition: "all 0.2s",
-          boxShadow: hasFile ? "inset 0 0 40px rgba(217,70,239,0.04)" : "none",
+          boxShadow: hasFile ? "inset 0 0 40px rgba(29,78,216,0.04)" : "none",
         }}>
         <input id="file-input" type="file" accept="*/*"
           style={{ display: "none" }}
@@ -335,20 +336,20 @@ export default function UploadView({ onResults, onActivate }) {
       )}
 
       <button onClick={handlePrepare} disabled={!hasFile}
+        className={hasFile ? "btn-grad" : ""}
         style={{ width: "100%", padding: "15px 24px",
-          background: hasFile ? G : "#14141f",
+          background: hasFile ? G : "#151922",
           color: hasFile ? "white" : "#2a2a42",
-          border: hasFile ? "none" : "1px solid #2a2a42",
+          border: hasFile ? "none" : "1px solid #1e2438",
           borderRadius: 10, fontSize: 15,
           cursor: hasFile ? "pointer" : "not-allowed", fontWeight: 600,
-          boxShadow: hasFile ? "0 0 28px rgba(217,70,239,0.3)" : "none",
-          transition: "all 0.2s" }}>
+          boxShadow: hasFile ? "0 0 28px rgba(29,78,216,0.3)" : "none" }}>
         Analyze Conversation
       </button>
 
       <p style={{ fontSize: 11, color: "#4a4865", textAlign: "center", marginTop: 12 }}>
         🔒 Audio is deleted immediately after analysis. Only behavioral signals are stored.
       </p>
-    </div>
+    </Reveal>
   )
 }

frontend/src/index.css

@@ -5,50 +5,155 @@
 }
 
 body {
-  background: #0d0d18;
+  background: #0f1117;
+  background-image: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px);
+  background-size: 28px 28px;
   color: #f0eeff;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* ── Animations ────────────────────────────────────────── */
+
+@keyframes viewEnter {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(29,78,216,0.3); }
+  50%       { box-shadow: 0 0 40px rgba(29,78,216,0.6); }
+}
+
+@keyframes shimmer {
+  from { background-position: -200% center; }
+  to   { background-position: 200% center; }
+}
+
+@keyframes blobDrift1 {
+  0%   { transform: translate(0,    0)    scale(1);    }
+  30%  { transform: translate(40px, -30px) scale(1.06); }
+  65%  { transform: translate(-20px, 25px) scale(0.96); }
+  100% { transform: translate(25px,  15px) scale(1.03); }
+}
+
+@keyframes blobDrift2 {
+  0%   { transform: translate(0,    0)    scale(1);    }
+  30%  { transform: translate(-35px, 40px) scale(1.04); }
+  65%  { transform: translate(25px, -20px) scale(0.97); }
+  100% { transform: translate(-15px, 30px) scale(1.05); }
+}
+
+/* ── View transitions ──────────────────────────────────── */
+
+.view-enter {
+  animation: viewEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.fade-in {
+  animation: fadeIn 0.2s ease forwards;
+}
+
+/* ── Cards ─────────────────────────────────────────────── */
+
+.card {
+  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  will-change: transform;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  border-color: #2e3464 !important;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(29,78,216,0.15) !important;
+}
+
+/* ── Buttons ────────────────────────────────────────────── */
+
+.btn-grad {
+  transition: transform 0.15s ease, box-shadow 0.2s ease;
+  cursor: pointer;
+}
+
+.btn-grad:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 32px rgba(29,78,216,0.45) !important;
+}
+
+.btn-grad:active {
+  transform: scale(0.97) !important;
+}
+
+.btn-ghost {
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.btn-ghost:hover {
+  color: #c4c2d8 !important;
+}
+
+/* ── Inputs ─────────────────────────────────────────────── */
+
 input, textarea, select {
   font-family: inherit;
-  background: #1a1a2e;
+  background: #0e1320;
   color: #f0eeff;
-  border: 1px solid #2a2a42;
+  border: 1px solid #1e2438;
   border-radius: 8px;
   outline: none;
-  transition: border-color 0.15s;
+  transition: border-color 0.18s, box-shadow 0.18s;
 }
 
 input:focus, textarea:focus, select:focus {
-  border-color: #d946ef;
-  box-shadow: 0 0 0 2px rgba(217,70,239,0.12);
+  border-color: #1d4ed8;
+  box-shadow: 0 0 0 3px rgba(29,78,216,0.15);
 }
 
 input::placeholder, textarea::placeholder {
-  color: #4a4865;
+  color: #2e3a52;
 }
 
 button {
   font-family: inherit;
 }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+/* ── Nav tab indicator ──────────────────────────────────── */
 
-::-webkit-scrollbar-track {
-  background: #0d0d18;
+.nav-tab {
+  position: relative;
+  transition: color 0.18s ease;
 }
 
-::-webkit-scrollbar-thumb {
-  background: #2a2a42;
-  border-radius: 3px;
+.nav-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: linear-gradient(90deg, #1d4ed8, #0891b2);
+  transform: scaleX(0);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: #3d3d60;
+.nav-tab.active::after {
+  transform: scaleX(1);
 }
+
+/* ── Scrollbar ──────────────────────────────────────────── */
+
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: #0f1117; }
+::-webkit-scrollbar-thumb { background: #1e2438; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #2e3464; }