From bfdc156bd696604b9156cb9c413ac5733d39f099 Mon Sep 17 00:00:00 2001
From: Sudhir Verma <9924513+sudhirverma@users.noreply.github.com>
Date: Tue, 4 Aug 2026 23:40:56 +0530
Subject: [PATCH 1/4] fix(daemon): correct dashboard modal button placement and
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address UX review findings (design review doc, AAP-80841/ANSTRAT-2262):
- Separate Cancel from the primary action in all 3 modals so a mis-click
  can't fire Save/Apply.
- Add an X close button to the Add/Edit Provider wizard modal.
- Engine picker is single-select — clicking a tile now advances directly
  instead of requiring a redundant Next click.
- Replace the dual-list's shared middle Add/Remove column with per-row
  Add/Remove/Configure actions.
- Remove the duplicate 'Back to Models tab' button (dead code path) and
  fix the mislabeled footer button when Configure Model is opened from
  the Models tab.
- Change input focus color from brand red to blue so a focused field is
  never mistaken for a validation error.
- Mark the one required field (Provider Name) and label Base URL optional.

PF6 migration and branding are explicitly out of scope per team decision
(dashboard is intentionally RHDS + Alpine; native UI config will move to
the Portal).
---
 packages/daemon/static/index.html | 154 ++++++++++++++----------------
 1 file changed, 72 insertions(+), 82 deletions(-)

diff --git a/packages/daemon/static/index.html b/packages/daemon/static/index.html
index 345ef67..b7074ae 100644
--- a/packages/daemon/static/index.html
+++ b/packages/daemon/static/index.html
@@ -128,7 +128,8 @@
       font-family: 'Red Hat Text', sans-serif;
       border: 1px solid #d2d2d2; border-radius: 3px; background: #fff;
     }
-    input:focus, select:focus, textarea:focus { outline: none; border-color: #ee0000; box-shadow: 0 0 0 1px #ee0000; }
+    /* Focus uses blue, not the brand/error red, so a focused field is never mistaken for a validation error. */
+    input:focus, select:focus, textarea:focus { outline: none; border-color: #06c; box-shadow: 0 0 0 1px #06c; }
     
     /* Modal */
     .modal-backdrop {
@@ -153,6 +154,8 @@
       border-top: 1px solid #d2d2d2;
       display: flex; justify-content: flex-end; gap: var(--rh-space-sm); align-items: center;
     }
+    /* Keeps Cancel/dismiss clearly separated from the primary action so a mis-click can't fire it. */
+    .footer-dismiss { margin-right: auto; }
     
     /* Step indicators */
     .step-indicators { display: flex; gap: 8px; align-items: center; }
@@ -177,8 +180,9 @@
     .engine-tile .tile-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
     .engine-tile .tile-hint { font-size: 0.75rem; color: #6a6e73; }
     
-    /* Dual list model selector */
-    .dual-list { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--rh-space-sm); min-height: 350px; }
+    /* Dual list model selector — each row carries its own Add/Remove/Configure action
+       (no shared middle column) so the action is right where the user is looking. */
+    .dual-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rh-space-sm); min-height: 350px; }
     .dual-list-panel {
       border: 1px solid #d2d2d2; border-radius: 3px; overflow-y: auto; max-height: 400px;
     }
@@ -187,16 +191,12 @@
       color: #6a6e73; position: sticky; top: 0; z-index: 1;
       border-bottom: 1px solid #d2d2d2;
     }
