fix(canvas): label the generating skeleton with status, not the planned title

Show a localized "Generating" label on the artboard generation skeleton
while keeping the planned title as the aria-label, so in-progress nodes read
as a status instead of prematurely displaying their eventual name.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/i18n/locales/en-US.json

@@ -443,6 +443,7 @@
   "cadImportFailed": "CAD conversion failed. Check that the file is complete and uses a supported version.",
   "uploadingImage": "Uploading",
   "extractingText": "Extract text",
+  "generatingImage": "Generating",
   "textNode": "Text node",
   "frameNode": "Frame",
   "generateImage": "Generate image",

frontend/src/i18n/locales/zh-CN.json

@@ -443,6 +443,7 @@
   "cadImportFailed": "CAD 图纸转换失败，请确认文件完整且版本受支持。",
   "uploadingImage": "上传中",
   "extractingText": "提取文字",
+  "generatingImage": "正在生成中",
   "textNode": "文本节点",
   "frameNode": "画框",
   "generateImage": "生成图片",

frontend/src/ui/components/ArtboardPreview/index.tsx

@@ -35,7 +35,7 @@ export function ArtboardPreview({ node, viewportScale = 1, imageGeneratorTargetS
   }
 
   if (node.status === "generating") {
-    return <GeneratingArtboardSkeleton title={node.title} style={overlayUiStyle} />;
+    return <GeneratingArtboardSkeleton ariaLabel={node.title} label={t("generatingImage")} style={overlayUiStyle} />;
   }
 
   if (node.status === "text-extracting" && node.type === "image" && isImageUrl(node.content)) {
@@ -153,16 +153,16 @@ function WorkingImagePreview({ node, label, style }: { node: CanvasNode; label:
   );
 }
 
-function GeneratingArtboardSkeleton({ title, style }: { title: string; style?: CSSProperties }) {
+function GeneratingArtboardSkeleton({ ariaLabel, label, style }: { ariaLabel: string; label: string; style?: CSSProperties }) {
   return (
-    <div className="generation-skeleton" aria-label={title} style={style}>
+    <div className="generation-skeleton" aria-label={ariaLabel} style={style}>
       <div className="generation-skeleton-image" />
       <div className="generation-skeleton-lines">
         <span />
         <span />
         <span />
       </div>
-      <span className="generation-skeleton-label">{title}</span>
+      <span className="generation-skeleton-label">{label}</span>
     </div>
   );
 }

frontend/tests/artboardPreview.test.mjs

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+test("shows generation status instead of the planned image title", async () => {
+  const [localeSource, componentSource] = await Promise.all([
+    readFile(new URL("../src/i18n/locales/zh-CN.json", import.meta.url), "utf8"),
+    readFile(new URL("../src/ui/components/ArtboardPreview/index.tsx", import.meta.url), "utf8")
+  ]);
+  const locale = JSON.parse(localeSource);
+
+  assert.equal(locale.generatingImage, "正在生成中");
+  assert.match(componentSource, /GeneratingArtboardSkeleton ariaLabel=\{node\.title\} label=\{t\("generatingImage"\)\}/);
+});