mulmoclaude 0.1.0

package/src/components/TodoExplorer.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="h-full bg-white flex flex-col">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 shrink-0 gap-3">
+      <div class="flex items-center gap-3 min-w-0">
+        <h2 class="text-base font-semibold text-gray-800 shrink-0">Todo</h2>
+        <span class="text-xs text-gray-500 shrink-0">{{ completedCount }}/{{ items.length }} done</span>
+        <input
+          v-model="search"
+          data-testid="todo-search"
+          type="text"
+          placeholder="Search..."
+          class="px-2 py-1 text-xs border border-gray-200 rounded w-44 focus:outline-none focus:border-blue-400"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <!-- Add button -->
+        <button data-testid="todo-add-btn" class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" @click="addOpen = true">+ Add</button>
+        <!-- Add column button (kanban only) -->
+        <button
+          v-if="viewMode === TODO_VIEW.kanban"
+          data-testid="todo-column-add-btn"
+          class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
+          @click="addColumnOpen = true"
+        >
+          + Column
+        </button>
+        <!-- View mode toggle -->
+        <div class="flex border border-gray-300 rounded overflow-hidden text-xs">
+          <button
+            v-for="mode in VIEW_MODES"
+            :key="mode.key"
+            class="px-2.5 py-1"
+            :class="viewMode === mode.key ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
+            :data-testid="`todo-view-${mode.key}`"
+            :title="mode.label"
+            @click="setViewMode(mode.key)"
+          >
+            <span class="material-icons text-sm">{{ mode.icon }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Label filter chips -->
+    <div v-if="labelInventory.length > 0" class="flex flex-wrap items-center gap-1.5 px-4 py-1.5 border-b border-gray-100 bg-gray-50 shrink-0">
+      <span class="text-[11px] text-gray-500 mr-1">Labels:</span>
+      <button
+        v-for="entry in labelInventory"
+        :key="entry.label"
+        class="px-2 py-0.5 rounded-full text-[10px] font-medium transition-all"
+        :class="
+          activeFilters.has(entry.label.toLowerCase())
+            ? 'ring-2 ring-blue-400 ' + colorForLabel(entry.label)
+            : colorForLabel(entry.label) + ' opacity-70 hover:opacity-100'
+        "
+        @click="toggleFilter(entry.label)"
+      >
+        {{ entry.label }}
+        <span class="opacity-60">{{ entry.count }}</span>
+      </button>
+      <button v-if="activeFilters.size > 0" class="ml-auto text-[11px] text-gray-500 hover:text-gray-700" title="Clear label filters" @click="clearFilters">
+        Clear ✕
+      </button>
+    </div>
+
+    <!-- Error banner -->
+    <div v-if="error" class="px-4 py-2 text-xs text-red-600 bg-red-50 border-b border-red-100 shrink-0">
+      {{ error }}
+    </div>
+
+    <!-- Body -->
+    <div class="flex-1 min-h-0">
+      <div v-if="items.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No todo items yet. Click "+ Add" to create one.</div>
+      <template v-else>
+        <TodoKanbanView
+          v-if="viewMode === TODO_VIEW.kanban"
+          :filtered-items="filteredItems"
+          :columns="columns"
+          @move="onMove"
+          @open="onOpenItem"
+          @toggle-complete="onToggleComplete"
+          @quick-add="quickAddInColumn"
+          @rename-column="onRenameColumn"
+          @delete-column="onDeleteColumn"
+          @mark-done="onMarkDone"
+          @reorder-columns="onReorderColumns"
+        />
+        <TodoTableView
+          v-else-if="viewMode === TODO_VIEW.table"
+          :filtered-items="filteredItems"
+          :columns="columns"
+          @patch="onPatchItem"
+          @delete="onDeleteItem"
+          @toggle-complete="onToggleComplete"
+        />
+        <TodoListView
+          v-else
+          :filtered-items="filteredItems"
+          :columns="columns"
+          @patch="onPatchItem"
+          @delete="onDeleteItem"
+          @toggle-complete="onToggleComplete"
+        />
+      </template>
+    </div>
+
+    <!-- Add item dialog -->
+    <TodoAddDialog v-if="addOpen" :columns="columns" :default-status="addDefaultStatus" @cancel="addOpen = false" @create="onCreateItem" />
+
+    <!-- Edit item dialog (used by kanban click; list/table use the
+         inline edit panel and don't need to open this) -->
+    <TodoEditDialog
+      v-if="editingItem"
+      :item="editingItem"
+      :columns="columns"
+      @cancel="editingItem = null"
+      @save="onEditDialogSave"
+      @delete="onEditDialogDelete"
+    />
+
+    <!-- Add column dialog -->
+    <div v-if="addColumnOpen" class="fixed inset-0 z-50 bg-black/30 flex items-center justify-center" @click="addColumnOpen = false">
+      <div class="bg-white rounded-lg shadow-xl w-80 p-5 space-y-3" role="dialog" aria-modal="true" aria-labelledby="todo-add-column-title" @click.stop>
+        <h3 id="todo-add-column-title" class="text-base font-semibold text-gray-800">Add Column</h3>
+        <label class="block text-xs text-gray-600">
+          Label
+          <input
+            v-model="newColumnLabel"
+            type="text"
+            placeholder="Review"
+            class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+            @keydown.enter="commitNewColumn"
+          />
+        </label>
+        <div class="flex justify-end gap-2 pt-1">
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="addColumnOpen = false">Cancel</button>
+          <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="commitNewColumn">Add</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import type { TodoData, TodoItem } from "../plugins/todo/index";
+import { colorForLabel, filterByLabels, listLabelsWithCount } from "../plugins/todo/labels";
+import { useTodos, type CreateItemInput, type PatchItemInput } from "../plugins/todo/composables/useTodos";
+import TodoKanbanView from "./todo/TodoKanbanView.vue";
+import TodoTableView from "./todo/TodoTableView.vue";
+import TodoListView from "./todo/TodoListView.vue";
+import TodoAddDialog from "./todo/TodoAddDialog.vue";
+import TodoEditDialog from "./todo/TodoEditDialog.vue";
+
+import { TODO_VIEW, TODO_VIEW_MODES as VIEW_MODES, type TodoViewMode as ViewMode } from "../plugins/todo/viewModes";
+
+const VIEW_MODE_KEY = "todo_explorer_view_mode";
+
+const props = defineProps<{
+  selectedResult?: ToolResultComplete<TodoData>;
+}>();
+
+const { items, columns, error, refresh, createItem, patchItem, moveItem, deleteItem, addColumn, patchColumn, deleteColumn, reorderColumns } = useTodos(
+  props.selectedResult?.data?.items ?? [],
+  props.selectedResult?.data?.columns ?? [],
+);
+
+// When the parent swaps in a different tool result, reseed the local
+// state and re-fetch from the server. Watching the uuid (not items)
+// so empty-result swaps still trigger.
+watch(
+  () => props.selectedResult?.uuid,
+  () => {
+    items.value = props.selectedResult?.data?.items ?? [];
+    columns.value = props.selectedResult?.data?.columns ?? [];
+    void refresh();
+  },
+);
+
+// ── View mode (persisted in localStorage) ───────────────────────
+
+const VALID_VIEW_MODES: ReadonlySet<string> = new Set(Object.values(TODO_VIEW));
+
+function loadViewMode(): ViewMode {
+  const stored = localStorage.getItem(VIEW_MODE_KEY);
+  if (stored && VALID_VIEW_MODES.has(stored)) {
+    return stored as ViewMode;
+  }
+  return TODO_VIEW.kanban;
+}
+
+const viewMode = ref<ViewMode>(loadViewMode());
+
+function setViewMode(next: ViewMode): void {
+  viewMode.value = next;
+  localStorage.setItem(VIEW_MODE_KEY, next);
+}
+
+// ── Filtering ──────────────────────────────────────────────────
+
+const search = ref("");
+const activeFilters = ref<Set<string>>(new Set());
+
+const labelInventory = computed(() => listLabelsWithCount(items.value));
+
+function toggleFilter(label: string): void {
+  const key = label.toLowerCase();
+  const next = new Set(activeFilters.value);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  activeFilters.value = next;
+}
+
+function clearFilters(): void {
+  activeFilters.value = new Set();
+}
+
+const filteredItems = computed(() => {
+  const byLabels = filterByLabels(items.value, [...activeFilters.value]);
+  const query = search.value.trim().toLowerCase();
+  if (query.length === 0) return byLabels;
+  return byLabels.filter((item) => {
+    if (item.text.toLowerCase().includes(query)) return true;
+    if (item.note?.toLowerCase().includes(query)) return true;
+    return false;
+  });
+});
+
+const completedCount = computed(() => items.value.filter((i) => i.completed).length);
+
+// ── Add dialog ─────────────────────────────────────────────────
+
+const addOpen = ref(false);
+const addDefaultStatus = ref<string | undefined>(undefined);
+
+function quickAddInColumn(statusId: string): void {
+  addDefaultStatus.value = statusId;
+  addOpen.value = true;
+}
+
+async function onCreateItem(input: CreateItemInput): Promise<void> {
+  const created = await createItem(input);
+  if (created) {
+    addOpen.value = false;
+    addDefaultStatus.value = undefined;
+  }
+}
+
+// ── Add column dialog ──────────────────────────────────────────
+
+const addColumnOpen = ref(false);
+const newColumnLabel = ref("");
+
+async function commitNewColumn(): Promise<void> {
+  const label = newColumnLabel.value.trim();
+  if (label.length === 0) return;
+  const added = await addColumn({ label });
+  if (added) {
+    addColumnOpen.value = false;
+    newColumnLabel.value = "";
+  }
+}
+
+// Escape closes the inline add-column dialog. The Add and Edit
+// dialogs handle their own Escape via document listeners; this one
+// is owned by the explorer template directly so it lives here.
+function onExplorerKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Escape") return;
+  if (addColumnOpen.value) {
+    addColumnOpen.value = false;
+  }
+}
+onMounted(() => document.addEventListener("keydown", onExplorerKeydown));
+onUnmounted(() => document.removeEventListener("keydown", onExplorerKeydown));
+
+// ── Item handlers ──────────────────────────────────────────────
+
+function onPatchItem(itemId: string, input: PatchItemInput): void {
+  void patchItem(itemId, input);
+}
+
+// Single confirm gate for every item deletion path: row "✕" buttons
+// in list/table, the kanban edit dialog's delete button, anything
+// else that wants to remove an item. Centralised so we never
+// accidentally bypass the confirm in a future caller.
+function confirmAndDelete(itemId: string): boolean {
+  const item = items.value.find((i) => i.id === itemId);
+  if (!item) return false;
+  const confirmed = window.confirm(`Delete "${item.text}"?`);
+  if (!confirmed) return false;
+  void deleteItem(itemId);
+  return true;
+}
+
+function onDeleteItem(itemId: string): void {
+  confirmAndDelete(itemId);
+}
+
+function onToggleComplete(item: TodoItem): void {
+  void patchItem(item.id, { completed: !item.completed });
+}
+
+function onMove(itemId: string, statusId: string, position: number): void {
+  void moveItem(itemId, { status: statusId, position });
+}
+
+// ── Edit dialog (kanban click) ─────────────────────────────────
+
+const editingItem = ref<TodoItem | null>(null);
+
+function onOpenItem(item: TodoItem): void {
+  // Kanban cards open the modal edit dialog. List and Table views
+  // have their own inline edit panels and don't go through here.
+  editingItem.value = item;
+}
+
+async function onEditDialogSave(input: PatchItemInput): Promise<void> {
+  const target = editingItem.value;
+  if (!target) return;
+  const saved = await patchItem(target.id, input);
+  if (saved) editingItem.value = null;
+}
+
+function onEditDialogDelete(itemId: string): void {
+  // Funnel through the same confirm gate as the inline ✕ buttons.
+  // The dialog only closes if the user confirmed; if they cancelled
+  // the confirm, the dialog stays open so they can keep editing.
+  if (confirmAndDelete(itemId)) editingItem.value = null;
+}
+
+// ── Column handlers ────────────────────────────────────────────
+
+function onRenameColumn(columnId: string, label: string): void {
+  void patchColumn(columnId, { label });
+}
+
+function onDeleteColumn(columnId: string): void {
+  // Use a native confirm dialog: deleting a column reassigns its
+  // items, which is reversible but worth a beat. The other column
+  // operations (rename, mark-done) are inexpensive enough not to need
+  // confirmation.
+  const col = columns.value.find((column) => column.id === columnId);
+  if (!col) return;
+  const confirmed = window.confirm(`Delete column "${col.label}"? Items in this column will be moved to another column.`);
+  if (!confirmed) return;
+  void deleteColumn(columnId);
+}
+
+function onMarkDone(columnId: string): void {
+  void patchColumn(columnId, { isDone: true });
+}
+
+function onReorderColumns(ids: string[]): void {
+  void reorderColumns(ids);
+}
+</script>

package/src/components/ToolResultsPanel.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    ref="root"
+    class="flex-1 min-h-0 overflow-y-auto p-2 space-y-2 bg-gray-100 outline-none"
+    tabindex="0"
+    data-testid="tool-results-scroll"
+    @mousedown="emit('activate')"
+  >
+    <div
+      v-for="result in results"
+      :key="result.uuid"
+      class="cursor-pointer rounded border border-gray-300 p-2 text-sm text-gray-900 hover:opacity-75 transition-opacity"
+      :class="result.uuid === selectedUuid ? 'ring-2 ring-blue-500' : ''"
+      @click="emit('select', result.uuid)"
+    >
+      <div class="flex items-center gap-1">
+        <component
+          :is="getPlugin(result.toolName)?.previewComponent"
+          v-if="getPlugin(result.toolName)?.previewComponent"
+          :result="result"
+          class="flex-1 min-w-0"
+        />
+        <span v-else class="flex-1 min-w-0 truncate">{{ result.title || result.toolName }}</span>
+        <span v-if="resultTimestamps.get(result.uuid)" class="text-[10px] text-gray-400 shrink-0">{{
+          formatSmartTime(resultTimestamps.get(result.uuid)!)
+        }}</span>
+      </div>
+    </div>
+
+    <!-- Thinking indicator -->
+    <div v-if="isRunning" class="px-2 py-1 text-sm">
+      <div class="flex items-center gap-2 text-gray-500">
+        <span class="text-xs">{{ statusMessage }}</span>
+        <span class="flex gap-1">
+          <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0ms" />
+          <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 150ms" />
+          <span class="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 300ms" />
+        </span>
+      </div>
+      <div v-if="pendingCalls.length > 0" class="mt-1 space-y-0.5">
+        <div v-for="call in pendingCalls" :key="call.toolUseId" class="flex items-center gap-1.5 text-xs text-gray-400">
+          <span class="w-1.5 h-1.5 rounded-full bg-blue-300 shrink-0 animate-pulse" />
+          <span class="font-mono truncate">{{ call.toolName }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+import { getPlugin } from "../tools";
+import { formatSmartTime } from "../utils/format/date";
+
+interface PendingCall {
+  toolUseId: string;
+  toolName: string;
+}
+
+defineProps<{
+  results: ToolResultComplete[];
+  selectedUuid: string | null;
+  resultTimestamps: Map<string, number>;
+  isRunning: boolean;
+  statusMessage: string;
+  pendingCalls: PendingCall[];
+}>();
+
+const emit = defineEmits<{
+  select: [uuid: string];
+  activate: [];
+}>();
+
+const root = ref<HTMLDivElement | null>(null);
+defineExpose({ root });
+</script>

package/src/components/todo/TodoAddDialog.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="fixed inset-0 z-50 bg-black/30 flex items-center justify-center" @click="emit('cancel')">
+    <div
+      class="bg-white rounded-lg shadow-xl w-96 max-w-[90vw] p-5 space-y-3"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="todo-add-dialog-title"
+      @click.stop
+    >
+      <h3 id="todo-add-dialog-title" class="text-base font-semibold text-gray-800">Add Todo</h3>
+      <label class="block text-xs text-gray-600">
+        Text
+        <input
+          ref="textInput"
+          v-model="text"
+          type="text"
+          placeholder="What needs doing?"
+          class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          @keydown.enter="submit"
+        />
+      </label>
+      <label class="block text-xs text-gray-600">
+        Note
+        <textarea
+          v-model="note"
+          rows="2"
+          class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded resize-y focus:outline-none focus:border-blue-400"
+        />
+      </label>
+      <div class="grid grid-cols-2 gap-3">
+        <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 border border-gray-300 rounded focus:outline-none focus:border-blue-400">
+            <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 border border-gray-300 rounded focus:outline-none focus:border-blue-400">
+            <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 border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          />
+        </label>
+        <label class="block text-xs text-gray-600">
+          Labels
+          <input
+            v-model="labelsText"
+            type="text"
+            placeholder="work, urgent"
+            class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
+          />
+        </label>
+      </div>
+      <div class="flex justify-end gap-2 pt-1">
+        <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>
+        <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="submit">Add</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import type { StatusColumn } from "../../plugins/todo/index";
+import { PRIORITIES, PRIORITY_LABELS } from "../../plugins/todo/priority";
+import type { CreateItemInput } from "../../plugins/todo/composables/useTodos";
+
+const props = defineProps<{
+  columns: StatusColumn[];
+  defaultStatus?: string;
+}>();
+
+const emit = defineEmits<{
+  cancel: [];
+  create: [input: CreateItemInput];
+}>();
+
+const text = ref("");
+const note = ref("");
+const status = ref<string>(props.defaultStatus ?? props.columns[0]?.id ?? "");
+const priority = ref<string>("");
+const dueDate = ref("");
+const labelsText = ref("");
+
+const textInput = ref<HTMLInputElement | null>(null);
+
+// Escape closes the dialog. Bound at the document level rather than
+// on the modal div so it works no matter where focus is — Vue's
+// `@keydown.esc` only fires when the modal owns focus, which it
+// loses as soon as the user tabs into one of the form inputs.
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") emit("cancel");
+}
+
+onMounted(() => {
+  textInput.value?.focus();
+  document.addEventListener("keydown", onKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown);
+});
+
+function submit(): void {
+  const trimmed = text.value.trim();
+  if (trimmed.length === 0) return;
+  const input: CreateItemInput = { text: trimmed };
+  if (note.value !== "") input.note = note.value;
+  if (status.value !== "") input.status = status.value;
+  if (priority.value !== "") input.priority = priority.value;
+  if (dueDate.value !== "") input.dueDate = dueDate.value;
+  const labels = labelsText.value
+    .split(",")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+  if (labels.length > 0) input.labels = labels;
+  emit("create", input);
+}
+</script>

package/src/components/todo/TodoEditDialog.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="fixed inset-0 z-50 bg-black/30 flex items-center justify-center" @click="emit('cancel')">
+    <div
+      class="bg-white rounded-lg shadow-xl w-[28rem] max-w-[92vw] overflow-hidden"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="todo-edit-dialog-title"
+      @click.stop
+    >
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <h3 id="todo-edit-dialog-title" class="text-base font-semibold text-gray-800">Edit Todo</h3>
+        <button class="text-gray-400 hover:text-red-500 text-xs px-2 py-0.5" title="Delete this item" @click="emit('delete', item.id)">Delete</button>
+      </div>
+      <TodoEditPanel :item="item" :columns="columns" @save="(input) => emit('save', input)" @cancel="emit('cancel')" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from "vue";
+import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
+import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
+import TodoEditPanel from "./TodoEditPanel.vue";
+
+defineProps<{
+  item: TodoItem;
+  columns: StatusColumn[];
+}>();
+
+const emit = defineEmits<{
+  save: [input: PatchItemInput];
+  cancel: [];
+  delete: [id: string];
+}>();
+// The parent (TodoExplorer) gates deletion behind a single confirm
+// helper, so this dialog just emits the delete intent and lets the
+// caller decide whether to actually remove the item.
+
+// Escape closes the dialog. Document-level listener so it works even
+// when focus is inside the form (Vue's @keydown.esc only fires on
+// the element that owns focus).
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") emit("cancel");
+}
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onUnmounted(() => document.removeEventListener("keydown", onKeydown));
+</script>