mulmoclaude 0.3.0 → 0.5.0

package/src/plugins/spreadsheet/View.vue

@@ -1,27 +1,31 @@
 <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
-              </button>
-            </div>
+            <!-- `download-btn` class kept as a name hook — referenced by
+                 e2e/tests/spreadsheet.spec.ts via `button.download-btn`.
+                 Styling is inline Tailwind; the class has no CSS rules. -->
+            <button
+              class="download-btn h-8 px-2.5 flex items-center gap-1 rounded bg-[#217346] hover:bg-[#1e6a3f] active:bg-[#1a5c36] text-white text-sm transition-colors"
+              @click="downloadExcel"
+            >
+              <span class="material-icons text-base">download</span>
+              {{ t("pluginSpreadsheet.excel") }}
+            </button>
           </div>
 
           <!-- Sheet tabs (if multiple sheets) -->
@@ -43,9 +47,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 +61,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 +75,7 @@
             v-model="miniEditorValue"
             type="text"
             class="form-input"
-            placeholder="Value"
+            :placeholder="t('pluginSpreadsheet.valuePlaceholder')"
             @keyup.enter="saveMiniEditor"
           />
 
@@ -81,13 +85,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 +107,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";
@@ -111,6 +122,7 @@ import {
   type CellValue,
 } from "./engine";
 import { applyCellHighlights, clearCellHighlights } from "./cellHighlights";
+import { errorMessage as formatErrorMessage } from "../../utils/errors";
 
 // Import all spreadsheet functions to populate the function registry
 import "./engine/functions";
@@ -119,6 +131,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
@@ -181,8 +195,11 @@ const loading = ref(false);
 const errorMessage = ref("");
 const resolvedSheets = ref<SpreadsheetSheet[]>([]);
 
