From 7f17bea3415ff2817c47a47f3531dd8130be863d Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Mon, 28 Sep 2026 20:44:50 +0700
Subject: [PATCH] ui(sasquatch): de-clutter the panel header, tidy footer +
 input

- Header: name + Pro badge on line 1; context title + (owner-only) AI balance
  on line 2. The live/CVM chip and AI balance no longer fight for the same row
  and wrap.
- Footer: the live-status chip now sits with 'Live data from Nostr relays' and
  'clear' instead of the header.
- Input: taller (h-10) with text-sm on mobile; send button matches.
- Message bubbles: text-xs and roomier padding/radius.
---
 src/components/SasquatchGuide.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/SasquatchGuide.tsx b/src/components/SasquatchGuide.tsx
index 6d8ba86..b2873aa 100644
--- a/src/components/SasquatchGuide.tsx
+++ b/src/components/SasquatchGuide.tsx
@@ -1556,7 +1556,7 @@ Instructions:
                 <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-[#ccff00] rounded-full border border-black shadow-[0_0_6px_#ccff00]" />
               </div>
               <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-1.5 flex-wrap">
+                <div className="flex items-center gap-1.5 min-w-0">
                   <span className="font-black text-xs text-[#ccff00] uppercase tracking-wider" style={{ fontFamily: 'Impact, Arial Black, sans-serif' }}>
                     Sasquatch
                   </span>
@@ -1576,11 +1576,16 @@ Instructions:
                       ⚡ Go Pro
                     </button>
                   ) : null}
-                  <CVMStatus connected={cvmConnected} />
+                </div>
+                {/* Context + (owner-only) AI balance on one tidy line */}
+                <div className="mt-0.5 flex items-center gap-1.5 min-w-0">
+                  <span className="truncate text-[10px] leading-none text-[#ccff00]/50">
+                    {activeMessage.title}
+                  </span>
                   {isOwner && aiStatus.data?.configured && aiStatus.data.balanceSats != null && (
                     <span
                       className={cn(
-                        'flex items-center gap-0.5 rounded px-1 py-0.5 text-[8px] font-black uppercase tracking-wider',
+                        'ml-auto flex-shrink-0 rounded px-1 py-0.5 text-[8px] font-black uppercase tracking-wider',
                         aiStatus.data.low ? 'bg-amber-500/20 text-amber-400' : 'bg-emerald-500/15 text-emerald-400',
                       )}
                       title={`Sasquatch AI credit balance (owner-only) — top up at ${aiStatus.data.provider ?? 'the node'}`}
@@ -1589,9 +1594,6 @@ Instructions:
                     </span>
                   )}
                 </div>
-                <div className="text-[10px] text-[#ccff00]/50 leading-none mt-0.5">
-                  {activeMessage.title}
-                </div>
               </div>
               <div className="flex gap-1 flex-shrink-0">
                 {/* Minimize — shrinks to draggable bubble */}
@@ -1680,7 +1682,7 @@ Instructions:
                               <div
                                 key={idx}
                                 className={cn(
-                                  'text-[11px] p-2 rounded-lg leading-relaxed',
+                                  'text-xs p-2.5 rounded-xl leading-relaxed',
                                   msg.role === 'user'
                                     ? 'bg-[#ff0040]/10 text-gray-200 ml-4 border border-[#ff0040]/20'
                                     : 'bg-[#ccff00]/5 text-gray-200 mr-4 border border-[#ccff00]/10'
@@ -1736,24 +1738,25 @@ Instructions:
                           onKeyDown={(e) => e.key === 'Enter' && !inputDisabled && handleSendMessage()}
                           placeholder="Ask about spots, events, coaches..."
                           disabled={inputDisabled}
-                          className="text-xs h-8 bg-black/40 border-[#ccff00]/20 text-white placeholder:text-gray-600 focus-visible:ring-[#ccff00]/40 focus-visible:border-[#ccff00]/40"
+                          className="h-10 text-sm bg-black/40 border-[#ccff00]/20 text-white placeholder:text-gray-600 focus-visible:ring-[#ccff00]/40 focus-visible:border-[#ccff00]/40"
                         />
                         <button
                           onClick={() => handleSendMessage()}
                           disabled={!userInput.trim() || inputDisabled}
-                          className="h-8 w-8 flex-shrink-0 flex items-center justify-center rounded-md bg-[#ccff00] hover:bg-[#d4ff1a] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                          className="h-10 w-10 flex-shrink-0 flex items-center justify-center rounded-md bg-[#ccff00] hover:bg-[#d4ff1a] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                         >
                           {isThinking ? (
-                            <Loader2 className="h-3 w-3 animate-spin text-black" />
+                            <Loader2 className="h-4 w-4 animate-spin text-black" />
                           ) : (
-                            <Send className="h-3 w-3 text-black" />
+                            <Send className="h-4 w-4 text-black" />
                           )}
                         </button>
                       </div>
 
                       {/* Footer */}
                       <div className="flex items-center justify-between">
-                        <p className="text-[9px] text-gray-600 flex items-center gap-1 flex-wrap">
+                        <p className="text-[9px] text-gray-600 flex items-center gap-1.5 flex-wrap min-w-0">
+                          <CVMStatus connected={cvmConnected} />
                           Live data from{' '}
                           <a
                             href="https://goskatespots.nostr1.com"