@mrrlin-dev/external-agents 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrrlin-dev/external-agents",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "One MCP server for every LLM you talk to \u2014 direct-API dispatcher across Gemini, DeepSeek, Groq, OpenRouter, Cerebras, and more. Part of mrrlin.com.",
   "type": "module",
   "main": "server.js",

package/ui.js

@@ -313,20 +313,28 @@ function renderUnlock(agents) {
     // Ollama-cloud uses its own CLI ('ollama' — no API key input needed),
     // so its row skips the input + Save and just shows the signup/download link.
     const hasEnvInput = !!m.env && !m.env.startsWith("(");
+    // Shared button metrics so Save + Get-free-key line up pixel-perfect.
+    // 32px total height (7px vertical padding + 14px font + border), 13px font,
+    // min-width so short-text buttons ("Save") do not feel dwarfed next to
+    // long-text ones ("Get free key ↗").
+    const btnStyle = 'display:inline-flex;align-items:center;justify-content:center;height:32px;box-sizing:border-box;padding:0 14px;min-width:110px;font-size:13px;font-weight:600;border-radius:4px;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;';
+    const saveStyle   = btnStyle + 'background:#4a90e2;color:#fff;border-color:#3878c0;';
+    const signupStyle = btnStyle + 'background:#4a8;color:#fff;';
+    const inputStyle  = 'flex:1;min-width:180px;height:32px;box-sizing:border-box;padding:0 10px;border:1px solid #d4b96b;border-radius:4px;font:inherit;';
+
     const keyInput = hasEnvInput
       ? '<input id="k-' + m.env + '" type="password" placeholder="paste ' + m.env + ' here" ' +
-        'style="flex:1;min-width:180px;padding:5px 8px;border:1px solid #d4b96b;border-radius:4px;font:inherit;" ' +
-        'onkeydown="if(event.key===\\'Enter\\')saveKey(\\'' + m.env + '\\')">' +
-        '<button class="primary" onclick="saveKey(\\'' + m.env + '\\')">Save</button>' +
+        'style="' + inputStyle + '" onkeydown="if(event.key===\\'Enter\\')saveKey(\\'' + m.env + '\\')">' +
+        '<button onclick="saveKey(\\'' + m.env + '\\')" style="' + saveStyle + '">Save</button>' +
         '<span id="s-' + m.env + '" class="status" style="font-size:12px;"></span>'
       : '<span style="color:#8a7532;font-size:12px;">' + m.env + '</span>';
     return '<div class="row" style="display:grid;grid-template-columns:180px 1fr auto;gap:10px 16px;align-items:start;padding:12px 0;border-top:1px solid #e6d78e;">' +
       '<div><div class="prov">' + m.label + '</div>' +
       '<div style="font-size:11px;color:#8a7532">+' + count + ' model' + (count>1?"s":"") + ' waiting</div></div>' +
       '<div><div class="desc" style="margin-bottom:6px;">' + m.pitch + '</div>' +
-      '<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">' + keyInput + '</div></div>' +
+      '<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">' + keyInput + '</div></div>' +
       '<a class="signup" href="' + m.signup + '" target="_blank" rel="noopener" ' +
-      'style="align-self:center;padding:6px 12px;background:#4a8;color:#fff;text-decoration:none;border-radius:4px;font-size:13px;white-space:nowrap;">Get free key ↗</a>' +
+      'style="align-self:center;' + signupStyle + '">Get free key ↗</a>' +
       '</div>';
   }).join("");
   box.innerHTML =
@@ -350,9 +358,14 @@ async function saveKey(envName) {
     });
     const j = await r.json();
     if (r.ok) {
-      stat.textContent = "✓ persisted to " + j.persisted_to + ". Restart your MCP client to pick it up.";
+      const nProbed = (j.reprobed || []).length;
+      stat.textContent = "✓ persisted to keys.env" + (nProbed ? " · " + nProbed + " entries re-probed" : "");
       stat.className = "status";
       inp.value = "";
+      // Immediately refresh the table + banner so freshly-unlocked entries
+      // drop from the banner without a manual page reload. State has already
+      // been server-side re-probed by /api/set_credential.
+      await refresh();
     } else {
       stat.textContent = "error: " + (j.error || r.statusText);
       stat.className = "status err";
@@ -415,11 +428,31 @@ const server = http.createServer(async (req, res) => {
         // restart to see it. We tell them so in the response.
         process.env[env_name] = value;
         console.error(`external-agents ui: credential persisted for ${env_name} (${value.length} chars)`);
+        // Re-probe every registry entry that references this env var — either
+        // via its `auth: "env:XYZ"` field or its `transports.generate_new.env`.
+        // Without this, state.json keeps its stale `needs_auth` marker until
+        // the operator restarts the process, and the banner keeps counting
+        // just-unlocked entries as still-locked. State + banner reconcile now.
+        const affected = REGISTRY.agents.filter((a) => {
+          const authVar = typeof a.auth === "string" && a.auth.startsWith("env:")
+            ? a.auth.slice("env:".length).split(/\s+/)[0]
+            : null;
+          const genVar = a.transports?.generate_new?.env || null;
+          return authVar === env_name || genVar === env_name;
+        });
+        const patch = {};
+        for (const a of affected) {
+          const r = probeInstalled(a);
+          patch[a.id] = { ...r, checked: Math.floor(Date.now() / 1000) };
+        }
+        if (Object.keys(patch).length > 0) writeState(patch);
+        console.error(`external-agents ui: re-probed ${affected.length} entries after set_credential(${env_name}): ${affected.map((a) => a.id).join(", ")}`);
         return json(res, 200, {
           ok: true,
           env_name,
           persisted_to: KEYS_FILE,
-          restart_required: "Restart your MCP client (Claude Code / Codex) to pick up the new key.",
+          reprobed: affected.map((a) => a.id),
+          restart_required: "Restart your MCP client (Claude Code / Codex) so IT reads keys.env too.",
         });
       } catch (e) {
         return json(res, 400, { error: "invalid json: " + e.message });