@luckydraw/cumulus 0.31.49 → 0.31.51

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v0.31.51
+
+- Fixed the model picker popover overflowing off the right edge of the screen on mobile — it now opens back into the viewport and stays within the screen width on any device.
+
+## v0.31.50
+
+- Redesigned the model controls: the header model label now opens a compact popover for picking provider / model / effort, instead of a full-panel modal.
+- New ⚙ Settings button opens a clean, centered modal for managing the available Claude models and provider credentials.
+- Saving a model change refreshes the thread's model dropdown live, no reload needed.
+
 ## v0.31.49
 
 - Add, remove, and set the default Claude model — and set the HuggingFace API key — directly from the in-app config panel. Changes take effect on the next turn with no restart.

package/dist/gateway/static/widget.js

@@ -1153,13 +1153,103 @@
     '}',
     '.cumulus-config-breadcrumb:hover { color: #ddd; background: #353535; }',
     '.cumulus-config-breadcrumb .sep { color: #555; margin: 0 0.3em; }',
-    /* config modal: reuses .cumulus-overlay family; stack the relocated selects */
-    '.cumulus-config-modal-row {',
+    '.cumulus-config-breadcrumb::after { content: " \\25BE"; color: #666; font-size: 0.85em; }',
+
+    /* ── Quick model popover (per-thread Provider / Model / Effort) ── */
+    '.cumulus-model-picker { position: relative; display: inline-flex; align-items: center; }',
+    '.cumulus-model-popover {',
+    '  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 40;',
+    '  min-width: 236px; max-width: calc(100vw - 24px); box-sizing: border-box;',
+    '  background: #262626; border: 1px solid #3d3d3d;',
+    '  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); padding: 4px 12px 8px;',
+    '}',
+    '.cumulus-model-popover-row {',
     '  display: flex; align-items: center; justify-content: space-between;',
-    '  gap: 10px; padding: 0.6em 0; border-bottom: 1px solid #2f2f2f;',
+    '  gap: 14px; padding: 8px 0; border-bottom: 1px solid #313131;',
+    '}',
+    '.cumulus-model-popover-row:last-child { border-bottom: none; }',
+    '.cumulus-model-popover-label {',
+    '  color: #8c8c8c; font-size: 10px; font-weight: 600;',
+    '  text-transform: uppercase; letter-spacing: 0.06em;',
     '}',
-    '.cumulus-config-modal-row:last-child { border-bottom: none; }',
-    '.cumulus-config-modal-label { color: #bbb; font-size: 0.9em; }',
+    '.cumulus-model-popover select { max-width: 152px; margin: 0; }',
+
+    /* ── Settings modal (gateway Claude model catalog + provider creds) ── */
+    '.cumulus-settings-backdrop {',
+    '  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55);',
+    '  display: flex; align-items: center; justify-content: center; padding: 20px;',
+    '}',
+    '.cumulus-settings-modal {',
+    '  background: #232323; border: 1px solid #3d3d3d; border-radius: 10px;',
+    '  width: min(520px, 100%); max-height: 82vh; display: flex; flex-direction: column;',
+    '  box-shadow: 0 16px 48px rgba(0,0,0,0.6); 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;',
+    '}',
+    '.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-footer {',
+    '  display: flex; align-items: center; gap: 12px; padding: 13px 18px;',
+    '  border-top: 1px solid #333; flex-shrink: 0;',
+    '}',
+    '.cumulus-settings-section-label {',
+    '  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;',
+    '  color: #777; margin: 16px 0 8px;',
+    '}',
+    '.cumulus-settings-body > .cumulus-settings-section-label:first-child { margin-top: 6px; }',
+    '.cumulus-settings-model-row {',
+    '  display: flex; align-items: center; gap: 11px; padding: 9px 11px;',
+    '  border: 1px solid #333; border-radius: 8px; margin-bottom: 7px; background: #1d1d1d;',
+    '}',
+    '.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-name { flex: 1; min-width: 0; }',
+    '.cumulus-settings-model-label {',
+    '  color: #e6e6e6; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '}',
+    '.cumulus-settings-model-id {',
+    '  color: #777; font-size: 11px; font-family: "SF Mono", Consolas, monospace;',
+    '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px;',
+    '}',
+    '.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;',
+    '}',
+    '.cumulus-settings-model-row.is-default .cumulus-settings-default-badge { display: inline-block; }',
+    '.cumulus-settings-model-remove {',
+    '  background: none; border: none; color: #666; cursor: pointer; font-size: 17px;',
+    '  line-height: 1; padding: 0 2px; flex-shrink: 0;',
+    '}',
+    '.cumulus-settings-model-remove:hover { color: #ef4444; }',
+    '.cumulus-settings-add-row { display: flex; gap: 7px; align-items: center; margin-top: 4px; }',
+    '.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-input:focus { border-color: #3b82f6; }',
+    '.cumulus-settings-input::placeholder { color: #5a5a5a; }',
+    '.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-btn {',
+    '  background: #2a6acf; border: none; color: #fff; font-weight: 600;',
+    '  padding: 8px 18px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit;',
+    '}',
+    '.cumulus-settings-btn:hover { background: #3a7ae0; }',
+    '.cumulus-settings-btn:disabled { background: #333; color: #777; 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;',
+    '}',
+    '.cumulus-settings-add-btn:hover { background: #3a3a3a; border-color: #555; }',
+    '.cumulus-settings-status { font-size: 12px; color: #999; }',
+    '.cumulus-settings-status.success { color: #22c55e; }',
+    '.cumulus-settings-status.error { color: #ef4444; }',
 
     /* ── Context menu (right-click on thread) ── */
     '.cumulus-context-menu {',