-    .dual-list-actions {
-      display: flex; flex-direction: column; justify-content: center; gap: var(--rh-space-sm);
-    }
     .model-item {
       display: flex; align-items: center; gap: 8px;
-      padding: 8px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
+      padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
       font-size: 0.85rem;
     }
     .model-item:hover { background: #f8f8f8; }
-    .model-item.selected { background: #e7f1fa; }
     .model-item .model-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     
     /* Inline param editor */
@@ -896,14 +896,17 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
   </main>
 
   <!-- ═══════════ ADD PROVIDER WIZARD MODAL ═══════════ -->
-  <div class="modal-backdrop" x-show="wizardOpen" x-cloak @click.self="wizardOpen = false">
+  <div class="modal-backdrop" x-show="wizardOpen" x-cloak @click.self="closeWizard()">
     <div class="modal" @click.stop>
       <div class="modal-header">
         <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizardEditingModel ? 'Configure Model' : wizardEditMode ? (wizardStep === 2 ? 'Edit Provider' : 'Select Models') : (wizardStep === 1 ? 'Choose Engine' : wizardStep === 2 ? 'Configure Provider' : 'Select Models'))"></h2>
-        <div class="step-indicators" x-show="!wizardFromModelsTab">
-          <div class="step-dot" x-show="!wizardEditMode" :class="{ active: wizardStep === 1, completed: wizardStep > 1 }"></div>
-          <div class="step-dot" :class="{ active: wizardStep === 2, completed: wizardStep > 2 }"></div>
-          <div class="step-dot" :class="{ active: wizardStep === 3 }"></div>
+        <div style="display: flex; align-items: center; gap: 16px;">
+          <div class="step-indicators" x-show="!wizardFromModelsTab">
+            <div class="step-dot" x-show="!wizardEditMode" :class="{ active: wizardStep === 1, completed: wizardStep > 1 }"></div>
+            <div class="step-dot" :class="{ active: wizardStep === 2, completed: wizardStep > 2 }"></div>
+            <div class="step-dot" :class="{ active: wizardStep === 3 }"></div>
+          </div>
+          <button class="rh-close-btn" @click="closeWizard()" aria-label="Close" title="Close">&times;</button>
         </div>
       </div>
       
@@ -911,10 +914,10 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
         <!-- Step 1: Engine Picker -->
         <template x-if="wizardStep === 1">
           <div>
-            <p style="color: #6a6e73; margin: 0 0 16px;">Choose an engine (API implementation) for your new provider instance.</p>
+            <p style="color: #6a6e73; margin: 0 0 16px;">Choose an engine (API implementation) for your new provider instance. Selecting one advances automatically — this is a single choice, not a multi-select.</p>
             <div class="engine-grid">
               <template x-for="engine in [...engines].sort((a, b) => a.id.localeCompare(b.id))" :key="engine.id">
-                <div class="engine-tile" :class="{ selected: wizardEngine === engine.id }" @click="wizardEngine = engine.id">
+                <div class="engine-tile" :class="{ selected: wizardEngine === engine.id }" @click="selectEngine(engine.id)">
                   <div class="tile-name" x-text="engine.id"></div>
                   <div class="tile-hint" x-text="engine.requiresKey ? 'API key required' : 'No key needed'"></div>
                 </div>
@@ -927,17 +930,19 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
         <template x-if="wizardStep === 2">
           <div>
             <div class="form-group">
-              <label>Provider Name (unique ID)</label>
+              <label>Provider Name (unique ID) <span style="color: #c9190b;" aria-hidden="true">*</span></label>
               <input type="text" x-model="wizardName" :placeholder="wizardEngine" 
                      pattern="[a-z0-9][a-z0-9._-]*" style="font-family: 'Red Hat Mono', monospace;"
-                     :disabled="wizardEditMode" :style="wizardEditMode ? 'background: #f0f0f0;' : ''">
+                     :disabled="wizardEditMode" :style="wizardEditMode ? 'background: #f0f0f0;' : ''"
+                     required aria-required="true">
               <small x-show="!wizardEditMode" style="color: #6a6e73; display: block; margin-top: 4px;">Lowercase, alphanumeric, dots, hyphens, underscores. No spaces or slashes.</small>
             </div>
             <div class="form-group">
-              <label>Base URL</label>
+              <label>Base URL <span style="color: #6a6e73; font-weight: 400;">(optional)</span></label>
               <input type="text" x-model="wizardBaseUrl" :placeholder="getEngineDefaultUrl(wizardEngine) || 'https://...'"
                      style="font-family: 'Red Hat Mono', monospace; font-size: 0.85rem;">
             </div>
+            <p class="rh-helper-text" style="margin: -4px 0 0;"><span style="color: #c9190b;">*</span> Required</p>
             
             <!-- API Key (only for key-required engines) -->
             <template x-if="engineRequiresKey(wizardEngine)">
@@ -979,37 +984,34 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
                   <input type="text" placeholder="Search models..." x-model="wizardModelSearch" style="max-width: 300px;">
                 </div>
                 <div class="dual-list">
-                  <!-- Left: Available -->
+                  <!-- Left: Available — each row adds itself, no shared middle button -->
                   <div class="dual-list-panel">
                     <div class="dual-list-panel-header" x-text="'Available (' + filteredAvailableModels.length + ')'"></div>
                     <template x-for="m in filteredAvailableModels" :key="m.id">
-                      <div class="model-item" :class="{ selected: wizardLeftSelected.has(m.id) }" @click="toggleLeftSelect(m.id)">
+                      <div class="model-item">
                         <div class="model-name" x-text="m.id"></div>
-                        <div style="display: flex; gap: 2px;">
+                        <div style="display: flex; align-items: center; gap: 6px;">
                           <span x-show="m.capabilities?.tools" class="cap-tag tools">T</span>
                           <span x-show="m.capabilities?.vision" class="cap-tag vision">V</span>
+                          <button class="btn btn-secondary" style="padding: 2px 8px; font-size: 0.7rem;" @click="addModel(m.id)">Add &rarr;</button>
                         </div>
                       </div>
                     </template>
                   </div>
                   
-                  <!-- Center: Actions -->
-                  <div class="dual-list-actions">
-                    <button class="btn btn-secondary btn-sm" @click="addSelectedModels()">Add &rarr;</button>
-                    <button class="btn btn-secondary btn-sm" @click="removeSelectedModels()">&larr; Remove</button>
-                  </div>
-                  
-                  <!-- Right: Enabled -->
+                  <!-- Right: Enabled — Configure/Remove live on the row itself -->
                   <div class="dual-list-panel">
                     <div class="dual-list-panel-header" x-text="'Enabled (' + Object.keys(wizardEnabledModels).length + ')'"></div>
                     <template x-for="[name, cfg] in Object.entries(wizardEnabledModels)" :key="name">
-                      <div class="model-item" :class="{ selected: wizardRightSelected.has(name) }" @click="toggleRightSelect(name)">
+                      <div class="model-item">
                         <div class="model-name" x-text="name"></div>
                         <div style="display: flex; align-items: center; gap: 4px;">
                           <span x-show="cfg.temperature != null || cfg.top_p != null || cfg.system_prompt" 
                                 style="font-size: 0.65rem; color: #6a6e73;" title="Has custom parameters">&#9881;</span>
                           <button class="btn btn-secondary" style="padding: 2px 8px; font-size: 0.7rem;" 
-                                  @click.stop="wizardEditingModel = name">Configure</button>
+                                  @click="wizardEditingModel = name">Configure</button>
+                          <button class="btn btn-secondary" style="padding: 2px 8px; font-size: 0.7rem; color: #c9190b;" 
+                                  @click="removeModel(name)">Remove</button>
                         </div>
                       </div>
                     </template>
@@ -1021,12 +1023,8 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
             <!-- ── View B: Full-width model configuration (view flip) ── -->
             <template x-if="wizardEditingModel">
               <div>
-                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #d2d2d2;">
-                  <button class="btn btn-secondary btn-sm" 
-                          @click="wizardFromModelsTab ? (wizardOpen = false, wizardFromModelsTab = false, wizardEditingModel = null) : (wizardEditingModel = null)" 
-                          style="display: flex; align-items: center; gap: 4px;">
-                    &larr; <span x-text="wizardFromModelsTab ? 'Back to Models tab' : 'Back to models'"></span>
-                  </button>
+                <!-- Back navigation lives only in the footer (below) — no duplicate button here. -->
+                <div style="margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #d2d2d2;">
                   <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: ' + wizardEditingModel"></h3>
                 </div>
 
@@ -1175,17 +1173,17 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
       </div>
       
       <div class="modal-footer">
-        <span style="flex: 1; font-size: 0.85rem; color: #6a6e73;" x-show="wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab"
+        <span style="font-size: 0.85rem; color: #6a6e73;" x-show="wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab"
               x-text="Object.keys(wizardEnabledModels).length + ' model(s) enabled'"></span>
-        <!-- Cancel / Back to models button -->
-        <button class="btn btn-secondary" 
-                @click="wizardFromModelsTab ? (wizardOpen = false, wizardFromModelsTab = false, wizardEditingModel = null) : (wizardEditingModel ? (wizardEditingModel = null) : (wizardOpen = false))" 
-                x-text="wizardFromModelsTab ? (wizardEditingModel ? '← Back to Models tab' : 'Close') : (wizardEditingModel ? '← Back to models' : 'Cancel')"></button>
+        <!-- Cancel / Back — kept apart from the primary action (margin-right:auto) so it can't be mis-clicked -->
+        <button class="btn btn-secondary footer-dismiss" 
+                @click="wizardFromModelsTab ? closeWizard() : (wizardEditingModel ? (wizardEditingModel = null) : closeWizard())" 
+                x-text="wizardFromModelsTab ? 'Cancel' : (wizardEditingModel ? '← Back to models' : 'Cancel')"></button>
         <!-- Back (step navigation) — hidden when from Models tab -->
         <button class="btn btn-secondary" x-show="!wizardFromModelsTab && wizardStep > 1 && !(wizardEditMode && wizardStep === 2) && !wizardEditingModel" @click="wizardStep--">Back</button>
-        <!-- Next — hidden when from Models tab -->
-        <button class="btn btn-primary" x-show="!wizardFromModelsTab && wizardStep < 3 && !wizardEditingModel" @click="wizardNext()" 
-                :disabled="wizardStep === 1 && !wizardEngine">Next</button>
+        <!-- Next — only step 2 needs it now; step 1 (single-select engine tiles) advances on click -->
+        <button class="btn btn-primary" x-show="!wizardFromModelsTab && wizardStep === 2 && !wizardEditingModel" @click="wizardNext()" 
+                :disabled="!wizardName">Next</button>
         <!-- Save — show in wizard flow (step 3, not editing model) OR from Models tab when editing a model -->
         <button class="btn btn-primary" x-show="(wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab) || (wizardFromModelsTab && wizardEditingModel)" @click="wizardSave()">Save</button>
       </div>
@@ -1348,7 +1346,7 @@ <h2 x-text="editingPolicy.isNew ? 'New Policy' : ('Edit Policy: ' + editingPolic
         </fieldset>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-secondary" @click="cancelEditPolicy()">Cancel</button>
+        <button class="btn btn-secondary footer-dismiss" @click="cancelEditPolicy()">Cancel</button>
         <button class="btn" style="background: #ee0000; color: #fff; border-color: #a30000;" @click="saveEditingPolicy()">Save Policy</button>
       </div>
     </div>
@@ -1417,7 +1415,7 @@ <h3>Save config to</h3>
         </div>
       </div>
       <div class="rh-modal-footer">
-        <button class="rh-btn rh-btn--secondary" @click="showConfigModal = false">Cancel</button>
+        <button class="rh-btn rh-btn--secondary footer-dismiss" @click="showConfigModal = false">Cancel</button>
         <button class="rh-btn rh-btn--primary" @click="applyConfigLocation()"
                 :disabled="(configLocation === 'workspace' && !workspacePath)">Apply</button>
       </div>
@@ -1493,8 +1491,6 @@ <h3>Save config to</h3>
     wizardModelSearch: '',
     wizardDiscoveredModels: [],
     wizardEnabledModels: {},   // { modelName: { model_id?, temperature?, ... } }
-    wizardLeftSelected: new Set(),
-    wizardRightSelected: new Set(),
     wizardEditingModel: null,
     
     // ── Edit mode (reuses wizard) ──
@@ -1733,8 +1729,6 @@ <h3>Save config to</h3>
       this.wizardModelSearch = '';
       this.wizardDiscoveredModels = [];
       this.wizardEnabledModels = {};
-      this.wizardLeftSelected = new Set();
-      this.wizardRightSelected = new Set();
       this.wizardEditingModel = null;
     },
     
