mop-agent 0.1.6 → 0.1.8

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

@@ -1,63 +1,217 @@
 "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 };
+type Invite = { email: string; role: string; expiresAt: number; usedAt: number | null };
 
 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 [invites, setInvites] = useState<Invite[]>([]);
+  const [email, setEmail] = 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(() => {});
+    fetch("/api/invites").then((r) => (r.ok ? r.json() : { invites: [] })).then((data) => setInvites(data.invites ?? [])).catch(() => {});
+  }
+
+  useEffect(() => {
+    const requested = new URLSearchParams(window.location.search).get("section");
+    if (requested === "users") setSection("users");
+    loadProvider();
+    loadUsers();
+  }, []);
 
-  function load() {
-    fetch("/api/providers").then((r) => r.json()).then((d) => { setConfig(d.config); setEnv(d.env); }).catch(() => {});
+  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 invite(e: React.FormEvent) {
+    e.preventDefault();
+    setUserMsg("Creating invite…");
+    const response = await fetch("/api/invites", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ email, role }),
+    });
+    setUserMsg(response.ok ? `Invite created for ${email}.` : `Unable to invite (error ${response.status}).`);
+    if (response.ok) setEmail("");
+    loadUsers();
+  }
+
+  async function revoke(inviteEmail: string) {
+    await fetch(`/api/invites?email=${encodeURIComponent(inviteEmail)}`, { method: "DELETE" });
+    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={invitePanel}>
+                <h3 style={{ margin: 0, fontSize: 15 }}>Invite a user</h3>
+                <form onSubmit={invite} style={{ display: "grid", gridTemplateColumns: "minmax(180px,1fr) 130px auto", gap: 9, marginTop: 13 }} className="mop-user-invite-form">
+                  <input placeholder="user@example.com" type="email" required value={email} onChange={(e) => setEmail(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}>CREATE INVITE</button>
+                </form>
+                {userMsg && <p style={messageStyle}>{userMsg}</p>}
+              </div>
+
+              <h3 style={{ margin: "26px 0 10px", fontSize: 14 }}>Pending invites</h3>
+              <div style={{ display: "grid", gap: 7 }}>
+                {invites.filter((item) => !item.usedAt).map((item) => (
+                  <div key={item.email} style={inviteRow}>
+                    <span><strong>{item.email}</strong><small style={{ ...muted, marginLeft: 8 }}>{item.role === "owner" ? "admin" : "member"}</small></span>
+                    <button onClick={() => revoke(item.email)} style={secondaryButton}>REVOKE</button>
+                  </div>
+                ))}
+                {invites.filter((item) => !item.usedAt).length === 0 && <p style={muted}>No pending invites.</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 secondaryButton: CSSProperties = { padding: "6px 10px", border: "1px solid #742220", background: "transparent", color: "#742220", fontSize: 9, 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 invitePanel: CSSProperties = { marginTop: 26, padding: 16, border: "1px solid rgba(45,74,62,.27)", background: "rgba(254,249,225,.55)" };
+const inviteRow: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: 10, border: "1px solid rgba(45,74,62,.22)" };

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

@@ -3,6 +3,30 @@
 import { useEffect, useState } from "react";
 import { signIn, signUp } from "@/lib/auth-client";
 
+type SetupStatus = { ownerExists: boolean; authenticated: boolean };
+
+async function getSetupStatus(): Promise<SetupStatus> {
+  const response = await fetch(`/api/setup/status?t=${Date.now()}`, {
+    cache: "no-store",
+    credentials: "include",
+    headers: { "cache-control": "no-cache" },
+  });
+  if (!response.ok) throw new Error(`setup status ${response.status}`);
+  return response.json() as Promise<SetupStatus>;
+}
+
+async function waitForSession(): Promise<boolean> {
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    try {
+      if ((await getSetupStatus()).authenticated) return true;
+    } catch {
+      // A short deployment/network gap should not strand the form in busy mode.
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+  return false;
+}
+
 export default function SetupPage() {
   const [ownerExists, setOwnerExists] = useState<boolean | null>(null);
   const [email, setEmail] = useState("");
@@ -13,11 +37,10 @@ export default function SetupPage() {
   const [mode, setMode] = useState<"signup" | "signin">("signup");
 
   useEffect(() => {
-    fetch("/api/setup/status")
-      .then((r) => r.json() as Promise<{ ownerExists: boolean; authenticated: boolean }>)
+    getSetupStatus()
       .then((status) => {
         if (status.authenticated) {
-          window.location.replace("/assistant");
+          window.location.replace(`/assistant?auth=${Date.now()}`);
           return;
         }
         setOwnerExists(status.ownerExists);
@@ -38,8 +61,26 @@ export default function SetupPage() {
         setBusy(false);
         return;
       }
-      // Better Auth creates the first session together with the owner account.
-      window.location.replace("/assistant");
+      // 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.");
+      setBusy(false);
       return;
     }
 
@@ -49,7 +90,12 @@ export default function SetupPage() {
       setBusy(false);
       return;
     }
-    window.location.replace("/assistant");
+    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);
   }
 
   const loading = ownerExists === null && !msg;

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

@@ -1,7 +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" };

package/apps/web/components/AppShell.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { signOut } from "@/lib/auth-client";
+
+export type AppViewer = {
+  name: string;
+  email: string;
+  role: "owner" | "member";
+};
+
+function pageTitle(pathname: string): string {
+  if (pathname === "/assistant") return "Assistant";
+  if (pathname === "/brain/graph") return "Knowledge Graph";
+  if (pathname.startsWith("/brain/")) return "Project Brain";
+  if (pathname.startsWith("/brain")) return "Brain";
+  if (pathname.startsWith("/chat/")) return "Project Chat";
+  if (pathname.startsWith("/settings")) return "Settings";
+  return "MOP-AGENT";
+}
+
+export function AppShell({ viewer, children }: { viewer: AppViewer; children: ReactNode }) {
+  const pathname = usePathname();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const isAdmin = viewer.role === "owner";
+  const title = pageTitle(pathname);
+
+  async function logout() {
+    await signOut();
+    window.location.replace("/setup");
+  }
+
+  const nav = [
+    { href: "/assistant", label: "Assistant", icon: "✦", active: pathname.startsWith("/assistant") || pathname.startsWith("/chat/") },
+    { href: "/brain", label: "Brain", icon: "◉", active: pathname.startsWith("/brain") },
+  ];
+
+  return (
+    <div className="mop-app-frame">
+      <header className="mop-app-topbar">
+        <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
+          <img src="/icon.svg" alt="" />
+          <span>MOP-AGENT</span>
+        </a>
+        <div className="mop-app-topbar-main">
+          <button
+            className="mop-menu-toggle"
+            type="button"
+            aria-label="Toggle navigation"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((open) => !open)}
+          >
+            ☰
+          </button>
+          <div className="mop-topbar-title">
+            <span className="mop-live-dot" />
+            <strong>{title}</strong>
+          </div>
+          <div className="mop-topbar-center">MOP MEMORYCORE</div>
+          <div className="mop-topbar-meta">
+            <span>{isAdmin ? "ADMIN" : "MEMBER"}</span>
+            <span className="mop-version">v0.1.8</span>
+          </div>
+        </div>
+      </header>
+
+      {menuOpen && <button className="mop-sidebar-scrim" aria-label="Close navigation" onClick={() => setMenuOpen(false)} />}
+
+      <aside className={`mop-app-sidebar${menuOpen ? " is-open" : ""}`}>
+        <div className="mop-nav-section">
+          <p>WORKSPACE</p>
+          <nav>
+            {nav.map((item) => (
+              <a key={item.href} href={item.href} className={item.active ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                <span className="mop-nav-icon">{item.icon}</span>
+                <span>{item.label}</span>
+              </a>
+            ))}
+          </nav>
+        </div>
+
+        {isAdmin && (
+          <div className="mop-nav-section">
+            <p>ADMIN</p>
+            <nav>
+              <a href="/settings" className={pathname.startsWith("/settings") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                <span className="mop-nav-icon">⚙</span>
+                <span>Settings</span>
+              </a>
+            </nav>
+          </div>
+        )}
+
+        <div className="mop-sidebar-spacer" />
+        <button className="mop-account-card" type="button" onClick={logout} title="Sign out">
+          <span className="mop-account-avatar">{viewer.name.slice(0, 1).toUpperCase()}</span>
+          <span className="mop-account-copy">
+            <strong>{viewer.name}</strong>
+            <small>{isAdmin ? "Administrator" : "Member"}</small>
+          </span>
+          <span aria-hidden="true">↪</span>
+        </button>
+      </aside>
+
+      <main className="mop-app-main">{children}</main>
+    </div>
+  );
+}

package/apps/web/lib/page-auth.ts

@@ -1,12 +1,22 @@
-import { auth, ownerExists } from "@/lib/auth";
+import { auth, getRole, ownerExists } from "@/lib/auth";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
+import { unstable_noStore as noStore } from "next/cache";
 
 /** Server-side guard for authenticated application pages. */
 export async function requirePageSession() {
+  // Auth redirects are cookie-specific and must never enter Next's route cache.
+  noStore();
   if (!ownerExists()) redirect("/setup");
 
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) redirect("/setup");
   return session;
 }
+
+/** Server-side guard for pages that expose installation-wide administration. */
+export async function requireOwnerPage() {
+  const session = await requirePageSession();
+  if (getRole(session.user.id) !== "owner") redirect("/assistant");
+  return session;
+}

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "mop-agent",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mop-agent",
-      "version": "0.1.6",
+      "version": "0.1.8",
       "license": "UNLICENSED",
       "workspaces": [
         "packages/*",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mop-agent",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Self-hosted AI assistant with persistent cross-project memory, installed with npx mop-agent.",
   "author": "BURHANDEV ENTERPRISE",
   "license": "UNLICENSED",
@@ -33,6 +33,7 @@
   "files": [
     "apps/web/app",
     "apps/web/bin",
+    "apps/web/components",
     "apps/web/lib",
     "apps/web/scripts",
     "apps/web/.env.example",