Add keyboard navigation: e/c/slash shortcuts, j/k list nav, focus visibility

- App.vue: e → edit on viewer pages; / → focus search (custom event); c → focus
  chat on home or navigate to /chat; update shortcuts panel with Lists + Chat sections
- theme.css: add a:focus-visible to focus-ring rules (router-link cards now show
  visible keyboard focus outline)
- SearchBar.vue: expose focus() via defineExpose for cross-component focus dispatch
- NotesListView / TasksListView: j/k vim-style navigation with kb-active-item
  highlight; listen for shortcut:focus-search; cleanup on unmount
- HomeView.vue: listen for shortcut:focus-chat, call chatInputRef.focus()

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

frontend/src/views/TasksListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useTasksStore } from "@/stores/tasks";
 import type { Task, TaskStatus } from "@/types/task";
@@ -15,6 +15,34 @@ const route = useRoute();
 const router = useRouter();
 const store = useTasksStore();
 
+const searchBarRef = ref<{ focus: () => void } | null>(null);
+const activeIndex = ref(-1);
+
+function onFocusSearch() {
+  searchBarRef.value?.focus();
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (viewMode.value !== "flat") return;
+  const el = document.activeElement;
+  const tag = el ? (el as HTMLElement).tagName : "";
+  const isInput = tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement)?.isContentEditable;
+  if (isInput || e.ctrlKey || e.metaKey || e.altKey) return;
+  const count = store.tasks.length;
+  if (e.key === "j") {
+    e.preventDefault();
+    activeIndex.value = Math.min(activeIndex.value + 1, count - 1);
+    document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "k") {
+    e.preventDefault();
+    activeIndex.value = Math.max(activeIndex.value - 1, 0);
+    document.querySelector(".kb-active-item")?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "Enter" && activeIndex.value >= 0) {
+    const task = store.tasks[activeIndex.value];
+    if (task) router.push(`/tasks/${task.id}/edit`);
+  }
+}
+
 const viewMode = ref<ViewMode>(
   (localStorage.getItem("fabled-tasks-view-mode") as ViewMode) ?? "flat"
 );
@@ -90,6 +118,13 @@ onMounted(async () => {
     store.limit = 100;
   }
   await Promise.all([store.refresh(), loadProjects()]);
+  document.addEventListener("shortcut:focus-search", onFocusSearch);
+  document.addEventListener("keydown", onKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("shortcut:focus-search", onFocusSearch);
+  document.removeEventListener("keydown", onKeydown);
 });
 
 watch(
@@ -168,7 +203,7 @@ function toggleGroup(key: string) {
       <h1>Tasks</h1>
       <router-link to="/tasks/new" class="btn-new">+ New Task</router-link>
     </div>
-    <SearchBar @search="onSearch" />
+    <SearchBar ref="searchBarRef" @search="onSearch" />
 
     <div class="controls">
       <div class="filter-controls">
@@ -277,15 +312,19 @@ function toggleGroup(key: string) {
 
     <!-- Flat compact list -->
     <div v-else class="cards-list">
-      <TaskCard
-        v-for="task in store.tasks"
+      <div
+        v-for="(task, i) in store.tasks"
         :key="task.id"
-        :task="task"
-        compact
-        :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
-        @tag-click="onTagClick"
-        @status-toggle="onStatusToggle"
-      />
+        :class="{ 'kb-active-item': activeIndex === i }"
+      >
+        <TaskCard
+          :task="task"
+          compact
+          :project-title="task.project_id ? (projectMap.get(task.project_id) ?? undefined) : undefined"
+          @tag-click="onTagClick"
+          @status-toggle="onStatusToggle"
+        />
+      </div>
     </div>
 
     <PaginationBar
@@ -489,4 +528,9 @@ function toggleGroup(key: string) {
   text-decoration: none;
   font-size: 0.9rem;
 }
+
+.kb-active-item {
+  outline: 2px solid var(--color-primary);
+  border-radius: var(--radius-md);
+}
 </style>