From 4228e9a384e95803ebc19d47c21fe476b77094df Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 15 Apr 2026 09:44:16 -0400
Subject: [PATCH] feat(chat): move scope chip to header, consolidate voice
 controls into input bar

Phase B of chat view refinement. Bumps chat reading column to 1200px,
lifts the RAG scope chip out of the footer and into the ChatView header
(next to the title), and collapses the listen toggle / volume slider /
stop-playback buttons into a single speaker popover on the input bar.
Listen mode + TTS are now available in briefing and workspace chats too,
since the controls live on the shared ChatInputBar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/theme.css            |   2 +-
 frontend/src/components/ChatInputBar.vue | 160 ++++++++++++++-
 frontend/src/components/ChatPanel.vue    | 237 +----------------------
 frontend/src/views/ChatView.vue          | 130 ++++++++++++-
 4 files changed, 290 insertions(+), 239 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index b72322f..dd65cb9 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -54,7 +54,7 @@
   --page-max-width: 1200px;
   --page-padding-x: 1rem;
   --sidebar-width: 260px;
-  --chat-reading-width: min(820px, 100%);
+  --chat-reading-width: min(1200px, 100%);
   --chat-context-sidebar-width: 220px;
   --color-accent-warm: #b8860b;
   --color-accent-warm-light: #d4a017;
diff --git a/frontend/src/components/ChatInputBar.vue b/frontend/src/components/ChatInputBar.vue
index 8779219..2097eb9 100644
--- a/frontend/src/components/ChatInputBar.vue
+++ b/frontend/src/components/ChatInputBar.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { apiGet, transcribeAudio } from '@/api/client'
 import { useVoiceRecorder } from '@/composables/useVoiceRecorder'
 import { useSilenceDetector } from '@/composables/useSilenceDetector'
+import { useStreamingTts } from '@/composables/useStreamingTts'
+import { useVoiceAudio, setVoiceVolume } from '@/composables/useVoiceAudio'
+import { useListenMode } from '@/composables/useListenMode'
 import { useChatStore } from '@/stores/chat'
 import { useSettingsStore } from '@/stores/settings'
 import { useToastStore } from '@/stores/toast'
@@ -29,6 +32,32 @@ const emit = defineEmits<{
 const store = useChatStore()
 const settingsStore = useSettingsStore()
 const voiceEnabled = computed(() => settingsStore.voiceSttReady)
+const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady)
+
+// ── Streaming TTS (listen mode) ───────────────────────────────────────────────
+const listenMode = useListenMode()
+const audio = useVoiceAudio()
+const speakerPopoverOpen = ref(false)
+
+const tts = useStreamingTts({
+  streamingContent: computed(() => store.streamingContent),
+  streaming: computed(() => store.streaming),
+  enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
+})
+
+function lastAssistantContent(): string {
+  const msgs = store.currentConversation?.messages ?? []
+  return [...msgs].reverse().find((m) => m.role === 'assistant')?.content ?? ''
+}
+
+function toggleListen() {
+  listenMode.value = !listenMode.value
+  if (listenMode.value) {
+    tts.speak(lastAssistantContent())
+  } else {
+    tts.stop()
+  }
+}
 
 // ── Core input ────────────────────────────────────────────────────────────────
 const messageInput = ref('')
@@ -173,6 +202,15 @@ async function stopRecording() {
   finally { transcribingVoice.value = false }
 }
 
