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">

frontend/src/stores/notes.ts

@@ -141,6 +141,20 @@ export const useNotesStore = defineStore("notes", () => {
     reconcile(await api.del<Note>(`/api/notes/${id}/attachments/${attId}`));
   }
 
+  async function fetchOne(id: string): Promise<Note | null> {
+    try {
+      return await api.get<Note>(`/api/notes/${id}`);
+    } catch {
+      return null;
+    }
+  }
+
+  async function createTitled(title: string): Promise<Note> {
+    const created = await api.post<Note>("/api/notes", { title, body: "" });
+    reconcile(created);
+    return created;
+  }
+
   async function reorder(orderedIds: string[]): Promise<void> {
     // Optimistically assign positions matching the backend (total - index), sort,
     // then persist.
@@ -185,6 +199,8 @@ export const useNotesStore = defineStore("notes", () => {
     deleteItem,
     uploadAttachment,
     deleteAttachment,
+    fetchOne,
+    createTitled,
     reorder,
     trash,
     restore,

frontend/src/stores/titles.ts

@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api } from "../api/client";
+
+export interface TitleEntry {
+  id: string;
+  title: string;
+}
+
+// Owner's {id,title} index, used to resolve [[wiki-links]] client-side.
+export const useTitlesStore = defineStore("titles", () => {
+  const items = ref<TitleEntry[]>([]);
+  const loaded = ref(false);
+
+  async function load(): Promise<void> {
+    if (loaded.value) return;
+    const res = await api.get<{ titles: TitleEntry[] }>("/api/notes/titles");
+    items.value = res.titles;
+    loaded.value = true;
+  }
+
+  async function reload(): Promise<void> {
+    loaded.value = false;
+    await load();
+  }
+
+  function resolve(title: string): TitleEntry | null {
+    const norm = title.trim().toLowerCase();
+    return items.value.find((t) => t.title.trim().toLowerCase() === norm) ?? null;
+  }
+
+  return { items, loaded, load, reload, resolve };
+});

frontend/src/views/BoardView.vue

@@ -47,6 +47,16 @@ function closeEditor() {
   editing.value = null;
 }
 
+async function onNavigate(id: string) {
+  const found = notes.items.find((n) => n.id === id);
+  if (found) {
+    editing.value = found;
+    return;
+  }
+  const fetched = await notes.fetchOne(id);
+  if (fetched) editing.value = fetched;
+}
+
 const draggingId = ref<string | null>(null);
 function onDragStart(note: Note) {
   draggingId.value = note.id;
@@ -125,6 +135,6 @@ async function onDrop(target: Note) {
   </div>
 
   <template v-if="editing">
-    <NoteEditor :note="editing" @close="closeEditor" />
+    <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />
   </template>
 </template>

frontend/src/views/SearchView.vue

@@ -2,11 +2,12 @@
 import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { api } from "../api/client";
-import type { Note } from "../stores/notes";
+import { useNotesStore, type Note } from "../stores/notes";
 import NoteCard from "../components/NoteCard.vue";
 import NoteEditor from "../components/NoteEditor.vue";
 
 const route = useRoute();
+const notes = useNotesStore();
 
 const results = ref<Note[]>([]);
 const loading = ref(false);
@@ -38,6 +39,15 @@ async function closeEditor() {
   editing.value = null;
   await run(); // reflect any edits made from a result
 }
+async function onNavigate(id: string) {
+  const found = results.value.find((n) => n.id === id);
+  if (found) {
+    editing.value = found;
+    return;
+  }
+  const fetched = await notes.fetchOne(id);
+  if (fetched) editing.value = fetched;
+}
 </script>
 
 <template>
@@ -62,6 +72,6 @@ async function closeEditor() {
   </div>
 
   <template v-if="editing">
-    <NoteEditor :note="editing" @close="closeEditor" />
+    <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />
   </template>
 </template>