mulmoclaude 0.3.0 → 0.4.0

package/src/components/PluginLauncher.vue

@@ -8,12 +8,12 @@
           'px-2.5 py-1 flex items-center gap-1 border-r border-gray-200 last:border-r-0 transition-colors',
           isActive(target) ? 'bg-blue-50 text-blue-600 font-medium' : 'bg-white text-gray-600 hover:bg-gray-50',
         ]"
-        :title="target.title"
+        :title="t(`pluginLauncher.${target.key}.title`)"
         :data-testid="`plugin-launcher-${target.key}`"
         @click="emit('navigate', target)"
       >
         <span class="material-icons text-sm">{{ target.icon }}</span>
-        <span v-if="!compact">{{ target.label }}</span>
+        <span v-if="!compact">{{ t(`pluginLauncher.${target.key}.label`) }}</span>
       </button>
     </template>
   </div>
@@ -21,80 +21,43 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 // Quick-access toolbar sitting above the canvas. Each button
-// switches the canvas to a dedicated view mode via URL
-// (?view=todos, ?view=wiki, etc.). The "invoke" kind is kept in
-// the union for future use but currently all targets use "view".
-//
-// First slice of issue #253. The list of targets is declared here so
-// the launcher can be swapped for a customisable per-role palette
-// later without touching the App.vue wiring.
+// navigates to a dedicated page (/todos, /wiki, etc.). The "invoke"
+// kind is kept in the union for future use but currently all targets
+// use "view".
 
 const props = defineProps<{
-  /** Current canvas view mode — the matching button lights up. */
+  /** Current page route name — the matching button lights up. */
   activeViewMode?: string | null;
 }>();
 
 export type PluginLauncherKind = "view"; // Switch the canvas to a dedicated view mode
 
+// The `key` is also the i18n lookup prefix (see pluginLauncher.*
+// in src/lang/en.ts). Templates resolve the label / tooltip via
+// `t(\`pluginLauncher.\${target.key}.label\`)` — keeping label/title
+// strings out of this file avoids duplication across locales.
 export interface PluginLauncherTarget {
   /** Stable key for testid + dispatch in App.vue. */
   key: "todos" | "scheduler" | "skills" | "wiki" | "roles" | "files";
   kind: PluginLauncherKind;
   /** Material-icons glyph. */
   icon: string;
-  /** Visible label next to the icon. */
-  label: string;
-  /** Tooltip on hover. */
-  title: string;
 }
 
 const TARGETS: PluginLauncherTarget[] = [
   // ─── Data plugins ───
-  {
-    key: "todos",
-    kind: "view",
-    icon: "checklist",
-    label: "Todos",
-    title: "Open todos (⌘4)",
-  },
-  {
-    key: "scheduler",
-    kind: "view",
-    icon: "event",
-    label: "Schedule",
-    title: "Open schedule (⌘5)",
-  },
-  {
-    key: "wiki",
-    kind: "view",
-    icon: "menu_book",
-    label: "Wiki",
-    title: "Open wiki (⌘6)",
-  },
+  { key: "todos", kind: "view", icon: "checklist" },
+  { key: "scheduler", kind: "view", icon: "event" },
+  { key: "wiki", kind: "view", icon: "menu_book" },
   // ─── Management / navigation ───
-  {
-    key: "skills",
-    kind: "view",
-    icon: "psychology",
-    label: "Skills",
-    title: "Open skills (⌘7)",
-  },
-  {
-    key: "roles",
-    kind: "view",
-    icon: "manage_accounts",
-    label: "Roles",
-    title: "Open roles (⌘8)",
-  },
-  {
-    key: "files",
-    kind: "view",
-    icon: "folder",
-    label: "Files",
-    title: "Open workspace files (⌘3)",
-  },
+  { key: "skills", kind: "view", icon: "psychology" },
+  { key: "roles", kind: "view", icon: "manage_accounts" },
+  { key: "files", kind: "view", icon: "folder" },
 ];
 
 // Index AFTER which the visual separator is inserted (between wiki

package/src/components/RightSidebar.vue

@@ -4,10 +4,10 @@
       <div class="bg-white border-b border-gray-200">
         <button
           class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50"
-          title="Toggle system prompt"
+          :title="t('rightSidebar.toggleSystemPrompt')"
           @click="showSystemPrompt = !showSystemPrompt"
         >
