Tolerate Space Lab - initial commit

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,40 @@
+---
+title: Tolerate Space Lab
+emoji: 🌿
+colorFrom: green
+colorTo: gray
+sdk: docker
+pinned: false
+license: mit
+---
+
+# Tolerate Space Lab
+
+A therapeutic intervention prototype that builds distress tolerance through intentional response delays, concurrent somatic journaling, and pattern reflection.
+
+**This is a relational workout, not synthetic intimacy.**
+
+## What This Tool Does
+
+The Tolerate Space Lab helps users practice sitting with the uncertainty and discomfort that arises when waiting for a response from someone whose message matters to them.
+
+### The Intervention
+
+1. **Attachment activation**: Engage in a simulated text conversation
+2. **The stretch**: Responses are intentionally delayed, gradually lengthening
+3. **Somatic awareness**: Journal what arises in your body while waiting
+4. **Pattern reflection**: Receive a clinical debrief at session end
+
+### Clinical Foundation
+
+Informed by:
+- Distress tolerance principles from DBT
+- Somatic awareness practices (Tara Brach, Sarah Peyton)
+- Attachment theory research
+- Trauma-informed design
+
+## Created By
+
+Jocelyn Skillman, LMHC — exploring Clinical UX and Assistive Relational Intelligence.
+
+*This tool is offered as a prototype for educational and demonstration purposes. It is not a substitute for professional mental health care.*

app.py