@@ -5549,14 +5639,11 @@
         var isClaude = modelSelect.value === 'claude';
         effortSelect.style.display = isClaude ? '' : 'none';
         claudeModelSelect.style.display = isClaude ? '' : 'none';
-        // If the config modal is open, hide the whole Model/Effort rows for non-Claude.
-        var modal = panel.querySelector('.cumulus-overlay[data-config-modal]');
-        if (modal) {
-          var mr = modal.querySelector('[data-config-row="model"]');
-          var er = modal.querySelector('[data-config-row="effort"]');
-          if (mr) mr.style.display = isClaude ? '' : 'none';
-          if (er) er.style.display = isClaude ? '' : '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"]');
+        if (mr) mr.style.display = isClaude ? '' : 'none';
+        if (er) er.style.display = isClaude ? '' : 'none';
         updateBreadcrumb();
       }
       updateEffortVisibility();
@@ -5677,114 +5764,161 @@
         xhr.send(JSON.stringify({ claudeModel: newClaudeModel }));
       });
 
-      // Breadcrumb opens a modal holding the (relocated) three selects.
+      // ── Quick model popover (per-thread Provider / Model / Effort) ──
+      // Anchored under the breadcrumb; lightweight, not a full-panel modal.
+      var modelPicker = document.createElement('div');
+      modelPicker.className = 'cumulus-model-picker';
+
+      var modelPopover = document.createElement('div');
+      modelPopover.className = 'cumulus-model-popover';
+      modelPopover.setAttribute('data-testid', 'webchat-model-popover');
+      modelPopover.style.display = 'none';
+      function popoverRow(labelText, control, rowKey) {
+        var row = document.createElement('div');
+        row.className = 'cumulus-model-popover-row';
+        if (rowKey) row.setAttribute('data-config-row', rowKey);
+        var lab = document.createElement('span');
+        lab.className = 'cumulus-model-popover-label';
+        lab.textContent = labelText;
+        control.style.display = '';
+        row.appendChild(lab);
+        row.appendChild(control);
+        modelPopover.appendChild(row);
+        return row;
+      }
+      popoverRow('Provider', modelSelect);
+      popoverRow('Model', claudeModelSelect, 'model');
+      popoverRow('Effort', effortSelect, 'effort');
+
+      function closeModelPopover() {
+        modelPopover.style.display = 'none';
+        document.removeEventListener('mousedown', modelPopoverOutside, true);
+      }
+      function modelPopoverOutside(ev) {
+        if (!modelPicker.contains(ev.target)) closeModelPopover();
+      }
       configBreadcrumb.addEventListener('click', function () {
-        var existing = panel.querySelector('.cumulus-overlay[data-config-modal]');
-        if (existing) {
-          existing.remove();
+        if (modelPopover.style.display !== 'none') {
+          closeModelPopover();
           return;
         }
-        var overlay = document.createElement('div');
-        overlay.className = 'cumulus-overlay';
-        overlay.setAttribute('data-config-modal', '1');
-        overlay.setAttribute('data-testid', 'webchat-config-modal');
+        modelPopover.style.display = '';
+        updateEffortVisibility();
+        // Defer binding so this opening click doesn't immediately close it.
+        setTimeout(function () {
+          document.addEventListener('mousedown', modelPopoverOutside, true);
+        }, 0);
+      });
 
-        var header = document.createElement('div');
-        header.className = 'cumulus-overlay-header';
-        var title = document.createElement('span');
-        title.className = 'cumulus-overlay-title';
-        title.textContent = 'Engine';
-        header.appendChild(title);
-        var closeBtn = document.createElement('button');
-        closeBtn.className = 'cumulus-overlay-close';
-        closeBtn.textContent = '\xD7';
-        closeBtn.addEventListener('click', function () {
-          overlay.remove();
+      modelPicker.appendChild(configBreadcrumb);
+      modelPicker.appendChild(modelPopover);
+
+      // ── Settings modal (gateway Claude model catalog + provider 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 =
+          'Available Claude models & provider credentials — applied instantly, no restart';
+        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();
         });
-        header.appendChild(closeBtn);
-        overlay.appendChild(header);
+        mHeader.appendChild(mHeaderText);
+        mHeader.appendChild(mClose);
+        modal.appendChild(mHeader);
 
         var body = document.createElement('div');
-        body.className = 'cumulus-overlay-body';
-        function addRow(labelText, control) {
-          var row = document.createElement('div');
-          row.className = 'cumulus-config-modal-row';
-          var lab = document.createElement('span');
-          lab.className = 'cumulus-config-modal-label';
-          lab.textContent = labelText;
-          row.appendChild(lab);
-          control.style.display = '';
-          row.appendChild(control);
-          body.appendChild(row);
-          return row;
-        }
-        addRow('Provider', modelSelect);
-        addRow('Model', claudeModelSelect).setAttribute('data-config-row', 'model');
-        addRow('Effort', effortSelect).setAttribute('data-config-row', 'effort');
-
-        // ── Gateway Claude model catalog + provider credential (task 104) ──
-        // Live-editable via PUT /api/config — takes effect on the NEXT turn with
-        // no restart, no JSON edit, no republish. Any valid gateway key.
-        var inputCss =
-          'background:#2a2a2a;border:1px solid #3a3a3a;color:#ddd;' +
-          'padding:0.25em 0.4em;border-radius:4px;font-size:0.78em;outline:none;';
-        var gwTitle = document.createElement('div');
-        gwTitle.className = 'cumulus-config-modal-label';
-        gwTitle.style.cssText =
-          'margin-top:14px;padding-top:10px;border-top:1px solid #333;font-weight:600;color:#ddd;';
-        gwTitle.textContent = 'Gateway Claude models';
-        body.appendChild(gwTitle);
+        body.className = 'cumulus-settings-body';
+
+        var modelsLabel = document.createElement('div');
+        modelsLabel.className = 'cumulus-settings-section-label';
+        modelsLabel.textContent = 'Claude models';
+        body.appendChild(modelsLabel);
 
         var gwList = document.createElement('div');
         gwList.setAttribute('data-testid', 'webchat-gateway-models');
         body.appendChild(gwList);
 
         var addWrap = document.createElement('div');
-        addWrap.className = 'cumulus-config-modal-row';
+        addWrap.className = 'cumulus-settings-add-row';
         var addId = document.createElement('input');
         addId.type = 'text';
+        addId.className = 'cumulus-settings-input';
         addId.placeholder = 'model id (e.g. claude-opus-5[1m])';
         addId.setAttribute('data-testid', 'webchat-gw-add-id');
-        addId.style.cssText = 'flex:1;min-width:0;' + inputCss;
+        addId.style.cssText = 'flex:1;min-width:0;';
         var addLabel = document.createElement('input');
         addLabel.type = 'text';
+        addLabel.className = 'cumulus-settings-input';
         addLabel.placeholder = 'label';
         addLabel.setAttribute('data-testid', 'webchat-gw-add-label');
-        addLabel.style.cssText = 'width:84px;' + inputCss;
+        addLabel.style.cssText = 'width:96px;';
         var addBtn = document.createElement('button');
-        addBtn.textContent = 'Add';
-        addBtn.className = 'cumulus-panel-action-btn';
+        addBtn.textContent = '+ Add';
+        addBtn.className = 'cumulus-settings-add-btn';
         addBtn.setAttribute('data-testid', 'webchat-gw-add-btn');
         addWrap.appendChild(addId);
         addWrap.appendChild(addLabel);
         addWrap.appendChild(addBtn);
         body.appendChild(addWrap);
 
+        var credLabel = document.createElement('div');
+        credLabel.className = 'cumulus-settings-section-label';
+        credLabel.textContent = 'Provider credentials';
+        body.appendChild(credLabel);
+
         var credRow = document.createElement('div');
-        credRow.className = 'cumulus-config-modal-row';
-        var credLab = document.createElement('span');
-        credLab.className = 'cumulus-config-modal-label';
+        credRow.className = 'cumulus-settings-cred-row';
+        var credLab = document.createElement('label');
         credLab.textContent = 'HuggingFace key';
         var credInput = document.createElement('input');
         credInput.type = 'text';
+        credInput.className = 'cumulus-settings-input';
         credInput.placeholder = '(unset)';
         credInput.setAttribute('data-testid', 'webchat-gw-hfkey');
-        credInput.style.cssText = 'width:150px;' + inputCss;
+        credInput.style.cssText = 'flex:1;min-width:0;';
         credRow.appendChild(credLab);
         credRow.appendChild(credInput);
         body.appendChild(credRow);
 
-        var gwFooter = document.createElement('div');
-        gwFooter.className = 'cumulus-overlay-footer';
+        modal.appendChild(body);
+
+        var footer = document.createElement('div');
+        footer.className = 'cumulus-settings-footer';
         var saveBtn = document.createElement('button');
-        saveBtn.textContent = 'Save gateway config';
-        saveBtn.className = 'cumulus-panel-action-btn';
+        saveBtn.textContent = 'Save';
+        saveBtn.className = 'cumulus-settings-btn';
         saveBtn.setAttribute('data-testid', 'webchat-gw-save');
         var gwStatus = document.createElement('span');
-        gwStatus.className = 'cumulus-overlay-status';
-        gwFooter.appendChild(saveBtn);
-        gwFooter.appendChild(gwStatus);
-        body.appendChild(gwFooter);
+        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 gwModels = []; // [{id,label,default}]
         function renderGwModels() {
@@ -5798,15 +5932,12 @@
           }
           gwModels.forEach(function (m, idx) {
             var row = document.createElement('div');
-            row.className = 'cumulus-config-modal-row';
+            row.className = 'cumulus-settings-model-row' + (m.default ? ' is-default' : '');
             row.setAttribute('data-gw-model', m.id);
-            var name = document.createElement('span');
-            name.className = 'cumulus-config-modal-label';
-            name.textContent = (m.label || m.id) + '  (' + m.id + ')';
-            name.style.cssText = 'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;';
+
             var defWrap = document.createElement('label');
-            defWrap.style.cssText =
-              'font-size:0.75em;color:#aaa;display:flex;align-items:center;gap:3px;white-space:nowrap;';
+            defWrap.className = 'cumulus-settings-default-toggle';
+            defWrap.title = 'Set as default';
             var def = document.createElement('input');
             def.type = 'radio';
             def.name = 'gw-default';
@@ -5817,12 +5948,28 @@
                 x.default = false;
               });
               m.default = true;
+              renderGwModels();
             });
             defWrap.appendChild(def);
