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/TaskViewerView.vue

@@ -5,7 +5,7 @@ import { useTasksStore } from "@/stores/tasks";
 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 type { TaskStatus } from "@/types/task";
 import StatusBadge from "@/components/StatusBadge.vue";
@@ -20,16 +20,76 @@ const notesStore = useNotesStore();
 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 subTasks = ref<Note[]>([]);
+
 const taskId = computed(() => Number(route.params.id));
 
+const statusCycle: Record<TaskStatus, TaskStatus> = {
+  todo: "in_progress",
+  in_progress: "done",
+  done: "todo",
+};
+
+const statusDotClass: Record<TaskStatus, string> = {
+  todo: "dot-todo",
+  in_progress: "dot-in-progress",
+  done: "dot-done",
+};
+
+function cycleSubTaskStatus(subTask: Note) {
+  if (!subTask.status) return;
+  const next = statusCycle[subTask.status as TaskStatus];
+  store.patchStatus(subTask.id, next).then(() => {
+    const idx = subTasks.value.findIndex((t) => t.id === subTask.id);
+    if (idx !== -1) subTasks.value[idx] = { ...subTasks.value[idx], status: next };
+  });
+}
+
+async function loadContext(task: Note) {
+  projectTitle.value = null;
+  milestoneName.value = null;
+  subTasks.value = [];
+
+  const promises: Promise<void>[] = [];
+
+  if (task.project_id) {
+    promises.push(
+      apiGet<any>(`/api/projects/${task.project_id}`).then((data) => {
+        projectTitle.value = data.title ?? null;
+        if (task.milestone_id && data.summary?.milestone_summary) {
+          const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
+            .find((m) => m.id === task.milestone_id);
+          if (ms) milestoneName.value = ms.title;
+        }
+      }).catch(() => {})
+    );
+  }
+
+  // Load sub-tasks via the notes endpoint with parent_id filter
+  promises.push(
+    apiGet<{ notes: Note[]; total: number }>(
+      `/api/notes?parent_id=${task.id}&type=task&sort=created_at&order=asc&limit=50`
+    ).then((data) => {
+      subTasks.value = data.notes;
+    }).catch(() => {})
+  );
+
+  await Promise.all(promises);
+}
+
 async function loadTask(id: number) {
   backlinks.value = [];
   await store.fetchTask(id);
-  try {
-    backlinks.value = await notesStore.fetchBacklinks(id);
-  } catch {
-    backlinks.value = [];
-  }
+  if (!store.currentTask) return;
+
+  const [bl] = await Promise.allSettled([
+    notesStore.fetchBacklinks(id),
+    loadContext(store.currentTask),
+  ]);
+  if (bl.status === "fulfilled") backlinks.value = bl.value;
 }
 
 onMounted(() => loadTask(taskId.value));
@@ -43,12 +103,6 @@ const renderedBody = computed(() => {
   return renderMarkdown(store.currentTask.body);
 });
 
