mulmoclaude 0.1.2 → 0.4.0

package/src/components/SettingsModal.vue

@@ -9,8 +9,8 @@
       @click.stop
     >
       <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
-        <h2 id="settings-modal-title" class="text-base font-semibold text-gray-900">Settings</h2>
-        <button class="text-gray-400 hover:text-gray-700" title="Close" data-testid="settings-close-btn" @click="close">
+        <h2 id="settings-modal-title" class="text-base font-semibold text-gray-900">{{ t("settingsModal.title") }}</h2>
+        <button class="text-gray-400 hover:text-gray-700" :title="t('common.close')" data-testid="settings-close-btn" @click="close">
           <span class="material-icons">close</span>
         </button>
       </div>
@@ -22,7 +22,7 @@
           data-testid="settings-tab-tools"
           @click="activeTab = 'tools'"
         >
-          Allowed Tools
+          {{ t("settingsModal.tabs.tools") }}
         </button>
         <button
           class="px-3 py-2 text-sm border-b-2"
@@ -30,7 +30,7 @@
           data-testid="settings-tab-mcp"
           @click="activeTab = 'mcp'"
         >
-          MCP Servers
+          {{ t("settingsModal.tabs.mcp") }}
         </button>
         <button
           class="px-3 py-2 text-sm border-b-2"
@@ -38,7 +38,7 @@
           data-testid="settings-tab-dirs"
           @click="activeTab = 'dirs'"
         >
-          Directories
+          {{ t("settingsModal.tabs.dirs") }}
         </button>
         <button
           class="px-3 py-2 text-sm border-b-2"
@@ -46,7 +46,7 @@
           data-testid="settings-tab-refs"
           @click="activeTab = 'refs'"
         >
-          Reference Dirs
+          {{ t("settingsModal.tabs.refs") }}
         </button>
       </div>
 
@@ -56,13 +56,12 @@
         </div>
 
         <div v-if="activeTab === 'tools'" class="space-y-3">
-          <p class="text-xs text-gray-600 leading-relaxed">
-            Extra tool names to pass to Claude via
-            <code class="bg-gray-100 px-1 rounded">--allowedTools</code>. One per line. Useful for built-in Claude Code MCP servers like Gmail / Google Calendar
-            after you have authenticated via <code class="bg-gray-100 px-1 rounded">claude mcp</code>.
-          </p>
+          <i18n-t keypath="settingsToolsTab.explanation" tag="p" class="text-xs text-gray-600 leading-relaxed">
+            <template #allowedTools><code class="bg-gray-100 px-1 rounded">--allowedTools</code></template>
+            <template #claudeMcp><code class="bg-gray-100 px-1 rounded">claude mcp</code></template>
+          </i18n-t>
           <label class="block">
-            <span class="text-xs font-semibold text-gray-700">Tool names</span>
+            <span class="text-xs font-semibold text-gray-700">{{ t("settingsModal.toolNamesLabel") }}</span>
             <textarea
               v-model="toolsText"
               class="mt-1 w-full h-48 px-2 py-1.5 text-sm font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
@@ -72,8 +71,8 @@
             ></textarea>
           </label>
           <p v-if="invalidToolNames.length > 0" class="text-xs text-amber-700">
-            These look non-standard (expected prefix
-            <code class="bg-gray-100 px-1 rounded">mcp__</code>):
+            {{ t("settingsModal.invalidToolNamesPrefix") }}
+            <code class="bg-gray-100 px-1 rounded">mcp__</code>{{ t("settingsModal.invalidToolNamesSuffix") }}
             {{ invalidToolNames.join(", ") }}
           </p>
         </div>
@@ -85,7 +84,7 @@
             role="alert"
             data-testid="mcp-tools-error"
           >
-            ⚠ Could not fetch MCP tool status: {{ mcpToolsError }}. Showing all tools regardless of enablement.
+            {{ t("settingsModal.mcpToolsError", { error: mcpToolsError }) }}
           </div>
           <SettingsMcpTab
             ref="mcpTabRef"
@@ -106,19 +105,19 @@
         <span v-if="statusMessage" class="text-xs" :class="statusError ? 'text-red-600' : 'text-green-600'" data-testid="settings-status">
           {{ statusMessage }}
         </span>
