From eac4c6d86ad435732a7bfe958410ad6344fbf546 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 3 Mar 2026 19:32:19 -0500
Subject: [PATCH] Implement keyboard shortcuts and enrich note/task viewer
 views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/App.vue                  | 113 ++++++++--
 frontend/src/types/note.ts            |   1 +
 frontend/src/views/NoteViewerView.vue | 120 ++++++++++-
 frontend/src/views/TaskViewerView.vue | 292 ++++++++++++++++++++++++--
 4 files changed, 492 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 786dd3b..9e95deb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, watch } from "vue";
+import { useRouter } from "vue-router";
 import AppHeader from "@/components/AppHeader.vue";
 import ToastNotification from "@/components/ToastNotification.vue";
 import { useTheme } from "@/composables/useTheme";
@@ -10,6 +11,7 @@ import { useSettingsStore } from "@/stores/settings";
 
 useTheme();
 
+const router = useRouter();
 const authStore = useAuthStore();
 const chatStore = useChatStore();
 const settingsStore = useSettingsStore();
@@ -31,16 +33,66 @@ function isInputActive(): boolean {
   return tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement).isContentEditable;
 }
 
+// Sequence shortcut support (e.g. g+n, g+t)
+let pendingPrefix: string | null = null;
+let prefixTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function clearPrefix() {
+  pendingPrefix = null;
+  if (prefixTimeout) clearTimeout(prefixTimeout);
+  prefixTimeout = null;
+}
+
 function onGlobalKeydown(e: KeyboardEvent) {
   if (!authStore.isAuthenticated) return;
+
   // ? — toggle shortcuts overlay (only when not typing)
   if (e.key === "?" && !isInputActive() && !e.ctrlKey && !e.metaKey) {
     toggleShortcuts();
     return;
   }
-  // Escape — close shortcuts overlay
-  if (e.key === "Escape" && showShortcuts.value) {
-    closeShortcuts();
+
+  // Escape — close shortcuts overlay OR navigate home
+  if (e.key === "Escape") {
+    clearPrefix();
+    if (showShortcuts.value) {
+      closeShortcuts();
+      return;
+    }
+    if (!isInputActive()) {
+      router.push("/");
+    }
+    return;
+  }
+
+  // All remaining shortcuts: ignore when typing or using modifier keys
+  if (isInputActive() || e.ctrlKey || e.metaKey || e.altKey) return;
+
+  // Complete a g+X sequence
+  if (pendingPrefix === "g") {
+    clearPrefix();
+    switch (e.key) {
+      case "h": router.push("/"); break;
+      case "n": router.push("/notes"); break;
+      case "t": router.push("/tasks"); break;
+      case "p": router.push("/projects"); break;
+      case "c": router.push("/chat"); break;
+    }
+    return;
+  }
+
+  // Single-key shortcuts
+  switch (e.key) {
+    case "g":
+      pendingPrefix = "g";
+      prefixTimeout = setTimeout(clearPrefix, 1500);
+      break;
+    case "n":
+      router.push("/notes/new");
+      break;
+    case "t":
+      router.push("/tasks/new");
+      break;
   }
 }
 
@@ -90,12 +142,53 @@ onUnmounted(() => {
             <div class="shortcuts-section">
               <div class="shortcuts-section-title">Navigation</div>
               <div class="shortcut-row">
-                <span class="shortcut-key">Esc</span>
-                <span class="shortcut-desc">Go to home / close dialog</span>
+                <kbd class="shortcut-key">g</kbd>
+                <span class="shortcut-key-sep">+</span>
+                <kbd class="shortcut-key">h</kbd>
+                <span class="shortcut-desc">Home</span>
               </div>
               <div class="shortcut-row">
-                <span class="shortcut-key">?</span>
-                <span class="shortcut-desc">Toggle this shortcuts panel</span>
+                <kbd class="shortcut-key">g</kbd>
+                <span class="shortcut-key-sep">+</span>
+                <kbd class="shortcut-key">n</kbd>
+                <span class="shortcut-desc">Notes</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">g</kbd>
+                <span class="shortcut-key-sep">+</span>
+                <kbd class="shortcut-key">t</kbd>
+                <span class="shortcut-desc">Tasks</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">g</kbd>
+                <span class="shortcut-key-sep">+</span>
+                <kbd class="shortcut-key">p</kbd>
+                <span class="shortcut-desc">Projects</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">g</kbd>
+                <span class="shortcut-key-sep">+</span>
+                <kbd class="shortcut-key">c</kbd>
+                <span class="shortcut-desc">Chat</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">Esc</kbd>
+                <span class="shortcut-desc">Go home (when not typing)</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">?</kbd>
+                <span class="shortcut-desc">Toggle this panel</span>
+              </div>
+            </div>
+            <div class="shortcuts-section">
+              <div class="shortcuts-section-title">Create</div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">n</kbd>
+                <span class="shortcut-desc">New note</span>
+              </div>
+              <div class="shortcut-row">
+                <kbd class="shortcut-key">t</kbd>
+                <span class="shortcut-desc">New task</span>
               </div>
             </div>
             <div class="shortcuts-section">
@@ -108,11 +201,7 @@ onUnmounted(() => {
                 <kbd class="shortcut-key">Shift</kbd>
                 <span class="shortcut-key-sep">+</span>
                 <kbd class="shortcut-key">Enter</kbd>
-                <span class="shortcut-desc">New line in message</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd class="shortcut-key">Esc</kbd>
-                <span class="shortcut-desc">Clear input / go home</span>
+                <span class="shortcut-desc">New line</span>
               </div>
             </div>
           </div>
diff --git a/frontend/src/types/note.ts b/frontend/src/types/note.ts
index d8ab531..6258b54 100644
--- a/frontend/src/types/note.ts
+++ b/frontend/src/types/note.ts
@@ -7,6 +7,7 @@ export interface Note {
   body: string;
   tags: string[];
   parent_id: number | null;
+  parent_title?: string | null;
   project_id: number | null;
   milestone_id: number | null;
   status: TaskStatus | null;
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index 12c34c6..de254d0 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/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);
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index c7f5ece..d05d08e 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/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);