madarx 2.18.0 → 2.19.0

package/app/onboarding/team/team-setup-client.jsx

@@ -0,0 +1,557 @@
+'use client';
+
+/**
+ * TeamSetupClient — the guided four-step team setup flow.
+ *
+ *   ① Connect Supabase → ② Build the tables → ③ Create the org → ④ Invite
+ *
+ * Each step calls an existing endpoint; this component only sequences them with
+ * live status, sensible defaults, and a clear path forward. Nothing here ever
+ * sees a secret value back from the server — keys are write-only.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Cloud, Database, Building2, UserPlus, Check, Copy, ExternalLink,
+  Loader2, AlertTriangle, ArrowRight, ShieldCheck,
+} from 'lucide-react';
+
+const STEPS = [
+  { key: 'connect', label: 'Connect Supabase', hint: 'Project + keys', Icon: Cloud },
+  { key: 'tables', label: 'Build the tables', hint: 'Shared-layer schema', Icon: Database },
+  { key: 'org', label: 'Create organization', hint: 'Name your team', Icon: Building2 },
+  { key: 'invite', label: 'Invite teammates', hint: 'Share one link', Icon: UserPlus },
+];
+
+function slugify(name) {
+  return (
+    name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60) || 'org'
+  );
+}
+
+function Banner({ banner }) {
+  if (!banner) return null;
+  const tones = {
+    ok: { bg: 'rgba(34,139,84,.10)', fg: '#1d7a47', bd: 'rgba(34,139,84,.25)' },
+    err: { bg: 'rgba(194,69,42,.08)', fg: '#a8331c', bd: 'rgba(194,69,42,.22)' },
+    info: { bg: 'rgba(20,22,26,.05)', fg: '#3a3f47', bd: 'rgba(20,22,26,.12)' },
+  };
+  const t = tones[banner.tone] || tones.info;
+  return (
+    <div style={{ background: t.bg, color: t.fg, border: `1px solid ${t.bd}`, padding: '0.6rem 0.8rem', borderRadius: 10, fontSize: '0.85em' }}>
+      {banner.text}
+    </div>
+  );
+}
+
+export default function TeamSetupClient({ initial }) {
+  const [active, setActive] = useState(() => {
+    if (!initial.cloudReady) return 0;
+    if (initial.existingOrg) return 3;
+    return 1;
+  });
+
+  // ── Step 1: Connect ──────────────────────────────────────────────────────
+  const [url, setUrl] = useState(initial.url || '');
+  const [anonKey, setAnonKey] = useState(initial.anonKey || '');
+  const [serviceKey, setServiceKey] = useState('');
+  const [serviceKeySet, setServiceKeySet] = useState(Boolean(initial.serviceKeySet));
+  const [publicBaseUrl, setPublicBaseUrl] = useState(initial.publicBaseUrl || '');
+  const [connected, setConnected] = useState(Boolean(initial.cloudReady));
+  const [testing, setTesting] = useState(false);
+  const [savingConn, setSavingConn] = useState(false);
+  const [connBanner, setConnBanner] = useState(null);
+
+  // ── Step 2: Tables ───────────────────────────────────────────────────────
+  const [schema, setSchema] = useState(null);
+  const [loadingSchema, setLoadingSchema] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [pat, setPat] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [tablesBanner, setTablesBanner] = useState(null);
+
+  // ── Step 3: Org ──────────────────────────────────────────────────────────
+  const [orgName, setOrgName] = useState(initial.existingOrg?.name || 'MadarX');
+  const [creatingOrg, setCreatingOrg] = useState(false);
+  const [createdOrg, setCreatedOrg] = useState(initial.existingOrg || null);
+  const [orgBanner, setOrgBanner] = useState(null);
+
+  // ── Step 4: Invite + finalize ────────────────────────────────────────────
+  const [generating, setGenerating] = useState(false);
+  const [inviteLink, setInviteLink] = useState('');
+  const [inviteCopied, setInviteCopied] = useState(false);
+  const [inviteBanner, setInviteBanner] = useState(null);
+  const [enabling, setEnabling] = useState(false);
+
+  const done = {
+    connect: connected,
+    tables: Boolean(schema?.ready),
+    org: Boolean(createdOrg),
+    invite: Boolean(inviteLink),
+  };
+
+  // ── API helpers ──────────────────────────────────────────────────────────
+  async function postJson(path, payload) {
+    const res = await fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    const data = await res.json().catch(() => ({}));
+    return { status: res.status, data };
+  }
+
+  const fetchSchema = useCallback(async () => {
+    setLoadingSchema(true);
+    try {
+      const res = await fetch('/api/cloud/schema');
+      const data = await res.json().catch(() => ({}));
+      if (data.ok) setSchema(data);
+    } catch {
+      /* leave schema null; UI shows a retry */
+    } finally {
+      setLoadingSchema(false);
+    }
+  }, []);
+
+  // Load schema readiness the first time the operator reaches the Tables step.
+  useEffect(() => {
+    if (active === 1 && connected && !schema && !loadingSchema) fetchSchema();
+  }, [active, connected, schema, loadingSchema, fetchSchema]);
+
+  // ── Step 1 actions ───────────────────────────────────────────────────────
+  async function onTest() {
+    setConnBanner(null);
+    setTesting(true);
+    try {
+      const { data } = await postJson('/api/auth/config', { action: 'test', url, anonKey });
+      setConnBanner(
+        data.ok
+          ? { tone: 'ok', text: 'Reachable — Supabase project responded.' }
+          : { tone: 'err', text: `Connection failed: ${data.test?.error || data.error || 'unreachable'}.` }
+      );
+    } catch {
+      setConnBanner({ tone: 'err', text: 'Could not reach the server to run the test.' });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  async function onSaveConnect() {
+    setConnBanner(null);
+    setSavingConn(true);
+    try {
+      // Save credentials WITHOUT flipping the auth gate (mode omitted) so the
+      // wizard stays usable; enabling team sign-in is the explicit final step.
+      const payload = { action: 'save' };
+      if (url) payload.url = url;
+      if (anonKey) payload.anonKey = anonKey;
+      if (serviceKey) payload.serviceKey = serviceKey;
+      payload.publicBaseUrl = publicBaseUrl.trim();
+      const { status, data } = await postJson('/api/auth/config', payload);
+      if (!data.ok) {
+        setConnBanner({ tone: 'err', text: status === 403 ? 'Not allowed — owner/admin only.' : `Save failed: ${data.error || 'unknown error'}.` });
+        return;
+      }
+      if (serviceKey) setServiceKeySet(true);
+      const nowConnected = Boolean((url || initial.url) && (anonKey || initial.anonKey) && (serviceKey || serviceKeySet));
+      setConnected(nowConnected);
+      setConnBanner({ tone: 'ok', text: nowConnected ? 'Connected. Standing up the tables next…' : 'Saved. Add a service-role key to enable cloud sync.' });
+      if (nowConnected) {
+        setSchema(null);
+        setTimeout(() => setActive(1), 500);
+      }
+    } catch {
+      setConnBanner({ tone: 'err', text: 'Could not reach the server to save.' });
+    } finally {
+      setSavingConn(false);
+    }
+  }
+
+  // ── Step 2 actions ───────────────────────────────────────────────────────
+  async function onVerify() {
+    setTablesBanner(null);
+    setLoadingSchema(true);
+    try {
+      const { data } = await postJson('/api/cloud/schema', { action: 'verify' });
+      if (data.ok) {
+        setSchema((s) => ({ ...s, ...data }));
+        setTablesBanner(
+          data.ready
+            ? { tone: 'ok', text: 'All tables present. You’re ready to create the org.' }
+            : { tone: 'info', text: `${data.present?.length ?? 0} of ${data.total ?? '?'} tables present. Run the SQL, then verify again.` }
+        );
+      }
+    } catch {
+      setTablesBanner({ tone: 'err', text: 'Verify failed — try again.' });
+    } finally {
+      setLoadingSchema(false);
+    }
+  }
+
+  async function onCopySql() {
+    try {
+      await navigator.clipboard.writeText(schema?.schemaSql || '');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      setTablesBanner({ tone: 'err', text: 'Clipboard blocked — select the SQL manually below.' });
+    }
+  }
+
+  async function onApplyAuto() {
+    setTablesBanner(null);
+    setApplying(true);
+    try {
+      const { status, data } = await postJson('/api/cloud/schema', { action: 'apply', accessToken: pat });
+      if (data.ok) {
+        setSchema((s) => ({ ...s, ...data }));
+        setPat('');
+        setTablesBanner({ tone: 'ok', text: data.ready ? 'Applied — all tables created.' : 'Applied. Verifying…' });
+      } else {
+        const map = {
+          unauthorized_token: 'That access token was rejected. Generate one at supabase.com/dashboard/account/tokens.',
+          no_project_ref: 'Could not determine the project ref from the saved URL.',
+          invalid_access_token: 'Enter a valid Supabase personal access token.',
+        };
+        setTablesBanner({ tone: 'err', text: map[data.error] || `Apply failed (${status}).` });
+      }
+    } catch {
+      setTablesBanner({ tone: 'err', text: 'Could not reach the server to apply.' });
+    } finally {
+      setApplying(false);
+    }
+  }
+
+  // ── Step 3 actions ───────────────────────────────────────────────────────
+  async function onCreateOrg() {
+    setOrgBanner(null);
+    setCreatingOrg(true);
+    try {
+      const slug = slugify(orgName);
+      const { status, data } = await postJson('/api/orgs', { name: orgName.trim(), slug });
+      if (status === 201 && data.org) {
+        setCreatedOrg({ id: data.org.id, name: data.org.name, slug: data.org.slug });
+        setOrgBanner({ tone: 'ok', text: `“${data.org.name}” created. Invite your team next.` });
+        setTimeout(() => setActive(3), 500);
+      } else if (status === 409) {
+        setOrgBanner({ tone: 'err', text: 'An org with that name already exists — pick another.' });
+      } else {
+        setOrgBanner({ tone: 'err', text: data.error || 'Could not create the organization.' });
+      }
+    } catch {
+      setOrgBanner({ tone: 'err', text: 'Could not reach the server.' });
+    } finally {
+      setCreatingOrg(false);
+    }
+  }
+
+  // ── Step 4 actions ───────────────────────────────────────────────────────
+  async function onGenerateInvite() {
+    if (!createdOrg) return;
+    setInviteBanner(null);
+    setGenerating(true);
+    try {
+      const { status, data } = await postJson(`/api/orgs/${createdOrg.id}/invites`, { role: 'member' });
+      if (status === 201 && (data.joinUrl || data.joinPath || data.token)) {
+        const link = data.joinUrl
+          ? data.joinUrl
+          : data.joinPath ? `${window.location.origin}${data.joinPath}` : data.token;
+        setInviteLink(link);
+      } else {
+        setInviteBanner({ tone: 'err', text: data.message || data.error || 'Could not create an invite.' });
+      }
+    } catch {
+      setInviteBanner({ tone: 'err', text: 'Could not reach the server.' });
+    } finally {
+      setGenerating(false);
+    }
+  }
+
+  async function onCopyInvite() {
+    try {
+      await navigator.clipboard.writeText(inviteLink);
+      setInviteCopied(true);
+      setTimeout(() => setInviteCopied(false), 1800);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async function onEnableTeamSignIn() {
+    setInviteBanner(null);
+    setEnabling(true);
+    try {
+      const { status, data } = await postJson('/api/auth/config', { action: 'save', mode: 'supabase', url, anonKey });
+      if (status === 422) {
+        setInviteBanner({ tone: 'err', text: `Cannot enable sign-in — connection test failed: ${data.test?.error || 'unreachable'}.` });
+        return;
+      }
+      if (!data.ok) {
+        setInviteBanner({ tone: 'err', text: data.error || 'Could not enable team sign-in.' });
+        return;
+      }
+      setInviteBanner({ tone: 'info', text: 'Team sign-in enabled — redirecting you to sign in…' });
+      setTimeout(() => window.location.assign('/login'), 900);
+    } catch {
+      setInviteBanner({ tone: 'err', text: 'Could not reach the server.' });
+    } finally {
+      setEnabling(false);
+    }
+  }
+
+  // ── Render ───────────────────────────────────────────────────────────────
+  return (
+    <div className="wiz">
+      {/* Stepper rail */}
+      <ol className="wiz-rail">
+        {STEPS.map((s, i) => {
+          const state = done[s.key] ? 'done' : active === i ? 'active' : 'idle';
+          const { Icon } = s;
+          return (
+            <li key={s.key}>
+              <button type="button" className={`wiz-step is-${state}`} onClick={() => setActive(i)}>
+                <span className="wiz-step-dot">
+                  {done[s.key] ? <Check size={15} strokeWidth={2.5} /> : <Icon size={15} strokeWidth={2} />}
+                </span>
+                <span className="wiz-step-text">
+                  <b>{s.label}</b>
+                  <small>{s.hint}</small>
+                </span>
+              </button>
+              {i < STEPS.length - 1 ? <span className={`wiz-conn ${done[s.key] ? 'is-done' : ''}`} /> : null}
+            </li>
+          );
+        })}
+      </ol>
+
+      {/* Panel */}
+      <div className="wiz-panel admin-panel">
+        {active === 0 ? (
+          <section className="wiz-body">
+            <header className="wiz-head">
+              <h3>Connect your Supabase project</h3>
+              <p>Paste your project URL (or just the project ref) and keys. They’re stored encrypted in the local vault and never returned to the browser.</p>
+            </header>
+            <div className="wiz-fields">
+              <label className="admin-field">
+                <span>Supabase project URL or ref</span>
+                <input className="admin-input" type="text" placeholder="https://YOUR-REF.supabase.co  ·  or just YOUR-REF" value={url} onChange={(e) => setUrl(e.target.value)} autoComplete="off" />
+              </label>
+              <label className="admin-field">
+                <span>Anon (public) key</span>
+                <input className="admin-input" type="text" placeholder="eyJhbGciOi…" value={anonKey} onChange={(e) => setAnonKey(e.target.value)} autoComplete="off" />
+              </label>
+              <label className="admin-field">
+                <span>Service-role key {serviceKeySet ? <em style={{ color: '#1d7a47', fontStyle: 'normal' }}>· set</em> : null}</span>
+                <input className="admin-input" type="password" placeholder={serviceKeySet ? '•••••••• (leave blank to keep)' : 'eyJhbGciOi… (powers cloud sync)'} value={serviceKey} onChange={(e) => setServiceKey(e.target.value)} autoComplete="off" />
+              </label>
+              <label className="admin-field">
+                <span>Public app URL <em style={{ color: '#9aa1ac', fontStyle: 'normal', fontWeight: 600 }}>· for invite &amp; share links</em></span>
+                <input className="admin-input" type="url" placeholder="https://madarx.io  (leave blank to use this address)" value={publicBaseUrl} onChange={(e) => setPublicBaseUrl(e.target.value)} autoComplete="off" />
+              </label>
+              <p className="admin-muted" style={{ fontSize: '.78em', margin: 0 }}>
+                Where teammates reach this app. Invite and share links use it, so a recipient on another machine doesn’t get a <code>localhost</code> link.
+              </p>
+            </div>
+            <Banner banner={connBanner} />
+            <div className="wiz-actions">
+              <button type="button" className="admin-btn-sm" onClick={onTest} disabled={testing || savingConn || !url || !anonKey}>
+                {testing ? <><Loader2 size={14} className="wiz-spin" /> Testing…</> : 'Test connection'}
+              </button>
+              <button type="button" className="admin-btn-primary" onClick={onSaveConnect} disabled={savingConn || testing || (!url && !initial.url) || (!anonKey && !initial.anonKey)}>
+                {savingConn ? <><Loader2 size={14} className="wiz-spin" /> Saving…</> : <>Save &amp; continue <ArrowRight size={15} /></>}
+              </button>
+            </div>
+          </section>
+        ) : null}
+
+        {active === 1 ? (
+          <section className="wiz-body">
+            <header className="wiz-head">
+              <h3>Build the shared-layer tables</h3>
+              <p>These tables hold orgs, members, invites, and shared metadata. Creating tables needs database privileges the app keys don’t have — so run the SQL once in your project, or apply it automatically.</p>
+            </header>
+
+            {!connected ? (
+              <Banner banner={{ tone: 'info', text: 'Connect Supabase first (step 1) so we can check your project.' }} />
+            ) : loadingSchema && !schema ? (
+              <div className="wiz-loading"><Loader2 size={16} className="wiz-spin" /> Checking your project…</div>
+            ) : schema?.configured === false ? (
+              <Banner banner={{ tone: 'err', text: 'Service-role key missing — go back to step 1 and add it so we can read your schema.' }} />
+            ) : schema ? (
+              <>
+                <div className={`wiz-schema-status ${schema.ready ? 'is-ready' : 'is-partial'}`}>
+                  <span className="wiz-schema-icon">{schema.ready ? <Check size={16} strokeWidth={2.5} /> : <AlertTriangle size={16} strokeWidth={2} />}</span>
+                  <div>
+                    <b>{schema.ready ? 'All tables present' : `${schema.present?.length ?? 0} of ${schema.total} tables present`}</b>
+                    <small>{schema.ready ? 'Your shared layer is ready.' : `Missing: ${(schema.missing || []).join(', ')}`}</small>
+                  </div>
+                </div>
+
+                {!schema.ready ? (
+                  <>
+                    <div className="wiz-apply">
+                      <div className="wiz-apply-head">
+                        <span><b>1.</b> Open your SQL editor and run the schema</span>
+                        <div className="wiz-apply-btns">
+                          <button type="button" className="admin-btn-sm" onClick={onCopySql}>
+                            {copied ? <><Check size={14} /> Copied</> : <><Copy size={14} /> Copy SQL</>}
+                          </button>
+                          {schema.sqlEditorUrl ? (
+                            <a className="admin-btn-sm" href={schema.sqlEditorUrl} target="_blank" rel="noreferrer">
+                              <ExternalLink size={14} /> Open SQL editor
+                            </a>
+                          ) : null}
+                        </div>
+                      </div>
+                      <details className="wiz-sql">
+                        <summary>Preview SQL ({Math.round((schema.schemaSql?.length || 0) / 1024)} KB · idempotent)</summary>
+                        <pre className="wiz-sql-pre">{schema.schemaSql}</pre>
+                      </details>
+                    </div>
+
+                    <div className="wiz-apply">
+                      <div className="wiz-apply-head">
+                        <span><b>2.</b> Then verify</span>
+                        <button type="button" className="admin-btn-primary" onClick={onVerify} disabled={loadingSchema}>
+                          {loadingSchema ? <><Loader2 size={14} className="wiz-spin" /> Verifying…</> : 'Verify tables'}
+                        </button>
+                      </div>
+                    </div>
+
+                    <button type="button" className="wiz-link" onClick={() => setShowAdvanced((v) => !v)}>
+                      {showAdvanced ? '− Hide one-click apply' : '+ Apply automatically (advanced)'}
+                    </button>
+                    {showAdvanced ? (
+                      <div className="wiz-apply wiz-advanced">
+                        <p className="admin-muted" style={{ margin: '0 0 .5rem', fontSize: '.82em' }}>
+                          Paste a Supabase <a href="https://supabase.com/dashboard/account/tokens" target="_blank" rel="noreferrer">personal access token</a>. We use it for this one request and never store it.
+                        </p>
+                        <div className="wiz-actions" style={{ marginTop: 0 }}>
+                          <input className="admin-input" type="password" placeholder="sbp_…" value={pat} onChange={(e) => setPat(e.target.value)} autoComplete="off" style={{ flex: 1, minWidth: 180 }} />
+                          <button type="button" className="admin-btn-sm" onClick={onApplyAuto} disabled={applying || pat.trim().length < 20}>
+                            {applying ? <><Loader2 size={14} className="wiz-spin" /> Applying…</> : 'Apply now'}
+                          </button>
+                        </div>
+                      </div>
+                    ) : null}
+                  </>
+                ) : null}
+
+                <Banner banner={tablesBanner} />
+
+                {schema.ready ? (
+                  <div className="wiz-actions">
+                    <button type="button" className="admin-btn-primary" onClick={() => setActive(2)}>Continue <ArrowRight size={15} /></button>
+                  </div>
+                ) : null}
+              </>
+            ) : (
+              <div className="wiz-actions"><button type="button" className="admin-btn-sm" onClick={fetchSchema}>Check project</button></div>
+            )}
+          </section>
+        ) : null}
+
+        {active === 2 ? (
+          <section className="wiz-body">
+            <header className="wiz-head">
+              <h3>Create your organization</h3>
+              <p>This is the shared space your teammates join. You’ll be the owner.</p>
+            </header>
+            {createdOrg ? (
+              <div className="wiz-schema-status is-ready">
+                <span className="wiz-schema-icon"><Check size={16} strokeWidth={2.5} /></span>
+                <div>
+                  <b>{createdOrg.name}</b>
+                  <small>Org ID <code className="mono">{createdOrg.id}</code> · slug <code className="mono">{createdOrg.slug}</code></small>
+                </div>
+              </div>
+            ) : (
+              <div className="wiz-fields">
+                <label className="admin-field">
+                  <span>Organization name</span>
+                  <input className="admin-input" type="text" placeholder="MadarX" value={orgName} onChange={(e) => setOrgName(e.target.value)} />
+                </label>
+                <p className="admin-muted" style={{ fontSize: '.8em', margin: 0 }}>Slug: <code className="mono">{slugify(orgName)}</code></p>
+              </div>
+            )}
+            <Banner banner={orgBanner} />
+            <div className="wiz-actions">
+              {createdOrg ? (
+                <button type="button" className="admin-btn-primary" onClick={() => setActive(3)}>Continue <ArrowRight size={15} /></button>
+              ) : (
+                <button type="button" className="admin-btn-primary" onClick={onCreateOrg} disabled={creatingOrg || !orgName.trim()}>
+                  {creatingOrg ? <><Loader2 size={14} className="wiz-spin" /> Creating…</> : <>Create organization <ArrowRight size={15} /></>}
+                </button>
+              )}
+            </div>
+          </section>
+        ) : null}
+
+        {active === 3 ? (
+          <section className="wiz-body">
+            <header className="wiz-head">
+              <h3>Invite your teammates</h3>
+              <p>Share one link. They sign in and join {createdOrg ? `“${createdOrg.name}”` : 'your org'} automatically — no codes to copy.</p>
+            </header>
+
+            {!createdOrg ? (
+              <Banner banner={{ tone: 'info', text: 'Create your organization first (step 3).' }} />
+            ) : (
+              <>
+                {inviteLink ? (
+                  <div className="wiz-invite">
+                    <input className="admin-input mono" readOnly value={inviteLink} onFocus={(e) => e.target.select()} />
+                    <button type="button" className="admin-btn-sm" onClick={onCopyInvite}>
+                      {inviteCopied ? <><Check size={14} /> Copied</> : <><Copy size={14} /> Copy link</>}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="wiz-actions" style={{ marginTop: 0 }}>
+                    <button type="button" className="admin-btn-primary" onClick={onGenerateInvite} disabled={generating}>
+                      {generating ? <><Loader2 size={14} className="wiz-spin" /> Generating…</> : <>Generate invite link</>}
+                    </button>
+                  </div>
+                )}
+
+                <Banner banner={inviteBanner} />
+
+                <div className="wiz-finish">
+                  <div className="wiz-finish-row">
+                    <ShieldCheck size={18} strokeWidth={1.75} />
+                    <div>
+                      <b>Turn on team sign-in</b>
+                      <small>
+                        {initial.authMode === 'supabase'
+                          ? 'Already enabled — teammates can sign in now.'
+                          : 'Switch auth to Supabase so teammates sign in with their own accounts. You’ll be redirected to sign in.'}
+                      </small>
+                    </div>
+                    {initial.authMode === 'supabase' ? (
+                      <span className="wiz-pill is-ready">On</span>
+                    ) : (
+                      <button type="button" className="admin-btn-sm" onClick={onEnableTeamSignIn} disabled={enabling || initial.envLocked || !url || !anonKey}>
+                        {enabling ? <><Loader2 size={14} className="wiz-spin" /> Enabling…</> : 'Enable'}
+                      </button>
+                    )}
+                  </div>
+                  {initial.envLocked ? (
+                    <p className="admin-muted" style={{ fontSize: '.78em', margin: '.5rem 0 0' }}>
+                      Auth mode is locked by <code>MADARX_AUTH_MODE</code>; unset it to switch here.
+                    </p>
+                  ) : null}
+                </div>
+
+                <div className="wiz-actions">
+                  <a className="admin-btn-sm" href="/settings/team">Manage team in Settings <ArrowRight size={14} /></a>
+                </div>
+              </>
+            )}
+          </section>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/app/settings/account/auth-config-form.jsx

@@ -14,6 +14,7 @@ export default function AuthConfigForm({ initial }) {
   const [url, setUrl] = useState(initial?.url || '');
   const [anonKey, setAnonKey] = useState(initial?.anonKey || '');
   const [serviceKey, setServiceKey] = useState('');
+  const [publicBaseUrl, setPublicBaseUrl] = useState(initial?.publicBaseUrl || '');
   const [testing, setTesting] = useState(false);
   const [saving, setSaving] = useState(false);
   const [banner, setBanner] = useState(null); // { tone: 'ok'|'err'|'info', text }
@@ -64,6 +65,7 @@ export default function AuthConfigForm({ initial }) {
       if (url) payload.url = url;
       if (anonKey) payload.anonKey = anonKey;
       if (serviceKey) payload.serviceKey = serviceKey;
+      payload.publicBaseUrl = publicBaseUrl.trim();
 
       const { status, data } = await postConfig(payload);
 
@@ -170,8 +172,20 @@ export default function AuthConfigForm({ initial }) {
             autoComplete="off"
           />
         </label>
+        <label className="admin-field">
+          <span>Public app URL <em style={{ color: '#7a818c', fontStyle: 'normal' }}>· for invite &amp; share links</em></span>
+          <input
+            type="url"
+            className="admin-input"
+            placeholder="https://madarx.io (leave blank to use this address)"
+            value={publicBaseUrl}
+            onChange={(e) => setPublicBaseUrl(e.target.value)}
+            autoComplete="off"
+          />
+        </label>
         <p className="admin-muted" style={{ fontSize: '0.78em', margin: 0 }}>
           Stored encrypted in the local secrets vault. The service-role key never leaves the server and powers cloud sync and shared spaces.
+          The public app URL is where teammates reach this install — invite and share links use it instead of <code>localhost</code>.
         </p>
         <p className="admin-muted" style={{ fontSize: '0.78em', margin: 0 }}>
           Lockout safety: if Supabase sign-in ever fails, reset to local mode from the login page using the recovery token in <code>data/.auth-recovery-token</code>, or set <code>MADARX_AUTH_MODE=local</code> in the environment.