mop-agent 0.1.7 → 0.1.9

package/apps/web/app/settings/page.tsx

@@ -1,63 +1,206 @@
 "use client";
-/** Provider settings — plug an AI key (stored encrypted). */
+
+import type { CSSProperties } from "react";
 import { useEffect, useState } from "react";
 
+type Section = "providers" | "users";
 type Masked = { configured: boolean; provider?: string; model?: string | null; keyHint?: string };
+type Member = { id: string; email: string; name: string; role: string };
 
 export default function SettingsPage() {
+  const [section, setSection] = useState<Section>("providers");
   const [config, setConfig] = useState<Masked>({ configured: false });
   const [env, setEnv] = useState<{ anthropic: boolean; openrouter: boolean }>({ anthropic: false, openrouter: false });
   const [provider, setProvider] = useState<"anthropic" | "openrouter">("openrouter");
   const [apiKey, setApiKey] = useState("");
   const [model, setModel] = useState("");
-  const [msg, setMsg] = useState("");
+  const [providerMsg, setProviderMsg] = useState("");
+  const [members, setMembers] = useState<Member[]>([]);
+  const [userName, setUserName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState<"member" | "owner">("member");
+  const [userMsg, setUserMsg] = useState("");
+
+  function loadProvider() {
+    fetch("/api/providers").then((r) => r.json()).then((data) => {
+      setConfig(data.config ?? { configured: false });
+      setEnv(data.env ?? { anthropic: false, openrouter: false });
+    }).catch(() => {});
+  }
+
+  function loadUsers() {
+    fetch("/api/members").then((r) => (r.ok ? r.json() : { members: [] })).then((data) => setMembers(data.members ?? [])).catch(() => {});
+  }
 
-  function load() {
-    fetch("/api/providers").then((r) => r.json()).then((d) => { setConfig(d.config); setEnv(d.env); }).catch(() => {});
+  useEffect(() => {
+    const requested = new URLSearchParams(window.location.search).get("section");
+    if (requested === "users") setSection("users");
+    loadProvider();
+    loadUsers();
+  }, []);
+
+  function chooseSection(next: Section) {
+    setSection(next);
+    const url = next === "providers" ? "/settings" : "/settings?section=users";
+    window.history.replaceState(null, "", url);
   }
-  useEffect(load, []);
 
-  async function save(e: React.FormEvent) {
+  async function saveProvider(e: React.FormEvent) {
     e.preventDefault();
-    setMsg("…");
-    const r = await fetch("/api/providers", {
+    setProviderMsg("Saving…");
+    const response = await fetch("/api/providers", {
       method: "POST",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ provider, apiKey, model: model || undefined }),
     });
-    const d = await r.json();
-    setMsg(r.ok ? "✅ saved (key encrypted)" : `error: ${d.error}`);
+    const data = await response.json();
+    setProviderMsg(response.ok ? "Provider saved. The API key is encrypted." : `Unable to save: ${data.error}`);
     setApiKey("");
-    if (r.ok) setConfig(d.config);
+    if (response.ok) setConfig(data.config);
+  }
+
+  async function createUser(e: React.FormEvent) {
+    e.preventDefault();
+    setUserMsg("Creating user…");
+    const response = await fetch("/api/members", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ name: userName, email, password, role }),
+    });
+    const data = await response.json();
+    setUserMsg(response.ok ? `User ${email} created and ready to sign in.` : `Unable to create user: ${data.error ?? response.status}`);
+    if (response.ok) {
+      setUserName("");
+      setEmail("");
+      setPassword("");
+    }
+    loadUsers();
   }
 
   return (
-    <main style={{ maxWidth: 520, margin: "0 auto", padding: "48px 24px" }}>
-      <a href="/assistant" style={{ color: "#742220" }}>← Assistant</a>
-      <h1 style={{ fontSize: 24 }}>⚙️ Provider settings</h1>
-
-      <div style={{ border: "1px solid rgba(45,74,62,.28)", borderRadius: 8, padding: 14, margin: "12px 0", opacity: 0.9, background: "#fffdf2" }}>
-        {config.configured
-          ? <>Active: <strong>{config.provider}</strong>{config.model ? ` · ${config.model}` : ""} · key {config.keyHint}</>
-          : "No provider key saved yet — chat uses the offline echo provider."}
-        <div style={{ fontSize: 12, opacity: 0.6, marginTop: 6 }}>
-          env keys: anthropic {env.anthropic ? "✓" : "—"} · openrouter {env.openrouter ? "✓" : "—"} (DB config overrides env)
+    <div className="mop-page">
+      <header className="mop-page-heading">
+        <div>
+          <p className="mop-page-kicker">ADMIN CONTROL</p>
+          <h1>Settings</h1>
+          <p>Configure system-wide AI providers and user access.</p>
         </div>
-      </div>
+        <span style={adminBadge}>ADMIN ONLY</span>
+      </header>
+
+      <div className="mop-settings-grid">
+        <aside className="mop-settings-nav mop-panel" aria-label="Settings sections">
+          <button className={section === "providers" ? "is-active" : ""} onClick={() => chooseSection("providers")}>
+            <span>◇</span><strong>Providers</strong>
+          </button>
+          <button className={section === "users" ? "is-active" : ""} onClick={() => chooseSection("users")}>
+            <span>♙</span><strong>Users</strong>
+          </button>
+        </aside>
+
+        <section className="mop-settings-content mop-panel">
+          {section === "providers" ? (
+            <>
+              <div style={sectionHeading}>
+                <div>
+                  <p className="mop-page-kicker">AI CONNECTION</p>
+                  <h2 style={titleStyle}>Providers</h2>
+                </div>
+                <span style={{ ...statusBadge, color: config.configured ? "#2d4a3e" : "#742220" }}>
+                  {config.configured ? "● CONNECTED" : "● OFFLINE DEMO"}
+                </span>
+              </div>
 
-      <form onSubmit={save} style={{ display: "grid", gap: 12 }}>
-        <select value={provider} onChange={(e) => setProvider(e.target.value as "anthropic" | "openrouter")} style={inp}>
-          <option value="openrouter">OpenRouter (any model)</option>
-          <option value="anthropic">Anthropic</option>
-        </select>
-        <input placeholder="API key" type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} required style={inp} />
-        <input placeholder={provider === "anthropic" ? "model (e.g. claude-sonnet-4-6)" : "model (e.g. anthropic/claude-sonnet-4.6)"} value={model} onChange={(e) => setModel(e.target.value)} style={inp} />
-        <button type="submit" style={btn}>Save</button>
-      </form>
-      {msg && <p style={{ marginTop: 14, opacity: 0.85 }}>{msg}</p>}
-    </main>
+              <div style={summaryCard}>
+                {config.configured ? (
+                  <><strong>{config.provider}</strong>{config.model ? ` · ${config.model}` : ""}<span style={muted}> · key {config.keyHint}</span></>
+                ) : (
+                  <>No provider key saved. Assistant currently uses the offline echo provider.</>
+                )}
+                <div style={{ ...muted, marginTop: 7, fontSize: 12 }}>
+                  Environment: Anthropic {env.anthropic ? "available" : "not set"} · OpenRouter {env.openrouter ? "available" : "not set"}
+                </div>
+              </div>
+
+              <form onSubmit={saveProvider} style={formGrid}>
+                <label style={labelStyle}>Provider
+                  <select value={provider} onChange={(e) => setProvider(e.target.value as "anthropic" | "openrouter")} style={inputStyle}>
+                    <option value="openrouter">OpenRouter</option>
+                    <option value="anthropic">Anthropic</option>
+                  </select>
+                </label>
+                <label style={labelStyle}>API key
+                  <input placeholder="Paste a new API key" type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} required style={inputStyle} />
+                </label>
+                <label style={labelStyle}>Model
+                  <input placeholder={provider === "anthropic" ? "claude-sonnet-4-6" : "anthropic/claude-sonnet-4.6"} value={model} onChange={(e) => setModel(e.target.value)} style={inputStyle} />
+                </label>
+                <button type="submit" style={primaryButton}>SAVE PROVIDER</button>
+              </form>
+              {providerMsg && <p style={messageStyle}>{providerMsg}</p>}
+            </>
+          ) : (
+            <>
+              <div style={sectionHeading}>
+                <div>
+                  <p className="mop-page-kicker">ACCESS CONTROL</p>
+                  <h2 style={titleStyle}>Users</h2>
+                </div>
+                <span style={statusBadge}>{members.length} ACCOUNTS</span>
+              </div>
+
+              <div style={{ overflowX: "auto" }}>
+                <table style={tableStyle}>
+                  <thead><tr><th>User</th><th>Email</th><th>Role</th></tr></thead>
+                  <tbody>
+                    {members.map((member) => (
+                      <tr key={member.id}>
+                        <td><span style={miniAvatar}>{(member.name || member.email).slice(0, 1).toUpperCase()}</span>{member.name || "Unnamed"}</td>
+                        <td>{member.email}</td>
+                        <td><span style={member.role === "owner" ? ownerRole : memberRole}>{member.role === "owner" ? "ADMIN" : "MEMBER"}</span></td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              <div style={userPanel}>
+                <h3 style={{ margin: 0, fontSize: 15 }}>Add a user</h3>
+                <p style={{ ...muted, margin: "6px 0 0", fontSize: 12 }}>Create the account here, then give the user their email and temporary password.</p>
+                <form onSubmit={createUser} style={{ display: "grid", gridTemplateColumns: "minmax(140px,.8fr) minmax(190px,1fr) minmax(150px,.8fr) 110px auto", gap: 9, marginTop: 13 }} className="mop-user-invite-form">
+                  <input placeholder="Display name" required value={userName} onChange={(e) => setUserName(e.target.value)} style={inputStyle} />
+                  <input placeholder="user@example.com" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} />
+                  <input placeholder="Temporary password" type="password" minLength={8} required value={password} onChange={(e) => setPassword(e.target.value)} style={inputStyle} />
+                  <select value={role} onChange={(e) => setRole(e.target.value as "member" | "owner")} style={inputStyle}>
+                    <option value="member">Member</option>
+                    <option value="owner">Admin</option>
+                  </select>
+                  <button type="submit" style={primaryButton}>ADD USER</button>
+                </form>
+                {userMsg && <p style={messageStyle}>{userMsg}</p>}
+              </div>
+            </>
+          )}
+        </section>
+      </div>
+    </div>
   );
 }
 
