mulmoclaude 0.1.0

package/src/components/todo/TodoEditPanel.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="border-t border-blue-100 bg-blue-50 p-4 space-y-3 rounded-b-lg">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <label class="block text-xs text-gray-600 sm:col-span-2">
+        Text
+        <input
+          v-model="text"
+          type="text"
+          class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500"
+        />
+      </label>
+      <label class="block text-xs text-gray-600 sm:col-span-2">
+        Note
+        <textarea
+          v-model="note"
+          rows="2"
+          class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded resize-y focus:outline-none focus:border-blue-500"
+        />
+      </label>
+      <label class="block text-xs text-gray-600">
+        Status
+        <select v-model="status" class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500">
+          <option v-for="col in columns" :key="col.id" :value="col.id">
+            {{ col.label }}
+          </option>
+        </select>
+      </label>
+      <label class="block text-xs text-gray-600">
+        Priority
+        <select v-model="priority" class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500">
+          <option value="">— None —</option>
+          <option v-for="p in PRIORITIES" :key="p" :value="p">
+            {{ PRIORITY_LABELS[p] }}
+          </option>
+        </select>
+      </label>
+      <label class="block text-xs text-gray-600">
+        Due date
+        <input
+          v-model="dueDate"
+          type="date"
+          class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500"
+        />
+      </label>
+      <label class="block text-xs text-gray-600">
+        Labels (comma-separated)
+        <input
+          v-model="labelsText"
+          type="text"
+          placeholder="work, urgent"
+          class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500"
+        />
+      </label>
+    </div>
+    <div class="flex items-center gap-2 pt-1">
+      <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="save">Save</button>
+      <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { StatusColumn, TodoItem, TodoPriority } from "../../plugins/todo/index";
+import { PRIORITIES, PRIORITY_LABELS } from "../../plugins/todo/priority";
+import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
+
+const props = defineProps<{
+  item: TodoItem;
+  columns: StatusColumn[];
+}>();
+
+const emit = defineEmits<{
+  save: [input: PatchItemInput];
+  cancel: [];
+}>();
+
+const text = ref(props.item.text);
+const note = ref(props.item.note ?? "");
+const status = ref<string>(props.item.status ?? props.columns[0]?.id ?? "");
+const priority = ref<string>(props.item.priority ?? "");
+const dueDate = ref(props.item.dueDate ?? "");
+const labelsText = ref((props.item.labels ?? []).join(", "));
+
+function parseLabels(raw: string): string[] {
+  return raw
+    .split(",")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+}
+
+function save(): void {
+  const input: PatchItemInput = {
+    text: text.value,
+    note: note.value === "" ? null : note.value,
+    status: status.value,
+    labels: parseLabels(labelsText.value),
+  };
+  // Priority: empty string clears, valid priority sets, anything else
+  // is silently ignored (the dropdown ensures we never send garbage).
+  if (priority.value === "") {
+    input.priority = null;
+  } else {
+    input.priority = priority.value as TodoPriority;
+  }
+  if (dueDate.value === "") {
+    input.dueDate = null;
+  } else {
+    input.dueDate = dueDate.value;
+  }
+  emit("save", input);
+}
+</script>

