Initial commit: note-taking/task-tracking app with LLM integration scaffold

Vue 3 + TypeScript frontend with Pinia stores, markdown rendering (marked + DOMPurify),
wikilink/tag linkification, and autocomplete. Quart async backend with SQLAlchemy 2.0,
PostgreSQL ARRAY columns, task-note companion linking, backlinks, and note-to-task
conversion. Docker Compose setup with PostgreSQL 16 and Ollama.

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

frontend/src/components/NoteCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Note } from "@/types/note";
+import TagPill from "@/components/TagPill.vue";
+import { relativeTime } from "@/composables/useRelativeTime";
+import { renderPreview } from "@/utils/markdown";
+
+defineProps<{ note: Note }>();
+const emit = defineEmits<{ "tag-click": [tag: string] }>();
+
+function onTagClick(tag: string) {
+  emit("tag-click", tag);
+}
+</script>
+
+<template>
+  <router-link :to="`/notes/${note.id}`" class="note-card">
+    <h3 class="note-title">{{ note.title || "Untitled" }}</h3>
+    <div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
+    <div class="note-meta">
+      <TagPill
+        v-for="tag in note.tags"
+        :key="tag"
+        :tag="tag"
+        @click.stop="onTagClick(tag)"
+      />
+      <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
+    </div>
+  </router-link>
+</template>
+
+<style scoped>
+.note-card {
+  display: block;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  text-decoration: none;
+  color: inherit;
+  background: var(--color-bg-card);
+  transition: box-shadow 0.15s;
+}
+.note-card:hover {
+  box-shadow: 0 2px 8px var(--color-shadow);
+}
+.note-title {
+  margin: 0 0 0.25rem;
+  font-size: 1.1rem;
+}
+.note-preview {
+  margin: 0 0 0.5rem;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  max-height: 7.5em;
+  overflow: hidden;
+}
+.note-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.timestamp {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+</style>