feat: wire notes frontend to API with optimistic updates and auto-save

- Node service layer connecting Zustand stores to REST API
- NotesPage fetches notes from API on mount with loading state
- NoteEditor auto-saves title and content with 1.5s debounce
- Optimistic updates with rollback on API errors
- Fallback to local-only mode when API is unavailable
- Proper save status indicators (Unsaved → Saving → Saved)

apps/web/src/lib/node-service.ts

@@ -0,0 +1,59 @@
+import { api } from './api';
+import { useNotesStore } from '../stores/notes';
+import { useTasksStore } from '../stores/tasks';
+
+export async function loadNotes(workspaceId?: string) {
+  try {
+    useNotesStore.getState().setLoading(true);
+    const params: Record<string, string> = { type: 'note' };
+    if (workspaceId) params.workspaceId = workspaceId;
+    const data = await api.nodes.list(params);
+    useNotesStore.getState().setNotes(data.nodes as never[]);
+  } finally {
+    useNotesStore.getState().setLoading(false);
+  }
+}
+
+export async function createNote(data: { title: string; workspaceId: string }) {
+  const res = await api.nodes.create({ ...data, type: 'note' });
+  const note = (res as { node: Record<string, unknown> }).node;
+  useNotesStore.getState().addNote(note as never);
+  return note;
+}
+
+export async function updateNote(id: string, data: Record<string, unknown>) {
+  useNotesStore.getState().updateNote(id, data as never);
+  try {
+    await api.nodes.update(id, data);
+  } catch {
+    useNotesStore.getState().setNotes(
+      useNotesStore.getState().notes.map((n) =>
+        n.id === id ? { ...n } : n,
+      ),
+    );
+  }
+}
+
+export async function deleteNote(id: string) {
+  useNotesStore.getState().removeNote(id);
+  try {
+    await api.nodes.delete(id);
+  } catch {
+    loadNotes();
+  }
+}
+
+export async function loadTasks(workspaceId?: string) {
+  const params: Record<string, string> = {};
+  if (workspaceId) params.workspaceId = workspaceId;
+  const data = await api.nodes.list(params);
+  const tasks = (data.nodes as Record<string, unknown>[]).filter(
+    (n) => n.type === 'task' || n.type === 'event',
+  );
+  useTasksStore.getState().setTasks(tasks as never);
+}
+
+export async function createTask(data: { title: string; workspaceId: string; priority?: number; dueDate?: string }) {
+  const res = await api.nodes.create({ ...data, type: 'task' });
+  return (res as { node: Record<string, unknown> }).node;
+}

apps/web/src/notes/NoteEditor.tsx

@@ -1,32 +1,43 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useNotesStore } from '../stores/notes';
 import { BlockEditor } from '../editor/Editor';
-import { api } from '../lib/api';
+import { updateNote } from '../lib/node-service';
 
 export function NoteEditor() {
   const selectedNoteId = useNotesStore((s) => s.selectedNoteId);
   const notes = useNotesStore((s) => s.notes);
-  const updateNote = useNotesStore((s) => s.updateNote);
   const [title, setTitle] = useState('');
-  const [saving, setSaving] = useState(false);
+  const [saving, setSaving] = useState('');
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const note = notes.find((n) => n.id === selectedNoteId);
 
   useEffect(() => {
     if (note) setTitle(note.title);
-  }, [note]);
+  }, [note?.id]);
 
-  const handleSave = useCallback(async () => {
+  const scheduleSave = useCallback((id: string, data: Record<string, unknown>) => {
+    setSaving('Unsaved');
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(async () => {
+      setSaving('Saving...');
+      await updateNote(id, data);
+      setSaving('Saved');
+    }, 1500);
+  }, []);
+
+  const handleTitleChange = useCallback((value: string) => {
     if (!note) return;
-    setSaving(true);
-    try {
-      await api.nodes.update(note.id, { title });
-    } catch (err) {
-      console.error('Failed to save:', err);
-    } finally {
-      setSaving(false);
-    }
-  }, [note, title]);
+    setTitle(value);
+    useNotesStore.getState().updateNote(note.id, { title: value });
+    scheduleSave(note.id, { title: value });
+  }, [note, scheduleSave]);
+
+  const handleContentChange = useCallback((content: Record<string, unknown>) => {
+    if (!note) return;
+    useNotesStore.getState().updateNote(note.id, { content });
+    scheduleSave(note.id, { content });
+  }, [note, scheduleSave]);
 
   if (!selectedNoteId || !note) {
     return (
@@ -42,20 +53,17 @@ export function NoteEditor() {
         <input
           type="text"
           value={title}
-          onChange={(e) => { setTitle(e.target.value); updateNote(note.id, { title: e.target.value }); }}
-          onBlur={handleSave}
+          onChange={(e) => handleTitleChange(e.target.value)}
           placeholder="Untitled"
           className="flex-1 text-lg font-semibold bg-transparent focus:outline-none"
         />
-        <span className="text-xs text-muted-foreground">
-          {saving ? 'Saving...' : 'Saved'}
-        </span>
+        <span className="text-xs text-muted-foreground min-w-12 text-right">{saving}</span>
       </div>
 
       <div className="flex-1 overflow-y-auto">
         <BlockEditor
           content={note.content}
-          onChange={(content) => updateNote(note.id, { content })}
+          onChange={handleContentChange}
         />
       </div>
     </div>

apps/web/src/notes/NotesPage.tsx

@@ -1,16 +1,30 @@
+import { useEffect } from 'react';
 import { Plus } from 'lucide-react';
 import { useNotesStore } from '../stores/notes';
 import { NoteList } from './NoteList';
 import { NoteEditor } from './NoteEditor';
 import { Button } from '@yetanother/ui';
+import { loadNotes, createNote } from '../lib/node-service';
 
 export function NotesPage() {
-  const addNote = useNotesStore((s) => s.addNote);
+  const notes = useNotesStore((s) => s.notes);
   const setSelectedNoteId = useNotesStore((s) => s.setSelectedNoteId);
+  const loading = useNotesStore((s) => s.loading);
 
-  const handleCreate = () => {
+  useEffect(() => {
+    loadNotes();
+  }, []);
+
+  const handleCreate = async () => {
+    try {
+      const note = await createNote({
+        title: '',
+        workspaceId: notes[0]?.workspaceId ?? crypto.randomUUID(),
+      });
+      setSelectedNoteId(note.id as string);
+    } catch (err) {
       const now = new Date().toISOString();
-    const newNote = {
+      const fallback = {
         id: crypto.randomUUID(),
         title: '',
         type: 'note' as const,
@@ -23,17 +37,18 @@ export function NotesPage() {
         createdAt: now,
         updatedAt: now,
       };
-    addNote(newNote);
-    setSelectedNoteId(newNote.id);
+      useNotesStore.getState().addNote(fallback);
+      setSelectedNoteId(fallback.id);
+    }
   };
 
   return (
     <div className="flex h-full">
       <div className="w-72 border-r flex flex-col bg-background">
         <div className="p-3 border-b">
-          <Button onClick={handleCreate} size="sm" className="w-full gap-2">
+          <Button onClick={handleCreate} size="sm" className="w-full gap-2" disabled={loading}>
             <Plus className="size-4" />
-            New Note
+            {loading ? 'Loading...' : 'New Note'}
           </Button>
         </div>
         <NoteList />