-const inp: React.CSSProperties = { padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(45,74,62,.32)", background: "#fffdf2", color: "#2d4a3e" };
-const btn: React.CSSProperties = { padding: "10px 12px", borderRadius: 8, border: "1px solid #742220", background: "#742220", color: "#fef9e1", cursor: "pointer" };
+const adminBadge: CSSProperties = { padding: "7px 10px", color: "#fef9e1", background: "#742220", fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 10, fontWeight: 900, letterSpacing: ".12em" };
+const sectionHeading: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 20, paddingBottom: 15, borderBottom: "1px solid rgba(45,74,62,.24)" };
+const titleStyle: CSSProperties = { margin: 0, fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 22 };
+const statusBadge: CSSProperties = { padding: "6px 8px", border: "1px solid rgba(45,74,62,.32)", color: "#2d4a3e", fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 9, fontWeight: 900, letterSpacing: ".1em" };
+const summaryCard: CSSProperties = { padding: 15, border: "1px solid rgba(45,74,62,.24)", background: "rgba(254,249,225,.72)", lineHeight: 1.5 };
+const muted: CSSProperties = { color: "rgba(45,74,62,.58)" };
+const formGrid: CSSProperties = { display: "grid", gap: 13, marginTop: 20 };
+const labelStyle: CSSProperties = { display: "grid", gap: 6, color: "#742220", fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 11, fontWeight: 800, letterSpacing: ".07em", textTransform: "uppercase" };
+const inputStyle: CSSProperties = { width: "100%", minHeight: 40, padding: "9px 11px", border: "1px solid rgba(45,74,62,.4)", background: "#fffdf2", color: "#2d4a3e" };
+const primaryButton: CSSProperties = { minHeight: 40, padding: "9px 15px", border: "1px solid #742220", background: "#742220", color: "#fef9e1", fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 10, fontWeight: 900, cursor: "pointer" };
+const messageStyle: CSSProperties = { padding: "9px 11px", borderLeft: "3px solid #742220", background: "rgba(116,34,32,.06)", fontSize: 13 };
+const tableStyle: CSSProperties = { width: "100%", borderCollapse: "collapse", fontSize: 13 };
+const miniAvatar: CSSProperties = { width: 28, height: 28, display: "inline-grid", placeItems: "center", marginRight: 9, background: "#2d4a3e", color: "#fef9e1", fontWeight: 900 };
+const ownerRole: CSSProperties = { padding: "4px 7px", background: "#742220", color: "#fef9e1", fontSize: 9, fontWeight: 900 };
+const memberRole: CSSProperties = { ...ownerRole, color: "#2d4a3e", background: "rgba(45,74,62,.12)" };
+const userPanel: CSSProperties = { marginTop: 26, padding: 16, border: "1px solid rgba(45,74,62,.27)", background: "rgba(254,249,225,.55)" };

