mop-agent 0.1.4 → 0.1.5

package/README.md

@@ -5,7 +5,7 @@ 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.4` contains the corrected VPS
+> **Release status:** npm package `mop-agent@0.1.5` contains the corrected VPS
 > installer and first-run Admin/Assistant flow. The canonical installation command is
 > exactly `npx mop-agent`.
 

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

@@ -1,6 +1,7 @@
-/** GET /api/setup/status — whether the owner account has been created yet. */
-import { ownerExists } from "@/lib/auth";
+/** GET /api/setup/status — first-run state plus a non-error session check. */
+import { auth, ownerExists } from "@/lib/auth";
 
-export async function GET(): Promise<Response> {
-  return Response.json({ ownerExists: ownerExists() });
+export async function GET(req: Request): Promise<Response> {
+  const session = await auth.api.getSession({ headers: req.headers });
+  return Response.json({ ownerExists: ownerExists(), authenticated: !!session });
 }

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

@@ -81,8 +81,8 @@ export default function AssistantPage() {
   }
 
   return (
-    <main style={appShell}>
-      <aside style={sidebar}>
+    <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>
@@ -94,7 +94,7 @@ export default function AssistantPage() {
         <div style={{ marginTop: "auto", display: "grid", gap: 10 }}>
           {!provider.configured && (
             <a href="/settings" style={setupCard}>
-              <strong style={{ color: "#e9efff" }}>Connect an AI model</strong>
+              <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>
           )}
@@ -110,9 +110,9 @@ export default function AssistantPage() {
         <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>
+            <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: "#8090a6", fontSize: 12 }}>
+          <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>
@@ -125,19 +125,19 @@ export default function AssistantPage() {
           {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>
+              <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: "#8290a4", maxWidth: 610, lineHeight: 1.65 }}>
+              <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 style={promptGrid}>
+              <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: "#6f7d91", marginTop: 24 }}>
-                  No project linked yet—this does not block chat. <a href="/brain" style={{ color: "#88a3ff" }}>Link one from Brain →</a>
+                <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>
@@ -147,8 +147,8 @@ export default function AssistantPage() {
                 <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>
+                    <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>
               ))}
@@ -162,7 +162,7 @@ export default function AssistantPage() {
             <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 }}>
+          <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>
         </div>
@@ -171,26 +171,26 @@ export default function AssistantPage() {
   );
 }
 
-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 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: "white", background: "linear-gradient(135deg,#456fff,#8b56df)", boxShadow: "0 15px 55px rgba(85,105,255,.28)" };
+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 #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" };
+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" };

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

@@ -17,9 +17,9 @@ export default function ProjectBrainPage({ params }: { params: Promise<{ project
 
   return (
     <main style={{ maxWidth: 900, 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 }}>{projectId}</h1>
-      <a href={`/chat/${projectId}`} style={{ color: "#7aa2ff" }}>💬 Chat with this project →</a>
+      <a href={`/chat/${projectId}`} style={{ color: "#742220" }}>💬 Chat with this project →</a>
 
       <h2 style={{ fontSize: 16, marginTop: 24, opacity: 0.8 }}>
         Recent memory ({info?.memoryCount ?? mem.length})
@@ -43,7 +43,8 @@ export default function ProjectBrainPage({ params }: { params: Promise<{ project
 }
 
 const card: React.CSSProperties = {
-  border: "1px solid #1f2a3a",
+  border: "1px solid rgba(45,74,62,.28)",
+  background: "#fffdf2",
   borderRadius: 8,
   padding: "10px 14px",
   marginBottom: 8,

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

@@ -7,7 +7,7 @@ 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" };
+const COLOR = { project: "#742220", pattern: "#2d4a3e", skill: "#9a6738" };
 
 export default function GraphPage() {
   const [data, setData] = useState<{ nodes: GNode[]; edges: GEdge[] }>({ nodes: [], edges: [] });
@@ -26,7 +26,7 @@ export default function GraphPage() {
         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 },
+        style: { border: `1px solid ${COLOR[n.type]}`, borderRadius: 8, background: "#fffdf2", color: "#2d4a3e", fontSize: 12, width: 240 },
       };
     });
   }, [data.nodes]);
@@ -39,13 +39,13 @@ export default function GraphPage() {
   return (
     <main style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
       <div style={{ padding: "12px 16px" }}>
-        <a href="/brain" style={{ color: "#7aa2ff" }}>← Brain</a>{" "}
+        <a href="/brain" style={{ color: "#742220" }}>← 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" />
+          <Background color="#b8b49f" />
           <Controls />
         </ReactFlow>
       </div>

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

@@ -68,27 +68,27 @@ 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>
+      <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: "#7aa2ff" }}>🕸 Knowledge graph →</a>{" "}
-        <a href="/settings" style={{ color: "#7aa2ff" }}>⚙️ Settings →</a>{" "}
-        <a href="/team" style={{ color: "#7aa2ff" }}>👥 Team →</a>
+        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>
 
       <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 }}>
+          <code style={{ background: "#fffdf2", 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 }}>
+      <section style={{ margin: "8px 0 24px", border: "1px solid rgba(45,74,62,.28)", borderRadius: 8, padding: 16, background: "#fffdf2" }}>
         <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" }}>
+          <button onClick={runConsolidate} disabled={consolidating} style={{ ...btn, background: "#2d4a3e", borderColor: "#2d4a3e" }}>
             {consolidating ? "consolidating…" : "⟳ Consolidate"}
           </button>
           {consolidateMsg && <span style={{ opacity: 0.65, fontSize: 13 }}>{consolidateMsg}</span>}
@@ -123,8 +123,8 @@ export default function BrainPage() {
                 <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>
+                    <button onClick={() => decide(a.id, "approve")} style={{ ...btn, padding: "4px 10px", background: "#2d4a3e", borderColor: "#2d4a3e" }}>Approve</button>{" "}
+                    <button onClick={() => decide(a.id, "deny")} style={{ ...btn, padding: "4px 10px", background: "#742220", borderColor: "#742220" }}>Deny</button>
                   </span>
                 )}
               </li>
@@ -138,13 +138,13 @@ export default function BrainPage() {
       <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 }}>
+            <a href={`/brain/${p.id}`} style={{ color: "#742220", 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>
+            <a href={`/chat/${p.id}`} style={{ float: "right", color: "#742220" }}>chat →</a>
           </li>
         ))}
       </ul>
@@ -153,7 +153,7 @@ export default function BrainPage() {
 }
 
 const card: React.CSSProperties = {
-  border: "1px solid #1f2a3a",
+  border: "1px solid rgba(45,74,62,.28)",
   borderRadius: 8,
   padding: "12px 16px",
   marginBottom: 8,
@@ -161,8 +161,8 @@ const card: React.CSSProperties = {
 const btn: React.CSSProperties = {
   padding: "8px 14px",
   borderRadius: 8,
-  border: "1px solid #2b5cff",
-  background: "#2b5cff",
-  color: "white",
+  border: "1px solid #742220",
+  background: "#742220",
+  color: "#fef9e1",
   cursor: "pointer",
 };

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

@@ -72,13 +72,13 @@ 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" }}>
-      <a href={`/brain/${projectId}`} style={{ color: "#7aa2ff" }}>← {projectId}</a>
+      <a href={`/brain/${projectId}`} style={{ color: "#742220" }}>← {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" }}>
+      <div style={{ flex: 1, overflowY: "auto", border: "1px solid rgba(45,74,62,.28)", borderRadius: 8, padding: 16, margin: "12px 0", background: "#fffdf2" }}>
         {turns.map((t, i) => (
           <div key={i} style={{ marginBottom: 14 }}>
-            <strong style={{ color: t.role === "user" ? "#e6edf3" : "#7aa2ff" }}>{t.role === "user" ? "you" : "agent"}</strong>
+            <strong style={{ color: t.role === "user" ? "#2d4a3e" : "#742220" }}>{t.role === "user" ? "you" : "agent"}</strong>
             <div style={{ whiteSpace: "pre-wrap", marginTop: 2 }}>{t.content || "…"}</div>
           </div>
         ))}
@@ -91,7 +91,7 @@ export default function ChatPage({ params }: { params: Promise<{ projectId: stri
         </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" }}>
+          <button onClick={saveLastToMemory} disabled={turns.length === 0} style={{ padding: "4px 10px", borderRadius: 6, border: "1px solid rgba(45,74,62,.32)", background: "#fffdf2", color: "#2d4a3e", cursor: "pointer" }}>
             💾 Save to memory
           </button>
         </span>
@@ -102,9 +102,9 @@ export default function ChatPage({ params }: { params: Promise<{ projectId: stri
           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" }}
+          style={{ flex: 1, padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(45,74,62,.32)", background: "#fffdf2", color: "#2d4a3e" }}
         />
-        <button onClick={send} disabled={busy} style={{ padding: "10px 16px", borderRadius: 8, border: "1px solid #2b5cff", background: "#2b5cff", color: "white", cursor: "pointer" }}>
+        <button onClick={send} disabled={busy} style={{ padding: "10px 16px", borderRadius: 8, border: "1px solid #742220", background: "#742220", color: "#fef9e1", cursor: "pointer" }}>
           {busy ? "…" : "Send"}
         </button>
       </div>

package/apps/web/app/globals.css

@@ -0,0 +1,21 @@
+:root {
+  --mop-red: #742220;
+  --mop-green: #2d4a3e;
+  --mop-cream: #fef9e1;
+  --mop-paper: #fffdf2;
+  --mop-muted: #8b8b7f;
+}
+
+* { box-sizing: border-box; }
+html { color-scheme: light; }
+body { min-height: 100vh; }
+::selection { background: #742220; color: #fef9e1; }
+
+@media (max-width: 760px) {
+  .mop-setup-shell { grid-template-columns: 1fr !important; }
+  .mop-setup-brand { min-height: 34vh; padding: 36px !important; }
+  .mop-setup-form { border-left: 0 !important; border-top: 1px solid #2d4a3e !important; }
+  .mop-assistant-shell { grid-template-columns: 1fr !important; }
+  .mop-assistant-sidebar { display: none !important; }
+  .mop-prompt-grid { grid-template-columns: 1fr !important; }
+}