mulmoclaude 0.1.2 → 0.4.0

package/src/components/CanvasViewToggle.vue

@@ -2,10 +2,10 @@
   <button
     class="flex items-center justify-center w-8 h-8 rounded transition-colors hover:bg-gray-100"
     :class="isStack ? 'text-blue-500' : 'text-gray-400 hover:text-gray-700'"
-    :title="isStack ? 'Stack view · click to switch to Single (⌘1)' : 'Single view · click to switch to Stack (⌘2)'"
-    :aria-label="isStack ? 'Switch to Single view' : 'Switch to Stack view'"
+    :title="isStack ? t('canvasViewToggle.stackViewTooltip') : t('canvasViewToggle.singleViewTooltip')"
+    :aria-label="isStack ? t('canvasViewToggle.switchToSingle') : t('canvasViewToggle.switchToStack')"
     :data-testid="`canvas-view-toggle-${modelValue}`"
-    @click="emit('update:modelValue', isStack ? CANVAS_VIEW.single : CANVAS_VIEW.stack)"
+    @click="emit('update:modelValue', isStack ? LAYOUT_MODES.single : LAYOUT_MODES.stack)"
   >
     <span class="material-icons text-lg">view_agenda</span>
   </button>
@@ -13,15 +13,18 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { CANVAS_VIEW, type CanvasViewMode } from "../utils/canvas/viewMode";
+import { useI18n } from "vue-i18n";
+import { LAYOUT_MODES, type LayoutMode } from "../utils/canvas/layoutMode";
+
+const { t } = useI18n();
 
 const props = defineProps<{
-  modelValue: CanvasViewMode;
+  modelValue: LayoutMode;
 }>();
 
 const emit = defineEmits<{
-  "update:modelValue": [mode: CanvasViewMode];
+  "update:modelValue": [mode: LayoutMode];
 }>();
 
-const isStack = computed(() => props.modelValue === CANVAS_VIEW.stack);
+const isStack = computed(() => props.modelValue === LAYOUT_MODES.stack);
 </script>

package/src/components/ChatInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 border-t border-gray-200" @dragover.prevent @drop="onDropFile">
+  <div class="p-2 border-t border-gray-200" @dragover.prevent @drop="onDropFile">
     <div v-if="fileError" class="mb-2 text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-1.5" data-testid="file-error">
       {{ fileError }}
     </div>
@@ -15,43 +15,55 @@
         ref="textarea"
         :value="modelValue"
         data-testid="user-input"
-        placeholder="Type a task..."
-        :rows="inputFocused ? 8 : 2"
-        class="flex-1 bg-white border border-gray-300 rounded px-3 py-2 text-sm text-gray-900 placeholder-gray-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none transition-all duration-200"
-        :class="inputFocused ? 'ring-2 ring-blue-300' : ''"
+        :placeholder="t('chatInput.placeholder')"
+        rows="2"
+        class="flex-1 bg-white border border-gray-300 rounded px-3 py-2 text-sm text-gray-900 placeholder-gray-400 disabled:opacity-50 disabled:cursor-not-allowed resize-none"
         :disabled="isRunning"
         @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
-        @focus="inputFocused = true"
         @compositionstart="imeEnter.onCompositionStart"
         @compositionend="imeEnter.onCompositionEnd"
         @keydown="imeEnter.onKeydown"
-        @blur="onInputBlur"
+        @blur="imeEnter.onBlur"
         @paste="onPasteFile"
       />
       <div class="flex flex-col gap-1">
         <button
           data-testid="send-btn"
-          class="bg-blue-600 hover:bg-blue-700 text-white rounded px-3 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          class="bg-blue-600 hover:bg-blue-700 text-white rounded w-8 h-8 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
           :disabled="isRunning"
           @click="emit('send')"
         >
-          <span class="material-icons text-base">send</span>
+          <span class="material-icons text-base leading-none">send</span>
+        </button>
+        <button
+          data-testid="attach-file-btn"
+          class="text-gray-400 hover:text-gray-600 rounded w-8 h-8 flex items-center justify-center"
+          :title="t('chatInput.attachFile')"
+          @click="openFilePicker"
+        >
+          <span class="material-icons text-base leading-none">attach_file</span>
         </button>
         <button
           data-testid="expand-input-btn"
