@luckydraw/cumulus 0.31.66 → 1.0.1

package/dist/gateway/static/widget.js

@@ -177,6 +177,7 @@
     [
       { provider: 'openai', key: 'openaiApiKey' },
       { provider: 'huggingface', key: 'hfApiKey' },
+      { provider: 'license', key: 'licenseKey' },
     ].forEach(function (entry) {
       var credential = credentials[entry.provider] || {};
       var value = String(credential.value || '').trim();
@@ -186,6 +187,48 @@
     return payload;
   }
 
+  // ─── Default-application rules (task 130, Option C) ─────────────────────────
+  // One gateway default across the whole catalog. Picking an Anthropic model as
+  // the gateway default forcibly couples the Claude sub-model default to it —
+  // when the gateway default IS Anthropic, `model: 'claude'` +
+  // `claudeModels[].default` are the same knob and cannot diverge.
+  function applyGatewayDefault(catalog, modelId) {
+    var chosen = null;
+    catalog.forEach(function (model) {
+      model.gatewayDefault = model.id === modelId;
+      if (model.gatewayDefault) chosen = model;
+    });
+    if (chosen && chosen.provider === 'anthropic') {
+      catalog.forEach(function (model) {
+        if (model.provider === 'anthropic') model.providerDefault = model.id === modelId;
+      });
+    }
+    return chosen;
+  }
+
+  function applyClaudeSubDefault(catalog, modelId) {
+    catalog.forEach(function (model) {
+      if (model.provider === 'anthropic') model.providerDefault = model.id === modelId;
+    });
+  }
+
+  // The Claude sub-model default is a visible control ONLY when it can actually
+  // diverge from the gateway default: the gateway default is non-Anthropic
+  // (else coupling forces equality) and there are ≥2 Anthropic models (else
+  // there is no choice to make).
+  function claudeSubDefaultVisible(catalog) {
+    var anthropicCount = 0;
+    for (var i = 0; i < catalog.length; i++) {
+      if (catalog[i].provider === 'anthropic') anthropicCount++;
+    }
+    if (anthropicCount < 2) return false;
+    var gatewayDefault = null;
+    for (var j = 0; j < catalog.length; j++) {
+      if (catalog[j].gatewayDefault) gatewayDefault = catalog[j];
+    }
+    return !gatewayDefault || gatewayDefault.provider !== 'anthropic';
+  }
+
   // ─── Styles ─────────────────────────────────────────────────────────────────
   var STYLES = [
     '.cumulus-widget * { box-sizing: border-box; margin: 0; padding: 0; }',
@@ -366,6 +409,19 @@
     '.blex-block-container[data-blex-ready="true"] {',
     '  min-height: auto;',
     '}',
+    /* Raw-fence fallback: shown when nothing claims the container (user message,
+       changelog, or blex.min.js failed to load). Better a visible fence than the
+       blank rectangle min-height used to produce. */
+    '.blex-fallback {',
+    '  margin: 0; padding: 0.6em 0.8em;',
+    '  background: rgba(255,255,255,0.04);',
+    '  border: 1px solid rgba(255,255,255,0.08);',
+    '  border-radius: 8px;',
+    '  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;',
+    '  font-size: 0.82em; line-height: 1.45;',
+    '  white-space: pre-wrap; word-break: break-word;',
+    '  opacity: 0.85;',
+    '}',
     /* Blex CSS isolation — revert widget resets inside blex blocks */
     '.blex-block-container * { margin: revert; padding: revert; line-height: revert; list-style: revert; border-spacing: revert; border: revert; }',
     '.blex-block-container { isolation: isolate; }',
@@ -1197,6 +1253,12 @@
     '  text-decoration: underline; text-underline-offset: 2px;',
     '}',
     '.cumulus-topbar-changelog:hover { color: #ccc; background: #3a3a3a; }',
+    '.cumulus-topbar-settings {',
+    '  background: none; border: none; color: #888; cursor: pointer;',
+    '  font-size: 15px; padding: 2px 5px; line-height: 1;',
+    '  border-radius: 3px; transition: color 0.2s, background 0.2s;',
+    '}',
+    '.cumulus-topbar-settings:hover { color: #ccc; background: #3a3a3a; }',
     '.cumulus-changelog-popover {',
     '  position: absolute; top: 44px; left: 12px; z-index: 1000;',
     '  width: min(480px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;',
@@ -1315,137 +1377,188 @@
     '.cumulus-model-popover select { max-width: 152px; margin: 0; }',
 
     /* ── Settings modal (provider-organized model catalog + credentials) ── */
+    /* These three roots mount on document.body, OUTSIDE .cumulus-widget, so they
+       must carry the font stack themselves or the browser falls back to serif. */
+    '.cumulus-settings-backdrop, .cumulus-context-menu, .cumulus-confirm-dialog {',
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
+    '  -webkit-font-smoothing: antialiased;',
+    '}',
     '.cumulus-settings-backdrop {',
-    '  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55);',
+    '  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6);',
+    '  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);',
     '  display: flex; align-items: center; justify-content: center; padding: 20px;',
+    '  font-size: 13px; line-height: 1.5; color: #e3e5ea;',
     '}',
     '.cumulus-settings-modal {',
-    '  background: #232323; border: 1px solid #3d3d3d; border-radius: 10px;',
+    '  background: #1f2023; border: 1px solid #313338; border-radius: 14px;',
     '  width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column;',
-    '  box-shadow: 0 16px 48px rgba(0,0,0,0.6); overflow: hidden;',
+    '  box-shadow: 0 24px 64px rgba(0,0,0,0.55); overflow: hidden;',
     '}',
     '.cumulus-settings-header {',
     '  display: flex; align-items: flex-start; justify-content: space-between;',
-    '  padding: 14px 18px; border-bottom: 1px solid #333; flex-shrink: 0;',
+    '  padding: 16px 20px 14px; border-bottom: 1px solid #2a2b30; flex-shrink: 0;',
     '}',
-    '.cumulus-settings-title { font-weight: 600; font-size: 15px; color: #ededed; }',
-    '.cumulus-settings-subtitle { font-size: 12px; color: #888; margin-top: 3px; }',
-    '.cumulus-settings-body { padding: 6px 18px 10px; overflow-y: auto; flex: 1; }',
+    '.cumulus-settings-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #f2f3f5; }',
+    '.cumulus-settings-subtitle { font-size: 12px; color: #8b8f96; margin-top: 3px; }',
+    '.cumulus-settings-body { padding: 6px 20px 14px; overflow-y: auto; flex: 1; }',
     '.cumulus-settings-footer {',
-    '  display: flex; align-items: center; gap: 12px; padding: 13px 18px;',
-    '  border-top: 1px solid #333; flex-shrink: 0;',
+    '  display: flex; align-items: center; gap: 12px; padding: 13px 20px;',
+    '  border-top: 1px solid #2a2b30; flex-shrink: 0; background: #1b1c1f;',
     '}',
     '.cumulus-settings-section-label {',
-    '  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;',
-    '  color: #777; margin: 16px 0 8px;',
+    '  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;',
+    '  color: #6e7278; margin: 18px 0 8px;',
+    '}',
+    '.cumulus-settings-body > .cumulus-settings-section-label:first-child { margin-top: 12px; }',
+    '.cumulus-settings-default-card {',
+    '  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 2px;',
+    '  border: 1px solid rgba(79,140,255,0.35); border-radius: 12px; background: rgba(79,140,255,0.07);',
     '}',
-    '.cumulus-settings-body > .cumulus-settings-section-label:first-child { margin-top: 6px; }',
+    '.cumulus-settings-default-card label { color: #c8d4e8; font-size: 12.5px; font-weight: 500; flex-shrink: 0; }',
+    '.cumulus-settings-default-card select { flex: 1; min-width: 0; }',
     '.cumulus-settings-model-row {',
-    '  display: grid; grid-template-columns: auto auto minmax(130px,1.2fr) minmax(110px,1fr) 105px auto;',
-    '  align-items: center; gap: 8px; padding: 9px 11px;',
-    '  border: 1px solid #333; border-radius: 8px; margin-bottom: 7px; background: #1d1d1d;',
+    '  display: flex; align-items: center; gap: 10px; padding: 9px 12px;',
+    '  border: 1px solid #2c2d32; border-radius: 10px; margin-bottom: 6px; background: #1e1f23;',
+    '  transition: border-color 0.12s;',
     '}',
-    '.cumulus-settings-model-row.anthropic { grid-template-columns: auto auto minmax(140px,1.2fr) minmax(120px,1fr) auto; }',
-    '.cumulus-settings-radio-label { color: #777; font-size: 9px; text-align: center; line-height: 1.15; }',
+    '.cumulus-settings-model-row:hover { border-color: #3a3c42; }',
     '.cumulus-settings-row-input { min-width: 0; width: 100%; }',
-    '.cumulus-settings-model-row.is-default { border-color: #3b5b8c; background: rgba(59,91,140,0.12); }',
-    '.cumulus-settings-default-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }',
-    '.cumulus-settings-default-toggle input { cursor: pointer; accent-color: #3b82f6; margin: 0; }',
+    '.cumulus-settings-model-row.is-default { border-color: rgba(79,140,255,0.45); background: rgba(79,140,255,0.08); }',
     '.cumulus-settings-model-name { flex: 1; min-width: 0; }',
     '.cumulus-settings-model-label {',
-    '  color: #e6e6e6; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '  color: #e7e8ea; font-size: 13px; font-weight: 500;',
+    '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
     '}',
     '.cumulus-settings-model-id {',
-    '  color: #777; font-size: 11px; font-family: "SF Mono", Consolas, monospace;',
+    '  color: #7d808a; font-size: 11px;',
+    '  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;',
     '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;',
     '}',
+    '.cumulus-settings-context-chip {',
+    '  color: #9a9da5; font-size: 10.5px; font-variant-numeric: tabular-nums;',
+    '  border: 1px solid #383a40; border-radius: 999px; background: #1b1c1f;',
+    '  padding: 1px 8px; white-space: nowrap; flex-shrink: 0;',
+    '}',
     '.cumulus-settings-default-badge {',
-    '  display: none; font-size: 10px; font-weight: 600; color: #8ab4f8;',
-    '  background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.35);',
-    '  border-radius: 10px; padding: 1px 8px; flex-shrink: 0;',
+    '  display: none; font-size: 10.5px; font-weight: 600; color: #8ab4f8;',
+    '  background: rgba(79,140,255,0.14); border: 1px solid rgba(79,140,255,0.35);',
+    '  border-radius: 999px; padding: 1px 9px; flex-shrink: 0;',
     '}',
     '.cumulus-settings-model-row.is-default .cumulus-settings-default-badge { display: inline-block; }',
+    '.cumulus-settings-row-actions {',
+    '  display: flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0;',
+    '  transition: opacity 0.12s;',
+    '}',
+    '.cumulus-settings-model-row:hover .cumulus-settings-row-actions,',
+    '.cumulus-settings-model-row:focus-within .cumulus-settings-row-actions { opacity: 1; }',
+    '@media (hover: none) { .cumulus-settings-row-actions { opacity: 1; } }',
+    '.cumulus-settings-row-edit {',
+    '  background: none; border: none; color: #6e7278; cursor: pointer; font-size: 13px;',
+    '  line-height: 1; padding: 2px 4px; flex-shrink: 0; font-family: inherit;',
+    '}',
+    '.cumulus-settings-row-edit:hover { color: #8ab4f8; }',
     '.cumulus-settings-model-remove {',
-    '  background: none; border: none; color: #666; cursor: pointer; font-size: 17px;',
-    '  line-height: 1; padding: 0 2px; flex-shrink: 0;',
+    '  background: none; border: none; color: #6e7278; cursor: pointer; font-size: 17px;',
+    '  line-height: 1; padding: 0 2px; flex-shrink: 0; font-family: inherit;',
     '}',
     '.cumulus-settings-model-remove:hover { color: #ef4444; }',
+    '.cumulus-settings-model-row.editing { display: block; }',
+    '.cumulus-settings-edit-grid {',
+    '  display: grid; grid-template-columns: minmax(140px,1.3fr) minmax(110px,1fr) 105px auto;',
+    '  gap: 8px; align-items: end;',
+    '}',
+    '.cumulus-settings-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }',
+    '.cumulus-settings-edit-field > span {',
+    '  color: #6e7278; font-size: 10px; font-weight: 600;',
+    '  text-transform: uppercase; letter-spacing: 0.05em;',
+    '}',
+    '.cumulus-settings-claude-default-row {',
+    '  display: flex; align-items: center; gap: 10px; padding: 4px 12px 10px;',
+    '}',
+    '.cumulus-settings-claude-default-row label { color: #9a9da5; font-size: 11.5px; flex-shrink: 0; }',
+    '.cumulus-settings-claude-default-row select { flex: 1; min-width: 0; }',
     '.cumulus-settings-provider-card {',
-    '  border: 1px solid #363636; border-radius: 10px; background: #1d1d1d; margin: 10px 0;',
+    '  border: 1px solid #2c2d32; border-radius: 12px; background: #232428; margin: 10px 0;',
     '  overflow: hidden;',
     '}',
     '.cumulus-settings-provider-head {',
     '  display: flex; align-items: center; justify-content: space-between; gap: 14px;',
-    '  padding: 12px 13px; background: #202020; border-bottom: 1px solid #323232;',
+    '  padding: 13px 14px; background: #26272c; border-bottom: 1px solid #2c2d32;',
     '}',
-    '.cumulus-settings-provider-title { color: #ededed; font-size: 14px; font-weight: 650; }',
-    '.cumulus-settings-provider-desc { color: #777; font-size: 11px; margin-top: 2px; }',
+    '.cumulus-settings-provider-title { color: #f2f3f5; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }',
+    '.cumulus-settings-provider-desc { color: #7d808a; font-size: 11.5px; margin-top: 2px; }',
     '.cumulus-settings-provider-count {',
-    '  color: #999; font-size: 10px; border: 1px solid #3c3c3c; border-radius: 999px;',
-    '  padding: 2px 8px; white-space: nowrap;',
+    '  color: #9a9da5; font-size: 10.5px; font-variant-numeric: tabular-nums;',
+    '  border: 1px solid #383a40; border-radius: 999px; background: #1b1c1f;',
+    '  padding: 2px 9px; white-space: nowrap;',
     '}',
-    '.cumulus-settings-provider-models { padding: 10px 10px 3px; }',
-    '.cumulus-settings-provider-models .cumulus-settings-model-row { margin-bottom: 7px; }',
-    '.cumulus-settings-provider-empty { color: #666; font-size: 12px; padding: 8px 3px 15px; }',
+    '.cumulus-settings-provider-models { padding: 10px 10px 4px; }',
+    '.cumulus-settings-provider-models .cumulus-settings-model-row { margin-bottom: 6px; }',
+    '.cumulus-settings-provider-empty { color: #6e7278; font-size: 12px; padding: 8px 4px 14px; }',
     '.cumulus-settings-provider-credential {',
     '  display: grid; grid-template-columns: 120px minmax(0,1fr) auto; align-items: center; gap: 10px;',
-    '  padding: 0 10px 11px;',
+    '  padding: 11px 14px; background: #1b1c1f; border-top: 1px solid #2a2b30;',
+    '}',
+    '.cumulus-settings-credential-note {',
+    '  color: #7d808a; font-size: 11.5px; padding: 11px 14px; background: #1b1c1f; border-top: 1px solid #2a2b30;',
     '}',
-    '.cumulus-settings-credential-note { color: #777; font-size: 11px; padding: 0 10px 12px; }',
     '.cumulus-settings-clear-btn {',
-    '  background: none; border: 1px solid #454545; color: #aaa; cursor: pointer;',
-    '  padding: 6px 9px; border-radius: 6px; font-size: 11px;',
+    '  background: transparent; border: 1px solid #3d3f45; color: #9a9da5; cursor: pointer;',
+    '  padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-family: inherit;',
+    '  transition: color 0.12s, border-color 0.12s;',
     '}',
-    '.cumulus-settings-clear-btn:hover { color: #ef7777; border-color: #744; }',
-    '.cumulus-settings-provider-credential label { color: #aaa; font-size: 11px; }',
+    '.cumulus-settings-clear-btn:hover { color: #ef7777; border-color: #7a4444; }',
+    '.cumulus-settings-provider-credential label { color: #9a9da5; font-size: 11.5px; }',
     '.cumulus-settings-add-card {',
-    '  border: 1px dashed #454545; border-radius: 10px; padding: 12px; margin: 12px 0 8px;',
+    '  border: 1px dashed #3d3f45; border-radius: 12px; padding: 13px 14px; margin: 12px 0 8px;',
     '  background: rgba(255,255,255,0.015);',
     '}',
-    '.cumulus-settings-add-title { color: #ddd; font-size: 12px; font-weight: 650; margin-bottom: 9px; }',
+    '.cumulus-settings-add-title { color: #d4d6da; font-size: 12px; font-weight: 600; margin-bottom: 9px; }',
     '.cumulus-settings-add-row {',
     '  display: grid; grid-template-columns: 130px minmax(150px,1.4fr) minmax(120px,1fr) 110px auto;',
-    '  gap: 7px; align-items: center;',
+    '  gap: 8px; align-items: center;',
+    '}',
+    '.cumulus-settings-select, .cumulus-settings-input {',
+    '  background: #17181b; border: 1px solid #33353b; color: #e3e5ea;',
+    '  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-family: inherit; outline: none;',
+    '  transition: border-color 0.12s, box-shadow 0.12s;',
     '}',
     '.cumulus-settings-select {',
-    '  background: #1a1a1a; border: 1px solid #3a3a3a; color: #e0e0e0;',
-    '  padding: 7px 9px; border-radius: 6px; font-size: 12px; font-family: inherit; outline: none;',
+    '  -webkit-appearance: none; appearance: none; padding-right: 26px; cursor: pointer;',
+    '  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%238b8f96%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");',
+    '  background-repeat: no-repeat; background-position: right 10px center;',
     '}',
-    '.cumulus-settings-input {',
-    '  background: #1a1a1a; border: 1px solid #3a3a3a; color: #e0e0e0;',
-    '  padding: 7px 9px; border-radius: 6px; font-size: 12px; font-family: inherit; outline: none;',
+    '.cumulus-settings-select:focus, .cumulus-settings-input:focus {',
+    '  border-color: #4f8cff; box-shadow: 0 0 0 3px rgba(79,140,255,0.18);',
     '}',
-    '.cumulus-settings-input:focus { border-color: #3b82f6; }',
-    '.cumulus-settings-input::placeholder { color: #5a5a5a; }',
+    '.cumulus-settings-input::placeholder { color: #5c5f66; }',
     '.cumulus-settings-cred-row { display: flex; align-items: center; gap: 12px; }',
-    '.cumulus-settings-cred-row label { font-size: 12px; color: #bbb; flex-shrink: 0; }',
+    '.cumulus-settings-cred-row label { font-size: 12px; color: #b8bac0; flex-shrink: 0; }',
     '.cumulus-settings-btn {',
-    '  background: #2a6acf; border: none; color: #fff; font-weight: 600;',
-    '  padding: 8px 18px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit;',
+    '  background: #3b82f6; border: none; color: #fff; font-weight: 600;',
+    '  padding: 8px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: inherit;',
+    '  transition: background 0.12s;',
     '}',
-    '.cumulus-settings-btn:hover { background: #3a7ae0; }',
-    '.cumulus-settings-btn:disabled { background: #333; color: #777; cursor: not-allowed; }',
+    '.cumulus-settings-btn:hover { background: #2f6fe0; }',
+    '.cumulus-settings-btn:disabled { background: #2c2d32; color: #6e7278; cursor: not-allowed; }',
     '.cumulus-settings-add-btn {',
-    '  background: #2f2f2f; border: 1px solid #454545; color: #ddd;',
-    '  padding: 7px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;',
-    '  font-family: inherit; white-space: nowrap;',
+    '  background: transparent; border: 1px solid #3d3f45; color: #d4d6da;',
+    '  padding: 7px 14px; border-radius: 8px; font-size: 12.5px; cursor: pointer;',
+    '  font-family: inherit; white-space: nowrap; transition: background 0.12s, border-color 0.12s;',
     '}',
-    '.cumulus-settings-add-btn:hover { background: #3a3a3a; border-color: #555; }',
-    '.cumulus-settings-status { font-size: 12px; color: #999; }',
+    '.cumulus-settings-add-btn:hover { background: #2a2b30; border-color: #4a4c53; }',
+    '.cumulus-settings-status { font-size: 12px; color: #9a9da5; }',
     '.cumulus-settings-status.success { color: #22c55e; }',
     '.cumulus-settings-status.error { color: #ef4444; }',
     '@media (max-width: 720px) {',
     '  .cumulus-settings-backdrop { padding: 8px; align-items: stretch; }',
-    '  .cumulus-settings-modal { max-height: 100%; border-radius: 8px; }',
+    '  .cumulus-settings-modal { max-height: 100%; border-radius: 12px; }',
     '  .cumulus-settings-add-row { grid-template-columns: 1fr 1fr; }',
     '  .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-model-row, .cumulus-settings-model-row.anthropic {',
-    '    grid-template-columns: auto auto 1fr auto;',
-    '  }',
-    '  .cumulus-settings-model-row .cumulus-settings-row-input { grid-column: 3 / 4; }',
-    '  .cumulus-settings-model-row .cumulus-settings-model-remove { grid-column: 4; grid-row: 1 / 3; }',
+    '  .cumulus-settings-default-card { flex-direction: column; align-items: stretch; gap: 6px; }',
+    '  .cumulus-settings-edit-grid { grid-template-columns: 1fr 1fr; }',
     '}',
 
     /* ── Context menu (right-click on thread) ── */
@@ -1937,8 +2050,8 @@
 
   // ── Blex Integration ─────────────────────────────────────────────────────
 
-  // WeakMap: DOM element -> BlockHandle[] for lifecycle management
-  var blexHandles = typeof WeakMap !== 'undefined' ? new WeakMap() : null;
+  // Handle lifecycle (element -> BlockHandle[]) lives in blex-render.js — one
+  // owner, so destroy() cannot miss handles the other side created.
 
   // Per-thread store for blex interaction values (poll answers, confirm clicks, etc.)
   // Key: "threadName" → Map<"msgTimestamp:blockIdx", interactionValue>
@@ -2089,136 +2202,99 @@
     });
   }
 