-            defWrap.appendChild(document.createTextNode('default'));
+
+            var name = document.createElement('div');
+            name.className = 'cumulus-settings-model-name';
+            var nameLabel = document.createElement('div');
+            nameLabel.className = 'cumulus-settings-model-label';
+            nameLabel.textContent = m.label || m.id;
+            var nameId = document.createElement('div');
+            nameId.className = 'cumulus-settings-model-id';
+            nameId.textContent = m.id;
+            name.appendChild(nameLabel);
+            name.appendChild(nameId);
+
+            var badge = document.createElement('span');
+            badge.className = 'cumulus-settings-default-badge';
+            badge.textContent = 'default';
+
             var rm = document.createElement('button');
+            rm.className = 'cumulus-settings-model-remove';
             rm.textContent = '\xD7';
-            rm.className = 'cumulus-overlay-close';
             rm.title = 'Remove';
             rm.setAttribute('data-testid', 'webchat-gw-remove-' + idx);
             rm.addEventListener('click', function () {
@@ -5831,8 +5978,10 @@
               if (wasDefault && gwModels.length) gwModels[0].default = true;
               renderGwModels();
             });
-            row.appendChild(name);
+
             row.appendChild(defWrap);
+            row.appendChild(name);
+            row.appendChild(badge);
             row.appendChild(rm);
             gwList.appendChild(row);
           });
