mulmoclaude 0.1.2 → 0.4.0

package/src/components/TodoExplorer.vue

@@ -3,19 +3,21 @@
     <!-- 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>
+        <h2 class="text-base font-semibold text-gray-800 shrink-0">{{ t("todoExplorer.heading") }}</h2>
+        <span class="text-xs text-gray-500 shrink-0">{{ t("todoExplorer.doneRatio", { done: completedCount, total: items.length }) }}</span>
         <input
           v-model="search"
           data-testid="todo-search"
           type="text"
-          placeholder="Search..."
+          :placeholder="t('todoExplorer.searchPlaceholder')"
           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>
+        <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">
+          {{ t("todoExplorer.addButton") }}
+        </button>
         <!-- Add column button (kanban only) -->
         <button
           v-if="viewMode === TODO_VIEW.kanban"
@@ -23,7 +25,7 @@
           class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
           @click="addColumnOpen = true"
         >
-          + Column
+          {{ t("todoExplorer.addColumnButton") }}
         </button>
         <!-- View mode toggle -->
         <div class="flex border border-gray-300 rounded overflow-hidden text-xs">
@@ -44,7 +46,7 @@
 
     <!-- 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>
+      <span class="text-[11px] text-gray-500 mr-1">{{ t("todoExplorer.labels") }}</span>
       <button
         v-for="entry in labelInventory"
         :key="entry.label"
@@ -59,8 +61,13 @@
         {{ 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
+        v-if="activeFilters.size > 0"
+        class="ml-auto text-[11px] text-gray-500 hover:text-gray-700"
+        :title="t('todoExplorer.clearFiltersTitle')"
+        @click="clearFilters"
+      >
+        {{ t("todoExplorer.clearButton") }}
       </button>
     </div>
 
@@ -71,7 +78,7 @@
 
     <!-- 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>
+      <div v-if="items.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoExplorer.emptyHint") }}</div>
       <template v-else>
         <TodoKanbanView
           v-if="viewMode === TODO_VIEW.kanban"
@@ -122,20 +129,22 @@
     <!-- 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>
+        <h3 id="todo-add-column-title" class="text-base font-semibold text-gray-800">{{ t("todoExplorer.addColumn") }}</h3>
         <label class="block text-xs text-gray-600">
-          Label
+          {{ t("todoExplorer.newColumnLabelField") }}
           <input
             v-model="newColumnLabel"
             type="text"
-            placeholder="Review"
+            :placeholder="t('todoExplorer.newColumnPlaceholder')"
             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>
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="addColumnOpen = false">
+            {{ t("common.cancel") }}
+          </button>
+          <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="commitNewColumn">{{ t("common.add") }}</button>
         </div>
       </div>
     </div>
@@ -144,6 +153,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TodoData, TodoItem } from "../plugins/todo/index";
 import { colorForLabel, filterByLabels, listLabelsWithCount } from "../plugins/todo/labels";
