mop-agent 0.1.11 → 0.1.12

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

@@ -127,7 +127,6 @@ 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" };
 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

@@ -247,28 +247,35 @@ button {
 }
 
 .mop-nav-section nav { display: grid; gap: 4px; }
-.mop-nav-section a {
+.mop-nav-section a,
+.mop-nav-section button {
   display: flex;
   align-items: center;
   gap: 11px;
+  width: 100%;
   min-height: 43px;
   padding: 8px 12px;
   color: rgba(254, 249, 225, .78);
   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;
+  cursor: pointer;
 }
 
-.mop-nav-section a:hover {
+.mop-nav-section a:hover,
+.mop-nav-section button:hover {
   color: var(--mop-cream);
   background: rgba(254, 249, 225, .07);
 }
 
-.mop-nav-section a.is-active {
+.mop-nav-section a.is-active,
+.mop-nav-section button.is-active {
   color: #ff8a3d;
   border-color: rgba(254, 249, 225, .18);
   background: rgba(254, 249, 225, .09);
@@ -378,15 +385,53 @@ button {
   flex-direction: column;
 }
 
+/* Toolbar lives inside the dark maroon topbar, so its text is light. */
 .mop-assistant-toolbar {
-  min-height: 55px;
+  width: 100%;
   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-status {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+.mop-assistant-status strong {
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--mop-cream);
+}
+.mop-assistant-provider {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(254, 249, 225, .66);
+  font-size: 12px;
+}
+.mop-assistant-scope {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  color: rgba(254, 249, 225, .82);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+.mop-assistant-scope select {
+  color: var(--mop-green);
+  background: var(--mop-paper);
+  border: 1px solid rgba(254, 249, 225, .32);
+  padding: 6px 8px;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
 }
 
 .mop-assistant-conversation { flex: 1; overflow-y: auto; padding: 0 28px; }
@@ -417,26 +462,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 {
@@ -498,41 +523,12 @@ 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-toolbar { gap: 9px; }
+  .mop-assistant-status { display: none; }
   .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 {

package/apps/web/components/AppShell.tsx

@@ -33,9 +33,6 @@ export function useMemoryCore() {
   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";
@@ -107,16 +104,17 @@ 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 }}>
+              <div className="mop-assistant-toolbar">
+                <div className="mop-assistant-status">
+                  <span className="mop-live-dot" />
+                  <strong>LIVE ASSISTANT</strong>
+                  <span className="mop-assistant-provider">
                     {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}>
+                <label className="mop-assistant-scope">
+                  MEMORY SCOPE
+                  <select value={selectedProject} onChange={(e) => setSelectedProject(e.target.value)}>
                     <option value="">All memory</option>
                     {projects.map((project) => <option key={project.id} value={project.id}>{project.name}</option>)}
                   </select>
@@ -131,7 +129,7 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
                 <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>
+                  <span className="mop-version">v0.1.12</span>
                 </div>
               </>
             )}
@@ -140,19 +138,21 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
 
         {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" : ""}`}
-        >
+        <aside className={`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>SETTINGS</p>
+              <nav>
+                <button className={settingsSection === "providers" ? "is-active" : ""} onClick={() => { selectSection("providers"); setMenuOpen(false); }}>
+                  <span className="mop-nav-icon">◇</span>
+                  <span>Providers</span>
+                </button>
+                <button className={settingsSection === "users" ? "is-active" : ""} onClick={() => { selectSection("users"); setMenuOpen(false); }}>
+                  <span className="mop-nav-icon">♙</span>
+                  <span>Users</span>
+                </button>
+              </nav>
+            </div>
           ) : (
             <>
               <div className="mop-nav-section">

package/npm-shrinkwrap.json

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

package/package.json

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