From 8f2d55277f210daa32465fb56e445cadaef82881 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Fri, 6 Mar 2026 11:40:29 -0800
Subject: [PATCH] Add clearer messaging around back to chat

---
 frontend/src/App.tsx                  |  4 ++--
 frontend/src/components/StatusBar.tsx |  7 +++++-
 frontend/src/themes.css               | 33 ++++++++++++++++++++++-----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 881ba8e..1103aa3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -613,11 +613,11 @@ export function App() {
         <button
           type="button"
           onClick={handleCloseSettingsView}
-          className="h-6 w-6 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-status-connected/15 border border-status-connected/30 text-status-connected hover:bg-status-connected/25 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           title="Back to conversations"
           aria-label="Back to conversations"
         >
-          &larr;
+          &larr; Back to Chat
         </button>
       </div>
       <div className="flex-1 overflow-y-auto py-1">
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
index fa39342..5dc4d03 100644
--- a/frontend/src/components/StatusBar.tsx
+++ b/frontend/src/components/StatusBar.tsx
@@ -117,7 +117,12 @@ export function StatusBar({
       )}
       <button
         onClick={onSettingsClick}
-        className="px-3 py-1.5 bg-secondary border border-border text-muted-foreground rounded-md text-xs cursor-pointer hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className={cn(
+          'px-3 py-1.5 rounded-md text-xs cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          settingsMode
+            ? 'bg-status-connected/15 border border-status-connected/30 text-status-connected hover:bg-status-connected/25'
+            : 'bg-secondary border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+        )}
       >
         {settingsMode ? 'Back to Chat' : 'Settings'}
       </button>
diff --git a/frontend/src/themes.css b/frontend/src/themes.css
index 4329810..667386a 100644
--- a/frontend/src/themes.css
+++ b/frontend/src/themes.css
@@ -213,13 +213,27 @@
 /* ── Solar Flare ("Plasma Burn") ─────────────────────────── */
 
 @keyframes sf-glow-pulse {
-  0%, 100% { filter: drop-shadow(0 0 4px hsl(338 100% 50% / 0.3)); }
-  50% { filter: drop-shadow(0 0 10px hsl(338 100% 50% / 0.5)) drop-shadow(0 0 20px hsl(24 100% 50% / 0.2)); }
+  0%,
+  100% {
+    filter: drop-shadow(0 0 4px hsl(338 100% 50% / 0.3));
+  }
+  50% {
+    filter: drop-shadow(0 0 10px hsl(338 100% 50% / 0.5))
+      drop-shadow(0 0 20px hsl(24 100% 50% / 0.2));
+  }
 }
 
 @keyframes sf-msg-highlight {
-  0% { box-shadow: 0 0 0 2px hsl(338 100% 50%), 0 0 20px hsl(338 100% 50% / 0.4); }
-  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
+  0% {
+    box-shadow:
+      0 0 0 2px hsl(338 100% 50%),
+      0 0 20px hsl(338 100% 50% / 0.4);
+  }
+  100% {
+    box-shadow:
+      0 0 0 2px transparent,
+      0 0 0 transparent;
+  }
 }
 
 :root[data-theme='solar-flare'] {
@@ -314,7 +328,12 @@
 /* Solar Flare: Chamfered button corners + hover glow */
 [data-theme='solar-flare'] button {
   clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
-  transition: filter 0.2s ease, transform 0.12s ease, background-color 0.15s ease, background-position 0.4s ease, color 0.15s ease;
+  transition:
+    filter 0.2s ease,
+    transform 0.12s ease,
+    background-color 0.15s ease,
+    background-position 0.4s ease,
+    color 0.15s ease;
 }
 
 [data-theme='solar-flare'] button:hover {
@@ -330,7 +349,9 @@
 /* Solar Flare: Input focus glow */
 [data-theme='solar-flare'] input:focus,
 [data-theme='solar-flare'] textarea:focus {
-  box-shadow: 0 0 0 1px hsl(338 100% 50% / 0.5), 0 0 10px hsl(338 100% 50% / 0.2);
+  box-shadow:
+    0 0 0 1px hsl(338 100% 50% / 0.5),
+    0 0 10px hsl(338 100% 50% / 0.2);
   outline: none;
 }