@@ -1757,11 +1751,22 @@ <h3>Save config to</h3>
       this.wizardModelSearch = '';
       this.wizardDiscoveredModels = [];
       this.wizardEnabledModels = JSON.parse(JSON.stringify(cfg.models || {}));
-      this.wizardLeftSelected = new Set();
-      this.wizardRightSelected = new Set();
       this.wizardEditingModel = null;
     },
     
+    /** Fully dismiss the wizard from any state (X button, backdrop click, or Cancel). */
+    closeWizard() {
+      this.wizardOpen = false;
+      this.wizardFromModelsTab = false;
+      this.wizardEditingModel = null;
+    },
+    
+    /** Step 1 is a single-select — choosing an engine advances immediately, no separate Next click. */
+    selectEngine(id) {
+      this.wizardEngine = id;
+      this.wizardNext();
+    },
+    
     async openModelConfig(model) {
       // Reuse openEditWizard to load the provider's config into wizard state
       await this.openEditWizard(model.provider);
@@ -1888,41 +1893,26 @@ <h3>Save config to</h3>
       });
     },
     
-    toggleLeftSelect(id) {
-      if (this.wizardLeftSelected.has(id)) this.wizardLeftSelected.delete(id);
-      else this.wizardLeftSelected.add(id);
-      this.wizardLeftSelected = new Set(this.wizardLeftSelected);
-    },
-    toggleRightSelect(name) {
-      if (this.wizardRightSelected.has(name)) this.wizardRightSelected.delete(name);
-      else this.wizardRightSelected.add(name);
-      this.wizardRightSelected = new Set(this.wizardRightSelected);
-    },
-    
-    addSelectedModels() {
-      for (const id of this.wizardLeftSelected) {
-        // Key = engine model ID (default name), value = {} (default params)
-        // If already exists, auto-name with suffix
-        let name = id;
-        if (this.wizardEnabledModels[name]) {
-          let i = 1;
-          while (this.wizardEnabledModels[`${id}-${i}`]) i++;
-          name = `${id}-${i}`;
-          this.wizardEnabledModels[name] = { model_id: id };
-        } else {
-          this.wizardEnabledModels[name] = {};
-        }
+    /** Adds a single model — each row in the "Available" list acts on itself directly. */
+    addModel(id) {
+      // Key = engine model ID (default name), value = {} (default params)
+      // If already exists, auto-name with suffix
+      let name = id;
+      if (this.wizardEnabledModels[name]) {
+        let i = 1;
+        while (this.wizardEnabledModels[`${id}-${i}`]) i++;
+        name = `${id}-${i}`;
+        this.wizardEnabledModels[name] = { model_id: id };
+      } else {
+        this.wizardEnabledModels[name] = {};
       }
       this.wizardEnabledModels = { ...this.wizardEnabledModels };
-      this.wizardLeftSelected = new Set();
     },
     
-    removeSelectedModels() {
-      for (const name of this.wizardRightSelected) {
-        delete this.wizardEnabledModels[name];
-      }
+    /** Removes a single model — each row in the "Enabled" list acts on itself directly. */
+    removeModel(name) {
+      delete this.wizardEnabledModels[name];
       this.wizardEnabledModels = { ...this.wizardEnabledModels };
-      this.wizardRightSelected = new Set();
     },
     
     // toggleParamEditor removed — model config now uses the "view flip" pattern

From ba86450cd973fec9e7de6e291e292c60a26f823f Mon Sep 17 00:00:00 2001
From: Sudhir Verma <9924513+sudhirverma@users.noreply.github.com>
Date: Wed, 5 Aug 2026 00:25:01 +0530
Subject: [PATCH 2/4] fix(daemon): draft-based model config editing, tabs card
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Model config edits now happen on a scratch draft (wizardEditingDraft)
  and only commit to wizardEnabledModels on explicit Save — Cancel/Back
  now truly discards in-progress edits instead of mutating live state.
- Rename "Configure Model" flow to save-and-return-to-list with a brief
  confirmation flash, rather than silently applying on every keystroke.
- Wrap rh-tabs in a white card (border + radius) instead of sitting
  directly on the grey page background.
- Pill-shaped buttons (border-radius: 999px) instead of 3px.
- Mark optional fields (Virtual Name, Policy) explicitly as "(optional)".
- Add Provider button right-aligned above the providers list.
---
 packages/daemon/static/index.html | 162 ++++++++++++++++++++++--------
 1 file changed, 122 insertions(+), 40 deletions(-)

diff --git a/packages/daemon/static/index.html b/packages/daemon/static/index.html
index b7074ae..d609afa 100644
--- a/packages/daemon/static/index.html
+++ b/packages/daemon/static/index.html
@@ -62,6 +62,11 @@
       height: 24px; display: inline-flex; align-items: center;
     }
     main { padding: var(--rh-space-lg); max-width: 1400px; margin: 0 auto; }
+    /* Tabs sit on a white card, not directly on the grey page background. */
+    rh-tabs {
+      display: block; background: #fff; border-radius: 3px;
+      border: 1px solid #d2d2d2; padding: 0 var(--rh-space-lg) var(--rh-space-lg);
+    }
     .stats-grid {
       display: grid; grid-template-columns: repeat(4, 1fr);
       gap: var(--rh-space-md); margin-bottom: var(--rh-space-lg);
@@ -98,7 +103,7 @@
       display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
       padding: 0.5rem 0.875rem; font-size: 0.875rem;
       font-family: 'Red Hat Text', sans-serif; font-weight: 500;
-      border: none; border-radius: 3px; cursor: pointer; white-space: nowrap;
+      border: none; border-radius: 999px; cursor: pointer; white-space: nowrap;
       transition: background-color 0.2s;
     }
     .btn-primary { background: #ee0000; color: white; }
@@ -425,7 +430,7 @@ <h3>Tools</h3>
       <rh-tab-panel>
         <div style="padding: var(--rh-space-lg);">
           <!-- Add Provider button -->
-          <div style="margin-bottom: var(--rh-space-md);">
+          <div style="margin-bottom: var(--rh-space-md); display: flex; justify-content: flex-end;">
             <span style="display: inline-block;"
                   :data-tip="configLocation === 'all' ? 'Switch to User or Workspace to add a new provider' : ''"
                   @mouseenter="configLocation === 'all' && showTip($el)"
@@ -899,7 +904,7 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
   <div class="modal-backdrop" x-show="wizardOpen" x-cloak @click.self="closeWizard()">
     <div class="modal" @click.stop>
       <div class="modal-header">
-        <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizardEditingModel ? 'Configure Model' : wizardEditMode ? (wizardStep === 2 ? 'Edit Provider' : 'Select Models') : (wizardStep === 1 ? 'Choose Engine' : wizardStep === 2 ? 'Configure Provider' : 'Select Models'))"></h2>
+        <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizardEditingModel ? 'Configure Model' : wizardEditMode ? (wizardStep === 2 ? 'Provider' : 'Select Models') : (wizardStep === 1 ? 'Choose Engine' : wizardStep === 2 ? 'Configure Provider' : 'Select Models'))"></h2>
         <div style="display: flex; align-items: center; gap: 16px;">
           <div class="step-indicators" x-show="!wizardFromModelsTab">
             <div class="step-dot" x-show="!wizardEditMode" :class="{ active: wizardStep === 1, completed: wizardStep > 1 }"></div>
@@ -980,6 +985,10 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
             <!-- ── View A: Dual-list model selector ── -->
             <template x-if="!wizardEditingModel">
               <div>
+                <div x-show="wizardModelSavedFlash" x-transition
+                     style="background: #e3f5e6; color: #1e7d32; border: 1px solid #a8dab5; padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; margin-bottom: 12px;">
+                  &#10003; Model configuration saved.
+                </div>
                 <div style="margin-bottom: 12px;">
                   <input type="text" placeholder="Search models..." x-model="wizardModelSearch" style="max-width: 300px;">
                 </div>
@@ -1009,7 +1018,7 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
                           <span x-show="cfg.temperature != null || cfg.top_p != null || cfg.system_prompt" 
                                 style="font-size: 0.65rem; color: #6a6e73;" title="Has custom parameters">&#9881;</span>
                           <button class="btn btn-secondary" style="padding: 2px 8px; font-size: 0.7rem;" 
-                                  @click="wizardEditingModel = name">Configure</button>
+                                  @click="startEditModel(name)">Configure</button>
                           <button class="btn btn-secondary" style="padding: 2px 8px; font-size: 0.7rem; color: #c9190b;" 
                                   @click="removeModel(name)">Remove</button>
                         </div>
@@ -1024,20 +1033,24 @@ <h2 x-text="wizardFromModelsTab ? 'Configure Model' : (wizardStep === 3 && wizar
             <template x-if="wizardEditingModel">
               <div>
                 <!-- Back navigation lives only in the footer (below) — no duplicate button here. -->
-                <div style="margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #d2d2d2;">
-                  <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: ' + wizardEditingModel"></h3>
+                <div style="margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid #d2d2d2;">
+                  <h3 style="margin: 0 0 4px; font-size: 1rem; font-weight: 600;" x-text="'Configure: ' + wizardEditingModel"></h3>
+                  <p style="margin: 0; font-size: 0.78rem; color: #6a6e73;">
+                    Everything below is optional — leave a field blank to fall back to the policy or engine default.
+                    Nothing here is written to disk until you click <strong>Save</strong>.
+                  </p>
                 </div>
 
-                <div x-data="{ get modelName() { return $data.wizardEditingModel }, get cfg() { return $data.wizardEnabledModels[$data.wizardEditingModel] || {} } }">
+                <div x-data="{ get modelName() { return $data.wizardEditingDraftName }, get cfg() { return $data.wizardEditingDraft || {} } }">
                   <!-- Identity -->
-                  <div class="param-row" style="margin-bottom: 16px;">
+                  <div class="param-row" style="margin: 16px 0;">
                     <div class="param-field" style="flex: 2;">
                       <div class="label-row">
-                        <label>Virtual Name</label>
+                        <label>Virtual Name <span style="color: #6a6e73; font-weight: 400;">(optional)</span></label>
                         <span class="info-tip" data-tip="A unique alias for this model within the provider. Customize it to reflect your configuration." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                       </div>
                       <input type="text" :value="modelName" 
-                             @change="renameModel(modelName, $event.target.value)"
+                             @input="wizardEditingDraftName = $event.target.value"
                              placeholder="Auto from model ID" style="font-family: 'Red Hat Mono', monospace;">
                     </div>
                     <div class="param-field" style="flex: 2;">
@@ -1045,15 +1058,15 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                         <label>Engine Model ID</label>
                         <span class="info-tip" data-tip="The actual model identifier sent to the engine API. This cannot be changed." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                       </div>
-                      <input type="text" :value="cfg.model_id || modelName" disabled 
+                      <input type="text" :value="cfg.model_id || $data.wizardEditingModel" disabled 
                              style="font-family: 'Red Hat Mono', monospace; background: #f0f0f0;">
                     </div>
                   </div>
 
                   <!-- Policy -->
-                  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
-                    <span style="font-size: 0.8rem; font-weight: 600; color: #6a6e73;">Policy:</span>
-                    <select :value="cfg.policy || ''" @change="setModelPolicy(modelName, $event.target.value)"
+                  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
+                    <span style="font-size: 0.8rem; font-weight: 600; color: #6a6e73;">Policy <span style="font-weight: 400;">(optional):</span></span>
+                    <select :value="cfg.policy || ''" @change="setDraftParam('policy', $event.target.value || undefined)"
                             style="width: auto; padding: 4px 8px; font-size: 0.85rem; border-radius: 3px; border: 1px solid #d2d2d2;">
                       <option value="">None (use defaults)</option>
                       <template x-for="pol in allPolicies" :key="pol.name">
@@ -1066,8 +1079,10 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                   </div>
 
                   <!-- Sampling Parameters -->
-                  <fieldset style="border: 1px solid #d2d2d2; border-radius: 4px; padding: 16px; margin-bottom: 16px;">
-                    <legend style="font-size: 0.85rem; font-weight: 600; padding: 0 8px;">Sampling Parameters</legend>
+                  <div style="margin-bottom: 20px;">
+                    <div style="font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6a6e73; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0;">
+                      Sampling Parameters <span style="text-transform: none; font-weight: 400;">— all optional</span>
+                    </div>
                     <div class="param-row">
                       <div class="param-field">
                         <div class="label-row">
@@ -1075,7 +1090,7 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                           <span class="info-tip" data-tip="Controls randomness: Lower (0.1) is focused and factual; Higher (0.8+) is creative and diverse." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                         </div>
                         <input type="number" min="0" max="2" step="0.1" :value="cfg.temperature" 
-                               @input="updateModelParam(modelName, 'temperature', $event.target.value ? parseFloat($event.target.value) : undefined)" 
+                               @input="setDraftParam('temperature', $event.target.value ? parseFloat($event.target.value) : undefined)" 
                                placeholder="engine default">
                       </div>
                       <div class="param-field">
@@ -1084,7 +1099,7 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                           <span class="info-tip" data-tip="Limits selection to the most likely tokens whose cumulative probability is P. Lower values are more precise." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                         </div>
                         <input type="number" min="0" max="1" step="0.05" :value="cfg.top_p" 
-                               @input="updateModelParam(modelName, 'top_p', $event.target.value ? parseFloat($event.target.value) : undefined)" 
+                               @input="setDraftParam('top_p', $event.target.value ? parseFloat($event.target.value) : undefined)" 
                                placeholder="engine default">
                       </div>
                       <div class="param-field">
@@ -1093,7 +1108,7 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                           <span class="info-tip" data-tip="Limits the model to considering only the top K most likely next tokens to prevent atypical word choices." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                         </div>
                         <input type="number" min="0" step="1" :value="cfg.top_k"
-                               @input="updateModelParam(modelName, 'top_k', $event.target.value ? parseInt($event.target.value) : undefined)" 
+                               @input="setDraftParam('top_k', $event.target.value ? parseInt($event.target.value) : undefined)" 
                                placeholder="engine default">
                       </div>
                     </div>
@@ -1104,7 +1119,7 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                           <span class="info-tip" data-tip="Sets the absolute maximum length of the generated response." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                         </div>
                         <input type="number" min="1" step="1" :value="cfg.max_tokens"
-                               @input="updateModelParam(modelName, 'max_tokens', $event.target.value ? parseInt($event.target.value) : undefined)" 
+                               @input="setDraftParam('max_tokens', $event.target.value ? parseInt($event.target.value) : undefined)" 
                                placeholder="engine default">
                       </div>
                       <div class="param-field">
@@ -1113,22 +1128,24 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                           <span class="info-tip" data-tip="The maximum time in milliseconds to wait for a response before the request is canceled." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                         </div>
                         <input type="number" min="0" step="1000" :value="cfg.timeout"
-                               @input="updateModelParam(modelName, 'timeout', $event.target.value ? parseInt($event.target.value) : undefined)" 
+                               @input="setDraftParam('timeout', $event.target.value ? parseInt($event.target.value) : undefined)" 
                                placeholder="engine default">
                       </div>
                     </div>
-                  </fieldset>
+                  </div>
 
                   <!-- System Prompt -->
-                  <fieldset style="border: 1px solid #d2d2d2; border-radius: 4px; padding: 16px; margin-bottom: 16px;">
-                    <legend style="font-size: 0.85rem; font-weight: 600; padding: 0 8px;">System Prompt</legend>
+                  <div style="margin-bottom: 20px;">
+                    <div style="font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6a6e73; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0;">
+                      System Prompt <span style="text-transform: none; font-weight: 400;">— optional</span>
+                    </div>
                     <div style="margin-bottom: 8px;">
                       <div class="label-row" style="margin-bottom: 4px;">
                         <label style="font-size: 0.8rem; font-weight: 500;">Prompt</label>
                         <span class="info-tip" data-tip="Sets the core persona and fundamental rules for the model to follow throughout the conversation." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                       </div>
                       <textarea :value="cfg.system_prompt || ''" rows="4"
-                                @input="updateModelParam(modelName, 'system_prompt', $event.target.value || undefined)"
+                                @input="setDraftParam('system_prompt', $event.target.value || undefined)"
                                 placeholder="Optional system prompt applied to every request using this model..."
                                 style="width: 100%; resize: vertical;"></textarea>
                     </div>
@@ -1138,22 +1155,24 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                         <span class="info-tip" data-tip="Prepend: inserted before the request's system message. Replace: overrides it entirely." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
                       </div>
                       <select :value="cfg.system_prompt_mode || 'prepend'" 
-                              @change="updateModelParam(modelName, 'system_prompt_mode', $event.target.value)"
+                              @change="setDraftParam('system_prompt_mode', $event.target.value)"
                               style="width: auto;">
                         <option value="prepend">Prepend</option>
                         <option value="replace">Replace</option>
                       </select>
                     </div>
-                  </fieldset>
+                  </div>
 
                   <!-- OpenAI-compatible /v1 tools (DR-032) -->
-                  <fieldset style="border: 1px solid #d2d2d2; border-radius: 4px; padding: 16px; margin-bottom: 16px;">
-                    <legend style="font-size: 0.85rem; font-weight: 600; padding: 0 8px;">OpenAI-compatible API</legend>
+                  <div style="margin-bottom: 8px;">
+                    <div style="font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6a6e73; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0;">
+                      OpenAI-compatible API <span style="text-transform: none; font-weight: 400;">— optional</span>
+                    </div>
                     <label style="display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; cursor: pointer;">
                       <input type="checkbox"
                              style="margin-top: 2px;"
                              :checked="cfg.openai_compat_tools === 'passthrough'"
-                             @change="updateModelParam(modelName, 'openai_compat_tools', $event.target.checked ? 'passthrough' : undefined)">
+                             @change="setDraftParam('openai_compat_tools', $event.target.checked ? 'passthrough' : undefined)">
                       <span>
                         <span style="font-weight: 500;">Allow OpenAI tools on /v1</span>
                         <span class="info-tip" data-tip="Checked: force tools passthrough for this model on /v1 (client executes tools; no Abbenay approval UI). Unchecked: clear the per-model override and inherit global openai_compat.tools — which defaults to off, but if global is passthrough this model stays enabled." @mouseenter="showTip($el)" @mouseleave="hideTip()"><span class="info-icon">i</span></span>
@@ -1162,7 +1181,7 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
                         </div>
                       </span>
                     </label>
-                  </fieldset>
+                  </div>
 
                   <!-- Add Variant removed — user can add same model again from Available list -->
                 </div>
@@ -1175,22 +1194,25 @@ <h3 style="margin: 0; font-size: 1rem; font-weight: 600;" x-text="'Configure: '
       <div class="modal-footer">
         <span style="font-size: 0.85rem; color: #6a6e73;" x-show="wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab"
               x-text="Object.keys(wizardEnabledModels).length + ' model(s) enabled'"></span>
-        <!-- Cancel / Back — kept apart from the primary action (margin-right:auto) so it can't be mis-clicked -->
+        <!-- Cancel / Discard — kept apart from the primary action (margin-right:auto) so it can't be mis-clicked -->
         <button class="btn btn-secondary footer-dismiss" 
-                @click="wizardFromModelsTab ? closeWizard() : (wizardEditingModel ? (wizardEditingModel = null) : closeWizard())" 
-                x-text="wizardFromModelsTab ? 'Cancel' : (wizardEditingModel ? '← Back to models' : 'Cancel')"></button>
+                @click="wizardFromModelsTab ? closeWizard() : (wizardEditingModel ? cancelEditModel() : closeWizard())" 
+                x-text="wizardEditingModel ? 'Discard changes' : 'Cancel'"></button>
         <!-- Back (step navigation) — hidden when from Models tab -->
         <button class="btn btn-secondary" x-show="!wizardFromModelsTab && wizardStep > 1 && !(wizardEditMode && wizardStep === 2) && !wizardEditingModel" @click="wizardStep--">Back</button>
         <!-- Next — only step 2 needs it now; step 1 (single-select engine tiles) advances on click -->
         <button class="btn btn-primary" x-show="!wizardFromModelsTab && wizardStep === 2 && !wizardEditingModel" @click="wizardNext()" 
                 :disabled="!wizardName">Next</button>
-        <!-- Save — show in wizard flow (step 3, not editing model) OR from Models tab when editing a model -->
-        <button class="btn btn-primary" x-show="(wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab) || (wizardFromModelsTab && wizardEditingModel)" @click="wizardSave()">Save</button>
+        <!-- Save model config & return to the dual-list, from within the Add/Provider wizard -->
+        <button class="btn btn-primary" x-show="wizardEditingModel && !wizardFromModelsTab" @click="saveEditModel()">Save &amp; back to models</button>
+        <!-- Save — persists to disk: wizard flow (step 3, not editing model) OR from Models tab when editing a model -->
+        <button class="btn btn-primary" x-show="(wizardStep === 3 && !wizardEditingModel && !wizardFromModelsTab) || (wizardFromModelsTab && wizardEditingModel)" 
+                @click="wizardFromModelsTab ? saveModelAndPersist() : wizardSave()">Save</button>
       </div>
     </div>
   </div>
 
-  <!-- Edit Provider and Model Selector modals removed — "Edit" button reuses the wizard at step 2 -->
+  <!-- Provider and Model Selector modals removed — "Edit" button reuses the wizard at step 2 -->
 
   <!-- ═══════════ POLICY EDITOR MODAL ═══════════ -->
   <template x-if="editingPolicy">
@@ -1491,7 +1513,10 @@ <h3>Save config to</h3>
     wizardModelSearch: '',
     wizardDiscoveredModels: [],
     wizardEnabledModels: {},   // { modelName: { model_id?, temperature?, ... } }
-    wizardEditingModel: null,
+    wizardEditingModel: null,      // original (immutable) key of the model currently being configured
+    wizardEditingDraft: null,      // scratch copy of that model's config — edits land here until explicitly saved
+    wizardEditingDraftName: '',    // scratch copy of the virtual name — renamed only on save
+    wizardModelSavedFlash: false,  // brief "saved" confirmation shown after returning to the model list
     
     // ── Edit mode (reuses wizard) ──
     wizardEditMode: false,    // true when editing existing provider (vs creating new)
@@ -1759,6 +1784,8 @@ <h3>Save config to</h3>
       this.wizardOpen = false;
       this.wizardFromModelsTab = false;
       this.wizardEditingModel = null;
+      this.wizardEditingDraft = null;
+      this.wizardEditingDraftName = '';
     },
     
     /** Step 1 is a single-select — choosing an engine advances immediately, no separate Next click. */
