Implement keyboard shortcuts and enrich note/task viewer views

Keyboard shortcuts (App.vue):
- g+h/n/t/p/c: navigate to home/notes/tasks/projects/chat
- n / t: new note / new task (when not in an input field)
- Escape: go home (when not typing)
- Shortcuts panel updated to document all working shortcuts

NoteViewerView:
- Context breadcrumb: parent note link (↑), project badge, milestone badge
- Fetches project and parent note titles in parallel on load
- Back button label improved to "← Notes"

TaskViewerView:
- Context breadcrumb: parent task link (uses parent_title from API), project badge, milestone badge
- Sub-tasks section with inline progress bar and status dots (clickable to advance)
- Sub-tasks loaded from /api/notes?parent_id=X&type=task
- Note type extended with optional parent_title field

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/NoteViewerView.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useNotesStore } from "@/stores/notes";
 import { renderMarkdown } from "@/utils/markdown";
 import { relativeTime } from "@/composables/useRelativeTime";
-import { apiPost } from "@/api/client";
+import { apiPost, apiGet } from "@/api/client";
 import type { Note } from "@/types/note";
 import TagPill from "@/components/TagPill.vue";
 import TableOfContents from "@/components/TableOfContents.vue";
@@ -16,8 +16,44 @@ const bodyEl = ref<HTMLElement | null>(null);
 const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
 const converting = ref(false);
 
+// Context enrichment
+const projectTitle = ref<string | null>(null);
+const milestoneName = ref<string | null>(null);
+const parentNoteTitle = ref<string | null>(null);
+
 const noteId = computed(() => Number(route.params.id));
 
+async function loadContext(note: Note) {
+  projectTitle.value = null;
+  milestoneName.value = null;
+  parentNoteTitle.value = null;
+
+  const promises: Promise<void>[] = [];
+
+  if (note.project_id) {
+    promises.push(
+      apiGet<any>(`/api/projects/${note.project_id}`).then((data) => {
+        projectTitle.value = data.title ?? null;
+        if (note.milestone_id && data.summary?.milestone_summary) {
+          const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
+            .find((m) => m.id === note.milestone_id);
+          if (ms) milestoneName.value = ms.title;
+        }
+      }).catch(() => {})
+    );
+  }
+
+  if (note.parent_id) {
+    promises.push(
+      apiGet<Note>(`/api/notes/${note.parent_id}`).then((parent) => {
+        parentNoteTitle.value = parent.title || "Untitled";
+      }).catch(() => {})
+    );
+  }
+
+  await Promise.all(promises);
+}
+
 async function loadNote(id: number) {
   backlinks.value = [];
   await store.fetchNote(id);
@@ -28,11 +64,11 @@ async function loadNote(id: number) {
     return;
   }
 
-  try {
-    backlinks.value = await store.fetchBacklinks(id);
-  } catch {
-    backlinks.value = [];
-  }
+  const [bl] = await Promise.allSettled([
+    store.fetchBacklinks(id),
+    loadContext(store.currentNote!),
+  ]);
+  if (bl.status === "fulfilled") backlinks.value = bl.value;
 }
 
 onMounted(() => loadNote(noteId.value));
@@ -106,7 +142,7 @@ async function convertToTask() {
       <p v-if="store.loading">Loading...</p>
       <template v-else-if="store.currentNote">
         <div class="toolbar">
-          <router-link to="/notes" class="btn-back">Back</router-link>
+          <router-link to="/notes" class="btn-back">← Notes</router-link>
           <router-link
             :to="`/notes/${store.currentNote.id}/edit`"
             class="btn-edit"
@@ -122,6 +158,31 @@ async function convertToTask() {
             {{ converting ? "Converting..." : "Convert to Task" }}
           </button>
         </div>
+
+        <!-- Breadcrumb: parent → project → milestone -->
+        <div
+          v-if="store.currentNote.parent_id || store.currentNote.project_id"
+          class="context-bar"
+        >
+          <router-link
+            v-if="store.currentNote.parent_id"
+            :to="`/notes/${store.currentNote.parent_id}`"
+            class="ctx-crumb ctx-crumb-parent"
+          >
+            ↑ {{ parentNoteTitle || "Parent note" }}
+          </router-link>
+          <router-link
+            v-if="store.currentNote.project_id && projectTitle"
+            :to="`/projects/${store.currentNote.project_id}`"
+            class="ctx-crumb ctx-crumb-project"
+          >
+            {{ projectTitle }}
+          </router-link>
+          <span v-if="milestoneName" class="ctx-crumb ctx-crumb-milestone">
+            {{ milestoneName }}
+          </span>
+        </div>
+
         <h1>{{ store.currentNote.title || "Untitled" }}</h1>
         <p class="meta">
           Updated {{ relativeTime(store.currentNote.updated_at) }}
@@ -193,7 +254,7 @@ async function convertToTask() {
 .toolbar {
   display: flex;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 .btn-back,
 .btn-edit {
@@ -232,6 +293,49 @@ async function convertToTask() {
   opacity: 0.6;
   cursor: default;
 }
+
+/* Context breadcrumb */
+.context-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.6rem;
+}
+.ctx-crumb {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8rem;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.ctx-crumb-parent {
+  color: var(--color-text-muted);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  text-decoration: none;
+}
+.ctx-crumb-parent:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.ctx-crumb-project {
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  text-decoration: none;
+  font-weight: 500;
+}
+.ctx-crumb-project:hover {
+  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+}
+.ctx-crumb-milestone {
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+}
+
 .meta {
   font-size: 0.85rem;
   color: var(--color-text-muted);