-  // Extract ~~~blex:TYPE\n{json}\n~~~ fences from text
-  // Returns { text: string (with placeholders), blocks: Array<{type, json, idx}> }
+  // ── Shared renderer seam (task 131) ────────────────────────────────────────
+  //
+  // Extraction, placeholder markup, block rendering and handle lifecycle live in
+  // /blex-render.js — ONE implementation shared with the web-app-agent kit and
+  // any embedding app. chat.html loads it before this file.
+  //
+  // The EMBEDDED widget (a bare <script src="/widget.js"> on a third-party page)
+  // loads neither blex.min.js nor blex-render.js, and never has — blex has only
+  // ever worked on /chat. There, fences degrade to literal text, which is what
+  // an author who typed one would expect to see.
+  function blexCore() {
+    return typeof CumulusBlexRender !== 'undefined' ? CumulusBlexRender : null;
+  }
+
+  // Fenced-code regex, sourced from the shared module so the blex extractor and
+  // Phase 1 of renderMarkdown cannot disagree about where a code block starts —
+  // a fence falling through that gap is exactly the bug this seam closes.
+  function codeFenceRe() {
+    var core = blexCore();
+    return new RegExp(core ? core.CODE_FENCE_SRC : '```([^\\n`]*)\\n([\\s\\S]*?)```', 'g');
+  }
+
   function extractBlexBlocks(text) {
-    var blocks = [];
-    var BLEX_PREFIX = '\x00BLEX_';
-    var replaced = text.replace(/~~~blex:(\w[\w-]*)\n([\s\S]*?)\n~~~/g, function (_, type, json) {
-      var idx = blocks.length;
-      blocks.push({ type: type, json: json.trim(), idx: idx });
-      return BLEX_PREFIX + idx + '\x00';
-    });
-    return { text: replaced, blocks: blocks };
+    var core = blexCore();
+    return core ? core.extractBlocks(text) : { text: text, blocks: [] };
   }
 