-          class="text-gray-400 hover:text-gray-600 rounded px-3 py-1 text-sm"
-          title="Expand editor"
+          class="text-gray-400 hover:text-gray-600 rounded w-8 h-8 flex items-center justify-center"
+          :title="t('chatInput.expandEditor')"
           @click="openExpandedEditor"
         >
-          <span class="material-icons text-base">open_in_full</span>
+          <span class="material-icons text-base leading-none">open_in_full</span>
         </button>
       </div>
     </div>
 
+    <!-- Hidden file input driven by the attach button. The `accept`
+         filter matches ACCEPTED_MIME_PREFIXES/_EXACT below; the change
+         handler routes through the same readAttachmentFile() used by
+         drop + paste, so all three paths behave identically. -->
+    <input ref="fileInput" type="file" class="hidden" :accept="fileInputAccept" data-testid="file-input" @change="onFilePicked" />
+
     <div v-if="expandedEditorOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeExpandedEditor">
       <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 flex flex-col" style="max-height: 80vh">
         <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
-          <h3 class="text-sm font-semibold text-gray-700">Compose message</h3>
+          <h3 class="text-sm font-semibold text-gray-700">{{ t("chatInput.composeMessage") }}</h3>
           <button class="text-gray-400 hover:text-gray-600" @click="closeExpandedEditor">
             <span class="material-icons text-base">close</span>
           </button>
@@ -60,7 +72,7 @@
           ref="expandedTextarea"
           :value="modelValue"
           data-testid="expanded-input"
-          placeholder="Type a task..."
+          :placeholder="t('chatInput.placeholder')"
           class="flex-1 px-4 py-3 text-sm text-gray-900 placeholder-gray-400 resize-none focus:outline-none"
           style="min-height: 300px"
           @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
@@ -68,16 +80,18 @@
           @keydown.ctrl.enter="sendFromExpanded"
         ></textarea>
         <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200">
-          <p class="text-xs text-gray-400">Cmd+Enter to send</p>
+          <p class="text-xs text-gray-400">{{ t("chatInput.sendHint") }}</p>
           <div class="flex gap-2">
-            <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="closeExpandedEditor">Cancel</button>
+            <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="closeExpandedEditor">
+              {{ t("common.cancel") }}
+            </button>
             <button
               class="px-3 py-1.5 text-sm rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40"
               :disabled="isRunning"
               data-testid="expanded-send-btn"
               @click="sendFromExpanded"
             >
-              Send
+              {{ t("chatInput.send") }}
             </button>
           </div>
         </div>
