m4: per-view error states (board / search / graph / reminders)

Each data view now catches a failed load and shows an explicit error message
with a Retry button, instead of falling through to a misleading empty state.
Pairs with the global error toast: the toast says something failed, the view
says which and offers a retry.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/views/BoardView.vue

@@ -14,6 +14,7 @@ const router = useRouter();
 
 const editing = ref<Note | null>(null);
 const quickAdd = ref<InstanceType<typeof QuickAdd> | null>(null);
+const loadError = ref("");
 
 // The global `c` shortcut bumps composeTick; reopen the composer when we're
 // already on the board (a fresh navigation autofocuses it via the prop).
@@ -118,7 +119,12 @@ const emptyState = computed(() => {
 });
 
 async function reload() {
-  await notes.load(currentView.value, currentLabel.value);
+  loadError.value = "";
+  try {
+    await notes.load(currentView.value, currentLabel.value);
+  } catch (e) {
+    loadError.value = (e as { error?: string }).error ?? "Couldn't load your notes.";
+  }
 }
 
 onMounted(() => {
@@ -169,6 +175,18 @@ async function onDrop(target: Note) {
 
     <div v-if="notes.loading" class="py-24 text-center text-sm text-neutral-400">Loading…</div>
 
+    <div v-else-if="loadError" class="py-24 text-center">
+      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't load your notes</h2>
+      <p class="mt-1 text-sm text-neutral-400">{{ loadError }}</p>
+      <button
+        type="button"
+        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
+        @click="reload"
+      >
+        Retry
+      </button>
+    </div>
+
     <div v-else-if="notes.items.length === 0" class="py-24 text-center">
       <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">{{ emptyState.title }}</h2>
       <p class="mt-1 text-sm text-neutral-400">{{ emptyState.subtitle }}</p>

frontend/src/views/GraphView.vue

@@ -26,6 +26,7 @@ const notes = useNotesStore();
 const allNodes = ref<GNode[]>([]);
 const edges = ref<GEdge[]>([]);
 const loading = ref(true);
+const error = ref("");
 const editing = ref<Note | null>(null);
 const showAll = ref(false);
 
@@ -73,6 +74,7 @@ function fill(color: string): string {
 
 async function loadGraph() {
   loading.value = true;
+  error.value = "";
   try {
     const res = await api.get<{ nodes: { id: string; title: string; color: string }[]; edges: GEdge[] }>(
       "/api/graph",
@@ -93,6 +95,10 @@ async function loadGraph() {
       };
     });
     edges.value = res.edges;
+  } catch (e) {
+    error.value = (e as { error?: string }).error ?? "Couldn't load the graph.";
+    allNodes.value = [];
+    edges.value = [];
   } finally {
     loading.value = false;
   }
@@ -289,6 +295,18 @@ onBeforeUnmount(() => {
 
     <div v-if="loading" class="py-24 text-center text-sm text-neutral-400">Loading graph…</div>
 
+    <div v-else-if="error" class="py-24 text-center">
+      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't load the graph</h2>
+      <p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
+      <button
+        type="button"
+        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
+        @click="loadGraph"
+      >
+        Retry
+      </button>
+    </div>
+
     <div v-else-if="allNodes.length === 0" class="py-24 text-center">
       <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No notes yet</h2>
       <p class="mt-1 text-sm text-neutral-400">

frontend/src/views/RemindersView.vue

@@ -8,13 +8,18 @@ import NoteEditor from "../components/NoteEditor.vue";
 const notes = useNotesStore();
 const items = ref<Note[]>([]);
 const loading = ref(true);
+const error = ref("");
 const editing = ref<Note | null>(null);
 
 async function load() {
   loading.value = true;
+  error.value = "";
   try {
     const res = await api.get<{ notes: Note[] }>("/api/notes/reminders");
     items.value = res.notes;
+  } catch (e) {
+    error.value = (e as { error?: string }).error ?? "Couldn't load reminders.";
+    items.value = [];
   } finally {
     loading.value = false;
   }
@@ -41,6 +46,18 @@ onMounted(load);
 
     <div v-if="loading" class="py-24 text-center text-sm text-neutral-400">Loading…</div>
 
+    <div v-else-if="error" class="py-24 text-center">
+      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't load reminders</h2>
+      <p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
+      <button
+        type="button"
+        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
+        @click="load"
+      >
+        Retry
+      </button>
+    </div>
+
     <div v-else-if="items.length === 0" class="py-24 text-center">
       <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No reminders</h2>
       <p class="mt-1 text-sm text-neutral-400">Set a reminder on a note (in its editor) to see it here.</p>

frontend/src/views/SearchView.vue

@@ -11,6 +11,7 @@ const notes = useNotesStore();
 
 const results = ref<Note[]>([]);
 const loading = ref(false);
+const error = ref("");
 const editing = ref<Note | null>(null);
 
 const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));
@@ -22,9 +23,13 @@ async function run() {
     return;
   }
   loading.value = true;
+  error.value = "";
   try {
     const res = await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`);
     results.value = res.notes;
+  } catch (e) {
+    error.value = (e as { error?: string }).error ?? "Search failed.";
+    results.value = [];
   } finally {
     loading.value = false;
   }
@@ -61,6 +66,18 @@ async function onNavigate(id: string) {
 
     <div v-if="loading" class="py-20 text-center text-sm text-neutral-400">Searching…</div>
 
+    <div v-else-if="error" class="py-20 text-center">
+      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't search</h2>
+      <p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
+      <button
+        type="button"
+        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
+        @click="run"
+      >
+        Retry
+      </button>
+    </div>
+
     <div v-else-if="query && results.length === 0" class="py-20 text-center">
       <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No matches</h2>
       <p class="mt-1 text-sm text-neutral-400">Nothing found for "{{ query }}".</p>