mulmoclaude 0.3.0 → 0.5.0

package/src/plugins/presentForm/definition.ts

@@ -0,0 +1,127 @@
+/**
+ * Form Tool Definition (Schema)
+ */
+
+import type { ToolDefinition } from "gui-chat-protocol";
+
+export const TOOL_NAME = "presentForm";
+
+export const TOOL_DEFINITION: ToolDefinition = {
+  type: "function",
+  name: TOOL_NAME,
+  description:
+    "Create a structured form to collect information from the user. Supports various field types including text input, textarea, multiple choice (radio), dropdown menus, checkboxes, date/time pickers, and number inputs. Each field can have validation rules and help text.",
+  parameters: {
+    type: "object",
+    properties: {
+      title: {
+        type: "string",
+        description: "Optional title for the form (e.g., 'User Registration')",
+      },
+      description: {
+        type: "string",
+        description: "Optional description explaining the purpose of the form",
+      },
+      fields: {
+        type: "array",
+        description: "Array of form fields with various types and configurations",
+        items: {
+          type: "object",
+          properties: {
+            id: {
+              type: "string",
+              description:
+                "Unique identifier for the field (e.g., 'email', 'birthdate'). This will be the key in the JSON response. Use descriptive camelCase or snake_case names.",
+            },
+            type: {
+              type: "string",
+              enum: ["text", "textarea", "radio", "dropdown", "checkbox", "date", "time", "number"],
+              description:
+                "Field type: 'text' for short text, 'textarea' for long text, 'radio' for 2-6 choices, 'dropdown' for many choices, 'checkbox' for multiple selections, 'date' for date picker, 'time' for time picker, 'number' for numeric input",
+            },
+            label: {
+              type: "string",
+              description: "Field label shown to the user",
+            },
+            description: {
+              type: "string",
+              description: "Optional help text explaining the field",
+            },
+            required: {
+              type: "boolean",
+              description: "Whether the field is required (default: false)",
+            },
+            placeholder: {
+              type: "string",
+              description: "Placeholder text for text/textarea fields",
+            },
+            validation: {
+              type: "string",
+              description: "For text fields: 'email', 'url', 'phone', or a regex pattern",
+            },
+            minLength: {
+              type: "number",
+              description: "Minimum character length for textarea fields",
+            },
+            maxLength: {
+              type: "number",
+              description: "Maximum character length for textarea fields",
+            },
+            rows: {
+              type: "number",
+              description: "Number of visible rows for textarea (default: 4)",
+            },
+            choices: {
+              type: "array",
+              items: { type: "string" },
+              description: "Array of choices for radio/dropdown/checkbox fields. Radio should have 2-6 choices, dropdown for 7+ choices.",
+            },
+            searchable: {
+              type: "boolean",
+              description: "Make dropdown searchable (for large lists)",
+            },
+            minSelections: {
+              type: "number",
+              description: "Minimum number of selections for checkbox fields",
+            },
+            maxSelections: {
+              type: "number",
+              description: "Maximum number of selections for checkbox fields",
+            },
+            minDate: {
+              type: "string",
+              description: "Minimum date (ISO format: YYYY-MM-DD)",
+            },
+            maxDate: {
+              type: "string",
+              description: "Maximum date (ISO format: YYYY-MM-DD)",
+            },
+            format: {
+              type: "string",
+              description: "Format for time fields: '12hr' or '24hr'",
+            },
+            min: {
+              type: "number",
+              description: "Minimum value for number fields",
+            },
+            max: {
+              type: "number",
+              description: "Maximum value for number fields",
+            },
+            step: {
+              type: "number",
+              description: "Step increment for number fields",
+            },
+            defaultValue: {
+              description:
+                "Optional default/pre-filled value for the field. Type varies by field: string for text/textarea/radio/dropdown/date/time, number for number fields, array of strings for checkbox fields. For radio/dropdown, must be one of the choices. For checkbox, must be a subset of choices.",
+            },
+          },
+          required: ["id", "type", "label"],
+        },
+        minItems: 1,
+      },
+    },
+    required: ["fields"],
+  },
+};

