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/StatusBadge.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { TaskStatus } from "@/types/task";
+
+const props = defineProps<{
+  status: TaskStatus;
+  clickable?: boolean;
+}>();
+
+defineEmits<{ click: [] }>();
+
+const labels: Record<TaskStatus, string> = {
+  todo: "Todo",
+  in_progress: "In Progress",
+  done: "Done",
+};
+</script>
+
+<template>
+  <span
+    :class="['status-badge', `status-${props.status}`, { clickable }]"
+    @click="clickable ? $emit('click') : undefined"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+  >
+    {{ labels[props.status] }}
+  </span>
+</template>
+
+<style scoped>
+.status-badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.status-todo {
+  background: var(--color-status-todo-bg);
+  color: var(--color-status-todo);
+}
+.status-in_progress {
+  background: var(--color-status-in-progress-bg);
+  color: var(--color-status-in-progress);
+}
+.status-done {
+  background: var(--color-status-done-bg);
+  color: var(--color-status-done);
+}
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  filter: brightness(0.9);
+}
+</style>