From 90822812258266f93b733fdfa33b568a8407736c Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 15 Apr 2026 19:12:11 -0400
Subject: [PATCH] =?UTF-8?q?feat(chat):=20Phase=20C=20=E2=80=94=20collapsib?=
 =?UTF-8?q?le=20context=20sidebar=20with=20header=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Context sidebar sections (Auto-included / Suggested / In Context) are
now collapsible with chevrons, and collapsed state persists per
conversation via localStorage. A new Context (N) button in the chat
header toggles the whole sidebar — open by default on wide screens
(>=1200px), closed by default below. Visual differentiation: auto-
included notes get a muted background with an AUTO pill, in-context
notes get an active-chip style with a primary-colored left border,
and each section header shows its item count.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ChatPanel.vue | 192 ++++++++++++++++++++++----
 frontend/src/views/ChatView.vue       |  50 +++++++
 2 files changed, 214 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 4a60884..3c19ff1 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import ChatMessage from '@/components/ChatMessage.vue'
 import ChatStreamingBubble from '@/components/ChatStreamingBubble.vue'
@@ -117,11 +117,71 @@ function removeIncludedNote(noteId: number) {
   }
 }
 
-const hasContextSidebar = computed(
-  () => props.variant === 'full' && !props.briefingMode && !props.projectId &&
-    (autoInjectedNotes.value.length > 0 || includedNotes.value.length > 0 || suggestedNotes.value.length > 0)
+const contextCount = computed(
+  () => autoInjectedNotes.value.length + suggestedNotes.value.length + includedNotes.value.length
 )
 
+const hasContextData = computed(
+  () => props.variant === 'full' && !props.briefingMode && !props.projectId && contextCount.value > 0
+)
+
+// ── Narrow-viewport sidebar toggle ────────────────────────────────────────────
+const NARROW_BREAKPOINT = 1200
+const isNarrow = ref(typeof window !== 'undefined' && window.innerWidth < NARROW_BREAKPOINT)
+const sidebarOpen = ref(!isNarrow.value)
+
+function onResize() {
+  isNarrow.value = window.innerWidth < NARROW_BREAKPOINT
+}
+onMounted(() => window.addEventListener('resize', onResize))
+onUnmounted(() => window.removeEventListener('resize', onResize))
+
+function toggleContextSidebar() {
+  sidebarOpen.value = !sidebarOpen.value
+}
+
+const hasContextSidebar = computed(() => hasContextData.value && sidebarOpen.value)
+
+// ── Collapsible sections (per-conversation, localStorage) ─────────────────────
+type SectionKey = 'auto' | 'suggested' | 'included'
+const collapsedSections = ref<Set<SectionKey>>(new Set())
+
+function storageKey(): string | null {
+  const id = store.currentConversation?.id
+  return id ? `fa_chat_ctx_collapsed_${id}` : null
+}
+
+function loadCollapsed() {
+  const key = storageKey()
+  if (!key) { collapsedSections.value = new Set(); return }
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) { collapsedSections.value = new Set(); return }
+    const arr = JSON.parse(raw) as SectionKey[]
+    collapsedSections.value = new Set(arr)
+  } catch {
+    collapsedSections.value = new Set()
+  }
+}
+
+function saveCollapsed() {
+  const key = storageKey()
+  if (!key) return
+  try {
+    localStorage.setItem(key, JSON.stringify([...collapsedSections.value]))
+  } catch { /* ignore */ }
+}
+
+function toggleSection(key: SectionKey) {
+  const next = new Set(collapsedSections.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  collapsedSections.value = next
+  saveCollapsed()
+}
+
+watch(() => store.currentConversation?.id, () => loadCollapsed(), { immediate: true })
+
 // ── Send ──────────────────────────────────────────────────────────────────────
 const inputBarRef = ref<InstanceType<typeof ChatInputBar> | null>(null)
 
@@ -232,7 +292,7 @@ function hasEarlierBriefingSlot(index: number): boolean {
   return false
 }
 
-defineExpose({ focus, prefill, send })
+defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSidebar, hasContextData })
 </script>
 
 <template>
@@ -286,34 +346,65 @@ defineExpose({ focus, prefill, send })
       <!-- Context sidebar (full, non-briefing, non-workspace) -->
       <aside v-if="hasContextSidebar" class="context-sidebar">
         <template v-if="autoInjectedNotes.length">
-          <div class="context-sidebar-header">Auto-included</div>
-          <div v-for="note in autoInjectedNotes" :key="note.id" class="context-note context-note-auto">
-            <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
-            <span
-              v-if="note.score != null"
-              class="context-note-score"
-              :class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
-            >{{ Math.round(note.score * 100) }}%</span>
-            <button class="context-note-remove" @click="excludeAutoNote(note.id)">&times;</button>
+          <button
+            class="context-sidebar-header"
+            :class="{ collapsed: collapsedSections.has('auto') }"
+            @click="toggleSection('auto')"
+          >
+            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <span>Auto-included</span>
+            <span class="section-count">{{ autoInjectedNotes.length }}</span>
+          </button>
+          <div v-show="!collapsedSections.has('auto')">
+            <div v-for="note in autoInjectedNotes" :key="note.id" class="context-note context-note-auto">
+              <span class="auto-pill" title="Auto-included by relevance">AUTO</span>
+              <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
+              <span
+                v-if="note.score != null"
+                class="context-note-score"
+                :class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
+              >{{ Math.round(note.score * 100) }}%</span>
+              <button class="context-note-remove" @click="excludeAutoNote(note.id)" title="Remove from context">&times;</button>
+            </div>
           </div>
         </template>
         <template v-if="suggestedNotes.length">
