mulmoclaude 0.1.2 → 0.4.0

package/src/plugins/scheduler/formatSchedule.ts

@@ -0,0 +1,93 @@
+// Pure formatters for scheduler-task display. Extracted from
+// TasksTab.vue so the UTC → local conversion can be unit-tested
+// without spinning up Vue.
+//
+// Internally every task stores its daily trigger as `HH:MM` in UTC
+// (that's what the scheduler engine fires on). The UI should show the
+// same moment in the viewer's local timezone so a user in Tokyo sees
+// "Daily 05:00 JST" instead of "Daily 20:00 UTC".
+
+export interface DailySchedule {
+  type: "daily";
+  time: string; // "HH:MM" in UTC
+}
+
+export interface IntervalSchedule {
+  type: "interval";
+  intervalMs: number;
+}
+
+export type TaskSchedule = DailySchedule | IntervalSchedule | { type: string; [k: string]: unknown };
+
+const DAILY_TIME_RE = /^(\d{1,2}):(\d{2})$/;
+
+// Build a Date anchored to `now`'s local calendar day but at the
+// requested UTC wall-clock hour/minute. Using today's date (rather
+// than epoch 1970) makes the DST/TZ conversion accurate for the
+// viewer's current moment — "20:00 UTC every day" in Europe/London
+// can differ by an hour between summer and winter.
+function buildUtcInstant(utcHour: number, utcMinute: number, now: Date): Date {
+  return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), utcHour, utcMinute));
+}
+
+// Intl formatter configured to surface HH:MM + the short timezone
+// name (e.g. "JST", "PDT"). When the browser can't resolve a zone
+// abbreviation it falls back to the offset string ("GMT+9"), which
+// is fine — the point is that the user doesn't have to mentally
+// convert from UTC.
+const LOCAL_TIME_FORMATTER = new Intl.DateTimeFormat(undefined, {
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: false,
+  timeZoneName: "short",
+});
+
+function extractHourMinuteTz(date: Date): { hourMinute: string; tzLabel: string } | null {
+  try {
+    const parts = LOCAL_TIME_FORMATTER.formatToParts(date);
+    const hour = parts.find((part) => part.type === "hour")?.value ?? "";
+    const minute = parts.find((part) => part.type === "minute")?.value ?? "";
+    const tzLabel = parts.find((part) => part.type === "timeZoneName")?.value ?? "";
+    if (!hour || !minute) return null;
+    // Intl returns "24" for midnight hour under `hour: "2-digit"` on
+    // some runtimes — normalize so "Daily 24:00 JST" never appears.
+    const normalizedHour = hour === "24" ? "00" : hour;
+    return { hourMinute: `${normalizedHour}:${minute}`, tzLabel };
+  } catch {
+    return null;
+  }
+}
+
+// Convert a UTC "HH:MM" into "Daily HH:MM <tz>" in the viewer's
+// local zone. Returns the original "Daily HH:MM UTC" string if the
+// input is malformed or the Intl machinery is unavailable — callers
+// never see `null`/throw for a scheduler entry.
+export function formatDailyLocal(utcHHMM: string, now: Date = new Date()): string {
+  const match = DAILY_TIME_RE.exec(utcHHMM);
+  if (!match) return `Daily ${utcHHMM} UTC`;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (!Number.isFinite(hour) || !Number.isFinite(minute) || hour > 23 || minute > 59) {
+    return `Daily ${utcHHMM} UTC`;
+  }
+  const extracted = extractHourMinuteTz(buildUtcInstant(hour, minute, now));
+  if (!extracted) return `Daily ${utcHHMM} UTC`;
+  return `Daily ${extracted.hourMinute} ${extracted.tzLabel}`;
+}
+
+export function formatInterval(intervalMs: number): string {
+  if (!Number.isFinite(intervalMs) || intervalMs <= 0) return "Every ?";
+  const mins = Math.round(intervalMs / 60_000);
+  if (mins >= 60) return `Every ${Math.round(mins / 60)}h`;
+  return `Every ${mins}m`;
+}
+
+export function formatSchedule(schedule: TaskSchedule, now: Date = new Date()): string {
+  if (schedule.type === "interval" && typeof (schedule as IntervalSchedule).intervalMs === "number") {
+    return formatInterval((schedule as IntervalSchedule).intervalMs);
+  }
+  if (schedule.type === "daily" && typeof (schedule as DailySchedule).time === "string") {
+    return formatDailyLocal((schedule as DailySchedule).time, now);
+  }
+  return JSON.stringify(schedule);
+}

