feat: Implement settings modal layout and functionality for agent and network configurations

Author: Killea

src/static/css/main.css

@@ -3295,3 +3295,230 @@ body.minimap-hidden #nav-sidebar {
   opacity: .55;
   text-decoration: line-through;
 }
+
+/* ====================================================================================
+   Settings Modal Layout
+==================================================================================== */
+.settings-modal-container {
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: 14px;
+  width: 760px;
+  max-width: 90vw;
+  height: 540px;
+  max-height: 90vh;
+  box-shadow: var(--shadow);
+  animation: modal-in .2s ease;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-modal-header {
+  height: 56px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg-panel);
+}
+
+.settings-modal-header h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.settings-close-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-2);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background .15s, color .15s;
+}
+
+.settings-close-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-1);
+}
+
+.settings-modal-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.settings-sidebar {
+  width: 200px;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border);
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.settings-nav-item {
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+
+.settings-nav-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-1);
+}
+
+.settings-nav-item.active {
+  background: var(--accent-glow);
+  color: var(--accent);
+}
+
+body[data-theme="light"] .settings-nav-item.active {
+  background: rgba(37, 99, 235, .1);
+}
+
+.settings-content {
+  flex: 1;
+  background: var(--bg-base);
+  padding: 24px 32px;
+  overflow-y: auto;
+}
+
+.settings-tab-pane {
+  display: none;
+  animation: fade-in .2s ease;
+}
+
+.settings-tab-pane.active {
+  display: block;
+}
+
+.settings-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  margin-bottom: 12px;
+  letter-spacing: .06em;
+}
+
+.settings-card {
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.settings-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.settings-field-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.settings-field label {
+  font-size: 13px;
+  color: var(--text-1);
+  font-weight: 500;
+}
+
+.settings-field input[type="text"],
+.settings-field input[type="number"] {
+  width: 100%;
+  background: var(--bg-input);
+  border: 1px solid var(--border-light);
+  color: var(--text-1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color .15s;
+}
+
+.settings-field input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.settings-field-note {
+  font-size: 12px;
+  color: var(--text-3);
+  line-height: 1.4;
+}
+
+.settings-modal-footer {
+  height: 64px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel);
+  flex-shrink: 0;
+}
+
+/* Custom Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--border-light);
+  transition: .2s;
+  border-radius: 20px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .2s;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+}
+
+.toggle-switch input:checked+.toggle-slider {
+  background-color: var(--accent);
+}
+
+.toggle-switch input:checked+.toggle-slider:before {
+  transform: translateX(16px);
+}

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

@@ -1,7 +1,10 @@
 (function registerAcbModalShell() {
-  const SETTINGS_FIELDS = [
+  const NETWORK_FIELDS = [
     { label: "Host", id: "setting-host", type: "text" },
     { label: "Port", id: "setting-port", type: "number" },
+  ];
+
+  const AGENT_FIELDS = [
     {
       label: "Agent Heartbeat Timeout (s)",
       id: "setting-heartbeat",
@@ -13,31 +16,44 @@
 
   const MINIMAP_KEY = "acb-minimap-enabled";
 
-  function renderSettingsFields() {
-    return SETTINGS_FIELDS.map((field) => {
+  function renderFields(fields) {
+    return fields.map((field) => {
       const noteHtml = field.note
-        ? `<div style="font-size:11px;color:var(--text-3);margin-top:-12px;margin-bottom:16px;line-height:1.4;">${field.note}</div>`
+        ? `<div class="settings-field-note">${field.note}</div>`
         : "";
       return `
-        <label style="display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;">${field.label}</label>
-        <input id="${field.id}" type="${field.type}"
-          style="width:100%;background:var(--bg-input);border:1px solid var(--border-light);color:var(--text-1);border-radius:10px;padding:10px 14px;font-size:14px;font-family:inherit;margin-bottom:${field.note ? "8px" : "16px"};" />
-        ${noteHtml}`;
+        <div class="settings-field">
+          <label>${field.label}</label>
+          <input id="${field.id}" type="${field.type}" />
+          ${noteHtml}
+        </div>`;
     }).join("\n");
   }
 
   function renderUiPreferences() {
     return `
-      <div style="border-top:1px solid var(--border-light);margin:4px 0 16px;padding-top:16px;">
-        <div style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:12px;">UI Preferences</div>
-        <label style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-1);cursor:pointer;user-select:none;">
-          <input id="setting-minimap" type="checkbox" style="width:15px;height:15px;cursor:pointer;accent-color:var(--accent);" />
-          <span>Message minimap (navigation sidebar)</span>
-        </label>
-        <div style="font-size:11px;color:var(--text-2);margin-top:4px;padding-left:25px;">Scrollable anchor list on the right — toggle without restart.</div>
-      </div>`;
+      <div class="settings-field settings-field-row">
+        <label for="setting-minimap">Message minimap (Navigation sidebar)</label>
+        <div class="toggle-switch">
+          <input id="setting-minimap" type="checkbox" />
+          <span class="toggle-slider"></span>
+        </div>
+      </div>
+      <div class="settings-field-note" style="margin-top: 4px;">Scrollable anchor list on the right — toggle without restart.</div>
+    `;
   }
 
+  window.switchSettingsTab = function (tabId) {
+    document.querySelectorAll('.settings-nav-item').forEach(el => el.classList.remove('active'));
+    document.querySelectorAll('.settings-tab-pane').forEach(el => el.classList.remove('active'));
+
+    const navItem = document.getElementById('nav-' + tabId);
+    if (navItem) navItem.classList.add('active');
+
+    const pane = document.getElementById('pane-' + tabId);
+    if (pane) pane.classList.add('active');
+  };
+
   class AcbModalShell extends HTMLElement {
     connectedCallback() {
       if (this.childElementCount > 0) return;
@@ -63,15 +79,43 @@
 
         <div id="settings-modal-overlay" onclick="closeSettingsModal(event)"
           style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);align-items:center;justify-content:center;z-index:100;animation:fade-in .15s ease;">
-          <div id="settings-modal"
-            style="background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;padding:28px;width:440px;max-width:90vw;box-shadow:var(--shadow);animation:modal-in .2s ease;"
-            onclick="event.stopPropagation()">
-            <h3 style="font-size:16px;font-weight:600;margin-bottom:18px;color:var(--text-1)">⚙️ MCP Server Settings</h3>
-            ${renderSettingsFields()}
-            ${renderUiPreferences()}
-            <div id="settings-message" style="font-size:12px;color:var(--green);margin-bottom:16px;display:none;"></div>
-            <div class="modal-actions">
-              <button class="btn-secondary" onclick="closeSettingsModal()">Cancel</button>
+          <div id="settings-modal" class="settings-modal-container" onclick="event.stopPropagation()">
+            <div class="settings-modal-header">
+              <h3>Settings - AgentChatBus</h3>
+              <button class="settings-close-btn" onclick="closeSettingsModal()">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              </button>
+            </div>
+            <div class="settings-modal-body">
+              <div class="settings-sidebar">
+                <div id="nav-agent" class="settings-nav-item active" onclick="switchSettingsTab('agent')">Agent</div>
+                <div id="nav-network" class="settings-nav-item" onclick="switchSettingsTab('network')">Network</div>
+                <div id="nav-ui" class="settings-nav-item" onclick="switchSettingsTab('ui')">UI</div>
+              </div>
+              <div class="settings-content">
+                <div id="pane-agent" class="settings-tab-pane active">
+                  <div class="settings-section-title">TIMEOUTS</div>
+                  <div class="settings-card">
+                    ${renderFields(AGENT_FIELDS)}
+                  </div>
+                </div>
+                <div id="pane-network" class="settings-tab-pane">
+                  <div class="settings-section-title">LISTENING</div>
+                  <div class="settings-card">
+                    ${renderFields(NETWORK_FIELDS)}
+                  </div>
+                </div>
+                <div id="pane-ui" class="settings-tab-pane">
+                  <div class="settings-section-title">PREFERENCES</div>
+                  <div class="settings-card">
+                    ${renderUiPreferences()}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="settings-modal-footer">
+              <div id="settings-message" style="font-size:13px;color:var(--green);display:none;"></div>
+              <div style="flex:1"></div>
               <button class="btn-primary" id="btn-settings-save" onclick="submitSettings()">Save (Requires Restart)</button>
             </div>
           </div>