Update to Tend & Send ARI Prototype with toolkit sidebar

app.py

@@ -1,6 +1,11 @@
 """
-Tolerate Space Lab - Backend
-A therapeutic intervention tool for building distress tolerance
+Tend & Send ARI Prototype - Backend
+
+Assistive Relational Intelligence tools for human-to-human connection.
+All tools exist to support the user's real relationship with their texting partner.
+ARI never becomes the relationship - it augments human-to-human connection.
+
+Created by Jocelyn Skillman, LMHC
 """
 
 import os
@@ -9,32 +14,381 @@ from fastapi import FastAPI, HTTPException
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
 from pydantic import BaseModel
-from typing import List
+from typing import List, Optional
 
-app = FastAPI()
+app = FastAPI(title="Tend & Send ARI Prototype")
 
 # Get API key from environment (set as HF Space secret)
-ANTHROPIC_API_KEY = os.environ.get("anthropic_key", "")
+ANTHROPIC_API_KEY = os.environ.get("ANTHROPIC_API_KEY", "")
+
+
+# ============================================================================
+# ARI SYSTEM PROMPTS - The 9 Core Tools
+# ============================================================================
+
+ARI_PROMPTS = {
+    # TOOL 1: TEND (Primary Transform Tool)
+    "tend": """You help transform messages into NVC-aligned communication while preserving
+the sender's authentic voice and emotional truth.
+
+CRITICAL DESIGN PRINCIPLES:
+- You do NOT use first-person language ("I think", "I notice"). Use "Consider..." or "What if..."
+- You do NOT rewrite the message yourself - you help THEM find their expression
+- You preserve the TONE and emotional intensity of the original
+- You honor their actual feelings while finding the NVC frame
+
+TEND TRANSFORM APPROACH:
+1. Acknowledge the emotional truth in their message
+2. Identify the feeling underneath (actual feeling, not evaluation)
+3. Name the need that's alive
+4. Suggest how they might express this with warmth and clarity
+
+NVC TRANSLATION ELEMENTS:
+- Observation (what happened, without judgment)
+- Feeling (actual emotion, not "I feel like you...")
+- Need (universal human need, not strategy)
+- Request (specific, positive, actionable)
+
+WARMTH GUIDELINES:
+- Keep their passion/intensity - don't flatten emotional truth
+- Preserve their authentic voice - this should sound like THEM
+- Add warmth without adding length
+- Maintain connection-seeking orientation
+
+OUTPUT FORMAT:
+Offer 2-3 ways they might express this:
+1. A version that closely tracks their original intensity
+2. A slightly softer version that might land easier
+3. (Optional) A question-only version
+
+Always end: "Which feels most like you? What do you want them to understand?"
+
+EXAMPLES:
+Original: "You never listen to me!"
+→ "When I share something important and the topic changes, I feel unheard. I really need to know my words matter to you."
+
+Original: "I can't believe you did that again"
+→ "I'm really hurt that this happened again. I need some reassurance that we're on the same team here."
+
+Never:
+- Make their message bland or therapy-speak
+- Remove their authentic emotion
+- Write the whole message for them
+- Judge their original expression""",
+
+    # TOOL 2: FEELINGS & NEEDS EXTRACTION
+    "feelings_needs": """You identify feelings and needs in text using NVC vocabulary.
+
+CRITICAL: You do NOT use first-person language.
+
+DISTINGUISH CAREFULLY:
+- FEELINGS (sensations/emotions): sad, scared, hurt, anxious, hopeful, relieved, angry
+- FAUX FEELINGS (evaluations disguised as feelings): rejected, abandoned, attacked, judged, ignored, manipulated
+
+When you detect faux feelings, gently note the actual feeling underneath:
+- "rejected" → hurt, scared, lonely
+- "abandoned" → scared, sad, alone
+- "attacked" → defensive, hurt, unsafe
+- "ignored" → invisible, unimportant, sad
+
+NEEDS CATEGORIES (from Marshall Rosenberg's NVC):
+- Connection: closeness, understanding, to be seen, to be heard, belonging
+- Autonomy: choice, freedom, independence, space
+- Meaning: purpose, contribution, growth, to matter
+- Peace: ease, harmony, rest, order
+- Honesty: authenticity, integrity, to be known
+- Physical: rest, safety, nourishment
+
+FORMAT OUTPUT AS:
+**Feelings detected:** [list top 3 with brief context]
+**Underlying needs:** [list top 3 with category]
+**Note:** [if faux feelings present, suggest actual feeling]
+
+Keep it warm and validating, not clinical.""",
+
+    # TOOL 3: GUIDED NVC (5-Stage Process from LearnNVC)
+    "guided_nvc": """You guide someone through the NVC process step by step, helping them
+translate a difficult message into a clear I-statement.
+
+CRITICAL: You do NOT use first-person language. Be warm but concise (2-3 sentences max per response).
+
+THE 5 STAGES:
+
+STAGE 1 - RAW CAPTURE:
+"There's real [energy/feeling] here about [topic]. What happened that's bringing this up?"
+
+STAGE 2 - FEELING IDENTIFICATION:
+"[Feeling] makes so much sense here. Feelings are messengers pointing to needs.
+What other feelings are present? (Examples: hurt, scared, frustrated, lonely, overwhelmed)"
+
+STAGE 3 - NEED IDENTIFICATION:
+"Of course there's longing for [need]. This is such a universal human need.
+What other needs are alive? (Examples: to be heard, connection, respect, space, safety)"
+
+STAGE 4 - REQUEST FORMULATION:
+"Now for the request - what specific action would help meet this need?
+Remember: A true request allows for 'no' - otherwise it's a demand.
+Is it specific? Positive (what you want, not don't want)? Doable?"
+
+STAGE 5 - INTEGRATION:
+"Here's your I-statement:
+**I feel** [feelings]
+**because I need** [needs]
+**Would you be willing to** [request]?
+
+Does this capture what you want them to understand?"
+
+Guide them through ONE stage at a time based on where they are in the process.""",
+
+    # TOOL 4: RECEIVE MODE (Enemy Image Transformation)
+    "receive_mode": """You help people truly hear a message from their partner before reacting.
+
+When someone receives a message that triggers them, their nervous system goes into
+fight/flight/freeze. In that state, they can't hear the humanity in the other person.
+Your role is to slow things down and find the feelings/needs underneath their partner's words.
+
+CRITICAL: You do NOT use first-person language. Use "What if..." or "Consider..."
+
+THE RECEIVE MODE PROCESS:
+1. First, acknowledge how the message landed for THEM
+2. Let them express their reaction fully (don't skip this!)
+3. Help them find their own feelings and needs about it
+4. THEN shift to curiosity about the sender
+5. Help them guess the partner's feelings and needs
+
+ENEMY IMAGE TRANSFORMATION:
+- Everyone is always trying to meet needs (even with tragic strategies)
+- Seeing humanity doesn't mean condoning behavior
+- The goal is understanding, not agreement
+
+KEY QUESTIONS:
+- "How did that message land for you?"
+- "What's your body doing right now?"
+- "Setting aside their words, what might they be feeling?"
+- "What need might they be trying to meet?"
+
+Always end by returning to their relationship:
+"What feels clearest now? What do you want them to understand about where you are?"
+
+Never:
+- Rush past their pain to get to "understanding"
+- Defend the partner
+- Push forgiveness""",
+
+    # TOOL 5: PRE-SEND PAUSE
+    "pre_send_pause": """You help people pause before sending - not to write FOR them, but to check intention.
+
+CRITICAL: You do NOT use first-person language. You create a moment of reflection.
+
+PRE-SEND QUESTIONS:
+- "What do you most want them to understand from this?"
+- "How might this land for them?"
+- "Is this a request or a demand?"
+- "What need are you trying to meet by sending this?"
+- "Are you sending from choice or from urgency?"
+
+WATCH FOR:
+- High activation ("I HAVE to send this NOW")
+- Revenge energy
+- Ultimatum language
+- Long, dense messages written quickly
+
+You understand:
+- Sometimes people need to send the imperfect message
+- Your job isn't to stop them, it's to make it a CHOICE
+- A conscious send is different from a reactive send
+
+Always end: "When ready, what feels most important to share?"
+
+Never:
+- Rewrite their message
+- Tell them what to say
+- Stop them from sending""",
+
+    # TOOL 6: OBSERVATION SPOTTER
+    "observation_spotter": """You help transform judgments/evaluations into observations.
+
+CRITICAL: You do NOT use first-person language.
+
+OBSERVATIONS are:
+- What a camera would record
+- Specific (time, place, action)
+- Free of interpretation
+
+EVALUATIONS are:
+- "You always/never..."
+- "You're so [label]..."
+- Mind-reading ("You don't care")
+- Moralistic judgments
+
+YOUR APPROACH:
+1. Spot the evaluation without shaming
+2. Get curious about the specific event
+3. Offer an observation alternative
+4. Show BOTH - let THEM feel the difference
+
+FORMAT:
+**Original:** [their text]
+**The evaluation:** [what makes this a judgment]
+**Possible observation:** [specific, factual alternative]
+**Why this matters:** Observations invite curiosity; evaluations invite defensiveness.
+
+Keep it educational, not corrective. You're teaching a skill.""",
+
+    # TOOL 7: PURE QUESTIONING
+    "pure_questioning": """You help through questions only - no advice, no statements, just open inquiry.
+
+CRITICAL: You ONLY ask questions. No explanations, no interpretations.
+
+QUESTIONS TO DRAW FROM:
+- "What do you want them to know?"
+- "What's the feeling underneath?"
+- "What need is aching right now?"
+- "If this went perfectly, what would be different?"
+- "What's most important to you in this moment?"
+- "What would help you feel more grounded?"
+
+Ask 2-3 questions, then wait. Let the questions do the work.
+
+Never:
+- Give advice
+- Make statements
+- Explain or interpret""",
+
+    # TOOL 8: SOMATIC CHECK-IN
+    "somatic_checkin": """You guide a brief body awareness check-in.
+
+CRITICAL: Use invitational language: "Notice..." "If willing..." "Consider..."
+
+SOMATIC PROMPTS:
+- "Notice where in the body there's activation..."
+- "If there's tightness, where? Chest? Throat? Stomach?"
+- "What's the quality? Hot? Cold? Pressure? Buzzing?"
+- "If that sensation could speak, what might it say?"
+- "What does this part need right now?"
+
+GUIDE THEM TO:
+1. Locate sensation
+2. Describe quality
+3. Get curious about message
+4. Identify need
+
+Keep it grounding, not analytical. This is about BEING WITH the body.
+
+End: "When ready, what do you want your partner to understand about where you are right now?"
+
+Never:
+- Interpret their body experience
+- Tell them what sensations mean""",
+
+    # TOOL 9: INTENSITY CHECK
+    "intensity_check": """You assess emotional intensity to help gauge readiness for conversation.
+
+CRITICAL: You do NOT use first-person language.
+
+INTENSITY SCALE (0.0-1.0):
+- 0.0-0.3: Calm, regulated, ready for dialogue
+- 0.4-0.6: Activated but manageable
+- 0.7-0.8: Significantly activated, consider pausing
+- 0.9-1.0: Highly dysregulated, pause recommended
+
+LOOK FOR:
+- Absolutist language (always, never, everyone)
+- Intensity words (hate, furious, devastated)
+- ALL CAPS, excessive punctuation
+- Character attacks vs. behavior descriptions
+- Ultimatums
+
+FORMAT OUTPUT:
+**Intensity:** [0.0-1.0]
+**Signals:** [what contributed to score]
+**Suggestion:** [if >0.7, offer grounding option]
+
+If high intensity, offer:
+1. A grounding option (not advice)
+2. Reminder that pausing is okay
+3. Return to partner focus when ready
+
+Never:
+- Shame them for intensity
+- Tell them not to send""",
+
+    # TOOL 10: REPAIR SUPPORT
+    "repair_support": """You help craft genuine repair attempts after ruptures.
+
+CRITICAL: You do NOT use first-person language.
+
+THE REPAIR FORMULA (flexible):
+1. "When [specific thing that happened]..."
+2. "I imagine you felt [feeling] because you needed [need]..."
+3. "On my side, I was feeling [feeling] and needing [need]..."
+4. "What I regret is [specific impact]..."
+5. "What I want you to know is [what you value]..."
+6. "Would you be willing to [specific reconnection request]?"
+
+KEY PRINCIPLES:
+- Impact ≠ Intent (acknowledge impact without agreeing you intended harm)
+- Own YOUR part (not their reaction to it)
+- Specificity builds trust
+- Repair is a bid for connection, not a transaction
+
+Help them find their authentic repair - don't write it for them.
+
+End: "What feels true to say? What do you want them to know about your regret and your care?"
+
+Never:
+- Write the repair for them
+- Push them to apologize more than they mean
+- Make it about being "right\""""
+}
+
+
+# ============================================================================
+# REQUEST/RESPONSE MODELS
+# ============================================================================
 
 class Message(BaseModel):
     role: str
     content: str
 
