feat(ui): fix thread creation from UI modal (UI-14)

- Auto-register a browser-session agent (sessionStorage) to obtain
  X-Agent-Token required by POST /api/threads
- Pass creator_agent_id + X-Agent-Token header when creating thread
- Fix shared-api.js headers merge (spread was overwriting Content-Type)
- Disable Create button when topic is empty; re-enable on input
- Add .btn-primary:disabled CSS style

Author: bertheto

src/static/css/main.css

@@ -2114,6 +2114,14 @@ body[data-theme="light"] .skills-badge {
   background: #2563eb;
 }
 
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.btn-primary:disabled:hover {
+  background: var(--accent);
+}
+
 /* Thread context menu */
 #thread-context-menu {
   position: fixed;

src/static/index.html

@@ -154,6 +154,7 @@
   <acb-modal-shell></acb-modal-shell>
 
   <script src="/static/js/shared-api.js?v=2"></script>
+  <script src="/static/js/shared-ui-agent.js?v=1"></script>
   <script src="/static/js/shared-theme.js?v=2"></script>
   <script src="/static/js/shared-utils.js?v=3"></script>
   <script src="/static/js/shared-message-renderer.js?v=2"></script>

src/static/js/components/acb-modal-shell.js

@@ -47,7 +47,7 @@
             </div>
             <div class="modal-actions">
               <button class="btn-secondary" onclick="closeModal()">Cancel</button>
-              <button class="btn-primary" onclick="submitModal()">Create</button>
+              <button id="btn-create-thread" class="btn-primary" onclick="submitModal()" disabled>Create</button>
             </div>
           </div>
         </div>
@@ -101,6 +101,22 @@
 
       // Attach minimap toggle listener after DOM is built
       this._attachMinimapToggle();
+      // UI-14: enable Create button only when topic is non-empty
+      this._attachTopicGuard();
+    }
+
+    _attachTopicGuard() {
+      const input = this.querySelector("#modal-topic");
+      const btn = this.querySelector("#btn-create-thread");
+      if (!input || !btn) return;
+      const sync = () => { btn.disabled = input.value.trim().length === 0; };
+      input.addEventListener("input", sync);
+      // Re-sync when modal is opened (topic may have been cleared)
+      const overlay = this.querySelector("#modal-overlay");
+      if (overlay) {
+        const observer = new MutationObserver(() => sync());
+        observer.observe(overlay, { attributes: true, attributeFilter: ["style"] });
+      }
     }
 
     _attachMinimapToggle() {

src/static/js/shared-api.js

@@ -1,10 +1,11 @@
 (function () {
   async function api(path, opts) {
     const options = opts || {};
+    const { headers: extraHeaders, ...restOptions } = options;
     try {
       const response = await fetch(path, {
-        headers: { "Content-Type": "application/json" },
-        ...options,
+        headers: { "Content-Type": "application/json", ...extraHeaders },
+        ...restOptions,
       });
       if (!response.ok) {
         console.warn(`[API] ${options.method || 'GET'} ${path} → HTTP ${response.status}`);

src/static/js/shared-modals.js

@@ -99,6 +99,13 @@
     const templateSel = document.getElementById("modal-template");
     const template = templateSel ? templateSel.value || null : null;
 
+    // UI-14: get or register a browser-session agent to provide auth for thread creation
+    const uiAgent = window.AcbUiAgent ? await window.AcbUiAgent.ensureUiAgent() : null;
+    if (!uiAgent) {
+      console.error("[Thread Create] Could not obtain UI agent token — cannot create thread");
+      return;
+    }
+
     topicInput.value = "";
     if (templateSel) templateSel.value = "";
     const descEl = document.getElementById("modal-template-desc");
@@ -107,7 +114,11 @@
 
     const t = await api("/api/threads", {
       method: "POST",
-      body: JSON.stringify({ topic, ...(template ? { template } : {}) }),
+      headers: {
+        "Content-Type": "application/json",
+        "X-Agent-Token": uiAgent.token,
+      },
+      body: JSON.stringify({ topic, creator_agent_id: uiAgent.agent_id, ...(template ? { template } : {}) }),
     });
     if (t) {
       const syncContext =

src/static/js/shared-ui-agent.js

@@ -0,0 +1,39 @@
+// UI-14: Auto-register a browser-session agent so the UI can create threads.
+// Token is stored in sessionStorage (cleared on tab close).
+(function () {
+  const SESSION_KEY = "acb-ui-agent";
+
+  async function ensureUiAgent() {
+    const cached = sessionStorage.getItem(SESSION_KEY);
+    if (cached) {
+      try {
+        const parsed = JSON.parse(cached);
+        if (parsed.agent_id && parsed.token) return parsed;
+      } catch (_) {
+        // corrupted — fall through to re-register
+      }
+    }
+
+    try {
+      const res = await fetch("/api/agents/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: "ui-human",
+          display_name: "Browser User",
+          ide: "browser",
+          model: "human",
+        }),
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      if (!data.agent_id || !data.token) return null;
+      sessionStorage.setItem(SESSION_KEY, JSON.stringify({ agent_id: data.agent_id, token: data.token }));
+      return { agent_id: data.agent_id, token: data.token };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  window.AcbUiAgent = { ensureUiAgent };
+})();