From 7e81e50e3e53f445cd67d54b0e447aa6a2a25841 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:12:46 -0400
Subject: [PATCH 01/11] feat(theme): sweep indigo to violet across all
 remaining views and components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/BriefingSetupWizard.vue    |  4 ++--
 frontend/src/components/EventSlideOver.vue    | 10 +++++-----
 frontend/src/components/InlineAssistPanel.vue | 10 +++++-----
 frontend/src/components/NoteCard.vue          |  6 +++---
 frontend/src/components/ShareDialog.vue       |  2 +-
 frontend/src/components/TagPill.vue           |  2 +-
 frontend/src/components/TaskCard.vue          |  4 ++--
 frontend/src/components/ToolCallCard.vue      |  8 ++++----
 frontend/src/views/CalendarView.vue           | 20 +++++++++----------
 frontend/src/views/HomeView.vue               | 18 ++++++++---------
 frontend/src/views/NoteEditorView.vue         |  2 +-
 frontend/src/views/NoteViewerView.vue         |  6 +++---
 frontend/src/views/ProjectView.vue            | 12 +++++------
 frontend/src/views/SettingsView.vue           |  4 ++--
 frontend/src/views/TaskViewerView.vue         |  8 ++++----
 15 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/BriefingSetupWizard.vue b/frontend/src/components/BriefingSetupWizard.vue
index d7e5c54..b7a3e57 100644
--- a/frontend/src/components/BriefingSetupWizard.vue
+++ b/frontend/src/components/BriefingSetupWizard.vue
@@ -247,7 +247,7 @@ async function finish() {
 }
 .wizard-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #6366f1, #4f46e5);