+// Accepts only the canonical prefix. Any legacy `spreadsheets/*.json`
+// references in old session JSONL must be migrated via
+// `scripts/migrate-legacy-artifact-paths.ts` (#773).
 function isFilePath(value: unknown): value is string {
-  return typeof value === "string" && (value.startsWith("artifacts/spreadsheets/") || value.startsWith("spreadsheets/")) && value.endsWith(".json");
+  return typeof value === "string" && value.startsWith("artifacts/spreadsheets/") && value.endsWith(".json");
 }
 
 async function fetchSheets(): Promise<void> {
@@ -203,7 +220,7 @@ async function fetchSheets(): Promise<void> {
   loading.value = true;
   const response = await apiGet<FilesContentResponseLike>(API_ROUTES.files.content, { path: raw });
   if (!response.ok) {
-    errorMessage.value = `Failed to load spreadsheet: ${response.error}`;
+    errorMessage.value = t("pluginSpreadsheet.loadFailed", { error: response.error });
     resolvedSheets.value = [];
     loading.value = false;
     return;
@@ -230,8 +247,11 @@ fetchSheets().then(() => {
 async function persistSheets(sheets: SpreadsheetSheet[]): Promise<void> {
   const raw = props.selectedResult.data?.sheets;
   if (isFilePath(raw)) {
-    const filename = raw.replace(/^(artifacts\/spreadsheets|spreadsheets)\//, "");
-    const result = await apiPut<unknown>(API_ROUTES.plugins.updateSpreadsheet.replace(":filename", filename), {
+    // Send the full workspace-relative path so the route doesn't have
+    // to reconstruct one from a basename — paths under
+    // `artifacts/spreadsheets/` are now sharded by YYYY/MM (#764).
+    const result = await apiPut<unknown>(API_ROUTES.plugins.updateSpreadsheet, {
+      relativePath: raw,
       sheets,
     });
     if (!result.ok) {
@@ -551,7 +571,7 @@ async function applyChanges() {
 
     // Validate it's an array
     if (!Array.isArray(parsedSheets)) {
-      throw new Error("Data must be an array of sheets");
+      throw new Error(t("pluginSpreadsheet.dataMustBeArray"));
     }
 
     // Persist to disk (if file-backed) and emit update
@@ -560,7 +580,7 @@ async function applyChanges() {
     // Reset to first sheet after update
     activeSheetIndex.value = 0;
   } catch (error) {
-    alert(`Invalid JSON format: ${error instanceof Error ? error.message : "Unknown error"}`);
+    alert(t("pluginSpreadsheet.invalidJsonAlert", { error: formatErrorMessage(error, t("pluginSpreadsheet.unknownError")) }));
   }
 }
 
@@ -694,40 +714,6 @@ onUnmounted(() => {
   font-weight: bold;
 }
 
-.button-group {
-  display: flex;
-  gap: 0.5em;
-}
-
-.download-btn {
-  padding: 0.5em 1em;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  transition: background-color 0.2s;
-}
-
-.excel-btn {
-  background-color: #217346;
-}
-
-.excel-btn:hover {
-  background-color: #1e6a3f;
-}
-
-.excel-btn:active {
-  background-color: #1a5c36;
-}
-
-.download-btn .material-icons {
-  font-size: 1.2em;
-}
-
 /* Sheet tabs */
 .sheet-tabs {
   display: flex;

package/src/plugins/spreadsheet/engine/responseDecoder.ts

@@ -11,6 +11,7 @@
  */
 
 import type { SheetData } from "./types.js";
+import { errorMessage } from "../../../utils/errors";
 
 /** Shape of the `/api/files/content` response we care about. The
  *  server returns more fields (kind, size, modifiedMs, …) but this
@@ -51,7 +52,7 @@ export function decodeSpreadsheetResponse(body: FilesContentResponseLike): Decod
   } catch (err) {
     return {
       kind: "error",
-      message: `Spreadsheet JSON is malformed: ${err instanceof Error ? err.message : "parse error"}`,
+      message: `Spreadsheet JSON is malformed: ${errorMessage(err, "parse error")}`,
     };
   }
   if (!Array.isArray(parsed)) {

package/src/plugins/spreadsheet/index.ts

@@ -6,6 +6,7 @@ import View from "./View.vue";
 import Preview from "./Preview.vue";
 import { apiPost } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
+import { makeUuid } from "../../utils/id";
 
 const spreadsheetPlugin: ToolPlugin<SpreadsheetToolData> = {
   toolDefinition,
@@ -15,14 +16,14 @@ const spreadsheetPlugin: ToolPlugin<SpreadsheetToolData> = {
     if (!result.ok) {
       return {
         toolName: TOOL_NAME,
-        uuid: crypto.randomUUID(),
+        uuid: makeUuid(),
         message: result.error,
       };
     }
     return {
       ...result.data,
       toolName: TOOL_NAME,
-      uuid: crypto.randomUUID(),
+      uuid: makeUuid(),
     };
   },
 

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

@@ -1,13 +1,15 @@
 <template>
   <div class="h-full flex flex-col">
-    <div v-if="isAssistant" class="flex justify-end px-4 py-2 border-b border-gray-100 shrink-0">
-      <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
-        </button>
-      </div>
-      <span v-if="pdfError" class="text-xs text-red-500 self-center ml-2" :title="pdfError">⚠ PDF failed</span>
+    <div v-if="isAssistant" class="flex items-center justify-end gap-2 px-3 py-2 border-b border-gray-100 shrink-0">
+      <button
+        class="h-8 px-2.5 flex items-center gap-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+        :disabled="pdfDownloading"
+        @click="downloadPdf"
+      >
+        <span class="material-icons text-base">{{ pdfDownloading ? "hourglass_empty" : "download" }}</span>
+        {{ t("pluginTextResponse.pdf") }}
+      </button>
+      <span v-if="pdfError" class="text-xs text-red-500" :title="pdfError">{{ t("pluginTextResponse.pdfFailed") }}</span>
     </div>
     <div class="flex-1 overflow-hidden relative" @click.capture="openLinksInNewTab">
       <div class="text-response-container">
@@ -27,27 +29,37 @@
 
         <!-- 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";
+import { buildPdfFilename } from "../../utils/files/filename";
+import { extractTextResponseTitle } from "./utils";
+
+const { t } = useI18n();
+const appApi = useAppApi();
 
 const props = withDefaults(
   defineProps<{
@@ -160,7 +172,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();
@@ -196,7 +220,11 @@ async function copyText() {
 
 async function downloadPdf() {
   const text = props.selectedResult.data?.text ?? "";
-  const filename = `${props.selectedResult.title ?? "response"}.pdf`;
+  const filename = buildPdfFilename({
+    name: extractTextResponseTitle(text),
+    fallback: "chat",
+    timestampMs: appApi.getResultTimestamp(props.selectedResult.uuid),
+  });
   await rawDownloadPdf(text, filename);
 }
 </script>
@@ -431,37 +459,6 @@ async function downloadPdf() {
   background: #cccccc;
 }
 
-/* Toolbar button styles */
-.button-group {
-  display: flex;
-  gap: 0.5em;
-}
-
-.download-btn {
-  padding: 0.5em 1em;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-}
-
-.download-btn-green {
-  background-color: #4caf50;
-}
-
-.download-btn .material-icons {
-  font-size: 1.2em;
-}
-
-.download-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 .copy-btn {
   position: absolute;
   bottom: 0.3rem;

package/src/plugins/textResponse/utils.ts

@@ -0,0 +1,25 @@
+// Plugin-specific helpers for textResponse. Kept separate from
+// View.vue so the pure logic is easy to unit-test from node:test
+// without needing a Vue runtime.
+
+const MAX_TITLE_CHARS = 50;
+
+// Pull a short, human-meaningful title out of a chat reply for use as
+// a download filename. Priority:
+//   1. First markdown H1 ("# ...") — the model often opens a long
+//      reply with a heading; that's the cleanest signal.
+//   2. First non-empty line, truncated.
+//   3. Empty string when neither is available — caller decides the
+//      fallback (the PDF filename builder uses "chat").
+export function extractTextResponseTitle(text: string): string {
+  let firstNonEmpty: string | null = null;
+  for (const line of text.split("\n")) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    if (trimmed.startsWith("# ")) {
+      return trimmed.slice(2).trim().slice(0, MAX_TITLE_CHARS);
+    }
+    if (firstNonEmpty === null) firstNonEmpty = trimmed;
+  }
+  return (firstNonEmpty ?? "").slice(0, MAX_TITLE_CHARS);
+}

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";

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>;
 }>();