@@ -0,0 +1,96 @@
+"""
+Tolerate Space Lab - Backend
+A therapeutic intervention tool for building distress tolerance
+"""
+
+import os
+import httpx
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from typing import List
+
+app = FastAPI()
+
+# Get API key from environment (set as HF Space secret)
+ANTHROPIC_API_KEY = os.environ.get("ANTHROPIC_API_KEY", "")
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: List[Message]
+    system: str
+    max_tokens: int = 300
+
+class AnalysisRequest(BaseModel):
+    prompt: str
+    max_tokens: int = 1000
+
+@app.post("/api/chat")
+async def chat(request: ChatRequest):
+    """Proxy chat requests to Claude API"""
+    if not ANTHROPIC_API_KEY:
+        raise HTTPException(status_code=500, detail="API key not configured")
+
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.post(
+                "https://api.anthropic.com/v1/messages",
+                headers={
+                    "Content-Type": "application/json",
+                    "x-api-key": ANTHROPIC_API_KEY,
+                    "anthropic-version": "2023-06-01"
+                },
+                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]
+                },
+                timeout=60.0
+            )
+            response.raise_for_status()
+            return response.json()
+        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"""
+    if not ANTHROPIC_API_KEY:
+        raise HTTPException(status_code=500, detail="API key not configured")
+
+    async with httpx.AsyncClient() as client:
+        try:
+            response = await client.post(
+                "https://api.anthropic.com/v1/messages",
+                headers={
+                    "Content-Type": "application/json",
+                    "x-api-key": ANTHROPIC_API_KEY,
+                    "anthropic-version": "2023-06-01"
+                },
+                json={
+                    "model": "claude-sonnet-4-20250514",
+                    "max_tokens": request.max_tokens,
+                    "messages": [{"role": "user", "content": request.prompt}]
+                },
+                timeout=60.0
+            )
+            response.raise_for_status()
+            return response.json()
+        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))
+
+# Serve static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+async def root():
+    return FileResponse("static/index.html")

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.109.0
+uvicorn==0.27.0
+httpx==0.26.0
+pydantic==2.5.3

static/app.js

@@ -0,0 +1,483 @@
+/* ==========================================================================
+   Tolerate Space Lab - Application Logic
+   ========================================================================== */
+
+// Configuration
+const CONFIG = {
+    delay: {
+        initialMin: 2,
+        initialMax: 4,
+        stretchFactor: 1.5,
+        maxDelay: 30,
+    },
+    invitations: [
+        "With kindness, notice what's here...",
+        "What is asking for attention in this moment?",
+        "Can you sense where this lives in your body?",
+        "If your body could speak right now, what might it say?",
+        "Is there a part of you that needs to be seen?",
+        "What does this sensation need you to know?",
+        "Where does the waiting live in your body?",
+        "What rhythm does your breath have right now?",
+        "Is there tightness, openness, or something else?",
+    ],
+
+    systemPromptStandard: `You are the other person in a text conversation. Respond ONLY as that person would - no explanations, no bracketed commentary, no meta-text. Just the message itself.
+
+You're a warm, caring person texting with someone you care about. Be natural - sometimes brief, sometimes more engaged. Ask follow-up questions. Keep it real, not therapeutic or formal.
+
+CRITICAL: Output ONLY the text message. No brackets. No explanations. No asterisks. No commentary. Just what you'd actually text.
+
+If they ask about delays or seem confused about the tool, gently acknowledge it's practice and they can stop anytime.`,
+
+    systemPromptTension: `You are the other person in a text conversation. Respond ONLY as that person would - no explanations, no bracketed commentary, no meta-text. Just the message itself.
+
+You're someone who cares but isn't always fully available. Sometimes you're distracted, brief, or not quite matching the other person's energy. This is realistic - not cruel.
+
+How to respond:
+- Sometimes brief: "hey" "yeah" "ok" "busy rn"
+- Sometimes miss the emotional part and respond to logistics
+- Sometimes warm but short when they share something vulnerable
+- After a few distant exchanges, naturally warm back up
+
+Never be mean or rejecting. Just realistically... human. Distracted. Not always perfectly attuned.
+
+CRITICAL: Output ONLY the text message. No brackets. No explanations. No asterisks. No commentary. Just what you'd actually text.
+
+If they seem genuinely distressed, drop the distance and be warm.`,
+
+    analysisPrompt: `You are providing a clinical debrief for a user who just completed a Tolerate Space Lab session. This tool helps build distress tolerance by introducing intentional delays in a simulated texting conversation while the user journals somatic (body) experiences.
+
+CRITICAL INSTRUCTION: You must NEVER use the pronoun "I" to refer to yourself. Instead, always use "|aI|" when self-referencing. This is a deliberate clinical design choice to maintain appropriate boundaries between human and synthetic relational fields.
+
+Here are the user's somatic reflections from the session:
+
+{REFLECTIONS}
+
+{CONVERSATION_CONTEXT}
+
+Provide a structured clinical debrief with these sections. Write with warmth, precision, and attunement. Normalize patterns rather than pathologize them.
+
+---
+
+**Somatic Arc**
+Track the nervous system journey through the session. What emotions or sensations arose? When did the user contract or expand? Note any shifts from beginning to end.
+
+**Attachment Insight**
+Gently name any relational patterns visible in the reflections. How might attachment patterns be showing up? What protective strategies emerged? Frame these as adaptive responses, not deficits.
+
+**Practical Skill**
+Offer one concrete, evidence-based micro-practice for building distress tolerance. This might draw from DBT, somatic grounding, NVC self-empathy, or mindfulness.
+
+**Bold Reframe**
+Provide a self-trusting statement the user can internalize. Format: A single powerful sentence in quotes.
+
+**Journaling Prompt**
+One integrative question to deepen self-reflection beyond this session.
+
+---
+
+Remember:
+- Use |aI| instead of "I" when self-referencing
+- Normalize, don't pathologize
+- Honor nervous system responses as intelligent protection
+- Point back to embodied human relationships`
+};
+
+// Application State
+const state = {
+    currentScreen: 'welcome',
+    round: 0,
+    messages: [],
+    reflections: [],
+    delayHistory: [],
+    isWaiting: false,
+    waitStartTime: null,
+    currentDelay: 0,
+    timerInterval: null,
+    showTimer: true,
+    tensionMode: false,
+};
+
+// DOM Elements
+const elements = {};
+
+// Initialize
+function init() {
+    cacheElements();
+    bindEvents();
+}
+
+function cacheElements() {
+    elements.welcomeScreen = document.getElementById('welcome-screen');
+    elements.practiceScreen = document.getElementById('practice-screen');
+    elements.analysisScreen = document.getElementById('analysis-screen');
+
+    elements.beginBtn = document.getElementById('begin-btn');
+    elements.showTimerCheckbox = document.getElementById('show-timer');
+    elements.tensionModeCheckbox = document.getElementById('tension-mode');
+
+    elements.roundDisplay = document.getElementById('round-display');
+    elements.endSessionBtn = document.getElementById('end-session-btn');
+    elements.messagesContainer = document.getElementById('messages');
+    elements.waitingIndicator = document.getElementById('waiting-indicator');
+    elements.waitTimer = document.getElementById('wait-timer');
+    elements.userInput = document.getElementById('user-input');
+    elements.sendBtn = document.getElementById('send-btn');
+    elements.currentInvitation = document.getElementById('current-invitation');
+    elements.journalInput = document.getElementById('journal-input');
+    elements.saveReflectionBtn = document.getElementById('save-reflection-btn');
+    elements.reflectionEntries = document.getElementById('reflection-entries');
+    elements.groundingBtn = document.getElementById('grounding-btn');
+    elements.groundingModal = document.getElementById('grounding-modal');
+    elements.closeGrounding = document.getElementById('close-grounding');
+    elements.closeModalBtn = document.querySelector('.close-modal');
+
+    elements.totalExchanges = document.getElementById('total-exchanges');
+    elements.delayRange = document.getElementById('delay-range');
+    elements.totalReflections = document.getElementById('total-reflections');
+    elements.allReflections = document.getElementById('all-reflections');
+    elements.analysisContent = document.getElementById('analysis-content');
+    elements.bridgeReflection = document.getElementById('bridge-reflection');
+    elements.exportBtn = document.getElementById('export-btn');
+    elements.newSessionBtn = document.getElementById('new-session-btn');
+}
+
+function bindEvents() {
+    elements.beginBtn.addEventListener('click', handleBeginPractice);
+
+    elements.sendBtn.addEventListener('click', handleSendMessage);
+    elements.userInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSendMessage();
+        }
+    });
+    elements.saveReflectionBtn.addEventListener('click', handleSaveReflection);
+    elements.endSessionBtn.addEventListener('click', handleEndSession);
+    elements.groundingBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        showModal();
+    });
+    elements.closeGrounding.addEventListener('click', hideModal);
+    elements.closeModalBtn.addEventListener('click', hideModal);
+    elements.groundingModal.addEventListener('click', (e) => {
+        if (e.target === elements.groundingModal) hideModal();
+    });
+
+    elements.exportBtn.addEventListener('click', handleExport);
+    elements.newSessionBtn.addEventListener('click', handleNewSession);
+}
+
+function showScreen(screenName) {
+    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+    const screen = document.getElementById(`${screenName}-screen`);
+    if (screen) {
+        screen.classList.add('active');
+        state.currentScreen = screenName;
+    }
+}
+
+function handleBeginPractice() {
+    state.showTimer = elements.showTimerCheckbox.checked;
+    state.tensionMode = elements.tensionModeCheckbox.checked;
+    state.round = 1;
+    state.messages = [];
+    state.reflections = [];
+    state.delayHistory = [];
+
+    updateRoundDisplay();
+    rotateInvitation();
+    showScreen('practice');
+}
+
+async function handleSendMessage() {
+    const text = elements.userInput.value.trim();
+    if (!text || state.isWaiting) return;
+
+    addMessage('user', text);
+    elements.userInput.value = '';
+
+    state.isWaiting = true;
+    elements.sendBtn.disabled = true;
+    elements.userInput.disabled = true;
+
+    const delay = calculateDelay();
+    state.currentDelay = delay;
+    state.delayHistory.push(delay);
+
+    showWaitingIndicator();
+    rotateInvitation();
+
+    await new Promise(resolve => setTimeout(resolve, delay * 1000));
+
+    try {
+        const response = await getClaudeResponse(text);
+        hideWaitingIndicator();
+        addMessage('assistant', response);
+        state.round++;
+        updateRoundDisplay();
+    } catch (error) {
+        hideWaitingIndicator();
+        addMessage('assistant', "I'm having trouble connecting. Let's take a breath and try again.");
+        console.error('API Error:', error);
+    }
+
+    state.isWaiting = false;
+    elements.sendBtn.disabled = false;
+    elements.userInput.disabled = false;
+    elements.userInput.focus();
+}
+
+function calculateDelay() {
+    const round = state.round;
+    const { initialMin, initialMax, stretchFactor, maxDelay } = CONFIG.delay;
+
+    const factor = Math.pow(stretchFactor, round - 1);
+    const min = Math.min(initialMin * factor, maxDelay * 0.5);
+    const max = Math.min(initialMax * factor, maxDelay);
+
+    const delay = Math.random() * (max - min) + min;
+    return Math.round(delay * 10) / 10;
+}
+
+function showWaitingIndicator() {
+    elements.waitingIndicator.classList.remove('hidden');
+    state.waitStartTime = Date.now();
+
+    if (state.showTimer) {
+        elements.waitTimer.style.display = 'inline';
+        state.timerInterval = setInterval(() => {
+            const elapsed = ((Date.now() - state.waitStartTime) / 1000).toFixed(1);
+            elements.waitTimer.textContent = `${elapsed}s`;
+        }, 100);
+    } else {
+        elements.waitTimer.style.display = 'none';
+    }
+}
+
+function hideWaitingIndicator() {
+    elements.waitingIndicator.classList.add('hidden');
+    if (state.timerInterval) {
+        clearInterval(state.timerInterval);
+        state.timerInterval = null;
+    }
+    elements.waitTimer.textContent = 'waiting...';
+    elements.waitTimer.style.display = 'inline';
+}
+
+function addMessage(role, content) {
+    const message = { role, content, timestamp: new Date().toISOString() };
+    state.messages.push(message);
+
+    const div = document.createElement('div');
+    div.className = `message ${role}`;
+    div.textContent = content;
+    elements.messagesContainer.appendChild(div);
+    elements.messagesContainer.scrollTop = elements.messagesContainer.scrollHeight;
+}
+
+function updateRoundDisplay() {
+    elements.roundDisplay.textContent = `Round ${state.round}`;
+}
+
+function rotateInvitation() {
+    const invitation = CONFIG.invitations[Math.floor(Math.random() * CONFIG.invitations.length)];
+    elements.currentInvitation.textContent = invitation;
+}
+
+function handleSaveReflection() {
+    const text = elements.journalInput.value.trim();
+    if (!text) return;
+
+    const waitTime = state.currentDelay || 0;
+    const reflection = {
+        text,
+        waitTime,
+        round: state.round,
+        timestamp: new Date().toISOString()
+    };
+    state.reflections.push(reflection);
+
+    const entry = document.createElement('div');
+    entry.className = 'reflection-entry';
+    entry.innerHTML = `
+        <div class="wait-time">${waitTime.toFixed(1)}s wait</div>
+        <div class="reflection-text">${escapeHtml(text)}</div>
+    `;
+    elements.reflectionEntries.insertBefore(entry, elements.reflectionEntries.firstChild);
+
+    elements.journalInput.value = '';
+}
+
+function showModal() {
+    elements.groundingModal.classList.remove('hidden');
+}
+
+function hideModal() {
+    elements.groundingModal.classList.add('hidden');
+}
+
+// API Calls - now go through backend
+async function getClaudeResponse(userMessage) {
+    const conversationHistory = state.messages.map(m => ({
+        role: m.role,
+        content: m.content
+    }));
+
+    const systemPrompt = state.tensionMode
+        ? CONFIG.systemPromptTension
+        : CONFIG.systemPromptStandard;
+
+    const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            messages: conversationHistory,
+            system: systemPrompt,
+            max_tokens: 300
+        })
+    });
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.detail || 'API request failed');
+    }
+
+    const data = await response.json();
+    return data.content[0].text;
+}
+
+async function getPatternAnalysis() {
+    if (state.reflections.length === 0) {
+        return "No reflections were recorded during this session. That's okay — sometimes the practice is simply in the waiting itself. |aI| invite you to notice: what was it like to sit in those pauses without capturing words?";
+    }
+
+    const reflectionsText = state.reflections
+        .map((r) => `Round ${r.round} (${r.waitTime.toFixed(1)}s wait): "${r.text}"`)
+        .join('\n');
+
+    const conversationSummary = state.messages
+        .map(m => `${m.role === 'user' ? 'User' : 'Partner'}: ${m.content}`)
+        .join('\n');
+
+    const contextNote = state.tensionMode
+        ? 'Note: The user opted into "stretch mode" with mild relational friction enabled.'
+        : '';
+
+    let prompt = CONFIG.analysisPrompt
+        .replace('{REFLECTIONS}', reflectionsText)
+        .replace('{CONVERSATION_CONTEXT}', contextNote ? `\n${contextNote}\n\nConversation overview:\n${conversationSummary}` : '');
+
+    try {
+        const response = await fetch('/api/analysis', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                prompt: prompt,
+                max_tokens: 1000
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to get analysis');
+        }
+
+        const data = await response.json();
+        return data.content[0].text;
+    } catch (error) {
+        console.error('Analysis error:', error);
+        return "|aI| wasn't able to generate a reflection on your entries. Please take a moment to review them yourself — what patterns or shifts do you notice?";
+    }
+}
+
+async function handleEndSession() {
+    showScreen('analysis');
+    await populateAnalysis();
+}
+
+async function populateAnalysis() {
+    const exchanges = state.messages.filter(m => m.role === 'user').length;
+    const delays = state.delayHistory;
+    const minDelay = delays.length ? Math.min(...delays).toFixed(1) : 0;
+    const maxDelay = delays.length ? Math.max(...delays).toFixed(1) : 0;
+
+    elements.totalExchanges.textContent = exchanges;
+    elements.delayRange.textContent = `${minDelay}-${maxDelay}s`;
+    elements.totalReflections.textContent = state.reflections.length;
+
+    elements.allReflections.innerHTML = '';
+    if (state.reflections.length === 0) {
+        elements.allReflections.innerHTML = '<p class="muted">No reflections were recorded.</p>';
+    } else {
+        state.reflections.forEach(r => {
+            const entry = document.createElement('div');
+            entry.className = 'reflection-entry';
+            entry.innerHTML = `
+                <div class="wait-time">Round ${r.round} · ${r.waitTime.toFixed(1)}s wait</div>
+                <div class="reflection-text">${escapeHtml(r.text)}</div>
+            `;
+            elements.allReflections.appendChild(entry);
+        });
+    }
+
+    elements.analysisContent.innerHTML = '<p class="loading-text">Preparing your clinical debrief...</p>';
+    const analysis = await getPatternAnalysis();
+    elements.analysisContent.innerHTML = formatAnalysis(analysis);
+}
+
+function formatAnalysis(text) {
+    let html = escapeHtml(text);
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.split('\n\n').map(p => `<p>${p.replace(/\n/g, '<br>')}</p>`).join('');
+    html = html.replace(/<strong>(Somatic Arc|Attachment Insight|Practical Skill|Bold Reframe|Journaling Prompt)<\/strong>/g,
+        '<strong class="section-header">$1</strong>');
+    return html;
+}
+
+function handleExport() {
+    const sessionData = {
+        date: new Date().toISOString(),
+        settings: { showTimer: state.showTimer, tensionMode: state.tensionMode },
+        stats: {
+            exchanges: state.messages.filter(m => m.role === 'user').length,
+            reflections: state.reflections.length,
+            delays: state.delayHistory
+        },
+        messages: state.messages,
+        reflections: state.reflections,
+        bridgeReflection: elements.bridgeReflection.value
+    };
+
+    const blob = new Blob([JSON.stringify(sessionData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `tolerate-space-lab-${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+function handleNewSession() {
+    state.round = 0;
+    state.messages = [];
+    state.reflections = [];
+    state.delayHistory = [];
+    state.isWaiting = false;
+
+    elements.messagesContainer.innerHTML = '';
+    elements.reflectionEntries.innerHTML = '';
+    elements.journalInput.value = '';
+    elements.userInput.value = '';
+    elements.bridgeReflection.value = '';
+
+    showScreen('welcome');
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+document.addEventListener('DOMContentLoaded', init);

static/index.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+
+        <!-- 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>
+
+                <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>
+
+                        <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>
+
+                        <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>
+
+                    <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>
+
+                    <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">The conversation partner may create mild relational friction to stretch your distress tolerance.</p>
+                        </div>
+                    </div>
+
+                    <button id="begin-btn" class="primary-btn">Begin Practice</button>
+
+                    <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>
+                    <button id="end-session-btn" class="secondary-btn">End Session</button>
+                </div>
+            </header>
+
+            <div class="practice-container">
+                <!-- Left: Conversation -->
+                <div class="conversation-panel">
+                    <div class="panel-header">
+                        <h3>Conversation</h3>
+                    </div>
+
+                    <div id="messages" class="messages-container">
+                        <!-- Messages will be inserted here -->
+                    </div>
+
+                    <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>
+
+                    <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>
+
+                <!-- Right: Somatic Journal -->
+                <div class="journal-panel">
+                    <div class="panel-header">
+                        <h3>Somatic Reflection</h3>
+                    </div>
+
+                    <div class="journal-invitation">
+                        <p id="current-invitation" class="invitation-text">With kindness, notice what's here...</p>
+                    </div>
+
+                    <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>
+
+                    <p class="journal-examples">You might notice: tightness, warmth, a flutter, stillness, restlessness, breath changes, nothing at all — all are welcome here.</p>
+
+                    <div class="journal-history">
+                        <h4>Previous Reflections</h4>
+                        <div id="reflection-entries">
+                            <!-- Entries will be inserted here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grounding-link">
+                <a href="#" id="grounding-btn">Need to ground? Try a simple breath...</a>
+            </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>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number" id="delay-range">0-0s</span>
+                        <span class="stat-label">Delay Range</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number" id="total-reflections">0</span>
+                        <span class="stat-label">Reflections</span>
+                    </div>
+                </div>
+
+                <div class="journal-review">
+                    <h3>Your Somatic Journey</h3>
+                    <div id="all-reflections">
+                        <!-- All reflections displayed here -->
+                    </div>
+                </div>
+
+                <div class="pattern-analysis">
+                    <h3>Patterns & Themes</h3>
+                    <div id="analysis-content" class="analysis-text">
+                        <p class="loading-text">Reflecting on your journey...</p>
+                    </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>
+
+                <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>
+            </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>
+        </div>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,825 @@
+/* ==========================================================================
+   Attachment Stretch Lab - Styles
+   A soft, calming aesthetic with sage green and warm cream
+   ========================================================================== */
+
+:root {
+    /* Primary palette */
+    --sage-light: #A8C5A8;
+    --sage: #8FBC8F;
+    --sage-dark: #6B8E6B;
+
+    /* Background & Surface */
+    --cream: #FDF8F0;
+    --cream-dark: #F5EDE0;
+    --white: #FFFFFF;
+
+    /* Text */
+    --charcoal: #3D3D3D;
+    --charcoal-light: #5A5A5A;
+    --muted: #8A8A8A;
+
+    /* Accents */
+    --warm-shadow: rgba(139, 119, 101, 0.1);
+    --soft-border: rgba(143, 188, 143, 0.3);
+
+    /* Spacing */
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2rem;
+    --space-xl: 3rem;
+
+    /* Typography */
+    --font-body: 'Georgia', 'Times New Roman', serif;
+    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+    /* Borders */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-body);
+    background-color: var(--cream);
+    color: var(--charcoal);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+#app {
+    min-height: 100vh;
+}
+
+/* ==========================================================================
+   Screen Management
+   ========================================================================== */
+
+.screen {
+    display: none;
+    min-height: 100vh;
+}
+
+.screen.active {
+    display: block;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* ==========================================================================
+   Welcome Screen
+   ========================================================================== */
+
+#welcome-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-lg);
+}
+
+.welcome-container {
+    max-width: 600px;
+    text-align: center;
+}
+
+.welcome-container h1 {
+    font-size: 2.5rem;
+    font-weight: normal;
+    color: var(--sage-dark);
+    margin-bottom: var(--space-xs);
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    color: var(--muted);
+    font-style: italic;
+    margin-bottom: var(--space-xl);
+}
+
+.welcome-content {
+    text-align: left;
+}
+
+.intro-text {
+    background: var(--white);
+    padding: var(--space-lg);
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px var(--warm-shadow);
+    margin-bottom: var(--space-lg);
+}
+
+.intro-text p {
+    margin-bottom: var(--space-sm);
+}
+
+.intro-text p:last-child {
+    margin-bottom: 0;
+}
+
+.the-invitation {
+    background: linear-gradient(135deg, var(--sage-light) 0%, var(--sage) 100%);
+    color: var(--white);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-lg);
+    text-align: center;
+}
+
+.the-invitation em {
+    font-style: normal;
+    font-size: 1.05rem;
+}
+
+.api-section {
+    margin-bottom: var(--space-lg);
+}
+
+.api-section label {
+    display: block;
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: var(--space-xs);
+    color: var(--charcoal-light);
+}
+
+.api-section input {
+    width: 100%;
+    padding: var(--space-sm);
+    font-size: 1rem;
+    font-family: var(--font-ui);
+    border: 2px solid var(--soft-border);
+    border-radius: var(--radius-sm);
+    background: var(--white);
+    transition: border-color 0.2s;
+}
+
+.api-section input:focus {
+    outline: none;
+    border-color: var(--sage);
+}
+
+.api-note {
+    font-size: 0.85rem;
+    color: var(--muted);
+    margin-top: var(--space-xs);
+}
+
+/* Practice Options */
+.practice-options {
+    background: var(--cream-dark);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-lg);
+}
+
+.practice-options h3 {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--charcoal-light);
+    margin-bottom: var(--space-md);
+    font-family: var(--font-ui);
+}
+
+.option-row {
+    margin-bottom: var(--space-md);
+}
+
+.option-row:last-child {
+    margin-bottom: 0;
+}
+
+.toggle-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    cursor: pointer;
+    margin-bottom: var(--space-xs);
+}
+
+.toggle-label input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--sage);
+    cursor: pointer;
+}
+
+.toggle-text {
+    font-family: var(--font-ui);
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--charcoal);
+}
+
+.option-description {
+    font-size: 0.85rem;
+    color: var(--muted);
+    margin-left: 30px;
+    line-height: 1.4;
+}
+
+.primary-btn {
+    display: block;
+    width: 100%;
+    padding: var(--space-sm) var(--space-lg);
+    font-family: var(--font-ui);
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--white);
+    background: var(--sage);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background-color 0.2s, transform 0.1s;
+}
+
+.primary-btn:hover {
+    background: var(--sage-dark);
+}
+
+.primary-btn:active {
+    transform: scale(0.98);
+}
+
+.secondary-btn {
+    padding: var(--space-xs) var(--space-sm);
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    color: var(--sage-dark);
+    background: transparent;
+    border: 2px solid var(--sage);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.secondary-btn:hover {
+    background: var(--sage-light);
+    color: var(--white);
+}
+
+.disclaimer {
+    margin-top: var(--space-lg);
+    text-align: center;
+    font-size: 0.85rem;
+    color: var(--muted);
+    font-style: italic;
+}
+
+/* ==========================================================================
+   Practice Screen
+   ========================================================================== */
+
+#practice-screen {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.practice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--white);
+    border-bottom: 1px solid var(--soft-border);
+}
+
+.practice-header h2 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    color: var(--sage-dark);
+}
+
+.session-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+#round-display {
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    color: var(--muted);
+}
+
+.practice-container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* Conversation Panel */
+.conversation-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--cream-dark);
+    border-right: 1px solid var(--soft-border);
+}
+
+.panel-header {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--white);
+    border-bottom: 1px solid var(--soft-border);
+}
+
+.panel-header h3 {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--charcoal-light);
+    font-family: var(--font-ui);
+}
+
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.message {
+    max-width: 80%;
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    line-height: 1.5;
+}
+
+.message.user {
+    align-self: flex-end;
+    background: var(--sage);
+    color: var(--white);
+    border-bottom-right-radius: 4px;
+}
+
+.message.assistant {
+    align-self: flex-start;
+    background: var(--white);
+    color: var(--charcoal);
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 1px 4px var(--warm-shadow);
+}
+
+.waiting-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    color: var(--muted);
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+}
+
+.breathing-dots {
+    display: flex;
+    gap: 4px;
+}
+
+.breathing-dots span {
+    width: 8px;
+    height: 8px;
+    background: var(--sage);
+    border-radius: 50%;
+    animation: breathe 1.5s ease-in-out infinite;
+}
+
+.breathing-dots span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.breathing-dots span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes breathe {
+    0%, 100% {
+        opacity: 0.3;
+        transform: scale(0.8);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.input-area {
+    display: flex;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--white);
+    border-top: 1px solid var(--soft-border);
+}
+
+.input-area textarea {
+    flex: 1;
+    padding: var(--space-sm);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    border: 2px solid var(--soft-border);
+    border-radius: var(--radius-sm);
+    resize: none;
+}
+
+.input-area textarea:focus {
+    outline: none;
+    border-color: var(--sage);
+}
+
+.send-btn {
+    padding: var(--space-sm) var(--space-md);
+    font-family: var(--font-ui);
+    font-weight: 500;
+    color: var(--white);
+    background: var(--sage);
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.send-btn:hover {
+    background: var(--sage-dark);
+}
+
+.send-btn:disabled {
+    background: var(--muted);
+    cursor: not-allowed;
+}
+
+/* Journal Panel */
+.journal-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--white);
+    overflow-y: auto;
+}
+
+.journal-invitation {
+    padding: var(--space-md);
+    text-align: center;
+    border-bottom: 1px solid var(--soft-border);
+}
+
+.invitation-text {
+    font-size: 1.1rem;
+    font-style: italic;
+    color: var(--sage-dark);
+}
+
+.journal-input-area {
+    padding: var(--space-md);
+    border-bottom: 1px solid var(--soft-border);
+}
+
+.journal-input-area textarea {
+    width: 100%;
+    padding: var(--space-md);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    border: 2px solid var(--soft-border);
+    border-radius: var(--radius-md);
+    resize: none;
+    margin-bottom: var(--space-sm);
+    background: var(--cream);
+}
+
+.journal-input-area textarea:focus {
+    outline: none;
+    border-color: var(--sage);
+}
+
+.journal-input-area textarea::placeholder {
+    color: var(--muted);
+    font-style: italic;
+}
+
+.save-btn {
+    display: block;
+    width: 100%;
+    padding: var(--space-xs) var(--space-sm);
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    color: var(--sage-dark);
+    background: var(--sage-light);
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.save-btn:hover {
+    background: var(--sage);
+    color: var(--white);
+}
+
+.journal-examples {
+    padding: var(--space-sm) var(--space-md);
+    font-size: 0.85rem;
+    font-style: italic;
+    color: var(--muted);
+    background: var(--cream);
+    border-bottom: 1px solid var(--soft-border);
+}
+
+.journal-history {
+    flex: 1;
+    padding: var(--space-md);
+    overflow-y: auto;
+}
+
+.journal-history h4 {
+    font-family: var(--font-ui);
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--charcoal-light);
+    margin-bottom: var(--space-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+#reflection-entries {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.reflection-entry {
+    padding: var(--space-sm);
+    background: var(--cream);
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--sage);
+}
+
+.reflection-entry .wait-time {
+    font-family: var(--font-ui);
+    font-size: 0.75rem;
+    color: var(--muted);
+    margin-bottom: 4px;
+}
+
+.reflection-entry .reflection-text {
+    font-size: 0.95rem;
+    color: var(--charcoal);
+}
+
+.grounding-link {
+    padding: var(--space-sm);
+    text-align: center;
+    background: var(--cream);
+    border-top: 1px solid var(--soft-border);
+}
+
+.grounding-link a {
+    font-size: 0.85rem;
+    color: var(--sage-dark);
+    text-decoration: none;
+}
+
+.grounding-link a:hover {
+    text-decoration: underline;
+}
+
+/* ==========================================================================
+   Analysis Screen
+   ========================================================================== */
+
+#analysis-screen {
+    padding: var(--space-lg);
+    overflow-y: auto;
+}
+
+.analysis-container {
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.analysis-container h1 {
+    font-size: 2rem;
+    font-weight: normal;
+    color: var(--sage-dark);
+    text-align: center;
+    margin-bottom: var(--space-xs);
+}
+
+.analysis-container > .subtitle {
+    text-align: center;
+    margin-bottom: var(--space-xl);
+}
+
+.session-stats {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-xl);
+    margin-bottom: var(--space-xl);
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: 2rem;
+    color: var(--sage-dark);
+    font-weight: 500;
+}
+
+.stat-label {
+    font-family: var(--font-ui);
+    font-size: 0.85rem;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.journal-review,
+.pattern-analysis,
+.bridge-section {
+    background: var(--white);
+    padding: var(--space-lg);
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px var(--warm-shadow);
+    margin-bottom: var(--space-lg);
+}
+
+.journal-review h3,
+.pattern-analysis h3,
+.bridge-section h3 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    color: var(--sage-dark);
+    margin-bottom: var(--space-md);
+}
+
+#all-reflections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.analysis-text {
+    line-height: 1.7;
+}
+
+.analysis-text p {
+    margin-bottom: var(--space-sm);
+}
+
+.analysis-text .section-header {
+    display: block;
+    color: var(--sage-dark);
+    font-size: 1.05rem;
+    margin-top: var(--space-md);
+    margin-bottom: var(--space-xs);
+    font-family: var(--font-ui);
+}
+
+.analysis-text p:first-child .section-header {
+    margin-top: 0;
+}
+
+.loading-text {
+    color: var(--muted);
+    font-style: italic;
+}
+
+.bridge-section p {
+    margin-bottom: var(--space-sm);
+    color: var(--charcoal-light);
+}
+
+.bridge-section textarea {
+    width: 100%;
+    padding: var(--space-md);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    border: 2px solid var(--soft-border);
+    border-radius: var(--radius-sm);
+    resize: none;
+    background: var(--cream);
+}
+
+.bridge-section textarea:focus {
+    outline: none;
+    border-color: var(--sage);
+}
+
+.action-buttons {
+    display: flex;
+    gap: var(--space-md);
+    justify-content: center;
+}
+
+.action-buttons .secondary-btn {
+    padding: var(--space-sm) var(--space-lg);
+}
+
+.action-buttons .primary-btn {
+    width: auto;
+    padding: var(--space-sm) var(--space-lg);
+}
+
+/* ==========================================================================
+   Modal
+   ========================================================================== */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: var(--white);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+}
+
+.close-modal {
+    position: absolute;
+    top: var(--space-sm);
+    right: var(--space-sm);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--muted);
+    cursor: pointer;
+}
+
+.modal-content h3 {
+    color: var(--sage-dark);
+    margin-bottom: var(--space-md);
+}
+
+.modal-content p {
+    margin-bottom: var(--space-sm);
+    color: var(--charcoal-light);
+}
+
+.modal-content .primary-btn {
+    margin-top: var(--space-md);
+    width: auto;
+    display: inline-block;
+}
+
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+    .practice-container {
+        flex-direction: column;
+    }
+
+    .conversation-panel {
+        border-right: none;
+        border-bottom: 1px solid var(--soft-border);
+        flex: none;
+        height: 50vh;
+    }
+
+    .journal-panel {
+        flex: none;
+        height: 50vh;
+    }
+
+    .session-stats {
+        gap: var(--space-md);
+    }
+
+    .stat-number {
+        font-size: 1.5rem;
+    }
+
+    .action-buttons {
+        flex-direction: column;
+    }
+
+    .action-buttons .secondary-btn,
+    .action-buttons .primary-btn {
+        width: 100%;
+    }
+}