feat: task management enhancements (cancelled status, recurrence, timestamps)

- Add 'cancelled' status to TaskStatus type, StatusBadge, TaskCard,
  TaskEditorView, TaskViewerView, TasksListView
- Add RecurrenceEditor component (none / interval / calendar rules)
- TaskEditorView: wire RecurrenceEditor, show started_at/completed_at
  timestamps read-only, include recurrence_rule in save payload
- TaskViewerView: show recurrence summary, timestamps in meta row
- tasks.ts: statusFilter/priorityFilter as arrays, add recurrence_rule
  to updateTask and createTask payloads

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

frontend/src/views/TaskEditorView.vue

@@ -12,6 +12,7 @@ import { useTagSuggestions } from "@/composables/useTagSuggestions";
 import { useFloatingAssist } from "@/composables/useFloatingAssist";
 import { apiPost, apiGet, apiPatch } from "@/api/client";
 import type { TaskStatus, TaskPriority } from "@/types/task";
+import type { Note } from "@/types/note";
 import type { Editor } from "@tiptap/vue-3";
 import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
 import TiptapEditor from "@/components/TiptapEditor.vue";
@@ -23,6 +24,7 @@ import TaskLogSection from "@/components/TaskLogSection.vue";
 import DiffView from "@/components/DiffView.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import VersionHistorySection from "@/components/VersionHistorySection.vue";
+import RecurrenceEditor from "@/components/RecurrenceEditor.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -40,6 +42,9 @@ const projectId = ref<number | null>(null);
 const milestoneId = ref<number | null>(null);
 const parentId = ref<number | null>(null);
 const parentTitle = ref("");
+const startedAt = ref<string | null>(null);
+const completedAt = ref<string | null>(null);
+const recurrenceRule = ref<Record<string, unknown> | null>(null);
 const parentSearchQuery = ref("");
 const parentSearchResults = ref<{ id: number; title: string }[]>([]);
 const parentSearchLoading = ref(false);
@@ -274,6 +279,10 @@ onMounted(async () => {
       parentId.value = (taskRec.parent_id as number | null) ?? null;
       parentTitle.value = (taskRec.parent_title as string | null) ?? "";
       parentSearchQuery.value = parentTitle.value;
+      const noteTask = store.currentTask as unknown as Note;
+      startedAt.value = noteTask.started_at ?? null;
+      completedAt.value = noteTask.completed_at ?? null;
+      recurrenceRule.value = noteTask.recurrence_rule ?? null;
       savedTitle = title.value;
       savedBody = body.value;
       savedTags = [...tags.value];
@@ -309,6 +318,7 @@ async function save() {
       project_id: projectId.value,
       milestone_id: milestoneId.value,
       parent_id: parentId.value,
+      recurrence_rule: recurrenceRule.value,
     };
     if (isEditing.value) {
       await store.updateTask(taskId.value!, data);
@@ -373,6 +383,7 @@ async function doAutoSave() {
       project_id: projectId.value,
       milestone_id: milestoneId.value,
       parent_id: parentId.value,
+      recurrence_rule: recurrenceRule.value,
     } as Record<string, unknown>);
     savedTitle = title.value;
     savedBody = body.value;
@@ -483,8 +494,19 @@ useEditorGuards(dirty, save);
               <option value="todo">Todo</option>
               <option value="in_progress">In Progress</option>
               <option value="done">Done</option>
+              <option value="cancelled">Cancelled</option>
             </select>
           </div>
+          <div v-if="startedAt || completedAt" class="sb-timestamps">
+            <div v-if="startedAt" class="sb-timestamp">
+              <span class="sb-ts-label">Started</span>
+              <span class="sb-ts-value">{{ new Date(startedAt).toLocaleString() }}</span>
+            </div>
+            <div v-if="completedAt" class="sb-timestamp">
+              <span class="sb-ts-label">Completed</span>
+              <span class="sb-ts-value">{{ new Date(completedAt).toLocaleString() }}</span>
+            </div>
+          </div>
           <div class="sb-field">
             <label class="sb-label">Priority</label>
             <select v-model="priority" @change="markDirty" class="sb-select">
@@ -498,6 +520,10 @@ useEditorGuards(dirty, save);
             <label class="sb-label">Due Date</label>
             <input v-model="dueDate" type="date" class="sb-input" @input="markDirty" />
           </div>
+          <div class="sb-field">
+            <label class="sb-label">Recurrence</label>
+            <RecurrenceEditor v-model="recurrenceRule" @update:modelValue="markDirty" />
+          </div>
           <div class="sb-field">
             <label class="sb-label">Project</label>
             <ProjectSelector v-model="projectId" @update:modelValue="markDirty" />
@@ -903,6 +929,28 @@ useEditorGuards(dirty, save);
   align-items: center;
 }
 
+/* Lifecycle timestamps */
+.sb-timestamps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin-top: 0.25rem;
+}
+.sb-timestamp {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+}
+.sb-ts-label {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+.sb-ts-value {
+  color: var(--color-text-secondary);
+  text-align: right;
+}
+
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
   .task-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }