Add optional 'Msg numbers' setting to show message ids in chat bubbles

[maxlamagna]

What & why

Agents reference messages by their integer id (the msg_id the MCP bridge returns), but the UI never shows that id, so a human can't tell which message is "msg 437." This adds the message id (#NNN) to the chat bubble header, behind a Settings toggle.

Closes #70.

Changes

• static/chat.js — appendMessage: render <span class="msg-num">#${msg.id}</span> in the existing bubble-header (chat messages only — joins/summaries/proposals untouched).
• static/index.html — add a "Msg numbers" <select> (Hide/Show) to #settings-bar, next to Contrast.
• static/style.css — .msg-num styling; hidden by default, shown only when body.show-msg-numbers is set, so the id is always in the DOM and the toggle is pure CSS.
• app.py — show_msg_numbers default in room_settings + validation in the update_settings handler. Round-trips to clients automatically via broadcast_settings.

Wiring mirrors the existing Contrast setting (body-class toggle, update_settings payload, immediate apply on change).

Behavior

• Default off — non-breaking; no change to existing users' view until they opt in via Settings → "Msg numbers" → Show.
• Persisted server-side like the other settings; survives reload.
• The displayed #id is exactly msg.id, i.e. the same number agents cite.

Notes / open to feedback

• Happy to default it on instead, or to make it a client-only (localStorage) preference if you'd rather not persist a display-only setting server-side.
• A natural follow-up (not in this PR) is making msg NNN references clickable to jump to the message — scrollToMessage() already exists. Raised in the issue with the "don't linkify every number" design question.

Testing

• python -m py_compile app.py — OK
• node --check static/chat.js — OK
• Manual: toggling Hide/Show flips the badges live; reload preserves the setting; numbers match the ids agents reference.

Diff (also provided as agentchattr-msg-numbers.patch, git apply-clean against main)

diff --git a/app.py b/app.py
@@ -54,6 +54,7 @@ room_settings: dict = {
     "channels": ["general"],
     "history_limit": "all",
     "contrast": "normal",
+    "show_msg_numbers": False,
     "custom_roles": [],
 }
@@ -1251,6 +1252,8 @@ async def websocket_endpoint(websocket: WebSocket):
                 if "contrast" in new and new["contrast"] in ("normal", "high"):
                     room_settings["contrast"] = new["contrast"]
+                if "show_msg_numbers" in new:
+                    room_settings["show_msg_numbers"] = bool(new["show_msg_numbers"])
                 if "rules_refresh_interval" in new:

diff --git a/static/chat.js b/static/chat.js
@@ appendMessage @@  (bubble-header)
-  ...<span class="msg-time">${msg.time || ''}</span></div>...
+  ...<span class="msg-time">${msg.time || ''}</span><span class="msg-num">#${msg.id}</span></div>...
@@ applySettings @@
+    if (data.show_msg_numbers !== undefined) {
+        document.body.classList.toggle('show-msg-numbers', !!data.show_msg_numbers);
+        document.getElementById('setting-msg-numbers').value = data.show_msg_numbers ? 'show' : 'hide';
+    }
@@ saveSettings @@
+    const newMsgNumbers = document.getElementById('setting-msg-numbers').value === 'show';
                 contrast: newContrast,
+                show_msg_numbers: newMsgNumbers,
@@ setupSettingsKeys @@
-    for (const id of ['setting-font', 'setting-history', 'setting-contrast', 'setting-rules-refresh']) {
+    for (const id of ['setting-font', 'setting-history', 'setting-contrast', 'setting-msg-numbers', 'setting-rules-refresh']) {
+            if (id === 'setting-msg-numbers') {
+                document.body.classList.toggle('show-msg-numbers', el.value === 'show');
+            }

diff --git a/static/index.html b/static/index.html
@@ after Contrast field @@
+            <div class="settings-field">
+                <label for="setting-msg-numbers">Msg numbers</label>
+                <select id="setting-msg-numbers" title="Show each message's id (#id) in its header">
+                    <option value="hide">Hide</option>
+                    <option value="show">Show</option>
+                </select>
+            </div>

diff --git a/static/style.css b/static/style.css
@@ after .msg-time @@
+.msg-num {
+    font-size: 11px;
+    color: var(--text-dim);
+    font-variant-numeric: tabular-nums;
+    opacity: 0.6;
+    display: none;
+}
+body.show-msg-numbers .msg-num { display: inline; }