feat(chat): Phase C — collapsible context sidebar with header toggle

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/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);