-  // Render blex blocks into placeholder divs within a message element
-  function renderBlexBlocks(el, blexBlocks, isStreaming, msgKey, threadName) {
-    if (!blexBlocks || blexBlocks.length === 0) return;
-    if (typeof Blex === 'undefined') {
-      console.warn('[blex] Blex library not loaded — blex.min.js may have failed to fetch');
-      return;
-    }
-    var placeholders = el.querySelectorAll('.blex-block-container');
-    // Get the interaction store for this thread
+  // The widget's adapter over the shared renderer. It supplies all five members;
+  // a render-only surface (the web-app-agent kit's panel) supplies the three
+  // required ones and lets addChip/persist default to no-ops.
+  //
+  // `el` is captured because it may be DETACHED by the time an interaction fires
+  // — renderPanelMessages rebuilds the message list — which is why the panel
+  // lookup falls back to a document query.
+  function widgetBlexAdapter(el, threadName) {
     var store = threadName
       ? blexInteractionStore[threadName] || (blexInteractionStore[threadName] = {})
       : null;
 
-    placeholders.forEach(function (container) {
-      var idx = parseInt(container.getAttribute('data-blex-idx'), 10);
-      if (isNaN(idx) || idx >= blexBlocks.length) return;
-      var block = blexBlocks[idx];
-      var storeKey = msgKey ? msgKey + ':' + idx : null;
-
-      try {
-        var data = JSON.parse(block.json);
-        var blockObj = { type: block.type, id: block.type + '-' + idx, data: data };
-
-        if (isStreaming) {
-          // During streaming, show placeholder skeleton
-          Blex.renderPlaceholder(block.type, container);
-        } else {
-          // Check for previously stored interaction value
-          var renderOpts = {};
-          if (store && storeKey && store[storeKey]) {
-            renderOpts.previousValue = store[storeKey];
-          }
+    function panelFor() {
+      return (
+        el.closest('.cumulus-thread-panel') ||
+        el.closest('.cumulus-panel') ||
+        document.querySelector('.cumulus-thread-panel') ||
+        document.querySelector('.cumulus-panel')
+      );
+    }
 
-          // Final render — full interactive block
-          Blex.renderBlock(blockObj, container, renderOpts)
-            .then(function (handle) {
-              // Store handle immediately (inside async callback, not after sync loop)
-              if (blexHandles) {
-                var existing = blexHandles.get(el) || [];
-                existing.push(handle);
-                blexHandles.set(el, existing);
-              }
-              // Attach resize handle (drag to resize, double-click to reset)
-              attachBlexResize(container, threadName, storeKey);
-              if (handle && handle.onInteraction) {
-                // Wire interaction handler
-                handle.onInteraction(function (interaction) {
-                  // Store the interaction value for persistence across re-renders + refreshes
-                  if (store && storeKey && interaction.value !== undefined) {
-                    store[storeKey] = interaction.value;
-                    _flushBlexStore();
-                  }
+    return {
+      // The widget is the interactive surface: every type is allowed here.
+      allowType: function () {
+        return true;
+      },
+      getInput: function () {
+        var panel = panelFor();
+        return panel
+          ? panel.querySelector('[data-testid="webchat-input"]')
+          : document.querySelector('[data-testid="webchat-input"]');
+      },
+      getSendButton: function () {
+        var panel = panelFor();
+        return panel ? panel.querySelector('[data-testid*="send"]') : null;
+      },
+      addChip: function (interaction, handle, sourceId) {
+        addInteractionChip(panelFor(), interaction, handle, sourceId);
+      },
+      readPersisted: function (storeKey) {
+        if (!store || !storeKey) return undefined;
+        return store[storeKey] || undefined;
+      },
+      persist: function (storeKey, value) {
+        if (!store || !storeKey) return;
+        store[storeKey] = value;
+        _flushBlexStore();
+      },
+      onRendered: function (container, storeKey) {
+        attachBlexResize(container, threadName, storeKey);
+      },
+    };
+  }
 
-                  // Find the panel — try el.closest first, fall back to document query
-                  // (el may be detached from DOM if renderPanelMessages rebuilt the message list)
-                  var panel = el.closest('.cumulus-thread-panel') || el.closest('.cumulus-panel');
-                  if (!panel) {
-                    panel =
-                      document.querySelector('.cumulus-thread-panel') ||
-                      document.querySelector('.cumulus-panel');
-                  }
-                  var inputEl = panel
-                    ? panel.querySelector('[data-testid="webchat-input"]')
-                    : document.querySelector('[data-testid="webchat-input"]');
-
-                  if (inputEl && interaction.serialized) {
-                    if (interaction.immediate) {
-                      // Immediate: prepend any existing input text, then auto-send
-                      var existingText = inputEl.value.trim();
-                      inputEl.value = existingText
-                        ? existingText + '\n\n' + interaction.serialized
-                        : interaction.serialized;
-                      inputEl.dispatchEvent(new Event('input', { bubbles: true }));
-                      // Find and click the send button
-                      var sendBtn = panel ? panel.querySelector('[data-testid*="send"]') : null;
-                      if (sendBtn) {
-                        sendBtn.click();
-                      }
-                    } else {
-                      // Deferred: add to chip tray (sourceId deduplicates rapid-fire from same block)
-                      addInteractionChip(panel, interaction, handle, block.type + '-' + idx);
-                    }
-                  }
-                });
-              }
-            })
-            .catch(function (err) {
-              container.innerHTML =
-                '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Blex error: ' +
-                (err.message || err) +
-                '</pre>';
-            });
-        }
-      } catch (e) {
-        container.innerHTML =
-          '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Invalid blex JSON: ' +
-          e.message +
-          '</pre>';
-      }
+  function renderBlexBlocks(el, blexBlocks, isStreaming, msgKey, threadName) {
+    var core = blexCore();
+    if (!core) return;
+    core.render(el, blexBlocks, widgetBlexAdapter(el, threadName), {
+      msgKey: msgKey,
+      streaming: isStreaming,
     });
-
-    // Note: handles are stored inside the async .then() callback above,
-    // not here — by this point the promises haven't resolved yet.
   }
 
-  // Destroy blex block handles for a message element
   function destroyBlexBlocks(el) {
-    if (!blexHandles) return;
-    var handles = blexHandles.get(el);
-    if (handles) {
-      handles.forEach(function (h) {
-        try {
-          h.destroy();
-        } catch (e) {}
-      });
-      blexHandles.delete(el);
-    }
+    var core = blexCore();
+    if (core) core.destroy(el);
   }
 
   // Add a deferred interaction chip to the chip tray
@@ -2581,7 +2657,12 @@
     return out;
   }
 
-  function renderMarkdown(text) {
+  // opts.streaming — suppress the raw-fence fallback body while a turn is still
+  // streaming. A completed-but-not-yet-rendered fence would otherwise flash its
+  // JSON before flipping to the rendered block at `done`.
+  function renderMarkdown(text, opts) {
+    var streaming = !!(opts && opts.streaming);
+
     // Phase 0.5: Extract blex fences BEFORE code blocks
     var blexResult = extractBlexBlocks(text);
     text = blexResult.text;
@@ -2590,7 +2671,7 @@
     // Phase 1: Extract fenced code blocks — replace with unique tokens
     var codeBlocks = [];
     var TOKEN_PREFIX = '\x00CODEBLOCK_';
-    var processed = text.replace(/```([^\n`]*)\n([\s\S]*?)```/g, function (_, lang, code) {
+    var processed = text.replace(codeFenceRe(), function (_, lang, code) {
       var idx = codeBlocks.length;
       var langLabel = lang.trim() || 'text';
       var escapedCode = escapeHtml(code.replace(/\n$/, '')); // trim trailing newline
@@ -2667,10 +2748,14 @@
       return codeBlocks[parseInt(idx, 10)];
     });
 
-    // Phase 7.5: Reinsert blex block placeholders
-    html = html.replace(/\x00BLEX_(\d+)\x00/g, function (_, idx) {
-      return '<div class="blex-block-container" data-blex-idx="' + idx + '"></div>';
-    });
+    // Phase 7.5: Reinsert blex block placeholders — shared markup, so the widget
+    // and any embedding app produce byte-identical containers and one renderer
+    // can claim either. See blex-render.js for why the placeholder carries the
+    // raw fence as its body.
+    var core = blexCore();
+    if (core) {
+      html = core.insertPlaceholders(html, blexBlocks, { streaming: streaming });
+    }
 
     return { html: html, blexBlocks: blexBlocks };
   }
@@ -3660,7 +3745,7 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          var mdResult = renderMarkdown(content);
+          var mdResult = renderMarkdown(content, { streaming: isStreaming });
           el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';
@@ -4500,6 +4585,7 @@
       '<button class="cumulus-topbar-check-update" data-testid="webchat-check-update" title="Check for update">&#8635;</button>' +
       '<span class="cumulus-topbar-check-result" data-testid="webchat-check-result" style="display:none"></span></span>' +
       '<div class="cumulus-topbar-right">' +
+      '<button class="cumulus-topbar-settings" data-testid="webchat-settings-btn" title="Gateway settings — models, providers, API keys">&#9881;</button>' +
       '<span class="cumulus-header-status">' +
       '<span class="cumulus-status-dot" data-testid="webchat-status-dot-app"></span>' +
       '<span data-testid="webchat-status-text-app">Disconnected</span>' +
@@ -4689,6 +4775,14 @@
       });
     }
 
+    // ── Topbar settings gear → gateway settings modal (task 128) ──
+    var topbarSettingsBtn = topbar.querySelector('[data-testid="webchat-settings-btn"]');
+    if (topbarSettingsBtn) {
+      topbarSettingsBtn.addEventListener('click', function () {
+        openSettingsModal();
+      });
+    }
+
     // ── Click status indicator to force reconnect ──
     var appStatusEl = topbar.querySelector('.cumulus-header-status');
     if (appStatusEl) {
@@ -5846,6 +5940,715 @@
       };
     }
 
+    // ── Settings modal (provider-organized model catalog + credentials) ──
+    // Live-editable via PUT /api/config (task 104) — takes effect on the NEXT turn
+    // with no restart, no JSON edit, no republish. Any valid gateway key.
+    // Gateway-level config, opened from the topbar gear next to the connection
+    // status — not tied to any thread panel (task 128).
+    function openSettingsModal() {
+      var backdrop = document.createElement('div');
+      backdrop.className = 'cumulus-settings-backdrop';
+      backdrop.setAttribute('data-testid', 'webchat-settings-modal');
+      var modal = document.createElement('div');
+      modal.className = 'cumulus-settings-modal';
+
+      var mHeader = document.createElement('div');
+      mHeader.className = 'cumulus-settings-header';
+      var mHeaderText = document.createElement('div');
+      var mTitle = document.createElement('div');
+      mTitle.className = 'cumulus-settings-title';
+      mTitle.textContent = 'Gateway settings';
+      var mSub = document.createElement('div');
+      mSub.className = 'cumulus-settings-subtitle';
+      mSub.textContent =
+        'Manage Anthropic, OpenAI, and HuggingFace models — changes apply to new turns instantly';
+      mHeaderText.appendChild(mTitle);
+      mHeaderText.appendChild(mSub);
+      var mClose = document.createElement('button');
+      mClose.className = 'cumulus-overlay-close';
+      mClose.textContent = '\xD7';
+      mClose.setAttribute('data-testid', 'webchat-settings-close');
+      mClose.addEventListener('click', function () {
+        backdrop.remove();
+      });
+      mHeader.appendChild(mHeaderText);
+      mHeader.appendChild(mClose);
+      modal.appendChild(mHeader);
+
+      var body = document.createElement('div');
+      body.className = 'cumulus-settings-body';
+
+      // Task 130 (Option C): ONE gateway-default control, up top — answers "what
+      // will a new thread use?" before the catalog. The per-row radios are gone.
+      var defaultLabelSection = document.createElement('div');
+      defaultLabelSection.className = 'cumulus-settings-section-label';
+      defaultLabelSection.textContent = 'Default model';
+      body.appendChild(defaultLabelSection);
+      var defaultCard = document.createElement('div');
+      defaultCard.className = 'cumulus-settings-default-card';
+      var defaultCardLabel = document.createElement('label');
+      defaultCardLabel.textContent = 'New threads use';
+      var defaultSelect = document.createElement('select');
+      defaultSelect.className = 'cumulus-settings-select';
+      defaultSelect.setAttribute('data-testid', 'webchat-gw-default-select');
+      defaultSelect.addEventListener('change', function () {
+        applyGatewayDefault(gwState.catalog, defaultSelect.value);
+        renderAll();
+      });
+      defaultCard.appendChild(defaultCardLabel);
+      defaultCard.appendChild(defaultSelect);
+      body.appendChild(defaultCard);
+
+      var modelsLabel = document.createElement('div');
+      modelsLabel.className = 'cumulus-settings-section-label';
+      modelsLabel.textContent = 'Model catalog';
+      body.appendChild(modelsLabel);
+
+      var gwList = document.createElement('div');
+      gwList.setAttribute('data-testid', 'webchat-gateway-models');
+      body.appendChild(gwList);
+
+      var addCard = document.createElement('div');
+      addCard.className = 'cumulus-settings-add-card';
+      var addTitle = document.createElement('div');
+      addTitle.className = 'cumulus-settings-add-title';
+      addTitle.textContent = 'Add a model';
+      addCard.appendChild(addTitle);
+      var addWrap = document.createElement('div');
+      addWrap.className = 'cumulus-settings-add-row';
+      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);
+      });
+      var addId = document.createElement('input');
+      addId.type = 'text';
+      addId.className = 'cumulus-settings-input';
+      addId.placeholder = 'Model ID / name';
+      addId.setAttribute('data-testid', 'webchat-gw-add-id');
+      var addLabel = document.createElement('input');
+      addLabel.type = 'text';
+      addLabel.className = 'cumulus-settings-input';
+      addLabel.placeholder = 'Display label (optional)';
+      addLabel.setAttribute('data-testid', 'webchat-gw-add-label');
+      var addContext = document.createElement('input');
+      addContext.type = 'number';
+      addContext.min = '1';
+      addContext.step = '1';
+      addContext.className = 'cumulus-settings-input';
+      addContext.placeholder = 'Context tokens';
+      addContext.setAttribute('data-testid', 'webchat-gw-add-context');
+      var addBtn = document.createElement('button');
+      addBtn.type = 'button';
+      addBtn.textContent = '+ Add';
+      addBtn.className = 'cumulus-settings-add-btn';
+      addBtn.setAttribute('data-testid', 'webchat-gw-add-btn');
+      addWrap.appendChild(addProvider);
+      addWrap.appendChild(addId);
+      addWrap.appendChild(addLabel);
+      addWrap.appendChild(addContext);
+      addWrap.appendChild(addBtn);
+      addCard.appendChild(addWrap);
+      body.appendChild(addCard);
+
+      // ── 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');
+      licenseLabel.className = 'cumulus-settings-section-label';
+      licenseLabel.textContent = 'License';
+      body.appendChild(licenseLabel);
+      var licenseCard = document.createElement('div');
+      licenseCard.className = 'cumulus-settings-add-card';
+      var licenseStatusLine = document.createElement('div');
+      licenseStatusLine.className = 'cumulus-settings-add-title';
+      licenseStatusLine.setAttribute('data-testid', 'webchat-gw-license-status');
+      licenseStatusLine.textContent = 'License status unknown';
+      licenseCard.appendChild(licenseStatusLine);
+      var licensePurpose = document.createElement('div');
+      licensePurpose.className = 'cumulus-settings-subtitle';
+      licensePurpose.setAttribute('data-testid', 'webchat-gw-license-purpose');
+      licensePurpose.textContent =
+        'Required to run web-app agents in production. Unlicensed, each thread ' +
+        'namespace is capped at 5 visitor threads (demo mode); your own threads, ' +
+        'the CLI and the TUI are never limited. Keys are verified offline and ' +
+        'cover one whole-number release. Contact ops@luckydrawdesign.com.';
+      licenseCard.appendChild(licensePurpose);
+      var licenseRow = document.createElement('div');
+      licenseRow.className = 'cumulus-settings-add-row';
+      var licenseInput = document.createElement('input');
+      licenseInput.type = 'text';
+      licenseInput.className = 'cumulus-settings-input';
+      licenseInput.placeholder = 'License key (cumulus-lic-v1.…)';
+      licenseInput.setAttribute('data-testid', 'webchat-gw-license-input');
+      var licenseClearBtn = document.createElement('button');
+      licenseClearBtn.type = 'button';
+      licenseClearBtn.textContent = 'Clear';
+      licenseClearBtn.className = 'cumulus-settings-add-btn';
+      licenseClearBtn.setAttribute('data-testid', 'webchat-gw-license-clear');
+      licenseRow.appendChild(licenseInput);
+      licenseRow.appendChild(licenseClearBtn);
+      licenseCard.appendChild(licenseRow);
+      var licenseNote = document.createElement('div');
+      licenseNote.className = 'cumulus-settings-subtitle';
+      licenseNote.textContent = 'Takes effect on gateway reload';
+      licenseCard.appendChild(licenseNote);
+      body.appendChild(licenseCard);
+      modal.appendChild(body);
+
+      var footer = document.createElement('div');
+      footer.className = 'cumulus-settings-footer';
+      var saveBtn = document.createElement('button');
+      saveBtn.textContent = 'Save';
+      saveBtn.className = 'cumulus-settings-btn';
+      saveBtn.setAttribute('data-testid', 'webchat-gw-save');
+      var gwStatus = document.createElement('span');
+      gwStatus.className = 'cumulus-settings-status';
+      footer.appendChild(saveBtn);
+      footer.appendChild(gwStatus);
+      modal.appendChild(footer);
+
+      backdrop.appendChild(modal);
+      backdrop.addEventListener('click', function (e) {
+        if (e.target === backdrop) backdrop.remove();
+      });
+      document.body.appendChild(backdrop);
+
+      var gwState = { catalog: [], sentinel: null };
+      var credentialInputs = {};
+      var credentialValues = { openai: '', huggingface: '', license: '' };
+      var credentialClears = { openai: false, huggingface: false, license: false };
+      function renderLicenseState(masked, info) {
+        licenseInput.value = credentialValues.license || '';
+        licenseInput.placeholder = credentialClears.license
+          ? 'Will be cleared on Save'
+          : masked || 'License key (cumulus-lic-v1.…)';
+        if (!info) {
+          licenseStatusLine.textContent = masked
+            ? 'License key configured'
+            : 'No license key — demo mode';
+          return;
+        }
+        var text = info.licensed
+          ? 'Licensed to ' + (info.licensee || 'unknown')
+          : 'Demo mode' + (info.reason && info.reason !== 'absent' ? ' (' + info.reason + ')' : '');
+        if (info.pendingReload) text += ' · key saved — takes effect on reload';
+        licenseStatusLine.textContent = text;
+      }
+      licenseInput.addEventListener('input', function () {
+        credentialValues.license = licenseInput.value;
+        credentialClears.license = false;
+      });
+      licenseClearBtn.addEventListener('click', function () {
+        credentialClears.license = true;
+        credentialValues.license = '';
+        renderLicenseState('', gwLicenseInfo);
+      });
+      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',
+        },
+      ];
+
+      function setSettingsStatus(message, kind) {
+        gwStatus.textContent = message || '';
+        gwStatus.className = 'cumulus-settings-status' + (kind ? ' ' + kind : '');
+      }
+
+      function formatContextTokens(n) {
+        return n >= 1000 ? Math.round(n / 1000) + 'k' : String(n);
+      }
+
+      function makeEditField(labelText, input) {
+        var field = document.createElement('div');
+        field.className = 'cumulus-settings-edit-field';
+        var caption = document.createElement('span');
+        caption.textContent = labelText;
+        field.appendChild(caption);
+        field.appendChild(input);
+        return field;
+      }
+
+      // Task 130: rows are read-only text at rest (label + mono id + ctx chip +
+      // default badge); ✎ flips one row into labeled inputs. `model.editing` is
+      // UI-only state — serialization rebuilds entries from `model.source` +
+      // explicit fields, so it never reaches the PUT payload.
+      function renderModelRow(model, providerDef, index) {
+        var row = document.createElement('div');
+        row.className =
+          'cumulus-settings-model-row ' +
+          model.provider +
+          (model.gatewayDefault ? ' is-default' : '') +
+          (model.editing ? ' editing' : '');
+        row.setAttribute('data-gw-model', model.id);
+        row.setAttribute('data-testid', 'webchat-gw-row-' + model.provider + '-' + index);
+
+        if (model.editing) {
+          var grid = document.createElement('div');
+          grid.className = 'cumulus-settings-edit-grid';
+
+          var idInput = document.createElement('input');
+          idInput.type = 'text';
+          idInput.className = 'cumulus-settings-input cumulus-settings-row-input';
+          idInput.value = model.id;
+          idInput.setAttribute('aria-label', providerDef.title + ' model ID');
+          idInput.setAttribute('data-testid', 'webchat-gw-id-' + model.provider + '-' + index);
+          idInput.addEventListener('input', function () {
+            model.id = idInput.value;
+          });
+          grid.appendChild(makeEditField('Model ID', idInput));
+
+          var labelInput = document.createElement('input');
+          labelInput.type = 'text';
+          labelInput.className = 'cumulus-settings-input cumulus-settings-row-input';
+          labelInput.value = model.label || model.id;
+          labelInput.setAttribute('aria-label', providerDef.title + ' display label');
+          labelInput.setAttribute(
+            'data-testid',
+            'webchat-gw-label-' + model.provider + '-' + index
+          );
+          labelInput.addEventListener('input', function () {
+            model.label = labelInput.value;
+          });
+          grid.appendChild(makeEditField('Display label', labelInput));
+
+          if (model.provider !== 'anthropic') {
+            var contextInput = document.createElement('input');
+            contextInput.type = 'number';
+            contextInput.min = '1';
+            contextInput.step = '1';
+            contextInput.className = 'cumulus-settings-input cumulus-settings-row-input';
+            contextInput.placeholder = '(default)';
+            contextInput.value = model.contextWindow || '';
+            contextInput.setAttribute('aria-label', providerDef.title + ' context window');
+            contextInput.setAttribute(
+              'data-testid',
+              'webchat-gw-context-' + model.provider + '-' + index
+            );
+            contextInput.addEventListener('input', function () {
+              model.contextWindow = contextInput.value ? Number(contextInput.value) : undefined;
+            });
+            grid.appendChild(makeEditField('Context tokens', contextInput));
+          }
+
+          var doneBtn = document.createElement('button');
+          doneBtn.type = 'button';
+          doneBtn.textContent = 'Done';
+          doneBtn.className = 'cumulus-settings-add-btn';
+          doneBtn.setAttribute('data-testid', 'webchat-gw-done-' + model.provider + '-' + index);
+          doneBtn.addEventListener('click', function () {
+            model.editing = false;
+            renderAll();
+          });
+          grid.appendChild(doneBtn);
+          row.appendChild(grid);
+          return row;
+        }
+
+        var name = document.createElement('div');
+        name.className = 'cumulus-settings-model-name';
+        var labelEl = document.createElement('div');
+        labelEl.className = 'cumulus-settings-model-label';
+        labelEl.textContent = model.label || model.id;
+        var idEl = document.createElement('div');
+        idEl.className = 'cumulus-settings-model-id';
+        idEl.textContent = model.id;
+        name.appendChild(labelEl);
+        name.appendChild(idEl);
+        row.appendChild(name);
+
+        if (model.provider !== 'anthropic' && model.contextWindow) {
+          var chip = document.createElement('span');
+          chip.className = 'cumulus-settings-context-chip';
+          chip.textContent = 'ctx ' + formatContextTokens(model.contextWindow);
+          row.appendChild(chip);
+        }
+
+        var badge = document.createElement('span');
+        badge.className = 'cumulus-settings-default-badge';
+        badge.textContent = 'default';
+        row.appendChild(badge);
+
+        var actions = document.createElement('div');
+        actions.className = 'cumulus-settings-row-actions';
+
+        var edit = document.createElement('button');
+        edit.type = 'button';
+        edit.className = 'cumulus-settings-row-edit';
+        edit.textContent = '✎';
+        edit.title = 'Edit ' + model.id;
+        edit.setAttribute('data-testid', 'webchat-gw-edit-' + model.provider + '-' + index);
+        edit.addEventListener('click', function () {
+          model.editing = true;
+          renderAll();
+        });
+        actions.appendChild(edit);
+
+        var remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'cumulus-settings-model-remove';
+        remove.textContent = '\xD7';
+        remove.title = 'Remove ' + model.id;
+        remove.setAttribute('data-testid', 'webchat-gw-remove-' + model.provider + '-' + index);
+        remove.addEventListener('click', function () {
+          var absoluteIndex = gwState.catalog.indexOf(model);
+          var wasGatewayDefault = model.gatewayDefault;
+          var wasProviderDefault = model.providerDefault;
+          if (absoluteIndex >= 0) gwState.catalog.splice(absoluteIndex, 1);
+          if (wasGatewayDefault && gwState.catalog.length) {
+            applyGatewayDefault(gwState.catalog, gwState.catalog[0].id);
+          }
+          if (
+            wasProviderDefault &&
+            !gwState.catalog.some(function (item) {
+              return item.provider === 'anthropic' && item.providerDefault;
+            })
+          ) {
+            var nextClaude = gwState.catalog.find(function (item) {
+              return item.provider === 'anthropic';
+            });
+            if (nextClaude) nextClaude.providerDefault = true;
+          }
+          renderAll();
+        });
+        actions.appendChild(remove);
+        row.appendChild(actions);
+        return row;
+      }
+
+      function renderCredential(card, provider) {
+        if (!provider.credential) {
+          var note = document.createElement('div');
+          note.className = 'cumulus-settings-credential-note';
+          note.textContent = 'Authenticate with `claude login` on the gateway host.';
+          card.appendChild(note);
+          return;
+        }
+        var credentialRow = document.createElement('div');
+        credentialRow.className = 'cumulus-settings-provider-credential';
+        var credentialLabel = document.createElement('label');
+        credentialLabel.textContent = 'API key';
+        var credentialInput = document.createElement('input');
+        credentialInput.type = 'password';
+        credentialInput.autocomplete = 'off';
+        credentialInput.className = 'cumulus-settings-input';
+        credentialInput.placeholder = credentialClears[provider.id]
+          ? 'Will be cleared on save'
+          : '(unset)';
+        credentialInput.value = credentialValues[provider.id] || '';
+        credentialInput.setAttribute('data-testid', provider.credentialTestId);
+        credentialInput.addEventListener('input', function () {
+          credentialValues[provider.id] = credentialInput.value;
+          credentialClears[provider.id] = false;
+          credentialInput.placeholder = '(unset)';
+        });
+        credentialInputs[provider.id] = credentialInput;
+        var clear = document.createElement('button');
+        clear.type = 'button';
+        clear.className = 'cumulus-settings-clear-btn';
+        clear.textContent = 'Clear';
+        clear.setAttribute('data-testid', 'webchat-gw-clear-' + provider.id + '-key');
+        clear.addEventListener('click', function () {
+          credentialClears[provider.id] = true;
+          credentialValues[provider.id] = '';
+          credentialInput.value = '';
+          credentialInput.placeholder = 'Will be cleared on save';
+          setSettingsStatus('Credential marked for removal', '');
+        });
+        credentialRow.appendChild(credentialLabel);
+        credentialRow.appendChild(credentialInput);
+        credentialRow.appendChild(clear);
+        card.appendChild(credentialRow);
+      }
+
+      function renderGwModels() {
+        gwList.innerHTML = '';
+        credentialInputs = {};
+        providerDefs.forEach(function (provider) {
+          var providerModels = gwState.catalog.filter(function (model) {
+            return model.provider === provider.id;
+          });
+          var card = document.createElement('section');
+          card.className = 'cumulus-settings-provider-card';
+          card.setAttribute('data-testid', 'webchat-gw-provider-' + provider.id);
+          var head = document.createElement('div');
+          head.className = 'cumulus-settings-provider-head';
+          var heading = document.createElement('div');
+          var title = document.createElement('div');
+          title.className = 'cumulus-settings-provider-title';
+          title.textContent = provider.title;
+          var description = document.createElement('div');
+          description.className = 'cumulus-settings-provider-desc';
+          description.textContent = provider.description;
+          heading.appendChild(title);
+          heading.appendChild(description);
+          var count = document.createElement('span');
+          count.className = 'cumulus-settings-provider-count';
+          count.textContent =
+            providerModels.length + (providerModels.length === 1 ? ' model' : ' models');
+          head.appendChild(heading);
+          head.appendChild(count);
+          card.appendChild(head);
+          var list = document.createElement('div');
+          list.className = 'cumulus-settings-provider-models';
+          if (!providerModels.length) {
+            var empty = document.createElement('div');
+            empty.className = 'cumulus-settings-provider-empty';
+            empty.textContent = 'No ' + provider.title + ' models configured.';
+            list.appendChild(empty);
+          } else {
+            providerModels.forEach(function (model, index) {
+              list.appendChild(renderModelRow(model, provider, index));
+            });
+          }
+          card.appendChild(list);
+          // The Claude sub-model default only surfaces when it can actually
+          // diverge from the gateway default (task 130) — gateway default on a
+          // direct provider, ≥2 Anthropic models. Otherwise coupling makes it
+          // redundant and it stays out of the way.
+          if (provider.id === 'anthropic' && claudeSubDefaultVisible(gwState.catalog)) {
+            var subRow = document.createElement('div');
+            subRow.className = 'cumulus-settings-claude-default-row';
+            var subLabel = document.createElement('label');
+            subLabel.textContent = 'When a thread picks Claude, use';
+            var subSelect = document.createElement('select');
+            subSelect.className = 'cumulus-settings-select';
+            subSelect.setAttribute('data-testid', 'webchat-gw-claude-default-select');
+            var subDefault = '';
+            providerModels.forEach(function (model) {
+              var opt = document.createElement('option');
+              opt.value = model.id;
+              opt.textContent = model.label || model.id;
+              subSelect.appendChild(opt);
+              if (model.providerDefault) subDefault = model.id;
+            });
+            subSelect.value = subDefault || (providerModels[0] && providerModels[0].id) || '';
+            subSelect.addEventListener('change', function () {
+              applyClaudeSubDefault(gwState.catalog, subSelect.value);
+            });
+            subRow.appendChild(subLabel);
+            subRow.appendChild(subSelect);
+            card.appendChild(subRow);
+          }
+          renderCredential(card, provider);
+          gwList.appendChild(card);
+        });
+      }
+
+      function renderDefaultSelect() {
+        defaultSelect.innerHTML = '';
+        if (!gwState.catalog.length) {
+          var none = document.createElement('option');
+          none.value = '';
+          none.textContent = 'No models configured';
+          defaultSelect.appendChild(none);
+          defaultSelect.disabled = true;
+          return;
+        }
+        defaultSelect.disabled = false;
+        providerDefs.forEach(function (provider) {
+          var group = null;
+          gwState.catalog.forEach(function (model) {
+            if (model.provider !== provider.id) return;
+            if (!group) {
+              group = document.createElement('optgroup');
+              group.label = provider.title;
+              defaultSelect.appendChild(group);
+            }
+            var opt = document.createElement('option');
+            opt.value = model.id;
+            opt.textContent = model.label || model.id;
+            group.appendChild(opt);
+          });
+        });
+        var current = gwState.catalog.find(function (model) {
+          return model.gatewayDefault;
+        });
+        defaultSelect.value = current ? current.id : gwState.catalog[0].id;
+      }
+
+      function renderAll() {
+        renderDefaultSelect();
+        renderGwModels();
+      }
+
+      addProvider.addEventListener('change', function () {
+        addContext.disabled = addProvider.value === 'anthropic';
+        if (addContext.disabled) addContext.value = '';
+      });
+      addBtn.addEventListener('click', function () {
+        var id = (addId.value || '').trim();
+        var provider = addProvider.value;
+        var context = addContext.value ? Number(addContext.value) : undefined;
+        if (!id) {
+          setSettingsStatus('Model ID is required', 'error');
+          return;
+        }
+        if (
+          id === 'claude' ||
+          gwState.catalog.some(function (item) {
+            return item.id === id;
+          })
+        ) {
+          setSettingsStatus('Duplicate or reserved model ID: ' + id, 'error');
+          return;
+        }
+        if (context !== undefined && (!Number.isInteger(context) || context <= 0)) {
+          setSettingsStatus('Context window must be a positive whole number', 'error');
+          return;
+        }
+        var model = {
+          id: id,
+          label: (addLabel.value || '').trim() || id,
+          provider: provider,
+          contextWindow: provider === 'anthropic' ? undefined : context,
+          gatewayDefault: gwState.catalog.length === 0,
+          providerDefault:
+            provider === 'anthropic' &&
+            !gwState.catalog.some(function (item) {
+              return item.provider === 'anthropic';
+            }),
+        };
+        gwState.catalog.push(model);
+        addId.value = '';
+        addLabel.value = '';
+        addContext.value = '';
+        setSettingsStatus('', '');
+        renderAll();
+      });
+
+      function refreshOpenModelCatalogs() {
+        var refresh = new XMLHttpRequest();
+        refresh.open('GET', '/api/models');
+        refresh.setRequestHeader('X-API-Key', activeApiKey);
+        refresh.onreadystatechange = function () {
+          if (refresh.readyState !== 4 || refresh.status !== 200) return;
+          try {
+            window.dispatchEvent(
+              new CustomEvent('cumulus-model-catalog-updated', {
+                detail: JSON.parse(refresh.responseText),
+              })
+            );
+          } catch (e) {
+            /* keep the saved config even if a panel refresh fails */
+          }
+        };
+        refresh.send();
+      }
+
+      saveBtn.addEventListener('click', function () {
+        var validationError = validateModelCatalog(gwState.catalog);
+        if (validationError) {
+          setSettingsStatus(validationError, 'error');
+          return;
+        }
+        saveBtn.disabled = true;
+        setSettingsStatus('Saving…', '');
+        var payload = addCredentialPatch(modelCatalogToGatewayConfig(gwState), {
+          openai: {
+            value: credentialValues.openai,
+            clear: credentialClears.openai,
+          },
+          huggingface: {
+            value: credentialValues.huggingface,
+            clear: credentialClears.huggingface,
+          },
+          license: {
+            value: credentialValues.license,
+            clear: credentialClears.license,
+          },
+        });
+        var save = new XMLHttpRequest();
+        save.open('PUT', '/api/config');
+        save.setRequestHeader('Content-Type', 'application/json');
+        save.setRequestHeader('X-API-Key', activeApiKey);
+        save.onreadystatechange = function () {
+          if (save.readyState !== 4) return;
+          saveBtn.disabled = false;
+          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;
+              renderAll();
+              renderLicenseState(gwLicenseMasked, gwLicenseInfo);
+              setSettingsStatus(
+                gwLicenseInfo && gwLicenseInfo.pendingReload
+                  ? 'Saved — license takes effect on gateway reload'
+                  : 'Saved — applies to new turns immediately',
+                'success'
+              );
+              refreshOpenModelCatalogs();
+            } catch (e) {
+              setSettingsStatus('Saved, but the response could not be rendered', 'error');
+            }
+          } else {
+            setSettingsStatus('Error ' + save.status, 'error');
+          }
+        };
+        save.send(JSON.stringify(payload));
+      });
+
+      (function loadGatewayConfig() {
+        var load = new XMLHttpRequest();
+        load.open('GET', '/api/config');
+        load.setRequestHeader('X-API-Key', activeApiKey);
+        load.onreadystatechange = function () {
+          if (load.readyState !== 4) return;
+          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;
+              renderAll();
+              renderLicenseState(gwLicenseMasked, gwLicenseInfo);
+            } catch (e) {
+              setSettingsStatus('Gateway settings response was invalid', 'error');
+            }
+          } else {
+            setSettingsStatus('Load failed (' + load.status + ')', 'error');
+          }
+        };
+        load.send();
+      })();
+    }
+
     function buildThreadPanel(threadName) {
       var state = getThreadState(threadName);
 
@@ -5907,14 +6710,14 @@
       claudeModelSelect.setAttribute('data-testid', 'webchat-claude-model-select');
       claudeModelSelect.setAttribute('data-thread-claude-model', threadName);
       claudeModelSelect.setAttribute('title', 'Claude model');
-      // First-paint / old-server fallback only — the authoritative list comes from
-      // /api/models (resp.claudeModels), populated below in loadModels().
-      var CLAUDE_MODELS_FALLBACK = [
-        { id: 'claude-opus-5[1m]', label: 'Opus 5', default: true },
-        { id: 'claude-sonnet-5[1m]', label: 'Sonnet 5' },
-      ];
+      // Populated ONLY from /api/models (resp.claudeModels) — task 129 deleted
+      // the hardcoded fallback list. An empty catalog hides the select entirely
+      // (visibility is re-derived in updateEffortVisibility, which also gates
+      // on model === 'claude'); the Settings gear is where models get added.
+      var claudeModelListEmpty = true;
       function populateClaudeModels(list) {
-        var models = list && list.length ? list : CLAUDE_MODELS_FALLBACK;
+        var models = list && list.length ? list : [];
+        claudeModelListEmpty = models.length === 0;
         claudeModelSelect.innerHTML = '';
         var def = null;
         models.forEach(function (m) {
@@ -5925,6 +6728,7 @@
           if (m.default) def = m.id;
         });
         claudeModelSelect.value = def || (models[0] && models[0].id) || '';
+        claudeModelSelect.style.display = claudeModelListEmpty ? 'none' : '';
       }
       populateClaudeModels(null);
 
@@ -6024,7 +6828,7 @@
       function updateEffortVisibility() {
         var isClaude = modelSelect.value === 'claude';
         effortSelect.style.display = isClaude ? '' : 'none';
-        claudeModelSelect.style.display = isClaude ? '' : 'none';
+        claudeModelSelect.style.display = isClaude && !claudeModelListEmpty ? '' : 'none';
         // Hide the whole Model/Effort popover rows (label included) for non-Claude providers.
         var mr = panel.querySelector('[data-config-row="model"]');
         var er = panel.querySelector('[data-config-row="effort"]');
@@ -6185,546 +6989,13 @@
       modelPicker.appendChild(configBreadcrumb);
       modelPicker.appendChild(modelPopover);
 
-      // ── Settings modal (provider-organized model catalog + credentials) ──
-      // Live-editable via PUT /api/config (task 104) — takes effect on the NEXT turn
-      // with no restart, no JSON edit, no republish. Any valid gateway key.
-      function openSettingsModal() {
-        var backdrop = document.createElement('div');
-        backdrop.className = 'cumulus-settings-backdrop';
-        backdrop.setAttribute('data-testid', 'webchat-settings-modal');
-        var modal = document.createElement('div');
-        modal.className = 'cumulus-settings-modal';
-
-        var mHeader = document.createElement('div');
-        mHeader.className = 'cumulus-settings-header';
-        var mHeaderText = document.createElement('div');
-        var mTitle = document.createElement('div');
-        mTitle.className = 'cumulus-settings-title';
-        mTitle.textContent = 'Gateway settings';
-        var mSub = document.createElement('div');
-        mSub.className = 'cumulus-settings-subtitle';
-        mSub.textContent =
-          'Manage Anthropic, OpenAI, and HuggingFace models — changes apply to new turns instantly';
-        mHeaderText.appendChild(mTitle);
-        mHeaderText.appendChild(mSub);
-        var mClose = document.createElement('button');
-        mClose.className = 'cumulus-overlay-close';
-        mClose.textContent = '\xD7';
-        mClose.setAttribute('data-testid', 'webchat-settings-close');
-        mClose.addEventListener('click', function () {
-          backdrop.remove();
-        });
-        mHeader.appendChild(mHeaderText);
-        mHeader.appendChild(mClose);
-        modal.appendChild(mHeader);
-
-        var body = document.createElement('div');
-        body.className = 'cumulus-settings-body';
-
-        var modelsLabel = document.createElement('div');
-        modelsLabel.className = 'cumulus-settings-section-label';
-        modelsLabel.textContent = 'Models by provider';
-        body.appendChild(modelsLabel);
-
-        var gwList = document.createElement('div');
-        gwList.setAttribute('data-testid', 'webchat-gateway-models');
-        body.appendChild(gwList);
-
-        var addCard = document.createElement('div');
-        addCard.className = 'cumulus-settings-add-card';
-        var addTitle = document.createElement('div');
-        addTitle.className = 'cumulus-settings-add-title';
-        addTitle.textContent = 'Add a model';
-        addCard.appendChild(addTitle);
-        var addWrap = document.createElement('div');
-        addWrap.className = 'cumulus-settings-add-row';
-        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);
-        });
-        var addId = document.createElement('input');
-        addId.type = 'text';
-        addId.className = 'cumulus-settings-input';
-        addId.placeholder = 'Model ID / name';
-        addId.setAttribute('data-testid', 'webchat-gw-add-id');
-        var addLabel = document.createElement('input');
-        addLabel.type = 'text';
-        addLabel.className = 'cumulus-settings-input';
-        addLabel.placeholder = 'Display label (optional)';
-        addLabel.setAttribute('data-testid', 'webchat-gw-add-label');
-        var addContext = document.createElement('input');
-        addContext.type = 'number';
-        addContext.min = '1';
-        addContext.step = '1';
-        addContext.className = 'cumulus-settings-input';
-        addContext.placeholder = 'Context tokens';
-        addContext.setAttribute('data-testid', 'webchat-gw-add-context');
-        var addBtn = document.createElement('button');
-        addBtn.type = 'button';
-        addBtn.textContent = '+ Add';
-        addBtn.className = 'cumulus-settings-add-btn';
-        addBtn.setAttribute('data-testid', 'webchat-gw-add-btn');
-        addWrap.appendChild(addProvider);
-        addWrap.appendChild(addId);
-        addWrap.appendChild(addLabel);
-        addWrap.appendChild(addContext);
-        addWrap.appendChild(addBtn);
-        addCard.appendChild(addWrap);
-        body.appendChild(addCard);
-        modal.appendChild(body);
-
-        var footer = document.createElement('div');
-        footer.className = 'cumulus-settings-footer';
-        var saveBtn = document.createElement('button');
-        saveBtn.textContent = 'Save';
-        saveBtn.className = 'cumulus-settings-btn';
-        saveBtn.setAttribute('data-testid', 'webchat-gw-save');
-        var gwStatus = document.createElement('span');
-        gwStatus.className = 'cumulus-settings-status';
-        footer.appendChild(saveBtn);
-        footer.appendChild(gwStatus);
-        modal.appendChild(footer);
-
-        backdrop.appendChild(modal);
-        backdrop.addEventListener('click', function (e) {
-          if (e.target === backdrop) backdrop.remove();
-        });
-        document.body.appendChild(backdrop);
-
-        var gwState = { catalog: [], sentinel: null };
-        var credentialInputs = {};
-        var credentialValues = { openai: '', huggingface: '' };
-        var credentialClears = { openai: false, huggingface: false };
-        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',
-          },
-        ];
-
-        function setSettingsStatus(message, kind) {
-          gwStatus.textContent = message || '';
-          gwStatus.className = 'cumulus-settings-status' + (kind ? ' ' + kind : '');
-        }
-
-        function makeRadioLabel(text, input) {
-          var wrap = document.createElement('label');
-          wrap.className = 'cumulus-settings-radio-label';
-          wrap.appendChild(input);
-          wrap.appendChild(document.createElement('br'));
-          wrap.appendChild(document.createTextNode(text));
-          return wrap;
-        }
-
-        function renderModelRow(model, providerModels, index) {
-          var row = document.createElement('div');
-          row.className =
-            'cumulus-settings-model-row ' +
-            model.provider +
-            (model.gatewayDefault ? ' is-default' : '');
-          row.setAttribute('data-gw-model', model.id);
-          row.setAttribute('data-testid', 'webchat-gw-row-' + model.provider + '-' + index);
-
-          var gatewayRadio = document.createElement('input');
-          gatewayRadio.type = 'radio';
-          gatewayRadio.name = 'gw-default';
-          gatewayRadio.checked = !!model.gatewayDefault;
-          gatewayRadio.setAttribute(
-            'data-testid',
-            'webchat-gw-default-' + model.provider + '-' + index
-          );
-          gatewayRadio.addEventListener('change', function () {
-            gwState.catalog.forEach(function (item) {
-              item.gatewayDefault = false;
-            });
-            model.gatewayDefault = true;
-            if (model.provider === 'anthropic') {
-              gwState.catalog.forEach(function (item) {
-                if (item.provider === 'anthropic') item.providerDefault = false;
-              });
-              model.providerDefault = true;
-            }
-            renderGwModels();
-          });
-          row.appendChild(makeRadioLabel('gateway', gatewayRadio));
-
-          if (model.provider === 'anthropic') {
-            var providerRadio = document.createElement('input');
-            providerRadio.type = 'radio';
-            providerRadio.name = 'gw-anthropic-default';
-            providerRadio.checked = !!model.providerDefault;
-            providerRadio.setAttribute(
-              'data-testid',
-              'webchat-gw-provider-default-anthropic-' + index
-            );
-            providerRadio.addEventListener('change', function () {
-              gwState.catalog.forEach(function (item) {
-                if (item.provider === 'anthropic') item.providerDefault = false;
-              });
-              model.providerDefault = true;
-              if (
-                gwState.catalog.some(function (item) {
-                  return item.provider === 'anthropic' && item.gatewayDefault;
-                })
-              ) {
-                gwState.catalog.forEach(function (item) {
-                  item.gatewayDefault = false;
-                });
-                model.gatewayDefault = true;
-              }
-              renderGwModels();
-            });
-            row.appendChild(makeRadioLabel('Claude', providerRadio));
-          } else {
-            var spacer = document.createElement('span');
-            row.appendChild(spacer);
-          }
-
-          var idInput = document.createElement('input');
-          idInput.type = 'text';
-          idInput.className = 'cumulus-settings-input cumulus-settings-row-input';
-          idInput.value = model.id;
-          idInput.setAttribute('aria-label', providerModels.title + ' model ID');
-          idInput.setAttribute('data-testid', 'webchat-gw-id-' + model.provider + '-' + index);
-          idInput.addEventListener('input', function () {
-            model.id = idInput.value;
-          });
-          row.appendChild(idInput);
-
-          var labelInput = document.createElement('input');
-          labelInput.type = 'text';
-          labelInput.className = 'cumulus-settings-input cumulus-settings-row-input';
-          labelInput.value = model.label || model.id;
-          labelInput.setAttribute('aria-label', providerModels.title + ' display label');
-          labelInput.setAttribute(
-            'data-testid',
-            'webchat-gw-label-' + model.provider + '-' + index
-          );
-          labelInput.addEventListener('input', function () {
-            model.label = labelInput.value;
-          });
-          row.appendChild(labelInput);
-
-          if (model.provider !== 'anthropic') {
-            var contextInput = document.createElement('input');
-            contextInput.type = 'number';
-            contextInput.min = '1';
-            contextInput.step = '1';
-            contextInput.className = 'cumulus-settings-input cumulus-settings-row-input';
-            contextInput.placeholder = 'Context';
-            contextInput.value = model.contextWindow || '';
-            contextInput.setAttribute('aria-label', providerModels.title + ' context window');
-            contextInput.setAttribute(
-              'data-testid',
-              'webchat-gw-context-' + model.provider + '-' + index
-            );
-            contextInput.addEventListener('input', function () {
-              model.contextWindow = contextInput.value ? Number(contextInput.value) : undefined;
-            });
-            row.appendChild(contextInput);
-          }
-
-          var remove = document.createElement('button');
-          remove.type = 'button';
-          remove.className = 'cumulus-settings-model-remove';
-          remove.textContent = '\xD7';
-          remove.title = 'Remove ' + model.id;
-          remove.setAttribute('data-testid', 'webchat-gw-remove-' + model.provider + '-' + index);
-          remove.addEventListener('click', function () {
-            var absoluteIndex = gwState.catalog.indexOf(model);
-            var wasGatewayDefault = model.gatewayDefault;
-            var wasProviderDefault = model.providerDefault;
-            if (absoluteIndex >= 0) gwState.catalog.splice(absoluteIndex, 1);
-            if (wasGatewayDefault && gwState.catalog.length) {
-              var nextGatewayDefault = gwState.catalog[0];
-              nextGatewayDefault.gatewayDefault = true;
-              if (nextGatewayDefault.provider === 'anthropic') {
-                gwState.catalog.forEach(function (item) {
-                  if (item.provider === 'anthropic') item.providerDefault = false;
-                });
-                nextGatewayDefault.providerDefault = true;
-              }
-            }
-            if (
-              wasProviderDefault &&
-              !gwState.catalog.some(function (item) {
-                return item.provider === 'anthropic' && item.providerDefault;
-              })
-            ) {
-              var nextClaude = gwState.catalog.find(function (item) {
-                return item.provider === 'anthropic';
-              });
-              if (nextClaude) nextClaude.providerDefault = true;
-            }
-            renderGwModels();
-          });
-          row.appendChild(remove);
-          return row;
-        }
-
-        function renderCredential(card, provider) {
-          if (!provider.credential) {
-            var note = document.createElement('div');
-            note.className = 'cumulus-settings-credential-note';
-            note.textContent = 'Authenticate with `claude login` on the gateway host.';
-            card.appendChild(note);
-            return;
-          }
-          var credentialRow = document.createElement('div');
-          credentialRow.className = 'cumulus-settings-provider-credential';
-          var credentialLabel = document.createElement('label');
-          credentialLabel.textContent = 'API key';
-          var credentialInput = document.createElement('input');
-          credentialInput.type = 'password';
-          credentialInput.autocomplete = 'off';
-          credentialInput.className = 'cumulus-settings-input';
-          credentialInput.placeholder = credentialClears[provider.id]
-            ? 'Will be cleared on save'
-            : '(unset)';
-          credentialInput.value = credentialValues[provider.id] || '';
-          credentialInput.setAttribute('data-testid', provider.credentialTestId);
-          credentialInput.addEventListener('input', function () {
-            credentialValues[provider.id] = credentialInput.value;
-            credentialClears[provider.id] = false;
-            credentialInput.placeholder = '(unset)';
-          });
-          credentialInputs[provider.id] = credentialInput;
-          var clear = document.createElement('button');
-          clear.type = 'button';
-          clear.className = 'cumulus-settings-clear-btn';
-          clear.textContent = 'Clear';
-          clear.setAttribute('data-testid', 'webchat-gw-clear-' + provider.id + '-key');
-          clear.addEventListener('click', function () {
-            credentialClears[provider.id] = true;
-            credentialValues[provider.id] = '';
-            credentialInput.value = '';
-            credentialInput.placeholder = 'Will be cleared on save';
-            setSettingsStatus('Credential marked for removal', '');
-          });
-          credentialRow.appendChild(credentialLabel);
-          credentialRow.appendChild(credentialInput);
-          credentialRow.appendChild(clear);
-          card.appendChild(credentialRow);
-        }
-
-        function renderGwModels() {
-          gwList.innerHTML = '';
-          credentialInputs = {};
-          providerDefs.forEach(function (provider) {
-            var providerModels = gwState.catalog.filter(function (model) {
-              return model.provider === provider.id;
-            });
-            var card = document.createElement('section');
-            card.className = 'cumulus-settings-provider-card';
-            card.setAttribute('data-testid', 'webchat-gw-provider-' + provider.id);
-            var head = document.createElement('div');
-            head.className = 'cumulus-settings-provider-head';
-            var heading = document.createElement('div');
-            var title = document.createElement('div');
-            title.className = 'cumulus-settings-provider-title';
-            title.textContent = provider.title;
-            var description = document.createElement('div');
-            description.className = 'cumulus-settings-provider-desc';
-            description.textContent = provider.description;
-            heading.appendChild(title);
-            heading.appendChild(description);
-            var count = document.createElement('span');
-            count.className = 'cumulus-settings-provider-count';
-            count.textContent =
-              providerModels.length + (providerModels.length === 1 ? ' model' : ' models');
-            head.appendChild(heading);
-            head.appendChild(count);
-            card.appendChild(head);
-            var list = document.createElement('div');
-            list.className = 'cumulus-settings-provider-models';
-            if (!providerModels.length) {
-              var empty = document.createElement('div');
-              empty.className = 'cumulus-settings-provider-empty';
-              empty.textContent = 'No ' + provider.title + ' models configured.';
-              list.appendChild(empty);
-            } else {
-              providerModels.forEach(function (model, index) {
-                list.appendChild(renderModelRow(model, provider, index));
-              });
-            }
-            card.appendChild(list);
-            renderCredential(card, provider);
-            gwList.appendChild(card);
-          });
-        }
-
-        addProvider.addEventListener('change', function () {
-          addContext.disabled = addProvider.value === 'anthropic';
-          if (addContext.disabled) addContext.value = '';
-        });
-        addBtn.addEventListener('click', function () {
-          var id = (addId.value || '').trim();
-          var provider = addProvider.value;
-          var context = addContext.value ? Number(addContext.value) : undefined;
-          if (!id) {
-            setSettingsStatus('Model ID is required', 'error');
-            return;
-          }
-          if (
-            id === 'claude' ||
-            gwState.catalog.some(function (item) {
-              return item.id === id;
-            })
-          ) {
-            setSettingsStatus('Duplicate or reserved model ID: ' + id, 'error');
-            return;
-          }
-          if (context !== undefined && (!Number.isInteger(context) || context <= 0)) {
-            setSettingsStatus('Context window must be a positive whole number', 'error');
-            return;
-          }
-          var model = {
-            id: id,
-            label: (addLabel.value || '').trim() || id,
-            provider: provider,
-            contextWindow: provider === 'anthropic' ? undefined : context,
-            gatewayDefault: gwState.catalog.length === 0,
-            providerDefault:
-              provider === 'anthropic' &&
-              !gwState.catalog.some(function (item) {
-                return item.provider === 'anthropic';
-              }),
-          };
-          gwState.catalog.push(model);
-          addId.value = '';
-          addLabel.value = '';
-          addContext.value = '';
-          setSettingsStatus('', '');
-          renderGwModels();
-        });
-
-        function refreshOpenModelCatalogs() {
-          var refresh = new XMLHttpRequest();
-          refresh.open('GET', '/api/models');
-          refresh.setRequestHeader('X-API-Key', activeApiKey);
-          refresh.onreadystatechange = function () {
-            if (refresh.readyState !== 4 || refresh.status !== 200) return;
-            try {
-              window.dispatchEvent(
-                new CustomEvent('cumulus-model-catalog-updated', {
-                  detail: JSON.parse(refresh.responseText),
-                })
-              );
-            } catch (e) {
-              /* keep the saved config even if a panel refresh fails */
-            }
-          };
-          refresh.send();
-        }
-
-        saveBtn.addEventListener('click', function () {
-          var validationError = validateModelCatalog(gwState.catalog);
-          if (validationError) {
-            setSettingsStatus(validationError, 'error');
-            return;
-          }
-          saveBtn.disabled = true;
-          setSettingsStatus('Saving…', '');
-          var payload = addCredentialPatch(modelCatalogToGatewayConfig(gwState), {
-            openai: {
-              value: credentialValues.openai,
-              clear: credentialClears.openai,
-            },
-            huggingface: {
-              value: credentialValues.huggingface,
-              clear: credentialClears.huggingface,
-            },
-          });
-          var save = new XMLHttpRequest();
-          save.open('PUT', '/api/config');
-          save.setRequestHeader('Content-Type', 'application/json');
-          save.setRequestHeader('X-API-Key', activeApiKey);
-          save.onreadystatechange = function () {
-            if (save.readyState !== 4) return;
-            saveBtn.disabled = false;
-            if (save.status === 200) {
-              try {
-                var response = JSON.parse(save.responseText);
-                gwState = gatewayConfigToModelCatalog(response);
-                credentialClears.openai = false;
-                credentialClears.huggingface = false;
-                credentialValues.openai = response.openaiApiKey || '';
-                credentialValues.huggingface = response.hfApiKey || '';
-                renderGwModels();
-                setSettingsStatus('Saved — applies to new turns immediately', 'success');
-                refreshOpenModelCatalogs();
-              } catch (e) {
-                setSettingsStatus('Saved, but the response could not be rendered', 'error');
-              }
-            } else {
-              setSettingsStatus('Error ' + save.status, 'error');
-            }
-          };
-          save.send(JSON.stringify(payload));
-        });
-
-        (function loadGatewayConfig() {
-          var load = new XMLHttpRequest();
-          load.open('GET', '/api/config');
-          load.setRequestHeader('X-API-Key', activeApiKey);
-          load.onreadystatechange = function () {
-            if (load.readyState !== 4) return;
-            if (load.status === 200) {
-              try {
-                var response = JSON.parse(load.responseText);
-                gwState = gatewayConfigToModelCatalog(response);
-                credentialValues.openai = response.openaiApiKey || '';
-                credentialValues.huggingface = response.hfApiKey || '';
-                renderGwModels();
-              } catch (e) {
-                setSettingsStatus('Gateway settings response was invalid', 'error');
-              }
-            } else {
-              setSettingsStatus('Load failed (' + load.status + ')', 'error');
-            }
-          };
-          load.send();
-        })();
-      }
-
       panelHeader.appendChild(modelPicker);
 
-      // Action buttons (settings + include + revert)
+      // Action buttons (include + revert + select) — gateway settings moved
+      // to the topbar gear (task 128)
       var actions = document.createElement('div');
       actions.className = 'cumulus-panel-actions';
 
-      var settingsBtn = document.createElement('button');
-      settingsBtn.className = 'cumulus-panel-action-btn';
-      settingsBtn.setAttribute('data-testid', 'webchat-settings-btn');
-      settingsBtn.setAttribute('title', 'Settings — configure available models');
-      settingsBtn.textContent = '⚙'; // gear
-      settingsBtn.addEventListener('click', openSettingsModal);
-      actions.appendChild(settingsBtn);
-
       var includeBtn = document.createElement('button');
       includeBtn.className = 'cumulus-panel-action-btn';
       includeBtn.setAttribute('data-testid', 'webchat-include-btn');
@@ -7175,7 +7446,7 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          var mdResult = renderMarkdown(content);
+          var mdResult = renderMarkdown(content, { streaming: isStreaming });
           el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';