fix(ui): preserve UTF-16 workshop previews (#104047)

steipete · web-flow · commit 67e1d4391153 · 2026-07-10T18:45:04.000-07:00
diff --git a/ui/src/pages/skill-workshop/skill-workshop-page.test.ts b/ui/src/pages/skill-workshop/skill-workshop-page.test.ts
@@ -75,6 +75,43 @@ afterEach(() => {
 });
 
 describe("SkillWorkshopPage lifecycle", () => {
+  it("renders truncated Today previews without dangling surrogates", async () => {
+    const previewText = `${"a".repeat(118)}😀trailing`;
+    const proposal = {
+      key: "proposal-utf16-preview",
+      slug: "proposal-utf16-preview",
+      name: "UTF-16 preview",
+      oneLine: "Preview boundary coverage",
+      body: `## Workflow\n- ${previewText}`,
+      status: "pending",
+      version: 1,
+      createdAt: 0,
+      updatedAt: 0,
+      recencyGroup: "today",
+      ageLabel: "now",
+      supportFiles: [],
+      isNew: false,
+      origin: {
+        agentId: "research",
+        sessionKey: "agent:research:proposal-utf16-preview",
+      },
+    } satisfies SkillWorkshopProposal;
+    const loadedState = createSkillWorkshopState();
+    loadedState.skillWorkshopAgentId = "research";
+    loadedState.skillWorkshopLoaded = true;
+    loadedState.skillWorkshopProposals = [proposal];
+    loadedState.skillWorkshopSelectedKey = proposal.key;
+    const page = document.createElement(
+      "openclaw-skill-workshop-page",
+    ) as SkillWorkshopPageTestElement;
+    page.data = skillWorkshopRouteData(loadedState);
+    page.context = createContext(vi.fn(async () => ({})));
+    document.body.append(page);
+    await page.updateComplete;
+
+    expect(page.querySelector(".sw-today__does li")?.textContent).toBe(`${"a".repeat(118)}…`);
+  });
+
   it("forces a fresh proposal load when the gateway source changes", async () => {
     const firstRequest = vi.fn(async () => ({}));
     const secondRequest = vi.fn(async () => ({
diff --git a/ui/src/pages/skill-workshop/view.ts b/ui/src/pages/skill-workshop/view.ts
@@ -1,4 +1,5 @@
 // Control UI view renders skill workshop screen content.
+import { truncateUtf16Safe } from "@openclaw/normalization-core/utf16-slice";
 import { html, nothing } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -916,7 +917,7 @@ function truncateAtWord(value: string, maxChars: number): string {
   if (value.length <= maxChars) {
     return value;
   }
-  const clipped = value.slice(0, maxChars - 1);
+  const clipped = truncateUtf16Safe(value, maxChars - 1);
   const boundary = clipped.lastIndexOf(" ");
   const base = boundary > 48 ? clipped.slice(0, boundary) : clipped;
   return `${base.trimEnd()}…`;
