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

@@ -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);
+}

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;

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>

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;

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;

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

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;

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

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

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,

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";

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;
   }
 }

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;

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;

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>

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;
 }

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;
 }

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;

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>

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;
 }