package/src/plugins/presentForm/index.ts

@@ -0,0 +1,18 @@
+import type { ToolPlugin } from "gui-chat-protocol/vue";
+import type { FormData, FormArgs } from "./types";
+import { TOOL_DEFINITION } from "./definition";
+import { executeForm } from "./plugin";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+
+const presentFormPlugin: ToolPlugin<never, FormData, FormArgs> = {
+  toolDefinition: TOOL_DEFINITION,
+  execute: executeForm,
+  generatingMessage: "Preparing form...",
+  isEnabled: () => true,
+  viewComponent: View,
+  previewComponent: Preview,
+};
+
+export default presentFormPlugin;
+export { TOOL_NAME } from "./definition";

package/src/plugins/presentForm/plugin.ts

@@ -0,0 +1,94 @@
+// Local fork of @mulmochat-plugin/form (originally
+// ~/ss/llm/GUIChatPlugins/MulmoChatPluginForm). Forked so the form
+// submission payload (see View.vue:handleSubmit) renders as readable
+// markdown bullets in the chat history instead of a JSON-wrapped
+// object.
+
+import type { ToolContext, ToolResult } from "gui-chat-protocol";
+import type { FormData, FormArgs, FormField } from "./types";
+
+export { TOOL_NAME, TOOL_DEFINITION } from "./definition";
+
+function validateChoiceField(field: FormField): void {
+  if (field.type === "radio") {
+    if (!Array.isArray(field.choices) || field.choices.length < 2) {
+      throw new Error(`Field '${field.id}': radio fields must have at least 2 choices`);
+    }
+    return;
+  }
+  if (field.type === "dropdown" || field.type === "checkbox") {
+    if (!Array.isArray(field.choices) || field.choices.length < 1) {
+      throw new Error(`Field '${field.id}': ${field.type} fields must have at least 1 choice`);
+    }
+  }
+}
+
+function validateCheckboxRange(field: FormField & { type: "checkbox" }): void {
+  const { minSelections, maxSelections, choices, id } = field;
+  if (minSelections !== undefined && maxSelections !== undefined && minSelections > maxSelections) {
+    throw new Error(`Field '${id}': minSelections cannot be greater than maxSelections`);
+  }
+  if (maxSelections !== undefined && maxSelections > choices.length) {
+    throw new Error(`Field '${id}': maxSelections cannot exceed number of choices`);
+  }
+  // Without this lower-bound check, a form with minSelections > choices.length
+  // would render but be impossible to submit — the user can never satisfy the
+  // minimum because there aren't enough options to pick.
+  if (minSelections !== undefined && minSelections > choices.length) {
+    throw new Error(`Field '${id}': minSelections cannot exceed number of choices`);
+  }
+}
+
+function validateRangeField(field: FormField): void {
+  if (
+    (field.type === "text" || field.type === "textarea") &&
+    field.minLength !== undefined &&
+    field.maxLength !== undefined &&
+    field.minLength > field.maxLength
+  ) {
+    throw new Error(`Field '${field.id}': minLength cannot be greater than maxLength`);
+  }
+  if (field.type === "number" && field.min !== undefined && field.max !== undefined && field.min > field.max) {
+    throw new Error(`Field '${field.id}': min cannot be greater than max`);
+  }
+  if (field.type === "date" && field.minDate && field.maxDate && field.minDate > field.maxDate) {
+    throw new Error(`Field '${field.id}': minDate cannot be after maxDate`);
+  }
+  if (field.type === "checkbox") validateCheckboxRange(field);
+}
+
+function validateField(field: FormField, index: number, seenIds: Set<string>): void {
+  if (!field.id || typeof field.id !== "string") throw new Error(`Field ${index + 1} must have a valid 'id' property`);
+  if (!field.type || typeof field.type !== "string") throw new Error(`Field ${index + 1} must have a valid 'type' property`);
+  if (!field.label || typeof field.label !== "string") throw new Error(`Field ${index + 1} must have a valid 'label' property`);
+  if (seenIds.has(field.id)) throw new Error(`Duplicate field ID: '${field.id}'`);
+  seenIds.add(field.id);
+  validateChoiceField(field);
+  validateRangeField(field);
+}
+
+export const executeForm = async (_context: ToolContext, args: FormArgs): Promise<ToolResult<never, FormData>> => {
+  try {
+    const { title, description, fields } = args;
+    if (!fields || !Array.isArray(fields) || fields.length === 0) {
+      throw new Error("At least one field is required");
+    }
+    const seen = new Set<string>();
+    fields.forEach((field, i) => validateField(field, i, seen));
+
+    const formData: FormData = { title, description, fields };
+    const fieldCount = `${fields.length} field${fields.length > 1 ? "s" : ""}`;
+    const titleSuffix = title ? `: ${title}` : "";
+    return {
+      message: `Form created with ${fieldCount}${titleSuffix}`,
+      jsonData: formData,
+      instructions:
+        "The form has been presented to the user. Wait for the user to fill out and submit it. They will reply with a markdown bullet list of `- {label}: {value}` lines.",
+    };
+  } catch (error) {
+    return {
+      message: `Form error: ${error instanceof Error ? error.message : "Unknown error"}`,
+      instructions: "Acknowledge that there was an error creating the form and suggest trying again with corrected field definitions.",
+    };
+  }
+};