-          <div class="context-sidebar-header" :class="{ 'context-sidebar-header-gap': autoInjectedNotes.length }">Suggested</div>
-          <div v-for="note in suggestedNotes" :key="note.id" class="context-note context-note-suggested">
-            <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
-            <span
-              v-if="note.score != null"
-              class="context-note-score"
-              :class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
-            >{{ Math.round(note.score * 100) }}%</span>
-            <button class="context-note-add" @click="includeNote(note)" title="Add to context">+</button>
+          <button
+            class="context-sidebar-header"
+            :class="{ collapsed: collapsedSections.has('suggested'), 'context-sidebar-header-gap': autoInjectedNotes.length }"
+            @click="toggleSection('suggested')"
+          >
+            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <span>Suggested</span>
+            <span class="section-count">{{ suggestedNotes.length }}</span>
+          </button>
+          <div v-show="!collapsedSections.has('suggested')">
+            <div v-for="note in suggestedNotes" :key="note.id" class="context-note context-note-suggested">
+              <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
+              <span
+                v-if="note.score != null"
+                class="context-note-score"
+                :class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
+              >{{ Math.round(note.score * 100) }}%</span>
+              <button class="context-note-add" @click="includeNote(note)" title="Add to context">+</button>
+            </div>
           </div>
         </template>
         <template v-if="includedNotes.length">
-          <div class="context-sidebar-header" :class="{ 'context-sidebar-header-gap': autoInjectedNotes.length || suggestedNotes.length }">In Context</div>
-          <div v-for="note in includedNotes" :key="note.id" class="context-note context-note-included">
-            <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
-            <button class="context-note-remove" @click="removeIncludedNote(note.id)">&times;</button>
+          <button
+            class="context-sidebar-header"
+            :class="{ collapsed: collapsedSections.has('included'), 'context-sidebar-header-gap': autoInjectedNotes.length || suggestedNotes.length }"
+            @click="toggleSection('included')"
+          >
+            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <span>In Context</span>
+            <span class="section-count">{{ includedNotes.length }}</span>
+          </button>
+          <div v-show="!collapsedSections.has('included')">
+            <div v-for="note in includedNotes" :key="note.id" class="context-note context-note-included">
+              <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
+              <button class="context-note-remove" @click="removeIncludedNote(note.id)" title="Remove from context">&times;</button>
+            </div>
           </div>
         </template>
       </aside>
@@ -438,19 +529,64 @@ defineExpose({ focus, prefill, send })
   font-size: 0.78rem;
 }
 .context-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0.15rem 0.1rem;
+  font-family: inherit;
   font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text-muted);
   margin-bottom: 0.35rem;
+  cursor: pointer;
+  text-align: left;
+}
+.context-sidebar-header:hover { color: var(--color-text); }
+.context-sidebar-header .chev {
+  transition: transform 0.15s ease;
+}
+.context-sidebar-header.collapsed .chev {
+  transform: rotate(-90deg);
+}
+.context-sidebar-header .section-count {
+  margin-left: auto;
+  color: var(--color-text-muted);
+  font-weight: 600;
+  background: var(--color-bg);
+  padding: 0.05rem 0.3rem;
+  border-radius: 8px;
 }
 .context-sidebar-header-gap { margin-top: 0.75rem; }
 .context-note {
   display: flex;
   align-items: center;
-  gap: 0.2rem;
+  gap: 0.25rem;
   margin-bottom: 0.25rem;
+  padding: 0.2rem 0.35rem;
+  border-radius: var(--radius-sm);
+}
+.context-note-auto {
+  background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
+  opacity: 0.85;
+}
+.context-note-included {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-left: 2px solid var(--color-primary);
+}
+.auto-pill {
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 0.05rem 0.3rem;
+  border-radius: 4px;
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
 }
 .context-note-name {
   flex: 1;
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index e16c3aa..0961770 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -240,6 +240,12 @@ async function handleSummarize() {
 
 const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
 
+const contextCount = computed(() => chatPanelRef.value?.contextCount ?? 0);
+const contextSidebarOpen = computed(() => chatPanelRef.value?.sidebarOpen ?? false);
+function toggleContextSidebar() {
+  chatPanelRef.value?.toggleContextSidebar();
+}
+
 // ── Kebab dismissal ───────────────────────────────────────────────────────────
 function onDocumentMousedown(e: MouseEvent) {
   const target = e.target as HTMLElement | null;
@@ -420,6 +426,18 @@ onUnmounted(() => {
             </div>
           </div>
 
+          <button
+            v-if="contextCount > 0"
+            class="btn-context-toggle"
+            :class="{ active: contextSidebarOpen }"
+            @click="toggleContextSidebar"
+            :title="contextSidebarOpen ? 'Hide context panel' : 'Show context panel'"
+          >
+            <span class="context-icon">📎</span>
+            <span class="context-label">Context</span>
+            <span class="context-count-badge">{{ contextCount }}</span>
+          </button>
+
           <div class="header-kebab-wrapper">
             <button
               class="btn-kebab"
@@ -716,6 +734,38 @@ onUnmounted(() => {
 .scope-option:hover { background: var(--color-bg-secondary); }
 .scope-option.active { color: var(--color-primary); font-weight: 600; }
 
+/* Context toggle button (header) */
+.btn-context-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  font-family: inherit;
+}
+.btn-context-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.btn-context-toggle.active {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.context-icon { font-size: 0.85rem; line-height: 1; }
+.context-count-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  background: var(--color-bg);
+  padding: 0.05rem 0.35rem;
+  border-radius: 8px;
+  color: var(--color-text);
+}
+
 .kebab-menu {
   position: absolute;
   top: calc(100% + 4px);