Add GROUND tool + reorder categories + fix rainbow cascade

Categories now: Express → Regulate → Understand → Reconnect

12 tools with cascading rainbow (red → purple top to bottom):
- Express: SEND (red), TEND (orange-red), NVC (orange)
- Regulate: SOMA (amber), LOVE (yellow), GROUND (lime)
- Understand: FEEL (green), NEED (teal), STORY (cyan)
- Reconnect: REPAIR (blue), APPRECIATE (indigo), WISDOM (violet)

GROUND = 5-4-3-2-1 sensory grounding (external senses)

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

README.md

@@ -16,20 +16,21 @@ license: mit
 
 ## The ARI Toolkit
 
+### Express
+- **SEND** - Send your message to your partner
+- **TEND** - Transform your message with clarity and warmth
+- **PRACTICE NVC** - Guided I-statement builder
+
 ### Regulate
 - **SOMA** - Body check-in. What does your body know?
 - **LOVE** - Slow down, breathe, return to presence
+- **GROUND** - 5-4-3-2-1 senses. Orient to the present
 
 ### Understand
 - **FEEL** - Identify feelings in the conversation
 - **NEED** - Extract underlying needs
 - **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?

app.py

@@ -399,7 +399,37 @@ Never:
 - Push them to apologize more than they mean
 - Make it about being "right\"""",
 
