M3 wiki-links: [[links]] + backlinks

- Migration 0009: note_links (source_id, target_norm). Parse [[...]] from body on
  create/update and rewrite the source's links. GET /api/notes/titles (owner
  {id,title} index for client-side resolution); GET /api/notes/<id>/backlinks.
- Frontend: titles store; LinkedText renders [[Title]] styled on cards; editor
  shows Links (outgoing, resolve/create-on-click) + Linked-from (backlinks),
  clicking navigates the editor to the target note (board + search).
- notes store: fetchOne, createTitled. DB-free link-parser tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/components/LinkedText.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ text: string }>();
+
+interface Part {
+  text: string;
+  link: boolean;
+}
+
+// Split the body into plain segments and [[wiki-link]] segments (styled, non-
+// interactive here — navigation happens from the editor's Links / Linked-from
+// lists so we don't nest interactive controls inside the card's open target).
+const parts = computed<Part[]>(() => {
+  const result: Part[] = [];
+  const re = /\[\[([^[\]]+)\]\]/g;
+  let last = 0;
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(props.text)) !== null) {
+    if (match.index > last) result.push({ text: props.text.slice(last, match.index), link: false });
+    result.push({ text: match[1].trim(), link: true });
+    last = match.index + match[0].length;
+  }
+  if (last < props.text.length) result.push({ text: props.text.slice(last), link: false });
+  return result;
+});
+</script>
+
+<template>
+  <span class="whitespace-pre-wrap break-words"
+    ><template v-for="(part, i) in parts" :key="i"
+      ><span v-if="part.link" class="font-medium text-brand-700 dark:text-brand">{{ part.text }}</span
+      ><template v-else>{{ part.text }}</template></template
+    ></span
+  >
+</template>

frontend/src/components/NoteCard.vue

@@ -3,6 +3,7 @@ import { useNotesStore } from "../stores/notes";
 import { NOTE_CARD_CLASSES, type NoteColor } from "../notes/colors";
 import type { Note } from "../stores/notes";
 import Icon from "./Icon.vue";
+import LinkedText from "./LinkedText.vue";
 import NoteChecklist from "./NoteChecklist.vue";
 
 defineProps<{ note: Note; reorderable?: boolean }>();
@@ -61,9 +62,9 @@ function cardClass(color: NoteColor): string {
       <h3 v-if="note.title" class="mb-1 break-words text-sm font-semibold text-neutral-900 dark:text-neutral-100">
         {{ note.title }}
       </h3>
-      <p v-if="note.body" class="whitespace-pre-wrap break-words text-sm text-neutral-700 dark:text-neutral-300">
-        {{ note.body }}
-      </p>
+      <div v-if="note.body" class="text-sm text-neutral-700 dark:text-neutral-300">
+        <LinkedText :text="note.body" />
+      </div>
       <p v-if="!note.title && !note.body && !note.attachments.length" class="text-sm italic text-neutral-400">
         Empty note
       </p>

frontend/src/components/NoteEditor.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { api } from "../api/client";
 import { useNotesStore } from "../stores/notes";
+import { useTitlesStore } from "../stores/titles";
 import ColorPicker from "./ColorPicker.vue";
 import Icon from "./Icon.vue";
 import LabelPicker from "./LabelPicker.vue";
@@ -9,8 +11,9 @@ import type { Note, NoteLabel } from "../stores/notes";
 import type { NoteColor } from "../notes/colors";
 
 const props = defineProps<{ note: Note }>();
-const emit = defineEmits<{ (e: "close"): void }>();
+const emit = defineEmits<{ (e: "close"): void; (e: "navigate", id: string): void }>();
 const notes = useNotesStore();
+const titles = useTitlesStore();
 
 // Read the note reactively from the store so checklist item add/toggle/delete
 // (which reconcile a fresh note object) reflect live while the editor is open.
@@ -32,11 +35,57 @@ watch(
   },
 );
 
+const backlinks = ref<{ id: string; title: string }[]>([]);
+
+async function loadBacklinks() {
+  try {
+    const res = await api.get<{ backlinks: { id: string; title: string }[] }>(
+      `/api/notes/${props.note.id}/backlinks`,
+    );
+    backlinks.value = res.backlinks;
+  } catch {
+    backlinks.value = [];
+  }
+}
+
 onMounted(async () => {
+  void titles.load();
+  void loadBacklinks();
   await nextTick();
   bodyInput.value?.focus();
 });
 
+watch(
+  () => props.note.id,
+  () => void loadBacklinks(),
+);
+
+const outgoingLinks = computed(() => {
+  const re = /\[\[([^[\]]+)\]\]/g;
+  const seen = new Set<string>();
+  const out: { title: string; id: string | null }[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(body.value)) !== null) {
+    const title = match[1].trim();
+    const key = title.toLowerCase();
+    if (title && !seen.has(key)) {
+      seen.add(key);
+      out.push({ title, id: titles.resolve(title)?.id ?? null });
+    }
+  }
+  return out;
+});
+
+async function openLink(link: { title: string; id: string | null }) {
+  if (link.id) {
+    emit("navigate", link.id);
+    return;
+  }
+  const created = await notes.createTitled(link.title);
+  await titles.reload();
+  emit("navigate", created.id);
+}
+
 async function onLabelsChange(next: NoteLabel[]) {
   labelList.value = next;
   await notes.setLabels(
@@ -176,6 +225,46 @@ async function act(fn: () => Promise<void>) {
             </button>
           </span>
         </div>
+
+        <div
+          v-if="outgoingLinks.length || backlinks.length"
+          class="flex flex-col gap-2 border-t border-neutral-100 pt-2 dark:border-neutral-800"
+        >
+          <div v-if="outgoingLinks.length">
+            <p class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-400">Links</p>
+            <div class="flex flex-wrap gap-1.5">
+              <button
+                v-for="link in outgoingLinks"
+                :key="link.title"
+                type="button"
+                class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs"
+                :class="
+                  link.id
+                    ? 'bg-brand/15 text-brand-700 dark:text-brand'
+                    : 'bg-black/5 text-neutral-500 dark:bg-white/10 dark:text-neutral-400'
+                "
+                :title="link.id ? `Open ${link.title}` : `Create ${link.title}`"
+                @click="openLink(link)"
+              >
+                {{ link.title }}<span v-if="!link.id" class="opacity-60">＋</span>
+              </button>
+            </div>
+          </div>
+          <div v-if="backlinks.length">
+            <p class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-400">Linked from</p>
+            <div class="flex flex-wrap gap-1.5">
+              <button
+                v-for="b in backlinks"
+                :key="b.id"
+                type="button"
+                class="inline-flex items-center rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 hover:bg-black/10 dark:bg-white/10 dark:text-neutral-300"
+                @click="emit('navigate', b.id)"
+              >
+                {{ b.title }}
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="flex items-center justify-between gap-2 border-t border-neutral-100 px-3 py-2 dark:border-neutral-800">