package/src/plugins/presentForm/types.ts

@@ -0,0 +1,109 @@
+/**
+ * Form Plugin Types
+ *
+ * Form-specific type definitions only.
+ * Common types should be imported directly from gui-chat-protocol.
+ */
+
+// ============================================================================
+// Form-specific Types
+// ============================================================================
+
+/** Field type discriminator */
+export type FieldType = "text" | "textarea" | "radio" | "dropdown" | "checkbox" | "date" | "time" | "number";
+
+/** Base field interface */
+export interface BaseField {
+  id: string;
+  type: FieldType;
+  label: string;
+  description?: string;
+  required?: boolean;
+  maxLength?: number;
+}
+
+/** Text field */
+export interface TextField extends BaseField {
+  type: "text";
+  placeholder?: string;
+  validation?: "email" | "url" | "phone" | string;
+  defaultValue?: string;
+  minLength?: number;
+  maxLength?: number;
+}
+
+/** Textarea field */
+export interface TextareaField extends BaseField {
+  type: "textarea";
+  placeholder?: string;
+  minLength?: number;
+  maxLength?: number;
+  rows?: number;
+  defaultValue?: string;
+}
+
+/** Radio field */
+export interface RadioField extends BaseField {
+  type: "radio";
+  choices: string[];
+  defaultValue?: string;
+}
+
+/** Dropdown field */
+export interface DropdownField extends BaseField {
+  type: "dropdown";
+  choices: string[];
+  searchable?: boolean;
+  defaultValue?: string;
+}
+
+/** Checkbox field */
+export interface CheckboxField extends BaseField {
+  type: "checkbox";
+  choices: string[];
+  minSelections?: number;
+  maxSelections?: number;
+  defaultValue?: string[];
+}
+
+/** Date field */
+export interface DateField extends BaseField {
+  type: "date";
+  minDate?: string;
+  maxDate?: string;
+  format?: string;
+  defaultValue?: string;
+}
+
+/** Time field */
+export interface TimeField extends BaseField {
+  type: "time";
+  format?: "12hr" | "24hr";
+  defaultValue?: string;
+}
+
+/** Number field */
+export interface NumberField extends BaseField {
+  type: "number";
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+}
+
+/** Union type for all fields */
+export type FormField = TextField | TextareaField | RadioField | DropdownField | CheckboxField | DateField | TimeField | NumberField;
+
+/** Form data stored in result.jsonData */
+export interface FormData {
+  title?: string;
+  description?: string;
+  fields: FormField[];
+}
+
+/** Arguments passed to the form tool */
+export interface FormArgs {
+  title?: string;
+  description?: string;
+  fields: FormField[];
+}

package/src/plugins/presentHtml/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sm">
+  <div class="p-2 text-sm">
     <div class="font-medium text-gray-700 truncate mb-1">
       {{ title }}
     </div>

