madarx 2.16.2 → 2.17.0

package/app/globals.css

@@ -137,7 +137,7 @@
 .runtime-approval button.secondary{border:1px solid rgba(17,19,24,.12);background:#fff;color:#111318;}
 .runtime-approval button:disabled{opacity:.45;cursor:not-allowed;}
 .runtime-empty{border:1px dashed rgba(17,19,24,.14);border-radius:12px;padding:14px;text-align:center;font-size:12px;color:#68707b;background:#fafbfc;}
-.fresh-workspace{position:absolute;inset:56px 14px 70px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);gap:14px;align-items:stretch;}
+.fresh-workspace{position:absolute;inset:0 14px 70px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);gap:14px;align-items:stretch;}
 .fresh-hero,.fresh-status{border:1px solid rgba(255,255,255,.80);background:rgba(255,255,255,.72);backdrop-filter:blur(18px);box-shadow:0 22px 64px rgba(37,36,34,.15);border-radius:28px;}
 .fresh-hero{padding:44px;display:flex;flex-direction:column;justify-content:center;min-height:0;}
 .fresh-hero small{letter-spacing:.18em;text-transform:uppercase;color:#8a6d35;font-weight:800;font-size:11px;}
@@ -150,7 +150,7 @@
 .fresh-status div{border:1px solid rgba(20,22,26,.07);background:linear-gradient(180deg,#fff,rgba(247,247,245,.88));border-radius:20px;padding:18px;}
 .fresh-status b{display:block;font-size:48px;letter-spacing:-.06em;}
 .fresh-status span{display:block;text-transform:uppercase;letter-spacing:.14em;color:#6c747f;font-size:11px;font-weight:800;}
-@media(max-width:980px){.fresh-workspace{position:relative;inset:auto;margin:64px 12px 12px;grid-template-columns:1fr}.fresh-hero{padding:28px}.fresh-status{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:980px){.fresh-workspace{position:relative;inset:auto;margin:12px;grid-template-columns:1fr}.fresh-hero{padding:28px}.fresh-status{grid-template-columns:repeat(2,1fr)}}
 
 .fresh-workspace{grid-template-columns:1fr;}
 .fresh-hero.full-width{max-width:none;}
@@ -366,7 +366,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .dock-item-menu-divider{height:1px;background:rgba(17,19,24,.08);margin:4px 4px;}
 
 /* === Building card — shown while agent creates the first artifact === */
-.building-card-wrap{position:absolute;inset:64px 14px 14px;animation:building-enter .38s cubic-bezier(.32,.72,0,1) both;}
+.building-card-wrap{position:absolute;inset:0 14px 14px;animation:building-enter .38s cubic-bezier(.32,.72,0,1) both;}
 @keyframes building-enter{from{opacity:0;transform:translateY(16px) scale(.982)}to{opacity:1;transform:translateY(0) scale(1)}}
 .building-card{width:100%;height:100%;border-radius:22px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.88);box-shadow:0 22px 64px rgba(32,34,38,.20);overflow:hidden;display:flex;flex-direction:column;position:relative;}
 .building-card::before{content:'';position:absolute;inset:0;background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.52) 50%,transparent 66%);animation:card-sweep 2.6s ease-in-out infinite;pointer-events:none;z-index:10;}
@@ -427,7 +427,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .artifact-kind-badge.markdown{background:#f0fdf4;color:#166534;}
 
 /* Canvas board — free-positioning surface for artifact windows (macOS-style) */
-.canvas-board{position:absolute;inset:56px 0 70px;overflow:auto;overscroll-behavior:contain;z-index:1;transition:opacity .22s cubic-bezier(.32,.72,0,1),transform .22s cubic-bezier(.32,.72,0,1),filter .22s ease;}
+.canvas-board{position:absolute;inset:0 0 70px;overflow:auto;overscroll-behavior:contain;z-index:1;transition:opacity .22s cubic-bezier(.32,.72,0,1),transform .22s cubic-bezier(.32,.72,0,1),filter .22s ease;}
 .canvas-board--docked{padding-bottom:0;}
 
 /* Space switching — outgoing fade-and-lift; incoming relies on artifact-enter keyframes */
@@ -3564,6 +3564,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .app-shell {
   display: grid;
   grid-template-columns: 64px 1fr;
+  grid-template-rows: auto 1fr; /* row 1: persistent top toolbar (spans), row 2: rail + content */
   gap: 10px;
   padding: 10px;
   height: 100vh;
@@ -3571,6 +3572,108 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
   background: #f4f3f0;
   overflow: hidden;
 }
+/* Persistent macOS-style top toolbar. Lives in the root layout via AppChrome so
+   it stays mounted on every non-chromeless page. */
+.app-topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 13px;
+  background: var(--glass, rgba(255,255,255,.78));
+  border: 1px solid rgba(255,255,255,.8);
+  box-shadow: 0 8px 24px rgba(17,19,24,.08), inset 0 1px 0 rgba(255,255,255,.6);
+  backdrop-filter: saturate(160%) blur(14px);
+  -webkit-backdrop-filter: saturate(160%) blur(14px);
+  font-size: 12px;
+  color: #4a5059;
+  user-select: none;
+}
+.app-topbar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
+.app-topbar-brand {
+  font-family: var(--font-mono-brand, 'IBM Plex Mono', monospace);
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: -.02em;
+  color: #111318;
+}
+.app-topbar-brand b { color: var(--accent-500); font-weight: 500; }
+.app-topbar-sep { width: 1px; height: 16px; background: var(--line, rgba(20,22,26,.12)); }
+.app-topbar-section {
+  font-weight: 700;
+  letter-spacing: -.01em;
+  color: #1c1f25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-topbar-right { display: flex; align-items: center; gap: 10px; }
+/* Page-scoped action slot (dashboard portals its canvas controls here). */
+.app-topbar-slot { display: flex; align-items: center; }
+.app-topbar-slot:empty { display: none; }
+.app-topbar-actions { display: flex; align-items: center; gap: 8px; }
+.app-topbar-actions::after {
+  content: '';
+  width: 1px;
+  height: 18px;
+  background: var(--line, rgba(20,22,26,.12));
+  margin: 0 2px;
+}
+.app-topbar-activity {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #69707a;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: rgba(17,19,24,.04);
+}
+.app-topbar-dot { width: 7px; height: 7px; border-radius: 50%; background: #c2c7cd; flex: 0 0 auto; }
+.app-topbar-activity.is-running { color: var(--accent-700, #7c2b19); background: var(--accent-50, #fdf2ef); }
+.app-topbar-activity.is-running .app-topbar-dot {
+  background: var(--accent-500, #c2452a);
+  box-shadow: 0 0 0 3px rgba(194,69,42,.18);
+  animation: topbarPulse 1.4s ease-in-out infinite;
+}
+@keyframes topbarPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+}
+.app-topbar-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--line, rgba(20,22,26,.12));
+  border-radius: 9px;
+  background: #fff;
+  color: #515760;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color .14s ease, box-shadow .14s ease;
+}
+.app-topbar-search:hover { border-color: rgba(20,22,26,.24); box-shadow: 0 2px 8px rgba(17,19,24,.08); }
+.app-topbar-search kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-family: var(--font-mono-brand, ui-monospace, monospace);
+  font-size: 10px;
+  color: #8a9099;
+  background: rgba(17,19,24,.05);
+  border-radius: 5px;
+  padding: 2px 4px;
+}
+@media (max-width: 980px) {
+  .app-topbar-brand, .app-topbar-sep { display: none; }
+  .app-topbar-search span { display: none; }
+}
 .app-rail {
   min-width: 0;
   height: 100%;
@@ -3668,8 +3771,8 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .login-wordmark{font:500 22px/1 var(--font-mono-brand,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:-.06em;color:#E8E8E5;position:relative;z-index:1;}.login-wordmark span{color:#C2452A;}
 .login-kicker{margin:72px 0 16px;color:#DCDCD8;text-transform:uppercase;letter-spacing:.18em;font-size:11px;position:relative;z-index:1;}.login-hero-panel h1{font-size:clamp(48px,7.8vw,104px);line-height:.88;letter-spacing:-.09em;max-width:960px;margin:0;color:#E8E8E5;position:relative;z-index:1;}.login-lede{max-width:690px;margin:28px 0 0;color:#BEBEB9;line-height:1.75;font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;position:relative;z-index:1;}
 .login-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:56px;border:1px solid rgba(232,232,229,.10);position:relative;z-index:1;}.login-proof-grid div{padding:18px;background:rgba(232,232,229,.035);}.login-proof-grid b{display:block;color:#E8E8E5;font-size:12px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em;}.login-proof-grid span{display:block;color:#A9AAA5;font:13px/1.55 ui-sans-serif,system-ui,sans-serif;}
-.login-card{padding:clamp(24px,5vw,56px);display:flex;flex-direction:column;justify-content:center;min-height:100vh;border-left:1px solid rgba(232,232,229,.10);}.login-card-head p{margin:0 0 10px;color:#C2452A;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;}.login-card-head h2{margin:0 0 24px;color:#E8E8E5;font-size:28px;letter-spacing:-.05em;}.login-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(232,232,229,.12);border-radius:16px;background:rgba(232,232,229,.04);margin-bottom:18px;}.login-mode-toggle button{border:0;border-radius:12px;background:transparent;color:#A9AAA5;padding:10px 12px;cursor:pointer;font-weight:800;}.login-mode-toggle button.active{background:#E8E8E5;color:#0F0F11;}.login-message{border-left:2px solid #C2452A;background:rgba(194,69,42,.10);padding:12px 14px;margin-bottom:16px;color:#E8E8E5;font:13px/1.45 ui-sans-serif,system-ui,sans-serif;}.login-form{display:grid;gap:14px;}.login-form label{display:grid;gap:8px;color:#DCDCD8;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;}.login-sso{display:grid;gap:10px;margin-top:18px;}.login-sso>span{display:flex;align-items:center;gap:12px;color:#8D8E8A;font-size:11px;text-transform:uppercase;letter-spacing:.12em;}.login-sso>span::before,.login-sso>span::after{content:'';height:1px;background:rgba(232,232,229,.12);flex:1;}.login-footnote{margin:22px 0 0;color:#8D8E8A;font:12px/1.65 ui-sans-serif,system-ui,sans-serif;}.login-local-card{min-height:100vh;display:grid;place-content:center;padding:36px;text-align:center;}.login-local-card h1{font-size:42px;letter-spacing:-.07em;margin:22px 0 12px;}.login-local-card p{max-width:560px;color:#BEBEB9;font:15px/1.7 ui-sans-serif,system-ui,sans-serif;}.login-link-button{display:inline-flex;align-items:center;gap:8px;justify-content:center;margin:24px auto 0;padding:12px 16px;border-radius:14px;background:#E8E8E5;color:#0F0F11;text-decoration:none;font-weight:850;}
-.login-link-button--ghost{margin-top:12px;background:transparent;color:#E8E8E5;border:1px solid rgba(232,232,229,.18);}
+.login-card{padding:clamp(24px,5vw,56px);display:flex;flex-direction:column;justify-content:center;min-height:100vh;border-left:1px solid rgba(232,232,229,.10);}.login-card-head p{margin:0 0 10px;color:#C2452A;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;}.login-card-head h2{margin:0 0 24px;color:#E8E8E5;font-size:28px;letter-spacing:-.05em;}.login-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(232,232,229,.12);border-radius:8px;background:rgba(232,232,229,.04);margin-bottom:18px;}.login-mode-toggle button{border:0;border-radius:5px;background:transparent;color:#A9AAA5;padding:10px 12px;cursor:pointer;font-family:var(--font-mono-brand,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;transition:background .14s ease,color .14s ease,box-shadow .14s ease;}.login-mode-toggle button.active{background:rgba(194,69,42,.14);color:#E8E8E5;box-shadow:inset 0 0 0 1px rgba(194,69,42,.5);}.login-message{border-left:2px solid #C2452A;background:rgba(194,69,42,.10);padding:12px 14px;margin-bottom:16px;color:#E8E8E5;font:13px/1.45 ui-sans-serif,system-ui,sans-serif;}.login-form{display:grid;gap:14px;}.login-form label{display:grid;gap:8px;color:#DCDCD8;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;}.login-sso{display:grid;gap:10px;margin-top:18px;}.login-sso>span{display:flex;align-items:center;gap:12px;color:#8D8E8A;font-size:11px;text-transform:uppercase;letter-spacing:.12em;}.login-sso>span::before,.login-sso>span::after{content:'';height:1px;background:rgba(232,232,229,.12);flex:1;}.login-footnote{margin:22px 0 0;color:#8D8E8A;font:12px/1.65 ui-sans-serif,system-ui,sans-serif;}.login-local-card{min-height:100vh;display:grid;place-content:center;padding:36px;text-align:center;}.login-local-card h1{font-size:42px;letter-spacing:-.07em;margin:22px 0 12px;}.login-local-card p{max-width:560px;color:#BEBEB9;font:15px/1.7 ui-sans-serif,system-ui,sans-serif;}.login-link-button{display:inline-flex;align-items:center;gap:10px;justify-content:center;margin:24px auto 0;padding:13px 20px;border-radius:4px;background:#C2452A;color:#fff;text-decoration:none;font-family:var(--font-mono-brand,'IBM Plex Mono',ui-monospace,monospace);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;transition:opacity .15s ease;}.login-link-button:hover{opacity:.86;}
+.login-link-button--ghost{margin-top:12px;background:transparent;color:#C2452A;border:1px solid rgba(194,69,42,.4);}.login-link-button--ghost:hover{opacity:1;background:rgba(194,69,42,.1);border-color:#C2452A;}
 .login-message--warn{border-left-color:#C2452A;background:rgba(194,69,42,.08);}
 .login-message--warn code,.login-local-card code{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#E8E8E5;background:rgba(232,232,229,.10);padding:1px 6px;border-radius:6px;}
 .login-env-block{text-align:left;max-width:560px;margin:18px auto;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.34);border:1px solid rgba(232,232,229,.12);color:#DCDCD8;font:600 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-x:auto;}
@@ -3677,9 +3780,9 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .login-text-button{background:none;border:0;padding:0;color:#C2452A;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;}
 .login-text-button:disabled{opacity:.6;cursor:default;}
 /* Personal vs Team chooser (top of the login card) */
-.login-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(232,232,229,.12);border-radius:16px;background:rgba(232,232,229,.04);margin-bottom:22px;}
-.login-seg button{border:0;border-radius:12px;background:transparent;color:#A9AAA5;padding:11px 12px;cursor:pointer;font-weight:800;letter-spacing:-.01em;transition:background .14s ease,color .14s ease;}
-.login-seg button.active{background:#E8E8E5;color:#0F0F11;}
+.login-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(232,232,229,.12);border-radius:8px;background:rgba(232,232,229,.04);margin-bottom:22px;}
+.login-seg button{border:0;border-radius:5px;background:transparent;color:#A9AAA5;padding:11px 12px;cursor:pointer;font-family:var(--font-mono-brand,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;transition:background .14s ease,color .14s ease,box-shadow .14s ease;}
+.login-seg button.active{background:rgba(194,69,42,.14);color:#E8E8E5;box-shadow:inset 0 0 0 1px rgba(194,69,42,.5);}
 /* Join-with-a-link row (Team view) */
 .login-join{margin-top:22px;padding-top:18px;border-top:1px solid rgba(232,232,229,.10);}
 .login-join-label{display:block;color:#8D8E8A;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:10px;}
@@ -3687,6 +3790,13 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 /* Inline Create-a-team form (Team view, fresh install) */
 .login-create-team{margin-top:2px;}
 .login-create-actions{display:flex;gap:8px;align-items:stretch;}
+/* Marketing-matched buttons (madarx.io): solid Mars primary, Mars-outline secondary, uppercase mono, crisp corners */
+.login-btn{width:100%;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:0;border-radius:4px;background:#C2452A;color:#fff;font-family:var(--font-mono-brand,'IBM Plex Mono',ui-monospace,monospace);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;transition:opacity .15s ease,background .15s ease,border-color .15s ease;}
+.login-btn:hover:not(:disabled){opacity:.86;}
+.login-btn:disabled{opacity:.5;cursor:default;}
+.login-btn--ghost{background:transparent;color:#C2452A;border:1px solid rgba(194,69,42,.4);}
+.login-btn--ghost:hover:not(:disabled){opacity:1;background:rgba(194,69,42,.1);border-color:#C2452A;}
+.login-btn--inline{width:auto;flex:0 0 auto;}
 .auth-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
 .auth-mode-toggle button{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid rgba(20,22,26,.14);background:#fff;color:#313740;font-weight:700;cursor:pointer;transition:border-color 140ms ease,background 140ms ease;}
 .auth-mode-toggle button small{font-weight:450;color:#737a85;font-size:11.5px;}

package/app/login/login-client.jsx

@@ -17,15 +17,9 @@ const inputStyle = {
   border: '1px solid rgba(232,232,229,.18)', background: 'rgba(255,255,255,.06)',
   color: '#E8E8E5', outline: 'none', fontSize: 14,
 };
-const buttonStyle = {
-  width: '100%', minHeight: 46, border: 0, borderRadius: 14,
-  background: '#E8E8E5', color: '#0F0F11', fontWeight: 800,
-  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
-  cursor: 'pointer', letterSpacing: '-0.01em',
-};
-const secondaryButtonStyle = {
-  ...buttonStyle, background: 'rgba(232,232,229,.06)', color: '#E8E8E5', border: '1px solid rgba(232,232,229,.16)',
-};
+// Button visuals live in globals.css (.login-btn / --ghost / --inline) so they can
+// carry hover + disabled states. Marketing-matched: solid Mars red primary, Mars
+// outline secondary, uppercase mono labels, crisp corners.
 
 export default function LoginClient({ authMode, nextPath = '/', errorCode = '', forceSupabase = false, initialView = '' }) {
   const isLocalServer = authMode === 'local';
@@ -159,8 +153,21 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
 
   async function supabaseClient() {
     const { createBrowserClient } = await import('@supabase/ssr');
-    const url = cfg?.supabaseUrl;
-    const anonKey = cfg?.supabaseAnonKey;
+    let url = cfg?.supabaseUrl;
+    let anonKey = cfg?.supabaseAnonKey;
+    // cfg is fetched once on mount. If that fetch lost the race (server not yet
+    // able to resolve config, or a transient blip), cfg stays empty and the tab
+    // is stranded until a manual refresh. Refetch on demand before failing.
+    if (!url || !anonKey) {
+      try {
+        const d = await fetch('/api/auth/config', { cache: 'no-store' }).then((r) => r.json());
+        setCfg(d);
+        url = d?.supabaseUrl;
+        anonKey = d?.supabaseAnonKey;
+      } catch {
+        /* fall through to the configured-check below */
+      }
+    }
     if (!url || !anonKey) throw new Error('Supabase is not configured. Create a team or set it in Settings → Account.');
     return createBrowserClient(url, anonKey);
   }
@@ -230,7 +237,7 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
               <input style={inputStyle} type="text" value={recoveryToken} onChange={(e) => setRecoveryToken(e.target.value)} placeholder="paste recovery token" autoComplete="off" />
             </label>
             <span className="login-footnote" style={{ marginTop: 0 }}>Found in <code>data/.auth-recovery-token</code> on the server machine.</span>
-            <button type="button" style={{ ...buttonStyle, opacity: resetting ? .65 : 1 }} disabled={resetting} onClick={resetToLocal}>
+            <button type="button" className="login-btn" disabled={resetting} onClick={resetToLocal}>
               {resetting ? 'Switching…' : 'Switch to personal mode'}
             </button>
           </div>
@@ -258,13 +265,13 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
         <form onSubmit={signIn} className="login-form">
           <label>Email<input style={inputStyle} type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" autoComplete="email" required /></label>
           {mode === 'password' ? <label>Password<input style={inputStyle} type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" autoComplete="current-password" required /></label> : null}
-          <button type="submit" disabled={loading} style={{ ...buttonStyle, opacity: loading ? .65 : 1 }}>{loading ? 'Working...' : mode === 'password' ? 'Sign in' : 'Send magic link'} {!loading ? <IconArrowRight /> : null}</button>
+          <button type="submit" className="login-btn" disabled={loading}>{loading ? 'Working...' : mode === 'password' ? 'Sign in' : 'Send magic link'} {!loading ? <IconArrowRight /> : null}</button>
         </form>
         {(process.env.NEXT_PUBLIC_GOOGLE_SSO_ENABLED === 'true' || process.env.NEXT_PUBLIC_MICROSOFT_SSO_ENABLED === 'true') ? (
           <div className="login-sso">
             <span>or continue with</span>
-            {process.env.NEXT_PUBLIC_GOOGLE_SSO_ENABLED === 'true' ? <button type="button" onClick={() => sso('google')} style={secondaryButtonStyle}><IconGoogle /> Google</button> : null}
-            {process.env.NEXT_PUBLIC_MICROSOFT_SSO_ENABLED === 'true' ? <button type="button" onClick={() => sso('azure')} style={secondaryButtonStyle}><IconMicrosoft /> Microsoft</button> : null}
+            {process.env.NEXT_PUBLIC_GOOGLE_SSO_ENABLED === 'true' ? <button type="button" onClick={() => sso('google')} className="login-btn login-btn--ghost"><IconGoogle /> Google</button> : null}
+            {process.env.NEXT_PUBLIC_MICROSOFT_SSO_ENABLED === 'true' ? <button type="button" onClick={() => sso('azure')} className="login-btn login-btn--ghost"><IconMicrosoft /> Microsoft</button> : null}
           </div>
         ) : null}
       </>
@@ -281,8 +288,8 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
         <label>Anon key<input style={inputStyle} type="text" value={ct.anonKey} onChange={(e) => setCt((s) => ({ ...s, anonKey: e.target.value }))} placeholder="eyJ…" autoComplete="off" required /></label>
         <label>Service-role key<input style={inputStyle} type="password" value={ct.serviceKey} onChange={(e) => setCt((s) => ({ ...s, serviceKey: e.target.value }))} placeholder="eyJ… (kept server-side)" autoComplete="off" required /></label>
         <div className="login-create-actions">
-          <button type="button" style={{ ...secondaryButtonStyle, width: 'auto', flex: '0 0 auto', padding: '0 16px' }} disabled={Boolean(ctBusy)} onClick={testTeam}>{ctBusy === 'test' ? 'Testing…' : 'Test'}</button>
-          <button type="submit" style={{ ...buttonStyle, opacity: ctBusy ? .65 : 1 }} disabled={Boolean(ctBusy)}>{ctBusy === 'save' ? 'Creating…' : 'Create team'} {!ctBusy ? <IconArrowRight /> : null}</button>
+          <button type="button" className="login-btn login-btn--ghost login-btn--inline" disabled={Boolean(ctBusy)} onClick={testTeam}>{ctBusy === 'test' ? 'Testing…' : 'Test'}</button>
+          <button type="submit" className="login-btn" disabled={Boolean(ctBusy)}>{ctBusy === 'save' ? 'Creating…' : 'Create team'} {!ctBusy ? <IconArrowRight /> : null}</button>
         </div>
       </form>
     );
@@ -299,7 +306,7 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
           <span className="login-join-label">Have an invite link?</span>
           <form className="login-join-row" onSubmit={joinWithLink}>
             <input style={inputStyle} type="text" value={inviteLink} onChange={(e) => setInviteLink(e.target.value)} placeholder="paste invite link" autoComplete="off" />
-            <button type="submit" style={{ ...secondaryButtonStyle, width: 'auto', flex: '0 0 auto', padding: '0 18px', whiteSpace: 'nowrap' }}>Join</button>
+            <button type="submit" className="login-btn login-btn--ghost login-btn--inline">Join</button>
           </form>
         </div>
 
@@ -340,13 +347,13 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
           </svg>
           <div className="login-wordmark">madar<span>X</span> OS</div>
         </div>
-        <p className="login-kicker">Institutional agent control plane</p>
-        <h1>AI generates. Humans approve. Regulators can inspect.</h1>
-        <p className="login-lede">Run it personally on your machine, or set up an organization boundary with Supabase and share generated HTML artifacts through signed, expiring access links.</p>
+        <p className="login-kicker">Core operating layer</p>
+        <h1>AI does the work. You hold the controls.</h1>
+        <p className="login-lede">madarX OS is the operating layer for AI-run operations. Agents draft, plan, and execute &mdash; every consequential action waits for a human, and nothing happens off the record.</p>
         <div className="login-proof-grid">
-          <div><b>Personal or team</b><span>Local-first by default. Add Supabase when you want an org.</span></div>
-          <div><b>Artifact ACLs</b><span>Private, organization, team-ready, and link-scoped controls.</span></div>
-          <div><b>Audit ledger</b><span>Share creation, access, and revocation are recorded.</span></div>
+          <div><b>Human in the loop</b><span>Agents propose. People approve. The HAIL methodology, built in.</span></div>
+          <div><b>One operating logic</b><span>Workflows, governance, and orchestration in a single layer.</span></div>
+          <div><b>Every action logged</b><span>Nothing is inferred. Creation, access, and approval are recorded.</span></div>
         </div>
       </section>
       <section className="login-card" aria-label="Sign in">

package/lib/active-runs.js

@@ -0,0 +1,33 @@
+// In-process registry of agents with a LIVE manual/on-demand run.
+//
+// Manual runs triggered via POST /api/agents/[id]/run are fire-and-forget
+// promises inside the web process — they create NO `agent_runs` row (those are
+// for delegated/task runs), so there is no DB source of truth for "is this
+// agent running right now?". This module is that source for the current process.
+//
+// Scope + lifetime: process-local and best-effort. It answers the active-run
+// endpoint so the Run button can hydrate correct state after the user navigates
+// away and back within the same server process. It is intentionally NOT durable
+// (a restart clears it) — durable run tracking is the heartbeat-queue path.
+//
+// A ref count (not a boolean) tolerates overlapping ticks for the same agent.
+
+const counts = new Map();
+
+export function markRunActive(agentId) {
+  const id = String(agentId || '');
+  if (!id) return;
+  counts.set(id, (counts.get(id) || 0) + 1);
+}
+
+export function clearRunActive(agentId) {
+  const id = String(agentId || '');
+  if (!id) return;
+  const next = (counts.get(id) || 0) - 1;
+  if (next <= 0) counts.delete(id);
+  else counts.set(id, next);
+}
+
+export function isRunActive(agentId) {
+  return (counts.get(String(agentId || '')) || 0) > 0;
+}

package/lib/agent-config.js

@@ -1,6 +1,7 @@
 import { getDb } from './db.js';
 import { hasEnabledInternetTools } from './tools/registry.js';
 import { brandInstructionText, getBrandProfile } from './brand.js';
+import { commandExists } from './agent-engines.js';
 
 // Role description: user-editable identity/persona block. The dashboard's
 // InstructionsBuilder and /settings page both write to this. Replacing it
@@ -232,14 +233,6 @@ export const MODELS = ANTHROPIC_MODELS;
 
 const OLLAMA_BASE_URL = process.env.OLLAMA_BASE_URL || 'http://127.0.0.1:11434';
 
-async function commandExists(command) {
-  const { spawn } = await import('node:child_process');
-  return new Promise(resolve => {
-    const child = spawn('sh', ['-lc', `command -v ${command}`], { shell: false });
-    child.on('error', () => resolve(false));
-    child.on('close', code => resolve(code === 0));
-  });
-}
 
 export async function getModels() {
   const [ollamaRes, claudeCodeOk, codexOk] = await Promise.all([

package/lib/agent-engines.js

@@ -271,7 +271,13 @@ function commandSpawnTarget(command) {
   return _commandPathCache.get(command) || resolveCommandPathSync(command) || command;
 }
 
-async function commandExists(command) {
+// Exported so other surfaces (e.g. the main-chat model feed in agent-config.js)
+// use the SAME robust detection as /settings/engines — absolute-path candidates
+// + MADARX_<CMD>_BIN override + login-shell fallback. A bare `sh -lc command -v`
+// alone misses CLIs installed outside the server's inherited/login PATH (common
+// on GUI- or daemon-launched servers), which made claude-code show available in
+// engine settings but absent from the main chat picker.
+export async function commandExists(command) {
   if (resolveCommandPathSync(command)) return true;
   return new Promise(resolve => {
     const child = spawn('sh', ['-lc', `command -v ${command}`], { shell: false });

package/lib/agent-runner.js

@@ -10,6 +10,7 @@ import { executeRegistryTool, getEnabledToolSchemasForAgent } from './tools/regi
 import { assertRunnable } from './engine-capabilities.js';
 import { looksFabricatedToolTranscript } from './fabricated-tool-output.js';
 import { publishLiveEvent } from './live-events.js';
+import { markRunActive, clearRunActive } from './active-runs.js';
 import {
   addTaskComment,
   appendAgentRunEvent,
@@ -363,6 +364,11 @@ export async function runAgentTick(agentOrId, {
     updateTask(task_id, { status: 'in_progress', actor_type: 'agent', actor_id: agent.id });
   }
 
+  // Mark this agent as having a live run so GET /api/agents/[id]/active-run can
+  // report it — manual runs have no agent_runs row to read from. Cleared in the
+  // finally below regardless of outcome.
+  markRunActive(agent.id);
+
   publishLiveEvent({
     type: 'agent_run_start',
     agent_id: agent.id,
@@ -610,6 +616,34 @@ ${lastMemory.length ? lastMemory.map((entry, index) => `${index + 1}. ${entry}`)
       try {
         markAgentRunFinished(taskRun.id, { status: 'failed', error: message });
       } catch {}
+    } else {
+      // Manual / on-demand run (no taskRun). The success path persists a `runs`
+      // row + audit, but this failure path historically did neither — so a
+      // failed manual run vanished (console-only) and the agent's activity feed
+      // stayed empty ("nothing happened"). Persist a FAILED run + audit carrying
+      // the remediation message and the error code so the failure — and how to
+      // fix it (e.g. engine_cannot_run_tools → switch engine) — is visible.
+      try {
+        const { recordRun, appendAudit } = await import('./runtime.js');
+        recordRun({
+          kind: 'agent-tick',
+          title: `${agent.name} run failed`,
+          agent: agent.name,
+          agent_id: agent.id,
+          status: 'failed',
+          preview: message,
+          output: message,
+          triggered_by,
+        });
+        appendAudit({
+          type: 'agent.run.failed',
+          summary: `${agent.name} run failed: ${message}`,
+          status: 'error',
+          meta: { agent_id: agent.id, code: err?.code || null, triggered_by },
+        });
+      } catch {
+        // Failure recording is best-effort — never mask the original error.
+      }
     }
     // Always publish run_complete on the error path so the OCC entry clears,
     // regardless of whether a taskRun was attached (on-demand runs via the
@@ -626,5 +660,7 @@ ${lastMemory.length ? lastMemory.map((entry, index) => `${index + 1}. ${entry}`)
       error: message,
     });
     throw err;
+  } finally {
+    clearRunActive(agent.id);
   }
 }

package/lib/auth.js

@@ -26,14 +26,26 @@ export { getAuthMode, getSupabaseAuthConfig, getSupabaseServiceKey } from './aut
 
 const IS_NEXT_PRODUCTION_BUILD = process.env.NEXT_PHASE === 'phase-production-build';
 
-// Deploy-time guard keys off the explicit env value only (the DB may not be
-// open at module load, and the env override is the production source of truth).
-if (
-  (process.env.MADARX_AUTH_MODE || 'local').toLowerCase() === 'local' &&
-  process.env.NODE_ENV === 'production' &&
-  !IS_NEXT_PRODUCTION_BUILD
-) {
-  console.error('[auth] WARNING: MADARX_AUTH_MODE is not set to supabase in NODE_ENV=production. Configure Supabase auth (Settings → Account) or set MADARX_AUTH_MODE=supabase before exposing this deployment.');
+// Deploy-time guard. Deferred to first session resolution (not module load) so
+// it can consult the EFFECTIVE auth mode via getAuthMode() — which resolves the
+// env override AND the UI-persisted DB config. Checking the env var alone at
+// module load false-alarms whenever Supabase was configured from Settings → the
+// DB isn't open yet at import time, so the env looked 'local' even though the
+// running mode is 'supabase'. One-shot.
+let _authModeWarned = false;
+function warnIfUnsafeAuthModeOnce() {
+  if (_authModeWarned) return;
+  _authModeWarned = true;
+  if (IS_NEXT_PRODUCTION_BUILD || process.env.NODE_ENV !== 'production') return;
+  let mode;
+  try {
+    mode = getAuthMode(); // env override → DB config → 'local'
+  } catch {
+    mode = (process.env.MADARX_AUTH_MODE || 'local').toLowerCase();
+  }
+  if (mode === 'local') {
+    console.error('[auth] WARNING: auth mode is local in NODE_ENV=production. Configure Supabase auth (Settings → Account) or set MADARX_AUTH_MODE=supabase before exposing this deployment.');
+  }
 }
 
 // ── Local dev synthetic user ──────────────────────────────────────────────────
@@ -329,6 +341,7 @@ function _upsertUserRow(sbUser) {
  * - supabase mode: reads Supabase session cookie; returns null if unauthenticated.
  */
 export async function getSession(req, { _client } = {}) {
+  warnIfUnsafeAuthModeOnce();
   if (getAuthMode() === 'local') {
     return getLocalDevUser();
   }

package/lib/heartbeat-worker.js

@@ -132,7 +132,11 @@ async function executeTask(task) {
     });
   }
   return runAgentTick(payload.agent_id || task.agent_id, {
-    triggered_by: 'heartbeat-worker',
+    // Honor the enqueuer's provenance (e.g. a manual run from the dashboard sets
+    // triggered_by:'manual') so the recorded run + audit reflect why it ran,
+    // instead of flattening every queued tick to 'heartbeat-worker'.
+    triggered_by: payload.triggered_by || 'heartbeat-worker',
+    wake_reason: payload.reason || null,
     acting_on_behalf_of_user_id: actingUserId,
     heartbeat_task_id: task.id,
   });

package/lib/tts.js

@@ -1,6 +1,7 @@
 // Text-to-speech domain layer.
 //
-// Providers: 'openai' (default — uses `tts-1` / `tts-1-hd`) and 'elevenlabs'.
+// Providers: 'openai' (default — uses `tts-1` / `tts-1-hd`), 'elevenlabs',
+// and 'local' (env-driven HTTP slot for self-hosted engines such as MisoTTS).
 // Returns the raw audio buffer plus mime metadata. When `save_to_disk` is
 // requested AND a project_id is supplied, writes an artifact under
 // data/disk/<project>/voice/ mirroring the transcribeFile pattern.
@@ -16,7 +17,7 @@ import { wrapFetch } from './egress.js';
 import { uploadFile, getRootFolder, createFolder } from './disk.js';
 import { getProject } from './projects.js';
 
-export const TTS_PROVIDERS = ['openai', 'elevenlabs'];
+export const TTS_PROVIDERS = ['openai', 'elevenlabs', 'local'];
 export const DEFAULT_OPENAI_TTS_MODEL = 'tts-1';
 export const DEFAULT_OPENAI_VOICE = 'alloy';
 export const DEFAULT_ELEVENLABS_MODEL = 'eleven_multilingual_v2';
@@ -24,6 +25,11 @@ export const DEFAULT_ELEVENLABS_VOICE_ID = '21m00Tcm4TlvDq8ikWAM'; // Rachel —
 
 const OPENAI_VOICES = new Set(['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer']);
 
+function localTtsUrl() {
+  const value = process.env.MADARX_LOCAL_TTS_URL;
+  return value && /^https?:\/\//i.test(value.trim()) ? value.trim() : null;
+}
+
 function ensureVoiceFolder(projectId) {
   const db = getDb();
   const root = getRootFolder(projectId);
@@ -130,12 +136,75 @@ async function synthesizeElevenLabs({ text, voice, model, format, fetchFn }) {
   };
 }
 
+async function synthesizeLocal({ text, voice, model, format, fetchFn }) {
+  const url = localTtsUrl();
+  if (!url) throw new Error('MADARX_LOCAL_TTS_URL missing for local TTS');
+  const useFormat = format || 'wav';
+  const useModel = model || process.env.MADARX_LOCAL_TTS_MODEL || 'local';
+  const useVoice = voice || process.env.MADARX_LOCAL_TTS_VOICE || 'default';
+
+  let res;
+  try {
+    res = await fetchFn(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: useFormat === 'mp3' ? 'audio/mpeg,application/json' : 'audio/wav,audio/*,application/json',
+      },
+      body: JSON.stringify({
+        text,
+        voice: useVoice,
+        model: useModel,
+        format: useFormat,
+      }),
+    });
+  } catch (err) {
+    throw new Error(`local tts failed: ${maskMessage(err?.message)}`);
+  }
+  if (!res.ok) {
+    let detail = '';
+    try { detail = (await res.text()).slice(0, 256); } catch {}
+    throw new Error(`local tts http ${res.status}: ${detail}`);
+  }
+
+  const contentType = String(res.headers.get('content-type') || '').toLowerCase();
+  if (contentType.includes('application/json')) {
+    let payload;
+    try { payload = await res.json(); } catch {
+      throw new Error('local tts returned invalid JSON');
+    }
+    const b64 = payload?.audio_base64 || payload?.audio;
+    if (!b64) throw new Error('local tts JSON must include audio_base64');
+    const mime = payload.mime_type || payload.content_type || (useFormat === 'mp3' ? 'audio/mpeg' : 'audio/wav');
+    const ext = payload.extension || (String(mime).includes('mpeg') || String(mime).includes('mp3') ? 'mp3' : 'wav');
+    return {
+      audio_buffer: Buffer.from(String(b64), 'base64'),
+      mime_type: mime,
+      extension: ext,
+      provider: 'local',
+      voice: payload.voice || useVoice,
+      model: payload.model || useModel,
+    };
+  }
+
+  const buffer = Buffer.from(await res.arrayBuffer());
+  const isMp3 = contentType.includes('mpeg') || contentType.includes('mp3') || useFormat === 'mp3';
+  return {
+    audio_buffer: buffer,
+    mime_type: contentType || (isMp3 ? 'audio/mpeg' : 'audio/wav'),
+    extension: isMp3 ? 'mp3' : 'wav',
+    provider: 'local',
+    voice: useVoice,
+    model: useModel,
+  };
+}
+
 /**
  * Synthesize speech.
  *
  * @param {{
  *   text: string,
- *   provider?: 'openai' | 'elevenlabs',
+ *   provider?: 'openai' | 'elevenlabs' | 'local',
  *   voice?: string,
  *   model?: string,
  *   format?: 'mp3' | 'wav',
@@ -156,11 +225,11 @@ export async function synthesizeSpeech(opts = {}) {
   if (!text) throw new Error('text is required');
   if (text.length > 4000) throw new Error('text too long: max 4000 characters');
 
-  const providerHint = String(opts.provider || process.env.TTS_DEFAULT_PROVIDER || 'openai').toLowerCase();
+  const providerHint = String(opts.provider || process.env.MADARX_VOICE_DEFAULT_PROVIDER || process.env.TTS_DEFAULT_PROVIDER || 'openai').toLowerCase();
   const provider = TTS_PROVIDERS.includes(providerHint) ? providerHint : 'openai';
   const fetchFn = wrapFetch('voice_speak', opts.agent_id ?? null, opts.fetch || fetch);
 
-  const synth = provider === 'elevenlabs' ? synthesizeElevenLabs : synthesizeOpenAi;
+  const synth = provider === 'elevenlabs' ? synthesizeElevenLabs : provider === 'local' ? synthesizeLocal : synthesizeOpenAi;
   const result = await synth({ text, voice: opts.voice, model: opts.model, format: opts.format, fetchFn });
 
   // Rough estimate: ~14 chars per second of speech at default rate.
@@ -221,5 +290,6 @@ export function ttsProvidersConfigured() {
   return {
     openai: Boolean(getSecret('OPENAI_API_KEY') || process.env.OPENAI_API_KEY),
     elevenlabs: Boolean(getSecret('ELEVENLABS_API_KEY') || process.env.ELEVENLABS_API_KEY),
+    local: Boolean(localTtsUrl()),
   };
 }