@@ -5847,20 +5996,20 @@
             })
           ) {
             gwStatus.textContent = 'Already in the list';
-            gwStatus.className = 'cumulus-overlay-status error';
+            gwStatus.className = 'cumulus-settings-status error';
             return;
           }
           gwModels.push({ id: id, label: label, default: gwModels.length === 0 });
           addId.value = '';
           addLabel.value = '';
           gwStatus.textContent = '';
-          gwStatus.className = 'cumulus-overlay-status';
+          gwStatus.className = 'cumulus-settings-status';
           renderGwModels();
         });
         saveBtn.addEventListener('click', function () {
           saveBtn.disabled = true;
           gwStatus.textContent = 'Saving…';
-          gwStatus.className = 'cumulus-overlay-status';
+          gwStatus.className = 'cumulus-settings-status';
           var payload = {
             claudeModels: gwModels.map(function (m) {
               return { id: m.id, label: m.label, default: !!m.default };
@@ -5878,16 +6027,26 @@
             saveBtn.disabled = false;
             if (sx.status === 200) {
               gwStatus.textContent = 'Saved — applies to new turns immediately';
-              gwStatus.className = 'cumulus-overlay-status success';
+              gwStatus.className = 'cumulus-settings-status success';
               try {
                 var r = JSON.parse(sx.responseText);
                 if (r && r.hfApiKey !== undefined) credInput.value = r.hfApiKey;
               } catch (e) {
                 /* ignore */
               }
+              // Live-refresh this thread's Claude model dropdown without a reload.
+              var prevSel = claudeModelSelect.value;
+              populateClaudeModels(gwModels);
+              for (var pi = 0; pi < claudeModelSelect.options.length; pi++) {
+                if (claudeModelSelect.options[pi].value === prevSel) {
+                  claudeModelSelect.value = prevSel;
+                  break;
+                }
+              }
+              updateBreadcrumb();
             } else {
               gwStatus.textContent = 'Error ' + sx.status;
-              gwStatus.className = 'cumulus-overlay-status error';
+              gwStatus.className = 'cumulus-settings-status error';
             }
           };
           sx.send(JSON.stringify(payload));
@@ -5911,25 +6070,27 @@
               }
             } else {
               gwStatus.textContent = 'Load failed (' + gx.status + ')';
-              gwStatus.className = 'cumulus-overlay-status error';
+              gwStatus.className = 'cumulus-settings-status error';
             }
           };
           gx.send();
         })();
+      }
 
-        overlay.appendChild(body);
-
-        panel.appendChild(overlay);
-        // Reflect Claude-only row visibility now that the rows exist in the DOM.
-        updateEffortVisibility();
-      });
-
-      panelHeader.appendChild(configBreadcrumb);
+      panelHeader.appendChild(modelPicker);
 
-      // Action buttons (include + revert)
+      // Action buttons (settings + include + revert)
       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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luckydraw/cumulus",
-  "version": "0.31.49",
+  "version": "0.31.51",
   "description": "RLM-based CLI chat wrapper for Claude with external history context management",
   "type": "module",
   "main": "dist/index.js",