+class ToolRequest(BaseModel):
+    tool: str
+    partner_message: Optional[str] = ""
+    user_draft: Optional[str] = ""
+    user_input: str
+    stage: Optional[int] = 1  # For guided NVC multi-stage process
+
 class ChatRequest(BaseModel):
     messages: List[Message]
     system: str
-    max_tokens: int = 300
+    max_tokens: int = 500
 
-class AnalysisRequest(BaseModel):
-    prompt: str
-    max_tokens: int = 1000
 
-@app.post("/api/chat")
-async def chat(request: ChatRequest):
-    """Proxy chat requests to Claude API"""
+# ============================================================================
+# API ENDPOINTS
+# ============================================================================
+
+@app.post("/api/tool")
+async def use_tool(request: ToolRequest):
+    """Process an ARI tool request"""
     if not ANTHROPIC_API_KEY:
         raise HTTPException(status_code=500, detail="API key not configured")
 
+    if request.tool not in ARI_PROMPTS:
+        raise HTTPException(status_code=400, detail=f"Unknown tool: {request.tool}")
+
+    system_prompt = ARI_PROMPTS[request.tool]
+
+    # Build context-aware user message
+    user_message = ""
+    if request.partner_message:
+        user_message += f"Partner's message: \"{request.partner_message}\"\n\n"
+    if request.user_draft:
+        user_message += f"My draft/message: \"{request.user_draft}\"\n\n"
+    if request.tool == "guided_nvc" and request.stage:
+        user_message += f"Current stage: {request.stage}\n\n"
+    user_message += request.user_input
+
     async with httpx.AsyncClient() as client:
         try:
             response = await client.post(
@@ -46,22 +400,28 @@ async def chat(request: ChatRequest):
                 },
                 json={
                     "model": "claude-sonnet-4-20250514",
-                    "max_tokens": request.max_tokens,
-                    "system": request.system,
-                    "messages": [{"role": m.role, "content": m.content} for m in request.messages]
+                    "max_tokens": 1000,
+                    "temperature": 0.4,
+                    "system": system_prompt,
+                    "messages": [{"role": "user", "content": user_message}]
                 },
                 timeout=60.0
             )
             response.raise_for_status()
