mulmoclaude 0.1.2 → 0.4.0

package/src/plugins/canvas/View.vue

@@ -31,24 +31,36 @@
         </div>
 
         <div class="flex items-center gap-1">
-          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50" title="Undo" @click="undo">
+          <button
+            class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50"
+            :title="t('pluginCanvas.undo')"
+            @click="undo"
+          >
             <span class="material-icons text-sm">undo</span>
           </button>
-          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50" title="Redo" @click="redo">
+          <button
+            class="w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50"
+            :title="t('pluginCanvas.redo')"
+            @click="redo"
+          >
             <span class="material-icons text-sm">redo</span>
           </button>
-          <button class="w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50" title="Clear" @click="clear">
+          <button
+            class="w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50"
+            :title="t('pluginCanvas.clear')"
+            @click="clear"
+          >
             <span class="material-icons text-sm">delete</span>
           </button>
         </div>
       </div>
     </div>
 
-    <div class="flex-1 p-4 overflow-hidden">
+    <div ref="containerRef" class="flex-1 p-4 overflow-hidden">
       <VueDrawingCanvas
+        v-if="canvasWidth > 0"
         ref="canvasRef"
         :key="`${selectedResult?.uuid || 'default'}-${canvasRenderKey}`"
-        v-model:image="canvasImage"
         :width="canvasWidth"
         :height="canvasHeight"
         :stroke-type="'dash'"
@@ -59,20 +71,19 @@
         :line-width="brushSize"
         :color="brushColor"
         :background-color="'#FFFFFF'"
-        :background-image="undefined"
+        :background-image="backgroundImage"
         :watermark="undefined"
-        :initial-image="initialStrokes"
         save-as="png"
         :styles="{
           border: '1px solid #ddd',
           borderRadius: '8px',
         }"
         :lock="false"
-        @mouseup="handleDrawingEnd"
-        @touchend="handleDrawingEnd"
+        @mouseup="saveDrawing"
+        @touchend="saveDrawing"
       />
       <div class="flex items-center gap-2 flex-wrap mt-3">
-        <span class="text-xs text-gray-500 mr-1">Style:</span>
+        <span class="text-xs text-gray-500 mr-1">{{ t("pluginCanvas.styleLabel") }}</span>
         <button
           v-for="style in artStyles"
           :key="style.id"
@@ -87,22 +98,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
 import VueDrawingCanvas from "vue-drawing-canvas";
 import type { ToolResult } from "gui-chat-protocol/vue";
-import type { ImageToolData, CanvasDrawingState } from "./definition";
-import { apiPost, apiPut } from "../../utils/api";
+import type { ImageToolData } from "./definition";
+import { apiPut } from "../../utils/api";
 import { API_ROUTES } from "../../config/apiRoutes";
+import { resolveImageSrc } from "../../utils/image/resolve";
+import { bumpImage } from "../../utils/image/cacheBust";
+
+const { t } = useI18n();
 
 const props = defineProps<{
   selectedResult: ToolResult<ImageToolData> | null;
   sendTextMessage?: (text: string) => void;
 }>();
 
