@luckydraw/cumulus 1.0.10 → 1.0.12

package/dist/gateway/static/widget.js

@@ -50,10 +50,40 @@
   // Claude CLI variants and direct API models have different runtime contracts,
   // but the UI presents them as one provider-facing catalog. Keep these transforms
   // pure so their losslessness/default rules can be regression-tested directly.
+  // Task 147: a model entry's provider is `custom:<id>` when it runs on a
+  // user-registered OpenAI-compatible endpoint. The catalog carries that string
+  // verbatim so a round-trip can never silently re-home a model onto one of the
+  // three built-in providers.
+  function isCustomProvider(provider) {
+    return typeof provider === 'string' && provider.indexOf('custom:') === 0;
+  }
+
+  // Derive a registry id from a display name. Must satisfy the SAME shape the
+  // gateway validates ([a-z0-9][a-z0-9_-]*), or the provider is dropped on save
+  // and its models silently fall back to the Claude path.
+  function slugifyProviderId(label) {
+    var slug = String(label || '')
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]+/g, '-')
+      .replace(/^-+/, '')
+      .replace(/-+$/, '');
+    return slug;
+  }
+
   function gatewayConfigToModelCatalog(config) {
     config = config || {};
     var topModels = Array.isArray(config.models) ? config.models : [];
     var claudeModels = Array.isArray(config.claudeModels) ? config.claudeModels : [];
+    var customProviders = (Array.isArray(config.customProviders) ? config.customProviders : []).map(
+      function (provider) {
+        return {
+          id: String(provider.id || ''),
+          label: String(provider.label || provider.id || ''),
+          baseUrl: String(provider.baseUrl || ''),
+          maskedKey: String(provider.apiKey || ''),
+        };
+      }
+    );
     var sentinel = topModels.find(function (model) {
       return model.id === 'claude' || model.provider === 'claude-cli';
     }) || { id: 'claude', label: 'Claude (CLI)', provider: 'claude-cli' };
@@ -81,7 +111,11 @@
       catalog.push({
         id: model.id,
         label: model.label || model.name || model.id,
-        provider: model.provider === 'openai' ? 'openai' : 'huggingface',
+        provider: isCustomProvider(model.provider)
+          ? model.provider
+          : model.provider === 'openai'
+            ? 'openai'
+            : 'huggingface',
         contextWindow: typeof model.contextWindow === 'number' ? model.contextWindow : undefined,
         gatewayDefault: globalDefault === model.id,
         providerDefault: false,
@@ -96,7 +130,11 @@
     ) {
       catalog[0].gatewayDefault = true;
     }
-    return { catalog: catalog, sentinel: Object.assign({}, sentinel) };
+    return {
+      catalog: catalog,
+      sentinel: Object.assign({}, sentinel),
+      customProviders: customProviders,
+    };
   }
 
   function modelCatalogToGatewayConfig(state) {
@@ -137,7 +175,11 @@
         var entry = Object.assign({}, model.source || {});
         entry.id = model.id;
         entry.label = model.label || model.id;
-        entry.provider = model.provider === 'openai' ? 'openai' : 'huggingface';
+        entry.provider = isCustomProvider(model.provider)
+          ? model.provider
+          : model.provider === 'openai'
+            ? 'openai'
+            : 'huggingface';
         delete entry.default;
         if (typeof model.contextWindow === 'number' && model.contextWindow > 0) {
           entry.contextWindow = model.contextWindow;
@@ -150,13 +192,38 @@
       models: [sentinel].concat(directModels),
       claudeModels: claudeModels,
       model: selected && selected.provider !== 'anthropic' ? selected.id : 'claude',
+      // Registry travels without credentials — addCredentialPatch fills those
+      // in, so an untouched key round-trips as absent and the server preserves it.
+      customProviders: (Array.isArray(state.customProviders) ? state.customProviders : []).map(
+        function (provider) {
+          return {
+            id: provider.id,
+            label: provider.label || provider.id,
+            baseUrl: provider.baseUrl,
+          };
+        }
+      ),
     };
   }
 
-  function validateModelCatalog(catalog) {
+  // Task 147. `customProviders` is optional: when supplied, a model referencing
+  // a provider that is not in the registry is rejected here rather than saved —
+  // the gateway resolves an orphaned `custom:<id>` fail-closed to the Claude
+  // path, so the model would silently run somewhere else instead of erroring.
+  function validateModelCatalog(catalog, customProviders) {
+    var known = null;
+    if (Array.isArray(customProviders)) {
+      known = {};
+      customProviders.forEach(function (provider) {
+        known['custom:' + provider.id] = true;
+      });
+    }
     var seen = { claude: true };
     for (var i = 0; i < catalog.length; i++) {
       var model = catalog[i];
+      if (known && isCustomProvider(model.provider) && !known[model.provider]) {
+        return 'Unknown provider for ' + (model.id || 'model') + ': ' + model.provider;
+      }
       model.id = String(model.id || '').trim();
       model.label = String(model.label || model.id).trim() || model.id;
       if (!model.id) return 'Every model needs an ID';
@@ -173,6 +240,23 @@
     return '';
   }
 
+  /** Task 147: registry-level validation, mirroring the gateway's own rules. */
+  function validateCustomProviderList(customProviders) {
+    var seen = {};
+    for (var i = 0; i < customProviders.length; i++) {
+      var provider = customProviders[i];
+      var id = String(provider.id || '').trim();
+      var baseUrl = String(provider.baseUrl || '').trim();
+      if (!id) return 'Every custom provider needs a name';
+      if (seen[id]) return 'Duplicate custom provider: ' + id;
+      seen[id] = true;
+      if (!/^https?:\/\/\S+$/.test(baseUrl)) {
+        return 'Base URL for ' + (provider.label || id) + ' must start with http:// or https://';
+      }
+    }
+    return '';
+  }
+
   function addCredentialPatch(payload, credentials) {
     [
       { provider: 'openai', key: 'openaiApiKey' },
@@ -184,6 +268,15 @@
       if (credential.clear) payload[entry.key] = null;
       else if (value && value.indexOf('•') === -1) payload[entry.key] = value;
     });
+    // Custom providers carry their own credential inside the registry entry
+    // (task 147), keyed in the same credential maps by `custom:<id>`. Same rule
+    // as the scalars above: null clears, a real value sets, absent preserves.
+    (payload.customProviders || []).forEach(function (provider) {
+      var credential = credentials['custom:' + provider.id] || {};
+      var value = String(credential.value || '').trim();
+      if (credential.clear) provider.apiKey = null;
+      else if (value && value.indexOf('•') === -1) provider.apiKey = value;
+    });
     return payload;
   }
 
@@ -1098,6 +1191,29 @@
     '  flex: 1; overflow: hidden;',
     '  text-overflow: ellipsis; white-space: nowrap;',
     '}',
+    /* Activity dots (task 146) — a thread is running a turn right now. Sits
+       AFTER the name rather than replacing the status dot on the left, which
+       already carries unread/active/inactive; overloading it would cost the
+       unread signal exactly when a thread is working. */
+    '.cumulus-thread-activity {',
+    '  display: flex; align-items: center; gap: 3px;',
+    '  flex-shrink: 0; margin-left: 4px;',
+    '}',
+    '.cumulus-thread-activity span {',
+    '  width: 4px; height: 4px; border-radius: 50%;',
+    '  background: #22c55e;',
+    '  animation: cumulus-thread-pulse 1.2s ease-in-out infinite;',
+    '}',
+    '.cumulus-thread-activity span:nth-child(2) { animation-delay: 0.2s; }',
+    '.cumulus-thread-activity span:nth-child(3) { animation-delay: 0.4s; }',
+    '@keyframes cumulus-thread-pulse {',
+    '  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }',
+    '  40% { opacity: 1; transform: scale(1); }',
+    '}',
+    /* Honour a reduced-motion preference: keep the signal, drop the movement. */
+    '@media (prefers-reduced-motion: reduce) {',
+    '  .cumulus-thread-activity span { animation: none; opacity: 0.9; }',
+    '}',
     /* Disclosure triangle. Always occupies its slot (even when empty) so
        sibling names stay aligned; only the with-children state is clickable. */
     '.cumulus-thread-twisty {',
@@ -1538,6 +1654,13 @@
     '  display: grid; grid-template-columns: 120px minmax(0,1fr) auto; align-items: center; gap: 10px;',
     '  padding: 11px 14px; background: #1b1c1f; border-top: 1px solid #2a2b30;',
     '}',
+    // Task 147: same band as the credential row, above the model list, so a
+    // custom provider's endpoint reads as part of the provider, not a model.
+    '.cumulus-settings-provider-endpoint {',
+    '  display: grid; grid-template-columns: 120px minmax(0,1fr) auto; align-items: center; gap: 10px;',
+    '  padding: 10px 14px; background: #1b1c1f; border-top: 1px solid #2a2b30;',
+    '}',
+    '.cumulus-settings-provider-endpoint label { color: #9a9da5; font-size: 11.5px; }',
     '.cumulus-settings-credential-note {',
     '  color: #7d808a; font-size: 11.5px; padding: 11px 14px; background: #1b1c1f; border-top: 1px solid #2a2b30;',
     '}',
@@ -1596,6 +1719,8 @@
     '  .cumulus-settings-add-row .cumulus-settings-add-btn { grid-column: 1 / -1; }',
     '  .cumulus-settings-provider-credential { grid-template-columns: 1fr auto; gap: 5px; }',
     '  .cumulus-settings-provider-credential label { grid-column: 1 / -1; }',
+    '  .cumulus-settings-provider-endpoint { grid-template-columns: 1fr auto; gap: 5px; }',
+    '  .cumulus-settings-provider-endpoint label { grid-column: 1 / -1; }',
     '  .cumulus-settings-default-card { flex-direction: column; align-items: stretch; gap: 6px; }',
     '  .cumulus-settings-edit-grid { grid-template-columns: 1fr 1fr; }',
     '}',
@@ -4579,6 +4704,15 @@
     // Unread threads: threadName -> true
     var unreadThreads = {};
 
+    // Threads running a turn right now: threadName -> true (task 146).
+    //
+    // Live state rather than a field read off `allThreads`, because the listing
+    // is a snapshot: it seeds this map on arrival, and `thread_activity` pushes
+    // keep it current between listings. The SERVER is the single authority — the
+    // sidebar deliberately does not also infer activity from its own token
+    // stream, or the two disagree about a thread another tab is driving.
+    var busyThreads = {};
+
     // Currently visible panel names (ordered, max 3)
     var visibleThreads = [];
 
@@ -5264,6 +5398,22 @@
         item.appendChild(folderEl);
       }
 
+      // Running a turn right now (task 146). Keyed on the live map, not on
+      // `thread.busy`, so a push that arrived after the last listing still shows.
+      //
+      // Appended LAST, after the folder icon, because this element comes and
+      // goes: putting it before a static sibling would shove that sibling
+      // sideways every time a thread starts or stops working.
+      if (busyThreads[name]) {
+        var activity = document.createElement('span');
+        activity.className = 'cumulus-thread-activity';
+        activity.setAttribute('data-testid', 'webchat-thread-activity');
+        activity.setAttribute('title', 'Working…');
+        activity.setAttribute('aria-label', 'Working');
+        for (var d = 0; d < 3; d++) activity.appendChild(document.createElement('span'));
+        item.appendChild(activity);
+      }
+
       // Right-click context menu
       item.addEventListener('contextmenu', function (e) {
         e.preventDefault();
@@ -6344,16 +6494,8 @@
       var addProvider = document.createElement('select');
       addProvider.className = 'cumulus-settings-select';
       addProvider.setAttribute('data-testid', 'webchat-gw-add-provider');
-      [
-        { value: 'anthropic', label: 'Anthropic' },
-        { value: 'openai', label: 'OpenAI' },
-        { value: 'huggingface', label: 'HuggingFace' },
-      ].forEach(function (provider) {
-        var option = document.createElement('option');
-        option.value = provider.value;
-        option.textContent = provider.label;
-        addProvider.appendChild(option);
-      });
+      // Options are built by renderAddProviderOptions() from providerDefs — the
+      // one list that also drives the cards and the default dropdown (task 147).
       var addId = document.createElement('input');
       addId.type = 'text';
       addId.className = 'cumulus-settings-input';
@@ -6384,6 +6526,51 @@
       addCard.appendChild(addWrap);
       body.appendChild(addCard);
 
+      // ── Custom OpenAI-compatible providers (task 147) ────────────────────────
+      // One mechanism for every third-party host that speaks chat/completions:
+      // Vultr, Together, Groq, Fireworks, vLLM, LM Studio, Ollama. Each carries
+      // its own credential — the OpenAI/HuggingFace keys belong to those hosts.
+      var customCard = document.createElement('div');
+      customCard.className = 'cumulus-settings-add-card';
+      var customTitle = document.createElement('div');
+      customTitle.className = 'cumulus-settings-add-title';
+      customTitle.textContent = 'Add a custom provider';
+      customCard.appendChild(customTitle);
+      var customHint = document.createElement('div');
+      customHint.className = 'cumulus-settings-subtitle';
+      customHint.textContent =
+        'Any OpenAI-compatible endpoint. Paste the base URL from its docs — /chat/completions is added if missing.';
+      customCard.appendChild(customHint);
+      var customWrap = document.createElement('div');
+      customWrap.className = 'cumulus-settings-add-row';
+      var customLabelInput = document.createElement('input');
+      customLabelInput.type = 'text';
+      customLabelInput.className = 'cumulus-settings-input';
+      customLabelInput.placeholder = 'Name (e.g. Vultr)';
+      customLabelInput.setAttribute('data-testid', 'webchat-gw-addprovider-label');
+      var customUrlInput = document.createElement('input');
+      customUrlInput.type = 'text';
+      customUrlInput.className = 'cumulus-settings-input';
+      customUrlInput.placeholder = 'https://api.example.com/v1';
+      customUrlInput.setAttribute('data-testid', 'webchat-gw-addprovider-url');
+      var customKeyInput = document.createElement('input');
+      customKeyInput.type = 'password';
+      customKeyInput.autocomplete = 'off';
+      customKeyInput.className = 'cumulus-settings-input';
+      customKeyInput.placeholder = 'API key';
+      customKeyInput.setAttribute('data-testid', 'webchat-gw-addprovider-key');
+      var customAddBtn = document.createElement('button');
+      customAddBtn.type = 'button';
+      customAddBtn.textContent = '+ Add';
+      customAddBtn.className = 'cumulus-settings-add-btn';
+      customAddBtn.setAttribute('data-testid', 'webchat-gw-addprovider-btn');
+      customWrap.appendChild(customLabelInput);
+      customWrap.appendChild(customUrlInput);
+      customWrap.appendChild(customKeyInput);
+      customWrap.appendChild(customAddBtn);
+      customCard.appendChild(customWrap);
+      body.appendChild(customCard);
+
       // ── License (task 129) — persist-only: the key lands in gateway.config.json
       // but enforcement re-verifies at startup, so it takes effect on reload (127).
       var licenseLabel = document.createElement('div');
@@ -6446,7 +6633,7 @@
       });
       document.body.appendChild(backdrop);
 
-      var gwState = { catalog: [], sentinel: null };
+      var gwState = { catalog: [], sentinel: null, customProviders: [] };
       var credentialInputs = {};
       var credentialValues = { openai: '', huggingface: '', license: '' };
       var credentialClears = { openai: false, huggingface: false, license: false };
@@ -6478,27 +6665,45 @@
       });
       var gwLicenseMasked = '';
       var gwLicenseInfo = null;
