Reorganize tools into categories + add APPRECIATE

Categories with rainbow colors:
- Regulate: SOMA (orange), LOVE (pink)
- Understand: FEEL (yellow), NEED (green), STORY (cyan)
- Express: SEND (red), TEND (orange-red), PRACTICE NVC (teal)
- Reconnect: REPAIR (blue), APPRECIATE (violet), WISDOM (indigo)

APPRECIATE tool (Gottman's 5:1):
- Helps catch the good stuff
- Finds genuine appreciation even in hard moments
- "Thank you for telling me where you're at"

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

README.md

@@ -16,16 +16,24 @@ license: mit
 
 ## The ARI Toolkit
 
-- **SEND** - Send your message to your partner
-- **TEND** - Transform your message with clarity and warmth
+### Regulate
 - **SOMA** - Body check-in. What does your body know?
+- **LOVE** - Slow down, breathe, return to presence
+
+### Understand
 - **FEEL** - Identify feelings in the conversation
 - **NEED** - Extract underlying needs
-- **PRACTICE NVC** - Guided I-statement builder
 - **STORY** - "The story I'm making up..." Own your narrative
+
+### Express
+- **SEND** - Send your message to your partner
+- **TEND** - Transform your message with clarity and warmth
+- **PRACTICE NVC** - Guided I-statement builder
+
+### Reconnect
 - **REPAIR** - Craft genuine repair after ruptures
+- **APPRECIATE** - Catch the good. What's working?
 - **WISDOM** - Draw from sacred texts and grounded wisdom
-- **LOVE** - Slow down, breathe, return to presence
 
 ## Practice Conversations
 
@@ -37,7 +45,9 @@ license: mit
 
 Informed by:
 - Nonviolent Communication (Marshall Rosenberg)
+- Gottman Method (5:1 ratio, bids for connection)
 - Attachment Theory
+- Brené Brown (vulnerability, "the story I'm making up")
 - Somatic awareness practices
 - Trauma-informed design principles
 

app.py

@@ -399,7 +399,40 @@ Never:
 - Push them to apologize more than they mean
 - Make it about being "right\"""",
 
-    # TOOL 12: STORY (The story I'm making up)
+    # TOOL 12: APPRECIATE (Gottman's 5:1 - catch the good)
+    "appreciate": """Help someone find and express genuine appreciation for their partner.
+
+ABSOLUTE RULE - NO FIRST PERSON:
+- NEVER say "I notice", "I see", "I hear"
+- Use: "What stands out is...", "There's something here...", "Consider..."
+
+THE CONCEPT (Gottman's 5:1 ratio):
+Healthy relationships need 5 positive interactions for every 1 negative.
+This tool helps catch the good stuff - especially during hard times.
+
+APPROACH:
+1. If they shared something their partner did/said, find what's genuinely appreciable (effort, intention, vulnerability, showing up)
+2. Help them express it simply and specifically
+3. Don't force positivity - find what's REAL
+
+FORMAT (be concise, 3-5 sentences):
+- Name what's appreciable (be specific, not generic)
+- Suggest a simple way to express it
+- Keep it genuine, not performative
+
+EXAMPLE:
+Partner said: "I'm too tired to talk about this"
+→ "Even in saying that, they're being honest about their limits rather than pretending. That's real. You might simply say: 'Thank you for telling me where you're at.'"
+
+Help them see the good without dismissing the hard.
+
+Never:
+- Use first-person language
+- Force toxic positivity
+- Dismiss real concerns
+- Make them feel wrong for struggling""",
+
+    # TOOL 13: STORY (The story I'm making up)
     "story": """Help surface the narrative/story someone is making up about their partner's behavior.
 
 ABSOLUTE RULE - NO FIRST PERSON:

static/index.html

@@ -81,6 +81,19 @@
             margin-bottom: 12px;
         }
 
+        .category-label {
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            margin: 16px 0 8px 0;
+            padding-left: 4px;
+        }
+
+        .category-label:first-of-type {
+            margin-top: 0;
+        }
+
         .tool-desc {
             padding: 12px;
             margin-bottom: 10px;
@@ -148,6 +161,10 @@
             border-left-color: #3b82f6;
             background: rgba(59, 130, 246, 0.1);
         }
+        .tool-desc.appreciate-desc {
+            border-left-color: #8b5cf6;
+            background: rgba(139, 92, 246, 0.1);
+        }
         .tool-desc.wisdom-desc {
             border-left-color: #6366f1;
             background: rgba(99, 102, 241, 0.1);
@@ -435,15 +452,30 @@
 
         @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* Tool Buttons Row */
-        .tool-buttons {
-            display: flex;
-            gap: 6px;
-            padding: 12px 20px;
+        /* Tool Buttons - Categorized Rows */
+        .tool-buttons-container {
+            padding: 12px 16px;
             background: var(--bg-card);
             border-top: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .tool-row {
+            display: flex;
+            align-items: center;
+            gap: 6px;
             flex-wrap: wrap;
-            justify-content: center;
+        }
+
+        .row-label {
+            font-size: 0.65rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            width: 70px;
+            flex-shrink: 0;
         }
 
         .tool-btn {
@@ -534,6 +566,15 @@
             color: white;
         }
 
+        .tool-btn.appreciate {
+            border-color: #8b5cf6;
+            color: #8b5cf6;
+        }
+        .tool-btn.appreciate:hover, .tool-btn.appreciate.active {
+            background: #8b5cf6;
+            color: white;
+        }
+
         .tool-btn.wisdom {
             border-color: #6366f1;
             color: #6366f1;
@@ -841,8 +882,9 @@
         @media (max-width: 700px) {
             .app-container { flex-direction: column; }
             .left-panel { width: 100%; max-height: 40vh; }
-            .tool-buttons { padding: 10px; }
-            .tool-btn { padding: 6px 10px; font-size: 0.75rem; }
+            .tool-buttons-container { padding: 8px 10px; gap: 6px; }
+            .row-label { width: 55px; font-size: 0.6rem; }
+            .tool-btn { padding: 5px 8px; font-size: 0.7rem; }
         }
     </style>
 </head>
@@ -858,54 +900,56 @@
             <div class="tool-list">
                 <h3>ARI Tools</h3>
 
-                <div class="tool-desc send-desc">
-                    <h4>SEND</h4>
-                    <p>Send your message to your partner.</p>
-                </div>
-
-                <div class="tool-desc tend-desc" onclick="showToolInfo('tend')">
-                    <h4>TEND</h4>
-                    <p>Transform your message with clarity and warmth. Preserves your authentic voice.</p>
-                </div>
-
+                <div class="category-label">Regulate</div>
                 <div class="tool-desc soma-desc" onclick="showToolInfo('soma')">
                     <h4>SOMA</h4>
                     <p>Body check-in. What does your body know?</p>
                 </div>
+                <div class="tool-desc love-desc" onclick="showToolInfo('love')">
+                    <h4>LOVE</h4>
+                    <p>Slow down. Take a breath. Return to presence.</p>
+                </div>
 
+                <div class="category-label">Understand</div>
                 <div class="tool-desc feel-desc" onclick="showToolInfo('feel')">
                     <h4>FEEL</h4>
-                    <p>Identify feelings in the conversation. What emotions are present?</p>
+                    <p>Identify feelings. What emotions are present?</p>
                 </div>
-
                 <div class="tool-desc need-desc" onclick="showToolInfo('need')">
                     <h4>NEED</h4>
                     <p>Extract underlying needs. What's really being asked for?</p>
                 </div>
+                <div class="tool-desc story-desc" onclick="showToolInfo('story')">
+                    <h4>STORY</h4>
+                    <p>"The story I'm making up..." Own your narrative.</p>
+                </div>
 
+                <div class="category-label">Express</div>
+                <div class="tool-desc send-desc">
+                    <h4>SEND</h4>
+                    <p>Send your message to your partner.</p>
+                </div>
+                <div class="tool-desc tend-desc" onclick="showToolInfo('tend')">
+                    <h4>TEND</h4>
+                    <p>Transform with clarity and warmth.</p>
+                </div>
                 <div class="tool-desc nvc-desc" onclick="showToolInfo('nvc')">
                     <h4>PRACTICE NVC</h4>
-                    <p>Guided I-statement builder. Step-by-step help crafting what you want to say.</p>
-                </div>
-
-                <div class="tool-desc story-desc" onclick="showToolInfo('story')">
-                    <h4>STORY</h4>
-                    <p>"The story I'm making up..." Own your narrative before it becomes accusation.</p>
+                    <p>Guided I-statement builder.</p>
                 </div>
 
+                <div class="category-label">Reconnect</div>
                 <div class="tool-desc repair-desc" onclick="showToolInfo('repair')">
                     <h4>REPAIR</h4>
-                    <p>After ruptures. Help craft genuine reconnection.</p>
+                    <p>After ruptures. Craft genuine reconnection.</p>
+                </div>
+                <div class="tool-desc appreciate-desc" onclick="showToolInfo('appreciate')">
+                    <h4>APPRECIATE</h4>
+                    <p>Catch the good. What's working?</p>
                 </div>
-
                 <div class="tool-desc wisdom-desc" onclick="showToolInfo('wisdom')">
                     <h4>WISDOM</h4>
-                    <p>Draw from sacred texts. Choose your tradition for grounded wisdom.</p>
-                </div>
-
-                <div class="tool-desc love-desc" onclick="showToolInfo('love')">
-                    <h4>LOVE</h4>
-                    <p>Slow down. Take a breath. Return to presence.</p>
+                    <p>Draw from sacred texts for grounded wisdom.</p>
                 </div>
             </div>
 
@@ -988,18 +1032,31 @@
             <!-- Conversation Messages -->
             <div class="conversation-area" id="conversation"></div>
 
-            <!-- Tool Buttons Row -->
-            <div class="tool-buttons">
-                <button class="tool-btn send" onclick="sendMessage()">SEND</button>
-                <button class="tool-btn tend" onclick="useTool('tend')">TEND</button>
-                <button class="tool-btn soma" onclick="useTool('soma')">SOMA</button>
-                <button class="tool-btn feel" onclick="useTool('feel')">FEEL</button>
-                <button class="tool-btn need" onclick="useTool('need')">NEED</button>
-                <button class="tool-btn nvc" onclick="useTool('nvc')">PRACTICE NVC</button>
-                <button class="tool-btn story" onclick="useTool('story')">STORY</button>
-                <button class="tool-btn repair" onclick="useTool('repair')">REPAIR</button>
-                <button class="tool-btn wisdom" onclick="useTool('wisdom')">WISDOM</button>
-                <button class="tool-btn love" onclick="useTool('love')">LOVE</button>
+            <!-- Tool Buttons - Categorized -->
+            <div class="tool-buttons-container">
+                <div class="tool-row">
+                    <span class="row-label">Regulate</span>
+                    <button class="tool-btn soma" onclick="useTool('soma')">SOMA</button>
+                    <button class="tool-btn love" onclick="useTool('love')">LOVE</button>
+                </div>
+                <div class="tool-row">
+                    <span class="row-label">Understand</span>
+                    <button class="tool-btn feel" onclick="useTool('feel')">FEEL</button>
+                    <button class="tool-btn need" onclick="useTool('need')">NEED</button>
+                    <button class="tool-btn story" onclick="useTool('story')">STORY</button>
+                </div>
+                <div class="tool-row">
+                    <span class="row-label">Express</span>
+                    <button class="tool-btn send" onclick="sendMessage()">SEND</button>
+                    <button class="tool-btn tend" onclick="useTool('tend')">TEND</button>
+                    <button class="tool-btn nvc" onclick="useTool('nvc')">PRACTICE NVC</button>
+                </div>
+                <div class="tool-row">
+                    <span class="row-label">Reconnect</span>
+                    <button class="tool-btn repair" onclick="useTool('repair')">REPAIR</button>
+                    <button class="tool-btn appreciate" onclick="useTool('appreciate')">APPRECIATE</button>
+                    <button class="tool-btn wisdom" onclick="useTool('wisdom')">WISDOM</button>
+                </div>
             </div>
 
             <!-- Message Input -->
@@ -1050,6 +1107,7 @@
             nvc: { name: 'Practice NVC', icon: '📝', api: 'guided_nvc' },
             story: { name: 'The Story', icon: '📖', api: 'story' },
             repair: { name: 'Repair Support', icon: '🙏', api: 'repair_support' },
+            appreciate: { name: 'Appreciate', icon: '✨', api: 'appreciate' },
             wisdom: { name: 'Sacred Wisdom', icon: '🕊️', api: 'wisdom', interactive: true },
             love: { name: 'Slow Down', icon: '💗', api: null }
         };
@@ -1450,6 +1508,15 @@ Real grief, real limits. 1-2 sentences.`
                 case 'repair':
                     inputText = userInput || 'Help me craft a genuine repair.';
                     break;
+                case 'appreciate':
+                    if (userInput) {
+                        inputText = `Help me express appreciation for this: "${userInput}"`;
+                    } else if (lastPartnerMessage) {
+                        inputText = `My partner said: "${lastPartnerMessage}"\n\nHelp me find something to genuinely appreciate here, even if it's small.`;
+                    } else {
+                        inputText = 'Help me identify something to appreciate about my partner or our relationship right now.';
+                    }
+                    break;
                 case 'story':
                     if (userInput) {
                         inputText = `Help me surface the story I'm making up about this: "${userInput}"`;