-const statusCycle: Record<TaskStatus, TaskStatus> = {
-  todo: "in_progress",
-  in_progress: "done",
-  done: "todo",
-};
-
 function cycleStatus() {
   if (!store.currentTask) return;
   store.patchStatus(
@@ -115,6 +169,14 @@ async function onBodyClick(e: MouseEvent) {
 function onTagClick(tag: string) {
   router.push({ path: "/tasks", query: { tag } });
 }
+
+// Sub-task progress
+const subTaskProgress = computed(() => {
+  if (!subTasks.value.length) return null;
+  const done = subTasks.value.filter((t) => t.status === "done").length;
+  const total = subTasks.value.length;
+  return { done, total, pct: Math.round((done / total) * 100) };
+});
 </script>
 
 <template>
@@ -123,7 +185,7 @@ function onTagClick(tag: string) {
       <p v-if="store.loading">Loading...</p>
       <template v-else-if="store.currentTask">
         <div class="toolbar">
-          <router-link to="/tasks" class="btn-back">Back</router-link>
+          <router-link to="/tasks" class="btn-back">← Tasks</router-link>
           <router-link
             :to="`/tasks/${store.currentTask.id}/edit`"
             class="btn-edit"
@@ -138,6 +200,31 @@ function onTagClick(tag: string) {
             {{ converting ? "Converting..." : "Convert to Note" }}
           </button>
         </div>
+
+        <!-- Breadcrumb: parent task → project → milestone -->
+        <div
+          v-if="store.currentTask.parent_id || store.currentTask.project_id"
+          class="context-bar"
+        >
+          <router-link
+            v-if="store.currentTask.parent_id"
+            :to="`/tasks/${store.currentTask.parent_id}`"
+            class="ctx-crumb ctx-crumb-parent"
+          >
+            ↑ {{ store.currentTask.parent_title || "Parent task" }}
+          </router-link>
+          <router-link
+            v-if="store.currentTask.project_id && projectTitle"
+            :to="`/projects/${store.currentTask.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.currentTask.title || "Untitled" }}</h1>
         <p class="meta">
           Updated {{ relativeTime(store.currentTask.updated_at) }}
@@ -172,6 +259,37 @@ function onTagClick(tag: string) {
           @click="onBodyClick"
         ></div>
 
+        <!-- Sub-tasks -->
+        <div v-if="subTasks.length" class="subtasks">
+          <div class="subtasks-header">
+            <h2 class="subtasks-title">Sub-tasks</h2>
+            <span v-if="subTaskProgress" class="subtasks-progress">
+              {{ subTaskProgress.done }}/{{ subTaskProgress.total }}
+              <span class="subtasks-pct">({{ subTaskProgress.pct }}%)</span>
+            </span>
+          </div>
+          <div v-if="subTaskProgress" class="subtasks-track">
+            <div class="subtasks-fill" :style="{ width: subTaskProgress.pct + '%' }"></div>
+          </div>
+          <ul class="subtasks-list">
+            <li
+              v-for="sub in subTasks"
+              :key="sub.id"
+              class="subtask-row"
+            >
+              <button
+                :class="['sub-dot', statusDotClass[sub.status as TaskStatus] ?? 'dot-todo']"
+                :title="`${sub.status} — click to advance`"
+                @click="cycleSubTaskStatus(sub)"
+              ></button>
+              <router-link :to="`/tasks/${sub.id}`" class="sub-title" :class="{ 'sub-done': sub.status === 'done' }">
+                {{ sub.title || "Untitled" }}
+              </router-link>
+              <span v-if="sub.due_date" class="sub-due">{{ sub.due_date }}</span>
+            </li>
+          </ul>
+        </div>
+
         <div v-if="backlinks.length" class="backlinks">
           <h2>Backlinks</h2>
           <ul class="backlinks-list">
@@ -222,7 +340,7 @@ function onTagClick(tag: string) {
 .toolbar {
   display: flex;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 .btn-back,
 .btn-edit {
@@ -261,6 +379,49 @@ function onTagClick(tag: string) {
   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);
@@ -286,6 +447,109 @@ function onTagClick(tag: string) {
   margin-bottom: 1rem;
   flex-wrap: wrap;
 }
+
+/* Sub-tasks */
+.subtasks {
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1rem;
+}
+.subtasks-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  margin-bottom: 0.4rem;
+}
+.subtasks-title {
+  font-size: 1rem;
+  margin: 0;
+  font-weight: 600;
+}
+.subtasks-progress {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+.subtasks-pct {
+  color: var(--color-text-muted);
+}
+.subtasks-track {
+  height: 4px;
+  background: var(--color-bg-secondary);
+  border-radius: 2px;
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+}
+.subtasks-fill {
+  height: 100%;
+  background: var(--color-status-done, #22c55e);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.subtasks-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.subtask-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: var(--radius-sm);
+}
+.subtask-row:hover {
+  background: var(--color-bg-secondary);
+}
+.sub-dot {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s, opacity 0.1s;
+}
+.sub-dot:hover {
+  transform: scale(1.25);
+  opacity: 0.8;
+}
+.dot-todo {
+  background: transparent;
+  border: 2px solid var(--color-text-muted);
+}
+.dot-in-progress {
+  background: var(--color-status-in-progress, #3b82f6);
+}
+.dot-done {
+  background: var(--color-status-done, #22c55e);
+}
+.sub-title {
+  flex: 1;
+  font-size: 0.9rem;
+  color: var(--color-text);
+  text-decoration: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sub-title:hover {
+  color: var(--color-primary);
+}
+.sub-title.sub-done {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+.sub-due {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
 .backlinks {
   margin-top: 2rem;
   border-top: 1px solid var(--color-border);