-      var providerDefs = [
-        {
-          id: 'anthropic',
-          title: 'Anthropic',
-          description: 'Claude CLI models · authentication is managed by the Claude CLI',
-        },
-        {
-          id: 'openai',
-          title: 'OpenAI',
-          description: 'Responses API models with direct tool use',
-          credential: 'openaiApiKey',
-          credentialTestId: 'webchat-gw-openaikey',
-        },
-        {
-          id: 'huggingface',
-          title: 'HuggingFace',
-          description: 'OpenAI-compatible models served through the HuggingFace router',
-          credential: 'hfApiKey',
-          credentialTestId: 'webchat-gw-hfkey',
-        },
-      ];
+      // Task 147: the three built-in providers are fixed; custom
+      // OpenAI-compatible endpoints are appended from the registry. Cards, the
+      // default dropdown, the add-model select and the credential rows all read
+      // this ONE list, so they cannot disagree about which providers exist.
+      var providerDefs = [];
+      function buildProviderDefs() {
+        var defs = [
+          {
+            id: 'anthropic',
+            title: 'Anthropic',
+            description: 'Claude CLI models · authentication is managed by the Claude CLI',
+          },
+          {
+            id: 'openai',
+            title: 'OpenAI',
+            description: 'Responses API models with direct tool use',
+            credential: 'openaiApiKey',
+            credentialTestId: 'webchat-gw-openaikey',
+          },
+          {
+            id: 'huggingface',
+            title: 'HuggingFace',
+            description: 'OpenAI-compatible models served through the HuggingFace router',
+            credential: 'hfApiKey',
+            credentialTestId: 'webchat-gw-hfkey',
+          },
+        ];
+        (gwState.customProviders || []).forEach(function (provider) {
+          defs.push({
+            id: 'custom:' + provider.id,
+            title: provider.label || provider.id,
+            description: 'Custom OpenAI-compatible endpoint',
+            credential: 'custom',
+            credentialTestId: 'webchat-gw-customkey-' + provider.id,
+            custom: provider,
+          });
+        });
+        return defs;
+      }
 
       function setSettingsStatus(message, kind) {
         gwStatus.textContent = message || '';
@@ -6666,6 +6871,59 @@
         return row;
       }
 
