mop-agent 0.1.9 → 0.1.11

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.9` contains the corrected VPS
+> **Release status:** npm package `mop-agent@0.1.10` contains the corrected VPS
 > installer, one-time Admin setup/login flow, and shared retro application shell.
 > The canonical installation command is exactly `npx mop-agent`.
 

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

@@ -2,16 +2,13 @@
 
 import type { CSSProperties } from "react";
 import { useEffect, useRef, useState } from "react";
+import { useMemoryCore } from "@/components/AppShell";
 
 type Turn = { role: "user" | "assistant"; content: string };
-type Project = { id: string; name: string; status: string };
-type ProviderState = { configured: boolean; provider?: string; model?: string | null };
 
 export default function AssistantPage() {
+  const { selectedProject, setSelectedProject, projects, provider } = useMemoryCore();
   const [turns, setTurns] = useState<Turn[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProject, setSelectedProject] = useState("");
-  const [provider, setProvider] = useState<ProviderState>({ configured: false });
   const [name, setName] = useState("Admin");
   const [input, setInput] = useState("");
   const [busy, setBusy] = useState(false);
@@ -19,17 +16,12 @@ export default function AssistantPage() {
   const endRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    Promise.all([
-      fetch("/api/projects").then((r) => r.json()),
-      fetch("/api/providers").then((r) => r.json()),
-      fetch("/api/me").then((r) => r.json()),
-    ]).then(([projectData, providerData, me]) => {
-      setProjects(projectData.projects ?? []);
-      setProvider(providerData.config ?? { configured: false });
+    fetch("/api/me").then((r) => r.json()).then((me) => {
       setName(me.user?.name || me.user?.email || "Admin");
     }).catch(() => {});
   }, []);
 
+
   async function send(prefill?: string) {
     const message = (prefill ?? input).trim();
     if (!message || busy) return;
@@ -77,22 +69,6 @@ export default function AssistantPage() {
 
   return (
     <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>
-        <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>
-
       <div className="mop-assistant-conversation">
         {turns.length === 0 ? (
           <div className="mop-assistant-welcome">
@@ -152,7 +128,7 @@ export default function AssistantPage() {
 }
 
 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 assistantLogo: CSSProperties = { width: 86, height: 86, display: "grid", placeItems: "center" };
 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" };

package/apps/web/app/globals.css

@@ -411,11 +411,12 @@ button {
 
 .mop-settings-grid {
   display: grid;
-  grid-template-columns: 210px minmax(0, 1fr);
+  grid-template-columns: 1fr;
   gap: 18px;
   align-items: start;
 }
 
+
 .mop-settings-nav { padding: 9px; }
 .mop-settings-nav button {
   width: 100%;
@@ -504,4 +505,65 @@ button {
   .mop-settings-nav { display: flex; gap: 7px; }
   .mop-settings-nav button { justify-content: center; }
   .mop-user-invite-form { grid-template-columns: 1fr !important; }
+  .mop-settings-sidebar {
+    position: fixed;
+    top: 62px;
+    left: 0;
+    bottom: 0;
+    width: min(82vw, 280px);
+    height: auto;
+    transform: translateX(-105%);
+    transition: transform 160ms steps(4, end);
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .mop-settings-sidebar.is-open {
+    transform: translateX(0);
+  }
+}
+
+.mop-settings-sidebar {
+  grid-area: sidebar;
+  position: sticky;
+  top: 70px;
+  height: calc(100vh - 70px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 15px 9px 12px;
+  border-right: 2px solid rgba(45, 74, 62, .46);
+}
+
+.mop-back-workspace-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  margin-bottom: 9px;
+  padding: 9px 12px;
+  border: 1px solid var(--mop-red);
+  background: var(--mop-red);
+  color: var(--mop-cream);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 11px;
+  font-weight: 900;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 80ms steps(2, end), box-shadow 80ms steps(2, end);
+  box-shadow: 2px 2px 0 rgba(45, 74, 62, .17);
+}
+
+.mop-back-workspace-btn:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 3px 3px 0 rgba(45, 74, 62, .24);
+  color: var(--mop-cream);
+}
+
+.mop-back-workspace-btn:active {
+  transform: translate(1px, 1px);
+  box-shadow: 0 0 0 rgba(45, 74, 62, 0);
 }
+

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

@@ -2,13 +2,13 @@
 
 import type { CSSProperties } from "react";
 import { useEffect, useState } from "react";
+import { useMemoryCore } from "@/components/AppShell";
 
-type Section = "providers" | "users";
 type Masked = { configured: boolean; provider?: string; model?: string | null; keyHint?: string };
 type Member = { id: string; email: string; name: string; role: string };
 
 export default function SettingsPage() {
-  const [section, setSection] = useState<Section>("providers");
+  const { settingsSection: section } = useMemoryCore();
   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");
@@ -34,17 +34,10 @@ export default function SettingsPage() {
   }
 
   useEffect(() => {
-    const requested = new URLSearchParams(window.location.search).get("section");
-    if (requested === "users") setSection("users");
     loadProvider();
     loadUsers();
   }, []);
 
-  function chooseSection(next: Section) {
-    setSection(next);
-    const url = next === "providers" ? "/settings" : "/settings?section=users";
-    window.history.replaceState(null, "", url);
-  }
 
   async function saveProvider(e: React.FormEvent) {
     e.preventDefault();
@@ -90,15 +83,6 @@ export default function SettingsPage() {
       </header>
 
       <div className="mop-settings-grid">
-        <aside className="mop-settings-nav mop-panel" aria-label="Settings sections">
-          <button className={section === "providers" ? "is-active" : ""} onClick={() => chooseSection("providers")}>
-            <span>◇</span><strong>Providers</strong>
-          </button>
-          <button className={section === "users" ? "is-active" : ""} onClick={() => chooseSection("users")}>
-            <span>♙</span><strong>Users</strong>
-          </button>
-        </aside>
-
         <section className="mop-settings-content mop-panel">
           {section === "providers" ? (
             <>

package/apps/web/components/AppShell.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect, createContext, useContext } from "react";
 import { signOut } from "@/lib/auth-client";
 
 export type AppViewer = {
@@ -11,6 +11,31 @@ export type AppViewer = {
   role: "owner" | "member";
 };
 
+export type Project = { id: string; name: string; status: string };
+export type ProviderState = { configured: boolean; provider?: string; model?: string | null };
+
+interface MemoryCoreContextType {
+  selectedProject: string;
+  setSelectedProject: (id: string) => void;
+  projects: Project[];
+  provider: ProviderState;
+  settingsSection: "providers" | "users";
+  setSettingsSection: (section: "providers" | "users") => void;
+}
+
+const MemoryCoreContext = createContext<MemoryCoreContextType | undefined>(undefined);
+
+export function useMemoryCore() {
+  const context = useContext(MemoryCoreContext);
+  if (!context) {
+    throw new Error("useMemoryCore must be used within a MemoryCoreProvider");
+  }
+  return context;
+}
+
+const selectStyle = { color: "#2d4a3e", border: "1px solid rgba(45,74,62,.42)", padding: "6px 8px", background: "#fffdf2" };
+
+
 function pageTitle(pathname: string): string {
   if (pathname === "/assistant") return "Assistant";
   if (pathname === "/brain/graph") return "Knowledge Graph";
@@ -27,84 +52,156 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
   const isAdmin = viewer.role === "owner";
   const title = pageTitle(pathname);
 
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [provider, setProvider] = useState<ProviderState>({ configured: false });
+  const [selectedProject, setSelectedProject] = useState("");
+  const [settingsSection, setSettingsSection] = useState<"providers" | "users">("providers");
+
+  useEffect(() => {
+    Promise.all([
+      fetch("/api/projects").then((r) => r.json()),
+      fetch("/api/providers").then((r) => r.json()),
+    ]).then(([projectData, providerData]) => {
+      setProjects(projectData.projects ?? []);
+      setProvider(providerData.config ?? { configured: false });
+    }).catch(() => {});
+
+    const requested = new URLSearchParams(window.location.search).get("section");
+    if (requested === "users") setSettingsSection("users");
+  }, []);
+
   async function logout() {
     await signOut();
     window.location.replace("/login");
   }
 
+  const selectSection = (sec: "providers" | "users") => {
+    setSettingsSection(sec);
+    const url = sec === "providers" ? "/settings" : "/settings?section=users";
+    window.history.replaceState(null, "", url);
+  };
+
+  const isSettings = pathname.startsWith("/settings");
+
   const nav = [
     { href: "/assistant", label: "Assistant", icon: "✦", active: pathname.startsWith("/assistant") || pathname.startsWith("/chat/") },
     { href: "/brain", label: "Brain", icon: "◉", active: pathname.startsWith("/brain") },
   ];
 
   return (
-    <div className="mop-app-frame">
-      <header className="mop-app-topbar">
-        <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
-          <img src="/icon.svg" alt="" />
-          <span>MOP-AGENT</span>
-        </a>
-        <div className="mop-app-topbar-main">
-          <button
-            className="mop-menu-toggle"
-            type="button"
-            aria-label="Toggle navigation"
-            aria-expanded={menuOpen}
-            onClick={() => setMenuOpen((open) => !open)}
-          >
-            ☰
-          </button>
-          <div className="mop-topbar-title">
-            <span className="mop-live-dot" />
-            <strong>{title}</strong>
-          </div>
-          <div className="mop-topbar-center">MOP MEMORYCORE</div>
-          <div className="mop-topbar-meta">
-            <span>{isAdmin ? "ADMIN" : "MEMBER"}</span>
-            <span className="mop-version">v0.1.9</span>
-          </div>
-        </div>
-      </header>
-
-      {menuOpen && <button className="mop-sidebar-scrim" aria-label="Close navigation" onClick={() => setMenuOpen(false)} />}
-
-      <aside className={`mop-app-sidebar${menuOpen ? " is-open" : ""}`}>
-        <div className="mop-nav-section">
-          <p>WORKSPACE</p>
-          <nav>
-            {nav.map((item) => (
-              <a key={item.href} href={item.href} className={item.active ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
-                <span className="mop-nav-icon">{item.icon}</span>
-                <span>{item.label}</span>
-              </a>
-            ))}
-          </nav>
-        </div>
-
-        {isAdmin && (
-          <div className="mop-nav-section">
-            <p>ADMIN</p>
-            <nav>
-              <a href="/settings" className={pathname.startsWith("/settings") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
-                <span className="mop-nav-icon">⚙</span>
-                <span>Settings</span>
-              </a>
-            </nav>
+    <MemoryCoreContext.Provider value={{ selectedProject, setSelectedProject, projects, provider, settingsSection, setSettingsSection }}>
+      <div className="mop-app-frame">
+        <header className="mop-app-topbar">
+          <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
+            <img src="/icon.svg" alt="" />
+            <span>MOP-AGENT</span>
+          </a>
+          <div className="mop-app-topbar-main">
+            <button
+              className="mop-menu-toggle"
+              type="button"
+              aria-label="Toggle navigation"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen((open) => !open)}
+            >
+              ☰
+            </button>
+            {pathname === "/assistant" ? (
+              <div className="mop-assistant-toolbar" style={{ border: 0, padding: 0, margin: 0, background: "transparent", width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <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>
+                <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>
+            ) : (
+              <>
+                <div className="mop-topbar-title">
+                  <span className="mop-live-dot" />
+                  <strong>{title}</strong>
+                </div>
+                <div className="mop-topbar-center">MOP MEMORYCORE</div>
+                <div className="mop-topbar-meta">
+                  <span>{isAdmin ? "ADMIN" : "MEMBER"}</span>
+                  <span className="mop-version">v0.1.10</span>
+                </div>
+              </>
+            )}
           </div>
-        )}
-
-        <div className="mop-sidebar-spacer" />
-        <button className="mop-account-card" type="button" onClick={logout} title="Sign out">
-          <span className="mop-account-avatar">{viewer.name.slice(0, 1).toUpperCase()}</span>
-          <span className="mop-account-copy">
-            <strong>{viewer.name}</strong>
-            <small>{isAdmin ? "Administrator" : "Member"}</small>
-          </span>
-          <span aria-hidden="true">↪</span>
-        </button>
-      </aside>
-
-      <main className="mop-app-main">{children}</main>
-    </div>
+        </header>
+
+        {menuOpen && <button className="mop-sidebar-scrim" aria-label="Close navigation" onClick={() => setMenuOpen(false)} />}
+
+        <aside className={isSettings 
+          ? `mop-settings-nav mop-panel mop-settings-sidebar${menuOpen ? " is-open" : ""}` 
+          : `mop-app-sidebar${menuOpen ? " is-open" : ""}`}
+        >
+          {isSettings ? (
+            <>
+              <button className={settingsSection === "providers" ? "is-active" : ""} onClick={() => { selectSection("providers"); setMenuOpen(false); }}>
+                <span>◇</span><strong>Providers</strong>
+              </button>
+              <button className={settingsSection === "users" ? "is-active" : ""} onClick={() => { selectSection("users"); setMenuOpen(false); }}>
+                <span>♙</span><strong>Users</strong>
+              </button>
+            </>
+          ) : (
+            <>
+              <div className="mop-nav-section">
+                <p>WORKSPACE</p>
+                <nav>
+                  {nav.map((item) => (
+                    <a key={item.href} href={item.href} className={item.active ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                      <span className="mop-nav-icon">{item.icon}</span>
+                      <span>{item.label}</span>
+                    </a>
+                  ))}
+                </nav>
+              </div>
+
+              {isAdmin && (
+                <div className="mop-nav-section">
+                  <p>ADMIN</p>
+                  <nav>
+                    <a href="/settings" className={pathname.startsWith("/settings") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                      <span className="mop-nav-icon">⚙</span>
+                      <span>Settings</span>
+                    </a>
+                  </nav>
+                </div>
+              )}
+            </>
+          )}
+
+          <div className="mop-sidebar-spacer" />
+
+          {isSettings && (
+            <a href="/assistant" className="mop-back-workspace-btn">
+              <span>← BACK TO WORKSPACE</span>
+            </a>
+          )}
+
+          <button className="mop-account-card" type="button" onClick={logout} title="Sign out">
+            <span className="mop-account-avatar">{viewer.name.slice(0, 1).toUpperCase()}</span>
+            <span className="mop-account-copy">
+              <strong>{viewer.name}</strong>
+              <small>{isAdmin ? "Administrator" : "Member"}</small>
+            </span>
+            <span aria-hidden="true">↪</span>
+          </button>
+        </aside>
+
+        <main className="mop-app-main">{children}</main>
+      </div>
+    </MemoryCoreContext.Provider>
   );
 }
+

package/npm-shrinkwrap.json

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

package/package.json

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