@muxoai/platform 1.4.1 → 1.4.2

package/dist/ui/console-html.js

@@ -4,11 +4,13 @@ export const CONSOLE_ROUTES = Object.freeze({
     "/": "overview",
     "/console": "overview",
     "/dashboard": "overview",
-    "/catalog": "overview",
+    "/catalog": "catalog",
+    "/tools": "catalog",
     "/connections": "overview",
     "/infrastructure": "overview",
     "/keys": "setup",
     "/setup": "setup",
+    "/workspaces": "workspaces",
     "/activity": "activity",
     "/receipts": "activity",
     "/governance": "activity",
@@ -39,6 +41,7 @@ const consoleCss = `
 .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)}
@@ -47,6 +50,13 @@ const consoleCss = `
 .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)}
@@ -54,6 +64,7 @@ const consoleCss = `
 .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)}
@@ -70,7 +81,10 @@ const consoleCss = `
 .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}
-.stack{display:grid;gap:20px}
+.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)}
@@ -78,6 +92,60 @@ const consoleCss = `
 .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)}
@@ -87,6 +155,12 @@ const consoleCss = `
 .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}
@@ -116,6 +190,7 @@ 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}
@@ -136,6 +211,13 @@ input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--color-bu
 .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}
@@ -165,7 +247,7 @@ input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--color-bu
 .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{overflow-x:auto;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}
+.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}
@@ -185,6 +267,9 @@ th.right,.cell-actions{text-align:right}
 .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)}
@@ -235,50 +320,105 @@ body:has(dialog[open]){overflow:hidden}
 .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}
-.auth-card{width:min(440px,100%);padding:40px;border:1px solid var(--color-border);border-radius:24px;background:var(--color-surface);text-align:center}
-.auth-mark{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:16px;background:var(--color-surface-2);color:var(--color-text)}
-.auth-mark svg{width:30px;height:30px}
-.auth-card h1{font-size:28px;line-height:1.2}
-.auth-card .lede{margin:8px auto 0}
-.auth-card .segmented{margin-top:24px}
-.auth-form{display:grid;gap:14px;margin-top:24px;text-align:left}
-.auth-alt{margin-top:12px}
+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:20px;text-align:left}
-.clerk-loading{display:flex;align-items:center;gap:10px;align-self:center;margin:0;color:var(--color-muted);font-size:15px}
+.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:4px}
+.auth-switch{margin-top:8px}
 .auth-switch:has([hidden]){display:none}
-.auth-foot{margin-top:16px;color:var(--color-muted);font-size:12px}
+.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{grid-template-columns:1fr}}
+@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{top:var(--header-height);z-index:30;flex-direction:row;gap:4px;height:auto;overflow-x:auto;padding:8px 16px;border-right:0;border-bottom:1px solid var(--color-border);background:var(--color-navigation);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
-.nav-group{display:contents}.nav-group p,.sidebar-usage,.nav-item .count{display:none}
-.nav-item{flex:none;margin:0;white-space:nowrap}
+.console-sidebar{display:none}
+.mobile-menu-toggle{display:grid}
 .console-main{padding:28px 20px 80px}
-.topbar-links .nav-link,.workspace-chip,.account-label{display:none}
+.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){.metrics{grid-template-columns:1fr}.metric{border-left:0}.metric+.metric{border-top:1px solid var(--color-border)}.form-row{grid-template-columns:1fr}.panel{padding:20px}.auth-card{padding:28px 22px}.brand-section{display:none}.inline-form{flex-wrap:wrap}}
+@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: '/', setup: '/keys', activity: '/activity', billing: '/billing', login: '/login', signup: '/signup' };
-var VIEW_TITLES = { overview: 'Harness onboarding', setup: 'API keys and access', activity: 'History and audit', billing: 'Billing and credits', login: 'Sign in', signup: 'Create account' };
+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',
-  awaiting_approval: 'Waiting for approval',
-  awaiting_oauth_connection: 'Connect app to continue'
+  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',
@@ -332,9 +472,8 @@ function sanitizeForDisplay(val) {
   return out;
 }
 
-var state = { view: 'overview', boot: null, harness: 'plugin', lane: 'all', factsMode: 'current', facts: null, authMode: 'login', activeMemoryDefaults: {}, plainEnglishGuardrails: null, billingInterval: 'month', planCatalog: null };
+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 activeKeyHint = 'mk_live_...';
 var externalApiKey = readToken();
 var latestSpawnedKey = '';
 var currentWorkspaceId = '';
@@ -342,6 +481,7 @@ 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 = '';
@@ -374,8 +514,8 @@ function riskBadge(risk) {
 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)/.test(s) ? 'danger'
-    : /(pending|initiated|waiting|running|queued)/.test(s) ? 'warn' : '';
+    : /(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);
 }
 
