Add interactive FEEL and NEED tools + update HF description

- FEEL tool: Clickable feelings list organized by needs met/unmet
- NEED tool: Clickable needs list organized by NVC categories
- Users can self-identify feelings/needs, then get AI reflection
- Updated README.md with correct "Tend & Send ARI Prototype" title
- Purple/indigo branding colors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

README.md

@@ -1,41 +1,50 @@
 ---
-title: Tolerate Space Lab
-emoji: 🌿
-colorFrom: green
-colorTo: gray
+title: Tend & Send ARI Prototype
+emoji: 💜
+colorFrom: indigo
+colorTo: green
 sdk: docker
 pinned: false
 license: mit
 ---
 
-# Tolerate Space Lab
+# Tend & Send - ARI Prototype
 
-A therapeutic intervention prototype that builds distress tolerance through intentional response delays, concurrent somatic journaling, and pattern reflection.
+Assistive Relational Intelligence tools for human-to-human connection.
 
-**This is a relational workout, not synthetic intimacy.**
+**These tools exist to support YOUR relationship. ARI never becomes the relationship - it augments human-to-human connection.**
 
 ## 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.
+Practice difficult conversations with a simulated partner while using ARI tools to build relational capacity.
 
-### The Intervention
+### The ARI Toolkit
 
-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
+- **TEND** - Transform messages with NVC clarity and warmth
+- **NVC** - Guided I-statement builder
+- **FEEL** - Identify feelings in the conversation
+- **NEED** - Extract underlying needs
+- **LISTEN** - Receive mode: hear them before reacting
+- **REPAIR** - Craft genuine repair after ruptures
+- **SOMA** - Body check-in before responding
+- **LOVE** - Slow down, breathe, return to presence
 
-### Clinical Foundation
+### Practice Conversations
+
+- Choose attachment style: Anxious, Avoidant, Disorganized, Secure
+- Set difficulty level: Gentle to Crisis
+- Partner responds like a real person (not a therapist)
+
+## Clinical Foundation
 
 Informed by:
-- Distress tolerance principles from DBT
-- Somatic awareness practices (Tara Brach, Sarah Peyton)
-- Attachment theory research
-- Trauma-informed design
+- Nonviolent Communication (Marshall Rosenberg)
+- Attachment Theory
+- Somatic awareness practices
+- Trauma-informed design principles
 
 ## Created By
 
-Jocelyn Skillman, LMHC — exploring Clinical UX and Assistive Relational Intelligence.
+Jocelyn Skillman, LMHC
 
-*This tool is offered as a prototype for educational and demonstration purposes. It is not a substitute for professional mental health care.*
-# Rebuild trigger Tue Jan 20 18:08:23 PST 2026
+*Reflection prompts only - not therapy. If in crisis, contact a professional.*

static/index.html

@@ -613,6 +613,71 @@
 
         .right-input button:hover { background: var(--accent-light); }
 