-        <span v-else class="text-xs text-gray-500"> Changes apply on the next message. No restart needed. </span>
+        <span v-else class="text-xs text-gray-500"> {{ t("settingsModal.changesHint") }} </span>
         <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" data-testid="settings-cancel-btn" @click="close">
-            Cancel
+            {{ t("common.cancel") }}
           </button>
           <button
             class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
             :disabled="saving || loading || !!loadError"
-            :title="loadError ? 'Cannot save until settings load successfully' : undefined"
+            :title="loadError ? t('settingsModal.cannotSaveTooltip') : undefined"
             data-testid="settings-save-btn"
             @click="save"
           >
-            {{ saving ? "Saving…" : loading ? "Loading…" : "Save" }}
+            {{ saving ? t("settingsModal.saving") : loading ? t("settingsModal.loadingLabel") : t("common.save") }}
           </button>
         </div>
       </div>
@@ -128,6 +127,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import SettingsMcpTab from "./SettingsMcpTab.vue";
 import SettingsWorkspaceDirsTab from "./SettingsWorkspaceDirsTab.vue";
 import SettingsReferenceDirsTab from "./SettingsReferenceDirsTab.vue";
@@ -135,6 +135,8 @@ import type { McpServerEntry } from "./SettingsMcpTab.vue";
 import { apiGet, apiPut } from "../utils/api";
 import { API_ROUTES } from "../config/apiRoutes";
 
+const { t } = useI18n();
+
 interface Props {
   open: boolean;
   dockerMode?: boolean;
@@ -177,11 +179,11 @@ let loadToken = 0;
 const parsedToolNames = computed(() =>
   toolsText.value
     .split("\n")
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0),
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0),
 );
 