+// ── Click-outside to dismiss speaker popover ──────────────────────────────────
+function onDocumentMousedown(e: MouseEvent) {
+  if (!speakerPopoverOpen.value) return
+  const target = e.target as HTMLElement | null
+  if (!target?.closest('.speaker-wrapper')) speakerPopoverOpen.value = false
+}
+onMounted(() => document.addEventListener('mousedown', onDocumentMousedown))
+onUnmounted(() => document.removeEventListener('mousedown', onDocumentMousedown))
+
 // ── Exposed interface ─────────────────────────────────────────────────────────
 function focus() {
   inputEl.value?.focus()
@@ -244,6 +282,53 @@ defineExpose({ focus, prefill })
         class="input-textarea"
       ></textarea>
 
+      <!-- Speaker / listen-mode popover -->
+      <div v-if="voiceTtsEnabled" class="speaker-wrapper">
+        <button
+          class="btn-icon btn-speaker"
+          :class="{ 'speaker-active': listenMode, 'speaker-busy': tts.speaking.value }"
+          @click="speakerPopoverOpen = !speakerPopoverOpen"
+          :title="listenMode ? 'Listen mode on' : 'Listen / volume'"
+          aria-label="Listen and volume settings"
+        >
+          <svg v-if="!tts.speaking.value" width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+          </svg>
+          <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+          </svg>
+        </button>
+        <div v-if="speakerPopoverOpen" class="speaker-popover">
+          <button
+            class="speaker-row speaker-row--toggle"
+            :class="{ 'speaker-row--active': listenMode }"
+            @click="toggleListen"
+          >
+            <span class="speaker-row-label">{{ listenMode ? 'Listening' : 'Read aloud' }}</span>
+            <span class="speaker-switch" :class="{ on: listenMode }"></span>
+          </button>
+          <div class="speaker-row">
+            <span class="speaker-row-label">Volume</span>
+            <input
+              type="range" min="0" max="1" step="0.05"
+              :value="audio.volume.value"
+              @input="setVoiceVolume(+($event.target as HTMLInputElement).value)"
+              class="speaker-volume-range"
+              aria-label="Volume"
+            />
+            <span class="speaker-volume-pct">{{ Math.round(audio.volume.value * 100) }}%</span>
+          </div>
+          <button
+            v-if="tts.speaking.value"
+            class="speaker-row speaker-row--stop"
+            @click="tts.stop()"
+          >
+            <svg width="12" height="12" viewBox="0 0 14 14" fill="currentColor"><rect width="14" height="14" rx="2"/></svg>
+            <span>Stop playback</span>
+          </button>
+        </div>
+      </div>
+
       <!-- PTT mic (with live amplitude halo behind) -->
       <div v-if="voiceEnabled" class="mic-wrapper">
         <div class="mic-glow" :style="micGlowStyle" aria-hidden="true"></div>
@@ -475,4 +560,77 @@ defineExpose({ focus, prefill })
   flex-shrink: 0;
 }
 .btn-abort-inline:hover { border-color: #ef4444; color: #ef4444; }
+
+/* Speaker / listen-mode popover */
+.speaker-wrapper { position: relative; display: inline-flex; flex-shrink: 0; }
+.btn-speaker.speaker-active { opacity: 1; color: var(--color-primary); }
+.btn-speaker.speaker-busy { opacity: 1; color: #f59e0b; }
+.speaker-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  min-width: 220px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 16px var(--color-shadow);
+  padding: 0.35rem;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.speaker-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.45rem 0.6rem;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 0.85rem;
+  cursor: default;
+  text-align: left;
+  width: 100%;
+}
+.speaker-row--toggle { cursor: pointer; }
+.speaker-row--toggle:hover { background: var(--color-bg-secondary); }
+.speaker-row--active { color: var(--color-primary); }
+.speaker-row--stop {
+  cursor: pointer;
+  color: var(--color-text-muted);
+  justify-content: flex-start;
+}
+.speaker-row--stop:hover { color: #ef4444; background: var(--color-bg-secondary); }
+.speaker-row-label { flex: 1; }
+.speaker-volume-range { flex: 1; min-width: 0; }
+.speaker-volume-pct {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  min-width: 2.5rem;
+  text-align: right;
+}
+.speaker-switch {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  border-radius: 9999px;
+  background: var(--color-border);
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+.speaker-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-bg-card);
+  transition: transform 0.15s;
+}
+.speaker-switch.on { background: var(--color-primary); }
+.speaker-switch.on::after { transform: translateX(12px); }
 </style>
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 1c8b40e..4a60884 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted } from 'vue'
 import { useChatStore } from '@/stores/chat'
-import { useSettingsStore } from '@/stores/settings'
-import { useStreamingTts } from '@/composables/useStreamingTts'
-import { useVoiceAudio, setVoiceVolume } from '@/composables/useVoiceAudio'
-import { useListenMode } from '@/composables/useListenMode'
-import { apiGet } from '@/api/client'
 import ChatMessage from '@/components/ChatMessage.vue'
 import ChatStreamingBubble from '@/components/ChatStreamingBubble.vue'
 import ChatInputBar from '@/components/ChatInputBar.vue'
@@ -34,33 +29,6 @@ const emit = defineEmits<{
 }>()
 
 const store = useChatStore()