@@ -88,9 +102,12 @@
 
 <script setup lang="ts">
 import { nextTick, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import ChatAttachmentPreview from "./ChatAttachmentPreview.vue";
 import { useImeAwareEnter } from "../composables/useImeAwareEnter";
 
+const { t } = useI18n();
+
 export interface PastedFile {
   dataUrl: string;
   name: string;
@@ -111,9 +128,9 @@ const emit = defineEmits<{
 
 const textarea = ref<HTMLTextAreaElement | null>(null);
 const expandedTextarea = ref<HTMLTextAreaElement | null>(null);
-const inputFocused = ref(false);
 const expandedEditorOpen = ref(false);
 const fileError = ref<string | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const MAX_ATTACH_BYTES = 30 * 1024 * 1024;
 
@@ -129,16 +146,28 @@ const ACCEPTED_MIME_EXACT = new Set([
   "application/vnd.openxmlformats-officedocument.presentationml.presentation",
 ]);
 
+// `accept` attribute for the hidden <input type="file"> that the
+// paperclip button drives. Prefixes like `image/*` and `text/*` are
+// expanded by the browser's native file picker; exact MIME entries
+// are passed through. Drop + paste still accept the same set via the
+// isAcceptedType() check below, so all three entry points stay in sync.
+const fileInputAccept = [...ACCEPTED_MIME_PREFIXES.map((prefix) => `${prefix}*`), ...ACCEPTED_MIME_EXACT].join(",");
+
 function isAcceptedType(mime: string): boolean {
-  return ACCEPTED_MIME_PREFIXES.some((p) => mime.startsWith(p)) || ACCEPTED_MIME_EXACT.has(mime);
+  return ACCEPTED_MIME_PREFIXES.some((prefix) => mime.startsWith(prefix)) || ACCEPTED_MIME_EXACT.has(mime);
 }
 
 function readAttachmentFile(file: File): void {
   fileError.value = null;
-  if (!isAcceptedType(file.type)) return;
+  if (!isAcceptedType(file.type)) {
+    // Previously returned silently. That left the user wondering whether
+    // the drop/paste registered at all — #499.
+    fileError.value = t("chatInput.unsupportedFileType");
+    return;
+  }
   if (file.size > MAX_ATTACH_BYTES) {
     const sizeMB = (file.size / 1024 / 1024).toFixed(1);
-    fileError.value = `File too large (${sizeMB} MB). Maximum is 30 MB.`;
+    fileError.value = t("chatInput.fileTooLarge", { sizeMB });
     return;
   }
   const reader = new FileReader();
@@ -154,14 +183,14 @@ function readAttachmentFile(file: File): void {
   reader.readAsDataURL(file);
 }
 
-function onPasteFile(e: ClipboardEvent): void {
-  const items = e.clipboardData?.items;
+function onPasteFile(event: ClipboardEvent): void {
+  const items = event.clipboardData?.items;
   if (!items) return;
   for (const item of items) {
     if (isAcceptedType(item.type)) {
       const file = item.getAsFile();
       if (file) {
-        e.preventDefault();
+        event.preventDefault();
         readAttachmentFile(file);
         return;
       }
@@ -169,21 +198,26 @@ function onPasteFile(e: ClipboardEvent): void {
   }
 }
 
-function onDropFile(e: DragEvent): void {
-  e.preventDefault();
-  const file = e.dataTransfer?.files[0];
+function onDropFile(event: DragEvent): void {
+  event.preventDefault();
+  const file = event.dataTransfer?.files[0];
   if (file) readAttachmentFile(file);
 }
 
-const imeEnter = useImeAwareEnter(() => emit("send"));
+function openFilePicker(): void {
+  fileInput.value?.click();
+}
 
-function onInputBlur(): void {
-  imeEnter.onBlur();
-  setTimeout(() => {
-    inputFocused.value = false;
-  }, 150);
+function onFilePicked(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (file) readAttachmentFile(file);
+  // Reset so selecting the same file twice in a row still fires @change.
+  input.value = "";
 }
 
+const imeEnter = useImeAwareEnter(() => emit("send"));
+
 function openExpandedEditor(): void {
   expandedEditorOpen.value = true;
   nextTick(() => expandedTextarea.value?.focus());

package/src/components/FileContentHeader.vue

@@ -6,17 +6,17 @@
     <button
       v-if="isMarkdown"
       class="ml-auto shrink-0 px-2 py-0.5 rounded border border-gray-200 text-gray-600 hover:bg-gray-100 font-sans"
-      :title="mdRawMode ? 'Show rendered Markdown' : 'Show raw source'"
+      :title="mdRawMode ? t('fileContentHeader.showRendered') : t('fileContentHeader.showRaw')"
       @click="emit('toggleMdRaw')"
     >
-      {{ mdRawMode ? "Rendered" : "Raw" }}
+      {{ mdRawMode ? t("fileContentHeader.rendered") : t("fileContentHeader.raw") }}
     </button>
     <button
       type="button"
       class="shrink-0 px-1 py-0.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100"
       :class="{ 'ml-auto': !isMarkdown }"
-      title="Close file"
-      aria-label="Close file"
+      :title="t('fileContentHeader.closeFile')"
+      :aria-label="t('fileContentHeader.closeFile')"
       data-testid="close-file-btn"
       @click="emit('deselect')"
     >
@@ -26,8 +26,11 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { formatDateTime } from "../utils/format/date";
 
+const { t } = useI18n();
+
 defineProps<{
   selectedPath: string | null;
   size: number | null;

package/src/components/FileContentRenderer.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex-1 overflow-auto min-h-0">
-    <div v-if="!selectedPath" class="h-full flex items-center justify-center text-gray-400 text-sm">Select a file</div>
+    <div v-if="!selectedPath" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("fileContentRenderer.selectFile") }}</div>
     <div v-else-if="contentError" class="p-4 text-sm text-red-600">
       {{ contentError }}
     </div>
-    <div v-else-if="contentLoading" class="p-4 text-sm text-gray-400">Loading...</div>
+    <div v-else-if="contentLoading" class="p-4 text-sm text-gray-400">{{ t("common.loading") }}</div>
     <template v-else-if="content">
       <template v-if="content.kind === 'text'">
         <!-- Scheduler items.json: render with the scheduler plugin's
@@ -55,7 +55,13 @@
              to restrict script loads to a vetted CDN whitelist +
              inline; connect-src is `'none'` so the page can't
              phone home. See src/utils/html/previewCsp.ts. -->
-        <iframe v-else-if="isHtml" :srcdoc="sandboxedHtml" class="w-full h-full border-0" sandbox="allow-scripts" title="HTML preview" />
+        <iframe
+          v-else-if="isHtml"
+          :srcdoc="sandboxedHtml"
+          class="w-full h-full border-0"
+          sandbox="allow-scripts"
+          :title="t('fileContentRenderer.htmlPreview')"
+        />
         <!-- JSON: pretty-printed with simple syntax coloring. Fall
              back to raw content if the file is malformed. -->
         <pre v-else-if="isJson" class="p-4 text-xs whitespace-pre-wrap font-mono text-gray-800"><span
@@ -66,7 +72,7 @@
         <!-- JSONL / NDJSON: one pretty-printed + colored record per line -->
         <div v-else-if="isJsonl" class="p-4 space-y-2">
           <div v-for="(line, i) in jsonlLines" :key="i" class="rounded border bg-gray-50 p-3" :class="line.parseError ? 'border-red-300' : 'border-gray-200'">
-            <div v-if="line.parseError" class="text-xs text-red-600 mb-1 font-sans">parse error</div>
+            <div v-if="line.parseError" class="text-xs text-red-600 mb-1 font-sans">{{ t("fileContentRenderer.parseError") }}</div>
             <pre class="text-xs font-mono text-gray-800 whitespace-pre-wrap"><span
               v-for="(tok, j) in line.tokens"
               :key="j"
@@ -82,7 +88,12 @@
         <img :src="rawUrl(selectedPath)" :alt="selectedPath" class="max-w-full max-h-full object-contain" />
       </div>
       <!-- PDF -->
-      <iframe v-else-if="content.kind === 'pdf' && selectedPath" :src="rawUrl(selectedPath)" class="w-full h-full border-0" title="PDF preview" />
+      <iframe
+        v-else-if="content.kind === 'pdf' && selectedPath"
+        :src="rawUrl(selectedPath)"
+        class="w-full h-full border-0"
+        :title="t('fileContentRenderer.pdfPreview')"
+      />
       <!-- Audio -->
       <div v-else-if="content.kind === 'audio' && selectedPath" class="h-full flex items-center justify-center p-4">
         <audio :key="selectedPath" :src="rawUrl(selectedPath)" controls preload="metadata" class="w-full max-w-2xl" />
@@ -93,13 +104,14 @@
       </div>
       <!-- Binary or too-large -->
       <div v-else class="p-4 text-sm text-gray-500">
-        {{ "message" in content ? content.message : "" }}
+        <template v-if="'message' in content">{{ content.message }}</template>
       </div>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import TextResponseView from "../plugins/textResponse/View.vue";
 import SchedulerView from "../plugins/scheduler/View.vue";
 import TodoExplorer from "./TodoExplorer.vue";
@@ -114,6 +126,8 @@ import type { Frontmatter } from "../utils/format/frontmatter";
 import { rewriteMarkdownImageRefs } from "../utils/image/rewriteMarkdownImageRefs";
 import { API_ROUTES } from "../config/apiRoutes";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedPath: string | null;
   content: FileContent | null;

package/src/components/FileTree.vue

@@ -7,7 +7,7 @@
       @click="onToggle"
     >
       <span class="material-icons text-sm text-gray-400 shrink-0">{{ expanded ? "folder_open" : "folder" }}</span>
-      <span class="text-gray-700 truncate">{{ node.name || "(workspace)" }}</span>
+      <span class="text-gray-700 truncate">{{ node.name || t("fileTree.workspace") }}</span>
     </button>
     <button
       v-else
@@ -19,13 +19,13 @@
     >
       <span class="material-icons text-sm text-gray-400 shrink-0">description</span>
       <span class="truncate">{{ node.name }}</span>
-      <span v-if="isRecent" class="ml-auto w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" title="Recently changed" />
+      <span v-if="isRecent" class="ml-auto w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" :title="t('fileTree.recentlyChanged')" />
     </button>
     <div v-if="node.type === 'dir' && expanded" class="pl-4">
       <!-- Loading state: children not in the cache yet. Rendered
            once per dir so a slow network shows where the wait is,
            not as a global overlay. -->
-      <div v-if="loadingChildren" class="px-2 py-1 text-xs text-gray-400">Loading...</div>
+      <div v-if="loadingChildren" class="px-2 py-1 text-xs text-gray-400">{{ t("common.loading") }}</div>
       <FileTree
         v-for="child in loadedChildren"
         :key="child.path"
@@ -43,10 +43,13 @@
 
 <script setup lang="ts">
 import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useExpandedDirs } from "../composables/useExpandedDirs";
 import { sortChildren } from "../utils/files/sortChildren";
 import type { FileSortMode } from "../composables/useFileSortMode";
 
+const { t } = useI18n();
+
 // TreeNode lives in src/types/fileTree.ts so .ts composables can
 // import it without depending on a .vue module. Re-export here so
 // existing `import { TreeNode } from "./FileTree.vue"` keeps working.

package/src/components/FileTreePane.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="w-72 flex-shrink-0 border-r border-gray-200 overflow-y-auto p-2 bg-gray-50">
     <div class="flex justify-end items-center gap-2 px-1 pb-1 text-xs">
-      <span class="text-gray-400">Sort:</span>
+      <span class="text-gray-400">{{ t("fileTreePane.sort") }}</span>
       <button
         type="button"
         class="px-2 py-0.5 rounded transition-colors"
         :class="sortMode === 'name' ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-500 hover:bg-gray-200'"
         :aria-pressed="sortMode === 'name'"
-        title="Sort by name"
+        :title="t('fileTreePane.sortByName')"
         data-testid="file-sort-name"
         @click="emit('update:sortMode', 'name')"
       >
-        Name
+        {{ t("fileTreePane.name") }}
       </button>
       <button
         type="button"
         class="px-2 py-0.5 rounded transition-colors"
         :class="sortMode === 'recent' ? 'bg-blue-100 text-blue-700 font-medium' : 'text-gray-500 hover:bg-gray-200'"
         :aria-pressed="sortMode === 'recent'"
-        title="Sort by modified date (newest first)"
+        :title="t('fileTreePane.sortByRecent')"
         data-testid="file-sort-recent"
         @click="emit('update:sortMode', 'recent')"
       >
-        Recent
+        {{ t("fileTreePane.recent") }}
       </button>
     </div>
     <div v-if="treeError" class="p-2 text-xs text-red-600">
       {{ treeError }}
     </div>
-    <div v-else-if="!rootNode" class="p-2 text-xs text-gray-400">Loading...</div>
+    <div v-else-if="!rootNode" class="p-2 text-xs text-gray-400">{{ t("common.loading") }}</div>
     <FileTree
       v-else
       :node="rootNode"
@@ -41,8 +41,8 @@
     />
     <template v-if="refRoots.length > 0">
       <div class="mt-2 pt-2 border-t border-gray-200 px-1 mb-1 flex items-center gap-1">
-        <span class="text-[10px] font-semibold text-gray-400 uppercase">Reference</span>
-        <span class="text-[9px] px-1 py-0.5 rounded bg-blue-100 text-blue-600">RO</span>
+        <span class="text-[10px] font-semibold text-gray-400 uppercase">{{ t("fileTreePane.reference") }}</span>
+        <span class="text-[9px] px-1 py-0.5 rounded bg-blue-100 text-blue-600">{{ t("fileTreePane.readOnlyBadge") }}</span>
       </div>
       <FileTree
         v-for="refNode in refRoots"
@@ -60,10 +60,13 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import FileTree from "./FileTree.vue";
 import type { TreeNode } from "../types/fileTree";
 import type { FileSortMode } from "../composables/useFileSortMode";
 
+const { t } = useI18n();
+
 defineProps<{
   rootNode: TreeNode | null;
   refRoots: TreeNode[];

package/src/components/FilesView.vue

@@ -54,7 +54,7 @@ import FileTreePane from "./FileTreePane.vue";
 import FileContentHeader from "./FileContentHeader.vue";
 import FileContentRenderer from "./FileContentRenderer.vue";
 import { useFileTree } from "../composables/useFileTree";
-import { useFileSelection, isValidFilePath } from "../composables/useFileSelection";
+import { useFileSelection, isValidFilePath, readPathMatch } from "../composables/useFileSelection";
 import { useMarkdownMode } from "../composables/useMarkdownMode";
 import { useFileSortMode } from "../composables/useFileSortMode";
 import { useContentDisplay } from "../composables/useContentDisplay";
@@ -161,9 +161,11 @@ const { handleMarkdownLinkClick } = useMarkdownLinkHandler(selectedPath, {
   onLoadSession: (sessionId) => emit("loadSession", sessionId),
 });
 
-// External URL changes (back/forward) → update selectedPath.
+// External URL changes (back/forward) → update selectedPath. Reading
+// from `route.params.pathMatch` after the query→params migration;
+// see plans/feat-files-path-url.md.
 watch(
-  () => route.query.path,
+  () => readPathMatch(route.params.pathMatch),
   (newPath) => {
     if (!isValidFilePath(newPath)) {
       if (selectedPath.value !== null) {

package/src/components/LockStatusPopup.vue

@@ -4,7 +4,7 @@
       ref="button"
       data-testid="sandbox-lock-button"
       :class="sandboxEnabled ? 'text-gray-400 hover:text-gray-700' : 'text-amber-400 hover:text-amber-500'"
-      :title="sandboxEnabled ? 'Sandbox enabled (Docker)' : 'No sandbox (Docker not found)'"
+      :title="sandboxEnabled ? t('lockStatusPopup.sandboxEnabledTooltip') : t('lockStatusPopup.noSandboxTooltip')"
       @click="emit('update:open', !open)"
     >
       <span class="material-icons">{{ sandboxEnabled ? "lock" : "lock_open" }}</span>
@@ -13,36 +13,36 @@
       <p class="mb-2" :class="sandboxEnabled ? 'text-green-800' : 'text-amber-500'">
         <template v-if="sandboxEnabled">
           <span class="material-icons text-xs align-middle mr-1">lock</span>
-          <strong>Sandbox enabled:</strong> Docker is running. Filesystem access is isolated.
+          <strong>{{ t("lockStatusPopup.sandboxEnabledLabel") }}</strong> {{ t("lockStatusPopup.sandboxEnabledBody") }}
         </template>
         <template v-else>
           <span class="material-icons text-xs align-middle mr-1">warning</span>
-          <strong>No sandbox:</strong> Claude can access all files on your machine. Install
-          <a href="https://www.docker.com/products/docker-desktop/" target="_blank" class="underline">Docker Desktop</a>
-          to enable filesystem isolation.
+          <strong>{{ t("lockStatusPopup.noSandboxLabel") }}</strong> {{ t("lockStatusPopup.noSandboxBodyPrefix") }}
+          <a href="https://www.docker.com/products/docker-desktop/" target="_blank" class="underline">{{ t("lockStatusPopup.dockerDesktop") }}</a>
+          {{ t("lockStatusPopup.noSandboxBodySuffix") }}
         </template>
       </p>
       <div v-if="sandboxEnabled" data-testid="sandbox-credentials-block" class="mb-2 border-t border-gray-100 pt-2">
-        <p class="text-gray-400 mb-1">Host credentials attached:</p>
-        <p v-if="sandboxStatus === null" class="text-gray-400 italic" data-testid="sandbox-credentials-loading">loading…</p>
+        <p class="text-gray-400 mb-1">{{ t("lockStatusPopup.hostCredentials") }}</p>
+        <p v-if="sandboxStatus === null" class="text-gray-400 italic" data-testid="sandbox-credentials-loading">{{ t("lockStatusPopup.credsLoading") }}</p>
         <template v-else>
           <p data-testid="sandbox-credentials-ssh">
             <span class="mr-1">🔑</span>
-            <span class="text-gray-500">SSH agent:</span>
+            <span class="text-gray-500">{{ t("lockStatusPopup.sshAgent") }}</span>
             <span :class="sandboxStatus.sshAgent ? 'text-green-700' : 'text-gray-400'" class="ml-1">
-              {{ sandboxStatus.sshAgent ? "forwarded" : "not forwarded" }}
+              {{ sandboxStatus.sshAgent ? t("lockStatusPopup.forwarded") : t("lockStatusPopup.notForwarded") }}
             </span>
           </p>
           <p data-testid="sandbox-credentials-mounts">
             <span class="mr-1">📁</span>
-            <span class="text-gray-500">Mounted configs:</span>
+            <span class="text-gray-500">{{ t("lockStatusPopup.mountedConfigs") }}</span>
             <span :class="sandboxStatus.mounts.length > 0 ? 'text-green-700' : 'text-gray-400'" class="ml-1">
-              {{ sandboxStatus.mounts.length > 0 ? sandboxStatus.mounts.join(", ") : "none" }}
+              {{ sandboxStatus.mounts.length > 0 ? sandboxStatus.mounts.join(", ") : t("lockStatusPopup.none") }}
             </span>
           </p>
         </template>
       </div>
-      <p class="text-gray-400 mb-1">Test sandbox isolation:</p>
+      <p class="text-gray-400 mb-1">{{ t("lockStatusPopup.testIsolation") }}</p>
       <div class="flex flex-col gap-1">
         <button
           v-for="q in SANDBOX_TEST_QUERIES"
@@ -60,8 +60,11 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useSandboxStatus } from "../composables/useSandboxStatus";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   sandboxEnabled: boolean;
   open: boolean;
@@ -104,8 +107,8 @@ watch(
   },
 );
 
-function onTestQuery(q: string): void {
+function onTestQuery(query: string): void {
   emit("update:open", false);
-  emit("testQuery", q);
+  emit("testQuery", query);
 }
 </script>

package/src/components/NotificationBell.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNotifications } from "../composables/useNotifications";
 import { formatRelativeTime } from "../utils/format/date";
 import { NOTIFICATION_ICONS, NOTIFICATION_ACTION_TYPES, NOTIFICATION_PRIORITIES } from "../types/notification";
 import type { NotificationPayload } from "../types/notification";
 
+const { t } = useI18n();
 const { notifications, unreadCount, markAllRead, dismiss } = useNotifications();
 const open = ref(false);
 const rootRef = ref<HTMLElement | null>(null);
@@ -70,7 +72,12 @@ function handleDismiss(event: Event, notificationId: string): void {
 <template>
   <div ref="rootRef" class="relative">
     <!-- Bell button -->
-    <button class="relative text-gray-400 hover:text-gray-700" data-testid="notification-bell" aria-label="Notifications" @click="toggle">
+    <button
+      class="relative text-gray-400 hover:text-gray-700"
+      data-testid="notification-bell"
+      :aria-label="t('notificationBell.notifications')"
+      @click="toggle"
+    >
       <span class="material-icons">notifications</span>
       <span
         v-if="unreadCount > 0"
@@ -89,12 +96,14 @@ function handleDismiss(event: Event, notificationId: string): void {
     >
       <!-- Header -->
       <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-        <span class="text-sm font-semibold text-gray-700">Notifications</span>
-        <button class="text-xs text-blue-500 hover:text-blue-700" data-testid="notification-mark-all-read" @click="markAllRead">Mark all read</button>
+        <span class="text-sm font-semibold text-gray-700">{{ t("notificationBell.notifications") }}</span>
+        <button class="text-xs text-blue-500 hover:text-blue-700" data-testid="notification-mark-all-read" @click="markAllRead">
+          {{ t("notificationBell.markAllRead") }}
+        </button>
       </div>
 
       <!-- Empty state -->
-      <div v-if="notifications.length === 0" class="py-8 text-center text-sm text-gray-400">No notifications</div>
+      <div v-if="notifications.length === 0" class="py-8 text-center text-sm text-gray-400">{{ t("notificationBell.noNotifications") }}</div>
 
       <!-- Items -->
       <div v-else>
@@ -121,7 +130,7 @@ function handleDismiss(event: Event, notificationId: string): void {
               {{ formatTime(n.firedAt) }}
             </p>
           </div>
-          <button class="text-gray-300 hover:text-gray-500 shrink-0 mt-0.5" aria-label="Dismiss" @click="handleDismiss($event, n.id)">
+          <button class="text-gray-300 hover:text-gray-500 shrink-0 mt-0.5" :aria-label="t('notificationBell.dismiss')" @click="handleDismiss($event, n.id)">
             <span class="material-icons text-sm">close</span>
           </button>
         </div>