-const invalidToolNames = computed(() => parsedToolNames.value.filter((n) => !n.startsWith("mcp__") && !isBuiltIn(n)));
+const invalidToolNames = computed(() => parsedToolNames.value.filter((name) => !name.startsWith("mcp__") && !isBuiltIn(name)));
 
 function isBuiltIn(name: string): boolean {
   return ["Bash", "Read", "Write", "Edit", "Glob", "Grep", "WebFetch", "WebSearch"].includes(name);

package/src/components/SettingsReferenceDirsTab.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { apiGet, apiPut } from "../utils/api";
 import { API_ROUTES } from "../config/apiRoutes";
 
+const { t } = useI18n();
+
 interface RefDirEntry {
   hostPath: string;
   label: string;
 }
 
+// See note in SettingsWorkspaceDirsTab — mirrored here.
+type SaveStatus = { kind: "ok" } | { kind: "error"; message: string };
+
 const dirs = ref<RefDirEntry[]>([]);
 const loading = ref(true);
 const error = ref("");
 const saving = ref(false);
-const saveStatus = ref("");
+const saveStatus = ref<SaveStatus | null>(null);
 
 const draftPath = ref("");
 const draftLabel = ref("");
@@ -32,50 +38,50 @@ async function load(): Promise<void> {
 
 async function save(): Promise<void> {
   saving.value = true;
-  saveStatus.value = "";
+  saveStatus.value = null;
   const result = await apiPut<{ dirs: RefDirEntry[] }>(API_ROUTES.config.referenceDirs, { dirs: dirs.value });
   saving.value = false;
   if (!result.ok) {
-    saveStatus.value = result.error;
+    saveStatus.value = { kind: "error", message: result.error };
     return;
   }
   dirs.value = result.data.dirs;
-  saveStatus.value = "Saved";
+  saveStatus.value = { kind: "ok" };
   setTimeout(() => {
-    saveStatus.value = "";
+    saveStatus.value = null;
   }, 2000);
 }
 
 function addEntry(): void {
   draftError.value = "";
-  const p = draftPath.value.trim();
-  if (!p) {
-    draftError.value = "Path required";
+  const path = draftPath.value.trim();
+  if (!path) {
+    draftError.value = t("settingsReferenceDirs.errPathRequired");
     return;
   }
-  if (!p.startsWith("/") && !p.startsWith("~/")) {
-    draftError.value = "Must be an absolute path or start with ~/";
+  if (!path.startsWith("/") && !path.startsWith("~/")) {
+    draftError.value = t("settingsReferenceDirs.errMustBeAbsolute");
     return;
   }
   // Normalize: trim trailing slashes for consistent comparison
-  let normalized = p;
+  let normalized = path;
   while (normalized.length > 1 && normalized.endsWith("/")) {
     normalized = normalized.slice(0, -1);
   }
-  const stripSlash = (s: string): string => {
-    let r = s;
-    while (r.length > 1 && r.endsWith("/")) r = r.slice(0, -1);
-    return r;
+  const stripSlash = (str: string): string => {
+    let cleaned = str;
+    while (cleaned.length > 1 && cleaned.endsWith("/")) cleaned = cleaned.slice(0, -1);
+    return cleaned;
   };
-  if (dirs.value.some((d) => stripSlash(d.hostPath) === normalized)) {
-    draftError.value = "Already exists";
+  if (dirs.value.some((dir) => stripSlash(dir.hostPath) === normalized)) {
+    draftError.value = t("settingsReferenceDirs.errAlreadyExists");
     return;
   }
   const lastSeg = normalized.split("/").pop();
   const label = draftLabel.value.trim() || lastSeg || normalized;
   // Reject duplicate labels — @ref/<label> routing requires uniqueness
-  if (dirs.value.some((d) => d.label === label)) {
-    draftError.value = `Label "${label}" already exists`;
+  if (dirs.value.some((dir) => dir.label === label)) {
+    draftError.value = t("settingsReferenceDirs.errLabelConflict", { label });
     return;
   }
   dirs.value.push({ hostPath: normalized, label });
@@ -92,20 +98,17 @@ onMounted(load);
 
 <template>
   <div class="space-y-3">
-    <p class="text-xs text-gray-600 leading-relaxed">
-      External directories Claude can read but not modify. In Docker mode, these are mounted read-only. Useful for referencing Obsidian vaults, project code, or
-      document folders.
-    </p>
+    <p class="text-xs text-gray-600 leading-relaxed">{{ t("settingsReferenceDirs.explanation") }}</p>
 
     <!-- Loading -->
-    <div v-if="loading" class="text-sm text-gray-400">Loading...</div>
+    <div v-if="loading" class="text-sm text-gray-400">{{ t("common.loading") }}</div>
     <div v-else-if="error" class="text-sm text-red-600 bg-red-50 rounded px-3 py-2">
       {{ error }}
     </div>
 
     <template v-else>
       <!-- Existing entries -->
-      <div v-if="dirs.length === 0" class="text-sm text-gray-400">No reference directories configured.</div>
+      <div v-if="dirs.length === 0" class="text-sm text-gray-400">{{ t("settingsReferenceDirs.noEntries") }}</div>
       <div v-else class="space-y-1.5">
         <div
           v-for="(dir, i) in dirs"
@@ -122,8 +125,8 @@ onMounted(load);
               {{ dir.label }}
             </div>
           </div>
-          <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 shrink-0"> read-only </span>
-          <button class="text-gray-300 hover:text-red-500 shrink-0" title="Remove" data-testid="reference-dir-remove-btn" @click="removeEntry(i)">
+          <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 shrink-0">{{ t("settingsReferenceDirs.readOnlyBadge") }}</span>
+          <button class="text-gray-300 hover:text-red-500 shrink-0" :title="t('common.remove')" data-testid="reference-dir-remove-btn" @click="removeEntry(i)">
             <span class="material-icons text-sm">close</span>
           </button>
         </div>
@@ -131,11 +134,11 @@ onMounted(load);
 
       <!-- Add new -->
       <div class="border border-gray-200 rounded p-2 space-y-2">
-        <div class="text-xs font-semibold text-gray-600">Add reference directory</div>
+        <div class="text-xs font-semibold text-gray-600">{{ t("settingsReferenceDirs.addDirTitle") }}</div>
         <input
           v-model="draftPath"
           class="w-full px-2 py-1 text-xs font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
-          placeholder="/Users/me/ObsidianVault or ~/Documents/notes"
+          :placeholder="t('settingsReferenceDirs.pathPlaceholder')"
           data-testid="reference-dir-path-input"
           @keydown.enter="addEntry"
           @keydown.stop
@@ -143,13 +146,15 @@ onMounted(load);
         <input
           v-model="draftLabel"
           class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-blue-400"
-          placeholder="Label (optional — defaults to folder name)"
+          :placeholder="t('settingsReferenceDirs.labelPlaceholder')"
           data-testid="reference-dir-label-input"
           @keydown.enter="addEntry"
           @keydown.stop
         />
         <div class="flex items-center gap-2">
-          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="reference-dir-add-btn" @click="addEntry">Add</button>
+          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="reference-dir-add-btn" @click="addEntry">
+            {{ t("common.add") }}
+          </button>
           <span v-if="draftError" class="text-xs text-red-500">{{ draftError }}</span>
         </div>
       </div>
@@ -162,10 +167,10 @@ onMounted(load);
           data-testid="reference-dirs-save-btn"
           @click="save"
         >
-          {{ saving ? "Saving..." : "Save" }}
+          {{ saving ? t("common.saving") : t("common.save") }}
         </button>
-        <span v-if="saveStatus" class="text-xs" :class="saveStatus === 'Saved' ? 'text-green-600' : 'text-red-600'">
-          {{ saveStatus }}
+        <span v-if="saveStatus" class="text-xs" :class="saveStatus.kind === 'ok' ? 'text-green-600' : 'text-red-600'">
+          {{ saveStatus.kind === "ok" ? t("common.saved") : saveStatus.message }}
         </span>
       </div>
     </template>

package/src/components/SettingsWorkspaceDirsTab.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { apiGet, apiPut } from "../utils/api";
 import { API_ROUTES } from "../config/apiRoutes";
 
+const { t } = useI18n();
+
 interface DirEntry {
   path: string;
   description: string;
   structure: "flat" | "by-name" | "by-date";
 }
 
+// Typed save status so the template can drive colour off `kind`
+// instead of string-comparing a localised "Saved" — previously the
+// green-on-success styling was coupled to the English literal.
+type SaveStatus = { kind: "ok" } | { kind: "error"; message: string };
+
 const dirs = ref<DirEntry[]>([]);
 const loading = ref(true);
 const error = ref("");
 const saving = ref(false);
-const saveStatus = ref("");
+const saveStatus = ref<SaveStatus | null>(null);
 
 // Draft for new entry
 const draftPath = ref("");
@@ -35,37 +43,37 @@ async function load(): Promise<void> {
 
 async function save(): Promise<void> {
   saving.value = true;
-  saveStatus.value = "";
+  saveStatus.value = null;
   const result = await apiPut<{ dirs: DirEntry[] }>(API_ROUTES.config.workspaceDirs, { dirs: dirs.value });
   saving.value = false;
   if (!result.ok) {
-    saveStatus.value = result.error;
+    saveStatus.value = { kind: "error", message: result.error };
     return;
   }
   dirs.value = result.data.dirs;
-  saveStatus.value = "Saved";
+  saveStatus.value = { kind: "ok" };
   setTimeout(() => {
-    saveStatus.value = "";
+    saveStatus.value = null;
   }, 2000);
 }
 
 function addEntry(): void {
   draftError.value = "";
-  const p = draftPath.value.trim();
-  if (!p) {
-    draftError.value = "Path required";
+  const path = draftPath.value.trim();
+  if (!path) {
+    draftError.value = t("settingsWorkspaceDirs.errPathRequired");
     return;
   }
-  if (!p.startsWith("data/") && !p.startsWith("artifacts/")) {
-    draftError.value = "Must start with data/ or artifacts/";
+  if (!path.startsWith("data/") && !path.startsWith("artifacts/")) {
+    draftError.value = t("settingsWorkspaceDirs.errMustStartWith");
     return;
   }
-  if (dirs.value.some((d) => d.path === p)) {
-    draftError.value = "Already exists";
+  if (dirs.value.some((dir) => dir.path === path)) {
+    draftError.value = t("settingsWorkspaceDirs.errAlreadyExists");
     return;
   }
   dirs.value.push({
-    path: p,
+    path,
     description: draftDescription.value.trim(),
     structure: draftStructure.value,
   });
@@ -83,20 +91,20 @@ onMounted(load);
 
 <template>
   <div class="space-y-3">
-    <p class="text-xs text-gray-600 leading-relaxed">
-      Custom directories for organizing files under
-      <code class="bg-gray-100 px-1 rounded">data/</code> and <code class="bg-gray-100 px-1 rounded">artifacts/</code>. Claude uses these to route file saves.
-    </p>
+    <i18n-t keypath="settingsWorkspaceDirs.explanation" tag="p" class="text-xs text-gray-600 leading-relaxed">
+      <template #dataDir><code class="bg-gray-100 px-1 rounded">data/</code></template>
+      <template #artifactsDir><code class="bg-gray-100 px-1 rounded">artifacts/</code></template>
+    </i18n-t>
 
     <!-- Loading -->
-    <div v-if="loading" class="text-sm text-gray-400">Loading...</div>
+    <div v-if="loading" class="text-sm text-gray-400">{{ t("common.loading") }}</div>
     <div v-else-if="error" class="text-sm text-red-600 bg-red-50 rounded px-3 py-2">
       {{ error }}
     </div>
 
     <template v-else>
       <!-- Existing entries -->
-      <div v-if="dirs.length === 0" class="text-sm text-gray-400">No custom directories configured.</div>
+      <div v-if="dirs.length === 0" class="text-sm text-gray-400">{{ t("settingsWorkspaceDirs.noEntries") }}</div>
       <div v-else class="space-y-1.5">
         <div
           v-for="(dir, i) in dirs"
@@ -113,7 +121,7 @@ onMounted(load);
           <span class="text-[10px] px-1.5 py-0.5 rounded bg-gray-200 text-gray-600 shrink-0">
             {{ dir.structure }}
           </span>
-          <button class="text-gray-300 hover:text-red-500 shrink-0" title="Remove" @click="removeEntry(i)">
+          <button class="text-gray-300 hover:text-red-500 shrink-0" :title="t('common.remove')" @click="removeEntry(i)">
             <span class="material-icons text-sm">close</span>
           </button>
         </div>
@@ -121,12 +129,12 @@ onMounted(load);
 
       <!-- Add new -->
       <div class="border border-gray-200 rounded p-2 space-y-2">
-        <div class="text-xs font-semibold text-gray-600">Add directory</div>
+        <div class="text-xs font-semibold text-gray-600">{{ t("settingsWorkspaceDirs.addDirTitle") }}</div>
         <div class="flex gap-2">
           <input
             v-model="draftPath"
             class="flex-1 px-2 py-1 text-xs font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
-            placeholder="data/clients or artifacts/reports"
+            :placeholder="t('settingsWorkspaceDirs.pathPlaceholder')"
             data-testid="workspace-dir-path-input"
             @keydown.enter="addEntry"
             @keydown.stop
@@ -144,13 +152,15 @@ onMounted(load);
         <input
           v-model="draftDescription"
           class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:border-blue-400"
-          placeholder="Description (what goes in this folder)"
+          :placeholder="t('settingsWorkspaceDirs.descPlaceholder')"
           data-testid="workspace-dir-desc-input"
           @keydown.enter="addEntry"
           @keydown.stop
         />
         <div class="flex items-center gap-2">
-          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="workspace-dir-add-btn" @click="addEntry">Add</button>
+          <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="workspace-dir-add-btn" @click="addEntry">
+            {{ t("common.add") }}
+          </button>
           <span v-if="draftError" class="text-xs text-red-500">{{ draftError }}</span>
         </div>
       </div>
@@ -163,10 +173,10 @@ onMounted(load);
           data-testid="workspace-dirs-save-btn"
           @click="save"
         >
-          {{ saving ? "Saving..." : "Save" }}
+          {{ saving ? t("common.saving") : t("common.save") }}
         </button>
-        <span v-if="saveStatus" class="text-xs" :class="saveStatus === 'Saved' ? 'text-green-600' : 'text-red-600'">
-          {{ saveStatus }}
+        <span v-if="saveStatus" class="text-xs" :class="saveStatus.kind === 'ok' ? 'text-green-600' : 'text-red-600'">
+          {{ saveStatus.kind === "ok" ? t("common.saved") : saveStatus.message }}
         </span>
       </div>
     </template>

package/src/components/SidebarHeader.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="flex items-center gap-2">
-    <img :src="logoUrl" alt="" class="h-[50px] w-auto -my-3.5 -ml-3 rounded object-contain shrink-0" />
-    <h1 data-testid="app-title" class="text-sm font-semibold text-gray-800 mr-1" :style="titleStyle">MulmoClaude</h1>
+    <button
+      type="button"
+      class="flex items-center gap-2 -my-1 -ml-1 py-1 pl-1 pr-2 rounded hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+      data-testid="app-home-btn"
+      :title="t('sidebarHeader.home')"
+      :aria-label="t('sidebarHeader.home')"
+      @click="emit('home')"
+    >
+      <img :src="logoUrl" alt="" class="h-[50px] w-auto -my-3.5 -ml-3 rounded object-contain shrink-0" />
+      <h1 data-testid="app-title" class="text-sm font-semibold text-gray-800 mr-1" :style="titleStyle">MulmoClaude</h1>
+    </button>
     <div class="flex gap-2">
       <LockStatusPopup
         ref="lockPopup"
@@ -12,14 +21,21 @@
       />
       <NotificationBell :force-close="lockPopupOpen" @navigate="(action) => emit('notificationNavigate', action)" @update:open="onNotificationOpen" />
       <button
+        v-if="isChatPage"
         class="text-gray-400 hover:text-gray-700"
         :class="{ 'text-blue-500': showRightSidebar }"
-        title="Tool call history"
+        :title="t('sidebarHeader.toolCallHistory')"
         @click="emit('toggleRightSidebar')"
       >
         <span class="material-icons">build</span>
       </button>
-      <button class="text-gray-400 hover:text-gray-700" data-testid="settings-btn" title="Settings" aria-label="Settings" @click="emit('openSettings')">
+      <button
+        class="text-gray-400 hover:text-gray-700"
+        data-testid="settings-btn"
+        :title="t('sidebarHeader.settings')"
+        :aria-label="t('sidebarHeader.settings')"
+        @click="emit('openSettings')"
+      >
         <span class="material-icons">settings</span>
       </button>
     </div>
@@ -28,15 +44,19 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, type CSSProperties } from "vue";
+import { useI18n } from "vue-i18n";
 import LockStatusPopup from "./LockStatusPopup.vue";
 import NotificationBell from "./NotificationBell.vue";
 import { useClickOutside } from "../composables/useClickOutside";
 import type { NotificationPayload } from "../types/notification";
 import logoUrl from "../assets/mulmo_bw.png";
 
+const { t } = useI18n();
+
 defineProps<{
   sandboxEnabled: boolean;
   showRightSidebar: boolean;
+  isChatPage: boolean;
   titleStyle?: CSSProperties;
 }>();
 
@@ -45,6 +65,7 @@ const emit = defineEmits<{
   notificationNavigate: [action: NotificationPayload["action"]];
   toggleRightSidebar: [];
   openSettings: [];
+  home: [];
 }>();
 
 const lockPopupOpen = ref(false);

package/src/components/StackView.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="containerRef" class="h-full overflow-y-auto bg-gray-50 p-4 space-y-3" data-testid="stack-scroll">
-    <div v-if="toolResults.length === 0" class="flex items-center justify-center h-full text-gray-400 text-sm">No results yet</div>
+    <div v-if="toolResults.length === 0" class="flex items-center justify-center h-full text-gray-400 text-sm">{{ t("common.noResultsYet") }}</div>
     <div
       v-for="result in toolResults"
       :key="result.uuid"
@@ -70,7 +70,10 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { getPlugin } from "../tools";
+
+const { t } = useI18n();
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import { View as TextResponseOriginalView } from "../plugins/textResponse/index";
 import { handleExternalLinkClick } from "../utils/dom/externalLink";

package/src/components/SuggestionsPanel.vue

@@ -9,7 +9,7 @@
       >
         {{ query }}
       </button>
-      <p class="text-center text-[10px] text-gray-400 py-0.5">click to send · shift+click to edit</p>
+      <p class="text-center text-[10px] text-gray-400 py-0.5">{{ t("suggestionsPanel.sendEditHint") }}</p>
     </div>
     <button
       class="w-full flex items-center justify-between px-4 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
@@ -17,7 +17,7 @@
     >
       <span class="flex items-center gap-1">
         <span class="material-icons text-sm">lightbulb</span>
-        Suggestions
+        {{ t("suggestionsPanel.suggestions") }}
       </span>
       <span class="material-icons text-sm transition-transform" :class="{ 'rotate-180': !expanded }">expand_less</span>
     </button>
@@ -26,6 +26,9 @@
 
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
   queries: string[];
@@ -48,9 +51,9 @@ watch(expanded, (isExpanded) => {
   });
 });
 
-function onClick(e: MouseEvent, query: string): void {
+function onClick(event: MouseEvent, query: string): void {
   expanded.value = false;
-  if (e.shiftKey) {
+  if (event.shiftKey) {
     emit("edit", query);
     return;
   }