@@ -153,9 +163,10 @@ 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 { t } = useI18n();
+
 const VIEW_MODE_KEY = "todo_explorer_view_mode";
 
 const props = defineProps<{

package/src/components/ToolResultsPanel.vue

@@ -9,22 +9,21 @@
     <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="relative cursor-pointer rounded border border-gray-300 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>
+      <span class="absolute top-0 left-2 -translate-y-1/2 bg-gray-100 px-1 text-[10px] text-gray-400 leading-none pointer-events-none">
+        {{ sourceLabel(result) }}
+      </span>
+      <span
+        v-if="resultTimestamps.get(result.uuid)"
+        class="absolute top-0 right-2 -translate-y-1/2 bg-gray-100 px-1 text-[10px] text-gray-400 leading-none pointer-events-none"
+      >
+        {{ formatSmartTime(resultTimestamps.get(result.uuid)!) }}
+      </span>
+      <component :is="getPlugin(result.toolName)?.previewComponent" v-if="getPlugin(result.toolName)?.previewComponent" :result="result" />
+      <span v-else class="block truncate p-2">{{ result.title || result.toolName }}</span>
     </div>
 
     <!-- Thinking indicator -->
@@ -53,6 +52,11 @@ import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import { getPlugin } from "../tools";
 import { formatSmartTime } from "../utils/format/date";
 
+function sourceLabel(result: ToolResultComplete): string {
+  if (result.toolName === "text-response") return result.title ?? "Assistant";
+  return result.toolName;
+}
+
 interface PendingCall {
   toolUseId: string;
   toolName: string;
@@ -75,3 +79,13 @@ const emit = defineEmits<{
 const root = ref<HTMLDivElement | null>(null);
 defineExpose({ root });
 </script>
+
+<style scoped>
+/* Prevent rendered markdown links inside preview cards from navigating.
+   Clicking a sidebar card should select the result, not follow links. */
+:deep(a) {
+  pointer-events: none;
+  color: inherit;
+  text-decoration: none;
+}
+</style>

package/src/components/todo/TodoAddDialog.vue

@@ -7,20 +7,20 @@
       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>
+      <h3 id="todo-add-dialog-title" class="text-base font-semibold text-gray-800">{{ t("todoDialogs.addTitle") }}</h3>
       <label class="block text-xs text-gray-600">
-        Text
+        {{ t("todoDialogs.fieldText") }}
         <input
           ref="textInput"
           v-model="text"
           type="text"
-          placeholder="What needs doing?"
+          :placeholder="t('todoDialogs.textPlaceholder')"
           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
+        {{ t("todoDialogs.fieldNote") }}
         <textarea
           v-model="note"
           rows="2"
@@ -29,7 +29,7 @@
       </label>
       <div class="grid grid-cols-2 gap-3">
         <label class="block text-xs text-gray-600">
-          Status
+          {{ t("todoDialogs.fieldStatus") }}
           <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 }}
@@ -37,16 +37,16 @@
           </select>
         </label>
         <label class="block text-xs text-gray-600">
-          Priority
+          {{ t("todoDialogs.fieldPriority") }}
           <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 value="">{{ t("todoDialogs.noneOption") }}</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
+          {{ t("todoDialogs.fieldDueDate") }}
           <input
             v-model="dueDate"
             type="date"
@@ -54,18 +54,20 @@
           />
         </label>
         <label class="block text-xs text-gray-600">
-          Labels
+          {{ t("todoDialogs.fieldLabels") }}
           <input
             v-model="labelsText"
             type="text"
-            placeholder="work, urgent"
+            :placeholder="t('todoDialogs.labelsPlaceholder')"
             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>
+        <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">
+          {{ t("common.cancel") }}
+        </button>
+        <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="submit">{{ t("common.add") }}</button>
       </div>
     </div>
   </div>
@@ -73,10 +75,13 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn } from "../../plugins/todo/index";
 import { PRIORITIES, PRIORITY_LABELS } from "../../plugins/todo/priority";
 import type { CreateItemInput } from "../../plugins/todo/composables/useTodos";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   columns: StatusColumn[];
   defaultStatus?: string;
@@ -123,8 +128,8 @@ function submit(): void {
   if (dueDate.value !== "") input.dueDate = dueDate.value;
   const labels = labelsText.value
     .split(",")
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0);
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
   if (labels.length > 0) input.labels = labels;
   emit("create", input);
 }

package/src/components/todo/TodoEditDialog.vue

@@ -8,8 +8,10 @@
       @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>
+        <h3 id="todo-edit-dialog-title" class="text-base font-semibold text-gray-800">{{ t("todoDialogs.editTitle") }}</h3>
+        <button class="text-gray-400 hover:text-red-500 text-xs px-2 py-0.5" :title="t('todoDialogs.deleteTitle')" @click="emit('delete', item.id)">
+          {{ t("todoDialogs.deleteButton") }}
+        </button>
       </div>
       <TodoEditPanel :item="item" :columns="columns" @save="(input) => emit('save', input)" @cancel="emit('cancel')" />
     </div>
@@ -18,10 +20,13 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
 import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 import TodoEditPanel from "./TodoEditPanel.vue";
 
+const { t } = useI18n();
+
 defineProps<{
   item: TodoItem;
   columns: StatusColumn[];

package/src/components/todo/TodoEditPanel.vue

@@ -2,7 +2,7 @@
   <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
+        {{ t("todoDialogs.fieldText") }}
         <input
           v-model="text"
           type="text"
@@ -10,7 +10,7 @@
         />
       </label>
       <label class="block text-xs text-gray-600 sm:col-span-2">
-        Note
+        {{ t("todoDialogs.fieldNote") }}
         <textarea
           v-model="note"
           rows="2"
@@ -18,7 +18,7 @@
         />
       </label>
       <label class="block text-xs text-gray-600">
-        Status
+        {{ t("todoDialogs.fieldStatus") }}
         <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 }}
@@ -26,16 +26,16 @@
         </select>
       </label>
       <label class="block text-xs text-gray-600">
-        Priority
+        {{ t("todoDialogs.fieldPriority") }}
         <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 value="">{{ t("todoDialogs.noneOption") }}</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
+        {{ t("todoDialogs.fieldDueDate") }}
         <input
           v-model="dueDate"
           type="date"
@@ -43,28 +43,33 @@
         />
       </label>
       <label class="block text-xs text-gray-600">
-        Labels (comma-separated)
+        {{ t("todoDialogs.fieldLabelsCommaSeparated") }}
         <input
           v-model="labelsText"
           type="text"
-          placeholder="work, urgent"
+          :placeholder="t('todoDialogs.labelsPlaceholder')"
           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>
