@muxoai/platform 1.2.3 → 1.3.0

package/dist/ui/console-html.js

@@ -611,6 +611,27 @@ export function renderConsoleHtml() {
             </div>
           </div>
 
+          <div class="card" style="margin-bottom:18px;border:1px solid var(--accent);background:linear-gradient(180deg, rgba(99,102,241,0.08), rgba(15,17,26,0.95))">
+            <div class="section-header" style="margin-bottom:10px">
+              <div>
+                <div class="section-title">✨ Natural Language Command Bar (<code class="mono">muxo do</code> / <code class="mono">POST /api/v1/do</code>)</div>
+                <div class="section-sub">Type any goal in plain English. Muxo extracts tool &amp; schema arguments (via BYOK LLM or semantic router), plans with Supermemory &amp; Ed25519 governance, and executes.</div>
+              </div>
+              <span id="byok-mode-badge" class="badge badge-projects">Funding: muxo_funded</span>
+            </div>
+            <div style="display:flex;gap:10px;margin-bottom:10px">
+              <input type="text" id="nl-prompt-input" placeholder="e.g. Audit https://muxo.ai for technical SEO, Top up 500 credits, Provision a Turso database named edge-analytics..." onkeydown="if(event.key==='Enter') runNaturalLanguagePrompt()" />
+              <button class="btn btn-primary" onclick="runNaturalLanguagePrompt()" style="white-space:nowrap">✨ Run in Plain English</button>
+            </div>
+            <div style="display:flex;gap:8px;flex-wrap:wrap">
+              <button class="btn btn-sm" onclick="fillAndRunNl('Fetch top 3 stories on Hacker News')">HackerNews Top 3</button>
+              <button class="btn btn-sm" onclick="fillAndRunNl('Audit https://muxo.ai for technical SEO')">Audit muxo.ai SEO</button>
+              <button class="btn btn-sm" onclick="fillAndRunNl('Look up DNS A records for muxo.ai')">DNS Lookup muxo.ai</button>
+              <button class="btn btn-sm" onclick="fillAndRunNl('Provision a Turso database named console-nl-db')">Provision Turso DB</button>
+              <button class="btn btn-sm" onclick="fillAndRunNl('Top up 500 credits')">Top Up +500 Credits</button>
+            </div>
+          </div>
+
           <div class="grid-2">
             <div class="card">
               <div class="section-header">
@@ -937,43 +958,49 @@ export function renderConsoleHtml() {
 
         <!-- TAB 7: BILLING & CREDITS -->
         <section id="tab-billing" class="tab-pane hidden">
-          <div class="grid-2">
+          <div class="grid-2" style="margin-bottom:18px">
             <div class="card">
               <div class="section-header">
                 <div>
-                  <div class="section-title">Subscription & Credit Top-Ups (User Pays Muxo -> Muxo Pays Suppliers)</div>
-                  <div class="section-sub">Users buy Muxo Credits ($0.01/credit); Muxo settles upstream costs with Composio & Stripe Projects from Muxo's master accounts.</div>
+                  <div class="section-title">Subscription & Credit Top-Ups (Merchant-of-Record + BYOK)</div>
+                  <div class="section-sub">Buy Muxo Credits ($0.01/credit) where Muxo pays upstream suppliers, or connect BYOK keys below for 0-credit execution.</div>
                 </div>
               </div>
               <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px">
                 <div style="border:1px solid var(--border-strong);border-radius:8px;padding:16px;background:var(--bg-elevated)">
                   <div style="font-weight:600;font-size:15px;margin-bottom:4px">Starter Plan — $29/mo</div>
                   <div style="font-size:12.5px;color:var(--text-secondary);margin-bottom:14px">
-                    5,000 governed actions/month + 1,000 Instant & Provisioning credits included.
+                    10,000 governed actions/month + 1,000 Instant & Provisioning credits included.
+                  </div>
+                  <div style="display:flex;gap:8px;flex-direction:column">
+                    <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="startCheckout('starter_subscription')">
+                      Upgrade via Stripe Checkout ($29/mo)
+                    </button>
+                    <button class="btn btn-sm btn-emerald" style="width:100%;justify-content:center" onclick="instantUpgradeStarter()">
+                      ⚡ Instant Starter Upgrade (+1,000 Credits)
+                    </button>
                   </div>
-                  <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="startCheckout('starter_subscription')">
-                    Upgrade via Stripe Checkout ($29/mo)
-                  </button>
                 </div>
                 <div style="border:1px solid var(--border-strong);border-radius:8px;padding:16px;background:var(--bg-elevated)">
-                  <div style="font-weight:600;font-size:15px;margin-bottom:4px">+1,000 Credit Pack — $10</div>
-                  <div style="font-size:12.5px;color:var(--text-secondary);margin-bottom:14px">
+                  <div style="font-weight:600;font-size:15px;margin-bottom:4px">Credit Pack Top-Up ($0.01 / credit)</div>
+                  <div style="font-size:12.5px;color:var(--text-secondary);margin-bottom:10px">
                     Top up workspace credits for Instant tools, OAuth connectors & cloud provisioning.
                   </div>
-                  <div style="display:flex;gap:8px;flex-direction:column">
-                    <button class="btn btn-emerald" style="width:100%;justify-content:center" onclick="startCheckout('credit_topup')">
-                      Stripe Checkout (+1,000 Credits / $10)
-                    </button>
-                    <button class="btn btn-sm" style="width:100%;justify-content:center" onclick="instantTopup(1000)">
-                      ⚡ Instant Wallet Top-Up (+1,000 Credits)
+                  <div style="display:flex;gap:6px;margin-bottom:8px">
+                    <input type="number" id="topup-credits-input" value="1000" min="100" step="100" style="padding:6px 10px;font-size:12.5px" />
+                    <button class="btn btn-sm btn-emerald" onclick="instantTopupCustom()" style="white-space:nowrap">
+                      ⚡ Instant Top-Up
                     </button>
                   </div>
+                  <button class="btn btn-sm" style="width:100%;justify-content:center" onclick="startCheckout('credit_topup')">
+                    Stripe Checkout Session
+                  </button>
                 </div>
               </div>
 
               <div style="border:1px solid var(--border-strong);border-radius:8px;padding:14px;background:rgba(16,185,129,0.05)">
                 <div style="font-weight:600;font-size:13px;margin-bottom:8px;color:var(--emerald)">
-                  💸 Merchant-of-Record Settlement Ledger (muxo_funded)
+                  💸 Merchant-of-Record &amp; BYOK Settlement Ledger
                 </div>
                 <div id="settlement-summary-box" style="font-size:12px;color:var(--text-secondary);line-height:1.6">
                   Loading supplier settlement metrics...
@@ -984,25 +1011,65 @@ export function renderConsoleHtml() {
             <div class="card">
               <div class="section-header">
                 <div>
-                  <div class="section-title">Audit Credit & Supplier Settlement Ledger</div>
-                  <div class="section-sub">Immutable record of user credit purchases, run deductions, and upstream supplier payouts.</div>
+                  <div class="section-title">🔑 Bring Your Own Key (BYOK) Encrypted Vault</div>
+                  <div class="section-sub">Store your own LLM API keys (for natural-language routing) or upstream supplier keys (0 Muxo credit charge / 0% markup). Encrypted with AES-256-GCM.</div>
                 </div>
               </div>
-              <div class="table-wrap">
+              <div style="display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-bottom:12px">
+                <select id="byok-provider-select">
+                  <option value="openai">OpenAI (LLM Router)</option>
+                  <option value="anthropic">Anthropic Claude (LLM Router)</option>
+                  <option value="openrouter">OpenRouter (LLM Router)</option>
+                  <option value="gemini">Google Gemini (LLM Router)</option>
+                  <option value="composio">Composio (0-Credit App &amp; Instant BYOK)</option>
+                  <option value="stripe">Stripe Secret Key (0-Credit Infra BYOK)</option>
+                  <option value="supermemory">Supermemory v5 (Memory BYOK)</option>
+                  <option value="firecrawl">Firecrawl (Scrape/Crawl BYOK)</option>
+                  <option value="exa">Exa AI (Search BYOK)</option>
+                </select>
+                <input type="password" id="byok-key-input" placeholder="Paste API key (sk-..., rk_..., sm_...)..." />
+                <button class="btn btn-primary" onclick="saveByokKeyFromUi()">Save Key</button>
+              </div>
+              <div class="table-wrap" style="max-height:240px;overflow-y:auto">
                 <table>
                   <thead>
                     <tr>
-                      <th>Time</th>
-                      <th>Event & Supplier Settlement</th>
-                      <th>Credits Delta</th>
-                      <th>Balance</th>
+                      <th>Provider</th>
+                      <th>Category</th>
+                      <th>Key Hint</th>
+                      <th>Env Var</th>
+                      <th>Action</th>
                     </tr>
                   </thead>
-                  <tbody id="ledger-tbody"></tbody>
+                  <tbody id="byok-keys-tbody">
+                    <tr><td colspan="5" style="color:var(--text-muted)">No BYOK keys saved yet. Using Muxo Master Wallet (muxo_funded).</td></tr>
+                  </tbody>
                 </table>
               </div>
             </div>
           </div>
+
+          <div class="card">
+            <div class="section-header">
+              <div>
+                <div class="section-title">Audit Credit & Supplier Settlement Ledger</div>
+                <div class="section-sub">Immutable record of user credit purchases, run deductions, BYOK 0-credit runs, and upstream supplier payouts.</div>
+              </div>
+            </div>
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Time</th>
+                    <th>Event & Supplier Settlement</th>
+                    <th>Credits Delta</th>
+                    <th>Balance</th>
+                  </tr>
+                </thead>
+                <tbody id="ledger-tbody"></tbody>
+              </table>
+            </div>
+          </div>
         </section>
       </main>
     </div>
@@ -1803,6 +1870,126 @@ export function renderConsoleHtml() {
           '<td class="mono">' + e.balanceAfter + '</td>' +
         '</tr>'
       ).join('');
+      await loadByokKeys();
+    }
+
+    async function loadByokKeys() {
+      try {
+        const data = await api('/api/v1/byok');
+        const tbody = document.getElementById('byok-keys-tbody');
+        const badge = document.getElementById('byok-mode-badge');
+        if (badge) {
+          const hasSupplier = (data.keys || []).some(k => k.category === 'supplier');
+          badge.textContent = hasSupplier ? 'Funding: byok (0 cr)' : 'Funding: muxo_funded';
+          badge.className = hasSupplier ? 'badge badge-sdk' : 'badge badge-projects';
+        }
+        if (!tbody) return;
+        if (!data.keys || !data.keys.length) {
+          tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted)">No BYOK keys saved yet. Using Muxo Master Wallet (muxo_funded).</td></tr>';
+          return;
+        }
+        tbody.innerHTML = data.keys.map(k =>
+          '<tr>' +
+            '<td style="font-weight:600">' + k.providerName + ' <span class="mono" style="color:var(--text-muted);font-size:11px">(' + k.provider + ')</span></td>' +
+            '<td><span class="badge ' + (k.category === 'llm' ? 'badge-sdk' : 'badge-projects') + '">' + k.category + '</span></td>' +
+            '<td class="mono" style="font-size:12px">' + k.keyHint + '</td>' +
+            '<td class="mono" style="font-size:11.5px;color:var(--text-secondary)">' + k.envVarName + '</td>' +
+            '<td><button class="btn btn-sm" onclick="deleteByokKeyFromUi(\\'' + k.provider + '\\')">Delete</button></td>' +
+          '</tr>'
+        ).join('');
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    async function saveByokKeyFromUi() {
+      const provider = document.getElementById('byok-provider-select').value;
+      const secretKey = document.getElementById('byok-key-input').value.trim();
+      if (!secretKey) {
+        showToast('Enter an API key first');
+        return;
+      }
+      try {
+        await api('/api/v1/byok', {
+          method: 'POST',
+          body: JSON.stringify({ provider, secretKey })
+        });
+        document.getElementById('byok-key-input').value = '';
+        showToast('Saved encrypted ' + provider.toUpperCase() + ' BYOK key to Vault!');
+        await loadByokKeys();
+        await refreshOverview();
+      } catch (err) {
+        showToast('BYOK Error: ' + err.message);
+      }
+    }
+
+    async function deleteByokKeyFromUi(provider) {
+      try {
+        await api('/api/v1/byok/' + encodeURIComponent(provider), { method: 'DELETE' });
+        showToast('Removed ' + provider + ' BYOK key from Vault');
+        await loadByokKeys();
+      } catch (err) {
+        showToast('Error: ' + err.message);
+      }
+    }
+
+    async function fillAndRunNl(promptText) {
+      const input = document.getElementById('nl-prompt-input');
+      if (input) input.value = promptText;
+      await runNaturalLanguagePrompt();
+    }
+
+    async function runNaturalLanguagePrompt() {
+      const input = document.getElementById('nl-prompt-input');
+      const promptText = (input ? input.value : '').trim();
+      if (!promptText) {
+        showToast('Enter a natural language instruction first');
+        return;
+      }
+      const box = document.getElementById('quick-run-output');
+      box.textContent = '✨ Routing natural language intent: "' + promptText + '"...';
+      try {
+        const res = await api('/api/v1/do', {
+          method: 'POST',
+          body: JSON.stringify({ prompt: promptText, autoApprove: true })
+        });
+        box.textContent = JSON.stringify({
+          prompt: res.prompt,
+          intent: res.intent,
+          status: res.status,
+          fundingMode: res.plan && res.plan.supplierSettlement ? res.plan.supplierSettlement.fundingMode : 'muxo_funded',
+          creditCost: res.plan ? res.plan.creditCost : 0,
+          planId: res.plan ? res.plan.id : null,
+          runId: res.run ? res.run.id : null,
+          receiptId: res.receipt ? res.receipt.id : null,
+          output: res.run ? res.run.output : (res.authHandoff || res.message)
+        }, null, 2);
+        showToast('Executed NL intent -> ' + res.intent.toolSlug + ' (' + res.status + ')');
+        await refreshOverview();
+      } catch (err) {
+        box.textContent = 'NL Execution Error: ' + err.message;
+        showToast('Error: ' + err.message);
+      }
+    }
+
+    async function instantUpgradeStarter() {
+      try {
+        const res = await api('/api/v1/billing/upgrade', {
+          method: 'POST',
+          body: JSON.stringify({ tier: 'starter' })
+        });
+        showToast(res.message || 'Upgraded workspace to Starter Plan (+1,000 Credits)!');
+        await refreshOverview();
+        await loadLedger();
+      } catch (err) {
+        showToast('Upgrade Error: ' + err.message);
+      }
+    }
+
+    async function instantTopupCustom() {
+      const input = document.getElementById('topup-credits-input');
+      const credits = Math.max(1, Number((input && input.value) || 1000));
+      await instantTopup(credits);
     }
 
     async function instantTopup(credits) {
@@ -1821,10 +2008,12 @@ export function renderConsoleHtml() {
 
     async function startCheckout(kind) {
       try {
-        showToast('Creating live Stripe Checkout session...');
+        showToast('Creating Stripe Checkout session...');
+        const input = document.getElementById('topup-credits-input');
+        const credits = Math.max(100, Number((input && input.value) || 1000));
         const res = await api('/api/v1/billing/checkout', {
           method: 'POST',
-          body: JSON.stringify({ kind })
+          body: JSON.stringify({ kind, credits })
         });
         if (res.url) {
           window.location.href = res.url;
@@ -1866,6 +2055,7 @@ export function renderConsoleHtml() {
     window.addEventListener('DOMContentLoaded', async () => {
       await checkCheckoutReturn();
       await refreshOverview();
+      loadByokKeys().catch(() => {});
       // Sync live Stripe Projects & Composio providers in background on first load
       loadConnections(true).catch(() => {});
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muxoai/platform",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Muxo — Unified Execution, Provisioning & Governance Platform over Composio, Stripe Projects, Microsoft Agent Governance & Supermemory",
   "private": false,
   "license": "MIT",