mop-agent 0.1.13 → 0.1.15

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:** release candidate `mop-agent@0.1.13` contains the corrected VPS
+> **Release status:** release candidate `mop-agent@0.1.15` 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`.

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

@@ -5,6 +5,9 @@ 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 { projects } = useMemoryCore();
@@ -13,6 +16,10 @@ export default function AssistantPage() {
   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 [historyCollapsed, setHistoryCollapsed] = useState(false);
   const endRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -21,10 +28,69 @@ 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));
+      setHistoryCollapsed(window.localStorage.getItem("mop-agent-history-collapsed") === "1");
+    } 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();
+  }
+
+  function toggleHistory() {
+    setHistoryCollapsed((collapsed) => {
+      window.localStorage.setItem("mop-agent-history-collapsed", collapsed ? "0" : "1");
+      return !collapsed;
+    });
+  }
 
   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: "" }]);
@@ -67,65 +133,105 @@ 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>
+    <section className={`mop-assistant-page${historyCollapsed ? " is-history-collapsed" : ""}`}>
+      <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">
+          <strong>Chat history</strong>
+          <div className="mop-chat-history-actions">
+            <button
+              className="mop-chat-history-collapse"
+              type="button"
+              onClick={toggleHistory}
+              aria-label={historyCollapsed ? "Expand chat history" : "Collapse chat history"}
+              aria-expanded={!historyCollapsed}
+              title={historyCollapsed ? "Expand chat history" : "Collapse chat history"}
+            >
+              {historyCollapsed ? "‹" : "›"}
+            </button>
+            <button className="mop-chat-history-new" type="button" onClick={startNewChat} disabled={busy} title="Start a new chat">＋</button>
+          </div>
         </div>
-        <div style={{ textAlign: "center", color: "rgba(45,74,62,.62)", fontSize: 11, marginTop: 8 }}>
-          {providerUsed ? `Answered by ${providerUsed} · ` : ""}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

@@ -121,15 +121,22 @@ button {
   box-shadow: 0 2px 0 rgba(45, 74, 62, .28);
 }
 
+.mop-app-brand-cell {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  border-right: 1px solid rgba(254, 249, 225, .16);
+}
+
 .mop-app-brand {
+  width: 100%;
   display: flex;
   align-items: center;
   gap: 9px;
   min-width: 0;
-  padding: 7px 14px;
+  padding: 7px 46px 7px 14px;
   color: var(--mop-cream);
   text-decoration: none;
-  border-right: 1px solid rgba(254, 249, 225, .16);
 }
 
 .mop-app-brand img {
@@ -148,6 +155,51 @@ button {
   white-space: nowrap;
 }
 
+.mop-sidebar-collapse-toggle {
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  z-index: 2;
+  width: 29px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  transform: translateY(-50%);
+  border: 1px solid rgba(254, 249, 225, .25);
+  background: rgba(254, 249, 225, .08);
+  color: var(--mop-cream);
+  font-size: 19px;
+  cursor: pointer;
+}
+
+.mop-sidebar-collapse-toggle:hover:not(:disabled) { transform: translate(-1px, calc(-50% - 1px)); }
+.mop-sidebar-collapse-toggle:active:not(:disabled) { transform: translate(1px, calc(-50% + 1px)); }
+
+.mop-app-frame,
+.mop-app-topbar { transition: grid-template-columns 140ms steps(4, end); }
+
+.mop-app-frame.is-sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
+.mop-app-frame.is-sidebar-collapsed .mop-app-topbar { grid-template-columns: 74px minmax(0, 1fr); }
+.mop-app-frame.is-sidebar-collapsed .mop-app-brand { justify-content: center; padding: 7px; }
+.mop-app-frame.is-sidebar-collapsed .mop-app-brand img { width: 47px; height: 47px; }
+.mop-app-frame.is-sidebar-collapsed .mop-app-brand span,
+.mop-app-frame.is-sidebar-collapsed .mop-nav-section > p,
+.mop-app-frame.is-sidebar-collapsed .mop-sidebar-primary a > span:not(.mop-nav-icon),
+.mop-app-frame.is-sidebar-collapsed .mop-nav-section a > span:not(.mop-nav-icon),
+.mop-app-frame.is-sidebar-collapsed .mop-nav-section button > span:not(.mop-nav-icon),
+.mop-app-frame.is-sidebar-collapsed .mop-account-copy,
+.mop-app-frame.is-sidebar-collapsed .mop-account-card > span:last-child,
+.mop-app-frame.is-sidebar-collapsed .mop-back-workspace-btn > span { display: none; }
+.mop-app-frame.is-sidebar-collapsed .mop-sidebar-collapse-toggle { right: -14px; }
+.mop-app-frame.is-sidebar-collapsed .mop-app-sidebar { padding-inline: 9px; }
+.mop-app-frame.is-sidebar-collapsed .mop-sidebar-primary a,
+.mop-app-frame.is-sidebar-collapsed .mop-nav-section a,
+.mop-app-frame.is-sidebar-collapsed .mop-nav-section button,
+.mop-app-frame.is-sidebar-collapsed .mop-account-card { justify-content: center; padding-inline: 5px; }
+.mop-app-frame.is-sidebar-collapsed .mop-nav-icon { width: auto; }
+.mop-app-frame.is-sidebar-collapsed .mop-back-workspace-btn::before { content: "←"; }
+
 .mop-app-topbar-main {
   position: relative;
   min-width: 0;
@@ -272,31 +324,7 @@ 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 {
@@ -389,7 +417,20 @@ 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: grid;
+  grid-template-columns: minmax(0, 1fr) 290px;
+  overflow: hidden;
+  transition: grid-template-columns 140ms steps(4, end);
+}
+
+.mop-assistant-page.is-history-collapsed { grid-template-columns: minmax(0, 1fr) 52px; }
+
+.mop-assistant-workspace {
+  min-width: 0;
+  min-height: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -417,6 +458,110 @@ 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 strong { font-family: "SFMono-Regular", Consolas, monospace; font-size: 15px; }
+.mop-chat-history-actions { display: flex; gap: 6px; }
+.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-collapse { background: var(--mop-green) !important; }
+.mop-chat-history-new { background: var(--mop-red) !important; }
+
+.mop-assistant-page.is-history-collapsed .mop-chat-history { padding: 12px 8px; }
+.mop-assistant-page.is-history-collapsed .mop-chat-history-header {
+  justify-content: center;
+  padding: 0 0 12px;
+  border-bottom: 0;
+}
+.mop-assistant-page.is-history-collapsed .mop-chat-history-header > strong,
+.mop-assistant-page.is-history-collapsed .mop-chat-history-new,
+.mop-assistant-page.is-history-collapsed .mop-chat-history-list { display: none; }
+.mop-assistant-page.is-history-collapsed .mop-chat-history-actions { display: block; }
+
+.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;
@@ -457,7 +602,10 @@ button {
     grid-template-rows: 62px minmax(0, 1fr);
     grid-template-areas: "topbar" "main";
   }
+  .mop-app-frame.is-sidebar-collapsed { grid-template-columns: 1fr; }
   .mop-app-topbar { grid-template-columns: 66px minmax(0, 1fr); }
+  .mop-app-frame.is-sidebar-collapsed .mop-app-topbar { grid-template-columns: 66px minmax(0, 1fr); }
+  .mop-sidebar-collapse-toggle { display: none; }
   .mop-app-brand { justify-content: center; padding: 5px; }
   .mop-app-brand img { width: 49px; height: 49px; }
   .mop-app-brand span { display: none; }
@@ -475,6 +623,18 @@ button {
     transition: transform 160ms steps(4, end);
   }
   .mop-app-sidebar.is-open { transform: translateX(0); }
+  .mop-app-frame.is-sidebar-collapsed .mop-nav-section > p { display: block; }
+  .mop-app-frame.is-sidebar-collapsed .mop-sidebar-primary a > span:not(.mop-nav-icon),
+  .mop-app-frame.is-sidebar-collapsed .mop-nav-section a > span:not(.mop-nav-icon),
+  .mop-app-frame.is-sidebar-collapsed .mop-nav-section button > span:not(.mop-nav-icon),
+  .mop-app-frame.is-sidebar-collapsed .mop-back-workspace-btn > span { display: inline; }
+  .mop-app-frame.is-sidebar-collapsed .mop-account-copy { display: grid; }
+  .mop-app-frame.is-sidebar-collapsed .mop-account-card > span:last-child { display: inline; }
+  .mop-app-frame.is-sidebar-collapsed .mop-sidebar-primary a,
+  .mop-app-frame.is-sidebar-collapsed .mop-nav-section a,
+  .mop-app-frame.is-sidebar-collapsed .mop-nav-section button,
+  .mop-app-frame.is-sidebar-collapsed .mop-account-card { justify-content: flex-start; padding-inline: 11px; }
+  .mop-app-frame.is-sidebar-collapsed .mop-back-workspace-btn::before { content: none; }
   .mop-sidebar-scrim {
     display: block;
     position: fixed;
@@ -484,9 +644,36 @@ 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-page,
+  .mop-assistant-page.is-history-collapsed { 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; }
   .mop-user-invite-form { grid-template-columns: 1fr !important; }
 }
+
+.mop-back-workspace-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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;
+  box-shadow: 2px 2px 0 rgba(18, 38, 30, .28);
+}
+
+.mop-back-workspace-btn:hover { color: var(--mop-cream); transform: translate(-1px, -1px); }
+
+@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

@@ -40,6 +40,7 @@ function pageTitle(pathname: string): string {
 export function AppShell({ viewer, children }: { viewer: AppViewer; children: ReactNode }) {
   const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [projects, setProjects] = useState<Project[]>([]);
   const [settingsSection, setSettingsSection] = useState<"providers" | "users">("providers");
   const isAdmin = viewer.role === "owner";
@@ -54,6 +55,7 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
 
     const requested = new URLSearchParams(window.location.search).get("section");
     if (requested === "users") setSettingsSection("users");
+    setSidebarCollapsed(window.localStorage.getItem("mop-agent-sidebar-collapsed") === "1");
   }, []);
 
   async function logout() {
@@ -66,14 +68,33 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
     window.history.replaceState(null, "", section === "providers" ? "/settings" : "/settings?section=users");
   }
 
+  function toggleSidebar() {
+    setSidebarCollapsed((collapsed) => {
+      window.localStorage.setItem("mop-agent-sidebar-collapsed", collapsed ? "0" : "1");
+      return !collapsed;
+    });
+  }
+
   return (
     <MemoryCoreContext.Provider value={{ projects, settingsSection, setSettingsSection }}>
-      <div className="mop-app-frame">
+      <div className={`mop-app-frame${sidebarCollapsed ? " is-sidebar-collapsed" : ""}`}>
         <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-brand-cell">
+            <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
+              <img src="/icon.svg" alt="" />
+              <span>MOP-AGENT</span>
+            </a>
+            <button
+              className="mop-sidebar-collapse-toggle"
+              type="button"
+              aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded={!sidebarCollapsed}
+              title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              onClick={toggleSidebar}
+            >
+              {sidebarCollapsed ? "›" : "‹"}
+            </button>
+          </div>
           <div className="mop-app-topbar-main">
             <button
               className="mop-menu-toggle"
@@ -94,53 +115,53 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
         {menuOpen && <button className="mop-sidebar-scrim" aria-label="Close navigation" onClick={() => setMenuOpen(false)} />}
 
         <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>
+          {isSettings ? (
+            <div className="mop-nav-section">
+              <p>SETTINGS</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>
-                )}
+                <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>
+          ) : (
+            <>
+              <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 mop-admin-nav">
+                  <p>ADMIN</p>
+                  <nav>
+                    <a href="/settings" 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" 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">

package/npm-shrinkwrap.json

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

package/package.json

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