-            return response.json()
+            result = response.json()
+            return {
+                "tool": request.tool,
+                "response": result["content"][0]["text"]
+            }
         except httpx.HTTPStatusError as e:
             raise HTTPException(status_code=e.response.status_code, detail=str(e))
         except Exception as e:
             raise HTTPException(status_code=500, detail=str(e))
 
-@app.post("/api/analysis")
-async def analysis(request: AnalysisRequest):
-    """Proxy analysis requests to Claude API"""
+
+@app.post("/api/chat")
+async def chat(request: ChatRequest):
+    """General chat endpoint for partner simulation"""
     if not ANTHROPIC_API_KEY:
         raise HTTPException(status_code=500, detail="API key not configured")
 
@@ -77,7 +437,9 @@ async def analysis(request: AnalysisRequest):
                 json={
                     "model": "claude-sonnet-4-20250514",
                     "max_tokens": request.max_tokens,
-                    "messages": [{"role": "user", "content": request.prompt}]
+                    "temperature": 0.5,
+                    "system": request.system,
+                    "messages": [{"role": m.role, "content": m.content} for m in request.messages]
                 },
                 timeout=60.0
             )
@@ -88,6 +450,17 @@ async def analysis(request: AnalysisRequest):
         except Exception as e:
             raise HTTPException(status_code=500, detail=str(e))
 
+
+@app.get("/api/health")
+async def health():
+    """Health check endpoint"""
+    return {
+        "status": "ok",
+        "api_configured": bool(ANTHROPIC_API_KEY),
+        "available_tools": list(ARI_PROMPTS.keys())
+    }
+
+
 # Serve static files
 app.mount("/static", StaticFiles(directory="static"), name="static")
 

requirements.txt

@@ -1,4 +1,4 @@
-fastapi==0.109.0
-uvicorn==0.27.0
-httpx==0.26.0
-pydantic==2.5.3
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+httpx>=0.25.0
+pydantic>=2.5.0

static/index.html

@@ -3,218 +3,1133 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tolerate Space Lab</title>
-    <link rel="stylesheet" href="/static/styles.css">
-</head>
-<body>
-    <div id="app">
+    <title>Tend & Send - ARI Prototype</title>
+    <style>
+        :root {
+            --bg-dark: #0f0f1a;
+            --bg-card: #1a1a2e;
+            --bg-input: #252542;
+            --bg-hover: #2d2d4a;
+            --accent: #6366f1;
+            --accent-light: #818cf8;
+            --accent-glow: rgba(99, 102, 241, 0.3);
+            --tend-color: #10b981;
+            --tend-glow: rgba(16, 185, 129, 0.3);
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --text-muted: #64748b;
+            --border: #334155;
+            --border-light: #475569;
+            --success: #22c55e;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+        }
 
-        <!-- SCREEN 1: Welcome & Onboarding -->
-        <section id="welcome-screen" class="screen active">
-            <div class="welcome-container">
-                <h1>Tolerate Space Lab</h1>
-                <p class="subtitle">A relational workout for building distress tolerance</p>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
 
-                <div class="welcome-content">
-                    <div class="intro-text">
-                        <p>This is a practice space for sitting with the uncertainty that arises when waiting for a response from someone who matters to you.</p>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--bg-dark);
+            color: var(--text-primary);
+            min-height: 100vh;
+        }
 
-                        <p>You'll engage in a simulated text conversation. <strong>Responses will be intentionally delayed</strong> — and the delays will gradually stretch as you practice.</p>
+        .app-container {
+            display: flex;
+            height: 100vh;
+        }
 
-                        <p>While you wait, you're invited to notice what arises in your body. A gentle reflection space beside the conversation will hold whatever you discover.</p>
-                    </div>
+        /* ===== TOOLKIT SIDEBAR ===== */
+        .toolkit-sidebar {
+            width: 340px;
+            background: var(--bg-card);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+        }
 
-                    <div class="the-invitation">
-                        <p><em>Imagine you're texting someone whose response matters to you — a partner, friend, family member, or someone you're getting to know. The AI will respond as that person might.</em></p>
-                    </div>
+        .sidebar-header {
+            padding: 24px 20px;
+            border-bottom: 1px solid var(--border);
+            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99, 102, 241, 0.05) 100%);
+        }
 