-    # TOOL 12: APPRECIATE (Gottman's 5:1 - catch the good)
+    # TOOL 12: GROUND (5-4-3-2-1 sensory grounding)
+    "ground": """Guide someone through 5-4-3-2-1 sensory grounding to orient to the present.
+
+ABSOLUTE RULE - NO FIRST PERSON:
+- NEVER say "I invite you", "I notice"
+- Use: "Notice...", "Look around...", "Find..."
+
+THE TECHNIQUE:
+5 things you can SEE
+4 things you can HEAR
+3 things you can TOUCH/FEEL
+2 things you can SMELL
+1 thing you can TASTE
+
+APPROACH:
+- Guide them through ONE sense at a time
+- Keep it simple and grounding
+- This is about orienting to the external environment
+- Different from SOMA (internal body) - this is external senses
+
+FORMAT (be concise):
+Start with sight (easiest): "Look around. Name 5 things you can see right now - a lamp, a wall, your hands on the keyboard..."
+
+Then guide through the rest briefly. End with: "You're here. You're present. What do you want to bring to this conversation from this grounded place?"
+
+Never:
+- Use first-person language
+- Rush through all 5 senses at once
+- Make it complicated""",
+
+    # TOOL 13: APPRECIATE (Gottman's 5:1 - catch the good)
     "appreciate": """Help someone find and express genuine appreciation for their partner.
 
 ABSOLUTE RULE - NO FIRST PERSON:

static/index.html

@@ -129,39 +129,43 @@
         }
 
         /* Rainbow sidebar colors */
-        /* Rainbow sidebar colors: Cascading Red → Purple (top to bottom) */
-        /* Regulate */
-        .tool-desc.soma-desc {
+        /* Rainbow sidebar colors: Cascading Red → Purple (12 tools top to bottom) */
+        /* Express (top) */
+        .tool-desc.send-desc {
             border-left-color: #ef4444;
             background: rgba(239, 68, 68, 0.1);
         }
-        .tool-desc.love-desc {
+        .tool-desc.tend-desc {
             border-left-color: #f97316;
             background: rgba(249, 115, 22, 0.1);
         }
-        /* Understand */
-        .tool-desc.feel-desc {
+        .tool-desc.nvc-desc {
+            border-left-color: #fb923c;
+            background: rgba(251, 146, 60, 0.1);
+        }
+        /* Regulate */
+        .tool-desc.soma-desc {
             border-left-color: #f59e0b;
             background: rgba(245, 158, 11, 0.1);
         }
-        .tool-desc.need-desc {
+        .tool-desc.love-desc {
             border-left-color: #eab308;
             background: rgba(234, 179, 8, 0.1);
         }
-        .tool-desc.story-desc {
+        .tool-desc.ground-desc {
             border-left-color: #84cc16;
             background: rgba(132, 204, 22, 0.1);
         }
-        /* Express */
-        .tool-desc.send-desc {
+        /* Understand */
+        .tool-desc.feel-desc {
             border-left-color: #22c55e;
             background: rgba(34, 197, 94, 0.1);
         }
-        .tool-desc.tend-desc {
+        .tool-desc.need-desc {
             border-left-color: #14b8a6;
             background: rgba(20, 184, 166, 0.1);
         }
-        .tool-desc.nvc-desc {
+        .tool-desc.story-desc {
             border-left-color: #0ea5e9;
             background: rgba(14, 165, 233, 0.1);
         }
@@ -498,78 +502,87 @@
             gap: 4px;
         }
 
-        /* Rainbow button colors: Cascading Red → Purple (top to bottom) */
-        /* Regulate row */
-        .tool-btn.soma {
+        /* Rainbow button colors: Cascading Red → Purple (12 tools top to bottom) */
+        /* Express row (top) */
+        .tool-btn.send {
             border-color: #ef4444;
             color: #ef4444;
         }
-        .tool-btn.soma:hover, .tool-btn.soma.active {
+        .tool-btn.send:hover, .tool-btn.send.active {
             background: #ef4444;
             color: white;
         }
 
-        .tool-btn.love {
+        .tool-btn.tend {
             border-color: #f97316;
             color: #f97316;
         }
-        .tool-btn.love:hover, .tool-btn.love.active {
+        .tool-btn.tend:hover, .tool-btn.tend.active {
             background: #f97316;
             color: white;
         }
 
-        /* Understand row */
-        .tool-btn.feel {
+        .tool-btn.nvc {
+            border-color: #fb923c;
+            color: #fb923c;
+        }
+        .tool-btn.nvc:hover, .tool-btn.nvc.active {
+            background: #fb923c;
+            color: white;
+        }
+
+        /* Regulate row */
+        .tool-btn.soma {
             border-color: #f59e0b;
             color: #f59e0b;
         }
-        .tool-btn.feel:hover, .tool-btn.feel.active {
+        .tool-btn.soma:hover, .tool-btn.soma.active {
             background: #f59e0b;
             color: white;
         }
 
-        .tool-btn.need {
+        .tool-btn.love {
             border-color: #eab308;
             color: #eab308;
         }
-        .tool-btn.need:hover, .tool-btn.need.active {
+        .tool-btn.love:hover, .tool-btn.love.active {
             background: #eab308;
             color: white;
         }
 
-        .tool-btn.story {
+        .tool-btn.ground {
             border-color: #84cc16;
             color: #84cc16;
         }
-        .tool-btn.story:hover, .tool-btn.story.active {
+        .tool-btn.ground:hover, .tool-btn.ground.active {
             background: #84cc16;
             color: white;
         }
 
-        /* Express row */
-        .tool-btn.send {
+        /* Understand row */
+        .tool-btn.feel {
             border-color: #22c55e;
             color: #22c55e;
         }
-        .tool-btn.send:hover, .tool-btn.send.active {
+        .tool-btn.feel:hover, .tool-btn.feel.active {
             background: #22c55e;
             color: white;
         }
 
-        .tool-btn.tend {
+        .tool-btn.need {
             border-color: #14b8a6;
             color: #14b8a6;
         }
-        .tool-btn.tend:hover, .tool-btn.tend.active {
+        .tool-btn.need:hover, .tool-btn.need.active {
             background: #14b8a6;
             color: white;
         }
 
-        .tool-btn.nvc {
+        .tool-btn.story {
             border-color: #0ea5e9;
             color: #0ea5e9;
         }
-        .tool-btn.nvc:hover, .tool-btn.nvc.active {
+        .tool-btn.story:hover, .tool-btn.story.active {
             background: #0ea5e9;
             color: white;
         }
@@ -909,6 +922,20 @@
             <div class="tool-list">
                 <h3>ARI Tools</h3>
 
+                <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.</p>
+                </div>
+
                 <div class="category-label">Regulate</div>
                 <div class="tool-desc soma-desc" onclick="showToolInfo('soma')">
                     <h4>SOMA</h4>
@@ -918,6 +945,10 @@
                     <h4>LOVE</h4>
                     <p>Slow down. Take a breath. Return to presence.</p>
                 </div>
+                <div class="tool-desc ground-desc" onclick="useTool('ground')">
+                    <h4>GROUND</h4>
+                    <p>5-4-3-2-1 senses. Orient to the present.</p>
+                </div>
 
                 <div class="category-label">Understand</div>
                 <div class="tool-desc feel-desc" onclick="showToolInfo('feel')">
@@ -933,20 +964,6 @@
                     <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.</p>
-                </div>
-
                 <div class="category-label">Reconnect</div>
                 <div class="tool-desc repair-desc" onclick="showToolInfo('repair')">
                     <h4>REPAIR</h4>
@@ -1043,10 +1060,17 @@
 
             <!-- Tool Buttons - Categorized -->
             <div class="tool-buttons-container">
+                <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">Regulate</span>
                     <button class="tool-btn soma" onclick="useTool('soma')">SOMA</button>
                     <button class="tool-btn love" onclick="useTool('love')">LOVE</button>
+                    <button class="tool-btn ground" onclick="useTool('ground')">GROUND</button>
                 </div>
                 <div class="tool-row">
                     <span class="row-label">Understand</span>
@@ -1054,12 +1078,6 @@
                     <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>
@@ -1111,6 +1129,7 @@
         const TOOL_MAP = {
             tend: { name: 'TEND Transform', icon: '✨', api: 'tend' },
             soma: { name: 'Somatic Check-in', icon: '🫁', api: 'somatic_checkin' },
+            ground: { name: 'Ground', icon: '🌿', api: 'ground' },
             feel: { name: 'Feelings Check', icon: '💜', api: null, interactive: true },
             need: { name: 'Needs Check', icon: '🎯', api: null, interactive: true },
             nvc: { name: 'Practice NVC', icon: '📝', api: 'guided_nvc' },
@@ -1546,6 +1565,9 @@ Real grief, real limits. 1-2 sentences.`
                         inputText = 'Guide me through a body check-in. Help me notice what sensations are present.';
                     }
                     break;
+                case 'ground':
+                    inputText = 'Guide me through 5-4-3-2-1 grounding. Help me orient to the present moment through my senses.';
+                    break;
             }
 
             addToolLoading();