package/apps/web/app/setup/layout.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { unstable_noStore as noStore } from "next/cache";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { auth, ownerExists } from "@/lib/auth";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default async function SetupLayout({ children }: { children: ReactNode }) {
+  noStore();
+  if (!ownerExists()) return children;
+  const session = await auth.api.getSession({ headers: await headers() });
+  redirect(session ? "/assistant" : "/login");
+}

package/apps/web/app/setup/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { signIn, signUp } from "@/lib/auth-client";
 
 type SetupStatus = { ownerExists: boolean; authenticated: boolean };
@@ -20,7 +20,7 @@ async function waitForSession(): Promise<boolean> {
     try {
       if ((await getSetupStatus()).authenticated) return true;
     } catch {
-      // A short deployment/network gap should not strand the form in busy mode.
+      // Allow a short deployment/network gap before falling back to Login.
     }
     await new Promise((resolve) => setTimeout(resolve, 250));
   }
@@ -28,78 +28,34 @@ async function waitForSession(): Promise<boolean> {
 }
 
 export default function SetupPage() {
-  const [ownerExists, setOwnerExists] = useState<boolean | null>(null);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [name, setName] = useState("");
   const [msg, setMsg] = useState("");
   const [busy, setBusy] = useState(false);
-  const [mode, setMode] = useState<"signup" | "signin">("signup");
-
-  useEffect(() => {
-    getSetupStatus()
-      .then((status) => {
-        if (status.authenticated) {
-          window.location.replace(`/assistant?auth=${Date.now()}`);
-          return;
-        }
-        setOwnerExists(status.ownerExists);
-        setMode(status.ownerExists ? "signin" : "signup");
-      })
-      .catch(() => setMsg("Unable to reach MOP-AGENT. Please refresh."));
-  }, []);
 
   async function submit(e: React.FormEvent) {
     e.preventDefault();
     setBusy(true);
     setMsg("");
 
-    if (mode === "signup") {
-      const res = await signUp.email({ email, password, name: name.trim() || email });
-      if (res.error) {
-        setMsg(res.error.message ?? "Account setup failed.");
-        setBusy(false);
-        return;
-      }
-      // Verify the cookie before entering a server-protected route. If the
-      // signup response did not establish it, explicitly sign in once.
-      if (!(await waitForSession())) {
-        const login = await signIn.email({ email, password });
-        if (login.error) {
-          setMode("signin");
-          setOwnerExists(true);
-          setMsg(login.error.message ?? "Admin created, but sign in failed. Please sign in below.");
-          setBusy(false);
-          return;
-        }
-      }
-      if (await waitForSession()) {
-        window.location.replace(`/assistant?auth=${Date.now()}`);
-        return;
-      }
-      setMode("signin");
-      setOwnerExists(true);
-      setMsg("Admin created, but the session cookie was not accepted. Please sign in again.");
+    const result = await signUp.email({ email, password, name: name.trim() || email });
+    if (result.error) {
+      setMsg(result.error.message ?? "Admin setup failed.");
       setBusy(false);
       return;
     }
 
-    const res = await signIn.email({ email, password });
-    if (res.error) {
-      setMsg(res.error.message ?? "Sign in failed.");
-      setBusy(false);
-      return;
-    }
+    // Better Auth normally creates the session during signup. Explicitly sign
+    // in once if a proxy/browser did not retain that first response cookie.
+    if (!(await waitForSession())) await signIn.email({ email, password });
     if (await waitForSession()) {
       window.location.replace(`/assistant?auth=${Date.now()}`);
       return;
     }
-    setMsg("Sign in succeeded, but the session cookie was not accepted. Check that you are using the configured HTTPS domain.");
-    setBusy(false);
+    window.location.replace("/login?admin-created=1");
   }
 
-  const loading = ownerExists === null && !msg;
-
   return (
     <main className="mop-setup-shell" style={shell}>
       <section className="mop-setup-brand" style={brandPanel}>
@@ -108,45 +64,26 @@ export default function SetupPage() {
 
       <section className="mop-setup-form" style={formWrap}>
         <div style={formCard}>
-          <p style={eyebrow}>{mode === "signup" ? "FIRST-RUN SETUP" : "WELCOME BACK"}</p>
-          <h2 style={{ fontSize: 27, margin: "8px 0" }}>
-            {loading ? "Checking server…" : mode === "signup" ? "Create Admin account" : "Sign in to MOP-AGENT"}
-          </h2>
-          <p style={{ color: "#8c9bb0", lineHeight: 1.55, marginTop: 0 }}>
-            {mode === "signup"
-              ? "This first account controls providers, team access, projects, and system memory."
-              : "Use your Admin or invited team account."}
-          </p>
-
-          {!loading && (
-            <form onSubmit={submit} style={{ display: "grid", gap: 14, marginTop: 28 }}>
-              {mode === "signup" && (
-                <label style={label}>Display name
-                  <input placeholder="Admin" autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} style={inputStyle} />
-                </label>
-              )}
-              <label style={label}>Email
-                <input placeholder="admin@example.com" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} />
-              </label>
-              <label style={label}>Password
-                <input placeholder="Minimum 8 characters" type="password" autoComplete={mode === "signup" ? "new-password" : "current-password"} required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} style={inputStyle} />
-              </label>
-              <button type="submit" disabled={busy} style={{ ...buttonStyle, opacity: busy ? 0.65 : 1 }}>
-                {busy ? "Please wait…" : mode === "signup" ? "Create Admin & continue" : "Sign in"}
-              </button>
-            </form>
-          )}
+          <p style={eyebrow}>FIRST-RUN SETUP</p>
+          <h1 style={{ fontSize: 27, margin: "8px 0" }}>Create Admin account</h1>
+          <p style={description}>This one-time account controls providers, users, projects, and system memory.</p>
+
+          <form onSubmit={submit} style={{ display: "grid", gap: 14, marginTop: 28 }}>
+            <label style={label}>Display name
+              <input placeholder="Admin" autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} style={inputStyle} />
+            </label>
+            <label style={label}>Email
+              <input placeholder="admin@example.com" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} />
+            </label>
+            <label style={label}>Password
+              <input placeholder="Minimum 8 characters" type="password" autoComplete="new-password" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} style={inputStyle} />
+            </label>
+            <button type="submit" disabled={busy} style={{ ...buttonStyle, opacity: busy ? 0.65 : 1 }}>
+              {busy ? "Creating Admin…" : "Create Admin & continue"}
+            </button>
+          </form>
 
           {msg && <p role="alert" style={{ marginTop: 16, color: "#742220" }}>{msg}</p>}