+  background: linear-gradient(90deg, #7c3aed, #5b21b6);
   transition: width 0.3s ease;
 }
 .wizard-step-label {
@@ -375,7 +375,7 @@ async function finish() {
 }
 .btn-wizard-primary {
   padding: 0.5rem 1.25rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: 8px;
diff --git a/frontend/src/components/EventSlideOver.vue b/frontend/src/components/EventSlideOver.vue
index 0eb2c39..854a0fb 100644
--- a/frontend/src/components/EventSlideOver.vue
+++ b/frontend/src/components/EventSlideOver.vue
@@ -232,7 +232,7 @@ async function doDelete() {
             <label class="so-label so-label-inline">Color</label>
             <div class="color-row">
               <input v-model="color" type="color" class="color-picker" title="Pick event color" />
-              <input v-model="color" class="so-input color-hex" placeholder="#6366f1" />
+              <input v-model="color" class="so-input color-hex" placeholder="#7c3aed" />
               <button v-if="color" type="button" class="btn-clear-color" @click="color = ''">✕</button>
             </div>
           </div>
@@ -357,7 +357,7 @@ async function doDelete() {
   box-sizing: border-box;
   transition: border-color 0.15s;
 }
-.so-input:focus { outline: none; border-color: var(--color-primary, #6366f1); }
+.so-input:focus { outline: none; border-color: var(--color-primary, #7c3aed); }
 
 .so-textarea { resize: vertical; min-height: 5rem; font-family: inherit; }
 
@@ -376,8 +376,8 @@ async function doDelete() {
   transition: all 0.15s;
 }
 .toggle-btn.active {
-  background: var(--color-primary, #6366f1);
-  border-color: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary, #7c3aed);
   color: #fff;
 }
 
@@ -403,7 +403,7 @@ async function doDelete() {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: 8px;
diff --git a/frontend/src/components/InlineAssistPanel.vue b/frontend/src/components/InlineAssistPanel.vue
index 33956be..2b2d545 100644
--- a/frontend/src/components/InlineAssistPanel.vue
+++ b/frontend/src/components/InlineAssistPanel.vue
@@ -94,10 +94,10 @@ const markers: Record<DiffLine["type"], string> = {
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--color-primary, #6366f1);
+  border-color: var(--color-primary, #7c3aed);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--color-primary, #7c3aed) 8%, var(--color-bg-secondary));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
   flex-shrink: 0;
   animation: iap-pulse 1.2s ease-in-out infinite;
 }
@@ -172,8 +172,8 @@ const markers: Record<DiffLine["type"], string> = {
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--color-primary, #6366f1);
-  color: var(--color-primary, #6366f1);
+  border-color: var(--color-primary, #7c3aed);
+  color: var(--color-primary, #7c3aed);
 }
 
 .iap-actions {
diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index eacdcf8..3408fee 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -64,11 +64,11 @@ function goEdit() {
   text-decoration: none;
   color: inherit;
   background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .note-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(124, 58, 237, 0.14);
   transform: translateY(-2px);
 }
 
@@ -89,7 +89,7 @@ function goEdit() {
 }
 .note-card.compact:hover {
   box-shadow: none;
-  background: rgba(99, 102, 241, 0.04);
+  background: rgba(124, 58, 237, 0.04);
   transform: none;
 }
 .note-title-compact {
diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue
index 78ebf92..7edc1f9 100644
--- a/frontend/src/components/ShareDialog.vue
+++ b/frontend/src/components/ShareDialog.vue
@@ -337,7 +337,7 @@ onMounted(async () => {
 
 .btn-add-share {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: 6px;
diff --git a/frontend/src/components/TagPill.vue b/frontend/src/components/TagPill.vue
index 687ee9b..2c0d797 100644
--- a/frontend/src/components/TagPill.vue
+++ b/frontend/src/components/TagPill.vue
@@ -40,7 +40,7 @@ defineEmits<{
 }
 .tag-pill:hover {
   color: var(--color-primary);
-  background: rgba(99, 102, 241, 0.08);
+  background: rgba(124, 58, 237, 0.08);
 }
 .dismiss {
   background: none;
diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index f109e7e..224143d 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -112,11 +112,11 @@ function isOverdue(): boolean {
   text-decoration: none;
   color: inherit;
   background: var(--color-bg-card);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
   transition: box-shadow 0.2s, transform 0.18s ease;
 }
 .task-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(124, 58, 237, 0.14);
   transform: translateY(-2px);
 }
 
diff --git a/frontend/src/components/ToolCallCard.vue b/frontend/src/components/ToolCallCard.vue
index 54c0fdb..e21228e 100644
--- a/frontend/src/components/ToolCallCard.vue
+++ b/frontend/src/components/ToolCallCard.vue
@@ -751,7 +751,7 @@ function closeEventSlideOver(changed = false) {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
   flex-shrink: 0;
 }
 
@@ -773,14 +773,14 @@ function closeEventSlideOver(changed = false) {
 }
 .tool-event-card.clickable { cursor: pointer; }
 .tool-event-card.clickable:hover {
-  border-color: var(--color-primary, #6366f1);
-  background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--color-bg-card, #16161a));
+  border-color: var(--color-primary, #7c3aed);
+  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card, #16161a));
 }
 .tool-event-card-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
   flex-shrink: 0;
   margin-top: 3px;
 }
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index 590ac3f..fd5f3cf 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -435,7 +435,7 @@ const upcomingGrouped = computed(() => {
 }
 
 .btn-new-event {
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: 8px;
@@ -482,8 +482,8 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-button:hover),
 :deep(.fc-button-active) {
-  background: var(--color-primary, #6366f1) !important;
-  border-color: var(--color-primary, #6366f1) !important;
+  background: var(--color-primary, #7c3aed) !important;
+  border-color: var(--color-primary, #7c3aed) !important;
   color: #fff !important;
 }
 :deep(.fc-button:focus) { box-shadow: none !important; }
@@ -494,7 +494,7 @@ const upcomingGrouped = computed(() => {
   font-size: 0.82rem;
 }
 :deep(.fc-daygrid-day.fc-day-today) {
-  background: rgba(99, 102, 241, 0.08);
+  background: rgba(124, 58, 237, 0.08);
 }
 :deep(.fc-event) {
   border-radius: 4px;
@@ -505,7 +505,7 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-event-main) { color: #fff; }
 :deep(.fc-event:not([style*="background"])) {
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
 }
 :deep(.fc-daygrid-day-frame) { min-height: 5rem; }
 :deep(.fc-scrollgrid) { border-color: var(--color-border, #2a2b30); }
@@ -574,8 +574,8 @@ const upcomingGrouped = computed(() => {
   background: rgba(255,255,255,0.08);
 }
 .picker-month.active {
-  background: rgba(99,102,241,0.22);
-  color: var(--color-primary, #818cf8);
+  background: rgba(124,58,237,0.22);
+  color: var(--color-primary, #a78bfa);
   font-weight: 700;
 }
 
@@ -634,7 +634,7 @@ const upcomingGrouped = computed(() => {
 .upcoming-card-accent {
   width: 4px;
   flex-shrink: 0;
-  background: var(--ev-color, #6366f1);
+  background: var(--ev-color, #7c3aed);
 }
 
 .upcoming-card-body {
@@ -691,7 +691,7 @@ const upcomingGrouped = computed(() => {
 
 .popover-accent {
   height: 4px;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
 }
 
 .popover-content {
@@ -750,7 +750,7 @@ const upcomingGrouped = computed(() => {
 }
 .popover-btn:hover { opacity: 0.85; }
 .popover-btn--edit {
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
   color: #fff;
 }
 .popover-btn--close {
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index c940f8e..8300a0d 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -569,7 +569,7 @@ function formatUpcomingTime(event: EventEntry): string {
   border-radius: var(--radius-lg);
   padding: 1.25rem 1.5rem;
   margin-bottom: 1.75rem;
-  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 16px rgba(124, 58, 237, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
 }
 .hero-top {
   display: flex;
@@ -605,20 +605,20 @@ function formatUpcomingTime(event: EventEntry): string {
   align-items: center;
   gap: 0.4rem;
   padding: 0.55rem 1.1rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 600;
   white-space: nowrap;
-  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 1px 6px rgba(124, 58, 237, 0.3);
   transition: opacity 0.15s, box-shadow 0.15s;
   flex-shrink: 0;
 }
 .btn-workspace-hero:hover {
   opacity: 0.9;
-  box-shadow: 0 3px 14px rgba(99, 102, 241, 0.45);
+  box-shadow: 0 3px 14px rgba(124, 58, 237, 0.45);
 }
 
 .hero-milestones { margin-bottom: 0.75rem; }
@@ -760,8 +760,8 @@ function formatUpcomingTime(event: EventEntry): string {
   font-weight: 500;
 }
 .urgency-in-progress {
-  background: color-mix(in srgb, #6366f1 15%, transparent);
-  color: #6366f1;
+  background: color-mix(in srgb, #7c3aed 15%, transparent);
+  color: #7c3aed;
 }
 .urgency-todo {
   background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
@@ -892,14 +892,14 @@ function formatUpcomingTime(event: EventEntry): string {
   width: 100%;
 }
 .upcoming-event-card:hover {
-  border-color: var(--color-primary, #6366f1);
-  background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--color-bg-card));
+  border-color: var(--color-primary, #7c3aed);
+  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card));
 }
 .upcoming-event-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #7c3aed);
   flex-shrink: 0;
   margin-top: 4px;
 }
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index c364974..488fad5 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -731,7 +731,7 @@ onUnmounted(() => assist.clearSelection());
   transition: border-color 0.15s;
 }
 .sb-select:focus, .sb-input:focus {
-  border-color: var(--color-primary, #6366f1);
+  border-color: var(--color-primary, #7c3aed);
 }
 
 /* Tag suggest row inside sidebar */
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index 8085785..7bf4705 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/frontend/src/views/NoteViewerView.vue
@@ -350,17 +350,17 @@ async function convertToTask() {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42);
+  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
   opacity: 0.95;
   color: #fff;
 }
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 299599b..8b13068 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -676,17 +676,17 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
-.btn-workspace:hover { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); opacity: 0.95; color: #fff; }
+.btn-workspace:hover { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42); opacity: 0.95; color: #fff; }
 
 .btn-share {
   padding: 0.4rem 0.8rem;
@@ -857,7 +857,7 @@ async function confirmDelete() {
 
 .btn-save-panel {
   padding: 0.45rem 0.9rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
@@ -866,10 +866,10 @@ async function confirmDelete() {
   font-weight: 600;
   font-family: inherit;
   width: 100%;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
-.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); opacity: 0.95; }
+.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); opacity: 0.95; }
 .btn-save-panel:disabled { opacity: 0.45; cursor: default; }
 
 /* ── Content area ────────────────────────────────────────────── */
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index ba1fffc..40d8b12 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -3024,7 +3024,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
 }
 .sidebar-item.active {
   color: var(--color-primary);
-  background: rgba(99, 102, 241, 0.08);
+  background: rgba(124, 58, 237, 0.08);
   border-left-color: var(--color-primary);
   font-weight: 600;
 }
@@ -3489,7 +3489,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
   }
   .sidebar-item.active {
     border-bottom-color: var(--color-primary);
-    background: rgba(99, 102, 241, 0.08);
+    background: rgba(124, 58, 237, 0.08);
   }
   .settings-grid {
     grid-template-columns: 1fr;
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index 7295be0..754152d 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -480,23 +480,23 @@ const subTaskProgress = computed(() => {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42);
+  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
   opacity: 0.95;
   color: #fff;
 }
 .btn-advance {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  background: linear-gradient(135deg, #7c3aed, #5b21b6);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);

From 2ac894b5d16b38af62ccaa9b94ed5b56f398eb97 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:19:38 -0400
Subject: [PATCH 02/11] refactor(theme): DRY hardcoded violet values into CSS
 custom properties

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/AppHeader.vue           |  6 +++---
 frontend/src/components/BriefingSetupWizard.vue |  4 ++--
 frontend/src/components/ChatInputBar.vue        |  2 +-
 frontend/src/components/EventSlideOver.vue      |  8 ++++----
 frontend/src/components/InlineAssistPanel.vue   | 10 +++++-----
 frontend/src/components/ShareDialog.vue         |  2 +-
 frontend/src/components/TagPill.vue             |  2 +-
 frontend/src/components/ToolCallCard.vue        |  8 ++++----
 frontend/src/views/CalendarView.vue             | 16 ++++++++--------
 frontend/src/views/HomeView.vue                 |  8 ++++----
 frontend/src/views/KnowledgeView.vue            | 16 ++++++++--------
 frontend/src/views/NoteEditorView.vue           |  2 +-
 frontend/src/views/NoteViewerView.vue           |  6 +++---
 frontend/src/views/ProjectView.vue              | 10 +++++-----
 frontend/src/views/SettingsView.vue             |  2 +-
 frontend/src/views/TaskViewerView.vue           |  8 ++++----
 16 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 2db3cf9..3c285e6 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -194,7 +194,7 @@ router.afterEach(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: rgba(124, 58, 237, 0.06);
+  background: var(--color-primary-faint);
   border-radius: 10px;
   padding: 3px;
 }
@@ -217,7 +217,7 @@ router.afterEach(() => {
 }
 .nav-link:hover {
   color: var(--color-text-secondary);
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 .nav-link.router-link-active {
   color: #c4b5fd;
@@ -387,7 +387,7 @@ router.afterEach(() => {
     border-radius: 8px;
   }
   .mobile-menu .nav-link.router-link-active {
-    background: rgba(124, 58, 237, 0.15);
+    background: var(--color-primary-wash);
     box-shadow: none;
   }
   .mobile-user .btn-logout {
diff --git a/frontend/src/components/BriefingSetupWizard.vue b/frontend/src/components/BriefingSetupWizard.vue
index b7a3e57..6f32449 100644
--- a/frontend/src/components/BriefingSetupWizard.vue
+++ b/frontend/src/components/BriefingSetupWizard.vue
@@ -247,7 +247,7 @@ async function finish() {
 }
 .wizard-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   transition: width 0.3s ease;
 }
 .wizard-step-label {
@@ -375,7 +375,7 @@ async function finish() {
 }
 .btn-wizard-primary {
   padding: 0.5rem 1.25rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;
diff --git a/frontend/src/components/ChatInputBar.vue b/frontend/src/components/ChatInputBar.vue
index 96a8927..c8742c1 100644
--- a/frontend/src/components/ChatInputBar.vue
+++ b/frontend/src/components/ChatInputBar.vue
@@ -391,7 +391,7 @@ defineExpose({ focus, prefill })
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 50%;
diff --git a/frontend/src/components/EventSlideOver.vue b/frontend/src/components/EventSlideOver.vue
index 854a0fb..50bf92b 100644
--- a/frontend/src/components/EventSlideOver.vue
+++ b/frontend/src/components/EventSlideOver.vue
@@ -357,7 +357,7 @@ async function doDelete() {
   box-sizing: border-box;
   transition: border-color 0.15s;
 }
-.so-input:focus { outline: none; border-color: var(--color-primary, #7c3aed); }
+.so-input:focus { outline: none; border-color: var(--color-primary); }
 
 .so-textarea { resize: vertical; min-height: 5rem; font-family: inherit; }
 
@@ -376,8 +376,8 @@ async function doDelete() {
   transition: all 0.15s;
 }
 .toggle-btn.active {
-  background: var(--color-primary, #7c3aed);
-  border-color: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
+  border-color: var(--color-primary);
   color: #fff;
 }
 
@@ -403,7 +403,7 @@ async function doDelete() {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;
diff --git a/frontend/src/components/InlineAssistPanel.vue b/frontend/src/components/InlineAssistPanel.vue
index 2b2d545..45c15c9 100644
--- a/frontend/src/components/InlineAssistPanel.vue
+++ b/frontend/src/components/InlineAssistPanel.vue
@@ -94,10 +94,10 @@ const markers: Record<DiffLine["type"], string> = {
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 8%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   animation: iap-pulse 1.2s ease-in-out infinite;
 }
@@ -172,8 +172,8 @@ const markers: Record<DiffLine["type"], string> = {
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--color-primary, #7c3aed);
-  color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .iap-actions {
diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue
index 7edc1f9..23f84ba 100644
--- a/frontend/src/components/ShareDialog.vue
+++ b/frontend/src/components/ShareDialog.vue
@@ -337,7 +337,7 @@ onMounted(async () => {
 
 .btn-add-share {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 6px;
diff --git a/frontend/src/components/TagPill.vue b/frontend/src/components/TagPill.vue
index 2c0d797..185599c 100644
--- a/frontend/src/components/TagPill.vue
+++ b/frontend/src/components/TagPill.vue
@@ -40,7 +40,7 @@ defineEmits<{
 }
 .tag-pill:hover {
   color: var(--color-primary);
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 .dismiss {
   background: none;
diff --git a/frontend/src/components/ToolCallCard.vue b/frontend/src/components/ToolCallCard.vue
index e21228e..556175f 100644
--- a/frontend/src/components/ToolCallCard.vue
+++ b/frontend/src/components/ToolCallCard.vue
@@ -751,7 +751,7 @@ function closeEventSlideOver(changed = false) {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
 }
 
@@ -773,14 +773,14 @@ function closeEventSlideOver(changed = false) {
 }
 .tool-event-card.clickable { cursor: pointer; }
 .tool-event-card.clickable:hover {
-  border-color: var(--color-primary, #7c3aed);
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card, #16161a));
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card, #16161a));
 }
 .tool-event-card-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   margin-top: 3px;
 }
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index fd5f3cf..aeb818f 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -435,7 +435,7 @@ const upcomingGrouped = computed(() => {
 }
 
 .btn-new-event {
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;
@@ -482,8 +482,8 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-button:hover),
 :deep(.fc-button-active) {
-  background: var(--color-primary, #7c3aed) !important;
-  border-color: var(--color-primary, #7c3aed) !important;
+  background: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
   color: #fff !important;
 }
 :deep(.fc-button:focus) { box-shadow: none !important; }
@@ -494,7 +494,7 @@ const upcomingGrouped = computed(() => {
   font-size: 0.82rem;
 }
 :deep(.fc-daygrid-day.fc-day-today) {
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 :deep(.fc-event) {
   border-radius: 4px;
@@ -505,7 +505,7 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-event-main) { color: #fff; }
 :deep(.fc-event:not([style*="background"])) {
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
 }
 :deep(.fc-daygrid-day-frame) { min-height: 5rem; }
 :deep(.fc-scrollgrid) { border-color: var(--color-border, #2a2b30); }
@@ -575,7 +575,7 @@ const upcomingGrouped = computed(() => {
 }
 .picker-month.active {
   background: rgba(124,58,237,0.22);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
   font-weight: 700;
 }
 
@@ -691,7 +691,7 @@ const upcomingGrouped = computed(() => {
 
 .popover-accent {
   height: 4px;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
 }
 
 .popover-content {
@@ -750,7 +750,7 @@ const upcomingGrouped = computed(() => {
 }
 .popover-btn:hover { opacity: 0.85; }
 .popover-btn--edit {
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   color: #fff;
 }
 .popover-btn--close {
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 8300a0d..1840f4b 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -605,7 +605,7 @@ function formatUpcomingTime(event: EventEntry): string {
   align-items: center;
   gap: 0.4rem;
   padding: 0.55rem 1.1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border-radius: var(--radius-sm);
   text-decoration: none;
@@ -892,14 +892,14 @@ function formatUpcomingTime(event: EventEntry): string {
   width: 100%;
 }
 .upcoming-event-card:hover {
-  border-color: var(--color-primary, #7c3aed);
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card));
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card));
 }
 .upcoming-event-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   margin-top: 4px;
 }
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 8f7f090..9c8015e 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -721,7 +721,7 @@ onUnmounted(() => {
   font-size: 0.78rem;
 }
 .today-link {
-  color: var(--color-primary, #7c3aed);
+  color: var(--color-primary);
   text-decoration: none;
   font-weight: 500;
   opacity: 0.85;
@@ -777,7 +777,7 @@ onUnmounted(() => {
   border-radius: 8px;
   border: 1px solid rgba(124, 58, 237, 0.4);
   background: rgba(124, 58, 237, 0.12);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 500;
@@ -830,8 +830,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: rgba(124, 58, 237, 0.15);
-  color: var(--color-primary, #a78bfa);
+  background: var(--color-primary-wash);
+  color: var(--color-primary);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -848,7 +848,7 @@ onUnmounted(() => {
 }
 .filter-btn.active .filter-count {
   background: rgba(124, 58, 237, 0.2);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -893,7 +893,7 @@ onUnmounted(() => {
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--color-primary, #7c3aed); }
+.search-input:focus { border-color: var(--color-primary); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
@@ -920,9 +920,9 @@ onUnmounted(() => {
 }
 .btn-graph:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }
 .btn-graph.active {
-  background: rgba(124, 58, 237, 0.15);
+  background: var(--color-primary-wash);
   border-color: rgba(124, 58, 237, 0.35);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
 }
 
 /* ── Card grid ───────────────────────────────────────────── */
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index 488fad5..95616a9 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -731,7 +731,7 @@ onUnmounted(() => assist.clearSelection());
   transition: border-color 0.15s;
 }
 .sb-select:focus, .sb-input:focus {
-  border-color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
 }
 
 /* Tag suggest row inside sidebar */
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index 7bf4705..0d359f7 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/frontend/src/views/NoteViewerView.vue
@@ -350,17 +350,17 @@ async function convertToTask() {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
+  box-shadow: var(--glow-cta-hover);
   opacity: 0.95;
   color: #fff;
 }
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index 8b13068..69f4f6a 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -676,17 +676,17 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
-.btn-workspace:hover { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42); opacity: 0.95; color: #fff; }
+.btn-workspace:hover { box-shadow: var(--glow-cta-hover); opacity: 0.95; color: #fff; }
 
 .btn-share {
   padding: 0.4rem 0.8rem;
@@ -857,7 +857,7 @@ async function confirmDelete() {
 
 .btn-save-panel {
   padding: 0.45rem 0.9rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
@@ -866,7 +866,7 @@ async function confirmDelete() {
   font-weight: 600;
   font-family: inherit;
   width: 100%;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
+  box-shadow: var(--glow-soft);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); opacity: 0.95; }
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 40d8b12..7cd41ed 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -3489,7 +3489,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
   }
   .sidebar-item.active {
     border-bottom-color: var(--color-primary);
-    background: rgba(124, 58, 237, 0.08);
+    background: var(--color-primary-tint);
   }
   .settings-grid {
     grid-template-columns: 1fr;
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index 754152d..5eebf91 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -480,23 +480,23 @@ const subTaskProgress = computed(() => {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
+  box-shadow: var(--glow-cta-hover);
   opacity: 0.95;
   color: #fff;
 }
 .btn-advance {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);

From 16d9af8b96f498aee1d2f2afc1a166c3053a4983 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:22:03 -0400
Subject: [PATCH 03/11] fix(theme): increase dark mode contrast for borders,
 glows, and card edges; DRY color values into CSS variables

---
 frontend/src/assets/theme.css         | 19 +++++++++++++++++--
 frontend/src/components/AppHeader.vue |  6 +++---
 frontend/src/views/KnowledgeView.vue  | 14 +++++++-------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index cae746b..7b19fff 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -58,6 +58,14 @@
   --color-accent-warm-light: #d4a017;
   --color-primary-solid: #7c3aed;
   --color-primary-deep: #5b21b6;
+  /* Reusable brand patterns */
+  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
+  --glow-cta: 0 2px 10px rgba(124, 58, 237, 0.35);
+  --glow-cta-hover: 0 4px 20px rgba(124, 58, 237, 0.55);
+  --glow-soft: 0 0 16px rgba(124, 58, 237, 0.35);
+  --color-primary-faint: rgba(124, 58, 237, 0.08);
+  --color-primary-tint: rgba(124, 58, 237, 0.12);
+  --color-primary-wash: rgba(124, 58, 237, 0.20);
 }
 
 [data-theme="dark"] {
@@ -68,8 +76,8 @@
   --color-text: #e4e4f0;
   --color-text-secondary: #8888a8;
   --color-text-muted: #52526a;
-  --color-border: rgba(124, 58, 237, 0.12);
-  --color-input-border: rgba(124, 58, 237, 0.22);
+  --color-border: rgba(124, 58, 237, 0.22);
+  --color-input-border: rgba(124, 58, 237, 0.35);
   --color-primary: #a78bfa;
   --color-danger: #f44336;
   --color-tag-bg: #2a2a45;
@@ -109,6 +117,13 @@
   --color-accent-warm-light: #e8c45a;
   --color-primary-solid: #7c3aed;
   --color-primary-deep: #5b21b6;
+  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
+  --glow-cta: 0 2px 12px rgba(124, 58, 237, 0.45);
+  --glow-cta-hover: 0 4px 24px rgba(124, 58, 237, 0.65);
+  --glow-soft: 0 0 18px rgba(124, 58, 237, 0.4);
+  --color-primary-faint: rgba(124, 58, 237, 0.10);
+  --color-primary-tint: rgba(124, 58, 237, 0.14);
+  --color-primary-wash: rgba(124, 58, 237, 0.22);
 }
 
 *,
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 3c285e6..9f52698 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -153,7 +153,7 @@ router.afterEach(() => {
 <style scoped>
 .app-header {
   background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
-  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
+  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
   position: relative;
 }
 .nav {
@@ -222,8 +222,8 @@ router.afterEach(() => {
 .nav-link.router-link-active {
   color: #c4b5fd;
   font-weight: 600;
-  background: rgba(124, 58, 237, 0.2);
-  box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
+  background: rgba(124, 58, 237, 0.25);
+  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
 }
 
 /* Status indicator */
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 9c8015e..95b94db 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -954,16 +954,16 @@ onUnmounted(() => {
 }
 .k-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
-  border-color: rgba(124, 58, 237, 0.2);
+  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: rgba(124, 58, 237, 0.35);
 }
 
 /* Type-specific card DNA */
-.k-card--note   { border-color: rgba(124, 58, 237, 0.12); }
-.k-card--task   { border-color: rgba(212, 160, 23, 0.10); }
-.k-card--person { border-color: rgba(16, 185, 129, 0.10); }
-.k-card--place  { border-color: rgba(245, 158, 11, 0.10); }
-.k-card--list   { border-color: rgba(56, 189, 248, 0.10); }
+.k-card--note   { border-color: rgba(124, 58, 237, 0.20); }
+.k-card--task   { border-color: rgba(212, 160, 23, 0.18); }
+.k-card--person { border-color: rgba(16, 185, 129, 0.18); }
+.k-card--place  { border-color: rgba(245, 158, 11, 0.18); }
+.k-card--list   { border-color: rgba(56, 189, 248, 0.18); }
 
 /* Top gradient bars */
 .k-card--note::before,

From 0ca39a2e34562f1270c4860c5398aa40cf05fe9e Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:34:52 -0400
Subject: [PATCH 04/11] feat(knowledge): redesign new item button as gradient
 CTA with icon menu for all 5 types

---
 frontend/src/views/KnowledgeView.vue | 90 ++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 26 deletions(-)

diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 95b94db..203faad 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -418,12 +418,30 @@ onUnmounted(() => {
       <aside class="filter-panel">
         <!-- New note button -->
         <div class="new-note-wrap">
-          <button class="btn-new-note" @click="newNoteMenuOpen ? createNew('note') : (newNoteMenuOpen = true)">+ New note</button>
+          <button class="btn-new-note" @click="newNoteMenuOpen = !newNoteMenuOpen">
+            <span class="btn-new-icon">+</span> New
+          </button>
           <div v-if="newNoteMenuOpen" class="new-note-menu">
-            <button @click="createNew('task')">Task</button>
-            <button @click="createNew('person')">Person</button>
-            <button @click="createNew('place')">Place</button>
-            <button @click="createNew('list')">List</button>
+            <button @click="createNew('note')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              Note
+            </button>
+            <button @click="createNew('task')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+              Task
+            </button>
+            <button @click="createNew('person')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              Person
+            </button>
+            <button @click="createNew('place')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              Place
+            </button>
+            <button @click="createNew('list')">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+              List
+            </button>
           </div>
         </div>
 
@@ -765,51 +783,71 @@ onUnmounted(() => {
   margin-bottom: 6px;
   padding: 0 4px;
 }
-/* ── New note button ─────────────────────────────────────── */
+/* ── New item button ─────────────────────────────────────── */
 .new-note-wrap {
   position: relative;
-  display: flex;
   margin-bottom: 16px;
 }
 .btn-new-note {
-  flex: 1;
-  padding: 7px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(124, 58, 237, 0.4);
-  background: rgba(124, 58, 237, 0.12);
-  color: var(--color-primary);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: none;
+  background: var(--gradient-cta);
+  color: #fff;
   cursor: pointer;
   font-size: 0.85rem;
-  font-weight: 500;
-  text-align: left;
-  transition: background 0.15s;
+  font-weight: 600;
+  transition: box-shadow 0.15s;
+}
+.btn-new-note:hover { box-shadow: var(--glow-cta-hover); }
+.btn-new-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+  font-weight: 300;
 }
-.btn-new-note:hover { background: rgba(124, 58, 237, 0.2); box-shadow: 0 0 12px rgba(124, 58, 237, 0.25); }
 .new-note-menu {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 6px);
   left: 0;
   right: 0;
-  background: var(--color-bg-tertiary, #1a1b1e);
-  border: 1px solid rgba(124, 58, 237, 0.3);
-  border-radius: 8px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
   overflow: hidden;
   z-index: 50;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  padding: 4px 0;
 }
 .new-note-menu button {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   width: 100%;
-  padding: 7px 12px;
+  padding: 9px 14px;
   background: none;
   border: none;
   color: var(--color-text);
   cursor: pointer;
   font-size: 0.84rem;
   text-align: left;
-  transition: background 0.12s;
+  transition: background 0.12s, color 0.12s;
+}
+.new-note-menu button:hover {
+  background: var(--color-primary-tint);
+  color: var(--color-primary);
+}
+.new-note-menu button svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+.new-note-menu button:hover svg {
+  opacity: 1;
+  stroke: var(--color-primary);
 }
-.new-note-menu button:hover { background: rgba(124, 58, 237, 0.12); }
 
 .filter-btn {
   display: flex;

From f7fda0adcab83638a4e33fff870d541524bdd4de Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:08:01 -0400
Subject: [PATCH 05/11] docs: add specialized note type editors design spec

---
 .../specs/2026-04-08-note-type-editors.md     | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-08-note-type-editors.md

diff --git a/docs/superpowers/specs/2026-04-08-note-type-editors.md b/docs/superpowers/specs/2026-04-08-note-type-editors.md
new file mode 100644
index 0000000..43d9799
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-08-note-type-editors.md
@@ -0,0 +1,204 @@
+# Specialized Note Type Editors — Design Spec
+
+## Goal
+
+Replace the one-size-fits-all note editor with type-specialized views for Person, Place, and List. Each type gets a form-first layout where structured fields are the main content, with a secondary notes area for free text. Fix tab navigation across all note types so focus flows logically from title through fields to body, skipping the formatting toolbar.
+
+## Architecture
+
+The existing `NoteEditorView.vue` remains the single editor component but renders different layouts based on `noteType`. When `noteType` is `person`, `place`, or `list`, the main editor area switches from TipTap-first to form-first. The TipTap editor moves to a secondary "Notes" section below the form fields. The sidebar metadata fields for person/place move into the main content area. The `note_type` field, entity metadata storage, and API contract are unchanged.
+
+## Person Editor
+
+When `noteType === 'person'`, the main content area renders a contact card form instead of the TipTap editor.
+
+### Fields (in order, all in main content area)
+
+| Field | Type | Placeholder | Source |
+|-------|------|-------------|--------|
+| Name | text input (title) | "Name" | `title` |
+| Relationship | text input | "e.g. Friend, Colleague, Family" | `entityMeta.relationship` |
+| Birthday | date input | — | `entityMeta.birthday` (new field) |
+| Email | email input | "email@example.com" | `entityMeta.email` |
+| Phone | tel input | "+1 555 000 0000" | `entityMeta.phone` |
+| Organization | text input | "Company or organization" | `entityMeta.organization` (new field) |
+| Address | text input | "Street, City, State" | `entityMeta.address` (new field for person) |
+
+### Notes section
+
+Below the form fields, a collapsible "Notes" section with the TipTap editor for free-text content. This is where wikilinks, tags, and general context go. The section starts expanded if the note already has body content, collapsed if empty on a new note.
+
+### Layout
+
+```
+┌──────────────────────────────────────────┐
+│ [← Knowledge]  [Save]  [Delete]          │
+│                                          │
+│ Name: [________________________________] │
+│                                          │
+│ Relationship: [________________________] │
+│ Birthday:     [____date picker________]  │
+│ Email:        [________________________] │
+│ Phone:        [________________________] │
+│ Organization: [________________________] │
+│ Address:      [________________________] │
+│                                          │
+│ ▾ Notes                                  │
+│ ┌──────────────────────────────────────┐ │
+│ │ TipTap editor (markdown body)       │ │
+│ └──────────────────────────────────────┘ │
+│                                          │
+│           [sidebar: project/tags/etc]    │
+└──────────────────────────────────────────┘
+```
+
+### Data migration
+
+Existing person notes may have structured data written as plain text in the body (e.g. "Relationship: daughter Birthday: 2013-12-13"). No automatic migration — the body content stays as-is in the Notes section. Users can move data to the structured fields manually.
+
+## Place Editor
+
+When `noteType === 'place'`, same form-first pattern.
+
+### Fields
+
+| Field | Type | Placeholder | Source |
+|-------|------|-------------|--------|
+| Name | text input (title) | "Place name" | `title` |
+| Address | text input | "Street, City, State" | `entityMeta.address` |
+| Phone | tel input | "+1 555 000 0000" | `entityMeta.phone` |
+| Hours | text input | "e.g. Mon–Fri 9am–5pm" | `entityMeta.hours` |
+| Website | url input | "https://..." | `entityMeta.website` (new field) |
+| Category | text input | "e.g. Restaurant, Office, Doctor" | `entityMeta.category` (new field) |
+
+### Notes section
+
+Same as Person — collapsible TipTap editor below the form.
+
+## List Editor
+
+When `noteType === 'list'`, the main content area renders a checklist builder instead of the TipTap editor.
+
+### List builder
+
+Each list item is a row with:
+- Checkbox (toggle checked state)
+- Text input (item text, fills available width)
+- Delete button (× icon, right side)
+
+Below the items: an "Add item" button.
+
+### Behavior
+
+- **Enter** in any item input: creates a new item below and focuses it
+- **Backspace** on an empty item: deletes the item and focuses the previous one
+- **Checkbox toggle**: updates the item's checked state
+- **Delete button**: removes the item
+
+### Serialization
+
+On save, list items are serialized to markdown checkbox format in the body:
+```markdown
+- [ ] Buy groceries
+- [x] Call dentist
+- [ ] Pick up prescription
+```
+
+On load, the body is parsed back into structured items (same parser already exists in `knowledge.py` and `KnowledgeView.vue`).
+
+### Notes section
+
+Same collapsible TipTap "Notes" section below the list builder, for additional context that isn't a list item.
+
+### Layout
+
+```
+┌──────────────────────────────────────────┐
+│ [← Knowledge]  [Save]  [Delete]          │
+│                                          │
+│ List title: [____________________________│
+│                                          │
+│ [ ] Buy groceries                    [×] │
+│ [x] Call dentist                     [×] │
+│ [ ] Pick up prescription            [×] │
+│                                          │
+│ [+ Add item]                             │
+│                                          │
+│ ▾ Notes                                  │
+│ ┌──────────────────────────────────────┐ │
+│ │ TipTap editor (additional context)  │ │
+│ └──────────────────────────────────────┘ │
+│                                          │
+│           [sidebar: project/tags/etc]    │
+└──────────────────────────────────────────┘
+```
+
+## Tab Navigation & Auto-Focus
+
+### All note types
+
+1. **On page load**: focus the title/name input automatically
+2. **Tab from title**: skip the formatting toolbar entirely, go to the first content field:
+   - Note: TipTap editor body
+   - Person: Relationship field
+   - Place: Address field
+   - List: first list item (or "Add item" button if empty)
+3. **Tab through fields**: natural order through all form fields
+4. **Tab from last form field**: enter the Notes section (TipTap editor)
+
+### Implementation
+
+Set `tabindex="-1"` on all MarkdownToolbar buttons so they are clickable but not in the tab order. The toolbar remains fully functional via mouse/touch — it's just skipped when tabbing.
+
+### Title placeholder by type
+
+| Type | Placeholder |
+|------|-------------|
+| Note | "Title" |
+| Person | "Name" |
+| Place | "Place name" |
+| List | "List title" |
+| Task | "Title" (unchanged, task editor is separate) |
+
+## Sidebar changes
+
+When editing a Person or Place, the type-specific metadata fields (Relationship, Email, Phone, etc.) **move from the sidebar to the main content area**. The sidebar keeps: Project, Milestone, Tags, Suggest Tags, Type selector, Link Suggestions, Writing Assistant, Version History.
+
+The Type selector remains in the sidebar so users can change the type if needed. Changing type switches the layout.
+
+## Backend changes
+
+### New entity metadata fields
+
+The `entity_meta` JSON column on the Note model already stores arbitrary key-value pairs. No schema migration needed — just store the new keys:
+
+- Person: `birthday`, `organization`, `address` (new; `relationship`, `email`, `phone` existing)
+- Place: `website`, `category` (new; `address`, `phone`, `hours` existing)
+
+### Knowledge service
+
+Update `_note_to_item` in `services/knowledge.py` to include the new fields in the response for person and place cards:
+
+- Person: add `birthday`, `organization`, `address`
+- Place: add `website`, `category`
+
+### Knowledge card display
+
+Update `KnowledgeView.vue` card rendering to show the new fields where useful (e.g. organization on person cards, category on place cards).
+
+## Files changed
+
+| File | Change |
+|------|--------|
+| `frontend/src/views/NoteEditorView.vue` | Type-conditional layouts, form fields, list builder, tab navigation, auto-focus, title placeholders |
+| `frontend/src/views/KnowledgeView.vue` | Card display for new person/place fields |
+| `frontend/src/components/MarkdownToolbar.vue` | `tabindex="-1"` on all buttons |
+| `src/fabledassistant/services/knowledge.py` | New fields in `_note_to_item` for person/place |
+
+## What does NOT change
+
+- Note model / database schema (entity_meta is already a JSON column)
+- API endpoints (same CRUD)
+- Task editor (`TaskEditorView.vue`) — separate component, unchanged
+- Generic note editing — TipTap-first layout stays for `noteType === 'note'`
+- Backend storage format — entity_meta key-value pairs

From 87f74b1cd5533a3977fec32dfe47ac52ef85995b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:21:20 -0400
Subject: [PATCH 06/11] docs: add specialized note type editors implementation
 plan

---
 .../plans/2026-04-08-note-type-editors.md     | 786 ++++++++++++++++++
 1 file changed, 786 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-08-note-type-editors.md

diff --git a/docs/superpowers/plans/2026-04-08-note-type-editors.md b/docs/superpowers/plans/2026-04-08-note-type-editors.md
new file mode 100644
index 0000000..303e709
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-08-note-type-editors.md
@@ -0,0 +1,786 @@
+# Specialized Note Type Editors — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the generic note editor with type-specialized form-first views for Person, Place, and List, and fix tab navigation so focus flows logically from title through content fields, skipping the formatting toolbar.
+
+**Architecture:** `NoteEditorView.vue` gains type-conditional template sections. When `noteType` is `person` or `place`, the main editor area renders a structured form with the TipTap editor in a secondary "Notes" section. When `noteType` is `list`, a dedicated list builder replaces TipTap as the primary interface. `MarkdownToolbar.vue` gets `tabindex="-1"` on buttons. Backend `_note_to_item` gains new person/place fields.
+
+**Tech Stack:** Vue 3 Composition API, TipTap editor, TypeScript, scoped CSS.
+
+---
+
+## File Map
+
+| Action | Path |
+|--------|------|
+| Modify | `frontend/src/views/NoteEditorView.vue` |
+| Modify | `frontend/src/components/MarkdownToolbar.vue` |
+| Modify | `frontend/src/views/KnowledgeView.vue` |
+| Modify | `src/fabledassistant/services/knowledge.py` |
+
+---
+
+### Task 1: Tab navigation fix — toolbar tabindex + auto-focus
+
+**Files:**
+- Modify: `frontend/src/components/MarkdownToolbar.vue`
+- Modify: `frontend/src/views/NoteEditorView.vue`
+
+**Context:** The MarkdownToolbar renders buttons via `v-for` in a single `<button>` element. Adding `tabindex="-1"` removes them from tab order while keeping them clickable. The NoteEditorView already has a `titleRef` — auto-focus on mount needs to call `.focus()` on it. The title placeholder should vary by note type.
+
+- [ ] **Step 1: Add tabindex="-1" to toolbar buttons**
+
+In `frontend/src/components/MarkdownToolbar.vue`, find:
+
+```html
+        <button
+          v-for="btn in group"
+          :key="btn.id"
+          :class="['md-btn', { active: btn.isActive() }]"
+          :title="btn.title"
+          type="button"
+          @mousedown.prevent="btn.command()"
+        >
+```
+
+Replace with:
+
+```html
+        <button
+          v-for="btn in group"
+          :key="btn.id"
+          :class="['md-btn', { active: btn.isActive() }]"
+          :title="btn.title"
+          type="button"
+          tabindex="-1"
+          @mousedown.prevent="btn.command()"
+        >
+```
+
+- [ ] **Step 2: Add auto-focus on mount and type-dependent placeholder**
+
+In `frontend/src/views/NoteEditorView.vue`, find the title input:
+
+```html
+      <input
+        ref="titleRef"
+        v-model="title"
+        type="text"
+        placeholder="Title"
+        class="title-input"
+```
+
+Replace with:
+
+```html
+      <input
+        ref="titleRef"
+        v-model="title"
+        type="text"
+        :placeholder="titlePlaceholder"
+        class="title-input"
+```
+
+Add the computed property in the `<script setup>` section, after the `isEditing` computed:
+
+```ts
+const titlePlaceholder = computed(() => {
+  switch (noteType.value) {
+    case 'person': return 'Name';
+    case 'place': return 'Place name';
+    case 'list': return 'List title';
+    default: return 'Title';
+  }
+});
+```
+
+- [ ] **Step 3: Auto-focus title on mount**
+
+In the `onMounted` callback, after all the data loading logic (after the draft restore try/catch block), add:
+
+```ts
+  await nextTick();
+  titleRef.value?.focus();
+```
+
+- [ ] **Step 4: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add frontend/src/components/MarkdownToolbar.vue frontend/src/views/NoteEditorView.vue
+git commit -m "feat(editor): skip toolbar in tab order; auto-focus title; type-dependent placeholders"
+```
+
+---
+
+### Task 2: Person editor — form-first layout
+
+**Files:**
+- Modify: `frontend/src/views/NoteEditorView.vue`
+
+**Context:** When `noteType === 'person'`, the main content area should render a contact card form instead of the TipTap-first editor. The person metadata fields (currently in the sidebar) move to the main area, and new fields (birthday, organization, address) are added. The TipTap editor becomes a collapsible "Notes" section below. The sidebar keeps project/tags/type/etc but loses the person-specific fields.
+
+- [ ] **Step 1: Add the person form template**
+
+In the template, find the `<!-- ── Main column ──` section. The current structure is:
+
+```html
+      <div class="note-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
+        <div class="body-tabs-row">
+          ...
+        </div>
+        <!-- Streaming/Review/Normal editor templates -->
+      </div>
+```
+
+Wrap the existing main column content in a `v-if="noteType === 'note'"` (and also show it for any type not person/place/list), and add a person form block. Replace the opening of the main column content:
+
+Find the `<div class="note-main"` line and the content inside it up to `</div>` that closes `.note-main`. Wrap all existing content inside:
+
+```html
+      <div class="note-main">
+        <!-- ── Person form ──────────────────────────────────────── -->
+        <template v-if="noteType === 'person'">
+          <div class="entity-form">
+            <div class="ef-field">
+              <label class="ef-label">Relationship</label>
+              <input class="ef-input" v-model="entityMeta.relationship" placeholder="e.g. Friend, Colleague, Family" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Birthday</label>
+              <input class="ef-input" type="date" v-model="entityMeta.birthday" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Email</label>
+              <input class="ef-input" type="email" v-model="entityMeta.email" placeholder="email@example.com" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Phone</label>
+              <input class="ef-input" type="tel" v-model="entityMeta.phone" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Organization</label>
+              <input class="ef-input" v-model="entityMeta.organization" placeholder="Company or organization" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Address</label>
+              <input class="ef-input" v-model="entityMeta.address" placeholder="Street, City, State" @input="markDirty" />
+            </div>
+          </div>
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+              <TiptapEditor
+                ref="editorRef"
+                :modelValue="body"
+                placeholder="Additional notes, wikilinks, context..."
+                @update:modelValue="onBodyUpdate"
+                @escape="titleRef?.focus()"
+              />
+            </div>
+          </div>
+        </template>
+
+        <!-- ── Generic note editor (existing) ───────────────────── -->
+        <template v-else-if="noteType === 'note'">
+          <!-- ... existing TipTap-first editor content stays here ... -->
+        </template>
+      </div>
+```
+
+IMPORTANT: Do NOT duplicate the existing editor content. Wrap the existing content in `<template v-else-if="noteType === 'note'">` and place the person form as a sibling `<template>` above it. The place and list forms will be added in subsequent tasks.
+
+- [ ] **Step 2: Add `notesExpanded` ref**
+
+In the `<script setup>`, after the `sidebarOpen` ref, add:
+
+```ts
+const notesExpanded = ref(false);
+```
+
+Also initialize it based on whether the note has body content, in the onMounted data-loading section. After `Object.assign(entityMeta, store.currentNote.metadata || {});` add:
+
+```ts
+      notesExpanded.value = !!(store.currentNote.body || '').trim();
+```
+
+- [ ] **Step 3: Remove person fields from sidebar**
+
+In the sidebar template, find:
+
+```html
+          <!-- Person metadata -->
+          <template v-if="noteType === 'person'">
+            <div class="sb-field">
+              <label class="sb-label">Relationship</label>
+              <input class="sb-input" v-model="entityMeta.relationship" placeholder="e.g. Friend, Colleague" @input="markDirty" />
+            </div>
+            <div class="sb-field">
+              <label class="sb-label">Email</label>
+              <input class="sb-input" v-model="entityMeta.email" type="email" placeholder="email@example.com" @input="markDirty" />
+            </div>
+            <div class="sb-field">
+              <label class="sb-label">Phone</label>
+              <input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+          </template>
+```
+
+Delete this entire block.
+
+- [ ] **Step 4: Add entity form CSS**
+
+Add to the `<style scoped>` block:
+
+```css
+/* ── Entity form (Person / Place) ───────────────────────── */
+.entity-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 0;
+}
+.ef-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ef-label {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.78rem;
+  color: var(--color-primary);
+}
+.ef-input {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.ef-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+.ef-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* ── Notes section (collapsible TipTap) ─────────────────── */
+.notes-section {
+  margin-top: 16px;
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+}
+.notes-toggle {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.85rem;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.notes-toggle:hover {
+  color: var(--color-text);
+}
+.notes-editor-wrap {
+  margin-top: 8px;
+}
+```
+
+- [ ] **Step 5: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add frontend/src/views/NoteEditorView.vue
+git commit -m "feat(editor): person form-first layout with structured fields and collapsible notes"
+```
+
+---
+
+### Task 3: Place editor + List builder
+
+**Files:**
+- Modify: `frontend/src/views/NoteEditorView.vue`
+
+**Context:** Place uses the same entity form pattern as Person with different fields. List uses a dedicated checklist builder with Enter-to-add and Backspace-to-delete behavior. Both are additional `<template>` branches in the main column.
+
+- [ ] **Step 1: Add place form template**
+
+In the `note-main` div, after the person `</template>` and before the generic note `<template v-else-if="noteType === 'note'">`, add:
+
+```html
+        <!-- ── Place form ───────────────────────────────────────── -->
+        <template v-else-if="noteType === 'place'">
+          <div class="entity-form">
+            <div class="ef-field">
+              <label class="ef-label">Address</label>
+              <input class="ef-input" v-model="entityMeta.address" placeholder="Street, City, State" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Phone</label>
+              <input class="ef-input" type="tel" v-model="entityMeta.phone" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Hours</label>
+              <input class="ef-input" v-model="entityMeta.hours" placeholder="e.g. Mon–Fri 9am–5pm" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Website</label>
+              <input class="ef-input" type="url" v-model="entityMeta.website" placeholder="https://..." @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Category</label>
+              <input class="ef-input" v-model="entityMeta.category" placeholder="e.g. Restaurant, Office, Doctor" @input="markDirty" />
+            </div>
+          </div>
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+              <TiptapEditor
+                ref="editorRef"
+                :modelValue="body"
+                placeholder="Additional notes, wikilinks, context..."
+                @update:modelValue="onBodyUpdate"
+                @escape="titleRef?.focus()"
+              />
+            </div>
+          </div>
+        </template>
+```
+
+- [ ] **Step 2: Remove place fields from sidebar**
+
+Find and delete:
+
+```html
+          <!-- Place metadata -->
+          <template v-if="noteType === 'place'">
+            <div class="sb-field">
+              <label class="sb-label">Address</label>
+              <input class="sb-input" v-model="entityMeta.address" placeholder="Street, City" @input="markDirty" />
+            </div>
+            <div class="sb-field">
+              <label class="sb-label">Phone</label>
+              <input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+            <div class="sb-field">
+              <label class="sb-label">Hours</label>
+              <input class="sb-input" v-model="entityMeta.hours" placeholder="e.g. Mon–Fri 9–5" @input="markDirty" />
+            </div>
+          </template>
+```
+
+- [ ] **Step 3: Add list item types and state**
+
+In the `<script setup>`, after the `notesExpanded` ref, add:
+
+```ts
+// ── List builder ─────────────────────────────────────────────────────────────
+interface ListItem {
+  text: string;
+  checked: boolean;
+}
+const listItems = ref<ListItem[]>([]);
+const listItemRefs = ref<(HTMLInputElement | null)[]>([]);
+
+function parseListFromBody(bodyText: string): { items: ListItem[]; extra: string } {
+  const lines = bodyText.split('\n');
+  const items: ListItem[] = [];
+  const extraLines: string[] = [];
+  let pastList = false;
+  for (const line of lines) {
+    const stripped = line.trimStart();
+    if (!pastList && (stripped.startsWith('- [ ] ') || stripped.startsWith('- [x] ') || stripped.startsWith('- [X] '))) {
+      items.push({ text: stripped.slice(6), checked: !stripped.startsWith('- [ ] ') });
+    } else if (!pastList && stripped === '' && items.length > 0) {
+      pastList = true;
+    } else {
+      pastList = true;
+      extraLines.push(line);
+    }
+  }
+  return { items, extra: extraLines.join('\n').trim() };
+}
+
+function serializeListToBody(): string {
+  const listPart = listItems.value
+    .map(item => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+    .join('\n');
+  const extraPart = body.value.trim();
+  return extraPart ? `${listPart}\n\n${extraPart}` : listPart;
+}
+
+function addListItem(afterIndex?: number) {
+  const idx = afterIndex !== undefined ? afterIndex + 1 : listItems.value.length;
+  listItems.value.splice(idx, 0, { text: '', checked: false });
+  markDirty();
+  nextTick(() => {
+    listItemRefs.value[idx]?.focus();
+  });
+}
+
+function removeListItem(index: number) {
+  if (listItems.value.length <= 1) return;
+  listItems.value.splice(index, 1);
+  markDirty();
+  nextTick(() => {
+    const focusIdx = Math.max(0, index - 1);
+    listItemRefs.value[focusIdx]?.focus();
+  });
+}
+
+function onListItemKeydown(e: KeyboardEvent, index: number) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addListItem(index);
+  } else if (e.key === 'Backspace' && listItems.value[index].text === '') {
+    e.preventDefault();
+    removeListItem(index);
+  }
+}
+
+function onListItemInput(index: number) {
+  markDirty();
+}
+
+function toggleListItemCheck(index: number) {
+  listItems.value[index].checked = !listItems.value[index].checked;
+  markDirty();
+}
+```
+
+- [ ] **Step 4: Initialize list items on mount**
+
+In the onMounted data-loading section, after `notesExpanded.value = !!(store.currentNote.body || '').trim();`, add:
+
+```ts
+      if (noteType.value === 'list') {
+        const parsed = parseListFromBody(body.value);
+        listItems.value = parsed.items.length > 0 ? parsed.items : [{ text: '', checked: false }];
+        body.value = parsed.extra;
+        notesExpanded.value = !!parsed.extra;
+      }
+```
+
+And in the new-note branch (the `else` block after loading), after `noteType.value = qt as NoteType;`, add:
+
+```ts
+    if (noteType.value === 'list') {
+      listItems.value = [{ text: '', checked: false }];
+    }
+```
+
+- [ ] **Step 5: Update save to serialize list**
+
+In the `save` function, find where the body is prepared for the API call. Before the `apiPost` or `apiPatch` call that sends the note data, add list serialization. Find the save function's data construction. Add before the API call:
+
+```ts
+  const finalBody = noteType.value === 'list' ? serializeListToBody() : body.value;
+```
+
+Then use `finalBody` instead of `body.value` in the API payload. Find all occurrences of `body: body.value` in the save function and replace with `body: finalBody`.
+
+- [ ] **Step 6: Add list builder template**
+
+In the `note-main` div, after the place `</template>` and before the generic note `<template v-else-if="noteType === 'note'">`, add:
+
+```html
+        <!-- ── List builder ─────────────────────────────────────── -->
+        <template v-else-if="noteType === 'list'">
+          <div class="list-builder">
+            <div
+              v-for="(item, idx) in listItems"
+              :key="idx"
+              class="lb-item"
+            >
+              <input
+                type="checkbox"
+                :checked="item.checked"
+                @change="toggleListItemCheck(idx)"
+                class="lb-check"
+                tabindex="-1"
+              />
+              <input
+                :ref="(el) => { listItemRefs[idx] = el as HTMLInputElement | null }"
+                v-model="item.text"
+                class="lb-text"
+                placeholder="List item..."
+                @keydown="onListItemKeydown($event, idx)"
+                @input="onListItemInput(idx)"
+              />
+              <button class="lb-delete" tabindex="-1" @click="removeListItem(idx)" title="Remove item">&times;</button>
+            </div>
+            <button class="lb-add" @click="addListItem()">+ Add item</button>
+          </div>
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+              <TiptapEditor
+                ref="editorRef"
+                :modelValue="body"
+                placeholder="Additional notes, context..."
+                @update:modelValue="onBodyUpdate"
+                @escape="titleRef?.focus()"
+              />
+            </div>
+          </div>
+        </template>
+```
+
+- [ ] **Step 7: Add list builder CSS**
+
+Add to the `<style scoped>` block:
+
+```css
+/* ── List builder ───────────────────────────────────────── */
+.list-builder {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 0;
+}
+.lb-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.lb-check {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+.lb-text {
+  flex: 1;
+  padding: 7px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.lb-text:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+.lb-text::placeholder {
+  color: var(--color-text-muted);
+}
+.lb-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s;
+}
+.lb-item:hover .lb-delete,
+.lb-text:focus ~ .lb-delete {
+  opacity: 1;
+}
+.lb-delete:hover {
+  color: var(--color-danger);
+}
+.lb-add {
+  background: none;
+  border: 1px dashed var(--color-border);
+  border-radius: 8px;
+  padding: 7px 12px;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  margin-top: 4px;
+  transition: border-color 0.15s, color 0.15s;
+}
+.lb-add:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+```
+
+- [ ] **Step 8: Handle the generic note template wrapper**
+
+Make sure the existing TipTap-first editor content is wrapped in `<template v-else>` (not `v-else-if="noteType === 'note'"`) so it serves as the default for any unrecognized type.
+
+The final structure in `.note-main` should be:
+
+```
+<template v-if="noteType === 'person'"> ... </template>
+<template v-else-if="noteType === 'place'"> ... </template>
+<template v-else-if="noteType === 'list'"> ... </template>
+<template v-else> ... existing TipTap editor ... </template>
+```
+
+- [ ] **Step 9: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add frontend/src/views/NoteEditorView.vue
+git commit -m "feat(editor): place form-first layout and list builder with Enter-to-add"
+```
+
+---
+
+### Task 4: Backend — new person/place fields in knowledge cards
+
+**Files:**
+- Modify: `src/fabledassistant/services/knowledge.py`
+- Modify: `frontend/src/views/KnowledgeView.vue`
+
+**Context:** The knowledge card display should show the new fields (birthday, organization for person; website, category for place). The backend `_note_to_item` needs to include them. The frontend card rendering needs to display the useful ones.
+
+- [ ] **Step 1: Update `_note_to_item` for person**
+
+In `src/fabledassistant/services/knowledge.py`, find:
+
+```python
+    if note.entity_type == "person":
+        item["relationship"] = meta.get("relationship", "")
+        item["email"] = meta.get("email", "")
+        item["phone"] = meta.get("phone", "")
+```
+
+Replace with:
+
+```python
+    if note.entity_type == "person":
+        item["relationship"] = meta.get("relationship", "")
+        item["email"] = meta.get("email", "")
+        item["phone"] = meta.get("phone", "")
+        item["birthday"] = meta.get("birthday", "")
+        item["organization"] = meta.get("organization", "")
+        item["address"] = meta.get("address", "")
+```
+
+- [ ] **Step 2: Update `_note_to_item` for place**
+
+Find:
+
+```python
+    elif note.entity_type == "place":
+        item["address"] = meta.get("address", "")
+        item["phone"] = meta.get("phone", "")
+        item["hours"] = meta.get("hours", "")
+```
+
+Replace with:
+
+```python
+    elif note.entity_type == "place":
+        item["address"] = meta.get("address", "")
+        item["phone"] = meta.get("phone", "")
+        item["hours"] = meta.get("hours", "")
+        item["website"] = meta.get("website", "")
+        item["category"] = meta.get("category", "")
+```
+
+- [ ] **Step 3: Update KnowledgeItem interface**
+
+In `frontend/src/views/KnowledgeView.vue`, find the `KnowledgeItem` interface and add the new fields:
+
+After `phone?: string;` add:
+```ts
+  birthday?: string;
+  organization?: string;
+```
+
+After `hours?: string;` add:
+```ts
+  website?: string;
+  category?: string;
+```
+
+- [ ] **Step 4: Update person card display**
+
+In the template, find the person card specifics:
+
+```html
+              <div v-if="item.note_type === 'person'" class="k-card-meta">
+                <span v-if="item.relationship" class="meta-chip">{{ item.relationship }}</span>
+                <span v-if="item.phone" class="meta-muted">{{ item.phone }}</span>
+              </div>
+```
+
+Replace with:
+
+```html
+              <div v-if="item.note_type === 'person'" class="k-card-meta">
+                <span v-if="item.relationship" class="meta-chip">{{ item.relationship }}</span>
+                <span v-if="item.organization" class="meta-muted">{{ item.organization }}</span>
+                <span v-if="item.phone" class="meta-muted">{{ item.phone }}</span>
+              </div>
+```
+
+- [ ] **Step 5: Update place card display**
+
+Find:
+
+```html
+              <div v-else-if="item.note_type === 'place'" class="k-card-meta">
+                <span v-if="item.address" class="meta-muted">{{ item.address }}</span>
+                <span v-if="item.hours" class="meta-muted">{{ item.hours }}</span>
+              </div>
+```
+
+Replace with:
+
+```html
+              <div v-else-if="item.note_type === 'place'" class="k-card-meta">
+                <span v-if="item.category" class="meta-chip">{{ item.category }}</span>
+                <span v-if="item.address" class="meta-muted">{{ item.address }}</span>
+                <span v-if="item.hours" class="meta-muted">{{ item.hours }}</span>
+              </div>
+```
+
+- [ ] **Step 6: Verify TypeScript compiles and backend syntax**
+
+```bash
+cd frontend && npx tsc --noEmit
+python -c "import ast; ast.parse(open('src/fabledassistant/services/knowledge.py').read()); print('OK')"
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/fabledassistant/services/knowledge.py frontend/src/views/KnowledgeView.vue
+git commit -m "feat(knowledge): show organization/birthday for person cards, category for place cards"
+```

From 317d8f25d0da2161dbc6562b8efd07e5ce5ae042 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:25:07 -0400
Subject: [PATCH 07/11] feat(editor): skip toolbar in tab order; auto-focus
 title; type-dependent placeholders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/MarkdownToolbar.vue |  1 +
 frontend/src/views/NoteEditorView.vue       | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MarkdownToolbar.vue b/frontend/src/components/MarkdownToolbar.vue
index e3350d5..23fe9b1 100644
--- a/frontend/src/components/MarkdownToolbar.vue
+++ b/frontend/src/components/MarkdownToolbar.vue
@@ -78,6 +78,7 @@ const groups = [
           :class="['md-btn', { active: btn.isActive() }]"
           :title="btn.title"
           type="button"
+          tabindex="-1"
           @mousedown.prevent="btn.command()"
         >
           <span class="btn-icon" v-html="ICONS[btn.id]" />
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index 95616a9..edf27b5 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -49,6 +49,15 @@ const noteId = computed(() =>
 );
 const isEditing = computed(() => noteId.value !== null);
 
+const titlePlaceholder = computed(() => {
+  switch (noteType.value) {
+    case 'person': return 'Name';
+    case 'place': return 'Place name';
+    case 'list': return 'List title';
+    default: return 'Title';
+  }
+});
+
 const renderedPreview = computed(() => renderMarkdown(body.value));
 
 // AI Assist — pass noteId for draft persistence
@@ -243,6 +252,9 @@ onMounted(async () => {
     // No draft — normal
   }
 
+  await nextTick();
+  titleRef.value?.focus();
+
   // Initial link suggestions
   fetchLinkSuggestions();
 });
@@ -357,7 +369,7 @@ onUnmounted(() => assist.clearSelection());
         ref="titleRef"
         v-model="title"
         type="text"
-        placeholder="Title"
+        :placeholder="titlePlaceholder"
         class="title-input"
         @input="markDirty"
         @keydown.ctrl.s.prevent="save"

From 64c19932a79fcd8d216cd7e3504f672f40dc60e2 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:27:22 -0400
Subject: [PATCH 08/11] feat(editor): person form-first layout with structured
 fields and collapsible notes

When note type is 'person', replace the main TipTap editor with a contact card form
(Relationship, Birthday, Email, Phone, Organization, Address). The TipTap editor moves
to a collapsible 'Notes' section below the form, auto-expanded when existing body content
is present. Person fields are removed from the sidebar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/NoteEditorView.vue | 190 +++++++++++++++++++-------
 1 file changed, 142 insertions(+), 48 deletions(-)

diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index edf27b5..862cbbc 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -38,6 +38,7 @@ const dirty = ref(false);
 const saving = ref(false);
 const showPreview = ref(false);
 const sidebarOpen = ref(true);
+const notesExpanded = ref(false);
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const titleRef = ref<HTMLInputElement | null>(null);
 const tiptapEditor = computed<Editor | null>(() => {
@@ -228,6 +229,7 @@ onMounted(async () => {
       milestoneId.value = store.currentNote.milestone_id ?? null;
       noteType.value = (store.currentNote.note_type as NoteType) || "note";
       Object.assign(entityMeta, store.currentNote.metadata || {});
+      notesExpanded.value = !!(store.currentNote.body || '').trim();
       savedTitle = title.value;
       savedBody = body.value;
       savedTags = [...tags.value];
@@ -382,48 +384,96 @@ onUnmounted(() => assist.clearSelection());
 
       <!-- ── Main column ────────────────────────────────────────── -->
       <div class="note-main" @keydown.ctrl.e.prevent="tiptapEditor?.commands.focus()">
-        <div class="body-tabs-row">
-          <div class="editor-tabs">
-            <button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
-            <button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
+        <!-- ── Person form ──────────────────────────────────────── -->
+        <template v-if="noteType === 'person'">
+          <div class="entity-form">
+            <div class="ef-field">
+              <label class="ef-label">Relationship</label>
+              <input class="ef-input" v-model="entityMeta.relationship" placeholder="e.g. Friend, Colleague, Family" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Birthday</label>
+              <input class="ef-input" type="date" v-model="entityMeta.birthday" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Email</label>
+              <input class="ef-input" type="email" v-model="entityMeta.email" placeholder="email@example.com" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Phone</label>
+              <input class="ef-input" type="tel" v-model="entityMeta.phone" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Organization</label>
+              <input class="ef-input" v-model="entityMeta.organization" placeholder="Company or organization" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Address</label>
+              <input class="ef-input" v-model="entityMeta.address" placeholder="Street, City, State" @input="markDirty" />
+            </div>
           </div>
-          <MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
-        </div>
-
-        <!-- Streaming preview -->
-        <template v-if="assist.state.value === 'streaming'">
-          <div class="stream-label">Generating...</div>
-          <div class="stream-preview prose" v-html="renderMarkdown(assist.streamingText.value)" />
-        </template>
-
-        <!-- Review: full-document diff -->
-        <template v-else-if="assist.state.value === 'review'">
-          <DiffView :diff="assist.diff.value" class="main-diff" />
-        </template>
-
-        <!-- Normal editor -->
-        <template v-else>
-          <Transition name="tab-fade" mode="out-in">
-            <div v-if="!showPreview" class="body-editor-wrap">
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
               <TiptapEditor
                 ref="editorRef"
                 :modelValue="body"
-                placeholder="Write your note in Markdown..."
+                placeholder="Additional notes, wikilinks, context..."
                 @update:modelValue="onBodyUpdate"
-                @selectionChange="onSelectionChange"
                 @escape="titleRef?.focus()"
               />
             </div>
-            <div
-              v-else
-              class="preview-pane prose"
-              v-html="renderedPreview"
-            />
-          </Transition>
+          </div>
         </template>
 
-        <!-- Error from assist -->
-        <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
+        <!-- ── Generic note editor ──────────────────────────────── -->
+        <template v-else>
+          <div class="body-tabs-row">
+            <div class="editor-tabs">
+              <button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
+              <button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
+            </div>
+            <MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
+          </div>
+
+          <!-- Streaming preview -->
+          <template v-if="assist.state.value === 'streaming'">
+            <div class="stream-label">Generating...</div>
+            <div class="stream-preview prose" v-html="renderMarkdown(assist.streamingText.value)" />
+          </template>
+
+          <!-- Review: full-document diff -->
+          <template v-else-if="assist.state.value === 'review'">
+            <DiffView :diff="assist.diff.value" class="main-diff" />
+          </template>
+
+          <!-- Normal editor -->
+          <template v-else>
+            <Transition name="tab-fade" mode="out-in">
+              <div v-if="!showPreview" class="body-editor-wrap">
+                <TiptapEditor
+                  ref="editorRef"
+                  :modelValue="body"
+                  placeholder="Write your note in Markdown..."
+                  @update:modelValue="onBodyUpdate"
+                  @selectionChange="onSelectionChange"
+                  @escape="titleRef?.focus()"
+                />
+              </div>
+              <div
+                v-else
+                class="preview-pane prose"
+                v-html="renderedPreview"
+              />
+            </Transition>
+          </template>
+
+          <!-- Error from assist -->
+          <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
+        </template>
       </div>
 
       <!-- ── Sidebar ──────────────────────────────────────────── -->
@@ -488,22 +538,6 @@ onUnmounted(() => assist.clearSelection());
             </select>
           </div>
 
-          <!-- Person metadata -->
-          <template v-if="noteType === 'person'">
-            <div class="sb-field">
-              <label class="sb-label">Relationship</label>
-              <input class="sb-input" v-model="entityMeta.relationship" placeholder="e.g. Friend, Colleague" @input="markDirty" />
-            </div>
-            <div class="sb-field">
-              <label class="sb-label">Email</label>
-              <input class="sb-input" v-model="entityMeta.email" type="email" placeholder="email@example.com" @input="markDirty" />
-            </div>
-            <div class="sb-field">
-              <label class="sb-label">Phone</label>
-              <input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
-            </div>
-          </template>
-
           <!-- Place metadata -->
           <template v-if="noteType === 'place'">
             <div class="sb-field">
@@ -831,6 +865,66 @@ onUnmounted(() => assist.clearSelection());
   letter-spacing: 0.05em;
 }
 
+/* ── Entity form (Person / Place) ───────────────────────── */
+.entity-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 0;
+}
+.ef-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ef-label {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.78rem;
+  color: var(--color-primary);
+}
+.ef-input {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.ef-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+.ef-input::placeholder {
+  color: var(--color-text-muted);
+}
+
+/* ── Notes section (collapsible TipTap) ─────────────────── */
+.notes-section {
+  margin-top: 16px;
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+}
+.notes-toggle {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.85rem;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.notes-toggle:hover {
+  color: var(--color-text);
+}
+.notes-editor-wrap {
+  margin-top: 8px;
+}
+
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
   .note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }

From f8f14eea0fe8ddaac72778c6f38338bed4e0a19a Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:30:26 -0400
Subject: [PATCH 09/11] feat(editor): place form-first layout and list builder
 with Enter-to-add

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/NoteEditorView.vue | 264 ++++++++++++++++++++++++--
 1 file changed, 245 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index 862cbbc..524f887 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -39,6 +39,80 @@ const saving = ref(false);
 const showPreview = ref(false);
 const sidebarOpen = ref(true);
 const notesExpanded = ref(false);
+
+// ── List builder ─────────────────────────────────────────────────────────────
+interface ListItem {
+  text: string;
+  checked: boolean;
+}
+const listItems = ref<ListItem[]>([]);
+const listItemRefs = ref<(HTMLInputElement | null)[]>([]);
+
+function parseListFromBody(bodyText: string): { items: ListItem[]; extra: string } {
+  const lines = bodyText.split('\n');
+  const items: ListItem[] = [];
+  const extraLines: string[] = [];
+  let pastList = false;
+  for (const line of lines) {
+    const stripped = line.trimStart();
+    if (!pastList && (stripped.startsWith('- [ ] ') || stripped.startsWith('- [x] ') || stripped.startsWith('- [X] '))) {
+      items.push({ text: stripped.slice(6), checked: !stripped.startsWith('- [ ] ') });
+    } else if (!pastList && stripped === '' && items.length > 0) {
+      pastList = true;
+    } else {
+      pastList = true;
+      extraLines.push(line);
+    }
+  }
+  return { items, extra: extraLines.join('\n').trim() };
+}
+
+function serializeListToBody(): string {
+  const listPart = listItems.value
+    .map(item => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+    .join('\n');
+  const extraPart = body.value.trim();
+  return extraPart ? `${listPart}\n\n${extraPart}` : listPart;
+}
+
+function addListItem(afterIndex?: number) {
+  const idx = afterIndex !== undefined ? afterIndex + 1 : listItems.value.length;
+  listItems.value.splice(idx, 0, { text: '', checked: false });
+  markDirty();
+  nextTick(() => {
+    listItemRefs.value[idx]?.focus();
+  });
+}
+
+function removeListItem(index: number) {
+  if (listItems.value.length <= 1) return;
+  listItems.value.splice(index, 1);
+  markDirty();
+  nextTick(() => {
+    const focusIdx = Math.max(0, index - 1);
+    listItemRefs.value[focusIdx]?.focus();
+  });
+}
+
+function onListItemKeydown(e: KeyboardEvent, index: number) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addListItem(index);
+  } else if (e.key === 'Backspace' && listItems.value[index].text === '') {
+    e.preventDefault();
+    removeListItem(index);
+  }
+}
+
+function onListItemInput(_index: number) {
+  markDirty();
+}
+
+function toggleListItemCheck(index: number) {
+  listItems.value[index].checked = !listItems.value[index].checked;
+  markDirty();
+}
+
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const titleRef = ref<HTMLInputElement | null>(null);
 const tiptapEditor = computed<Editor | null>(() => {
@@ -230,6 +304,12 @@ onMounted(async () => {
       noteType.value = (store.currentNote.note_type as NoteType) || "note";
       Object.assign(entityMeta, store.currentNote.metadata || {});
       notesExpanded.value = !!(store.currentNote.body || '').trim();
+      if (noteType.value === 'list') {
+        const parsed = parseListFromBody(body.value);
+        listItems.value = parsed.items.length > 0 ? parsed.items : [{ text: '', checked: false }];
+        body.value = parsed.extra;
+        notesExpanded.value = !!parsed.extra;
+      }
       savedTitle = title.value;
       savedBody = body.value;
       savedTags = [...tags.value];
@@ -244,6 +324,9 @@ onMounted(async () => {
     if (qt && ["note", "person", "place", "list"].includes(qt)) {
       noteType.value = qt as NoteType;
     }
+    if (noteType.value === 'list') {
+      listItems.value = [{ text: '', checked: false }];
+    }
   }
 
   // Restore pending draft if any
@@ -264,11 +347,12 @@ onMounted(async () => {
 async function save() {
   if (saving.value) return;
   saving.value = true;
+  const finalBody = noteType.value === 'list' ? serializeListToBody() : body.value;
   try {
     if (isEditing.value) {
       await store.updateNote(noteId.value!, {
         title: title.value,
-        body: body.value,
+        body: finalBody,
         tags: tags.value,
         project_id: projectId.value,
         milestone_id: milestoneId.value,
@@ -287,7 +371,7 @@ async function save() {
     } else {
       const note = await store.createNote({
         title: title.value,
-        body: body.value,
+        body: finalBody,
         tags: tags.value,
         project_id: projectId.value,
         milestone_id: milestoneId.value,
@@ -328,9 +412,10 @@ async function confirmDelete() {
 async function doAutoSave() {
   if (!isEditing.value || saving.value) return;
   saving.value = true;
+  const finalBody = noteType.value === 'list' ? serializeListToBody() : body.value;
   try {
     await store.updateNote(noteId.value!, {
-      title: title.value, body: body.value, tags: tags.value,
+      title: title.value, body: finalBody, tags: tags.value,
       project_id: projectId.value, milestone_id: milestoneId.value,
       note_type: noteType.value, metadata: { ...entityMeta },
     });
@@ -429,6 +514,91 @@ onUnmounted(() => assist.clearSelection());
           </div>
         </template>
 
+        <!-- ── Place form ───────────────────────────────────────── -->
+        <template v-else-if="noteType === 'place'">
+          <div class="entity-form">
+            <div class="ef-field">
+              <label class="ef-label">Address</label>
+              <input class="ef-input" v-model="entityMeta.address" placeholder="Street, City, State" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Phone</label>
+              <input class="ef-input" type="tel" v-model="entityMeta.phone" placeholder="+1 555 000 0000" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Hours</label>
+              <input class="ef-input" v-model="entityMeta.hours" placeholder="e.g. Mon–Fri 9am–5pm" @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Website</label>
+              <input class="ef-input" type="url" v-model="entityMeta.website" placeholder="https://..." @input="markDirty" />
+            </div>
+            <div class="ef-field">
+              <label class="ef-label">Category</label>
+              <input class="ef-input" v-model="entityMeta.category" placeholder="e.g. Restaurant, Office, Doctor" @input="markDirty" />
+            </div>
+          </div>
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+              <TiptapEditor
+                ref="editorRef"
+                :modelValue="body"
+                placeholder="Additional notes, wikilinks, context..."
+                @update:modelValue="onBodyUpdate"
+                @escape="titleRef?.focus()"
+              />
+            </div>
+          </div>
+        </template>
+
+        <!-- ── List builder ─────────────────────────────────────── -->
+        <template v-else-if="noteType === 'list'">
+          <div class="list-builder">
+            <div
+              v-for="(item, idx) in listItems"
+              :key="idx"
+              class="lb-item"
+            >
+              <input
+                type="checkbox"
+                :checked="item.checked"
+                @change="toggleListItemCheck(idx)"
+                class="lb-check"
+                tabindex="-1"
+              />
+              <input
+                :ref="(el) => { listItemRefs[idx] = el as HTMLInputElement | null }"
+                v-model="item.text"
+                class="lb-text"
+                placeholder="List item..."
+                @keydown="onListItemKeydown($event, idx)"
+                @input="onListItemInput(idx)"
+              />
+              <button class="lb-delete" tabindex="-1" @click="removeListItem(idx)" title="Remove item">&times;</button>
+            </div>
+            <button class="lb-add" @click="addListItem()">+ Add item</button>
+          </div>
+          <div class="notes-section">
+            <button class="notes-toggle" @click="notesExpanded = !notesExpanded">
+              {{ notesExpanded ? '▾' : '▸' }} Notes
+            </button>
+            <div v-if="notesExpanded" class="notes-editor-wrap">
+              <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+              <TiptapEditor
+                ref="editorRef"
+                :modelValue="body"
+                placeholder="Additional notes, context..."
+                @update:modelValue="onBodyUpdate"
+                @escape="titleRef?.focus()"
+              />
+            </div>
+          </div>
+        </template>
+
         <!-- ── Generic note editor ──────────────────────────────── -->
         <template v-else>
           <div class="body-tabs-row">
@@ -538,22 +708,6 @@ onUnmounted(() => assist.clearSelection());
             </select>
           </div>
 
-          <!-- Place metadata -->
-          <template v-if="noteType === 'place'">
-            <div class="sb-field">
-              <label class="sb-label">Address</label>
-              <input class="sb-input" v-model="entityMeta.address" placeholder="Street, City" @input="markDirty" />
-            </div>
-            <div class="sb-field">
-              <label class="sb-label">Phone</label>
-              <input class="sb-input" v-model="entityMeta.phone" type="tel" placeholder="+1 555 000 0000" @input="markDirty" />
-            </div>
-            <div class="sb-field">
-              <label class="sb-label">Hours</label>
-              <input class="sb-input" v-model="entityMeta.hours" placeholder="e.g. Mon–Fri 9–5" @input="markDirty" />
-            </div>
-          </template>
-
           <!-- Link Suggestions -->
           <div v-if="linkSuggestions.length > 0" class="sb-field link-suggest-field">
             <div class="sb-label-row">
@@ -925,6 +1079,78 @@ onUnmounted(() => assist.clearSelection());
   margin-top: 8px;
 }
 
+/* ── List builder ───────────────────────────────────────── */
+.list-builder {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 0;
+}
+.lb-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.lb-check {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+.lb-text {
+  flex: 1;
+  padding: 7px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.lb-text:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring);
+}
+.lb-text::placeholder {
+  color: var(--color-text-muted);
+}
+.lb-delete {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s;
+}
+.lb-item:hover .lb-delete,
+.lb-text:focus ~ .lb-delete {
+  opacity: 1;
+}
+.lb-delete:hover {
+  color: var(--color-danger);
+}
+.lb-add {
+  background: none;
+  border: 1px dashed var(--color-border);
+  border-radius: 8px;
+  padding: 7px 12px;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  margin-top: 4px;
+  transition: border-color 0.15s, color 0.15s;
+}
+.lb-add:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
   .note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }

From f2debd8a5b0b55774694cc0f62539b09dc015bac Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:32:15 -0400
Subject: [PATCH 10/11] feat(knowledge): show organization for person cards,
 category for place cards

Exposes birthday, organization, address (person) and website, category (place)
from entity_meta in the knowledge API response; updates KnowledgeView cards
to display organization and category as visible meta chips/text.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/KnowledgeView.vue      | 6 ++++++
 src/fabledassistant/services/knowledge.py | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 203faad..87bf85d 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -27,8 +27,12 @@ interface KnowledgeItem {
   relationship?: string;
   email?: string;
   phone?: string;
+  birthday?: string;
+  organization?: string;
   address?: string;
   hours?: string;
+  website?: string;
+  category?: string;
   item_count?: number;
   checked_count?: number;
   list_items?: { text: string; checked: boolean }[];
@@ -544,11 +548,13 @@ onUnmounted(() => {
               <!-- Person specifics -->
               <div v-if="item.note_type === 'person'" class="k-card-meta">
                 <span v-if="item.relationship" class="meta-chip">{{ item.relationship }}</span>
+                <span v-if="item.organization" class="meta-muted">{{ item.organization }}</span>
                 <span v-if="item.phone" class="meta-muted">{{ item.phone }}</span>
               </div>
 
               <!-- Place specifics -->
               <div v-else-if="item.note_type === 'place'" class="k-card-meta">
+                <span v-if="item.category" class="meta-chip">{{ item.category }}</span>
                 <span v-if="item.address" class="meta-muted">{{ item.address }}</span>
                 <span v-if="item.hours" class="meta-muted">{{ item.hours }}</span>
               </div>
diff --git a/src/fabledassistant/services/knowledge.py b/src/fabledassistant/services/knowledge.py
index 800f722..741a919 100644
--- a/src/fabledassistant/services/knowledge.py
+++ b/src/fabledassistant/services/knowledge.py
@@ -29,10 +29,15 @@ def _note_to_item(note: Note) -> dict:
         item["relationship"] = meta.get("relationship", "")
         item["email"] = meta.get("email", "")
         item["phone"] = meta.get("phone", "")
+        item["birthday"] = meta.get("birthday", "")
+        item["organization"] = meta.get("organization", "")
+        item["address"] = meta.get("address", "")
     elif note.entity_type == "place":
         item["address"] = meta.get("address", "")
         item["phone"] = meta.get("phone", "")
         item["hours"] = meta.get("hours", "")
+        item["website"] = meta.get("website", "")
+        item["category"] = meta.get("category", "")
     elif note.entity_type == "list":
         # Parse markdown task list syntax into structured items
         body = note.body or ""

From f9c68029395947e57aac76ab2d8a20025dd6315b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 13:47:15 -0400
Subject: [PATCH 11/11] feat(calendar): linked start/end times, 1h default
 duration, smart rounding, past event hint

---
 frontend/src/components/EventSlideOver.vue | 111 +++++++++++++++++++--
 1 file changed, 100 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/EventSlideOver.vue b/frontend/src/components/EventSlideOver.vue
index 50bf92b..9a190c0 100644
--- a/frontend/src/components/EventSlideOver.vue
+++ b/frontend/src/components/EventSlideOver.vue
@@ -64,36 +64,114 @@ function toIso(date: string, time: string): string {
   return `${date}T${time}:00${sign}${h}:${min}`;
 }
 
+// ── Time helpers ──────────────────────────────────────────────────────────────
+
+/** Round up to next 30-minute boundary */
+function nextRoundedTime(): string {
+  const now = new Date();
+  let h = now.getHours();
+  let m = now.getMinutes();
+  if (m <= 30) { m = 30; }
+  else { m = 0; h = (h + 1) % 24; }
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+
+/** Add hours to a time string (HH:MM), returns HH:MM */
+function addHours(time: string, hours: number): string {
+  const [h, m] = time.split(":").map(Number);
+  const totalMin = h * 60 + m + hours * 60;
+  const nh = Math.floor(totalMin / 60) % 24;
+  const nm = totalMin % 60;
+  return `${String(nh).padStart(2, "0")}:${String(nm).padStart(2, "0")}`;
+}
+
+/** Duration in minutes between two time strings */
+function durationMin(start: string, end: string): number {
+  const [sh, sm] = start.split(":").map(Number);
+  const [eh, em] = end.split(":").map(Number);
+  return (eh * 60 + em) - (sh * 60 + sm);
+}
+
+/** True if a date+time is in the past */
+const isPastEvent = computed(() => {
+  if (allDay.value || !startDate.value || !startTime.value) return false;
+  const dt = new Date(`${startDate.value}T${startTime.value}:00`);
+  return dt.getTime() < Date.now();
+});
+
+// Track duration so end moves with start
+let _lastDurationMin = 60;
+
 function resetForm() {
   if (props.event) {
     title.value = props.event.title;
     allDay.value = props.event.all_day;
-    // All-day events: use UTC date string directly to avoid timezone shifting
-    // (UTC midnight parsed through new Date() becomes the previous day in UTC-X zones)
     startDate.value = props.event.all_day ? props.event.start_dt.slice(0, 10) : dateFromIso(props.event.start_dt);
     startTime.value = props.event.all_day ? "" : timeFromIso(props.event.start_dt);
-    endDate.value = props.event.end_dt ? (props.event.all_day ? props.event.end_dt.slice(0, 10) : dateFromIso(props.event.end_dt)) : "";
-    endTime.value = props.event.end_dt && !props.event.all_day ? timeFromIso(props.event.end_dt) : "";
+    endDate.value = props.event.end_dt ? (props.event.all_day ? props.event.end_dt.slice(0, 10) : dateFromIso(props.event.end_dt)) : startDate.value;
+    endTime.value = props.event.end_dt && !props.event.all_day ? timeFromIso(props.event.end_dt) : addHours(startTime.value || "09:00", 1);
     description.value = props.event.description || "";
     location.value = props.event.location || "";
     color.value = props.event.color || "";
     projectId.value = props.event.project_id;
+    _lastDurationMin = !allDay.value && startTime.value && endTime.value ? durationMin(startTime.value, endTime.value) : 60;
+    if (_lastDurationMin <= 0) _lastDurationMin = 60;
   } else {
     title.value = "";
     allDay.value = false;
     const base = props.initialDate ? dateFromIso(props.initialDate) : new Date().toISOString().slice(0, 10);
+    const roundedStart = nextRoundedTime();
     startDate.value = base;
-    startTime.value = "09:00";
+    startTime.value = roundedStart;
     endDate.value = base;
-    endTime.value = "10:00";
+    endTime.value = addHours(roundedStart, 1);
     description.value = "";
     location.value = "";
     color.value = "";
     projectId.value = null;
+    _lastDurationMin = 60;
   }
   deleteConfirm.value = false;
 }
 
+// When start time changes, move end time to preserve duration
+watch(startTime, (newStart) => {
+  if (allDay.value || !newStart) return;
+  endTime.value = addHours(newStart, _lastDurationMin / 60);
+});
+
+// When start date changes, move end date to match (preserve same-day or multi-day gap)
+watch(startDate, (newDate) => {
+  if (!newDate) return;
+  endDate.value = newDate;
+});
+
+// When end time changes manually, update the tracked duration (but guard against end < start)
+watch(endTime, (newEnd) => {
+  if (allDay.value || !newEnd || !startTime.value) return;
+  const dur = durationMin(startTime.value, newEnd);
+  if (dur <= 0) {
+    // Snap back to start + 1 hour
+    endTime.value = addHours(startTime.value, 1);
+    _lastDurationMin = 60;
+  } else {
+    _lastDurationMin = dur;
+  }
+});
+
+// All-day toggle: clear/restore times
+watch(allDay, (isAllDay) => {
+  if (isAllDay) {
+    startTime.value = "";
+    endTime.value = "";
+  } else {
+    const rounded = nextRoundedTime();
+    startTime.value = rounded;
+    endTime.value = addHours(rounded, 1);
+    _lastDurationMin = 60;
+  }
+});
+
 watch(() => props.event, resetForm, { immediate: true });
 watch(() => props.initialDate, resetForm);
 
@@ -113,6 +191,10 @@ async function save() {
     toast.show("Start date is required", "error");
     return;
   }
+  if (!allDay.value && !startTime.value) {
+    toast.show("Start time is required", "error");
+    return;
+  }
 
   const start_dt = allDay.value ? `${startDate.value}T00:00:00` : toIso(startDate.value, startTime.value);
   const end_dt = endDate.value
@@ -199,18 +281,19 @@ async function doDelete() {
 
           <!-- Start -->
           <div class="so-field">
-            <label class="so-label">Start</label>
+            <label class="so-label">Start <span class="required">*</span></label>
             <div class="dt-row">
-              <input v-model="startDate" type="date" class="so-input dt-date" />
-              <input v-if="!allDay" v-model="startTime" type="time" class="so-input dt-time" />
+              <input v-model="startDate" type="date" class="so-input dt-date" required />
+              <input v-if="!allDay" v-model="startTime" type="time" class="so-input dt-time" required />
             </div>
+            <p v-if="isPastEvent" class="so-past-hint">This event is in the past</p>
           </div>
 
           <!-- End -->
           <div class="so-field">
-            <label class="so-label">End <span class="so-hint">(optional)</span></label>
+            <label class="so-label">End</label>
             <div class="dt-row">
-              <input v-model="endDate" type="date" class="so-input dt-date" />
+              <input v-model="endDate" type="date" class="so-input dt-date" :min="startDate" />
               <input v-if="!allDay" v-model="endTime" type="time" class="so-input dt-time" />
             </div>
           </div>
@@ -364,6 +447,12 @@ async function doDelete() {
 .dt-row { display: flex; gap: 0.5rem; }
 .dt-date { flex: 1; }
 .dt-time { width: 7.5rem; flex-shrink: 0; }
+.so-past-hint {
+  margin: 4px 0 0;
+  font-size: 0.75rem;
+  color: var(--color-accent-warm, #d4a017);
+  font-style: italic;
+}
 
 .toggle-btn {
   background: var(--color-input-bg, #111113);