package/src/plugins/presentHtml/View.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="px-4 py-2 border-b border-gray-100 shrink-0 flex items-center justify-between">
-      <span class="text-sm font-medium text-gray-700 truncate">{{ title ?? "HTML Page" }}</span>
+      <span class="text-sm font-medium text-gray-700 truncate">{{ title ?? t("pluginPresentHtml.untitled") }}</span>
       <div class="flex items-center gap-2">
         <button
           class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0"
-          title="Save as PDF (opens print dialog)"
+          :title="t('pluginPresentHtml.saveAsPdf')"
           @click="printToPdf"
         >
           <span class="material-icons text-sm align-middle">picture_as_pdf</span>
-          PDF
+          {{ t("pluginPresentHtml.pdf") }}
         </button>
         <button class="px-2 py-1 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 shrink-0" @click="sourceOpen = !sourceOpen">
-          {{ sourceOpen ? "Hide Source <>" : "Show Source <>" }}
+          {{ sourceOpen ? t("pluginPresentHtml.hideSource") : t("pluginPresentHtml.showSource") }}
         </button>
       </div>
     </div>
@@ -25,9 +25,12 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { PresentHtmlData } from "./index";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedResult: ToolResultComplete<PresentHtmlData>;
 }>();

package/src/plugins/presentHtml/index.ts

@@ -5,6 +5,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 PresentHtmlData {
   html: string;
@@ -20,14 +21,14 @@ const presentHtmlPlugin: ToolPlugin<PresentHtmlData> = {
     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/presentMulmoScript/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sm">
+  <div class="p-2 text-sm">
     <div class="font-medium text-gray-700 truncate mb-1">
       {{ title }}
     </div>

package/src/plugins/presentMulmoScript/View.vue

@@ -10,7 +10,7 @@
           {{ script.description }}
         </p>
         <div class="flex items-center gap-3 mt-1 text-xs text-gray-400">
-          <span>{{ beats.length }} beat{{ beats.length !== 1 ? "s" : "" }}</span>
+          <span>{{ t("pluginMulmoScript.beatCount", beats.length, { named: { count: beats.length } }) }}</span>
           <span v-if="script.lang">{{ script.lang }}</span>
           <span v-if="filePath" class="truncate">{{ filePath }}</span>
         </div>
@@ -24,7 +24,7 @@
           class="px-3 py-1 text-xs rounded-full border transition-colors border-gray-200 text-gray-500 hover:bg-gray-50 flex items-center justify-center gap-1"
         >
           <span class="material-icons text-sm leading-none">download</span>
-          <span>Movie</span>
+          <span>{{ t("pluginMulmoScript.movie") }}</span>
         </a>
         <!-- Generate / Regenerate Movie -->
         <button
@@ -36,10 +36,10 @@
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
           </svg>
-          <span v-if="movieGenerating">Generating…</span>
+          <span v-if="movieGenerating">{{ t("pluginMulmoScript.generating") }}</span>
           <template v-else>
             <span class="material-icons text-sm leading-none">refresh</span>
-            <span>Movie</span>
+            <span>{{ t("pluginMulmoScript.movie") }}</span>
           </template>
         </button>
       </div>
@@ -48,13 +48,13 @@
     <!-- Characters section -->
     <div v-if="characterKeys.length > 0" class="border-b border-gray-100 shrink-0 px-4 py-3">
       <div class="flex items-center justify-between mb-2">
-        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Characters</span>
+        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t("pluginMulmoScript.characters") }}</span>
         <button
           class="px-2 py-0.5 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50"
           :disabled="movieGenerating || anyBeatRendering || characterKeys.every((key) => charRenderState[key] === 'rendering')"
           @click="generateAllCharacters"
         >
-          Generate All
+          {{ t("pluginMulmoScript.generateAll") }}
         </button>
       </div>
       <div class="flex gap-3 flex-wrap">
@@ -88,11 +88,11 @@
             </template>
             <!-- Permanent drop hint -->
             <div v-if="!charDragOver[key]" class="absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none">