-const settingsStore = useSettingsStore()
-
-// ── Voice / TTS ───────────────────────────────────────────────────────────────
-const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady)
-const listenMode = useListenMode()
-const audio = useVoiceAudio()
-const showVolumeSlider = ref(false)
-
-const tts = useStreamingTts({
-  streamingContent: computed(() => store.streamingContent),
-  streaming: computed(() => store.streaming),
-  enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
-})
-
-function lastAssistantContent(): string {
-  const msgs = store.currentConversation?.messages ?? []
-  return [...msgs].reverse().find((m) => m.role === 'assistant')?.content ?? ''
-}
-
-function toggleListen() {
-  listenMode.value = !listenMode.value
-  if (listenMode.value) {
-    tts.speak(lastAssistantContent())
-  } else {
-    tts.stop()
-  }
-}
 
 // ── Scroll ────────────────────────────────────────────────────────────────────
 const messagesEl = ref<HTMLElement | null>(null)
@@ -89,47 +57,6 @@ watch(() => store.streamingToolCalls, (calls) => {
 }, { deep: true })
 watch(() => store.streaming, (s) => { if (!s) _seenCalendarToolIdx.clear() })
 
-// ── RAG scope chip (full, non-briefing, non-workspace) ────────────────────────
-const projects = ref<{ id: number; title: string }[]>([])
-const scopeDropdownOpen = ref(false)
-const scopePulse = ref(false)
-
-const showScopeChip = computed(
-  () => props.variant === 'full' && !props.briefingMode && !props.projectId
-)
-
-const scopeLabel = computed(() => {
-  const id = store.ragProjectId
-  if (id === -1) return 'All notes'
-  if (id === null) return 'Orphan notes'
-  return projects.value.find((p) => p.id === id)?.title ?? `Project ${id}`
-})
-
-async function loadProjects() {
-  try {
-    const data = await apiGet<{ projects: { id: number; title: string }[] }>('/api/projects?status=active')
-    projects.value = data.projects ?? []
-  } catch {
-    projects.value = []
-  }
-}
-
-async function onScopeSelect(value: number | null) {
-  scopeDropdownOpen.value = false
-  const convId = store.currentConversation?.id
-  if (!convId) return
-  await store.updateRagScope(convId, value)
-  scopePulse.value = true
-  setTimeout(() => { scopePulse.value = false }, 600)
-}
-
-// Pulse when model-driven scope change fires
-watch(() => store.ragProjectId, () => {
-  if (!showScopeChip.value) return
-  scopePulse.value = true
-  setTimeout(() => { scopePulse.value = false }, 600)
-})
-
 // ── Note context (full variant — included / suggested / auto-injected notes) ──
 const includedNoteIds = ref<Set<number>>(new Set())
 const includedNotes = ref<{ id: number; title: string }[]>([])
@@ -271,8 +198,7 @@ async function handleSaveAsNote(messageId: number) {
 }
 
 // ── Lifecycle ─────────────────────────────────────────────────────────────────