@@ -1773,7 +1800,7 @@ <h3>Save config to</h3>
       // Jump directly to step 3 model config view
       this.wizardStep = 3;
       // The model's virtual name is model.name; find it in the enabled models
-      this.wizardEditingModel = model.name;
+      this.startEditModel(model.name);
       this.wizardFromModelsTab = true;
       // Discover models so the dual-list has data if user clicks "Back to models"
       try {
@@ -1929,6 +1956,61 @@ <h3>Save config to</h3>
     
     // (presets replaced by policy system)
     
+    // ── Model config draft (edit-then-commit so "back"/"cancel" can discard cleanly) ──
+    
+    /** Opens the full-width config view for a model, working on a scratch copy so nothing is applied until Save. */
+    startEditModel(name) {
+      this.wizardEditingModel = name;
+      this.wizardEditingDraftName = name;
+      this.wizardEditingDraft = JSON.parse(JSON.stringify(this.wizardEnabledModels[name] || {}));
+    },
+    
+    /** Sets/clears one field on the in-progress draft only — wizardEnabledModels is untouched until saveEditModel(). */
+    setDraftParam(param, value) {
+      if (!this.wizardEditingDraft) return;
+      if (value === undefined || value === '') {
+        delete this.wizardEditingDraft[param];
+      } else {
+        this.wizardEditingDraft[param] = value;
+      }
+      this.wizardEditingDraft = { ...this.wizardEditingDraft };
+    },
+    
+    /** Leaves the config view without applying any edits made since startEditModel(). */
+    cancelEditModel() {
+      this.wizardEditingModel = null;
+      this.wizardEditingDraft = null;
+      this.wizardEditingDraftName = '';
+    },
+    
+    /** Commits the draft into wizardEnabledModels and returns to the model list with a brief confirmation. */
+    saveEditModel() {
+      const oldName = this.wizardEditingModel;
+      if (!oldName) return;
+      const draft = this.wizardEditingDraft || {};
+      let newName = (this.wizardEditingDraftName || '').trim() || oldName;
+      if (newName !== oldName && this.wizardEnabledModels[newName]) {
+        newName = oldName; // avoid clobbering an existing entry — keep original name
+      }
+      if (newName !== oldName && !draft.model_id) {
+        draft.model_id = oldName;
+      }
+      if (newName !== oldName) delete this.wizardEnabledModels[oldName];
+      this.wizardEnabledModels[newName] = draft;
+      this.wizardEnabledModels = { ...this.wizardEnabledModels };
+      this.wizardEditingModel = null;
+      this.wizardEditingDraft = null;
+      this.wizardEditingDraftName = '';
+      this.wizardModelSavedFlash = true;
+      setTimeout(() => { this.wizardModelSavedFlash = false; }, 2500);
+    },
+    
+    /** Used when the config view was opened directly from the Models tab: commit the draft, then persist to disk and close. */
+    async saveModelAndPersist() {
+      this.saveEditModel();
+      await this.wizardSave();
+    },
+    
     renameModel(oldName, newName) {
       if (!newName || newName === oldName || this.wizardEnabledModels[newName]) return;
       const cfg = this.wizardEnabledModels[oldName];
@@ -1953,7 +2035,7 @@ <h3>Save config to</h3>
       this.wizardEditingModel = newName;
     },
     
-    // Edit Provider and Model Selector functions removed — "Edit" reuses the wizard
+    // Provider and Model Selector functions removed — "Edit" reuses the wizard
     
     // ── Delete provider ──
     async deleteProvider(provId) {

From 0fc1c40f4c38fcc34acf87972484fc5aa3dad603 Mon Sep 17 00:00:00 2001
From: Sudhir Verma <9924513+sudhirverma@users.noreply.github.com>
Date: Wed, 5 Aug 2026 00:48:36 +0530
Subject: [PATCH 3/4] feat(daemon): add MCP server add/edit/delete UI, fix
 stale status on sync

Dashboard MCP Servers tab only let you edit enabled state; adding/removing
a server required hand-editing config.yaml. Add a modal (mirrors the
Add Provider flow) for creating, editing, and deleting mcp_servers entries.

Also fixes McpClientPool.syncWithConfig: a server whose connect attempt
failed was tracked in `statuses` but never added to `clients`, so removing
it from config left a stale error row forever since sync only reconciled
against `clients`. Reconcile against the union of both instead.
---
 .../daemon/src/daemon/mcp-client-pool.test.ts |  11 ++
 packages/daemon/src/daemon/mcp-client-pool.ts |   5 +-
 packages/daemon/static/index.html             | 182 +++++++++++++++++-
 3 files changed, 192 insertions(+), 6 deletions(-)

diff --git a/packages/daemon/src/daemon/mcp-client-pool.test.ts b/packages/daemon/src/daemon/mcp-client-pool.test.ts
index a88f8e9..cacc3e5 100644
--- a/packages/daemon/src/daemon/mcp-client-pool.test.ts
+++ b/packages/daemon/src/daemon/mcp-client-pool.test.ts
@@ -414,6 +414,17 @@ describe('syncWithConfig', () => {
     await pool.syncWithConfig({});
     expect(pool.getStatus('dyn')?.connected).toBe(true);
   });
+
+  it('should drop a server whose only connection attempt failed once removed from config', async () => {
+    mockCreateMCPClient.mockRejectedValueOnce(new Error('connection closed'));
+    await pool.connect('bad', { transport: 'stdio', command: 'bad', enabled: true }).catch(() => {});
+    // Status exists (with error) even though it never made it into `clients`.
+    expect(pool.getStatus('bad')?.error).toBeTruthy();
+
+    await pool.syncWithConfig({});
+
+    expect(pool.getStatus('bad')).toBeUndefined();
+  });
 });
 
 // ── getStatuses ───────────────────────────────────────────────────────────