-          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">System Prompt</span>
+          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t("rightSidebar.systemPrompt") }}</span>
           <span class="text-gray-400 text-xs">{{ showSystemPrompt ? "▲" : "▼" }}</span>
         </button>
         <div v-if="showSystemPrompt" class="px-4 pb-4">
@@ -19,11 +19,11 @@
 
       <div class="bg-white border-b border-gray-200">
         <div class="p-4 pb-0">
-          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Available Tools</span>
+          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t("rightSidebar.availableTools") }}</span>
         </div>
         <div class="px-4 py-3 space-y-1">
           <div v-for="tool in availableTools" :key="tool" class="text-xs">
-            <button class="flex items-center gap-1 w-full text-left" title="Toggle tool description" @click="toggleTool(tool)">
+            <button class="flex items-center gap-1 w-full text-left" :title="t('rightSidebar.toggleToolDescription')" @click="toggleTool(tool)">
               <span class="bg-gray-100 text-gray-700 rounded px-2 py-0.5 border border-gray-200 font-mono">{{ tool }}</span>
               <span v-if="toolDescriptions[tool]" class="text-gray-400">{{ expandedTools.has(tool) ? "▲" : "▼" }}</span>
             </button>
@@ -35,32 +35,32 @@
       </div>
 
       <div class="p-4 border-b border-gray-200 bg-white">
-        <h2 class="text-lg font-semibold">Tool Call History</h2>
+        <h2 class="text-lg font-semibold">{{ t("rightSidebar.toolCallHistory") }}</h2>
       </div>
 
       <div class="p-2 space-y-2 bg-gray-100">
-        <div v-if="toolCallHistory.length === 0" class="text-gray-400 text-sm text-center py-4">No tool calls yet</div>
+        <div v-if="toolCallHistory.length === 0" class="text-gray-400 text-sm text-center py-4">{{ t("rightSidebar.noToolCalls") }}</div>
         <div v-for="(call, index) in toolCallHistory" :key="index" class="border border-gray-300 rounded p-3 bg-white text-xs space-y-1">
           <div class="flex justify-between items-start gap-2">
             <span class="font-semibold text-blue-600 break-all">{{ call.toolName }}</span>
             <span class="text-gray-400 flex-shrink-0">{{ formatTime(call.timestamp) }}</span>
           </div>
           <div>
-            <div class="font-medium text-gray-500 mb-1">Arguments</div>
+            <div class="font-medium text-gray-500 mb-1">{{ t("rightSidebar.arguments") }}</div>
             <pre class="bg-gray-50 p-2 rounded overflow-x-auto text-gray-700">{{ formatJson(call.args) }}</pre>
           </div>
           <div v-if="call.error">
-            <div class="font-medium text-gray-500 mb-1">Error</div>
+            <div class="font-medium text-gray-500 mb-1">{{ t("rightSidebar.error") }}</div>
             <div class="bg-red-50 p-2 rounded text-red-700">
               {{ call.error }}
             </div>
           </div>
           <div v-else-if="call.result !== undefined">
-            <div class="font-medium text-gray-500 mb-1">Result</div>
+            <div class="font-medium text-gray-500 mb-1">{{ t("rightSidebar.result") }}</div>
             <pre class="bg-green-50 p-2 rounded overflow-x-auto text-gray-700">{{ call.result }}</pre>
           </div>
           <div v-else>
-            <div class="text-gray-400 italic">Running...</div>
+            <div class="text-gray-400 italic">{{ t("rightSidebar.running") }}</div>
           </div>
         </div>
       </div>
@@ -70,9 +70,12 @@
 
 <script setup lang="ts">
 import { ref, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolCallHistoryItem } from "../types/toolCallHistory";
 import { formatTime } from "../utils/format/date";
 
