Simplify chat UI and wire memory context

duck_core/web/static/app.js

@@ -23,6 +23,31 @@ function setStatus(id, text, tone = "neutral") {
   node.dataset.tone = tone;
 }
 
+function openActivity(tab = "") {
+  const drawer = document.querySelector("#activity-drawer");
+  const backdrop = document.querySelector("#activity-backdrop");
+  if (!drawer || !backdrop) return;
+  drawer.hidden = false;
+  backdrop.hidden = false;
+  if (tab) selectActivityTab(tab);
+}
+
+function closeActivity() {
+  const drawer = document.querySelector("#activity-drawer");
+  const backdrop = document.querySelector("#activity-backdrop");
+  if (drawer) drawer.hidden = true;
+  if (backdrop) backdrop.hidden = true;
+}
+
+function selectActivityTab(tab) {
+  document.querySelectorAll("[data-activity-tab]").forEach((button) => {
+    button.classList.toggle("active", button.dataset.activityTab === tab);
+  });
+  document.querySelectorAll("[data-activity-panel]").forEach((panel) => {
+    panel.classList.toggle("active", panel.dataset.activityPanel === tab);
+  });
+}
+
 function addMessage(role, content, meta = "", options = {}) {
   const list = document.querySelector("#messages");
   if (!list) return;
@@ -756,6 +781,15 @@ function bindChat() {
   document.querySelector("#reload-chat")?.addEventListener("click", () => {
     if (state.currentConversationId) selectConversation(state.currentConversationId).catch(console.error);
   });
+  document.querySelector("#activity-open")?.addEventListener("click", () => {
+    openActivity("events");
+  });
+  document.querySelector("#activity-close")?.addEventListener("click", closeActivity);
+  document.querySelector("#activity-backdrop")?.addEventListener("click", closeActivity);
+  document.querySelector("#activity-drawer")?.addEventListener("click", (event) => {
+    const tab = event.target.closest("[data-activity-tab]");
+    if (tab) selectActivityTab(tab.dataset.activityTab);
+  });
   document.querySelector("#refresh-audit")?.addEventListener("click", () => {
     refreshCommandAudit().catch(console.error);
   });
@@ -803,9 +837,6 @@ function bindChat() {
     event.preventDefault();
     submitToolPassword(form).catch(console.error);
   });
-  document.querySelector("#debug")?.addEventListener("change", (event) => {
-    document.querySelector("#debug-panel").hidden = !event.target.checked;
-  });
 }
 
 async function loadSimplePages() {

duck_core/web/static/style.css

@@ -213,9 +213,22 @@ button {
   font-size: 12px;
 }
 
+.utility-menu {
+  border-bottom: 1px solid rgba(255,255,255,0.12);
+  padding-bottom: 12px;
+}
+
+.utility-menu summary {
+  cursor: pointer;
+  color: #cbd5e1;
+  font-size: 13px;
+  font-weight: 750;
+}
+
 .side-nav {
   display: grid;
   gap: 6px;
+  margin-top: 10px;
 }
 
 .side-nav a {
@@ -381,7 +394,7 @@ dd {
 
 .chat-shell {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   gap: 16px;
   min-width: 0;
   height: 100vh;
@@ -418,6 +431,12 @@ dd {
   font-weight: 750;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .secondary-button {
   background: #edf2f7;
   color: #1f2937;
@@ -681,26 +700,6 @@ dd {
   font-size: 13px;
 }
 
-.debug-panel {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr) minmax(280px, 0.85fr);
-  gap: 16px;
-  min-height: 180px;
-}
-
-.debug-column {
-  min-width: 0;
-  padding: 14px;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.debug-column h3 {
-  margin: 0 0 10px;
-  font-size: 13px;
-}
-
 .debug-heading {
   display: flex;
   align-items: center;
@@ -709,6 +708,97 @@ dd {
   margin-bottom: 10px;
 }
 
+.activity-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background: rgba(15, 23, 42, 0.28);
+}
+
+.activity-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 21;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  width: min(520px, 100vw);
+  height: 100vh;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+  box-shadow: -18px 0 45px rgba(15, 23, 42, 0.18);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.drawer-header h2,
+.drawer-header p {
+  margin: 0;
+}
+
+.drawer-header h2 {
+  font-size: 18px;
+}
+
+.drawer-header p {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.icon-button {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 7px;
+  background: #edf2f7;
+  color: #1f2937;
+  font-weight: 800;
+}
+
+.drawer-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.drawer-tab {
+  border: 0;
+  border-radius: 7px;
+  padding: 8px 10px;
+  background: #edf2f7;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.drawer-tab.active {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.drawer-section {
+  display: none;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+}
+
+.drawer-section.active {
+  display: block;
+}
+
 .debug-heading h3 {
   margin: 0;
 }
@@ -756,7 +846,7 @@ pre,
 .memory-list {
   display: grid;
   gap: 8px;
-  max-height: 170px;
+  max-height: none;
   overflow: auto;
 }
 
@@ -909,9 +999,4 @@ pre,
     flex-direction: column;
     align-items: stretch;
   }
-
-  .debug-panel {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
 }