mop-agent 0.1.3 → 0.1.5

package/apps/web/app/layout.tsx

@@ -1,8 +1,10 @@
 import type { ReactNode } from "react";
+import "./globals.css";
 
 export const metadata = {
   title: "MOP-AGENT",
   description: "Self-hosted AI assistant with persistent, cross-project memory.",
+  icons: { icon: "/icon.svg" },
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
@@ -13,8 +15,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           margin: 0,
           fontFamily:
             "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
-          background: "#0b0f17",
-          color: "#e6edf3",
+          background: "#fef9e1",
+          color: "#2d4a3e",
         }}
       >
         {children}

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

@@ -33,10 +33,10 @@ export default function SettingsPage() {
 
   return (
     <main style={{ maxWidth: 520, margin: "0 auto", padding: "48px 24px" }}>
-      <a href="/assistant" style={{ color: "#7aa2ff" }}>← Assistant</a>
+      <a href="/assistant" style={{ color: "#742220" }}>← 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 }}>
+      <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."}
@@ -59,5 +59,5 @@ export default function SettingsPage() {
   );
 }
 
-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" };
+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" };

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

@@ -13,12 +13,10 @@ export default function SetupPage() {
   const [mode, setMode] = useState<"signup" | "signin">("signup");
 
   useEffect(() => {
-    Promise.all([
-      fetch("/api/setup/status").then((r) => r.json()) as Promise<{ ownerExists: boolean }>,
-      fetch("/api/me"),
-    ])
-      .then(([status, me]) => {
-        if (me.ok) {
+    fetch("/api/setup/status")
+      .then((r) => r.json() as Promise<{ ownerExists: boolean; authenticated: boolean }>)
+      .then((status) => {
+        if (status.authenticated) {
           window.location.replace("/assistant");
           return;
         }
@@ -57,22 +55,12 @@ export default function SetupPage() {
   const loading = ownerExists === null && !msg;
 
   return (
-    <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>
+    <main className="mop-setup-shell" style={shell}>
+      <section className="mop-setup-brand" style={brandPanel}>
+        <img src="/icon.svg" alt="MOP-AGENT" style={heroLogo} />
       </section>
 
-      <section style={formWrap}>
+      <section className="mop-setup-form" style={formWrap}>
         <div style={formCard}>
           <p style={eyebrow}>{mode === "signup" ? "FIRST-RUN SETUP" : "WELCOME BACK"}</p>
           <h2 style={{ fontSize: 27, margin: "8px 0" }}>
@@ -103,7 +91,7 @@ export default function SetupPage() {
             </form>
           )}
 
-          {msg && <p role="alert" style={{ marginTop: 16, color: "#ff9b9b" }}>{msg}</p>}
+          {msg && <p role="alert" style={{ marginTop: 16, color: "#742220" }}>{msg}</p>}
 
           {!loading && (
             <p style={{ marginTop: 22, fontSize: 13, color: "#7f8da2" }}>
@@ -119,14 +107,13 @@ export default function SetupPage() {
   );
 }
 
-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" };
+const shell: React.CSSProperties = { minHeight: "100vh", display: "grid", gridTemplateColumns: "minmax(0, 1.25fr) minmax(380px, .75fr)", background: "#fef9e1" };
+const brandPanel: React.CSSProperties = { padding: "clamp(48px, 8vw, 110px)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", background: "radial-gradient(circle at 50% 45%, #49685c 0, #2d4a3e 58%, #21382f 100%)" };
+const heroLogo: React.CSSProperties = { display: "block", width: "min(72%, 560px)", height: "auto", maxHeight: "72vh", objectFit: "contain", filter: "drop-shadow(0 24px 34px rgba(0,0,0,.28))" };
+const formWrap: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center", padding: 28, background: "#fef9e1", borderLeft: "1px solid #2d4a3e" };
+const formCard: React.CSSProperties = { width: "min(100%, 430px)", padding: "38px 34px", border: "1px solid rgba(45,74,62,.45)", borderRadius: 18, background: "#fffdf2", boxShadow: "0 24px 70px rgba(45,74,62,.14)" };
+const eyebrow: React.CSSProperties = { margin: "20px 0 0", color: "#742220", fontSize: 12, fontWeight: 800, letterSpacing: ".16em" };
+const label: React.CSSProperties = { display: "grid", gap: 7, color: "#2d4a3e", fontSize: 13, fontWeight: 650 };
+const inputStyle: React.CSSProperties = { padding: "12px 13px", borderRadius: 9, border: "1px solid rgba(45,74,62,.42)", outline: "none", background: "#fef9e1", color: "#2d4a3e", fontSize: 15 };
+const buttonStyle: React.CSSProperties = { marginTop: 4, padding: "12px 14px", borderRadius: 9, border: "1px solid #742220", background: "#742220", color: "#fef9e1", fontWeight: 750, fontSize: 15, cursor: "pointer" };
+const textButton: React.CSSProperties = { padding: 0, border: 0, background: "none", color: "#742220", cursor: "pointer" };

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

@@ -39,7 +39,7 @@ export default function TeamPage() {
 
   return (
     <main style={{ maxWidth: 640, margin: "0 auto", padding: "40px 24px" }}>
-      <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>
+      <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>
 
@@ -69,7 +69,7 @@ export default function TeamPage() {
             {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: "#7f1a1a", borderColor: "#7f1a1a", padding: "2px 10px" }}>revoke</button>
+                <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>}
@@ -81,6 +81,6 @@ export default function TeamPage() {
   );
 }
 
-const row: React.CSSProperties = { border: "1px solid #1f2a3a", borderRadius: 8, padding: "8px 12px", marginBottom: 6 };
-const inp: React.CSSProperties = { padding: "8px 10px", borderRadius: 8, border: "1px solid #1f2a3a", background: "#111824", color: "#e6edf3" };
-const btn: React.CSSProperties = { padding: "8px 14px", borderRadius: 8, border: "1px solid #2b5cff", background: "#2b5cff", color: "white", cursor: "pointer" };
+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/server.ts

@@ -7,14 +7,19 @@ import next from "next";
 import { attachGateway } from "./lib/ws/gateway.js";
 import { startChannels } from "./lib/channels/index.js";
 import { startScheduler } from "./lib/brain/scheduler.js";
+import { runAllMigrations } from "./lib/db/migrate.js";
 
 const dev = process.env.NODE_ENV !== "production";
 const port = Number(process.env.PORT ?? 3000);
 
 const app = next({ dev });
-const handle = app.getRequestHandler();
 
-app.prepare().then(() => {
+async function start() {
+  // Never accept auth/API traffic before both application and Better Auth
+  // tables exist. This also makes service restarts repair missed migrations.
+  await runAllMigrations();
+  await app.prepare();
+  const handle = app.getRequestHandler();
   const server = createServer((req, res) => handle(req, res));
   attachGateway(server);
   server.listen(port, async () => {
@@ -24,4 +29,9 @@ app.prepare().then(() => {
     const jobs = startScheduler();
     if (jobs.length) console.log(`scheduler: ${jobs.join(", ")}`);
   });
+}
+
+start().catch((error) => {
+  console.error("MOP-AGENT failed to start:", error);
+  process.exit(1);
 });

package/installer/mop-agent.mjs

@@ -229,13 +229,20 @@ function cmdUpdate() {
   if (!printInstallLocations()) return;
   console.log(c("bold", "Updating MOP-AGENT…\n"));
   runSteps([
+    // Close SQLite cleanly before migration/rebuild. In particular, this
+    // prevents a root-run update leaving live WAL handles behind.
+    { label: "Stop old service", cmd: "systemctl stop mop-agent", privileged: true, allowFailure: true },
     ...(!managedByNpx ? [{ label: "Pull latest", cmd: `cd ${q(APP_DIR)} && git pull --ff-only` }] : []),
     { label: "Install deps", cmd: `cd ${q(APP_DIR)} && npm ci` },
     { label: "Migrate SQLite", cmd: `cd ${q(`${APP_DIR}/apps/web`)} && npm run db:migrate` },
+    ...(isRoot ? [{ label: "Repair runtime ownership", cmd: `chown -R mop-agent:mop-agent ${q(`${APP_DIR}/data`)}` }] : []),
+    { label: "Remove stale Next.js build", cmd: `rm -rf ${q(`${APP_DIR}/apps/web/.next`)}` },
     { label: "Build", cmd: `cd ${q(`${APP_DIR}/apps/web`)} && npm run build` },
-    { label: "Restart service", cmd: "systemctl restart mop-agent", privileged: true },
+    { label: "Reload systemd", cmd: "systemctl daemon-reload", privileged: true },
+    { label: "Start new service", cmd: "systemctl start mop-agent", privileged: true },
+    { label: "Verify service", cmd: "sleep 2 && systemctl is-active --quiet mop-agent", privileged: true },
   ]);
-  console.log(c("green", "\n✓ updated\n"));
+  console.log(c("green", "\n✓ updated, rebuilt, and service verified\n"));
 }
 
 function cmdStatus() {

package/npm-shrinkwrap.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mop-agent",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Self-hosted AI assistant with persistent cross-project memory, installed with npx mop-agent.",
   "author": "BURHANDEV ENTERPRISE",
   "license": "UNLICENSED",