mulmoclaude 0.3.0 → 0.5.0

package/src/plugins/generateImage/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";
 
 function createUploadedImageResult(imageData: string, fileName: string, prompt: string): ToolResult<ImageToolData, never> {
   return {
@@ -24,14 +25,14 @@ const generateImagePlugin: ToolPlugin<ImageToolData> = {
     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/manageRoles/Preview.vue

@@ -2,7 +2,7 @@
   <div class="text-sm">
     <div class="flex items-center gap-1 font-medium text-gray-700 mb-1">
       <span class="material-icons" style="font-size: 14px">manage_accounts</span>
-      <span>{{ customRoles.length }} custom role{{ customRoles.length !== 1 ? "s" : "" }}</span>
+      <span>{{ t("pluginManageRoles.previewCount", customRoles.length, { named: { count: customRoles.length } }) }}</span>
     </div>
     <div v-for="role in customRoles" :key="role.id" class="text-xs text-gray-600 flex items-center gap-1">
       <span class="material-icons" style="font-size: 12px">{{ role.icon }}</span>
@@ -13,7 +13,10 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
+
+const { t } = useI18n();
 import type { ManageRolesData, CustomRole } from "./index";
 import { useFreshPluginData } from "../../composables/useFreshPluginData";
 import { API_ROUTES } from "../../config/apiRoutes";

package/src/plugins/manageRoles/View.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="h-full bg-white flex flex-col">
-    <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">Custom Roles</h2>
-      <div class="flex items-center gap-3">
-        <span class="text-sm text-gray-500">
-          {{ customRoles.length }}
-          role{{ customRoles.length !== 1 ? "s" : "" }}
-        </span>
-        <button v-if="!creating" data-testid="role-add-btn" class="px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600" @click="startCreate">
-          + Add
+    <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-100">
+      <h2 class="text-lg font-semibold text-gray-800">{{ t("pluginManageRoles.heading") }}</h2>
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-gray-500">{{ t("pluginManageRoles.roleCount", customRoles.length, { named: { count: customRoles.length } }) }}</span>
+        <button
+          v-if="!creating"
+          data-testid="role-add-btn"
+          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600"
+          @click="startCreate"
+        >
+          {{ t("pluginManageRoles.addButton") }}
         </button>
       </div>
     </div>
@@ -16,12 +18,12 @@
     <div class="flex-1 overflow-y-auto">
       <!-- New role creation panel -->
       <div v-if="creating" class="m-4 border border-blue-300 bg-blue-50 rounded-lg p-4 space-y-3">
-        <div class="text-sm font-semibold text-gray-700">Create new role</div>
+        <div class="text-sm font-semibold text-gray-700">{{ t("pluginManageRoles.createPanel") }}</div>
 
         <!-- ID + Name + Icon row -->
         <div class="flex gap-3">
           <div class="w-40">
-            <label class="block text-xs font-medium text-gray-600 mb-1">ID</label>
+            <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldId") }}</label>
             <input
               v-model="newForm.id"
               type="text"
@@ -30,7 +32,7 @@
             />
           </div>
           <div class="flex-1">
-            <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
+            <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldName") }}</label>
             <input
               v-model="newForm.name"
               type="text"
@@ -39,8 +41,10 @@
           </div>
           <div class="w-32">
             <label class="block text-xs font-medium text-gray-600 mb-1">
-              Icon
-              <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">?</a>
+              {{ t("pluginManageRoles.fieldIcon") }}
+              <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">{{
+                t("pluginManageRoles.helpLink")
+              }}</a>
             </label>
             <input
               v-model="newForm.icon"
@@ -52,7 +56,7 @@
 
         <!-- Prompt -->
         <div>
-          <label class="block text-xs font-medium text-gray-600 mb-1">Prompt</label>
+          <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldPrompt") }}</label>
           <textarea
             v-model="newForm.prompt"
             rows="6"
@@ -63,14 +67,14 @@
 
         <!-- Plugins -->
         <div>
-          <label class="block text-xs font-medium text-gray-600 mb-2">Plugins</label>
+          <label class="block text-xs font-medium text-gray-600 mb-2">{{ t("pluginManageRoles.fieldPlugins") }}</label>
           <div class="grid gap-x-4 gap-y-1 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
             <label
               v-for="plugin in availablePlugins"
               :key="plugin.name"
               class="flex items-center gap-2 text-sm cursor-pointer"
               :class="plugin.enabled ? 'text-gray-700' : 'text-gray-400 cursor-not-allowed'"
-              :title="plugin.enabled ? '' : `Requires ${plugin.requiredEnv.join(', ')} in .env`"
+              :title="plugin.enabled ? '' : t('pluginManageRoles.requiresEnv', { env: plugin.requiredEnv.join(', ') })"
             >
               <input
                 v-model="newForm.selectedPlugins"
@@ -80,7 +84,7 @@
                 class="cursor-pointer disabled:cursor-not-allowed"
               />
               {{ plugin.name }}
-              <span v-if="!plugin.enabled" class="text-xs text-gray-400">(missing {{ plugin.requiredEnv.join(", ") }})</span>
+              <span v-if="!plugin.enabled" class="text-xs text-gray-400">{{ t("pluginManageRoles.missingEnv", { env: plugin.requiredEnv.join(", ") }) }}</span>
             </label>
           </div>
         </div>
@@ -88,8 +92,8 @@
         <!-- Starter queries -->
         <div>
           <label class="block text-xs font-medium text-gray-600 mb-1">
-            Starter queries
-            <span class="text-gray-400 font-normal">(one per line)</span>
+            {{ t("pluginManageRoles.fieldStarterQueries") }}
+            <span class="text-gray-400 font-normal">{{ t("pluginManageRoles.onePerLine") }}</span>
           </label>
           <textarea
             v-model="newForm.queriesText"
@@ -106,9 +110,11 @@
             :title="newFormError ?? ''"
             @click="saveNew"
           >
-            {{ saving ? "Creating…" : "Create" }}
+            {{ saving ? t("pluginManageRoles.creating") : t("pluginManageRoles.create") }}
+          </button>
+          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="cancelCreate">
+            {{ t("common.cancel") }}
           </button>
-          <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="cancelCreate">Cancel</button>
         </div>
         <div v-if="newFormError" class="text-xs text-gray-500" data-testid="role-form-hint">
           {{ newFormError }}
@@ -119,7 +125,7 @@
       </div>
 
       <div v-if="!creating && customRoles.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">
-        No custom roles yet. Click "+ Add" or ask Claude to create one.
+        {{ t("pluginManageRoles.emptyHint") }}
       </div>
 
       <ul v-if="customRoles.length > 0" class="p-4 space-y-2">
@@ -134,13 +140,16 @@
             <div class="flex-1 min-w-0">
               <div class="font-medium text-sm text-gray-800">
                 {{ role.name }}
-                <span class="ml-1 text-xs font-mono text-gray-400">({{ role.id }})</span>
+                <span class="ml-1 text-xs font-mono text-gray-400">{{ t("pluginManageRoles.idFormatted", { id: role.id }) }}</span>
               </div>
               <div class="text-xs text-gray-400 truncate">
                 {{ role.availablePlugins.join(", ") }}
               </div>
             </div>
-            <span class="material-icons text-gray-400 text-sm" :title="selectedId === role.id ? 'Collapse' : 'Expand'">
+            <span
+              class="material-icons text-gray-400 text-sm"
+              :title="selectedId === role.id ? t('pluginManageRoles.collapse') : t('pluginManageRoles.expand')"
+            >
               {{ selectedId === role.id ? "expand_less" : "expand_more" }}
             </span>
           </div>
@@ -150,7 +159,7 @@
             <!-- ID + Name + Icon row -->
             <div class="flex gap-3">
               <div class="w-40">
-                <label class="block text-xs font-medium text-gray-600 mb-1">ID</label>
+                <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldId") }}</label>
                 <input
                   v-model="editForm.id"
                   type="text"
@@ -158,7 +167,7 @@
                 />
               </div>
               <div class="flex-1">
-                <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
+                <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldName") }}</label>
                 <input
                   v-model="editForm.name"
                   type="text"
@@ -168,8 +177,10 @@
               </div>
               <div class="w-32">
                 <label class="block text-xs font-medium text-gray-600 mb-1">
-                  Icon
-                  <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">?</a>
+                  {{ t("pluginManageRoles.fieldIcon") }}
+                  <a class="text-blue-400 font-normal ml-1" href="https://fonts.google.com/icons" target="_blank" rel="noopener">{{
+                    t("pluginManageRoles.helpLink")
+                  }}</a>
                 </label>
                 <input
                   v-model="editForm.icon"
@@ -181,7 +192,7 @@
 
             <!-- Prompt -->
             <div>
-              <label class="block text-xs font-medium text-gray-600 mb-1">Prompt</label>
+              <label class="block text-xs font-medium text-gray-600 mb-1">{{ t("pluginManageRoles.fieldPrompt") }}</label>
               <textarea
                 v-model="editForm.prompt"
                 rows="6"
@@ -192,14 +203,14 @@
 
             <!-- Plugins -->
             <div>
-              <label class="block text-xs font-medium text-gray-600 mb-2">Plugins</label>
+              <label class="block text-xs font-medium text-gray-600 mb-2">{{ t("pluginManageRoles.fieldPlugins") }}</label>
               <div class="grid gap-x-4 gap-y-1 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
                 <label
                   v-for="plugin in availablePlugins"
                   :key="plugin.name"
                   class="flex items-center gap-2 text-sm cursor-pointer"
                   :class="plugin.enabled ? 'text-gray-700' : 'text-gray-400 cursor-not-allowed'"
-                  :title="plugin.enabled ? '' : `Requires ${plugin.requiredEnv.join(', ')} in .env`"
+                  :title="plugin.enabled ? '' : t('pluginManageRoles.requiresEnv', { env: plugin.requiredEnv.join(', ') })"
                 >
                   <input
                     v-model="editForm.selectedPlugins"
@@ -209,7 +220,9 @@
                     class="cursor-pointer disabled:cursor-not-allowed"
                   />
                   {{ plugin.name }}
-                  <span v-if="!plugin.enabled" class="text-xs text-gray-400">(missing {{ plugin.requiredEnv.join(", ") }})</span>
+                  <span v-if="!plugin.enabled" class="text-xs text-gray-400">{{
+                    t("pluginManageRoles.missingEnv", { env: plugin.requiredEnv.join(", ") })
+                  }}</span>
                 </label>
               </div>
             </div>
@@ -217,8 +230,8 @@
             <!-- Starter queries -->
             <div>
               <label class="block text-xs font-medium text-gray-600 mb-1">
-                Starter queries
-                <span class="text-gray-400 font-normal">(one per line)</span>
+                {{ t("pluginManageRoles.fieldStarterQueries") }}
+                <span class="text-gray-400 font-normal">{{ t("pluginManageRoles.onePerLine") }}</span>
               </label>
               <textarea
                 v-model="editForm.queriesText"
@@ -236,16 +249,18 @@
                   :title="editFormError ?? ''"
                   @click="saveEdit(role.id)"
                 >
-                  {{ saving ? "Updating…" : "Update" }}
+                  {{ saving ? t("pluginManageRoles.updating") : t("pluginManageRoles.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>
-                <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>
               </div>
               <button
                 class="px-3 py-1.5 text-sm rounded border border-red-200 text-red-500 hover:bg-red-50 disabled:opacity-50"
                 :disabled="saving"
                 @click="deleteRole(role.id)"
               >
-                Delete
+                {{ t("pluginManageRoles.delete") }}
               </button>
             </div>
             <div v-if="editFormError" class="text-xs text-gray-500">
@@ -263,6 +278,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useFreshPluginData } from "../../composables/useFreshPluginData";
 import { useAppApi } from "../../composables/useAppApi";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
@@ -271,6 +287,8 @@ import { getAllPluginNames } from "../../tools/index";
 import { apiGet, apiPost } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
 
+const { t } = useI18n();
+
 interface PluginEntry {
   name: string;
   enabled: boolean;
@@ -406,7 +424,10 @@ async function callManage(body: Record<string, unknown>): Promise<ManageResult>
     // give us anything useful.
     return {
       success: false,
-      error: result.status === 0 ? result.error || "Network error" : result.error || `Server error: ${result.status}`,
+      error:
+        result.status === 0
+          ? result.error || t("pluginManageRoles.errNetworkError")
+          : result.error || t("pluginManageRoles.errServerError", { status: result.status }),
     };
   }
   return result.data;
@@ -432,13 +453,13 @@ async function refreshList() {
 function validateRoleForm(form: EditForm, excludeId: string | null): string | null {
   const trimmedId = form.id.trim();
   const trimmedName = form.name.trim();
-  if (!trimmedId) return "ID is required.";
+  if (!trimmedId) return t("pluginManageRoles.errIdRequired");
   if (!/^[a-zA-Z0-9_-]+$/.test(trimmedId)) {
-    return "ID may only contain letters, numbers, '-' and '_'.";
+    return t("pluginManageRoles.errIdInvalid");
   }
-  if (!trimmedName) return "Name is required.";
+  if (!trimmedName) return t("pluginManageRoles.errNameRequired");
   if (customRoles.value.some((existing) => existing.id === trimmedId && existing.id !== excludeId)) {
-    return `A role with ID '${trimmedId}' already exists.`;
+    return t("pluginManageRoles.errIdDuplicate", { id: trimmedId });
   }
   return null;
 }
@@ -473,7 +494,7 @@ async function saveNew() {
     creating.value = false;
     await refreshList();
   } else {
-    createError.value = result.error ?? "Create failed";
+    createError.value = result.error ?? t("pluginManageRoles.errCreateFailed");
   }
   saving.value = false;
 }
@@ -505,7 +526,7 @@ async function saveEdit(originalId: string) {
     selectedId.value = null;
     await refreshList();
   } else {
-    saveError.value = result.error ?? "Save failed";
+    saveError.value = result.error ?? t("pluginManageRoles.errSaveFailed");
   }
   saving.value = false;
 }
@@ -518,7 +539,7 @@ async function deleteRole(roleId: string) {
     selectedId.value = null;
     await refreshList();
   } else {
-    saveError.value = result.error ?? "Delete failed";
+    saveError.value = result.error ?? t("pluginManageRoles.errDeleteFailed");
   }
   saving.value = false;
 }

package/src/plugins/manageRoles/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";
 
 export interface CustomRole {
   id: string;
@@ -27,14 +28,14 @@ const manageRolesPlugin: ToolPlugin = {
     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(),
     };
   },
   isEnabled: () => true,

package/src/plugins/manageSkills/Preview.vue

@@ -1,21 +1,26 @@
 <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 class="material-icons" style="font-size: 14px">auto_awesome</span>
-      <span>{{ skills.length }} skill{{ skills.length !== 1 ? "s" : "" }}</span>
+      <span>{{ t("pluginManageSkills.previewCount", skills.length, { named: { count: skills.length } }) }}</span>
     </div>
     <div v-for="skill in skills.slice(0, 6)" :key="skill.name" class="text-xs text-gray-600 truncate">
       {{ skill.name }}
     </div>
-    <div v-if="skills.length > 6" class="text-xs text-gray-400 italic">+{{ skills.length - 6 }} more</div>
+    <div v-if="skills.length > 6" class="text-xs text-gray-400 italic">
+      {{ t("pluginManageSkills.previewMore", { count: skills.length - 6 }) }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { ManageSkillsData } from "./index";
 
+const { t } = useI18n();
+
 const props = defineProps<{ result: ToolResultComplete<ManageSkillsData> }>();
 const skills = computed(() => props.result.data?.skills ?? []);
 </script>

package/src/plugins/manageSkills/View.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="h-full bg-white flex flex-col overflow-hidden">
     <!-- Header -->
-    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 shrink-0">
+    <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-gray-100 shrink-0">
       <div>
-        <h2 class="text-lg font-semibold text-gray-800">Skills</h2>
-        <p class="text-xs text-gray-400 mt-0.5">{{ skills.length }} available · click one to view · "Run" invokes it as /&lt;name&gt;</p>
+        <h2 class="text-lg font-semibold text-gray-800">{{ t("pluginManageSkills.heading") }}</h2>
+        <p class="text-xs text-gray-400 mt-0.5">{{ t("pluginManageSkills.subheading", { count: skills.length }) }}</p>
       </div>
     </div>
 
@@ -32,15 +32,16 @@
             {{ skill.source }}
           </div>
         </div>
-        <p v-if="skills.length === 0" class="p-4 text-sm text-gray-400 italic">
-          No skills found. Add skill folders under
-          <code class="text-[11px]">~/.claude/skills/</code>.
-        </p>
+        <i18n-t v-if="skills.length === 0" keypath="pluginManageSkills.emptyWithPath" tag="p" class="p-4 text-sm text-gray-400 italic">
+          <template #path>
+            <code class="text-[11px]">{{ t("pluginManageSkills.emptySkillPath") }}</code>
+          </template>
+        </i18n-t>
       </div>
 
       <!-- Right: detail pane -->
       <div class="flex-1 min-w-0 overflow-y-auto">
-        <div v-if="!selected" class="p-6 text-sm text-gray-400 italic">Select a skill on the left to view its SKILL.md.</div>
+        <div v-if="!selected" class="p-6 text-sm text-gray-400 italic">{{ t("pluginManageSkills.selectHint") }}</div>
         <div v-else class="p-6">
           <div class="flex items-start justify-between gap-4 mb-4">
             <div class="min-w-0">
@@ -54,64 +55,64 @@
             <div class="flex items-center gap-2 shrink-0">
               <template v-if="editing">
                 <button
-                  class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50 flex items-center gap-1"
+                  class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
                   data-testid="skill-cancel-btn"
                   @click="cancelEdit"
                 >
-                  Cancel
+                  {{ t("common.cancel") }}
                 </button>
                 <button
-                  class="px-3 py-1.5 text-sm rounded bg-green-600 hover:bg-green-700 text-white disabled:opacity-40 flex items-center gap-1"
+                  class="h-8 px-2.5 flex items-center gap-1 text-sm rounded bg-green-600 hover:bg-green-700 text-white disabled:opacity-40"
                   :disabled="saving"
                   data-testid="skill-save-btn"
                   @click="saveEdit"
                 >
-                  <span class="material-icons text-base">save</span>
-                  Save
+                  <span class="material-icons text-sm">save</span>
+                  {{ t("common.save") }}
                 </button>
               </template>
               <template v-else>
                 <button
                   v-if="detail && detail.source === 'project'"
-                  class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-40 flex items-center gap-1"
+                  class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-40"
                   :disabled="detailLoading"
                   data-testid="skill-edit-btn"
                   @click="startEdit"
                 >
-                  <span class="material-icons text-base">edit</span>
-                  Edit
+                  <span class="material-icons text-sm">edit</span>
+                  {{ t("pluginManageSkills.btnEdit") }}
                 </button>
                 <button
                   v-if="detail && detail.source === 'project'"
-                  class="px-3 py-1.5 text-sm rounded border border-red-300 text-red-600 hover:bg-red-50 disabled:opacity-40 flex items-center gap-1"
+                  class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-red-300 text-red-600 hover:bg-red-50 disabled:opacity-40"
                   :disabled="detailLoading || deleting"
                   data-testid="skill-delete-btn"
-                  title="Delete this project-scope skill"
+                  :title="t('pluginManageSkills.deleteProjectSkill')"
                   @click="deleteSkill"
                 >
-                  <span class="material-icons text-base">delete</span>
-                  Delete
+                  <span class="material-icons text-sm">delete</span>
+                  {{ t("pluginManageSkills.btnDelete") }}
                 </button>
                 <button
-                  class="px-3 py-1.5 text-sm rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40 flex items-center gap-1"
+                  class="h-8 px-2.5 flex items-center gap-1 text-sm rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-40"
                   :disabled="detailLoading || !detail"
                   data-testid="skill-run-btn"
                   @click="runSkill"
                 >
-                  <span class="material-icons text-base">play_arrow</span>
-                  Run
+                  <span class="material-icons text-sm">play_arrow</span>
+                  {{ t("pluginManageSkills.btnRun") }}
                 </button>
               </template>
             </div>
           </div>
-          <div v-if="detailLoading" class="text-sm text-gray-400 italic">Loading…</div>
+          <div v-if="detailLoading" class="text-sm text-gray-400 italic">{{ t("pluginManageSkills.loading") }}</div>
           <div v-else-if="detailError" class="text-sm text-red-600">
             {{ detailError }}
           </div>
           <!-- Edit mode -->
           <div v-else-if="editing && detail" class="space-y-4">
             <div>
-              <label class="block text-xs font-medium text-gray-500 mb-1"> Description </label>
+              <label class="block text-xs font-medium text-gray-500 mb-1"> {{ t("pluginManageSkills.fieldDescription") }} </label>
               <input
                 v-model="editDescription"
                 data-testid="skill-edit-description"
@@ -119,7 +120,7 @@
               />
             </div>
             <div class="flex-1">
-              <label class="block text-xs font-medium text-gray-500 mb-1"> Body (Markdown) </label>
+              <label class="block text-xs font-medium text-gray-500 mb-1"> {{ t("pluginManageSkills.fieldBody") }} </label>
               <textarea
                 v-model="editBody"
                 data-testid="skill-edit-body"
@@ -130,7 +131,7 @@
           <!-- View mode -->
           <!-- eslint-disable-next-line vue/no-v-html -- sanitized via DOMPurify -->
           <div v-else-if="detail && renderedBody" class="markdown-content text-gray-700" data-testid="skill-body-rendered" v-html="renderedBody"></div>
-          <p v-else-if="detail" class="text-sm text-gray-400 italic">(empty body)</p>
+          <p v-else-if="detail" class="text-sm text-gray-400 italic">{{ t("pluginManageSkills.emptyBody") }}</p>
         </div>
       </div>
     </div>
@@ -139,6 +140,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
@@ -147,6 +149,8 @@ import { useAppApi } from "../../composables/useAppApi";
 import { apiGet, apiPut, apiDelete } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
 
+const { t } = useI18n();
+
 interface SkillDetail {
   name: string;
   description: string;
@@ -199,7 +203,7 @@ onMounted(async () => {
   if (props.selectedResult || skills.value.length > 0) return;
   const response = await apiGet<{ skills: SkillSummary[] }>(API_ROUTES.skills.list);
   if (!response.ok) {
-    listError.value = `Failed to load skills: ${response.error}`;
+    listError.value = t("pluginManageSkills.errListFailed", { error: response.error });
     return;
   }
   if (Array.isArray(response.data.skills)) {
@@ -231,7 +235,7 @@ watch(
       return;
     }
     if (!response.ok) {
-      detailError.value = `Failed to load skill: ${response.error}`;
+      detailError.value = t("pluginManageSkills.errDetailFailed", { error: response.error });
       detail.value = null;
     } else {
       detail.value = response.data.skill;
@@ -263,7 +267,7 @@ async function saveEdit(): Promise<void> {
   });
   saving.value = false;
   if (!result.ok) {
-    detailError.value = `Save failed: ${result.error}`;
+    detailError.value = t("pluginManageSkills.errSaveFailed", { error: result.error });
     return;
   }
   detail.value = {
@@ -285,12 +289,13 @@ async function saveEdit(): Promise<void> {
 // Run = send the skill invocation as a Claude Code slash command.
 // Claude CLI already knows about every ~/.claude/skills/<name>/SKILL.md
 // at spawn, so sending `/<name>` is enough — no need to ship the body.
-// Routes through App.vue's sendMessage via provide/inject (#227).
+// Uses startNewChat (not sendMessage) so the user is routed to /chat
+// to see the response — Skills view is only rendered on /skills.
 const appApi = useAppApi();
 
 function runSkill(): void {
   if (!selectedName.value) return;
-  appApi.sendMessage(`/${selectedName.value}`);
+  appApi.startNewChat(`/${selectedName.value}`);
 }
 
 // Delete is project-scope only — see saveProjectSkill / deleteProjectSkill
@@ -300,14 +305,14 @@ function runSkill(): void {
 async function deleteSkill(): Promise<void> {
   if (!detail.value || detail.value.source !== "project") return;
   const name = detail.value.name;
-  if (!window.confirm(`Delete skill "${name}"? This removes ~/mulmoclaude/.claude/skills/${name}/SKILL.md.`)) {
+  if (!window.confirm(t("pluginManageSkills.confirmDelete", { name }))) {
     return;
   }
   deleting.value = true;
   const result = await apiDelete<unknown>(API_ROUTES.skills.remove.replace(":name", encodeURIComponent(name)));
   deleting.value = false;
   if (!result.ok) {
-    detailError.value = result.error || "Failed to delete";
+    detailError.value = result.error || t("pluginManageSkills.errDeleteFailed");
     return;
   }
   // Remove from the local list, advance selection, clear detail.