mop-agent 0.1.11 → 0.1.13

package/README.md

@@ -5,8 +5,9 @@ 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.10` contains the corrected VPS
-> installer, one-time Admin setup/login flow, and shared retro application shell.
+> **Release status:** release candidate `mop-agent@0.1.13` contains the corrected VPS
+> installer, one-time Admin setup/login flow, and simplified shared application shell
+> with centered page titles and ChatGPT-inspired navigation.
 > The canonical installation command is exactly `npx mop-agent`.
 
 ## Current status

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

@@ -7,7 +7,7 @@ import { useMemoryCore } from "@/components/AppShell";
 type Turn = { role: "user" | "assistant"; content: string };
 
 export default function AssistantPage() {
-  const { selectedProject, setSelectedProject, projects, provider } = useMemoryCore();
+  const { projects } = useMemoryCore();
   const [turns, setTurns] = useState<Turn[]>([]);
   const [name, setName] = useState("Admin");
   const [input, setInput] = useState("");
@@ -34,8 +34,7 @@ export default function AssistantPage() {
       headers: { "content-type": "application/json" },
       body: JSON.stringify({
         message,
-        projectId: selectedProject || undefined,
-        allowCrossProject: !selectedProject,
+        allowCrossProject: true,
       }),
     });
 
@@ -120,14 +119,13 @@ export default function AssistantPage() {
           <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"}
+          {providerUsed ? `Answered by ${providerUsed} · ` : ""}Cross-project memory
         </div>
       </div>
     </section>
   );
 }
 
-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" };
 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" };

package/apps/web/app/globals.css

@@ -97,7 +97,7 @@ button {
 .mop-app-frame {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 238px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   grid-template-rows: 70px minmax(0, 1fr);
   grid-template-areas:
     "topbar topbar"
@@ -111,7 +111,7 @@ button {
   top: 0;
   z-index: 50;
   display: grid;
-  grid-template-columns: 238px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   min-width: 0;
   color: var(--mop-cream);
   background:
@@ -153,6 +153,7 @@ button {
   min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 14px;
   padding: 0 18px;
 }
@@ -167,18 +168,8 @@ button {
   cursor: pointer;
 }
 
-.mop-topbar-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 130px;
-  font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 13px;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
 .mop-live-dot {
+  flex: 0 0 auto;
   width: 8px;
   height: 8px;
   background: #78e19b;
@@ -186,37 +177,21 @@ button {
 }
 
 .mop-topbar-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 255px;
+  min-width: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   padding: 9px 28px;
   text-align: center;
   color: rgba(254, 249, 225, .86);
   border: 1px solid rgba(254, 249, 225, .12);
   background: rgba(254, 249, 225, .07);
   font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: .18em;
-}
-
-.mop-topbar-meta {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  margin-left: auto;
-  font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 800;
-  letter-spacing: .12em;
-}
-
-.mop-version {
-  padding: 4px 6px;
-  border: 1px solid rgba(254, 249, 225, .22);
-  background: rgba(254, 249, 225, .07);
+  letter-spacing: .14em;
+  text-transform: uppercase;
 }
 
 .mop-app-sidebar {
@@ -228,53 +203,68 @@ button {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 15px 9px 12px;
+  padding: 10px 9px 9px;
   color: var(--mop-cream);
   background:
-    linear-gradient(rgba(255,255,255,.018), rgba(0,0,0,.05)),
+    linear-gradient(rgba(255,255,255,.028), rgba(0,0,0,.035)),
     var(--mop-green);
   border-right: 2px solid #20362e;
 }
 
-.mop-nav-section { margin-bottom: 17px; }
-.mop-nav-section > p {
-  margin: 0 8px 9px;
-  color: rgba(254, 249, 225, .46);
-  font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 9px;
-  font-weight: 900;
-  letter-spacing: .22em;
+.mop-sidebar-primary {
+  display: grid;
+  gap: 3px;
+  margin-bottom: 22px;
 }
 
-.mop-nav-section nav { display: grid; gap: 4px; }
-.mop-nav-section a {
+.mop-sidebar-primary a,
+.mop-nav-section a,
+.mop-nav-section button {
   display: flex;
   align-items: center;
   gap: 11px;
-  min-height: 43px;
-  padding: 8px 12px;
-  color: rgba(254, 249, 225, .78);
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 11px;
+  color: rgba(254, 249, 225, .82);
   border: 1px solid transparent;
+  background: transparent;
+  text-align: left;
   text-decoration: none;
-  font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: .055em;
-  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 540;
+  letter-spacing: 0;
+  cursor: pointer;
 }
 
-.mop-nav-section a:hover {
+.mop-sidebar-primary a:hover,
+.mop-nav-section a:hover,
+.mop-nav-section button:hover {
   color: var(--mop-cream);
-  background: rgba(254, 249, 225, .07);
+  background: rgba(254, 249, 225, .075);
+}
+
+.mop-sidebar-primary a.is-active,
+.mop-nav-section a.is-active,
+.mop-nav-section button.is-active {
+  color: var(--mop-cream);
+  border-color: rgba(254, 249, 225, .12);
+  background: rgba(254, 249, 225, .1);
+  box-shadow: 2px 2px 0 rgba(18, 38, 30, .22);
 }
 
-.mop-nav-section a.is-active {
-  color: #ff8a3d;
-  border-color: rgba(254, 249, 225, .18);
-  background: rgba(254, 249, 225, .09);
-  box-shadow: inset 3px 0 #ff6f2c, 2px 2px 0 rgba(18, 38, 30, .25);
+.mop-nav-section { margin-bottom: 18px; }
+.mop-nav-section > p {
+  margin: 0 11px 7px;
+  color: rgba(254, 249, 225, .46);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: .11em;
 }
 
+.mop-nav-section nav { display: grid; gap: 2px; }
+
 .mop-nav-icon {
   width: 21px;
   text-align: center;
@@ -282,6 +272,32 @@ button {
   font-size: 16px;
 }
 
+.mop-project-memory {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.mop-project-memory nav {
+  max-height: min(34vh, 280px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.mop-project-memory a { min-height: 34px; padding-block: 5px; font-size: 13px; }
+.mop-project-dot {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  background: rgba(254, 249, 225, .34);
+}
+.mop-project-dot[data-online="true"] { background: #78e19b; box-shadow: 0 0 0 2px rgba(120, 225, 155, .12); }
+.mop-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mop-sidebar-empty { display: block; padding: 7px 11px; color: rgba(254, 249, 225, .42); font-size: 12px; }
+.mop-admin-nav { margin-top: 2px; }
+.mop-settings-subnav { display: grid; gap: 1px; margin: 1px 0 2px 31px; border-left: 1px solid rgba(254, 249, 225, .18); }
+.mop-settings-subnav button { min-height: 32px; padding: 5px 12px; color: rgba(254, 249, 225, .6); font-size: 12px; }
+.mop-settings-subnav button.is-active { color: #ff9a56; border-color: transparent; background: transparent; box-shadow: none; }
+
 .mop-sidebar-spacer { flex: 1; }
 .mop-account-card {
   width: 100%;
@@ -290,11 +306,12 @@ button {
   gap: 9px;
   padding: 10px 8px;
   color: var(--mop-cream);
-  border: 1px solid rgba(254, 249, 225, .13);
-  background: rgba(0, 0, 0, .07);
+  border: 1px solid transparent;
+  background: transparent;
   text-align: left;
   cursor: pointer;
 }
+.mop-account-card:hover { border-color: rgba(254, 249, 225, .1); background: rgba(254, 249, 225, .07); }
 
 .mop-account-avatar {
   flex: 0 0 auto;
@@ -378,25 +395,16 @@ button {
   flex-direction: column;
 }
 
-.mop-assistant-toolbar {
-  min-height: 55px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 9px 22px;
-  border-bottom: 1px solid rgba(45, 74, 62, .24);
-  background: rgba(254, 249, 225, .78);
-}
-
-.mop-assistant-conversation { flex: 1; overflow-y: auto; padding: 0 28px; }
+.mop-assistant-conversation { flex: 1; overflow-y: auto; padding: 0 clamp(18px, 5vw, 64px); }
 .mop-assistant-welcome {
-  min-height: calc(100vh - 285px);
+  width: min(100%, 760px);
+  min-height: calc(100vh - 190px);
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 32px 0 90px;
+  padding: 38px 0 110px;
   text-align: center;
 }
 
@@ -417,26 +425,6 @@ button {
 }
 
 
-.mop-settings-nav { padding: 9px; }
-.mop-settings-nav button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--mop-green);
-  text-align: left;
-  cursor: pointer;
-}
-
-.mop-settings-nav button.is-active {
-  color: var(--mop-cream);
-  border-color: var(--mop-red);
-  background: var(--mop-red);
-}
-
 .mop-settings-content { padding: clamp(18px, 3vw, 30px); }
 .mop-settings-content th,
 .mop-settings-content td {
@@ -472,11 +460,10 @@ button {
   .mop-app-topbar { grid-template-columns: 66px minmax(0, 1fr); }
   .mop-app-brand { justify-content: center; padding: 5px; }
   .mop-app-brand img { width: 49px; height: 49px; }
-  .mop-app-brand span, .mop-topbar-center { display: none; }
+  .mop-app-brand span { display: none; }
   .mop-app-topbar-main { padding: 0 10px; gap: 9px; }
   .mop-menu-toggle { display: block; }
-  .mop-topbar-title { min-width: 0; font-size: 11px; }
-  .mop-topbar-meta > span:first-child { display: none; }
+  .mop-topbar-center { min-width: 0; flex: 1; padding: 8px 12px; font-size: 10px; }
   .mop-app-sidebar {
     position: fixed;
     top: 62px;
@@ -498,72 +485,8 @@ button {
   }
   .mop-app-main { min-height: calc(100vh - 62px); }
   .mop-assistant-page { min-height: calc(100vh - 62px); }
-  .mop-assistant-toolbar { align-items: flex-start; flex-direction: column; }
   .mop-assistant-conversation { padding: 0 16px; }
   .mop-assistant-composer-wrap { padding: 26px 12px 12px; }
   .mop-settings-grid { grid-template-columns: 1fr; }
-  .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/components/AppShell.tsx

@@ -12,13 +12,9 @@ export type AppViewer = {
 };
 
 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;
 }
@@ -27,15 +23,10 @@ const MemoryCoreContext = createContext<MemoryCoreContextType | undefined>(undef
 
 export function useMemoryCore() {
   const context = useContext(MemoryCoreContext);
-  if (!context) {
-    throw new Error("useMemoryCore must be used within a MemoryCoreProvider");
-  }
+  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";
@@ -49,22 +40,17 @@ function pageTitle(pathname: string): string {
 export function AppShell({ viewer, children }: { viewer: AppViewer; children: ReactNode }) {
   const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
-  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");
+  const isAdmin = viewer.role === "owner";
+  const isSettings = pathname.startsWith("/settings");
+  const title = pageTitle(pathname);
 
   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(() => {});
+    fetch("/api/projects")
+      .then((response) => response.json())
+      .then((data) => setProjects(data.projects ?? []))
+      .catch(() => {});
 
     const requested = new URLSearchParams(window.location.search).get("section");
     if (requested === "users") setSettingsSection("users");
@@ -75,21 +61,13 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
     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") },
-  ];
+  function selectSection(section: "providers" | "users") {
+    setSettingsSection(section);
+    window.history.replaceState(null, "", section === "providers" ? "/settings" : "/settings?section=users");
+  }
 
   return (
-    <MemoryCoreContext.Provider value={{ selectedProject, setSelectedProject, projects, provider, settingsSection, setSettingsSection }}>
+    <MemoryCoreContext.Provider value={{ projects, settingsSection, setSettingsSection }}>
       <div className="mop-app-frame">
         <header className="mop-app-topbar">
           <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
@@ -106,96 +84,70 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
             >
               ☰
             </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 className="mop-topbar-center">
+              <span className="mop-live-dot" />
+              <strong>{title}</strong>
+            </div>
           </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>
+        <aside className={`mop-app-sidebar${menuOpen ? " is-open" : ""}`}>
+          <nav className="mop-sidebar-primary" aria-label="Workspace">
+            <a href="/assistant" className={pathname.startsWith("/assistant") || pathname.startsWith("/chat/") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+              <span className="mop-nav-icon">✎</span>
+              <span>New chat</span>
             </a>
+            <a href="/brain" className={pathname.startsWith("/brain") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+              <span className="mop-nav-icon">◉</span>
+              <span>Brain</span>
+            </a>
+          </nav>
+
+          <div className="mop-nav-section mop-project-memory">
+            <p>PROJECT MEMORY</p>
+            <nav>
+              {projects.slice(0, 8).map((project) => (
+                <a key={project.id} href={`/brain/${project.id}`} className={pathname === `/brain/${project.id}` ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                  <span className="mop-project-dot" data-online={project.status === "online"} />
+                  <span className="mop-nav-label">{project.name}</span>
+                </a>
+              ))}
+              {projects.length === 0 && <span className="mop-sidebar-empty">No linked projects yet</span>}
+            </nav>
+          </div>
+
+          {isAdmin && (
+            <div className="mop-nav-section mop-admin-nav">
+              <p>ADMIN</p>
+              <nav>
+                <a href="/settings" className={isSettings ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                  <span className="mop-nav-icon">⚙</span>
+                  <span>Settings</span>
+                </a>
+                {isSettings && (
+                  <div className="mop-settings-subnav">
+                    <button className={settingsSection === "providers" ? "is-active" : ""} onClick={() => { selectSection("providers"); setMenuOpen(false); }}>
+                      <span>Providers</span>
+                    </button>
+                    <button className={settingsSection === "users" ? "is-active" : ""} onClick={() => { selectSection("users"); setMenuOpen(false); }}>
+                      <span>Users</span>
+                    </button>
+                  </div>
+                )}
+              </nav>
+            </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>
+            <span aria-hidden="true">•••</span>
           </button>
         </aside>
 
@@ -204,4 +156,3 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
     </MemoryCoreContext.Provider>
   );
 }
-

package/npm-shrinkwrap.json

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

package/package.json

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