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>
This commit is contained in:
2026-02-11 06:49:12 -05:00
parent 39bcd7a8fa
commit fb18d2c41d
26 changed files with 1070 additions and 237 deletions
+17 -17
View File
@@ -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;
}