From fb18d2c41d1b17a65009595b7a591cd5557b8f64 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 11 Feb 2026 06:49:12 -0500
Subject: [PATCH] Add note context visibility in chat and standardize UI design
 tokens

Improve chat context: build_context() now returns metadata about auto-found
notes, emitted as an SSE event so the frontend can display context pills
showing which notes influenced the response. Users can promote notes for
deeper context (+) or exclude irrelevant ones (x). A note picker lets users
manually attach notes. Multi-word search uses per-term AND matching, and
auto-search iterates keywords individually for broader OR-style coverage.

Standardize styling: introduce CSS design tokens (--radius-sm/md/lg/pill,
--color-success/warning/overlay, --focus-ring) and migrate all components
to use them. Fix header alignment to full-width, add active nav link state,
replace hardcoded colors with CSS variables, and normalize button padding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/theme.css               |  25 ++
 frontend/src/components/AppHeader.vue       |  29 +-
 frontend/src/components/ChatMessage.vue     |  56 ++-
 frontend/src/components/ChatPanel.vue       | 425 ++++++++++++++++---
 frontend/src/components/MarkdownToolbar.vue |   2 +-
 frontend/src/components/NoteCard.vue        |   2 +-
 frontend/src/components/PaginationBar.vue   |   2 +-
 frontend/src/components/SearchBar.vue       |   2 +-
 frontend/src/components/TaskCard.vue        |   2 +-
 frontend/src/stores/chat.ts                 |  19 +-
 frontend/src/types/chat.ts                  |   6 +
 frontend/src/views/ChatView.vue             | 430 +++++++++++++++++---
 frontend/src/views/HomeView.vue             |   6 +-
 frontend/src/views/NoteEditorView.vue       |  26 +-
 frontend/src/views/NoteViewerView.vue       |   4 +-
 frontend/src/views/NotesListView.vue        |  12 +-
 frontend/src/views/SettingsView.vue         |  34 +-
 frontend/src/views/TaskEditorView.vue       |  28 +-
 frontend/src/views/TaskViewerView.vue       |   4 +-
 frontend/src/views/TasksListView.vue        |  12 +-
 src/fabledassistant/routes/chat.py          |   9 +-
 src/fabledassistant/routes/settings.py      |  26 ++
 src/fabledassistant/services/chat.py        |  11 +-
 src/fabledassistant/services/llm.py         |  63 ++-
 src/fabledassistant/services/notes.py       |  12 +-
 summary.md                                  |  60 ++-
 26 files changed, 1070 insertions(+), 237 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index 3748902..ba2b8a1 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -32,6 +32,17 @@
   --color-code-bg: #f6f8fa;
   --color-code-inline-bg: #eff1f3;
   --color-table-stripe: #f9f9f9;
+  --color-success: #22c55e;
+  --color-warning: #eab308;
+  --color-input-bar-bg: #f0f0f0;
+  --color-input-bar-text: #1a1a1a;
+  --color-input-bar-placeholder: rgba(0, 0, 0, 0.4);
+  --color-overlay: rgba(0, 0, 0, 0.45);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
 }
 
 [data-theme="dark"] {
@@ -68,6 +79,12 @@
   --color-code-bg: #161b22;
   --color-code-inline-bg: #2a3040;
   --color-table-stripe: #1a2030;
+  --color-success: #4ade80;
+  --color-warning: #facc15;
+  --color-input-bar-bg: #1c1c1e;
+  --color-input-bar-text: #ffffff;
+  --color-input-bar-placeholder: rgba(255, 255, 255, 0.4);
+  --color-overlay: rgba(0, 0, 0, 0.6);
 }
 
 *,
@@ -85,3 +102,11 @@ body {
   line-height: 1.5;
   transition: background-color 0.2s, color 0.2s;
 }