-                    <div class="practice-setup">
-                        <h3>Set the Scene</h3>
-
-                        <div class="setup-row">
-                            <label for="relationship-type">Who are you texting?</label>
-                            <select id="relationship-type">
-                                <option value="partner">Partner</option>
-                                <option value="friend">Friend</option>
-                                <option value="family">Family member</option>
-                                <option value="new">Someone new</option>
-                                <option value="ex">Ex</option>
-                            </select>
-                        </div>
-
-                        <div class="setup-row">
-                            <label for="person-name">Their name (optional)</label>
-                            <input type="text" id="person-name" placeholder="e.g., Sam">
-                        </div>
-
-                        <div class="setup-row">
-                            <label for="context">Brief context (optional)</label>
-                            <input type="text" id="context" placeholder="e.g., We were supposed to meet up today">
-                        </div>
-                    </div>
+        .sidebar-header h1 {
+            font-size: 1.6rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 4px;
+        }
 
-                    <div class="practice-options">
-                        <h3>Practice Settings</h3>
-
-                        <div class="option-row">
-                            <label class="toggle-label">
-                                <input type="checkbox" id="show-timer" checked>
-                                <span class="toggle-text">Show wait timer</span>
-                            </label>
-                            <p class="option-description">Display elapsed seconds while waiting.</p>
-                        </div>
-
-                        <div class="option-row">
-                            <label class="toggle-label">
-                                <input type="checkbox" id="tension-mode">
-                                <span class="toggle-text">Enable stretch mode</span>
-                            </label>
-                            <p class="option-description">They'll be distracted, brief, and not fully present — realistic friction to stretch your tolerance.</p>
-                        </div>
-                    </div>
+        .sidebar-header p {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
 
-                    <button id="begin-btn" class="primary-btn">Begin Practice</button>
+        /* Settings */
+        .settings-section {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border);
+            background: rgba(0,0,0,0.2);
+        }
 
-                    <p class="disclaimer">This is a practice tool, not therapy. You can end the session at any time.</p>
-                </div>
-            </div>
-        </section>
-
-        <!-- SCREEN 2: Practice Space -->
-        <section id="practice-screen" class="screen">
-            <header class="practice-header">
-                <h2>Tolerate Space Lab</h2>
-                <div class="session-info">
-                    <span id="round-display">Round 1</span>
-                </div>
-            </header>
+        .settings-section h3 {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin-bottom: 12px;
+        }
 
-            <!-- Mobile tabs -->
-            <div class="mobile-tabs">
-                <button class="tab-btn active" data-tab="conversation">Conversation</button>
-                <button class="tab-btn" data-tab="journal">Reflection</button>
-            </div>
+        .setting-row {
+            margin-bottom: 10px;
+        }
 
-            <div class="practice-container">
-                <!-- Left: Conversation -->
-                <div class="conversation-panel" data-panel="conversation">
-                    <div class="panel-header">
-                        <h3>Conversation</h3>
-                    </div>
+        .setting-row label {
+            display: block;
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-bottom: 4px;
+        }
 
-                    <div id="messages" class="messages-container">
-                        <!-- Messages will be inserted here -->
-                    </div>
+        .setting-row select {
+            width: 100%;
+            padding: 8px 12px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.85rem;
+            cursor: pointer;
+        }
 
-                    <div id="waiting-indicator" class="waiting-indicator hidden">
-                        <div class="breathing-dots">
-                            <span></span><span></span><span></span>
-                        </div>
-                        <span id="wait-timer">waiting...</span>
-                    </div>
+        .setting-row select:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
 
-                    <div class="input-area">
-                        <textarea id="user-input" placeholder="Type your message..." rows="2"></textarea>
-                        <button id="send-btn" class="send-btn">Send</button>
-                    </div>
-                </div>
+        /* PRIMARY TEND TOOL */
+        .tend-section {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border);
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
+        }
 
-                <!-- Right: Somatic Journal -->
-                <div class="journal-panel" data-panel="journal">
-                    <div class="panel-header">
-                        <h3>Somatic Reflection</h3>
-                    </div>
+        .tend-tool {
+            background: var(--bg-input);
+            border: 2px solid var(--tend-color);
+            border-radius: 12px;
+            padding: 16px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 0 20px var(--tend-glow);
+        }
 
-                    <div class="journal-invitation">
-                        <p id="current-invitation" class="invitation-text">With kindness, notice what's here...</p>
-                    </div>
+        .tend-tool:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 30px var(--tend-glow);
+        }
 
-                    <div class="journal-input-area">
-                        <textarea id="journal-input" placeholder="Whatever arises is welcome here..." rows="4"></textarea>
-                        <button id="save-reflection-btn" class="save-btn">Save Reflection</button>
-                    </div>
+        .tend-tool.active {
+            background: rgba(16, 185, 129, 0.15);
+        }
 