-onMounted(async () => {
-  if (showScopeChip.value) await loadProjects()
+onMounted(() => {
   if (props.autoFocus) nextTick(() => inputBarRef.value?.focus())
 })
 
@@ -394,79 +320,6 @@ defineExpose({ focus, prefill, send })
 
       <!-- Input area (hidden when readOnly) -->
       <div v-if="!readOnly" class="input-wrapper">
-      <!-- Scope chip -->
-      <div v-if="showScopeChip" class="scope-chip-row">
-        <div class="scope-chip-wrapper">
-          <button
-            class="scope-chip"
-            :class="{ pulse: scopePulse }"
-            @click="scopeDropdownOpen = !scopeDropdownOpen"
-            title="Change RAG scope"
-          >
-            <span class="scope-dot">⊙</span> {{ scopeLabel }}
-          </button>
-          <div v-if="scopeDropdownOpen" class="scope-dropdown">
-            <button class="scope-option" :class="{ active: store.ragProjectId === null }" @click="onScopeSelect(null)">Orphan notes only</button>
-            <button
-              v-for="p in projects"
-              :key="p.id"
-              class="scope-option"
-              :class="{ active: store.ragProjectId === p.id }"
-              @click="onScopeSelect(p.id)"
-            >{{ p.title }}</button>
-            <button class="scope-option" :class="{ active: store.ragProjectId === -1 }" @click="onScopeSelect(-1)">All notes</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Listen / volume controls -->
-      <div v-if="voiceTtsEnabled" class="voice-controls">
-        <div class="volume-wrapper">
-          <button
-            class="btn-voice"
-            :class="{ 'btn-voice--active': listenMode, 'btn-voice--busy': tts.speaking.value }"
-            @click="toggleListen"
-            :title="listenMode ? 'Stop auto-read' : 'Read responses aloud'"
-            aria-label="Toggle listen mode"
-          >
-            <svg v-if="!tts.speaking.value" width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
-            </svg>
-            <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
-            </svg>
-          </button>
-          <button
-            class="btn-voice btn-volume-icon"
-            @click="showVolumeSlider = !showVolumeSlider"
-            :title="`Volume: ${Math.round(audio.volume.value * 100)}%`"
-            aria-label="Volume"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
-            </svg>
-          </button>
-          <div v-if="showVolumeSlider" class="volume-popup">
-            <input
-              type="range" min="0" max="1" step="0.05"
-              :value="audio.volume.value"
-              @input="setVoiceVolume(+($event.target as HTMLInputElement).value)"
-              class="volume-range"
-              aria-label="Volume"
-            />
-            <span class="volume-pct">{{ Math.round(audio.volume.value * 100) }}%</span>
-          </div>
-        </div>
-        <button
-          v-if="tts.speaking.value"
-          class="btn-voice"
-          @click="tts.stop()"
-          title="Stop playback"
-        >
-          <svg width="13" height="13" viewBox="0 0 14 14" fill="currentColor"><rect width="14" height="14" rx="2"/></svg>
-        </button>
-      </div>
-
       <!-- Unified input bar -->
       <ChatInputBar
         ref="inputBarRef"
@@ -642,94 +495,6 @@ defineExpose({ focus, prefill, send })
   gap: 0.4rem;
 }
 
-/* Scope chip */
-.scope-chip-row { display: flex; }
-.scope-chip-wrapper { position: relative; }
-.scope-chip {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: 20px;
-  padding: 0.2rem 0.65rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  transition: border-color 0.15s, color 0.15s;
-}
-.scope-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.scope-chip.pulse { animation: pulse-chip 0.6s ease; }
-@keyframes pulse-chip {
-  0%, 100% { border-color: var(--color-border); }
-  50% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 6px rgba(99,102,241,0.4); }
-}
-.scope-dot { font-size: 0.6rem; }
-.scope-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 180px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: 0 4px 16px var(--color-shadow);
-  z-index: 20;
-  overflow: hidden;
-}
-.scope-option {
-  display: block;
-  width: 100%;
-  padding: 0.45rem 0.75rem;
-  text-align: left;
-  background: none;
-  border: none;
-  font-size: 0.85rem;
-  color: var(--color-text);
-  cursor: pointer;
-}
-.scope-option:hover { background: var(--color-bg-secondary); }
-.scope-option.active { color: var(--color-primary); font-weight: 600; }
-
-/* Voice controls */
-.voice-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-.volume-wrapper { position: relative; display: flex; align-items: center; gap: 0.1rem; }
-.btn-voice {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-muted);
-  opacity: 0.65;
-  padding: 0.2rem;
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-  transition: opacity 0.15s, color 0.15s;
-}
-.btn-voice:hover { opacity: 1; }
-.btn-voice--active { opacity: 1; color: var(--color-primary); }
-.btn-voice--busy { opacity: 1; color: #f59e0b; }
-.volume-popup {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 0;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  z-index: 20;
-  box-shadow: 0 4px 16px var(--color-shadow);
-}
-.volume-range { width: 80px; }
-.volume-pct { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
-
 /* Queued messages */
 .queued-message { opacity: 0.45; }
 .queued-bubble {
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index c6aaf9a..e16c3aa 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, ref, computed, watch, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useChatStore } from "@/stores/chat";
+import { apiGet } from "@/api/client";
 import ChatPanel from "@/components/ChatPanel.vue";
 
 const route = useRoute();
@@ -14,6 +15,46 @@ const convSearchQuery = ref("");
 const headerKebabOpen = ref(false);
 const sidebarKebabOpen = ref(false);
 
+// ── RAG scope chip ────────────────────────────────────────────────────────────
+const projects = ref<{ id: number; title: string }[]>([]);
+const scopeDropdownOpen = ref(false);
+const scopePulse = ref(false);
+
+const scopeLabel = computed(() => {
+  const id = store.ragProjectId;
+  if (id === -1) return "All notes";
+  if (id === null) return "Orphan notes";
+  return projects.value.find((p) => p.id === id)?.title ?? `Project ${id}`;
+});
+
+async function loadProjects() {
+  try {
+    const data = await apiGet<{ projects: { id: number; title: string }[] }>(
+      "/api/projects?status=active"
+    );
+    projects.value = data.projects ?? [];
+  } catch {
+    projects.value = [];
+  }
+}
+
+async function onScopeSelect(value: number | null) {
+  scopeDropdownOpen.value = false;
+  const id = store.currentConversation?.id;
+  if (!id) return;
+  await store.updateRagScope(id, value);
+  scopePulse.value = true;
+  setTimeout(() => { scopePulse.value = false; }, 600);
+}
+
+watch(
+  () => store.ragProjectId,
+  () => {
+    scopePulse.value = true;
+    setTimeout(() => { scopePulse.value = false; }, 600);
+  }
+);
+
 let prevConvId: number | null = null;
 
 const convId = computed(() => {
@@ -78,6 +119,7 @@ const groupedConversations = computed((): ConvGroup[] => {
 onMounted(async () => {
   document.addEventListener("keydown", onGlobalKeydown);
   document.addEventListener("mousedown", onDocumentMousedown);
+  loadProjects();
   await store.fetchConversations();
   if (convId.value) {
     if (store.currentConversation?.id !== convId.value) {
@@ -207,14 +249,18 @@ function onDocumentMousedown(e: MouseEvent) {
   if (sidebarKebabOpen.value && !target?.closest(".sidebar-kebab-wrapper")) {
     sidebarKebabOpen.value = false;
   }
+  if (scopeDropdownOpen.value && !target?.closest(".scope-chip-wrapper")) {
+    scopeDropdownOpen.value = false;
+  }
 }
 
 // ── Keyboard ──────────────────────────────────────────────────────────────────
 function onGlobalKeydown(e: KeyboardEvent) {
   if (e.key !== "Escape") return;
-  if (headerKebabOpen.value || sidebarKebabOpen.value) {
+  if (headerKebabOpen.value || sidebarKebabOpen.value || scopeDropdownOpen.value) {
     headerKebabOpen.value = false;
     sidebarKebabOpen.value = false;
+    scopeDropdownOpen.value = false;
     return;
   }
   if (sidebarOpen.value) {
@@ -344,6 +390,36 @@ onUnmounted(() => {
           </button>
           <h2>{{ store.currentConversation.title || "New Chat" }}</h2>
 
+          <div class="scope-chip-wrapper">
+            <button
+              class="scope-chip"
+              :class="{ pulse: scopePulse }"
+              @click="scopeDropdownOpen = !scopeDropdownOpen"
+              title="Change RAG scope"
+            >
+              <span class="scope-dot">⊙</span> {{ scopeLabel }}
+            </button>
+            <div v-if="scopeDropdownOpen" class="scope-dropdown">
+              <button
+                class="scope-option"
+                :class="{ active: store.ragProjectId === null }"
+                @click="onScopeSelect(null)"
+              >Orphan notes only</button>
+              <button
+                v-for="p in projects"
+                :key="p.id"
+                class="scope-option"
+                :class="{ active: store.ragProjectId === p.id }"
+                @click="onScopeSelect(p.id)"
+              >{{ p.title }}</button>
+              <button
+                class="scope-option"
+                :class="{ active: store.ragProjectId === -1 }"
+                @click="onScopeSelect(-1)"
+              >All notes</button>
+            </div>
+          </div>
+
           <div class="header-kebab-wrapper">
             <button
               class="btn-kebab"
@@ -588,6 +664,58 @@ onUnmounted(() => {
   position: relative;
 }
 
+/* RAG scope chip (header) */
+.scope-chip-wrapper { position: relative; flex-shrink: 0; }
+.scope-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 0.2rem 0.65rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.scope-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.scope-chip.pulse { animation: pulse-chip 0.6s ease; }
+@keyframes pulse-chip {
+  0%, 100% { border-color: var(--color-border); }
+  50% {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+    box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
+  }
+}
+.scope-dot { font-size: 0.6rem; }
+.scope-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 200px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 16px var(--color-shadow);
+  z-index: 20;
+  overflow: hidden;
+}
+.scope-option {
+  display: block;
+  width: 100%;
+  padding: 0.45rem 0.75rem;
+  text-align: left;
+  background: none;
+  border: none;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  cursor: pointer;
+}
+.scope-option:hover { background: var(--color-bg-secondary); }
+.scope-option.active { color: var(--color-primary); font-weight: 600; }
+
 .kebab-menu {
   position: absolute;
   top: calc(100% + 4px);