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