@@ -407,6 +547,11 @@ function applyTheme(theme) {
     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';
@@ -416,6 +561,10 @@ function toggleTheme() {
 
 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');
@@ -491,6 +640,8 @@ 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;
@@ -511,7 +662,8 @@ function navigate(view, opts) {
 }
 function loadView(view) {
   var job = null;
-  if (view === 'overview' || view === 'setup') job = refreshOverview();
+  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);
@@ -656,13 +808,18 @@ function renderWorkspaceList(workspaces) {
   }).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('setup-workspaces-list');
+  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;
@@ -745,13 +902,14 @@ async function onboardTeamFromForm() {
   var box = byId('team-kit-box');
   if (box) {
     box.hidden = false;
-    setText('team-kit-title', 'Team Onboarding Kit · ' + (kit.teamName || teamName) + ' (' + (kit.role || role) + ')');
+    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('Generated onboarding kit for ' + teamName);
+  showToast('Created team access for ' + teamName);
   await refreshOverview();
 }
 async function setExternalWorkspaceKey(key, toastMsg) {
@@ -865,6 +1023,8 @@ function renderAccount(s) {
   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';
@@ -881,12 +1041,7 @@ function syncPolicyForm(policy) {
   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(g) {
-  if (!g) return;
-  setText('gov-did', g.agentDid || '');
-  var pub = g.publicKeyHex || g.ed25519PublicKey || '';
-  setText('gov-pubkey', pub ? pub.slice(0, 32) + '…' : '');
-}
+function renderIdentity() {}
 function renderApiKeys(keys) {
   byId('api-keys-list').innerHTML = keys.length ? keys.map(function (k) {
     var revoked = Boolean(k.revokedAt);
@@ -895,16 +1050,31 @@ function renderApiKeys(keys) {
       k.role ? pill(k.role) : '',
       pill(k.environment === 'test' ? 'Test' : 'Live', k.environment === 'test' ? 'warn' : 'ok')
     ].filter(Boolean).join(' ');
-    return '<div class="row"><div><strong>' + esc(k.name) + '</strong><small class="mono">' + esc(k.keyPrefix) + '</small></div>' +
+    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 keys yet. Create one to connect an agent or onboard a team.</p>';
+  }).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, 5).map(function (r) {
+  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(' · ');
-    return '<div class="row"><div><strong>' + esc(formatToolLabel(r.toolSlug)) + '</strong><small>' + esc(meta) + '</small></div>' + statusBadge(r.status) + '</div>';
-  }).join('') : '<p class="empty-note">No runs yet. Try a live tool above.</p>';
+    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) : ''); }
@@ -924,18 +1094,34 @@ async function refreshOverview() {
   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.slug || org.name || 'Primary workspace');
+  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('kpi-runs', fmt(runs.length));
   setText('meter-actions-text', fmt(used) + ' / ' + fmt(limit));
-  byId('meter-actions-bar').style.width = Math.min(100, Math.max(2, Math.round((used / Math.max(1, limit)) * 100))) + '%';
+  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));
@@ -949,8 +1135,6 @@ async function refreshOverview() {
   state.plainEnglishGuardrails = s.plainEnglishGuardrails || null;
   renderPlainEnglishGuardrails(state.plainEnglishGuardrails, org.policy);
   renderActiveMemoryDefaults(state.activeMemoryDefaults, s.activeGuardrails || (s.supermemory && s.supermemory.activeGuardrails) || []);
-  activeKeyHint = externalApiKey || s.defaultApiKey || ((s.apiKeys || [])[0] ? s.apiKeys[0].keyPrefix : 'mk_live_...');
-  setHarnessSnippet(state.harness);
   renderIdentity(s.governance);
   renderApiKeys(s.apiKeys || []);
   renderWorkspaceList(s.workspaces || []);
@@ -958,78 +1142,6 @@ async function refreshOverview() {
   return s;
 }
 
-function setHarnessSnippet(kind) {
-  state.harness = kind || 'plugin';
-  document.querySelectorAll('#harness-tabs button').forEach(function (b) { b.setAttribute('aria-pressed', String(b.dataset.kind === state.harness)); });
-  var el = byId('mcp-config-snippet');
-  var origin = window.location.origin;
-  var lines;
-  if (state.harness === 'plugin') {
-    lines = [
-      '# Claude Code',
-      'claude plugin marketplace add ' + origin + '/.claude-plugin/marketplace.json',
-      'claude plugin install muxo@muxo',
-      '',
-      '# OpenAI Codex',
-      'codex mcp add muxo --url ' + origin + '/mcp',
-      '',
-      '# Any agent with a terminal (Node.js 22+)',
-      'npx -y @muxoai/cli@latest login --signup --name "my-agent"'
-    ];
-  } else if (state.harness === 'oauth') {
-    lines = [
-      '# Sign in from the CLI, then connect an app in your browser',
-      'npx -y @muxoai/cli@latest login --signup --name "my-agent" --url ' + origin,
-      'npx -y @muxoai/cli@latest whoami',
-      'npx -y @muxoai/cli@latest link github --wait',
-      '',
-      '# Check that your agent can reach Muxo',
-      'npx -y @muxoai/cli@latest harness'
-    ];
-  } else if (state.harness === 'sdk') {
-    lines = [
-      'import { MuxoClient } from "@muxoai/sdk";',
-      '',
-      'const muxo = new MuxoClient({',
-      '  baseUrl: "' + origin + '",',
-      '  apiKey: process.env.MUXO_API_KEY || "' + activeKeyHint + '"',
-      '});',
-      '',
-      'const result = await muxo.do("Fetch top 3 stories on Hacker News");'
-    ];
-  } else if (state.harness === 'mastra') {
-    lines = [
-      'import { MCPClient } from "@mastra/mcp";',
-      '',
-      'export const muxo = new MCPClient({',
-      '  servers: {',
-      '    muxo: {',
-      '      url: new URL("' + origin + '/mcp"),',
-      '      requestInit: { headers: { Authorization: "Bearer ' + activeKeyHint + '" } }',
-      '    }',
-      '  }',
-      '});'
-    ];
-  } else if (state.harness === 'pi') {
-    lines = [
-      '# Pi coding agent',
-      'curl -sL ' + origin + '/skill.md > ~/.pi/skills/muxo.md',
-      'export MUXO_API_KEY="' + activeKeyHint + '"'
-    ];
-  } else if (state.harness === 'curl') {
-    lines = [
-      '# Run any request in plain English over HTTPS',
-      'curl -sX POST ' + origin + '/api/v1/do \\',
-      '  -H "Authorization: Bearer ' + activeKeyHint + '" \\',
-      '  -H "Content-Type: application/json" \\',
-      '  -d ' + JSON.stringify(JSON.stringify({ prompt: 'Audit https://muxo.ai for technical SEO' }))
-    ];
-  } else {
-    lines = [json({ mcpServers: { muxo: { url: origin + '/mcp', headers: { Authorization: 'Bearer ' + activeKeyHint } } } })];
-  }
-  el.textContent = lines.join('\n');
-}
-
 function showNewKey(key, title, canSwitch) {
   byId('new-key-banner').hidden = false;
   setText('new-key-title', title);
@@ -1137,20 +1249,35 @@ function toolTile(t) {
     '<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">No tools match that search. Try a provider name like github or neon.</div>';
+    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 {
-    grid.removeAttribute('aria-busy');
+    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));
@@ -1248,7 +1375,7 @@ async function submitPlanOnly() {
     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 Safety and approvals.');
+    showToast('Plan created. Review it in Activity.');
     await refreshOverview();
   } catch (err) {
     showModalResult('Error: ' + err.message);
@@ -1279,7 +1406,8 @@ async function loadResources() {
   var data = await api('/api/v1/resources');
   var list = data.resources || [];
   setCount('nav-res-count', countActive(list));
-  byId('resources-tbody').innerHTML = list.length ? list.map(function (r) {
+  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');
@@ -1319,7 +1447,7 @@ async function loadProvisioningOnboardingStatus() {
   if (!res.connected || !res.account) {
     badge.textContent = 'Not onboarded yet';
     delete badge.dataset.tone;
-    meta.textContent = 'Start embedded onboarding in-console or open a hosted Stripe link to activate your tenant provisioning account.';
+    meta.textContent = 'Complete verification to provision managed databases and cloud resources in your workspace.';
     return;
   }
   var acct = res.account;
@@ -1327,11 +1455,11 @@ async function loadProvisioningOnboardingStatus() {
     ? acct.configuration.developer.capabilities.projects.status
     : 'active';
   var dueList = (acct.requirements && (acct.requirements.currently_due || acct.requirements.entries)) || [];
-  badge.textContent = projStatus === 'active' ? 'Connected · ' + acct.id : 'Onboarding (' + projStatus + ') · ' + acct.id;
+  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 embedded onboarding below.'
-    : 'Stripe Accounts v2 developer.projects capability is ' + projStatus + '.';
+    ? dueList.length + ' verification requirement(s) currently due. Complete onboarding below.'
+    : 'Cloud resource provisioning is ' + projStatus + ' for this workspace.';
 }
 
 async function openEmbeddedOnboarding() {
@@ -1339,7 +1467,7 @@ async function openEmbeddedOnboarding() {
   var mount = byId('stripe-embedded-onboarding-mount');
   if (!box || !mount) return;
   box.hidden = false;
-  mount.innerHTML = '<p class="empty-note">Creating Stripe Connect v2 Account Session…</p>';
+  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,
@@ -1374,33 +1502,32 @@ async function openEmbeddedOnboarding() {
       }
       if (typeof onboardingEl.setOnExit === 'function') {
         onboardingEl.setOnExit(function () {
-          showToast('Finished Stripe Connect onboarding step');
+          showToast('Verification step saved');
           loadProvisioningOnboardingStatus().catch(function () {});
         });
       }
       mount.innerHTML = '';
       mount.appendChild(bannerEl);
       mount.appendChild(onboardingEl);
-      showToast('Mounted Stripe Connect embedded onboarding & notification banner');
+      showToast('Verification form ready');
       return;
     } catch (err) {
       console.error(err);
     }
   }
   mount.innerHTML = '<div class="result-card">' +
-    '<div class="result-head"><div><strong>Stripe Connect v2 Account Session ready</strong>' +
-    '<div class="result-meta">Account ' + esc(session.account) + ' · Component <span class="mono">account-onboarding</span></div></div>' +
+    '<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>Connected account (v2)</span><strong class="mono">' + esc(session.account) + '</strong></div>' +
-    '<div class="result-kv"><span>Collection options</span><strong class="mono">currently_due · future_requirements=include</strong></div>' +
-    '<div class="result-kv"><span>Connect.js mount</span><strong>' + (session.publishable_key ? 'Ready' : 'Set STRIPE_PUBLISHABLE_KEY for live iframe, or use Hosted Link') + '</strong></div>' +
+    '<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 hosted onboarding link</button>' +
-    '<button class="btn btn-sm" type="button" data-action="refresh-onboarding-status">Refresh account status</button>' +
+    '<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('Account session created for ' + session.account);
+  showToast('Verification session ready');
 }
 
 async function openHostedOnboardingLink() {
@@ -1412,13 +1539,11 @@ async function openHostedOnboardingLink() {
   });
   await loadProvisioningOnboardingStatus();
   if (link && link.url) {
-    showDetail('Stripe v2 Hosted Onboarding Link', link.account, {
-      account: link.account,
-      object: link.object,
+    showDetail('Verification link', 'Complete verification to provision cloud resources', {
       onboardingUrl: link.url,
       expiresAt: link.expires_at
     });
-    showToast('Generated hosted onboarding link for ' + link.account);
+    showToast('Verification link ready');
   }
 }
 async function rotateResource(name) {
@@ -1438,12 +1563,13 @@ async function pullWorkspaceEnv() {
 
 async function loadConnections(syncLive) {
   var tbody = byId('connections-tbody');
-  if (state.view === 'connections' && syncLive) tbody.innerHTML = emptyRow(5, 'Checking each provider…');
+  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);
@@ -1458,8 +1584,8 @@ async function loadConnections(syncLive) {
 }
 async function startCustomProviderConnection() {
   var input = byId('custom-provider-input');
-  var val = (input.value || '').trim().toLowerCase();
-  if (!val) { showToast('Enter an app name, like linear or jira'); input.focus(); return; }
+  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);
 }
@@ -1479,7 +1605,7 @@ async function startAppConnection(provider) {
   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));
-  if (state.view !== 'connections') navigate('connections'); else await loadConnections(false);
+  await refreshOverview();
 }
 
 function setFactsMode(mode) {
@@ -1514,7 +1640,7 @@ function renderActiveMemoryDefaults(defaults, guardrails) {
   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 active parameter defaults yet. Tell Muxo a preference above (for example, "Remember our default GitHub repo is cloudflare/workerd and region is us-east-1") and Muxo will auto-fill tool parameters automatically.</p>';
+    box.innerHTML = '<p class="empty-note">No saved workspace defaults.</p>';
     return;
   }
   var html = [];
@@ -1526,7 +1652,7 @@ function renderActiveMemoryDefaults(defaults, guardrails) {
   }
   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>Enforced across plans and remembered in Supermemory</small></div>' + pill('Active rule', 'ok', true) + '</div>';
+      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('');
@@ -1538,7 +1664,7 @@ async function teachMemoryFromUi(chipPrompt) {
   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 Supermemory');
+  showToast(res.humanMessage || 'Saved preference to workspace memory');
   await loadMemory();
   await refreshOverview();
 }
@@ -1715,15 +1841,17 @@ async function loadPlans() {
   var pending = plans.filter(function (p) { return p.approvalStatus === 'pending_approval'; }).length;
   setText('gov-pending', fmt(pending));
   setCount('nav-plan-count', pending);
-  byId('plans-tbody').innerHTML = plans.length ? plans.map(function (p) {
+  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'
-      ? '<button class="btn btn-sm btn-primary" data-action="approve-plan" data-id="' + id + '">Approve and run</button>'
+      ? 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')
-        ? '<button class="btn btn-sm" data-action="execute-plan" data-id="' + id + '">Run</button>'
-        : '<span class="small muted">' + esc(p.runId ? 'Completed' : 'Done') + '</span>';
+        ? 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>';
@@ -1734,10 +1862,23 @@ async function loadPlans() {
     if (row) {
       row.style.background = 'rgba(99, 102, 241, 0.14)';
       row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      showToast('This plan is waiting for your approval.');
+      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);
@@ -1794,7 +1935,8 @@ async function loadRuns() {
   var data = await api('/api/v1/runs');
   var runs = data.runs || [];
   setCount('nav-run-count', runs.length);
-  byId('runs-tbody').innerHTML = runs.length ? runs.map(function (r) {
+  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>' +
@@ -1822,14 +1964,16 @@ function renderSettlement(s) {
     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>';
   }
-  byId('settlement-summary-box').innerHTML = '<div class="rows">' + lane('composio_instant', 'Instant tools') + lane('composio_sdk', 'Connected apps') + lane('stripe_projects', 'Cloud services') + '</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 || [];
-  byId('ledger-tbody').innerHTML = entries.length ? entries.map(function (e) {
+  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>' +
@@ -1843,9 +1987,12 @@ async function loadByokKeys() {
   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');
-  badge.textContent = hasSupplier ? 'Your keys · 0 credits' : 'Muxo credits';
-  if (hasSupplier) badge.dataset.tone = 'accent'; else delete badge.dataset.tone;
-  byId('byok-keys-tbody').innerHTML = keys.length ? keys.map(function (k) {
+  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>' +
@@ -1902,7 +2049,7 @@ async function runNaturalLanguagePrompt() {
     }
     if (res.status === 'memory_saved') {
       renderQuickResult({
-        title: 'Saved to Active Supermemory',
+        title: 'Saved to workspace memory',
         subtitle: res.humanMessage || promptText,
         badgeHtml: statusBadge('memory_saved'),
         kv: [
@@ -1912,8 +2059,8 @@ async function runNaturalLanguagePrompt() {
         output: { activeDefaults: res.activeDefaults, facts: res.temporalFacts },
         raw: res
       });
-      setText('quick-run-status', res.humanMessage || 'Saved to Supermemory');
-      showToast(res.humanMessage || 'Saved to Supermemory');
+      setText('quick-run-status', res.humanMessage || 'Saved to workspace memory');
+      showToast(res.humanMessage || 'Saved to workspace memory');
       await refreshOverview();
       return;
     }
@@ -2091,7 +2238,9 @@ async function checkCheckoutReturn() {
 
 var ACTIONS = {
   'toggle-theme': toggleTheme,
-  'sign-out': signOut,
+  '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,
@@ -2099,12 +2248,22 @@ var ACTIONS = {
   'revoke-key': function (el) { return revokeApiKey(el.dataset.id, el.dataset.name); },
   'use-spawned': useLatestSpawnedKey,
   'claim-link': createClaimLinkPrompt,
-  'harness': function (el) { setHarnessSnippet(el.dataset.kind); },
+  '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); },
@@ -2123,6 +2282,8 @@ var ACTIONS = {
   '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); },
@@ -2130,7 +2291,7 @@ var ACTIONS = {
   'execute-plan': function (el) { return executeExistingPlan(el.dataset.id); },
   'kill-resume': resumeKillSwitch,
   'refresh-governance': loadPlans,
-  'refresh-runs': loadRuns,
+  '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); },
@@ -2151,6 +2312,7 @@ function onClick(e) {
   }
   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();
@@ -2182,14 +2344,15 @@ async function boot(initial) {
     if (err.status === 401 || err.status === 403) return;
     showError(err);
   }
-  if (initial !== 'overview' && initial !== 'setup') loadView(initial);
+  if (initial !== 'overview' && initial !== 'setup' && initial !== 'workspaces') loadView(initial);
   loadByokKeys().catch(function () {});
 }
 function init() {
-  applyTheme(document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light');
+  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);
@@ -2209,6 +2372,7 @@ function init() {
   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);
     });
@@ -2221,6 +2385,23 @@ function init() {
     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);
@@ -2231,19 +2412,37 @@ 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="light">
+<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.light.bg}" />
-  <meta name="color-scheme" content="light dark" />
+  <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" />
@@ -2254,15 +2453,14 @@ export function renderConsoleHtml() {
   <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" title="Open another workspace">
-        <span id="workspace-name">Workspace</span><span id="workspace-tier" class="tier">Free plan</span>
+      <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>
-        <a class="nav-link" href="${WEBSITE_URL}">Website</a>
-        <a class="nav-link" href="${PRICING_URL}">Pricing</a>
-        <button id="theme-toggle" class="icon-button" type="button" data-action="toggle-theme" aria-pressed="false" aria-label="Switch to dark mode">${uiIcon("sun", "theme-sun")}${uiIcon("moon", "theme-moon")}</button>
+        <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>
@@ -2274,16 +2472,10 @@ export function renderConsoleHtml() {
 
   <div id="console-shell" class="console-layout">
     <aside class="console-sidebar" aria-label="Console">
-      <nav class="nav-group" aria-label="Console">
-        <p>Console</p>
-        ${navItem("overview", "Harness onboarding", "terminal")}
-        ${navItem("setup", "API keys", "key")}
-        ${navItem("activity", "History & audit", "activity", "nav-run-count")}
-        ${navItem("billing", "Billing", "wallet")}
-      </nav>
+      ${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:2%"></span></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>
@@ -2291,86 +2483,97 @@ export function renderConsoleHtml() {
 
     <main id="main" class="console-main" tabindex="-1">
       <section class="page" data-view="overview" aria-labelledby="h-overview">
-        <header class="page-header">
-          <div>
-            <h1 id="h-overview">Connect your agent</h1>
-            <p class="lede">Attach Muxo to Claude Code, Codex, Cursor, Droid, or your own app. Configure tools, connections, memory, and guardrails directly from your agent harness.</p>
-          </div>
-          <div class="page-actions">
-            <a class="btn" href="/keys" data-nav="setup">${uiIcon("key")}Manage API keys</a>
-            <a class="btn btn-primary" href="${DOCS_URL}/quickstart">${uiIcon("book")}Quickstart</a>
+        <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">
-            <div class="metric"><p class="metric-label">Credits</p><p class="metric-value" id="kpi-credits">0</p><p class="metric-sub" id="kpi-tier-badge">Free plan</p></div>
-            <div class="metric"><p class="metric-label">Actions this month</p><p class="metric-value" id="kpi-actions">0</p><p class="metric-sub" id="kpi-actions-sub">of 1,000 included</p></div>
-            <div class="metric"><p class="metric-label">Connected</p><p class="metric-value" id="kpi-connections">0</p><p class="metric-sub">Apps and cloud services</p></div>
-            <div class="metric"><p class="metric-label">Governed runs</p><p class="metric-value" id="kpi-runs">0</p><p class="metric-sub">Each with a signed audit record</p></div>
+            <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 class="panel">
-            <div class="panel-header">
-              <div><h2>Harness setup</h2><p>Commands use this console's address and your active workspace key.</p></div>
-              <button class="btn btn-quiet" type="button" data-action="copy" data-target="mcp-config-snippet">${uiIcon("copy")}Copy</button>
-            </div>
-            <div id="harness-tabs" class="segmented" role="group" aria-label="Agent">
-              <button type="button" data-action="harness" data-kind="plugin" aria-pressed="true">Claude &amp; Codex</button>
-              <button type="button" data-action="harness" data-kind="mcp" aria-pressed="false">MCP config</button>
-              <button type="button" data-action="harness" data-kind="oauth" aria-pressed="false">CLI</button>
-              <button type="button" data-action="harness" data-kind="sdk" aria-pressed="false">TypeScript SDK</button>
-              <button type="button" data-action="harness" data-kind="mastra" aria-pressed="false">Mastra</button>
-              <button type="button" data-action="harness" data-kind="pi" aria-pressed="false">Pi</button>
-              <button type="button" data-action="harness" data-kind="curl" aria-pressed="false">HTTPS API</button>
-            </div>
-            <pre id="mcp-config-snippet" class="code" style="margin-top:16px"></pre>
+          <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="split even">
+          <div class="dashboard-layout">
             <div class="panel">
               <div class="panel-header">
-                <div><h2>Harness-first control</h2><p>Your agent manages tools, guardrails, and memory in conversation.</p></div>
-                <span class="pill" data-tone="accent">MCP + CLI</span>
+                <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 class="result-card" style="min-height:0">
-                <div class="result-body">
-                  <dl class="result-kv">
-                    <dt>Conditional guardrails</dt>
-                    <dd>Ask your agent: <code>Auto-approve expenses under $50, require my approval above $50</code></dd>
-                    <dt>Workspace memory</dt>
-                    <dd>Ask your agent: <code>Remember our default GitHub repo is cloudflare/workerd and region is us-east-1</code></dd>
-                    <dt>Connect apps</dt>
-                    <dd>Run <code>npx @muxoai/cli link github --wait</code> or ask your agent to connect GitHub, Slack, or Gmail</dd>
-                  </dl>
+              <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>
-            <div class="panel">
-              <div class="panel-header">
-                <div><h2>Recent governed runs</h2><p>Latest tool runs recorded in this workspace.</p></div>
-                <a class="btn btn-quiet" href="/activity" data-nav="activity">View history</a>
+              <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 id="recent-runs" class="rows"></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 keys &amp; access</h1>
-            <p class="lede">Create and revoke workspace keys, switch workspaces, or mint a scoped onboarding kit for your team.</p>
+            <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="split even">
+          <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>API keys</h2><p>Keys for this workspace. A new key is shown only once.</p></div>
+                <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">
@@ -2383,48 +2586,68 @@ export function renderConsoleHtml() {
             </div>
             <div class="panel">
               <div class="panel-header">
-                <div><h2>Workspaces &amp; access</h2><p>Switch between your workspaces, join a team workspace with an API key, or create a new workspace.</p></div>
-                <button class="btn btn-sm" type="button" data-action="switch-workspace">Manage workspaces</button>
+                <div><h2>Endpoints</h2><p>Use with your workspace key.</p></div>
               </div>
-              <div class="rows">
-                <div class="row"><div><strong>Current workspace</strong><small id="workspace-slug"></small></div><span id="workspace-auth-badge" class="pill">Signed in</span></div>
-                <div class="row"><div><strong>Join with a Team or Workspace API key</strong><small>Paste an <code>mk_live_...</code> key shared by a teammate or agent to add its workspace.</small></div><button class="btn btn-sm" type="button" data-action="switch-workspace">Join or switch</button></div>
-                <div class="row"><div><strong>Create an agent workspace</strong><small>Fresh workspace with 250 starter credits.</small></div><button class="btn btn-sm" type="button" data-action="spawn-agent">Create</button></div>
-                <div class="row" id="reset-workspace-row" hidden><div><strong>Stop using this key</strong><small>Forget the key saved in this browser.</small></div><button id="reset-workspace-btn" class="btn btn-sm" type="button" data-action="sign-out">Forget key</button></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 id="setup-workspaces-list" class="rows" style="margin-top:12px"></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 team with an API key</h2><p>Mint a scoped team key so another team can join this workspace (or get their own dedicated workspace) in one command via the CLI or MCP.</p></div>
-              <span class="pill" data-tone="accent">Team Onboarding</span>
+              <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="form-row" style="grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,0.9fr) auto;align-items:end">
-              <label class="field"><span>Team name</span><input id="team-onboard-name" type="text" placeholder="Platform Engineering, Growth, or Support" autocomplete="off" /></label>
-              <label class="field"><span>Workspace mode</span>
-                <select id="team-onboard-mode">
-                  <option value="shared_workspace">Shared workspace (share tools, connections &amp; memory)</option>
-                  <option value="dedicated_workspace">Dedicated workspace (isolated workspace + 250 credits)</option>
+            <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 (run &amp; plan tools)</option>
-                  <option value="admin">Admin (manage keys &amp; guardrails)</option>
-                  <option value="member">Member (standard access)</option>
+                  <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>
-              <button class="btn btn-primary" type="submit" style="min-height:40px">Generate team kit</button>
+              <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 Onboarding Kit</strong></p>
-              <div class="rows" style="margin-top:10px">
-                <div class="row"><div><strong>Team API Key</strong><small>Shown once. Scoped to this team so you can audit or revoke it anytime.</small></div><div class="row-actions"><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></div>
-                <div class="row"><div><strong>One-command CLI onboarding</strong><small>Configures Claude Code, Cursor, Codex, and local MCP automatically.</small></div><div class="row-actions"><code id="team-kit-cli" class="mono small"></code> <button class="btn btn-sm" type="button" data-action="copy" data-target="team-kit-cli">${uiIcon("copy")}Copy CLI</button></div></div>
-              </div>
+              <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>Shareable Slack / Notion onboarding instructions</summary>
+                <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>
@@ -2438,8 +2661,8 @@ export function renderConsoleHtml() {
       <section class="page" data-view="activity" aria-labelledby="h-activity" hidden>
         <header class="page-header">
           <div>
-            <h1 id="h-activity">History &amp; audit</h1>
-            <p class="lede">Read-only ledger of governed runs, signed audit records, pending approvals, and active guardrails configured via your agent harness.</p>
+            <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>
@@ -2448,7 +2671,7 @@ export function renderConsoleHtml() {
             <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">Waiting for approval</p><p class="metric-value" id="gov-pending">0</p><p class="metric-sub">Plans held by guardrails</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">
@@ -2470,7 +2693,7 @@ export function renderConsoleHtml() {
             </div>
             <div class="panel">
               <div class="panel-header">
-                <div><h2>Active guardrails &amp; memory</h2><p>Read-only view of rules and defaults set from your agent harness.</p></div>
+                <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>
@@ -2478,13 +2701,6 @@ export function renderConsoleHtml() {
               <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>
-              <details class="recall-raw">
-                <summary>Cryptographic verification keys</summary>
-                <div class="rows" style="margin-top:10px">
-                  <div class="row"><div><strong>Signing identity</strong><small id="gov-did" class="mono"></small></div></div>
-                  <div class="row"><div><strong>Public verification key</strong><small id="gov-pubkey" class="mono"></small></div></div>
-                </div>
-              </details>
             </div>
           </div>
         </div>
@@ -2529,8 +2745,8 @@ export function renderConsoleHtml() {
             </div>
           </div>
           <div class="panel">
-            <div class="panel-header"><div><h2>Bring your own keys</h2><p>Use your own model or provider keys. Runs that use them cost 0 Muxo credits. Keys are encrypted with AES-256-GCM.</p></div></div>
-            <form id="byok-form" class="form-row" style="grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:end;margin-bottom:16px">
+            <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>
@@ -2572,30 +2788,51 @@ export function renderConsoleHtml() {
   </div>
 
   <div id="auth-view" class="auth-view" hidden>
-    <div class="auth-card">
-      <div class="auth-mark">${muxoMark}</div>
-      <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 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>
-      <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" type="button" data-action="switch-workspace">${uiIcon("key")}Use an API key instead</button></div>
-      <p class="auth-foot">Setting up an agent? Run <code>npx -y @muxoai/cli@latest login --signup</code></p>
-      <p class="auth-foot"><a href="/" data-nav="overview">Back to the console</a></p>
     </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">
@@ -2639,7 +2876,7 @@ export function renderConsoleHtml() {
   <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 &amp; team access</h2><p class="tool-slug">Switch workspaces, join a team workspace with an API key, or create a new workspace.</p></div>
+        <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>
@@ -2648,18 +2885,18 @@ export function renderConsoleHtml() {
       </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 or open a workspace with an API key</span>
-          <span class="field-help">Paste a team or workspace key (<code>mk_live_...</code>) shared by your team lead or agent. Muxo links the workspace to your account and opens it immediately.</span>
+          <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="text" placeholder="mk_live_..." autocomplete="off" />
+            <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="Production Infra or Growth Team" autocomplete="off" /></label>
-          <label class="field"><span>Team label <em>optional</em></span><input id="create-workspace-team-input" type="text" placeholder="Growth Engineering" autocomplete="off" /></label>
+          <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>
@@ -2789,14 +3026,14 @@ export function renderLandingHtml() {
         ["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="light">
+<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.light.bg}" />
-  <meta name="color-scheme" content="light dark" />
+  <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>
@@ -2979,14 +3216,16 @@ const consentScript = String.raw `
 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="light">
+<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.light.bg}" />
-  <meta name="color-scheme" content="light dark" />
+  <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>
@@ -2996,17 +3235,24 @@ export function renderOAuthConsentHtml(opts) {
     if (opts.error) {
         return `${head}
   <main class="auth-view">
-    <div class="auth-card">
-      <div class="auth-mark">${muxoMark}</div>
-      <h1>${opts.claim ? "This claim link isn't valid" : "This connection link isn't valid"}</h1>
-      <p class="lede">${escapeHtml(opts.error)}</p>
-      <p class="auth-foot">${opts.claim ? "Ask the agent for a new claim link" : "Start the connection again from your app"}, or <a href="${DOCS_URL}">read the setup guide</a>.</p>
+    <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 claim = opts.claim;
     const config = {
         clerk: opts.clerk || null,
         request: opts.request || {},
@@ -3032,26 +3278,33 @@ export function renderOAuthConsentHtml(opts) {
       <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">
-      <div class="auth-mark">${muxoMark}</div>
-      ${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 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>
-          <p class="consent-switch"><button id="consent-switch" class="btn btn-quiet btn-sm" type="button">Use a different account</button></p>
+          <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>
-        <p id="consent-error" class="field-error" role="alert"></p>
       </div>
-      <p class="auth-foot">${claim ? "Only the invited email can claim this workspace, and the link works once." : "You can remove this connection anytime by deleting its key in the Muxo console."}</p>
+      <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>
@@ -3065,9 +3318,9 @@ const approvalCss = `
 .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:rgba(16,185,129,.14);color:var(--color-success,#0f9d6c)}
-.approval-risk[data-tone="warn"]{background:rgba(245,158,11,.14);color:var(--color-warning,#b45309)}
-.approval-risk[data-tone="strict"]{background:rgba(239,68,68,.14);color:var(--color-danger,#dc2626)}
+.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}
 `;
@@ -3188,10 +3441,18 @@ const approvalScript = String.raw `
       return;
     }
     if (clerk && !mounted) {
-      clerk.mountSignIn(byId('clerk-auth'), { routing: 'hash', forceRedirectUrl: here, signUpForceRedirectUrl: here });
+      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) {
@@ -3231,7 +3492,7 @@ const approvalScript = String.raw `
   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().then(function () {
+    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();
@@ -3245,13 +3506,13 @@ export function renderApprovalPageHtml(opts) {
     const planId = String(opts.planId || "");
     const config = { planId, clerk: opts.clerk || null };
     return `<!DOCTYPE html>
-<html lang="en" data-theme="light">
+<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.light.bg}" />
-  <meta name="color-scheme" content="light dark" />
+  <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>
@@ -3259,45 +3520,338 @@ export function renderApprovalPageHtml(opts) {
 </head>
 <body>
   <main class="auth-view">
-    <div class="auth-card">
-      <div class="auth-mark">${muxoMark}</div>
-      <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>
+    <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="approval-console-link" style="margin-top:10px" hidden><a href="/">Open the Muxo console</a></p>
+          <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>
-        <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>
+        <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">
-            <button id="approval-approve-run" class="btn btn-primary btn-lg" type="button">Approve and run</button>
+            <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 id="approval-done" class="approval-done" hidden></div>
-        <p id="approval-error" class="field-error" role="alert"></p>
       </div>
-      <p class="auth-foot">Muxo checks every action against your guardrails and workspace memory before it reaches you.</p>
+      <div class="oauth-card-foot">
+        <span>Secured by <strong>Muxo</strong> · Governed Agent Execution</span>
+      </div>
     </div>
   </main>
-  <script>window.MUXO_APPROVAL = ${inlineJson(config)};${approvalScript}</script>
+  <script>window.MUXO_OAUTH_CALLBACK = ${inlineJson(config)};${oauthCallbackScript}</script>
 </body>
 </html>`;
 }