mop-agent 0.1.2 → 0.1.3

package/README.md

@@ -5,8 +5,8 @@ through MOP-FLOW. It stores project memory, performs semantic recall and
 consolidation, serves grounded chat, and can request approved actions from a
 linked FLOW node.
 
-> **Release status:** npm package `mop-agent@0.1.2` contains the corrected VPS
-> installer flow. After publishing 0.1.2, the canonical installation command is
+> **Release status:** npm package `mop-agent@0.1.3` contains the corrected VPS
+> installer and first-run Admin/Assistant flow. The canonical installation command is
 > exactly `npx mop-agent`.
 
 ## Current status
@@ -60,6 +60,17 @@ The first run copies the npm-packaged runtime from the temporary npx cache into
 - `Delete` — removes the service and nginx configuration while preserving data
   unless purge is explicitly requested.
 
+After installation, open the configured URL in a browser. The application flow
+is intentionally separate from the server installer:
+
+1. On a fresh database, `/` redirects to **Create Admin account**.
+2. Creating the first Admin also signs that account in.
+3. Returning users are shown the login form.
+4. Successful setup/login opens the main **Assistant**. It can be used before
+   any project is linked; Brain is the optional memory/project control surface.
+5. Add OpenRouter or Anthropic under **Providers** for full model responses.
+   Until then, the built-in offline echo provider confirms the chat pipeline.
+
 During `setup`, choose one deployment mode:
 
 - `public` — enter a public domain and optionally obtain a Let's Encrypt HTTPS
@@ -139,7 +150,7 @@ npm run typecheck
 npm run dev:web
 ```
 
-Open `http://localhost:3000/setup`. Native Windows production service and HTTPS
+Open `http://localhost:3000`; it redirects to Admin setup on first run. Native Windows production service and HTTPS
 automation remain TODO; do not use `sudo` in PowerShell or Command Prompt.
 
 ## macOS
@@ -155,7 +166,7 @@ npm run typecheck
 npm run dev:web
 ```
 
-Open `http://localhost:3000/setup`. A launchd/Homebrew/nginx production
+Open `http://localhost:3000`; it redirects to Admin setup on first run. A launchd/Homebrew/nginx production
 installer is not implemented; use a supported Linux VPS for production.
 
 ## Development

package/apps/web/app/api/chat/route.ts

@@ -1,6 +1,7 @@
 /**
  * POST /api/chat — grounded chat. Owner session -> recall project context ->
- * stream the provider's answer. Body: { projectId, message, allowCrossProject? }
+ * stream the provider's answer. projectId is optional for the main assistant.
+ * Body: { message, projectId?, allowCrossProject? }
  */
 import { auth } from "@/lib/auth";
 import { recall } from "@/lib/brain/broker";
