From 9ca2287e506be74a8a16bdcaba32a72a68fb5878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Wed, 19 Aug 2026 23:19:09 +0000
Subject: [PATCH] bell: move it left, and let its colour say what it will do
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the bell sat on the right between the connection dot and the end-session plug,
which put a SETTING in among the STATUS. everything on the right reports what
the chat is doing now; the bell says what it will do later. it moves to the
left of the header, on its own.

and it is coloured by preference, so the setting is readable without opening
the menu: green for every end of turn, amber for input-needed, muted for none.

green is `green-500` rather than the `text-success` token deliberately — it
has to be the SAME green as the connection dot a few elements away, and a
semantic token that drifted from it would leave two greens in one header
meaning two different things. amber is `text-warning` (#f59e0b), which is the
conditional setting: it will speak, but only sometimes.

`none` keeps the struck-through bell as well as the muted colour. colour alone
is not a state anyone should have to learn, and it is the one setting where
being wrong is silent.
---
 .../src/apps/ChatHistory/ChatDetailPanel.tsx  |  6 +++++-
 .../src/apps/ChatHistory/NotifyMenu.tsx       | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
index 2eefff85..33e369ec 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/ChatDetailPanel.tsx
@@ -108,6 +108,11 @@ function DetailBar({
 
   return (
     <div className="shrink-0 flex items-center px-4 py-2 border-b border-border bg-background/60">
+      {/* Left, away from the connection dot and the end-session plug. It is a setting, not a status: it
+          says what this chat WILL do, while everything on the right reports what it is doing now. */}
+      <div className="flex items-center">
+        {sessionId && <NotifyMenu preference={notifyPreference ?? 'none'} onChange={commitNotifyPreference} />}
+      </div>
       <div className="flex-1 min-w-0 px-3 text-center">
         <EditableTitle
           value={sessionTitle ?? 'New chat'}
@@ -133,7 +138,6 @@ function DetailBar({
           <span className="inline-block h-2 w-2 rounded-full bg-green-500" />
         )}
         <span>{!isConnected ? 'Disconnected' : isGenerating ? 'Working...' : ''}</span>
-        {sessionId && <NotifyMenu preference={notifyPreference ?? 'none'} onChange={commitNotifyPreference} />}
         {isConnected && onDisconnect && (
           <button
             type="button"
diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/NotifyMenu.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/NotifyMenu.tsx
index 237b07a6..2026696e 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/NotifyMenu.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/NotifyMenu.tsx
@@ -10,6 +10,23 @@ const OPTIONS: { value: NotifyPreference; label: string }[] = [
   { value: 'none', label: 'None' },
 ];
 
+/**
+ * The bell says what it will do without being opened.
+ *
+ * Green is `green-500` on purpose rather than `text-success` — it has to be the SAME green as the
+ * connection dot two elements away, and a semantic token that drifted from it would leave two greens in
+ * one header meaning two different things.
+ *
+ * Amber for `input_needed` because it is the conditional setting: it will speak, but only sometimes.
+ * Muted for `none`, which is also the only state that draws a struck-through bell — colour alone is not
+ * a state anyone should have to learn.
+ */
+const BELL_TONE: Record<NotifyPreference, string> = {
+  every_turn: 'text-green-500',
+  input_needed: 'text-warning',
+  none: 'text-muted-foreground',
+};
+
 type NotifyMenuProps = {
   preference: NotifyPreference;
   onChange: (preference: NotifyPreference) => void;
@@ -40,7 +57,7 @@ export const NotifyMenu = ({ preference, onChange }: NotifyMenuProps) => {
           type="button"
           title={`Notifications: ${OPTIONS.find((o) => o.value === preference)?.label ?? 'None'}`}
           aria-label="Notification preference"
-          className="p-1 rounded hover:bg-muted transition-colors cursor-pointer"
+          className={`rounded p-1 transition-colors hover:bg-muted cursor-pointer ${BELL_TONE[preference]}`}
         >
           {preference === 'none' ? <BellOff className="h-3.5 w-3.5" /> : <Bell className="h-3.5 w-3.5" />}
         </button>