mop-agent 0.1.12 → 0.1.14

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.14` 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

@@ -5,14 +5,20 @@ import { useEffect, useRef, useState } from "react";
 import { useMemoryCore } from "@/components/AppShell";
 
 type Turn = { role: "user" | "assistant"; content: string };
+type SavedChat = { id: string; title: string; turns: Turn[]; updatedAt: number };
+
+const CHAT_HISTORY_KEY = "mop-agent-chat-history-v1";
 
 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("");
   const [busy, setBusy] = useState(false);
   const [providerUsed, setProviderUsed] = useState("");
+  const [history, setHistory] = useState<SavedChat[]>([]);
+  const [historyReady, setHistoryReady] = useState(false);
+  const [activeChatId, setActiveChatId] = useState("");
   const endRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -21,10 +27,61 @@ export default function AssistantPage() {
     }).catch(() => {});
   }, []);
 
+  useEffect(() => {
+    try {
+      const stored = JSON.parse(window.localStorage.getItem(CHAT_HISTORY_KEY) ?? "[]");
+      if (Array.isArray(stored)) setHistory(stored.slice(0, 30));
+    } catch {
+      window.localStorage.removeItem(CHAT_HISTORY_KEY);
+    } finally {
+      setHistoryReady(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!historyReady) return;
+    window.localStorage.setItem(CHAT_HISTORY_KEY, JSON.stringify(history.slice(0, 30)));
+  }, [history, historyReady]);
+
+  useEffect(() => {
+    if (!activeChatId || turns.length === 0) return;
+    const firstMessage = turns.find((turn) => turn.role === "user")?.content ?? "New conversation";
+    setHistory((current) => {
+      const updated: SavedChat = {
+        id: activeChatId,
+        title: firstMessage.slice(0, 54),
+        turns,
+        updatedAt: Date.now(),
+      };
+      return [updated, ...current.filter((chat) => chat.id !== activeChatId)].slice(0, 30);
+    });
+  }, [activeChatId, turns]);
+
+  function startNewChat() {
+    if (busy) return;
+    setActiveChatId("");
+    setTurns([]);
+    setProviderUsed("");
+    setInput("");
+  }
+
+  function openChat(chat: SavedChat) {
+    if (busy) return;
+    setActiveChatId(chat.id);
+    setTurns(chat.turns);
+    setProviderUsed("");
+  }
+
+  function deleteChat(id: string) {
+    if (busy) return;
+    setHistory((current) => current.filter((chat) => chat.id !== id));
+    if (activeChatId === id) startNewChat();
+  }
 
   async function send(prefill?: string) {
     const message = (prefill ?? input).trim();
     if (!message || busy) return;
+    if (!activeChatId) setActiveChatId(`chat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
     setInput("");
     setBusy(true);
     setTurns((current) => [...current, { role: "user", content: message }, { role: "assistant", content: "" }]);
@@ -34,8 +91,7 @@ export default function AssistantPage() {
       headers: { "content-type": "application/json" },
       body: JSON.stringify({
         message,
-        projectId: selectedProject || undefined,
-        allowCrossProject: !selectedProject,
+        allowCrossProject: true,
       }),
     });
 
