mop-agent 0.1.6 → 0.1.8

package/README.md

@@ -5,16 +5,16 @@ 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.6` contains the corrected VPS
-> installer and first-run Admin/Assistant flow. The canonical installation command is
-> exactly `npx mop-agent`.
+> **Release status:** npm package `mop-agent@0.1.8` contains the corrected VPS
+> installer, first-run Admin/Assistant flow, and shared retro application shell.
+> The canonical installation command is exactly `npx mop-agent`.
 
 ## Current status
 
 The application core through Fasa 7 foundation is implemented: reverse-WSS
 project links, SQLite + sqlite-vec storage, Better Auth, semantic recall,
-provider settings, consolidation, approval-based write-back, Telegram and
-Discord adapters, skills, graph UI, execution backends, and team invites.
+admin-only provider/user settings, consolidation, approval-based write-back,
+Telegram and Discord adapters, skills, graph UI, execution backends, and user invites.
 
 The npm bootstrap stages the packaged application durably at `/opt/mop-agent`,
 uses the proven SQLite + sqlite-vec backend, and asks for sudo only for specific

package/apps/web/app/api/setup/status/route.ts

@@ -3,5 +3,13 @@ import { auth, ownerExists } from "@/lib/auth";
 
 export async function GET(req: Request): Promise<Response> {
   const session = await auth.api.getSession({ headers: req.headers });
-  return Response.json({ ownerExists: ownerExists(), authenticated: !!session });
+  return Response.json(
+    { ownerExists: ownerExists(), authenticated: !!session },
+    {
+      headers: {
+        "Cache-Control": "private, no-store, no-cache, max-age=0, must-revalidate",
+        "Vary": "Cookie",
+      },
+    },
+  );
 }

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

@@ -1,7 +1,20 @@
 import type { ReactNode } from "react";
+import { getRole } from "@/lib/auth";
 import { requirePageSession } from "@/lib/page-auth";
+import { AppShell } from "@/components/AppShell";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 export default async function AssistantLayout({ children }: { children: ReactNode }) {
-  await requirePageSession();
-  return children;
+  const session = await requirePageSession();
+  return (
+    <AppShell viewer={{
+      name: session.user.name || session.user.email,
+      email: session.user.email,
+      role: getRole(session.user.id) ?? "member",
+    }}>
+      {children}
+    </AppShell>
+  );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
+import type { CSSProperties } from "react";
 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 };
@@ -75,122 +75,88 @@ export default function AssistantPage() {
     setBusy(false);
   }
 
-  async function logout() {
-    await signOut();
-    window.location.replace("/setup");
-  }
-
   return (
-    <main className="mop-assistant-shell" style={appShell}>
-      <aside className="mop-assistant-sidebar" 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: "#fef9e1" }}>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>
+    <section className="mop-assistant-page">
+      <div className="mop-assistant-toolbar">
+        <div>
+          <strong style={{ fontFamily: '"SFMono-Regular", Consolas, monospace', color: "#742220" }}>LIVE ASSISTANT</strong>
+          <span style={{ color: "rgba(45,74,62,.62)", marginLeft: 10, fontSize: 12 }}>
+            {provider.configured ? `${provider.provider}${provider.model ? ` · ${provider.model}` : ""}` : "offline demo"}
+          </span>
         </div>
-      </aside>
+        <label style={{ color: "#2d4a3e", 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>
+      </div>
 
-      <section style={workspace}>
-        <header style={topbar}>
-          <div>
-            <strong>Assistant</strong>
-            <span style={{ color: "rgba(45,74,62,.68)", marginLeft: 9, fontSize: 12 }}>{provider.configured ? `${provider.provider}${provider.model ? ` · ${provider.model}` : ""}` : "offline demo"}</span>
-          </div>
-          <label style={{ color: "#2d4a3e", 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: "#742220", 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: "rgba(45,74,62,.72)", 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 className="mop-prompt-grid" 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: "rgba(45,74,62,.68)", marginTop: 24 }}>
-                  No project linked yet—this does not block chat. <a href="/brain" style={{ color: "#742220" }}>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" ? "#742220" : "#2d4a3e" }}>{turn.role === "assistant" ? "MOP-AGENT" : "You"}</strong>
-                    <div style={{ whiteSpace: "pre-wrap", lineHeight: 1.7, marginTop: 6, color: "#2d4a3e" }}>{turn.content || "Thinking…"}</div>
-                  </div>
-                </article>
+      <div className="mop-assistant-conversation">
+        {turns.length === 0 ? (
+          <div className="mop-assistant-welcome">
+            <div style={assistantLogo}><img src="/icon.svg" alt="MOP-AGENT" /></div>
+            <p style={{ color: "#742220", fontSize: 11, fontWeight: 900, letterSpacing: ".16em" }}>MOP-AGENT IS READY</p>
+            <h1 style={{ fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: "clamp(26px, 4vw, 40px)", margin: "8px 0 12px" }}>
+              What are we working on, {name.split(" ")[0]}?
+            </h1>
+            <p style={{ color: "rgba(45,74,62,.7)", 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 className="mop-prompt-grid" 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 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>
+            {projects.length === 0 && (
+              <p style={{ fontSize: 13, color: "rgba(45,74,62,.68)", marginTop: 24 }}>
+                No project linked yet—this does not block chat. <a href="/brain" style={{ color: "#742220" }}>Link one from Brain →</a>
+              </p>
+            )}
           </div>
-          <div style={{ textAlign: "center", color: "rgba(45,74,62,.62)", fontSize: 11, marginTop: 8 }}>
-            {providerUsed ? `Answered by ${providerUsed} · ` : ""}{selectedProject ? "Selected project memory" : "Cross-project memory"}
+        ) : (
+          <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" ? "#742220" : "#2d4a3e" }}>{turn.role === "assistant" ? "MOP-AGENT" : "You"}</strong>
+                  <div style={{ whiteSpace: "pre-wrap", lineHeight: 1.7, marginTop: 6, color: "#2d4a3e" }}>{turn.content || "Thinking…"}</div>
+                </div>
+              </article>
+            ))}
+            <div ref={endRef} />
           </div>
+        )}
+      </div>
+
+      <div className="mop-assistant-composer-wrap">
+        <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: "rgba(45,74,62,.62)", fontSize: 11, marginTop: 8 }}>
+          {providerUsed ? `Answered by ${providerUsed} · ` : ""}{selectedProject ? "Selected project memory" : "Cross-project memory"}
         </div>
-      </section>
-    </main>
+      </div>
+    </section>
   );
 }
 
-const appShell: React.CSSProperties = { minHeight: "100vh", display: "grid", gridTemplateColumns: "235px 1fr", background: "#fef9e1" };
-const sidebar: React.CSSProperties = { padding: "22px 15px", borderRight: "1px solid #20382f", background: "#2d4a3e", display: "flex", flexDirection: "column", minHeight: "calc(100vh - 44px)" };
-const brand: React.CSSProperties = { display: "flex", alignItems: "center", gap: 10, color: "#fef9e1", textDecoration: "none", padding: "4px 8px" };
-const brandMark: React.CSSProperties = { width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "#742220", color: "#fef9e1", fontSize: 13 };
-const navItem: React.CSSProperties = { color: "rgba(254,249,225,.76)", textDecoration: "none", padding: "10px 12px", borderRadius: 8, fontSize: 14 };
-const navActive: React.CSSProperties = { color: "#fef9e1", background: "#742220", boxShadow: "inset 2px 0 #fef9e1" };
-const setupCard: React.CSSProperties = { display: "grid", gap: 5, padding: 12, border: "1px solid rgba(254,249,225,.45)", borderRadius: 10, background: "#742220", color: "rgba(254,249,225,.74)", textDecoration: "none" };
-const accountButton: React.CSSProperties = { display: "flex", alignItems: "center", gap: 9, padding: 8, border: 0, borderRadius: 9, background: "transparent", color: "#fef9e1", cursor: "pointer", textAlign: "left" };
-const avatar: React.CSSProperties = { width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "#742220", color: "#fef9e1", fontSize: 12 };
-const workspace: React.CSSProperties = { minWidth: 0, minHeight: "100vh", position: "relative", display: "flex", flexDirection: "column", background: "radial-gradient(circle at 50% 4%, #fffdf2 0, #fef9e1 58%)" };
-const topbar: React.CSSProperties = { height: 62, padding: "0 24px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid rgba(45,74,62,.25)", background: "rgba(254,249,225,.88)", backdropFilter: "blur(16px)" };
-const selectStyle: React.CSSProperties = { color: "#2d4a3e", border: "1px solid rgba(45,74,62,.38)", borderRadius: 7, padding: "6px 8px", background: "#fffdf2" };
-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: "#fef9e1", background: "#742220", boxShadow: "0 15px 55px rgba(116,34,32,.22)" };
-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 rgba(45,74,62,.3)", background: "#fffdf2", color: "#2d4a3e", cursor: "pointer", textAlign: "left" };
-const botAvatar: React.CSSProperties = { width: 32, height: 32, borderRadius: 9, display: "grid", placeItems: "center", background: "#742220", color: "#fef9e1" };
-const userAvatar: React.CSSProperties = { ...botAvatar, background: "#2d4a3e", color: "#fef9e1", fontSize: 12 };
-const composerWrap: React.CSSProperties = { position: "absolute", left: 0, right: 0, bottom: 0, padding: "28px 30px 18px", background: "linear-gradient(transparent,#fef9e1 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 rgba(45,74,62,.42)", borderRadius: 14, background: "#fffdf2", boxShadow: "0 15px 45px rgba(45,74,62,.16)" };
-const textarea: React.CSSProperties = { flex: 1, resize: "none", border: 0, outline: 0, background: "transparent", color: "#2d4a3e", font: "inherit", lineHeight: 1.55, padding: "5px 0" };
-const sendButton: React.CSSProperties = { width: 34, height: 34, border: 0, borderRadius: 9, background: "#742220", color: "#fef9e1", fontSize: 18, cursor: "pointer" };
+const selectStyle: CSSProperties = { color: "#2d4a3e", border: "1px solid rgba(45,74,62,.42)", padding: "6px 8px", background: "#fffdf2" };
+const assistantLogo: CSSProperties = { width: 86, height: 86, display: "grid", placeItems: "center", overflow: "hidden", background: "#2d4a3e", border: "2px solid #742220", boxShadow: "5px 5px 0 rgba(45,74,62,.18)" };
+const promptGrid: CSSProperties = { width: "min(100%, 650px)", display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 10, marginTop: 28 };
+const promptCard: CSSProperties = { display: "flex", justifyContent: "space-between", padding: "14px 15px", border: "1px solid rgba(45,74,62,.38)", borderBottomWidth: 3, background: "#fffdf2", color: "#2d4a3e", cursor: "pointer", textAlign: "left" };
+const botAvatar: CSSProperties = { width: 32, height: 32, display: "grid", placeItems: "center", background: "#742220", color: "#fef9e1" };
+const userAvatar: CSSProperties = { ...botAvatar, background: "#2d4a3e", fontSize: 12 };
+const composer: 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 rgba(45,74,62,.48)", borderBottomWidth: 4, background: "#fffdf2", boxShadow: "4px 4px 0 rgba(45,74,62,.13)" };
+const textarea: CSSProperties = { flex: 1, resize: "none", border: 0, outline: 0, boxShadow: "none", background: "transparent", color: "#2d4a3e", font: "inherit", lineHeight: 1.55, padding: "5px 0" };
+const sendButton: CSSProperties = { width: 34, height: 34, border: 0, background: "#742220", color: "#fef9e1", fontSize: 18, cursor: "pointer" };

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

@@ -16,7 +16,7 @@ export default function ProjectBrainPage({ params }: { params: Promise<{ project
   }, [projectId]);
 
   return (
-    <main style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
+    <main className="mop-page">
       <a href="/brain" style={{ color: "#742220" }}>← Brain</a>
       <h1 style={{ fontSize: 24 }}>{projectId}</h1>
       <a href={`/chat/${projectId}`} style={{ color: "#742220" }}>💬 Chat with this project →</a>

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

@@ -37,7 +37,7 @@ export default function GraphPage() {
   );
 
   return (
-    <main style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
+    <main style={{ height: "calc(100vh - 70px)", display: "flex", flexDirection: "column" }}>
       <div style={{ padding: "12px 16px" }}>
         <a href="/brain" style={{ color: "#742220" }}>← Brain</a>{" "}
         <strong>Knowledge Graph</strong>{" "}

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

@@ -1,7 +1,20 @@
 import type { ReactNode } from "react";
+import { getRole } from "@/lib/auth";
 import { requirePageSession } from "@/lib/page-auth";
+import { AppShell } from "@/components/AppShell";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 export default async function BrainLayout({ children }: { children: ReactNode }) {
-  await requirePageSession();
-  return children;
+  const session = await requirePageSession();
+  return (
+    <AppShell viewer={{
+      name: session.user.name || session.user.email,
+      email: session.user.email,
+      role: getRole(session.user.id) ?? "member",
+    }}>
+      {children}
+    </AppShell>
+  );
 }

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

@@ -67,14 +67,15 @@ export default function BrainPage() {
   }
 
   return (
-    <main style={{ maxWidth: 900, margin: "0 auto", padding: "40px 24px" }}>
-      <p style={{ margin: 0 }}><a href="/assistant" style={{ color: "#742220" }}>← 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: "#742220" }}>🕸 Knowledge graph →</a>{" "}
-        <a href="/settings" style={{ color: "#742220" }}>⚙️ Settings →</a>{" "}
-        <a href="/team" style={{ color: "#742220" }}>👥 Team →</a>
-      </p>
+    <main className="mop-page">
+      <header className="mop-page-heading">
+        <div>
+          <p className="mop-page-kicker">PERSISTENT MEMORY</p>
+          <h1>Brain</h1>
+          <p>Main Brain and every linked project memory in one place.</p>
+        </div>
+        <a href="/brain/graph" style={{ ...btn, textDecoration: "none" }}>KNOWLEDGE GRAPH →</a>
+      </header>
 
       <div style={{ margin: "20px 0", display: "flex", gap: 12, alignItems: "center" }}>
         <button onClick={genCode} style={btn}>+ Link project</button>
@@ -85,7 +86,7 @@ export default function BrainPage() {
         )}
       </div>
 
-      <section style={{ margin: "8px 0 24px", border: "1px solid rgba(45,74,62,.28)", borderRadius: 8, padding: 16, background: "#fffdf2" }}>
+      <section className="mop-panel" style={{ margin: "8px 0 24px", 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: "#2d4a3e", borderColor: "#2d4a3e" }}>

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

@@ -71,7 +71,7 @@ export default function ChatPage({ params }: { params: Promise<{ projectId: stri
   }
 
   return (
-    <main style={{ maxWidth: 760, margin: "0 auto", padding: "32px 24px", display: "flex", flexDirection: "column", height: "90vh" }}>
+    <main style={{ maxWidth: 860, margin: "0 auto", padding: "28px 24px", display: "flex", flexDirection: "column", height: "calc(100vh - 70px)" }}>
       <a href={`/brain/${projectId}`} style={{ color: "#742220" }}>← {projectId}</a>
       <h1 style={{ fontSize: 20 }}>💬 Chat · {projectId}</h1>
 

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

@@ -1,7 +1,20 @@
 import type { ReactNode } from "react";
+import { getRole } from "@/lib/auth";
 import { requirePageSession } from "@/lib/page-auth";
+import { AppShell } from "@/components/AppShell";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 export default async function ChatLayout({ children }: { children: ReactNode }) {
-  await requirePageSession();
-  return children;
+  const session = await requirePageSession();
+  return (
+    <AppShell viewer={{
+      name: session.user.name || session.user.email,
+      email: session.user.email,
+      role: getRole(session.user.id) ?? "member",
+    }}>
+      {children}
+    </AppShell>
+  );
 }