package/src/components/todo/TodoKanbanView.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="h-full overflow-x-auto overflow-y-hidden">
+    <draggable
+      :list="columnsLocal"
+      item-key="id"
+      group="todo-columns"
+      handle=".col-handle"
+      :animation="150"
+      class="flex gap-3 h-full p-3 min-w-max"
+      @end="onColumnDragEnd"
+    >
+      <template #item="{ element: col }: { element: StatusColumn }">
+        <div :data-testid="`todo-column-${col.id}`" class="w-72 shrink-0 flex flex-col bg-gray-100 rounded-lg">
+          <!-- Column header. The whole header is the drag handle —
+             clicking the menu button still works because the menu
+             button has its own @click handler that doesn't kick off
+             a drag, but pressing-and-holding anywhere on the header
+             starts a column drag. -->
+          <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 col-handle cursor-grab active:cursor-grabbing">
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="w-2 h-2 rounded-full shrink-0" :class="col.isDone ? 'bg-green-500' : 'bg-gray-400'" />
+              <span v-if="renamingId !== col.id" class="font-semibold text-sm text-gray-700 truncate" :title="col.label">{{ col.label }}</span>
+              <input
+                v-else
+                ref="renameInput"
+                v-model="renameDraft"
+                class="px-1 py-0.5 text-sm bg-white border border-blue-400 rounded w-32"
+                @keydown.enter="commitRename(col.id)"
+                @keydown.escape="renamingId = null"
+                @blur="commitRename(col.id)"
+              />
+              <span class="text-xs text-gray-500 shrink-0">{{ itemsByColumn(col.id).length }}</span>
+            </div>
+            <div class="relative">
+              <button class="text-gray-400 hover:text-gray-600 px-1" title="Column actions" @click="toggleMenu(col.id)">
+                <span class="material-icons text-base">more_horiz</span>
+              </button>
+              <div
+                v-if="menuOpenId === col.id"
+                class="absolute right-0 top-6 z-20 bg-white border border-gray-200 rounded shadow-md text-xs w-40 py-1"
+                @click.stop
+              >
+                <button class="w-full text-left px-3 py-1.5 hover:bg-gray-50" @click="startRename(col)">Rename</button>
+                <button class="w-full text-left px-3 py-1.5 hover:bg-gray-50" @click="markAsDone(col.id)">
+                  {{ col.isDone ? "Already done column" : "Mark as done column" }}
+                </button>
+                <button class="w-full text-left px-3 py-1.5 text-red-600 hover:bg-red-50" @click="deleteColumn(col.id)">Delete column</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cards -->
+          <draggable
+            :model-value="itemsByColumn(col.id)"
+            item-key="id"
+            group="todos"
+            class="flex-1 overflow-y-auto p-2 space-y-2 min-h-[2rem]"
+            :animation="150"
+            @change="(e: DragChangeEvent) => onDragChange(col.id, e)"
+          >
+            <template #item="{ element }: { element: TodoItem }">
+              <div
+                :data-testid="`todo-card-${element.id}`"
+                class="bg-white border border-l-4 border-gray-200 rounded shadow-sm p-2 cursor-grab hover:shadow active:cursor-grabbing"
+                :class="element.priority ? PRIORITY_BORDER[element.priority] : 'border-l-gray-200'"
+                @click="emit('open', element)"
+              >
+                <div class="flex items-start gap-2">
+                  <input
+                    type="checkbox"
+                    :checked="element.completed"
+                    class="mt-0.5 cursor-pointer shrink-0"
+                    @click.stop
+                    @change="emit('toggleComplete', element)"
+                  />
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm" :class="element.completed ? 'line-through text-gray-400' : 'text-gray-800'">
+                      {{ element.text }}
+                    </div>
+                    <div v-if="element.note" class="text-[11px] text-gray-400 mt-0.5 line-clamp-2">
+                      {{ element.note }}
+                    </div>
+                    <div v-if="(element.labels && element.labels.length > 0) || element.priority || element.dueDate" class="flex flex-wrap gap-1 mt-1.5">
+                      <span v-if="element.priority" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="PRIORITY_CLASSES[element.priority]">{{
+                        PRIORITY_LABELS[element.priority]
+                      }}</span>
+                      <span v-if="element.dueDate" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="dueDateClasses(element.dueDate)">{{
+                        formatDueLabel(element.dueDate)
+                      }}</span>
+                      <span
+                        v-for="label in element.labels ?? []"
+                        :key="label"
+                        class="px-1.5 py-0.5 rounded-full text-[10px] font-medium"
+                        :class="colorForLabel(label)"
+                        >{{ label }}</span
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </draggable>
+
+          <!-- Add card stub -->
+          <button class="m-2 text-xs text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded py-1.5 transition-colors" @click="emit('quickAdd', col.id)">
+            + Add card
+          </button>
+        </div>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import draggable from "vuedraggable";
+import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
+import { colorForLabel } from "../../plugins/todo/labels";
+import { PRIORITY_BORDER, PRIORITY_CLASSES, PRIORITY_LABELS, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
+
+// vuedraggable @change event shape. The library emits one of these
+// three keys depending on whether the move was within the same list,
+// added from another list, or removed from the current list. We only
+// react to "added" (the destination column) and "moved" (reorder
+// within a single column) — "removed" is the source side and is
+// always paired with an "added" on the destination, so handling it
+// would double the API calls.
+interface DragChangeEvent {
+  added?: { newIndex: number; element: TodoItem };
+  moved?: { newIndex: number; oldIndex: number; element: TodoItem };
+  removed?: { oldIndex: number; element: TodoItem };
+}
+
+const props = defineProps<{
+  filteredItems: TodoItem[];
+  columns: StatusColumn[];
+}>();
+
+const emit = defineEmits<{
+  move: [id: string, statusId: string, position: number];
+  open: [item: TodoItem];
+  toggleComplete: [item: TodoItem];
+  quickAdd: [statusId: string];
+  renameColumn: [id: string, label: string];
+  deleteColumn: [id: string];
+  markDone: [id: string];
+  reorderColumns: [ids: string[]];
+}>();
+
+// Local mirror of props.columns so vuedraggable can reorder it in
+// place (`:list` mode mutates the bound array). When the parent
+// updates props.columns — either after we successfully persist a
+// reorder, or because some other action changed the column set —
+// we copy the new array in. This also rolls the kanban back if the
+// API call fails: the parent's columns ref stays at the old order,
+// the watch fires, and columnsLocal snaps back.
+const columnsLocal = ref<StatusColumn[]>([...props.columns]);
+watch(
+  () => props.columns,
+  (next) => {
+    columnsLocal.value = [...next];
+  },
+);
+
+function onColumnDragEnd(): void {
+  const before = props.columns.map((column) => column.id);
+  const after = columnsLocal.value.map((column) => column.id);
+  // No-op drops: avoid an unnecessary network round-trip when the
+  // drop position equals the original.
+  if (before.length === after.length && before.every((columnId, i) => columnId === after[i])) {
+    return;
+  }
+  emit("reorderColumns", after);
+}
+
+// Group filtered items by status, sorted by `order`. Computed so the
+// kanban re-derives whenever items / filter changes.
+const itemsByStatus = computed(() => {
+  const map = new Map<string, TodoItem[]>();
+  for (const col of props.columns) map.set(col.id, []);
+  for (const item of props.filteredItems) {
+    const columnId = item.status ?? props.columns[0]?.id;
+    if (!columnId) continue;
+    if (!map.has(columnId)) map.set(columnId, []);
+    map.get(columnId)!.push(item);
+  }
+  for (const list of map.values()) {
+    list.sort((left, right) => (left.order ?? 0) - (right.order ?? 0));
+  }
+  return map;
+});
+
+function itemsByColumn(columnId: string): TodoItem[] {
+  return itemsByStatus.value.get(columnId) ?? [];
+}
+
+function onDragChange(columnId: string, event: DragChangeEvent): void {
+  if (event.added) {
+    emit("move", event.added.element.id, columnId, event.added.newIndex);
+    return;
+  }
+  if (event.moved) {
+    emit("move", event.moved.element.id, columnId, event.moved.newIndex);
+  }
+}
+
+// ── Column menu / rename ─────────────────────────────────────────
+
+const menuOpenId = ref<string | null>(null);
+const renamingId = ref<string | null>(null);
+const renameDraft = ref("");
+const renameInput = ref<HTMLInputElement[] | HTMLInputElement | null>(null);
+
+function toggleMenu(columnId: string): void {
+  menuOpenId.value = menuOpenId.value === columnId ? null : columnId;
+}
+
+function startRename(col: StatusColumn): void {
+  menuOpenId.value = null;
+  renamingId.value = col.id;
+  renameDraft.value = col.label;
+  void nextTick(() => {
+    const inputRef = renameInput.value;
+    const input = Array.isArray(inputRef) ? inputRef[0] : inputRef;
+    input?.focus();
+    input?.select();
+  });
+}
+
+function commitRename(columnId: string): void {
+  if (renamingId.value !== columnId) return;
+  const next = renameDraft.value.trim();
+  renamingId.value = null;
+  if (next.length === 0) return;
+  const current = props.columns.find((column) => column.id === columnId);
+  if (!current || current.label === next) return;
+  emit("renameColumn", columnId, next);
+}
+
+function deleteColumn(columnId: string): void {
+  menuOpenId.value = null;
+  emit("deleteColumn", columnId);
+}
+
+function markAsDone(columnId: string): void {
+  menuOpenId.value = null;
+  emit("markDone", columnId);
+}
+</script>

package/src/components/todo/TodoListView.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="h-full overflow-y-auto p-4">
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No items match the current filter</div>
+    <ul v-else class="space-y-2 max-w-3xl mx-auto">
+      <li v-for="item in filteredItems" :key="item.id" class="rounded-lg border border-gray-200 hover:border-gray-300 transition-colors">
+        <div class="flex items-center gap-3 p-3 cursor-pointer group" @click="toggleExpand(item.id)">
+          <input type="checkbox" :checked="item.completed" class="cursor-pointer shrink-0" @click.stop @change="toggleComplete(item)" />
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 flex-wrap">
+              <span class="text-sm" :class="item.completed ? 'line-through text-gray-400' : 'text-gray-800'">{{ item.text }}</span>
+              <span v-if="statusLabel(item)" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 text-gray-600">{{ statusLabel(item) }}</span>
+              <span v-if="item.priority" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="PRIORITY_CLASSES[item.priority]">{{
+                PRIORITY_LABELS[item.priority]
+              }}</span>
+              <span v-if="item.dueDate" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="dueDateClasses(item.dueDate)">{{
+                formatDueLabel(item.dueDate)
+              }}</span>
+              <span v-for="label in item.labels ?? []" :key="label" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="colorForLabel(label)">{{
+                label
+              }}</span>
+            </div>
+            <div v-if="item.note" class="text-xs text-gray-400 mt-0.5">
+              {{ item.note }}
+            </div>
+          </div>
+          <button
+            class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-500 text-xs px-1 shrink-0"
+            title="Delete item"
+            @click.stop="emit('delete', item.id)"
+          >
+            ✕
+          </button>
+        </div>
+        <TodoEditPanel v-if="expandedId === item.id" :item="item" :columns="columns" @save="(input) => onSave(item.id, input)" @cancel="expandedId = null" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
+import { colorForLabel } from "../../plugins/todo/labels";
+import { PRIORITY_CLASSES, PRIORITY_LABELS, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
+import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
+import TodoEditPanel from "./TodoEditPanel.vue";
+
+const props = defineProps<{
+  filteredItems: TodoItem[];
+  columns: StatusColumn[];
+}>();
+
+const emit = defineEmits<{
+  patch: [id: string, input: PatchItemInput];
+  delete: [id: string];
+  toggleComplete: [item: TodoItem];
+}>();
+
+const expandedId = ref<string | null>(null);
+
+function toggleExpand(id: string): void {
+  expandedId.value = expandedId.value === id ? null : id;
+}
+
+function toggleComplete(item: TodoItem): void {
+  emit("toggleComplete", item);
+}
+
+function onSave(id: string, input: PatchItemInput): void {
+  emit("patch", id, input);
+  expandedId.value = null;
+}
+
+function statusLabel(item: TodoItem): string {
+  if (!item.status) return "";
+  const col = props.columns.find((c) => c.id === item.status);
+  return col?.label ?? "";
+}
+</script>

package/src/components/todo/TodoTableView.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No items match the current filter</div>
+    <table v-else class="min-w-full text-sm">
+      <thead class="bg-gray-50 sticky top-0 z-10">
+        <tr class="text-left text-xs font-medium text-gray-500 uppercase">
+          <th v-for="col in COLUMNS" :key="col.key" class="px-3 py-2 cursor-pointer hover:bg-gray-100 select-none" @click="setSort(col.key)">
+            {{ col.label }}
+            <span v-if="sortKey === col.key" class="material-icons text-xs align-middle">{{ sortDir === "asc" ? "arrow_upward" : "arrow_downward" }}</span>
+          </th>
+          <th class="px-3 py-2"></th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-100">
+        <template v-for="item in sortedItems" :key="item.id">
+          <tr class="hover:bg-gray-50">
+            <td class="px-3 py-2">
+              <input type="checkbox" :checked="item.completed" @change="emit('toggleComplete', item)" />
+            </td>
+            <td class="px-3 py-2 max-w-md cursor-pointer" @click="toggleExpand(item.id)">
+              <div :class="item.completed ? 'line-through text-gray-400' : 'text-gray-800'">
+                {{ item.text }}
+              </div>
+              <div v-if="item.note" class="text-xs text-gray-400 truncate max-w-xs">
+                {{ item.note }}
+              </div>
+            </td>
+            <td class="px-3 py-2 text-xs text-gray-600">
+              {{ statusLabel(item) }}
+            </td>
+            <td class="px-3 py-2">
+              <span v-if="item.priority" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="PRIORITY_CLASSES[item.priority]">{{
+                PRIORITY_LABELS[item.priority]
+              }}</span>
+            </td>
+            <td class="px-3 py-2">
+              <div class="flex flex-wrap gap-1">
+                <span
+                  v-for="label in item.labels ?? []"
+                  :key="label"
+                  class="px-1.5 py-0.5 rounded-full text-[10px] font-medium"
+                  :class="colorForLabel(label)"
+                  >{{ label }}</span
+                >
+              </div>
+            </td>
+            <td class="px-3 py-2 text-xs">
+              <span v-if="item.dueDate" class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="dueDateClasses(item.dueDate)">{{
+                formatDueLabel(item.dueDate)
+              }}</span>
+            </td>
+            <td class="px-3 py-2 text-xs text-gray-400">
+              {{ formatShortDate(item.createdAt) }}
+            </td>
+            <td class="px-3 py-2 text-right">
+              <button class="text-gray-300 hover:text-red-500 text-xs" title="Delete item" @click="emit('delete', item.id)">✕</button>
+            </td>
+          </tr>
+          <tr v-if="expandedId === item.id">
+            <td colspan="8" class="bg-blue-50 p-0">
+              <TodoEditPanel :item="item" :columns="columns" @save="(input) => onSave(item.id, input)" @cancel="expandedId = null" />
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
+import { colorForLabel } from "../../plugins/todo/labels";
+import { PRIORITY_CLASSES, PRIORITY_LABELS, PRIORITY_ORDER, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
+import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
+import TodoEditPanel from "./TodoEditPanel.vue";
+import { formatShortDate } from "../../utils/format/date";
+
+type SortKey = "completed" | "text" | "status" | "priority" | "labels" | "dueDate" | "createdAt";
+type SortDir = "asc" | "desc";
+
+interface ColumnDef {
+  key: SortKey;
+  label: string;
+}
+
+const COLUMNS: ColumnDef[] = [
+  { key: "completed", label: "" },
+  { key: "text", label: "Text" },
+  { key: "status", label: "Status" },
+  { key: "priority", label: "Priority" },
+  { key: "labels", label: "Labels" },
+  { key: "dueDate", label: "Due" },
+  { key: "createdAt", label: "Created" },
+];
+
+const props = defineProps<{
+  filteredItems: TodoItem[];
+  columns: StatusColumn[];
+}>();
+
+const emit = defineEmits<{
+  patch: [id: string, input: PatchItemInput];
+  delete: [id: string];
+  toggleComplete: [item: TodoItem];
+}>();
+
+const sortKey = ref<SortKey>("createdAt");
+const sortDir = ref<SortDir>("desc");
+const expandedId = ref<string | null>(null);
+
+function setSort(key: SortKey): void {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  } else {
+    sortKey.value = key;
+    sortDir.value = key === "createdAt" ? "desc" : "asc";
+  }
+}
+
+function toggleExpand(itemId: string): void {
+  expandedId.value = expandedId.value === itemId ? null : itemId;
+}
+
+function onSave(itemId: string, input: PatchItemInput): void {
+  emit("patch", itemId, input);
+  expandedId.value = null;
+}
+
+function statusLabel(item: TodoItem): string {
+  if (!item.status) return "";
+  return props.columns.find((col) => col.id === item.status)?.label ?? "";
+}
+
+function compareValues(left: unknown, right: unknown): number {
+  // Undefined sorts last regardless of direction so empty cells stay
+  // at the bottom of the list (ascending) or top (descending — flipped
+  // by the caller). This matches GitHub's "issues with no due date"
+  // ordering, which I find the least surprising.
+  if (left === undefined && right === undefined) return 0;
+  if (left === undefined) return 1;
+  if (right === undefined) return -1;
+  if (typeof left === "number" && typeof right === "number") return left - right;
+  if (typeof left === "boolean" && typeof right === "boolean") {
+    return left === right ? 0 : left ? 1 : -1;
+  }
+  return String(left).localeCompare(String(right));
+}
+
+function sortValueOf(item: TodoItem, key: SortKey): unknown {
+  switch (key) {
+    case "completed":
+      return item.completed;
+    case "text":
+      return item.text.toLowerCase();
+    case "status":
+      return statusLabel(item).toLowerCase();
+    case "priority":
+      return item.priority ? PRIORITY_ORDER[item.priority] : undefined;
+    case "labels":
+      return (item.labels ?? []).join(",").toLowerCase();
+    case "dueDate":
+      return item.dueDate;
+    case "createdAt":
+      return item.createdAt;
+  }
+}
+
+const sortedItems = computed(() => {
+  const list = [...props.filteredItems];
+  list.sort((left, right) => {
+    const result = compareValues(sortValueOf(left, sortKey.value), sortValueOf(right, sortKey.value));
+    return sortDir.value === "asc" ? result : -result;
+  });
+  return list;
+});
+</script>

package/src/composables/useActiveSession.ts

@@ -0,0 +1,40 @@
+// Provide/inject contract for the currently-active chat session.
+//
+// Plugin Views (e.g. MulmoScript) need two things from the app-level
+// session state:
+//
+//   1. The `chatSessionId` so they can tag long-running work (image /
+//      audio / movie generation) on the right session channel.
+//   2. A reactive view of `pendingGenerations` so they can derive
+//      per-beat / per-character "rendering" spinners from the same
+//      map the sidebar busy-indicator reads. This lets the spinner
+//      survive View unmount/remount across session switches.
+//
+// Rather than thread two new props through every plugin's
+// `<component :is="...">` mount point, we expose the active session
+// via provide/inject — same pattern as useAppApi.
+
+import { inject, provide, type Ref } from "vue";
+import type { ActiveSession } from "../types/session";
+
+/**
+ * Ref to the currently-active session. May be `undefined` during the
+ * brief window before the first session loads.
+ */
+export type ActiveSessionRef = Ref<ActiveSession | undefined>;
+
+const ACTIVE_SESSION_KEY = Symbol("activeSession");
+
+/** Called once in App.vue setup to expose the ref to descendants. */
+export function provideActiveSession(ref: ActiveSessionRef): void {
+  provide(ACTIVE_SESSION_KEY, ref);
+}
+
+/**
+ * Plugin Views call this to observe the active session. Returns
+ * `undefined` when used outside an App.vue subtree (e.g. in a unit
+ * test) so plugins can render standalone without the provider.
+ */
+export function useActiveSession(): ActiveSessionRef | undefined {
+  return inject<ActiveSessionRef>(ACTIVE_SESSION_KEY);
+}