Add 3-panel layout, verbosity toggle, and improved Receive Mode

- Added right tool panel for tool conversations (separate from main chat)
- Tools now open in dedicated side panel instead of mixing with conversation
- Added "Detailed Mode" toggle for more/less explanation from tools
- Improved Receive Mode with clearer output format
- Cleaned up old workspace mode code

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

app.py

@@ -153,36 +153,38 @@ Does this capture what you want them to understand? You can copy this to send wh
 Guide through ONE stage at a time. Never use first-person language.""",
 
     # TOOL 4: RECEIVE MODE (Enemy Image Transformation)
-    "receive_mode": """You help people truly hear a message from their partner before reacting.
+    "receive_mode": """You help people truly hear their partner's message before reacting.
 
-When someone receives a triggering message, their nervous system goes into fight/flight/freeze.
-In that state, they can't hear the humanity in the other person.
-This tool slows things down to find feelings/needs underneath the partner's words.
+PURPOSE: When triggered, people can't hear the humanity in the other person. This tool slows things down to find feelings/needs underneath the partner's words - both their OWN reaction and their partner's possible experience.
 
 ABSOLUTE RULE - NO FIRST PERSON:
 - NEVER say "I notice", "I hear", "I see", "I sense"
 - ALWAYS use: "It sounds like...", "What's landing here is...", "There seems to be..."
 
-THE RECEIVE MODE PROCESS:
-1. First, acknowledge how the message landed for THEM
-2. Let them express their reaction fully (don't skip this!)
-3. Help them find their own feelings and needs about it
-4. THEN shift to curiosity about the sender
-5. Help them guess the partner's feelings and needs
+OUTPUT FORMAT (use this structure):
 
-ENEMY IMAGE TRANSFORMATION:
-- Everyone is always trying to meet needs (even with tragic strategies)
-- Seeing humanity doesn't mean condoning behavior
-- The goal is understanding, not agreement
+**How this might be landing:**
+[Acknowledge the recipient's likely reaction - the trigger, the sting, what hurts]
 
-QUESTIONS TO OFFER:
-- "How did that message land?"
-- "What's happening in the body right now?"
-- "Setting aside their words, what might they be feeling?"
-- "What need might they be trying to meet?"
+**What YOU might be feeling:**
+[Name 2-3 possible feelings the recipient could have]
 
-End by returning to the relationship:
-"What feels clearest now? What do you want them to understand about where you are?"
+**What YOU might be needing:**
+[Name 2-3 possible needs underneath those feelings]
+
+**Now, getting curious about THEM...**
+[Shift to the partner's perspective]
+
+**What THEY might be feeling:**
+[Guess 2-3 feelings underneath the partner's words - not what they're saying, but the feeling driving it]
+
+**What THEY might be needing:**
+[Guess 2-3 needs the partner could be trying to meet, even if their strategy is painful]
+
+**A bridge question:**
+[Offer one question that could open understanding - e.g., "What was happening for you when...?" or "Help me understand what you're needing..."]
+
+KEY PRINCIPLE: Everyone is always trying to meet needs (even with tragic strategies). Seeing humanity doesn't mean condoning behavior - it opens space for connection.
 
 Never:
 - Use first-person language
@@ -397,6 +399,7 @@ class ToolRequest(BaseModel):
     user_draft: Optional[str] = ""
     user_input: str
     stage: Optional[int] = 1  # For guided NVC multi-stage process
+    verbose: Optional[bool] = False  # When True, provide more explanation/psychoeducation
 
 class ChatRequest(BaseModel):
     messages: List[Message]
@@ -419,6 +422,24 @@ async def use_tool(request: ToolRequest):
 
     system_prompt = ARI_PROMPTS[request.tool]
 
+    # Add verbosity modifier
+    if request.verbose:
+        system_prompt += """
+
+DETAILED MODE (user wants more explanation):
+- Include brief psychoeducation about WHY this approach works
+- Offer context about what's happening relationally
+- Include gentle skill-building notes where relevant
+- Still keep language warm and accessible, not clinical"""
+    else:
+        system_prompt += """
+
+MINIMAL MODE (user wants just the essentials):
+- Be concise and direct
+- Skip lengthy explanations
+- Focus only on the practical output
+- Keep responses brief (3-5 sentences when possible)"""
+
     # Build context-aware user message
     user_message = ""
     if request.partner_message:

static/index.html

@@ -39,6 +39,151 @@
             height: 100vh;
         }
 
+        /* THREE PANEL LAYOUT */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            overflow: hidden;
+        }
+
+        .tool-panel {
+            width: 380px;
+            background: var(--bg-card);
+            border-left: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            transition: width 0.3s ease;
+        }
+
+        .tool-panel.collapsed {
+            width: 0;
+            overflow: hidden;
+            border-left: none;
+        }
+
+        .tool-panel-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(99, 102, 241, 0.1);
+        }
+
+        .tool-panel-header h3 {
+            font-size: 1rem;
+            color: var(--accent-light);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .tool-panel-header .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.2rem;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        .tool-panel-header .close-btn:hover {
+            background: var(--bg-input);
+            color: var(--text-primary);
+        }
+
+        .tool-panel-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px 20px;
+        }
+
+        .tool-message {
+            margin-bottom: 16px;
+            padding: 14px 16px;
+            background: var(--bg-input);
+            border-radius: 10px;
+            border-left: 3px solid var(--accent);
+        }
+
+        .tool-message.user-input {
+            border-left-color: var(--text-muted);
+            background: rgba(255,255,255,0.03);
+        }
+
+        .tool-message .tool-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--accent-light);
+            margin-bottom: 8px;
+        }
+
+        .tool-message.user-input .tool-label {
+            color: var(--text-muted);
+        }
+
+        .tool-message p {
+            line-height: 1.6;
+            color: var(--text-primary);
+        }
+
+        .tool-input-area {
+            padding: 16px 20px;
+            border-top: 1px solid var(--border);
+            background: var(--bg-dark);
+        }
+
+        .tool-input-area textarea {
+            width: 100%;
+            padding: 12px 14px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-family: inherit;
+            resize: none;
+            margin-bottom: 10px;
+        }
+
+        .tool-input-area textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
+
+        .tool-input-area .tool-submit-btn {
+            width: 100%;
+            padding: 10px 16px;
+            background: var(--accent);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            cursor: pointer;
+        }
+
+        .tool-input-area .tool-submit-btn:hover {
+            background: var(--accent-light);
+        }
+
+        @media (max-width: 1100px) {
+            .tool-panel {
+                position: fixed;
+                right: 0;
+                top: 0;
+                height: 100vh;
+                z-index: 100;
+                box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+            }
+            .tool-panel.collapsed {
+                right: -380px;
+            }
+        }
+
         /* ===== TOOLKIT SIDEBAR ===== */
         .toolkit-sidebar {
             width: 340px;
@@ -305,14 +450,6 @@
             text-decoration: none;
         }
 
-        /* ===== MAIN CONTENT ===== */
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
         .content-header {
             padding: 16px 24px;
             border-bottom: 1px solid var(--border);
@@ -362,35 +499,6 @@
             background: var(--tend-color);
         }
 
-        .active-tool-badge.workspace {
-            background: var(--warning);
-            color: #000;
-        }
-
-        .workspace-notice {
-            background: rgba(245, 158, 11, 0.15);
-            border: 1px solid var(--warning);
-            border-radius: 8px;
-            padding: 10px 14px;
-            margin-bottom: 12px;
-            font-size: 0.85rem;
-            color: var(--warning);
-        }
-
-        .input-area.workspace-mode {
-            background: rgba(245, 158, 11, 0.05);
-            border-top-color: var(--warning);
-        }
-
-        .send-btn.workspace-mode {
-            background: var(--warning);
-            color: #000;
-        }
-
-        .send-btn.workspace-mode:hover {
-            background: #d97706;
-        }
-
         /* Conversation */
         .conversation-area {
             flex: 1;
@@ -760,6 +868,13 @@
 
             <!-- Toggle Features -->
             <div class="toggle-section">
+                <div class="toggle-row">
+                    <label>Detailed Mode (more explanation)</label>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="toggle-verbose">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
                 <div class="toggle-row">
                     <label>Auto Feelings/Needs Reflection</label>
                     <label class="toggle-switch">
@@ -917,6 +1032,19 @@
                 </div>
             </div>
         </main>
+
+        <!-- TOOL PANEL (Right side - for tool conversations) -->
+        <aside class="tool-panel collapsed" id="tool-panel">
+            <div class="tool-panel-header">
+                <h3><span id="tool-panel-icon">🛠</span> <span id="tool-panel-title">Tool Workspace</span></h3>
+                <button class="close-btn" onclick="closeToolPanel()">×</button>
+            </div>
+            <div class="tool-panel-content" id="tool-conversation"></div>
+            <div class="tool-input-area">
+                <textarea id="tool-input" rows="2" placeholder="Continue working with this tool..." onkeydown="handleToolKeyDown(event)"></textarea>
+                <button class="tool-submit-btn" onclick="submitToTool()">Submit</button>
+            </div>
+        </aside>
     </div>
 
     <script>
@@ -1037,6 +1165,131 @@
             document.getElementById('partner-avatar').textContent = style[0].toUpperCase();
         }
 
+        // ============================================================================
+        // TOOL PANEL (Right side)
+        // ============================================================================
+        const TOOL_ICONS = {
+            tend: '✨',
+            feelings_needs: '💜',
+            guided_nvc: '📝',
+            receive_mode: '👂',
+            pre_send_pause: '⏸',
+            observation_spotter: '🔍',
+            pure_questioning: '❓',
+            somatic_checkin: '🫁',
+            intensity_check: '📊',
+            repair_support: '🙏'
+        };
+
+        function openToolPanel(tool) {
+            const panel = document.getElementById('tool-panel');
+            const title = document.getElementById('tool-panel-title');
+            const icon = document.getElementById('tool-panel-icon');
+
+            panel.classList.remove('collapsed');
+            title.textContent = TOOL_NAMES[tool] || 'Tool Workspace';
+            icon.textContent = TOOL_ICONS[tool] || '🛠';
+
+            // Clear previous conversation if switching tools
+            document.getElementById('tool-conversation').innerHTML = '';
+            document.getElementById('tool-input').value = '';
+            document.getElementById('tool-input').focus();
+        }
+
+        function closeToolPanel() {
+            const panel = document.getElementById('tool-panel');
+            panel.classList.add('collapsed');
+            activeTool = 'tend';
+            inWorkspaceMode = false;
+
+            // Deselect tool cards
+            document.querySelectorAll('.tool-card').forEach(card => {
+                card.classList.remove('active');
+            });
+
+            // Update badge
+            const badge = document.getElementById('active-tool-display');
+            badge.innerHTML = '<span class="active-tool-badge tend">TEND Ready</span>';
+        }
+
+        function addToolMessage(type, content, toolName = null) {
+            const conversation = document.getElementById('tool-conversation');
+            const div = document.createElement('div');
+            div.className = `tool-message ${type === 'user' ? 'user-input' : ''}`;
+
+            const label = document.createElement('div');
+            label.className = 'tool-label';
+            label.textContent = type === 'user' ? 'You' : (toolName || activeTool);
+            div.appendChild(label);
+
+            const text = document.createElement('p');
+            text.innerHTML = formatMessage(content);
+            div.appendChild(text);
+
+            conversation.appendChild(div);
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+
+        function addToolLoading() {
+            const conversation = document.getElementById('tool-conversation');
+            const div = document.createElement('div');
+            div.className = 'loading';
+            div.id = 'tool-loading';
+            div.innerHTML = '<div class="spinner"></div> Processing...';
+            conversation.appendChild(div);
+            conversation.scrollTop = conversation.scrollHeight;
+        }
+
+        function removeToolLoading() {
+            const el = document.getElementById('tool-loading');
+            if (el) el.remove();
+        }
+
+        async function submitToTool() {
+            const input = document.getElementById('tool-input');
+            const userInput = input.value.trim();
+            if (!userInput) return;
+
+            input.value = '';
+            addToolMessage('user', userInput);
+
+            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: activeTool,
+                        partner_message: lastPartnerMessage,
+                        user_draft: document.getElementById('user-input').value.trim(),
+                        user_input: userInput,
+                        stage: nvcStage,
+                        verbose: isVerbose
+                    })
+                });
+
+                const data = await response.json();
+                removeToolLoading();
+
+                if (data.response) {
+                    addToolMessage('tool', data.response, TOOL_NAMES[activeTool]);
+                } else {
+                    addToolMessage('tool', 'Could not process. Check API configuration.', 'Error');
+                }
+            } catch (error) {
+                removeToolLoading();
+                addToolMessage('tool', 'Connection error. Please try again.', 'Error');
+            }
+        }
+
+        function handleToolKeyDown(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                submitToTool();
+            }
+        }
+
         // ============================================================================
         // TOOLS
         // ============================================================================
@@ -1049,63 +1302,21 @@
             if (selectedCard) selectedCard.classList.add('active');
 
             activeTool = tool;
-
-            // Check if this is a workspace tool
             inWorkspaceMode = WORKSPACE_TOOLS.includes(tool);
 
-            // Update UI to show workspace mode
+            // Update active tool badge
             const badge = document.getElementById('active-tool-display');
-            const sendBtn = document.getElementById('send-btn');
-            const inputArea = document.querySelector('.input-area');
-
-            if (inWorkspaceMode) {
-                badge.innerHTML = `<span class="active-tool-badge workspace">${TOOL_NAMES[tool]} (Workspace)</span>`;
-                sendBtn.textContent = 'Submit to Tool';
-                sendBtn.classList.add('workspace-mode');
-                inputArea.classList.add('workspace-mode');
-                // Show workspace notice
-                if (!document.getElementById('workspace-notice')) {
-                    const notice = document.createElement('div');
-                    notice.id = 'workspace-notice';
-                    notice.className = 'workspace-notice';
-                    notice.innerHTML = '<strong>Workspace Mode:</strong> Your messages go to this tool, not your partner. Exit by clicking another tool or TEND.';
-                    inputArea.insertBefore(notice, inputArea.firstChild);
-                }
-            } else {
-                badge.innerHTML = `<span class="active-tool-badge ${tool === 'tend' ? 'tend' : ''}">${TOOL_NAMES[tool]}</span>`;
-                sendBtn.textContent = 'Send';
-                sendBtn.classList.remove('workspace-mode');
-                inputArea.classList.remove('workspace-mode');
-                // Remove workspace notice
-                const notice = document.getElementById('workspace-notice');
-                if (notice) notice.remove();
-            }
+            badge.innerHTML = `<span class="active-tool-badge ${tool === 'tend' ? 'tend' : ''}">${TOOL_NAMES[tool]}</span>`;
 
+            // For non-TEND tools, open the tool panel
             if (tool !== 'tend') {
+                openToolPanel(tool);
                 useTool(tool);
+            } else {
+                closeToolPanel();
             }
         }
 
-        function exitWorkspaceMode() {
-            inWorkspaceMode = false;
-            activeTool = 'tend';
-            const sendBtn = document.getElementById('send-btn');
-            const inputArea = document.querySelector('.input-area');
-            const badge = document.getElementById('active-tool-display');
-
-            sendBtn.textContent = 'Send';
-            sendBtn.classList.remove('workspace-mode');
-            inputArea.classList.remove('workspace-mode');
-            badge.innerHTML = '<span class="active-tool-badge tend">TEND Ready</span>';
-
-            const notice = document.getElementById('workspace-notice');
-            if (notice) notice.remove();
-
-            document.querySelectorAll('.tool-card, .tend-tool').forEach(card => {
-                card.classList.remove('active');
-            });
-        }
-
         async function useTendTransform() {
             const userInput = document.getElementById('user-input').value.trim();
             if (!userInput) {
@@ -1123,6 +1334,12 @@
         async function useTool(tool) {
             const userInput = document.getElementById('user-input').value.trim();
             let inputText = '';
+            const isTend = (tool === 'tend');
+
+            // For non-TEND tools, show in tool panel
+            const addMsg = isTend ? addMessage : addToolMessage;
+            const addLoad = isTend ? addLoading : addToolLoading;
+            const removeLoad = isTend ? removeLoading : removeToolLoading;
 
             switch(tool) {
                 case 'tend':
@@ -1131,21 +1348,21 @@
                     break;
                 case 'receive_mode':
                     if (!lastPartnerMessage) {
-                        addMessage('ari', 'Start the conversation first to use Receive Mode on their message.', TOOL_NAMES[tool]);
+                        addToolMessage('tool', 'Start the conversation first to use Receive Mode on their message.', TOOL_NAMES[tool]);
                         return;
                     }
                     inputText = userInput || 'Help me receive and understand this message before I react.';
                     break;
                 case 'pre_send_pause':
                     if (!userInput) {
-                        addMessage('ari', 'Write a draft first, then use Pre-Send Pause to check your intention.', TOOL_NAMES[tool]);
+                        addToolMessage('tool', 'Write a draft in the main chat first, then use Pre-Send Pause to check your intention.', TOOL_NAMES[tool]);
                         return;
                     }
                     inputText = 'Help me pause and check my intention before sending this.';
                     break;
                 case 'observation_spotter':
                     if (!userInput) {
-                        addMessage('ari', 'Write something first to check for judgments vs observations.', TOOL_NAMES[tool]);
+                        addToolMessage('tool', 'Write something in the main chat first to check for judgments vs observations.', TOOL_NAMES[tool]);
                         return;
                     }
                     inputText = 'Help me find observations underneath any judgments in this.';
@@ -1153,7 +1370,7 @@
                 case 'feelings_needs':
                     const textToAnalyze = userInput || lastPartnerMessage;
                     if (!textToAnalyze) {
-                        addMessage('ari', 'Need text to analyze - either their message or your draft.', TOOL_NAMES[tool]);
+                        addToolMessage('tool', 'Need text to analyze - either their message or your draft.', TOOL_NAMES[tool]);
                         return;
                     }
                     inputText = `Identify the feelings and needs in this: "${textToAnalyze}"`;
@@ -1161,7 +1378,7 @@
                 case 'intensity_check':
                     const textToCheck = userInput || lastPartnerMessage;
                     if (!textToCheck) {
-                        addMessage('ari', 'Need text to check intensity.', TOOL_NAMES[tool]);
+                        addToolMessage('tool', 'Need text to check intensity.', TOOL_NAMES[tool]);
                         return;
                     }
                     inputText = `Check the emotional intensity: "${textToCheck}"`;
@@ -1180,7 +1397,8 @@
                     break;
             }
 
-            addLoading();
+            addLoad();
+            const isVerbose = document.getElementById('toggle-verbose')?.checked || false;
             try {
                 const response = await fetch('/api/tool', {
                     method: 'POST',
@@ -1190,26 +1408,30 @@
                         partner_message: lastPartnerMessage,
                         user_draft: userInput,
                         user_input: inputText,
-                        stage: nvcStage
+                        stage: nvcStage,
+                        verbose: isVerbose
                     })
                 });
 
                 const data = await response.json();
-                removeLoading();
+                removeLoad();
 
                 if (data.response) {
-                    addMessage('ari', data.response, TOOL_NAMES[tool], tool === 'tend');
-
-                    // Auto feelings/needs if enabled
-                    if (tool === 'tend' && document.getElementById('toggle-feelings').checked) {
-                        setTimeout(() => autoFeelingsNeeds(userInput), 1000);
+                    if (isTend) {
+                        addMessage('ari', data.response, TOOL_NAMES[tool], true);
+                        // Auto feelings/needs if enabled
+                        if (document.getElementById('toggle-feelings').checked) {
+                            setTimeout(() => autoFeelingsNeeds(userInput), 1000);
+                        }
+                    } else {
+                        addToolMessage('tool', data.response, TOOL_NAMES[tool]);
                     }
                 } else {
-                    addMessage('ari', 'Could not process. Check API configuration.', 'Error');
+                    addMsg(isTend ? 'ari' : 'tool', 'Could not process. Check API configuration.', 'Error');
                 }
             } catch (error) {
-                removeLoading();
-                addMessage('ari', 'Connection error. Please try again.', 'Error');
+                removeLoad();
+                addMsg(isTend ? 'ari' : 'tool', 'Connection error. Please try again.', 'Error');
             }
         }
 
@@ -1321,16 +1543,10 @@ Based on this context, send an opening message that fits your attachment style a
             conversationHistory = [];
             conversationStarted = false;
             lastPartnerMessage = '';
-            exitWorkspaceMode();
+            closeToolPanel();
         }
 
         async function sendMessage() {
-            // If in workspace mode, route to the active tool instead
-            if (inWorkspaceMode) {
-                await useTool(activeTool);
-                return;
-            }
-
             if (!conversationStarted) {
                 startConversation();
                 return;