+        /* Feelings/Needs Button Grid */
+        .selection-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin: 12px 0;
+        }
+
+        .selection-btn {
+            padding: 8px 12px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            border-radius: 20px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .selection-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent-light);
+        }
+
+        .selection-btn.selected {
+            background: var(--accent);
+            border-color: var(--accent);
+            color: white;
+        }
+
+        .selection-category {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            margin: 16px 0 8px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border);
+        }
+
+        .selection-category:first-child {
+            border-top: none;
+            margin-top: 0;
+            padding-top: 0;
+        }
+
+        .selected-items {
+            background: rgba(99, 102, 241, 0.1);
+            border: 1px solid var(--accent);
+            border-radius: 8px;
+            padding: 12px;
+            margin-top: 16px;
+        }
+
+        .selected-items h4 {
+            font-size: 0.8rem;
+            color: var(--accent-light);
+            margin-bottom: 8px;
+        }
+
+        .selected-items p {
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
         /* Love/Breath Modal */
         .breath-overlay {
             position: fixed;
@@ -878,14 +943,33 @@
         const TOOL_MAP = {
             tend: { name: 'TEND Transform', icon: '✨', api: 'tend' },
             nvc: { name: 'Guided NVC', icon: '📝', api: 'guided_nvc' },
-            feel: { name: 'Feelings', icon: '💜', api: 'feelings_needs' },
-            need: { name: 'Needs', icon: '🎯', api: 'feelings_needs' },
+            feel: { name: 'Feelings Check', icon: '💜', api: null, interactive: true },
+            need: { name: 'Needs Check', icon: '🎯', api: null, interactive: true },
             listen: { name: 'Receive Mode', icon: '👂', api: 'receive_mode' },
             repair: { name: 'Repair Support', icon: '🙏', api: 'repair_support' },
             soma: { name: 'Somatic Check-in', icon: '🫁', api: 'somatic_checkin' },
             love: { name: 'Slow Down', icon: '💗', api: null }
         };
 
+        // NVC Feelings vocabulary
+        const FEELINGS_DATA = {
+            'When needs ARE met': ['Calm', 'Content', 'Grateful', 'Hopeful', 'Joyful', 'Peaceful', 'Relieved', 'Safe', 'Tender', 'Touched'],
+            'When needs are NOT met': ['Angry', 'Anxious', 'Confused', 'Disappointed', 'Frustrated', 'Helpless', 'Hurt', 'Lonely', 'Overwhelmed', 'Sad', 'Scared', 'Tense', 'Tired', 'Worried']
+        };
+
+        // NVC Needs vocabulary
+        const NEEDS_DATA = {
+            'Connection': ['Acceptance', 'Belonging', 'Closeness', 'To be heard', 'To be seen', 'To be understood', 'Trust', 'Warmth'],
+            'Autonomy': ['Choice', 'Freedom', 'Independence', 'Space', 'Spontaneity'],
+            'Meaning': ['Contribution', 'Growth', 'Purpose', 'To matter', 'Creativity'],
+            'Peace': ['Ease', 'Harmony', 'Order', 'Rest', 'Safety', 'Security'],
+            'Honesty': ['Authenticity', 'Integrity', 'To be known', 'Transparency'],
+            'Physical': ['Air', 'Food', 'Movement', 'Rest', 'Safety', 'Touch']
+        };
+
+        let selectedFeelings = [];
+        let selectedNeeds = [];
+
         const PARTNER_PROMPTS = {
             anxious: {
                 gentle: `You ARE a real person with anxious attachment. NOT a therapist. React like a real human - seek reassurance, worry, maybe defensive. 1-3 sentences, casual text.`,
@@ -960,10 +1044,115 @@
             // Open right panel
             openRightPanel(tool);
 
-            // Call API
+            // Handle interactive tools differently
+            if (tool === 'feel') {
+                showFeelingsSelection();
+                return;
+            }
+
+            if (tool === 'need') {
+                showNeedsSelection();
+                return;
+            }
+
+            // Call API for other tools
             callToolAPI(tool, userInput);
         }
 
+        function showFeelingsSelection() {
+            selectedFeelings = [];
+            const content = document.getElementById('tool-content');
+
+            let html = '<p style="margin-bottom: 16px; color: var(--text-secondary);">What feelings are present right now? Tap to select.</p>';
+
+            for (const [category, feelings] of Object.entries(FEELINGS_DATA)) {
+                html += `<div class="selection-category">${category}</div>`;
+                html += '<div class="selection-grid">';
+                for (const feeling of feelings) {
+                    html += `<button class="selection-btn" onclick="toggleFeeling('${feeling}')" id="feel-${feeling}">${feeling}</button>`;
+                }
+                html += '</div>';
+            }
+
+            html += '<div class="selected-items" id="feelings-summary" style="display: none;"><h4>Selected feelings:</h4><p id="feelings-list"></p></div>';
+
+            content.innerHTML = html;
+        }
+
+        function toggleFeeling(feeling) {
+            const btn = document.getElementById(`feel-${feeling}`);
+            const idx = selectedFeelings.indexOf(feeling);
+
+            if (idx > -1) {
+                selectedFeelings.splice(idx, 1);
+                btn.classList.remove('selected');
+            } else {
+                selectedFeelings.push(feeling);
+                btn.classList.add('selected');
+            }
+
+            updateFeelingsSummary();
+        }
+
+        function updateFeelingsSummary() {
+            const summary = document.getElementById('feelings-summary');
+            const list = document.getElementById('feelings-list');
+
+            if (selectedFeelings.length > 0) {
+                summary.style.display = 'block';
+                list.textContent = selectedFeelings.join(', ');
+            } else {
+                summary.style.display = 'none';
+            }
+        }
+
+        function showNeedsSelection() {
+            selectedNeeds = [];
+            const content = document.getElementById('tool-content');
+
+            let html = '<p style="margin-bottom: 16px; color: var(--text-secondary);">What needs are alive right now? Tap to select.</p>';
+
+            for (const [category, needs] of Object.entries(NEEDS_DATA)) {
+                html += `<div class="selection-category">${category}</div>`;
+                html += '<div class="selection-grid">';
+                for (const need of needs) {
+                    html += `<button class="selection-btn" onclick="toggleNeed('${need}')" id="need-${need}">${need}</button>`;
+                }
+                html += '</div>';
+            }
+
+            html += '<div class="selected-items" id="needs-summary" style="display: none;"><h4>Selected needs:</h4><p id="needs-list"></p></div>';
+
+            content.innerHTML = html;
+        }
+
+        function toggleNeed(need) {
+            const btn = document.getElementById(`need-${need}`);
+            const idx = selectedNeeds.indexOf(need);
+
+            if (idx > -1) {
+                selectedNeeds.splice(idx, 1);
+                btn.classList.remove('selected');
+            } else {
+                selectedNeeds.push(need);
+                btn.classList.add('selected');
+            }
+
+            updateNeedsSummary();
+        }
+
+        function updateNeedsSummary() {
+            const summary = document.getElementById('needs-summary');
+            const list = document.getElementById('needs-list');
+
+            if (selectedNeeds.length > 0) {
+                summary.style.display = 'block';
+                list.textContent = selectedNeeds.join(', ');
+            } else {
+                summary.style.display = 'none';
+            }
+        }
+
         function openRightPanel(tool) {
             const panel = document.getElementById('right-panel');
             const title = document.getElementById('tool-title');
@@ -1052,6 +1241,73 @@
         async function submitToTool() {
             const input = document.getElementById('tool-input');
             const userInput = input.value.trim();
+
+            // Handle FEEL tool submission
+            if (activeTool === 'feel' && selectedFeelings.length > 0) {
+                const feelingsText = selectedFeelings.join(', ');
+                addToolMsg('user', `I'm feeling: ${feelingsText}`);
+
+                // Get reflection from API
+                addToolLoading();
+                const isVerbose = document.getElementById('toggle-verbose')?.checked || false;
+                try {
+                    const response = await fetch('/api/tool', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            tool: 'feelings_needs',
+                            partner_message: lastPartnerMessage,
+                            user_draft: '',
+                            user_input: `The person has identified these feelings: ${feelingsText}. ${userInput ? 'They added: ' + userInput : ''} Reflect back what these feelings might be pointing to. Help them connect feelings to needs.`,
+                            verbose: isVerbose
+                        })
+                    });
+                    const data = await response.json();
+                    removeToolLoading();
+                    if (data.response) {
+                        addToolMsg('tool', data.response, 'Feelings Reflection');
+                    }
+                } catch (e) {
+                    removeToolLoading();
+                    addToolMsg('tool', 'Connection error.', 'Error');
+                }
+                input.value = '';
+                return;
+            }
+
+            // Handle NEED tool submission
+            if (activeTool === 'need' && selectedNeeds.length > 0) {
+                const needsText = selectedNeeds.join(', ');
+                addToolMsg('user', `I'm needing: ${needsText}`);
+
+                // Get reflection from API
+                addToolLoading();
+                const isVerbose = document.getElementById('toggle-verbose')?.checked || false;
+                try {
+                    const response = await fetch('/api/tool', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            tool: 'feelings_needs',
+                            partner_message: lastPartnerMessage,
+                            user_draft: '',
+                            user_input: `The person has identified these needs: ${needsText}. ${userInput ? 'They added: ' + userInput : ''} Reflect back these needs. Help them think about what request might help meet these needs in the relationship.`,
+                            verbose: isVerbose
+                        })
+                    });
+                    const data = await response.json();
+                    removeToolLoading();
+                    if (data.response) {
+                        addToolMsg('tool', data.response, 'Needs Reflection');
+                    }
+                } catch (e) {
+                    removeToolLoading();
+                    addToolMsg('tool', 'Connection error.', 'Error');
+                }
+                input.value = '';
+                return;
+            }
+
             if (!userInput || !activeTool) return;
 
             input.value = '';