+
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index a8dd257..e2a7c9b 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -54,9 +54,7 @@ const statusClass = computed(() => {
   border-bottom: 1px solid var(--color-border);
 }
 .nav {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -70,19 +68,29 @@ const statusClass = computed(() => {
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.25rem;
 }
 .nav-link {
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s, color 0.15s;
 }
 .nav-link:hover {
   color: var(--color-primary);
+  background: var(--color-bg-card);
+}
+.nav-link.router-link-active {
+  color: var(--color-primary);
+  background: var(--color-bg-card);
+  font-weight: 600;
 }
 .status-indicator {
   display: flex;
   align-items: center;
+  margin-left: 0.5rem;
 }
 .status-dot {
   width: 8px;
@@ -91,14 +99,14 @@ const statusClass = computed(() => {
   flex-shrink: 0;
 }
 .status-green .status-dot {
-  background: #22c55e;
+  background: var(--color-success);
 }
 .status-yellow .status-dot {
-  background: #eab308;
+  background: var(--color-warning);
   animation: pulse-dot 2s infinite;
 }
 .status-red .status-dot {
-  background: #ef4444;
+  background: var(--color-danger);
 }
 @keyframes pulse-dot {
   0%, 100% { opacity: 1; }
@@ -107,12 +115,13 @@ const statusClass = computed(() => {
 .btn-chat-panel {
   background: none;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   font-size: 1rem;
   color: var(--color-text);
   line-height: 1;
+  margin-left: 0.25rem;
 }
 .btn-chat-panel:hover {
   background: var(--color-bg-card);
@@ -120,7 +129,7 @@ const statusClass = computed(() => {
 .theme-toggle {
   background: none;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   font-size: 1.1rem;
diff --git a/frontend/src/components/ChatMessage.vue b/frontend/src/components/ChatMessage.vue
index 069bf1e..76ce042 100644
--- a/frontend/src/components/ChatMessage.vue
+++ b/frontend/src/components/ChatMessage.vue
@@ -17,6 +17,12 @@ const emit = defineEmits<{
 
 const rendered = computed(() => renderMarkdown(props.message.content));
 
+const formattedTime = computed(() => {
+  if (!props.message.created_at) return "";
+  const date = new Date(props.message.created_at);
+  return date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+});
+
 const roleLabel = computed(() => {
   switch (props.message.role) {
     case "user":
@@ -31,24 +37,27 @@ const roleLabel = computed(() => {
 
 <template>
   <div class="chat-message" :class="`role-${message.role}`">
-    <div class="message-bubble">
-      <div class="message-header">
-        <span class="role-label">{{ roleLabel }}</span>
-        <div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
-          <button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
-            Save as Note
-          </button>
+    <div class="message-group">
+      <div class="message-bubble">
+        <div class="message-header">
+          <span class="role-label">{{ roleLabel }}</span>
+          <div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
+            <button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
+              Save as Note
+            </button>
+          </div>
+        </div>
+        <div class="message-content prose" v-html="rendered"></div>
+        <div
+          v-if="message.context_note_id"
+          class="context-badge"
+        >
+          <router-link :to="`/notes/${message.context_note_id}`">
+            Note #{{ message.context_note_id }}
+          </router-link>
         </div>
       </div>
-      <div class="message-content prose" v-html="rendered"></div>
-      <div
-        v-if="message.context_note_id"
-        class="context-badge"
-      >
-        <router-link :to="`/notes/${message.context_note_id}`">
-          Note #{{ message.context_note_id }}
-        </router-link>
-      </div>
+      <span v-if="formattedTime" class="message-timestamp">{{ formattedTime }}</span>
     </div>
   </div>
 </template>
@@ -65,8 +74,11 @@ const roleLabel = computed(() => {
   justify-content: flex-start;
 }
 
-.message-bubble {
+.message-group {
   max-width: 80%;
+}
+
+.message-bubble {
   padding: 0.75rem 1rem;
   border-radius: 16px;
 }
@@ -136,7 +148,7 @@ const roleLabel = computed(() => {
   padding: 0.1rem 0.4rem;
   background: transparent;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: var(--color-text-secondary);
   cursor: pointer;
 }
@@ -159,4 +171,12 @@ const roleLabel = computed(() => {
 .context-badge a:hover {
   text-decoration: underline;
 }
+
+.message-timestamp {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  margin-top: 0.15rem;
+  padding: 0 0.5rem;
+}
 </style>
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index 4da27bc..8a15bb1 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -2,8 +2,10 @@
 import { ref, computed, watch, nextTick } from "vue";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
+import { apiGet } from "@/api/client";
 import { renderMarkdown } from "@/utils/markdown";
 import ChatMessage from "@/components/ChatMessage.vue";
+import type { Note } from "@/types/note";
 
 const props = defineProps<{
   contextNoteId?: number | null;
@@ -17,6 +19,18 @@ const store = useChatStore();
 const settingsStore = useSettingsStore();
 const messageInput = ref("");
 const messagesEl = ref<HTMLElement | null>(null);
+const inputEl = ref<HTMLTextAreaElement | null>(null);
+
+// Note picker state
+const attachedNote = ref<{ id: number; title: string } | null>(null);
+const showNotePicker = ref(false);
+const noteSearchQuery = ref("");
+const noteSearchResults = ref<{ id: number; title: string }[]>([]);
+const noteSearchLoading = ref(false);
+let noteSearchTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Exclude tracking
+const excludedNoteIds = ref<Set<number>>(new Set());
 
 const streamingRendered = computed(() => {
   if (!store.streamingContent) return "";
@@ -46,9 +60,16 @@ async function sendMessage() {
     await store.fetchConversation(conv.id);
   }
 
+  const contextNoteId = attachedNote.value?.id ?? props.contextNoteId;
+  attachedNote.value = null;
   messageInput.value = "";
+  resetTextareaHeight();
   scrollToBottom();
-  await store.sendMessage(content, props.contextNoteId);
+  await store.sendMessage(
+    content,
+    contextNoteId,
+    excludedNoteIds.value.size ? [...excludedNoteIds.value] : undefined,
+  );
   scrollToBottom();
 }
 
@@ -63,12 +84,77 @@ async function handleSaveAsNote(messageId: number) {
   }
 }
 
+function autoResize() {
+  const el = inputEl.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = Math.min(el.scrollHeight, 150) + "px";
+}
+
+function resetTextareaHeight() {
+  const el = inputEl.value;
+  if (!el) return;
+  el.style.height = "auto";
+}
+
 function onInputKeydown(e: KeyboardEvent) {
   if (e.key === "Enter" && !e.shiftKey) {
     e.preventDefault();
     sendMessage();
   }
 }
+
+// Note picker
+function toggleNotePicker() {
+  showNotePicker.value = !showNotePicker.value;
+  if (showNotePicker.value) {
+    noteSearchQuery.value = "";
+    noteSearchResults.value = [];
+    nextTick(() => {
+      const el = document.querySelector(".panel-note-picker-search") as HTMLInputElement;
+      el?.focus();
+    });
+  }
+}
+
+function onNoteSearchInput() {
+  if (noteSearchTimer) clearTimeout(noteSearchTimer);
+  noteSearchTimer = setTimeout(async () => {
+    const q = noteSearchQuery.value.trim();
+    if (!q) {
+      noteSearchResults.value = [];
+      return;
+    }
+    noteSearchLoading.value = true;
+    try {
+      const data = await apiGet<{ notes: Note[] }>(
+        `/api/notes?q=${encodeURIComponent(q)}&all=true&limit=5`
+      );
+      noteSearchResults.value = data.notes.map((n) => ({ id: n.id, title: n.title }));
+    } catch {
+      noteSearchResults.value = [];
+    } finally {
+      noteSearchLoading.value = false;
+    }
+  }, 250);
+}
+
+function selectNote(note: { id: number; title: string }) {
+  attachedNote.value = note;
+  showNotePicker.value = false;
+}
+
+function removeAttachedNote() {
+  attachedNote.value = null;
+}
+
+function promoteAutoNote(note: { id: number; title: string }) {
+  attachedNote.value = note;
+}
+
+function excludeAutoNote(noteId: number) {
+  excludedNoteIds.value = new Set([...excludedNoteIds.value, noteId]);
+}
 </script>
 
 <template>
@@ -83,49 +169,126 @@ function onInputKeydown(e: KeyboardEvent) {
       </div>
 
       <div ref="messagesEl" class="panel-messages">
-        <template v-if="store.currentConversation">
-          <ChatMessage
-            v-for="msg in store.currentConversation.messages"
-            :key="msg.id"
-            :message="msg"
-            @save-as-note="handleSaveAsNote"
-          />
-        </template>
+        <div class="messages-inner">
+          <template v-if="store.currentConversation">
+            <ChatMessage
+              v-for="msg in store.currentConversation.messages"
+              :key="msg.id"
+              :message="msg"
+              @save-as-note="handleSaveAsNote"
+            />
+          </template>
 
-        <!-- Streaming bubble -->
-        <div v-if="store.streaming" class="chat-message role-assistant">
-          <div class="streaming-bubble">
-            <div class="message-header">
-              <span class="role-label">{{ settingsStore.assistantName }}</span>
-            </div>
-            <div class="message-content prose" v-html="streamingRendered"></div>
-            <span class="typing-indicator"></span>
+          <!-- Context pills -->
+          <div
+            v-if="store.lastContextMeta?.auto_notes?.length && (store.streaming || store.currentConversation?.messages.length)"
+            class="context-pills"
+          >
+            <span class="context-pills-label">Context:</span>
+            <span
+              v-for="note in store.lastContextMeta.auto_notes"
+              :key="note.id"
+              class="context-pill"
+            >
+              <router-link :to="`/notes/${note.id}`" class="context-pill-link" @click="emit('close')">
+                {{ note.title }}
+              </router-link>
+              <button
+                class="context-pill-btn promote"
+                @click="promoteAutoNote(note)"
+                title="Attach for next message"
+              >+</button>
+              <button
+                class="context-pill-btn exclude"
+                @click="excludeAutoNote(note.id)"
+                title="Exclude from auto-search"
+              >&times;</button>
+            </span>
           </div>
-        </div>
 
-        <p
-          v-if="!store.currentConversation?.messages.length && !store.streaming"
-          class="empty-msg"
-        >
-          Start chatting...
-        </p>
+          <!-- Streaming bubble -->
+          <div v-if="store.streaming" class="chat-message role-assistant">
+            <div class="streaming-bubble">
+              <div class="message-header">
+                <span class="role-label">{{ settingsStore.assistantName }}</span>
+              </div>
+              <div class="message-content prose" v-html="streamingRendered"></div>
+              <span class="typing-indicator"></span>
+            </div>
+          </div>
+
+          <p
+            v-if="!store.currentConversation?.messages.length && !store.streaming"
+            class="empty-msg"
+          >
+            Start chatting...
+          </p>
+        </div>
       </div>
 
-      <div class="panel-input">
-        <textarea
-          v-model="messageInput"
-          @keydown="onInputKeydown"
-          :placeholder="store.chatReady ? 'Type a message...' : 'Chat unavailable'"
-          :disabled="store.streaming || !store.chatReady"
-          rows="2"
-        ></textarea>
-        <button
-          class="btn-send"
-          @click="sendMessage"
-          :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
-        >
-          &uarr;
-        </button>
+      <div class="panel-input-wrapper">
+        <!-- Attached note pill -->
+        <div v-if="attachedNote" class="attached-note">
+          <span class="attached-note-pill">
+            {{ attachedNote.title }}
+            <button class="attached-note-remove" @click="removeAttachedNote">&times;</button>
+          </span>
+        </div>
+
+        <div class="panel-input">
+          <!-- Note picker -->
+          <div class="note-picker-wrapper">
+            <button
+              class="btn-attach"
+              @click="toggleNotePicker"
+              :disabled="store.streaming || !store.chatReady"
+              title="Attach a note"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
+              </svg>
+            </button>
+            <div v-if="showNotePicker" class="note-picker-dropdown">
+              <input
+                class="panel-note-picker-search"
+                v-model="noteSearchQuery"
+                @input="onNoteSearchInput"
+                placeholder="Search notes..."
+              />
+              <div class="note-picker-results">
+                <div
+                  v-for="note in noteSearchResults"
+                  :key="note.id"
+                  class="note-picker-item"
+                  @click="selectNote(note)"
+                >
+                  {{ note.title || "Untitled" }}
+                </div>
+                <div v-if="noteSearchLoading" class="note-picker-empty">Searching...</div>
+                <div v-else-if="noteSearchQuery && !noteSearchResults.length" class="note-picker-empty">
+                  No notes found
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <textarea
+            ref="inputEl"
+            v-model="messageInput"
+            @keydown="onInputKeydown"
+            @input="autoResize"
+            :placeholder="store.chatReady ? 'Type a message...' : 'Chat unavailable'"
+            :disabled="store.streaming || !store.chatReady"
+            rows="1"
+          ></textarea>
+          <button
+            class="btn-send"
+            @click="sendMessage"
+            :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
+          >
+            &uarr;
+          </button>
+        </div>
       </div>
     </aside>
   </div>
@@ -135,7 +298,7 @@ function onInputKeydown(e: KeyboardEvent) {
 .chat-panel-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--color-overlay);
   z-index: 100;
   display: flex;
   justify-content: flex-end;
@@ -168,7 +331,7 @@ function onInputKeydown(e: KeyboardEvent) {
   color: var(--color-primary);
   background: var(--color-bg-secondary);
   padding: 0.15rem 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 .btn-close {
   background: none;
@@ -187,6 +350,11 @@ function onInputKeydown(e: KeyboardEvent) {
   flex: 1;
   overflow-y: auto;
   padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+}
+.messages-inner {
+  margin-top: auto;
 }
 
 /* Streaming bubble — matches ChatMessage assistant style */
@@ -238,16 +406,175 @@ function onInputKeydown(e: KeyboardEvent) {
   50% { opacity: 1; }
 }
 
-/* Dark floating input */
+/* Context pills */
+.context-pills {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.35rem 0;
+}
+.context-pills-label {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.context-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.1rem 0.25rem 0.1rem 0.4rem;
+  font-size: 0.75rem;
+}
+.context-pill-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.context-pill-link:hover {
+  text-decoration: underline;
+}
+.context-pill-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  padding: 0 0.1rem;
+  color: var(--color-text-muted);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.context-pill-btn:hover {
+  background: var(--color-border);
+}
+.context-pill-btn.promote:hover {
+  color: var(--color-primary);
+}
+.context-pill-btn.exclude:hover {
+  color: var(--color-danger, #e74c3c);
+}
+
+/* Input wrapper */
+.panel-input-wrapper {
+  margin: 0 0.5rem 0.5rem;
+}
+
+/* Attached note */
+.attached-note {
+  padding: 0.2rem 0.5rem;
+}
+.attached-note-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: 10px;
+  padding: 0.15rem 0.4rem;
+  font-size: 0.75rem;
+}
+.attached-note-remove {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  font-size: 0.9rem;
+  line-height: 1;
+  padding: 0 0.1rem;
+}
+.attached-note-remove:hover {
+  color: #fff;
+}
+
+/* Floating input */
 .panel-input {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 0.5rem;
-  margin: 0 0.5rem 0.5rem;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-  background: #1c1c1e;
+  background: var(--color-input-bar-bg);
   border-radius: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px var(--color-shadow);
+}
+
+/* Note picker */
+.note-picker-wrapper {
+  position: relative;
+}
+.btn-attach {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-input-bar-text);
+  opacity: 0.6;
+  padding: 0.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-attach:hover {
+  opacity: 1;
+}
+.btn-attach:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.note-picker-dropdown {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: 260px;
+  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: 10;
+  overflow: hidden;
+}
+.panel-note-picker-search {
+  width: 100%;
+  padding: 0.45rem 0.65rem;
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.85rem;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.note-picker-results {
+  max-height: 180px;
+  overflow-y: auto;
+}
+.note-picker-item {
+  padding: 0.4rem 0.65rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.note-picker-item:hover {
+  background: var(--color-bg-secondary);
+}
+.note-picker-empty {
+  padding: 0.4rem 0.65rem;
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
 }
 .panel-input textarea {
   flex: 1;
@@ -258,11 +585,13 @@ function onInputKeydown(e: KeyboardEvent) {
   font-family: inherit;
   font-size: 0.9rem;
   background: transparent;
-  color: #fff;
+  color: var(--color-input-bar-text);
   outline: none;
+  max-height: 150px;
+  overflow-y: auto;
 }
 .panel-input textarea::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-input-bar-placeholder);
 }
 .panel-input textarea:disabled {
   opacity: 0.5;
diff --git a/frontend/src/components/MarkdownToolbar.vue b/frontend/src/components/MarkdownToolbar.vue
index f4aaa1b..a67b3a0 100644
--- a/frontend/src/components/MarkdownToolbar.vue
+++ b/frontend/src/components/MarkdownToolbar.vue
@@ -39,7 +39,7 @@ const buttons = [
 .md-btn {
   padding: 0.25rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index 708f5c4..80cfce0 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -33,7 +33,7 @@ function onTagClick(tag: string) {
   display: block;
   padding: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   text-decoration: none;
   color: inherit;
   background: var(--color-bg-card);
diff --git a/frontend/src/components/PaginationBar.vue b/frontend/src/components/PaginationBar.vue
index fd15006..05145d9 100644
--- a/frontend/src/components/PaginationBar.vue
+++ b/frontend/src/components/PaginationBar.vue
@@ -75,7 +75,7 @@ function goToPage(page: number) {
 .page-btn {
   padding: 0.35rem 0.7rem;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index d7f6982..0e525e4 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -25,7 +25,7 @@ watch(query, (val) => {
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1rem;
   box-sizing: border-box;
   background: var(--color-bg-card);
diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index d1b1760..ad9f58e 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -60,7 +60,7 @@ function isOverdue(): boolean {
   display: block;
   padding: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   text-decoration: none;
   color: inherit;
   background: var(--color-bg-card);
diff --git a/frontend/src/stores/chat.ts b/frontend/src/stores/chat.ts
index b7e8ba0..6526b89 100644
--- a/frontend/src/stores/chat.ts
+++ b/frontend/src/stores/chat.ts
@@ -10,6 +10,7 @@ import {
 import type {
   Conversation,
   ConversationDetail,
+  ContextMeta,
   Message,
   OllamaModel,
   OllamaStatus,
@@ -22,6 +23,7 @@ export const useChatStore = defineStore("chat", () => {
   const loading = ref(false);
   const streaming = ref(false);
   const streamingContent = ref("");
+  const lastContextMeta = ref<ContextMeta | null>(null);
   const models = ref<OllamaModel[]>([]);
   const ollamaStatus = ref<"checking" | "available" | "unavailable">("checking");
   const modelStatus = ref<"checking" | "ready" | "not_found">("checking");
@@ -90,10 +92,15 @@ export const useChatStore = defineStore("chat", () => {
     }
   }
 
-  async function sendMessage(content: string, contextNoteId?: number | null) {
+  async function sendMessage(
+    content: string,
+    contextNoteId?: number | null,
+    excludeNoteIds?: number[],
+  ) {
     if (!currentConversation.value) return;
 
     const convId = currentConversation.value.id;
+    lastContextMeta.value = null;
 
     // Add optimistic user message
     const userMsg: Message = {
@@ -112,8 +119,15 @@ export const useChatStore = defineStore("chat", () => {
     try {
       await apiStreamPost(
         `/api/chat/conversations/${convId}/messages`,
-        { content, context_note_id: contextNoteId },
+        {
+          content,
+          context_note_id: contextNoteId,
+          exclude_note_ids: excludeNoteIds?.length ? excludeNoteIds : undefined,
+        },
         (data) => {
+          if (data.context) {
+            lastContextMeta.value = data.context as ContextMeta;
+          }
           if (data.chunk) {
             streamingContent.value += data.chunk as string;
           }
@@ -207,6 +221,7 @@ export const useChatStore = defineStore("chat", () => {
     loading,
     streaming,
     streamingContent,
+    lastContextMeta,
     models,
     ollamaStatus,
     modelStatus,
diff --git a/frontend/src/types/chat.ts b/frontend/src/types/chat.ts
index e29b84f..f3844ac 100644
--- a/frontend/src/types/chat.ts
+++ b/frontend/src/types/chat.ts
@@ -25,6 +25,12 @@ export interface OllamaModel {
   size: number;
 }
 
+export interface ContextMeta {
+  context_note_id: number | null;
+  context_note_title: string | null;
+  auto_notes: { id: number; title: string }[];
+}
+
 export interface OllamaStatus {
   ollama: "available" | "unavailable";
   model: "ready" | "not_found";
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index 8ae3caf..299cdbf 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -3,8 +3,10 @@ import { onMounted, ref, computed, watch, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
+import { apiGet } from "@/api/client";
 import { renderMarkdown } from "@/utils/markdown";
 import ChatMessage from "@/components/ChatMessage.vue";
+import type { Note } from "@/types/note";
 
 const route = useRoute();
 const router = useRouter();
@@ -17,6 +19,17 @@ const inputEl = ref<HTMLTextAreaElement | null>(null);
 const sending = ref(false);
 const summarizing = ref(false);
 
+// Note picker state
+const attachedNote = ref<{ id: number; title: string } | null>(null);
+const showNotePicker = ref(false);
+const noteSearchQuery = ref("");
+const noteSearchResults = ref<{ id: number; title: string }[]>([]);
+const noteSearchLoading = ref(false);
+let noteSearchTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Exclude tracking (session-scoped per conversation)
+const excludedNoteIds = ref<Set<number>>(new Set());
+
 const convId = computed(() => {
   const id = route.params.id;
   return id ? Number(id) : null;
@@ -41,6 +54,9 @@ onMounted(async () => {
 });
 
 watch(convId, async (newId) => {
+  excludedNoteIds.value = new Set();
+  attachedNote.value = null;
+  store.lastContextMeta = null;
   if (newId) {
     await store.fetchConversation(newId);
     scrollToBottom();
@@ -92,10 +108,17 @@ async function sendMessage() {
   }
 
   sending.value = true;
+  const contextNoteId = attachedNote.value?.id ?? undefined;
+  attachedNote.value = null;
   messageInput.value = "";
+  resetTextareaHeight();
   scrollToBottom();
 
-  await store.sendMessage(content);
+  await store.sendMessage(
+    content,
+    contextNoteId,
+    excludedNoteIds.value.size ? [...excludedNoteIds.value] : undefined,
+  );
   sending.value = false;
 
   // Refresh conversation list to show updated title/timestamps
@@ -130,12 +153,77 @@ async function handleSummarize() {
   }
 }
 
+function autoResize() {
+  const el = inputEl.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = Math.min(el.scrollHeight, 150) + "px";
+}
+
+function resetTextareaHeight() {
+  const el = inputEl.value;
+  if (!el) return;
+  el.style.height = "auto";
+}
+
 function onInputKeydown(e: KeyboardEvent) {
   if (e.key === "Enter" && !e.shiftKey) {
     e.preventDefault();
     sendMessage();
   }
 }
+
+// Note picker
+function toggleNotePicker() {
+  showNotePicker.value = !showNotePicker.value;
+  if (showNotePicker.value) {
+    noteSearchQuery.value = "";
+    noteSearchResults.value = [];
+    nextTick(() => {
+      const el = document.querySelector(".note-picker-search") as HTMLInputElement;
+      el?.focus();
+    });
+  }
+}
+
+function onNoteSearchInput() {
+  if (noteSearchTimer) clearTimeout(noteSearchTimer);
+  noteSearchTimer = setTimeout(async () => {
+    const q = noteSearchQuery.value.trim();
+    if (!q) {
+      noteSearchResults.value = [];
+      return;
+    }
+    noteSearchLoading.value = true;
+    try {
+      const data = await apiGet<{ notes: Note[] }>(
+        `/api/notes?q=${encodeURIComponent(q)}&all=true&limit=5`
+      );
+      noteSearchResults.value = data.notes.map((n) => ({ id: n.id, title: n.title }));
+    } catch {
+      noteSearchResults.value = [];
+    } finally {
+      noteSearchLoading.value = false;
+    }
+  }, 250);
+}
+
+function selectNote(note: { id: number; title: string }) {
+  attachedNote.value = note;
+  showNotePicker.value = false;
+}
+
+function removeAttachedNote() {
+  attachedNote.value = null;
+}
+
+function promoteAutoNote(note: { id: number; title: string }) {
+  attachedNote.value = note;
+}
+
+function excludeAutoNote(noteId: number) {
+  excludedNoteIds.value = new Set([...excludedNoteIds.value, noteId]);
+}
 </script>
 
 <template>
@@ -182,48 +270,126 @@ function onInputKeydown(e: KeyboardEvent) {
         </div>
 
         <div ref="messagesEl" class="messages-container">
-          <ChatMessage
-            v-for="msg in store.currentConversation.messages"
-            :key="msg.id"
-            :message="msg"
-            @save-as-note="handleSaveAsNote"
-          />
+          <div class="messages-inner">
+            <ChatMessage
+              v-for="msg in store.currentConversation.messages"
+              :key="msg.id"
+              :message="msg"
+              @save-as-note="handleSaveAsNote"
+            />
 
-          <!-- Streaming message (assistant typing) -->
-          <div v-if="store.streaming" class="chat-message role-assistant">
-            <div class="message-bubble streaming-bubble">
-              <div class="message-header">
-                <span class="role-label">{{ settingsStore.assistantName }}</span>
-              </div>
-              <div class="message-content prose" v-html="streamingRendered"></div>
-              <span class="typing-indicator"></span>
+            <!-- Context pills (auto-found notes) -->
+            <div
+              v-if="store.lastContextMeta?.auto_notes?.length && (store.streaming || store.currentConversation.messages.length)"
+              class="context-pills"
+            >
+              <span class="context-pills-label">Context:</span>
+              <span
+                v-for="note in store.lastContextMeta.auto_notes"
+                :key="note.id"
+                class="context-pill"
+              >
+                <router-link :to="`/notes/${note.id}`" class="context-pill-link">
+                  {{ note.title }}
+                </router-link>
+                <button
+                  class="context-pill-btn promote"
+                  @click="promoteAutoNote(note)"
+                  title="Attach this note for next message"
+                >+</button>
+                <button
+                  class="context-pill-btn exclude"
+                  @click="excludeAutoNote(note.id)"
+                  title="Exclude from auto-search"
+                >&times;</button>
+              </span>
             </div>
-          </div>
 
-          <p
-            v-if="!store.currentConversation.messages.length && !store.streaming"
-            class="empty-msg"
-          >
-            Send a message to start the conversation.
-          </p>
+            <!-- Streaming message (assistant typing) -->
+            <div v-if="store.streaming" class="chat-message role-assistant">
+              <div class="message-bubble streaming-bubble">
+                <div class="message-header">
+                  <span class="role-label">{{ settingsStore.assistantName }}</span>
+                </div>
+                <div class="message-content prose" v-html="streamingRendered"></div>
+                <span class="typing-indicator"></span>
+              </div>
+            </div>
+
+            <p
+              v-if="!store.currentConversation.messages.length && !store.streaming"
+              class="empty-msg"
+            >
+              Send a message to start the conversation.
+            </p>
+          </div>
         </div>
 
-        <div class="input-area">
-          <textarea
-            ref="inputEl"
-            v-model="messageInput"
-            @keydown="onInputKeydown"
-            :placeholder="inputPlaceholder"
-            :disabled="store.streaming || !store.chatReady"
-            rows="2"
-          ></textarea>
-          <button
-            class="btn-send"
-            @click="sendMessage"
-            :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
-          >
-            &uarr;
-          </button>
+        <div class="input-wrapper">
+          <!-- Attached note pill -->
+          <div v-if="attachedNote" class="attached-note">
+            <span class="attached-note-pill">
+              {{ attachedNote.title }}
+              <button class="attached-note-remove" @click="removeAttachedNote">&times;</button>
+            </span>
+          </div>
+
+          <div class="input-area">
+            <!-- Note picker button -->
+            <div class="note-picker-wrapper">
+              <button
+                class="btn-attach"
+                @click="toggleNotePicker"
+                :disabled="store.streaming || !store.chatReady"
+                title="Attach a note"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
+                </svg>
+              </button>
+
+              <!-- Note picker dropdown -->
+              <div v-if="showNotePicker" class="note-picker-dropdown">
+                <input
+                  class="note-picker-search"
+                  v-model="noteSearchQuery"
+                  @input="onNoteSearchInput"
+                  placeholder="Search notes..."
+                />
+                <div class="note-picker-results">
+                  <div
+                    v-for="note in noteSearchResults"
+                    :key="note.id"
+                    class="note-picker-item"
+                    @click="selectNote(note)"
+                  >
+                    {{ note.title || "Untitled" }}
+                  </div>
+                  <div v-if="noteSearchLoading" class="note-picker-empty">Searching...</div>
+                  <div v-else-if="noteSearchQuery && !noteSearchResults.length" class="note-picker-empty">
+                    No notes found
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <textarea
+              ref="inputEl"
+              v-model="messageInput"
+              @keydown="onInputKeydown"
+              @input="autoResize"
+              :placeholder="inputPlaceholder"
+              :disabled="store.streaming || !store.chatReady"
+              rows="1"
+            ></textarea>
+            <button
+              class="btn-send"
+              @click="sendMessage"
+              :disabled="!messageInput.trim() || store.streaming || !store.chatReady"
+            >
+              &uarr;
+            </button>
+          </div>
         </div>
       </template>
 
@@ -259,7 +425,7 @@ function onInputKeydown(e: KeyboardEvent) {
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.9rem;
 }
@@ -278,7 +444,7 @@ function onInputKeydown(e: KeyboardEvent) {
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 0.75rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   margin-bottom: 0.25rem;
 }
@@ -339,7 +505,7 @@ function onInputKeydown(e: KeyboardEvent) {
   background: var(--color-bg-secondary);
   color: var(--color-text);
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
   white-space: nowrap;
@@ -358,6 +524,11 @@ function onInputKeydown(e: KeyboardEvent) {
   flex: 1;
   overflow-y: auto;
   padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+.messages-inner {
+  margin-top: auto;
 }
 
 /* Streaming bubble — matches ChatMessage assistant style */
@@ -409,16 +580,175 @@ function onInputKeydown(e: KeyboardEvent) {
   50% { opacity: 1; }
 }
 
-/* Floating dark input bar */
+/* Context pills */
+.context-pills {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.5rem 0;
+}
+.context-pills-label {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.context-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.15rem 0.35rem 0.15rem 0.5rem;
+  font-size: 0.8rem;
+}
+.context-pill-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.context-pill-link:hover {
+  text-decoration: underline;
+}
+.context-pill-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1;
+  padding: 0 0.15rem;
+  color: var(--color-text-muted);
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.context-pill-btn:hover {
+  background: var(--color-border);
+}
+.context-pill-btn.promote:hover {
+  color: var(--color-primary);
+}
+.context-pill-btn.exclude:hover {
+  color: var(--color-danger, #e74c3c);
+}
+
+/* Input wrapper */
+.input-wrapper {
+  margin: 0 1rem 2rem;
+}
+
+/* Attached note */
+.attached-note {
+  padding: 0.25rem 0.5rem;
+}
+.attached-note-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: 12px;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.8rem;
+}
+.attached-note-remove {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0 0.15rem;
+}
+.attached-note-remove:hover {
+  color: #fff;
+}
+
+/* Floating input bar */
 .input-area {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 0.5rem;
-  margin: 0 1rem 0.75rem;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-  background: #1c1c1e;
+  background: var(--color-input-bar-bg);
   border-radius: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 12px var(--color-shadow);
+}
+
+/* Note picker */
+.note-picker-wrapper {
+  position: relative;
+}
+.btn-attach {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-input-bar-text);
+  opacity: 0.6;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn-attach:hover {
+  opacity: 1;
+}
+.btn-attach:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.note-picker-dropdown {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: 280px;
+  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: 10;
+  overflow: hidden;
+}
+.note-picker-search {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.9rem;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.note-picker-results {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.note-picker-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.note-picker-item:hover {
+  background: var(--color-bg-secondary);
+}
+.note-picker-empty {
+  padding: 0.5rem 0.75rem;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
 }
 .input-area textarea {
   flex: 1;
@@ -429,11 +759,13 @@ function onInputKeydown(e: KeyboardEvent) {
   font-family: inherit;
   font-size: 0.95rem;
   background: transparent;
-  color: #fff;
+  color: var(--color-input-bar-text);
   outline: none;
+  max-height: 150px;
+  overflow-y: auto;
 }
 .input-area textarea::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-input-bar-placeholder);
 }
 .input-area textarea:disabled {
   opacity: 0.5;
@@ -483,7 +815,7 @@ function onInputKeydown(e: KeyboardEvent) {
   .messages-container {
     padding: 0.75rem;
   }
-  .input-area {
+  .input-wrapper {
     margin: 0 0.5rem 0.5rem;
   }
 }
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 98ecbf7..d99501f 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -180,7 +180,7 @@ async function newChat() {
   padding: 0.75rem 1rem;
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   text-decoration: none;
   color: var(--color-text);
   transition: border-color 0.15s;
@@ -215,11 +215,11 @@ async function newChat() {
 }
 .btn-cta {
   display: inline-block;
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
   cursor: pointer;
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index 1dddc89..27db475 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -287,11 +287,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   color: var(--color-primary);
 }
 .btn-save {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 .btn-save:disabled {
@@ -299,18 +299,18 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   cursor: default;
 }
 .btn-delete {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-danger);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   margin-left: auto;
 }
 .title-input {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1.25rem;
   font-weight: 600;
   background: var(--color-bg-card);
@@ -322,7 +322,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   border-bottom: 1px solid var(--color-border);
 }
 .tab {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   border: none;
   background: none;
   color: var(--color-text-secondary);
@@ -341,7 +341,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   width: 100%;
   padding: 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1rem;
   font-family: monospace;
   min-height: 200px;
@@ -354,7 +354,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 .preview-pane {
   padding: 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   min-height: 200px;
   background: var(--color-bg-card);
 }
@@ -365,7 +365,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   margin: 0;
   padding: 0;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   box-shadow: 0 4px 12px var(--color-shadow);
   max-height: 200px;
@@ -384,7 +384,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -392,7 +392,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 }
 .modal-card {
   background: var(--color-bg-card);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1.5rem;
   max-width: 400px;
   width: 90%;
@@ -413,9 +413,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   justify-content: flex-end;
 }
 .modal-btn {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index 84f45f7..59d0474 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/frontend/src/views/NoteViewerView.vue
@@ -182,7 +182,7 @@ async function convertToTask() {
   background: var(--color-bg-secondary);
   color: var(--color-text);
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
 }
@@ -242,6 +242,6 @@ async function convertToTask() {
   color: var(--color-text-muted);
   background: var(--color-bg-secondary);
   padding: 0.1rem 0.4rem;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 </style>
diff --git a/frontend/src/views/NotesListView.vue b/frontend/src/views/NotesListView.vue
index 573461a..262e54a 100644
--- a/frontend/src/views/NotesListView.vue
+++ b/frontend/src/views/NotesListView.vue
@@ -147,10 +147,10 @@ function onOffsetUpdate(offset: number) {
   margin: 0;
 }
 .btn-new {
-  padding: 0.5rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
 }
@@ -167,7 +167,7 @@ function onOffsetUpdate(offset: number) {
 .sort-select {
   padding: 0.3rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.85rem;
@@ -175,7 +175,7 @@ function onOffsetUpdate(offset: number) {
 .sort-order {
   padding: 0.3rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
@@ -223,10 +223,10 @@ function onOffsetUpdate(offset: number) {
 }
 .btn-cta {
   display: inline-block;
-  padding: 0.5rem 1.25rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
 }
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index c6453d4..9931ee6 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -350,7 +350,7 @@ function cancelDelete() {
 
 <style scoped>
 .settings-page {
-  max-width: 700px;
+  max-width: 720px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
@@ -360,7 +360,7 @@ function cancelDelete() {
 .settings-section {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1.25rem;
   margin-bottom: 1.5rem;
 }
@@ -387,7 +387,7 @@ function cancelDelete() {
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   font-size: 0.95rem;
   background: var(--color-bg);
   color: var(--color-text);
@@ -408,11 +408,11 @@ function cancelDelete() {
   gap: 0.75rem;
 }
 .btn-save {
-  padding: 0.5rem 1.25rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.9rem;
 }
@@ -424,7 +424,7 @@ function cancelDelete() {
   opacity: 0.9;
 }
 .saved-msg {
-  color: #22c55e;
+  color: var(--color-success);
   font-size: 0.9rem;
   font-weight: 600;
 }
@@ -442,7 +442,7 @@ function cancelDelete() {
   gap: 1rem;
   padding: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--color-bg);
   transition: border-color 0.15s;
 }
@@ -489,7 +489,7 @@ function cancelDelete() {
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
 }
@@ -505,7 +505,7 @@ function cancelDelete() {
   background: var(--color-bg-secondary);
   color: var(--color-text);
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
 }
@@ -521,7 +521,7 @@ function cancelDelete() {
   padding: 0.25rem 0.75rem;
   background: var(--color-primary);
   color: #fff;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   font-size: 0.8rem;
   font-weight: 600;
 }
@@ -556,13 +556,13 @@ function cancelDelete() {
   background: transparent;
   color: var(--color-text-muted);
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.75rem;
 }
 .btn-remove:hover:not(:disabled) {
-  border-color: #ef4444;
-  color: #ef4444;
+  border-color: var(--color-danger);
+  color: var(--color-danger);
 }
 .btn-remove:disabled {
   opacity: 0.4;
@@ -570,16 +570,16 @@ function cancelDelete() {
 }
 .btn-confirm-delete {
   padding: 0.25rem 0.6rem;
-  background: #ef4444;
+  background: var(--color-danger);
   color: #fff;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.75rem;
   font-weight: 600;
 }
 .btn-confirm-delete:hover:not(:disabled) {
-  background: #dc2626;
+  filter: brightness(0.9);
 }
 .btn-confirm-delete:disabled {
   opacity: 0.6;
@@ -590,7 +590,7 @@ function cancelDelete() {
   background: transparent;
   color: var(--color-text-muted);
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.75rem;
 }
diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue
index f8145a2..d15f8a2 100644
--- a/frontend/src/views/TaskEditorView.vue
+++ b/frontend/src/views/TaskEditorView.vue
@@ -336,11 +336,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   color: var(--color-primary);
 }
 .btn-save {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 .btn-save:disabled {
@@ -348,18 +348,18 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   cursor: default;
 }
 .btn-delete {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-danger);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   margin-left: auto;
 }
 .title-input {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1.25rem;
   font-weight: 600;
   background: var(--color-bg-card);
@@ -371,7 +371,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   border-bottom: 1px solid var(--color-border);
 }
 .tab {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   border: none;
   background: none;
   color: var(--color-text-secondary);
@@ -390,7 +390,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   width: 100%;
   padding: 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 1rem;
   font-family: monospace;
   min-height: 200px;
@@ -403,7 +403,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 .preview-pane {
   padding: 0.75rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   min-height: 200px;
   background: var(--color-bg-card);
 }
@@ -414,7 +414,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   margin: 0;
   padding: 0;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   box-shadow: 0 4px 12px var(--color-shadow);
   max-height: 200px;
@@ -451,7 +451,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 .field-input {
   padding: 0.4rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.9rem;
@@ -459,7 +459,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -467,7 +467,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 }
 .modal-card {
   background: var(--color-bg-card);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 1.5rem;
   max-width: 400px;
   width: 90%;
@@ -488,9 +488,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   justify-content: flex-end;
 }
 .modal-btn {
-  padding: 0.4rem 1rem;
+  padding: 0.45rem 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index a565e7e..0787704 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -212,7 +212,7 @@ function onTagClick(tag: string) {
   background: var(--color-bg-secondary);
   color: var(--color-text);
   border: 1px solid var(--color-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 0.85rem;
 }
@@ -286,6 +286,6 @@ function onTagClick(tag: string) {
   color: var(--color-text-muted);
   background: var(--color-bg-secondary);
   padding: 0.1rem 0.4rem;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 </style>
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index e16180f..056d827 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -184,10 +184,10 @@ function onOffsetUpdate(offset: number) {
   margin: 0;
 }
 .btn-new {
-  padding: 0.5rem 1rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
 }
@@ -206,7 +206,7 @@ function onOffsetUpdate(offset: number) {
 .sort-select {
   padding: 0.3rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.85rem;
@@ -219,7 +219,7 @@ function onOffsetUpdate(offset: number) {
 .sort-order {
   padding: 0.3rem 0.5rem;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--color-bg-card);
   color: var(--color-text);
   cursor: pointer;
@@ -267,10 +267,10 @@ function onOffsetUpdate(offset: number) {
 }
 .btn-cta {
   display: inline-block;
-  padding: 0.5rem 1.25rem;
+  padding: 0.45rem 1rem;
   background: var(--color-primary);
   color: #fff;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
 }
diff --git a/src/fabledassistant/routes/chat.py b/src/fabledassistant/routes/chat.py
index e71ae53..84c3d01 100644
--- a/src/fabledassistant/routes/chat.py
+++ b/src/fabledassistant/routes/chat.py
@@ -85,6 +85,7 @@ async def send_message_route(conv_id: int):
     if not content:
         return jsonify({"error": "content is required"}), 400
     context_note_id = data.get("context_note_id")
+    exclude_note_ids = data.get("exclude_note_ids") or []
 
     # Save user message
     await add_message(conv_id, "user", content, context_note_id=context_note_id)
@@ -96,11 +97,17 @@ async def send_message_route(conv_id: int):
             history.append({"role": msg.role, "content": msg.content})
 
     # Build context with note search, URL fetching, etc.
-    messages = await build_context(history, context_note_id, content)
+    messages, context_meta = await build_context(
+        history, context_note_id, content, exclude_note_ids=exclude_note_ids
+    )
 
     model = conv.model or await get_setting("default_model", Config.OLLAMA_MODEL)
 
     async def generate():
+        # Emit context metadata before streaming LLM response
+        context_event = json.dumps({"context": context_meta})
+        yield f"data: {context_event}\n\n"
+
         full_response = []
         try:
             async for chunk in stream_chat(messages, model):
diff --git a/src/fabledassistant/routes/settings.py b/src/fabledassistant/routes/settings.py
index 6a349d5..bb30191 100644
--- a/src/fabledassistant/routes/settings.py
+++ b/src/fabledassistant/routes/settings.py
@@ -1,10 +1,29 @@
+import httpx
 from quart import Blueprint, jsonify, request
 
+from fabledassistant.config import Config
 from fabledassistant.services.settings import get_all_settings, set_setting
 
 settings_bp = Blueprint("settings", __name__, url_prefix="/api/settings")
 
 
+async def _get_installed_models() -> set[str]:
+    """Return set of installed Ollama model names, with and without :latest."""
+    try:
+        async with httpx.AsyncClient(timeout=5.0) as client:
+            resp = await client.get(f"{Config.OLLAMA_URL}/api/tags")
+            resp.raise_for_status()
+            data = resp.json()
+            names: set[str] = set()
+            for m in data.get("models", []):
+                name = m["name"]
+                names.add(name)
+                names.add(name.replace(":latest", ""))
+            return names
+    except Exception:
+        return set()
+
+
 @settings_bp.route("", methods=["GET"])
 async def get_settings_route():
     settings = await get_all_settings()
@@ -16,6 +35,13 @@ async def update_settings_route():
     data = await request.get_json()
     if not isinstance(data, dict):
         return jsonify({"error": "Expected a JSON object"}), 400
+
+    if "default_model" in data:
+        model = str(data["default_model"])
+        installed = await _get_installed_models()
+        if installed and model not in installed:
+            return jsonify({"error": f"Model '{model}' is not installed"}), 400
+
     for key, value in data.items():
         await set_setting(key, str(value))
     settings = await get_all_settings()
diff --git a/src/fabledassistant/services/chat.py b/src/fabledassistant/services/chat.py
index e0db761..48b929a 100644
--- a/src/fabledassistant/services/chat.py
+++ b/src/fabledassistant/services/chat.py
@@ -14,10 +14,13 @@ async def create_conversation(title: str = "", model: str = "") -> Conversation:
         conv = Conversation(title=title, model=model)
         session.add(conv)
         await session.commit()
-        await session.refresh(conv)
-        # Initialize empty messages list for to_dict()
-        conv.messages = []
-        return conv
+        # Re-fetch with messages eagerly loaded to avoid lazy-load in async context
+        result = await session.execute(
+            select(Conversation)
+            .options(selectinload(Conversation.messages))
+            .where(Conversation.id == conv.id)
+        )
+        return result.scalars().first()
 
 
 async def get_conversation(conversation_id: int) -> Conversation | None:
diff --git a/src/fabledassistant/services/llm.py b/src/fabledassistant/services/llm.py
index 7fd64e4..ba92289 100644
--- a/src/fabledassistant/services/llm.py
+++ b/src/fabledassistant/services/llm.py
@@ -138,8 +138,14 @@ async def build_context(
     history: list[dict],
     current_note_id: int | None,
     user_message: str,
-) -> list[dict]:
-    """Build messages array for Ollama with system prompt and context."""
+    exclude_note_ids: list[int] | None = None,
+) -> tuple[list[dict], dict]:
+    """Build messages array for Ollama with system prompt and context.
+
+    Returns (messages, context_meta) where context_meta contains info about
+    which notes were included as context.
+    """
+    exclude_set = set(exclude_note_ids or [])
     assistant_name = await get_setting("assistant_name", "Fable")
     system_parts = [
         f"You are a helpful assistant named {assistant_name}, integrated into a note-taking and task-tracking app called Fabled Assistant. "
@@ -147,10 +153,18 @@ async def build_context(
         "When note context is provided, use it to give relevant answers."
     ]
 
+    context_meta: dict = {
+        "context_note_id": None,
+        "context_note_title": None,
+        "auto_notes": [],
+    }
+
     # Include current note context if provided
     if current_note_id:
         note = await get_note(current_note_id)
         if note:
+            context_meta["context_note_id"] = note.id
+            context_meta["context_note_title"] = note.title
             system_parts.append(
                 f"\n\n--- Current Note ---\n"
                 f"Title: {note.title}\n"
@@ -158,28 +172,39 @@ async def build_context(
                 f"--- End Note ---"
             )
 
-    # Search notes by keywords from user message
+    # Search notes by keywords from user message — search per keyword
+    # individually and deduplicate to get OR-style matching (any keyword hit
+    # is relevant context).  Collect up to 3 unique notes.
     keywords = _extract_keywords(user_message)
     if keywords:
-        search_q = " ".join(keywords[:3])
-        try:
-            notes, _ = await list_notes(q=search_q, limit=3)
-            if notes:
-                snippets = []
+        seen_ids: set[int] = set()
+        snippets: list[str] = []
+        for kw in keywords[:5]:
+            if len(snippets) >= 3:
+                break
+            try:
+                notes, _ = await list_notes(q=kw, limit=3)
                 for n in notes:
-                    # Skip the current note (already included)
+                    if n.id in seen_ids:
+                        continue
                     if current_note_id and n.id == current_note_id:
                         continue
-                    body_preview = n.body[:300] if n.body else ""
+                    if n.id in exclude_set:
+                        continue
+                    seen_ids.add(n.id)
+                    body_preview = n.body[:2000] if n.body else ""
                     snippets.append(f"- {n.title}: {body_preview}")
-                if snippets:
-                    system_parts.append(
-                        "\n\n--- Related Notes ---\n"
-                        + "\n".join(snippets)
-                        + "\n--- End Related Notes ---"
-                    )
-        except Exception:
-            pass
+                    context_meta["auto_notes"].append({"id": n.id, "title": n.title})
+                    if len(snippets) >= 3:
+                        break
+            except Exception:
+                continue
+        if snippets:
+            system_parts.append(
+                "\n\n--- Related Notes ---\n"
+                + "\n".join(snippets)
+                + "\n--- End Related Notes ---"
+            )
 
     # Fetch URL content from user message
     urls = _find_urls(user_message)
@@ -193,4 +218,4 @@ async def build_context(
     messages = [{"role": "system", "content": "".join(system_parts)}]
     messages.extend(history)
     messages.append({"role": "user", "content": user_message})
-    return messages
+    return messages, context_meta
diff --git a/src/fabledassistant/services/notes.py b/src/fabledassistant/services/notes.py
index bd02088..65950ef 100644
--- a/src/fabledassistant/services/notes.py
+++ b/src/fabledassistant/services/notes.py
@@ -60,11 +60,13 @@ async def list_notes(
             count_query = count_query.where(Note.status.is_(None))
 
         if q:
-            escaped_q = q.replace("\\", "\\\\").replace("%", "\\%").replace("_", "\\_")
-            pattern = f"%{escaped_q}%"
-            filter_ = or_(Note.title.ilike(pattern), Note.body.ilike(pattern))
-            query = query.where(filter_)
-            count_query = count_query.where(filter_)
+            terms = q.split()
+            for term in terms:
+                escaped_term = term.replace("\\", "\\\\").replace("%", "\\%").replace("_", "\\_")
+                pattern = f"%{escaped_term}%"
+                term_filter = or_(Note.title.ilike(pattern), Note.body.ilike(pattern))
+                query = query.where(term_filter)
+                count_query = count_query.where(term_filter)
 
         if tags:
             for i, tag in enumerate(tags):
diff --git a/summary.md b/summary.md
index 51ce3a1..1b2565d 100644
--- a/summary.md
+++ b/summary.md
@@ -12,7 +12,7 @@
 >    Include file-level details in the commit body when the change is non-trivial.
 
 ## Last Updated
-2026-02-10 — Phase 4.5: Chat UX improvements, settings page, model management, entity rendering fix
+2026-02-10 — Phase 4.7: Styling consistency pass — design tokens, header alignment, standardized UI
 
 ## Project Overview
 Fabled Assistant is a self-hosted note-taking and task-tracking application with
@@ -50,6 +50,10 @@ for AI-assisted features.
   `LIKE` prefix.
 - **Dark-first theming:** CSS custom properties on `:root` (light) and
   `[data-theme="dark"]`, with `prefers-color-scheme` detection defaulting to dark.
+- **Design tokens:** Standardized CSS custom properties for border-radius
+  (`--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 12px`), semantic colors
+  (`--color-success`, `--color-warning`, `--color-overlay`), and focus ring
+  (`--focus-ring`). All components reference tokens instead of hardcoded values.
 - **Unified note/task model:** A task is just a note with task attributes enabled.
   A note has `status IS NOT NULL` ⟹ it's a task. "Convert to task" sets
   `status='todo'`; "convert to note" clears `status`, `priority`, `due_date`.
@@ -62,8 +66,11 @@ for AI-assisted features.
   need to POST the message body. Simpler than WebSockets; Quart supports async
   generators natively for SSE.
 - **Context building server-side:** Backend fetches URL content and searches notes —
-  frontend just sends the message text + optional note ID. Keyword extraction uses
-  simple word splitting with stopword filtering (no embeddings).
+  frontend just sends the message text + optional note ID + optional exclude list.
+  Keyword extraction uses simple word splitting with stopword filtering (no embeddings).
+  `build_context()` returns `(messages, context_meta)` tuple; metadata includes
+  auto-found note IDs/titles sent to frontend via SSE `context` event before streaming.
+  Multi-word search splits terms into per-word ILIKE with AND logic (not adjacent match).
 - **No blocking long-running operations:** Any potentially slow operation (model
   pulls, LLM calls, URL fetching, etc.) must never block app startup or freeze the
   UI. Backend uses SSE streaming for incremental responses (chat messages and model
@@ -185,7 +192,7 @@ fabledassistant/
 │       ├── services/
 │       │   ├── notes.py         # CRUD, is_task filter, status/priority filters, convert_note_to_task, convert_task_to_note, get_backlinks
 │       │   ├── tasks.py         # Thin wrappers around notes.py (create_task, list_tasks with is_task=True, etc.)
-│       │   ├── llm.py           # Ollama interaction: ensure_model, stream_chat, generate_completion, fetch_url_content, build_context (keyword extraction, note search, URL fetching, configurable assistant name)
+│       │   ├── llm.py           # Ollama interaction: ensure_model, stream_chat, generate_completion, fetch_url_content, build_context (keyword extraction, note search with 5 keywords + 2000-char previews, exclude_note_ids support, returns (messages, context_meta) tuple, URL fetching, configurable assistant name)
 │       │   ├── chat.py          # Conversation CRUD, add_message, save_response_as_note, summarize_conversation_as_note
 │       │   └── settings.py      # Settings CRUD: get_setting, set_setting, get_all_settings
 │       ├── utils/
@@ -200,7 +207,7 @@ fabledassistant/
     │   ├── App.vue              # Shell: AppHeader + router-view + ChatPanel (slide-out) + ToastNotification; starts status polling + loads settings on mount
     │   ├── main.ts              # App init, imports theme.css
     │   ├── assets/
-    │   │   └── theme.css        # CSS custom properties: light/dark themes, body reset
+    │   │   └── theme.css        # CSS custom properties: light/dark themes, body reset, design tokens (radius, semantic colors, focus ring, overlay), global focus-visible styles
     │   ├── api/
     │   │   └── client.ts        # apiGet/apiPost/apiPut/apiPatch/apiDelete + apiStreamPost (SSE via fetch + ReadableStream)
     │   ├── composables/
@@ -209,19 +216,19 @@ fabledassistant/
     │   ├── stores/
     │   │   ├── notes.ts         # CRUD + tag filter, resolveTitle, convertToTask, convertToNote, fetchBacklinks, fetchAllTags
     │   │   ├── tasks.ts         # CRUD + status/priority filter, patchStatus (uses body not description)
-    │   │   ├── chat.ts          # Conversation CRUD, sendMessage (SSE streaming), saveMessageAsNote, summarizeAsNote, fetchModels, status polling (ollamaStatus, modelStatus, chatReady)
+    │   │   ├── chat.ts          # Conversation CRUD, sendMessage (SSE streaming, handles context event, accepts excludeNoteIds), lastContextMeta ref, saveMessageAsNote, summarizeAsNote, fetchModels, status polling (ollamaStatus, modelStatus, chatReady)
     │   │   ├── settings.ts      # App settings: assistantName, defaultModel, fetchInstalledModels, pullModel (SSE streaming with onProgress callback), deleteModel
     │   │   └── toast.ts         # Toast notification state, 3s auto-dismiss
     │   ├── types/
     │   │   ├── note.ts          # Note interface (with status, priority, due_date, is_task) + TaskStatus, TaskPriority types + NoteListResponse
-    │   │   ├── chat.ts          # Message, Conversation, ConversationDetail, OllamaModel, OllamaStatus interfaces
+    │   │   ├── chat.ts          # Message, Conversation, ConversationDetail, ContextMeta, OllamaModel, OllamaStatus interfaces
     │   │   ├── settings.ts      # AppSettings interface, ModelInfo interface (name, description, size, bestFor, category)
     │   │   └── task.ts          # Task = re-export of Note; TaskListResponse
     │   ├── utils/
     │   │   ├── tags.ts          # extractTags(), linkifyTags() (with (?<!&) to skip HTML entities), linkifyWikilinks()
     │   │   └── markdown.ts      # renderMarkdown() (full) + renderPreview() (strips links/images) — decodes HTML entities before marked, replaces &#39; after sanitization
     │   ├── views/
-    │   │   ├── ChatView.vue     # Dedicated /chat page: sidebar + bubble-style messages (user right, assistant left) + floating dark input bar + auto-focus
+    │   │   ├── ChatView.vue     # Dedicated /chat page: sidebar + bubble-style messages (user right, assistant left) + floating dark input bar + auto-focus + note picker + context pills (auto-found notes with promote/exclude) + exclude tracking
     │   │   ├── HomeView.vue     # Landing page: recent notes + tasks + recent chats (3 most recent) + new chat button
     │   │   ├── SettingsView.vue # Settings page: assistant name config + model catalog (18 models in 3 categories) with download/select/remove
     │   │   ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination
@@ -232,7 +239,7 @@ fabledassistant/
     │   │   └── TaskViewerView.vue # Task detail: rendered markdown, badges, convert-to-note button, backlinks
     │   ├── components/
     │   │   ├── AppHeader.vue    # Nav bar: brand, Notes + Tasks + Chat + Settings links, status indicator dot, chat panel toggle, theme toggle
-    │   │   ├── ChatPanel.vue    # Slide-out chat panel (right side overlay, receives contextNoteId prop), bubble-style messages, floating dark input
+    │   │   ├── ChatPanel.vue    # Slide-out chat panel (right side overlay, receives contextNoteId prop), bubble-style messages, floating dark input, note picker, context pills with promote/exclude
     │   │   ├── ChatMessage.vue  # Message bubble: markdown rendering, configurable assistant name label, "Save as Note" action on assistant messages
     │   │   ├── NoteCard.vue     # Card with rendered markdown preview (v-html), TagPill, tag-click emit
     │   │   ├── TaskCard.vue     # Card with rendered preview (body not description), StatusBadge (clickable), PriorityBadge, due date, tags
@@ -275,7 +282,7 @@ fabledassistant/
 | GET | `/api/chat/conversations/:id` | Get conversation with all messages |
 | DELETE | `/api/chat/conversations/:id` | Delete conversation (cascades to messages) |
 | PATCH | `/api/chat/conversations/:id` | Update conversation title (body: `{title}`) |
-| POST | `/api/chat/conversations/:id/messages` | Send message + stream LLM response via SSE (body: `{content, context_note_id?}`) |
+| POST | `/api/chat/conversations/:id/messages` | Send message + stream LLM response via SSE (body: `{content, context_note_id?, exclude_note_ids?}`); emits `{context: ContextMeta}` SSE event before streaming chunks |
 | POST | `/api/chat/messages/:id/save-as-note` | Save assistant message as a new note |
 | POST | `/api/chat/conversations/:id/summarize` | Summarize conversation via LLM, save as note |
 | GET | `/api/chat/status` | Check Ollama availability and model readiness (`{ollama, model, default_model}`) |
@@ -426,7 +433,7 @@ When adding a new migration, follow these conventions:
 
 ### Phase 4 — LLM Chat Integration ✓
 - [x] **Ollama client:** async HTTP via httpx — `ensure_model()` (auto-pull on startup), `stream_chat()` (streaming NDJSON), `generate_completion()` (non-streaming)
-- [x] **Context building:** System prompt with note-aware context — includes current note (via `context_note_id`), keyword-extracted related note search (top 3), URL content fetching (regex detection, HTML stripping, truncated to 4000 chars)
+- [x] **Context building:** System prompt with note-aware context — includes current note (via `context_note_id`), keyword-extracted related note search (top 3, 5 keywords, 2000-char previews), URL content fetching (regex detection, HTML stripping, truncated to 4000 chars), returns `(messages, context_meta)` tuple with auto-found note IDs/titles, accepts `exclude_note_ids` to skip notes during auto-search
 - [x] **Conversation persistence:** `conversations` + `messages` tables in PostgreSQL, full CRUD
 - [x] **SSE streaming endpoint:** `POST /api/chat/conversations/:id/messages` streams LLM response chunks as SSE events, saves complete response to DB on finish
 - [x] **Save as note:** Save any assistant message as a new note (first line as title)
@@ -451,6 +458,29 @@ When adding a new migration, follow these conventions:
 - [x] **New chat navigation fix:** `fetchConversation()` called before `router.push()` so `currentConversation` is set immediately
 - [x] **Recent chats on home page:** 3 most recent conversations shown as clickable cards + "New Chat" button
 
+### Phase 4.6 — Improved Note Context in Chat ✓
+- [x] **Multi-word search:** `list_notes()` splits multi-word queries into per-term ILIKE filters with AND logic (each word matched independently, not adjacent)
+- [x] **Context metadata:** `build_context()` returns `(messages, context_meta)` tuple with auto-found note IDs/titles and attached note info
+- [x] **Fuller auto-context:** Auto-found note previews increased from 300 to 2000 chars; uses all 5 extracted keywords instead of 3
+- [x] **Context SSE event:** Backend emits `{context: ContextMeta}` SSE event before streaming LLM response chunks
+- [x] **Exclude note IDs:** Backend accepts `exclude_note_ids` in request body, skips those notes during auto-search
+- [x] **Context pills:** ChatView and ChatPanel show auto-found notes as pills above streaming response with note title as router-link
+- [x] **Promote/exclude controls:** "+" button on context pills promotes note to attached context for next message; "x" button excludes note from future auto-searches in the session
+- [x] **Note picker:** Paperclip button in chat input opens dropdown with debounced search, selecting a note attaches it as context (shown as pill above input)
+- [x] **ContextMeta type:** New TypeScript interface for context metadata (`context_note_id`, `context_note_title`, `auto_notes`)
+- [x] **Session-scoped excludes:** Excluded note IDs tracked per conversation session, cleared on conversation switch
+
+### Phase 4.7 — Styling Consistency Pass ✓
+- [x] **Design tokens:** Added `--radius-sm/md/lg/pill`, `--color-success/warning/overlay`, `--focus-ring` to theme.css
+- [x] **Header alignment fix:** Removed `max-width: 960px` from header nav — now full-width with consistent padding, matching modern app layout
+- [x] **Active nav link state:** Added `router-link-active` styling with primary color + card background
+- [x] **Hardcoded colors replaced:** Status indicator dots, settings saved message, remove/confirm-delete buttons now use CSS variables
+- [x] **Border-radius standardized:** All components migrated from mixed 3px/4px/6px/8px to `var(--radius-sm)` (6px) for controls, `var(--radius-md)` (8px) for cards/containers
+- [x] **Button padding standardized:** All primary/CTA buttons use `0.45rem 1rem`; small buttons use `0.3rem 0.75rem`
+- [x] **Settings max-width fixed:** Changed from 700px to 720px to match all other views
+- [x] **Focus-visible states:** Global `focus-visible` rule with `--focus-ring` shadow on inputs, textareas, selects, buttons
+- [x] **Modal overlays:** Replaced hardcoded `rgba(0,0,0,0.5)` with `var(--color-overlay)` across all components
+
 ### Phase 5 — Polish & Production Hardening
 - [ ] Authentication (single-user or multi-user, TBD)
 - [ ] Docker Swarm production stack (secrets, volumes, networking)
@@ -476,11 +506,15 @@ When adding a new migration, follow these conventions:
 - Authentication model: single-user (password-only) vs multi-user?
 
 ## Current Status
-**Phase:** Phase 4.5 complete. Chat UX improvements, settings page, model management.
+**Phase:** Phase 4.7 complete. Styling consistency pass with design tokens and standardized UI.
 - Full note-taking and task-tracking CRUD with markdown, wikilinks, backlinks, tags
 - Unified note/task model (a task is a note with `status IS NOT NULL`)
 - LLM chat via Ollama with SSE streaming responses
-- Note-aware context: auto-includes current note + searches related notes by keyword
+- Note-aware context: auto-includes current note + searches related notes by keyword (5 keywords, 2000-char previews)
+- Context visibility: auto-found notes shown as pills with title links, promote (+) and exclude (x) controls
+- Note picker: attach any note as context from chat input via search dropdown
+- Exclude tracking: session-scoped per conversation, excluded notes skipped in future auto-searches
+- Multi-word search: splits query into per-term ILIKE with AND logic (words match independently)
 - URL content fetching: detects URLs in messages, fetches and includes content
 - Save assistant messages as notes; summarize entire conversations as notes
 - Dedicated `/chat` page with bubble-style messages (user right, assistant left), floating dark input bar