mop-agent 0.1.15 → 0.1.16

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

@@ -1,6 +1,6 @@
 "use client";
-/** Brain dashboard — project list with status + links into each Project Brain. */
-import { useEffect, useState } from "react";
+
+import { useEffect, useMemo, useState } from "react";
 
 type Project = {
   id: string;
@@ -10,160 +10,162 @@ type Project = {
   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 [code, setCode] = useState("");
   const [notes, setNotes] = useState<SemanticNote[]>([]);
   const [actions, setActions] = useState<Action[]>([]);
   const [consolidating, setConsolidating] = useState(false);
   const [consolidateMsg, setConsolidateMsg] = useState("");
 
+  const memoryTotal = useMemo(() => projects.reduce((total, project) => total + project.memoryCount, 0), [projects]);
+  const onlineTotal = useMemo(() => projects.filter((project) => project.status === "online").length, [projects]);
+
   function loadNotes() {
-    fetch("/api/semantic").then((r) => r.json()).then((d) => setNotes(d.notes ?? [])).catch(() => {});
+    fetch("/api/semantic").then((response) => response.json()).then((result) => setNotes(result.notes ?? [])).catch(() => {});
   }
   function loadActions() {
-    fetch("/api/actions").then((r) => r.json()).then((d) => setActions(d.actions ?? [])).catch(() => {});
+    fetch("/api/actions").then((response) => response.json()).then((result) => setActions(result.actions ?? [])).catch(() => {});
   }
 
   useEffect(() => {
     const load = () => {
       fetch("/api/projects")
-        .then((r) => r.json())
-        .then((d: { projects: Project[] }) => setProjects(d.projects))
+        .then((response) => response.json())
+        .then((result: { projects: Project[] }) => setProjects(result.projects ?? []))
         .catch(() => {});
       loadActions();
     };
     load();
     loadNotes();
-    const t = setInterval(load, 4000);
-    return () => clearInterval(t);
+    const timer = setInterval(load, 4000);
+    return () => clearInterval(timer);
   }, []);
 
-  async function decide(id: string, what: "approve" | "deny") {
-    await fetch(`/api/actions/${id}/${what}`, { method: "POST" });
+  async function decide(id: string, decision: "approve" | "deny") {
+    await fetch(`/api/actions/${id}/${decision}`, { 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 generateCode() {
+    const response = await fetch("/api/link/code", { method: "POST" });
+    const result = await response.json();
+    setCode(response.ok ? result.code : `error: ${result.error}`);
   }
 
-  async function runConsolidate() {
+  async function consolidate() {
     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}`,
-    );
+    setConsolidateMsg("Consolidating project memory…");
+    const response = await fetch("/api/consolidate", { method: "POST" });
+    const result = await response.json();
+    setConsolidateMsg(response.ok
+      ? `${result.scanned} memories scanned · ${result.notesCreated} patterns promoted`
+      : `Unable to consolidate: ${result.error}`);
     setConsolidating(false);
     loadNotes();
   }
 
   return (
-    <main className="mop-page">
-      <header className="mop-page-heading">
+    <main className="mop-page mop-brain-page">
+      <header className="mop-page-heading mop-brain-heading">
         <div>
-          <p className="mop-page-kicker">PERSISTENT MEMORY</p>
+          <p className="mop-page-kicker">MEMORY WORKSPACE</p>
           <h1>Brain</h1>
-          <p>Main Brain and every linked project memory in one place.</p>
+          <p>Main Brain is the shared memory core. Projects feed it context, patterns and skills.</p>
         </div>
-        <a href="/brain/graph" style={{ ...btn, textDecoration: "none" }}>KNOWLEDGE GRAPH →</a>
+        <a href="/brain/graph" className="mop-primary-link">GRAPH VIEW <span>↗</span></a>
       </header>
 
-      <div style={{ margin: "20px 0", display: "flex", gap: 12, alignItems: "center" }}>
-        <button onClick={genCode} style={btn}>+ Link project</button>
-        {code && (
-          <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 className="mop-main-brain mop-panel">
+        <div className="mop-main-brain-orbit" aria-hidden="true">
+          <span className="mop-main-brain-core">M</span>
+          <i /><i /><i />
+        </div>
+        <div className="mop-main-brain-copy">
+          <p className="mop-page-kicker">PRIMARY KNOWLEDGE LAYER</p>
+          <h2>Main Brain</h2>
+          <p>Semantic memory shared across every conversation and linked project. Consolidation promotes recurring episodic knowledge into this core.</p>
+          <div className="mop-main-brain-actions">
+            <button type="button" onClick={consolidate} disabled={consolidating}>{consolidating ? "CONSOLIDATING…" : "⟳ CONSOLIDATE MEMORY"}</button>
+            <a href="/brain/graph">Explore connections →</a>
+          </div>
+          {consolidateMsg && <p className="mop-brain-message">{consolidateMsg}</p>}
+        </div>
+        <div className="mop-main-brain-stats">
+          <div><strong>{notes.length}</strong><span>Semantic patterns</span></div>
+          <div><strong>{memoryTotal}</strong><span>Project memories</span></div>
+          <div><strong>{onlineTotal}/{projects.length}</strong><span>Projects online</span></div>
+        </div>
+      </section>
 
-      <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" }}>
-            {consolidating ? "consolidating…" : "⟳ Consolidate"}
-          </button>
-          {consolidateMsg && <span style={{ opacity: 0.65, fontSize: 13 }}>{consolidateMsg}</span>}
+      <section className="mop-brain-linker mop-panel">
+        <div>
+          <strong>Connect another project</strong>
+          <span>Generate a one-time pairing code for MOP-FLOW.</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>
+        <button type="button" onClick={generateCode}>＋ LINK PROJECT</button>
+        {code && (
+          <code>mop-flow-dev link --url {typeof window !== "undefined" ? window.location.origin : ""} --code {code} --project &lt;id&gt;</code>
         )}
       </section>
 
+      <div className="mop-brain-columns">
+        <section className="mop-panel mop-brain-section">
+          <header>
+            <div><p className="mop-page-kicker">SEMANTIC MEMORY</p><h2>Knowledge patterns</h2></div>
+            <span>{notes.length}</span>
+          </header>
+          {notes.length === 0 ? (
+            <div className="mop-brain-empty"><strong>No patterns yet</strong><p>Link projects and consolidate memory to grow Main Brain.</p></div>
+          ) : (
+            <ul className="mop-brain-note-list">
+              {notes.map((note) => (
+                <li key={note.id}>
+                  <span className="mop-brain-note-dot" />
+                  <div><strong>{note.title}</strong><p>{note.body}</p><small>{note.confidence}% confidence · {note.sourceProjects.length} sources</small></div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section className="mop-panel mop-brain-section">
+          <header>
+            <div><p className="mop-page-kicker">CONNECTED CONTEXT</p><h2>Projects</h2></div>
+            <span>{projects.length}</span>
+          </header>
+          {projects.length === 0 ? (
+            <div className="mop-brain-empty"><strong>No linked projects</strong><p>Use Link Project above to connect the first memory source.</p></div>
+          ) : (
+            <ul className="mop-brain-project-list">
+              {projects.map((project) => (
+                <li key={project.id}>
+                  <span className={`mop-project-status is-${project.status}`} />
+                  <div><a href={`/brain/${project.id}`}>{project.name}</a><small>{project.memoryCount} memories · {project.artifactCount} artifacts</small></div>
+                  <a href={`/chat/${project.id}`}>CHAT →</a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </div>
+
       {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: "#2d4a3e", borderColor: "#2d4a3e" }}>Approve</button>{" "}
-                    <button onClick={() => decide(a.id, "deny")} style={{ ...btn, padding: "4px 10px", background: "#742220", borderColor: "#742220" }}>Deny</button>
-                  </span>
-                )}
+        <section className="mop-panel mop-brain-approvals">
+          <header><div><p className="mop-page-kicker">HUMAN GATE</p><h2>Pending actions</h2></div><span>{actions.filter((action) => action.status === "pending").length} pending</span></header>
+          <ul>
+            {actions.map((action) => (
+              <li key={action.id}>
+                <div><code>{action.tool}</code><strong>{action.summary}</strong><small>{action.projectId} · {action.status}{action.error ? ` · ${action.error}` : ""}</small></div>
+                {action.status === "pending" && <div><button type="button" onClick={() => decide(action.id, "approve")}>APPROVE</button><button type="button" onClick={() => decide(action.id, "deny")}>DENY</button></div>}
               </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: "#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: "#742220" }}>chat →</a>
-          </li>
-        ))}
-      </ul>
     </main>
   );
 }
-
-const card: React.CSSProperties = {
-  border: "1px solid rgba(45,74,62,.28)",
-  borderRadius: 8,
-  padding: "12px 16px",
-  marginBottom: 8,
-};
-const btn: React.CSSProperties = {
-  padding: "8px 14px",
-  borderRadius: 8,
-  border: "1px solid #742220",
-  background: "#742220",
-  color: "#fef9e1",
-  cursor: "pointer",
-};