+      // Task 147: a custom provider owns an endpoint and can be removed. Removal
+      // is REFUSED while models still reference it — an orphaned `custom:<id>`
+      // resolves fail-closed to the Claude path, so the model would silently run
+      // somewhere else instead of erroring.
+      function renderCustomProviderControls(card, providerDef) {
+        var row = document.createElement('div');
+        row.className = 'cumulus-settings-provider-endpoint';
+        var label = document.createElement('label');
+        label.textContent = 'Base URL';
+        var input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'cumulus-settings-input';
+        input.value = providerDef.custom.baseUrl || '';
+        input.placeholder = 'https://api.example.com/v1';
+        input.setAttribute('aria-label', providerDef.title + ' base URL');
+        input.setAttribute('data-testid', 'webchat-gw-customurl-' + providerDef.custom.id);
+        input.addEventListener('input', function () {
+          providerDef.custom.baseUrl = input.value;
+        });
+        var remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'cumulus-settings-clear-btn';
+        remove.textContent = 'Remove provider';
+        remove.setAttribute('data-testid', 'webchat-gw-removeprovider-' + providerDef.custom.id);
+        remove.addEventListener('click', function () {
+          var inUse = gwState.catalog.filter(function (model) {
+            return model.provider === providerDef.id;
+          });
+          if (inUse.length) {
+            setSettingsStatus(
+              'Remove its ' +
+                inUse.length +
+                ' model' +
+                (inUse.length === 1 ? '' : 's') +
+                ' first — they would stop running on this endpoint',
+              'error'
+            );
+            return;
+          }
+          gwState.customProviders = gwState.customProviders.filter(function (entry) {
+            return entry.id !== providerDef.custom.id;
+          });
+          delete credentialValues[providerDef.id];
+          delete credentialClears[providerDef.id];
+          setSettingsStatus('', '');
+          renderAll();
+        });
+        row.appendChild(label);
+        row.appendChild(input);
+        row.appendChild(remove);
+        card.appendChild(row);
+      }
+
       function renderCredential(card, provider) {
         if (!provider.credential) {
           var note = document.createElement('div');
@@ -6739,6 +6997,7 @@
           head.appendChild(heading);
           head.appendChild(count);
           card.appendChild(head);
+          if (provider.custom) renderCustomProviderControls(card, provider);
           var list = document.createElement('div');
           list.className = 'cumulus-settings-provider-models';
           if (!providerModels.length) {
@@ -6817,7 +7076,27 @@
         defaultSelect.value = current ? current.id : gwState.catalog[0].id;
       }
 
+      // Rebuild the provider list from state before anything reads it, so a
+      // provider added or removed this session reaches the cards, the default
+      // dropdown and the add-model select in the same pass (task 147).
+      function renderAddProviderOptions() {
+        var previous = addProvider.value;
+        addProvider.innerHTML = '';
+        providerDefs.forEach(function (provider) {
+          var option = document.createElement('option');
+          option.value = provider.id;
+          option.textContent = provider.title;
+          addProvider.appendChild(option);
+        });
+        addProvider.value = previous || 'anthropic';
+        if (!addProvider.value) addProvider.value = 'anthropic';
+        addContext.disabled = addProvider.value === 'anthropic';
+        if (addContext.disabled) addContext.value = '';
+      }
+
       function renderAll() {
+        providerDefs = buildProviderDefs();
+        renderAddProviderOptions();
         renderDefaultSelect();
         renderGwModels();
       }
@@ -6826,6 +7105,41 @@
         addContext.disabled = addProvider.value === 'anthropic';
         if (addContext.disabled) addContext.value = '';
       });
