madarx 2.17.0 → 2.18.0

package/app/login/login-client.jsx

@@ -59,11 +59,24 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
     return () => { alive = false; };
   }, [authMode]);
 
-  const supabaseConfigured = Boolean(cfg?.supabaseUrl && cfg?.supabaseAnonKey);
-  // Show the sign-in form when the server runs in supabase mode, the user asked
-  // for it (?supabase=1), or Supabase has been configured (incl. just now via
-  // the inline Create-a-team form).
-  const showSignIn = !isLocalServer || forceSupabase || supabaseConfigured;
+  // Until the runtime config fetch lands, optimistically treat a supabase-mode
+  // server as configured (the common case) so a healthy server doesn't flash the
+  // setup form. Once cfg loads it is the source of truth.
+  const supabaseConfigured = cfg
+    ? Boolean(cfg.supabaseUrl && cfg.supabaseAnonKey)
+    : !isLocalServer;
+  // The server's resolved auth mode (cfg wins once loaded; prop is the SSR seed).
+  const effectiveAuthMode = cfg?.authMode || authMode;
+  // Team mode is ON but Supabase has no resolvable credentials — a dead-end the
+  // operator must be able to fix from the UI (see renderTeam banner + form).
+  const supabaseMisconfigured = Boolean(cfg && effectiveAuthMode === 'supabase' && !supabaseConfigured);
+  // Show the sign-in form ONLY when Supabase creds actually resolve. In supabase
+  // mode WITHOUT creds we deliberately fall through to the Create-team config
+  // form (renderCreateTeam) instead of a sign-in box that can never succeed —
+  // otherwise the operator is stranded with no UI path to enter credentials.
+  // forceSupabase (?supabase=1) still needs real creds to sign in, so it no
+  // longer forces the form open.
+  const showSignIn = supabaseConfigured;
 
   async function resetToLocal() {
     if (!recoveryToken.trim()) { setMessage('Enter the recovery token to switch.'); return; }
@@ -299,6 +312,11 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
     return (
       <>
         <div className="login-card-head"><p>Secure access</p><h2>{showSignIn ? 'Sign in to your team' : 'Set up your team'}</h2></div>
+        {supabaseMisconfigured ? (
+          <div className="login-message login-message--warn">
+            Team mode is on, but Supabase isn’t configured on this server yet. Enter your project details below to finish setup — or switch to <b>Personal</b> to use this device locally.
+          </div>
+        ) : null}
         {message ? <div className="login-message">{message}</div> : null}
         {showSignIn ? renderSignIn() : renderCreateTeam()}
 

package/app/marketplace/connection-setup-modal.jsx

@@ -25,6 +25,7 @@ function StatusPill({ status }) {
 
 function labelForWarningField(field) {
   if (field === 'SUPABASE_ACCESS_TOKEN') return 'Personal access token';
+  if (field === 'GITHUB_TOKEN') return 'Token';
   return field || 'Optional field';
 }
 function labelForWarningReason(reason) {
@@ -34,6 +35,16 @@ function labelForWarningReason(reason) {
   return reason || 'unknown';
 }
 
+// Some warnings mean "saved fine, but heads-up" rather than "could not verify".
+// Return a complete sentence for those; null falls back to the generic copy.
+function warningMessage(warning) {
+  if (!warning) return null;
+  if (warning.reason === 'owner_only_access') {
+    return 'Connected, but this token can only see your own repos. To read org or shared repos, grant the token access to them (and authorize SAML SSO if the org requires it), then rotate the key.';
+  }
+  return null;
+}
+
 export default function ConnectionSetupModal({ open, onClose, connection, prefillScope }) {
   const router = useRouter();
   const [stage, setStage] = React.useState(STAGES.BENEFIT);
@@ -256,7 +267,9 @@ export default function ConnectionSetupModal({ open, onClose, connection, prefil
             )}
             {warning ? (
               <p className="connection-setup-warning">
-                <b>Warning:</b> {labelForWarningField(warning.field)} could not be verified ({labelForWarningReason(warning.reason)}). Other credentials were saved.
+                <b>Heads up:</b>{' '}
+                {warningMessage(warning)
+                  || `${labelForWarningField(warning.field)} could not be verified (${labelForWarningReason(warning.reason)}). Other credentials were saved.`}
               </p>
             ) : null}
             {unlocks.length ? (
@@ -278,6 +291,23 @@ export default function ConnectionSetupModal({ open, onClose, connection, prefil
               >
                 Disconnect
               </button>
+              <button
+                type="button"
+                className="admin-button secondary"
+                onClick={() => {
+                  // Rotate: clear any previous input and return to the setup
+                  // form. Re-submitting a new key rotates the active secret at
+                  // the same scope via the existing verify path.
+                  setCredentials({});
+                  setError(null);
+                  setHint(null);
+                  setWarning(null);
+                  setStage(STAGES.SETUP);
+                }}
+                disabled={busy}
+              >
+                Rotate key
+              </button>
               <button
                 type="button"
                 className="admin-button"

package/app/marketplace/connection-setup-steps/api-key-step.jsx

@@ -51,14 +51,25 @@ export default function ApiKeyStep({
     onChange({ ...credentials, [name]: value });
   }
 
-  const allRequiredPresent = fields
-    .filter(f => f.required)
-    .every(f => String(credentials[f.name] || '').trim().length > 0);
+  const missingRequired = fields
+    .filter(f => f.required && String(credentials[f.name] || '').trim().length === 0)
+    .map(f => f.label || f.name);
+  const allRequiredPresent = missingRequired.length === 0;
 
   const scopeReady = scope.scope === 'global'
     || (scope.scope === 'project' && Boolean(scope.project_id))
     || (scope.scope === 'agent' && Boolean(scope.agent_id));
 
+  // Explain why Connect is disabled so users don't get stuck (e.g. Resend
+  // needs both the API key AND the From email — missing either blocks submit).
+  const disabledReason = busy
+    ? null
+    : !allRequiredPresent
+      ? `Enter ${missingRequired.join(' and ')} to continue.`
+      : !scopeReady
+        ? 'Choose where to store this connection to continue.'
+        : null;
+
   return (
     <form className="connection-setup-step connection-setup-step-form" onSubmit={handleSubmit}>
       <p className="connection-setup-intro">
@@ -88,6 +99,7 @@ export default function ApiKeyStep({
             value={credentials[field.name] || ''}
             onChange={e => setField(field.name, e.target.value)}
             disabled={busy}
+            aria-required={field.required ? 'true' : undefined}
           />
           {field.help_text || field.help_url ? (
             <small className="connection-setup-field-help">
@@ -110,6 +122,10 @@ export default function ApiKeyStep({
         </p>
       ) : null}
 
+      {disabledReason ? (
+        <p className="connection-setup-disabled-hint" role="status">{disabledReason}</p>
+      ) : null}
+
       <div className="connection-setup-actions">
         <button
           type="button"
@@ -123,6 +139,7 @@ export default function ApiKeyStep({
           type="submit"
           className="admin-button"
           disabled={busy || !allRequiredPresent || !scopeReady}
+          title={disabledReason || undefined}
         >
           {busy ? 'Verifying…' : 'Connect'}
         </button>

package/app/marketplace/install-toast.jsx

@@ -5,7 +5,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 // Maps the post-action query state to banner copy. Keep the slug interpolation
 // generic — `name` is whatever the server action echoes back via ?slug=.
-function describe(state, name) {
+export function describe(state, name) {
   const label = name ? `"${name}"` : 'item';
   if (state === 'installed') {
     return {

package/app/marketplace/marketplace-row.jsx

@@ -25,7 +25,12 @@ import WorkflowCard from './workflow-card.jsx';
  *   currentKind?: string,
  * }} props
  */
-export default function MarketplaceRow({ item, toggleAction, onBundleClick, onConnectionClick, connectionStatus, connectionPrefill, currentKind }) {
+export default function MarketplaceRow({ item, toggleAction, installItem, onBundleClick, onConnectionClick, connectionStatus, connectionPrefill, currentKind }) {
+  // Client-mode toggle handler: flips install state in place via the shell's
+  // installItem (fetch → PUT /api/marketplace/[id]), avoiding a full-page reload.
+  const onToggle = typeof installItem === 'function'
+    ? (nextInstalled) => installItem(item, nextInstalled)
+    : undefined;
   const isTool = item.kind === 'tool';
   const isSkill = item.kind === 'skill';
   const isBundle = item.kind === 'bundle';
@@ -51,6 +56,7 @@ export default function MarketplaceRow({ item, toggleAction, onBundleClick, onCo
       <WorkflowCard
         item={item}
         toggleAction={toggleAction}
+        onToggle={onToggle}
         currentKind={currentKind}
       />
     );
@@ -123,6 +129,7 @@ export default function MarketplaceRow({ item, toggleAction, onBundleClick, onCo
         ) : (
           <InstallToggle
             action={toggleAction}
+            onToggle={onToggle}
             itemId={item.id}
             installed={installed}
             available={available}

package/app/marketplace/marketplace-shell.jsx

@@ -7,7 +7,7 @@ import MarketplaceSearch from './marketplace-search.jsx';
 import MarketplaceRow from './marketplace-row.jsx';
 import ImportFromGithubModal from './import-from-github-modal.jsx';
 import ConnectionSetupModal from './connection-setup-modal.jsx';
-import InstallToast from './install-toast.jsx';
+import InstallToast, { describe } from './install-toast.jsx';
 
 const KIND_OPTIONS = ['all', 'connection', 'tool', 'skill', 'bundle', 'agent', 'workflow'];
 
@@ -95,6 +95,68 @@ export default function MarketplaceShell({
   const [bundleModal, setBundleModal] = useState({ open: false, slug: null });
   const [connectionModal, setConnectionModal] = useState({ open: false, item: null });
 
+  // Live copy of the server-rendered items so install toggles can update a card
+  // in place (no full-page navigation). Re-sync when the server re-renders.
+  const [liveItems, setLiveItems] = useState(items);
+  useEffect(() => { setLiveItems(items); }, [items]);
+
+  // Controlled toast for in-place installs (the query-param <InstallToast/>
+  // still handles the server-action / import redirect path).
+  const [toast, setToast] = useState(null);
+  useEffect(() => {
+    if (!toast) return undefined;
+    const t = setTimeout(() => setToast(null), 3800);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  function patchItem(id, patch) {
+    setLiveItems(prev => prev.map(it => (it.id === id ? { ...it, ...patch } : it)));
+  }
+
+  // In-place install/uninstall. Optimistically flips the card, calls the
+  // existing JSON route, reconciles with the authoritative item, and rolls back
+  // on failure. No router navigation → no scroll reset / full refresh.
+  async function installItem(item, nextInstalled) {
+    const id = item.id;
+    const prevInstalled = Boolean(item.installed);
+    patchItem(id, { installed: nextInstalled }); // optimistic
+    let toastKey = 0;
+    try {
+      const res = await fetch(`/api/marketplace/${encodeURIComponent(id)}`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ installed: nextInstalled }),
+      });
+      const data = await res.json().catch(() => ({}));
+
+      if (!res.ok) {
+        patchItem(id, { installed: prevInstalled }); // rollback
+        setToast({ state: 'error', slug: item.slug, key: ++toastKey });
+        return;
+      }
+      if (data.deferred) {
+        patchItem(id, { installed: prevInstalled }); // bundle never actually installs
+        setToast({ state: 'deferred', slug: item.slug, key: ++toastKey });
+        return;
+      }
+      if (data.setup_required) {
+        patchItem(id, { installed: prevInstalled });
+        setToast({ state: 'setup_required', slug: item.slug, key: ++toastKey });
+        return;
+      }
+      // Reconcile with the server's authoritative item shape when provided.
+      if (data.item && typeof data.item === 'object') {
+        patchItem(id, data.item);
+      } else {
+        patchItem(id, { installed: nextInstalled });
+      }
+      setToast({ state: nextInstalled ? 'installed' : 'uninstalled', slug: item.slug, key: ++toastKey });
+    } catch {
+      patchItem(id, { installed: prevInstalled }); // rollback on network error
+      setToast({ state: 'error', slug: item.slug, key: ++toastKey });
+    }
+  }
+
   // Deep-link prefill for the connection modal. Read once on mount so the
   // user lands on the right card with the right scope preselected when
   // arriving from "/agents/[id] → Connect another service".
@@ -129,17 +191,17 @@ export default function MarketplaceShell({
   const categoryCounts = useMemo(() => {
     const counts = {};
     const scope = activeKind === 'all'
-      ? items
-      : items.filter(item => item.kind === activeKind);
+      ? liveItems
+      : liveItems.filter(item => item.kind === activeKind);
     for (const item of scope) {
       if (!item.category) continue;
       counts[item.category] = (counts[item.category] || 0) + 1;
     }
     return counts;
-  }, [items, activeKind]);
+  }, [liveItems, activeKind]);
 
   const filtered = useMemo(() => {
-    let list = items;
+    let list = liveItems;
     if (activeKind !== 'all') {
       list = list.filter(item => item.kind === activeKind);
     }
@@ -154,13 +216,21 @@ export default function MarketplaceShell({
         .sort((a, b) => rankItem(b, q) - rankItem(a, q));
     }
     return list;
-  }, [items, activeKind, activeCategory, query]);
+  }, [liveItems, activeKind, activeCategory, query]);
 
-  const installedCount = items.filter(item => item.installed).length;
+  const installedCount = liveItems.filter(item => item.installed).length;
+  const toastCopy = toast ? describe(toast.state, toast.slug) : null;
 
   return (
     <div className="mkt-page">
       <InstallToast />
+      {toastCopy ? (
+        <div className={`mkt-toast ${toastCopy.tone}`} role="status" aria-live="polite" key={toast.key}>
+          <span>{toastCopy.eyebrow}</span>
+          <p>{toastCopy.text}</p>
+          <button type="button" onClick={() => setToast(null)} aria-label="Dismiss notification">×</button>
+        </div>
+      ) : null}
       <section className="mkt-stats">
         <div className="mkt-stat">
           <b>{counts.all}</b>
@@ -225,6 +295,7 @@ export default function MarketplaceShell({
                 key={item.id}
                 item={item}
                 toggleAction={toggleAction}
+                installItem={installItem}
                 onBundleClick={() => setBundleModal({ open: true, slug: item.slug })}
                 onConnectionClick={() => setConnectionModal({ open: true, item })}
                 connectionStatus={item.kind === 'connection' ? summarizeConnectionClient(item) : null}

package/app/marketplace/workflow-card.jsx

@@ -33,7 +33,7 @@ function summarizeStages(stageKinds) {
  *   currentKind?: string,
  * }} props
  */
-export default function WorkflowCard({ item, toggleAction, currentKind }) {
+export default function WorkflowCard({ item, toggleAction, onToggle, currentKind }) {
   const installed = Boolean(item.installed);
   const workflow = item.workflow || {};
 
@@ -65,6 +65,7 @@ export default function WorkflowCard({ item, toggleAction, currentKind }) {
         </span>
         <InstallToggle
           action={toggleAction}
+          onToggle={onToggle}
           itemId={item.id}
           installed={installed}
           available={true}

package/lib/agent-config.js

@@ -92,6 +92,13 @@ TOOL_SELF_MANAGEMENT
 - If the tool exists but is disabled, call install_tool to enable it. Tools rated irreversible_external will gate on operator approval — surface that to the principal.
 - After enabling a tool, immediately use it to complete the task.
 
+BROWSER_CONTROL
+- When asked to open, visit, or navigate a real web page and then read it, click, type, or search on it, drive a real browser — do NOT refuse and do NOT settle for web_fetch (which cannot click or run JavaScript-heavy pages).
+- Use browser_open to load the URL, browser_act to click/fill/type/press/scroll, browser_extract to read the rendered result, and browser_screenshot to capture it. The page persists across calls so you can chain open → act → extract.
+- These interactive browser tools start disabled. If a browser_* call is unavailable, call install_tool to enable it first, then proceed — exactly as TOOL_SELF_MANAGEMENT describes. Do not tell the principal you cannot browse; enable the tool and do it.
+- When the principal explicitly wants to WATCH the browser live (a visible window, "open the browser so I can see", "connect chrome"), use skill_bridge_run with skill="connect-chrome" or skill="browse" — it drives the real visible GStack browser. This tool ALWAYS asks for owner approval before each run (it crosses the local CLI boundary); surface that one approval, then proceed. For silent/background automation prefer the headless browser_* tools instead.
+- This applies identically whether the request arrives by voice or typed chat — voice runs through this same brain and toolset.
+
 ARTIFACT_LIFECYCLE
 - When asked to build a UI, page, interface, web component, landing page, dashboard, or any visual output — use generate_ui. Never use create_artifact for HTML or UI work.
 - When the principal refines, extends, or follows up on a previous artifact, use update_artifact with the existing artifact_id — do NOT create a new artifact.