+      <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="save">{{ t("common.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')">
+        {{ t("common.cancel") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 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 { t } = useI18n();
+
 const props = defineProps<{
   item: TodoItem;
   columns: StatusColumn[];
@@ -85,8 +90,8 @@ const labelsText = ref((props.item.labels ?? []).join(", "));
 function parseLabels(raw: string): string[] {
   return raw
     .split(",")
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0);
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
 }
 
 function save(): void {

package/src/components/todo/TodoKanbanView.vue

@@ -32,7 +32,7 @@
               <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)">
+              <button class="text-gray-400 hover:text-gray-600 px-1" :title="t('todoKanban.columnActions')" @click="toggleMenu(col.id)">
                 <span class="material-icons text-base">more_horiz</span>
               </button>
               <div
@@ -40,11 +40,13 @@
                 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="startRename(col)">{{ t("todoKanban.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" }}
+                  {{ col.isDone ? t("todoKanban.alreadyDoneColumn") : t("todoKanban.markAsDoneColumn") }}
+                </button>
+                <button class="w-full text-left px-3 py-1.5 text-red-600 hover:bg-red-50" @click="deleteColumn(col.id)">
+                  {{ t("todoKanban.deleteColumn") }}
                 </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>
@@ -103,7 +105,7 @@
 
           <!-- 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
+            {{ t("todoKanban.addCard") }}
           </button>
         </div>
       </template>
@@ -113,11 +115,14 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 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";
 
+const { t } = useI18n();
+
 // 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

package/src/components/todo/TodoListView.vue

@@ -1,6 +1,6 @@
 <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>
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoTableList.noMatchingFilter") }}</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)">
@@ -25,7 +25,7 @@
           </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"
+            :title="t('pluginTodo.deleteItem')"
             @click.stop="emit('delete', item.id)"
           >
             ✕
@@ -39,12 +39,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 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 { t } = useI18n();
+
 const props = defineProps<{
   filteredItems: TodoItem[];
   columns: StatusColumn[];
@@ -58,22 +61,22 @@ const emit = defineEmits<{
 
 const expandedId = ref<string | null>(null);
 
-function toggleExpand(id: string): void {
-  expandedId.value = expandedId.value === id ? null : id;
+function toggleExpand(itemId: string): void {
+  expandedId.value = expandedId.value === itemId ? null : itemId;
 }
 
 function toggleComplete(item: TodoItem): void {
   emit("toggleComplete", item);
 }
 
-function onSave(id: string, input: PatchItemInput): void {
-  emit("patch", id, input);
+function onSave(itemId: string, input: PatchItemInput): void {
+  emit("patch", itemId, input);
   expandedId.value = null;
 }
 
 function statusLabel(item: TodoItem): string {
   if (!item.status) return "";
-  const col = props.columns.find((c) => c.id === item.status);
+  const col = props.columns.find((column) => column.id === item.status);
   return col?.label ?? "";
 }
 </script>

package/src/components/todo/TodoTableView.vue

@@ -1,6 +1,6 @@
 <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>
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoTableList.noMatchingFilter") }}</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">
@@ -53,7 +53,7 @@
               {{ 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>
+              <button class="text-gray-300 hover:text-red-500 text-xs" :title="t('pluginTodo.deleteItem')" @click="emit('delete', item.id)">✕</button>
             </td>
           </tr>
           <tr v-if="expandedId === item.id">
@@ -69,6 +69,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 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";
@@ -76,6 +77,8 @@ import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 import TodoEditPanel from "./TodoEditPanel.vue";
 import { formatShortDate } from "../../utils/format/date";
 
+const { t } = useI18n();
+
 type SortKey = "completed" | "text" | "status" | "priority" | "labels" | "dueDate" | "createdAt";
 type SortDir = "asc" | "desc";
 

package/src/composables/useAppApi.ts

@@ -20,6 +20,15 @@ export interface AppApi {
   refreshRoles: () => void | Promise<void>;
   /** Send a chat message through App.vue's normal sendMessage pipeline. */
   sendMessage: (message: string) => void;
+  /**
+   * Open a fresh chat session (using the currently selected role) and
+   * send `message` as its first turn. Used by plugin views that want
+   * to kick off a new conversation instead of threading into whatever
+   * session happens to be active.
+   */
+  startNewChat: (message: string) => void;
+  /** Navigate to a workspace-internal link (wiki page, file, session). */
+  navigateToWorkspacePath: (href: string) => void;
 }
 
 const APP_API_KEY = Symbol("appApi");

package/src/composables/useClickOutside.ts

@@ -16,9 +16,9 @@ interface UseClickOutsideOptions {
 export function useClickOutside(opts: UseClickOutsideOptions): {
   handler: (e: MouseEvent) => void;
 } {
-  function handler(e: MouseEvent): void {
+  function handler(event: MouseEvent): void {
     if (!opts.isOpen.value) return;
-    if (isClickOutside(e.target as Node | null, opts.buttonRef.value, opts.popupRef.value)) {
+    if (isClickOutside(event.target as Node | null, opts.buttonRef.value, opts.popupRef.value)) {
       opts.isOpen.value = false;
     }
   }