Move setup to main area, keep ARI tools in sidebar, add reset button

static/index.html

@@ -514,6 +514,120 @@
             box-shadow: 0 8px 30px var(--accent-glow);
         }
 
+        /* Setup Panel - Top of Main Area */
+        .setup-panel {
+            background: var(--bg-card);
+            border-bottom: 1px solid var(--border);
+            padding: 20px 24px;
+        }
+
+        .setup-header h2 {
+            font-size: 1.2rem;
+            margin-bottom: 16px;
+            color: var(--text-primary);
+        }
+
+        .setup-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px 20px;
+            align-items: end;
+        }
+
+        .setup-col {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .setup-col.full-width {
+            grid-column: 1 / -1;
+        }
+
+        .setup-col label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-bottom: 6px;
+        }
+
+        .setup-col select,
+        .setup-col textarea {
+            padding: 10px 12px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-family: inherit;
+        }
+
+        .setup-col textarea {
+            resize: none;
+        }
+
+        .setup-col select:focus,
+        .setup-col textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
+
+        .setup-options {
+            display: flex;
+            gap: 16px;
+            padding-top: 6px;
+        }
+
+        .setup-option {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .setup-option input[type="radio"] {
+            accent-color: var(--accent);
+        }
+
+        .setup-option label {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            cursor: pointer;
+        }
+
+        .setup-col .start-btn {
+            width: 100%;
+            padding: 12px 20px;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .reset-btn {
+            padding: 8px 14px;
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            border-radius: 6px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .reset-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent-light);
+        }
+
+        @media (max-width: 700px) {
+            .setup-grid {
+                grid-template-columns: 1fr;
+            }
+            .setup-col.full-width {
+                grid-column: 1;
+            }
+        }
+
         /* Input Area */
         .input-area {
             padding: 20px 24px;
@@ -632,28 +746,6 @@
                 <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>
 
             <!-- PRIMARY TEND TOOL -->
             <div class="tend-section">
@@ -738,7 +830,58 @@
 
         <!-- MAIN CONTENT -->
         <main class="main-content">
-            <div class="content-header">
+            <!-- SETUP PANEL (top of main area) -->
+            <div class="setup-panel" id="setup-panel">
+                <div class="setup-header">
+                    <h2>Set Up Your Practice Conversation</h2>
+                </div>
+                <div class="setup-grid">
+                    <div class="setup-col">
+                        <label for="attachment-style">Partner's Attachment Style</label>
+                        <select id="attachment-style">
+                            <option value="anxious">Anxious - Seeks reassurance, fears abandonment</option>
+                            <option value="avoidant">Avoidant - Needs space when stressed, pulls away</option>
+                            <option value="disorganized">Disorganized - Mixed signals, push-pull</option>
+                            <option value="secure">Secure - Open, direct communication</option>
+                        </select>
+                    </div>
+                    <div class="setup-col">
+                        <label for="difficulty">Conversation Difficulty</label>
+                        <select id="difficulty">
+                            <option value="gentle">Gentle - Minor misunderstanding</option>
+                            <option value="moderate">Moderate - Recurring tension</option>
+                            <option value="intense">Intense - Significant conflict</option>
+                            <option value="crisis">Crisis - Relationship crossroads</option>
+                        </select>
+                    </div>
+                    <div class="setup-col full-width">
+                        <label for="conversation-context">What's the situation? (optional)</label>
+                        <textarea id="conversation-context" rows="2" placeholder="Example: We had a fight about how much time I spend at work..."></textarea>
+                    </div>
+                    <div class="setup-col full-width">
+                        <label for="user-goal">What do you want to practice? (optional)</label>
+                        <textarea id="user-goal" rows="1" placeholder="Example: Staying calm and hearing their perspective..."></textarea>
+                    </div>
+                    <div class="setup-col">
+                        <div class="setup-options">
+                            <div class="setup-option">
+                                <input type="radio" name="who-starts" id="partner-starts" value="partner" checked>
+                                <label for="partner-starts">Partner starts</label>
+                            </div>
+                            <div class="setup-option">
+                                <input type="radio" name="who-starts" id="user-starts" value="user">
+                                <label for="user-starts">I start</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="setup-col">
+                        <button class="start-btn" onclick="startConversation()">Start Conversation</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- CONVERSATION HEADER (shows after start) -->
+            <div class="content-header" id="content-header" style="display: none;">
                 <div class="partner-info">
                     <div class="partner-avatar" id="partner-avatar">P</div>
                     <div class="partner-details">
@@ -746,26 +889,15 @@
                         <span id="partner-style">Anxious attachment</span>
                     </div>
                 </div>
-                <div id="active-tool-display">
-                    <span class="active-tool-badge tend">TEND Ready</span>
+                <div class="header-right">
+                    <div id="active-tool-display">
+                        <span class="active-tool-badge tend">TEND Ready</span>
+                    </div>
+                    <button class="reset-btn" onclick="resetConversation()">New Conversation</button>
                 </div>
             </div>
 
-            <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>
+            <div class="conversation-area" id="conversation"></div>
 
             <div class="input-area">
                 <div class="input-row">
@@ -1103,18 +1235,93 @@
         // ============================================================================
         // CONVERSATION
         // ============================================================================
+        let conversationContext = '';
+        let userGoal = '';
+
         async function startConversation() {
             const style = document.getElementById('attachment-style').value;
             const difficulty = document.getElementById('difficulty').value;
+            conversationContext = document.getElementById('conversation-context')?.value?.trim() || '';
+            userGoal = document.getElementById('user-goal')?.value?.trim() || '';
+            const whoStarts = document.querySelector('input[name="who-starts"]:checked')?.value || 'partner';
 
+            // Hide setup, show conversation
+            document.getElementById('setup-panel').style.display = 'none';
+            document.getElementById('content-header').style.display = 'flex';
             document.getElementById('conversation').innerHTML = '';
             conversationHistory = [];
             conversationStarted = true;
 
-            const openingMessage = OPENING_MESSAGES[style][difficulty];
-            addMessage('partner', openingMessage);
-            lastPartnerMessage = openingMessage;
-            conversationHistory.push({ role: 'assistant', content: openingMessage });
+            // Update partner info display
+            const styleLabels = {
+                anxious: 'Anxious attachment',
+                avoidant: 'Avoidant attachment',
+                disorganized: 'Disorganized attachment',
+                secure: 'Secure attachment'
+            };
+            document.getElementById('partner-style').textContent = styleLabels[style];
+            document.getElementById('partner-avatar').textContent = style[0].toUpperCase();
+
+            // If user starts, just wait for their input
+            if (whoStarts === 'user') {
+                addMessage('ari', `Ready to practice. Your partner has ${styleLabels[style].toLowerCase()} tendencies. ${userGoal ? 'Your goal: ' + userGoal : ''} Type your opening message.`, 'Setup', false);
+                return;
+            }
+
+            // Partner starts - generate contextual opening based on user input
+            if (conversationContext) {
+                addLoading();
+                try {
+                    const contextPrompt = `${PARTNER_PROMPTS[style][difficulty]}
+
+CONTEXT: ${conversationContext}
+${userGoal ? 'The other person wants to practice: ' + userGoal : ''}
+
+Based on this context, send an opening message that fits your attachment style and the described situation. 1-3 sentences. Be realistic and stay in character.`;
+
+                    const response = await fetch('/api/chat', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            messages: [{ role: 'user', content: 'Start the conversation based on the context provided.' }],
+                            system: contextPrompt,
+                            max_tokens: 200
+                        })
+                    });
+
+                    const data = await response.json();
+                    removeLoading();
+
+                    if (data.content && data.content[0]) {
+                        const openingMessage = data.content[0].text;
+                        addMessage('partner', openingMessage);
+                        lastPartnerMessage = openingMessage;
+                        conversationHistory.push({ role: 'assistant', content: openingMessage });
+                    }
+                } catch (error) {
+                    removeLoading();
+                    const openingMessage = OPENING_MESSAGES[style][difficulty];
+                    addMessage('partner', openingMessage);
+                    lastPartnerMessage = openingMessage;
+                    conversationHistory.push({ role: 'assistant', content: openingMessage });
+                }
+            } else {
+                const openingMessage = OPENING_MESSAGES[style][difficulty];
+                addMessage('partner', openingMessage);
+                lastPartnerMessage = openingMessage;
+                conversationHistory.push({ role: 'assistant', content: openingMessage });
+            }
+        }
+
+        function resetConversation() {
+            // Show setup, hide conversation header
+            document.getElementById('setup-panel').style.display = 'block';
+            document.getElementById('content-header').style.display = 'none';
+            document.getElementById('conversation').innerHTML = '';
+            conversationHistory = [];
+            conversationStarted = false;
+            lastPartnerMessage = '';
+            exitWorkspaceMode();
         }
 
         async function sendMessage() {