@muxoai/sdk 1.2.3 → 1.4.2

package/dist/ui/console-html.js

@@ -0,0 +1,3857 @@
+import { THEME_STORAGE_KEY, muxoBaseCss, muxoMark, muxoThemeBootstrap, muxoThemes, uiIcon, } from "./design-tokens.js";
+/** Every path that serves the console shell, mapped to the view it opens. */
+export const CONSOLE_ROUTES = Object.freeze({
+    "/": "overview",
+    "/console": "overview",
+    "/dashboard": "overview",
+    "/catalog": "catalog",
+    "/tools": "catalog",
+    "/connections": "overview",
+    "/infrastructure": "overview",
+    "/keys": "setup",
+    "/setup": "setup",
+    "/workspaces": "workspaces",
+    "/activity": "activity",
+    "/receipts": "activity",
+    "/governance": "activity",
+    "/memory": "activity",
+    "/billing": "billing",
+    "/usage": "billing",
+    "/login": "login",
+    "/signup": "signup",
+    "/register": "signup",
+});
+export function isConsolePath(pathname) {
+    const clean = pathname.length > 1 ? pathname.replace(/\/+$/, "") : pathname;
+    return Object.prototype.hasOwnProperty.call(CONSOLE_ROUTES, clean);
+}
+const DOCS_URL = "https://docs.muxo.ai";
+const PRICING_URL = "https://docs.muxo.ai/billing";
+const WEBSITE_URL = "https://muxo.ai";
+const consoleCss = `
+.skip-link{position:fixed;top:8px;left:8px;z-index:90;padding:10px 14px;border-radius:var(--radius-sm);background:var(--color-elevated);border:1px solid var(--color-border);color:var(--color-text);font-size:13px;transform:translateY(-200%)}
+.skip-link:focus{transform:none}
+
+.console-topbar{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);background:var(--color-navigation);border-bottom:1px solid var(--color-border);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
+.topbar-in{display:flex;align-items:center;gap:16px;min-height:var(--header-height);padding:4px max(24px,env(safe-area-inset-right)) 4px max(24px,env(safe-area-inset-left))}
+.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:none;color:var(--color-text);text-decoration:none;font-size:20px;font-weight:600;letter-spacing:var(--tracking-heading)}
+.brand svg{width:24px;height:24px}
+.brand-section{padding-left:12px;margin-left:4px;border-left:1px solid var(--color-border-strong);color:var(--color-muted);font-size:13px;font-weight:500;letter-spacing:0}
+.workspace-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:340px;min-height:32px;padding:4px 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-size:13px;color:var(--color-text)}
+.workspace-chip:hover{background:var(--color-surface-2)}
+.workspace-chip #workspace-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.workspace-chip .tier{flex:none;color:var(--color-muted);font-size:12px}
+.workspace-chip>.ui-icon{width:12px;height:12px;transform:rotate(90deg)}
+.topbar-links{display:flex;align-items:center;gap:20px;margin-left:auto}
+.nav-link{display:inline-flex;align-items:center;min-height:44px;color:var(--color-muted);font-size:13px;text-decoration:none}
+.nav-link:hover{color:var(--color-text)}
+.icon-button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted)}
+.icon-button:hover{background:var(--color-surface-2);color:var(--color-text)}
+.theme-sun{display:none}html[data-theme=dark] .theme-sun{display:inline-block}html[data-theme=dark] .theme-moon{display:none}
+.account{display:flex;align-items:center;gap:12px}
+.account-label{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-muted);font-size:13px}
+.mobile-menu-toggle{display:none}
+.mobile-menu-content{display:flex;flex-direction:column;gap:24px;min-height:100%;padding:24px}
+dialog.sheet.mobile-menu{inset:0 auto 0 0;width:min(340px,calc(100% - 32px));height:100dvh;max-height:100dvh;margin:0;border-radius:0 20px 20px 0}
+.mobile-menu .nav-item{min-height:46px;margin:0}
+.mobile-menu .nav-group p{padding-inline:12px}
+.mobile-menu-account{display:grid;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--color-border)}
+.mobile-menu-account p{overflow-wrap:anywhere;color:var(--color-muted);font-size:13px}
+
+.console-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:calc(100dvh - var(--header-height))}
+.console-sidebar{position:sticky;top:var(--header-height);display:flex;flex-direction:column;gap:24px;height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;padding:24px;border-right:1px solid var(--color-border);background:var(--color-sidebar)}
+.nav-group p{margin:0 0 6px;color:var(--color-muted);font-size:12px;font-weight:500}
+.nav-item{display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 12px;margin-inline:-12px;border-radius:var(--radius-sm);color:var(--color-muted);font-size:13px;text-decoration:none}
+.nav-item:hover{color:var(--color-text);background:var(--color-surface-2)}
+.nav-item[aria-current=page]{color:var(--color-text);background:var(--color-surface-2);font-weight:500}
+.nav-item[aria-current=page]>.ui-icon:first-child{color:var(--color-accent)}
+.nav-item .ui-icon{width:18px;height:18px}
+.nav-item .count{margin-left:auto;color:var(--color-muted);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
+.sidebar-usage{display:grid;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--color-border);font-size:12px;color:var(--color-muted)}
+.usage-row{display:flex;justify-content:space-between;gap:8px}
+.usage-row strong{color:var(--color-text);font-weight:500;font-variant-numeric:tabular-nums}
+.meter{height:4px;border-radius:var(--radius-pill);background:var(--color-border);overflow:hidden}
+.meter>span{display:block;height:100%;border-radius:inherit;background:var(--color-button-primary);transition:width var(--motion-normal) var(--ease-out)}
+.sidebar-usage a{color:var(--color-accent);text-decoration:none}
+.sidebar-usage a:hover{text-decoration:underline}
+
+.console-main{min-width:0;padding:40px max(48px,env(safe-area-inset-right)) 96px 48px;outline:none}
+.page{max-width:1120px;margin-inline:auto}
+.page-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px 24px;margin-bottom:28px}
+.page-header h1{font-size:clamp(28px,3vw,34px);line-height:1.15}
+.lede{max-width:62ch;margin-top:8px;color:var(--color-muted);font-size:15px;text-wrap:pretty}
+.page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
+.overview-header{display:block}
+.overview-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
+.overview-title .page-actions{flex:none}
+.stack{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:20px}
+.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
+.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
+.panel{min-width:0;padding:24px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}
+.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
+.panel-header h2{font-size:17px;line-height:1.3}
+.panel-header p{margin-top:4px;color:var(--color-muted);font-size:13px}
+.panel-header>.pill,.panel-header>.btn{flex:none}
+.dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
+.dashboard-aside{display:grid;gap:20px}
+.section-label{margin-bottom:8px;color:var(--color-muted);font-size:12px;font-weight:500}
+.workspace-summary{display:flex;align-items:center;gap:14px;min-width:0}
+.workspace-avatar,.action-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-2);color:var(--color-muted)}
+.workspace-avatar .ui-icon,.action-icon .ui-icon{width:18px;height:18px}
+.workspace-summary h2{font-size:16px;overflow-wrap:anywhere}
+.workspace-summary p{margin-top:3px;color:var(--color-muted);font-size:12px}
+.workspace-summary>div:last-child{min-width:0}
+.summary-links{display:grid;margin-top:20px;border-top:1px solid var(--color-border)}
+.summary-link{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--color-border);color:var(--color-text);font-size:13px;text-decoration:none}
+.summary-link:last-child{border-bottom:0}
+.summary-link .ui-icon{width:16px;height:16px;color:var(--color-muted)}
+.summary-link .ui-icon:last-child{margin-left:auto}
+.summary-link:hover{color:var(--color-accent)}
+.activity-row{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--color-border)}
+.activity-row:last-child{border-bottom:0;padding-bottom:0}
+.activity-row>div:nth-child(2){min-width:0;flex:1}
+.activity-row strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}
+.activity-row small{display:block;margin-top:5px;color:var(--color-muted);font-size:12px}
+.activity-row .pill{font-size:11px}
+.activity-row .icon-button{width:32px;height:32px}
+.activity-row .icon-button .ui-icon{width:16px;height:16px}
+.activity-empty{display:grid;justify-items:center;gap:10px;padding:32px 20px;text-align:center}
+.activity-empty h3{margin-top:6px;font-size:16px}
+.activity-empty p{max-width:36ch;color:var(--color-muted);font-size:13px}
+.activity-empty .btn{margin-top:8px}
+.action-icon[data-tone=ok]{border-color:var(--color-ok-border);background:var(--color-ok-bg);color:var(--color-ok)}
+.action-icon[data-tone=danger]{border-color:var(--color-danger-border);background:var(--color-danger-bg);color:var(--color-danger)}
+.action-icon[data-tone=warn]{border-color:var(--color-warn-border);background:var(--color-warn-bg);color:var(--color-warn)}
+.approval-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--color-warn-border);border-radius:14px;background:var(--color-warn-bg);font-size:13px}
+.approval-notice p{margin-top:3px;color:var(--color-muted);font-size:12px}
+.tool-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-border);color:var(--color-text);text-decoration:none}
+.tool-row:last-child{border-bottom:0;padding-bottom:0}
+.tool-row>div{flex:1;min-width:0}
+.tool-row strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}
+.tool-row small{display:block;margin-top:3px;color:var(--color-muted);font-size:12px}
+.tool-row>.ui-icon{width:16px;height:16px;color:var(--color-muted)}
+.tool-row:hover strong{color:var(--color-accent)}
+.docs-link{display:inline-flex;align-items:center;gap:7px;color:var(--color-accent);font-size:13px;text-decoration:none}
+.docs-link:hover{text-decoration:underline}
+.docs-link .ui-icon{width:15px;height:15px}
+.workspace-context{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-sidebar)}
+.access-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
+.endpoint{padding:14px 0;border-bottom:1px solid var(--color-border)}
+.endpoint:last-child{border-bottom:0;padding-bottom:0}
+.endpoint>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
+.endpoint code{display:block;margin-top:6px;color:var(--color-muted);font:12px/1.6 var(--font-mono);overflow-wrap:anywhere}
+.team-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
+.team-form>.field:first-child{grid-column:1/-1}
+.team-form-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;grid-column:1/-1;padding-top:8px}
+.team-form-footer p{max-width:44ch;color:var(--color-muted);font-size:12px}
+.team-kit-secret{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg)}
+.team-kit-secret code{min-width:0;overflow-wrap:anywhere;font-size:12px}
+
+.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}
+.metric{min-width:0;padding:20px 24px;border-left:1px solid var(--color-border)}
+.metric:first-child{border-left:0}
+.metric-label{color:var(--color-muted);font-size:12px}
+.metric-value{margin-top:6px;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.metric-value[data-tone=ok]{color:var(--color-ok)}
+.metric-value[data-tone=danger]{color:var(--color-danger)}
+.metric-sub{margin-top:4px;color:var(--color-muted);font-size:12px}
+.metric-link{display:block;color:var(--color-text);text-decoration:none;transition:background-color var(--motion-fast)}
+.metric-link:hover{background:var(--color-surface-2)}
+.metric-link:focus-visible{position:relative;z-index:1;outline-offset:-3px}
+.metric-link .metric-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.metric-link .metric-label .ui-icon{width:13px;height:13px;color:var(--color-muted)}
+.metric-value[data-tone=warn]{color:var(--color-warn)}
+
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 16px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:transparent;color:var(--color-text);font-size:13px;line-height:1.3;text-decoration:none;white-space:nowrap;transition:background-color var(--motion-fast),border-color var(--motion-fast),opacity var(--motion-fast)}
+.btn:not(:disabled):hover{background:var(--color-surface-2);text-decoration:none}
+.btn .ui-icon{width:16px;height:16px}
+.btn-primary{border-color:transparent;background:var(--color-button-primary);color:var(--color-button-text)}
+.btn-primary:not(:disabled):hover{background:var(--color-button-primary-hover)}
+.btn-danger{border-color:transparent;background:var(--color-button-danger);color:#fff}
+.btn-danger:not(:disabled):hover{background:var(--color-button-danger-hover)}
+.btn-quiet{border-color:transparent;color:var(--color-accent)}
+.btn-quiet:not(:disabled):hover{background:var(--color-accent-soft)}
+.btn-sm{min-height:30px;padding:4px 12px;font-size:12px}
+.btn-lg{min-height:44px;padding:11px 22px;font-size:15px}
+.btn-block{width:100%}
+[aria-busy=true]{opacity:.55;pointer-events:none}
+
+.field{display:grid;gap:6px;min-width:0}
+.field>span{font-size:13px;font-weight:500}
+.field>span em{color:var(--color-muted);font-style:normal;font-weight:400}
+.field-help{color:var(--color-muted);font-size:12px}
+.field-error{color:var(--color-danger);font-size:13px}
+.field-error:empty{display:none}
+input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--color-control-border);border-radius:var(--radius-field);background:var(--color-bg);color:var(--color-text);font-size:14px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
+textarea{resize:vertical;line-height:var(--leading-body)}
+textarea.mono{font:13px/1.6 var(--font-mono)}
+input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}
+input[type=search]::-webkit-search-cancel-button{display:none}
+input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--color-button-primary)}
+.form-grid{display:grid;gap:14px}
+.form-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
+.provider-key-form{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:end;margin-bottom:16px}
+.inline-form{display:flex;align-items:center;gap:8px}
+.inline-form input{flex:1}
+.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
+.check{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px;cursor:pointer}
+.check:hover{background:var(--color-surface-2)}
+.toggle-row{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px;cursor:pointer}
+.toggle-row input{margin-top:2px}
+.toggle-row small{display:block;margin-top:2px;color:var(--color-muted);font-size:12px}
+
+.segmented{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--color-surface-2)}
+.segmented button{min-height:30px;padding:5px 14px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-muted);font-size:13px;white-space:nowrap}
+.segmented button:hover{color:var(--color-text)}
+.segmented button[aria-pressed=true]{background:var(--color-elevated);color:var(--color-text);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.06)}
+.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}
+.toolbar-note{min-height:20px;margin-bottom:16px;color:var(--color-muted);font-size:12px}
+.search-field{display:flex;align-items:center;gap:8px;width:min(320px,100%);padding-left:12px;border:1px solid var(--color-control-border);border-radius:var(--radius-field);background:var(--color-bg);color:var(--color-muted)}
+.search-field:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}
+.search-field input{border:0;padding-left:0;background:transparent}
+.search-field input:focus{box-shadow:none}
+.search-field .ui-icon{width:16px;height:16px}
+.search-field .clear-search{width:32px;height:32px;margin-right:4px}
+.catalog-toolbar .search-field{width:min(420px,100%)}
+.catalog-empty{display:grid;justify-items:center;gap:10px}
+.catalog-empty h2{font-size:17px;color:var(--color-text)}
+.catalog-empty p{max-width:38ch;font-size:13px}
+.catalog-empty .btn{margin-top:6px}
+.key-dismiss{float:right;margin:-6px -6px 4px 8px}
+
+.pill{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--color-muted);font-size:12px;line-height:20px;white-space:nowrap;vertical-align:middle}
+.pill.dot::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
+.pill[data-tone=ok]{background:var(--color-ok-bg);color:var(--color-ok)}
+.pill[data-tone=warn]{background:var(--color-warn-bg);color:var(--color-warn)}
+.pill[data-tone=danger]{background:var(--color-danger-bg);color:var(--color-danger)}
+.pill[data-tone=accent]{background:var(--color-accent-soft);color:var(--color-accent)}
+
+.code{margin:0;max-height:360px;overflow:auto;padding:16px 18px;border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font:12.5px/1.65 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
+.code.tall{min-height:220px}
+.result-card{display:grid;gap:14px;min-height:220px;padding:18px;border-radius:var(--radius-md);background:var(--color-surface-2);font-size:13.5px}
+.result-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
+.result-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+.result-body{display:grid;gap:10px}
+.result-kv{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:6px 14px;font-size:13px}
+.result-kv dt{color:var(--color-muted);font-weight:500}
+.result-kv dd{margin:0;color:var(--color-text);overflow-wrap:anywhere}
+.recall-box{display:grid;gap:18px;min-height:120px;max-height:420px;overflow:auto}
+.recall-group h3{margin:0 0 4px;color:var(--color-muted);font-size:12px;font-weight:600}
+.recall-raw{margin-top:14px}
+.recall-raw summary{display:flex;align-items:center;min-height:32px;color:var(--color-accent);font-size:13px;cursor:pointer}
+.recall-raw pre{margin-top:8px}
+.mono{font-family:var(--font-mono)}
+.small{font-size:12px}
+.muted{color:var(--color-muted)}
+.ok-text{color:var(--color-ok);font-size:13px}
+.empty-note{padding:20px 0;color:var(--color-muted);font-size:13px}
+.key-value{display:block;margin:10px 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--color-bg);font-size:12.5px;overflow-wrap:anywhere}
+
+.table-wrap{position:relative;min-width:0;max-width:100%;overflow-x:auto;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}
+.panel .table-wrap{border-radius:var(--radius-md)}
+table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;font-variant-numeric:tabular-nums}
+th{padding:12px 16px;border-bottom:1px solid var(--color-border);color:var(--color-muted);font-size:12px;font-weight:500;white-space:nowrap}
+td{padding:14px 16px;border-bottom:1px solid var(--color-border);vertical-align:middle}
+tbody tr:last-child td{border-bottom:0}
+td.empty{padding:40px 16px;color:var(--color-muted);text-align:center}
+th.right,.cell-actions{text-align:right}
+.cell-actions{white-space:nowrap}
+.cell-actions .btn+.btn{margin-left:6px}
+.clip{max-width:360px;overflow:hidden;text-overflow:ellipsis}
+
+.rows{display:grid}
+.row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 0;border-bottom:1px solid var(--color-border)}
+.row:first-child{padding-top:4px}
+.row:last-child{border-bottom:0;padding-bottom:0}
+.row>div{min-width:0}
+.row strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}
+.row small{display:block;margin-top:2px;color:var(--color-muted);font-size:12px;overflow-wrap:anywhere}
+.row>.btn,.row>.pill{flex:none}
+.api-key-row{flex-wrap:wrap}
+.api-key-row>.row-actions{max-width:100%;flex-wrap:wrap}
+.api-key-row .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
+
+.ask{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 16px;border:1px solid var(--color-control-border);border-radius:var(--radius-pill);background:var(--color-bg);color:var(--color-muted)}
+.ask:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}
+.ask input{flex:1;min-width:0;min-height:40px;padding:0;border:0;background:transparent;font-size:16px}
+.ask input:focus{box-shadow:none}
+.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
+.chip{min-height:32px;padding:5px 14px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-size:13px}
+.chip:hover{background:var(--color-surface-2)}
+
+.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
+.tool-tile{display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface);transition:border-color var(--motion-fast)}
+.tool-tile:hover{border-color:var(--color-border-strong)}
+.tool-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
+.tool-tile h3{font-size:15px;line-height:1.35}
+.tool-slug{color:var(--color-muted);font:12px/1.5 var(--font-mono);overflow-wrap:anywhere}
+.tool-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-muted);font-size:13px}
+.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:12px}
+.empty-state{grid-column:1/-1;padding:48px 24px;border:1px dashed var(--color-border-strong);border-radius:18px;color:var(--color-muted);text-align:center;font-size:14px}
+
+.callout{padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:13px}
+.callout[data-tone=ok]{border-color:var(--color-ok-border);background:var(--color-ok-bg)}
+.callout[data-tone=warn]{border-color:var(--color-warn-border);background:var(--color-warn-bg)}
+.callout[data-tone=danger]{border-color:var(--color-danger-border);background:var(--color-danger-bg)}
+.callout h3{font-size:14px;margin-bottom:4px}
+.callout ul{margin:8px 0 0;padding-left:18px}
+.callout li{margin:6px 0}
+.callout li span{color:var(--color-muted)}
+.callout-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
+.module-list{display:flex;flex-wrap:wrap;gap:6px}
+.price{font-size:40px;font-weight:600;letter-spacing:var(--tracking-display);line-height:1.1}
+.price span{color:var(--color-muted);font-size:15px;font-weight:400;letter-spacing:0}
+.plan-list{display:grid;gap:8px;margin:16px 0 20px;padding:0;list-style:none;color:var(--color-muted);font-size:14px}
+.plan-list li{display:flex;gap:8px}
+.plan-list li::before{content:"✓";color:var(--color-ok)}
+
+dialog.sheet{width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--color-border);border-radius:24px;background:var(--color-elevated);color:var(--color-text);box-shadow:var(--shadow-dialog);overscroll-behavior:contain}
+dialog.sheet.narrow{width:min(460px,calc(100% - 32px))}
+dialog.sheet::backdrop{background:var(--color-scrim)}
+body:has(dialog[open]){overflow:hidden}
+.sheet-inner{display:grid;gap:16px;padding:24px 28px 28px}
+.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
+.sheet-head h2{font-size:22px;line-height:1.25}
+.sheet-head p{margin-top:4px}
+.sheet-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
+
+.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:100;max-width:min(520px,calc(100% - 32px));padding:12px 18px;border-radius:14px;background:var(--color-text);color:var(--color-bg);font-size:13px;box-shadow:var(--shadow-dialog);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity var(--motion-normal) var(--ease-out),transform var(--motion-normal) var(--ease-out)}
+.toast.show{opacity:1;transform:translate(-50%,0)}
+.toast[data-tone=danger]{background:var(--color-button-danger);color:#fff}
+
+.auth-view{display:grid;place-items:center;min-height:calc(100dvh - var(--header-height));padding:48px 20px}
+body:not(:has(.console-topbar)) .auth-view{min-height:100dvh;padding:36px 20px}
+.auth-card{width:min(460px,100%);padding:36px;border:1px solid var(--color-border);border-radius:20px;background:var(--color-surface);text-align:left;box-shadow:0 24px 64px rgba(0,0,0,.18)}
+.auth-card.oauth-card{width:min(480px,100%);padding:0;overflow:hidden}
+.oauth-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-muted);font:400 11.5px/1.4 var(--font-mono)}
+.oauth-brand{display:inline-flex;align-items:center;gap:8px;color:var(--color-text);text-decoration:none;font:600 15px/1.2 var(--font-sans);letter-spacing:var(--tracking-heading)}
+.oauth-brand svg{width:20px;height:20px}
+.oauth-top-meta{display:inline-flex;align-items:center;gap:10px}
+.oauth-step-tag{padding:2px 8px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-muted);font:400 11px/1.5 var(--font-mono)}
+.oauth-theme-btn{width:30px;height:30px;border-radius:8px}
+.oauth-theme-btn .ui-icon{width:15px;height:15px}
+.oauth-card-body{padding:28px 28px 24px}
+.oauth-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 28px;border-top:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-muted);font-size:12px}
+.oauth-card-foot strong{color:var(--color-text);font-weight:600}
+.oauth-card-foot a{color:var(--color-accent);text-decoration:none}
+.oauth-card-foot a:hover{text-decoration:underline}
+.auth-mark{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-2);color:var(--color-text)}
+.auth-mark svg{width:24px;height:24px}
+.auth-card h1{font-size:clamp(22px,2.6vw,26px);line-height:1.18;letter-spacing:var(--tracking-heading)}
+.auth-card .lede{margin:8px 0 0;color:var(--color-muted);font-size:14px;line-height:1.55}
+.auth-card .segmented{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:20px}
+.auth-form{display:grid;gap:14px;margin-top:20px;text-align:left}
+.auth-alt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--color-border)}
+.row-actions{display:inline-flex;align-items:center;gap:8px;flex:none}
+.clerk-auth{display:flex;justify-content:center;min-height:120px;margin-top:18px;text-align:left}
+.clerk-loading{display:flex;align-items:center;gap:10px;align-self:center;margin:0;color:var(--color-muted);font-size:14px}
+.spinner{flex:none;width:18px;height:18px;border:2px solid var(--color-border);border-top-color:var(--color-text);border-radius:50%;animation:muxo-spin .8s linear infinite}
+@keyframes muxo-spin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
+.auth-switch{margin-top:8px}
+.auth-switch:has([hidden]){display:none}
+.auth-foot{margin-top:16px;color:var(--color-muted);font-size:12px;line-height:1.5}
+.auth-foot code{font-size:11.5px}
+
+@media (max-width:1100px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(3){border-left:0}.metric:nth-child(n+3){border-top:1px solid var(--color-border)}.split,.split.even,.dashboard-layout,.access-layout{grid-template-columns:1fr}.dashboard-aside{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:900px){
+.console-layout{grid-template-columns:1fr}
+.console-sidebar{display:none}
+.mobile-menu-toggle{display:grid}
+.console-main{padding:28px 20px 80px}
+.topbar-links .nav-link,.topbar-links .account,.account-label{display:none}
+.topbar-in{gap:12px}
+.workspace-chip{max-width:300px;flex:1}.workspace-chip .tier{display:none}
+.brand-section{display:none}
+.catalog-toolbar{align-items:stretch}
+.catalog-toolbar .search-field{width:100%}
+.catalog-toolbar .segmented{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--radius-md)}
+.catalog-toolbar .segmented button{padding-inline:8px;white-space:normal;border-radius:var(--radius-sm)}
+.checks{grid-template-columns:repeat(2,minmax(0,1fr))}
+}
+@media (max-width:560px){
+.console-main{padding:24px 16px 64px}
+.page-header{margin-bottom:20px}
+.overview-title{gap:8px}.overview-title h1{font-size:28px}
+.overview-title .btn{padding-inline:12px}
+.overview-header .lede{font-size:14px}
+.metric{padding:16px}.metric-value{font-size:26px}
+.metric-sub{font-size:11px}
+.form-row,.team-form,.dashboard-aside{grid-template-columns:1fr}
+.panel{padding:20px}.panel-header{gap:10px}.panel-header h2{font-size:16px}
+.panel-header .btn{padding-inline:8px}
+.auth-card{padding:28px 22px}.auth-card.oauth-card{padding:0}.oauth-card-top{padding:12px 18px}.oauth-card-body{padding:22px 18px 20px}.oauth-card-foot{padding:12px 18px}.inline-form{flex-wrap:wrap}
+.topbar-in{gap:8px;padding-inline:12px}.topbar-links{gap:4px}
+.workspace-chip{max-width:none;padding-inline:10px}.brand{font-size:18px;gap:5px}.brand svg{width:22px;height:22px}
+.activity-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px 10px}
+.activity-row>.action-icon{width:32px;height:32px;grid-row:1/3;align-self:start}
+.activity-row>div:nth-child(2){grid-column:2;grid-row:1}
+.activity-row>.pill{grid-column:2;grid-row:2;justify-self:start}
+.activity-row>.icon-button{grid-column:3;grid-row:1/3}
+.activity-empty{padding:24px 8px}
+.workspace-context{align-items:flex-start;flex-wrap:wrap}
+.team-kit-secret{align-items:flex-start;flex-wrap:wrap}
+.tool-grid{grid-template-columns:minmax(0,1fr)}
+input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{font-size:16px}
+.provider-key-form{grid-template-columns:1fr}
+}
+@media (forced-colors:active){.btn,.chip,.segmented button,input,select,textarea{border:1px solid ButtonText}}
+@media (hover:none){.btn,.chip,.segmented button,.icon-button,.workspace-chip,.nav-item{min-height:44px}.icon-button{min-width:44px}}
+`;
+const consoleScript = String.raw `
+var VIEW_PATHS = { overview: '/', catalog: '/catalog', setup: '/keys', workspaces: '/workspaces', activity: '/activity', billing: '/billing', login: '/login', signup: '/signup' };
+var VIEW_TITLES = { overview: 'Overview', catalog: 'Tools', setup: 'API access', workspaces: 'Workspaces', activity: 'Activity', billing: 'Billing and credits', login: 'Sign in', signup: 'Create account' };
+var LANE_LABELS = { composio_instant: 'Instant tool', composio_sdk: 'Connected app', stripe_projects: 'Cloud service' };
+var STATUS_LABELS = {
+  executed: 'Completed',
+  succeeded: 'Completed',
+  completed: 'Completed',
+  guardrail_applied: 'Guardrail active',
+  memory_saved: 'Saved to memory',
+  planned_dry_run: 'Planned',
+  pending_approval: 'Needs your review',
+  awaiting_approval: 'Needs your review',
+  awaiting_oauth_connection: 'Connect app to continue',
+  running: 'In progress',
+  in_progress: 'In progress',
+  queued: 'In progress',
+  disabled: 'Not enabled',
+  not_enabled: 'Not enabled',
+  unknown: 'Could not verify',
+  unverified: 'Could not verify'
+};
+var DEFAULT_PARAM_LABELS = {
+  defaultRegion: 'Default cloud region',
+  defaultGithubOwner: 'Default GitHub owner',
+  defaultGithubRepo: 'Default GitHub repo',
+  defaultSlackChannel: 'Default Slack channel',
+  defaultEmail: 'Default notification email',
+  defaultDomain: 'Default web domain'
+};
+var MODULE_LABELS = {
+  McpSecurityScanner: 'Prompt injection scan',
+  PromptInjectionScanner: 'Prompt injection scan',
+  RingEnforcer: 'Access level guard',
+  ExecutionRings: 'Access level guard',
+  PolicyEngine: 'Approval policy',
+  AuditLogger: 'Signed audit log',
+  HashChainAuditLog: 'Signed audit log',
+  KillSwitch: 'Emergency stop',
+  KillSwitchManager: 'Emergency stop',
+  TrustEngine: 'Trust score monitor',
+  TrustScoreEngine: 'Trust score monitor',
+  CredentialVault: 'Encrypted vault',
+  SecretRedactor: 'Secret redaction',
+  SqlAstGuard: 'Destructive SQL guard',
+  Ed25519Identity: 'Signed decisions',
+  ReceiptSigner: 'Signed audit records',
+  RateLimiter: 'Rate protection'
+};
+var TOKEN_KEY = 'muxo_external_api_key';
+var ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+function formatToolLabel(slug) {
+  if (!slug) return 'Tool';
+  var parts = String(slug).split('.');
+  var last = parts[parts.length - 1] || slug;
+  var provider = parts.length > 1 ? parts[1] : '';
+  var providerNames = { hackernews: 'Hacker News', github: 'GitHub', dns: 'DNS', web: 'Web', seo: 'SEO', projects: 'Cloud services', neon: 'Neon Postgres', turso: 'Turso SQLite', upstash: 'Upstash Redis', supabase: 'Supabase', cloudflare: 'Cloudflare', vercel: 'Vercel', gmail: 'Gmail', slack: 'Slack', notion: 'Notion', linear: 'Linear' };
+  var pLabel = providerNames[provider] || (provider ? provider.charAt(0).toUpperCase() + provider.slice(1) : '');
+  var aLabel = last.replace(/_/g, ' ');
+  return pLabel ? (pLabel + ' · ' + aLabel) : aLabel;
+}
+function sanitizeForDisplay(val) {
+  if (!val || typeof val !== 'object') return val;
+  if (Array.isArray(val)) return val.map(sanitizeForDisplay);
+  var out = {};
+  var hiddenKeys = { supplierSettlement: 1, wholesaleCostCents: 1, muxoMarginCents: 1, totalSupplierWholesalePaidCents: 1, totalMuxoNetMarginCents: 1, supplierWholesalePaidCents: 1, muxoNetMarginCents: 1, upstreamSlug: 1, supermemoryNamespace: 1 };
+  Object.keys(val).forEach(function (k) {
+    if (hiddenKeys[k]) return;
+    out[k] = sanitizeForDisplay(val[k]);
+  });
+  return out;
+}
+
+var state = { view: 'overview', boot: null, lane: 'all', factsMode: 'current', facts: null, authMode: 'login', activeMemoryDefaults: {}, plainEnglishGuardrails: null, billingInterval: 'month', planCatalog: null };
+var currentTool = null;
+var externalApiKey = readToken();
+var latestSpawnedKey = '';
+var currentWorkspaceId = '';
+var activeWorkspaceOverrideId = '';
+var pendingModalPlan = null;
+var pendingModalHandoff = null;
+var toastTimer = null;
+var catalogRequestId = 0;
+var authConfig = { provider: 'password', clerk: null };
+var clerk = null;
+var clerkMounted = '';
+
+function readToken() { try { return localStorage.getItem(TOKEN_KEY) || ''; } catch (e) { return ''; } }
+function writeToken(v) { try { if (v) localStorage.setItem(TOKEN_KEY, v); else localStorage.removeItem(TOKEN_KEY); } catch (e) {} }
+function byId(id) { return document.getElementById(id); }
+function setText(id, v) { var el = byId(id); if (el) el.textContent = v == null ? '' : String(v); }
+function esc(v) { return String(v == null ? '' : v).replace(/[&<>"']/g, function (c) { return ESC[c]; }); }
+function fmt(n) { return Number(n || 0).toLocaleString(); }
+function json(v) { return JSON.stringify(v, null, 2); }
+function pill(label, tone, dot) { return '<span class="pill' + (dot ? ' dot' : '') + '"' + (tone ? ' data-tone="' + tone + '"' : '') + '>' + esc(label) + '</span>'; }
+function emptyRow(cols, msg) { return '<tr><td class="empty" colspan="' + cols + '">' + esc(msg) + '</td></tr>'; }
+function shortId(id) { id = String(id || ''); return id.length > 20 ? id.slice(0, 20) + '…' : id; }
+function timeAgo(iso) {
+  if (!iso) return '';
+  var d = new Date(iso);
+  var s = Math.round((Date.now() - d.getTime()) / 1000);
+  if (!isFinite(s)) return '';
+  if (s < 45) return 'Just now';
+  if (s < 3600) return Math.max(1, Math.floor(s / 60)) + ' min ago';
+  if (s < 86400) return Math.floor(s / 3600) + ' hr ago';
+  return d.toLocaleDateString();
+}
+function laneBadge(lane) { return pill(LANE_LABELS[lane] || lane || 'Tool'); }
+function riskBadge(risk) {
+  var tone = risk === 'read' ? '' : risk === 'write' ? 'accent' : risk === 'destructive' ? 'danger' : 'warn';
+  return pill(risk || 'read', tone);
+}
+function statusBadge(status) {
+  var s = String(status || 'unknown');
+  var tone = /^(active|succeeded|approved|auto_approved|completed|executed|guardrail_applied|memory_saved)$/.test(s) ? 'ok'
+    : /(fail|error|denied|rejected|blocked|revoked|expired|unknown|unverified)/.test(s) ? 'danger'
+    : /(pending|initiated|waiting|awaiting)/.test(s) ? 'warn' : '';
+  return pill(STATUS_LABELS[s] || s.replace(/_/g, ' '), tone, true);
+}
+
+function showToast(msg, tone) {
+  var t = byId('toast');
+  if (!t) return;
+  t.textContent = msg;
+  if (tone) t.dataset.tone = tone; else delete t.dataset.tone;
+  t.classList.add('show');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(function () { t.classList.remove('show'); }, 4200);
+}
+function showError(err) {
+  console.error(err);
+  showToast((err && err.message) || String(err), 'danger');
+}
+async function withBusy(el, fn) {
+  if (el && el.getAttribute('aria-busy') === 'true') return;
+  if (el) el.setAttribute('aria-busy', 'true');
+  try { return await fn(); } finally { if (el) el.removeAttribute('aria-busy'); }
+}
+
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', theme === 'dark' ? THEME_BG.dark : THEME_BG.light);
+  var b = byId('theme-toggle');
+  if (b) {
+    b.setAttribute('aria-pressed', String(theme === 'dark'));
+    b.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+  }
+  if (clerk && clerkMounted && (state.view === 'login' || state.view === 'signup')) {
+    var prev = clerkMounted;
+    unmountClerkAuth();
+    mountClerkAuth(prev);
+  }
+}
+function toggleTheme() {
+  var next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+  applyTheme(next);
+  try { localStorage.setItem(THEME_KEY, next); } catch (e) {}
+}
+
+function openDialog(id) { var d = byId(id); if (d && !d.open) { if (d.showModal) d.showModal(); else d.setAttribute('open', ''); } }
+function closeDialog(id) { var d = byId(id); if (d && d.open) { if (d.close) d.close(); else d.removeAttribute('open'); } }
+function openMobileMenu() {
+  openDialog('mobile-menu');
+  byId('mobile-menu-toggle').setAttribute('aria-expanded', 'true');
+}
+function askInput(o) {
+  return new Promise(function (resolve) {
+    var d = byId('ask-dialog');
+    var form = byId('ask-form');
+    var input = byId('ask-input');
+    var wantsInput = o.input !== false;
+    var settled = false;
+    function finish(v) {
+      if (settled) return;
+      settled = true;
+      form.onsubmit = null;
+      d.removeEventListener('close', onClose);
+      closeDialog('ask-dialog');
+      resolve(v);
+    }
+    function onClose() { finish(null); }
+    setText('ask-title', o.title || 'Continue');
+    setText('ask-message', o.message || '');
+    byId('ask-message').hidden = !o.message;
+    byId('ask-field').hidden = !wantsInput;
+    setText('ask-label', o.label || '');
+    input.type = o.type || 'text';
+    input.value = o.value || '';
+    input.placeholder = o.placeholder || '';
+    var confirmBtn = byId('ask-confirm');
+    confirmBtn.textContent = o.confirm || 'Continue';
+    confirmBtn.className = 'btn ' + (o.danger ? 'btn-danger' : 'btn-primary');
+    form.onsubmit = function (e) {
+      e.preventDefault();
+      if (!wantsInput) return finish(true);
+      var v = input.value.trim();
+      if (!v) { input.focus(); return; }
+      finish(v);
+    };
+    d.addEventListener('close', onClose);
+    openDialog('ask-dialog');
+    if (wantsInput) setTimeout(function () { input.focus(); input.select(); }, 30);
+  });
+}
+function confirmAction(o) { return askInput(Object.assign({ input: false }, o)); }
+function showDetail(title, sub, data, summaryHtml) {
+  setText('detail-title', title);
+  setText('detail-sub', sub || '');
+  var summary = byId('detail-summary');
+  summary.innerHTML = summaryHtml || '';
+  summary.hidden = !summaryHtml;
+  var clean = typeof data === 'string' ? data : json(sanitizeForDisplay(data));
+  setText('detail-body', clean);
+  openDialog('detail-dialog');
+}
+async function copyFrom(id) {
+  var el = byId(id);
+  if (!el) return;
+  var text = el.dataset.copyText || el.textContent || '';
+  try {
+    await navigator.clipboard.writeText(text);
+    showToast('Copied to clipboard');
+  } catch (e) {
+    var range = document.createRange();
+    range.selectNodeContents(el);
+    var sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+    showToast('Selected. Press Cmd+C to copy.');
+  }
+}
+
+function viewForPath(p) {
+  var clean = p.length > 1 ? p.replace(/\/+$/, '') : p;
+  return ROUTES[clean] || 'overview';
+}
+function navigate(view, opts) {
+  opts = opts || {};
+  if (!VIEW_PATHS[view]) view = 'overview';
+  var authView = view === 'login' || view === 'signup';
+  closeDialog('mobile-menu');
+  byId('mobile-menu-toggle').hidden = authView;
+  state.view = view;
+  byId('console-shell').hidden = authView;
+  byId('auth-view').hidden = !authView;
+  document.querySelectorAll('[data-view]').forEach(function (el) { el.hidden = el.dataset.view !== view; });
+  document.querySelectorAll('.nav-item[data-nav]').forEach(function (a) {
+    if (a.dataset.nav === view) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current');
+  });
+  if (authView) setAuthMode(view);
+  var path = VIEW_PATHS[view];
+  if (opts.push !== false && location.pathname !== path) history.pushState({ view: view }, '', path);
+  document.title = VIEW_TITLES[view] + ' · Muxo';
+  if (!opts.skipLoad) loadView(view);
+  if (opts.focus !== false) {
+    window.scrollTo(0, 0);
+    var target = authView ? byId('auth-email') : byId('main');
+    if (target) target.focus({ preventScroll: true });
+  }
+}
+function loadView(view) {
+  var job = null;
+  if (view === 'overview' || view === 'setup' || view === 'workspaces') job = refreshOverview();
+  else if (view === 'catalog') job = loadCatalog();
+  else if (view === 'activity') job = Promise.all([loadRuns(), loadPlans()]);
+  else if (view === 'billing') job = loadLedger();
+  if (job && job.catch) job.catch(showError);
+}
+function switchTab(tabId) { navigate(tabId === 'receipts' ? 'activity' : tabId); }
+
+async function api(path, opts) {
+  opts = opts || {};
+  var headers = Object.assign({ 'Content-Type': 'application/json', Accept: 'application/json' }, opts.headers || {});
+  if (activeWorkspaceOverrideId && !headers['X-Muxo-Workspace-Id']) {
+    headers['X-Muxo-Workspace-Id'] = activeWorkspaceOverrideId;
+  }
+  if (!opts.anonymous && !headers.Authorization) {
+    if (externalApiKey) headers.Authorization = 'Bearer ' + externalApiKey;
+    else if (clerkSignedIn()) {
+      var sessionToken = await clerk.session.getToken();
+      if (sessionToken) headers.Authorization = 'Bearer ' + sessionToken;
+    }
+  }
+  var res = await fetch(path, { method: opts.method || 'GET', headers: headers, body: opts.body });
+  var data;
+  try { data = await res.json(); } catch (e) { data = { ok: false, error: 'Unexpected response from Muxo (HTTP ' + res.status + ')' }; }
+  if (!res.ok || data.ok === false) {
+    var err = new Error(data.error || data.message || ('HTTP ' + res.status));
+    err.status = res.status;
+    err.data = data;
+    if (res.status === 401 && !opts.anonymous) handleUnauthorized();
+    throw err;
+  }
+  return data;
+}
+function post(path, body, opts) { return api(path, Object.assign({}, opts || {}, { method: 'POST', body: JSON.stringify(body || {}) })); }
+
+function clerkSignedIn() { return Boolean(clerk && clerk.session && clerk.user); }
+function isSignedIn() { return Boolean(externalApiKey) || clerkSignedIn(); }
+function handleUnauthorized() {
+  if (externalApiKey) {
+    externalApiKey = '';
+    writeToken('');
+    showToast('That key no longer works. Sign in again.', 'danger');
+  }
+  if (!clerkSignedIn() && state.view !== 'login' && state.view !== 'signup') navigate('login', { focus: false });
+}
+function clerkAppearance() {
+  var cs = getComputedStyle(document.documentElement);
+  function v(name) { return cs.getPropertyValue(name).trim(); }
+  return {
+    variables: {
+      colorPrimary: v('--color-button-primary'), colorText: v('--color-text'), colorTextSecondary: v('--color-muted'),
+      colorBackground: v('--color-surface'), colorInputBackground: v('--color-bg'), colorInputText: v('--color-text'),
+      colorDanger: v('--color-danger'), borderRadius: '12px', fontFamily: v('--font-sans'), fontSize: '15px'
+    },
+    elements: {
+      rootBox: { width: '100%' }, cardBox: { width: '100%', boxShadow: 'none', border: '0' },
+      card: { boxShadow: 'none', background: 'transparent', padding: '4px 0 0' },
+      header: { display: 'none' }, footer: { background: 'transparent' }
+    }
+  };
+}
+function loadClerkScript(cfg) {
+  return new Promise(function (resolve, reject) {
+    if (window.Clerk) { resolve(window.Clerk); return; }
+    if (!/^https:\/\/[a-z0-9.-]+$/i.test(cfg.frontendApi || '')) { reject(new Error('Sign-in is misconfigured on this server.')); return; }
+    var s = document.createElement('script');
+    s.src = cfg.frontendApi + '/npm/@clerk/clerk-js@5/dist/clerk.browser.js';
+    s.async = true;
+    s.crossOrigin = 'anonymous';
+    s.setAttribute('data-clerk-publishable-key', cfg.publishableKey);
+    var timer = setTimeout(function () { reject(new Error('Sign-in took too long to load. Check your connection and reload.')); }, 15000);
+    s.onload = function () { clearTimeout(timer); if (window.Clerk) resolve(window.Clerk); else reject(new Error('Sign-in could not load.')); };
+    s.onerror = function () { clearTimeout(timer); reject(new Error('Sign-in could not load. Check your connection and reload.')); };
+    document.head.appendChild(s);
+  });
+}
+async function loadAuth() {
+  try { authConfig = await api('/api/v1/auth/config', { anonymous: true }); } catch (e) { authConfig = { provider: 'password', clerk: null }; }
+  if (authConfig.provider !== 'clerk' || !authConfig.clerk) return;
+  byId('auth-form').hidden = true;
+  byId('auth-tabs').hidden = true;
+  byId('clerk-auth').hidden = false;
+  setAuthMode(state.view === 'signup' ? 'signup' : 'login');
+  try {
+    clerk = await loadClerkScript(authConfig.clerk);
+    await clerk.load({ appearance: clerkAppearance() });
+    var lastSession = clerk.session ? clerk.session.id : '';
+    clerk.addListener(function (e) {
+      var id = e && e.session ? e.session.id : '';
+      if (id === lastSession) return;
+      lastSession = id;
+      onClerkSessionChange();
+    });
+  } catch (err) {
+    clerk = null;
+    removeClerkLoading();
+    setText('auth-error', err.message);
+  }
+}
+function removeClerkLoading() {
+  var loading = byId('clerk-loading');
+  if (loading) loading.remove();
+}
+function mountClerkAuth(view) {
+  if (!clerk || !clerk.loaded || clerkSignedIn()) return;
+  var key = view === 'signup' ? 'signup' : 'login';
+  if (clerkMounted === key) return;
+  unmountClerkAuth();
+  removeClerkLoading();
+  var target = location.origin + '/';
+  var opts = { routing: 'hash', forceRedirectUrl: target, signInForceRedirectUrl: target, signUpForceRedirectUrl: target, appearance: clerkAppearance() };
+  if (key === 'signup') clerk.mountSignUp(byId('clerk-auth'), opts); else clerk.mountSignIn(byId('clerk-auth'), opts);
+  clerkMounted = key;
+}
+function unmountClerkAuth() {
+  if (!clerk || !clerkMounted) return;
+  try { if (clerkMounted === 'signup') clerk.unmountSignUp(byId('clerk-auth')); else clerk.unmountSignIn(byId('clerk-auth')); } catch (e) {}
+  clerkMounted = '';
+}
+function onClerkSessionChange() {
+  if (clerkSignedIn()) {
+    unmountClerkAuth();
+    if (state.view === 'login' || state.view === 'signup') navigate('overview');
+    else { refreshOverview().catch(showError); loadView(state.view); }
+  } else if (!externalApiKey) {
+    state.boot = null;
+    navigate('login', { focus: false });
+  }
+}
+
+function renderWorkspaceList(workspaces) {
+  var list = workspaces || (state.boot && state.boot.workspaces) || [];
+  var html = list.length ? list.map(function (w) {
+    var active = Boolean(w.isCurrent) || (w.id && w.id === currentWorkspaceId);
+    var badges = [
+      pill(String(w.role || 'member'), w.role === 'owner' || w.role === 'admin' ? 'accent' : ''),
+      w.teamName ? pill(w.teamName, 'ok') : '',
+      pill(fmt(w.creditsBalance != null ? w.creditsBalance : 0) + ' credits')
+    ].filter(Boolean).join(' ');
+    var actionHtml = active
+      ? pill('Active', 'ok', true)
+      : '<button class="btn btn-sm btn-primary" type="button" data-action="select-workspace" data-id="' + esc(w.id) + '">Switch</button>';
+    return '<div class="row"><div><strong>' + esc(w.name) + '</strong><small>' + esc(w.slug) + ' · ' + esc(String(w.tier || 'free')) + ' plan</small><div style="margin-top:4px">' + badges + '</div></div><span class="row-actions">' + actionHtml + '</span></div>';
+  }).join('') : '<p class="empty-note">Sign in or paste a workspace API key below to link a workspace.</p>';
+  var dialogBox = byId('workspace-dialog-list');
+  if (dialogBox) dialogBox.innerHTML = html;
+  var setupBox = byId('workspaces-list');
+  if (setupBox) setupBox.innerHTML = html;
+}
+async function switchExternalWorkspacePrompt() {
+  renderWorkspaceList();
+  openDialog('workspace-dialog');
+}
+async function openWorkspaceForm(kind) {
+  await switchExternalWorkspacePrompt();
+  var input = byId(kind === 'create' ? 'create-workspace-name-input' : 'join-workspace-key-input');
+  if (input) input.focus();
+}
+async function selectWorkspaceFromUi(workspaceId) {
+  if (!workspaceId) return;
+  activeWorkspaceOverrideId = workspaceId;
+  if (externalApiKey && externalApiKey.indexOf('mxs_') !== 0) {
+    externalApiKey = '';
+    writeToken('');
+  }
+  var res = await post('/api/v1/workspaces/switch', { workspaceId: workspaceId });
+  if (res.workspaces) renderWorkspaceList(res.workspaces);
+  closeDialog('workspace-dialog');
+  await refreshOverview();
+  showToast('Switched to ' + ((res.workspace && res.workspace.name) || workspaceId));
+  if (state.view === 'login' || state.view === 'signup') navigate('overview');
+  else loadView(state.view);
+}
+async function joinWorkspaceFromForm() {
+  var input = byId('join-workspace-key-input');
+  var val = (input && input.value ? input.value : '').trim();
+  if (!val) { showToast('Paste a workspace or team API key (mk_live_...)'); if (input) input.focus(); return; }
+  if (val.toLowerCase() === 'new') {
+    var signupRes = await post('/api/v1/agents/signup', { agentName: 'Console User', harness: 'console-ui' }, { anonymous: true });
+    if (!signupRes.apiKey) throw new Error('Signup did not return an API key.');
+    if (input) input.value = '';
+    closeDialog('workspace-dialog');
+    await setExternalWorkspaceKey(signupRes.apiKey, 'Opened new workspace ' + ((signupRes.workspace && signupRes.workspace.slug) || ''));
+    return;
+  }
+  var res = await post('/api/v1/workspaces/join', { apiKey: val });
+  if (input) input.value = '';
+  closeDialog('workspace-dialog');
+  activeWorkspaceOverrideId = (res.workspace && res.workspace.id) || '';
+  if (!clerkSignedIn()) {
+    externalApiKey = res.sessionToken || val;
+    writeToken(externalApiKey);
+  } else if (externalApiKey && externalApiKey.indexOf('mxs_') !== 0) {
+    externalApiKey = '';
+    writeToken('');
+  }
+  await refreshOverview();
+  showToast(res.message || ('Joined ' + ((res.workspace && res.workspace.name) || 'workspace')));
+  if (state.view === 'login' || state.view === 'signup') navigate('overview');
+  else loadView(state.view);
+}
+async function createWorkspaceFromForm() {
+  var nameInput = byId('create-workspace-name-input');
+  var teamInput = byId('create-workspace-team-input');
+  var name = (nameInput && nameInput.value ? nameInput.value : '').trim();
+  var teamName = (teamInput && teamInput.value ? teamInput.value : '').trim();
+  if (!name) { showToast('Enter a name for the new workspace'); if (nameInput) nameInput.focus(); return; }
+  var res;
+  if (isSignedIn()) {
+    res = await post('/api/v1/workspaces', { name: name, teamName: teamName || undefined });
+    activeWorkspaceOverrideId = (res.workspace && res.workspace.id) || '';
+  } else {
+    res = await post('/api/v1/agents/signup', { agentName: name, workspaceName: name, harness: 'console-ui' }, { anonymous: true });
+    if (res.apiKey) {
+      externalApiKey = res.apiKey;
+      writeToken(res.apiKey);
+    }
+  }
+  if (nameInput) nameInput.value = '';
+  if (teamInput) teamInput.value = '';
+  closeDialog('workspace-dialog');
+  await refreshOverview();
+  if (res.apiKey) {
+    showNewKey(res.apiKey, 'Created ' + ((res.workspace && res.workspace.name) || name) + '. Copy this key now; it will not be shown again.', false);
+  }
+  showToast('Created workspace ' + ((res.workspace && res.workspace.name) || name));
+}
+async function onboardTeamFromForm() {
+  var teamInput = byId('team-onboard-name');
+  var modeSelect = byId('team-onboard-mode');
+  var roleSelect = byId('team-onboard-role');
+  var teamName = (teamInput && teamInput.value ? teamInput.value : '').trim();
+  if (!teamName) { showToast('Enter the team name to onboard (for example, Platform Engineering)'); if (teamInput) teamInput.focus(); return; }
+  var mode = modeSelect ? modeSelect.value : 'shared_workspace';
+  var role = roleSelect ? roleSelect.value : 'operator';
+  var res = await post('/api/v1/workspaces/onboard-team', { teamName: teamName, mode: mode, role: role });
+  var kit = res.kit || {};
+  var box = byId('team-kit-box');
+  if (box) {
+    box.hidden = false;
+    setText('team-kit-title', (kit.teamName || teamName) + ' is ready');
+    setText('team-kit-workspace', (kit.workspace && kit.workspace.name) || (res.workspace && res.workspace.name) || '');
+    setText('team-kit-key', kit.apiKey || '');
+    setText('team-kit-cli', kit.cliSetupCommand || '');
+    setText('team-kit-instructions', kit.instructions || '');
+  }
+  if (teamInput) teamInput.value = '';
+  showToast('Created team access for ' + teamName);
+  await refreshOverview();
+}
+async function setExternalWorkspaceKey(key, toastMsg) {
+  try {
+    var joined = await post('/api/v1/workspaces/join', { apiKey: key });
+    activeWorkspaceOverrideId = (joined.workspace && joined.workspace.id) || '';
+    if (!clerkSignedIn()) {
+      externalApiKey = joined.sessionToken || key;
+      writeToken(externalApiKey);
+    }
+  } catch (e) {
+    externalApiKey = key;
+    writeToken(key);
+  }
+  await refreshOverview();
+  if (toastMsg) showToast(toastMsg);
+  if (state.view === 'login' || state.view === 'signup') navigate('overview');
+  else loadView(state.view);
+}
+async function signOut() {
+  if (externalApiKey) {
+    externalApiKey = '';
+    writeToken('');
+    if (authConfig.provider === 'clerk' && !clerkSignedIn()) { showToast('Signed out'); navigate('login'); return; }
+    showToast(clerkSignedIn() ? 'Key removed. Showing your workspace.' : 'Signed out');
+    await refreshOverview();
+    loadView(state.view);
+    return;
+  }
+  if (clerkSignedIn()) {
+    await clerk.signOut({ redirectUrl: location.origin + '/login' });
+    return;
+  }
+  navigate('login');
+}
+async function useLatestSpawnedKey() {
+  if (!latestSpawnedKey) return;
+  await setExternalWorkspaceKey(latestSpawnedKey, 'Opened the new agent workspace');
+}
+async function createClaimLinkPrompt() {
+  var email = await askInput({
+    title: 'Create an owner claim link',
+    message: 'Send this link to the person who should own the workspace. They can approve risky actions and manage billing.',
+    label: 'Owner email',
+    type: 'email',
+    placeholder: 'name@company.com',
+    confirm: 'Create link'
+  });
+  if (!email) return;
+  var forSpawned = latestSpawnedKey && !byId('use-spawned-key-btn').hidden;
+  var res = await post('/api/v1/agents/claim', { email: email }, forSpawned ? { headers: { Authorization: 'Bearer ' + latestSpawnedKey } } : undefined);
+  byId('new-key-banner').hidden = false;
+  setText('new-key-title', 'Claim link for ' + email);
+  setText('new-key-value', res.claimUrl || (res.claim && res.claim.claimUrl) || '');
+  byId('use-spawned-key-btn').hidden = true;
+  showToast('Claim link created');
+}
+
+function setAuthMode(view) {
+  var signup = view === 'signup';
+  state.authMode = signup ? 'signup' : 'login';
+  setText('auth-title', signup ? 'Create your Muxo account' : 'Sign in to Muxo');
+  setText('auth-lede', signup ? 'Get a workspace with 250 starter credits. No card required.' : 'Manage tools, approvals, memory, and billing for your agents.');
+  if (authConfig.provider === 'clerk') {
+    var authLink = byId('auth-switch-link');
+    authLink.hidden = false;
+    authLink.textContent = signup ? 'Already have an account? Sign in' : 'New to Muxo? Create an account';
+    authLink.dataset.mode = signup ? 'login' : 'signup';
+    mountClerkAuth(view);
+    return;
+  }
+  byId('auth-name-field').hidden = !signup;
+  byId('auth-workspace-field').hidden = !signup;
+  setText('auth-submit', signup ? 'Create account' : 'Sign in');
+  byId('auth-password').setAttribute('autocomplete', signup ? 'new-password' : 'current-password');
+  setText('auth-error', '');
+  document.querySelectorAll('#auth-tabs button').forEach(function (b) { b.setAttribute('aria-pressed', String(b.dataset.mode === state.authMode)); });
+}
+async function submitAuth() {
+  var signup = state.authMode === 'signup';
+  var email = byId('auth-email').value.trim();
+  var password = byId('auth-password').value;
+  setText('auth-error', '');
+  if (!email || email.indexOf('@') < 1) { setText('auth-error', 'Enter a valid email address.'); byId('auth-email').focus(); return; }
+  if (password.length < 6) { setText('auth-error', 'Use a password with at least 6 characters.'); byId('auth-password').focus(); return; }
+  try {
+    var res = signup
+      ? await post('/api/v1/auth/register', { name: byId('auth-name').value.trim() || email.split('@')[0], email: email, password: password, workspaceName: byId('auth-workspace').value.trim() || undefined }, { anonymous: true })
+      : await post('/api/v1/auth/login', { email: email, password: password }, { anonymous: true });
+    var token = res.sessionToken || res.apiKey;
+    if (!token) throw new Error('Muxo did not return a session. Try again.');
+    externalApiKey = token;
+    writeToken(token);
+    byId('auth-password').value = '';
+    await refreshOverview();
+    navigate('overview');
+    showToast(signup ? 'Account created. Welcome to Muxo.' : 'Signed in');
+    if (signup && res.apiKey) {
+      latestSpawnedKey = '';
+      showNewKey(res.apiKey, 'Your first API key. Copy it now; it will not be shown again.', false);
+    }
+  } catch (err) {
+    setText('auth-error', err.message);
+  }
+}
+
+function renderAccount(s) {
+  var user = (s && s.profile && s.profile.user) || {};
+  var signedIn = isSignedIn();
+  var usingKey = Boolean(externalApiKey) && externalApiKey.indexOf('mxs_') !== 0;
+  byId('account-signin').hidden = signedIn;
+  byId('account-signed-in').hidden = !signedIn;
+  setText('account-label', user.email || user.name || 'Signed in');
+  setText('mobile-account-label', user.email || user.name || 'Signed in');
+  byId('mobile-account-actions').hidden = !signedIn;
+  var badge = byId('workspace-auth-badge');
+  if (badge) {
+    badge.textContent = usingKey ? 'API key ' + externalApiKey.slice(0, 12) + '…' : signedIn ? 'Signed in' : 'Local workspace';
+    if (signedIn) badge.dataset.tone = 'accent'; else delete badge.dataset.tone;
+  }
+  byId('reset-workspace-row').hidden = !usingKey;
+}
+function syncPolicyForm(policy) {
+  if (!policy) return;
+  if (byId('policy-mode')) byId('policy-mode').value = policy.mode || 'enforce';
+  var req = {};
+  (policy.requireApprovalFor || []).forEach(function (r) { req[r] = true; });
+  document.querySelectorAll('#policy-risks input[type=checkbox]').forEach(function (cb) { cb.checked = Boolean(req[cb.value]); });
+  if (byId('policy-ring')) byId('policy-ring').value = String(policy.executionRing != null ? policy.executionRing : 2);
+  if (byId('policy-block-sql')) byId('policy-block-sql').checked = policy.blockDestructiveSql !== false;
+}
+function renderIdentity() {}
+function renderApiKeys(keys) {
+  byId('api-keys-list').innerHTML = keys.length ? keys.map(function (k) {
+    var revoked = Boolean(k.revokedAt);
+    var metaBadges = [
+      k.teamName ? pill('Team: ' + k.teamName, 'accent') : '',
+      k.role ? pill(k.role) : '',
+      pill(k.environment === 'test' ? 'Test' : 'Live', k.environment === 'test' ? 'warn' : 'ok')
+    ].filter(Boolean).join(' ');
+    return '<div class="row api-key-row"><div><strong>' + esc(k.name) + '</strong><small class="mono">' + esc(k.keyPrefix) + '</small></div>' +
+      (revoked ? pill('Revoked', 'danger') : '<span class="row-actions">' + metaBadges + ' ' +
+        '<button class="btn btn-sm" type="button" data-action="revoke-key" data-id="' + esc(k.id) + '" data-name="' + esc(k.name) + '">Revoke</button></span>') + '</div>';
+  }).join('') : '<p class="empty-note">No API keys yet. Create one to connect an agent or app.</p>';
+}
+function renderRecentRuns(runs) {
+  byId('recent-runs').innerHTML = runs.length ? runs.slice(0, 6).map(function (r) {
+    var meta = [LANE_LABELS[r.lane] || '', timeAgo(r.createdAt || r.startedAt), r.durationMs != null ? r.durationMs + ' ms' : ''].filter(Boolean).join(' · ');
+    var failed = /(fail|error|denied|rejected|blocked)/.test(r.status || '');
+    var completed = /^(succeeded|completed|executed)$/.test(r.status || '');
+    var tone = failed ? 'danger' : completed ? 'ok' : 'warn';
+    var icon = failed ? '${uiIcon("close")}' : completed ? '${uiIcon("check")}' : '${uiIcon("activity")}';
+    return '<div class="activity-row"><span class="action-icon" data-tone="' + tone + '">' + icon + '</span><div><strong>' + esc(formatToolLabel(r.toolSlug)) + '</strong><small>' + esc(meta) + '</small></div>' + statusBadge(r.status) +
+      (r.receiptId ? '<button class="icon-button" type="button" data-action="inspect-receipt" data-id="' + esc(r.receiptId) + '" aria-label="Inspect audit record for ' + esc(formatToolLabel(r.toolSlug)) + '">${uiIcon("arrow")}</button>' : '') + '</div>';
+  }).join('') : '<div class="activity-empty"><span class="action-icon">${uiIcon("shield")}</span><h3>No actions yet</h3><p>Choose a tool to get started. Every action leaves an audit trail.</p><a class="btn" href="/catalog" data-nav="catalog">Explore tools ${uiIcon("arrow")}</a></div>';
+  var seen = {};
+  var recentTools = runs.filter(function (r) {
+    if (!r.toolSlug || seen[r.toolSlug]) return false;
+    seen[r.toolSlug] = true;
+    return true;
+  }).slice(0, 4);
+  byId('recent-tools').innerHTML = recentTools.length ? recentTools.map(function (r) {
+    return '<a class="tool-row" href="/catalog" data-action="run-tool" data-slug="' + esc(r.toolSlug) + '"><div><strong>' + esc(formatToolLabel(r.toolSlug)) + '</strong><small>' + esc(LANE_LABELS[r.lane] || 'Tool') + '</small></div>${uiIcon("chevron")}</a>';
+  }).join('') : '<a class="tool-row" href="/catalog" data-action="browse-lane" data-lane="composio_instant"><div><strong>Search &amp; research</strong><small>Web, scraping, and data</small></div>${uiIcon("chevron")}</a><a class="tool-row" href="/catalog" data-action="browse-lane" data-lane="composio_sdk"><div><strong>Connected apps</strong><small>Tools for your team’s apps</small></div>${uiIcon("chevron")}</a><a class="tool-row" href="/catalog" data-action="browse-lane" data-lane="stripe_projects"><div><strong>Cloud services</strong><small>Provision and manage resources</small></div>${uiIcon("chevron")}</a>';
+  setText('recent-tools-title', recentTools.length ? 'Recently used tools' : 'Explore tools');
+}
+function countActive(list) { return (list || []).filter(function (x) { return x.status === 'active'; }).length; }
+function setCount(id, n) { setText(id, n ? fmt(n) : ''); }
+
+async function refreshOverview() {
+  var s = await api('/api/v1/bootstrap');
+  state.boot = s;
+  var org = s.organization || {};
+  var usage = org.usage || {};
+  var credits = usage.creditsBalance != null ? usage.creditsBalance : (org.creditsBalance || 0);
+  var used = usage.monthlyActionsUsed != null ? usage.monthlyActionsUsed : (org.monthlyActionsUsed || 0);
+  var limit = usage.monthlyActionsLimit != null ? usage.monthlyActionsLimit : (org.monthlyActionsLimit || 1000);
+  var plans = s.plans || [];
+  var runs = s.runs || [];
+  var activeConns = countActive(s.connections);
+  var activeRes = countActive(s.resources);
+  var pending = plans.filter(function (p) { return p.approvalStatus === 'pending_approval'; }).length;
+  var tier = String(org.tier || 'free');
+  var tierLabel = tier.charAt(0).toUpperCase() + tier.slice(1) + ' plan';
+  if (currentWorkspaceId && currentWorkspaceId !== org.id) {
+    byId('new-key-banner').hidden = true;
+    setText('new-key-value', '');
+    byId('team-kit-box').hidden = true;
+    ['team-kit-key', 'team-kit-cli', 'team-kit-instructions', 'team-kit-workspace'].forEach(function (id) { setText(id, ''); });
+  }
+  currentWorkspaceId = org.id || '';
+  setText('workspace-name', org.name || 'Workspace');
+  setText('workspace-tier', tierLabel);
+  setText('workspace-slug', org.name || org.slug || 'Primary workspace');
+  setText('overview-workspace-name', org.name || 'Workspace');
+  setText('overview-workspace-tier', tierLabel);
+  setText('access-workspace-name', org.name || 'Workspace');
+  setText('workspace-count', fmt((s.workspaces || []).length) + ((s.workspaces || []).length === 1 ? ' workspace' : ' workspaces'));
+  setText('kpi-pending', fmt(pending));
+  byId('kpi-pending').dataset.tone = pending ? 'warn' : '';
+  setText('kpi-pending-sub', pending ? 'Ready for your review' : 'You’re all caught up');
+  byId('approval-notice').hidden = !pending;
+  setText('approval-notice-title', fmt(pending) + (pending === 1 ? ' action needs approval' : ' actions need approval'));
+  setText('api-base-url', window.location.origin + '/api/v1');
+  setText('api-mcp-url', window.location.origin + '/mcp');
+  setText('kpi-credits', fmt(credits));
+  setText('kpi-tier-badge', tierLabel);
+  setText('kpi-actions', fmt(used));
+  setText('kpi-actions-sub', 'of ' + fmt(limit) + ' included');
+  setText('kpi-connections', fmt(activeConns + activeRes));
+  setText('meter-actions-text', fmt(used) + ' / ' + fmt(limit));
+  byId('meter-actions-bar').style.width = Math.min(100, Math.max(0, Math.round((used / Math.max(1, limit)) * 100))) + '%';
+  setText('meter-credits-text', fmt(credits));
+  setText('billing-plan', tierLabel);
+  setText('billing-credits', fmt(credits));
+  setCount('nav-res-count', activeRes);
+  setCount('nav-conn-count', activeConns);
+  setCount('nav-plan-count', pending);
+  setCount('nav-run-count', runs.length);
+  renderAccount(s);
+  syncPolicyForm(org.policy);
+  state.activeMemoryDefaults = s.activeMemoryDefaults || (s.supermemory && s.supermemory.activeDefaults) || {};
+  state.plainEnglishGuardrails = s.plainEnglishGuardrails || null;
+  renderPlainEnglishGuardrails(state.plainEnglishGuardrails, org.policy);
+  renderActiveMemoryDefaults(state.activeMemoryDefaults, s.activeGuardrails || (s.supermemory && s.supermemory.activeGuardrails) || []);
+  renderIdentity(s.governance);
+  renderApiKeys(s.apiKeys || []);
+  renderWorkspaceList(s.workspaces || []);
+  renderRecentRuns(runs);
+  return s;
+}
+
+function showNewKey(key, title, canSwitch) {
+  byId('new-key-banner').hidden = false;
+  setText('new-key-title', title);
+  setText('new-key-value', key);
+  byId('use-spawned-key-btn').hidden = !canSwitch;
+  if (state.view !== 'setup') navigate('setup');
+}
+async function spawnAutonomousAgent() {
+  var res = await post('/api/v1/agents/signup', { agentName: 'Autonomous Agent', harness: 'console-ui' }, { anonymous: true });
+  latestSpawnedKey = res.apiKey;
+  var slug = (res.workspace && res.workspace.slug) || '';
+  showNewKey(res.apiKey, 'New agent workspace ' + slug + '. Copy its key now; it will not be shown again.', true);
+  showToast('Created agent workspace ' + slug);
+}
+async function generateApiKey() {
+  var name = await askInput({ title: 'Create an API key', message: 'Name the key so you can recognize it later.', label: 'Key name', value: 'Agent key', confirm: 'Create key' });
+  if (!name) return;
+  var res = await post('/api/v1/api-keys', { name: name, environment: 'live' });
+  showNewKey(res.secretKey || res.apiKey, 'Copy this key now. It will not be shown again.', false);
+  showToast('API key created');
+  await refreshOverview();
+}
+
+async function revokeApiKey(id, name) {
+  var ok = await confirmAction({ title: 'Revoke ' + name + '?', message: 'Agents and apps using this key lose access right away. This cannot be undone.', confirm: 'Revoke key', danger: true });
+  if (!ok) return;
+  await api('/api/v1/api-keys/' + encodeURIComponent(id), { method: 'DELETE' });
+  showToast('Key revoked');
+  await refreshOverview();
+}
+
+async function planAndRun(toolSlug, input, reason) {
+  var planned = await post('/api/v1/plans', { toolSlug: toolSlug, input: input || {}, reason: reason });
+  if (planned.plan.approvalStatus === 'pending_approval') await post('/api/v1/plans/' + planned.plan.id + '/approve');
+  var executed = await post('/api/v1/plans/' + planned.plan.id + '/execute');
+  return { planned: planned, executed: executed };
+}
+function runSummary(planned, executed) {
+  var d = planned.decisionRecord;
+  var m = planned.memoryContext;
+  return {
+    runId: executed.run.id,
+    tool: executed.run.toolSlug,
+    status: executed.run.status,
+    durationMs: executed.run.durationMs,
+    safety: d ? { verdict: d.verdict, decisionId: d.id, checksPassed: (d.modulesEvaluated || []).length } : null,
+    memory: m ? { recalledItems: (m.recalledMemories || []).length } : null,
+    auditRecord: executed.receipt ? { id: executed.receipt.id, verified: true } : null,
+    output: sanitizeForDisplay(executed.run.output)
+  };
+}
+function renderQuickResult(opts) {
+  var box = byId('quick-run-output');
+  var rawJson = json(sanitizeForDisplay(opts.raw));
+  box.dataset.copyText = rawJson;
+  var kv = (opts.kv || []).filter(function (row) { return row && row[1] != null && row[1] !== ''; }).map(function (row) {
+    return '<div class="result-kv"><span>' + esc(row[0]) + '</span><strong>' + esc(row[1]) + '</strong></div>';
+  }).join('');
+  box.innerHTML = '<div class="result-card">' +
+    '<div class="result-head"><div><strong>' + esc(opts.title) + '</strong>' + (opts.subtitle ? '<div class="result-meta">' + esc(opts.subtitle) + '</div>' : '') + '</div>' + (opts.badgeHtml || '') + '</div>' +
+    (kv ? '<div class="result-body">' + kv + '</div>' : '') +
+    (opts.actionsHtml ? '<div class="result-actions" style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">' + opts.actionsHtml + '</div>' : '') +
+    '<details class="recall-raw"><summary>Full output</summary><pre class="code">' + esc( json(sanitizeForDisplay(opts.output !== undefined ? opts.output : opts.raw)) ) + '</pre></details>' +
+    '</div>';
+}
+async function quickRun(toolSlug, input) {
+  if (state.view !== 'overview') navigate('overview');
+  var box = byId('quick-run-output');
+  var label = formatToolLabel(toolSlug);
+  setText('quick-run-status', 'Running ' + label + '…');
+  box.innerHTML = '<p class="empty-note">Checking policy and running ' + esc(label) + '…</p>';
+  try {
+    var r = await planAndRun(toolSlug, input, 'Console quick run');
+    var summary = runSummary(r.planned, r.executed);
+    renderQuickResult({
+      title: label,
+      subtitle: (r.executed.run.durationMs != null ? r.executed.run.durationMs + ' ms' : '') + (summary.auditRecord ? ' · Signed audit record' : ''),
+      badgeHtml: statusBadge(r.executed.run.status),
+      kv: [
+        ['Policy check', summary.safety && summary.safety.verdict === 'allow' ? 'Allowed' : 'Approved'],
+        ['Audit record', summary.auditRecord ? shortId(summary.auditRecord.id) : 'Recorded']
+      ],
+      output: summary.output,
+      raw: summary
+    });
+    setText('quick-run-status', label + ' completed in ' + r.executed.run.durationMs + ' ms');
+    showToast('Finished ' + label);
+    await refreshOverview();
+  } catch (err) {
+    box.innerHTML = '<div class="callout" data-tone="danger"><p>' + esc(err.message) + '</p></div>';
+    setText('quick-run-status', 'The run did not complete.');
+    throw err;
+  }
+}
+
+function setLane(lane) {
+  state.lane = lane || 'all';
+  document.querySelectorAll('#catalog-lanes button').forEach(function (b) { b.setAttribute('aria-pressed', String(b.dataset.lane === state.lane)); });
+}
+function toolTile(t) {
+  var cost = Number(t.creditCost) > 0 ? fmt(t.creditCost) + ' credits' : 'Included';
+  var provider = t.providerName || (t.providerSlug ? t.providerSlug.charAt(0).toUpperCase() + t.providerSlug.slice(1) : '');
+  return '<article class="tool-tile"><div class="tool-meta">' + laneBadge(t.lane) + riskBadge(t.riskLevel) + '</div>' +
+    '<h3>' + esc(t.name) + '</h3>' + (provider ? '<p class="tool-slug">' + esc(provider) + '</p>' : '') + '<p class="tool-desc">' + esc(t.description) + '</p>' +
+    '<div class="tool-foot"><span>' + esc(cost) + '</span><button class="btn btn-sm" data-action="run-tool" data-slug="' + esc(t.slug) + '">Plan and run</button></div></article>';
+}
+async function loadCatalog() {
+  var requestId = ++catalogRequestId;
+  var q = byId('catalog-search').value.trim();
+  var grid = byId('catalog-grid');
+  byId('clear-catalog-search').hidden = !q;
+  grid.setAttribute('aria-busy', 'true');
+  setText('catalog-status', 'Loading tools…');
+  try {
+    var data = await api('/api/v1/tools?query=' + encodeURIComponent(q) + '&lane=' + encodeURIComponent(state.lane) + '&limit=48');
+    if (requestId !== catalogRequestId) return;
+    var tools = data.tools || [];
+    setText('nav-catalog-count', data.total ? fmt(data.total) : '');
+    setText('catalog-status', fmt(data.total != null ? data.total : tools.length) + ' tools' + (q ? ' matching "' + q + '"' : '') + (tools.length < (data.total || 0) ? ', showing ' + tools.length : ''));
+    grid.innerHTML = tools.length ? tools.map(toolTile).join('') : '<div class="empty-state catalog-empty"><span class="action-icon">${uiIcon("search")}</span><h2>No matching tools</h2><p>Try another search or reset your filters.</p><button class="btn" type="button" data-action="reset-catalog">Reset filters</button></div>';
+  } catch (err) {
+    if (requestId !== catalogRequestId) return;
+    setText('catalog-status', 'Tools could not be loaded.');
+    grid.innerHTML = '<div class="empty-state catalog-empty"><span class="action-icon">${uiIcon("refresh")}</span><h2>Tools couldn’t be loaded</h2><p>Your workspace is unchanged. Try again when you’re ready.</p><button class="btn" type="button" data-action="retry-catalog">Try again</button></div>';
+    throw err;
+  } finally {
+    if (requestId === catalogRequestId) grid.removeAttribute('aria-busy');
+  }
+}
+function resetCatalog(keepLane) {
+  byId('catalog-search').value = '';
+  byId('clear-catalog-search').hidden = true;
+  if (!keepLane) setLane('all');
+  byId('catalog-search').focus();
+  return loadCatalog();
+}
+
+async function openExecuteModal(slug) {
+  var tool = await api('/api/v1/tools/' + encodeURIComponent(slug));
+  currentTool = tool;
+  setText('modal-tool-name', tool.name);
+  var costLabel = Number(tool.creditCost) > 0 ? fmt(tool.creditCost) + ' credits' : 'Included';
+  setText('modal-tool-slug', [LANE_LABELS[tool.lane] || tool.lane, (tool.riskLevel || 'read') + ' access', costLabel].filter(Boolean).join(' · '));
+  setText('modal-tool-desc', tool.description);
+  var sample = {};
+  var defs = state.activeMemoryDefaults || {};
+  var props = (tool.inputSchema && tool.inputSchema.properties) || {};
+  Object.keys(props).forEach(function (k) {
+    var v = props[k] || {};
+    if (k === 'region' && defs.defaultRegion) sample[k] = defs.defaultRegion;
+    else if (k === 'owner' && defs.defaultGithubOwner) sample[k] = defs.defaultGithubOwner;
+    else if ((k === 'repo' || k === 'repository') && defs.defaultGithubRepo) sample[k] = defs.defaultGithubRepo;
+    else if (k === 'channel' && defs.defaultSlackChannel) sample[k] = defs.defaultSlackChannel;
+    else if ((k === 'domain' || k === 'hostname') && defs.defaultDomain) sample[k] = defs.defaultDomain;
+    else if ((k === 'to' || k === 'recipient' || k === 'email') && defs.defaultEmail) sample[k] = defs.defaultEmail;
+    else if (v.default !== undefined) sample[k] = v.default;
+    else if (k === 'query') sample[k] = 'Muxo cloud infrastructure and connected apps';
+    else if (k === 'domain') sample[k] = 'muxo.ai';
+    else if (k === 'owner') sample[k] = 'cloudflare';
+    else if (k === 'repo') sample[k] = 'workerd';
+    else if (k === 'url') sample[k] = defs.defaultDomain ? ('https://' + defs.defaultDomain) : 'https://muxo.ai';
+    else if (k === 'resource_name') sample[k] = tool.providerSlug + '-primary';
+  });
+  byId('modal-tool-input').value = json(sample);
+  byId('modal-oauth-box').hidden = true;
+  byId('modal-result').hidden = true;
+  pendingModalPlan = null;
+  pendingModalHandoff = null;
+  openDialog('exec-modal');
+}
+function closeExecuteModal() { closeDialog('exec-modal'); }
+function readModalInput() {
+  try { return JSON.parse(byId('modal-tool-input').value || '{}'); }
+  catch (e) { throw new Error('Input must be valid JSON.'); }
+}
+function showModalResult(text) {
+  var el = byId('modal-result');
+  el.hidden = false;
+  el.textContent = text;
+}
+function renderModalOAuthHandoff(planned) {
+  var box = byId('modal-oauth-box');
+  if (planned && planned.authHandoff && planned.authHandoff.required) {
+    pendingModalPlan = planned.plan;
+    pendingModalHandoff = planned.authHandoff;
+    var provider = planned.authHandoff.provider || 'this app';
+    setText('modal-oauth-title', 'Connect ' + provider + ' to continue');
+    setText('modal-oauth-msg', planned.authHandoff.instructions || 'Approve access in your browser, then come back and continue. The plan is saved.');
+    byId('modal-oauth-link').href = planned.authHandoff.redirectUrl || '#';
+    box.hidden = false;
+    return true;
+  }
+  box.hidden = true;
+  return false;
+}
+async function waitAndResumeModalPlan() {
+  if (!pendingModalHandoff || !pendingModalPlan) return;
+  showModalResult('Waiting for ' + pendingModalHandoff.provider + ' to confirm the connection…');
+  try {
+    var waited = await post('/api/v1/connections/wait', { provider: pendingModalHandoff.provider, externalAccountId: pendingModalHandoff.externalAccountId, timeoutMs: 12000, pollIntervalMs: 1500 });
+    if (!waited.connected) {
+      showModalResult(json(sanitizeForDisplay(waited)));
+      showToast('Still waiting for ' + pendingModalHandoff.provider + ' (' + waited.status + ')');
+      return;
+    }
+    byId('modal-oauth-box').hidden = true;
+    if (pendingModalPlan.approvalStatus === 'pending_approval') await post('/api/v1/plans/' + pendingModalPlan.id + '/approve');
+    var executed = await post('/api/v1/plans/' + pendingModalPlan.id + '/execute');
+    showModalResult(json(sanitizeForDisplay({ connection: waited, execution: executed })));
+    showToast('Connected and ran the plan');
+    await refreshOverview();
+  } catch (err) {
+    showModalResult('Error: ' + err.message);
+  }
+}
+async function completeCallbackAndResumeModalPlan() {
+  if (!pendingModalHandoff || !pendingModalPlan) return;
+  await fetch(callbackUrl(pendingModalHandoff.provider, pendingModalHandoff.externalAccountId));
+  showToast('Recorded the ' + pendingModalHandoff.provider + ' handoff');
+  await waitAndResumeModalPlan();
+}
+function callbackUrl(provider, externalAccountId) {
+  return '/oauth/callback?format=json&workspace_id=' + encodeURIComponent(currentWorkspaceId) +
+    '&provider=' + encodeURIComponent(provider) +
+    '&connected_account_id=' + encodeURIComponent(externalAccountId || ('ca_' + Date.now())) +
+    '&status=success';
+}
+async function submitPlanOnly() {
+  try {
+    var input = readModalInput();
+    var planned = await post('/api/v1/plans', { toolSlug: currentTool.slug, input: input, reason: byId('modal-tool-reason').value });
+    renderModalOAuthHandoff(planned);
+    showModalResult(json(sanitizeForDisplay(planned)));
+    showToast('Plan created. Review it in Activity.');
+    await refreshOverview();
+  } catch (err) {
+    showModalResult('Error: ' + err.message);
+  }
+}
+async function submitPlanAndExecute() {
+  showModalResult('Planning and running ' + (currentTool.name || currentTool.slug) + '…');
+  try {
+    var input = readModalInput();
+    var planned = await post('/api/v1/plans', { toolSlug: currentTool.slug, input: input, reason: byId('modal-tool-reason').value });
+    if (renderModalOAuthHandoff(planned)) {
+      showModalResult(json(sanitizeForDisplay(planned)));
+      showToast('Connect ' + planned.authHandoff.provider + ' to continue');
+      await refreshOverview();
+      return;
+    }
+    if (planned.plan.approvalStatus === 'pending_approval') await post('/api/v1/plans/' + planned.plan.id + '/approve');
+    var executed = await post('/api/v1/plans/' + planned.plan.id + '/execute');
+    showModalResult(json(runSummary(planned, executed)));
+    showToast('Run ' + executed.run.status);
+    await refreshOverview();
+  } catch (err) {
+    showModalResult('Error: ' + err.message);
+  }
+}
+
+async function loadResources() {
+  var data = await api('/api/v1/resources');
+  var list = data.resources || [];
+  setCount('nav-res-count', countActive(list));
+  var tbody = byId('resources-tbody');
+  if (tbody) tbody.innerHTML = list.length ? list.map(function (r) {
+    var serviceLabel = String(r.serviceSlug || 'Service').replace(/[_-]+/g, ' ');
+    var envCount = (r.envVarKeys || []).length;
+    var secretCell = envCount ? pill(envCount + (envCount === 1 ? ' secret in vault' : ' secrets in vault'), 'ok') : pill('Encrypted in vault', 'ok');
+    return '<tr><td><strong>' + esc(r.resourceName) + '</strong></td><td>' + esc(r.providerName) + '</td>' +
+      '<td class="small muted" style="text-transform:capitalize">' + esc(serviceLabel) + '</td><td>' + statusBadge(r.status) + '</td>' +
+      '<td>' + secretCell + '</td>' +
+      '<td class="cell-actions"><button class="btn btn-sm" data-action="rotate" data-name="' + esc(r.resourceName) + '">Rotate keys</button></td></tr>';
+  }).join('') : emptyRow(6, 'Nothing provisioned yet. Choose "Provision a service" to add a database, cache, or storage.');
+  loadProvisioningOnboardingStatus().catch(function () {});
+}
+
+var stripeConnectScriptPromise = null;
+function loadStripeConnectJs() {
+  if (window.StripeConnect && typeof window.StripeConnect.init === 'function') {
+    return Promise.resolve(window.StripeConnect);
+  }
+  if (stripeConnectScriptPromise) return stripeConnectScriptPromise;
+  stripeConnectScriptPromise = new Promise(function (resolve, reject) {
+    var s = document.createElement('script');
+    s.src = 'https://connect-js.stripe.com/v1.0/connect.js';
+    s.async = true;
+    s.onload = function () { resolve(window.StripeConnect); };
+    s.onerror = function () {
+      stripeConnectScriptPromise = null;
+      reject(new Error('Could not load Stripe Connect.js'));
+    };
+    document.head.appendChild(s);
+  });
+  return stripeConnectScriptPromise;
+}
+
+async function loadProvisioningOnboardingStatus() {
+  var badge = byId('stripe-connect-account-badge');
+  var meta = byId('stripe-connect-account-meta');
+  if (!badge || !meta) return;
+  var res = await api('/api/v1/provisioning/connected_accounts');
+  if (!res.connected || !res.account) {
+    badge.textContent = 'Not onboarded yet';
+    delete badge.dataset.tone;
+    meta.textContent = 'Complete verification to provision managed databases and cloud resources in your workspace.';
+    return;
+  }
+  var acct = res.account;
+  var projStatus = acct.configuration && acct.configuration.developer && acct.configuration.developer.capabilities && acct.configuration.developer.capabilities.projects
+    ? acct.configuration.developer.capabilities.projects.status
+    : 'active';
+  var dueList = (acct.requirements && (acct.requirements.currently_due || acct.requirements.entries)) || [];
+  badge.textContent = projStatus === 'active' ? 'Verified' : 'Verification (' + projStatus + ')';
+  badge.dataset.tone = projStatus === 'active' && dueList.length === 0 ? 'ok' : 'warn';
+  meta.textContent = dueList.length > 0
+    ? dueList.length + ' verification requirement(s) currently due. Complete onboarding below.'
+    : 'Cloud resource provisioning is ' + projStatus + ' for this workspace.';
+}
+
+async function openEmbeddedOnboarding() {
+  var box = byId('stripe-embedded-onboarding-box');
+  var mount = byId('stripe-embedded-onboarding-mount');
+  if (!box || !mount) return;
+  box.hidden = false;
+  mount.innerHTML = '<p class="empty-note">Preparing verification session…</p>';
+  var session = await post('/api/v1/provisioning/connected_account_sessions', {
+    auto_create: true,
+    enable_account_management: true,
+    enable_notification_banner: true,
+    fields: 'currently_due',
+    future_requirements: 'include'
+  });
+  await loadProvisioningOnboardingStatus();
+  if (session.publishable_key) {
+    try {
+      await loadStripeConnectJs();
+      var instance = window.StripeConnect.init({
+        publishableKey: session.publishable_key,
+        fetchClientSecret: async function () {
+          var refreshed = await post('/api/v1/provisioning/connected_account_sessions', {
+            account: session.account,
+            enable_account_management: true,
+            enable_notification_banner: true,
+            fields: 'currently_due',
+            future_requirements: 'include'
+          });
+          return refreshed.client_secret;
+        }
+      });
+      var bannerEl = instance.create('notification-banner');
+      var onboardingEl = instance.create('account-onboarding');
+      if (typeof onboardingEl.setCollectionOptions === 'function') {
+        onboardingEl.setCollectionOptions({
+          fields: 'currently_due',
+          futureRequirements: 'include'
+        });
+      }
+      if (typeof onboardingEl.setOnExit === 'function') {
+        onboardingEl.setOnExit(function () {
+          showToast('Verification step saved');
+          loadProvisioningOnboardingStatus().catch(function () {});
+        });
+      }
+      mount.innerHTML = '';
+      mount.appendChild(bannerEl);
+      mount.appendChild(onboardingEl);
+      showToast('Verification form ready');
+      return;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  mount.innerHTML = '<div class="result-card">' +
+    '<div class="result-head"><div><strong>Account verification session ready</strong>' +
+    '<div class="result-meta">Cloud resource provisioning verification</div></div>' +
+    pill('Session active', 'ok') + '</div>' +
+    '<div class="result-body">' +
+    '<div class="result-kv"><span>Status</span><strong>Ready for verification</strong></div>' +
+    '<div class="result-kv"><span>Flow</span><strong>' + (session.publishable_key ? 'Embedded verification' : 'Hosted verification link') + '</strong></div>' +
+    '</div>' +
+    '<div class="result-actions" style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">' +
+    '<button class="btn btn-sm btn-primary" type="button" data-action="open-hosted-onboarding">Open verification link</button>' +
+    '<button class="btn btn-sm" type="button" data-action="refresh-onboarding-status">Refresh status</button>' +
+    '</div></div>';
+  showToast('Verification session ready');
+}
+
+async function openHostedOnboardingLink() {
+  var link = await post('/api/v1/provisioning/connected_account_links', {
+    auto_create: true,
+    type: 'account_onboarding',
+    fields: 'currently_due',
+    future_requirements: 'include'
+  });
+  await loadProvisioningOnboardingStatus();
+  if (link && link.url) {
+    showDetail('Verification link', 'Complete verification to provision cloud resources', {
+      onboardingUrl: link.url,
+      expiresAt: link.expires_at
+    });
+    showToast('Verification link ready');
+  }
+}
+async function rotateResource(name) {
+  var ok = await confirmAction({ title: 'Rotate credentials for ' + name + '?', message: 'Apps using the current credentials will stop working until they pick up the new ones from your vault.', confirm: 'Rotate keys', danger: true });
+  if (!ok) return;
+  var r = await planAndRun('resource.projects.rotate_credentials', { resource_name: name }, 'Rotate credentials from the console');
+  showDetail('Credentials rotated', name, runSummary(r.planned, r.executed));
+  await loadResources();
+}
+async function pullWorkspaceEnv() {
+  var ok = await confirmAction({ title: 'Show decrypted secrets?', message: 'Connection strings and keys will be visible on screen. Make sure no one else can see it.', confirm: 'Show secrets' });
+  if (!ok) return;
+  var data = await api('/api/v1/resources/env');
+  byId('env-export-box').hidden = false;
+  setText('env-export-content', data.dotenv || '# No secrets stored in the vault yet.');
+}
+
+async function loadConnections(syncLive) {
+  var tbody = byId('connections-tbody');
+  if (tbody && state.view === 'connections' && syncLive) tbody.innerHTML = emptyRow(5, 'Checking each provider…');
+  var data = await api('/api/v1/connections?sync=' + (syncLive ? 'true' : 'false'));
+  var list = data.connections || [];
+  var activeConns = countActive(list);
+  setCount('nav-conn-count', activeConns);
+  if (state.boot) setText('kpi-connections', fmt(activeConns + countActive(state.boot.resources)));
+  if (!tbody) return;
+  tbody.innerHTML = list.length ? list.map(function (c) {
+    var acct = esc(c.externalAccountId || '');
+    var prov = esc(c.providerSlug);
+    var connectedInfo = c.connectedAt ? timeAgo(c.connectedAt) : (c.status === 'active' ? 'Verified' : 'Awaiting approval');
+    var actions = c.status === 'active'
+      ? '<span class="ok-text">Connected</span>'
+      : (c.redirectUrl ? '<a class="btn btn-sm btn-primary" href="' + esc(c.redirectUrl) + '" target="_blank" rel="noopener">Authorize</a> ' : '') +
+        '<button class="btn btn-sm" data-action="wait-connection" data-provider="' + prov + '" data-account="' + acct + '">Check status</button>';
+    return '<tr><td><strong>' + esc(c.providerName || prov) + '</strong></td><td>' + laneBadge(c.lane) + '</td>' +
+      '<td>' + statusBadge(c.status) + '</td><td class="small muted">' + esc(connectedInfo) + '</td><td class="cell-actions">' + actions + '</td></tr>';
+  }).join('') : emptyRow(5, 'No apps connected yet. Connect one above.');
+}
+async function startCustomProviderConnection() {
+  var input = byId('custom-provider-input');
+  var val = (input && input.value ? input.value : '').trim().toLowerCase();
+  if (!val) { showToast('Enter an app name, like linear or jira'); if (input) input.focus(); return; }
+  input.value = '';
+  await startAppConnection(val);
+}
+async function waitConnectionInUi(provider, externalAccountId) {
+  showToast('Checking ' + provider + '…');
+  var waited = await post('/api/v1/connections/wait', { provider: provider, externalAccountId: externalAccountId || undefined, timeoutMs: 8000, pollIntervalMs: 1500 });
+  showToast(waited.message || (provider + ': ' + waited.status));
+  await loadConnections(false);
+}
+async function completeCallbackInUi(provider, externalAccountId) {
+  await fetch(callbackUrl(provider, externalAccountId));
+  showToast('Recorded the ' + provider + ' handoff');
+  await loadConnections(false);
+}
+async function startAppConnection(provider) {
+  var res = await post('/api/v1/connections', { provider: provider, lane: 'composio_sdk' });
+  var conn = res.connection || {};
+  if (conn.redirectUrl) window.open(conn.redirectUrl, '_blank', 'noopener');
+  showToast(conn.redirectUrl ? 'Finish connecting ' + provider + ' in the new tab' : (conn.message || 'Started connecting ' + provider));
+  await refreshOverview();
+}
+
+function setFactsMode(mode) {
+  state.factsMode = mode === 'history' ? 'history' : 'current';
+  document.querySelectorAll('#facts-mode button').forEach(function (b) { b.setAttribute('aria-pressed', String(b.dataset.mode === state.factsMode)); });
+  renderFacts();
+}
+function renderFacts(facts) {
+  if (facts) state.facts = facts;
+  var f = state.facts || { activeFacts: [], historicalFacts: [] };
+  var active = f.activeFacts || [];
+  var historical = f.historicalFacts || [];
+  var list = state.factsMode === 'history' ? (f.facts || active.concat(historical)) : active;
+  setText('facts-summary', fmt(active.length) + ' current · ' + fmt(historical.length) + ' replaced');
+  byId('facts-tbody').innerHTML = list.length ? list.map(function (x) {
+    var current = x.validTo == null;
+    var relation = String(x.predicate || '').replace(/_/g, ' ');
+    return '<tr><td><strong>' + esc(x.subject) + '</strong></td><td class="small muted">' + esc(relation) + '</td><td>' + esc(x.object) + '</td>' +
+      '<td class="small muted">' + esc(x.validFrom ? new Date(x.validFrom).toLocaleString() : '') + '</td>' +
+      '<td>' + (current ? pill('Current', 'ok', true) : pill('Replaced ' + timeAgo(x.validTo).toLowerCase())) + '</td></tr>';
+  }).join('') : emptyRow(5, state.factsMode === 'history' ? 'No facts recorded yet.' : 'No current facts. Save a memory to record one.');
+}
+function factText(v) {
+  if (v == null) return '';
+  if (typeof v !== 'object') return String(v);
+  return String(v.memory || v.content || v.text || v.fact || v.value || v.summary || v.title || JSON.stringify(v));
+}
+function renderActiveMemoryDefaults(defaults, guardrails) {
+  var box = byId('memory-active-defaults-box');
+  if (!box) return;
+  var defs = defaults || {};
+  var keys = Object.keys(defs).filter(function (k) { return defs[k] != null && defs[k] !== ''; });
+  var rules = (guardrails || []).filter(Boolean);
+  if (!keys.length && !rules.length) {
+    box.innerHTML = '<p class="empty-note">No saved workspace defaults.</p>';
+    return;
+  }
+  var html = [];
+  if (keys.length) {
+    html.push('<div class="recall-group"><h3>Auto-filled into matching tools</h3><div class="rows">' + keys.map(function (k) {
+      var label = DEFAULT_PARAM_LABELS[k] || k;
+      return '<div class="row"><div><strong>' + esc(label) + '</strong><small>Automatically applied when an agent omits this parameter</small></div>' + pill(String(defs[k]), 'accent') + '</div>';
+    }).join('') + '</div></div>');
+  }
+  if (rules.length) {
+    html.push('<div class="recall-group"><h3>Remembered workspace guardrails</h3><div class="rows">' + rules.map(function (r) {
+      return '<div class="row"><div><strong>' + esc(r) + '</strong><small>Applies to this workspace</small></div>' + pill('Active rule', 'ok', true) + '</div>';
+    }).join('') + '</div></div>');
+  }
+  box.innerHTML = html.join('');
+}
+async function teachMemoryFromUi(chipPrompt) {
+  var input = byId('memory-teach-input');
+  var promptText = (typeof chipPrompt === 'string' ? chipPrompt : (input && input.value) || '').trim();
+  if (!promptText) { showToast('Tell Muxo what preference or default to remember'); if (input) input.focus(); return; }
+  if (input) input.value = promptText;
+  var res = await post('/api/v1/do', { prompt: promptText });
+  if (input && typeof chipPrompt !== 'string') input.value = '';
+  showToast(res.humanMessage || 'Saved preference to workspace memory');
+  await loadMemory();
+  await refreshOverview();
+}
+function renderRecall(ctx) {
+  function group(title, rows) { return '<div class="recall-group"><h3>' + esc(title) + '</h3><div class="rows">' + rows.join('') + '</div></div>'; }
+  function line(main, sub) { return '<div class="row"><div><strong>' + esc(main) + '</strong>' + (sub ? '<small>' + esc(sub) + '</small>' : '') + '</div></div>'; }
+  var facts = (ctx.staticFacts || []).map(factText).filter(Boolean);
+  var dynamic = (ctx.dynamicContext || []).map(factText).filter(Boolean);
+  var recalled = ctx.recalledMemories || [];
+  var activeDefs = ctx.activeDefaults || {};
+  var defKeys = Object.keys(activeDefs).filter(function (k) { return activeDefs[k] != null && activeDefs[k] !== ''; });
+  var groups = [];
+  if (defKeys.length) {
+    groups.push(group('Active auto-fill defaults', defKeys.map(function (k) {
+      return line((DEFAULT_PARAM_LABELS[k] || k) + ': ' + String(activeDefs[k]), 'Auto-filled into matching tool plans');
+    })));
+  }
+  if (recalled.length) groups.push(group('Recalled memories', recalled.map(function (m) { return line(m.title || 'Memory', m.snippet || ''); })));
+  if (facts.length) groups.push(group('Known facts', facts.map(function (f) { return line(f); })));
+  if (dynamic.length) groups.push(group('Current context', dynamic.map(function (f) { return line(f); })));
+  byId('memory-context-box').innerHTML = groups.length ? groups.join('') : '<p class="empty-note">Nothing to recall yet. Save a memory or run a tool, then try again.</p>';
+  setText('memory-prompt-box', ctx.formattedPromptContext || 'No prompt context yet.');
+}
+async function loadMemory() {
+  var q = byId('memory-query').value.trim();
+  var results = await Promise.all([
+    api('/api/v1/memory' + (q ? '?query=' + encodeURIComponent(q) : '')),
+    api('/api/v1/memory/facts?historical=true&limit=100').catch(function () { return null; })
+  ]);
+  var data = results[0];
+  var ctx = data.context || {};
+  var memories = data.recentMemories || data.records || data.memories || [];
+  var wsName = (state.boot && state.boot.organization && state.boot.organization.name) || 'Active workspace';
+  setText('mem-namespace', wsName);
+  setCount('nav-mem-count', memories.length);
+  state.activeMemoryDefaults = data.activeDefaults || ctx.activeDefaults || state.activeMemoryDefaults || {};
+  renderActiveMemoryDefaults(state.activeMemoryDefaults, data.activeGuardrails || ctx.activeGuardrails || []);
+  renderRecall(ctx);
+  renderFacts(results[1] || { activeFacts: data.temporalFacts || [], historicalFacts: data.historicalFacts || [] });
+  byId('memories-tbody').innerHTML = memories.length ? memories.map(function (m) {
+    return '<tr><td><strong>' + esc(m.title) + '</strong></td><td>' + pill(String(m.kind || 'fact').replace(/_/g, ' ')) + '</td>' +
+      '<td class="small muted">' + esc(m.content) + '</td><td class="small muted">' + esc(timeAgo(m.createdAt)) + '</td>' +
+      '<td class="cell-actions"><button class="btn btn-sm" data-action="delete-memory" data-id="' + esc(m.id) + '">Delete</button></td></tr>';
+  }).join('') : emptyRow(5, 'No memories yet. Save a fact above, or run a tool and Muxo will remember what happened.');
+}
+async function submitNewMemory() {
+  var title = byId('memory-title').value.trim() || 'Workspace fact';
+  var content = byId('memory-content').value.trim();
+  if (!content) { showToast('Write what Muxo should remember'); byId('memory-content').focus(); return; }
+  await post('/api/v1/memory', { title: title, kind: byId('memory-kind').value, content: content });
+  byId('memory-title').value = '';
+  byId('memory-content').value = '';
+  showToast('Saved to workspace memory');
+  await loadMemory();
+}
+async function deleteMemoryItem(id) {
+  var ok = await confirmAction({ title: 'Delete this memory?', message: 'Muxo will stop recalling it for future plans.', confirm: 'Delete', danger: true });
+  if (!ok) return;
+  await api('/api/v1/memory/' + encodeURIComponent(id), { method: 'DELETE' });
+  showToast('Memory deleted');
+  await loadMemory();
+}
+async function forgetMatching() {
+  var q = byId('forget-query').value.trim();
+  if (!q) { showToast('Enter a word or phrase to forget'); byId('forget-query').focus(); return; }
+  var ok = await confirmAction({ title: 'Forget everything about "' + q + '"?', message: 'Matching memories are deleted and matching facts are marked as replaced. This cannot be undone.', confirm: 'Forget', danger: true });
+  if (!ok) return;
+  var res = await post('/api/v1/memory/forget', { query: q });
+  byId('forget-query').value = '';
+  showToast('Deleted ' + fmt(res.deletedLocalCount) + ' memories and retired ' + fmt(res.invalidatedFactsCount) + ' facts');
+  await loadMemory();
+}
+
+function renderPlainEnglishGuardrails(plain, policy) {
+  var box = byId('guardrails-plain-box');
+  var postureBadge = byId('guardrail-posture-pill');
+  if (postureBadge && plain && plain.postureLabel) {
+    postureBadge.textContent = plain.postureLabel;
+    postureBadge.dataset.tone = plain.postureLabel.indexOf('Hands-off') >= 0 ? 'warn' : 'ok';
+  }
+  if (!box) return;
+  var rules = (plain && plain.rules) || [];
+  var badges = (plain && plain.badges) || [];
+  if (!rules.length && policy) {
+    rules = [
+      'Budget cap: Max ' + fmt(policy.maxCreditsPerRun || 100) + ' credits per run.',
+      policy.blockDestructiveSql !== false ? 'Database protection: Destructive SQL is blocked.' : 'Database protection: Destructive SQL guard is off.'
+    ];
+  }
+  var badgeHtml = badges.length ? '<div class="chips" style="margin-top:0;margin-bottom:12px">' + badges.map(function (b) {
+    var tone = b.tone === 'safe' ? 'ok' : b.tone === 'strict' ? 'accent' : 'warn';
+    return pill(b.label, tone, true);
+  }).join(' ') + '</div>' : '';
+  var rowsHtml = rules.map(function (r) {
+    var isCustom = r.indexOf('Custom guardrail:') === 0;
+    return '<div class="row"><div><strong>' + esc(r) + '</strong></div>' + (isCustom ? pill('Plain-English rule', 'accent') : pill('Enforced', 'ok', true)) + '</div>';
+  }).join('');
+  box.innerHTML = badgeHtml + '<div class="rows">' + rowsHtml + '</div>';
+}
+async function applyGuardrailFromUi(chipPrompt) {
+  var input = byId('guardrail-input');
+  var promptText = (typeof chipPrompt === 'string' ? chipPrompt : (input && input.value) || '').trim();
+  if (!promptText) { showToast('Write a rule in plain English (e.g. "Don\'t spend over 25 credits per run")'); if (input) input.focus(); return; }
+  if (input) input.value = promptText;
+  var res = await post('/api/v1/guardrails', { prompt: promptText });
+  if (input && typeof chipPrompt !== 'string') input.value = '';
+  if (res.plainEnglish) {
+    state.plainEnglishGuardrails = res.plainEnglish;
+    renderPlainEnglishGuardrails(res.plainEnglish, res.workspace && res.workspace.policy);
+  }
+  if (res.workspace && res.workspace.policy) syncPolicyForm(res.workspace.policy);
+  showToast(res.humanMessage || 'Guardrail applied');
+  await loadPlans();
+  await refreshOverview();
+}
+async function resetGuardrailsFromUi() {
+  var res = await post('/api/v1/guardrails', { reset: true });
+  if (res.plainEnglish) {
+    state.plainEnglishGuardrails = res.plainEnglish;
+    renderPlainEnglishGuardrails(res.plainEnglish, res.workspace && res.workspace.policy);
+  }
+  if (res.workspace && res.workspace.policy) syncPolicyForm(res.workspace.policy);
+  showToast(res.humanMessage || 'Reset guardrails to Safe Default');
+  await loadPlans();
+  await refreshOverview();
+}
+function renderGovernance(g, policy, plainEnglish) {
+  renderIdentity(g);
+  var ks = g.killSwitch || {};
+  var paused = Boolean(ks.active);
+  var status = byId('gov-kill-status');
+  if (status) {
+    status.textContent = paused ? 'Paused' : 'Running';
+    status.dataset.tone = paused ? 'danger' : 'ok';
+  }
+  setText('gov-kill-sub', paused ? 'Emergency stop is on' : 'Agents can act within policy');
+  var kp = byId('kill-pill');
+  if (kp) {
+    kp.textContent = paused ? 'Paused' : 'Running';
+    kp.dataset.tone = paused ? 'danger' : 'ok';
+  }
+  if (byId('kill-active-box')) byId('kill-active-box').hidden = !paused;
+  setText('kill-reason', ks.reason ? 'Reason: ' + ks.reason : '');
+  if (byId('kill-reason-input')) byId('kill-reason-input').hidden = paused;
+  if (byId('kill-activate-btn')) byId('kill-activate-btn').hidden = paused;
+  if (byId('kill-resume-btn')) byId('kill-resume-btn').hidden = !paused;
+  var ts = g.trustScore;
+  if (ts && ts.overall != null) {
+    var score = ts.overall <= 1 ? Math.round(ts.overall * 1000) : Math.round(ts.overall);
+    setText('gov-trust', fmt(score));
+    setText('gov-trust-sub', 'of 1,000' + (ts.tier ? ' · ' + String(ts.tier).replace(/_/g, ' ') : ''));
+  }
+  var chain = g.auditChain || {};
+  var chainOk = g.auditChainIntegrity != null ? g.auditChainIntegrity : g.auditIntegrityValid != null ? g.auditIntegrityValid : chain.chainVerified !== false;
+  var count = g.auditEntriesCount != null ? g.auditEntriesCount : (chain.entriesCount || 0);
+  var badge = byId('gov-chain-badge');
+  if (badge) {
+    badge.textContent = chainOk ? 'Verified' : 'Check needed';
+    badge.dataset.tone = chainOk ? 'ok' : 'danger';
+  }
+  setText('gov-chain-sub', fmt(count) + ' signed entries');
+  if (byId('gov-modules')) byId('gov-modules').innerHTML = (g.modules || []).map(function (m) { return pill(MODULE_LABELS[m] || m, 'ok', true); }).join('');
+  if (policy) syncPolicyForm(policy);
+  if (plainEnglish || state.plainEnglishGuardrails) renderPlainEnglishGuardrails(plainEnglish || state.plainEnglishGuardrails, policy);
+}
+async function loadPlans() {
+  var results = await Promise.all([api('/api/v1/plans'), api('/api/v1/governance').catch(function () { return null; })]);
+  var plans = results[0].plans || [];
+  var gov = results[1];
+  if (gov && gov.governance) {
+    if (gov.plainEnglishGuardrails) state.plainEnglishGuardrails = gov.plainEnglishGuardrails;
+    renderGovernance(gov.governance, gov.workspacePolicy, gov.plainEnglishGuardrails);
+  }
+  var pending = plans.filter(function (p) { return p.approvalStatus === 'pending_approval'; }).length;
+  setText('gov-pending', fmt(pending));
+  setCount('nav-plan-count', pending);
+  var tbody = byId('plans-tbody');
+  if (tbody) tbody.innerHTML = plans.length ? plans.map(function (p) {
+    var verdict = p.decisionRecord ? p.decisionRecord.verdict : 'allow';
+    var verdictLabel = verdict === 'deny' ? 'Blocked' : verdict === 'require_approval' ? 'Needs approval' : 'Allowed';
+    var id = esc(p.id);
+    var inspectBtn = '<button class="btn btn-sm" type="button" data-action="inspect-plan" data-id="' + id + '">Inspect</button>';
+    var action = p.approvalStatus === 'pending_approval'
+      ? inspectBtn + ' <button class="btn btn-sm" type="button" data-action="reject-plan" data-id="' + id + '">Reject</button> <button class="btn btn-sm btn-primary" type="button" data-action="approve-plan" data-id="' + id + '">Approve and run</button>'
+      : (p.approvalStatus === 'approved' || p.approvalStatus === 'auto_approved')
+        ? inspectBtn + ' <button class="btn btn-sm btn-primary" type="button" data-action="execute-plan" data-id="' + id + '">Run</button>'
+        : inspectBtn;
+    return '<tr id="plan-row-' + id + '"><td class="mono small">' + esc(shortId(p.id)) + '</td><td><strong>' + esc(formatToolLabel(p.toolSlug)) + '</strong></td>' +
+      '<td>' + riskBadge(p.riskLevel) + ' ' + pill(verdictLabel, verdict === 'deny' ? 'danger' : '') + '</td>' +
+      '<td>' + statusBadge(p.approvalStatus) + '</td><td class="cell-actions">' + action + '</td></tr>';
+  }).join('') : emptyRow(5, 'Nothing waiting. Plans appear here when an agent asks to run a tool.');
+  var focusPlan = new URLSearchParams(window.location.search).get('plan');
+  if (focusPlan && /^[A-Za-z0-9_-]+$/.test(focusPlan)) {
+    var row = byId('plan-row-' + focusPlan);
+    if (row) {
+      row.style.background = 'rgba(99, 102, 241, 0.14)';
+      row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      showToast('This plan is waiting for your review.');
+    }
+  }
+}
+async function inspectPlan(planId) {
+  var data = await api('/api/v1/plans/' + encodeURIComponent(planId));
+  var p = data.plan || data;
+  showDetail('Action plan', shortId(planId), p,
+    riskBadge(p.riskLevel) + ' ' + statusBadge(p.approvalStatus) + ' ' +
+    pill((p.creditCost != null ? fmt(p.creditCost) : '0') + ' credits'));
+}
+async function rejectPlan(planId) {
+  await post('/api/v1/plans/' + encodeURIComponent(planId) + '/approve', { decision: 'rejected' });
+  showToast('Plan rejected. Nothing was executed.');
+  await loadPlans();
+  await refreshOverview();
+}
+async function approveAndRun(planId) {
+  await post('/api/v1/plans/' + planId + '/approve');
+  await executeExistingPlan(planId);
+}
+async function executeExistingPlan(planId) {
+  var res = await post('/api/v1/plans/' + planId + '/execute');
+  showToast('Plan ran: ' + res.run.status);
+  await loadPlans();
+  await refreshOverview();
+}
+async function activateKillSwitch() {
+  var reason = byId('kill-reason-input').value.trim() || 'Paused from the Muxo console';
+  var ok = await confirmAction({ title: 'Pause all agent actions?', message: 'Every agent using this workspace stops immediately and stays stopped until you resume.', confirm: 'Pause all actions', danger: true });
+  if (!ok) return;
+  await post('/api/v1/governance/kill-switch', { action: 'quarantine', reason: reason });
+  byId('kill-reason-input').value = '';
+  showToast('All agent actions are paused');
+  await loadPlans();
+}
+async function resumeKillSwitch() {
+  await post('/api/v1/governance/kill-switch', { action: 'resume' });
+  showToast('Agents can act again');
+  await loadPlans();
+}
+async function scanContextFromUi() {
+  var content = byId('scan-content').value.trim();
+  if (!content) { showToast('Paste some text to check'); byId('scan-content').focus(); return; }
+  var res = await post('/api/v1/governance/scan-context', { content: content, sessionId: 'console' });
+  var s = res.scan || {};
+  var safe = s.safe !== false;
+  var box = byId('scan-result');
+  box.hidden = false;
+  box.dataset.tone = safe ? 'ok' : 'danger';
+  var findings = s.findings || [];
+  box.innerHTML = '<h3>' + (safe ? 'No prompt injection found' : 'Risk level: ' + esc(s.riskLevel || 'high')) + '</h3>' +
+    (findings.length
+      ? '<ul>' + findings.map(function (f) { return '<li><strong>' + esc(f.patternName || f.patternId) + '</strong> · ' + esc(f.severity || '') + '<br><span>' + esc(f.description || '') + '</span></li>'; }).join('') + '</ul>'
+      : '<p>This text looks safe to store or pass to an agent.</p>');
+}
+async function savePolicy() {
+  var requireApprovalFor = [];
+  document.querySelectorAll('#policy-risks input:checked').forEach(function (cb) { requireApprovalFor.push(cb.value); });
+  await post('/api/v1/policy', {
+    mode: byId('policy-mode').value,
+    requireApprovalFor: requireApprovalFor,
+    executionRing: Number(byId('policy-ring').value),
+    blockDestructiveSql: byId('policy-block-sql').checked
+  });
+  showToast('Policy saved');
+  await refreshOverview();
+}
+
+async function loadRuns() {
+  var data = await api('/api/v1/runs');
+  var runs = data.runs || [];
+  setCount('nav-run-count', runs.length);
+  var tbody = byId('runs-tbody');
+  if (tbody) tbody.innerHTML = runs.length ? runs.map(function (r) {
+    return '<tr><td><span class="mono small">' + esc(shortId(r.id)) + '</span><br><span class="small muted">' + esc(timeAgo(r.createdAt || r.startedAt)) + '</span></td>' +
+      '<td><strong>' + esc(formatToolLabel(r.toolSlug)) + '</strong><br>' + laneBadge(r.lane) + '</td>' +
+      '<td>' + riskBadge(r.riskLevel) + '</td><td>' + statusBadge(r.status) + '</td>' +
+      '<td class="mono small">' + esc(r.durationMs || 0) + ' ms</td>' +
+      '<td>' + (r.receiptId ? pill('Signed', 'ok', true) : pill('No record')) + '</td>' +
+      '<td class="cell-actions"><button class="btn btn-sm" data-action="inspect-receipt" data-id="' + esc(r.receiptId || r.id) + '">Inspect</button></td></tr>';
+  }).join('') : emptyRow(7, 'No runs yet. Every tool run will appear here with its audit record.');
+}
+async function inspectReceipt(receiptId) {
+  var data = await api('/api/v1/receipts/' + encodeURIComponent(receiptId));
+  var sigValid = data.signatureValid != null ? data.signatureValid : (data.valid != null ? data.valid : true);
+  var govValid = data.governanceSignatureValid != null ? data.governanceSignatureValid : (data.verified != null ? data.verified : true);
+  showDetail('Audit record', shortId(receiptId), data.receipt || data,
+    pill(sigValid ? 'Receipt signature valid' : 'Receipt signature invalid', sigValid ? 'ok' : 'danger', true) + ' ' +
+    pill(govValid ? 'Policy decision verified' : 'Policy decision not verified', govValid ? 'ok' : 'danger', true));
+}
+
+function renderSettlement(s) {
+  if (!s) return;
+  var by = s.bySupplier || {};
+  setText('billing-retail', '$' + ((s.totalUserRetailSpendCents || 0) / 100).toFixed(2));
+  setText('billing-wholesale', fmt(s.totalCreditsConsumed || 0) + ' credits');
+  function lane(key, label) {
+    var x = by[key] || {};
+    var runsCount = Number(x.runsCount || 0);
+    return '<div class="row"><div><strong>' + label + '</strong><small>' + fmt(runsCount) + (runsCount === 1 ? ' run' : ' runs') + '</small></div>' + pill(runsCount ? 'Active' : 'No runs yet', runsCount ? 'ok' : '') + '</div>';
+  }
+  var summaryBox = byId('settlement-summary-box');
+  if (summaryBox) summaryBox.innerHTML = '<div class="rows">' + lane('composio_instant', 'Instant tools') + lane('composio_sdk', 'Connected apps') + lane('stripe_projects', 'Cloud services') + '</div>' +
+    '<p class="small muted" style="margin-top:12px">' + fmt(s.totalCreditsConsumed || 0) + ' total credits used across all providers.</p>';
+}
+async function loadLedger() {
+  var data = await api('/api/v1/billing/ledger');
+  renderSettlement(data.settlementSummary);
+  var entries = data.entries || [];
+  var tbody = byId('ledger-tbody');
+  if (tbody) tbody.innerHTML = entries.length ? entries.map(function (e) {
+    var delta = Number(e.creditsDelta || 0);
+    return '<tr><td class="small muted">' + esc(new Date(e.createdAt).toLocaleString()) + '</td><td>' + esc(e.description) + '</td>' +
+      '<td class="mono" style="color:' + (delta >= 0 ? 'var(--color-ok)' : 'var(--color-text)') + '">' + (delta >= 0 ? '+' : '') + esc(fmt(delta)) + '</td>' +
+      '<td class="mono">' + esc(fmt(e.balanceAfter)) + '</td></tr>';
+  }).join('') : emptyRow(4, 'No billing activity yet.');
+  await renderPlanCards();
+  await loadByokKeys();
+}
+async function loadByokKeys() {
+  var data = await api('/api/v1/byok');
+  var keys = (data.keys || []).filter(function (k) { return k.configured !== false && (k.keyPreview || k.keyHint); });
+  var hasSupplier = keys.some(function (k) { return k.category === 'supplier'; });
+  var badge = byId('byok-mode-badge');
+  if (badge) {
+    badge.textContent = hasSupplier ? 'Your keys · 0 credits' : 'Muxo credits';
+    if (hasSupplier) badge.dataset.tone = 'accent'; else delete badge.dataset.tone;
+  }
+  var tbody = byId('byok-keys-tbody');
+  if (tbody) tbody.innerHTML = keys.length ? keys.map(function (k) {
+    var slug = k.provider || k.providerSlug || '';
+    return '<tr><td><strong>' + esc(k.providerName || k.displayName || slug) + '</strong></td>' +
+      '<td>' + pill(k.category === 'llm' ? 'Language model' : 'Provider', k.category === 'llm' ? 'accent' : '') + '</td>' +
+      '<td class="mono small">' + esc(k.keyHint || k.keyPreview || '••••') + '</td>' +
+      '<td class="cell-actions"><button class="btn btn-sm" data-action="delete-byok" data-provider="' + esc(slug) + '">Remove</button></td></tr>';
+  }).join('') : emptyRow(4, 'No keys saved. Runs are paid with Muxo credits.');
+}
+async function saveByokKeyFromUi() {
+  var provider = byId('byok-provider-select').value;
+  var secretKey = byId('byok-key-input').value.trim();
+  if (!secretKey) { showToast('Paste a key first'); byId('byok-key-input').focus(); return; }
+  await post('/api/v1/byok', { provider: provider, secretKey: secretKey, apiKey: secretKey });
+  byId('byok-key-input').value = '';
+  showToast('Saved your ' + provider + ' key. It is encrypted in your vault.');
+  await loadByokKeys();
+}
+async function deleteByokKeyFromUi(provider) {
+  var ok = await confirmAction({ title: 'Remove your ' + provider + ' key?', message: 'Runs that used it will be paid with Muxo credits instead.', confirm: 'Remove', danger: true });
+  if (!ok) return;
+  await api('/api/v1/byok/' + encodeURIComponent(provider), { method: 'DELETE' });
+  showToast('Removed the ' + provider + ' key');
+  await loadByokKeys();
+}
+
+async function fillAndRunNl(promptText) {
+  byId('nl-prompt-input').value = promptText;
+  await runNaturalLanguagePrompt();
+}
+async function runNaturalLanguagePrompt() {
+  var input = byId('nl-prompt-input');
+  var promptText = input.value.trim();
+  if (!promptText) { showToast('Type what you want Muxo to do'); input.focus(); return; }
+  var box = byId('quick-run-output');
+  setText('quick-run-status', 'Working on "' + promptText + '"…');
+  box.innerHTML = '<p class="empty-note">Selecting the right tool and checking workspace policy for "' + esc(promptText) + '"…</p>';
+  try {
+    var res = await post('/api/v1/do', { prompt: promptText, autoApprove: true, approveRisky: true });
+    if (res.status === 'guardrail_applied') {
+      renderQuickResult({
+        title: 'Guardrail updated',
+        subtitle: res.humanMessage || promptText,
+        badgeHtml: statusBadge('guardrail_applied'),
+        kv: [
+          ['Rule summary', (res.guardrail && res.guardrail.summary) || 'Saved to workspace guardrails'],
+          ['Posture', (res.plainEnglishGuardrails && res.plainEnglishGuardrails.postureLabel) || 'Active']
+        ],
+        output: res.plainEnglishGuardrails || res.workspacePolicy,
+        raw: res
+      });
+      setText('quick-run-status', res.humanMessage || 'Guardrail saved');
+      showToast(res.humanMessage || 'Guardrail saved');
+      await refreshOverview();
+      return;
+    }
+    if (res.status === 'memory_saved') {
+      renderQuickResult({
+        title: 'Saved to workspace memory',
+        subtitle: res.humanMessage || promptText,
+        badgeHtml: statusBadge('memory_saved'),
+        kv: [
+          ['Memory', (res.memoryRecord && res.memoryRecord.title) || 'Workspace preference'],
+          ['Auto-fill defaults', Object.keys(res.activeDefaults || {}).map(function (k) { return k + '=' + res.activeDefaults[k]; }).join(', ') || 'Updated']
+        ],
+        output: { activeDefaults: res.activeDefaults, facts: res.temporalFacts },
+        raw: res
+      });
+      setText('quick-run-status', res.humanMessage || 'Saved to workspace memory');
+      showToast(res.humanMessage || 'Saved to workspace memory');
+      await refreshOverview();
+      return;
+    }
+    if ((res.status === 'awaiting_approval' || res.status === 'awaiting_oauth_connection') && res.humanHandoff) {
+      var handoff = res.humanHandoff;
+      var handoffUrl = handoff.url || (res.authHandoff && res.authHandoff.redirectUrl) || '';
+      var handoffSlug = (res.plan && res.plan.toolSlug) || '';
+      renderQuickResult({
+        title: handoff.headline || (res.status === 'awaiting_approval' ? 'Approval needed' : 'Connect app to continue'),
+        subtitle: res.humanMessage || promptText,
+        badgeHtml: statusBadge(res.status),
+        kv: [
+          ['Action', handoffSlug ? formatToolLabel(handoffSlug) : null],
+          ['Plan', res.plan ? shortId(res.plan.id) : null],
+          ['Next step', handoff.instructions || null]
+        ],
+        actionsHtml: handoffUrl ? '<a class="btn btn-primary" href="' + esc(handoffUrl) + '" target="_blank" rel="noopener">' + esc(handoff.ctaLabel || 'Open handoff') + '</a>' : '',
+        output: res.llmGuidance || handoff,
+        raw: res
+      });
+      setText('quick-run-status', handoff.headline || 'This action needs you');
+      showToast(handoff.headline || 'This action needs you');
+      await refreshOverview();
+      return;
+    }
+    var intent = res.intent || res.resolution || {};
+    var toolSlug = intent.toolSlug || (intent.tool && intent.tool.slug) || (res.plan && res.plan.toolSlug) || 'Tool';
+    var toolLabel = (intent.tool && intent.tool.name) || formatToolLabel(toolSlug);
+    var status = res.status || (res.executed ? 'succeeded' : 'planned');
+    var creditCost = res.plan && res.plan.creditCost != null ? res.plan.creditCost : 0;
+    var outPayload = res.run ? res.run.output : (res.authHandoff || res.humanMessage || res.message);
+    var autoFilled = (res.plan && res.plan.memoryContext && res.plan.memoryContext.autoFilledInput) || {};
+    var autoFilledStr = Object.keys(autoFilled).map(function (k) { return k + '=' + autoFilled[k]; }).join(', ');
+    var kvRows = [
+      ['Credits used', creditCost > 0 ? fmt(creditCost) + ' credits' : 'Included (0 credits)'],
+      ['Audit record', res.receipt ? shortId(res.receipt.id) : (res.plan ? shortId(res.plan.id) : 'Recorded')]
+    ];
+    if (autoFilledStr) kvRows.push(['Auto-filled from Memory', autoFilledStr]);
+    renderQuickResult({
+      title: toolLabel,
+      subtitle: res.prompt || promptText,
+      badgeHtml: statusBadge(status),
+      kv: kvRows,
+      output: outPayload,
+      raw: {
+        prompt: res.prompt || promptText,
+        tool: toolSlug,
+        status: status,
+        creditCost: creditCost,
+        autoFilledFromMemory: autoFilledStr ? autoFilled : undefined,
+        planId: res.plan ? res.plan.id : null,
+        runId: res.run ? res.run.id : null,
+        auditRecordId: res.receipt ? res.receipt.id : null,
+        output: outPayload
+      }
+    });
+    setText('quick-run-status', toolLabel + ' · ' + (STATUS_LABELS[status] || status));
+    showToast('Finished ' + toolLabel);
+    await refreshOverview();
+  } catch (err) {
+    box.innerHTML = '<div class="callout" data-tone="danger"><p>' + esc(err.message) + '</p></div>';
+    setText('quick-run-status', 'Muxo could not complete that request.');
+    throw err;
+  }
+}
+async function startCheckout(kind) {
+  showToast('Opening Stripe Checkout…');
+  var credits = Math.max(100, Number(byId('topup-credits-input').value || 1000));
+  var res = await post('/api/v1/billing/checkout', { kind: kind, credits: credits });
+  if (res.url) window.location.href = res.url;
+}
+
+var FALLBACK_PLANS = [
+  { tier: 'free', name: 'Free', tagline: 'Try Muxo with your first agent.', monthlyActions: 500, monthlyCredits: 0, prices: { month: { cents: 0, label: '$0' }, year: { cents: 0, label: '$0', perMonthLabel: '$0' } }, features: ['500 governed actions a month', '250 trial credits', 'Approvals, audit log, and workspace memory', 'Bring your own provider keys'] },
+  { tier: 'starter', name: 'Starter', tagline: 'For builders running agents every day.', monthlyActions: 5000, monthlyCredits: 1000, prices: { month: { cents: 2900, label: '$29' }, year: { cents: 29000, label: '$290', perMonthLabel: '$24' } }, features: ['5,000 governed actions a month', '1,000 credits every month', 'Everything in Free', 'Email support'] },
+  { tier: 'pro', name: 'Pro', tagline: 'For teams with agents in production.', monthlyActions: 25000, monthlyCredits: 5000, prices: { month: { cents: 9900, label: '$99' }, year: { cents: 99000, label: '$990', perMonthLabel: '$82.50' } }, features: ['25,000 governed actions a month', '5,000 credits every month', 'Everything in Starter', 'Priority support'] }
+];
+var TIER_ORDER = { free: 0, starter: 1, pro: 2 };
+
+async function planCatalog() {
+  if (!state.planCatalog) {
+    try { state.planCatalog = await api('/api/v1/billing/plans', { anonymous: true }); } catch (e) { state.planCatalog = { plans: FALLBACK_PLANS }; }
+  }
+  return state.planCatalog;
+}
+
+async function renderPlanCards() {
+  var box = byId('plan-cards');
+  if (!box) return;
+  var catalog = await planCatalog();
+  var org = (state.boot && state.boot.organization) || {};
+  var billing = (state.boot && state.boot.billing) || {};
+  var tier = String(org.tier || 'free');
+  var interval = state.billingInterval;
+  box.innerHTML = (catalog.plans || FALLBACK_PLANS).map(function (p) {
+    var current = tier === p.tier;
+    var price = p.prices[interval] || p.prices.month;
+    var priceLine = p.tier === 'free'
+      ? '<p class="price">$0 <span>forever</span></p>'
+      : '<p class="price">' + esc(price.label) + ' <span>' + (interval === 'year' ? 'per year · ' + esc(price.perMonthLabel) + '/mo' : 'per month') + '</span></p>';
+    var action;
+    if (current) action = pill('Current plan', 'ok');
+    else if (TIER_ORDER[p.tier] > TIER_ORDER[tier]) action = '<button class="btn btn-primary" type="button" data-action="change-plan" data-tier="' + esc(p.tier) + '">Upgrade to ' + esc(p.name) + '</button>';
+    else action = '<button class="btn" type="button" data-action="change-plan" data-tier="' + esc(p.tier) + '">Switch to ' + esc(p.name) + '</button>';
+    return '<div class="panel"><div class="panel-header"><div><h2>' + esc(p.name) + '</h2><p>' + esc(p.tagline || '') + '</p></div></div>' +
+      priceLine +
+      '<ul class="plan-list">' + (p.features || []).map(function (f) { return '<li>' + esc(f) + '</li>'; }).join('') + '</ul>' +
+      '<div class="page-actions">' + action + '</div></div>';
+  }).join('');
+  var manage = byId('manage-billing-btn');
+  if (manage) manage.hidden = !billing.canManageBilling;
+  var note = [];
+  if (billing.status === 'comped') note.push('Complimentary plan');
+  else if (billing.status && billing.status !== 'none') note.push('Subscription ' + String(billing.status).replace(/_/g, ' '));
+  if (billing.cancelAtPeriodEnd && billing.renewsAt) note.push('ends ' + String(billing.renewsAt).slice(0, 10));
+  else if (billing.renewsAt && billing.status !== 'comped') note.push('renews ' + String(billing.renewsAt).slice(0, 10));
+  if (billing.paymentFailed) note.push('Payment failed — update your card in Manage billing');
+  if (billing.usage && billing.usage.resetsAt) note.push('Usage resets ' + String(billing.usage.resetsAt).slice(0, 10));
+  setText('billing-status-note', note.join(' · '));
+}
+
+function setBillingInterval(interval) {
+  state.billingInterval = interval === 'year' ? 'year' : 'month';
+  document.querySelectorAll('[data-action="billing-interval"]').forEach(function (b) {
+    b.setAttribute('aria-pressed', String(b.dataset.interval === state.billingInterval));
+  });
+  renderPlanCards().catch(showError);
+}
+
+async function changePlan(tier) {
+  showToast('Talking to Stripe…');
+  try {
+    var res = await post('/api/v1/billing/upgrade', { tier: tier, interval: state.billingInterval });
+    if (res.portalUrl || (res.action === 'billing_portal' && res.url)) { window.location.href = res.portalUrl || res.url; return; }
+    if (res.url) { window.location.href = res.url; return; }
+    showToast(res.message || 'Plan is unchanged.');
+    await refreshOverview();
+    await renderPlanCards();
+  } catch (err) {
+    var data = err && err.data;
+    if (data && (data.checkoutUrl || data.url)) { window.location.href = data.checkoutUrl || data.url; return; }
+    showError(err);
+  }
+}
+
+async function manageBilling() {
+  showToast('Opening the Stripe billing portal…');
+  var res = await post('/api/v1/billing/portal', {});
+  if (res.url) window.location.href = res.url;
+}
+
+async function checkCheckoutReturn() {
+  var params = new URLSearchParams(window.location.search);
+  var clean = false;
+  var sessionId = params.get('session_id');
+  if (params.get('checkout') === 'success' && sessionId) {
+    clean = true;
+    if (isSignedIn()) {
+      try {
+        var res = await post('/api/v1/billing/verify-session', { sessionId: sessionId });
+        showToast(res.fulfilled ? 'Payment confirmed. Your workspace has been updated.' : 'Payment is processing. Credits appear as soon as Stripe confirms it.');
+      } catch (err) { showToast(err.message, 'danger'); }
+    } else {
+      showToast('Payment received. Sign in to see your updated balance.');
+    }
+  }
+  if (params.get('checkout') === 'cancelled') { clean = true; showToast('Checkout cancelled. You were not charged.'); }
+  if (params.get('plan') === 'updated') { clean = true; showToast('Your plan change is confirmed.'); }
+  if (params.get('connected')) { clean = true; showToast(params.get('connected') + ' is connected'); }
+  // Keys are never accepted from the URL: a crafted link could sign a person into someone else's workspace.
+  if (params.get('api_key')) clean = true;
+  if (params.get('claimed')) { clean = true; showToast('You now own this workspace (' + params.get('claimed') + ')'); }
+  if (clean) window.history.replaceState({}, '', window.location.pathname);
+}
+
+var ACTIONS = {
+  'toggle-theme': toggleTheme,
+  'mobile-menu': openMobileMenu,
+  'sign-out': function () { closeDialog('mobile-menu'); return signOut(); },
+  'refresh-overview': refreshOverview,
+  'switch-workspace': switchExternalWorkspacePrompt,
+  'select-workspace': function (el) { return selectWorkspaceFromUi(el.dataset.id); },
+  'spawn-agent': spawnAutonomousAgent,
+  'create-key': generateApiKey,
+  'revoke-key': function (el) { return revokeApiKey(el.dataset.id, el.dataset.name); },
+  'use-spawned': useLatestSpawnedKey,
+  'claim-link': createClaimLinkPrompt,
+  'workspace-create': function () { return openWorkspaceForm('create'); },
+  'workspace-join': function () { return openWorkspaceForm('join'); },
+  'copy': function (el) { return copyFrom(el.dataset.target); },
+  'dismiss-key': function () {
+    byId('new-key-banner').hidden = true;
+    setText('new-key-value', '');
+    latestSpawnedKey = '';
+  },
+  'run-tool': function (el) { return openExecuteModal(el.dataset.slug); },
+  'quick-run': function (el) { return quickRun(el.dataset.slug, JSON.parse(el.dataset.input || '{}')); },
+  'ask-suggest': function (el) { return fillAndRunNl(el.dataset.prompt); },
+  'lane': function (el) { setLane(el.dataset.lane); return loadCatalog(); },
+  'browse-lane': function (el) { setLane(el.dataset.lane); navigate('catalog'); },
+  'reset-catalog': function () { return resetCatalog(false); },
+  'clear-search': function () { return resetCatalog(true); },
+  'retry-catalog': loadCatalog,
+  'connect-app': function (el) { return startAppConnection(el.dataset.provider); },
+  'sync-connections': function () { return loadConnections(true); },
+  'wait-connection': function (el) { return waitConnectionInUi(el.dataset.provider, el.dataset.account); },
+  'complete-handoff': function (el) { return completeCallbackInUi(el.dataset.provider, el.dataset.account); },
+  'provision': function () { setLane('stripe_projects'); navigate('catalog'); },
+  'export-env': pullWorkspaceEnv,
+  'close-env': function () { byId('env-export-box').hidden = true; setText('env-export-content', ''); },
+  'open-embedded-onboarding': openEmbeddedOnboarding,
+  'open-hosted-onboarding': openHostedOnboardingLink,
+  'close-embedded-onboarding': function () { byId('stripe-embedded-onboarding-box').hidden = true; byId('stripe-embedded-onboarding-mount').innerHTML = ''; },
+  'refresh-onboarding-status': loadProvisioningOnboardingStatus,
+  'rotate': function (el) { return rotateResource(el.dataset.name); },
+  'refresh-memory': loadMemory,
+  'delete-memory': function (el) { return deleteMemoryItem(el.dataset.id); },
+  'facts-mode': function (el) { setFactsMode(el.dataset.mode); },
+  'teach-chip': function (el) { return teachMemoryFromUi(el.dataset.prompt); },
+  'guardrail-chip': function (el) { return applyGuardrailFromUi(el.dataset.prompt); },
+  'guardrail-reset': resetGuardrailsFromUi,
+  'inspect-plan': function (el) { return inspectPlan(el.dataset.id); },
+  'reject-plan': function (el) { return rejectPlan(el.dataset.id); },
+  'approve-plan': function (el) { return approveAndRun(el.dataset.id); },
+  'billing-interval': function (el) { setBillingInterval(el.dataset.interval); },
+  'change-plan': function (el) { return changePlan(el.dataset.tier); },
+  'manage-billing': function () { return manageBilling(); },
+  'execute-plan': function (el) { return executeExistingPlan(el.dataset.id); },
+  'kill-resume': resumeKillSwitch,
+  'refresh-governance': loadPlans,
+  'refresh-runs': function () { return Promise.all([loadRuns(), loadPlans()]); },
+  'inspect-receipt': function (el) { return inspectReceipt(el.dataset.id); },
+  'checkout': function (el) { return startCheckout(el.dataset.kind); },
+  'delete-byok': function (el) { return deleteByokKeyFromUi(el.dataset.provider); },
+  'plan-only': submitPlanOnly,
+  'plan-run': submitPlanAndExecute,
+  'wait-resume': waitAndResumeModalPlan,
+  'callback-resume': completeCallbackAndResumeModalPlan,
+  'close-dialog': function (el) { var d = el.closest('dialog'); if (d) d.close(); },
+  'auth-mode': function (el) { navigate(el.dataset.mode === 'signup' ? 'signup' : 'login'); }
+};
+
+function onClick(e) {
+  var nav = e.target.closest('a[data-nav]');
+  if (nav && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
+    e.preventDefault();
+    navigate(nav.dataset.nav);
+    return;
+  }
+  var el = e.target.closest('[data-action]');
+  if (!el) return;
+  if (el.tagName === 'A' && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+  var fn = ACTIONS[el.dataset.action];
+  if (!fn) return;
+  e.preventDefault();
+  withBusy(el, function () { return fn(el, e); }).catch(showError);
+}
+function onSubmit(id, fn) {
+  var form = byId(id);
+  if (!form) return;
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    var btn = e.submitter || form.querySelector('[type=submit]');
+    withBusy(btn, function () { return fn(e); }).catch(showError);
+  });
+}
+
+async function boot(initial) {
+  await loadAuth();
+  try { await checkCheckoutReturn(); } catch (err) { console.error(err); }
+  var clerkAuth = authConfig.provider === 'clerk';
+  if (initial === 'login' || initial === 'signup') {
+    if (clerkAuth && isSignedIn()) navigate('overview');
+    else if (clerkAuth) mountClerkAuth(initial);
+    return;
+  }
+  if (clerkAuth && !isSignedIn()) { navigate('login', { focus: false }); return; }
+  try {
+    await refreshOverview();
+  } catch (err) {
+    if (err.status === 401 || err.status === 403) return;
+    showError(err);
+  }
+  if (initial !== 'overview' && initial !== 'setup' && initial !== 'workspaces') loadView(initial);
+  loadByokKeys().catch(function () {});
+}
+function init() {
+  applyTheme(document.documentElement.dataset.theme === 'light' ? 'light' : 'dark');
+  document.querySelectorAll('dialog.sheet').forEach(function (d) {
+    d.addEventListener('click', function (e) { if (e.target === d) d.close(); });
+  });
+  byId('mobile-menu').addEventListener('close', function () { byId('mobile-menu-toggle').setAttribute('aria-expanded', 'false'); });
+  onSubmit('nl-form', runNaturalLanguagePrompt);
+  onSubmit('auth-form', submitAuth);
+  onSubmit('custom-provider-form', startCustomProviderConnection);
+  onSubmit('memory-search-form', loadMemory);
+  onSubmit('memory-form', submitNewMemory);
+  onSubmit('memory-teach-form', function () { return teachMemoryFromUi(); });
+  onSubmit('forget-form', forgetMatching);
+  onSubmit('guardrail-form', function () { return applyGuardrailFromUi(); });
+  onSubmit('kill-form', activateKillSwitch);
+  onSubmit('policy-form', savePolicy);
+  onSubmit('scan-form', scanContextFromUi);
+  onSubmit('byok-form', saveByokKeyFromUi);
+  onSubmit('join-workspace-form', joinWorkspaceFromForm);
+  onSubmit('create-workspace-form', createWorkspaceFromForm);
+  onSubmit('team-onboard-form', onboardTeamFromForm);
+  var searchTimer = null;
+  var searchInput = byId('catalog-search');
+  if (searchInput) {
+    searchInput.addEventListener('input', function () {
+      byId('clear-catalog-search').hidden = !searchInput.value.trim();
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(function () { loadCatalog().catch(showError); }, 280);
+    });
+  }
+  document.addEventListener('click', onClick);
+  window.addEventListener('popstate', function () {
+    var next = viewForPath(location.pathname);
+    // Clerk's hash routing fires popstate inside the sign-in view; only react to real page changes.
+    if (next === state.view) return;
+    navigate(next, { push: false, focus: false });
+  });
+  window.addEventListener('storage', function (e) { if (e.key === THEME_KEY && (e.newValue === 'dark' || e.newValue === 'light')) applyTheme(e.newValue); });
+  window.addEventListener('message', function (e) {
+    if (!e || !e.data || e.data.type !== 'muxo:oauth_complete') return;
+    var prov = e.data.providerName || e.data.provider || 'App';
+    if (pendingModalHandoff && pendingModalPlan) {
+      waitAndResumeModalPlan();
+    } else {
+      showToast(prov + ' connected to Muxo');
+      refreshOverview();
+    }
+  });
+  try {
+    var connectedParam = new URLSearchParams(location.search || '').get('connected');
+    if (connectedParam) {
+      showToast('Connected ' + connectedParam + ' to Muxo');
+      if (history && history.replaceState) history.replaceState({}, '', location.pathname);
+    }
+  } catch (e) {}
+  var initial = viewForPath(location.pathname);
+  navigate(initial, { push: false, focus: false, skipLoad: true });
+  boot(initial);
+}
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); else init();
+`;
+function navItem(view, label, icon, countId) {
+    const path = Object.entries(CONSOLE_ROUTES).find(([, v]) => v === view)?.[0] ?? "/";
+    return `<a class="nav-item" href="${path}" data-nav="${view}">${uiIcon(icon)}<span>${label}</span>${countId ? `<span id="${countId}" class="count"></span>` : ""}</a>`;
+}
+function consoleNavigation(withCounts = true) {
+    return `<nav class="nav-group" aria-label="Console">
+    <p>Workspace</p>
+    ${navItem("overview", "Overview", "home")}
+    ${navItem("catalog", "Tools", "grid")}
+    ${navItem("activity", "Activity", "activity", withCounts ? "nav-run-count" : undefined)}
+  </nav>
+  <nav class="nav-group" aria-label="Manage">
+    <p>Manage</p>
+    ${navItem("setup", "API access", "key")}
+    ${navItem("workspaces", "Workspaces", "users")}
+    ${navItem("billing", "Billing", "wallet")}
+  </nav>
+  <nav class="nav-group" aria-label="Resources">
+    <p>Resources</p>
+    <a class="nav-item" href="${DOCS_URL}/quickstart">${uiIcon("book")}<span>Documentation</span>${uiIcon("external")}</a>
+  </nav>`;
+}
+export function renderConsoleHtml() {
+    const scriptPrelude = `var ROUTES = ${JSON.stringify(CONSOLE_ROUTES)};` +
+        `var THEME_KEY = ${JSON.stringify(THEME_STORAGE_KEY)};` +
+        `var THEME_BG = ${JSON.stringify({ light: muxoThemes.light.bg, dark: muxoThemes.dark.bg })};`;
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Muxo Console</title>
+  <meta name="description" content="Manage the tools, approvals, memory, and billing your agents use through Muxo." />
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="https://muxo.ai/apple-touch-icon.png" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${consoleCss}</style>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header class="console-topbar">
+    <div class="topbar-in">
+      <button id="mobile-menu-toggle" class="icon-button mobile-menu-toggle" type="button" data-action="mobile-menu" aria-label="Open navigation" aria-haspopup="dialog" aria-controls="mobile-menu" aria-expanded="false">${uiIcon("menu")}</button>
+      <a class="brand" href="/" data-nav="overview" aria-label="Muxo console home">${muxoMark}<span>Muxo</span><span class="brand-section">Console</span></a>
+      <button class="workspace-chip" type="button" data-action="switch-workspace" aria-label="Switch workspace" aria-haspopup="dialog">
+        <span id="workspace-name">Workspace</span><span id="workspace-tier" class="tier">Free plan</span>${uiIcon("chevron")}
+      </button>
+      <nav class="topbar-links" aria-label="Muxo">
+        <a class="nav-link" href="${DOCS_URL}">Docs</a>
+        <button id="theme-toggle" class="icon-button" type="button" data-action="toggle-theme" aria-pressed="true" aria-label="Switch to light mode">${uiIcon("sun", "theme-sun")}${uiIcon("moon", "theme-moon")}</button>
+        <a id="account-signin" class="btn btn-primary" href="/login" data-nav="login">Sign in</a>
+        <div id="account-signed-in" class="account" hidden>
+          <span id="account-label" class="account-label"></span>
+          <button class="btn" type="button" data-action="sign-out">Sign out</button>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <div id="console-shell" class="console-layout">
+    <aside class="console-sidebar" aria-label="Console">
+      ${consoleNavigation()}
+      <div class="sidebar-usage">
+        <div class="usage-row"><span>Monthly actions</span><strong id="meter-actions-text">0 / 1,000</strong></div>
+        <div class="meter" role="presentation"><span id="meter-actions-bar" style="width:0%"></span></div>
+        <div class="usage-row"><span>Credits</span><strong id="meter-credits-text">0</strong></div>
+        <a href="/billing" data-nav="billing">Add credits</a>
+      </div>
+    </aside>
+
+    <main id="main" class="console-main" tabindex="-1">
+      <section class="page" data-view="overview" aria-labelledby="h-overview">
+        <header class="page-header overview-header">
+          <div class="overview-title">
+            <h1 id="h-overview">Overview</h1>
+            <div class="page-actions">
+              <button class="icon-button" type="button" data-action="refresh-overview" aria-label="Refresh overview" title="Refresh overview">${uiIcon("refresh")}</button>
+              <a class="btn btn-primary" href="/catalog" data-nav="catalog">${uiIcon("grid")}Browse tools</a>
+            </div>
+          </div>
+          <p class="lede">Monitor agent activity and approvals.</p>
+        </header>
+        <div class="stack">
+          <div class="metrics">
+            <a class="metric metric-link" href="/activity" data-nav="activity"><p class="metric-label">Monthly actions ${uiIcon("arrow")}</p><p class="metric-value" id="kpi-actions">—</p><p class="metric-sub" id="kpi-actions-sub">Monthly usage</p></a>
+            <a class="metric metric-link" href="/activity" data-nav="activity"><p class="metric-label">Needs your review ${uiIcon("arrow")}</p><p class="metric-value" id="kpi-pending">—</p><p class="metric-sub" id="kpi-pending-sub">Waiting for your review</p></a>
+            <a class="metric metric-link" href="/catalog" data-nav="catalog"><p class="metric-label">Connected services ${uiIcon("arrow")}</p><p class="metric-value" id="kpi-connections">—</p><p class="metric-sub">Apps &amp; cloud resources</p></a>
+            <a class="metric metric-link" href="/billing" data-nav="billing"><p class="metric-label">Available credits ${uiIcon("arrow")}</p><p class="metric-value" id="kpi-credits">—</p><p class="metric-sub" id="kpi-tier-badge">Workspace balance</p></a>
+          </div>
+
+          <div id="approval-notice" class="approval-notice" hidden>
+            <div><strong id="approval-notice-title"></strong><p>Review the plan before it runs.</p></div>
+            <a class="btn btn-sm" href="/activity" data-nav="activity">Review ${uiIcon("arrow")}</a>
+          </div>
+
+          <div class="dashboard-layout">
+            <div class="panel">
+              <div class="panel-header">
+                <div><h2>Recent governed actions</h2><p>Tool activity and its audit trail.</p></div>
+                <a class="btn btn-quiet btn-sm" href="/activity" data-nav="activity">View all ${uiIcon("arrow")}</a>
+              </div>
+              <div id="recent-runs" aria-live="polite"><p class="empty-note">Loading activity…</p></div>
+            </div>
+            <div class="dashboard-aside">
+              <div class="panel">
+                <div class="panel-header">
+                  <div><h2 id="recent-tools-title">Tools</h2></div>
+                  <a class="docs-link" href="/catalog" data-nav="catalog">Browse ${uiIcon("arrow")}</a>
+                </div>
+                <div id="recent-tools"><p class="empty-note">Loading tools…</p></div>
+              </div>
+              <div class="panel">
+                <div class="workspace-summary"><span class="workspace-avatar">${uiIcon("users")}</span><div><h2 id="overview-workspace-name">Workspace</h2><p id="overview-workspace-tier"></p></div></div>
+                <div class="summary-links">
+                  <a class="summary-link" href="/workspaces" data-nav="workspaces">${uiIcon("users")}Manage workspace &amp; team${uiIcon("chevron")}</a>
+                  <a class="summary-link" href="/keys" data-nav="setup">${uiIcon("key")}API access${uiIcon("chevron")}</a>
+                  <a class="summary-link" href="${DOCS_URL}/quickstart">${uiIcon("book")}Agent setup docs${uiIcon("external")}</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="page" data-view="catalog" aria-labelledby="h-catalog" hidden>
+        <header class="page-header">
+          <div><h1 id="h-catalog">Tools</h1><p class="lede">Find tools for your agents. Every action follows your workspace guardrails.</p></div>
+          <a class="btn" href="${DOCS_URL}">${uiIcon("book")}Documentation</a>
+        </header>
+        <div class="toolbar catalog-toolbar">
+          <div class="search-field">${uiIcon("search")}<input id="catalog-search" type="search" aria-label="Search tools" placeholder="Search tools or providers…" autocomplete="off" /><button id="clear-catalog-search" class="icon-button clear-search" type="button" data-action="clear-search" aria-label="Clear tool search" hidden>${uiIcon("close")}</button></div>
+          <div id="catalog-lanes" class="segmented" role="group" aria-label="Tool category">
+            <button type="button" data-action="lane" data-lane="all" aria-pressed="true">All tools</button>
+            <button type="button" data-action="lane" data-lane="composio_instant" aria-pressed="false">Instant tools</button>
+            <button type="button" data-action="lane" data-lane="composio_sdk" aria-pressed="false">Connected apps</button>
+            <button type="button" data-action="lane" data-lane="stripe_projects" aria-pressed="false">Cloud services</button>
+          </div>
+        </div>
+        <p id="catalog-status" class="toolbar-note" role="status"></p>
+        <div id="catalog-grid" class="tool-grid"></div>
+      </section>
+
+      <section class="page" data-view="setup" aria-labelledby="h-setup" hidden>
+        <header class="page-header">
+          <div>
+            <h1 id="h-setup">API access</h1>
+            <p class="lede">Manage credentials for your agents and apps.</p>
+          </div>
+          <a class="btn" href="${DOCS_URL}/quickstart">${uiIcon("book")}Setup docs</a>
+        </header>
+        <div class="stack">
+          <div class="workspace-context">
+            <div class="workspace-summary"><span class="workspace-avatar">${uiIcon("key")}</span><div><p class="section-label">Active workspace</p><h2 id="access-workspace-name">Workspace</h2></div></div>
+            <a class="docs-link" href="/workspaces" data-nav="workspaces">Manage workspaces ${uiIcon("arrow")}</a>
+          </div>
+          <div class="access-layout">
+            <div class="panel">
+              <div class="panel-header">
+                <div><h2>Workspace keys</h2><p>New keys are shown once. Store them securely.</p></div>
+                <button class="btn btn-primary" type="button" data-action="create-key">${uiIcon("plus")}Create key</button>
+              </div>
+              <div id="new-key-banner" class="callout" data-tone="ok" style="margin-bottom:12px" hidden>
+                <button class="icon-button key-dismiss" type="button" data-action="dismiss-key" aria-label="Hide new key" title="Hide this key after saving it">${uiIcon("close")}</button>
+                <p id="new-key-title"><strong>Copy this key now.</strong></p>
+                <code id="new-key-value" class="key-value"></code>
+                <div class="callout-actions">
+                  <button class="btn btn-sm" type="button" data-action="copy" data-target="new-key-value">${uiIcon("copy")}Copy</button>
+                  <button id="use-spawned-key-btn" class="btn btn-sm" type="button" data-action="use-spawned" hidden>Open this workspace</button>
+                  <button class="btn btn-sm btn-quiet" type="button" data-action="claim-link">Create owner claim link</button>
+                </div>
+              </div>
+              <div id="api-keys-list" class="rows"></div>
+            </div>
+            <div class="panel">
+              <div class="panel-header">
+                <div><h2>Endpoints</h2><p>Use with your workspace key.</p></div>
+              </div>
+              <div class="endpoint"><div><strong>REST API</strong><button class="btn btn-quiet btn-sm" type="button" data-action="copy" data-target="api-base-url" aria-label="Copy REST API endpoint">${uiIcon("copy")}</button></div><code id="api-base-url"></code></div>
+              <div class="endpoint"><div><strong>MCP</strong><button class="btn btn-quiet btn-sm" type="button" data-action="copy" data-target="api-mcp-url" aria-label="Copy MCP endpoint">${uiIcon("copy")}</button></div><code id="api-mcp-url"></code></div>
+              <div class="summary-links">
+                <a class="summary-link" href="${DOCS_URL}/quickstart">${uiIcon("book")}Agent &amp; SDK setup${uiIcon("external")}</a>
+                <a class="summary-link" href="/workspaces" data-nav="workspaces">${uiIcon("users")}Team access${uiIcon("chevron")}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="page" data-view="workspaces" aria-labelledby="h-workspaces" hidden>
+        <header class="page-header">
+          <div><h1 id="h-workspaces">Workspaces</h1><p class="lede">Manage your workspaces and give your team access.</p></div>
+          <div class="page-actions">
+            <button class="btn" type="button" data-action="workspace-join">${uiIcon("link")}Join workspace</button>
+            <button class="btn btn-primary" type="button" data-action="workspace-create">${uiIcon("plus")}New workspace</button>
+          </div>
+        </header>
+        <div class="stack">
+          <div class="workspace-context">
+            <div class="workspace-summary"><span class="workspace-avatar">${uiIcon("users")}</span><div><p class="section-label">Active workspace</p><h2 id="workspace-slug">Workspace</h2></div></div>
+            <span id="workspace-auth-badge" class="pill">Signed in</span>
+          </div>
+          <div class="panel">
+            <div class="panel-header"><div><h2>Your workspaces</h2><p id="workspace-count"></p></div></div>
+            <div id="workspaces-list" class="rows"><p class="empty-note">Loading workspaces…</p></div>
+            <div class="row" id="reset-workspace-row" hidden><div><strong>Using an API key</strong><small>Remove this key from your browser when you’re finished.</small></div><button id="reset-workspace-btn" class="btn btn-sm" type="button" data-action="sign-out">Forget key</button></div>
+          </div>
+          <div class="panel">
+            <div class="panel-header">
+              <div><h2>Onboard a new team</h2><p>Create a team key for this workspace or a separate workspace.</p></div>
+            </div>
+            <form id="team-onboard-form" class="team-form">
+              <label class="field"><span>Team name</span><input id="team-onboard-name" type="text" placeholder="e.g. Platform Engineering" autocomplete="off" required /></label>
+              <label class="field"><span>Workspace</span>
+                <select id="team-onboard-mode" aria-describedby="team-workspace-help">
+                  <option value="shared_workspace">Use this workspace</option>
+                  <option value="dedicated_workspace">Create a separate workspace</option>
+                </select>
+                <small id="team-workspace-help" class="field-help">A separate workspace keeps tools, connections, and memory isolated.</small>
+              </label>
+              <label class="field"><span>Role</span>
+                <select id="team-onboard-role">
+                  <option value="operator">Operator</option>
+                  <option value="admin">Admin</option>
+                  <option value="member">Member</option>
+                </select>
+                <small class="field-help">Operators run tools. Admins also manage keys and guardrails.</small>
+              </label>
+              <div class="team-form-footer"><p>Share the key privately. You can revoke it in API access.</p><button class="btn btn-primary" type="submit">${uiIcon("plus")}Create team access</button></div>
+            </form>
+            <div id="team-kit-box" class="callout" data-tone="ok" style="margin-top:16px" hidden>
+              <p><strong id="team-kit-title">Team access is ready</strong></p>
+              <p id="team-kit-workspace" class="small muted"></p>
+              <p class="small muted" style="margin-top:8px">Copy this key now. It won’t be shown again.</p>
+              <div class="team-kit-secret"><code id="team-kit-key" class="mono"></code><button class="btn btn-sm" type="button" data-action="copy" data-target="team-kit-key">${uiIcon("copy")}Copy key</button></div>
+              <details class="recall-raw" style="margin-top:10px">
+                <summary>Share setup details</summary>
+                <div class="team-kit-secret"><code id="team-kit-cli" class="mono"></code><button class="btn btn-sm" type="button" data-action="copy" data-target="team-kit-cli">${uiIcon("copy")}Copy command</button></div>
+                <pre id="team-kit-instructions" class="code" style="margin-top:8px"></pre>
+                <div class="callout-actions" style="margin-top:8px">
+                  <button class="btn btn-sm" type="button" data-action="copy" data-target="team-kit-instructions">${uiIcon("copy")}Copy instructions</button>
+                </div>
+              </details>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="page" data-view="activity" aria-labelledby="h-activity" hidden>
+        <header class="page-header">
+          <div>
+            <h1 id="h-activity">Activity</h1>
+            <p class="lede">Review actions, approvals, and signed audit records.</p>
+          </div>
+          <div class="page-actions"><button class="btn" type="button" data-action="refresh-runs">${uiIcon("refresh")}Refresh</button></div>
+        </header>
+        <div class="stack">
+          <div class="metrics">
+            <div class="metric"><p class="metric-label">Agents</p><p class="metric-value" id="gov-kill-status" data-tone="ok">Running</p><p class="metric-sub" id="gov-kill-sub">Agents can act within policy</p></div>
+            <div class="metric"><p class="metric-label">Trust score</p><p class="metric-value" id="gov-trust">—</p><p class="metric-sub" id="gov-trust-sub">of 1,000</p></div>
+            <div class="metric"><p class="metric-label">Audit log</p><p class="metric-value" id="gov-chain-badge" data-tone="ok">Verified</p><p class="metric-sub" id="gov-chain-sub">Signed entries</p></div>
+            <div class="metric"><p class="metric-label">Needs your review</p><p class="metric-value" id="gov-pending">0</p><p class="metric-sub">Plans held by guardrails</p></div>
+          </div>
+
+          <div class="table-wrap">
+            <table>
+              <thead><tr><th>Run</th><th>Tool</th><th>Risk</th><th>Status</th><th>Duration</th><th>Audit record</th><th class="right"><span class="sr-only">Actions</span></th></tr></thead>
+              <tbody id="runs-tbody"></tbody>
+            </table>
+          </div>
+
+          <div class="split even">
+            <div class="panel">
+              <div class="panel-header"><div><h2>Approval queue</h2><p>Plans held by your workspace guardrails awaiting owner approval.</p></div></div>
+              <div class="table-wrap">
+                <table>
+                  <thead><tr><th>Plan</th><th>Tool</th><th>Risk</th><th>Status</th><th class="right">Actions</th></tr></thead>
+                  <tbody id="plans-tbody"></tbody>
+                </table>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="panel-header">
+                <div><h2>Guardrails &amp; memory</h2><p>Rules and defaults for this workspace.</p></div>
+                <span id="guardrail-posture-pill" class="pill dot" data-tone="ok">Safe default</span>
+              </div>
+              <div id="guardrails-plain-box" class="recall-box" style="min-height:0" aria-live="polite"><p class="empty-note">Loading active guardrails…</p></div>
+              <div id="memory-active-defaults-box" class="recall-box" style="min-height:0;margin-top:12px" aria-live="polite"></div>
+              <div class="rows" style="margin-top:12px">
+                <div class="row"><div><strong>Safety modules on every run</strong><div id="gov-modules" class="module-list" style="margin-top:8px"></div></div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="page" data-view="billing" aria-labelledby="h-billing" hidden>
+        <header class="page-header">
+          <div>
+            <h1 id="h-billing">Billing and credits</h1>
+            <p class="lede">Pay with Muxo credits, or bring your own provider keys and those runs cost you nothing on Muxo.</p>
+          </div>
+          <div class="page-actions"><a class="btn" href="${PRICING_URL}">${uiIcon("external")}Pricing details</a></div>
+        </header>
+        <div class="stack">
+          <div class="metrics">
+            <div class="metric"><p class="metric-label">Plan</p><p class="metric-value" id="billing-plan">Free plan</p><p class="metric-sub">Change anytime</p></div>
+            <div class="metric"><p class="metric-label">Credits</p><p class="metric-value" id="billing-credits">0</p><p class="metric-sub">$0.01 each</p></div>
+            <div class="metric"><p class="metric-label">Spent with Muxo</p><p class="metric-value" id="billing-retail">$0.00</p><p class="metric-sub">Credits used on runs</p></div>
+            <div class="metric"><p class="metric-label">Credits used</p><p class="metric-value" id="billing-wholesale">0 credits</p><p class="metric-sub">Consolidated on one bill</p></div>
+          </div>
+          <div class="split even">
+            <div class="panel" style="grid-column:1/-1">
+              <div class="panel-header">
+                <div><h2>Plans</h2><p>Every plan includes approvals, the audit log, and workspace memory. Yearly billing gives you 2 months free.</p></div>
+                <div class="row-actions" role="group" aria-label="Billing period">
+                  <button class="chip" type="button" data-action="billing-interval" data-interval="month" aria-pressed="true">Monthly</button>
+                  <button class="chip" type="button" data-action="billing-interval" data-interval="year" aria-pressed="false">Yearly · 2 months free</button>
+                </div>
+              </div>
+              <div id="plan-cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px"><p class="empty-note">Loading plans…</p></div>
+              <div class="page-actions" style="margin-top:16px;align-items:center">
+                <button class="btn" type="button" data-action="manage-billing" id="manage-billing-btn" hidden>Manage billing in Stripe</button>
+                <small class="muted" id="billing-status-note"></small>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="panel-header"><div><h2>Add credits</h2><p>Credits pay for instant tools, connected apps, and provisioning.</p></div></div>
+              <label class="field"><span>Credits</span><input id="topup-credits-input" type="number" value="1000" min="100" step="100" inputmode="numeric" /><small class="field-help">1,000 credits cost $10.</small></label>
+              <div class="page-actions" style="margin-top:16px">
+                <button class="btn btn-primary" type="button" data-action="checkout" data-kind="credit_topup">Pay with Stripe</button>
+              </div>
+            </div>
+          </div>
+          <div class="panel">
+            <div class="panel-header"><div><h2>Bring your own keys</h2><p>Use your own provider keys. They’re stored securely in your vault.</p></div><span id="byok-mode-badge" class="pill">Muxo credits</span></div>
+            <form id="byok-form" class="form-row provider-key-form">
+              <label class="field"><span>Provider</span>
+                <select id="byok-provider-select">
+                  <option value="openai">OpenAI (plain-English routing)</option>
+                  <option value="anthropic">Anthropic (plain-English routing)</option>
+                  <option value="openrouter">OpenRouter (plain-English routing)</option>
+                  <option value="gemini">Google Gemini (plain-English routing)</option>
+                  <option value="composio">Apps and instant tools (0 credits)</option>
+                  <option value="stripe">Cloud infrastructure (0 credits)</option>
+                  <option value="supermemory">Workspace memory</option>
+                  <option value="firecrawl">Firecrawl (scrape and crawl)</option>
+                  <option value="exa">Exa (search)</option>
+                </select>
+              </label>
+              <label class="field"><span>Key</span><input id="byok-key-input" type="password" placeholder="Paste the key" autocomplete="off" /></label>
+              <button class="btn btn-primary" type="submit" style="min-height:40px">Save key</button>
+            </form>
+            <div class="table-wrap">
+              <table>
+                <thead><tr><th>Provider</th><th>Used for</th><th>Key</th><th class="right"><span class="sr-only">Actions</span></th></tr></thead>
+                <tbody id="byok-keys-tbody"></tbody>
+              </table>
+            </div>
+          </div>
+          <div class="split even">
+            <div class="panel">
+              <div class="panel-header"><div><h2>Usage by category</h2><p>All provider usage is settled through your workspace balance.</p></div></div>
+              <div id="settlement-summary-box"><p class="empty-note">Loading…</p></div>
+            </div>
+            <div class="table-wrap">
+              <table>
+                <thead><tr><th>Time</th><th>Event</th><th>Credits</th><th>Balance</th></tr></thead>
+                <tbody id="ledger-tbody"></tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <div id="auth-view" class="auth-view" hidden>
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">Workspace access</span>
+      </div>
+      <div class="oauth-card-body">
+        <h1 id="auth-title">Sign in to Muxo</h1>
+        <p id="auth-lede" class="lede">Manage tools, approvals, memory, and billing for your agents.</p>
+        <div id="auth-tabs" class="segmented" role="group" aria-label="Account">
+          <button type="button" data-action="auth-mode" data-mode="login" aria-pressed="true">Sign in</button>
+          <button type="button" data-action="auth-mode" data-mode="signup" aria-pressed="false">Create account</button>
+        </div>
+        <form id="auth-form" class="auth-form" novalidate>
+          <label id="auth-name-field" class="field" hidden><span>Name</span><input id="auth-name" type="text" autocomplete="name" /></label>
+          <label class="field"><span>Email</span><input id="auth-email" type="email" autocomplete="email" required /></label>
+          <label class="field"><span>Password</span><input id="auth-password" type="password" autocomplete="current-password" minlength="6" required /></label>
+          <label id="auth-workspace-field" class="field" hidden><span>Workspace name <em>optional</em></span><input id="auth-workspace" type="text" autocomplete="organization" /></label>
+          <p id="auth-error" class="field-error" role="alert"></p>
+          <button id="auth-submit" class="btn btn-primary btn-lg btn-block" type="submit">Sign in</button>
+        </form>
+        <div id="clerk-auth" class="clerk-auth" hidden><p id="clerk-loading" class="clerk-loading" role="status"><span class="spinner" aria-hidden="true"></span>Loading sign-in…</p></div>
+        <p class="auth-switch"><button id="auth-switch-link" class="btn btn-quiet btn-sm" type="button" data-action="auth-mode" data-mode="signup" hidden>New to Muxo? Create an account</button></p>
+        <div class="auth-alt">
+          <button class="btn btn-quiet btn-sm" type="button" data-action="switch-workspace">${uiIcon("key")}Use an API key instead</button>
+          <a class="docs-link" href="${DOCS_URL}/quickstart">Setup guide ${uiIcon("external")}</a>
+        </div>
+      </div>
+      <div class="oauth-card-foot">
+        <span>Secured by <strong>Muxo</strong></span>
+        <a href="/" data-nav="overview">Back to console</a>
+      </div>
+    </div>
+  </div>
+
+  <dialog id="mobile-menu" class="sheet mobile-menu" aria-labelledby="mobile-menu-title">
+    <div class="mobile-menu-content">
+      <div class="sheet-head"><h2 id="mobile-menu-title">Navigation</h2><button class="icon-button" type="button" data-action="close-dialog" aria-label="Close navigation">${uiIcon("close")}</button></div>
+      ${consoleNavigation(false)}
+      <div id="mobile-account-actions" class="mobile-menu-account" hidden>
+        <p id="mobile-account-label"></p>
+        <button class="btn" type="button" data-action="sign-out">Sign out</button>
+      </div>
+    </div>
+  </dialog>
+
+  <dialog id="exec-modal" class="sheet" aria-labelledby="modal-tool-name">
+    <div class="sheet-inner">
+      <div class="sheet-head">
+        <div><h2 id="modal-tool-name">Run a tool</h2><p id="modal-tool-slug" class="tool-slug"></p></div>
+        <button class="icon-button" type="button" data-action="close-dialog" aria-label="Close">${uiIcon("close")}</button>
+      </div>
+      <p id="modal-tool-desc" class="muted" style="font-size:14px"></p>
+      <label class="field"><span>Input (JSON)</span><textarea id="modal-tool-input" class="mono" rows="6" spellcheck="false">{}</textarea></label>
+      <label class="field"><span>Reason <em>recorded in the audit log</em></span><input id="modal-tool-reason" type="text" value="Run from the Muxo console" /></label>
+      <div class="sheet-actions">
+        <button class="btn" type="button" data-action="plan-only">Plan only</button>
+        <button class="btn btn-primary" type="button" data-action="plan-run">Plan and run</button>
+      </div>
+      <div id="modal-oauth-box" class="callout" data-tone="warn" hidden>
+        <h3 id="modal-oauth-title">Connect this app to continue</h3>
+        <p id="modal-oauth-msg"></p>
+        <div class="callout-actions">
+          <a id="modal-oauth-link" class="btn btn-sm btn-primary" href="#" target="_blank" rel="noopener">Authorize in browser ${uiIcon("external")}</a>
+          <button class="btn btn-sm" type="button" data-action="wait-resume">I've authorized, continue</button>
+        </div>
+      </div>
+      <pre id="modal-result" class="code" aria-live="polite" hidden></pre>
+    </div>
+  </dialog>
+
+  <dialog id="detail-dialog" class="sheet" aria-labelledby="detail-title">
+    <div class="sheet-inner">
+      <div class="sheet-head">
+        <div><h2 id="detail-title">Details</h2><p id="detail-sub" class="tool-slug"></p></div>
+        <button class="icon-button" type="button" data-action="close-dialog" aria-label="Close">${uiIcon("close")}</button>
+      </div>
+      <div id="detail-summary" class="module-list" hidden></div>
+      <pre id="detail-body" class="code"></pre>
+      <div class="sheet-actions">
+        <button class="btn" type="button" data-action="copy" data-target="detail-body">${uiIcon("copy")}Copy</button>
+        <button class="btn btn-primary" type="button" data-action="close-dialog">Done</button>
+      </div>
+    </div>
+  </dialog>
+
+  <dialog id="workspace-dialog" class="sheet" aria-labelledby="workspace-dialog-title">
+    <div class="sheet-inner">
+      <div class="sheet-head">
+        <div><h2 id="workspace-dialog-title">Workspaces</h2><p class="tool-slug">Switch, join, or create a workspace.</p></div>
+        <button class="icon-button" type="button" data-action="close-dialog" aria-label="Close">${uiIcon("close")}</button>
+      </div>
+      <div>
+        <h3 style="font-size:14px;margin:0 0 8px">Your workspaces</h3>
+        <div id="workspace-dialog-list" class="rows"></div>
+      </div>
+      <form id="join-workspace-form" class="form-grid" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)" novalidate>
+        <label class="field">
+          <span>Join with an API key</span>
+          <span class="field-help">Use a workspace key shared by your teammate.</span>
+          <div class="inline-form" style="margin-top:6px">
+            <input id="join-workspace-key-input" type="password" placeholder="mk_live_..." autocomplete="off" />
+            <button class="btn btn-primary" type="submit">Join workspace</button>
+          </div>
+        </label>
+      </form>
+      <form id="create-workspace-form" class="form-grid" style="margin-top:14px;padding-top:14px;border-top:1px solid var(--color-border)" novalidate>
+        <div class="form-row">
+          <label class="field"><span>New workspace name</span><input id="create-workspace-name-input" type="text" placeholder="e.g. Production" autocomplete="off" /></label>
+          <label class="field"><span>Team name <em>optional</em></span><input id="create-workspace-team-input" type="text" placeholder="e.g. Engineering" autocomplete="off" /></label>
+        </div>
+        <div class="sheet-actions" style="margin-top:6px">
+          <button class="btn" type="button" data-action="close-dialog">Close</button>
+          <button class="btn btn-primary" type="submit">Create workspace</button>
+        </div>
+      </form>
+    </div>
+  </dialog>
+
+  <dialog id="ask-dialog" class="sheet narrow" aria-labelledby="ask-title">
+    <form id="ask-form" class="sheet-inner" novalidate>
+      <div class="sheet-head"><h2 id="ask-title">Continue</h2></div>
+      <p id="ask-message" class="muted" style="font-size:14px"></p>
+      <label id="ask-field" class="field"><span id="ask-label"></span><input id="ask-input" type="text" autocomplete="off" /></label>
+      <div class="sheet-actions">
+        <button class="btn" type="button" data-action="close-dialog">Cancel</button>
+        <button id="ask-confirm" class="btn btn-primary" type="submit">Continue</button>
+      </div>
+    </form>
+  </dialog>
+
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+
+  <script>${scriptPrelude}${consoleScript}</script>
+</body>
+</html>`;
+}
+const landingCss = `
+.site-header{position:sticky;top:0;z-index:30;background:var(--color-navigation);border-bottom:1px solid var(--color-border);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
+.site-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--grid-width);min-height:64px;margin-inline:auto;padding:8px var(--page-gutter)}
+.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-text);text-decoration:none;font-size:18px;font-weight:600;letter-spacing:var(--tracking-heading)}
+.brand svg{width:26px;height:26px}
+.site-links{display:flex;align-items:center;gap:20px}
+.site-links a:not(.btn){color:var(--color-muted);font-size:13px;text-decoration:none}
+.site-links a:not(.btn):hover{color:var(--color-text)}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 18px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:transparent;color:var(--color-text);font-size:13px;text-decoration:none;white-space:nowrap}
+.btn:hover{background:var(--color-surface-2)}
+.btn-primary{border-color:transparent;background:var(--color-button-primary);color:var(--color-button-text)}
+.btn-primary:hover{background:var(--color-button-primary-hover)}
+.btn-lg{min-height:44px;padding:11px 22px;font-size:16px}
+.hero{max-width:var(--content-width);margin:0 auto;padding:var(--section-space) var(--page-gutter) 48px;text-align:center}
+.kicker{color:var(--color-muted);font-size:14px;font-weight:500}
+.hero h1{margin:16px auto 20px;max-width:16ch;font-size:var(--text-display);line-height:var(--leading-title);letter-spacing:var(--tracking-display)}
+.hero .lede{max-width:56ch;margin:0 auto;color:var(--color-muted);font-size:var(--text-lead);line-height:var(--leading-body)}
+.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:32px 0 48px}
+.snippet{max-width:760px;margin:0 auto;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);text-align:left}
+.snippet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-muted);font-size:12px}
+.snippet-bar button{min-height:32px;padding:4px 12px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted);font-size:12px}
+.snippet-bar button:hover{background:var(--color-bg);color:var(--color-text)}
+.snippet pre{margin:0;padding:24px;font-size:13.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
+.snippet-foot{padding:12px 24px;border-top:1px solid var(--color-border);color:var(--color-muted);font:12px/1.6 var(--font-mono);overflow-wrap:anywhere}
+.section{max-width:var(--grid-width);margin:0 auto;padding:var(--space-12) var(--page-gutter)}
+.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}
+.section-head h2{font-size:var(--text-section);line-height:1.2}
+.section-head p{margin-top:6px;color:var(--color-muted);font-size:15px}
+.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--color-border);border-left:1px solid var(--color-border)}
+.tile{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:220px;padding:clamp(20px,2.2vw,32px);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);text-decoration:none;transition:background-color var(--motion-fast)}
+a.tile:hover{background:var(--color-surface)}
+.tile-badge{color:var(--color-muted);font:400 11px/1.5 var(--font-mono)}
+.tile-name{margin-top:auto;font-size:var(--text-lg);font-weight:600;line-height:1.3;letter-spacing:var(--tracking-heading)}
+.tile-slug{color:var(--color-accent);font:12px/1.5 var(--font-mono);overflow-wrap:anywhere}
+.tile-sub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-muted);font-size:var(--text-sm);line-height:var(--leading-body)}
+.filter{display:flex;align-items:center;gap:10px;width:300px;max-width:100%;min-height:44px;padding-left:14px;border:1px solid var(--color-control-border);border-radius:var(--radius-field);background:var(--color-bg);color:var(--color-muted)}
+.filter:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}
+.filter input{flex:1;min-width:0;padding:11px 0;border:0;background:none;color:var(--color-text);font-size:14px;outline:none}
+.filter .ui-icon{width:16px;height:16px}
+.empty{grid-column:1/-1;padding:48px 24px;color:var(--color-muted);text-align:center}
+.site-footer{border-top:1px solid var(--color-border)}
+.site-footer-in{display:flex;align-items:center;flex-wrap:wrap;gap:24px;max-width:var(--grid-width);min-height:80px;margin-inline:auto;padding:16px var(--page-gutter);color:var(--color-muted)}
+.site-footer nav{display:flex;flex-wrap:wrap;gap:24px;margin-left:auto}
+.site-footer a{color:var(--color-muted);font-size:12px;text-decoration:none}
+.site-footer a:hover{color:var(--color-text)}
+.icon-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted)}
+.icon-button:hover{background:var(--color-surface-2);color:var(--color-text)}
+.theme-sun{display:none}html[data-theme=dark] .theme-sun{display:inline-block}html[data-theme=dark] .theme-moon{display:none}
+@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (max-width:640px){.site-links a:not(.btn){display:none}.grid{grid-template-columns:1fr}.snippet pre{padding:18px;font-size:12.5px}}
+`;
+const landingScript = String.raw `
+var ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+var LANES = { composio_instant: 'Instant tool', composio_sdk: 'Connected app', stripe_projects: 'Cloud service' };
+var searchTimer = null;
+function esc(v) { return String(v == null ? '' : v).replace(/[&<>"']/g, function (c) { return ESC[c]; }); }
+async function filterLandingCatalog() {
+  var q = document.getElementById('landing-search').value || '';
+  var grid = document.getElementById('landing-grid');
+  try {
+    var res = await fetch('/api/v1/tools?query=' + encodeURIComponent(q) + '&limit=16');
+    var data = await res.json();
+    var tools = data.tools || [];
+    grid.innerHTML = tools.length ? tools.map(function (t) {
+      var provider = t.providerName || (t.providerSlug ? t.providerSlug.charAt(0).toUpperCase() + t.providerSlug.slice(1) : '');
+      return '<a class="tile" href="/catalog"><span class="tile-badge">' + esc(LANES[t.lane] || t.lane) + ' · ' + esc(t.riskLevel) + '</span>' +
+        '<span class="tile-name">' + esc(t.name) + '</span>' + (provider ? '<span class="tile-slug">' + esc(provider) + '</span>' : '') +
+        '<span class="tile-sub">' + esc(t.description) + '</span></a>';
+    }).join('') : '<p class="empty">No tools match that search.</p>';
+  } catch (e) {
+    grid.innerHTML = '<p class="empty">The catalog could not be loaded right now.</p>';
+  }
+}
+document.getElementById('landing-search').addEventListener('input', function () {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(filterLandingCatalog, 250);
+});
+document.getElementById('copy-install').addEventListener('click', function () {
+  var text = document.getElementById('install-snippet').textContent || '';
+  var btn = this;
+  navigator.clipboard.writeText(text).then(function () { btn.textContent = 'Copied'; setTimeout(function () { btn.textContent = 'Copy'; }, 1600); });
+});
+document.getElementById('theme-toggle').addEventListener('click', function () {
+  var next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+  document.documentElement.dataset.theme = next;
+  try { localStorage.setItem(${JSON.stringify(THEME_STORAGE_KEY)}, next); } catch (e) {}
+});
+(function updateOriginUrls() {
+  var origin = window.location.origin;
+  var el = document.getElementById('landing-mcp-urls');
+  if (el) el.textContent = 'MCP ' + origin + '/mcp  ·  OAuth callback ' + origin + '/oauth/callback  ·  Skill ' + origin + '/skill.md';
+})();
+filterLandingCatalog();
+`;
+export function renderLandingHtml() {
+    const pillars = [
+        ["Connected apps", "Connected apps and instant tools", "Managed sign-in for GitHub, Gmail, Slack, Notion, and Linear, plus search, scraping, SEO, and DNS tools that work with no setup."],
+        ["Cloud infrastructure", "Muxo cloud infrastructure", "Provision Neon, Supabase, Turso, Upstash, Cloudflare, and Vercel. Credentials stay encrypted in your workspace vault."],
+        ["Workspace memory", "Muxo workspace memory", "Facts and preferences for each workspace, recalled before every plan, with secrets removed before anything is stored."],
+        ["Safety & audit", "Muxo guardrails and audit log", "Prompt-injection scanning, risk-based approvals, an emergency stop, and a signed record of every run."],
+    ];
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Muxo — your tools, in your agent</title>
+  <meta name="description" content="Connect apps, cloud services, memory, and safety controls to the agent you already use." />
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${landingCss}</style>
+</head>
+<body>
+  <header class="site-header">
+    <div class="site-header-in">
+      <a class="brand" href="/landing" aria-label="Muxo home">${muxoMark}<span>Muxo</span></a>
+      <nav class="site-links" aria-label="Primary">
+        <a href="${DOCS_URL}">Docs</a>
+        <a href="${PRICING_URL}">Pricing</a>
+        <a href="/skill.md">Agent skill</a>
+        <a class="btn" href="/login">Sign in</a>
+        <a class="btn btn-primary" href="/">Open console</a>
+      </nav>
+    </div>
+  </header>
+  <main>
+    <section class="hero">
+      <p class="kicker">One key. One MCP endpoint.</p>
+      <h1>Your tools, in your agent.</h1>
+      <p class="lede">Connect apps, cloud services, memory, and safety controls to the agent you already use. You choose the account, review the action, and keep a record of every run.</p>
+      <div class="actions">
+        <a class="btn btn-primary btn-lg" href="/signup">Get started</a>
+        <a class="btn btn-lg" href="${DOCS_URL}/quickstart">Read the quickstart</a>
+      </div>
+      <div class="snippet">
+        <div class="snippet-bar"><span>Install</span><button id="copy-install" type="button">Copy</button></div>
+        <pre id="install-snippet"># Claude Code
+claude plugin marketplace add https://api.muxo.ai/.claude-plugin/marketplace.json
+claude plugin install muxo@muxo
+
+# Any agent with a terminal (Node.js 22+)
+npx -y @muxoai/cli@latest login --signup --name "my-agent"
+npx -y @muxoai/cli@latest link github --wait</pre>
+        <p class="snippet-foot" id="landing-mcp-urls">MCP https://api.muxo.ai/mcp</p>
+      </div>
+    </section>
+
+    <section id="pillars" class="section" aria-labelledby="pillars-title">
+      <div class="section-head"><div><h2 id="pillars-title">What your agent gets</h2><p>Four capabilities behind one connection.</p></div></div>
+      <div class="grid">
+        ${pillars
+        .map(([tag, title, body]) => `<div class="tile"><span class="tile-badge">${tag}</span><span class="tile-name">${title}</span><span class="tile-sub">${body}</span></div>`)
+        .join("")}
+      </div>
+    </section>
+
+    <section id="canvas" class="section" aria-labelledby="canvas-title">
+      <div class="section-head">
+        <div><h2 id="canvas-title">Interactive unified capability canvas</h2><p>Live results from the Muxo catalog.</p></div>
+        <label class="filter">${uiIcon("search")}<span class="sr-only">Filter tools</span><input id="landing-search" type="search" placeholder="Filter tools: neon, github, search" autocomplete="off" /></label>
+      </div>
+      <div id="landing-grid" class="grid"></div>
+    </section>
+  </main>
+  <footer class="site-footer">
+    <div class="site-footer-in">
+      <a class="brand" href="/landing" aria-label="Muxo home">${muxoMark}<span>Muxo</span></a>
+      <nav aria-label="Footer">
+        <a href="${DOCS_URL}">Docs</a>
+        <a href="${DOCS_URL}/support">Support</a>
+        <a href="${DOCS_URL}/privacy">Privacy</a>
+        <a href="${DOCS_URL}/terms">Terms</a>
+      </nav>
+      <button id="theme-toggle" class="icon-button" type="button" aria-label="Switch theme">${uiIcon("sun", "theme-sun")}${uiIcon("moon", "theme-moon")}</button>
+    </div>
+  </footer>
+  <script>${landingScript}</script>
+</body>
+</html>`;
+}
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+/** JSON that is safe to place inside an inline <script> element. */
+function inlineJson(value) {
+    return JSON.stringify(value)
+        .replace(/</g, "\\u003c")
+        .replace(/>/g, "\\u003e")
+        .replace(/&/g, "\\u0026")
+        .replace(/\u2028/g, "\\u2028")
+        .replace(/\u2029/g, "\\u2029");
+}
+const consentCss = `
+.consent-list{display:grid;gap:8px;margin:20px 0 0;padding:0;list-style:none;text-align:left;font-size:14px}
+.consent-list li{display:flex;gap:10px;align-items:flex-start}
+.consent-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--color-accent)}
+.consent-redirect{margin-top:16px;color:var(--color-muted);font-size:13px;overflow-wrap:anywhere}
+.consent-redirect strong{color:var(--color-text);font-family:var(--font-mono);font-weight:500}
+.consent-state{margin-top:24px}
+.consent-account{color:var(--color-muted);font-size:14px}
+.consent-account strong{color:var(--color-text)}
+.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
+.consent-switch{margin-top:10px}
+`;
+const consentScript = String.raw `
+(function () {
+  var C = window.MUXO_CONSENT;
+  function byId(id) { return document.getElementById(id); }
+  function show(id, on) { var el = byId(id); if (el) el.hidden = !on; }
+  function fail(msg) { show('consent-loading', false); byId('consent-error').textContent = msg || ''; }
+  if (!C.clerk) { fail('Sign-in is not configured on this Muxo server, so this connection cannot be approved here.'); return; }
+  if (!/^https:\/\/[a-z0-9.-]+$/i.test(C.clerk.frontendApi)) { fail('Sign-in is misconfigured on this server.'); return; }
+  var clerk = null;
+  var mounted = false;
+  var busy = false;
+  var here = location.href.split('#')[0];
+  function appearance() {
+    var cs = getComputedStyle(document.documentElement);
+    function v(n) { return cs.getPropertyValue(n).trim(); }
+    return {
+      variables: { colorPrimary: v('--color-button-primary'), colorText: v('--color-text'), colorTextSecondary: v('--color-muted'), colorBackground: v('--color-surface'), colorInputBackground: v('--color-bg'), colorInputText: v('--color-text'), colorDanger: v('--color-danger'), borderRadius: '12px', fontFamily: v('--font-sans'), fontSize: '15px' },
+      elements: { rootBox: { width: '100%' }, cardBox: { width: '100%', boxShadow: 'none', border: '0' }, card: { boxShadow: 'none', background: 'transparent', padding: '4px 0 0' }, header: { display: 'none' }, footer: { background: 'transparent' } }
+    };
+  }
+  function render() {
+    show('consent-loading', false);
+    if (clerk.session && clerk.user) {
+      if (mounted) { try { clerk.unmountSignIn(byId('clerk-auth')); } catch (e) {} mounted = false; }
+      show('consent-signin', false);
+      show('consent-approve', true);
+      var u = clerk.user;
+      byId('consent-email').textContent = (u.primaryEmailAddress && u.primaryEmailAddress.emailAddress) || u.username || 'your account';
+      return;
+    }
+    show('consent-approve', false);
+    show('consent-signin', true);
+    if (!mounted) {
+      clerk.mountSignIn(byId('clerk-auth'), { routing: 'hash', forceRedirectUrl: here, signUpForceRedirectUrl: here, appearance: appearance() });
+      mounted = true;
+    }
+  }
+  async function decide(decision) {
+    if (busy) return;
+    if (decision === 'deny' && C.cancelUrl) { location.assign(C.cancelUrl); return; }
+    busy = true;
+    fail('');
+    byId('consent-allow').disabled = true;
+    byId('consent-deny').disabled = true;
+    try {
+      var token = await clerk.session.getToken();
+      var res = await fetch(C.action || '/oauth/authorize', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
+        body: JSON.stringify(Object.assign({}, C.request, { decision: decision }))
+      });
+      var data = await res.json().catch(function () { return {}; });
+      if (!res.ok || !data.redirect) throw new Error(data.error || 'Muxo could not finish this request. Try again.');
+      byId(decision === 'allow' ? 'consent-allow' : 'consent-deny').textContent = decision === 'allow' ? (C.action ? 'Opening…' : 'Returning…') : 'Cancelling…';
+      location.assign(data.redirect);
+    } catch (err) {
+      fail(err.message);
+      busy = false;
+      byId('consent-allow').disabled = false;
+      byId('consent-deny').disabled = false;
+    }
+  }
+  byId('consent-allow').addEventListener('click', function () { decide('allow'); });
+  byId('consent-deny').addEventListener('click', function () { decide('deny'); });
+  byId('consent-switch').addEventListener('click', function () { clerk.signOut({ redirectUrl: here }); });
+  var s = document.createElement('script');
+  s.src = C.clerk.frontendApi + '/npm/@clerk/clerk-js@5/dist/clerk.browser.js';
+  s.async = true;
+  s.crossOrigin = 'anonymous';
+  s.setAttribute('data-clerk-publishable-key', C.clerk.publishableKey);
+  s.onerror = function () { fail('Sign-in could not load. Check your connection and reload.'); };
+  s.onload = function () {
+    if (!window.Clerk) { fail('Sign-in could not load.'); return; }
+    window.Clerk.load({ appearance: appearance() }).then(function () {
+      clerk = window.Clerk;
+      clerk.addListener(function () { render(); });
+      render();
+    }).catch(function () { fail('Sign-in could not load. Reload to try again.'); });
+  };
+  document.head.appendChild(s);
+})();
+`;
+/** Consent screen for MCP clients (ChatGPT, Claude, CLIs) asking to use a Muxo workspace. */
+export function renderOAuthConsentHtml(opts) {
+    const clientName = escapeHtml(opts.clientName || "An app");
+    const clientNameMidSentence = /^(A|An) /.test(clientName) ? clientName[0].toLowerCase() + clientName.slice(1) : clientName;
+    const claim = opts.claim;
+    const stepTag = opts.error ? "Connection error" : claim ? "Workspace claim" : "Agent sign-in";
+    const head = `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>${opts.error ? (opts.claim ? "Claim problem" : "Connection problem") : opts.claim ? `Claim ${escapeHtml(opts.claim.workspaceName)}` : `Connect ${clientNameMidSentence}`} · Muxo</title>
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${consoleCss}${consentCss}</style>
+</head>
+<body>`;
+    if (opts.error) {
+        return `${head}
+  <main class="auth-view">
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">${stepTag}</span>
+      </div>
+      <div class="oauth-card-body">
+        <h1>${opts.claim ? "This claim link isn't valid" : "This connection link isn't valid"}</h1>
+        <p class="lede">${escapeHtml(opts.error)}</p>
+      </div>
+      <div class="oauth-card-foot">
+        <span>${opts.claim ? "Ask the agent for a new claim link" : "Start the connection again from your app"}</span>
+        <a href="${DOCS_URL}">Read the setup guide</a>
+      </div>
+    </div>
+  </main>
+</body>
+</html>`;
+    }
+    const config = {
+        clerk: opts.clerk || null,
+        request: opts.request || {},
+        action: claim?.action,
+        cancelUrl: claim?.cancelUrl,
+    };
+    const intro = claim
+        ? `<h1>Claim ${escapeHtml(claim.workspaceName)}</h1>
+      <p class="lede">An agent created this Muxo workspace and invited you to own it.</p>
+      <ul class="consent-list">
+        <li>You become the owner of this workspace and its credits</li>
+        <li>You manage its keys, safety rules, memory, and billing</li>
+        <li>The agent keeps working with its key until you revoke it</li>
+      </ul>
+      <p class="consent-redirect">Sign in as <strong>${escapeHtml(claim.targetEmail)}</strong> to accept.</p>`
+        : `<h1>Connect ${clientNameMidSentence} to Muxo</h1>
+      <p class="lede">${clientName} wants to use your Muxo workspace.</p>
+      <ul class="consent-list">
+        <li>Find tools and plan actions in your workspace</li>
+        <li>Run tools under your workspace's safety rules and approvals</li>
+        <li>Read the status of connections, plans, and runs</li>
+      </ul>
+      <p class="consent-redirect">After you decide, you'll return to <strong>${escapeHtml(opts.redirectOrigin || "")}</strong></p>`;
+    return `${head}
+  <main class="auth-view">
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">${stepTag}</span>
+      </div>
+      <div class="oauth-card-body">
+        ${intro}
+        <div class="consent-state">
+          <p id="consent-loading" class="muted">Checking your sign-in…</p>
+          <div id="consent-signin" hidden>
+            <p class="consent-account">Sign in to Muxo to continue.</p>
+            <div id="clerk-auth" class="clerk-auth"></div>
+          </div>
+          <div id="consent-approve" hidden>
+            <p class="consent-account">Signed in as <strong id="consent-email"></strong></p>
+            <div class="consent-actions">
+              <button id="consent-deny" class="btn btn-lg" type="button">${claim ? "Not now" : "Cancel"}</button>
+              <button id="consent-allow" class="btn btn-primary btn-lg" type="button">${claim ? "Claim workspace" : "Allow"}</button>
+            </div>
+            <p class="consent-switch"><button id="consent-switch" class="btn btn-quiet btn-sm" type="button">Use a different account</button></p>
+          </div>
+          <p id="consent-error" class="field-error" role="alert"></p>
+        </div>
+      </div>
+      <div class="oauth-card-foot">
+        <span>${claim ? "Only the invited email can claim this workspace, and the link works once." : "You can remove this connection anytime in the Muxo console."}</span>
+      </div>
+    </div>
+  </main>
+  <script>window.MUXO_CONSENT = ${inlineJson(config)};${consentScript}</script>
+</body>
+</html>`;
+}
+const approvalCss = `
+.approval-facts{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none;text-align:left;font-size:14px}
+.approval-facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg)}
+.approval-facts .k{color:var(--color-muted);flex:none}
+.approval-facts .v{color:var(--color-text);font-weight:500;text-align:right;overflow-wrap:anywhere}
+.approval-input{margin:14px 0 0;padding:12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg);font-family:var(--font-mono);font-size:12px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
+.approval-risk{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;text-transform:capitalize}
+.approval-risk[data-tone="ok"]{background:var(--color-ok-bg);color:var(--color-ok)}
+.approval-risk[data-tone="warn"]{background:var(--color-warn-bg);color:var(--color-warn)}
+.approval-risk[data-tone="strict"]{background:var(--color-danger-bg);color:var(--color-danger)}
+.approval-note{margin-top:14px;color:var(--color-muted);font-size:13px}
+.approval-done{margin-top:18px;text-align:left;font-size:14px}
+`;
+const approvalScript = String.raw `
+(function () {
+  var C = window.MUXO_APPROVAL;
+  function byId(id) { return document.getElementById(id); }
+  function show(id, on) { var el = byId(id); if (el) el.hidden = !on; }
+  function fail(msg) { var el = byId('approval-error'); if (el) el.textContent = msg || ''; }
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
+  var clerk = null;
+  var mounted = false;
+  var busy = false;
+  var here = location.href.split('#')[0];
+  var plan = null;
+  function storedKey() { try { return localStorage.getItem('muxo_external_api_key') || ''; } catch (e) { return ''; } }
+  async function bearerToken() {
+    var key = storedKey();
+    if (key) return key;
+    if (clerk && clerk.session) { var t = await clerk.session.getToken(); if (t) return t; }
+    return '';
+  }
+  async function api(path, method, body) {
+    var token = await bearerToken();
+    if (!token) { var e = new Error('sign_in'); e.code = 'sign_in'; throw e; }
+    var res = await fetch(path, { method: method || 'GET', headers: { 'Content-Type': 'application/json', Accept: 'application/json', Authorization: 'Bearer ' + token }, body: body ? JSON.stringify(body) : undefined });
+    var data; try { data = await res.json(); } catch (e) { data = { ok: false, error: 'Unexpected response from Muxo (HTTP ' + res.status + ')' }; }
+    if (res.status === 401) { var e2 = new Error('sign_in'); e2.code = 'sign_in'; throw e2; }
+    if (!res.ok || data.ok === false) throw new Error(data.error || data.message || ('HTTP ' + res.status));
+    return data;
+  }
+  function riskTone(risk) { return risk === 'read' ? 'ok' : (risk === 'write' || risk === 'admin') ? 'warn' : 'strict'; }
+  function renderPlan() {
+    show('approval-loading', false);
+    show('approval-review', true);
+    byId('approval-tool').textContent = plan.toolSlug || '';
+    byId('approval-risk').textContent = plan.riskLevel + ' risk';
+    byId('approval-risk').setAttribute('data-tone', riskTone(plan.riskLevel));
+    byId('approval-cost').textContent = String(plan.creditCost != null ? plan.creditCost : 0) + ' credits';
+    byId('approval-reason').textContent = plan.reason || '—';
+    byId('approval-input').textContent = JSON.stringify(plan.input || {}, null, 2);
+    var already = plan.approvalStatus === 'approved' || plan.approvalStatus === 'auto_approved';
+    var executed = plan.approvalStatus === 'executed';
+    if (executed) { show('approval-review', false); done('This plan was already executed.', null); return; }
+    if (already) {
+      byId('approval-approve-only').disabled = true;
+      byId('approval-reject').disabled = true;
+      byId('approval-state-note').textContent = 'Already approved. You can run it now.';
+    }
+  }
+  function done(message, result) {
+    show('approval-loading', false);
+    show('approval-review', false);
+    show('approval-done', true);
+    var html = '<p>' + esc(message) + '</p>';
+    if (result && result.run) {
+      html += '<ul class="approval-facts">'
+        + '<li><span class="k">Run</span><span class="v">' + esc(result.run.id) + ' · ' + esc(result.run.status) + '</span></li>'
+        + (result.receipt ? '<li><span class="k">Receipt</span><span class="v">' + esc(result.receipt.id) + '</span></li>' : '')
+        + '</ul>';
+    }
+    html += '<p class="approval-note">You can close this window, or <a href="/activity">open the console activity log</a>.</p>';
+    byId('approval-done').innerHTML = html;
+  }
+  async function load() {
+    fail('');
+    try {
+      var data = await api('/api/v1/plans/' + encodeURIComponent(C.planId));
+      plan = data.plan;
+      renderPlan();
+    } catch (err) {
+      show('approval-loading', false);
+      if (err && err.code === 'sign_in') { renderAuth(); return; }
+      show('approval-review', false);
+      fail(err.message || 'Muxo could not load this plan.');
+    }
+  }
+  async function decide(mode) {
+    if (busy || !plan) return;
+    busy = true;
+    fail('');
+    byId('approval-approve-run').disabled = true;
+    byId('approval-approve-only').disabled = true;
+    byId('approval-reject').disabled = true;
+    try {
+      if (mode === 'reject') {
+        await api('/api/v1/plans/' + encodeURIComponent(C.planId) + '/approve', 'POST', { decision: 'rejected' });
+        done('Plan rejected. Nothing was executed.', null);
+        return;
+      }
+      if (plan.approvalStatus === 'pending_approval') {
+        await api('/api/v1/plans/' + encodeURIComponent(C.planId) + '/approve', 'POST');
+      }
+      if (mode === 'run') {
+        var result = await api('/api/v1/plans/' + encodeURIComponent(C.planId) + '/execute', 'POST');
+        done('Approved and executed.', result);
+      } else {
+        done('Plan approved. Your agent can now execute it.', null);
+      }
+    } catch (err) {
+      fail(err.message || 'Muxo could not complete that action.');
+      busy = false;
+      byId('approval-approve-run').disabled = false;
+      byId('approval-approve-only').disabled = false;
+      byId('approval-reject').disabled = false;
+    }
+  }
+  function renderAuth() {
+    show('approval-loading', false);
+    show('approval-signin', true);
+    if (storedKey()) {
+      try { localStorage.removeItem('muxo_external_api_key'); } catch (e) {}
+      fail('Your saved console key was rejected. Sign in below or paste a valid workspace API key.');
+    }
+    if (!C.clerk) {
+      byId('approval-signin-msg').textContent = 'Paste your workspace or team API key below, or sign in through the Muxo console.';
+      show('approval-console-link', true);
+      return;
+    }
+    if (clerk && !mounted) {
+      clerk.mountSignIn(byId('clerk-auth'), { routing: 'hash', forceRedirectUrl: here, signUpForceRedirectUrl: here, appearance: appearance() });
+      mounted = true;
+    }
+  }
+  function appearance() {
+    var cs = getComputedStyle(document.documentElement);
+    function v(n) { return cs.getPropertyValue(n).trim(); }
+    return {
+      variables: { colorPrimary: v('--color-button-primary'), colorText: v('--color-text'), colorTextSecondary: v('--color-muted'), colorBackground: v('--color-surface'), colorInputBackground: v('--color-bg'), colorInputText: v('--color-text'), colorDanger: v('--color-danger'), borderRadius: '12px', fontFamily: v('--font-sans'), fontSize: '15px' },
+      elements: { rootBox: { width: '100%' }, cardBox: { width: '100%', boxShadow: 'none', border: '0' }, card: { boxShadow: 'none', background: 'transparent', padding: '4px 0 0' }, header: { display: 'none' }, footer: { background: 'transparent' } }
+    };
+  }
+  var keyForm = byId('approval-key-form');
+  if (keyForm) {
+    keyForm.addEventListener('submit', async function (e) {
+      e.preventDefault();
+      var input = byId('approval-key-input');
+      var key = (input && input.value ? input.value : '').trim();
+      if (!key) return;
+      fail('');
+      try {
+        var res = await fetch('/api/v1/workspaces/join', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: JSON.stringify({ apiKey: key })
+        });
+        var data = await res.json();
+        if (!res.ok || data.ok === false) throw new Error(data.error || data.message || 'Invalid API key');
+        var tokenToStore = data.sessionToken || key;
+        try { localStorage.setItem('muxo_external_api_key', tokenToStore); } catch (err) {}
+        show('approval-signin', false);
+        show('approval-loading', true);
+        await load();
+      } catch (err) {
+        fail(err.message || 'Could not verify that API key.');
+      }
+    });
+  }
+  byId('approval-approve-run').addEventListener('click', function () { decide('run'); });
+  byId('approval-approve-only').addEventListener('click', function () { decide('approve'); });
+  byId('approval-reject').addEventListener('click', function () { decide('reject'); });
+  if (storedKey() || !C.clerk) { load(); return; }
+  if (!/^https:\/\/[a-z0-9.-]+$/i.test(C.clerk.frontendApi)) { fail('Sign-in is misconfigured on this server.'); return; }
+  var s = document.createElement('script');
+  s.src = C.clerk.frontendApi + '/npm/@clerk/clerk-js@5/dist/clerk.browser.js';
+  s.async = true;
+  s.crossOrigin = 'anonymous';
+  s.setAttribute('data-clerk-publishable-key', C.clerk.publishableKey);
+  s.onerror = function () { fail('Sign-in could not load. Check your connection and reload.'); };
+  s.onload = function () {
+    if (!window.Clerk) { fail('Sign-in could not load.'); return; }
+    window.Clerk.load({ appearance: appearance() }).then(function () {
+      clerk = window.Clerk;
+      clerk.addListener(function () { if (clerk.session && clerk.user && !plan) load(); });
+      if (clerk.session && clerk.user) load(); else renderAuth();
+    }).catch(function () { fail('Sign-in could not load. Reload to try again.'); });
+  };
+  document.head.appendChild(s);
+})();
+`;
+/** One-click approval screen for plans held by workspace guardrails (`/approve/:planId`). */
+export function renderApprovalPageHtml(opts) {
+    const planId = String(opts.planId || "");
+    const config = { planId, clerk: opts.clerk || null };
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Review action · Muxo</title>
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${consoleCss}${consentCss}${approvalCss}</style>
+</head>
+<body>
+  <main class="auth-view">
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">Action review</span>
+      </div>
+      <div class="oauth-card-body">
+        <h1>Review this action</h1>
+        <p class="lede">Muxo held this action because your guardrails require your approval before it can run.</p>
+        <div class="consent-state">
+          <p id="approval-loading" class="muted">Loading plan ${escapeHtml(planId)}…</p>
+          <div id="approval-signin" hidden>
+            <p id="approval-signin-msg" class="consent-account">Sign in to Muxo to review this action.</p>
+            <div id="clerk-auth" class="clerk-auth"></div>
+            <form id="approval-key-form" class="inline-form" style="margin-top:12px" novalidate>
+              <input id="approval-key-input" type="password" placeholder="Or paste workspace / team key (mk_live_...)" autocomplete="off" />
+              <button class="btn btn-primary" type="submit">Continue</button>
+            </form>
+            <p id="approval-console-link" style="margin-top:10px" hidden><a href="/">Open the Muxo console</a></p>
+          </div>
+          <div id="approval-review" hidden>
+            <ul class="approval-facts">
+              <li><span class="k">Action</span><span class="v" id="approval-tool"></span></li>
+              <li><span class="k">Risk</span><span class="v"><span id="approval-risk" class="approval-risk" data-tone="warn"></span></span></li>
+              <li><span class="k">Cost</span><span class="v" id="approval-cost"></span></li>
+              <li><span class="k">Reason</span><span class="v" id="approval-reason"></span></li>
+            </ul>
+            <pre id="approval-input" class="approval-input" aria-label="Tool input"></pre>
+            <p id="approval-state-note" class="approval-note">Nothing runs until you approve.</p>
+            <div class="consent-actions">
+              <button id="approval-reject" class="btn btn-lg" type="button">Reject</button>
+              <button id="approval-approve-only" class="btn btn-lg" type="button">Approve only</button>
+            </div>
+            <div class="consent-actions" style="grid-template-columns:1fr;margin-top:10px">
+              <button id="approval-approve-run" class="btn btn-primary btn-lg" type="button">Approve and run</button>
+            </div>
+          </div>
+          <div id="approval-done" class="approval-done" hidden></div>
+          <p id="approval-error" class="field-error" role="alert"></p>
+        </div>
+      </div>
+      <div class="oauth-card-foot">
+        <span>Muxo checks every action against your guardrails and workspace memory before it reaches you.</span>
+      </div>
+    </div>
+  </main>
+  <script>window.MUXO_APPROVAL = ${inlineJson(config)};${approvalScript}</script>
+</body>
+</html>`;
+}
+const oauthConnectCss = `
+.connect-bridge{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 18px}
+.connect-node{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-bg);box-shadow:0 2px 8px rgba(0,0,0,.04);margin:0}
+.connect-node svg{width:24px;height:24px}
+.connect-node-monogram{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--color-text)}
+.connect-connector{display:inline-flex;align-items:center;gap:6px;color:var(--color-muted)}
+.connect-line{width:22px;height:1px;background:var(--color-border-strong)}
+.connect-lock{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text)}
+.connect-lock svg{width:13px;height:13px}
+.connect-lock[data-tone="ok"]{border-color:var(--color-ok-border);background:var(--color-ok-bg);color:var(--color-ok)}
+.connect-badge-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
+.connect-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}
+.connect-pill-subtle{font-weight:500;color:var(--color-muted)}
+.connect-pill-status[data-tone="ok"]{border-color:var(--color-ok-border);background:var(--color-ok-bg);color:var(--color-ok)}
+.connect-pill-status[data-tone="warn"]{border-color:var(--color-warn-border);background:var(--color-warn-bg);color:var(--color-warn)}
+.connect-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 6px;text-align:left}
+.connect-step{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg);font-size:12px;line-height:1.3;color:var(--color-muted)}
+.connect-step-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:var(--color-surface-2);color:var(--color-text);font-size:11px;font-weight:700;flex:none}
+.connect-field{margin-top:12px;text-align:left}
+.connect-field label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--color-text)}
+.connect-field small{display:block;font-size:12px;color:var(--color-muted);margin-bottom:6px}
+.connect-field input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg);color:var(--color-text);font-size:14px}
+@media (max-width:520px){.connect-steps{grid-template-columns:1fr}}
+`;
+function renderProviderBadge(slug, name) {
+    const s = (slug || "").toLowerCase().replace(/[^a-z0-9]/g, "");
+    if (s === "github") {
+        return `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.09.68-.22.68-.49 0-.24-.01-.89-.01-1.74-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.63.07-.63 1 .07 1.53 1.05 1.53 1.05.9 1.57 2.35 1.12 2.92.85.09-.67.35-1.12.63-1.38-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.36 9.36 0 0 1 12 6.84c.85 0 1.71.12 2.51.35 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.06.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.59.69.49A10.25 10.25 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z"/></svg>`;
+    }
+    if (s === "slack") {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="13" y="2" width="3" height="8" rx="1.5"/><path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5"/><rect x="8" y="14" width="3" height="8" rx="1.5"/><path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5"/><rect x="14" y="13" width="8" height="3" rx="1.5"/><path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"/><rect x="2" y="8" width="8" height="3" rx="1.5"/><path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5"/></svg>`;
+    }
+    if (s === "gmail" || s.startsWith("google")) {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>`;
+    }
+    if (s === "notion") {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h12l4 4v12H6l-2-2V4Z"/><path d="M9 9v7l5-7v7"/></svg>`;
+    }
+    if (s === "linear") {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m5.5 15.5 7 3M4.5 11.5l8 8M7.5 6.5l10 10"/></svg>`;
+    }
+    const initial = escapeHtml((name || slug || "A").trim().charAt(0).toUpperCase() || "A");
+    return `<span class="connect-node-monogram">${initial}</span>`;
+}
+const oauthConnectScript = String.raw `
+(function () {
+  var C = window.MUXO_CONNECT || {};
+  var form = document.getElementById('muxo-connect-form');
+  var btn = document.getElementById('muxo-connect-submit');
+  var errEl = document.getElementById('muxo-connect-error');
+  if (!form || !btn) return;
+  form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    if (errEl) errEl.textContent = '';
+    btn.disabled = true;
+    var originalText = btn.textContent;
+    btn.textContent = 'Connecting to ' + (C.toolkitName || 'provider') + '…';
+    try {
+      var input = {};
+      var fields = form.querySelectorAll('input[name]');
+      for (var i = 0; i < fields.length; i++) {
+        var f = fields[i];
+        if (f.name && f.value !== '') input[f.name] = f.value;
+      }
+      var res = await fetch(form.action, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify({ input: input })
+      });
+      var data = await res.json().catch(function () { return {}; });
+      var target = data.redirectUrl || data.redirect_url;
+      if (!res.ok || data.ok === false || !target) {
+        throw new Error(data.error || data.message || 'Could not start authorization handoff.');
+      }
+      window.location.href = target;
+    } catch (err) {
+      if (errEl) errEl.textContent = (err && err.message) ? err.message : 'Could not start authorization handoff.';
+      btn.disabled = false;
+      btn.textContent = originalText;
+    }
+  });
+})();
+`;
+/** Muxo-branded OAuth connection handoff screen (`/oauth/connect/:token`). */
+export function renderOAuthConnectPageHtml(opts) {
+    const toolkitName = escapeHtml(opts.toolkitName || "Connected App");
+    const toolkitSlug = escapeHtml(opts.toolkitSlug || "app");
+    const workspaceId = opts.workspaceId ? escapeHtml(opts.workspaceId) : "";
+    const authModeLabel = escapeHtml((opts.authMode || "OAUTH2").toUpperCase());
+    const fields = Array.isArray(opts.expectedInputFields) ? opts.expectedInputFields : [];
+    const querySuffix = (() => {
+        const params = new URLSearchParams();
+        if (opts.workspaceId)
+            params.set("workspace_id", opts.workspaceId);
+        if (opts.toolkitSlug)
+            params.set("provider", opts.toolkitSlug);
+        if (opts.callbackUrl)
+            params.set("callback_url", opts.callbackUrl);
+        const qs = params.toString();
+        return qs ? `?${qs}` : "";
+    })();
+    const actionUrl = `/oauth/connect/${encodeURIComponent(opts.token)}${querySuffix}`;
+    const fieldsHtml = fields
+        .map((f) => {
+        const inputType = f.type === "password" || /secret|token|key|password/i.test(f.name)
+            ? "password"
+            : "text";
+        return `<div class="connect-field">
+        <label for="field-${escapeHtml(f.name)}">${escapeHtml(f.label || f.name)}</label>
+        ${f.description ? `<small>${escapeHtml(f.description)}</small>` : ""}
+        <input id="field-${escapeHtml(f.name)}" name="${escapeHtml(f.name)}" type="${inputType}" value="${escapeHtml(f.default || "")}" ${f.required !== false ? "required" : ""} autocomplete="off" />
+      </div>`;
+    })
+        .join("");
+    const config = {
+        token: opts.token,
+        toolkitSlug: opts.toolkitSlug,
+        toolkitName: opts.toolkitName,
+        workspaceId: opts.workspaceId || null,
+    };
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Muxo wants to connect to your ${toolkitName} · Muxo</title>
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${consoleCss}${consentCss}${approvalCss}${oauthConnectCss}</style>
+</head>
+<body>
+  <main class="auth-view">
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">App consent</span>
+      </div>
+      <div class="oauth-card-body">
+        <div class="connect-bridge" aria-hidden="true">
+          <div class="auth-mark connect-node" title="Muxo">${muxoMark}</div>
+          <div class="connect-connector">
+            <span class="connect-line"></span>
+            <span class="connect-lock">${uiIcon("shield")}</span>
+            <span class="connect-line"></span>
+          </div>
+          <div class="connect-node" title="${toolkitName}">${renderProviderBadge(opts.toolkitSlug, opts.toolkitName)}</div>
+        </div>
+        <div class="connect-badge-row">
+          <span class="connect-pill">Muxo Connected Apps · ${toolkitSlug}</span>
+          <span class="connect-pill connect-pill-subtle">${authModeLabel}</span>
+        </div>
+        <h1>Muxo wants to connect to your ${toolkitName}</h1>
+        <p class="lede">Authorize ${toolkitName} so your agent can run governed actions in ${workspaceId ? `workspace <code>${workspaceId}</code>` : "your Muxo workspace"}.</p>
+        <div class="connect-steps" aria-label="Connection steps">
+          <div class="connect-step"><span class="connect-step-num">1</span><span>Authorize ${toolkitName}</span></div>
+          <div class="connect-step"><span class="connect-step-num">2</span><span>Sealed in Muxo Vault</span></div>
+          <div class="connect-step"><span class="connect-step-num">3</span><span>Resume in ChatGPT / Agent</span></div>
+        </div>
+        <ul class="consent-list">
+          <li>Credentials are sealed in your isolated Muxo workspace vault</li>
+          <li>Every action is checked against your workspace safety guardrails</li>
+          <li>All tool runs emit a signed Ed25519 receipt and can be revoked anytime</li>
+        </ul>
+        <div class="consent-state">
+          <form id="muxo-connect-form" method="POST" action="${escapeHtml(actionUrl)}">
+            ${fieldsHtml}
+            <div class="consent-actions" style="grid-template-columns:1fr;margin-top:16px">
+              <button id="muxo-connect-submit" data-testid="connect-button" class="btn btn-primary btn-lg" type="submit">Connect ${toolkitName} Account</button>
+            </div>
+          </form>
+          <p id="muxo-connect-error" class="field-error" role="alert">${opts.error ? escapeHtml(opts.error) : ""}</p>
+        </div>
+      </div>
+      <div class="oauth-card-foot">
+        <span>Secured by <strong>Muxo</strong> · Governed Agent Execution</span>
+      </div>
+    </div>
+  </main>
+  <script>window.MUXO_CONNECT = ${inlineJson(config)};${oauthConnectScript}</script>
+</body>
+</html>`;
+}
+const oauthCallbackScript = String.raw `
+(function () {
+  var C = window.MUXO_OAUTH_CALLBACK || {};
+  try {
+    if (window.opener && !window.opener.closed) {
+      window.opener.postMessage({
+        type: 'muxo:oauth_complete',
+        provider: C.providerSlug,
+        providerName: C.providerName,
+        status: C.status,
+        workspaceId: C.workspaceId,
+        externalAccountId: C.externalAccountId
+      }, '*');
+    }
+  } catch (e) {}
+  var closeBtn = document.getElementById('oauth-close-window');
+  var hintEl = document.getElementById('oauth-close-hint');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', function () {
+      try { window.close(); } catch (e) {}
+      if (hintEl) hintEl.hidden = false;
+    });
+  }
+})();
+`;
+/** Muxo-branded OAuth callback completion screen (`/oauth/callback`). */
+export function renderOAuthCallbackPageHtml(opts) {
+    const providerSlug = escapeHtml(opts.providerSlug || "app");
+    const providerName = escapeHtml(opts.providerName || "Connected App");
+    const statusUpper = escapeHtml(String(opts.status || "active").toUpperCase());
+    const isSuccess = String(opts.status || "active").toLowerCase() === "active";
+    const workspaceId = escapeHtml(opts.workspaceId || "ws_default");
+    const externalAccountId = opts.externalAccountId ? escapeHtml(opts.externalAccountId) : "";
+    const consoleHref = `/?connected=${encodeURIComponent(opts.providerSlug || "app")}`;
+    const config = {
+        providerSlug: opts.providerSlug,
+        providerName: opts.providerName,
+        status: opts.status,
+        workspaceId: opts.workspaceId,
+        externalAccountId: opts.externalAccountId || null,
+    };
+    return `<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Muxo OAuth Handoff Complete · Muxo</title>
+  <meta name="theme-color" content="${muxoThemes.dark.bg}" />
+  <meta name="color-scheme" content="dark light" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="https://muxo.ai/favicon.svg" type="image/svg+xml" />
+  <script data-theme-bootstrap>${muxoThemeBootstrap}</script>
+  <style>${muxoBaseCss}${consoleCss}${consentCss}${approvalCss}${oauthConnectCss}</style>
+</head>
+<body>
+  <main class="auth-view">
+    <div class="auth-card oauth-card">
+      <div class="oauth-card-top">
+        <span class="oauth-brand">${muxoMark}<span>Muxo</span></span>
+        <span class="oauth-step-tag">${isSuccess ? "Connected" : "Connection update"}</span>
+      </div>
+      <div class="oauth-card-body">
+        <div class="connect-bridge" aria-hidden="true">
+          <div class="auth-mark connect-node" title="Muxo">${muxoMark}</div>
+          <div class="connect-connector">
+            <span class="connect-line"></span>
+            <span class="connect-lock" data-tone="${isSuccess ? "ok" : "warn"}">${uiIcon("check")}</span>
+            <span class="connect-line"></span>
+          </div>
+          <div class="connect-node" title="${providerName}">${renderProviderBadge(opts.providerSlug, opts.providerName)}</div>
+        </div>
+        <div class="connect-badge-row">
+          <span class="connect-pill connect-pill-status" data-tone="${isSuccess ? "ok" : "warn"}">OAuth Handoff Complete (${statusUpper})</span>
+        </div>
+        <h1>${providerName} Connected to Muxo</h1>
+        <p class="lede">Workspace <code>${workspaceId}</code> is now linked${externalAccountId ? ` (<code>${externalAccountId}</code>)` : ""}. You can close this window and return to ChatGPT, Codex, Claude Code, Droid, or your terminal.</p>
+        <ul class="approval-facts">
+          <li><span class="k">Connected app</span><span class="v">${providerName} (${providerSlug})</span></li>
+          <li><span class="k">Vault status</span><span class="v">${isSuccess ? "Active · Sealed in Muxo Vault" : statusUpper}</span></li>
+          <li><span class="k">Workspace</span><span class="v"><code>${workspaceId}</code></span></li>
+          ${externalAccountId ? `<li><span class="k">Connection ID</span><span class="v"><code>${externalAccountId}</code></span></li>` : ""}
+        </ul>
+        <div class="consent-state">
+          <div class="consent-actions" style="grid-template-columns:1fr;margin-top:16px">
+            <button id="oauth-close-window" class="btn btn-primary btn-lg" type="button">Done — Return to ChatGPT / Agent</button>
+          </div>
+          <div class="consent-actions" style="grid-template-columns:1fr;margin-top:10px">
+            <a class="btn btn-lg" href="${escapeHtml(consoleHref)}">Open Muxo Console</a>
+          </div>
+          <p id="oauth-close-hint" class="approval-note" hidden>You can safely close this browser tab now and tell ChatGPT or your agent to continue.</p>
+        </div>
+      </div>
+      <div class="oauth-card-foot">
+        <span>Secured by <strong>Muxo</strong> · Governed Agent Execution</span>
+      </div>
+    </div>
+  </main>
+  <script>window.MUXO_OAUTH_CALLBACK = ${inlineJson(config)};${oauthCallbackScript}</script>
+</body>
+</html>`;
+}