From e6ab0d0f373de25845468a704a351c4e422a89bb Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sun, 3 Aug 2025 09:31:23 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Fix=205=20Whys=20agent=20layout?=
 =?UTF-8?q?=20to=20match=20other=20agent=20templates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move 'How it works' widget to sidebar position (below wallet card)
- Add wallet card component to chat template layout
- Use consistent grid layout: main chat widget + sidebar
- Maintains chat functionality while improving UI consistency
- Now matches standard agent template structure

Fixes layout inconsistency where 'How it works' was at bottom instead of sidebar.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 agents/templates/agents/agent_chat.html | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/agents/templates/agents/agent_chat.html b/agents/templates/agents/agent_chat.html
index 50db12c..fde5629 100644
--- a/agents/templates/agents/agent_chat.html
+++ b/agents/templates/agents/agent_chat.html
@@ -337,6 +337,10 @@ document.body.setAttribute('data-session-id', '{{ chat_session.session_id }}');
     <!-- Quick Agent Access Panel Component -->
     {% include "components/quick_agents_panel.html" %}
 
+    <!-- Main Agent Grid -->
+    <div class="agent-grid">
+        <!-- Chat Widget -->
+        <div class="agent-widget widget-large" style="flex: 1; margin-right: clamp(0px, var(--spacing-lg), 2vw);">
     {% if user.is_authenticated %}
         {% if user.wallet_balance >= agent.price or chat_session %}
             <!-- Session Info -->
@@ -457,10 +461,19 @@ document.body.setAttribute('data-session-id', '{{ chat_session.session_id }}');
             </div>
         </div>
     {% endif %}
+        </div>
 
-    <!-- How It Works Widget -->
-    {% include "components/how_it_works_widget.html" with steps="agents" %}
-</div>
+        <!-- Sidebar with Wallet and How It Works -->
+        <div class="agent-sidebar">
+            {% if user.is_authenticated %}
+                <!-- Wallet Card -->
+                {% include "components/wallet_card.html" %}
+            {% endif %}
+            
+            <!-- How It Works Widget -->
+            {% include "components/how_it_works_widget.html" with steps="agents" %}
+        </div>
+    </div>
 {% endblock %}
 
 {% block extra_js %}