-
-          {!loading && (
-            <p style={{ marginTop: 22, fontSize: 13, color: "#7f8da2" }}>
-              {mode === "signin" ? "Invited team member? " : "Already created an account? "}
-              <button type="button" onClick={() => { setMode(mode === "signin" ? "signup" : "signin"); setMsg(""); }} style={textButton}>
-                {mode === "signin" ? "Create invited account" : "Sign in"}
-              </button>
-            </p>
-          )}
         </div>
       </section>
     </main>
@@ -159,7 +96,7 @@ const heroLogo: React.CSSProperties = { display: "block", width: "min(72%, 560px
 const formWrap: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center", padding: 28, background: "#fef9e1", borderLeft: "1px solid #2d4a3e" };
 const formCard: React.CSSProperties = { width: "min(100%, 430px)", padding: "38px 34px", border: "1px solid rgba(45,74,62,.45)", borderRadius: 18, background: "#fffdf2", boxShadow: "0 24px 70px rgba(45,74,62,.14)" };
 const eyebrow: React.CSSProperties = { margin: "20px 0 0", color: "#742220", fontSize: 12, fontWeight: 800, letterSpacing: ".16em" };
+const description: React.CSSProperties = { color: "#7f8da2", lineHeight: 1.55, marginTop: 0 };
 const label: React.CSSProperties = { display: "grid", gap: 7, color: "#2d4a3e", fontSize: 13, fontWeight: 650 };
 const inputStyle: React.CSSProperties = { padding: "12px 13px", borderRadius: 9, border: "1px solid rgba(45,74,62,.42)", outline: "none", background: "#fef9e1", color: "#2d4a3e", fontSize: 15 };
 const buttonStyle: React.CSSProperties = { marginTop: 4, padding: "12px 14px", borderRadius: 9, border: "1px solid #742220", background: "#742220", color: "#fef9e1", fontWeight: 750, fontSize: 15, cursor: "pointer" };
-const textButton: React.CSSProperties = { padding: 0, border: 0, background: "none", color: "#742220", cursor: "pointer" };

package/apps/web/app/team/layout.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
-import { requirePageSession } from "@/lib/page-auth";
+import { requireOwnerPage } from "@/lib/page-auth";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
 export default async function TeamLayout({ children }: { children: ReactNode }) {
-  await requirePageSession();
+  await requireOwnerPage();
   return children;
 }

package/apps/web/app/team/page.tsx

@@ -1,86 +1,5 @@
-"use client";
-/** Team — your role, members, and (owner) invite management. */
-import { useEffect, useState } from "react";
+import { redirect } from "next/navigation";
 
-type Me = { user: { email: string; name: string }; role: string };
-type Member = { id: string; email: string; name: string; role: string };
-type Invite = { email: string; role: string; expiresAt: number; usedAt: number | null };
-
-export default function TeamPage() {
-  const [me, setMe] = useState<Me | null>(null);
-  const [members, setMembers] = useState<Member[]>([]);
-  const [invites, setInvites] = useState<Invite[]>([]);
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState<"member" | "owner">("member");
-  const [msg, setMsg] = useState("");
-
-  const isOwner = me?.role === "owner";
-
-  function load() {
-    fetch("/api/me").then((r) => r.json()).then(setMe).catch(() => {});
-    fetch("/api/members").then((r) => (r.ok ? r.json() : { members: [] })).then((d) => setMembers(d.members ?? [])).catch(() => {});
-    fetch("/api/invites").then((r) => (r.ok ? r.json() : { invites: [] })).then((d) => setInvites(d.invites ?? [])).catch(() => {});
-  }
-  useEffect(load, []);
-
-  async function invite(e: React.FormEvent) {
-    e.preventDefault();
-    setMsg("…");
-    const r = await fetch("/api/invites", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email, role }) });
-    setMsg(r.ok ? `✅ invited ${email}` : `error ${r.status}`);
-    setEmail("");
-    load();
-  }
-
-  async function revoke(em: string) {
-    await fetch(`/api/invites?email=${encodeURIComponent(em)}`, { method: "DELETE" });
-    load();
-  }
-
-  return (
-    <main style={{ maxWidth: 640, margin: "0 auto", padding: "40px 24px" }}>
-      <a href="/brain" style={{ color: "#742220" }}>← Brain</a>
-      <h1 style={{ fontSize: 24 }}>👥 Team</h1>
-      <p style={{ opacity: 0.7 }}>You are <strong>{me?.user.email}</strong> · role <strong>{me?.role}</strong></p>
-
-      <h2 style={{ fontSize: 16, marginTop: 20 }}>Members ({members.length})</h2>
-      <ul style={{ listStyle: "none", padding: 0 }}>
-        {members.map((m) => (
-          <li key={m.id} style={row}>{m.role === "owner" ? "👑" : "👤"} {m.email} <span style={{ opacity: 0.5 }}>· {m.role}</span></li>
-        ))}
-        {!isOwner && members.length === 0 && <p style={{ opacity: 0.5 }}>Owner-only view.</p>}
-      </ul>
-
-      {isOwner && (
-        <>
-          <h2 style={{ fontSize: 16, marginTop: 20 }}>Invite a member</h2>
-          <form onSubmit={invite} style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-            <input placeholder="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={inp} />
-            <select value={role} onChange={(e) => setRole(e.target.value as "member" | "owner")} style={inp}>
-              <option value="member">member</option>
-              <option value="owner">owner</option>
-            </select>
-            <button type="submit" style={btn}>Invite</button>
-          </form>
-          {msg && <p style={{ opacity: 0.8 }}>{msg}</p>}
-
-          <h2 style={{ fontSize: 16, marginTop: 20 }}>Pending invites</h2>
-          <ul style={{ listStyle: "none", padding: 0 }}>
-            {invites.filter((i) => !i.usedAt).map((i) => (
-              <li key={i.email} style={row}>
-                ✉️ {i.email} <span style={{ opacity: 0.5 }}>· {i.role}</span>
-                <button onClick={() => revoke(i.email)} style={{ float: "right", ...btn, background: "#742220", borderColor: "#742220", padding: "2px 10px" }}>revoke</button>
-              </li>
-            ))}
-            {invites.filter((i) => !i.usedAt).length === 0 && <p style={{ opacity: 0.5 }}>None.</p>}
-          </ul>
-          <p style={{ opacity: 0.55, fontSize: 13 }}>Invited people sign up at <code>/setup</code> with that exact email.</p>
-        </>
-      )}
-    </main>
-  );
+export default function LegacyTeamPage() {
+  redirect("/settings?section=users");
 }
-
-const row: React.CSSProperties = { border: "1px solid rgba(45,74,62,.28)", borderRadius: 8, padding: "8px 12px", marginBottom: 6, background: "#fffdf2" };
-const inp: React.CSSProperties = { padding: "8px 10px", borderRadius: 8, border: "1px solid rgba(45,74,62,.32)", background: "#fffdf2", color: "#2d4a3e" };
-const btn: React.CSSProperties = { padding: "8px 14px", borderRadius: 8, border: "1px solid #742220", background: "#742220", color: "#fef9e1", cursor: "pointer" };