-              or drop image
+              {{ t("pluginMulmoScript.orDropImage") }}
             </div>
             <!-- Drop overlay -->
             <div v-if="charDragOver[key]" class="absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none">
-              <span class="text-xs text-blue-500 font-medium">Drop</span>
+              <span class="text-xs text-blue-500 font-medium">{{ t("pluginMulmoScript.drop") }}</span>
             </div>
             <!-- Regenerate button -->
             <button
@@ -121,7 +121,7 @@
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
               </svg>
-              <span v-else>Gen</span>
+              <span v-else>{{ t("pluginMulmoScript.gen") }}</span>
             </button>
           </div>
           <span class="text-xs text-gray-600 text-center truncate w-full">{{ key }}</span>
@@ -163,7 +163,7 @@
                   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                   <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                 </svg>
-                <span class="text-xs text-green-500">Rendering…</span>
+                <span class="text-xs text-green-500">{{ t("pluginMulmoScript.rendering") }}</span>
               </template>
               <template v-else-if="renderState[index] === 'error'">
                 <span class="text-xs text-red-400 text-center">{{ renderErrors[index] }}</span>
@@ -177,13 +177,13 @@
             </div>
             <!-- Beat drop hint / overlay -->
             <div v-if="beatDragOver[index]" class="absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none">
-              <span class="text-xs text-blue-500 font-medium">Drop</span>
+              <span class="text-xs text-blue-500 font-medium">{{ t("pluginMulmoScript.drop") }}</span>
             </div>
             <div
               v-else-if="!renderedImages[index] && renderState[index] !== 'rendering'"
               class="absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none"
             >
-              or drop image
+              {{ t("pluginMulmoScript.orDropImage") }}
             </div>
             <!-- Generate button for imagePrompt beats -->
             <button
@@ -191,7 +191,7 @@
               class="absolute top-1.5 right-1.5 flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50"
               @click="renderBeat(index)"
             >
-              Generate
+              {{ t("pluginMulmoScript.generate") }}
             </button>
           </div>
 
@@ -213,10 +213,10 @@
                   :class="playingAudio?.index === index ? 'border-red-400 text-red-600 hover:bg-red-50' : 'border-green-400 text-green-600 hover:bg-green-50'"
                   @click="playAudio(index)"
                 >
-                  {{ playingAudio?.index === index ? "■ Stop" : "▶ Play" }}
+                  {{ playingAudio?.index === index ? t("pluginMulmoScript.stop") : t("pluginMulmoScript.play") }}
                 </button>
                 <template v-else-if="audioErrors[index]">
-                  <span class="text-xs text-red-400" :title="audioErrors[index]">⚠ Error</span>
+                  <span class="text-xs text-red-400" :title="audioErrors[index]">{{ t("pluginMulmoScript.errPrefix") }}</span>
                   <button
                     v-if="effectiveBeat(index).text"
                     class="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50"
@@ -231,7 +231,7 @@
                   class="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50"
                   @click="generateAudio(index)"
                 >
-                  ♪ Generate
+                  {{ t("pluginMulmoScript.generateAudio") }}
                 </button>
               </div>
               <button class="text-gray-400 hover:text-gray-600" :title="sourceOpen[index] ? 'Hide source' : 'Show source'" @click="toggleSource(index)">
@@ -263,7 +263,11 @@
             spellcheck="false"
           />
           <div class="flex items-center justify-end gap-2 px-2 pb-2">
-            <span v-if="beatSaveErrors[index]" class="text-xs text-red-600" role="alert">⚠ {{ beatSaveErrors[index] }}</span>
+            <span v-if="beatSaveErrors[index]" class="text-xs text-red-600" role="alert">{{
+              t(beatSaveErrors[index].kind === "invalidJson" ? "pluginMulmoScript.saveErrorInvalidJson" : "pluginMulmoScript.saveErrorSaveFailed", {
+                error: beatSaveErrors[index].error,
+              })
+            }}</span>
             <button
               class="px-2 py-1 text-xs rounded border"
               :class="
@@ -274,19 +278,19 @@
               :disabled="!isValidBeat(index) || !!beatSaving[index]"
               @click="updateBeat(index)"
             >