@@ -69,64 +125,95 @@ export default function AssistantPage() {
 
   return (
     <section className="mop-assistant-page">
-      <div className="mop-assistant-conversation">
-        {turns.length === 0 ? (
-          <div className="mop-assistant-welcome">
-            <div style={assistantLogo}><img src="/icon.svg" alt="MOP-AGENT" /></div>
-            <p style={{ color: "#742220", fontSize: 11, fontWeight: 900, letterSpacing: ".16em" }}>MOP-AGENT IS READY</p>
-            <h1 style={{ fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: "clamp(26px, 4vw, 40px)", margin: "8px 0 12px" }}>
-              What are we working on, {name.split(" ")[0]}?
-            </h1>
-            <p style={{ color: "rgba(45,74,62,.7)", 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 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 className="mop-assistant-workspace">
+        <div className="mop-assistant-conversation">
+          {turns.length === 0 ? (
+            <div className="mop-assistant-welcome">
+              <div style={assistantLogo}><img src="/icon.svg" alt="MOP-AGENT" /></div>
+              <p style={{ color: "#742220", fontSize: 11, fontWeight: 900, letterSpacing: ".16em" }}>MOP-AGENT IS READY</p>
+              <h1 style={{ fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: "clamp(26px, 4vw, 40px)", margin: "8px 0 12px" }}>
+                What are we working on, {name.split(" ")[0]}?
+              </h1>
+              <p style={{ color: "rgba(45,74,62,.7)", 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 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: "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>
+          ) : (
+            <div style={{ width: "min(100%, 820px)", margin: "0 auto", padding: "28px 0 160px" }}>
+              {turns.map((turn, index) => (
+                <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" ? "#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>
               ))}
+              <div ref={endRef} />
             </div>
-            {projects.length === 0 && (
-              <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>
+
+        <div className="mop-assistant-composer-wrap">
+          <div style={composer}>
+            <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={{ width: "min(100%, 820px)", margin: "0 auto", padding: "28px 0 160px" }}>
-            {turns.map((turn, index) => (
-              <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" ? "#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>
-            ))}
-            <div ref={endRef} />
+          <div style={{ textAlign: "center", color: "rgba(45,74,62,.62)", fontSize: 11, marginTop: 8 }}>
+            {providerUsed ? `Answered by ${providerUsed} · ` : ""}Cross-project memory
           </div>
-        )}
+        </div>
       </div>
 
-      <div className="mop-assistant-composer-wrap">
-        <div style={composer}>
-          <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>
+      <aside className="mop-chat-history" aria-label="Chat history">
+        <div className="mop-chat-history-header">
+          <div>
+            <span>MEMORY LOG</span>
+            <strong>Chat history</strong>
+          </div>
+          <button type="button" onClick={startNewChat} disabled={busy} title="Start a new chat">＋</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"}
+        <div className="mop-chat-history-list">
+          {history.length === 0 ? (
+            <p className="mop-chat-history-empty">Your conversations will appear here.</p>
+          ) : history.map((chat) => (
+            <div className={`mop-chat-history-item${chat.id === activeChatId ? " is-active" : ""}`} key={chat.id}>
+              <button type="button" className="mop-chat-history-open" onClick={() => openChat(chat)} disabled={busy}>
+                <strong>{chat.title}</strong>
+                <span>{formatChatDate(chat.updatedAt)}</span>
+              </button>
+              <button type="button" className="mop-chat-history-delete" onClick={() => deleteChat(chat.id)} disabled={busy} aria-label={`Delete ${chat.title}`}>×</button>
+            </div>
+          ))}
         </div>
-      </div>
+      </aside>
     </section>
   );
 }
 
+function formatChatDate(timestamp: number) {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return "Saved conversation";
+  return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }).format(date);
+}
+
 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,60 +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-sidebar-primary 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);
+  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-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: #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);
+  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 { 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;
@@ -289,6 +272,8 @@ button {
   font-size: 16px;
 }
 
+.mop-admin-nav { margin-top: 2px; }
+
 .mop-sidebar-spacer { flex: 1; }
 .mop-account-card {
   width: 100%;
@@ -297,11 +282,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;
@@ -379,69 +365,32 @@ button {
 
 /* Assistant content now lives inside the shared shell. */
 .mop-assistant-page {
-  min-height: calc(100vh - 70px);
+  height: calc(100vh - 70px);
+  min-height: 560px;
   position: relative;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 290px;
+  overflow: hidden;
 }
 
-/* Toolbar lives inside the dark maroon topbar, so its text is light. */
-.mop-assistant-toolbar {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-.mop-assistant-status {
-  display: flex;
-  align-items: center;
-  gap: 9px;
+.mop-assistant-workspace {
   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 {
+  min-height: 0;
+  position: relative;
   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;
+  flex-direction: column;
 }
 
-.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;
 }
 
@@ -454,6 +403,104 @@ button {
   background: linear-gradient(transparent, var(--mop-cream) 28%);
 }
 
+.mop-chat-history {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 17px 13px 13px;
+  color: var(--mop-green);
+  border-left: 1px solid rgba(45, 74, 62, .3);
+  background:
+    linear-gradient(rgba(255, 253, 242, .84), rgba(254, 249, 225, .94)),
+    repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgba(116, 34, 32, .04) 7px, rgba(116, 34, 32, .04) 8px);
+}
+
+.mop-chat-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 2px 14px;
+  border-bottom: 1px solid rgba(45, 74, 62, .24);
+}
+
+.mop-chat-history-header > div { display: grid; gap: 3px; }
+.mop-chat-history-header span {
+  color: var(--mop-red);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 8px;
+  font-weight: 900;
+  letter-spacing: .16em;
+}
+.mop-chat-history-header strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 15px; }
+.mop-chat-history-header button {
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(45, 74, 62, .38);
+  background: var(--mop-red);
+  color: var(--mop-cream);
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.mop-chat-history-list {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  overflow-y: auto;
+  padding: 12px 1px;
+  scrollbar-width: thin;
+}
+
+.mop-chat-history-empty {
+  margin: 8px 5px;
+  color: rgba(45, 74, 62, .58);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.mop-chat-history-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  align-items: stretch;
+  border: 1px solid transparent;
+}
+.mop-chat-history-item:hover,
+.mop-chat-history-item.is-active {
+  border-color: rgba(45, 74, 62, .24);
+  background: rgba(255, 253, 242, .78);
+}
+.mop-chat-history-item.is-active { border-left: 3px solid var(--mop-red); }
+.mop-chat-history-open,
+.mop-chat-history-delete {
+  min-width: 0;
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+  color: var(--mop-green);
+  cursor: pointer;
+}
+.mop-chat-history-open {
+  display: grid;
+  gap: 4px;
+  padding: 9px 7px 9px 9px;
+  text-align: left;
+}
+.mop-chat-history-open strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 760;
+}
+.mop-chat-history-open span { color: rgba(45, 74, 62, .5); font-size: 9px; }
+.mop-chat-history-delete { opacity: 0; padding: 0; font-size: 17px; }
+.mop-chat-history-item:hover .mop-chat-history-delete,
+.mop-chat-history-item.is-active .mop-chat-history-delete { opacity: .65; }
+.mop-chat-history-delete:hover { color: var(--mop-red); opacity: 1 !important; }
+
 .mop-settings-grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -497,11 +544,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;
@@ -522,9 +568,8 @@ button {
     background: rgba(20, 34, 29, .56);
   }
   .mop-app-main { min-height: calc(100vh - 62px); }
-  .mop-assistant-page { min-height: calc(100vh - 62px); }
-  .mop-assistant-toolbar { gap: 9px; }
-  .mop-assistant-status { display: none; }
+  .mop-assistant-page { height: calc(100vh - 62px); min-height: 520px; grid-template-columns: minmax(0, 1fr); }
+  .mop-chat-history { display: none; }
   .mop-assistant-conversation { padding: 0 16px; }
   .mop-assistant-composer-wrap { padding: 26px 12px 12px; }
   .mop-settings-grid { grid-template-columns: 1fr; }
@@ -535,7 +580,6 @@ button {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   width: 100%;
   min-height: 40px;
   margin-bottom: 9px;
@@ -547,19 +591,12 @@ button {
   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);
+  box-shadow: 2px 2px 0 rgba(18, 38, 30, .28);
 }
 
-.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:hover { color: var(--mop-cream); transform: translate(-1px, -1px); }
 
-.mop-back-workspace-btn:active {
-  transform: translate(1px, 1px);
-  box-shadow: 0 0 0 rgba(45, 74, 62, 0);
+@media (min-width: 761px) and (max-width: 1050px) {
+  .mop-assistant-page { grid-template-columns: minmax(0, 1fr) 235px; }
+  .mop-chat-history { padding-inline: 9px; }
 }
-

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,9 +23,7 @@ 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;
 }
 
@@ -46,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");
@@ -72,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">
@@ -103,36 +84,10 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
             >
               ☰
             </button>
-            {pathname === "/assistant" ? (
-              <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 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>
-                </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.12</span>
-                </div>
-              </>
-            )}
+            <div className="mop-topbar-center">
+              <span className="mop-live-dot" />
+              <strong>{title}</strong>
+            </div>
           </div>
         </header>
 
@@ -155,23 +110,22 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
             </div>
           ) : (
             <>
-              <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>
+              <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>
 
               {isAdmin && (
-                <div className="mop-nav-section">
+                <div className="mop-nav-section mop-admin-nav">
                   <p>ADMIN</p>
                   <nav>
-                    <a href="/settings" className={pathname.startsWith("/settings") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                    <a href="/settings" onClick={() => setMenuOpen(false)}>
                       <span className="mop-nav-icon">⚙</span>
                       <span>Settings</span>
                     </a>
@@ -182,20 +136,18 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
           )}
 
           <div className="mop-sidebar-spacer" />
-
           {isSettings && (
-            <a href="/assistant" className="mop-back-workspace-btn">
+            <a href="/assistant" className="mop-back-workspace-btn" onClick={() => setMenuOpen(false)}>
               <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>
+            <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.12",
+  "version": "0.1.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mop-agent",
-      "version": "0.1.12",
+      "version": "0.1.14",
       "license": "UNLICENSED",
       "workspaces": [
         "packages/*",

package/package.json

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