diff --git a/packages/daemon/src/daemon/mcp-client-pool.ts b/packages/daemon/src/daemon/mcp-client-pool.ts
index 236670e..4adf353 100644
--- a/packages/daemon/src/daemon/mcp-client-pool.ts
+++ b/packages/daemon/src/daemon/mcp-client-pool.ts
@@ -525,7 +525,10 @@ export class McpClientPool {
    */
   async syncWithConfig(configs: Record<string, McpServerConfig>): Promise<void> {
     const newIds = new Set(Object.keys(configs));
-    const currentIds = new Set(this.clients.keys());
+    // Union of connected clients and tracked statuses — a server whose last
+    // connect attempt failed has a status entry but no client, and must still
+    // be reconciled (and dropped) when removed from config.
+    const currentIds = new Set([...this.clients.keys(), ...this.statuses.keys()]);
 
     // Disconnect removed config-based servers (skip dynamic)
     for (const id of currentIds) {
diff --git a/packages/daemon/static/index.html b/packages/daemon/static/index.html
index d609afa..4b3e179 100644
--- a/packages/daemon/static/index.html
+++ b/packages/daemon/static/index.html
@@ -586,11 +586,15 @@ <h3>Tools</h3>
         <div style="padding: var(--rh-space-lg);">
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rh-space-md);">
             <p style="margin: 0; color: #6a6e73; font-size: 0.85rem;">
-              MCP servers provide tools to the LLM. Configure them in <code>~/.config/abbenay/config.yaml</code> under <code>mcp_servers</code>.
+              MCP servers provide tools to the LLM. They are unrelated to Providers/Models (which are LLM inference backends) —
+              MCP servers register <em>tools</em> the LLM can call, independent of which model answers.
               Tools invoked via Abbenay's <code>/mcp</code> endpoint use the same approval policy as chat.
               Dynamic stdio registration requires an allowlisted binary and your approval before any process is spawned.
             </p>
-            <button class="btn btn-secondary btn-sm" @click="loadMcpServers(); loadMcpApprovals(); loadMcpConnections(); loadMcpStdioSpawns()">Refresh</button>
+            <div style="display: flex; gap: 8px; flex-shrink: 0;">
+              <button class="btn btn-primary btn-sm" @click="openNewMcpServer()">+ Add MCP Server</button>
+              <button class="btn btn-secondary btn-sm" @click="loadMcpServers(); loadMcpApprovals(); loadMcpConnections(); loadMcpStdioSpawns()">Refresh</button>
+            </div>
           </div>
 
           <template x-if="pendingStdioSpawns.length > 0">
@@ -698,7 +702,7 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
           <template x-if="mcpServers.length === 0">
             <div class="empty-state">
               <p>No MCP servers configured.</p>
-              <p style="font-size: 0.85rem; color: #6a6e73;">Add servers to your config under <code>mcp_servers:</code></p>
+              <p style="font-size: 0.85rem; color: #6a6e73;">Click "Add MCP Server" above, or add an entry directly under <code>mcp_servers:</code> in <code>~/.config/abbenay/config.yaml</code>.</p>
             </div>
           </template>
 
@@ -733,9 +737,11 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
                                style="width: auto; accent-color: #3e8635;">
                       </label>
                     </td>
-                    <td style="padding: 0.5rem 0.5rem; text-align: center;">
+                    <td style="padding: 0.5rem 0.5rem; text-align: center; white-space: nowrap;">
                       <button class="btn btn-secondary btn-sm" @click="reconnectMcpServer(srv.id)"
                               :disabled="srv.status === 'connected'" title="Reconnect">Reconnect</button>
+                      <button class="btn btn-secondary btn-sm" @click="openEditMcpServer(srv.id)" title="Edit">Edit</button>
+                      <button class="btn btn-danger btn-sm" @click="deleteMcpServer(srv.id)" title="Delete">Delete</button>
                     </td>
                   </tr>
                 </template>
@@ -1375,6 +1381,76 @@ <h2 x-text="editingPolicy.isNew ? 'New Policy' : ('Edit Policy: ' + editingPolic
   </div>
   </template>
 
+  <!-- ═══════════ MCP SERVER MODAL ═══════════ -->
+  <template x-if="editingMcpServer">
+  <div class="modal-backdrop" x-show="editingMcpServer" x-cloak @click.self="cancelEditMcpServer()">
+    <div class="modal" @click.stop style="max-width: 640px;">
+      <div class="modal-header">
+        <h2 x-text="editingMcpServer.isNew ? 'Add MCP Server' : ('Edit MCP Server: ' + editingMcpServer.id)"></h2>
+        <button style="background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #6a6e73;" @click="cancelEditMcpServer()">&times;</button>
+      </div>
+      <div class="modal-body" style="padding: 24px;">
+        <div style="margin-bottom: 16px;">
+          <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Server ID</label>
+          <input type="text" x-model="editingMcpServer.id" :disabled="!editingMcpServer.isNew"
+                 placeholder="github" style="width: 100%;"
+                 :style="!editingMcpServer.isNew ? 'background: #f0f0f0; cursor: not-allowed;' : ''">
+        </div>
+
+        <div style="margin-bottom: 16px;">
+          <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Transport</label>
+          <select x-model="editingMcpServer.transport" style="width: 100%;">
+            <option value="stdio">stdio (local process)</option>
+            <option value="http">http (Streamable HTTP)</option>
+            <option value="sse">sse (legacy SSE)</option>
+          </select>
+        </div>
+
+        <template x-if="editingMcpServer.transport === 'stdio'">
+          <div>
+            <div style="margin-bottom: 16px;">
+              <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Command</label>
+              <input type="text" x-model="editingMcpServer.command" placeholder="npx" style="width: 100%;">
+            </div>
+            <div style="margin-bottom: 16px;">
+              <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Arguments (one per line)</label>
+              <textarea x-model="editingMcpServer.argsText" rows="3" placeholder="-y&#10;@modelcontextprotocol/server-github" style="width: 100%;"></textarea>
+            </div>
+            <div style="margin-bottom: 16px;">
+              <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Environment variables (KEY=value, one per line)</label>
+              <textarea x-model="editingMcpServer.envText" rows="2" placeholder="GITHUB_TOKEN=xxx" style="width: 100%;"></textarea>
+            </div>
+          </div>
+        </template>
+
+        <template x-if="editingMcpServer.transport !== 'stdio'">
+          <div>
+            <div style="margin-bottom: 16px;">
+              <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">URL</label>
+              <input type="text" x-model="editingMcpServer.url" placeholder="https://mcp.example.com" style="width: 100%;">
+            </div>
+            <div style="margin-bottom: 16px;">
+              <label style="font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px;">Headers (Key: value, one per line)</label>
+              <textarea x-model="editingMcpServer.headersText" rows="2" placeholder="Authorization: Bearer tok" style="width: 100%;"></textarea>
+            </div>
+          </div>
+        </template>
+
+        <div style="margin-bottom: 4px;">
+          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+            <input type="checkbox" x-model="editingMcpServer.enabled" style="width: auto;">
+            <span style="font-size: 0.85rem; font-weight: 600;">Enabled</span>
+          </label>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary footer-dismiss" @click="cancelEditMcpServer()">Cancel</button>
+        <button class="btn btn-primary" @click="saveEditingMcpServer()">Save</button>
+      </div>
+    </div>
+  </div>
+  </template>
+
   <!-- ═══════════ CONFIG LOCATION MODAL ═══════════ -->
   <div class="modal-backdrop" x-show="showConfigModal" x-cloak @click.self="showConfigModal = false"
        style="z-index: 1100;">
@@ -1479,6 +1555,7 @@ <h3>Save config to</h3>
     
     // MCP Servers
     mcpServers: [],
+    editingMcpServer: null,  // { id, isNew, transport, command, argsText, url, headersText, envText, enabled }
     pendingMcpApprovals: [],
     pendingMcpConnections: [],
     pendingStdioSpawns: [],
@@ -2176,7 +2253,102 @@ <h3>Save config to</h3>
         }
       } catch (e) { console.error('Toggle MCP server failed:', e); }
     },