+
+      customAddBtn.addEventListener('click', function () {
+        var label = (customLabelInput.value || '').trim();
+        var baseUrl = (customUrlInput.value || '').trim();
+        var id = slugifyProviderId(label);
+        if (!label || !id) {
+          setSettingsStatus('Provider name is required (letters or digits)', 'error');
+          return;
+        }
+        if (!/^https?:\/\/\S+$/.test(baseUrl)) {
+          setSettingsStatus('Base URL must start with http:// or https://', 'error');
+          return;
+        }
+        if (
+          gwState.customProviders.some(function (provider) {
+            return provider.id === id;
+          })
+        ) {
+          setSettingsStatus('A provider named "' + label + '" already exists', 'error');
+          return;
+        }
+        gwState.customProviders.push({ id: id, label: label, baseUrl: baseUrl, maskedKey: '' });
+        // Key is held in the same credential maps as the built-in providers, so
+        // it rides the one save path and the one masking rule.
+        var key = (customKeyInput.value || '').trim();
+        if (key) {
+          credentialValues['custom:' + id] = key;
+          credentialClears['custom:' + id] = false;
+        }
+        customLabelInput.value = '';
+        customUrlInput.value = '';
+        customKeyInput.value = '';
+        setSettingsStatus('', '');
+        renderAll();
+      });
       addBtn.addEventListener('click', function () {
         var id = (addId.value || '').trim();
         var provider = addProvider.value;
@@ -6867,6 +7181,28 @@
         renderAll();
       });
 