package/src/plugins/spreadsheet/Preview.vue

@@ -1,24 +1,29 @@
 <template>
   <div class="text-center p-4 bg-green-50 dark:bg-green-900 rounded">
-    <div class="text-green-600 dark:text-green-300 font-medium">📊 Spreadsheet</div>
+    <div class="text-green-600 dark:text-green-300 font-medium">{{ t("pluginSpreadsheet.previewLabel") }}</div>
     <div class="text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate">
       {{ displayTitle }}
     </div>
-    <div v-if="sheetCount > 1" class="text-xs text-gray-600 dark:text-gray-400 mt-1">{{ sheetCount }} sheets</div>
+    <div v-if="sheetCount > 1" class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+      {{ t("pluginSpreadsheet.previewSheets", sheetCount, { named: { count: sheetCount } }) }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResult } from "gui-chat-protocol";
 import type { SpreadsheetToolData } from "./definition";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   result: ToolResult<SpreadsheetToolData>;
 }>();
 
 const displayTitle = computed(() => {
-  return props.result.title || "Spreadsheet";
+  return props.result.title || t("pluginSpreadsheet.previewUntitled");
 });
 
 const sheetCount = computed(() => {

package/src/plugins/spreadsheet/View.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="spreadsheet-container">
     <div v-if="loading" class="min-h-full p-8 flex items-center justify-center">
-      <div class="text-gray-500">Loading spreadsheet...</div>
+      <div class="text-gray-500">{{ t("pluginSpreadsheet.loading") }}</div>
     </div>
     <div v-else-if="errorMessage" class="min-h-full p-8 flex items-center justify-center">
       <div class="error">{{ errorMessage }}</div>
     </div>
     <div v-else-if="!resolvedSheets || resolvedSheets.length === 0" class="min-h-full p-8 flex items-center justify-center">
-      <div class="text-gray-500">No spreadsheet data available</div>
+      <div class="text-gray-500">{{ t("pluginSpreadsheet.noData") }}</div>
     </div>
     <template v-else>
       <div class="spreadsheet-content-wrapper">
         <div class="p-4">
           <div class="header">
             <h1 class="title">
-              {{ selectedResult.title || "Spreadsheet" }}
+              {{ selectedResult.title || t("pluginSpreadsheet.untitled") }}
             </h1>
             <div class="button-group">
               <button class="download-btn excel-btn" @click="downloadExcel">
                 <span class="material-icons">download</span>
-                Excel
+                {{ t("pluginSpreadsheet.excel") }}
               </button>
             </div>
           </div>
@@ -43,9 +43,9 @@
 
       <!-- Collapsible Editor -->
       <details v-if="!miniEditorOpen" ref="editorDetails" class="spreadsheet-source">
-        <summary>Edit Spreadsheet Data</summary>
+        <summary>{{ t("pluginSpreadsheet.editData") }}</summary>
         <textarea ref="editorTextarea" v-model="editableData" class="spreadsheet-editor" spellcheck="false" @input="handleDataEdit"></textarea>
-        <button class="apply-btn" :disabled="!hasChanges" @click="applyChanges">Apply Changes</button>
+        <button class="apply-btn" :disabled="!hasChanges" @click="applyChanges">{{ t("pluginSpreadsheet.applyChanges") }}</button>
       </details>
 
       <!-- Mini Editor at Bottom -->
@@ -57,11 +57,11 @@
           <div class="radio-group">
             <label class="radio-option">
               <input v-model="miniEditorType" type="radio" value="string" />
-              String
+              {{ t("pluginSpreadsheet.stringType") }}
             </label>
             <label class="radio-option">
               <input v-model="miniEditorType" type="radio" value="object" />
-              Formula
+              {{ t("pluginSpreadsheet.formulaType") }}
             </label>
           </div>
 
@@ -71,7 +71,7 @@
             v-model="miniEditorValue"
             type="text"
             class="form-input"
-            placeholder="Value"
+            :placeholder="t('pluginSpreadsheet.valuePlaceholder')"
             @keyup.enter="saveMiniEditor"
           />
 
@@ -81,13 +81,19 @@
               v-model="miniEditorFormula"
               type="text"
               class="form-input"
-              placeholder="Value or Formula (e.g., 100 or SUM(B2:B11))"
+              :placeholder="t('pluginSpreadsheet.valueOrFormulaPlaceholder')"
+              @keyup.enter="saveMiniEditor"
+            />
+            <input
+              v-model="miniEditorFormat"
+              type="text"
+              class="form-input"
+              :placeholder="t('pluginSpreadsheet.formatPlaceholder')"
               @keyup.enter="saveMiniEditor"
             />
-            <input v-model="miniEditorFormat" type="text" class="form-input" placeholder="Format (e.g., $#,##0.00)" @keyup.enter="saveMiniEditor" />
           </template>
 
-          <button class="save-btn" @click="saveMiniEditor">Update</button>
+          <button class="save-btn" @click="saveMiniEditor">{{ t("pluginSpreadsheet.update") }}</button>
           <button class="cancel-btn" @click="closeMiniEditor">✕</button>
         </div>
       </div>
@@ -97,6 +103,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import * as XLSX from "xlsx";
 import type { ToolResult } from "gui-chat-protocol";
 import type { SpreadsheetToolData, SpreadsheetSheet } from "./definition";
@@ -119,6 +126,8 @@ import { API_ROUTES } from "../../config/apiRoutes";
 import type { FilesContentResponseLike } from "./engine/responseDecoder";
 import { isObj, isRecord } from "../../utils/types";
 
+const { t } = useI18n();
+
 /**
  * Normalize malformed data structures
  * Some models generate flat arrays instead of 2D arrays - fix them

package/src/plugins/textResponse/Preview.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="text-sm leading-snug" :class="textColorClass">
-    <div class="preview-markdown" v-html="renderedMarkdown" />
-  </div>
+  <div class="preview-text p-2 text-sm leading-snug" :class="textColorClass">{{ previewText }}</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +12,6 @@ const props = defineProps<{
   result: ToolResultComplete<TextResponseData>;
 }>();
 
-const previewText = computed(() => props.result.data?.text ?? "");
 const messageRole = computed(() => props.result.data?.role ?? "assistant");
 
 const textColorClass = computed(() => {
@@ -28,67 +25,27 @@ const textColorClass = computed(() => {
   }
 });
 
-const renderedMarkdown = computed(() => marked(previewText.value, { breaks: true, gfm: true }));
+const previewText = computed(() => markdownToPlainText(props.result.data?.text ?? ""));
+
+function markdownToPlainText(markdown: string): string {
+  const html = marked(markdown, { breaks: true, gfm: true }) as string;
+  const spaced = html
+    .replace(/<\/(td|th)>/gi, " ")
+    .replace(/<\/(p|h[1-6]|li|tr|blockquote|pre|div)>/gi, "$&\n")
+    .replace(/<br\s*\/?>/gi, "\n");
+  const doc = new DOMParser().parseFromString(spaced, "text/html");
+  const text = doc.body.textContent ?? "";
+  return text.replace(/\n{3,}/g, "\n\n").trim();
+}
 </script>
 
 <style scoped>
-.preview-markdown {
+.preview-text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
-  /* Links inside v-html would otherwise hijack the row-level
-     select click and navigate to the article URL. */
-  pointer-events: none;
-}
-
-.preview-markdown :deep(p) {
-  margin: 0;
-  display: inline;
-}
-
-.preview-markdown :deep(h1),
-.preview-markdown :deep(h2),
-.preview-markdown :deep(h3),
-.preview-markdown :deep(h4),
-.preview-markdown :deep(h5),
-.preview-markdown :deep(h6) {
-  font-size: inherit;
-  font-weight: bold;
-  display: inline;
-}
-
-.preview-markdown :deep(ul),
-.preview-markdown :deep(ol) {
-  display: inline;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.preview-markdown :deep(li) {
-  display: inline;
-}
-
-.preview-markdown :deep(li)::before {
-  content: "• ";
-}
-
-.preview-markdown :deep(strong) {
-  font-weight: bold;
-}
-
-.preview-markdown :deep(em) {
-  font-style: italic;
-}
-
-.preview-markdown :deep(code) {
-  font-family: monospace;
-  font-size: 0.9em;
-}
-
-.preview-markdown :deep(pre) {
-  display: inline;
   white-space: pre-wrap;
+  word-break: break-word;
 }
 </style>

package/src/plugins/textResponse/View.vue

@@ -4,10 +4,10 @@
       <div class="button-group">
         <button class="download-btn download-btn-green" :disabled="pdfDownloading" @click="downloadPdf">
           <span class="material-icons">{{ pdfDownloading ? "hourglass_empty" : "download" }}</span>
-          PDF
+          {{ t("pluginTextResponse.pdf") }}
         </button>
       </div>
-      <span v-if="pdfError" class="text-xs text-red-500 self-center ml-2" :title="pdfError">⚠ PDF failed</span>
+      <span v-if="pdfError" class="text-xs text-red-500 self-center ml-2" :title="pdfError">{{ t("pluginTextResponse.pdfFailed") }}</span>
     </div>
     <div class="flex-1 overflow-hidden relative" @click.capture="openLinksInNewTab">
       <div class="text-response-container">
@@ -27,28 +27,36 @@
 
         <!-- Collapsible Editor -->
         <details v-if="editable" ref="detailsEl" class="text-response-source" data-testid="text-response-edit">
-          <summary data-testid="text-response-edit-summary">Edit Text Content</summary>
+          <summary data-testid="text-response-edit-summary">{{ t("pluginTextResponse.editContent") }}</summary>
           <textarea v-model="editedText" class="text-response-editor" spellcheck="false" data-testid="text-response-edit-textarea"></textarea>
-          <button class="apply-btn" :disabled="!hasChanges" data-testid="text-response-apply-btn" @click="applyChanges">Apply Changes</button>
+          <button class="apply-btn" :disabled="!hasChanges" data-testid="text-response-apply-btn" @click="applyChanges">
+            {{ t("pluginTextResponse.applyChanges") }}
+          </button>
         </details>
       </div>
-      <button v-show="!editing" class="copy-btn" :title="copied ? 'Copied!' : 'Copy'" @click="copyText">
+      <button v-show="!editing" class="copy-btn" :title="copied ? t('pluginTextResponse.copiedLabel') : t('pluginTextResponse.copyLabel')" @click="copyText">
         <span class="material-icons">{{ copied ? "check" : "content_copy" }}</span>
       </button>
-      <button v-show="editing" class="cancel-btn" @click="cancelEdit">Cancel</button>
+      <button v-show="editing" class="cancel-btn" @click="cancelEdit">{{ t("pluginTextResponse.cancel") }}</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { useI18n } from "vue-i18n";
 import { marked } from "marked";
 import type { ToolResult, ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TextResponseData } from "./types";
 import { handleExternalLinkClick } from "../../utils/dom/externalLink";
+import { classifyWorkspacePath } from "../../utils/path/workspaceLinkRouter";
+import { useAppApi } from "../../composables/useAppApi";
 import { usePdfDownload } from "../../composables/usePdfDownload";
 import { useClipboardCopy } from "../../composables/useClipboardCopy";
 
+const { t } = useI18n();
+const appApi = useAppApi();
+
 const props = withDefaults(
   defineProps<{
     selectedResult: ToolResultComplete<TextResponseData>;
@@ -160,7 +168,19 @@ function applyChanges() {
 const isAssistant = computed(() => (props.selectedResult.data?.role ?? "assistant") === "assistant");
 
 function openLinksInNewTab(event: MouseEvent): void {
-  handleExternalLinkClick(event);
+  if (handleExternalLinkClick(event)) return;
+  // Internal workspace-path links (rendered by marked from agent
+  // Markdown): route to the appropriate view instead of letting them
+  // navigate the SPA to a non-existent session route.
+  const target = event.target as HTMLElement;
+  const anchor = target.closest("a");
+  if (!anchor) return;
+  const href = anchor.getAttribute("href");
+  if (!href || href.startsWith("#")) return;
+  if (classifyWorkspacePath(href)) {
+    event.preventDefault();
+    appApi.navigateToWorkspacePath(href);
+  }
 }
 
 const { pdfDownloading, pdfError, downloadPdf: rawDownloadPdf } = usePdfDownload();
@@ -168,8 +188,8 @@ const { pdfDownloading, pdfError, downloadPdf: rawDownloadPdf } = usePdfDownload
 const detailsEl = ref<HTMLDetailsElement>();
 const editing = ref(false);
 
-function onDetailsToggle(e: Event) {
-  editing.value = (e.target as HTMLDetailsElement).open;
+function onDetailsToggle(event: Event) {
+  editing.value = (event.target as HTMLDetailsElement).open;
 }
 
 onMounted(() => {

package/src/plugins/todo/Preview.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="text-sm">
+  <div class="p-2 text-sm">
     <div class="flex items-center gap-1 font-medium text-gray-700 mb-1">
-      <span>☑</span>
-      <span>{{ completedCount }}/{{ items.length }} completed</span>
+      <span aria-hidden="true">{{ t("todoPreview.headerIcon") }}</span>
+      <span>{{ t("todoPreview.completedRatio", { done: completedCount, total: items.length }) }}</span>
     </div>
     <div
       v-for="item in preview"
@@ -10,7 +10,7 @@
       class="text-xs truncate flex items-center gap-1"
       :class="item.completed ? 'line-through text-gray-400' : 'text-gray-600'"
     >
-      <span class="shrink-0">{{ item.completed ? "✓" : "○" }}</span>
+      <span class="shrink-0">{{ item.completed ? t("todoPreview.doneIcon") : t("todoPreview.pendingIcon") }}</span>
       <span class="truncate">{{ item.text }}</span>
       <template v-if="(item.labels?.length ?? 0) > 0">
         <span
@@ -20,16 +20,21 @@
           :class="colorForLabel(label)"
           >{{ label }}</span
         >
-        <span v-if="(item.labels?.length ?? 0) > 2" class="text-[9px] text-gray-400 shrink-0">+{{ (item.labels?.length ?? 0) - 2 }}</span>
+        <span v-if="(item.labels?.length ?? 0) > 2" class="text-[9px] text-gray-400 shrink-0">{{
+          t("todoPreview.moreLabels", { count: (item.labels?.length ?? 0) - 2 })
+        }}</span>
       </template>
     </div>
-    <div v-if="more > 0" class="text-xs text-gray-400">+ {{ more }} more…</div>
+    <div v-if="more > 0" class="text-xs text-gray-400">{{ t("todoPreview.moreItems", { count: more }) }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
+
+const { t } = useI18n();
 import type { TodoData, TodoItem } from "./index";
 import { useFreshPluginData } from "../../composables/useFreshPluginData";
 import { API_ROUTES } from "../../config/apiRoutes";
@@ -42,8 +47,8 @@ const items = ref<TodoItem[]>(props.result.data?.items ?? []);
 const { refresh } = useFreshPluginData<TodoItem[]>({
   endpoint: () => API_ROUTES.todos.list,
   extract: (json) => {
-    const v = (json as { data?: { items?: TodoItem[] } }).data?.items;
-    return Array.isArray(v) ? v : null;
+    const extracted = (json as { data?: { items?: TodoItem[] } }).data?.items;
+    return Array.isArray(extracted) ? extracted : null;
   },
   apply: (data) => {
     items.value = data;

package/src/plugins/todo/View.vue

@@ -3,16 +3,16 @@
     <!-- API error banner — surfaces POST /api/todos failures so a
          silent add/remove/toggle becomes diagnosable. -->
     <div v-if="todoApiError" class="px-4 py-2 bg-red-50 border-b border-red-200 text-sm text-red-700" role="alert" data-testid="todo-api-error">
-      ⚠ Failed to update todos: {{ todoApiError }}
+      {{ t("pluginTodo.apiError", { error: todoApiError }) }}
     </div>
     <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
-      <h2 class="text-lg font-semibold text-gray-800">Todo List</h2>
-      <span class="text-sm text-gray-500">{{ completedCount }}/{{ items.length }} completed</span>
+      <h2 class="text-lg font-semibold text-gray-800">{{ t("pluginTodo.heading") }}</h2>
+      <span class="text-sm text-gray-500">{{ t("pluginTodo.completedRatio", { done: completedCount, total: items.length }) }}</span>
     </div>
 
     <!-- Filter bar: only shown when at least one label is in use. -->
     <div v-if="labelInventory.length > 0" class="flex flex-wrap items-center gap-1.5 px-6 py-2 border-b border-gray-100 bg-gray-50">
-      <span class="text-xs text-gray-500 mr-1">Filter:</span>
+      <span class="text-xs text-gray-500 mr-1">{{ t("pluginTodo.filter") }}</span>
       <button
         v-for="entry in labelInventory"
         :key="entry.label"
@@ -27,14 +27,21 @@
         {{ entry.label }}
         <span class="opacity-60">{{ entry.count }}</span>
       </button>
-      <button v-if="activeFilters.size > 0" class="ml-auto text-xs text-gray-500 hover:text-gray-700" title="Clear all filters" @click="clearFilters">
-        Clear ✕
+      <button
+        v-if="activeFilters.size > 0"
+        class="ml-auto text-xs text-gray-500 hover:text-gray-700"
+        :title="t('pluginTodo.clearFilters')"
+        @click="clearFilters"
+      >
+        {{ t("pluginTodo.clearButton") }}
       </button>
     </div>
 
-    <div v-if="items.length === 0" class="flex-1 flex items-center justify-center text-gray-400">No todo items yet</div>
+    <div v-if="items.length === 0" class="flex-1 flex items-center justify-center text-gray-400">{{ t("pluginTodo.noItems") }}</div>
 
-    <div v-else-if="filteredItems.length === 0" class="flex-1 flex items-center justify-center text-gray-400 text-sm">No items match the active filter</div>
+    <div v-else-if="filteredItems.length === 0" class="flex-1 flex items-center justify-center text-gray-400 text-sm">
+      {{ t("pluginTodo.noMatchingFilter") }}
+    </div>
 
     <ul v-else class="flex-1 overflow-y-auto p-4 space-y-2">
       <li v-for="item in filteredItems" :key="item.id" class="rounded-lg border" :class="selectedId === item.id ? 'border-blue-400' : 'border-gray-200'">
@@ -62,10 +69,10 @@
           </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="remove(item)"
           >
-            ✕
+            {{ t("pluginTodo.deleteSymbol") }}
           </button>
           <span class="material-icons text-gray-400 text-sm" :title="selectedId === item.id ? 'Collapse' : 'Expand'">
             {{ selectedId === item.id ? "expand_less" : "expand_more" }}
@@ -80,20 +87,25 @@
             spellcheck="false"
           />
           <div class="flex items-center gap-2">
-            <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="applyItemEdit">Update</button>
-            <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="selectedId = null">Cancel</button>
+            <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="applyItemEdit">{{ t("pluginTodo.update") }}</button>
+            <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="selectedId = null">
+              {{ t("common.cancel") }}
+            </button>
             <span v-if="yamlError" class="text-xs text-red-500">{{ yamlError }}</span>
           </div>
         </div>
       </li>
     </ul>
 
-    <button v-if="hasCompleted" class="mx-6 mb-2 text-sm text-gray-500 hover:text-gray-700 self-start" @click="clearCompleted">Clear completed</button>
+    <button v-if="hasCompleted" class="mx-6 mb-2 text-sm text-gray-500 hover:text-gray-700 self-start" @click="clearCompleted">
+      {{ t("pluginTodo.clearCompleted") }}
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TodoData, TodoItem } from "./index";
 import { useFreshPluginData } from "../../composables/useFreshPluginData";
@@ -101,6 +113,8 @@ import { apiPost } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
 import { colorForLabel, filterByLabels, listLabelsWithCount, subtractLabels } from "./labels";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedResult: ToolResultComplete<TodoData>;
 }>();
@@ -111,8 +125,8 @@ const items = ref<TodoItem[]>(props.selectedResult.data?.items ?? []);
 const { refresh } = useFreshPluginData<TodoItem[]>({
   endpoint: () => API_ROUTES.todos.list,
   extract: (json) => {
-    const v = (json as { data?: { items?: TodoItem[] } }).data?.items;
-    return Array.isArray(v) ? v : null;
+    const extracted = (json as { data?: { items?: TodoItem[] } }).data?.items;
+    return Array.isArray(extracted) ? extracted : null;
   },
   apply: (data) => {
     items.value = data;
@@ -163,12 +177,12 @@ function clearFilters(): void {
 
 // ── YAML helpers ─────────────────────────────────────────────────────────────
 
-function yamlStringValue(v: string): string {
-  const needsQuotes = v === "" || /[:#[\]{},&*?|<>=!%@`]/.test(v) || /^\s|\s$/.test(v) || /^(true|false|null|~)$/i.test(v) || /^\d/.test(v);
+function yamlStringValue(str: string): string {
+  const needsQuotes = str === "" || /[:#[\]{},&*?|<>=!%@`]/.test(str) || /^\s|\s$/.test(str) || /^(true|false|null|~)$/i.test(str) || /^\d/.test(str);
   if (needsQuotes) {
-    return `"${v.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+    return `"${str.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
   }
-  return v;
+  return str;
 }
 
 function serializeYaml(item: TodoItem): string {
@@ -191,19 +205,19 @@ function parseFlowSequence(raw: string): string[] {
   let buffer = "";
   let inQuotes = false;
   for (let i = 0; i < inner.length; i++) {
-    const ch = inner[i];
-    if (ch === '"' && inner[i - 1] !== "\\") {
+    const char = inner[i];
+    if (char === '"' && inner[i - 1] !== "\\") {
       inQuotes = !inQuotes;
-      buffer += ch;
+      buffer += char;
       continue;
     }
-    if (ch === "," && !inQuotes) {
+    if (char === "," && !inQuotes) {
       const piece = parseYamlValue(buffer.trim());
       if (piece) result.push(piece);
       buffer = "";
       continue;
     }
-    buffer += ch;
+    buffer += char;
   }
   const last = parseYamlValue(buffer.trim());
   if (last) result.push(last);

package/src/plugins/todo/composables/useTodos.ts

@@ -166,12 +166,12 @@ export function useTodos(initialItems: TodoItem[] = [], initialColumns: StatusCo
     error,
     refresh,
     createItem: (input) => call(API_ROUTES.todos.items, "POST", input),
-    patchItem: (id, input) => call(API_ROUTES.todos.item.replace(":id", encodeURIComponent(id)), "PATCH", input),
-    moveItem: (id, input) => call(API_ROUTES.todos.itemMove.replace(":id", encodeURIComponent(id)), "POST", input),
-    deleteItem: (id) => call(API_ROUTES.todos.item.replace(":id", encodeURIComponent(id)), "DELETE"),
+    patchItem: (itemId, input) => call(API_ROUTES.todos.item.replace(":id", encodeURIComponent(itemId)), "PATCH", input),
+    moveItem: (itemId, input) => call(API_ROUTES.todos.itemMove.replace(":id", encodeURIComponent(itemId)), "POST", input),
+    deleteItem: (itemId) => call(API_ROUTES.todos.item.replace(":id", encodeURIComponent(itemId)), "DELETE"),
     addColumn: (input) => call(API_ROUTES.todos.columns, "POST", input),
-    patchColumn: (id, input) => call(API_ROUTES.todos.column.replace(":id", encodeURIComponent(id)), "PATCH", input),
-    deleteColumn: (id) => call(API_ROUTES.todos.column.replace(":id", encodeURIComponent(id)), "DELETE"),
+    patchColumn: (colId, input) => call(API_ROUTES.todos.column.replace(":id", encodeURIComponent(colId)), "PATCH", input),
+    deleteColumn: (colId) => call(API_ROUTES.todos.column.replace(":id", encodeURIComponent(colId)), "DELETE"),
     reorderColumns: (ids) => call(API_ROUTES.todos.columnsOrder, "PUT", { ids }),
   };
 }