mop-agent 0.1.0

package/apps/web/app/brain/[projectId]/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+/** Project Brain — overview (state) + recent memory + artifacts, read from mirror. */
+import { use, useEffect, useState } from "react";
+
+type Memory = { id: string; kind: string; summary: string; body: string | null; at: number; actor: string | null };
+type StateRes = { state: unknown; artifacts: Array<{ path: string }>; memoryCount: number; updatedAt: number };
+
+export default function ProjectBrainPage({ params }: { params: Promise<{ projectId: string }> }) {
+  const { projectId } = use(params);
+  const [mem, setMem] = useState<Memory[]>([]);
+  const [info, setInfo] = useState<StateRes | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}/memory`).then((r) => r.json()).then((d) => setMem(d.memory ?? [])).catch(() => {});
+    fetch(`/api/projects/${projectId}/state`).then((r) => r.json()).then((d) => setInfo(d)).catch(() => {});
+  }, [projectId]);
+
+  return (
+    <main style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
+      <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>
+      <h1 style={{ fontSize: 24 }}>{projectId}</h1>
+      <a href={`/chat/${projectId}`} style={{ color: "#7aa2ff" }}>💬 Chat with this project →</a>
+
+      <h2 style={{ fontSize: 16, marginTop: 24, opacity: 0.8 }}>
+        Recent memory ({info?.memoryCount ?? mem.length})
+      </h2>
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {mem.map((m) => (
+          <li key={m.id} style={card}>
+            <span style={{ opacity: 0.6 }}>[{m.kind}]</span> {m.summary}
+            {m.body && <div style={{ opacity: 0.6, fontSize: 13, marginTop: 4 }}>{m.body}</div>}
+          </li>
+        ))}
+        {mem.length === 0 && <p style={{ opacity: 0.5 }}>No memory yet (project may be offline / not synced).</p>}
+      </ul>
+
+      <h2 style={{ fontSize: 16, marginTop: 24, opacity: 0.8 }}>Artifacts ({info?.artifacts?.length ?? 0})</h2>
+      <ul style={{ opacity: 0.7 }}>
+        {(info?.artifacts ?? []).map((a) => <li key={a.path}>{a.path}</li>)}
+      </ul>
+    </main>
+  );
+}
+
+const card: React.CSSProperties = {
+  border: "1px solid #1f2a3a",
+  borderRadius: 8,
+  padding: "10px 14px",
+  marginBottom: 8,
+};

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

@@ -0,0 +1,54 @@
+"use client";
+/** Brain knowledge graph (Fasa 5) — projects ⟷ patterns ⟷ skills, via React Flow. */
+import { useEffect, useMemo, useState } from "react";
+import { ReactFlow, Background, Controls, type Edge, type Node } from "reactflow";
+import "reactflow/dist/style.css";
+
+type GNode = { id: string; label: string; type: "project" | "pattern" | "skill" };
+type GEdge = { from: string; to: string };
+
+const COLOR = { project: "#2b5cff", pattern: "#1a7f4b", skill: "#a15c00" };
+
+export default function GraphPage() {
+  const [data, setData] = useState<{ nodes: GNode[]; edges: GEdge[] }>({ nodes: [], edges: [] });
+
+  useEffect(() => {
+    fetch("/api/graph").then((r) => r.json()).then((d) => setData({ nodes: d.nodes ?? [], edges: d.edges ?? [] })).catch(() => {});
+  }, []);
+
+  const nodes: Node[] = useMemo(() => {
+    const cols: Record<GNode["type"], number> = { project: 0, pattern: 1, skill: 2 };
+    const counts: Record<string, number> = {};
+    return data.nodes.map((n) => {
+      const col = cols[n.type];
+      const row = (counts[n.type] = (counts[n.type] ?? 0) + 1);
+      return {
+        id: n.id,
+        position: { x: col * 280, y: row * 90 },
+        data: { label: `${n.type === "project" ? "📦" : n.type === "pattern" ? "🌐" : "🛠"} ${n.label}` },
+        style: { border: `1px solid ${COLOR[n.type]}`, borderRadius: 8, background: "#111824", color: "#e6edf3", fontSize: 12, width: 240 },
+      };
+    });
+  }, [data.nodes]);
+
+  const edges: Edge[] = useMemo(
+    () => data.edges.map((e, i) => ({ id: `e${i}`, source: e.from, target: e.to, style: { stroke: "#2a3a4f" } })),
+    [data.edges],
+  );
+
+  return (
+    <main style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+      <div style={{ padding: "12px 16px" }}>
+        <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>{" "}
+        <strong>Knowledge Graph</strong>{" "}
+        <span style={{ opacity: 0.6, fontSize: 13 }}>{data.nodes.length} nodes · {data.edges.length} edges</span>
+      </div>
+      <div style={{ flex: 1 }}>
+        <ReactFlow nodes={nodes} edges={edges} fitView>
+          <Background color="#1f2a3a" />
+          <Controls />
+        </ReactFlow>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,167 @@
+"use client";
+/** Brain dashboard — project list with status + links into each Project Brain. */
+import { useEffect, useState } from "react";
+
+type Project = {
+  id: string;
+  name: string;
+  status: string;
+  memoryCount: number;
+  artifactCount: number;
+  mopFlowVersion?: string;
+};
+
+type SemanticNote = { id: string; title: string; body: string; sourceProjects: string[]; confidence: number };
+type Action = { id: string; projectId: string; tool: string; summary: string; status: string; error?: string };
+
+export default function BrainPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [code, setCode] = useState<string>("");
+  const [notes, setNotes] = useState<SemanticNote[]>([]);
+  const [actions, setActions] = useState<Action[]>([]);
+  const [consolidating, setConsolidating] = useState(false);
+  const [consolidateMsg, setConsolidateMsg] = useState("");
+
+  function loadNotes() {
+    fetch("/api/semantic").then((r) => r.json()).then((d) => setNotes(d.notes ?? [])).catch(() => {});
+  }
+  function loadActions() {
+    fetch("/api/actions").then((r) => r.json()).then((d) => setActions(d.actions ?? [])).catch(() => {});
+  }
+
+  useEffect(() => {
+    const load = () => {
+      fetch("/api/projects")
+        .then((r) => r.json())
+        .then((d: { projects: Project[] }) => setProjects(d.projects))
+        .catch(() => {});
+      loadActions();
+    };
+    load();
+    loadNotes();
+    const t = setInterval(load, 4000);
+    return () => clearInterval(t);
+  }, []);
+
+  async function decide(id: string, what: "approve" | "deny") {
+    await fetch(`/api/actions/${id}/${what}`, { method: "POST" });
+    loadActions();
+  }
+
+  async function genCode() {
+    const r = await fetch("/api/link/code", { method: "POST" });
+    const d = await r.json();
+    setCode(r.ok ? d.code : `error: ${d.error}`);
+  }
+
+  async function runConsolidate() {
+    setConsolidating(true);
+    setConsolidateMsg("…");
+    const r = await fetch("/api/consolidate", { method: "POST" });
+    const d = await r.json();
+    setConsolidateMsg(
+      r.ok ? `scanned ${d.scanned} memories → ${d.notesCreated} pattern(s) promoted` : `error: ${d.error}`,
+    );
+    setConsolidating(false);
+    loadNotes();
+  }
+
+  return (
+    <main style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
+      <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>{" "}
+        <a href="/settings" style={{ color: "#7aa2ff" }}>⚙️ Settings →</a>{" "}
+        <a href="/team" style={{ color: "#7aa2ff" }}>👥 Team →</a>
+      </p>
+
+      <div style={{ margin: "20px 0", display: "flex", gap: 12, alignItems: "center" }}>
+        <button onClick={genCode} style={btn}>+ Link project</button>
+        {code && (
+          <code style={{ background: "#111824", padding: "6px 10px", borderRadius: 6 }}>
+            mop-flow-dev link --url {typeof window !== "undefined" ? window.location.origin : ""} --code {code} --project &lt;id&gt;
+          </code>
+        )}
+      </div>
+
+      <section style={{ margin: "8px 0 24px", border: "1px solid #1f2a3a", borderRadius: 8, padding: 16 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <h2 style={{ fontSize: 16, margin: 0, opacity: 0.85 }}>🌐 Main Brain ({notes.length})</h2>
+          <button onClick={runConsolidate} disabled={consolidating} style={{ ...btn, background: "#1a7f4b", borderColor: "#1a7f4b" }}>
+            {consolidating ? "consolidating…" : "⟳ Consolidate"}
+          </button>
+          {consolidateMsg && <span style={{ opacity: 0.65, fontSize: 13 }}>{consolidateMsg}</span>}
+        </div>
+        <p style={{ opacity: 0.55, fontSize: 13, marginBottom: 8 }}>
+          Recurring patterns promoted from project memory (episodic → semantic).
+        </p>
+        {notes.length === 0 ? (
+          <p style={{ opacity: 0.5, fontSize: 13 }}>No patterns yet — link projects, then Consolidate.</p>
+        ) : (
+          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+            {notes.map((n) => (
+              <li key={n.id} style={{ padding: "8px 0", borderTop: "1px solid #14202e" }}>
+                <strong>{n.title}</strong>{" "}
+                <span style={{ opacity: 0.5, fontSize: 12 }}>
+                  · {n.confidence}% · {n.sourceProjects.length} project(s)
+                </span>
+                <div style={{ opacity: 0.65, fontSize: 13, marginTop: 2 }}>{n.body}</div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {actions.length > 0 && (
+        <section style={{ margin: "8px 0 24px", border: "1px solid #3a2f1f", borderRadius: 8, padding: 16 }}>
+          <h2 style={{ fontSize: 16, margin: "0 0 8px", opacity: 0.85 }}>⚠️ Approvals</h2>
+          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+            {actions.map((a) => (
+              <li key={a.id} style={{ padding: "8px 0", borderTop: "1px solid #2a2415" }}>
+                <code style={{ opacity: 0.7 }}>{a.tool}</code> · {a.projectId} — {a.summary}{" "}
+                <span style={{ opacity: 0.5, fontSize: 12 }}>[{a.status}{a.error ? `: ${a.error}` : ""}]</span>
+                {a.status === "pending" && (
+                  <span style={{ float: "right" }}>
+                    <button onClick={() => decide(a.id, "approve")} style={{ ...btn, padding: "4px 10px", background: "#1a7f4b", borderColor: "#1a7f4b" }}>Approve</button>{" "}
+                    <button onClick={() => decide(a.id, "deny")} style={{ ...btn, padding: "4px 10px", background: "#7f1a1a", borderColor: "#7f1a1a" }}>Deny</button>
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <h2 style={{ fontSize: 16, opacity: 0.8 }}>Projects ({projects.length})</h2>
+      {projects.length === 0 && <p style={{ opacity: 0.5 }}>No projects linked yet.</p>}
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {projects.map((p) => (
+          <li key={p.id} style={card}>
+            <a href={`/brain/${p.id}`} style={{ color: "#7aa2ff", textDecoration: "none", fontWeight: 600 }}>
+              {p.name}
+            </a>
+            <span style={{ opacity: 0.6, marginLeft: 8 }}>
+              {p.status === "online" ? "🟢 online" : "⚪ offline"} · {p.memoryCount} memories · {p.artifactCount} artifacts
+            </span>
+            <a href={`/chat/${p.id}`} style={{ float: "right", color: "#7aa2ff" }}>chat →</a>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}
+
+const card: React.CSSProperties = {
+  border: "1px solid #1f2a3a",
+  borderRadius: 8,
+  padding: "12px 16px",
+  marginBottom: 8,
+};
+const btn: React.CSSProperties = {
+  padding: "8px 14px",
+  borderRadius: 8,
+  border: "1px solid #2b5cff",
+  background: "#2b5cff",
+  color: "white",
+  cursor: "pointer",
+};

package/apps/web/app/chat/[projectId]/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+/** Grounded chat with a project — streams the answer from /api/chat. */
+import { use, useRef, useState } from "react";
+
+type Turn = { role: "user" | "assistant"; content: string };
+
+export default function ChatPage({ params }: { params: Promise<{ projectId: string }> }) {
+  const { projectId } = use(params);
+  const [turns, setTurns] = useState<Turn[]>([]);
+  const [input, setInput] = useState("");
+  const [crossProject, setCrossProject] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [saveMsg, setSaveMsg] = useState("");
+  const endRef = useRef<HTMLDivElement>(null);
+
+  async function saveLastToMemory() {
+    const last = [...turns].reverse().find((t) => t.role === "assistant")?.content;
+    if (!last) return;
+    const summary = last.replace(/\s+/g, " ").slice(0, 160);
+    const r = await fetch("/api/actions", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        projectId,
+        tool: "append_memory",
+        args: { kind: "conversation", actor: "agent", summary, body: last },
+        summary: `Save to ${projectId} memory: ${summary.slice(0, 60)}…`,
+      }),
+    });
+    setSaveMsg(r.ok ? "queued for approval → see /brain" : "error");
+  }
+
+  async function send() {
+    const message = input.trim();
+    if (!message || busy) return;
+    setInput("");
+    setBusy(true);
+    setTurns((t) => [...t, { role: "user", content: message }, { role: "assistant", content: "" }]);
+
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ projectId, message, allowCrossProject: crossProject }),
+    });
+
+    if (!res.ok || !res.body) {
+      setTurns((t) => {
+        const copy = [...t];
+        copy[copy.length - 1] = { role: "assistant", content: `[error ${res.status}]` };
+        return copy;
+      });
+      setBusy(false);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const dec = new TextDecoder();
+    let acc = "";
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      acc += dec.decode(value, { stream: true });
+      setTurns((t) => {
+        const copy = [...t];
+        copy[copy.length - 1] = { role: "assistant", content: acc };
+        return copy;
+      });
+      endRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+    setBusy(false);
+  }
+
+  return (
+    <main style={{ maxWidth: 760, margin: "0 auto", padding: "32px 24px", display: "flex", flexDirection: "column", height: "90vh" }}>
+      <a href={`/brain/${projectId}`} style={{ color: "#7aa2ff" }}>← {projectId}</a>
+      <h1 style={{ fontSize: 20 }}>💬 Chat · {projectId}</h1>
+
+      <div style={{ flex: 1, overflowY: "auto", border: "1px solid #1f2a3a", borderRadius: 8, padding: 16, margin: "12px 0" }}>
+        {turns.map((t, i) => (
+          <div key={i} style={{ marginBottom: 14 }}>
+            <strong style={{ color: t.role === "user" ? "#e6edf3" : "#7aa2ff" }}>{t.role === "user" ? "you" : "agent"}</strong>
+            <div style={{ whiteSpace: "pre-wrap", marginTop: 2 }}>{t.content || "…"}</div>
+          </div>
+        ))}
+        <div ref={endRef} />
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+        <label style={{ fontSize: 13, opacity: 0.7 }}>
+          <input type="checkbox" checked={crossProject} onChange={(e) => setCrossProject(e.target.checked)} /> allow cross-project recall
+        </label>
+        <span style={{ fontSize: 13 }}>
+          {saveMsg && <span style={{ opacity: 0.6, marginRight: 8 }}>{saveMsg}</span>}
+          <button onClick={saveLastToMemory} disabled={turns.length === 0} style={{ padding: "4px 10px", borderRadius: 6, border: "1px solid #1f2a3a", background: "#111824", color: "#e6edf3", cursor: "pointer" }}>
+            💾 Save to memory
+          </button>
+        </span>
+      </div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && send()}
+          placeholder="Ask about this project…"
+          style={{ flex: 1, padding: "10px 12px", borderRadius: 8, border: "1px solid #1f2a3a", background: "#111824", color: "#e6edf3" }}
+        />
+        <button onClick={send} disabled={busy} style={{ padding: "10px 16px", borderRadius: 8, border: "1px solid #2b5cff", background: "#2b5cff", color: "white", cursor: "pointer" }}>
+          {busy ? "…" : "Send"}
+        </button>
+      </div>
+    </main>
+  );
+}

package/apps/web/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+export const metadata = {
+  title: "MOP-AGENT",
+  description: "Self-hostable AI brain — remembers everything, federates every project.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          margin: 0,
+          fontFamily:
+            "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+          background: "#0b0f17",
+          color: "#e6edf3",
+        }}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/apps/web/app/page.tsx

@@ -0,0 +1,72 @@
+/**
+ * Status landing (Fasa 1). Shows linked projects + a "Link Project" helper.
+ * TODO Fasa 2+: replace with setup wizard + Brain dashboard (see PRD §13 wireframes).
+ */
+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>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+/** Provider settings — plug an AI key (stored encrypted). */
+import { useEffect, useState } from "react";
+
+type Masked = { configured: boolean; provider?: string; model?: string | null; keyHint?: string };
+
+export default function SettingsPage() {
+  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("");
+
+  function load() {
+    fetch("/api/providers").then((r) => r.json()).then((d) => { setConfig(d.config); setEnv(d.env); }).catch(() => {});
+  }
+  useEffect(load, []);
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    setMsg("…");
+    const r = 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}`);
+    setApiKey("");
+    if (r.ok) setConfig(d.config);
+  }
+
+  return (
+    <main style={{ maxWidth: 520, margin: "0 auto", padding: "48px 24px" }}>
+      <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>
+      <h1 style={{ fontSize: 24 }}>⚙️ Provider settings</h1>
+
+      <div style={{ border: "1px solid #1f2a3a", borderRadius: 8, padding: 14, margin: "12px 0", opacity: 0.9 }}>
+        {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>
+      </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>
+  );
+}
+
+const inp: React.CSSProperties = { padding: "10px 12px", borderRadius: 8, border: "1px solid #1f2a3a", background: "#111824", color: "#e6edf3" };
+const btn: React.CSSProperties = { padding: "10px 12px", borderRadius: 8, border: "1px solid #2b5cff", background: "#2b5cff", color: "white", cursor: "pointer" };

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

@@ -0,0 +1,113 @@
+"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";
+
+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 [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");
+      })
+      .catch(() => setOwnerExists(null));
+  }, []);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    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 = "/";
+    }
+  }
+
+  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>
+
+      <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>
+
+      {msg && <p style={{ marginTop: 16, opacity: 0.85 }}>{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>
+    </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",
+};