-    
+
+    // ── Add/Edit/Delete MCP Server ──
+    openNewMcpServer() {
+      this.editingMcpServer = {
+        id: '', isNew: true, transport: 'stdio',
+        command: '', argsText: '', envText: '',
+        url: '', headersText: '', enabled: true,
+      };
+    },
+
+    async openEditMcpServer(serverId) {
+      try {
+        const resp = await apiFetch('/api/config?location=user');
+        const data = await resp.json();
+        const cfg = (data.config?.mcp_servers || {})[serverId] || {};
+        this.editingMcpServer = {
+          id: serverId, isNew: false,
+          transport: cfg.transport || 'stdio',
+          command: cfg.command || '',
+          argsText: (cfg.args || []).join('\n'),
+          envText: Object.entries(cfg.env || {}).map(([k, v]) => `${k}=${v}`).join('\n'),
+          url: cfg.url || '',
+          headersText: Object.entries(cfg.headers || {}).map(([k, v]) => `${k}: ${v}`).join('\n'),
+          enabled: cfg.enabled !== false,
+        };
+      } catch (e) { console.error('Failed to load MCP server config:', e); }
+    },
+
+    cancelEditMcpServer() {
+      this.editingMcpServer = null;
+    },
+
+    async saveEditingMcpServer() {
+      const m = this.editingMcpServer;
+      if (!m) return;
+      const id = (m.id || '').trim();
+      if (!id) { alert('Server ID is required.'); return; }
+
+      const entry = { transport: m.transport, enabled: !!m.enabled };
+      if (m.transport === 'stdio') {
+        if (!m.command.trim()) { alert('Command is required for stdio transport.'); return; }
+        entry.command = m.command.trim();
+        const args = m.argsText.split('\n').map(s => s.trim()).filter(Boolean);
+        if (args.length) entry.args = args;
+        const env = {};
+        for (const line of m.envText.split('\n')) {
+          const idx = line.indexOf('=');
+          if (idx > 0) env[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+        }
+        if (Object.keys(env).length) entry.env = env;
+      } else {
+        if (!m.url.trim()) { alert('URL is required for http/sse transport.'); return; }
+        entry.url = m.url.trim();
+        const headers = {};
+        for (const line of m.headersText.split('\n')) {
+          const idx = line.indexOf(':');
+          if (idx > 0) headers[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+        }
+        if (Object.keys(headers).length) entry.headers = headers;
+      }
+
+      try {
+        const resp = await apiFetch('/api/config?location=user');
+        const data = await resp.json();
+        const config = data.config || {};
+        config.mcp_servers = config.mcp_servers || {};
+        if (!m.isNew && m.id !== id) delete config.mcp_servers[m.id];
+        config.mcp_servers[id] = entry;
+        await apiFetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ location: 'user', config }),
+        });
+        this.editingMcpServer = null;
+        await this.loadMcpServers();
+        await this.loadTools();
+      } catch (e) { console.error('Failed to save MCP server:', e); alert('Failed to save MCP server.'); }
+    },
+
+    async deleteMcpServer(serverId) {
+      if (!confirm(`Delete MCP server "${serverId}"?`)) return;
+      try {
+        const resp = await apiFetch('/api/config?location=user');
+        const data = await resp.json();
+        const config = data.config || {};
+        if (config.mcp_servers) delete config.mcp_servers[serverId];
+        await apiFetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ location: 'user', config }),
+        });
+        await this.loadMcpServers();
+        await this.loadTools();
+      } catch (e) { console.error('Failed to delete MCP server:', e); }
+    },
+
     // ── Tools ──
     async loadTools() {
       try {

From f09655e182b97cfc66fd4a1327ab5d0037d54673 Mon Sep 17 00:00:00 2001
From: Sudhir Verma <9924513+sudhirverma@users.noreply.github.com>
Date: Wed, 5 Aug 2026 00:55:27 +0530
Subject: [PATCH 4/4] fix(daemon): clarify Tools tab purpose and empty state

Explain what tools are, where they come from, and give clearer next steps when none are registered.
---
 packages/daemon/static/index.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/daemon/static/index.html b/packages/daemon/static/index.html
index 4b3e179..045db13 100644
--- a/packages/daemon/static/index.html
+++ b/packages/daemon/static/index.html
@@ -834,6 +834,11 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
       <rh-tab slot="tab">Tools</rh-tab>
       <rh-tab-panel>
         <div style="padding: var(--rh-space-lg);">
+          <p style="margin: 0 0 var(--rh-space-md); color: #6a6e73; font-size: 0.85rem;">
+            Tools are functions the LLM can call during a chat — e.g. reading a file, running a search, or querying an API.
+            They are registered by MCP servers (see the <strong>MCP Servers</strong> tab) or by editors like VS Code that connect
+            to Abbenay. Each tool's approval policy below controls whether it runs automatically, asks you first, or is disabled.
+          </p>
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rh-space-md);">
             <div style="display: flex; align-items: center; gap: 12px;">
               <p style="margin: 0; color: #6a6e73; font-size: 0.85rem;">
@@ -857,7 +862,19 @@ <h3 style="margin: 0 0 0.75rem; font-size: 1rem;">Pending MCP tool approvals</h3
           </div>
 
           <template x-if="allTools.length === 0">
-            <div class="empty-state"><p>No tools registered. Connect VS Code or configure MCP servers to see tools.</p></div>
+            <div class="empty-state">
+              <p style="margin: 0 0 0.5rem; font-weight: 600;">No tools registered yet</p>
+              <p style="margin: 0 0 0.75rem; color: #6a6e73;">
+                Tools show up here once something registers them with Abbenay. You have two options:
+              </p>
+              <ul style="display: inline-block; text-align: left; margin: 0 0 1rem; color: #6a6e73; font-size: 0.85rem;">
+                <li>Add an MCP server in the <strong>MCP Servers</strong> tab (each server exposes its own tools), or</li>
+                <li>Connect an editor like VS Code to Abbenay, which registers its built-in tools automatically.</li>
+              </ul>
+              <div>
+                <button class="btn btn-primary btn-sm" @click="document.querySelectorAll('rh-tab')[3]?.click()">Go to MCP Servers</button>
+              </div>
+            </div>
           </template>
 
           <template x-if="allTools.length > 0">