@@ -11,20 +12,28 @@ export async function POST(req: Request): Promise<Response> {
   if (!session) return Response.json({ error: "unauthorized" }, { status: 401 });
 
   const { projectId, message, allowCrossProject } = (await req.json()) as {
-    projectId: string;
+    projectId?: string;
     message: string;
     allowCrossProject?: boolean;
   };
-  if (!projectId || !message) {
-    return Response.json({ error: "missing_projectId_or_message" }, { status: 400 });
+  if (typeof message !== "string" || !message.trim()) {
+    return Response.json({ error: "missing_message" }, { status: 400 });
   }
 
-  const pack = await recall({ query: message, projectId, allowCrossProject: !!allowCrossProject });
+  const centralAssistant = !projectId;
+  const pack = await recall({
+    query: message.trim(),
+    projectId,
+    // The main assistant is the authenticated, cross-project surface.
+    allowCrossProject: centralAssistant || !!allowCrossProject,
+  });
   const provider = resolveProvider(session.user.id);
 
   const system = [
-    "You are the MOP-AGENT brain. Answer using the project context below when relevant.",
-    "If the context is empty, say so plainly.",
+    "You are MOP-AGENT, a self-hosted AI assistant with persistent memory.",
+    centralAssistant
+      ? "Help the user directly. Use the available cross-project memory when relevant; a linked project is not required."
+      : "Help the user with the selected project and use its memory when relevant.",
     "",
     pack.toPromptString(),
   ].join("\n");
@@ -33,7 +42,7 @@ export async function POST(req: Request): Promise<Response> {
   const stream = new ReadableStream<Uint8Array>({
     async start(controller) {
       try {
-        for await (const delta of provider.chat({ system, messages: [{ role: "user", content: message }] })) {
+        for await (const delta of provider.chat({ system, messages: [{ role: "user", content: message.trim() }] })) {
           controller.enqueue(encoder.encode(delta));
         }
       } catch (e) {

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { requirePageSession } from "@/lib/page-auth";
+
+export default async function AssistantLayout({ children }: { children: ReactNode }) {
+  await requirePageSession();
+  return children;
+}

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

@@ -0,0 +1,196 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { signOut } from "@/lib/auth-client";
+
+type Turn = { role: "user" | "assistant"; content: string };
+type Project = { id: string; name: string; status: string };
+type ProviderState = { configured: boolean; provider?: string; model?: string | null };
+
+export default function AssistantPage() {
+  const [turns, setTurns] = useState<Turn[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState("");
+  const [provider, setProvider] = useState<ProviderState>({ configured: false });
+  const [name, setName] = useState("Admin");
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [providerUsed, setProviderUsed] = useState("");
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    Promise.all([
+      fetch("/api/projects").then((r) => r.json()),
+      fetch("/api/providers").then((r) => r.json()),
+      fetch("/api/me").then((r) => r.json()),
+    ]).then(([projectData, providerData, me]) => {
+      setProjects(projectData.projects ?? []);
+      setProvider(providerData.config ?? { configured: false });
+      setName(me.user?.name || me.user?.email || "Admin");
+    }).catch(() => {});
+  }, []);
+
+  async function send(prefill?: string) {
+    const message = (prefill ?? input).trim();
+    if (!message || busy) return;
+    setInput("");
+    setBusy(true);
+    setTurns((current) => [...current, { role: "user", content: message }, { role: "assistant", content: "" }]);
+
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        message,
+        projectId: selectedProject || undefined,
+        allowCrossProject: !selectedProject,
+      }),
+    });
+
+    setProviderUsed(res.headers.get("X-Provider") ?? "");
+    if (!res.ok || !res.body) {
+      setTurns((current) => {
+        const next = [...current];
+        next[next.length - 1] = { role: "assistant", content: `Unable to answer (error ${res.status}).` };
+        return next;
+      });
+      setBusy(false);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let answer = "";
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      answer += decoder.decode(value, { stream: true });
+      setTurns((current) => {
+        const next = [...current];
+        next[next.length - 1] = { role: "assistant", content: answer };
+        return next;
+      });
+      endRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+    setBusy(false);
+  }
+
+  async function logout() {
+    await signOut();
+    window.location.replace("/setup");
+  }
+
+  return (
+    <main style={appShell}>
+      <aside style={sidebar}>
+        <a href="/assistant" style={brand}><span style={brandMark}>M</span><strong>MOP-AGENT</strong></a>
+        <nav style={{ display: "grid", gap: 6, marginTop: 34 }}>
+          <a href="/assistant" style={{ ...navItem, ...navActive }}>✦ Assistant</a>
+          <a href="/brain" style={navItem}>◉ Brain</a>
+          <a href="/settings" style={navItem}>⚙ Providers</a>
+          <a href="/team" style={navItem}>♙ Team</a>
+        </nav>
+
+        <div style={{ marginTop: "auto", display: "grid", gap: 10 }}>
+          {!provider.configured && (
+            <a href="/settings" style={setupCard}>
+              <strong style={{ color: "#e9efff" }}>Connect an AI model</strong>
+              <span style={{ fontSize: 12, lineHeight: 1.45 }}>Offline demo is active. Add OpenRouter or Anthropic for full answers.</span>
+            </a>
+          )}
+          <button onClick={logout} style={accountButton} title="Sign out">
+            <span style={avatar}>{name.slice(0, 1).toUpperCase()}</span>
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{name}</span>
+            <span style={{ marginLeft: "auto", opacity: .55 }}>↪</span>
+          </button>
+        </div>
+      </aside>
+
+      <section style={workspace}>
+        <header style={topbar}>
+          <div>
+            <strong>Assistant</strong>
+            <span style={{ color: "#637188", marginLeft: 9, fontSize: 12 }}>{provider.configured ? `${provider.provider}${provider.model ? ` · ${provider.model}` : ""}` : "offline demo"}</span>
+          </div>
+          <label style={{ color: "#8090a6", fontSize: 12 }}>
+            Memory scope&nbsp;
+            <select value={selectedProject} onChange={(e) => setSelectedProject(e.target.value)} style={selectStyle}>
+              <option value="">All memory</option>
+              {projects.map((project) => <option key={project.id} value={project.id}>{project.name}</option>)}
+            </select>
+          </label>
+        </header>
+
+        <div style={conversation}>
+          {turns.length === 0 ? (
+            <div style={welcome}>
+              <div style={assistantOrb}>✦</div>
+              <p style={{ color: "#7d9dff", fontSize: 12, fontWeight: 800, letterSpacing: ".13em" }}>MOP-AGENT IS READY</p>
+              <h1 style={{ fontSize: "clamp(28px, 4vw, 42px)", margin: "8px 0 12px" }}>What are we working on, {name.split(" ")[0]}?</h1>
+              <p style={{ color: "#8290a4", maxWidth: 610, lineHeight: 1.65 }}>
+                Start talking immediately. Link projects when you want MOP-AGENT to remember their state and work across them.
+              </p>
+              <div style={promptGrid}>
+                {["Help me plan today’s work", "What can MOP-AGENT do?", "Summarize what you remember", "Plan a new software project"].map((prompt) => (
+                  <button key={prompt} onClick={() => send(prompt)} style={promptCard}>{prompt}<span>→</span></button>
+                ))}
+              </div>
+              {projects.length === 0 && (
+                <p style={{ fontSize: 13, color: "#6f7d91", marginTop: 24 }}>
+                  No project linked yet—this does not block chat. <a href="/brain" style={{ color: "#88a3ff" }}>Link one from Brain →</a>
+                </p>
+              )}
+            </div>
+          ) : (
+            <div style={{ width: "min(100%, 820px)", margin: "0 auto", padding: "28px 0 160px" }}>
+              {turns.map((turn, index) => (
+                <article key={index} style={{ display: "grid", gridTemplateColumns: "34px 1fr", gap: 13, marginBottom: 26 }}>
+                  <span style={turn.role === "assistant" ? botAvatar : userAvatar}>{turn.role === "assistant" ? "✦" : name.slice(0, 1).toUpperCase()}</span>
+                  <div>
+                    <strong style={{ fontSize: 13, color: turn.role === "assistant" ? "#91a9ff" : "#dce5f4" }}>{turn.role === "assistant" ? "MOP-AGENT" : "You"}</strong>
+                    <div style={{ whiteSpace: "pre-wrap", lineHeight: 1.7, marginTop: 6, color: "#c4cfdd" }}>{turn.content || "Thinking…"}</div>
+                  </div>
+                </article>
+              ))}
+              <div ref={endRef} />
+            </div>
+          )}
+        </div>
+
+        <div style={composerWrap}>
+          <div style={composer}>
+            <textarea value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} placeholder="Message MOP-AGENT…" rows={1} style={textarea} />
+            <button onClick={() => send()} disabled={busy || !input.trim()} style={{ ...sendButton, opacity: busy || !input.trim() ? .45 : 1 }}>↑</button>
+          </div>
+          <div style={{ textAlign: "center", color: "#536074", fontSize: 11, marginTop: 8 }}>
+            {providerUsed ? `Answered by ${providerUsed} · ` : ""}{selectedProject ? "Selected project memory" : "Cross-project memory"}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+const appShell: React.CSSProperties = { minHeight: "100vh", display: "grid", gridTemplateColumns: "235px 1fr", background: "#080c13" };
+const sidebar: React.CSSProperties = { padding: "22px 15px", borderRight: "1px solid #182131", background: "#0b1019", display: "flex", flexDirection: "column", minHeight: "calc(100vh - 44px)" };
+const brand: React.CSSProperties = { display: "flex", alignItems: "center", gap: 10, color: "#eaf0fa", textDecoration: "none", padding: "4px 8px" };
+const brandMark: React.CSSProperties = { width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "linear-gradient(135deg,#4b73ff,#8159e8)", fontSize: 13 };
+const navItem: React.CSSProperties = { color: "#8795a9", textDecoration: "none", padding: "10px 12px", borderRadius: 8, fontSize: 14 };
+const navActive: React.CSSProperties = { color: "#e7edff", background: "#172137", boxShadow: "inset 2px 0 #6687ff" };
+const setupCard: React.CSSProperties = { display: "grid", gap: 5, padding: 12, border: "1px solid #293752", borderRadius: 10, background: "#111a2a", color: "#8090a8", textDecoration: "none" };
+const accountButton: React.CSSProperties = { display: "flex", alignItems: "center", gap: 9, padding: 8, border: 0, borderRadius: 9, background: "transparent", color: "#98a6b9", cursor: "pointer", textAlign: "left" };
+const avatar: React.CSSProperties = { width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "#232f45", color: "#b9c8df", fontSize: 12 };
+const workspace: React.CSSProperties = { minWidth: 0, minHeight: "100vh", position: "relative", display: "flex", flexDirection: "column", background: "radial-gradient(circle at 50% 4%, #10182a 0, #080c13 38%)" };
+const topbar: React.CSSProperties = { height: 62, padding: "0 24px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid #182131", background: "rgba(8,12,19,.72)", backdropFilter: "blur(16px)" };
+const selectStyle: React.CSSProperties = { color: "#b9c5d6", border: "1px solid #273348", borderRadius: 7, padding: "6px 8px", background: "#0d131e" };
+const conversation: React.CSSProperties = { flex: 1, overflowY: "auto", padding: "0 28px" };
+const welcome: React.CSSProperties = { minHeight: "calc(100vh - 220px)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", paddingBottom: 60 };
+const assistantOrb: React.CSSProperties = { width: 58, height: 58, borderRadius: 18, display: "grid", placeItems: "center", fontSize: 24, color: "white", background: "linear-gradient(135deg,#456fff,#8b56df)", boxShadow: "0 15px 55px rgba(85,105,255,.28)" };
+const promptGrid: React.CSSProperties = { width: "min(100%, 650px)", display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 10, marginTop: 28 };
+const promptCard: React.CSSProperties = { display: "flex", justifyContent: "space-between", padding: "14px 15px", borderRadius: 10, border: "1px solid #222e42", background: "rgba(16,23,36,.72)", color: "#aebacc", cursor: "pointer", textAlign: "left" };
+const botAvatar: React.CSSProperties = { width: 32, height: 32, borderRadius: 9, display: "grid", placeItems: "center", background: "linear-gradient(135deg,#456fff,#8058df)", color: "white" };
+const userAvatar: React.CSSProperties = { ...botAvatar, background: "#263248", color: "#c5d0df", fontSize: 12 };
+const composerWrap: React.CSSProperties = { position: "absolute", left: 0, right: 0, bottom: 0, padding: "28px 30px 18px", background: "linear-gradient(transparent,#080c13 28%)" };
+const composer: React.CSSProperties = { width: "min(calc(100% - 32px), 800px)", margin: "0 auto", display: "flex", alignItems: "flex-end", gap: 10, padding: "10px 10px 10px 15px", border: "1px solid #2a3951", borderRadius: 14, background: "#101722", boxShadow: "0 15px 55px rgba(0,0,0,.28)" };
+const textarea: React.CSSProperties = { flex: 1, resize: "none", border: 0, outline: 0, background: "transparent", color: "#e7edf5", font: "inherit", lineHeight: 1.55, padding: "5px 0" };
+const sendButton: React.CSSProperties = { width: 34, height: 34, border: 0, borderRadius: 9, background: "#5577f7", color: "white", fontSize: 18, cursor: "pointer" };

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { requirePageSession } from "@/lib/page-auth";
+
+export default async function BrainLayout({ children }: { children: ReactNode }) {
+  await requirePageSession();
+  return children;
+}

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

@@ -68,6 +68,7 @@ export default function BrainPage() {
 
   return (
     <main style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
+      <p style={{ margin: 0 }}><a href="/assistant" style={{ color: "#7aa2ff" }}>← Assistant</a></p>
       <h1 style={{ fontSize: 24 }}>🧠 Brain</h1>
       <p style={{ opacity: 0.65 }}>
         Main Brain + linked project brains. <a href="/brain/graph" style={{ color: "#7aa2ff" }}>🕸 Knowledge graph →</a>{" "}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { requirePageSession } from "@/lib/page-auth";
+
+export default async function ChatLayout({ children }: { children: ReactNode }) {
+  await requirePageSession();
+  return children;
+}

package/apps/web/app/layout.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export const metadata = {
   title: "MOP-AGENT",
-  description: "Self-hostable AI brain — remembers everything, federates every project.",
+  description: "Self-hosted AI assistant with persistent, cross-project memory.",
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

package/apps/web/app/page.tsx

@@ -1,72 +1,11 @@
+import { requirePageSession } from "@/lib/page-auth";
+import { redirect } from "next/navigation";
+
 /**
- * Status landing (Fasa 1). Shows linked projects + a "Link Project" helper.
- * TODO Fasa 2+: replace with setup wizard + Brain dashboard (see PRD §13 wireframes).
+ * Product entry point. First-run and signed-out users belong in the account
+ * setup flow; authenticated users land in the assistant, not the Brain tools.
  */
-async function getProjects(): Promise<{ projects: Array<Record<string, unknown>> }> {
-  try {
-    const res = await fetch(`http://localhost:${process.env.PORT ?? 3000}/api/projects`, {
-      cache: "no-store",
-    });
-    return (await res.json()) as { projects: Array<Record<string, unknown>> };
-  } catch {
-    return { projects: [] };
-  }
-}
-
 export default async function Home() {
-  const { projects } = await getProjects();
-  return (
-    <main style={{ maxWidth: 820, margin: "0 auto", padding: "48px 24px" }}>
-      <h1 style={{ fontSize: 28, marginBottom: 4 }}>🧠 MOP-AGENT</h1>
-      <p style={{ opacity: 0.7, marginTop: 0 }}>
-        The Brain — remembers everything, federates every project. Status: scaffolding (Fasa 1).
-      </p>
-
-      <section style={{ marginTop: 32 }}>
-        <h2 style={{ fontSize: 18 }}>Linked projects ({projects.length})</h2>
-        {projects.length === 0 ? (
-          <p style={{ opacity: 0.6 }}>No projects linked yet.</p>
-        ) : (
-          <ul style={{ listStyle: "none", padding: 0 }}>
-            {projects.map((p) => (
-              <li
-                key={String(p.id)}
-                style={{
-                  border: "1px solid #1f2a3a",
-                  borderRadius: 8,
-                  padding: "12px 16px",
-                  marginBottom: 8,
-                }}
-              >
-                <strong>{String(p.name)}</strong>{" "}
-                <span style={{ opacity: 0.6 }}>
-                  · {String(p.status)} · {String(p.memoryCount)} memories
-                </span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
-      <section style={{ marginTop: 32 }}>
-        <h2 style={{ fontSize: 18 }}>Link a project (dev)</h2>
-        <pre
-          style={{
-            background: "#111824",
-            border: "1px solid #1f2a3a",
-            borderRadius: 8,
-            padding: 16,
-            overflowX: "auto",
-          }}
-        >
-{`# 1) get a pairing code
-curl -X POST http://localhost:3000/api/link/code
-
-# 2) in a project dir that has .MOP/, run the dev connector
-mop-flow-dev link --url http://localhost:3000 --code <CODE> --project <id>
-mop-flow-dev serve`}
-        </pre>
-      </section>
-    </main>
-  );
+  await requirePageSession();
+  redirect("/assistant");
 }

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { requirePageSession } from "@/lib/page-auth";
+
+export default async function SettingsLayout({ children }: { children: ReactNode }) {
+  await requirePageSession();
+  return children;
+}

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

@@ -33,7 +33,7 @@ export default function SettingsPage() {
 
   return (
     <main style={{ maxWidth: 520, margin: "0 auto", padding: "48px 24px" }}>
-      <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>
+      <a href="/assistant" style={{ color: "#7aa2ff" }}>← Assistant</a>
       <h1 style={{ fontSize: 24 }}>⚙️ Provider settings</h1>
 
       <div style={{ border: "1px solid #1f2a3a", borderRadius: 8, padding: 14, margin: "12px 0", opacity: 0.9 }}>

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

@@ -1,113 +1,132 @@
 "use client";
-/**
- * Owner setup (Fasa 2). First run only: create the owner account.
- * Once an owner exists, the form locks (signups closed — single-owner self-host).
- */
+
 import { useEffect, useState } from "react";
-import { signUp, signIn } from "@/lib/auth-client";
+import { signIn, signUp } from "@/lib/auth-client";
 
 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<string>("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
   const [mode, setMode] = useState<"signup" | "signin">("signup");
 
   useEffect(() => {
-    fetch("/api/setup/status")
-      .then((r) => r.json())
-      .then((d: { ownerExists: boolean }) => {
-        setOwnerExists(d.ownerExists);
-        setMode(d.ownerExists ? "signin" : "signup");
+    Promise.all([
+      fetch("/api/setup/status").then((r) => r.json()) as Promise<{ ownerExists: boolean }>,
+      fetch("/api/me"),
+    ])
+      .then(([status, me]) => {
+        if (me.ok) {
+          window.location.replace("/assistant");
+          return;
+        }
+        setOwnerExists(status.ownerExists);
+        setMode(status.ownerExists ? "signin" : "signup");
       })
-      .catch(() => setOwnerExists(null));
+      .catch(() => setMsg("Unable to reach MOP-AGENT. Please refresh."));
   }, []);
 
   async function submit(e: React.FormEvent) {
     e.preventDefault();
-    setMsg("…");
+    setBusy(true);
+    setMsg("");
+
     if (mode === "signup") {
-      const res = await signUp.email({ email, password, name: name || email });
-      setMsg(res.error ? `Error: ${res.error.message}` : "Owner created. You can sign in.");
-      if (!res.error) setMode("signin");
-    } else {
-      const res = await signIn.email({ email, password });
-      setMsg(res.error ? `Error: ${res.error.message}` : "Signed in ✓ → go to /");
-      if (!res.error) window.location.href = "/";
+      const res = await signUp.email({ email, password, name: name.trim() || email });
+      if (res.error) {
+        setMsg(res.error.message ?? "Account setup failed.");
+        setBusy(false);
+        return;
+      }
+      // Better Auth creates the first session together with the owner account.
+      window.location.replace("/assistant");
+      return;
+    }
+
+    const res = await signIn.email({ email, password });
+    if (res.error) {
+      setMsg(res.error.message ?? "Sign in failed.");
+      setBusy(false);
+      return;
     }
+    window.location.replace("/assistant");
   }
 
+  const loading = ownerExists === null && !msg;
+
   return (
-    <main style={{ maxWidth: 420, margin: "0 auto", padding: "64px 24px" }}>
-      <h1 style={{ fontSize: 24 }}>🧠 MOP-AGENT · Setup</h1>
-      <p style={{ opacity: 0.7 }}>
-        {ownerExists === null
-          ? "…"
-          : ownerExists
-            ? "Owner exists — sign in."
-            : "Create the owner account (first run)."}
-      </p>
+    <main style={shell}>
+      <section style={brandPanel}>
+        <div style={logo}>M</div>
+        <p style={eyebrow}>SELF-HOSTED AI ASSISTANT</p>
+        <h1 style={{ fontSize: "clamp(32px, 5vw, 52px)", lineHeight: 1.05, margin: "12px 0 18px" }}>
+          Your assistant.<br />Your server. Your memory.
+        </h1>
+        <p style={{ color: "#9aa8bd", fontSize: 17, lineHeight: 1.7, maxWidth: 520 }}>
+          MOP-AGENT gives you one private assistant across your projects. Brain is the memory layer behind it—not the first hurdle.
+        </p>
+        <div style={featureRow}>
+          <span>◆ Private</span><span>◆ Persistent memory</span><span>◆ Cross-project</span>
+        </div>
+      </section>
+
+      <section 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>
 
-      <form onSubmit={submit} style={{ display: "grid", gap: 12, marginTop: 24 }}>
-        {mode === "signup" && (
-          <input
-            placeholder="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            style={inputStyle}
-          />
-        )}
-        <input
-          placeholder="Email"
-          type="email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          style={inputStyle}
-        />
-        <input
-          placeholder="Password (min 8)"
-          type="password"
-          required
-          minLength={8}
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          style={inputStyle}
-        />
-        <button type="submit" style={buttonStyle}>
-          {mode === "signup" ? "Create owner" : "Sign in"}
-        </button>
-      </form>
+          {!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>
+          )}
 
-      {msg && <p style={{ marginTop: 16, opacity: 0.85 }}>{msg}</p>}
+          {msg && <p role="alert" style={{ marginTop: 16, color: "#ff9b9b" }}>{msg}</p>}
 
-      <p style={{ marginTop: 16, fontSize: 13, opacity: 0.7 }}>
-        {mode === "signin" ? "Invited to join the team? " : "Already have an account? "}
-        <button
-          type="button"
-          onClick={() => setMode(mode === "signin" ? "signup" : "signin")}
-          style={{ background: "none", border: "none", color: "#7aa2ff", cursor: "pointer", padding: 0 }}
-        >
-          {mode === "signin" ? "Create account with your invited email" : "Sign in"}
-        </button>
-      </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>
   );
 }
 
-const inputStyle: React.CSSProperties = {
-  padding: "10px 12px",
-  borderRadius: 8,
-  border: "1px solid #1f2a3a",
-  background: "#111824",
-  color: "#e6edf3",
-};
-const buttonStyle: React.CSSProperties = {
-  padding: "10px 12px",
-  borderRadius: 8,
-  border: "1px solid #2b5cff",
-  background: "#2b5cff",
-  color: "white",
-  cursor: "pointer",
-};
+const shell: React.CSSProperties = { minHeight: "100vh", display: "grid", gridTemplateColumns: "minmax(0, 1.25fr) minmax(380px, .75fr)", background: "radial-gradient(circle at 18% 12%, #17233c 0, #0b0f17 36%, #080b11 100%)" };
+const brandPanel: React.CSSProperties = { padding: "clamp(48px, 8vw, 110px)", display: "flex", flexDirection: "column", justifyContent: "center" };
+const formWrap: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center", padding: 28, background: "rgba(5, 8, 13, .58)", borderLeft: "1px solid #1b2637" };
+const formCard: React.CSSProperties = { width: "min(100%, 430px)", padding: "38px 34px", border: "1px solid #243149", borderRadius: 18, background: "rgba(13, 19, 30, .94)", boxShadow: "0 24px 80px rgba(0,0,0,.35)" };
+const logo: React.CSSProperties = { width: 48, height: 48, borderRadius: 14, display: "grid", placeItems: "center", fontSize: 22, fontWeight: 800, background: "linear-gradient(135deg, #4f7cff, #8f5cff)", boxShadow: "0 10px 32px rgba(79,124,255,.32)" };
+const eyebrow: React.CSSProperties = { margin: "20px 0 0", color: "#7d9dff", fontSize: 12, fontWeight: 800, letterSpacing: ".16em" };
+const featureRow: React.CSSProperties = { display: "flex", flexWrap: "wrap", gap: 20, color: "#8695aa", fontSize: 13, marginTop: 34 };
+const label: React.CSSProperties = { display: "grid", gap: 7, color: "#bac6d8", fontSize: 13, fontWeight: 650 };
+const inputStyle: React.CSSProperties = { padding: "12px 13px", borderRadius: 9, border: "1px solid #2a3951", outline: "none", background: "#0c121d", color: "#eef3fa", fontSize: 15 };
+const buttonStyle: React.CSSProperties = { marginTop: 4, padding: "12px 14px", borderRadius: 9, border: "1px solid #5278ff", background: "linear-gradient(135deg, #416cff, #6d54e8)", color: "white", fontWeight: 750, fontSize: 15, cursor: "pointer" };
+const textButton: React.CSSProperties = { padding: 0, border: 0, background: "none", color: "#85a1ff", cursor: "pointer" };

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { requirePageSession } from "@/lib/page-auth";
+
+export default async function TeamLayout({ children }: { children: ReactNode }) {
+  await requirePageSession();
+  return children;
+}

package/apps/web/lib/brain/broker.ts

@@ -52,7 +52,8 @@ export class ContextPack {
 
 export type RecallOptions = {
   query: string;
-  projectId: string;
+  /** Omit for the main assistant, which recalls shared/all-project memory. */
+  projectId?: string;
   allowCrossProject?: boolean;
   k?: number;
 };
@@ -71,7 +72,7 @@ export async function recall(opts: RecallOptions): Promise<ContextPack> {
     : [];
   const order = new Map(hits.map((h, i) => [h.refId, i]));
   const episodic: RecalledMemory[] = episodicRows
-    .filter((m) => m.projectId === opts.projectId || opts.allowCrossProject === true)
+    .filter((m) => opts.allowCrossProject === true || (!!opts.projectId && m.projectId === opts.projectId))
     .sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0))
     .map((m) => ({
       id: m.id,

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

@@ -0,0 +1,12 @@
+import { auth, ownerExists } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+/** Server-side guard for authenticated application pages. */
+export async function requirePageSession() {
+  if (!ownerExists()) redirect("/setup");
+
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) redirect("/setup");
+  return session;
+}

package/npm-shrinkwrap.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mop-agent",
-  "version": "0.1.2",
-  "description": "Self-hosted AI brain and control plane for MOP-FLOW projects, installed with npx mop-agent.",
+  "version": "0.1.3",
+  "description": "Self-hosted AI assistant with persistent cross-project memory, installed with npx mop-agent.",
   "author": "BURHANDEV ENTERPRISE",
   "license": "UNLICENSED",
   "keywords": [