-const emit = defineEmits<{
-  updateResult: [result: ToolResult<ImageToolData>];
-}>();
-
 const artStyles = [
   { id: "ghibli", label: "Ghibli" },
   { id: "ukiyoe", label: "Ukiyoe" },
@@ -118,215 +130,119 @@ const artStyles = [
   { id: "pixelart", label: "Pixel Art" },
 ];
 
-const applyStyle = async (style: { id: string; label: string }) => {
-  const saved = await saveDrawingState();
-  if (!saved) return;
-  if (props.sendTextMessage) {
-    props.sendTextMessage(`Turn my drawing on the canvas into a ${style.label} style image.`);
-  }
+const applyStyle = (style: { id: string; label: string }) => {
+  props.sendTextMessage?.(`Turn my drawing on the canvas into a ${style.label} style image.`);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const canvasRef = ref<any>(null);
-const canvasImage = ref("");
+const containerRef = ref<HTMLDivElement | null>(null);
 const brushSize = ref(5);
 const brushColor = ref("#000000");
-const initialStrokes = ref([]);
-const canvasWidth = ref(800);
-const canvasHeight = ref(600);
+// `canvasWidth === 0` doubles as "not measured yet" — the child has a
+// v-if on `canvasWidth > 0` so it mounts exactly once, with the
+// correct dimensions. Mounting at a default 800×600 and resizing a
+// tick later races the in-flight background fetch and blanks the
+// canvas on reload.
+const canvasWidth = ref(0);
+const canvasHeight = ref(0);
 const canvasRenderKey = ref(0);
 
-// Track the server-side image path for this canvas instance.
-// Initialized from existing result data (if reopening a saved canvas).
-const imagePath = ref(
-  props.selectedResult?.data?.imageData && !props.selectedResult.data.imageData.startsWith("data:") ? props.selectedResult.data.imageData : "",
-);
-let uploadInFlight = false;
-let pendingSave = false;
-
-const restoreDrawingState = () => {
-  if (props.selectedResult?.viewState?.drawingState) {
-    const state = props.selectedResult.viewState.drawingState as CanvasDrawingState;
+// The PNG on disk is the source of truth. The path is baked into
+// the tool result at openCanvas time (server-allocated), so reload
+// finds the file with zero client→server sync. Every stroke PUTs
+// back to this same path.
+const imagePath = computed(() => {
+  const stored = props.selectedResult?.data?.imageData;
+  if (!stored || stored.startsWith("data:")) return "";
+  return stored;
+});
 
-    brushSize.value = state.brushSize || 5;
-    brushColor.value = state.brushColor || "#000000";
-    canvasWidth.value = state.canvasWidth || 800;
-    canvasHeight.value = state.canvasHeight || 600;
+// Per-mount cache buster for the VueDrawingCanvas child. The URL
+// must be stable for the lifetime of one canvas instance — if it
+// changes while the child is alive (e.g. from a post-save bump),
+// the library nulls its cached `loadedImage` and the next redraw
+// races a fresh re-fetch against stroke painting, blanking the
+// canvas. Tying the token to `canvasRenderKey` (which increments
+// when we explicitly remount via :key on resize) gives us fresh
+// bytes on page reload and on resize, without mid-session churn.
+const setupTime = Date.now();
+const backgroundImage = computed(() => {
+  if (!imagePath.value) return undefined;
+  const base = resolveImageSrc(imagePath.value);
+  const sep = base.includes("?") ? "&" : "?";
+  return `${base}${sep}mt=${setupTime}-${canvasRenderKey.value}`;
+});
 
-    if (state.strokes) {
-      initialStrokes.value = state.strokes as never[];
-    } else {
-      initialStrokes.value = [];
-    }
-  } else {
-    initialStrokes.value = [];
-  }
-  // Reinitialise imagePath from the incoming result so autosaves
-  // after a selectedResult change don't upload against the old path.
-  imagePath.value =
-    props.selectedResult?.data?.imageData && !props.selectedResult.data.imageData.startsWith("data:") ? props.selectedResult.data.imageData : "";
-};
-restoreDrawingState();
+let uploadInFlight = false;
+let pendingSave = false;
 
-const undo = async () => {
-  if (canvasRef.value) {
-    try {
-      canvasRef.value.undo();
-      // Wait for the canvas to update, then save state
-      setTimeout(saveDrawingState, 50);
-    } catch (error) {
-      console.warn("Undo operation failed:", error);
-    }
-  }
+// Undo/redo kick off the library's async redraw; give it a tick to
+// composite before we snapshot-and-upload.
+const undo = () => {
+  canvasRef.value?.undo();
+  setTimeout(saveDrawing, 50);
 };
-
-const redo = async () => {
-  if (canvasRef.value) {
-    try {
-      canvasRef.value.redo();
-      // Wait for the canvas to update, then save state
-      setTimeout(saveDrawingState, 50);
-    } catch (error) {
-      console.warn("Redo operation failed:", error);
-    }
-  }
+const redo = () => {
+  canvasRef.value?.redo();
+  setTimeout(saveDrawing, 50);
 };
-
 const clear = () => {
-  if (canvasRef.value) {
-    try {
-      canvasRef.value.reset();
-      saveDrawingState();
-    } catch (error) {
-      console.warn("Clear operation failed:", error);
-    }
-  }
-};
-
-const handleDrawingEnd = () => {
-  saveDrawingState();
+  canvasRef.value?.reset();
+  saveDrawing();
 };
 
-// Returns true if the drawing was successfully persisted, false
-// otherwise. Callers like applyStyle check the return value to avoid
-// sending a style request against stale image data.
-//
-// Captures a local snapshot of props.selectedResult and imagePath at
-// the start so an async upload never accidentally writes against a
-// different result that was swapped in mid-flight.
-const saveDrawingState = async (): Promise<boolean> => {
-  if (!canvasRef.value || !props.selectedResult) return false;
+// Snapshot the current bitmap and PUT it back to the pre-allocated
+// file. No result mutation — the path is fixed from canvas creation,
+// so nothing upstream needs to know about saves.
+const saveDrawing = async (): Promise<void> => {
+  if (!canvasRef.value || !imagePath.value) return;
   if (uploadInFlight) {
     pendingSave = true;
-    return false;
+    return;
   }
-  // Snapshot the current result and path *before* any await so a
-  // concurrent selectedResult swap doesn't silently redirect the
-  // upload.
-  const boundResult = props.selectedResult;
-  const boundImagePath = imagePath.value;
   uploadInFlight = true;
   try {
     const imageDataUri: string = await canvasRef.value.save();
-    const strokes = canvasRef.value.getAllStrokes();
-    const drawingState = {
-      strokes,
-      brushSize: brushSize.value,
-      brushColor: brushColor.value,
-      canvasWidth: canvasWidth.value,
-      canvasHeight: canvasHeight.value,
-    };
-
-    // If selectedResult changed while we were saving the canvas
-    // bitmap, abort — the upload would go to the wrong session.
-    if (boundResult !== props.selectedResult) return false;
-
-    const savedPath = boundImagePath
-      ? await (async () => {
-          const filename = boundImagePath.replace(/^images\//, "");
-          const result = await apiPut<{ path: string }>(API_ROUTES.image.update.replace(":filename", filename), { imageData: imageDataUri });
-          if (!result.ok) throw new Error(`PUT failed: ${result.error}`);
-          return result.data.path;
-        })()
-      : await (async () => {
-          const result = await apiPost<{ path: string }>(API_ROUTES.image.upload, {
-            imageData: imageDataUri,
-          });
-          if (!result.ok) throw new Error(`POST failed: ${result.error}`);
-          return result.data.path;
-        })();
-
-    imagePath.value = savedPath;
-
-    const updatedResult: ToolResult<ImageToolData> = {
-      ...boundResult,
-      data: {
-        prompt: boundResult.data?.prompt || "",
-        imageData: savedPath,
-      },
-      viewState: { drawingState },
-    };
-
-    emit("updateResult", updatedResult);
-    return true;
+    const filename = imagePath.value.split("/").pop() ?? "";
+    const result = await apiPut<{ path: string }>(API_ROUTES.image.update.replace(":filename", filename), { imageData: imageDataUri });
+    if (!result.ok) throw new Error(`PUT failed: ${result.error}`);
+    bumpImage(imagePath.value);
   } catch (error) {
-    console.error("Failed to save drawing state:", error);
-    return false;
+    console.error("Failed to save drawing:", error);
   } finally {
     uploadInFlight = false;
     if (pendingSave) {
       pendingSave = false;
-      void saveDrawingState();
+      void saveDrawing();
     }
   }
 };
 
-// Watch for selectedResult changes to restore drawing state
-watch(
-  () => props.selectedResult,
-  () => {
-    restoreDrawingState();
-  },
-  { immediate: false },
-);
-
-// Watch for changes to automatically save drawing state
-watch([brushSize, brushColor], () => {
-  saveDrawingState();
-});
-
-// Watch for canvas size changes and force re-mount
-watch([canvasWidth, canvasHeight], () => {
-  // Force canvas to re-mount with new dimensions by changing the key
-  canvasRenderKey.value++;
-});
 const updateCanvasSize = () => {
-  // Get the canvas container (the div with flex-1 p-4 overflow-hidden)
-  const canvasContainer = canvasRef.value?.$el?.parentElement;
-  if (canvasContainer) {
-    const containerRect = canvasContainer.getBoundingClientRect();
-
-    const padding = 32; // p-4 = 16px each side
-    const newWidth = Math.floor(containerRect.width - padding);
-    const newHeight = Math.floor((newWidth * 9) / 16);
-
-    // Only update if the size actually changed to avoid unnecessary re-renders
-    if (newWidth !== canvasWidth.value || newHeight !== canvasHeight.value) {
-      canvasWidth.value = newWidth;
-      canvasHeight.value = newHeight;
-    }
-  }
+  const container = containerRef.value;
+  if (!container) return;
+  const containerRect = container.getBoundingClientRect();
+  const padding = 32;
+  const newWidth = Math.floor(containerRect.width - padding);
+  const newHeight = Math.floor((newWidth * 9) / 16);
+  if (newWidth <= 0) return;
+  if (newWidth === canvasWidth.value && newHeight === canvasHeight.value) return;
+  const firstPaint = canvasWidth.value === 0;
+  canvasWidth.value = newWidth;
+  canvasHeight.value = newHeight;
+  // Remount the child on every size change *after* the first paint so
+  // it re-reads the background image at the new dimensions. The first
+  // paint doesn't need this — v-if gates the mount on `canvasWidth > 0`.
+  if (!firstPaint) canvasRenderKey.value++;
 };
 
 onMounted(async () => {
   await nextTick();
   updateCanvasSize();
-
-  // Listen for window resize to update canvas size
   window.addEventListener("resize", updateCanvasSize);
 });
 
-// Clean up resize listener
 onUnmounted(() => {
   window.removeEventListener("resize", updateCanvasSize);
 });

package/src/plugins/canvas/definition.ts

@@ -7,14 +7,6 @@ export interface ImageToolData {
   prompt: string;
 }
 
-export interface CanvasDrawingState {
-  brushSize?: number;
-  brushColor?: string;
-  canvasWidth?: number;
-  canvasHeight?: number;
-  strokes?: unknown[];
-}
-
 const toolDefinition: ToolDefinition = {
   type: "function",
   name: TOOL_NAME,

package/src/plugins/chart/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>
@@ -25,8 +25,8 @@ const hint = computed(() => {
   const charts = data.value?.document?.charts ?? [];
   if (charts.length === 0) return "";
   const types = charts
-    .map((c) => c.type ?? inferTypeFromOption(c.option))
-    .filter((t): t is string => Boolean(t))
+    .map((chart) => chart.type ?? inferTypeFromOption(chart.option))
+    .filter((chartType): chartType is string => Boolean(chartType))
     .slice(0, 3);
   const suffix = charts.length > types.length ? ", …" : "";
   const typeList = types.join(", ");
@@ -41,8 +41,8 @@ function inferTypeFromOption(option: Record<string, unknown>): string | null {
     const first = series[0] as { type?: unknown };
     if (typeof first.type === "string") return first.type;
   } else if (series && typeof series === "object") {
-    const t = (series as { type?: unknown }).type;
-    if (typeof t === "string") return t;
+    const seriesType = (series as { type?: unknown }).type;
+    if (typeof seriesType === "string") return seriesType;
   }
   return null;
 }

package/src/plugins/chart/View.vue

@@ -2,16 +2,18 @@
   <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 ?? "Chart" }}
+        {{ title ?? t("pluginChart.untitled") }}
+      </span>
+      <span class="text-xs text-gray-500 shrink-0">
+        {{ t("pluginChart.chartCount", charts.length, { named: { count: charts.length } }) }}
       </span>
-      <span class="text-xs text-gray-500 shrink-0"> {{ charts.length }} chart{{ charts.length === 1 ? "" : "s" }} </span>
     </div>
     <div class="flex-1 overflow-y-auto p-4 space-y-4">
       <div v-for="(chart, idx) in charts" :key="idx" class="border border-gray-200 rounded-lg bg-white" :data-testid="`chart-card-${idx}`">
         <div class="px-3 py-2 border-b border-gray-100 flex items-center justify-between gap-2">
           <div class="flex items-center gap-2 min-w-0">
             <span class="text-sm font-medium text-gray-800 truncate">
-              {{ chart.title ?? `Chart ${idx + 1}` }}
+              {{ chart.title ?? t("pluginChart.chartTitle", { num: idx + 1 }) }}
             </span>
             <span v-if="chart.type" class="text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5 bg-blue-50 text-blue-700 shrink-0">
               {{ chart.type }}
@@ -23,7 +25,7 @@
             @click="exportPng(idx, chart.title)"
           >
             <span class="material-icons text-sm align-middle">download</span>
-            PNG
+            {{ t("pluginChart.png") }}
           </button>
         </div>
         <div :ref="(el) => setChartRef(idx, el as HTMLDivElement | null)" class="w-full h-[400px]" :data-testid="`chart-canvas-${idx}`" />
@@ -34,11 +36,14 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import * as echarts from "echarts";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { ChartEntry, PresentChartData } from "./index";
 import { isRecord } from "../../utils/types";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   selectedResult: ToolResultComplete<PresentChartData>;
 }>();

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";