Add scene setup: relationship, name, context

static/app.js

@@ -106,6 +106,10 @@ const state = {
     timerInterval: null,
     showTimer: true,
     tensionMode: false,
+    // Scene setup
+    relationshipType: 'partner',
+    personName: '',
+    context: '',
 };
 
 // DOM Elements
@@ -125,6 +129,9 @@ function cacheElements() {
     elements.beginBtn = document.getElementById('begin-btn');
     elements.showTimerCheckbox = document.getElementById('show-timer');
     elements.tensionModeCheckbox = document.getElementById('tension-mode');
+    elements.relationshipType = document.getElementById('relationship-type');
+    elements.personName = document.getElementById('person-name');
+    elements.contextInput = document.getElementById('context');
 
     elements.roundDisplay = document.getElementById('round-display');
     elements.endSessionBtn = document.getElementById('end-session-btn');
@@ -212,8 +219,16 @@ function showScreen(screenName) {
 }
 
 function handleBeginPractice() {
+    // Capture settings
     state.showTimer = elements.showTimerCheckbox.checked;
     state.tensionMode = elements.tensionModeCheckbox.checked;
+
+    // Capture scene setup
+    state.relationshipType = elements.relationshipType.value;
+    state.personName = elements.personName.value.trim();
+    state.context = elements.contextInput.value.trim();
+
+    // Reset session
     state.round = 1;
     state.messages = [];
     state.reflections = [];
@@ -372,6 +387,20 @@ function hideModal() {
     elements.groundingModal.classList.add('hidden');
 }
 
+// Build scene context for system prompt
+function buildSceneContext() {
+    const name = state.personName || 'this person';
+    const rel = state.relationshipType;
+
+    let scene = `You are ${name}, the user's ${rel}.`;
+
+    if (state.context) {
+        scene += ` Context: ${state.context}.`;
+    }
+
+    return scene;
+}
+
 // API Calls - now go through backend
 async function getClaudeResponse(userMessage) {
     const conversationHistory = state.messages.map(m => ({
@@ -379,9 +408,11 @@ async function getClaudeResponse(userMessage) {
         content: m.content
     }));
 
+    const sceneContext = buildSceneContext();
+
     const systemPrompt = state.tensionMode
-        ? CONFIG.systemPromptTension
-        : CONFIG.systemPromptStandard;
+        ? `${sceneContext}\n\n${CONFIG.systemPromptTension}`
+        : `${sceneContext}\n\n${CONFIG.systemPromptStandard}`;
 
     const response = await fetch('/api/chat', {
         method: 'POST',

static/index.html

@@ -28,6 +28,31 @@
                         <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-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>
+
                     <div class="practice-options">
                         <h3>Practice Settings</h3>
 
@@ -44,7 +69,7 @@
                                 <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>
+                            <p class="option-description">They'll be distracted, brief, and not fully present — realistic friction to stretch your tolerance.</p>
                         </div>
                     </div>
 

static/styles.css

@@ -174,6 +174,57 @@ body {
     margin-top: var(--space-xs);
 }
 
+/* Practice Setup */
+.practice-setup {
+    background: var(--white);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-md);
+    box-shadow: 0 1px 4px var(--warm-shadow);
+}
+
+.practice-setup h3 {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--sage-dark);
+    margin-bottom: var(--space-md);
+    font-family: var(--font-ui);
+}
+
+.setup-row {
+    margin-bottom: var(--space-md);
+}
+
+.setup-row:last-child {
+    margin-bottom: 0;
+}
+
+.setup-row label {
+    display: block;
+    font-family: var(--font-ui);
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--charcoal-light);
+    margin-bottom: var(--space-xs);
+}
+
+.setup-row select,
+.setup-row input[type="text"] {
+    width: 100%;
+    padding: var(--space-sm);
+    font-family: var(--font-ui);
+    font-size: 1rem;
+    border: 2px solid var(--soft-border);
+    border-radius: var(--radius-sm);
+    background: var(--cream);
+}
+
+.setup-row select:focus,
+.setup-row input[type="text"]:focus {
+    outline: none;
+    border-color: var(--sage);
+}
+
 /* Practice Options */
 .practice-options {
     background: var(--cream-dark);