madarx 2.17.0 → 2.19.0

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/app/onboarding/team/page.js

@@ -0,0 +1,82 @@
+/**
+ * app/onboarding/team/page.js — Guided "set up your team" wizard (server shell).
+ *
+ * One linear flow that takes an operator from nothing to a shared organization:
+ *   ① Connect Supabase  → ② Build the tables  → ③ Create the org  → ④ Invite
+ *
+ * Each step reuses an existing, tested endpoint (/api/auth/config,
+ * /api/cloud/schema, /api/orgs, /api/orgs/[id]/invites) — the wizard just
+ * sequences them with live status and good defaults so the journey is obvious.
+ *
+ * Works in both auth modes. In local mode the single operator is always allowed
+ * and credentials are saved WITHOUT flipping the auth gate, so the wizard never
+ * logs you out mid-setup; enabling team sign-in is an explicit final action.
+ */
+
+import { redirect } from 'next/navigation';
+import { AdminShell } from '@/app/components/admin/admin-page.jsx';
+import { getSession, getAuthMode } from '@/lib/auth.js';
+import {
+  getSupabaseAuthConfig,
+  isServiceKeyConfigured,
+  isAuthModeEnvLocked,
+} from '@/lib/auth-config.js';
+import { getOrgById } from '@/lib/org.js';
+import { isSharedCloudReady } from '@/lib/shared-cloud.js';
+import { getPublicBaseUrl } from '@/lib/public-url.js';
+import TeamSetupClient from './team-setup-client.jsx';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export const metadata = {
+  title: 'Set up your team · madarX',
+};
+
+export default async function TeamSetupPage() {
+  const authMode = getAuthMode();
+
+  // In supabase mode you must be signed in to configure a team.
+  let session = null;
+  try {
+    session = await getSession();
+  } catch {
+    session = null;
+  }
+  if (authMode === 'supabase' && !session) {
+    redirect('/login?next=/onboarding/team');
+  }
+
+  const cfg = getSupabaseAuthConfig();
+  // The seeded local default org is a personal workspace, not a shareable team
+  // org — don't present it as an already-created team.
+  const sessionOrgId = session?.org_id || null;
+  const sessionOrg = sessionOrgId ? getOrgById(sessionOrgId) : null;
+  const isLocalDefault = authMode === 'local' && sessionOrg?.id === 'personal-org';
+  const existingOrg = sessionOrg && !isLocalDefault
+    ? { id: sessionOrg.id, name: sessionOrg.name, slug: sessionOrg.slug }
+    : null;
+
+  const initial = {
+    authMode,
+    envLocked: isAuthModeEnvLocked(),
+    url: cfg.url || '',
+    anonKey: cfg.anonKey || '',
+    serviceKeySet: isServiceKeyConfigured(),
+    publicBaseUrl: getPublicBaseUrl() || '',
+    cloudReady: isSharedCloudReady(),
+    role: session?.role || 'owner',
+    existingOrg,
+  };
+
+  return (
+    <AdminShell
+      kicker="Onboarding"
+      title="Set up your team"
+      description="Connect Supabase, stand up the shared tables, create your organization, and invite teammates — in four guided steps."
+      hideProjectSwitcher
+    >
+      <TeamSetupClient initial={initial} />
+    </AdminShell>
+  );
+}