+const { t } = useI18n();
+
 defineProps<{
   toolCallHistory: ToolCallHistoryItem[];
   availableTools: string[];

package/src/components/SessionHistoryPanel.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
-    ref="root"
-    class="absolute left-0 right-0 bottom-0 bg-white border-b border-gray-200 shadow-lg z-50 overflow-y-auto"
-    :style="{ top: topOffset != null ? topOffset + 'px' : '4rem' }"
-  >
+  <!-- Rendered as the canvas-column content for the /history route
+       (see plans/feat-history-url-route.md). Previously this was an
+       absolute-positioned overlay; the `h-full overflow-y-auto` root
+       plus inline flow replaces the z-index + topOffset plumbing. -->
+  <div ref="root" class="h-full overflow-y-auto bg-white">
     <div class="p-2 space-y-1">
       <!-- Origin filter bar -->
       <div class="flex gap-1 mb-1 flex-wrap" data-testid="session-filter-bar">
         <button
           v-for="f in FILTERS"
-          :key="f.value"
+          :key="f"
           class="px-2 py-0.5 text-[10px] rounded-full border transition-colors"
-          :class="activeFilter === f.value ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50'"
-          :data-testid="`session-filter-${f.value}`"
-          @click="activeFilter = f.value"
+          :class="activeFilter === f ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50'"
+          :data-testid="`session-filter-${f}`"
+          @click="activeFilter = f"
         >
-          {{ f.label }}
-          <span v-if="f.value !== 'all'" class="ml-0.5 opacity-70">{{ countByOrigin(f.value) }}</span>
+          {{ t(`sessionHistoryPanel.filters.${f}`) }}
+          <span v-if="f !== 'all'" class="ml-0.5 opacity-70">{{ countByOrigin(f) }}</span>
         </button>
       </div>
 
@@ -26,11 +26,11 @@
         role="alert"
         data-testid="session-history-error"
       >
-        ⚠ Failed to refresh: {{ errorMessage }}
-        <span v-if="sessions.length > 0"> — showing last known list.</span>
+        {{ t("sessionHistoryPanel.failedToRefresh", { error: errorMessage }) }}
+        <span v-if="sessions.length > 0">{{ t("sessionHistoryPanel.showingLastKnown") }}</span>
       </div>
       <p v-if="filteredSessions.length === 0" class="text-xs text-gray-400 p-2">
-        {{ activeFilter === "all" ? "No sessions yet." : "No matching sessions." }}
+        {{ activeFilter === "all" ? t("sessionHistoryPanel.noSessions") : t("sessionHistoryPanel.noMatching") }}
       </p>
       <div
         v-for="session in filteredSessions"
@@ -53,14 +53,14 @@
           <span class="ml-auto flex items-center gap-1.5">
             <span v-if="isSessionRunning(session)" class="flex items-center gap-0.5 text-yellow-600 font-medium">
               <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" />
-              Running
+              {{ t("sessionHistoryPanel.running") }}
             </span>
-            <span v-else-if="isSessionUnread(session)" class="flex items-center gap-0.5 text-gray-900 font-bold"> Unread </span>
+            <span v-else-if="isSessionUnread(session)" class="flex items-center gap-0.5 text-gray-900 font-bold">{{ t("sessionHistoryPanel.unread") }}</span>
             <span v-else>{{ formatDate(session.updatedAt) }}</span>
           </span>
         </div>
         <p class="truncate" :class="previewClasses(session)">
-          {{ session.preview || "(no messages)" }}
+          {{ session.preview || t("sessionHistoryPanel.noMessages") }}
         </p>
         <!-- Optional second line: AI-generated summary of the
              session, populated by the chat indexer (#123). -->
@@ -74,19 +74,22 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { Role } from "../config/roles";
 import type { SessionSummary, SessionOrigin } from "../types/session";
 import { SESSION_ORIGINS } from "../types/session";
 import { formatDate } from "../utils/format/date";
 import { roleIcon, roleName } from "../utils/role/icon";
 
-const FILTERS = [
-  { value: "all" as const, label: "All" },
-  { value: SESSION_ORIGINS.human, label: "Human" },
-  { value: SESSION_ORIGINS.scheduler, label: "Scheduler" },
-  { value: SESSION_ORIGINS.skill, label: "Skill" },
-  { value: SESSION_ORIGINS.bridge, label: "Bridge" },
-];
+const { t } = useI18n();
+
+// `unread` is mutually exclusive with origin pills — selecting it
+// shows every unread-flagged session regardless of origin, matching
+// the user expectation that "unread" is the primary question ("what
+// needs my attention?") rather than an origin sub-filter.
+const UNREAD_FILTER = "unread" as const;
+const FILTERS = ["all" as const, UNREAD_FILTER, SESSION_ORIGINS.human, SESSION_ORIGINS.scheduler, SESSION_ORIGINS.skill, SESSION_ORIGINS.bridge];
+type FilterKey = (typeof FILTERS)[number];
 
 const ORIGIN_ICONS: Record<string, string> = {
   human: "person",
@@ -106,7 +109,6 @@ const props = defineProps<{
   sessions: SessionSummary[];
   currentSessionId: string;
   roles: Role[];
-  topOffset?: number;
   // Latest fetch error from useSessionHistory, or null when healthy.
   errorMessage?: string | null;
 }>();
@@ -120,7 +122,7 @@ defineExpose({ root });
 
 // ── Filter ──────────────────────────────────────────────────
 
-const activeFilter = ref<SessionOrigin | "all">("all");
+const activeFilter = ref<FilterKey>("all");
 
 function originOf(session: SessionSummary): SessionOrigin {
   return session.origin ?? SESSION_ORIGINS.human;
@@ -128,12 +130,14 @@ function originOf(session: SessionSummary): SessionOrigin {
 
 const filteredSessions = computed(() => {
   if (activeFilter.value === "all") return props.sessions;
+  if (activeFilter.value === UNREAD_FILTER) return props.sessions.filter((session) => session.hasUnread === true);
   return props.sessions.filter((session) => originOf(session) === activeFilter.value);
 });
 
-function countByOrigin(origin: string): number {
-  if (origin === "all") return props.sessions.length;
-  return props.sessions.filter((session) => originOf(session) === origin).length;
+function countByOrigin(filterKey: FilterKey): number {
+  if (filterKey === "all") return props.sessions.length;
+  if (filterKey === UNREAD_FILTER) return props.sessions.filter((session) => session.hasUnread === true).length;
+  return props.sessions.filter((session) => originOf(session) === filterKey).length;
 }
 
 function originIcon(origin: string): string {

package/src/components/SessionTabBar.vue

@@ -3,8 +3,8 @@
     <button
       class="flex-shrink-0 flex items-center justify-center w-7 py-1 rounded border border-dashed border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50 transition-colors"
       data-testid="new-session-btn"
-      title="New session"
-      aria-label="New session"
+      :title="t('sessionTabBar.newSession')"
+      :aria-label="t('sessionTabBar.newSession')"
       @click="emit('newSession')"
     >
       <span class="material-icons text-sm">add</span>
@@ -25,24 +25,23 @@
       <div v-else class="flex-1" />
     </template>
     <button
-      ref="historyButton"
       data-testid="history-btn"
       class="relative flex-shrink-0 flex items-center justify-center w-7 py-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
       :class="{ 'text-blue-500': historyOpen }"
-      title="Session history"
+      :title="t('sessionTabBar.sessionHistory')"
       @click="emit('toggleHistory')"
     >
       <span class="material-icons text-base">expand_more</span>
       <span
         v-if="activeSessionCount > 0"
         class="absolute -top-0.5 -left-0.5 min-w-[1rem] h-4 px-0.5 bg-yellow-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none cursor-help"
-        :title="`${activeSessionCount} active session${activeSessionCount > 1 ? 's' : ''} (agent running)`"
+        :title="t('sessionTabBar.activeSessions', activeSessionCount, { named: { count: activeSessionCount } })"
         >{{ activeSessionCount }}</span
       >
       <span
         v-if="unreadCount > 0"
         class="absolute -top-0.5 -right-0.5 min-w-[1rem] h-4 px-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none cursor-help"
-        :title="`${unreadCount} unread repl${unreadCount > 1 ? 'ies' : 'y'}`"
+        :title="t('sessionTabBar.unreadReplies', unreadCount, { named: { count: unreadCount } })"
         >{{ unreadCount }}</span
       >
     </button>
@@ -50,11 +49,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { Role } from "../config/roles";
 import type { SessionSummary } from "../types/session";
 import { roleIcon, roleName } from "../utils/role/icon";
 
+const { t } = useI18n();
+
 defineProps<{
   sessions: SessionSummary[];
   currentSessionId: string;
@@ -70,9 +71,6 @@ const emit = defineEmits<{
   toggleHistory: [];
 }>();
 
-const historyButton = ref<HTMLButtonElement | null>(null);
-defineExpose({ historyButton });
-
 function tabColor(session: SessionSummary): string {
   if (session.isRunning) return "text-yellow-400";
   if (session.hasUnread) return "text-gray-900";

package/src/components/SettingsMcpTab.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="space-y-3">
-    <p class="text-xs text-gray-600 leading-relaxed">
-      Add external MCP servers. HTTP servers work in every mode. Stdio servers use the sandbox image's
-      <code class="bg-gray-100 px-1 rounded">npx</code> / <code class="bg-gray-100 px-1 rounded">node</code> /
-      <code class="bg-gray-100 px-1 rounded">tsx</code>; paths must live under the workspace when Docker is enabled.
-    </p>
+    <i18n-t keypath="settingsMcpTab.explanation" tag="p" class="text-xs text-gray-600 leading-relaxed">
+      <template #npx><code class="bg-gray-100 px-1 rounded">npx</code></template>
+      <template #node><code class="bg-gray-100 px-1 rounded">node</code></template>
+      <template #tsx><code class="bg-gray-100 px-1 rounded">tsx</code></template>
+    </i18n-t>
 
-    <div v-if="servers.length === 0" class="text-xs text-gray-500 italic" data-testid="mcp-empty">No MCP servers configured yet.</div>
+    <div v-if="servers.length === 0" class="text-xs text-gray-500 italic" data-testid="mcp-empty">{{ t("settingsMcpTab.noServers") }}</div>
 
     <ul v-else class="space-y-2" data-testid="mcp-server-list">
       <li
@@ -25,23 +25,31 @@
             >
             <label class="flex items-center gap-1 text-xs text-gray-600 ml-2">
               <input type="checkbox" :checked="entry.spec.enabled !== false" :data-testid="'mcp-enabled-' + entry.id" @change="onToggleEnabled(idx, $event)" />
-              enabled
+              {{ t("settingsMcpTab.enabled") }}
             </label>
           </div>
-          <button class="text-xs text-red-600 hover:text-red-800" :data-testid="'mcp-remove-' + entry.id" @click="emit('remove', idx)">Remove</button>
+          <button class="text-xs text-red-600 hover:text-red-800" :data-testid="'mcp-remove-' + entry.id" @click="emit('remove', idx)">
+            {{ t("common.remove") }}
+          </button>
         </div>
         <div v-if="entry.spec.type === 'http'" class="text-xs space-y-1">
           <div>
-            <span class="text-gray-500">URL:</span>
+            <span class="text-gray-500">{{ t("settingsMcpTab.urlLabel") }}</span>
             <code class="ml-1">{{ entry.spec.url }}</code>
           </div>
-          <div v-if="dockerMode && wouldRewriteLocalhost((entry.spec as HttpSpec).url)" class="text-amber-700">
-            In Docker mode <code>localhost</code> is rewritten to <code>host.docker.internal</code>.
-          </div>
+          <i18n-t
+            v-if="dockerMode && wouldRewriteLocalhost((entry.spec as HttpSpec).url)"
+            keypath="settingsMcpTab.localhostRewrite"
+            tag="div"
+            class="text-amber-700"
+          >
+            <template #localhost><code>localhost</code></template>
+            <template #hostDockerInternal><code>host.docker.internal</code></template>
+          </i18n-t>
         </div>
         <div v-else-if="entry.spec.type === 'stdio'" class="text-xs space-y-1">
           <div>
-            <span class="text-gray-500">Command:</span>
+            <span class="text-gray-500">{{ t("settingsMcpTab.commandLabel") }}</span>
             <code class="ml-1">{{ entry.spec.command }}</code>
             <code v-if="(entry.spec as StdioSpec).args?.length" class="ml-1">
               {{ ((entry.spec as StdioSpec).args ?? []).join(" ") }}
@@ -52,23 +60,23 @@
             class="text-red-600"
             :data-testid="'mcp-docker-warning-' + entry.id"
           >
-            ⚠ Contains paths outside the workspace — will not resolve inside Docker.
+            {{ t("settingsMcpTab.dockerNonWorkspaceWarning") }}
           </div>
         </div>
       </li>
     </ul>
 
     <button v-if="!adding" class="text-xs px-2 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50" data-testid="mcp-add-btn" @click="startAdd">
-      + Add MCP Server
+      {{ t("settingsMcpTab.addServerButton") }}
     </button>
 
     <div v-else class="border border-blue-300 rounded p-3 space-y-2" data-testid="mcp-add-form">
       <label class="block text-xs font-semibold text-gray-700">
-        Name
+        {{ t("settingsMcpTab.nameLabel") }}
         <input
           v-model="draft.id"
           type="text"
-          placeholder="my-server"
+          :placeholder="t('settingsMcpTab.namePlaceholder')"
           class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
           data-testid="mcp-draft-id"
           @keydown.stop
@@ -77,20 +85,20 @@
       <div class="flex gap-3 text-xs">
         <label class="flex items-center gap-1">
           <input v-model="draft.type" type="radio" value="http" data-testid="mcp-draft-type-http" />
-          HTTP
+          {{ t("settingsMcpTab.typeHttp") }}
         </label>
         <label class="flex items-center gap-1">
           <input v-model="draft.type" type="radio" value="stdio" data-testid="mcp-draft-type-stdio" />
-          Stdio (command)
+          {{ t("settingsMcpTab.typeStdio") }}
         </label>
       </div>
       <div v-if="draft.type === 'http'" class="space-y-2">
         <label class="block text-xs font-semibold text-gray-700">
-          URL
+          {{ t("settingsMcpTab.urlFieldLabel") }}
           <input
             v-model="draft.url"
             type="text"
-            placeholder="https://example.com/mcp"
+            :placeholder="t('settingsMcpTab.urlPlaceholder')"
             class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
             data-testid="mcp-draft-url"
             @keydown.stop
@@ -99,7 +107,7 @@
       </div>
       <div v-else class="space-y-2">
         <label class="block text-xs font-semibold text-gray-700">
-          Command
+          {{ t("settingsMcpTab.commandFieldLabel") }}
           <select
             v-model="draft.command"
             class="mt-1 w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
@@ -111,11 +119,11 @@
           </select>
         </label>
         <label class="block text-xs font-semibold text-gray-700">
-          Arguments (one per line)
+          {{ t("settingsMcpTab.argsLabel") }}
           <textarea
             v-model="draft.argsText"
             class="mt-1 w-full h-20 px-2 py-1 text-sm font-mono border border-gray-300 rounded focus:outline-none focus:border-blue-400"
-            placeholder="-y&#10;@modelcontextprotocol/server-filesystem&#10;/workspace/path"
+            :placeholder="t('settingsMcpTab.argsPlaceholder')"
             data-testid="mcp-draft-args"
             @keydown.stop
           ></textarea>
@@ -126,9 +134,11 @@
       </div>
       <div class="flex justify-end gap-2">
         <button class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-600 hover:bg-gray-50" data-testid="mcp-draft-cancel" @click="cancelAdd">
-          Cancel
+          {{ t("common.cancel") }}
+        </button>
+        <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="mcp-draft-add" @click="commitAdd">
+          {{ t("common.add") }}
         </button>
-        <button class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" data-testid="mcp-draft-add" @click="commitAdd">Add</button>
       </div>
     </div>
   </div>
@@ -136,6 +146,9 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 // UI-local representation of a configured server. Matches
 // server/config.ts#McpServerEntry. Re-declared here to avoid a
@@ -269,24 +282,24 @@ function commitAdd(): void {
   if (!mcpId) {
     const suggested = ensureUniqueId(suggestIdFromDraft(draft.value));
     if (!suggested) {
-      draftError.value = "Please provide a Name, or enter a URL / args we can derive one from.";
+      draftError.value = t("settingsMcpTab.errNoName");
       return;
     }
     mcpId = suggested;
   }
   if (!ID_RE.test(mcpId)) {
-    draftError.value = "Name must start with a lowercase letter and contain only [a-z0-9_-].";
+    draftError.value = t("settingsMcpTab.errBadName");
     return;
   }
   if (props.servers.some((server) => server.id === mcpId)) {
-    draftError.value = `Server id "${mcpId}" already exists.`;
+    draftError.value = t("settingsMcpTab.errIdExists", { id: mcpId });
     return;
   }
   let spec: ServerSpec;
   if (draft.value.type === "http") {
     const url = draft.value.url.trim();
     if (!/^https?:\/\//.test(url)) {
-      draftError.value = "HTTP URL must start with http:// or https://";
+      draftError.value = t("settingsMcpTab.errBadHttpUrl");
       return;
     }
     spec = { type: "http", url, enabled: true };