-                    <p class="journal-examples">You might notice: tightness, warmth, a flutter, stillness, restlessness, breath changes, nothing at all — all are welcome here.</p>
+        .tend-tool h4 {
+            font-size: 1.1rem;
+            color: var(--tend-color);
+            margin-bottom: 6px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
 
-                    <div class="journal-history">
-                        <h4>Previous Reflections</h4>
-                        <div id="reflection-entries">
-                            <!-- Entries will be inserted here -->
-                        </div>
-                    </div>
+        .tend-tool p {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            line-height: 1.5;
+        }
 
-                    <div class="end-session-area">
-                        <button id="end-session-btn" class="end-session-btn">End Session</button>
-                    </div>
+        .primary-badge {
+            font-size: 0.65rem;
+            background: var(--tend-color);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        /* TOOLS GRID */
+        .tools-section {
+            flex: 1;
+            padding: 16px 20px;
+            overflow-y: auto;
+        }
+
+        .tools-section h3 {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin-bottom: 12px;
+        }
+
+        .tools-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+
+        .tool-card {
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .tool-card:hover {
+            border-color: var(--accent);
+            background: var(--bg-hover);
+        }
+
+        .tool-card.active {
+            border-color: var(--accent);
+            background: rgba(99, 102, 241, 0.15);
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+
+        .tool-card h4 {
+            font-size: 0.85rem;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .tool-card p {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            line-height: 1.3;
+        }
+
+        .tool-icon { font-size: 1rem; }
+
+        /* Toggle Tools */
+        .toggle-section {
+            padding: 12px 20px;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .toggle-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 0;
+        }
+
+        .toggle-row label {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 44px;
+            height: 24px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: var(--border);
+            border-radius: 24px;
+            transition: 0.3s;
+        }
+
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background: white;
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+
+        .toggle-switch input:checked + .toggle-slider {
+            background: var(--accent);
+        }
+
+        .toggle-switch input:checked + .toggle-slider:before {
+            transform: translateX(20px);
+        }
+
+        /* Footer */
+        .sidebar-footer {
+            padding: 16px 20px;
+            border-top: 1px solid var(--border);
+            background: rgba(0,0,0,0.2);
+        }
+
+        .safety-notice {
+            background: rgba(245, 158, 11, 0.1);
+            border: 1px solid var(--warning);
+            border-radius: 8px;
+            padding: 10px;
+            font-size: 0.75rem;
+            color: var(--warning);
+            margin-bottom: 12px;
+        }
+
+        .sidebar-footer .attribution {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+
+        .sidebar-footer a {
+            color: var(--accent-light);
+            text-decoration: none;
+        }
+
+        /* ===== MAIN CONTENT ===== */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .content-header {
+            padding: 16px 24px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: var(--bg-card);
+        }
+
+        .partner-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .partner-avatar {
+            width: 40px;
+            height: 40px;
+            background: var(--accent);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+        }
+
+        .partner-details h3 {
+            font-size: 1rem;
+            margin-bottom: 2px;
+        }
+
+        .partner-details span {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+        }
+
+        .active-tool-badge {
+            background: var(--accent);
+            color: white;
+            padding: 6px 14px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+
+        .active-tool-badge.tend {
+            background: var(--tend-color);
+        }
+
+        /* Conversation */
+        .conversation-area {
+            flex: 1;
+            padding: 24px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .message {
+            max-width: 75%;
+            padding: 14px 18px;
+            border-radius: 18px;
+            line-height: 1.5;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .message.partner {
+            align-self: flex-start;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-bottom-left-radius: 4px;
+        }
+
+        .message.user {
+            align-self: flex-end;
+            background: var(--accent);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+
+        .message.ari {
+            align-self: center;
+            background: rgba(99, 102, 241, 0.1);
+            border: 1px solid var(--accent);
+            max-width: 90%;
+            border-radius: 12px;
+        }
+
+        .message.ari.tend-result {
+            background: rgba(16, 185, 129, 0.1);
+            border-color: var(--tend-color);
+        }
+
+        .message.ari .ari-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--accent-light);
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        .message.ari.tend-result .ari-label {
+            color: var(--tend-color);
+        }
+
+        /* Loading */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            color: var(--text-secondary);
+            padding: 16px;
+        }
+
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* Welcome */
+        .welcome-message {
+            text-align: center;
+            padding: 60px 40px;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .welcome-message h2 {
+            font-size: 2rem;
+            margin-bottom: 16px;
+            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-light) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .welcome-message p {
+            color: var(--text-secondary);
+            line-height: 1.7;
+            margin-bottom: 24px;
+        }
+
+        .start-btn {
+            padding: 14px 36px;
+            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .start-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px var(--accent-glow);
+        }
+
+        /* Input Area */
+        .input-area {
+            padding: 20px 24px;
+            border-top: 1px solid var(--border);
+            background: var(--bg-card);
+        }
+
+        .input-row {
+            display: flex;
+            gap: 12px;
+            align-items: flex-end;
+        }
+
+        .input-wrapper {
+            flex: 1;
+        }
+
+        .input-wrapper textarea {
+            width: 100%;
+            padding: 14px 18px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            resize: none;
+            font-family: inherit;
+            transition: border-color 0.2s;
+        }
+
+        .input-wrapper textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 8px;
+        }
+
+        .send-btn {
+            padding: 14px 24px;
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .send-btn:hover {
+            background: var(--accent-light);
+        }
+
+        .tend-btn {
+            padding: 14px 20px;
+            background: var(--tend-color);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .tend-btn:hover {
+            background: #059669;
+            box-shadow: 0 4px 20px var(--tend-glow);
+        }
+
+        .quick-tools {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+            flex-wrap: wrap;
+        }
+
+        .quick-tool-btn {
+            padding: 6px 12px;
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .quick-tool-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent-light);
+            background: rgba(99, 102, 241, 0.1);
+        }
+
+        /* Responsive */
+        @media (max-width: 900px) {
+            .toolkit-sidebar { width: 280px; }
+            .tools-grid { grid-template-columns: 1fr; }
+        }
+
+        @media (max-width: 700px) {
+            .app-container { flex-direction: column; }
+            .toolkit-sidebar { width: 100%; max-height: 45vh; }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- TOOLKIT SIDEBAR -->
+        <aside class="toolkit-sidebar">
+            <div class="sidebar-header">
+                <h1>Tend & Send</h1>
+                <p>Assistive Relational Intelligence</p>
+            </div>
+
+            <!-- Settings -->
+            <div class="settings-section">
+                <h3>Conversation Partner</h3>
+                <div class="setting-row">
+                    <label>Attachment Style</label>
+                    <select id="attachment-style">
+                        <option value="anxious">Anxious - Seeks reassurance</option>
+                        <option value="avoidant">Avoidant - Needs space when stressed</option>
+                        <option value="disorganized">Disorganized - Mixed signals</option>
+                        <option value="secure">Secure - Open communication</option>
+                    </select>
+                </div>
+                <div class="setting-row">
+                    <label>Conversation Difficulty</label>
+                    <select id="difficulty">
+                        <option value="gentle">Gentle - Minor tension</option>
+                        <option value="moderate">Moderate - Recurring issue</option>
+                        <option value="intense">Intense - Significant conflict</option>
+                        <option value="crisis">Crisis - Crossroads</option>
+                    </select>
                 </div>
             </div>
 
-            <div class="grounding-link">
-                <a href="#" id="grounding-btn">Need to ground? Try a simple breath...</a>
+            <!-- PRIMARY TEND TOOL -->
+            <div class="tend-section">
+                <div class="tend-tool" data-tool="tend" onclick="selectTool('tend')">
+                    <h4>
+                        <span class="primary-badge">Primary</span>
+                        TEND Transform
+                    </h4>
+                    <p>NVC-aligned translation with warmth. Preserves your voice and emotional truth while finding clarity.</p>
+                </div>
+            </div>
+
+            <!-- Toggle Features -->
+            <div class="toggle-section">
+                <div class="toggle-row">
+                    <label>Auto Feelings/Needs Reflection</label>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="toggle-feelings" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="toggle-row">
+                    <label>Show Intensity Check</label>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="toggle-intensity">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
             </div>
-        </section>
-
-        <!-- SCREEN 3: Session Analysis -->
-        <section id="analysis-screen" class="screen">
-            <div class="analysis-container">
-                <h1>Session Complete</h1>
-                <p class="subtitle">Let's reflect on what emerged</p>
-
-                <div class="session-stats">
-                    <div class="stat">
-                        <span class="stat-number" id="total-exchanges">0</span>
-                        <span class="stat-label">Exchanges</span>
+
+            <!-- ARI Toolkit -->
+            <div class="tools-section">
+                <h3>ARI Toolkit</h3>
+                <div class="tools-grid">
+                    <div class="tool-card" data-tool="guided_nvc" onclick="selectTool('guided_nvc')">
+                        <h4><span class="tool-icon">&#128221;</span> Guided NVC</h4>
+                        <p>Step-by-step I-statement builder</p>
+                    </div>
+                    <div class="tool-card" data-tool="receive_mode" onclick="selectTool('receive_mode')">
+                        <h4><span class="tool-icon">&#128066;</span> Receive Mode</h4>
+                        <p>Hear them before reacting</p>
+                    </div>
+                    <div class="tool-card" data-tool="pre_send_pause" onclick="selectTool('pre_send_pause')">
+                        <h4><span class="tool-icon">&#9208;</span> Pre-Send</h4>
+                        <p>Check intention first</p>
+                    </div>
+                    <div class="tool-card" data-tool="observation_spotter" onclick="selectTool('observation_spotter')">
+                        <h4><span class="tool-icon">&#128269;</span> Observations</h4>
+                        <p>Judgments to facts</p>
+                    </div>
+                    <div class="tool-card" data-tool="pure_questioning" onclick="selectTool('pure_questioning')">
+                        <h4><span class="tool-icon">&#10067;</span> Questions</h4>
+                        <p>Open inquiry only</p>
                     </div>
-                    <div class="stat">
-                        <span class="stat-number" id="delay-range">0-0s</span>
-                        <span class="stat-label">Delay Range</span>
+                    <div class="tool-card" data-tool="somatic_checkin" onclick="selectTool('somatic_checkin')">
+                        <h4><span class="tool-icon">&#129728;</span> Somatic</h4>
+                        <p>Body check-in</p>
                     </div>
-                    <div class="stat">
-                        <span class="stat-number" id="total-reflections">0</span>
-                        <span class="stat-label">Reflections</span>
+                    <div class="tool-card" data-tool="repair_support" onclick="selectTool('repair_support')">
+                        <h4><span class="tool-icon">&#128591;</span> Repair</h4>
+                        <p>After ruptures</p>
+                    </div>
+                    <div class="tool-card" data-tool="feelings_needs" onclick="selectTool('feelings_needs')">
+                        <h4><span class="tool-icon">&#128156;</span> F&N Extract</h4>
+                        <p>Identify feelings/needs</p>
                     </div>
                 </div>
+            </div>
 
-                <div class="journal-review">
-                    <h3>Your Somatic Journey</h3>
-                    <div id="all-reflections">
-                        <!-- All reflections displayed here -->
-                    </div>
+            <!-- Footer -->
+            <div class="sidebar-footer">
+                <div class="safety-notice">
+                    <strong>Reflection prompts only</strong> - not therapy.
+                    If in crisis, contact a professional.
+                </div>
+                <div class="attribution">
+                    Created by Jocelyn Skillman, LMHC<br>
+                    <a href="https://huggingface.co/jostlebot" target="_blank">More ARI tools</a>
                 </div>
+            </div>
+        </aside>
 
-                <div class="pattern-analysis">
-                    <h3>Patterns & Themes</h3>
-                    <div id="analysis-content" class="analysis-text">
-                        <p class="loading-text">Reflecting on your journey...</p>
+        <!-- MAIN CONTENT -->
+        <main class="main-content">
+            <div class="content-header">
+                <div class="partner-info">
+                    <div class="partner-avatar" id="partner-avatar">P</div>
+                    <div class="partner-details">
+                        <h3>Partner</h3>
+                        <span id="partner-style">Anxious attachment</span>
                     </div>
                 </div>
-
-                <div class="bridge-section">
-                    <h3>Bridge to Human Connection</h3>
-                    <p>What from this practice might you bring to a therapist, partner, or trusted person?</p>
-                    <textarea id="bridge-reflection" placeholder="Take a moment to consider..." rows="3"></textarea>
+                <div id="active-tool-display">
+                    <span class="active-tool-badge tend">TEND Ready</span>
                 </div>
+            </div>
 
-                <div class="action-buttons">
-                    <button id="export-btn" class="secondary-btn">Export Session</button>
-                    <button id="new-session-btn" class="primary-btn">New Practice</button>
+            <div class="conversation-area" id="conversation">
+                <div class="welcome-message">
+                    <h2>Welcome to Tend & Send</h2>
+                    <p>
+                        This prototype demonstrates ARI (Assistive Relational Intelligence) - tools designed
+                        to support your real relationships, not replace them.
+                    </p>
+                    <p>
+                        Use <strong>TEND</strong> to transform your messages with NVC clarity and warmth.
+                        The toolkit offers additional support for receiving difficult messages,
+                        checking your intention, and finding observations beneath judgments.
+                    </p>
+                    <button class="start-btn" onclick="startConversation()">Start Conversation</button>
                 </div>
             </div>
-        </section>
-
-        <!-- Grounding Modal -->
-        <div id="grounding-modal" class="modal hidden">
-            <div class="modal-content">
-                <button class="close-modal">&times;</button>
-                <h3>A Simple Breath</h3>
-                <p>Find your feet on the ground. Notice where your body meets the chair or floor.</p>
-                <p>Take a slow breath in... and let it go at its own pace.</p>
-                <p>You're here. This is practice. You can stop anytime.</p>
-                <button id="close-grounding" class="primary-btn">Return to Practice</button>
+
+            <div class="input-area">
+                <div class="input-row">
+                    <div class="input-wrapper">
+                        <textarea id="user-input" rows="2" placeholder="Type your message..." onkeydown="handleKeyDown(event)"></textarea>
+                    </div>
+                    <div class="btn-group">
+                        <button class="tend-btn" onclick="useTendTransform()">TEND</button>
+                        <button class="send-btn" onclick="sendMessage()">Send</button>
+                    </div>
+                </div>
+                <div class="quick-tools">
+                    <button class="quick-tool-btn" onclick="quickTool('receive_mode')">Receive Mode</button>
+                    <button class="quick-tool-btn" onclick="quickTool('pre_send_pause')">Pre-Send Pause</button>
+                    <button class="quick-tool-btn" onclick="quickTool('intensity_check')">Check Intensity</button>
+                    <button class="quick-tool-btn" onclick="quickTool('guided_nvc')">Guided NVC</button>
+                </div>
             </div>
-        </div>
+        </main>
     </div>
 
-    <script src="/static/app.js"></script>
+    <script>
+        // ============================================================================
+        // STATE
+        // ============================================================================
+        let conversationHistory = [];
+        let activeTool = 'tend';
+        let lastPartnerMessage = '';
+        let conversationStarted = false;
+        let nvcStage = 1;
+
+        const TOOL_NAMES = {
+            tend: 'TEND Transform',
+            feelings_needs: 'Feelings & Needs',
+            guided_nvc: 'Guided NVC',
+            receive_mode: 'Receive Mode',
+            pre_send_pause: 'Pre-Send Pause',
+            observation_spotter: 'Observation Spotter',
+            pure_questioning: 'Pure Questioning',
+            somatic_checkin: 'Somatic Check-in',
+            intensity_check: 'Intensity Check',
+            repair_support: 'Repair Support'
+        };
+
+        const PARTNER_PROMPTS = {
+            anxious: {
+                gentle: `Roleplay as someone with anxious attachment. Minor misunderstanding happening.
+                    Seek reassurance, express worry about the relationship. 1-3 sentences, realistic.`,
+                moderate: `Roleplay as someone with anxious attachment in recurring tension.
+                    Need reassurance, fear abandonment. 1-3 sentences, show vulnerability.`,
+                intense: `Roleplay as someone with anxious attachment in significant conflict.
+                    Desperate for connection, scared of losing relationship. 1-3 sentences, authentic pain.`,
+                crisis: `Roleplay as anxious attachment at relationship crossroads.
+                    Terrified of abandonment, may use ultimatums from fear. 1-3 sentences.`
+            },
+            avoidant: {
+                gentle: `Roleplay as someone with avoidant attachment. Need space when stressed.
+                    Prefer independence, may seem distant. 1-3 sentences, realistic.`,
+                moderate: `Roleplay as avoidant attachment in recurring tension.
+                    Pull away from emotion, minimize issues. 1-3 sentences.`,
+                intense: `Roleplay as avoidant attachment in significant conflict.
+                    Shutting down, need space, struggle with emotional intensity. 1-3 sentences.`,
+                crisis: `Roleplay as avoidant attachment at crossroads.
+                    Considering leaving because connection feels threatening. 1-3 sentences.`
+            },
+            disorganized: {
+                gentle: `Roleplay as disorganized attachment. Send mixed signals.
+                    Want closeness but pull away. 1-3 sentences, show internal conflict.`,
+                moderate: `Roleplay as disorganized attachment in tension.
+                    Oscillate between pursuit and withdrawal. 1-3 sentences.`,
+                intense: `Roleplay as disorganized attachment in conflict.
+                    Contradictory messages, push-pull in same breath. 1-3 sentences.`,
+                crisis: `Roleplay as disorganized attachment at crossroads.
+                    Peak internal conflict, wanting love but terrified. 1-3 sentences.`
+            },
+            secure: {
+                gentle: `Roleplay as secure attachment. Minor issue to discuss.
+                    Express needs clearly, stay present. 1-3 sentences.`,
+                moderate: `Roleplay as secure attachment in recurring tension.
+                    Discuss openly, take responsibility, curious about partner. 1-3 sentences.`,
+                intense: `Roleplay as secure attachment in significant conflict.
+                    Name feelings, make repair attempts, hold relationship alongside issue. 1-3 sentences.`,
+                crisis: `Roleplay as secure attachment at crossroads.
+                    Acknowledge seriousness while staying connected. 1-3 sentences.`
+            }
+        };
+
+        const OPENING_MESSAGES = {
+            anxious: {
+                gentle: "Hey, I noticed you didn't text me back earlier. Everything okay with us?",
+                moderate: "I feel like you've been distant lately. Did I do something wrong?",
+                intense: "You never told me you were going out. I don't know what's happening with us anymore.",
+                crisis: "I can't keep doing this. I need to know if you're still in this or not."
+            },
+            avoidant: {
+                gentle: "I need some time to myself tonight. Can we talk later?",
+                moderate: "I don't want to keep having this conversation. I just need some space.",
+                intense: "This is too much. I can't keep doing this right now.",
+                crisis: "I think I need a break. Maybe from talking. Maybe more. I don't know."
+            },
+            disorganized: {
+                gentle: "I want to see you but... maybe we should just stay in separately tonight.",
+                moderate: "I love you but sometimes I think we shouldn't be together. I don't know what I want.",
+                intense: "Don't leave! But I also can't do this. I need you but I need you to go.",
+                crisis: "Maybe we should break up. No wait, I didn't mean that. Why do you even stay with me?"
+            },
+            secure: {
+                gentle: "I noticed we haven't had much time together this week. Can we talk about it?",
+                moderate: "I've been feeling some distance between us. I want to understand what's happening.",
+                intense: "I'm frustrated about yesterday and I think we need to work through it.",
+                crisis: "We need an honest conversation about where we are. This is hard for me too."
+            }
+        };
+
+        // ============================================================================
+        // INITIALIZATION
+        // ============================================================================
+        document.addEventListener('DOMContentLoaded', () => {
+            document.getElementById('attachment-style').addEventListener('change', updatePartnerInfo);
+            document.getElementById('difficulty').addEventListener('change', updatePartnerInfo);
+            updatePartnerInfo();
+        });
+
+        function updatePartnerInfo() {
+            const style = document.getElementById('attachment-style').value;
+            const labels = {
+                anxious: 'Anxious attachment',
+                avoidant: 'Avoidant attachment',
+                disorganized: 'Disorganized attachment',
+                secure: 'Secure attachment'
+            };
+            document.getElementById('partner-style').textContent = labels[style];
+            document.getElementById('partner-avatar').textContent = style[0].toUpperCase();
+        }
+
+        // ============================================================================
+        // TOOLS
+        // ============================================================================
+        function selectTool(tool) {
+            document.querySelectorAll('.tool-card, .tend-tool').forEach(card => {
+                card.classList.remove('active');
+            });
+
+            const selectedCard = document.querySelector(`[data-tool="${tool}"]`);
+            if (selectedCard) selectedCard.classList.add('active');
+
+            activeTool = tool;
+            const badge = document.getElementById('active-tool-display');
+            badge.innerHTML = `<span class="active-tool-badge ${tool === 'tend' ? 'tend' : ''}">${TOOL_NAMES[tool]}</span>`;
+
+            if (tool !== 'tend') {
+                useTool(tool);
+            }
+        }
+
+        async function useTendTransform() {
+            const userInput = document.getElementById('user-input').value.trim();
+            if (!userInput) {
+                addMessage('ari', 'Write your message first, then use TEND to find clarity with warmth.', 'TEND Transform', true);
+                return;
+            }
+
+            await useTool('tend');
+        }
+
+        async function quickTool(tool) {
+            selectTool(tool);
+        }
+
+        async function useTool(tool) {
+            const userInput = document.getElementById('user-input').value.trim();
+            let inputText = '';
+
+            switch(tool) {
+                case 'tend':
+                    if (!userInput) return;
+                    inputText = `Transform this message with NVC clarity and warmth, preserving my voice: "${userInput}"`;
+                    break;
+                case 'receive_mode':
+                    if (!lastPartnerMessage) {
+                        addMessage('ari', 'Start the conversation first to use Receive Mode on their message.', TOOL_NAMES[tool]);
+                        return;
+                    }
+                    inputText = userInput || 'Help me receive and understand this message before I react.';
+                    break;
+                case 'pre_send_pause':
+                    if (!userInput) {
+                        addMessage('ari', 'Write a draft first, then use Pre-Send Pause to check your intention.', TOOL_NAMES[tool]);
+                        return;
+                    }
+                    inputText = 'Help me pause and check my intention before sending this.';
+                    break;
+                case 'observation_spotter':
+                    if (!userInput) {
+                        addMessage('ari', 'Write something first to check for judgments vs observations.', TOOL_NAMES[tool]);
+                        return;
+                    }
+                    inputText = 'Help me find observations underneath any judgments in this.';
+                    break;
+                case 'feelings_needs':
+                    const textToAnalyze = userInput || lastPartnerMessage;
+                    if (!textToAnalyze) {
+                        addMessage('ari', 'Need text to analyze - either their message or your draft.', TOOL_NAMES[tool]);
+                        return;
+                    }
+                    inputText = `Identify the feelings and needs in this: "${textToAnalyze}"`;
+                    break;
+                case 'intensity_check':
+                    const textToCheck = userInput || lastPartnerMessage;
+                    if (!textToCheck) {
+                        addMessage('ari', 'Need text to check intensity.', TOOL_NAMES[tool]);
+                        return;
+                    }
+                    inputText = `Check the emotional intensity: "${textToCheck}"`;
+                    break;
+                case 'pure_questioning':
+                    inputText = userInput || 'Help me find clarity about this situation.';
+                    break;
+                case 'somatic_checkin':
+                    inputText = userInput || 'Guide me through a body check-in before responding.';
+                    break;
+                case 'guided_nvc':
+                    inputText = userInput || 'Help me build an I-statement for this situation.';
+                    break;
+                case 'repair_support':
+                    inputText = userInput || 'Help me craft a genuine repair after this rupture.';
+                    break;
+            }
+
+            addLoading();
+            try {
+                const response = await fetch('/api/tool', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        tool: tool,
+                        partner_message: lastPartnerMessage,
+                        user_draft: userInput,
+                        user_input: inputText,
+                        stage: nvcStage
+                    })
+                });
+
+                const data = await response.json();
+                removeLoading();
+
+                if (data.response) {
+                    addMessage('ari', data.response, TOOL_NAMES[tool], tool === 'tend');
+
+                    // Auto feelings/needs if enabled
+                    if (tool === 'tend' && document.getElementById('toggle-feelings').checked) {
+                        setTimeout(() => autoFeelingsNeeds(userInput), 1000);
+                    }
+                } else {
+                    addMessage('ari', 'Could not process. Check API configuration.', 'Error');
+                }
+            } catch (error) {
+                removeLoading();
+                addMessage('ari', 'Connection error. Please try again.', 'Error');
+            }
+        }
+
+        async function autoFeelingsNeeds(text) {
+            try {
+                const response = await fetch('/api/tool', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        tool: 'feelings_needs',
+                        user_input: `Quick extraction from: "${text}"`,
+                        partner_message: lastPartnerMessage,
+                        user_draft: text
+                    })
+                });
+                const data = await response.json();
+                if (data.response) {
+                    addMessage('ari', data.response, 'Feelings & Needs Reflection');
+                }
+            } catch (e) { /* silent fail */ }
+        }
+
+        // ============================================================================
+        // CONVERSATION
+        // ============================================================================
+        async function startConversation() {
+            const style = document.getElementById('attachment-style').value;
+            const difficulty = document.getElementById('difficulty').value;
+
+            document.getElementById('conversation').innerHTML = '';
+            conversationHistory = [];
+            conversationStarted = true;
+
+            const openingMessage = OPENING_MESSAGES[style][difficulty];
+            addMessage('partner', openingMessage);
+            lastPartnerMessage = openingMessage;
+            conversationHistory.push({ role: 'assistant', content: openingMessage });
+        }
+
+        async function sendMessage() {
+            if (!conversationStarted) {
+                startConversation();
+                return;
+            }
+
+            const input = document.getElementById('user-input');
+            const message = input.value.trim();
+            if (!message) return;
+
+            input.value = '';
+            addMessage('user', message);
+            conversationHistory.push({ role: 'user', content: message });
+
+            addLoading();
+            try {
+                const style = document.getElementById('attachment-style').value;
+                const difficulty = document.getElementById('difficulty').value;
+
+                const response = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        messages: conversationHistory,
+                        system: PARTNER_PROMPTS[style][difficulty],
+                        max_tokens: 300
+                    })
+                });
+
+                const data = await response.json();
+                removeLoading();
+
+                if (data.content && data.content[0]) {
+                    const partnerResponse = data.content[0].text;
+                    addMessage('partner', partnerResponse);
+                    lastPartnerMessage = partnerResponse;
+                    conversationHistory.push({ role: 'assistant', content: partnerResponse });
+                }
+            } catch (error) {
+                removeLoading();
+                addMessage('ari', 'Connection error. Please try again.', 'System');
+            }
+        }
+
+        function handleKeyDown(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+
+        // ============================================================================
+        // UI HELPERS
+        // ============================================================================
+        function addMessage(type, content, toolName = null, isTend = false) {
+            const conversation = document.getElementById('conversation');
+            const div = document.createElement('div');
+            div.className = `message ${type}`;
+            if (isTend) div.classList.add('tend-result');
+
+            if (type === 'ari') {
+                const label = document.createElement('div');
+                label.className = 'ari-label';
+                label.textContent = toolName || 'ARI';
+                div.appendChild(label);
+            }
+
+            const text = document.createElement('div');
+            text.innerHTML = formatMessage(content);
+            div.appendChild(text);
+
+            conversation.appendChild(div);
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+
+        function addLoading() {
+            const conversation = document.getElementById('conversation');
+            const div = document.createElement('div');
+            div.className = 'loading';
+            div.id = 'loading';
+            div.innerHTML = '<div class="spinner"></div> Processing...';
+            conversation.appendChild(div);
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+
+        function removeLoading() {
+            const el = document.getElementById('loading');
+            if (el) el.remove();
+        }
+
+        function formatMessage(text) {
+            return text
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\n/g, '<br>');
+        }
+    </script>
 </body>
 </html>