AI Reflection Screen

Location: apps/mobile/src/app/(main)/ai/index.tsx

The AI Reflection screen is the entry point for starting a new 5-question reflection session. It features an animated "Letter Rain" topic selector and streaming responses.

---

Screen Structure

TopNav: "AI Reflection"
├─ SessionList (recent sessions, tap to resume)
└─ StartNew section
     ├─ LetterRain Stage (topic display with drop animation)
     ├─ Topic Chips (interest slugs as selectable pills)
     ├─ "Or type your own" collapsible input
     └─ "Start reflection" button

---

Letter Rain Animation

When a user taps an interest chip:

1. The chip bounces with a spring animation (withSpring).
2. Other chips dim (opacity → 0.3).
3. The topic string is split into individual characters.
4. Each FallingLetter component animates in from translateY(-30) → 0 with:
   • Spring: damping=14, stiffness=220, mass=0.7
   • Stagger: index * 55ms delay per character
   • Fade: opacity 0→1 in 50ms
5. The dark ink stage block shows the assembled word.
6. Tap the stage × to clear and pick again.

FallingLetter Component

function FallingLetter({ char, index, color }) {
  const ty = useSharedValue(-30);
  const op = useSharedValue(0);
  // withDelay(index * 55ms, withSpring(...))
}

---

Topic Selection

Interest Chips

Loaded from GET /interests/me — the user's subscribed interests. Shows:

• Interest name
• Accent color background
• Bounce animation on press

Sub-Interest Expansion

After selecting a L1 topic chip, a second row of L2/L3 sub-interest chips appears (children of the selected interest). User can refine to a specific sub-topic.

Free-Form Input

A collapsible TextInput labelled "or type your own". When expanded:

• Dismiss on outside tap.
• Clears chip selection when text is entered.
• Max 60 characters.

---

Session Flow (from this screen)

1. User selects topic (chip or typed) → topic string set.
2. Tap "Start reflection" → POST /ai/sessions { topic }.
3. Navigate to ai/session/[id].tsx.
4. Display question 1 with streaming response (Anthropic mode) or static text (scripted).
5. User types answer → POST /ai/sessions/:id/answer { answer }.
6. Next question auto-loads. Repeat for steps 2–5.
7. Step 5 answer submitted → POST /ai/sessions/:id/complete.
8. Screen shows "Your reflection is ready" with summary.
9. Tap "Apply to profile" → map-interests → suggestions → apply flow.

---

Streaming Responses (Anthropic Mode)

When ANTHROPIC_API_KEY is set, AI responses stream via Server-Sent Events:

• Endpoint: POST /ai/sessions/:id/answer returns streaming body.
• Mobile uses fetch with ReadableStream parsing.
• Characters appear progressively as they stream.
• A blinking cursor indicates streaming in progress.

---

Session History

Recent sessions are shown below the topic selector:

• Status badge: in_progress (pulsing dot), completed (checkmark), abandoned (grey)
• Session topic and start time
• Turn count (e.g., "3 of 5 questions")
• Tap to resume an in-progress session

Loaded via GET /ai/sessions?limit=10.