-              {{ beatSaving[index] ? "Saving…" : "Update" }}
+              {{ beatSaving[index] ? t("pluginMulmoScript.saving") : t("pluginMulmoScript.update") }}
             </button>
           </div>
         </div>
       </div>
 
-      <div v-if="beats.length === 0" class="flex items-center justify-center h-32 text-gray-400 text-sm">No beats found in script</div>
+      <div v-if="beats.length === 0" class="flex items-center justify-center h-32 text-gray-400 text-sm">{{ t("pluginMulmoScript.noBeats") }}</div>
     </div>
 
     <!-- Bottom bar: Edit Script Source + Copy -->
     <div class="bottom-bar-wrapper">
       <details ref="sourceDetails" class="script-source" @toggle="onSourceToggle(($event.target as HTMLDetailsElement).open)">
-        <summary>Edit Script Source</summary>
+        <summary>{{ t("pluginMulmoScript.editSource") }}</summary>
         <textarea
           v-model="editableSource"
           class="script-editor"
@@ -294,8 +298,8 @@
           spellcheck="false"
         ></textarea>
         <div class="editor-actions">
-          <button class="apply-btn" :disabled="!sourceChanged || !sourceValid" @click="applySource">Apply Changes</button>
-          <button class="cancel-btn" @click="cancelSourceEdit">Cancel</button>
+          <button class="apply-btn" :disabled="!sourceChanged || !sourceValid" @click="applySource">{{ t("pluginMulmoScript.applyChanges") }}</button>
+          <button class="cancel-btn" @click="cancelSourceEdit">{{ t("common.cancel") }}</button>
         </div>
       </details>
       <button v-show="!editing" class="copy-btn" :title="copied ? 'Copied!' : 'Copy'" @click="copyText">
@@ -328,7 +332,7 @@
               "
               @click="playAudio(lightbox.index)"
             >
-              {{ playingAudio?.index === lightbox.index ? "■ Stop" : "▶ Play" }}
+              {{ playingAudio?.index === lightbox.index ? t("pluginMulmoScript.stop") : t("pluginMulmoScript.play") }}
             </button>
           </div>
         </div>
@@ -347,7 +351,10 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
+
+const { t } = useI18n();
 import type { MulmoScriptData } from "./index";
 import { mulmoBeatSchema, mulmoScriptSchema } from "@mulmocast/types";
 import { extractErrorMessage, getMissingCharacterKeys, shouldAutoRenderBeat, streamMovieEvents, validateBeatJSON } from "./helpers";
@@ -407,7 +414,10 @@ const sourceOpen = reactive<Record<number, boolean>>({});
 const sourceText = reactive<Record<number, string>>({});
 // Surface POST /api/mulmo-script/update-beat failures inline next to
 // the Update button. Cleared on next successful save or editor close.
-const beatSaveErrors = reactive<Record<number, string>>({});
+// Store raw error + kind tag so the template picks a localized key,
+// instead of pre-composing an English-prefixed string here.
+type BeatSaveError = { kind: "invalidJson" | "saveFailed"; error: string };
+const beatSaveErrors = reactive<Record<number, BeatSaveError>>({});
 const beatSaving = reactive<Record<number, boolean>>({});
 const localOverrides = reactive<Record<number, Beat>>({});
 const movieGenerating = ref(false);
@@ -606,7 +616,7 @@ async function updateBeat(index: number) {
   try {
     beat = JSON.parse(sourceText[index]);
   } catch (err) {
-    beatSaveErrors[index] = `Invalid JSON: ${errorMessage(err)}`;
+    beatSaveErrors[index] = { kind: "invalidJson", error: errorMessage(err) };
     return;
   }
   const prevImage = JSON.stringify(effectiveBeat(index).image);
@@ -620,7 +630,7 @@ async function updateBeat(index: number) {
   });
   delete beatSaving[index];
   if (!response.ok) {
-    beatSaveErrors[index] = `Save failed: ${response.error}`;
+    beatSaveErrors[index] = { kind: "saveFailed", error: response.error };
     return;
   }