+      // One place that turns a GET/PUT /api/config response into editor state,
+      // so the load and save paths cannot drift on credential seeding (Rule #8).
+      function adoptGatewayConfigResponse(response) {
+        gwState = gatewayConfigToModelCatalog(response);
+        credentialValues.openai = response.openaiApiKey || '';
+        credentialValues.huggingface = response.hfApiKey || '';
+        credentialValues.license = response.licenseKey || '';
+        credentialClears.openai = false;
+        credentialClears.huggingface = false;
+        credentialClears.license = false;
+        // Custom-provider keys arrive MASKED inside their registry entries. Seed
+        // them the same way as the scalars: a masked value is ignored on save,
+        // so an untouched key is preserved rather than read as "cleared".
+        gwState.customProviders.forEach(function (provider) {
+          var key = 'custom:' + provider.id;
+          credentialValues[key] = provider.maskedKey || '';
+          credentialClears[key] = false;
+        });
+        gwLicenseMasked = response.licenseKey || '';
+        gwLicenseInfo = response.license || null;
+      }
+
       function refreshOpenModelCatalogs() {
         var refresh = new XMLHttpRequest();
         refresh.open('GET', '/api/models');
@@ -6887,14 +7223,16 @@
       }
 
       saveBtn.addEventListener('click', function () {
-        var validationError = validateModelCatalog(gwState.catalog);
+        var validationError =
+          validateCustomProviderList(gwState.customProviders || []) ||
+          validateModelCatalog(gwState.catalog, gwState.customProviders || []);
         if (validationError) {
           setSettingsStatus(validationError, 'error');
           return;
         }
         saveBtn.disabled = true;
         setSettingsStatus('Saving…', '');
-        var payload = addCredentialPatch(modelCatalogToGatewayConfig(gwState), {
+        var credentialMap = {
           openai: {
             value: credentialValues.openai,
             clear: credentialClears.openai,
@@ -6907,7 +7245,15 @@
             value: credentialValues.license,
             clear: credentialClears.license,
           },
+        };
+        (gwState.customProviders || []).forEach(function (provider) {
+          var key = 'custom:' + provider.id;
+          credentialMap[key] = {
+            value: credentialValues[key],
+            clear: credentialClears[key],
+          };
         });
+        var payload = addCredentialPatch(modelCatalogToGatewayConfig(gwState), credentialMap);
         var save = new XMLHttpRequest();
         save.open('PUT', '/api/config');
         save.setRequestHeader('Content-Type', 'application/json');
@@ -6918,15 +7264,7 @@
           if (save.status === 200) {
             try {
               var response = JSON.parse(save.responseText);
-              gwState = gatewayConfigToModelCatalog(response);
-              credentialClears.openai = false;
-              credentialClears.huggingface = false;
-              credentialClears.license = false;
-              credentialValues.openai = response.openaiApiKey || '';
-              credentialValues.huggingface = response.hfApiKey || '';
-              credentialValues.license = response.licenseKey || '';
-              gwLicenseMasked = response.licenseKey || '';
-              gwLicenseInfo = response.license || null;
+              adoptGatewayConfigResponse(response);
               renderAll();
               renderLicenseState(gwLicenseMasked, gwLicenseInfo);
               setSettingsStatus(
@@ -6946,6 +7284,10 @@
         save.send(JSON.stringify(payload));
       });
 
+      // First paint before the config arrives: the three built-in providers are
+      // known without the server, so the shell renders immediately.
+      renderAll();
+
       (function loadGatewayConfig() {
         var load = new XMLHttpRequest();
         load.open('GET', '/api/config');
@@ -6955,12 +7297,7 @@
           if (load.status === 200) {
             try {
               var response = JSON.parse(load.responseText);
-              gwState = gatewayConfigToModelCatalog(response);
-              credentialValues.openai = response.openaiApiKey || '';
-              credentialValues.huggingface = response.hfApiKey || '';
-              credentialValues.license = response.licenseKey || '';
-              gwLicenseMasked = response.licenseKey || '';
-              gwLicenseInfo = response.license || null;
+              adoptGatewayConfigResponse(response);
               renderAll();
               renderLicenseState(gwLicenseMasked, gwLicenseInfo);
             } catch (e) {
@@ -7070,9 +7407,18 @@
       // Model id → provider ("huggingface" | "openai" | "cli"), filled by loadModels
       // from /api/models so the breadcrumb names the real provider (task 118).
       var modelProviders = {};
+      // Custom-provider id → display label, from /api/models (task 147). That
+      // endpoint serves id + label only — never the base URL, which is private
+      // infrastructure and it accepts namespace-scoped app keys (097 P7).
+      var customProviderLabels = {};
       function providerLabel(id) {
         if (id === 'claude') return 'Anthropic';
-        if (modelProviders[id] === 'openai') return 'OpenAI';
+        var provider = modelProviders[id];
+        if (isCustomProvider(provider)) {
+          var customId = provider.slice('custom:'.length);
+          return customProviderLabels[customId] || customId;
+        }
+        if (provider === 'openai') return 'OpenAI';
         return 'HuggingFace';
       }
       function updateBreadcrumb() {
@@ -7105,6 +7451,10 @@
         var previousModel = preserveSelection ? modelSelect.value : '';
         var previousClaudeModel = preserveSelection ? claudeModelSelect.value : '';
         modelProviders = {};
+        customProviderLabels = {};
+        (response.customProviders || []).forEach(function (provider) {
+          customProviderLabels[provider.id] = provider.label || provider.id;
+        });
         modelSelect.innerHTML = '';
         (response.models || []).forEach(function (model) {
           var option = document.createElement('option');
@@ -9160,6 +9510,25 @@
           // Server response to { type: 'threads' } request
           if (data.threads) {
             allThreads = data.threads;
+            // Reseed from the listing, so a tab opened mid-turn is correct at
+            // once instead of waiting for the next transition (task 146).
+            // Rebuilt rather than merged: the listing is authoritative for every
+            // thread it contains, so a stale entry cannot survive a refresh.
+            busyThreads = {};
+            for (var ti = 0; ti < data.threads.length; ti++) {
+              if (data.threads[ti].busy) busyThreads[data.threads[ti].name] = true;
+            }
+            renderSidebar();
+          }
+          break;
+
+        // A thread started or finished a turn. Not gated on watching the thread,
+        // which is the point: the sidebar shows work you did not start — a
+        // scheduled trigger, an agent message, a finished job (task 146).
+        case 'thread_activity':
+          if (data.threadName) {
+            if (data.busy) busyThreads[data.threadName] = true;
+            else delete busyThreads[data.threadName];
             renderSidebar();
           }
           break;